/* ==========================================================================
   CG IMPORTACIONES · estilos
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* Marca */
  --red: #E52532;
  --red-hi: #F2343F;
  --red-deep: #B91C28;
  --ink: #111113;
  --ink-2: #1B1C1F;      /* paso de tono sobre negro */
  --ink-3: #26272B;
  --graphite: #34363A;
  --paper: #F5F5F3;
  --paper-2: #E8E8E4;    /* paso de tono sobre blanco */
  --mute-d: #A6A7AC;     /* texto secundario sobre negro (≥ 7:1) */
  --mute-l: #55575C;     /* texto secundario sobre blanco (≥ 6:1) */

  /* Tipografía */
  --display: "Space Grotesk", "Arial Narrow", system-ui, sans-serif;
  --text: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(30px, 8.05vw, 128px);
  --fs-xl: clamp(36px, 6.4vw, 108px);
  --fs-m: clamp(24px, 2.5vw, 38px);
  --fs-body: clamp(17px, 1.25vw, 19px);
  --fs-s: 15px;

  /* Espacio */
  --pad: clamp(20px, 3.4vw, 48px);
  --gap: clamp(12px, 1.4vw, 20px);
  --section: clamp(112px, 13vw, 200px);
  --nav-h: 76px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0; background: var(--ink); color: var(--paper);
  font-family: var(--text); font-size: var(--fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }

.wrap { padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 200; background: var(--paper); color: var(--ink); padding: 12px 18px; border-radius: 999px; font-weight: 700; transition: top var(--t-med) var(--ease-out); }
.skip:focus { top: 16px; }

/* Títulos ---------------------------------------------------------------- */
.h-xl {
  font-family: var(--display); font-size: var(--fs-xl); font-weight: 700;
  line-height: 0.94; letter-spacing: -0.045em; text-transform: uppercase;
  text-wrap: balance;
}
.h-m { font-family: var(--display); font-size: var(--fs-m); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; }

/* Iconos y botones --------------------------------------------------------- */
.ico { width: 22px; height: 22px; flex: none; }
.ico--arrow { width: 20px; height: 20px; transition: transform var(--t-med) var(--ease-out); }

.btn {
  --bg: var(--ink-3); --fg: var(--paper);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font-family: var(--text); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-med) var(--ease-out);
  overflow: hidden; isolation: isolate;
}
.btn::before { /* barrido de color al pasar el cursor */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--sweep, var(--graphite));
  transform: translateX(-101%); transition: transform 520ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline-offset: 4px; }
.btn .ico:not(.ico--arrow) { transition: transform 420ms var(--ease-out); }
.btn--red { --bg: var(--red); --sweep: var(--red-hi); }
.btn--ghost { --bg: var(--ink-3); --sweep: var(--graphite); }
.btn--sm { min-height: 46px; padding: 0 20px; font-size: 19px; }
.btn--xl { width: 100%; min-height: 66px; font-size: 20px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: translateX(0); }
  .btn:hover .ico--arrow { animation: arrow-loop 520ms var(--ease-out); }
  .btn:hover .ico:not(.ico--arrow) { transform: rotate(-10deg) scale(1.08); }
}
@keyframes arrow-loop {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(14px); opacity: 0; }
  46% { transform: translateX(-14px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ==========================================================================
   NAVEGACIÓN
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  transition: transform 420ms var(--ease-out), background-color var(--t-med) linear;
}
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--graphite); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out); } /* taste-skill-ignore: líneas finas pedidas en el brief de optimización */
.nav.is-solid { background: rgb(17 17 19 / 0.97); }
.nav.is-solid::after { transform: scaleX(1); }
.nav__inner {
  height: 100%; display: flex; align-items: center; gap: 32px;
  padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right));
}
.nav__brand img { width: 204px; height: auto; }
.nav__links { display: flex; gap: 30px; margin-left: auto; }
.nav__links a {
  position: relative; padding: 8px 0; font-size: var(--fs-s); font-weight: 600; color: var(--mute-d);
  transition: color var(--t-med) var(--ease-out);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: right;
  transition: transform 360ms var(--ease-out);
}
.nav__links a[aria-current="true"] { color: var(--paper); }
.nav__links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--paper); }
  .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.nav__cta { flex: none; font-size: 16px; }
