/* ============================================================
   Global Creative Supplier — hoja de estilos
   Paleta: tinta / papel / naranja técnico
   ============================================================ */

:root{
  --tinta:      #0C1116;
  --tinta-2:    #111924;
  --tinta-3:    #18222F;
  --papel:      #F4F1EA;
  --papel-2:    #E9E4D8;
  --linea:      rgba(12,17,22,.16);
  --linea-clara:rgba(244,241,234,.16);
  --gris:       #5D6470;
  --gris-claro: #A7AEBA;
  --naranja:    #E4572E;
  --naranja-2:  #C9451F;

  --fuente: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --titulo: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;

  --ancho: 1240px;
  --margen: clamp(20px, 5vw, 48px);
  --ritmo: clamp(72px, 11vw, 132px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--fuente);
  font-size:16px;
  line-height:1.6;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
::selection{ background:var(--naranja); color:#fff; }

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--margen);
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--naranja); color:#fff;
  padding:12px 18px; z-index:100;
}
.skip:focus{ left:12px; top:12px; }

/* ------------------------------------------------------------
   Cabecera
   ------------------------------------------------------------ */
.cabecera{
  position:fixed; inset:0 0 auto 0;
  z-index:50;
  background:rgba(12,17,22,.55);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease;
}
.cabecera--fija{
  background:rgba(12,17,22,.92);
  border-bottom-color:var(--linea-clara);
}
.cabecera__fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:76px;
}

.marca{ display:flex; align-items:center; gap:12px; color:var(--papel); }
.marca__signo{ color:var(--naranja); flex:none; }
.marca__texto{ display:flex; flex-direction:column; line-height:1.15; }
.marca__texto strong{
  font-family:var(--titulo); font-size:14px; font-weight:600;
  letter-spacing:.01em;
}
.marca__texto small{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris-claro);
}

/* selecteur de idioma */
.cabecera__der{ display:flex; align-items:center; gap:14px; }
.idioma{ position:relative; }
.idioma summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  border:1px solid rgba(244,241,234,.28);
  padding:8px 11px;
  font-family:var(--titulo); font-size:11px; letter-spacing:.14em;
  color:var(--papel);
  transition:border-color .2s ease, background .2s ease;
}
.idioma summary::-webkit-details-marker{ display:none; }
.idioma summary:hover{ border-color:rgba(244,241,234,.6); }
.idioma[open] summary{ border-color:var(--naranja); }
.idioma summary svg{ opacity:.65; }
.idioma ul{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:172px; margin:0; padding:6px; list-style:none;
  background:var(--tinta-2);
  border:1px solid var(--linea-clara);
  box-shadow:0 24px 48px rgba(0,0,0,.45);
  z-index:60;
}
.idioma li a{
  display:block; padding:9px 12px;
  font-size:13px; letter-spacing:0;
  color:rgba(244,241,234,.78);
  transition:background .18s ease, color .18s ease;
}
.idioma li a:hover{ background:rgba(244,241,234,.06); color:var(--papel); }
.idioma li a[aria-current="true"]{ color:var(--naranja); }

.nav{ display:flex; align-items:center; gap:32px; }
.nav a{
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(244,241,234,.78);
  transition:color .2s ease;
  position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-7px;
  width:100%; height:1px; background:var(--naranja);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.nav a:hover{ color:var(--papel); }
.nav a:hover::after{ transform:scaleX(1); }

.nav__cta{
  border:1px solid rgba(244,241,234,.35);
  padding:9px 18px;
  color:var(--papel) !important;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--naranja); border-color:var(--naranja); }

.menu{
  display:none; background:none; border:0; padding:8px;
  width:44px; height:44px; cursor:pointer;
}
.menu span{
  display:block; height:1.5px; background:var(--papel);
  margin:6px 0; transition:transform .3s ease, opacity .3s ease;
}
.menu[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.menu[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero{
  background:
    radial-gradient(1200px 600px at 78% 8%, rgba(228,87,46,.10), transparent 60%),
    var(--tinta);
  color:var(--papel);
  padding-top:calc(76px + clamp(56px, 9vw, 110px));
  padding-bottom:clamp(56px, 8vw, 96px);
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg, transparent, var(--linea-clara), transparent);
}
.hero__grid{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(32px, 5vw, 72px); align-items:center;
}
.hero__grid > *{ min-width:0; }

.ojo{
  display:flex; align-items:center; gap:12px;
  font-family:var(--titulo);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris);
  margin:0 0 22px;
}
.ojo--claro{ color:var(--gris-claro); }
.ojo__linea{ width:36px; height:1px; background:var(--naranja); flex:none; }

