/* ============================================================
   DICTACLICK — site.css (tokens del design system + clases compartidas)
   Compilado del proyecto de Claude Design "Diseño web desde cero".
   ============================================================ */
:root{
--color-emerald:#10b981;
--color-emerald-strong:#059669;
--color-emerald-light:#34d399;
/* Verdes SOLO para el botón primario: sobre ellos el texto blanco alcanza el
   contraste 4,5:1 de WCAG AA (5,5:1 y 6,5:1). No usar para acentos ni texto. */
--color-emerald-btn:#047857;
--color-emerald-btn-hover:#036b4c;
--gradient-brand:linear-gradient(135deg,#10b981,#34d399);
--color-cord-1:#10b981;
--color-cord-2:#38bdf8;
--color-cord-3:#a855f7;
--color-success:#10b981;
--color-warning:#f59e0b;
--color-error:#ef4444;
--color-bg-dark:#09090b;
--color-surface-dark:#161619;
--color-surface-2-dark:#1f1f23;
--color-border-dark:rgba(255,255,255,.09);
--color-border-strong-dark:rgba(255,255,255,.16);
--color-text-dark-hi:#ededed;
--color-text-dark-lo:#a1a1aa;
--color-text-dark-faint:#6f7178;
--color-emerald-glow-dark:rgba(16,185,129,.16);
--shadow-price:0 30px 60px -30px rgba(0,0,0,.35);
--shadow-btn-primary:0 8px 24px -8px rgba(16,185,129,.16);
--shadow-btn-primary-hover:0 12px 30px -8px rgba(16,185,129,.4);
--font-sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-mono:"Cascadia Code","JetBrains Mono",Consolas,monospace;
--radius-key:7px;
--radius-button:12px;
--radius-card:16px;
--radius-price:22px;
--ease-standard:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg-dark);color:var(--color-text-dark-hi);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--color-emerald)}
a:hover{color:var(--color-emerald-strong)}
:focus-visible{outline:2px solid var(--color-emerald);outline-offset:2px;border-radius:6px}

/* ---- Animaciones ---- */
@keyframes dictaclick-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes dictaclick-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes dictaclick-caret{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html{scroll-behavior:auto}
}

/* ---- Botones (hover compilado de style-hover) ----
   El fondo del botón primario es un verde MÁS OSCURO que el emerald de la marca
   (#10b981): blanco sobre #10b981 da 2,54:1 de contraste y no pasa WCAG AA, que
   pide 4,5:1 para texto normal. #047857 da 5,5:1 y #036b4c (hover) 6,5:1, sin
   salirse de la familia esmeralda. El emerald de marca se sigue usando en todo
   lo demás (bordes, acentos, iconos), donde va sobre fondo oscuro y sí cumple. */
.btn-p{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-sans);font-weight:600;cursor:pointer;border:none;border-radius:var(--radius-button);background:var(--color-emerald-btn);color:#fff;box-shadow:var(--shadow-btn-primary);transition:background .18s,box-shadow .2s,transform .12s}
.btn-p:hover{background:var(--color-emerald-btn-hover);box-shadow:var(--shadow-btn-primary-hover);color:#fff}
.btn-p:active{transform:scale(.975)}
/* Botón inhabilitado (p. ej. la Store mientras no exista la ficha): se ve
   apagado, no responde al puntero y el lector de pantalla lo anuncia. */
.btn-off{background:var(--color-surface-2-dark)!important;color:var(--color-text-dark-faint)!important;box-shadow:none!important;cursor:default;pointer-events:none}
.btn-off::after{display:none}
.btn-g{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-sans);font-weight:600;cursor:pointer;border-radius:var(--radius-button);background:var(--color-surface-2-dark);color:var(--color-text-dark-hi);border:1px solid var(--color-border-dark);transition:border-color .2s,color .2s,transform .12s}
.btn-g:hover{border-color:var(--color-emerald);color:var(--color-emerald)}
.btn-g:active{transform:scale(.975)}
.lnk{text-decoration:none;color:var(--color-emerald);transition:color .18s}
.lnk:hover{color:var(--color-emerald-strong)}
.lnk-mut{text-decoration:none;color:var(--color-text-dark-lo);transition:color .18s}
.lnk-mut:hover{color:var(--color-emerald)}

