/* ═══ HUR Groupe · sistema — papel recortado, Saul Bass ═══
   El corte es la forma. Paleta y tipografía CERRADAS: no se inventan. */
/* Las caras viven en /fuentes/hur.css, enlazado antes que esta hoja. */

:root{
  --campo:#0B0B0C; --campo-2:#141416;
  --tinta:#E8E4DC; --tinta-2:#A3A099; --ambar:#F25C1F;
  --display:clamp(2.5rem,6.4vw,6rem);
  --sub:clamp(1.35rem,2.6vw,2.2rem);
  --cuerpo:clamp(1rem,1.1vw,1.12rem);
  --pie:clamp(.75rem,.82vw,.86rem);   /* 12px de suelo: el mínimo de este proyecto */
  --margen:clamp(1.5rem,5vw,6rem);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--campo)}
body{
  margin:0;background:transparent;color:var(--tinta);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;font-weight:400;
  font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}

/* ───── CABECERA: pertenece al documento, y su nav lleva a PÁGINAS reales ───── */
.cabecera{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(.9rem,2vw,1.4rem) var(--margen);
  background:color-mix(in srgb,var(--campo) 86%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb,var(--tinta) 10%,transparent);
}
/* 🔴 Cada cláusula del titular arranca su propio renglón. Sin esto las dos
   frases se funden —«algo. No todos»— y se pierde el contraste, que es lo
   único que ese titular hace. `.clausula` ya existía como gancho de la
   animación; le faltaba el display. */
.clausula{display:block}

/* 🔴 La marca es el WORDMARK, no las letras «HUR / GROUPE» compuestas con
   tracking. El manual fija el mínimo en 84 px de ancho en pantalla, y la regla
   del lockup manda que el descriptor mida exactamente lo mismo que el
   wordmark: por eso se reparte con space-between y NO con letter-spacing, que
   deja una cuña muerta a la derecha y desalinea el bloque. */
.marca{display:block;width:clamp(84px,7.2vw,104px);color:var(--tinta);
       text-decoration:none;flex:none}
.marca .wm{display:block;width:100%;height:auto}
.marca .wm path{fill:currentColor}
.marca-desc{display:flex;justify-content:space-between;width:100%;margin-top:.34em;
       font-family:'Manrope',sans-serif;font-size:calc(var(--pie) * .62);
       line-height:1;color:var(--tinta-2)}
.marca-desc i{font-style:normal}
.marca:hover,.marca:focus-visible{color:var(--ambar)}
.marca:hover .marca-desc,.marca:focus-visible .marca-desc{color:var(--ambar)}
.nav{display:flex;gap:clamp(.7rem,1.8vw,1.9rem);flex-wrap:wrap}
.nav a{font-weight:400;font-size:var(--pie);letter-spacing:.18em;text-transform:uppercase;
       color:var(--tinta-2);text-decoration:none;padding:.4rem 0}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current]{color:var(--ambar)}
/* 🚨 En teléfono el menú NO se parte en renglones ni se esconde tras una capa.
   Se convierte en una TIRA que se desliza: sin JavaScript, sin elemento oculto,
   y por tanto sin nada que pueda quedarse tendido comiéndose los clics — que es
   el defecto que tuvo este sitio seis días sin que ninguna herramienta lo viera. */
@media (max-width:760px){
  .cabecera{flex-direction:column;align-items:stretch;gap:.6rem;padding-bottom:.5rem}
  .nav{flex-wrap:nowrap;overflow-x:auto;gap:1.15rem;scrollbar-width:none;
       -webkit-overflow-scrolling:touch;padding-bottom:.35rem}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;letter-spacing:.1em}
}

/* ───── BLOQUES ───── */
.bloque{position:relative;padding:clamp(4rem,11vh,9rem) var(--margen);overflow:clip}
.bloque--alto{min-height:100svh;display:grid;align-content:center}
.bloque--alt{background:var(--campo-2)}
.bloque--ambar{background:var(--ambar);color:var(--campo)}
.bloque--ambar .rotulo,.bloque--ambar .cuerpo{color:rgba(11,11,12,.78)}

.rotulo{font-weight:400;font-size:var(--pie);letter-spacing:.28em;text-transform:uppercase;
        color:var(--tinta-2);margin:0 0 clamp(1rem,2.4vw,1.75rem)}
.display{font-family:'Syne',sans-serif;font-weight:800;font-size:var(--display);line-height:.98;letter-spacing:-.015em;
         margin:0;max-width:17ch}
.sub{font-weight:400;font-size:var(--sub);line-height:1.18;margin:clamp(1rem,2.4vw,1.6rem) 0 0;
     max-width:26ch;color:var(--tinta)}
.cuerpo{font-size:var(--cuerpo);line-height:1.55;color:var(--tinta-2);max-width:32em;
        margin:clamp(1rem,2.4vw,1.6rem) 0 0}
.pie-nota{font-weight:400;font-size:var(--pie);letter-spacing:.24em;text-transform:uppercase;
          color:var(--tinta-2);margin:clamp(2rem,5vw,3.5rem) 0 0}