.hero h1{
  font-family:var(--titulo);
  font-weight:600;
  font-size:clamp(2.5rem, 5.2vw, 4.35rem);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0 0 24px;
  text-wrap:balance;
}
.hero h1 em{
  font-style:normal;
  color:var(--naranja);
}
.entrada{
  font-size:clamp(1rem, 1.25vw, 1.15rem);
  color:rgba(244,241,234,.72);
  max-width:34ch;
  margin:0 0 34px;
}
.acciones{ display:flex; flex-wrap:wrap; gap:12px; }
.nota{
  margin:22px 0 0;
  font-size:12px; letter-spacing:.04em;
  color:rgba(244,241,234,.5);
}

.boton{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:15px 26px;
  border:1px solid transparent;
  border-radius:2px;
  font-size:14px; font-weight:600; letter-spacing:.01em;
  cursor:pointer;
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.boton--lleno{
  background:var(--tinta); color:var(--papel);
}
.boton--lleno:hover{ background:var(--naranja); transform:translateY(-1px); }
.hero .boton--lleno{ background:var(--papel); color:var(--tinta); }
.hero .boton--lleno:hover{ background:var(--naranja); color:#fff; }
.boton--linea{
  border-color:rgba(244,241,234,.32); color:var(--papel);
}
.boton--linea:hover{ border-color:var(--papel); background:rgba(244,241,234,.06); }
.boton--ancho{ width:100%; }

/* pieza / plano */
.hero__pieza{ position:relative; }
.plano{
  position:relative;
  border:1px solid var(--linea-clara);
  background:linear-gradient(160deg, rgba(255,255,255,.03), transparent 55%);
  padding:18px;
}
.plano::before,.plano::after{
  content:""; position:absolute; width:12px; height:12px;
  border:1px solid var(--naranja);
}
.plano::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.plano::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.plano__svg{ width:100%; height:auto; }

/* --- panel 3D del hero --- */
.plano__marco{
  position:relative;
  width:100%;
  aspect-ratio:560 / 520;
  background-image:
    linear-gradient(rgba(42,54,70,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,54,70,.55) 1px, transparent 1px);
  background-size:28px 28px;
  background-position:center;
}
#lienzo3d{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* --- plano 2D y póster --- */
.plano__dibujo{
  position:absolute; inset:0;
  padding:2%;
  width:100%; height:100%;
  object-fit:contain;
  padding:4%;
  opacity:1;
  transition:opacity .55s ease;
}
.plano__dibujo.oculto{ opacity:0; }
.plano.sin-3d .plano__dibujo{ opacity:0; }
.plano.fase-plano .rotulo-pieza{ opacity:0; }

.plano__poster{ opacity:0; visibility:hidden; }
.plano.sin-3d .plano__poster{ opacity:1; visibility:visible; }


/* botón para cargar el 3D a petición en móvil */
.plano__ver{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:none; align-items:center; gap:8px;
  padding:12px 20px;
  background:var(--naranja); color:#fff;
  border:0; cursor:pointer;
  font-family:var(--titulo); font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 16px 34px rgba(0,0,0,.45);
  transition:background .2s ease;
}
.plano__ver:hover{ background:var(--naranja-2); }
@media (max-width:979px){
  .plano.sin-3d .plano__ver{ display:inline-flex; }
}

.plano__poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
}

.escaneo-3d{
  position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--naranja);
  opacity:0;
  box-shadow:0 0 18px rgba(228,87,46,.6);
  pointer-events:none;
}


.plano.fase-plano .escaneo-3d{
  opacity:.9;
  animation:barrido3d 3.4s ease-in-out infinite alternate;
}
html.poster .chapa,
html.poster .escaneo-3d,
html.poster .capas-etiquetas,
html.poster .rotulo-pieza{ display:none !important; }

.rotulo-pieza{
  position:absolute;
  right:16px; bottom:12px; text-align:right;
  font-family:"Space Grotesk","Inter",monospace;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,241,234,.55);
  border-right:2px solid var(--naranja);
  padding:2px 8px 2px 0;
  line-height:1.5;
}
.rotulo-pieza span{ color:var(--naranja); }

