/* ============================================================
   DICTALO — 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;
--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 dictalo-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes dictalo-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes dictalo-caret{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes dictalo-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
@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) ---- */
.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);color:#fff;box-shadow:var(--shadow-btn-primary);transition:background .18s,box-shadow .2s,transform .12s}
.btn-p:hover{background:var(--color-emerald-strong);box-shadow:var(--shadow-btn-primary-hover);color:#fff}
.btn-p:active{transform:scale(.975)}
.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)}
@media (max-width:760px){.nav-links{display:none!important}}

/* ---- 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 ---- */
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--color-emerald);animation:dictalo-pulse 2.2s ease-in-out infinite;flex: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}

@media (prefers-reduced-motion:reduce){
.rev{opacity:1!important;transform:none!important;transition:none!important}
.keycap-anim{animation:none!important}
.btn-p::after{display:none}
}