/* =====================================================================
   cruce. — Sistema visual (cruce 2.0)
   Código plano (HTML/CSS/JS). Sin frameworks, sin build.
   Paleta: Negro Carbón · Gris Cemento · Blanco Hueso · Naranja Brasa · Amarillo Rayo · Verde Pulso
   Tipografía: Bricolage Grotesque — sólo Regular (400) y ExtraBold (800)
   ===================================================================== */

:root{
  /* Paleta de marca — manual "cruce 2.0" */
  --negro:#1A211F;      /* Negro Carbón */
  --carbon:#1A211F;
  --hueso:#F4F1E9;       /* Blanco Hueso */
  --cemento:#D1CEC7;     /* Gris Cemento */
  --naranja:#EE662C;     /* Naranja Brasa */
  --amarillo:#FFC400;    /* Amarillo Rayo */
  --verde:#35AA99;       /* Verde Pulso */

  /* Semánticos (derivados) */
  --ink:var(--negro);
  --muted:#5B564C;
  --paper:var(--hueso);
  --paper-2:#FFFFFF;   /* cajas por defecto: blanco. Cemento queda como guiño puntual (--paper-3) */
  --paper-3:var(--cemento);
  --line:#E4DFD2;

  /* Tipografía — sólo dos pesos: 800 titulares, 400 texto */
  --sans:'Bricolage Grotesque',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* Medidas */
  --wrap:1140px;
  --radius:0;
  --shadow:0 14px 40px rgba(11,15,14,.14);
  --shadow-sm:0 6px 18px rgba(11,15,14,.09);
  --box-offset:6px; /* offset fijo (no proporcional al font-size) de la caja doble */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background-color:var(--paper)}
body{
  position:relative;
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background-color:var(--paper);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Grano fino sobre toda la página, vía SVG feTurbulence (sin archivo de
   imagen). El feColorMatrix convierte el ruido gris difuso de feTurbulence
   en un moteado de blanco/negro más nítido; mix-blend-mode:overlay hace
   que se vea bien tanto en las secciones claras como en las oscuras. */
body::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:9998;
  pointer-events:none;
  opacity:.24;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 -3.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:var(--sans);color:var(--negro);line-height:1.05;margin:0 0 .4em;font-weight:800;letter-spacing:-.03em}
h1{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
h3{font-size:1.25rem}
p{margin:0 0 1rem}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section--tight{padding:64px 0}
.eyebrow{font-family:var(--sans);font-weight:800;color:var(--negro);font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;margin-bottom:.9em;display:inline-block}
.center{text-align:center}
.lead{font-size:1.18rem;color:var(--muted);max-width:60ch}
.center .lead{margin-left:auto;margin-right:auto}

/* Subrayado gráfico de marca (reemplaza el subrayado a mano) — uso puntual, máx. 1-2 veces por página */

/* Palabra destacada en caja de color sólido (del deck: "SE CRUZAN.") — doble caja
   proporcional al texto (offset en em): caja de atrás asoma abajo a la derecha.
   La caja de atrás arranca escondida (translate 0,0) y "sale" al entrar en el
   viewport (.box-in); --pz suma un parallax sutil mientras se sigue scrolleando. */
.hl{position:relative;display:inline-block;white-space:nowrap;color:var(--negro);padding:.05em .22em;z-index:1}
.hl::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--amarillo);z-index:-2;
  transform:translate(0,0)}
.hl::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--naranja);z-index:-1}
.hl.box-in::before{animation:boxReveal .65s cubic-bezier(.16,.84,.44,1) forwards}
/* variante verde/amarillo puntual (p.ej. "Así pensamos.") */
.hl-alt .hl::before{background:var(--amarillo)}
.hl-alt .hl::after{background:var(--verde)}

@keyframes boxReveal{
  0%{transform:translate(0,0)}
  100%{transform:translate(
    calc(var(--box-offset) + var(--pz,0px) * .6),
    calc(var(--box-offset) + var(--pz,0px)))}
}
@media(prefers-reduced-motion: reduce){
  .hl::before,.paper-note::before{transform:translate(var(--box-offset),var(--box-offset)) !important;animation:none !important}
}

/* Filete tricolor — firma gráfica de marca, uso puntual (encabezados de página) */
.filete{height:6px;width:120px;background:linear-gradient(90deg,var(--naranja) 0 50%,var(--amarillo) 50% 75%,var(--verde) 75% 100%);margin-bottom:22px}

/* Trama de puntos (naranja Brasa) — un recurso gestual, uso puntual por sección */

/* ===================== Botones ===================== */
.btn{display:inline-flex;align-items:center;gap:.5em;border:none;cursor:pointer;
  font-family:var(--sans);font-weight:800;font-size:.98rem;padding:.85em 1.5em;border-radius:0;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--negro);color:var(--hueso)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--accent{background:var(--naranja);color:var(--negro)}
.btn--accent:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,90,0,.32)}
.btn--ghost{background:transparent;color:var(--negro);border:1.5px solid var(--negro)}
.btn--ghost:hover{background:var(--negro);color:var(--hueso)}

/* ===================== Navbar ===================== */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.1) blur(8px);
  background:rgba(244,241,233,.86);border-bottom:1px solid var(--line);
  transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:.45em;font-weight:800;font-size:1.5rem;color:var(--negro);letter-spacing:-.03em}
.brand-logo{height:38px;width:auto;display:block}
.footer-mark{height:46px;width:auto;display:block}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{font-weight:400;color:var(--ink);position:relative;padding:4px 0}
.nav__links a.active,.nav__links a:hover{font-weight:800}
.nav__links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--naranja)}
.nav__links a:not(.active)::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
  background:var(--naranja);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
.nav__links a:not(.active):hover::before{transform:scaleX(1)}
.nav__right{display:flex;align-items:center;gap:18px}

/* Toggle idioma */
.lang{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.85rem;color:var(--muted)}
.lang button[data-lang-btn]{border:none;background:none;font:inherit;cursor:pointer;color:var(--muted);padding:2px;transition:color .15s}
.lang button[data-lang-btn].active{color:var(--negro)}
.switch{position:relative;width:50px;height:28px;border-radius:0;background:var(--naranja);cursor:pointer;border:none;flex:0 0 auto;transition:background .2s ease}
.switch span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:0;background:var(--hueso);transition:left .2s ease;box-shadow:0 2px 5px rgba(11,15,14,.3)}
.switch.es span{left:25px}

.burger{display:none;border:none;background:none;cursor:pointer;font-size:1.6rem;color:var(--negro)}

/* Mobile menu */
.mobile{position:fixed;inset:0;z-index:60;background:var(--paper);transform:translateX(100%);
  transition:transform .25s ease;display:flex;flex-direction:column;padding:28px 24px;gap:22px}
.mobile.open{transform:translateX(0)}
.mobile a{font-size:1.4rem;font-weight:800}
.mobile .close{align-self:flex-end;font-size:1.8rem;background:none;border:none;cursor:pointer}

/* ===================== Hero ===================== */
.hero{position:relative;padding:90px 0 70px;overflow:hidden}
.hero__inner{max-width:960px;position:relative;z-index:2}
.hero h1{margin-bottom:.25em;text-transform:uppercase}
.hero__sub{font-size:1.3rem;color:var(--muted);max-width:46ch;margin-bottom:1.6em}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}

/* Hero con video de fondo */
.hero--video{padding:120px 0 110px}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(11,15,14,.86) 0%, rgba(11,15,14,.58) 55%, rgba(255,90,0,.32) 100%)}
.hero--video .hero__inner{color:var(--hueso)}
.hero--video h1{color:var(--hueso)}
.hero--video .eyebrow{color:var(--amarillo)}
.hero--video .hero__sub{color:rgba(244,241,233,.92)}
.hero--video .btn--ghost{color:var(--hueso);border-color:rgba(244,241,233,.8)}
.hero--video .btn--ghost:hover{background:var(--hueso);color:var(--negro)}

/* Subtítulo de modalidades */
.modes-head{margin-top:72px}
.modes-head .eyebrow{margin-bottom:0}

/* ===================== La idea del cruce ===================== */
.idea{background-color:var(--negro);
  background-image:url("../images/brand/patterns/dots.png"), url("../images/brand/gradients/anochecer.png");
  background-repeat:repeat, no-repeat;
  background-position:0 0, center;
  background-size:130px, cover;
  color:var(--hueso);border-radius:var(--radius);padding:64px 48px;position:relative;overflow:hidden}
.idea h2{color:var(--hueso)}
.idea .eyebrow{color:var(--amarillo)}
.idea p{color:#DCD8CE;max-width:62ch}
/* Ocultas por ahora (piden lo mismo que las polaroids "palabra x palabra" y
   quedaban redundantes) — el admin sigue pudiendo editarlas, solo no se ven. */
.crosses{display:none}
.cross-chip{display:inline-flex;align-items:center;gap:.5em;background:rgba(244,241,233,.08);
  border:1px solid rgba(244,241,233,.16);padding:.5em 1em;border-radius:0;font-size:1rem;opacity:1;
  transition:opacity .45s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation:chipFloat 5s ease-in-out infinite;will-change:transform,opacity}
.cross-chip.swap{opacity:0}
.cross-chip:hover{background:rgba(244,241,233,.16);border-color:rgba(244,241,233,.4);
  box-shadow:0 10px 24px rgba(0,0,0,.25);animation-play-state:paused}
.cross-chip b{color:var(--amarillo);font-weight:800}
.cross-chip .x{color:var(--naranja);font-weight:800;font-size:1.1rem;line-height:1;display:inline-block;
  animation:xPulse 2.6s ease-in-out infinite}
.cross-chip:hover .x{color:var(--amarillo)}
@keyframes chipFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(-1.2deg)}}
@keyframes xPulse{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.28) rotate(10deg)}}

