/* ==============================================================
   landing.css — Rediseño completo de la landing pública
   Mobile-first: base para móvil, media queries para desktop
   Una sola tipografía en todo el sitio: Inter (--display y cuerpo), vía
   Google Fonts — consistencia deliberada, no mezclar fuentes (2026-08-19).
   ============================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Colores */
  --primario:        #2563eb;
  --primario-hover:  #1d4ed8;
  --primario-glow:   rgba(37, 99, 235, 0.35);
  --acento2:         #14b8a6;
  --acento2-glow:    rgba(20, 184, 166, 0.35);
  --oscuro:          #1e293b;
  --oscuro-2:        #0f172a;
  --texto:           #e2e8f0;
  --texto-suave:     #94a3b8;
  --texto-tenue:     #64748b;
  --fondo:           #0b1120;
  --fondo-suave:     #131b2c;
  --fondo-calido:    #0d1420;
  --borde:           #2a3648;
  --borde-suave:     #202b3d;
  --tarjeta:         #161f30;

  /* Tipografía */
  --display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --cuerpo:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --radio:      12px;
  --radio-lg:   20px;
  --ancho-max:  1100px;

  /* Sombras */
  --s-sm:  0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --s-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --s-lg:  0 10px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
  --s-xl:  0 20px 60px rgba(0,0,0,0.14), 0 8px 24px rgba(0,0,0,0.07);
}

/* El header, la barra superior y todo lo que cuelga de ellos (mega-menú de
   escritorio, panel del menú hamburguesa) se quedan siempre en su versión
   clara, sin importar el tema — el logo necesita fondo claro siempre, a
   pedido explícito del usuario. Re-declarar los tokens acá gana sobre el
   :root oscuro para cualquier descendiente que no los redefina a su vez. */
.topbar,
.header {
  --texto:       #1e293b;
  --texto-suave: #64748b;
  --texto-tenue: #94a3b8;
  --fondo:       #ffffff;
  --fondo-suave: #f8fafc;
  --borde:       #e2e8f0;
  --borde-suave: #f1f5f9;
  --tarjeta:     #ffffff;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--cuerpo);
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  /* Cursor personalizado: una hamburguesa (a pedido explícito del
     usuario, julio 2026) -- contorno oscuro en cada capa para que se vea
     sobre cualquier fondo, claro u oscuro. Hotspot en la esquina superior
     izquierda del pan de arriba, donde normalmente cae la punta de un
     cursor de sistema. Reemplaza al cursor con forma del logo (se
     eliminó img/cursor-clik.svg, ya no se usa en ningún otro lado). */
  cursor: url('/img/cursor-hamburguesa.svg') 8 8, auto;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---- Contenedor ---- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---- Encabezados de sección ---- */
.seccion-titulo {
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.seccion-subtitulo {
  text-align: center;
  color: var(--texto-suave);
  margin-bottom: 2.5rem;
  font-size: 1rem;
}

/* ---- Botones ---- */
.btn {
  display: inline-block;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radio);
  font-family: var(--cuerpo);
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.22s, transform 0.22s, border-color 0.22s, box-shadow 0.22s;
  white-space: nowrap;
  cursor: pointer;
}

.btn-primario {
  background: var(--primario);
  color: #fff;
  border: 2px solid transparent;
  box-shadow: 0 4px 14px var(--primario-glow);
}

.btn-primario:hover {
  background: var(--primario-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(37,99,235,0.45);
}

.btn-secundario {
  background: transparent;
  color: var(--texto);
  border: 2px solid var(--borde);
}

.btn-secundario:hover {
  border-color: #94a3b8;
  transform: translateY(-1px);
}

/* ==============================================================
   SISTEMA DE ANIMACIÓN AL SCROLL
   ============================================================== */
.animar {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity  0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0ms);
}

.animar.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================================================
   BARRA SUPERIOR — enlaces terciarios, encima del header principal
   ============================================================== */
.topbar {
  background: var(--fondo-suave);
  border-bottom: 1px solid var(--borde-suave);
}

.topbar-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  padding: 0.45rem 1.25rem;
}
.topbar-grupo {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
@media (max-width: 480px) {
  .topbar-interior { justify-content: center; }
}

.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto-suave);
  white-space: nowrap;
}
.topbar-link:hover { color: var(--texto); }
.topbar-link svg { width: 14px; height: 14px; color: #25d366; flex-shrink: 0; }
.topbar-link--negrilla { font-weight: 800; }

.topbar-btn-login, .topbar-btn-cta {
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
}

/* ---- Migas de pan — "dónde estoy" en cada subpágina, para volver fácil
   sin depender del botón atrás del navegador. No se usa en index.html
   (es la home). ---- */
.migas {
  padding-top: 1rem;
  padding-bottom: 0;
  font-size: 0.82rem;
  color: var(--texto-tenue);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--primario); text-decoration: underline; }
.migas-actual { color: var(--texto-suave); font-weight: 600; }

.nav-icono-btn svg { width: 16px; height: 16px; }

/* ---- Íconos del header (WhatsApp, cuenta, tema) — reemplazan los
   botones de texto "Iniciar sesión"/"Crear cuenta"/"Hablar con ventas"
   (julio 2026, a pedido del usuario): menos palabras, el propósito de
   cada uno queda en el aria-label/title, no permanentemente en pantalla. ---- */
.nav-iconos {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav-icono-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.nav-icono-btn svg { width: 18px; height: 18px; }
.nav-icono-btn:hover { color: var(--texto); background: var(--fondo-suave); }

.nav-icono-btn--cta {
  background: var(--primario);
  color: #fff;
}
.nav-icono-btn--cta:hover { background: var(--primario-hover); color: #fff; transform: translateY(-1px); }

/* ==============================================================
   BOTÓN FLOTANTE DE WHATSAPP — visible en todas las páginas de
   marketing (no en panel/admin/login/register/menú público). Fijo
   abajo a la derecha, con anillo de pulso para que no se pierda en
   una página larga sin robarle atención al CTA principal.
   ============================================================== */
.whatsapp-flotante {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  /* env() con fallback: en celulares con gesture bar (iPhone sin botón
     físico) evita que el botón quede pegado al borde o tapado por la
     barra del sistema */
  bottom: max(1.1rem, calc(1.1rem + env(safe-area-inset-bottom)));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45);
  z-index: 400;
  transition: transform 0.2s, box-shadow 0.2s;
}
.whatsapp-flotante svg { width: 30px; height: 30px; }
.whatsapp-flotante:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.55);
}

/* Burbuja de mensaje junto al botón — se ve como una conversación real de
   WhatsApp abriéndose (encabezado verde con foto + "en línea", fondo tipo
   chat, burbuja de mensaje recibido con hora) — reemplaza el anillo de
   pulso animado. js/whatsapp-burbuja.js la inserta con un mensaje al azar. */
.whatsapp-burbuja {
  position: fixed;
  right: 1.1rem;
  bottom: 5.3rem;
  width: 268px;
  max-width: calc(100vw - 2.2rem);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.28);
  z-index: 401;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.whatsapp-burbuja.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.whatsapp-burbuja-cabeza {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  background: #075e54;
}
.whatsapp-burbuja-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.whatsapp-burbuja-info { display: flex; flex-direction: column; min-width: 0; }
.whatsapp-burbuja-info strong { color: #fff; font-size: 0.9rem; font-weight: 700; }
.whatsapp-burbuja-estado { display: flex; align-items: center; gap: 0.3rem; color: rgba(255,255,255,0.8); font-size: 0.72rem; }
.whatsapp-burbuja-punto { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0; }

.whatsapp-burbuja-chat {
  background: #e5ddd5;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(0,0,0,0.03) 0, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(0,0,0,0.03) 0, transparent 45%);
  padding: 0.85rem 0.75rem;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.whatsapp-burbuja-mensaje {
  position: relative;
  background: #fff;
  border-radius: 0 8px 8px 8px;
  padding: 0.5rem 0.6rem 1.05rem;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12);
  max-width: 92%;
}
.whatsapp-burbuja-mensaje::before {
  content: '';
  position: absolute;
  top: 0;
  left: -7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent #fff transparent transparent;
}
.whatsapp-burbuja-mensaje p { margin: 0; font-size: 0.85rem; line-height: 1.35; color: #111b21; }
.whatsapp-burbuja-hora { position: absolute; right: 0.55rem; bottom: 0.3rem; font-size: 0.66rem; color: #667781; }
.whatsapp-burbuja-cta { display: inline-block; margin-top: 0.4rem; padding: 0.4rem 0.75rem; background: #25d366; color: #fff; border-radius: 8px; font-weight: 700; font-size: 0.82rem; text-decoration: none; }

/* Mensaje enviado por el usuario — alineado a la derecha, verde clarito
   como los propios mensajes en WhatsApp, cola apuntando a la derecha. */
.whatsapp-burbuja-mensaje--saliente {
  background: #d9fdd3;
  border-radius: 8px 0 8px 8px;
  margin-left: auto;
}
.whatsapp-burbuja-mensaje--saliente::before {
  left: auto;
  right: -7px;
  border-width: 0 0 8px 8px;
  border-color: transparent transparent transparent #d9fdd3;
}
.whatsapp-burbuja-mensaje--enviando { opacity: 0.6; }
.whatsapp-burbuja-mensaje--error { box-shadow: 0 0 0 1.5px #dc2626; }

/* Menú de preguntas frecuentes — respuestas automáticas fijas, el usuario
   elige, no vuelve a escribir texto libre (ver whatsapp-burbuja.js). */
.whatsapp-burbuja-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.whatsapp-burbuja-chip {
  padding: 0.4rem 0.65rem;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  background: #fff;
  color: #111b21;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.whatsapp-burbuja-chip:hover { border-color: #25d366; background: #f0fdf4; }

/* Compose: primer mensaje libre del usuario — desaparece apenas se envía */
.whatsapp-burbuja-compose {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  background: #f0f2f5;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.whatsapp-burbuja-compose input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.8rem;
  border: none;
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  color: #111b21;
  outline: none;
}
.whatsapp-burbuja-enviar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.whatsapp-burbuja-enviar svg { width: 17px; height: 17px; }

/* Prompt de login con Google — reemplaza el compose hasta que el usuario
   inicie sesión, mismo patrón que los comentarios del blog. */
.whatsapp-burbuja-google {
  padding: 0.7rem 0.75rem;
  background: #f0f2f5;
  border-top: 1px solid rgba(0,0,0,0.06);
  text-align: center;
}
.whatsapp-burbuja-google p { margin: 0 0 0.5rem; font-size: 0.76rem; color: #3b4a54; }
.whatsapp-burbuja-google #wa-google-btn { display: flex; justify-content: center; }

@media (max-width: 700px) {
  .whatsapp-burbuja { bottom: max(8.8rem, calc(8.8rem + env(safe-area-inset-bottom))); right: 0.85rem; width: 240px; }
}

/* En pantallas muy angostas se acerca un poco más al borde para no
   robarle ancho al contenido */
@media (max-width: 380px) {
  .whatsapp-flotante { width: 50px; height: 50px; right: 0.85rem; }
  .whatsapp-flotante svg { width: 26px; height: 26px; }
}

/* ==============================================================
   HEADER
   ============================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--borde);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.25rem;
  max-width: var(--ancho-max);
  margin: 0 auto;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--texto);
}
.logo img {
  height: 30px;
  width: auto;
  display: block;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 1.6rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.nav-links a:hover { color: var(--texto); }

/* ---- Mega-menú "Producto" ---- */
.nav-dropdown { position: relative; }

.nav-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.nav-dropdown-btn:hover { color: var(--texto); }

.nav-dropdown-chevron { width: 14px; height: 14px; transition: transform 0.18s; }

.nav-dropdown-panel {
  position: absolute;
  /* top: 100% (sin hueco) a propósito: un hueco entre el botón y el panel
     saca el cursor de cualquier elemento con :hover/:focus-within a mitad de
     camino, así que el panel se cierra antes de que el click a un ítem
     llegue a registrarse. El box-shadow ya separa visualmente el panel del
     header sin necesitar un margen real. */
  top: 100%;
  left: 0;
  transform: translateY(-4px);
  width: 560px;
  max-width: 90vw;
  background: var(--tarjeta);
  border-radius: var(--radio-lg);
  box-shadow: var(--s-xl);
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown:hover .nav-dropdown-chevron,
.nav-dropdown:focus-within .nav-dropdown-chevron { transform: rotate(180deg); }

.nav-dropdown-item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.65rem;
  border-radius: 10px;
  transition: background 0.15s;
}
.nav-dropdown-item:hover { background: var(--fondo-suave); }

/* ---- Mega-menú "Ciudades" -- solo texto, mas denso que el de "Producto" ---- */
.nav-dropdown-panel--ciudades {
  grid-template-columns: repeat(3, 1fr);
  width: 460px;
}
.nav-ciudad-item {
  display: block;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-suave);
  transition: background 0.15s, color 0.15s;
}
.nav-ciudad-item:hover { background: var(--fondo-suave); color: var(--texto); }
.nav-dropdown-item--faq {
  grid-column: 1 / -1;
  border-top: 1px solid var(--borde-suave);
  margin-top: 0.3rem;
  padding-top: 0.9rem;
}
.nav-dropdown-item--faq strong { color: var(--primario); }

.nav-ciudad-item--todas {
  grid-column: 1 / -1;
  color: var(--primario);
  text-align: center;
  border-top: 1px solid var(--borde-suave);
  margin-top: 0.3rem;
  padding-top: 0.75rem;
}

.nav-dropdown-icono {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--primario);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-dropdown-icono svg { width: 17px; height: 17px; }

.nav-dropdown-item strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--texto);
}
.nav-dropdown-item small {
  display: block;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--texto-suave);
  margin-top: 2px;
  line-height: 1.4;
}

.nav-acciones {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

@media (min-width: 860px) {
  .nav-links { display: flex; }

  /* Logo centrado: en desktop el nav pasa a grid de 3 columnas simetricas
     (menu izq | logo | menu der) para que el logo quede visualmente en
     el centro del header, con dos grupos de enlaces flanqueandolo. */
  .nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "izq logo der";
    column-gap: 2.5rem;
    justify-content: initial;
  }
  /* grid-template-areas en vez de grid-column suelto -- el orden en el
     HTML no importa para donde termina cada item (evita el bug de
     auto-placement documentado antes: un item con grid-column explicito
     que aparece "fuera de orden" en el HTML puede terminar empujado a
     una fila nueva). */
  .logo { grid-area: logo; justify-self: center; }
  .nav-links-izq { grid-area: izq; justify-self: end; }
  .nav-links-der { grid-area: der; justify-self: start; }
  .nav-acciones { display: none; }
}

/* ---- Menú móvil (hamburguesa) — <860px, cuando .nav-links está oculto ---- */
.nav-hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-hamburguesa span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--texto);
  transition: transform 0.2s, opacity 0.2s;
}
.nav-hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-movil-panel {
  display: none;
  flex-direction: column;
  padding: 0.5rem 1.25rem 1rem;
  border-top: 1px solid var(--borde);
  background: var(--tarjeta);
}
.nav-movil-panel.abierto { display: flex; }
.nav-movil-panel a {
  padding: 0.75rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--fondo-suave);
}
.nav-movil-panel a:last-of-type { border-bottom: none; }
.nav-movil-panel a:hover { color: var(--texto); }

