/* ============================================================================
   EL SISTEMA DEL SITIO. Una sola hoja para todas las paginas.

   Reemplaza a css/base.css (el sistema anterior, del 07-mapa) y a css/home.css (la
   maqueta Millie). El diseno que manda es el de la HOME: paleta verde, Cormorant
   Garamond para titulos y Poppins para el cuerpo. Los NOMBRES de clase son los que ya
   hablaban las paginas interiores, en palabras completas: .cab y no .barra, .boton y no
   .btn, .seccion y no .sec, .etiqueta y no .et.

   Lo unico que queda afuera es css/talleres.css, que es una copia congelada del sistema
   anterior para las tres landings de productos. Se borra cuando se pasen a esta hoja.

   ------------------------------------------------------------------
   SUPERFICIES. Ninguna pieza pinta un hex propio: cada seccion declara sobre que
   superficie esta y los componentes leen tokens semanticos. Asi el mismo .boton o el
   mismo .cierre sirve en claro y en oscuro sin duplicar una sola regla.

     (nada)      crema, la superficie por defecto
     .encrema2   crema2, la alterna
     .enpal      verde palido, para una seccion que tiene que despegarse
     .enclaro    verde claro
     .ennoche    la banda verde oscuro
     .encrema    vuelve a la superficie clara dentro de una banda oscura

   CONTRASTES MEDIDOS. tinta sobre crema 14.37, crema2 13.46, pal 12.89, claro 11.22.
   tenue sobre crema 6.15, crema2 5.76, pal 5.51. salvia sobre crema 5.54, crema2 5.19,
   pal 4.97. crema sobre oscuro 8.66, lima sobre oscuro 7.24.
   OJO CON DOS: salvia sobre claro da 4.33 y NO llega a AA, por eso en .enclaro el acento
   es el verde oscuro (6.76). Y el texto tenue de la banda va al 78% de crema (6.00): al
   62%, que era el valor de la maqueta, cae a 4.45.
   ============================================================================ */

:root{
  /* Colores de marca. No cambian segun la superficie. */
  --crema:#F7F4EF;
  --crema2:#F4ECE0;
  --salvia:#3F6B57;
  --oscuro:#2C4C3E;
  --claro:#CBDFC9;
  --pal:#E3EBDA;
  --tinta:#23231F;
  --tenue:#5C5C54;
  --lima:#D7E8A8;

  /* Tokens semanticos. Superficie clara por defecto. */
  --fondo:var(--crema);
  --texto:var(--tinta);
  --texto-tenue:var(--tenue);
  --acento:var(--salvia);
  --filete:rgba(35,35,31,.14);
  /* La linea punteada es una firma del diseno: son las paradas del recorrido. */
  --punteado:rgba(63,107,87,.45);
  /* Fondo de los campos de formulario. Sobre superficie clara es la crema alterna; en la
     banda oscura pasa a ser un velo claro. */
  --campo:var(--crema2);
  --campo-filete:var(--filete);
}
.encrema,.encrema2,.enpal,.enclaro{
  --fondo:var(--crema);
  --texto:var(--tinta);
  --texto-tenue:var(--tenue);
  --acento:var(--salvia);
  --filete:rgba(35,35,31,.14);
  --punteado:rgba(63,107,87,.45);
  --campo:var(--crema2);
  --campo-filete:var(--filete);
  background:var(--fondo);color:var(--texto);
}
.encrema2{--fondo:var(--crema2);--campo:var(--crema)}
.enpal{--fondo:var(--pal);--campo:var(--crema)}
/* En verde claro el acento sube a oscuro: el salvia no llega a AA sobre esta superficie. */
.enclaro{--fondo:var(--claro);--acento:var(--oscuro);--campo:var(--crema)}
.ennoche{
  --fondo:var(--oscuro);
  --texto:var(--crema);
  --texto-tenue:rgba(247,244,239,.78);
  --acento:var(--lima);
  --filete:rgba(247,244,239,.22);
  --punteado:rgba(215,232,168,.5);
  --campo:rgba(247,244,239,.08);
  --campo-filete:rgba(247,244,239,.26);
  background:var(--fondo);color:var(--texto);
}

/* ============================================================================
   BASE
   ============================================================================ */
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--fondo);color:var(--texto);
  font-family:'Poppins',system-ui,sans-serif;font-weight:300;font-size:16.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased}
/* height:auto es obligatorio junto a max-width. Sin el, una imagen con los atributos
   width/height puestos (que hay que ponerlos, para que la pagina no salte al cargar) se
   queda con el height del atributo y sale deformada. Se vio en gracias-lista: una plancha
   de 2200x1446 se dibujaba 497x1446. Las reglas que fijan height por clase siguen ganando. */
img{display:block;max-width:100%;height:auto}
/* color:inherit es obligatorio: sin el, sobre fondo claro los links toman el azul del navegador. */
a{color:inherit}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;line-height:1.08;
  text-wrap:balance}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}

/* La etiqueta toma SIEMPRE el acento de su superficie. Antes cada pagina la pintaba a
   mano y sobre claro quedaba ilegible: el QA lo corto en escribime el 2026-09-04. */
.etiqueta{font-family:'Poppins',sans-serif;font-weight:400;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--texto-tenue)}
.bajada{color:var(--texto-tenue)}

/* ============================================================================
   BOTONES. Tres formas de la misma pieza y ninguna mas:
     .boton           solido, el CTA primario, uno por seccion
     .boton.contorno  secundario con caja, para una lista donde todos pesan parecido
     .boton-linea     terciario, un link subrayado
   Sirven igual en <a> y en <button>: de ahi el font-family y el cursor. */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 30px;background:var(--acento);color:var(--crema);text-decoration:none;border:0;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;letter-spacing:.01em;
  cursor:pointer;transition:background .22s,color .22s}
.boton:hover{background:var(--oscuro)}
.boton.chico{min-height:44px;padding:0 22px;font-size:17px}
/* En la banda oscura el solido va en lima con texto oscuro: el salvia sobre el verde
   oscuro no se despega del fondo. */
