/* =========================================================
   Mawijo · Sistema de diseño (Fase 1) + componentes (Fase 2)
   ========================================================= */

/* Fuentes autoalojadas (subconjunto latin de Google Fonts). Rutas relativas a esta hoja. */
/* 4 pesos: Archivo Black 400 (display), Geist 400/700 (cuerpo/negrita), JetBrains Mono 500 (mono).
   Los pesos eliminados (Geist 500/600, JBM 400/700) mapean al peso disponible más cercano. */
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ArchivoBlack-400.woff2) format("woff2");}
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Geist-400.woff2) format("woff2");}
@font-face{font-family:"Geist";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Geist-700.woff2) format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/JetBrainsMono-500.woff2) format("woff2");}

:root{
  --ink:#0f0f0f; --paper:#ffffff; --warm:#f2ede8; --orange:#ed6e02; --orange-ink:#b65500; --yellow:#f5c400;
  --ink-80:#2a2a2a; --ink-60:#5a5a5a; --ink-40:#8a8a8a; --ink-20:#c9c5c0;
  --warm-line:#e3ddd5;
  /* Grises sobre fondo oscuro */
  --ink-on-dark:#d6d3cf; --ink-muted-dark:#a4a09b; --line-dark:#1f1f1f;

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
  --s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --r-1:2px;--r-2:4px;--r-3:8px;
  --max:1280px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{font-family:"Geist",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.55;}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--orange);color:var(--paper);}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;}

.display{font-family:"Archivo Black","Helvetica Neue",sans-serif;letter-spacing:-0.03em;line-height:0.95;}
.label{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s-7);}
@media(max-width:720px){.wrap{padding:0 var(--s-5);}}

/* Skip link accesibilidad */
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--ink);padding:12px 16px;font-weight:600;z-index:100;}
.skip:focus{left:8px;top:8px;}

/* ============= NAV ============= */
.nav{position:sticky;top:0;z-index:40;background:var(--ink);color:var(--paper);border-bottom:1px solid var(--line-dark);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) var(--s-7);max-width:var(--max);margin:0 auto;gap:var(--s-5);}
@media(max-width:720px){.nav-inner{padding:var(--s-3) var(--s-5);}}
.logo{font-family:"Archivo Black",sans-serif;font-size:22px;letter-spacing:-0.04em;display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;}
.logo .dot{width:10px;height:10px;background:var(--orange);border-radius:50%;display:inline-block;}
.nav-links{display:flex;gap:var(--s-6);align-items:center;}
.nav-links a{text-decoration:none;color:var(--ink-on-dark);font-size:14px;font-weight:500;}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--paper);}
.nav-links a[aria-current="page"]{border-bottom:2px solid var(--orange);padding-bottom:2px;}
.nav-cta{display:inline-flex;align-items:center;gap:8px;}
.nav-toggle{display:none;background:transparent;border:1.5px solid var(--ink-80);color:var(--paper);padding:10px 12px;min-height:44px;border-radius:var(--r-2);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:3px;}
.nav-toggle .bars span{width:18px;height:2px;background:currentColor;display:block;}
@media(max-width:900px){
  .nav-links{display:none;}
  .nav-toggle{display:inline-flex;align-items:center;gap:8px;}
  .nav.open .nav-links{display:flex;flex-direction:column;gap:var(--s-3);position:absolute;top:100%;left:0;right:0;background:var(--ink);padding:var(--s-5) var(--s-5) var(--s-6);border-bottom:1px solid var(--line-dark);}
  .nav.open .nav-links a{font-size:16px;padding:11px 0;min-height:44px;display:flex;align-items:center;}
}
@media(max-width:560px){.nav-cta{display:none;}}

/* ============= BREADCRUMB ============= */
.breadcrumb{background:var(--ink);color:var(--ink-muted-dark);padding:var(--s-3) 0;border-bottom:1px solid var(--line-dark);}
.breadcrumb .wrap{display:flex;gap:8px;align-items:center;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;}
.breadcrumb a{color:var(--ink-muted-dark);text-decoration:none;}
.breadcrumb a:hover{color:var(--paper);}
.breadcrumb .sep{color:var(--ink-60);}
.breadcrumb [aria-current="page"]{color:var(--paper);}

