/* Ajustes de la landing sobre la plantilla Nerova.
 *
 * Se carga DESPUES de la hoja de la plantilla y solo anade lo que ella no trae.
 * El diseno, los colores y la grafica no se tocan: es lo que se quiere conservar.
 * Todo lo de aqui usa SUS tokens, para que lo nuevo no se note pegado.
 */

/* El distintivo "Made in Webflow" lo inyecta webflow.js en tiempo de ejecucion,
 * asi que no se puede quitar del marcado: hay que ocultarlo por CSS.
 * Es un export de plantilla comprada y autoalojado, no un sitio en Webflow. */
.w-webflow-badge {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Acordeon de preguntas
 * Nerova no trae ninguno. Va con <details>/<summary> nativos: abre y cierra sin
 * JavaScript, funciona con teclado y con lector de pantalla, y no depende de
 * IX2 — que en esta copia no reproduce las animaciones de arranque de pagina.
 * ------------------------------------------------------------------------- */
.acordeon {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.acordeon-item {
  background-color: var(--_color---color--card-bg);
  border: 1px solid var(--_color---color--border);
  border-radius: var(--_radious---radious--r-20px, 20px);
  padding: 1.5rem 2rem;
  transition: border-color 0.3s ease;
}

.acordeon-item:hover {
  border-color: var(--_color---color--inside-shadow);
}

.acordeon-pregunta {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  list-style: none;
}

/* el triangulo por defecto sobra: se sustituye por el signo propio */
.acordeon-pregunta::-webkit-details-marker {
  display: none;
}
.acordeon-pregunta::marker {
  content: '';
}

.acordeon-pregunta h3 {
  margin: 0;
  font-size: var(--header-text--text--text-20px, 1.25rem);
  line-height: var(--line-hight--130, 130%);
}

/* El signo se dibuja con CSS en vez de con un icono: asi hereda el color del
   texto y no hay que mantener un SVG mas. */
.acordeon-signo {
  flex: 0 0 auto;
  position: relative;
  width: 1rem;
  height: 1rem;
}
.acordeon-signo::before,
.acordeon-signo::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background-color: currentColor;
  transition: transform 0.25s ease;
}
.acordeon-signo::after {
  transform: rotate(90deg);
}
.acordeon-item[open] .acordeon-signo::after {
  transform: rotate(0deg);
}

.acordeon-respuesta {
  padding-top: 1rem;
  max-width: 52ch;
}

@media (max-width: 767px) {
  .acordeon-item {
    padding: 1.25rem 1.25rem;
  }
  .acordeon-pregunta {
    gap: 1rem;
  }
}

/* ---------------------------------------------------------------------------
 * Marcador de hueco
 * Los `[[FALTA]]` y `[[PENDIENTE]]` son decisiones que no se han tomado, no
 * descuidos. Se marcan para que no lleguen a produccion por despiste: si algo
 * amarillo queda visible el dia de publicar, se ve desde el otro lado de la sala.
 * ------------------------------------------------------------------------- */
.hueco {
  background-color: #ffe87326;
  border-left: 2px solid #ffe873;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-style: italic;
}

/* ---------------------------------------------------------------------------
 * Paleta de marca — muestreada de la portada de Facebook
 * (portada-maestramariasalome-v3.png, 1640x856)
 *
 * Cuantizada y contada por frecuencia real, separando por luminosidad y
 * saturacion para distinguir fondo de acento:
 *
 *   #030a18  48,8%  azul noche profundo — el fondo
 *   #03182b  31,4%  azul medio — superficies y tarjetas
 *   #fc7c1c   3,5%  ambar de vela — el unico acento con luz
 *   #372b57   2,0%  amatista — las piedras
 *   #fafafb   1,0%  blanco — la filigrana del emblema
 *
 * La plantilla venia en morado electrico (#80f) sobre negro puro. Aqui es
 * azul noche con acento ambar, que es lo que la marca ya usa en redes.
 * ------------------------------------------------------------------------- */
:root {
  --_color---color--bg: #030a18;
  --_color---color--white: #fafafb;
  --_color---color--paragraph: #a8b4c4;
  --_color---color--secondary-text: #fafafbc2;

  --_color---color--card-bg: #03182b;
  --_color---color--cms-card: #041b3559;
  --_color---color--small-card: #030a1800;
  --_color---color--hover-color: #02233a;

  /* el acento: el ambar de las velas de la portada */
  --_color---color--primary: #fc7c1c;

  /* la amatista de las piedras queda de apoyo, para bordes y realces */
  --_color---color--border: #372b5799;
  --_color---color--inside-shadow: #fc7c1c2e;
  --_color---color--outside-shadow: #030a1800;
  --_color---color--transparent: #030a1800;
}

/* ---------------------------------------------------------------------------
 * Cuando la tarjeta va sola, ocupa la fila
 *
 * ⚠ Revisado el 4-sep-2026. Antes esta regla estiraba a ancho completo la
 * ULTIMA tarjeta de cualquier rejilla con un numero impar de ellas, para que
 * la que sobraba del 2x2 no pareciera un descuido. En los cinco temas el
 * remedio salio peor: «Consultas para quienes viven fuera de su pais» cruzaba
 * la pagina de lado a lado y rompia la retícula que forman las otras cuatro.
 *
 * Ahora se aplica solo cuando la tarjeta es hija UNICA — el caso de «Si no es
 * para ti», que es una caja destacada y no una rejilla. En los temas, la
 * quinta se queda en su columna y la fila termina con un hueco, que es como
 * se comportan las rejillas y no llama la atencion.
 * ------------------------------------------------------------------------- */
.service-grid > .service-card:only-child {
  grid-column: 1 / -1;
}

/* A ancho completo la tarjeta se vuelve muy ancha y el texto pierde medida:
   se limita la linea, que es lo que hace legible un parrafo. */
.service-grid > .service-card:only-child .service-card-text-wrapper {
  max-width: 56ch;
}

/* ---------------------------------------------------------------------------
 * Fondo del heroe: la portada de Facebook
 *
 * Se usa un RECORTE, no la imagen entera: la portada lleva el logo y el nombre
 * grabados, y detras del titular eso se leeria como texto duplicado. El recorte
 * toma la zona de cartas, vela y amatista, que no tiene texto.
 *
 * Encima va un velo del color de fondo para que el titular conserve contraste:
 * una foto rica detras de texto blanco se lee mal por bonita que sea.
 * ------------------------------------------------------------------------- */
.fixed-background {
  background-image: linear-gradient(
      to bottom,
      rgba(3, 10, 24, 0.72) 0%,
      rgba(3, 10, 24, 0.88) 55%,
      #030a18 100%
    ),
    url('/marca/hero-fondo.webp') !important;
  /* anclada arriba a la derecha */
  background-position: 100% 0%, 100% 0% !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;

  /* La plantilla la deja `position: fixed`, asi que se queda pegada a la
     ventana mientras el resto sube. Aqui pasa a `absolute`: se desplaza con la
     pagina, como pediste. `top: 0` la ancla al principio del documento. */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Heroe: la carta que gira y el semiabanico de debajo
 *
 * La carta que gira la anima GSAP escribiendo `transform` EN LINEA (rotation
 * 360 en bucle de 24 s). Por eso su tamano y su posicion no se tocan con
 * `transform`: se usan las propiedades independientes `scale` y `translate`,
 * que el navegador compone aparte y el script no pisa.
 *
 * Medidas tomadas de la plantilla, no inventadas:
 *   .hero-component  max-width 320px  (220px por debajo de 991px)
 *   .hero-component-wrapper  flex, centrado, align-items: flex-start
 *
 * ⚠ El contenedor trae `overflow: hidden` y recortaria el abanico: aqui se
 * libera, que es la unica forma de que las cartas de los extremos se vean.
 * ------------------------------------------------------------------------- */
.hero-component-wrapper {
  position: relative;
  overflow: visible;
}

.hero-component {
  position: relative;
  z-index: 2;
  scale: 1.2;              /* el 1,20x pedido */
  translate: 0 -14%;       /* sube hacia el borde superior */
}

/* Las cuatro del abanico parten de la MISMA caja que la principal (320px), y
   se apoyan sobre su borde inferior: por eso el origen de giro esta abajo. */
.carta-abanico {
  position: absolute;
  z-index: 1;
  top: 30px;               /* el `margin-top` que la plantilla da a la principal */
  left: 50%;
  width: 100%;
  max-width: 320px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  transform-origin: 50% 90%;
}

/* Dos a cada lado, con giro y caida crecientes hacia fuera. Las de fuera van
   mas tenues y mas pequenas: eso es lo que da profundidad de tirada. */
.carta-abanico-1 { transform: translate(calc(-50% - 36%), 22%) rotate(-30deg) scale(0.8); opacity: 0.78; }
.carta-abanico-2 { transform: translate(calc(-50% - 17%), 12%) rotate(-14deg) scale(0.88); opacity: 0.9; }
.carta-abanico-3 { transform: translate(calc(-50% + 17%), 12%) rotate(14deg)  scale(0.88); opacity: 0.9; }
.carta-abanico-4 { transform: translate(calc(-50% + 36%), 22%) rotate(30deg)  scale(0.8);  opacity: 0.78; }

@media (max-width: 991px) {
  /* la plantilla baja la carta a 220px en este punto */
  .carta-abanico { max-width: 220px; }
}

@media (max-width: 767px) {
  /* aqui la plantilla quita el margen superior y alinea a la derecha */
  .hero-component { scale: 1.05; translate: 0 -6%; }
  .carta-abanico { top: 0; }

  .carta-abanico-1 { transform: translate(calc(-50% - 26%), 18%) rotate(-22deg) scale(0.82); }
  .carta-abanico-2 { transform: translate(calc(-50% - 12%), 10%) rotate(-11deg) scale(0.9); }
  .carta-abanico-3 { transform: translate(calc(-50% + 12%), 10%) rotate(11deg)  scale(0.9); }
  .carta-abanico-4 { transform: translate(calc(-50% + 26%), 18%) rotate(22deg)  scale(0.82); }
}

/* ---------------------------------------------------------------------------
 * El nombre en texto, donde la plantilla ponia su logo
 * ------------------------------------------------------------------------- */
.marca-nombre {
  font-family: var(--font-family--primary-font);
  font-size: 1.625rem; /* 1,25rem * 1,3 */
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--_color---color--white);
  white-space: nowrap;
}
.marca-nombre-italica {
  font-family: var(--font-family--secondary-font);
  font-style: italic;
  color: var(--_color---color--secondary-text);
}

/* La marca de agua del pie: ocupa el ancho, como hacia la imagen. `clamp` en
   vez de un tamano fijo para que no desborde en movil, que es donde una
   palabra tan larga se sale. */
.footer-marca {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-family--secondary-font);
  font-style: italic;
  font-size: clamp(1.6rem, 9.5vw, 11rem);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  background: linear-gradient(180deg, #fafafb2e 0%, #fafafb00 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 767px) {
  .marca-nombre {
    font-size: 1.15rem;
    /* a 375px la marca terminaba justo donde empieza el boton (0px de aire).
       Se acorta un punto y se le reserva margen. */
    margin-right: 0.75rem;
  }
  /* En movil "Maestra Maria Salome" en una sola linea desbordaba 24px:
     se le permite partir. */
  .footer-marca { white-space: normal; }
}

/* La escasez del heroe: bajo los botones, en el punto de decision.
   `margin-top` NEGATIVO a proposito: `.hero-content-wrapper` es un flex column
   con `gap:48px` de la plantilla, y encima yo le habia puesto 24px de margen.
   Entre los dos dejaban 72px de aire muerto. Se recorta sin tocar el `gap`,
   que tambien gobierna la separacion del titular con los botones. */
.hero-escasez {
  margin-top: -22px;
  max-width: 46ch;
  font-size: var(--header-text--text--text-14px, 0.875rem);
  line-height: var(--line-hight--150, 150%);
  color: var(--_color---color--paragraph);
}

/* ---------------------------------------------------------------------------
 * Escritorio: las cartas mas arriba
 * Solo se mueven la carta que gira y su abanico. El rayo de luz vive en
 * `.hero-light-holder` con sus `.beam-flow` y NO se toca: si subiera con ellas,
 * dejaria de nacer donde nace.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .hero-component { translate: 0 -34%; }
  .carta-abanico { top: -32px; }
}

/* ⚠ Por debajo de 992px se RESTAURA el recorte del contenedor.
   Liberarlo es lo que permite ver el abanico en escritorio, pero mas estrecho
   la carta que gira y las de los extremos se salen: 24px medidos a 375px y
   57px a 768px. El recorte es de la plantilla, no un parche mio. */
@media (max-width: 991px) {
  /* `clip visible`: recorta SOLO en horizontal. Con `overflow: clip` a secas
     tambien se recortaba en vertical y cortaba el logo por la mitad en movil.
     `clip` es el unico valor que permite dejar el otro eje en `visible`. */
  .hero-component-wrapper {
    overflow-x: clip;
    overflow-y: visible;
  }
}

/* ---------------------------------------------------------------------------
 * Logo y nombre bajo las cartas del heroe (solo escritorio)
 *
 * ⚠ Va ABSOLUTO y NO se toca `flex-direction` del contenedor. Motivo medido:
 * la llama de la plantilla es `.hero-light-wrapper{position:absolute;
 * inset:-34% 8% auto auto; overflow:clip}` — su `top` es un PORCENTAJE del
 * alto de `.hero-section`. Al apilar el logo en flujo, esa columna paso de
 * 539px a 676px, el -34% crecio, la llama subio fuera de cuadro y el `clip`
 * la corto por la mitad. En absoluto no aporta altura y nada se descuadra.
 *
 * Por lo mismo NO se envuelven las cartas: `.hero-component-wrapper` conserva
 * el `display:flex; justify-content:center` de la plantilla, que es lo que
 * centra la carta que gira. Un envoltorio `display:block` la descentraba
 * 172px a la izquierda.
 * ------------------------------------------------------------------------- */
.hero-marca {
  display: none; /* solo escritorio, se activa mas abajo */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  pointer-events: none; /* decorativo: no roba clics al abanico */
}

.hero-marca-emblema {
  width: 114px;  /* 88px * 1,3 */
  height: 114px;
  opacity: 0.92;
}

.hero-marca-nombre {
  margin: 0;
  font-family: var(--font-family--primary-font);
  font-size: 1.3rem; /* 1rem * 1,3 */
  letter-spacing: 0.24em;
  line-height: 1;
  color: var(--_color---color--secondary-text);
}

.hero-marca-nombre-italica {
  display: inline-block;
  margin-top: 0.35rem;
  font-family: var(--font-family--secondary-font);
  font-style: italic;
  font-size: 1.95rem; /* 1,5rem * 1,3 */
  letter-spacing: normal;
  line-height: 1.15;
  color: var(--_color---color--white);
}

/* Visible en TODOS los anchos. El `top` cambia porque el alto de las cartas
   cambia: la plantilla las baja de 320px a 220px por debajo de 991px. */
.hero-marca {
  display: flex;
  top: 340px;
}

@media (max-width: 991px) {
  .hero-marca { top: 250px; }
  .hero-marca-emblema { width: 92px; height: 92px; }
  .hero-marca-nombre { font-size: 1.1rem; }
  .hero-marca-nombre-italica { font-size: 1.6rem; }
}

@media (max-width: 767px) {
  /* En movil la plantilla alinea las cartas a la derecha con padding, asi que
     el logo se centra sobre la columna completa, no sobre las cartas. */
  .hero-marca { top: 250px; } /* 230 + 20 pedidos */

  /* El logo es absoluto y no aporta altura: colgaba 104px por debajo del
     contenedor y pisaba el texto. Se le reserva el hueco con padding.
     Esto crece la columna, y no pasa nada porque la llama ya esta fijada en
     pixeles: si siguiera en `-34%` se descuadraria otra vez. */
  .hero-component-wrapper { padding-bottom: 200px; } /* 150 + 50 de aire */
}

/* ---------------------------------------------------------------------------
 * La llama: fijada en pixeles, no en porcentaje
 *
 * La plantilla la coloca con `inset:-34% ...` — un PORCENTAJE del alto de
 * `.hero-section` — y con `overflow:clip`. Nuestro texto es mas alto que el
 * de Nerova (titular a 3 lineas, subtitulo mas largo, linea de escasez), asi
 * que la seccion pasa de 579px a 836px, el -34% crece y la llama sube fuera
 * de cuadro: se veia cortada por una linea horizontal.
 *
 * Los valores son los MEDIDOS en la plantilla intacta a cada ancho, para que
 * la llama caiga exactamente donde su autor la puso:
 *   1440px  offset -269  (top -197 + margin -72)
 *    991px  offset -235  (top -163 + margin -72)
 *    768px  offset -260  (top -188 + margin -72)
 *    375px  offset -264  (top -264, sin margin)
 * ------------------------------------------------------------------------- */
.hero-light-wrapper {
  top: -197px !important;
}

@media (max-width: 991px) {
  .hero-light-wrapper { top: -163px !important; }
}

@media (max-width: 767px) {
  .hero-light-wrapper { top: -188px !important; }
}

@media (max-width: 479px) {
  .hero-light-wrapper { top: -264px !important; }
}

/* ---------------------------------------------------------------------------
 * El haz, sin borde recto
 *
 * `.hero-light-wrapper` lleva `overflow: clip` de la plantilla, asi que la
 * imagen del haz se corta en recto por su borde inferior y se ve una linea
 * horizontal. En el original ese corte queda tapado por la carta; con nuestra
 * carta mas arriba y a 1,2x, queda a la vista.
 *
 * Se disuelve con una mascara en degradado en vez de subir el contenedor: asi
 * no depende de donde acabe la carta, y una luz que se disipa es lo que hace
 * una luz de verdad.
 * ------------------------------------------------------------------------- */
.hero-light-wrapper {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* ---------------------------------------------------------------------------
 * Titular del heroe a 0,7x
 *
 * Valores MEDIDOS en cada breakpoint y multiplicados por 0,7. Se fija tambien
 * `line-height`, porque la plantilla lo tiene igual al tamano de fuente (1:1)
 * y si solo se bajara el tamano quedaria un interlineado desproporcionado.
 *
 *   1440px  72,0px -> 50,4px
 *    991px  51,2px -> 35,8px
 *    768px  51,2px -> 35,8px
 *    375px  40,0px -> 28,0px
 * ------------------------------------------------------------------------- */
.hero-title {
  font-size: 50.4px;
  line-height: 1.08;
}

@media (max-width: 991px) {
  .hero-title { font-size: 35.8px; }
}

@media (max-width: 479px) {
  .hero-title { font-size: 28px; }
}

/* ---------------------------------------------------------------------------
 * Cabecera en tableta y movil: sin hamburguesa, con el boton a la vista
 *
 * La plantilla muestra el hamburguesa por debajo de 991px y, por debajo de
 * 767px, esconde ademas el boton de la cabecera (`.hide-mobile`) dejando otro
 * dentro del menu desplegable. Aqui no interesa: la pagina tiene UNA salida y
 * esconderla detras de un menu le pone un clic de mas.
 *
 * Tableta (768-991): fuera el hamburguesa, boton con el rotulo completo.
 * Movil (<=767):     fuera el hamburguesa, boton a la vista con rotulo corto,
 *                    porque el largo no cabe.
 * ------------------------------------------------------------------------- */
.rotulo-corto {
  display: none;
}

@media (max-width: 991px) {
  .home-01-navbar-menu-button {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* la plantilla lo esconde con `.primary-button-link.hide-mobile{display:none}` */
  .primary-button-link.hide-mobile {
    display: flex !important;
  }
  .rotulo-largo {
    display: none;
  }
  .rotulo-corto {
    display: inline;
  }
}

/* ---------------------------------------------------------------------------
 * Fuera la flecha redonda de los botones
 *
 * La plantilla pone un circulo con flecha diagonal al lado de cada boton
 * (`.primary-button-arrow-wrapper`). Se oculta: no dice nada que el rotulo no
 * diga ya, y al lado de "Consulta Gratis por WhatsApp" parece un segundo
 * boton, que en una pagina de una sola salida es justo lo que no interesa.
 * ------------------------------------------------------------------------- */
.primary-button-arrow-wrapper {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Menos aire entre el boton y "Ver como es una consulta"
 *
 * `.hero-button-wrapper` tiene `flex-flow: wrap` y `gap: 24px`: cuando los dos
 * botones no caben en una linea, esos 24px se convierten en separacion
 * vertical. Se baja solo el eje de filas — el de columnas se deja, que es el
 * aire entre los dos botones cuando SI caben juntos.
 * ------------------------------------------------------------------------- */
.hero-button-wrapper {
  row-gap: 8px !important;
}

@media (max-width: 767px) {
  /* en movil el contenedor usa gap de 40px, no 48: el ajuste es menor */
  .hero-escasez { margin-top: -18px; }
}

/* ---------------------------------------------------------------------------
 * «Con quien vas a hablar» — la tarjeta sin retrato (4-sep-2026)
 *
 * La tarjeta de Nerova estaba construida alrededor de una foto vertical
 * grande: `.team-grid` reparte cuatro columnas para cuatro fichajes y
 * `.team-image-background` es el marco de la foto. Aqui solo hay una persona
 * y no hay foto suya, asi que el retrato se sustituye por el emblema y la
 * ficha deja de ser una tarjeta para ser una firma al pie del texto.
 *
 * Se conserva el DOM entero — `data-w-id` incluidos — porque IX2 anima
 * `.team-card`; lo que cambia es como se pinta.
 * ------------------------------------------------------------------------- */

/* Una sola columna, centrada. Sin esto la ficha ocupa 1 de 4 columnas y queda
   descolgada a la izquierda bajo un texto centrado. */
.team-grid {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
}

/* `.team-holder` es quien pinta el panel — fondo, borde de 1px y radio de
   64px — y mide 1339px porque la plantilla esperaba cuatro fichas dentro. Con
   una sola queda un rectangulo casi vacio. Se encoge a la medida de la ficha:
   asi el panel deja de ser un contenedor y pasa a leerse como un sello al pie
   del texto. */
.team-holder {
  max-width: 480px !important;
  margin-inline: auto !important;
}

.team-card {
  align-items: center !important;
  text-align: center !important;
  max-width: 420px;
}

/* El marco de la foto desaparece: sin imagen que enmarcar, el borde, el fondo
   y la sombra solo dibujarian una caja vacia alrededor del emblema. */
.team-image-shadow.es-firma {
  border-radius: 0 !important;
  overflow: visible !important;
}

.team-emblema {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto;
  opacity: 0.9;
}

.team-card-content-wrapper {
  align-items: center !important;
}

/* Los cuatro parrafos son el bloque de lectura de la seccion, no un subtitulo:
   piden aire entre ellos y una medida corta. `.team-subtitle-wrapper` ya trae
   max-width 650px de la plantilla.
 *
 * Y se alinean a la izquierda. La plantilla los centra con `.center-align`,
 * que funciona para un subtitulo de dos lineas y falla en cuatro parrafos: al
 * centrar, cada linea arranca en una sangria distinta y el ojo pierde el
 * renglon. La columna sigue centrada en la pagina; lo que se alinea es el
 * texto dentro de ella. */
.team-subtitle-wrapper {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.team-subtitle-wrapper .body-text.center-align {
  text-align: left;
}

@media (max-width: 767px) {
  .team-subtitle-wrapper { gap: 14px; }
  .team-emblema { width: 72px; height: 72px; }
}

/* ---------------------------------------------------------------------------
 * «Ver como es una consulta» — oculto hasta que haya video (4-sep-2026)
 *
 * El boton secundario de la plantilla lleva un icono de reproduccion y promete
 * ver algo. No hay nada que ver todavia: vuelve el dia que ella pase el video.
 *
 * Aparece dos veces y las dos se ocultan. Ojo con la segunda: la del cierre
 * apuntaba a `https://calendly.com/` — un enlace de la plantilla que llego a
 * produccion. Era una salida fuera del sitio en una pagina que solo debe tener
 * una, y ademas a una agenda que no existe.
 * ------------------------------------------------------------------------- */
.blind-button {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * «Como es una consulta» — la cabecera, reacomodada
 *
 * `.why-choose-header-holder` es `row` con `space-between`: dejaba el subtitulo
 * y el boton pegados al borde izquierdo y el titular a 443px, al derecho. Se
 * leia el boton antes que el titulo — se pedia la accion antes de decir de que
 * seccion se trata.
 *
 * `row-reverse` pone el titular a la izquierda, donde empieza la lectura, y
 * baja el subtitulo y el boton al lado derecho. El `gap` acota el vacio: con
 * `space-between` a secas las dos columnas se van a los extremos.
 * ------------------------------------------------------------------------- */
.why-choose-header-holder {
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  gap: 64px;
  align-items: flex-end !important;
}

/* La columna del subtitulo separa sus dos hijos con 48px, pensado para cuando
   era la columna principal. Alineada al pie del titular, sobra la mitad. */
.why-choose-left-header-wrapper {
  gap: 24px !important;
}

@media (max-width: 991px) {
  /* En tableta y movil la cabecera se apila. `column-reverse` mantiene el
     orden correcto: titular arriba, subtitulo y boton debajo. */
  .why-choose-header-holder {
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    gap: 32px;
  }
}

/* El ancla `#como-es` queda bajo la cabecera fija si se salta a ella en seco. */
#como-es {
  scroll-margin-top: 96px;
}

/* ---------------------------------------------------------------------------
 * Acordeones a dos columnas (4-sep-2026)
 *
 * Limites y Preguntas tienen siete elementos cada uno. En una sola columna de
 * 1339px la fila es larguisima y el signo +/- queda a medio metro del titulo;
 * ademas obliga a un scroll largo para ver que hay siete, que es justo lo que
 * da fuerza a esos bloques.
 *
 * `align-items: start` es lo que impide que al abrir un elemento se estire su
 * companero de fila hasta igualar la altura.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .acordeon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 1rem;
  }
}

/* ---------------------------------------------------------------------------
 * «Como es una consulta» — los cuatro pasos, en cuatro columnas
 *
 * La plantilla componia tres tarjetas escalonadas: una alta con dos pasos
 * dentro, y dos desplazadas con `top-margin`. Con cuatro pasos, el cuarto
 * caia a una segunda fila y el conjunto se leia como un mosaico, no como una
 * secuencia — que es justo lo contrario de lo que hace este bloque, donde el
 * orden ES la informacion.
 *
 * Cuatro columnas iguales: se leen 01, 02, 03, 04 de izquierda a derecha.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .why-choose-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    align-items: stretch;
  }

  /* Sin foto dentro, `max-height` solo sirve para cortar el parrafo. */
  .why-choose-card-wrapper {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ---------------------------------------------------------------------------
 * «Ver los temas» — retirado
 *
 * Enlace secundario de la plantilla. Dos motivos: el rotulo prometia llevar a
 * los temas y el `href` iba en realidad a WhatsApp, y una pagina de una sola
 * salida no gana nada con un segundo boton compitiendo al lado del principal.
 * ------------------------------------------------------------------------- */
.learn-more-button {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Las etiquetas de seccion, derechas (4-sep-2026)
 *
 * Dos cosas las torcian:
 *
 *  1. La hoja de Nerova inclina algunas por diseno: `.body-tag.why-choose`
 *     +7deg, `.cta` y `.expertise` -7deg.
 *  2. Peor: «Temas» y «El proceso» llevan `rotateZ(45deg)` en el `style` en
 *     linea. Es el estado INICIAL de una animacion de IX2 que debia girarlas
 *     hasta 0 — y que en esta copia no llega a ejecutarse. Medido: siguen a
 *     45 grados despues de entrar en pantalla.
 *
 * `transform: none !important` es lo unico que gana al `style` en linea. El
 * precio es que esas etiquetas ya no entran animadas; a cambio salen siempre
 * derechas y en su sitio, en vez de depender de una animacion que a veces no
 * corre. Para un rotulo de dos palabras es un buen cambio.
 * ------------------------------------------------------------------------- */
.body-tag {
  transform: none !important;
}

/* ---------------------------------------------------------------------------
 * «Si no es para ti» — la caja, acotada (4-sep-2026)
 *
 * Es la unica tarjeta de su seccion y no vive en una rejilla, asi que se
 * estiraba a todo el ancho del contenedor: 1339px de caja para tres lineas de
 * texto. Se le pone medida y se centra bajo el titular.
 * ------------------------------------------------------------------------- */
.service-card.caja-destacada {
  max-width: 720px;
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * La textura de fondo, en toda la pagina (4-sep-2026)
 *
 * `.fixed-background` solo mide 746px de alto y la pagina 8.400: la grafica
 * del heroe terminaba en seco y el resto quedaba plano.
 *
 * `textura-fondo.webp` sale de la PROPIA imagen del heroe: un recorte de la
 * filigrana de las cartas —evitando la franja izquierda, donde va grabado el
 * nombre de marca— espejado en 2x2, que es lo que garantiza que los bordes
 * casen y repita sin costura. Encima lleva horneado un velo del color de fondo
 * al 90%, asi que el archivo pesa 19 KB y su rango de luminosidad es de 0 a 52
 * sobre 255: se nota como profundidad, no como estampado, y no pelea con el
 * texto.
 *
 * Va en el <body>, debajo de todo: las tarjetas traen su propio fondo y se
 * recortan limpias encima. El color de marca queda debajo, para que la pagina
 * tenga su tono aunque la imagen no llegue a cargar.
 * ------------------------------------------------------------------------- */
body.body {
  background-image: url('/marca/textura-fondo.webp');
  background-repeat: repeat;
  background-size: 760px 760px;
  background-position: top center;
  background-attachment: scroll;
}

/* ---------------------------------------------------------------------------
 * Las fotos de los cuatro pasos (4-sep-2026)
 *
 * `.why-choose-image` viene con `height: 100%`, asi que sin una altura en el
 * envoltorio la imagen se colapsa. Se le da proporcion en vez de altura fija:
 * las cuatro son 4:3, y con `aspect-ratio` la caja reserva su sitio antes de
 * que la imagen cargue — que es lo que evita el salto de layout.
 * ------------------------------------------------------------------------- */
.why-choose-card-image-wrapper {
  aspect-ratio: 4 / 3;
  width: 100%;
  flex: 0 0 auto;
}

/* Al meter las fotos, las columnas se fueron de 317px a 359px y la cuarta
   tarjeta se salia del contenedor. La causa es el `min-width: auto` que traen
   por defecto los items de una rejilla: deja que el ancho intrinseco de la
   imagen ensanche la pista por encima del `1fr`. Con `min-width: 0` la columna
   manda sobre su contenido, que es lo que se quiere aqui. */
.why-choose-grid > * {
  min-width: 0;
}

/* ---------------------------------------------------------------------------
 * El pulso del resplandor: descongelado (5-sep-2026)
 *
 * Aqui vivia la congelacion del `filter` por debajo de 991px, puesta el 4-sep.
 * Diego pidio recuperar el pulso, asi que la regla se retira y el `glowTL` de
 * la plantilla vuelve a pintar en todos los anchos. Se deja escrito lo que se
 * midio entonces, porque sigue siendo cierto y explica que esperar:
 *
 *   · el giro esta limpio — `ease: "none"`, 24s, avanza 13,5 grados cada 900ms
 *     sin desviacion, asi que no salta en el bucle;
 *   · el rendimiento esta limpio — 60 fps, p95 de 16,8ms, cero fotogramas por
 *     encima de 32ms. Descongelar el halo NO es un problema de rendimiento;
 *   · el `glowTL` —«organic waterfall glow pulse»— no respira, da tirones: sus
 *     dos tramos duran distinto (0,7s subiendo y 1,1s bajando), cada uno con
 *     `power2.inOut`, que frena hasta pararse en cada extremo, y va en `yoyo`.
 *     Ademas el segundo tramo baja el halo dorado a 8px cuando la base eran 10,
 *     asi que el vaiven es asimetrico.
 *
 * Es decir: lo que se ve en movil no es un fallo, es como esta hecha la
 * plantilla. Si vuelve a molestar, lo honesto no es volver a congelarlo sino
 * reescribir el `glowTL` con tramos simetricos y `ease` lineal — el archivo es
 * `recursos.ts` y el tween se llama `glowTL`.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * «Como es una consulta» en movil: apilado, no carrusel (4-sep-2026)
 *
 * La plantilla resolvia esta seccion con DOS marcados: una rejilla para
 * escritorio (`.why-choose-wrapper.hide-tablet`) y un carrusel para lo demas.
 * El carrusel obligaba a deslizar sin decirlo en ninguna parte, y quien no lo
 * descubria se quedaba creyendo que el proceso tiene un paso — en un bloque
 * donde el orden ES la informacion.
 *
 * El carrusel ya NO existe: se retiro del marcado, asi que aqui solo queda
 * devolver la rejilla a los anchos donde la plantilla la escondia.
 * ------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .why-choose-wrapper.hide-tablet {
    display: block !important;
  }

  /* Dos columnas en tableta, una en movil: apilar cuatro tarjetas con foto en
     una sola columna a 900px de ancho deja una fila kilometrica. */
  .why-choose-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Fuera del breakpoint de escritorio seguian vigentes el `max-height: 410px`
     y el `overflow: hidden` de la plantilla, que con foto dentro recortaban el
     parrafo del paso. */
  .why-choose-card-wrapper {
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 767px) {
  .why-choose-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------------
 * Descargo de Meta en el pie (4-sep-2026)
 *
 * Va deliberadamente pequeno y en el tono de parrafo, no en el del texto
 * principal: es letra legal, tiene que estar y poder leerse, pero no compite
 * con el cierre ni con el boton. Medida corta para que no cruce el pie entero.
 * ------------------------------------------------------------------------- */
.descargo-meta {
  margin-top: 12px;
  max-width: 62ch;
  color: var(--_color---color--paragraph);
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.75;
}

.descargo-meta strong {
  font-weight: 600;
  opacity: 0.9;
}

/* ---------------------------------------------------------------------------
 * Pie legal: descargo, enlaces y las ventanas (4-sep-2026)
 *
 * Todo esto es letra pequena y se comporta como tal: presente y legible, sin
 * competir con el cierre ni con el boton, que siguen siendo lo unico que la
 * pagina pide de verdad.
 * ------------------------------------------------------------------------- */
.descargo-oficio {
  margin-top: 16px;
  max-width: 68ch;
  color: var(--_color---color--paragraph);
  font-size: 12.5px;
  line-height: 1.6;
}

.enlaces-legales {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px;
}

.enlaces-legales a {
  color: var(--_color---color--paragraph);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.enlaces-legales a:hover,
.enlaces-legales a:focus-visible {
  color: var(--_color---color--white);
  border-bottom-color: var(--_color---color--primary);
}

/* ---------------------------------------------------------------------------
 * La ventana legal
 *
 * `<dialog>` nativo: el navegador ya trae cierre con Escape, fondo inerte y
 * foco atrapado. Lo unico que hace falta es vestirlo.
 * ------------------------------------------------------------------------- */
.modal-legal {
  width: min(760px, calc(100vw - 32px));
  max-height: min(82vh, 900px);
  padding: 0;
  border: 1px solid var(--_color---color--border);
  border-radius: 20px;
  background-color: #061426;
  color: var(--_color---color--white);
  overflow: hidden;              /* el scroll lo lleva el cuerpo, no la caja */
  display: flex;
  flex-direction: column;
}

.modal-legal::backdrop {
  background: rgba(3, 10, 24, 0.82);
  backdrop-filter: blur(3px);
}

/* La barra no scrollea con el texto: el boton de cerrar tiene que estar
   siempre a la vista en un documento largo. */
.modal-legal-barra {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--_color---color--border);
  background-color: #061426;
}

.modal-legal-titulo {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 500;
}

.modal-legal-cerrar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--_color---color--border);
  border-radius: 50%;
  background: transparent;
  color: var(--_color---color--white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.modal-legal-cerrar:hover,
.modal-legal-cerrar:focus-visible {
  border-color: var(--_color---color--primary);
  background-color: var(--_color---color--hover-color);
}

.modal-legal-cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 22px 24px 28px;
  overscroll-behavior: contain;  /* que la rueda no arrastre la pagina detras */
  -webkit-overflow-scrolling: touch;
}

/* El texto viene de las paginas legales, que se estilan con `legal.css` — una
   hoja del grupo de rutas (legal) que aqui no se carga. Se le da su propia
   tipografia, medida de lectura corta incluida. */
.modal-legal-cuerpo .wrap { max-width: none; padding: 0; }
.modal-legal-cuerpo h1 { font-size: 24px; line-height: 1.2; margin: 0 0 4px; font-weight: 500; }
.modal-legal-cuerpo h2 { font-size: 17px; line-height: 1.3; margin: 26px 0 8px; font-weight: 600; }
.modal-legal-cuerpo h3 { font-size: 15px; margin: 18px 0 6px; font-weight: 600; }
.modal-legal-cuerpo p,
.modal-legal-cuerpo li {
  font-size: 14px;
  line-height: 1.65;
  color: var(--_color---color--paragraph);
  max-width: 64ch;
}
.modal-legal-cuerpo p { margin: 0 0 10px; }
.modal-legal-cuerpo ul, .modal-legal-cuerpo ol { margin: 0 0 12px; padding-left: 22px; }
.modal-legal-cuerpo li { margin-bottom: 6px; }
.modal-legal-cuerpo strong { color: var(--_color---color--white); font-weight: 600; }
.modal-legal-cuerpo a { color: var(--_color---color--primary); }
.modal-legal-cuerpo .actualizado { font-size: 12px; opacity: 0.7; margin-bottom: 16px; }

/* El aviso de «borrador sin revision juridica» que traen los documentos: se
   deja bien visible a proposito, no se disimula. */
.modal-legal-cuerpo .nota {
  border-left: 2px solid #ffe873;
  background-color: #ffe87314;
  border-radius: 4px;
  padding: 12px 14px;
  margin: 0 0 18px;
}
.modal-legal-cuerpo .nota p { margin: 0; }

@media (max-width: 767px) {
  .modal-legal { max-height: 88vh; border-radius: 16px; }
  .modal-legal-barra { padding: 14px 16px; }
  .modal-legal-cuerpo { padding: 18px 16px 24px; }
  .modal-legal-titulo { font-size: 17px; }
}

/* ---------------------------------------------------------------------------
 * El desborde horizontal de la banda de portatiles (4-sep-2026)
 *
 * Medido en produccion: 77px a 1024, 58 a 1100, 33 a 1200, 13 a 1280, 0 a
 * partir de 1350. Afectaba a toda la franja de portatiles, el 1366 incluido.
 *
 * La causa es mia: mas arriba se libera el `overflow: hidden` que la plantilla
 * pone en `.hero-component-wrapper`, porque era la unica forma de que se vieran
 * las cartas de los extremos. Lo que no vi es que el heroe no esta centrado en
 * la pagina —vive en la columna derecha—, asi que el abanico, que se abre
 * simetrico, tiene sitio a la izquierda y no a la derecha. Medido a 1024: el
 * contenedor acaba en 977 y la cuarta carta en 1086.
 *
 * Dos medidas, en este orden:
 *
 *  1. `overflow-x: clip` en la seccion. Es la garantia: pase lo que pase con la
 *     geometria, no habra barra horizontal. Va en el eje X SOLO — la llama que
 *     cae cuelga de un `top` negativo y `overflow: hidden` la decapitaria.
 *  2. Cerrar el abanico en la franja, para que lo que se recorte sea un borde y
 *     no un tercio de carta.
 * ------------------------------------------------------------------------- */
.hero-section {
  overflow-x: clip;
}

@media (min-width: 992px) and (max-width: 1345px) {
  .carta-abanico-1 { transform: translate(calc(-50% - 22%), 18%) rotate(-24deg) scale(0.82); }
  .carta-abanico-2 { transform: translate(calc(-50% - 10%), 10%) rotate(-11deg) scale(0.9); }
  .carta-abanico-3 { transform: translate(calc(-50% + 10%), 10%) rotate(11deg)  scale(0.9); }
  .carta-abanico-4 { transform: translate(calc(-50% + 22%), 18%) rotate(24deg)  scale(0.82); }
}

/* ---------------------------------------------------------------------------
 * El heroe en movil: el boton, dentro de la primera pantalla (4-sep-2026)
 *
 * Medido en produccion sobre 390x812, que es el movil de referencia:
 *
 *   cartas     y=96,  450px de alto   ← el 55% de la pantalla, antes de una palabra
 *   titular    y=607
 *   subtitulo  y=811  ← ya en el borde
 *   BOTON      y=947  ← 135px por DEBAJO del pliegue
 *
 * Una landing cuya unica oferta es «escribeme» no puede esconder el boton. Las
 * cartas son decoracion; la oferta es el contenido, y estaban al reves.
 *
 * Se recorta por tres sitios a la vez, en vez de sacrificar uno solo: la carta
 * baja de tamano, el aire sobre ella se reduce y los huecos del bloque de texto
 * pasan de 40 a 24px. Asi ninguna pieza queda desproporcionada.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero-component-wrapper {
    padding-top: 6px;
  }

  .hero-component {
    max-width: 158px !important;
    max-height: 158px !important;
  }

  .carta-abanico {
    max-width: 158px;
    top: 0;
  }

  /* El envoltorio medía 364px para una carta de 234: 130px de aire muerto.
     Las cuatro cartas del abanico son `position: absolute`, asi que no llenan
     el contenedor — solo cuelgan de el. Con altura explicita se recupera ese
     hueco y el abanico sigue asomando por debajo, que es como debe verse. */
  .hero-component-wrapper {
    height: 250px;
  }

  /* El bloque de texto respira menos: a 40px de hueco, tres separaciones se
     comen 120px que aqui valen mas que el aire. */
  .hero-content-wrapper {
    gap: 24px !important;
  }
}

/* ---------------------------------------------------------------------------
 * El heroe se ve en reposo (4-sep-2026)
 *
 * Medido en PRODUCCION a 390x812, tres cargas iguales: en reposo, sin tocar
 * nada, estos tres elementos estaban en `opacity: 0`
 *
 *   .hero-header-tag-wrapper   el antetitulo
 *   p.body-text                EL SUBTITULO QUE EXPLICA LA OFERTA
 *   .hero-button-wrapper       EL BOTON
 *
 * Es decir: quien abria la pagina en el movil veia las cartas, el emblema, el
 * titular y la linea de escasez — y ni la explicacion ni la llamada a la
 * accion. Se revelaban solo al hacer scroll, porque su animacion de IX2 se
 * dispara con ese evento y en el primer pantallazo nunca llega a ocurrir.
 *
 * Va en TODOS los anchos, no solo en movil: a 1440 funcionaba, pero ya se
 * habia medido antes `p.body-text` clavado en 0 en 1 de cada 7 cargas. Un 14%
 * de visitas sin la frase que explica la oferta no es un riesgo aceptable a
 * cambio de una animacion de entrada.
 *
 * El resto del heroe sigue animando: el titular con SplitText, las cartas, la
 * llama. Lo que se congela son tres piezas de texto y un boton.
 * ------------------------------------------------------------------------- */
.hero-section .hero-header-tag-wrapper,
.hero-section p.body-text,
.hero-section .hero-button-wrapper {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* El emblema tenia `top: 250px`, calculado cuando el bloque de cartas medía
   364px. Con el envoltorio a 250 caia justo encima del titular. */
@media (max-width: 767px) {
  .hero-marca { top: 150px !important; }

  /* En movil el emblema pierde el nombre y se queda solo con el simbolo.
     Dos razones: chocaba con el antetitulo —que hasta hoy estaba invisible,
     asi que el choque no se veia— y «Maestra Maria Salome» ya esta escrito en
     la cabecera, 40px mas arriba. Repetirlo dos veces en la misma pantalla no
     aporta nada y cuesta 60px de alto justo donde hacen falta. */
  .hero-marca-nombre,
  .hero-marca-nombre-italica {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * Movimiento reducido (4-sep-2026)
 *
 * La pagina no respetaba `prefers-reduced-motion` en ninguna parte. Medido en
 * produccion, lo que corre cuando alguien la abre:
 *
 *   · 3 bucles INFINITOS de GSAP — la carta que gira 24s, el pulso del
 *     resplandor, y el cruce de seis fotogramas de la llama;
 *   · 81 elementos que arrancan en `opacity: 0` y se revelan al hacer scroll.
 *
 * Para quien tiene sensibilidad vestibular, una carta girando sin parar en el
 * primer pantallazo no es un detalle: es motivo para cerrar la pestana.
 *
 * ⚠ GSAP escribe `transform` y `filter` EN LINEA, asi que solo `!important`
 * los gana. Congelarlos no detiene los bucles —siguen calculando— pero el
 * valor pintado deja de cambiar, que es lo unico que se ve.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* ⚠ NADA de reset universal aqui. El remedio estandar
   *   `*, *::before, *::after { animation-duration: .01ms !important; … }`
   * se probo y ROMPE el titular: de 105 caracteres pasaban a verse 2. La
   * entrada del titular la hace SplitText de GSAP, y con ese reset la
   * secuencia se queda parada en su estado inicial. Medido: con el bloque
   * universal 2/105, sin el 105/105, y produccion —que no lo tiene— entre 74
   * y 80. Asi que se apaga lo que hay que apagar, uno por uno.
   *
   * 0 · El titular aparece entero y de golpe, que es justo el
   *     comportamiento que pide el modo reducido: texto legible sin
   *     coreografia. Cubre tambien los titulares de seccion, que usan las
   *     mismas clases de SplitText. */
  .char,
  .word,
  .line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  html {
    scroll-behavior: auto !important;
  }

  /* Las transiciones propias de esta hoja, las unicas que hay: acordeon,
     enlaces del pie, boton de cerrar la ventana y tarjetas del proceso. */
  .acordeon-item,
  .acordeon-signo::before,
  .acordeon-signo::after,
  .enlaces-legales a,
  .modal-legal-cerrar,
  .why-choose-card-wrapper {
    transition: none !important;
  }

  /* 1 · La carta SIGUE GIRANDO tambien aqui (5-sep-2026, decision de Diego).
   *
   * ⚠ Es una excepcion consciente a este bloque entero. Hasta hoy se congelaba
   * —`transform: none`—, que es lo que recomienda la practica de accesibilidad:
   * un elemento girando sin parar en el primer pantallazo es de lo que peor
   * sienta a quien tiene sensibilidad vestibular, y por eso quien pide menos
   * movimiento lo pide. Se le expuso a Diego con la alternativa (activar los
   * efectos en su Windows, que era lo que le hacia verla quieta a el y no a los
   * visitantes) y eligio que gire para todo el mundo. Queda escrito para que no
   * se lea dentro de un ano como un descuido: fue una decision.
   *
   * El pulso del resplandor tambien late aqui desde el mismo dia, por la misma
   * decision. Asi que a la carta no se le fija ya ni `transform` ni `filter`:
   * solo se le asegura la opacidad, para que la regla de abajo no la esconda.
   * Va con `.hero-section` delante a proposito: sin ese punto de mas, la regla
   * `[data-w-id]` de abajo empata en especificidad y gana por ir despues. */
  .hero-section .hero-component {
    opacity: 1 !important;
  }

  /* 2 · La llama: un solo fotograma fijo en vez del cruce de seis. */
  .beam-flow {
    opacity: 0 !important;
    transition: none !important;
  }
  .beam-flow:first-of-type {
    opacity: 1 !important;
  }

  /* 3 · Todo lo que IX2 deja oculto esperando un scroll, visible de entrada.
   *
   * `[data-w-id]` es exactamente el conjunto de los 81: es el atributo con el
   * que Webflow marca lo que anima.
   *
   * ⚠ NO se puede usar un selector mas amplio. Los botones llevan una segunda
   * copia del rotulo con `translate3d(0, 180%, 0)` —es el mecanismo del efecto
   * de deslizamiento al pasar el raton, no una animacion de entrada— y esa
   * copia no lleva `data-w-id`. Forzarle `transform: none` la pondria encima
   * de la visible y el boton se leeria doble.
   *
   * ⚠ `:not(.hero-component)` es lo que deja girar a la carta: ella tambien
   * lleva `data-w-id`, asi que sin excluirla aqui este `transform: none` le
   * ganaria al valor en linea de GSAP y volveria a quedarse quieta. Su opacidad
   * y su halo se los da la regla 1, que es mas especifica. */
  [data-w-id]:not(.hero-component) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Afinado de la revision de Codex (4-sep-2026)
 * ------------------------------------------------------------------------- */

/* Discrecion: los cuatro mecanismos como lista dentro de una sola caja. El
   punto no es decorativo — marca que son cuatro cosas concretas y no un
   parrafo de buenas intenciones. */
.lista-mecanismos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lista-mecanismos li {
  position: relative;
  padding-left: 22px;
  max-width: 62ch;
}

.lista-mecanismos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--_color---color--primary);
}

/* ---------------------------------------------------------------------------
 * El pie: la marca de agua y los iconos
 *
 * La marca de agua medía 134px de cuerpo y 1.339 de ancho — cruzaba el pie
 * entero y competia con el descargo legal, que es lo unico que hay que leer
 * ahi. Baja a la mitad y pierde peso.
 *
 * Los iconos sociales eran `<span>` con borde de 1px y radio del 100%: la
 * forma exacta de un boton. No lo son, y no deben serlo —son presencia de
 * marca, no una salida—, asi que se les quita la apariencia de control: sin
 * borde, sin fondo y mas apagados.
 * ------------------------------------------------------------------------- */
.footer-marca {
  font-size: clamp(2.5rem, 7vw, 4.5rem) !important;
  opacity: 0.35;
}

.footer-social-media {
  border: 0 !important;
  background-color: transparent !important;
  opacity: 0.45;
}

/* ---------------------------------------------------------------------------
 * Menos aire en movil
 *
 * Medido: 10.823px de alto. La pagina se lee bien pero es larguisima, y el
 * grueso no es contenido — es separacion. Se recorta donde no cuesta lectura:
 * el hueco entre bloques de cada seccion, el respiro inferior del contenedor,
 * y la separacion entre secciones.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .section-wrapper,
  .team-section-wrapper,
  .why-choose-section-wrapper {
    gap: 36px !important;
  }

  .container {
    padding-bottom: 28px !important;
  }

  .service-grid,
  .why-choose-grid {
    gap: 16px !important;
  }

  .acordeon {
    gap: 0.75rem;
  }

  /* Las fotos de los pasos pasan de 4:3 a 16:10: siguen leyendose y devuelven
     unos 45px por tarjeta, que en cuatro tarjetas son casi doscientos. */
  .why-choose-card-image-wrapper {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 767px) {
  /* Las tarjetas traen 32px de relleno por lado, pensados para una columna
     ancha de escritorio. En un movil de 390 eso son 64px de los 358 que hay:
     casi un quinto del ancho gastado en margen interior. */
  .why-choose-card-wrapper,
  .service-card {
    padding: 20px !important;
  }

  .why-choose-card-wrapper {
    gap: 16px !important;
  }

  /* Las fotos, algo mas apaisadas todavia: siguen leyendose de un vistazo
     —que es todo lo que se les pide— y devuelven medio centenar por tarjeta. */
  .why-choose-card-image-wrapper {
    aspect-ratio: 2 / 1;
  }

  /* Los titulares de seccion ocupaban dos y tres lineas con un interlineado
     pensado para 64px de cuerpo. */
  .section-heading {
    line-height: 1.08;
  }
}

/* ---------------------------------------------------------------------------
 * El heroe movil, segunda pasada (5-sep-2026)
 *
 * Medido en produccion con emulacion movil real (390x844, CDP), tras 24 h de
 * campana con 44 clics y 1 contacto:
 *
 *   cartas           y=96 → 346   250px, el 30% de la pantalla, antes de una palabra
 *   carta principal  158 x 44     APLASTADA: la plantilla le da `height:100%` y
 *                                 `object-fit:cover`; con el envoltorio a 250px y
 *                                 un `max-height` encima, se queda en una tira
 *   titular          y=407
 *   BOTON            y=651 → 699  detras del aviso de cookies (599 → 844)
 *
 * La carta principal recupera su cuadrado (alto y ancho explicitos, `contain`)
 * y se centra sobre el abanico —en movil la plantilla la alinea a la derecha,
 * que es de donde salia la tira en la esquina—.
 *
 * ⚠ SEGUNDA CORRECCION, el mismo dia. El bloque llego a bajar a 140px con las
 * cartas a 104, para meter el boton por encima del aviso de cookies, que
 * ocupaba de y=599 a y=844. Al retirarse ese aviso el sacrificio dejo de tener
 * sentido, y se notaba: a 104px la carta que gira medía casi lo mismo que las
 * cuatro del abanico, asi que al cruzarse por encima —gira 360º en 24s— el
 * conjunto se leia como un amasijo de cartas en vez de como una tirada. El
 * emblema, ademas, estaba oculto por falta de sitio.
 *
 * Vuelven a 150px y el emblema a la vista. El bloque queda en 215: las cartas
 * ocupan de 6 a 156 y el emblema —a 60px, mas pequeño que los 92 de tableta—
 * de 150 a 210, asi que cabe entero y no cuelga sobre el antetitulo. Medido a
 * 390x844 con el aviso ya retirado: boton en y=616 y linea de agenda hasta 735,
 * los dos por encima de la barra fija (772). El giro nunca se toco.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero-component-wrapper {
    /* `box-sizing` y relleno explicitos: la plantilla suma 30px de relleno
       inferior y el bloque medía 206 en vez de lo declarado. El `padding-bottom`
       de 200px que traia la regla de mas arriba reservaba hueco al emblema; ya
       no hace falta, porque ahora el bloque tiene altura propia que lo incluye. */
    box-sizing: border-box;
    height: 215px;
    padding: 6px 0 0 !important;
    justify-content: center !important;
  }

  .hero-component {
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
    object-fit: contain !important;
  }

  .carta-abanico {
    max-width: 150px;
  }

  /* El emblema vuelve, justo debajo de las cartas. `flex` y no `block`: lo
     centra la propia regla de `.hero-marca`, que es una columna flex. Sigue sin
     el nombre —lo decidio la regla del 4-sep, porque «Maestra Maria Salome» ya
     esta en la cabecera 40px por encima—, asi que solo se ve el simbolo. */
  .hero-marca {
    display: flex !important;
    top: 150px !important;
  }

  .hero-marca-emblema {
    width: 60px;
    height: 60px;
  }
}

/* ---------------------------------------------------------------------------
 * Barra fija de WhatsApp en movil (5-sep-2026) — ver BarraWhatsApp.tsx
 *
 * Solo por debajo de 768px: en escritorio el boton de la cabecera acompana
 * todo el recorrido y una barra seria ruido. Se apila POR DEBAJO del aviso de
 * cookies (9999) por si ambos llegaran a coincidir un instante.
 * ------------------------------------------------------------------------- */
.mms-barra {
  display: none;
}

@media (max-width: 767px) {
  .mms-barra {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* 9999 y no menos: `.bottom-shadow` de la plantilla es una banda fija de
       80px con `backdrop-filter: blur(20px)` y ese mismo z-index; por debajo
       de ella la barra salía desenfocada. Empata en z-index y gana por ir
       después en el DOM. Nunca coincide con el aviso de cookies —la barra
       espera a que se cierre—, así que no hay pelea entre los dos. */
    z-index: 9999;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, #030a1800 0%, #030a18e6 35%, #030a18 100%);
    animation: mms-barra-entra 0.3s ease-out both;
  }

  .mms-barra__boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 999px;
    background: #fc7c1c;
    color: #030a18;
    font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 24px #fc7c1c4d;
  }

  .mms-barra__boton:active {
    background: #ff8f38;
  }

  .mms-barra__icono {
    flex: 0 0 auto;
  }
}

@keyframes mms-barra-entra {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mms-barra { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Cookies: el aviso en el pie, con salida en vez de entrada (5-sep-2026)
 *
 * Sustituye a la barra inferior que salia antes de medir nada. Mismo cuerpo que
 * `.descargo-meta` —12px, opacidad 0,75— porque es letra pequena y se comporta
 * como tal: presente y legible, sin competir con el boton. El enlace de apagado
 * va subrayado, que es lo unico que lo distingue del parrafo. Ver CookiesPie.tsx.
 * ------------------------------------------------------------------------- */
.descargo-cookies {
  margin-top: 10px;
  max-width: 62ch;
  color: var(--_color---color--paragraph);
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.75;
}

.descargo-cookies__boton {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.descargo-cookies__boton:hover {
  color: var(--_color---color--white);
}

.descargo-cookies__boton:focus-visible {
  outline: 2px solid #fc7c1c;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * La cabecera en movil: el nombre legible, y el boton dentro de la pantalla
 * (5-sep-2026)
 *
 * Dos defectos que se veian en la misma captura, y que son independientes:
 *
 * 1. EL NOMBRE NO SE LEIA. El fondo del heroe es la portada de Facebook y su
 *    vela cae justo detras de la cabecera; el recorte cambia con el ancho, asi
 *    que en movil el resplandor blanco queda debajo de «Maria Salome», que va
 *    en `--color--secondary-text` (blanco al 76%). Blanco translucido sobre
 *    blanco: ilegible. Se resuelve con sombra, no aclarando el texto ni
 *    poniendo una caja detras — la sombra respeta el diseño y funciona sea cual
 *    sea el recorte que toque.
 *
 * 2. EL BOTON SE SALIA. Medido a 320, 360, 375, 390, 412 y 430px: el nombre
 *    ocupa 176px y el boton 157, y por debajo de 375 no caben juntos en el
 *    ancho util. El boton no encoge —`white-space: nowrap` de la plantilla— asi
 *    que desbordaba por la derecha: acababa en 361 con 360 de pantalla, y en
 *    320 se comia 41px. 360 es el ancho de media gama Android, no un caso raro.
 * ------------------------------------------------------------------------- */
.marca-nombre {
  /* Dos capas: uba corta y densa que despega la letra del fondo, y una ancha y
     difusa que apaga el resplandor de la vela alrededor. En azul noche de la
     marca, no en negro: sobre el fondo oscuro no se nota que hay sombra. */
  text-shadow:
    0 1px 2px rgba(3, 10, 24, 0.9),
    0 2px 16px rgba(3, 10, 24, 0.8);
}

@media (max-width: 380px) {
  .marca-nombre {
    font-size: 1rem;
    margin-right: 0.5rem;
  }

  /* ⚠ El relleno del boton NO esta en el enlace: esta en el
     `.primary-button-wrapper` de dentro, con 24px por lado. Tocar el enlace
     SUMA relleno en vez de quitarlo — probado, el boton crecio de 157 a 182px.
     Se acota con `.navbar-component` delante para no tocar el boton del heroe,
     que si tiene sitio de sobra. */
  .navbar-component .primary-button-wrapper {
    padding-left: 12px;
    padding-right: 12px;
  }

  .navbar-component .primary-button-text {
    font-size: 0.9375rem;
  }
}

/* ---------------------------------------------------------------------------
 * El aviso para quien volvió del diálogo de Meta (15-sep-2026)
 *
 * Lo crea `SaltoWhatsApp` y solo aparece cuando se detecta que alguien vio el cartel
 * «¿Quieres continuar?» y pulsó VOLVER. Nunca se muestra de entrada.
 *
 * Va justo encima de la barra fija de WhatsApp, para que la instrucción y el botón que hay que
 * volver a pulsar queden juntos. Ámbar sobre el azul de marca: es un aviso, no una alarma.
 * ------------------------------------------------------------------------- */
.mms-aviso-dialogo {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 76px;              /* por encima de la barra fija */
  z-index: 60;
  margin: 0;
  /* Rotulo con flecha, NO boton (19-sep-2026, decision de Luis sobre su propia captura
     del cartel de Meta). Un recuadro amarillo centrado y redondeado se lee como algo
     que hay que pulsar, y la gente lo pulsaria en vez de CONTINUAR. Por eso: esquinas
     casi rectas, texto alineado a la izquierda tras un icono de flecha, y sobre todo
     `pointer-events: none` — aunque lo toquen, no pasa nada y el toque atraviesa.
     Amarillo de la web (#ffe873): en la captura real, atenuado por el velo del cartel,
     sigue siendo lo mas brillante de la pantalla junto con el propio cartel. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* Franja alta (19-sep-2026, Luis): al menos 1,5x lo anterior. Antes 66px; ahora minimo
     108px. Lo que escasea no es sitio: es que se vea a traves del velo del cartel. */
  min-height: 108px;
  padding: 14px 16px 14px 18px;
  box-sizing: border-box;
  border: 0;
  border-radius: 6px;
  background-color: #ffe873;
  color: #1a1204;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  text-align: left;
  text-decoration: none;       /* es un <a>: sin subrayado de enlace */
  box-shadow: 0 6px 18px #00000073;
  animation: mms-aviso-entra 0.28s ease-out;
  /* Responde al toque (ver `pintarAviso`): cuando aparece, la persona acaba de volver del
     cartel y esta mirando justo aqui; tocarlo relanza el salto. */
  pointer-events: auto;
  cursor: pointer;
}
.mms-aviso-dialogo:active { transform: translateY(1px); box-shadow: 0 3px 10px #00000073; }
/* La flecha (19-sep-2026, Luis): RECTA hacia arriba y A LA DERECHA, porque CONTINUAR sale
   en la esquina inferior derecha del cartel de Meta, justo encima de este punto. Gruesa, para
   que se note a traves del velo. SVG en linea: no depende de que la fuente del movil tenga el
   glifo. Va como ::after para quedar la ultima en la fila flex, es decir, a la derecha. */
.mms-aviso-dialogo::after {
  content: "";
  flex: 0 0 auto;
  width: 64px;
  height: 72px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none' stroke='%231a1204' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 26V5M4 13l8-9 8 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mms-aviso-dialogo strong {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Aqui vivia `.mms-aviso-dialogo--previo`, el estado fijo de antes de pulsar: sin animacion,
   insensible al toque y sin enlace. Se retiro el 19-sep-2026 (segunda revision de Luis) junto
   con el propio estado permanente: el rotulo solo aparece al pulsar el boton, como reaccion, y
   entonces SIEMPRE es un enlace. Si alguna vez vuelve el aviso por adelantado, esta regla y su
   texto estan en el commit `096687f`. */

@keyframes mms-aviso-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mms-aviso-dialogo { animation: none; }
}

/* Solo móvil: el diálogo es cosa del navegador embebido y la barra fija tampoco existe arriba. */
@media (min-width: 768px) {
  .mms-aviso-dialogo { display: none; }
}

/* ===========================================================================
   Formulario de /consulta (16-sep-2026)

   La variante donde la maestra escribe primero. Se abre al tocar cualquiera de
   los botones de WhatsApp de la pagina, incluida la barra fija de movil — que
   es por donde entran 627 de cada 658 toques.

   Va aqui y no en un modulo CSS porque toda la landing se maqueta desde esta
   hoja: mezclar los dos sistemas obligaria a pelear especificidades contra la
   hoja de Nerova, que se coloca ANTES que la del componente (ver la memoria
   `feedback_css_de_componente_va_antes_del_layout`).

   Paleta tomada de la propia plantilla: fondo #030a18 / #061426, acento
   #fc7c1c, texto #f2e4d4.
   =========================================================================== */

.mms-velo {
  position: fixed;
  inset: 0;
  /* 10000, uno mas que la barra fija. No es un numero al azar: `.mms-barra` esta
     en 9999 a proposito para empatar con `.bottom-shadow` y ganarle por orden de
     aparicion. Medido en un Android de 390px, con el velo en 200 la barra se
     pintaba ENCIMA del formulario y tapaba la ultima linea. */
  z-index: 10000;
  display: flex;
  /* ⚠ `flex-start` + `margin-top:auto` en la hoja, y NO `align-items:flex-end`.
     Visualmente es lo mismo —la hoja abajo, junto al pulgar— pero el desbordamiento
     se comporta al reves: con `align-items` el trozo que sobresale por ARRIBA queda
     inalcanzable, no hay scroll que llegue. Con el margen automatico si se alcanza.
     Ver la nota del 18-sep en `(nerova)/layout.tsx`. */
  align-items: flex-start;
  justify-content: center;
  /* Que el velo se pueda desplazar es el RESPALDO del teclado (18-sep-2026): si un
     navegador ignora `interactive-widget=resizes-content`, el dialogo vuelve a
     quedar detras del teclado, y entonces esto es lo unico que deja llegar al boton
     de enviar. Antes habia `overflow:visible` aqui y `overflow:hidden` en el body:
     dos cierres, cero salidas, y 60 formularios abiertos sin un solo envio. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  background-color: #030a18d9;
  backdrop-filter: blur(6px);
  animation: mms-velo-entra 0.2s ease-out;
}

.mms-hoja {
  position: relative;
  width: 100%;
  max-width: 420px;
  /* Lo que la pega abajo en movil. En pantalla ancha se le suma `margin-bottom:auto`
     y queda centrada; ver el media query del final. */
  margin-top: auto;
  box-sizing: border-box;
  padding: 26px 20px 20px;
  border: 1px solid #fc7c1c4d;
  border-radius: 18px;
  background-color: #061426;
  color: #f2e4d4;
  box-shadow: 0 18px 50px #030a1899;
  animation: mms-hoja-entra 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.mms-cerrar {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 40px;                 /* 40px: blanco de toque comodo, no un aspa de 12px */
  height: 40px;
  border: 0;
  background: none;
  color: #f2e4d4a6;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.mms-cerrar:hover { color: #f2e4d4; }

.mms-form-titulo {
  margin: 0 0 8px;
  /* Hueco para el aspa de cerrar, que flota en la esquina. Sin el, la caja del
     titulo llega hasta el borde y se solapa 28px con ella: medido a 390px con el
     titulo de dos lineas. Que hoy no se lea encima es casualidad de donde parte
     la linea, no una garantia. */
  padding-right: 44px;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 600;
  color: #fafafb;
}

.mms-form-texto {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #f2e4d4c7;
}

.mms-fila {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.mms-campo { display: flex; flex-direction: column; min-width: 0; }
/* `min-width: 0` en los hijos: sin el, el contenido intrinseco ensancha la pista
   y desborda en horizontal. Es el mismo fallo que se corrigio en .why-choose-grid. */
.mms-campo-pais { flex: 0 0 116px; }
.mms-campo-tel  { flex: 1 1 auto; }

.mms-etiqueta {
  margin-bottom: 5px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #f2e4d494;
}

.mms-campo select,
.mms-campo input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 12px;
  border: 1px solid #f2e4d42e;
  border-radius: 11px;
  background-color: #03182b;
  color: #fafafb;
  /* 16px exactos: por debajo de eso Safari de iOS hace zoom al enfocar el campo
     y deja la pagina descuadrada, sin forma de volver. */
  font-size: 16px;
  font-family: inherit;
  appearance: none;
}

.mms-campo select:focus-visible,
.mms-campo input:focus-visible {
  outline: 2px solid #fc7c1c;
  outline-offset: 1px;
  border-color: transparent;
}

.mms-campo input::placeholder { color: #f2e4d45c; }
.mms-campo select:disabled,
.mms-campo input:disabled { opacity: 0.55; }

.mms-consentimiento {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #f2e4d4bd;
  cursor: pointer;
}

.mms-consentimiento input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  accent-color: #fc7c1c;
}

.mms-consentimiento a { color: #fc7c1c; text-decoration: underline; }

.mms-error {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #ffb4a0;
}

.mms-enviar {
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background-color: #fc7c1c;
  color: #1a0d02;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.mms-enviar:hover:not(:disabled) { background-color: #ff8f38; }
.mms-enviar:disabled { opacity: 0.6; cursor: default; }

.mms-letra-chica {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  color: #f2e4d47a;
}

@keyframes mms-velo-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes mms-hoja-entra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Pantallas BAJAS: el formulario se compacta (18-sep-2026).

   Va por `max-height` y no por `max-width` a proposito: lo que escasea con el
   teclado abierto es el alto, no el ancho. Y como el viewport ahora SI se encoge
   al abrirse el teclado —eso lo trae `interactive-widget=resizes-content`—, estas
   reglas se activan solas justo cuando hacen falta y se retiran al cerrarlo.

   Medido: la hoja completa son 417px. En un iPhone SE con teclado quedan ~280.

   Primer escalon, ~40px: espaciados y tamanos, sin quitar nada. */
@media (max-height: 700px) {
  .mms-velo { padding: 10px; }
  .mms-hoja { padding: 18px 18px 16px; }
  .mms-form-titulo { font-size: 19px; margin-bottom: 6px; padding-right: 40px; }
  .mms-form-texto { margin-bottom: 12px; }
  .mms-fila { margin-bottom: 11px; }
  .mms-consentimiento { margin-bottom: 11px; }
  .mms-letra-chica { margin-top: 9px; }
}

/* Segundo escalon, ~70px mas: cae el texto de apoyo.

   ⚠ Cae `.mms-form-texto` («Asi no tienes que empezar tu…») y NO la letra chica
   de privacidad. Parece al reves —el texto de apoyo dice que no cuesta— pero a
   estas alturas la persona ya lo leyo en la landing y ya decidio: esta con el
   teclado abierto escribiendo su numero. Lo que NO puede faltar en ese momento
   es «Tu numero solo se usa para esta conversacion»: es la promesa que sostiene
   el gesto de entregar un telefono, y este negocio se sostiene sobre esa
   confianza. Si algun dia hay que recortar mas, se recorta antes el titulo. */
@media (max-height: 600px) {
  .mms-hoja { padding: 14px 16px 14px; }
  .mms-form-titulo { font-size: 17.5px; line-height: 1.2; margin-bottom: 10px; }
  .mms-form-texto { display: none; }
  .mms-letra-chica { margin-top: 7px; font-size: 11.5px; line-height: 1.35; }
}

/* En pantalla ancha el formulario se centra en vez de pegarse abajo.

   Se centra con los DOS margenes automaticos y no con `align-items:center`, por la
   misma razon que en movil: `align-items` corta lo que desborda por arriba y deja
   el scroll sin alcance. Con `margin:auto` arriba y abajo el centrado es identico y
   el desbordamiento sigue siendo accesible. */
@media (min-width: 768px) {
  .mms-hoja { margin-bottom: auto; }
}

/* Reglas dirigidas, NUNCA un reset con comodin y !important: el de antes dejaba
   el titulo del hero en 2 de 105 caracteres visibles porque pisaba el SplitText
   de GSAP (ver `feedback_reduced_motion_important_mata_sistema_ajeno`). */
@media (prefers-reduced-motion: reduce) {
  .mms-velo,
  .mms-hoja { animation: none; }
}

/* Con el formulario abierto: fuera la barra fija y quieto el fondo.

   La barra se oculta porque competia con el formulario —y literalmente lo tapaba,
   ver la nota de z-index de arriba—. El `overflow: hidden` en el cuerpo evita que
   al arrastrar sobre el velo se desplace la landing por debajo, que en movil
   desorienta: la persona cree que cerro el formulario cuando solo movio el fondo. */
body.mms-form-abierto .mms-barra { display: none; }
body.mms-form-abierto { overflow: hidden; }

/* El aviso del dialogo de Meta tampoco pinta aqui: en /consulta no hay salto a la
   app, asi que ese cartel no puede aparecer. Se oculta por si acaso quedara uno
   de una visita anterior en la misma pestana. */
body.mms-form-abierto .mms-aviso-dialogo { display: none; }