/* ===================== Servicios (3 C) ===================== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px}
.card{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;box-shadow:var(--shadow-sm);cursor:pointer;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card:focus-visible{outline:2px solid var(--naranja);outline-offset:2px}
/* Ícono de servicio (línea, mismo estilo) */
.ic{width:52px;height:52px;border-radius:0;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.card .ic{background:var(--naranja);color:var(--negro)}
.card:nth-child(2) .ic{background:var(--amarillo);color:var(--negro)}
.card:nth-child(3) .ic{background:var(--verde);color:var(--negro)}
/* 01/02/03 al lado del ícono, grande, para que se note que es un recorrido */
.card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card__head .ic{margin-bottom:0}
.card__num{font-size:2.1rem;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--naranja)}
.card:nth-child(2) .card__num{color:var(--amarillo)}
.card:nth-child(3) .card__num{color:var(--verde)}
.card h3{font-size:1.5rem;margin-bottom:.15em}
.card .kicker{color:var(--muted);font-size:.95rem;line-height:1.4;margin-bottom:1em;display:block;min-height:2.8em}
.card ul{list-style:none;margin:0;padding:0}
.card li{padding:.34em 0 .34em 1.4em;position:relative;font-size:.97rem;color:var(--ink)}
.card li::before{content:"";position:absolute;left:0;top:.95em;width:9px;height:9px;border-radius:50%;background:var(--naranja)}
.card:nth-child(2) li::before{background:var(--amarillo)}
.card:nth-child(3) li::before{background:var(--verde)}

/* Al hacer hover, la esquina inferior derecha hace un fold de hoja y
   revela el CTA sobre fondo naranja, invitando a ver la simulación de chat */
.card__fold{position:absolute;right:0;bottom:0;width:34px;height:34px;
  clip-path:polygon(100% 0,0% 100%,100% 100%);
  background:linear-gradient(135deg,var(--paper-2) 0%,#e2ddd0 100%);
  box-shadow:-4px -4px 10px rgba(0,0,0,.12);
  transition:width .35s cubic-bezier(.34,1.4,.6,1),height .35s cubic-bezier(.34,1.4,.6,1),
    background .3s ease,box-shadow .3s ease;
  pointer-events:none}
.card:hover .card__fold,.card:focus-visible .card__fold{
  width:140px;height:140px;background:var(--naranja);box-shadow:-6px -6px 16px rgba(0,0,0,.18)}
.card:nth-child(2):hover .card__fold,.card:nth-child(2):focus-visible .card__fold{background:var(--amarillo)}
.card:nth-child(3):hover .card__fold,.card:nth-child(3):focus-visible .card__fold{background:var(--verde)}
.card__fold-cta{position:absolute;right:16px;bottom:14px;display:flex;align-items:center;gap:5px;
  font-weight:800;font-size:.85rem;color:var(--negro);
  opacity:0;transform:translate(8px,8px) scale(.85);pointer-events:none;
  transition:opacity .25s ease .05s,transform .3s cubic-bezier(.34,1.4,.6,1) .05s}
.card__fold-cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;flex:none}
.card:hover .card__fold-cta,.card:focus-visible .card__fold-cta{opacity:1;transform:translate(0,0) scale(1)}
.card__mobile-cta{display:none}
@media(max-width:900px){
  /* sin hover real en touch: el fold no anima, se muestra una línea de CTA fija abajo */
  .card__fold,.card__fold-cta{display:none}
  .card__mobile-cta{display:flex;align-items:center;gap:6px;
    font-weight:800;font-size:.92rem;color:var(--naranja);padding-top:14px}
  .card__mobile-cta svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5;flex:none}
}

/* ===================== Pop-up de simulación de chat ===================== */
/* Excepción puntual a las esquinas rectas del resto del sitio: acá buscamos que
   se sienta como una pantalla de celular, así que el marco va redondeado. */
.chat-modal .modal__box{max-width:400px;padding:0;overflow:hidden;border-radius:26px}
.chatphone{display:flex;flex-direction:column;height:min(600px,80vh);background:var(--hueso)}
/* Pantallas muy grandes: el modal base (.modal) alinea arriba por defecto
   (pensado para otros modales con contenido largo que puede necesitar
   scroll) — para este chat, chico y de alto fijo, en pantallas grandes eso
   lo deja pegado arriba con mucho aire abajo. Se centra y se le da un poco
   más de alto, ya que sobra pantalla. ".modal.chat-modal" (no solo
   ".chat-modal") para ganarle en especificidad a la regla base .modal. */
@media(min-width:1600px){
  .modal.chat-modal{align-items:center}
  .chatphone{height:min(720px,80vh)}
}
.chatphone__head{display:flex;align-items:center;gap:12px;padding:18px 52px 18px 22px;
  background:var(--negro);color:var(--hueso);flex:none;transition:background .2s ease,color .2s ease}
.chatphone__avatar{width:38px;height:38px;border-radius:50%;background:var(--carbon);color:var(--hueso);
  display:flex;align-items:center;justify-content:center;flex:none}
.chatphone__avatar svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2}
.chatphone__who strong{display:block;font-size:.98rem;font-weight:800}
.chatphone__who span{display:block;font-size:.78rem;color:inherit;opacity:.72;font-weight:600}
.chatphone__body{flex:1;overflow-y:scroll;padding:22px;display:flex;flex-direction:column;gap:10px;
  background:var(--hueso) url("../images/whatsapp_background.jpg") center/cover no-repeat}
.bubble{max-width:80%;padding:.6em .95em;border-radius:14px;font-size:.94rem;line-height:1.4;
  opacity:0;transform:translateY(8px);animation:bubbleIn .3s ease forwards}
.bubble--in{align-self:flex-start;background:var(--paper-2);color:var(--negro);border:1px solid var(--line);
  border-bottom-left-radius:3px}
.bubble--out{align-self:flex-end;background:var(--naranja);color:var(--negro);border-bottom-right-radius:3px}
/* Color de servicio: top bar + burbujas propias de cruce (bubble--out) */
.chat--comunicacion .chatphone__head{background:var(--naranja);color:var(--negro)}
.chat--creatividad .chatphone__head{background:var(--amarillo);color:var(--negro)}
.chat--consultoria .chatphone__head{background:var(--verde);color:var(--negro)}
.chat--comunicacion .bubble--out{background:var(--naranja)}
.chat--creatividad .bubble--out{background:var(--amarillo)}
.chat--consultoria .bubble--out{background:var(--verde)}
@keyframes bubbleIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.bubble--typing{display:flex;gap:4px;align-items:center;padding:.75em 1em}
.bubble--typing span{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;
  animation:typingDot 1s ease infinite}
.bubble--typing span:nth-child(2){animation-delay:.15s}
.bubble--typing span:nth-child(3){animation-delay:.3s}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
/* Nota para quien visita el sitio (no es parte del diálogo cliente/cruce).
   El CTA se agrega adentro de esta misma caja (no como elemento aparte) para
   que no cambie de ancho ni "salte" al aparecer. */
.chat-note{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;font-size:.85rem;font-weight:700;
  color:var(--hueso);
  background-color:var(--negro);
  background-image:url("../images/brand/patterns/crosses.png"), url("../images/brand/gradients/brasa.png");
  background-repeat:repeat, no-repeat;
  background-position:0 0, center;
  background-size:130px, cover;
  padding:22px;margin:14px -22px -22px;
  opacity:0;transform:translateY(32px);animation:noteSlideIn .45s cubic-bezier(.16,.84,.44,1) forwards}
.chat-note p{margin:0}
.chat-note .btn{padding:.6em 1.3em;font-size:.88rem}
@keyframes noteSlideIn{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@media(max-width:480px){.chatphone{height:min(560px,78vh)}}

.modes{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.mode{background:var(--paper-2);border:1px solid var(--line);border-radius:0;padding:28px 26px;max-width:340px;
  box-shadow:var(--shadow-sm)}
.mode .ic{margin:0 0 14px;background:var(--carbon);color:var(--hueso)}
.mode h3{font-size:1.3rem;margin-bottom:.35em}
.mode p{color:var(--muted);font-size:.97rem;margin:0;line-height:1.5}

/* ===================== Casos ===================== */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px}
.case{position:relative;display:block;width:100%;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease, border-color .3s ease}
.case:hover{transform:translateY(-10px);box-shadow:0 26px 50px rgba(11,15,14,.24)}
.case__reveal{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(244,241,233,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--carbon);font-weight:800;font-size:1.02rem;opacity:0;transition:opacity .25s ease}
.case__reveal svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5}
.case:hover .case__reveal{opacity:1}
/* Mobile (home/resumen): sin hover real en touch, entonces en vez del blur
   se muestra una línea de CTA naranja fija debajo de la tarjeta (mismo
   patrón que .card__mobile-cta en los servicios). Se usa el mismo corte
   de 900px que esos. En Work (.work-card) el corte es 620px, el mismo
   donde esa tarjeta ya pasa a layout apilado — ver más abajo. */
