/* ==========================================================
   NEXORA by STC — v4 "Ficha técnica"
   Papel técnico claro, tinta, y el dorado del logo como línea
   de precisión. Las secciones .band-ink invierten los tokens.
   ========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    /* Superficies */
    --paper:#EEEEE8;
    --paper-2:#E4E4DC;
    --panel:#F7F7F3;
    --ink:#15131B;
    --ink-2:#1E1B26;

    /* Tokens semánticos (se invierten dentro de .band-ink) */
    --bg:var(--paper);
    --bg-secondary:var(--paper-2);
    --fg:#15131B;
    --fg-2:#3D3945;
    --fg-3:#6E6977;
    --line:rgba(21,19,27,.13);
    --line-strong:rgba(21,19,27,.34);
    --accent:#A8843F;
    --accent-rgb:168,132,63;
    --on-accent:#F7F7F3;

    /* Alias heredados por el resto de hojas */
    --white:var(--fg);
    --text:var(--fg);
    --gray:var(--fg-3);
    --gray-light:var(--fg-2);
    --border:var(--line);
    --border-strong:var(--line-strong);
    --primary:#4B36B3;
    --primary-light:#4B36B3;

    --font-sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-serif:"Sora", "Manrope", system-ui, sans-serif;
    --font-mono:"Manrope", system-ui, sans-serif;

    --gutter:clamp(16px, 5vw, 80px);
    --max:1320px;
    --ease:cubic-bezier(.2,.7,.1,1);

    color-scheme:light;
}

/* Secciones en tinta: mismos componentes, tokens invertidos */
.band-ink,
.footer{
    --bg:var(--ink);
    --bg-secondary:var(--ink-2);
    --fg:#F1F0EA;
    --fg-2:#CFCBD6;
    --fg-3:#9D98A7;
    --line:rgba(241,240,234,.12);
    --line-strong:rgba(241,240,234,.3);
    --accent:#D8B77A;
    --accent-rgb:216,183,122;
    --on-accent:#15131B;
    --primary-light:#B8A4F5;
    color-scheme:dark;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

body{
    background:var(--paper);
    color:var(--fg);
    font-family:var(--font-sans);
    font-size:17px;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    font-variant-numeric:lining-nums;
}

a{ color:inherit; }

::selection{
    background:var(--ink);
    color:var(--paper);
}

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

/* Acento: la misma familia en peso ligero, sin color */
em{
    font-style:normal;
    font-weight:300;
    color:var(--fg-3);
}

.mono{
    font-size:11px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-variant-numeric:tabular-nums;
}

main > section{
    position:relative;
    width:100%;
    max-width:var(--max);
    margin:0 auto;
    padding:clamp(90px, 11vw, 150px) var(--gutter);
    color:var(--fg);
}

/* Bandas a todo lo ancho */
main > section.band,
main > section.band-ink{
    background:var(--bg);
    box-shadow:0 0 0 100vmax var(--bg);
    clip-path:inset(0 -100vmax);
}

main > section.band{
    --bg:var(--paper-2);
}

/* Marcas de corte en las esquinas (como un plano impreso) */
.crop{
    background-image:
        linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
    background-repeat:no-repeat;
    background-size:16px 1.5px, 1.5px 16px, 16px 1.5px, 1.5px 16px, 16px 1.5px, 1.5px 16px, 16px 1.5px, 1.5px 16px;
    background-position:0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}

/* ========================= */
/*     TÍTULOS DE SECCIÓN    */
/* ========================= */

.eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:26px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--fg-2);
    font-variant-numeric:tabular-nums;
}

.eyebrow::before{
    content:"";
    width:8px;
    height:8px;
    background:var(--accent);
    transform:rotate(45deg);
    flex:none;
}

.section-head{
    max-width:900px;
    margin-bottom:clamp(46px, 6vw, 80px);
}

.section-head h2,
.quote-intro h2{
    font-family:var(--font-serif);
    font-size:clamp(32px, 4.2vw, 58px);
    font-weight:600;
    line-height:1.04;
    letter-spacing:-.03em;
    text-wrap:balance;
}

.section-lead{
    margin-top:20px;
    max-width:560px;
    color:var(--fg-3);
    font-size:18px;
}

/* ========================= */
/*          BOTONES          */
/* ========================= */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:16px 26px;
    border:1.5px solid transparent;
    border-radius:4px;
    font-family:var(--font-sans);
    font-size:15px;
    font-weight:700;
    letter-spacing:.01em;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
}

.btn-primary{
    background:var(--fg);
    color:var(--bg);
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:6px 6px 0 var(--accent);
}

.btn-ghost{
    background:transparent;
    color:var(--fg);
    border-color:var(--line-strong);
}

.btn-ghost:hover{
    border-color:var(--fg);
    transform:translateY(-2px);
}

.btn-arrow{
    display:inline-block;
    transition:transform .3s var(--ease);
}

.btn:hover .btn-arrow{ transform:translateX(4px); }

.link-arrow{
    color:var(--fg);
    font-weight:600;
    text-decoration:none;
    border-bottom:1.5px solid var(--accent);
    padding-bottom:2px;
    transition:color .25s;
}

.link-arrow:hover{ color:var(--accent); }

.dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#2E9E5B;
    flex:none;
    animation:pulse 2s infinite;
}

/* ========================= */
/*     WHATSAPP FLOTANTE     */
/* ========================= */

.wa-float{
    position:fixed;
    right:20px;
    bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    z-index:900;
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:var(--ink);
    color:#F1F0EA;
    box-shadow:4px 4px 0 #25D366;
    transition:transform .3s var(--ease), box-shadow .3s;
}

.wa-float:hover{
    transform:translate(-2px, -2px);
    box-shadow:6px 6px 0 #25D366;
}

/* ========================= */
/*          FOOTER           */
/* ========================= */

.footer{
    background:var(--bg);
    color:var(--fg-3);
    box-shadow:0 0 0 100vmax var(--bg);
    clip-path:inset(0 -100vmax);
    max-width:var(--max);
    margin:0 auto;
    padding:60px var(--gutter) calc(36px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--line);
}

.footer .logo{ color:var(--fg); }

.footer-top{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:50px;
    padding-bottom:56px;
}

.footer-brand p{
    max-width:320px;
    margin-top:18px;
}

.footer-cols{
    display:flex;
    flex-wrap:wrap;
    gap:80px;
}

.footer-cols h4{
    margin-bottom:16px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--fg-3);
}

.footer-cols a{
    display:block;
    margin-bottom:10px;
    color:var(--fg-2);
    text-decoration:none;
    transition:color .2s;
}

.footer-cols a:hover{ color:var(--accent); }

.footer-bottom{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
    padding-top:26px;
    border-top:1px solid var(--line);
    font-size:14px;
}