:root{--orange:#ff3b13;--orange-dark:#df2f0c;--dark:#2b2b2b;--ink:#191919;--mid:#888780;--cream:#fdf3e5;--border:#e5e2da;--white:#fff;--max:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--dark);background:#fff;font-family:Arial,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
h1,h2,h3,p{margin-top:0}
.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.section{padding:88px 0}
.section--cream{background:var(--cream)}
.section--dark{background:var(--dark);color:#fff}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--orange);font-size:11px;font-weight:700;letter-spacing:.23em;text-transform:uppercase}
.eyebrow:before{content:"";width:34px;height:3px;background:var(--orange);flex:0 0 auto}
h1,h2{font-family:Georgia,serif;font-style:italic;font-weight:400;line-height:1.03;letter-spacing:-.035em}
h1{font-size:clamp(48px,6.8vw,88px);margin-bottom:24px}
h2{font-size:clamp(38px,4.8vw,62px);margin-bottom:22px}
h3{font-family:"Arial Black",Arial,sans-serif;font-size:20px;line-height:1.16;text-transform:uppercase;letter-spacing:-.035em}
.black{font-family:"Arial Black",Arial,sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:-.05em}
.orange{color:var(--orange)}
.lead{color:#d7d2cb;font-size:clamp(19px,2.1vw,25px);line-height:1.48}
.copy-lg{font-size:clamp(20px,2.2vw,28px);line-height:1.45}
.muted{color:var(--mid)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:1px solid transparent;font-family:"Arial Black",Arial,sans-serif;font-size:12px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--orange);color:#fff}
.btn--primary:hover{background:var(--orange-dark)}
.btn--outline{border-color:rgba(255,255,255,.38);color:#fff}
.btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.arrow{font-family:Arial,sans-serif;font-size:18px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(229,226,218,.9)}
.nav{height:84px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.logo{display:inline-flex;align-items:baseline;white-space:nowrap;line-height:1;width:auto;height:auto;transform:none}
.logo__bracket{color:var(--orange);font-family:Georgia,serif;font-style:normal;font-weight:400;font-size:31px}
.logo__creative{font-family:Georgia,serif;font-style:italic;font-size:25px}
.logo__zinkin{margin-left:5px;font-family:"Arial Black",Arial,sans-serif;font-style:normal;font-size:23px}
.nav__links{display:flex;align-items:center;gap:17px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.nav__links a:not(.btn):hover{color:var(--orange)}
.nav .btn{min-height:44px;padding-inline:17px}
.hero{position:relative;overflow:hidden;padding:82px 0;color:#fff;background:var(--dark)}
.hero:before{content:"";position:absolute;inset:0;opacity:.2;background-size:46px 46px;mask-image:linear-gradient(90deg,#000,transparent 78%)}
.hero:after{content:"";position:absolute;width:720px;height:720px;border-radius:50%;right:-310px;top:-250px;background:radial-gradient(circle,rgba(255,59,19,.34),rgba(255,59,19,0) 68%)}
.hero__grid{position:relative;z-index:2;display:grid;align-items:center;gap:62px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__note{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px;color:#bbb5ae;font-size:13px}
.hero__note span{display:flex;align-items:center;gap:8px}
.hero__note span:before{content:"";width:7px;height:7px;background:var(--orange);border-radius:50%}
.callout{grid-column:1/-1;padding:26px 31px;border-left:5px solid var(--orange);background:var(--dark);color:#fff;font-family:Georgia,serif;font-style:italic;font-size:clamp(23px,3vw,35px);line-height:1.25}
.points{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid rgba(255,255,255,.18);border-left:1px solid rgba(255,255,255,.18)}
.point{padding:27px;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.point span{display:block;margin-bottom:12px;color:var(--orange);font-family:Georgia,serif;font-style:italic;font-size:28px}
.point strong{font-family:"Arial Black",Arial,sans-serif;font-size:13px;line-height:1.4;text-transform:uppercase}
.card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--border);display:flex;flex-direction:column}
.card--dark{background:var(--dark);border-color:var(--dark);color:#fff}
.card:after{content:"";position:absolute;border:1px solid var(--border);border-radius:50%}
.card--dark:after{border-color:rgba(255,255,255,.16)}
.card__num{font-family:Georgia,serif;font-style:italic;color:var(--orange)}
.card p{color:var(--mid)}
.card--dark p{color:#c8c2bb}
.text-link{margin-top:auto;display:inline-flex;align-items:center;gap:9px;color:var(--orange);font-family:"Arial Black",Arial,sans-serif;text-transform:uppercase}
.faq-grid{display:grid;grid-template-columns:.72fr 1.28fr}
.faq-list{border-top:1px solid var(--border)}
details{border-bottom:1px solid var(--border)}
summary{position:relative;list-style:none;cursor:pointer;font-family:"Arial Black",Arial,sans-serif;font-size:14px;text-transform:uppercase}
details p{color:var(--mid);font-size:14px}
.contact{padding:32px;background:#fff;color:var(--dark);border-top:5px solid var(--orange)}
.contact label{display:block;font-size:10px;font-weight:700;text-transform:uppercase}
.contact textarea{resize:vertical}
.contact .btn{width:100%;margin-top:17px;border:0}
.fineprint{margin:11px 0 0!important;color:var(--mid)!important;font-size:10px!important;line-height:1.4}
footer{padding:40px 0;background:#2b2b2b;color:#aaa59e;border-top:1px solid rgba(255,255,255,.1)}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:end}
.footer-logo{color:#fff;margin-bottom:18px}
.footer-copy{margin:0;font-size:12px}
.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.mobile-cta{display:none}
.nav-local{color:var(--mid)}
.services-menu{position:relative;border:0!important;margin:0!important}
.services-menu>summary{list-style:none!important;position:relative!important;padding:0 18px 0 0!important;border:0!important;font-family:Arial,sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase!important;cursor:pointer!important}
.services-menu>summary::-webkit-details-marker{display:none}
.services-menu>summary:after{content:"⌄"!important;position:absolute!important;right:0!important;top:-2px!important;color:var(--orange)!important;font-size:15px!important}
.services-menu[open]>summary:after{content:"⌃"!important}
.services-dropdown{position:absolute;z-index:90;top:31px;left:50%;transform:translateX(-50%);width:560px;display:grid;grid-template-columns:1fr 1fr;padding:12px;background:#fff;border:1px solid var(--border);box-shadow:0 26px 65px rgba(20,18,16,.18)}
.services-dropdown a{display:block!important;padding:15px 16px!important;border-bottom:1px solid var(--border);text-transform:none!important;letter-spacing:0!important}
.services-dropdown a:nth-last-child(-n+2){border-bottom:0}
.services-dropdown a:hover{background:var(--cream)}
.services-dropdown strong{display:block;font-family:"Arial Black",Arial,sans-serif;font-size:11px;text-transform:uppercase}
.services-dropdown span{display:block;margin-top:4px;color:var(--mid);font-size:11px;line-height:1.35;font-weight:400}
.mobile-nav{display:none;border:0!important;margin:0!important}
.mobile-nav>summary{list-style:none!important;padding:9px 12px!important;border:1px solid var(--border)!important;font-family:"Arial Black",Arial,sans-serif!important;font-size:10px!important;letter-spacing:.07em!important;text-transform:uppercase!important;cursor:pointer!important}
.mobile-nav>summary:after{display:none!important}
.mobile-nav__panel{position:absolute;z-index:95;top:68px;left:14px;right:14px;display:grid;padding:18px;background:#fff;border-top:5px solid var(--orange);box-shadow:0 26px 65px rgba(20,18,16,.2)}
.mobile-nav__panel strong{padding:7px 10px;color:var(--orange);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.mobile-nav__panel a{padding:11px 10px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700}
.mobile-nav__divider{height:12px}
.site-footer{padding:0!important;background:#2b2b2b;color:#bdb7b0}
.footer-main{display:grid;grid-template-columns:1.3fr 1fr 1fr .7fr;gap:46px;padding-top:58px;padding-bottom:48px}
.footer-brand__logo{color:#fff;margin-bottom:5px}
.footer-brand__logo .logo__bracket{font-size:34px}
.footer-brand__logo .logo__creative{font-size:27px}
.footer-brand__logo .logo__zinkin{font-size:25px}
.logo-tagline{display:block;margin:7px 0 21px 3px;color:#fff;font-size:7px;font-weight:700;letter-spacing:.31em}
.footer-brand p{max-width:290px;margin:0;color:#918c86;font-size:13px}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.footer-col h3{margin:4px 0 11px;color:#fff;font-family:"Arial Black",Arial,sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.footer-col a,.footer-col address{color:#aaa49d;font-size:12px;font-style:normal;line-height:1.6}
.footer-col a:hover{color:var(--orange)}
.footer-contact-link{margin-top:7px;color:#fff!important;font-weight:700}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:24px;border-top:1px solid rgba(255,255,255,.1);font-size:10px;letter-spacing:.05em;text-transform:uppercase}
.footer-bottom div{display:flex;flex-wrap:wrap;gap:18px}
.site-logo, .footer-brand__logo{display:inline-block;width:auto;height:auto;line-height:0}
.site-logo img{display:block;width:255px;max-width:none;height:auto}
.footer-brand__logo img{display:block;width:225px;max-width:100%;height:auto}
.home-hero__stamp img{display:block;width:70px;height:auto}
body.elementor-page main > .hero:first-child{padding-top:166px!important}
body.elementor-page main > .home-hero:first-child{padding-top:176px!important}
body.elementor-page .site-header + main > .hero:first-child{padding-top:106px!important}
body.elementor-page .site-header + main > .home-hero:first-child{padding-top:116px!important}
.btn, .btn:link, .btn:visited, .btn:hover, .btn:focus, .btn:active, .btn *, .mobile-cta, .mobile-cta:link, .mobile-cta:visited, .mobile-cta:hover, .mobile-cta:focus, .mobile-cta:active, .mobile-cta *{color:#fff!important;text-decoration:none!important}
.cz-page{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);overflow-x:clip}
@media(max-width:980px){
.nav__links a:not(.btn){display:none}
.nav{height:68px}
.nav__links{display:none!important}
.mobile-nav{display:block}
.footer-main{grid-template-columns:1fr 1fr}
body.elementor-page main > .hero:first-child{padding-top:132px!important}
body.elementor-page main > .home-hero:first-child{padding-top:140px!important}
body.elementor-page .site-header + main > .hero:first-child{padding-top:80px!important}
body.elementor-page .site-header + main > .home-hero:first-child{padding-top:88px!important}
}
@media(max-width:700px){
body{font-size:15px}
.container{width:min(calc(100% - 28px),var(--max))}
.section{padding:68px 0}
.nav{height:67px}
.nav__links .btn{display:none}
.logo__bracket{font-size:23px}
.logo__creative{font-size:18px}
.logo__zinkin{font-size:17px}
.hero{padding:64px 0 70px}
.footer-grid{grid-template-columns:1fr}
.footer-links{justify-content:flex-start}
.mobile-cta{display:flex;position:fixed;z-index:60;left:14px;right:14px;bottom:14px;box-shadow:0 16px 34px rgba(0,0,0,.28)}
footer{padding-bottom:105px}
}
@media(max-width:1120px){
.nav__links{gap:12px}
.nav-local{display:none}
}
@media(max-width:620px){
.logo__bracket{font-size:27px}
.logo__creative{font-size:22px}
.logo__zinkin{font-size:20px}
.footer-main{grid-template-columns:1fr;gap:34px;padding-top:48px}
.footer-bottom{flex-direction:column}
.site-logo img{width:205px}
.footer-brand__logo img{width:210px}
.home-hero__stamp img{width:58px}
}


/* =========================================================================
   HUECO PARA LA CABECERA
   La cabecera sticky se inyecta desde Elementor por encima de estas páginas,
   así que hay que reservarle sitio o tapa el principio del hero.
   Un solo sitio donde tocarlo: cambia --cz-header y se ajustan las 10 páginas.
   ========================================================================= */
/* La cabecera ahora va dentro de la página y es sticky, así que ocupa su
   propio sitio en el flujo y NO hay que reservarle hueco: el hero arranca con
   su padding de diseño. Si algún día se inyecta por encima (superpuesta),
   basta con dar valor a estas variables. */
:root{--cz-header:0px;--cz-header-home:0px}
main > .hero:first-child{padding-top:calc(82px + var(--cz-header))}
main > .home-hero:first-child{padding-top:calc(92px + var(--cz-header-home))}
@media(max-width:620px){
  main > .home-hero:first-child{padding-top:calc(72px + var(--cz-header-home))}
}

/* NOTA: aquí hubo una capa que reproducía los estilos que Elementor filtraba
   dentro del bloque (interlineado de 27px, .container de 1100px, h3 en Arial,
   botones redondeados, .lead en peso 300). Se ha retirado: empeoraba los saltos
   de línea y bajaba el listón de la home, que ya estaba trabajada y verificada.
   El criterio ahora es el contrario: las páginas se sirven con el diseño limpio
   que define el bloque, que es el de la home. Si algún día se quiere volver a
   clonar el render antiguo, está en el historial de este archivo. */


/* =========================================================================
   CAPA COMÚN CREATIVE ZINKIN
   Correcciones y movimiento que se aplican a todas las páginas.
   Va después de la base, para poder ajustarla sin tocarla.
   ========================================================================= */

:root{--cz-ease:cubic-bezier(.4,0,.2,1);--cz-scroll-offset:24px}
/* Si la cabecera sticky del tema está presente, el ancla le deja hueco. */
html:has(.site-header){--cz-scroll-offset:104px}

/* 100vw incluye la barra de scroll y desbordaba ~8px en escritorio.
   clip y no hidden: hidden rompe position:sticky de la cabecera. */
html{scroll-behavior:smooth;overflow-x:clip}
section[id],div[id]{scroll-margin-top:var(--cz-scroll-offset)}

/* Safari seguía pintando el triángulo nativo del <details>. */
summary::-webkit-details-marker{display:none}

/* Nota: aquí había un font-weight:900 para que en Android, donde no existe
   "Arial Black", los titulares no cayeran a peso normal. Se ha retirado porque
   entra en conflicto con clonar el render actual, que usa peso 400. Si algún
   día se abandona la capa de compatibilidad, conviene recuperarlo. */

/* Foco visible para navegación por teclado (WCAG 2.4.7). */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
}
.hero :where(a,summary):focus-visible,
.home-hero :where(a,summary):focus-visible,
.section--dark :where(a,summary):focus-visible,
.site-footer :where(a,summary):focus-visible{outline-color:#fff}

/* ---------- Movimiento ----------
   Los estados ocultos viven dentro de prefers-reduced-motion:no-preference,
   así que quien pida menos movimiento ve la página sin nada invisible. */
.eyebrow:before{transform-origin:left center}
.home-hero__side,.home-quote{position:relative;border-left-color:transparent}
.home-hero__side:before,.home-quote:before{content:"";position:absolute;top:0;bottom:0;left:-5px;width:5px;background:var(--orange);transform-origin:top center}

@keyframes cz-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cz-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cz-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cz-fade{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:no-preference){
  /* Entrada del hero: solo CSS, no depende de JavaScript. */
  .home-hero .eyebrow,.hero .eyebrow{animation:cz-rise 460ms var(--cz-ease) 60ms both}
  .home-hero .eyebrow:before,.hero .eyebrow:before{animation:cz-bar 440ms var(--cz-ease) 60ms both}
  .home-outline{display:inline-block;animation:cz-rise 520ms var(--cz-ease) 160ms both}
  .home-fill{animation:cz-rise 520ms var(--cz-ease) 240ms both}
  .hero h1{animation:cz-rise 520ms var(--cz-ease) 160ms both}
  .hero .lead{animation:cz-rise 500ms var(--cz-ease) 270ms both}
  .hero__actions{animation:cz-rise 500ms var(--cz-ease) 350ms both}
  .hero__note{animation:cz-rise 500ms var(--cz-ease) 430ms both}
  .visual{animation:cz-fade 800ms var(--cz-ease) 430ms both}
  .home-hero__side:before{animation:cz-draw 560ms var(--cz-ease) 320ms both}
  .home-hero__side p{animation:cz-rise 500ms var(--cz-ease) 420ms both}
  .home-hero__side .btn{animation:cz-rise 500ms var(--cz-ease) 500ms both}
  /* El sello solo funde: lleva transform:none!important de la corrección del isotipo. */
  .home-hero__stamp{animation:cz-fade 700ms linear 560ms both}

  /* Al terminar la entrada se desactiva (clase que pone cz.js): mientras una
     animación sigue aplicada el elemento se queda en su capa de composición y
     el texto pierde el antialiasing subpíxel. */
  .cz-listo .home-hero .eyebrow,.cz-listo .home-hero .eyebrow:before,
  .cz-listo .hero .eyebrow,.cz-listo .hero .eyebrow:before,
  .cz-listo .home-outline,.cz-listo .home-fill,
  .cz-listo .hero h1,.cz-listo .hero .lead,.cz-listo .hero__actions,
  .cz-listo .hero__note,.cz-listo .visual,
  .cz-listo .home-hero__side:before,.cz-listo .home-hero__side p,
  .cz-listo .home-hero__side .btn,.cz-listo .home-hero__stamp{animation:none}

  /* Entrada por scroll. Las clases las pone cz.js: sin JS no hay nada oculto. */
  .cz-reveal{opacity:0}
  .cz-reveal.is-in{animation:cz-rise 460ms var(--cz-ease) var(--cz-delay,0ms) both}
  .cz-reveal.eyebrow:before{transform:scaleX(0)}
  .cz-reveal.eyebrow.is-in:before{animation:cz-bar 440ms var(--cz-ease) var(--cz-delay,0ms) both}
  .cz-rule:before{transform:scaleY(0)}
  .cz-rule.is-in:before{animation:cz-draw 560ms var(--cz-ease) var(--cz-delay,0ms) both}
}

/* ---------- Hover ----------
   Sólo con puntero real: en táctil se quedaban pegados tras el toque. */
.btn{transition:background-color 180ms var(--cz-ease),border-color 180ms var(--cz-ease),color 180ms var(--cz-ease)}
.arrow,.route__arrow{transition:transform 220ms var(--cz-ease)}
.text-link{background-image:linear-gradient(var(--orange),var(--orange));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:background-size 260ms var(--cz-ease)}
@media(hover:hover){
  .btn--primary:hover{background:var(--orange-dark)}
  .btn:hover .arrow{transform:translateX(4px)}
  .route:hover .route__arrow{transform:translateX(6px)}
  .text-link:hover{background-size:100% 2px}
  .home-marquee:hover .home-marquee__track{animation-play-state:paused}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .home-marquee__track{animation:none}
  *,*:before,*:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}