.nav-movil-separador { border-top: 1px solid var(--borde); margin: 0.4rem 0; }

.nav-movil-cta {
  color: var(--primario) !important;
  font-weight: 800 !important;
}

.nav-movil-tema {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.75rem 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  text-align: left;
}
.nav-movil-tema:hover { color: var(--texto); }

@media (min-width: 860px) {
  .nav-hamburguesa { display: none; }
  .nav-movil-panel { display: none !important; }
}

/* En pantallas muy angostas (320px) el logo + los dos botones no caben con el
   padding/tamaño de fuente por defecto — se achican para evitar overflow horizontal. */
@media (max-width: 360px) {
  .nav { padding: 0.85rem 0.9rem; }
  .nav-acciones { gap: 0.4rem; }
  .nav .btn { padding: 0.5rem 0.65rem; font-size: 0.76rem; }
}

/* ==============================================================
   HERO
   ============================================================== */
.hero {
  position: relative;
  background: var(--fondo-calido);
  color: var(--texto);
  padding: 5rem 1.25rem 6rem;
  overflow: hidden;
}

.hero-interior {
  position: relative;
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  text-align: center;
}

@media (min-width: 900px) {
  .hero-interior {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 4rem;
  }
  .hero-copy { flex: 1 1 50%; }
  .hero-foto-wrap { flex: 1 1 42%; max-width: 460px; }
  .hero-subtitulo { max-width: none; }
  .hero-ctas { justify-content: flex-start; }
}

/* ---- Carrusel de fotos ilustrativas del hero (rotan solas) ---- */
.hero-foto-wrap {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .hero-foto-wrap { margin: 0; }
}
.hero-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio-lg);
  box-shadow: var(--s-lg);
  overflow: hidden;
}
.hero-foto-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-foto-img--activa { opacity: 1; }

/* ---- Tipografía del hero ---- */
.hero-titulo {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1px;
  margin-bottom: 1.4rem;
}

.hero-titulo em {
  color: var(--primario);
  font-style: normal;
  font-weight: 700;
}

/* Frase rotativa del hero — fade suave al cambiar, JS hace el cambio de
   texto (ver script al final del body). El contenido inicial (servido en
   el HTML, sin JS) ya es una frase completa y correcta por su cuenta --
   la rotación es una mejora progresiva, no la única fuente del mensaje. */
#hero-rotativo {
  display: inline-block;
  transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}
#hero-rotativo.hero-rotativo--cambiando {
  opacity: 0;
  transform: translateY(-8px);
  filter: blur(4px);
}
@media (prefers-reduced-motion: reduce) {
  #hero-rotativo { transition: none; }
}

.hero-subtitulo {
  font-size: 1.15rem;
  color: var(--texto-suave);
  line-height: 1.75;
  margin-bottom: 2.5rem;
  max-width: 520px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.hero-cta-secundario {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--texto);
  transition: color 0.18s;
}
.hero-cta-secundario svg { width: 34px; height: 34px; color: var(--primario); flex-shrink: 0; }
.hero-cta-secundario:hover { color: var(--primario); }

.hero-cta {
  position: relative;
  display: inline-block;
  background: var(--primario);
  color: #fff;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radio);
  font-family: var(--cuerpo);
  font-weight: 800;
  font-size: 1rem;
  transition: background 0.22s, transform 0.22s, box-shadow 0.22s;
  box-shadow: 0 4px 22px rgba(37,99,235,0.4);
}

.hero-cta:hover {
  background: var(--primario-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(37,99,235,0.52);
}

.hero-cta:hover::after { animation-play-state: paused; opacity: 0; }

/* Halo animado en un pseudo-elemento aparte: solo se anima `opacity`
   (compositor, sin repintar el botón real en cada frame) — animar
   `box-shadow` directo fuerza repaint continuo del elemento real. */
.hero-cta::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 4px 30px rgba(37,99,235,0.62);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  animation: hero-cta-latido 2.8s ease-in-out infinite;
}

@keyframes hero-cta-latido {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta::after { animation: none; }
}

/* ---- Mockup del celular ---- */
.mockup-contenedor {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Halo naranja detrás del teléfono */
.mockup-contenedor::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(37,99,235,0.2) 0%, transparent 70%);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.telefono-ext {
  position: relative;
  display: inline-block;
  animation: flotar 5s ease-in-out infinite;
}

/* Botón de encendido — lado derecho */
.telefono-ext::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 108px;
  width: 4px;
  height: 52px;
  background: #2d4060;
  border-radius: 0 3px 3px 0;
}

/* Botones de volumen — lado izquierdo (box-shadow simula el segundo) */
.telefono-ext::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 85px;
  width: 4px;
  height: 30px;
  background: #2d4060;
  border-radius: 3px 0 0 3px;
  box-shadow: 0 46px 0 #2d4060;
}

.telefono {
  position: relative;
  width: min(218px, 60vw);
  background: #fff;
  border-radius: 38px;
  border: 9px solid #1c304f;
  /* Pantalla del mockup: fondo blanco fijo (simula una pantalla encendida),
     así que el texto de adentro se fija a su versión clara siempre. */
  --texto:       #1e293b;
  --texto-suave: #64748b;
  --texto-tenue: #94a3b8;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 32px 72px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.12);
  overflow: hidden;
}

/* Reflejo de vidrio */
.telefono::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(255,255,255,0.09) 0%, transparent 38%);
  z-index: 10;
  pointer-events: none;
  border-radius: inherit;
}

/* Dynamic Island */
.telefono-notch {
  background: #1c304f;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.telefono-notch::after {
  content: '';
  width: 86px;
  height: 17px;
  background: #0a1628;
  border-radius: 999px;
}

