/* ══════════════════════════════════════════════════════════════════
   meglio
   ------------------------------------------------------------------
   Nueva York de noche, vista desde el cielo.

   El color dice lo que dice la empresa:
     ambar  = la luz encendida, el negocio que se ve
     azul frio = el que sigue a oscuras
   No es paleta decorativa. Es el argumento comercial.

   Estructura: la web no es una pagina larga. Es una aplicacion con
   vistas separadas a las que se entra por su boton.
   ══════════════════════════════════════════════════════════════════ */

/* ─── 1. Tokens ─────────────────────────────────────────────────── */
:root {
  --night: #05070D;
  --n1:    #0A0E18;
  --n2:    #10151F;
  --n3:    #171D2A;
  --n4:    #202839;

  --text:  #EDEFF5;
  --mid:   rgba(237, 239, 245, .74);
  --low:   rgba(237, 239, 245, .56);
  --line:  rgba(237, 239, 245, .11);
  --line2: rgba(237, 239, 245, .19);

  --glow:  #FFC46B;          /* luz encendida */
  --glow2: #FF9A4D;
  --ink:   #1A1206;          /* texto sobre ambar */
  --cool:  #7FA8FF;          /* lo que aun no se ve */

  --display: "Sora", "Segoe UI", system-ui, sans-serif;
  --body:    "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --s1: 8px;  --s2: 16px; --s3: 24px;
  --s4: 40px; --s5: 64px; --s6: 96px;

  --r:  14px;
  --rl: 24px;

  /* Curvas de Emil Kowalski. Las de serie de CSS no tienen fuerza. */
  --out:    cubic-bezier(.23, 1, .32, 1);
  --inout:  cubic-bezier(.77, 0, .175, 1);
  --drawer: cubic-bezier(.32, .72, 0, 1);
}

/* ─── 2. Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Una clase con display gana al [hidden] del navegador. Sin esto,
   cualquier elemento oculto que tenga display en CSS sigue viendose. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; color-scheme: dark; }

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
p { margin: 0 0 var(--s2); }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--glow);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--glow); color: var(--ink);
  padding: 14px 20px; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ─── 3. Ciudad de fondo ────────────────────────────────────────── */
#city {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  display: block;
}
/* Vela que baja el contraste del fondo para que el texto respire.
   Sin esto las luces compiten con la tipografia. */
.veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 7, 13, .82) 0%, rgba(5, 7, 13, .55) 38%, rgba(5, 7, 13, .88) 100%);
  opacity: 0;
  transition: opacity .8s var(--out);
}
body.js.in-app .veil { opacity: 1; }
body:not(.js) .veil { opacity: 1; }

/* ─── 4. Intro: el descenso ─────────────────────────────────────────
   Antes esto era un "runway" de 260vh con una capa sticky, y el
   descenso lo movia la posicion de scroll del documento. Fallaba: en
   escritorio la rueda hacia bajar la pagina sin disparar la animacion,
   y quien entraba por ahi se quedaba sin poder pasar.

   Ahora la intro es una capa fija que bloquea el scroll y el descenso
   lo mueve la rueda directamente. Es determinista y no depende de como
   trate cada navegador el sticky ni el overflow.

   Por defecto (sin JS) todo esto no se aplica: la intro es un bloque
   normal y la aplicacion se ve entera debajo. */
.intro { position: relative; padding: var(--s6) var(--s3); }

body.js .intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  height: 100vh;
  height: 100dvh;
  padding: 0;
}
/* Con la intro puesta, la pagina no se mueve: manda la rueda. */
body.js:not(.in-app) { overflow: hidden; }

.intro__stage {
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s2);
  text-align: center;
  padding: var(--s3);
  overflow: hidden;
}

.clouds { position: absolute; inset: -20%; pointer-events: none; }
/* Bancos de nube alargados, no circulos. Una nube vista de lado es
   ancha y baja; un circulo desenfocado se lee como mancha. */
.cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  background:
    radial-gradient(ellipse 60% 100% at 30% 55%, rgba(196, 212, 240, .3), transparent 70%),
    radial-gradient(ellipse 45% 90%  at 62% 42%, rgba(214, 226, 248, .27), transparent 72%),
    radial-gradient(ellipse 70% 80%  at 82% 62%, rgba(168, 188, 222, .2),  transparent 74%);
  will-change: transform, opacity;
}
.cloud--1 { width: 96vw; height: 20vw; left: -22vw; top: 30%; }
.cloud--2 { width: 78vw; height: 15vw; right: -20vw; top: 52%; opacity: .8; }
.cloud--3 { width: 120vw; height: 22vw; left: -14vw; bottom: 4%; opacity: .62; }
.cloud--4 { width: 66vw; height: 13vw; left: 18vw;  top: 12%;   opacity: .46; }

.intro__mark {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

/* La marca: cuatro ventanas. Dos encendidas, dos no. */
.mark {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  width: 42px; height: 42px;
  padding: 7px;
  border-radius: 11px;
  background: var(--n3);
  border: 1px solid var(--line2);
}
.mark--sm { width: 30px; height: 30px; padding: 5px; border-radius: 8px; gap: 3px; }
.mark__w { display: block; border-radius: 2px; background: #3A4459; transition: background .5s var(--out); }
.mark__w--1, .mark__w--4 { background: var(--glow); }
.mark__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -.05em;
}

.intro__line {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, .9rem + 2.1vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -.03em;
  max-width: 20ch;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--out), transform .7s var(--out);
}
.intro__line--b { color: var(--glow); }
.intro__line.is-on { opacity: 1; transform: none; }

.intro__enter {
  position: absolute;
  bottom: 5vh;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 18px;
  transition: opacity .4s var(--out), transform .16s var(--out);
}
.intro__enter:active { transform: scale(.96); }
.intro__enterT {
  font-family: var(--display);
  font-size: .84rem;
  font-weight: 600;
  color: var(--low);
  transition: color .25s var(--out);
}
@media (hover: hover) and (pointer: fine) {
  .intro__enter:hover .intro__enterT { color: var(--glow); }
  .intro__enter:hover .intro__hint { border-color: var(--glow); }
}
.intro__hint {
  display: block;
  position: relative;
  width: 26px; height: 42px;
  border: 1.5px solid var(--line2);
  border-radius: 14px;
  transition: border-color .25s var(--out);
}
.intro__hint span {
  position: absolute;
  left: 50%; top: 9px;
  width: 3px; height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--glow);
  animation: hint 1.9s var(--inout) infinite;
}
@keyframes hint {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(12px); opacity: .25; }
}
.intro.is-done .intro__enter { opacity: 0; pointer-events: none; }

/* ─── 5. Aplicacion ─────────────────────────────────────────────── */
.app {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
/* Sin JS la aplicacion se ve entera y la intro es un bloque mas: la web
   sigue siendo legible aunque el script no cargue. */
body.js .app { display: none; }
body.js.in-app .app { display: grid; }
body.js.in-app .intro { display: none; }

/* barra */
.bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 14px clamp(var(--s3), 4vw, var(--s5));
  background: rgba(5, 7, 13, .72);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.bar__home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  border-radius: 10px;
  transition: transform .16s var(--out);
}
.bar__home:active { transform: scale(.97); }
.bar__home .mark__name { font-size: 1.2rem; }

.bar__nav { display: none; margin-left: auto; gap: 2px; }
.bar__nav button {
  position: relative;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: .94rem;
  color: var(--low);
  transition: color .2s var(--out), background-color .2s var(--out);
}
.bar__nav button:hover { color: var(--text); background: rgba(237, 239, 245, .06); }
.bar__nav button[aria-current="true"] { color: var(--glow); }
.bar__cta { margin-left: auto; }
@media (min-width: 1000px) {
  .bar__nav { display: flex; }
  .bar__cta { margin-left: 0; }
}

/* ─── 6. Boton lampara: se enciende al pasar por encima ─────────── */
.lamp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid var(--glow);
  overflow: hidden;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--glow);
  isolation: isolate;
  transition: color .28s var(--out), transform .16s var(--out);
}
.lamp--sm { min-height: 42px; padding: 10px 20px; font-size: .92rem; }
/* El relleno crece desde el centro, como una luz que enciende. */
.lamp__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glow);
  transform: scale(.2);
  opacity: 0;
  border-radius: inherit;
  transition: transform .42s var(--out), opacity .3s var(--out);
}
.lamp:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .lamp:hover { color: var(--ink); }
  .lamp:hover .lamp__glow { transform: scale(1); opacity: 1; }
}
.lamp:focus-visible { color: var(--ink); }
.lamp:focus-visible .lamp__glow { transform: scale(1); opacity: 1; }

