/* =============================================================
   IE CONTRACT — Sistema de diseño "HECHO A MEDIDA"
   Dirección creativa: editorial / industrial / bespoke
   ============================================================= */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{min-height:100vh;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}

/* ---------- Tokens ---------- */
:root{
  --ink:#1A1A1A;             /* carbón del logo */
  --ink-soft:#262626;        /* círculo del logo */
  --paper:#F4F4F2;           /* blanco neutro y limpio (marca) */
  --paper-pure:#FFFFFF;
  --white:#FFFFFF;
  --grey:#7E7E7C;            /* gris neutro */
  --grey-line:#E4E3E0;       /* filetes sobre papel */
  --grey-line-dk:#2E2E30;    /* filetes sobre tinta */
  --accent:#D62B1E;          /* ROJO de marca — el único acento */
  --accent-soft:#E5392B;     /* rojo claro para hover sobre fondo oscuro */

  --fs-mega:clamp(3.4rem,13vw,12.5rem);
  --fs-xl:clamp(2.6rem,7vw,6.5rem);
  --fs-lg:clamp(2rem,4.4vw,3.8rem);
  --fs-md:clamp(1.5rem,2.6vw,2.2rem);
  --fs-body:clamp(1rem,1.15vw,1.18rem);
  --fs-sm:.82rem;

  --serif:"Zilla Slab",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;

  --pad:clamp(1.25rem,5vw,7rem);     /* horizontal gutter */
  --maxw:1680px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t:.7s var(--ease);
}

/* ---------- Base type ---------- */
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  font-weight:400;
  letter-spacing:.005em;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1;letter-spacing:-.02em}
.serif-it{font-style:italic}
strong{font-weight:600}

/* Editorial display utilities */
.display{font-family:var(--serif);font-weight:500;line-height:.96;letter-spacing:-.025em}
.mega{font-size:var(--fs-mega)}
.xl{font-size:var(--fs-xl)}
.lg{font-size:var(--fs-lg)}
.md{font-size:var(--fs-md)}

