/* ==========================================================================
   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:7px;}
.lang-switch button{
  display:flex; padding:3px; line-height:0; border-radius:5px; cursor:pointer;
  opacity:0.55; transition:opacity .15s ease, box-shadow .15s ease;
}
.lang-switch button:hover{opacity:0.9;}
.lang-switch button[aria-current]{opacity:1; box-shadow:0 0 0 2px var(--orange);}
.lang-switch .flag-icon{width:23px; height:16px; border-radius:3px; display:block; box-shadow:0 0 0 1px rgba(0,0,0,0.15);}
.site-header:not(.scrolled) .lang-switch .flag-icon{box-shadow:0 0 0 1px rgba(255,255,255,0.4);}
.lang-switch-mobile{
  display:flex; flex-wrap:wrap; gap:14px 22px; 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{
  display:flex; align-items:center; gap:9px; color:rgba(255,255,255,0.55); padding:6px 0; opacity:1;
}
.lang-switch-mobile button[aria-current]{color:var(--orange);}
.lang-switch-mobile .flag-icon{width:27px; height:19px; border-radius:3px; box-shadow:0 0 0 1px rgba(255,255,255,0.3); flex-shrink:0;}
.lang-switch-mobile button[aria-current] .flag-icon{box-shadow:0 0 0 2px 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:92ch; 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:68ch;}
.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;}

/* ==========================================================================
   Páginas de contenido — octubre 2026
   Páginas propias por familia de producto, casos de éxito y recursos (blog).
   Reutilizan el mismo sistema visual: Fraunces + Archivo, tinta/papel/naranja.
   ========================================================================== */

/* ---------- Migas de pan (sobre cabeceras oscuras) ---------- */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:0.8rem; margin-bottom:22px; color:rgba(255,255,255,0.5);}
.crumbs a{color:rgba(255,255,255,0.78); border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease;}
.crumbs a:hover{color:#fff; border-bottom-color:var(--orange);}
.crumbs .sep{color:var(--orange);}

/* ---------- Cabecera de página con imagen (soluciones y casos) ---------- */
.page-hero{position:relative; overflow:hidden;}
.page-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.18), transparent 62%);
  pointer-events:none;
}
.page-hero > .wrap{position:relative;}
.page-hero.ph-split{padding:168px 0 88px;}
.ph-grid{display:grid; grid-template-columns:1.08fr 0.92fr; gap:64px; align-items:center;}
.ph-copy h1{max-width:17ch;}
.ph-copy .hero-ctas{margin-top:32px;}
.ph-media{
  background:var(--paper); padding:28px;
  box-shadow:0 50px 90px -34px rgba(0,0,0,0.55);
  animation:heroPhotoIn 1.3s cubic-bezier(.16,1,.3,1) .1s both;
}
.ph-media img{width:100%; height:auto; max-height:520px; object-fit:contain;}
.ph-media.ph-media-photo{padding:0; background:var(--ink-soft);}
.ph-media.ph-media-photo img{max-height:560px; object-fit:cover;}
.page-hero .btn-line{color:#fff; border-color:rgba(250,248,245,0.5);}
.page-hero .btn-line:hover{background:var(--paper); color:var(--ink); border-color:var(--paper);}
@media (max-width:900px){
  .page-hero.ph-split{padding:140px 0 64px;}
  .ph-grid{grid-template-columns:1fr; gap:40px;}
  .ph-media{padding:20px;}
}

/* Aviso "solo en español" cuando el visitante ha elegido otro idioma */
.lang-note{margin-top:20px; font-size:0.85rem; color:#ffb08c; max-width:52ch;}
.lang-note:empty{display:none;}

/* ---------- Texto principal + ficha lateral ---------- */
.split{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,0.6fr); gap:72px; align-items:start;}
.split.split-even{grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);}
@media (max-width:960px){ .split, .split.split-even{grid-template-columns:1fr; gap:44px;} }
.h2-plain{margin-top:16px; font-size:clamp(1.8rem,3vw,2.5rem);}

