/* ============================================================
   tratamientos.css — tarjetas de tratamiento y rejilla de servicios
   ============================================================ */

.trat-grid {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Con cuatro tratamientos, tres columnas dejan una tarjeta sola en
   la segunda fila. A dos columnas la rejilla cierra en 2×2. La
   condición del :has evita que una rejilla de una sola ficha se
   quede a media anchura. */
@media (min-width: 900px) {
  .trat-grid:has(> :nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-4);
  }
}

.trat-card {
  display: flex;
  flex-direction: column;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-xl);
  overflow: hidden;
  transition: transform var(--t-media) var(--ease-suave),
              box-shadow var(--t-media) ease,
              border-color var(--t-media) ease;
}

/* Elevación al pasar el cursor (solo donde hay cursor real) */
@media (hover: hover) {
  .trat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra-tarjeta);
    border-color: var(--color-vegetal);
  }
}

.trat-card:focus-within {
  border-color: var(--color-acento-oscuro);
}

/* ══════════════════════════════════════════════════════════
   PORTADA DE CADA TRATAMIENTO

   Las fotos de la clínica son verticales 2:3, así que el hueco va
   en 2:3. Un hueco apaisado obligaría a recortar, y lo que se
   pierde es siempre la mitad de abajo: las manos, el cabezal y la
   zona que se está tratando, que es justo lo que hay que enseñar.
   Con la proporción de la foto no se recorta nada.

   Sin escala ni desenfoque tampoco. El desenfoque del relevo
   necesita un pelo de escala de más para no dejar ver el borde de
   la caja, y esa escala recorta un 4%: aquí la foto entra y sale
   solo con opacidad.
   ══════════════════════════════════════════════════════════ */

.trat-card-foto,
.trat-fila-media {
  --diapos-ratio: 2 / 3;
  /* Más corto que en la foto grande de una ficha: en un hueco de
     esta anchura el fundido largo se pasa media vida a medio camino
     y el cambio no se lee como cambio */
  --diapos-fundido: 700ms;
  margin: 0;
}

.trat-card-foto .diapos-img,
.trat-fila-media .diapos-img,
.trat-card-foto[data-diapos-listo] .diapos-img,
.trat-fila-media[data-diapos-listo] .diapos-img,
.trat-card-foto[data-diapos-listo] .diapos-img.is-activa,
.trat-fila-media[data-diapos-listo] .diapos-img.is-activa {
  transform: none;
  filter: none;
}

.trat-card-foto[data-diapos-anima] .diapos-img,
.trat-fila-media[data-diapos-anima] .diapos-img {
  transition: opacity var(--diapos-fundido) var(--ease-suave);
}

.trat-card-foto .diapos-marco { border-radius: 0; }

.trat-card-cuerpo {
  padding: var(--esp-3);
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  flex: 1;
}

.trat-card-titulo {
  font-family: var(--font-titular);
  font-weight: var(--peso-titular);
  font-size: var(--txt-md);
  line-height: 1.2;
  margin: 0;
}

/* El título es el enlace: así el target táctil cubre toda la línea */
.trat-card-titulo a {
  display: inline-block;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.trat-card-resumen {
  font-size: var(--txt-sm);
  font-weight: var(--peso-ligero);
  line-height: 1.6;
  color: var(--color-texto-secundario);
  margin: 0;
  flex: 1;
}

.trat-card-datos {
  display: grid;
  gap: var(--esp-1);
  margin: var(--esp-1) 0;
  padding-top: var(--esp-2);
  border-top: 1px solid var(--color-borde);
}

.trat-card-datos dt {
  font-size: var(--txt-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-acento-oscuro);
}

.trat-card-datos dd {
  margin: 2px 0 0;
  font-size: var(--txt-sm);
  font-weight: var(--peso-ligero);
}

/* ══════════════════════════════════════════════════════════
   LISTA DE TRATAMIENTOS — página de tratamientos

   En la portada las cuatro fichas van en rejilla, que es lo que
   toca cuando compiten por la atención con el resto de la home.
   Aquí no compiten con nada: es su página. Por eso cada una ocupa
   una fila entera, con la imagen a un lado y el texto al otro,
   alternando el lado para que la vista no se duerma bajando.
   ══════════════════════════════════════════════════════════ */

.trat-lista {
  display: grid;
  gap: var(--esp-8);
  margin: var(--esp-4) 0;
}

.trat-fila {
  display: grid;
  gap: var(--esp-4);
  align-items: center;
  padding-top: var(--esp-6);
  border-top: 1px solid var(--color-borde);
}

.trat-fila:first-child { padding-top: 0; border-top: 0; }

@media (min-width: 860px) {
  .trat-fila {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-8);
  }

  /* Las pares invierten el orden: imagen a la derecha */
  .trat-fila:nth-child(even) .trat-fila-media { order: 2; }
}

/* La proporción, el fundido y el redondeo de la portada de la fila
   están arriba, junto con los de la tarjeta: son la misma portada. */

.trat-fila-cuerpo { min-width: 0; }

.trat-fila-titulo {
  font-family: var(--font-titular);
  font-weight: var(--peso-titular);
  font-size: clamp(1.5rem, 3.4vw, var(--txt-xl));
  line-height: 1.15;
  margin: 0 0 var(--esp-2);
}

.trat-fila-titulo a { color: var(--color-texto); }

.trat-fila-resumen {
  font-weight: var(--peso-ligero);
  line-height: 1.7;
  color: var(--color-texto-secundario);
  margin: 0 0 var(--esp-3);
  max-width: 52ch;
}

.trat-fila-datos {
  display: grid;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-3);
}

@media (min-width: 520px) {
  .trat-fila-datos { grid-template-columns: repeat(2, 1fr); }
}

.trat-fila-datos div {
  border-top: 1px solid var(--color-borde);
  padding-top: var(--esp-1);
}

.trat-fila-datos dt {
  font-size: var(--txt-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-acento-oscuro);
}

.trat-fila-datos dd {
  margin: 4px 0 0;
  font-size: var(--txt-sm);
  font-weight: var(--peso-ligero);
  line-height: 1.5;
}