/* ==========================================================================
   extra.css — lo que la web principal de COMS agrega al diseño del repo
   coms-web (2026-11-06). Va APARTE de motor.css / tema.css a propósito: el
   repo sigue cambiando, y al rearmar con armar.py esas dos hojas se pisan
   enteras. Lo de acá no.

   1. La firma de Helsek, más grande y en tres lugares (pedido de Santino).
   2. Los links a términos y privacidad en el pie.
   3. Novedad SIN foto (la galería del repo asume que todas tienen).
   4. Experiencias de pacientes (sólo salen si hay alguna aprobada).
   5. El aviso "Antes de tu primera consulta" del paciente que recién sacó
      turno (tanda 93), con el diseño nuevo.
   ========================================================================== */

/* 0. Fondo de base y cielo ------------------------------------------------- */
/* El <style> del head pinta el html verde oscuro (para la intro). En modo claro la página es verde
   agua, y en el celular esa base oscura asomaba como una franja cuando la barra del navegador se
   esconde o aparece al bajar y subir, y al estirar arriba o abajo. Ahora la base sigue al tema. */
:root:not([data-theme="dark"]) { background: #c4e2dd; }
/* El cielo (capa fija del fondo) medía el alto CHICO de la pantalla (inset: 0): mientras la barra
   del navegador se iba, la franja de abajo quedaba sin cubrir. Ahora mide el alto máximo. */
.sky4 { bottom: auto; height: 100vh; height: 100lvh; }

/* Cierre del pie: sin la palabra "C O M S", el isotipo grande. (Sin `scale` atado al scroll: GSAP,
   al animar la entrada del logo, absorbe el `scale` de CSS en su transform y lo deja clavado.) */
.sign4 .sign4__mark--grande { width: clamp(170px, 24vw, 340px); margin-bottom: 0; }

/* Botones que en el celular se tocaban con dificultad (medido: 10×10 px los puntitos del carrusel,
   22 px de alto los "Cómo llegar"). Se agranda la zona que recibe el toque, no el dibujo. */
.cf__dots button { position: relative; }
.cf__dots button::after { content: ""; position: absolute; inset: -16px -4px; }
.office__map { position: relative; }
.office__map::after { content: ""; position: absolute; inset: -12px -8px; }
.foot__legal a, .foot__bot .firma-helsek-bot a { display: inline-block; padding: 8px 0; }

/* 1. Firma de Helsek ------------------------------------------------------ */
.firma-helsek {
  display: block; width: max-content; max-width: 100%;
  margin: 28px auto 0; padding: 12px 26px;
  border: 1px solid var(--dark-line); border-radius: 999px;
  font-size: 17px; letter-spacing: .04em; text-align: center;
  color: var(--dark-text-2);
  transition: color .3s, border-color .3s, background .3s;
}
.firma-helsek b { color: var(--dark-text); font-weight: 700; letter-spacing: .02em; }
.firma-helsek:hover, .firma-helsek:focus-visible { color: var(--dark-text); border-color: #77d4c8; background: rgba(119, 212, 200, .08); }
.firma-helsek:hover b, .firma-helsek:focus-visible b { color: #77d4c8; }
.foot .firma-helsek--col { margin: 14px 0 0; display: inline-block; padding: 8px 16px; font-size: 14px; }
/* .foot__cols b es el rótulo de cada columna (bloque, 11px, mayúsculas): acá no. */
.foot__cols .firma-helsek b { display: inline; margin: 0; font-size: inherit; letter-spacing: .02em; text-transform: none; }
.menu .firma-helsek--menu { margin: 6px 0 0; justify-self: center; font-size: 15px; }
/* La línea de abajo del pie va entera con opacity .7 (motor.css): la firma
   se lee más fuerte que el resto de esa línea. */
.foot__bot .firma-helsek-bot { font-size: 15px; letter-spacing: .04em; }
.foot__bot .firma-helsek-bot a { color: var(--dark-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 2. Términos y privacidad ------------------------------------------------ */
.foot__legal a { text-decoration: underline; text-underline-offset: 3px; }

/* 3. Novedad sin foto ------------------------------------------------------ */
.gal__sin-foto {
  display: flex; align-items: flex-end; min-height: 200px; padding: 26px 22px 64px;
  background: var(--dark-2); color: var(--dark-text);
  font-family: var(--f-serif); font-size: 24px; line-height: 1.15;
}
.lb__img[hidden] { display: none; }
/* Visor: las flechas (abajo a la derecha, 48px + 22px) pisaban el final de un título
   largo, y los de la base lo son ("40 congreso panamericano de…"). En el celular
   tema.css ya deja 90px; acá se iguala para la compu. */
.lb figcaption { padding-bottom: 92px; }

/* 4. Experiencias ---------------------------------------------------------- */
.exp-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 8px; }
.exp-card {
  display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 24px;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--text);
}
.exp-card__carita { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.exp-card__carita span:first-child { font-size: 26px; }
.exp-card blockquote { margin: 0; font-family: var(--f-serif); font-size: 21px; line-height: 1.3; }
.exp-card footer { margin-top: auto; font-size: 14px; color: var(--text-2); }
.exp-card footer b { display: block; color: var(--text); }
.exp-cta { margin: 26px 0 0; }
:root[data-theme="dark"] .exp-card { background: #003530; border-color: rgba(164, 230, 220, .12); color: #e6f6f3; }
:root[data-theme="dark"] .exp-card blockquote, :root[data-theme="dark"] .exp-card footer b { color: #e6f6f3; }
:root[data-theme="dark"] .exp-card footer, :root[data-theme="dark"] .exp-card__carita { color: #90b6b0; }

/* 5. Aviso "Antes de tu primera consulta" ---------------------------------- */
/* Va a la DERECHA, encima del botón de WhatsApp: abajo a la izquierda tapaba los
   botones del hero ("Pedir turno online", "Subir estudios"). z-index por debajo del
   de .wa (70) para que el menú de WhatsApp, que se abre hacia arriba, le pase por encima. */
.bv {
  position: fixed; z-index: 65; right: clamp(16px, 2.4vw, 30px); bottom: calc(clamp(16px, 2.4vw, 30px) + 78px);
  width: min(380px, calc(100vw - 32px)); padding: 20px 20px 16px;
  border-radius: 20px; background: var(--dark); color: var(--dark-text);
  border: 1px solid var(--dark-line); box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.menu-open .bv { display: none; }
.bv__cerrar-form { position: absolute; top: 8px; right: 8px; margin: 0; }
.bv__cerrar {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: var(--dark-text-2); font-size: 22px; line-height: 1;
}
.bv__cerrar:hover, .bv__cerrar:focus-visible { background: var(--dark-2); color: var(--dark-text); }
.bv__t { margin: 0 36px 4px 0; font-family: var(--f-serif); font-size: 23px; line-height: 1.1; }
.bv__b { margin: 0 0 12px; font-size: 14px; color: var(--dark-text-2); }
.bv__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bv__item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 12px; border-radius: 12px; background: var(--dark-2); }
.bv__item b { display: block; font-size: 14px; font-weight: 600; }
.bv__item small { display: block; font-size: 12px; color: var(--dark-text-2); }
.bv__item.hecho b::before { content: "✓ "; color: #77d4c8; }
.bv__accion {
  display: inline-block; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600;
}
.bv__accion--suave { background: transparent; color: var(--dark-text); border: 1px solid var(--dark-line); }
.bv__listo { font-size: 12px; font-weight: 600; color: #77d4c8; }
.bv__pie { margin: 10px 0 0; font-size: 12px; color: var(--dark-text-2); }
/* En el celular, compacto: sin las bajadas de cada paso (el título del paso y el
   botón alcanzan) para no tapar media pantalla. */
@media (max-width: 640px) {
  .bv { left: 12px; right: 12px; width: auto; bottom: 86px; padding: 16px 16px 12px; }
  .bv__t { font-size: 20px; }
  .bv__b { margin-bottom: 10px; }
  .bv__item small { display: none; }
}