.capas-etiquetas{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.capas-etiquetas svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.etiq3d{
  position:absolute;
  transform:translate(-100%, -50%);
  font-family:var(--titulo);
  font-size:10.5px; letter-spacing:.1em;
  color:rgba(244,241,234,.92);
  white-space:nowrap;
  opacity:0;
  transition:opacity .25s ease;
}
.etiq3d b{ color:var(--naranja); font-weight:600; margin-right:3px; }
@keyframes barrido3d{
  from{ transform:translateY(6%); }
  to{ transform:translateY(94%); }
}

.pieza path, .pieza ellipse{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:traza 2.6s cubic-bezier(.6,.1,.2,1) .3s forwards;
}
@keyframes traza{ to{ stroke-dashoffset:0; } }

.escaneo{
  animation:barrido 5.5s cubic-bezier(.55,.05,.45,.95) infinite;
  opacity:.35;
}
@keyframes barrido{
  0%{ transform:translateY(120px); opacity:0; }
  12%{ opacity:.85; }
  88%{ opacity:.85; }
  100%{ transform:translateY(430px); opacity:0; }
}

.chapa{
  position:absolute;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--tinta-2);
  border:1px solid var(--linea-clara);
  padding:8px 13px;
  font-family:var(--titulo);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--papel);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.chapa--a{ top:15%; left:-14px; animation:flota 7s ease-in-out infinite; }
.chapa--b{ top:25%; left:-14px; animation:flota 8s ease-in-out 1s infinite; }
.chapa--c{ top:35%; left:-14px; animation:flota 9s ease-in-out .5s infinite; }
.chapa__punto{
  width:6px; height:6px; border-radius:50%;
  background:var(--naranja);
  box-shadow:0 0 0 3px rgba(228,87,46,.2);
}
@keyframes flota{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}

/* ------------------------------------------------------------
   Tira de herramientas
   ------------------------------------------------------------ */
.tira{
  background:var(--tinta-2);
  border-top:1px solid var(--linea-clara);
  border-bottom:1px solid var(--linea-clara);
  overflow:hidden;
  padding:16px 0;
}
.tira__pista{
  display:flex; align-items:center; gap:44px;
  width:max-content;
  animation:desliza 42s linear infinite;
}
.tira__pista span{
  font-family:var(--titulo);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,241,234,.45);
  white-space:nowrap;
  position:relative;
}
.tira__pista span::after{
  content:""; position:absolute; right:-24px; top:50%;
  width:4px; height:4px; background:var(--naranja);
  transform:translateY(-50%) rotate(45deg);
}
@keyframes desliza{ to{ transform:translateX(-50%); } }

/* ------------------------------------------------------------
   Secciones
   ------------------------------------------------------------ */
.seccion{ padding-block:var(--ritmo); }
.seccion--oscura{ background:var(--tinta); color:var(--papel); }
.seccion--papel{ background:var(--papel-2); }

.seccion__cabeza{ max-width:760px; margin-bottom:clamp(40px, 6vw, 72px); }
.seccion__cabeza--fila{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:48px; max-width:none;
}
.seccion__cabeza--fila > div{ max-width:620px; }
.seccion__intro{
  color:var(--gris); font-size:1.02rem; max-width:44ch;
  margin:0;
}
.seccion--oscura .seccion__intro{ color:var(--gris-claro); }
.seccion--oscura .ojo{ color:var(--gris-claro); }

h2{
  font-family:var(--titulo);
  font-weight:600;
  font-size:clamp(2rem, 3.6vw, 3.1rem);
  line-height:1.04;
  letter-spacing:-.03em;
  margin:0 0 20px;
  text-wrap:balance;
}

/* ------------------------------------------------------------
   Servicios
   ------------------------------------------------------------ */
.rejilla-servicios{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--linea);
  border:1px solid var(--linea);
}
.servicio{
  background:var(--papel);
  padding:clamp(26px, 3vw, 40px);
  display:flex; flex-direction:column;
  transition:background .3s ease;
  position:relative;
}
.servicio:hover{ background:#FAF8F3; }
.servicio:hover .servicio__icono{ color:var(--naranja); }
.servicio__top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:26px;
}
.servicio__num{
  font-family:var(--titulo);
  font-size:12px; letter-spacing:.18em;
  color:var(--gris);
}
.servicio__icono{
  width:28px; height:28px; color:var(--tinta);
  transition:color .3s ease;
}
.etiqueta{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--naranja);
  border:1px solid rgba(228,87,46,.45);
  padding:3px 8px; margin-left:auto; margin-right:14px;
}
.servicio h3{
  font-family:var(--titulo);
  font-size:1.4rem; font-weight:600; letter-spacing:-.02em;
  margin:0 0 12px;
}
.servicio p{
  color:var(--gris); font-size:.95rem;
  margin:0 0 22px; max-width:40ch;
}
.lista{
  list-style:none; margin:auto 0 0; padding:0;
  border-top:1px solid var(--linea);
  padding-top:18px;
}
.lista li{
  position:relative; padding-left:18px;
  font-size:.87rem; color:var(--tinta);
  margin-bottom:7px;
}