.ennoche .boton{background:var(--lima);color:var(--oscuro)}
.ennoche .boton:hover{background:#C6DA92}
.boton.contorno{background:transparent;color:var(--acento);
  border:1px solid var(--acento)}
.boton.contorno:hover{background:var(--acento);color:var(--crema)}
.ennoche .boton.contorno{background:transparent;color:var(--acento);border-color:var(--acento)}
.ennoche .boton.contorno:hover{background:var(--acento);color:var(--oscuro)}
.boton-linea{display:inline-flex;align-items:center;background:transparent;border:0;
  border-bottom:1px solid currentColor;min-height:auto;padding:0 0 3px;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;color:var(--texto);
  text-decoration:none;cursor:pointer;transition:color .22s,border-color .22s}
.boton-linea:hover{color:var(--acento);border-color:var(--acento)}
.ennoche .boton-linea{color:var(--texto)}
.ennoche .boton-linea:hover{color:var(--acento);border-color:var(--acento)}

/* ============================================================================
   CABECERA. Barra solida con el nombre a la izquierda, el menu y el CTA a la derecha.
   ============================================================================ */
.cab{border-bottom:1px solid var(--filete);background:var(--fondo);position:relative;z-index:60}
.cab .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
a.marca{font-family:'Cormorant Garamond',Georgia,serif;font-size:23px;line-height:1.1;
  font-style:italic;text-decoration:none;position:relative;z-index:2}
.cab-der{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
nav.menu{display:flex;gap:0;flex-wrap:wrap;align-items:center}
/* :not(.boton) en todas: el CTA "Brujula gratuita" vive DENTRO del nav para que
   "Profesionales" pueda quedar a su derecha, y estas reglas le ganarian en especificidad
   (0,2,2 contra el 0,1,0 de .boton) dejandolo con el tamano y el color de un link suelto. */
nav.menu a:not(.boton){display:inline-flex;align-items:center;min-height:44px;padding:0 13px;
  font-size:14.5px;text-decoration:none;color:var(--texto-tenue)}
nav.menu a:not(.boton):hover,nav.menu a:not(.boton)[aria-current="page"]{
  text-decoration:underline;text-underline-offset:4px}
nav.menu a:not(.boton):hover{color:var(--texto)}
nav.menu a:not(.boton)[aria-current="page"]{color:var(--acento)}
/* Lo que antes daba el gap:12px de .cab-der, ahora que el boton es un hermano mas de los
   links dentro del nav (que va con gap:0, porque los links se separan con su padding). */
nav.menu a.boton{margin:0 12px}
/* Un fondo para "Profesionales": no es la accion primaria del menu, pero pesa mas que un
   link de texto suelto. El mismo en toda pagina, tambien en /profesionales/: el chip no
   marca pagina actual, asi el menu se ve identico en todo el sitio. Opaco (var(--claro),
   no un rgba translucido) para que el contraste del texto se pueda medir contra un color
   real y no contra una mezcla que varia segun lo que hay debajo.
   color:var(--oscuro) a mano, no var(--acento): salvia sobre claro da 4.33 y no llega a
   AA (ya lo dice el comentario de :root, arriba de todo). */
nav.menu a.menu-cta,nav.menu a.menu-cta[aria-current="page"]{background:var(--claro);
  color:var(--oscuro);border-radius:20px;padding:0 16px;text-decoration:none}
/* Sin cambio de fondo en el hover, que se veria como un cambio de estado que no existe:
   responde con el mismo subrayado que los otros links del menu. */
nav.menu a.menu-cta:hover{text-decoration:underline;text-underline-offset:4px}

/* ----------------------------------------------------------------------------
   MENU DE CELULAR. Panel a pantalla completa con los links centrados y el CTA abajo.
   En escritorio no existe: el nav se muestra tal cual.

   PROGRESIVO A PROPOSITO. El panel se activa solo cuando js/menu.js agrega .conjs al
   <html>. Si el JS no corre, el menu queda visible y apilado, que es feo pero navegable;
   con la logica al reves, un error de script dejaria el sitio sin menu.
   ---------------------------------------------------------------------------- */
.hamb{display:none}
@media(max-width:859px){
  .hamb{display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;margin-right:-10px;background:none;border:0;cursor:pointer;
    position:relative;z-index:2;color:var(--texto)}
  .hamb span{position:absolute;left:13px;width:22px;height:2px;background:currentColor;
    transition:transform .22s ease,opacity .18s ease}
  .hamb span:nth-child(1){transform:translateY(-5px)}
  .hamb span:nth-child(2){transform:translateY(5px)}
  /* Abierto: las dos barras se cruzan en una X. */
  .hamb[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
  .hamb[aria-expanded="true"] span:nth-child(2){transform:rotate(-45deg)}

  .conjs .cab-der{
    position:fixed;inset:0;z-index:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:0;background:var(--crema);
    padding:96px clamp(24px,7vw,48px) clamp(32px,6vh,56px);
    /* visibility acompana a opacity para que el panel cerrado no sea foco de tabulacion.
       Los tiempos son distintos en cada sentido a proposito: al ABRIR la visibilidad
       cambia en 0s, porque si espera a que termine el fundido el focus() del script
       cae en un elemento todavia invisible y no toma. Al CERRAR espera los .24s para
       que el fundido se vea entero. */
    opacity:0;visibility:hidden;transition:opacity .24s ease,visibility 0s linear .24s}
  .conjs .cab-der.abierto{opacity:1;visibility:visible;
    transition:opacity .24s ease,visibility 0s linear 0s}
  /* flex:1 para que el nav llene el panel: de ahi saca el espacio libre que el
     margin-top:auto del CTA necesita para empujarlo al pie. */
  .conjs .cab-der nav.menu{flex-direction:column;align-items:center;gap:2px;width:100%;flex:1}
  .conjs .cab-der nav.menu a:not(.boton){font-family:'Cormorant Garamond',Georgia,serif;
    font-size:29px;color:var(--tinta);min-height:56px;padding:0}
  .conjs .cab-der nav.menu a:not(.boton):hover,
  .conjs .cab-der nav.menu a:not(.boton)[aria-current="page"]{
    text-decoration:underline;text-underline-offset:5px}
  .conjs .cab-der nav.menu a:not(.boton):hover{color:var(--salvia)}
  .conjs .cab-der nav.menu a:not(.boton)[aria-current="page"]{color:var(--salvia)}
  /* El CTA queda al pie del panel, separado del resto. En escritorio va entre "Cómo puedo
     ayudarte" y "Profesionales"; order:1 lo devuelve al final de la pila en el celular,
     que es donde estuvo siempre. */
  .conjs .cab-der nav.menu a.boton{order:1;margin:auto 0 0}
  .conjs .cab-der .boton{width:100%;max-width:340px;min-height:56px;font-size:20px}
  @media(prefers-reduced-motion:reduce){
    .hamb span{transition:none}
    .conjs .cab-der{transition:none}
  }
}
/* Con el panel abierto la pagina de atras no scrollea. */
body.menu-abierto{overflow:hidden}

/* ============================================================================
   SECCIONES Y PIEZAS COMPARTIDAS
   ============================================================================ */
.seccion{padding:clamp(60px,9vh,124px) 0}
/* Bloque de titulo centrado sobre una medida corta. */
.centro{text-align:center;max-width:60ch;margin:0 auto clamp(34px,5vh,58px)}
.centro h2{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:14px}
.centro p{color:var(--texto-tenue)}

/* Portada de pagina interior. Texto a la izquierda, plancha de mapa a la derecha.
   El mapa no va a sangre por debajo del texto: en claro no hay velo que lo sostenga, y
   encima el texto sobre imagen es carga sensorial de mas. */
.portada{padding:clamp(44px,6.5vh,80px) 0 clamp(52px,8vh,92px)}
.portada .wrap{display:grid;gap:clamp(32px,5vw,56px);align-items:center}
@media(min-width:900px){.portada .wrap{grid-template-columns:1.05fr .95fr;align-items:stretch}}
.portada h1{font-size:clamp(2rem,4.4vw,3.1rem);margin:14px 0 20px}
.portada .bajada{max-width:56ch;font-size:clamp(1rem,1.5vw,1.12rem)}
.plancha{border:1px solid var(--filete);align-self:stretch}
.plancha img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11}
@media(min-width:900px){.plancha img{aspect-ratio:auto;min-height:420px}}

/* Banda oscura. Es el gesto mas fuerte del sistema y por eso va una sola vez por pagina.
   Admite dos respaldos, nunca los dos juntos: una plancha de mapa de fondo
   (.banda-fondo) o una foto sangrando por un costado (.banda .foto). */
.banda{position:relative;overflow:hidden}
.banda .wrap{position:relative;
  padding-top:clamp(56px,9vh,116px);padding-bottom:clamp(56px,9vh,116px)}
.banda .dice{max-width:46ch}
.banda h2{font-size:clamp(2.1rem,4.6vw,3.3rem);margin:16px 0 18px}
.banda h2 em{font-style:italic}
.banda p{color:var(--texto-tenue)}
.banda-fondo{position:absolute;inset:0}
/* El mapa se ve, pero el velo lo mantiene por debajo de la luminancia que permite leer
   el texto encima. */
.banda-fondo img{width:100%;height:100%;object-fit:cover;opacity:.42}
.banda-fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(44,76,62,.62),rgba(44,76,62,.74) 45%,rgba(44,76,62,.62))}
.banda .foto{margin-top:30px;width:100%;max-width:300px}
/* El testimonio pegado al CTA de mayor compromiso de la home: la prueba social pesa mas
   junto al pedido que en una seccion aparte. */