/* ============= BUTTONS ============= */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Geist",sans-serif;font-weight:600;font-size:16px;padding:16px 22px;border-radius:var(--r-2);border:0;cursor:pointer;text-decoration:none;transition:background .15s ease,color .15s ease,transform .12s ease;line-height:1;}
.btn-primary{background:var(--orange);color:var(--ink);}
.btn-primary:hover{background:#ff7a08;}
.btn-secondary{background:transparent;color:var(--paper);border:2px solid var(--paper);padding:14px 20px;}
.btn-secondary:hover{background:var(--paper);color:var(--ink);}
.btn-secondary.dark{color:var(--ink);border-color:var(--ink);}
.btn-secondary.dark:hover{background:var(--ink);color:var(--paper);}
.btn .arrow{width:14px;height:14px;display:inline-block;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:2px;}
.btn-sm{padding:10px 14px;font-size:14px;}
.btn-block{display:flex;width:100%;justify-content:center;}
/* Enlace-acción sobrio (A6): alterna con los botones para no repetir primarios */
.text-cta{display:inline-flex;align-items:center;gap:8px;font-family:"Geist",sans-serif;font-weight:600;font-size:16px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:2px;transition:color .15s ease,gap .15s ease;}
.text-cta:hover{color:var(--orange);gap:12px;}
.ink .text-cta{color:var(--paper);}
.ink .text-cta:hover{color:var(--orange);}

/* ============= HERO (foto a pantalla completa) ============= */
.hero{
  position:relative;background:var(--ink);color:var(--paper);overflow:hidden;
  min-height:clamp(520px,82vh,760px);display:flex;align-items:center;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
/* Velo de legibilidad — scrim funcional, no degradado de marca */
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(15,15,15,.88) 0%, rgba(15,15,15,.72) 40%, rgba(15,15,15,.38) 100%);
}
.hero-inner{
  position:relative;z-index:2;width:100%;
  padding-top:var(--s-8);padding-bottom:var(--s-8);
}
.hero-kicker{color:var(--paper);opacity:.85;margin:0 0 var(--s-4);}
.hero-title{
  font-size:clamp(34px,3.8vw,56px);line-height:.98;letter-spacing:-0.03em;
  margin:0;max-width:18ch;
}
.hero-title .orange{color:var(--orange);}
.hero .sub{
  margin-top:var(--s-5);font-size:clamp(17px,1.5vw,19px);
  color:#eceae6;max-width:50ch;line-height:1.45;
}
.hero .cta-row{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-6);align-items:center;}
.hero-trust{
  display:flex;align-items:center;gap:var(--s-3);margin:var(--s-5) 0 0;
  color:#cfccc6;font-family:"JetBrains Mono",monospace;
  font-size:13px;text-transform:uppercase;letter-spacing:.1em;
}
/* Microcopy de refuerzo bajo los CTA principales (speed-to-lead) */
.cta-microcopy{
  margin-top: var(--s-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-60);
  max-width: 44ch;
}
/* Sobre fondos oscuros (hero home + page-hero de servicios) el texto va claro */
.hero .cta-microcopy,
.page-hero .cta-microcopy{ color:#a4a09b; }
.final-cta .cta-microcopy{ color: var(--ink-60); }
.hero .pulse{position:relative;width:8px;height:8px;background:var(--yellow);border-radius:50%;flex-shrink:0;}
.hero .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--yellow);animation:pulse 2.2s ease-out infinite;}
@keyframes pulse{
  0%{transform:scale(1);opacity:0.6;}
  70%{transform:scale(4);opacity:0;}
  100%{transform:scale(4);opacity:0;}
}
@media(max-width:720px){
  .hero{min-height:78vh;}
  /* En móvil el velo sube de abajo arriba para que el texto apoye en la base */
  .hero-scrim{background:linear-gradient(0deg, rgba(15,15,15,.92) 0%, rgba(15,15,15,.74) 45%, rgba(15,15,15,.55) 100%);}
}

/* Page hero (más compacto, para servicios y páginas internas) */
.page-hero{background:var(--ink);color:var(--paper);padding:var(--s-7) 0 var(--s-7);}
.page-hero .meta{color:var(--orange);font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:var(--s-4);}
.page-hero h1{font-family:"Archivo Black",sans-serif;font-size:clamp(36px,5vw,72px);letter-spacing:-0.03em;line-height:1;margin:0;}
.page-hero h1 .orange{color:var(--orange);}
.page-hero .sub{margin-top:var(--s-5);font-size:clamp(16px,1.5vw,19px);color:var(--ink-on-dark);max-width:60ch;line-height:1.5;}
.page-hero .cta-row{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-6);align-items:center;}

/* ============= SECTIONS ============= */
section.block{padding:var(--s-9) 0;}
section.block.warm{background:var(--warm);}
section.block.ink{background:var(--ink);color:var(--paper);}
@media(max-width:720px){section.block{padding:var(--s-7) 0;}}

