/* GARBI Asesores — demo BAI Marketing (sep 2026)
   Referencia medida: kuemmerlein.de (Awwwards HM jun-2025). Tokens tomados de la medición:
   body 18/21 grotesk negro sobre blanco · display serif ligera 74/80, 50/56, 30, 25/30 · overline mono 12-14 caps
   amarillo #F7F788 · salvia #E2E4D7 · salvia oscura #D7D7CC · crudo #F6F6F4 · radios 30 / 15 / 50 · marco de página 23px · contenido 1394 (max 1520)
   Contraste (calculado antes del CSS): tinta/amarillo 17,6 · tinta/salvia 15,4 · tinta/salvia-oscura 13,7 · meta #5C5648/salvia 5,7 · meta/amarillo 6+ · amarillo sobre foto: SOLO con velo medido (audit por píxeles)
*/
:root{
  --amarillo:#F7F788; --amarillo-60:rgba(255,255,136,.6); --salvia:#E2E4D7; --salvia-2:#D7D7CC; --crudo:#F6F6F4; --tinta:#0A0A0A; --meta:#5C5648; --blanco:#fff;
  --serif:'Zodiak',Georgia,serif; --sans:'Satoshi',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --marco:23px; --r:30px; --r2:15px; --gut:24px; --alto:calc(100vh - 16px);
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.9s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:18px;line-height:1.35;color:var(--tinta);background:var(--blanco);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* tipografía */
.h1{font-family:var(--serif);font-weight:300;font-size:clamp(44px,5.1vw,74px);line-height:1.08;letter-spacing:-.01em}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.5vw,50px);line-height:1.12;letter-spacing:-.01em}
.h3{font-family:var(--serif);font-weight:300;font-size:clamp(22px,1.75vw,25px);line-height:1.2}
.h-med{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.1vw,30px);line-height:1.1}
.over{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.mono{font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
.mono-link{font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;display:inline-block;position:relative;line-height:1.3}
.mono-link:after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.mono-link:hover:after{transform:scaleX(1)}
.meta{color:var(--meta)}
.p-big{font-size:clamp(19px,1.5vw,22px);line-height:1.4}
p+p{margin-top:1em}

/* rejilla */
.marco{padding:0 var(--marco)}
.ancho{max-width:1520px;margin:0 auto;position:relative}
.grid10{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
.grid10>.izq{grid-column:2/6}
.grid10>.der{grid-column:7/12}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
.seccion{margin-bottom:clamp(90px,8.8vw,124px)}
.seccion.tight{margin-bottom:clamp(40px,4vw,60px)}
.tarjeta{border-radius:var(--r);overflow:hidden}
.fondo-salvia{background:var(--salvia)} .fondo-crudo{background:var(--crudo)} .fondo-amarillo{background:var(--amarillo)}
@media (max-width:900px){.grid10>.izq,.grid10>.der{grid-column:1/-1}.grid10>.der{margin-top:26px}}

/* cabecera fija: logo + píldora de menú (referencia: logo 48,32 · menú 352,34 1041x60) */
.logo{position:fixed;top:32px;left:48px;z-index:60;display:flex;align-items:center;gap:8px}
.logo .marca{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;letter-spacing:-.02em}
.logo .punto{width:12px;height:12px;border-radius:50%;background:var(--amarillo);margin-top:14px;transition:transform .5s var(--ease)}
.logo:hover .punto{transform:scale(1.6)}
.logo.sobre-foto{color:var(--amarillo)}
.logo.sobre-foto .punto{background:var(--blanco)}
.menu{position:fixed;top:34px;right:48px;z-index:60;height:60px;border-radius:30px;background:var(--crudo);display:flex;align-items:center;padding:0 10px 0 28px;gap:26px}
.menu a{font-size:16px;line-height:1;white-space:nowrap;position:relative;padding:6px 0}
.menu a:after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--tinta);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.menu a:hover:after,.menu a[aria-current]:after{transform:scaleX(1)}
.menu .cta{background:var(--amarillo);border-radius:20px;padding:12px 18px;margin-left:6px}
.menu .cta:after{display:none}
.menu .cta:hover{background:var(--tinta);color:var(--amarillo)}
.hamb{display:none}
.movil{display:none}
@media (max-width:1180px){
  .menu{display:none}
  .hamb{display:flex;position:fixed;top:24px;right:var(--marco);z-index:70;height:48px;border-radius:24px;background:var(--crudo);padding:0 18px;align-items:center;gap:10px;font-size:15px}
  .hamb i{display:block;width:18px;height:2px;background:var(--tinta);position:relative}
  .hamb i:before{content:'';position:absolute;left:0;top:-6px;width:18px;height:2px;background:var(--tinta)}
  .logo{top:22px;left:var(--marco)} .logo .marca{font-size:28px} .logo .punto{width:10px;height:10px;margin-top:11px}
  .movil{position:fixed;inset:0;z-index:65;background:var(--amarillo);padding:110px var(--marco) 40px;flex-direction:column;gap:14px}
  .movil.abierto{display:flex}
  .movil a{font-family:var(--serif);font-weight:300;font-size:40px;line-height:1.1}
  .movil .mono{margin-top:auto}
  body.menu-abierto{overflow:hidden}
  body.menu-abierto .logo{color:var(--tinta)} body.menu-abierto .logo .punto{background:var(--tinta)}
}

/* héroe: foto redondeada a toda la altura, texto amarillo con paralaje */
.hero{position:relative;height:var(--alto);min-height:560px;margin:8px 0 clamp(90px,8.8vw,124px)}
.hero .foto{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;background:var(--amarillo)}
.hero .foto img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;transform:scale(1.04)}
.hero .foto:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.56) 42%,rgba(0,0,0,.24) 70%,rgba(0,0,0,.08) 100%)}
.hero .texto{position:absolute;left:46px;top:33%;max-width:565px;color:var(--amarillo);z-index:2;will-change:transform}
.hero .texto .h1{margin:22px 0 22px;max-width:520px}
.hero .baja{position:absolute;right:54px;bottom:54px;width:100px;height:100px;border-radius:50%;background:var(--amarillo);display:grid;place-items:center;z-index:2;transition:transform .5s var(--ease)}
.hero .baja:hover{transform:scale(1.1)}
.hero .baja svg{width:26px;height:26px}
@media (max-width:760px){
  .hero .foto:after{background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.72) 100%)}
  .hero .texto{left:22px;right:22px;top:auto;bottom:120px;max-width:none}
  .hero .baja{width:64px;height:64px;right:22px;bottom:30px}
}