.testi-rv{margin:22px 0 0;padding-left:16px;border-left:2px solid var(--acento);
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1rem}
@media(min-width:980px){
  .banda .dice{max-width:44ch}
  /* La foto va apoyada a la derecha, centrada en la altura de la banda, con su proporcion
     real y sin object-fit. Cubriendo la banda entera, como en la referencia, `cover` la
     ampliaba hasta el primerisimo plano: la banda es alta porque lleva el formulario, y a
     esa altura de caja de la foto solo entraba la frente. Con la proporcion real se ve la
     escena completa y queda mas chica, que es de lo que se trata. Centrada y no anclada
     abajo, porque el texto de al lado cambia de largo y un ancla fija dejaba un hueco vacio
     arriba de la foto cuando el bloque de texto crecia. */
  /* El tope de 480px es el mismo criterio que el max-width del .wrap: sin el, en un monitor
     ancho la foto sigue creciendo con el vw y vuelve a comerse la banda. */
  .banda .foto{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0;max-width:none;
    width:min(34vw,480px);height:auto}
}

/* Corte ondulado entre secciones. El relleno del path se declara en el HTML porque es el
   color de la seccion que viene ABAJO; el fondo de la pieza es el de la que queda arriba,
   asi que la onda lleva la clase de superficie de su seccion anterior. */
.onda{display:block;width:100%;height:44px;background:var(--fondo)}

/* Dos columnas con la foto de un lado. */
.doble{display:grid;gap:clamp(28px,4vw,54px);align-items:center}
@media(min-width:900px){.doble{grid-template-columns:.85fr 1.15fr}}

/* Cierre de pagina interior: una frase y el CTA al costado. Estaba copiado con sus
   comentarios en seis paginas. */
.cierre{padding:clamp(44px,6vh,80px) 0;border-top:1px solid var(--filete)}
.cierre .wrap{display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap}
.cierre h2{font-size:clamp(1.6rem,3.2vw,2.3rem);max-width:24ch}

/* Pie. Franja fina: la pagina ya cerro arriba. */
.pie{padding:26px 0;font-size:13px}
.pie .wrap{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px}
/* El monograma chico a la izquierda y, al costado, el nombre arriba y el script abajo.
   Los dos salieron del mismo archivo, separados para poder darle a cada uno su tamano:
   en el logo original el script quedaba en 4px de alto y no se leia. */
.sello{display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:inherit}
.sello-mono{width:auto;height:46px;opacity:.9}
.sello-txt{display:flex;flex-direction:column;gap:7px}
.sello-nombre{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;
  color:var(--texto);line-height:1}
.sello-script{width:auto;height:26px;opacity:.85}
.redes{display:inline-flex;gap:14px;align-items:center}
.redes a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:inherit;opacity:.72;transition:opacity .25s}
.redes a:hover{opacity:1}
.redes svg{width:21px;height:21px}

/* ============================================================================
   FORMULARIOS. Los tres del sitio (la lista de correo, el de contacto y el de la
   Brujula) usan las mismas piezas.
   ============================================================================ */
.campo{display:grid;gap:8px;margin-bottom:22px}
.campo label{font-size:13px;color:var(--texto-tenue)}
.campo input,.campo textarea,.campo select{width:100%;background:var(--campo);color:var(--texto);
  border:1px solid var(--campo-filete);border-radius:0;padding:13px 15px;min-height:52px;
  font-family:inherit;font-weight:300;font-size:16px;line-height:1.5}
.campo textarea{min-height:170px;resize:vertical}
/* El select pierde la flecha nativa del navegador (distinta en cada uno) y se dibuja una
   propia, en un gris que se lee razonablemente bien en cualquier superficie. El valor vacio
   queda disabled para que "Tu profesion" funcione como placeholder real. */
.campo select{appearance:none;-webkit-appearance:none;cursor:pointer;
  color:var(--texto-tenue);opacity:.7;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235C5C54' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
/* El desplegable de opciones NO es el select: es una ventana nativa del navegador que
   pinta cada <option> con su propio background/color, y ahi --campo (semitransparente
   sobre la banda oscura, para que se note el mapa de fondo) no sirve de nada: el
   navegador lo vuelve opaco solo y el resultado eran letras claras sobre un fondo que
   tambien terminaba claro, ilegibles. Las opciones van con colores fijos y opacos. */
.campo select option{background:#F7F4EF;color:#23231F}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:2px solid var(--acento);outline-offset:2px}
.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-tenue);opacity:.7}
/* Un select no tiene ::placeholder: la opcion vacia (value="", disabled) hace ese papel, y
   por eso el select arranca tenue por defecto (arriba), igual que el placeholder de los
   inputs de al lado, sin esperar a que :has() recalcule nada. Recien cuando hay una
   eleccion real (value distinto de "") pasa a color fuerte. Iba al reves antes (fuerte por
   defecto, tenue solo con :has(option:checked[value=""])) y esa version dependia de que
   :has() ya hubiera corrido en el primer pintado: al refrescar muy rapido se alcanzaba a
   ver un frame con el select en su color fuerte de base, superpuesto con el boton propio
   (profesion, evaluaciones) que ya arranca tenue por su lado. */
.campo select:has(option:checked:not([value=""])){color:var(--texto);opacity:1}
/* Version compacta, en una columna angosta: la lista de correo. */
form.alta{margin-top:26px;display:grid;gap:14px;max-width:420px}
form.alta label{display:grid;gap:7px;font-size:13px;color:var(--texto-tenue)}
form.alta input{width:100%;background:var(--campo);color:var(--texto);
  border:1px solid var(--campo-filete);border-radius:0;padding:14px 15px;min-height:52px;
  font-family:inherit;font-weight:300;font-size:16px}
form.alta input:focus{outline:2px solid var(--acento);outline-offset:2px}
.letrachica{margin-top:14px;font-size:12.5px;color:var(--texto-tenue);max-width:44ch}
.aclara{margin-top:18px;font-size:13px;color:var(--texto-tenue);max-width:48ch}
/* Trampa para robots: un campo que una persona no ve y no completa. */
.trampa{position:absolute;left:-9999px}

/* ============================================================================
   HOME
   ============================================================================ */
/* Portada en tres columnas: titular a la izquierda, foto al medio, y la presentacion
   con el CTA a la derecha. */
.hero{padding:clamp(44px,7vh,92px) 0 clamp(48px,7vh,96px)}
.hero .wrap{display:grid;gap:clamp(28px,4vw,50px);align-items:center}
@media(min-width:980px){.hero .wrap{grid-template-columns:1.25fr .76fr .88fr}}
.hero h1{font-size:clamp(1.85rem,3.6vw,2.75rem);margin-top:14px}
/* La segunda frase abre el bucle que deja el titular. Va en el mismo serif, en italica y
   a la mitad del cuerpo, para que se lea como continuacion y no como otro titulo. */
.hero .pregunta{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(1.6rem,3.05vw,2.34rem);line-height:1.2;color:var(--acento);
  margin-top:20px;max-width:24ch}
/* "Conocer el enfoque", debajo de la pregunta. Mismo .boton-linea de siempre, sin tocar su
   tipografia: solo se le agrega el margen para separarlo del parrafo de arriba. */
.hero-enfoque{margin-top:22px}
.hero h1 em{font-style:italic;color:var(--acento)}
/* Las fotos de WEB/_comunes/fotos/ tienen aire arriba de la cabeza, asi que el encuadre
   puede centrarse sin cortarla. */