.prose{max-width:70ch; min-width:0;}
.prose > h2{font-size:clamp(1.6rem,2.6vw,2.15rem); margin-top:56px; scroll-margin-top:110px;}
.prose > .eyebrow + h2{margin-top:16px;}
.prose > h2:first-child{margin-top:0;}
.prose h3{font-size:1.3rem; margin-top:40px;}
.prose p{margin-top:18px; font-size:1.06rem; line-height:1.72; color:var(--ink-soft);}
.prose ul, .prose ol{margin-top:16px; padding-left:22px; list-style:disc;}
.prose ol{list-style:decimal;}
.prose li{margin-top:9px; font-size:1.04rem; line-height:1.65; color:var(--ink-soft);}
.prose li::marker{color:var(--orange);}
.prose strong{font-weight:600; color:var(--ink);}
.prose a{color:var(--ink); border-bottom:1.5px solid var(--orange); transition:color .15s ease;}
.prose a:hover{color:var(--orange-deep);}
.prose figure{margin:40px 0 8px;}
.prose figure img{width:100%; height:auto; max-height:560px; object-fit:cover; background:var(--paper-dim);}
.prose figcaption{margin-top:12px; font-size:0.86rem; line-height:1.5; color:var(--stone);}
.prose .alert{padding:16px 20px; background:var(--paper-dim); border-left:3px solid var(--orange); font-size:0.98rem;}
.prose .prose-aside{margin-top:36px; padding-top:22px; border-top:1px solid var(--line); font-size:0.98rem; color:var(--stone);}
.prose ul.checklist{list-style:none; padding-left:0;}
.prose ul.checklist li{position:relative; padding-left:32px;}
.prose ul.checklist li::before{
  content:''; position:absolute; left:0; top:0.28em; width:18px; height:18px;
  border:1.5px solid var(--orange); border-radius:3px;
}
.prose ul.checklist li::after{
  content:''; position:absolute; left:6px; top:0.42em; width:5px; height:9px;
  border:solid var(--orange); border-width:0 2px 2px 0; transform:rotate(45deg);
}

.prose blockquote.quote{margin:24px 0 0; padding:28px 30px; background:var(--paper-dim); border-left:3px solid var(--orange);}
.prose blockquote.quote p{margin-top:0; font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:460; font-size:1.25rem; line-height:1.5; color:var(--ink);}
.prose blockquote.quote footer{margin-top:14px; font-size:0.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--stone);}
.project-case .project-testimonial + .btn{margin-top:28px;}

/* Tablas comparativas: con scroll propio en móvil, nunca de la página */
.table-wrap{margin-top:24px; overflow-x:auto; -webkit-overflow-scrolling:touch; border-top:2px solid var(--ink);}
.table-wrap table{width:100%; min-width:620px; font-size:0.93rem;}
.table-wrap th{text-align:left; font-size:0.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--stone); padding:14px 14px 12px 0; border-bottom:1px solid var(--line); font-weight:700;}
.table-wrap td{padding:14px 14px 14px 0; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5; color:var(--ink-soft);}
.table-wrap td:first-child{font-weight:600; color:var(--ink);}
.prose .table-note{margin-top:12px; font-size:0.84rem; color:var(--stone);}

/* Ficha lateral */
.fact-box{background:var(--paper-dim); padding:30px 30px 28px; border-top:3px solid var(--orange); position:sticky; top:104px;}
.fact-box h3{font-family:'Archivo',sans-serif; font-size:0.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--stone);}
.fact-box dl{margin:6px 0 0;}
.fact-box dt{margin-top:18px; font-size:0.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-deep);}
.fact-box dd{margin:5px 0 0; font-size:0.96rem; line-height:1.5; color:var(--ink);}
.fact-box dd a{border-bottom:1.5px solid var(--orange);}
.fact-box .btn{margin-top:26px; width:100%; white-space:normal; text-align:center;}
@media (max-width:960px){ .fact-box{position:static;} }

/* ---------- Tarjetas de formato ---------- */
.format-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.format-grid.format-grid-4{grid-template-columns:repeat(4,1fr);}
.format-card{background:var(--paper); padding:34px 30px 36px;}
.format-card .f-num{font-family:'Fraunces',serif; font-size:1.05rem; color:var(--orange);}
.format-card h3{margin-top:14px; font-size:1.22rem; line-height:1.18;}
.format-card p{margin-top:12px; font-size:0.96rem; line-height:1.6; color:var(--stone);}
.format-card a{color:var(--ink); border-bottom:1.5px solid var(--orange);}
@media (max-width:1100px){ .format-grid.format-grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:960px){ .format-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .format-grid, .format-grid.format-grid-4{grid-template-columns:1fr;} .format-card{padding:28px 24px;} }

