/* ============================================================================
   SPICA STUDIO · css/medspa.css · r27 · LA CAPA VISUAL DE MED SPA
   ----------------------------------------------------------------------------
   Se carga SOLO en /industries/med-spa/ y /es/industrias/med-spa/, y solo hace
   cuatro cosas:

     1. el hero a sangre con clip de fondo (.medspa-hero)
     2. la forma de los clips de Adobe Stock (.clip, componente ClipStock)
     3. la tira de tres clips (.medspa-clips)
     4. la banda de cifras de confianza (.medspa-trust)

   Nada de colores nuevos: todo sale de css/tokens.css. Nada de particulas.
   El resto de la pagina (resumen, prueba, antes y despues, como se empieza,
   FAQ y formulario) sigue usando las hojas de siempre y aqui no se toca.

   OJO CON LA CASCADA: esta hoja NO es la ultima. En /es/ la capa base inyecta
   es-experience.css y es-solutions.css DESPUES del slot de head, y la pagina
   inglesa las pide a mano en el mismo sitio para que las dos tengan el mismo
   orden. O sea que esas dos ganan por orden a igualdad de especificidad: lo
   que haya que pisar de ellas se pisa con una clase mas (ver el punto 3).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0 · LOS CLIPS · forma comun
   El reproductor es js/medspa.js (r27 G3b), propio de esta pagina. El marcado
   conserva las clases de aspecto del componente de pelicula (`es-film__stage`,
   `es-film__video`, `es-film__footer`, `es-film__control`) pero la FIGURA ya no
   lleva `.es-film`, que es el unico gancho de js/es-experience.js. Por eso las
   cuatro reglas que colgaban de esa clase en la figura se reescriben aqui
   contra `[data-clip]`. Sin ellas el boton de pausa se queda en display:none y
   el hueco de la fila recupera relleno y fondo.
   Aqui tambien se cambia la CAJA, porque es-experience.css la deja en
   1080/1180 vertical y estos clips son apaisados o de tarjeta.
   ------------------------------------------------------------------------- */
[data-clip].is-ready .es-film__control { display: inline-flex; }
[data-clip].is-playing .es-film__pause { display: block; }
[data-clip].is-playing .es-film__play { display: none; }
.es-solutions .sol-slot:has(.clip) { padding: 0; background: transparent; }