.hero .foto{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%}
.hero .dice p{color:var(--texto-tenue);margin-bottom:26px}
.hero .dice p:last-child{margin-bottom:0}
.intro-profesionales .dice p{margin-bottom:18px}
.intro-profesionales .dice p:last-child{margin-bottom:0}
/* El cierre del hero: la frase de una sola linea y el CTA primario, debajo de los tres
   bloques. Va a todo el ancho de la pantalla a proposito, por eso vive fuera de .wrap, que
   acota el resto del hero. La frase presenta al boton, que va justo debajo. */
.hero-cierre{text-align:center;margin-top:clamp(28px,4vh,44px);
  padding:22px clamp(20px,4vw,44px) 0;border-top:1px solid var(--filete)}
.hero-frase{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(1.05rem,2vw,1.35rem);color:var(--texto-tenue);margin:0}
.hero-cierre .boton{margin-top:22px}

/* Tarjetas con foto arriba. */
.tarjetas{display:grid;gap:22px}
@media(min-width:840px){.tarjetas{grid-template-columns:repeat(3,1fr)}}
.tarjeta{background:var(--crema);border:1px solid var(--filete);
  display:flex;flex-direction:column;text-align:center}
.tarjeta .tapa{width:100%;aspect-ratio:3/2;object-fit:cover}
.tarjeta .cuerpo{padding:26px 24px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.tarjeta h3{font-size:27px}
.tarjeta p{font-size:15px;color:var(--texto-tenue);line-height:1.7}
/* margin-top:auto alinea los botones de las tres tarjetas a la misma altura aunque los
   textos midan distinto. */
.tarjeta .boton,.tarjeta .boton-linea{margin-top:auto;align-self:center}
.tarjeta.destacada{background:var(--pal);border-color:var(--pal)}

/* Un poco sobre mi. */
.sobre .foto{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 10%}
/* La columna de la foto va mas angosta que el .doble por defecto para que la foto termine a
   la misma altura que el texto. Con la proporcion generica (.85fr) sobresalia 135px por
   abajo. Medido a 1280px: foto 458, texto 455. La foto no se recorta, se achica: el 3/4 se
   mantiene y lo que cambia es el ancho de la columna. */
@media(min-width:900px){.sobre .doble{grid-template-columns:.66fr 1.34fr}}
.sobre h2{font-size:clamp(2.1rem,4.4vw,3.2rem);margin:14px 0 20px}
.sobre h2 em{font-style:italic;color:var(--acento)}
.sobre p{color:var(--texto-tenue);margin-bottom:16px;max-width:56ch}


/* EL RECORRIDO. La plancha va como marca de agua y una ruta une las seis paradas.
   Sobre fondo claro, y no oscuro: la banda oscura de la home es la de Coordenadas, y una
   segunda le sacaria el peso a esa. Por eso tampoco hace falta el velo que bajaba la
   luminancia del mapa; aca el virado ya lo hace, con la parada de luz igualada a crema2. */
.recorrido{position:relative;overflow:hidden}
.recorrido-fondo{position:absolute;inset:0}
/* Sin opacity: la fuerza del mapa se regula en la rampa `verde-tenue` de virar.py y en un
   solo lugar. Con dos perillas para lo mismo, la proxima vez no se sabe cual mover. */
.recorrido-fondo img{width:100%;height:100%;object-fit:cover}
.recorrido .wrap{position:relative}
/* El bloque de titulo va sobre un ovalo del color del fondo, apenas velado: el mapa se
   sigue leyendo por detras. Con esta transparencia el ovalo solo no sostiene el texto, asi
   que vuelve la sombra de halo, y entre las dos alcanza.
   El padding es grande porque en una elipse las esquinas no existen: el texto tiene que
   entrar adentro de la curva, no del rectangulo.
   El gris tenue no aguanta el grabado detras, asi que la bajada va en el texto pleno. */
.recorrido .centro{background:rgba(244,236,224,.55);border-radius:34px;
  padding:clamp(30px,5vw,46px) clamp(24px,5vw,38px);max-width:72ch;
  text-shadow:0 0 4px var(--crema2),0 0 14px var(--crema2)}
/* El ovalo solo cuando el bloque es mucho mas ancho que alto. En pantalla angosta el texto
   se apila, la elipse se vuelve un circulo y las lineas del medio se le salen por los
   costados; ahi va redondeado y listo. */
@media(min-width:760px){
  .recorrido .centro{border-radius:50%;padding:clamp(52px,6vw,86px) clamp(56px,7vw,112px)}
}
/* Sin el max-width la bajada deja "no." solo en el ultimo renglon. */
.recorrido .centro p{max-width:52ch;margin:0 auto;text-wrap:pretty;color:var(--texto)}

.ruta{display:none}
@media(min-width:900px){
  /* Sin max-width: la ruta usa el ancho entero del wrap, que es de lo que depende que las
     seis paradas se repartan y no queden apiladas en el centro. */
  .ruta{display:block;margin:0 auto}
  .ruta svg{width:100%;height:auto;overflow:visible}
}
.trazo{fill:none;stroke:var(--oscuro);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:9 11}
/* La calle de abajo va del color del FONDO, no de un verde claro: sobre las zonas de
   tierra del grabado el punteado salvia se perdia. Cumple para la linea la misma funcion
   que el halo para los rotulos. */
.trazo-suave{fill:none;stroke:var(--crema2);stroke-width:15;stroke-linecap:round}
.nodo circle{fill:var(--oscuro);stroke:var(--crema2);stroke-width:4}
.nodo .halo{fill:none;stroke:var(--salvia);stroke-width:1.2;opacity:.5}
/* Los rotulos llevan halo del color del fondo, como los toponimos de un mapa: la ruta
   puede cruzarlos por detras sin volverlos ilegibles. */
.nodo .num,.nodo .rot{paint-order:stroke fill;stroke:var(--crema2);stroke-linejoin:round;
  text-anchor:middle}
.nodo .num{font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:500;
  fill:var(--oscuro);letter-spacing:.08em;stroke-width:6}
.nodo .rot{font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;font-weight:600;
  fill:var(--tinta);stroke-width:11}
.nodo:hover .rot{fill:var(--salvia)}
/* En celular la ruta se reemplaza por una lista, que es mas legible. Va acotada a cada
   lado del corte: si no, la regla de abajo pisa el display:none y se ven las dos. */
@media(max-width:899px){.lista-movil{display:grid;margin-top:8px}}
@media(min-width:900px){.lista-movil{display:none}}
/* En celular la lista cae directamente sobre el grabado, sin ovalo que la respalde, asi
   que se defiende sola con tres cosas: el peso (el cuerpo de la pagina es 300 y a ese
   grosor la linea del mapa se le mete adentro de las letras), el negro del texto pleno, y
   una sombra mas cerrada que la del titulo: dos copias a 3px pintan un halo casi solido, y
   la de 9px apoya. Una sombra sola y difusa a esta altura de mapa no alcanzaba. */
.lista-movil{text-shadow:0 0 3px var(--crema2),0 0 3px var(--crema2),0 0 9px var(--crema2)}
.lm{display:flex;gap:16px;align-items:baseline;padding:16px 0;
  border-bottom:1px solid var(--filete)}
.lm .n{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;
  color:var(--oscuro);min-width:2em}
.lm .t{font-size:17px;font-weight:500;color:var(--texto)}
/* El trazo se dibuja al entrar en pantalla y despues queda punteado. --largo lo mide
   js/ruta.js con getTotalLength(). Si el script no corre, el fallback deja la ruta
   punteada y visible, que es como termina igual. */
.dibujar .trazo{stroke-dasharray:var(--largo,7 9);stroke-dashoffset:var(--largo,0);
  transition:stroke-dashoffset 2.4s ease}
.dibujar.on .trazo{stroke-dashoffset:0}
.dibujar.listo .trazo{stroke-dasharray:7 9;stroke-dashoffset:0;transition:none}
@media(prefers-reduced-motion:reduce){
  .dibujar .trazo{stroke-dasharray:7 9;stroke-dashoffset:0;transition:none}
}

/* Alcance: cierra la home diciendo que es esto y que no. */
.limites .wrap{max-width:760px}
.limites h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:16px}
.limites p{margin-bottom:14px;color:var(--texto-tenue)}
.limites a{color:var(--acento)}

