/* ==========================================================================
   it Displays & Design — sistema visual editorial 2026
   Un único stylesheet compartido por todas las páginas. Sin dependencias
   de build: edítalo directamente, es CSS plano.
   ========================================================================== */

:root{
  /* ---- Color: negro cálido, papel, piedra, acento naranja de marca ---- */
  --ink:        #14130F;
  --ink-soft:   #26241E;
  --paper:      #FAF8F5;
  --paper-dim:  #F0ECE5;
  --stone:      #6B6459;
  --stone-2:    #8C8477;
  --line:       rgba(20,19,15,0.13);
  --line-invert:rgba(250,248,245,0.16);
  --orange:     #E8551F;
  --orange-deep:#B8410F;
  --green:      #3E7B4F;
  --paper-invert: #FAF8F5;
  --stone-invert: rgba(250,248,245,0.64);

  --wrap: 1280px;
  --wrap-narrow: 760px;
  --gutter: 40px;

  font-size: 16px;
}

/* ---------------------------------- Reset ---------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden; /* las entradas laterales (reveal-left/right) no deben generar scroll horizontal */
  /* Fraunces expone ejes "wonk" (f/y con trazo alternativo); fijamos la posición
     neutra en toda la página para que cualquier uso de Fraunces herede una "f" clásica */
  font-variation-settings:'SOFT' 0, 'WONK' 0;
}
img,svg,video{display:block;max-width:100%;height:auto;}
@keyframes pageFadeIn{ from{opacity:0;} to{opacity:1;} }
main{animation:pageFadeIn .5s ease both;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:560;
  line-height:1.04;
  margin:0;
  letter-spacing:-0.01em;
  text-wrap:balance;
  /* Fraunces expone variantes "wonk" con una "f" y una "y" de trazo alternativo;
     forzamos los ejes a su posición neutra para una "f" legible y más clásica */
  font-variation-settings:'SOFT' 0, 'WONK' 0;
  font-feature-settings:'ss01' 0, 'ss02' 0, 'ss03' 0, 'ss04' 0, 'ss05' 0, 'ss10' 0;
}
p{margin:0;}
table{border-collapse:collapse;}

/* Visible focus state everywhere — accesibilidad AA */
:focus-visible{
  outline:2.5px solid var(--orange);
  outline-offset:3px;
  border-radius:2px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible){outline:none;}

.skip-link{
  position:absolute; left:12px; top:-60px;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; border-radius:6px; z-index:1000;
  font-weight:600; font-size:0.9rem;
  transition:top .2s ease;
}
.skip-link:focus{top:12px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* Reveal-on-scroll: solo se oculta si JS confirma que puede animarlo.
   Sin JS, o con prefers-reduced-motion, el contenido está siempre visible.
   Easing tipo "salida expo" — arranque rápido, llegada muy suave — para que
   el movimiento se sienta cinematográfico y no mecánico. */
.reveal-enabled .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.reveal-enabled .reveal.in{transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);}
.reveal-enabled .reveal.in{opacity:1; transform:translateY(0);}

/* Bloques fotográficos grandes: en vez de subir, entran con un ligero
   zoom-out — misma sensación editorial que el resto, pero más propia
   de una imagen que de un párrafo. */
.reveal-enabled .case-media.reveal,
.reveal-enabled .expansion-photo.reveal,
.reveal-enabled .client-wall.reveal,
.reveal-enabled .project-card.reveal{
  transform:translateY(0) scale(1.045);
}
.reveal-enabled .case-media.reveal.in,
.reveal-enabled .expansion-photo.reveal.in,
.reveal-enabled .client-wall.reveal.in,
.reveal-enabled .project-card.reveal.in{
  transform:translateY(0) scale(1);
}
/* El hover-lift de las tarjetas compite por la propiedad transform con el
   propio sistema de reveal: estas reglas, más específicas, aseguran que
   el lift gane una vez la tarjeta ya es visible. */
.reveal-enabled .sol-item.reveal.in:hover{transform:translateY(-6px);}
.reveal-enabled .project-card.reveal.in:hover{transform:translateY(-6px) scale(1);}

/* Entradas laterales: bloques que convergen hacia el centro según el lado
   en el que están, para que el scroll por la web se sienta más vivo que un
   simple fundido vertical repetido. Se combinan con el zoom-out en fotos. */
.reveal-enabled .reveal.reveal-left{transform:translateX(-64px);}
.reveal-enabled .reveal.reveal-left.in{transform:translateX(0);}
.reveal-enabled .reveal.reveal-right{transform:translateX(64px);}
.reveal-enabled .reveal.reveal-right.in{transform:translateX(0);}
.reveal-enabled .case-media.reveal.reveal-left{transform:translateX(-48px) scale(1.045);}
.reveal-enabled .case-media.reveal.reveal-left.in{transform:translateX(0) scale(1);}
.reveal-enabled .case-media.reveal.reveal-right{transform:translateX(48px) scale(1.045);}
.reveal-enabled .case-media.reveal.reveal-right.in{transform:translateX(0) scale(1);}
@media (max-width:720px){
  /* En móvil las columnas se apilan: mantenemos solo el fundido vertical,
     el desplazamiento lateral aquí no aporta y puede recortar contenido. */
  .reveal-enabled .reveal.reveal-left,
  .reveal-enabled .reveal.reveal-right{transform:translateY(26px);}
  .reveal-enabled .reveal.reveal-left.in,
  .reveal-enabled .reveal.reveal-right.in{transform:translateY(0);}
  .reveal-enabled .case-media.reveal.reveal-left,
  .reveal-enabled .case-media.reveal.reveal-right{transform:translateY(0) scale(1.045);}
  .reveal-enabled .case-media.reveal.reveal-left.in,
  .reveal-enabled .case-media.reveal.reveal-right.in{transform:translateY(0) scale(1);}
}

