/* ══════════════════════════════════════════════
   ÁLZARA — experiencia inmersiva
   Paleta: oliva-negro / crema / oro
══════════════════════════════════════════════ */
/* NOTA: los nombres --cream / --gold son heredados del diseño anterior.
   Hoy significan simplemente "tinta" y "acento". No los renombramos para no
   reescribir 1.400 líneas; lo que cambia es su valor.
   NOCHE = Eclipse (monocromo oscuro). DÍA = Papel lunar (claro editorial). */
:root {
  --bg: #0A0A0B;
  --bg-2: #111113;
  --cream: #F5F5F3;
  --cream-60: #9B9BA3;
  --cream-30: #7C7C85;
  --cream-12: #232326;
  --cream-06: #17171A;
  --gold: #F5F5F3;
  --gold-soft: rgba(245, 245, 243, .08);
  --acento: #C9A96A;   /* único color del sitio: la palabra destacada */
  --planeta: #C9A96A;  /* de noche los planetas son dorados */
  --olive: #17171A;
  --serif: "Inter", -apple-system, sans-serif;
  --sans: "Inter", -apple-system, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* El doble toque con el dedo hace zoom en móvil: touch-action es lo único que
   lo apaga de verdad (el meta viewport lo respeta Android, iOS lo ignora desde
   iOS 10). pan-x pan-y deja el desplazamiento y quita zoom de toque y pellizco. */
html {
  scroll-behavior: initial;
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;   /* iOS agranda el texto al girar sin esto */
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(201, 169, 106, .42); color: inherit; }

/* height:auto es imprescindible: los atributos width/height del HTML valen como
   estilo y, si no se anulan, la imagen se estira en vez de guardar su proporción */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ── Fondo WebGL + grano ─────────────────── */
#gl {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  background: var(--bg);   /* evita el negro del canvas antes del primer fotograma */
}
.grain {
  position: fixed; inset: -50%;
  z-index: 1; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: grain 7s steps(8) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) } 25% { transform: translate(-3%,2%) }
  50% { transform: translate(2%,-3%) } 75% { transform: translate(-2%,-2%) }
}

main { position: relative; z-index: 2; }

/* ── Preloader ───────────────────────────── */

/* ── Cursor ──────────────────────────────── */
.cursor { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; }
.cursor__dot {
  position: absolute; top: -3px; left: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
.cursor__ring {
  position: absolute; top: -22px; left: -22px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--cream-30);
  transition: transform .35s var(--ease-out), background .35s, border-color .35s;
}
.cursor__label {
  position: absolute; top: -8px; left: 18px;
  font-size: .6rem; letter-spacing: .25em;
  color: var(--gold);
  opacity: 0; transition: opacity .25s;
  white-space: nowrap;
}
.cursor.is-hover .cursor__ring {
  transform: scale(1.7);
  background: var(--gold-soft);
  border-color: var(--gold);
}
.cursor.is-hover .cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ── HUD ─────────────────────────────────── */
.hud-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  transition: background .5s, backdrop-filter .5s;
}
.hud-top.is-solid {
  /* opaco de verdad: con .55 el contenido se leía por debajo del menú al scrollear */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
}
/* ── Marca: un planeta con su órbita + la palabra, todo tipográfico ──
   Sustituye al logotipo en imagen: escala perfecto, hereda el color del tema
   y no necesita invertirse con filtros al cambiar de día a noche. */
.marca { display: inline-flex; align-items: center; gap: .62em; font-size: clamp(.86rem, 1.1vw, 1rem); }
.marca__orbe {
  position: relative; flex-shrink: 0;
  width: 1.04em; height: 1.04em; border-radius: 50%;
  border: 1px solid var(--cream-30);
}
.marca__orbe::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: .46em; height: .46em; border-radius: 50%;
  background: var(--cream);
}
.marca__txt {
  font-family: var(--sans); font-weight: 600;
  font-size: 1em; letter-spacing: .26em; text-transform: uppercase;
  color: var(--cream); line-height: 1;
}
.hud-logo:hover .marca__orbe { border-color: var(--cream); }
.marca--pie { font-size: 1rem; }
.hud-cta { margin-left: auto; }
.hud-level {
  position: fixed; bottom: 1.6rem; left: clamp(1.2rem, 4vw, 3rem); z-index: 50;
  display: flex; align-items: center; gap: .8rem;
  font-size: .65rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--cream-60);
}
.hud-level__num { color: var(--gold); font-variant-numeric: tabular-nums; }
.hud-level__sep { width: 34px; height: 1px; background: var(--cream-30); }
.hud-dots {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); top: 50%; z-index: 50;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
}
.hud-dots { gap: 4px; }
.hud-dots a {
  width: 24px; height: 24px;
  display: grid; place-items: center;
}
.hud-dots a::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--cream-30);
  transition: background .4s, border-color .4s, transform .4s var(--ease-out);
}
.hud-dots a.is-active::before { background: var(--gold); border-color: var(--gold); transform: scale(1.3); }
.hud-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 2px; background: transparent;
}
.hud-progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--cream));
}
@media (max-width: 720px) { .hud-dots { display: none; } .hud-level { display: none; } }


/* ── Botones ─────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 2rem;
  font-family: var(--sans); font-size: .8rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cream-30);
  color: var(--cream); background: transparent;
  overflow: hidden;
  transition: color .4s, border-color .4s;
}
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--cream);
  transform: translateY(101%); border-radius: inherit;
  transition: transform .5s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--bg); border-color: var(--cream); }
.btn__txt { position: relative; z-index: 1; }
.btn__dot { position: relative; z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.btn--solid { border-color: var(--gold); color: var(--bg); background: var(--gold); }
.btn--solid::before { background: var(--cream); transform: translateY(101%); }
.btn--solid:hover { color: var(--bg); border-color: var(--cream); }

/* ── Secciones base ──────────────────────── */
.sec { position: relative; padding: clamp(2.4rem, 5vh, 3.8rem) clamp(1.2rem, 5vw, 4.5rem); }
.sec-tag {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acento); font-weight: 600; margin-bottom: 1rem;
}
.sec-title {
  font-family: var(--sans); font-weight: 700; letter-spacing: -.035em;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.08; margin-bottom: 1.3rem;
}
.sec-title em { font-style: normal; color: var(--acento); }
.sec-lead { color: var(--cream-60); max-width: 60ch; margin: -.4rem 0 1.9rem; font-size: .95rem; }

/* ── ChatGPT Ads: datos, precios y complemento ── */
.canal, .precios { max-width: 1250px; margin: 0 auto; }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1px;
  background: var(--cream-12); border: 1px solid var(--cream-12); border-radius: 3px; overflow: hidden; }
.dato { background: var(--bg); padding: 1.15rem 1.1rem; }
body.theme-light .dato { background: var(--bg); }
.dato__k { display: block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento); font-weight: 600; margin-bottom: .5rem; }
.dato p { color: var(--cream-60); font-size: .88rem; line-height: 1.55; }
.canal__cierre { margin-top: 1.6rem; color: var(--cream-60); max-width: 62ch; font-size: .95rem; }

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 1rem; }
.tier { border: 1px solid var(--cream-12); border-radius: 6px; padding: 1.4rem 1.25rem;
  background: color-mix(in srgb, var(--cream) 2%, transparent); display: flex; flex-direction: column; }
body.theme-light .tier { background: color-mix(in srgb, var(--cream) 3%, transparent); }
.tier--destacado { border-color: var(--gold); background: var(--gold-soft); }
.tier__cat { font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-30); }
.tier__name { font-family: var(--sans); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .06em; text-transform: uppercase; margin: .5rem 0 .7rem; }
.tier__precio { font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--cream); }
.tier__precio span { font-family: var(--sans); font-size: .7rem; letter-spacing: .1em; color: var(--cream-30); }
.tier__gar { font-size: .78rem; line-height: 1.5; color: var(--acento);
  border-top: 1px solid var(--cream-12); margin-top: 1rem; padding-top: .9rem; }
