/* Estilos comunes: colores, botones, tipografía y animaciones.
   Cada bloque tiene sus estilos propios en assets/css/<nombre>.css. */
/* =========================================================
   TRIDENTE — estilos
   1. Tokens  2. Base  3. Botones  4. Navbar + menú mobile
   5. Hero  6. Features  7. Proyectos  8. Simulador
   9. Proceso  10. CTA  11. Footer  12. Responsive
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
    --bg-main: #0B0F14;
    --bg-surface: #13171F;
    --bg-card: #0c0f14;
    --text-main: #ffffff;
    --text-muted: #8b95a5;
    --accent: #fc3065;
    --accent-hover: #ff3358;
    --border-color: #1f2633;
    --border-strong: rgba(255, 255, 255, 0.2);

    --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --gutter: clamp(20px, 5vw, 64px);
    --section-y: clamp(64px, 10vw, 112px);
    --nav-h: 72px;
}

/* ---------- 2. BASE ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ELIMINADO: scroll-behavior: smooth; nativo para no interferir con el JS */
html {
    scroll-padding-top: calc(var(--nav-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
body.no-scroll { overflow: hidden; }

/* Glow ambiental: fixed + acotado al ancho de pantalla (antes causaba scroll horizontal en el celu) */
body::before {
    content: '';
    position: fixed;
    top: 0; right: 0;
    width: min(800px, 100vw); height: 800px;
    background: radial-gradient(circle, rgba(255, 77, 109, 0.08) 0%, rgba(11, 15, 20, 0) 70%);
    z-index: -1;
    pointer-events: none;
}

/* El padding horizontal vive SOLO en .container; las secciones usan padding-block.
   (Antes .section-padding pisaba el padding lateral y el contenido tocaba los bordes en mobile.) */
.container {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button { font-family: inherit; }

.text-accent { color: var(--accent); }

/* Texto solo para lectores de pantalla y buscadores (ej: títulos h2 que no se muestran). */
.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 300;
    background: var(--accent); color: var(--bg-main);
    padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: 12px; }

.overline { display: flex; align-items: center; gap: 12px; color: #d6dae1; font-size: .8rem; font-weight: 600; letter-spacing: 1.5px; margin-bottom: 16px; text-transform: uppercase; }
.overline .line { width: 32px; height: 2px; background: var(--accent); }

.section-header { text-align: center; margin-bottom: clamp(36px, 6vw, 60px); }
.section-header h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
.section-header p { color: var(--text-muted); font-size: 1.05rem; max-width: 600px; margin-inline: auto; }

/* ---------- 3. BOTONES ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; min-height: 48px;
    font-weight: 600; font-size: 0.95rem; line-height: 1.2;
    border-radius: var(--radius-sm); border: 1px solid transparent;
    cursor: pointer; white-space: nowrap;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.btn-pill { border-radius: 40px; }
.btn-block { width: 100%; }
/* texto oscuro sobre el rosa: contraste ~6:1 (el blanco quedaba en ~3:1) */
.btn-primary { background: var(--accent); color: var(--bg-main); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 77, 109, 0.3); }
.btn-primary:active { transform: translateY(0); }
.btn-outline { background: transparent; color: var(--text-main); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--text-main); background: rgba(255, 255, 255, 0.05); }


@media (max-width: 768px)  {
    :root { --nav-h: 64px; }
}

/* Reducir movimiento (accesibilidad), versión equilibrada:
   - Se quita lo que DESPLAZA o ESCALA elementos (entradas con translate/scale, saltos del formulario, scroll suave).
   - Se mantiene lo suave: fades, hovers, flotación lenta de piezas decorativas y chispas.
   Así el sitio no se ve estático, pero no marea a quien tiene la opción activada. */
@media (prefers-reduced-motion: reduce)  {
    html { scroll-behavior: auto; }

    /* Las cosas aparecen en su lugar (solo fade, sin viajar ni escalar) */
    .mantequita-reveal,
    .step-section,
    .step-section.is-before,
    .field-error,
    .stepper-progress.is-swapping { transform: none !important; }
    .option-label,
    .step-actions { translate: none !important; }
}

/* Beneficios compartidos entre Inicio y Nosotros. */
.features-bar {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
    padding-bottom: clamp(48px, 7vw, 80px); border-bottom: 1px solid var(--border-color);
}
.feature-item { display: flex; gap: 16px; align-items: flex-start; }
.feature-icon { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.feature-item h3 { font-size: 1rem; margin-bottom: 6px; }
.feature-item p { font-size: 0.9rem; color: var(--text-muted); }


@media (max-width: 1024px)  {
    .features-bar { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- ANIMACIONES QUESITO / MANTEQUITA ---------- */
.mantequita-reveal {
    opacity: 0;
    transform: translateY(35px) scale(0.98);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.mantequita-reveal.active {
    opacity: 1;
    transform: none;
}

/* El simulador contiene el panel sticky: nada de transform/scale ahí (rompe el sticky y titila) */
.simulator-layout.mantequita-reveal { transform: none; }

/* Cascada para que aparezcan uno por uno */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ---------- Footer: datos legales (CUIT, privacidad, Defensa del Consumidor) ---------- */
.footer-legal {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px 32px; padding-block: 20px;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem; color: var(--text-muted);
}
.footer-legal p { margin: 0; }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; }
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition); }
.footer-legal a:hover { color: var(--text-main); }