/* ---- Nav ---- */
.nav-link{text-decoration:none;font-family:var(--font-sans);font-size:14px;font-weight:500;transition:color .18s;white-space:nowrap;color:var(--color-text-dark-lo)}
.nav-link:hover{color:var(--color-emerald)}
.nav-link.active{color:var(--color-emerald)}

/* ---- Menú móvil ----
   El botón lo inyecta site.js en cada <nav>; aquí solo vive su apariencia. En
   escritorio no existe visualmente. Antes, bajo 760px, .nav-links simplemente
   desaparecía y el sitio se quedaba sin navegación en móvil. */
.nav-burger{display:none;flex:none;width:42px;height:38px;padding:0;border:1px solid var(--color-border-dark);border-radius:10px;background:var(--color-surface-2-dark);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav-burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--color-text-dark-hi);transition:transform .2s var(--ease-standard),opacity .2s}
.nav-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .nav-burger span:nth-child(2){opacity:0}
.nav-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:760px){
.nav-links{display:none!important}
.nav-burger{display:inline-flex}
/* La barra la arman estilos EN LÍNEA en los 12 HTML (gap:24px, padding:0 24px).
   Al sumar el botón de menú, en pantallas de 320–360 px el logo + "Suscribirme"
   + el botón ya no caben y la página se desbordaba en horizontal. Se aprieta la
   barra con !important, que es lo único que gana contra un estilo en línea. */
nav{gap:8px!important;padding-left:14px!important;padding-right:14px!important}
nav .btn-p{font-size:13px!important;padding:9px 13px!important}
/* El logo también se encoge en móvil. Los tres elementos visibles de la barra
   (logo, botón de menú y "Suscribirme") llevan flex:none, así que ninguno cede
   y basta con que uno crezca para desbordar la página entera.
   Pasó el 2026-08-06: el rebrand alargó la marca de "Dictalo" a "DictaClick" y
   se comió el margen que quedaba — 24px de desborde a 360px. No se veía en
   Windows porque Segoe UI es más estrecha; sí en el CI (Ubuntu) y en Android,
   que es el mercado. Por eso el ancho del logo se controla aquí y no se deja
   al azar de la fuente del sistema. */
nav [data-track="nav_logo"] > span{gap:7px!important}
nav [data-track="nav_logo"] > span > span:nth-child(1){width:26px!important;height:26px!important}
nav [data-track="nav_logo"] > span > span:nth-child(2){font-size:19px!important}
}

/* Pantallas muy angostas (320–400px: iPhone SE y Android de gama baja, que en
   LatAm siguen circulando). La barra pierde lo prescindible antes que romperse:
   primero la flecha del CTA, que es decorativa y solo la lleva la home — es la
   que hacía a index.html desbordar 24px más que el resto. */