.tier__lista { list-style: none; margin-top: .9rem; display: grid; gap: .55rem; }
.tier__lista li { position: relative; padding-left: 1.1rem; font-size: .85rem; line-height: 1.5; color: var(--cream-60); }
.tier__lista li::before { content: '·'; position: absolute; left: .25rem; color: var(--gold); font-size: 1.1rem; line-height: 1.2; }

.precios__nota { margin-top: 1.1rem; font-size: .78rem; color: var(--cream-30); }

.hero__nota { margin-top: 1.5rem; font-size: .8rem; line-height: 1.6; color: var(--cream-60); max-width: 56ch; margin-inline: auto; }
.hero__nota a { color: var(--gold); border-bottom: 1px solid transparent; transition: border-color .3s; }
.hero__nota a:hover { border-bottom-color: var(--gold); }

@media (max-width: 640px) {
}

/* ── Bloques de venta (problema · encaje · reglas) ── */
.problema, .encaje, .reglas { max-width: 1250px; margin: 0 auto; }

.hero__trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; list-style: none;
  margin-top: 1.5rem; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cream-30);
}
.hero__trust li { display: flex; align-items: center; gap: .5rem; }
.hero__trust li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
}


.fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.3rem; }
.fit-col {
  border: 1px solid var(--cream-12); border-radius: 3px;
  padding: 2rem 1.7rem; background: color-mix(in srgb, var(--cream) 2%, transparent);
}
.fit-col--si { border-left: 2px solid var(--gold); }
.fit-col--no { border-left: 2px solid var(--cream-12); }
.fit-col__title {
  font-family: var(--sans); font-style: normal; font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.02em; margin-bottom: 1.2rem;
}
.fit-col--si .fit-col__title { color: var(--gold); }
.fit-col--no .fit-col__title { color: var(--cream-30); }
.fit-list { list-style: none; display: grid; gap: .9rem; }
.fit-list li {
  position: relative; padding-left: 1.7rem;
  color: var(--cream-60); font-size: .95rem; line-height: 1.65;
}
.fit-list strong { color: var(--cream); font-weight: 500; }
.fit-col--si .fit-list li::before {
  content: '↑'; position: absolute; left: 0; top: 0; color: var(--gold);
}
.fit-col--no .fit-list li::before {
  content: '×'; position: absolute; left: .15rem; top: 0; color: var(--cream-30);
}

.case__step-time {
  display: block; font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .9rem;
}

.about__cta { margin-top: 2.2rem; }

.contact__pasos {
  list-style: none; display: grid; gap: .8rem;
  max-width: 560px; margin: 0 auto 2.6rem; text-align: left;
}
.contact__pasos li {
  display: flex; align-items: center; gap: .9rem;
  color: var(--cream-60); font-size: .93rem;
}
.contact__pasos span {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold);
  display: grid; place-items: center; font-size: .75rem;
}

[data-reveal], [data-arrive] { opacity: 0; transform: translateY(40px); }
html.no-js [data-reveal], html.reduced [data-reveal],
html.no-js [data-arrive], html.reduced [data-arrive] { opacity: 1; transform: none; }

/* Llegada a un mundo: estos elementos los anima service.js al aterrizar.
   Sin ocultarlos aquí, el navegador pinta la página entera y GSAP la esconde
   un instante después — ese es el parpadeo de "aparece todo y desaparece". */
.page-service .shero__planet,
.page-service .shero__num,
.page-service .shero__flavor,
.page-service .shero__line,
.page-service .shero__lead,
.page-service .shero__scroll,
.page-service .hud-top,
.page-service .hud-level,
.page-service .hud-dots { opacity: 0; }
/* RED DE SEGURIDAD. Todo lo de arriba nace invisible y lo enciende GSAP. Si el
   JS no llega (script cacheado roto, bloqueo del hosting, error en un móvil viejo)
   la página se quedaría en blanco para siempre. Una animación CSS con retardo
   pisa el estilo en línea y fuerza la visibilidad pase lo que pase: a los 3 s la
   llegada, a los 10 s los reveals. Con el JS sano ya están a 1 mucho antes. */
@keyframes sn-aparecer   { to { opacity: 1; } }
@keyframes sn-aparecer-y { to { opacity: 1; transform: none; } }
.page-service .shero__planet,
.page-service .shero__num,
.page-service .shero__flavor,
.page-service .shero__line,
.page-service .shero__lead,
.page-service .shero__scroll,
.page-service .hud-top,
.page-service .hud-level,
.page-service .hud-dots { animation: sn-aparecer 0s linear 3s forwards; }
[data-reveal], [data-arrive] { animation: sn-aparecer-y 0s linear 10s forwards; }

html.no-js .page-service .shero__planet,
html.no-js .page-service .shero__num,
html.no-js .page-service .shero__flavor,
html.no-js .page-service .shero__line,
html.no-js .page-service .shero__lead,
html.no-js .page-service .shero__scroll,
html.no-js .page-service .hud-top,
html.no-js .page-service .hud-level,
html.no-js .page-service .hud-dots { opacity: 1; }

/* ── 01 · Hero ───────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding-top: 7rem; padding-bottom: 6.5rem;
}
.hero__beam {
  position: absolute; top: 0; left: 50%;
  width: clamp(120px, 18vw, 260px); height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--gold) 10%, transparent) 35%, color-mix(in srgb, var(--cream) 16%, transparent) 50%, color-mix(in srgb, var(--gold) 10%, transparent) 65%, transparent 100%);
  filter: blur(28px);
  pointer-events: none;
}
.hero__inner { position: relative; width: 100%; max-width: 1100px; }
.hero__kicker {
  font-size: .7rem; letter-spacing: .4em; text-transform: uppercase;
  color: var(--cream-60); margin-bottom: 1.6rem;
}
.hero__title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.9rem, 7.4vw, 6.4rem);
  text-transform: uppercase;
  line-height: .95; letter-spacing: -.015em;
  margin-bottom: 2rem;
}
.hero__line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hero__word { display: inline-block; will-change: transform; }
.hero__word--gold { color: var(--acento); }
.hero__sub {
  color: var(--cream-60);
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  margin-bottom: 2.4rem;
}
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem .9rem; }
.hero__scroll {
  position: absolute; bottom: 3.2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  color: var(--cream-30); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
}
/* En el hero denso el rótulo chocaba con los accesos directos: queda la línea sola */
.hero .hero__scroll-txt { display: none; }
.hero__scroll-line { width: 1px; height: 52px; background: var(--cream-30); overflow: hidden; position: relative; }
.hero__scroll-line::after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; background: var(--gold);
  transform: translateY(-100%);
  animation: scrollhint 2s var(--ease-out) infinite;
}
@keyframes scrollhint { 0% { transform: translateY(-100%) } 55% { transform: translateY(0) } 100% { transform: translateY(100%) } }
.hero__marquee {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.1rem 0;
  border-top: 1px solid var(--cream-06);
  overflow: hidden;
}
.marquee__track {
  display: flex; white-space: nowrap; width: max-content;
  font-family: var(--sans); font-style: normal;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-30);
}

/* ── 02 · Manifiesto ─────────────────────── */
.js-words .w { color: var(--cream-12); transition: color .3s; }
.js-words .w.on { color: var(--cream); }
.manifesto__pills { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.pill {
  padding: .55rem 1.2rem; border-radius: 999px;
  border: 1px solid var(--cream-12);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-60);
  background: color-mix(in srgb, var(--cream) 3%, transparent);
}

/* ── 03 · Sobre mí ───────────────────────── */
/* el ancho va en la sección, como en el resto: si va en el grid interior
   se suma al relleno lateral y el bloque sobresale del eje de la página */
