/* =========================================================
   DUCREA Group — capa PRO (prototipo con scroll)
   Mismos textos, mismos colores. Solo forma, ritmo y movimiento.
   ========================================================= */
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
::selection{background:var(--ambar);color:var(--azul-profundo)}

/* ---------- tipografía: escala más firme ---------- */
h1,h2{letter-spacing:-0.035em;font-weight:800}
h2{font-size:clamp(36px,5vw,68px);line-height:1.02;text-wrap:balance}
h3{text-wrap:balance}
.lead{text-wrap:pretty}
.kicker{font-size:14px;letter-spacing:.01em;display:inline-flex;align-items:center;gap:12px}
.kicker:before{content:"";width:28px;height:2px;background:currentColor;opacity:.9}
.final .head .kicker{justify-content:center}

/* ---------- barra de progreso ---------- */
.pro-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--ambar),var(--azul-claro));pointer-events:none}

/* ---------- header ---------- */
header.solid{background:rgba(12,24,36,.92);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}

nav a:not(.btn){position:relative}
nav a:not(.btn):after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--ambar);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
nav a:not(.btn):hover:after,nav a.act:after{transform:scaleX(1)}
nav a.act{color:#fff}

/* ---------- botones ---------- */
.btn{border-radius:999px;padding:16px 28px;letter-spacing:.005em}
.btn-line{backdrop-filter:blur(6px);background:rgba(255,255,255,.04)}
.btn-line:hover{background:rgba(255,255,255,.1)}

/* ---------- hero ---------- */
.hero{min-height:100svh}
.hero h1{font-size:clamp(44px,6.8vw,104px);line-height:.98;max-width:13ch}
.hero .wrap{max-width:1360px}
.hero .veil:after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(transparent,rgba(12,24,36,.9))}
.hero .iso{will-change:transform}
.pro-on .hero video,.pro-on .hero .pro-txt,.pro-on .hero .iso{will-change:transform,opacity}

/* ---------- qué hacemos ---------- */
.tres{border-top:0;position:relative}
.tres:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(12,24,36,.12);transform-origin:left;transform:scaleX(var(--line,1))}
.tres .verb{font-size:clamp(30px,3.4vw,46px)}
.tres>div{transition:background .4s}
.tres>div:hover .verb{color:var(--azul)}
.tres .verb{transition:color .35s}

