/* ============================================================
   hero.css — portada de la home y ficha de valoración

   La portada la manda el isotipo: no una versión plana del logo,
   sino el mismo trazo del manual levantado en volumen. Son 36
   copias de la forma separadas en el eje Z, todas del mismo color;
   el navegador las compone en 3D de verdad, con su perspectiva y
   su giro. Cero librerías y cero JavaScript.

   Los archivos oficiales del logotipo no se tocan: el nav, el pie
   y el favicon siguen usando los SVG intactos. Esto es una pieza
   decorativa construida a partir de la geometría de la marca.

   Más abajo vive la ficha de valoración, que bajó de la portada a
   la sección de «Cómo empezamos», que es su sitio.

   Todas las animaciones se apagan en `css/animaciones.css` con el
   bloque de prefers-reduced-motion.
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: var(--padding-cabecera);
  padding-bottom: var(--esp-5);
  background: var(--color-superficie);
}

/* ══════════════════════════════════════════════════════════
   1. FONDO
   Dos manchas de color de la paleta que van y vienen muy despacio.
   Ninguna baja hasta la franja de datos: ahí abajo una mancha se
   lee como una sombra sucia, no como fondo.
   ══════════════════════════════════════════════════════════ */

.hero-fondo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-aurora {
  position: absolute;
  border-radius: var(--radio-circulo);
  filter: blur(70px);
}

.hero-aurora--a {
  width: 46vw;
  min-width: 320px;
  aspect-ratio: 1.3;
  top: -14%;
  left: -10%;
  background: color-mix(in oklab, var(--marca-pale-silver) 62%, transparent);
}

.hero-aurora--b {
  width: 42vw;
  min-width: 280px;
  aspect-ratio: 1.1;
  top: 18%;
  right: -14%;
  background: color-mix(in oklab, var(--marca-camel) 24%, transparent);
}

/* ══════════════════════════════════════════════════════════
   2. RETÍCULA
   ══════════════════════════════════════════════════════════ */

.hero-interior {
  position: relative;
  flex: 1;
  display: grid;
  gap: var(--esp-4);
  align-content: center;
  align-items: center;
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding-left: var(--padding-lateral);
  padding-right: var(--padding-lateral);
}

@media (min-width: 960px) {
  .hero-interior {
    grid-template-columns: 1.1fr 0.9fr;
    /* 48px dejaban la pieza pegada al titular; el doble le da aire
       sin robarle sitio al texto, que conserva su proporción. */
    gap: var(--esp-12);
  }
}

/* ══════════════════════════════════════════════════════════
   3. EL ISOTIPO EN VOLUMEN
   Cada `.iso3d-capa` es la misma forma un poco más adelante en el
   eje Z. El degradado entre la capa del fondo y la de delante es
   lo que se lee como profundidad: sin él serían 36 siluetas planas
   superpuestas.
   ══════════════════════════════════════════════════════════ */