/* ─── 7. Vistas ─────────────────────────────────────────────────── */
.stack {
  position: relative;
  padding: clamp(var(--s4), 6vw, var(--s6)) clamp(var(--s3), 4vw, var(--s5));
}
.view {
  max-width: 1120px;
  margin-inline: auto;
  outline: none;
}
.view[hidden] { display: none; }
.view--center { display: grid; place-items: center; min-height: 62vh; }

/* Entrada de vista: no es una pagina nueva, es la misma que cambia.

   El escalonado va DENTRO de los keyframes en vez de por
   animation-delay + fill-mode: both. Con `both` el elemento se queda
   en el fotograma inicial (invisible) si la animacion no llega a
   correr, y entonces el contenido desaparece para siempre. Asi el
   estado natural es visible y la animacion solo adorna. */
.view--on > *                 { animation: viewIn .5s var(--out); }
.view--on > *:nth-child(2)    { animation: viewIn2 .58s var(--out); }
.view--on > *:nth-child(3)    { animation: viewIn3 .64s var(--out); }
.view--on > *:nth-child(n+4)  { animation: viewIn4 .7s var(--out); }

@keyframes viewIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes viewIn2 {
  0%, 12%  { opacity: 0; transform: translateY(16px); }
  100%     { opacity: 1; transform: none; }
}
@keyframes viewIn3 {
  0%, 22%  { opacity: 0; transform: translateY(16px); }
  100%     { opacity: 1; transform: none; }
}
@keyframes viewIn4 {
  0%, 30%  { opacity: 0; transform: translateY(16px); }
  100%     { opacity: 1; transform: none; }
}

.head { margin-bottom: var(--s5); }
.head .h2 { max-width: 17ch; }
.head--center { text-align: center; margin-inline: auto; }
.h2 { font-size: clamp(1.9rem, 1.2rem + 2.7vw, 3.1rem); margin-bottom: var(--s3); }
.h2 em { font-style: normal; color: var(--glow); }
.head__p { color: var(--mid); font-size: 1.1rem; margin: 0; max-width: 52ch; }

/* ─── 8. Hub y sus puertas ──────────────────────────────────────── */
.hub { display: grid; gap: var(--s3); }
.hub__h {
  font-size: clamp(2.3rem, 1.3rem + 4.4vw, 4rem);
  max-width: 15ch;
}
.hub__h em { font-style: normal; color: var(--glow); }
.hub__sub { color: var(--mid); font-size: 1.14rem; max-width: 46ch; margin: 0 0 var(--s3); }

.doors {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.door {
  position: relative;
  display: grid;
  gap: 6px;
  text-align: left;
  padding: var(--s3);
  border-radius: var(--rl);
  background: rgba(16, 21, 31, .72);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .3s var(--out), border-color .3s var(--out), background-color .3s var(--out);
}
.door:active { transform: scale(.985); }
.door__t { font-family: var(--display); font-weight: 600; font-size: 1.16rem; }
.door__d { color: var(--low); font-size: .93rem; }

/* Las ventanas de cada puerta se encienden en cascada al pasar por
   encima. Es el gesto de la marca aplicado a la navegacion. */
.door__win {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  width: 26px; height: 26px;
  margin-bottom: 6px;
}
.door__win i {
  border-radius: 2px;
  background: #2C3547;
  transition: background .28s var(--out), box-shadow .28s var(--out);
}
@media (hover: hover) and (pointer: fine) {
  .door:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 196, 107, .42);
    background: rgba(23, 29, 42, .85);
  }
  .door:hover .door__win i { background: var(--glow); box-shadow: 0 0 10px rgba(255, 196, 107, .8); }
  .door:hover .door__win i:nth-child(1) { transition-delay: 0ms; }
  .door:hover .door__win i:nth-child(2) { transition-delay: 55ms; }
  .door:hover .door__win i:nth-child(3) { transition-delay: 110ms; }
  .door:hover .door__win i:nth-child(4) { transition-delay: 165ms; }
}
.door:focus-visible .door__win i { background: var(--glow); }
.door--cta { border-color: rgba(255, 196, 107, .35); background: rgba(255, 196, 107, .07); }
.door--cta .door__t { color: var(--glow); }