/* Eyebrow / label */
.label{
  font-family:var(--sans);
  font-size:var(--fs-sm);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.label .num{color:var(--accent);margin-right:.6em;font-variant-numeric:tabular-nums}
.muted{color:var(--grey)}

/* ---------- Layout helpers ---------- */
.wrap{padding-inline:var(--pad)}
.section{padding-block:clamp(5rem,11vw,11rem)}
.section-sm{padding-block:clamp(3.5rem,7vw,6rem)}
.maxw{max-width:var(--maxw);margin-inline:auto}
.divider{height:1px;background:var(--grey-line);border:0;width:100%}
.col-text{max-width:62ch}
.lead{font-size:var(--fs-md);line-height:1.32;font-weight:400;font-family:var(--serif);letter-spacing:-.01em}

/* Sections that flip to dark */
.ink-section{background:var(--ink);color:var(--paper)}
.ink-section .divider{background:var(--grey-line-dk)}
.ink-section .muted{color:#9a9a98}

/* ---------- Custom cursor ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;
  transform:translate(-50%,-50%);mix-blend-mode:difference}
.cursor{width:38px;height:38px;border:1px solid #fff;transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease)}
.cursor-dot{width:5px;height:5px;background:#fff}
.cursor.is-hover{width:74px;height:74px;background:#fff}
.cursor.is-hover.with-label::after{content:attr(data-label);color:#000;mix-blend-mode:normal;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
@media (max-width:900px),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ---------- Header ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:900;display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem var(--pad);transition:transform .6s var(--ease),background .5s var(--ease),color .5s var(--ease);
  mix-blend-mode:difference;color:#fff}
.header.hide{transform:translateY(-110%)}
.header__logo{font-family:var(--serif);font-size:1.45rem;letter-spacing:-.02em;line-height:1}
.header__logo b{font-weight:500}
.header__logo span{font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  display:block;margin-top:.25rem;font-weight:500;opacity:.75}
.nav{display:flex;gap:1.85rem;align-items:center}
.nav a{font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;position:relative}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:currentColor;transition:width .5s var(--ease)}
.nav a:hover::after,.nav a.active::after{width:100%}
.nav__cta{border:1px solid currentColor;border-radius:60px;padding:.6rem 1.2rem}
.nav__cta::after{display:none}
.burger{display:none;flex-direction:column;gap:6px;width:34px}
.burger span{height:1.5px;background:currentColor;width:100%;transition:.4s var(--ease)}

/* Mobile menu overlay */
.menu{position:fixed;inset:0;z-index:850;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;padding:var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);pointer-events:none}
.menu.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu a{font-family:var(--serif);font-size:clamp(2rem,9vw,4.5rem);font-weight:500;line-height:1.1;
  display:block;opacity:0;transform:translateY(40px);transition:.6s var(--ease)}
.menu.open a{opacity:1;transform:none}
.menu__meta{margin-top:auto;display:flex;gap:2rem;flex-wrap:wrap;font-size:.85rem;color:#9a9a98;padding-top:2rem}

@media (max-width:1200px){
  .nav{display:none}
  .burger{display:flex}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:1rem;font-family:var(--sans);font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;position:relative;padding:1.1rem 0}
.btn .arrow{display:inline-block;transition:transform .5s var(--ease)}
.btn:hover .arrow{transform:translateX(8px)}
.btn--line::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform-origin:right;transition:transform .6s var(--ease)}
.btn--line:hover::before{transform:scaleX(0);transform-origin:left}
.btn--line::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);transition:width .6s var(--ease) .1s}
.btn--line:hover::after{width:100%}
.btn--solid{background:var(--ink);color:var(--paper);border-radius:60px;padding:1.15rem 2.2rem;overflow:hidden}
.ink-section .btn--solid{background:var(--paper);color:var(--ink)}
.btn--solid span{position:relative;z-index:2;transition:color .5s var(--ease)}
.btn--solid::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .6s var(--ease);z-index:1}
.btn--solid:hover::before{transform:translateY(0)}
.btn--solid:hover span{color:#fff}

/* ---------- Scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.1s}
[data-reveal-delay="2"]{transition-delay:.2s}
[data-reveal-delay="3"]{transition-delay:.3s}
[data-reveal-delay="4"]{transition-delay:.4s}

/* Line clip reveal for headlines */
.reveal-lines .line{display:block;overflow:hidden;padding-bottom:.14em}
.reveal-lines .line > span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.reveal-lines.in .line > span{transform:none}
.reveal-lines.in .line:nth-child(2) > span{transition-delay:.08s}
.reveal-lines.in .line:nth-child(3) > span{transition-delay:.16s}
.reveal-lines.in .line:nth-child(4) > span{transition-delay:.24s}

/* Media reveal (image curtain) */
.media{position:relative;overflow:hidden;background:var(--ink-soft)}
.media img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);transition:transform 1.6s var(--ease),opacity 1.2s var(--ease);opacity:.4}
.media.in img{transform:scale(1);opacity:1}
.media__curtain{position:absolute;inset:0;background:var(--paper);transform-origin:bottom;z-index:2;transition:transform 1.1s var(--ease)}
.ink-section .media__curtain{background:var(--ink)}
.media.in .media__curtain{transform:scaleY(0)}
.media[data-parallax] img{will-change:transform}

/* ---------- Marquee ---------- */
.marquee{display:flex;overflow:hidden;white-space:nowrap;gap:0;border-block:1px solid var(--grey-line)}
.ink-section .marquee{border-color:var(--grey-line-dk)}
.marquee__track{display:flex;gap:0;animation:scroll-x 38s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:var(--serif);font-size:clamp(2rem,5vw,4.2rem);font-weight:500;
  padding:.5em .6em;display:inline-flex;align-items:center;gap:.6em}
