/* ============================================================================
 * estilo.css — Sistema visual base, 100% dirigido por variables CSS.
 * config.js escribe --color-primario, --color-secundario, etc. leyéndolos de
 * data/config.json, así el administrador cambia la marca desde el Sheet sin
 * tocar este archivo.
 * ========================================================================== */

:root {
  /* 2.0 · Diseño común (base Constitución): tinta azul, acento dorado; la marca del cliente llega desde el hub. */
  --color-primario: #13294b;
  --color-secundario: #1d3a66;
  --color-acento: #b8863b;
  --color-terciario: #1f8a5b;
  --color-fondo: #ffffff;
  --color-texto: #1d1d1f;
  --color-texto-suave: #526072; /* 5,9:1 sobre blanco y 5,5:1 sobre el gris de la cabecera (antes #64748b, 4,3:1: no cumplía AA) */
  --color-borde: #e2e8f0;
  --radio: 14px;
  --sombra: 0 8px 30px rgba(15, 23, 42, 0.08);
  --sombra-fuerte: 0 20px 50px rgba(15, 23, 42, 0.16);
  --degradado-marca: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
  --transicion: .25s cubic-bezier(.4, 0, .2, 1);
  /* config.js sobreescribe estas dos con Config.tipografia_titulos/tipografia_texto */
  --fuente-titulos: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fuente-texto: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --escala-texto: 1;
  --ancho-maximo: 1180px;
}

/* tema_default = "dark" fija el sitio en oscuro; "auto" (por defecto) sigue al sistema
 * del visitante vía prefers-color-scheme; config.js agrega data-theme cuando corresponde. */
:root[data-theme="dark"], :root[data-theme="auto"] {
  --color-fondo-oscuro: #0b1220; --color-texto-oscuro: #e2e8f0; --color-borde-oscuro: #1e293b;
}
/* --color-texto-cabecera es el color del logo/menú, SIEMPRE calculado junto con el fondo de
 * la cabecera (nunca por separado) — así el texto del header nunca queda oscuro sobre oscuro
 * ni claro sobre claro, sea cual sea el tema. */
:root { --color-texto-cabecera: var(--color-secundario); }
:root[data-theme="dark"] {
  --color-fondo: var(--color-fondo-oscuro); --color-texto: var(--color-texto-oscuro); --color-borde: var(--color-borde-oscuro);
  --color-texto-cabecera: #f1f5f9;
}
/* "auto" (por defecto) solo debe oscurecerse cuando el SISTEMA del visitante está en oscuro —
 * antes esta regla no estaba dentro de la media query y la cabecera quedaba oscura siempre,
 * incluso con el resto del sitio en claro (texto oscuro sobre fondo oscuro = ilegible). */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --color-fondo: var(--color-fondo-oscuro); --color-texto: var(--color-texto-oscuro); --color-borde: var(--color-borde-oscuro);
    --color-texto-cabecera: #f1f5f9;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: calc(16px * var(--escala-texto)); }