/* ───── PUERTAS: lo que convierte esto en un sitio y no en una landing ───── */
.puerta{display:inline-flex;align-items:center;gap:.7rem;margin-top:clamp(1.4rem,3vw,2.2rem);
        font-weight:400;font-size:var(--cuerpo);color:var(--tinta);text-decoration:none;
        padding:.85rem 0;border-bottom:2px solid var(--ambar)}
.puerta::after{content:'';width:1.1em;height:2px;background:var(--ambar);
               transition:width .18s steps(3,end)}
.puerta:hover::after,.puerta:focus-visible::after{width:2.2em}
.bloque--ambar .puerta{color:var(--campo);border-bottom-color:var(--campo)}
.bloque--ambar .puerta::after{background:var(--campo)}

.giros{display:grid;gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2rem,5vw,3.5rem);
       grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.giro{text-decoration:none;display:block;padding-top:1.4rem;border-top:1px solid color-mix(in srgb,var(--tinta) 18%,transparent)}
.giro h3{font-weight:400;font-size:var(--sub);margin:.6rem 0 0;line-height:1.1}
.giro p{font-size:var(--cuerpo);line-height:1.5;color:var(--tinta-2);margin:.7rem 0 0}
.giro .marca-corte{display:block;height:3px;background:var(--ambar);width:2.4rem}
.giro:nth-child(2) .marca-corte{width:5.2rem}
.giro:nth-child(3) .marca-corte{width:8rem}
.giro:hover .marca-corte,.giro:focus-visible .marca-corte{width:100%;transition:width .2s steps(4,end)}

.recorte{display:block;width:100%;max-width:26rem}
.recorte svg{display:block;width:100%;height:auto}
.dos{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
     grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
.dos--invertido{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
.dos--invertido .texto{order:2}
@media (max-width:860px){ .dos,.dos--invertido{grid-template-columns:minmax(0,1fr)}
  .dos--invertido .texto{order:0} .recorte{max-width:min(72vw,18rem)} }

/* ═══════════ MOVIMIENTO DIRIGIDO POR SCROLL ═══════════
   🚨 Esto NO son revelados. Cada propiedad avanza CONTINUAMENTE con el scroll:
   la posición del scroll ES el reloj. El estado final vive en la regla base, así
   que sin soporte todo se ve entero y quieto. */
/* 🚨 LA ESCENA NO PISA EL TEXTO. Ocupa SU zona — la mitad libre del bloque —
   nunca todo el ancho. Medido: la tinta #E8E4DC sobre el ámbar #F25C1F da 2.62:1
   y no pasa AA ni en tamaño grande, así que la banda cruzando texto no es una
   licencia estética: es texto ilegible. Mismo defecto que ya costó una vuelta. */
.escena-tajo{position:absolute;top:0;bottom:0;right:0;left:52%;pointer-events:none;z-index:0}
.escena-tajo svg{width:100%;height:100%}
.hero-contenido,.sobre{max-width:min(52ch,50%)}
@media (max-width:900px){
  .escena-tajo{left:0;top:auto;height:24%}
  .hero-contenido,.sobre{max-width:none;padding-bottom:26%}
}
.hero-contenido,.sobre{position:relative;z-index:1}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    /* 1 · El corte VIAJA por la pantalla mientras bajas. */
    .tajo-viaja{
      animation-name:viajar; animation-duration:1ms; animation-fill-mode:both;
      animation-timing-function:linear; animation-timeline:view(); animation-range:cover 0% cover 100%;
    }
    /* 2 · La tipografía y el fondo se mueven a ritmos distintos: profundidad real. */
    .capa-lenta{
      animation-name:desplazar-lento; animation-duration:1ms; animation-fill-mode:both;
      animation-timing-function:linear; animation-timeline:view(); animation-range:cover 0% cover 100%;
    }
    /* 3 · La pila se ABANICA conforme bajas: la forma cuenta el problema. */
    .abanica > *{
      animation-name:abanicar; animation-duration:1ms; animation-fill-mode:both;
      animation-timing-function:linear; animation-timeline:view(); animation-range:entry 10% cover 70%;
    }
    .abanica > *:nth-child(2){--giro:-2deg;--corre:26px}
    .abanica > *:nth-child(3){--giro:-4deg;--corre:56px}
    .abanica > *:nth-child(4){--giro:-6deg;--corre:92px}
    .abanica > *:nth-child(5){--giro:-8deg;--corre:134px}
    .abanica > *:nth-child(6){--giro:-10deg;--corre:182px}
    /* 4 · Los saltos de papel: esto SÍ va en steps, es el staccato de Bass. */
    .salta{
      animation-name:saltar; animation-duration:1ms; animation-fill-mode:both;
      animation-timing-function:steps(4,end); animation-timeline:view(); animation-range:entry 6% cover 40%;
    }
    /* 5 · Las mitades se SEPARAN con el scroll: el corte ocurre mientras miras. */
    .separa-arriba{animation-name:subir-mitad;animation-duration:1ms;animation-fill-mode:both;
      animation-timing-function:linear;animation-timeline:view();animation-range:entry 20% cover 80%}
    .separa-abajo{animation-name:bajar-mitad;animation-duration:1ms;animation-fill-mode:both;
      animation-timing-function:linear;animation-timeline:view();animation-range:entry 20% cover 80%}
    /* 6 · Barra de avance de la lectura, arriba del todo. */
    .avance{animation-name:avanzar;animation-duration:1ms;animation-fill-mode:both;
      animation-timing-function:linear;animation-timeline:scroll(root);}
  }
}
@keyframes viajar   { from{transform:translate3d(-58%,0,0)} to{transform:translate3d(14%,0,0)} }
@keyframes desplazar-lento{ from{transform:translate3d(0,4.5vh,0)} to{transform:translate3d(0,-4.5vh,0)} }
@keyframes abanicar { from{transform:none} to{transform:translateX(var(--corre,0)) rotate(var(--giro,0deg))} }
@keyframes saltar   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes subir-mitad{ from{transform:translateY(14px)} to{transform:translateY(-26px)} }
@keyframes bajar-mitad{ from{transform:translateY(-14px)} to{transform:translateY(26px)} }
@keyframes avanzar  { from{transform:scaleX(0)} to{transform:scaleX(1)} }

