/* =========================================================
   DRAVIEN — sistema visual
   Negro + dorado (paleta de marca real). Tipografía Anton (títulos),
   Cormorant Garamond (logotipo/acentos), JetBrains Mono (etiquetas),
   Manrope (texto, más redondeada y elegante).
   ========================================================= */

:root{
  --bg: #050505;
  --bg-elevated: #0c0c0b;
  --surface: #0b0a09;
  --surface-2: #121110;
  --border: rgba(242,235,221,.12);
  --border-soft: rgba(242,235,221,.08);
  --text: #f2ebdd;
  --text-muted: rgba(242,235,221,.72);
  --text-faint: rgba(242,235,221,.5);
  --gold: #dba853;
  --gold-bright: #e9c27a;
  --gold-dim: #a17c40;
  --gold-glow: rgba(219,168,83,.18);

  --font-display: 'Anton', sans-serif;
  --font-serif: 'Cormorant Garamond', serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Manrope', sans-serif;

  --max: 1180px;
  --pad: clamp(20px, 5vw, 64px);

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-s: .2s;
  --dur-m: .45s;
  --dur-l: .8s;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .98;
  margin: 0 0 .5em;
  letter-spacing: .015em;
  text-transform: uppercase;
}
h1{ font-size: clamp(2.7rem, 6.4vw, 4.9rem); letter-spacing: .01em; }
h2{
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  text-transform: none;
  line-height: 1.18;
  letter-spacing: .015em;
}
h3, h4{ font-size: clamp(1.3rem, 2.1vw, 1.6rem); text-transform: none; font-family: var(--font-body); font-weight: 600; letter-spacing: normal; line-height: 1.2; margin-bottom: .4em; }
h4{ font-size: 1rem; }
p{ margin: 0 0 1em; color: var(--text-muted); max-width: 62ch; }
p + p{ margin-top: .3em; }
strong{ color: var(--text); font-weight: 700; }
.hl{ color: var(--gold-bright); font-weight: 600; font-style: normal; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
button{ font: inherit; }

::selection{ background: var(--gold-dim); color: #050505; }

/* ---------- Cursor personalizado: punto de precisión + aura magnética ---------- */
/* Dos capas con dos comportamientos distintos a propósito:
   - .cursor-dot: envoltorio de POSICIÓN pura, absolutamente instantánea (translate3d
     en cada mousemove, sin interpolar y sin transition en transform: cero delay).
     Dentro lleva a .cursor-dot-core, que es quien realmente se ve y quien anima su
     propia escala (aparecer/ocultarse/crecer al hacer clic) con SU PROPIO transform,
     para que esa animación nunca compita con la posición del padre.
   - .cursor-aura: un halo dorado que sigue al ratón con un muelle suave (lerp por
     fotograma, nunca con transition CSS) y que además se estira y redondea hasta
     encajar sobre el botón o enlace que tiene debajo, como si el propio cursor
     quedara imantado a la interfaz. Es la misma idea de "magnetismo" que ya usan
     los botones (initMagnetic), llevada también al cursor. */
body.has-custom-cursor, body.has-custom-cursor *{ cursor: none; }

.cursor-dot{
  position: fixed; top: 0; left: 0; width: 0; height: 0;
  z-index: 9999;
  pointer-events: none;
}
.cursor-dot-core{
  position: absolute; top: 0; left: 0;
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 7px 1px rgba(233,194,122,.85);
  opacity: 0;
  transition: opacity .2s linear, transform .18s var(--ease);
}
.cursor-dot-core.is-visible{ opacity: 1; }
.cursor-dot-core.is-hover{ transform: scale(0); }
.cursor-dot-core.is-active{ transform: scale(1.8); }

.cursor-aura{
  position: fixed; top: 0; left: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  border: 1.5px solid rgba(233,194,122,.8);
  background: radial-gradient(circle at 32% 28%, rgba(246,236,214,.16), rgba(233,194,122,.05) 60%, rgba(233,194,122,0) 78%);
  box-shadow: 0 0 24px rgba(233,194,122,.22), inset 0 0 14px rgba(233,194,122,.08);
  animation: cursorAuraBreathe 3.6s ease-in-out infinite;
  /* Posición, tamaño y radio los anima el JS a mano, fotograma a fotograma (muelle),
     así que aquí solo hay transition para lo que SÍ puede ser instantáneo: color y sombra. */
  transition: opacity .25s linear, border-color .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease);
}
.cursor-aura.is-visible{ opacity: 1; }
.cursor-aura.is-hover{
  border-color: rgba(255,255,255,.92);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.1), rgba(233,194,122,.06) 60%, rgba(233,194,122,0) 80%);
  box-shadow: 0 0 30px rgba(233,194,122,.3), inset 0 0 16px rgba(255,255,255,.08);
  animation: none;
}
.cursor-aura.is-active{ box-shadow: 0 0 14px rgba(233,194,122,.35), inset 0 0 10px rgba(233,194,122,.18); }
@keyframes cursorAuraBreathe{ 0%,100%{ opacity: .75; } 50%{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .cursor-aura{ animation: none; } }

.cursor-label{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(3px);
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-bright); text-shadow: 0 1px 6px rgba(0,0,0,.9), 0 0 16px rgba(0,0,0,.6);
  opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease);
  white-space: nowrap; pointer-events: none;
}
.cursor-aura.is-hover .cursor-label{ opacity: 1; transform: translate(-50%, -50%) translateY(0); }

