/* =============================================================================
   HENKEL.CSS — Catálogo de adhesivos industriales
   Extraído del <style> embebido. Los tokens viven en tokens.css.
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--graphite);
  font-family:'Inter',sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* height:auto es imprescindible junto a max-width:100%: sin él, el atributo
   height= del HTML actúa como altura fija y la imagen se deforma cuando el
   contenedor es más estrecho que su width= declarado. */
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}

h1,h2,h3,h4,.display{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1;
}
.mono,.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* ---------- Barra de anuncio ---------- */
.announce{
  background:var(--ink);
  color:var(--white);
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  letter-spacing:.06em;
}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:18px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.announce a{color:#FFB59B;border-bottom:1px solid rgba(255,181,155,.4);padding-bottom:1px}
.announce a:hover{color:#fff;border-color:#fff}
.announce .dismiss{color:rgba(255,255,255,.5);font-size:11px;letter-spacing:.1em}
.announce .dismiss:hover{color:#fff}

/* ---------- Header ---------- */
header.site-header{
  position:sticky;top:0;z-index:200;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.header-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:15px;padding:14px 0}
.brand-block{display:flex;align-items:center;gap:13px;flex-shrink:0;max-width:200px}
.daka-logo{height:38px;width:auto;object-fit:contain}
/* ◄ ELIMINADO: .brand-divider — ningún elemento del HTML lo usaba */
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}


.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;border-radius:var(--radius);
  padding:11px 20px;transition:all .25s var(--ease);white-space:nowrap;
}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:#C7440F;transform:translateY(-2px);box-shadow:0 6px 18px rgba(226,87,28,.32)}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink:hover{background:var(--ink-2);transform:translateY(-2px);box-shadow:0 6px 18px rgba(30,16,84,.28)}
.btn-ghost{background:transparent;border:1.5px solid var(--steel);color:var(--steel)}
.btn-ghost:hover{background:var(--steel);color:#fff}
.btn-ghost-light{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:var(--white)}
.btn-ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-sm{padding:8px 14px;font-size:10.5px}

/* ---------- Nav / mega menú ---------- */
.header-nav{border-top:1px solid var(--paper-2)}
.nav-list{display:flex;align-items:center;gap:4px}
.nav-item{position:relative}
.nav-trigger{
  display:flex;align-items:center;gap:7px;padding:13px 16px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--graphite);
  border-bottom:2px solid transparent;transition:all .2s var(--ease);
}
.nav-trigger .chev{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease)}
.nav-item:hover .nav-trigger{color:var(--orange);border-bottom-color:var(--orange)}
.nav-item:hover .chev{transform:rotate(-135deg) translate(-3px,-3px)}
.mega{
  position:absolute;top:100%;left:0;min-width:640px;
  background:var(--white);border:1px solid var(--line);
  border-top:3px solid var(--orange);
  box-shadow:0 22px 50px rgba(27,27,24,.16);
  padding:24px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:all .22s var(--ease);z-index:210;
}
.nav-item:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 28px}
.mega h5,.mega .mega-title{font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.55;letter-spacing:.12em;color:var(--steel);text-transform:uppercase;font-weight:600;margin-bottom:10px;grid-column:1/-1}
.mega a{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;font-size:13.5px;border-radius:var(--radius);
  transition:all .18s var(--ease);
}
.mega a:hover{background:var(--paper);color:var(--ink);padding-left:14px}
.mega a span{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#6E6A59}
.nav-right{margin-left:auto;display:flex;gap:6px;align-items:center}
.nav-pill{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel);border:1px solid var(--line);
  padding:6px 12px;border-radius:100px;transition:all .2s var(--ease);
}
.nav-pill:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.burger{display:none;flex-direction:column;gap:4px;padding:8px}
.burger span{display:block;width:20px;height:2px;background:var(--ink)}