.sec-head{display:block !important;margin-bottom:var(--s-7);}
.sec-head > div{display:contents;}
.sec-head .num{color:var(--ink-60);font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:var(--s-3);}
.ink .sec-head .num{color:var(--ink-40);}
.sec-head h2{font-family:"Archivo Black",sans-serif;font-size:clamp(28px,3.4vw,48px);letter-spacing:-0.03em;line-height:1;margin:0 0 var(--s-5);max-width:18ch;}
.sec-head h2 .orange{color:var(--orange);}
.sec-head .kicker{display:block;max-width:60ch;margin:0;font-family:"Geist",sans-serif;font-size:19px;line-height:1.5;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-80);}
.ink .sec-head .kicker{color:#c9c5c0;}
@media(max-width:720px){
  .sec-head h2{max-width:none;}
  .sec-head .kicker{font-size:17px;}
}

/* ============= CATÁLOGO (cards) ============= */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--warm-line);border:1px solid var(--warm-line);}
.ink .cat-grid{background:var(--ink-80);border-color:var(--ink-80);}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:540px){.cat-grid{grid-template-columns:1fr;}}
.cat{background:var(--paper);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);min-height:280px;position:relative;transition:background .15s ease;text-decoration:none;color:inherit;}
.cat:hover{background:#fffaf3;}
.ink .cat{background:var(--ink);color:var(--paper);}
.ink .cat:hover{background:#1a1a1a;}
.cat .num{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-60);letter-spacing:0.14em;text-transform:uppercase;}
.ink .cat .num{color:var(--ink-40);}
/* Placeholder calmado (A1): superficie plana de papel crudo + etiqueta mono, sin trama diagonal. */
.cat .icon{width:100%;aspect-ratio:4/3;background:var(--warm);border:1px solid var(--warm-line);border-radius:var(--r-1);display:flex;align-items:center;justify-content:center;color:var(--ink-60);font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;overflow:hidden;padding:var(--s-5);}
img.icon{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 12px 20px rgba(15,15,15,.12));}
.ink .cat .icon{background:#171717;border-color:var(--line-dark);color:var(--ink-muted-dark);}
.cat h3{font-family:"Archivo Black",sans-serif;font-size:22px;letter-spacing:-0.02em;margin:0;line-height:1;}
.cat p{margin:0;color:var(--ink-80);font-size:14px;line-height:1.45;}
.ink .cat p{color:#c9c5c0;}
.cat .arrow-out{margin-top:auto;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--orange-ink);letter-spacing:0.14em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;}
.ink .cat .arrow-out{color:var(--orange);}

.cat-foot{margin-top:var(--s-6);display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);flex-wrap:wrap;}
.cat-foot p{margin:0;font-size:15px;color:var(--ink-80);max-width:56ch;}
.ink .cat-foot p{color:#c9c5c0;}

/* ============= OTROS SERVICIOS (cross-sell, 4 columnas) ============= */
.otros-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
@media (max-width: 1100px){ .otros-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .otros-grid{ grid-template-columns: 1fr; gap: var(--s-4); } }

.otro-item{
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-2);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.otro-item:hover{
  transform: translateY(-3px);
  box-shadow: 5px 5px 0 var(--ink);
}

.otro-media{
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--warm);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
}
.otro-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.otro-item:hover .otro-media img{ transform: scale(1.05); }

.otro-tag{
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
  background: var(--paper);
  padding: 3px 7px;
  border-radius: var(--r-1);
  border: 1px solid var(--ink);
}

.otro-item .otro-body{
  padding: var(--s-4) var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.otro-item h3{
  font-family: "Archivo Black", sans-serif;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
.otro-item p{
  margin: 0;
  color: var(--ink-80);
  font-size: 14px;
  line-height: 1.5;
  max-width: 32ch;
}
.otro-item .float-link{
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--warm-line);
  font-size: 12px;
}

/* ============= SUBTIPOS (servicios) — imagen flotando sobre crema, 2 columnas =============
   La foto se ve entera (object-fit:contain) sobre fondo --warm, como los mockups de marca. */
.subtipos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6);}
@media (max-width:720px){.subtipos-grid{grid-template-columns:1fr;gap:var(--s-5);}}

.subtipo{background:var(--paper);border:1px solid var(--ink);border-radius:var(--r-2);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;}
.subtipo:hover{transform:translateY(-3px);box-shadow:6px 6px 0 var(--ink);}

.subtipo-media{position:relative;aspect-ratio:4/3;background:var(--warm);border-bottom:1px solid var(--ink);padding:var(--s-5);display:flex;align-items:center;justify-content:center;}
.subtipo-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 12px 20px rgba(15,15,15,.12));}
/* Hueco sin foto: etiqueta tipográfica grande "flotando" sobre crema. */
.subtipo-media--ph::after{content:attr(data-label);font-family:"Archivo Black",sans-serif;font-size:clamp(34px,6vw,56px);letter-spacing:-0.03em;line-height:1;color:var(--ink);background:var(--paper);padding:8px 18px;border:2px solid var(--ink);border-radius:var(--r-1);text-transform:uppercase;}

.subtipo-tag{position:absolute;top:var(--s-4);left:var(--s-4);z-index:2;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-60);background:var(--paper);padding:4px 8px;border-radius:var(--r-1);border:1px solid var(--ink);}

.subtipo-body{padding:var(--s-5) var(--s-5) var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);flex:1;}
.subtipo h3{font-family:"Archivo Black",sans-serif;font-size:28px;letter-spacing:-0.02em;line-height:1.05;margin:0;max-width:22ch;}
.subtipo p{margin:0;color:var(--ink-80);font-size:16px;line-height:1.55;max-width:50ch;}
.subtipo-foot{margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--warm-line);font-family:"Geist",sans-serif;font-weight:600;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--orange-ink);display:inline-flex;align-items:center;gap:8px;}

/* ============= PLACEHOLDERS DE FOTO (calmados, no trama) =============
   Reemplazan los recuadros de trama diagonal mientras no hay foto real.
   Superficie plana (tinta plana) + etiqueta mono discreta. Aspect-ratio fijo => sin CLS.
   Cuando llegue la foto: sustituir el <div class="ph ..."> por <img loading="lazy" alt="…">. */