/* La oferta de supervision en /profesionales/, mismo tratamiento de bloque de texto que
   .limites: un solo parrafo y un link de cierre, no una tarjeta. */
.supervision h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:16px}
.supervision p{margin-bottom:18px;color:var(--texto-tenue);max-width:66ch}

/* Aviso de emergencia, separado de los limites en su propia seccion para que pese
   distinto: superficie propia (enclaro, la que mas se despega) y una barra a la
   izquierda como en .testi-rv, asi se lee como aviso y no como parrafo de mas. Padding
   reducido porque es una sola linea, no un bloque de contenido. */
.emergencia{padding:clamp(28px,4vh,52px) 0}
.emergencia .wrap{max-width:760px}
.emergencia p{padding-left:18px;border-left:3px solid var(--acento);color:var(--texto)}
.emergencia a{color:var(--acento)}
/* Mas ancho solo en compu, para que el aviso ocupe menos renglones. En celu 760px ya
   es el ancho completo de pantalla, asi que no hay nada que ganar agrandandolo ahi. */
@media(min-width:980px){.emergencia .wrap{max-width:980px}}

/* ============================================================================
   QUIEN SOY
   ============================================================================ */
/* El retrato ocupa el lugar de la plancha de mapa que llevan las otras portadas.
   Ancho acotado: el original es una foto de telefono. */
.retrato{align-self:center;justify-self:start;width:100%;max-width:330px;
  border:1px solid var(--filete)}
@media(max-width:899px){.retrato{max-width:260px}}
.retrato img{width:100%;height:auto}

/* Linea de tiempo de los hitos, dentro de la banda oscura. */
.hitos .wrap{max-width:900px}
.hito{display:grid;gap:14px;padding:26px 0 26px 40px;position:relative;
  border-left:1px dashed var(--punteado);margin-left:9px}
.hito::before{content:"";position:absolute;left:-9px;top:34px;width:16px;height:16px;
  border-radius:50%;background:var(--acento);border:4px solid var(--fondo)}
/* El ultimo paso cierra el recorrido: cuadrado en vez de circulo y la linea punteada
   termina ahi. Se apaga el borde del elemento (sigue ocupando 1px, asi no se corre nada)
   y se dibuja el tramo con un ::after que llega justo al centro del marcador, a 42px:
   34px de top mas la mitad de los 16px de la caja, que es border-box. */
.hito:last-child{border-left-color:transparent}
.hito:last-child::before{border-radius:0}
.hito:last-child::after{content:"";position:absolute;left:-1px;top:0;height:42px;
  border-left:1px dashed var(--punteado)}
.hito h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.hito p{max-width:56ch;color:var(--texto-tenue)}

/* ============================================================================
   ARTICULOS: el listado y la pagina de lectura
   ============================================================================ */
.listado{padding:clamp(44px,7vh,88px) 0}
.listado .wrap{max-width:820px}
/* Cada pieza es una fila con una linea punteada arriba, como las paradas del recorrido. */
.pieza{display:block;text-decoration:none;color:inherit;padding:30px 0;
  border-top:1px dashed var(--punteado);transition:opacity .25s}
.pieza:last-child{border-bottom:1px dashed var(--punteado)}
.pieza:hover{opacity:.78}
.pieza .donde{font-family:'Poppins',sans-serif;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acento)}
.pieza h2{font-size:clamp(1.5rem,3vw,2rem);margin:10px 0}
.pieza p{font-size:15.5px;color:var(--texto-tenue);max-width:60ch;line-height:1.6}
/* La flechita marca cual sale del sitio y cual se queda adentro. */
.pieza .ir{display:inline-block;margin-top:14px;font-family:'Poppins',sans-serif;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--acento)}

/* La portada de un articulo NO es la de seccion: un texto largo se lee mejor con el titulo
   centrado sobre una columna angosta que partido en dos columnas. El mapa va detras, con
   el virado `papel-tenue`, que es el que se hizo para eso, y a opacidad baja. */
.portada.articulo{position:relative;overflow:hidden;
  padding:clamp(56px,9vh,104px) 0 clamp(40px,7vh,72px);
  border-bottom:1px solid var(--filete)}
.portada-bg{position:absolute;inset:0}
.portada-bg img{width:100%;height:100%;object-fit:cover;opacity:.30}
/* display:block pisa el grid de .portada, que dejaba el titular corrido a la derecha. */
.portada.articulo .wrap{position:relative;display:block;max-width:760px;margin:0 auto}
.portada.articulo h1{font-size:clamp(1.9rem,4vw,2.9rem);margin:14px 0 18px}
.portada .firma{font-size:13.5px;color:var(--texto-tenue)}

/* La columna de lectura. 66ch es el ancho donde el ojo no pierde el renglon. */
.texto{padding:clamp(40px,6vh,72px) 0 clamp(50px,8vh,96px)}
.texto .wrap{max-width:760px}
.texto h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin:52px 0 18px;max-width:32ch;
  line-height:1.15}
.texto h2:first-child{margin-top:0}
.texto p{margin-bottom:20px;max-width:66ch}
.texto ul{margin:0 0 20px;padding-left:0;list-style:none;max-width:66ch}
.texto li{position:relative;padding-left:26px;margin-bottom:14px}
.texto li::before{content:"";position:absolute;left:4px;top:12px;width:7px;height:7px;
  border-radius:50%;background:var(--acento);opacity:.85}
.texto li strong{font-weight:500;color:var(--texto)}

/* Cita testimonial. Las comillas las pone el diseno sobre .dicho, asi que el texto no las
   lleva escritas y la atribucion queda fuera del entrecomillado. */
.cita{position:relative;margin:40px 0 36px;padding-left:clamp(20px,3vw,34px);
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(1.3rem,2.4vw,1.6rem);line-height:1.35;max-width:52ch;color:var(--texto)}
/* line-height:0 saca las comillas del calculo del alto del renglon: si no, la primera
   linea de la cita se separa de la segunda por culpa del glifo mas grande. */
.cita .dicho::before,.cita .dicho::after{color:var(--acento);font-style:normal;
  font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:0;vertical-align:-.16em}
.cita .dicho::before{content:'"';margin-left:-.38em}
.cita .dicho::after{content:'"';margin-left:.02em}
.cita .quien{display:block;margin-top:18px;font-family:'Poppins',sans-serif;
  font-style:normal;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--texto-tenue)}
.cita .quien::before{content:"";display:inline-block;width:26px;height:1px;
  vertical-align:middle;margin-right:12px;background:var(--acento);opacity:.75}

/* Las referencias van mas chicas: son un bloque de consulta, no de lectura. */
.refs{margin-top:48px;padding-top:22px;border-top:1px dashed var(--punteado)}
.refs h3{font-family:'Poppins',sans-serif;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acento);margin-bottom:12px}
.refs p{font-size:14px;line-height:1.6;color:var(--texto-tenue);max-width:70ch}
.alpie{margin-top:48px}

/* Boton de vuelta al indice. Tiene forma de flecha hacia la izquierda: el lado izquierdo
   termina en pico y el derecho lleva la muesca en el mismo sentido, asi que la pieza
   entera se lee como una flecha.
   Va en dos capas porque clip-path recorta tambien el borde: la de abajo pinta el filete
   y la de arriba, 1px mas chica, tapa el interior. */