/* ---------- Hero ---------- */
.hero{
  background:var(--ink);color:var(--white);
  padding:0;position:relative;overflow:hidden;
  border-top:4px solid var(--henkel-red);
  min-height:88vh;min-height:88dvh;
  display:flex;align-items:center;isolation:isolate;
}
.hero::before{
  content:"";position:absolute;top:0;right:0;width:520px;height:100%;
  background:radial-gradient(circle at 100% 0%,rgba(229,0,20,.20) 0%,transparent 70%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
}
.hero .wrap{position:relative;z-index:2}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
  background:rgba(229,0,20,.15);padding:7px 15px;border-radius:2px;
  border-left:3px solid var(--henkel-red);
}
.hero-eyebrow span{color:#FF707A;font-weight:600}
.hero h1{font-size:clamp(34px,5.4vw,64px);line-height:.97;max-width:16ch;margin-bottom:20px}
.hero h1 em{font-style:normal;color:#FF8A6B}
.hero-sub{font-size:16.5px;color:rgba(251,250,246,.78);max-width:62ch;margin-bottom:32px}

/* Acciones hero */
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:38px;margin-top:26px;flex-wrap:wrap}
.hero-stats div{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:rgba(251,250,246,.6)}
.hero-stats b{display:block;font-family:'Big Shoulders Display',sans-serif;font-size:30px;font-weight:900;color:#fff;letter-spacing:.02em;line-height:1.1}

/* ---------- Sección genérica ---------- */
section{padding:74px 0}
.sec-head{margin-bottom:38px;max-width:74ch}
.sec-eyebrow{color:var(--orange);font-weight:600;display:block;margin-bottom:12px}
.sec-head h2{font-size:clamp(28px,3.6vw,44px);color:var(--ink);margin-bottom:14px;line-height:1}
.sec-head p{font-size:15.5px;color:#55524A;max-width:66ch}
.rule{height:1px;background:var(--line);margin:0}

/* ---------- Tabs de exploración ---------- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:30px}
.tab{
  padding:13px 24px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#5F5C4A;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s var(--ease);
}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--orange)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeUp .35s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.cat-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;display:flex;flex-direction:column;gap:10px;
  transition:all .25s var(--ease);position:relative;overflow:hidden;
}
.cat-card::after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(27,27,24,.11);border-color:var(--steel)}
.cat-card:hover::after{transform:scaleY(1)}
.cat-icon{
  width:40px;height:40px;border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;background:var(--paper);
  font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:var(--steel);
}
.cat-card h4{font-size:19px;color:var(--ink);letter-spacing:.02em}
.cat-card p{font-size:13px;color:#5F5C53;flex:1}
.cat-link{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);font-weight:600;display:flex;align-items:center;gap:6px}
.cat-card:hover .cat-link{gap:11px}

/* ---------- Marquee de marcas ---------- */
.trust{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0}
.trust h2,.trust h3{text-align:center;font-size:22px;color:var(--ink);margin-bottom:26px;letter-spacing:.03em}
/* ◄ WCAG 2.2.2 (Pause, Stop, Hide): el carrusel automático se sustituye por
   una fila estática. Los 4 logos caben en el contenedor, así que la animación
   no aportaba información y no era pausable por teclado. */
.marquee{position:relative}
.marquee-track{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px 44px;padding:0 8px}
/* ◄ ELIMINADO: .logo-chip y .logo-chip:hover — el marquee ya usa <img> reales */
/* ◄ AÑADIDO: encuadre uniforme de los logos del marquee (antes lo daba .logo-chip) */
.marquee-track img{flex-shrink:0;width:158px;height:62px;object-fit:contain}

/* ---------- Catálogo por aplicación ---------- */
.app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:22px}
.app-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:all .3s var(--ease);
}
.app-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(27,27,24,.13)}
.app-num{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--ink);
  padding:9px 18px;display:flex;justify-content:space-between;align-items:center;
}
.app-num b{color:#FF8A6B;font-weight:600}
/* ◄ M-11 · ELIMINADO: .img-ph / .ph-badge / .ph-alt — eran el andamiaje de
   edición que se estaba publicando. Sustituidos por <img> reales. */
.app-body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.app-body h3{font-size:25px;color:var(--ink);letter-spacing:.02em}
.app-body h4,.app-body .app-subtitle{font-family:'Inter',sans-serif;text-transform:none;font-weight:600;font-size:14px;color:var(--steel);letter-spacing:0;margin:0}
.app-body p{font-size:14px;color:#55524A}
.tag-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6E6A59;margin-top:4px}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;
  background:var(--paper);border:1px solid var(--line);color:var(--steel);
  padding:5px 11px;border-radius:100px;
}
.app-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--paper-2);display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Por qué DAKA ---------- */
.why{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.why::before{content:"";position:absolute;bottom:-140px;left:-80px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(226,87,28,.20),transparent 68%)}
.why .wrap{position:relative;z-index:2}
.why .sec-head h2{color:#fff;max-width:20ch}
.why .sec-head p{color:rgba(251,250,246,.72)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-bottom:34px}
.why-card{border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:26px;background:rgba(255,255,255,.035);transition:all .25s var(--ease)}
.why-card:hover{background:rgba(255,255,255,.07);border-color:rgba(255,138,107,.5);transform:translateY(-4px)}
.why-card .n{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:#FF8A6B;margin-bottom:14px;display:block}
.why-card h4,.why-card h3{font-size:21px;color:#fff;margin-bottom:10px;letter-spacing:.02em}
.why-card p{font-size:13.5px;color:rgba(251,250,246,.7)}

/* ---------- Formatos / bulk ---------- */
.bulk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.bulk-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:12px;transition:all .28s var(--ease)}
.bulk-card:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 16px 36px rgba(27,27,24,.11)}
/* ◄ M-11 · ELIMINADO: .bulk-visual — sustituido por .tech-panel--fmt. */
.bulk-card .fmt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:var(--orange);font-weight:600}
.bulk-card h3{font-size:24px;color:var(--ink);letter-spacing:.02em}
.bulk-card p{font-size:13.5px;color:#55524A}
.feat-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.feat-list li{font-size:13px;color:#55524A;display:flex;gap:9px;align-items:flex-start}
.feat-list li::before{content:"";width:5px;height:5px;background:var(--orange);border-radius:50%;margin-top:7px;flex-shrink:0}

/* ---------- Métricas ---------- */
.metrics{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.metric{background:var(--white);padding:30px 24px;text-align:center}
.metric b{display:block;font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:46px;color:var(--ink);line-height:1}
.metric span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#7E7A6C;margin-top:8px;display:block}

/* ---------- Testimonios ---------- */
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.quote{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:16px}
.quote p{font-size:15px;color:var(--graphite);line-height:1.6}
.quote footer{display:flex;align-items:center;gap:12px;margin-top:auto}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--steel);font-weight:600;flex-shrink:0}
.quote footer div b{display:block;font-size:13px;color:var(--ink)}
.quote footer div span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;color:#8C8878;text-transform:uppercase}

/* ==========================================================
   SOCIOS — REDISEÑO PARA UN SOLO PARTNER (HENKEL)
   ◄ ELIMINADO de este bloque:
       .partner-grid          (grilla de 3 columnas, ya no hay 3 tarjetas)
       .partner-card          (tarjeta vertical genérica)
       .partner-card:hover
       .partner-card h4
       .partner-card p
       .logo-ph / .logo-ph b / .logo-ph span   (placeholder de logo sin uso)
   ◄ CONSERVADO: .partners y .partner-tags — la sección nueva los reutiliza.
   ========================================================== */
.partners{background:var(--paper-2);border-top:1px solid var(--line)}
.partner-tags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}