.sec.about { max-width: 1250px; margin: 0 auto; }
.about__grid {
  display: grid; grid-template-columns: minmax(280px, 460px) 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.about__media { position: relative; }
.about__frame {
  position: relative; border-radius: 14px; overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
}
.about__frame img { aspect-ratio: 4/5; object-fit: cover; width: 100%; filter: saturate(.85) contrast(1.05); }
.about__frame-glow { display: none; }
.about__badge {
  position: absolute; bottom: -1.1rem; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  padding: .7rem 1.4rem; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--cream-12);
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
}
.about__text p { color: var(--cream-60); margin-bottom: 1.4rem; max-width: 60ch; }
.about__text strong { color: var(--cream); font-weight: 500; }
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } .about__media { max-width: 380px; margin: 0 auto 2rem; } }

/* ── 05 · Caso ───────────────────────────── */
.case { max-width: 1250px; margin: 0 auto; }
.case__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem; margin-bottom: 2.4rem;
}
.case__step {
  border: 1px solid var(--cream-12); border-radius: 14px;
  padding: 1.8rem;
  background: color-mix(in srgb, var(--cream) 2.5%, transparent);
}
.case__step-label {
  display: block;
  font-size: .65rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .9rem;
}
.case__step p { color: var(--cream-60); font-size: .95rem; }

/* ── 06 · FAQ ────────────────────────────── */
.faq { max-width: 900px; margin: 0 auto; }
.faq__list { margin-top: 1.6rem; }
.faq__item { border-bottom: 1px solid var(--cream-12); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 0;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  transition: color .3s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold); }
.faq__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--gold);
  transition: transform .4s var(--ease-out);
}
.faq__icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq__icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); }
.faq__body { overflow: hidden; }
.faq__body p { color: var(--cream-60); padding-bottom: 1.6rem; max-width: 65ch; }

/* ── 07 · Contacto ───────────────────────── */
.contact { text-align: center; padding-bottom: 0; }
.contact__title {
  font-weight: 700;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1; margin-bottom: 1.6rem;
}
.contact__title em { font-style: italic; color: var(--gold); }
.contact__sub { color: var(--cream-60); margin-bottom: 2.4rem; }
.contact__form {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  max-width: 760px; margin: 0 auto 2.2rem;
  text-align: left;
}
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .65rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cream-60); }
.field input, .field select, .field textarea {
  background: color-mix(in srgb, var(--cream) 4%, transparent);
  border: 1px solid var(--cream-12);
  border-radius: 10px;
  padding: .95rem 1.1rem;
  color: var(--cream);
  font-family: var(--sans); font-size: .95rem; font-weight: 300;
  transition: border-color .3s, background .3s;
  width: 100%;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23111112'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; }
.field select option { background: var(--bg-2); color: var(--cream); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
}
.field textarea { resize: vertical; min-height: 120px; }
.contact__send { grid-column: 1 / -1; justify-self: center; margin-top: .6rem; }
.contact__direct {
  display: flex; flex-direction: column; gap: .4rem; align-items: center;
  margin-bottom: 3rem;
}
.contact__direct span { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cream-30); margin-bottom: .6rem; }
.contact__direct a {
  font-family: var(--serif); font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  transition: color .3s;
}
.contact__direct a:hover { color: var(--gold); }
@media (max-width: 640px) { .contact__form { grid-template-columns: 1fr; } }

/* ── Footer ──────────────────────────────── */
.footer {
  border-top: 1px solid var(--cream-06);
  padding: 2.2rem 0 5.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
}
.footer__copy { font-size: .75rem; color: color-mix(in srgb, var(--cream) 55%, transparent); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; }
.footer__legal a {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 55%, transparent); transition: color .3s;
}
.footer__legal a:hover { color: var(--gold); }

/* ── Reduced motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .grain { display: none; }
}

/* ── Constelación de servicios (home) ────── */
.cosmos { min-height: 100svh; display: flex; flex-direction: column; }
.cosmos__head { text-align: center; }
.cosmos__sub { color: var(--cream-60); margin-bottom: 1rem; }
.cosmos__map { position: relative; flex: 1; min-height: clamp(320px, 42vh, 460px); }
.cosmos__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.cosmos__lines line { stroke: var(--cream-12); stroke-width: 1; }
.star {
  position: absolute; left: var(--x); top: var(--y);
  translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  text-align: center; z-index: 2;
}
.star__orb {
  position: relative;
  width: clamp(58px, 7vw, 88px); height: clamp(58px, 7vw, 88px);
  border-radius: 50%;
  background-color: var(--planeta);
  box-shadow: none;
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
.star__orb::after {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 1px solid var(--cream-12); opacity: 1;
}
@keyframes halo {
  0% { transform: scale(.75); opacity: .5; }
  100% { transform: scale(1.75); opacity: 0; }
}
.star:hover .star__orb { transform: scale(1.12); }
.star__num { font-size: .62rem; letter-spacing: .34em; color: var(--star, var(--gold)); }
.star__name { font-family: var(--serif); font-weight: 500; font-size: clamp(.92rem, 1.15vw, 1.08rem); line-height: 1.2; }
.star__hook {
  font-family: var(--serif); font-style: italic;
  font-size: .95rem; color: var(--cream-60);
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s, transform .4s var(--ease-out);
}
.star:hover .star__hook { opacity: 1; transform: translateY(0); }
@media (max-width: 899px) {
  .cosmos__map { min-height: 0; display: flex; flex-direction: column; gap: 1.9rem; padding: 1.2rem 0 0; }
  .cosmos__lines { display: none; }
  .cosmos__map::before {
    content: ""; position: absolute;
    left: clamp(28px, 3.5vw, 44px); top: 2.4rem; bottom: 2.2rem;
    width: 1px; background: var(--cream-12);
  }
  .star {
    position: static; translate: none;
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 1.15rem; align-items: center;
    justify-items: start; text-align: left;
  }
  .star__orb { grid-row: 1 / 4; width: clamp(54px, 7vw, 64px); height: clamp(54px, 7vw, 64px); }
  .star__orb::after { animation-duration: 4.5s; }
  .star__hook { opacity: .6; }
}

/* ── Destello de viaje warp ──────────────── */
/* En modo día el destello no puede acabar en negro: el viaje se mantiene claro
   de principio a fin en vez de saltar claro → oscuro → claro */

/* ── Páginas de servicio ─────────────────── */
.page-service { --accent: var(--cream); --accent-txt: var(--cream); }
/* Sobre crema, acentos claros como var(--cream-30) desaparecen: el TEXTO usa una versión
   oscurecida del acento; los planetas y destellos siguen con el color original. */
body.theme-light.page-service { --accent-txt: var(--cream); }
/* dentro del miniverso (cielo nocturno) el acento vuelve a ser el original */
.shero {
  min-height: 88svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.shero__planet {
  position: absolute; left: 50%; bottom: -104vw;
  /* centrado con `translate`, NO con `transform`: GSAP anima el transform de este
     planeta y borraría el translateX(-50%), que es el salto lateral al aterrizar */
  translate: -50% 0;
  /* Horizonte, no bola: el planeta es enorme pero solo asoma su borde superior
     (~16vw), así el texto nunca cae encima de él. Diámetro y hundimiento van
     los dos en vw para que la porción visible sea igual en cualquier pantalla. */
  width: 120vw; aspect-ratio: 1; border-radius: 50%;
  background-color: var(--planeta);
  box-shadow: none;
  pointer-events: none;
}
@media (max-width: 899px) {
  .shero__planet { width: 190vw; bottom: -168vw; }
}
/* ChatGPT Ads llega con más contenido que el resto de mundos (botones, avales
   y nota): sin este colchón las últimas líneas caen sobre el horizonte. */
.page-ads .shero { min-height: 100svh; padding-bottom: clamp(7rem, 20vw, 16rem); }
@media (max-width: 899px) { .page-ads .shero { padding-bottom: 27vw; } }

/* En contacto el planeta vivía dentro de una sección larguísima y acababa
   detrás del formulario: ahí el cielo del shader ya hace el trabajo. */
.shero.contact .shero__planet { display: none; }
.shero__planet::before, .shero__planet::after { content: ""; position: absolute; border-radius: 50%; }
/* variantes de planeta */
.planet--orbit::after {
  inset: -9%; border-radius: 50%;
  border: 1px solid var(--accent); opacity: .55;
  transform: rotateX(72deg);
  animation: orbitspin 14s linear infinite;
}
@keyframes orbitspin { to { transform: rotateX(72deg) rotate(360deg); } }
.planet--star { box-shadow: none; }
.planet--star::after {
  inset: 24%; border-radius: 50%;
  background: radial-gradient(circle, var(--bg-2) 0%, transparent 65%);
  animation: starbreath 4.5s ease-in-out infinite alternate;
}
@keyframes starbreath { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.06); } }
.planet--grid::before {
  inset: 0; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, color-mix(in srgb, var(--cream) 10%, transparent) 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 34px, color-mix(in srgb, var(--cream) 10%, transparent) 34px 35px);
  -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 70%);
  mask-image: radial-gradient(circle, #000 62%, transparent 70%);
}
.planet--pulse::after {
  inset: -4%; border: 1px solid var(--accent); opacity: 0;
  animation: pulsering 2.8s ease-out infinite;
}
.planet--pulse::before {
  inset: -14%; border: 1px solid var(--accent); border-radius: 50%; opacity: 0;
  animation: pulsering 2.8s ease-out infinite 1.4s;
}
@keyframes pulsering {
  0% { transform: scale(.86); opacity: .6; }
  100% { transform: scale(1.35); opacity: 0; }
}
.shero__inner { position: relative; z-index: 2; max-width: 1050px; padding: 0 1.2rem; }
.shero__num { font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; color: var(--accent-txt); margin-bottom: 1rem; }
.shero__flavor { font-family: var(--serif); font-style: italic; font-size: clamp(.92rem, 1.2vw, 1.08rem); color: var(--cream-60); margin-bottom: 1.1rem; }
.shero__title {
  font-weight: 700;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  line-height: 1.02; margin-bottom: 2rem;
}
.shero__title em { font-style: normal; color: var(--acento); }
.shero__linewrap { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.shero__line { display: inline-block; will-change: transform; }
.shero__lead { color: var(--cream-60); max-width: 62ch; margin: 0 auto 1.6rem; font-size: clamp(.95rem, 1.4vw, 1.12rem); }
.shero__scroll {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  color: var(--cream-30); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
}
.shero__scroll .hero__scroll-line { width: 1px; height: 44px; background: var(--cream-30); overflow: hidden; position: relative; }
.shero__scroll .hero__scroll-line::after {
  content: ""; position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%; background: var(--accent);
  animation: scrollhint 2s var(--ease-out) infinite;
}

/* el problema */
.sprob { max-width: 1000px; margin: 0 auto; }
.sprob__text {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.42;
}

/* la solución */
.ssol { max-width: 1250px; margin: 0 auto; }
.ssol__intro { color: var(--cream-60); max-width: 68ch; margin-bottom: 1.8rem; font-size: 1.05rem; }
.ssol__intro strong { color: var(--cream); font-weight: 500; }
.sol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.3rem; }
.sol-card {
  border: 1px solid var(--cream-12); border-radius: 14px;
  padding: 1.7rem;
  background: color-mix(in srgb, var(--cream) 2.5%, transparent);
  transition: border-color .4s, background .4s;
}
.sol-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--cream) 5%, transparent); }
.sol-card__n { display: block; font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--accent-txt); margin-bottom: .7rem; }
.sol-card p { color: var(--cream-60); font-size: .95rem; }
.sol-card strong { color: var(--cream); font-weight: 500; }