/* ─── 9. La calle: dos negocios, el mismo negocio ───────────────── */
.street { margin-bottom: var(--s6); }
.street__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--s2);
  max-width: 720px;
  margin: 0 auto var(--s3);
}
.shop { position: relative; transition: transform .9s var(--drawer), opacity .7s var(--out); }
.shop__svg { width: 100%; display: block; }
.shop__tag {
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--n3);
  border: 1px solid var(--line2);
  color: var(--low);
  white-space: nowrap;
  transition: opacity .4s var(--out);
}
.shop__tag--on { background: var(--glow); border-color: transparent; color: var(--ink); }

.street__vs { display: grid; place-items: center; padding-bottom: 22%; }
.street__vs span {
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, transparent, var(--line2), transparent);
  display: block;
  transition: opacity .4s var(--out);
}

/* Fachada */
.sv-body   { fill: #131926; }
.sv-upper rect { fill: #1B2333; }
.sv-sign   { fill: #1B2333; }
.sv-awning { fill: #232C3E; }
.sv-glass  { fill: #0D121C; transition: fill .7s var(--out); }
.sv-door   { fill: #0D121C; transition: fill .7s var(--out); }
.sv-ground { fill: rgba(5, 7, 13, .9); }
.sv-people circle, .sv-people rect { fill: #0A0E18; }
.pp { opacity: 0; transition: opacity .6s var(--out); }
/* El local a oscuras no esta vacio del todo: queda alguien de paso. */
.shop--dark .pp--3 { opacity: .38; }
.shop--dark .pp--3 circle, .shop--dark .pp--3 rect { fill: #2A3346; }

/* Estado encendido */
.shop--lit .sv-glass { fill: #FFC46B; }
.shop--lit .sv-door  { fill: #E9A84F; }
.shop--lit .sv-sign  { fill: #2A3346; }
.shop--lit .pp { opacity: 1; }
.shop--lit .pp--2 { transition-delay: .1s; }
.shop--lit .pp--4 { transition-delay: .18s; }
.shop--lit .pp--5 { transition-delay: .26s; }
.shop--lit .shop__svg { filter: drop-shadow(0 0 26px rgba(255, 196, 107, .34)); }
/* Algunas ventanas de arriba tambien encendidas: el edificio vive */
.shop--lit .sv-upper rect:nth-child(2n) { fill: #37415A; }

.street__cap {
  text-align: center;
  color: var(--mid);
  max-width: 52ch;
  margin: 0 auto var(--s3);
  transition: opacity .35s var(--out);
}

/* boton del truco */
.reveal-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  font-family: var(--display);
  font-weight: 600;
  transition: transform .16s var(--out), border-color .3s var(--out), color .3s var(--out);
}
.reveal-btn__i svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--out);
}
.reveal-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .reveal-btn:hover { border-color: var(--glow); color: var(--glow); }
  .reveal-btn:hover .reveal-btn__i svg { transform: translateX(4px); }
}
.street.is-merged .reveal-btn { display: none; }

/* Fusion: el de la izquierda se desplaza sobre el de la derecha y
   se descubre que era el mismo local todo el rato. */
.street.is-merged .shop--dark { transform: translateX(calc(100% + var(--s2))) scale(.98); opacity: 0; }
.street.is-merged .shop--lit  { transform: translateX(calc(-50% - var(--s2) / 2)); }
.street.is-merged .street__vs span { opacity: 0; }
.street.is-merged .shop__tag { opacity: 0; }
.street.is-merged .street__cap { opacity: 0; }

.street__punch {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
  min-height: 1px;
}
.street__punch p {
  font-family: var(--display);
  font-size: clamp(1.15rem, .9rem + 1.1vw, 1.6rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  margin: 0 0 10px;
  animation: viewIn2 .7s var(--out);
}
.street__punch small {
  display: block;
  font-size: .98rem;
  color: var(--mid);
  font-family: var(--body);
  font-weight: 400;
  animation: viewIn4 .85s var(--out);
}
.street__punch em { font-style: normal; color: var(--glow); }

/* ─── 10. Ventajas ──────────────────────────────────────────────── */
.gains {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.gain {
  padding: var(--s3);
  border-radius: var(--rl);
  background: rgba(16, 21, 31, .6);
  border: 1px solid var(--line);
  transition: border-color .3s var(--out), transform .3s var(--out);
}
.gain h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--glow); }
.gain p { color: var(--mid); font-size: .97rem; margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .gain:hover { transform: translateY(-3px); border-color: var(--line2); }
}

/* ─── 11. Proceso ───────────────────────────────────────────────── */
.path { display: grid; gap: 10px; margin-bottom: var(--s5); }
.path__s {
  border-radius: var(--rl);
  background: rgba(16, 21, 31, .6);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .3s var(--out), background-color .3s var(--out);
}
.path__s.is-open { border-color: rgba(255, 196, 107, .34); background: rgba(23, 29, 42, .8); }
.path__b {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3);
  text-align: left;
  transition: transform .16s var(--out);
}
.path__b:active { transform: scale(.995); }
.path__n {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--low);
  transition: background-color .3s var(--out), color .3s var(--out), border-color .3s var(--out);
}
.path__s.is-open .path__n { background: var(--glow); color: var(--ink); border-color: transparent; }
.path__t { font-family: var(--display); font-weight: 600; font-size: 1.08rem; }
/* Cruz que gira a mas: mismo elemento, dos estados */
.path__c { position: relative; width: 15px; height: 15px; }
.path__c::before, .path__c::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--glow); border-radius: 2px;
  transition: transform .3s var(--out), opacity .3s var(--out);
}
.path__c::before { width: 15px; height: 2px; }
.path__c::after  { width: 2px; height: 15px; }
.path__s.is-open .path__c::after { transform: rotate(90deg); opacity: 0; }

.path__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--out);
}
.path__s.is-open .path__body { grid-template-rows: 1fr; }
.path__body > p {
  overflow: hidden;
  margin: 0;
  padding: 0 var(--s3) 0 calc(var(--s3) + 38px + var(--s3));
  color: var(--mid);
  max-width: 72ch;
  opacity: 0;
  transition: opacity .3s var(--out), padding-bottom .38s var(--out);
}
.path__s.is-open .path__body > p { opacity: 1; padding-bottom: var(--s3); }

.creed {
  padding: var(--s4);
  border-radius: var(--rl);
  border: 1px solid var(--line);
  background: rgba(5, 7, 13, .66);
}
.creed__h { font-size: 1.3rem; margin-bottom: var(--s3); }
.creed__l { display: grid; gap: var(--s2); }
@media (min-width: 820px) { .creed__l { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); } }
.creed__l li {
  position: relative;
  padding-left: 26px;
  color: var(--mid);
  font-size: .99rem;
}
.creed__l li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 12px; height: 2px;
  border-radius: 2px;
  background: var(--glow2);
}

