:root{
  --background:#ffffff; --foreground:#111111;
  --ink:#000000;
  --muted:#8d8d8d; --subtle:#b6b6b6;
  --line:#e7e7e7;
  --surface:#f4f3f1; --surface-2:#e7e7e7;
  --accent:#F26118; --accent-from:#ff7d3f; --accent-to:#d24e0c;
  --accent-on-dark:#ff7d3f;
  --accent-2:#1051DB; --accent-2-bright:#4C82FF;
  --hero-from:#ececea; --hero-to:#0b0b0d;
  --radius-pill:9999px; --radius-card:2rem; --radius-card-sm:1.25rem; --radius-control:.875rem;
  --text-watermark:13rem; --container-shell:88rem;
  --e-line:cubic-bezier(.215,.61,.355,1);
  --e-word:cubic-bezier(.165,.84,.44,1);
  --e-spring:cubic-bezier(.22,1,.36,1);
  --e-snappy:cubic-bezier(.2,.8,.2,1);
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; -webkit-font-smoothing:antialiased; scroll-behavior:smooth }
body{ background:var(--background); color:var(--foreground); font-family:'Montserrat',sans-serif; overflow-x:hidden; line-height:1.6 }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img{ display:block; max-width:100% }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0; pointer-events:none }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

@media (max-width:1920px){ html{ font-size:0.833333vw } }
@media (max-width:1440px){ html{ font-size:1.111111vw } }
@media (max-width:1024px){ html{ font-size:1.5625vw } }
@media (max-width:640px){  html{ font-size:4.444444vw } }

.shell{ max-width:var(--container-shell); margin-inline:auto }
.ic{ width:1em; height:1em; display:inline-block; vertical-align:middle; flex:none }

/* ---- logotipos Devon ---- */
.brand .logo-full{ height:2.6rem; width:auto; display:block }
.loader-logo{ gap:0 } .loader-logo .logo-full{ height:2.5rem; width:auto }
.foot-brand .b{ gap:0 } .foot-brand .b .logo-full{ height:2.9rem; width:auto }
.navmenu-brand{ gap:0 } .navmenu-brand .logo-full{ height:2.6rem; width:auto }
.logo-sym{ object-fit:contain }
.herocard-tile .logo-sym{ width:2.5rem; height:2.5rem }
.work-wm .logo-sym{ width:4.5rem; height:4.5rem; opacity:.14 }
.modal-success .badge .logo-sym{ width:1.7rem; height:1.7rem }
.postcard-media .logo-sym{ width:2.6rem; height:2.6rem; opacity:.5 }
.proj-cover .logo-sym{ width:4rem; height:4rem; opacity:.5 }

/* reveals */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--e-line), transform .8s var(--e-line) }
.reveal.tf10{ transform:translateY(10px) } .reveal.tf12{ transform:translateY(12px) } .reveal.tf14{ transform:translateY(14px) }
.reveal.tf16{ transform:translateY(16px) scale(.96) } .reveal.tf20{ transform:translateY(20px) } .reveal.tf24{ transform:translateY(24px) }
.reveal.tf28{ transform:translateY(28px) } .reveal.tf40{ transform:translateY(40px) scale(.99) } .reveal.tf48{ transform:translateY(48px) }
.reveal.fade{ transform:none } .reveal.in{ opacity:1; transform:none }
.lines .line{ display:block; overflow:hidden }
.lines .line > span{ display:block; transform:translateY(105%); opacity:0; transition:transform .9s var(--e-line), opacity .9s var(--e-line) }
.lines.in .line > span{ transform:none; opacity:1 }
.words w{ display:inline-block; transform:translateY(24px); opacity:0; transition:transform .7s var(--e-word), opacity .7s var(--e-word) }
.words.in w{ transform:none; opacity:1 }