.nav__menu {
  display: none; margin-left: auto; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--ink-3); color: var(--paper); font-size: 16px; font-weight: 700; cursor: pointer;
  touch-action: manipulation; transition: transform var(--t-fast) var(--ease-out);
}
.nav__menu:active { transform: scale(0.96); }
.nav__menu { gap: 10px; }
.nav__burger { display: grid; gap: 5px; width: 18px; }
.nav__burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t-med) var(--ease-out); }
.nav__burger i:last-child { width: 12px; }
@media (hover: hover) and (pointer: fine) { .nav__menu:hover .nav__burger i:last-child { transform: scaleX(1.5); transform-origin: left; } }

.menu {
  position: fixed; inset: 0; z-index: 120; background: var(--ink); display: flex; flex-direction: column;
  padding: max(16px, env(safe-area-inset-top)) var(--pad) max(24px, env(safe-area-inset-bottom));
}
.menu[hidden] { display: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.menu__links { display: flex; flex-direction: column; gap: 6px; margin-top: 7vh; }
.menu__links a {
  font-family: var(--display); font-size: clamp(40px, 11vw, 64px); font-weight: 700; letter-spacing: -0.04em;
  text-transform: uppercase; line-height: 1.1; padding: 4px 0;
}
.menu__cta { margin-top: auto; }

/* ==========================================================================
   01 · HERO
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto;
  padding-top: var(--nav-h); background: var(--ink); overflow: clip; isolation: isolate;
}
.hero__curtain { position: absolute; inset: 0; z-index: 30; background: #000; pointer-events: none; opacity: 0; }
.js .hero__curtain { opacity: 1; }

.hero__stage {
  position: relative; min-height: 300px; container-type: size; perspective: 1500px;
  perspective-origin: 50% 40%;
}
.hero__rig {
  --w: min(100cqw - 2 * var(--pad), 205cqh, 1120px);
  position: absolute; left: 50%; top: 50%; width: var(--w); height: calc(var(--w) / 2.05);
  translate: -50% -46%; transform-style: preserve-3d;
  transform: rotateX(3deg) rotateY(-7deg);
}
.hero__glow {
  position: absolute; left: 50%; top: 52%; width: min(92cqw, 1200px); height: 110cqh; translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(229 37 50 / 0.42), rgb(229 37 50 / 0.12) 55%, rgb(229 37 50 / 0) 100%); /* taste-skill-ignore: iluminación roja pedida en el brief / velo bajo texto */
  pointer-events: none;
}
.hero__floor {
  position: absolute; left: 50%; top: 78%; width: 96%; height: 9%; translate: -50% 0; transform: translateZ(-40px);
  background: radial-gradient(closest-side, rgb(229 37 50 / 0.85), rgb(229 37 50 / 0) 100%); /* taste-skill-ignore: iluminación roja pedida en el brief / velo bajo texto */
  pointer-events: none;
}

.tv {
  position: absolute; left: 19%; top: 0; width: 62%;
  transform: translateZ(0);
}
.tv__screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px;
  background: #050506; outline: 7px solid #0A0A0B; outline-offset: 0;
}
.tv__screen img { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 50%; }
.tv__screen::after { /* luz roja que sale de la pantalla */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(229 37 50 / 0) 55%, rgb(229 37 50 / 0.28)); /* taste-skill-ignore: iluminación roja pedida en el brief / velo bajo texto */
  mix-blend-mode: screen; pointer-events: none;
}
.tv__stand { width: 34%; height: 12px; margin: 14px auto 0; border-radius: 3px; background: var(--ink-3); }

.plate { position: absolute; overflow: hidden; background: var(--ink-2); }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgb(229 37 50 / 0.34), rgb(229 37 50 / 0) 48%); /* taste-skill-ignore: iluminación roja pedida en el brief / velo bajo texto */
  mix-blend-mode: screen;
}
.plate--a { left: 0; top: 50%; width: 27%; aspect-ratio: 3 / 2; transform: translateZ(110px) rotateY(9deg); }
.plate--a img { filter: contrast(1.08); }
.plate--b { right: 1%; top: 56%; width: 25%; aspect-ratio: 3 / 2; transform: translateZ(150px) rotateY(-6deg); }
.plate--c { right: 7%; top: 3%; width: 14%; aspect-ratio: 3 / 4; transform: translateZ(-70px) rotateY(-10deg); }
.plate--c img { object-position: 46% 50%; transform: scale(2.1); filter: grayscale(0.3) contrast(1.08) brightness(0.8); }

