/* Tu Negocio MX — página propia (no usa la plantilla de clientes).
   Temas: html[data-tema="noche"] (inicio) y html[data-tema="dia"]. */

:root {
  --fuente: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --margen: clamp(16px, 4.2vw, 64px);
  --ancho: 1240px;
  --barra-h: 60px;
  --suave: cubic-bezier(.16, 1, .3, 1);
  --naranja: #f2a33a;
  --petroleo: #0f3d3e;
  --hueso: #efe8da;
  --cel-w: min(50vw, 22vh);
  --cel-w: min(50vw, 22svh);
}

html[data-tema="noche"] {
  --fondo: #071a19;
  --fondo-2: #0d2625;
  --fondo-3: #18302f;
  --texto: #efe8da;
  --texto-2: #b3c0b6;
  --linea: rgba(239, 232, 218, .14);
  --linea-fuerte: rgba(239, 232, 218, .4);
  --acento-tinta: #f2a33a;
  --sobre-acento: #071a19;
  --brillo-op: .62;
  --sombra-color: rgba(0, 0, 0, .7);
  --sombra-telefono: rgba(0, 0, 0, .3);
  color-scheme: dark;
}

html[data-tema="dia"] {
  --fondo: #f3ede1;
  --fondo-2: #e9e0ce;
  --fondo-3: #d6cab3;
  --texto: #0f3d3e;
  --texto-2: #3f5f5d;
  --linea: rgba(15, 61, 62, .16);
  --linea-fuerte: rgba(15, 61, 62, .42);
  --acento-tinta: #9a4d0b;
  --sobre-acento: #0f3d3e;
  --brillo-op: 0;
  --sombra-color: rgba(15, 61, 62, .36);
  --sombra-telefono: rgba(15, 61, 62, .34);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--fondo);
  scroll-padding-top: calc(var(--barra-h) + 8px);
  scrollbar-color: var(--fondo-3) var(--fondo);
}
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--naranja);
}
::selection { background: var(--naranja); color: #071a19; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: fixed; left: 12px; top: -90px; z-index: 50;
  padding: 12px 18px; border-radius: 10px;
  background: var(--naranja); color: #071a19; font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 12px; }

.ico {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 1.35em;
  border: 2px solid transparent; border-radius: 12px;
  font: inherit; font-size: 1.0625rem; font-weight: 700; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.boton-acento { background: var(--naranja); color: var(--sobre-acento); transition: background-color .25s, transform .4s var(--suave); }
.boton-acento:hover { background: #f7b65a; }
.boton-acento:active { transform: scale(.97); }
.boton-linea { border-color: var(--linea-fuerte); color: var(--texto); }
.boton-linea:hover { border-color: var(--texto); }
.boton-chico { min-height: 44px; min-width: 44px; padding: 0 .7em; font-size: .95rem; background: var(--naranja); color: var(--sobre-acento); }
.boton-chico:hover { background: #f7b65a; }

.enlace {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px;
  font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: .32em; text-decoration-color: var(--naranja);
  transition: color .2s;
}
.enlace:hover { color: var(--acento-tinta); }

/* ---------- Barra ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--barra-h);
  display: flex; align-items: center; gap: 10px;
  padding-inline: var(--margen);
  transition: background-color .35s, box-shadow .35s;
}
.barra.con-fondo { background: var(--fondo); box-shadow: 0 1px 0 var(--linea); }
.marca {
  display: inline-flex; align-items: center; gap: .32em; min-height: 44px; margin-right: auto;
  font-size: 1.3rem; font-weight: 850; font-stretch: 75%; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
}
.marca-ico { width: 36px; height: 36px; flex: none; margin-right: .15em; }
html[data-tema="noche"] .ico-dia, html[data-tema="dia"] .ico-noche { display: none; }
.marca-txt { display: inline-flex; align-items: baseline; gap: .14em; }
.marca-mx {
  color: var(--acento-tinta);
  font-size: .62em; font-weight: 800; font-stretch: 100%; letter-spacing: .02em;
}
.nav { display: none; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 10px; font-weight: 600; text-decoration: none; transition: color .2s;
}
.nav a:hover { color: var(--acento-tinta); }
.tema { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--linea-fuerte); border-radius: 13px; }
.tema button {
  min-height: 44px; min-width: 44px; padding: 0 11px;
  border: 0; border-radius: 9px; background: none; color: var(--texto);
  font: inherit; font-size: .92rem; font-weight: 650; cursor: pointer;
  transition: background-color .25s, color .25s;
}
.tema button[aria-pressed="true"] { background: var(--texto); color: var(--fondo); }
.tema-mov { display: none; }
.solo-grande {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Escena: portada + celular ---------- */
.escena { position: relative; display: flex; flex-direction: column; overflow: clip; }

.escenario {
  position: sticky; top: var(--barra-h); z-index: 2; flex: none; order: 0;
  height: 56vh; height: 56svh;
  background: var(--fondo);
  pointer-events: none;
}
.escenario::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 30px;
  background: linear-gradient(var(--fondo), transparent);
}

.brillo {
  position: absolute; left: 50%; top: 50%;
  width: min(140vw, 820px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(242, 163, 58, 1) 0%, rgba(242, 163, 58, .62) 24%, rgba(238, 124, 44, .26) 48%, rgba(230, 100, 40, .08) 68%, rgba(230, 100, 40, 0) 82%);
  opacity: var(--brillo-op);
  transition: opacity .5s;
}

.cel-pos {
  position: absolute; left: 50%; top: 46%;
  width: var(--cel-w);
  transform: translate(-50%, -50%);
}
/* Sombra difusa detrás: se corre al lado contrario de la inclinación */
.cel-pos::before {
  content: ""; position: absolute; inset: 8% 10% 2% 10%;
  border-radius: calc(var(--cel-w) * .16);
  background: var(--sombra-telefono);
  filter: blur(calc(var(--cel-w) * .1));
  transform: translate(calc(7% - var(--iy, 0) * .8%), calc(5% + var(--ix, 0) * .6%));
}
/* --ix / --iy: inclinación en grados (la pone app.js con el mouse; máx. ~8° y 12°) */
.cel {
  width: var(--cel-w);
  transform: perspective(1300px) rotateX(calc(var(--ix, 0) * 1deg)) rotateY(calc(var(--iy, 0) * 1deg));
}
/* Arrastrar para inclinar (app.js pone .arrastrable si no se pidió reducir movimiento).
   pan-y: en celular el scroll vertical sigue funcionando encima del teléfono */
.cel-pos.arrastrable .cel {
  pointer-events: auto; cursor: grab; touch-action: pan-y pinch-zoom;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.cel-pos.arrastrable .cel img { -webkit-user-drag: none; }
html.arrastrando, html.arrastrando * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
/* Cambio de nicho tipo app: la nueva pantalla entra deslizando y la anterior sale al otro lado */
.cel .tel-pantalla img {
  opacity: 0; transform: translateX(16%);
  transition: opacity .3s ease .1s, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.cel .tel-pantalla img.antes { transform: translateX(-16%); }
.cel .tel-pantalla img.activa { z-index: 1; opacity: 1; transform: none; transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }

.sombra-suelo {
  position: absolute; left: 50%; top: calc(100% + var(--cel-w) * .12);
  width: calc(var(--cel-w) * 1.05); height: calc(var(--cel-w) * .16);
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--sombra-color), transparent);
}

/* ---------- Teléfono: mismo marco en la portada y en Ejemplos ----------
   Medidas en cqw (% del ancho del teléfono): marco 1.3, bisel 2.9, pantalla 390×844 */
.tel { position: relative; container-type: inline-size; }
.tel::before, .tel::after {
  content: ""; position: absolute; z-index: -1; width: 1.7cqw; border-radius: .9cqw;
  background: linear-gradient(90deg, #1f2225, #80858b 45%, #3b3f44 72%, #1a1c1f);
}
.tel::before { right: -.75cqw; top: 25%; height: 13%; }
.tel::after {
  left: -.75cqw; top: 17%; height: 28%;
  -webkit-mask: linear-gradient(#000 0 15%, transparent 15% 26%, #000 26% 58%, transparent 58% 67%, #000 67%);
  mask: linear-gradient(#000 0 15%, transparent 15% 26%, #000 26% 58%, transparent 58% 67%, #000 67%);
}
.tel-marco {
  position: relative;
  padding: 2.9cqw;
  border: 1.3cqw solid transparent;
  border-radius: 15.5cqw;
  background:
    linear-gradient(#020303, #020303) padding-box,
    linear-gradient(140deg, #a7abb0 0%, #4b4f54 7%, #2a2d31 20%, #5a5f65 40%, #2c2f33 58%, #42464b 76%, #2a2d31 90%, #90949a 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 1px #000, var(--tel-sombra, 0 0 #0000);
}
.tel-marco::before {
  content: ""; position: absolute; inset: -1.3cqw; z-index: 5; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 1px 1px 0 rgba(255, 255, 255, .26);
}
.tel-pantalla {
  --estado-h: 11.04cqw;
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 390 / 844;
  border-radius: 11.3cqw;
  background: var(--barra, #111);
  transition: background-color .4s;
}
.tel-pantalla img {
  position: absolute; left: 0; top: var(--estado-h);
  width: 100%; height: calc(100% - var(--estado-h));
  object-fit: cover; object-position: top center;
}
/* Barra de estado: hora y señal/wifi/batería, a los lados de la isla */
.tel-estado {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: var(--estado-h);
  display: grid; grid-template-columns: 1fr 28.5cqw 1fr; align-items: center; justify-items: center;
  padding-top: .3cqw;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 4.05cqw; font-weight: 600; font-stretch: normal; line-height: 1; letter-spacing: -.01em;
  color: #0c0c0c;
  transition: color .4s;
}
.tel[data-tinta="clara"] .tel-estado { color: #fff; }
.tel-estado svg { grid-column: 3; width: 17cqw; height: 3.14cqw; fill: currentColor; }
/* Isla dinámica */
.tel-pantalla::before {
  content: ""; position: absolute; z-index: 3; left: 50%; top: 2.45cqw;
  width: 28.5cqw; height: 8.3cqw; border-radius: 99px;
  transform: translateX(-50%);
  background: radial-gradient(1.5cqw circle at 78% 50%, #1b2334, #07090d 60%, #000);
}
/* Reflejo de vidrio en diagonal */
.tel-pantalla::after {
  content: ""; position: absolute; z-index: 4; inset: 0 -20%; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 36%, rgba(255, 255, 255, 0) 36.2%);
  transform: translateX(calc(var(--iy, 0) * .9%));
}

/* Portada */
.portada {
  position: relative; z-index: 3; order: -1;
  padding: calc(var(--barra-h) + 30px) var(--margen) 22px;
}
.titulo-grande {
  font-size: clamp(2.6rem, 19vw, 7rem);
  font-weight: 860; font-stretch: 70%;
  line-height: .86; letter-spacing: -.03em;
}
.titulo-grande .linea { display: block; }
.titulo-grande, .titulo-seccion, .paso h3, .real h3, .nicho-nombre, .contacto h2 { word-spacing: .07em; }
.portada-texto {
  max-width: 40ch; margin: 22px 0 20px;
  font-size: clamp(1.06rem, 1rem + .35vw, 1.3rem); line-height: 1.5;
  color: var(--texto-2);
}
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Pasos (los textos que acompañan al celular) */
.pasos { position: relative; z-index: 1; order: 1; padding: 6px var(--margen) 0; }
.paso {
  min-height: 50vh; min-height: 50svh;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding-top: 50px;
}
.paso h3 {
  font-size: clamp(2.1rem, 9.5vw, 3.4rem);
  font-weight: 850; font-stretch: 70%; line-height: .92; letter-spacing: -.02em;
}
.paso p { max-width: 34ch; font-size: 1.08rem; color: var(--texto-2); }
.lista-check { display: none; list-style: none; margin: 4px 0; padding: 0; gap: 10px; }
.lista-check li { display: flex; align-items: flex-start; gap: 10px; }
.lista-check .ico { margin-top: .2em; color: var(--acento-tinta); }

/* ---------- Secciones ---------- */
.seccion { position: relative; padding-block: clamp(80px, 10vw, 144px); }
.cabeza { display: grid; gap: 16px; max-width: 920px; margin-bottom: clamp(36px, 5vw, 64px); }
.cabeza p { max-width: 52ch; font-size: clamp(1.06rem, 1rem + .4vw, 1.3rem); color: var(--texto-2); }
.titulo-seccion {
  font-size: clamp(2.5rem, 7vw, 6.25rem);
  font-weight: 850; font-stretch: 70%; line-height: .9; letter-spacing: -.025em;
  text-wrap: balance;
}

/* Ejemplos */
.demos { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px; }
.demo { position: relative; display: flex; flex-direction: column; gap: 8px; }
.demo-vitrina {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 5 / 4; margin-bottom: 14px;
  border-radius: 22px; background: var(--fondo-2);
}
.demo-vitrina::before, .real-vitrina::before {
  content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -34%; height: 70%;
  background: radial-gradient(closest-side, rgba(242, 163, 58, .42), rgba(242, 163, 58, 0));
  opacity: .55; transition: opacity .5s;
}
.demo-vitrina .tel, .real-vitrina .tel {
  --tel-sombra: 0 30px 50px -22px rgba(0, 0, 0, .6);
  position: absolute; left: 50%; top: 11%; width: 52%;
  transform: translateX(-50%);
  transition: transform .8s var(--suave);
}
.demo h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 800; font-stretch: 80%; line-height: 1; }
.demo p { color: var(--texto-2); }
.demo .boton { align-self: flex-start; margin-top: 10px; }
.demo .boton::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
@media (hover: hover) {
  .demo:hover .demo-vitrina .tel, .real:hover .real-vitrina .tel { transform: translateX(-50%) translateY(-14px); }
  .demo:hover .demo-vitrina::before, .real:hover .real-vitrina::before { opacity: 1; }
  .demo:hover .boton-linea { border-color: var(--texto); }
}

/* Diseño premium 3D: franja oscura en Día y Noche */
#ejemplos { padding-bottom: 0; }
.premium {
  --fondo-2: #0d2625; --texto: #efe8da; --texto-2: #b3c0b6;
  --linea: rgba(239, 232, 218, .14); --linea-fuerte: rgba(239, 232, 218, .4);
  --acento-tinta: #f2a33a; --sobre-acento: #071a19;
  color-scheme: dark;
  margin-top: clamp(64px, 8vw, 112px);
  padding-block: clamp(64px, 8vw, 120px);
  border-top: 1px solid var(--linea);
  background: radial-gradient(60% 50% at 50% 0, rgba(242, 163, 58, .13), rgba(242, 163, 58, 0)) #071a19;
  color: var(--texto);
}
.premium-cabeza { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.premium-etiqueta {
  justify-self: start; padding: 6px 13px; border: 1px solid rgba(242, 163, 58, .5); border-radius: 999px;
  color: var(--naranja); font-size: .85rem; font-weight: 700; letter-spacing: .02em;
}
.premium-titulo {
  font-size: clamp(2.5rem, 6vw, 5.25rem);
  font-weight: 850; font-stretch: 70%; line-height: .92; letter-spacing: -.025em; word-spacing: .07em;
}
.premium-texto { max-width: 46ch; font-size: clamp(1.06rem, 1rem + .4vw, 1.3rem); color: var(--texto-2); }
.premium-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.premium-tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.premium-media {
  width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--linea); border-radius: 22px; background: var(--fondo-2);
}
.premium-media img, .premium-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Video cuadrado (logo 3D): completo y centrado sobre su mismo crema, sin orilla en las esquinas */
.premium-media-cuadro { background: #f5efe8; }
.premium-media-cuadro video { object-fit: contain; }
.premium-tarjeta h4 { margin: 6px 0 0; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; font-stretch: 80%; line-height: 1.05; }
.premium-tarjeta p { max-width: 40ch; color: var(--texto-2); }
.premium-tarjeta .boton { margin-top: auto; white-space: normal; text-align: center; }
.premium-pasos {
  list-style: none; display: grid; gap: 10px;
  margin: clamp(40px, 5vw, 64px) 0 0; padding: 22px 0 0; border-top: 1px solid var(--linea);
  font-weight: 600;
}
.premium-pasos b { color: var(--naranja); font-weight: 800; }
.premium-nota { margin-top: 18px; font-size: .92rem; color: var(--texto-2); }
.premium > .contenedor > .boton-acento { margin-top: 28px; white-space: normal; text-align: center; }
/* Compu: las 3 tarjetas en una fila del mismo alto (botones alineados abajo); celular: una debajo de otra */
@media (min-width: 860px) {
  .premium-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
}
@media (min-width: 760px) {
  .premium-pasos { grid-auto-flow: column; grid-auto-columns: auto; justify-content: start; gap: 12px 40px; }
}
.real {
  display: grid; gap: 28px;
  margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--linea);
}
.real-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.real h3 {
  font-size: clamp(2.2rem, 4.8vw, 4.6rem);
  font-weight: 850; font-stretch: 70%; line-height: .92; letter-spacing: -.02em; text-wrap: balance;
}
.real-lugar { font-weight: 650; color: var(--texto-2); }
.real-texto > p:not(.real-lugar):not(.estado) { max-width: 40ch; }
.real .boton { margin-top: 8px; }
.estado {
  display: inline-flex; align-items: center; gap: .55em;
  padding: 6px 13px; border: 1px solid var(--linea-fuerte); border-radius: 999px;
  font-size: .92rem; font-weight: 650;
}
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--naranja); }
.real-vitrina {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 9 / 5; border-radius: 22px; background: var(--fondo-2);
}

/* Lo que hago */
.nichos { list-style: none; margin: clamp(28px, 4vw, 56px) 0 0; padding: 0; border-bottom: 1px solid var(--linea); }
.nicho {
  position: relative; display: grid; gap: 8px;
  padding: 26px 0 20px; border-top: 1px solid var(--linea);
  text-decoration: none;
}
.nicho-nombre {
  justify-self: start;
  font-size: clamp(2rem, 5.4vw, 5.2rem);
  font-weight: 850; font-stretch: 68%; line-height: .92; letter-spacing: -.02em;
  transition: transform .6s var(--suave), color .3s;
}
.nicho-desc { max-width: 40ch; color: var(--texto-2); }
.nicho-desc b { color: var(--acento-tinta); font-weight: 750; }
.nicho-accion {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px;
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: .32em; text-decoration-color: var(--naranja);
}
@media (hover: hover) {
  .nicho:hover .nicho-nombre { transform: translateX(14px); color: var(--acento-tinta); }
}
.vista-flotante { display: none; position: fixed; left: 0; top: 0; z-index: 15; width: 200px; pointer-events: none; }
.vista-flotante img {
  position: absolute; left: 0; top: 0; width: 200px; height: auto;
  border: 6px solid #090c0c; border-radius: 26px;
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: translate(0, -50%) rotate(-7deg) scale(.86);
  transition: opacity .25s, transform .55s var(--suave);
}
.vista-flotante img.visible { opacity: 1; transform: translate(0, -50%) rotate(-4deg) scale(1); }

/* Cómo trabajo */
.etapas { list-style: none; margin: clamp(36px, 5vw, 72px) 0 0; padding: 0; display: grid; gap: 40px; }
.etapas li { padding-top: 18px; border-top: 1px solid var(--linea); }
.etapa-num {
  display: block; margin-bottom: 16px;
  font-size: clamp(6.5rem, 14vw, 11.5rem);
  font-weight: 900; font-stretch: 62%; line-height: .78; letter-spacing: -.04em;
  color: var(--acento-tinta);
}
.etapas h3 {
  margin-bottom: 10px;
  font-size: clamp(1.45rem, 2vw, 1.85rem); font-weight: 800; font-stretch: 85%; line-height: 1.05;
  text-wrap: balance;
}
.etapas p { max-width: 34ch; color: var(--texto-2); }
.pago { display: grid; gap: 14px; margin-top: clamp(56px, 7vw, 96px); }
.pago-titulo { font-size: clamp(1.45rem, 2vw, 1.85rem); font-weight: 800; font-stretch: 85%; }
.pago-barra {
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  border: 2px solid var(--naranja); border-radius: 16px;
}
.pago-mitad {
  display: flex; flex-direction: column; gap: 4px;
  padding: clamp(18px, 2.6vw, 30px);
  font-size: clamp(1rem, .9rem + .6vw, 1.35rem); font-weight: 650;
}
.pago-mitad b { font-size: clamp(2.8rem, 6.4vw, 5.4rem); font-weight: 900; font-stretch: 64%; line-height: .88; letter-spacing: -.02em; }
.pago-uno { background: var(--naranja); color: var(--sobre-acento); }
.pago-nota { color: var(--texto-2); }

/* Precios: banda invertida */
html[data-tema="noche"] .precios {
  --fondo: #efe8da; --fondo-2: #e5dccb; --texto: #0f3d3e; --texto-2: #3f5f5d;
  --linea: rgba(15, 61, 62, .2); --linea-fuerte: rgba(15, 61, 62, .45);
  --acento-tinta: #9a4d0b; --sobre-acento: #0f3d3e;
}
html[data-tema="dia"] .precios {
  --fondo: #0f3d3e; --fondo-2: #134748; --texto: #efe8da; --texto-2: #c3cfc7;
  --linea: rgba(239, 232, 218, .2); --linea-fuerte: rgba(239, 232, 218, .45);
  --acento-tinta: #f2a33a; --sobre-acento: #071a19;
}
.precios { background: var(--fondo); color: var(--texto); }
.precios .cabeza b { color: var(--texto); font-weight: 750; }

/* Qué incluye cada paquete */
.paquetes { display: grid; align-items: start; gap: 16px; margin-bottom: clamp(48px, 6vw, 80px); }
.paquete {
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--linea-fuerte); border-radius: 20px;
}
/* El Básico va primero y resalta; el Completo es la opción para quien quiere más */
.paquete-basico { border: 2px solid var(--naranja); background: var(--fondo-2); }
.paquete h3 { font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 850; font-stretch: 70%; line-height: .95; letter-spacing: -.01em; }
.paquete-completo h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.paquete-sub { margin-top: 6px; font-weight: 650; color: var(--texto-2); }
.paquete-mas { margin-top: 10px; font-weight: 750; color: var(--acento-tinta); }
.paquete-extra { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); font-weight: 650; line-height: 1.4; }
.incluye { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.incluye li { display: flex; align-items: flex-start; gap: 10px; }
.incluye .ico { margin-top: .2em; color: var(--acento-tinta); }

/* Una tabla por nicho: Básico y Completo, cada uno con pago único y mensualidad */
.tablas-precios { display: grid; gap: 36px 20px; }
.t-precio {
  width: 100%; table-layout: fixed;
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--linea-fuerte); border-radius: 20px;
}
.t-precio caption {
  caption-side: top; padding-bottom: 14px; text-align: left;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 850; font-stretch: 72%; line-height: 1; letter-spacing: -.01em;
}
.t-precio th, .t-precio td { padding: 16px clamp(14px, 1.4vw, 22px); text-align: left; vertical-align: top; }
.t-precio thead th {
  padding-block: 13px; border-bottom: 1px solid var(--linea-fuerte);
  font-size: .8rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.t-precio thead th + th { color: var(--texto-2); }
.t-precio th + th, .t-precio td + td { border-left: 1px solid var(--linea); }
/* Columna del Básico con fondo; esquinas redondeadas como la tabla */
.t-precio th:first-child, .t-precio td:first-child { background: var(--fondo-2); }
.t-precio thead th:first-child { border-top-left-radius: 19px; }
.t-precio tbody tr:last-child td:first-child { border-bottom-left-radius: 19px; }
.t-precio td + td .p-val { font-size: clamp(1.5rem, 2vw, 1.95rem); }
.p-dif { display: block; margin-top: 6px; font-size: .85rem; font-weight: 700; line-height: 1.3; color: var(--acento-tinta); }
.t-precio tbody tr + tr td { border-top: 1px solid var(--linea); }
.p-etq { display: block; font-size: .9rem; font-weight: 650; color: var(--texto-2); }
.p-val {
  display: block; margin-top: 4px; white-space: nowrap;
  font-size: clamp(1.8rem, 2.5vw, 2.4rem); font-weight: 900; font-stretch: 66%; line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.p-val small { font-size: .95rem; font-weight: 650; font-stretch: 100%; letter-spacing: 0; color: var(--texto-2); }

/* A tu medida: tarjeta a todo lo ancho */
.medida {
  display: grid; gap: 24px;
  margin-top: 40px; padding: clamp(22px, 2.6vw, 36px);
  border: 1px dashed var(--linea-fuerte); border-radius: 20px;
}
.medida-sobre { font-size: .8rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--acento-tinta); }
.medida h3 { margin-top: 6px; font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 850; font-stretch: 70%; line-height: .95; letter-spacing: -.01em; }
.medida-texto { max-width: 52ch; margin-top: 12px; font-size: 1.05rem; color: var(--texto-2); }
.etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.etiquetas li {
  padding: 6px 12px; border: 1px solid var(--linea-fuerte); border-radius: 999px;
  font-size: .88rem; font-weight: 650; line-height: 1.3;
}
.etiquetas .etiqueta-mas { border-style: dashed; color: var(--texto-2); }
.medida-precio {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(18px, 2vw, 26px); border: 2px solid var(--naranja); border-radius: 16px; background: var(--fondo-2);
}
.medida-insignia {
  margin-bottom: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--naranja); color: var(--sobre-acento);
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.medida-precio .p-val { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.medida-precio .medida-mes { margin-top: 12px; }
.medida-precio .medida-mes + .p-val { font-size: clamp(1.6rem, 2.2vw, 2rem); }
.medida-precio .boton { margin-top: 20px; align-self: stretch; }
.medida-nota { padding-top: 16px; border-top: 1px solid var(--linea); font-size: .92rem; line-height: 1.45; color: var(--texto-2); }
@media (min-width: 860px) {
  .medida { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 28px 48px; align-items: start; }
  .medida-nota { grid-column: 1 / -1; }
}
.nota { margin-top: 28px; max-width: 80ch; font-size: 1.02rem; color: var(--texto-2); }
.nota a { font-weight: 700; color: var(--texto); text-decoration-thickness: 2px; text-underline-offset: .25em; text-decoration-color: var(--naranja); }

/* Preguntas */
.faq-rejilla { display: grid; gap: 32px; }
.faq-lista { border-bottom: 1px solid var(--linea); }
.faq-lista details { border-top: 1px solid var(--linea); }
.faq-lista summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 68px; padding: 18px 0; cursor: pointer; list-style: none;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 750; font-stretch: 85%; line-height: 1.3;
  transition: color .2s;
}
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary:hover { color: var(--acento-tinta); }
.faq-lista summary .ico { width: 28px; height: 28px; color: var(--acento-tinta); transition: transform .45s var(--suave); }
.faq-lista details[open] summary .ico { transform: rotate(45deg); }
.faq-lista details p { max-width: 52ch; margin: -2px 0 24px; font-size: 1.1rem; color: var(--texto-2); }

/* Contacto: campo naranja */
.contacto {
  padding-block: clamp(72px, 10vw, 150px);
  background: var(--naranja); color: #0f3d3e;
}
.contacto ::selection { background: #0f3d3e; color: #efe8da; }
.contacto :focus-visible { outline-color: #0f3d3e; }
.contacto h2 {
  max-width: 18ch;
  font-size: clamp(3rem, 2rem + 9vw, 12rem);
  font-weight: 900; font-stretch: 66%; line-height: .98; letter-spacing: -.03em;
  text-wrap: balance;
}
.contacto p { max-width: 34ch; margin: 26px 0 36px; font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); font-weight: 600; line-height: 1.35; }
.boton-grande {
  min-height: 64px; padding: 0 1.5em; border-radius: 14px;
  background: #0f3d3e; color: #efe8da;
  font-size: clamp(1.12rem, 1rem + .5vw, 1.45rem);
}
.boton-grande:hover { background: #071a19; }
.boton-contorno { background: transparent; color: #0f3d3e; border-color: #0f3d3e; }
.boton-contorno:hover { background: #0f3d3e; color: #efe8da; }

/* Pie */
.pie { padding-block: 28px; border-top: 1px solid var(--linea); font-size: .95rem; color: var(--texto-2); }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.pie b { color: var(--texto); }
.pie-redes { display: inline-flex; flex-wrap: wrap; gap: 0 20px; }
.pie-texto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.marca-pie { margin-right: 0; color: var(--texto); }
.pie a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; color: var(--texto); }

/* ---------- Tableta ---------- */
@media (min-width: 700px) {
  .demos { grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
  .demo-vitrina { aspect-ratio: 4 / 5; }
  .demo-vitrina .tel { width: 70%; top: 9%; }
  .etapas { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
  .paquetes { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .tablas-precios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Compu ---------- */
@media (min-width: 860px) {
  /* --titulo: tamaño del título grande; el celular se centra entre el título y el borde derecho */
  :root { --barra-h: 72px; --cel-w: min(26vw, 34vh, 350px); --titulo: min(12vw, 17vh, 9rem); }

  .barra { padding-inline: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen))); }

  .nav { display: flex; gap: 2px; margin-right: 8px; }
  .solo-grande { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .boton-chico { padding: 0 1em; }

  /* Contenido en un contenedor centrado de --ancho; el celular, junto al título */
  .escena { display: block; }
  .escenario { top: 0; z-index: 1; height: 100vh; margin-bottom: -100vh; background: none; }
  .escenario::after { display: none; }
  .brillo, .cel-pos { left: calc(50% + 2.1 * var(--titulo)); }
  .cel-pos { top: 51%; }
  /* La portada queda encima del teléfono: solo el título y el texto reciben el mouse, así se puede arrastrar el teléfono */
  .portada { pointer-events: none; }
  .titulo-grande, .portada-pie { pointer-events: auto; }
  .titulo-grande { width: fit-content; }

  .portada {
    max-width: var(--ancho); margin-inline: auto;
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center; gap: clamp(32px, 7vh, 72px);
    padding: calc(var(--barra-h) + 6vh) var(--margen) 7vh;
  }
  .titulo-grande { font-size: var(--titulo); }
  .portada-pie { max-width: min(44vw, 540px); }
  .portada-texto { margin-top: 0; }

  .pasos {
    z-index: 3; padding: 0 0 0 var(--margen);
    margin-left: calc((100% - min(100%, var(--ancho))) / 2);
    width: calc(min(100%, var(--ancho)) / 2 + 2.1 * var(--titulo) - var(--cel-w) / 2 - clamp(32px, 4vw, 56px));
  }
  .paso { min-height: 80vh; justify-content: center; gap: 18px; padding-block: 10vh; }
  .paso h3 { font-size: clamp(3rem, 5.6vw, 6rem); }
  .paso p { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); max-width: 30ch; }
  .lista-check { display: grid; }
  .escena.dirigida .paso { opacity: .16; transition: opacity .6s var(--suave); }
  .escena.dirigida .paso.activo { opacity: 1; }

  .nicho { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 32px; padding: 30px 0; }
  .nicho-nombre, .nicho-desc { grid-column: 1; }
  .nicho-accion { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  .real { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
  .faq-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 64px; align-items: start; }
}
@media (min-width: 860px) and (hover: hover) and (pointer: fine) {
  .vista-flotante { display: block; }
}
@media (min-width: 1100px) {
  .etapas { grid-template-columns: repeat(4, 1fr); }
  .cabeza { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 48px; max-width: none; }
  .cabeza p { padding-bottom: .4em; }
}

/* ---------- Celular ---------- */
@media (max-width: 859px) {
  .tema { display: none; }
  .tema-mov {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; padding: 0; border: 1px solid var(--linea-fuerte);
    border-radius: 50%; background: none; color: var(--texto); cursor: pointer;
  }
  .tema-mov .ico { width: 20px; height: 20px; }
  html[data-tema="noche"] .ico-luna, html[data-tema="dia"] .ico-sol { display: none; }
}

/* ---------- Movimiento (solo si no se pidió reducirlo) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .titulo-grande .linea { animation: subir 1.1s var(--suave) both; animation-delay: calc(80ms + var(--i) * 90ms); }
  .escenario { animation: aparecer 1.2s var(--suave) .15s both; }
  .cel-entrada { animation: entrada 1.5s var(--suave) .15s both; }
  .cel-flota { animation: flotar 7s ease-in-out infinite; }
  .sombra-suelo { animation: sombra 7s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .cel .tel-pantalla img { transform: none !important; }
}
@keyframes subir { from { opacity: 0; transform: translateY(.4em); } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes entrada { from { transform: translateY(70px) scale(.92); } }
@keyframes flotar { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } }
@keyframes sombra { 0%, 100% { transform: translateX(-50%) scale(.9); opacity: .8; } 50% { transform: translateX(-50%) scale(1); opacity: 1; } }

/* ---------- Aviso de privacidad y líneas legales ---------- */
.pie-legal { padding-top: 4px; font-size: .85rem; }
.pie .pie-legal a { min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--naranja); }
.contacto .contacto-aviso { max-width: none; margin: 18px 0 0; font-size: .92rem; font-weight: 500; }
.contacto-aviso a { font-weight: 700; text-underline-offset: .25em; }
.legal .cabeza { padding-top: var(--barra-h); }
.legal-texto { max-width: 68ch; font-size: 1.06rem; }
.legal-texto h2 {
  margin: 48px 0 14px;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 850; font-stretch: 70%; line-height: 1; letter-spacing: -.015em;
}
.legal-texto p, .legal-texto li { color: var(--texto-2); }
.legal-texto b { color: var(--texto); font-weight: 700; }
.legal-texto p + p { margin-top: 12px; }
.legal-texto ul, .legal-texto ol { margin: 12px 0; padding-left: 1.3em; }
.legal-texto li + li { margin-top: 6px; }
.legal-texto li::marker { color: var(--acento-tinta); }
.legal-texto a { font-weight: 700; color: var(--texto); text-decoration-thickness: 2px; text-underline-offset: .25em; text-decoration-color: var(--naranja); }
.legal-fecha { font-weight: 650; }

/* ---------- WhatsApp flotante (solo celular) ---------- */
.wa-flota { display: none; }
@media (max-width: 859px) {
  .wa-flota {
    position: fixed; z-index: 18;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--naranja); color: #071a19;
    box-shadow: 0 0 0 1px rgba(7, 26, 25, .12), 0 8px 22px rgba(7, 26, 25, .32);
    transition: opacity .3s, transform .4s var(--suave), visibility .3s;
  }
  .wa-flota .ico { width: 28px; height: 28px; }
  .wa-flota:active { transform: scale(.94); }
  .wa-flota.oculto { opacity: 0; visibility: hidden; transform: scale(.8); pointer-events: none; }
  .pie { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}