/* dos columnas de texto */
.doscol .izq .h2{max-width:520px}
.doscol .der{padding-top:8px}

/* sección pegajosa de círculos (como .cm_themen de la referencia) */
.valores{position:relative}
.valores .fondo{position:sticky;top:8px;height:var(--alto);border-radius:var(--r);background:var(--salvia-2);z-index:0}
.valores .pista{position:relative;margin-top:calc(-1 * var(--alto))}
.valores .fijo{position:sticky;top:8px;height:var(--alto);display:flex;align-items:center;z-index:1;pointer-events:none}
.valores .fijo .ancho{width:100%}
.valores .fijo .izq{pointer-events:auto}
.valores .fijo p{margin-top:26px;max-width:453px}
.valores .fijo .mono-link{margin-top:28px}
.valores .lista{position:relative;z-index:2;margin-top:calc(-1 * var(--alto))}
.valores .circulos{grid-column:7/12}
.valores .circulos li{height:var(--alto);display:flex;align-items:center;justify-content:center}
.valores .circulos .o{width:min(571px,100%);aspect-ratio:1;border-radius:50%;background:var(--salvia);display:grid;place-items:center;text-align:center;padding:40px;transition:background .6s var(--ease),transform .9s var(--ease);transform:scale(.92)}
.valores .circulos li.activo .o{background:var(--amarillo);transform:scale(1)}
.valores .circulos .o .h-med{max-width:20ch}
.valores .circulos .o small{display:block;margin-top:14px;font-family:var(--sans);font-size:16px;line-height:1.35;max-width:32ch;color:var(--tinta);opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease) .15s,transform .6s var(--ease) .15s}
.valores .circulos li.activo .o small{opacity:1;transform:none}
@media (max-width:900px){
  .valores .fondo{position:absolute;inset:0;height:auto}
  .valores .pista{margin-top:0;padding:60px 0 40px}
  .valores .fijo{height:auto;position:static;padding:0 0 20px}
  .valores .lista{margin-top:0}
  .valores .circulos{grid-column:1/-1}
  .valores .circulos li{height:auto;padding:24px 0}
  .valores .circulos .o{width:min(420px,100%)}
}