/* el ascenso */
.asc { max-width: 860px; margin: 0 auto; position: relative; }
.asc__rail {
  position: absolute; left: 25px; top: 8.5rem; bottom: 2rem; width: 1px;
  background: var(--cream-12);
}
.asc__line-fill { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--accent), var(--cream)); }
.asc__step { position: relative; padding-left: 78px; margin-bottom: 2.1rem; opacity: .3; transform: translateX(8px); transition: opacity .35s, transform .35s var(--ease-out); }
.asc__step.is-lit { opacity: 1; transform: translateX(0); }
.asc__dot {
  position: absolute; left: 12px; top: .2rem;
  width: 27px; height: 27px; border-radius: 50%;
  border: 1px solid var(--cream-30);
  display: grid; place-items: center;
  font-size: .62rem; color: var(--cream-60);
  background: var(--bg);
  transition: all .5s;
}
.asc__step.is-lit .asc__dot {
  border-color: var(--accent); color: var(--bg);
  background: var(--accent);
  box-shadow: none;
}
.asc__step h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.28rem); margin-bottom: .5rem; }
.asc__step p { color: var(--cream-60); max-width: 60ch; }

/* beneficios + stat */
.sben { max-width: 1250px; margin: 0 auto; }
.sben .sol-grid { margin-bottom: 2.2rem; }
.sben__stat { display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap; }
.sben__stat-num {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1;
  color: var(--accent-txt); font-variant-numeric: tabular-nums;
}
.sben__stat-label { font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cream-60); max-width: 230px; line-height: 1.8; }

/* despegue (CTA final) */
.scta { text-align: center; padding-bottom: 4rem; }
.scta__title {
  font-weight: 700;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.02; margin-bottom: 1.4rem;
}
.scta__title em { font-style: normal; color: var(--acento); }
.scta__sub { color: var(--cream-60); margin-bottom: 2.6rem; }
.scta__legal { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1.3rem; justify-content: center; }
.scta__legal a { font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 55%, transparent); transition: color .3s; }
.scta__legal a:hover { color: var(--accent-txt); }

/* ── Acceso rápido a los mundos (hero) ───── */
.hero__quick {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .6rem 1.6rem; margin-top: 2.2rem;
}
.hero__quick a {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cream-60);
  transition: color .3s;
}
.hero__quick a:hover { color: var(--cream); }
.hero__quick i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c, var(--gold));
  box-shadow: none;
}

/* gancho de las estrellas siempre legible */
.star__hook { opacity: .85; transform: none; }
.star:hover .star__hook { opacity: 1; }

/* ── Interruptor día / noche ─────────────── */
.hud-tema { margin-right: 1.2rem; }
.hud-tema, .tema-btn {
  position: relative; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--cream-12); background: transparent;
  cursor: pointer; transition: border-color .3s, background .3s;
}
.hud-tema:hover, .tema-btn:hover { border-color: var(--gold); background: var(--cream-06); }
.tema__sol, .tema__luna {
  position: absolute; inset: 0; margin: auto;
  width: 13px; height: 13px; border-radius: 50%;
  transition: opacity .35s, transform .35s var(--ease-out);
}
/* luna: un círculo dorado al que otro círculo le muerde un lado */
.tema__luna { box-shadow: inset -4px -1px 0 0 var(--gold); }
/* sol: círculo lleno con corona */
.tema__sol {
  background: var(--gold);
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--gold-soft);
  opacity: 0; transform: scale(.4) rotate(-40deg);
}
.hud-tema.is-dia .tema__luna, .tema-btn.is-dia .tema__luna { opacity: 0; transform: scale(.4) rotate(40deg); }
.hud-tema.is-dia .tema__sol, .tema-btn.is-dia .tema__sol { opacity: 1; transform: none; }

.drawer__tema {
  display: flex; align-items: center; gap: .85rem;
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--cream-12);
}
.drawer__tema span {
  font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--cream-30);
}

/* ── Botón Mapa + Mapa del universo ──────── */
  50% { opacity: 1; }
}

.cmodal__close {
  position: absolute; top: 1.4rem; right: clamp(1.4rem, 4vw, 2.4rem);
  width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 5%, transparent);
  border: 1px solid var(--cream-12); cursor: pointer;
  transition: background .3s, transform .4s var(--ease-out);
}
.cmodal__close span {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 1.5px; background: var(--cream);
}
.cmodal__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.cmodal__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.cmodal__close:hover { background: var(--gold); transform: rotate(90deg); }
.cmodal__close:hover span { background: var(--bg); }
@media (max-width: 700px) {
}