/* Cascada: dentro de una misma rejilla, cada elemento entra un pelín
   después que el anterior en vez de todos a la vez. */
.stat-strip .stat.reveal:nth-child(2){transition-delay:.08s;}
.stat-strip .stat.reveal:nth-child(3){transition-delay:.16s;}
.stat-strip .stat.reveal:nth-child(4){transition-delay:.24s;}
.sol-grid .sol-item.reveal:nth-child(2){transition-delay:.06s;}
.sol-grid .sol-item.reveal:nth-child(3){transition-delay:.12s;}
.sol-grid .sol-item.reveal:nth-child(4){transition-delay:.18s;}
.sol-grid .sol-item.reveal:nth-child(5){transition-delay:.24s;}
.sol-grid .sol-item.reveal:nth-child(6){transition-delay:.3s;}
.process-row .process-cell.reveal:nth-child(2){transition-delay:.05s;}
.process-row .process-cell.reveal:nth-child(3){transition-delay:.1s;}
.process-row .process-cell.reveal:nth-child(4){transition-delay:.15s;}
.process-row .process-cell.reveal:nth-child(5){transition-delay:.2s;}
.process-row .process-cell.reveal:nth-child(6){transition-delay:.25s;}
.pillars .pillar.reveal:nth-child(2){transition-delay:.06s;}
.pillars .pillar.reveal:nth-child(3){transition-delay:.12s;}
.pillars .pillar.reveal:nth-child(4){transition-delay:.18s;}
.project-grid .project-card.reveal:nth-child(3n+2){transition-delay:.06s;}
.project-grid .project-card.reveal:nth-child(3n+3){transition-delay:.12s;}

/* ---------------------------------- Entrada del hero (a la carga, no al scroll) ---------------------------------- */
@keyframes heroPhotoIn{ from{opacity:0; transform:scale(1.09);} to{opacity:1; transform:scale(1);} }
@keyframes heroRise{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }
.hero-photo{animation:heroPhotoIn 1.6s cubic-bezier(.16,1,.3,1) both;}
.hero-kicker{animation:heroRise .8s cubic-bezier(.16,1,.3,1) .15s both;}
.hero h1{animation:heroRise .9s cubic-bezier(.16,1,.3,1) .28s both;}
.hero .sub{animation:heroRise .9s cubic-bezier(.16,1,.3,1) .42s both;}
.hero-ctas{animation:heroRise .9s cubic-bezier(.16,1,.3,1) .56s both;}
.trust-line{animation:heroRise .9s cubic-bezier(.16,1,.3,1) .68s both;}

/* ---------------------------------- Layout ---------------------------------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter);}
.wrap-narrow{max-width:var(--wrap-narrow); margin:0 auto; padding:0 var(--gutter);}
main{display:block;}
section{scroll-margin-top:90px;}

.rule{border:none; border-top:1px solid var(--line); margin:0;}
.rule-invert{border-color:var(--line-invert);}

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:'Archivo',sans-serif;
  font-weight:700; font-size:0.72rem;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--orange);
}
.eyebrow::before{content:'';width:22px;height:1.5px;background:var(--orange);flex-shrink:0;}

.on-dark{background:var(--ink); color:var(--paper-invert);}
.on-dark .stone-text{color:var(--stone-invert);}
.on-dark .rule{border-color:var(--line-invert);}
.stone-text{color:var(--stone);}

.section-pad{padding:120px 0;}
/* Nosotros termina con un bloque on-dark anidado que enlaza directamente con la
   sección Proyectos (también on-dark): quitamos el padding inferior claro para
   que no quede una banda de color claro entre ambos bloques oscuros. */
#nosotros.section-pad{padding-bottom:0;}
.sec-head-wide{max-width:none;}
.sec-head-wide .lede{max-width:88ch;}
.section-pad-sm{padding:80px 0;}
@media (max-width:900px){
  .section-pad{padding:80px 0;}
  .section-pad-sm{padding:56px 0;}
}

/* Numeric alignment for stats/data */
.tnum{font-variant-numeric:tabular-nums;}

/* ---------------------------------- Buttons ---------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px;
  font-weight:600; font-size:0.98rem;
  border:1.5px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--orange); color:#fff;}
.btn-primary:hover{background:var(--orange-deep); transform:translateY(-2px);}
.btn-line{border-color:currentColor;}
.btn-line:hover{background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-2px);}
.on-dark .btn-line{border-color:rgba(250,248,245,0.5); color:var(--paper);}
.on-dark .btn-line:hover{background:var(--paper); color:var(--ink); border-color:var(--paper);}
.btn-sm{padding:11px 20px; font-size:0.85rem;}
.btn:active{transform:scale(0.98);}

/* ---------------------------------- Header ---------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:22px 0;
  transition:padding .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  padding:14px 0;
  background:rgba(250,248,245,0.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-color:var(--line);
}
.site-header:not(.scrolled){
  /* scrim propio del header, independiente de la foto que haya debajo, para
     que el logo y el menú tengan contraste garantizado siempre */
  background:linear-gradient(180deg, rgba(10,9,7,0.68) 0%, rgba(10,9,7,0.4) 68%, rgba(10,9,7,0) 100%);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:28px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:44px; width:auto; transition:height .25s ease;}