/* ---------- Barra de progreso de scroll ---------- */
.scroll-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: 0 0 12px rgba(233,194,122,.65);
  z-index: 10000; pointer-events: none;
}

/* ---------- Textura de grano cinematográfico ---------- */
.grain-overlay{
  position: fixed; inset: -60px;
  z-index: 6; pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1s steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(-2%,-3%); }
  50%{ transform: translate(2%,2%); }
  75%{ transform: translate(-3%,1%); }
  100%{ transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce){ .grain-overlay{ display: none; } }

/* ---------- Inclinación 3D de tarjetas al pasar el ratón ---------- */
.tilt-card{ transform-style: preserve-3d; }

/* ---------- Glitch RGB en los títulos al pasar el ratón ---------- */
.glitch-hover{ position: relative; }
.glitch-hover::before, .glitch-hover::after{
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.glitch-hover::before{ color: #ff2e63; }
.glitch-hover::after{ color: #2ee6ff; }
.glitch-hover:hover::before{ animation: glitchBefore .4s steps(2,end); }
.glitch-hover:hover::after{ animation: glitchAfter .4s steps(2,end); }
@keyframes glitchBefore{
  0%{ opacity:.8; clip-path: inset(0 0 85% 0); transform: translate(-3px,-1px); }
  25%{ opacity:.8; clip-path: inset(30% 0 45% 0); transform: translate(3px,1px); }
  50%{ opacity:.7; clip-path: inset(60% 0 10% 0); transform: translate(-2px,0); }
  75%{ opacity:.6; clip-path: inset(10% 0 70% 0); transform: translate(2px,-1px); }
  100%{ opacity:0; clip-path: inset(0 0 0 0); transform: translate(0,0); }
}
@keyframes glitchAfter{
  0%{ opacity:.8; clip-path: inset(70% 0 5% 0); transform: translate(3px,1px); }
  25%{ opacity:.8; clip-path: inset(10% 0 60% 0); transform: translate(-3px,-1px); }
  50%{ opacity:.7; clip-path: inset(40% 0 35% 0); transform: translate(2px,0); }
  75%{ opacity:.6; clip-path: inset(0 0 85% 0); transform: translate(-2px,1px); }
  100%{ opacity:0; clip-path: inset(0 0 0 0); transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce){
  .glitch-hover:hover::before, .glitch-hover:hover::after{ animation: none; opacity: 0; }
}

:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.eyebrow{
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.lede{ font-size: 1.12rem; color: var(--text-muted); max-width: 54ch; }

hr.rule{
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding: .95em 1.6em;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:active{ transform: scale(.97); }

.btn-primary{
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #050505;
}
.btn-primary:hover{ box-shadow: 0 0 0 1px var(--gold-bright), 0 8px 30px -8px var(--gold-glow); transform: translateY(-1px); }
.btn-primary::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}
.btn-primary:hover::before{ left:120%; }
@media (prefers-reduced-motion: reduce){ .btn-primary::before{ display:none; } }

.btn-ghost{
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover{ border-color: var(--gold-dim); color: var(--gold-bright); }

.btn-whatsapp{
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-whatsapp:hover{ border-color: #3fae5b; color: #6cd98a; }

.btn-block{ width: 100%; justify-content:center; }
.btn-lg{ padding: 1.1em 2em; font-size: 1.02rem; }

/* ---------- Intro ---------- */
#intro{
  position: fixed; inset:0; z-index: 999;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
#intro.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#intro .mark{ width: 64px; height:64px; opacity:0; transform: scale(.85); animation: markIn .7s var(--ease) .1s forwards; }
#intro .word{ display:none; }
#intro .skip{
  position:absolute; bottom: 28px; right: 28px;
  font-size:.78rem; color: var(--text-faint); background:none; border:none; cursor:pointer;
  padding: 8px 10px; z-index: 2;
}
#intro .skip:hover{ color: var(--gold); }
@keyframes markIn{ to{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){
  #intro .mark, #intro .word, #intro .welcome span{ animation: none; opacity:1; filter:none; transform:none; }
}

/* --- Fondo animado del intro --- */
#intro .intro-bg{
  position:absolute; inset:0; overflow:hidden; z-index:0;
}
#intro .intro-bg::before, #intro .intro-bg::after{
  content:""; position:absolute; border-radius:50%;
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  animation: introDrift 7s ease-in-out infinite alternate;
}
#intro .intro-bg::before{ width:620px; height:620px; top:-220px; left:-160px; }
#intro .intro-bg::after{ width:520px; height:520px; bottom:-220px; right:-140px; animation-delay: -3s; }
#intro .intro-lines{
  position:absolute; inset:0;
  background-image: linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  opacity:.5;
}
@keyframes introDrift{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(30px,-20px) scale(1.08); }
}
#intro > *:not(.intro-bg):not(.intro-lines){ position:relative; z-index:1; }

/* --- "Bienvenido a DRAVIEN" --- */
#intro .welcome{
  margin-top: 26px; text-align:center;
}
#intro .welcome span{
  display:inline-block;
  font-family: var(--font-display); font-weight:400; text-transform:uppercase;
  font-size: clamp(1.7rem, 4.6vw, 2.7rem);
  letter-spacing:-.01em;
  background: linear-gradient(100deg, var(--text) 30%, var(--gold-bright) 50%, var(--text) 70%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip:text; color:transparent;
  opacity:0; transform: translateY(14px);
  animation: welcomeIn 1s var(--ease) forwards, welcomeShine 2.6s linear infinite;
  animation-delay: .35s, 1.3s;
}
@keyframes welcomeIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes welcomeShine{ 0%{ background-position: 200% 0; } 100%{ background-position: -60% 0; } }

/* ---------- Header ---------- */
header.site{
  position: sticky; top:0; z-index: 200;
  background: rgba(10,10,9,.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
}
/* Para que al saltar a una sección (#proyecto, #sobre-dravien) el título no quede
   tapado por la cabecera fija, en ningún tamaño de pantalla. */
section[id]{ scroll-margin-top: 90px; }
header.site .bar{
  display:flex; align-items:center;
  height: 76px;
  gap: 2.4rem;
}
.brand{ display:flex; align-items:center; gap: 1.05em; flex: none; }
.brand-mark{ width: 27px; height:27px; object-fit: contain; }
.brand span{ font-family: var(--font-serif); font-weight:500; letter-spacing:.34em; font-size:1.05rem; text-transform:uppercase; }

nav.primary{ display:flex; align-items:center; gap: 2.3rem; margin-left: auto; }
nav.primary a{
  position:relative; font-size:.93rem; color: var(--text-muted);
  padding: .3em 0; transition: color var(--dur-s) var(--ease);
}
nav.primary a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background: var(--gold); transition: right var(--dur-m) var(--ease);
}
nav.primary a:hover{ color: var(--text); }
nav.primary a:hover::after{ right:0; }
nav.primary a[aria-current="page"]{ color: var(--gold-bright); }
nav.primary a[aria-current="page"]::after{ right:0; }

nav.primary a.nav-contact{
  color: var(--bg); background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  padding: .6em 1.3em; border-radius: 999px;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing:.12em; text-transform:uppercase;
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
nav.primary a.nav-contact::after{ display:none; }
nav.primary a.nav-contact:hover{ color: var(--bg); transform: translateY(-1px); box-shadow: 0 8px 24px -8px var(--gold-glow); }
nav.primary a.nav-contact[aria-current="page"]{ color: var(--bg); }

.burger{
  display:none; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--border); background:none; cursor:pointer;
  position:relative; flex: none;
}
.burger span, .burger span::before, .burger span::after{
  content:""; position:absolute; left:11px; right:11px; height:1.5px; background: var(--text);
  transition: transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.burger span{ top:20px; }
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
.burger.is-open span{ background: transparent; }
.burger.is-open span::before{ transform: translateY(6px) rotate(45deg); }
.burger.is-open span::after{ transform: translateY(-6px) rotate(-45deg); }

.mobile-nav{
  position: fixed; inset: 76px 0 0 0; z-index: 190;
  background: var(--bg); transform: translateY(-8px); opacity:0; visibility:hidden;
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), visibility var(--dur-m);
  display:flex; flex-direction:column; padding: 8vh var(--pad);
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform: translateY(0); }
.mobile-nav a{
  font-family: var(--font-mono); font-size: 1.15rem; letter-spacing:.14em; text-transform:uppercase; padding: .6em 0;
  border-bottom: 1px solid var(--border-soft); color: var(--text);
}
.mobile-nav a[aria-current="page"]{ color: var(--gold-bright); }
.mobile-nav a.nav-contact{
  color: var(--bg); background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-bottom: none; border-radius: var(--radius-s);
  margin-top: 1rem; padding: .75em 1.2em; text-align:center;
}
.mobile-nav a.nav-contact[aria-current="page"]{ color: var(--bg); }

@media (max-width: 900px){
  nav.primary{ display:none; }
  .burger{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding: clamp(70px, 12vw, 130px) 0 clamp(50px, 8vw, 90px);
  overflow: hidden;
}
/* Capa de fondo con textura sutil (parallax lento, ver main.js) — la capa más al fondo */
.bg-parallax{
  position: fixed;
  inset: -15% -15%;
  z-index: -2;
  pointer-events: none;
  opacity: .7;
  background-image:
    linear-gradient(135deg, transparent 48.3%, rgba(219,168,83,.05) 49.3%, rgba(219,168,83,.05) 50.7%, transparent 51.7%),
    linear-gradient(45deg, transparent 48.3%, rgba(219,168,83,.04) 49.3%, rgba(219,168,83,.04) 50.7%, transparent 51.7%);
  background-size: 130px 130px, 170px 170px;
  will-change: transform;
}

/* Focos dorados: fijos respecto al viewport, orbitan por los lados y se encienden/apagan con el scroll (ver main.js) */
.glow{
  position: fixed;
  top: 50%; left: 50%;
  width: 620px; height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(219,168,83,.75), rgba(219,168,83,.28) 42%, transparent 72%);
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
}
.glow--b{ width: 500px; height: 500px; margin: -250px 0 0 -250px; }
@media (max-width: 760px){
  .glow{ width: 380px; height: 380px; margin: -190px 0 0 -190px; }
  .glow--b{ width: 300px; height: 300px; margin: -150px 0 0 -150px; }
}
@media (prefers-reduced-motion: reduce){
  .bg-parallax{ transform: none !important; }
  .glow{ opacity: .3 !important; transform: translate3d(-32vw, -12vh, 0) !important; }
  .glow--b{ opacity: .3 !important; transform: translate3d(32vw, 16vh, 0) !important; }
}
.hero-center{ max-width: 740px; margin: 0 auto; text-align:center; }
.hero h1{ max-width: 15ch; margin-left:auto; margin-right:auto; }
.hero h1 .accent{ color: var(--gold-bright); }
.hero .lede{
  margin-left:auto; margin-right:auto;
  font-family: var(--font-serif); font-style: italic;
  font-size: .98rem; font-weight: 500;
  color: var(--text-faint); letter-spacing: .01em;
  max-width: 44ch;
}
.hero-actions{ display:flex; gap: 1rem; margin-top: 2.3rem; flex-wrap:wrap; justify-content:center; }
.hero-stats{ display:flex; gap: 3rem; margin-top: 3.4rem; justify-content:center; flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family: var(--font-display); font-size: 1.7rem; color: var(--gold-bright); font-weight:400; }
.hero-stats .stat span{ font-size: .82rem; color: var(--text-faint); }

/* CTA principal: más pequeño, tipografía propia y brillo pulsante */
.btn-cta-glow{
  font-family: var(--font-body); font-weight:600; letter-spacing: normal; text-transform:none;
  padding: .72em 1.5em; font-size: .93rem;
  animation: ctaPulse .9s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(219,168,83,.85), 0 4px 22px -4px rgba(219,168,83,.7); }
  50%{ box-shadow: 0 0 0 15px rgba(219,168,83,0), 0 4px 22px -4px rgba(219,168,83,.7); }
}
@media (prefers-reduced-motion: reduce){ .btn-cta-glow{ animation: none; } }

/* ---------- Logo 3D interactivo (hero) ---------- */
.logo3d-frame{
  position: relative;
  aspect-ratio: 1; border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--gold-glow), transparent 70%), var(--surface);
  border: 1px solid var(--border); overflow:hidden;
}
/* Versión discreta: insignia pequeña en la esquina del hero, no protagonista */
.logo3d-frame--hero{
  position: absolute;
  top: 22px; right: 22px;
  width: 92px; height: 92px;
  max-width: 92px;
  margin: 0;
  opacity: .88;
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.6);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.logo3d-frame--hero:hover{ opacity: 1; transform: translateY(-2px); }
#logo3d-canvas{ width:100%; height:100%; display:block; cursor: grab; touch-action: none; }
#logo3d-canvas:active{ cursor: grabbing; }
/* Con el cursor personalizado activo, el aro con "Arrastrar" sustituye al cursor nativo de arrastre */
body.has-custom-cursor #logo3d-canvas, body.has-custom-cursor #logo3d-canvas:active{ cursor: none; }
.logo3d-hint{
  position:absolute; bottom:14px; left:14px;
  font-family: var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--text-faint); pointer-events:none;
}
.logo3d-corner{ position:absolute; width:14px; height:14px; border-color: var(--gold-dim); pointer-events:none; }
.logo3d-corner.tl{ top:12px; left:12px; border-top:1px solid; border-left:1px solid; }
.logo3d-corner.tr{ top:12px; right:12px; border-top:1px solid; border-right:1px solid; }
.logo3d-corner.bl{ bottom:12px; left:12px; border-bottom:1px solid; border-left:1px solid; }
.logo3d-corner.br{ bottom:12px; right:12px; border-bottom:1px solid; border-right:1px solid; }