.barra-avance{position:fixed;top:0;left:0;right:0;height:2px;z-index:30;pointer-events:none}
.barra-avance .avance{display:block;height:100%;background:var(--ambar);transform-origin:left center;transform:scaleX(0)}

.baja{display:flex;align-items:center;gap:.8rem;margin-top:clamp(2.5rem,6vw,4rem);
      font-weight:400;font-size:var(--pie);letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-2)}
.baja i{display:block;width:3.5rem;height:1px;background:var(--tinta-2)}


/* ═══ IMAGE SCRUBBING — el hero ═══
   El bloque mide varias pantallas de alto; dentro, una capa pegajosa se queda
   quieta mientras el scroll recorre la secuencia. El texto va en SU columna:
   la escena vive en la mitad derecha y nunca lo pisa (regla medida: la tinta
   sobre el ámbar da 2.62:1 y no pasa AA). */
.scrub{position:relative;height:300svh}
.scrub__fijo{position:sticky;top:0;height:100svh;display:grid;align-items:center;
             padding:0 var(--margen);overflow:hidden}
.scrub__escena{position:absolute;inset:0;z-index:0}
.scrub__escena canvas,.scrub__escena img{display:block;width:100%;height:100%;object-fit:contain}
.scrub__texto{position:relative;z-index:1;max-width:min(52ch,50%)}
@media (max-width:900px){
  .scrub{height:260svh}
  .scrub__escena{top:auto;height:38%}
  .scrub__texto{max-width:none;padding-bottom:40%}
}
/* 🚨 Si el atributo hidden está puesto, se oculta de verdad — pase lo que pase
   con las clases. Es el candado que faltó y dejó el sitio seis días sin clics. */
[hidden]{display:none !important}

/* ═══════════════════════════════════════════════════════════════
   v2 · IDENTIDAD «te decimos qué hacer» — 2026-09-03
   El mundo de papel recortado quedó derogado por las referencias.
   Lo que sigue es la estructura de publicación: la respuesta manda.
   ═══════════════════════════════════════════════════════════════ */

/* ───── HERO tipográfico. La letra ES el diseño (7 de las 9 referencias). ───── */
.hero{padding:clamp(6rem,18vh,12rem) var(--margen) clamp(3rem,8vh,6rem);
      min-height:78svh;display:grid;align-content:center}
.hero h1{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(2rem,5.4vw,4.25rem);hyphens:none;line-height:1;
         letter-spacing:-.03em;margin:0;max-width:24ch}
/* 🔴 La medida la manda el COPY, no al revés. Con 6vw «Todos venden algo.»
   pedía ~1580 px y solo había 1296: se partía en «TODOS VENDEN / ALGO.» y
   dejaba huérfanas «ALGO.» y «BIEN.». A 4vw la primera frase entra completa
   en un renglón y la segunda cae en dos — el mismo ritmo que en teléfono. */
.hero h1 b{font-weight:800;color:var(--ambar)}
.hero .entrada{font-size:clamp(1.05rem,1.35vw,1.3rem);font-weight:400;line-height:1.5;color:var(--tinta-2);
               max-width:46ch;margin:clamp(1.6rem,3.5vw,2.6rem) 0 0}

/* ───── LA PUBLICACIÓN: cada Corte es una entrada, no una tarjeta ───── */
.publicacion{padding:0 var(--margen) clamp(4rem,10vh,8rem)}
.entrada-corte{display:block;text-decoration:none;padding:clamp(2rem,5vw,3.2rem) 0;
               border-top:1px solid color-mix(in srgb,var(--tinta) 16%,transparent)}
.entrada-corte .giro-rotulo{font-weight:500;font-size:var(--cuerpo);color:var(--ambar);margin:0}
.entrada-corte h2{font-weight:400;font-size:clamp(1.75rem,4.2vw,3.4rem);line-height:1.02;
               letter-spacing:-.015em;margin:.9rem 0 0;max-width:20ch;color:var(--tinta)}
.entrada-corte p{font-size:var(--cuerpo);line-height:1.55;color:var(--tinta-2);
               max-width:42ch;margin:.9rem 0 0}
