/* =========================================================
   INCAMET · Caja PAU — Mobile-first
   Base = mobile (≥360px). Breakpoints sumando capacidades:
     md ≥ 720px  (tablet vertical)
     lg ≥ 1024px (tablet horizontal / desktop pequeño)
     xl ≥ 1280px (desktop)
   ========================================================= */

:root{
  --orange:        #FF7A1A;
  --orange-deep:   #E85F00;
  --orange-glow:   rgba(255,122,26,.45);

  --bg:            #07080A;
  --bg-1:          #0B0C0F;
  --bg-2:          #101216;
  --bg-3:          #15181D;
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.16);

  --fg:            #F4F5F7;
  --fg-2:          #B8BDC7;
  --fg-3:          #7F8593;
  --muted:         #5A6070;

  --radius:        16px;
  --radius-lg:     22px;
  --radius-sm:     12px;
  --shadow:        0 30px 80px -30px rgba(0,0,0,.7), 0 2px 0 rgba(255,255,255,.04) inset;
  --shadow-orange: 0 20px 60px -20px var(--orange-glow);
  --ease:          cubic-bezier(.22,.61,.36,1);

  --f-sans:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display:     "Space Grotesk", "Inter", sans-serif;
  --f-mono:        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Mobile-first page padding (uses dvh-aware viewport units) */
  --pad-x:         18px;
  --pad-y:         64px;
  --maxw:          1280px;
  --nav-h:         60px;

  /* respect notch / gesture bar */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--f-sans);
  font-size:16px;          /* mínimo recomendado para no auto-zoom en iOS */
  line-height:1.55;
  color:var(--fg);
  background:
    radial-gradient(80vw 60vw at 90% -10%, rgba(255,122,26,.10), transparent 60%),
    radial-gradient(70vw 60vw at -10% 30%, rgba(255,122,26,.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:6px; }

.mono{ font-family:var(--f-mono); font-size:.78em; letter-spacing:.04em; }
.muted{ color:var(--muted); }

/* ============================== NAV (mobile-first) ============================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  height:var(--nav-h);
  padding: calc(var(--safe-t) + 8px) max(var(--pad-x), var(--safe-r)) 8px max(var(--pad-x), var(--safe-l));
  background:rgba(7,8,10,.7);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-scrolled{
  background:rgba(7,8,10,.85);
  border-bottom-color:var(--line);
}
.nav__brand img{ height:24px; width:auto; }

/* Menú: panel desplegable en mobile, fila en desktop */
.nav__links{
  position:absolute;
  top: calc(var(--nav-h) + 6px);
  right: 12px; left: 12px;
  display:flex; flex-direction:column; align-items:stretch; gap:2px;
  padding:10px;
  border-radius:18px;
  background:rgba(11,12,15,.96);
  backdrop-filter:blur(20px);
  border:1px solid var(--line);
  transform:translateY(-10px); opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  max-height: calc(100dvh - var(--nav-h) - 24px);
  overflow:auto;
}
.nav.is-open .nav__links{ opacity:1; transform:translateY(0); pointer-events:auto; }
.nav__links a{
  padding:14px 16px; border-radius:12px;
  color:var(--fg-2); font-size:15px; font-weight:500;
  min-height:44px; display:flex; align-items:center;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav__links a:hover, .nav__links a:focus-visible{ color:var(--fg); background:rgba(255,255,255,.04); }
.nav__cta{
  background:var(--orange) !important;
  color:#0a0a0a !important;
  font-weight:600 !important;
  box-shadow:var(--shadow-orange);
  justify-content:center !important;
  margin-top:6px;
}
.nav__cta:hover{ background:var(--orange-deep) !important; }
.nav__burger{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px; border-radius:10px;
}
.nav__burger span{
  width:20px; height:1.6px; background:var(--fg); border-radius:2px;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* ============================== TYPOGRAPHY ============================== */
.h2{
  font-family:var(--f-display);
  font-weight:600;
  font-size: clamp(26px, 7.2vw, 56px);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 12px;
  text-wrap: balance;
}
.h3{ font-family:var(--f-display); font-weight:600; font-size:clamp(20px,4.6vw,30px); line-height:1.2; letter-spacing:-.015em; margin:0 0 10px; }
.h4{ font-family:var(--f-display); font-weight:600; font-size:17px; line-height:1.3; margin:0 0 8px; letter-spacing:-.01em; }
h5{ font-family:var(--f-display); font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--fg-3); margin:0 0 14px; }
.lead{ color:var(--fg-2); font-size:clamp(15px,3.8vw,18px); max-width:62ch; margin-left:auto; margin-right:auto; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--orange);
  padding:6px 12px; border-radius:999px;
  background:rgba(255,122,26,.08);
  border:1px solid rgba(255,122,26,.22);
  margin-bottom:16px;
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 12px var(--orange); }
.grad{
  background:linear-gradient(95deg, var(--orange) 0%, #FFB347 60%, var(--orange) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ============================== BUTTONS (44pt touch) ============================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px;
  padding:13px 22px; border-radius:999px;
  font-weight:600; font-size:15px; letter-spacing:-.005em;
  transition:transform .15s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
  touch-action: manipulation;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{
  background:var(--orange); color:#0A0A0A;
  box-shadow:var(--shadow-orange);
}
.btn--primary:hover{ background:var(--orange-deep); box-shadow:0 30px 80px -20px var(--orange-glow); }
.btn--ghost{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-strong);
  color:var(--fg);
}
.btn--ghost:hover{ background:rgba(255,255,255,.08); }
.btn--full{ width:100%; padding:16px; }

/* ============================== HERO (mobile-first) ============================== */
.hero{
  position:relative;
  padding-top: calc(var(--nav-h) + var(--safe-t));
}
.hero__bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.hero__glow{
  position:absolute; top:-10%; right:-30%; width:120vw; height:120vw;
  background:radial-gradient(circle, rgba(255,122,26,.22), transparent 60%);
  filter:blur(40px);
}

/* Sticky stage drives scroll-rotation. En mobile sticky con altura natural
   (no forzamos 100dvh para no cortar la imagen). El spacer abajo da el
   "scroll travel" que sincroniza el giro. */
.hero__sticky{
  position:sticky; top:0;
  display:flex; flex-direction:column;
  gap:18px;
  padding: calc(var(--nav-h) + 12px) var(--pad-x) 32px;
  max-width:var(--maxw); margin:0 auto;
  /* sin fondo: deja ver la cuadrícula y el glow del hero detrás */
}

.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-2);
  padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  margin-bottom:16px;
  align-self:flex-start;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kicker__dot{
  flex-shrink:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(255,122,26,.18), 0 0 14px var(--orange);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 50%{ box-shadow:0 0 0 7px rgba(255,122,26,.04), 0 0 18px var(--orange); } }
@media (prefers-reduced-motion: reduce){ .kicker__dot{ animation:none; } }

.hero__title{
  font-family:var(--f-display);
  font-weight:700;
  font-size: clamp(30px, 9vw, 92px);
  line-height:1.0;
  letter-spacing:-.03em;
  margin:0 0 14px;
  text-wrap: balance;
}
.hero__sub{
  color:var(--fg-2);
  font-size:clamp(14.5px,3.8vw,19px);
  line-height:1.45;
  max-width:52ch;
  margin:0 0 18px;
}
.hero__ctas{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.hero__ctas .btn{ flex:1 1 auto; }     /* mobile: ocupan ancho disponible */
.hero__chips{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.hero__chips li{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:var(--fg-2);
}

/* Stage — en mobile NO usamos aspect-ratio 1:1 porque sobra fondo.
   Usamos un alto fijo proporcional al ancho y dejamos que la imagen mande. */
.hero__stage{
  position:relative;
  width:100%;
  max-width:560px;
  margin:4px auto 0;
  padding:0;
  display:flex; align-items:center; justify-content:center;
}

/* ============================== VIEWER (marco premium · translúcido) ============================== */
.viewer{
  position:relative;
  width:100%;
  display:flex; flex-direction:column;
  border-radius: 22px;
  overflow:hidden;
  /* Sin fondo opaco — solo un velo translúcido que deja ver la cuadrícula
     del hero detrás. */
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border:1px solid var(--line-strong);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,122,26,.05),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.viewer__chrome{
  display:flex; align-items:center; gap:10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
}
.viewer__dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange);
  flex-shrink:0;
  animation: pulse 2.4s ease-in-out infinite;
}
.viewer__title{
  font-size: 10.5px;
  color: var(--fg-2);
  letter-spacing: .18em;
  text-transform: uppercase;
  flex: 1;
}
.viewer__hint{
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
}
.viewer__inner{
  position:relative;
  /* Marco más bajo que el video. El video conserva su tamaño/proporciones
     y simplemente queda recortado arriba/abajo por overflow:hidden. */
  aspect-ratio: 16/7.5;
  width:100%;
  overflow:hidden;
  background: transparent;
}
/* Comprime verticalmente el canvas con los frames del video.
   Corrige la perspectiva exagerada de la cámara del video (la caja real
   tiene solo 70 mm de fondo, pero el ángulo bajo la hacía ver como un
   ladrillo). 0.82 ≈ aplana ~18% sin afectar el ancho. */
.viewer__footer{
  display:flex; gap:8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: linear-gradient(0deg, rgba(255,255,255,.02), transparent);
  flex-wrap: wrap;
  justify-content: center;
}
.viewer__tag{
  font-size: 9.5px;
  color: var(--fg-3);
  letter-spacing: .14em;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
}
.stage__ring{ display:none; }
.stage__base{ display:none; }
.stage__canvas{
  /* Canvas en su proporción 16:9 real, centrado verticalmente.
     El marco (.viewer__inner) es más bajo → overflow:hidden recorta. */
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-50%);
  width:100%;
  aspect-ratio: 16/9;
  height:auto;
  display:none;
  z-index:1;
}
.stage__canvas.is-active{ display:block; }
/* Glow naranja detrás del viewer — halo cálido que refuerza profundidad. */
.hero__stage::before{
  content:"";
  position:absolute; inset:-10%;
  background:
    radial-gradient(circle at 60% 55%, rgba(255,122,26,.15), transparent 55%),
    radial-gradient(circle at 40% 70%, rgba(255,122,26,.08), transparent 60%);
  filter: blur(30px);
  z-index:-1;
  pointer-events:none;
}