/* ◄ AÑADIDO: tarjeta horizontal de socio único.
     Reutiliza .app-num, .tag-label, .tag y .btn del sistema. */
.partner-focus{
  background:var(--white);border:1px solid var(--line);
  border-top:3px solid var(--henkel-red);border-radius:var(--radius);
  overflow:hidden;transition:all .3s var(--ease);
}
.partner-focus:hover{box-shadow:0 20px 44px rgba(27,27,24,.13);border-color:var(--steel);border-top-color:var(--henkel-red)}

.partner-focus-main{display:grid;grid-template-columns:300px 1fr}

/* Panel de marca: fondo neutro para que el logo rojo/blanco de Henkel
   no dependa del color de la sección */
.partner-brand{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:34px 28px;background:var(--paper);border-right:1px solid var(--line);
}
.partner-brand img{width:100%;max-width:186px;height:auto;object-fit:contain}
.partner-brand .authorized{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);text-align:center;
  border:1px solid var(--line);border-radius:100px;padding:6px 14px;
}

.partner-body{padding:30px 32px;display:flex;flex-direction:column;gap:13px}
.partner-body h3{font-size:27px;color:var(--ink);letter-spacing:.02em}
.partner-body > p{font-size:14.5px;color:#4F4C43;max-width:64ch}

/* Líneas de producto: sustituyen a los tags genéricos de las tarjetas viejas */
.partner-lines{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.partner-lines li{
  background:var(--white);padding:15px 17px;
  display:grid;grid-template-columns:152px 1fr;gap:16px;align-items:baseline;
  transition:background .2s var(--ease);
}
.partner-lines li:hover{background:var(--paper)}
.partner-lines b{
  font-family:'Big Shoulders Display',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:19px;letter-spacing:.03em;color:var(--ink);
}
.partner-lines b sup{font-size:9px;vertical-align:super;letter-spacing:0}
.partner-lines span{font-size:13px;color:#55524A;line-height:1.55}

/* En esta tarjeta los tags van alineados a la izquierda, no centrados */
.partner-focus .partner-tags{justify-content:flex-start}
.partner-foot{
  margin-top:8px;padding-top:17px;border-top:1px solid var(--paper-2);
  display:flex;gap:10px;flex-wrap:wrap;
}

@media (max-width:900px){
  .partner-focus-main{grid-template-columns:1fr}
  .partner-brand{border-right:0;border-bottom:1px solid var(--line);padding:28px;flex-direction:row;gap:22px}
  .partner-brand img{max-width:150px}
  .partner-body{padding:26px 22px}
}
@media (max-width:620px){
  .partner-brand{flex-direction:column;gap:16px}
  .partner-lines li{grid-template-columns:1fr;gap:5px}
  .partner-foot .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- CTA final + Footer ----------
   Movidos a css/block.css — fuente única compartida con
   index.html y actega.html. No redefinir aquí. */
/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .app-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .header-nav{display:none}
  .burger{display:flex}
  .mega{min-width:auto;width:100%}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
  section{padding:54px 0}
}
@media (max-width:620px){
  .wrap{padding:0 18px}
  .daka-logo{height:30px}
  .header-actions .btn{display:none}
  .header-actions .btn.keep{display:inline-flex}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab{white-space:nowrap;padding:12px 16px}
  .hero-stats{gap:24px}
  .announce .wrap{font-size:10.5px;gap:10px}
}

/* ==========================================================
   HERO — MEJORA VISUAL (imagen de bodega)
   Solo se añaden estilos: no se reescribe ni renombra nada.
   Sistema de diseño reutilizado: var(--ink), var(--radius),
   var(--ease), var(--henkel-red), keyframe fadeUp existente.
   ========================================================== */
.hero .wrap{
  width:100%;
  padding-top:72px;
  padding-bottom:72px;
}

/* --- Capa de imagen + zoom muy sutil --- */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-media::before{
  content:"";position:absolute;inset:0;
  background-image:url("../assets/Daka-bodega-conlogos.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.03);
  transform-origin:60% 55%;
  animation:heroZoom 16s var(--ease) both;
  will-change:transform;
}
@keyframes heroZoom{from{transform:scale(1.03)}to{transform:scale(1)}}

/* --- Overlay: degradado desde la izquierda, en el azul de marca (--ink) --- */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(30,16,84,.92) 0%,
      rgba(30,16,84,.78) 35%,
      rgba(30,16,84,.28) 70%,
      rgba(30,16,84,0)   100%),
    linear-gradient(180deg,
      rgba(30,16,84,.34) 0%,
      rgba(30,16,84,0)   26%,
      rgba(30,16,84,0)   72%,
      rgba(30,16,84,.30) 100%);
}

/* Los detalles originales (glow rojo Henkel + retícula) quedan sobre la foto */
.hero::before{z-index:1}
.hero::after{z-index:1;opacity:.18}

/* --- Jerarquía tipográfica (mismas fuentes, solo ritmo) --- */
.hero-eyebrow{
  margin-bottom:24px;
  background:rgba(229,0,20,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hero h1{
  margin-bottom:24px;
  text-shadow:0 2px 30px rgba(15,8,44,.45);
}
.hero-sub{
  max-width:650px;
  color:rgba(251,250,246,.86);
  margin-bottom:38px;
  text-shadow:0 1px 18px rgba(15,8,44,.40);
}

/* --- Acciones: solo espaciado, los botones no cambian --- */
.hero-actions{gap:14px;align-items:center}
.hero .btn{transition:all .25s var(--ease)}
.hero .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(226,87,28,.34)}
.hero .btn-ghost-light:hover{transform:translateY(-2px)}

/* --- Estadísticas: tarjetas de vidrio --- */
.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:46px;
  max-width:920px;
}
.hero-stats b{margin-bottom:6px}

/* --- Entrada fade-up escalonada (reutiliza el keyframe fadeUp existente) --- */
.hero-eyebrow,
.hero h1,
.hero-sub,
.hero-actions,
.hero-stats{animation:fadeUp .8s var(--ease) both}
.hero h1{animation-delay:.09s}
.hero-sub{animation-delay:.18s}
.hero-actions{animation-delay:.27s}
.hero-stats{animation-delay:.36s}

/* --- Responsive del hero --- */
@media (max-width:1080px){
  .hero{min-height:82vh;min-height:82dvh}
  .hero-media::after{
    background:
      linear-gradient(90deg,
        rgba(30,16,84,.93) 0%,
        rgba(30,16,84,.82) 45%,
        rgba(30,16,84,.42) 78%,
        rgba(30,16,84,.12) 100%),
      linear-gradient(180deg,rgba(30,16,84,.34) 0%,rgba(30,16,84,0) 30%,rgba(30,16,84,.30) 100%);
  }
}
@media (max-width:900px){
  .hero{min-height:auto;padding:0}
  .hero .wrap{padding-top:58px;padding-bottom:56px}
  .hero-media::before{background-position:62% center}
  .hero-media::after{
    background:
      linear-gradient(90deg,rgba(30,16,84,.94) 0%,rgba(30,16,84,.86) 55%,rgba(30,16,84,.72) 100%),
      linear-gradient(180deg,rgba(30,16,84,.36) 0%,rgba(30,16,84,0) 34%,rgba(30,16,84,.34) 100%);
  }
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:36px}
}
@media (max-width:620px){
  .hero .wrap{padding-top:48px;padding-bottom:46px;text-align:center}
  .hero h1,.hero-sub{margin-left:auto;margin-right:auto}
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .hero-actions .btn{width:100%;flex:0 0 auto}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:left}
  .hero-stats div{padding:14px 14px 12px}
  .hero-stats b{font-size:26px}
}