@media (max-width: 860px){
  .hero-stats{ row-gap: 1.4rem; }
  .logo3d-frame--hero{ display:none; }
}

/* ---------- Secciones generales ---------- */
section{ padding: clamp(60px, 9vw, 110px) 0; }
.section-head{ max-width: 640px; margin-bottom: 3.6rem; }
.section-head .eyebrow{ display:block; margin-bottom: 1.1em; }
.section-head h2{ margin-bottom: .7em; }
.section-head .lede{ margin-top: .5em; }

/* ---------- Titulares cinéticos: reveal palabra a palabra al hacer scroll (ver main.js) ---------- */
.kw{
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
h1.is-visible .kw, h2.is-visible .kw{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .kw{ opacity: 1; transform: none; transition: none; }
}

.divider-top{ border-top: 1px solid var(--border-soft); }

/* ---------- Tarjetas genéricas ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 1.8rem;
  transition: border-color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.card:hover{ border-color: var(--gold-dim); transform: translateY(-3px); }
.card.is-featured{
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border-color: var(--gold-dim);
  box-shadow: 0 20px 50px -30px rgba(219,168,83,.4);
  position: relative;
}
.card.is-featured::before{
  content: "Lo que más me define";
  position:absolute; top:-.7em; left: 1.6rem;
  background: var(--gold); color:#141311;
  font-family: var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  padding: .3em .7em; border-radius: 999px;
}

.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
/* En tablets (iPad incluido) hay sitio de sobra para 2 columnas: pasar a 1 sola
   directamente dejaba muchísimo hueco vacío a los lados de cada tarjeta. */
@media (max-width: 860px){ .grid-3{ grid-template-columns: repeat(2,1fr); } .grid-2{ grid-template-columns: 1fr; } }
@media (max-width: 620px){ .grid-3{ grid-template-columns: 1fr; } }

/* ---------- Problema / puntos ---------- */
.point-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem 2.5rem; margin-top: 2rem; }
.point{ display:flex; gap: .9rem; align-items:flex-start; }
.point .dot{ width: 8px; height:8px; border-radius:50%; background: var(--gold); margin-top:.55em; flex:none; }
.point p{ margin:0; color: var(--text-muted); }
@media (max-width: 700px){ .point-list{ grid-template-columns: 1fr; } }