.hero__copy { position: relative; z-index: 2; padding-bottom: clamp(28px, 4.2vh, 48px); }
.hero__title {
  font-family: var(--display); font-size: var(--fs-hero); font-weight: 700; text-transform: uppercase;
  line-height: 0.9; letter-spacing: -0.05em; margin-left: -0.04em;
}
.hero__title .line { display: block; white-space: nowrap; }
.line--red { color: var(--red); }
.hero__foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 32px;
  margin-top: clamp(24px, 3.4vh, 40px);
}
.hero__sub { max-width: 34ch; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.45; color: var(--paper); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.scroll-cue { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 999px; background: var(--ink-3); }
.scroll-cue__track { position: relative; width: 22px; height: 34px; border-radius: 12px; background: var(--ink); overflow: hidden; }
.scroll-cue__dot {
  position: absolute; left: 50%; top: 7px; width: 6px; height: 8px; margin-left: -3px; border-radius: 3px;
  background: var(--red); animation: cue 1.8s var(--ease-in-out) infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* Estado inicial del hero (solo si hay JS; si no, todo se ve) */
.js:not(.no-anim) [data-anim] { opacity: 0; }
.js:not(.no-anim) .hero__title { visibility: hidden; }
.js:not(.no-anim) [data-tv], .js:not(.no-anim) [data-plate], .js:not(.no-anim) [data-glow], .js:not(.no-anim) [data-floor] { opacity: 0; }

/* ==========================================================================
   02 · CATEGORÍAS (claro)
   ========================================================================== */
.cats { position: relative; background: var(--paper); color: var(--ink); padding: var(--section) 0; z-index: 1; }
.gate { display: none; }
.js:not(.no-anim) .gate {
  display: flex; position: absolute; left: 0; right: 0; top: 0; height: 100svh; z-index: 6;
  perspective: 1800px; pointer-events: none; overflow: hidden;
}
.gate__door {
  --mark: min(74vw, 980px);
  position: relative; width: 50%; height: 100%; overflow: hidden; backface-visibility: hidden;
  background-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='8'%3E%3Crect x='0' y='0' width='15' height='8' fill='%23CF1F2C'/%3E%3C/svg%3E");
  background-size: clamp(22px, 2.4vw, 34px) 8px;
  will-change: transform;
}
.gate__door--l { transform-origin: 0% 50%; }
.gate__door--r { transform-origin: 100% 50%; }
.gate__mark {
  position: absolute; top: 50%; width: var(--mark); height: auto; translate: 0 -50%;
  fill: none; stroke-width: 26; overflow: visible;
}
.gate__mark path { stroke: var(--paper); }
.gate__mark path.g { stroke: var(--ink); }
.gate__door--l .gate__mark { right: calc(var(--mark) / -2); }
.gate__door--r .gate__mark { left: calc(var(--mark) / -2); }
.gate__bar { position: absolute; top: 0; bottom: 0; width: clamp(8px, 0.9vw, 14px); background: var(--red-deep); }
.gate__door--l .gate__bar--1 { left: 14%; } .gate__door--l .gate__bar--2 { left: 30%; }
.gate__door--r .gate__bar--1 { right: 14%; } .gate__door--r .gate__bar--2 { right: 30%; }

.cats__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.cats__head .h-xl { grid-column: 1 / 9; }
.cats__intro { grid-column: 9 / 13; max-width: 36ch; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.45; }

.cats__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap);
  grid-template-rows: clamp(240px, 22vw, 330px) clamp(240px, 22vw, 330px) clamp(300px, 27vw, 400px);
}
.cat--tv { grid-column: 1 / 8; grid-row: 1 / 3; }
.cat--tech { grid-column: 8 / 13; grid-row: 1; }
.cat--white { grid-column: 8 / 13; grid-row: 2; }
.cat--appl { grid-column: 1 / 5; grid-row: 3; }
.cat--toys { grid-column: 5 / 9; grid-row: 3; translate: 0 clamp(24px, 4vw, 64px); }
.cat--home { grid-column: 9 / 13; grid-row: 3; }
.cats__grid { padding-bottom: clamp(24px, 4vw, 64px); }

