/* ==========================================================
   AUTOMAX — Hoja de estilos principal
   Paleta: morado oscuro, azul oscuro y acento naranja
   ========================================================== */
:root {
  --morado-900: #1a1033;
  --morado-800: #2a1b4d;
  --morado-700: #3b2a6e;
  --morado-500: #6b4fc4;
  --azul-900: #0b1530;
  --azul-800: #14306b;
  --azul-600: #2450a8;
  --naranja: #ff7a1a;
  --naranja-osc: #e8630a;
  --naranja-claro: #fff1e6;
  --texto: #1d1a2b;
  --texto-suave: #5b5670;
  --borde: #e4e0ef;
  --fondo: #ffffff;
  --fondo-alt: #f6f4fb;
  --ok: #1f9d55;
  --error: #d64545;
  --aviso: #b7791f;
  --radio: 16px;
  --radio-sm: 10px;
  --sombra: 0 10px 30px rgba(26, 16, 51, .10);
  --sombra-fuerte: 0 24px 60px rgba(11, 21, 48, .28);
  --max: 1180px;
  --fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); color: var(--texto); background: var(--fondo); line-height: 1.6; font-size: 16px; }
img, svg { max-width: 100%; display: block; }
a { color: var(--azul-600); }
a:hover { color: var(--naranja-osc); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; color: var(--morado-900); letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--naranja); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 1000; }
.skip-link:focus { left: 8px; }
[hidden] { display: none !important; }