.telefono-pantalla { background: #fff; }

.menu-mockup-header {
  background: var(--oscuro);
  color: #fff;
  padding: 8px 10px;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 700;
}

.menu-mockup-header small {
  display: block;
  color: #94a3b8;
  font-family: var(--cuerpo);
  font-weight: 400;
  font-size: 0.54rem;
  margin-top: 1px;
}

.menu-mockup-categoria {
  padding: 6px 10px 2px;
  font-size: 0.54rem;
  font-weight: 800;
  color: var(--primario);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.menu-mockup-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom: 1px solid #f1f5f9;
}

/* "Fotos" de platos como gradientes deliberados */
.foto-plato {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  flex-shrink: 0;
}

.foto-plato-bandeja  { background: linear-gradient(135deg, #d97706, #92400e); }
.foto-plato-carne    { background: linear-gradient(135deg, #dc2626, #7f1d1d); }
.foto-plato-pollo    { background: linear-gradient(135deg, #f59e0b, #b45309); }
.foto-plato-limonada { background: linear-gradient(135deg, #16a34a, #14532d); }

.menu-mockup-item-info { flex: 1; min-width: 0; }

.menu-mockup-item-nombre {
  font-size: 0.59rem;
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-mockup-item-desc {
  font-size: 0.5rem;
  color: var(--texto-suave);
  margin-top: 1px;
}

.menu-mockup-item-precio {
  font-size: 0.59rem;
  font-weight: 700;
  color: var(--primario);
  white-space: nowrap;
  flex-shrink: 0;
}

.menu-mockup-btn {
  margin: 7px 10px 0;
  background: var(--primario);
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 7px;
  font-size: 0.58rem;
  font-weight: 700;
}

/* Home bar estilo iPhone */
.menu-mockup-home {
  display: flex;
  justify-content: center;
  padding: 6px 0 5px;
}

.menu-mockup-home::after {
  content: '';
  width: 50px;
  height: 3px;
  background: #cbd5e1;
  border-radius: 999px;
}

/* ---- Feedback visual al tocar un plato/botón (sección "Pruébalo tú
   mismo", ver js/demo-interactiva.js) ---- */
.telefono-pantalla { position: relative; }

.menu-mockup-item { transition: background-color .2s; }
.menu-mockup-item.tap-activo {
  background-color: rgba(37,99,235,.1);
}
.menu-mockup-item.tap-activo .foto-plato {
  animation: mockup-tap-plato .28s ease;
}
@keyframes mockup-tap-plato {
  50% { transform: scale(.88); }
}

.menu-mockup-btn.tap-activo { transform: scale(.95); }

.menu-mockup-carrito {
  position: absolute;
  top: 33px;
  right: 8px;
  background: var(--oscuro);
  color: #fff;
  font-size: 0.52rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-4px) scale(.9);
  transition: opacity .25s, transform .25s;
  z-index: 5;
}
.menu-mockup-carrito.visible { opacity: 1; transform: translateY(0) scale(1); }
.menu-mockup-carrito.pulso   { animation: mockup-carrito-pulso .3s ease; }
@keyframes mockup-carrito-pulso {
  50% { transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .menu-mockup-carrito,
  .menu-mockup-item.tap-activo .foto-plato,
  .menu-mockup-carrito.pulso,
  .menu-mockup-btn.tap-activo {
    animation: none;
    transition: none;
  }
}

/* ==============================================================
   CONFIANZA — insignias de hechos reales (no certificaciones inventadas)
   ============================================================== */
.confianza {
  padding: 5rem 0;
  background: var(--fondo);
}

.confianza-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.confianza-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  background: var(--fondo-suave);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
}

.confianza-icono {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e7eefe;
  color: var(--primario);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.confianza-icono svg { width: 19px; height: 19px; }

.confianza-item:nth-child(even) .confianza-icono {
  background: #edfaf8;
  color: var(--acento2);
}

.confianza-item span {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.3;
}

.confianza-item--tooltip { position: relative; cursor: help; outline: none; }
.confianza-item--tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 230px;
  max-width: 75vw;
  background: var(--oscuro-2);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  box-shadow: var(--s-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
  z-index: 20;
  text-align: left;
}
.confianza-item--tooltip:hover::after,
.confianza-item--tooltip:focus::after,
.confianza-item--tooltip:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 480px) {
  .confianza-item--tooltip::after { left: 0; transform: translateY(4px); }
  .confianza-item--tooltip:hover::after,
  .confianza-item--tooltip:focus::after,
  .confianza-item--tooltip:focus-visible::after { transform: translateY(0); }
}

/* ==============================================================
   PILARES — 3 tarjetas pastel con mockup real embebido
   ============================================================== */
.pilares { padding: 4.5rem 0; }

.pilares-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.pilar {
  background: #eaf1fd;
  border-radius: var(--radio-lg);
  padding: 1.75rem;
  /* Fondo cálido fijo (no sigue el tema) — el texto de adentro se fija a
     su versión clara para que siga siendo legible en modo oscuro. */
  --texto:       #1e293b;
  --texto-suave: #64748b;
}

.pilar h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--texto);
  margin-bottom: 0.5rem;
}

.pilar p {
  font-size: 0.88rem;
  color: var(--texto-suave);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.pilar-mockup {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--s-lg);
}
.pilar-mockup img { width: 100%; height: 220px; object-fit: contain; background: #0f172a; display: block; }

@media (min-width: 900px) {
  .pilares-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .confianza-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==============================================================
   CAPTURAS — el panel real, sin maquetas
   ============================================================== */
.capturas {
  padding: 6rem 0;
  background: var(--fondo-suave);
}

.capturas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 1rem;
}

.captura-item { text-align: center; }

.captura-marco {
  background: #1e293b;
  border-radius: 14px;
  padding: 9px 9px 0;
  box-shadow: var(--s-lg);
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s;
}
/* Glow azul discreto al pasar el mouse -- confirma que la captura es
   interactiva antes de que el usuario descubra el tour guiado. */
.captura-item:hover .captura-marco {
  transform: translateY(-4px);
  box-shadow: var(--s-lg), 0 0 0 1px rgba(37,99,235,0.25), 0 12px 32px rgba(37,99,235,0.18);
}

/* Barra de "ventana" tipo navegador — refuerza que es software real */
.captura-marco::before {
  content: '';
  display: block;
  height: 8px;
  margin-bottom: 9px;
  background: #dc2626;
  border-radius: 50%;
  width: 8px;
  box-shadow: 16px 0 0 #f59e0b, 32px 0 0 #16a34a;
}

.captura-marco img {
  width: 100%;
  height: 210px;
  object-fit: contain;
  background: #0f172a;
  border-radius: 8px 8px 0 0;
  display: block;
}

.captura-item figcaption {
  margin-top: 0.9rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--texto);
}

@media (min-width: 700px) {
  .capturas-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .capturas-grid { grid-template-columns: repeat(3, 1fr); }
}

.capturas-demo-link {
  display: block;
  text-align: center;
  margin-top: 2rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primario);
}
.capturas-demo-link:hover { color: var(--primario-hover); text-decoration: underline; }

.tour-btn {
  display: table;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem auto 0;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  border: 2px solid var(--borde);
  background: var(--tarjeta);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, transform 0.18s;
}
.tour-btn svg { width: 18px; height: 18px; color: var(--primario); vertical-align: -4px; margin-right: 0.4rem; }
.tour-btn:hover { border-color: var(--primario); color: var(--primario); transform: translateY(-1px); }

/* ==============================================================
   TOUR GUIADO — lightbox que expande cada captura a tamaño grande
   (antes solo dibujaba un recuadro sobre la miniatura de 210px sin
   agrandarla — ahora la imagen real se ve grande y legible)
   ============================================================== */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(15, 23, 42, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem 2rem;
}
.tour-overlay.oculto { display: none; }

.tour-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 800px;
  max-height: 100%;
}

.tour-imagen-marco {
  background: #1e293b;
  border-radius: 16px;
  padding: 12px 12px 0;
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.55);
  width: 100%;
  overflow: hidden;
  animation: tour-aparecer 0.35s cubic-bezier(0.22,1,0.36,1);
}

.tour-imagen-marco-barra {
  display: block;
  height: 10px;
  margin-bottom: 12px;
  background: #dc2626;
  border-radius: 50%;
  width: 10px;
  box-shadow: 18px 0 0 #f59e0b, 36px 0 0 #16a34a;
}

.tour-imagen {
  width: 100%;
  max-height: 50vh;
  object-fit: contain;
  background: #0f172a;
  border-radius: 10px 10px 0 0;
  display: block;
}

@keyframes tour-aparecer {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.tour-info { text-align: center; max-width: 560px; }

.tour-burbuja-contador {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primario);
  letter-spacing: 0.5px;
  margin-bottom: 0.4rem;
}

.tour-burbuja-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 0.4rem;
}

.tour-burbuja-texto {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.tour-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.tour-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.tour-dot:hover { background: rgba(255,255,255,0.45); }
.tour-dot.activo { background: var(--primario); transform: scale(1.25); }

.tour-cerrar,
.tour-flecha {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
  z-index: 5001;
}
.tour-cerrar:hover,
.tour-flecha:hover { background: rgba(255,255,255,0.18); }

.tour-cerrar {
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
}
.tour-cerrar svg { width: 18px; height: 18px; }

.tour-flecha {
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
}
.tour-flecha:hover { transform: translateY(-50%) scale(1.08); }
.tour-flecha svg { width: 20px; height: 20px; }
.tour-flecha-prev { left: 0.5rem; }
.tour-flecha-next { right: 0.5rem; }

@media (min-width: 700px) {
  .tour-flecha { width: 48px; height: 48px; }
  .tour-flecha-prev { left: 1.5rem; }
  .tour-flecha-next { right: 1.5rem; }
}

/* ==============================================================
   CARRUSEL — usado en "Todo lo que incluye tu carta QR"
   ============================================================== */
.carrusel-wrap {
  position: relative;
  margin-top: 1rem;
}

.carrusel-pista {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 1.25rem 1.75rem;
  scroll-padding-left: 1.25rem;
  scrollbar-width: thin;
}
.carrusel-pista { scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
.carrusel-pista::-webkit-scrollbar { height: 6px; }
.carrusel-pista::-webkit-scrollbar-track { background: transparent; }
.carrusel-pista::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 999px; }
.carrusel-pista::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

.carrusel-tarjeta {
  flex: 0 0 auto;
  width: min(80vw, 270px);
  scroll-snap-align: start;
}

.carrusel-flecha {
  display: none;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  box-shadow: var(--s-md);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  color: var(--texto);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.carrusel-flecha:hover { background: var(--primario); color: #fff; border-color: var(--primario); }
.carrusel-flecha svg { width: 20px; height: 20px; }
.carrusel-flecha-prev { left: -4px; }
.carrusel-flecha-next { right: -4px; }

/* Desktop: se ve todo de un vistazo, sin arrastrar ni hacer click en
   flechas para descubrir el resto — el scroll horizontal con flechas queda
   solo para el espacio angosto del celular, donde sí tiene sentido. */
@media (min-width: 900px) {
  .carrusel-pista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    padding: 0.5rem 0 0.5rem;
    scroll-snap-type: none;
  }
  .carrusel-tarjeta,
  .carrusel-tarjeta-pagos { width: auto; }
  .carrusel-flecha { display: none; }
}

/* ---- Tarjeta especial de medios de pago dentro del carrusel ---- */
.carrusel-tarjeta-pagos {
  width: min(84vw, 320px);
}

.pago-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.pago-logo-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 14px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: var(--s-sm);
}
.pago-logo-chip img { height: 22px; width: auto; }

.pago-logo-chip-daviplata,
.pago-logo-chip-efectivo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--texto);
  white-space: nowrap;
}

/* ==============================================================
   FEATURES — ¿Qué incluye?
   ============================================================== */
.features {
  position: relative;
  padding: 5rem 0;
  background: var(--fondo);
  overflow: hidden;
}

.features::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(20,184,166,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Variante estática (sin carrusel) para usar dentro de una página de
   contenido, ej. docs.html -- misma tarjeta, distinto contenedor. */
.features--pagina { padding: 0 0 3.5rem; }
.features--pagina::before { display: none; }

.features-grid-estatica {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 640px) {
  .features-grid-estatica { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .features-grid-estatica { grid-template-columns: repeat(3, 1fr); }
}
.feature-card--full { grid-column: 1 / -1; }

.feature-card {
  background: var(--fondo-suave);
  border-radius: var(--radio);
  padding: 1.35rem;
  border: 1px solid var(--borde);
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s;
  cursor: default;
}

.feature-card--foto { overflow: hidden; }
.feature-card-foto {
  width: calc(100% + 2.7rem);
  height: 140px;
  object-fit: cover;
  display: block;
  margin: -1.35rem -1.35rem 1rem;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--s-lg), 0 0 0 1px rgba(37,99,235,0.25), 0 12px 32px rgba(37,99,235,0.16);
  border-color: transparent;
}

.feature-icono {
  width: 46px;
  height: 46px;
  background: #e7eefe;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  color: var(--primario);
  transition: background 0.25s, transform 0.25s;
}

.feature-card:hover .feature-icono {
  background: var(--primario);
  color: #fff;
  transform: scale(1.08) rotate(-4deg);
}

/* Alterna azul/teal en los íconos — el teal es el mismo acento del logo,
   antes exclusivo del header; usarlo aquí también le da variedad al grid
   sin inventar una tercera paleta. */
.feature-card:nth-child(even) .feature-icono {
  background: #edfaf8;
  color: var(--acento2);
}
.feature-card:nth-child(even):hover .feature-icono {
  background: var(--acento2);
  color: #fff;
}

.feature-icono svg { width: 22px; height: 22px; }

.feature-titulo {
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.feature-desc {
  font-size: 0.78rem;
  color: var(--texto-suave);
  line-height: 1.6;
}

/* ==============================================================
   RESEÑAS — carrusel automático (CSS puro, sin librería)
   ============================================================== */
.resena-mini {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.35rem;
}
.resena-mini-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
}
.resena-mini-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--fondo-suave);
}
.resena-mini-datos strong { display: block; font-size: 0.88rem; color: var(--texto); }
.resena-mini-estrellas { color: #f59e0b; font-size: 0.78rem; letter-spacing: 1px; }
.resena-mini p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--texto-suave);
  margin: 0;
}

/* ==============================================================
   DECLARACIÓN — texto gigante tipo Apple
   ============================================================== */
.declaracion {
  padding: 7rem 0;
  text-align: center;
}
.declaracion-texto {
  font-family: var(--display);
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.05;
  color: var(--texto-tenue);
  margin: 0;
}
.declaracion-clave {
  color: var(--texto-tenue);
  transition: color 0.9s cubic-bezier(0.22,1,0.36,1);
}
.declaracion-extra {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1), filter 0.7s ease;
  transition-delay: 0.25s;
}
.declaracion.en-vista .declaracion-clave { color: var(--primario); }
.declaracion.en-vista .declaracion-extra {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .declaracion-clave, .declaracion-extra { transition: none; }
}

/* ==============================================================
   MÉTRICAS
   ============================================================== */
.metricas {
  padding: 7rem 0;
  background: var(--oscuro);
  color: #fff;
  text-align: center;
}