/* El color del <a> no se ve nunca: el <span> de arriba tapa todo menos 1px. Esta para que
   el elemento declare un par legible por si solo (crema sobre salvia, 5.54). Sin eso
   hereda el color del texto de la pagina y queda tinta sobre salvia, que es lo que corta
   el QA aunque en pantalla se vea bien. */
.volver{--pico:15px;display:inline-block;padding:1px;background:var(--acento);
  color:var(--crema);text-decoration:none;
  clip-path:polygon(0 50%, var(--pico) 0, 100% 0, calc(100% - var(--pico)) 50%,
    100% 100%, var(--pico) 100%)}
.volver span{display:flex;align-items:center;min-height:46px;
  padding:0 calc(var(--pico) + 22px);
  background:var(--fondo);color:var(--acento);
  font-family:'Poppins',sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  clip-path:polygon(0 50%, var(--pico) 0, 100% 0, calc(100% - var(--pico)) 50%,
    100% 100%, var(--pico) 100%);
  transition:background .3s,color .3s}
.volver:hover span{background:var(--acento);color:var(--fondo)}

/* ============================================================================
   PARA SEGUIR
   ============================================================================ */
/* Un espacio por bloque, separados por punteado como las paradas del recorrido.
   El orden va de menor a mayor compromiso: primero lo gratuito, despues lo pago. */
.espacios{padding:clamp(44px,7vh,88px) 0}
.espacios .wrap{max-width:820px}
/* El titulo de esta seccion es el unico texto de la home que solo lleva la etiqueta
   chica, sin un h2 al lado (cada tarjeta ya trae el suyo). Se agranda para que pese
   como titulo real y no como rotulo secundario. */
.espacios .etiqueta{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(1.9rem,3.8vw,2.6rem);letter-spacing:0;text-transform:none;
  color:var(--texto);margin-bottom:12px}
/* Cada camino es su propia tarjeta, para que los tres se distingan de un vistazo: un
   borde propio (no solo el filete de arriba de la version anterior), un franja de color a
   la izquierda que retoma el acento real de cada landing (jade en Soy neurodivergente,
   azul en AuDHD; el de Hotmart no tiene landing propia en el sitio, asi que usa el acento
   de la home) y un hover suave que resalta el borde entero al pasar el mouse. */
.espacio{padding:30px 30px 30px 26px;margin-bottom:20px;
  border:1px solid var(--filete);border-left:4px solid var(--acento);border-radius:4px;
  background:var(--crema);transition:border-color .2s ease,box-shadow .2s ease}
.espacio:last-child{margin-bottom:0}
.espacio:hover{border-color:var(--espacio-acento,var(--acento));
  box-shadow:0 4px 16px rgba(35,35,31,.08)}
.espacio:nth-of-type(1){--espacio-acento:#6FAE9B;border-left-color:#6FAE9B}
.espacio:nth-of-type(2){--espacio-acento:#79A8C9;border-left-color:#79A8C9}
.espacio .tipo{font-family:'Poppins',sans-serif;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acento)}
.espacio h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin:10px 0 6px}
.espacio .sub{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.4rem);color:var(--texto-tenue);max-width:52ch;
  margin-bottom:18px;line-height:1.3}
.espacio p{max-width:60ch;margin-bottom:24px}

/* ============================================================================
   ESCRIBIME
   ============================================================================ */
/* Los canales van con el color de cada marca, que es como la gente los reconoce de un
   vistazo. Es la unica parte del sitio que se sale de la paleta, a proposito, y por eso
   esta seccion se queda en noche: el verde de WhatsApp y el rosa de Instagram estan
   pensados para fondo oscuro y sobre papel se ensucian. */
.canales{padding:clamp(44px,7vh,80px) 0}
.canales .wrap{max-width:820px}
/* La rejilla va en un div propio y no en .wrap: el color de la rejilla es el que se ve por
   el hueco de 1px entre tarjetas, y puesto en .wrap se veia tambien en su relleno lateral,
   como dos franjas pegadas a los bordes. */
.rejilla{display:grid;gap:1px;background:var(--filete)}
@media(min-width:640px){.rejilla{grid-template-columns:1fr 1fr}}
.canal{background:var(--fondo);padding:30px 26px;text-decoration:none;color:var(--texto);
  display:flex;flex-direction:column;gap:10px;min-height:150px;transition:background .3s}
.canal:hover{background:#35594a}
.canal .icono{width:34px;height:34px}
.canal h2{font-size:24px}
.canal span{font-size:13.5px;color:var(--texto-tenue);line-height:1.5}
/* El verde y el rosa son los de cada marca, no los de la paleta del sitio. */
.canal .wa{color:#25D366}
.canal .ig{color:#DD2A7B}

.formu{padding:clamp(50px,8vh,96px) 0}
.formu .wrap{max-width:660px}
.formu h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:12px 0 14px}
.formu .intro{color:var(--texto-tenue);margin-bottom:34px;max-width:52ch}

/* ============================================================================
   PAGINAS DE GRACIAS
   ============================================================================ */
.aviso{flex:1;display:flex;align-items:center;padding:clamp(56px,9vh,110px) 0}
.aviso .wrap{display:grid;gap:clamp(32px,5vw,58px);align-items:center}
@media(min-width:880px){.aviso .wrap{grid-template-columns:1.05fr .95fr}}
.aviso h1{font-size:clamp(2rem,4.4vw,3.1rem);margin:14px 0 20px}
.aviso p{margin-bottom:16px;max-width:48ch}
/* La plancha se recorta a 4/3 en vez de estirarse: es una pagina corta, y a alto completo
   la imagen quedaba enorme al lado de tres renglones de texto. */
.aviso .marco{border:1px solid var(--filete);aspect-ratio:4/3;object-fit:cover}
.proximo{margin-top:30px;padding-top:26px;border-top:1px solid var(--filete)}
.proximo h2{font-size:24px;margin-bottom:10px}
.acciones{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:22px}
/* Las dos paginas de gracias son cortas: el pie tiene que quedar abajo igual. */
body.corta{min-height:100svh;display:flex;flex-direction:column}

/* ============================================================================
   PAGINAS LEGALES. Registro documental, prosa corrida y nada de recursos de lectura
   rapida: sin indice, sin listas, sin columnas. El cuerpo baja y la medida sube para que
   el texto ocupe el bloque entero. Antes vivia en css/legales.css.
   ============================================================================ */
body.legal main{padding:clamp(40px,6vh,64px) 0 clamp(56px,9vh,88px);
  font-size:14.5px;line-height:1.66;text-align:justify;hyphens:auto}
body.legal main .wrap{max-width:860px}
body.legal main h1{font-size:clamp(1.6rem,3vw,2.1rem);margin:10px 0 6px;text-align:left}
body.legal .fecha{font-size:12.5px;color:var(--texto-tenue);margin-bottom:30px;text-align:left}
/* El encabezado de apertura: mismo cuerpo que el resto, sin recuadro ni color que lo
   despegue del bloque. */
body.legal .apertura{margin:0 0 30px}
/* Los titulos de seccion son del mismo tamano que el texto: ordenan sin invitar a saltar
   de uno a otro. */
body.legal main h2{font-family:'Poppins',sans-serif;font-size:14.5px;font-weight:500;
  margin:26px 0 6px;text-align:left;letter-spacing:.01em}
body.legal main p{margin:0 0 12px}
body.legal main a{color:inherit;text-underline-offset:2px}
body.legal main a:hover{color:var(--acento)}

/* ============================================================================
   LA BRUJULA. Un formulario paso a paso: intro con la puerta de alta (nombre y correo,
   pedidos antes de la primera pregunta desde el 2026-09-15), ocho preguntas, la lectura y
   la pregunta del momento (que decide la recomendacion, ver js/momentos.js). Vive en
   brujula/index.html, la unica pagina que necesita estas piezas.
   ============================================================================ */
.app-brujula{max-width:620px;margin:0 auto;padding:clamp(44px,7vh,80px) clamp(20px,4vw,44px) clamp(64px,9vh,100px)}
/* Cada paso es una tarjeta que reemplaza a la anterior, con un fundido breve para que el
   cambio de pantalla no se sienta como un salto duro. */
.pantalla{background:var(--crema);border:1px solid var(--filete);padding:clamp(28px,5vw,44px);
  animation:aparecer .4s ease}
@keyframes aparecer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.pantalla{animation:none}}
.pantalla + .pantalla{margin-top:24px}
.pantalla h1{font-size:clamp(1.7rem,5vw,2.3rem);margin:10px 0 14px}
.pantalla h2{font-size:clamp(1.35rem,4vw,1.7rem);margin-bottom:8px}
.pantalla .bajada{margin-bottom:20px}
.pantalla .promesa{background:var(--crema2);border-radius:4px;padding:16px 18px;
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;color:var(--acento);
  font-size:1.05rem;margin-bottom:22px}

/* La barra de avance. */
.avance{margin-bottom:20px}
.avance .cuenta{font-size:12.5px;color:var(--texto-tenue);margin-bottom:7px;
  display:flex;justify-content:space-between}
.avance .riel{height:6px;background:var(--crema2);border-radius:50px;overflow:hidden}
.avance .lleno{height:100%;background:var(--acento);border-radius:50px;
  transition:width .3s ease;width:0}

/* Las opciones de una pregunta. Cada una es un boton entero, no un radio chico: el area
   tocable tiene que ser la fila completa, no la marca. */
.opciones{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.opcion{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--crema2);border:2px solid transparent;padding:15px 17px;
  font-family:inherit;font-size:1rem;color:var(--texto);cursor:pointer;line-height:1.4;
  transition:border-color .2s ease}
.opcion:hover{border-color:var(--filete)}
.opcion .marca{flex:0 0 20px;height:20px;border-radius:50%;border:2px solid var(--filete);
  background:var(--crema);display:flex;align-items:center;justify-content:center}
.opcion.multi .marca{border-radius:5px}
.opcion .marca svg{width:12px;height:12px;opacity:0}
.opcion.marcada{border-color:var(--acento)}
.opcion.marcada .marca{background:var(--acento);border-color:var(--acento)}
.opcion.marcada .marca svg{opacity:1}

.fila-nav{display:flex;gap:12px;align-items:center}
.fila-nav .boton{flex:1}
.volver-paso{background:none;border:0;color:var(--texto-tenue);font-family:inherit;
  font-size:14px;cursor:pointer;padding:12px 6px;min-height:44px}

/* La lectura. */
.lectura-bloque{margin-bottom:18px}
.lectura-bloque h3{font-family:'Poppins',sans-serif;font-weight:500;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acento);margin-bottom:6px}
.lectura-bloque p{margin:0}
.lectura-paso{background:var(--crema2);padding:18px 20px;margin-bottom:18px}
.lectura-paso h3{color:var(--acento)}