/* cielo y constelación del mapa del universo */
@keyframes twinkle { from { opacity: .08; } to { opacity: .85; } }


/* ── Mini-universo inline (pie de página) ── */
.miniverse { margin-top: 3.2rem; }
.miniverse__title {
  font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 500; margin-bottom: 2.2rem;
}
.miniverse__title em { font-style: italic; color: var(--accent, var(--gold)); }
.miniverse__map { position: relative; height: 340px; max-width: 1050px; margin: 0 auto; }
.miniverse__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.miniverse__map line { stroke: color-mix(in srgb, var(--cream) 16%, transparent); stroke-width: 1; }
.mv-dest {
  position: absolute; left: var(--x); top: var(--y);
  translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  text-align: center;
}
.mv-orb {
  position: relative;
  width: clamp(44px, 4.6vw, 62px); height: clamp(44px, 4.6vw, 62px);
  border-radius: 50%;
  background-color: var(--planeta);
  box-shadow: none;
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
.mv-orb::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid var(--c); opacity: .4;
  animation: halo 3.2s ease-out infinite;
}
.mv-dest:hover .mv-orb { transform: scale(1.12); }
.mv-num { font-size: .58rem; letter-spacing: .34em; color: var(--c, var(--gold)); }
.mv-name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(.95rem, 1.4vw, 1.2rem); line-height: 1.15;
  max-width: 170px;
}
.mv-dest:hover .mv-name { color: var(--cream); }
.mv-dest.is-here .mv-orb { outline: 1px solid var(--cream-30); outline-offset: 6px; }
.mv-here { font-size: .52rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent, var(--gold)); }
@media (max-width: 700px) {
  .miniverse__map { height: auto; display: flex; flex-direction: column; gap: 1.5rem; padding: .6rem 0 0; }
  .miniverse__map svg { display: none; }
  .mv-dest {
    position: static; translate: none;
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 1.1rem; align-items: center;
    justify-items: start; text-align: left;
    width: min(340px, 86vw); margin: 0 auto;
  }
  .mv-orb { grid-row: 1 / 4; }
  .mv-name { max-width: none; }
}


/* ── Móvil: todo cabe y respira justo ────── */
@media (max-width: 640px) {
  .sec { padding-top: 2.6rem; padding-bottom: 2.6rem; }
  .hero { padding-top: 5.5rem; padding-bottom: 6.5rem; }
  .hero__kicker { font-size: .58rem; letter-spacing: .26em; margin-bottom: 1.5rem; }
  .hero__title { font-size: clamp(1.5rem, 8vw, 2.4rem); margin-bottom: 1.1rem; }
  .hero { min-height: auto; padding-top: 6.5rem; padding-bottom: 5rem; }
  .hero__sub { font-size: .9rem; margin-bottom: 1.7rem; }
  .hero__cta { justify-content: center; align-items: center; }
  .hero__trust { font-size: .64rem; gap: .4rem 1rem; margin-top: 1.2rem; }
  .fit-col { padding: 1.5rem 1.2rem; }
  .hero__quick { gap: .5rem 1.1rem; margin-top: 1.5rem; }
  .hero__scroll { display: none; }        /* el hero ya no ocupa toda la pantalla: la flecha sobraba y chocaba */
  .btn { font-size: .66rem; letter-spacing: .13em; padding: .85rem 1.4rem; max-width: 100%; }
  .btn__txt { white-space: normal; }
  .sec-title { font-size: clamp(1.9rem, 8.5vw, 2.7rem); }
  .shero { min-height: 78svh; }
  .shero__title { font-size: clamp(2rem, 10vw, 3rem); margin-bottom: 1.3rem; }
  .shero__flavor { margin-bottom: 1.2rem; }
  .sprob__text { font-size: clamp(1.25rem, 5.6vw, 1.7rem); }
  .contact__title { font-size: clamp(2.2rem, 11vw, 3.6rem); }
  .scta__title { font-size: clamp(2rem, 10vw, 3rem); }
  .asc__step { padding-left: 62px; margin-bottom: 1.7rem; }
  .asc__rail { left: 19px; top: 7rem; }
  .asc__dot { left: 6px; }
  .miniverse { margin-top: 2.2rem; }
}

/* botón de efectos de viaje */
@keyframes fxpulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ── Portfolio ────────────────────────────── */
.pf-group { max-width: 1250px; margin: 0 auto; }
.pf-item {
  display: grid; grid-template-columns: minmax(280px, 480px) 1fr;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: 2.6rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid var(--cream-12); border-radius: 18px;
  background: color-mix(in srgb, var(--cream) 2.5%, transparent);
  transition: border-color .5s;
}
.pf-item:hover { border-color: var(--c, var(--gold)); }
.pf-item:nth-of-type(even) { grid-template-columns: 1fr minmax(280px, 480px); }
.pf-item:nth-of-type(even) .pf-media { order: 2; }
.pf-media { position: relative; border-radius: 12px; overflow: hidden; transform-style: preserve-3d; }
.pf-media img { aspect-ratio: 4/3; object-fit: cover; width: 100%; filter: saturate(.9) contrast(1.04); transition: transform .8s var(--ease-out); }
.pf-item:hover .pf-media img { transform: scale(1.05); }
.pf-meta { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--c, var(--gold)); margin-bottom: .7rem; }
.pf-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.1; margin-bottom: .9rem; }
.pf-reto { color: var(--cream-60); font-size: .95rem; margin-bottom: 1.1rem; }
.pf-reto strong { color: var(--cream); font-weight: 500; }
.pf-label { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cream-30); margin-bottom: .5rem; }
.pf-stats { display: flex; flex-wrap: wrap; gap: 1.1rem 2.2rem; border-top: 1px solid var(--cream-12); padding-top: 1.1rem; }
.pf-stat { display: flex; flex-direction: column; }
.pf-num { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; color: var(--c, var(--gold)); font-variant-numeric: tabular-nums; }
.pf-cap { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-60); margin-top: .25rem; max-width: 150px; }
@media (max-width: 899px) {
  .pf-item, .pf-item:nth-of-type(even) { grid-template-columns: 1fr; }
  .pf-item:nth-of-type(even) .pf-media { order: 0; }
}

/* tarjetas de proyecto (home + órbitas) */


/* ── Menú superior + drawer lateral ──────── */
.hud-nav {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 1.5rem;
}
.hud-nav a {
  position: relative;
  font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-60); padding: .3rem 0;
  transition: color .3s;
}
.hud-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.hud-nav a:hover { color: var(--cream); }
.hud-nav a:hover::after { transform: scaleX(1); }
.hud-nav a.is-active { color: var(--gold); }
.hud-nav a.is-active::after { transform: scaleX(1); }

.hud-burger {
  display: none;
  width: 42px; height: 42px; margin-left: 1rem;
  border: 1px solid var(--cream-12); border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 50%, transparent); cursor: pointer;
  position: relative; flex-shrink: 0;
}
.hud-burger span {
  position: absolute; left: 12px; right: 12px;
  height: 1.5px; background: var(--cream);
  transition: transform .4s var(--ease-out), opacity .3s, top .4s var(--ease-out);
}
.hud-burger span:nth-child(1) { top: 15px; }
.hud-burger span:nth-child(2) { top: 20px; }
.hud-burger span:nth-child(3) { top: 25px; }
.hud-burger.is-open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.hud-burger.is-open span:nth-child(2) { opacity: 0; }
.hud-burger.is-open span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

@media (max-width: 1099px) {
  .hud-nav { display: none; }
  .hud-burger { display: block; }
}
@media (max-width: 480px) { .hud-cta { display: none; } }