.lista .ejemplo{
  display:inline-block;
  margin-left:4px;
  color:var(--naranja);
  font-size:.8rem; font-weight:600;
  letter-spacing:.01em;
  border-bottom:1px solid rgba(228,87,46,.45);
  padding-bottom:1px;
  white-space:nowrap;
  transition:border-color .2s ease, color .2s ease;
}
.lista .ejemplo:hover{ border-bottom-color:var(--naranja); color:var(--naranja-2); }

.lista li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:1px; background:var(--naranja);
}

/* ------------------------------------------------------------
   Proceso
   ------------------------------------------------------------ */
.pasos{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1px; background:var(--linea-clara);
  border-top:1px solid var(--linea-clara);
  border-bottom:1px solid var(--linea-clara);
}
.pasos li{
  background:var(--tinta);
  padding:clamp(24px, 2.6vw, 36px) clamp(18px, 2vw, 28px);
  min-height:230px;
  display:flex; flex-direction:column;
}
.pasos__num{
  font-family:var(--titulo);
  font-size:11px; letter-spacing:.2em;
  color:var(--naranja);
}
.pasos h3{
  font-family:var(--titulo);
  font-size:1.18rem; font-weight:600;
  margin:36px 0 10px;
}
.pasos p{
  margin:0;
  font-size:.9rem;
  color:rgba(244,241,234,.6);
}

/* ------------------------------------------------------------
   Entregables
   ------------------------------------------------------------ */
.rejilla-entregables{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 2vw, 28px);
}
.entrega{
  border:1px solid var(--linea);
  background:#FAF8F3;
  display:flex; flex-direction:column;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.entrega:hover{
  transform:translateY(-4px);
  border-color:rgba(228,87,46,.5);
  box-shadow:0 24px 50px -30px rgba(12,17,22,.45);
}
.entrega__arte{
  border-bottom:1px solid var(--linea);
  padding:22px;
  color:var(--tinta);
  background:
    linear-gradient(var(--linea) 1px, transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg, var(--linea) 1px, transparent 1px) 0 0/28px 100%;
  background-color:var(--papel-2);
}
.entrega__arte svg{ width:100%; height:auto; }
.entrega__texto{ padding:24px 24px 28px; }
.entrega__texto h3{
  font-family:var(--titulo);
  font-size:1.15rem; font-weight:600;
  margin:0 0 8px;
}
.entrega__texto p{
  margin:0; font-size:.9rem; color:var(--gris);
}

/* ------------------------------------------------------------
   Estudio
   ------------------------------------------------------------ */
.estudio{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(36px, 6vw, 96px);
  align-items:start;
}
.estudio__texto p{
  color:var(--gris); max-width:52ch;
  font-size:1.02rem;
}
.enlace{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:16px;
  font-weight:600; font-size:.95rem;
  border-bottom:1px solid var(--naranja);
  padding-bottom:4px;
}
.enlace span{ transition:transform .25s ease; }
.enlace:hover span{ transform:translateX(4px); }

.estudio__datos{
  display:flex; flex-direction:column;
  border-top:1px solid var(--linea);
}
.dato{
  display:flex; align-items:baseline; gap:22px;
  padding:22px 0;
  border-bottom:1px solid var(--linea);
}
.dato__num{
  font-family:var(--titulo);
  font-size:clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight:600; letter-spacing:-.03em;
  min-width:96px; color:var(--naranja);
}
.dato__txt{ font-size:.9rem; color:var(--gris); }

/* ------------------------------------------------------------
   Contacto
   ------------------------------------------------------------ */
.contacto{
  background:var(--tinta);
  color:var(--papel);
  padding-block:var(--ritmo);
  border-top:1px solid var(--linea-clara);
}
.contacto__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px, 6vw, 96px);
  align-items:start;
}
.contacto h2{ color:var(--papel); }
.contacto__texto > p{
  color:rgba(244,241,234,.65);
  max-width:38ch;
}
.contacto__lista{
  list-style:none; margin:36px 0 0; padding:0;
  border-top:1px solid var(--linea-clara);
}
.contacto__lista li{
  display:flex; align-items:baseline; gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--linea-clara);
  font-size:.95rem;
}
.contacto__lista span{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris-claro); min-width:78px;
}
.contacto__lista a{ border-bottom:1px solid transparent; }
.contacto__lista a:hover{ border-bottom-color:var(--naranja); }

