@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-var-lat.woff2") format("woff2-variations"),url("/assets/fonts/archivo-var-lat.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@view-transition{navigation:auto}
:root{
  --hueso:#F7F6F3;--papel:#ECEAE4;--tinta:#121212;--tinta-2:#2A2A28;--gris:#5C5B57;--gris-claro:#B8B6AF;
  --cobalto:#2441E8;--linea:rgba(18,18,18,.14);--linea-clara:rgba(247,246,243,.16);
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);
  --gutter:16px;--max:1320px;--cab:64px;color-scheme:light;
}
@media (min-width:700px){:root{--gutter:32px;--cab:72px}}
@media (min-width:1100px){:root{--gutter:48px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--tinta) var(--papel)}
body{margin:0;background:var(--hueso);color:var(--tinta);font-family:"Archivo",system-ui,sans-serif;font-size:1rem;line-height:1.55;font-weight:420;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
::selection{background:var(--cobalto);color:var(--hueso)}
:focus-visible{outline:2px solid var(--cobalto);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar{position:fixed;left:12px;top:12px;z-index:90;padding:10px 14px;background:var(--tinta);color:var(--hueso);transform:translateY(-200%);transition:transform 160ms var(--ease-out)}
.saltar:focus{transform:none}

/* tipografía */
.t1{font-size:clamp(2.4rem,6vw,5.2rem);font-weight:660;font-stretch:125%;line-height:.94;letter-spacing:-.03em;text-wrap:balance}
.t2{font-size:clamp(2rem,5.6vw,4.4rem);font-weight:640;font-stretch:125%;line-height:.98;letter-spacing:-.025em;text-wrap:balance}

/* botones y enlaces */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;background:var(--tinta);color:var(--hueso);text-decoration:none;font-weight:600;font-stretch:112%;font-size:.98rem;border-radius:2px;transition:background-color 200ms ease,color 200ms ease,transform 160ms var(--ease-out);-webkit-tap-highlight-color:transparent}
.boton:active{transform:scale(.97)}
.boton--chico{min-height:44px;padding:0 16px;font-size:.88rem}
.boton--grande{min-height:60px;padding:0 32px;font-size:1.05rem}
.boton--claro{background:var(--hueso);color:var(--tinta);min-height:60px;padding:0 32px}
.boton:disabled{opacity:.7;cursor:progress}
.enlace{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-stretch:112%;text-decoration:none;background:linear-gradient(currentColor,currentColor) left calc(100% - 10px)/100% 1.5px no-repeat;transition:background-size 240ms var(--ease-out)}
.enlace--claro{color:var(--hueso)}

@media (hover:hover) and (pointer:fine){
  .boton:hover{background:var(--cobalto)}
  .boton--claro:hover{background:var(--tinta);color:var(--hueso)}
  .enlace:hover{background-size:0 1.5px;background-position:right calc(100% - 10px)}
}

/* intro */
.intro{position:fixed;inset:0;z-index:100;background:var(--tinta);clip-path:inset(0 0 0 0);transition:clip-path 800ms var(--ease-io);cursor:pointer}
.intro--sale{clip-path:inset(0 0 100% 0)}
.intro__svg{width:100%;height:100%;display:block}
.intro-activa body{overflow:hidden}

/* cabecera y pestañas */
.cab{position:sticky;top:0;z-index:50;height:var(--cab);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gutter);background:var(--hueso);border-bottom:1px solid transparent;transition:border-color 200ms ease;view-transition-name:cab}
.cab[data-scrolled]{border-color:var(--linea)}
.cab__logo{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.cab__logo svg{height:28px;width:auto;color:var(--cobalto)}
.cab__logo>span{font-size:13px;line-height:1.04;font-weight:620;font-stretch:112%;letter-spacing:.04em;text-transform:uppercase}
.cab__logo>span>span{display:block;clip-path:inset(0 0 0 0);transition:opacity 800ms var(--ease-io),transform 800ms var(--ease-io),clip-path 800ms var(--ease-io)}
.cab__logo>span>span:last-child{transition-delay:220ms}
/* portada: mientras se ve el «BERET STUDIO» gigante, el menú lleva solo el ícono; el nombre entra al salir de pantalla */
/* entra «Beret» y luego «Studio»; sale al revés: primero «Studio» y luego «Beret», con el mismo movimiento */
.js .cab--portada:not([data-marca]) .cab__logo>span>span{opacity:0;transform:translateX(-10px);clip-path:inset(0 100% 0 0)}
.js .cab--portada:not([data-marca]) .cab__logo>span>span:first-child{transition-delay:220ms}
.js .cab--portada:not([data-marca]) .cab__logo>span>span:last-child{transition-delay:0ms}
@media (prefers-reduced-motion:reduce){.cab__logo>span>span{transition:opacity 200ms ease!important;transition-delay:0ms!important}.js .cab--portada:not([data-marca]) .cab__logo>span>span{transform:none;clip-path:inset(0 0 0 0)}}
.cab__nav{display:none}
.cab__acc{display:flex;align-items:center;gap:8px}
.idioma{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 10px;font-size:.82rem;font-weight:620;font-stretch:112%;letter-spacing:.04em;text-decoration:none;border:1px solid var(--linea);border-radius:2px;transition:border-color 200ms ease}
.menu-btn{width:44px;height:44px;display:grid;place-content:center;gap:6px}
.menu-btn i{display:block;width:22px;height:2px;background:currentColor;transition:transform 240ms var(--ease-out)}
.menu-btn[aria-expanded="true"] i:first-of-type{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:last-of-type{transform:translateY(-4px) rotate(-45deg)}
.menu-movil{position:absolute;top:100%;left:0;right:0;height:calc(100dvh - var(--cab));display:flex;flex-direction:column;padding:16px var(--gutter) 32px;background:var(--hueso);overflow:auto;animation:menu-entra 240ms var(--ease-out)}
.menu-movil[hidden]{display:none}
.menu-movil a{padding:12px 0;font-size:clamp(2rem,9vw,2.8rem);font-weight:660;font-stretch:125%;letter-spacing:-.02em;line-height:1.1;text-decoration:none;border-bottom:1px solid var(--linea)}
.menu-movil a[aria-current]{color:var(--cobalto)}
.menu-movil a.menu-movil__idioma{margin-top:auto;font-size:1rem;border:0;min-height:44px;display:flex;align-items:center}
@keyframes menu-entra{from{opacity:0;transform:translateY(-8px)}}
@media (max-width:379px){.cab .boton--chico{display:none}}
@media (min-width:960px){
  .cab__nav{display:flex;gap:36px;position:absolute;left:50%;transform:translateX(-50%)}
  .cab__nav a{position:relative;padding:10px 0;font-size:.95rem;font-weight:560;font-stretch:110%;text-decoration:none}
  .cab__nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--cobalto);transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--ease-out)}
  .cab__nav a[aria-current]::after{transform:scaleX(1)}
  .cab__nav a[aria-current]{color:var(--cobalto)}
  .menu-btn,.menu-movil{display:none!important}
}
@media (hover:hover) and (pointer:fine){.cab__nav a:hover::after{transform:scaleX(1)}.idioma:hover{border-color:var(--tinta)}}

/* bloques generales */
.t3{font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:640;font-stretch:118%;letter-spacing:-.015em;line-height:1.08}
.sec{max-width:var(--max);margin:0 auto;padding:clamp(64px,9vw,128px) var(--gutter)}
.sec--linea{border-top:1px solid var(--linea)}
.sec--sin-arriba{padding-top:0}
.sec--corta-abajo{padding-bottom:clamp(24px,3vw,40px)}
.sec--interna{padding-left:0;padding-right:0}
.sec__cab{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px)}
.sec__cab p{color:var(--gris);max-width:46ch}
@media (min-width:900px){.sec__cab{grid-template-columns:1fr auto;align-items:end;column-gap:48px}.sec__cab p{grid-column:1}.sec__cab>.enlace{grid-row:1;grid-column:2}}
.pag-cab{max-width:var(--max);margin:0 auto;padding:clamp(28px,5vw,64px) var(--gutter) clamp(40px,6vw,80px);display:grid;gap:18px}
.pag-cab p{max-width:54ch;color:var(--gris);font-size:clamp(1rem,1.3vw,1.15rem)}
.pag-cab--grande .t1{max-width:16ch}
.dos-col{display:grid;gap:28px}
@media (min-width:900px){.dos-col{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}}
.texto-grande{font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.5;color:var(--tinta-2);display:grid;gap:24px;justify-items:start}

/* migas */
.migas ol{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:.86rem;color:var(--gris)}
.migas li{display:flex;align-items:center;gap:8px}
.migas li+li::before{content:"";width:10px;height:2px;background:var(--cobalto);transform:rotate(-22deg)}
.migas a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.migas a:hover{color:var(--tinta);text-decoration:underline}
.migas [aria-current]{color:var(--tinta);min-height:44px;display:inline-flex;align-items:center}

/* hero */

.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}

@keyframes sube-txt{from{opacity:0;transform:translateY(24px)}}

/* historia de inicio */

/* estados del gráfico */

@keyframes traza-ra{to{stroke-dashoffset:0}}

/* puente a servicios */

.nota-proc{margin-top:28px;color:var(--gris)}
.srv__como{font-size:.92rem;color:var(--gris)}
.srv__como a{font-weight:600;color:var(--tinta);display:inline-flex;min-height:44px;align-items:center}

/* fases del proceso */
.fases{position:relative;padding-left:56px}
.fases__linea{position:absolute;left:15px;top:30px;bottom:30px;width:2px;background:var(--linea);list-style:none}
.fases__linea span{position:absolute;inset:0;background:var(--cobalto);transform:scaleY(0);transform-origin:top}
.fase{position:relative;padding:clamp(24px,3.4vw,40px) 0;border-bottom:1px solid var(--linea)}
.fase:last-child{border-bottom:0}
.fase__n{position:absolute;left:-56px;top:clamp(24px,3.4vw,40px);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--hueso);border:2px solid var(--tinta);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;transition:background-color 800ms ease,border-color 800ms ease,color 800ms ease}
.fase[data-paso] .fase__n{background:var(--cobalto);border-color:var(--cobalto);color:var(--hueso)}
.fase>div{display:grid;gap:8px}
.fase h3{font-size:clamp(1.5rem,3.2vw,2.6rem);font-weight:660;font-stretch:122%;letter-spacing:-.022em;line-height:1}
.fase p{max-width:52ch;color:var(--tinta-2)}
.fase__obt{font-weight:600;color:var(--tinta)!important;padding-left:12px;border-left:2px solid var(--cobalto)}
@media (min-width:900px){.fase>div{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:0}.fase h3{grid-row:1/3;padding-right:56px}}
.links-srv{border-top:1px solid var(--linea)}
.links-srv a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px 0;border-bottom:1px solid var(--linea);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:620;font-stretch:115%;text-decoration:none}
.links-srv a:hover{color:var(--cobalto)}

/* estudio: animaciones de la idea */

@keyframes apaga{to{opacity:0}}

@keyframes dibuja-boina{to{clip-path:inset(0 0 0 0)}}
@keyframes aparece-ves{to{opacity:1;transform:none}}

@keyframes sube-sil{to{clip-path:inset(0 0 0 0)}}

/* Una línea a la vez: las otras quedan tenues (se pueden sumar después). Etiqueta 1 = línea de arriba. */

