/* KINE HINGE · Web pública
   Escena: un profe revisa esto en el celular entre dos clases, con luz de
   tarde en el dojo o en la consulta. Claro, cálido, con energía.
   Color comprometido: caqui-naranja (toma la luz dorada de las fotos) sobre
   papel cálido y tinta café profunda. Anybody (ancho variable, se «estira»
   como una banda elástica) para titulares; Onest para leer. */
:root{
  --papel:   oklch(96.6% .016 75);
  --papel-2: oklch(93.2% .024 70);
  --tinta:   oklch(21% .025 45);
  --tinta-2: oklch(38% .025 45);
  --tinta-3: oklch(52% .02 50);
  --fuego:   oklch(66% .185 38);
  --fuego-os:oklch(52% .17 35);
  --acento-txt: oklch(56% .18 36);   /* el color de marca cuando va como texto sobre papel */
  --sobre-fuego: var(--luz);          /* texto encima del color de marca */
  --sombra-fuego: oklch(55% .17 38 / .7);
  --brasa:   oklch(30% .06 38);
  --luz:     oklch(97.5% .012 75);
  --ok:      oklch(58% .13 150);
  --alerta:  oklch(62% .16 55);
  --linea:   oklch(85% .025 65);
  --f-disp: 'Anybody', 'Arial Narrow', system-ui, sans-serif;
  --f-txt:  'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --e-out: cubic-bezier(.16,1,.3,1);
  --pad: clamp(20px, 5vw, 72px);
  color-scheme: light;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.6 var(--f-txt); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img{ display: block; max-width: 100%; }
a{ color: inherit; }
h1,h2,h3{ margin: 0; font-family: var(--f-disp); line-height: .98; letter-spacing: -.01em; text-wrap: balance; }
p{ margin: 0; }
:focus-visible{ outline: 3px solid var(--fuego); outline-offset: 3px; border-radius: 6px; }

/* ─── Opciones de color (en revisión: ?revision=1 muestra el selector) ─── */
:root[data-tema="indigo"]{ --fuego: oklch(46% .2 274); --fuego-os: oklch(38% .19 274); --acento-txt: oklch(46% .2 274);
  --brasa: oklch(86% .09 85); --papel: oklch(97% .012 85); --papel-2: oklch(93.5% .02 85); --sombra-fuego: oklch(40% .18 274 / .6); }
:root[data-tema="mora"]{ --fuego: oklch(44% .15 352); --fuego-os: oklch(36% .14 352); --acento-txt: oklch(46% .15 352);
  --brasa: oklch(85% .07 60); --papel: oklch(97% .012 40); --papel-2: oklch(93.5% .02 30); --sombra-fuego: oklch(38% .14 352 / .6); }
:root[data-tema="lima"]{ --fuego: oklch(89% .19 122); --fuego-os: oklch(82% .2 122); --acento-txt: oklch(48% .14 135); --sobre-fuego: var(--tinta);
  --brasa: oklch(42% .13 135); --papel: oklch(97% .01 100); --papel-2: oklch(93% .02 105); --sombra-fuego: oklch(70% .18 122 / .55); }
.temas{ position: fixed; left: 16px; bottom: 16px; z-index: 30; display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 999px;
  background: var(--tinta); color: var(--luz); font: 600 .82rem var(--f-txt); box-shadow: 0 12px 30px -12px oklch(20% .03 40 / .6); }
.temas button{ width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.temas button[aria-pressed="true"]{ border-color: var(--luz); }

/* ─── Marca ─── */
.marca{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-iso{ width: 34px; height: 34px; }
.marca-iso rect{ fill: var(--fuego); }
.marca-iso circle{ fill: var(--sobre-fuego); }
.marca-iso path{ fill: none; stroke: var(--sobre-fuego); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--e-out); }
.marca:hover .marca-iso path{ animation: liga 1s var(--e-out); }
@keyframes liga{ from{ stroke-dashoffset: 60; } to{ stroke-dashoffset: 0; } }
.marca-txt{ font: 800 1.45rem/1 var(--f-disp); font-stretch: 125%; letter-spacing: -.03em; }

/* ─── Botones ─── */
.btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px;
  font: 650 1rem/1 var(--f-txt); text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .4s var(--e-out), background-color .3s, color .3s, box-shadow .4s var(--e-out); }
.btn:hover{ transform: translateY(-2px); }
.btn-fuego{ background: var(--fuego); color: var(--sobre-fuego); box-shadow: 0 14px 30px -14px var(--sombra-fuego); }
.btn-fuego:hover{ background: var(--fuego-os); }
.btn-tinta{ background: var(--tinta); color: var(--luz); min-height: 42px; padding: 0 18px; font-size: .92rem; }
.btn-linea{ border-color: currentColor; background: transparent; }
.btn-linea:hover{ background: var(--tinta); color: var(--luz); border-color: var(--tinta); }

/* ─── Cabecera ─── */
.top{ position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 14px var(--pad);
  transition: background-color .4s, box-shadow .4s; }
.top.con-fondo{ background: oklch(96.6% .016 75 / .9); box-shadow: 0 1px 0 var(--linea); backdrop-filter: saturate(1.4) blur(8px); }
.nav{ display: flex; gap: 4px; margin-left: auto; font-weight: 600; font-size: .95rem; padding: 5px; border-radius: 999px;
  background: oklch(98% .01 75 / .92); box-shadow: 0 8px 24px -14px oklch(25% .05 40 / .45); backdrop-filter: blur(8px); }
.nav a{ text-decoration: none; color: var(--tinta); padding: 8px 14px; border-radius: 999px; transition: background-color .3s, color .3s; }
.nav a:hover{ background: var(--tinta); color: var(--luz); }
@media (max-width: 760px){ .nav{ display: none; } .top .btn-tinta{ margin-left: auto; } }

/* ─── Hero ─── */
.hero{ min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px);
  padding: 110px var(--pad) 48px; position: relative; }