.ph{position:relative;display:flex;align-items:flex-end;justify-content:flex-start;background:var(--warm);border:1px solid var(--warm-line);border-radius:var(--r-1);overflow:hidden;}
.ink .ph{background:#171717;border-color:var(--line-dark);}
.warm .ph{background:#ece5dc;}
.ph .ph-tag{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-60);background:rgba(255,255,255,.66);padding:4px 8px;margin:var(--s-3);border-radius:var(--r-1);}
.ink .ph .ph-tag{color:var(--ink-on-dark);background:rgba(0,0,0,.4);}
.ph-16x9{aspect-ratio:16/9;}
.ph-4x3{aspect-ratio:4/3;}
.ph-3x2{aspect-ratio:3/2;}
.ph-1x1{aspect-ratio:1/1;}
img.media{width:100%;height:100%;object-fit:cover;display:block;}

/* ============= CATÁLOGO FLOTANTE (home · A7) =============
   Producto recortado "flotando" sobre crudo, sin retícula gris ni caja.
   El resto del sitio conserva la retícula de hairlines (.cat-grid). */
.float-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);}
@media(max-width:1100px){.float-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.float-grid{grid-template-columns:1fr;}}
/* Variante 2-col fija (sección "Trabajos tipo" de las páginas de servicio) */
.float-grid--2{grid-template-columns:repeat(2,1fr);}
@media(max-width:720px){.float-grid--2{grid-template-columns:1fr;}}

.float-item{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--ink);border-radius:var(--r-2);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .25s ease, box-shadow .25s ease;isolation:isolate;}
.float-item:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--ink);}

.float-num{position:absolute;top:var(--s-4);right:var(--s-4);font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.1em;color:var(--ink-60);background:var(--warm);padding:4px 8px;border-radius:var(--r-1);z-index:2;}

.float-media{position:relative;aspect-ratio:4/3;background:var(--warm);overflow:hidden;border-bottom:1px solid var(--ink);padding:var(--s-5);display:flex;align-items:center;justify-content:center;}
.float-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.float-media--ph{display:flex;align-items:center;justify-content:center;padding:var(--s-5);}
.float-media--ph::after{content:attr(data-label);font-family:"Archivo Black",sans-serif;font-size:clamp(28px,5vw,48px);letter-spacing:-0.03em;line-height:1;color:var(--ink);background:var(--paper);padding:8px 18px;border:2px solid var(--ink);border-radius:var(--r-1);text-transform:uppercase;}

.float-body{padding:var(--s-5) var(--s-5) var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);flex:1;}
.float-eyebrow{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--orange);font-weight:700;}
.float-item h3{font-family:"Archivo Black",sans-serif;font-size:26px;letter-spacing:-0.02em;line-height:1;margin:0;position:relative;display:inline-block;}
.float-item h3::after{content:"";display:block;width:0;height:3px;background:var(--orange);margin-top:8px;transition:width .3s ease;}
.float-item:hover h3::after{width:56px;}

.float-item p{margin:0;color:var(--ink-80);font-size:15.5px;line-height:1.5;}
.float-link{margin-top:auto;font-family:"Geist",sans-serif;font-weight:600;font-size:14px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px;padding-top:var(--s-3);border-top:1px solid var(--warm-line);}
.float-link .arrow-mini{display:inline-block;transition:transform .25s ease;color:var(--orange);font-weight:700;}
.float-item:hover .float-link .arrow-mini{transform:translateX(6px);}

/* ============= CLIENTES (logo wall calmado) =============
   Logos en escala de grises a baja opacidad (una voz baja); color al pasar el ratón.
   Sustituir los PNG de assets/clientes/ por los logos reales (PNG/SVG transparente). */
.clients{
  padding: var(--s-7) 0;
  border-top: 1px solid var(--warm-line);
  border-bottom: 1px solid var(--warm-line);
  background: var(--paper);
  overflow: hidden;
}
.clients-eyebrow{
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  text-align: center;
  margin: 0 0 var(--s-5);
}

.clients-marquee{
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.clients-track{
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  -webkit-animation: marquee 45s linear infinite;
          animation: marquee 45s linear infinite;
  will-change: transform;
}
.clients:hover .clients-track,
.clients:focus-within .clients-track{
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.clients-row{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--s-7);
  list-style: none;
  margin: 0;
  padding: 0 var(--s-7) 0 0;
}

.logo-slot{
  flex: 0 0 auto;
  width: 160px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-3);
  box-sizing: border-box;
}
.logo-slot img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  opacity: .55;
  transition: filter .25s ease, opacity .25s ease;
}
.logo-slot:hover img{ filter: none; opacity: 1; }

/* Ajustes finos por logo problemático */
.logo-slot img[data-logo="takai-motor"],
.logo-slot img[data-logo="rb-dental"],
.logo-slot img[data-logo="img-licensing"]{
  transform: scale(0.85);
}

@-webkit-keyframes marquee{
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .clients-track{
    -webkit-animation: none;
            animation: none;
  }
  .clients-marquee{ overflow-x: auto; }
}

@media (max-width: 720px){
  .logo-slot{ width: 120px; height: 44px; }
  .clients-row{ gap: var(--s-6); padding-right: var(--s-6); }
  .clients-track{
    -webkit-animation-duration: 30s;
            animation-duration: 30s;
  }
}

