/* ============ fuentes servidas desde el propio dominio (2026-10-08). Licencia SIL OFL 1.1: Archivo, Bagel Fat One, Instrument Sans, IBM Plex Mono. ============ */
/* Archivo recortado con fontTools instancer a wdth 75–100 y wght 400–900 (el sitio usa 700–900, anchuras 75% y 100%). Subconjunto latin de Google Fonts. */
@font-face{font-family:'Archivo';font-style:italic;font-weight:400 900;font-stretch:75% 100%;font-display:swap;src:url(/assets/nuevo/fonts/archivo-italic-v25-latin-wdth75-100-wght400-900.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:75% 100%;font-display:swap;src:url(/assets/nuevo/fonts/archivo-v25-latin-wdth75-100-wght400-900.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Bagel Fat One: subconjunto latin + los 3 fragmentos de Google que contienen ← → ▶ (solo se descargan si aparecen esos caracteres). */
@font-face{font-family:'Bagel Fat One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/nuevo/fonts/bagelfatone-v2-103.woff2) format('woff2');unicode-range:U+b4, U+20a9, U+20ac, U+2190, U+24d8, U+2502, U+2514, U+2592, U+25c7-25c8, U+2663, U+3060, U+3064, U+3081, U+3088, U+30a3, U+30a6, U+30aa, U+30b5, U+30c7, U+30ca-30cb, U+30d0, U+30e3, U+30e5, U+339e, U+4e09, U+4eac, U+4f5c, U+5167-5168, U+516c, U+51fa, U+5408, U+540d, U+591a, U+5b57, U+6211, U+65b9, U+660e, U+6642, U+6700, U+6b63, U+6e2f, U+7063, U+7532, U+793e, U+81ea, U+8272, U+82b1, U+897f, U+8eca, U+91ce, U+ac38, U+ad76, U+ae84, U+aecc, U+b07d, U+b0b1, U+b215, U+b2a0, U+b310, U+b3d7, U+b52a, U+b618, U+b775, U+b797, U+bcd5, U+bd59, U+be80, U+bea8, U+bed1, U+bee4-bee5, U+c060, U+c2ef, U+c329, U+c3dc, U+c597, U+c5bd, U+c5e5, U+c69c, U+c9d6, U+ca29, U+ca5c, U+ca84, U+cc39, U+cc3b, U+ce89, U+cee5, U+cf65, U+cf85, U+d058, U+d145, U+d22d, U+d325, U+d37d, U+d3ad, U+d769, U+ff0c}
@font-face{font-family:'Bagel Fat One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/nuevo/fonts/bagelfatone-v2-110.woff2) format('woff2');unicode-range:U+d7, U+ea, U+fc, U+2192, U+25bc, U+3000, U+3137, U+3145, U+315c, U+7f8e, U+ac13, U+ac71, U+ac90, U+acb8, U+ace7, U+ad7f, U+ae50, U+aef4, U+af34, U+afbc, U+b048, U+b09a, U+b0ad, U+b0bc, U+b113, U+b125, U+b141, U+b20c, U+b2d9, U+b2ed, U+b367, U+b369, U+b374, U+b3cb, U+b4ec, U+b611, U+b760, U+b81b, U+b834, U+b8b0, U+b8e1, U+b989, U+b9d1, U+b9e1, U+b9fa, U+ba4d, U+ba78, U+bb35, U+bb54, U+bbf9, U+bc11, U+bcb3, U+bd05, U+bd95, U+bdd4, U+be10, U+bed0, U+bf51, U+c0d8, U+c232, U+c2b7, U+c2eb, U+c378, U+c500, U+c52c, U+c549, U+c568, U+c598, U+c5c9, U+c61b, U+c639, U+c67c, U+c717, U+c78a, U+c80a, U+c90c-c90d, U+c950, U+c9e7, U+cbe4, U+cca9, U+cce4, U+cdb0, U+ce78, U+ce94, U+ce98, U+cf8c, U+d018, U+d034, U+d0f1, U+d1b1, U+d280, U+d2f8, U+d338, U+d380, U+d3b4, U+d610, U+d69f, U+d6fc, U+d758}
@font-face{font-family:'Bagel Fat One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/nuevo/fonts/bagelfatone-v2-113.woff2) format('woff2');unicode-range:U+5e, U+25b2, U+25b6, U+314e, U+ac24, U+ace1, U+ace4, U+ae68, U+af2d, U+b0d0, U+b0e5, U+b150, U+b155, U+b193, U+b2c9, U+b2dd, U+b3c8, U+b3fc, U+b410, U+b458, U+b4dd, U+b5a0, U+b5a4, U+b5bb, U+b7b5, U+b838, U+b840, U+b86f, U+b8f9, U+b960, U+b9e5, U+bab8, U+bb50, U+bc1d, U+bc24-bc25, U+bca8, U+bcbd, U+bd04, U+bd10, U+bd24, U+be48, U+be5b, U+be68, U+c05c, U+c12c, U+c140, U+c15c, U+c168, U+c194, U+c219, U+c27d, U+c2a8, U+c2f1, U+c2f8, U+c368, U+c554-c555, U+c559, U+c564, U+c5d8, U+c5fc, U+c625, U+c65c, U+c6b1, U+c728, U+c794, U+c84c, U+c88c, U+c8e0, U+c8fd, U+c998, U+c9dd, U+cc0d, U+cc30, U+ceec, U+cf13, U+cf1c, U+cf5c, U+d050, U+d07c, U+d0a8, U+d134, U+d138, U+d154, U+d1f4, U+d2bc, U+d329, U+d32c, U+d3d0, U+d3f4, U+d3fc, U+d56b, U+d5cc, U+d600-d601, U+d639, U+d6c8, U+d754, U+d765}
@font-face{font-family:'Bagel Fat One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/nuevo/fonts/bagelfatone-v2-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/nuevo/fonts/ibmplexmono-v20-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/assets/nuevo/fonts/instrumentsans-v4-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/assets/nuevo/fonts/instrumentsans-v4-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/assets/nuevo/fonts/instrumentsans-v4-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --ink:#0A0A0A; --paper:#F4F4F0; --muted:#CFCFC8; --dim:#A3A3A8; --card:#1B1B1E; --line:#232327;
  --purple:#6D35E8; --purple-2:#5227C4; --lilac:#B99BFF; --lime:#C8F135;
  --display:"Bagel Fat One",system-ui,sans-serif;
  --head:"Archivo",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,3.4vw,48px);
  --r:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);font-size:17px;line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
picture{display:contents}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,label:focus-within{outline:3px solid var(--lime);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:8px}
.wrap{padding-inline:var(--gut)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 28px;border-radius:999px;font-family:var(--head);font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--purple);color:#fff}
.btn-primary:hover{background:#7B47F0}
.btn-ghost{border-color:var(--paper);color:var(--paper)}
.btn-dark{background:var(--ink);color:#fff}
h1,h2,h3{margin:0;text-wrap:balance}
.h2{font-family:var(--head);font-weight:900;font-size:clamp(44px,6.2vw,88px);letter-spacing:-.035em;line-height:.95;text-transform:uppercase}
.h2-s{font-family:var(--head);font-weight:900;font-size:clamp(34px,3.9vw,56px);letter-spacing:-.03em;line-height:1;text-transform:uppercase}
.lead{color:var(--muted);font-size:18px}
section{scroll-margin-top:90px}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr-in{height:84px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav{display:flex;gap:26px}
.nav a,.hdr-cta a{font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.nav a{padding:12px 0}.nav a:hover{color:var(--lilac)}
.brand img{height:60px;width:auto}
.hdr-cta{justify-self:end;display:flex;gap:12px;align-items:center}
.hdr-cta .btn{min-height:44px;padding:11px 20px;font-size:14px}
.menu-btn{display:none;justify-self:end;width:48px;height:48px;border-radius:999px;border:2px solid var(--paper);background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.menu-btn span{display:block;width:18px;height:2px;background:var(--paper)}
.drawer{display:none}
@media (max-width:900px){
  .hdr-in{height:68px;grid-template-columns:auto 1fr}
  .nav,.hdr-cta{display:none}
  .brand{justify-self:start}.brand img{height:46px}
  .menu-btn{display:flex}
  .drawer{border-top:1px solid var(--line);padding:16px var(--gut) 24px;flex-direction:column;gap:6px}
  .drawer.open{display:flex}
  .drawer a{font-family:var(--head);font-weight:800;font-size:24px;text-transform:uppercase;text-decoration:none;padding:10px 0}
}

/* hero */
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:48px 72px;align-items:center}
.hero-txt{grid-column:span 8;display:flex;flex-direction:column;gap:26px}
.kicker{display:flex;align-items:center;gap:14px;margin:0;font-family:var(--head);font-stretch:75%;font-weight:800;font-style:italic;font-size:clamp(22px,2.4vw,34px);text-transform:uppercase}
.kicker em{color:var(--lilac);font-style:italic}
.rec{width:12px;height:12px;border-radius:50%;background:var(--lime);flex-shrink:0;animation:rec 1.2s steps(2,start) infinite}
@keyframes rec{to{visibility:hidden}}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(64px,11.6vw,168px);line-height:.86;text-shadow:.045em .045em 0 var(--purple);letter-spacing:-.01em}
.hero h1 .ast{color:var(--lime);text-shadow:none;font-size:.48em;vertical-align:top}
.hero p.lead{color:var(--paper);font-size:clamp(18px,1.6vw,22px);max-width:620px;margin:6px 0 0}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.trust{font-family:var(--mono);font-size:13px;color:var(--muted)}
.hero-art{grid-column:9 / span 4;position:relative;aspect-ratio:1;max-width:460px;width:100%;justify-self:center}
.ring{position:absolute;inset:0;animation:spin 22s linear infinite}
.ring svg{width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}
.disc{position:absolute;inset:11%;border-radius:50%;background:var(--purple)}
.flash{position:absolute;inset:24%;border-radius:50%;background:#fff;animation:flash 4.5s ease-out infinite}
@keyframes flash{0%,84%{opacity:0;transform:scale(.55)}88%{opacity:.95;transform:scale(1.05)}100%{opacity:0;transform:scale(1.45)}}
.mascot{position:absolute;left:13%;top:15%;width:74%;animation:bob 3.2s ease-in-out infinite;transform-origin:50% 80%}
.mascot img{width:100%;height:auto;filter:drop-shadow(6px 8px 0 #0A0A0A);animation:click 4.5s ease-in-out infinite;transform-origin:50% 90%}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-16px) rotate(4deg)}}
@keyframes click{0%,82%,100%{transform:scale(1,1)}86%{transform:scale(1.06,.92)}90%{transform:scale(.97,1.05)}94%{transform:scale(1,1)}}
.sticker{position:absolute;right:2%;bottom:14%;background:var(--lime);color:var(--ink);font-family:var(--display);font-size:clamp(14px,1.3vw,18px);padding:8px 16px;border-radius:999px;transform:rotate(-8deg)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-block:28px 48px}
  .hero-txt,.hero-art{grid-column:auto}
  .hero-art{order:2;max-width:340px}
  .hero-txt{display:contents}
  .kicker{order:0}.hero h1{order:1}.hero-art{order:2}.hero p.lead{order:3}.hero-ctas{order:4}
  .hero-ctas .btn{flex:1 1 auto}
  .trust{width:100%;text-align:center}
}

/* marquees */
.marquee{overflow:hidden}
.track{display:flex;gap:24px;width:max-content;animation:scroll 55s linear infinite}
.track.rev{animation-duration:40s;animation-direction:reverse}
.marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.logos .marquee{flex:1;min-width:0}
.logos{border-block:1px solid var(--line);padding-block:28px;display:flex;align-items:center;gap:32px}
.logos-lbl{font-family:var(--head);font-weight:800;font-size:14px;letter-spacing:.06em;white-space:nowrap;padding-left:var(--gut)}
.logo-tile{flex-shrink:0;width:170px;height:84px;border-radius:16px;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:12px}
.logo-tile img{max-width:140px;max-height:60px;object-fit:contain}
@media (max-width:700px){.logos{flex-direction:column;align-items:stretch;gap:14px}.logo-tile{width:120px;height:64px}.logo-tile img{max-width:96px;max-height:44px}}

/* services */
.services{padding-top:120px;display:flex;flex-direction:column;gap:40px}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.svc{position:relative;overflow:hidden;min-height:640px;border-radius:var(--r);padding:36px;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;text-decoration:none;background:var(--card)}
.svc>*{position:relative}
.svc>picture>img,.svc>.scrim{position:absolute;inset:0;width:100%;height:100%}
.svc>picture>img{object-fit:cover;transition:transform .6s}
.svc:hover>picture>img{transform:scale(1.04)}
.svc>.scrim{background:rgba(10,10,10,.52)}
.svc.pack>.scrim{background:rgba(109,53,232,.62)}
.svc h3{font-family:var(--head);font-weight:900;font-size:clamp(40px,3.9vw,56px);letter-spacing:-.035em;line-height:.95;text-transform:uppercase}
.svc p{margin:0;font-size:17px;color:#E4E4DE}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:rgba(42,42,46,.85);border-radius:999px;padding:8px 14px;font-size:13px}
.svc.pack .chips span{background:var(--purple-2)}
.svc .btn{align-self:flex-start}
@media (max-width:1000px){.svc-grid{grid-template-columns:1fr}.svc{min-height:420px;padding:26px}}

.band{margin-top:96px;background:var(--purple);color:#fff;overflow:hidden;white-space:nowrap}
.band .track{gap:48px;padding-block:22px;animation-duration:30s}
.band span{font-family:var(--head);font-stretch:75%;font-weight:900;font-style:italic;font-size:clamp(30px,3.2vw,44px);text-transform:uppercase}
.band .ast{color:var(--lime)}

/* work */
.work{padding-top:120px;display:flex;flex-direction:column;gap:40px}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.work .track{padding-left:var(--gut)}
.proj{flex-shrink:0;width:clamp(260px,29vw,420px);text-decoration:none;display:flex;flex-direction:column;gap:14px}
.proj img{width:100%;height:auto;aspect-ratio:7/9;object-fit:cover;border-radius:var(--r);background:var(--card)}
.proj-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.proj-meta b{font-family:var(--head);font-weight:900;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;text-transform:uppercase}
.proj-meta span{font-family:var(--mono);font-size:12px;color:var(--lilac);white-space:nowrap}

/* process */
.process{padding-top:140px;display:flex;flex-direction:column;gap:40px}
.steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.steps li{border-top:3px solid var(--paper);padding-top:22px;display:flex;flex-direction:column;gap:8px}
.steps li:last-child{border-color:var(--purple)}
.steps .n{font-family:var(--display);font-size:44px;color:var(--lilac);line-height:1}
.steps strong{font-size:22px}
.steps span:last-child{color:var(--muted);font-size:16px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* about */
.about{padding-top:140px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.about img{grid-column:span 5;width:100%;height:580px;object-fit:cover;object-position:40% 50%;border-radius:var(--r)}
.about-txt{grid-column:7 / span 6;display:flex;flex-direction:column;gap:22px}
.about-txt .h2 em{color:var(--lilac);font-style:normal}
.about-txt p{margin:0;font-size:19px;line-height:1.6;color:var(--muted);max-width:600px}
@media (max-width:900px){.about{grid-template-columns:1fr}.about img,.about-txt{grid-column:auto}.about img{height:380px}}

/* faq */
.faq{padding-top:140px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.faq h2{grid-column:span 4}
.faq-list{grid-column:6 / span 7}
.faq details{border-bottom:2px solid #2A2A2E}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--head);font-weight:800;font-size:clamp(18px,1.6vw,22px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:28px;color:var(--lilac)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0;padding:0 0 24px;color:var(--muted);max-width:640px}
@media (max-width:900px){.faq{grid-template-columns:1fr}.faq h2,.faq-list{grid-column:auto}}

/* contact */
.contact{margin:140px var(--gut) 0;border-radius:var(--r) var(--r) 0 0;background:var(--purple);color:#fff;padding:clamp(40px,6vw,88px) clamp(20px,4.4vw,64px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.contact-txt{grid-column:span 6;display:flex;flex-direction:column;gap:22px}
.contact h2{font-family:var(--display);font-weight:400;font-size:clamp(56px,7.4vw,112px);line-height:.86;text-shadow:.04em .04em 0 var(--ink)}
.contact h2 span{color:var(--lime)}
.contact-txt p{margin:0;font-size:19px;max-width:440px}
.contact-txt .btn{align-self:flex-start}
.mail{font-family:var(--head);font-weight:800;font-size:20px;text-decoration:none;word-break:break-all}
.form{grid-column:7 / span 6;display:flex;flex-direction:column;gap:12px}
.flbl{font-family:var(--head);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
legend{padding:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:inline-flex;align-items:center;min-height:44px;border:2px solid #fff;border-radius:999px;padding:8px 18px;font-family:var(--head);font-weight:800;font-size:14px;letter-spacing:.04em;cursor:pointer}
.opt input:checked+span{background:var(--ink);border-color:var(--ink)}
.opt input:focus-visible+span{outline:3px solid var(--lime);outline-offset:3px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:8px}
.form input[type=text],.form input[type=email],.form textarea{background:#fff;border:0;border-radius:14px;color:var(--ink);font:inherit;font-size:17px;padding:15px 18px;width:100%}
.form textarea{resize:vertical;min-height:110px}
.hp{position:absolute;left:-9999px}
.form .btn{align-self:flex-start;margin-top:8px}
.status{margin:0;min-height:1.5em;font-weight:600}
@media (max-width:900px){.contact{grid-template-columns:1fr;margin-inline:0;border-radius:var(--r) var(--r) 0 0}.contact-txt,.form{grid-column:auto}.two{grid-template-columns:1fr}}

.ftr{margin:0 var(--gut);background:var(--purple);color:#fff;border-top:2px solid var(--ink);padding:22px clamp(20px,4.4vw,64px);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;font-family:var(--head);font-weight:800;font-size:13px;letter-spacing:.06em}
.ftr .me{display:flex;align-items:center;gap:14px}
.ftr .me img{width:44px}
.ftr nav{display:flex;gap:22px;flex-wrap:wrap}
.ftr a{text-decoration:none}
@media (max-width:900px){.ftr{margin:0;padding-bottom:110px}}

/* mobile sticky bar */
.mbar{display:none}
@media (max-width:900px){
  .mbar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;padding:8px;border-radius:999px;background:#1B1B1E;border:1px solid #2A2A2E;gap:8px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
  .mbar .btn{flex:1;min-height:46px;padding:10px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ============ shared (all pages) ============ */
.lime{color:var(--lime)}
.band-set{display:flex;gap:48px}
.ast{color:var(--lime)}
.tag{margin:0;font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--lilac)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--dim);padding-top:28px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--paper)}
.crumbs a{padding-block:12px;margin-block:-12px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 18px;border-radius:999px;border:2px solid #3A3A40;background:transparent;color:var(--paper);font-family:var(--head);font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.chip:hover{border-color:var(--paper)}
.chip.is-on{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.chip sup{font-family:var(--mono);font-size:11px;font-weight:500}
.page-head{display:flex;flex-direction:column;gap:22px;padding-bottom:48px}
.page-h1{font-family:var(--display);font-weight:400;font-size:clamp(64px,10vw,150px);line-height:.88;text-shadow:.045em .045em 0 var(--purple);margin:0}
.page-h1 .ast{font-size:.48em;vertical-align:top;text-shadow:none}
.page-h1.is-long{font-family:var(--head);font-weight:900;font-size:clamp(40px,5.6vw,84px);letter-spacing:-.035em;line-height:.95;text-transform:uppercase;text-shadow:none}
.page-head .lead{max-width:720px;margin:0}
.lead-big{color:var(--paper)!important;font-size:clamp(19px,1.7vw,23px)!important}
.filters{display:flex;flex-wrap:wrap;gap:8px}

/* ============ project page ============ */
.case-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:28px 56px;align-items:end}
.case-title{grid-column:span 7;display:flex;flex-direction:column;gap:20px}
.case-h1{font-family:var(--display);font-weight:400;font-size:clamp(56px,9vw,140px);line-height:.88;text-shadow:.045em .045em 0 var(--purple);overflow-wrap:anywhere}
.case-h1 .ast{font-size:.45em;vertical-align:top;text-shadow:none}
.case-title .lead{margin:0;color:var(--paper);font-size:clamp(18px,1.6vw,22px);max-width:640px}
.case-side{grid-column:9 / span 4;display:flex;flex-direction:column;gap:24px}
.case-side .btn{align-self:flex-start}
.facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0}
.facts div{border-top:2px solid #2A2A2E;padding:12px 0}
.facts dt{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--dim)}
.facts dd{margin:4px 0 0;font-family:var(--head);font-weight:800;font-size:17px}
.story p{margin:0 0 12px;color:var(--muted);font-size:17px;line-height:1.6}
@media (max-width:900px){.case-head{grid-template-columns:1fr;padding-block:20px 36px}.case-title,.case-side{grid-column:auto}}

/* Justified gallery: every photo keeps its real proportions (no cropping).
   Each item grows in proportion to its width/height, so all photos in a row share one height. */
.case-media{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px)}
.jg{--row:clamp(220px,30vw,440px);--gap:clamp(8px,1.2vw,16px);display:flex;flex-wrap:wrap;gap:var(--gap)}
.jg::after{content:"";flex-grow:999999999;min-width:0}
.jg-i{margin:0;flex-grow:calc(var(--w) / var(--h) * 100);flex-basis:calc(var(--row) * var(--w) / var(--h));min-width:0;display:flex;flex-direction:column;gap:6px;max-width:100%}
.jg-btn{display:block;padding:0;border:0;background:var(--card);border-radius:14px;overflow:hidden;cursor:zoom-in;width:100%;aspect-ratio:var(--w) / var(--h)}
.jg-btn img{display:block;width:100%;height:100%}
.jg-btn img{object-fit:contain;transition:transform .5s,opacity .3s}
.jg-btn:hover img{transform:scale(1.015)}
.jg-i figcaption,.vid figcaption{font-size:14px;color:var(--dim);line-height:1.4}
@media (max-width:700px){.jg{--row:230px;--gap:8px}.jg-btn{border-radius:10px}}
/* a photo taller than the screen is never shown bigger than the screen */
@media (min-width:701px){.jg-i{max-width:calc((100svh - 140px) * var(--w) / var(--h))}}

/* Videos: real aspect ratio, never taller than the screen */
.vids{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.2vw,16px)}
.vid{margin:0;width:min(100%, calc((100svh - 150px) * var(--r)));display:flex;flex-direction:column;gap:8px}
.vids .vid.is-vertical{width:min(100%, calc(min(100svh - 150px, 760px) * var(--r)))}
.vid-box{position:relative;aspect-ratio:var(--r);border-radius:18px;overflow:hidden;background:#000}
.vid-box video,.vid-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.lite{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#111;cursor:pointer}
.lite img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .2s}
.lite:hover img{opacity:1}
.lite .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--purple);box-shadow:0 8px 30px rgba(0,0,0,.45);transition:transform .15s}
.lite .play::after{content:"";position:absolute;left:34px;top:26px;border-left:24px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent}
.lite:hover .play{transform:scale(1.08)}

/* Lightbox: the photo is fitted to the screen, whole */
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,6,6,.97);display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,56px) clamp(12px,6vw,96px)}
.lb[hidden]{display:none}
.lb-img{max-width:100%;max-height:calc(100svh - 110px);width:auto;height:auto;object-fit:contain;border-radius:8px;user-select:none;-webkit-user-drag:none}
.lb button{position:absolute;width:54px;height:54px;border-radius:50%;border:2px solid var(--paper);background:rgba(10,10,10,.6);color:var(--paper);font-size:22px;font-weight:700;cursor:pointer}
.lb button:hover{background:var(--purple);border-color:var(--purple)}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;margin-top:-27px}
.lb-next{right:16px;top:50%;margin-top:-27px}
.lb-cap{position:absolute;left:0;right:0;bottom:14px;margin:0;text-align:center;color:var(--muted);font-size:14px;padding:0 90px}
.lb-count{position:absolute;top:30px;left:24px;font-family:var(--mono);font-size:13px;color:var(--muted)}
@media (max-width:700px){.lb{padding:60px 0 70px}.lb-img{max-height:calc(100svh - 150px);border-radius:0}.lb-prev,.lb-next{top:auto;bottom:10px;margin:0}.lb-cap{bottom:74px;padding:0 16px}}
body.lb-open{overflow:hidden}

.credits{display:flex;flex-wrap:wrap;gap:12px 48px;padding-top:40px}
.credits p{margin:0;display:flex;flex-direction:column;gap:2px}
.credits span{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--dim)}
.credits b{font-family:var(--head);font-size:17px}
.next{padding-top:96px}
.next a{display:flex;align-items:center;justify-content:space-between;gap:24px;text-decoration:none;border-top:3px solid var(--paper);padding-top:22px}
.next-txt{display:flex;flex-direction:column;gap:10px;min-width:0}
.next-t{font-family:var(--head);font-weight:900;font-size:clamp(40px,7vw,104px);letter-spacing:-.035em;line-height:.9;text-transform:uppercase;transition:color .2s;overflow-wrap:anywhere}
.next a:hover .next-t{color:var(--lilac)}
.next picture{flex-shrink:0}
.next img{width:clamp(110px,18vw,260px);height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px}

/* ============ projects listing (masonry: photos keep their proportions) ============ */
.grid-work{columns:3 340px;column-gap:24px;padding-bottom:20px}
.wcard{display:flex;flex-direction:column;gap:12px;break-inside:avoid;margin-bottom:36px;text-decoration:none}
.wcard[hidden]{display:none}
.wcard-img{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--card)}
.wcard-img img{width:100%;height:auto;transition:transform .6s}
.wcard:hover .wcard-img img{transform:scale(1.03)}
.badge{position:absolute;left:14px;top:14px;background:var(--lime);color:var(--ink);border-radius:999px;padding:6px 12px;font-family:var(--head);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.rel-grid .proj{width:auto}
/* Long titles: the label drops below the title instead of spilling out of the card. Short ones stay side by side, as before. */
.rel-grid .proj-meta{flex-wrap:wrap;row-gap:6px}
.rel-grid .proj-meta b{flex:1 1 0;min-width:min-content}

/* ============ services ============ */
.services-page{padding-top:0}
.svc .svc-h{font-family:var(--head);font-weight:900;font-size:clamp(40px,3.9vw,56px);letter-spacing:-.035em;line-height:.95;text-transform:uppercase}
.sectors{padding-top:120px;display:flex;flex-direction:column;gap:32px}
.sector-list{display:flex;flex-direction:column}
.sector{display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:center;padding:18px 0;border-top:2px solid #2A2A2E;text-decoration:none}
.sector:last-child{border-bottom:2px solid #2A2A2E}
.sector-img img{width:120px;height:84px;object-fit:cover;border-radius:14px}
.sector-txt{display:flex;flex-direction:column;gap:4px}
.sector-txt b{font-family:var(--head);font-weight:900;font-size:clamp(22px,2.4vw,34px);text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.sector-txt span{color:var(--muted)}
.sector-go{font-family:var(--display);font-size:34px;color:var(--lilac);transition:transform .2s}
.sector:hover .sector-go{transform:translateX(6px)}
.sector:hover b{color:var(--lilac)}
@media (max-width:600px){.sector{grid-template-columns:80px 1fr;gap:14px}.sector-img img{width:80px;height:64px}.sector-go{display:none}}
.svc-head-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.svc-head-grid>div:first-child{grid-column:span 7;display:flex;flex-direction:column;gap:22px}
.svc-head-img{grid-column:9 / span 4}
.svc-head-img img{width:100%;height:auto;max-height:70svh;object-fit:cover;border-radius:var(--r)}
@media (max-width:900px){.svc-head-grid{grid-template-columns:1fr}.svc-head-grid>div:first-child,.svc-head-img{grid-column:auto}}
.points{padding-top:100px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.points h2{grid-column:span 4}
.points-list{grid-column:6 / span 7;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.points-list li{border-top:3px solid var(--paper);padding-top:18px;display:flex;flex-direction:column;gap:6px}
.points-list li:nth-child(4n){border-color:var(--purple)}
.points-list strong{font-size:20px}
.points-list span{color:var(--muted)}
@media (max-width:900px){.points{grid-template-columns:1fr}.points h2,.points-list{grid-column:auto}}
@media (max-width:560px){.points-list{grid-template-columns:1fr}}
.approach{margin-top:100px;background:var(--card);border-radius:var(--r);padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:16px;margin-inline:var(--gut)}
.approach.wrap{padding-inline:clamp(28px,5vw,64px)}
.approach-txt p{margin:0;font-family:var(--head);font-weight:700;font-size:clamp(22px,2.4vw,34px);line-height:1.2;letter-spacing:-.01em;max-width:1000px}
.others{padding-top:100px;display:flex;flex-direction:column;gap:16px}
.others-list{display:flex;flex-wrap:wrap;gap:8px}

/* ============ legal / 404 ============ */
.legal{max-width:820px;padding-bottom:40px}
.legal h2{font-family:var(--head);font-weight:900;font-size:clamp(22px,2.2vw,30px);text-transform:uppercase;letter-spacing:-.02em;margin:40px 0 12px}
.legal p{color:var(--muted);line-height:1.7;margin:0 0 12px}
.legal strong{color:var(--paper)}
.nf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;padding-block:48px 72px}
.nf>div:last-child{display:flex;flex-direction:column;gap:22px}
.nf .lead{margin:0}
.nf-art{position:relative;aspect-ratio:1;max-width:380px;width:100%}
@media (max-width:800px){.nf{grid-template-columns:1fr}.nf-art{max-width:240px}}

/* ============ form consent ============ */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.consent input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--ink);flex-shrink:0}
.consent a{font-weight:700}

/* Portfolio: cards compactas y carrusel continuo en portada. */
.home .work{padding-top:70px}
.project-marquee{width:100%;overflow:hidden}
.project-marquee .track{gap:20px;padding:16px var(--gut);animation-duration:90s}
.project-marquee .proj{flex:0 0 clamp(220px,22vw,300px);width:clamp(220px,22vw,300px);gap:10px}
.project-marquee .proj img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:clamp(14px,1.7vw,24px)}
.project-marquee .proj-meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.project-marquee .proj-meta b{font-size:clamp(18px,1.5vw,22px);line-height:1.15;overflow-wrap:anywhere}
.project-marquee .proj-meta span{white-space:normal;font-size:11px;line-height:1.45}
.project-marquee .proj:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
@media(max-width:700px){.home .work{padding-top:50px}.project-marquee .track{gap:14px;padding-inline:16px}.project-marquee .proj{flex-basis:240px;width:240px}.project-marquee .proj-meta b{font-size:18px}}
@media(prefers-reduced-motion:reduce){.project-marquee{overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;scroll-snap-type:x proximity}.project-marquee .track{animation:none;width:max-content}.project-marquee .proj{scroll-snap-align:start}}
/* Portfolio index: large, consistent covers for browsing selected work. */
.grid-work{width:100%;max-width:1440px;margin-inline:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px clamp(20px,2.2vw,32px);align-items:start;padding-bottom:28px}
.grid-work .wcard{min-width:0;margin:0}
.grid-work .wcard-img{aspect-ratio:4/3;border-radius:clamp(14px,1.7vw,24px)}
.grid-work .wcard-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:clamp(14px,1.7vw,24px)}
.grid-work .proj-meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.grid-work .proj-meta b{font-size:clamp(22px,2.2vw,32px);line-height:1.12;overflow-wrap:anywhere}
.grid-work .proj-meta span{white-space:normal;font-size:12px;line-height:1.5}
.grid-work .wcard:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
@media(max-width:700px){.grid-work{grid-template-columns:minmax(0,1fr);gap:32px}.grid-work .wcard{gap:12px}.grid-work .proj-meta b{font-size:24px}}

/* Keep the descriptive homepage heading expressive and readable across screens. */
.home .hero h1{font-size:clamp(42px,8vw,112px);letter-spacing:-.03em}
@media(max-width:900px){.home .hero h1{font-size:clamp(40px,10vw,82px)}}

/* Image and video captions stay available to assistive technology without appearing visually. */
.jg-i figcaption.visually-hidden,.vid figcaption.visually-hidden,.lb-cap.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* ============ home hero: photo collage + sticky bar (2026-10-08) ============ */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.hero-collage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.hero-shot{display:block;position:relative;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08);color:#fff;text-decoration:none}
.hero-shot:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.hero-shot figure{margin:0;position:relative}
.hero-shot img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.hero-shot:nth-child(2){margin-top:44px}
.hero-shot:nth-child(3){margin-top:12px}
.hero-shot figcaption{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);font-family:var(--mono);font-size:11px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(10,10,10,.68);padding:4px 7px;border-radius:6px}
.hero .hero-art .sticker{right:-6px;top:-14px;bottom:auto;z-index:2}
@media (min-width:901px){
  .hero .hero-txt{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto auto auto auto 1fr;column-gap:24px;row-gap:0}
  .hero .hero-txt>.kicker,.hero .hero-txt>h1,.hero .hero-txt>p.lead,.hero .hero-txt>.hero-ctas{grid-column:1 / span 7}
  .hero .hero-txt>.kicker{grid-row:2}
  .hero .hero-txt>h1{grid-row:3;margin-top:26px}
  .hero .hero-txt>p.lead{grid-row:4;margin-top:32px}
  .hero .hero-txt>.hero-ctas{grid-row:5;margin-top:26px}
  .hero .hero-txt>.hero-art{grid-column:8 / span 5;grid-row:1 / -1;align-self:center;justify-self:end;aspect-ratio:auto;max-width:560px}
}
@media (min-width:901px) and (max-width:1199px){
  .hero-shot figcaption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:900px){
  .hero .hero-art{aspect-ratio:auto;max-width:560px;justify-self:start}
}
@media (max-width:700px){
  .hero-collage{gap:8px}
  .hero-shot{border-radius:12px}
  .hero-shot img{aspect-ratio:4/5}
  .hero-shot:nth-child(n){margin-top:0}
  .hero-shot figcaption{display:none}
}
/* Mobile sticky bar: hidden only while the hero's main CTA is fully on screen (see nuevo.js). */
@media (max-width:900px){
  .mbar{transition:transform .25s ease,opacity .25s ease,visibility .25s}
  .mbar.is-hidden{transform:translateY(120%);opacity:0;pointer-events:none;visibility:hidden}
}
@media (prefers-reduced-motion:reduce){.mbar{transition:none}}

/* Project pages: mobile hero photo under the title + closing CTA strip */
.page-case .case-hero{display:none}
.page-case .case-cta{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding:28px clamp(20px,4vw,40px);border-radius:var(--r);background:var(--card);margin-inline:var(--gut)}
.page-case .case-cta .h2-s{font-size:clamp(24px,3vw,38px);margin:0}
@media (max-width:700px){
  .page-case .case-hero{display:block;width:100%;padding:0;border:0;background:var(--card);border-radius:10px;overflow:hidden;cursor:zoom-in}
  .page-case .case-hero img{display:block;width:100%;height:100%;object-fit:cover}
  .page-case .jg-i.is-hero{display:none}
  .page-case .case-cta{flex-direction:column;align-items:flex-start}
}

/* Home: static featured-projects grid + animation pause button */
.home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.home-grid .proj{width:auto;gap:12px}
.home-grid .proj img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:clamp(14px,1.7vw,24px)}
.home-grid .proj-meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.home-grid .proj-meta b{font-size:clamp(20px,1.8vw,26px);line-height:1.15;overflow-wrap:anywhere}
.home-grid .proj-meta span{white-space:normal;font-size:12px;line-height:1.45}
.home-grid .proj:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
@media (max-width:1000px){.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.home-grid{grid-template-columns:minmax(0,1fr);gap:28px}}
.anim-toggle{flex:0 0 auto;margin-right:var(--gut);padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--paper);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.anim-toggle:hover{border-color:var(--paper)}
.anim-toggle:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
@media (max-width:700px){.anim-toggle{align-self:flex-start;margin-left:var(--gut)}}
body.anim-paused .track{animation-play-state:paused!important}
/* Service pages: fuller structure (te suena, lo que recibes, process steps, CTA, mobile hero) */
.page-service .suena{padding-top:80px;display:flex;flex-direction:column;gap:28px}
.page-service .suena-list,.page-service .recibes-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.page-service .suena-list li{background:var(--card);border-radius:var(--r);padding:26px;font-family:var(--head);font-weight:700;font-size:clamp(17px,1.6vw,21px);line-height:1.3}
.page-service .recibes{padding-top:80px;display:flex;flex-direction:column;gap:28px}
.page-service .recibes .h2-s{font-size:clamp(26px,3vw,40px)}
.page-service .recibes-list li{border-top:3px solid var(--paper);padding-top:18px;display:flex;flex-direction:column;gap:6px}
.page-service .recibes-list li:last-child{border-color:var(--purple)}
.page-service .recibes-list strong{font-size:20px}
.page-service .recibes-list span{color:var(--muted)}
.page-service .svc-steps{padding-top:60px;gap:28px}
.page-service .sec-text .approach-txt p{font-family:var(--body,inherit);font-weight:400;font-size:clamp(16px,1.35vw,19px);line-height:1.65;letter-spacing:0;color:var(--muted);max-width:760px}
.page-service .sec-text .approach-txt p+p{margin-top:14px}
.page-service .sec-text .approach-txt strong{color:var(--paper)}
.page-service .sec-text .approach-txt a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.page-service .steps-note{margin:0;color:var(--muted);max-width:720px}
.page-service .cta-strip{margin-top:80px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding:28px clamp(20px,4vw,40px);border-radius:var(--r);background:var(--card);margin-inline:var(--gut)}
.page-service .cta-strip .h2-s{font-size:clamp(24px,3vw,38px);margin:0}
@media (max-width:900px){
  .page-service .suena-list,.page-service .recibes-list{grid-template-columns:1fr}
  .page-service .suena,.page-service .recibes{padding-top:56px}
  .page-service .cta-strip{flex-direction:column;align-items:flex-start;margin-top:56px}
  .page-service .svc-head-grid>div:first-child{display:contents}
  .page-service .svc-head-grid .tag{order:0}.page-service .svc-head-grid .page-h1{order:1}.page-service .svc-head-img{order:2}
  .page-service .svc-head-grid .lead{order:3}.page-service .svc-head-grid .hero-ctas{order:4}
  .page-service .svc-head-img img{max-height:46svh}
}