.drawer-back {
  position: fixed; inset: 0; z-index: 95;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s, visibility .4s;
}
.drawer-back.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 96;
  width: min(330px, 88vw);
  background: linear-gradient(200deg, #171a0f, var(--bg) 60%);
  border-left: 1px solid var(--cream-12);
  transform: translateX(102%);
  transition: transform .55s var(--ease-out);
  display: flex; flex-direction: column;
  padding: 5.2rem 2rem 1.8rem;
  overflow-y: auto;
}
.drawer.is-open { transform: none; }
.drawer__title {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 500;
  color: var(--cream-60); margin-bottom: 1.6rem;
}
.drawer__title em { font-style: italic; color: var(--gold); }
.dlink {
  display: flex; align-items: center; gap: .95rem;
  padding: .68rem 0;
  font-family: var(--serif); font-weight: 500; font-size: 1.35rem;
  border-bottom: 1px solid var(--cream-06);
  transition: color .3s, padding-left .3s;
}
.dlink:hover { color: var(--gold); padding-left: .4rem; }
.dlink i {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  background-color: var(--planeta);
  box-shadow: none;
}
.dlink small {
  font-family: var(--sans); font-size: .55rem; letter-spacing: .3em;
  color: var(--cream-30); display: block; line-height: 1;
}
.dlink.is-active { color: var(--gold); }
.dlink__here {
  margin-left: auto;
  font-family: var(--sans); font-style: normal;
  font-size: .52rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--cream-30);
}
.drawer__foot {
  margin-top: auto; padding-top: 1.6rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.drawer__foot a { font-family: var(--serif); font-size: 1.05rem; color: var(--cream-60); transition: color .3s; }
.drawer__foot a:hover { color: var(--gold); }


/* ── Página de proyecto ───────────────────── */
.pj-hero { min-height: 62svh; }
.pj-coversec { max-width: 1250px; margin: 0 auto; }
.pj-cover { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.pj-cover img { width: 100%; aspect-ratio: 21/9; object-fit: cover; filter: saturate(.9) contrast(1.04); }
.pj-ficha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.1rem; margin-top: 1.6rem;
  border: 1px solid var(--cream-12); border-radius: 14px;
  padding: 1.4rem 1.6rem;
  background: color-mix(in srgb, var(--cream) 2.5%, transparent);
}
.pj-ficha span { display: block; font-size: .56rem; letter-spacing: .28em; text-transform: uppercase; color: var(--cream-30); margin-bottom: .3rem; }
.pj-ficha strong { font-weight: 400; font-family: var(--serif); font-size: 1.05rem; color: var(--cream); }
.pj-galsec { max-width: 1250px; margin: 0 auto; }
.pj-gal { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.pj-gal__item { position: relative; border-radius: 14px; overflow: hidden; transform-style: preserve-3d; }
.pj-gal__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: saturate(.9); }
.pj-entregables { margin-top: 2rem; }
.pj-stats { border-top: none; padding-top: 0; gap: 1.4rem 3rem; }
.pj-stats .pf-num { font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--accent); }
.pj-quote {
  margin-top: 2.4rem; padding: 1.8rem 2rem;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--cream) 3%, transparent);
  border-radius: 0 14px 14px 0;
  max-width: 720px;
}
.pj-quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.5; margin-bottom: .8rem; }
.pj-quote cite { font-style: normal; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cream-30); }
.pf-open {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.4rem;
  font-size: .7rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--c, var(--gold));
}
.pf-open i {
  font-style: normal;
  transition: transform .35s var(--ease-out);
}
.pf-open:hover i { transform: translateX(6px); }
a.pf-media { display: block; cursor: pointer; }
@media (max-width: 700px) { .pj-gal { grid-template-columns: 1fr; } .pj-cover img { aspect-ratio: 16/10; } }


/* botones del despegue: centrados y con aire */
.scta__btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; }


/* ── Popup de contacto ────────────────────── */
.cmodal {
  position: fixed; inset: 0; z-index: 97;
  display: grid; place-items: center;
  padding: 1rem;
  visibility: hidden;
  transition: visibility .45s;
}
.cmodal.is-open { visibility: visible; }
.cmodal__back {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transition: opacity .45s;
}
.cmodal.is-open .cmodal__back { opacity: 1; }
.cmodal__panel {
  position: relative;
  width: min(680px, 94vw); max-height: 88svh; overflow-y: auto;
  background: linear-gradient(200deg, #171a0f, var(--bg) 60%);
  border: 1px solid var(--cream-12); border-radius: 18px;
  padding: 2.6rem clamp(1.4rem, 4vw, 2.8rem) 2.2rem;
  transform: translateY(28px) scale(.97); opacity: 0;
  transition: transform .5s var(--ease-out), opacity .45s;
  overscroll-behavior: contain;
}
.cmodal.is-open .cmodal__panel { transform: none; opacity: 1; }
.cmodal__close { top: 1rem; right: 1rem; width: 44px; height: 44px; }
.cmodal__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.05;
  margin-bottom: .5rem;
}
.cmodal__title em { font-style: italic; color: var(--accent, var(--gold)); }
.cmodal__sub { color: var(--cream-60); font-size: .92rem; margin-bottom: 1.8rem; }
.cmodal__form { margin: 0; max-width: none; }


/* ── Tema cielo (dentro del planeta Portfolio) ── */
body.theme-light {
  --bg: #F3F2EE;
  --bg-2: #FBFAF7;
  --cream: #111112;
  --cream-60: #5A5A54;
  --cream-30: #76766E;
  --cream-12: #DFDED8;
  --cream-06: #EBEAE5;
  --gold: #111112;
  --gold-soft: rgba(17, 17, 18, .06);
  --acento: #8A6B22;
  --planeta: #111112;  /* de día, tinta */
  background: var(--bg);
}
body.theme-light .grain { opacity: 0; }
body.theme-light .hud-top.is-solid {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  box-shadow: 0 10px 30px -20px color-mix(in srgb, var(--cream) 50%, transparent);
}
body.theme-light .drawer,
body.theme-light .cmodal__panel { background: linear-gradient(200deg, var(--bg), var(--bg) 60%); }
body.theme-light .asc__step.is-lit .asc__dot { color: var(--bg); }
body.theme-light .btn--solid { color: var(--bg); }
body.theme-light .sol-card, body.theme-light .pj-ficha, body.theme-light .pj-quote { background: color-mix(in srgb, var(--cream) 4%, transparent); }
body.theme-light .fit-col { background: color-mix(in srgb, var(--cream) 4%, transparent); }

/* ── Planetas sobre crema ──
   El degradado oscuro del tema noche ensucia la esfera sobre fondo claro.
   Aquí el planeta se apoya en el crema: sombra proyectada en vez de borde negro. */
body.theme-light .star__orb,
body.theme-light .star__orb::after { border-color: var(--cream-12); opacity: 1; }
body.theme-light .star:hover .star__orb { box-shadow: none; }
body.theme-light .cosmos__lines line { stroke: var(--cream-12); }
body.theme-light .star__num { color: var(--cream-60); }

/* El planeta grande de cada mundo: sobre crema no puede terminar en negro */
body.theme-light .shero__planet {
  background-color: var(--planeta);
  box-shadow: none;
}
body.theme-light .planet--star { box-shadow: none; }
body.theme-light .shero__planet::before,
body.theme-light .shero__planet::after { opacity: .38; }
body.theme-light .fit-col--no { border-left-color: color-mix(in srgb, var(--cream) 18%, transparent); }
body.theme-light ::selection { background: rgba(190, 152, 62, .45); color: inherit; }




/* despegue de las páginas-cielo: sección nocturna */




/* durante el salto, el fondo (con sus estelas) pasa por encima del contenido */


/* ── Control de volumen de la música ──────── */
 50% { transform: scaleY(1); } }

@media (max-width: 520px) {
}