.est-mapa{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:900px){.est-mapa{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.est-mapa .texto-grande{margin-top:16px}
.ma-svg{width:100%;overflow:visible;font-family:"Archivo",system-ui,sans-serif}

@keyframes aparece-n{to{transform:scale(1)}}
@keyframes aparece-t{to{opacity:1}}
.ma__a{fill:none;stroke:var(--cobalto);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1}

.ma__t{font-size:8.5px;font-weight:600;font-stretch:110%;fill:var(--gris);paint-order:stroke;stroke:var(--hueso);stroke-width:3px;stroke-linejoin:round}
[data-visto] .ma__a{animation:traza-ra 1800ms var(--ease-out) forwards;animation-delay:calc(var(--i) * 380ms + 400ms)}

/* lista de servicios */
.serv-lista{border-top:1px solid var(--linea)}
.serv-lista a{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:baseline;padding:clamp(18px,2.6vw,30px) 0;border-bottom:1px solid var(--linea);text-decoration:none}
.sl__nom{font-size:clamp(1.7rem,3.6vw,3.4rem);font-weight:640;font-stretch:125%;letter-spacing:-.025em;line-height:1;margin:0;transition:color 200ms ease,transform 400ms var(--ease-out)}
.sl__corto{grid-column:1;color:var(--gris);max-width:52ch}
.sl__flecha{grid-column:2;grid-row:1/3;align-self:center;font-size:clamp(1.4rem,2.4vw,2rem);transition:transform 300ms var(--ease-out)}
@media (min-width:900px){.serv-lista a{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;column-gap:56px}.sl__corto{grid-column:2;grid-row:1;max-width:58ch}.sl__flecha{grid-column:2;grid-row:1/3;justify-self:end}}
@media (hover:hover) and (pointer:fine){.serv-lista a:hover .sl__nom{color:var(--cobalto);transform:translateX(10px)}.serv-lista a:hover .sl__flecha{transform:translateX(6px)}}

/* industrias */

/* oscuro / por qué */

/* pasos */

/* preguntas */
.faqs{border-top:1px solid var(--linea)}
.faq{border-bottom:1px solid var(--linea)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none;font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:600;font-stretch:110%}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:18px;height:18px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:currentColor;transition:transform 240ms var(--ease-out)}
.faq summary i::after{transform:rotate(90deg)}
.faq[open] summary i::after{transform:rotate(0)}
.faq p{padding:0 0 20px;max-width:64ch;color:var(--tinta-2)}

@media (hover:hover) and (pointer:fine){.faq summary:hover{color:var(--cobalto)}}

/* firma de dirección creativa */
.firma{color:var(--gris)}
.firma a{color:var(--tinta);font-weight:600;text-underline-offset:4px;display:inline;padding:12px 0;line-height:2}
.firma a:hover{color:var(--cobalto)}

.firma--contacto{padding-top:16px;border-top:1px solid var(--linea)}

/* página de servicio */
.srv{max-width:var(--max);margin:0 auto;padding:clamp(20px,4vw,48px) var(--gutter) 0}
.srv__cab{display:grid;gap:20px;padding-bottom:clamp(40px,6vw,80px)}

.t1--srv{font-size:clamp(2.2rem,5.6vw,4.8rem);max-width:20ch}
.t1__sub{display:block;margin-top:.35em;max-width:30ch;font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:560;font-stretch:110%;letter-spacing:-.005em;line-height:1.2;color:var(--gris);text-wrap:balance}
.srv__intro{display:grid;gap:14px;max-width:62ch;font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--tinta-2)}
.srv__accion{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:8px}
.srv__bloques{display:grid;gap:clamp(36px,5vw,56px);padding:clamp(40px,6vw,80px) 0;border-top:1px solid var(--linea)}
@media (min-width:900px){.srv__bloques{grid-template-columns:1fr 1fr;gap:56px}}
.srv__bloque{display:grid;gap:18px;align-content:start}
.srv__precio{display:grid;gap:8px;margin-top:12px;padding:20px;background:var(--papel);border-radius:2px}
.srv__precio p:last-child{color:var(--gris);font-size:.95rem}
.srv__precio-t{margin:0;font-size:.82rem;font-weight:650;font-stretch:112%;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalto)}
.srv__postura{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.4;color:var(--tinta);max-width:44ch;text-wrap:pretty}
.srv__detalle{display:grid;gap:16px;padding:clamp(40px,6vw,80px) 0;border-top:1px solid var(--linea)}
@media (min-width:900px){.srv__detalle{grid-template-columns:1fr 1fr;gap:56px}}
.srv__detalle-txt{display:grid;gap:14px;max-width:64ch;font-size:clamp(1.02rem,1.3vw,1.15rem);color:var(--tinta-2)}
.lista-check{border-top:1px solid var(--linea)}
.lista-check li{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--linea);font-weight:500}
.lista-check li::before{content:"";flex:none;width:12px;height:2px;background:var(--cobalto);transform:translateY(-4px) rotate(-22deg)}
.precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-size:.95rem;color:var(--gris);font-weight:520}
.precio b{font-size:clamp(2.2rem,4vw,3rem);font-weight:700;font-stretch:118%;color:var(--cobalto);letter-spacing:-.02em;line-height:1}
.relacionados{display:grid;gap:12px}
@media (min-width:700px){.relacionados{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.relacionados{column-gap:56px}}
.relacionados a{display:grid;gap:6px;padding:24px;background:var(--papel);border-radius:2px;text-decoration:none;transition:background-color 200ms ease}
.rel__nom{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:640;font-stretch:122%;letter-spacing:-.02em}
.relacionados span:nth-child(2){color:var(--gris)}
@media (hover:hover) and (pointer:fine){.relacionados a:hover{background:var(--hueso);box-shadow:inset 0 0 0 1px var(--linea)}}

/* contacto */
.contacto{max-width:var(--max);margin:0 auto;padding:clamp(20px,4vw,48px) var(--gutter) clamp(64px,9vw,128px);display:grid;gap:clamp(32px,5vw,64px)}
.contacto__intro{display:grid;gap:18px;align-content:start}
.contacto__intro p{color:var(--gris);max-width:44ch}
.contacto .t1{font-size:clamp(2.4rem,5.2vw,4.6rem)}
.contacto__dato{color:var(--tinta)!important;font-weight:520}
@media (min-width:1000px){.contacto{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}.contacto__intro{position:sticky;top:calc(var(--cab) + 24px)}}
.form{display:grid;gap:16px;align-content:start}
.form__fila{display:grid;gap:16px}
@media (min-width:700px){.form__fila{grid-template-columns:1fr 1fr}}
.campo{display:grid;gap:6px;font-size:.88rem;font-weight:600;font-stretch:112%}
.campo input,.campo select,.campo textarea{width:100%;min-height:52px;padding:12px 14px;font:inherit;font-size:1rem;font-weight:450;font-stretch:100%;color:var(--tinta);background:#fff;border:1px solid rgba(18,18,18,.28);border-radius:2px;transition:border-color 160ms ease,box-shadow 160ms ease}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23121212' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:18px;padding-right:40px}
.campo textarea{min-height:140px;resize:vertical;line-height:1.5}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:none;border-color:var(--cobalto);box-shadow:0 0 0 3px rgba(36,65,232,.25)}
.campo [aria-invalid="true"],.campo [aria-invalid="true"]:focus-visible{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.18)}
.campo__error{font-size:.85rem;font-weight:560;color:#B3261E;min-height:0}
.campo__error:empty{display:none}
.campo ::placeholder{color:var(--gris)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__estado{font-weight:600;padding:12px 14px;border-radius:2px}
.form__estado:empty{display:none}
.form__estado[data-tipo="ok"]{background:var(--cobalto);color:var(--hueso)}
.form__estado[data-tipo="error"]{background:var(--tinta);color:var(--hueso)}

/* cierre y pie */
.cierre{background:var(--cobalto);color:var(--hueso);overflow:hidden}
.letrero{display:block;padding:clamp(28px,5vw,56px) 0 0;overflow:hidden;text-decoration:none}
.letrero__pista{display:flex;align-items:center;gap:clamp(20px,3vw,48px);width:max-content;padding-right:clamp(20px,3vw,48px);animation:corre-letrero 50s linear infinite}
@media (min-width:900px){.letrero__pista{animation-duration:75s}}
.letrero span{font-size:clamp(4.6rem,16vw,15rem);font-weight:780;font-stretch:125%;line-height:.9;letter-spacing:-.045em;text-transform:uppercase}
.letrero svg{flex:none;width:clamp(64px,10vw,150px);height:auto}
@keyframes corre-letrero{to{transform:translateX(-50%)}}
.cierre__cuerpo{max-width:var(--max);margin:0 auto;padding:clamp(32px,5vw,64px) var(--gutter) clamp(64px,9vw,112px);display:grid;gap:18px}
.cierre .t2{max-width:16ch}
.cierre__cuerpo>p{max-width:46ch;color:rgba(247,246,243,.86)}
.cierre__acc{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:8px}
.cierre :focus-visible{outline-color:var(--hueso)}
.pie{display:grid;gap:28px;padding:48px var(--gutter) calc(40px + env(safe-area-inset-bottom));background:var(--tinta);color:var(--gris-claro);font-size:.92rem}
.pie a{color:var(--hueso);text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie__marca{display:grid;gap:10px;align-content:start}
.pie__logo{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:620;font-stretch:112%;letter-spacing:.04em;text-transform:uppercase}
.pie__logo svg{width:34px;color:var(--cobalto)}
.pie__marca a[href^="mailto"]{display:inline-flex;min-height:44px;align-items:center}
.pie__lista{display:grid;align-content:start}
.pie__lista a{display:inline-flex;min-height:44px;align-items:center}
.pie__base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding-top:20px;border-top:1px solid var(--linea-clara)}
@media (min-width:900px){.pie{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:56px}.pie__marca{grid-column:span 2}.pie__base{grid-column:1/-1}}
@media (max-width:899px){.pie{grid-template-columns:1fr 1fr;column-gap:16px}.pie__marca,.pie__base{grid-column:1/-1}}

/* alineación en pantallas anchas */
.cab,.pie{padding-left:max(var(--gutter),calc((100% - var(--max))/2 + var(--gutter)));padding-right:max(var(--gutter),calc((100% - var(--max))/2 + var(--gutter)))}
.sec--linea:not(.sec--interna){border-top:0;background:linear-gradient(var(--linea),var(--linea)) var(--gutter) 0/calc(100% - 2*var(--gutter)) 1px no-repeat}
p{text-wrap:pretty}

/* revelados */
.js [data-rev]{transition:opacity 1100ms ease,transform 1400ms var(--ease-out)}
.js [data-rev]:not([data-visto]){opacity:0;transform:translateY(24px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0s!important}
  @view-transition{navigation:none}
  .letrero__pista{animation:none!important;width:auto;justify-content:center;padding:0 var(--gutter)}
  .letrero__pista>:not(:first-child){display:none}
  .letrero span{font-size:11.5vw}
  
  .ma__a{stroke-dashoffset:0!important}
  
}

/* ===== Inicio con referencia a interbrand.com ===== */
.chip-cotizar{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;min-height:48px;padding:0 22px;background:var(--cobalto);color:var(--hueso);font-size:.95rem;font-weight:600;font-stretch:112%;text-decoration:none;border-radius:2px;box-shadow:0 6px 20px rgba(18,18,18,.18);transition:transform 400ms var(--ease-out),opacity 400ms ease,background-color 200ms ease}
.chip-cotizar[data-oculto]{transform:translateY(150%);opacity:0;pointer-events:none;visibility:hidden;transition:transform 400ms var(--ease-out),opacity 400ms ease,visibility 0s 400ms}
.chip-cotizar:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.chip-cotizar:hover{background:var(--tinta)}}
.ib-hero{padding:clamp(8px,1.4vw,20px) 0 clamp(40px,6vw,80px);overflow:hidden}
.ib-hero__marca{display:block;width:calc(100% - 2*var(--gutter));height:auto;margin:0 var(--gutter);overflow:visible;animation:sube-txt 1400ms var(--ease-out) both}
.ib-hero__marca text,.pilar__svg text{font-family:"Archivo",system-ui,sans-serif;font-weight:720;font-stretch:125%;fill:currentColor}
.ib-hero__fila{max-width:var(--max);margin:clamp(20px,3vw,40px) auto 0;padding:0 var(--gutter);display:grid;gap:clamp(24px,4vw,56px);align-items:end}
@media (min-width:1000px){.ib-hero__fila{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.ib-hero__txt{display:grid;gap:18px;justify-items:start;animation:sube-txt 1400ms var(--ease-out) 250ms both}
.ib-hero__t{font-size:clamp(2rem,4.4vw,3.8rem);font-weight:660;font-stretch:125%;line-height:.98;letter-spacing:-.028em;max-width:14ch;text-wrap:balance}
.ib-hero__p{max-width:44ch;color:var(--gris);font-size:clamp(1rem,1.3vw,1.15rem)}
.ib-hero__vis{position:relative;background:var(--tinta);border-radius:2px;overflow:hidden;aspect-ratio:16/10;animation:sube-txt 1400ms var(--ease-out) 450ms both}
.ib-hero__vis video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.intro-activa .ib-hero__marca,.intro-activa .ib-hero__txt,.intro-activa .ib-hero__vis{animation-play-state:paused}
.cinta{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);overflow:hidden;padding:16px 0}
.cinta__pista{display:flex;align-items:center;gap:24px;width:max-content;padding-right:24px;will-change:transform;animation:corre-cinta 60s linear infinite}
.cinta span{font-size:clamp(1.05rem,1.8vw,1.5rem);font-weight:600;font-stretch:118%;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.cinta i{flex:none;width:18px;height:3px;background:var(--cobalto);transform:rotate(-22deg)}
@keyframes corre-cinta{to{transform:translateX(-50%)}}
/* titular fijo con tarjetas */
.fijo{position:relative}

.tj{container-type:inline-size;width:clamp(230px,26vw,360px);aspect-ratio:4/5;padding:clamp(16px,1.6vw,24px);display:flex;flex-direction:column;justify-content:space-between;gap:16px;border-radius:2px;overflow:hidden}

.tj p{display:grid;gap:2px;line-height:1}
.tj p span{font-size:clamp(1rem,1.3vw,1.2rem);font-weight:560;font-stretch:112%}
.tj p b{font-size:min(3.2rem,13cqi);font-weight:720;font-stretch:125%;letter-spacing:-.03em;line-height:.95}

.tj--t1{background:var(--cobalto);color:var(--hueso)}

.tj--t3{background:var(--tinta);color:var(--hueso)}

/* pilares: palabra fija + panel que sube */
.pilar{position:relative}
.pilar__palabra{position:sticky;top:var(--cab);display:grid;place-items:center;overflow:hidden;padding:clamp(40px,9vh,112px) var(--gutter)}
.pilar__svg{display:block;width:100%;max-height:70vh;overflow:visible}
.pilar__panel{position:relative;z-index:1;display:grid;gap:clamp(28px,4vw,64px);align-content:center;padding:clamp(56px,8vw,112px) max(var(--gutter),calc((100% - var(--max))/2 + var(--gutter)))}
@media (min-width:1000px){.pilar__panel{grid-template-columns:1fr 1fr;column-gap:56px;align-items:center}}
.pilar--ve .pilar__panel{background:var(--cobalto);color:var(--hueso)}
.pilar--mueve .pilar__panel{background:var(--tinta);color:var(--hueso)}
.pilar--funciona .pilar__panel{background:var(--papel);color:var(--tinta)}
.pilar__in{display:grid;gap:18px}
.pilar__in h3{font-size:clamp(2rem,4.4vw,4rem);font-weight:680;font-stretch:125%;line-height:.98;letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.pilar__p{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:46ch;opacity:.9}
.pilar__srv{margin-top:8px;border-top:1px solid currentColor}
.pilar__srv a{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 16px;padding:14px 0;border-bottom:1px solid currentColor;text-decoration:none}
.pilar__srv span{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:640;font-stretch:118%}
.pilar__srv small{grid-column:1;font-size:.88rem;font-weight:560;opacity:.8}
.pilar__srv b{grid-column:2;grid-row:1/3;align-self:center;font-size:1.4rem;font-weight:400;transition:transform 300ms var(--ease-out)}
.pilar--ve .pilar__srv,.pilar--ve .pilar__srv a,.pilar--mueve .pilar__srv,.pilar--mueve .pilar__srv a{border-color:rgba(247,246,243,.3)}
.pilar--funciona .pilar__srv,.pilar--funciona .pilar__srv a{border-color:var(--linea)}
@media (hover:hover) and (pointer:fine){.pilar__srv a:hover b{transform:translateX(6px)}.pilar__srv a:hover span{text-decoration:underline;text-underline-offset:5px}}
.pilar__vis{display:grid;place-items:center}
.pv{width:100%;max-width:460px}

/* frase que se ordena al bajar */
.frase{position:relative;height:150vh;--p:0}
.frase__in{position:sticky;top:var(--cab);height:calc(100vh - var(--cab));display:grid;place-items:center;overflow:hidden;padding:0 var(--gutter)}
.frase p{max-width:13ch;text-align:center;font-size:clamp(2.6rem,7vw,7.4rem);font-weight:720;font-stretch:125%;line-height:1;letter-spacing:-.04em}
.frase span{display:inline-block;transform:translate(calc(var(--dx) * (1 - var(--p))),calc(var(--dy) * (1 - var(--p)))) rotate(calc(var(--r) * (1 - var(--p))));opacity:calc(.35 + .65 * var(--p))}
.frase span:last-child{color:var(--cobalto)}
/* pie con datos y nombre gigante */
.pie{overflow:hidden}

.pie__paises{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--hueso);font-size:1rem}
.pie__paises i{width:14px;height:2px;background:var(--cobalto);transform:rotate(-22deg)}

@media (prefers-reduced-motion:reduce){.frase{--p:1!important;height:auto}.frase__in{position:static;height:auto;padding:80px var(--gutter)}.cinta__pista{animation:none!important}}
/* un solo botón de cotizar: en escritorio el del menú; en celular el fijo de abajo */
@media (min-width:960px){.chip-cotizar{display:none}}
@media (max-width:959px){.cab .boton--chico{display:none}}

.pie{padding-bottom:0}

@media (max-width:999px){
  
  
  
  .tj{width:72vw}
  
  .ib-hero__fila{margin-top:clamp(28px,8vw,40px)}
}


.campo{align-content:start}

main:focus{outline:none}
.frase span{transform:none;opacity:1}
.js .frase span{transform:translate(calc(var(--dx) * (1 - var(--p))),calc(var(--dy) * (1 - var(--p)))) rotate(calc(var(--r) * (1 - var(--p))));opacity:calc(.35 + .65 * var(--p))}

/* mapa de Estudio */
.ma{position:relative;width:100%}
.ma-svg{display:block;width:100%;height:auto;overflow:visible}
.ma__tierra{fill:var(--papel);stroke:rgba(18,18,18,.12);stroke-width:.6}
.ma__a{fill:none;stroke:var(--cobalto);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1}
.ma__pt circle{fill:var(--tinta)}
.ma__pt--origen circle{fill:var(--cobalto)}
.ma__pt{opacity:0;transform:translateY(-60px)}
.ma__pulso{fill:none;stroke:var(--cobalto);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.ma__t{position:absolute;transform:translate(10px,-50%);font-size:.75rem;font-weight:600;font-stretch:110%;color:var(--tinta-2);white-space:nowrap;opacity:0;transition:opacity 900ms ease;pointer-events:none}
.ma__t--izq{transform:translate(calc(-100% - 10px),-50%)}
.ma__t--der-abajo{transform:translate(8px,40%)}
.ma__t--izq-arriba{transform:translate(calc(-100% - 8px),-110%)}
[data-visto] .ma__pt{animation:cae 900ms cubic-bezier(.3,1.35,.5,1) forwards;animation-delay:calc(var(--i) * 260ms + 300ms)}
@keyframes cae{to{opacity:1;transform:none}}
[data-visto] .ma__t{opacity:1;transition-delay:calc(var(--i) * 260ms + 900ms)}
[data-visto] .ma__a{animation:traza-ra 1600ms var(--ease-out) forwards;animation-delay:calc(var(--i) * 300ms + 1900ms)}
[data-visto] .ma__pulso{animation:pulso 3.2s ease-out 1.4s infinite}
@keyframes pulso{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(4)}}
@media (prefers-reduced-motion:reduce){.ma__pt{opacity:1!important;transform:none!important}.ma__t{opacity:1!important}.ma__a{stroke-dashoffset:0!important}.ma__pulso{display:none}}

/* pie: países y firma en la columna de la marca */
.pie__marca .pie__paises{grid-column:auto;margin-top:6px;font-size:.95rem}

.pie{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.pie__base{justify-content:flex-end}

/* fotos */
.tj--foto{position:relative;padding:0;background:var(--tinta)}
.tj__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tj__vidrio{position:absolute;left:10px;right:10px;bottom:10px;padding:14px 16px;border-radius:2px;background:rgba(18,18,18,.82);color:var(--hueso);border:1px solid rgba(247,246,243,.18)}
.pv--foto{margin:0;overflow:hidden;border-radius:2px;background:var(--tinta)}
.pv--foto{width:100%;max-width:none;aspect-ratio:16/10}
.pv--foto img,.pv--foto video{width:100%;height:100%;object-fit:cover}

.srv__foto{margin:8px 0 0;border-radius:2px;overflow:hidden;aspect-ratio:4/5;max-width:440px;background:var(--papel)}
.srv__foto{position:relative}
.srv__foto img,.srv__foto video{width:100%;height:100%;object-fit:cover;display:block}
.ntf{position:absolute;left:12px;right:12px;top:12px;display:grid;gap:8px;margin:0;padding:0;list-style:none;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif}
.ntf__i{display:grid;grid-template-columns:38px 1fr auto;column-gap:10px;align-items:center;padding:11px 14px 12px;border-radius:20px;background:rgba(246,246,248,.8);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 10px 30px rgba(0,0,0,.18);color:#111;font-size:13px;line-height:1.3;
  animation:ntf-entra .7s cubic-bezier(.2,.9,.25,1.15) both;animation-delay:calc(.9s + var(--i) * 2.2s)}
.ntf__i svg{width:38px;height:38px;grid-row:1/span 2}
.ntf__i b{font-weight:600;font-size:14px}
.ntf__i time{color:#6e6e73;font-size:12px}
.ntf__i span{grid-column:2/span 2;color:#2b2b2e}
@keyframes ntf-entra{from{opacity:0;transform:translateY(-18px) scale(.97)}to{opacity:1;transform:none}}
.sin-mov .ntf__i{animation:none}
@media (prefers-reduced-motion:reduce){.ntf__i{animation:none}}
@media (min-width:1000px){
  .srv__cab{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:start}
  .srv__cab>*{grid-column:1}
  .srv__foto{grid-column:2;grid-row:1/span 6;margin:0;justify-self:end;width:100%;position:sticky;top:calc(var(--cab) + 24px)}
}

.menu-movil{background:var(--hueso)}
html:has(.menu-btn[aria-expanded="true"]) .chip-cotizar{visibility:hidden}

/* auditoría visual 2026-10-21 */
@media (min-width:960px){.cab__nav{width:max-content;gap:clamp(20px,2.4vw,36px)}.cab__nav a{white-space:nowrap}}
.js .frase span{--t:clamp(0, calc(var(--p) * 9 - var(--i)), 1);transform:translateY(calc((1 - var(--t)) * .35em));opacity:calc(.12 + .88 * var(--t))}
.pv--foto video{transform:scale(1.02)}

.ib-hero__marca{width:min(calc(100% - 2*var(--gutter)),calc(var(--max) - 2*var(--gutter)));margin:0 auto}
.menu-movil{height:calc(100dvh - var(--cab) + 1px)}
.pie__paises{gap:8px 14px}
.pie__paises .nw{display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
.pie__paises .nw i{width:14px;height:2px;background:var(--cobalto);transform:rotate(-22deg)}
.ma-svg{-webkit-mask-image:radial-gradient(120% 100% at 40% 60%,#000 70%,transparent 100%);mask-image:radial-gradient(120% 100% at 40% 60%,#000 70%,transparent 100%)}
[data-visto] .ma__pt{animation-timing-function:var(--ease-out)}

@media (min-width:960px){.cab__nav a[aria-current]{color:var(--tinta)}}
.migas a{padding:0 6px;margin:0 -6px}
.form__estado:focus{outline:none}
.boton[aria-disabled="true"]{opacity:.7;cursor:progress}
.pie__pausa{min-height:44px;padding:0;font-size:.85rem;color:var(--gris-claro);text-decoration:underline;text-underline-offset:3px}
.pie__pausa:hover{color:var(--hueso)}
.ib-hero__col{display:grid;justify-items:end;gap:4px;min-width:0}
.ib-hero__col .ib-hero__vis{width:100%}
.hero__pausa{min-height:44px;padding:0;font-size:.82rem;color:var(--gris);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.hero__pausa:hover{color:var(--tinta)}}
.pie__base{justify-content:space-between}
.sin-mov *,.sin-mov *::before,.sin-mov *::after{animation-play-state:paused!important}

/* margen para anclas: en los destinos, no en el html (si no, enfocar el encabezado fijo hace saltar la página) */
main [id],#contenido{scroll-margin-top:calc(var(--cab) + 16px)}

/* resultados que buscamos (fichas de servicio) */
.srv-res{padding-bottom:clamp(28px,4vw,56px)}
.res-lista{display:grid;gap:0;margin-top:clamp(20px,3vw,36px);border-top:1px solid var(--linea)}
@media (min-width:900px){.res-lista{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:56px;border-top:0}}
.res-lista li{position:relative;padding:clamp(18px,2.4vw,28px) 0 clamp(18px,2.4vw,28px) 34px;border-bottom:1px solid var(--linea);font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:620;font-stretch:115%;letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
@media (min-width:900px){.res-lista li{border-bottom:0;border-top:1px solid var(--linea);padding-left:0;padding-top:52px}}
.res-lista li::before{content:"";position:absolute;left:0;top:calc(clamp(18px,2.4vw,28px) + .55em);width:18px;height:3px;background:var(--cobalto);transform:rotate(-22deg)}
@media (min-width:900px){.res-lista li::before{top:24px}}

/* dirección creativa: experiencia por tipo y portafolio */
.est-dir__listas{display:grid;gap:clamp(28px,4vw,48px);margin-top:clamp(36px,5vw,64px)}
@media (min-width:900px){.est-dir__listas{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px}.est-dir__listas>div{grid-column:2}.est-dir__boton{margin-left:calc((100% - 56px) * 5 / 12 + 56px)}}
.est-dir__t{font-size:.95rem;font-weight:620;font-stretch:112%;color:var(--gris);margin-bottom:12px}
.dir-lista{border-top:1px solid var(--linea)}
.dir-lista li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--linea);font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:600;font-stretch:112%}
.dir-lista li::before{content:"";flex:none;width:14px;height:2.5px;background:var(--cobalto);transform:rotate(-22deg)}
.est-dir__boton{margin-top:clamp(32px,4vw,48px)}

/* aviso de privacidad */
.priv{display:grid;gap:clamp(28px,4vw,48px);max-width:72ch}
.priv__sec{display:grid;gap:10px}
.priv__sec p{color:var(--tinta-2);font-size:clamp(1rem,1.3vw,1.1rem)}
.pie__base a{color:inherit;text-underline-offset:3px}

/* portada B: sello de lugar, situaciones, cómo trabajamos y trabajo */
.sello{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.88rem;font-weight:600;font-stretch:110%;letter-spacing:.01em;color:var(--gris)}
.sello i{flex:none;width:14px;height:2px;background:var(--cobalto);transform:rotate(-22deg)}
.sello [data-reloj]{color:var(--tinta);font-variant-numeric:tabular-nums}
.sello__sep{opacity:.5}
.tj .tj__vidrio b{font-size:min(1.75rem,8cqi);line-height:1.05;letter-spacing:-.02em}
.tj .tj__vidrio span{display:block;margin-top:8px;font-size:clamp(.9rem,1.1vw,1rem);font-weight:500;font-stretch:100%;line-height:1.35;opacity:.88}
.como{display:grid;gap:clamp(28px,4vw,48px);justify-items:start}
.como__pasos{width:100%;display:grid;gap:clamp(20px,3vw,40px);border-top:1px solid var(--linea)}
@media (min-width:900px){.como__pasos{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:56px}}
.como__pasos li{display:grid;gap:10px;align-content:start;padding-top:clamp(18px,2.4vw,28px)}
.como__n{font-size:.85rem;font-weight:650;font-stretch:110%;color:var(--cobalto);font-variant-numeric:tabular-nums}
.como__pasos h3{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:660;font-stretch:122%;letter-spacing:-.02em;line-height:1.05}
.como__pasos p{color:var(--tinta-2);max-width:36ch}
.trabajo{max-width:var(--max);margin:0 auto;padding:clamp(64px,9vw,128px) var(--gutter);display:grid;gap:22px;justify-items:start}
.trabajo .t2{max-width:14ch}
.trabajo>p{max-width:52ch;color:var(--gris);font-size:clamp(1.05rem,1.4vw,1.2rem)}

/* ===== Pieza de motion «SE MUEVE» (14 s en bucle). 1 s = 7.14 %. Sin .mr--play se ve el cierre fijo. ===== */

/* estado fijo (sin animación): solo el cierre */

/* gancho */

/* boina que se corta */

/* reel */

/* barrido cobalto a −22° */

/* la boina se pone el segundo video */

@keyframes mr-gancho{0%{opacity:1}11%{opacity:1;transform:none}13.5%{opacity:0;transform:translateY(-6cqi)}100%{opacity:0;transform:translateY(-6cqi)}}
@keyframes mr-g{0%{opacity:0;transform:translateY(40%)}2.6%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes mr-ov{0%,24%{opacity:1}25.5%,99%{opacity:0}100%{opacity:1}}
@keyframes mr-sil{0%,11.5%{clip-path:inset(100% 0 0 0)}16.5%,98%{clip-path:inset(0 0 0 0)}98.1%,100%{clip-path:inset(100% 0 0 0)}}
@keyframes mr-corte{0%,16.5%{stroke-dashoffset:1}20%,95%{stroke-dashoffset:0}95.1%,100%{stroke-dashoffset:1}}
@keyframes mr-ui{0%,23.5%{opacity:0}25.5%,44.5%{opacity:1}46%,100%{opacity:0}}
@keyframes mr-b1{0%,24.5%{transform:scaleX(0)}30.5%,100%{transform:scaleX(1)}}
@keyframes mr-b2{0%,30.5%{transform:scaleX(0)}37.5%,100%{transform:scaleX(1)}}
@keyframes mr-b3{0%,37.5%{transform:scaleX(0)}45%,100%{transform:scaleX(1)}}
@keyframes mr-w{0%,26.5%{opacity:0;transform:translateY(60%)}29.5%,43.5%{opacity:1;transform:none}45.5%,100%{opacity:0;transform:translateY(-20%)}}
@keyframes mr-barrido{0%,45%{clip-path:polygon(-40% 0,-40% 0,-80% 100%,-80% 100%)}49.5%,66%{clip-path:polygon(-40% 0,140% 0,100% 100%,-80% 100%)}69.5%,100%{clip-path:polygon(140% 0,140% 0,100% 100%,100% 100%)}}
@keyframes mr-srv{0%,48.5%{opacity:0;transform:translateX(-30%)}53%,100%{opacity:1;transform:none}}
@keyframes mr-v2{0%,65%{opacity:0}66%,84%{opacity:1}85.5%,100%{opacity:0}}
@keyframes mr-mask{0%,70.5%{-webkit-mask-size:70%;mask-size:70%}79%,100%{-webkit-mask-size:900%;mask-size:900%}}
@keyframes mr-fin{0%,83.5%{opacity:0}85%,100%{opacity:1}}
@keyframes mr-flogo{0%,84.5%{opacity:0;transform:scale(.9)}88%,97%{opacity:1;transform:none}99.5%,100%{opacity:0;transform:none}}
@keyframes mr-fmarca{0%,86.5%{opacity:0;transform:translateY(30%)}90%,97%{opacity:1;transform:none}99.5%,100%{opacity:0;transform:none}}
@keyframes mr-flema{0%,89%{opacity:0;transform:translateY(30%)}92.5%,97%{opacity:1;transform:none}99.5%,100%{opacity:0;transform:none}}

/* Estudio: equipo por proyecto + sin cliente típico */

/* Servicios agrupados por pilar (estilo Wolff Olins) */
.pilar-grupo+.pilar-grupo{margin-top:clamp(48px,7vw,96px)}
.pilar-grupo__t{display:flex;align-items:baseline;gap:14px;margin:0 0 clamp(14px,2vw,22px);font-size:.86rem;font-weight:650;font-stretch:112%;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalto)}
.pilar-grupo__t span{color:var(--gris);font-variant-numeric:tabular-nums}
.sl__sub{grid-column:1;display:flex;flex-wrap:wrap;gap:6px 18px;margin:4px 0 0;padding:0;list-style:none;font-size:.9rem;font-weight:600;font-stretch:112%;color:var(--tinta)}
.sl__sub li{display:flex;align-items:center;gap:8px}
.sl__sub li::before{content:"";flex:none;width:10px;height:2px;background:var(--cobalto);transform:rotate(-22deg)}
@media (min-width:900px){.sl__sub{grid-column:2;grid-row:2}}
/* Estudio: cómo está armado */

.areas{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--linea)}
.areas li{display:grid;grid-template-columns:3rem 1fr;gap:4px 16px;padding:clamp(18px,2.4vw,28px) 0;border-bottom:1px solid var(--linea)}
.areas__n{grid-row:1/3;font-size:.85rem;font-weight:620;font-stretch:112%;color:var(--cobalto);padding-top:.5em;font-variant-numeric:tabular-nums}
.areas h3{margin:0;font-size:clamp(1.5rem,3vw,2.6rem);font-weight:640;font-stretch:125%;letter-spacing:-.025em;line-height:1}
.areas p{margin:0;color:var(--gris);max-width:52ch}
@media (min-width:900px){.areas li{grid-template-columns:3rem calc((100% - 56px) * 5 / 12 + 56px - 3rem) minmax(0,1fr);align-items:baseline;column-gap:0}.areas h3{padding-right:56px}.areas__n{grid-row:1}.areas p{grid-column:3}}

.pie__paises-t{flex-basis:100%;font-size:.85rem;opacity:.7}
.srv__nota{margin-top:14px;font-size:.92rem;color:var(--gris)}
.serv-base{margin-bottom:clamp(48px,7vw,96px)}
.est-sec .areas{margin-top:clamp(32px,5vw,56px)}

/* ===== Videos de industrias (portada): paneles a pantalla completa que se apilan al bajar ===== */
.ir{position:relative;background:#0b0b0b}
.ir__lista{margin:0;padding:0;list-style:none}
.ir{--ir-top:var(--cab)}
.ir__panel{--cab:0px;position:sticky;top:var(--ir-top);height:calc(100svh - var(--ir-top));min-height:480px;overflow:hidden;background:#0b0b0b}
@media (max-width:699px){.ir__panel{height:calc(80svh - var(--ir-top));min-height:440px}}
.ir__video{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--x,50%) 50%;display:block}
.ir__panel::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(11,11,11,.62) 0%,rgba(11,11,11,.18) 38%,rgba(11,11,11,0) 60%)}
.ir__label{position:absolute;z-index:2;left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));right:var(--gutter);bottom:clamp(28px,6vh,64px);margin:0;display:grid;gap:10px;color:var(--hueso)}
.ir__n{font-size:.85rem;font-weight:600;font-stretch:112%;letter-spacing:.06em;opacity:.8;font-variant-numeric:tabular-nums}
.ir__t{display:flex;align-items:center;gap:.32em;font-size:clamp(2rem,6.4vw,5.6rem);font-weight:720;font-stretch:125%;letter-spacing:-.035em;line-height:.95;text-wrap:balance}
.ir__t::before{content:"";flex:none;width:.5em;height:.09em;background:var(--cobalto);transform:rotate(-22deg)}
/* Grano de película encima de los videos de industrias: capa de ruido que salta de lugar ~12 veces por segundo, solo en el panel activo */
.ir__panel::before{content:"";position:absolute;z-index:1;inset:-60%;pointer-events:none;opacity:.14;mix-blend-mode:overlay;background-size:220px 220px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncG type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncB type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.ir__panel.is-activo::before{animation:ir-grano .5s steps(6) infinite}
@keyframes ir-grano{0%{transform:translate(0,0)}17%{transform:translate(-7%,4%)}33%{transform:translate(5%,-6%)}50%{transform:translate(-4%,-3%)}67%{transform:translate(6%,5%)}83%{transform:translate(-5%,7%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.ir__panel.is-activo::before{animation:none}}
.sin-mov .ir__panel::before{animation:none!important}

/* ===== Elementos de motion encima de los videos de industrias (aparecen cuando el panel queda arriba) ===== */
.ir-x{position:absolute;z-index:2;margin:0;padding:0;list-style:none;color:var(--hueso)}
.ir-x>*{transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(.5s + var(--k,0) * .14s)}
.js .ir-x>*{opacity:0;transform:translateY(14px)}
.js .ir__panel.is-visto .ir-x>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .ir-x>*{opacity:1;transform:none;transition:none}}

/* 01 antro: lista de salas como cartel */
.ir-x--salas{right:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));top:38%;display:grid;gap:4px;font-size:clamp(.95rem,1.4vw,1.25rem);font-weight:600;font-stretch:112%;letter-spacing:.02em;text-transform:uppercase}
.ir-x--salas li{opacity:.5}
.js .ir__panel.is-visto .ir-x--salas li{opacity:.45}.js .ir__panel.is-visto .ir-x--salas li.on{opacity:1}
.ir-x--salas span{font-variant-numeric:tabular-nums;margin-right:.35em}
/* 02 festival */
.ir-x--fest{right:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));top:calc(var(--cab) + 7vh);display:grid;justify-items:end;gap:12px}
/* 03 moda: ficha con línea hacia la bota */
.ir-x--ficha{left:76%;top:50%;display:grid;grid-template-columns:auto auto;align-items:center;gap:0}
.ir-x__punto{width:10px;height:10px;border-radius:50%;background:var(--hueso);box-shadow:0 0 0 6px rgba(247,246,243,.25);position:absolute;left:-74px;top:44px}
.ir-x__linea{position:absolute;left:-66px;top:48px;width:70px;height:1.5px;background:var(--hueso);transform-origin:left;transform:rotate(-22deg)}
.ir-x--ficha p{display:grid;gap:2px;padding:10px 14px;border-left:2px solid var(--cobalto);background:rgba(11,11,11,.32);backdrop-filter:blur(8px);font-size:.95rem}
.ir-x--ficha b{font-weight:650;font-stretch:115%}.ir-x--ficha span{opacity:.8;font-size:.85rem}
.js .ir-x--ficha .ir-x__punto,.js .ir-x--ficha .ir-x__linea{opacity:0;transition:opacity .8s var(--ease-out) .5s}
.js .ir__panel.is-visto .ir-x--ficha .ir-x__punto,.js .ir__panel.is-visto .ir-x--ficha .ir-x__linea{opacity:1}
/* 04 bienes raíces: datos de la propiedad */
.ir-x--chips{right:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));top:calc(var(--cab) + 6vh);display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:520px}
.ir-x--chips li{padding:.5em 1em;border-radius:999px;background:rgba(247,246,243,.88);color:var(--tinta);font-size:.88rem;font-weight:600;font-stretch:112%}
@media (max-width:699px){
  .ir-x--salas{top:auto;bottom:calc(clamp(28px,6vh,64px) + 120px);right:var(--gutter);font-size:.8rem}
  .ir-x--fest,.ir-x--chips{top:calc(var(--cab) + 16px)}
  .ir-x--ficha{left:auto;right:var(--gutter);top:calc(var(--cab) + 16px)}.ir-x--ficha .ir-x__punto,.ir-x--ficha .ir-x__linea{display:none}
}