.cat { perspective: 1200px; min-height: 0; }
.cat__link {
  position: relative; display: block; height: 100%; overflow: hidden; background: var(--ink); color: var(--paper);
  transform-style: preserve-3d; isolation: isolate;
  transition: transform 500ms var(--ease-out);
}
.cat__media { position: absolute; inset: -6% 0; overflow: hidden; }
.cat__media::after { /* marco fino que aparece al interactuar */
  content: ""; position: absolute; inset: calc(6% + 14px) 14px; z-index: 2; border: 1px solid rgb(245 245 243 / 0.55); /* taste-skill-ignore: líneas finas pedidas en el brief de optimización */
  opacity: 0; transform: scale(1.03); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); pointer-events: none;
}
.cat__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: scale 900ms var(--ease-out), filter 600ms var(--ease-out);
}
.cat__link::before { /* velo neutro bajo el texto */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgb(10 10 11 / 0.82), rgb(10 10 11 / 0.35) 42%, rgb(10 10 11 / 0) 70%); /* taste-skill-ignore: iluminación roja pedida en el brief / velo bajo texto */
}
.cat__link::after { /* barra roja que aparece al interactuar */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 3; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease-out);
}
.cat__text {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 6px;
  padding: clamp(18px, 2vw, 30px);
}
.cat__name {
  font-family: var(--display); font-size: clamp(22px, 1.9vw, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
  transition: transform 500ms var(--ease-out);
}
.cat--tv .cat__name { font-size: var(--fs-m); }
.cat__desc { font-size: 16px; line-height: 1.45; max-width: 40ch; color: var(--paper); }
.cat__go {
  position: relative; display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 10px;
  min-height: 40px; padding: 0 16px; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: rgb(17 17 19 / 0.72); font-size: var(--fs-s); font-weight: 700;
  transition: color var(--t-med) var(--ease-out);
}
.cat__go::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease-out); }
.cat__go .ico--arrow { color: var(--red); transition: transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out); }
.cat__desc { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.cat__link:focus-visible { outline-offset: 4px; }
.cat__link:focus-visible::after { transform: scaleX(1); }
.cat__link:focus-visible .cat__go::before { transform: scaleX(1); }
.cat__link:focus-visible .cat__go .ico--arrow { color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .cat__link:hover .cat__media img { scale: 1.07; }
  .cat__link:hover .cat__media::after { opacity: 1; transform: scale(1); }
  .cat__link:hover::after { transform: scaleX(1); }
  .cat__link:hover .cat__name { transform: translateY(-4px); }
  .cat__link:hover .cat__go::before { transform: scaleX(1); }
  .cat__link:hover .cat__go .ico--arrow { color: var(--paper); transform: translateX(4px); }
  .cat__desc { opacity: 0.86; }
  .cat__link:hover .cat__desc { opacity: 1; transform: translateY(-2px); }
}
.cat__link:active { transform: scale(0.985); }

/* ==========================================================================
   03 · DESCUBRE MÁS (oscuro)
   ========================================================================== */
.disc { position: relative; background: var(--ink); padding: var(--section) 0; overflow: clip; }
.disc__title { display: grid; }
.disc__line { display: block; white-space: nowrap; }
.disc__line--r { justify-self: end; color: var(--red); }
.disc__intro {
  max-width: 40ch; margin-top: clamp(28px, 3vw, 44px); margin-left: auto; margin-right: 0;
  font-size: clamp(18px, 1.35vw, 20px); line-height: 1.45; text-align: left;
  width: calc((100% - 11 * var(--gap)) / 12 * 5 + 4 * var(--gap));
}

.disc__body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  margin-top: clamp(64px, 8vw, 120px);
}
.disc__stage { grid-column: 1 / 7; position: sticky; top: calc(var(--nav-h) + 4vh); height: calc(100svh - var(--nav-h) - 8vh); align-self: start; }
.disc__frame { position: relative; height: 100%; overflow: hidden; background: var(--ink-2); }
.disc__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(100% 0 0 0); transform: scale(1.18);
  transition: clip-path 1000ms var(--ease-out), transform 1400ms var(--ease-out);
}
.disc__frame img.is-on { clip-path: inset(0 0 0 0); transform: scale(1); z-index: 1; }
.disc__frame img { transition: clip-path 1000ms var(--ease-out), transform 1400ms var(--ease-out), scale 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .disc__frame:hover img.is-on { scale: 1.04; } .about__pic:hover img { scale: 1.05; } }
.about__pic img { transition: scale 900ms var(--ease-out); }
.disc__frame img.was-on { clip-path: inset(0 0 0 0); transform: scale(1); z-index: 0; transition: none; }
.disc__count {
  position: absolute; left: 20px; bottom: 20px; z-index: 3; overflow: hidden;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); font-size: var(--fs-s); font-weight: 700;
}
.disc__count span { display: block; }