.site-header.scrolled .brand img{height:38px;}
.brand-word{font-family:'Fraunces',serif; font-weight:600; font-size:1.2rem; color:var(--ink);}
.site-header:not(.scrolled) .brand-word{color:#fff;}
/* Logo a color sobre cabecera clara (con scroll); logo en blanco sobre la
   cabecera transparente que se ve al inicio, sobre el fondo oscuro del hero.
   Dos imágenes reales en vez de un filtro CSS: el archivo de marca no tiene
   fondo sólido que invertir, así que un filtro brightness/invert lo dejaba
   invisible (texto blanco sobre blanco). */
.brand img.logo-white{display:none;}
.site-header:not(.scrolled) .brand img.logo-color{display:none;}
.site-header:not(.scrolled) .brand img.logo-white{display:block; filter:drop-shadow(0 1px 4px rgba(0,0,0,0.45));}

.main-nav{display:flex; align-items:center; gap:36px;}
.main-nav a{
  font-size:0.92rem; font-weight:500; color:var(--ink);
  position:relative; padding:6px 0; transition:color .2s ease;
}
.site-header:not(.scrolled) .main-nav a{color:rgba(255,255,255,0.86);}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:var(--orange); transition:width .2s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current]::after{width:100%;}
.main-nav a[aria-current]{color:var(--orange);}
.site-header:not(.scrolled) .main-nav a[aria-current]{color:#fff;}

.header-actions{display:flex; align-items:center; gap:16px;}
.lang-switch{display:flex; align-items:center; gap:8px; font-size:0.78rem; font-weight:600; color:var(--stone);}
.site-header:not(.scrolled) .lang-switch{color:rgba(255,255,255,0.6);}
.lang-switch button{font-size:inherit; font-weight:inherit; color:inherit; padding:4px 2px; cursor:pointer;}
.lang-switch button[aria-current]{color:var(--orange);}
.lang-switch-mobile{
  display:flex; gap:18px; margin-top:32px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.12); font-size:0.95rem; font-weight:600;
}
.lang-switch-mobile button{color:rgba(255,255,255,0.55); padding:6px 0;}
.lang-switch-mobile button[aria-current]{color:var(--orange);}