.clip { width: 100%; margin: 0; }
.clip .es-film__stage,
.clip .clip__video {
  aspect-ratio: var(--clip-ratio, 16 / 9);
  border-radius: var(--radius-lg);
}
.clip .clip__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--mist);
}
.clip .es-film__stage { overflow: hidden; }
.clip__footer { justify-content: space-between; }
.clip__rotulo {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   1 · S0 · HERO A SANGRE
   El clip llena la banda, el velo de tinta sube desde abajo y el texto se
   apoya en el tercio inferior. El velo se midio para que el papel sobre el
   fotograma mas claro pase de 4,5:1 hasta arriba del kicker.

   OJO: la seccion CONSERVA la clase `sol-band`, y no es decorativo: es lo que
   hace legible la cabecera. `js/solution.js` decide el tinte del nav con
   `DARK_UNDER_NAV = .footer, [data-specialty="growth"] .sol-band` y, para las
   fotos, midiendo el `<img>` que hay debajo. Un `<video>` no se puede medir,
   asi que sin `sol-band` el nav se quedaria en tinta sobre un clip oscuro.
   Con ella, la cabecera pasa a `site-header--dark` igual que en el hero de
   cualquier hoja de solucion. De `sol-band` se hereda ademas el color de
   texto (papel) y solo se le pisa el fondo, que aqui es el clip.
   ------------------------------------------------------------------------- */
.medspa-hero {
  position: relative;
  min-height: max(560px, min(88svh, 900px));
  display: grid;
  align-items: end;
  padding: clamp(9rem, 22vh, 13rem) 0 clamp(3rem, 7vh, 5rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
/* r27 G3b · SIN z-index, y no es un descuido.
   Con `z-index: 0` esta caja creaba su propio contexto de apilamiento y metia
   dentro al pie del clip: el `z-index: 3` del pie solo competia con sus
   hermanos de dentro, nunca con el velo, asi que el boton de pausa del hero
   quedaba SIEMPRE debajo del velo (medido en el QA de G3: 1,43:1).
   Sin z-index la caja sigue posicionada pero NO crea contexto, y sus dos hijos
   compiten directamente en el contexto del hero (que lo abre `isolation`):
   el escenario del video en 0, el velo en 1 y el pie del clip en 3. */
.medspa-hero__clip {
  position: absolute;
  inset: 0;
}
.medspa-hero__clip .clip__stage { z-index: 0; }
/* dentro del hero el clip pierde su caja de tarjeta: es el fondo */
.medspa-hero__clip .clip,
.medspa-hero__clip .es-film__stage {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.medspa-hero__clip .clip__video {
  aspect-ratio: auto;
  height: 100%;
  border-radius: 0;
  object-position: 50% 38%;
}
/* el pie del clip se va a la esquina, sobre el velo */
.medspa-hero__clip .clip__footer {
  position: absolute;
  right: var(--gutter);
  bottom: 0.9rem;
  z-index: 3;
  padding: 0;
  gap: 12px;
  color: rgba(246, 245, 241, 0.6);
}
.medspa-hero__clip .clip__rotulo { color: rgba(246, 245, 241, 0.6); }
.medspa-hero__clip .es-film__control { color: rgba(246, 245, 241, 0.72); }
.medspa-hero__clip .es-film__control:hover { color: var(--paper); }
.medspa-hero__clip .es-film__control:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}
/* El velo son DOS capas superpuestas y cada una tiene su trabajo:

   · la de abajo es la de siempre, la que separa el hero del resto y sostiene el
     lead y el CTA;
   · la de arriba (r27 G3b) es una franja corta que solo cubre el tramo del
     TITULAR. Sin ella, en el fotograma mas claro del hero a 1440 el percentil
     99 de los pixeles de fondo bajo los glifos daba 4,22:1, por debajo del
     4,5:1 que pide el contrato. La franja aporta 0,10 de tinta entre el 40 % y
     el 96 % de alto y sube esa medida a 4,9:1. Es la correccion mas barata que
     encontramos: fuera de esa banda el hero no se oscurece nada, y dentro
     0,10 sobre un fondo que ya estaba a 0,47 apenas se ve. */
.medspa-hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(17, 17, 16, 0) 40%,
      rgba(17, 17, 16, 0.1) 54%,
      rgba(17, 17, 16, 0.1) 86%,
      rgba(17, 17, 16, 0) 96%
    ),
    linear-gradient(
      180deg,
      rgba(17, 17, 16, 0.28) 0%,
      rgba(17, 17, 16, 0.2) 34%,
      rgba(17, 17, 16, 0.62) 70%,
      rgba(17, 17, 16, 0.82) 100%
    );
}
.medspa-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 46rem;
}
.medspa-hero .es-eyebrow { color: rgba(246, 245, 241, 0.72); margin-bottom: 20px; }
.medspa-hero .display {
  font: 800 clamp(2.6rem, 4.25vw, 4.8rem) / 1.01 var(--font-display);
  letter-spacing: -0.055em;
  text-wrap: balance;
  color: var(--paper);
  margin: 0;
}
.medspa-hero .es-solution-accent { color: var(--violet-bright); }
.medspa-hero .lead {
  color: rgba(246, 245, 241, 0.86);
  font-size: 1.13rem;
  line-height: 1.6;
  max-width: 34em;
  margin: 22px 0 26px;
}
.medspa-hero__actions { display: flex; flex-wrap: wrap; gap: 18px; }
/* el CTA sobre superficie oscura es el mismo par ya aprobado en .door-card--violet:
   papel con tinta, ola violeta al pasar y el rotulo saltando a blanco de golpe
   cuando la ola ya cubre el texto */