.entrada-corte:hover h2,.entrada-corte:focus-visible h2{color:var(--ambar)}

/* ───── EL CORTE por dentro ───── */
/* 🔴 El corte ALINEA AL MARGEN de la página, no se centra. Antes llevaba
   `max-width:44rem;margin-inline:auto`, y en escritorio eso empujaba todo el
   bloque al centro —el texto arrancaba a 440 px— mientras la publicación de
   abajo alineaba a 72: el interior se leía como un móvil estirado. En teléfono
   no se notaba porque el tope nunca llegaba a aplicar.
   La medida de lectura se limita POR ELEMENTO, que es lo que hace falta, en vez
   de estrechar y centrar el contenedor entero. */
.corte{padding:clamp(3.5rem,9vh,7rem) var(--margen) clamp(7rem,12vh,9rem)}
.corte > *{max-width:46ch}
.corte h1{max-width:15ch}
.corte h1{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(2rem,5.4vw,4.25rem);line-height:1.0;
          letter-spacing:-.02em;margin:.9rem 0 0}
.corte .respuesta{font-size:clamp(1.1rem,1.5vw,1.32rem);line-height:1.5;color:var(--tinta);
          margin:clamp(1.5rem,3.5vw,2.2rem) 0 0}
.corte h2{font-family:'Syne',sans-serif;font-weight:700;font-size:var(--sub);line-height:1.15;letter-spacing:-.01em;
          margin:clamp(2.5rem,6vw,3.5rem) 0 0}
.pasos{list-style:none;padding:0;margin:clamp(1.1rem,2.5vw,1.6rem) 0 0;display:grid;gap:.9rem}
.pasos li{position:relative;padding-left:1.6rem;font-size:var(--cuerpo);line-height:1.55;
          color:var(--tinta-2)}
.pasos li::before{content:'';position:absolute;left:0;top:.62em;width:.8rem;height:2px;
          background:var(--ambar)}
.faq{margin-top:clamp(1.1rem,2.5vw,1.6rem);display:grid;gap:1.4rem}
.faq h3{font-weight:500;font-size:var(--cuerpo);margin:0;color:var(--tinta)}
.faq p{font-size:var(--cuerpo);line-height:1.55;color:var(--tinta-2);margin:.4rem 0 0}

/* ───── CTA fija por contexto + compartir. Barra fina, nunca una capa. ───── */
.cta-fija{position:fixed;left:0;right:0;bottom:0;z-index:25;
   display:flex;align-items:center;justify-content:space-between;gap:1rem;
   padding:.7rem var(--margen);
   background:color-mix(in srgb,var(--campo) 92%,transparent);backdrop-filter:blur(10px);
   border-top:1px solid color-mix(in srgb,var(--tinta) 14%,transparent)}
.cta-fija a,.cta-fija button{font-family:inherit;font-size:var(--pie);letter-spacing:.14em;
   text-transform:uppercase;font-weight:400;color:var(--tinta);text-decoration:none;
   background:none;border:0;cursor:pointer;padding:.7rem 0;min-height:44px;
   display:inline-flex;align-items:center;gap:.6rem}
.cta-fija a{border-bottom:2px solid var(--ambar)}
.cta-fija button{color:var(--tinta-2)}
.cta-fija button:hover,.cta-fija a:hover{color:var(--ambar)}
body:has(.cta-fija){padding-bottom:4.5rem}

/* ───── PIE ───── */
.pie{padding:clamp(3rem,7vh,5rem) var(--margen) clamp(2rem,4vh,3rem);
     border-top:1px solid color-mix(in srgb,var(--tinta) 14%,transparent);
     display:grid;gap:1.2rem}
.pie .correo{font-size:var(--sub);font-weight:400;color:var(--tinta);text-decoration:none;
     border-bottom:2px solid var(--ambar);justify-self:start;padding-bottom:.35rem;min-height:44px;
     display:inline-flex;align-items:center}
.pie .mapa{display:flex;flex-wrap:wrap;gap:1.4rem}
.pie .mapa a{font-size:var(--pie);letter-spacing:.18em;text-transform:uppercase;
     color:var(--tinta-2);text-decoration:none;padding:.5rem 0;min-height:44px;display:inline-flex;align-items:center}
.pie .mapa a:hover{color:var(--ambar)}
.pie small{font-size:var(--pie);letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-2)}

/* ───── Movimiento: solo lo que sirve. Estado final en la regla base. ───── */
/* El revelado lo hace animaciones.js con Motion (R60). Aquí no se duplica: dos
   sistemas animando el mismo elemento se pisan y el resultado no es reproducible. */

/* Medida de lectura: el contenedor del Corte da 44rem, que en tableta rendía 80
   caracteres por renglón. El tope va en el TEXTO, no en el contenedor, para que
   los titulares sigan usando todo el ancho. Medido, no supuesto. */
.corte .respuesta,.corte .pasos li,.corte .faq p{max-width:34em}