/* botón grande de serif (píldora) */
.cta-fila{display:flex;justify-content:center}
.boton-serif{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.1vw,30px);line-height:1;padding:24px 54px;border-radius:var(--r2);background:var(--amarillo);display:inline-flex;align-items:center;gap:18px;transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease)}
.boton-serif.redondo{border-radius:50px}
.boton-serif.claro{background:var(--amarillo-60)}
.boton-serif:hover{background:var(--tinta);color:var(--amarillo);transform:translateY(-2px)}
.boton-serif svg{width:22px;height:22px;transition:transform .5s var(--ease)}
.boton-serif:hover svg{transform:translateX(6px)}
.boton{display:inline-flex;align-items:center;gap:12px;background:var(--blanco);color:var(--tinta);border-radius:22px;padding:10px 18px 10px 14px;font-size:16px;line-height:1;transition:background .4s var(--ease),color .4s var(--ease)}
.boton:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--amarillo);transition:transform .4s var(--ease)}
.boton:hover{background:var(--tinta);color:var(--amarillo)}
.boton:hover:before{transform:scale(1.5)}
.boton.oscuro{background:var(--tinta);color:var(--amarillo)}
.boton.oscuro:hover{background:var(--amarillo);color:var(--tinta)}
.boton.oscuro:hover:before{background:var(--tinta)}
@media (max-width:760px){.boton-serif{padding:20px 30px;font-size:22px}}

/* soluciones: foto redondeada + texto amarillo + dos píldoras */
.soluciones{position:relative;height:var(--alto);min-height:640px;border-radius:var(--r);overflow:hidden;background:var(--tinta)}
.soluciones img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.06)}
.soluciones:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.58) 45%,rgba(0,0,0,.74) 100%)}
.soluciones .texto{position:absolute;left:116px;top:39%;max-width:465px;color:var(--amarillo);z-index:2}
.soluciones .texto p{margin:26px 0 18px}
.soluciones .pildoras{position:absolute;left:0;right:0;bottom:56px;display:flex;justify-content:center;gap:24px;z-index:2;padding:0 24px;flex-wrap:wrap}
.soluciones .boton-serif.claro:hover{background:var(--amarillo);color:var(--tinta)}
@media (max-width:760px){.soluciones .texto{left:22px;right:22px;top:80px}.soluciones{min-height:760px}.soluciones .pildoras{bottom:30px;gap:12px}}

/* equipo: tarjeta salvia + carrusel arrastrable de retratos redondos (sin marquesina) */
.equipo{padding:84px 0 60px}
.equipo .cab{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);margin-bottom:60px}
.equipo .cab .izq{grid-column:2/6}.equipo .cab .der{grid-column:7/12}
.equipo .cab .der p{margin-bottom:18px}
.carrusel{overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;padding:0 var(--gut)}
.carrusel.arrastrando{cursor:grabbing}
.carrusel ul{display:flex;gap:40px;width:max-content;will-change:transform}
.carrusel li{width:240px;flex:none;text-align:left}
.retrato{width:240px;height:240px;border-radius:50%;overflow:hidden;background:var(--amarillo);display:grid;place-items:center;font-family:var(--serif);font-weight:300;font-size:78px;letter-spacing:-.03em;color:var(--tinta);transition:transform .6s var(--ease)}
.retrato img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.carrusel li:nth-child(2n) .retrato{background:var(--salvia-2)}
.carrusel li:nth-child(3n) .retrato{background:var(--crudo)}
.carrusel li:hover .retrato{transform:scale(1.04)}
.carrusel .nombre{margin-top:18px}
.carrusel .rol{color:var(--meta);margin-top:4px}
.pista-scroll{height:2px;background:rgba(0,0,0,.12);margin:36px var(--gut) 0;border-radius:2px;overflow:hidden}
.pista-scroll i{display:block;height:100%;width:100%;background:var(--tinta);transform-origin:left;transform:scaleX(.2)}
@media (max-width:900px){.equipo .cab .izq,.equipo .cab .der{grid-column:1/-1}.equipo .cab .der{margin-top:22px}.equipo{padding:50px 0 40px}}

/* insights: 3 baldosas */
.insights .cab{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);margin-bottom:60px;align-items:end}
.insights .cab .izq{grid-column:2/6}.insights .cab .der{grid-column:7/12}
.baldosas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.baldosa{display:block}
.baldosa .img{aspect-ratio:3/2;border-radius:var(--r2);overflow:hidden;background:var(--salvia);margin-bottom:22px}
.baldosa .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.baldosa:hover .img img{transform:scale(1.05)}
.baldosa .over{color:var(--meta);margin-bottom:8px}
.baldosa .autor{font-size:16px;color:var(--meta);margin-bottom:12px}
.baldosa .h3{max-width:26ch}
@media (max-width:900px){.baldosas{grid-template-columns:1fr}.insights .cab .izq,.insights .cab .der{grid-column:1/-1}.insights .cab .der{margin-top:18px}}