.metricas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 1rem;
}
@media (min-width: 640px) {
  .metricas-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

.metrica { padding: 0 0.5rem; }

.metrica-icono {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(37,99,235,0.14);
  color: var(--primario);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
}
.metrica-icono svg { width: 18px; height: 18px; }

.metrica:nth-child(even) .metrica-icono {
  background: rgba(20,184,166,0.16);
  color: var(--acento2);
}

.metrica-numero {
  font-family: var(--display);
  font-size: clamp(2.75rem, 6vw, 4.25rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  margin-bottom: 0.6rem;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.metrica-numero .contador { color: var(--primario); }

.metrica-etiqueta {
  font-size: 0.85rem;
  color: var(--texto-tenue);
  line-height: 1.4;
}

/* ==============================================================
   CÓMO FUNCIONA
   ============================================================== */
.como-funciona {
  padding: 7rem 0;
  background: var(--fondo-suave);
}

.pasos {
  display: flex;
  flex-direction: column;
}

.paso {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 0;
}

.paso-numero {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  background: var(--primario);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 4px 16px rgba(37,99,235,0.38);
}

.paso-icono {
  width: 30px;
  height: 30px;
  color: var(--primario);
  margin-bottom: 0.6rem;
}
.paso-icono svg { width: 100%; height: 100%; }

.paso-contenido h3 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  padding-top: 0.65rem;
}

.paso-contenido p {
  font-size: 0.88rem;
  color: var(--texto-suave);
  line-height: 1.65;
}

.paso-separador { display: none; }

/* ==============================================================
   DEMO INTERACTIVA — "Pruébalo tú mismo" (reusa las clases del
   mockup del hero: .telefono, .menu-mockup-*, etc.)
   ============================================================== */
.demo-interactiva {
  padding: 6.5rem 0 7rem;
  background: var(--fondo);
}

.demo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
  margin-top: 1rem;
}

.demo-flecha {
  color: var(--texto-tenue);
  transform: rotate(90deg);
}
.demo-flecha svg { width: 26px; height: 26px; }

.demo-telefono-col,
.demo-cocina-col {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Los platos y el botón "Pedir ahora" ahora son interactivos de verdad
   en esta sección (a diferencia del mockup del hero, decorativo) */
.demo-item,
#demo-btn-pedir {
  cursor: pointer;
}
.demo-item:focus-visible,
#demo-btn-pedir:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: -2px;
}

@keyframes demo-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
.demo-shake { animation: demo-shake 0.35s ease; }

/* ---- Panel de la comandera de cocina ---- */
.demo-cocina {
  width: 100%;
  max-width: 300px;
  background: var(--oscuro-2);
  border-radius: var(--radio-lg);
  padding: 1.1rem;
  box-shadow: var(--s-lg);
}

.demo-cocina-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.85rem;
  margin-bottom: 0.9rem;
}
.demo-cocina-header svg { width: 18px; height: 18px; color: var(--primario); flex-shrink: 0; }

.demo-cocina-lista {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 140px;
}

.demo-cocina-vacio {
  color: var(--texto-tenue);
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 1rem 0.25rem;
}

.demo-ticket {
  background: var(--tarjeta);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  box-shadow: var(--s-md);
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 0.28s cubic-bezier(0.22,1,0.36,1), transform 0.28s cubic-bezier(0.22,1,0.36,1), max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
.demo-ticket-entra { opacity: 1; transform: translateY(0) scale(1); }
.demo-ticket-sale {
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  overflow: hidden;
}

.demo-ticket-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--texto-suave);
  margin-bottom: 0.4rem;
}
.demo-ticket-hora { color: var(--primario); }

.demo-ticket-items {
  list-style: none;
  font-size: 0.8rem;
  color: var(--texto);
  margin-bottom: 0.5rem;
}
.demo-ticket-items li { padding: 0.1rem 0; }

.demo-ticket-total {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--texto);
  margin-bottom: 0.6rem;
}

.demo-ticket-btn {
  width: 100%;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.demo-ticket-btn:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

@media (min-width: 900px) {
  .demo-grid {
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
  }
  .demo-flecha { transform: none; }
  .demo-telefono-col { justify-content: flex-end; }
  .demo-cocina-col { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-ticket { transition: none; }
}

/* ---- Timeline del pedido completo (Escanea -> Factura) ---- */
.timeline-pedido {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 2rem auto 2.5rem;
}
.timeline-paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 92px;
  text-align: center;
}
.timeline-paso-icono {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  color: var(--primario);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.timeline-paso-icono svg { width: 20px; height: 20px; }
.timeline-paso span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--texto-suave);
  line-height: 1.3;
}
.timeline-linea {
  flex: 1 1 24px;
  min-width: 16px;
  height: 1px;
  background: var(--borde);
  margin-top: 22px;
}
@media (max-width: 640px) {
  .timeline-linea { display: none; }
  .timeline-paso { width: 30%; }
}

/* ---- Reto cronometrado: "arma un pedido en menos de 15 segundos" ---- */
.reto-widget {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 1.25rem auto 0;
  padding: 0.9rem 1.25rem;
  max-width: 560px;
  background: var(--tarjeta);
  border: 2px solid var(--borde);
  border-radius: 999px;
  transition: border-color 0.25s, background 0.25s;
}

.reto-texto {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--texto);
  margin: 0;
}

.reto-btn { padding: 0.5rem 1.1rem; font-size: 0.82rem; white-space: nowrap; }

.reto-widget--activo {
  border-color: var(--acento2);
  background: rgba(20, 184, 166, 0.06);
}
.reto-widget--activo .reto-texto { color: #0f766e; }

.reto-widget--urgente {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
  animation: reto-pulso 0.6s ease-in-out infinite;
}
.reto-widget--urgente .reto-texto { color: #dc2626; }

.reto-widget--exito {
  border-color: #16a34a;
  background: rgba(34, 197, 94, 0.08);
}
.reto-widget--exito .reto-texto { color: #15803d; }

.reto-widget--timeout {
  border-color: var(--primario);
  background: rgba(37, 99, 235, 0.06);
}
.reto-widget--timeout .reto-texto { color: var(--primario-hover); }

@keyframes reto-pulso {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .reto-widget--urgente { animation: none; }
}

/* ==============================================================
   GENERADOR DE QR — lead magnet interactivo, sin registro
   ============================================================== */
.generador-qr {
  padding: 6.5rem 0 7rem;
  background: var(--fondo-suave);
}

.qr-gen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 780px;
}

.qr-gen-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.qr-gen-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  font-family: var(--cuerpo);
  font-size: 1rem;
  color: var(--texto);
  background: var(--tarjeta);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.qr-gen-input:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 4px var(--primario-glow);
}

.qr-gen-preview-url {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--texto-suave);
}
.qr-gen-preview-url strong { color: var(--texto); }

.qr-gen-cta {
  display: inline-block;
  margin-top: 1.25rem;
}

.qr-gen-nota {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--texto-tenue);
  line-height: 1.5;
}

.qr-gen-tarjeta {
  background: var(--tarjeta);
  border-radius: var(--radio-lg);
  box-shadow: var(--s-lg);
  padding: 1.75rem;
  text-align: center;
  justify-self: center;
  width: 100%;
  max-width: 280px;
}

.qr-gen-imagen-wrap {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-gen-imagen {
  width: 220px;
  height: 220px;
  border-radius: 8px;
}

.qr-gen-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  border: 2px dashed var(--borde);
  border-radius: 8px;
  color: var(--texto-tenue);
  font-size: 0.8rem;
  padding: 1rem;
}
.qr-gen-vacio svg { width: 40px; height: 40px; opacity: 0.6; }

.qr-gen-tarjeta-nombre {
  margin-top: 1rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
}

.qr-gen-tarjeta-hint {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--acento2);
  font-weight: 700;
  min-height: 1.1em;
}

@media (min-width: 900px) {
  .qr-gen-grid {
    grid-template-columns: 1fr auto;
    gap: 3rem;
    margin: 0 auto;
  }
}

/* ==============================================================
   DIFERENCIAL
   ============================================================== */
.diferencial {
  padding: 7.5rem 0;
  background: var(--oscuro-2);
  color: #fff;
  text-align: center;
}

.diferencial-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primario);
  margin-bottom: 1rem;
}

.diferencial-titulo {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 1.25rem;
}

.diferencial-titulo span { color: var(--primario); }

.diferencial-texto {
  font-size: 0.95rem;
  color: var(--texto-tenue);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.75;
}

.diferencial-destaque {
  background: rgba(37,99,235,0.1);
  border: 1px solid rgba(37,99,235,0.22);
  border-radius: var(--radio);
  padding: 1.5rem;
  max-width: 480px;
  margin: 0 auto;
  font-size: 0.95rem;
  color: #e2e8f0;
  line-height: 1.75;
}

.diferencial-destaque strong {
  color: var(--primario);
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1rem;
}

/* ---- Grid de 3 comparaciones (reemplaza el párrafo único) ---- */
.diferencial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto 2.5rem;
  text-align: left;
}

.diferencial-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radio-lg);
  padding: 1.5rem;
}

.diferencial-item-icono {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(37,99,235,0.12);
  color: var(--primario);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.diferencial-item-icono svg { width: 20px; height: 20px; }

.diferencial-item:nth-child(2) .diferencial-item-icono {
  background: rgba(20,184,166,0.14);
  color: var(--acento2);
}
.diferencial-item:nth-child(3) .diferencial-item-icono {
  background: rgba(37,99,235,0.12);
  color: var(--primario);
}

.diferencial-item h3 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.4rem;
}

.diferencial-item p {
  font-size: 0.88rem;
  color: var(--texto-tenue);
  line-height: 1.65;
}

@media (min-width: 768px) {
  .diferencial-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Recibos "antes/después": misma venta, dos resultados ---- */
.recibos-comparacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 640px;
  margin: 0 auto 2.5rem;
}

.recibo {
  width: 100%;
  max-width: 320px;
  background: var(--tarjeta);
  color: var(--texto);
  border-radius: 10px;
  padding: 1.5rem 1.4rem;
  box-shadow: var(--s-lg);
  font-family: 'Courier New', Courier, monospace;
}
.recibo-delivery { transform: rotate(-1.5deg); }
.recibo-clik      { transform: rotate(1.5deg); }

.recibo-titulo {
  font-family: var(--cuerpo);
  font-weight: 700;
  font-size: 0.82rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texto-suave);
  margin-bottom: 1rem;
}

.recibo-linea {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  padding: 0.35rem 0;
}

.recibo-tachado {
  color: #dc2626;
  text-decoration: line-through;
  font-weight: 700;
}

.recibo-cero {
  color: #16a34a;
  font-weight: 700;
}

.recibo-separador {
  border-top: 1px dashed var(--borde);
  margin: 0.5rem 0;
}

.recibo-total {
  font-weight: 800;
  font-size: 1.05rem;
}
.recibo-total-clik { color: #16a34a; }

.recibo-nota {
  font-family: var(--cuerpo);
  text-align: center;
  font-size: 0.72rem;
  color: var(--texto-tenue);
  margin-top: 0.85rem;
}

.recibo-vs {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primario);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.78rem;
  z-index: 1;
}

@media (min-width: 640px) {
  .recibos-comparacion { flex-direction: row; align-items: center; justify-content: center; }
  .recibo-delivery { margin-right: -0.5rem; }
  .recibo-clik { margin-left: -0.5rem; }
}

/* ==============================================================
   COMPARACIÓN — clik vs. apps de domicilio vs. Fudo
   ============================================================== */
.comparacion { padding: 7rem 0 6rem; }

.comparacion-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparacion-tabla {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.comparacion-tabla th,
.comparacion-tabla td {
  padding: 0.85rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.comparacion-tabla thead th {
  font-family: var(--display);
  font-weight: 800;
  color: var(--texto);
  padding-bottom: 1rem;
}
.comparacion-tabla thead th span {
  display: block;
  font-family: var(--cuerpo);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--texto-tenue);
  margin-top: 2px;
}

.comparacion-tabla tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--texto);
  white-space: normal;
}

.comparacion-tabla tbody td { color: var(--texto-suave); }

/* Verde/rojo para escanear la tabla de un vistazo, sin tener que leer
   celda por celda -- es el argumento de venta más fuerte de la página. */