/* ---------- Yago / personal ---------- */
.person{
  display:grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items:center;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-l);
  padding: clamp(1.8rem, 4vw, 3.2rem);
}
.person-photo{
  aspect-ratio: 4/5; border-radius: var(--radius-m);
  background: linear-gradient(155deg, var(--surface-2), var(--bg-elevated));
  border: 1px dashed var(--border);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-faint); font-size:.85rem; text-align:center; padding: 1rem;
}
@media (max-width: 800px){ .person{ grid-template-columns: 1fr; } }

/* ---------- CTA banda ---------- */
.cta-band{
  border: 1px solid var(--border); border-radius: var(--radius-l);
  background: linear-gradient(140deg, var(--surface), var(--bg-elevated));
  padding: clamp(2.2rem, 5vw, 3.6rem);
  display:flex; align-items:center; justify-content:space-between; gap: 2rem; flex-wrap:wrap;
  position: relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background: radial-gradient(500px 200px at 85% 0%, var(--gold-glow), transparent 70%);
}
.cta-band > *{ position:relative; }
.cta-band h2{ margin-bottom:.25em; }
.cta-band p{ margin:0; }

/* ---------- Timeline (proceso) ---------- */
.timeline{ margin-top: 2rem; }
.tl-step{
  display:grid; grid-template-columns: 90px 1fr; gap: 1.8rem;
  padding: 2.1rem 0; border-top: 1px solid var(--border-soft);
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.tl-step.is-visible{ opacity:1; transform: translateY(0); }
.tl-step:last-child{ border-bottom: 1px solid var(--border-soft); }
.tl-num{ font-family: var(--font-display); font-size: 2.1rem; font-weight:400; color: var(--gold-dim); }
.tl-body h3{ margin-bottom:.3em; }
.tl-body p{ margin:0; max-width: 56ch; }
.tl-step.is-featured{ background: linear-gradient(160deg, var(--surface-2), transparent); border-radius: var(--radius-l); padding-left: 1.4rem; padding-right: 1.4rem; margin: 0 -1.4rem; }
.tl-step.is-featured .tl-num{ color: var(--gold-bright); }
.tl-step.is-featured .tl-body h3::after{
  content: "La fase con más trabajo"; margin-left: .8em; vertical-align: middle;
  font-family: var(--font-mono); font-size: .58rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  color: var(--gold-bright); border: 1px solid var(--gold-dim); border-radius: 999px; padding: .3em .7em;
}
@media (max-width: 640px){ .tl-step{ grid-template-columns: 48px 1fr; } .tl-num{ font-size: 1.4rem; } .tl-step.is-featured{ margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; } .tl-step.is-featured .tl-body h3::after{ display:block; margin: .5em 0 0; width: fit-content; } }
.process-roadmap{ display:flex; align-items:center; gap: 0; margin: 2.4rem 0 0; overflow-x:auto; padding-bottom: .4rem; }
.process-roadmap .rm-node{ display:flex; flex-direction:column; align-items:center; flex: none; width: 92px; text-align:center; }
.process-roadmap .rm-dot{ width: 34px; height:34px; border-radius:50%; border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size:.72rem; color: var(--gold-bright); background: var(--surface); flex:none; }
.process-roadmap .rm-node span{ font-size:.68rem; color: var(--text-faint); margin-top:.5em; letter-spacing:.02em; }
.process-roadmap .rm-line{ flex: 1 0 24px; height:1px; background: var(--border); min-width: 18px; }
.tl-includes{
  list-style:none; padding: 1.2rem 1.4rem; margin-top: 1rem;
  border-radius: var(--radius-m); border: 1px solid var(--gold-dim);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  display:grid; gap: .5rem;
}
.tl-includes li{ font-size:.9rem; color: var(--text-muted); }

/* ---------- Servicios ---------- */
.service{
  border:1px solid var(--border); border-radius: var(--radius-l);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  display:grid; grid-template-columns: .55fr 1fr; gap: 2.5rem;
  background: var(--surface);
}
.service + .service{ margin-top: 1.4rem; }
.service ul{ margin: 1.2rem 0 0; padding: 0; list-style:none; display:grid; gap:.55rem; }
.service ul li{ color: var(--text-muted); padding-left: 1.3em; position:relative; font-size:.95rem; }
.service ul li::before{ content:"—"; position:absolute; left:0; color: var(--gold-dim); }
.service-tag{ color: var(--gold); font-family: var(--font-mono); font-size:.72rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; }
@media (max-width: 800px){ .service{ grid-template-columns: 1fr; } }

/* ---------- Planes ---------- */
.plans{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; align-items: stretch; }
.plan{
  border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: 2rem 1.8rem 2.2rem; display:flex; flex-direction:column;
  background: var(--surface);
  transition: border-color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.plan:hover{ transform: translateY(-4px); border-color: var(--gold-dim); }
.plan.is-featured{
  border-color: var(--gold-dim);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow: 0 0 0 1px var(--gold-dim), 0 30px 60px -30px var(--gold-glow);
}
.plan-badge{
  align-self:flex-start; font-size:.68rem; font-family: var(--font-mono); font-weight:400; letter-spacing:.15em;
  color: var(--gold-bright); border: 1px solid var(--gold-dim); border-radius: 999px;
  padding: .3em .8em; margin-bottom: 1rem;
}
.plan-name{ font-family: var(--font-display); font-size:1.5rem; font-weight:400; letter-spacing:.02em; text-transform:uppercase; margin-bottom:.2em; }
.plan-desc{ font-size:.9rem; color: var(--text-faint); margin-bottom: 1.2rem; }
.plan-price{ font-family: var(--font-display); font-size: 2.3rem; font-weight:400; color: var(--gold-bright); margin-bottom: .1em; }
.plan-price small{ font-size: .95rem; color: var(--text-faint); font-weight:500; }
.plan-features{ list-style:none; padding:0; margin: 1.4rem 0 1.8rem; display:grid; gap:.7rem; flex:1; }
.plan-features li{ font-size: .9rem; color: var(--text-muted); padding-left: 1.4em; position:relative; }
.plan-features li::before{ content:"✓"; position:absolute; left:0; color: var(--gold); font-size:.85em; }
.plan-features li.muted{ color: var(--text-faint); }
.plan-features li.muted::before{ content:"–"; color: var(--text-faint); }
.plan-note{
  margin-top: 3rem; text-align:center; color: var(--text-faint); font-size: .87rem;
}
@media (max-width: 900px){ .plans{ grid-template-columns: 1fr; } .plan.is-featured{ order:-1; } }

/* ---------- Contacto ---------- */
.contact-hero{
  display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:start;
}
@media (max-width: 900px){ .contact-hero{ grid-template-columns: 1fr; } }

.direct-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: clamp(1.8rem, 4vw, 2.6rem);
}
.direct-card .wa-icon{ width:44px; height:44px; margin-bottom: 1.2rem; }
.direct-number{ font-family: var(--font-mono); font-size: 1.2rem; letter-spacing:.05em; color: var(--gold-bright); margin: .3em 0 1.3em; }

/* ---------- Formulario paso a paso ---------- */
.form-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  position: relative;
  min-height: 430px;
  display:flex; flex-direction:column;
}
.form-progress{
  display:flex; align-items:center; gap: 1rem; margin-bottom: 2.2rem;
}
.form-progress-track{ flex:1; height:2px; background: var(--border); border-radius:2px; overflow:hidden; }
.form-progress-fill{ height:100%; width:0%; background: var(--gold); transition: width var(--dur-m) var(--ease); }
.form-progress-label{ font-size:.72rem; color: var(--text-faint); font-family: var(--font-mono); letter-spacing:.15em; text-transform:uppercase; white-space:nowrap; }