.marquee__track span::after{content:"—";color:var(--accent);font-style:normal}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--paper);padding:clamp(4rem,8vw,7rem) var(--pad) 2.5rem}
.footer__cta{font-family:var(--serif);font-weight:500;font-size:var(--fs-xl);line-height:1;letter-spacing:-.025em;max-width:14ch}
.footer__cta a{display:inline-block;transition:color .4s var(--ease)}
.footer__cta a:hover{color:var(--accent-soft)}
.footer__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem;margin-top:clamp(3rem,7vw,6rem);
  padding-top:2.5rem;border-top:1px solid var(--grey-line-dk)}
.footer__col{grid-column:span 3}
.footer__col h5{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:#7c7c7a;margin-bottom:1.2rem;font-weight:500}
.footer__col a,.footer__col p{display:block;color:#c8c8c5;margin-bottom:.55rem;transition:color .3s}
.footer__col a:hover{color:var(--paper)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:clamp(3rem,6vw,5rem);
  font-size:.74rem;color:#7c7c7a;letter-spacing:.04em}
.footer__bottom a:hover{color:var(--paper)}
@media (max-width:820px){.footer__col{grid-column:span 6}}
@media (max-width:520px){.footer__col{grid-column:span 12}}

/* ---------- Generic grids ---------- */
.grid{display:grid;gap:clamp(1rem,2vw,2rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-12{grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,2.2rem)}
@media (max-width:820px){.g-2,.g-3{grid-template-columns:1fr}}

/* ---------- Mobile safety net: collapse inline grids ---------- */
/* Cualquier rejilla de 12 columnas escrita en estilo inline se apila en móvil
   y sus hijos pierden el span fijo (cubre calidad, sostenibilidad, servicios…) */
@media (max-width:820px){
  [style*="grid-template-columns:repeat(12,1fr)"]{grid-template-columns:1fr!important;gap:1.75rem!important}
  [style*="grid-template-columns:repeat(12,1fr)"] > *{grid-column:1/-1!important}
}
@media (max-width:560px){
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important}
}

/* ---------- Page hero (interior pages) ---------- */
.phero{padding:clamp(9rem,18vh,15rem) var(--pad) clamp(3rem,6vw,5rem)}
.phero .label{margin-bottom:2rem}
.phero h1{font-size:var(--fs-mega);font-weight:500}
.phero__intro{display:flex;justify-content:space-between;gap:3rem;flex-wrap:wrap;align-items:flex-end;margin-top:2.5rem}

/* numbered list rows */
.rows{border-top:1px solid var(--grey-line)}
.row{display:grid;grid-template-columns:5rem 1fr auto;gap:2rem;align-items:center;
  padding:clamp(1.5rem,3vw,2.6rem) 0;border-bottom:1px solid var(--grey-line);transition:padding .5s var(--ease)}
.row:hover{padding-left:1.5rem}
.row__num{font-family:var(--sans);font-size:.8rem;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.1em}
.row__title{font-family:var(--serif);font-size:var(--fs-md);font-weight:500;letter-spacing:-.01em}
.row__desc{max-width:46ch;color:var(--grey);font-size:.98rem}
@media (max-width:760px){.row{grid-template-columns:3rem 1fr;gap:1rem}.row__desc{grid-column:2}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal],.reveal-lines .line>span,.media img{opacity:1!important;transform:none!important}
  .media__curtain{display:none}
  .cursor,.cursor-dot{display:none}
}

/* ---------- Preloader ---------- */
.preloader{position:fixed;inset:0;z-index:9998;background:var(--ink);color:var(--paper);
  display:flex;align-items:flex-end;justify-content:space-between;padding:var(--pad);
  transition:clip-path 1s var(--ease) .2s;clip-path:inset(0 0 0 0)}
.preloader.done{clip-path:inset(0 0 100% 0)}
.preloader__word{font-family:var(--serif);font-size:clamp(2.5rem,9vw,7rem);font-weight:500;overflow:hidden}
.preloader__word span{display:block;transform:translateY(110%);animation:pre-up .9s var(--ease) .15s forwards}
@keyframes pre-up{to{transform:none}}
.preloader__count{font-family:var(--sans);font-size:clamp(2.5rem,9vw,7rem);font-weight:500;font-variant-numeric:tabular-nums}
html.loading{overflow:hidden}