/* =========================================================
   BASE · identidad oscura que une toda la página
   Cada sección define después su propio estilo.
   ========================================================= */
:root {
  --base-fondo: #0b0d12;
  --base-texto: #e8eaf0;
  --base-suave: #9aa1b2;
  --base-acento: #8b6cff;
  --base-acento-2: #22d3ee;

  --letra-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --letra-revista: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --letra-tech: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --letra-redonda: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;

  --ancho: 1120px;
  --nav-alto: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-alto); }
body {
  margin: 0;
  background: var(--base-fondo);
  color: var(--base-texto);
  font-family: var(--letra-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { line-height: 1.1; margin: 0; }
p { margin: 0; }
a { color: inherit; }
/* La cinta va inclinada y se asomaría por los costados: se recorta acá */
main { overflow-x: clip; }
.contenedor { width: min(var(--ancho), 100% - 32px); margin-inline: auto; position: relative; }

.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 12px; z-index: 100; border-radius: 6px; }
.skip:focus { left: 8px; }

/* Textos de ejemplo: borde punteado hasta que se carguen los reales */
.ejemplo { outline: 2px dashed #f5b84b; outline-offset: 4px; border-radius: 4px; }

/* Cartelito que dice qué estilo es cada sección */
.etiqueta-estilo {
  display: inline-block;
  font: 600 12px/1 var(--letra-base);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: .7;
  margin-bottom: 28px;
}

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--luz { background: linear-gradient(135deg, var(--base-acento), var(--base-acento-2)); color: #0b0d12; box-shadow: 0 8px 30px -8px var(--base-acento); }
.btn--linea { border: 1px solid #ffffff33; }
.btn--linea:hover { background: #ffffff10; }

:focus-visible { outline: 2px solid var(--base-acento-2); outline-offset: 3px; }

/* Aparición suave (en grupos, uno detrás del otro gracias a --retraso) */
.con-animacion .aparecer { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--retraso, 0s); }

/* Barra de lectura arriba de todo */
.progreso { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--base-acento), var(--base-acento-2)); }

/* Cinta que se desliza sola */
.cinta { overflow: hidden; background: linear-gradient(90deg, var(--base-acento), var(--base-acento-2)); color: #0b0d12; padding: 16px 0; transform: rotate(-1.5deg) scale(1.04); position: relative; z-index: 2; margin: -12px 0; }
.cinta__pista { display: flex; width: max-content; animation: deslizar 28s linear infinite; }
.cinta__pista span { font-weight: 800; font-size: clamp(18px, 2.4vw, 26px); letter-spacing: -.01em; padding: 0 28px; white-space: nowrap; }
.cinta__pista span::after { content: "✦"; margin-left: 56px; font-size: .8em; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
@keyframes deslizar { to { transform: translateX(-50%); } }
.con-animacion .aparecer.visible { opacity: 1; transform: none; }

/* =========================================================
   LOGO VIAJERO · la mascota baja por el riel y cambia de estilo en cada sección
   La posición la calcula script.js (--bajada); el estilo depende de data-estilo
   ========================================================= */
.riel { position: fixed; right: 49px; top: 18vh; bottom: 18vh; width: 2px; border-radius: 2px; z-index: 40; background: #8a8fa040; pointer-events: none; }
.riel__lleno { position: absolute; inset: 0; border-radius: inherit; transform-origin: top; transform: scaleY(var(--lleno, 0)); background: linear-gradient(var(--base-acento), var(--base-acento-2)); }

.logo-j {
  --tam: 52px;
  position: fixed; right: 24px; top: calc(18vh - var(--tam) / 2); z-index: 45;
  width: var(--tam); height: var(--tam); display: grid; place-items: center;
  text-decoration: none; font: 800 26px/1 var(--letra-base);
  transform: translateY(var(--bajada, 0px));
  transition: background .5s, color .5s, border-radius .5s, border-color .5s, box-shadow .5s, font .5s;
  /* estilo base (inicio y contacto) */
  background: linear-gradient(135deg, var(--base-acento), var(--base-acento-2)); color: #0b0d12;
  border: 1.5px solid transparent; border-radius: 16px;
  box-shadow: 0 8px 28px -6px #8b6cffaa;
}
.logo-j span { display: block; width: 76%; height: 76%; transition: transform .5s; }
.logo-j svg, .nav__mascota svg, .magia__centro svg, .pie__logo svg { display: block; width: 100%; height: 100%; }
.logo-j:hover span { transform: scale(1.15); }
/* Un saltito cada vez que cambia de estilo */
.logo-j.cambio span { animation: logo-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes logo-pop { 0% { transform: scale(.4) rotate(-20deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Nosotros: minimalista, de líneas, con letra de revista */
.logo-j[data-estilo="nosotros"] { background: #f6f4ef; color: #16161a; border-color: #16161a; border-radius: 0; box-shadow: none; font: italic 400 30px/1 var(--letra-revista); }


.logo-j[data-estilo="magia"] { background: #111114; color: #fff; border-color: #ffffff24; border-radius: 14px; box-shadow: 0 0 30px -4px #8b5cf6; }

/* Cómo trabajamos: la mascota sobre el mismo violeta */
.logo-j[data-estilo="pasos"] { background: #1b1240; color: #fff; border-color: #8b6cff; border-radius: 50%; }

/* Preguntas: brutalista, amarillo con sombra dura */
.logo-j[data-estilo="preguntas"] { background: #ffe94d; color: #000; border: 3px solid #000; border-radius: 0; box-shadow: 5px 5px 0 #000; font: 900 28px/1 var(--letra-base); }

/* Mapa: un punto por sección sobre el riel, con su nombre al pasar el mouse */
.mapa { position: fixed; right: 49px; top: 18vh; bottom: 18vh; width: 2px; z-index: 42; }
.mapa a { position: absolute; left: 50%; top: var(--en); width: 20px; height: 20px; margin: -10px 0 0 -10px; display: grid; place-items: center; text-decoration: none; }
.mapa a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--base-fondo); border: 2px solid #8a8fa0; transition: background .3s, border-color .3s, transform .2s; }
.mapa a.pasado::before { background: var(--base-acento-2); border-color: var(--base-acento-2); }
.mapa a:hover::before, .mapa a:focus-visible::before { transform: scale(1.5); }
.mapa a span { position: absolute; right: 26px; white-space: nowrap; font: 600 12px/1 var(--letra-base); color: #fff; background: #0b0d12e6; padding: 6px 10px; border-radius: 6px; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .2s, transform .2s; }
.mapa a:hover span, .mapa a:focus-visible span { opacity: 1; transform: none; }

/* Pantallas medianas y celular: sin riel, la mascota queda quieta abajo a la derecha */
@media (max-width: 1239px) {
  .riel, .mapa { display: none; }
  .logo-j { --tam: 46px; top: auto; bottom: 16px; right: 16px; transform: none; font-size: 22px; }
}

/* =========================================================
   INTRO · la brújula encuentra el norte y la marca viaja al menú.
   Solo se ve con html.con-intro (lo decide el script del <head>); la maneja script.js
   ========================================================= */
.intro { display: none; }
html.con-intro { overflow: hidden; }
html.con-intro .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; overflow: hidden; user-select: none; -webkit-user-select: none; cursor: default; }
html.con-intro .nav__mascota, html.con-intro .nav__nombre { visibility: hidden; }
.intro.saliendo { pointer-events: none; }
.intro__fondo {
  position: absolute; inset: 0;
  background:
    radial-gradient(60vmax 44vmax at 50% 40%, #8b6cff24, transparent 70%),
    radial-gradient(40vmax 30vmax at 50% 62%, #22d3ee12, transparent 70%),
    var(--base-fondo);
}
.intro__marca { position: relative; display: flex; flex-direction: column; align-items: center; }
.intro__brujula { --tam: clamp(92px, 22vmin, 148px); position: relative; width: var(--tam); height: var(--tam); margin-bottom: calc(var(--tam) * .62); }
/* El centro del dial y de la onda coincide con el centro de la brújula de la mascota (32, 34 en su dibujo de 64) */
.intro__dial { position: absolute; left: 50%; top: 53.125%; width: 208%; height: 208%; margin: -104% 0 0 -104%; overflow: visible; }
.intro__marca-dial { opacity: 0; }
.intro__marca-dial path { fill: none; stroke: #ffffff4d; stroke-width: 1; stroke-linecap: round; transition: stroke .3s; }
.intro__marca-dial text { font: 600 8px var(--letra-tech); fill: #ffffff80; text-anchor: middle; transition: fill .3s; }
.intro__marca-dial--n.encendida path { stroke: var(--base-acento-2); stroke-width: 2; filter: drop-shadow(0 0 4px var(--base-acento-2)); }
.intro__marca-dial--n.encendida text { fill: var(--base-acento-2); filter: drop-shadow(0 0 4px var(--base-acento-2)); }
.intro__onda { position: absolute; left: 50%; top: 53.125%; width: 130%; height: 130%; margin: -65% 0 0 -65%; border-radius: 50%; border: 1.5px solid #a99bff; opacity: 0; }
.intro__mascota { position: absolute; inset: 0; display: block; color: #a99bff; filter: drop-shadow(0 0 22px #8b6cff66); }
.intro__mascota > span { display: block; width: 100%; height: 100%; transform-origin: 50% 53.125%; }
.intro__mascota svg { display: block; width: 100%; height: 100%; }
.intro__nombre { display: flex; overflow: hidden; font-size: clamp(48px, 10vmin, 76px); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; color: var(--base-texto); }
.intro__nombre span { display: block; transform: translateY(112%); }
.intro__bajada { margin-top: 8px; font-size: clamp(15px, 2.2vmin, 18px); color: var(--base-suave); opacity: 0; }

/* Sorpresa de la mascota: lluvia de mascotas y cartelito */
.sorpresa-lienzo { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 90; pointer-events: none; }
.sorpresa-aviso { position: fixed; left: 50%; bottom: 28px; z-index: 91; transform: translateX(-50%); margin: 0; padding: 12px 20px; border-radius: 999px; background: #0b0d12f0; color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 14px 40px -12px #000, 0 0 0 1px #ffffff1f; white-space: nowrap; animation: aviso-entra .45s cubic-bezier(.2, 1.4, .4, 1); transition: opacity .5s, transform .5s; }
.sorpresa-aviso.saliendo { opacity: 0; transform: translate(-50%, 12px); }
@keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, 20px) scale(.9); } }
@media (max-width: 480px) { .sorpresa-aviso { white-space: normal; width: calc(100% - 32px); text-align: center; border-radius: 16px; bottom: 80px; } } /* arriba de la mascota flotante */

/* =========================================================
   MENÚ
   ========================================================= */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-alto); transition: background .3s, backdrop-filter .3s; }
.nav--bajo { background: #0b0d12cc; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #ffffff12; }
.nav__in { width: min(var(--ancho), 100% - 32px); margin-inline: auto; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav__marca { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; text-decoration: none; letter-spacing: -.01em; }
.nav__mascota { width: 26px; height: 26px; color: #a99bff; transition: transform .3s; }
.nav__marca:hover .nav__mascota { transform: rotate(-8deg) scale(1.08); }
.nav__links { display: flex; gap: 28px; align-items: center; }
.nav__links a { text-decoration: none; color: var(--base-suave); font-size: 15px; transition: color .2s; }
.nav__links a:hover { color: var(--base-texto); }
.nav__links .nav__cta { color: #0b0d12; font-weight: 600; background: linear-gradient(135deg, var(--base-acento), var(--base-acento-2)); padding: 8px 16px; border-radius: 999px; transition: box-shadow .2s, transform .2s; }
.nav__links .nav__cta:hover { color: #0b0d12; transform: translateY(-1px); box-shadow: 0 6px 20px -6px var(--base-acento); }
/* El link de la sección en la que estás se subraya */
.nav__links a:not(.nav__cta) { position: relative; }
.nav__links a:not(.nav__cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--base-acento-2); transform: scaleX(0); transition: transform .3s; }
.nav__links a.actual { color: var(--base-texto); }
.nav__links a.actual::after { transform: scaleX(1); }
.nav__boton { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav__boton span { display: block; width: 22px; height: 2px; background: var(--base-texto); margin: 5px 0; transition: transform .3s, opacity .3s; }
.nav__boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav__boton { display: block; }
  .nav__links {
    position: fixed; inset: var(--nav-alto) 0 auto; flex-direction: column; gap: 0;
    background: #0b0d12f2; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 8px 16px 20px; border-bottom: 1px solid #ffffff12;
    transform: translateY(-120%); visibility: hidden; transition: transform .35s ease, visibility 0s .35s;
  }
  .nav__links.abierto { transform: none; visibility: visible; transition: transform .35s ease; }
  .nav__links a { padding: 14px 0; width: 100%; font-size: 17px; border-bottom: 1px solid #ffffff10; }
  .nav__links .nav__cta { margin-top: 12px; text-align: center; border-radius: 12px; padding: 14px 0; }
  .nav__links a:not(.nav__cta)::after { display: none; }
}

/* =========================================================
   1. INICIO · oscuro con luz
   ========================================================= */
.s-inicio { min-height: 100svh; display: flex; align-items: center; position: relative; overflow: hidden; padding: calc(var(--nav-alto) + 40px) 0 80px; }
.s-inicio__luz {
  position: absolute; width: 900px; height: 900px; left: 50%; top: -30%; transform: translateX(-30%);
  background: radial-gradient(circle, #8b6cff55 0%, #22d3ee22 35%, transparent 65%);
  filter: blur(20px); pointer-events: none;
  animation: flotar 14s ease-in-out infinite alternate;
}
.s-inicio::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), #22d3ee1f, transparent 70%);
}
.s-inicio.con-foco::after { opacity: 1; }
.s-inicio .contenedor { z-index: 1; }
.s-inicio__luz--abajo { top: auto; bottom: -60%; left: 10%; transform: none; }
@keyframes flotar { to { transform: translate(-45%, 8%) scale(1.1); } }


/* Invitación a bajar: un mouse con la ruedita que se mueve */
.bajar { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--base-suave); text-decoration: none; z-index: 1; transition: color .2s; }
.bajar:hover { color: var(--base-texto); }
.bajar span { width: 22px; height: 34px; border-radius: 12px; border: 2px solid currentColor; position: relative; }
.bajar span::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: ruedita 1.6s ease-in-out infinite; }
@keyframes ruedita { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
@media (max-height: 700px), (max-width: 760px) { .bajar { display: none; } }

.s-inicio__pre { color: var(--base-acento-2); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; }
.s-inicio__titulo { font-size: clamp(48px, 10vw, 120px); font-weight: 800; letter-spacing: -.04em; }
.rotar { display: inline-block; transition: opacity .35s, transform .35s, filter .35s; }
.rotar.saliendo { opacity: 0; transform: translateY(-.25em); filter: blur(6px); }
.degradado { background: linear-gradient(90deg, var(--base-acento), var(--base-acento-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-inicio__bajada { max-width: 560px; font-size: clamp(18px, 2.2vw, 22px); color: var(--base-suave); margin-top: 24px; }
.s-inicio__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.s-inicio__nota { margin-top: 56px; font-size: 14px; color: var(--base-suave); max-width: 420px; padding-left: 14px; border-left: 2px solid var(--base-acento); }

/* =========================================================
   2. NOSOTROS · minimalista claro, tipo revista
   ========================================================= */
.s-nosotros { background: #f6f4ef; color: #16161a; padding: 120px 0; }
.s-nosotros__grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.s-nosotros .etiqueta-estilo { grid-column: 1 / -1; justify-self: start; }
.s-nosotros__titulo { font-family: var(--letra-revista); font-weight: 400; font-size: clamp(36px, 5vw, 60px); letter-spacing: -.02em; }
.s-nosotros__texto { font-size: 18px; color: #3d3d45; display: grid; gap: 18px; align-content: end; }
.s-nosotros__texto p:first-child::first-letter { font-family: var(--letra-revista); float: left; font-size: 64px; line-height: .8; padding: 6px 8px 0 0; }
.s-nosotros__datos { grid-column: 1 / -1; list-style: none; padding: 0; margin: 72px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #16161a; }
.s-nosotros__datos li { padding: 24px 24px 0 0; display: grid; gap: 6px; }
.s-nosotros__datos li + li { padding-left: 24px; border-left: 1px solid #16161a22; }
.s-nosotros__datos strong { font-family: var(--letra-revista); font-size: 24px; font-weight: 400; font-style: italic; }
.s-nosotros__datos span { color: #5c5c66; font-size: 15px; }

@media (max-width: 760px) {
  .s-nosotros { padding: 88px 0; }
  .s-nosotros__grilla { grid-template-columns: 1fr; gap: 28px; }
  .s-nosotros__datos { grid-template-columns: 1fr; margin-top: 24px; }
  .s-nosotros__datos li, .s-nosotros__datos li + li { padding: 20px 0; border-left: 0; border-bottom: 1px solid #16161a22; }
}

/* =========================================================
   DE PAPELES A SISTEMA · los papeles cruzan el eje con la mascota y salen ordenados
   Posiciones y tarjetas las maneja script.js
   ========================================================= */
.s-magia { --violeta: #8b5cf6; background: #050507; padding: 120px 0 100px; overflow: hidden; }
.s-magia .etiqueta-estilo { color: #c4b5fd; }
.s-magia__titulo { font-size: clamp(38px, 6vw, 72px); font-weight: 800; letter-spacing: -.04em; }
.s-magia__titulo span { color: var(--violeta); text-shadow: 0 0 40px #8b5cf688; }
.s-magia__bajada { color: #a1a1aa; font-size: 18px; max-width: 560px; margin-top: 16px; }

.magia { position: relative; height: 460px; margin-top: 40px; }
.magia__entrada { position: absolute; inset: 0 50% 0 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
.magia__salida { position: absolute; inset: 0 0 0 50%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.magia__eje { position: absolute; left: 50%; top: 6%; bottom: 6%; width: 2px; transform: translateX(-50%); background: linear-gradient(transparent, var(--violeta) 20%, var(--violeta) 80%, transparent); box-shadow: 0 0 18px var(--violeta); z-index: 2; }
.magia__centro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 14px; background: #111114; border: 1px solid #ffffff24; color: #fff;
  font: 800 26px/1 var(--letra-base); box-shadow: 0 0 40px -4px var(--violeta), inset 0 1px 0 #ffffff1f;
  padding: 9px;
}
.magia__centro.golpe { animation: magia-golpe .5s ease-out; }
@keyframes magia-golpe { 30% { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 60px 4px var(--violeta); } }

/* Papeles que entran */
.papel { position: absolute; left: 0; top: 50%; width: 170px; height: 236px; margin-top: -118px; border-radius: 12px; background: #16161b; border: 1px solid #ffffff14; padding: 14px; overflow: hidden; will-change: transform; }
.papel__titulo { font: 600 10px/1 var(--letra-tech); letter-spacing: .12em; text-transform: uppercase; color: #71717a; margin-bottom: 12px; }
.papel i { display: block; height: 6px; border-radius: 3px; background: #ffffff14; margin-bottom: 9px; }
.papel i:nth-child(3n) { width: 70%; } .papel i:nth-child(4n) { width: 85%; }
.papel--planilla .papel__grilla { height: 120px; border: 1px solid #ffffff1a; background-image: linear-gradient(#ffffff14 1px, transparent 1px), linear-gradient(90deg, #ffffff14 1px, transparent 1px); background-size: 100% 20px, 33.3% 100%; margin-bottom: 12px; }
.papel--factura .papel__total { display: flex; justify-content: space-between; border-top: 1px dashed #ffffff30; padding-top: 8px; margin-top: 10px; font: 700 11px var(--letra-tech); color: #a1a1aa; }
.papel--cuaderno { background-image: repeating-linear-gradient(transparent 0 21px, #3b82f622 21px 22px); }
.papel--cuaderno::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 1px; background: #ef444455; }
.papel--ticket { width: 130px; border-radius: 4px; background-color: #1c1c21; }
/* Capa de pixelitos que aparece al acercarse al eje */
.papel__pixeles { position: absolute; inset: 0; background-size: 100% 100%; image-rendering: pixelated; opacity: var(--px, 0); pointer-events: none; }

/* Tarjetas que salen */
.resultado-chip { position: absolute; left: 0; top: 50%; width: 220px; padding: 10px 12px; border-radius: 12px; background: #141418ee; border: 1px solid #ffffff1a; box-shadow: 0 10px 30px -10px #000; will-change: transform, opacity; }
.resultado-chip b { display: inline-block; font: 700 12px/1 var(--letra-base); color: #0b0b0e; background: var(--chip); padding: 6px 10px; border-radius: 999px; margin-bottom: 8px; }
.resultado-chip i { display: block; height: 5px; border-radius: 3px; background: #ffffff1a; margin-top: 6px; }
.resultado-chip i + i { width: 65%; }
.chispa { position: absolute; left: 0; top: 50%; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; }

/* Celular: todo en vertical, los papeles bajan y los resultados salen por abajo */
@media (max-width: 700px) {
  .magia { height: 640px; }
  .magia__entrada { inset: 0 0 50% 0; -webkit-mask-image: linear-gradient(transparent, #000 25%); mask-image: linear-gradient(transparent, #000 25%); }
  .magia__salida { inset: 50% 0 0 0; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .magia__eje { left: 4%; right: 4%; top: 50%; bottom: auto; width: auto; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, var(--violeta) 20%, var(--violeta) 80%, transparent); }
  .papel { left: 50%; top: 0; margin: 0 0 0 -85px; }
  .papel--ticket { margin-left: -65px; }
  .resultado-chip, .chispa { left: 50%; top: 0; }
}

/* =========================================================
   CÓMO TRABAJAMOS · la línea se dibuja y los pasos entran uno detrás del otro
   ========================================================= */
.s-pasos { background: #1b1240; color: #fff; padding: 120px 0 130px; }
.s-pasos__titulo { font-size: clamp(36px, 5.5vw, 64px); font-weight: 800; letter-spacing: -.02em; }
.s-pasos__bajada { color: #c6bfe6; font-size: 18px; margin-top: 12px; }
.pasos { --circulo: 46px; position: relative; list-style: none; margin: 64px 0 56px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.pasos::before {
  content: ""; position: absolute; left: 0; right: calc((100% - 112px) / 5 - var(--circulo)); top: calc(var(--circulo) / 2 - 1px); height: 2px;
  background: linear-gradient(90deg, #22d3ee, #8b6cff); transform-origin: left; transform: scaleX(0); transition: transform 1.3s cubic-bezier(.16, 1, .3, 1) .15s;
}
.pasos.visible::before { transform: none; }
.pasos li { position: relative; opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i) * .16s + .15s); }
.pasos.visible li { opacity: 1; transform: none; }
.pasos span { display: grid; place-items: center; width: var(--circulo); height: var(--circulo); margin-bottom: 20px; border-radius: 50%; background: #1b1240; border: 2px solid #8b6cff; color: #fff; font-weight: 800; }
.pasos li:first-child span { background: linear-gradient(135deg, #8b6cff, #22d3ee); border-color: transparent; color: #0b0d12; }
.pasos h3 { font-size: 19px; margin-bottom: 8px; }
.pasos p { color: #c6bfe6; font-size: 15px; line-height: 1.5; }
@media (max-width: 860px) {
  .pasos { grid-template-columns: 1fr; gap: 30px; margin: 48px 0; }
  .pasos::before { left: calc(var(--circulo) / 2 - 1px); right: auto; top: 0; bottom: 60px; width: 2px; height: auto; background: linear-gradient(180deg, #22d3ee, #8b6cff); transform-origin: top; transform: scaleY(0); }
  .pasos li { display: grid; grid-template-columns: var(--circulo) 1fr; column-gap: 18px; }
  .pasos span { grid-row: span 2; margin: 0; }
  .pasos h3 { margin: 2px 0 4px; }
}

/* =========================================================
   5. SERVICIOS · cálido y redondeado
   ========================================================= */
.s-servicios { background: #fbf3e8; color: #3a2a20; padding: 120px 0; font-family: var(--letra-redonda); }
.s-servicios .etiqueta-estilo { color: #c45a35; }
.s-servicios__titulo { font-size: clamp(36px, 5vw, 56px); font-weight: 800; color: #2b1d15; }
.s-servicios__bajada { font-size: 18px; color: #7a6152; margin-top: 12px; }
.s-servicios__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 48px; }
.servicio { background: #fff; border-radius: 28px; padding: 32px 28px; box-shadow: 0 10px 30px -12px #c45a3533; transition: transform .3s, box-shadow .3s; }
.servicio:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 20px 40px -16px #c45a3555; }
.servicio:nth-child(even):hover { transform: translateY(-6px) rotate(.5deg); }
.servicio__icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: #ffe3d3; font-size: 26px; margin-bottom: 20px; }
.servicio:nth-child(2) .servicio__icono { background: #e2f3dc; }
.servicio:nth-child(3) .servicio__icono { background: #dcecfb; }
.servicio:nth-child(4) .servicio__icono { background: #f6e3fb; }
.servicio h3 { font-size: 22px; margin-bottom: 10px; color: #2b1d15; }
.servicio p { color: #7a6152; }

/* =========================================================
   6. CONTACTO · vuelve a la base
   ========================================================= */
.s-contacto { position: relative; overflow: hidden; padding: 140px 0; text-align: center; }
.s-contacto__titulo { font-size: clamp(40px, 7vw, 80px); font-weight: 800; letter-spacing: -.04em; }
.s-contacto__bajada { color: var(--base-suave); font-size: 18px; margin-top: 16px; }
.contacto { max-width: 620px; margin: 40px auto 0; display: grid; gap: 16px; text-align: left; padding: 28px; border-radius: 22px; background: #ffffff0a; border: 1px solid #ffffff1a; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.contacto__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contacto__campo { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--base-texto); }
.contacto__campo small { font-weight: 400; color: var(--base-suave); }
.contacto__campo input, .contacto__campo select, .contacto__campo textarea {
  font: 400 16px var(--letra-base); color: var(--base-texto); background: #0b0d12; border: 1.5px solid #ffffff24; border-radius: 12px; padding: 12px 14px; width: 100%; outline: none; resize: vertical; transition: border-color .2s, box-shadow .2s;
}
.contacto__campo select { -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer; background: #0b0d12 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa1b2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
.contacto__campo input::placeholder, .contacto__campo textarea::placeholder { color: #6b7183; }
.contacto__campo input:focus, .contacto__campo select:focus, .contacto__campo textarea:focus { border-color: var(--base-acento-2); box-shadow: 0 0 0 4px #22d3ee22; }
.contacto__campo .con-error { border-color: #f87171; }
.contacto__enviar { justify-self: start; border: 0; cursor: pointer; font: 600 16px var(--letra-base); }
.contacto__estado { min-height: 1.4em; font-size: 14px; color: #fbbf24; margin: -4px 0 0; }
.contacto__estado.ok { color: #34d399; }
.contacto__privacidad { font-size: 12px; color: var(--base-suave); }
@media (max-width: 600px) { .contacto { padding: 20px; } .contacto__fila { grid-template-columns: 1fr; } .contacto__enviar { justify-self: stretch; } }

/* Modo presentación: botón en el pie y cartel arriba */
html.presentando { scroll-behavior: auto; }
.presentacion { position: fixed; top: 80px; left: 50%; z-index: 80; transform: translateX(-50%); width: min(440px, calc(100% - 32px)); padding: 16px 20px 18px; border-radius: 18px; text-align: center; color: #fff; background: #0b0d12e6; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 50px -20px #000, 0 0 0 1px #ffffff1f; overflow: hidden; animation: aviso-entra .45s cubic-bezier(.2, 1.4, .4, 1); }
.presentacion[hidden] { display: none; }
.presentacion__num { font: 700 12px var(--letra-tech); letter-spacing: .14em; color: var(--base-acento-2); margin: 0; }
.presentacion__nombre { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 2px; }
.presentacion__estilo { font-size: 14px; color: var(--base-suave); margin: 0; min-height: 1.2em; }
.presentacion__salir { font-size: 11px; color: #6b7183; margin: 10px 0 0; }
.presentacion__barra { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; transform: scaleX(var(--avance-presentacion, 0)); background: linear-gradient(90deg, var(--base-acento), var(--base-acento-2)); }
.presentacion.cambio .presentacion__nombre, .presentacion.cambio .presentacion__estilo { animation: intro-texto .45s ease-out; }
@keyframes intro-texto { from { opacity: 0; transform: translateY(8px); } }
html.presentando .wa-flotante { display: none; }

/* Botón flotante de WhatsApp (abajo a la izquierda, para no chocar con la mascota) */
.wa-flotante { position: fixed; left: 18px; bottom: 18px; z-index: 44; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 10px 26px -8px #25d366aa; transition: transform .2s; }
.wa-flotante[hidden] { display: none; }
.wa-flotante:hover { transform: scale(1.08); }
.wa-flotante svg { width: 26px; height: 26px; }

/* Costuras entre secciones: una forma distinta en cada unión, apoyada sobre el final de la sección de arriba */
.costura { position: relative; z-index: 3; height: 60px; margin-top: -60px; pointer-events: none; }
.costura svg { display: block; width: 100%; height: 100%; }
@media (max-width: 760px) { .costura { height: 34px; margin-top: -34px; } }

/* =========================================================
   PREGUNTAS FRECUENTES · brutalista: amarillo, bordes gruesos, sombras duras
   ========================================================= */
.s-preguntas { background: #ffe94d; color: #000; padding: 120px 0; } /* los bordes los dibujan las costuras */
.s-preguntas .etiqueta-estilo { opacity: 1; border-width: 2px; background: #fff; box-shadow: 3px 3px 0 #000; }
.s-preguntas__titulo { font-size: clamp(48px, 9vw, 110px); font-weight: 900; letter-spacing: -.05em; line-height: .9; text-transform: uppercase; }
.s-preguntas__lista { display: grid; gap: 16px; margin-top: 56px; max-width: 820px; }
.pregunta { background: #fff; border: 3px solid #000; box-shadow: 6px 6px 0 #000; transition: transform .15s, box-shadow .15s; }
.pregunta:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #000; }
.con-animacion .pregunta.lista { transition: transform .15s, box-shadow .15s; }
.pregunta[open] { background: #000; color: #ffe94d; }
.pregunta summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font-size: clamp(18px, 2.4vw, 22px); font-weight: 800; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid currentColor; font-size: 24px; line-height: 1; }
.pregunta[open] summary::after { content: "×"; animation: logo-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.pregunta__resp { padding: 0 22px 22px; font-size: 17px; color: #fff; }
.pregunta[open] .pregunta__resp { animation: pregunta-abre .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes pregunta-abre { from { opacity: 0; transform: translateY(-8px); } }

.pie { position: relative; overflow: hidden; border-top: 1px solid #ffffff12; padding: 72px 0 24px; color: var(--base-suave); font-size: 15px; }
.pie__grilla { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.pie__marca { display: flex; gap: 16px; align-items: flex-start; }
.pie__marca p { line-height: 1.5; }
.pie__marca strong { color: var(--base-texto); font-size: 18px; }
.pie__logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 7px; border-radius: 12px; font-weight: 800; font-size: 20px; color: #0b0d12; background: linear-gradient(135deg, var(--base-acento), var(--base-acento-2)); }
.pie__col { display: grid; gap: 10px; align-content: start; }
.pie__col p { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #6b7183; }
.pie__col a { color: var(--base-texto); text-decoration: none; width: fit-content; background: linear-gradient(var(--base-acento-2), var(--base-acento-2)) 0 100% / 0 1px no-repeat; transition: background-size .3s; }
.pie__col a:hover { background-size: 100% 1px; }
/* Palabra gigante de cierre, apenas dibujada */
.pie__gigante { margin: 40px 0 0; text-align: center; font-weight: 900; font-size: clamp(80px, 19vw, 300px); letter-spacing: -.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px #ffffff1f; white-space: nowrap; user-select: none; }
.pie__fin { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid #ffffff12; font-size: 13px; position: relative; }
@media (max-width: 760px) {
  .pie__grilla { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
  .pie { padding-bottom: 84px; } /* lugar para la mascota flotante */
}

/* Quien pidió "reducir movimiento" en su celular o compu ve la página quieta */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .con-animacion .aparecer { opacity: 1; transform: none; }
}