.case__mobile-cta{display:none}
@media(max-width:900px){
  .cases .case__reveal{display:none}
  .case__mobile-cta{display:flex;align-items:center;gap:6px;
    font-weight:800;font-size:.92rem;color:var(--naranja);padding-top:14px}
  .case__mobile-cta svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5;flex:none}
}
.case__img{aspect-ratio:4/3;background:var(--carbon);position:relative;overflow:hidden}
.case__img img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.25,.8,.25,1)}
.case:hover .case__img img{transform:scale(1.08)}
.case__img .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(244,241,233,.5);font-weight:800;font-size:3.4rem;line-height:1}
.case__body{padding:22px 22px 26px}
/* Título y bajada reservan siempre el alto de 2 líneas (con clamp) así el
   renglón de industria + año queda a la misma altura en toda la fila,
   tengan 1 o 2 líneas de texto. */
.case__body .case__headline{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.28em}
.case__body .case__cross{font-size:.9rem;margin:.4em 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.8em}
.case__body .modal__meta{color:var(--muted);font-weight:500;margin:.5em 0 0;font-size:.82rem}
.case__tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tag{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--negro);
  background:var(--amarillo);padding:.25em .7em;border-radius:0}
.case h3{font-size:1.2rem;margin-bottom:.2em}
/* El gancho del cruce es una frase corta */
.case__cross{color:var(--negro);font-size:1rem;font-weight:400;line-height:1.4}

/* ===================== Muro de logos (clientes) ===================== */
.logos-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
@media(max-width:640px){.logos-wall{grid-template-columns:repeat(2,1fr)}}

/* Clientes + testimonios en la misma fila (página Trabajo) — alturas parejas */
.work-intersect{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.work-intersect .logos-wall{grid-template-columns:repeat(3,1fr);margin-top:28px}
.work-intersect .logo-cell{min-height:84px;padding:18px 14px}
.work-intersect .tcar{max-width:none;margin-top:28px}
@media(max-width:900px){
  .work-intersect{grid-template-columns:1fr;gap:48px}
  .work-intersect .logos-wall{grid-template-columns:repeat(3,1fr)}
  .work-intersect .logo-cell{min-height:110px;padding:28px 22px}
}
@media(max-width:640px){.work-intersect .logos-wall{grid-template-columns:repeat(2,1fr)}}
.logo-cell{background:var(--paper-2);border:1px solid var(--line);border-radius:0;
  display:flex;align-items:center;justify-content:center;padding:28px 22px;min-height:110px;
  transition:transform .2s ease, box-shadow .2s ease}
.logo-cell:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.logo-cell img{max-height:46px;max-width:100%;width:auto;opacity:.85}
.logo-cell.more{font-weight:800;color:var(--negro);font-size:1.1rem}

/* ===================== Sobre / Team ===================== */
.about{display:grid;grid-template-columns:0.8fr 1.2fr;gap:48px;align-items:stretch}
.about__photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative}
.about__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.about__photo{aspect-ratio:4/5}}

/* ===================== Timeline "Somos" (pin + bolitas + recorrido que se pinta) =====================
   .timeline-pin es un "carril"; su hijo se queda pegado (position:sticky)
   mientras se scrollea ese carril, así la sección queda fija y solo se va
   completando la línea, hasta pintar la bolita verde con el pulso final.
   El alto de .timeline-pin lo fija JS (initValuesTimeline en main.js) para
   que el "frenado" dure exactamente lo que dura la animación — ni un pixel
   de scroll trabado de más una vez que ya terminó de pintarse. */
.timeline-pin{position:relative;margin-top:32px}
.timeline-pin__sticky{position:sticky;top:96px;height:calc(100vh - 96px);
  display:flex;align-items:center;overflow:hidden}
.timeline-pin__sticky > .wrap{width:100%}
.timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:center;
  height:56px;margin-top:36px}
.timeline__track{position:absolute;left:12px;right:12px;top:50%;height:3px;background:var(--line);
  transform:translateY(-50%);border-radius:2px;overflow:hidden}
/* El gradiente queda FIJO (nunca se estira) ocupando todo el track; lo que
   avanza es la máscara gris que lo tapa desde la derecha y se va achicando,
   "descubriendo" el gradiente de a poco en vez de estirarlo. Los cortes de
   color del gradiente se fijan por JS (initValuesTimeline) para que coincidan
   exacto con la posición de cada bolita. */
.timeline__gradient{position:absolute;inset:0;
  background:linear-gradient(to right,var(--naranja),var(--amarillo),var(--verde))}
.timeline__fill{position:absolute;top:0;right:0;bottom:0;width:100%;background:var(--line)}
.timeline__dot{position:relative;justify-self:center;width:24px;height:24px;border-radius:50%;
  background:var(--line);z-index:2;box-shadow:0 0 0 5px var(--paper);transition:background .2s ease}
.timeline__dot--1.is-on{background:var(--naranja)}
.timeline__dot--2.is-on{background:var(--amarillo)}
.timeline__dot--3.is-on{background:var(--verde)}
/* Cada bolita pulsa con su propio color cuando la línea le pasa por detrás
   (ver initValuesTimeline en main.js) — no solo la verde al final. */
.timeline__dot::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;pointer-events:none}
.timeline__dot--1::after{background:var(--naranja)}
.timeline__dot--2::after{background:var(--amarillo)}
.timeline__dot--3::after{background:var(--verde)}
.timeline__dot.pulse::after{animation:dotPing 1.1s cubic-bezier(0,0,.2,1) 1}
@keyframes dotPing{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
@media(max-width:640px){
  .timeline-pin{height:auto!important;margin-top:0}
  .timeline-pin__sticky{position:static;height:auto;display:block;overflow:visible}
  .timeline{display:none}
}

/* ===================== Valores ===================== */
/* Sin caja: cada bloque cuelga de un pequeño tallo del mismo color que su
   bolita en el timeline, para que se lea como continuación del recorrido. */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
.value{position:relative;padding:26px 6px 0}
.value__stem{position:absolute;top:0;left:50%;transform:translateX(-50%);width:3px;height:22px;background:var(--naranja)}
.value:nth-child(2) .value__stem{background:var(--amarillo)}
.value:nth-child(3) .value__stem{background:var(--verde)}
.value h3{font-size:1.05rem;line-height:1.3;min-height:2.6em;color:var(--negro);margin-bottom:.1em;text-transform:uppercase;letter-spacing:.02em}
.value p{font-size:.96rem;color:var(--muted);margin:0}
.value strong{display:block;color:var(--ink);margin-bottom:.4em;font-weight:800;line-height:1.35;min-height:2.7em}

/* ===================== Quote ===================== */
.quote{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:54px 48px;max-width:820px;position:relative}
.quote::before{content:"\201C";position:absolute;top:.1em;left:.3em;font-family:Georgia,serif;font-size:6rem;color:var(--amarillo);opacity:.7;line-height:1}
.quote p{font-size:1.5rem;color:var(--negro);font-weight:800;line-height:1.3}
.quote cite{font-style:normal;color:var(--muted);font-size:.98rem}
/* Uso puntual: la cita al pie del pop-up del caso (después de "Lo que dijo") —
   sigue siendo una caja (borde + padding generoso), pero sin el fondo blanco
   de .quote, para que respire junto al fondo hueso del pop-up. */

/* CTA de cierre al final del pop-up del caso — por default el mismo texto/botón
   que el cierre de los ejemplos de chat en la home (ver caseCtaHTML, projects.js). */
/* Sangra hasta el borde del modal (contrarresta el padding de .modal__pad) —
   .modal__box tiene overflow:hidden, así que las esquinas de abajo quedan
   redondeadas solas, a juego con el modal. */

/* Variante con imagen de marca al lado (home) */
.quote--visual{display:flex;align-items:stretch;padding:0;max-width:960px;overflow:hidden}
.quote--visual::before{top:40px;left:40px}
.quote__text{flex:1.2;padding:54px 48px;display:flex;align-items:center}
.quote__text p{margin:0}
.quote__visual{flex:1;position:relative;min-height:240px;overflow:hidden;background-color:var(--negro);
  background-image:url("../images/brand/patterns/crosses.png"), url("../images/brand/gradients/anochecer.png");
  background-repeat:repeat, no-repeat;
  background-position:0 0, center;
  background-size:130px, cover}
/* Foto opcional editable desde el admin de contenido (images/quote-visual.jpg).
   Si no existe, el onerror la esconde y queda la textura de marca de arriba. */
.quote__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
@media(max-width:760px){
  .quote--visual{flex-direction:column}
  .quote--visual .quote__text{padding:40px 24px 8px}
  .quote--visual .quote__visual{min-height:180px}
}

/* ===================== CTA final ===================== */
.cta-final{background-color:var(--negro);
  background-image:url("../images/brand/patterns/crosses.png"), url("../images/brand/gradients/brasa.png");
  background-repeat:repeat, no-repeat;
  background-position:0 0, center;
  background-size:130px, cover;
  color:var(--hueso);border-radius:var(--radius);padding:72px 48px;position:relative;overflow:hidden}
.cta-final h2{color:var(--hueso);text-transform:uppercase}
.cta-final p{color:rgba(244,241,233,.88);max-width:44ch;margin:0 0 1.6em}

/* ===================== Marquee ===================== */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;background:var(--paper-2)}
.marquee__track{display:flex;align-items:center;gap:36px;white-space:nowrap;animation:scroll 28s linear infinite;width:max-content}
.marquee__track span{font-weight:800;font-size:1.4rem;color:var(--negro);white-space:nowrap;text-transform:uppercase;letter-spacing:.01em}
.marquee__track .x-mark{display:inline-block;width:26px;height:26px;flex:none;
  background-image:url("../images/brand/logo/symbol-carbon.png");
  background-size:contain;background-repeat:no-repeat;background-position:center}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===================== Page hero (sub-páginas) ===================== */