.burger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  flex-direction:column; gap:5px; border:1.5px solid var(--line); border-radius:8px;
}
.burger span{width:18px; height:2px; background:var(--ink); display:block;}
.site-header:not(.scrolled) .burger{border-color:rgba(255,255,255,0.4);}
.site-header:not(.scrolled) .burger span{background:#fff;}

.mobile-panel{
  display:none; position:fixed; inset:0; z-index:190;
  background:var(--ink); color:#fff;
  padding:110px 32px 40px; flex-direction:column; gap:4px;
}
.mobile-panel.open{display:flex;}
.mobile-panel a{
  font-family:'Fraunces',serif; font-size:1.7rem; font-weight:600; color:#fff;
  padding:15px 0; border-bottom:1px solid rgba(255,255,255,0.12);
}
.mobile-panel .btn{margin-top:26px; align-self:flex-start;}

@media (max-width:960px){
  .main-nav, .header-actions .lang-switch, .header-actions .btn{display:none;}
  .burger{display:flex;}
}

/* ---------------------------------- Hero ---------------------------------- */
/* Landing de una sola página: la portada ya no es una foto de ambiente a
   sangre, sino un producto real (render de estudio, fondo blanco) con mucho
   protagonismo dentro de una tarjeta clara sobre fondo oscuro — dejamos que
   la propia pieza sea el elemento visual principal, sin necesidad de un
   degradado que "invente" contraste encima de una foto que no lo tiene. */
.hero{
  position:relative; background:var(--ink); color:#fff;
  padding:168px 0 84px;
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:radial-gradient(55% 90% at 12% 0%, rgba(232,85,31,0.20), transparent 62%);
  pointer-events:none;
}
.hero-grid{position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;}
.hero-copy{max-width:54ch;}
.hero-kicker{color:#ffb08c;}
.hero h1{
  margin-top:20px;
  font-size:clamp(2.5rem, 4.6vw, 4rem);
  max-width:15ch;
  color:#fff;
  animation:heroRise .9s cubic-bezier(.16,1,.3,1) .28s both;
}
.hero h1 .accent{color:var(--orange);}
.hero .sub{
  margin-top:24px; max-width:50ch;
  font-size:1.14rem; color:rgba(255,255,255,0.82); line-height:1.5;
  animation:heroRise .9s cubic-bezier(.16,1,.3,1) .42s both;
}
.hero-ctas{margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; animation:heroRise .9s cubic-bezier(.16,1,.3,1) .56s both;}
.trust-line{
  margin-top:16px; display:flex; align-items:center; gap:10px;
  font-size:0.86rem; color:rgba(255,255,255,0.62);
  animation:heroRise .9s cubic-bezier(.16,1,.3,1) .68s both;
}
.trust-line:first-of-type{margin-top:34px;}
.trust-line .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0;}
.hero-media{
  position:relative; background:var(--paper); padding:34px;
  box-shadow:0 50px 90px -34px rgba(0,0,0,0.55);
  animation:heroPhotoIn 1.3s cubic-bezier(.16,1,.3,1) .1s both;
}
.hero-media img{width:100%; height:auto;}
@media (max-width:900px){
  .hero{padding:150px 0 64px;}
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero-media{padding:22px;}
  .hero-copy{max-width:none;}
}

/* ---------------------------------- Stat strip ---------------------------------- */
.stat-strip{
  position:relative; background:var(--ink); color:#fff;
  border-top:1px solid var(--line-invert); overflow:hidden;
}
.stat-strip::before{
  /* halo naranja ambiental, muy sutil — la marca respirando detrás de las cifras */
  content:''; position:absolute; inset:-40% -10% auto -10%; height:140%;
  background:radial-gradient(60% 100% at 18% 0%, rgba(232,85,31,0.22), transparent 60%),
             radial-gradient(45% 90% at 85% 100%, rgba(232,85,31,0.13), transparent 65%);
  pointer-events:none;
}
.stat-strip .wrap{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:64px 0 68px;
}
.stat{
  padding:0 30px; border-left:1px solid var(--line-invert);
  display:flex; flex-direction:column; align-items:flex-start;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.stat:first-child{border-left:none; padding-left:0;}
.stat:hover{transform:translateY(-4px);}
.stat-eyebrow{
  font-size:0.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--orange); margin-bottom:14px;
}
.stat .num{
  font-family:'Fraunces',serif; font-weight:580; line-height:1;
  font-size:clamp(2.6rem, 4vw, 3.6rem); color:#fff; display:block;
  letter-spacing:-0.01em;
}
.stat .num i{
  font-style:normal; font-family:'Archivo',sans-serif; font-weight:600;
  font-size:0.32em; text-transform:uppercase; letter-spacing:.03em;
  color:var(--orange); margin-left:0.14em; vertical-align:0.5em;
}
.stat .lbl{margin-top:14px; font-size:0.92rem; line-height:1.45; color:rgba(255,255,255,0.62); max-width:22ch;}

@media (max-width:900px){
  .stat-strip .wrap{grid-template-columns:1fr 1fr; row-gap:40px;}
  .stat:nth-child(3){border-left:none; padding-left:0;}
}
@media (max-width:560px){
  .stat-strip .wrap{grid-template-columns:1fr; row-gap:32px; padding:52px 0 56px;}
  .stat{border-left:none; padding-left:0;}
}

/* ---------------------------------- Section headings ---------------------------------- */
.sec-head{max-width:56ch; margin-bottom:56px;}
.sec-head h2{margin-top:16px; font-size:clamp(2rem, 3.6vw, 2.9rem);}
.sec-head .lede{margin-top:18px; font-size:1.08rem; color:var(--stone); max-width:52ch;}
.on-dark .sec-head .lede{color:var(--stone-invert);}

/* ---------------------------------- Editorial solutions grid ---------------------------------- */
.sol-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);}
.sol-item{
  background:var(--paper); position:relative; display:flex; flex-direction:column;
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);
}
.sol-item:hover{transform:translateY(-6px); box-shadow:0 26px 44px -22px rgba(20,19,15,0.32); z-index:1;}
.sol-photo{aspect-ratio:4/3; overflow:hidden; background:var(--paper-dim);}
.sol-photo img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1);}
.sol-item:hover .sol-photo img{transform:scale(1.06);}
.sol-body{padding:26px 28px 32px;}
.sol-num{font-family:'Fraunces',serif; font-size:0.85rem; color:var(--stone-2);}
.sol-body h3{margin-top:10px; font-size:1.28rem;}
.sol-body p{margin-top:10px; color:var(--stone); font-size:0.96rem;}
.sol-link{
  margin-top:16px; display:inline-flex; align-items:center; gap:8px;
  font-size:0.86rem; font-weight:600; color:var(--ink);
  border-bottom:1.5px solid var(--orange); padding-bottom:2px;
}
@media (max-width:960px){ .sol-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .sol-grid{grid-template-columns:1fr;} }

/* ---------------------------------- Mini-galería (más ejemplos reales por familia) ---------------------------------- */
/* Flexbox en vez de grid: igual que en el muro de Clientes, si el número de
   fotos de una familia no es múltiplo exacto de las columnas (p. ej. 7 fotos
   en 4 columnas), la fila incompleta queda centrada en vez de dejar un
   hueco en blanco pegado a un lado. Cada sección fija su nº de columnas
   deseado con la custom property --cols en el estilo inline. */