/* ───── Qué hacemos: lo que el sitio no decía. Va arriba, antes de la prueba. ───── */
.titulo-seccion{font-family:'Syne',sans-serif;font-weight:700;font-size:clamp(1.35rem,2.4vw,1.9rem);
  line-height:1.1;letter-spacing:-.01em;color:var(--tinta);margin:clamp(3rem,7vh,5rem) 0 clamp(1.5rem,3vw,2.2rem)}
.hace{padding:clamp(1.6rem,3.6vw,2.4rem) 0;
  border-top:1px solid color-mix(in srgb,var(--tinta) 16%,transparent)}
.hace h3{font-family:'Syne',sans-serif;font-weight:700;font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.06;
  letter-spacing:-.015em;margin:0;max-width:20ch;color:var(--tinta)}
.hace p{font-size:var(--cuerpo);line-height:1.55;color:var(--tinta-2);max-width:34em;margin:.9rem 0 0}
.hace .entrega{color:var(--tinta);font-size:var(--pie);letter-spacing:.04em;margin-top:.7rem}
.remate{font-size:var(--cuerpo);line-height:1.55;color:var(--tinta-2);max-width:34em;
  margin:clamp(1.4rem,3vw,2rem) 0 0}
.remate a{color:var(--tinta);text-decoration:none;border-bottom:2px solid var(--ambar);
  padding-bottom:.15rem;white-space:nowrap}
.entrada-corte h3{font-family:'Syne',sans-serif;font-weight:700;font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.04;
  letter-spacing:-.015em;margin:.9rem 0 0;max-width:22ch;color:var(--tinta)}
.entrada-corte:hover h3,.entrada-corte:focus-visible h3{color:var(--ambar)}

/* A partir de portátil, «qué hacemos» usa el ancho entero: el titular a la izquierda
   y el texto a la derecha. Antes dejaba media pantalla vacía en 1440. */
@media (min-width:900px){
  .hace{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
        /* Solo entre COLUMNAS. Con gap a secas, los 4rem se metían también entre
           el párrafo y su línea de entrega y abrían un hueco muerto. */
        gap:0 clamp(2rem,5vw,4rem);align-items:start}
  .hace h3{max-width:none}
  /* El texto va envuelto: si los párrafos fueran hijos sueltos del grid, el segundo
     caería en otra fila y arrancaría al pie del titular, no bajo su párrafo. */
  .hace .hace-detalle{margin-top:0}
}

.hace .hace-detalle p{margin-top:.9rem}
.hace .hace-detalle p:first-child{margin-top:0}

/* En teléfono el hero arrancaba a media pantalla: el padding de escritorio más el
   centrado dejaban 40% de vacío antes del titular. Aquí manda el titular. */


/* En teléfono el grid de dos columnas se apila: el titular quedaba pegado a su
   párrafo, porque el margen cero solo tenía sentido cuando iban lado a lado. */
.hace .hace-detalle{margin-top:.9rem}
@media (min-width:900px){ .hace .hace-detalle{margin-top:0} }


/* ═══ HERO CON VIDEO ═══
   El clip es fondo, no contenido: va aria-hidden y sin foco. El texto vive en su
   propia capa, por encima del velo. Si el video no carga o el aparato no lo
   reproduce, queda el cartel; si tampoco, queda el campo negro y el texto se lee
   igual — el contenido NUNCA depende del video. */
.hero--video{position:relative;isolation:isolate;overflow:hidden}
.hero-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% 62%;
  z-index:0;pointer-events:none}
/* El velo protege la lectura: más denso a la izquierda, que es donde va la letra,
   y se abre a la derecha para dejar respirar la luz cálida del interior. */
.hero-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* 1 · Banda de lectura: oscurece la FRANJA donde vive el titular, y se abre
       arriba y abajo para no matar ni el cielo ni el reflejo del pavimento, que
       es lo que se pagó. Medido: sin esto el ámbar sobre el interior da 1.95:1. */
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb,var(--campo) 55%,transparent) 28%,
      color-mix(in srgb,var(--campo) 80%,transparent) 44%,
      color-mix(in srgb,var(--campo) 80%,transparent) 72%,
      color-mix(in srgb,var(--campo) 40%,transparent) 88%,
      transparent 100%),
    /* 2 · Lateral: más denso a la izquierda, donde arranca la letra. */
    linear-gradient(90deg,
      color-mix(in srgb,var(--campo) 88%,transparent) 0%,
      color-mix(in srgb,var(--campo) 78%,transparent) 45%,
      color-mix(in srgb,var(--campo) 50%,transparent) 82%,
      color-mix(in srgb,var(--campo) 38%,transparent) 100%)}
.hero-texto{position:relative;z-index:2}
@media (prefers-reduced-motion: reduce){
  .hero-fondo{display:none}
}

/* ═══ EL FONDO ES LA SECUENCIA, Y GOBIERNA TODA LA PÁGINA ═══
   Lienzo fijo detrás del contenido. El scroll del documento entero adelanta los
   151 cuadros a 30 fps, así que el plano avanza de la portada al pie mientras las
   secciones suben por encima. Con el recorrido metido solo en el hero, la
   secuencia se consumía en pantalla y media — iba demasiado rápido. */
.fondo-secuencia{position:fixed;inset:0;z-index:-2;pointer-events:none}
.fondo-secuencia img,.fondo-secuencia canvas{display:block;width:100%;height:100%;
  object-fit:cover;object-position:72% 62%}