.hero::before{ content: ''; position: absolute; inset: 0 0 0 52%; background: var(--fuego); border-radius: 0 0 0 clamp(40px, 7vw, 120px); z-index: -1; }
.kicker{ font-weight: 650; font-size: .95rem; color: var(--acento-txt); margin-bottom: 22px; }
.hero-txt{ position: relative; z-index: 2; }
.hero h1{ font-size: clamp(2.7rem, 5.4vw, 5.6rem); font-weight: 800; font-stretch: 100%; }
.h-linea{ display: block; white-space: nowrap; }
.estira{ font-style: normal; color: var(--acento-txt); display: inline-block; font-stretch: 112%; transition: font-stretch 1.2s var(--e-out); }
.hero-lead{ margin-top: 28px; max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--tinta-2); }
.hero-lead b{ color: var(--tinta); }
.hero-cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-pie{ margin-top: 18px; font-size: .9rem; color: var(--tinta-3); }

/* Escena 3D: foto + teléfono + avisos, siguen al mouse */
.escena, .marca-escena{ perspective: 1400px; height: min(78svh, 680px); position: relative; }
.escena-in{ position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s var(--e-out);
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -14deg)); }
.foto{ margin: 0; position: absolute; overflow: hidden; border-radius: 28px; box-shadow: 0 50px 90px -40px oklch(25% .08 40 / .7); }
.foto img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--e-out), opacity .5s; }
.foto-hero{ width: 62%; height: 84%; left: 4%; top: 6%; transform: translateZ(-60px); }
.tel-hero{ right: 6%; bottom: 2%; transform: translateZ(90px) rotateY(-6deg); }
.chip{ position: absolute; display: flex; align-items: center; gap: 9px; padding: 11px 16px; background: var(--luz); border-radius: 16px;
  font: 600 .88rem/1.2 var(--f-txt); box-shadow: 0 20px 40px -18px oklch(25% .06 40 / .55); white-space: nowrap; }
.chip-a{ left: -2%; top: 18%; transform: translateZ(140px); animation: flota 7s ease-in-out infinite; }
.chip-b{ left: 10%; bottom: 10%; transform: translateZ(170px); animation: flota 8s ease-in-out -3s infinite; }
@keyframes flota{ 50%{ translate: 0 -10px; } }
.punto{ width: 9px; height: 9px; border-radius: 50%; flex: none; }
.punto.ok{ background: var(--ok); box-shadow: 0 0 0 4px oklch(58% .13 150 / .18); }
.punto.alerta{ background: var(--alerta); box-shadow: 0 0 0 4px oklch(62% .16 55 / .2); }
.hilo{ position: absolute; inset: 20% 8% 22% 22%; width: 70%; height: 58%; transform: translateZ(40px); overflow: visible; pointer-events: none; }
.hilo path{ fill: none; stroke: var(--luz); stroke-width: 2.5; stroke-dasharray: 6 9; opacity: .8; animation: corre 2.4s linear infinite; }
@keyframes corre{ to{ stroke-dashoffset: -30; } }