/* pill */
.pill{ display:inline-block }
.pill > span{ display:inline-flex; align-items:center; gap:.75rem; border-radius:var(--radius-pill); font-size:.95rem; font-weight:600; transition:transform .35s var(--e-snappy) }
.pill:hover > span{ transform:scale(1.04) }
.pill.dark > span{ background:var(--ink); color:#fff } .pill.light > span{ background:var(--surface); color:#111 }
.pill.outline > span{ border:1px solid var(--line); background:transparent; color:#111 }
.pill.arw > span{ padding:.375rem .375rem .375rem 1.5rem } .pill.noarw > span{ padding:.875rem 1.75rem }
.pill .badge{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:var(--radius-pill); font-size:1rem }
.pill.dark .badge{ background:#fff; color:var(--ink) } .pill.light .badge, .pill.outline .badge{ background:var(--ink); color:#fff }
.pill .badge .ic{ transition:transform .35s var(--e-snappy) }
.pill.arw-right:hover .badge .ic{ transform:translate(3px,0) } .pill.arw-up:hover .badge .ic{ transform:translate(2px,-2px) }

.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.95rem; font-weight:600; color:rgba(17,17,17,.7) }
.eyebrow::before{ content:""; width:.375rem; height:.375rem; border-radius:var(--radius-pill); background:rgba(17,17,17,.5) }
.eyebrow.light{ color:rgba(255,255,255,.7) } .eyebrow.light::before{ background:rgba(255,255,255,.6) }
.eyebrow.boxed{ border:1px solid var(--line); border-radius:var(--radius-pill); padding:.375rem 1rem }

/* loader */
.loader{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem; background:var(--ink); color:#fff; border-radius:0 0 2rem 2rem; transition:transform .7s var(--e-spring) }
.loader.gone{ transform:translateY(-100%) }
.loader-center{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; transition:opacity .55s ease, transform .55s ease }
.loader.gone .loader-center{ opacity:0; transform:translateY(-12px) }
.loader-logo{ display:flex; align-items:center; justify-content:center }
.loader-logo .logo-sym{ width:3.4rem; height:3.4rem }
.loader-tag{ max-width:15ch; font-weight:700; font-size:clamp(30px,5.4vw,60px); line-height:1.08; letter-spacing:-.02em; color:#fff; text-align:center }
.loader-prog{ width:min(22rem,72vw); display:flex; flex-direction:column; gap:.75rem }
.loader-track{ height:1px; background:rgba(255,255,255,.15) }
.loader-fill{ height:100%; background:var(--accent-on-dark); width:0%; transition:width .1s ease-out }
.loader-meta{ display:flex; justify-content:space-between; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.45) }
.loader-count{ color:rgba(255,255,255,.8); font-variant-numeric:tabular-nums }
@media (min-width:640px){ .loader-logo{ font-size:1.875rem } }

.skip{ position:fixed; left:1rem; top:1rem; z-index:130; border-radius:.875rem; background:var(--ink); padding:.5rem 1rem; font-size:.875rem; color:#fff; transform:translateY(-160%); transition:transform .2s }
.skip:focus-visible{ transform:none }

/* header */
.hdr{ position:absolute; inset-inline:0; top:0; z-index:50; opacity:0; transform:translateY(-14px); transition:opacity .7s var(--e-spring), transform .7s var(--e-spring) }
.hdr.in{ opacity:1; transform:none }
.hdr-solid{ position:sticky; background:rgba(255,255,255,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--line) }
.hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem }
.brand{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:700; letter-spacing:-.01em }
.brand > span{ display:inline-flex; align-items:center; gap:.5rem; transition:transform .35s var(--e-snappy) }
.brand:hover > span{ transform:scale(1.04) }
.brand .ic{ font-size:1.25rem; color:var(--accent) }
.nav{ display:none }
.nav ul{ display:flex; gap:1.6rem; font-size:1.1rem; font-weight:500 }
.nav a,.nav button{ display:inline-flex; align-items:center; gap:.25rem }
.nav span:first-child{ display:inline-block; transition:transform .3s var(--e-snappy), opacity .3s; opacity:.85 }
.nav a:hover span,.nav button:hover span{ transform:translateY(-2px); opacity:1 }
.nav [aria-current] span{ opacity:1; color:var(--accent) }
/* Header sobre el hero oscuro (home): texto claro */
body[data-page="home"] .hdr:not(.hdr-solid) .brand{ color:#fff }
body[data-page="home"] .hdr:not(.hdr-solid) .nav{ color:#fff }
.hdr-right{ display:flex; align-items:center; gap:.75rem }
.clock{ display:none; align-items:center; gap:.75rem; border:1px solid rgba(231,231,231,.9); background:rgba(255,255,255,.4); backdrop-filter:blur(4px); border-radius:.875rem; padding:.5rem .75rem; font-size:.75rem; color:rgba(17,17,17,.7) }
.clock .lbl{ color:rgba(17,17,17,.45) } .clock .t{ min-width:3.25rem; font-variant-numeric:tabular-nums; font-weight:500; color:#111 } .clock .sep{ color:rgba(17,17,17,.3) } .clock .d{ font-weight:500 }
.cta-call{ display:inline-flex; align-items:center; gap:.5rem; background:var(--accent); color:#fff; border-radius:.875rem; padding:.55rem .85rem; font-size:.82rem; font-weight:600; white-space:nowrap; transition:background .25s, transform .25s }
.cta-call:hover{ background:#ff7d3f; transform:translateY(-1px) }
.cta-call .ic{ font-size:1.1rem }
.cta-call-label{ display:none }
@media (min-width:1280px){ .cta-call-label{ display:inline } }
.menu-btn{ border:1px solid rgba(231,231,231,.9); background:rgba(255,255,255,.4); backdrop-filter:blur(4px); border-radius:.875rem; transition:background .3s } .menu-btn:hover{ background:rgba(255,255,255,.7) }
body[data-page="home"] .hdr:not(.hdr-solid) .menu-btn{ color:#fff }
.menu-btn > span{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; transition:transform .35s var(--e-snappy) } .menu-btn:hover > span{ transform:scale(1.05) }
.menu-btn .word{ display:none }
@media (min-width:640px){ .menu-btn .word{ display:inline } }
@media (min-width:768px){ .clock{ display:flex } }
@media (min-width:1024px){ .nav{ display:flex } }

/* hero */
.hero{ position:relative; isolation:isolate; overflow:hidden; border-radius:0 0 2rem 2rem; background:var(--hero-to) }
.lr{ position:absolute; inset:0; z-index:0; background:#05060a }
.lr img, .lr video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
/* video base: se tiñe de azul con filtro; el canvas revela el color original (naranja) */
.lr-base{ filter:hue-rotate(232deg) saturate(1.55) brightness(.95) contrast(1.05) }
.lr canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.vignette{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, rgba(0,0,0,.55)) }
.wm{ pointer-events:none; position:absolute; inset-inline:0; bottom:7rem; z-index:1; text-align:center; user-select:none; font-weight:800; line-height:1; font-size:var(--text-watermark); color:rgba(255,255,255,.14); opacity:0; transform:translateY(20px); transition:opacity .8s var(--e-spring), transform .8s var(--e-spring) }
.wm.in{ opacity:1; transform:none }
.hero-grid{ position:relative; z-index:20; display:flex; flex-direction:column; justify-content:center; gap:2rem; min-height:100svh; padding:6rem 1.25rem 4rem; color:#fff }
.hero-l{ display:flex; flex-direction:column; gap:1.75rem }
.hero-eyebrow .eyebrow{ color:rgba(255,255,255,.85) } .hero-eyebrow .eyebrow::before{ background:var(--accent) }
.hero h1{ max-width:none; font-size:1.8rem; font-weight:700; line-height:1.04; letter-spacing:-.02em }
.hero h1 .line{ white-space:nowrap }
.rot{ color:var(--accent); display:inline-block }
.rot-w{ display:inline-block; will-change:transform,opacity }
.rating{ display:flex; align-items:center; gap:.75rem } .rating .stars{ color:var(--accent); display:inline-flex; font-size:1rem } .rating .txt{ font-size:.95rem; font-weight:500; color:rgba(255,255,255,.85) }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem }
.hero-r{ display:flex; flex-direction:column; align-items:flex-start; gap:2rem }
.herocard{ width:100%; max-width:24rem; border-radius:1.25rem; background:rgba(255,255,255,.85); padding:.5rem; box-shadow:0 20px 50px -20px rgba(0,0,0,.5), 0 0 0 1px rgba(231,231,231,.4); backdrop-filter:blur(12px); color:#111 }
.herocard-row{ display:flex; gap:.5rem; cursor:pointer; border-radius:.875rem }
.herocard-tile{ aspect-ratio:1; width:6rem; display:grid; place-items:center; border-radius:.875rem; background:var(--ink); font-size:1.875rem; color:var(--accent-on-dark); flex:none }
.herocard-panel{ flex:1; border-radius:.875rem; background:rgba(244,243,241,.9); padding:.75rem; display:flex; flex-direction:column; justify-content:space-between; gap:.75rem }
.herocard-slot{ position:relative; min-height:3.25rem }
.herocard-item{ position:absolute; inset:0; transition:transform .4s var(--e-spring), opacity .4s ease }
.herocard-cap{ font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:rgba(17,17,17,.45) }
.herocard-title{ max-width:9rem; font-size:.9rem; font-weight:600; line-height:1.35 }
.herocard-bottom{ display:flex; align-items:center; justify-content:space-between }
.dots{ display:flex; gap:.375rem; align-items:center } .dots i{ height:.25rem; border-radius:9999px; background:rgba(17,17,17,.2); width:.375rem; transition:all .3s } .dots i.on{ width:1rem; background:rgba(17,17,17,.7) }
.herocard-nav{ display:flex; gap:.375rem } .herocard-nav button{ width:1.75rem; height:1.75rem; display:grid; place-items:center; border-radius:9999px; background:#fff; color:rgba(17,17,17,.7); box-shadow:0 0 0 1px var(--line) } .herocard-nav button:hover{ color:#111 } .herocard-nav .prev .ic{ transform:rotate(180deg) }
.clientes{ width:100% }
.clientes .lbl{ margin-bottom:.75rem; font-size:.75rem; font-weight:600; color:rgba(255,255,255,.55); text-align:left }
.clientes ul{ display:grid; grid-template-columns:repeat(4,1fr); column-gap:1rem; row-gap:.75rem }
.clientes li span{ display:flex; align-items:center; gap:.375rem; font-size:.78rem; color:rgba(255,255,255,.8); transition:transform .35s var(--e-snappy), opacity .35s; opacity:.75 } .clientes li span:hover{ transform:translateY(-2px); opacity:1 } .clientes li .ic{ font-size:.875rem; color:rgba(255,255,255,.45) }
/* marquee de clientes: una sola línea que rota en loop, sin cortar los nombres */
.cli-marquee{ overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) }
.cli-track{ display:inline-flex; align-items:center; gap:1.6rem; white-space:nowrap; animation:cli-scroll 26s linear infinite; will-change:transform }
.cli-track:hover{ animation-play-state:paused }
.cli-track .cli{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; color:rgba(255,255,255,.82); white-space:nowrap; flex:none }
.cli-track .cli .ic{ font-size:.85rem; color:rgba(255,255,255,.45) }
@keyframes cli-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.statusbar{ position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:.75rem; border-top:1px solid rgba(255,255,255,.15); padding:1.25rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.7) }
.statusbar .mid{ display:none } .statusbar .r{ display:inline-flex; gap:.5rem }
@media (min-width:640px){ .hero-grid{ padding-left:2rem; padding-right:2rem } .hero h1{ font-size:2.5rem } .statusbar{ padding-left:2rem; padding-right:2rem } .statusbar .mid{ display:inline } }
@media (min-width:768px){ .hero h1{ font-size:2.9rem } }
@media (min-width:1440px){ .hero h1{ font-size:3.4rem } }
@media (min-width:1024px){
  .hero-grid{ display:grid; min-height:100lvh; align-items:center; align-content:center; grid-template-columns:repeat(12,1fr); gap:2.5rem; padding:6rem 2rem }
  .hero-l{ grid-column:span 7 } .hero-r{ grid-column:span 5; align-items:flex-end }
  .herocard{ max-width:19rem } .clientes{ max-width:none; width:100% } .clientes .lbl{ text-align:left }
}

section{ background:#fff }
.sec-pad{ padding:5rem 1.25rem } .sec-pad-b{ padding:2.5rem 1.25rem 5rem }
@media (min-width:640px){ .sec-pad{ padding-left:2rem; padding-right:2rem } .sec-pad-b{ padding-left:2rem; padding-right:2rem } }
@media (min-width:1024px){ .sec-pad{ padding-block:7rem } .sec-pad-b{ padding-bottom:7rem } }

/* about */
.about-grid{ display:grid; grid-template-columns:1fr; align-items:center; gap:3rem }
.about-globe{ position:relative; min-height:14rem }
.about-globe .bg{ position:absolute; left:-1rem; top:50%; transform:translateY(-50%); font-size:12rem; color:rgba(17,17,17,.08) }
.about-globe .cap{ display:flex; align-items:center; gap:.75rem; font-size:.95rem; color:rgba(17,17,17,.7); position:absolute; bottom:0; left:0 }
.about-globe .cap .ic{ font-size:1.5rem; color:#111 } .about-globe .cap span{ max-width:24rem }
.about-r{ display:flex; flex-direction:column; gap:2.5rem }
.about-r h2{ font-size:1.6rem; font-weight:600; line-height:1.35; letter-spacing:-.01em } .about-r h2 .mut{ color:var(--muted) }
.about-foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; border-top:1px solid var(--line); padding-top:1.5rem }
.about-foot .lbl{ font-size:.9rem; color:rgba(17,17,17,.45); margin-bottom:.5rem }
.socials{ display:flex; gap:.5rem }
.socials a{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:.95rem }
.socials a .ic{ transition:transform .35s var(--e-snappy) } .socials a:hover .ic{ transform:scale(1.18) }
.socials .li{ background:var(--accent); color:#fff } .socials .ig,.socials .wa{ background:var(--surface); color:rgba(17,17,17,.75) }
@media (min-width:640px){ .about-r h2{ font-size:1.95rem } .about-globe{ min-height:16rem } .about-globe .bg{ font-size:16rem } }
@media (min-width:1024px){ .about-grid{ grid-template-columns:1fr 1fr } .about-globe{ min-height:20rem } .about-globe .bg{ left:-1.5rem; font-size:20rem } }

/* create band */
.create{ display:flex; flex-direction:column; gap:.75rem; padding:2.5rem 1.25rem }
.create li{ flex:1 }
.create .tile{ display:grid; place-items:center; height:6rem; border-radius:9999px; font-size:1.875rem; font-weight:600; transition:transform .35s var(--e-snappy) } .create li:hover .tile{ transform:scale(1.03) }
.create .t-light{ background:var(--surface); color:#111 } .create .t-accent{ background:linear-gradient(to bottom right,var(--accent-from),var(--accent-to)); color:#fff } .create .t-dark{ background:var(--ink); color:#fff; font-size:2.25rem } .create .t-ghost{ background:rgba(244,243,241,.6); color:rgba(17,17,17,.4) }
@media (min-width:640px){ .create{ flex-direction:row; gap:1rem; padding-left:2rem; padding-right:2rem } .create .tile{ height:10rem; font-size:2.25rem } .create .t-dark{ font-size:3rem } }

.center-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.25rem } .center-head h2{ width:fit-content }
.sec-intro{ font-size:1.05rem; color:var(--muted); max-width:60ch }

/* proyectos / works cards */
.works-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:3rem }
.work{ position:relative; min-height:22rem; overflow:hidden; border-radius:2rem; background:var(--ink); padding:1.5rem; color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.06); transition:transform .45s var(--e-spring); display:block }
.work:hover{ transform:translateY(-8px) scale(1.012) }
.work-cover{ position:absolute; inset:0; z-index:0; opacity:.5 } .work-cover img{ width:100%; height:100%; object-fit:cover } .work.has-cover::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.2)) }
.work-meta{ position:relative; z-index:2; display:flex; justify-content:space-between; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.55) }
.work-badge{ width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:9999px; background:rgba(255,255,255,.1); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.15); transition:transform .4s var(--e-snappy) } .work:hover .work-badge{ transform:rotate(45deg) scale(1.08) }
.work-wm{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:1 } .work-wm .ic{ font-size:4.5rem; color:rgba(255,255,255,.12) }
.work-bottom{ position:absolute; inset-inline:1.5rem; bottom:1.5rem; z-index:2 }
.work-bottom h3{ font-size:1.6rem; font-weight:600; letter-spacing:-.01em } .work-bottom p{ margin-top:.5rem; max-width:28rem; font-size:.95rem; color:rgba(255,255,255,.6) }
.tags{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.5rem } .tags span{ display:inline-flex; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:9999px; padding:.5rem 1rem; font-size:.8rem }
.works-more{ margin-top:2.5rem; display:flex; justify-content:center }
@media (min-width:640px){ .work{ min-height:26rem; padding:2rem } .work-bottom{ inset-inline:2rem; bottom:2rem } .work-bottom h3{ font-size:1.95rem } }
@media (min-width:768px){ .works-grid{ grid-template-columns:1fr 1fr } }

/* servicios */
.svc-head h2{ margin:1.25rem 0 3rem; max-width:16ch; font-size:2.25rem; font-weight:700; letter-spacing:-.02em }
.svc li + li .svc-row{ border-top:1px solid var(--line) }
.svc-row{ display:flex; align-items:center; gap:1rem; border-radius:1.25rem; padding-block:1.5rem; padding-inline:1.5rem; background:rgba(244,243,241,0); transition:background .4s var(--e-line), padding .4s var(--e-line) } .svc-row:hover{ background:rgba(244,243,241,1); padding-left:2rem; padding-right:1.25rem }
.svc-idx{ width:1.75rem; font-size:.9rem; font-weight:600; color:rgba(17,17,17,.4) }
.svc-row h3{ flex:1; font-size:1.5rem; font-weight:600; letter-spacing:-.01em }
.svc-row p{ display:none; max-width:22rem; font-size:.95rem; color:rgba(17,17,17,.6) }
.svc-arw{ width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:9999px; background:var(--ink); color:#fff; flex:none; transition:transform .4s var(--e-snappy) } .svc-row:hover .svc-arw{ transform:translateX(5px) }
@media (min-width:640px){ .svc-head h2{ margin-bottom:3.5rem; font-size:3rem } .svc-row{ gap:1.5rem; padding-block:2rem } .svc-row h3{ font-size:1.875rem } .svc-arw{ width:3rem; height:3rem } }
@media (min-width:768px){ .svc-row h3{ font-size:2.25rem } }
@media (min-width:1024px){ .svc-row p{ display:block } }

/* principios */
.prin-head h2{ max-width:18ch; font-size:2.25rem; font-weight:700; letter-spacing:-.02em; margin-bottom:1rem }
.prin-grid{ margin-top:3rem; display:grid; grid-template-columns:1fr; gap:1.5rem }
.prin{ border-radius:1.25rem; background:var(--surface); padding:2rem; display:flex; flex-direction:column; gap:.75rem; min-height:16rem; transition:transform .45s var(--e-spring) } .prin:hover{ transform:translateY(-6px) }
.prin .n{ font-size:.9rem; font-weight:700; color:var(--accent); letter-spacing:.05em } .prin h3{ font-size:1.3rem; font-weight:700 } .prin .sub{ font-size:.95rem; font-weight:600; color:#111 } .prin p{ margin-top:auto; font-size:.95rem; color:rgba(17,17,17,.62); line-height:1.55 }
@media (min-width:640px){ .prin-head h2{ font-size:3rem } }
@media (min-width:768px){ .prin-grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .prin-grid{ grid-template-columns:repeat(4,1fr) } }

/* stats */
.stats-wrap{ padding:0 1.25rem 5rem }
.stats{ border-radius:2rem; background:var(--ink); padding:3rem 1.5rem; color:#fff }
.stats h2{ margin-top:1rem; max-width:20ch; font-size:1.875rem; font-weight:600; letter-spacing:-.01em }
.stats-grid{ margin-top:3.5rem; display:grid; grid-template-columns:repeat(2,1fr); column-gap:2rem; row-gap:3rem }
.stat .num{ font-size:3rem; font-weight:700; letter-spacing:-.02em } .stat .num.blue{ color:var(--accent-2-bright) } .stat .lbl{ margin-top:.75rem; font-size:.9rem; color:rgba(255,255,255,.6) }
@media (min-width:640px){ .stats-wrap{ padding-left:2rem; padding-right:2rem } .stats{ padding:4rem 2rem } .stat .num{ font-size:3.75rem } }
@media (min-width:768px){ .stats{ padding-inline:4rem } .stats h2{ font-size:2.25rem } .stat .num{ font-size:4.5rem } }
@media (min-width:1024px){ .stats-wrap{ padding-bottom:7rem } .stats-grid{ grid-template-columns:repeat(4,1fr) } }

/* testimonios */
.tst-head h2{ max-width:18ch; font-size:2.25rem; font-weight:700; letter-spacing:-.02em }
.tst-grid{ margin-top:3rem; display:grid; grid-template-columns:1fr; gap:1.5rem }
.tst{ border:1px solid var(--line); border-radius:1.25rem; padding:2rem; display:flex; flex-direction:column; gap:1rem; transition:border-color .3s } .tst:hover{ border-color:rgba(17,17,17,.18) }
.tst .stars{ color:var(--accent); font-size:1rem; display:inline-flex } .tst .q{ font-size:1.1rem; line-height:1.5; color:#111 } .tst .who{ margin-top:auto } .tst .who .nm{ font-weight:700; font-size:.95rem } .tst .who .ro{ font-size:.85rem; color:rgba(17,17,17,.55) }
@media (min-width:640px){ .tst-head h2{ font-size:3rem } }
@media (min-width:768px){ .tst-grid{ grid-template-columns:1fr 1fr } }
/* carrusel de testimonios (4 en 4) */
.tst-carousel{ margin-top:3rem }
.tst-viewport{ overflow:hidden }
.tst-track{ display:flex; transition:transform .5s var(--e-spring) }
.tst-page{ flex:0 0 100%; display:grid; grid-template-columns:1fr; gap:1.5rem; align-content:start }
@media (min-width:768px){ .tst-page{ grid-template-columns:1fr 1fr } }
.tst-controls{ display:flex; align-items:center; justify-content:center; gap:1.25rem; margin-top:2rem }
.tst-arrow{ width:2.75rem; height:2.75rem; border-radius:9999px; border:1px solid var(--line); display:grid; place-items:center; font-size:1.5rem; line-height:1; color:#111; transition:background .25s, color .25s, border-color .25s }
.tst-arrow:hover{ background:var(--ink); color:#fff; border-color:var(--ink) }
.tst-arrow:disabled{ opacity:.3; cursor:default; background:none; color:#111; border-color:var(--line) }
.tst-dots{ display:flex; gap:.5rem }
.tst-dots i{ width:.5rem; height:.5rem; border-radius:9999px; background:rgba(17,17,17,.2); cursor:pointer; transition:width .25s, background .25s }
.tst-dots i.on{ width:1.6rem; background:var(--accent) }

/* faq */
.faq{ background:var(--surface) } .faq-inner{ max-width:52rem; margin-inline:auto }
.faq-list{ margin-top:3rem; display:flex; flex-direction:column; gap:.75rem }
.faq-item{ border-radius:1.25rem; background:#fff; border:1px solid var(--line); overflow:hidden }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 1.5rem; font-size:1.05rem; font-weight:600; text-align:left; color:#111 }
.faq-q .ic{ font-size:.9rem; color:var(--accent); transition:transform .35s var(--e-snappy) } .faq-item.open .faq-q .ic{ transform:rotate(45deg) }
.faq-a{ max-height:0; opacity:0; overflow:hidden; padding:0 1.5rem; transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .35s, padding .35s } .faq-item.open .faq-a{ opacity:1; padding:0 1.5rem 1.25rem } .faq-a p{ font-size:.98rem; color:rgba(17,17,17,.65); line-height:1.6 }
.faq-more{ margin-top:2.5rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem } .faq-more .q{ font-size:.95rem; color:rgba(17,17,17,.6) }

/* footer */
footer{ position:relative; overflow:hidden; border-radius:2rem 2rem 0 0; background:var(--ink); color:#fff }
.foot-in{ position:relative; z-index:10; padding:5rem 1.25rem 2.5rem }
.foot-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:2rem; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:4rem } .foot-cta h2{ font-size:2.1rem; font-weight:700; letter-spacing:-.02em }
.foot-cols{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem }
.foot-brand .b{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:700 } .foot-brand .b .ic{ font-size:1.25rem; color:var(--accent-on-dark) } .foot-brand p{ margin-top:1rem; max-width:22rem; font-size:.95rem; color:rgba(255,255,255,.55) }
.foot-col h4{ font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.4); margin-bottom:1rem }
.foot-col a{ display:block; font-size:.95rem; margin-bottom:.6rem } .foot-col a span{ display:inline-block; opacity:.65; transition:transform .35s var(--e-snappy), opacity .35s, color .35s } .foot-col a:hover span{ transform:translateX(4px); opacity:1; color:var(--accent-2-bright) }
.foot-legal{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.1); padding-top:2rem; font-size:.8rem; color:rgba(255,255,255,.45) } .foot-legal .r{ display:flex; gap:1.5rem } .foot-legal a span{ display:inline-block; opacity:.7; transition:transform .35s var(--e-snappy), opacity .35s } .foot-legal a:hover span{ transform:translateX(3px); opacity:1 }
.foot-wm{ position:absolute; inset-inline:0; bottom:-1.5rem; z-index:0; text-align:center; pointer-events:none; user-select:none; font-weight:800; line-height:1; font-size:var(--text-watermark); color:rgba(255,255,255,.05) }
@media (min-width:640px){ .foot-in{ padding-left:2rem; padding-right:2rem } .foot-legal{ flex-direction:row } }
@media (min-width:768px){ .foot-cols{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .foot-in{ padding-top:6rem } .foot-cta{ flex-direction:row; align-items:flex-end; justify-content:space-between } .foot-cols{ grid-template-columns:repeat(4,1fr) } .foot-cta h2{ font-size:2.9rem } }
@media (min-width:640px) and (max-width:1023.98px){ .foot-cta h2{ font-size:2.5rem } }

/* nav overlay */
.navmenu{ position:fixed; inset:0; z-index:115; display:flex; flex-direction:column; background:var(--ink); color:#fff; opacity:0; visibility:hidden; transition:opacity .45s var(--e-spring), visibility .45s }
.navmenu.open{ opacity:1; visibility:visible }
/* Los .shell dentro del flex-column del menú se encogen por margin-inline:auto; los forzamos a ancho completo para que el logo coincida con el navbar */
.navmenu-top,.navmenu-nav,.navmenu-bot{ width:100% }
.navmenu-top{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem } .navmenu-brand{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:700 } .navmenu-brand .ic{ font-size:1.25rem; color:var(--accent-on-dark) }
.navmenu-close{ display:inline-flex; gap:.5rem; align-items:center; border:1px solid rgba(255,255,255,.15); border-radius:.875rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.7) } .navmenu-close:hover{ border-color:rgba(255,255,255,.4); color:#fff }
.navmenu-nav{ flex:1; display:flex; flex-direction:column; justify-content:center } .navmenu-nav ul{ display:flex; flex-direction:column; gap:.25rem }
.navmenu-nav li a,.navmenu-nav li button{ display:flex; gap:1rem; align-items:baseline; padding-block:.5rem; text-align:left; font-size:clamp(1.75rem,8vw,2.25rem); font-weight:700; letter-spacing:-.02em; transform:translateY(1rem); opacity:0; transition:all .5s ease-out; width:100% }
.navmenu.open .navmenu-nav li a,.navmenu.open .navmenu-nav li button{ transform:none; opacity:1 }
.navmenu-nav li:nth-child(1) a{transition-delay:.08s}.navmenu-nav li:nth-child(2) a{transition-delay:.12s}.navmenu-nav li:nth-child(3) a{transition-delay:.16s}.navmenu-nav li:nth-child(4) a{transition-delay:.2s}.navmenu-nav li:nth-child(5) a{transition-delay:.24s}.navmenu-nav li:nth-child(6) button{transition-delay:.28s}
.navmenu-nav li .n{ font-size:1rem; font-weight:400; color:rgba(255,255,255,.3); transition:color .3s } .navmenu-nav li .l{ color:rgba(255,255,255,.7); transition:color .3s }
.navmenu-nav li a:hover .n,.navmenu-nav li button:hover .n{ color:var(--accent-on-dark) } .navmenu-nav li a:hover .l,.navmenu-nav li button:hover .l{ color:#fff }
.navmenu-bot{ display:flex; flex-direction:column; gap:.75rem; border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 1.25rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.45) } .navmenu-bot .start{ color:rgba(255,255,255,.7) } .navmenu-bot .start:hover{ color:#fff; text-decoration:underline }
@media (min-width:640px){ .navmenu-nav li a,.navmenu-nav li button{ font-size:3.75rem } .navmenu-bot{ flex-direction:row; justify-content:space-between; padding-left:2rem; padding-right:2rem } }

/* modal */
.modal{ position:fixed; inset:0; z-index:110; display:flex; align-items:flex-end; justify-content:center; padding:1rem; background:rgba(17,17,17,.3); backdrop-filter:blur(16px); opacity:0; visibility:hidden; transition:opacity .4s var(--e-spring), visibility .4s }
.modal.open{ opacity:1; visibility:visible }
.modal-panel{ position:relative; width:100%; max-width:32rem; overflow:hidden; border-radius:2rem; background:#fff; padding:1.5rem; box-shadow:0 25px 50px -12px rgba(0,0,0,.4), 0 0 0 1px var(--line); transform:translateY(28px); opacity:0; transition:transform .4s var(--e-spring), opacity .4s } .modal.open .modal-panel{ transform:none; opacity:1 }
.modal-close{ position:absolute; right:1rem; top:1rem; width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; background:var(--surface); color:rgba(17,17,17,.6) } .modal-close:hover{ background:var(--surface-2); color:#111 }
.modal-head{ margin-bottom:1.5rem; display:flex; flex-direction:column; gap:.375rem } .modal-head .dot{ display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:600; color:rgba(17,17,17,.6) } .modal-head .dot::before{ content:""; width:.375rem; height:.375rem; border-radius:9999px; background:var(--accent) } .modal-head h2{ font-size:1.5rem; font-weight:700; letter-spacing:-.01em }
.modal form{ display:flex; flex-direction:column; gap:1rem } .modal label{ display:flex; flex-direction:column; gap:.4rem } .modal label .cap{ font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.025em; color:rgba(17,17,17,.5) }
.modal input,.modal textarea{ width:100%; border:1px solid var(--line); background:rgba(244,243,241,.5); border-radius:.875rem; padding:.75rem 1rem; font-size:.95rem; outline:none; transition:border-color .2s, background .2s; font-family:inherit } .modal input:focus,.modal textarea:focus{ border-color:rgba(17,17,17,.3); background:#fff } .modal textarea{ resize:none }
.modal-row{ margin-top:.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem } .modal-row .note{ font-size:.78rem; color:rgba(17,17,17,.45) }
.modal-success{ display:none; flex-direction:column; align-items:center; text-align:center; padding-block:2rem; gap:1rem } .modal.success .modal-form{ display:none } .modal.success .modal-success{ display:flex }
.modal-success .badge{ width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:9999px; background:var(--ink); color:var(--accent-on-dark); font-size:1.5rem } .modal-success h2{ font-size:1.5rem; font-weight:700 } .modal-success p{ max-width:34ch; font-size:.95rem; color:rgba(17,17,17,.6) }
@media (min-width:640px){ .modal{ align-items:center } .modal-panel{ padding:2rem } .modal-head h2{ font-size:1.875rem } }

/* ============ PÁGINAS INTERNAS (blog / portfolio / single) ============ */
.pagehead{ background:var(--ink); color:#fff; padding:6rem 1.25rem 3.5rem; border-radius:0 0 2rem 2rem }
.pagehead .shell{ display:flex; flex-direction:column; gap:1.25rem }
.pagehead .eyebrow{ color:rgba(255,255,255,.7) } .pagehead .eyebrow::before{ background:var(--accent) }
.pagehead h1{ font-size:2.5rem; font-weight:700; letter-spacing:-.02em; line-height:1.02; max-width:20ch }
.pagehead p{ font-size:1.05rem; color:rgba(255,255,255,.6); max-width:60ch }
.breadcrumbs{ font-size:.8rem; color:rgba(255,255,255,.5); display:flex; gap:.5rem; flex-wrap:wrap } .breadcrumbs a:hover{ color:#fff } .breadcrumbs .sep{ opacity:.5 }
@media (min-width:640px){ .pagehead{ padding:7rem 2rem 4rem } .pagehead h1{ font-size:3.25rem } }
@media (min-width:1024px){ .pagehead{ padding-top:9rem } }

/* blog list */
.blog-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem }
.postcard{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:1.25rem; overflow:hidden; transition:transform .35s var(--e-spring), border-color .3s; background:#fff; height:100% } .postcard:hover{ transform:translateY(-6px); border-color:rgba(17,17,17,.16) }
.postcard-media{ aspect-ratio:16/9; background:linear-gradient(135deg,#141417,#000); position:relative; display:grid; place-items:center; overflow:hidden } .postcard-media img{ width:100%; height:100%; object-fit:cover } .postcard-media .ic{ font-size:2.5rem; color:rgba(255,125,63,.5) }
.postcard-body{ padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1 }
.postcard .cat{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); font-weight:700 }
.postcard h2,.postcard h3{ font-size:1.2rem; font-weight:700; line-height:1.25; letter-spacing:-.01em }
.postcard p{ font-size:.92rem; color:rgba(17,17,17,.6); line-height:1.5 }
.postcard .meta{ margin-top:auto; font-size:.78rem; color:var(--muted); display:flex; gap:.5rem; align-items:center }
@media (min-width:640px){ .blog-grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .blog-grid{ grid-template-columns:repeat(3,1fr) } }

/* single article */
.article{ max-width:46rem; margin-inline:auto }
.article .cat{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); font-weight:700 }
.article .meta{ font-size:.85rem; color:var(--muted); margin-top:.75rem }
.article-cover{ margin:2.5rem 0; border-radius:1.25rem; overflow:hidden; aspect-ratio:16/9; background:linear-gradient(135deg,#141417,#000) } .article-cover img{ width:100%; height:100%; object-fit:cover }
.article-body{ font-size:1.08rem; line-height:1.75; color:#1c1c1c }
.article-body h2{ font-size:1.5rem; font-weight:700; letter-spacing:-.01em; margin:2.25rem 0 .75rem } .article-body h3{ font-size:1.2rem; font-weight:700; margin:1.75rem 0 .5rem }
.article-body p{ margin-bottom:1.15rem } .article-body ul,.article-body ol{ margin:0 0 1.15rem 1.25rem; display:flex; flex-direction:column; gap:.4rem } .article-body li{ list-style:disc } .article-body a{ color:var(--accent-2); text-decoration:underline } .article-body strong{ font-weight:700 } .article-body img{ border-radius:1rem; margin:1.5rem 0 }
.article-cta{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between }

/* single project */
.proj-hero{ display:grid; gap:2rem; align-items:end }
.proj-cover{ border-radius:1.5rem; overflow:hidden; aspect-ratio:16/10; background:linear-gradient(135deg,#141417,#000); display:grid; place-items:center } .proj-cover img{ width:100%; height:100%; object-fit:cover } .proj-cover .ic{ font-size:4rem; color:rgba(255,125,63,.4) }
.proj-metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin:3rem 0 }
.proj-metric .num{ font-size:2.5rem; font-weight:700; letter-spacing:-.02em } .proj-metric .num .u{ color:var(--accent) } .proj-metric .lbl{ font-size:.85rem; color:var(--muted); margin-top:.25rem }
.proj-block{ max-width:46rem } .proj-block + .proj-block{ margin-top:2.5rem }
.proj-block h2{ font-size:1.4rem; font-weight:700; letter-spacing:-.01em; margin-bottom:.75rem; display:flex; align-items:center; gap:.6rem } .proj-block h2 .k{ font-family:inherit; font-size:.8rem; color:var(--accent); font-weight:700 } .proj-block p{ font-size:1.05rem; line-height:1.7; color:#2a2a2a }
.proj-side dl{ display:grid; gap:1rem } .proj-side dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600 } .proj-side dd{ font-size:.98rem; font-weight:600; margin-top:.15rem }
@media (min-width:900px){ .proj-metrics{ grid-template-columns:repeat(4,1fr) } }

.empty-note{ text-align:center; color:var(--muted); padding:3rem 0 }

@media (min-width:1024px){
  /* Aumento de body text en desktop (mobile queda igual) */
  .about-r h2{ font-size:2.1rem }
  .svc-row p{ font-size:1.02rem }
  .prin p{ font-size:1rem }
  .work-bottom p{ font-size:1rem }
  .tst .q{ font-size:1.18rem }
  .faq-a p{ font-size:1.05rem }
  .foot-brand p, .foot-col a{ font-size:1rem }
  .about-globe .cap, .stats .lbl, .rating .txt{ font-size:1rem }
  .eyebrow{ font-size:1rem }
  .postcard p{ font-size:1rem } .postcard h2,.postcard h3{ font-size:1.3rem }
  .article-body{ font-size:1.15rem }
  .sec-intro{ font-size:1.15rem }
  .pagehead p{ font-size:1.15rem }
  .prin .sub, .prin .p{ font-size:1rem }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  .reveal,.lines .line>span,.words w{ opacity:1 !important; transform:none !important }
  .wm{ opacity:1 !important }
  html{ scroll-behavior:auto }
}