.form-steps{ position:relative; flex:1; }
.f-step{
  position:absolute; inset:0; opacity:0; transform: translateX(18px);
  pointer-events:none; transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
  display:flex; flex-direction:column; justify-content:center;
}
.f-step.is-active{ position:relative; opacity:1; transform: translateX(0); pointer-events:auto; }
.f-step.is-leaving{ opacity:0; transform: translateX(-18px); }
.f-step .f-num{ color: var(--gold-dim); font-family: var(--font-mono); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:.6em; }
.f-step label.f-q{ display:block; font-family: var(--font-display); font-size: 1.6rem; font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:1.1; margin-bottom: 1.1rem; }
.f-hint{ font-size:.82rem; color: var(--text-faint); margin-top:-.6rem; margin-bottom:1rem; }

.f-input, .f-textarea{
  width:100%; background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-s); padding: .9em 1em; font-size: 1rem;
  font-family: inherit; transition: border-color var(--dur-s) var(--ease);
}
.f-input:focus, .f-textarea:focus{ border-color: var(--gold-dim); outline:none; }
.f-textarea{ resize: vertical; min-height: 100px; }

.f-options{ display:flex; flex-wrap:wrap; gap: .7rem; }
.f-option{
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted);
  border-radius: 999px; padding: .8em 1.3em; cursor:pointer; font-size:.92rem;
  transition: border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.f-option:hover{ border-color: var(--gold-dim); color: var(--text); }