.page-hero{padding:72px 0 24px}
.page-hero h1{margin-bottom:.2em;text-transform:uppercase;max-width:800px}
.page-hero .lead{font-size:1.25rem}

/* ===================== Detalle de casos (work) ===================== */
/* El título siempre va en negro/carbón — el color que distingue cada
   sección lo lleva solo la rayita de arriba. */
.quote p b,.tslide blockquote b{font-weight:800}
.quote p a,.tslide blockquote a{color:var(--naranja);text-decoration:underline;text-underline-offset:.15em}



/* Cliente como overlay sutil sobre el thumbnail (legible en cualquier fondo) */
.case__img::before{content:"";position:absolute;top:0;left:0;right:0;height:48%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0))}
.case__client{position:absolute;top:11px;left:14px;z-index:2;color:var(--hueso);font-size:.72rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.case__tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
/* Tags sobre el thumbnail (tarjetas tipo home): así, si envuelven a más de
   una línea, no empujan el título — la tarjeta mantiene siempre la misma altura. */
.case__img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;z-index:1;pointer-events:none;
  background:linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,0))}
.case__tags--overlay{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;margin-bottom:0}
.case__headline{font-size:1.3rem;line-height:1.14;color:var(--negro);margin:0;font-weight:800}



/* Reproductor de video custom: sutil, no tapa el video — solo play/pause,
   mute/unmute y una línea de progreso naranja flotando sobre el borde inferior. */
.case-video{position:relative;aspect-ratio:4/3;border:1px solid var(--line);background:#000;overflow:hidden}
.case-video video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
/* En fullscreen el contenedor pasa a ocupar toda la pantalla: se saca el
   aspect-ratio fijo de la card, se centra con flex (no confiar en % de
   alto/ancho del <video> para esto) y el video escala a su tamaño natural
   sin recortar ni estirar, sea horizontal, vertical o 4K. */
.case-video:fullscreen,.case-video:-webkit-full-screen{
  aspect-ratio:auto;width:100vw;height:100vh;
  display:flex;align-items:center;justify-content:center;background:#000}
.case-video:fullscreen video,.case-video:-webkit-full-screen video{
  width:auto !important;height:auto !important;max-width:100%;max-height:100%;object-fit:contain}
/* Botón de play grande sobre el poster — visible hasta el primer play, ahí
   se oculta y no vuelve a aparecer aunque se pause (ver .played en JS). */
.case-video__bigplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:var(--naranja);display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 6px 18px rgba(11,15,14,.35);transition:background .15s ease}
.case-video__bigplay svg{width:22px;height:22px;margin-left:2px}
.case-video__bigplay:hover{animation:bigPlayPulse 1s ease-in-out infinite}
@keyframes bigPlayPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}
.case-video.played .case-video__bigplay{display:none}
.case-video__bar{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;gap:10px;padding:9px 10px;
  opacity:0;transition:opacity .12s ease}
.case-video:hover .case-video__bar{opacity:1;transition:opacity .15s ease}
.case-video__btn{background:none;border:none;padding:0;width:22px;height:22px;flex:none;display:flex;
  align-items:center;justify-content:center;color:#fff;cursor:pointer;filter:drop-shadow(0 1px 3px rgba(0,0,0,.65))}
.case-video__btn svg{width:18px;height:18px}
.case-video__progress{flex:1;padding:8px 0;cursor:pointer}
.case-video__progress-track{width:100%;height:3px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.4);box-shadow:0 1px 3px rgba(0,0,0,.5)}
.case-video__progress-fill{height:100%;width:0%;background:var(--naranja)}
.case-video__vol{-webkit-appearance:none;appearance:none;width:52px;height:18px;flex:none;
  background:transparent;cursor:pointer;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.case-video__vol::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:rgba(255,255,255,.4)}
.case-video__vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;
  border-radius:50%;background:#fff;margin-top:-3.5px}
.case-video__vol::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.4)}
.case-video__vol::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#fff;border:none}

/* ===================== Formulario ===================== */
.form{display:grid;gap:18px;max-width:560px}

/* ===================== Contacto (sin form) ===================== */
.channel{display:inline-flex;align-items:center;gap:9px;background:rgba(244,241,233,.14);
  border:1px solid rgba(244,241,233,.3);color:var(--hueso);padding:.6em 1.1em;border-radius:0;font-weight:800;
  transition:background .18s ease, transform .18s ease}
.channel:hover{background:var(--hueso);color:var(--negro);transform:translateY(-2px)}
.channel svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* Nota amarilla — doble caja superpuesta (bloques de color), sin cinta ni rotación.
   Misma mecánica de reveal + parallax que .hl (ver @keyframes boxReveal). */
.paper-note{position:relative;display:inline-block;color:var(--negro);font-weight:800;
  font-size:1.05rem;padding:12px 22px;border-radius:0;z-index:1}
.paper-note::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--amarillo);z-index:-2;
  transform:translate(0,0)}
.paper-note::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--naranja);z-index:-1}
.paper-note.box-in::before{animation:boxReveal .65s cubic-bezier(.16,.84,.44,1) forwards}

/* ===================== Trabajo: grilla + modal ===================== */
/* Casos en fila: thumbnail a la izquierda, contenido a la derecha */

.modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;
  background:rgba(11,15,14,.68);padding:48px 16px;overflow-y:auto}
.modal.open{display:flex}
.modal__box{background:var(--paper);max-width:840px;width:100%;border-radius:var(--radius);
  position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal__close{position:absolute;top:14px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper-2);font-size:1.2rem;cursor:pointer;color:var(--negro);line-height:1}

.modal__close:hover{background:var(--negro);color:var(--hueso)}

/* ===================== Carrusel de testimonios ===================== */
.tcar{position:relative;max-width:780px;margin:34px auto 0}
.tcar__viewport{position:relative;min-height:210px;touch-action:pan-y}
.tslide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:0 44px}
.tslide.active{opacity:1;pointer-events:auto;position:relative}
.tslide blockquote{font-size:1.4rem;line-height:1.4;color:var(--negro);font-weight:800;margin:0;max-width:60ch}
.tslide cite{font-style:normal;color:var(--muted);font-size:.95rem}
.tcar__dots{display:flex;gap:9px;justify-content:center;margin-top:22px}
.tcar__dots button{width:10px;height:10px;border-radius:50%;border:none;background:var(--line);cursor:pointer;padding:0}
.tcar__dots button.active{background:var(--naranja)}
.tcar__arrow{position:absolute;top:42%;z-index:2;background:var(--paper-2);border:1px solid var(--line);width:40px;height:40px;
  border-radius:50%;cursor:pointer;font-size:1.1rem;color:var(--negro);display:flex;align-items:center;justify-content:center}
.tcar__arrow:hover{background:var(--negro);color:var(--hueso)}
.tcar__arrow.prev{left:-6px}.tcar__arrow.next{right:-6px}
@media(max-width:840px){.tcar__arrow{display:none}}

/* ===================== Diario de viaje (fotos que se mantienen) ===================== */
/* Foto pegada estilo polaroid */
.tape-photo{position:relative;display:inline-block;background:var(--hueso);padding:8px;border-radius:0;
  box-shadow:0 12px 30px rgba(11,15,14,.25)}
.tape-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}
.tape-photo figcaption{font-family:var(--sans);font-weight:800;font-size:.85rem;letter-spacing:.02em;color:var(--negro);text-align:center;padding:8px 2px 0;line-height:1.15}
.tape-photo figcaption .cap-x{color:var(--naranja)}
.tilt-l{transform:rotate(-3deg)}
.tilt-r{transform:rotate(2.6deg)}
/* Foto decorativa flotante y draggable: se oculta en pantallas chicas */
.deco-photo{position:absolute;z-index:5;width:185px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.deco-photo img{pointer-events:none;-webkit-user-drag:none;user-drag:none}
.deco-photo.swapping{opacity:0}
@media(max-width:1040px){.deco-photo{display:none}}

/* ===================== Footer ===================== */
.footer{background:var(--negro);color:var(--hueso);padding:56px 0 32px}
.footer__grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer .brand{color:var(--hueso)}
.footer__note{color:rgba(244,241,233,.62);font-size:.92rem;max-width:30ch;margin-top:10px}
.footer__links{display:flex;flex-direction:column;gap:11px}
.footer__title{color:var(--hueso);font-weight:800;margin-bottom:4px;display:block}
.footer__links a{color:rgba(244,241,233,.8);display:flex;align-items:center;gap:9px}
.footer__links a:hover{color:var(--amarillo)}
.footer__links .fic{width:15px;height:15px;stroke-width:1.6;opacity:.55;flex:0 0 auto}
.footer__links a:hover .fic{opacity:1}
.footer__essence{color:rgba(244,241,233,.75)}
.socials{display:flex;gap:14px;margin-top:14px}
/* Footer simplificado (landing): sin mapa del sitio, redes a la derecha
   en vez de debajo de la nota — ver landing/index.html */
.footer__grid--simple{align-items:center}
.socials--footer-right{margin-top:0}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(244,241,233,.25);
  display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s}