.comparacion-check { color: #16a34a; font-weight: 800; }
.comparacion-cruz  { color: #dc2626; font-weight: 800; }

.comparacion-col-clik {
  background: var(--fondo-calido);
  border-left: 2px solid var(--primario);
  border-right: 2px solid var(--primario);
  color: var(--texto) !important;
}
.comparacion-tabla thead .comparacion-col-clik {
  color: var(--primario) !important;
  border-top: 2px solid var(--primario);
  border-radius: 10px 10px 0 0;
}
.comparacion-tabla tbody tr:last-child .comparacion-col-clik {
  border-bottom: 2px solid var(--primario);
  border-radius: 0 0 10px 10px;
}

.comparacion-nota {
  margin-top: 1.5rem;
  font-size: 0.76rem;
  color: var(--texto-tenue);
  line-height: 1.6;
}
.comparacion-nota sup { font-weight: 700; }

/* ==============================================================
   PRECIO
   ============================================================== */
.precio {
  position: relative;
  padding: 7rem 0;
  background: var(--fondo);
  text-align: center;
  overflow: hidden;
}

.precio::before {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(37,99,235,0.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.precio-card {
  max-width: 380px;
  margin: 0 auto;
  border: 2px solid var(--oscuro);
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  box-shadow: var(--s-xl);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}

.precio-card:hover { transform: translateY(-5px); }

.precio-header {
  background: var(--oscuro);
  color: #fff;
  padding: 1.75rem 1.5rem;
}

.precio-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primario);
  margin-bottom: 0.5rem;
}

.precio-gratis {
  font-family: var(--display);
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 0.35rem;
}

.precio-gratis-sub {
  font-size: 0.82rem;
  color: var(--texto-tenue);
}

.precio-body { padding: 1.5rem; }

.precio-mensual {
  font-size: 0.95rem;
  color: var(--texto-suave);
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--borde);
}

.precio-mensual strong {
  font-family: var(--display);
  color: var(--texto);
  font-size: 1.5rem;
  font-weight: 800;
}

.precio-anual-nota {
  font-size: 0.82rem;
  color: var(--texto-tenue);
  margin: -1rem 0 1.25rem;
}

.precio-lista {
  list-style: none;
  margin-bottom: 1.5rem;
}

.precio-lista li {
  padding: 0.35rem 0;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.precio-lista li::before {
  content: '✓';
  color: var(--primario);
  font-weight: 900;
  flex-shrink: 0;
}

.precio-cta {
  display: block;
  background: var(--primario);
  color: #fff;
  padding: 0.9rem;
  border-radius: var(--radio);
  font-weight: 800;
  font-size: 0.95rem;
  text-align: center;
  transition: background 0.22s, transform 0.22s, box-shadow 0.22s;
  box-shadow: 0 4px 16px var(--primario-glow);
}

.precio-cta:hover {
  background: var(--primario-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.46);
}

.precio-nota-iva {
  margin-top: 1rem;
  font-size: 0.72rem;
  color: var(--texto-suave);
  text-align: center;
}

/* ==============================================================
   FAQ
   ============================================================== */
.faq {
  padding: 7rem 0;
  background: var(--fondo-suave);
}

.faq-lista {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.faq-item {
  background: var(--tarjeta);
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  overflow: hidden;
  transition: box-shadow 0.22s, border-color 0.22s;
}

.faq-item:hover { box-shadow: var(--s-md); }

.faq-item.abierto {
  border-color: rgba(37,99,235,0.28);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.06);
}

.faq-pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--cuerpo);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto);
  text-align: left;
  transition: color 0.2s;
}

.faq-item.abierto .faq-pregunta { color: var(--primario); }

/* Cruz animada */
.faq-icono {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  color: var(--texto-suave);
}

.faq-icono::before,
.faq-icono::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq-icono::before { width: 12px; height: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.faq-icono::after  { width: 2px; height: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.faq-item.abierto .faq-icono::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-item.abierto .faq-icono { color: var(--primario); }

/* Acordeón con max-height */
.faq-respuesta {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.abierto .faq-respuesta { max-height: 300px; }

.faq-respuesta p {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.88rem;
  color: var(--texto-suave);
  line-height: 1.72;
}

/* ==============================================================
   CTA FINAL
   ============================================================== */
.cta-final {
  position: relative;
  background: linear-gradient(140deg, #1e293b 0%, #0f172a 100%);
  color: #fff;
  text-align: center;
  padding: 8rem 1.25rem;
  overflow: hidden;
}

.cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.cta-final::after {
  content: '';
  position: absolute;
  top: -120px;
  right: -60px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(37,99,235,0.22) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cta-final-interior { position: relative; padding: 2.5rem 0; }

.cta-final-logo {
  width: 56px;
  height: 56px;
  color: var(--primario);
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 24px rgba(37,99,235,0.55));
}

.cta-final h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: 0.75rem;
}

.cta-final p {
  color: var(--texto-tenue);
  margin-bottom: 2rem;
  font-size: 1rem;
}

.cta-final-btn {
  display: inline-block;
  background: var(--primario);
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: var(--radio);
  font-weight: 800;
  font-size: 1.05rem;
  transition: background 0.22s, transform 0.22s, box-shadow 0.22s;
  box-shadow: 0 4px 22px rgba(37,99,235,0.42);
}

.cta-final-btn:hover {
  background: var(--primario-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(37,99,235,0.55);
}

.cta-final-compartir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem auto 0;
  width: fit-content;
  color: var(--texto-tenue);
  font-size: 0.85rem;
  font-weight: 600;
  transition: color 0.2s;
}
.cta-final-compartir svg { width: 18px; height: 18px; flex-shrink: 0; }
.cta-final-compartir:hover { color: #fff; }

/* ==============================================================
   FOOTER
   ============================================================== */
.footer {
  background: var(--oscuro-2);
  color: #94a3b8;
  padding: 1.75rem 1.25rem 0;
  font-size: 0.9rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.75rem;
}

.footer-marca {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.footer-logo {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
}

.footer-tagline {
  color: #64748b;
  line-height: 1.6;
  font-size: .88rem;
  max-width: 320px;
}

.footer-social {
  display: flex;
  gap: .6rem;
  margin-top: .25rem;
}

.footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
  transition: background .2s, color .2s, transform .2s;
}
.footer-social-btn svg { width: 17px; height: 17px; }
.footer-social-btn:hover {
  background: var(--primario);
  color: #fff;
  transform: translateY(-2px);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.footer-col h3 {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #fff;
  margin-bottom: .3rem;
}

.footer-col a {
  color: #94a3b8;
  font-size: .88rem;
  transition: color .15s;
  width: fit-content;
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-items: center;
  text-align: center;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: .8rem;
  color: #64748b;
}

.footer-ubicacion {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-ubicacion:hover { color: var(--primario); }

.mapa-embed {
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
  margin-bottom: 1rem;
}
.mapa-embed iframe { display: block; }

/* ---- Capturas reales embebidas en páginas de contenido (sobre-nosotros.html) ---- */
.capturas-sobre-nosotros {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0 1.75rem;
}
.capturas-sobre-nosotros figure {
  background: #1e293b;
  border-radius: 12px;
  padding: 7px 7px 0;
  box-shadow: var(--s-md);
  overflow: hidden;
}
.capturas-sobre-nosotros img {
  width: 100%;
  height: auto;
  border-radius: 6px 6px 0 0;
  display: block;
}

/* Imagen dentro del cuerpo de un post del blog (/blog/*.html) */
.articulo-imagen {
  margin: 2rem 0;
}
.articulo-imagen img {
  width: 100%;
  height: auto;
  border-radius: var(--radio-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.articulo-imagen figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--texto-tenue);
  text-align: center;
}
.capturas-sobre-nosotros figcaption {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  padding: 0.6rem 0.5rem;
}
@media (min-width: 640px) {
  .capturas-sobre-nosotros { grid-template-columns: 1fr 1fr; }
}

/* ==============================================================
   PÁGINAS DE CONTENIDO (legal, sobre nosotros, blog)
   ============================================================== */
.pagina-header {
  padding: 3rem 1.25rem 2rem;
  text-align: center;
  background: var(--fondo-suave);
  border-bottom: 1px solid var(--borde-suave);
}

.pagina-header h1 {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: .5rem;
}

.pagina-header p { color: var(--texto-suave); font-size: .95rem; }

.pagina-contenido {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  line-height: 1.75;
}

/* ---- Foto real de la ciudad (páginas de ciudad) ---- */
.ciudad-hero-foto {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 0;
}
.ciudad-hero-foto img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: var(--radio-lg);
  display: block;
  box-shadow: var(--s-md);
}
.ciudad-hero-foto figcaption {
  text-align: center;
  font-size: 0.75rem;
  color: var(--texto-tenue);
  margin-top: 0.5rem;
}

/* ---- Ilustración de portada de los posts del blog (temas abstractos,
   sin foto real posible) -- mismo lenguaje visual que .feature-icono de
   la landing (círculo naranja/teal), escalado a banner de portada. ---- */
/* El SVG del logo solo tiene viewBox (sin width/height) -- dentro de un
   contenedor flex eso colapsa a 0x0 en vez de al tamaño intrínseco por
   default de 300x150 (pasó de verdad: quedaba invisible en toda página
   con .logo, dejando solo el texto "clik" sin ícono de marca). */
.logo-icono { width: 26px; height: 26px; flex-shrink: 0; color: var(--primario); }

/* Foto grande al inicio del artículo — misma foto que su tarjeta en
   blog.html (bucket temático, ver "Portadas" en CLAUDE.md), para que
   entrar a un post no pierda continuidad visual con lo que se venía viendo. */
.blog-hero-foto { margin-bottom: 2rem; border-radius: var(--radio-lg); overflow: hidden; }
.blog-hero-foto img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }

.pagina-contenido h2 {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 800;
  margin: 2.2rem 0 .75rem;
  letter-spacing: -0.2px;
}

.pagina-contenido h2:first-child { margin-top: 0; }

.pagina-contenido p { margin-bottom: 1rem; color: var(--texto); }

.pagina-contenido ul { margin: 0 0 1rem 1.25rem; }

.pagina-contenido li { margin-bottom: .4rem; }

.pagina-contenido strong { color: var(--texto); }

.pagina-contenido a { color: var(--primario); text-decoration: underline; text-underline-offset: 2px; }
.pagina-contenido .hero-cta { color: #fff; text-decoration: none; }

/* ---- Índice de guías tipo docs (docs.html) ---- */
.docs-indice {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--fondo-suave);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
}
.docs-indice strong {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texto-suave);
  margin-bottom: 0.4rem;
}
.docs-indice a {
  color: var(--texto);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
}
.docs-indice a:hover { color: var(--primario); }

.aviso-legal {
  background: var(--fondo-calido);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  font-size: .85rem;
  color: var(--texto-suave);
  margin-bottom: 2rem;
}

.pagina-actualizado {
  font-size: .82rem;
  color: var(--texto-tenue);
  margin-bottom: 2rem;
}

/* Página vacía (ej. blog aún sin publicar) */
.pagina-vacia {
  max-width: 480px;
  margin: 0 auto;
  padding: 5rem 1.25rem 6rem;
  text-align: center;
}

.pagina-vacia-icono {
  font-size: 2.4rem;
  margin-bottom: 1rem;
}

.pagina-vacia h1 {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: .6rem;
  letter-spacing: -0.4px;
}

.pagina-vacia p { color: var(--texto-suave); margin-bottom: 1.75rem; }

/* Equipo — sobre nosotros */
.equipo-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--fondo-suave);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  padding: 1.25rem;
  margin: 1.5rem 0 2rem;
}

.equipo-avatar {
  width: 108px;
  height: 108px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primario), #dc2626);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.8rem;
  flex-shrink: 0;
  overflow: hidden;
}
.equipo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

.equipo-card strong { display: block; font-size: 1.15rem; color: var(--texto); }
.equipo-card span { font-size: .95rem; color: var(--texto-suave); }

/* ==============================================================
   PÁGINAS DE CIUDAD — hero con foto + directorio real de restaurantes
   ============================================================== */