.medspa-hero .btn--primary {
  background: var(--paper);
  color: var(--ink);
  transition: color 0.01s step-end 0.21s;
}
.medspa-hero .btn--primary::before,
.medspa-hero .btn--primary::after { background: var(--violet); }
.medspa-hero .btn--primary:hover { color: #fff; }
.medspa-hero :focus-visible { outline-color: var(--paper); }

/* ---------------------------------------------------------------------------
   2 · S3-bis · LA TIRA DE TRES CLIPS
   Tres tarjetas 4:5. En la tira, cada caja mide menos de 480 px en escritorio
   (unos 417 px a 1440), asi que el reproductor pide el archivo de celular por
   si solo y la seccion pesa menos de lo que aparenta. Ese archivo se genera a
   720 x 900 (r27 G2): a 480 px de ancho se veia blando en pantallas 2x, que es
   donde mas se mira esta tira.
   ------------------------------------------------------------------------- */
.medspa-clips { padding: 0 0 var(--rhythm-half); }
.medspa-clips__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
.medspa-clips__grid > * { min-width: 0; }
.medspa-clips .clip .es-film__stage {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
.medspa-clips__nota {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   3 · S6-bis · LA BANDA DE CIFRAS DE CONFIANZA
   Mismo registro que .numbers del Home: teal profundo y papel encima. Cuatro
   cifras, su etiqueta mono y, al pie, las fuentes en un desplegable discreto.
   Ninguna cifra vive sin fuente.
   ------------------------------------------------------------------------- */
.medspa-trust {
  background: var(--teal-deep);
  color: var(--paper);
  padding: clamp(3.2rem, 6vw, 5rem) 0;
}
.medspa-trust__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
/* es-solutions.css tine los titulares de seccion en tinta con .es-solutions
   .section-head .h2, y esa hoja se carga DESPUES de esta en los dos idiomas
   (ver la nota de cascada de la cabecera), asi que aqui hace falta una clase
   mas para ganar por especificidad y no depender del orden */
.es-solutions .medspa-trust .section-head .h2 { color: var(--paper); }
.es-solutions .medspa-trust .section-head .lead { color: rgba(246, 245, 241, 0.74); }
.medspa-trust .h2 { color: var(--paper); }
.medspa-trust .lead { color: rgba(246, 245, 241, 0.74); }
.medspa-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}
.medspa-trust__grid > * { min-width: 0; }
.medspa-trust__item { display: grid; gap: 0.5rem; justify-items: start; }
.medspa-trust__item::before {
  content: "";
  width: 2.2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--teal-bright);
  margin-bottom: 0.4rem;
}
.medspa-trust__item:nth-of-type(4)::before { background: var(--amber-bright); }
.medspa-trust__value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.medspa-trust__label {
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(246, 245, 241, 0.82);
  max-width: 22ch;
}
.medspa-trust__foot { margin-top: clamp(2rem, 4vw, 2.8rem); }
.medspa-trust__fuentes {
  border-top: 1px solid var(--line-on-dark);
  padding-top: 1rem;
}
.medspa-trust__fuentes summary {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.66);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 34px;
}
.medspa-trust__fuentes summary::-webkit-details-marker { display: none; }
.medspa-trust__fuentes summary::after {
  content: "";
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor 0 0) center / 12px 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 2px 12px no-repeat;
  transition: transform var(--dur-state) var(--ease);
}
.medspa-trust__fuentes[open] summary::after {
  background: linear-gradient(currentColor 0 0) center / 12px 2px no-repeat;
}
.medspa-trust__fuentes summary:hover { color: var(--paper); }
.medspa-trust__fuentes:focus-within summary { color: var(--paper); }
/* el anillo de foco de base.css es violeta, y violeta sobre --teal-deep da
   1,43:1: en esta banda no se ve. Aqui pasa a papel, 9,16:1, igual que ya se
   hace en el hero. Es el unico elemento con foco de la banda */