.socials a:hover{background:var(--naranja);border-color:var(--naranja)}
.socials svg{width:18px;height:18px;stroke:var(--hueso);fill:none;stroke-width:2}
.footer__bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(244,241,233,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:rgba(244,241,233,.55);font-size:.86rem}

/* ===================== Reveal on scroll ===================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ===================== Barra de progreso de lectura ===================== */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:5px;z-index:300;
  background:rgba(20,20,18,.06);pointer-events:none}
.scroll-progress__bar{height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:var(--naranja)}
/* Con el detalle de caso abierto, la línea de progreso de LECTURA de la
   página queda detrás del blur del stage — si no, de un vistazo parece la
   barra de avance del propio pop-up (que ya tiene la suya, abajo). */
body:has(#stage.open) .scroll-progress{z-index:150}

/* ===================== Distorsión sutil por velocidad de scroll =====================
   Se aplica a las secciones de <main> vía JS, salvo .hero (se excluye ahí
   para que no se sienta como un glitch en la primera pantalla de la home). */
main > *{will-change:transform}

/* ===================== Responsive ===================== */
@media (max-width:900px){
  .cards,.cases,.values{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr;gap:28px}
  .nav__links{display:none}
  .burger{display:block}
  .lang.desktop{display:none}
}
@media (max-width:600px){
  .section{padding:64px 0}
  .cards,.cases,.values{grid-template-columns:1fr}
  /* Sin bolita arriba a la que "colgarse" en mobile (el timeline se oculta),
     así que el tallo pasa a ser un acento más grande arriba a la izquierda. */
  .values{gap:44px;margin-top:44px}
  .value{padding:16px 6px 0}
  .value__stem{left:0;top:0;transform:none;width:52px;height:5px}
  .idea,.cta-final,.quote{padding:40px 24px}
  .hero{padding:60px 0 40px}
  .modes{flex-direction:column}
  .modes .mode{max-width:none;width:100%}
  .quote,.quote--visual{margin-left:0;margin-right:0}
}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .cross-chip,.cross-chip .x{animation:none}
  main > *{transform:none !important}
}

/* ============================================================
   Detalle de caso — tarjeta flotante "glass" (#stage/#glasscard/#reel
   en work.html y landing/index.html; ver js/projects.js reelHTML()).
   Reemplaza al viejo modal vertical: acá el detalle entero se recorre
   scrolleando/arrastrando de costado, con la tarjeta desplazándose de
   derecha a izquierda a medida que se avanza.
   ============================================================ */
/* ---------- grilla compacta de Trabajo (reusa .case + modificador) ---------- */
.hcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.case.compact .case__img{aspect-ratio:16/11}
.case.compact .case__body{padding:16px 18px 20px}
.case.compact .case__headline{font-size:1.05rem;min-height:2.1em}
.case.compact .case__cross{font-size:.84rem;margin-top:.3em;min-height:2.3em}
.case.compact .modal__meta{font-size:.74rem}
@media(max-width:900px){.hcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hcards{grid-template-columns:1fr}}

.stage3{position:fixed;inset:0;z-index:200;overflow:hidden;background:transparent;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .4s ease;pointer-events:none;
  overscroll-behavior:none;touch-action:none}
.stage3.open{opacity:1;visibility:visible;pointer-events:auto}

.glasscard{position:absolute;top:10vh;left:0;height:80vh;overflow:hidden;touch-action:none;
  background:linear-gradient(180deg,rgba(244,241,233,.95),rgba(244,241,233,.91));
  backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 40px 90px rgba(11,15,14,.22),0 4px 18px rgba(11,15,14,.12);
  color:var(--carbon);font-family:var(--sans,"Bricolage Grotesque",sans-serif)}
@media(max-width:768px){
  .glasscard{top:0;height:100dvh;border-left:none;border-right:none}
}
/* Pantallas muy grandes (monitores 4K/32"+): 80vh de una pantalla altísima
   estira la tarjeta mucho más de lo pensado. Se limita a un alto "normal" y
   se centra verticalmente en vez de anclarla a un 10vh fijo (que en estas
   pantallas deja mucho más aire abajo que arriba). */
@media(min-width:1600px){
  /* Ojo: NO usar transform acá para centrar — projects.js pisa
     .glasscard.style.transform con un translateX() propio (el drag
     horizontal del carrusel de casos), así que cualquier translateY que
     pongamos por CSS se pierde apenas abre. Centrado con top + cálculo fijo
     en base al mismo max-height de esta regla (820px de alto → mitad 410px). */
  .glasscard{top:calc(50% - 410px);max-height:820px}
}

.reel{display:flex;height:100%;width:max-content}

/* -- portada: thumbnail arriba, info abajo -- */
.panel--cover{width:min(58vw,760px);height:100%;display:flex;flex-direction:column}
.cover__img{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;background:rgba(11,15,14,.08)}
.cover__img img{width:100%;height:100%;object-fit:cover;display:block}
.cover__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,241,233,0) 60%,rgba(244,241,233,.7) 100%)}
.cover__img .case__tags--overlay{position:absolute;left:16px;right:16px;bottom:12px;z-index:2;display:flex;gap:6px;flex-wrap:wrap;margin:0}
.cover__info{flex:0 0 auto;max-height:64%;overflow-y:auto;overscroll-behavior:contain;padding:24px clamp(24px,3vw,44px) 30px}
.cover__info .k{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.7em;display:block}
.cover__info h2{font-size:1.9rem;font-weight:800;line-height:1.08;letter-spacing:-.01em;margin:0 0 .15em;color:var(--negro)}
.cover__info p{font-size:1rem;color:var(--carbon);max-width:56ch;line-height:1.5;margin:0 0 .6em}
.cover__info .meta{font-size:.92rem;color:var(--muted)}
@media(max-width:768px){.cover__info h2{font-size:1.5rem}}

/* -- sección (Desafío/Proceso/Resultados): header horizontal + línea a
      todo el ancho del contenido + fila de bloques -- */
.hsection{height:100%;width:max-content;display:flex;flex-direction:column}
.hsection__head{flex:0 0 auto;padding:22px clamp(24px,3vw,40px) 0;display:flex;align-items:baseline;gap:10px}
.hsection__head .lbl{font-size:1.3rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;color:var(--negro)}
.hsection__bar{flex:0 0 auto;width:100%;height:4px;margin:10px 0 0;border-radius:2px}
/* Regla de la marca: los acentos son relleno (la línea), nunca color de
   texto — el título se queda en negro sea cual sea la sección. La sección
   de testimonio (s-quote) no tiene color asignado: su línea es carbón. */
.hsection.s-desafio .hsection__bar{background:var(--naranja)}
.hsection.s-proceso .hsection__bar{background:var(--amarillo)}
.hsection.s-resultados .hsection__bar{background:var(--verde)}
.hsection.s-quote .hsection__bar{background:var(--carbon)}
.hsection__row{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;gap:0}

/* Separador entre "capítulos" (portada / cada sección / testimonio / cta):
   una línea vertical fina con aire de los dos lados, para que se note
   claramente dónde termina uno y arranca el siguiente. */
.chapter-seam{flex:0 0 auto;align-self:center;height:44%;width:1px;
  background:rgba(11,15,14,.16);margin:0 clamp(20px,2.6vw,38px)}

/* Si el contenido de un bloque (ej. un testimonio largo) no entra en el
   alto de la tarjeta, scrollea internamente en vez de desbordar/cortarse
   contra el overflow:hidden de la tarjeta. El scroll nativo por touch NO
   sirve acá (la tarjeta tiene touch-action:none para que el drag propio
   funcione siempre — un hijo no puede "reactivarlo"), así que el alto
   interno lo maneja JS a mano (ver measure()/wheel/drag en projects.js). */
.hstop{height:100%;flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;
  overflow-y:auto;overscroll-behavior:contain}
.hstop::-webkit-scrollbar{width:6px}
.hstop::-webkit-scrollbar-thumb{background:rgba(11,15,14,.32);border-radius:3px}
.hstop--text{width:min(40vw,560px);padding-left:clamp(24px,3vw,40px);padding-right:clamp(24px,3vw,40px)}
.hstop--text p{font-size:1.05rem;line-height:1.6;font-weight:400;color:var(--carbon);margin:0}
/* 2px menos en mobile (16.8px -> 14.8px) para asegurar que el texto entre
   sin desbordar en la columna angosta del detalle de caso. */
@media(max-width:768px){.hstop--text p{font-size:.925rem}}
/* Cada Enter que carga el admin (un <br> suelto) se separa en su propio
   <p> al armar el HTML (ver sectionHTML en js/projects.js) — el espacio
   entre "párrafos" sale de acá, entre hermanos. Antes se intentaba con
   margin en el propio <br> forzado a display:block, pero un bloque en
   medio de contenido inline no aplica el margen parejo entre navegadores. */
.hstop--text p + p{margin-top:1.3em}
.hstop--text b{font-weight:800;color:var(--negro)}
.hstop--text u{text-decoration-color:var(--naranja);text-underline-offset:.16em}

.hstop--stat{width:min(28vw,360px);padding-left:clamp(20px,2.6vw,34px);padding-right:clamp(20px,2.6vw,34px)}
.hstop--stat .v{font-size:clamp(2.8rem,6vw,5rem);font-weight:800;line-height:.92;letter-spacing:-.03em;color:var(--naranja)}
.hstop--stat .bar{width:40px;height:4px;background:var(--naranja);border-radius:2px;margin:18px 0}
.hstop--stat .l{font-size:1.15rem;color:var(--negro);max-width:24ch;line-height:1.4}
@media(max-width:768px){.hstop--stat .v{font-size:3.4rem}}