/* Imagen estática del hero (fallback hasta que se generen los frames del video).
   Dentro del viewer__inner 16:9: la imagen cuadrada se escala con cover y se
   recorta arriba/abajo (la caja queda centrada). */
.stage__hero{
  /* Imagen estática en su proporción 16:9 real, centrada verticalmente.
     El marco (.viewer__inner) es más bajo → overflow:hidden recorta
     arriba y abajo. El JS controla el transform (incluye -50% base). */
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-50%);
  width:100%;
  aspect-ratio: 16/9;
  height:auto;
  object-fit:cover;
  object-position:center center;
  transition: transform .15s linear;
  will-change: transform;
  z-index:1;
}
.stage__hero.is-hidden{ display:none; }

.stage__label{ display:none; }   /* movido al viewer__chrome / viewer__footer */

/* Spacer = travel del scroll-rotation.
   En mobile reactivamos sticky + spacer (más corto) para que el giro se aprecie. */
.hero__scrollspace{ height: 150vh; }

.hero__scrollhint{
  position:fixed; left:50%; bottom: calc(14px + var(--safe-b)); transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-3); z-index:50;
  opacity:0; transition:opacity .4s var(--ease);
  pointer-events:none;
}
.hero__scrollhint.is-visible{ opacity:1; }