/* ─── Teléfono 3D (cuerpo con grosor real) ─── */
.tel{ --w: 252px; --h: 520px; --g: 16px; position: absolute; width: var(--w); height: var(--h); transform-style: preserve-3d; }
.tel > .cara, .tel > .lado{ position: absolute; border-radius: 40px; backface-visibility: hidden; }
.tel > .frente{ inset: 0; background: oklch(18% .015 45); padding: 10px; transform: translateZ(calc(var(--g) / 2)); box-shadow: inset 0 0 0 1.5px oklch(40% .02 45); }
.tel > .dorso{ inset: 0; background: linear-gradient(135deg, oklch(30% .02 45), oklch(18% .015 45)); transform: rotateY(180deg) translateZ(calc(var(--g) / 2)); }
.tel > .lado{ background: oklch(26% .02 45); border-radius: 8px; }
.tel > .lado-d{ width: var(--g); height: calc(var(--h) - 60px); top: 30px; right: calc(var(--g) / -2); transform: rotateY(90deg); }
.tel > .lado-i{ width: var(--g); height: calc(var(--h) - 60px); top: 30px; left: calc(var(--g) / -2); transform: rotateY(-90deg); }
.pantalla{ position: relative; width: 100%; height: 100%; border-radius: 31px; overflow: hidden; background: oklch(98.5% .006 75); color: oklch(22% .02 45);
  font: 400 12.5px/1.4 var(--f-txt); display: flex; flex-direction: column; }