/* ---------- la ruta (momento firma) ---------- */
#ruta{position:relative;overflow:hidden}
#ruta:before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 50% 100%,rgba(18,114,214,.16),transparent 70%);pointer-events:none}
.ruta .track{height:4px;border-radius:4px}
.ruta .track .fill{border-radius:4px;box-shadow:0 0 18px rgba(242,177,56,.45)}
.paso .dot{transition:transform .45s cubic-bezier(.2,.7,.2,1),background .45s,box-shadow .45s}
.paso h3,.paso .sub,.paso .n{transition:color .45s,opacity .45s}
/* modo fijo (escritorio): la línea avanza y cada paso se enciende */
.pro-pin .ruta .track .fill{transition:none}
.pro-pin .paso{cursor:default}
.pro-pin .paso h3{color:rgba(255,255,255,.38)}
.pro-pin .paso .sub{opacity:.45}
.pro-pin .paso .n{opacity:.5}
.pro-pin .paso.lit h3{color:#fff}
.pro-pin .paso.lit .sub,.pro-pin .paso.lit .n{opacity:1}
.pro-pin .paso.lit .dot{background:var(--ambar);transform:translate(-50%,0) scale(1.3);box-shadow:0 0 0 8px rgba(242,177,56,.16),0 0 30px rgba(242,177,56,.5)}
.pro-pin .paso ul{max-height:none;overflow:visible}
.pro-pin .paso li{opacity:0;transform:translateY(10px);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
.pro-pin .paso.lit li{opacity:1;transform:none}
.pro-pin .paso.lit li:nth-child(2){transition-delay:.04s}.pro-pin .paso.lit li:nth-child(3){transition-delay:.08s}.pro-pin .paso.lit li:nth-child(4){transition-delay:.12s}.pro-pin .paso.lit li:nth-child(5){transition-delay:.16s}.pro-pin .paso.lit li:nth-child(6){transition-delay:.2s}.pro-pin .paso.lit li:nth-child(7){transition-delay:.24s}.pro-pin .paso.lit li:nth-child(8){transition-delay:.28s}.pro-pin .paso.lit li:nth-child(9){transition-delay:.32s}
.pro-pin .paso li{padding:5px 0;font-size:13.5px}
.ruta-pin{position:relative}
.pro-pin .ruta-pin{padding-top:13px}
.pro-pin #ruta{padding-top:0}
.ruta-stage{position:relative;height:100vh}
.ruta-stage>.two{position:absolute;left:0;right:0;top:0;display:block}
.ruta-stage>.two h2{max-width:26ch;font-size:clamp(44px,5vw,72px)}
.ruta-stage>.two .lead{margin-top:28px}
.ruta-stage>.ruta-pin{position:absolute;left:0;right:0;top:250px;margin:0}
.pro-pin #ruta .ruta{margin-top:0}
.pro-pin #ruta .ruta{margin-top:40px}

/* ---------- diferenciador ---------- */
.mesa div{border-radius:14px;padding:26px 10px;backdrop-filter:blur(4px);background:rgba(255,255,255,.02)}

/* ---------- para quién ---------- */
.perfil{border-radius:18px;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.perfil:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(12,24,36,.08)}

/* ---------- proyectos: galería horizontal fija ---------- */
.caso{border-radius:16px}
.h-pin{position:relative}
.h-on .h-pin{height:100vh;box-sizing:border-box;padding:92px 0 24px;display:flex;flex-direction:column;justify-content:center;overflow:visible}
.h-on .h-pin .casos{display:flex;gap:24px;width:max-content;margin-top:44px;will-change:transform}
.h-on .h-pin .caso{width:clamp(300px,27vw,400px);flex:none}
.h-on .h-pin .caso .cuerpo{min-height:0}
.h-on .h-pin .two{width:min(100%,1200px)}
.h-on .h-pin .two h2{font-size:clamp(34px,4.2vw,58px)}
.h-meta{display:none}
.h-on .h-meta{display:flex;align-items:center;gap:16px;margin-top:30px;color:#5b6672;font-size:13px;font-weight:700}
.h-meta .bar{flex:0 0 220px;height:3px;background:rgba(12,24,36,.1);border-radius:3px;overflow:hidden}
.h-meta .bar i{display:block;height:100%;width:100%;background:var(--azul);transform-origin:left;transform:scaleX(0)}
#proyectos{overflow:hidden}
.h-on #proyectos .h-pin .casos .caso{box-shadow:0 18px 40px rgba(12,24,36,.06)}

/* ---------- testimonios ---------- */
.testi{border-radius:20px;padding:26px}
.testi .retrato{border-radius:14px}

/* ---------- logos ---------- */
.logo{border-radius:14px}

/* ---------- nosotros ---------- */
.nos figure img{border-radius:16px}
.nos .cifra{border-radius:14px}
.nos .marcas{border-radius:22px;position:relative;overflow:hidden}
.nos .marcas:before{content:"";position:absolute;right:-10%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(18,114,214,.22),transparent 60%);pointer-events:none}
.nos .tl .eje{transform-origin:left}
.nos .tl .eje{background:linear-gradient(90deg,var(--ambar),var(--azul-claro));height:3px;border-radius:3px}

/* ---------- cómo trabajamos ---------- */
.vcard{border-radius:18px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.vcard:hover{transform:translateY(-6px)}
.modo{border-radius:18px}

/* ---------- formularios ---------- */
.form,.guia-card{border-radius:22px}
.form input,.form textarea,.guia-form input,.guia-form select{border-radius:12px}

/* ---------- movimiento accesible ---------- */
@media(prefers-reduced-motion:reduce){.pro-progress{display:none}}
@media(max-width:1023px){.h-meta{display:none!important}}

/* =========================================================
   SERVICIOS
   ========================================================= */
.svc-split .incluye .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,80px);align-items:start}
.svc-split .incluye .cab{display:block;position:sticky;top:120px}
.svc-split .incluye .cab h2{font-size:clamp(34px,3.6vw,52px);margin-bottom:24px}
.svc-split .incluye .tarjetas{margin-top:0;grid-template-columns:1fr 1fr}
.incluye .tarjeta{transition:border-color .45s,box-shadow .45s,transform .45s cubic-bezier(.2,.7,.2,1);border-radius:16px}
.svc-split .incluye .tarjeta{opacity:.55;transition:opacity .45s,border-color .45s,box-shadow .45s,transform .45s cubic-bezier(.2,.7,.2,1)}
.svc-split .incluye .tarjeta.act{opacity:1;border-color:var(--ambar);box-shadow:0 26px 50px rgba(12,24,36,.10);transform:translateY(-3px)}
.svc-cnt{display:flex;align-items:center;gap:16px;margin-top:28px}
.svc-now{font-weight:800;font-size:clamp(34px,3vw,46px);letter-spacing:-.03em;color:var(--azul-noche);min-width:2.4ch;font-variant-numeric:tabular-nums}
.svc-bar{flex:1;max-width:240px;height:3px;border-radius:3px;background:rgba(12,24,36,.1);overflow:hidden}
.svc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ambar),var(--azul));transform-origin:left;transform:scaleX(0)}
.camino{position:relative;border-radius:18px}
.camino-linea{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--azul-claro),var(--ambar));transform-origin:left;transform:scaleX(0);z-index:1}
.modo,.navprod .pn a,.entrega .caja{border-radius:18px}
.pos li a,.pos .capa a,.navprod .lista a{border-radius:12px}

/* =========================================================
   CASOS
   ========================================================= */
.hero-caso .marco{will-change:transform;border-radius:16px}
.hicimos-grid .tarjeta{border-radius:16px;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.hicimos-grid .tarjeta:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(12,24,36,.09)}

/* =========================================================
   PORTADA: isotipo que viene del fondo en 3D (31-oct, v2)
   ========================================================= */
.hero .iso .iso-3d{grid-area:1/1;width:100%;height:100%;display:grid;place-items:center;transform-style:preserve-3d;will-change:transform,opacity,filter}
.hero .iso .iso-3d img{width:78%}
@media(max-width:560px){.hero .iso .iso-3d img{width:84%}}