/* Media: chica, como aparece hoy en el pop-up real. La "caja" tiene una
   altura fija (--mh, editable por scale); en línea, los ítems van a esa
   altura completa uno al lado del otro y la caja se estira a la derecha
   para que entren con gap; apilados, esa misma altura se REPARTE entre
   los N ítems (nunca la superan sumados). */
.hstop--media{padding:0 clamp(24px,3vw,40px)}
.hmedia-grid{--mh:min(52vh,380px);display:flex;gap:10px;height:var(--mh)}
.hmedia-grid img{height:100%;width:auto;object-fit:cover;border-radius:6px;
  border:none;background:none;display:block;pointer-events:none}
/* Video: mismo reproductor custom (play/pausa, mute, barra naranja) de
   siempre — .case-video/.case-video__bar ya están definidos más arriba en
   este archivo; acá solo se ajusta el tamaño del wrapper para que respete
   el sistema de esta grilla (alto fijo, ancho por su propia relación de
   aspecto) en vez del aspect-ratio:4/3 que usa en el flujo normal del
   sitio (ver .case-video base). */
.hmedia-grid .case-video{position:relative;height:100%;width:fit-content;aspect-ratio:auto;
  border-radius:6px;overflow:hidden;border:none}
.hmedia-grid .case-video video{height:100%;width:auto;display:block;cursor:pointer}
/* Apilados: cada ítem a su relación de aspecto real (nada de bandas
   negras a los costados) — el ancho sale solo de esa relación, y la
   columna entera se angosta sola si los 3 ítems son angostos. */
.hmedia-grid.stack{flex-direction:column;gap:8px;align-items:center;width:max-content}
.hmedia-grid.stack img{width:auto;max-width:min(50vw,600px);
  flex:1 1 0;min-height:0;object-fit:contain;background:none}
.hmedia-grid.stack .case-video{width:100%;max-width:min(50vw,600px);height:auto;flex:1 1 0;min-height:0}
.hmedia-grid.stack .case-video video{width:100%;height:100%;object-fit:contain}
@media(max-width:768px){
  /* En mobile el límite real es el ANCHO, no el alto: un video panorámico
     medido por --mh (alto) se iba muy ancho y se salía de la pantalla. Acá
     se da vuelta la lógica — se apilan en una sola columna al ancho de la
     caja (como ya hace .case-media en el sitio real por debajo de 600px) y
     cada ítem entra por ancho, con el alto que le toque. */
  .hmedia-grid{--mh:auto;flex-direction:column;width:100%;height:auto}
  .hmedia-grid img{width:100%;height:auto;max-height:34vh;object-fit:cover}
  .hmedia-grid .case-video{width:100%;height:auto;max-height:34vh}
  .hmedia-grid .case-video video{width:100%;height:auto;max-height:34vh;object-fit:cover}
  .hmedia-grid.stack{width:100%}
  .hmedia-grid.stack img{width:100%;max-width:100%;max-height:34vh;flex:none}
  .hmedia-grid.stack .case-video{width:100%;max-width:100%;height:auto;max-height:34vh;flex:none}
  .hmedia-grid.stack .case-video video{width:100%;height:auto;max-height:34vh;object-fit:cover}
}

/* -- testimonio: mismo header que las secciones (título carbón + línea),
      la línea acá es carbón porque no tiene color de sección asignado -- */
.hstop--quote{width:min(46vw,640px);padding-left:clamp(24px,3vw,44px);padding-right:clamp(24px,3vw,44px)}
.hstop--quote blockquote{margin:0 0 1.2em;font-size:1.12rem;font-weight:400;line-height:1.5;color:var(--carbon)}
@media(max-width:768px){.hstop--quote blockquote{font-size:1rem}}
.hstop--quote cite{font-style:normal;font-size:.88rem;color:var(--muted)}

/* -- cta final: mismo fondo con textura + gradiente que .cta-final en el
      sitio real, a pantalla completa (sin cap después, ver reel) -- */
.panel--cta{width:min(50vw,660px);height:100%;display:flex;flex-direction:column;justify-content:center;
  overflow-y:auto;overscroll-behavior:contain;padding:0 clamp(28px,3.4vw,48px);
  background-color:var(--negro);
  background-image:url("../images/brand/patterns/crosses.png"), url("../images/brand/gradients/brasa.png");
  background-repeat:repeat, no-repeat;
  background-position:0 0, center;
  background-size:130px, cover;
  color:var(--hueso)}
.panel--cta p{margin:0 0 1.3em;font-size:1.15rem;line-height:1.55;color:var(--hueso)}

/* los anchos en vw de arriba están pensados para desktop (donde vw es
   grande); en mobile el viewport es angosto y esos mismos porcentajes
   dejan columnas de texto ilegibles, así que se pisan acá */
@media(max-width:768px){
  /* Cada card ocupa la pantalla entera (sin margen a los costados, ver
     marginL/marginR en measure()) — antes quedaba un aire a cada lado. */
  .panel--cover{width:100vw}
  /* En desktop la imagen se lleva lo que sobra después del texto (flex:1)
     y queda razonable porque el texto es angosto en relación al alto de
     la caja. En mobile el texto ocupa proporcionalmente más y la imagen
     se achicaba a cualquier cosa — cualquier foto quedaba recortada rara.
     Acá se fuerza ~mitad y mitad, pareja e independiente del largo del
     texto (que scrollea si no entra en su mitad). */
  .cover__img{flex:0 0 50%}
  .cover__info{flex:1 1 auto;max-height:none}
  .hstop--text{width:100vw}
  .hstop--stat{width:100vw}
  .hstop--quote{width:100vw}
  .panel--cta{width:100vw}
  .hstop--media{width:100vw}
}

/* ---------- controles (siempre legibles, sean cual sea el fondo) ---------- */
/* "Mapa" centrado abajo de la tarjeta: barra segmentada CHICA (un
   segmento por capítulo — portada / desafío / proceso / resultados /
   testimonio / cta, cada uno se rellena con el avance DENTRO de ese
   capítulo) + el contador de posición, los dos en un mismo chip, con la
   tipografía del sitio. */
.stage__map{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:230;
  display:flex;align-items:center;gap:10px;
  background:var(--negro);color:var(--hueso);padding:.5em .8em;border-radius:99px;
  box-shadow:0 6px 18px rgba(0,0,0,.28);font-family:var(--sans,"Bricolage Grotesque",sans-serif)}
.stage__map .segs{display:flex;gap:4px;width:104px}
.seg{flex:1;height:3px;border-radius:2px;background:rgba(244,241,233,.28);overflow:hidden;position:relative}
.seg__fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:2px;background:var(--hueso)}
.seg__fill.acc-naranja{background:var(--naranja)}
.seg__fill.acc-amarillo{background:var(--amarillo)}
.seg__fill.acc-verde{background:var(--verde)}
.stage__map .idx{font-size:.74rem;font-weight:600;white-space:nowrap}
.stage__map .idx b{font-weight:800}
.stage__chip{position:fixed;z-index:220;display:flex;align-items:center;justify-content:center;
  background:var(--negro);color:var(--hueso);border-radius:50%;width:40px;height:40px;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.28);transition:opacity .2s ease,transform .15s ease}
.stage__chip:hover{transform:scale(1.06)}
.stage__chip[disabled]{opacity:.25;pointer-events:none}
.stage__chip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}
.stage__close{top:18px;left:22px}
/* Sutil a propósito — un extra para quien lo busque, no un CTA: menos
   opaco en reposo, se aclara al pasar el mouse. */
.stage__share{top:18px;left:74px;width:34px;height:34px;opacity:.5}
.stage__share:hover{opacity:1}
.stage__share .ic-check{display:none}
.stage__share.is-copied .ic-link{display:none}
.stage__share.is-copied .ic-check{display:block}
.stage__share.is-copied{opacity:1;background:var(--verde)}
.stage__nav{top:18px;display:flex;gap:10px}
.stage__nav.prev{right:74px}
.stage__nav.next{right:22px}

/* Guía de scroll: aparece al abrir el caso, apunta a que hay que avanzar.
   Se apaga sola apenas el usuario mueve la tarjeta (ver JS: clase
   .scrolled en #stage) y no vuelve a prenderse en ese mismo caso. */
.stage__hint{position:fixed;top:50%;right:26px;transform:translateY(-50%);z-index:210;
  width:52px;height:52px;border-radius:50%;background:var(--carbon);color:#fff;
  box-shadow:0 6px 20px rgba(11,15,14,.4);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  opacity:0;transition:opacity .5s ease;animation:stageHintPulse 1.3s ease-in-out infinite}
/* Sin stroke/fill explícitos el trazo del ícono no se pintaba (quedaba
   invisible) — .stage__chip ya lo tenía, esta clase no lo heredaba. */
.stage__hint svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.8;margin-left:2px}
.stage3.open .stage__hint{opacity:1}
.stage3.open.scrolled .stage__hint{opacity:0}
@keyframes stageHintPulse{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(8px)}}

/* Cierre discreto al llegar al final del caso (después del CTA) — aparece
   solo ahí, en el mismo lugar y con el mismo tratamiento que la flechita de
   "hay que scrollear" (mismo círculo naranja + pulso) para que se lea como
   parte del mismo lenguaje de "esto es interactivo", en vez de un botón
   gris que se perdía contra el fondo. Solo desktop — en mobile no hace
   falta, ya tiene su cierre de siempre. */