.pantalla::before{ content: ''; position: absolute; top: 8px; left: 50%; translate: -50% 0; width: 76px; height: 20px; border-radius: 12px; background: oklch(16% .01 45); z-index: 3; }
.p-barra{ display: flex; justify-content: space-between; padding: 10px 20px 2px; font: 600 10.5px var(--f-txt); }
.p-cab{ display: flex; align-items: center; gap: 9px; padding: 8px 16px 10px; border-bottom: 1px solid oklch(92% .01 70); }
.p-ini{ width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fffaf3; font: 800 11px var(--f-disp); background: var(--c); flex: none; }
.p-cab b{ display: block; font-size: 12.5px; line-height: 1.15; }
.p-cab small{ font-size: 10px; color: oklch(55% .02 50); }
.p-cuerpo{ padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.p-h{ font: 800 17px/1.1 var(--f-disp); }
.p-sub{ font-size: 11px; color: oklch(50% .02 50); margin-top: -4px; }
.t-item{ border: 1px solid oklch(91% .012 70); border-radius: 13px; padding: 9px 11px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center;
  animation: entra .7s var(--e-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
.t-item b{ font-size: 12px; }
.t-item small{ grid-column: 1; font-size: 10.5px; color: oklch(52% .02 50); }
.t-item .t-der{ grid-row: 1 / 3; grid-column: 2; }
.t-item.hecha{ opacity: .55; }
.t-item.activa{ border: 2px solid var(--c); }
.check{ width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid oklch(80% .02 60); display: grid; place-items: center; }
.hecha .check{ background: var(--c); border-color: var(--c); }
.hecha .check::after{ content: ''; width: 8px; height: 4px; border: 2px solid #fffaf3; border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -1px; }
.p-btn{ border-radius: 10px; padding: 9px; text-align: center; font: 700 11.5px var(--f-txt); color: #fffaf3; background: var(--c); }
.p-btn.sec{ background: oklch(94% .01 70); color: oklch(35% .02 50); }
.p-fila{ display: flex; gap: 6px; }
.p-fila > *{ flex: 1; }
.estado{ font: 700 9.5px var(--f-txt); padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.estado.ok{ background: oklch(94% .04 150); color: oklch(42% .1 150); }
.estado.al{ background: oklch(94% .045 60); color: oklch(48% .13 50); }
.asignar{ font: 700 10px var(--f-txt); color: #fffaf3; background: var(--c); padding: 5px 8px; border-radius: 7px; white-space: nowrap; }
.burbuja{ max-width: 82%; padding: 8px 11px; border-radius: 14px; font-size: 11.5px; animation: entra .7s var(--e-out) both; animation-delay: calc(var(--i, 0) * 160ms); }
.burbuja.yo{ align-self: flex-end; background: var(--c); color: #fffaf3; border-bottom-right-radius: 4px; }
.burbuja.el{ align-self: flex-start; background: oklch(94% .01 70); border-bottom-left-radius: 4px; }
.cita{ display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid oklch(93% .01 70); animation: entra .7s var(--e-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
.cita time{ font: 700 11px var(--f-txt); color: var(--c); }
.cobro{ border-radius: 13px; padding: 11px; background: oklch(96% .015 70); display: grid; gap: 6px; animation: entra .7s var(--e-out) both .35s; }
.barra-p{ height: 7px; border-radius: 9px; background: oklch(90% .015 70); overflow: hidden; }
.barra-p i{ display: block; height: 100%; width: 50%; background: var(--c); border-radius: 9px; }
.p-entrada{ align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 20px 22px; }
.p-logo{ width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; background: var(--c); color: #fffaf3; font: 800 24px var(--f-disp); }
.p-campo{ width: 100%; border: 1px solid oklch(88% .015 70); border-radius: 10px; padding: 10px; text-align: left; color: oklch(60% .02 50); font-size: 11.5px; }
.p-con{ margin-top: auto; font: 600 10px var(--f-txt); color: oklch(58% .02 50); }
@keyframes entra{ from{ opacity: 0; transform: translateY(10px); } }

/* ─── Banda de disciplinas ─── */
.banda{ background: var(--tinta); color: var(--luz); overflow: hidden; padding: 22px 0; }
.banda-in{ display: flex; gap: 28px; width: max-content; animation: desliza 38s linear infinite; font: 750 clamp(1.4rem, 3vw, 2.2rem)/1 var(--f-disp); }
.banda-in span{ font-stretch: 120%; }
.banda-in i{ font-style: normal; color: var(--fuego); }
@keyframes desliza{ to{ transform: translateX(-50%); } }

/* ─── Títulos de sección ─── */
.titulo{ font-size: clamp(2.3rem, 5.4vw, 4.4rem); font-weight: 800; font-stretch: 112%; max-width: 15ch; }
.titulo span{ color: var(--acento-txt); }
.lead{ margin-top: 20px; font-size: 1.12rem; color: var(--tinta-2); max-width: 44ch; }

/* ─── Cómo funciona ─── */
.conectado{ display: flex; gap: 12px; align-items: baseline; max-width: 58ch; }
.pulso{ position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); translate: 0 -2px; }
.pulso::after{ content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); animation: late 2s var(--e-out) infinite; }
@keyframes late{ to{ transform: scale(3.2); opacity: 0; } }
.link-pasos{ list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: lp; max-width: 560px; }
.link-pasos li{ counter-increment: lp; padding: 14px 14px 12px; border-radius: 18px; background: var(--papel); display: grid; gap: 2px; font-size: .9rem; }
.link-pasos li::before{ content: counter(lp); font: 800 1.4rem/1 var(--f-disp); color: var(--acento-txt); margin-bottom: 6px; }
.link-pasos span{ color: var(--tinta-3); font-size: .84rem; }
@media (max-width: 560px){ .link-pasos{ grid-template-columns: 1fr; } }
.como{ padding: clamp(80px, 12vw, 150px) var(--pad) 40px; }
.como-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 96px); margin-top: 56px; }
.pasos{ list-style: none; margin: 0; padding: 0; }
.paso{ min-height: 62svh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .6s var(--e-out); max-width: 40ch; }
/* Pasos no activos: legibles, solo atenuados (antes .3 y se perdían) */
.paso:not(.activo){ opacity: .62; }
.paso.activo{ opacity: 1; }
.paso-n{ font: 800 1rem/1 var(--f-disp); font-stretch: 150%; color: var(--acento-txt); }
.paso h3{ font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; margin: 14px 0 14px; }
.paso p{ color: var(--tinta-2); font-size: 1.08rem; }
.como-tel{ position: sticky; top: 12svh; height: 76svh; perspective: 1400px; display: grid; place-items: center; }
.tel-como{ position: relative; transition: transform 1.1s var(--e-out); transform: rotateY(var(--gy, -18deg)) rotateX(6deg); }
.como-tel::before{ content: ''; position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--fuego); z-index: -1; transform: translateZ(-200px); }
.sombra{ position: absolute; bottom: 4%; width: 46%; height: 26px; border-radius: 50%; background: oklch(25% .05 40 / .25); filter: blur(14px); }

/* ─── Tu marca ─── */
.marca-sec{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center;
  padding: clamp(80px, 11vw, 140px) var(--pad); background: var(--papel-2); }
.selector{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.selector button{ font: 650 .98rem var(--f-txt); min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--tinta); background: transparent; color: var(--tinta); cursor: pointer;
  transition: background-color .3s, color .3s; }
.selector button[aria-pressed="true"]{ background: var(--tinta); color: var(--luz); }
.ficha-marca{ margin: 30px 0 0; display: grid; gap: 0; max-width: 420px; }
.ficha-marca div{ display: grid; grid-template-columns: 90px 1fr; padding: 12px 0; border-top: 1px solid var(--linea); }
.ficha-marca dt{ color: var(--tinta-3); font-size: .92rem; }
.ficha-marca dd{ margin: 0; font-weight: 650; }
.nota{ margin-top: 18px; font-size: .85rem; color: var(--tinta-3); }
.foto-marca{ width: 66%; height: 86%; right: 2%; top: 4%; transform: translateZ(-80px); }
.tel-marca{ left: 6%; bottom: 0; transform: translateZ(80px) rotateY(10deg); }
.icono-flota{ position: absolute; left: 2%; top: 8%; transform: translateZ(160px); display: grid; justify-items: center; gap: 6px; animation: flota 7s ease-in-out infinite; }
.icono-flota span{ width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; background: var(--c, var(--fuego)); color: #fffaf3; font: 800 26px var(--f-disp);
  box-shadow: 0 20px 40px -16px oklch(25% .06 40 / .6), 0 0 0 5px var(--luz); transition: background-color .5s; }
.icono-flota small{ font: 650 .82rem var(--f-txt); background: var(--luz); padding: 3px 10px; border-radius: 10px; }
.marca-escena .escena-in{ --rx: 4deg; --ry: 12deg; }

/* ─── Precios ─── */
.precios{ padding: clamp(80px, 11vw, 140px) var(--pad); }
.planes{ display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 0; margin-top: 52px; align-items: stretch; border-top: 2px solid var(--tinta); }
.plan{ padding: 34px clamp(18px, 2.4vw, 34px) 30px; display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--linea); position: relative; }
.plan:last-child{ border-right: 0; }
.plan h3{ font-size: 1.6rem; font-weight: 800; font-stretch: 120%; }
.precio{ display: grid; gap: 4px; }
.precio b{ font: 800 clamp(2.4rem, 4.4vw, 3.4rem)/1 var(--f-disp); letter-spacing: -.02em; }
.precio small{ color: var(--tinta-3); font-size: .95rem; }
.plan ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; }
.plan li{ padding-left: 26px; position: relative; color: var(--tinta-2); }
.plan li::before{ content: ''; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border: 2.5px solid var(--fuego); border-top: 0; border-right: 0; rotate: -45deg; }
.plan .btn{ align-self: flex-start; }
.plan-dest{ background: var(--tinta); color: var(--luz); border-radius: 0 0 28px 28px; transform: translateY(-2px); }
.plan-dest li, .plan-dest .precio small{ color: oklch(84% .02 70); }
.plan-dest .btn-fuego{ box-shadow: none; }
.sello{ position: absolute; top: 18px; right: 20px; font: 700 .8rem var(--f-txt); background: var(--fuego); color: var(--sobre-fuego); padding: 6px 12px; border-radius: 999px; }

/* ─── Formulario ─── */
.espacio{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 90px); padding: clamp(80px, 11vw, 140px) var(--pad);
  background: var(--fuego); color: var(--sobre-fuego); border-radius: clamp(36px, 6vw, 90px) clamp(36px, 6vw, 90px) 0 0; }
.titulo-luz span{ color: var(--brasa); }
.espacio .lead{ color: var(--sobre-fuego); opacity: .9; }
.form{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; align-content: start; }
.form label{ display: grid; gap: 7px; font: 600 .92rem var(--f-txt); }
.form label small{ font-weight: 500; opacity: .8; }
.form input:not([type=radio]){ min-height: 50px; border-radius: 14px; border: 1.5px solid oklch(80% .1 45); background: oklch(97% .02 70); color: var(--tinta); padding: 0 14px; font: 500 1rem var(--f-txt); }
.form input:not([type=radio]):focus{ outline: 3px solid var(--tinta); outline-offset: 1px; }
.form input[aria-invalid="true"]{ border-color: var(--brasa); box-shadow: 0 0 0 2px var(--brasa); }
.plan-elige{ grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plan-elige legend{ font: 600 .92rem var(--f-txt); margin-bottom: 8px; padding: 0; }
.plan-elige label{ display: inline-flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid currentColor; cursor: pointer; }
.plan-elige label:has(input:checked){ background: var(--tinta); border-color: var(--tinta); color: var(--luz); }
.plan-elige input{ accent-color: var(--fuego); }
.trampa{ position: absolute; left: -9999px; }
.form .btn{ grid-column: 1 / -1; justify-self: start; background: var(--tinta); }
.form .btn:hover{ background: var(--brasa); }
.form .btn[disabled]{ opacity: .6; cursor: progress; }
.form-msg{ grid-column: 1 / -1; font-weight: 600; min-height: 1.6em; }
.form.enviado{ grid-template-columns: 1fr; }
.gracias{ grid-column: 1 / -1; background: var(--luz); color: var(--tinta); border-radius: 24px; padding: 30px; animation: entra .8s var(--e-out); }
.gracias h3{ font-size: 2rem; font-weight: 800; margin-bottom: 8px; }

/* ─── Pie ─── */
.pie{ background: var(--tinta); color: oklch(84% .02 70); padding: 48px var(--pad); display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; }
.pie .marca{ color: var(--luz); }
.pie-c{ margin-left: auto; font-size: .9rem; }

/* ─── Entrada al hacer scroll ─── */
[data-revela]{ opacity: 0; transform: translateY(28px); transition: opacity .9s var(--e-out), transform .9s var(--e-out); }
[data-revela].visto{ opacity: 1; transform: none; }

/* ─── Celular y tablet ─── */
@media (max-width: 960px){
  .hero{ grid-template-columns: 1fr; padding-top: 96px; }
  .hero::before{ inset: 56% 0 0 0; border-radius: clamp(40px, 7vw, 120px) clamp(40px, 7vw, 120px) 0 0; }
  .escena{ height: 560px; }
  .como-grid{ grid-template-columns: 1fr; }
  /* En celular el teléfono queda fijo arriba, más chico, y cada paso se lee debajo */
  .como-tel{ order: -1; top: 62px; height: 370px; z-index: 1; background: var(--papel); margin: 0 calc(var(--pad) * -1); }
  .tel-como{ scale: .68; }
  .como-tel::before{ width: 230px; }
  .paso{ min-height: 72svh; justify-content: flex-end; padding-bottom: 6svh; }
  .marca-sec, .espacio{ grid-template-columns: 1fr; }
  .marca-escena{ height: 560px; }
  .planes{ grid-template-columns: 1fr; border-top: 0; }
  .plan{ border-right: 0; border-top: 1px solid var(--linea); }
  .plan-dest{ border-radius: 28px; }
}
@media (max-width: 560px){
  .form{ grid-template-columns: 1fr; }
  .escena .tel, .marca-escena .tel{ --w: 210px; --h: 434px; }
  .chip{ font-size: .8rem; padding: 9px 12px; }
  .chip-a{ left: 0; top: 6%; }
  .pie-c{ margin-left: 0; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition-duration: .01ms !important; }
  html{ scroll-behavior: auto; }
  [data-revela]{ opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   PULIDO (pasada Lovable, 29-oct) · capa sobre la base
   Para cambiar el color: edita [data-tema="indigo"] o data-tema en <html>.
   ════════════════════════════════════════════════════════════════ */
:root[data-tema="indigo"]{ --tinta: oklch(22% .03 48); --tinta-2: oklch(36% .03 48); --tinta-3: oklch(48% .025 50); --linea: oklch(86% .02 75); }
:root{ --sh-1: 0 1px 2px oklch(24% .04 48 / .08), 0 4px 12px -4px oklch(24% .04 48 / .12);
  --sh-3: 0 2px 4px oklch(24% .04 48 / .06), 0 18px 36px -18px oklch(24% .04 48 / .35), 0 40px 80px -40px oklch(24% .04 48 / .35);
  --e-in: cubic-bezier(.55,0,.75,.2); }
html{ overflow-x: clip; }
body{ overflow-x: clip; text-rendering: optimizeLegibility; }
main > section, .banda{ overflow-x: clip; }
::selection{ background: var(--fuego); color: var(--sobre-fuego); }
.espacio :focus-visible, .plan-dest :focus-visible{ outline-color: var(--luz); }

/* Cabecera: barra sólida flotante, se lee siempre (también sobre el color) */
.top{ inset: 10px clamp(10px, 2vw, 24px) auto; padding: 8px 8px 8px 16px; border-radius: 999px; gap: 16px;
  background: var(--luz); box-shadow: 0 0 0 1px var(--linea), var(--sh-1); transition: box-shadow .4s var(--e-out); }
.top.con-fondo{ background: var(--luz); backdrop-filter: none; box-shadow: 0 0 0 1px var(--linea), var(--sh-3); }
.top .marca{ color: var(--tinta); }
.marca-txt{ font-size: 1.3rem; }
.marca-iso{ width: 30px; height: 30px; }
.nav{ background: transparent; box-shadow: none; backdrop-filter: none; padding: 0; gap: 2px; }
.nav a{ color: var(--tinta-2); padding: 9px 14px; }
.nav a:hover{ background: var(--papel-2); color: var(--tinta); }
.top .btn-tinta{ min-height: 40px; }
.btn-tinta:hover{ background: var(--fuego); color: var(--sobre-fuego); }

.btn:active{ transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn-fuego{ box-shadow: 0 1px 0 oklch(100% 0 0 / .2) inset, 0 14px 30px -14px var(--sombra-fuego); }
.btn-fuego:hover{ box-shadow: 0 1px 0 oklch(100% 0 0 / .2) inset, 0 20px 36px -16px var(--sombra-fuego); }

.hero{ padding-top: 120px; }
.kicker{ display: inline-flex; align-items: center; gap: 10px; letter-spacing: .01em; }
.kicker::before{ content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.hero h1{ letter-spacing: -.025em; line-height: .94; }
.hero-lead{ line-height: 1.55; }
.hero::before{ background: radial-gradient(120% 80% at 80% 10%, oklch(100% 0 0 / .08), transparent 60%), var(--fuego); }

/* Profundidad 3D más realista */
.foto{ box-shadow: 0 2px 6px oklch(24% .04 48 / .12), 0 30px 60px -30px oklch(24% .05 48 / .55), 0 70px 120px -60px oklch(24% .06 48 / .5); }
.foto::after{ content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .14); background: linear-gradient(180deg, transparent 55%, oklch(20% .03 48 / .22)); }
.chip{ box-shadow: 0 1px 2px oklch(24% .04 48 / .1), 0 14px 30px -14px oklch(24% .05 48 / .45), 0 30px 50px -30px oklch(24% .05 48 / .35); color: var(--tinta); }
.tel > .frente{ background: oklch(17% .012 48);
  box-shadow: inset 0 0 0 1.5px oklch(42% .02 48), inset 0 0 0 4px oklch(22% .015 48),
  0 2px 4px oklch(15% .02 48 / .2), 0 40px 70px -30px oklch(15% .03 48 / .65), 0 80px 120px -60px oklch(15% .03 48 / .5); }
.tel > .lado{ background: linear-gradient(180deg, oklch(34% .02 48), oklch(22% .015 48) 50%, oklch(30% .02 48)); }
.tel > .lado-d::after{ content: ''; position: absolute; left: 3px; right: 3px; top: 90px; height: 54px; border-radius: 3px; background: oklch(40% .02 48); }
.pantalla::after{ content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, oklch(100% 0 0 / .16) 0%, oklch(100% 0 0 / 0) 34%, oklch(100% 0 0 / 0) 70%, oklch(100% 0 0 / .06)); }
.pantalla > *{ transition: opacity .35s var(--e-out), filter .35s var(--e-out); }
.tel.cambiando .pantalla > *:not(.p-barra){ opacity: 0; filter: blur(3px); }
.t-item{ background: oklch(100% 0 0); }
.t-item.activa{ box-shadow: 0 6px 14px -8px var(--c); }

/* Giro entre pantallas con aceleración real */
.tel-como{ transition: transform .9s var(--e-out); will-change: transform; }
.tel-como.gira{ transition: transform .38s var(--e-in); }
.como-tel::before{ box-shadow: inset 0 -30px 60px oklch(15% .05 274 / .25); }

.banda{ padding: 20px 0; }
.banda-in i{ color: var(--brasa); }
.banda-in span{ font-stretch: 125%; letter-spacing: -.01em; }
.banda:hover .banda-in{ animation-play-state: paused; }

.titulo{ letter-spacing: -.025em; line-height: .96; }
.lead{ line-height: 1.55; }
.paso{ transition: opacity .6s var(--e-out), translate .6s var(--e-out); translate: 0 8px; }
.paso.activo{ translate: 0 0; }
.paso-n{ display: inline-flex; align-items: center; gap: 12px; }
.paso-n::after{ content: ''; height: 2px; width: 0; background: currentColor; border-radius: 2px; transition: width .8s var(--e-out); }
.paso.activo .paso-n::after{ width: 48px; }
.link-pasos li{ background: var(--luz); box-shadow: 0 0 0 1px var(--linea); }

.selector button{ transition: background-color .3s, color .3s, transform .3s var(--e-out); }
.selector button:hover{ background: var(--papel); transform: translateY(-1px); }
.selector button[aria-pressed="true"]{ background: var(--tinta); }
.ficha-marca dd{ transition: opacity .3s; overflow-wrap: anywhere; }

.plan h3{ letter-spacing: -.01em; }
.plan-dest{ box-shadow: var(--sh-3); }
.plan-dest li::before{ border-color: var(--brasa); }
.nota{ line-height: 1.5; }

/* Formulario: campos neutros, foco claro */
.form input:not([type=radio]){ border-color: transparent; background: var(--luz); box-shadow: 0 1px 0 oklch(100% 0 0 / .4) inset; transition: box-shadow .25s, border-color .25s; }
.form input:not([type=radio])::placeholder{ color: var(--tinta-3); }
.form input:not([type=radio]):focus{ outline: 3px solid var(--brasa); outline-offset: 2px; }
.plan-elige label{ transition: background-color .25s, color .25s, border-color .25s; }
.plan-elige label:hover{ background: oklch(100% 0 0 / .1); }
.plan-elige label:has(input:focus-visible){ outline: 3px solid var(--luz); outline-offset: 2px; }
.form .btn{ color: var(--luz); }
.form .btn:hover{ background: var(--luz); color: var(--tinta); }
.form-msg{ color: var(--sobre-fuego); }

@media (max-width: 760px){ .top{ padding-left: 12px; } }
@media (max-width: 560px){
  .hero{ padding-top: 100px; }
  .hero h1{ font-size: clamp(2.35rem, 11.4vw, 3rem); }
  .titulo{ font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .hero-cta .btn{ flex: 1 1 auto; }
  .escena, .marca-escena{ height: 500px; }
  .foto-hero{ width: 70%; left: 2%; }
  .tel-hero{ right: 2%; }
  .chip-a{ left: 5%; }
  .chip-b{ left: 2%; }
  .icono-flota span{ width: 62px; height: 62px; font-size: 22px; }
  .top .btn-tinta{ padding: 0 14px; font-size: .88rem; }
  .marca-txt{ font-size: 1.15rem; }
  .plan .btn{ align-self: stretch; }
  .link-pasos li{ grid-template-columns: 28px 1fr; padding: 12px 14px; column-gap: 10px; }
  .link-pasos li::before{ grid-row: 1 / 3; margin: 0; align-self: center; }
}
@media (max-width: 380px){ .h-linea{ white-space: normal; } }
@media (prefers-reduced-motion: reduce){ .tel.cambiando .pantalla > *{ opacity: 1; filter: none; } }
:root[data-tema="bosque"]{ --fuego: oklch(42% .1 158); --fuego-os: oklch(35% .09 158); --acento-txt: oklch(42% .1 158);
  --brasa: oklch(88% .1 95); --papel: oklch(97% .012 90); --papel-2: oklch(93.5% .02 95); --sombra-fuego: oklch(35% .09 158 / .6); }
:root[data-tema="coral"]{ --fuego: oklch(64% .17 28); --fuego-os: oklch(56% .17 28); --acento-txt: oklch(55% .17 28);
  --brasa: oklch(30% .06 28); --papel: oklch(97% .012 60); --papel-2: oklch(93.5% .02 55); --sombra-fuego: oklch(52% .16 28 / .6); }
/* Bosque + lima: verde profundo de base, lima solo en detalles (en vivo, sello, palabras clave sobre verde, checks) */
:root[data-tema="bosque-lima"]{ --fuego: oklch(40% .095 158); --fuego-os: oklch(33% .085 158); --acento-txt: oklch(40% .095 158);
  --brasa: oklch(89% .19 122); --papel: oklch(97% .012 100); --papel-2: oklch(93.5% .02 105); --sombra-fuego: oklch(33% .085 158 / .6);
  --ok: oklch(80% .2 128); }
:root[data-tema="bosque-lima"] .sello{ background: var(--brasa); color: var(--tinta); }
:root[data-tema="bosque-lima"] .hero .estira{ text-decoration: underline; text-decoration-color: var(--brasa); text-decoration-thickness: .12em; text-underline-offset: .1em; }
:root[data-tema="bosque-lima"] .como-tel::before{ box-shadow: inset 0 -30px 60px oklch(15% .05 158 / .25), 0 0 0 10px oklch(89% .19 122 / .35); }
:root[data-tema="bosque-lima"] .plan li::before{ border-color: var(--fuego); }
:root[data-tema="bosque-lima"] .plan-dest li::before{ border-color: var(--brasa); }

/* CTA-VERDE: el botón de la cabecera va en el color de marca (antes negro); el del formulario, en lima sobre el verde */
.top .btn-tinta{ background: var(--fuego); color: var(--sobre-fuego); box-shadow: 0 8px 18px -10px var(--sombra-fuego); }
.top .btn-tinta:hover{ background: var(--brasa); color: var(--tinta); }
.form .btn{ background: var(--brasa); color: var(--tinta); }
.form .btn:hover{ background: var(--luz); color: var(--tinta); }