/* --- Accesibilidad: sin movimiento --- */
@media (prefers-reduced-motion:reduce){
  .hero-media::before,
  .hero-eyebrow,.hero h1,.hero-sub,.hero-actions,.hero-stats{animation:none;transform:none}
  .hero-media::before{transform:scale(1)}
}

/* ==========================================================
   HERO — ALINEACIÓN IZQUIERDA (solo el hero)
   Libera el contenedor centrado de 1240px únicamente dentro
   del hero para que el texto arranque junto al borde.
   El resto del sitio conserva su .wrap intacto.
   ========================================================== */
.hero .wrap{
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding-left:clamp(18px,4.2vw,72px);
  padding-right:clamp(18px,4.2vw,72px);
}
@media (max-width:620px){
  .hero .wrap{padding-left:18px;padding-right:18px}
}

/* ==========================================================
   AUDITORÍA UX — ACCESIBILIDAD, CONTRASTE Y RENDIMIENTO
   Solo se añaden reglas al final: ninguna regla previa se
   reescribe, renombra ni elimina.
   ========================================================== */

/* --- 1. Skip link (WCAG 2.4.1 Bypass Blocks) --- */
.skip-link{
  position:absolute;left:8px;top:-60px;z-index:2000;
  background:var(--ink);color:var(--white);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;
  padding:12px 18px;border-radius:var(--radius);
  border:2px solid var(--white);
  transition:top .18s var(--ease);
}
.skip-link:focus{top:8px}