/* ─── 12. Tarifas: una cada vez ─────────────────────────────────── */
.rates { margin-bottom: var(--s5); }
.rates__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.rates__dots { display: flex; gap: 8px; flex-wrap: wrap; }
.rates__dots button {
  height: 5px; width: 30px;
  border-radius: 3px;
  background: var(--n4);
  transition: background-color .3s var(--out), width .3s var(--out);
}
.rates__dots button[aria-selected="true"] { background: var(--glow); width: 52px; }

.rates__arrows { display: flex; gap: 10px; }
.arrow {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  transition: transform .16s var(--out), border-color .3s var(--out), background-color .3s var(--out);
}
.arrow svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .32s var(--out);
}
.arrow:active { transform: scale(.94); }
.arrow[disabled] { opacity: .3; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .arrow:not([disabled]):hover { border-color: var(--glow); color: var(--glow); background: rgba(255, 196, 107, .09); }
  .arrow:not([disabled]):hover svg { transform: translateX(-3px); }
  .arrow--next:not([disabled]):hover svg { transform: translateX(3px); }
}

.rates__win { position: relative; }
.rate {
  padding: clamp(var(--s3), 3vw, var(--s5));
  border-radius: var(--rl);
  background: rgba(16, 21, 31, .78);
  border: 1px solid var(--line);
}
.rate[hidden] { display: none; }
/* La tarifa entra desplazada segun la direccion de la flecha */
.rate--in-next { animation: rateNext .42s var(--out); }
.rate--in-prev { animation: ratePrev .42s var(--out); }
@keyframes rateNext {
  from { opacity: 0; transform: translateX(38px) scale(.98); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes ratePrev {
  from { opacity: 0; transform: translateX(-38px) scale(.98); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.rate__k {
  display: inline-block;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 196, 107, .13);
  border: 1px solid rgba(255, 196, 107, .3);
  color: var(--glow);
  margin: 0 0 var(--s3);
}
.rate__h { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: var(--s2); }
.rate__p { display: flex; align-items: baseline; gap: 4px; margin: 0 0 4px; }
.rate__n {
  font-family: var(--display);
  font-size: clamp(3rem, 2rem + 4vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--glow);
}
.rate__e { font-family: var(--display); font-size: 1.6rem; font-weight: 600; color: var(--glow); }
.rate__r { color: var(--low); font-size: .92rem; margin-bottom: var(--s3); }
.rate__d { color: var(--mid); max-width: 60ch; margin-bottom: var(--s3); }
.rate__l { display: grid; gap: 10px; }
@media (min-width: 760px) { .rate__l { grid-template-columns: 1fr 1fr; gap: 10px var(--s4); } }
.rate__l li {
  position: relative;
  padding-left: 26px;
  color: var(--mid);
  font-size: .96rem;
}
.rate__l li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 14px; height: 8px;
  border-left: 2px solid var(--glow);
  border-bottom: 2px solid var(--glow);
  transform: rotate(-45deg);
}

/* ─── 13. Extras de tarifas ─────────────────────────────────────── */
.extra { display: grid; gap: 12px; }
@media (min-width: 900px) { .extra { grid-template-columns: 1.3fr 1fr; } }
.extra__c {
  padding: var(--s4);
  border-radius: var(--rl);
  background: rgba(16, 21, 31, .6);
  border: 1px solid var(--line);
}
.extra__c h3 { font-size: 1.15rem; margin-bottom: var(--s2); }
.extra__c p { color: var(--mid); font-size: .97rem; }
.extra__c--month { background: rgba(255, 196, 107, .07); border-color: rgba(255, 196, 107, .26); }
.month {
  font-family: var(--display);
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--glow);
  margin: 0 0 var(--s2);
  font-variant-numeric: tabular-nums;
}
.month span { font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--low); }
.fine { font-size: .88rem; color: var(--low); margin: 0; }