/* 05 comercio en línea: interfaz de tienda (tarjetas de producto + app) */
.ir-x--shop{inset:0;pointer-events:none}
.ir-card{position:absolute;display:grid;gap:6px;width:150px;padding:12px 12px 14px;border-radius:16px;background:#fff;color:var(--tinta);box-shadow:0 20px 44px rgba(0,0,0,.18);font-size:.82rem}
.ir-card__top{display:flex;justify-content:space-between;align-items:center}.ir-card__top b{font-weight:650;font-stretch:112%}
.ir-card__fav svg,.ir-app__fav svg{width:16px;height:16px;fill:none;stroke:#9a9893;stroke-width:1.6}
.ir-card__fav.on svg,.ir-app__fav svg{fill:#E0447A;stroke:#E0447A}
.ir-card img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px;background:#EEEDE9}
.ir-card__p{display:grid;gap:0}.ir-card__p s{font-size:.72rem;color:var(--gris)}.ir-card__p b{font-size:1.05rem;font-weight:720}
.ir-card--a{left:47%;top:15%}.ir-card--b{left:37%;top:58%}
.js .ir__panel.is-activo .ir-card{animation:ir-flota 5s var(--ease-io) infinite alternate;animation-delay:calc(var(--k) * -2.5s)}
@keyframes ir-flota{from{translate:0 0}to{translate:0 -12px}}
.ir-app{position:absolute;right:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));top:calc(var(--cab) + 3vh);width:min(320px,25vw);border-radius:30px;background:#F2F1EE;color:var(--tinta);box-shadow:0 30px 70px rgba(0,0,0,.25);overflow:hidden}
.ir-app__bar{display:grid;grid-template-columns:20px 1fr 20px;align-items:center;padding:16px 18px 6px;font-size:.78rem;color:var(--gris);text-align:center}.ir-app__bar span:first-child{font-size:1rem;color:var(--tinta)}
.ir-app__hero{position:relative;height:clamp(140px,15vw,190px)}
.ir-app__hero img{position:absolute;inset:6px 40px 18px;width:calc(100% - 80px);height:calc(100% - 24px);object-fit:contain;mix-blend-mode:multiply}
.ir-app__orbita{position:absolute;left:16%;right:16%;bottom:10px;height:22px;border-bottom:1.5px dashed rgba(18,18,18,.25);border-radius:50%}
.ir-app__punto{position:absolute;left:50%;bottom:3px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--cobalto);box-shadow:0 0 0 3px #F2F1EE}
.js .ir__panel.is-activo .ir-app__punto{animation:ir-orbita 6s var(--ease-io) infinite}
@keyframes ir-orbita{0%,100%{transform:translateX(0)}30%{transform:translateX(-58px) translateY(-6px)}65%{transform:translateX(58px) translateY(-6px)}}
.ir-app__minis{display:flex;justify-content:center;gap:12px;padding:6px 0 14px}
.ir-app__mini{width:clamp(44px,4.4vw,58px);aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.ir-app__mini--1{border-radius:22px;transform:rotate(-8deg)}
.ir-app__hoja{display:grid;gap:10px;padding:18px;background:#fff;border-radius:26px 26px 0 0}
.ir-app__fila{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ir-app__n{font-size:1.2rem;font-weight:700;font-stretch:115%;letter-spacing:-.01em}
.ir-app__cod{padding:.25em .7em;border-radius:999px;background:#EEEDE9;font-size:.7rem;color:var(--gris)}
.ir-app__precio{display:flex;align-items:baseline;gap:8px}.ir-app__precio b{font-size:1.45rem;font-weight:760;letter-spacing:-.02em}.ir-app__precio s{font-size:.8rem;color:var(--gris)}
.ir-app__specs{display:grid;grid-template-columns:repeat(3,1fr);font-size:.72rem}
.ir-app__specs div{display:grid;gap:2px;padding:0 8px;border-left:1px dashed #d6d4cf}.ir-app__specs div:first-child{padding-left:0;border-left:0}
.ir-app__specs span{color:var(--gris)}.ir-app__specs b{font-weight:650}
.ir-app__btn{display:block;margin-top:4px;padding:.85em;border-radius:999px;background:#13261C;color:#fff;text-align:center;font-size:.85rem;font-weight:600}
.js .ir__panel.is-activo .ir-app__btn{animation:ir-btn 6s ease infinite}
@keyframes ir-btn{0%,78%,100%{transform:none}84%{transform:scale(.96)}90%{transform:none}}

/* 06 experiencias: seguimiento por etapas, estilo estado de vuelo, en vidrio */
.ir-x--viaje{right:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));top:calc(var(--cab) + 4vh);width:min(380px,32vw)}
.ir-viaje{display:grid;gap:16px;padding:20px;border-radius:24px;background:linear-gradient(160deg,rgba(40,40,40,.34),rgba(15,15,15,.42));border:1px solid rgba(255,255,255,.28);text-shadow:0 1px 8px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 24px 60px rgba(0,0,0,.18);--T:12s}
.ir-viaje__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ir-viaje__cab p{display:grid;gap:2px}.ir-viaje__cab b{font-size:1.1rem;font-weight:680;font-stretch:115%}.ir-viaje__cab span{font-size:.78rem;opacity:.85}
.ir-viaje__vivo{display:inline-flex;align-items:center;gap:6px;padding:.3em .7em;border-radius:999px;background:rgba(255,255,255,.22);font-size:.7rem;font-weight:600;white-space:nowrap}
.ir-viaje__vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:#5BE38A;animation:ir-vivo 1.6s ease infinite}
@keyframes ir-vivo{50%{opacity:.3}}
.ir-viaje__ruta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.ir-viaje__ruta>div:not(.ir-viaje__linea){display:grid;gap:2px}.ir-viaje__ruta>div:last-child{text-align:right}
.ir-viaje__ruta b{font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums}.ir-viaje__ruta span{font-size:.7rem;opacity:.85}
.ir-viaje__linea{position:relative;height:2px;background:rgba(255,255,255,.3);border-radius:2px}
.ir-viaje__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--hueso);border-radius:2px}
.ir-viaje__icono{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--hueso);box-shadow:0 0 0 5px rgba(255,255,255,.25)}
.js .ir__panel.is-activo .ir-viaje__fill{animation:ir-avance var(--T) var(--ease-io) infinite;--prop:width}
.js .ir__panel.is-activo .ir-viaje__icono{animation:ir-avance-i var(--T) var(--ease-io) infinite}
@keyframes ir-avance{0%,10%{width:0}22%,35%{width:33.3%}47%,60%{width:66.6%}72%,92%{width:100%}100%{width:0}}
@keyframes ir-avance-i{0%,10%{left:0}22%,35%{left:33.3%}47%,60%{left:66.6%}72%,92%{left:100%}100%{left:0}}
.ir-viaje__estado{position:relative;height:1.3em;font-size:.95rem;font-weight:600}
.ir-viaje__estado span{position:absolute;inset:0;opacity:0}
.ir-viaje__estado span:first-child{opacity:1}
.js .ir__panel.is-activo .ir-viaje__estado span{opacity:0;animation:ir-estado var(--T) ease infinite;animation-delay:calc(var(--s) * var(--T) / 4)}
@keyframes ir-estado{0%,2%{opacity:0;transform:translateY(6px)}6%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-6px)}}
.ir-viaje__etapas{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0;padding:0;list-style:none}
.ir-viaje__etapas li{display:grid;gap:3px;font-size:.72rem}
.ir-viaje__etapas i{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7)}
.ir-viaje__etapas b{font-weight:650}.ir-viaje__etapas span{opacity:.8;font-variant-numeric:tabular-nums}
.js .ir__panel.is-activo .ir-viaje__etapas i{animation:ir-etapa var(--T) ease infinite;animation-delay:calc(var(--s) * var(--T) / 4)}
@keyframes ir-etapa{0%{background:transparent}4%,100%{background:var(--hueso)}}
@media (prefers-reduced-motion:reduce){.ir-viaje__fill{width:66.6%}.ir-viaje__icono{left:66.6%}}