.disc__list { grid-column: 8 / 13; }
.disc__item {
  min-height: calc(100svh - var(--nav-h) - 8vh); display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding-block: 40px;
}
.disc__item p { max-width: 38ch; color: var(--paper); }
.disc__m { display: none; }
.disc__item .h-m { max-width: 16ch; }

.link-wa {
  position: relative; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 10px 0; font-weight: 700; font-size: 18px;
}
.link-wa .ico--arrow { color: var(--red); }
.link-wa::after {
  content: ""; position: absolute; left: 0; right: 30px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--red);
  transform: scaleX(0.3); transform-origin: left; transition: transform 420ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link-wa:hover::after { transform: scaleX(1); }
  .link-wa:hover .ico--arrow { transform: translateX(6px); }
}

/* ==========================================================================
   04 · SOBRE NOSOTROS (claro)
   ========================================================================== */
.about { background: var(--paper); color: var(--ink); padding: var(--section) 0; overflow: clip; }
.about__title { max-width: 14ch; }
.about__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  margin-top: clamp(56px, 7vw, 110px);
}
.about__mark { grid-column: 1 / 6; position: sticky; top: calc(var(--nav-h) + 8vh); align-self: start; }
.about__mark svg { width: 100%; height: auto; overflow: visible; }
.about__mark path { fill: none; stroke-width: 26; stroke-dasharray: 1; stroke-dashoffset: 0; }
.about__c { stroke: var(--ink); }
.about__g { stroke: var(--red); }
.about__cats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px var(--gap); margin-top: clamp(32px, 4vw, 56px);
  font-family: var(--display); font-size: clamp(18px, 1.35vw, 20px); font-weight: 600; letter-spacing: -0.02em;
}
.about__cats li { display: flex; align-items: center; gap: 10px; }
.about__cats li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--red); flex: none; }

.about__text { grid-column: 7 / 13; }
.about__lead {
  font-family: var(--display); font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; line-height: 1.2; letter-spacing: -0.025em;
  max-width: 34ch;
}
.about__lead .w { transition: color 200ms linear; }
.about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap) calc(var(--gap) * 2); margin-top: clamp(32px, 3.4vw, 52px); }
.about__pics { position: relative; margin-top: clamp(56px, 6vw, 96px); height: clamp(380px, 40vw, 580px); margin-bottom: 40px; }
.about__pic { position: absolute; overflow: hidden; }
.about__pic img { width: 100%; height: 100%; object-fit: cover; }
.about__pic--a { left: 0; top: 0; width: 72%; aspect-ratio: 3 / 2; }
.about__pic--b { right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; z-index: 2; }

/* ==========================================================================
   CONFIANZA (oscuro)
   ========================================================================== */