/* --- 2. Indicador de foco visible en TODO el sitio
       (WCAG 2.4.7 Focus Visible + 2.4.13 Focus Appearance) --- */
:focus-visible{
  outline:3px solid var(--henkel-red);
  outline-offset:3px;
  border-radius:var(--radius);
}
.hero :focus-visible,
.why :focus-visible,
.mega a:focus-visible{
  outline-color:#FF8A6B;      /* 4.6:1 sobre --ink / --graphite */
}

/* --- 3. Mega menú operable por teclado (WCAG 2.1.1) --- */
.nav-item .mega.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nav-trigger[aria-expanded="true"]{color:var(--orange);border-bottom-color:var(--orange)}
.nav-trigger[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-2px,-2px)}

/* --- 4. Navegación móvil real (antes: display inline por JS) --- */
@media (max-width:900px){
  .header-nav{display:none}
  .header-nav.is-open{display:block;border-top:1px solid var(--paper-2)}
  .header-nav.is-open .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .header-nav.is-open .nav-item{border-bottom:1px solid var(--paper-2)}
  .header-nav.is-open .nav-trigger{
    width:100%;justify-content:space-between;padding:15px 0;
    min-height:48px;                       /* objetivo táctil WCAG 2.5.8 */
  }
  .header-nav.is-open .mega{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;border-top:1px solid var(--paper-2);
    min-width:auto;width:100%;padding:6px 0 14px;
    display:none;pointer-events:auto;
  }
  .header-nav.is-open .mega.is-open{display:block}
  .header-nav.is-open .mega a{min-height:44px;align-items:center}
  .header-nav.is-open .nav-right{flex-direction:column;align-items:stretch;gap:10px;padding:16px 0}
  .header-nav.is-open .nav-pill{justify-content:center;min-height:44px;display:flex;align-items:center}
}

