/* ==========================================================
   DIEGO LUCAS ARQUITECTO
   estilos.css

   Sistema de diseño:
   - Fondo negro absoluto, la misma lógica de la loading page
     extendida a todo el sitio (sin corte entre carga y contenido).
   - Dos carriles de servicio distinguidos por color:
     cian de plano (Arquitectura) / ámbar sello (Regularizaciones).
   - Firma visual: el triángulo imposible de la marca, animado
     como si se estuviera dibujando en un plano.
========================================================== */

:root{

    /* ---- Paleta (dark) ---- */
    --ink: #f4f3ef;
    --ink-soft: #c9c8c2;
    --paper: #0b0b0d;
    --paper-alt: #17181b;
    --graphite: #98979c;
    --line: rgba(244,243,239,0.10);
    --line-strong: rgba(244,243,239,0.20);

    --blueprint: #74c4e8;
    --blueprint-soft: rgba(116,196,232,0.10);
    --stamp: #d9a45f;
    --stamp-soft: rgba(217,164,95,0.10);

    /* ---- Tipografia ---- */
    --f-display: "Space Grotesk", "Arial Narrow", sans-serif;
    --f-body: "Inter", -apple-system, sans-serif;
    --f-mono: "IBM Plex Mono", "Courier New", monospace;

    /* ---- Layout ---- */
    --w-max: 1180px;
    --pad: clamp(1.25rem, 4vw, 3rem);
    --radius: 2px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *, *::before, *::after{
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

html, body{
    /* red de seguridad: nada debería desbordar horizontalmente,
       pero si algún elemento se pasa por poco, esto evita la
       barra de scroll horizontal y el contenido cortado */
    max-width: 100%;
    overflow-x: hidden;
}

body{
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

:focus-visible{
    outline: 2px solid var(--blueprint);
    outline-offset: 3px;
}

.envoltorio{
    max-width: var(--w-max);
    margin: 0 auto;
    padding: 0 var(--pad);
}

h1,h2,h3{
    font-family: var(--f-display);
    font-weight: 600;
    line-height: 1.08;
    margin: 0;
    letter-spacing: -0.01em;
}

.etiqueta{
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--graphite);
}

.etiqueta::before{
    content: "// ";
    color: var(--line-strong);
}


/* =========================
   GRANO / TEXTURA DE FONDO
========================= */

.grano{
    position: fixed;
    inset: 0;
    z-index: 998;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

@media (prefers-reduced-motion: reduce){
    .grano{ opacity: 0.035; }
}


/* =========================
   CURSOR PERSONALIZADO
========================= */

.cursor-punto,
.cursor-anillo{ display: none; }

@media (hover: hover) and (pointer: fine){

    body.cursor-personalizado{ cursor: none; }

    body.cursor-personalizado .cursor-punto,
    body.cursor-personalizado .cursor-anillo{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        border-radius: 50%;
        pointer-events: none;
        z-index: 997;
        transform: translate(-50%, -50%);
    }

    body.cursor-personalizado .cursor-punto{
        width: 6px;
        height: 6px;
        background: var(--ink);
        transition: transform 0.15s ease, background 0.2s ease, opacity 0.2s ease;
    }

    body.cursor-personalizado .cursor-anillo{
        width: 34px;
        height: 34px;
        border: 1px solid var(--line-strong);
        transition: width 0.25s cubic-bezier(.16,.9,.2,1), height 0.25s cubic-bezier(.16,.9,.2,1),
                    border-color 0.25s ease, background 0.25s ease;
    }

    body.cursor-personalizado .cursor-anillo.hover{
        width: 56px;
        height: 56px;
        border-color: var(--blueprint);
        background: var(--blueprint-soft);
    }

    body.cursor-personalizado .cursor-punto.hover{
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}


/* =========================
   BARRA DE NAVEGACION
========================= */

.nav{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11,11,13,0.78);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.nav .envoltorio{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.nav-marca{
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.nav-marca img{
    height: 30px;
    width: auto;
}

.nav-marca .texto{
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.15;
}

.nav-marca .texto small{
    display: block;
    font-family: var(--f-mono);
    font-weight: 400;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: var(--graphite);
}

.nav-links{
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

.nav-links a{
    font-size: 0.85rem;
    font-weight: 500;
    position: relative;
    padding: 4px 0;
}

.nav-links a::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.nav-links a:hover::after{ transform: scaleX(1); }

.nav-cta{
    display: none;
}

@media (min-width: 720px){
    .nav-cta{ display: inline-flex; }
}

.nav-toggle{
    display: none;
    background: none;
    border: 1px solid var(--line-strong);
    padding: 8px 10px;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    cursor: pointer;
}

@media (max-width: 719px){
    .nav-links{
        position: fixed;
        inset: 72px 0 0 0;
        background: var(--paper);
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem var(--pad);
        gap: 1.4rem;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .nav-links.abierto{
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .nav-links a{ font-size: 1.1rem; }
    .nav-toggle{ display: inline-flex; }
}


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

.boton{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.85rem 1.4rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    white-space: nowrap;
}

.boton:hover{ transform: translateY(-2px); }

.boton-primario{
    background: var(--ink);
    color: var(--paper);
}
.boton-primario:hover{ box-shadow: 0 10px 24px -8px rgba(22,23,26,0.45); }

.boton-linea{
    background: transparent;
    border-color: var(--line-strong);
    color: var(--ink);
}
.boton-linea:hover{ border-color: var(--ink); }

.boton-azul{ background: var(--blueprint); color: #fff; }
.boton-azul:hover{ box-shadow: 0 10px 24px -8px rgba(46,92,134,0.5); }

.boton-ambar{ background: var(--stamp); color: #fff; }
.boton-ambar:hover{ box-shadow: 0 10px 24px -8px rgba(184,132,58,0.5); }

.boton-whatsapp{
    background: #f4f3ef;
    border-color: var(--line-strong);
    color: #16171a;
    font-size: 0.82rem;
    padding: 0.6rem 1.05rem;
}


/* =========================
   HERO
========================= */

.hero{
    position: relative;
    padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem);
    overflow: hidden;
}

.hero-grid{
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 80% 60% at 60% 20%, #000 40%, transparent 85%);
    opacity: 0.7;
}

.hero .envoltorio{
    position: relative;
    z-index: 1;
}

.hero-copy{ max-width: 640px; }

.hero-copy .etiqueta{ margin-bottom: 1rem; display: block; }

.hero-copy h1{
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    max-width: 14ch;
}

.hero-copy h1 em{
    font-style: normal;
    color: var(--blueprint);
}

.hero-copy p{
    margin: 1.25rem 0 0;
    color: var(--ink-soft);
    max-width: 42ch;
    font-size: 1.02rem;
}

.hero-ctas{
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

.hero-zona{
    margin-top: 1.6rem;
    font-family: var(--f-mono);
    font-size: 0.74rem;
    color: var(--graphite);
    letter-spacing: 0.04em;
}

.hero-scroll{
    position: absolute;
    left: 50%;
    bottom: clamp(1.2rem, 3vw, 2.2rem);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    z-index: 2;
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--graphite);
}

.hero-scroll-linea{
    width: 1px;
    height: 34px;
    background: var(--line-strong);
    position: relative;
    overflow: hidden;
}

.hero-scroll-linea::after{
    content: "";
    position: absolute;
    left: 0; top: -100%;
    width: 100%; height: 100%;
    background: var(--ink);
    animation: bajarTrazo 1.8s ease-in-out infinite;
}

@keyframes bajarTrazo{
    0%{ top: -100%; }
    60%{ top: 100%; }
    100%{ top: 100%; }
}

@media (prefers-reduced-motion: reduce){
    .hero-scroll-linea::after{ animation: none; top: 0; }
}

@media (max-width: 640px){
    .hero-scroll{ display: none; }
}


/* =========================
   NAV DE CAPÍTULOS
========================= */

.capitulos-nav{
    position: fixed;
    right: clamp(0.8rem, 2.4vw, 2rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.85rem;
}

.capitulos-progreso{
    position: absolute;
    top: 0.35rem;
    bottom: 2.6rem;
    right: 4px;
    width: 1px;
    background: var(--line);
}

.capitulos-progreso-relleno{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--blueprint);
    transform-origin: top center;
    transform: scaleY(var(--progreso, 0));
    transition: transform 0.1s linear;
}

@media (prefers-reduced-motion: reduce){
    .capitulos-progreso-relleno{ transition: none; }
}

.capitulos-nav a{
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    color: var(--graphite);
}

.capitulos-nav a .num{
    font-weight: 500;
    color: var(--graphite);
    transition: color 0.2s ease;
}

.capitulos-nav a .etiqueta-cap{
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 0.25s ease, opacity 0.2s ease;
}

.capitulos-nav a:hover .etiqueta-cap,
.capitulos-nav a.activo .etiqueta-cap{
    max-width: 160px;
    opacity: 1;
}

.capitulos-nav a.activo .num{
    color: var(--ink);
    font-weight: 600;
}

@keyframes pulsoCapitulo{
    0%{ text-shadow: 0 0 0 rgba(116,196,232,0); }
    35%{ text-shadow: 0 0 8px rgba(116,196,232,0.85); }
    100%{ text-shadow: 0 0 0 rgba(116,196,232,0); }
}

.capitulos-nav a .num.pulso{
    animation: pulsoCapitulo 0.9s ease;
}

@media (prefers-reduced-motion: reduce){
    .capitulos-nav a .num.pulso{ animation: none; }
}

.capitulos-inicio{
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--line);
    font-size: 0.66rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 900px){
    .capitulos-nav{ display: none; }
}

@keyframes aparecer{
    from{ opacity: 0; transform: scale(0.94); }
    to{ opacity: 1; transform: scale(1); }
}


/* =========================
   LOADING PAGE
========================= */

.loader{
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.9s cubic-bezier(.4,0,.2,1);
}

.loader.oculto{
    opacity: 0;
    pointer-events: none;
}

.loader-pieza{
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(260px, 60vw);
    height: min(260px, 60vw);
    margin: calc(min(260px, 60vw) / -2) 0 0 calc(min(260px, 60vw) / -2);
    transition: transform 1.6s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}

.loader-pieza svg{
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    transition: transform 1.6s cubic-bezier(.22,1,.36,1);
    transform-origin: center;
}

/* misma paleta que img/logo-oscuro.png (la versión del isotipo
   para fondo oscuro): blanco, gris y casi negro, no un gris plano */
.loader-pieza--d path{ fill: #f2f1ee; }
.loader-pieza--l path{ fill: #8c8c8e; }
.loader-pieza--a path{ fill: #35353a; }

/* al descomponerse, cada pieza viaja a su propio lugar, gira
   y se estira levemente para acercarse a su inicial: D · L · A.
   --dx/--dy/--sx/--sy/--rot los calcula js/loader.js midiendo
   dónde termina cada letra en el título de una sola línea. */
.loader.descompuesto .loader-pieza{
    transform: translate(var(--dx, 0px), var(--dy, 0px));
}

.loader.descompuesto .loader-pieza svg{
    transform: rotate(var(--rot, 0deg)) scale(var(--sx, 1), var(--sy, 1));
}

.loader-contorno{
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(260px, 60vw);
    height: min(260px, 60vw);
    margin: calc(min(260px, 60vw) / -2) 0 0 calc(min(260px, 60vw) / -2);
    transition: opacity 0.5s ease;
}

.loader-contorno svg{ width: 100%; height: 100%; overflow: visible; }

.trazo-neon{
    fill: none;
    stroke: #8fe3ff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 190 2100;
    filter: drop-shadow(0 0 4px #bdf1ff) drop-shadow(0 0 16px #4fb8e0);
    animation: recorridoNeon 2.6s linear infinite;
}

.trazo-neon--2{ animation-delay: -0.9s; }
.trazo-neon--3{ animation-delay: -1.8s; }

@keyframes recorridoNeon{
    to{ stroke-dashoffset: -2290; }
}

.loader.descompuesto .loader-contorno{
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
    .loader-contorno{ display: none; }
}

.loader-titulo-caja{
    position: relative;
    display: inline-block;
}

.loader-titulo{
    position: relative;
    z-index: 1;
    display: block;
    white-space: nowrap;
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: 0.01em;
    font-size: clamp(2.1rem, 8vw, 4.3rem);
    color: #f4f4f2;
}

/* cada palabra (letra-hueco + resto) va en su propio span para
   poder apilarlas en columna en mobile sin tocar loader.js: mide
   por getBoundingClientRect, así que se adapta solo a donde
   termine quedando cada hueco, sea una fila o tres */
.loader-palabra{ display: inline-block; }

/* en celular, en vertical: "Diego / Lucas / Arquitecto" en tres
   líneas en vez de una sola achicada — más legible y con más
   presencia. En horizontal se mantiene la línea única. */
@media (max-width: 640px) and (orientation: portrait){

    .loader-titulo{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        white-space: normal;
        gap: 0.1em;
        font-size: clamp(2.2rem, 13vw, 3.6rem);
    }

    .loader-titulo .loader-espacio{ display: none; }

}

.loader-subrayado{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.2em;
    height: 1.5px;
    overflow: hidden;
}

.loader-subrayado-brillo{
    position: absolute;
    top: 0;
    left: -25%;
    width: 22%;
    height: 100%;
    border-radius: 2px;
    background: #8fe3ff;
    box-shadow: 0 0 3px #bdf1ff, 0 0 12px #4fb8e0;
    opacity: 0;
}

.loader.descompuesto .loader-subrayado-brillo{
    animation: pasarDeLargo 1.1s cubic-bezier(.3,0,.2,1) 2.6s 1 both;
}

@keyframes pasarDeLargo{
    0%{ left: -25%; opacity: 0; }
    8%{ opacity: 1; }
    88%{ opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
    .loader-subrayado-brillo{ animation: none; }
}

.loader-slot{
    display: inline-block;
    width: 1.35em;
    height: 1.8em;
    vertical-align: -0.42em;
}

.loader-texto{
    opacity: 0;
    transition: opacity 0.9s ease;
    transition-delay: 1.7s;
}

.loader-espacio{
    display: inline-block;
    width: 0.4em;
}

.loader.descompuesto .loader-texto{ opacity: 1; }

body.cargando{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
    .loader-pieza{ transition: none; }
    .loader-pieza svg{ transition: none; }
    .loader-texto{ transition: opacity 0.3s ease; transition-delay: 0s; }
}


/* =========================
   MARCA DE AGUA DE FONDO
========================= */

.marca-agua{
    position: fixed;
    top: 18%;
    left: 50%;
    width: min(56vw, 560px);
    aspect-ratio: 541 / 616;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
}

.marca-agua-svg{ width: 100%; height: 100%; overflow: visible; }

.marca-brazo{
    fill: var(--ink);
    opacity: 0.055;
    transform-box: fill-box;
    transform-origin: center;
}

.marca-letra{
    position: absolute;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--graphite);
    opacity: 0;
}

.marca-letra--d{ top: 58%; right: 6%; }
.marca-letra--l{ top: 58%; left: 6%; }
.marca-letra--a{ top: 4%; left: 46%; }

@media (max-width: 860px){
    .marca-agua{ display: none; }
}

@media (prefers-reduced-motion: reduce){
    .marca-agua{ display: none; }
}


/* =========================
   REVEAL AL SCROLL
========================= */

.revelar{
    opacity: 0;
    transform: translateY(34px) scale(0.98);
    transition: opacity 0.9s cubic-bezier(.16,.9,.2,1), transform 0.9s cubic-bezier(.16,.9,.2,1);
}

.revelar.visible{
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
    .revelar{ opacity: 1; transform: none; }
}

/* cascada en tarjetas, lista regulatoria y canales de contacto */

.revelar .tarjeta,
.revelar .lista-regulatoria li,
.revelar .contacto-canal,
.revelar .testimonio-tarjeta{
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(.16,.9,.2,1), transform 0.7s cubic-bezier(.16,.9,.2,1);
}

.revelar.visible .tarjeta,
.revelar.visible .lista-regulatoria li,
.revelar.visible .contacto-canal,
.revelar.visible .testimonio-tarjeta{
    opacity: 1;
    transform: translateY(0);
}

.revelar.visible .tarjeta:nth-child(1),
.revelar.visible .lista-regulatoria li:nth-child(1),
.revelar.visible .contacto-canal:nth-child(1),
.revelar.visible .testimonio-tarjeta:nth-child(1){ transition-delay: 0.08s; }

.revelar.visible .tarjeta:nth-child(2),
.revelar.visible .lista-regulatoria li:nth-child(2),
.revelar.visible .contacto-canal:nth-child(2),
.revelar.visible .testimonio-tarjeta:nth-child(2){ transition-delay: 0.18s; }

.revelar.visible .tarjeta:nth-child(3),
.revelar.visible .lista-regulatoria li:nth-child(3),
.revelar.visible .contacto-canal:nth-child(3),
.revelar.visible .testimonio-tarjeta:nth-child(3){ transition-delay: 0.28s; }

.revelar.visible .lista-regulatoria li:nth-child(4),
.revelar.visible .testimonio-tarjeta:nth-child(4){ transition-delay: 0.38s; }
.revelar.visible .lista-regulatoria li:nth-child(5){ transition-delay: 0.48s; }
.revelar.visible .lista-regulatoria li:nth-child(6){ transition-delay: 0.58s; }
.revelar.visible .lista-regulatoria li:nth-child(7){ transition-delay: 0.68s; }

@media (prefers-reduced-motion: reduce){
    .revelar .tarjeta,
    .revelar .lista-regulatoria li,
    .revelar .contacto-canal,
    .revelar .testimonio-tarjeta{ opacity: 1; transform: none; transition-delay: 0s !important; }
}


/* =========================
   TITULOS CON REVELADO POR PALABRA
========================= */

.titulo-reveal .palabra{
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

.titulo-reveal .interior{
    display: inline-block;
    transform: translateY(112%);
    transition: transform 0.85s cubic-bezier(.16,.9,.2,1);
    transition-delay: calc(var(--i, 0) * 0.055s);
}

.titulo-reveal.visible .interior{ transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
    .titulo-reveal .interior{ transition: none; transform: none; }
}


/* =========================
   ENTRADA DEL HERO
========================= */

.hero-copy > *{
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.8s cubic-bezier(.16,.9,.2,1), transform 0.8s cubic-bezier(.16,.9,.2,1);
}

.hero-copy > h1{
    opacity: 1;
    transform: none;
    transition: none;
}

.hero-copy.visible > *{ opacity: 1; transform: translateY(0); }

.hero-copy > .etiqueta{ transition-delay: 0s; }
.hero-copy > p{ transition-delay: 0.5s; }
.hero-copy > .hero-ctas{ transition-delay: 0.62s; }
.hero-copy > .hero-zona{ transition-delay: 0.72s; }

@media (prefers-reduced-motion: reduce){
    .hero-copy > *{ transition: none; opacity: 1; transform: none; }
}


/* =========================
   SECCIONES GENERALES
========================= */

.section{
    position: relative;
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    border-top: 1px solid var(--line);
}

/* linea que "se dibuja" de izquierda a derecha al entrar a cada
   capitulo, marcando la transicion entre uno y el siguiente */
.section::before{
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--blueprint), transparent 60%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.2s cubic-bezier(.65,0,.35,1);
    pointer-events: none;
}

.revelar.visible::before{ transform: scaleX(1); }

/* numero de capitulo grande, fantasma, de fondo */
.capitulo-marca{
    position: absolute;
    z-index: -1;
    top: clamp(-1.6rem, -3vw, -0.6rem);
    right: clamp(0.8rem, 4vw, 3rem);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(6rem, 15vw, 12rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-strong);
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.3s cubic-bezier(.16,.9,.2,1), transform 1.3s cubic-bezier(.16,.9,.2,1);
    pointer-events: none;
    user-select: none;
}

.revelar.visible .capitulo-marca{
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 780px){
    .capitulo-marca{ display: none; }
}

@media (prefers-reduced-motion: reduce){
    .section::before{ transition: none; transform: scaleX(1); }
    .capitulo-marca{ transition: none; opacity: 1; transform: none; }
}

.section-encabezado{
    max-width: 640px;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.capitulo-num{
    display: block;
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--graphite);
    opacity: 0.6;
    margin-bottom: 0.4rem;
}

.section-encabezado .etiqueta{ margin-bottom: 0.9rem; display: block; }

.section-encabezado h2{
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}

.section-encabezado p{
    margin-top: 0.9rem;
    color: var(--ink-soft);
    max-width: 48ch;
}

.section--intro .envoltorio{
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 780px){
    .section--intro .envoltorio{ grid-template-columns: 1fr; }
}

.intro-texto p{
    margin: 0 0 1.1rem;
    color: var(--ink-soft);
    font-size: 1.02rem;
}

.intro-texto p:last-child{ margin-bottom: 0; }


/* =========================
   CARRILES (arquitectura / habilitaciones)
========================= */

.track-blueprint{ background: linear-gradient(180deg, var(--blueprint-soft), transparent 65%); }
.track-stamp{ background: linear-gradient(180deg, var(--stamp-soft), transparent 65%); }

.track-blueprint .etiqueta{ color: var(--blueprint); }
.track-blueprint .etiqueta::before{ color: var(--blueprint); opacity: 0.5; }
.track-stamp .etiqueta{ color: var(--stamp); }
.track-stamp .etiqueta::before{ color: var(--stamp); opacity: 0.5; }

.tarjetas{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}

@media (max-width: 900px){
    .tarjetas{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
    .tarjetas{ grid-template-columns: 1fr; }
}

.tarjeta{
    background: var(--paper-alt);
    border: 1px solid var(--line);
    padding: 1.6rem 1.5rem;
    border-radius: var(--radius);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta:hover{ transform: translateY(-3px); }

.track-blueprint .tarjeta:hover{ border-color: var(--blueprint); }
.track-stamp .tarjeta:hover{ border-color: var(--stamp); }

.tarjeta .glifo{
    width: 26px;
    height: 26px;
    margin-bottom: 1rem;
    opacity: 0.85;
}

.tarjeta h3{
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.tarjeta p{
    margin: 0;
    font-size: 0.92rem;
    color: var(--graphite);
}

.lista-regulatoria{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 2rem;
    list-style: none;
    margin: 0 0 2.2rem;
    padding: 0;
}

@media (max-width: 700px){
    .lista-regulatoria{ grid-template-columns: 1fr; }
}

.lista-regulatoria li{
    display: flex;
    gap: 0.7rem;
    align-items: baseline;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.96rem;
}

.lista-regulatoria li .marca{
    color: var(--stamp);
    font-family: var(--f-mono);
    font-size: 0.8rem;
}

.track-cta{
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.track-cta p{
    margin: 0;
    font-size: 0.9rem;
    color: var(--graphite);
}


/* =========================
   TESTIMONIOS
========================= */

.testimonios-resumen{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-bottom: 2rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--line);
}

.testimonios-estrellas{
    color: var(--stamp);
    font-size: 1.15rem;
    letter-spacing: 0.1em;
}

.testimonios-nota{
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.15rem;
}

.testimonios-google{
    font-family: var(--f-mono);
    font-size: 0.78rem;
    color: var(--graphite);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 1px;
}

.testimonios-google:hover{ color: var(--ink); border-color: var(--ink); }

.testimonios-lista{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
    margin-bottom: 2.4rem;
}

@media (max-width: 780px){
    .testimonios-lista{ grid-template-columns: 1fr; }
}

.testimonio-tarjeta{
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.testimonio-encabezado{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem 1rem;
}

.testimonio-autor{
    min-width: 0;
    word-break: break-word;
}

.testimonio-autor{
    font-weight: 600;
    font-size: 0.95rem;
}

.testimonio-fuente{
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--graphite);
    white-space: nowrap;
}

.testimonio-estrellas{
    color: var(--stamp);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
}

.testimonio-texto{
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
}

.testimonio-fecha{
    font-family: var(--f-mono);
    font-size: 0.7rem;
    color: var(--graphite);
}

.testimonios-cta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-top: 0.4rem;
}

.testimonios-cta p{
    margin: 0;
    font-size: 0.92rem;
    color: var(--graphite);
    flex-basis: 100%;
}


/* =========================
   FORMULARIO DE HABILITACION
========================= */

.section--form{
    background: var(--paper-alt);
    color: var(--ink);
    border-top: 1px solid var(--line);
}

.section--form .etiqueta{ color: #9fb7cc; }
.section--form .etiqueta::before{ color: #9fb7cc; opacity: 0.6; }

.section--form .section-encabezado h2{ color: #fff; }
.section--form .section-encabezado p{ color: #c7c6c1; }

.formulario{
    background: #1d1e22;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.form-paso{
    padding-bottom: 1.8rem;
    margin-bottom: 1.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.form-paso:last-of-type{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.form-paso .num{
    font-family: var(--f-mono);
    font-size: 0.75rem;
    color: #9fb7cc;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.3rem;
}

.form-paso h3{
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 1.1rem;
}

.grilla-campos{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.2rem;
}

@media (max-width: 640px){
    .grilla-campos{ grid-template-columns: 1fr; }
}

.campo{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.campo.ancho-completo{ grid-column: 1 / -1; }

.campo label{
    font-size: 0.78rem;
    color: #b9b8b4;
    font-family: var(--f-mono);
    letter-spacing: 0.02em;
}

.campo input,
.campo select,
.campo textarea{
    background: #121315;
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    padding: 0.65rem 0.75rem;
    border-radius: 2px;
    font-family: var(--f-body);
    font-size: 0.92rem;
    resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus{
    outline: none;
    border-color: #9fb7cc;
}

.formulario-resena{
    max-width: 640px;
    margin-bottom: 1.6rem;
}

.dropzone{
    border: 1.5px dashed rgba(255,255,255,0.22);
    border-radius: 2px;
    padding: 1.1rem 0.9rem;
    text-align: center;
    cursor: pointer;
    font-size: 0.82rem;
    color: #b9b8b4;
    transition: border-color 0.2s ease, background 0.2s ease;
    position: relative;
}

.dropzone:hover, .dropzone.activo{
    border-color: #9fb7cc;
    background: rgba(159,183,204,0.06);
}

.dropzone input[type="file"]{
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.dropzone .nombre-archivo{
    display: block;
    margin-top: 0.4rem;
    color: #fff;
    font-family: var(--f-mono);
    font-size: 0.76rem;
    word-break: break-all;
}

.form-envio{
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.form-mensaje{
    font-size: 0.88rem;
    font-family: var(--f-mono);
}

.form-mensaje[data-estado="ok"]{ color: #7fd7a0; }
.form-mensaje[data-estado="error"]{ color: #e08b7a; }
.form-mensaje[data-estado="cargando"]{ color: #9fb7cc; }


/* =========================
   CONTACTO
========================= */

.contacto-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 780px){
    .contacto-grid{ grid-template-columns: 1fr; }
}

.contacto-canal{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--line);
}

.contacto-canal .glifo{
    width: 20px; height: 20px;
    margin-top: 3px;
    flex-shrink: 0;
}

.contacto-canal strong{ display: block; font-size: 0.95rem; }
.contacto-canal span{ color: var(--graphite); font-size: 0.88rem; }

.mini-form{
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.mini-form input,
.mini-form textarea{
    border: 1px solid var(--line-strong);
    background: var(--paper-alt);
    padding: 0.75rem 0.85rem;
    border-radius: 2px;
    font-family: var(--f-body);
    font-size: 0.92rem;
    color: var(--ink);
}

.mini-form input:focus,
.mini-form textarea:focus{
    outline: none;
    border-color: var(--blueprint);
}


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

footer{
    border-top: 1px solid var(--line);
    padding: 2.2rem 0;
}

footer .envoltorio{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-marca{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--f-mono);
    font-size: 0.78rem;
    color: var(--graphite);
}

.footer-marca img{ height: 20px; }