.iso3d {
  --iso-n: 35;                 /* índice de la última capa */
  --iso-paso: clamp(1px, 0.28vw, 1.9px);

  /* Un solo color, el Kombu Green del manual. Lo que se lee como
     volumen no son colores distintos sino la misma tinta yendo del
     fondo de la pieza a la cara iluminada. */
  --iso-hueco:  color-mix(in oklab, var(--marca-kombu-green) 38%, #000);
  --iso-cuerpo: var(--marca-kombu-green);
  --iso-luz:    color-mix(in oklab, var(--marca-kombu-green) 73%, var(--marca-old-lace));
  --iso-filo:   color-mix(in oklab, var(--marca-kombu-green) 42%, var(--marca-old-lace));

  position: relative;
  display: grid;
  place-items: center;
  /* Crece con la ventana: a 520px se quedaba pequeña frente a un
     titular de siete líneas en pantallas grandes. */
  min-height: clamp(300px, 48vh, 620px);
  perspective: 1150px;
  perspective-origin: 50% 42%;
}

.iso3d-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.iso3d-pila {
  position: relative;
  width: min(112%, 640px);
  aspect-ratio: 300 / 186;
  transform-style: preserve-3d;
  will-change: transform;
}

.iso3d-capa {
  position: absolute;
  inset: 0;
  transform: translateZ(calc(var(--i) * var(--iso-paso)));
}

/* El trazo de la onda es mucho más largo que el encuadre: sin
   recortarlo se cruza por encima del titular. */
.iso3d-capa svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* El tono de cada capa va del hueco del fondo al cuerpo de la
   pieza. Las tres formas lo heredan, así que basta con moverlo
   aquí para reiluminar el modelo entero. */
.iso3d-capa {
  --tono: color-mix(in oklab,
    var(--iso-cuerpo) calc(var(--i) / var(--iso-n) * 100%),
    var(--iso-hueco));
}

/* Las cuatro últimas capas son la cara de delante: ahí da la luz */
.iso3d-capa:nth-last-child(4) { --tono: color-mix(in oklab, var(--iso-luz) 22%, var(--iso-cuerpo)); }
.iso3d-capa:nth-last-child(3) { --tono: color-mix(in oklab, var(--iso-luz) 46%, var(--iso-cuerpo)); }
.iso3d-capa:nth-last-child(2) { --tono: color-mix(in oklab, var(--iso-luz) 72%, var(--iso-cuerpo)); }
.iso3d-capa:last-child        { --tono: var(--iso-luz); }

/* Mismo color, distinta altura: el anillo va un punto más claro
   porque es lo más alto de la pieza y la onda un punto más oscuro
   porque pasa por detrás de los pétalos. Sin esa diferencia las
   tres formas se funden en una mancha donde se cruzan. */
.iso3d-petalos { fill: var(--tono); }
.iso3d-anillo  { fill: color-mix(in oklab, var(--tono) 84%, var(--marca-old-lace)); }
.iso3d-onda    { fill: color-mix(in oklab, var(--tono) 78%, #000); }

/* Filo de luz en el borde de la cara de delante. Es lo que separa
   la pieza del fondo cuando el giro la pone casi de frente. */
.iso3d-capa:last-child use {
  stroke: var(--iso-filo);
  stroke-width: 1.1;
  paint-order: stroke fill;
}

/* Resplandor detrás: es lo que hace que el verde cante sobre el
   Old Lace en vez de quedarse apagado. */
.iso3d-halo {
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: var(--radio-circulo);
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--marca-pale-silver) 66%, transparent) 0%,
    color-mix(in oklab, var(--marca-kombu-green) 10%, transparent) 48%,
    transparent 70%);
  filter: blur(38px);
  pointer-events: none;
}

.iso3d-sombra {
  position: absolute;
  bottom: 6%;
  width: 48%;
  height: 8%;
  border-radius: var(--radio-circulo);
  background: radial-gradient(
    ellipse at center,
    color-mix(in oklab, var(--marca-kombu-green) 40%, transparent) 0%,
    transparent 72%);
  filter: blur(11px);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   4. TITULAR Y PALABRA ROTATIVA
   ══════════════════════════════════════════════════════════ */

/* La portada es el único sitio donde el titular pasa de --txt-3xl:
   sin el párrafo de entrada debajo, es lo que sostiene el bloque. */
.hero-titulo {
  font-family: var(--font-titular);
  font-weight: var(--peso-titular);
  font-size: clamp(2.4rem, 5.1vw, var(--txt-4xl));
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0 0 var(--esp-5);
  text-wrap: balance;
}

/* El hueco de la palabra: su ancho lo fija js/hero.js con la
   variante más larga, para que la línea nunca salte. */
.hero-rota {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
}

/* La palabra se ciñe a su propio texto —no al hueco reservado—
   para que el subrayado no se estire de más en las cortas. */
.hero-rota-palabra {
  display: inline-block;
  position: relative;
  font-style: italic;
  color: var(--color-texto-enfasis);
  /* Las letras entran una a una y pueden asomar por debajo de la
     línea base mientras lo hacen. */
  padding-bottom: 0.06em;
}

.hero-rota-letras i {
  display: inline-block;
  font-style: inherit;
  white-space: pre;
}

/* Trazo a mano bajo la palabra: se redibuja en cada relevo.
   Va lo bastante bajo para pasar por debajo de los descendentes
   —la «g» de «contigo»— en vez de tacharlos. Como está en
   posición absoluta no empuja la línea siguiente. */
.hero-rota-trazo {
  position: absolute;
  left: -1.5%;
  bottom: -0.26em;
  width: 103%;
  height: 0.26em;
  overflow: visible;
  pointer-events: none;
  color: var(--color-acento);
}

.hero-rota-trazo path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
}

/* ══════════════════════════════════════════════════════════
   5. ACCIONES
   ══════════════════════════════════════════════════════════ */

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