/* ============= STEPS (proceso) — superficie clara (A3) ============= */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--warm-line);border:1px solid var(--warm-line);}
@media(max-width:900px){.steps{grid-template-columns:1fr;}}
.step{background:var(--paper);padding:var(--s-7) var(--s-6);display:flex;flex-direction:column;gap:var(--s-5);}
.warm .step{background:var(--paper);}
.step .num{font-family:"Archivo Black",sans-serif;font-size:56px;color:var(--ink-20);line-height:0.85;letter-spacing:-0.04em;}
.step h3{font-family:"Archivo Black",sans-serif;font-size:24px;letter-spacing:-0.02em;margin:0;line-height:1.05;}
.step p{margin:0;color:var(--ink-80);font-size:16px;line-height:1.5;}
.step .when{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--orange-ink);letter-spacing:0.14em;text-transform:uppercase;margin-top:auto;padding-top:var(--s-5);border-top:1px solid var(--warm-line);}

/* ============= POR QUÉ MAWIJO ============= */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--warm-line);background:var(--paper);}
@media(max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:540px){.why-grid{grid-template-columns:1fr;}}
.why{padding:var(--s-7) var(--s-6);border-right:1px solid var(--warm-line);border-bottom:1px solid var(--warm-line);display:flex;flex-direction:column;gap:var(--s-4);}
.why:nth-child(4n){border-right:0;}
@media(max-width:900px){
  .why:nth-child(4n){border-right:1px solid var(--warm-line);}
  .why:nth-child(2n){border-right:0;}
}
@media(max-width:540px){.why{border-right:0!important;}}
.why .big{font-family:"Archivo Black",sans-serif;font-size:44px;line-height:0.9;letter-spacing:-0.04em;color:var(--ink);margin-bottom:var(--s-2);}
.why .big.accent{color:var(--orange);}
.why h3{font-family:"Archivo Black",sans-serif;font-size:20px;letter-spacing:-0.015em;margin:0;line-height:1.1;}
.why p{margin:0;font-size:15px;color:var(--ink-80);line-height:1.5;}
.why em{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-60);letter-spacing:0.12em;text-transform:uppercase;margin-top:auto;padding-top:var(--s-3);}

/* ============= MID CTA ============= */
.mid-cta{background:var(--ink);color:var(--paper);padding:var(--s-9) 0;}
.mid-cta-inner{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s-7);align-items:center;}
@media(max-width:900px){.mid-cta-inner{grid-template-columns:1fr;}}
.mid-cta h2{font-family:"Archivo Black",sans-serif;font-size:clamp(28px,3.4vw,48px);letter-spacing:-0.03em;line-height:1.02;margin:0;}
.mid-cta h2 .orange{color:var(--orange);}
.mid-cta .right{display:flex;flex-direction:column;gap:var(--s-4);align-items:flex-start;}
.mid-cta p{color:#c9c5c0;font-size:16px;margin:0;}
/* Variante clara (A3): callout sobre crudo en vez de bloque negro extra */
.mid-cta.light{background:var(--warm);color:var(--ink);}
.mid-cta.light p{color:var(--ink-80);}

/* ============= ARQUETIPOS (para quién) ============= */
.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);}
@media(max-width:900px){.arch-grid{grid-template-columns:1fr;}}
.arch{background:var(--paper);border:1px solid var(--warm-line);padding:var(--s-7);display:flex;flex-direction:column;gap:var(--s-4);position:relative;}
.arch .tag{align-self:flex-start;background:var(--yellow);color:var(--ink);font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-1);font-weight:700;}
.arch h3{font-family:"Archivo Black",sans-serif;font-size:24px;letter-spacing:-0.02em;margin:0;line-height:1.05;}
.arch p.lede{margin:0;font-size:16px;line-height:1.5;color:var(--ink-80);}
.arch ul{margin:0;padding:0;list-style:none;font-size:14px;color:var(--ink);border-top:1px solid var(--warm-line);padding-top:var(--s-4);margin-top:var(--s-3);}
.arch ul li{padding:6px 0 6px 18px;position:relative;}
.arch ul li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:2px;background:var(--orange);}

/* ============= TESTIMONIOS ============= */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);}
@media(max-width:900px){.test-grid{grid-template-columns:1fr;}}
.tst{background:var(--paper);border:1px solid var(--warm-line);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-5);}
.tst .mark{font-family:"Archivo Black",sans-serif;color:var(--orange);font-size:56px;line-height:0.4;}
.tst blockquote{margin:0;font-size:17px;line-height:1.5;letter-spacing:-0.005em;}
.tst .who{display:flex;align-items:center;gap:var(--s-4);border-top:1px solid var(--warm-line);padding-top:var(--s-4);margin-top:auto;}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--warm);border:1px solid var(--warm-line);display:flex;align-items:center;justify-content:center;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--ink-60);text-transform:uppercase;flex-shrink:0;}
.who-name{font-weight:600;font-size:15px;}
.who-role{font-size:13px;color:var(--ink-60);}