/* voces: tarjeta crudo con tres citas */
.voces{padding:90px 0 84px}
.voces .cab{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);margin-bottom:70px}
.voces .cab .izq{grid-column:2/6}.voces .cab .der{grid-column:7/12}
.voces .lista{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);padding:0 var(--gut)}
.voces blockquote{padding:34px 34px 30px;border-radius:var(--r2);background:var(--blanco);display:flex;flex-direction:column;gap:26px;min-height:100%}
.voces blockquote p{font-family:var(--serif);font-weight:300;font-size:24px;line-height:1.25;flex:1}
.voces cite{font-style:normal}
.voces cite b{display:block;font-weight:500;font-size:16px}
.voces cite span{display:block;font-size:14px;color:var(--meta);margin-top:4px}
@media (max-width:900px){.voces .lista{grid-template-columns:1fr}.voces .cab .izq,.voces .cab .der{grid-column:1/-1}.voces .cab .der{margin-top:18px}.voces{padding:50px 0}}

/* frases pegajosas con círculo que crece (como .cm_text_ticker: radio 30/400/30/30, círculo blanco a 1,8x) */
.frases{position:relative;height:calc(var(--alto) * 5)}
.frases .tarjeta-fija{position:sticky;top:8px;height:var(--alto);border-radius:30px 400px 30px 30px;background:var(--amarillo);overflow:hidden}
.frases .col-texto{position:absolute;left:116px;top:0;bottom:0;width:453px;display:flex;align-items:center}
.frases .col-texto ul{position:relative;width:100%;height:260px}
.frases .col-texto li{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% + 40px));opacity:0;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.frases .col-texto li.activa{opacity:1;transform:translateY(-50%)}
.frases .col-texto li.pasada{opacity:0;transform:translateY(calc(-50% - 40px))}
.frases .col-circulo{position:absolute;right:0;top:0;bottom:0;width:50%;display:flex;align-items:center;justify-content:center}
.frases .circulo{width:518px;height:518px;border-radius:50%;background:var(--blanco);transform:scale(.35);will-change:transform;display:grid;place-items:center}
.frases .circulo span{font-family:var(--serif);font-weight:300;font-size:96px;letter-spacing:-.03em;transform:scale(.55);opacity:0;transition:opacity .5s var(--ease)}
.frases .circulo.grande span{opacity:1}
.frases .progreso{position:absolute;left:116px;bottom:60px;display:flex;gap:10px}
.frases .progreso i{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.18);transition:background .4s}
.frases .progreso i.on{background:var(--tinta)}
@media (max-width:900px){
  .frases{height:calc(var(--alto) * 4)}
  .frases .tarjeta-fija{border-radius:30px 200px 30px 30px}
  .frases .col-texto{left:28px;right:28px;width:auto;top:0;bottom:45%}
  .frases .col-circulo{width:100%;top:auto;bottom:0;height:50%}
  .frases .circulo{width:300px;height:300px}
  .frases .circulo span{font-size:60px}
  .frases .progreso{left:28px;bottom:30px}
}

/* media + texto (cierre) */
.media{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:center}
.media .img{grid-column:1/8;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--salvia)}
.media .img img{width:100%;height:100%;object-fit:cover}
.media .texto{grid-column:9/13}
.media .texto p{margin:24px 0 28px;max-width:40ch}
@media (max-width:900px){.media .img,.media .texto{grid-column:1/-1}.media .texto{margin-top:40px}}