/* ── Estados del formulario ───────────────── */
.form-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-note {
  grid-column: 1 / -1;
  margin-top: .4rem; min-height: 1.2rem;
  font-size: .82rem; letter-spacing: .02em; text-align: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s, transform .35s var(--ease-out);
}
.form-note.is-wait, .form-note.is-ok, .form-note.is-err { opacity: 1; transform: none; }
.form-note.is-wait { color: var(--cream-60); }
.form-note.is-ok { color: var(--gold); }
.form-note.is-err { color: #e08a6a; }
.form-note a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.contact__send:disabled { opacity: .6; cursor: wait; }


/* ── Zona legal ───────────────────────────── */
.legal { padding-top: 8.5rem; }
.legal__inner { max-width: 860px; margin: 0 auto; }
.legal__fecha { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cream-30); margin-bottom: 2.6rem; }
.legal h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  margin: 2.4rem 0 .8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--cream-06);
}
.legal p { color: var(--cream-60); margin-bottom: 1rem; font-size: .95rem; }
.legal strong { color: var(--cream); font-weight: 500; }
.legal ul { margin: 0 0 1.2rem 1.2rem; color: var(--cream-60); font-size: .95rem; }
.legal li { margin-bottom: .5rem; padding-left: .25rem; }
.legal li::marker { content: "— "; color: var(--gold); }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.legal__nav {
  margin-top: 3.4rem; padding-top: 1.6rem;
  border-top: 1px solid var(--cream-12);
  display: flex; flex-wrap: wrap; gap: 1.3rem; align-items: baseline;
}
.legal__nav span { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--cream-30); }
.legal__nav a { color: var(--cream-60); text-decoration: none; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.legal__nav a:hover { color: var(--gold); }

.footer__geo { font-size: .68rem; color: color-mix(in srgb, var(--cream) 55%, transparent); max-width: 60ch; text-align: center; line-height: 1.7; }


/* ── WhatsApp flotante ────────────────────── */
.hud-wa {
  position: fixed; right: clamp(1.2rem, 4vw, 3rem); bottom: 5rem; z-index: 50;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1fae54; color: #fff;
  box-shadow: 0 6px 22px rgba(31, 174, 84, .35);
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.hud-wa:hover { transform: scale(1.12) translateY(-2px); box-shadow: 0 10px 30px rgba(31, 174, 84, .5); }
body.theme-light .hud-wa { box-shadow: 0 6px 20px rgba(31, 120, 60, .3); }

/* ── Banner de cookies (tarjeta compacta crema) ── */
.consent {
  position: fixed; left: 50%; bottom: 1rem; z-index: 97;
  width: 420px; max-width: calc(100vw - 2rem);
  background: var(--bg); color: var(--cream);
  border: 1px solid color-mix(in srgb, var(--cream) 18%, transparent); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  padding: .85rem 1rem .8rem;
  transform: translate(-50%, 130%); opacity: 0;
  transition: transform .55s var(--ease-out), opacity .4s;
}
.consent.is-in { transform: translate(-50%, 0); opacity: 1; }
/* En modo crema el banner era crema sobre crema: se despega con blanco y sombra */
/* El mapa del universo siempre abre sobre cielo nocturno: dentro manda la paleta de noche */

body.theme-light .consent {
  background: var(--bg-2);
  border-color: color-mix(in srgb, var(--cream) 28%, transparent);
  box-shadow: 0 16px 44px color-mix(in srgb, var(--cream) 26%, transparent);
}
.consent__txt { margin: 0 0 .65rem; font-size: .72rem; line-height: 1.55; color: color-mix(in srgb, var(--cream) 88%, transparent); }
.consent__txt a { color: var(--cream); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.consent__botones { display: flex; gap: .9rem; align-items: center; }
.cbtn.si {
  font-family: var(--sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--cream); color: var(--bg); border: 1px solid var(--cream);
  padding: .6rem 1.3rem; border-radius: 999px; cursor: pointer;
  transition: opacity .25s;
}
.cbtn.si:hover { opacity: .85; }
.clink {
  font-family: var(--sans); font-size: .62rem; letter-spacing: .06em;
  background: none; border: none; padding: 0; cursor: pointer;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .25s;
}
.clink:hover { color: var(--cream); }


/* en móvil el mapa vive en el menú lateral: fuera el botón flotante */


/* capas compuestas para las animaciones perpetuas (evita repintados por frame) */
.star__orb::after, .mv-orb::after,
.planet--orbit::after, .planet--pulse::before, .planet--pulse::after, .planet--star::after {
  will-change: transform, opacity;
}
.marquee__track { will-change: transform; }


/* ── Selector de idioma ───────────────────── */
/* Idioma: una bandera que despliega las tres (antes ES|EN|RU ocupaba demasiado) */
.hud-lang { position: relative; margin-left: auto; margin-right: .9rem; }
.hud-cta { margin-left: 0; }
.bandera {
  display: block; width: 20px; height: 14px; border-radius: 2px;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--cream-12);
}
.bandera svg { display: block; width: 100%; height: 100%; }
.hud-lang__now {
  display: flex; align-items: center; gap: .4rem;
  background: none; border: 1px solid var(--cream-12); border-radius: 999px;
  padding: .32rem .5rem .32rem .38rem; cursor: pointer;
  transition: border-color .3s, background .3s;
}
.hud-lang__now:hover, .hud-lang.is-open .hud-lang__now {
  border-color: var(--gold); background: var(--cream-06);
}
.hud-lang__caret {
  width: 0; height: 0; border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent; border-top: 4px solid var(--cream-30);
  transition: transform .3s, border-top-color .3s;
}
.hud-lang.is-open .hud-lang__caret { transform: rotate(180deg); border-top-color: var(--gold); }

.hud-lang__menu {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 60;
  min-width: 150px; padding: .3rem;
  border: 1px solid var(--cream-12); border-radius: 8px;
  background: var(--bg); box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s, transform .25s var(--ease-out), visibility .25s;
}
.hud-lang.is-open .hud-lang__menu { opacity: 1; visibility: visible; transform: none; }
.hud-lang__op {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  background: none; border: none; border-radius: 5px; cursor: pointer;
  padding: .5rem .55rem; text-align: left;
  font-family: var(--sans); font-size: .74rem; letter-spacing: .04em;
  color: var(--cream-60); transition: color .25s, background .25s;
}
.hud-lang__op:hover { color: var(--cream); background: var(--cream-06); }
.hud-lang__op.on { color: var(--gold); }
body.theme-light .hud-lang__menu { background: var(--bg-2); box-shadow: 0 14px 34px color-mix(in srgb, var(--cream) 20%, transparent); }


/* ── Énfasis: la negrita del texto corrido va en dorado ── */
p strong, li strong, .about__text strong, .sprob__text strong { color: var(--acento); font-weight: 600; }
.sec-title em, .shero__title em, .scta__title em { font-weight: 700; }


/* ── Franja de llamada intercalada (patrón Elevam: CTA en cada sección) ── */
.franja {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.6rem; margin: 1.8rem 0 0;
  padding: 1.1rem 1.3rem; border: 1px solid var(--cream-12); border-radius: 8px;
  background: var(--bg-2);
}
.franja p { font-size: .92rem; color: var(--cream-60); max-width: 60ch; }
.franja .btn { flex-shrink: 0; }
.autoridad { max-width: 1250px; margin: 0 auto; }
.sol-card a { color: var(--acento); border-bottom: 1px solid transparent; transition: border-color .3s; }
.sol-card a:hover { border-bottom-color: var(--acento); }


/* ══════════ ENCICLOPEDIA ══════════ */
.enc { max-width: 860px; margin: 0 auto; padding: 7.5rem clamp(1.2rem, 5vw, 2.5rem) 4rem; }
.enc__cab { border-bottom: 1px solid var(--cream-12); padding-bottom: 2.2rem; margin-bottom: 2.2rem; }
.enc__titulo {
  font-family: var(--sans); font-weight: 700; letter-spacing: -.04em;
  font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.04; margin: .3rem 0 1rem;
}
.enc__titulo em { font-style: normal; color: var(--acento); }
.enc__lead { color: var(--cream-60); font-size: 1.02rem; max-width: 60ch; }
.enc__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.4rem;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-30);
}
.enc__meta b { color: var(--cream-60); font-weight: 600; }