.contacto__directo{
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
}
.contacto__directo-ojo{
  margin:0;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris-claro);
}
.contacto__directo-txt{
  margin:0;
  font-family:var(--titulo);
  font-size:clamp(1.35rem, 2.2vw, 1.75rem);
  line-height:1.2; letter-spacing:-.01em;
  max-width:24ch;
}
.contacto__directo .boton--lleno{
  background:var(--naranja); color:#fff;
}
.contacto__directo .boton--lleno:hover{ background:var(--naranja-2); }
.contacto__directo-nota{
  margin:0;
  font-size:.9rem; color:rgba(244,241,234,.55);
  max-width:36ch;
}
.contacto__directo-nota a{
  color:var(--papel);
  border-bottom:1px solid rgba(244,241,234,.35);
}
.contacto__directo-nota a:hover{ border-bottom-color:var(--naranja); }

/* ------------------------------------------------------------
   Pie
   ------------------------------------------------------------ */
.pie{
  background:var(--tinta-2);
  border-top:1px solid var(--linea-clara);
  padding:34px 0;
  color:var(--gris-claro);
}
.pie__fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.pie__marca{ display:flex; flex-direction:column; line-height:1.35; }
.pie__marca strong{
  font-family:var(--titulo); font-size:13px; color:var(--papel);
  font-weight:600;
}
.pie__marca span{ font-size:11px; letter-spacing:.05em; }
.pie__nav{ display:flex; gap:26px; }
.pie__nav a{
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
}
.pie__nav a:hover{ color:var(--papel); }
.pie__legal{ margin:0; font-size:11.5px; }

/* ------------------------------------------------------------
   Aparición al hacer scroll
   ------------------------------------------------------------ */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.2,.65,.3,1), transform .8s cubic-bezier(.2,.65,.3,1);
}
[data-reveal].es-visible{ opacity:1; transform:none; }

/* retrasos escalonados dentro de una rejilla */
.rejilla-servicios .servicio:nth-child(2),
.rejilla-entregables .entrega:nth-child(2),
.pasos li:nth-child(2){ transition-delay:.08s; }
.rejilla-servicios .servicio:nth-child(3),
.rejilla-entregables .entrega:nth-child(3),
.pasos li:nth-child(3){ transition-delay:.16s; }
.rejilla-servicios .servicio:nth-child(4),
.pasos li:nth-child(4){ transition-delay:.24s; }

/* ------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------ */
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__pieza{ max-width:560px; margin-inline:auto; width:100%; }
  .chapa--a{ right:0; }
  .chapa--b{ left:0; }
  .estudio{ grid-template-columns:1fr; }
  .pasos{ grid-template-columns:1fr 1fr; }
  .pasos li{ min-height:190px; }
}