.fondo-velo{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--campo) 90%,transparent) 0%,
      color-mix(in srgb,var(--campo) 82%,transparent) 48%,
      color-mix(in srgb,var(--campo) 58%,transparent) 84%,
      color-mix(in srgb,var(--campo) 46%,transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--campo) 72%,transparent) 0%,
      color-mix(in srgb,var(--campo) 52%,transparent) 22%,
      color-mix(in srgb,var(--campo) 52%,transparent) 62%,
      color-mix(in srgb,var(--campo) 80%,transparent) 86%,
      color-mix(in srgb,var(--campo) 86%,transparent) 100%)}
/* Las secciones bajo el hero necesitan su propio suelo para que el texto no
   pelee con la imagen: velo local, no una caja opaca. */
.publicacion{position:relative}
.publicacion::before{content:'';position:absolute;inset:-2rem 0;z-index:-1;
  /* 24%: medido. Al 12% el peor contraste de la página cae a 4.70:1, al filo del
     4.5 que exige el texto pequeño; al 84% el video desaparecía detrás. Aquí se ve
     el plano y se lee todo con margen. */
  background:color-mix(in srgb,var(--campo) 44%,transparent)}
.pie{position:relative;background:color-mix(in srgb,var(--campo) 86%,transparent)}

/* ═══ MARCAS DE LAS TRES ÁREAS ═══
   No son iconos de librería: son tres trazos del mismo lenguaje que las piezas de
   marca — la línea ámbar que decide, corta y se reparte. Se dibujan solas al entrar
   (stroke-dashoffset) y por eso «se encienden» en vez de aparecer. */
.marca-area{display:block;width:clamp(2.6rem,4vw,3.4rem);height:auto;overflow:visible;
  margin-bottom:clamp(.8rem,1.6vw,1.1rem)}
.marca-area line,.marca-area path,.marca-area rect,.marca-area circle{
  fill:none;stroke-linecap:square;vector-effect:non-scaling-stroke}
.marca-area .tinta{stroke:var(--tinta-2);stroke-width:1.5}
.marca-area .acento{stroke:var(--ambar);stroke-width:2}
.trazo{stroke-dasharray:var(--largo,120);stroke-dashoffset:var(--largo,120)}
.hace.encendida .trazo{stroke-dashoffset:0;
  transition:stroke-dashoffset .9s cubic-bezier(.22,1,.36,1) var(--retardo,0s)}
@media (prefers-reduced-motion: reduce){ .trazo{stroke-dashoffset:0} }
.hace-marca{display:block}
@media (min-width:900px){ .hace-marca{grid-column:1} }

/* ═══ MÁSCARAS DE RENGLÓN ═══ el texto sube desde DETRÁS de su propio corte. */
.renglon{display:block;overflow:hidden}
.renglon-i{display:block;will-change:transform}
.js .cabecera{will-change:transform}

/* El filo de cada bloque se TRAZA al encender; no aparece hecho. */
.hace{border-top:none;
  background-image:linear-gradient(90deg,
    color-mix(in srgb,var(--tinta) 16%,transparent),
    color-mix(in srgb,var(--tinta) 16%,transparent));
  background-repeat:no-repeat;background-position:0 0;background-size:0 1px;
  transition:background-size .85s cubic-bezier(.22,1,.36,1)}
.hace.encendida{background-size:100% 1px}
@media (prefers-reduced-motion: reduce){ .hace{background-size:100% 1px} }

/* Al pasar el cursor, el área se adelanta y su marca se reafirma. */
.hace h3{transition:transform .35s cubic-bezier(.22,1,.36,1),color .35s ease}
.hace:hover h3{transform:translateX(10px);color:var(--ambar)}
.hace:hover .marca-area .acento{stroke-width:2.6}
.marca-area .acento{transition:stroke-width .35s ease}

/* Vista con transición nativa donde el navegador la trae. */
@view-transition{navigation:auto}

/* ═══ CASOS con imagen real ═══ */
.caso{display:grid;gap:clamp(1.4rem,3vw,2.4rem);align-items:center;
  padding:clamp(2rem,5vw,3.5rem) 0;
  border-top:1px solid color-mix(in srgb,var(--tinta) 16%,transparent)}