.stage__endclose{position:fixed;top:50%;right:26px;transform:translateY(-50%);z-index:210;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:var(--carbon);color:#fff;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease}
.stage__endclose svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.6}
.stage3.at-end .stage__endclose{opacity:1;pointer-events:auto;animation:stageHintPulse 1.3s ease-in-out infinite}
.stage__endclose:hover{animation-play-state:paused}

/* ---------- mobile: todo el "mando" abajo, no tapa los títulos ---------- */
/* mismo corte que .glasscard/isMobile() en JS, para que todo cambie junto.
   Arriba (top:18px) cerrar/flechas quedaban justo sobre el título de cada
   sección — acá se bajan al mismo renglón que el mapa: cerrar a la
   izquierda, flechas a la derecha, mapa centrado en el medio. */
@media(max-width:768px){
  .stage__map{bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:8px;padding:.45em .7em}
  .stage__map .segs{width:76px}
  .stage__map .idx{font-size:.68rem}
  .stage__chip{width:36px;height:36px}
  .stage__chip svg{width:15px;height:15px}
  .stage__close{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:10px}
  .stage__nav{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:8px}
  .stage__nav.prev{right:56px}
  .stage__nav.next{right:10px}
  .stage__hint{right:12px;width:44px;height:44px}
  .stage__hint svg{width:21px;height:21px}
  /* En mobile no hace falta — ya tenés el cierre de siempre a mano. */
  .stage__endclose{display:none}

  /* La franja de abajo (cerrar/flechas/mapa) queda flotando SOBRE el
     contenido, no fuera de él — si el texto llega hasta el borde real de
     la tarjeta, las últimas líneas quedan tapadas y sin forma de
     scrollear más allá para leerlas. Se le suma este colchón al final del
     scroll interno de cada bloque para que eso nunca pase. Mismo criterio
     arriba: un poco de aire antes de la primera línea, para que el título
     de la sección nunca quede pegado al texto cuando el bloque scrollea. */
  .hstop{
    padding-top: 18px;
    padding-bottom: calc(78px + env(safe-area-inset-bottom,0px));
  }
  .cover__info, .panel--cta{
    padding-bottom: calc(78px + env(safe-area-inset-bottom,0px));
  }
}

/* ===================== Contacto — 4 cajas grandes =====================
   Reemplaza el mail gigante + fila de pills chicas: cada canal es una caja
   grande con ícono, que en desktop crece y revela un renglón extra al
   hover; en mobile (sin hover real) el renglón queda siempre visible y la
   caja pasa a fila (ícono + texto). El renglón extra reserva su espacio
   siempre (solo cambia opacity, nunca alto) para que la caja NUNCA cambie
   de tamaño ni empuje al resto de la grilla al hacer hover — antes usaba
   max-height y eso reflowaba el contenedor entero. Mismas cajas se usan acá
   y en el CTA final de cada caso (ver contactTilesHTML en js/projects.js). */
/* ===================== Contacto (sin form) =====================
   Restaurada — se había borrado por error en una limpieza de CSS
   anterior (el audit automático no la encontró en uso, pero contact.html
   sí la usa como wrapper de todo el bloque de "Escribime a"). */
.contact-hero{background-color:var(--negro);
  background-image:url("../images/brand/patterns/dots.png"), url("../images/brand/gradients/brasa.png");
  background-repeat:repeat, no-repeat;
  background-position:0 0, center;
  background-size:130px, cover;
  color:var(--hueso);border-radius:var(--radius);padding:72px 40px;position:relative;overflow:hidden}
.contact-hero__label{font-weight:800;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amarillo);margin:0}
.contact-hero__mail{display:inline-block;font-size:clamp(1.8rem,5vw,3.2rem);font-weight:800;color:var(--hueso);
  letter-spacing:-.02em;margin:.1em 0 .3em;position:relative;z-index:1}
.contact-hero__mail:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.contact-hero__note{color:rgba(244,241,233,.9);max-width:44ch;margin:0 0 1.6em;position:relative;z-index:1}
@media(max-width:600px){.contact-hero{padding:48px 24px}}

.contact-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;position:relative;z-index:1;margin-top:.4em}
@media(min-width:900px){.contact-tiles{grid-template-columns:repeat(4,1fr)}}
/* En el CTA del caso el panel es más angosto que la sección de Hablemos y
   su ancho varía con el viewport (min(50vw,660px)) — en vez de fijar una
   cantidad de columnas, auto-fit acomoda solas: 4 en fila apenas entran
   (desktop), menos si el panel es angosto (tablet). En mobile (≤600px)
   gana la regla general de más abajo (misma especificidad + fuente
   posterior no alcanza, así que ahí se apaga esta y se cae a la fila). */
@media(min-width:601px){
  .panel--cta .contact-tiles{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
  .panel--cta .ctile{min-height:120px;padding:16px 10px;gap:8px}
  .panel--cta .ctile__icon{width:36px;height:36px}
  .panel--cta .ctile__icon svg{width:17px;height:17px}
  .panel--cta .ctile__label{font-size:.92rem}
  .panel--cta .ctile__sub{font-size:.72rem}
}
.ctile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:150px;padding:26px 18px;background:rgba(244,241,233,.06);border:1px solid rgba(244,241,233,.18);
  border-radius:var(--radius);color:var(--hueso);text-align:center;
  transition:transform .22s ease,background .22s ease,border-color .22s ease}
.ctile__icon{width:46px;height:46px;flex:none;border-radius:50%;background:rgba(244,241,233,.12);
  display:flex;align-items:center;justify-content:center;transition:background .22s ease,transform .22s ease}