@media (max-width:860px){
  .nav{
    position:fixed; inset:76px 0 auto 0;
    flex-direction:column; align-items:flex-start;
    gap:0;
    background:rgba(12,17,22,.98);
    border-bottom:1px solid var(--linea-clara);
    padding:8px var(--margen) 24px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .25s ease, transform .3s ease, visibility .25s;
  }
  .nav.abierto{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .nav a{
    width:100%; padding:16px 0;
    border-bottom:1px solid rgba(244,241,234,.08);
    font-size:14px;
  }
  .nav a::after{ display:none; }
  .nav__cta{ margin-top:16px; text-align:center; }
  .menu{ display:block; }

  .rejilla-servicios{ grid-template-columns:1fr; }
  .rejilla-entregables{ grid-template-columns:1fr; }
  .contacto__grid{ grid-template-columns:1fr; }
  .seccion__cabeza--fila{ flex-direction:column; align-items:flex-start; gap:20px; }
  .pie__fila{ flex-direction:column; align-items:flex-start; gap:18px; }
}

@media (max-width:560px){
  .pasos{ grid-template-columns:1fr; }
  .pasos li{ min-height:0; }
  .marca__texto small{ display:none; }
  .hero h1{ font-size:clamp(2rem, 8.4vw, 2.6rem); }
  .chapa--b{ display:none; }
}

/* ------------------------------------------------------------
   Accesibilidad / movimiento
   ------------------------------------------------------------ */
:focus-visible{
  outline:2px solid var(--naranja);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}

@media print{
  .cabecera,.menu,.chapa,.tira,.idioma{ display:none; }
  body{ background:#fff; color:#000; }
}

/* Modo revisión (capturas): ?qa=1 — muestra todo sin animaciones */
html.qa{ scroll-behavior:auto; }
html.qa .cabecera{
  position:absolute;
  background:var(--tinta);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html.qa [data-reveal]{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* ------------------------------------------------------------
   Tipografía para japonés y chino
   ------------------------------------------------------------ */
html[lang="ja"] body{ font-family:"Inter","Noto Sans JP","Segoe UI",sans-serif; line-height:1.85; }
html[lang="zh-Hans"] body{ font-family:"Inter","Noto Sans SC","Segoe UI",sans-serif; line-height:1.85; }

html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3,
html[lang="ja"] .marca__texto strong, html[lang="ja"] .ojo,
html[lang="ja"] .nav a, html[lang="ja"] .boton{
  font-family:"Space Grotesk","Noto Sans JP","Segoe UI",sans-serif;
}
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3,
html[lang="zh-Hans"] .marca__texto strong, html[lang="zh-Hans"] .ojo,
html[lang="zh-Hans"] .nav a, html[lang="zh-Hans"] .boton{
  font-family:"Space Grotesk","Noto Sans SC","Segoe UI",sans-serif;
}

html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3,
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3{
  letter-spacing:0;
  line-height:1.32;
}
html[lang="ja"] .hero h1, html[lang="zh-Hans"] .hero h1{
  font-size:clamp(1.95rem, 4vw, 3.2rem);
  line-height:1.28;
  word-break:auto-phrase;
}
html[lang="ja"] h2, html[lang="zh-Hans"] h2{
  font-size:clamp(1.75rem, 3vw, 2.6rem);
}
html[lang="ja"] .ojo, html[lang="zh-Hans"] .ojo{ letter-spacing:.1em; }
html[lang="ja"] p, html[lang="ja"] li{ word-break:auto-phrase; }
html[lang="zh-Hans"] p, html[lang="zh-Hans"] li{ word-break:normal; }html[lang="ja"] .nav a, html[lang="zh-Hans"] .nav a{ letter-spacing:.06em; }
html[lang="ja"] .entrada, html[lang="zh-Hans"] .entrada{ max-width:32ch; }
html[lang="ja"] .servicio p, html[lang="zh-Hans"] .servicio p,
html[lang="ja"] .pasos p, html[lang="zh-Hans"] .pasos p{ line-height:1.8; }

@media (max-width:560px){
  html[lang="ja"] .hero h1, html[lang="zh-Hans"] .hero h1{ font-size:clamp(1.85rem, 8vw, 2.5rem); }
}

/* ------------------------------------------------------------
   Botón flotante de WhatsApp
   ------------------------------------------------------------ */
.wa{
  position:fixed; right:22px; bottom:22px; z-index:40;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--tinta);
  color:#25D366;
  border:1px solid rgba(244,241,234,.25);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  transition:background .22s ease, color .22s ease, transform .22s ease;
}
.wa:hover{ background:#25D366; color:#fff; transform:translateY(-2px); }
.wa svg{ width:26px; height:26px; }

@media (max-width:560px){
  .wa{ right:16px; bottom:16px; width:50px; height:50px; }
  .wa svg{ width:24px; height:24px; }
}

/* ------------------------------------------------------------
   Página legal
   ------------------------------------------------------------ */
.legal{
  background:var(--papel);
  padding:calc(76px + clamp(48px, 7vw, 96px)) 0 var(--ritmo);
}
.legal__caja{ max-width:780px; margin-inline:auto; }
.legal h1{
  font-family:var(--titulo);
  font-size:clamp(2rem, 4vw, 2.9rem);
  font-weight:600; letter-spacing:-.03em;
  margin:0 0 10px;
}
.legal__fecha{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris); margin:0 0 38px;
}
.legal h2{
  font-family:var(--titulo);
  font-size:1.12rem; font-weight:600; letter-spacing:-.01em;
  margin:34px 0 8px;
}
.legal p,.legal li{ font-size:.98rem; color:#2E3339; }
.legal ul{ padding-left:20px; margin:0 0 12px; }
.legal li{ margin-bottom:6px; }
.legal a{ border-bottom:1px solid var(--naranja); }
.legal__volver{ margin-top:52px; }