.trust { background: var(--ink); color: var(--paper); padding: var(--section) 0; }
.trust__title { display: grid; }
.trust__line { display: block; }
.trust__rule { display: block; height: 1px; margin-top: clamp(48px, 6vw, 88px); background: var(--graphite); transform-origin: left; } /* taste-skill-ignore: líneas finas pedidas en el brief de optimización */
.trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust__item {
  position: relative; padding: clamp(32px, 3.4vw, 56px) clamp(20px, 2.6vw, 44px) clamp(8px, 1vw, 16px);
  transition: background-color 500ms var(--ease-out);
}
.trust__item:first-child { padding-left: 0; }
.trust__item + .trust__item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--graphite);
  transform-origin: top; transition: transform 1100ms var(--ease-in-out);
}
.trust__ico { width: 52px; height: 52px; fill: none; stroke: var(--red); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transition: transform 500ms var(--ease-out); }
.trust__ico * { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1300ms var(--ease-out); }
.trust__h { margin-top: 28px; max-width: 15ch; font-family: var(--display); font-size: var(--fs-m); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; }
.trust__item p { margin-top: 16px; max-width: 32ch; transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.trust__h { transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .trust__item:hover .trust__ico { transform: translateY(-4px); } }

/* Estado previo a la entrada (solo con animaciones activas) */
.trust-anim .trust__item:not(.is-in) .trust__ico * { stroke-dashoffset: 1; }
.trust-anim .trust__item:not(.is-in) .trust__h,
.trust-anim .trust__item:not(.is-in) p { opacity: 0; transform: translateY(24px); }
.trust-anim .trust__item:not(.is-in)::before { transform: scaleY(0); }
.trust__item.is-in .trust__ico *:nth-child(2) { transition-delay: 180ms; }
.trust__item.is-in .trust__ico *:nth-child(3) { transition-delay: 360ms; }
.trust__item.is-in .trust__h { transition-delay: 160ms; }
.trust__item.is-in p { transition-delay: 260ms; }

/* ==========================================================================
   05 · CONTACTO (rojo)
   ========================================================================== */
.contact { position: relative; background: var(--ink); color: var(--ink); overflow: clip; isolation: isolate; padding-bottom: var(--section); }
.contact__field { position: absolute; inset: 0; z-index: -1; background: var(--red); }
.contact__marquee { overflow: hidden; padding-block: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px); }
.contact__track { display: flex; width: max-content; gap: 0; }
.contact__track span {
  display: inline-flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); padding-right: clamp(20px, 2.4vw, 40px);
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.045em;
  font-size: clamp(56px, 9vw, 150px); line-height: 1; white-space: nowrap; color: var(--ink);
}
.contact__track span::after { content: ""; width: 0.32em; height: 0.32em; border-radius: 0.09em; background: var(--paper); }

.contact__inner {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start;
  margin-top: clamp(40px, 5vw, 80px);
}
.contact__copy { grid-column: 1 / 7; }
.contact__title {
  font-family: var(--display); font-size: clamp(40px, 5.6vw, 92px); font-weight: 700; text-transform: uppercase;
  line-height: 0.94; letter-spacing: -0.045em; max-width: 12ch;
}
.contact__text { margin-top: 32px; max-width: 24ch; font-size: clamp(24px, 2vw, 30px); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }

.composer {
  grid-column: 8 / 13; display: grid; gap: 14px; padding: clamp(24px, 2.6vw, 40px); border-radius: 22px;
  background: var(--ink); color: var(--paper);
}
.composer__set { border: 0; padding: 0; margin: 0; min-width: 0; }
.composer__label { display: block; font-size: var(--fs-s); font-weight: 700; color: var(--mute-d); padding: 0; margin-bottom: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; margin-bottom: 10px; }
.chip { position: relative; cursor: pointer; touch-action: manipulation; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--ink-3); font-size: 16px; font-weight: 600;
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.chip input:checked + span { background: var(--paper); color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.chip:active span { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .chip:hover input:not(:checked) + span { background: var(--graphite); } }
.composer textarea {
  width: 100%; min-height: 76px; resize: vertical; padding: 14px 16px; border: 0; border-radius: 14px;
  background: var(--ink-2); color: var(--paper); font-size: 16px; line-height: 1.45;
}
.composer textarea::placeholder { color: #8C8D92; }
.composer textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 0; }
.composer__row { display: grid; gap: 6px; }
.composer__opt { font-weight: 500; }
.composer input[type="text"] {
  width: 100%; min-height: 50px; padding: 0 16px; border: 0; border-radius: 14px;
  background: var(--ink-2); color: var(--paper); font-size: 16px;
}
.composer input[type="text"]:focus-visible { outline: 3px solid var(--red); outline-offset: 0; }
.composer__status { padding: 14px 16px; border-radius: 14px; background: var(--ink-2); font-size: 16px; line-height: 1.45; }
.composer__preview { padding: 16px 18px; border-radius: 14px; background: var(--ink-2); margin-bottom: 6px; }
.composer__preview p { font-size: 16px; line-height: 1.5; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: var(--paper); }
.foot__photo { position: relative; overflow: hidden; min-height: 640px; }
.foot__photo img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; filter: grayscale(0.35) contrast(1.05); }
.foot__body {
  display: flex; flex-direction: column; gap: 40px;
  padding: clamp(48px, 5vw, 80px) max(var(--pad), env(safe-area-inset-right)) clamp(40px, 4vw, 56px) clamp(32px, 6vw, 96px);
}
.foot__logo { width: 190px; }
.foot__intro { display: grid; gap: 18px; }
.foot__desc { max-width: 42ch; font-size: 16px; line-height: 1.55; color: var(--mute-d); }
.foot__list { display: grid; gap: 10px; }
.foot__base { display: grid; gap: 14px; margin-top: auto; }
.foot__menu { display: grid; gap: 4px; }
.foot__menu a {
  justify-self: start; font-family: var(--display); font-size: clamp(30px, 2.8vw, 46px); font-weight: 700; letter-spacing: -0.04em;
  text-transform: uppercase; line-height: 1.12; transition: transform 420ms var(--ease-out), color var(--t-med) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .foot__menu:hover a { color: var(--mute-d); }
  .foot__menu a:hover { color: var(--paper); transform: translateX(12px); }
}
.foot__blocks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 16px; }
.foot__h { font-size: var(--fs-s); font-weight: 700; color: var(--mute-d); margin-bottom: 8px; }
.foot__link { position: relative; display: inline-block; padding: 4px 0; font-size: 17px; font-weight: 600; }
.foot__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform-origin: left; transition: transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .foot__link:hover::after { transform: scaleX(0.35); } }
.foot__social { display: grid; gap: 8px; }
.foot__credits { font-size: var(--fs-s); color: var(--mute-d); }
.foot__credits summary { cursor: pointer; font-weight: 700; }
.foot__credits p { margin-top: 10px; max-width: 60ch; }
.foot__legal { font-size: var(--fs-s); color: var(--mute-d); }
.foot__giant { grid-column: 1 / -1; padding: clamp(32px, 4vw, 64px) var(--pad) max(var(--pad), env(safe-area-inset-bottom)); overflow: hidden; }
.foot__giant img { width: 100%; height: auto; transform-origin: 50% 100%; }

/* Botón flotante ------------------------------------------------------------ */
.fab {
  position: fixed; z-index: 60; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 19px; border-radius: 999px;
  background: var(--red); color: var(--paper);
  transform: translateY(150%); opacity: 0; pointer-events: none;
  transition: transform 520ms var(--ease-out), opacity 300ms var(--ease-out), background-color var(--t-med);
  touch-action: manipulation;
}
.fab .ico { width: 24px; height: 24px; }
.fab.is-on { transform: translateY(0); opacity: 1; pointer-events: auto; }
.fab.is-on:active { transform: scale(0.94); }
.fab__label {
  max-width: 0; overflow: hidden; white-space: nowrap; font-size: 18.7px; font-weight: 700;
  transition: max-width 420ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fab:hover { background: var(--red-hi); }
  .fab:hover .fab__label { max-width: 180px; }
}
.menu-open .fab { opacity: 0; pointer-events: none; }
.toast {
  position: fixed; z-index: 90; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); max-width: min(92vw, 460px);
  padding: 14px 20px; border-radius: 16px; background: var(--paper); color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.4;
  translate: -50% 0; transform: translateY(16px); opacity: 0; transition: transform 420ms var(--ease-out), opacity 300ms var(--ease-out);
}
.toast.is-on { transform: translateY(0); opacity: 1; }
.fab.is-nudge .ico { animation: nudge 900ms var(--ease-out) 1; }
@keyframes nudge { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__cta { display: none; } /* en tablet y móvil el WhatsApp vive en el menú y en el botón flotante */
  .nav__menu { display: inline-flex; align-items: center; margin-left: auto; }
}