.enc__indice { margin-bottom: 3rem; }
.enc__indice-t {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acento); font-weight: 600; margin-bottom: .9rem;
}
.enc__indice ol { list-style: none; display: grid; gap: .1rem; counter-reset: none; }
.enc__indice a {
  display: block; padding: .5rem .1rem; font-size: .93rem; color: var(--cream-60);
  border-bottom: 1px solid var(--cream-06); transition: color .25s, padding-left .25s;
}
.enc__indice a:hover { color: var(--acento); padding-left: .4rem; }

.enc__bloque { margin-bottom: 3.4rem; scroll-margin-top: 6rem; }
.enc__bh {
  display: flex; align-items: baseline; gap: .8rem;
  font-family: var(--sans); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 1.6rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--cream-12);
}
.enc__bh span { font-size: .7rem; letter-spacing: .14em; color: var(--acento); font-weight: 600; }

.cap { margin-bottom: 2rem; scroll-margin-top: 6rem; }
.cap h3 {
  font-family: var(--sans); font-weight: 600; font-size: 1.06rem;
  letter-spacing: -.015em; margin-bottom: .6rem;
}
.cap p { color: var(--cream-60); font-size: .95rem; line-height: 1.72; margin-bottom: .75rem; max-width: 68ch; }
.cap p:last-child { margin-bottom: 0; }
.cap strong { color: var(--acento); font-weight: 600; }
.cap em { font-style: italic; }
.cap a { color: var(--acento); border-bottom: 1px solid transparent; transition: border-color .3s; }
.cap a:hover { border-bottom-color: var(--acento); }
.cap code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em;
  background: var(--cream-06); padding: .1em .35em; border-radius: 3px;
}
.cap .pend { padding: .75rem .9rem; border: 1px dashed var(--cream-12); border-radius: 6px; font-size: .88rem; }

.enc__cierre { border-top: 1px solid var(--cream-12); padding-top: 2.4rem; margin-top: 1rem; }
.enc__btns { display: flex; flex-wrap: wrap; gap: .7rem .9rem; margin: 1.4rem 0 2.4rem; }

.cap .lista { list-style: none; margin: .2rem 0 .9rem; display: grid; gap: .45rem; }
.cap .lista li { position: relative; padding-left: 1.05rem; color: var(--cream-60); font-size: .93rem; line-height: 1.62; }
.cap .lista li::before { content: '·'; position: absolute; left: .22rem; color: var(--acento); font-size: 1.1rem; }
.cap .correc {
  border-left: 2px solid var(--acento); padding: .55rem 0 .55rem .85rem;
  font-size: .89rem; background: none;
}


/* ── Enciclopedia en acordeón ── */
details.cap { border-bottom: 1px solid var(--cream-12); margin-bottom: 0; }
details.cap summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: .95rem 0; cursor: pointer; list-style: none;
  transition: color .25s;
}
details.cap summary::-webkit-details-marker { display: none; }
details.cap summary:hover { color: var(--acento); }
.cap__t { font-weight: 600; font-size: 1rem; letter-spacing: -.015em; }
details.cap .cap__cuerpo { padding: 0 0 1.3rem; }
details.cap[open] summary { color: var(--acento); }
details.cap[open] .faq__icon::after { transform: scaleY(0); }


/* ── Precios en dos fases ── */
.fase { margin: 2.2rem 0 1.1rem; }
.fase:first-of-type { margin-top: .6rem; }
.fase__n { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--acento); font-weight: 600; }
.fase__t { font-family: var(--sans); font-weight: 700; font-size: 1.35rem; letter-spacing: -.025em; margin: .35rem 0 .5rem; }
.fase__d { color: var(--cream-60); font-size: .93rem; max-width: 66ch; line-height: 1.65; }
.tiers--dos { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.franja--nota { display: block; margin-top: 1.6rem; }
.franja--nota p { max-width: 100%; }

.fase__d + .fase__d { margin-top: .7rem; }
.fase__mas { margin: 1.2rem 0 .4rem; }


/* ── Desplegable de servicios en la barra superior ── */
.hud-desp { position: relative; display: inline-flex; }
.hud-desp__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: none; cursor: pointer; padding: .3rem 0;
  /* mismos valores que .hud-nav a: los botones no heredan tipografía */
  font-family: var(--sans);
  font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-60);
  transition: color .3s;
}
.hud-desp__btn:hover, .hud-desp.is-open .hud-desp__btn { color: var(--cream); }
.hud-desp.is-open .hud-lang__caret { transform: rotate(180deg); border-top-color: var(--acento); }
.hud-desp__menu {
  position: absolute; top: calc(100% + .9rem); left: 50%; translate: -50% 0; z-index: 60;
  min-width: 232px; padding: .3rem;
  border: 1px solid var(--cream-12); border-radius: 8px; background: var(--bg-2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s, transform .25s var(--ease-out), visibility .25s;
}
.hud-desp.is-open .hud-desp__menu { opacity: 1; visibility: visible; transform: none; }
.hud-desp__op {
  display: flex; align-items: baseline; gap: .6rem; padding: .55rem .6rem;
  border-radius: 5px; font-size: .78rem; letter-spacing: .02em; text-transform: none;
  color: var(--cream-60); transition: color .25s, background .25s;
}

.hud-desp__op:hover { color: var(--cream); background: var(--cream-06); }
.hud-desp__op.on { color: var(--acento); }


/* ══════════ ESTAMPADO DE LOS PLANETAS ══════════
   Trazos gruesos y sólidos, no líneas finas. Los que la CSS no sabe dibujar
   —zigzag y onda— van en SVG incrustado, que se mantiene nítido a cualquier
   tamaño. Medidas fijas: la trama es la misma en el orbe del mapa que en el
   planeta gigante del hero. */
.pat-1, .pat-2, .pat-3, .pat-4, .pat-5, .pat-6, .pat-7 { background-repeat: repeat; }

/* 01 · anillos gruesos */
.pat-1 { background-image: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 0 7px, transparent 7px 18px); }

/* 02 · lunares */
.pat-2 {
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.26) 4.5px, transparent 5px);
  background-size: 19px 19px;
}

/* 03 · franjas anchas */
.pat-3 { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.2) 0 8px, transparent 8px 20px); }

/* 04 · diagonales anchas */
.pat-4 { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.2) 0 7px, transparent 7px 19px); }

/* 05 · cuadrícula gruesa */
.pat-5 {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 4px, transparent 4px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 4px, transparent 4px 22px);
}

/* 06 · zigzag */
.pat-6 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='22' viewBox='0 0 32 22'%3E%3Cpath d='M-2 17 L6 5 L14 17 L22 5 L30 17 L38 5' fill='none' stroke='%23ffffff' stroke-opacity='.24' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 32px 22px;
}

/* 07 · onda */
.pat-7 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='20' viewBox='0 0 34 20'%3E%3Cpath d='M-2 12 Q6.5 2 15 12 T32 12 T49 12' fill='none' stroke='%23ffffff' stroke-opacity='.24' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 34px 20px;
}


/* ── Home corta: los cuatro movimientos ── */
.como { max-width: 1250px; margin: 0 auto; }
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1rem; }
.paso {
  display: block; padding: 1.4rem 1.3rem 1.2rem;
  border: 1px solid var(--cream-12); border-radius: 8px; background: var(--bg-2);
  transition: border-color .3s, transform .3s var(--ease-out);
}
.paso:hover { border-color: var(--acento); transform: translateY(-3px); }
.paso__n {
  display: block; font-size: .64rem; letter-spacing: .2em;
  color: var(--acento); font-weight: 600; margin-bottom: .8rem;
}
.paso__t {
  font-family: var(--sans); font-weight: 700; font-size: 1.12rem;
  letter-spacing: -.02em; margin-bottom: .55rem;
}
.paso p { color: var(--cream-60); font-size: .9rem; line-height: 1.62; }
.paso__mas {
  display: block; margin-top: 1rem; padding-top: .8rem;
  border-top: 1px solid var(--cream-12);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acento);
}