/* ---------- Materiales ---------- */
.mat-table{border-top:2px solid var(--ink);}
.mat-row{display:grid; grid-template-columns:200px minmax(0,1fr); gap:28px; padding:24px 0; border-bottom:1px solid var(--line);}
.mat-row h3{font-size:1.15rem;}
.mat-row p{color:var(--stone); line-height:1.62; font-size:0.98rem;}
@media (max-width:640px){ .mat-row{grid-template-columns:1fr; gap:8px;} }

/* ---------- Preguntas frecuentes ---------- */
.faq{border-top:2px solid var(--ink); max-width:920px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:24px 52px 24px 0;
  font-family:'Fraunces',Georgia,serif; font-size:1.2rem; font-weight:560; line-height:1.3;
  font-variation-settings:'SOFT' 0, 'WONK' 0;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:'Archivo',sans-serif; font-size:1.6rem; font-weight:400; color:var(--orange);
  transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq summary:hover{color:var(--orange-deep);}
.faq .faq-a{padding:0 0 26px; max-width:72ch; color:var(--stone); font-size:1.02rem; line-height:1.7;}
.faq .faq-a a{color:var(--ink); border-bottom:1.5px solid var(--orange);}

/* ---------- Banda de enlace a casos ---------- */
.band-link{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.band-link h2{margin-top:14px; font-size:clamp(1.7rem,3vw,2.4rem); max-width:22ch;}
.band-link .lede{margin-top:14px; color:var(--stone-invert); max-width:60ch;}
.band-links{margin-top:40px; display:flex; flex-wrap:wrap; gap:18px 36px;}

/* ---------- Tarjetas relacionadas ---------- */
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.related-grid.related-grid-2{grid-template-columns:repeat(2,1fr);}
.rel-card{
  background:var(--paper); display:flex; flex-direction:column; min-width:0;
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);
}
.reveal-enabled .rel-card.reveal.in:hover, .rel-card:hover{transform:translateY(-5px); box-shadow:0 26px 44px -24px rgba(20,19,15,0.35); z-index:1;}
.rel-photo{aspect-ratio:16/10; overflow:hidden; background:var(--paper-dim);}
.rel-photo img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1);}
.rel-card:hover .rel-photo img{transform:scale(1.05);}
.rel-body{padding:24px 26px 28px; display:flex; flex-direction:column; flex:1;}
.rel-kicker{font-size:0.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--orange);}
.rel-body h3{margin-top:10px; font-size:1.2rem; line-height:1.2;}
.rel-body p{margin-top:10px; font-size:0.94rem; line-height:1.55; color:var(--stone); flex:1;}
.rel-more{margin-top:16px; font-size:0.86rem; font-weight:600; color:var(--ink); border-bottom:1.5px solid var(--orange); align-self:flex-start; padding-bottom:2px;}
@media (max-width:960px){ .related-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .related-grid, .related-grid.related-grid-2{grid-template-columns:1fr;} }

/* Las celdas de galería también pueden ser enlaces */
a.mg-cell{display:block;}
a.mg-cell .mg-cap::after{content:' →'; color:var(--orange);}

/* ---------- Índices (casos de éxito y recursos) ---------- */
.case-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:48px 40px;}
.case-card{display:flex; flex-direction:column; min-width:0;}
.case-card-photo{aspect-ratio:4/3; overflow:hidden; background:var(--paper-dim);}
.case-card-photo img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1);}
.case-card:hover .case-card-photo img{transform:scale(1.04);}
.case-card-body{padding-top:22px;}
.case-card-body h2{margin-top:10px; font-size:clamp(1.45rem,2.2vw,1.85rem); line-height:1.12;}
.case-card:hover h2{color:var(--orange-deep);}
.case-card-body p{margin-top:12px; color:var(--stone); line-height:1.6; max-width:56ch;}
.case-card-body .rel-more{display:inline-block;}
.case-cards.case-cards-3{grid-template-columns:repeat(3,1fr); gap:48px 32px;}
@media (max-width:1000px){ .case-cards.case-cards-3{grid-template-columns:1fr; gap:44px;} }
@media (max-width:760px){ .case-cards{grid-template-columns:1fr; gap:44px;} }

.stat-strip.stat-strip-3 .wrap{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){ .stat-strip.stat-strip-3 .wrap{grid-template-columns:1fr; row-gap:32px;} .stat-strip.stat-strip-3 .stat{border-left:none; padding-left:0;} }