/* ============================== MARQUEE ============================== */
.marquee{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(11,12,15,.6);
  overflow:hidden;
  margin-top:-1px;
}
.marquee__track{
  display:flex; gap:24px; align-items:center;
  padding:16px 0;
  white-space:nowrap;
  animation: marquee 38s linear infinite;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-2);
  will-change: transform;
}
.marquee__track span:nth-child(odd){ color:var(--fg); }
.marquee__track span[aria-hidden]{ color:var(--orange); }
@keyframes marquee{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ============================== SECTION BASE ============================== */
.section{
  position:relative;
  padding: var(--pad-y) var(--pad-x);
  max-width:var(--maxw); margin:0 auto;
}
.section__head{ max-width:920px; margin: 0 auto clamp(28px,5vw,72px); text-align:center; }

/* ============================== BENTO / CARDS (mobile = 1 col) ============================== */
.bento{ display:grid; gap:14px; grid-template-columns: 1fr; }

.card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px;
  display:flex; flex-direction:column; gap:10px;
  overflow:hidden;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover{ border-color:var(--line-strong); }
.card--accent{
  background:
    radial-gradient(70vw 30vw at 0% 0%, rgba(255,122,26,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.card__topline{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  color:var(--fg-3); font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:4px;
}
.tag{
  padding:4px 10px; border-radius:999px;
  background:rgba(255,122,26,.10); color:var(--orange);
  border:1px solid rgba(255,122,26,.25);
  font-size:10px;
}
.card__icon{
  width:40px; height:40px; border-radius:12px;
  background:rgba(255,122,26,.08);
  border:1px solid rgba(255,122,26,.22);
  color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
}
.card__icon svg{ width:22px; height:22px; }
.card p{ color:var(--fg-2); font-size:14.5px; margin:0; }
.card__media{
  margin-top:14px;
  border-radius:var(--radius);
  overflow:hidden;
  background:#111316;
  border:1px solid var(--line);
}
.card__media--inline{ margin-top:auto; }

/* Card con media banner arriba (full-bleed dentro de la card) */
.card--media-top{ padding: 0; overflow: hidden; }
.card--media-top .card__media--hero{
  margin: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.card--media-top .card__media--hero img.ph{
  border: 0;
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card--media-top .card__body{
  padding: 28px;
}
@media (max-width: 1023px){
  .card--media-top .card__body{ padding: 22px; }
}

.metric{ margin-top:auto; padding-top:14px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.metric__num{
  font-family:var(--f-display); font-weight:700;
  font-size:36px; line-height:1; letter-spacing:-.02em;
  color:var(--orange);
}
.metric__label{ font-size:13px; color:var(--fg-3); }

/* Image placeholders */
.ph{
  position:relative; width:100%;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, #14171C 0%, #1B1F26 100%);
  border:1px dashed rgba(255,255,255,.08);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--fg-3);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:14px;
  overflow:hidden;
}
.ph::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(50vw 30vw at 30% 0%, rgba(255,122,26,.05), transparent 60%),
    radial-gradient(40vw 25vw at 100% 100%, rgba(255,255,255,.025), transparent 60%);
}
.ph span{ position:relative; z-index:1; padding:0 8px; max-width:92%; }
.ph--16x9 { aspect-ratio:16/9; }
.ph--21x9 { aspect-ratio:21/9; }
.ph--4x3  { aspect-ratio:4/3; }
.ph--4x5  { aspect-ratio:4/5; }
.ph--1x1  { aspect-ratio:1/1; }

/* Cuando .ph es un <img> real (no un div placeholder),
   anulamos el patrón dashed y aplicamos object-fit. */
img.ph{
  background:none;
  border:1px solid var(--line);
  padding:0;
  object-fit:cover;
  object-position:center;
  height:auto;
}
img.ph::before{ content:none; }

/* Interior del card.usecase: la img va sin borde extra (el card ya tiene) */
.usecase__media img.ph{ border:0; border-radius:0; width:100%; }
.usecase__media{ aspect-ratio:4/3; overflow:hidden; }
.usecase__media img.ph{ width:100%; height:100%; aspect-ratio:auto; }

/* Plano técnico vertical: la imagen ya viene en 16:9 con cotas — la mostramos
   completa, no recortada. */
img.ph[data-slot="tech-drawing"]{
  aspect-ratio:16/9;
  object-fit:contain;
  background:#0a0a0d;
}

/* Vista explotada 1:1: la fuente es 1:1 con halo naranja, perfecto. */
img.ph[data-slot="exploded-view"]{
  background:#0a0a0d;
  object-fit:contain;
}

/* En tablet+ el plano técnico vuelve a su 4:5 vertical original */
@media (min-width: 1024px){
  img.ph[data-slot="tech-drawing"]{ aspect-ratio:4/5; object-fit:contain; }
}

/* ============================== SPECS (mobile = stack) ============================== */
.specs__wrap{ display:flex; flex-direction:column; gap:24px; }
.specs__visual{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); }
.specs__list{ margin:0; display:flex; flex-direction:column; border-top:1px solid var(--line); }
.spec{
  display:flex; flex-direction:column; gap:6px;
  padding:16px 2px;
  border-bottom:1px solid var(--line);
}
.spec dt{
  color:var(--fg-3); font-family:var(--f-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.spec dd{ margin:0; color:var(--fg); font-size:16px; }
.spec--group dd{ display:flex; gap:14px; flex-wrap:wrap; }
.spec--group dd span{ display:inline-flex; align-items:baseline; gap:6px; }
.spec--group dd b{
  font-family:var(--f-display); font-weight:700; font-size:22px;
  color:var(--orange); letter-spacing:-.01em;
}

/* ============================== COMPONENTS ============================== */
.components__grid{ display:flex; flex-direction:column; gap:24px; }
.exploded{
  margin:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.parts{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.part{
  display:grid; grid-template-columns: 48px 1fr; gap:16px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.part:hover{ border-color:rgba(255,122,26,.4); background:rgba(255,122,26,.04); }
.part__num{
  font-family:var(--f-display); font-weight:700;
  font-size:24px; color:var(--orange); letter-spacing:-.02em;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:2px;
}
.part__body p{ color:var(--fg-2); margin:0; font-size:14.5px; }

/* ============================== USECASES (mobile = 1 col) ============================== */
.usecase__grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
.usecase{
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.usecase:hover{ border-color:var(--line-strong); }
.usecase__media{ border-bottom:1px solid var(--line); }
.usecase__media .ph{ border:0; border-radius:0; }
.usecase .h4{ padding: 20px 20px 4px; }
.usecase p{ padding: 0 20px 20px; color:var(--fg-2); font-size:14px; margin:0; }

/* ============================== WHY (mobile = 1 col) ============================== */
.gallery__grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
.gallery__grid .ph{ transition:transform .3s var(--ease); }
.gallery__grid--why .why{
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px;
  display:flex; flex-direction:column; gap:6px;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.gallery__grid--why .why:hover{ border-color:rgba(255,122,26,.4); }
.why__num{ color:var(--orange); font-size:11px; letter-spacing:.16em; margin-bottom:8px; }
.why p{ color:var(--fg-2); font-size:14.5px; margin:0; }

/* ============================== WHATSAPP COLORS ============================== */
:root{
  --wa:        #25D366;
  --wa-deep:   #1DA851;
  --wa-glow:   rgba(37,211,102,.45);
}

/* Botones grandes que reemplazan al form */
.btn--lg{
  min-height:56px;
  padding:16px 26px;
  font-size:16px;
}

/* Variante WhatsApp — pinta el primer botón verde sin tocar la regla genérica */
[data-whatsapp].btn--primary{
  background: var(--wa);
  color:#06140C;
  box-shadow: 0 20px 60px -20px var(--wa-glow);
}
[data-whatsapp].btn--primary:hover{
  background: var(--wa-deep);
  box-shadow: 0 30px 80px -20px var(--wa-glow);
}
/* El CTA del nav (chip pequeño naranja) se queda en naranja; sobrescribe esa pinta */
.nav__cta[data-whatsapp]{
  background: var(--wa) !important;
  color:#06140C !important;
}
.nav__cta[data-whatsapp]:hover{ background: var(--wa-deep) !important; }

/* ============================== CTA / WHATSAPP (mobile = 1 col) ============================== */
.cta{ position:relative; }
.cta__inner{
  max-width:880px; margin:0 auto;
  text-align:center;
  background:
    radial-gradient(80vw 30vw at 50% 0%, rgba(255,122,26,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:28px;
  padding: clamp(28px, 6vw, 72px) clamp(20px, 5vw, 64px);
  box-shadow:var(--shadow);
}
.cta__channels{
  margin-top:28px;
  display:flex; flex-direction:column; gap:10px;
  align-items:stretch;
}
.cta__channels .btn{ width:100%; }

.cta__meta{
  list-style:none; padding:0; margin:36px 0 0;
  display:grid; gap:14px;
  grid-template-columns: 1fr;
  text-align:left;
}
.cta__meta li{
  display:flex; flex-direction:column; gap:4px;
  padding:14px 16px;
  background: rgba(255,255,255,.025);
  border:1px solid var(--line);
  border-radius:14px;
}
.cta__meta-label{
  font-size:10.5px; letter-spacing:.16em;
  color:var(--fg-3);
}
.cta__meta-value{
  color:var(--fg); font-size:14.5px; line-height:1.35;
}

/* ============================== FAB WHATSAPP ============================== */
.fab-wa{
  position:fixed;
  right: calc(16px + var(--safe-r));
  bottom: calc(16px + var(--safe-b));
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--wa);
  color:#06140C;
  box-shadow:
    0 8px 24px rgba(0,0,0,.4),
    0 0 0 0 var(--wa-glow);
  z-index: 90;
  opacity:0;
  transform: translateY(20px) scale(.85);
  pointer-events:none;
  transition: transform .35s var(--ease), opacity .35s var(--ease), background .2s var(--ease);
  text-decoration:none;
}
.fab-wa.is-visible{
  opacity:1; transform: translateY(0) scale(1); pointer-events:auto;
  animation: fabPulse 2.4s ease-in-out infinite;
}
.fab-wa:hover{ background: var(--wa-deep); transform: translateY(-2px) scale(1.04); animation:none; }
.fab-wa:active{ transform: translateY(0) scale(.96); }
.fab-wa svg{ display:block; }
.fab-wa__tooltip{
  position:absolute; right: calc(100% + 12px); top:50%;
  transform: translateY(-50%);
  background: rgba(11,12,15,.95);
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 10px;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  opacity:0; pointer-events:none;
  transition: opacity .2s var(--ease);
}
.fab-wa:hover .fab-wa__tooltip,
.fab-wa:focus-visible .fab-wa__tooltip{ opacity:1; }
@keyframes fabPulse{
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 0   rgba(37,211,102,.45); }
  50%      { box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 14px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce){
  .fab-wa.is-visible{ animation:none; }
}

/* ============================== FOOTER ============================== */
.footer{
  border-top:1px solid var(--line);
  background:rgba(7,8,10,.6);
  padding: 44px var(--pad-x) calc(20px + var(--safe-b));
}
.footer__top{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column; gap:32px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
}
.footer__brand img{ height:30px; margin-bottom:12px; }
.footer__brand p{ color:var(--fg-3); margin:0; font-size:14px; }
.footer__cols{ display:grid; gap:24px; grid-template-columns: 1fr; }
.footer__cols a{ display:block; padding:8px 0; color:var(--fg-2); font-size:14.5px; min-height:36px; transition:color .15s var(--ease); }
.footer__cols a:hover{ color:var(--orange); }
.footer__cols .muted{ font-size:14px; display:block; padding:6px 0; }
.footer__bot{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
  gap:8px;
  padding-top:18px;
  color:var(--fg-3); flex-wrap:wrap;
  font-size:11px;
}

/* ====================================================================
   ====================  BREAKPOINTS (min-width)  ======================
   ==================================================================== */

/* ---------- md ≥ 720px: tablet vertical ---------- */
@media (min-width: 720px){
  :root{ --pad-x:32px; --pad-y:96px; }

  .nav__links a{ padding:12px 14px; min-height:40px; font-size:14px; }

  /* Bento: 2 columnas */
  .bento{ grid-template-columns: repeat(2, 1fr); gap:16px; }
  .card--span2{ grid-column: span 2; }
  .card--span3{ grid-column: 1 / -1; }   /* en md = 2 cols → ocupa toda la fila */

  /* Usecases: 2 columnas */
  .usecase__grid{ grid-template-columns: repeat(2, 1fr); }

  /* Why: 2 columnas */
  .gallery__grid--why{ grid-template-columns: repeat(2, 1fr); }

  /* Specs: lista en 2 columnas */
  .spec{ display:grid; grid-template-columns: 200px 1fr; gap:24px; padding:20px 4px; }

  /* CTA WhatsApp: botones en fila y meta en 3 columnas */
  .cta__channels{ flex-direction:row; justify-content:center; flex-wrap:wrap; }
  .cta__channels .btn{ width:auto; flex: 0 1 auto; }
  .cta__meta{ grid-template-columns: repeat(3, 1fr); }

  /* Footer */
  .footer__top{ flex-direction:row; align-items:flex-start; justify-content:space-between; gap:48px; }
  .footer__brand{ flex:0 0 220px; }
  .footer__cols{ flex:1; grid-template-columns: repeat(3, 1fr); }
  .footer__bot{ flex-direction:row; align-items:center; font-size:12px; }
}

/* ---------- lg ≥ 1024px: desktop pequeño ---------- */
@media (min-width: 1024px){
  :root{ --pad-x:40px; --pad-y:128px; --nav-h:64px; }

  /* Nav: links inline */
  .nav__brand img{ height:28px; }
  .nav__burger{ display:none; }
  .nav__links{
    position:static;
    flex-direction:row; gap:4px;
    padding:0; background:transparent; border:0;
    transform:none; opacity:1; pointer-events:auto;
    max-height:none; overflow:visible;
  }
  .nav__links a{ padding:9px 14px; border-radius:999px; min-height:auto; }
  .nav__cta{ margin-top:0; padding:10px 18px !important; }

  /* Hero: 2 columnas (copy + stage), sticky para scroll-driven */
  .hero__sticky{
    position:sticky; top:0;
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    align-items:center;
    gap:clamp(28px, 4vw, 60px);
    min-height:100dvh;
    padding-top: calc(var(--nav-h) + 16px);
    padding-bottom: 32px;
  }
  .hero__ctas .btn{ flex: 0 0 auto; }
  .hero__stage{
    margin: 0 0 0 auto; max-width:620px;
    padding:0;
  }
  .stage__hero{ max-width: 100%; }
  .stage__ring{ display:block; position:absolute; inset:6%; border-radius:50%;
    border:1px dashed rgba(255,255,255,.08);
    background:
      radial-gradient(circle at 50% 60%, rgba(255,122,26,.10), transparent 55%),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.02), transparent 60%); }
  .stage__base{ bottom: 8%; }
  .hero__scrollspace{ height: 300vh; }

  /* Bento: 3 columnas */
  .bento{ grid-template-columns: repeat(3, 1fr); gap:18px; }
  .card--span3{ grid-column: span 3; }
  .card{ padding:28px; }

  /* Usecases & why: 4 / 3 columnas */
  .usecase__grid{ grid-template-columns: repeat(4, 1fr); }
  .gallery__grid--why{ grid-template-columns: repeat(3, 1fr); }

  /* Specs: visual sticky */
  .specs__wrap{ display:grid; grid-template-columns: 1fr 1.2fr; gap:60px; align-items:start; }
  .specs__visual{ position:sticky; top:90px; }

  /* Components */
  .components__grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:60px; align-items:center; }

  /* Tarjeta destacada alta */
  .card--tall{ min-height:420px; }
}

/* ---------- xl ≥ 1280px ---------- */
@media (min-width: 1280px){
  :root{ --pad-x:56px; }
}

/* ---------- FAB tamaño desktop ---------- */
@media (min-width: 1024px){
  .fab-wa{ width:64px; height:64px; right:28px; bottom:28px; }
  .fab-wa svg{ width:30px; height:30px; }
}

/* ---------- Landscape phones: hero más compacto ---------- */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px){
  .hero__sticky{ min-height:auto; padding-top: calc(var(--nav-h) + 12px); padding-bottom: 24px; }
  .hero__stage{ max-width:320px; }
  .hero__scrollspace{ height: 120vh; }
}

/* ---------- Reduced data / save-data preference ---------- */
@media (prefers-reduced-data: reduce){
  .hero__glow, .hero__grid, .ph::before, .cta__inner{ background-image:none; }
}