/* Recomendador de tratamientos (solo se carga en /recomendador) */
.reco-portada.portada.escena { min-height: min(78vh, 720px); }
.recomendador { padding-block: clamp(40px, 6vw, 88px) var(--seccion); max-width: 1100px; }
.reco-bloque { border: 0; margin: 0 0 clamp(36px, 5vw, 64px); padding: 0; }
.reco-legend { display: grid; gap: 8px; font-family: var(--f-display); font-weight: 300; font-size: var(--t-3); margin-bottom: 22px; padding: 0; }
.reco-objetivos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reco-objetivo { position: relative; display: block; aspect-ratio: 4 / 3.2; border-radius: 22px; overflow: hidden; cursor: pointer; isolation: isolate; color: var(--perla);
  box-shadow: inset 0 0 0 0 var(--petalo); transition: transform .4s var(--curva-salida), box-shadow .3s; }
.reco-objetivo picture, .reco-objetivo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--curva-salida); }
.reco-objetivo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(23, 12, 40, .85) 0%, rgba(23, 12, 40, .15) 60%); }
.reco-objetivo span { position: absolute; left: 16px; right: 16px; bottom: 14px; font-family: var(--f-display); font-size: 1.25rem; line-height: 1.15; }
.reco-objetivo input { position: absolute; opacity: 0; }
.reco-objetivo:hover img { transform: scale(1.05); }
.reco-objetivo:has(input:checked) { box-shadow: inset 0 0 0 3px var(--petalo), var(--sombra-suave); transform: translateY(-3px); }
.reco-objetivo:has(input:focus-visible) { outline: 2px solid var(--violeta); outline-offset: 3px; }
.reco-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.reco-campos .campo > span { font-size: .84rem; font-weight: 600; color: var(--tinta-2); }
.reco-opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.reco-opcion { position: relative; }
.reco-opcion input { position: absolute; opacity: 0; }
.reco-opcion span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--perla); box-shadow: inset 0 0 0 1px var(--linea);
  font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.reco-opcion input:checked + span { background: var(--ciruela); color: var(--perla); box-shadow: none; }
.reco-opcion input:focus-visible + span { outline: 2px solid var(--violeta); outline-offset: 2px; }
.reco-final .casilla { margin-top: 4px; }
.reco-final .btn { margin-top: 18px; }
.reco-resultado { padding-top: 12px; }
.reco-resultado .titular { margin: 12px 0 16px; }
.reco-datos { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.reco-datos li { padding: 8px 14px; border-radius: 999px; background: rgba(91, 58, 147, .08); color: var(--ciruela); font-weight: 600; font-size: .88rem; }
/* Sin tarjeta: la foto se desvanece hacia el texto, igual que las escenas del resto de la página */
.reco-recs { display: grid; gap: clamp(18px, 3vw, 34px); margin: 26px 0; }
.reco-rec { display: grid; grid-template-columns: minmax(260px, 36%) minmax(0, 1fr); gap: 0; align-items: center; }
.reco-rec__foto { position: relative; min-height: 270px;
  -webkit-mask-image: linear-gradient(to right, #000 45%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, #000 45%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.reco-rec__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.reco-rec__texto { padding: 18px 0 18px 4px; }
.reco-rec h3 { font-size: 1.5rem; font-weight: 400; margin: 8px 0 8px; }
.reco-rec p { color: var(--tinta-2); margin-bottom: 14px; }
.reco-avisos { margin: 0 0 14px; }
.reco-ctas { margin-top: 22px; align-items: center; }
.reco-ctas svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .reco-objetivos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reco-campos { grid-template-columns: minmax(0, 1fr); }
  .reco-rec { grid-template-columns: minmax(0, 1fr); }
  .reco-rec__foto { min-height: 0; aspect-ratio: 16 / 10; margin-inline: calc(-1 * var(--canal));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 58%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add; }
  .reco-rec__texto { padding: 0 0 8px; margin-top: -28px; position: relative; }
}
@media (max-width: 430px) { .reco-objetivo span { font-size: 1.05rem; } }