.mini-gallery{display:flex; flex-wrap:wrap; justify-content:center; gap:1px; background:var(--line); margin-top:1px;}
.mg-cell{
  position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--paper-dim);
  flex:0 0 calc((100% - (var(--cols,3) - 1)*1px) / var(--cols,3));
  max-width:calc((100% - (var(--cols,3) - 1)*1px) / var(--cols,3));
}
.mg-cell img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1);}
.mg-cell:hover img{transform:scale(1.06);}
.mg-cap{
  position:absolute; left:0; right:0; bottom:0; padding:10px 14px;
  font-size:0.76rem; font-weight:600; color:#fff;
  background:linear-gradient(0deg, rgba(10,9,7,0.72) 0%, rgba(10,9,7,0) 100%);
}
@media (max-width:640px){
  .mg-cell{flex:0 0 calc((100% - 1px)/2) !important; max-width:calc((100% - 1px)/2) !important;}
}

.materials-line{
  margin-top:0; padding:26px 0; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  font-size:0.92rem; color:var(--stone);
}
.materials-line b{color:var(--ink); font-weight:600;}
.materials-line .sep{color:var(--orange);}

/* ---------------------------------- Process (Cómo trabajamos) ---------------------------------- */
.process-row{
  display:grid; grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.process-cell{
  padding:30px 20px 26px; border-left:1px solid var(--line);
}
.process-cell:first-child{border-left:none;}
.process-cell .step-n{font-family:'Fraunces',serif; font-size:1.5rem; color:var(--orange);}
.process-cell h4{margin-top:14px; font-size:1rem; font-weight:600; font-family:'Archivo',sans-serif;}
.process-cell p{margin-top:8px; font-size:0.86rem; color:var(--stone); line-height:1.45;}
@media (max-width:1080px){ .process-row{grid-template-columns:repeat(3,1fr);} .process-cell:nth-child(4){border-left:none;} }
@media (max-width:640px){ .process-row{grid-template-columns:1fr;} .process-cell{border-left:none !important; border-top:1px solid var(--line);} .process-cell:first-child{border-top:none;} }

/* ---------------------------------- Pillars (Por qué repiten) ---------------------------------- */
.pillars{display:grid; grid-template-columns:repeat(4,1fr);}
.pillar{padding:0 28px 0 0;}
.pillar + .pillar{border-left:1px solid var(--line-invert); padding-left:28px;}
.pillar .p-num{font-family:'Fraunces',serif; font-size:2.1rem; color:var(--orange);}
.pillar h4{margin-top:14px; font-size:1.15rem; color:#fff; font-family:'Fraunces',serif; font-weight:560;}
.pillar p{margin-top:12px; font-size:0.95rem; color:var(--stone-invert); line-height:1.55;}
@media (max-width:960px){
  .pillars{grid-template-columns:1fr 1fr; row-gap:36px;}
  .pillar:nth-child(3){border-left:none; padding-left:0;}
}
@media (max-width:600px){
  .pillars{grid-template-columns:1fr; row-gap:32px;}
  .pillar{border-left:none !important; padding-left:0 !important;}
}

/* ---------------------------------- Testimonios ---------------------------------- */
.testimonial-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-invert); margin-top:48px;}
.testimonial-card{background:var(--ink); padding:48px 44px; margin:0;}
.t-mark{font-family:'Fraunces',serif; font-size:3.6rem; line-height:0.7; color:var(--orange); display:block;}
.t-quote{
  margin-top:18px; font-family:'Fraunces',serif; font-style:italic; font-weight:460;
  font-size:1.2rem; line-height:1.55; color:rgba(255,255,255,0.55);
  border:1px dashed rgba(255,255,255,0.28); padding:18px 20px;
}
.t-attr{margin-top:20px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--stone-invert); font-style:normal;}
@media (max-width:720px){
  .testimonial-grid{grid-template-columns:1fr;}
  .testimonial-card{padding:36px 28px;}
}