@media (min-width:900px){
  .caso{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .caso:nth-child(even) .caso-img{order:2}
}
.caso-img{display:block;width:100%;height:auto;border-radius:2px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.caso-texto h2{font-family:'Syne',sans-serif;font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.02;margin:.6rem 0 0}
.caso-texto .respuesta{margin-top:1rem}
.correo-grande{margin:clamp(2rem,5vw,3rem) 0 0}
.correo-grande a{font-family:'Syne',sans-serif;font-weight:700;
  font-size:clamp(1.4rem,4vw,2.6rem);color:var(--tinta);text-decoration:none;
  border-bottom:3px solid var(--ambar);padding-bottom:.2rem;
  display:inline-block;min-height:44px}
.correo-grande a:hover{color:var(--ambar)}

/* ═══════════════════════════════════════════════════════════════
   FORMATO DE TELÉFONO — no es el de escritorio encogido.
   🔴 Medido: en mayúsculas y en Syne 800, «TECNOLOGÍA,» solo cabe entera
   hasta 30 px en un ancho de 390. Yo había bajado el titular a 23.4 px para
   que cupiera, y con eso el nombre de área (24 px) quedó MÁS GRANDE que el
   titular: la jerarquía invertida. Aquí el titular manda a 30 y todo lo demás
   baja por debajo, en vez de comprimir la página entera.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  :root{--margen:1.5rem}
  /* El hero es dueño de la primera pantalla, no un bloque más. */
  .hero{min-height:78svh;padding:22svh var(--margen) 10svh;align-content:end}
  /* 🔴 En teléfono la escala la fija la PALABRA MÁS LARGA, no el gusto. A 7.6vw
     «COMUNICARLO» medía 381 px y el ancho útil son 342: se recortaba contra el
     borde sin que la prueba de desbordes lo viera, porque `.renglon` oculta el
     sobrante. A 5.9vw entra incluso en una pantalla de 320 px. */
  .hero h1{font-size:clamp(1.5rem,6.4vw,1.8rem);line-height:1.04;letter-spacing:-.025em;
           max-width:none}
  .hero .entrada{font-size:1.02rem;line-height:1.55;margin-top:1.4rem;
                 color:color-mix(in srgb,var(--tinta) 78%,var(--tinta-2))}
  /* Los nombres de área, por debajo del titular. Antes lo superaban. */
  .hace h3{font-size:1.28rem}
  .caso-texto h2,.caso-texto h3,.corte h1{font-size:clamp(1.5rem,6.4vw,1.8rem);line-height:1.04}
  /* Ritmo vertical propio: aire entre secciones, no bloques apretados. */
  .titulo-seccion{margin-top:4.5rem;margin-bottom:1.6rem}
  .publicacion{padding-bottom:4.5rem}
  .hace{padding:2.2rem 0}
  .hace .hace-detalle{margin-top:1rem}
  .corte{padding:5rem var(--margen) 6rem}
  .caso{padding:2.6rem 0;gap:1.2rem}
  .pie{padding:4rem var(--margen) 3rem;gap:1.6rem}
  .marca-area{width:2.4rem;margin-bottom:.9rem}
}
/* Las palabras que venían dentro de <b> conservan el acento tras partir en renglones. */
.pal-acento{color:var(--ambar)}

/* El texto de un caso necesita su medida de lectura: sin tope llegaba a 119
   caracteres por renglón, que es el doble de lo legible. */
.caso-texto .respuesta{max-width:34em;line-height:1.55}
.caso-texto p{line-height:1.55}
/* Y el cuerpo baja un escalón de verdad respecto al nombre del área: 20.5 y 21.6
   no son dos niveles, son la misma talla dos veces. */
@media (max-width:760px){
  .corte .respuesta,.caso-texto .respuesta{font-size:1rem;line-height:1.55}
}
/* `.corte h2` daba 21.6 y el nombre de área 20.5: un 5% de diferencia no es un
   escalón, es la misma talla dos veces. Se separa de verdad. */
@media (max-width:760px){ .corte h2{font-size:1.56rem;line-height:1.1} }

/* ═══ FORMULARIO ═══
   Líneas, no cajas: el campo es un subrayado que se enciende al enfocar. Objetivos
   táctiles de 44 px como mínimo, que es lo que exige el sitio en teléfono. */
.formulario-zona{padding-top:clamp(2rem,5vh,3rem)}
.formulario{margin-top:clamp(2rem,4vw,3rem);max-width:52rem}
.campos{display:grid;gap:clamp(1.4rem,3vw,2rem)}
@media (min-width:760px){ .campos{grid-template-columns:1fr 1fr} .campo--ancho{grid-column:1/-1} }
.campo{margin:0;display:grid;gap:.5rem}
.campo label{font-size:var(--pie);letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-2);font-weight:500}
.campo label i{font-style:normal;letter-spacing:.06em;text-transform:none;opacity:.75}
.campo--req label::after{content:' *';color:var(--ambar)}
.campo input,.campo select,.campo textarea{
  font-family:'Manrope',system-ui,sans-serif;font-size:1rem;color:var(--tinta);
  background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--tinta) 28%,transparent);
  padding:.7rem 0;min-height:44px;width:100%;border-radius:0;appearance:none;
  transition:border-color .25s ease}