/* ============= FAQ ============= */
.faq-wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s-7);}
@media(max-width:900px){.faq-wrap{grid-template-columns:1fr;}}
.faq{background:var(--paper);border:1px solid var(--warm-line);}
.faq details{border-bottom:1px solid var(--warm-line);}
.faq details:last-child{border-bottom:0;}
.faq summary{display:flex;justify-content:space-between;align-items:center;padding:var(--s-5) var(--s-6);cursor:pointer;list-style:none;font-family:"Geist",sans-serif;font-weight:600;font-size:17px;gap:var(--s-4);}
.faq summary::-webkit-details-marker{display:none;}
.faq .toggle{width:28px;height:28px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Archivo Black",sans-serif;font-size:18px;line-height:1;flex-shrink:0;}
.faq details[open]{background:var(--warm);}
.faq details[open] .toggle{background:var(--orange);color:var(--paper);border-color:var(--orange);}
.faq details[open] .toggle .plus{display:none;}
.faq details:not([open]) .toggle .minus{display:none;}
.faq .a{padding:0 var(--s-6) var(--s-6);color:var(--ink-80);max-width:60ch;font-size:15px;line-height:1.55;}

/* ============= FINAL CTA ============= */
.final-cta{background:var(--orange);color:var(--ink);padding:var(--s-10) 0;position:relative;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);}
.final-cta .wrap{display:flex;flex-direction:column;gap:var(--s-7);}
.final-cta h2{font-family:"Archivo Black",sans-serif;font-size:clamp(40px,5vw,72px);letter-spacing:-0.035em;line-height:0.95;margin:0;}
.final-cta h2 .stroke{-webkit-text-stroke:2px var(--ink);color:transparent;}
.final-cta p{font-size:clamp(17px,1.5vw,20px);max-width:50ch;margin:0;line-height:1.45;}
.final-cta .row{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;border-top:1.5px solid var(--ink);padding-top:var(--s-6);margin-top:var(--s-5);}
.final-cta .row .btn{background:var(--ink);color:var(--paper);padding:20px 28px;font-size:18px;}
.final-cta .row .btn:hover{background:#000;}
.final-cta .row .meta{font-family:"JetBrains Mono",monospace;font-size:13px;text-transform:uppercase;letter-spacing:0.12em;}
.final-cta .row .meta strong{color:var(--ink);font-weight:700;}
@media(max-width:720px){.final-cta{padding:var(--s-9) 0;}}

/* Marquee eliminado (A4): la banda amarilla animada a sangre aportaba ruido; sus promesas ya viven en hero y "por qué". */

/* ============= FOOTER ============= */
footer{background:var(--ink);color:var(--paper);padding:var(--s-9) 0 var(--s-6);}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--s-7);}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.foot-grid{grid-template-columns:1fr;}}
.foot-grid h3{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-40);margin:0 0 var(--s-4);font-weight:500;}
.foot-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:15px;}
.foot-grid a{text-decoration:none;color:var(--ink-on-dark);}
.foot-grid a:hover{color:var(--orange);}
.nap{font-style:normal;color:var(--ink-on-dark);font-size:15px;line-height:1.6;}
.nap strong{color:var(--paper);font-weight:600;display:block;font-size:17px;margin-bottom:6px;}
.foot-logo{font-family:"Archivo Black",sans-serif;font-size:28px;letter-spacing:-0.04em;display:flex;align-items:center;gap:8px;margin-bottom:var(--s-5);text-decoration:none;color:inherit;}
.foot-logo .dot{width:12px;height:12px;background:var(--orange);border-radius:50%;}
.foot-bottom{border-top:1px solid var(--line-dark);margin-top:var(--s-8);padding-top:var(--s-5);display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-muted-dark);}
.foot-bottom a{color:var(--ink-muted-dark);text-decoration:none;}
.foot-bottom a:hover{color:var(--paper);}

/* ============= WHATSAPP FLOTANTE ============= */
.wa-float{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,0.18),0 2px 6px rgba(0,0,0,0.12);z-index:50;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,0.22),0 4px 8px rgba(0,0,0,0.14);}
.wa-float svg{width:28px;height:28px;display:block;}
@media(max-width:720px){.wa-float{right:14px;bottom:14px;width:52px;height:52px;}}

/* ============= SCROLL REVEAL ============= */
/* Visible por defecto: si no hay JS, el contenido se ve. JS añade .armed para ocultar y luego .in para revelar. */
.reveal{opacity:1;transform:none;}
.reveal.armed{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
.reveal.armed.in{opacity:1;transform:none;}

/* ============= TABLA TÉCNICA ============= */
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--warm-line);border:1px solid var(--warm-line);}
@media(max-width:900px){.spec-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:540px){.spec-grid{grid-template-columns:1fr;}}
.spec{background:var(--paper);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-2);}
.spec .lbl{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-60);}
.spec .val{font-family:"Archivo Black",sans-serif;font-size:22px;letter-spacing:-0.02em;line-height:1.1;}
.spec .nota{font-size:13px;color:var(--ink-60);margin-top:var(--s-2);}

/* ============= TIMELINE (sobre nosotros) ============= */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);}
@media(max-width:900px){.timeline{grid-template-columns:1fr;}}
.mile{background:var(--paper);border:1px solid var(--warm-line);padding:var(--s-7) var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);}
.warm .mile{background:var(--paper);}
.mile .year{font-family:"Archivo Black",sans-serif;font-size:44px;color:var(--orange);line-height:0.9;letter-spacing:-0.03em;}
.mile h3{font-family:"Archivo Black",sans-serif;font-size:22px;letter-spacing:-0.02em;margin:0;}
.mile p{margin:0;color:var(--ink-80);font-size:15px;line-height:1.55;}