/* Indicador de scroll en los videos: sigue bajando / volver arriba */
.ir-scroll{position:absolute;z-index:3;right:clamp(10px,1.4vw,22px);top:50%;display:grid;justify-items:center;gap:10px;color:var(--hueso);text-decoration:none;transform:translateY(-50%)}
.ir-scroll span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.72rem;font-weight:600;font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.ir-scroll i{position:relative;width:1.5px;height:54px;background:rgba(247,246,243,.3);overflow:hidden}
.ir-scroll i::after{content:"";position:absolute;left:0;right:0;height:40%;background:var(--hueso);animation:ir-baja 1.8s var(--ease-io) infinite}
@keyframes ir-baja{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
.ir-scroll--arriba{pointer-events:auto;cursor:pointer}
.ir-scroll--arriba i::after{animation-name:ir-sube}
@keyframes ir-sube{from{transform:translateY(260%)}to{transform:translateY(-100%)}}
.ir-scroll--arriba:hover span,.ir-scroll--arriba:focus-visible span{opacity:1}
@media (prefers-reduced-motion:reduce){.ir-scroll i::after{animation:none;transform:none;height:100%;opacity:.6}}

/* «Cuándo llamar a Beret»: carrusel horizontal */
.car{max-width:var(--max);margin:0 auto;padding:clamp(64px,9vw,120px) 0 clamp(48px,7vw,96px)}
.car__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 var(--gutter);margin-bottom:clamp(24px,3vw,40px)}
.car__cab .t2{max-width:12ch}
.car__ctrl{display:flex;gap:10px;flex:none}
.car__btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--tinta);background:transparent;color:var(--tinta);font-size:1.2rem;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .16s ease}
.car__btn:hover{background:var(--tinta);color:var(--hueso)}.car__btn:active{transform:scale(.95)}
.car__btn:focus-visible{outline:2px solid var(--cobalto);outline-offset:3px}
.car__pista{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,30vw,400px);gap:clamp(14px,1.6vw,24px);margin:0;padding:0 var(--gutter) 6px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.car__pista::-webkit-scrollbar{display:none}
.car__pista:focus-visible{outline:2px solid var(--cobalto);outline-offset:4px}
.car .tj{width:auto;margin:0;scroll-snap-align:start}
.car__barra{height:2px;margin:clamp(20px,2.6vw,32px) var(--gutter) 0;background:var(--linea);overflow:hidden}
.car__barra i{display:block;height:100%;width:25%;background:var(--cobalto);transform-origin:left;transition:transform .5s var(--ease-out)}
@media (max-width:699px){.car__pista{grid-auto-columns:78vw}.car__btn{width:44px;height:44px}}
@media (max-width:699px){.ir-x--salas{right:calc(var(--gutter) + 22px)}}
@media (max-width:699px){
  .ir-card{display:none}
  .ir-app{width:min(64vw,250px);right:calc(var(--gutter) + 22px);top:calc(var(--cab) + 12px);border-radius:24px}
  .ir-app__bar{padding:12px 14px 4px;font-size:.7rem}
  .ir-app__hero{height:110px}.ir-app__minis{gap:8px;padding:4px 0 10px}.ir-app__mini{width:38px}
  .ir-app__hoja{gap:7px;padding:14px;border-radius:20px 20px 0 0}.ir-app__n{font-size:1rem}.ir-app__precio b{font-size:1.15rem}
  .ir-app__specs{font-size:.64rem}.ir-app__specs div{padding:0 5px}.ir-app__btn{padding:.7em;font-size:.78rem}
  .ir-x--viaje{left:var(--gutter);right:calc(var(--gutter) + 26px);width:auto;top:calc(var(--cab) + 12px)}
  .ir-viaje{padding:16px;gap:12px}.ir-viaje__ruta b{font-size:1.15rem}.ir-viaje__etapas li{font-size:.66rem}
}