/* La linea de ayuda: solo aparece en las lecturas que la necesitan (shutdown, sobrecarga
   sensorial, acumulacion). Se distingue de un bloque mas por el filete a la izquierda, el
   mismo tratamiento que usa el resto del sitio para una aclaracion que pesa distinto. */
.linea-ayuda{border-left:3px solid var(--acento);padding:2px 0 2px 16px;margin:22px 0;
  font-size:14.5px;color:var(--texto-tenue)}

/* La pregunta del momento: cada frase es un boton largo, igual que las opciones, pero sin
   marca de tilde porque elegir una avanza directo. */
.momentos{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.momento-item{display:block;width:100%;text-align:left;background:var(--crema2);
  border:2px solid transparent;padding:17px 19px;font-family:inherit;font-size:1rem;
  color:var(--texto);cursor:pointer;line-height:1.5;transition:border-color .2s ease}
.momento-item:hover{border-color:var(--acento)}

/* La recomendacion, despues de elegir el momento. Un solo destino, no una grilla: es la
   idea central del embudo, una recomendacion y no un catalogo. */
.recomendacion{background:var(--pal);padding:clamp(24px,5vw,34px)}
.recomendacion h3{font-size:clamp(1.3rem,3.5vw,1.6rem);margin-bottom:10px}
.recomendacion p{margin-bottom:18px}

/* El formulario de la intro (nombre y correo, antes de la pregunta 1). Sin label visible:
   el nombre del campo va en el placeholder, y en aria-label para quien usa lector de
   pantalla (el placeholder desaparece al escribir, aria-label no). Mas bajo y con las
   esquinas redondeadas que el resto de los formularios del sitio, a pedido puntual para
   esta pantalla: no se toca la regla general .campo input, que usan las otras landings. */
#pantalla-intro form{margin:22px 0 4px}
#brujula-form input{min-height:40px;padding:9px 18px;border-radius:24px}
.correo-sugerencia{margin-top:8px;font-size:13.5px;color:var(--texto-tenue)}

/* La intro de /profesionales/: el titulo (etiqueta + h1) va dentro de .dice, arriba del
   texto. El texto de un lado, el formulario del otro, en compu; en celu se apilan (el
   orden natural del HTML ya pone el texto primero). */
/* .banda trae overflow:hidden de fabrica, para clipear prolijo la foto que sangra en la
   banda de Regulacion Viva. Esta banda no usa esa foto (solo el mapa de fondo, que ya
   entra completo con inset:0), pero el corte de abajo le cortaba tambien los paneles
   flotantes de los campos cuando se abrian cerca del borde de la seccion. Sin el bleed
   que justificaba el overflow:hidden, se saca solo aca. */
.intro-profesionales{overflow:visible}
.intro-profesionales-titulo{margin-bottom:clamp(24px,4vh,40px)}
.intro-profesionales-cols{display:grid;gap:clamp(28px,4vw,54px)}
#profesionales-form{margin-top:26px;max-width:440px}
@media(min-width:980px){
  .intro-profesionales-cols{grid-template-columns:1fr 1fr;align-items:center}
  #profesionales-form{margin-top:0;max-width:420px;width:100%}
}
/* Mismas esquinas redondeadas que el de la Brujula, para que las dos puertas de alta del
   sitio se vean parientes. Los checkbox/radio de campo-grupo quedan afuera: son controles
   nativos chicos, no cajas de texto. */
#profesionales-form input:not([type=checkbox]):not([type=radio]),
#profesionales-form select{min-height:40px;padding:9px 18px;border-radius:24px}

/* El de contacto, /escribime/, con las mismas piezas: sin label visible (el nombre del campo
   va en el placeholder y en aria-label) y las mismas esquinas redondeadas, para que los tres
   formularios del sitio se vean parientes. Va scopeado como los otros dos, sin tocar la regla
   general .campo input.
   El textarea se aparta en el alto y en el padding: con los 9px de arriba el texto arranca
   pegado al borde, y un area de mensaje necesita mas alto que una linea. */
#escribime-form input:not([type=hidden]),
#escribime-form textarea{min-height:40px;padding:9px 18px;border-radius:24px}
#escribime-form textarea{min-height:150px;padding:14px 18px}

/* Rango etario y evaluaciones: son fieldset, no div, porque un grupo de checkbox o radio
   necesita una leyenda propia (el placeholder no sirve para varias opciones a la vez). Se
   resetea el borde nativo del fieldset para que se vea como el resto de los .campo.
   Los nombres de las clases van prefijados campo-grupo- y campo-opcion, y no .opciones ni
   .opcion a secas: esas dos ya las usa la Brujula para las tarjetas de respuesta de cada
   pregunta, y colisionaban (el fondo y el padding de esa tarjeta se comian el checkbox). */
.campo-grupo{border:0;margin:0;padding:0}
.campo-grupo legend{padding:0;margin-bottom:2px;font-size:13px;color:var(--texto-tenue)}
.campo-grupo-opciones{display:flex;flex-wrap:wrap;gap:10px 22px}
/* .campo-grupo .campo-opcion, y no .campo-opcion a secas: el label de cada casilla
   tambien matchea la regla general ".campo label" (font-size:13px, mas arriba en esta
   hoja), y esa gana por especificidad (una clase + una etiqueta le gana a una clase
   sola) sin importar que esta venga despues en el archivo. Con el 13px de esa regla
   ganando, las opciones de rango etario quedaban mas chicas que las de profesion y
   evaluaciones, al reves de lo que decia el comentario de abajo. */
.campo-grupo .campo-opcion{display:flex;align-items:center;gap:12px;font-size:17px;
  color:var(--texto);cursor:pointer}
.campo-grupo input[type=checkbox],.campo-grupo input[type=radio]{
  width:19px;height:19px;min-height:auto;padding:0;border:0;background:none;
  accent-color:var(--acento);cursor:pointer;flex:none}
/* Mismo tamano que .campo-desplegable-opcion (profesion, evaluaciones), para que las
   tres se lean parejas. */
@media(max-width:859px){.campo-grupo .campo-opcion{font-size:19px}}

/* Desplegable con estilo propio, para los tres campos de opcion cerrada (profesion,
   rango etario, evaluaciones). LA RAZON: un <select> nativo abre un picker distinto en
   cada plataforma (en Android, la hoja del sistema operativo; en compu, el menu del
   navegador), y el panel de checkbox de rango etario se veia con OTRO estilo mas, el
   nuestro. Los tres quedaban distintos entre si. Ahora los tres arman el mismo panel
   flotante por CSS/JS, y el <select> (o el fieldset de checkbox) sigue siendo el control
   real: sin JS (sin .mejorado) se ve y se usa tal cual, nativo. Con JS, se lo tapa con
   una pildora igual a los demas campos que al clic despliega el panel: para un <select>
   de una sola opcion, js/multiselect.js arma las filas leyendo las <option> y las inserta
   solo; para rango etario, el fieldset de checkbox ya construido en el HTML pasa a ser el
   panel. El panel va en colores fijos y opacos (no var(--campo)/var(--texto)), mismo
   motivo que las option del select viejo: flota sobre cualquier superficie del sitio y no
   puede depender de cual sea. */
.campo-desplegable{position:relative}
.campo-desplegable-boton{display:none}
/* El select real (el que valida "profesion", required) NO se manda a -9999px: un
   elemento fuera de pantalla no tiene donde mostrar el globito nativo de "completa este
   campo", y el resultado era que el boton "Sumarme" no hacia nada y no se veia ningun
   aviso. Queda superpuesto, invisible, exactamente en el lugar de la pildora que lo tapa
   (position:absolute;inset:0 dentro de .campo-desplegable, que es position:relative), asi
   el navegador ancla el aviso justo ahi, donde la persona ya esta mirando. */
.campo-desplegable.mejorado select{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;pointer-events:none}
.campo-desplegable.mejorado .campo-desplegable-boton{
  display:block;width:100%;text-align:left;background:var(--campo);color:var(--texto-tenue);
  opacity:.7;border:1px solid var(--campo-filete);border-radius:24px;padding:9px 40px 9px 18px;
  min-height:40px;font-family:inherit;font-weight:300;font-size:16px;cursor:pointer;
  position:relative}
/* El color fuerte vuelve recien cuando ya se eligio algo, mismo criterio que .campo
   select:invalid (color:var(--texto-tenue) mas opacity:.7, no uno solo: es la misma
   combinacion del placeholder de los inputs). La clase la pone js/multiselect.js. */
.campo-desplegable.mejorado .campo-desplegable-boton.elegido{color:var(--texto);opacity:1}
.campo-desplegable.mejorado .campo-desplegable-boton::after{content:'';position:absolute;
  right:18px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:1.6px solid var(--texto-tenue);border-bottom:1.6px solid var(--texto-tenue);
  transform:rotate(45deg)}
/* Sin JS la leyenda del fieldset (rango etario) queda a la vista: es lo unico que dice
   que son esas casillas, ya que el rotulo pasa a vivir adentro de la pildora, que sin JS
   no se muestra. Con JS se oculta, para no repetir el mismo texto que ya esta en el boton. */
.campo-desplegable.mejorado .campo-desplegable-panel-legend{position:absolute;left:-9999px}
.campo-desplegable.mejorado .campo-desplegable-panel{display:none;position:absolute;
  z-index:5;top:calc(100% + 8px);left:0;right:0;background:var(--pal);
  border:1px solid rgba(35,35,31,.14);border-radius:14px;padding:16px 18px;
  box-shadow:0 10px 28px rgba(0,0,0,.22)}
.campo-desplegable.mejorado .campo-desplegable-panel.abierto{display:block}
.campo-desplegable.mejorado .campo-desplegable-panel .campo-opcion{color:#23231F;
  padding:8px 10px;border-radius:8px;transition:background .15s ease}
.campo-desplegable.mejorado .campo-grupo-opciones{flex-direction:column;flex-wrap:nowrap;gap:18px}
/* Sin el cuadradito: la fila entera es el control (se sigue tildando igual, por el
   <label> que ya envuelve al checkbox) y el estado marcado se ve por fondo/color, mismo
   lenguaje que .campo-desplegable-opcion.seleccionada. El checkbox sigue en el DOM y
   sigue siendo tabulable, solo se esconde de forma visual (no display:none), para no
   perder teclado ni lector de pantalla. Todo esto queda adentro de .mejorado: sin JS el
   checkbox de siempre se ve y se usa igual que antes. */
.campo-desplegable.mejorado .campo-grupo input[type=checkbox]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.campo-desplegable.mejorado .campo-desplegable-panel .campo-opcion:hover{
  background:rgba(63,107,87,.10)}
.campo-desplegable.mejorado .campo-desplegable-panel .campo-opcion:has(input:checked){
  background:rgba(63,107,87,.16);color:var(--salvia);font-weight:500}
.campo-desplegable.mejorado .campo-desplegable-panel .campo-opcion:has(input:focus-visible){
  outline:2px solid var(--acento);outline-offset:2px}
.campo-desplegable-ok{display:none}
.campo-desplegable.mejorado .campo-desplegable-ok{display:inline-flex;margin-top:14px;
  background:var(--salvia);color:#fff;border:0;border-radius:20px;padding:8px 20px;
  font-family:inherit;font-size:14px;font-weight:400;cursor:pointer}
/* Filas del panel "simple" (profesion, evaluaciones): una por <option>, clic y cierra.
   Mismo tamano de letra que las de rango etario (.campo-opcion), para que las tres se
   lean parejas. */
.campo-desplegable-opcion{display:block;width:100%;text-align:left;background:none;
  border:0;border-radius:8px;padding:10px 8px;font-family:inherit;font-weight:300;
  font-size:17px;color:#23231F;cursor:pointer}
.campo-desplegable-opcion:hover,.campo-desplegable-opcion:focus-visible{
  background:rgba(63,107,87,.12)}
.campo-desplegable-opcion.seleccionada{color:var(--salvia);font-weight:500}
@media(max-width:859px){.campo-desplegable-opcion{font-size:19px}}
.link-sugerencia{background:none;border:0;padding:0;font:inherit;color:var(--acento);
  text-decoration:underline;cursor:pointer}
.brujula-error{color:#B3261E;font-size:13.5px;margin-top:10px}