/* ============= FORMULARIOS ============= */
.form-wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--s-7);align-items:start;}
@media(max-width:900px){.form-wrap{grid-template-columns:1fr;}}
.form-side{display:flex;flex-direction:column;gap:var(--s-4);position:sticky;top:calc(var(--s-7) + 64px);align-self:start;}
@media(max-width:900px){.form-side{position:static;}}
.form-side h2{font-family:"Archivo Black",sans-serif;font-size:clamp(28px,3vw,40px);letter-spacing:-0.025em;line-height:1.0;margin:0;}
.form-side h2 .orange{color:var(--orange);}
.form-side p{color:var(--ink-80);margin:0;}
.form-side .contact-list{display:flex;flex-direction:column;gap:var(--s-2);font-size:15px;margin-top:var(--s-4);}
.form-side .contact-list strong{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-60);font-weight:500;display:block;margin-bottom:2px;}
.form{background:var(--paper);border:1px solid var(--warm-line);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);}
.field{display:flex;flex-direction:column;gap:var(--s-2);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);}
@media(max-width:540px){.field-row{grid-template-columns:1fr;}}
.field label{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-60);font-weight:500;}
.field label .req{color:var(--orange);}
.field input,.field select,.field textarea{font-family:"Geist",sans-serif;font-size:16px;padding:12px 14px;border:1.5px solid var(--warm-line);border-radius:var(--r-2);background:var(--paper);color:var(--ink);line-height:1.4;transition:border-color .15s ease;width:100%;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);}
.field input[type="file"]{padding:10px 14px;font-size:14px;background:var(--warm);}
.field textarea{min-height:120px;resize:vertical;font-family:"Geist",sans-serif;}
.field .hint{font-size:13px;color:var(--ink-60);}
.field-check{display:flex;align-items:flex-start;gap:var(--s-3);font-size:14px;color:var(--ink-80);line-height:1.45;}
.field-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--orange);flex-shrink:0;}
.field-check a{color:var(--ink);text-decoration:underline;}
.form-actions{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;border-top:1px solid var(--warm-line);padding-top:var(--s-5);margin-top:var(--s-3);}
.form-msg{display:none;padding:var(--s-5) var(--s-6);border:2px solid var(--orange);background:#fff7ec;color:var(--ink);border-radius:var(--r-2);}
.form-msg.show{display:block;}
.form-msg h3{font-family:"Archivo Black",sans-serif;font-size:20px;margin:0 0 var(--s-2);letter-spacing:-0.015em;}
.form-msg p{margin:0;color:var(--ink-80);font-size:15px;}
.form-msg.err{border-color:#c0392b;background:#fdecea;}

/* ============= MAPA EMBED ============= */
.map{width:100%;height:420px;border:0;display:block;background:var(--warm);}
@media(max-width:540px){.map{height:320px;}}

/* ============= CONTACT GRID ============= */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-bottom:var(--s-8);}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{background:var(--paper);border:1px solid var(--warm-line);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);}
.contact-card .lbl{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-60);}
.contact-card .val{font-family:"Archivo Black",sans-serif;font-size:26px;letter-spacing:-0.02em;line-height:1.1;text-decoration:none;color:var(--ink);}
.contact-card .val:hover{color:var(--orange);}
.contact-card p{margin:0;font-size:14px;color:var(--ink-80);}

/* ============= LEGAL PAGES ============= */
.legal{padding:var(--s-8) 0;}
.legal .wrap{max-width:760px;}
.legal h1{font-family:"Archivo Black",sans-serif;font-size:clamp(32px,4vw,56px);letter-spacing:-0.03em;line-height:1;margin:0 0 var(--s-6);}
.legal h2{font-family:"Archivo Black",sans-serif;font-size:22px;letter-spacing:-0.02em;margin:var(--s-7) 0 var(--s-3);}
.legal h3{font-family:"Geist",sans-serif;font-weight:700;font-size:17px;margin:var(--s-5) 0 var(--s-2);}
.legal p,.legal li{font-size:16px;line-height:1.65;color:var(--ink-80);}
.legal ul{padding-left:20px;}
.legal a{color:var(--orange);text-decoration:underline;}
.legal .meta{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-60);margin-bottom:var(--s-4);}

/* ============= COBERTURA ============= */
.cover-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s-7);align-items:center;}
@media(max-width:900px){.cover-grid{grid-template-columns:1fr;}}
.cover-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2) var(--s-5);font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;}
.cover-list li{list-style:none;padding:8px 0;border-bottom:1px solid var(--warm-line);}
.cover-list li::before{content:"›";color:var(--orange);margin-right:8px;font-weight:700;}