/* pie amarillo */
.pie{background:var(--amarillo);padding:60px 0 44px;margin-top:20px}
.pie .grid12>div{font-size:16px}
.pie .col1{grid-column:1/4}.pie .col2{grid-column:4/6}.pie .col3{grid-column:6/8}.pie .col4{grid-column:8/10}.pie .col5{grid-column:10/13}
.pie h3{font-weight:700;font-size:16px;margin-bottom:12px}
.pie li{margin-bottom:6px}
.pie a:hover{text-decoration:underline}
.pie .marca-pie{display:flex;align-items:center;gap:6px;font-family:var(--serif);font-size:30px;font-weight:400;letter-spacing:-.02em}
.pie .marca-pie i{width:10px;height:10px;border-radius:50%;background:var(--tinta);margin-top:12px}
.pie .demo{margin-top:50px;padding-top:22px;border-top:1px solid rgba(0,0,0,.18);font-size:13px;line-height:1.45;color:#3a3a30;max-width:980px}
.pie .demo a{text-decoration:underline}
@media (max-width:900px){.pie .grid12>div{grid-column:1/-1;margin-bottom:26px}}

/* páginas interiores */
.pag-hero{padding:190px 0 60px}
.pag-hero .over{color:var(--meta);margin-bottom:22px}
.pag-hero .h1{max-width:18ch}
.pag-hero .intro{margin-top:34px;max-width:620px}
@media (max-width:760px){.pag-hero{padding-top:120px}}
.lista-servicios{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
.servicio{border-radius:var(--r);background:var(--salvia);padding:44px 44px 40px;display:flex;flex-direction:column;gap:22px;min-height:360px;transition:background .5s var(--ease)}
.servicio:hover{background:var(--amarillo)}
.servicio .num{font-family:var(--mono);font-size:13px;color:var(--meta)}
.servicio .h2{font-size:clamp(30px,2.6vw,38px)}
.servicio ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.servicio li{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:8px 14px;border-radius:15px;background:rgba(255,255,255,.7)}
@media (max-width:900px){.lista-servicios{grid-template-columns:1fr}.servicio{padding:32px 26px}}
.filas{border-top:1px solid rgba(0,0,0,.14)}
.fila{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);padding:40px 0;border-bottom:1px solid rgba(0,0,0,.14)}
.fila .a{grid-column:1/3}.fila .b{grid-column:3/7}.fila .c{grid-column:7/12}
.fila .b .h3{font-size:clamp(24px,2vw,30px)}
@media (max-width:900px){.fila .a,.fila .b,.fila .c{grid-column:1/-1}.fila .c{margin-top:14px}}
.chip{display:inline-block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:8px 14px;border-radius:15px;background:var(--salvia);margin:0 6px 8px 0}
.chip.si{background:var(--amarillo)}
.equipo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px var(--gut)}
.equipo-grid .retrato{width:100%;height:auto;aspect-ratio:1;font-size:90px}
.equipo-grid li:nth-child(2n) .retrato{background:var(--salvia-2)}
.equipo-grid li:nth-child(3n) .retrato{background:var(--crudo)}
.equipo-grid .nombre{margin-top:18px}.equipo-grid .rol{color:var(--meta);margin-top:4px}
.equipo-grid p{font-size:16px;margin-top:12px;color:var(--meta)}
@media (max-width:900px){.equipo-grid{grid-template-columns:repeat(2,1fr)}.equipo-grid .retrato{font-size:60px}}