@media (max-width:400px){
nav{gap:6px!important;padding-left:10px!important;padding-right:10px!important}
nav .btn-p svg{display:none}
nav .btn-p{font-size:12px!important;padding:8px 11px!important}
nav [data-track="nav_logo"] > span > span:nth-child(1){width:24px!important;height:24px!important}
nav [data-track="nav_logo"] > span > span:nth-child(2){font-size:17px!important}
/* El panel se despliega bajo la barra: la barra pegajosa es el bloque
   contenedor, así que left/right:0 lo hace de ancho completo. */
nav.nav-open .nav-links{display:flex!important;position:absolute;left:0;right:0;top:64px;flex-direction:column;align-items:stretch;gap:0;padding:6px 24px 14px;background:rgba(9,9,11,.98);border-bottom:1px solid var(--color-border-dark);box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
nav.nav-open .nav-links .nav-link{padding:14px 2px;font-size:16px;border-bottom:1px solid var(--color-border-dark)}
nav.nav-open .nav-links .nav-link:last-child{border-bottom:none}
}

/* ---- Tarjetas con hover ---- */
.card-h{transition:border-color .2s,transform .2s}
.card-h:hover{border-color:var(--color-border-strong-dark)!important;transform:translateY(-3px)}
.card-hb:hover{border-color:var(--color-emerald)!important}

/* ---- Responsive ---- */
@media (max-width:860px){
.footer-grid{grid-template-columns:1fr 1fr!important}
.grid-3-steps{grid-template-columns:1fr!important}
.sup-grid{grid-template-columns:1fr!important}
}
@media (max-width:560px){
.footer-grid{grid-template-columns:1fr!important}
.grid-cards{grid-template-columns:1fr!important}
}

/* ---- Keycap del atajo ---- */
.keycap{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:13px;font-weight:600;padding:5px 12px;border-radius:var(--radius-key);color:var(--color-text-dark-hi);background:linear-gradient(180deg,rgba(255,255,255,.07),var(--color-surface-2-dark));border:1px solid var(--color-border-strong-dark);border-bottom-width:2px}

/* ---- Inputs ---- */
.inp{background:var(--color-surface-2-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-key);padding:11px 14px;color:var(--color-text-dark-hi);font-family:var(--font-mono);font-size:14px;transition:border-color .15s,box-shadow .15s;width:100%}
.inp:focus{outline:none;border-color:var(--color-emerald);box-shadow:0 0 0 3px var(--color-emerald-glow-dark)}
.inp::placeholder{color:var(--color-text-dark-faint)}

/* ---- Punto vivo ---- */

/* ---- Switch de facturación (Mensual / Anual) ---- */
.bill-toggle{display:inline-flex;align-items:center;gap:4px;background:var(--color-surface-2-dark);border:1px solid var(--color-border-dark);border-radius:999px;padding:4px;position:relative}
.bill-opt{appearance:none;border:none;background:none;cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:14px;color:var(--color-text-dark-lo);padding:8px 18px;border-radius:999px;transition:color .2s var(--ease-standard);position:relative;z-index:1;white-space:nowrap}
/* aria-pressed, no aria-selected: aria-selected exige role=tab dentro de un
   tablist con su tabpanel, y aquí no hay paneles — son dos botones que cambian
   el precio de la misma tarjeta. */
.bill-opt[aria-pressed="true"]{color:#fff}
.bill-opt:hover:not([aria-pressed="true"]){color:var(--color-text-dark-hi)}
/* Píldora deslizante que marca la opción activa */
.bill-thumb{position:absolute;top:4px;bottom:4px;border-radius:999px;background:var(--color-emerald);box-shadow:var(--shadow-btn-primary);transition:left .28s var(--ease-standard),width .28s var(--ease-standard);z-index:0}
/* Mini badge de descuento pegado a la pestaña "Anual" (siempre visible: deja
   claro que el descuento es del anual, aun antes de hacer clic). */
.bill-tab-badge{margin-left:7px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--color-emerald);background:var(--color-emerald-glow-dark);border:1px solid rgba(16,185,129,.3);padding:2px 6px;border-radius:999px;vertical-align:middle;transition:color .2s,background .2s,border-color .2s}
.bill-opt[aria-pressed="true"] .bill-tab-badge{color:#fff;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.32)}

/* ---- Acordeón de FAQ ----
   El `cursor:pointer` va en línea sobre la tarjeta completa, pero solo la
   pregunta abre y cierra: se corrige para que el puntero no prometa clic sobre
   el texto de la respuesta. */
.js-faq-item{cursor:default!important}
.js-faq-q{cursor:pointer}
.js-faq-q:focus-visible{outline:2px solid var(--color-emerald);outline-offset:4px;border-radius:6px}

/* Callout DEBAJO del switch. Altura reservada para que la tarjeta no salte al
   cambiar de plan. En Mensual = empujón sutil; en Anual = premio destacado. */
.bill-callout{min-height:24px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13.5px}
.bill-callout-nudge{color:var(--color-text-dark-lo)}
.bill-callout-reward{display:inline-flex;align-items:center;gap:7px;color:var(--color-emerald);font-weight:700}
.bill-callout-reward svg{flex:none}
@keyframes bill-reward-in{from{opacity:0;transform:translateY(-5px) scale(.95)}to{opacity:1;transform:none}}
.bill-callout-reward.in{animation:bill-reward-in .34s var(--ease-standard)}

/* Precio anterior tachado y equivalencia mensual del plan anual */
.price-was{color:var(--color-text-dark-faint);text-decoration:line-through;text-decoration-thickness:1.5px;font-size:20px;font-weight:600}
.price-sub{transition:opacity .2s var(--ease-standard)}
@media (prefers-reduced-motion:reduce){.bill-thumb{transition:none}.bill-callout-reward.in{animation:none}}

/* ============================================================
   Animaciones premium (CSS puro — cero peso extra)
   ============================================================ */

/* Revelado al hacer scroll: los bloques suben con fade la primera vez */
.rev{opacity:0;transform:translateY(16px);transition:opacity .65s var(--ease-standard),transform .65s var(--ease-standard)}
.rev.in{opacity:1;transform:none}

/* CTA primario: barrido de luz sutil al pasar el mouse */
.btn-p{position:relative;overflow:hidden}
.btn-p::after{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn-p:hover::after{left:120%}

/* Keycaps del hero: se "presionan" solos cada pocos segundos (guiño al producto) */
@keyframes key-tap{0%,88%,100%{transform:none;box-shadow:none}92%{transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}}
.keycap-anim{animation:key-tap 4.2s ease-in-out infinite}
.keycap-anim.k2{animation-delay:.18s}

/* Onda ambiental del hero */
.hero-wave{position:absolute;left:0;right:0;bottom:-8px;width:100%;height:110px;opacity:.5;pointer-events:none}

/* ============================================================
   DEMO EN VIVO — barras de audio + tecla de micrófono
   Todo se enciende con .is-live, que site.js pone en #demo-mock
   mientras el texto se está "dictando".
   ============================================================ */

/* Resplandor detrás del mock */
/* Sin z-index negativo: quedaría detrás del fondo de la página y no se vería.
   Va primero en el DOM, así que la ventana (position:relative) se pinta encima. */
.demo-glow{position:absolute;inset:-24px;pointer-events:none;opacity:.6;
background:radial-gradient(circle,rgba(16,185,129,.35),transparent 70%)}

/* --- Cursor de texto --- */
.demo-caret{display:inline-block;width:2px;height:19px;margin-left:2px;vertical-align:-3px;
background:var(--color-emerald);animation:dictaclick-caret 1.1s steps(1) infinite}

/* --- Barras de audio --- */
.demo-wave{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:40px;margin-top:22px}
/* --dur y --del los pone site.js, distintos por barra: ese desfase hace la ola */
.demo-wave span{width:4px;border-radius:999px;background:rgba(16,185,129,.7);height:20%;opacity:.35;
transform-origin:center bottom;transition:height .3s var(--ease-standard),opacity .3s}
.is-live .demo-wave span{opacity:1;animation:demo-wave-kf var(--dur,.8s) ease-in-out var(--del,0s) infinite}
@keyframes demo-wave-kf{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* Etiqueta de estado dentro de la ventana */
#demo-estado{color:var(--color-text-dark-faint);letter-spacing:.08em;transition:color .25s}
.is-live #demo-estado{color:var(--color-emerald)}

/* --- Tecla flotante con micrófono --- */
.mic-key-wrap{position:absolute;right:-14px;bottom:-30px;display:flex;flex-direction:column;align-items:center;gap:9px}
.mic-key-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:var(--color-text-dark-faint);background:rgba(22,22,25,.9);backdrop-filter:blur(8px);padding:4px 9px;border-radius:6px;white-space:nowrap}
.mic-key{position:relative;display:grid;place-items:center;width:78px;height:78px;border-radius:20px;
background:var(--color-surface-dark);border:1px solid var(--color-border-strong-dark);color:var(--color-text-dark-hi);
box-shadow:0 6px 0 #050506,0 14px 40px -8px rgba(16,185,129,.35);
transition:transform .14s var(--ease-standard),box-shadow .14s var(--ease-standard),color .14s,border-color .14s}
/* presionada: se hunde y se vuelve emerald */
.is-live .mic-key{transform:translateY(4px);color:var(--color-emerald);border-color:rgba(16,185,129,.5);
box-shadow:0 2px 0 #050506,0 6px 26px -4px rgba(16,185,129,.55)}

/* Halo que LATE con el volumen de la voz: site.js escribe --vol (0..1) en cada
   cuadro a partir de window.__demoVoice. No es un bucle fijo — el micrófono
   responde a lo que se está "hablando", como en la app real. */
.mic-key::after{content:"";position:absolute;inset:-10px;border-radius:26px;pointer-events:none;
background:radial-gradient(circle,rgba(16,185,129,.5),transparent 70%);opacity:0;transform:scale(.88)}
.is-live .mic-key::after{opacity:calc(var(--vol,0) * .95);transform:scale(calc(.88 + var(--vol,0) * .28))}
/* el icono también respira un pelín */
.is-live .mic-key svg{transform:scale(calc(1 + var(--vol,0) * .09))}
.mic-key svg{transition:transform .06s linear}

/* Anillos que se expanden mientras escucha */
.mic-ring{position:absolute;inset:0;border-radius:20px;border:2px solid var(--color-emerald);opacity:0;pointer-events:none}
.is-live .mic-ring{animation:mic-ring-kf 1.6s ease-out infinite}
.is-live .mic-ring.r2{animation-delay:.55s}
@keyframes mic-ring-kf{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.9);opacity:0}}

@media (max-width:640px){
.mic-key-wrap{right:50%;transform:translateX(50%);bottom:-34px}
.mic-key{width:64px;height:64px;border-radius:17px}
.mic-ring{border-radius:17px}
}

/* ---- Con "reducir movimiento" activo ----
   El demo ES la demostración del producto: si se congela, el visitante no
   entiende qué vende la página. Así que NO lo apagamos del todo — dejamos el
   movimiento pequeño y localizado (texto que se escribe, barras de audio) y
   quitamos lo que de verdad molesta: el escalado repetitivo de los anillos.
   Además site.js hace UNA sola pasada en vez del loop infinito, para cumplir
   con WCAG 2.2.2 (nada en movimiento perpetuo por más de 5 s). */
@media (prefers-reduced-motion:reduce){
.rev{opacity:1!important;transform:none!important;transition:none!important}
.keycap-anim{animation:none!important}
.mic-ring{display:none}                      /* esto sí se va: escala en bucle */
/* el halo del micrófono se queda: late en brillo, no en tamaño */
.is-live .mic-key::after{transform:scale(.88)!important}
.is-live .mic-key svg{transform:none!important}
/* rescatamos el demo de la regla global `*{animation-duration:.001ms!important}` */
.is-live .demo-wave span{animation-duration:var(--dur,.8s)!important;animation-iteration-count:infinite!important}
.demo-caret{animation-duration:1.1s!important;animation-iteration-count:infinite!important}
.demo-wave span,.mic-key{transition-duration:.3s!important}
.btn-p::after{display:none}
}