/* ══════════════════════════════════════════════════════════════
   Nucleando — estilos de la página
   Tema claro · blanco + verde esmeralda · títulos Cairo + texto system-ui
   ══════════════════════════════════════════════════════════════ */

:root{
  --verde:#10b981; --verde-osc:#059669; --verde-suave:#ecfdf5;
  --tinta:#18181b; --gris:#71717a; --gris-claro:#a1a1aa;
  --borde:#e4e4e7; --fondo:#fafafa;
  /* Línea que separa una sección de otra. Es más clara que --borde (el de las
     tarjetas) para que se note pero no pese. */
  --linea:#ebecef;
  /* Gris de las franjas intercaladas: hoy no se usa (ver .franja-gris). */
  --franja:#f6f7f9;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --titulo:"Cairo",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* overflow-x:clip (no "hidden"): corta el desborde horizontal sin convertir al
   body en contenedor de scroll —si fuera "hidden", overflow-y pasa a auto y se
   rompe window.scrollY, que es lo que usa el navbar para achicarse al bajar. */
body{font-family:var(--sans);color:var(--tinta);background:#fff;line-height:1.6;
     -webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit}
/* Que "hidden" gane siempre. Sin esto, cualquier cosa con display propio (por
   ejemplo .eti, que es inline-block) se sigue viendo aunque tenga hidden puesto. */
[hidden]{display:none !important}

.contenedor{max-width:1120px;margin:0 auto;padding:0 20px}
.contenedor-angosto{max-width:780px}
.centrar{text-align:center}

/* ───── Títulos (Cairo, grandes y gruesos) ───── */
h1,h2,h3{font-family:var(--titulo);letter-spacing:-.02em;line-height:1.15}
h1{font-size:clamp(34px,5.4vw,58px);font-weight:800}
h2{font-size:clamp(26px,3.6vw,40px);font-weight:800}
h3{font-size:18px;font-weight:700}
/* Para pintar UNA palabra del título de verde, se la envuelve en <em> (el hero ya
   lo hacía con su h1; desde el 2026-07-26 también lo usa el h2 de "El panel por
   dentro"). Va el verde OSCURO, no el brillante: sobre fondo blanco el claro se
   lee mal. El "font-style:normal" saca la cursiva que el navegador le pone solo
   al <em> — acá se usa por el significado (destacar), no para poner bastardilla. */
h2 em{font-style:normal;color:var(--verde-osc)}

/* ───── Etiquetas de sección (MAYÚSCULA) ───── */
.eti{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;
     color:var(--verde-osc);background:var(--verde-suave);border:1px solid #a7f3d0;
     border-radius:99px;padding:5px 14px;margin-bottom:16px}

/* ───── Botones (verbos de acción) ───── */
.boton,.boton-sec{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-size:15.5px;font-weight:700;text-decoration:none;cursor:pointer;
  border-radius:99px;padding:12px 26px;border:1px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.boton{background:var(--verde);color:#fff;box-shadow:0 8px 20px -8px rgba(16,185,129,.55)}
.boton:hover{background:var(--verde-osc);transform:translateY(-2px);
             box-shadow:0 14px 28px -10px rgba(16,185,129,.6)}
.boton-sec{background:#fff;color:var(--tinta);border-color:var(--borde)}
.boton-sec:hover{border-color:var(--verde);color:var(--verde-osc);transform:translateY(-2px)}
.boton-grande{font-size:17px;padding:15px 34px;border-radius:99px}
/* El botón del hero, más grande todavía (2026-07-31). Existe porque quedó SOLO:
   se sacó el "Ver el panel" que tenía al lado y Tiziano pidió agrandar el que
   queda para que ocupe ese lugar. No se agrandó .boton-grande directamente
   porque esa clase la usan también otros botones de la página. */
.boton-hero{font-size:19px;padding:19px 46px;border-radius:99px}
/* Y ocupa TODO el ancho de la columna del texto (2026-07-31, segunda corrección
   de Tiziano: lo marcó con un círculo rojo que iba de punta a punta). O sea que
   el botón mide lo mismo que el título de arriba, no lo que mide su texto.
   Va acá y no en un @media porque vale en todos los anchos: en el celular el
   botón ya era de ancho completo, así que esto lo único que hace es extender esa
   misma idea a la compu. */
.hero-botones .boton-hero{width:100%}
.boton svg,.boton-sec svg{width:20px;height:20px;flex-shrink:0}

/* ───── Barra de navegación fija ───── */
/* Barra FLOTANTE: no pegada arriba ni de lado a lado, sino una "píldora"
   redondeada centrada con aire alrededor (estilo minificando). Al bajar se
   achica SOLO a lo alto: mismo ancho, mismo lugar, mismo color. */
/* pointer-events: la barra ocupa todo el ancho aunque solo se vea la píldora.
   Con "none" el mouse la ATRAVIESA, así el aire de los costados no se come los
   clics de lo que va pasando por debajo al scrollear. La píldora vuelve a
   "auto" para que sus links y botones sigan andando. */
.barra{position:fixed;inset:0 0 auto 0;z-index:50;padding:18px 20px;transition:padding .28s ease;
       pointer-events:none}
/* FLEX, todo a la derecha (2026-07-30, pedido de Tiziano: volver a como estaba
   antes). El logo lleva "margin-right:auto", que se come todo el aire sobrante y
   empuja el resto contra el borde derecho: las opciones quedan pegadas al botón
   de Contacto, no en el centro.
   ⚠️ Entre el 2026-07-25 y el 2026-07-30 esto fue un GRID "1fr auto 1fr" para
   tener el menú centrado. Se descartó. Si algún día se quiere volver a centrar,
   tiene que ser grid otra vez: con flex el menú queda centrado entre el logo y
   el botón (que miden distinto), o sea corrido unos píxeles de la píldora. */
.barra-int{pointer-events:auto;
           max-width:1200px;margin:0 auto;padding:13px 14px 13px 24px;
           display:flex;align-items:center;gap:22px;
           background:#fff;border:1px solid var(--borde);border-radius:22px;
           box-shadow:0 12px 34px -16px rgba(16,24,40,.20);transition:.28s ease}
/* Al scrollear se le suma la clase "compacta" (la pone script.js). NO usar el
   nombre "mini": esa clase ya es la de las maquetitas de "El panel por dentro"
   (fondo gris, borde, alto fijo de 118px y flex en columna) y la barra la
   heredaba entera → aparecía un rectángulo gris y la píldora se angostaba. */
/* Nada de ancho acá: ni max-width en la píldora ni cambios en el aire de los
   costados. Tampoco se toca el color ni la sombra: es la MISMA píldora, más baja.
   Lo único que cambia es el alto: menos relleno arriba y abajo, el logo un poco
   más chico y las opciones un toque más juntas. */
.barra.compacta .barra-int{padding:9px 12px 9px 20px}
.barra.compacta .logo img{height:23px}
.barra.compacta .menu{gap:20px}
.barra.compacta .boton-barra{padding:7px 16px}
/* El logo es un SVG con las letras ya dibujadas (no texto), así que acá no van
   ni fuente ni tamaño de letra: solo el alto de la imagen. Ver logo/LEEME.md */
/* "margin-right:auto" es LO QUE corre todo lo demás a la derecha. Si se saca,
   el menú y el botón se pegan al logo, en el medio de la píldora. */
.logo{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.logo img{height:26px;width:auto;display:block;transition:height .28s ease}
/* Ya no lleva "margin-right:10px": ese margen existía solo para corregir el
   centrado del menú (la píldora tiene 24px de relleno a la izquierda y 14px a la
   derecha, así que su centro real quedaba 5px corrido). Sin menú centrado no
   hace falta: ahora la separación con el botón la da el gap de .barra-int. */
.menu{display:flex;align-items:center;gap:24px;transition:gap .28s ease}
.menu a{text-decoration:none;font-size:14.5px;font-weight:600;color:#3f3f46;transition:color .15s}
.menu a:hover{color:var(--verde-osc)}
/* La lista de transiciones repite las del botón normal (.boton) porque acá se
   pisa entera: si pusiéramos solo "padding", el botón perdería el efecto al
   pasarle el mouse. */
/* Es el último de la fila, así que ya queda pegado a la derecha solo (lo empuja
   el margin-right:auto del logo). No necesita justify-self. */
.boton-barra{padding:9px 18px;font-size:14px;
             transition:transform .18s ease,box-shadow .18s ease,background .18s ease,padding .28s ease}
.boton-menu{display:none}
.hamb{display:none;border:0;background:none;cursor:pointer;color:var(--tinta);padding:4px}
.hamb svg{width:26px;height:26px;display:block}

/* ───── Hero ───── */
/* El hero ocupa TODA la pantalla de entrada y su contenido va centrado a lo alto:
   así, al entrar, no se asoma la sección de abajo ("El problema"). En pantallas
   bajas no molesta: si el contenido no entra, la sección crece sola.
   svh = alto de la pantalla ya descontadas las barras del navegador del celular
   (100vh queda de respaldo para navegadores viejos que no entienden svh). */
.hero{padding:132px 0 70px;position:relative;
      min-height:100vh;min-height:100svh;display:grid;align-content:center;
      background:
        radial-gradient(40% 52% at 30% 32%,rgba(16,185,129,.13),transparent 70%),
        linear-gradient(180deg,#f7fdfb 0%,#fff 92%)}
/* Hero más ancho que el resto de la página: el panel necesita ~700px para
   verse entero (si no, se corta la tarjeta de ventas y el gráfico). El título
   se lleva el resto, con buen aire en el medio. */
/* ⚠️ El mínimo es 690px y está MEDIDO (2026-07-26), no estimado: las cuatro
   tarjetas de Analíticas piden 477px de ancho mínimo y la barra lateral se lleva
   ~160px + los rellenos. Abajo de 681px la cuarta tarjeta ("Ventas Mensuales")
   se mete en el relleno derecho del panel. Antes acá decía 660 y por eso en una
   notebook de 1280 el panel se veía corrido 9px. Las otras cuatro pantallas del
   panel (Conversaciones, Turnos, Contactos, Catálogo) entran holgadas en 660;
   la que manda el número es Analíticas. */
/* El "width:100%" no es de adorno (arreglo 2026-07-26). El hero es un grid y esta
   caja es su item; como hereda "margin:0 auto" de .contenedor, sin ancho propio el
   navegador la achica al tamaño de su contenido en vez de estirarla. En tablet eso
   dejaba el hero en 620px dentro de una pantalla de 753 (el panel se quedaba en
   580 en vez de 713) y encima desalineado con el resto de las secciones, que sí
   usan todo el ancho. En escritorio no se notaba porque las dos columnas ya
   llenaban la pantalla solas. */
.hero-grid{max-width:1500px;width:100%;display:grid;grid-template-columns:minmax(690px,1.35fr) minmax(0,1fr);gap:56px;align-items:center}
.hero-panel{min-width:0}
.hero-contenido{text-align:left;max-width:none}
/* Que el panel nunca ensanche la página cuando el espacio es chico (celular):
   dejamos que su interior se achique y recorte (el panel ya oculta el sobrante). */
.hero-panel,.hero .panel-marco,.hero .panel{min-width:0;max-width:100%}
.hero .panel .main{min-width:0}
/* Damos más ancho a la caja del gráfico (columna derecha del dashboard) para que
   los meses no queden pegados. Ajuste solo para el hero; el panel base no se toca. */
/* ⚠️ Va DENTRO de un @media de 861px para arriba (arreglo 2026-07-26). Antes
   estaba suelta y le ganaba por especificidad (tres clases contra una) a
   ".dos{grid-template-columns:1fr}" de panel.css, que es la que apila las dos
   cajas en tablet y celular. Resultado: en pantallas chicas Analíticas, Turnos y
   Contactos quedaban lado a lado y la caja de la derecha se achicaba hasta 122px.
   El 861 tiene que seguir igual al 860 del @media de panel.css: si se cambia uno,
   cambiar el otro. */
@media (min-width:861px){
  .hero .panel .dos{grid-template-columns:1.28fr 1fr}
}
/* Al pasar el mouse, el panel reacciona como las tarjetas de "El panel por dentro":
   la sombra gris de abajo se agranda y el borde se marca un poco más. El panel NO
   se mueve de lugar (a diferencia de las tarjetas, acá no sube). */
.hero .panel{transition:box-shadow .22s ease,border-color .22s ease}
.hero .panel:hover{box-shadow:0 32px 66px -14px rgba(16,24,40,.26);border-color:#d4d4d8}
/* Textito arriba del título (estilo minificando: texto pelado sin pastilla, en
   la fuente del sistema). Mismo tamaño/grosor/espaciado que ellos, pero en el
   verde nuestro. Uso --verde-osc (no el brillante) para que un texto tan chico
   se lea bien sobre el fondo claro. */
.hero-eti{font-family:var(--sans);font-size:14px;font-weight:600;text-transform:uppercase;
          letter-spacing:1.4px;color:var(--verde-osc);margin:0 0 14px}
/* "text-wrap:balance" = que el navegador reparta los renglones parejos en vez de
   llenar el primero hasta el borde y dejar el último con dos palabras. Se sumó el
   2026-07-31, con el título nuevo (que es más largo y sí se parte en tres). Sin
   esto quedaba "...y ordena todo / tu negocio.", o sea la frase verde partida al
   medio; con esto queda "todo tu negocio." entera en su renglón. Lo hace solo en
   CADA ancho de pantalla, así que no hay ningún corte escrito a mano que
   mantener. Si un navegador viejo no lo entiende, lo ignora y se ve como antes. */
/* ⚠️ El 3.6vw (antes 3.8) es del 2026-07-31, cuando el título sumó la palabra
   "que". Medido en una pantalla de 1280 —que es el caso más justo de acá para
   arriba, porque de ahí en adelante la columna se ensancha más rápido que la
   letra—: con 3.8vw daban 48,64px y el título se partía en CUATRO renglones;
   hasta 48px entra en tres. Con 3.6vw quedan 46,08px, o sea con margen.
   Sigue llegando a los 54px de siempre en pantallas de 1500 para arriba. */
.hero h1{font-size:clamp(32px,3.6vw,54px);margin:0 0 20px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--verde-osc)}
/* Mismo "balance" que el título (ver el comentario de .hero h1): reparte los
   renglones parejos en vez de dejar la última palabra sola abajo. Solo se nota
   en el celular, que es donde este texto sigue partiéndose.

   ⚠️ EL TAMAÑO ESTÁ CALCULADO PARA QUE EL TEXTO ENTRE EN UN SOLO RENGLÓN
   (2026-07-31, pedido de Tiziano). Antes era clamp(16.5px, 1.5vw, 19px) y a 19px
   el texto medía 714px contra una columna de 566: dos renglones siempre.
   Ahora crece con el ancho de la pantalla en vez de tener un piso alto, así que
   se achica solo justo donde la columna se angosta. Medido (texto de 58
   caracteres, columna al lado del panel):
     1440 → 17px, 431px de texto en 566 de columna
     1280 → 16px, 406 en 479
     1200 → 15px, 380 en 423   ← el caso más justo de la compu
      768 → 15px, 380 en 560 (acá el hero ya está apilado)
   👉 De 1200 para arriba y en tablet entra en UN renglón.
   👉 En el celular NO ENTRA y no hay forma: a 375px la columna es de 335 y el
      texto pediría 12px de letra. Ahí se parte en dos y está bien que así sea.
      Por eso el @media de 620 se lo devuelve a 16,5px: si igual va a partirse,
      que al menos se lea cómodo. */
.apoyo{margin:0 0 32px;font-size:clamp(15px,1.25vw,17px);color:var(--gris);text-wrap:balance}
/* ⚠️ El botón y la línea de confianza van CENTRADOS aunque el título y el texto
   de arriba estén alineados a la izquierda (2026-07-31, pedido de Tiziano:
   "más grande y que quede ahí bien centrado"). Es a propósito: al sacar el
   segundo botón, este quedaba solo y pegado al borde izquierdo, con un hueco
   grande al lado. Si algún día se quiere volver a alinearlo con el título, son
   estos dos `center` → `flex-start`. */
.hero-botones{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
/* La línea de confianza que va pegada abajo de los botones ("Hablás directo
   conmigo, no con un vendedor"). Los estilos estaban escritos desde antes pero
   sin usarse en ninguna parte; se estrenaron el 2026-07-31 con el hero nuevo.
   El "balance" del span es para el celular: sin él, a 320px la línea se parte
   dejando la palabra "vendedor." sola en el segundo renglón. */
.hero-social{margin-top:26px;font-size:13.5px;font-weight:600;color:var(--gris);
             display:flex;align-items:center;justify-content:center;gap:8px}
.hero-social span:last-child{text-wrap:balance}
.punto-vivo{width:8px;height:8px;border-radius:50%;background:var(--verde);
            box-shadow:0 0 0 4px rgba(16,185,129,.18);animation:latir-suave 1.6s infinite}
@keyframes latir-suave{0%,100%{opacity:1}50%{opacity:.35}}

/* ───── Secciones ───── */
/* Cada sección lleva una línea fina arriba: esa es toda la separación entre
   una y otra (el fondo queda blanco parejo en toda la página). La línea nace
   en el borde de arriba de cada sección, así que va de lado a lado de la
   pantalla, sin cortes. */
.seccion{padding:84px 0;border-top:1px solid var(--linea)}
/* Cuando un botón lleva a una sección (el "Contacto" del navbar → #contacto, el
   "Ver el panel" del hero → #panel-detalle), el navegador la deja pegada al
   borde de arriba... justo donde flota la píldora del navbar, que le come los
   primeros píxeles al título. Estos 28px son el respiro que se le pide al
   navegador para que frene un poco antes. */
section[id]{scroll-margin-top:28px}

/* Franjas grises intercaladas: HOY NO SE USAN (Tiziano prefirió las líneas).
   No se borra por si querés volver a probarlas: alcanza con agregarle la clase
   "franja-gris" a las secciones que quieras grises, en index.html. */
.franja-gris{background:var(--franja)}
.cab-seccion{text-align:center;max-width:760px;margin:0 auto 44px}
.cab-apoyo{margin-top:14px;font-size:16.5px;color:var(--gris)}

/* ───── Tarjetas genéricas (se levantan al pasar el mouse) ───── */
.tarj{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:26px;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tarj:hover{transform:translateY(-5px);box-shadow:0 18px 40px -18px rgba(16,24,40,.18);
            border-color:#d4d4d8}
.tarj h3{margin-bottom:8px}
.tarj p{font-size:14.5px;color:var(--gris)}
.tarj-ico{width:46px;height:46px;border-radius:12px;background:var(--verde-suave);
          color:var(--verde-osc);display:grid;place-items:center;margin-bottom:16px}
.tarj-ico svg{width:24px;height:24px}

/* ───── 2. El problema ───── */
/* A la izquierda el teléfono con los mensajes colgados, a la derecha los tres
   dolores en lista. Ojo con el color: acá NADA va en verde de "todo bien" — lo
   pendiente va en ámbar (el mismo de las etiquetas del panel). */
.prob-dos{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
          gap:56px;align-items:center}

/* El teléfono */
.prob-tel-caja{display:flex;flex-direction:column;align-items:center}
/* Flota muy suave y lento (6s). La sombra "respira" con él: cuando sube se hace
   más grande y difusa (como si se alejara del piso) y cuando baja vuelve a
   marcarse. Así se ve despegado de verdad y no como una imagen quieta. */
.prob-tel{width:100%;max-width:330px;background:#fff;border:1px solid var(--borde);
          border-radius:26px;padding:10px;will-change:transform;
          box-shadow:0 26px 60px -22px rgba(16,24,40,.30),0 2px 6px -2px rgba(16,24,40,.10);
          animation:prob-flotar 6s ease-in-out infinite}
@keyframes prob-flotar{
  0%,100%{transform:translateY(0);
          box-shadow:0 26px 60px -22px rgba(16,24,40,.30),0 2px 6px -2px rgba(16,24,40,.10)}
  50%{transform:translateY(-6px);
      box-shadow:0 33px 66px -22px rgba(16,24,40,.25),0 4px 9px -2px rgba(16,24,40,.085)}
}
.prob-tel-cab{display:flex;align-items:center;gap:9px;padding:8px 10px 12px;
              border-bottom:1px solid var(--linea)}
.prob-tel-cab b{font-size:14.5px}
.prob-tel-wsp{width:19px;height:19px;color:#25d366;flex-shrink:0}
.prob-badge{margin-left:auto;font-size:10.5px;font-weight:800;padding:3px 9px;
            border-radius:99px;background:#fef3c7;color:#b45309;white-space:nowrap}
.prob-chats{display:flex;flex-direction:column}
.prob-msj{display:flex;align-items:center;gap:10px;padding:11px 8px;
          border-bottom:1px solid #f4f4f5}
.prob-msj:last-child{border-bottom:0}
.prob-av{width:34px;height:34px;border-radius:50%;color:#fff;font-size:12px;font-weight:700;
         display:grid;place-items:center;flex-shrink:0}
.prob-msj-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.prob-msj-txt b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;
                text-overflow:ellipsis}
/* Los mensajes van en cursiva y grises: se leen como "lo que dijo el cliente". */
.prob-msj-txt i{font-size:12.5px;color:var(--gris);white-space:nowrap;overflow:hidden;
                text-overflow:ellipsis}
.prob-msj-lado{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.prob-hora{font-size:10.5px;font-weight:700;color:#b45309;white-space:nowrap}
.prob-punto{width:8px;height:8px;border-radius:50%;background:#f59e0b}
.prob-tel-pie{display:flex;align-items:center;justify-content:center;gap:7px;
              padding:12px 10px 6px;border-top:1px solid var(--linea);
              font-size:12px;font-weight:700;color:#b45309}
.prob-alerta{width:7px;height:7px;border-radius:50%;background:#f59e0b;
             box-shadow:0 0 0 4px rgba(245,158,11,.18);animation:latir-suave 1.6s infinite}

/* Los tres dolores (lista, sin caja: así no compite con el teléfono) */
.prob-lista{display:flex;flex-direction:column;gap:26px}
.prob-item{display:flex;gap:16px;align-items:flex-start}
.prob-item-ico{width:42px;height:42px;border-radius:12px;background:var(--fondo);
               border:1px solid var(--borde);color:var(--tinta);
               display:grid;place-items:center;flex-shrink:0}
.prob-item-ico svg{width:21px;height:21px}
.prob-item h3{margin-bottom:6px}
.prob-item p{font-size:14.5px;color:var(--gris)}

/* ───── 3. La solución (panel incrustado) ───── */
.sol{background:linear-gradient(180deg,#fff 0%,#f2fbf7 22%,#f2fbf7 78%,#fff 100%)}
.panel-marco{max-width:1020px;margin:0 auto}
.sol-pista{text-align:center;margin-top:18px;font-size:13.5px;color:var(--gris)}
.sol .centrar{margin-top:26px}

/* ───── 4. El panel por dentro: tres paneles de ejemplo ─────
   REHECHO DE CERO el 2026-07-26 sobre un boceto de Tiziano.
   ⚠️ Acá vivían tres cosas que se BORRARON enteras junto con el HTML de la
   sección (no le gustaron): las mini-maquetas de las seis tarjetas de funciones
   (.mini*), el bloque de rubros (.rubro*) y la banda de capacidades más las
   conexiones (.cap-*, .conex*). Si hay que recuperar algo, está en el historial
   del PLAN-DE-LA-WEB.md.
   ⚠️ NO confundir .mini (borrada) con .maqueta/.maq-* (más abajo): esas son las
   de la sección Proyectos y SIGUEN EN USO. */

/* ⚠️ Las tres tarjetas son GEMELAS de la del celular de "¿Te suena familiar?"
   (.prob-tel), por pedido de Tiziano (2026-07-26): mismo blanco, mismo ancho
   (330px), mismas esquinas (26px), misma sombra, mismas líneas separadoras y la
   misma flotación. Los valores están COPIADOS de ahí, no aproximados a ojo.
   👉 Si algún día se cambia el look de .prob-tel, cambiar también esto o las dos
   secciones dejan de hacer juego. */

/* ───── EL CARRUSEL de "El panel por dentro" (2026-07-31) ─────
   Antes era una grilla fija de tres (`.paneles`). Ahora son CINCO rubros que
   giran solos, en loop infinito y sin ningún botón.

   ⚠️ NO ES UN CARRUSEL COMÚN (de esos que corren una fila hacia el costado).
   Acá las cinco tarjetas están SUPERPUESTAS en el mismo lugar, y lo único que
   cambia en cada una es tres cosas: cuánto se corre al costado, cuánto se
   achica y si se ve o no. script.js le pone a cada tarjeta un `data-pos` de -2
   a 2 —su lugar en la rueda— y de ahí para abajo lo resuelve el CSS solo:

        -2  atrás a la izquierda, invisible  →  todavía no entró
        -1  a la izquierda, chica            →  la próxima en pasar al centro
         0  EN EL CENTRO, tamaño completo    →  la que se está mostrando
         1  a la derecha, chica              →  la que acaba de irse
         2  atrás a la derecha, invisible    →  ya se fue

   Como el paso de -1 a 0 es un cambio de tamaño y no un salto de lugar, la
   tarjeta se "acerca" en vez de deslizarse: es justo el efecto de profundidad
   que pidió Tiziano. Y la que aparece a la izquierda viene de -2, o sea que
   crece desde el fondo en vez de entrar desde el borde.

   Ventaja de armarlo así: no hay que clonar tarjetas ni moverlas de lugar en el
   HTML (mover una le reinicia la animación de flotar), y las cinco quedan
   siempre escritas en la página para un lector de pantalla.

   1034 = las tres tarjetas de 330 + los dos huecos de 22 de la versión vieja.
   Se dejó igual para que la sección no cambie de ancho. */
.carrusel{--x:98%;max-width:1034px;margin:0 auto}

/* El marco. Recorta lo que se sale por los costados (las tarjetas de los lados
   asoman y se cortan contra el borde, que es lo que se busca).
   ⚠️ La ALTURA se la pone script.js, midiendo la tarjeta más alta: como las
   cinco están superpuestas y "flotando" (position:absolute), ninguna empuja al
   marco y sin altura propia se quedaría en cero.
   El aire de abajo que deja el script es para la SOMBRA: la tarjeta se levanta
   6px al flotar y ahí su sombra llega a 44px por debajo. Sin ese aire quedaba
   un corte recto abajo de las cinco. */
.carr-ventana{position:relative;overflow:hidden}
/* 🐞 ARREGLO 2026-07-31: la sombra se cortaba con una línea recta abajo de las
   tarjetas ("se choca contra algo invisible", lo vio Tiziano).
   La culpa era del "overflow:hidden" de acá arriba, que recorta por los CUATRO
   lados. Por los costados hace falta —es lo que corta las tarjetas de los lados
   contra el borde— pero por abajo no: ahí lo único que sobra es la sombra, que
   es difusa y llega más lejos de lo que uno calcula.
   "overflow-x:clip" recorta SOLO a lo ancho y deja el alto libre, que es
   exactamente lo que queremos. Va adentro de un @supports porque es una palabra
   nueva del CSS: el navegador que no la entienda se queda con el "hidden" de
   arriba y ve la página como hasta hoy, sin romperse nada.
   ⚠️ No cambiarlo por "overflow:hidden" con más relleno abajo: sería un número
   inventado que hay que adivinar, y la sombra cambia de tamaño mientras la
   tarjeta flota. */
@supports (overflow-x: clip){
  .carr-ventana{overflow:visible;overflow-x:clip}
}

/* Cada tarjeta, centrada y superpuesta a las demás. El "min(330px,100%)" es lo
   que la mantiene en su tamaño de siempre en la compu y la deja achicarse sola
   en el celular. */
/* ⚠️ Arranca INVISIBLE y SIN animación, y las dos cosas importan.
   Los lugares en la rueda se los pone script.js recién cuando la página ya se
   dibujó. En ese ratito, sin estas dos líneas, las cinco tarjetas se veían
   AMONTONADAS en el centro a tamaño completo, y después se acomodaban a la vista
   tardando casi un segundo. Ahora no se ven hasta que están en su lugar.
   La animación se enciende una vez acomodadas, con la clase `.carr-listo` que
   agrega script.js (ver la regla de acá abajo). */
.carr-ventana > .pnl-caja{position:absolute;left:0;right:0;top:10px;margin:0 auto;
  width:min(330px,100%);pointer-events:none;opacity:0;
  will-change:transform,opacity}
.carr-listo .pnl-caja{transition:transform .85s cubic-bezier(.4,0,.2,1),opacity .85s ease}

/* Los cinco lugares de la rueda. El "98%" está medido para que entre las
   tarjetas quede aire y no se toquen: la del centro ocupa 330px (165 a cada
   lado del medio) y la del costado, achicada al 78%, ocupa 257 (128 a cada
   lado); corriéndola 323px quedan 30px de hueco entre las dos. */
/* Solo la del centro deja usar el mouse encima (para poder seleccionar el texto).
   Las otras lo dejan pasar de largo: si no, una tarjeta invisible que está por
   entrar taparía a la del centro. */
.pnl-caja[data-pos="0"]{transform:translateX(0) scale(1);opacity:1;z-index:3;pointer-events:auto}
.pnl-caja[data-pos="-1"]{transform:translateX(calc(var(--x) * -1)) scale(.78);opacity:1;z-index:2}
.pnl-caja[data-pos="1"]{transform:translateX(var(--x)) scale(.78);opacity:1;z-index:2}
/* Los dos invisibles. El de -2 es el que va a aparecer a la izquierda: arranca
   más chico (60%) para que se vea CRECER desde el fondo. El de 2 hace lo mismo
   al revés, alejándose.
   ⚠️ Detalle que hace que la vuelta funcione sin ningún truco: cuando una
   tarjeta pasa de 2 a -2 tiene que cruzar toda la pantalla de un lado al otro,
   pero como en los DOS extremos está invisible, ese viaje no se ve nunca. */
.pnl-caja[data-pos="-2"]{transform:translateX(calc(var(--x) * -1)) scale(.6);opacity:0;z-index:1}
.pnl-caja[data-pos="2"]{transform:translateX(var(--x)) scale(.6);opacity:0;z-index:1}
/* La cajita de afuera es el "casillero" de cada tarjeta dentro de la tira: es la
   que tiene el ancho fijo (ver .carr-ventana > .pnl-caja más arriba) y la que centra
   la tarjeta adentro cuando el casillero es más ancho que los 330px de tope.
   ⚠️ Antes existía por otro motivo, que conviene recordar por si vuelve a hacer
   falta: separaba la animación de entrada (.aparecer) de la de flotar, porque las
   dos usan "transform" y una animación de CSS le gana siempre a la clase. Desde el
   carrusel, el .aparecer se mudó al carrusel entero y acá ya no hay choque — pero
   si alguna vez se le vuelve a poner .aparecer a las tarjetas una por una, tiene
   que ir en ESTA cajita, nunca en .pnl. Es el mismo truco que usa el celular de
   "¿Te suena familiar?" (.prob-tel-caja por fuera, .prob-tel adentro). */
.pnl-caja{display:flex;justify-content:center}
.pnl{width:100%;max-width:330px;background:#fff;border:1px solid var(--borde);
     border-radius:26px;padding:10px;will-change:transform;
     box-shadow:0 26px 60px -22px rgba(16,24,40,.30),0 2px 6px -2px rgba(16,24,40,.10);
     animation:prob-flotar 6s ease-in-out infinite}
/* LA OLA (pedido de Tiziano): todas hacen el mismo movimiento pero arrancan
   escalonadas, así se levanta primero una y después la otra en vez de moverse en
   bloque.
   ⚠️ Cambió el 2026-07-31 con el carrusel: antes eran TRES tarjetas escalonadas
   de a 0,6s. Ahora son cinco, así que el escaloncito bajó a 0,4s. El techo es
   importante: pasados los 2s (un tercio de la vuelta de 6s) dejan de parecer una
   ola y parecen tarjetas desincronizadas — con 0,4s la quinta arranca en 1,6s y
   entra justo.
   Como las tarjetas nunca cambian de lugar en el HTML, el escalonado es fijo: a
   cada rubro le toca siempre el mismo, gire el carrusel donde gire. */
.carr-ventana > *:nth-child(2) .pnl{animation-delay:.4s}
.carr-ventana > *:nth-child(3) .pnl{animation-delay:.8s}
.carr-ventana > *:nth-child(4) .pnl{animation-delay:1.2s}
.carr-ventana > *:nth-child(5) .pnl{animation-delay:1.6s}
/* La cabecera copia la del celular: sin fondo gris —todo blanco— y separada del
   resto por una sola línea fina. Es la línea que marcó Tiziano en la captura. */
.pnl-cab{display:flex;align-items:center;justify-content:center;
         padding:8px 10px 12px;border-bottom:1px solid var(--linea)}
.pnl-cab h3{font-size:17px}
.pnl-lista{list-style:none}
/* Cada módulo es una fila, con la misma línea separadora y el mismo relleno que
   los mensajes del celular (.prob-msj). El ícono lleva flex-shrink:0 para que no
   se achique nunca, y align-items:center mantiene el texto alineado aunque se
   parta en dos renglones. */
.pnl-mod{display:flex;align-items:center;gap:10px;padding:11px 8px;
         font-size:14.5px;font-weight:600;color:var(--tinta);
         border-bottom:1px solid #f4f4f5}
.pnl-mod:last-child{border-bottom:0}
.pnl-mod svg{width:18px;height:18px;color:var(--verde-osc);flex-shrink:0}

/* ───── 6. Proyectos (maquetas de relleno) ───── */
.proy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.proy-tarj{padding:0;overflow:hidden;display:flex;flex-direction:column}
.proy-info{padding:18px 22px 22px}
.proy-info h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.proy-tag{font-size:10px;font-weight:800;letter-spacing:.05em;color:var(--verde-osc);
          background:var(--verde-suave);border:1px solid #a7f3d0;border-radius:99px;
          padding:2px 9px}
.maqueta{background:linear-gradient(160deg,#f0fdf9,#f4f4f5);padding:22px 22px 0;
         border-bottom:1px solid var(--borde)}
.maq-barra{background:#fff;border:1px solid var(--borde);border-bottom:0;
           border-radius:10px 10px 0 0;padding:8px 10px;display:flex;gap:5px}
.maq-barra i{width:8px;height:8px;border-radius:50%;background:#e4e4e7}
.maq-barra i:first-child{background:#fda4af}
.maq-barra i:nth-child(2){background:#fcd34d}
.maq-barra i:nth-child(3){background:#86efac}
.maq-crm{background:#fff;border:1px solid var(--borde);border-bottom:0;display:flex;
         height:118px;overflow:hidden}
.maq-side{width:34%;border-right:1px solid var(--borde);padding:10px 8px;display:flex;
          flex-direction:column;gap:6px}
.maq-side i{display:block;height:8px;border-radius:99px;background:#f4f4f5}
.maq-side i.on{background:var(--verde-suave);outline:1px solid #a7f3d0}
.maq-cuerpo{flex:1;padding:10px}
.maq-stats{display:flex;gap:6px;margin-bottom:8px}
.maq-stats span{flex:1;height:26px;border:1px solid var(--borde);border-radius:6px;
                background:var(--fondo)}
.maq-lineas i{display:block;height:7px;border-radius:99px;background:#f4f4f5;margin-bottom:6px}
.maq-web{background:#fff;border:1px solid var(--borde);border-bottom:0;height:118px;
         padding:14px;overflow:hidden}
.maq-hero{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:10px}
.maq-tit{display:block;width:62%;height:10px;border-radius:99px;background:#e4e4e7}
.maq-sub{display:block;width:44%;height:6px;border-radius:99px;background:#f4f4f5}
.maq-boton{width:74px;height:16px;border-radius:99px;background:var(--verde);margin-top:2px}
.maq-cards{display:flex;gap:8px}
.maq-cards span{flex:1;height:34px;border:1px solid var(--borde);border-radius:7px;
                background:var(--fondo)}
.proy-prox{border-style:dashed;background:var(--fondo)}
.proy-prox-int{padding:30px 22px;text-align:center;display:flex;flex-direction:column;
               align-items:center;gap:10px;justify-content:center;height:100%}
.proy-prox-ico{width:46px;height:46px;border-radius:50%;border:2px dashed var(--gris-claro);
               color:var(--gris-claro);font-size:24px;font-weight:700;
               display:grid;place-items:center}
.proy-prox .boton-sec{margin-top:6px}

/* ───── 7. Opiniones (oculta hasta tener testimonios) ───── */
.op-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.op-texto{font-size:15px;color:var(--tinta);margin-bottom:16px}
.op-quien{display:flex;align-items:center;gap:11px}
.op-av{width:38px;height:38px;border-radius:50%;background:var(--verde);color:#fff;
       font-weight:800;display:grid;place-items:center}
.op-quien b{display:block;font-size:14px;line-height:1.25}
.op-quien span{font-size:12.5px;color:var(--gris-claro)}

/* ───── 8. Precios ───── */
/* Precios ahora va en BLANCO (le toca por la alternancia); antes era gris fijo. */
.fund-cartel{max-width:640px;margin:0 auto 26px;text-align:center;font-size:14.5px;
             background:#fffbeb;border:1px solid #fde68a;color:#92400e;
             border-radius:12px;padding:12px 18px}
.fund-cartel b{color:#78350f}
.fund-cupo{font-weight:800}
.toggle-moneda{display:flex;justify-content:center;gap:0;width:fit-content;margin:0 auto 34px;
               background:#fff;border:1px solid var(--borde);border-radius:99px;padding:4px}
.toggle-moneda button{font:inherit;font-size:13.5px;font-weight:700;border:0;cursor:pointer;
                      background:none;color:var(--gris);border-radius:99px;padding:7px 18px;
                      transition:.18s}
.toggle-moneda button.on{background:var(--verde);color:#fff}
.prec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{display:flex;flex-direction:column;position:relative}
.plan h3{font-size:20px}
.plan-precio{margin:10px 0 2px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tachado{font-size:15.5px;color:var(--gris-claro);text-decoration:line-through}
.fund-precio{font-family:var(--titulo);font-size:36px;font-weight:800;letter-spacing:-.02em}
.permes{font-size:13.5px;color:var(--gris-claro)}
.plan-consultar{font-family:var(--titulo);font-size:30px;font-weight:800}
.plan-fund{display:block;font-size:12px;font-weight:700;color:#b45309;margin-bottom:14px}
.plan ul{list-style:none;margin:6px 0 22px;flex:1}
.plan li{font-size:14.5px;color:var(--gris);padding:7px 0 7px 26px;position:relative;
         border-bottom:1px dashed #f4f4f5}
.plan li:last-child{border-bottom:0}
.plan li::before{content:"✓";position:absolute;left:2px;color:var(--verde-osc);font-weight:800}
.plan li b{color:var(--tinta)}
.plan .boton,.plan .boton-sec{width:100%}
.plan-destacado{border-color:var(--verde);border-width:2px;
                box-shadow:0 22px 48px -20px rgba(16,185,129,.35)}
.plan-destacado:hover{border-color:var(--verde)}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
            background:var(--verde);color:#fff;font-size:11.5px;font-weight:800;
            border-radius:99px;padding:4px 14px;white-space:nowrap}
.prec-nota{text-align:center;margin-top:24px;font-size:13.5px;color:var(--gris)}

/* ───── 9. FAQ ───── */
.faq-lista{display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--borde);border-radius:14px;
          transition:border-color .2s}
.faq-item[open]{border-color:#a7f3d0;background:#fdfffe}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;
                  justify-content:space-between;gap:14px;padding:17px 20px;
                  font-size:15.5px;font-weight:700}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{width:19px;height:19px;color:var(--gris-claro);flex-shrink:0;
                      transition:transform .25s}
.faq-item[open] summary svg{transform:rotate(180deg);color:var(--verde-osc)}
.faq-item p{padding:0 20px 17px;font-size:14.5px;color:var(--gris)}

/* ───── 10. Contacto ───── */
.contacto{background:
  radial-gradient(48% 42% at 50% 100%,rgba(16,185,129,.10),transparent 70%),#fff}
/* Una sola columna centrada: la columna de WhatsApp está oculta (ver index.html),
   así que queda solo el formulario, en el medio de la página.
   Para volver a las DOS columnas: grid-template-columns:1fr 1.15fr y max-width:940px. */
.cont-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;
           max-width:520px;margin:0 auto}
.cont-wsp{text-align:center}
.boton-wsp{width:100%;max-width:320px}
.cont-o{margin:16px 0 10px;font-size:12.5px;color:var(--gris-claro)}
.cont-dato{font-size:14.5px;font-weight:600;color:var(--gris);margin-top:4px}
.form{background:#fff;border:1px solid var(--borde);border-radius:18px;padding:26px;
      box-shadow:0 18px 44px -24px rgba(16,24,40,.16)}
.campo{margin-bottom:15px}
.campo label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;font-size:14.5px;
  border:1px solid var(--borde);border-radius:10px;padding:11px 13px;background:#fff;
  color:var(--tinta);transition:border-color .15s,box-shadow .15s}
.campo textarea{resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;
  border-color:var(--verde);box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--gris-claro)}
.form .boton{width:100%}
.form-nota{margin-top:12px;font-size:12px;color:var(--gris-claro);text-align:center}

/* ───── EL POP-UP del formulario (2026-07-30) ─────
   El formulario dejó de vivir al final de la página y ahora se abre en el medio
   de la pantalla, con el fondo desenfocado (pedido de Tiziano).

   Dos capas: `.modal-fondo` es el vidrio esmerilado que tapa la página, y
   `.modal-caja` es la tarjeta blanca de arriba. Están separadas a propósito: el
   desenfoque tiene que aplicarse SOLO al fondo. Si estuvieran juntas, la tarjeta
   se desenfocaría a sí misma.

   ⚠️ `-webkit-backdrop-filter` NO es un adorno viejo: sin esa línea el iPhone no
   desenfoca nada y el fondo queda gris plano. (Mismo tropiezo que en la app de
   entrenamiento.) */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.modal-fondo{position:absolute;inset:0;background:rgba(24,24,27,.45);
             backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
             opacity:0;transition:opacity .26s ease}
/* ⚠️ El que scrollea es la TARJETA de adentro (.pasos), no esta caja. Si
   scrolleara esta, la cruz de cerrar —que está pegada acá arriba a la derecha—
   se iría hacia arriba con el contenido y en el celular quedaría fuera de la
   vista justo cuando más se la necesita. Así la cruz se queda quieta.
   El `display:flex` + `min-height:0` es lo que le permite a la tarjeta achicarse
   hasta el alto disponible en vez de desbordar. */
.modal-caja{position:relative;width:100%;max-width:540px;display:flex;
            max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);
            opacity:0;transform:translateY(16px) scale(.98);
            transition:opacity .26s ease,transform .26s ease}
/* El que scrollea ya NO es la tarjeta: desde que tiene altura fija, scrollea la
   pregunta por dentro (ver `.paso`, más abajo). Acá solo se le dice que ocupe el
   ancho del pop-up. */
.modal .pasos{flex:1;min-width:0}
/* La clase "abierto" se pone un cuadro DESPUÉS de destapar el pop-up: si se
   pusiera en el mismo, el navegador no tendría de dónde animar y aparecería de
   golpe. */
.modal-abierto .modal-fondo{opacity:1}
.modal-abierto .modal-caja{opacity:1;transform:none}
/* La cruz de cerrar va sobre la tarjeta, arriba a la derecha. */
.modal-x{position:absolute;top:12px;right:12px;z-index:2;
         width:34px;height:34px;border-radius:50%;border:1px solid var(--borde);
         background:#fff;color:var(--gris);cursor:pointer;
         display:grid;place-items:center;transition:.16s ease}
.modal-x:hover{color:var(--tinta);border-color:var(--gris-claro)}
.modal-x:focus-visible{outline:0;border-color:var(--verde);
                       box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.modal-x svg{width:17px;height:17px}
/* Sombra más marcada que la de la página, para que "flote" sobre el desenfoque. */
.modal .pasos{box-shadow:0 30px 70px -30px rgba(16,24,40,.5)}
/* La tarjeta pierde su alto mínimo cuando la pantalla es baja (un celular
   acostado): ahí manda el alto que haya, y el contenido scrollea adentro. */
@media (max-height:560px){ .modal .pasos{min-height:0} }
/* Mientras el pop-up está abierto, la página de atrás no se mueve. Va en <html>
   y NO en <body>: el body usa overflow-x:clip para no romper window.scrollY (lo
   que hace que el navbar se achique al bajar), y tocarle el overflow lo rompería. */
html.sin-scroll{overflow:hidden}

/* El botón que abre el pop-up, en la sección de contacto */
.cont-cta{text-align:center}
.cont-cta .form-nota{margin-top:14px}

@media (prefers-reduced-motion:reduce){
  .modal-fondo,.modal-caja{transition:none}
}
@media (max-width:520px){
  .modal{padding:12px}
  .modal-caja{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
  .modal-x{top:10px;right:10px;width:32px;height:32px}
}

/* ───── Formulario POR PASOS (2026-07-30) ─────
   Reemplazó al formulario de una sola pantalla. Una pregunta por vez: se toca
   una opción y pasa sola a la siguiente. Todo lo que se ve acá lo dibuja
   formulario.js desde su lista PREGUNTAS — en el HTML solo hay una caja vacía.

   ⚠️ LA TARJETA TIENE ALTURA FIJA (pedido de Tiziano, 2026-07-30): antes crecía
   y se achicaba con cada pregunta y el pop-up saltaba de tamaño.
   El número sale de MEDIR: la pantalla más alta es "¿Qué te está pasando hoy?",
   que pide 494px de contenido; con la cabecera (55) y el relleno de arriba (26)
   eso da 575, y se le dejan 9px de aire por si una letra distinta estira algo.
   Si algún día se agrega una pregunta con más opciones, hay que volver a medir y
   subir este número, o esa pregunta va a scrollear por dentro.
   El `max-height` es el mismo de `.modal-caja`: en una pantalla baja la tarjeta
   se achica en vez de salirse, y lo que scrollea es la pregunta por dentro. */
.pasos{background:#fff;border:1px solid var(--borde);border-radius:20px;
       box-shadow:0 18px 44px -24px rgba(16,24,40,.16);
       display:flex;flex-direction:column;
       /* El relleno de los costados ya NO va acá sino en cada pieza de adentro:
          la pista por donde se desliza tiene que llegar hasta el borde, si no la
          pregunta se cortaría 24px antes y se vería como una ventanita. */
       padding:26px 0 0}
.modal .pasos{height:584px;overflow:hidden;
              max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px)}

/* ───── El cambio de pregunta: se desliza de verdad (2026-07-30) ─────
   Primera versión: la pantalla se corría 40px y se desvanecía. Tiziano lo miró y
   dijo que no parecía deslizarse. Ahora las dos pantallas están **una al lado de
   la otra** y se corren juntas el ancho entero de la tarjeta, como pasar una
   hoja: no hay desvanecido, hay movimiento.

   Cómo se logra que estén al lado: las dos viven apiladas en la misma "pista"
   (position:absolute, las dos ocupando todo), y lo que las pone lado a lado es
   el `translateX(100%)` de la que llega. Moviéndose las dos a la vez, se ve una
   sola tira corriéndose.
   ⚠️ El tiempo (.42s) está también en formulario.js, en la constante DESLIZAR.
   Si se cambia acá, cambiarlo allá o la vieja se borra antes de terminar. */
.paso-pista{position:relative;flex:1;min-height:0;overflow:hidden}
.paso{position:absolute;left:0;top:0;width:100%;height:100%;
      display:flex;flex-direction:column;padding:0 24px 24px;
      /* Si una pregunta no entra (celulares bajos), scrollea ELLA y no la
         tarjeta: así el pop-up nunca cambia de tamaño. */
      overflow-y:auto;overscroll-behavior:contain}
/* La barrita de scroll, finita como la del panel. Misma receta y misma trampa:
   `scrollbar-width` y `::-webkit-scrollbar` no se pueden mezclar (Chrome apaga
   el fino), por eso Firefox va aparte. */
.paso::-webkit-scrollbar{width:6px}
.paso::-webkit-scrollbar-track{background:transparent}
.paso::-webkit-scrollbar-thumb{background:#d4d4d8;border-radius:99px}
.paso::-webkit-scrollbar-thumb:hover{background:#a1a1aa}
@supports not selector(::-webkit-scrollbar){
  .paso{scrollbar-width:thin;scrollbar-color:#d4d4d8 transparent}
}
/* Dónde arranca la que llega: pegada al costado, justo afuera de la vista. */
.paso-desde-der{transform:translateX(100%)}
.paso-desde-izq{transform:translateX(-100%)}
/* A dónde va la que se está yendo. */
.paso-va-izq{transform:translateX(-100%)}
.paso-va-der{transform:translateX(100%)}
/* La clase que hace el movimiento. Se les pone a las DOS a la vez: por eso van
   pegadas y parece una sola tira. La curva arranca decidida y frena al final,
   que es como se mueve una hoja de verdad. */
.paso-anda{transition:transform .42s cubic-bezier(.35,.02,.16,1)}
/* La que se va no se puede tocar mientras se va. */
.paso-va-izq,.paso-va-der{pointer-events:none}
.paso-centro{align-items:center;justify-content:center;text-align:center;gap:4px}
.paso-titulo{font-size:22px;outline:0}
.paso-ayuda{margin-top:6px;font-size:14px;color:var(--gris)}
.paso-centro .boton{margin-top:20px}
.paso-error{margin-top:12px;font-size:13.5px;font-weight:600;color:#dc2626}

/* Cabecera: "Paso 2 de 4" + la barrita que se va llenando.
   Se queda QUIETA arriba: no viaja con la pregunta que se desliza, y por eso la
   barrita ahora sí se ve crecer (antes se redibujaba entera y saltaba).
   El margen de los costados lo lleva ella porque la tarjeta ya no tiene. */
.pasos-cab{margin:0 24px 18px}
/* CENTRADO sobre la barrita (Tiziano, 2026-07-31). Ocupa el renglón entero y el
   texto se acomoda solo en el medio, así que igual queda lejos de la cruz de
   cerrar (que está pegada a la derecha). Va en Cairo —la letra de los títulos—
   y tal cual se escribe, "Paso 1 de 4": sin las mayúsculas de imprenta que le
   ponía el text-transform. */
.pasos-cuenta{display:block;text-align:center;font-family:var(--titulo);
              font-size:16px;font-weight:700;letter-spacing:.01em;
              color:var(--gris);margin-bottom:10px}
.pasos-barra{height:5px;border-radius:99px;background:var(--borde);overflow:hidden}
.pasos-barra i{display:block;height:100%;border-radius:99px;background:var(--verde);
               transition:width .35s ease}

/* Las opciones. Son botones de verdad (no casilleros disfrazados) para que
   anden con el teclado y los lea el lector de pantalla. */
.opciones{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.opcion{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
        font:inherit;cursor:pointer;background:#fff;color:var(--tinta);
        border:1px solid var(--borde);border-radius:14px;padding:13px 14px;
        transition:border-color .16s ease,background .16s ease,transform .16s ease}
.opcion:hover{border-color:var(--verde);transform:translateY(-1px)}
.opcion:focus-visible{outline:0;border-color:var(--verde);
                      box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.opcion-si{border-color:var(--verde);background:var(--verde-suave)}
.opcion-ico{width:38px;height:38px;flex-shrink:0;border-radius:11px;background:var(--fondo);
            border:1px solid var(--borde);color:var(--verde-osc);
            display:grid;place-items:center}
.opcion-si .opcion-ico{background:#fff;border-color:#a7f3d0}
.opcion-ico svg{width:19px;height:19px}
.opcion-txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.opcion-txt b{font-size:14.8px;font-weight:700;line-height:1.35}
.opcion-txt span{font-size:13px;color:var(--gris);line-height:1.35}
/* El tilde solo aparece en la elegida: ocupa su lugar siempre para que la
   tarjeta no cambie de ancho al marcarla. */
.opcion-tilde{width:20px;height:20px;flex-shrink:0;color:var(--verde);
              opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s ease}
.opcion-si .opcion-tilde{opacity:1;transform:none}
.opcion-tilde svg{width:20px;height:20px;display:block}
/* En las de marcar varias el texto es corto: no llevan dibujito ni detalle. */
.opciones-varias .opcion{padding:12px 14px}
.campo-otro{margin-top:10px;margin-bottom:0}

/* El pie con Atrás / Seguir. Atrás va siempre a la izquierda; si no hay botón
   de seguir (las preguntas de una sola opción pasan solas), queda él solo. */
.paso-pie{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:22px}
.paso-pie .boton-sec{padding:11px 18px;font-size:14.5px}
.paso-pie .boton{margin-left:auto;padding:12px 24px;font-size:15px}
.paso-pie .boton-sec svg{width:17px;height:17px}
.campo-opc{font-weight:600;color:var(--gris-claro)}

/* El resumen del final */
.resumen{margin-top:18px;border:1px solid var(--borde);border-radius:14px;overflow:hidden}
.res-fila{display:grid;grid-template-columns:1fr auto;gap:2px 12px;
          padding:12px 14px;border-bottom:1px solid var(--linea)}
.res-fila:last-child{border-bottom:0}
.res-que{font-size:12px;font-weight:700;color:var(--gris-claro);
         text-transform:uppercase;letter-spacing:.05em}
.res-vale{grid-column:1;font-size:14.5px;font-weight:600;white-space:pre-line}
.res-editar{grid-row:1 / span 2;align-self:center;font:inherit;font-size:13px;font-weight:700;
            color:var(--verde-osc);background:none;border:0;cursor:pointer;padding:4px}
.res-editar:hover{text-decoration:underline}

/* La pantalla de "listo".
   El redondel del tilde va SIN contorno (Tiziano, 2026-07-31): antes tenía una
   rayita verde clara alrededor que lo recortaba contra el blanco. Ahora es una
   mancha suave que se funde con el fondo; lo que se ve es el tilde. */
.paso-ok{width:60px;height:60px;border-radius:50%;background:var(--verde-suave);
         color:var(--verde-osc);display:grid;place-items:center;margin-bottom:14px}
.paso-ok svg{width:26px;height:26px}
/* Quedó un solo botón, así que el centrado del pie es lo que lo deja en el medio. */
.paso-fin{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;justify-content:center}
.paso-fin .boton,.paso-fin .boton-sec{padding:14px 40px;font-size:16.5px}

@media (prefers-reduced-motion:reduce){
  /* Al que pide menos movimiento las pantallas le cambian secas, sin deslizar.
     formulario.js además se saltea la espera, así que el cambio es instantáneo. */
  .paso-anda,.paso-desde-izq,.paso-desde-der,
  .paso-va-izq,.paso-va-der{transition:none;transform:none}
}
@media (max-width:520px){
  .pasos{padding:20px 0 0}
  .pasos-cab{margin:0 16px 18px}
  .paso{padding:0 16px 18px}
  /* Más alta que en la PC porque a 320px las opciones se parten en dos renglones.
     Acá NO alcanza con medir la más alta: "¿Qué te está pasando hoy?" pide 757px
     y no entra en casi ningún celular. Entonces se le da todo lo que se puede
     (680, que entra en un celular de 720 de alto) y esa pregunta —solo esa—
     scrollea unos 77px por dentro. En celulares más bajos manda el `max-height`.
     Lo importante se cumple igual: la tarjeta mide SIEMPRE lo mismo. */
  .modal .pasos{height:680px;
                max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
  .paso-titulo{font-size:20px}
  .opcion{padding:11px 12px;gap:11px}
  .opcion-ico{width:34px;height:34px}
  /* Los dos botones del pie, uno al lado del otro, no entran en 320px. */
  .paso-pie{flex-direction:column-reverse;align-items:stretch;gap:8px}
  .paso-pie .boton,.paso-pie .boton-sec{margin-left:0;width:100%}
  .res-fila{grid-template-columns:1fr}
  .res-editar{grid-row:auto;justify-self:start;padding:2px 0}
}

/* ───── Páginas de texto: Términos y Privacidad (2026-07-30) ─────
   Las dos usan estas clases y nada más. Son páginas para LEER, así que van
   angostas (780px de `.contenedor-angosto`), con renglones altos y sin ningún
   adorno: nada de tarjetas, nada de verde de relleno.
   El `padding-top` grande es porque la barra de arriba está flotando encima. */
.legal{padding:136px 0 80px}
.legal-cab{margin-bottom:38px;padding-bottom:26px;border-bottom:1px solid var(--linea)}
.legal-cab h1{font-size:clamp(30px,4.4vw,42px)}
.legal-fecha{margin-top:12px;font-size:14px;color:var(--gris-claro)}
.legal-intro{margin-top:14px;font-size:17px;color:var(--gris)}
.legal h2{font-size:21px;font-weight:700;margin-top:38px;margin-bottom:10px;
          letter-spacing:-.01em}
.legal h2:first-of-type{margin-top:0}
.legal p{margin-bottom:12px;color:#3f3f46}
.legal ul{margin:0 0 14px 20px;color:#3f3f46}
.legal li{margin-bottom:7px}
.legal a{color:var(--verde-osc);text-decoration:underline;
         text-underline-offset:2px}
.legal strong{font-weight:700;color:var(--tinta)}
/* El recuadro para lo que conviene que no se pase por alto. Uno o dos por
   página como mucho: si se llena de recuadros, dejan de resaltar. */
.legal-nota{margin:20px 0;padding:16px 18px;background:var(--verde-suave);
            border:1px solid #a7f3d0;border-radius:14px}
.legal-nota p:last-child{margin-bottom:0}
/* La leyenda de la AAIP. Va destacada y en versalitas porque NO es un texto
   nuestro: es una frase de inclusión obligatoria (art. 3 de la Resolución AAIP
   14/2018) y tiene que reproducirse tal cual. La barra gris de la izquierda es
   para que se vea que es una cita y no una redacción propia.
   ⚠️ No editarle una coma. */
.legal-leyenda{margin:20px 0;padding:14px 0 14px 18px;
               border-left:3px solid var(--gris-claro);
               font-size:14.5px;line-height:1.6;color:#3f3f46}
/* El renglón chiquito que dice de qué norma sale cada cosa. */
.legal-fuente{margin:-4px 0 16px;font-size:13px;color:var(--gris-claro)}
.legal-fuente a{color:var(--gris);text-decoration:underline}
/* El "← Volver" de arriba de todo. */
.legal-volver{display:inline-flex;align-items:center;gap:7px;margin-bottom:22px;
              font-size:14.5px;font-weight:600;color:var(--gris);
              text-decoration:none;transition:color .16s ease}
.legal-volver:hover{color:var(--verde-osc)}
.legal-volver svg{width:16px;height:16px}
@media (max-width:620px){
  /* Más aire arriba que en la PC, no menos: en el celular la píldora del navbar
     se parte en dos renglones y termina 106px abajo. Con 104 el "Volver al
     inicio" quedaba 2px POR DEBAJO de la barra, o sea tapado. Medido a 320. */
  .legal{padding:134px 0 60px}
  .legal h2{font-size:19px;margin-top:32px}
}

/* ───── Pie (rehecho 2026-07-30) ─────
   Simple, de un solo renglón: el año a la izquierda y lo legal a la derecha.
   Fondo BLANCO (no el gris de antes) y bien bajito, para que no compita con la
   sección de contacto que tiene justo arriba. */
.pie{border-top:1px solid var(--linea);padding:26px 0;background:#fff}
.pie-int{display:flex;align-items:center;justify-content:space-between;
         flex-wrap:wrap;gap:14px 28px}
.pie-copy{font-size:13.5px;color:var(--gris-claro)}
.pie-links{display:flex;align-items:center;gap:24px}
.pie-links a{font-size:13.5px;color:var(--gris);text-decoration:none;
             transition:color .16s ease}
.pie-links a:hover{color:var(--verde-osc)}
/* El de Instagram es un dibujito, no un texto: se le da un área para tocarlo
   cómodo en el celular sin que el renglón crezca. */
.pie-ig{display:grid;place-items:center;width:30px;height:30px;margin:-6px 0;
        color:var(--gris-claro)}
.pie-ig svg{width:20px;height:20px;display:block}
.pie-links a:focus-visible{outline:2px solid var(--verde);outline-offset:3px;
                           border-radius:6px}
/* En pantallas angostas se apila y va todo centrado. El corte es 620 y no 520
   porque lo que manda no es el celular: los dos textos legales más el año dejan
   de entrar en un renglón bastante antes. */
@media (max-width:620px){
  .pie-int{flex-direction:column-reverse;justify-content:center;gap:16px}
  .pie-links{gap:18px;flex-wrap:wrap;justify-content:center}
}
/* A 320px "Términos y Condiciones" y "Política de Privacidad" no entran uno al
   lado del otro: van uno abajo del otro, con el dibujito de Instagram al final. */
@media (max-width:400px){
  .pie-links{flex-direction:column;gap:12px}
}

/* ───── Botón flotante de WhatsApp — SACADO el 2026-07-30 ─────
   Era el globito verde de abajo a la derecha que seguía a la persona por toda la
   página. Tiziano lo sacó del HTML. Estos estilos quedan por si vuelve, pero HOY
   NO LOS USA NADIE. Si vuelve, acordarse del z-index: 60 lo deja por encima de la
   barra de arriba (50) y del pop-up del formulario (100) hay que cuidarlo, porque
   con el pop-up abierto el globito se le montaría encima. */
/* "fixed" = pegado a la pantalla, no a la página: queda siempre en la misma
   esquina aunque se scrollee. z-index 60 lo deja por ENCIMA de la barra de
   arriba (que es 50), así nunca se lo tapa nada. */
.wsp-flotante{position:fixed;right:22px;bottom:22px;z-index:60;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--verde);color:#fff;
  box-shadow:0 10px 26px -6px rgba(16,185,129,.55),0 3px 10px -3px rgba(16,24,40,.25);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.wsp-flotante svg{width:33px;height:33px;display:block}
.wsp-flotante:hover{background:var(--verde-osc);transform:scale(1.07);
  box-shadow:0 14px 32px -6px rgba(16,185,129,.62),0 4px 12px -3px rgba(16,24,40,.28)}
.wsp-flotante:focus-visible{outline:3px solid #a7f3d0;outline-offset:3px}
/* En el celular, un toque más chico y más cerca del borde. */
@media (max-width:620px){
  .wsp-flotante{right:16px;bottom:16px;width:52px;height:52px}
  .wsp-flotante svg{width:29px;height:29px}
}

/* ───── Animación de aparición al bajar ───── */
.aparecer{opacity:0;transform:translateY(22px);
          transition:opacity .6s ease,transform .6s ease}
.aparecer.visto{opacity:1;transform:none}
/* (2026-07-31) Acá había también dos reglas para `.paneles`, la grilla de tres
   tarjetas de "El panel por dentro". Se fueron con el carrusel: ahora entra todo
   junto, porque el .aparecer pasó a estar en el carrusel entero. El motivo está
   explicado en index.html, al lado del carrusel. */
.prob-dos .aparecer:nth-child(2),
.proy-grid .aparecer:nth-child(2),
.prec-grid .aparecer:nth-child(2){transition-delay:.12s}
.proy-grid .aparecer:nth-child(3),
.prec-grid .aparecer:nth-child(3){transition-delay:.24s}

/* ───── El hero, que es lo primero que se ve ─────
   Las cuatro piezas del título (etiqueta, h1, texto de apoyo y botones) suben
   una atrás de otra, de arriba hacia abajo, con 90ms entre cada una. Es la misma
   animación .aparecer que usa el resto de la página; lo único que se le agrega
   es el escalonado. Ojo con los nth-child: los comentarios del HTML no cuentan,
   los elementos son 1 .hero-eti, 2 h1, 3 .apoyo, 4 .hero-botones y —desde el
   2026-07-31— 5 .hero-social (la línea de "hablás directo conmigo").
   ⚠️ Si se agrega o se saca una pieza del hero, hay que corregir esta lista o
   una de ellas entra a destiempo. */
.hero-contenido .aparecer:nth-child(2){transition-delay:.09s}
.hero-contenido .aparecer:nth-child(3){transition-delay:.18s}
.hero-contenido .aparecer:nth-child(4){transition-delay:.27s}
.hero-contenido .aparecer:nth-child(5){transition-delay:.36s}

/* El panel entra MUCHO más suave que el texto (pedido de Tiziano, 2026-07-30):
   sube menos de la mitad (10px contra 22) y tarda tres veces más (1,8s contra
   0,6s), con una curva que frena de a poco al final. Es una pieza grande y
   llena de datos: entrando rápido tironea la vista y compite con el título.
   ⚠️ La sube el elemento de AFUERA (.hero-panel) y no el panel en sí, por lo
   mismo que ya pasa en "El panel por dentro": el transform de una clase pierde
   contra cualquier animación de CSS que haya adentro. */
.hero-panel.aparecer{transform:translateY(10px);
  transition:opacity 1.8s cubic-bezier(.22,.61,.36,1),
             transform 1.8s cubic-bezier(.22,.61,.36,1)}
/* ⚠️ Este renglón NO se puede borrar. La regla de arriba pisa al
   `.aparecer.visto{transform:none}` general (pesan igual y esta va después), así
   que sin esto el panel se queda 10px más abajo PARA SIEMPRE: solo aparecería
   de a poco, sin subir nunca. Ya pasó una vez. */
.hero-panel.aparecer.visto{transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aparecer{opacity:1;transform:none;transition:none}
  /* Las dos reglas del hero pesan más que la de arriba, así que hay que
     apagarlas por separado o al que pide menos movimiento le quedaría el panel
     10px corrido y el título entrando escalonado igual. */
  .hero-panel.aparecer{transform:none;transition:none}
  .hero-contenido .aparecer{transition-delay:0s}
  .punto-vivo{animation:none}
  /* Las dos flotaciones se apagan juntas: son la misma animación (prob-flotar). */
  .prob-tel,.pnl{animation:none}
  /* El carrusel sigue girando, pero SIN movimiento: las tarjetas se cambian
     solo con un desvanecido, que es lo que sí se considera aceptable para quien
     pide menos movimiento. Se apaga el correrse y el achicarse, no el carrusel:
     apagarlo del todo dejaría a esa persona viendo un solo rubro para siempre. */
  .carr-listo .pnl-caja{transition:opacity .5s ease}
  .pnl-caja[data-pos="-1"],.pnl-caja[data-pos="1"],
  .pnl-caja[data-pos="-2"],.pnl-caja[data-pos="2"]{transform:none;opacity:0}
  .wsp-flotante{transition:none}
  .wsp-flotante:hover{transform:none}
}

/* ───── Responsive ───── */
@media (max-width:980px){
  /* Ojo: .paneles NO va acá. Son tres tarjetas: en dos columnas quedaría una
     sola abajo, descolgada. Se apilan de una (ver el @media de más abajo). */
  .proy-grid,.prec-grid,.op-grid{grid-template-columns:repeat(2,1fr)}
  .plan-destacado{order:-1}
  .cont-grid{grid-template-columns:1fr;gap:28px}
  /* El celular no entra cómodo al lado de la lista: se apila, celular arriba. */
  .prob-dos{grid-template-columns:1fr;gap:40px}
  .prob-lista{max-width:620px;margin:0 auto}
}
/* Franja 1200–1279px: el panel no se puede achicar de 690px, así que el aire del
   medio se achica para que al título le queden ~420px. Sin esto, con los 56px de
   siempre, el título queda en 399px y el h1 (45px) empieza a partirse en tres
   renglones. Arriba de 1280 no cambia nada: vuelven los 56px de siempre. */
@media (min-width:1200px) and (max-width:1279px){
  .hero-grid{gap:32px}
  /* Y encima el título se achica un toque (2026-07-31, con el título nuevo, que
     es bastante más largo que "Todo conectado, en un solo lugar"). Con los 45,6px
     que le tocaban a 1200 se partía en CUATRO renglones y los dos primeros
     quedaban de tres palabras ("Un asistente" / "atiende tu"). Medido uno por
     uno: hasta 44px entra en tres renglones parejos, de 45 para arriba se rompe.
     Se dejan 44 de techo con un poco de margen abajo. */
  .hero h1{font-size:clamp(38px,3.3vw,44px)}
}

/* Abajo de 1200px el panel ya no tiene lugar cómodo al lado del título: se apila
   (título arriba, panel abajo) y queda centrado y prolijo.
   ⚠️ Dice 1199 y no 1200 a propósito (2026-07-26): 1200 es una de las medidas de
   PC que hay que soportar, así que en 1200 clavado tiene que verse el formato de
   escritorio (panel al lado del título), no el apilado. */
@media (max-width:1199px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-contenido{text-align:center;order:-1;max-width:none}
  /* El "max-width" es del 2026-07-31, con el título nuevo. Acá el título ya no
     tiene el panel al lado, así que dispone de TODA la pantalla: a 1199px el
     título entraba entero en UN solo renglón de 1144px de largo, estirado de
     punta a punta. Con este techo se parte en dos renglones parejos
     ("...atiende tu WhatsApp / y ordena todo tu negocio"), igual que hacía el
     título viejo con su <br>. Abajo de 760px de pantalla no hace nada, porque
     ahí el título ya es más angosto que el techo. */
  .hero h1{margin-left:auto;margin-right:auto;max-width:760px}
  .hero .apoyo{margin-left:auto;margin-right:auto;max-width:560px}
  /* Acá el hero se apila y el texto pasa a ir centrado, así que la columna es
     TODA la pantalla: sin este techo, el botón de ancho completo medía 713px en
     una tablet de 768 y quedaba una pastilla de punta a punta, más ancha que el
     texto de arriba. Los 560 son los MISMOS del texto de apoyo de acá arriba,
     así que los dos terminan en la misma línea. En el celular no hace nada:
     ahí la pantalla ya es más angosta que 560. */
  .hero-botones{max-width:560px;margin-left:auto;margin-right:auto}
  .hero-botones{justify-content:center}
  .hero-social{justify-content:center}
  .hero-panel{width:100%;max-width:760px;margin:0 auto}
  .hero{background:
        radial-gradient(52% 46% at 50% 0%,rgba(16,185,129,.10),transparent 70%),
        linear-gradient(180deg,#f7fdfb 0%,#fff 88%)}
}

/* ───── SIN HAMBURGUESA (2026-07-30, pedido de Tiziano) ─────
   El menú se quedó sin opciones (se sacaron todas), así que la hamburguesa abría
   una tarjeta con el botón de Contacto adentro y nada más: dos toques para lo que
   ahora se hace en uno. En el celular la barra queda igual que en la PC —logo y
   botón verde—, solo que el botón se achica para entrar en 320px.

   👉 SI ALGÚN DÍA VUELVE UNA OPCIÓN AL MENÚ (Proyectos es la candidata), hay que
   traer la hamburguesa de vuelta: en 320px no entran el logo, un link y el botón
   en la misma fila. Está todo listo para eso — el bloque de abajo es justamente
   la tarjeta flotante del celular, y script.js sigue teniendo el código que la
   abre. Alcanza con volver a poner `.hamb{display:block}` y `.boton-barra{display:none}`. */
@media (max-width:900px){
  .menu{position:fixed;top:78px;left:20px;right:20px;padding:14px 16px;background:#fff;
        border:1px solid var(--borde);border-radius:20px;
        box-shadow:0 22px 50px -22px rgba(16,24,40,.3);
        flex-direction:column;align-items:stretch;gap:2px;
        transform:translateY(-14px);opacity:0;pointer-events:none;
        transition:transform .28s ease,opacity .28s ease}
  .menu.abierto{transform:none;opacity:1;pointer-events:auto}
  /* En el celular el menú es una tarjeta que cuelga de la píldora, así que acá
     NO corre el "juntar las opciones" del escritorio (si no, la tarjeta se
     estira 90px). Y como al scrollear la píldora queda más baja, la tarjeta
     sube con ella para no quedar despegada. */
  .barra.compacta .menu{gap:2px;top:70px}
  .menu a{padding:12px 6px;font-size:16px;border-bottom:1px solid #f4f4f5}
  .menu a:last-of-type{border-bottom:0}
  .boton-menu{display:inline-flex;margin-top:10px}
}
@media (max-width:420px){
  /* En las pantallas más chicas (320px) el botón se achica un toque para que
     nunca toque al logo. Medido: logo 152 + botón 82 + los rellenos entran justo. */
  .barra-int{padding:13px 12px 13px 16px;gap:12px}
  .barra.compacta .barra-int{padding:9px 10px 9px 14px}
  .boton-barra{padding:9px 14px;font-size:13.5px}
  .barra.compacta .boton-barra{padding:7px 13px}
}
@media (max-width:620px){
  .seccion{padding:60px 0}
  .hero{padding:126px 0 64px}
  .proy-grid,.prec-grid,.op-grid{grid-template-columns:1fr}
  /* En el celular hay que achicarle la letra y los costados (el ancho completo
     ya lo trae de la regla de arriba): con los 19px/46px de la compu, "Contame
     de tu negocio" no entraba en un renglón a 320px y el botón se hacía de DOS
     renglones (101px de alto, un ladrillo). Con esto vuelve a un renglón. */
  .hero-botones .boton-hero{font-size:17px;padding:17px 20px}
  /* Al texto de apoyo, en cambio, se le DEVUELVE tamaño. Del 1200 para arriba
     está achicado para que entre en un renglón; acá abajo eso ya es imposible
     (a 375px la columna es de 335 y el texto pediría 12px), así que si igual se
     va a partir en dos, que se lea cómodo. Ver el comentario largo de .apoyo. */
  .apoyo{font-size:16.5px}
  .fund-precio{font-size:32px}
}
/* Celulares angostos (los de 320px, el más chico que hay que soportar).
   Medido el 2026-07-31: con los 32px de siempre el título se parte en CUATRO
   renglones y los dos primeros quedan de dos palabras. Bajándolo entra en tres
   renglones parejos. A 360px de pantalla ya no hace falta (ahí los 32 entran en
   tres), por eso el corte va en 359.
   ⚠️ Empezó en 29px y bajó a 28 el mismo día, cuando el título sumó la palabra
   "que" ("Un asistente QUE atiende tu WhatsApp"): con 29 volvía a los cuatro
   renglones. Si se vuelve a tocar el texto del título, hay que MEDIR esto de
   nuevo, no darlo por bueno. */
@media (max-width:359px){
  .hero h1{font-size:28px}
}

/* ───── El carrusel en el CELULAR ─────
   Arriba de 620px las tarjetas de los costados se ven (enteras en la compu, y
   asomando cortadas contra el borde en tablet, que queda bien).
   Abajo de 620 ya no entran: la del centro ocupa toda la pantalla, así que las de
   los costados caerían enteras afuera del marco y no se verían igual. Entonces
   acá el efecto cambia: TODO pasa en el medio. La que se va se achica y se
   desvanece, y la que llega crece desde atrás hasta el tamaño completo.
   Es la misma idea de profundidad que pidió Tiziano, pero sin costados: en un
   celular no hay lugar para tres tarjetas y una lista de seis renglones ilegible
   no le sirve a nadie. */
@media (max-width:620px){
  .carrusel{--x:0%}
  .pnl-caja[data-pos="-1"]{transform:scale(.86);opacity:0}
  .pnl-caja[data-pos="1"]{transform:scale(.86);opacity:0}
  .pnl-caja[data-pos="-2"],.pnl-caja[data-pos="2"]{transform:scale(.7);opacity:0}
}