.f-option.is-selected{ border-color: var(--gold); color: var(--gold-bright); background: var(--surface-2); }

.f-error{ color: #e08a7a; font-size: .82rem; margin-top: .5rem; min-height: 1.2em; }

.form-nav{ display:flex; justify-content:space-between; align-items:center; margin-top: 2rem; }
.form-nav .btn-ghost{ padding: .8em 1.1em; }

.f-summary{ display:grid; gap: .7rem; margin: 1.4rem 0 1.8rem; }
.f-summary-row{ display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--border-soft); padding-bottom:.6rem; font-size:.92rem; }
.f-summary-row span:first-child{ color: var(--text-faint); }
.f-summary-row span:last-child{ text-align:right; max-width: 60%; }

/* ---------- Footer ---------- */
footer.site{
  border-top: 1px solid var(--border-soft);
  padding: 4rem 0 2.2rem;
  background: var(--bg-elevated);
}
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.6rem; }
.footer-brand .brand{ margin-bottom: .9rem; }
.footer-brand p{ max-width: 34ch; font-size:.92rem; }
.footer-col h4{ font-size:.74rem; font-family: var(--font-mono); color: var(--text-faint); letter-spacing:.2em; text-transform:uppercase; margin-bottom: 1rem; }
.footer-col a{ display:block; color: var(--text-muted); font-size:.92rem; padding: .3em 0; transition: color var(--dur-s) var(--ease); }
.footer-col a:hover{ color: var(--gold-bright); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-top: 1.8rem; border-top: 1px solid var(--border-soft); }
.footer-bottom p{ margin:0; font-size:.82rem; color: var(--text-faint); }
.footer-social{ display:flex; gap: 1rem; }
.footer-social a{ font-size:.82rem; color: var(--text-faint); }
.footer-social a:hover{ color: var(--gold-bright); }
@media (max-width: 800px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-top{ grid-template-columns: 1fr; } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ---------- Page hero (páginas internas) ---------- */
.page-hero{ padding: clamp(60px, 10vw, 100px) 0 clamp(20px, 5vw, 40px); }
.page-hero .eyebrow{ display:block; margin-bottom:.8em; }
.page-hero h1{ max-width: 16ch; }

/* Utilidades */
.mt-0{ margin-top:0; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* =========================================================
   Componentes ampliados
   ========================================================= */

/* ---------- Mockups (gráficos corporativos propios, sin fotos) ---------- */
.mockup-frame{
  position: relative; border-radius: var(--radius-l);
  background: linear-gradient(165deg, var(--surface-2), var(--bg-elevated));
  border: 1px solid var(--border); overflow:hidden; padding: 1.4rem;
}
.mockup-frame svg{ width:100%; height:auto; display:block; }
.mockup-caption{
  display:flex; justify-content:space-between; align-items:center;
  margin-top: 1rem; font-size:.8rem; color: var(--text-faint);
}
.mockup-caption .dotgroup{ display:flex; gap:6px; }
.mockup-caption .dotgroup span{ width:7px; height:7px; border-radius:50%; background: var(--border); }

/* ---------- Stats grande (números destacados) ---------- */
.stat-grid-lg{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 2rem; }
.stat-box{ border-top: 1px solid var(--border-soft); padding-top: 1.1rem; }
.stat-box b{ display:block; font-family: var(--font-display); font-size: 2.2rem; font-weight:400; color: var(--gold-bright); }
.stat-box span{ font-size:.85rem; color: var(--text-faint); }
@media (max-width: 800px){ .stat-grid-lg{ grid-template-columns: repeat(2,1fr); } }

/* ---------- Antes / después ---------- */
.before-after{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2rem; }
.ba-card{ border-radius: var(--radius-l); border: 1px solid var(--border); padding: 1.6rem; }
.ba-card.is-before{ background: var(--bg-elevated); opacity: .85; }
.ba-card.is-after{ background: linear-gradient(160deg, var(--surface-2), var(--surface)); border-color: var(--gold-dim); box-shadow: 0 18px 46px -28px rgba(219,168,83,.35); }
.ba-mock{ border-radius: 10px; overflow:hidden; margin-bottom: 1.2rem; line-height:0; border:1px solid var(--border-soft); }
.ba-mock svg{ display:block; width:100%; height:auto; }
.ba-label{ font-family: var(--font-mono); font-size:.72rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; margin-bottom: 1rem; display:inline-block; }
.ba-card.is-before .ba-label{ color: var(--text-faint); }
.ba-card.is-after .ba-label{ color: var(--gold-bright); }
.ba-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.ba-card li{ font-size:.92rem; color: var(--text-muted); padding-left:1.3em; position:relative; }
.ba-card.is-before li::before{ content:"×"; position:absolute; left:0; color: var(--text-faint); }
.ba-card.is-after li::before{ content:"✓"; position:absolute; left:0; color: var(--gold); }
@media (max-width: 700px){ .before-after{ grid-template-columns: 1fr; } }

/* ---------- Valores (sobre Yago) ---------- */
.value-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem 2rem; margin-top: 1.6rem; }
.value-item h4{ font-family: var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:1.05rem; margin-bottom:.35em; color: var(--text); }
.value-item p{ font-size:.92rem; margin:0; }
@media (max-width: 700px){ .value-grid{ grid-template-columns: 1fr; } }

/* ---------- Testimonios (datos de ejemplo) ---------- */
.testimonial-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.testimonial{
  border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface);
  padding: 1.8rem; display:flex; flex-direction:column; gap: 1.1rem;
}
.testimonial .stars{ color: var(--gold); font-size: .9rem; letter-spacing: .15em; }
.testimonial p.quote{ margin:0; color: var(--text); font-size: .96rem; flex:1; }
.testimonial .who{ display:flex; align-items:center; gap:.8rem; }
.testimonial .avatar{
  width:38px; height:38px; border-radius:50%; flex:none;
  background: linear-gradient(135deg, var(--gold-dim), var(--surface-2));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:.9rem; font-weight:400; color: var(--bg);
}
.testimonial .who div span{ display:block; }
.testimonial .who .name{ font-size:.9rem; color: var(--text); font-weight:600; }
.testimonial .who .role{ font-size:.78rem; color: var(--text-faint); }
.example-note{ margin-top: 1.4rem; font-size:.8rem; color: var(--text-faint); }
@media (max-width: 900px){ .testimonial-grid{ grid-template-columns: 1fr; } }