/* ============= COOKIE BANNER ============= */
.cookie{position:fixed;left:14px;right:14px;bottom:14px;max-width:520px;background:var(--ink);color:var(--paper);padding:var(--s-5) var(--s-6);border-radius:var(--r-3);box-shadow:0 12px 32px rgba(0,0,0,0.24);z-index:60;display:none;}
.cookie.show{display:block;}
.cookie p{margin:0 0 var(--s-4);font-size:14px;line-height:1.5;color:var(--ink-on-dark);}
.cookie p a{color:var(--yellow);}
.cookie-row{display:flex;gap:var(--s-3);flex-wrap:wrap;}
.cookie .btn{padding:10px 16px;font-size:14px;}
.cookie .btn-secondary{padding:8px 14px;border-color:var(--ink-60);color:var(--ink-on-dark);}
.cookie .btn-secondary:hover{color:var(--ink);}

/* ============= UTILS ============= */
.text-warm{color:#c9c5c0;}
.text-orange{color:var(--orange);}
.mt-7{margin-top:var(--s-7)!important;}
.mt-5{margin-top:var(--s-5)!important;}
.mb-5{margin-bottom:var(--s-5)!important;}
.hidden{display:none;}
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* ============= REDUCED MOTION ============= */
@media(prefers-reduced-motion: reduce){
  .hero .pulse::after{animation:none;opacity:0;}
  .float-item:hover{transform:none;box-shadow:none;}
  .float-item:hover .float-media img{transform:none;}
  .otro-item:hover{transform:none;box-shadow:none;}
  .otro-item:hover .otro-media img{transform:none;}
  .reveal,.reveal.armed{opacity:1;transform:none;transition:none;}
}

/* ============= FOTOS REALES (sustituyen placeholders) ============= */
/* La foto del taller en el hero rellena el marco 4:3 (16:9 en móvil, ya definido en .hero-media .ph). */
img.ph{width:100%;height:auto;object-fit:cover;display:block;}
/* Banda de foto del taller en "Sobre nosotros". */
.about-photo{margin:0;}
.about-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;}

/* ============= NAV DROPDOWN (Servicios) ============= */
.nav-links{position:relative;}
.nav-item.has-dropdown{position:relative;display:inline-flex;align-items:center;}

.nav-trigger{
  background:transparent;border:0;color:var(--ink-on-dark);
  font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;
  padding:0;display:inline-flex;align-items:center;gap:6px;line-height:1;
}
.nav-trigger:hover{color:var(--paper);}
.nav-trigger:focus-visible{outline:2px solid var(--yellow);outline-offset:4px;border-radius:2px;}
.nav-trigger .caret{display:inline-block;font-size:11px;transition:transform .2s ease;margin-top:1px;}
.nav-trigger[aria-expanded="true"] .caret{transform:rotate(180deg);}

.nav-dropdown{
  position:absolute;top:calc(100% + 16px);left:0;min-width:260px;
  background:var(--ink);border:1px solid var(--ink-80);border-radius:var(--r-2);
  padding:var(--s-3);opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  box-shadow:0 14px 40px rgba(0,0,0,.35);z-index:60;
}
.nav-dropdown::before{
  /* Puente invisible para no perder el hover al bajar al menú */
  content:"";position:absolute;top:-16px;left:0;right:0;height:16px;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown,
.nav-trigger[aria-expanded="true"] + .nav-dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}

.nav-dropdown ul{list-style:none;margin:0;padding:0;}
.nav-dropdown a{
  display:block;padding:10px 14px;color:var(--ink-on-dark);
  font-size:14px;font-weight:500;text-decoration:none;border-radius:var(--r-1);
  transition:background .15s ease,color .15s ease;font-family:inherit;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible{background:var(--line-dark);color:var(--paper);outline:none;}
.nav-dropdown a:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px;}

/* Móvil — acordeón dentro del menú abierto */
@media(max-width:900px){
  .nav-item.has-dropdown{display:block;width:100%;}
  .nav-trigger{width:100%;justify-content:space-between;padding:var(--s-3) 0;font-size:16px;}
  .nav-dropdown{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;background:transparent;padding:0 0 var(--s-3) var(--s-4);
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .nav-dropdown::before{display:none;}
  .nav-trigger[aria-expanded="true"] + .nav-dropdown{max-height:500px;}
  .nav-dropdown a{padding:8px 0;font-size:15px;}
}

@media(prefers-reduced-motion:reduce){
  .nav-dropdown,.nav-trigger .caret{transition:none;}
}

/* ===== Featured product (vCard) ===== */
.featured-product{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-7);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-2);
  overflow: hidden;
  align-items: stretch;
}
@media (max-width: 900px){
  .featured-product{ grid-template-columns: 1fr; }
}

.featured-media{
  position: relative;
  background: var(--warm);
  border-right: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  min-height: 360px;
}
@media (max-width: 900px){
  .featured-media{ border-right: 0; border-bottom: 1px solid var(--ink); }
}
.featured-media img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 14px 24px rgba(15,15,15,.14));
}

.featured-badge{
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--orange);
  color: var(--paper);
  padding: 5px 10px;
  border-radius: var(--r-1);
}

.featured-body{
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.featured-body h2{
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}
.featured-body .lede{
  color: var(--ink-80);
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  max-width: 50ch;
}

.featured-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.featured-list li{
  position: relative;
  padding-left: 24px;
  color: var(--ink-80);
  font-size: 15.5px;
  line-height: 1.5;
}
.featured-list li::before{
  content: "→";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}
.featured-list strong{ color: var(--ink); }

.featured-cta{
  margin-top: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.featured-price{
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
}