/* deslizador de complejidad */
.slider { margin-top: var(--s3); }
.slider__track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--n4);
  cursor: pointer;
}
.slider__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--glow2), var(--glow));
  transition: width .3s var(--out);
}
.slider__fill::after {
  content: "";
  position: absolute;
  right: -9px; top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 0 4px rgba(255, 196, 107, .2);
}
.slider__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: .84rem;
  color: var(--low);
}
.slider__out { margin: var(--s2) 0 0; color: var(--text); font-size: .97rem; min-height: 3em; }

/* ─── 14. Nosotros ──────────────────────────────────────────────── */
.essay { max-width: 62ch; }
.essay p { color: var(--mid); }
.essay__lead { font-size: 1.28rem; line-height: 1.5; color: var(--text); }
.essay__mark {
  padding-left: var(--s3);
  border-left: 2px solid var(--glow);
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.45;
}
.pledge {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
@media (min-width: 640px) { .pledge { grid-template-columns: repeat(3, 1fr); } }
.pledge dt { font-size: .8rem; color: var(--low); margin-bottom: 6px; }
.pledge dd { font-family: var(--display); font-weight: 600; font-size: 1rem; }

/* ─── 15. Dudas como conversacion ───────────────────────────────── */
.chat {
  max-width: 720px;
  border-radius: var(--rl);
  border: 1px solid var(--line);
  background: rgba(10, 14, 24, .74);
  overflow: hidden;
}
.chat__log {
  display: grid;
  gap: 12px;
  padding: var(--s3);
  min-height: 220px;
  max-height: 52vh;
  overflow-y: auto;
  align-content: start;
}
.msg { max-width: 82%; }
.msg p {
  margin: 0;
  padding: 13px 17px;
  font-size: .99rem;
  line-height: 1.5;
}
.msg--them { justify-self: start; }
.msg--them p {
  background: var(--n3);
  color: var(--text);
  border-radius: 16px 16px 16px 5px;
}
.msg--me { justify-self: end; }
.msg--me p {
  background: var(--glow);
  color: var(--ink);
  border-radius: 16px 16px 5px 16px;
  font-weight: 500;
}
.msg--in { animation: msgIn .34s var(--out); }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* puntos de escribiendo */
.typing p { display: flex; gap: 5px; align-items: center; padding: 17px; }
.typing i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--low);
  animation: dot 1.3s var(--inout) infinite;
}
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