/* ---------- Portfolio / proyectos de ejemplo ---------- */
.portfolio-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.portfolio-card{
  border: 1px solid var(--border); border-radius: var(--radius-m); overflow:hidden; background: var(--surface);
  transition: border-color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.portfolio-card:hover{ border-color: var(--gold-dim); transform: translateY(-3px); }
.portfolio-thumb{ aspect-ratio: 4/3; background: linear-gradient(160deg, var(--surface-2), var(--bg-elevated)); padding: 1rem; }
.portfolio-thumb svg{ width:100%; height:100%; }
.portfolio-body{ padding: 1.2rem 1.3rem 1.4rem; }
.portfolio-tag{ font-size:.68rem; color: var(--gold); font-family: var(--font-mono); font-weight:400; letter-spacing:.15em; text-transform:uppercase; }
.portfolio-body h4{ margin: .4em 0 .25em; font-family: var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.015em; font-size:1.1rem; }
.portfolio-body p{ margin:0; font-size:.88rem; }
@media (max-width: 900px){ .portfolio-grid{ grid-template-columns: 1fr; } }

/* ---------- Tabla comparativa ---------- */
.compare{ width:100%; border-collapse: collapse; margin-top: 2rem; }
.compare th, .compare td{ padding: 1rem 1.1rem; text-align:left; border-bottom: 1px solid var(--border-soft); font-size:.92rem; }
.compare thead th{ font-family: var(--font-mono); font-weight:400; letter-spacing:.1em; text-transform:uppercase; color: var(--text); font-size:.76rem; }
.compare tbody th{ font-weight:500; color: var(--text-muted); }
.compare td{ color: var(--text-muted); text-align:center; }
.compare td.yes{ color: var(--gold-bright); }
.compare td.no{ color: var(--text-faint); }
.compare-scroll{ overflow-x:auto; position: relative; }
/* En móvil la tabla no cabe entera: un degradado en el borde derecho + un texto
   avisan de que hay más columnas deslizando hacia la derecha. */
.compare-scroll::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:34px;
  background: linear-gradient(90deg, transparent, var(--bg) 88%);
  pointer-events:none; opacity:0; transition: opacity .3s var(--ease);
}
.compare-hint{
  display:none; align-items:center; gap:.4em; margin: 1.6rem 0 -.6rem;
  font-family: var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--text-faint);
}
.compare-hint svg{ width:13px; height:13px; animation: compareHintNudge 1.3s ease-in-out infinite; }
@keyframes compareHintNudge{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(4px); } }
@media (max-width: 700px){
  .compare{ min-width: 560px; }
  .compare-scroll::after{ opacity:1; }
  .compare-hint{ display:flex; }
}
@media (prefers-reduced-motion: reduce){ .compare-hint svg{ animation:none; } }