/* portal: maqueta de panel */
.portal{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:start}
.portal .texto{grid-column:2/6;position:sticky;top:120px}
.portal .texto p{margin-top:24px}
.portal .maqueta{grid-column:7/13}
.pantalla{border-radius:var(--r);background:var(--crudo);padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.08)}
.pantalla .barra{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.pantalla .barra i{width:10px;height:10px;border-radius:50%;background:var(--salvia-2)}
.pantalla .barra i:first-child{background:var(--amarillo)}
.pantalla .barra span{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--meta)}
.pantalla .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.pantalla .kpi{background:var(--blanco);border-radius:var(--r2);padding:18px}
.pantalla .kpi small{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--meta);margin-bottom:10px}
.pantalla .kpi b{font-family:var(--serif);font-weight:300;font-size:34px;line-height:1;display:block}
.pantalla .kpi b em{font-style:normal;font-family:var(--sans);font-size:14px;color:var(--meta);margin-left:6px}
.pantalla .kpi.amarillo{background:var(--amarillo)}
.pantalla .filas-p{background:var(--blanco);border-radius:var(--r2);padding:8px 18px}
.pantalla .filas-p div{display:grid;grid-template-columns:1.6fr 1fr 1fr .8fr;gap:10px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.08);font-size:14px;align-items:center}
.pantalla .filas-p div:last-child{border:0}
.pantalla .filas-p div:first-child{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--meta)}
.pantalla .estado{font-family:var(--mono);font-size:11px;text-transform:uppercase;padding:5px 10px;border-radius:12px;background:var(--salvia);display:inline-block;justify-self:start}
.pantalla .estado.ok{background:var(--amarillo)}
.pantalla .aviso{margin-top:12px;background:var(--tinta);color:var(--amarillo);border-radius:var(--r2);padding:16px 18px;font-size:14px;display:flex;gap:12px;align-items:center}
.pantalla .aviso i{width:8px;height:8px;border-radius:50%;background:var(--amarillo);flex:none}
.pasos{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.paso{border-radius:var(--r2);background:var(--salvia);padding:28px}
.paso .num{font-family:var(--serif);font-weight:300;font-size:40px;line-height:1;margin-bottom:16px}
.paso p{font-size:16px;color:var(--meta);margin-top:8px}
@media (max-width:900px){.portal .texto,.portal .maqueta{grid-column:1/-1}.portal .texto{position:static;margin-bottom:40px}.pasos{grid-template-columns:1fr}.pantalla .kpis{grid-template-columns:1fr}.pantalla .filas-p div{grid-template-columns:1.4fr 1fr 1fr}.pantalla .filas-p div span:last-child{display:none}}

/* calendario */
.cal-meses{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.mes{border-radius:var(--r2);background:var(--crudo);padding:24px;min-height:200px}
.mes.fuerte{background:var(--amarillo)}
.mes h3{font-family:var(--serif);font-weight:300;font-size:30px;margin-bottom:16px}
.mes li{font-size:15px;padding:8px 0;border-top:1px solid rgba(0,0,0,.1);display:flex;gap:12px}
.mes li b{font-family:var(--mono);font-weight:400;font-size:12px;min-width:44px;padding-top:2px}
.mes li span{color:var(--meta);display:block;font-size:13px}
@media (max-width:1000px){.cal-meses{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cal-meses{grid-template-columns:1fr}}
.nota{border-radius:var(--r2);background:var(--salvia);padding:24px 28px;font-size:15px;color:var(--meta);max-width:820px;margin-top:40px}

/* artículo */
.articulo{max-width:720px;margin:0 auto}
.articulo .h2{margin:60px 0 20px}
.articulo p{margin-bottom:1.2em;font-size:19px;line-height:1.5}
.articulo ul{margin:0 0 1.4em 20px;list-style:disc}
.articulo li{margin-bottom:.4em;font-size:19px}
.articulo .lead{font-family:var(--serif);font-weight:300;font-size:28px;line-height:1.3;margin-bottom:40px}
.articulo-hero{aspect-ratio:2/1;border-radius:var(--r);overflow:hidden;margin-bottom:60px;background:var(--salvia)}
.articulo-hero img{width:100%;height:100%;object-fit:cover}

/* contacto */
.contacto{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
.contacto .datos{grid-column:2/6}
.contacto .form{grid-column:7/12}
.contacto .datos dl{margin-top:40px}
.contacto .datos dt{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--meta);margin-bottom:6px}
.contacto .datos dd{margin-bottom:26px}
.form{border-radius:var(--r);background:var(--salvia);padding:44px}
.form label{display:block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--meta);margin:0 0 8px}
.form input,.form select,.form textarea{width:100%;border:0;border-radius:12px;background:var(--blanco);padding:14px 16px;font:inherit;font-size:16px;margin-bottom:20px;color:var(--tinta)}
.form textarea{min-height:120px;resize:vertical}
.form .dos{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form .legal{font-size:13px;color:var(--meta);margin-bottom:22px;display:flex;gap:10px;align-items:flex-start}
.form .legal input{width:auto;margin:3px 0 0}
.form .ok{border-radius:12px;background:var(--amarillo);padding:16px 18px;margin-top:8px;display:none}
@media (max-width:900px){.contacto .datos,.contacto .form{grid-column:1/-1}.form{margin-top:40px;padding:28px 22px}.form .dos{grid-template-columns:1fr}}

/* revelados */
.rv{opacity:0;transform:translateY(28px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-linea .l{display:block;overflow:hidden}
.rv-linea .l span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.rv-linea.in .l span{transform:none}
@media (prefers-reduced-motion:reduce){.rv,.rv-linea .l span{opacity:1;transform:none;transition:none}.hero .texto{transform:none!important}.frases{height:auto}.frases .tarjeta-fija{position:static;height:auto;padding:80px 0}.frases .col-texto,.frases .col-circulo{position:static;width:auto}.frases .col-texto ul{height:auto}.frases .col-texto li{position:static;opacity:1;transform:none;margin-bottom:30px}}