.chat__asks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: var(--s3);
  border-top: 1px solid var(--line);
  background: rgba(5, 7, 13, .5);
}
.ask {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  font-size: .9rem;
  color: var(--mid);
  transition: transform .16s var(--out), border-color .25s var(--out), color .25s var(--out), background-color .25s var(--out);
}
.ask:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .ask:hover { border-color: var(--glow); color: var(--glow); background: rgba(255, 196, 107, .09); }
}
.ask.is-used { opacity: .32; pointer-events: none; }

/* ─── 16. Hablanos: el boton que era un movil ───────────────────── */
/* OJO: la perspectiva va en .phone, no en .flipzone. Un ancestro con
   perspective se convierte en bloque contenedor de los descendientes
   position:fixed, y entonces el movil no se centra en la pantalla
   sino dentro de la zona, y los enlaces se salen del viewport. */
.flipzone { display: grid; justify-items: center; gap: var(--s3); }

.phone {
  width: 210px;
  height: 380px;
  border-radius: 34px;
  perspective: 1400px;
  transition: transform .62s var(--drawer), width .62s var(--drawer), height .62s var(--drawer);
  animation: breathe 4.5s var(--inout) infinite;
}
/* Movimiento minimo y con motivo: sin el, un rectangulo quieto no
   se lee como pulsable. Se detiene en cuanto se abre. */