/* ---------------------------------- Case study ---------------------------------- */
.case{display:grid; grid-template-columns:1.05fr 0.95fr; gap:0; align-items:stretch;}
.case-equal{grid-template-columns:1fr 1fr;}
.case-media{position:relative; min-height:420px; background:var(--paper-dim); min-width:0;}
.case-media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.case-copy{padding:56px 56px; display:flex; flex-direction:column; justify-content:center; min-width:0;}
.case-copy h3{margin-top:16px; font-size:clamp(1.7rem,2.6vw,2.3rem);}
.case-copy p{margin-top:18px; color:var(--stone-invert); font-size:1.02rem; line-height:1.6;}
.case-kpis{margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.case-kpis .k-num{font-family:'Fraunces',serif; font-size:1.6rem; color:var(--orange);}
.case-kpis .k-lbl{margin-top:4px; font-size:0.82rem; color:var(--stone-invert);}
.case-copy .btn{margin-top:32px; align-self:flex-start;}
@media (max-width:900px){
  .case{grid-template-columns:1fr;}
  .case-media{min-height:280px;}
  .case-copy{padding:44px 28px;}
}

/* ---------------------------------- Clients ---------------------------------- */
/* Flexbox en vez de grid: si la última fila no se llena (p. ej. 11 logos en
   una fila de 6), el hueco queda vacío de verdad, sin una celda gris de
   fondo que parezca un error de carga. Gris uniforme + color al hover
   homogeneiza el peso visual de logos con colores de marca muy distintos
   (p. ej. un logo con placa de color junto a wordmarks en negro). */
.client-wall{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1px;
  background:var(--paper);
  max-width:1338px; margin:0 auto;
}
.client-cell{
  /* Exactamente 6 columnas en escritorio: base fija en vez de porcentaje sobre
     un ancho variable, para que nunca "sobren" huecos que generen filas de 3. */
  flex:0 0 222px; min-width:0; max-width:222px;
  background:#fff; box-shadow:0 0 0 1px var(--line);
  aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  padding:26px; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.client-cell img{
  max-width:82%; max-height:78px; width:auto; height:auto;
  filter:grayscale(1); opacity:0.92;
  transition:transform .3s cubic-bezier(.16,1,.3,1), filter .3s ease, opacity .3s ease;
}
.client-cell:hover{
  transform:translateY(-3px); box-shadow:0 14px 28px rgba(20,19,15,0.1); z-index:1; position:relative;
}
.client-cell:hover img{transform:scale(1.06); filter:grayscale(0); opacity:1;}
@media (max-width:1100px){ .client-wall{max-width:888px;} .client-cell{flex-basis:calc(25% - 1px); max-width:none;} }
@media (max-width:600px){ .client-wall{max-width:100%;} .client-cell{flex:0 0 calc(33.333% - 1px); max-width:none; padding:14px;} .client-cell img{max-height:44px;} }
@media (max-width:400px){ .client-cell{flex:0 0 calc(50% - 1px);} }

/* ---------------------------------- Expansion ---------------------------------- */
.expansion{display:grid; grid-template-columns:1fr 1fr;}
.expansion-copy{padding:100px 64px 100px var(--gutter); display:flex; flex-direction:column; justify-content:center;}
.expansion-photo{position:relative; min-height:460px;}
.expansion-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.expansion-list{margin-top:30px; display:grid; gap:16px;}
.expansion-list li{display:flex; gap:14px; align-items:flex-start; font-size:0.98rem; color:var(--stone-invert); line-height:1.5;}
.expansion-list .tick{color:var(--orange); flex-shrink:0; margin-top:3px;}
.geo-strip{margin-top:30px; display:flex; flex-wrap:wrap; gap:10px 26px; font-size:0.85rem; color:var(--stone-invert);}
.geo-strip b{color:#fff; font-weight:600;}
@media (max-width:900px){
  .expansion{grid-template-columns:1fr;}
  .expansion-copy{padding:64px 28px;}
  .expansion-photo{min-height:300px;}
}

/* ---------------------------------- Final CTA ---------------------------------- */
.final-cta{padding:120px 0; text-align:left;}
.final-cta h2{font-size:clamp(2.1rem,4.2vw,3.4rem); max-width:18ch;}
.final-cta .lede{margin-top:20px; font-size:1.15rem; color:var(--stone-invert); max-width:44ch;}
.final-cta .btn{margin-top:34px;}
.final-contacts{
  margin-top:56px; padding-top:36px; border-top:1px solid var(--line-invert);
  display:flex; flex-wrap:wrap; gap:32px 56px; font-size:0.95rem; color:var(--stone-invert);
}
.final-contacts a{color:#fff; font-weight:600;}
.final-contacts .lbl{display:block; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--stone-invert); margin-bottom:6px;}

/* ---------------------------------- Footer ---------------------------------- */
footer.site-footer{background:#0E0D0A; color:rgba(250,248,245,0.6); padding:56px 0 30px;}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; padding-bottom:32px; border-bottom:1px solid var(--line-invert);}
.footer-nav{display:flex; flex-wrap:wrap; gap:28px;}
.footer-nav a:hover{color:#fff;}
.footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col h5{font-size:0.74rem; text-transform:uppercase; letter-spacing:0.1em; color:rgba(250,248,245,0.4); margin-bottom:14px;}
.footer-col div{font-size:0.9rem; line-height:1.8;}
.footer-bottom{margin-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.8rem;}
.footer-bottom a:hover{color:#fff;}

/* ---------------------------------- Forms ---------------------------------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 24px;}
.field{display:flex; flex-direction:column; gap:8px; min-width:0;}
.field.full{grid-column:1/-1;}
.field label{font-size:0.82rem; font-weight:600;}
.field .opt{color:var(--stone); font-weight:400;}
.field input:not([type="file"]), .field select, .field textarea{
  width:100%; min-width:0;
  border:1.5px solid var(--line); background:var(--paper);
  padding:13px 15px; font-size:0.95rem; transition:border-color .2s ease;
}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }
.on-dark .field input, .on-dark .field select, .on-dark .field textarea{
  background:rgba(255,255,255,0.04); border-color:var(--line-invert); color:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--orange);}
.field textarea{resize:vertical; min-height:110px;}
.field-file{
  position:relative;
  border:1.5px dashed var(--line); padding:16px; font-size:0.86rem; color:var(--stone);
  display:flex; align-items:center; gap:10px; cursor:pointer;
}
.on-dark .field-file{border-color:var(--line-invert); color:var(--stone-invert);}
.field-file-input{position:absolute; width:1px; height:1px; overflow:hidden; opacity:0;}

/* Tarjetas de contacto (email / teléfono / dirección) */
.contact-card{border:1px solid var(--line); padding:20px 22px; overflow-wrap:anywhere;}
.cc-label{font-size:0.74rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--stone);}
.cc-value{margin-top:8px; display:block; font-weight:600; color:var(--ink); line-height:1.5;}
a.cc-value:hover{color:var(--orange);}

/* Contacto: formulario centrado + "Dónde estamos" debajo, sin columna de
   email/teléfono a la izquierda */
.contact-wrap{max-width:720px; margin:0 auto;}
.contact-where{
  margin-top:56px; padding-top:40px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
}
.contact-where .cc-value{font-size:1.05rem;}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:0.84rem; color:var(--stone); margin-top:6px;}
.on-dark .consent{color:var(--stone-invert);}
.consent input{margin-top:3px; flex-shrink:0;}
.consent a{text-decoration:underline;}
.form-actions{margin-top:8px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.form-msg{font-size:0.9rem; font-weight:600; display:none;}
.form-msg.show{display:block;}
.form-msg.ok{color:var(--green);}
.on-dark .form-msg.ok{color:#7BC993;}
.form-msg.err{color:var(--orange-deep);}
.on-dark .form-msg.err{color:#ff9466;}
.field-error{font-size:0.78rem; color:var(--orange-deep); display:none;}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:var(--orange-deep);}
.field.invalid .field-error{display:block;}
.honeypot-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ---------------------------------- Carrusel (Nosotros + Proyectos) ---------------------------------- */
/* Un único componente para dos usos: "coverflow" (Nosotros — la imagen
   central manda, las de los lados se intuyen desenfocadas) y "simple"
   (Proyectos — una foto a pantalla completa por vista). Scroll nativo con
   scroll-snap: el gesto táctil en móvil funciona gratis, sin JS adicional;
   JS solo añade autoplay, flechas, puntos y — en coverflow — qué foto está
   "activa". Respeta prefers-reduced-motion (sin autoplay ni animación). */
.carousel{position:relative;}
.carousel-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-slide{flex-shrink:0; scroll-snap-align:center; overflow:hidden; background:var(--paper-dim);}
.carousel-slide img{width:100%; height:100%; object-fit:cover; display:block;}

.carousel-arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:46px; height:46px; border-radius:50%;
  background:var(--paper); color:var(--ink); box-shadow:0 10px 26px -8px rgba(20,19,15,0.35);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  transition:background .18s ease, transform .18s ease;
}
.carousel-arrow:hover{background:var(--orange); color:#fff;}
.carousel-arrow.prev{left:-4px;}
.carousel-arrow.next{right:-4px;}
.on-dark .carousel-arrow{background:var(--ink); color:#fff; box-shadow:0 10px 26px -8px rgba(0,0,0,0.5); border:1px solid var(--line-invert);}
.on-dark .carousel-arrow:hover{background:var(--orange); border-color:var(--orange);}

.carousel-dots{margin-top:22px; display:flex; justify-content:center; gap:9px;}
.carousel-dots button{width:8px; height:8px; border-radius:50%; background:var(--line); transition:background .2s ease, transform .2s ease;}
.on-dark .carousel-dots button{background:var(--line-invert);}
.carousel-dots button[aria-current="true"]{background:var(--orange); transform:scale(1.25);}

/* Coverflow — Nosotros */
.carousel-coverflow{padding:0 18px;}
.carousel-coverflow .carousel-track{gap:22px; padding:8px 18%;}
.carousel-coverflow .carousel-slide{
  flex-basis:60%; max-width:620px; aspect-ratio:4/3; border-radius:2px;
  opacity:0.4; filter:blur(2px); transform:scale(0.92);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1), filter .5s cubic-bezier(.16,1,.3,1);
}
.carousel-coverflow .carousel-slide.is-active{opacity:1; filter:blur(0); transform:scale(1);}
@media (max-width:720px){
  .carousel-coverflow{padding:0;}
  .carousel-coverflow .carousel-track{padding:8px 10%;}
  .carousel-coverflow .carousel-slide{flex-basis:80%;}
}

/* Simple — Proyectos */
.carousel-simple .carousel-track{aspect-ratio:4/3;}
.carousel-simple .carousel-slide{flex-basis:100%; width:100%; height:100%;}
@media (max-width:900px){ .carousel-simple .carousel-track{aspect-ratio:4/3.1;} }

/* ---------------------------------- Proyectos (casos de éxito embebidos) ---------------------------------- */
.project-case{display:grid; grid-template-columns:0.95fr 1.05fr; gap:0; align-items:stretch;}
.project-case .case-media{padding:0;}
.project-case .case-copy p{margin-top:16px;}
.project-case + .project-case{margin-top:1px;}
.project-testimonial{
  margin-top:28px; padding:22px 24px; border-left:2px solid var(--orange);
  background:rgba(255,255,255,0.03);
}
.on-dark .project-testimonial{background:rgba(255,255,255,0.03);}
.project-testimonial p{
  font-family:'Fraunces',serif; font-style:italic; font-weight:460;
  font-size:1.02rem; line-height:1.55; color:var(--stone-invert); margin-top:0;
}
.project-testimonial footer{margin-top:12px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--stone-invert); font-style:normal;}
@media (max-width:900px){
  .project-case{grid-template-columns:1fr;}
}

/* ---------------------------------- Carrusel continuo de Proyectos ---------------------------------- */
.proy-marquee-wrap{margin-top:72px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.proy-marquee{overflow:hidden;}
.proy-marquee-track{
  display:flex; width:max-content; gap:14px;
  animation:proyMarquee 48s linear infinite;
}
.proy-marquee:hover .proy-marquee-track,
.proy-marquee-track.paused{animation-play-state:paused;}
.proy-marquee-slide{
  flex:0 0 auto; width:260px; aspect-ratio:4/3; overflow:hidden; border-radius:2px; background:var(--line-invert);
}
.proy-marquee-slide img{width:100%; height:100%; object-fit:cover; display:block;}
@keyframes proyMarquee{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}
@media (max-width:640px){
  .proy-marquee-slide{width:190px;}
  .proy-marquee-track{animation-duration:34s;}
}
@media (prefers-reduced-motion:reduce){
  .proy-marquee-track{animation:none;}
  .proy-marquee{overflow-x:auto; -webkit-overflow-scrolling:touch;}
}

/* ---------------------------------- Pasos (Cómo trabajamos) ---------------------------------- */
.steps{max-width:900px;}
.step-row{display:grid; grid-template-columns:120px 1fr; gap:32px; padding:40px 0; border-top:1px solid var(--line);}
.step-row:last-child{border-bottom:1px solid var(--line);}
.step-row .s-num{font-family:'Fraunces',serif; font-size:2.4rem; color:var(--orange);}
.step-row h3{font-size:1.3rem;}
.step-row p{margin-top:12px; color:var(--stone); font-size:1rem; line-height:1.6; max-width:60ch;}
@media (max-width:640px){ .step-row{grid-template-columns:1fr; gap:10px;} }

/* Variante horizontal: las 6 fases en una sola línea, solo con título */
.steps-horizontal{
  max-width:none; display:grid; grid-template-columns:repeat(6,1fr); gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.steps-horizontal .step-row{
  grid-template-columns:1fr; gap:14px; padding:32px 24px; border-top:none;
  border-left:1px solid var(--line);
}
.steps-horizontal .step-row:first-child{border-left:none;}
.steps-horizontal:last-child, .steps-horizontal .step-row:last-child{border-bottom:none;}
.steps-horizontal .s-num{font-size:1.7rem;}
.steps-horizontal h3{font-size:1.02rem; line-height:1.28;}
@media (max-width:900px){
  .steps-horizontal{
    display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory;
    border-left:none; border-right:none; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; padding-bottom:6px;
  }
  .steps-horizontal .step-row{
    flex:0 0 68%; min-width:220px; scroll-snap-align:start; border-left:1px solid var(--line);
  }
  .steps-horizontal .step-row:first-child{border-left:1px solid var(--line);}
}
@media (max-width:480px){ .steps-horizontal .step-row{flex:0 0 82%;} }

/* ---------------------------------- Placeholder photo (missing asset) ---------------------------------- */
.ph-placeholder{
  position:relative; width:100%; height:100%;
  background:repeating-linear-gradient(135deg, var(--paper-dim), var(--paper-dim) 12px, #E4DFD6 12px, #E4DFD6 24px);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;
}
.ph-placeholder span{
  font-size:0.78rem; color:var(--stone); max-width:22ch; line-height:1.4;
  background:var(--paper); padding:8px 12px; border:1px dashed var(--stone-2);
}

/* ---------------------------------- Cookie banner ---------------------------------- */
#cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:300;
  max-width:640px; margin:0 auto;
  background:var(--ink); color:#fff;
  padding:22px 24px; display:none;
  box-shadow:0 20px 50px -10px rgba(0,0,0,0.4);
}
#cookie-banner.show{display:block;}
#cookie-banner p{font-size:0.88rem; color:rgba(255,255,255,0.78); line-height:1.5;}
#cookie-banner a{text-decoration:underline; color:#fff;}
.cookie-actions{margin-top:16px; display:flex; gap:12px; flex-wrap:wrap;}

/* ---------------------------------- Page hero (subpages) ---------------------------------- */
.page-hero{background:var(--ink); color:#fff; padding:180px 0 72px;}
.page-hero h1{margin-top:18px; font-size:clamp(2.2rem,4.6vw,3.4rem); max-width:20ch; animation:heroRise .9s cubic-bezier(.16,1,.3,1) .1s both;}
.page-hero .lede{margin-top:20px; font-size:1.08rem; color:var(--stone-invert); max-width:56ch; animation:heroRise .9s cubic-bezier(.16,1,.3,1) .22s both;}
.page-hero .eyebrow{animation:heroRise .8s cubic-bezier(.16,1,.3,1) both;}

/* ---------------------------------- Simple content pages (legal) ---------------------------------- */
.legal-body{padding:64px 0 120px;}
.legal-body h2{margin-top:48px; font-size:1.4rem;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p, .legal-body li{color:var(--stone); font-size:0.98rem; line-height:1.7; margin-top:12px;}
.legal-body ul{margin-top:12px; padding-left:20px; list-style:disc;}
.legal-note{
  margin-top:32px; padding:18px 20px; background:var(--paper-dim); border-left:3px solid var(--orange);
  font-size:0.88rem; color:var(--ink);
}

/* ---------------------------------- Utility ---------------------------------- */
.mt-0{margin-top:0 !important;}
.text-center{text-align:center;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}