.campo textarea{resize:vertical;line-height:1.5}
.campo select{cursor:pointer}
.campo select option{background:var(--campo-2);color:var(--tinta)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-bottom-color:var(--ambar);border-bottom-width:2px}
.campo input:user-invalid{border-bottom-color:#E5484D}
/* El error junto al campo: en teléfono el aviso de abajo queda fuera de la pantalla. */
.campo-error{font-size:var(--pie);color:#F2857A;line-height:1.4}
.campo input[aria-invalid="true"]{border-bottom-color:#E5484D}

.casillas{border:0;padding:0;margin:clamp(1.8rem,4vw,2.6rem) 0 0;display:grid;gap:.2rem}
.casillas legend{font-size:var(--pie);letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-2);font-weight:500;padding:0;margin-bottom:.7rem}
.casillas legend i{font-style:normal;letter-spacing:.06em;text-transform:none;opacity:.75}
.casilla{display:flex;align-items:center;gap:.8rem;min-height:44px;cursor:pointer;
  font-size:1rem;color:var(--tinta)}
.casilla input{appearance:none;width:1.15rem;height:1.15rem;flex:0 0 auto;
  border:1px solid color-mix(in srgb,var(--tinta) 40%,transparent);border-radius:0;
  display:grid;place-content:center;transition:border-color .2s ease}
.casilla input::after{content:'';width:.62rem;height:.62rem;background:var(--ambar);
  transform:scale(0);transition:transform .18s cubic-bezier(.22,1,.36,1)}
.casilla input:checked{border-color:var(--ambar)}
.casilla input:checked::after{transform:scale(1)}
.casilla input:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}

.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.enviar-fila{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  margin-top:clamp(1.8rem,4vw,2.6rem)}
.enviar{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.02em;
  color:var(--campo);background:var(--ambar);border:0;border-radius:2px;
  padding:.95rem 2rem;min-height:48px;cursor:pointer;
  transition:transform .2s cubic-bezier(.22,1,.36,1),filter .2s ease}
.enviar:hover{transform:translateY(-2px);filter:brightness(1.08)}
.enviar[disabled]{opacity:.6;cursor:default;transform:none}
.aviso{font-size:var(--cuerpo);color:var(--tinta-2)}
.aviso.mal{color:#F2857A}
.aviso.bien{color:var(--tinta)}
.nota-form{font-size:var(--pie);color:var(--tinta-2);margin:1.4rem 0 0;letter-spacing:.04em}
.formulario .campo--ancho:has(textarea){margin-top:clamp(1.8rem,4vw,2.6rem)}

/* ═══ COMPARTIR ═══ En escritorio no existe `navigator.share`, así que el botón
   solo cambiaba de texto medio segundo y parecía roto. Ahora abre sus opciones. */
.compartir-caja{position:relative}
.menu-compartir{position:absolute;right:0;bottom:calc(100% + .6rem);z-index:40;
  min-width:13rem;padding:.4rem;border-radius:3px;
  background:color-mix(in srgb,var(--campo-2) 96%,transparent);
  border:1px solid color-mix(in srgb,var(--tinta) 16%,transparent);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9);
  display:grid;gap:.1rem}
.menu-compartir a,.menu-compartir button{
  display:flex;align-items:center;gap:.7rem;width:100%;min-height:44px;
  padding:.6rem .8rem;border:0;background:transparent;cursor:pointer;
  font-family:'Manrope',system-ui,sans-serif;font-size:.92rem;letter-spacing:.02em;
  text-transform:none;color:var(--tinta);text-decoration:none;border-radius:2px;
  transition:background .18s ease,color .18s ease}
.menu-compartir a:hover,.menu-compartir button:hover{
  background:color-mix(in srgb,var(--tinta) 8%,transparent);color:var(--ambar)}
.menu-compartir svg{width:1.05rem;height:1.05rem;flex:0 0 auto;fill:none;
  stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ═══ REDES en el pie ═══ Solo aparece si hay cuenta de verdad. */
.redes{display:flex;gap:1.4rem;flex-wrap:wrap}
.redes a{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;
  font-size:var(--pie);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-2);text-decoration:none;transition:color .2s ease}
.redes a:hover{color:var(--ambar)}
.redes svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ── FOTOS DE OFICIO (2026-10-02) ─────────────────────────────────────────
   Una foto por partida y una para «Cómo termina». En Servicios va ancha; en la
   portada, como franja de cine para no alargar la página. Ocupa las dos columnas
   de .hace. La foto ya trae su sombra a la izquierda: ahí no se pone nada.
   Entra con un barrido de recorte ligado al scroll (solo clip-path y transform). */
.hace-foto{margin:clamp(1.2rem,3vw,2rem) 0 0;overflow:hidden;border-radius:2px;background:var(--campo-2,#141416)}
.hace-foto img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:60% 55%}
.hace-foto.franja img{aspect-ratio:32/9}
.corte-foto{max-width:44rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.corte-foto img{aspect-ratio:16/9}
@media (min-width:900px){ .hace .hace-foto{grid-column:1 / -1} }
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .hace-foto{animation:destapar linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    .hace-foto img{animation:acercar linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
@keyframes destapar{ from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} }
@keyframes acercar { from{transform:scale(1.08)} to{transform:scale(1)} }

/* Los casos de la portada usan el mismo bloque que la página de Casos; su
   nombre es h3 aquí (h2 allá), así que hereda el mismo tamaño. */
.caso-texto h3{font-family:'Syne',sans-serif;font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.02;margin:.6rem 0 0}

/* Syne es tan ancha que el tope en ch partía «derecha.» sola. En pantalla grande
   cada frase del H1 va en su renglón, sin tope. */
@media (min-width:900px){ .hero h1{max-width:none;font-size:clamp(2rem,4.5vw,4.25rem)} .hero h1 .clausula{display:block;white-space:nowrap} }