.ctile__icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.ctile__text{display:flex;flex-direction:column;gap:.15em}
.ctile__label{font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.ctile__sub{font-size:.82rem;color:rgba(244,241,233,.65);opacity:0;transition:opacity .22s ease}
.ctile:hover{transform:translateY(-4px) scale(1.04);background:rgba(244,241,233,.1)}
.ctile:hover .ctile__sub{opacity:1}
.ctile[data-accent="naranja"]:hover{border-color:var(--naranja)}
.ctile[data-accent="naranja"]:hover .ctile__icon{background:var(--naranja);transform:scale(1.1)}
.ctile[data-accent="verde"]:hover{border-color:var(--verde)}
.ctile[data-accent="verde"]:hover .ctile__icon{background:var(--verde);transform:scale(1.1)}
.ctile[data-accent="amarillo"]:hover{border-color:var(--amarillo)}
.ctile[data-accent="amarillo"]:hover .ctile__icon{background:var(--amarillo);color:var(--negro);transform:scale(1.1)}
@media(max-width:600px){
  .contact-tiles{grid-template-columns:1fr;gap:10px}
  .ctile{flex-direction:row;justify-content:flex-start;text-align:left;padding:16px 18px;min-height:0}
  .ctile__text{align-items:flex-start}
  .ctile__sub{opacity:1}
  .ctile:hover{transform:none}
}

/* =====================================================================
   cruce.lab — misma casa, una habitación más oscura.
   Todo acá reusa tokens/componentes de arriba (.wrap, .section, .eyebrow,
   .lead, .btn, .reveal, .filete, .nav, .footer) — solo lo puntual que no
   existía (veil de entrada, carrusel de proyecto) es nuevo.
   ===================================================================== */
body.lab{background:var(--negro);color:var(--hueso)}
body.lab h1,body.lab h2,body.lab h3,body.lab h4{color:var(--hueso)}
body.lab .eyebrow{color:var(--hueso)}
body.lab .lead{color:rgba(244,241,233,.75)}
body.lab p{color:rgba(244,241,233,.82)}
body.lab .nav{background:rgba(26,33,31,.86);border-bottom-color:rgba(244,241,233,.14)}
body.lab .brand{color:var(--hueso)}
body.lab .lang{color:rgba(244,241,233,.5)}
body.lab .lang button[data-lang-btn]{color:rgba(244,241,233,.5)}
body.lab .lang button[data-lang-btn].active{color:var(--hueso)}
body.lab .btn--ghost{border-color:var(--hueso);color:var(--hueso)}
body.lab .btn--ghost:hover{background:var(--hueso);color:var(--negro)}
/* La página entera respira menos que el resto del sitio, a propósito —
   cruce.lab es más compacto. */
body.lab .section{padding:64px 0}
body.lab .nav__links a{color:rgba(244,241,233,.7)}
body.lab .nav__links a.active,body.lab .nav__links a:hover{color:var(--hueso)}
body.lab .burger{color:var(--hueso)}
body.lab .mobile{background:var(--negro)}
body.lab .mobile a{color:var(--hueso)}
body.lab .mobile .close{color:var(--hueso)}
/* ".lab" (con el punto) siempre en Naranja Brasa — mismo criterio que el
   punto del isologo de cruce., que también es naranja. */
.lab-word{color:var(--naranja)}

/* Veil de entrada: cubre todo en negro carbón y se disuelve una sola vez
   al cargar (ver <script> inline en lab.html). pointer-events:none desde
   el arranque — nunca bloquea clicks ni navegación, es puramente visual.
   position:fixed → cero layout shift. */
.lab-veil{position:fixed;inset:0;z-index:9999;background:var(--negro);opacity:1;
  pointer-events:none;transition:opacity .6s ease}
.lab-veil.is-out{opacity:0}
/* El <main> entra con un fade + desplazamiento vertical mínimo, en el
   mismo momento que se disuelve el veil — un solo movimiento, no una
   cadena de efectos por elemento. */
body.lab main{opacity:0;transform:translateY(10px);transition:opacity .7s ease .05s,transform .7s ease .05s}
body.lab.lab-ready main{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .lab-veil{transition:none}
  body.lab main{opacity:1;transform:none;transition:none}
}

/* ---- 01 · Hero ---- */
.lab-hero{padding:140px 0 72px;position:relative;overflow:hidden;
  background-image:url("../images/brand/patterns/crosses.png"), url("../images/brand/gradients/anochecer.png");
  background-repeat:repeat, no-repeat;
  background-position:0 0, center;
  background-size:130px, cover}
.lab-hero .filete{margin-bottom:26px}
.lab-hero__title{font-size:clamp(2.6rem,7vw,5rem);letter-spacing:-.03em;margin-bottom:.3em}
.lab-hero__tagline{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:800;color:var(--hueso);max-width:38ch;margin-bottom:.5em}

/* ---- 02 · Intro ---- */
.lab-intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lab-intro__text{max-width:520px}
.lab-intro__subtitle{font-size:1.05rem;font-weight:800;color:rgba(244,241,233,.6);margin-bottom:1.4em}

/* Ilustración "scribble" — marcas sueltas del propio lenguaje de marca
   (cruces, puntos, signos), dispersas como anotaciones de cuaderno. En
   reposo no hacen nada; al pasar el mouse cada una "scramblea" un
   instante y cae en otra al azar (ver <script> en lab.html). */
.lab-scribble{position:relative;aspect-ratio:1/1;min-height:340px;width:100%;cursor:default}
/* Cada marca flota despacio en el lugar, como una partícula suelta en el
   aire — la rotación fija de cada una (--r) se mantiene durante toda la
   animación, solo se anima translateY. Duración/delay distintos por
   marca para que no floten todas juntas ni en fase. */
.lab-scribble__mark{position:absolute;font-weight:800;line-height:1;font-family:var(--sans);
  user-select:none;transition:color .2s ease;
  transform:rotate(var(--r,0deg)) translateY(0);
  animation:labFloat 5s ease-in-out infinite}
@keyframes labFloat{
  0%,100%{transform:rotate(var(--r,0deg)) translateY(0)}
  50%{transform:rotate(var(--r,0deg)) translateY(-14px)}
}
.lab-scribble .m1{top:4%;left:8%;font-size:4.6rem;color:var(--naranja);--r:-8deg;animation-duration:5.4s;animation-delay:-.2s}
.lab-scribble .m2{top:12%;left:62%;font-size:2.3rem;color:var(--hueso);--r:12deg;animation-duration:4.6s;animation-delay:-1.8s}
.lab-scribble .m3{top:38%;left:2%;font-size:2.8rem;color:var(--amarillo);--r:4deg;animation-duration:6.1s;animation-delay:-3.4s}
.lab-scribble .m4{top:50%;left:52%;font-size:5.6rem;color:var(--verde);--r:-5deg;animation-duration:5.8s;animation-delay:-2.6s}
.lab-scribble .m5{top:6%;left:38%;font-size:1.7rem;color:var(--cemento);--r:20deg;animation-duration:4.9s;animation-delay:-.8s}
.lab-scribble .m6{top:68%;left:18%;font-size:2.1rem;color:var(--naranja);--r:-15deg;animation-duration:5.6s;animation-delay:-4.1s}
.lab-scribble .m7{top:74%;left:68%;font-size:3.2rem;color:var(--hueso);--r:8deg;animation-duration:6.4s;animation-delay:-1.3s}
.lab-scribble .m8{top:28%;left:86%;font-size:1.9rem;color:var(--amarillo);--r:-10deg;animation-duration:5.1s;animation-delay:-3.9s}
.lab-scribble .m9{top:88%;left:42%;font-size:2.4rem;color:var(--verde);--r:6deg;animation-duration:4.4s;animation-delay:-2.1s}
@media(prefers-reduced-motion:reduce){.lab-scribble__mark{animation:none}}
@media(max-width:860px){
  .lab-intro__grid{grid-template-columns:1fr;gap:28px}
  .lab-intro__text{max-width:none}
  .lab-scribble{min-height:240px}
}

/* ---- 03 · Proyectos ---- */
.lab-projects__title{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:8px}

/* Cada proyecto es un grid con 4 áreas nombradas — en desktop, título +
   carrusel a la izquierda, todo el texto a la derecha; en mobile el
   orden cambia (ver media query) sin tocar el HTML. Agregar un proyecto
   nuevo no requiere tocar nada de esto. */
.lab-project{display:grid;grid-template-columns:400px 1fr;column-gap:24px;row-gap:14px;
  align-items:start;margin-top:36px;
  grid-template-areas:"head head" "media copy" "media cta"}
.lab-project + .lab-project{margin-top:56px;padding-top:56px;border-top:1px solid rgba(244,241,233,.14)}
/* Los hijos de un grid tienen min-width:auto implícito — sin esto, el
   carrusel (que scrollea internamente) empuja el ancho de toda la fila
   en vez de recortarse a la columna. */
.lab-project__copy,.lab-carousel{min-width:0}
/* Compacto a propósito: el carrusel es una referencia visual, no la
   pieza central del bloque. position:relative para las flechitas. */
.lab-carousel{grid-area:media;width:100%;position:relative}

.lab-project__head{grid-area:head;display:flex;align-items:center;gap:14px}
/* Caja de tamaño fijo — lo que cambia adentro (el glifo) nunca corre el
   título ni nada alrededor, sin importar qué tan "grande" se vea cada
   símbolo. line-height:1 + flex centrado: el glifo queda centrado de
   verdad, no solo la caja de línea del texto. */
.lab-project__icon{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;line-height:1;font-weight:800;color:var(--naranja)}
.lab-project__title{font-size:clamp(2rem,4.6vw,2.8rem);margin:0}
.lab-project__copy{grid-area:copy}
.lab-project__tagline{font-weight:800;font-size:1.1rem;color:var(--amarillo);margin-bottom:.8em}
/* Un <br> del admin = un <p> acá (ver bodyHTML en js/lab.js) — mismo
   criterio que .hstop--text en los casos de trabajo: el espacio entre
   "párrafos" es un margin confiable entre hermanos, no depende de
   cuántos <br> hayan quedado guardados. */
.lab-project__body p{color:rgba(244,241,233,.82);line-height:1.55;font-size:1rem;margin:0}
.lab-project__body p + p{margin-top:1.1em}
.lab-project__body b{color:var(--hueso)}
/* justify-self:start — un grid item por default estira al ancho de su
   celda; sin esto el botón ocupaba todo el ancho de la columna. */
.lab-project__cta{grid-area:cta;margin-top:.6em;justify-self:start}
.lab-project__cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}

.lab-carousel__track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:0}
.lab-carousel__track::-webkit-scrollbar{display:none}
.lab-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:32px;height:32px;border-radius:50%;border:1px solid rgba(244,241,233,.3);
  background:rgba(26,33,31,.6);color:var(--hueso);cursor:pointer;font-size:1rem;
  display:flex;align-items:center;justify-content:center;padding:0}
.lab-carousel__arrow:hover{background:var(--naranja);border-color:var(--naranja);color:var(--negro)}
.lab-carousel__arrow.prev{left:8px}
.lab-carousel__arrow.next{right:8px}
.lab-shot{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.lab-shot:nth-child(1){background:linear-gradient(135deg,var(--naranja),var(--amarillo))}
.lab-shot:nth-child(2){background:linear-gradient(135deg,var(--verde),var(--negro))}
.lab-shot:nth-child(3){background:linear-gradient(135deg,var(--amarillo),var(--naranja))}
.lab-shot:nth-child(4){background:linear-gradient(135deg,var(--cemento),var(--verde))}
.lab-shot:nth-child(5){background:linear-gradient(135deg,var(--negro),var(--naranja))}
.lab-shot img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.lab-shot__label{position:relative;z-index:1;font-weight:800;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.08em;color:rgba(26,33,31,.55);text-align:center;padding:0 20px}
.lab-carousel__dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.lab-carousel__dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(244,241,233,.28);
  cursor:pointer;padding:0;transition:background .15s ease,transform .15s ease}
.lab-carousel__dots button.active{background:var(--naranja);transform:scale(1.25)}
@media(max-width:860px){
  .lab-project{grid-template-columns:1fr;row-gap:16px;
    grid-template-areas:"head" "media" "copy" "cta"}
  .lab-project + .lab-project{margin-top:40px;padding-top:40px}
  .lab-carousel{max-width:420px}
  .lab-carousel__arrow{display:none}
}

/* ---- 04 · Lo que sigue ---- */
.lab-next .wrap{max-width:640px}

/* ---- 05 · Cierre ----
   Sección clara, invertida respecto al resto de la página — mismo
   criterio que el CTA oscuro del sitio principal (una pausa que se
   despega del resto), pero al revés porque acá la base ya es oscura.
   Queda como remate, no como "una sección más" del scroll. */
.lab-close{background-color:var(--hueso);background-image:url("../images/brand/patterns/dots.png");
  background-repeat:repeat;background-size:130px}
body.lab .lab-close p,
body.lab .lab-close .eyebrow{color:var(--negro)}
.lab-close__line{font-size:1.2rem;font-weight:800;margin-bottom:.2em}
.lab-close__wordmark{font-family:var(--sans);font-weight:800;font-size:clamp(2.4rem,7vw,4.4rem);
  letter-spacing:-.03em;margin:.5em 0 .15em}