.medspa-trust :focus-visible { outline-color: var(--paper); }
.medspa-trust__fuentes ol {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  max-width: 72ch;
}
.medspa-trust__fuentes li {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: rgba(246, 245, 241, 0.66);
}
.medspa-trust__fuentes b { color: var(--paper); font-weight: 600; }

/* ---------------------------------------------------------------------------
   4 · S7 · LA CORTINA CON CLIP
   css/rest.css ya contempla un <video> dentro de .rest__photo y
   js/rest-curtain.js escala img o video indistintamente: aqui no hay nada que
   arreglar, solo asegurar que el clip cubre la caja igual que la foto.

   r27 G3b · la cortina gana su boton de pausa, el mismo de los otros seis
   clips. Tres cosas hubo que resolver:

   1. DONDE VIVE. Dentro de `.rest__photo` no puede ir: esa caja la recorta
      `js/rest-curtain.js` con clip-path y al cerrarse del todo pasa a
      `visibility: hidden`. El boton se iria con ella. Va como hermano, dentro
      de `.rest__stage`, con `z-index: 2`: por encima de la foto (1) y por
      debajo del titular gigante (3).
   2. QUIEN MANDA SOBRE EL VIDEO. `rest-curtain.js` no reproduce nada, solo le
      escribe un `transform` de escala, asi que no estorba y se quedo intacto.
      El que si lo reproducia era `js/media-io.js`, que observa `video.vid` por
      su cuenta y habria peleado con el boton. Se resolvio quitandole la clase
      `vid` al video de la cortina: media-io deja de verlo (y de hecho ya no se
      carga en esta pagina) y manda `medspa.js`, uno solo.
   3. QUE SE LEA. El velo de la cortina se apaga durante el scrub
      (`.rest--pin .rest__scrim { opacity: 0 }`), asi que el boton puede quedar
      sobre cualquier fotograma. Por eso lleva pastilla propia de tinta al 72 %:
      sobre el fotograma mas claro imaginable (blanco puro) el papel encima da
      6,9:1, y sobre uno oscuro sube. No depende del contenido del clip.
      Y `pointer-events: auto`, porque `.rest--pin` se los quita a la seccion
      entera para no robarle el raton al bloque siguiente durante el solape.
   ------------------------------------------------------------------------- */
.medspa-rest .rest__photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.medspa-rest .medspa-rest__control {
  position: absolute;
  right: var(--gutter);
  bottom: 1.1rem;
  z-index: 2;
  pointer-events: auto;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: rgba(17, 17, 16, 0.72);
  color: var(--paper);
  /* el mismo rotulo que en el pie de los otros seis clips: mono, 0,63rem y sin
     caja alta. La pastilla es lo unico que cambia, y solo porque aqui no hay
     velo fijo debajo */
  font: 400 0.63rem/1.3 var(--font-mono);
}
.medspa-rest .medspa-rest__control:hover { background: rgba(17, 17, 16, 0.86); }
.medspa-rest .medspa-rest__control:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   5 · RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .medspa-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .medspa-hero { min-height: max(520px, 72svh); }
}
@media (max-width: 760px) {
  .medspa-hero {
    min-height: max(500px, 78svh);
    padding: clamp(7.5rem, 18vh, 10rem) 0 clamp(2.4rem, 6vh, 3.4rem);
  }
  .medspa-hero .display { font-size: clamp(2.05rem, 8.9vw, 3.6rem); line-height: 1.04; }
  .medspa-hero .lead { font-size: 1.02rem; margin: 20px 0 22px; }
  /* en celular el velo sube: el titular ocupa mas alto y hay menos foto libre */
  .medspa-hero__velo {
    background: linear-gradient(
      180deg,
      rgba(17, 17, 16, 0.4) 0%,
      rgba(17, 17, 16, 0.42) 26%,
      rgba(17, 17, 16, 0.76) 62%,
      rgba(17, 17, 16, 0.88) 100%
    );
  }
  .medspa-hero__clip .clip__footer { right: 1rem; bottom: 0.5rem; }
  .medspa-clips__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .medspa-trust__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .medspa-trust__label { max-width: 30ch; }
}