.ciudad-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}
.ciudad-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ciudad-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15,23,42,0.5), rgba(15,23,42,0.78));
}
.ciudad-hero-interior { position: relative; z-index: 2; padding: 3rem 1.25rem; max-width: 720px; }
.ciudad-hero-interior h1 {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 0.6rem;
}
.ciudad-hero-interior p { font-size: 1rem; opacity: 0.94; margin-bottom: 1.1rem; }
.ciudad-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 0.85rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

.ciudad-migas-vuelta { max-width: var(--ancho-max); margin: 0 auto; padding: 1rem 1.25rem 0; }
.ciudad-migas-vuelta a { color: var(--texto-suave); font-size: 0.85rem; text-decoration: none; }
.ciudad-migas-vuelta a:hover { color: var(--primario); }

.directorio-seccion { max-width: var(--ancho-max); margin: 0 auto; padding: 2rem 1.25rem 1rem; }
.directorio-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
  margin-bottom: 1rem;
}
.directorio-label svg { width: 15px; height: 15px; }

#directorio-restaurantes { margin-bottom: 1rem; }

.directorio-vacio-bloque {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--fondo-suave);
  border: 1px dashed var(--borde);
  border-radius: var(--radio-lg);
}
.directorio-vacio-bloque strong { display: block; color: var(--texto); font-size: 1.05rem; margin-bottom: 0.4rem; }
.directorio-vacio-bloque p { color: var(--texto-suave); margin: 0 auto 1.25rem; max-width: 440px; }

.directorio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .directorio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .directorio-grid { grid-template-columns: repeat(4, 1fr); } }

.directorio-tarjeta {
  display: block;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.directorio-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(15,23,42,0.22); }

.directorio-tarjeta-portada { position: relative; aspect-ratio: 4/3; background: var(--fondo-suave); }
.directorio-tarjeta-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.directorio-tarjeta-inicial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
}
.directorio-chip-estado {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.directorio-chip-estado--abierto { background: rgba(22,163,74,0.92); color: #fff; }
.directorio-chip-estado--cerrado { background: rgba(100,116,139,0.88); color: #fff; }

.directorio-tarjeta-cuerpo { padding: 1rem 1.1rem 1.15rem; }
.directorio-tarjeta-cuerpo h3 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--texto);
  margin-bottom: 0.45rem;
}
.directorio-tarjeta-fila {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--texto-suave);
  margin-bottom: 0.35rem;
  line-height: 1.4;
}
.directorio-tarjeta-fila svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--texto-tenue); }
.directorio-tarjeta-valoracion { font-size: 0.82rem; color: #d97706; font-weight: 700; margin-bottom: 0.35rem; }
.directorio-tarjeta-desc {
  font-size: 0.82rem;
  color: var(--texto-suave);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.directorio-tarjeta-redes { display: flex; gap: 0.4rem; margin: 0.5rem 0 0.15rem; }
.directorio-tarjeta-red-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fondo-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-suave);
  transition: background .15s, color .15s;
}
.directorio-tarjeta-red-btn:hover { background: var(--borde-suave); color: var(--primario); }
.directorio-tarjeta-red-btn svg { width: 16px; height: 16px; }
.directorio-tarjeta-boton {
  display: block;
  text-align: center;
  margin-top: 0.75rem;
  background: var(--oscuro-2);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.55rem;
  border-radius: var(--radio);
}

/* ---- Índice de ciudades (/ciudades.html) — tarjetas dinámicas ---- */
.ciudades-indice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 640px) { .ciudades-indice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ciudades-indice-grid { grid-template-columns: repeat(3, 1fr); } }

/* Una sola ciudad — se centra y queda un poco más grande que una tarjeta
   normal del grid, en vez de pegada a la izquierda con espacio vacío al
   lado. Se cae sola en cuanto haya 2+ ciudades (directorio-ciudades.js
   solo la aplica cuando ciudades.length === 1). */
.ciudades-indice-grid--unica {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}
@media (min-width: 640px) { .ciudades-indice-grid--unica { grid-template-columns: minmax(0, 420px); } }
@media (min-width: 900px) { .ciudades-indice-grid--unica { grid-template-columns: minmax(0, 460px); } }

/* ---- Quién está detrás (index.html) ---- */
.quien-detras { padding: 6rem 1.25rem; }
.quien-detras .contenedor { max-width: 560px; text-align: center; }
.quien-detras .equipo-card { text-align: left; margin: 1.5rem 0; }
.quien-detras-texto {
  color: var(--texto-suave);
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.quien-detras-link {
  font-weight: 700;
  color: var(--primario);
}
.quien-detras-link:hover { color: var(--primario-hover); }

/* ---- Misión y visión ---- */
.mision-vision { padding: 6rem 1.25rem; background: var(--fondo-suave); }
.mision-vision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 700px) {
  .mision-vision-grid { grid-template-columns: 1fr 1fr; }
}
.mision-vision-card {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.75rem;
}
.mision-vision-card h3 {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primario);
  margin-bottom: 0.6rem;
}
.mision-vision-card p {
  color: var(--texto-suave);
  line-height: 1.7;
  font-size: 0.95rem;
}

/* ==============================================================
   KEYFRAMES
   ============================================================== */
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* ==============================================================
   RESPONSIVE — 640px+
   ============================================================== */
@media (min-width: 640px) {
  .hero-titulo        { font-size: 3.2rem; }
  .seccion-titulo     { font-size: 2rem; }
  .diferencial-titulo { font-size: 2.2rem; }
  .cta-final h2       { font-size: 2.2rem; }
  .metricas-grid      { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .metrica-numero     { font-size: 2.6rem; }
}

/* ==============================================================
   RESPONSIVE — 768px+
   ============================================================== */
@media (min-width: 768px) {
  .hero { padding: 6rem 2rem 7rem; }

  .mockup-contenedor { flex-shrink: 0; }
  .telefono          { width: 240px; }

  /* Pasos horizontales */
  .pasos {
    flex-direction: row;
    align-items: flex-start;
  }

  .paso {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 0 0.75rem;
  }

  .paso-numero       { margin-bottom: 1rem; }
  .paso-icono        { margin: 0 auto 0.6rem; }
  .paso-contenido h3 { padding-top: 0; }

  .paso-separador {
    display: flex;
    align-items: flex-start;
    padding-top: 23px;
    flex-shrink: 0;
  }

  .paso-separador::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--borde);
    border-radius: 1px;
  }

  /* Footer en columnas */
  .footer-top {
    grid-template-columns: 1.3fr repeat(4, 1fr);
    gap: 1.75rem;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ==============================================================
   RESPONSIVE — 1024px+
   ============================================================== */
@media (min-width: 1024px) {
  .hero-titulo        { font-size: 4.2rem; }
  .diferencial-titulo { font-size: 2.8rem; }
  .cta-final h2       { font-size: 2.5rem; }
}

/* Accesibilidad: sin animación continua para quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .telefono-ext {
    animation: none !important;
  }
}

/* ==============================================================
   DIFERENCIAL — link a la calculadora de comisión
   ============================================================== */
.diferencial-calc-link {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--primario);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}
.diferencial-calc-link:hover { text-decoration: underline; }

/* ==============================================================
   CALCULADORA DE COMISIÓN (calculadora-comision.html)
   ============================================================== */
.calc-main {
  padding: 3rem 1.25rem 4rem;
  max-width: 720px;
  margin: 0 auto;
}

.calc-card {
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.calc-label {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--texto);
  margin-bottom: 0.5rem;
}

.calc-label--slider {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}

.calc-comision-valor {
  font-family: var(--display);
  font-weight: 900;
  color: var(--primario);
  font-size: 1.1rem;
}

.calc-input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 1.3rem;
  font-weight: 800;
  font-family: var(--display);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  margin-bottom: 0.75rem;
}
.calc-input:focus { outline: none; border-color: var(--primario); }

.calc-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calc-preset {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--fondo);
  color: var(--texto-suave);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.calc-preset:hover { border-color: var(--primario); color: var(--primario); }

.calc-slider {
  width: 100%;
  accent-color: var(--primario);
  margin-bottom: 0.5rem;
}

.calc-nota-slider {
  font-size: 0.8rem;
  color: var(--texto-tenue);
  line-height: 1.5;
  margin: 0;
}

.calc-resultados {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.calc-resultado {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.calc-resultado-label {
  font-size: 0.8rem;
  color: var(--texto-suave);
  font-weight: 600;
}

.calc-resultado-valor {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--texto);
  letter-spacing: -0.5px;
}

.calc-resultado-sub {
  font-size: 0.78rem;
  color: var(--texto-tenue);
}

.calc-resultado-sub strong { color: var(--texto-suave); }

/* Barra comparativa -- refuerza visualmente la diferencia de los números
   de arriba, sin reemplazarlos. Ancho puesto por JS (calculadora-embed.js),
   la transición del ancho es lo que hace que "crezca". */
.calc-barra-track {
  height: 6px;
  background: var(--borde);
  border-radius: 999px;
  margin-top: 0.6rem;
  overflow: hidden;
}
.calc-barra {
  height: 100%;
  border-radius: 999px;
  width: 0%;
  transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
}
.calc-barra--app  { background: var(--texto-tenue); }
.calc-barra--clik { background: var(--primario); }

.calc-resultado--clik .calc-resultado-valor { color: var(--primario); }

.calc-resultado--ahorro {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.3);
}
.calc-resultado--ahorro .calc-resultado-valor { color: #16a34a; }
.calc-resultado--ahorro.calc-resultado--negativo {
  background: rgba(37,99,235,0.08);
  border-color: rgba(37,99,235,0.3);
}
.calc-resultado--ahorro.calc-resultado--negativo .calc-resultado-valor { color: var(--primario); }

/* "¿Y con una cuota fija?" — tarjeta de referencia, apagada a propósito
   para que no compita visualmente con el resultado de ahorro. */
.calc-resultado--fijo {
  background: transparent;
  border-style: dashed;
}
.calc-resultado--fijo .calc-resultado-valor { color: var(--texto-suave); }

.calc-cta {
  display: block;
  text-align: center;
}

.calc-disclaimer {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
  font-size: 0.82rem;
  color: var(--texto-tenue);
  line-height: 1.7;
}
.calc-disclaimer a { color: var(--primario); text-decoration: underline; }

@media (min-width: 640px) {
  .calc-resultados { flex-direction: row; }
  .calc-resultado { flex: 1; }
}

/* ---- Versión embebida en la landing (index.html#calculadora) ----
   Reusa las clases .calc-* de arriba (mismo diseño que la página aparte),
   solo agrega el grid de dos columnas propio de este layout embebido. */
.calculadora-embed {
  padding: 6.5rem 0 7rem;
  background: var(--fondo-suave);
}

.calc-embed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  max-width: 900px;
}

.calc-embed-grid .calc-card { margin-bottom: 0; }

.calc-embed-resultados-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.calc-embed-resultados-col .calc-resultados {
  flex-direction: column;
  margin-bottom: 0;
}

.calc-embed-cta {
  text-align: center;
}