@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.flipzone.is-open .phone { animation: none; }
.phone__in {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  /* Misma duracion y misma curva que el cuerpo. Con 100 ms de
     diferencia el giro y el crecimiento se ven como dos animaciones
     distintas peleandose, que es justo lo que se notaba. */
  transition: transform .62s var(--drawer);
}
.phone__back, .phone__front {
  position: absolute;
  inset: 0;
  border-radius: 34px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* Cara trasera: parece un movil apoyado boca abajo */
/* La cara trasera tiene que LEERSE como un objeto sobre la pagina.
   En gris oscuro sobre fondo oscuro nadie lo identifica como boton,
   y entonces la pieza entera no ocurre. Cuerpo mas claro, canto
   iluminado y un halo ambar debajo, como un movil bajo una farola. */
.phone__back {
  display: grid;
  place-content: center;
  gap: var(--s3);
  justify-items: center;
  background:
    linear-gradient(155deg, #39445C 0%, #222B3E 42%, #151C2B 100%);
  border: 1px solid rgba(237, 239, 245, .3);
  box-shadow:
    inset 0 1px 0 rgba(237, 239, 245, .28),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 26px 50px -20px rgba(0, 0, 0, .9),
    0 0 70px -14px rgba(255, 196, 107, .3);
}
.phone__lens {
  position: absolute;
  top: 18px; left: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 7px;
  border-radius: 13px;
  background: rgba(5, 7, 13, .6);
  border: 1px solid var(--line);
}
.phone__lens i {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #46536E, #0B0F18 68%);
  box-shadow: inset 0 0 0 1px rgba(237, 239, 245, .12);
}
.phone__lens i:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: 9px; height: 9px; }
.phone__logo { opacity: .95; }
.phone__cue {
  font-family: var(--display);
  font-size: .86rem;
  font-weight: 600;
  color: var(--glow);
  transition: color .3s var(--out);
}
@media (hover: hover) and (pointer: fine) {
  .phone:hover .phone__cue { color: var(--glow); }
  .phone:hover .phone__back { border-color: rgba(255, 196, 107, .4); }
}
.phone:active { transform: scale(.97); }

/* Cara delantera */
.phone__front {
  transform: rotateY(180deg);
  background: #05070D;
  border: 1px solid var(--line2);
  padding: 12px;
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .95);
}
.phone__notch {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 74px; height: 18px;
  border-radius: 12px;
  background: #05070D;
  z-index: 3;
}
.screen {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 196, 107, .16), transparent 62%),
    linear-gradient(180deg, #0D1220, #080B14);
  border: 1px solid var(--line);
}
.screen__apps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  padding: 0 12px;
}
.ap {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 14px 6px;
  border-radius: 18px;
  background: rgba(237, 239, 245, .05);
  border: 1px solid var(--line);
}
.ap__ic {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
}
.ap__ic svg { width: 23px; height: 23px; }
.ap--call .ap__ic { background: linear-gradient(150deg, #4ED07A, #1E9E4C); }
.ap--call .ap__ic svg { fill: #04210F; stroke: none; }
.ap--wa .ap__ic { background: linear-gradient(150deg, #5BF08B, #16A34A); }
.ap--wa .ap__ic svg { fill: #04210F; stroke: none; }
.ap__n { font-family: var(--display); font-size: .76rem; font-weight: 600; color: var(--mid); }
.ap__v {
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Abierto: gira, crece y se lleva al centro de la pantalla */
.flipzone.is-open .phone {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 210;
  width: 280px;
  height: 505px;
  margin: 0;
  transform: translate(-50%, -50%);
}
.flipzone.is-open .phone__in { transform: rotateY(180deg); }
.flipzone.is-open .phone__cue { opacity: 0; }

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(3, 4, 8, .82);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .5s var(--out);
}
.backdrop.is-on { opacity: 1; }

/* Enlaces reales debajo del movil abierto */
.taps {
  position: fixed;
  left: 50%;
  top: calc(50% + 275px);
  z-index: 211;
  display: flex;
  gap: 12px;
  transform: translate(-50%, 0);
  /* Esperan a que el movil termine (620 ms) y entonces suben. Antes
     aparecian a los 240 ms, con el movil todavia creciendo, y por eso
     se veian descoordinados. El retardo va dentro de los keyframes
     para que el estado natural siga siendo visible. */
  animation: tapsIn .92s var(--out);
}
@keyframes tapsIn {
  0%, 62%  { opacity: 0; transform: translate(-50%, 18px); }
  100%     { opacity: 1; transform: translate(-50%, 0); }
}
.tap {
  display: grid;
  gap: 2px;
  padding: 12px 22px;
  border-radius: 16px;
  background: var(--glow);
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  transition: transform .16s var(--out);
}
.tap span { font-size: .74rem; opacity: .78; }
.tap strong { font-family: var(--display); font-size: 1rem; font-variant-numeric: tabular-nums; }
.tap:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .tap:hover { transform: translateY(-2px); } }

.flipzone__fine { color: var(--low); font-size: .9rem; margin: 0; }

/* ─── 17. Pie ───────────────────────────────────────────────────── */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s3) clamp(var(--s3), 4vw, var(--s5));
  border-top: 1px solid var(--line);
  color: var(--low);
  font-size: .88rem;
}
.foot p { margin: 0; }
.foot nav { display: flex; gap: var(--s3); }
.foot a { text-decoration: none; transition: color .2s var(--out); }
.foot a:hover { color: var(--text); }

/* ─── 18. Movil ─────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .street__row { grid-template-columns: 1fr; gap: var(--s3); }
  .street__vs { display: none; }
  .street.is-merged .shop--dark { transform: translateY(30px) scale(.96); opacity: 0; height: 0; }
  .street.is-merged .shop--lit { transform: none; }
  .rates__top { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .rates__arrows { justify-content: space-between; }
  .path__body > p { padding-left: var(--s3); }
  .flipzone.is-open .phone { width: 240px; height: 432px; }
  .taps { top: auto; bottom: 6vh; flex-direction: column; width: min(260px, 80vw); }
}

/* ─── 19. Movimiento reducido ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  body.js .intro { position: relative; height: auto; padding: var(--s6) var(--s3); }
  body.js:not(.in-app) { overflow: visible; }
  .intro__stage { height: auto; }
  .intro__line { opacity: 1; transform: none; }
  .intro__hint { display: none; }
  .cloud { display: none; }
}