@media (max-width: 900px) {
  .hero__foot { grid-template-columns: 1fr auto; }
  .hero__actions { grid-column: 1 / -1; grid-row: 2; }
  .scroll-cue { grid-column: 2; grid-row: 1; }

  .cats__head .h-xl { grid-column: 1 / -1; }
  .cats__intro { grid-column: 1 / -1; margin-top: 24px; }
  .cats__grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .cat--tv, .cat--tech, .cat--white, .cat--appl, .cat--toys, .cat--home { grid-column: auto; grid-row: auto; translate: none; }
  .cat--tv { grid-column: 1 / -1; aspect-ratio: 4 / 3.4; }
  .cat--appl { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .cat--tech, .cat--white, .cat--home, .cat--toys { aspect-ratio: 3 / 4; }
  .cat--tech .cat__desc, .cat--white .cat__desc, .cat--home .cat__desc, .cat--toys .cat__desc { display: none; }
  .cat__name { hyphens: auto; -webkit-hyphens: auto; }
  .cats__grid { padding-bottom: 0; }

  .disc__body { display: block; }
  .disc__stage { display: none; }
  .disc__item { min-height: 0; padding-block: 0 72px; gap: 16px; }
  .disc__m { display: block; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 8px; }
  .disc__m img { width: 100%; height: 100%; object-fit: cover; }
  .disc__intro { width: auto; margin-left: 0; }

  .about__grid { display: block; }
  .about__mark { position: static; max-width: 520px; }
  .about__text { margin-top: 56px; }
  .about__cols { grid-template-columns: 1fr; }
  .about__pics { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
  .about__pic { position: static; width: auto; }
  .about__pic--a { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .about__pic--b { grid-column: 2; aspect-ratio: 4 / 3; margin-top: -22%; }

  .trust__grid { grid-template-columns: 1fr; }
  .trust__item, .trust__item:first-child { padding: 36px 0 32px; display: grid; grid-template-columns: 52px 1fr; column-gap: 20px; }
  .trust__item .trust__ico { grid-row: 1 / span 2; width: 44px; height: 44px; }
  .trust__item .trust__h { margin-top: 2px; max-width: none; }
  .trust__item + .trust__item::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; transform-origin: left; } /* taste-skill-ignore: líneas finas pedidas en el brief de optimización */
  .trust-anim .trust__item:not(.is-in)::before { transform: scaleX(0); }

  .contact__inner { display: block; }
  .composer { margin-top: 40px; }

  .foot { grid-template-columns: 1fr; }
  .foot__photo { min-height: 46svh; }
  .foot__body { padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right)); }
}

@media (max-width: 560px) {
  :root { --nav-h: 68px; --fs-hero: 12.6vw; --fs-xl: 9.4vw; }
  .hero__title .line { white-space: normal; max-width: 6.2em; }
  .hero__title { line-height: 0.92; }
  .nav__brand img { width: 160px; }
  :root { --section: 88px; }
  .cats__head { margin-bottom: 36px; }
  .cat__go-x { display: none; }
  .cat--tv .cat__go-x, .cat--appl .cat__go-x { display: inline; }
  .cat__text { padding: 16px; }
  .cat__go { min-height: 36px; padding: 0 12px; font-size: 14px; }
  .trust__rule { margin-top: 36px; }
  .disc__body { margin-top: 48px; }
  .about__grid { margin-top: 40px; }
  .nav__inner { gap: 10px; }
  .hero__stage { min-height: 300px; }
  .hero__rig { --w: min(100cqw - 2 * var(--pad), 210cqh); }
  .about__lead { font-size: 22px; }
  .plate--a { width: 33%; top: 62%; }
  .plate--b { width: 31%; top: 66%; }
  .plate--c { width: 20%; right: 2%; top: -10%; }
  .hero__sub { font-size: 18px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .scroll-cue { display: none; }
  .hero__foot { grid-template-columns: 1fr; gap: 24px; }
  .contact__track span { font-size: 15vw; }
  .foot__blocks { grid-template-columns: 1fr; gap: 28px; }
  .fab { height: 58px; padding: 0 17px; }
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .cat__media img, .cat__link, .cat__name, .ico--arrow, .foot__menu a, .btn::before, .cat__go::before { transition-duration: 1ms !important; }
  .disc__frame img { transition: opacity 300ms linear !important; clip-path: none !important; transform: none !important; opacity: 0; }
  .disc__frame img.is-on { opacity: 1; }
  .scroll-cue__dot { animation: none; opacity: 1; }
}