body {
  margin: 0; font-family: var(--fuente-texto); color: var(--color-texto); background: var(--color-fondo);
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--color-primario); text-decoration: none; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; color: var(--color-secundario); font-family: var(--fuente-titulos); }
/* h1 de una página sin hero (el primer título de sección pasa a h1): se ve igual que un h2. */
h1.titulo-pagina { font-size: 1.5em; }
.seccion-cta h1.titulo-pagina { color: #fff; }
.categoria-planes-titulo h1.titulo-pagina { margin-bottom: 4px; }
.insignia { display: inline-block; background: var(--color-terciario); color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.mensaje-mantenimiento { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; }
p { margin: 0 0 1em; color: var(--color-texto-suave); }
.contenedor { max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 20px; }
.oculto { display: none !important; }

/* ---- Cabecera / menú ---- */
.cabecera {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: box-shadow var(--transicion), border-color var(--transicion);
}
:root[data-theme="dark"] .cabecera { background: rgba(11,18,32,.78); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .cabecera { background: rgba(11,18,32,.78); } }
.cabecera.con-sombra { box-shadow: 0 6px 24px rgba(15,23,42,.08); border-bottom-color: var(--color-borde); }

/* ---- Página Herramientas (calculadoras) ---- */
.grid-calculadoras { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.calculadora { background: color-mix(in srgb, var(--color-primario) 4%, var(--color-fondo)); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 24px; }
.calculadora h3 { margin-bottom: 4px; }
.form-calculadora .fila-campos { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.form-calculadora label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 500; color: var(--color-texto); }
.form-calculadora input, .form-calculadora select {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--color-borde); background: var(--color-fondo); color: var(--color-texto); font-size: .95rem;
}
.form-calculadora input:focus, .form-calculadora select:focus { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.tabla-resultado-calculadora { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: .9rem; }
.tabla-resultado-calculadora th { text-align: left; font-weight: 500; color: var(--color-texto-suave); padding: 6px 10px 6px 0; }
.tabla-resultado-calculadora td { text-align: right; padding: 6px 0; font-weight: 600; }
.tabla-resultado-calculadora tr:last-child td, .tabla-resultado-calculadora tr:last-child th { border-top: 1px solid var(--color-borde); padding-top: 10px; font-size: 1.05em; }

/* ---- Barra de indicadores financieros (mostrar/ocultar: Config.mostrar_barra_indicadores) ----
 * Carrusel de UNA sola fila, estilo ticker bancario (Santander/bolsa): nunca debe partirse en
 * varias líneas, pase lo que pase (pantalla angosta, "reducir movimiento" del sistema operativo,
 * pestaña en segundo plano). La regla "prefers-reduced-motion" ANTES ponía "white-space: normal"
 * acá, lo que rompía la fila en varias líneas apenas el sistema operativo del visitante tenía
 * activado "reducir movimiento" (una preferencia de accesibilidad más común de lo que parece) —
 * ese era el origen real de las "5 filas" reportadas, no un problema de caché ni de despliegue.
 * Ahora, con movimiento reducido, se apaga la animación pero se mantiene una sola fila con
 * scroll horizontal manual (el visitante puede arrastrar/deslizar) — nunca se envuelve en filas. */
.barra-indicadores {
  overflow: hidden; white-space: nowrap; background: var(--color-secundario); border-bottom: 1px solid var(--color-borde);
  position: relative;
}
/* Solo debe verse en Inicio/Home (pedido explícito) — index.html decide la ruta y agrega/quita
   esta clase; separada de ".oculto" (que ya usa pintarBarraIndicadores_ para "sin datos o
   deshabilitada desde Config") para que ninguna de las dos razones pise a la otra. */
.barra-indicadores.oculto-ruta { display: none; }
.barra-indicadores .pista-indicadores {
  display: inline-block; padding-left: 100%; animation: deslizar-indicadores 55s linear infinite; will-change: transform;
}
/* Antes también se pausaba con ":hover" — en escritorio, apenas el mouse pasaba por encima
   (algo casi inevitable, la barra ocupa todo el ancho justo bajo el hero) el carrusel se
   quedaba quieto y se veía como si "no fuera automático" comparado con el celular (que no tiene
   hover). Se quitó esa regla: ahora se desliza sola siempre, en cualquier dispositivo, y solo se
   pausa por los dos motivos explícitos de abajo (pestaña en segundo plano, o mientras se toca la
   pantalla para leerla con el dedo). */
.barra-indicadores.pausado .pista-indicadores { animation-play-state: paused; }
.item-indicador {
  display: inline-block; position: relative; padding: 8px 22px; font-size: .82rem; color: #e2e8f0; font-variant-numeric: tabular-nums;
}
.item-indicador + .item-indicador::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: rgba(226,232,240,.25);
}
.item-indicador strong { color: #fff; margin-right: 6px; }
.item-indicador .sube { color: #4ade80; margin-left: 6px; }
.item-indicador .baja { color: #f87171; margin-left: 6px; }
@keyframes deslizar-indicadores { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* CAUSA REAL encontrada del "no es automática en escritorio": esta regla apagaba la animación
   por completo cuando el sistema operativo/navegador tiene activada la preferencia de
   accesibilidad "reducir movimiento" — algo mucho más común de lo que parece en computadores de
   escritorio (viene activada por defecto en bastantes configuraciones corporativas/Windows),
   mientras que casi ningún celular la trae activada por defecto — por eso en el mismo sitio se
   veía "fija" en el computador y "automática" en el teléfono, sin que fuera un problema de caché
   ni de despliegue. Por pedido explícito del negocio, la barra debe deslizarse sola siempre, en
   cualquier dispositivo, así que esta regla se quitó a propósito (la barra sigue sin parpadeos ni
   movimiento brusco — es un desplazamiento lento y continuo, no el tipo de animación que esa
   preferencia busca evitar). Los otros dos motivos de pausa (pestaña en segundo plano, dedo sobre
   la pantalla) se mantienen igual, más abajo. */
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.cabecera .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; color: var(--color-texto-cabecera); letter-spacing: -.01em; }
.cabecera .logo img { height: 36px; width: auto; border-radius: 8px; }
.menu-principal { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.menu-principal a { position: relative; color: var(--color-texto-cabecera); font-weight: 500; padding: 4px 0; }
.menu-principal a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--degradado-marca);
  border-radius: 2px; transition: right var(--transicion);
}
.menu-principal a:hover { color: var(--color-primario); }
.menu-principal a:hover::after { right: 0; }
/* Ítem activo: el visitante siempre sabe dónde está parado dentro del menú, incluso en una
 * sub-página de servicio/plan (el ítem padre de nivel 1 también se marca, ver
 * marcarEnlaceActivoMenu_ en index.html). */
.menu-principal a.activo { color: var(--color-primario); font-weight: 700; }
.menu-principal a.activo::after { right: 0; background: var(--degradado-marca); }
.menu-principal .submenu a.activo { background: color-mix(in srgb, var(--color-primario) 10%, transparent); }
/* El CTA "Cotizar ahora" es un botón relleno, no un link de texto — si su ruta coincide con la
 * activa (estás en Servicios), debe seguir viéndose como botón, nunca con texto invisible del
 * mismo color que su propio fondo. */
.item-cta-menu a { color: #fff; }
.item-cta-menu a::after { display: none; }
#cta-cabecera::after { display: none; }
.btn-menu-movil { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--color-texto-cabecera); }

/* ---- Migas de pan: orientación en cualquier página que no sea el inicio (clave con páginas
 * encadenadas Servicios > Contabilidad Digital > Plan Pymes). Franja delgada, siempre arriba del
 * todo del contenido (antes del hero si la página tiene uno). ---- */
.migas-pan { padding: 14px 0; font-size: .84rem; }
.migas-pan .contenedor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.migas-pan a { color: var(--color-texto-suave); text-decoration: none; }
.migas-pan a:hover { color: var(--color-primario); text-decoration: underline; }
.migas-pan span[aria-current] { color: var(--color-texto); font-weight: 600; }
.migas-pan .migas-separador { color: var(--color-borde); }
@media (max-width: 600px) { .migas-pan { font-size: .78rem; } .migas-pan .contenedor { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* ---- Mega-menú anidado (Menu.padre>Menu, cualquier profundidad — ver js/render.js → renderMenu) ----
 * Escritorio: el submenú se abre al pasar el mouse por el <li>, o si quedó "abierta" por un toque
 * (móvil/touch, ver el botón ▾ más abajo) — ambos casos usan la misma regla de visibilidad.
 * Cada <li> puede traer hasta 3 hijos directos: el link, su botón ▾ (si tiene hijos) y su propio
 * <ul class="submenu"> (si tiene hijos) — los tres viven en el MISMO <li> (ver nivel_() en
 * render.js), a cualquier profundidad (ej. "Contabilidad Digital" trae su link + su ▾ + su propio
 * submenú con los 3 planes, todo dentro del <li> que a su vez es un ítem DEL submenú de
 * "Servicios"). "flex-wrap: wrap" + el submenú forzado a "flex-basis: 100%" es lo que logra que
 * el link y su flecha compartan la primera línea y el submenú caiga siempre a una línea propia,
 * a cualquier nivel de anidamiento — antes el link era "display:block" (ocupaba TODO el ancho) y
 * su flecha quedaba empujada, sola, a la línea de abajo: eso es lo que se veía roto/desordenado. */
.menu-principal li { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.menu-principal li > a { flex: 1 1 auto; min-width: 0; }
.menu-principal .abrir-submenu {
  background: none; border: none; margin-left: 4px; padding: 2px 4px; cursor: pointer; font-size: .7rem;
  color: inherit; opacity: .75; transition: transform var(--transicion); flex-shrink: 0;
}
.menu-principal li.abierta > .abrir-submenu { transform: rotate(180deg); }
.menu-principal li > .submenu { flex-basis: 100%; }
.menu-principal .submenu {
  position: absolute; top: calc(100% + 14px); left: 0; min-width: 240px; list-style: none;
  background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: 12px;
  box-shadow: var(--sombra-fuerte); padding: 10px; margin: 0; z-index: 40;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.menu-principal li.tiene-submenu:hover > .submenu,
.menu-principal li.tiene-submenu.abierta > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-principal .submenu a {
  display: block; padding: 10px 14px; border-radius: 8px; color: var(--color-texto); font-weight: 500; white-space: nowrap;
}
.menu-principal .submenu a::after { display: none; }
.menu-principal .submenu a:hover { background: color-mix(in srgb, var(--color-primario) 8%, transparent); color: var(--color-primario); }
/* Nivel 2 (ej. "Plan Emprendedores" dentro de "Contabilidad Digital"): se despliega a un
 * costado, como cualquier flyout de dos niveles — nunca tapa a su propio padre. */
.menu-principal .submenu .submenu-nivel2 { top: -10px; left: calc(100% + 8px); }
@media (max-width: 1120px) {
  .menu-principal .submenu {
    position: static; box-shadow: none; border: none; border-left: 2px solid var(--color-borde);
    border-radius: 0; margin: 0 0 0 14px; padding: 0; max-height: 0; overflow: hidden;
    opacity: 1; visibility: visible; transform: none; transition: max-height .3s ease, margin .3s ease;
  }
  /* Cerrado, el submenú no debe dejar NINGÚN hueco (ni siquiera su propio margen) — el espacio
   * en blanco entre "Servicios" y el siguiente ítem del menú venía de acá: el margen quedaba
   * aplicado aunque max-height fuera 0. Solo aparece margen cuando está realmente abierto. */
  .menu-principal li.tiene-submenu.abierta > .submenu { max-height: 600px; margin: 4px 0 4px 14px; }
  .menu-principal .submenu-nivel2 { left: 0; }
}

/* ---- Selector de idioma (ES/EN/中文) — traducción manual vía columnas _en/_zh en el Sheet ---- */
/* Idioma: globo con la lista desplegable (español por defecto, inglés y chino). */
.selector-idioma { position: relative; }
.btn-idioma { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--color-borde, #d8dee6); background: transparent; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--color-texto-suave); cursor: pointer; transition: var(--transicion); }
.btn-idioma:hover, .btn-idioma[aria-expanded="true"] { color: var(--color-primario); border-color: var(--color-primario); }
.lista-idiomas { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 170px; margin: 0; padding: 6px; list-style: none; background: var(--color-fondo, #fff); border: 1px solid var(--color-borde, #d8dee6); border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, .14); }
.lista-idiomas[hidden] { display: none; }
.lista-idiomas button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 12px; border: 0; background: transparent; border-radius: 8px; font-size: .92rem; color: var(--color-texto, #1e293b); cursor: pointer; text-align: left; }
.lista-idiomas button:hover, .lista-idiomas button:focus-visible { background: var(--color-fondo-alterno, #f1f5f9); }
.lista-idiomas button[aria-checked="true"] { font-weight: 700; color: var(--color-primario); }
.lista-idiomas button[aria-checked="true"]::after { content: "✓"; }

/* CTA fijo de la cabecera: visible siempre en escritorio (cabecera "sticky"); en móvil se
 * oculta acá y reaparece como primer ítem del menú desplegable (.item-cta-menu más abajo),
 * para no competir por espacio con el logo/idioma/hamburguesa en una pantalla angosta.
 * A propósito discreto (contorno, no relleno sólido; texto pequeño) — la primera versión usaba
 * el botón "btn-primario" grande de degradado y quedó demasiado dominante en la cabecera.
 * Selector por id a propósito: ".btn { padding: 14px 28px }" vive más abajo en este archivo sin
 * media query, y con la misma especificidad de clase le gana a ".btn-cta-cabecera" por venir
 * después en la cascada (mismo problema que ya pasó con "display:none" en móvil, ver más abajo). */
#cta-cabecera {
  padding: 7px 16px; font-size: .8rem; white-space: nowrap; background: none;
  border: 1.5px solid var(--color-primario); color: var(--color-primario); box-shadow: none;
}
#cta-cabecera:hover { background: var(--color-primario); color: #fff; }
#cta-cabecera::before { display: none; }
/* ".menu-principal li" (más abajo, sin media query) ya fija "display:flex" a TODOS los <li> del
 * menú con especificidad clase+tipo — para ganarle en escritorio hace falta la misma composición
 * ".menu-principal li.item-cta-menu", no solo ".item-cta-menu" a secas. */
.menu-principal li.item-cta-menu { display: none; }

@media (max-width: 1120px) {
  /* Selector por id (más específico que ".btn") a propósito: la regla general ".btn {
   * display: inline-flex }" vive más abajo en este archivo, fuera de cualquier media query, así
   * que con la misma especificidad de clase ganaba ELLA por venir después en el orden de cascada
   * — el CTA se seguía mostrando en móvil y desbordaba la fila del logo/idioma/hamburguesa. */
  #cta-cabecera { display: none; }
  .btn-menu-movil { display: block; }
  .menu-principal {
    display: none; position: absolute; top: 72px; left: 0; right: 0; background: #fff;
    flex-direction: column; padding: 16px 20px; border-bottom: 1px solid var(--color-borde); gap: 14px;
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  /* El desplegable móvil siempre tiene fondo claro (arriba), así que su texto es siempre
   * oscuro — independiente de --color-texto-cabecera, que sigue el fondo (variable) de la
   * cabecera cuando el menú está cerrado. */
  .menu-principal a { color: var(--color-secundario); }
  .menu-principal.abierto { display: flex; }
  .menu-principal li.item-cta-menu { display: block; order: -1; margin-bottom: 4px; }
  .item-cta-menu .btn { color: #fff; }
}

/* ---- Botones ---- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  border: 2px solid transparent; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* brillo diagonal que cruza el botón al pasar el mouse, en CSS puro (sin imágenes) */
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size: 220% 100%; background-position: 120% 0; transition: opacity .2s ease;
}
.btn:hover::before { opacity: 1; animation: brillo-btn .9s ease forwards; }
@keyframes brillo-btn { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.btn-primario { background: var(--degradado-marca); color: #fff; box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--color-primario) 55%, transparent); }
.btn-secundario { background: transparent; border-color: var(--color-secundario); color: var(--color-secundario); }
.btn-secundario:hover { background: var(--color-secundario); color: #fff; }
.btn-acento { background: var(--color-acento); color: #1c1300; box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--color-acento) 55%, transparent); }
.btn-bloque { width: 100%; }

/* ---- Hero ---- */
.seccion-hero {
  position: relative; padding: 100px 0 88px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primario) 5%, var(--color-fondo)) 0%, var(--color-fondo) 60%);
}
/* dos manchas de color difuminadas, puramente decorativas y generadas con los colores de
   marca — dan sensación de profundidad sin necesitar ninguna imagen ni librería extra */
.seccion-hero .fondo-decorativo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.seccion-hero .fondo-decorativo::before, .seccion-hero .fondo-decorativo::after {
  content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%; filter: blur(90px); opacity: .25;
  animation: flotar 14s ease-in-out infinite;
}
.seccion-hero .fondo-decorativo::before { background: var(--color-primario); top: -160px; left: -120px; }
.seccion-hero .fondo-decorativo::after { background: var(--color-terciario); bottom: -180px; right: -100px; animation-delay: -7s; }
@keyframes flotar { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -20px) scale(1.08); } }
.seccion-hero .contenedor { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.seccion-hero h1 {
  font-size: clamp(2.1rem, 4vw, 3.4rem); background: var(--degradado-marca); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.seccion-hero .subtitulo { font-size: 1.18rem; max-width: 46ch; }
.hero-insignia {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; margin-bottom: 18px;
  border-radius: 999px; background: color-mix(in srgb, var(--color-primario) 10%, transparent);
  color: var(--color-primario); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.hero-bullets { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.hero-bullets li { position: relative; padding-left: 26px; font-size: .96rem; color: var(--color-texto); }
.hero-bullets li::before {
  content: '✓'; position: absolute; left: 0; top: -1px; color: var(--color-primario); font-weight: 700;
}
.hero-confianza { margin-top: 16px; font-size: .84rem; color: var(--color-texto-suave); }
.seccion-hero .acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.seccion-hero .medio { position: relative; }
.seccion-hero .medio video, .seccion-hero .medio img {
  border-radius: var(--radio); box-shadow: var(--sombra-fuerte); aspect-ratio: 4/3.2; object-fit: cover;
  transition: transform .4s ease;
}
.seccion-hero .medio:hover video, .seccion-hero .medio:hover img { transform: scale(1.015); }
.seccion-hero model-viewer { width: 100%; height: 420px; border-radius: var(--radio); box-shadow: var(--sombra-fuerte); background: var(--color-borde); }
.campo input.campo-invalido, .campo textarea.campo-invalido { border-color: #dc2626; }
.campo-error { display: block; color: #dc2626; font-size: .82rem; margin-top: 2px; min-height: 1em; }
.hero-descripcion { color: var(--color-texto-suave); font-size: 1.02rem; line-height: 1.6; max-width: 46ch; margin-top: -6px; }
.seccion-hero .medio iframe {
  width: 100%; aspect-ratio: 4/3.2; border-radius: var(--radio); box-shadow: var(--sombra-fuerte); border: 0; display: block;
}
@media (max-width: 900px) { .seccion-hero .contenedor { grid-template-columns: 1fr; } .seccion-hero .medio { order: -1; } }

/* ---- Aparición suave al hacer scroll (Render.activarReveal) ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .btn::before, .fondo-decorativo::before, .fondo-decorativo::after { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } }

/* ---- Secciones genéricas ---- */
section { padding: 72px 0; }
.seccion-encabezado { text-align: center; max-width: 640px; margin: 0 auto 44px; }

.seccion-texto-imagen .contenedor { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.seccion-texto-imagen.invertido .contenedor { direction: rtl; }
.seccion-texto-imagen.invertido .contenido { direction: ltr; }
@media (max-width: 860px) { .seccion-texto-imagen .contenedor { grid-template-columns: 1fr; direction: ltr; } }

.grid-tarjetas, .grid-testimonios, .grid-catalogo, .grid-blog {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px;
}
/* dentro de una .reveal, cada tarjeta aparece con un pequeño desfase — sin JS extra */
.reveal-visible .tarjeta:nth-child(1), .reveal-visible .testimonio:nth-child(1) { transition-delay: 0s; }
.reveal-visible .tarjeta:nth-child(2), .reveal-visible .testimonio:nth-child(2) { transition-delay: .08s; }
.reveal-visible .tarjeta:nth-child(3), .reveal-visible .testimonio:nth-child(3) { transition-delay: .16s; }
.reveal-visible .tarjeta:nth-child(4), .reveal-visible .testimonio:nth-child(4) { transition-delay: .24s; }
.tarjeta {
  position: relative; background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio);
  padding: 30px 28px; overflow: hidden; transition: box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion);
}
.tarjeta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--degradado-marca); transform: scaleX(0); transform-origin: left; transition: transform var(--transicion); }
.tarjeta:hover { box-shadow: var(--sombra-fuerte); transform: translateY(-5px); border-color: transparent; }
.tarjeta:hover::before { transform: scaleX(1); }
.tarjeta .icono {
  font-size: 1.6rem; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: color-mix(in srgb, var(--color-primario) 12%, transparent); margin-bottom: 16px;
}
.tarjeta .precio { font-size: 1.7rem; font-weight: 800; color: var(--color-secundario); margin: 10px 0; letter-spacing: -.02em; }
.tarjeta .precio small { font-size: .9rem; color: var(--color-texto-suave); font-weight: 400; }
.tarjeta ul { list-style: none; padding: 0; margin: 14px 0; }
.tarjeta ul li { padding: 6px 0; color: var(--color-texto-suave); }
.tarjeta ul li::before { content: '✓ '; color: var(--color-primario); font-weight: 700; }
.tarjeta.destacada { border-color: var(--color-primario); box-shadow: var(--sombra-fuerte); position: relative; }
.tarjeta.destacada::before { transform: scaleX(1); }
.tarjeta.destacada::after {
  content: 'Más elegido'; position: absolute; top: 16px; right: -34px; background: var(--color-acento);
  color: #1c1300; font-size: .72rem; font-weight: 700; padding: 5px 40px; transform: rotate(40deg); box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

.grid-testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.testimonio { background: color-mix(in srgb, var(--color-primario) 4%, var(--color-fondo)); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 28px; transition: transform var(--transicion), box-shadow var(--transicion); }
.testimonio:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.testimonio .estrellas { color: var(--color-acento); margin-bottom: 10px; letter-spacing: 2px; }
.testimonio p { font-size: 1.02rem; color: var(--color-texto); }
.testimonio .autor { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.testimonio .autor img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 20%, transparent); }
.testimonio .autor strong { display: block; color: var(--color-secundario); }
.testimonio .autor span { font-size: .85rem; color: var(--color-texto-suave); }

.seccion-cta {
  position: relative; overflow: hidden; background: var(--color-secundario); color: #fff; border-radius: calc(var(--radio) + 6px);
  padding: 64px 40px; text-align: center; margin: 0 20px;
}
.seccion-cta::before {
  content: ''; position: absolute; inset: 0; background: var(--degradado-marca); opacity: .35; mix-blend-mode: overlay;
}
.seccion-cta > * { position: relative; z-index: 1; }
.seccion-cta h2, .seccion-cta p { color: #fff; }
.seccion-cta p { opacity: .85; }

.faq { max-width: 780px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--color-borde); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--color-secundario); }
.faq p { margin-top: 10px; }

/* Contenedor con su propio scroll horizontal (igual que ".barra-indicadores"/".migas-pan"):
   en pantallas angostas, varias columnas de texto no caben — sin esto, la tabla forzaba el
   ancho de TODA la página en vez de desplazarse solo ella (scroll horizontal indebido). */
.tabla-comparativa-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.comparativa { width: 100%; min-width: 560px; border-collapse: collapse; }
table.comparativa th, table.comparativa td { padding: 14px 16px; border-bottom: 1px solid var(--color-borde); text-align: left; white-space: nowrap; }
table.comparativa th { color: var(--color-secundario); }

/* ---- Blog ---- */
.grid-blog { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.tarjeta-blog img { border-radius: var(--radio) var(--radio) 0 0; aspect-ratio: 16/9; object-fit: cover; }
.tarjeta-blog { border: 1px solid var(--color-borde); border-radius: var(--radio); overflow: hidden; }
.tarjeta-blog .cuerpo { padding: 20px; }
.tarjeta-blog .fecha { font-size: .8rem; color: var(--color-texto-suave); }

/* ---- Formulario de contacto ---- */
form.formulario { display: grid; gap: 16px; max-width: 620px; margin: 0 auto; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: .9rem; color: var(--color-secundario); }
.campo input, .campo textarea, .campo select {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--color-borde); font: inherit;
}
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.reto-antispam { background: #f1f5f9; border-radius: 10px; padding: 14px; font-weight: 600; }
.reto-antispam:has(.reto-antispam-reintentar) { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; font-weight: 500; font-size: .92rem; }
.reto-antispam-reintentar { background: none; border: 1px solid currentColor; border-radius: 6px; padding: 2px 8px; margin-left: 6px; cursor: pointer; font-size: .95em; color: inherit; }
.mensaje-estado { padding: 12px 16px; border-radius: 10px; font-weight: 600; }
.mensaje-estado.ok { background: #dcfce7; color: #166534; }
.mensaje-estado.error { background: #fee2e2; color: #991b1b; }
/* honeypot: invisible para personas, visible para bots que rellenan todo */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* ---- Aviso "casi en vivo": aparece cuando la pestaña abierta detecta que el Sheet
   publicó cambios nuevos, sin que nadie recargue la página a mano. ---- */
.aviso-actualizado {
  position: fixed; left: 50%; top: 78px; transform: translate(-50%, -20px);
  background: var(--color-primario); color: #fff; padding: 10px 20px; border-radius: 999px;
  box-shadow: var(--sombra); font-weight: 600; font-size: .92em; z-index: 80;
  opacity: 0; transition: transform .3s ease, opacity .3s ease; pointer-events: none;
}
.aviso-actualizado.visible { transform: translate(-50%, 0); opacity: 1; }

/* ---- Franja de confianza (Sección tipo 'franja_confianza') — reutilizable en cualquier
 * página (hero de inicio, landing de un servicio puntual...). ---- */
.franja-confianza { background: var(--color-secundario); padding: 32px 0; }
.grid-estadisticas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.estadistica-numero { font-family: var(--fuente-titulos); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: var(--color-acento); }
.estadistica-etiqueta { color: #cbd5e1; font-size: .85rem; margin-top: 4px; }
@media (max-width: 720px) { .grid-estadisticas { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } }

/* ---- Pasos del proceso (Sección tipo 'pasos_proceso') — línea punteada conectando cada
 * número; puramente CSS, sin animación por JS (funciona igual con "reduced motion"). ---- */
.grid-pasos-proceso { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.grid-pasos-proceso::before {
  content: ''; position: absolute; top: 26px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-primario) 0 8px, transparent 8px 16px); z-index: 0;
}
.paso-proceso { position: relative; text-align: center; z-index: 1; }
.paso-numero {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; background: var(--color-fondo);
  border: 3px solid var(--color-primario); color: var(--color-primario); font-family: var(--fuente-titulos); font-weight: 800;
  font-size: 1.15rem; display: flex; align-items: center; justify-content: center; transition: transform var(--transicion), background var(--transicion), color var(--transicion);
}
.paso-proceso:hover .paso-numero { background: var(--color-primario); color: #fff; transform: scale(1.1); }
.paso-proceso h4 { font-size: 1rem; margin-bottom: 6px; }
.paso-proceso p { color: var(--color-texto-suave); font-size: .9rem; }
@media (max-width: 860px) { .grid-pasos-proceso { grid-template-columns: 1fr 1fr; row-gap: 30px; } .grid-pasos-proceso::before { display: none; } }

/* ---- Planes reales del catálogo (Sección tipo 'planes_servicio') — tarjetas lado a lado,
 * estilo Google Workspace: precio + checklist + un solo botón, el plan recomendado elevado
 * y con cinta. El precio/nombre/características vienen SIEMPRE del catálogo real (Planes/
 * Caracteristicas), nunca de texto escrito en la Sección — ver planesServicio_ en render.js. */
.selector-intencion-planes {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 auto 32px; background: color-mix(in srgb, var(--color-primario) 6%, var(--color-fondo));
  border: 1px solid var(--color-borde); border-radius: 999px;
}
.selector-intencion-opcion {
  border: none; background: transparent; padding: 9px 20px; border-radius: 999px; font-size: .88rem; font-weight: 600;
  color: var(--color-texto-suave); cursor: pointer; transition: background var(--transicion), color var(--transicion);
}
.selector-intencion-opcion.activa { background: var(--color-fondo); color: var(--color-primario); box-shadow: var(--sombra); }
.grid-planes-servicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: stretch; }
.tarjeta-plan {
  position: relative; display: flex; flex-direction: column; background: var(--color-fondo); border: 1px solid var(--color-borde);
  border-radius: var(--radio); padding: 32px 28px; transition: box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion);
}
.tarjeta-plan:hover { box-shadow: var(--sombra-fuerte); transform: translateY(-4px); }
.tarjeta-plan.destacado { border: 2px solid var(--color-primario); box-shadow: var(--sombra-fuerte); transform: scale(1.03); z-index: 1; }
.tarjeta-plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--degradado-marca); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--color-primario) 60%, transparent);
}
.tarjeta-plan h3 { font-size: 1.15rem; margin-bottom: 4px; }
.tarjeta-plan-precio { font-family: var(--fuente-titulos); font-size: 2rem; font-weight: 800; color: var(--color-secundario); letter-spacing: -.02em; margin: 6px 0 18px; }
.tarjeta-plan-precio small { font-size: .95rem; font-weight: 400; color: var(--color-texto-suave); }
.tarjeta-plan-caracteristicas { list-style: none; padding: 0; margin: 0 0 22px; flex-grow: 1; }
.tarjeta-plan-caracteristicas li { padding: 7px 0; color: var(--color-texto-suave); font-size: .94rem; padding-left: 26px; position: relative; }
.tarjeta-plan-caracteristicas li::before { content: '✓'; position: absolute; left: 0; color: var(--color-primario); font-weight: 700; }
.tarjeta-plan [data-agregar-plan] { width: 100%; }
.tarjeta-plan [data-agregar-plan]:disabled { opacity: .75; cursor: default; }
.tarjeta-plan-detalle { display: block; text-align: center; margin-top: 12px; font-size: .85rem; color: var(--color-texto-suave); }
.tarjeta-plan-detalle:hover { color: var(--color-primario); }
@media (max-width: 720px) { .tarjeta-plan.destacado { transform: none; } .selector-intencion-planes { display: flex; width: 100%; } .selector-intencion-opcion { flex: 1; } }

/* ---- Página "Planes": categorías en acordeón (Sección tipo 'categoria_planes') ----
 * Clic en el botón-encabezado agrega/quita ".abierta" en la <section> (ver index.html,
 * delegado en #contenido-pagina) — el cuerpo se anima con max-height, sin medir nada en JS. */
.categoria-planes { padding: 20px 0; border-bottom: 1px solid var(--color-borde); }
.categoria-planes:last-of-type { border-bottom: none; }
.categoria-planes-cabecera {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: none; text-align: left; cursor: pointer; padding: 12px 4px; font: inherit; color: inherit;
}
.categoria-planes-titulo h2 { margin-bottom: 4px; }
.categoria-planes-titulo p { margin: 0; }
.categoria-planes-icono {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-primario) 10%, transparent); color: var(--color-primario); font-size: 1.1rem;
  transition: transform var(--transicion), background var(--transicion);
}
.categoria-planes-cabecera:hover .categoria-planes-icono { background: var(--color-primario); color: #fff; }
.categoria-planes.abierta .categoria-planes-icono { transform: rotate(180deg); }
.categoria-planes-cuerpo { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.categoria-planes.abierta .categoria-planes-cuerpo { max-height: 2400px; }
.categoria-planes-cuerpo .grid-tarjetas { padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { .categoria-planes-cuerpo { transition: none; } .categoria-planes-icono { transition: none; } }

/* ---- Botón flotante de WhatsApp (site-wide; se activa solo si Config.redes_whatsapp
 * tiene un número) — a la izquierda para no chocar con la barra del carrito (derecha). ---- */
.boton-whatsapp-flotante {
  position: fixed; left: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(37,211,102,.45); text-decoration: none;
}
.boton-whatsapp-flotante::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1;
  animation: pulso-whatsapp 2.2s ease-out infinite;
}
@keyframes pulso-whatsapp { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .boton-whatsapp-flotante::before { animation: none; } }

/* ---- Carrito / catálogo ---- */
.grid-catalogo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.tarjeta-producto img { width: 100%; border-radius: var(--radio); aspect-ratio: 1; object-fit: cover; margin-bottom: 12px; }
.tarjeta-producto-sin-foto {
  width: 100%; aspect-ratio: 1; border-radius: var(--radio); margin-bottom: 12px; display: flex;
  align-items: center; justify-content: center; font-size: 2.4rem; background: var(--color-fondo-suave, #f4f4f6);
}
/* Barra de buscador/filtro/orden de la Tienda — se apila en móvil, en fila desde tablet. */
.tienda-herramientas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.tienda-herramientas input[type="search"] { flex: 1 1 220px; }
.tienda-herramientas select { flex: 0 1 200px; }
.tienda-herramientas input, .tienda-herramientas select {
  padding: 10px 14px; border: 1px solid var(--color-borde); border-radius: var(--radio); font: inherit; background: #fff;
}
@media (max-width: 640px) { .tienda-herramientas select { flex: 1 1 100%; } }

/* ---- Confianza junto al botón de cotizar (reduce abandono del carrito) ---- */
.carrito-confianza { font-size: .82rem; color: var(--color-texto-suave); text-align: center; margin: 10px 0 14px; }

/* ---- Seguimiento de pedido ---- */
.contenedor.angosto { max-width: 560px; }
.form-seguimiento { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.seguimiento-tarjeta {
  background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 22px;
  box-shadow: var(--sombra);
}
.seguimiento-tarjeta p { margin: 0 0 10px; }
.seguimiento-tarjeta .btn { margin-top: 8px; }
.seguimiento-cargando { text-align: center; color: var(--color-texto-suave); }
.seguimiento-error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; padding: 12px 16px; border-radius: var(--radio); }
.seguimiento-sin-despacho { color: var(--color-texto-suave); font-style: italic; }

/* ---- Agendamiento: pensado para cualquier edad — botones grandes, un paso a la vez,
 * texto de buen tamaño, siempre se puede volver atrás sin perder lo ya elegido. ---- */
.agenda-contenedor { max-width: 640px; }
.agenda-paso-indicador { font-size: .95rem; font-weight: 600; color: var(--color-secundario); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.agenda-paso-titulo { font-size: 1.5rem; margin: 0 0 24px; }
.agenda-opciones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.agenda-opcion-grande {
  display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 22px; min-height: 88px;
  border: 2px solid var(--color-borde); border-radius: var(--radio); background: #fff; cursor: pointer;
  font: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.agenda-opcion-grande:hover, .agenda-opcion-grande:focus-visible { border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.agenda-opcion-titulo { font-size: 1.15rem; font-weight: 700; }
.agenda-opcion-detalle { font-size: 1rem; color: var(--color-texto-suave); }
.agenda-campo-grande input, .agenda-campo-grande label { font-size: 1.1rem; }
.agenda-campo-grande input { padding: 14px 16px; }
.agenda-btn-grande { font-size: 1.15rem; padding: 16px 20px; margin-bottom: 14px; }
.agenda-btn-atras { display: block; width: 100%; margin-top: 6px; font-size: 1.05rem; padding: 12px; }
.agenda-horas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-bottom: 20px; }
.agenda-hora-boton {
  padding: 16px 10px; font-size: 1.1rem; font-weight: 600; border: 2px solid var(--color-borde); border-radius: var(--radio);
  background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.agenda-hora-boton:hover, .agenda-hora-boton:focus-visible { border-color: var(--color-primario); background: var(--color-fondo-suave, #f4f4f6); }
.agenda-form-datos { display: flex; flex-direction: column; gap: 16px; margin-bottom: 6px; }
.agenda-resumen { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 22px; margin-bottom: 20px; font-size: 1.05rem; }
.agenda-resumen p { margin: 0 0 10px; }
.agenda-resumen-abono { font-weight: 600; color: var(--color-secundario); }
.agenda-cargando, .agenda-vacio { text-align: center; color: var(--color-texto-suave); font-size: 1.05rem; padding: 20px 0; }
.agenda-exito { font-size: 1.1rem; font-weight: 600; color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 16px; border-radius: var(--radio); margin-bottom: 14px; }
@media (max-width: 480px) {
  .agenda-opciones-grid, .agenda-horas-grid { grid-template-columns: 1fr; }
}

/* ---- Portal de clientes (Fase 2) ---- */
.portal-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.portal-tab {
  padding: 10px 18px; border: 2px solid var(--color-borde); border-radius: 999px; background: #fff;
  font: inherit; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.portal-tab.activa { border-color: var(--color-primario); background: var(--color-primario); color: #fff; }
.portal-form { display: flex; flex-direction: column; gap: 16px; margin-bottom: 6px; }
.portal-nota { color: var(--color-texto-suave); font-size: .95rem; margin: 0 0 4px; }
.portal-cargando, .portal-vacio { text-align: center; color: var(--color-texto-suave); padding: 12px 0; }
.portal-error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; padding: 12px 16px; border-radius: var(--radio); margin-top: 4px; }
.portal-cabecera { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--color-borde); }
.portal-cabecera p { margin: 0; font-size: 1.1rem; font-weight: 600; }
.portal-seccion { margin-bottom: 24px; }
.portal-seccion h3 { margin: 0 0 12px; font-size: 1.05rem; }
.portal-lista { display: flex; flex-direction: column; gap: 10px; }
.portal-item { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 14px 16px; font-size: .95rem; }
.portal-item a { white-space: nowrap; }
@media (max-width: 480px) {
  .portal-cabecera { flex-direction: column; align-items: flex-start; }
}

/* ---- Calendario visual del paso "día y hora": pensado para reemplazar el <input type=date>
 * nativo (poco intuitivo y distinto en cada navegador) por algo que se entiende de un vistazo,
 * también para quien no usa calendarios digitales seguido — mes completo, días cerrados apagados
 * de una, hoy resaltado, y el día elegido bien marcado. ---- */
.agenda-calendario { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 18px; margin-bottom: 18px; }
.agenda-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.agenda-cal-titulo { font-size: 1.15rem; font-weight: 700; text-transform: capitalize; }
.agenda-cal-nav {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--color-borde); background: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--color-secundario); transition: border-color .15s ease, background .15s ease;
}
.agenda-cal-nav:hover:not(:disabled), .agenda-cal-nav:focus-visible:not(:disabled) { border-color: var(--color-primario); background: var(--color-fondo-suave, #f4f4f6); }
.agenda-cal-nav:disabled { opacity: .3; cursor: default; }
.agenda-cal-dias-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.agenda-cal-dias-semana span { text-align: center; font-size: .82rem; font-weight: 700; color: var(--color-texto-suave); text-transform: uppercase; }
.agenda-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.agenda-cal-dia {
  aspect-ratio: 1 / 1; min-height: 40px; border: 2px solid transparent; border-radius: 10px; background: var(--color-fondo-suave, #f4f4f6);
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; color: var(--color-texto);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.agenda-cal-dia:hover:not(:disabled):not(.agenda-cal-vacio) { border-color: var(--color-primario); }
.agenda-cal-vacio { background: transparent; cursor: default; }
.agenda-cal-dia-hoy { box-shadow: inset 0 0 0 2px var(--color-acento, var(--color-primario)); }
.agenda-cal-dia-elegido { background: var(--color-primario); color: #fff; border-color: var(--color-primario); }
.agenda-cal-dia-deshabilitado { background: transparent; color: var(--color-texto-suave); opacity: .4; cursor: not-allowed; }
.agenda-horas-panel { margin-bottom: 8px; }
.agenda-horas-grupo-titulo { font-weight: 700; font-size: 1rem; margin: 14px 0 10px; color: var(--color-secundario); }
.agenda-horas-grupo-titulo:first-child { margin-top: 0; }
@media (max-width: 480px) {
  .agenda-cal-dia { min-height: 36px; font-size: .92rem; }
  .agenda-cal-nav { width: 38px; height: 38px; font-size: 1.15rem; }
}
.barra-carrito {
  position: fixed; right: 20px; bottom: 20px; background: var(--color-secundario);
  color: #fff; padding: 14px 22px; border-radius: 999px; box-shadow: var(--sombra); cursor: pointer; z-index: 60;
  display: flex; align-items: center; gap: 10px; font-weight: 600;
}
.panel-carrito {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%); background: #fff; z-index: 70;
  box-shadow: -10px 0 30px rgba(0,0,0,.15); padding: 26px; overflow-y: auto; transform: translateX(100%);
  transition: transform .25s ease;
}
.panel-carrito.abierto { transform: translateX(0); }
.fila-carrito { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-borde); gap: 10px; }
.fila-carrito-nombre { display: flex; flex-direction: column; gap: 2px; }
.fila-carrito-precio { font-size: .85rem; font-weight: 600; color: var(--color-primario); }
.carrito-total-estimado { font-weight: 700; font-size: 1.05rem; color: var(--color-secundario); margin: 14px 0 4px; min-height: 1.3em; }
.carrito-nota-flujo { font-size: .8rem; color: var(--color-texto-suave); margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--color-borde); }

/* ---- Pie de página: 4 columnas (marca+redes / Ayuda / Menú / Contacto+mapa), mismo diseño en
 * TODAS las páginas — replica la estructura de la plantilla de referencia (encabezados en el
 * color de acento del tenant, líneas de contacto con ícono, redes en círculos de su color de
 * marca, mapa embebido), pero con datos 100% en vivo desde Config/Menu — nunca texto fijo de una
 * marca en particular, para que sirva igual para cualquier cliente del sistema. ---- */
.pie { background: var(--color-secundario); color: #cbd5e1; padding: 56px 0 0; margin-top: 60px; --color-texto-suave: #b8c2d1; }
.pie p { color: inherit; }
.pie a { color: #cbd3e1; text-decoration: none; }
.pie a:hover { color: var(--color-acento); text-decoration: underline; }
.pie .contenedor { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; padding-bottom: 40px; }
.pie-columna h5 { color: color-mix(in srgb, var(--color-acento) 55%, #fff); font-size: 1rem; margin-bottom: 16px; } /* sobre el pie oscuro el dorado se aclara para leerse (AA) */
.pie-marca { display: block; color: #fff; font-size: 1.1rem; margin-bottom: 10px; }
.pie-descripcion { color: #aeb7c6; font-size: .88rem; margin-bottom: 4px; }
.pie-columna ul { list-style: none; margin: 0; padding: 0; }
.pie-columna li { margin-bottom: 9px; font-size: .92rem; }
.pie-redes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pie-redes a {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .95rem; transition: transform var(--transicion), filter var(--transicion); text-decoration: none;
}
.pie-redes a:hover { transform: translateY(-3px) scale(1.06); filter: brightness(1.12); color: #fff; text-decoration: none; }
.pie-linea-contacto { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; font-size: .9rem; }
.pie-linea-contacto i { color: var(--color-acento); margin-top: 3px; flex-shrink: 0; width: 16px; text-align: center; }
.pie-mapa { border-radius: 10px; overflow: hidden; margin-top: 6px; border: 1px solid rgba(255,255,255,.12); }
.pie-mapa iframe { width: 100%; height: 160px; border: 0; display: block; }
.pie-linea-inferior {
  border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0 24px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 14px; text-align: center; font-size: .85rem; color: #b3bccb;
}
.pie-linea-inferior a { color: #b3bccb; }
.pie-linea-inferior small { color: #aeb7c6; }
@media (max-width: 720px) { .pie .contenedor { grid-template-columns: 1fr; gap: 30px; } }

/* ---- Estado de carga ---- */
.cargando { text-align: center; padding: 80px 20px; color: var(--color-texto-suave); }

/* Esqueleto de carga inicial: evita el "salto" de una página en blanco mientras llegan
   los JSON de data/, con el mismo shimmer que usan la mayoría de sitios modernos. */
.esqueleto-carga { padding: 96px 0 60px; max-width: var(--ancho-maximo); margin: 0 auto; }
.esqueleto-linea, .esqueleto-boton, .esqueleto-tarjeta {
  background: linear-gradient(90deg, var(--color-borde) 25%, color-mix(in srgb, var(--color-borde) 50%, var(--color-fondo)) 37%, var(--color-borde) 63%);
  background-size: 400% 100%; animation: brillo-esqueleto 1.4s ease infinite; border-radius: 10px;
}
@keyframes brillo-esqueleto { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.esqueleto-hero { padding: 0 20px; max-width: 640px; }
.esqueleto-linea { height: 20px; margin-bottom: 14px; width: 90%; }
.esqueleto-linea.corta { height: 40px; width: 60%; margin-bottom: 22px; }
.esqueleto-linea.media { width: 70%; }
.esqueleto-boton { height: 46px; width: 180px; border-radius: 999px; margin-top: 20px; }
.esqueleto-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; padding: 0 20px; margin-top: 56px; }
.esqueleto-tarjeta { height: 200px; }

/* Fase 3: aviso de analítica (solo si Config.analytics_ga4_id está configurado) */
.aviso-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; max-width: 560px; margin: 0 auto; background: #fff; color: #1d2433; border-radius: 14px; box-shadow: 0 12px 40px rgba(16,24,40,.18); padding: 16px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: .92rem; }
.aviso-cookies p { margin: 0; flex: 1 1 260px; }
.aviso-cookies div { display: flex; gap: 8px; }

/* Fase 3: el menú principal suma "Diagnóstico tributario" — en pantallas medianas se compacta para que
   la cabecera no desborde (en ≤1120px pasa al menú hamburguesa). */
@media (min-width: 1121px) and (max-width: 1500px) {
  .menu-principal { gap: 16px; }
  .menu-principal > li > a { font-size: .9rem; }
  .cabecera .contenedor { gap: 14px; }
  .btn-cta-cabecera { padding-left: 14px; padding-right: 14px; font-size: .88rem; }
}
@media (min-width: 1121px) and (max-width: 1280px) {
  .menu-principal { gap: 11px; }
  .menu-principal > li > a { font-size: .84rem; }
  .btn-idioma { padding: 0 9px; }
}

/* 2.0 · Tarjetas con foto (el catálogo del negocio, desde el hub): la foto ocupa el borde superior de la tarjeta. */
.tarjeta.con-foto { overflow: hidden; }
.tarjeta-foto { margin: -30px -28px 18px; aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--color-primario) 8%, #fff); }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El marcapáginas dorado del diseño común en las tarjetas con foto (sobre la foto, al borde). */
.tarjeta.con-foto::after { content: ''; position: absolute; top: 0; left: 24px; width: 12px; height: 20px; background: var(--color-acento); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); }