/* v5: experiencias abajo, sobre el título, con ruta subiendo el volcán y pines; comercio en línea más chico en celular */
.ir-x--viaje{left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));right:auto;top:auto;bottom:calc(clamp(28px,6vh,64px) + clamp(2rem,6.4vw,5.6rem) + 64px);width:min(380px,32vw)}
.ir-ruta{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none}
.ir-ruta__base{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2.5;stroke-dasharray:6 8;stroke-linecap:round;stroke-linejoin:round}
.ir-ruta__hecho{fill:none;stroke:var(--hueso);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
.ir-ruta__yo{fill:var(--cobalto);stroke:var(--hueso);stroke-width:3}
.ir-ruta,.ir-ruta *{transition:opacity .8s ease}
.js .ir__panel:not(.is-visto) .ir-ruta{opacity:0}
.ir-pin__in{transform-box:fill-box;transform-origin:50% 100%}
.ir-pin path{fill:var(--hueso)}.ir-pin circle{fill:var(--cobalto)}
.ir-pin rect{fill:rgba(18,18,18,.55);stroke:rgba(255,255,255,.3)}
.ir-pin text{fill:var(--hueso);font-family:inherit;font-size:15px;font-weight:600}
.js .ir-pin__in{opacity:0;transform:translateY(-14px) scale(.6)}
.js .ir__panel.is-visto .ir-pin__in{opacity:1;transform:none;transition:opacity .6s ease,transform .8s var(--ease-out);transition-delay:calc(.8s + var(--p) * .7s)}
@media (prefers-reduced-motion:reduce){.js .ir-pin__in{opacity:1;transform:none}}
@media (max-width:699px){
  .ir-x--viaje{left:var(--gutter);right:auto;top:auto;bottom:calc(clamp(28px,6vh,64px) + 74px);width:300px;scale:.74;transform-origin:left bottom}
  .ir-card{display:grid;width:150px;scale:.62}
  .ir-card--a{left:var(--gutter);right:auto;top:auto;bottom:calc(clamp(28px,6vh,64px) + 250px);transform-origin:left bottom}
  .ir-card--b{left:calc(var(--gutter) + 70px);right:auto;top:auto;bottom:calc(clamp(28px,6vh,64px) + 96px);display:grid;transform-origin:left bottom}
  .ir-card{transform-origin:left bottom}
  .ir-app{width:250px;top:auto;right:calc(var(--gutter) + 20px);bottom:calc(clamp(28px,6vh,64px) + 88px);scale:.62;transform-origin:right bottom}
}

/* 02 festival: boleto que se valida + pulsera */
.ir-x--fest{display:grid;justify-items:end;gap:14px}
.ir-boleto{display:grid;grid-template-columns:1fr auto;width:min(360px,30vw);border-radius:16px;background:var(--hueso);color:var(--tinta);box-shadow:0 24px 50px rgba(0,0,0,.25);overflow:hidden;rotate:-3deg}
.ir-boleto__cuerpo{display:grid;gap:8px;padding:16px 16px 14px;border-right:2px dashed rgba(18,18,18,.22);position:relative}
.ir-boleto__cuerpo::before,.ir-boleto__cuerpo::after{content:"";position:absolute;right:-9px;width:16px;height:16px;border-radius:50%;background:rgba(11,11,11,.55)}
.ir-boleto__cuerpo::before{top:-8px}.ir-boleto__cuerpo::after{bottom:-8px}
.ir-boleto__ev{font-size:1.15rem;font-weight:720;font-stretch:118%;letter-spacing:-.01em;line-height:1}
.ir-boleto__dato{display:grid;font-size:.74rem;color:var(--gris)}
.ir-boleto__fila{display:flex;gap:18px;margin-top:2px}.ir-boleto__fila div{display:grid}.ir-boleto__fila span{font-size:.62rem;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}.ir-boleto__fila b{font-size:1.1rem;font-weight:720}
.ir-boleto__talon{display:grid;align-content:center;justify-items:center;gap:8px;padding:12px 14px;background:var(--cobalto);color:var(--hueso)}
.ir-boleto__barras{position:relative;display:flex;gap:2px;height:46px;padding:4px;background:var(--hueso);border-radius:4px;overflow:hidden}
.ir-boleto__barras i{display:block;background:var(--tinta)}
.ir-boleto__scan{position:absolute;left:0;right:0;top:0;height:2px!important;width:auto!important;background:#ff3b30!important;box-shadow:0 0 8px #ff3b30;opacity:0}
.ir-boleto__ok{font-size:.7rem;font-weight:650;opacity:.35}
.js .ir__panel.is-activo .ir-boleto__scan{animation:ir-scan 5s ease-in-out infinite}
.js .ir__panel.is-activo .ir-boleto__ok{animation:ir-ok 5s ease infinite}
@keyframes ir-scan{0%,15%{opacity:0;transform:translateY(0)}20%{opacity:1}45%{opacity:1;transform:translateY(42px)}50%,100%{opacity:0;transform:translateY(42px)}}
@keyframes ir-ok{0%,45%{opacity:.35}52%,92%{opacity:1}100%{opacity:.35}}
.ir-pulsera{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 16px;border-radius:6px;background:#E8FF5A;color:var(--tinta);font-size:.66rem;font-weight:750;letter-spacing:.12em;box-shadow:0 12px 30px rgba(0,0,0,.2);rotate:4deg}
.ir-pulsera i{width:16px;height:16px;border-radius:50%;background:var(--tinta);box-shadow:inset 0 0 0 4px #E8FF5A,inset 0 0 0 6px var(--tinta)}
.js .ir__panel.is-activo .ir-boleto{animation:ir-flota 6s var(--ease-io) infinite alternate}
@media (max-width:699px){.ir-x--fest{right:calc(var(--gutter) + 20px);top:auto;bottom:calc(clamp(28px,6vh,64px) + 96px);scale:.68;transform-origin:right bottom}.ir-boleto{width:320px}}
/* comercio en línea: nada encima de la cara */
.ir-card--b{left:53%;top:56%}
@media (max-width:699px){
  .ir-card{scale:.5}.ir-card--b{display:none}
  .ir-card--a{bottom:calc(clamp(28px,6vh,64px) + 120px)}
  .ir-app{scale:.5;bottom:calc(clamp(28px,6vh,64px) + 64px)}
}
@media (max-width:699px){.ir__video{object-position:50% 50%}}
/* contraste de los textos chicos sobre video */
.ir__panel::after{background:linear-gradient(to top,rgba(11,11,11,.72) 0%,rgba(11,11,11,.2) 40%,rgba(11,11,11,0) 62%),linear-gradient(to bottom,rgba(11,11,11,.32),rgba(11,11,11,0) 22%)}
.ir__n{opacity:1;font-size:.9rem;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.ir-scroll span{opacity:1;font-size:.76rem;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.ir-scroll i{background:rgba(247,246,243,.45)}
.ir-viaje__cab span,.ir-viaje__ruta span,.ir-viaje__etapas span{opacity:1}
.ir .ir-scroll--arriba:focus-visible{outline:2px solid var(--hueso);outline-offset:6px}
@media (prefers-reduced-motion:reduce){.ir-viaje__vivo::before{animation:none}}
.sin-mov .ir-viaje__vivo::before{animation:none}

/* ===== Kinetic type (pilar MOTION). 12 s; 1 s = 8.333 %. Sin .kn--play se ve la escena 1 fija. ===== */
.kn-sec{background:#0b0b0b}
.kn{--T:12s;position:relative;width:100%;height:min(56.25vw,88svh);min-height:420px;overflow:hidden;container-type:inline-size;isolation:isolate;background:#0b0b0b;color:var(--hueso)}
.kn video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kn__s{position:absolute;inset:0;opacity:0}
.kn__s1{opacity:1}
.kn__vid{position:absolute;inset:0}
.kn__masc{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;background:#0b0b0b;color:#fff;mix-blend-mode:multiply;font-size:17cqi;font-weight:800;font-stretch:125%;letter-spacing:-.045em;line-height:.8}
.kn__masc span{display:inline-block}
/* escena 2: palabras al ritmo */
.kn__s2{background:var(--hueso);color:var(--cobalto);display:grid;place-items:center}
.kn__pal{position:relative;margin:0;width:100%;height:1em;font-size:15cqi;font-weight:780;font-stretch:125%;letter-spacing:-.04em;line-height:1}
.kn__pal span{position:absolute;inset:0;text-align:center;opacity:0}
.kn__pal span:nth-child(even){color:transparent;-webkit-text-stroke:.025em var(--cobalto)}
.kn__cont{position:absolute;left:4cqi;top:4cqi;margin:0;font-size:max(12px,1.5cqi);font-weight:650;font-variant-numeric:tabular-nums;color:var(--tinta)}
.kn__cont span{position:absolute;opacity:0}
/* escena 3: pantalla dividida */
.kn__mitad{position:absolute;left:0;top:0;bottom:0;width:50%;overflow:hidden}
.kn__lin{position:absolute;left:54%;right:4cqi;top:50%;translate:0 -50%;margin:0;display:grid;font-size:6.4cqi;font-weight:740;font-stretch:122%;letter-spacing:-.03em;line-height:1}
.kn__lin>span{display:block;overflow:hidden;padding-bottom:.06em}
.kn__lin>span>span{display:block;translate:0 110%}
.kn__lin>span:last-child{color:var(--cobalto)}
.kn__barra{position:absolute;left:50%;bottom:0;height:1.2cqi;min-height:6px;width:50%;background:var(--cobalto);transform-origin:left;scale:0 1}
/* escena 4: filas que corren */
.kn__s4{display:grid;align-content:center;gap:1cqi}
.kn__vid--fila{z-index:-1;opacity:.35}
.kn__fila{margin:0;white-space:nowrap;font-size:9cqi;font-weight:780;font-stretch:125%;letter-spacing:-.03em;line-height:1;text-transform:uppercase}
.kn__fila--b{color:transparent;-webkit-text-stroke:.022em var(--hueso)}
.kn__fila--c{color:var(--cobalto)}
/* escena 5: cierre */
.kn__s5{display:grid;place-content:center;justify-items:center;gap:2cqi;background:#0b0b0b}
.kn__logo{width:12cqi;height:auto;color:var(--cobalto)}
.kn__marca{margin:0;font-size:5cqi;font-weight:740;font-stretch:125%;letter-spacing:.01em}
.kn__fin{margin:0;font-size:max(14px,1.8cqi);opacity:.75}

.kn--play .kn__s1{animation:kn-s1 var(--T) linear infinite}
.kn--play .kn__masc span{animation:kn-letra var(--T) var(--ease-out) infinite;animation-delay:calc(var(--i) * 70ms)}
.kn--play .kn__masc{animation:kn-zoom var(--T) linear infinite}
.kn--play .kn__s2{animation:kn-s2 var(--T) linear infinite}
.kn--play .kn__pal span,.kn--play .kn__cont span{animation:kn-pal var(--T) steps(1) infinite}
.kn--play .kn__pal span:nth-child(2),.kn--play .kn__cont span:nth-child(2){animation-name:kn-pal2}
.kn--play .kn__pal span:nth-child(3),.kn--play .kn__cont span:nth-child(3){animation-name:kn-pal3}
.kn--play .kn__pal span:nth-child(4),.kn--play .kn__cont span:nth-child(4){animation-name:kn-pal4}
.kn--play .kn__s3{animation:kn-s3 var(--T) linear infinite}
.kn--play .kn__mitad{animation:kn-mitad var(--T) var(--ease-io) infinite}
.kn--play .kn__lin>span>span{animation:kn-lin var(--T) var(--ease-out) infinite;animation-delay:calc(var(--i) * 160ms)}
.kn--play .kn__barra{animation:kn-barra var(--T) var(--ease-io) infinite}
.kn--play .kn__s4{animation:kn-s4 var(--T) linear infinite}
.kn--play .kn__fila--a,.kn--play .kn__fila--c{animation:kn-izq var(--T) linear infinite}
.kn--play .kn__fila--b{animation:kn-der var(--T) linear infinite}
.kn--play .kn__s5{animation:kn-s5 var(--T) linear infinite}
.kn--play .kn__s5>*{animation:kn-fin var(--T) var(--ease-out) infinite}
.kn--play .kn__marca{animation-delay:.12s}.kn--play .kn__fin{animation-delay:.24s}

@keyframes kn-s1{0%,24.9%{opacity:1}25%,100%{opacity:0}}
@keyframes kn-letra{0%{translate:0 70%;opacity:0}4%,22%{translate:0 0;opacity:1}24.9%{translate:0 0;opacity:1}100%{opacity:1}}
@keyframes kn-zoom{0%{scale:1}25%{scale:1.1}100%{scale:1.1}}
@keyframes kn-s2{0%,24.9%{opacity:0}25%,41.6%{opacity:1}41.7%,100%{opacity:0}}
@keyframes kn-pal{0%{opacity:0}25%{opacity:1}29.17%{opacity:0}}
@keyframes kn-pal2{0%{opacity:0}29.17%{opacity:1}33.33%{opacity:0}}
@keyframes kn-pal3{0%{opacity:0}33.33%{opacity:1}37.5%{opacity:0}}
@keyframes kn-pal4{0%{opacity:0}37.5%{opacity:1}41.67%{opacity:0}}
@keyframes kn-s3{0%,41.6%{opacity:0}41.7%,66.6%{opacity:1}66.7%,100%{opacity:0}}
@keyframes kn-mitad{0%,41.7%{clip-path:inset(0 100% 0 0)}46%,100%{clip-path:inset(0 0 0 0)}}
@keyframes kn-lin{0%,44%{translate:0 110%}48%,64%{translate:0 0}66.6%,100%{translate:0 -110%}}
@keyframes kn-barra{0%,47%{scale:0 1}62%,100%{scale:1 1}}
@keyframes kn-s4{0%,66.6%{opacity:0}66.7%,87.4%{opacity:1}87.5%,100%{opacity:0}}
@keyframes kn-izq{0%,66.7%{translate:0 0}87.5%,100%{translate:-18% 0}}
@keyframes kn-der{0%,66.7%{translate:-30% 0}87.5%,100%{translate:-12% 0}}
@keyframes kn-s5{0%,87.4%{opacity:0}87.5%,99.5%{opacity:1}100%{opacity:0}}
@keyframes kn-fin{0%,87.5%{opacity:0;translate:0 20%}91%,100%{opacity:1;translate:0 0}}

@media (max-width:699px){
  .kn{height:min(125vw,82svh)}
  .kn__masc{font-size:19cqi;writing-mode:horizontal-tb}
  .kn__pal{font-size:17cqi}
  .kn__mitad{width:100%;height:55%;bottom:auto}
  .kn__lin{left:6cqi;right:6cqi;top:auto;bottom:10cqi;translate:none;font-size:10cqi}
  .kn__barra{left:0;width:100%}
  .kn__fila{font-size:14cqi}
  .kn__logo{width:24cqi}.kn__marca{font-size:9cqi}
}
@media (prefers-reduced-motion:reduce){.kn *{animation:none!important}}
.sin-mov .kn *{animation-play-state:paused!important}

/* fotos en páginas de texto */
.pag-foto{max-width:var(--max);margin:0 auto clamp(40px,6vw,80px);padding:0 var(--gutter)}
.pag-foto img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
.pag-foto--vertical{max-width:none;margin:clamp(24px,3vw,40px) 0 0;padding:0}
.pag-foto--vertical img{aspect-ratio:3/4;max-height:70vh;width:auto;max-width:100%}
.contacto__der{display:grid;gap:clamp(28px,3vw,40px);align-content:start;min-width:0}
.pag-foto--contacto{margin:0;max-width:none;padding:0}
.pag-foto--contacto img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 62%}
@media (max-width:999px){.pag-foto--contacto{display:none}}
.kn__s1 .kn__vid{background:radial-gradient(circle at 30% 40%,#3d5cff,#1a2fb0 70%)}
.kn__s1 video{mix-blend-mode:screen;filter:brightness(1.5) saturate(1.2)}
@media (max-width:699px){.kn__masc{font-size:15.5cqi}}
.pilar--mueve .pilar__vis{display:none}
@media (min-width:1000px){.pilar--mueve .pilar__panel{grid-template-columns:1fr 1fr}.pilar--mueve .pilar__in{grid-column:1/-1;grid-template-columns:1fr 1fr;column-gap:56px;align-items:end}.pilar--mueve .pilar__in h3,.pilar--mueve .pilar__p{grid-column:1}.pilar--mueve .pilar__srv{grid-column:2;grid-row:1/3;align-self:end}}
.ir__panel,.kn__vid{background-size:cover;background-position:var(--x,50%) 50%}
@media (max-width:699px){.ir__panel{background-position:50% 50%}}
.ib-hero__h1{margin:0;font:inherit;line-height:0}
.ib-hero__ceja{margin:0 0 .6em;font-size:.82rem;font-weight:650;font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalto)}
@media (min-width:900px){.como__pasos--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.entregables{display:grid;gap:0;margin:clamp(20px,3vw,32px) 0 0;padding:0;list-style:none;border-top:1px solid var(--linea)}
.entregables li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--linea)}
@media (min-width:900px){.entregables{grid-template-columns:1fr 1fr;column-gap:56px}.entregables li{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px;align-items:baseline}}
.entregables b{font-weight:650;font-stretch:112%}.entregables span{color:var(--gris)}

/* Motion y video: presentación de app en motion graphics (app_motion en build.py; keyframes generados en la página) */
.srv__foto:has(.ap){background:var(--cobalto)}
.ap{position:absolute;inset:0;overflow:hidden;container-type:size;background:radial-gradient(120% 90% at 30% 20%,#3a55ff 0%,var(--cobalto) 45%,#1527a8 100%);font-family:inherit}
.ap *{box-sizing:border-box}
.ap-circ{position:absolute;left:50%;top:46%;width:96cqw;height:96cqw;margin:-48cqw 0 0 -48cqw;border-radius:50%;border:.35cqw solid rgba(255,255,255,.28);background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,0) 62%)}
.ap-tel{position:absolute;left:50%;top:9cqh;width:50cqw;height:82cqh;border-radius:7.5cqw;background:#0d0d0f;padding:1.6cqw;box-shadow:0 4cqw 9cqw rgba(5,10,60,.45),inset 0 0 0 .4cqw #2a2a2e}
.ap-pant{position:relative;width:100%;height:100%;border-radius:6cqw;overflow:hidden;background:#F4EFE6;color:#111;padding:9cqw 3.6cqw 3.6cqw}
.ap-pant::before{content:"";position:absolute;left:50%;top:1.8cqw;width:14cqw;height:3.6cqw;margin-left:-7cqw;border-radius:3cqw;background:#0d0d0f;z-index:3}
.ap-barra{display:flex;justify-content:space-between;align-items:center;margin-bottom:3cqw}
.ap-marca{font-weight:800;font-stretch:125%;letter-spacing:.02em;font-size:4.6cqw}
.ap-cart{position:relative;width:6cqw;height:6cqw}.ap-cart svg{width:100%;height:100%}
.ap-badge{position:absolute;right:-1.6cqw;top:-1.4cqw;min-width:3.8cqw;height:3.8cqw;border-radius:2cqw;background:var(--cobalto);color:#fff;font:700 2.6cqw/3.8cqw system-ui,sans-serif;text-align:center;font-style:normal}
.ap-img{height:46%;border-radius:3.4cqw;background:#e9e3d8 url(/assets/fotos/orbita/producto.webp) 50% 45%/cover}
.ap-info{display:flex;justify-content:space-between;align-items:baseline;margin:3.4cqw 0 2cqw}
.ap-nom{font-weight:700;font-stretch:110%;font-size:4.2cqw;white-space:nowrap}
.ap-precio{display:inline-block;font-weight:700;font-size:5cqw;color:var(--cobalto)}
.ap-col{display:flex;gap:1.8cqw;margin-bottom:4cqw}.ap-col i{width:4.2cqw;height:4.2cqw;border-radius:50%;background:#111}
.ap-col i:nth-child(2){background:var(--cobalto)}.ap-col i:nth-child(3){background:#c9a67a}.ap-col i:first-child{outline:.45cqw solid #111;outline-offset:.6cqw}
.ap-btn{position:relative}
.ap-btn b{position:relative;display:grid;place-items:center;height:10cqw;border-radius:6cqw;background:var(--cobalto);color:#fff;font-weight:600;font-size:3.5cqw}
.ap-btn b>span{grid-area:1/1}
.ap-dedo{position:absolute;left:58%;top:30%;width:8cqw;height:8cqw;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 1cqw 3cqw rgba(0,0,0,.35);border:.5cqw solid rgba(17,17,17,.15)}
.ap-onda{position:absolute;left:58%;top:30%;width:8cqw;height:8cqw;border-radius:50%;border:.6cqw solid #fff}
.ap-notif{position:absolute;left:2.4cqw;right:2.4cqw;top:7cqw;z-index:2;display:grid;grid-template-columns:7cqw 1fr;column-gap:2.2cqw;align-items:center;padding:2.4cqw;border-radius:3.6cqw;background:rgba(255,255,255,.92);box-shadow:0 2cqw 5cqw rgba(0,0,0,.18);font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif}
.ap-notif i{grid-row:1/span 2;width:7cqw;height:7cqw;border-radius:1.8cqw;background:var(--cobalto);color:#fff;display:grid;place-items:center}.ap-notif i svg{width:65%;height:65%}
.ap-notif b{font-size:3cqw}.ap-notif span{font-size:2.6cqw;color:#555}
.ap-chip{position:absolute;padding:2cqw 3.4cqw;border-radius:5cqw;background:#fff;color:#111;font-weight:600;font-size:3.3cqw;white-space:nowrap;box-shadow:0 2cqw 5cqw rgba(5,10,60,.3)}
.ap-chip1{left:3cqw;top:38cqh}.ap-chip2{right:3cqw;top:76cqh;background:#111;color:#fff}
.ap-card{position:absolute;right:2.5cqw;top:24cqh;width:25cqw;padding:2cqw;border-radius:3.6cqw;background:rgba(255,255,255,.95);box-shadow:0 2cqw 6cqw rgba(5,10,60,.3);display:grid;gap:.8cqw}
.ap-card i{height:15cqw;border-radius:2.4cqw;background:url(/assets/fotos/orbita/retrato.webp) 50% 30%/cover}
.ap-card span{font-weight:800;font-stretch:125%;font-size:2.4cqw;color:var(--cobalto);margin-top:.6cqw}.ap-card b{font-size:3.1cqw;line-height:1.15;color:#111}
.ap-pal{position:absolute;right:4cqw;top:50%;transform:translateY(-50%);display:grid;justify-items:end;gap:1cqw;text-align:right}
.ap-w{display:block;color:#fff;font-weight:800;font-stretch:125%;font-size:8.6cqw;line-height:.98;letter-spacing:-.02em}
.ap-w1{color:transparent;-webkit-text-stroke:.35cqw #fff}
.sin-mov .ap *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.ap *{animation:none!important}.ap-pal,.ap-notif,.ap-dedo,.ap-onda,.ap-ok,.ap-badge{opacity:0}}

/* Hero: video de servicios (hero_reel en build.py; sincronía en app.js data-reel) */
.ib-hero__vis--reel{display:block;padding:0;container-type:inline-size;background:#111}
.ib-hero__vis--reel video{object-fit:cover}
.ib-hero__vis--reel::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5));pointer-events:none;transition:opacity .4s}
.hr--fin::after{opacity:0}
.hr-tit,.hr-barras{z-index:1}
.hr-tit{position:absolute;left:4.5cqw;bottom:6.5cqw;margin:0;padding:0;list-style:none;color:#fff;font-weight:660;font-stretch:122%;font-size:max(15px,3.6cqw);letter-spacing:-.01em;line-height:1;text-shadow:0 1px 18px rgba(0,0,0,.45)}
.hr-tit li{position:absolute;left:0;bottom:0;white-space:nowrap;display:flex;align-items:baseline;gap:.55em;opacity:0;transform:translateY(.5em);transition:opacity .35s var(--ease-out),transform .5s var(--ease-out)}
.hr-n{font-size:.5em;font-weight:600;font-stretch:100%;letter-spacing:.08em;padding:.35em .6em;border-radius:2em;background:var(--cobalto)}
.hr-barras{position:absolute;left:4.5cqw;right:4.5cqw;bottom:3cqw;display:flex;gap:.8cqw}
.hr-barras i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.hr-barras b{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
.hr-ntf{left:auto;right:3cqw;top:3cqw;width:min(330px,50cqw);opacity:0;transform:translateY(-10px);transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
.hr-ntf .ntf__i{animation:none;grid-template-columns:6.4cqw 1fr auto;column-gap:1.6cqw;padding:1.5cqw 2cqw;border-radius:3cqw;font-size:max(8.5px,1.75cqw)}.hr-ntf .ntf__i svg{width:6.4cqw;height:6.4cqw}.hr-ntf .ntf__i b{font-size:max(9.5px,1.95cqw)}.hr-ntf .ntf__i time{font-size:max(8px,1.6cqw)}









.hr--fin .hr-tit,.hr--fin .hr-barras{opacity:0;transition:opacity .3s}
/* cierre: animación OFICIAL del logo (assets/logo-anim.js, BeretLogo) centrada en la pared libre; el lema va aparte, centrado debajo */
.hr-fin{position:absolute;left:44%;right:0;top:0;bottom:0;opacity:0;transition:opacity .3s}
.hr-fin svg{position:absolute;inset:0;width:100%;height:100%}
.hr-lema{position:absolute;left:0;right:0;top:66%;margin:0;text-align:center;color:#121212;font-size:max(11px,1.9cqw);font-weight:500;letter-spacing:.01em;opacity:0;transition:opacity .6s var(--ease-out)}
.hr--fin .hr-fin{opacity:1}.hr--logo .hr-lema{opacity:1}
[data-seg="0"] .hr-tit li:nth-child(1){opacity:1;transform:none}[data-seg="1"] .hr-tit li:nth-child(2){opacity:1;transform:none}[data-seg="2"] .hr-tit li:nth-child(3){opacity:1;transform:none}[data-seg="3"] .hr-tit li:nth-child(4){opacity:1;transform:none}[data-seg="4"] .hr-tit li:nth-child(5){opacity:1;transform:none}[data-seg="5"] .hr-tit li:nth-child(6){opacity:1;transform:none}
.hr--venta .hr-ntf{opacity:1;transform:none;transition-delay:.5s}
@media (prefers-reduced-motion:reduce){.hr-tit li:first-child{opacity:1;transform:none}}
/* antislop R-38: los ejemplos con marca ficticia se rotulan como tales */
.hero__pie{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px}
.hero__nota{margin:0;font-size:.82rem;color:var(--gris)}
.hero__pie .hero__pausa{white-space:nowrap;flex:none}
.srv__ficticia{position:absolute;left:10px;bottom:10px;z-index:4;padding:4px 8px;border-radius:2px;background:rgba(18,18,18,.62);color:var(--hueso);font-size:.72rem;font-weight:500;letter-spacing:.01em;pointer-events:none}
/* antislop R-03: «Volver arriba» con área táctil de 44 px sin mover la línea visible */
.ir-scroll--arriba{min-width:44px;margin-right:-12px;padding:6px 0}

/* Moda y calzado: etiqueta colgante + selector de talla y color */
.ir-x--moda{inset:0;pointer-events:none}
.ir-tag{position:absolute;left:clamp(16px,8vw,140px);top:0;transform-origin:50% 0}   /* colgada del borde superior del panel */
.ir-tag__hilo{display:block;width:1.5px;height:clamp(64px,12vh,120px);margin:0 auto;background:rgba(247,246,243,.85)}
.ir-tag__cuerpo{position:relative;display:grid;gap:3px;width:150px;padding:30px 16px 16px;background:#EFE6D6;color:#2A2118;border-radius:3px 3px 6px 6px;box-shadow:0 14px 30px rgba(0,0,0,.28);clip-path:polygon(18% 0,82% 0,100% 12%,100% 100%,0 100%,0 12%)}
.ir-tag__ojal{position:absolute;left:50%;top:9px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:rgba(42,33,24,.85);box-shadow:inset 0 0 0 2px #EFE6D6,0 0 0 1.5px rgba(42,33,24,.4)}
.ir-tag__temp{font-size:.62rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#8A5A2B}
.ir-tag b{font-size:1rem;font-weight:700;font-stretch:118%;line-height:1.1}
.ir-tag span{font-size:.78rem}
.ir-tag__cod{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(42,33,24,.35);font-family:ui-monospace,Menlo,monospace;font-size:.7rem!important;letter-spacing:.08em}
.js .ir__panel.is-visto .ir-tag{animation:ir-columpio 2.6s var(--ease-out) .7s both}
@keyframes ir-columpio{0%{rotate:-16deg}30%{rotate:9deg}55%{rotate:-5deg}78%{rotate:2deg}100%{rotate:0deg}}
.ir-talla{position:absolute;left:clamp(16px,8vw,140px);bottom:max(196px,24vh);display:grid;gap:8px;padding:14px 16px;background:rgba(18,18,18,.62);border-radius:4px;font-size:.78rem}
.ir-talla p{margin:0;opacity:.85}
.ir-talla ul{position:relative;display:flex;gap:6px;margin:0 0 4px;padding:0;list-style:none}
.ir-talla li{position:relative;z-index:1;width:36px;height:32px;display:grid;place-items:center;border:1px solid rgba(247,246,243,.35);border-radius:3px;font-weight:600;font-variant-numeric:tabular-nums;transition:color .3s ease 2.1s}
.ir-talla__sel{position:absolute;left:0;top:0;width:36px;height:32px;border-radius:3px;background:var(--hueso);transition:transform .9s var(--ease-out) 1.4s}
.js .ir__panel.is-visto .ir-talla__sel{transform:translateX(84px)}
.js .ir__panel.is-visto .ir-talla li.on{color:var(--tinta)}
.ir-talla__col{display:flex;gap:8px}
.ir-talla__col i{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(247,246,243,.5)}
.ir-talla__col i.on{box-shadow:0 0 0 2px rgba(18,18,18,.62),0 0 0 3.5px var(--hueso)}
@media (max-width:699px){
  .ir-tag{left:16px;top:0;scale:.78;transform-origin:0 0}
  .ir-tag__hilo{height:52px}
  .ir-talla{left:16px;bottom:140px;scale:.86;transform-origin:0 100%}
}
@media (prefers-reduced-motion:reduce){.js .ir__panel.is-visto .ir-tag{animation:none}.ir-talla__sel{transform:translateX(84px);transition:none}.ir-talla li.on{color:var(--tinta)}}
/* Legal: aviso de cookies (solo UE/EEE/RU/CH), enlaces del pie y línea del formulario */
.galleta{position:fixed;z-index:80;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));width:min(420px,calc(100vw - 32px));display:grid;gap:14px;padding:18px 18px 16px;background:var(--hueso);color:var(--tinta);border:1px solid var(--linea);border-radius:4px;box-shadow:0 18px 40px rgba(18,18,18,.18);font-size:.92rem;line-height:1.45}
.galleta[hidden]{display:none}
.galleta p{margin:0}.galleta a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.galleta__acc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.galleta__acc .boton{justify-content:center;min-height:44px}
.galleta .galleta__no{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--tinta)}
.con-galleta .chip-cotizar{opacity:0;pointer-events:none}
.pie__galleta{display:none}
[data-ue] .pie__galleta{display:inline}
.pie__galleta button{padding:0;font:inherit;color:inherit;background:none;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.form__legal{margin:-4px 0 0;font-size:.85rem;color:var(--gris)}
.form__legal a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.priv__sec p+p{margin-top:.8em}