.contenedor { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.seccion { padding: 80px 0; }
.seccion--alt { background: var(--fondo-alt); }
.seccion__cabecera { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.seccion__cabecera p { color: var(--texto-suave); font-size: 1.05rem; }
.etiqueta { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--naranja-osc); background: var(--naranja-claro); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s, color .15s; line-height: 1.2; min-height: 48px; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn--primario { background: var(--naranja); color: #fff; box-shadow: 0 8px 20px rgba(255, 122, 26, .35); }
.btn--primario:hover { background: var(--naranja-osc); color: #fff; }
.btn--secundario { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--secundario:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn--oscuro { background: var(--morado-800); color: #fff; }
.btn--oscuro:hover { background: var(--morado-700); color: #fff; }
.btn--borde { background: #fff; color: var(--morado-800); border-color: var(--borde); }
.btn--borde:hover { border-color: var(--morado-500); color: var(--morado-800); }
.btn--peligro { background: #fff; color: var(--error); border-color: #f1c4c4; }
.btn--ok { background: var(--ok); color: #fff; }
.btn--sm { padding: 8px 14px; min-height: 38px; font-size: .9rem; }
.btn--bloque { width: 100%; }

/* ---------- Encabezado ---------- */
.header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 100; background: rgba(26, 16, 51, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); }
.header__fila { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 16px; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.25rem; }
.marca:hover { color: #fff; }
.marca img { width: 38px; height: 38px; }
.marca span b { color: var(--naranja); font-weight: 800; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: #e8e4f6; text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 8px; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); }
.nav a.btn[aria-current="page"] { background: var(--naranja); }
.nav .btn { margin-left: 8px; padding: 9px 18px; min-height: 40px; color: #fff; }
.nav-toggle { display: none; background: transparent; border: 0; color: #fff; padding: 8px; cursor: pointer; border-radius: 8px; }
.nav-toggle svg { width: 28px; height: 28px; }
.carrito-btn { position: relative; background: rgba(255,255,255,.08); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.carrito-btn svg { width: 22px; height: 22px; }
.carrito-btn__n { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--naranja); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.header__acciones { display: flex; align-items: center; gap: 8px; }

@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: fixed; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--morado-900); padding: 12px 20px 22px; border-bottom: 1px solid rgba(255,255,255,.1); transform: translateY(-120%); transition: transform .25s; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .nav.abierto { transform: translateY(0); }
  .nav a { padding: 14px 8px; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.06); }
  .nav .btn { margin: 14px 0 0; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; color: #fff; padding: calc(var(--header-h) + 64px) 0 80px; background:
  radial-gradient(900px 500px at 85% 20%, rgba(255,122,26,.22), transparent 60%),
  radial-gradient(700px 500px at 10% 90%, rgba(36,80,168,.45), transparent 60%),
  linear-gradient(135deg, var(--morado-900) 0%, var(--morado-800) 45%, var(--azul-800) 100%); }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--naranja); }
.hero__sub { font-size: 1.15rem; color: #d9d4ee; max-width: 560px; margin-bottom: 30px; }
.hero__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.hero__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hero__marca img { width: 54px; height: 54px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.3)); }
.hero__marca span { font-weight: 700; color: #e8e4f6; }
.hero__datos { display: flex; flex-wrap: wrap; gap: 26px; list-style: none; padding: 0; margin: 0; }
.hero__datos li { display: flex; flex-direction: column; }
.hero__datos strong { font-size: 1.5rem; color: #fff; }
.hero__datos li > span { font-size: .88rem; color: #b8b1d6; }

/* Maqueta de celular en CSS */
.telefono-wrap { display: flex; justify-content: center; position: relative; }
.telefono-wrap::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,26,.45), transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); filter: blur(20px); }
.telefono { position: relative; width: 290px; height: 590px; border-radius: 46px; background: #0d0a17; padding: 12px; box-shadow: var(--sombra-fuerte), inset 0 0 0 2px #2b2540; }
.telefono__pantalla { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #f6f4fb; color: var(--texto); display: flex; flex-direction: column; }
.telefono__isla { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 90px; height: 24px; background: #0d0a17; border-radius: 20px; z-index: 3; }
.app__top { background: linear-gradient(135deg, var(--morado-800), var(--azul-800)); color: #fff; padding: 46px 18px 20px; }
.app__barra { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.app__barra img { width: 30px; height: 30px; }
.app__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--naranja); display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.app__hola { font-size: .82rem; color: #cfc8ea; margin: 0; }
.app__nombre { font-size: 1.15rem; font-weight: 800; margin: 0 0 12px; }
.app__cta { width: 100%; background: var(--naranja); color: #fff; border: 0; border-radius: 14px; padding: 11px; font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center; gap: 6px; }
.app__cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.app__iconos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.app__icono { background: #fff; border-radius: 14px; padding: 9px 4px; text-align: center; font-size: .62rem; font-weight: 700; color: var(--morado-800); box-shadow: 0 3px 10px rgba(26,16,51,.06); line-height: 1.2; }
.app__icono i { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 5px; border-radius: 10px; background: var(--naranja-claro); color: var(--naranja-osc); }
.app__icono:nth-child(2) i { background: #e8eefc; color: var(--azul-600); }
.app__icono:nth-child(3) i { background: #efeafc; color: var(--morado-500); }
.app__icono i svg { width: 18px; height: 18px; }
.app__tarjeta { background: #fff; border-radius: 16px; padding: 13px; box-shadow: 0 3px 10px rgba(26,16,51,.06); }
.app__tarjeta h4 { font-size: .8rem; margin: 0 0 8px; display: flex; justify-content: space-between; }
.app__tarjeta h4 small { color: var(--ok); font-weight: 700; }
.app__vehiculo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.app__vehiculo i { width: 38px; height: 38px; border-radius: 12px; background: var(--fondo-alt); display: grid; place-items: center; color: var(--morado-800); }
.app__vehiculo i svg { width: 22px; height: 22px; }
.app__vehiculo b { display: block; font-size: .8rem; }
.app__vehiculo span { font-size: .68rem; color: var(--texto-suave); }
.app__progreso { height: 7px; background: var(--fondo-alt); border-radius: 99px; overflow: hidden; }
.app__progreso span { display: block; height: 100%; width: 72%; background: linear-gradient(90deg, var(--naranja), #ffb067); border-radius: 99px; }
.app__estado { display: flex; justify-content: space-between; font-size: .64rem; color: var(--texto-suave); margin-top: 6px; }
.app__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.app__chips span { font-size: .62rem; font-weight: 700; background: #e7f6ee; color: var(--ok); padding: 4px 8px; border-radius: 99px; }
.app__chips span.alerta { background: var(--naranja-claro); color: var(--naranja-osc); }
.app__promo { background: linear-gradient(135deg, var(--naranja), #ff9a4d); color: #fff; border-radius: 16px; padding: 12px; font-size: .74rem; }
.app__promo b { display: block; font-size: .85rem; }

@media (max-width: 920px) {
  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__sub { margin-left: auto; margin-right: auto; }
  .hero__botones, .hero__datos, .hero__marca { justify-content: center; }
}
@media (max-width: 380px) {
  .telefono { width: 260px; height: 540px; }
  .hero__botones .btn { width: 100%; }
}

/* ---------- Tarjetas / cuadrículas ---------- */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: transparent; }
.tarjeta p { color: var(--texto-suave); margin: 0; }
.icono { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; background: linear-gradient(135deg, var(--morado-800), var(--azul-800)); color: var(--naranja); }
.icono svg { width: 28px; height: 28px; }

/* Banda de confianza */
.banda { background: linear-gradient(120deg, var(--azul-900), var(--morado-800)); color: #fff; padding: 56px 0; }
.banda__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.banda__item { display: flex; gap: 14px; align-items: flex-start; }
.banda__item svg { flex: 0 0 auto; width: 40px; height: 40px; color: var(--naranja); }
.banda__item h3 { color: #fff; font-size: 1.05rem; margin-bottom: 4px; }
.banda__item p { color: #c9c2e6; font-size: .92rem; margin: 0; }
@media (max-width: 960px) { .banda__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .banda__grid { grid-template-columns: 1fr; } }

/* Servicios */
.servicio { display: flex; flex-direction: column; }
.servicio__precio { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.servicio__precio strong { color: var(--morado-800); font-size: 1.1rem; }
.servicio__precio small { color: var(--texto-suave); display: block; font-size: .78rem; }
.servicios-digitales { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.destacado { border-radius: var(--radio); padding: 32px; color: #fff; background: linear-gradient(135deg, var(--morado-800), var(--azul-800)); position: relative; overflow: hidden; }
.destacado::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,122,26,.18); }
.destacado h3 { color: #fff; font-size: 1.35rem; }
.destacado p { color: #d4cdee; }
.destacado ul { margin: 0 0 22px; padding-left: 20px; color: #e6e1f7; }
.destacado li { margin-bottom: 4px; }
.destacado--naranja { background: linear-gradient(135deg, #e8630a, #ff9a4d); }
.destacado--naranja::after { background: rgba(255,255,255,.15); }
.destacado--naranja p, .destacado--naranja ul { color: #fff4ea; }
@media (max-width: 800px) { .servicios-digitales { grid-template-columns: 1fr; } }

/* ---------- Tienda ---------- */
.tienda__controles { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.buscador { position: relative; flex: 1 1 280px; max-width: 420px; }
.buscador svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--texto-suave); }
.buscador input { width: 100%; padding: 13px 16px 13px 44px; border-radius: 999px; border: 1px solid var(--borde); background: #fff; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro { border: 1px solid var(--borde); background: #fff; color: var(--morado-800); border-radius: 999px; padding: 8px 15px; font-weight: 600; font-size: .9rem; cursor: pointer; min-height: 40px; }
.filtro[aria-pressed="true"] { background: var(--morado-800); color: #fff; border-color: var(--morado-800); }
.productos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1060px) { .productos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .productos { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 420px) { .productos { grid-template-columns: 1fr; } }
.producto { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.producto:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.producto__foto { aspect-ratio: 1 / 1; background: var(--fondo-alt); }
.producto__foto img { width: 100%; height: 100%; object-fit: cover; }
.producto__cuerpo { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.producto__cat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--naranja-osc); }
.producto h3 { font-size: 1rem; margin: 4px 0 6px; }
.producto p { font-size: .88rem; color: var(--texto-suave); margin-bottom: 14px; }
.producto__pie { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.producto__precio { font-size: 1.25rem; font-weight: 800; color: var(--morado-900); }
.producto__agotado { font-size: .8rem; font-weight: 700; color: var(--error); }
.vacio { text-align: center; color: var(--texto-suave); padding: 40px 10px; grid-column: 1 / -1; }

/* Carrito lateral */
.carrito { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; }
.carrito__fondo { position: absolute; inset: 0; background: rgba(11, 21, 48, .55); }
.carrito__panel { position: relative; width: min(420px, 100%); height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: var(--sombra-fuerte); animation: deslizar .25s ease; }
@keyframes deslizar { from { transform: translateX(100%); } to { transform: translateX(0); } }
.carrito__cab { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--borde); }
.carrito__cab h2 { font-size: 1.3rem; margin: 0; }
.cerrar { background: var(--fondo-alt); border: 0; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--morado-800); }
.carrito__lista { flex: 1; overflow-y: auto; padding: 10px 20px; list-style: none; margin: 0; }
.carrito__item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.carrito__item img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--fondo-alt); }
.carrito__item b { display: block; font-size: .9rem; line-height: 1.3; }
.carrito__item small { color: var(--texto-suave); }
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--borde); border-radius: 999px; margin-top: 6px; }
.cantidad button { background: none; border: 0; width: 30px; height: 30px; cursor: pointer; font-size: 1.05rem; color: var(--morado-800); }
.cantidad span { min-width: 22px; text-align: center; font-weight: 700; font-size: .9rem; }
.quitar { background: none; border: 0; color: var(--error); cursor: pointer; font-size: .8rem; font-weight: 600; padding: 4px; }
.carrito__pie { padding: 18px 20px 24px; border-top: 1px solid var(--borde); background: var(--fondo-alt); }
.carrito__total { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 800; margin-bottom: 6px; }
.carrito__nota { font-size: .82rem; color: var(--texto-suave); margin-bottom: 14px; }

/* ---------- Contacto ---------- */
.contacto__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .contacto__grid { grid-template-columns: 1fr; } }
.contacto__datos { display: flex; flex-direction: column; gap: 14px; }
.dato { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; text-decoration: none; color: var(--texto); }
a.dato:hover { border-color: var(--naranja); color: var(--texto); }
.dato i { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--naranja-claro); color: var(--naranja-osc); }
.dato i svg { width: 22px; height: 22px; }
.dato b { display: block; font-size: .8rem; color: var(--texto-suave); font-weight: 600; }
.dato span { font-weight: 700; word-break: break-word; }

/* ---------- Formularios ---------- */
.form { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campos .completo { grid-column: 1 / -1; }
@media (max-width: 560px) { .campos { grid-template-columns: 1fr; } .form { padding: 20px; } }
.campo label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--morado-900); }
.campo label .req { color: var(--naranja-osc); }
.campo input, .campo select, .campo textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: #fff; color: var(--texto); min-height: 48px; }
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--morado-500); box-shadow: 0 0 0 3px rgba(107, 79, 196, .18); }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--error); }
.campo .ayuda { font-size: .8rem; color: var(--texto-suave); margin-top: 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--naranja); flex: 0 0 auto; }
.mensaje { padding: 12px 16px; border-radius: var(--radio-sm); font-weight: 600; font-size: .92rem; margin-top: 14px; }
.mensaje--ok { background: #e7f6ee; color: #146c3b; }
.mensaje--error { background: #fdecec; color: #a12d2d; }
.mensaje--info { background: #eef2fd; color: var(--azul-800); }

/* ---------- Páginas internas ---------- */
.pagina-cab { padding: calc(var(--header-h) + 48px) 0 44px; color: #fff; background: linear-gradient(135deg, var(--morado-900), var(--azul-800)); }
.pagina-cab h1 { color: #fff; font-size: clamp(1.8rem, 4.2vw, 2.8rem); margin-bottom: 8px; }
.pagina-cab p { color: #d4cdee; margin: 0; max-width: 680px; }
.migas { font-size: .85rem; margin-bottom: 14px; color: #b8b1d6; }
.migas a { color: #fff; }
.legal { max-width: 820px; margin: 0 auto; padding: 56px 20px 80px; }
.legal h2 { font-size: 1.4rem; margin-top: 2em; padding-top: .4em; }
.legal h3 { margin-top: 1.4em; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal table { width: 100%; border-collapse: collapse; margin: 1em 0 1.6em; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.legal th { background: var(--fondo-alt); color: var(--morado-900); }
.tabla-scroll { overflow-x: auto; }
.aviso-caja { background: var(--naranja-claro); border-left: 4px solid var(--naranja); border-radius: 8px; padding: 16px 18px; margin: 1.4em 0; }
.aviso-caja p:last-child { margin: 0; }
.identidad-caja { background: var(--fondo-alt); border-radius: var(--radio); padding: 20px 22px; margin: 1.4em 0; }
.identidad-caja dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.identidad-caja dt { font-weight: 700; color: var(--morado-900); }
.identidad-caja dd { margin: 0; word-break: break-word; }
@media (max-width: 520px) { .identidad-caja dl { grid-template-columns: 1fr; } .identidad-caja dd { margin-bottom: 8px; } }
.actualizado { color: var(--texto-suave); font-size: .9rem; }

/* ---------- Reservas ---------- */
.reserva { padding: 40px 0 80px; }
.pasos { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 28px; counter-reset: paso; overflow-x: auto; }
.pasos li { flex: 1 1 0; min-width: 92px; text-align: center; font-size: .78rem; font-weight: 600; color: var(--texto-suave); padding-top: 42px; position: relative; counter-increment: paso; }
.pasos li::before { content: counter(paso); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fondo-alt); border: 2px solid var(--borde); font-weight: 800; color: var(--texto-suave); }
.pasos li.activo { color: var(--morado-900); }
.pasos li.activo::before { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.pasos li.hecho::before { content: "✓"; background: var(--morado-800); border-color: var(--morado-800); color: #fff; }
.paso { display: none; }
.paso.activo { display: block; animation: aparecer .25s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.paso__titulo { margin-bottom: 4px; }
.paso__desc { color: var(--texto-suave); margin-bottom: 22px; }
.reserva__layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
@media (max-width: 960px) { .reserva__layout { grid-template-columns: 1fr; } }
.opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 560px) { .opciones { grid-template-columns: 1fr; } }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion label { display: block; height: 100%; border: 2px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s; }
.opcion label b { display: flex; justify-content: space-between; gap: 10px; color: var(--morado-900); }
.opcion label b span { color: var(--naranja-osc); white-space: nowrap; }
.opcion label small { display: block; color: var(--texto-suave); margin-top: 4px; font-size: .84rem; line-height: 1.45; }
.opcion input:checked + label { border-color: var(--naranja); box-shadow: 0 0 0 4px rgba(255,122,26,.15); }
.opcion input:focus-visible + label { outline: 3px solid var(--naranja); outline-offset: 2px; }
.sintomas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .sintomas { grid-template-columns: 1fr; } }
.sintoma { display: flex; align-items: center; gap: 12px; border: 2px solid var(--borde); border-radius: var(--radio-sm); padding: 12px 14px; cursor: pointer; background: #fff; min-height: 52px; }
.sintoma input { width: 20px; height: 20px; accent-color: var(--naranja); flex: 0 0 auto; }
.sintoma:has(input:checked) { border-color: var(--naranja); background: #fffaf5; }

.agenda { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .agenda { grid-template-columns: 1fr; } }
.calendario { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; }
.calendario__cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.calendario__cab h3 { margin: 0; text-transform: capitalize; font-size: 1.05rem; }
.calendario__cab button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--borde); background: #fff; cursor: pointer; font-size: 1.2rem; color: var(--morado-800); }
.calendario__cab button:disabled { opacity: .35; cursor: not-allowed; }
.calendario__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.calendario__dia-sem { font-size: .72rem; font-weight: 700; color: var(--texto-suave); padding: 6px 0; text-transform: uppercase; }
.dia { aspect-ratio: 1; border: 0; border-radius: 10px; background: var(--fondo-alt); cursor: pointer; font-weight: 600; color: var(--morado-900); font-size: .92rem; min-height: 38px; }
.dia:hover:not(:disabled) { background: #ece6fb; }
.dia:disabled { background: transparent; color: #c3bed3; cursor: not-allowed; text-decoration: line-through; text-decoration-color: #ddd8e8; }
.dia.vacio-dia { visibility: hidden; }
.dia.hoy { box-shadow: inset 0 0 0 2px var(--morado-500); }
.dia[aria-pressed="true"] { background: var(--naranja); color: #fff; }
.horas { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; }
.horas h3 { font-size: 1.05rem; }
.horas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hora { border: 2px solid var(--borde); background: #fff; border-radius: 10px; padding: 10px 4px; cursor: pointer; font-weight: 700; color: var(--morado-900); min-height: 46px; }
.hora:hover:not(:disabled) { border-color: var(--morado-500); }
.hora:disabled { background: var(--fondo-alt); color: #b5afc8; cursor: not-allowed; text-decoration: line-through; border-color: transparent; }
.hora[aria-pressed="true"] { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--texto-suave); margin-top: 14px; }
.leyenda span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.leyenda .l-libre::before { border: 2px solid var(--borde); }
.leyenda .l-ocupado::before { background: var(--fondo-alt); }
.leyenda .l-sel::before { background: var(--naranja); }

.resumen { position: sticky; top: calc(var(--header-h) + 16px); background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); }
.resumen h3 { margin-bottom: 14px; }
.resumen dl { margin: 0; font-size: .92rem; }
.resumen dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--borde); }
.resumen dt { color: var(--texto-suave); }
.resumen dd { margin: 0; font-weight: 700; text-align: right; }
.resumen .total { font-size: 1.05rem; }
.resumen .total dd { color: var(--naranja-osc); font-size: 1.2rem; }
@media (max-width: 960px) { .resumen { position: static; } }
.nav-pasos { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.nav-pasos .btn { flex: 1 1 160px; }
@media (min-width: 561px) { .nav-pasos .btn { flex: 0 0 auto; } }
.politica { background: var(--naranja-claro); border: 1px solid #ffd8bb; border-radius: var(--radio); padding: 18px 20px; margin: 20px 0; font-size: .92rem; }
.politica h4 { margin: 0 0 6px; color: var(--naranja-osc); display: flex; gap: 8px; align-items: center; }
.politica p { margin: 0 0 8px; }
.politica p:last-child { margin: 0; }
.confirmada { text-align: center; max-width: 640px; margin: 0 auto; }
.confirmada__icono { width: 86px; height: 86px; border-radius: 50%; background: #e7f6ee; color: var(--ok); display: grid; place-items: center; margin: 0 auto 18px; }
.confirmada__icono svg { width: 46px; height: 46px; }
.codigo { display: inline-block; font-size: clamp(1.4rem, 6vw, 2rem); font-weight: 800; letter-spacing: .12em; background: var(--morado-900); color: #fff; padding: 12px 24px; border-radius: 14px; margin: 8px 0 18px; font-family: ui-monospace, Consolas, monospace; }
.confirmada .resumen { position: static; text-align: left; margin: 22px 0; box-shadow: none; }
.acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Admin ---------- */
.admin-login { max-width: 420px; margin: 0 auto; }
.admin-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; margin-bottom: 20px; }
.admin-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.admin-filtros .campo { min-width: 160px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.stat b { display: block; font-size: 1.7rem; color: var(--morado-900); }
.stat span { font-size: .85rem; color: var(--texto-suave); }
.reservas-lista { display: flex; flex-direction: column; gap: 12px; }
.reserva-item { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; display: grid; grid-template-columns: 1fr auto; gap: 14px; }
@media (max-width: 680px) { .reserva-item { grid-template-columns: 1fr; } }
.reserva-item h3 { font-size: 1rem; margin: 0 0 4px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.reserva-item p { margin: 0; font-size: .88rem; color: var(--texto-suave); }
.reserva-item__acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: start; }
.estado { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; }
.estado--pendiente { background: #fff6e0; color: var(--aviso); }
.estado--confirmada { background: #e7f6ee; color: #146c3b; }
.estado--cancelada { background: #fdecec; color: #a12d2d; }
.estado--pagado { background: #eef2fd; color: var(--azul-800); }
.faltantes { background: #fff6e0; border: 1px solid #f3dca5; border-radius: var(--radio); padding: 16px 18px; margin-bottom: 22px; font-size: .92rem; }
.faltantes ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------- Pie de página ---------- */
.footer { background: var(--azul-900); color: #c9c2e6; padding: 60px 0 26px; font-size: .92rem; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h3 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 8px; }
.footer a { color: #c9c2e6; text-decoration: none; }
.footer a:hover { color: var(--naranja); }
.footer .marca { margin-bottom: 14px; }
.footer__identidad p { margin: 0 0 4px; }
.footer__identidad strong { color: #fff; font-weight: 600; }
.footer__base { border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .84rem; color: #9a93bb; }

/* WhatsApp flotante */
.wa-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.wa-flotante:hover { color: #fff; transform: scale(1.05); }
.wa-flotante svg { width: 30px; height: 30px; }

/* Aviso emergente */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--morado-900); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600; z-index: 300; box-shadow: var(--sombra-fuerte); font-size: .92rem; max-width: calc(100% - 32px); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .header, .footer, .wa-flotante, .nav-pasos, .acciones { display: none !important; }
  .pagina-cab { padding-top: 20px; background: none; color: #000; }
  .pagina-cab h1 { color: #000; }
}

/* ==========================================================
   REDISEÑO v2 — fotos reales, animaciones e interacción
   (Las animaciones de entrada solo se activan con JavaScript:
    la clase .js se agrega en el <head>; sin JS todo es visible.)
   ========================================================== */

/* ---------- Logo ---------- */
.marca img.marca__logo { width: auto; height: 44px; }
.footer .marca img.marca__logo { height: 50px; }
.marca__logo { transition: transform .3s ease; }
.marca:hover .marca__logo { transform: scale(1.03); }

/* ---------- Pantalla de entrada ---------- */
.intro { display: none; }
.js .intro { display: grid; position: fixed; inset: 0; z-index: 1000; place-items: center; background: radial-gradient(circle at 50% 40%, #2a1b6e, var(--morado-900) 70%); transition: opacity .55s ease, visibility .55s; }
.intro.fuera { opacity: 0; visibility: hidden; }
.intro__caja { width: min(320px, 80vw); text-align: center; }
.intro__logo { width: 100%; height: auto; opacity: 0; animation: introLogo .7s .1s cubic-bezier(.2,.8,.2,1) forwards; }
.intro__ruta { position: relative; height: 34px; margin-top: 26px; overflow: hidden; }
.intro__ruta::before { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 14px, transparent 14px 26px); animation: rutaMueve .5s linear infinite; }
.intro__auto { position: absolute; bottom: 8px; left: -60px; width: 52px; animation: autoCruza 1.3s .25s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes introLogo { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rutaMueve { to { background-position: -26px 0; } }
@keyframes autoCruza { 0% { left: -60px; } 100% { left: 110%; } }

/* ---------- Barra de progreso de lectura ---------- */
.progreso-lectura { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 150; background: linear-gradient(90deg, var(--naranja), #ffb067); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Encabezado dinámico ---------- */
.header { transition: background .35s, box-shadow .35s; }
.header--transparente { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.header--scroll { background: rgba(20, 12, 42, .92); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--naranja); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav a:not(.btn):hover::after, .nav a.activo::after { transform: scaleX(1); }
@media (max-width: 920px) { .nav a:not(.btn)::after { display: none; } .header--transparente { background: rgba(20,12,42,.75); } }

/* ---------- Botones vivos ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--primario::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.45) 45%, transparent 60%); transform: translateX(-120%); transition: transform .7s ease; }
.btn--primario:hover::before { transform: translateX(120%); }
.btn--primario:hover { box-shadow: 0 14px 30px rgba(255, 122, 26, .45); }
.btn .flecha { transition: transform .25s ease; }
.btn:hover .flecha { transform: translateX(4px); }
.onda { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.45); animation: onda .6s ease-out forwards; pointer-events: none; }
.btn--borde .onda, .btn--peligro .onda { background: rgba(107,79,196,.25); }
@keyframes onda { to { transform: scale(4); opacity: 0; } }
.btn--pulso { animation: pulso 2.6s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { box-shadow: 0 8px 20px rgba(255,122,26,.35), 0 0 0 0 rgba(255,122,26,.5); } 50% { box-shadow: 0 8px 20px rgba(255,122,26,.35), 0 0 0 12px rgba(255,122,26,0); } }

/* ---------- Animaciones al hacer scroll ---------- */
.js [data-anim] { opacity: 0; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-anim="arriba"] { transform: translateY(40px); }
.js [data-anim="izq"] { transform: translateX(-50px); }
.js [data-anim="der"] { transform: translateX(50px); }
.js [data-anim="zoom"] { transform: scale(.9); }
.js [data-anim].visible { opacity: 1; transform: none; }

/* ---------- HERO con foto real ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + 50px) 0 90px; background: var(--morado-900); isolation: isolate; }
.hero__fondo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; transform: scale(1.08); }
.js .cargado .hero__fondo img { animation: kenBurns 18s ease-out forwards; }
@keyframes kenBurns { from { transform: scale(1.15); } to { transform: scale(1.02); } }
.hero__velo { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(800px 500px at 85% 30%, rgba(255,122,26,.28), transparent 60%),
  linear-gradient(100deg, rgba(20,12,42,.97) 0%, rgba(26,16,51,.9) 38%, rgba(20,48,107,.72) 70%, rgba(20,48,107,.55) 100%); }
.hero__burbuja { position: absolute; border-radius: 50%; filter: blur(60px); z-index: -1; opacity: .55; animation: flotar 12s ease-in-out infinite; pointer-events: none; }
.hero__burbuja--1 { width: 340px; height: 340px; background: #6b4fc4; top: 10%; left: -80px; }
.hero__burbuja--2 { width: 260px; height: 260px; background: var(--naranja); bottom: -60px; right: 20%; animation-delay: -5s; opacity: .35; }
@keyframes flotar { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -30px); } }
.hero__grid { position: relative; width: 100%; }
.hero__pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 600; font-size: .9rem; color: #e8e4f6; margin-bottom: 22px; }
.hero__pill img { width: 34px; height: 34px; border-radius: 10px; }
.hero__pill b { color: var(--naranja); }
.hero h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); line-height: 1.05; }
.hero h1 .palabra { display: inline-block; }
.js .hero h1 .palabra { opacity: 0; transform: translateY(60%) rotate(4deg); }
.js .cargado .hero h1 .palabra { animation: palabra .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 85ms + 150ms); }
@keyframes palabra { to { opacity: 1; transform: none; } }
.hero h1 em { background: linear-gradient(90deg, var(--naranja), #ffb067, var(--naranja)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; }
.js .cargado .hero h1 em { animation: palabra .8s cubic-bezier(.2,.8,.2,1) forwards, brillo 4s 1.5s linear infinite; animation-delay: calc(var(--i) * 85ms + 150ms), 1.5s; }
@keyframes brillo { to { background-position: 200% center; } }
.js .hero__entra { opacity: 0; transform: translateY(24px); }
.js .cargado .hero__entra { animation: entra .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i, 0) * 120ms + 600ms); }
@keyframes entra { to { opacity: 1; transform: none; } }
.hero__datos { gap: 0; }
.hero__datos li { padding: 0 26px; border-left: 1px solid rgba(255,255,255,.15); }
.hero__datos li:first-child { padding-left: 0; border-left: 0; }
.hero__datos strong { font-size: 1.9rem; font-weight: 800; }
.hero__datos li > span { font-size: .85rem; }

/* Celular flotante con tarjetas animadas */
.telefono-wrap { perspective: 1200px; }
.js .telefono-wrap { opacity: 0; transform: translateY(60px) scale(.95); }
.js .cargado .telefono-wrap { animation: entra 1.1s .45s cubic-bezier(.2,.8,.2,1) forwards; }
.telefono { animation: levitar 6s ease-in-out infinite; transform-style: preserve-3d; transition: transform .2s ease-out; }
@keyframes levitar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.chip-flotante { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.96); color: var(--texto); padding: 10px 14px; border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.28); font-size: .8rem; line-height: 1.25; text-align: left; animation: levitar 5s ease-in-out infinite; }
.chip-flotante b { display: block; font-size: .85rem; color: var(--morado-900); }
.chip-flotante i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.chip-flotante i svg { width: 18px; height: 18px; }
.chip-flotante--1 { top: 9%; left: -12%; animation-delay: -1s; }
.chip-flotante--1 i { background: #e7f6ee; color: var(--ok); }
.chip-flotante--2 { bottom: 22%; right: -8%; animation-delay: -3s; }
.chip-flotante--2 i { background: var(--naranja-claro); color: var(--naranja-osc); }
.chip-flotante--3 { bottom: 4%; left: 2%; animation-delay: -2s; }
.chip-flotante--3 i { background: #efeafc; color: var(--morado-500); }
.js .chip-flotante { opacity: 0; }
.js .cargado .chip-flotante { animation: aparecerChip .6s cubic-bezier(.2,.8,.2,1) forwards, levitar 5s ease-in-out infinite; }
.js .cargado .chip-flotante--1 { animation-delay: 1.1s, 1.7s; }
.js .cargado .chip-flotante--2 { animation-delay: 1.35s, 1.95s; }
.js .cargado .chip-flotante--3 { animation-delay: 1.6s, 2.2s; }
@keyframes aparecerChip { from { opacity: 0; transform: scale(.6) translateY(20px); } to { opacity: 1; transform: none; } }
.app__progreso span { animation: cargarBarra 2.4s 1.4s cubic-bezier(.4,0,.2,1) both; }
@keyframes cargarBarra { from { width: 0; } to { width: 72%; } }
.app__cta { animation: pulsoSuave 2.4s ease-in-out infinite; }
@keyframes pulsoSuave { 50% { transform: scale(1.03); box-shadow: 0 6px 18px rgba(255,122,26,.45); } }

.scroll-indicador { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.45); border-radius: 20px; display: flex; justify-content: center; }
.scroll-indicador::before { content: ""; width: 4px; height: 8px; border-radius: 4px; background: #fff; margin-top: 7px; animation: rueda 1.8s ease-in-out infinite; }
@keyframes rueda { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 1100px) { .chip-flotante--1 { left: -2%; } .chip-flotante--2 { right: -2%; } }
@media (max-width: 920px) {
  .hero { min-height: auto; padding-bottom: 70px; }
  .hero__velo { background: linear-gradient(180deg, rgba(20,12,42,.95) 0%, rgba(26,16,51,.9) 55%, rgba(20,48,107,.85) 100%); }
  .hero__datos li { padding: 0 16px; }
  .scroll-indicador { display: none; }
  .chip-flotante--1 { left: 0; } .chip-flotante--2 { right: 0; } .chip-flotante--3 { display: none; }
}
@media (max-width: 420px) { .hero__datos li { padding: 0 10px; } .hero__datos strong { font-size: 1.5rem; } .chip-flotante { font-size: .72rem; padding: 8px 10px; } }

/* ---------- Cinta en movimiento ---------- */
.cinta { background: var(--naranja); color: #fff; overflow: hidden; padding: 16px 0; transform: rotate(-1.2deg); margin: -14px -10px 0; position: relative; z-index: 2; box-shadow: 0 10px 30px rgba(255,122,26,.3); }
.cinta__pista { display: flex; width: max-content; animation: cinta 30s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__pista span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.cinta__pista span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--morado-900); }
@keyframes cinta { to { transform: translateX(-50%); } }
body { overflow-x: hidden; }
main { overflow-x: clip; }

/* ---------- Beneficios: tarjetas con brillo ---------- */
.tarjeta { position: relative; overflow: hidden; }
.tarjeta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, var(--naranja), var(--morado-500), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; }
.tarjeta:hover::before { opacity: 1; }
.tarjeta .icono { transition: transform .4s cubic-bezier(.3,1.6,.5,1), background .3s, color .3s; }
.tarjeta:hover .icono { transform: rotate(-8deg) scale(1.12); background: linear-gradient(135deg, var(--naranja), #ff9a4d); color: #fff; }
.tarjeta__num { position: absolute; top: 18px; right: 22px; font-size: 2.6rem; font-weight: 800; color: var(--fondo-alt); line-height: 1; transition: color .3s; }
.tarjeta:hover .tarjeta__num { color: var(--naranja-claro); }

/* ---------- Banda de confianza ---------- */
.banda { position: relative; overflow: hidden; }
.banda::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 200px at 10% 0%, rgba(255,122,26,.18), transparent), radial-gradient(500px 220px at 90% 100%, rgba(107,79,196,.35), transparent); pointer-events: none; }
.banda__item { position: relative; z-index: 1; }
.banda__item svg { transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.banda__item:hover svg { transform: scale(1.18) rotate(-6deg); }

/* ---------- Cifras ---------- */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.cifra { text-align: center; padding: 24px 12px; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); transition: transform .3s, box-shadow .3s; }
.cifra:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.cifra strong { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: var(--morado-800); line-height: 1.1; }
.cifra strong small { font-size: .55em; color: var(--naranja-osc); }
.cifra > span { color: var(--texto-suave); font-size: .9rem; }
@media (max-width: 760px) { .cifras { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Cómo funciona ---------- */
.pasos-proceso { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: proc; }
.pasos-proceso::before { content: ""; position: absolute; top: 34px; left: 12%; right: 12%; height: 3px; background: var(--borde); border-radius: 3px; }
.pasos-proceso__linea { position: absolute; top: 34px; left: 12%; right: 12%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--naranja), var(--morado-500)); transform-origin: left; transform: scaleX(0); transition: transform 1.6s cubic-bezier(.4,0,.2,1) .3s; }
.pasos-proceso.visible .pasos-proceso__linea { transform: scaleX(1); }
.proceso { text-align: center; position: relative; }
.proceso__circulo { width: 70px; height: 70px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--borde); color: var(--morado-800); position: relative; z-index: 1; transition: border-color .4s, background .4s, color .4s, transform .4s; }
.proceso__circulo svg { width: 28px; height: 28px; }
.proceso__circulo::after { counter-increment: proc; content: counter(proc); position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--naranja); color: #fff; font-size: .8rem; font-weight: 800; display: grid; place-items: center; }
.pasos-proceso.visible .proceso__circulo { border-color: var(--naranja); }
.proceso:hover .proceso__circulo { background: var(--morado-800); color: #fff; transform: translateY(-4px); }
.proceso p { color: var(--texto-suave); font-size: .92rem; margin: 0; }
@media (max-width: 860px) {
  .pasos-proceso { grid-template-columns: 1fr 1fr; }
  .pasos-proceso::before, .pasos-proceso__linea { display: none; }
}
@media (max-width: 480px) { .pasos-proceso { grid-template-columns: 1fr; } .proceso { display: grid; grid-template-columns: 70px 1fr; gap: 16px; text-align: left; align-items: center; } .proceso__circulo { margin: 0; } .proceso h3 { margin-bottom: 2px; } }

/* ---------- Servicios con foto ---------- */
.servicio-card { background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--borde); display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.servicio-card:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(26,16,51,.16); }
.servicio-card__img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--morado-800); }
.servicio-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .4s; }
.servicio-card:hover .servicio-card__img img { transform: scale(1.1); filter: saturate(1.15); }
.servicio-card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(20,12,42,.78)); }
.servicio-card__precio { position: absolute; z-index: 1; left: 16px; bottom: 14px; color: #fff; line-height: 1.1; }
.servicio-card__precio small { display: block; font-size: .72rem; opacity: .85; text-transform: uppercase; letter-spacing: .05em; }
.servicio-card__precio strong { font-size: 1.3rem; }
.servicio-card__icono { position: absolute; z-index: 1; right: 14px; top: 14px; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.95); color: var(--naranja-osc); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.2); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.servicio-card__icono svg { width: 24px; height: 24px; }
.servicio-card:hover .servicio-card__icono { transform: rotate(-10deg) scale(1.1); }
.servicio-card__cuerpo { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.servicio-card__cuerpo p { color: var(--texto-suave); font-size: .94rem; }
.enlace-flecha { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--morado-800); text-decoration: none; }
.enlace-flecha svg { width: 18px; height: 18px; transition: transform .25s; }
.enlace-flecha:hover { color: var(--naranja-osc); }
.enlace-flecha:hover svg { transform: translateX(5px); }

/* ---------- Tienda ---------- */
.producto { border-radius: 20px; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.producto:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(26,16,51,.14); }
.producto__foto { position: relative; overflow: hidden; background: #fff; }
.producto__foto img { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.producto:hover .producto__foto img { transform: scale(1.08); }
.producto__etiqueta { position: absolute; top: 12px; left: 12px; background: rgba(26,16,51,.85); color: #fff; font-size: .7rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.producto__agregar.agregado { background: var(--ok); box-shadow: 0 8px 20px rgba(31,157,85,.35); }
.producto.entra { animation: productoEntra .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes productoEntra { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.filtro { transition: background .2s, color .2s, transform .2s, border-color .2s; }
.filtro:hover { transform: translateY(-2px); border-color: var(--morado-500); }
.carrito-btn.salta { animation: salta .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes salta { 40% { transform: scale(1.25) rotate(-8deg); } }
.vuela { position: fixed; z-index: 400; border-radius: 14px; pointer-events: none; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.carrito__fondo { animation: fundido .25s ease; }
@keyframes fundido { from { opacity: 0; } }

/* ---------- Banda CTA con foto ---------- */
.cta { position: relative; overflow: hidden; color: #fff; padding: 110px 0; text-align: center; isolation: isolate; }
.cta__fondo { position: absolute; inset: -15% 0; z-index: -2; background: url("../img/fotos/cta.webp") center / cover no-repeat; will-change: transform; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(26,16,51,.94), rgba(20,48,107,.82) 60%, rgba(232,99,10,.7)); }
.cta h2 { color: #fff; font-size: clamp(1.8rem, 4.4vw, 3rem); max-width: 760px; margin: 0 auto 14px; }
.cta p { color: #e0dbf3; max-width: 600px; margin: 0 auto 30px; font-size: 1.1rem; }
.cta .hero__botones { justify-content: center; margin: 0; }

/* ---------- Preguntas frecuentes ---------- */
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); transition: box-shadow .3s, border-color .3s; }
.faq details[open] { box-shadow: var(--sombra); border-color: transparent; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 60px 20px 22px; font-weight: 700; color: var(--morado-900); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--fondo-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8630a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .35s ease, background-color .3s; }
.faq details[open] summary::after { transform: rotate(135deg); background-color: var(--naranja-claro); }
.faq__resp { padding: 0 22px 20px; color: var(--texto-suave); }
.faq__resp p { margin: 0; }
.faq details[open] .faq__resp { animation: aparecer .35s ease; }

/* ---------- Volver arriba ---------- */
.arriba { position: fixed; right: 22px; bottom: 90px; z-index: 90; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer; background: var(--morado-800); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.25); opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .3s, transform .3s, background .2s; }
.arriba.ver { opacity: 1; transform: none; pointer-events: auto; }
.arriba svg.anillo { position: absolute; inset: 0; width: 50px; height: 50px; transform: rotate(-90deg); }
.arriba svg.anillo circle { fill: none; stroke: var(--naranja); stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145; }
.arriba:hover { background: var(--naranja); }
.wa-flotante { animation: waEntra .6s 2s cubic-bezier(.3,1.6,.5,1) both; transition: transform .2s; }
.wa-flotante::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1; animation: waOnda 2.4s 3s ease-out infinite; }
@keyframes waEntra { from { transform: scale(0); } }
@keyframes waOnda { from { transform: scale(1); opacity: .6; } to { transform: scale(1.7); opacity: 0; } }

/* ---------- Encabezado de páginas internas ---------- */
.pagina-cab { position: relative; overflow: hidden; isolation: isolate; }
.pagina-cab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/fotos/hero.webp") center 35% / cover; opacity: .16; }
.pagina-cab::after { content: ""; position: absolute; width: 380px; height: 380px; right: -100px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,26,.35), transparent 70%); z-index: -1; animation: flotar 10s ease-in-out infinite; }
.js .pagina-cab .contenedor > * { opacity: 0; animation: entra .8s cubic-bezier(.2,.8,.2,1) forwards; transform: translateY(20px); }
.js .pagina-cab .contenedor > :nth-child(2) { animation-delay: .1s; }
.js .pagina-cab .contenedor > :nth-child(3) { animation-delay: .2s; }
.legal h2 { position: relative; padding-left: 16px; }
.legal h2::before { content: ""; position: absolute; left: 0; top: .5em; bottom: .15em; width: 4px; border-radius: 4px; background: linear-gradient(var(--naranja), var(--morado-500)); }
.opcion label, .sintoma, .hora, .dia { transition: border-color .2s, box-shadow .2s, background .2s, transform .2s; }
.opcion label:hover, .sintoma:hover { transform: translateY(-2px); }
.hora:hover:not(:disabled), .dia:hover:not(:disabled) { transform: scale(1.06); }
.confirmada__icono { animation: confirmaPop .7s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes confirmaPop { from { transform: scale(0) rotate(-30deg); } }
.confirmada__icono svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: trazo .6s .4s ease forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }

/* ---------- Créditos de imágenes ---------- */
.creditos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 24px; }
.credito { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: #fff; font-size: .85rem; }
.credito img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.credito div { padding: 12px 14px; word-break: break-word; }
.credito b { display: block; color: var(--morado-900); margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .js [data-anim], .js .hero h1 .palabra, .js .hero__entra, .js .telefono-wrap, .js .chip-flotante, .js .pagina-cab .contenedor > * { opacity: 1 !important; transform: none !important; }
  .js .intro { display: none; }
}
@media (max-width: 560px) {
  .hero__datos { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .hero__datos li, .hero__datos li:first-child { padding: 0 6px; }
  .hero__datos strong { font-size: 1.4rem; }
  .hero__datos li > span { font-size: .74rem; line-height: 1.3; }
  .arriba { right: 14px; bottom: 84px; width: 44px; height: 44px; }
  .arriba svg.anillo { width: 44px; height: 44px; }
}
.credito { margin: 0; }

/* ==========================================================
   v3 — AUTOMAX: tema oscuro vibrante, luces y efectos
   Se activa con <body class="oscuro"> (inicio y reservas).
   ========================================================== */
:root {
  --noche-0: #07051a;
  --noche-1: #0c0924;
  --noche-2: #130f33;
  --vidrio: rgba(255, 255, 255, .045);
  --vidrio-2: rgba(255, 255, 255, .08);
  --linea: rgba(255, 255, 255, .1);
  --texto-claro: #ece9fb;
  --texto-tenue: #a7a0cc;
  --violeta: #7b4dff;
  --azul-vivo: #2f6bff;
  --naranja-vivo: #ff6a1a;
  --oro: #ffb347;
  --grad-fuego: linear-gradient(90deg, #ffb347, #ff6a1a 55%, #ff3d6e);
  --grad-noche: linear-gradient(135deg, #7b4dff, #2f6bff);
}

/* ---------- Base oscura ---------- */
body.oscuro { background: var(--noche-0); color: var(--texto-claro); }
.oscuro h1, .oscuro h2, .oscuro h3, .oscuro h4 { color: #fff; }
.oscuro p { color: var(--texto-tenue); }
.oscuro a { color: var(--oro); }
.oscuro a:hover { color: #fff; }
.oscuro main { position: relative; }
.oscuro main::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); }
.oscuro .seccion { position: relative; background: transparent; }
.oscuro .seccion--alt { background: linear-gradient(180deg, rgba(19,15,51,.0), rgba(19,15,51,.85) 12%, rgba(19,15,51,.85) 88%, rgba(19,15,51,0)); }
.oscuro .seccion__cabecera p { color: var(--texto-tenue); }
.grad { background: var(--grad-fuego); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; animation: brillo 5s linear infinite; }
.grad-azul { background: linear-gradient(90deg, #b9a4ff, #6f9bff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Auroras de fondo por sección */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45; animation: flotar 16s ease-in-out infinite; }
.aurora span:nth-child(1) { width: 480px; height: 480px; background: #5b2cff; top: -120px; left: -140px; }
.aurora span:nth-child(2) { width: 380px; height: 380px; background: #ff6a1a; bottom: -160px; right: -100px; opacity: .25; animation-delay: -6s; }
.aurora span:nth-child(3) { width: 300px; height: 300px; background: #1f5bff; top: 40%; left: 55%; opacity: .3; animation-delay: -10s; }

/* Etiqueta con punto pulsante */
.oscuro .etiqueta { background: rgba(255,106,26,.12); color: var(--oro); border: 1px solid rgba(255,140,60,.3); display: inline-flex; align-items: center; gap: 8px; }
.oscuro .etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--naranja-vivo); box-shadow: 0 0 0 0 rgba(255,106,26,.7); animation: latido 1.8s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 9px rgba(255,106,26,0); } 100% { box-shadow: 0 0 0 0 rgba(255,106,26,0); } }

/* Títulos que se arman palabra por palabra */
.titulo-anim .w { display: inline-block; }
.js .titulo-anim .w { opacity: 0; transform: translateY(.6em) rotateX(60deg); filter: blur(6px); transition: opacity .7s, transform .7s cubic-bezier(.2,.8,.2,1), filter .7s; transition-delay: calc(var(--wi) * 70ms); }
.js .visible .titulo-anim .w, .js .titulo-anim.visible .w { opacity: 1; transform: none; filter: none; }


/* ---------- Pantalla de entrada: tacómetro ---------- */
.intro { background: radial-gradient(circle at 50% 45%, #1c1150, #07051a 70%); }
.intro__tacometro { width: 170px; margin: 0 auto 18px; display: block; }
.intro__tacometro .arco-valor { stroke-dasharray: 251; stroke-dashoffset: 251; animation: revolucion 1.6s cubic-bezier(.6,0,.3,1) forwards; }
.intro__tacometro .aguja { transform-origin: 100px 100px; transform: rotate(-120deg); animation: aguja 1.6s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes revolucion { 0% { stroke-dashoffset: 251; } 60% { stroke-dashoffset: 20; } 100% { stroke-dashoffset: 120; } }
@keyframes aguja { 0% { transform: rotate(-120deg); } 60% { transform: rotate(100deg); } 100% { transform: rotate(-5deg); } }
.intro__texto { color: var(--texto-tenue); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; margin-top: 10px; }

/* ---------- Encabezado ---------- */
.oscuro .header--scroll, .header--scroll { background: rgba(9, 6, 28, .78); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--linea); }
.btn--brillo { position: relative; z-index: 0; }
.btn--brillo::after { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; background: conic-gradient(from var(--ang, 0deg), #ffb347, #ff3d6e, #7b4dff, #2f6bff, #ffb347); animation: girar 3s linear infinite; filter: blur(.5px); }
.btn--brillo.btn--primario { background: transparent; }
.btn--brillo.btn--primario > .relleno { position: absolute; inset: 2px; border-radius: inherit; background: var(--naranja); z-index: -1; transition: background .2s; }
.btn--brillo.btn--primario:hover > .relleno { background: var(--naranja-osc); }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes girar { to { --ang: 360deg; } }
.btn--primario { background: linear-gradient(135deg, #ff9a3c, #ff6a1a 60%, #ff4d3d); }
.btn--secundario { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255,255,255,.06); }
[data-magnetico] { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .15s; }

/* ---------- HERO ---------- */
.oscuro .hero__velo { background:
  radial-gradient(700px 480px at 80% 35%, rgba(255,106,26,.25), transparent 60%),
  radial-gradient(600px 500px at 15% 80%, rgba(91,44,255,.35), transparent 60%),
  linear-gradient(100deg, rgba(7,5,26,.97) 0%, rgba(10,7,32,.9) 40%, rgba(16,24,80,.7) 75%, rgba(16,24,80,.55) 100%); }
.chispas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero__suelo { position: absolute; left: -50%; right: -50%; bottom: 0; height: 38%; z-index: -1; pointer-events: none; perspective: 320px; overflow: hidden; mask-image: linear-gradient(transparent, #000 60%); -webkit-mask-image: linear-gradient(transparent, #000 60%); }
.hero__suelo::before { content: ""; position: absolute; inset: 0 0 -100% 0; transform: rotateX(62deg); transform-origin: 50% 0;
  background-image: linear-gradient(rgba(255,122,26,.5) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(123,77,255,.45) 1.5px, transparent 1.5px);
  background-size: 70px 70px; animation: suelo 2.2s linear infinite; }
@keyframes suelo { to { background-position: 0 70px; } }
.hero__rotador { display: inline-block; position: relative; min-width: 7.5em; text-align: left; color: var(--oro); font-weight: 800; }
.hero__rotador span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(70%); transition: opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1); }
.hero__rotador span.activo { opacity: 1; transform: none; position: relative; }
.hero__rotador span.sale { opacity: 0; transform: translateY(-70%); }
.hero__especialistas { font-size: 1.15rem; color: #fff; font-weight: 600; margin: -6px 0 16px; }
@media (max-width: 920px) { .hero__rotador { text-align: center; min-width: 0; } .hero__rotador span:not(.activo) { left: 50%; transform: translate(-50%, 70%); } .hero__rotador span.sale { transform: translate(-50%, -70%); } }
.telefono { box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 2px #2b2540, 0 0 80px rgba(123,77,255,.35); }
.telefono-wrap::before { background: radial-gradient(circle, rgba(123,77,255,.55), rgba(255,106,26,.25) 45%, transparent 70%); width: 420px; height: 420px; animation: respirar 5s ease-in-out infinite; }
@keyframes respirar { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .8; } }
.oscuro .chip-flotante { background: rgba(20,14,52,.82); color: #d9d4f5; border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.oscuro .chip-flotante b { color: #fff; }
.oscuro .chip-flotante--1 i { background: rgba(31,157,85,.2); color: #4ade80; }
.oscuro .chip-flotante--2 i { background: rgba(255,106,26,.2); color: var(--oro); }
.oscuro .chip-flotante--3 i { background: rgba(123,77,255,.25); color: #b9a4ff; }

/* ---------- Cintas dobles ---------- */
.cintas { position: relative; z-index: 2; padding: 26px 0 10px; overflow: hidden; }
.oscuro .cinta { background: var(--grad-fuego); box-shadow: 0 0 60px rgba(255,106,26,.35); }
.cinta--2 { background: transparent !important; box-shadow: none !important; transform: rotate(1.4deg); margin-top: 6px; }
.cinta--2 .cinta__pista { animation-direction: reverse; animation-duration: 38s; }
.cinta--2 .cinta__pista span { color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.35); font-size: 1.6rem; }
.cinta--2 .cinta__pista span::after { background: var(--naranja-vivo); }

/* ---------- Tarjetas de vidrio con foco de luz ---------- */
.oscuro .tarjeta, .oscuro .cifra, .oscuro .servicio-card, .oscuro .producto, .oscuro .dato, .oscuro .form, .oscuro .faq details, .oscuro .medidor {
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid var(--linea); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.foco { position: relative; isolation: isolate; }
.foco::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,160,80,.16), transparent 45%); }
.foco:hover::after { opacity: 1; }
.oscuro .tarjeta::before { background: linear-gradient(135deg, var(--oro), var(--violeta), transparent 65%); }
.oscuro .tarjeta p { color: var(--texto-tenue); }
.oscuro .tarjeta__num { color: rgba(255,255,255,.05); }
.oscuro .tarjeta:hover .tarjeta__num { color: rgba(255,140,60,.18); }
.oscuro .icono { background: linear-gradient(135deg, rgba(123,77,255,.35), rgba(47,107,255,.25)); color: var(--oro); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(91,44,255,.3); }
.oscuro .tarjeta:hover .icono { background: var(--grad-fuego); color: #fff; box-shadow: 0 10px 30px rgba(255,106,26,.45); }
.oscuro .tarjeta:hover { box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,160,80,.25); }
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

/* ---------- Medidores (velocímetros) ---------- */
.medidores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.medidor { border-radius: 22px; padding: 24px 18px 20px; text-align: center; }
.medidor svg { width: 100%; max-width: 190px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.medidor .pista { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 12; stroke-linecap: round; }
.medidor .valor { fill: none; stroke: url(#gradMedidor); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 251.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 8px rgba(255,106,26,.6)); }
.medidor .marcas { stroke: rgba(255,255,255,.25); stroke-width: 2; }
.medidor .aguja { transform-origin: 100px 100px; transform: rotate(-90deg); transition: transform 1.8s cubic-bezier(.3,1.4,.4,1); }
.medidor.visible .valor { stroke-dashoffset: calc(251.3 - 251.3 * var(--p)); }
.medidor.visible .aguja { transform: rotate(calc(-90deg + 180deg * var(--p))); }
.medidor strong { display: block; font-size: 2.3rem; font-weight: 800; color: #fff; line-height: 1; margin-top: -8px; }
.medidor strong small { font-size: .5em; color: var(--oro); margin-left: 2px; }
.medidor > span { display: block; color: var(--texto-tenue); font-size: .88rem; margin-top: 6px; }
@media (max-width: 860px) { .medidores { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .medidor { padding: 18px 10px; } .medidor strong { font-size: 1.8rem; } }

/* ---------- Banda de confianza ---------- */
.oscuro .banda { background: linear-gradient(115deg, #2a0f6b, #12286e 40%, #5b1a4a 75%, #8a3a10); background-size: 220% 220%; animation: bandaMueve 14s ease-in-out infinite; clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); padding: 90px 0; }
@keyframes bandaMueve { 50% { background-position: 100% 50%; } }
.oscuro .banda__item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 20px; backdrop-filter: blur(6px); transition: transform .3s, background .3s; }
.oscuro .banda__item:hover { transform: translateY(-6px); background: rgba(255,255,255,.1); }
.oscuro .banda__item svg { color: var(--oro); filter: drop-shadow(0 0 10px rgba(255,140,60,.6)); }

/* ---------- Proceso con auto que avanza ---------- */
.oscuro .pasos-proceso::before { background: rgba(255,255,255,.1); }
.pasos-proceso__auto { position: absolute; top: 14px; left: 12%; width: 44px; height: 40px; z-index: 2; transform: translateX(-50%); transition: left 1.6s cubic-bezier(.4,0,.2,1) .3s; filter: drop-shadow(0 0 12px rgba(255,106,26,.8)); }
.pasos-proceso.visible .pasos-proceso__auto { left: 88%; }
.oscuro .proceso__circulo { background: var(--noche-2); border-color: rgba(255,255,255,.15); color: var(--oro); box-shadow: 0 0 0 8px var(--noche-0); }
.oscuro .pasos-proceso.visible .proceso__circulo { border-color: var(--naranja-vivo); box-shadow: 0 0 0 8px var(--noche-0), 0 0 30px rgba(255,106,26,.45); }
.oscuro .proceso:hover .proceso__circulo { background: var(--grad-fuego); color: #fff; }
.oscuro .proceso p { color: var(--texto-tenue); }
@media (max-width: 860px) { .pasos-proceso__auto { display: none; } }

/* ---------- Servicios ---------- */
.oscuro .servicio-card__cuerpo p { color: var(--texto-tenue); }
.oscuro .enlace-flecha { color: var(--oro); }
.oscuro .enlace-flecha:hover { color: #fff; }
.oscuro .servicio-card:hover { box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,160,80,.3), 0 0 50px rgba(123,77,255,.25); }
.oscuro .servicio-card__icono { background: rgba(12,9,36,.75); color: var(--oro); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.servicio-card__img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 62%); transform: translateX(-120%); transition: transform .9s ease; pointer-events: none; }
.servicio-card:hover .servicio-card__img::before, .producto:hover .producto__foto::before { transform: translateX(120%); }
.oscuro .destacado { border: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg, #3b1c9c, #13307f); box-shadow: 0 30px 70px rgba(59,28,156,.35); }
.oscuro .destacado--naranja { background: linear-gradient(135deg, #c2410c, #ff7a1a 55%, #ffb347); box-shadow: 0 30px 70px rgba(255,106,26,.3); }
.oscuro .destacado p, .oscuro .destacado li { color: rgba(255,255,255,.88); }

/* ---------- Tienda ---------- */
.oscuro .buscador input { background: var(--vidrio); border-color: var(--linea); color: #fff; }
.oscuro .buscador input::placeholder { color: var(--texto-tenue); }
.oscuro .buscador svg { color: var(--texto-tenue); }
.oscuro .filtro { background: var(--vidrio); border-color: var(--linea); color: var(--texto-claro); }
.oscuro .filtro[aria-pressed="true"] { background: var(--grad-fuego); border-color: transparent; color: #fff; box-shadow: 0 8px 24px rgba(255,106,26,.35); }
.producto__foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 62%); transform: translateX(-120%); transition: transform .9s ease; pointer-events: none; }
.oscuro .producto p { color: var(--texto-tenue); }
.oscuro .producto__precio { color: #fff; }
.oscuro .producto__cat { color: var(--oro); }
.oscuro .producto__etiqueta { background: var(--grad-fuego); }
.oscuro .producto:hover { box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,160,80,.28); }
.oscuro .vacio { color: var(--texto-tenue); }

/* ---------- CTA ---------- */
.oscuro .cta { clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%); padding: 140px 0; }
.oscuro .cta::before { background: linear-gradient(120deg, rgba(7,5,26,.92), rgba(42,15,107,.78) 50%, rgba(255,90,26,.55)); }

/* ---------- FAQ, contacto, formularios ---------- */
.oscuro .faq summary { color: #fff; }
.oscuro .faq summary::after { background-color: rgba(255,255,255,.08); }
.oscuro .faq details[open] { border-color: rgba(255,160,80,.35); box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 40px rgba(255,106,26,.12); }
.oscuro .faq__resp { color: var(--texto-tenue); }
.oscuro .dato { color: var(--texto-claro); }
.oscuro a.dato:hover { border-color: rgba(255,160,80,.5); color: #fff; transform: translateX(6px); }
.oscuro .dato { transition: transform .25s, border-color .25s; }
.oscuro .dato i { background: rgba(255,106,26,.15); color: var(--oro); }
.oscuro .dato b { color: var(--texto-tenue); }
.oscuro .campo label { color: #fff; }
.oscuro .campo input, .oscuro .campo select, .oscuro .campo textarea { background: rgba(255,255,255,.05); border-color: var(--linea); color: #fff; }
.oscuro .campo select option { background: var(--noche-2); color: #fff; }
.oscuro .campo input::placeholder, .oscuro .campo textarea::placeholder { color: #7f78a6; }
.oscuro .campo input:focus, .oscuro .campo select:focus, .oscuro .campo textarea:focus { border-color: var(--naranja-vivo); box-shadow: 0 0 0 3px rgba(255,106,26,.2); }
.oscuro .check { color: var(--texto-tenue); }
.oscuro .mensaje--info { background: rgba(47,107,255,.15); color: #b8ccff; }
.oscuro .mensaje--ok { background: rgba(31,157,85,.18); color: #86efac; }
.oscuro .mensaje--error { background: rgba(214,69,69,.18); color: #fca5a5; }

/* ---------- Carrito ---------- */
.oscuro .carrito__panel { background: var(--noche-1); border-left: 1px solid var(--linea); }
.oscuro .carrito__cab, .oscuro .carrito__item { border-color: var(--linea); }
.oscuro .carrito__pie { background: var(--noche-2); border-color: var(--linea); }
.oscuro .carrito__nota, .oscuro .carrito__item small { color: var(--texto-tenue); }
.oscuro .cerrar { background: var(--vidrio-2); color: #fff; }
.oscuro .cantidad { border-color: var(--linea); }
.oscuro .cantidad button { color: #fff; }
.oscuro .btn--borde { background: var(--vidrio); color: #fff; border-color: var(--linea); }
.oscuro .btn--borde:hover { border-color: var(--naranja-vivo); color: #fff; }
.oscuro .toast { background: rgba(20,14,52,.95); border: 1px solid var(--linea); backdrop-filter: blur(10px); }

/* ---------- Pie de página ---------- */
.footer { position: relative; background: #05031a; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--naranja-vivo), var(--violeta), transparent); }

/* ---------- Reservas en tema oscuro ---------- */
.oscuro .pasos li { color: var(--texto-tenue); }
.oscuro .pasos li::before { background: var(--noche-2); border-color: var(--linea); color: var(--texto-tenue); }
.oscuro .pasos li.activo { color: #fff; }
.oscuro .pasos li.activo::before { background: var(--grad-fuego); border-color: transparent; color: #fff; box-shadow: 0 0 24px rgba(255,106,26,.55); }
.oscuro .pasos li.hecho::before { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.oscuro .paso__desc { color: var(--texto-tenue); }
.oscuro .opcion label, .oscuro .sintoma, .oscuro .calendario, .oscuro .horas, .oscuro .resumen { background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border-color: var(--linea); color: var(--texto-claro); }
.oscuro .opcion label b { color: #fff; }
.oscuro .opcion label b span { color: var(--oro); }
.oscuro .opcion label small { color: var(--texto-tenue); }
.oscuro .opcion input:checked + label { border-color: var(--naranja-vivo); box-shadow: 0 0 0 4px rgba(255,106,26,.18), 0 0 30px rgba(255,106,26,.2); }
.oscuro .sintoma:has(input:checked) { border-color: var(--naranja-vivo); background: rgba(255,106,26,.1); }
.oscuro .calendario__cab button { background: var(--vidrio); border-color: var(--linea); color: #fff; }
.oscuro .calendario__dia-sem { color: var(--texto-tenue); }
.oscuro .dia { background: rgba(255,255,255,.06); color: #fff; }
.oscuro .dia:hover:not(:disabled) { background: rgba(123,77,255,.35); }
.oscuro .dia:disabled { background: transparent; color: #4d4770; text-decoration-color: #3a3560; }
.oscuro .dia.hoy { box-shadow: inset 0 0 0 2px var(--violeta); }
.oscuro .dia[aria-pressed="true"], .oscuro .hora[aria-pressed="true"] { background: var(--grad-fuego); border-color: transparent; color: #fff; box-shadow: 0 6px 20px rgba(255,106,26,.45); }
.oscuro .hora { background: rgba(255,255,255,.05); border-color: var(--linea); color: #fff; }
.oscuro .hora:disabled { background: rgba(255,255,255,.02); color: #4d4770; }
.oscuro .leyenda { color: var(--texto-tenue); }
.oscuro .leyenda .l-libre::before { border-color: var(--linea); }
.oscuro .leyenda .l-ocupado::before { background: rgba(255,255,255,.06); }
.oscuro .resumen dt { color: var(--texto-tenue); }
.oscuro .resumen dl div { border-color: var(--linea); }
.oscuro .politica { background: rgba(255,106,26,.08); border-color: rgba(255,140,60,.3); }
.oscuro .politica p { color: var(--texto-claro); }
.oscuro .politica h4 { color: var(--oro); }
.oscuro .codigo { background: var(--grad-noche); box-shadow: 0 10px 40px rgba(91,44,255,.4); }
.oscuro .confirmada__icono { background: rgba(31,157,85,.15); color: #4ade80; box-shadow: 0 0 50px rgba(74,222,128,.25); }
.oscuro .actualizado { color: var(--texto-tenue); }

@media (prefers-reduced-motion: reduce) {
  .js .titulo-anim .w { opacity: 1 !important; transform: none !important; filter: none !important; }
  .chispas { display: none !important; }
  .medidor .valor { stroke-dashoffset: calc(251.3 - 251.3 * var(--p)) !important; }
}
/* v3: ajustes de color y bordes suaves */
.oscuro .nav a:not(.btn) { color: #e8e4f6; }
.oscuro .nav a:not(.btn):hover, .oscuro .nav a.activo { color: #fff; }
.oscuro a.btn, .oscuro .btn--primario, .oscuro .btn--secundario, .oscuro .btn--oscuro { color: #fff; }
.oscuro .footer a { color: #c9c2e6; }
.oscuro .footer a:hover { color: var(--oro); }
.oscuro .footer p { color: #c9c2e6; }
.oscuro .marca, .oscuro .marca:hover { color: #fff; }
.aurora { mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.oscuro .faq__resp a, .oscuro .carrito__nota a, .oscuro .check a { color: var(--oro); }

/* =====================================================================
   v4 — Pagos (QR BNB, tarjeta, QR fijo), checkout y panel admin
   ===================================================================== */
.giro { display: inline-block; width: 16px; height: 16px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .8s linear infinite; vertical-align: -3px; margin-right: 6px; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Módulo de pago ---------- */
.conf-pago__titulo { margin: 6px 0 12px; }
.pago { text-align: left; margin: 10px 0 6px; }
.pago__monto { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 1rem; margin: 0 0 12px; }
.pago__monto strong { font-size: 1.5rem; }
.pago__metodos { display: grid; gap: 10px; }
.pago__metodo { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--borde); background: #fff; color: var(--morado-900); cursor: pointer; font: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
.pago__metodo:hover { border-color: var(--naranja); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 122, 26, .15); }
.pago__metodo[aria-pressed="true"] { border-color: var(--naranja); box-shadow: 0 0 0 3px rgba(255, 122, 26, .2); }
.pago__metodo:disabled { opacity: .6; cursor: progress; }
.pago__metodo svg { flex: none; color: var(--naranja); }
.pago__metodo b { display: block; font-size: .98rem; }
.pago__metodo small { display: block; font-size: .82rem; opacity: .75; margin-top: 2px; }
.pago__detalle:empty { display: none; }
.pago__detalle { margin-top: 14px; }
.pago__cargando { padding: 18px; text-align: center; font-weight: 600; }
.pago__qr { text-align: center; padding: 18px; border-radius: 16px; background: #fff; color: #1d1a2b; border: 1px solid var(--borde); display: grid; gap: 10px; justify-items: center; }
.pago__qr img { width: min(260px, 100%); height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #fff; animation: aparecerQr .5s cubic-bezier(.2,.8,.2,1); }
.pago__qr p { margin: 0; color: #4a4560 !important; font-size: .92rem; }
.pago__qr .campo { width: 100%; }
.pago__qr .campo label { color: #1d1a2b !important; }
.pago__qr .campo input { background: #fff !important; color: #1d1a2b !important; border-color: var(--borde) !important; }
.pago__qr .btn--borde { color: var(--morado-900) !important; border-color: var(--borde) !important; }
.pago__espera { font-weight: 600; color: #6b4fc4 !important; }
@keyframes aparecerQr { from { opacity: 0; transform: scale(.85) rotate(-3deg); } to { opacity: 1; transform: none; } }
.oscuro .pago__metodo { background: rgba(255,255,255,.05); border-color: var(--linea); color: #fff; }
.oscuro .pago__metodo:hover, .oscuro .pago__metodo[aria-pressed="true"] { border-color: #ff6a1a; background: rgba(255,106,26,.08); }
.oscuro .pago__monto { color: #fff; }

/* ---------- Checkout dentro del carrito ---------- */
.carrito__checkout { flex: 1; overflow-y: auto; padding: 14px 20px 20px; display: grid; gap: 12px; align-content: start; }
.carrito__checkout[hidden] { display: none; }
.carrito__checkout h3 { margin: 4px 0 0; font-size: 1.1rem; }
.carrito__checkout .campo textarea { min-height: 70px; }
.ck-entrega { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.ck-entrega legend { font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.carrito__checkout #checkout-volver { justify-self: start; }
.oscuro .ck-entrega legend, .oscuro .carrito__checkout h3 { color: #fff; }

/* ---------- Panel admin ---------- */
.admin code { background: var(--fondo-alt); padding: 2px 6px; border-radius: 6px; font-size: .85em; word-break: break-all; }
.ayuda-admin { font-size: .86rem; color: var(--texto-suave); margin: 8px 0 14px; }
.admin-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.admin-top p { margin: 0; color: var(--texto-suave); font-size: .9rem; }
.admin-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 6px; background: var(--fondo-alt); border-radius: 14px; margin-bottom: 22px; scrollbar-width: thin; }
.admin-tabs button { flex: none; border: 0; background: transparent; padding: 10px 16px; border-radius: 10px; font: inherit; font-weight: 700; font-size: .9rem; color: var(--morado-800); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.admin-tabs button:hover { background: rgba(107, 79, 196, .1); }
.admin-tabs button[aria-selected="true"] { background: var(--morado-900); color: #fff; box-shadow: 0 6px 16px rgba(42, 27, 77, .25); }
.tab-n:empty { display: none; }
.tab-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--naranja); color: #fff; font-size: .72rem; margin-left: 4px; }
.admin-sec { animation: fundido .3s ease; }
.admin-caja { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; margin-bottom: 18px; }
.admin-caja h2 { font-size: 1.15rem; margin: 0; }
.admin-caja__cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.admin-guardar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border: 1px solid var(--borde); border-radius: 14px; box-shadow: 0 -6px 24px rgba(42,27,77,.08); }
.admin-estado { font-size: .88rem; font-weight: 600; color: var(--texto-suave); }
.admin-estado--ok { color: #146c3b; }
.admin-estado--error { color: #a12d2d; }
.campos--3 { grid-template-columns: repeat(3, 1fr); }
.campo--todo, .campos .completo { grid-column: 1 / -1; }
@media (max-width: 860px) { .campos--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .campos--3 { grid-template-columns: 1fr; } }
.dias-check { display: flex; flex-wrap: wrap; gap: 8px 18px; }
fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.campo legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; color: var(--morado-900); }
.ed-filas { display: grid; gap: 10px; margin-bottom: 12px; }
.ed-fila { display: grid; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo-alt); }
.ed-fila--serv { grid-template-columns: 1.2fr .5fr 2fr auto; }
.ed-fila--cat { grid-template-columns: 1fr auto auto; }
.ed-meta { font-size: .82rem; color: var(--texto-suave); padding-bottom: 14px; }
@media (max-width: 760px) { .ed-fila--serv { grid-template-columns: 1fr 1fr; } .ed-fila--serv .campo:nth-child(3) { grid-column: 1 / -1; } }
.ed-productos { display: grid; gap: 14px; margin-top: 12px; }
.ed-producto { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 16px; border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo-alt); animation: fundido .3s ease; }
.ed-producto__foto { display: grid; gap: 8px; justify-items: center; align-content: start; }
.ed-producto__foto img { width: 130px; height: 130px; object-fit: cover; border-radius: 12px; background: #fff; border: 1px solid var(--borde); transition: opacity .2s; }
.ed-producto__campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; }
.ed-producto__campos .campo--ancho, .ed-producto__campos .campo:first-child { grid-column: span 3; }
.ed-producto__campos .check { grid-column: span 2; align-self: center; }
.ed-producto__campos [data-quitar-prod] { justify-self: end; }
.ed-producto__campos textarea { min-height: 60px; }
@media (max-width: 760px) { .ed-producto { grid-template-columns: 1fr; } .ed-producto__campos { grid-template-columns: 1fr 1fr; } .ed-producto__campos .campo--ancho, .ed-producto__campos .campo:first-child, .ed-producto__campos .check { grid-column: 1 / -1; } }
.mini-select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borde); font: inherit; font-size: .85rem; background: #fff; min-height: 38px; }
.pago-caja .campos { margin-top: 6px; }
.pago-caja__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.qr-fijo { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.qr-fijo__img { display: grid; gap: 8px; justify-items: center; width: 170px; }
.qr-fijo__img img { width: 160px; height: 160px; object-fit: contain; background: #fff; border: 1px solid var(--borde); border-radius: 12px; }
.qr-fijo__img .vacio { width: 160px; height: 160px; display: grid; place-items: center; border: 2px dashed var(--borde); border-radius: 12px; padding: 0; }
.stats .stat b { font-size: 1.5rem; }
@media (max-width: 560px) { .admin-caja { padding: 16px; } .admin-guardar { padding: 12px; } }
.campo input[type="checkbox"], .campo input[type="radio"] { width: auto; min-height: 0; padding: 0; margin-top: 3px; flex: none; accent-color: var(--naranja); }
.ck-entrega .check { align-items: flex-start; }