@media (min-width: 900px) {
  .calc-embed-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* ==============================================================
   BLOG — índice y artículos
   ============================================================== */
.blog-grid {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.blog-card {
  display: block;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.5rem;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.blog-card:hover { border-color: var(--primario); transform: translateY(-2px); }

.blog-card-fecha {
  font-size: 0.78rem;
  color: var(--texto-tenue);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.blog-card-titulo {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--texto);
  margin: 0.4rem 0 0.5rem;
  letter-spacing: -0.3px;
}

.blog-card-resumen {
  font-size: 0.9rem;
  color: var(--texto-suave);
  line-height: 1.6;
  margin: 0;
}

.articulo-volver {
  display: inline-block;
  margin: 2rem auto 0;
  max-width: 720px;
  padding: 0 1.25rem;
  width: 100%;
  box-sizing: border-box;
  color: var(--texto-suave);
  font-size: 0.85rem;
  text-decoration: none;
}
.articulo-volver:hover { color: var(--primario); }

.articulo-fecha {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--texto-tenue);
  margin-top: 0.5rem;
}

.articulo-cta {
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.25);
  border-radius: var(--radio-lg);
  padding: 1.5rem;
  margin: 2rem 0;
  text-align: center;
}
.articulo-cta p { margin-bottom: 1rem; color: var(--texto); font-weight: 600; }

.articulo-relacionados {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.articulo-relacionados h3 {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: var(--texto);
}
.articulo-relacionados ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}
.articulo-relacionados li a {
  display: block;
  padding: 0.75rem 1rem;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.articulo-relacionados li a:hover { border-color: var(--primario); color: var(--primario); }

@media (min-width: 700px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Byline autor (artículo individual) ---- */
.articulo-autor {
  max-width: 720px;
  margin: 2rem auto 0;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.articulo-autor img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.articulo-autor strong { display: block; font-size: 0.9rem; color: var(--texto); }
.articulo-autor span { font-size: 0.8rem; color: var(--texto-suave); }

/* ---- Comentarios (artículo individual) ----
   Tarjeta propia (antes: texto + botón de Google flotando sueltos, pegados
   al footer sin ninguna separación visual) — mismo lenguaje de tarjeta que
   .articulo-cta/.articulo-relacionados de arriba (fondo --tarjeta, borde,
   radio-lg), para que se sienta como un módulo propio del artículo. */
.blog-comentarios {
  max-width: 720px;
  margin: 3rem auto 2rem;
  padding: 1.75rem;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--s-md);
  box-sizing: border-box;
}
.blog-comentarios h3 {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--texto);
  margin: 0 0 1.25rem;
}
.blog-comentarios-lista { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.75rem; }
.blog-comentarios-vacio {
  color: var(--texto-suave);
  font-size: 0.88rem;
  text-align: center;
  padding: 1.4rem 1rem;
  background: var(--fondo-suave);
  border-radius: var(--radio);
}
.blog-comentario { display: flex; gap: 0.85rem; }
.blog-comentario-foto { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.blog-comentario-foto--vacia { background: linear-gradient(135deg, var(--primario), var(--acento2)); opacity: 0.4; }
.blog-comentario-cuerpo {
  flex: 1;
  min-width: 0;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--borde-suave);
}
.blog-comentario:last-child .blog-comentario-cuerpo { border-bottom: none; padding-bottom: 0; }
.blog-comentario-cabeza { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; flex-wrap: wrap; }
.blog-comentario-cabeza strong { font-size: 0.9rem; color: var(--texto); }
.blog-comentario-cabeza span { font-size: 0.76rem; color: var(--texto-tenue); }
.blog-comentario-cuerpo p { font-size: 0.92rem; color: var(--texto); line-height: 1.55; margin: 0; white-space: pre-wrap; }

#blog-comentarios-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.5rem 1rem;
  background: var(--fondo-suave);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  text-align: center;
}
#blog-comentarios-login p { font-size: 0.9rem; color: var(--texto-suave); margin: 0; }
/* El botón real lo renderiza el SDK de Google (iframe, ver blog-comentarios.js
   — theme "filled_blue"/shape "pill") — acá solo se centra y se limita el ancho. */
#blog-comentarios-google-btn { display: flex; justify-content: center; }

.blog-comentarios-yo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.86rem;
  color: var(--texto-suave);
  background: var(--fondo-suave);
  border-radius: var(--radio);
}
.blog-comentarios-yo img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.blog-comentarios-yo strong { color: var(--texto); }

#blog-comentarios-texto {
  width: 100%;
  min-height: 90px;
  padding: 0.85rem 1rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: var(--cuerpo);
  font-size: 0.9rem;
  color: var(--texto);
  resize: vertical;
  margin-bottom: 0.75rem;
  box-sizing: border-box;
}
#blog-comentarios-texto::placeholder { color: var(--texto-tenue); }
#blog-comentarios-texto:focus { outline: 2px solid var(--primario); outline-offset: 1px; border-color: var(--primario); }

.btn-comentar {
  padding: 0.65rem 1.4rem;
  background: var(--primario);
  color: #fff;
  border: none;
  border-radius: var(--radio);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.btn-comentar:hover { background: var(--primario-hover); transform: translateY(-1px); }
.btn-comentar:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.blog-comentarios-error { color: #f87171; font-size: 0.84rem; margin-top: 0.6rem; }

/* ==============================================================
   BLOG — rediseño editorial (hero, destacado, filas por categoría)
   ============================================================== */

/* ---- Hero editorial — mismo patrón de cubiertos que .hero-home, versión
   compacta (el blog no necesita tanto aire como la home). ---- */
.hero-home--blog { padding: 3.25rem 1.25rem 2.75rem; }
.blog-hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primario);
  margin-bottom: 0.75rem;
}

.blog-secciones { max-width: 1160px; margin: 0 auto; padding: 3rem 1.25rem 4rem; }

/* ---- Artículo destacado ---- */
.blog-destacado {
  display: block;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 3rem;
  transition: border-color .15s, transform .15s;
}
.blog-destacado:hover { border-color: var(--primario); transform: translateY(-2px); }
.blog-destacado-portada { position: relative; }
.blog-destacado-portada img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.blog-destacado-cuerpo { padding: 1.75rem 1.5rem; }
.blog-destacado-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primario);
  margin-bottom: 0.6rem;
}
.blog-destacado-cuerpo h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--texto);
  margin-bottom: 0.6rem;
}
.blog-destacado-cuerpo p { color: var(--texto-suave); line-height: 1.6; margin-bottom: 1rem; }
.blog-destacado-cta { display: inline-block; color: var(--primario); font-weight: 700; font-size: 0.92rem; margin-bottom: 1.25rem; }

@media (min-width: 860px) {
  .blog-destacado { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; }
  .blog-destacado-cuerpo { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
  .blog-destacado-cuerpo h2 { font-size: 1.9rem; }
}

/* ---- Tiempo de lectura, insignia sobre la portada ---- */
.blog-tarjeta-tiempo {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

/* ---- Filas por categoría ---- */
.blog-fila { margin-bottom: 3rem; }
.blog-fila-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  gap: 1rem;
}
.blog-fila-header h2 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--texto);
  letter-spacing: -0.3px;
}
.blog-fila-header a { color: var(--primario); font-weight: 700; font-size: 0.88rem; white-space: nowrap; }
.blog-fila-header a:hover { text-decoration: underline; }

.blog-fila-grid, .blog-categoria-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .blog-fila-grid, .blog-categoria-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .blog-fila-grid, .blog-categoria-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Tarjeta de artículo ---- */
.blog-tarjeta {
  display: block;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.blog-tarjeta:hover { border-color: var(--primario); transform: translateY(-2px); }
.blog-tarjeta-portada { position: relative; }
.blog-tarjeta-portada img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.blog-tarjeta-cuerpo { padding: 1.1rem 1.1rem 1.25rem; }
.blog-tarjeta-cuerpo h3 {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.32;
  color: var(--texto);
  letter-spacing: -0.2px;
  margin-bottom: 0.4rem;
  word-break: normal;
  overflow-wrap: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(1.02rem * 1.32 * 3);
}
.blog-tarjeta-cuerpo p {
  font-size: 0.86rem;
  color: var(--texto-suave);
  line-height: 1.55;
  margin-bottom: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-tarjeta-autor { display: flex; align-items: center; gap: 0.5rem; }
.blog-tarjeta-autor img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.blog-tarjeta-autor span { font-size: 0.76rem; color: var(--texto-tenue); font-weight: 600; }

/* ---- Página de categoría ---- */
.blog-categoria-header {
  padding: 2.5rem 1.25rem 2rem;
  text-align: center;
}
.blog-categoria-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  margin-bottom: 1rem;
}
.blog-categoria-badge svg { width: 26px; height: 26px; }
.blog-categoria-header h1 {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 0.5rem;
}
.blog-categoria-header p { color: var(--texto-suave); }
.blog-categoria-contenido { max-width: 1160px; margin: 0 auto; padding: 1rem 1.25rem 4rem; }

/* ==============================================================
   Utilidad compartida (no existía en landing.css, sí en el resto del sitio)
   ============================================================== */
.oculto { display: none !important; }

/* ==============================================================
   Reseñas reales de Google Maps (sobre-nosotros.html)
   ============================================================== */
.resenas-google { margin: 1rem 0 2rem; }
.resenas-google-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--texto);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.resenas-google-link:hover {
  border-color: var(--primario);
  background: var(--fondo-suave);
}

/* ==============================================================
   Formulario de contacto (sobre-nosotros.html)
   ============================================================== */
.form-contacto {
  margin-top: 1.5rem;
  max-width: 560px;
}
.form-contacto-fila {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .form-contacto-fila { flex-direction: row; }
  .form-contacto-fila .campo-form { flex: 1; }
}
.campo-form { margin-bottom: 1rem; }
.campo-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 6px;
}
.campo-form input,
.campo-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: var(--cuerpo);
  font-size: 0.92rem;
  color: var(--texto);
  background: var(--fondo);
  resize: vertical;
}
.campo-form input:focus,
.campo-form textarea:focus {
  outline: none;
  border-color: var(--primario);
}
.form-contacto-feedback {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: #059669;
  font-weight: 600;
}
.form-contacto-feedback.form-contacto-error { color: #dc2626; }

.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--texto);
  margin-bottom: 1rem;
  cursor: pointer;
}
.campo-checkbox input { margin-top: 3px; flex-shrink: 0; }
.form-contacto button.hero-cta { border: none; cursor: pointer; }
.form-contacto button.hero-cta:disabled { opacity: .7; cursor: default; }

/* ==============================================================
   INDEX 2.0 (julio 2026) — rediseño minimalista de la home:
   header / hero / reseñas / footer + barra de pestañas en celular.
   Clases nuevas, exclusivas de index.html — no tocan .header/.nav/
   .footer que siguen usando las demás páginas del sitio tal cual.
   Reutiliza tokens de color (--primario, --texto, etc.) y .hero-cta
   /.contenedor ya existentes, sin colores nuevos.
   ============================================================== */