/* ---------- Artículos ---------- */
.article-hero{padding:168px 0 64px;}
.article-hero h1{max-width:24ch; font-size:clamp(2.1rem,4.2vw,3.2rem);}
.article-meta{margin-top:24px; display:flex; flex-wrap:wrap; gap:8px 12px; font-size:0.86rem; color:var(--stone-invert);}
.article-meta .sep{color:var(--orange);}
.article-cover{background:linear-gradient(180deg, var(--ink) 0, var(--ink) 50%, var(--paper) 50%, var(--paper) 100%);}
.article-cover-img{aspect-ratio:21/9; overflow:hidden; background:var(--ink-soft);}
.article-cover-img img{width:100%; height:100%; object-fit:cover;}
@media (max-width:700px){ .article-cover-img{aspect-ratio:4/3;} }
.article-section{padding-top:72px;}
.article-layout{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:80px; align-items:start;}
.article-body{max-width:70ch;}
.article-aside{position:sticky; top:104px; display:flex; flex-direction:column; gap:28px;}
.toc{border-top:2px solid var(--ink); padding-top:18px;}
.toc-title{font-size:0.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--stone);}
.toc ol{margin-top:12px; padding-left:0; list-style:none; counter-reset:toc;}
.toc li{counter-increment:toc; margin-top:2px;}
.toc a{display:grid; grid-template-columns:26px 1fr; gap:4px; padding:7px 0; font-size:0.88rem; line-height:1.4; color:var(--ink-soft); border-bottom:1px solid var(--line); transition:color .15s ease;}
.toc a::before{content:counter(toc, decimal-leading-zero); font-family:'Fraunces',serif; font-size:0.8rem; color:var(--orange);}
.toc a:hover{color:var(--orange-deep);}
.aside-cta{background:var(--ink); color:#fff; padding:24px;}
.aside-cta .toc-title{color:#ffb08c;}
.aside-cta p:not(.toc-title){margin-top:8px; font-size:0.92rem; color:var(--stone-invert);}
.aside-cta .btn{margin-top:16px;}
@media (max-width:1000px){
  .article-layout{grid-template-columns:1fr; gap:48px;}
  .article-aside{position:static; order:-1;}
  .aside-cta{display:none;}
}

/* CTA dentro del texto */
.prose .cta-inline{margin:48px 0 8px; padding:30px 32px; background:var(--ink); color:#fff; border-left:3px solid var(--orange);}
.prose .cta-inline p{color:var(--stone-invert); margin-top:8px; font-size:1rem;}
.prose .cta-inline .cta-inline-title{margin-top:0; font-family:'Fraunces',serif; font-size:1.35rem; line-height:1.25; color:#fff;}
.prose .cta-inline .btn{margin-top:20px; border-bottom:none; color:#fff;}
.prose .cta-inline .btn:hover{color:#fff;}

/* Menú: 6 entradas + idiomas + CTA. Por debajo de 1120px pasa a menú hamburguesa
   (antes 960px) para que ninguna etiqueta se parta en dos líneas. */
.main-nav a{white-space:nowrap;}
@media (max-width:1120px){
  .main-nav, .header-actions .lang-switch, .header-actions .btn{display:none;}
  .burger{display:flex;}
}
@media (max-width:1240px) and (min-width:1121px){
  .main-nav{gap:22px;}
  .main-nav a{font-size:0.88rem;}
  .header-actions{gap:12px;}
  .lang-switch{gap:4px;}
}

/* Páginas legales: subapartados (política de cookies) */
.legal-body h3{margin-top:32px; font-size:1.08rem;}
.legal-body h2 + h3{margin-top:16px;}
.legal-body .table-wrap{margin-top:20px;}

/* Home: enlaces a fichas de caso y bloque de recursos */
.project-case .case-more{margin-top:22px; color:#fff; align-self:flex-start;}
.proy-all{margin-top:40px; display:flex; justify-content:center;}
.related-grid.related-grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1100px){ .related-grid.related-grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .related-grid.related-grid-4{grid-template-columns:1fr;} }
/* Soluciones (índice): dos acciones por familia */
.sol-actions{margin-top:28px; display:flex; flex-wrap:wrap; gap:12px;}
.sol-actions .btn{padding:14px 22px; font-size:0.92rem;}