/* ══════════════════════════════════════════════════════════
   6. LA FICHA DE VALORACIÓN
   Reproduce la hoja que se llena en consulta. Un barrido la
   recorre y va encendiendo cada línea a su paso.
   ══════════════════════════════════════════════════════════ */

.hero-ficha {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-2xl);
  background: color-mix(in oklab, var(--color-superficie-alta) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--sombra-tarjeta);
  padding: var(--esp-2);
}

.ficha-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: 4px 6px var(--esp-2);
}

.ficha-etiqueta {
  font-size: var(--txt-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-acento-oscuro);
}

.ficha-foto {
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--hueco-fondo);
}

.ficha-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ficha-medidas {
  list-style: none;
  margin: 0;
  padding: var(--esp-2) 6px 0;
  display: grid;
  gap: 2px;
}

.ficha-medidas li {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: var(--radio-sm);
  border-bottom: 1px solid var(--linea-tenue);
}

.ficha-medidas li:last-child { border-bottom: 0; }

/* La palomita se dibuja cuando el barrido pasa por su línea. */
.ficha-marca {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: var(--radio-circulo);
  border: 1px solid var(--color-borde-suave);
  background: var(--color-superficie);
  position: relative;
}

.ficha-marca::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 5px;
  height: 9px;
  border: solid var(--color-acento-oscuro);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
  opacity: 0;
}

.ficha-que {
  font-size: var(--txt-base);
  line-height: 1.35;
  color: var(--color-texto);
}

.ficha-detalle {
  display: block;
  font-size: var(--txt-sm);
  font-weight: var(--peso-ligero);
  line-height: 1.5;
  color: var(--color-texto-suave);
}

.ficha-pie {
  margin: var(--esp-2) 6px 4px;
  padding-top: var(--esp-2);
  border-top: 1px solid var(--color-borde);
  font-family: var(--font-titular);
  font-style: italic;
  font-size: var(--txt-base);
  line-height: 1.4;
  color: var(--color-texto-secundario);
}

/* El barrido. Vive por encima de la ficha y no recibe el ratón. */
.ficha-barrido {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 132px;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      color-mix(in oklab, var(--marca-pale-silver) 22%, transparent) 62%,
      color-mix(in oklab, var(--marca-camel) 34%, transparent) 97%,
      var(--color-acento) 100%
    );
}

/* ══════════════════════════════════════════════════════════
   7. DATOS DE LA CLÍNICA
   Antes eran una sección aparte; viven dentro de la portada para
   que la home empiece con un solo bloque y no con dos.
   ══════════════════════════════════════════════════════════ */

.hero-datos {
  position: relative;
  list-style: none;
  width: 100%;
  max-width: var(--ancho-max);
  margin: var(--esp-6) auto 0;
  padding: var(--esp-4) var(--padding-lateral) 0;
  border-top: 1px solid var(--color-borde);
  display: grid;
  gap: var(--esp-3);
}

@media (min-width: 760px) {
  .hero-datos { grid-template-columns: repeat(4, 1fr); gap: 0; }
}

.hero-datos li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Apilados, el filete va entre un dato y otro; en fila, a la
   izquierda de cada columna. */
.hero-datos li + li {
  padding-top: var(--esp-3);
  border-top: 1px solid var(--linea-tenue);
}

@media (min-width: 760px) {
  /* El filete de cada columna es el borde izquierdo de la siguiente,
     así que sin `padding-right` el texto llegaba a tocarlo: el
     «9:00 a 19:00» del horario quedaba pegado a la línea. */
  .hero-datos li { padding-left: var(--esp-3); padding-right: var(--esp-3); }
  .hero-datos li:first-child { padding-left: 0; }
  .hero-datos li:last-child { padding-right: 0; }

  .hero-datos li + li {
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid var(--color-borde);
  }
}

.hero-dato-etiqueta {
  font-size: var(--txt-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-acento-oscuro);
}

.hero-dato-valor {
  font-family: var(--font-titular);
  font-weight: var(--peso-titular);
  font-size: var(--txt-md);
  line-height: 1.15;
  color: var(--color-texto);
  /* Playfair trae cifras de estilo antiguo: el «9» y el «2» se
     hunden bajo la línea base y descuadran la fila. */
  font-variant-numeric: lining-nums;
}

.hero-dato-detalle {
  font-size: var(--txt-sm);
  font-weight: var(--peso-ligero);
  line-height: 1.5;
  color: var(--color-texto-suave);
}