/* ---- Header minimalista ---- */
.nav-home {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.25rem;
}
.nav-home-der {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav-home-links {
  display: none;
  align-items: center;
  gap: 1.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.nav-home-links a:hover { color: var(--texto); }
.nav-home-cta {
  background: var(--primario);
  color: #fff !important;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radio);
  font-weight: 800;
  font-size: 0.88rem;
  transition: background 0.2s, transform 0.2s;
}
.nav-home-cta:hover { background: var(--primario-hover); transform: translateY(-1px); }

/* Variante liviana para "Registrarse" -- "Ingresar" se queda con el botón
   sólido de siempre, este es el secundario para no competir visualmente.
   Transición propia con las 3 propiedades que de verdad cambian: sin esto
   hereda "transition: background 0.2s, transform 0.2s" de .nav-home-cta,
   que no incluye border-color -- el borde saltaba de golpe a mitad del
   fondo todavía animándose, se sentía como una animación rota/floja. */
.nav-home-cta--outline {
  background: transparent;
  color: var(--texto) !important;
  border: 1.5px solid var(--borde);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.nav-home-cta--outline:hover { background: var(--fondo-suave); border-color: var(--primario); transform: translateY(-1px); }
@media (min-width: 860px) {
  .nav-home-links { display: flex; }
}
@media (max-width: 859px) {
  /* Sin los links de texto (ocultos acá), solo quedan los 2 botones --
     gap más chico para que "Registrarse" + "Ingresar" quepan junto al
     logo en una fila sin apretar demasiado en celulares angostos. */
  .nav-home-der { gap: 0.6rem; }
  .nav-home-cta { padding: 0.5rem 0.85rem; font-size: 0.82rem; }
}

/* ---- Hero enorme y centrado ---- */
.hero-home {
  position: relative;
  background: var(--fondo-calido);
  padding: 5.5rem 1.25rem 5rem;
  text-align: center;
  overflow: hidden;
}
/* Patrón de fondo — iconos de comida (tenedor/cuchillo/taza) en escala de
   grises, tejido como SVG repetido. Va en un ::before (no en el DOM real)
   para que sea imposible de seleccionar o clickear, e invisible a lectores
   de pantalla sin necesitar aria-hidden en ningún elemento. */
.hero-home::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 8v14M20 8v14M26 8v14M14 22h12M20 22v40'/%3E%3Cpath d='M54 8c6 2 6 12 0 14v40'/%3E%3Ccircle cx='40' cy='62' r='9'/%3E%3Cpath d='M49 58h5a5 5 0 0 1 0 10h-5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 84px 84px;
}
.hero-home-interior {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.hero-home-titulo {
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 1.2rem;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Una sola palabra rota dentro del título, el resto queda fijo — ver
   frontend/js/hero-titulos.js. Misma tipografía que el resto (Inter, sin
   mezclar fuentes — se probó y se descartó, ver "Ya resuelto" en CLAUDE.md).
   La jerarquía sale del peso y el color de acento, no de cambiar de letra:
   un poco más de peso que el resto del titular para que resalte sin
   romper la consistencia tipográfica. Ancho mínimo para que el fundido no
   salte de más entre palabras de largo distinto. */
.hero-palabra-rotativa {
  display: inline-block;
  min-width: 2.6ch;
  font-weight: 600;
  color: var(--primario);
  transition: opacity .3s ease, transform .3s ease;
}
.hero-palabra-rotativa--fade {
  opacity: 0;
  transform: translateY(6px);
}
.hero-home-sub {
  font-size: 1.1rem;
  color: var(--texto-suave);
  line-height: 1.7;
  margin: 0 auto 2.2rem;
  max-width: 540px;
}
/* ---- Hero en dos columnas: texto | video (home) ----
   Texto sobre el fondo normal del sitio, sin ninguna capa encima (se probó
   con video de fondo + capa blanca translúcida y se descartó dos veces: la
   capa lavaba el video, y quitarla sin separar texto/video rompía la
   legibilidad). Ahora cada uno tiene su propio espacio, así que el texto
   respeta el tema del sitio (var(--texto) normal) y el video no necesita
   ninguna capa. Ver frontend/js/hero-video.js: decide si carga el <video>
   según pantalla/peso del archivo/prefers-reduced-motion — el poster es la
   imagen de respaldo en cualquier caso. */
.hero-home--video {
  text-align: left;
  padding: 3rem 1.25rem;
}
.hero-home--video::before {
  display: none; /* el patrón de cubiertos en gris no aporta nada acá */
}
.hero-home-grid {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.hero-home--video .hero-home-interior {
  max-width: none;
  margin: 0;
  text-align: left;
}
.hero-home--video .hero-home-titulo {
  font-size: clamp(2.375rem, 4.5vw, 3.75rem);
  text-align: left;
}
.hero-home--video .hero-home-sub {
  text-align: left;
  margin: 0 0 2.2rem;
  max-width: 480px;
}
.hero-home-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  border: 1px solid var(--borde);
  overflow: hidden;
  background: #cbd5e1; /* fallback fijo mientras carga el poster, no depende del tema */
}
.hero-home-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
@media (min-width: 900px) {
  .hero-home--video { padding: 4.5rem 1.25rem; }
  .hero-home-grid {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }
  .hero-home--video .hero-home-interior { flex: 0 0 45%; }
  .hero-home-media { flex: 0 0 55%; }
}

/* ---- Reseñas ---- */
.resenas-home { padding: 4rem 0 4.5rem; }
.resenas-home-eyebrow {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
  margin-bottom: 1.75rem;
}
.resenas-home-grid {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 1.75rem;
}
@media (min-width: 720px) {
  .resenas-home-grid { grid-template-columns: repeat(3, 1fr); }
}
.resenas-home-link {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primario);
}
.resenas-home-link:hover { text-decoration: underline; }

/* ---- Footer corto y centrado ---- */
.footer-home-interior {
  padding: 0 1.25rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.footer-home-copy { font-size: 0.8rem; color: #64748b; }

/* ---- Barra de pestañas fija — solo celular (≤700px), estilo app nativa ---- */
.tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: rgba(11,17,32,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 700px) {
  .tabbar { display: flex; }
  /* Deja el espacio de la barra libre al final de la página, y sube el
     botón flotante de WhatsApp para que no se encimen. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .whatsapp-flotante { bottom: max(4.6rem, calc(4.6rem + env(safe-area-inset-bottom))) !important; }
}
.tabbar-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.5rem 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--texto-tenue);
}
.tabbar-item svg { width: 21px; height: 21px; }

/* ==============================================================
   DOCS — documentación real (docs.html + /docs/*.html)
   Layout de 3 columnas: menú lateral | contenido | índice de la página.
   ============================================================== */

/* ---- Píldora "DOCS" junto al logo ---- */
.docs-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.docs-pill:hover { border-color: var(--primario); color: var(--primario); }

/* ---- Layout de 3 columnas ---- */
.docs-layout {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
@media (min-width: 1100px) {
  .docs-layout {
    grid-template-columns: 230px minmax(0, 720px) 200px;
    gap: 2.5rem;
    align-items: start;
    padding: 0 2rem;
  }
}

/* ---- Menú lateral (escritorio) ---- */
.docs-sidebar-desktop {
  display: none;
}
@media (min-width: 1100px) {
  .docs-sidebar-desktop {
    display: block;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding: 2rem 0 2rem;
  }
}
.docs-buscador-wrap { position: relative; margin-bottom: 1.25rem; }
.docs-buscador-wrap kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--cuerpo);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--texto-tenue);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: 1px 6px;
  pointer-events: none;
}
.docs-buscador-wrap input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--fondo-suave);
  color: var(--texto);
  font-size: 0.86rem;
}
.docs-buscador-wrap input:focus { outline: 2px solid var(--primario); outline-offset: 1px; }

.docs-nav-grupo { margin-bottom: 1.5rem; }
.docs-nav-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
  margin-bottom: 0.6rem;
}
.docs-nav-grupo-titulo svg { width: 15px; height: 15px; flex-shrink: 0; }
.docs-nav-lista { list-style: none; display: flex; flex-direction: column; gap: 0.15rem; }
.docs-nav-lista a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.docs-nav-lista a:hover { background: var(--fondo-suave); color: var(--texto); }
.docs-nav-lista a.activo {
  background: var(--fondo-suave);
  color: var(--primario);
  border-left-color: var(--primario);
}
.docs-nav-grupo.oculto, .docs-nav-lista li.oculto { display: none; }

/* ---- Menú lateral (celular) — desplegable arriba del contenido ---- */
.docs-sidebar-movil { display: block; margin: 1.25rem auto 0; max-width: 760px; padding: 0 1.25rem; }
@media (min-width: 1100px) { .docs-sidebar-movil { display: none; } }
.docs-sidebar-movil summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-suave);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--texto);
}
.docs-sidebar-movil summary::-webkit-details-marker { display: none; }
.docs-sidebar-movil summary::after { content: '▾'; color: var(--texto-tenue); }
.docs-sidebar-movil[open] summary::after { content: '▴'; }
.docs-sidebar-movil-panel {
  border: 1px solid var(--borde);
  border-top: none;
  border-radius: 0 0 var(--radio) var(--radio);
  padding: 1rem;
}

/* ---- Contenido central ---- */
.docs-main { padding: 2rem 1.25rem 4rem; max-width: 760px; margin: 0 auto; }
@media (min-width: 1100px) { .docs-main { padding: 2rem 0 4rem; margin: 0; } }

.docs-migas { font-size: 0.82rem; color: var(--texto-tenue); margin-bottom: 1.25rem; }
.docs-migas a { color: var(--texto-tenue); }
.docs-migas a:hover { color: var(--primario); }

.docs-articulo h1 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 0.5rem;
}
.docs-articulo .docs-dek { color: var(--texto-suave); font-size: 1.02rem; margin-bottom: 2rem; }
.docs-articulo h2 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin: 2.4rem 0 1rem;
  scroll-margin-top: 5.5rem;
}
.docs-articulo h2:first-of-type { margin-top: 0; }
.docs-articulo p { color: var(--texto); line-height: 1.75; margin-bottom: 1rem; }
.docs-articulo ul, .docs-articulo ol { margin: 0 0 1.1rem 1.3rem; color: var(--texto); line-height: 1.7; }
.docs-articulo li { margin-bottom: 0.4rem; }
.docs-articulo strong { color: var(--texto); }
.docs-articulo code {
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: 0.1rem 0.4rem;
  font-size: 0.86em;
}

/* ---- Pasos numerados ---- */
.docs-pasos { list-style: none; counter-reset: paso; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.docs-pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 2.6rem;
  color: var(--texto);
  line-height: 1.65;
}
.docs-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--primario);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Captura de pantalla ---- */
.docs-captura {
  margin: 1.5rem 0 2rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--fondo-suave);
  box-shadow: var(--s-md);
}
.docs-captura img { width: 100%; display: block; }
.docs-captura figcaption {
  padding: 0.65rem 1rem;
  font-size: 0.8rem;
  color: var(--texto-tenue);
  border-top: 1px solid var(--borde);
}

/* ---- Cajas de aviso ---- */
.docs-aviso {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radio);
  border: 1px solid;
  margin: 1.5rem 0;
  font-size: 0.92rem;
  line-height: 1.6;
}
.docs-aviso svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.1rem; }
.docs-aviso strong { display: block; margin-bottom: 0.15rem; }
.docs-aviso--consejo { background: rgba(37,99,235,0.07); border-color: rgba(37,99,235,0.25); color: var(--texto); }
.docs-aviso--consejo svg { color: var(--primario); }
.docs-aviso--ojo { background: rgba(217,119,6,0.09); border-color: rgba(217,119,6,0.3); color: var(--texto); }
.docs-aviso--ojo svg { color: #d97706; }
.docs-aviso--no { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.28); color: var(--texto); }
.docs-aviso--no svg { color: #dc2626; }

/* ---- Índice "En esta página" (derecha, solo escritorio) ---- */
.docs-toc { display: none; }
@media (min-width: 1100px) {
  .docs-toc {
    display: block;
    position: sticky;
    top: 1.5rem;
    padding: 2rem 0;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
}
.docs-toc-titulo { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-tenue); margin-bottom: 0.75rem; }
.docs-toc ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; border-left: 2px solid var(--borde); }
.docs-toc a {
  display: block;
  padding: 0.15rem 0 0.15rem 0.85rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 0.84rem;
  color: var(--texto-tenue);
  text-decoration: none;
  line-height: 1.4;
}
.docs-toc a:hover { color: var(--texto); }
.docs-toc a.activo { color: var(--primario); border-left-color: var(--primario); font-weight: 700; }

/* ---- Índice de la home de docs (tarjetas por grupo) ---- */
.docs-indice-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
@media (min-width: 640px) { .docs-indice-grid { grid-template-columns: repeat(2, 1fr); } }
.docs-indice-card {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--fondo-suave);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.docs-indice-card:hover { border-color: var(--primario); transform: translateY(-2px); }
.docs-indice-card h3 { font-family: var(--display); font-size: 1rem; font-weight: 800; color: var(--texto); margin-bottom: 0.3rem; }
.docs-indice-card p { font-size: 0.85rem; color: var(--texto-suave); margin: 0; }

/* ---- "¿Te sirvió esta página?" ---- */
.docs-feedback {
  margin: 3rem 0 0;
  padding: 1.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--fondo-suave);
  text-align: center;
}
.docs-feedback-preguntas { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.docs-feedback p { margin: 0; font-weight: 700; color: var(--texto); }
.docs-feedback-botones { display: flex; gap: 0.6rem; }
.docs-feedback-botones button {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--fondo);
  color: var(--texto);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
.docs-feedback-botones button:hover { border-color: var(--primario); color: var(--primario); }
.docs-feedback-gracias { color: var(--texto-suave); font-size: 0.92rem; }
.docs-feedback-gracias a { color: var(--primario); font-weight: 700; }

/* ---- Anterior / Siguiente al final de cada guía ---- */
.docs-paginacion { display: flex; gap: 1rem; margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--borde); }
.docs-paginacion a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.docs-paginacion a:hover { border-color: var(--primario); transform: translateY(-2px); }
.docs-paginacion-siguiente { text-align: right; align-items: flex-end; margin-left: auto; }
.docs-paginacion-etiqueta { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-tenue); }
.docs-paginacion-titulo { font-family: var(--display); font-weight: 800; color: var(--texto); font-size: 0.95rem; }

.tabbar-item.activo { color: var(--primario); }