/* ---------- FAQ ---------- */
.faq{ border-top: 1px solid var(--border-soft); }
.faq-item{ border-bottom: 1px solid var(--border-soft); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:none; border:none; color: var(--text); cursor:pointer;
  padding: 1.4rem 0; font-family: var(--font-body); font-size: 1.02rem; font-weight:600; text-align:left;
}
.faq-q .icon{ flex:none; width:20px; height:20px; position:relative; }
.faq-q .icon::before, .faq-q .icon::after{
  content:""; position:absolute; background: var(--gold); border-radius:2px; transition: transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.faq-q .icon::before{ top:9px; left:2px; right:2px; height:2px; }
.faq-q .icon::after{ left:9px; top:2px; bottom:2px; width:2px; }
.faq-item.is-open .faq-q .icon::after{ transform: rotate(90deg); opacity:0; }
.faq-a{
  max-height:0; overflow:hidden; transition: max-height var(--dur-m) var(--ease);
}
.faq-a p{ margin:0 0 1.4rem; font-size:.94rem; max-width: 68ch; }
.faq-item.is-open .faq-a{ max-height: 320px; }

/* ---------- Franja de garantías / badges ---------- */
.badge-row{ display:flex; flex-wrap:wrap; gap: 1.4rem; margin-top: 2rem; }
.badge{
  display:flex; align-items:center; gap:.7rem; font-size:.88rem; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: .7em 1.2em;
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background: var(--gold); }

/* ---------- Extras / add-ons (servicios) ---------- */
.addon-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: 2rem; }
.addon{ border: 1px solid var(--border); border-radius: var(--radius-m); padding: 1.4rem; background: var(--surface); }
.addon h4{ font-family: var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:1.02rem; margin: 0 0 .4em; }
.addon p{ margin:0; font-size:.88rem; }
@media (max-width: 860px){ .addon-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .addon-grid{ grid-template-columns: 1fr; } }

/* ---------- Horario / franja de disponibilidad (contacto) ---------- */
.hours-list{ list-style:none; padding:0; margin: 1.2rem 0 0; display:grid; gap:.6rem; }
.hours-list li{ display:flex; justify-content:space-between; font-size:.92rem; border-bottom:1px solid var(--border-soft); padding-bottom:.5rem; color: var(--text-muted); }
.hours-list li span:last-child{ color: var(--text); }