/* --- 5. Contraste de texto (WCAG 1.4.3 — mínimo 4.5:1) --- */
.metric span{color:#67634F}                 /* antes #7E7A6C = 3.7:1 → 5.6:1 */
.quote footer div span{color:#67634F}       /* antes #8C8878 = 3.2:1 → 5.6:1 */
/* ◄ ELIMINADO: .logo-ph span — el selector ya no existe */
.cat-card p{color:#4F4C43}                  /* ◄ MODIFICADO: se quitó .partner-card p del selector */

/* --- 6. Tarjetas de estadística: plano industrial, sin glassmorphism
       (coherente con .metric-grid y .why-card del sistema) --- */
.hero-stats div{
  background:rgba(23,12,66,.62);
  border:1px solid rgba(255,255,255,.16);
  border-top:2px solid var(--henkel-red);
  border-radius:var(--radius);
  color:rgba(251,250,246,.84);
  padding:16px 18px 15px;
  line-height:1.35;
  transition:background .28s var(--ease),border-color .28s var(--ease);
}
.hero-stats div:hover{
  background:rgba(23,12,66,.78);
  border-color:rgba(255,255,255,.28);
  border-top-color:var(--henkel-red);
}

/* --- 8. Objetivos táctiles mínimos (WCAG 2.5.8 — 24×24 CSS px) --- */
.burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}

/* --- 9. Errores de formulario solo tras interacción del usuario
       (NN/g: prevención de errores — antes marcaba en rojo al teclear) --- */

/* --- 10. FAQ visible (respalda el bloque FAQPage de JSON-LD) --- */
.faq{background:var(--white);border-top:1px solid var(--line)}
.faq-list{max-width:860px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:22px 0;font-family:'Big Shoulders Display',sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:.02em;font-size:21px;line-height:1.1;
  color:var(--ink);transition:color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--orange)}
.faq-item summary::after{
  content:"";flex-shrink:0;margin-left:auto;margin-top:4px;
  width:10px;height:10px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item .faq-a{padding:0 0 24px;font-size:15px;color:#4F4C43;max-width:72ch;line-height:1.65}
.faq-num{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--steel);font-weight:600;margin-top:5px;flex-shrink:0}

/* --- 11. Respeto por prefers-reduced-motion en todo el sitio
       (WCAG 2.3.3 Animation from Interactions) --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
/* ==========================================================
   AUDITORÍA UX — RONDA 2
   Fases 1–4 aprobadas. Los colores de marca (--orange, --ink,
   --henkel-red) NO se modifican: la marca queda intacta.
   ========================================================== */

/* --- H-1 · Compensación del header sticky en navegación por ancla --- */
[id]{scroll-margin-top:112px}
@media (max-width:900px){[id]{scroll-margin-top:84px}}

/* --- C-2 · Barra de anuncio con datos de contacto --- */
.announce .dismiss{padding:6px 10px;min-height:24px;display:inline-flex;align-items:center;gap:5px}
.announce strong{font-weight:600;letter-spacing:.06em}

/* --- H-11 · Migas de pan visibles (respaldan el BreadcrumbList del JSON-LD) --- */
.breadcrumb{background:var(--white);border-bottom:1px solid var(--line)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0;margin:0;list-style:none}
.breadcrumb li{list-style:none;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#5F5C4A}
.breadcrumb li+li::before{content:"/";margin-right:8px;color:#8C8878}
.breadcrumb a{color:var(--steel);border-bottom:1px solid transparent;padding:4px 0}
.breadcrumb a:hover{border-bottom-color:var(--steel)}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:600}

/* --- H-3 · Destino visible en cada tarjeta de categoría (olor a información) --- */
.cat-map{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#5F5C4A;
  border-top:1px solid var(--paper-2);padding-top:9px;margin-top:2px;
}
.cat-map b{color:var(--ink);font-weight:600}

/* ◄ C-1 · ELIMINADO: .tech-panel, .tech-panel::after, .tech-panel .tech-code,
   .tech-panel .tech-name, .tech-panel--fmt y .tech-panel--fmt .tech-code —
   el panel técnico provisional ya no tiene ningún uso en henkel.html: las
   .app-card y las .bulk-card usan fotografía real. Su sustituto es .fmt-media. */

/* --- H-4 · Matriz de compatibilidad tecnología × formato --- */
.fmt-matrix{margin-top:34px}
.fmt-matrix h3{font-size:24px;color:var(--ink);letter-spacing:.02em;margin-bottom:8px}
.fmt-matrix .matrix-note{font-size:13px;color:#55524A;max-width:70ch;margin-bottom:18px}
.matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
table.fmt-table{border-collapse:collapse;width:100%;min-width:720px}
table.fmt-table caption{text-align:left;padding:14px 16px 0;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5F5C4A}
table.fmt-table th,table.fmt-table td{border-bottom:1px solid var(--line);padding:13px 16px;text-align:left;font-size:13px;color:#4F4C43;vertical-align:top}
table.fmt-table thead th{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--white);background:var(--ink);border-bottom:0;font-weight:600;
}
table.fmt-table tbody th{font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;color:var(--ink);white-space:nowrap}
table.fmt-table tbody tr:last-child th,table.fmt-table tbody tr:last-child td{border-bottom:0}
table.fmt-table tbody tr:hover th,table.fmt-table tbody tr:hover td{background:var(--paper)}
.yes{color:#1F6B3A;font-weight:600}
.no{color:#5F5C4A}
.ask{color:var(--steel);font-weight:600}

/* --- H-5 · Líneas Henkel relacionadas en cada tarjeta de aplicación --- */
.tag-line{background:var(--white);border-color:var(--steel);color:var(--ink);font-weight:600}



@media (max-width:620px){
  /* ◄ ELIMINADO: .tech-panel y .tech-panel .tech-code — clase retirada. */
  .fmt-matrix .matrix-note{font-size:12.5px}
}

.fmt-cta{margin-top:6px}

/* ==========================================================
   C-1 bis · FOTOGRAFÍA REAL DE FORMATOS
   ◄ AÑADIDO: sustituye a .tech-panel--fmt dentro de .bulk-card.
     El encuadre se resuelve en el archivo, no en CSS: las fotos
     de /assets ya vienen compuestas a 4:3 (1000×750) con el
     envase centrado y ~8% de aire arriba y abajo sobre el fondo
     de estudio. Por eso aquí no hacen falta aspect-ratio,
     object-fit ni alturas en porcentaje — la imagen define su
     propia proporción y el marco solo aporta borde y recorte.
     Reutiliza --line, --radius y --ease; no introduce tokens nuevos.
   ========================================================== */
.fmt-media{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  /* Blanco de estudio de las fotos. Es un valor local, no un token de marca:
     ajústalo si cambias la sesión fotográfica. */
  background:var(--fmt-media-bg,#F6F6F4);
}
.fmt-media img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .45s var(--ease);
  will-change:transform;
}
.bulk-card:hover .fmt-media img,
.bulk-card:focus-within .fmt-media img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
  .bulk-card:hover .fmt-media img,
  .bulk-card:focus-within .fmt-media img{transform:none}
}


/* ==========================================================
   VOLVER ARRIBA
   Mismo componente que index.html y actega.html: círculo azul
   DAKA con borde lila y naranja al pasar el cursor. Se define
   aquí porque henkel.html no carga style.css.
   ========================================================== */
#backTop{
  position:fixed;
  right:calc(24px + env(safe-area-inset-right));
  bottom:calc(24px + env(safe-area-inset-bottom));
  width:48px;height:48px;border-radius:50%;
  background:var(--ink);border:2px solid #5C4E96;color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:16px;line-height:1;
  cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
  /* Por debajo del modal (1000) y de la cabecera fija (200). */
  z-index:90;
}
#backTop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
#backTop:hover{background:var(--orange);border-color:var(--orange)}
#backTop:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  #backTop{transition:opacity .01ms}
}

/* =============================================================================
   PANTALLAS MUY ESTRECHAS (≤360 px)
   .btn lleva white-space:nowrap, correcto para los rótulos cortos. Pero
   «Hablar con un ingeniero de aplicación →» mide 356 px y a 320 px se salía
   del viewport: body{overflow-x:hidden} lo recortaba y la flecha desaparecía.
   Solo por debajo de 360 px se permite que el rótulo use dos líneas; de 361 px
   en adelante nada cambia.
   ========================================================================== */
@media (max-width:360px){
  .btn{white-space:normal; text-align:center; line-height:1.35}
}