/* ==========================================================================
   SIVAR DESIGN · VERSIÓN 6 (modelo comercial de cuota mensual, base akkinio.com)
   Aplica el sistema de diseño de Brand assets/sistema-de-diseno-naranja/ (versión 3,
   propuesta naranja, 26/10/2026): Geist como única tipografía, paleta con Azul Sivar,
   Naranja intenso, Marfil y Onyx, neutros de la referencia, píldoras en botones y
   etiquetas, tarjetas de 12 px y elevación plana (bordes en lugar de sombras).
   La guía v2 (Esmeralda, Mint, Sol) está archivada en _archivo/ (raíz del proyecto).
   Nota: el nombre de clase .btn--sol se conserva por historia; ahora es naranja.
   Las variables (--tinta, --onyx, --azul-500…) vienen de tokens.css, que se
   carga antes y también declara la fuente Geist.
   ========================================================================== */

:root {
  --alto-cabecera: 76px;
  --ancho: var(--page-content-width);   /* 1344 px; con los márgenes, contenedor de 1440 */
  --margen: var(--page-margin);
  --linea: var(--hueso);
  --linea-fuerte: var(--nube);
  --suave: var(--yeso);
  --h1: var(--text-heading-lg);      /* los titulares de la portada son largos: 36 → 60 px */
  --h1-int: var(--text-heading);     /* páginas interiores: 32 → 48 px */
  --h2: var(--text-heading);
  --h3: var(--text-subheading);
  --sec: clamp(3.5rem, 2rem + 4vw, 5rem);
  --radio-btn: var(--radius-buttons);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  letter-spacing: var(--tracking-body);
  color: var(--onyx);
  font-weight: 400;   /* 25/10/2026: antes 500; con 400 y sin tracking negativo el texto respira */
  background: var(--marfil);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
::selection { background: var(--naranja-200); color: var(--onyx); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: var(--tracking-heading); color: var(--color-heading-display); text-wrap: balance; }
h2 { font-weight: 450; }   /* titulares de sección más ligeros que el H1 (21/10/2026) */
h3 { font-size: var(--h3); font-weight: 600; line-height: 1.3; letter-spacing: var(--tracking-subheading); color: var(--color-heading); }
p, li { text-wrap: pretty; }
em { font-style: normal; color: var(--color-highlight); }
.i { width: 1.1em; height: 1.1em; flex: none; }

.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--tinta); color: var(--blanco); padding: 10px 16px; border-radius: var(--radius-buttons); }
.saltar:focus { top: 12px; }
.contenedor { width: 100%; max-width: calc(var(--ancho) + var(--margen) * 2); margin-inline: auto; padding-inline: var(--margen); }
.provisional { position: absolute; left: 12px; bottom: 12px; background: rgb(9 12 29 / .85); color: #fff; font-size: .75rem; padding: 4px 10px; border-radius: var(--radius-badges); }
.antetitulo { font-size: var(--text-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--pizarra); margin-bottom: .75rem; }

/* --- Botones --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 44px; padding: 12px 24px; border-radius: var(--radio-btn);
  font-weight: 700; font-size: var(--text-body-sm); letter-spacing: 0; text-decoration: none; line-height: 1.2;
  border: 1px solid transparent; transition: background var(--duration-state) var(--ease-settle), color var(--duration-hover), border-color var(--duration-hover);
  cursor: pointer;
}
.btn--primario { background: var(--color-action); color: var(--color-action-text); }
.btn--primario:hover { background: var(--color-action-hover); }
.btn--borde { padding: 11px 23px; border-color: var(--hueso); color: var(--tinta); background: transparent; }
.btn--borde:hover { border-color: var(--tinta); }
.btn--chico { min-height: 40px; padding: 9px 18px; }
.btn--grande { min-height: 52px; padding: 15px 32px; font-size: var(--text-body); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Cabecera --------------------------------------------------------------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgb(255 252 245 / .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--duration-state); }
.cabecera.con-sombra { border-color: var(--linea); }
.cabecera__barra { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.cabecera__logo img { height: 46px; width: auto; }
.cabecera__nav { display: flex; gap: 4px; margin-left: auto; font-size: var(--text-body-sm); font-weight: 500; }
.nav__it { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 6px 14px; border: 0; background: none; cursor: pointer; font-weight: 500; border-radius: var(--radius-badges); color: var(--carbon); transition: background var(--duration-hover); }
.nav__it:hover, .nav__grupo.abierto > .nav__it { background: rgb(0 0 0 / .05); }
.nav__flecha { width: 11px; height: 11px; transition: transform var(--duration-state); }
.nav__grupo.abierto > .nav__it .nav__flecha { transform: rotate(180deg); }

/* --- Mega menú: tarjeta flotante bajo la cabecera, se abre con clic o con el cursor ------ */
.nav__grupo { position: static; }
/* El menú corto se ancla a su botón, pero estirado al alto de la barra para que baje a la misma altura que los mega menús */
.cabecera__nav { align-self: stretch; align-items: center; }
.nav__grupo--simple { position: relative; align-self: stretch; display: flex; align-items: center; }
.mega {
  position: absolute; top: calc(100% - 4px); left: 50%; width: min(1040px, calc(100% - var(--margen) * 2));
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radius-cards); box-shadow: 0 18px 48px rgb(9 12 29 / .14), var(--shadow-subtle);
  visibility: hidden; opacity: 0; transform: translate(-50%, -6px);
  transition: opacity var(--duration-state) var(--ease-settle), transform var(--duration-state) var(--ease-settle), visibility 0s linear var(--duration-state);
  color: var(--onyx); text-align: left; overflow: hidden;
}
.nav__grupo.abierto > .mega { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition-delay: 0s; }
.mega--simple { left: 0; width: 330px; transform: translate(0, -6px); }
.nav__grupo--simple.abierto > .mega { transform: translate(0, 0); }
.mega__cols { display: grid; gap: 32px; padding: 28px 32px; }
.mega__cols--servicios { grid-template-columns: 1.7fr 1fr; }
.mega__cols--quien { grid-template-columns: 1.8fr 1fr; }
.mega__filas { display: grid; gap: 2px; }
.mega__cols--servicios .mega__filas { grid-template-columns: 1fr 1fr; gap: 4px 20px; align-content: start; }
.mega__filas--solo-texto { padding: 10px; gap: 0; }
.mega__fila { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 10px; text-decoration: none; transition: background var(--duration-hover); }
.mega__fila:hover, .mega__fila:focus-visible { background: var(--suave); }
.mega__fila b, .mega__empresas b { display: block; font-weight: 650; font-size: var(--text-body-sm); color: var(--tinta); line-height: 1.3; }
.mega__fila small, .mega__empresas small { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 450; color: var(--pizarra); line-height: 1.4; }
.mega__ico { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--suave); color: var(--tinta); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: background var(--duration-hover), color var(--duration-hover); }
.mega__fila:hover .mega__ico, .mega__empresas:hover .mega__ico { background: var(--tinta); color: #fff; }
.mega__destacado { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border-radius: var(--radius-cards); background: var(--onyx); color: #fff; }
.mega__destacado b { font-size: 1.25rem; font-weight: 650; line-height: 1.2; letter-spacing: var(--tracking-subheading); }
.mega__destacado p { font-size: var(--text-body-sm); color: var(--niebla); font-weight: 450; }
.mega__destacado .btn { margin-top: auto; background: #fff; color: var(--onyx); }
.mega__destacado .btn:hover { background: var(--naranja-400); }
.mega__tit { font-family: var(--font-body); font-size: .8125rem; font-weight: 600; color: var(--pizarra); letter-spacing: 0; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--linea); }
.mega__familias { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
.mega__fam li a, .mega__ciudades + a { display: block; padding: 5px 0; font-size: var(--text-body-sm); font-weight: 500; text-decoration: none; color: var(--tinta); }
.mega__fam li a:hover { color: var(--color-link); }
.mega__lado { display: grid; gap: 18px; align-content: start; }
.mega__empresas { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--linea); border-radius: var(--radius-cards); text-decoration: none; transition: border-color var(--duration-hover); }
.mega__empresas:hover { border-color: var(--tinta); }
.mega__ciudades { display: flex; flex-wrap: wrap; gap: 8px; }
.mega .pastilla { padding: 5px 12px; font-size: .875rem; }
.mega__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding: 14px 32px; background: var(--suave); border-top: 1px solid var(--linea); font-size: .8125rem; color: var(--pizarra); font-weight: 500; }
.mega__pie a { color: var(--tinta); font-weight: 650; text-decoration: none; }
.mega__pie a:hover { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.mega__pie span { margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .mega, .nav__flecha { transition: none; } }

/* Color y detalle del mega menú (24/10/2026): título con filete y línea de colores que se dibuja al pasar, íconos sobre Bruma, enlaces azules */
.mega { --mega-ease: cubic-bezier(.2, .7, .2, 1); }
.mega__tit { position: relative; font-family: var(--font-body); font-size: 1rem; font-weight: 650; color: var(--onyx); letter-spacing: 0; padding-bottom: 13px; margin-bottom: 14px; border: 0; }
.mega__tit::before, .mega__tit::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea); }
.mega__tit::after { bottom: -.5px; height: 2px; background: linear-gradient(90deg, var(--azul-500) 0%, var(--azul-300) 40%, var(--naranja-400) 75%, var(--naranja-500) 100%); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--mega-ease); }
.mega__col:hover > .mega__tit::after, .mega__col:focus-within > .mega__tit::after { transform: scaleX(1); }
.mega__rotulo { font-family: var(--font-body); font-size: .75rem; font-weight: 650; color: var(--azul-700); margin-bottom: 4px; }
.mega__familias { gap: 22px 32px; }
.mega__fam li a { position: relative; display: block; padding: 5px 0; font-size: var(--text-body-sm); font-weight: 550; color: var(--color-link); }
.mega__fam li a::after { content: "→"; display: inline-block; margin-left: .45em; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s var(--mega-ease); }
.mega__fam li a:hover, .mega__fam li a:focus-visible { color: var(--azul-700); }
.mega__fam li a:hover::after, .mega__fam li a:focus-visible::after { opacity: 1; transform: none; }
.mega__fila b { color: var(--color-link); }
.mega__fila:hover { background: var(--azul-50); }
.mega__fila:hover b { color: var(--azul-700); }
.mega__ico { background: var(--azul-100); color: var(--azul-500); }
.mega__fila:hover .mega__ico { background: var(--azul-500); color: #fff; }
.mega__empresas { background: var(--azul-50); border-color: var(--azul-100); }
.mega__empresas .mega__ico { background: var(--azul-100); color: var(--azul-700); }
.mega__empresas:hover { border-color: var(--azul-500); }
.mega__empresas:hover .mega__ico { background: var(--azul-500); color: #fff; }
.mega__empresas b { color: var(--azul-900); }
.mega .pastilla { border-color: var(--azul-100); background: var(--azul-50); color: var(--azul-600); font-weight: 550; }
.mega .pastilla:hover { border-color: var(--azul-500); background: var(--azul-500); color: #fff; }
.mega__destacado { background: radial-gradient(120% 85% at 100% 0, rgb(29 97 242 / .6), transparent 62%), radial-gradient(90% 70% at 0 100%, rgb(255 138 0 / .22), transparent 60%), var(--onyx); }
.mega__pie { background: var(--azul-50); border-top-color: var(--azul-100); }
.mega__pie a { color: var(--color-link); }
.mega__pie a:hover { color: var(--azul-700); }
.mega__wa::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--azul-500); vertical-align: 1px; animation: mega-punto 2s ease-out infinite; }
@keyframes mega-punto { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 138 0 / .5); } 50% { box-shadow: 0 0 0 5px rgb(255 138 0 / 0); } }
.nav__grupo.abierto > .mega .mega__fam li, .nav__grupo.abierto > .mega .mega__fila { animation: mega-entra .45s var(--mega-ease) both; }
@keyframes mega-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mega__tit::after, .mega__fam li a::after { transition: none; } .mega__wa::before, .nav__grupo.abierto > .mega li { animation: none; } }
.menu { display: none; margin-left: auto; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 24px; height: 2px; background: var(--tinta); transition: transform var(--duration-state); }
.menu[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu__panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--linea); padding: 12px var(--margen) 24px; display: grid; gap: 2px; box-shadow: var(--shadow-subtle); }
.menu__panel a:not(.btn) { padding: 12px 0; font-size: 1.125rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--linea); }
.menu__panel .btn { margin-top: 16px; }
.menu__panel { max-height: calc(100vh - var(--alto-cabecera)); overflow-y: auto; }
.menu__grupo { border-bottom: 1px solid var(--linea); }
.menu__grupo summary { display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; padding: 12px 0; font-size: 1.125rem; font-weight: 500; width: auto; height: auto; gap: 0; }
.menu__grupo summary::-webkit-details-marker { display: none; }
.menu__grupo[open] > summary .nav__flecha { transform: rotate(180deg); }
.menu__cuerpo { display: grid; padding: 0 0 14px 12px; }
.menu__panel .menu__cuerpo a:not(.btn) { font-size: 1rem; padding: 9px 0; border-bottom: 0; color: var(--tinta); }
.menu__sub { margin-top: 10px; font-size: .75rem; font-weight: 600; color: var(--pizarra); }
.menu__cuerpo .mega__ciudades { padding: 6px 0 4px; }
.menu__panel .menu__cuerpo .pastilla { padding: 6px 14px; font-size: .9375rem; border-bottom: 1px solid var(--hueso); }
.menu__panel .menu__cuerpo .pastilla:hover { color: #fff; }
@media (max-width: 1080px) {
  .cabecera__nav { display: none; }
  .cabecera__wa { margin-left: auto; }
  .menu { display: block; margin-left: 0; }
}
@media (max-width: 520px) {
  .cabecera__barra { min-height: 64px; gap: 12px; }
  .cabecera__logo img { height: 38px; }
  .cabecera__wa { padding-inline: 14px; }
}

/* --- Secciones genéricas ------------------------------------------------------ */
.bloque { padding-block: var(--sec); }
.bloque + .bloque:not(.bloque--suave):not(.relacionadas) { padding-top: 0; }
.bloque--suave, .bloque--suave + .bloque, .bloque.problema, .bloque.comparar, .bloque.comparar + .bloque { padding-top: var(--sec) !important; }
.bloque--suave { background: var(--suave); }
.bloque > .contenedor > h2 { font-size: var(--h2); max-width: 22ch; margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.bloque > .contenedor > p, .bloque > .contenedor > .lista, .bloque > .contenedor > .lista-pasos, .bloque > .contenedor > h3, .bloque > .contenedor > h4, .bloque > .contenedor > .nota { max-width: 72ch; }
.bloque > .contenedor > p + p, .bloque > .contenedor > * + .lista, .bloque > .contenedor > * + .lista-pasos { margin-top: 1rem; }
.bloque > .contenedor > * + h3 { margin-top: 2rem; }
.bloque > .contenedor > h3 + p, .bloque > .contenedor > h3 + .lista { margin-top: .5rem; }
.bloque > .contenedor > * + .tabla, .bloque > .contenedor > * + .faq, .bloque > .contenedor > * + .guias, .bloque > .contenedor > * + .demos, .bloque > .contenedor > * + .sectores, .bloque > .contenedor > * + .planes, .bloque > .contenedor > .tabla + p, .bloque > .contenedor > .demos + p, .bloque > .contenedor > .planes + * , .bloque > .contenedor > .propiedad + p, .bloque > .contenedor > .sectores + p, .bloque > .contenedor > .zonas + p, .bloque > .contenedor > * + .zonas, .bloque > .contenedor > * + .nube, .bloque > .contenedor > .nube + .lista, .bloque > .contenedor > .calc + h3, .bloque > .contenedor > * + .calc, .bloque > .contenedor > * + .dolores, .bloque > .contenedor > * + .paraquien, .bloque > .contenedor > * + .rubros, .bloque > .contenedor > * + .zona__titulo { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.bloque a:not(.btn):not([class]) { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bloque a:not(.btn):not([class]):hover { color: var(--azul-700); }
.bloque--suave a:not(.btn):not([class]) { color: var(--azul-600); }   /* Azul Sivar sobre Yeso solo llega a 4.35:1 */
.lista { display: grid; gap: .55rem; }
.lista li { position: relative; padding-left: 1.6rem; }
.lista li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--azul-500); }
.lista-pasos { counter-reset: paso; display: grid; gap: 1rem; }
.lista-pasos li { counter-increment: paso; position: relative; padding-left: 3rem; }
.lista-pasos li::before { content: counter(paso); position: absolute; left: 0; top: -.1em; width: 2rem; height: 2rem; display: grid; place-content: center; border-radius: 50%; background: var(--tinta); color: #fff; font-weight: 700; font-size: var(--text-body-sm); }
.nota { background: var(--blanco); border: 1px solid var(--hueso); border-radius: var(--radius-cards); padding: 1rem 1.25rem; margin-top: 1.5rem; }
.remate { margin-top: 2rem; font-size: 1.125rem; font-weight: 500; }
.mas { margin-top: 1.75rem; }
.mas a { font-weight: 700; font-size: var(--text-body-sm); color: var(--color-link); text-decoration: none; display: inline-flex; align-items: center; gap: .5em; }
.mas a:hover { text-decoration: underline; }

/* Tablas */
.tabla { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radius-cards); background: #fff; }
.tabla table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .9688rem; }
.tabla th, .tabla td { text-align: left; padding: 14px 16px; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla thead th { color: var(--pizarra); font-weight: 600; font-size: var(--text-12); letter-spacing: var(--tracking-caps); text-transform: uppercase; border-bottom: 1px solid var(--tinta); }
.tabla thead th:last-child { color: var(--azul-700); background: var(--azul-50); }
.tabla tbody th { font-weight: 600; width: 28%; }
.tabla tbody td:last-child { background: var(--azul-50); font-weight: 500; }
.tabla tbody tr:last-child > * { border-bottom: 0; }

/* Preguntas frecuentes (estilo y movimientos del FAQ de loboandco.com): el número se vuelve círculo, la línea de abajo
   se dibuja, la pregunta se corre un poco y el + gira a ×. Las curvas son resortes; sitio.js usa --faq-resorte-linea
   para el panel que crece y pone .cerrando para que el aspecto cambie al empezar a cerrar */
.faq { --faq-tinta: var(--tinta); --faq-suave: var(--pizarra); --faq-linea: var(--linea-fuerte); --faq-circulo: 40px; --faq-hueco: 24px;
  --faq-resorte-pop: linear(0, 0.035, 0.125, 0.246, 0.382, 0.519, 0.647, 0.761, 0.856, 0.933, 0.992, 1.033, 1.06, 1.075, 1.081, 1.079, 1.073, 1.063, 1.052, 1.041, 1.031, 1.021, 1.013, 1.007, 1.002, 0.998, 0.996, 0.994, 0.994, 0.994, 0.994, 0.995, 0.996, 0.996, 0.997, 1);
  --faq-resorte-texto: linear(0, 0.022, 0.079, 0.159, 0.251, 0.349, 0.446, 0.539, 0.625, 0.702, 0.77, 0.828, 0.877, 0.917, 0.949, 0.975, 0.994, 1.008, 1.017, 1.024, 1.027, 1.028, 1.028, 1.027, 1.025, 1.022, 1.019, 1.017, 1.014, 1.011, 1.009, 1.007, 1.005, 1.004, 1.003, 1);
  --faq-resorte-icono: linear(0, 0.035, 0.124, 0.247, 0.386, 0.527, 0.661, 0.78, 0.881, 0.962, 1.024, 1.066, 1.093, 1.106, 1.108, 1.103, 1.092, 1.078, 1.063, 1.048, 1.033, 1.021, 1.011, 1.002, 0.996, 0.992, 0.989, 0.988, 0.988, 0.989, 0.99, 0.992, 0.994, 0.995, 0.997, 1);
  --faq-resorte-linea: linear(0, 0.023, 0.08, 0.157, 0.246, 0.337, 0.427, 0.513, 0.591, 0.661, 0.723, 0.776, 0.822, 0.86, 0.892, 0.918, 0.939, 0.956, 0.969, 0.979, 0.987, 0.993, 0.997, 1, 1.002, 1.003, 1.004, 1.004, 1.004, 1.004, 1.004, 1.004, 1.003, 1.003, 1.002, 1);
  --faq-resorte-respuesta: linear(0, 0.021, 0.075, 0.151, 0.241, 0.337, 0.433, 0.527, 0.614, 0.693, 0.763, 0.824, 0.876, 0.918, 0.953, 0.98, 1.001, 1.016, 1.026, 1.033, 1.037, 1.038, 1.037, 1.035, 1.032, 1.029, 1.025, 1.022, 1.018, 1.015, 1.012, 1.009, 1.007, 1.005, 1.003, 1);
  --faq-tiempo-linea: 460ms;
  border-top: 1px solid var(--faq-linea); max-width: 880px; }
.pregunta summary { position: relative; display: flex; align-items: center; gap: var(--faq-hueco); padding: 20px 4px; border-bottom: 1px solid var(--faq-linea); list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }
.pregunta summary::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--faq-tinta); transform: scaleX(0); transform-origin: left center; transition: transform var(--faq-tiempo-linea) var(--faq-resorte-linea); }
.pregunta__num { position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: var(--faq-circulo); height: var(--faq-circulo); font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--faq-suave); transition: color .2s; }
.pregunta__num::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--faq-tinta); opacity: 0; transform: scale(0); transition: transform 495ms var(--faq-resorte-pop), opacity 495ms var(--faq-resorte-pop); }
.pregunta__texto { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); font-weight: 550; line-height: 1.3; letter-spacing: var(--tracking-subheading); color: var(--faq-suave); transition: transform 390ms var(--faq-resorte-texto), color .25s ease; }
.pregunta__icono { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; color: var(--faq-tinta); opacity: .4; transition: transform 565ms var(--faq-resorte-icono), opacity .2s ease; }
.pregunta__icono svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .pregunta summary:hover::after { transform: scaleX(.3); }
  .pregunta summary:hover .pregunta__num::before { opacity: .1; transform: scale(.85); }
  .pregunta summary:hover .pregunta__texto { color: var(--faq-tinta); transform: translateX(4px); }
  .pregunta summary:hover .pregunta__icono { opacity: 1; }
}
.pregunta[open]:not(.cerrando) summary::after { transform: scaleX(1); }
.pregunta[open]:not(.cerrando) .pregunta__num { color: #fff; }
.pregunta[open]:not(.cerrando) .pregunta__num::before { opacity: 1; transform: scale(1); }
.pregunta[open]:not(.cerrando) .pregunta__texto { color: var(--faq-tinta); transform: translateX(4px); }
.pregunta[open]:not(.cerrando) .pregunta__icono { opacity: 1; transform: rotate(45deg); }
.respuesta p { max-width: 72ch; margin: 0; padding: 22px 48px 26px calc(var(--faq-circulo) + var(--faq-hueco) + 4px); color: var(--onyx); line-height: 1.65; }
@media (max-width: 767px) {
  .faq { --faq-circulo: 36px; --faq-hueco: 14px; }
  .pregunta summary { padding-block: 16px; }
  .respuesta p { padding: 14px 8px 22px calc(var(--faq-circulo) + var(--faq-hueco) + 4px); }
}
@media (prefers-reduced-motion: reduce) {
  .pregunta summary::after, .pregunta__num, .pregunta__num::before, .pregunta__texto, .pregunta__icono { transition: none; }
}

/* --- Numeración de secciones (01, 02…): círculo, línea y nombre corto sobre el título ------------------- */
.seccion { display: flex; align-items: flex-start; gap: clamp(14px, 1.5vw, 22px); margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem); grid-column: 1 / -1; }
.seccion__num { flex: none; display: grid; place-content: center; width: 54px; height: 54px; border: 1px solid var(--nube); border-radius: 50%; font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--onyx); }
.seccion__linea { flex: 1; min-width: 0; padding-top: 26px; }
.seccion__linea i { display: block; height: 1px; background: var(--nube); transform-origin: left center; }
.seccion__nombre { margin-top: .7rem; font-size: var(--text-12); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--pizarra); }
/* Aparición al hacer scroll (sitio.js pone .seccion--espera y luego .seccion--vista) */
.seccion--espera .seccion__num { opacity: 0; transform: rotate(-180deg) scale(.9); }
.seccion--espera .seccion__linea i { transform: scaleX(0); background: var(--azul-500); }
.seccion--espera .seccion__nombre { opacity: 0; transform: translateY(-6px); }
.seccion--vista .seccion__num { opacity: 1; transform: none; transition: transform 1s cubic-bezier(.22, 1, .36, 1), opacity .5s ease; }
.seccion--vista .seccion__linea i { transform: none; background: var(--nube); transition: transform 1.3s cubic-bezier(.65, 0, .35, 1) .15s, background-color .9s ease 1.2s; }
.seccion--vista .seccion__nombre { opacity: 1; transform: none; transition: opacity .6s ease .55s, transform .6s ease .55s; }
@media (max-width: 520px) { .seccion__num { width: 44px; height: 44px; font-size: .875rem; } .seccion__linea { padding-top: 21px; } }

/* --- Portada: titular sobre tres fotos que se funden (27–28/10/2026) -------------------------------
   Las fotos van detrás; un velo Marfil desde arriba (y desde la izquierda en escritorio) deja leer el titular.
   Abajo, una franja que oscurece la foto con las cifras y el enlace a empresas.
   Cada foto se ve unos 2 s y se funde en 1 s (--paso). */
.portada {
  --paso: 3s;   /* 2 s quieta + 1 s de fundido */
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: max(36rem, 90svh);
  padding-top: clamp(3rem, 1.5rem + 4vw, 5.5rem);
  background: var(--marfil);
}
.portada__fotos { position: absolute; inset: 0; z-index: -1; }
.portada__fotos::after { content: ""; position: absolute; inset: -2px 0 0;   /* -2px: sin raya en el borde de arriba */
  background:
    linear-gradient(to bottom, var(--marfil) 0%, rgb(255 252 245 / .9) 18%, rgb(255 252 245 / .55) 36%, rgb(255 252 245 / 0) 56%),
    linear-gradient(to right, rgb(255 252 245 / .55) 0%, rgb(255 252 245 / 0) 50%); }
.portada__foto { position: absolute; inset: 0; opacity: 0; animation: portada-foto calc(var(--paso) * 3) linear infinite; will-change: opacity; }
.portada__foto:nth-child(1) { opacity: 1; animation-delay: -1s; }   /* arranca ya visible */
.portada__foto:nth-child(2) { animation-delay: calc(var(--paso) - 1s); }
.portada__foto:nth-child(3) { animation-delay: calc(var(--paso) * 2 - 1s); }
.portada__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 40%); }
/* Ciclo de 9 s: entra en 1 s, se queda 2 s, sale en 1 s mientras entra la siguiente */
@keyframes portada-foto { 0% { opacity: 0; } 11.1% { opacity: 1; } 33.3% { opacity: 1; } 44.4% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .portada__foto { animation: none; } .portada__foto:not(:first-child) { display: none; } }

.portada__contenido { position: relative; }
.portada h1 { font-size: clamp(2.1rem, .6rem + 3.6vw, 4.2rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 560; max-width: 21em; text-wrap: balance; }
.portada__lead { margin-top: clamp(1rem, .75rem + 1vw, 1.5rem); font-size: clamp(1.0625rem, .95rem + .45vw, 1.375rem); line-height: 1.45; color: var(--onyx); font-weight: 450; }
.portada__planes {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; min-height: 48px; padding: 12px 26px;
  border-radius: var(--radius-buttons); background: var(--naranja-500); color: var(--onyx);
  font-weight: 650; text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  transition: background var(--duration-state) var(--ease-settle);
}
.portada__planes:hover { background: var(--naranja-400); }
.portada__planes .i { width: 16px; height: 16px; transition: transform .2s ease; }
.portada__planes:hover .i { transform: translateX(3px); }
@media (min-width: 761px) { .portada__linea { display: block; } }

/* Franja de abajo: oscurece la foto, sin caja */
.portada__abajo { margin-top: auto; padding-top: clamp(4rem, 6vw, 6rem); }
.portada__franja {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem 3rem; flex-wrap: wrap;
  padding-block: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  color: #fff;
}
.portada__abajo { position: relative; z-index: 1; }
/* Degradado oscuro de abajo hacia arriba (Onyx al 75 % → transparente) detrás de las cifras y el mensaje de empresas;
   empieza un poco arriba de ellos (el padding-top de .portada__abajo). Sin desenfoque: las fotos van tal cual. */
.portada__abajo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgb(9 12 29 / .75) 0%, rgb(9 12 29 / .75) 35%, rgb(9 12 29 / 0) 100%); }
.portada__contenido { z-index: 1; }
.portada .cifras { padding-left: clamp(0rem, 3vw, 3rem); }
.portada__empresas { font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); line-height: 1.35; color: rgb(255 255 255 / .92); max-width: none; }
.portada__empresas a { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; color: var(--naranja-500); font-weight: 600; text-decoration: none; }
.portada__empresas a .i { width: 18px; height: 18px; }
.portada__empresas a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 761px) { .portada__empresas a { display: flex; width: fit-content; } .portada__empresas { margin-right: clamp(0rem, 8vw, 9rem); } }
.portada__credito { position: absolute; right: 12px; bottom: 8px; margin: 0; font-size: .6875rem; color: rgb(255 255 255 / .6); }

/* Celular: todo sobre la foto; el texto centrado arriba y la foto empieza más abajo para que no la tape */
@media (max-width: 760px) {
  .portada { min-height: max(36rem, 90svh); padding-top: 2.25rem; text-align: center; }
  .portada__fotos { top: 17%; }
  .portada__fotos::after { background: linear-gradient(to bottom, var(--marfil) 0%, rgb(255 252 245 / .75) 14%, rgb(255 252 245 / 0) 40%); }
  .portada__foto img { object-position: var(--foco-movil, var(--foco, 50% 50%)); }
  .portada h1 { font-size: clamp(1.5rem, .7rem + 3.6vw, 2.25rem); line-height: 1.12; }
  .portada__lead { font-size: 1rem; line-height: 1.6; }
  .portada__planes { margin-top: .4rem; min-height: 0; padding: 4px 0; background: none; color: var(--color-link); font-size: 1.0625rem; }
  .portada__planes:hover { background: none; }
  .portada__abajo { padding-top: 5rem; }
  .portada__franja { flex-direction: column; justify-content: center; gap: 1.75rem; padding-block: 1.5rem 2.75rem; }
  .portada .cifras { padding-left: 0; justify-content: center; }
  .portada .cifras__signo, .portada .cifras sup { color: #fff; }   /* en celular, $ y /mes en blanco */
  .portada__empresas { font-size: 1.125rem; }
  .portada__empresas a { display: flex; justify-content: center; }
}

@media (max-width: 520px) { :root { --alto-cabecera: 64px; } }


/* Portada: selector de camino (negocio / empresa). Radios nativos: funciona sin JS y con teclado */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.camino__elige { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; margin: 0; border: 1px solid rgb(9 12 29 / .12); border-radius: var(--radius-buttons); background: rgb(255 255 255 / .7); backdrop-filter: blur(6px); }
.camino__elige label { position: relative; cursor: pointer; }
.camino__elige input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.camino__elige span { display: block; padding: 10px 20px; border-radius: var(--radius-buttons); font-size: .9375rem; font-weight: 600; text-align: center; white-space: nowrap; color: var(--onyx); transition: background-color .2s ease, color .2s ease; }
.camino__elige label:hover span { background: rgb(9 12 29 / .05); }
.camino__elige input:checked + span { background: var(--tinta); color: #fff; }
.camino__elige input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.camino__panel--empresa { display: none; }
.camino:has(input[value="empresa"]:checked) .camino__panel--negocio { display: none; }
.camino:has(input[value="empresa"]:checked) .camino__panel--empresa { display: block; }
.camino__panel { animation: camino-entra .35s ease both; }
@keyframes camino-entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .camino__panel { animation: none; } .camino__elige span { transition: none; } }
.camino__nota { margin-top: 1.25rem; font-size: .875rem; color: var(--onyx); font-weight: 500; max-width: 40ch; }
.camino__nota a { color: var(--color-link); white-space: nowrap; }
.camino__otro { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgb(9 12 29 / .12); font-size: .8125rem; color: var(--onyx); max-width: 40ch; }
.camino__otro a { color: var(--color-link); font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) { .camino { width: 100%; } .camino__elige { display: grid; width: 100%; } .camino__elige span { padding-inline: 10px; } }

/* Cifras de la portada (sobre la franja oscura): número grande, descripción debajo y una línea fina entre columnas.
   El $ y el /mes van en la misma línea base que el número. */
.cifras { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
.cifras li { display: grid; justify-items: center; align-content: start; gap: .7rem; text-align: center; padding-inline: var(--cifras-aire, clamp(1.5rem, .75rem + 2vw, 2.75rem)); }
.cifras li:first-child { padding-left: 0; }
.cifras li:last-child { padding-right: 0; }
.cifras li + li { border-left: 1px solid rgb(255 255 255 / .2); }
.cifras strong { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); font-weight: 400; line-height: 1; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.cifras__signo, .cifras sup { font-style: normal; font-size: .36em; font-weight: 500; letter-spacing: 0; color: var(--naranja-500); vertical-align: baseline; position: static; }
.cifras__signo { margin-right: .08em; }
.cifras sup { margin-left: .12em; }
.cifras span { font-size: var(--text-12); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; color: rgb(255 255 255 / .85); max-width: none; white-space: nowrap; }   /* saltos fijos en el HTML: la caja mide lo que el texto y el aire queda igual entre columnas */
@media (max-width: 520px) { .cifras { --cifras-aire: 1rem; } .cifras strong { font-size: 2.5rem; } .cifras span { font-size: .6875rem; } }

/* Equipo (computadora + celular) */
.equipo { position: relative; padding: 0 0 12% 0; }
.equipo__pantalla { position: relative; background: var(--onyx); border-radius: var(--radius-images); padding: 26px 8px 8px; box-shadow: var(--shadow-subtle-2); aspect-ratio: 16 / 10.5; overflow: hidden; }
.equipo__barra { position: absolute; top: 9px; left: 12px; display: flex; gap: 5px; }
.equipo__barra i { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .35); }
.equipo__pantalla img, .equipo__celular img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.equipo__pantalla img { border-radius: 8px; }
.equipo__celular { position: absolute; right: -2%; bottom: 0; width: 30%; aspect-ratio: 9 / 18.5; background: var(--onyx); border: 1px solid rgb(255 255 255 / .12); border-radius: 22px; padding: 7px; box-shadow: var(--shadow-subtle-2); overflow: hidden; }
.equipo__celular img { border-radius: 16px; }
.equipo__nombre { position: absolute; top: 34px; left: 22px; color: #fff; font-weight: 700; font-size: .875rem; letter-spacing: -.01em; text-shadow: 0 1px 8px rgb(0 0 0 / .45); }
.equipo__celular .equipo__nombre { top: 18px; left: 16px; font-size: .75rem; }
.equipo__titular { position: absolute; left: 22px; bottom: 22%; color: #fff; font-weight: 700; font-size: clamp(1.1rem, .8rem + 1.2vw, 1.9rem); line-height: 1.05; max-width: 11ch; text-shadow: 0 2px 16px rgb(0 0 0 / .5); letter-spacing: var(--tracking-heading-sm); }
.equipo__celular .equipo__titular { left: 14px; bottom: 18%; font-size: .9rem; max-width: 8ch; }

/* --- Dolores, para quién --------------------------------------------------------------- */
.dolores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--linea-fuerte); }
.dolores li { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--linea-fuerte); }
.dolores li:nth-child(odd) { padding-right: clamp(1.5rem, 3vw, 3rem); border-right: 1px solid var(--linea-fuerte); }
.dolores li:nth-child(even) { padding-left: clamp(1.5rem, 3vw, 3rem); }
.dolores h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); margin-bottom: .6rem; }
.dolores p { color: var(--onyx); }
.dolores a { color: var(--color-link); }

/* «El problema» en el inicio: fondo oscuro, foto a la izquierda y los cuatro bloques en una columna a la derecha */
.problema { background: var(--color-bg-dark); color: #fff; }
.problema .contenedor { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.problema .contenedor > h2 { grid-column: 1 / -1; color: #fff; }
.problema .contenedor > h2 em { color: var(--color-highlight-on-dark); }   /* «no tener» en Naranja */
.problema__foto { grid-column: 1; grid-row: 3 / span 2; position: sticky; top: 110px; margin: 0; }
.problema__escenas { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-images); }
.problema__escenas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.problema__escenas img.activa { opacity: 1; }
.problema__pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .6rem; }
.problema__foto figcaption { margin-left: auto; font-size: .8125rem; text-align: right; color: rgb(255 255 255 / .6); }
.problema__controles:not([hidden]) { display: flex; align-items: center; gap: .5rem; }
.problema__controles button { width: 1.7rem; height: 1.7rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.problema__controles button::after { content: ""; display: block; width: 1.2rem; height: .25rem; margin: auto; border-radius: 1rem; background: rgb(255 255 255 / .4); transition: background .2s ease, width .2s ease; }
.problema__controles button[aria-pressed="true"]::after { width: 1.6rem; background: var(--color-highlight-on-dark); }
.problema__controles button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: .25rem; }
.bloque.problema > .contenedor > .dolores { grid-column: 2; grid-row: 3 / span 2; align-self: center; grid-template-columns: 1fr; margin-top: 0; margin-bottom: 1.9rem; border-top: 0; }   /* centradas junto a la foto (el margen descuenta el pie de foto) */
.problema .dolores li:nth-child(n) { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0; border-right: 0; border-bottom-color: rgb(255 255 255 / .18); }
.problema .dolores li:first-child { padding-top: 0; }
.problema .dolores li.activa h3 { color: var(--color-highlight-on-dark); }
.problema .dolores h3 { color: #fff; }
.problema .dolores p { color: rgb(255 255 255 / .82); }
.problema strong { color: #fff; }
.bloque.problema a:not(.btn):not([class]) { color: var(--azul-200); }
.bloque.problema a:not(.btn):not([class]):hover { color: #fff; }
.bloque.problema > .contenedor > .remate { grid-column: 2; margin-top: 1.5rem; color: #fff; }
/* Numeración sobre fondo oscuro */
.problema .seccion .seccion__num { border-color: rgb(255 255 255 / .28); color: #fff; }
.problema .seccion .seccion__linea i { background: rgb(255 255 255 / .22); }
.problema .seccion--espera:not(.seccion--vista) .seccion__linea i { background: var(--azul-300); }
.problema .seccion .seccion__nombre { color: var(--azul-200); }
@media (max-width: 860px) {
  .problema .contenedor { grid-template-columns: 1fr; }
  .problema__foto { position: static; grid-row: auto; margin-bottom: 2rem; }
  .problema__escenas { aspect-ratio: 1; }
  .problema__escenas img { object-position: var(--foco-movil, 50% 40%); }   /* cada foto marca su recorte en cuadrado */
  .bloque.problema > .contenedor > .dolores, .bloque.problema > .contenedor > .remate { grid-column: 1; grid-row: auto; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .problema__escenas img, .problema__controles button::after { transition: none; } }
@media (max-width: 760px) { .dolores { grid-template-columns: 1fr; } .dolores li:nth-child(n) { padding: 24px 0; border-right: 0; } }

.paraquien { display: grid; grid-template-columns: 1.4fr 1fr; border: 1px solid var(--linea); border-radius: var(--radius-large-cards); overflow: hidden; background: #fff; }
.paraquien > div { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.paraquien__si { color: var(--onyx); }
.paraquien h3 { font-size: 1.5rem; margin-bottom: 1.25rem; }
.paraquien ul { display: grid; gap: 1.1rem; }
.paraquien li { display: flex; gap: 12px; align-items: flex-start; }
.paraquien li .i { margin-top: .25em; }
.paraquien__si .i { color: var(--azul-700); }
.paraquien__si strong { color: var(--tinta); }
/* «No es para ti» en oscuro: títulos y negritas en blanco, texto en Niebla, enlaces en azul claro */
.paraquien__no { background: var(--onyx); color: var(--niebla); }
.paraquien__no h3, .paraquien__no strong { color: #fff; }
.paraquien__no .i { color: rgb(255 255 255 / .45); }
.bloque .paraquien__no a:not(.btn):not([class]) { color: var(--color-highlight-alt-on-dark); }
.bloque .paraquien__no a:not(.btn):not([class]):hover { color: #fff; }
@media (max-width: 820px) { .paraquien { grid-template-columns: 1fr; } }

/* Franja de rubros arriba de «Para quién es»: cuatro fotos verticales con su nombre */
.rubros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rubros img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-images); }
.rubros span { display: block; margin-top: .75rem; font-weight: 650; font-size: 1.0625rem; letter-spacing: -.01em; }
.bloque > .contenedor > .nota-ia + .paraquien { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
@media (max-width: 820px) { .rubros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .rubros span { font-size: .9688rem; } }

/* Nota de las fotos hechas con IA, debajo de cada grupo de fotos */
.nota-ia { margin-top: .6rem !important; font-size: .8125rem; color: var(--color-text-soft); text-align: right; max-width: none !important; }

/* --- Cómo: chat + pasos ------------------------------------------------------------- */
/* La portada ya no usa este bloque (desde el 26/10/2026 va @tutiempo); @chat sigue en «Sobre Sivar Design» y @pasos queda disponible */
.chat { background: #efeae2; border: 1px solid var(--linea); border-radius: var(--radius-cards); overflow: hidden; max-width: 440px; width: 100%; }
.chat__barra { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: var(--onyx); color: #fff; }
.chat__barra img { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.chat__barra strong { display: block; font-size: .9375rem; }
.chat__barra span { font-size: .8125rem; color: var(--niebla); }
.chat__cuerpo { padding: 18px 14px; }
.chat__hilo { position: relative; display: grid; gap: 8px; }
.chat__msg { max-width: 84%; padding: 8px 12px; font-size: .9375rem; line-height: 1.45; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.chat__msg--c { justify-self: end; background: #d9fdd3; border-radius: 10px 2px 10px 10px; }
.chat__msg--s { justify-self: start; background: #fff; border-radius: 2px 10px 10px 10px; }
.chat__dia { justify-self: center; font-size: .75rem; background: #fff; padding: 3px 10px; color: var(--pizarra); border-radius: 6px; margin-block: 6px; }
.chat__enlace { display: inline-block; margin-top: 6px; color: var(--color-link); font-weight: 600; text-decoration: underline; }
.chat figcaption { padding: 10px 16px 14px; font-size: .875rem; color: var(--onyx); background: #fff; border-top: 1px solid var(--linea); }

.pasos { display: grid; gap: 0; border-top: 1px solid var(--linea-fuerte); }
.pasos li { display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--linea-fuerte); }
.pasos__n { grid-row: span 2; width: 48px; height: 48px; display: grid; place-content: center; border-radius: 50%; background: var(--azul-100); color: var(--azul-500); font-weight: 700; font-size: 1.375rem; } /* Azul sobre Bruma: solo en texto grande */
.pasos h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.375rem); }
.pasos p { margin-top: .4rem; color: var(--onyx); }

/* --- Ejemplos ------------------------------------------------------------------------ */
.demos { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.demos--tres { grid-template-columns: repeat(3, 1fr); }
.demo__enlace { display: grid; gap: 4px; text-decoration: none; height: 100%; padding: 18px 18px 22px; border: 1px solid var(--linea); border-radius: var(--radius-cards); background: #fff; transition: border-color var(--duration-hover); }
.demo__enlace:hover { border-color: var(--tinta); }
.demo .equipo { margin-bottom: 14px; }
.demo .equipo__nombre { font-size: .75rem; top: 32px; left: 16px; }
.demo .equipo__celular .equipo__nombre { display: none; }
.demo .equipo__celular { border-radius: 14px; padding: 5px; }
.demo .equipo__celular img { border-radius: 10px; }
.demo__rubro { font-size: var(--text-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--pizarra); }
.demo__nombre { font-weight: 650; font-size: 1.2rem; letter-spacing: var(--tracking-subheading); }
.demo__frase { font-size: .9375rem; color: var(--onyx); }
.demo__ver { margin-top: 8px; font-weight: 700; font-size: var(--text-body-sm); color: var(--color-link); display: inline-flex; gap: .5em; align-items: center; }
@media (max-width: 1080px) { .demos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .demos--tres { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .demos { grid-template-columns: 1fr; } }

/* --- Sectores, guías, ciudades ---------------------------------------------------------- */
.sectores, .guias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sectores li, .guias li { border: 1px solid var(--linea); border-radius: var(--radius-cards); overflow: hidden; background: #fff; transition: border-color var(--duration-hover); }
.sectores li:hover, .guias li:hover { border-color: var(--tinta); }
.sectores a, .guias a { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: var(--card-padding); text-decoration: none; }
.sectores p, .guias p { color: var(--onyx); font-size: .9688rem; }
.sectores span, .guia__leer { margin-top: auto; padding-top: .75rem; font-weight: 700; font-size: var(--text-body-sm); color: var(--color-link); display: inline-flex; align-items: center; gap: .5em; }
.guia__cat { font-size: var(--text-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--pizarra); }
.recursos__cat { font-size: 1.5rem !important; margin-top: 3rem !important; margin-bottom: 1.25rem; }
.recursos__cat:first-child { margin-top: 0 !important; }
/* Tarjetas de sector: el texto va en .sectores__texto; en el inicio llevan foto arriba */
.sectores a { padding: 0; gap: 0; }
.sectores__texto { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: var(--card-padding); }
.sectores--foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s var(--ease-out, ease); }
.sectores--foto li:hover img { transform: scale(1.03); }
@media (max-width: 960px) { .sectores, .guias { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sectores, .guias { grid-template-columns: 1fr; } }

/* Inicio: el resto de sectores bajo las tarjetas, en el mismo marco que ellas.
   Filas con línea fina (como el pie), separadas en los dos caminos: negocios y empresas. */
.sectores-mas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 clamp(1.5rem, 3vw, 3rem); margin-top: 16px; padding: var(--card-padding); background: #fff; border: 1px solid var(--linea); border-radius: var(--radius-large-cards); }
.nota-ia + .sectores-mas { margin-top: clamp(1rem, .5rem + 1vw, 1.5rem); }
.sectores-mas__grupo h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding-bottom: .85rem; font-size: clamp(1.2rem, 1.05rem + .4vw, 1.45rem); font-weight: 550; letter-spacing: var(--tracking-subheading); color: var(--onyx); }
.sectores-mas__grupo h3 small { font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--pizarra); }
.sectores-mas__grupo--empresas { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--linea); }
.sectores-mas__lista { border-top: 1px solid var(--linea-fuerte); }
.sectores-mas__lista--dos { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1rem, 2vw, 2rem); }
.sectores-mas__enlace { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; font-weight: 500; color: var(--onyx); transition: color var(--duration-hover); }
.sectores-mas__enlace .i { color: var(--ceniza); transition: transform var(--duration-hover), color var(--duration-hover); }
.sectores-mas__enlace:hover { color: var(--color-link); }
.sectores-mas__enlace:hover .i { color: var(--color-link); transform: translateX(3px); }
.sectores-mas__pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 1.25rem; font-size: .9375rem; color: var(--onyx); }
.sectores-mas__pie a { color: var(--color-link); }
.sectores-mas__todos { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; text-decoration: none; }
.sectores-mas__todos:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .sectores-mas { grid-template-columns: 1fr; }
  .sectores-mas__grupo--empresas { padding-left: 0; border-left: 0; margin-top: 1.75rem; }
}
@media (max-width: 600px) { .sectores-mas__lista--dos { grid-template-columns: 1fr; } }

.nube { line-height: 1.9; font-size: .9688rem; max-width: 100ch !important; }
.nube + .nube { margin-top: 1rem; }
/* Ciudades por zona (@ciudades): las cuatro zonas del país de oeste a este, cada departamento con sus ciudades en pastillas */
.zonas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.zonas__zona { background: var(--blanco); border: 1px solid var(--hueso); border-radius: var(--radius-cards); padding: 22px 22px 24px; display: grid; gap: 18px; align-content: start; }
.zonas__cabeza { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; padding-bottom: 16px; border-bottom: 1px solid var(--hueso); }
.zonas__nombre { font-size: 1.375rem; font-weight: 650; letter-spacing: var(--tracking-subheading); line-height: 1.2; margin: 0; }
.zonas__cuenta { font-size: var(--text-12); font-weight: 600; color: var(--azul-700); background: var(--azul-50); border-radius: var(--radius-badges); padding: 3px 10px; white-space: nowrap; }
.zonas__lema { grid-column: 1 / -1; font-size: var(--text-body-sm); color: var(--pizarra); margin: 0; }
.zonas__depto { display: grid; gap: 8px; }
.zonas__dep { justify-self: start; font-size: var(--text-12); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--pizarra); text-decoration: none; }
.zonas__ciudades { display: flex; flex-wrap: wrap; gap: 6px; }
.pastilla { display: inline-block; padding: 7px 14px; border: 1px solid var(--hueso); border-radius: var(--radius-tags); background: #fff; color: var(--tinta); font-size: .9375rem; font-weight: 500; line-height: 1.25; text-decoration: none; transition: border-color var(--duration-hover), background-color var(--duration-hover), color var(--duration-hover); }
.pastilla:hover { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.pastilla:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
@media (max-width: 1180px) { .zonas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .zonas { grid-template-columns: 1fr; } .zonas__zona { padding: 18px; } }

/* «Todo El Salvador» en el inicio: texto a la izquierda, tres fotos de lugares a la derecha
   y debajo los departamentos con sus ciudades en columnas */
.zona .contenedor { display: grid; grid-template-rows: auto auto 1fr; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.zona .contenedor > :not(h2, .zona__texto, .zona__fotos) { grid-column: 1 / -1; }
/* El titular y el texto van a la izquierda; las fotos arrancan a la altura del titular */
.zona .contenedor > h2 { grid-column: 1; grid-row: 2; }
.zona__texto { grid-column: 1; grid-row: 3; }
.zona__fotos { grid-column: 2; grid-row: 2 / span 2; }
.zona__texto > * + * { margin-top: 1.1rem; }
.zona__texto .lista { margin-top: 1.75rem; }
.zona__fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.zona__foto { margin: 0; }
.zona__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-images); }
.zona__foto--ancha { grid-column: 1 / -1; }
.zona__foto--ancha img { aspect-ratio: 16 / 9; }
.zona__foto figcaption { margin-top: .5rem; font-size: .875rem; font-weight: 600; color: var(--tinta); }
.zona__fotos .nota-ia { grid-column: 1 / -1; margin-top: 0 !important; }
.zona__titulo { font-size: 1.375rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem) !important; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .zona .contenedor { grid-template-columns: 1fr; grid-template-rows: none; } .zona .contenedor > h2, .zona__texto, .zona__fotos { grid-column: 1; grid-row: auto; } .zona__fotos { margin-top: 2rem; } }

/* --- Planes ------------------------------------------------------------------------------ */
/* Interruptor mensual / anual: solo aparece con JS; sin JS se ven los precios al mes */
.pago { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; }
.pago[hidden] { display: none; }
.pago__botones { display: inline-flex; padding: 4px; gap: 4px; background: var(--mercurio); border-radius: var(--radius-badges); }
.pago__opcion { font: inherit; font-size: .9375rem; font-weight: 550; padding: .6rem 1.2rem; border: 0; border-radius: var(--radius-badges); background: transparent; color: var(--tinta); cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.pago__opcion[aria-pressed="true"] { background: var(--naranja-500); color: var(--onyx); }
.pago__opcion[data-elegir="anual"][aria-pressed="true"] { background: var(--azul-500); color: #fff; }
.pago__opcion:focus-visible { outline: 2px solid var(--azul-500, #1f4fd8); outline-offset: 2px; }
.pago__regalo { font-size: var(--text-12); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-badges); background: var(--naranja-100); color: var(--naranja-800); }
.pago__nota { font-size: .9375rem; color: var(--pizarra); max-width: 60ch; }
.bloque > .contenedor > * + .pago { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.bloque > .contenedor > .pago + .planes { margin-top: 1.5rem; }
[data-pago][hidden] { display: none !important; }
.plan__lema { font-size: .9375rem; font-weight: 500; color: var(--pizarra); margin-top: .15rem; }
.plan--destacado .plan__lema { color: var(--niebla); }
.plan__ahorro { margin-top: .5rem; font-size: .8125rem; font-weight: 550; color: var(--azul-700); }
.plan__ahorro[data-pago="mensual"] { color: var(--pizarra); font-weight: 500; }
.plan--destacado .plan__ahorro[data-pago="mensual"] { color: var(--niebla); }
.plan--destacado .plan__ahorro { color: var(--naranja-500); }
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan { display: flex; flex-direction: column; padding: var(--card-padding); position: relative; background: #fff; border: 1px solid var(--linea); border-radius: var(--radius-large-cards); }
.plan--destacado { background: var(--onyx); border-color: var(--onyx); color: #fff; }
.plan__etiqueta { align-self: flex-start; font-size: var(--text-12); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-badges); background: var(--mercurio); color: var(--tinta); margin-bottom: 1rem; }
.plan--destacado .plan__etiqueta { background: var(--naranja-500); color: var(--onyx); }
.plan h3 { position: relative; padding-bottom: .7rem; font-size: clamp(1.6rem, 1.3rem + .8vw, 2rem); font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; color: var(--onyx); }
/* Línea de color del megamenú bajo el nombre del plan */
.plan h3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--azul-500) 0%, var(--azul-300) 40%, var(--naranja-400) 75%, var(--naranja-500) 100%); }
.plan--destacado h3 { color: #fff; }
/* La frase del cliente, con una comilla grande de apertura en lugar de « » */
.plan__frase { position: relative; margin-top: 1rem; padding-left: 2.1rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; color: var(--onyx); text-wrap: balance; }
.plan__frase::before { content: "\201C"; position: absolute; left: -.15rem; top: -.35rem; font-family: Georgia, "Times New Roman", serif; font-size: 4rem; font-weight: 400; line-height: 1; color: var(--azul-500); }
.plan--destacado .plan__frase { color: #fff; }
.plan--destacado .plan__frase::before { color: var(--naranja-500); }
.planes--mini .plan__frase { font-size: .9375rem; padding-left: 1.75rem; }
.planes--mini .plan__frase::before { font-size: 2.8rem; }
.plan__precio { display: flex; align-items: flex-end; gap: 8px; margin-top: 1rem; }
.plan__precio strong { font-weight: 700; font-size: clamp(2.6rem, 2rem + 1.5vw, 3.4rem); letter-spacing: var(--tracking-display); line-height: .95; color: var(--onyx); }
.plan__precio span { font-size: .8125rem; line-height: 1.25; color: var(--pizarra); padding-bottom: 4px; }
.plan--destacado .plan__precio span { color: var(--niebla); }
.plan--destacado .plan__precio strong { color: var(--naranja-500); }
.plan__largo { margin-top: 1rem; font-size: .9688rem; }
.plan__lista { display: grid; gap: .5rem; margin-top: 1.1rem; font-size: .9375rem; }
.plan__lista li { display: flex; gap: 8px; align-items: flex-start; }
.plan__lista .i { color: var(--azul-500); margin-top: .2em; }
.plan--destacado .plan__lista .i { color: var(--naranja-500); }
.plan__lista--suave { color: var(--onyx); }
.plan--destacado .plan__lista--suave { color: var(--niebla); }
.plan__ademas { margin-top: 1.25rem; font-size: var(--text-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--pizarra); }
.plan--destacado .plan__ademas { color: var(--niebla); }
.plan .btn { margin-top: auto; }
.plan .plan__lista--suave { margin-bottom: 1.75rem; }
@media (max-width: 900px) { .planes { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.planes--mini .plan { padding: 1.4rem 1.5rem; }
.planes--mini .plan h3 { font-size: 1.5rem; }
.planes--mini .plan__precio { margin-top: .5rem; font-size: .9375rem; color: var(--pizarra); }
.planes--mini .plan__precio strong { font-size: 2.2rem; }
.planes--mini .plan > p:last-child { margin-top: .5rem; font-size: .9375rem; }
.planes--mini .plan--destacado .plan__precio { color: var(--niebla); }
/* Funciones extra: dos grupos de filas (nombre y para qué sirve a la izquierda, precio a la derecha) */
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.extras__grupo { background: #fff; border: 1px solid var(--linea); border-radius: var(--radius-large-cards); padding: var(--card-padding); }
.extras__grupo h3 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: 550; line-height: 1.2; letter-spacing: var(--tracking-subheading); color: var(--onyx); padding-bottom: 1rem; border-bottom: 1px solid var(--linea-fuerte); }
.extras__grupo ul { margin-top: .25rem; }
.extra { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; border-top: 1px solid var(--linea); }
.extra:first-child { border-top: 0; }
.extra h4 { font-size: 1.0625rem; font-weight: 650; color: var(--onyx); }
.extra p { font-size: .9375rem; margin-top: .25rem; max-width: 52ch; }
.extra small { display: block; margin-top: .35rem; font-size: .8125rem; color: var(--pizarra); }
.extra__precio { display: flex; flex-direction: column; align-items: flex-end; flex: none; margin-top: 0 !important; text-align: right; }
.extra__precio strong { font-size: 1.5rem; font-weight: 700; letter-spacing: var(--tracking-display); color: var(--onyx); line-height: 1.1; }
.extra__precio span { font-size: .8125rem; color: var(--pizarra); }
.extras__pie { margin-top: 1.25rem; font-size: .9375rem; color: var(--pizarra); max-width: 80ch; }
.extras__pie a { color: var(--color-link); }
.bloque > .contenedor > * + .extras { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
@media (max-width: 900px) { .extras { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .extra { gap: 1rem; } .extra__precio strong { font-size: 1.25rem; } }
/* --- Tabla comparativa de planes -------------------------------------------------------- */
.bloque > .contenedor > .comp + .propiedad { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.comp__marco { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radius-large-cards); background: #fff; }
.comp__marco:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.comp table { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 0; font-size: .9688rem; }
.comp th, .comp td { padding: 13px 18px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.comp td { text-align: center; width: 16%; color: var(--onyx); }
.comp tbody th[scope="row"] { width: 36%; }
.comp tbody th[scope="row"] { text-align: left; font-weight: 500; color: var(--onyx); }
/* Primera columna fija al deslizar en pantallas angostas */
.comp tbody th[scope="row"], .comp thead td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
.comp thead th { padding: 22px 18px 16px; vertical-align: bottom; font-size: 1.125rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--tinta); border-bottom: 1px solid var(--tinta); }
.comp thead th:last-child { color: var(--pizarra); }
.comp thead .comp__destacado { background: var(--onyx); color: #fff; border-bottom-color: var(--onyx); border-radius: 14px 14px 0 0; }
.comp__etiqueta { display: block; width: fit-content; margin: 0 auto .6rem; padding: 3px 10px; border-radius: 999px; background: var(--naranja-500); color: var(--onyx); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; }
/* La columna de Profesional (recomendado) lleva un tinte verde de arriba abajo */
.comp tbody td:nth-child(3) { background: var(--azul-50); }
.comp tbody td:last-child { color: var(--pizarra); }
.comp__grupo th { text-align: left; padding-top: 26px; font-size: 1rem; font-weight: 650; color: var(--tinta); background: #fff; border-bottom-color: var(--tinta); }
.comp__grupo th span { position: sticky; left: 18px; }
.comp__precio th[scope="row"] { font-weight: 650; }
.comp__precio td { font-size: .8125rem; color: var(--pizarra); line-height: 1.3; }
.comp__precio td small { display: block; margin-top: .2rem; font-size: .75rem; color: var(--ceniza); }
.comp__precio td strong { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--onyx); }
.comp__costo td small { display: block; margin-top: .15rem; font-size: .75rem; opacity: .7; }
.comp__si .i { width: 18px; height: 18px; color: var(--azul-700); }
.comp__no { color: var(--nube); }
.comp tbody tr:last-child > * { border-bottom: 0; }
.comp__nota { margin-top: .75rem; font-size: .875rem; color: var(--color-text-soft); }
.comp__desliza { display: none; }
@media (max-width: 860px) {
  .comp__desliza { display: inline; }
  .comp table { min-width: 640px; font-size: .875rem; }
  .comp th, .comp td { padding: 11px 12px; }
  .comp thead th { font-size: .9375rem; padding-inline: 10px; }
  .comp tbody th[scope="row"], .comp thead td:first-child { width: 132px; min-width: 132px; box-shadow: 1px 0 0 var(--linea); }
  .comp__grupo th span { left: 12px; }
  .comp__precio td strong { font-size: 1.25rem; }
}
/* En celular, con sitio.js: un plan a la vez, elegido con los botones de arriba, sin deslizar de lado */
.comp__elige { display: none; }
@media (max-width: 640px) {
  .comp[data-col] .comp__elige { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: .75rem; padding: 4px; border-radius: 999px; background: rgb(29 32 47);
    position: sticky; top: 73px; z-index: 3; box-shadow: 0 0 0 8px var(--color-bg-dark); }
  .comp__elige button { min-height: 40px; padding: 0 4px; border: 0; border-radius: 999px; background: none; color: rgb(255 255 255 / .78); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
  .comp__elige button[aria-pressed="true"] { background: var(--naranja-500); color: var(--onyx); }
  .comp__elige button:focus-visible { outline: 2px solid var(--azul-300); outline-offset: 2px; }
  .comp[data-col] .comp__desliza { display: none; }
  .comp[data-col] table { min-width: 0; }
  .comp[data-col] tr > :not(:first-child) { display: none; }
  .comp[data-col="2"] tr > :nth-child(2), .comp[data-col="3"] tr > :nth-child(3),
  .comp[data-col="4"] tr > :nth-child(4), .comp[data-col="5"] tr > :nth-child(5) { display: table-cell; }
  .comp[data-col] tbody th[scope="row"], .comp[data-col] thead td:first-child { width: 58%; min-width: 0; }
  .comp[data-col] td { width: auto; }
}

/* «Compara los planes» en el inicio: sección oscura, más cómoda para leer una tabla larga */
.comparar { background: var(--color-bg-dark); color: #fff; }
.comparar .contenedor > h2 { color: #fff; }
.comparar .contenedor > p { color: rgb(255 255 255 / .78); }
.bloque.comparar > .contenedor > * + .comp { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.comparar .seccion .seccion__num { border-color: rgb(255 255 255 / .28); color: #fff; }
.comparar .seccion .seccion__linea i { background: rgb(255 255 255 / .22); }
.comparar .seccion--espera:not(.seccion--vista) .seccion__linea i { background: var(--azul-300); }
.comparar .seccion .seccion__nombre { color: var(--azul-200); }
.comparar .comp__marco { background: #0f1326; border-color: rgb(255 255 255 / .12); }
.comparar .comp th, .comparar .comp td { border-bottom-color: rgb(255 255 255 / .08); color: rgb(255 255 255 / .86); }
.comparar .comp tbody th[scope="row"], .comparar .comp thead td:first-child { background: #0f1326; color: #fff; }
.comparar .comp thead th { color: #fff; border-bottom-color: rgb(255 255 255 / .5); }
.comparar .comp thead th:last-child { color: var(--niebla); }
.comparar .comp thead .comp__destacado { background: var(--naranja-500); color: var(--onyx); border-bottom-color: var(--naranja-500); }
.comparar .comp__etiqueta { background: var(--onyx); color: var(--naranja-500); }
.comparar .comp tbody td:nth-child(3) { background: rgb(255 138 0 / .08); }
.comparar .comp tbody td:last-child { color: var(--niebla); }
.comparar .comp__grupo th { background: #0f1326; color: var(--naranja-500); border-bottom-color: rgb(255 255 255 / .5); }
.comparar .comp__precio td { color: var(--niebla); }
.comparar .comp__precio td strong { color: #fff; }
.comparar .comp__precio td:nth-child(3) strong { color: var(--naranja-500); }
.comparar .comp__precio td small { color: rgb(255 255 255 / .55); }
.comparar .comp__si .i { color: var(--naranja-500); }
.comparar .comp__no { color: rgb(255 255 255 / .28); }
.comparar .comp__nota { color: rgb(255 255 255 / .6); }
.bloque.comparar .comp__nota a { color: var(--azul-200); }
@media (max-width: 860px) { .comparar .comp tbody th[scope="row"], .comparar .comp thead td:first-child { box-shadow: 1px 0 0 rgb(255 255 255 / .12); } }

/* Notas de la tabla: ícono «i» junto al nombre de la fila y un globo claro que flota encima */
.comp__fila { display: inline; }
.comp__info { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; padding: 0; vertical-align: -5px; border: 0; border-radius: 50%; background: none; color: var(--ceniza); cursor: help; }
.comp__info svg { width: 15px; height: 15px; }
.comp__info:hover, .comp__info[aria-expanded="true"] { color: var(--azul-500); }
.comp__info:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.comparar .comp__info { color: rgb(255 255 255 / .42); }
.comparar .comp__info:hover, .comparar .comp__info[aria-expanded="true"] { color: var(--naranja-500); }
.comparar .comp__info:focus-visible { outline-color: var(--azul-300); }
.comp__globo { position: fixed; z-index: 60; max-width: min(300px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 12px; background: var(--humo); color: var(--tinta); font-size: .875rem; line-height: 1.45; box-shadow: 0 12px 32px rgb(0 0 0 / .35); pointer-events: none; }

/* «¿Tu caso es otro?»: índice de casos al final de la comparación, sobre oscuro.
   Cada fila es un enlace completo: la pregunta, a dónde ir y un dato corto para escanear. */
.bloque > .contenedor > .comp + .casos { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.casos__titulo { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: -.025em; color: #fff; max-width: none !important; }
.casos__grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4.5rem); margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.casos__grupo h4 { padding-bottom: .75rem; border-bottom: 1px solid rgb(255 255 255 / .5); font-size: 1rem; font-weight: 650; color: var(--naranja-500); }
.casos__grupo li { border-bottom: 1px solid rgb(255 255 255 / .1); }
.casos__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.25rem; row-gap: .15rem; align-items: center; padding: 1rem .25rem; text-decoration: none; color: inherit; transition: background-color .2s; }
.casos__pregunta { font-weight: 600; color: #fff; }
.casos__destino { grid-row: 2; color: var(--azul-200); font-size: .9375rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(157 191 255 / .4); }
.casos__dato { grid-column: 2; grid-row: 1 / span 2; padding: 5px 12px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; font-size: .8125rem; color: var(--niebla); white-space: nowrap; }
.casos__fila:hover { background: rgb(255 255 255 / .04); }
.casos__fila:hover .casos__destino { color: #fff; text-decoration-color: currentColor; }
.casos__fila:focus-visible { outline: 2px solid var(--azul-300); outline-offset: 2px; border-radius: 8px; }
.casos__empresa { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border: 1px solid rgb(255 255 255 / .16); border-radius: var(--radius-large-cards); background: rgb(255 255 255 / .03); }
.casos__empresa p { max-width: 62ch; color: rgb(255 255 255 / .78); }
.casos__empresa strong { color: #fff; }
@media (max-width: 860px) {
  .casos__grupos { grid-template-columns: 1fr; gap: 2rem; }
  .casos__fila { grid-template-columns: 1fr; }
  .casos__dato { grid-column: 1; grid-row: 3; justify-self: start; margin-top: .4rem; }
  .casos__empresa { flex-direction: column; align-items: flex-start; }
}

/* --- Página en propiedad: la otra forma de tenerla, sin cuota ------------------------------ */
.propiedad { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); background: var(--azul-50); border: 1px solid var(--azul-100); border-radius: var(--radius-large-cards); }
.propiedad h3 em { font-style: normal; color: var(--color-highlight-alt); }
.propiedad__antes { font-size: .8125rem; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--azul-900); }
.propiedad h3 { margin: .35rem 0 .75rem; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.75rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; color: var(--onyx); max-width: 18ch; }
.propiedad__texto > p:not([class]) { max-width: 52ch; }
.propiedad__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.5rem; margin-top: 1.5rem; }
.propiedad__lista li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.propiedad__lista .i { flex: none; margin-top: .2em; color: var(--azul-700); }
.propiedad__despues-titulo { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--azul-100); font-family: var(--font-mono); font-size: .75rem; font-weight: 700; letter-spacing: var(--tracking-mono-caps); text-transform: uppercase; color: var(--azul-900); }
.propiedad__despues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: .85rem; }
.propiedad__despues > div { padding: 16px 18px; background: rgb(255 255 255 / .7); border: 1px solid var(--azul-100); border-radius: var(--radius-cards); font-size: .9375rem; color: var(--pizarra); }
.propiedad__opcion { margin-bottom: .35rem; font-weight: 600; color: var(--onyx); }
.propiedad__opcion span { display: block; font-weight: 500; font-size: .875rem; color: var(--azul-700); }
.propiedad__precio { display: grid; gap: 1.25rem; padding: var(--card-padding); background: #fff; border: 1px solid var(--azul-100); border-radius: var(--radius-cards); }
.propiedad__monto { display: flex; align-items: flex-end; gap: 10px; }
.propiedad__monto strong { font-size: clamp(3rem, 2.2rem + 2.6vw, 4.5rem); font-weight: 700; letter-spacing: var(--tracking-display); line-height: .9; color: var(--onyx); }
.propiedad__monto span { padding-bottom: 6px; font-size: .875rem; line-height: 1.25; color: var(--pizarra); }
.propiedad__pagos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.propiedad__pagos li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--linea); font-size: .9375rem; }
.propiedad__pagos span { color: var(--pizarra); }
.propiedad__pagos b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--onyx); }
.propiedad__completo { margin-top: .75rem; font-size: .8125rem; color: var(--pizarra); }
.propiedad__precio .btn { width: 100%; justify-content: center; }
.propiedad__nota { font-size: .875rem; color: var(--pizarra); text-align: center; }
.propiedad__nota a { display: block; margin-top: .35rem; font-weight: 600; color: var(--color-link); text-underline-offset: 3px; }
@media (max-width: 960px) { .propiedad { grid-template-columns: 1fr; } .propiedad__precio { max-width: 460px; } }
@media (max-width: 600px) { .propiedad__lista, .propiedad__despues { grid-template-columns: 1fr; } }
.bloque > .contenedor > .planes + .propiedad--seo { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.bloque > .contenedor > .propiedad--seo + .propiedad { margin-top: 1rem; }
.propiedad--seo { background: var(--azul-50); border-color: var(--azul-100); }
.propiedad--seo .propiedad__antes { color: var(--azul-700); }
.propiedad--seo .propiedad__precio { border-color: var(--azul-100); }
.propiedad__lista--una { grid-template-columns: 1fr; }

.planes-mini { background: var(--blanco); padding-block: var(--sec) !important; }
.planes-mini__intro { margin-bottom: 2rem; }
.planes-mini__pie { display: flex; gap: 2rem; align-items: flex-start; margin-top: 2rem; flex-wrap: wrap; }
.planes-mini__pie ul { display: grid; gap: .4rem; font-size: .9375rem; color: var(--onyx); flex: 1; min-width: 280px; }
.planes-mini__pie ul a { color: var(--color-link); }
.planes-mini__botones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Cabeza de páginas interiores ------------------------------------------------------------- */
.cabeza { padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); background: var(--blanco); border-bottom: 1px solid var(--linea); }
.cabeza__rejilla { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.migas { font-size: .875rem; color: var(--pizarra); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 6px; }
.migas a { color: var(--color-link); text-decoration: none; }
.migas span:not([aria-current]) { color: var(--ceniza); }
.cabeza h1 { font-size: var(--h1-int); letter-spacing: -.03em; line-height: 1.12; }
.cabeza__lead { margin-top: 1.25rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); max-width: 60ch; color: var(--onyx); }
.cabeza__lead a { color: var(--color-link); }
.firma { margin-top: 1.25rem; font-size: .875rem; color: var(--pizarra); }
.firma a { color: var(--color-link); }
.resumen { background: #fff; border: 1px solid var(--linea); border-radius: var(--radius-large-cards); padding: var(--card-padding); }
.resumen__titulo { font-weight: 650; font-size: 1.125rem; letter-spacing: var(--tracking-subheading); margin-bottom: 1rem; }
.resumen ul { display: grid; gap: .75rem; }
.resumen li { display: flex; gap: 10px; align-items: flex-start; font-size: .9688rem; }
.resumen li .i { color: var(--azul-500); margin-top: .25em; }
.resumen .acciones { margin-top: 1.5rem; }
.resumen .acciones .btn { flex: 1 1 auto; }
.resumen__nota { margin-top: 1rem; font-size: .8125rem; color: var(--pizarra); }
@media (max-width: 900px) { .cabeza__rejilla { grid-template-columns: 1fr; } }

/* --- Cabeza con foto (páginas interiores con "foto" en los metadatos) --------------------------
   Idea del hero de loboandco.com: foto a pantalla completa que entra desenfocada y con zoom,
   velo Onyx desde abajo, titular grande abajo a la izquierda que gira letra por letra (sitio.js),
   una línea fina y debajo el texto con los botones y los tres puntos clave. */
.cabeza-foto {
  position: relative; isolation: isolate; overflow: hidden; display: flex;
  min-height: max(40rem, 88svh);
  margin-top: calc(var(--alto-cabecera) * -1);
  background: var(--onyx); color: #fff;
}
.cabeza-foto__img, .cabeza-foto__velo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.cabeza-foto__img { object-fit: cover; animation: foto-zoom 1.8s cubic-bezier(.22, .8, .24, 1) both, foto-foco .9s ease-out both; }
.cabeza-foto__velo { background: linear-gradient(to top, rgb(9 12 29 / .94) 0%, rgb(9 12 29 / .7) 42%, rgb(9 12 29 / .38) 78%, rgb(9 12 29 / .55) 100%); }
.cabeza-foto__interior {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--alto-cabecera) + 4rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}
.cabeza-foto__migas { margin-bottom: 1.25rem; color: rgb(255 255 255 / .7); }
.cabeza-foto__migas a { color: #fff; }
.cabeza-foto__migas span:not([aria-current]) { color: rgb(255 255 255 / .45); }
.cabeza-foto__titulo {
  color: #fff; font-size: clamp(2.5rem, 1rem + 5vw, 5.25rem); font-weight: 600; line-height: 1.03;
  letter-spacing: -.032em; max-width: 15ch;
}
.cabeza-foto__titulo em { color: var(--naranja-500); }
.cabeza-foto__titulo--medio { font-size: clamp(2.15rem, 1rem + 3.4vw, 4rem); max-width: 20ch; }
.cabeza-foto__titulo--largo { font-size: clamp(1.95rem, .95rem + 2.7vw, 3.4rem); line-height: 1.05; max-width: 25ch; }
.cabeza-foto__pie {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: end;
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: 1px solid rgb(255 255 255 / .28);
}
.cabeza-foto__lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3rem); line-height: 1.5; max-width: 52ch; color: rgb(255 255 255 / .9); }
.cabeza-foto__lead strong { color: #fff; }
.cabeza-foto__lead a { color: var(--azul-200); }
.cabeza-foto .acciones { margin-top: 1.5rem; }
.cabeza-foto__puntos { display: grid; gap: .7rem; justify-self: end; max-width: 30em; font-size: .9688rem; }
.cabeza-foto__puntos li { display: flex; gap: 10px; align-items: flex-start; color: rgb(255 255 255 / .9); }
.cabeza-foto__puntos .i { color: var(--naranja-500); margin-top: .25em; }
.cabeza-foto__ia { margin-top: 1.25rem; font-size: .75rem; color: rgb(255 255 255 / .55); text-align: right; }
.btn--claro { background: #fff; color: var(--onyx); }
.btn--claro:hover { background: var(--naranja-300); }
.btn--borde-claro { padding: 11px 23px; border-color: rgb(255 255 255 / .4); color: #fff; background: transparent; }
.btn--borde-claro:hover { border-color: #fff; }

/* Entrada: el texto bajo el titular aparece cuando el titular termina de girar */
.cabeza-foto__migas, .cabeza-foto__pie, .cabeza-foto__ia { animation: foto-sube .8s cubic-bezier(.22, .8, .24, 1) both; }
.cabeza-foto__migas { animation-delay: .25s; }
.cabeza-foto__pie { animation-delay: .9s; }
.cabeza-foto__ia { animation-delay: 1.3s; }
@keyframes foto-zoom { from { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes foto-foco { from { filter: blur(60px); } to { filter: blur(0); } }
@keyframes foto-sube { from { opacity: 0; translate: 0 14px; } }

/* Titular letra por letra: cada letra tiene dos caras; la de atrás gira hacia el frente */
.giro__palabra { display: inline-block; white-space: nowrap; }
.giro__letra { position: relative; display: inline-block; }
.giro__cara { display: inline-block; transform-origin: 50% 50% -.4em; backface-visibility: hidden; }
.giro__cara + .giro__cara { position: absolute; inset: 0; opacity: 0; }
.girando .giro__cara { animation: .85s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(var(--i, 0) * var(--paso, 32ms) + .35s); }
.girando .giro__cara:first-child { animation-name: giro-sale; }
.girando .giro__cara + .giro__cara { animation-name: giro-entra; }
@keyframes giro-sale { from { transform: perspective(600px) rotateX(0); opacity: 1; } to { transform: perspective(600px) rotateX(-90deg); opacity: 0; } }
@keyframes giro-entra { from { transform: perspective(600px) rotateX(90deg); opacity: 0; } to { transform: perspective(600px) rotateX(0); opacity: 1; } }

/* La cabecera flota transparente, en claro, sobre la foto hasta que se baja */
.cabecera__logo-claro { display: none; }
.con-foto .cabecera:not(.con-sombra) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.con-foto .cabecera:not(.con-sombra) .cabecera__logo img:first-child { display: none; }
.con-foto .cabecera:not(.con-sombra) .cabecera__logo-claro { display: block; }
.con-foto .cabecera:not(.con-sombra) .nav__it { color: #fff; }
.con-foto .cabecera:not(.con-sombra) .nav__it:hover, .con-foto .cabecera:not(.con-sombra) .nav__grupo.abierto > .nav__it { background: rgb(255 255 255 / .14); }
.con-foto .cabecera:not(.con-sombra) .cabecera__wa { background: #fff; color: var(--onyx); }
.con-foto .cabecera:not(.con-sombra) .menu summary span { background: #fff; }

@media (max-width: 900px) {
  .cabeza-foto { min-height: max(38rem, 100svh); }
  .cabeza-foto__pie { grid-template-columns: 1fr; }
  .cabeza-foto__puntos { justify-self: start; }
  .cabeza-foto__ia { text-align: left; }
}
@media (max-width: 520px) {
  .cabeza-foto__interior { padding-top: calc(var(--alto-cabecera) + 2.5rem); }
  .cabeza-foto .acciones { gap: 8px; }
  .cabeza-foto .acciones .btn { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cabeza-foto__img, .cabeza-foto__migas, .cabeza-foto__pie, .cabeza-foto__ia, .girando .giro__cara { animation: none; }
}

.indice { border-bottom: 1px solid var(--linea); padding-block: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); background: var(--blanco); }
.indice + .bloque { padding-top: var(--sec) !important; }
.indice__titulo { font-size: var(--text-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--pizarra); margin-bottom: .75rem; }
.indice ol { counter-reset: ind; columns: 2; column-gap: 3rem; max-width: 980px; }
.indice li { counter-increment: ind; break-inside: avoid; padding: 6px 0 6px 2rem; position: relative; font-size: .9688rem; }
.indice li::before { content: counter(ind, decimal-leading-zero); position: absolute; left: 0; font-weight: 600; font-size: .8125rem; color: var(--pizarra); top: 8px; font-variant-numeric: tabular-nums; }
.indice a { text-decoration: none; }
.indice a:hover { color: var(--color-link); text-decoration: underline; }
.indice__wa { margin-top: 1rem; font-size: .9375rem; color: var(--onyx); }
.indice__wa a { color: var(--color-link); text-decoration: underline; }
@media (max-width: 760px) { .indice ol { columns: 1; } }

.relacionadas { background: var(--blanco); }
.relacionadas h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem) !important; }
.relacionadas + .bloque { padding-top: var(--sec) !important; }

/* --- Cierre (llamada final) --------------------------------------------------------------------- */
.cierre { background: var(--dark-fade); color: #fff; padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.cierre__rejilla { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; }
.cierre .antetitulo { color: var(--naranja-500); }
.cierre h2 { font-size: var(--h2); color: #fff; }
.cierre h2 em { color: var(--color-highlight-on-dark); }
.cierre .cierre__titulo { margin-top: 0; max-width: none; font-family: var(--font-display); font-size: var(--h2); font-weight: 450; line-height: 1.1; letter-spacing: var(--tracking-heading); color: #fff; text-wrap: balance; }

/* --- Jerarquía por capítulos (prueba en restaurantes, "jerarquia": true) ---------------------------
   Cada H2 es un capítulo y sus partes van en H3: más grandes que un H3 de tarjeta y con aire arriba
   para que se lea el cambio de tema. Las guías relacionadas van dentro del capítulo, no aparte. */
.jerarquia .bloque > .contenedor > h2 { max-width: none; padding-top: clamp(1.25rem, 1rem + .8vw, 1.75rem); border-top: 1px solid var(--linea-fuerte); margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 3rem); }
.jerarquia .bloque > .contenedor > h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 600; line-height: 1.25; letter-spacing: var(--tracking-subheading); color: var(--color-heading-display); max-width: 40ch; }
.jerarquia .bloque > .contenedor > * + h3 { margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
.jerarquia .bloque > .contenedor > h2 + h3 { margin-top: 0; }
.jerarquia .bloque > .contenedor > h3 + * { margin-top: .75rem; }
.jerarquia .bloque > .contenedor > h3 + .demos, .jerarquia .bloque > .contenedor > h3 + .tabla, .jerarquia .bloque > .contenedor > h3 + .relacionadas-dentro { margin-top: 1.25rem; }
.relacionadas-dentro { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.relacionadas__titulo { margin: clamp(1rem, .5rem + 1.5vw, 2rem) 0 1.25rem; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 600; line-height: 1.25; letter-spacing: var(--tracking-subheading); color: var(--color-heading-display); }
.indice ol.indice--capitulos { columns: 3; max-width: none; }
.indice--capitulos > li > a { font-weight: 650; }
.indice ol.indice__sub { margin-top: .4rem; columns: 1; max-width: 34ch; }
.indice__sub li { counter-increment: none; padding: 4px 0; font-size: .875rem; }
.indice__sub li::before { content: none; }
.indice__sub a { color: var(--pizarra); }
@media (max-width: 900px) { .indice ol.indice--capitulos { columns: 1; } }
.guias h4 { font-size: var(--h3); font-weight: 650; line-height: 1.3; letter-spacing: var(--tracking-subheading); color: var(--color-heading); }
.cierre p { margin-top: 1rem; color: var(--niebla); max-width: 52ch; }
.cierre__accion p { font-size: .9375rem; }
.cierre__accion .acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.cierre__accion a:not(.btn) { color: #fff; }
@media (max-width: 860px) { .cierre__rejilla { grid-template-columns: 1fr; } }

/* --- Contacto + formulario --------------------------------------------------------------------- */
.contacto { background: var(--blanco); }
.contacto .contenedor { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; row-gap: 1.5rem; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contacto .contenedor > h2 { grid-column: 1; margin-bottom: 0; }
.contacto__texto { grid-column: 1; display: grid; gap: 1.1rem; }
.contacto .formulario { grid-column: 2; grid-row: 1 / span 2; }
.contacto .contenedor:has(> .seccion) { grid-template-rows: auto auto 1fr; }
.contacto .seccion { margin-bottom: 0; }
.contacto .contenedor:has(> .seccion) .formulario { grid-row: 2 / span 2; }
.lista--check li::before { background: var(--azul-500); }
@media (max-width: 860px) { .contacto .contenedor { grid-template-columns: 1fr; } .contacto .formulario { grid-column: 1; grid-row: auto; } }
.formulario { background: #fff; border: 1px solid var(--linea); border-radius: var(--radius-large-cards); padding: var(--card-padding); display: grid; gap: 1.1rem; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: .9375rem; }
.campo label span { font-weight: 400; color: var(--pizarra); }
.campo input, .campo textarea { width: 100%; border: 1px solid var(--nube); padding: 11px 14px; font-size: 1rem; background: #fff; border-radius: var(--radius-inputs); }
.campo input:focus, .campo textarea:focus { border-color: var(--azul-500); outline: 2px solid var(--azul-500); outline-offset: 1px; }
.campo small { font-size: .8125rem; color: var(--pizarra); }
.campo [aria-invalid="true"] { border-color: #c0392b; }
.formulario__estado:not(:empty) { background: var(--azul-50); border: 1px solid var(--azul-100); border-radius: var(--radius-inputs); padding: .75rem 1rem; font-size: .9375rem; }
.formulario__legal { font-size: .8125rem; color: var(--pizarra); }
.formulario__paso { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: var(--tracking-mono-caps); text-transform: uppercase; color: var(--pizarra); margin-bottom: -.4rem; }
.formulario__estado:empty { display: none; }
.formulario__legal a { color: var(--color-link); }
.formulario__legal em { color: inherit; }

/* --- Cotizar: línea de tiempo + formulario en dos pasos (cotizar-pagina-web.html) ----------------- */
.cotizar { background: var(--blanco); border-bottom: 1px solid var(--linea); padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem) var(--sec); }
.cotizar__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.cotizar h1 { font-size: var(--h1); max-width: 14ch; }
.cotizar h1 em { font-style: normal; color: var(--color-highlight); }
.cotizar__lead { margin-top: 1.25rem; font-size: var(--text-body-lg, 1.125rem); max-width: 46ch; }
.cotizar__pasos { list-style: none; margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0 0; padding: 0; display: grid; gap: 1.75rem; max-width: 48ch; }
.cotizar__pasos li { position: relative; padding-left: 2.25rem; }
.cotizar__pasos li::before { content: ""; position: absolute; left: 4px; top: .2rem; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--azul-500); background: var(--humo); z-index: 1; }
.cotizar__pasos li:last-child::before { background: var(--azul-500); border-color: var(--azul-500); }
.cotizar__pasos li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 1.1rem; bottom: -1.75rem; border-left: 1px dashed var(--nube); }
.cotizar__cuando { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: var(--tracking-mono-caps); text-transform: uppercase; color: var(--azul-500); }
.cotizar__pasos h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: 0; margin: .35rem 0 .3rem; }
.cotizar__pasos p:last-child { color: var(--pizarra); font-size: .9688rem; }
.cotizar__nota { margin-top: 2rem; font-size: .875rem; color: var(--pizarra); }
.cotizar__nota a, .cotizar__permiso a { color: var(--color-link); }
.cotizar__form { background: #fff; border: 1px solid var(--linea); border-radius: var(--radius-large-cards); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.cotizar__paso { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1.15rem; }
.cotizar__paso[hidden], .cotizar__listo[hidden] { display: none; }
.cotizar__paso > legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: 0; margin-bottom: .25rem; font-size: 1.375rem; font-weight: 600; color: var(--color-heading-display); }
.cotizar__num { display: block; width: 100%; font-family: var(--font-mono); font-size: .6875rem; font-weight: 400; letter-spacing: var(--tracking-mono-caps); text-transform: uppercase; color: var(--pizarra); }
.cotizar__opc { font-size: .8125rem; font-weight: 400; color: var(--pizarra); }
.cotizar .campo textarea { resize: vertical; }
.chips { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips > legend { width: 100%; padding: 0; margin-bottom: 8px; font-weight: 600; font-size: .9375rem; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 8px 15px; border: 1px solid var(--nube); border-radius: var(--radius-pill, 999px); font-size: .9063rem; line-height: 1.3; transition: background var(--duration-state), border-color var(--duration-state), color var(--duration-state); }
.chip:hover span { border-color: var(--tinta); }
.chip input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--azul-500); outline-offset: 2px; }
.chips[aria-invalid="true"] .chip span { border-color: #c0392b; }
.archivos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.archivo { position: relative; display: grid; gap: 2px; align-content: center; min-height: 88px; padding: 12px 14px; border: 1px dashed var(--nube); border-radius: var(--radius-inputs); cursor: pointer; transition: border-color var(--duration-state), background var(--duration-state); }
.archivo:hover, .archivo:focus-within { border-color: var(--azul-500); background: var(--azul-50, #f2f6ff); }
.archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.archivo__titulo { font-weight: 600; font-size: .9375rem; }
.archivo__ayuda { font-size: .8125rem; color: var(--pizarra); overflow-wrap: anywhere; }
.archivo.con-archivo { border-style: solid; border-color: var(--azul-500); background: var(--azul-50); }
.archivo.con-archivo .archivo__ayuda { color: var(--tinta); }
.cotizar__permiso { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; }
.cotizar__permiso input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--tinta); }
.cotizar__permiso[aria-invalid="true"] { color: #c0392b; }
.cotizar__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.cotizar__atras { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .9375rem; color: var(--pizarra); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cotizar__aviso { font-size: .8125rem; color: var(--pizarra); }
.cotizar__estado:not(:empty) { margin-top: 1rem; background: #fdf0ee; border: 1px solid #f3c9c2; border-radius: var(--radius-inputs); padding: .75rem 1rem; font-size: .9375rem; }
.cotizar__listo { display: grid; gap: 1rem; justify-items: start; outline: none; }
.cotizar__listo-titulo { font-size: 1.5rem; font-weight: 600; color: var(--color-heading-display); line-height: 1.2; }
.pagina-cotizar .bloque > .contenedor > h2 { font-size: var(--text-heading-sm, 1.75rem); }
@media (max-width: 960px) {
  .cotizar__rejilla { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .cotizar__lead { margin-top: 0; }
  .cotizar__form { margin-block: .75rem 1.5rem; }
  .cotizar__form { order: -1; }
  .cotizar__texto .cotizar__pasos { margin-top: 0; }
  .cotizar__texto { display: contents; }
  .cotizar__texto > .migas, .cotizar__texto > h1, .cotizar__texto > .cotizar__lead { order: -2; }
}
@media (max-width: 560px) { .archivos { grid-template-columns: 1fr; } .archivo { min-height: 64px; } }

/* --- Calculadora -------------------------------------------------------------------------------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--linea); border-radius: var(--radius-large-cards); overflow: hidden; background: #fff; }
.calc__opciones { padding: var(--card-padding); display: grid; gap: 1.75rem; border-right: 1px solid var(--linea); }
.calc fieldset { border: 0; display: grid; gap: .45rem; }
.calc legend { font-weight: 650; margin-bottom: .5rem; }
.calc__ayuda { font-size: .875rem; color: var(--pizarra); margin: -.25rem 0 .35rem; }
.calc label { display: flex; gap: 10px; align-items: flex-start; font-size: .9688rem; cursor: pointer; }
.calc input { accent-color: var(--azul-500); margin-top: .3em; }
/* Resultado: un solo plan, en Onyx, con el precio en naranja */
.calc__resultado { padding: var(--card-padding); background: var(--onyx); color: #fff; }
.calc__fijo { position: sticky; top: 96px; }
.calc__antetitulo { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: var(--tracking-mono-caps); text-transform: uppercase; color: var(--naranja-500); }
.calc__plan { font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); font-weight: 600; line-height: 1.1; margin-top: .5rem; }
.calc__precio { margin-top: .5rem; color: rgba(255,255,255,.75); }
.calc__precio b { font-size: 1.5rem; font-weight: 700; color: var(--naranja-500); font-variant-numeric: tabular-nums; margin-right: .25rem; }
.calc__porque { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; }
.calc__porque li { position: relative; padding-left: 1.4rem; font-size: .9688rem; color: rgba(255,255,255,.88); }
.calc__porque li::before { content: "✓"; position: absolute; left: 0; color: var(--naranja-500); font-weight: 700; }
.calc__cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.15); }
.calc__cifras dt { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: var(--tracking-mono-caps); text-transform: uppercase; color: rgba(255,255,255,.6); }
.calc__cifras dd { margin: .35rem 0 0; font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc__cifras small { display: block; font-size: .8125rem; font-weight: 400; color: rgba(255,255,255,.65); margin-top: .2rem; }
.calc__alterna { margin-top: 1.25rem; font-size: .9063rem; color: rgba(255,255,255,.75); }
.calc__alterna a, .calc__form { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.calc__botones { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 1.75rem; }
.calc__form { font-size: .9375rem; }
.calc__nota { margin-top: 1.25rem; font-size: .8125rem; color: rgba(255,255,255,.6); }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } .calc__opciones { border-right: 0; border-bottom: 1px solid var(--linea); } }

/* --- Artículos (guías) ---------------------------------------------------------------------------- */
.articulo .bloque > .contenedor > p, .articulo .bloque > .contenedor > .lista, .articulo .bloque > .contenedor > .lista-pasos { font-size: 1.0625rem; }

/* --- Pie ------------------------------------------------------------------------------------------- */
/* Pie: fondo Onyx con un resplandor azul, bandas verticales suaves y grano (todo fijo). */
.pie { --acc: 77 149 255;
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  background: var(--onyx); color: var(--niebla); padding-top: clamp(3.5rem, 2rem + 4vw, 6rem); font-size: .9375rem; }
.pie > .contenedor { position: relative; z-index: 2; }
.pie__regla { position: absolute; inset: 0 0 auto; height: 1px; z-index: 3; background: linear-gradient(90deg, rgb(var(--acc) / .35), rgb(var(--acc) / .12)); }
.pie__cielo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pie__cielo > i { position: absolute; inset: 0; }
.pie__lavado { background: radial-gradient(120% 90% at 8% 0%, rgb(var(--acc) / .16), transparent 55%), radial-gradient(90% 70% at 92% 8%, rgb(var(--acc) / .10), transparent 60%); }
.pie__bandas { background: repeating-linear-gradient(90deg, rgb(var(--acc) / .05) 0 1.6cqw, transparent 1.6cqw 4.2cqw); -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 60%); mask-image: linear-gradient(100deg, #000 0%, transparent 60%); }
.pie__grano { opacity: .12; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

.pie__rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 2.5rem; }
.pie__marca img { width: 150px; height: auto; margin-bottom: 1.25rem; }
.pie__marca p { max-width: 32ch; }
.pie__marca a { color: #fff; }
/* Títulos de columna en Celeste sobre una línea fina que se dibuja al aparecer */
.pie h2 { position: relative; align-self: stretch; padding-bottom: .8rem; margin-bottom: .6rem; font-size: var(--text-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--azul-300); }
.pie h2::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, rgb(var(--acc) / .55), rgb(var(--acc) / .2)); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .7, .1, 1); }
.pie--espera h2::after { transform: scaleX(0); }
.pie .pie__sub { margin-top: 1.75rem; }
.pie__rejilla > div:not(.pie__marca) { display: flex; flex-direction: column; align-items: flex-start; }
/* Enlaces: guion, desplazamiento y flecha al pasar el cursor */
.pie__enlace { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 5px 0; color: rgb(255 255 255 / .72); text-decoration: none; transition: color .25s; }
.pie__enlace span { transition: translate .35s cubic-bezier(.2, .8, .2, 1); }
.pie__enlace::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: var(--azul-300); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.pie__enlace svg { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--azul-300); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; translate: -6px 0; transition: opacity .25s, translate .35s cubic-bezier(.2, .8, .2, 1); }
.pie__enlace:hover, .pie__enlace:focus-visible { color: #fff; }
.pie__enlace:hover::before, .pie__enlace:focus-visible::before { transform: scaleX(1); }
.pie__enlace:hover span, .pie__enlace:focus-visible span { translate: 12px 0; }
.pie__enlace:hover svg, .pie__enlace:focus-visible svg { opacity: 1; translate: 10px 0; }
@media (prefers-reduced-motion: reduce) { .pie__enlace span, .pie__enlace svg, .pie__enlace::before, .pie h2::after { transition: none; } }
.pie__base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3.5rem; padding-block: 1.5rem 6rem; border-top: 1px solid rgb(255 255 255 / .12); font-size: .875rem; color: var(--niebla); }
.pie__base a { color: var(--niebla); }
@media (max-width: 960px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie__rejilla { grid-template-columns: 1fr; } }

/* Volver arriba (desde el 28/10/2026 ya no hay botón flotante de WhatsApp): abajo a la izquierda, con un anillo naranja que avanza según lo leído (sitio.js) */
.arriba { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(255 252 245 / .92); color: var(--ceniza, #8a8a8a); box-shadow: var(--shadow-subtle); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.arriba.visible { opacity: 1; visibility: visible; transform: none; }
.arriba:hover { color: var(--onyx); }
.arriba:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.arriba svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.arriba circle { fill: none; stroke-width: 2.5; }
.arriba__pista { stroke: rgb(9 12 29 / .1); }
.arriba__avance { stroke: var(--naranja-500); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--avance, 100); }
.arriba .arriba__flecha { position: relative; width: 20px; height: 20px; transform: none; }
@media (max-width: 640px) { .arriba { left: 12px; bottom: 12px; width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .arriba { transition: none; } }


@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* --- Acentos de color en sectores (prueba en restaurantes, "acentos": true) ---------------------------
   Cada capítulo tiene un color, el mismo en el índice y en su número: 1 Azul Sivar, 2 Esmeralda, 3 Sol.
   Cada ### va en un .parte; si lleva "@figura", el texto queda a la izquierda y la figura a la derecha.
   Las figuras (celular, comisiones, la cuenta) se dibujan en build.py con HTML; aquí solo su estilo. */
.acentos .capitulo--1, .acentos .indice--capitulos > li:nth-child(1) { --cap: var(--azul-500); --cap-sobre: #fff; --cap-tinte: var(--azul-50); --cap-borde: var(--azul-100); --cap-texto: var(--azul-600); }
.acentos .capitulo--2, .acentos .indice--capitulos > li:nth-child(2) { --cap: var(--azul-800); --cap-sobre: #fff; --cap-tinte: var(--azul-50); --cap-borde: var(--azul-100); --cap-texto: var(--azul-800); }
.acentos .capitulo--3, .acentos .indice--capitulos > li:nth-child(3) { --cap: var(--naranja-500); --cap-sobre: var(--onyx); --cap-tinte: var(--naranja-50); --cap-borde: var(--naranja-100); --cap-texto: var(--naranja-800); }
/* Páginas con un cuarto capítulo (renovar): vuelve el Azul Sivar, con su tinte */
.acentos .capitulo--4, .acentos .indice--capitulos > li:nth-child(4) { --cap: var(--azul-500); --cap-sobre: #fff; --cap-tinte: var(--azul-50); --cap-borde: var(--azul-100); --cap-texto: var(--azul-600); }

/* Índice: una tarjeta por capítulo, con su color */
.acentos .indice { background: #fff; }
.acentos .indice ol.indice--capitulos { columns: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.acentos .indice--capitulos > li { padding: 20px 22px 18px 62px; background: var(--cap-tinte); border: 1px solid var(--cap-borde); border-radius: var(--radius-cards); }
.acentos .indice--capitulos > li::before { content: counter(ind); left: 20px; top: 18px; width: 28px; height: 28px; display: grid; place-content: center; border-radius: 50%; background: var(--cap-num, var(--cap)); color: var(--cap-sobre); font-size: .8125rem; font-weight: 700; }
.acentos .indice--capitulos > li > a { font-size: 1.0625rem; line-height: 1.3; display: inline-block; padding-top: 2px; }
.acentos .indice--capitulos > li > a:hover { color: var(--onyx); }
.acentos .indice__sub a { color: var(--carbon); }
@media (max-width: 900px) { .acentos .indice ol.indice--capitulos { grid-template-columns: 1fr; } }

/* Cabeza de capítulo: número de color y una línea del mismo color encima */
.acentos .capitulo__cabeza { display: flex; align-items: flex-start; gap: clamp(.875rem, .5rem + 1vw, 1.25rem); padding-top: clamp(1.25rem, 1rem + .8vw, 1.75rem); border-top: 2px solid var(--cap); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.acentos .capitulo__num { flex: none; width: clamp(2.5rem, 2rem + 1.2vw, 3.25rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; background: var(--cap-num, var(--cap)); color: var(--cap-sobre); font-weight: 700; font-size: clamp(1.1rem, 1rem + .4vw, 1.375rem); margin-top: .15em; }
.acentos .capitulo__cabeza h2 { font-size: var(--h2); max-width: 24ch; }
.acentos .capitulo--2 { background: var(--azul-50); padding-top: var(--sec) !important; }
.acentos .capitulo--2 + .bloque { padding-top: var(--sec) !important; }

/* Partes de un capítulo */
.acentos .parte + .parte { margin-top: clamp(3rem, 2.25rem + 2.5vw, 5rem); }
.acentos .parte__texto > * + * { margin-top: 1rem; }
.acentos .parte__texto > h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 600; line-height: 1.25; letter-spacing: var(--tracking-subheading); color: var(--color-heading-display); max-width: 34ch; }
.acentos .parte__texto > h3 + * { margin-top: .75rem; }
.acentos .parte__texto > :is(p, .lista, h3) { max-width: 68ch; }
.acentos .parte__texto > * + :is(.tabla, .lista-pasos, .demos) { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.acentos .parte__texto > h3 + :is(.demos, .relacionadas-dentro) { margin-top: 1.25rem; }
.acentos .parte__texto > :is(.lista-pasos, .tabla) + * { margin-top: 1.5rem; }
.acentos .parte--figura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.acentos .capitulo__cabeza + .parte .parte__texto > p { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.5; max-width: 58ch; }
.acentos .capitulo .lista li::before { background: var(--cap); }
@media (max-width: 960px) { .acentos .parte--figura { grid-template-columns: 1fr; } }
/* El celular necesita más ancho por sus globos: debajo del texto antes que las otras figuras */
@media (max-width: 1180px) { .acentos .parte--figura:has(> .figura--celular) { grid-template-columns: 1fr; } }

/* Los tres pasos, en fila y unidos por una línea */
.acentos .parte__texto > .lista-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acentos .lista-pasos li { padding: 68px 24px 24px; background: #fff; border: 1px solid var(--cap-borde); border-radius: var(--radius-cards); }
.acentos .lista-pasos li::before { left: 24px; top: 24px; width: 32px; height: 32px; background: var(--cap-num, var(--cap)); color: var(--cap-sobre); }
.acentos .lista-pasos li:not(:last-child)::after { content: ""; position: absolute; top: 39px; left: 66px; right: -17px; border-top: 2px dashed var(--cap); }
.acentos .lista-pasos li strong { color: var(--onyx); }
.acentos .lista-pasos--titulos li strong:first-child { display: block; margin-bottom: .35rem; font-size: 1.125rem; font-weight: 650; letter-spacing: var(--tracking-subheading); }
.acentos .parte__texto > .lista-pasos:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .acentos .parte__texto > .lista-pasos:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acentos .lista-pasos:has(> li:nth-child(4)) li::after { content: none !important; } }
@media (max-width: 760px) { .acentos .parte__texto > .lista-pasos, .acentos .parte__texto > .lista-pasos:has(> li:nth-child(4)) { grid-template-columns: 1fr; } .acentos .lista-pasos li:not(:last-child)::after { content: none; } }

/* Tabla: la columna de Sivar con el color del capítulo */
.acentos .capitulo .tabla { border-color: var(--cap-borde); }
.acentos .capitulo .tabla thead th:last-child { background: var(--naranja-500); color: var(--onyx); }
.acentos .capitulo .tabla tbody td:last-child { background: var(--cap-borde); color: var(--onyx); font-weight: 600; }
.acentos .capitulo .tabla tbody td:nth-child(2) { color: var(--pizarra); }

/* Figura: el celular con la página de un restaurante y sus globos */
.figura { margin: 0; }
.figura--celular { position: relative; display: flex; justify-content: flex-end; padding-right: clamp(0px, 2vw, 24px); }
.cel { width: min(300px, 74%); background: var(--onyx); border-radius: 42px; padding: 10px; box-shadow: 0 32px 60px -24px rgb(9 12 29 / .45); }
.cel__pantalla { background: var(--c-fondo); color: var(--c-tinta); border-radius: 33px; overflow: hidden; padding-bottom: 14px; font-size: 12.5px; line-height: 1.35; letter-spacing: 0; }
.cel__barra > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel__barra { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 24px 16px 10px; font-weight: 700; font-size: 13px; }
.cel__barra i { font-style: normal; font-size: 11px; font-weight: 600; background: var(--c-acento); color: var(--c-sobre, #fff); padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.cel__foto { width: calc(100% - 20px); margin-inline: 10px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.cel__titulo { margin: 14px 16px 2px; font-weight: 700; font-size: 13px; }
.cel__menu { margin-inline: 16px; }
.cel__menu li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px dashed color-mix(in srgb, var(--c-tinta) 22%, transparent); }
.cel__menu b { flex: none; }
.cel__menu b { font-weight: 700; white-space: nowrap; }
.cel__datos { margin: 12px 16px 0; display: grid; gap: 6px; color: color-mix(in srgb, var(--c-tinta) 85%, transparent); }
.cel__datos li { display: flex; gap: 6px; align-items: center; }
.cel__datos svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cel__wa { margin: 14px 12px 0; display: flex; justify-content: center; align-items: center; gap: 6px; padding: 10px; border-radius: 99px; background: var(--c-oscuro); color: #fff; font-weight: 600; }
.cel__wa .i { width: 15px; height: 15px; }
.globo { position: absolute; right: calc(min(300px, 74%) + clamp(0px, 2vw, 24px) - 30px); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-badges); box-shadow: var(--shadow-subtle-2); font-size: var(--text-body-sm); font-weight: 650; color: var(--onyx); white-space: nowrap; }
.globo::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--g); }
.globo--fotos { top: 20%; --g: var(--azul-500); }
.globo--menu { top: 47%; --g: var(--azul-800); }
.globo--datos { top: 67%; --g: var(--naranja-500); }
.globo--reserva { top: 84%; --g: var(--azul-300); }
@media (max-width: 560px) {
  .figura--celular { flex-wrap: wrap; justify-content: center; gap: 8px; padding-right: 0; }
  .cel { width: min(280px, 100%); margin-bottom: 8px; }
  .globo { position: static; }
}

/* Figura: lo que te queda de un pedido, por app y directo */
.figura--comisiones { background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-large-cards); padding: var(--card-padding); }
.figura__titulo { margin-bottom: 1.25rem; font-weight: 650; font-size: var(--text-subheading); letter-spacing: var(--tracking-subheading); line-height: 1.3; color: var(--onyx); }
.barra + .barra { margin-top: 1.1rem; }
.barra__nombre { margin-bottom: .4rem; font-size: var(--text-body-sm); color: var(--pizarra); }
.barra__pista { display: flex; height: 46px; border-radius: 10px; overflow: hidden; background: var(--humo); font-weight: 700; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.barra__pista span { display: flex; align-items: center; padding-inline: 14px; white-space: nowrap; }
.barra__tuyo { background: var(--azul-500); color: #fff; }
.barra__comision { flex: none; min-width: max-content; justify-content: center; background: var(--naranja-500); color: var(--onyx); }
.barra__leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 1rem; font-size: .8125rem; color: var(--pizarra); }
.barra__leyenda li { display: flex; align-items: center; gap: 6px; }
.barra__muestra { width: 10px; height: 10px; border-radius: 3px; background: var(--azul-500); }
.barra__muestra--comision { background: var(--naranja-500); }
.figura__remate { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px dashed var(--nube); font-size: .9375rem; color: var(--onyx); }
.figura__remate strong { color: var(--azul-700); }

/* Figura: la cuota contada como la cuenta del restaurante, con un sello Sol */
.figura--cuenta { position: relative; justify-self: center; width: min(100%, 400px); padding-block: 20px; filter: drop-shadow(0 18px 28px rgb(9 12 29 / .14)); }
.cuenta { background: #fff; padding: 30px 28px 40px; border-radius: 4px 4px 0 0; rotate: -1.5deg; font-size: .9375rem; font-variant-numeric: tabular-nums; color: var(--onyx);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; }
.cuenta__marca { text-align: center; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.cuenta__mesa { margin-top: 2px; padding-bottom: 16px; text-align: center; font-size: var(--text-body-sm); color: var(--pizarra); border-bottom: 1.5px dashed var(--nube); }
.cuenta__lineas { display: grid; gap: 9px; padding-block: 16px; border-bottom: 1.5px dashed var(--nube); }
.cuenta__lineas li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; }
.cuenta__lineas li::before { content: ""; grid-column: 2; grid-row: 1; border-bottom: 1.5px dotted var(--nube); }
.cuenta__lineas b { grid-column: 3; font-size: .8125rem; font-weight: 650; color: var(--azul-700); }
.cuenta__opcional { padding-top: 14px; font-size: .8125rem; font-weight: 650; color: var(--pizarra); }
.cuenta__lineas--extra { padding-top: 8px; }
.cuenta__lineas--extra b { color: var(--onyx); }
.cuenta__total { display: grid; gap: 6px; padding-top: 16px; }
.cuenta__total div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cuenta__total dt { color: var(--pizarra); }
.cuenta__total dd { font-weight: 650; }
.cuenta__mes { margin-top: 4px; }
.cuenta__mes dt { font-weight: 700; color: var(--onyx); font-size: 1.125rem; }
.cuenta__mes dd { font-weight: 800; font-size: 2rem; letter-spacing: -.04em; line-height: 1; }
.cuenta__pie { margin-top: 16px; text-align: center; font-size: .8125rem; color: var(--pizarra); }
.sello { position: absolute; top: -4px; right: -22px; width: 116px; aspect-ratio: 1; padding: 16px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--naranja-500); color: var(--onyx); font-weight: 800; font-size: .875rem; line-height: 1.1; letter-spacing: -.01em; rotate: 10deg; }
@media (max-width: 560px) { .sello { right: -4px; width: 96px; font-size: .75rem; } .cuenta { padding-inline: 20px; } }

/* Un solo ejemplo: tarjeta ancha con la captura grande */
.acentos .demos--uno { grid-template-columns: 1fr; }
.acentos .demos--uno .demo__enlace { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: clamp(2rem, 4vw, 4.5rem); row-gap: .5rem; padding: clamp(20px, 3vw, 40px); background: var(--cap-tinte, var(--humo)); border-color: var(--cap-borde, var(--hueso)); border-radius: var(--radius-large-cards); }
.acentos .demos--uno .equipo { grid-column: 1; grid-row: 1 / -1; margin: 0; }
.acentos .demos--uno .demo__enlace > span { grid-column: 2; }
.acentos .demos--uno .demo__rubro { grid-row: 2; color: var(--cap-texto, var(--pizarra)); }
.acentos .demos--uno .demo__nombre { grid-row: 3; font-size: var(--text-heading-sm); line-height: 1.15; letter-spacing: var(--tracking-heading-sm); }
.acentos .demos--uno .demo__frase { grid-row: 4; font-size: var(--text-body); max-width: 36ch; }
.acentos .demos--uno .demo__ver { grid-row: 5; justify-self: start; margin-top: 1rem; padding: 12px 22px; border-radius: var(--radius-buttons); background: var(--tinta); color: #fff; }
.acentos .demos--uno .demo__enlace:hover { border-color: var(--cap, var(--tinta)); }
.acentos .demos--uno .demo__enlace:hover .demo__ver { background: var(--carbon); }
@media (max-width: 860px) { .acentos .demos--uno .demo__enlace { grid-template-columns: 1fr; grid-template-rows: none; } .acentos .demos--uno .equipo, .acentos .demos--uno .demo__enlace > span { grid-column: 1; grid-row: auto; } .acentos .demos--uno .equipo { margin-bottom: 1rem; } }

/* Guías: la categoría como etiqueta del color del capítulo */
.acentos .capitulo .guia__cat { align-self: flex-start; font-family: var(--font-body); padding: 3px 10px; border-radius: var(--radius-badges); background: var(--cap-tinte); color: var(--cap-texto); font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.acentos .capitulo .guias li:hover { border-color: var(--cap-texto); }

/* Preguntas frecuentes: banda Bruma, título a la izquierda y respuestas a la derecha */
.acentos .bloque:has(> .contenedor > .faq) { background: var(--azul-50); padding-top: var(--sec) !important; }
.acentos .bloque:has(> .contenedor > .faq) > .contenedor { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 5rem); align-items: start; }
.acentos .bloque > .contenedor > h2:has(+ .faq) { position: sticky; top: 110px; margin: 0; padding-top: 0; border-top: 0; font-size: var(--text-heading-sm); max-width: 16ch; }
.acentos .bloque > .contenedor > .faq { margin-top: 0; max-width: none; }
.acentos .faq { --faq-linea: var(--azul-200); }
@media (max-width: 860px) { .acentos .bloque:has(> .contenedor > .faq) > .contenedor { grid-template-columns: 1fr; } .acentos .bloque > .contenedor > h2:has(+ .faq) { position: static; } }

/* Cierre y planes */
.acentos .plan__icono { display: block; width: 52px; height: 52px; padding: 11px; margin-bottom: 1rem; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acentos .planes--mini .plan:nth-child(1) .plan__icono { background: var(--naranja-100); color: var(--naranja-800); }
.acentos .planes--mini .plan:nth-child(2) .plan__icono { background: var(--azul-100); color: var(--azul-700); }
.acentos .planes--mini .plan:nth-child(3) .plan__icono { background: var(--azul-100); color: var(--azul-600); }

/* --- Layout de ciudad ("ciudad-nueva", probado en Soyapango y aplicado a todas) ----------------------------------
   Sobre los acentos de los sectores: índice en filas sin caja, sin números de capítulo, búsqueda animada,
   negocios en filas, datos que coinciden y fotos de las ciudades cercanas. */
/* Con el índice en filas (ciudades y páginas de venta) los capítulos no llevan número: el color basta */
.acentos:has(.indice--filas) .capitulo__num { display: none; }
.acentos:has(.indice--filas) .capitulo__cabeza h2 { max-width: none; }
.indice-filas__grupo:nth-child(1), .indice-filas__grupo:nth-child(4) { --cap: var(--azul-500); }
.indice-filas__grupo:nth-child(2) { --cap: var(--azul-800); }
.indice-filas__grupo:nth-child(3) { --cap: var(--naranja-500); }

/* Índice: filas con flecha, como el panel de sectores del inicio, pero sin la caja */
.indice--filas { background: #fff; border-bottom: 0; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(1rem, .5rem + 1vw, 1.5rem); }
/* Cada grupo ocupa dos filas de la cuadrícula (título y lista) y las comparte con los otros: si un título
   pasa a dos líneas, las líneas de color y las filas de los tres grupos siguen a la misma altura */
.indice-filas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-template-rows: auto auto; gap: 0 clamp(1.5rem, 3vw, 3rem); }
.indice-filas__grupo { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.indice-filas__cap { align-self: end; }
.indice--filas li { padding: 0; }
.indice--filas li::before { content: none; }
.indice-filas__cap { padding-bottom: .85rem; border-bottom: 2px solid var(--cap); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); font-weight: 550; line-height: 1.25; letter-spacing: var(--tracking-subheading); }
.indice-filas__cap a { color: var(--onyx); text-decoration: none; }
.indice-filas__cap a:hover { color: var(--color-link); }
.indice-filas__enlace { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; font-size: .9688rem; font-weight: 500; line-height: 1.35; color: var(--onyx); transition: color var(--duration-hover); }
.indice-filas__enlace .i { flex: none; width: 16px; height: 16px; color: var(--ceniza); transition: transform var(--duration-hover), color var(--duration-hover); }
.indice-filas__enlace:hover { color: var(--color-link); }
.indice-filas__enlace:hover .i { color: var(--color-link); transform: translateX(3px); }
.indice--filas .indice__wa { margin-top: 1.5rem; }
/* Índice plano: una fila por capítulo, a dos columnas (planes y precios) */
.indice-filas--plano { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; column-gap: clamp(1.5rem, 3vw, 3rem); border-top: 2px solid var(--azul-500); }
.indice-filas--plano .indice-filas__enlace { padding-block: 1rem; font-size: 1.0625rem; }
@media (max-width: 700px) { .indice-filas--plano { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .indice-filas { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 2rem; } .indice-filas__grupo { grid-row: auto; grid-template-rows: auto; } }

/* Figura: la búsqueda que se escribe sola y la ficha de "Tu negocio" */
.figura--busqueda { display: grid; gap: 14px; width: 100%; max-width: 520px; justify-self: end; }
.busca { display: flex; align-items: center; gap: 12px; min-width: 0; height: 60px; padding: 0 22px; background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-badges); box-shadow: var(--shadow-subtle-2); font-size: 1.0625rem; color: var(--onyx); }
.busca svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--pizarra); stroke-width: 1.8; stroke-linecap: round; }
.busca__texto { min-width: 0; white-space: nowrap; overflow: hidden; }
.busca__cursor { flex: none; width: 2px; height: 1.25em; margin-left: -10px; background: var(--azul-500); animation: parpadeo 1.05s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.resultado { background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-large-cards); overflow: hidden; transition: opacity .45s var(--ease-settle), transform .45s var(--ease-settle); }
.figura--busqueda.escribiendo .resultado { opacity: .3; transform: translateY(8px); }
.resultado__mapa { display: block; width: 100%; height: auto; background: var(--azul-50); }
.calle { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; }
.calle--ancha { stroke-width: 14; }
.pin path { fill: var(--azul-500); }
.pin circle { fill: #fff; }
.resultado__ficha { display: grid; gap: 4px; padding: 18px 20px 20px; }
.resultado__nombre { font-size: 1.25rem; font-weight: 650; letter-spacing: var(--tracking-subheading); color: var(--onyx); }
.resultado__datos { font-size: .9375rem; color: var(--pizarra); }
.resultado__abierto { font-weight: 600; color: var(--azul-700); }
.resultado__botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.resultado__botones span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--hueso); border-radius: var(--radius-badges); font-size: .875rem; font-weight: 600; color: var(--azul-600); }
.resultado__botones span:first-child { background: var(--azul-500); border-color: var(--azul-500); color: #fff; }
.resultado__botones .i { width: 15px; height: 15px; }
.figura__pie { font-size: .875rem; line-height: 1.45; color: var(--pizarra); max-width: 52ch; }
@media (prefers-reduced-motion: reduce) { .busca__cursor { animation: none; } }

/* Los negocios de la ciudad en filas, a dos columnas */
.ciudad-nueva .parte__texto > .negocios-filas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1rem, 3vw, 3rem); margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); border-top: 1px solid var(--linea-fuerte); }
.negocios-filas li { display: flex; align-items: center; gap: .75rem; padding: .9rem 0; border-bottom: 1px solid var(--linea); font-weight: 500; color: var(--onyx); }
.negocios-filas li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cap, var(--azul-500)); }
@media (max-width: 700px) { .ciudad-nueva .parte__texto > .negocios-filas { grid-template-columns: 1fr; } }

/* Figura: los mismos datos en la página y en el perfil de Google */
.figura--coincide { display: grid; gap: 14px; width: 100%; max-width: 560px; justify-self: end; }
.coincide { padding: var(--card-padding); background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-large-cards); }
.coincide__cab, .coincide li { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: center; }
.coincide__cab { padding-bottom: 12px; border-bottom: 1px solid var(--linea-fuerte); font-weight: 650; color: var(--onyx); }
.coincide__cab span:last-child { grid-column: 3; }
.coincide li { padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: .9375rem; font-weight: 500; color: var(--onyx); }
.coincide li:last-child { border-bottom: 0; padding-bottom: 0; }
.coincide small { display: block; font-size: .8125rem; font-weight: 400; color: var(--pizarra); }
.coincide .i { justify-self: center; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--azul-500); color: #fff; }

/* Las ciudades cercanas, con la foto de su cabeza */
.ciudad-nueva .parte__texto > .cercanas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.cercanas a { display: grid; gap: 2px; text-decoration: none; color: var(--onyx); }
.cercanas img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 10px; border-radius: var(--radius-cards); transition: opacity var(--duration-hover); }
.cercanas a:hover img { opacity: .88; }
.cercanas__nombre { font-size: 1.0625rem; font-weight: 650; letter-spacing: var(--tracking-subheading); }
.cercanas a:hover .cercanas__nombre { color: var(--color-link); }
.cercanas__dep { font-size: .875rem; color: var(--pizarra); }
@media (max-width: 800px) { .ciudad-nueva .parte__texto > .cercanas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Portada: tras las tarjetas de planes, el paso a la página de planes y precios */
.bloque > .contenedor > .precio__mas { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; max-width: none; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); padding-top: clamp(1.25rem, 1rem + 1vw, 2rem); border-top: 1px solid var(--hueso); font-size: .9375rem; color: var(--pizarra); }
.precio__enlace { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; color: var(--tinta); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; transition: color var(--duration-hover); }
.precio__enlace:hover { color: var(--color-action-hover); text-decoration-thickness: 2px; }
.precio__enlace svg { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.btn--sol { background: var(--naranja-500); color: var(--onyx); }
.btn--sol:hover { background: var(--naranja-400); }

/* Ciudad: banda de empresas en Añil. Texto a la izquierda; a la derecha los sectores en filas y la foto
   del sector que se señala (sitio.js la cambia al pasar o enfocar una fila; sin él queda la del primero) */
.banda-empresas { background: var(--azul-900); color: #fff; padding-block: var(--sec) !important; }
.banda-empresas > .contenedor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(2rem, 5vw, 6rem); }
.banda-empresas > .contenedor > * { grid-column: 1; }
.jerarquia .banda-empresas > .contenedor > h2 { max-width: 16ch; margin-bottom: 1.25rem; padding-top: 0; border-top: 0; color: #fff; }
.banda-empresas > .contenedor > p { color: var(--azul-100); }
.banda-empresas > .contenedor > h2 + p { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.5; color: #fff; }
.banda-empresas > .contenedor > .banda-empresas__cta { margin-top: 1.75rem; }
.banda-empresas > .contenedor > .banda-empresas__panel { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
.banda-empresas__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; }
.banda-empresas__lista { border-top: 1px solid rgb(255 255 255 / .28); }
.banda-empresas__fila { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.1rem 0; border-bottom: 1px solid rgb(255 255 255 / .16); color: #fff; text-decoration: none; }
.banda-empresas__fila span { display: grid; gap: .25rem; }
.banda-empresas__fila b { font-size: 1.0625rem; font-weight: 600; transition: color var(--duration-hover); }
.banda-empresas__fila small { font-size: .875rem; line-height: 1.4; color: var(--azul-200); }
.banda-empresas__fila .i { flex: none; width: 16px; height: 16px; color: var(--azul-200); transition: transform var(--duration-hover), color var(--duration-hover); }
.banda-empresas__fila.activa b, .banda-empresas__fila:hover b { color: var(--naranja-500); }
.banda-empresas__fila.activa .i, .banda-empresas__fila:hover .i { color: var(--naranja-500); transform: translateX(3px); }
.banda-empresas__fotos { position: relative; min-height: 340px; border-radius: var(--radius-large-cards); overflow: hidden; background: var(--azul-800); }
.banda-empresas__fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease-settle); }
.banda-empresas__fotos img.activa { opacity: 1; }
@media (max-width: 960px) {
  .banda-empresas > .contenedor { grid-template-columns: 1fr; grid-template-rows: none; }
  .banda-empresas > .contenedor > .banda-empresas__panel { grid-column: 1; grid-row: auto; margin-top: 2rem; }
  .banda-empresas__panel { grid-template-columns: 1fr; }
  .banda-empresas__fotos { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
}

/* --- Guías: layout de artículo -----------------------------------------------------------------------
   Índice fijo a la izquierda que marca la sección que se lee (sitio.js) y una sola columna de lectura.
   Las secciones van seguidas, sin bandas ni líneas grandes: se leen como un texto, no como una venta. */
.articulo__rejilla { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; padding-block: clamp(3rem, 2rem + 3vw, 5rem) var(--sec); }
.articulo__lado { position: sticky; top: calc(var(--alto-cabecera) + 28px); }
.articulo__toc summary { list-style: none; margin-bottom: .9rem; font-size: .9375rem; font-weight: 650; color: var(--onyx); }
.articulo__toc summary::-webkit-details-marker { display: none; }
.articulo__toc ol { list-style: none; padding: 0; border-left: 2px solid var(--linea); }
.articulo__toc a { display: block; margin-left: -2px; padding: .5rem 0 .5rem 1rem; border-left: 2px solid transparent; font-size: .9375rem; line-height: 1.35; color: var(--pizarra); text-decoration: none; transition: color var(--duration-hover), border-color var(--duration-hover); }
.articulo__toc a:hover { color: var(--onyx); }
.articulo__toc a.activo { border-left-color: var(--azul-500); color: var(--onyx); font-weight: 600; }
.articulo__wa { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); font-size: .875rem; line-height: 1.5; color: var(--pizarra); }
.articulo__wa a { color: var(--color-link); }

.articulo__cuerpo { min-width: 0; max-width: 70ch; }
.articulo__cuerpo > .bloque { padding-block: 0 !important; background: none; }
.articulo__cuerpo > .bloque + .bloque { margin-top: clamp(2.75rem, 2rem + 2vw, 4rem); }
.articulo__cuerpo > .bloque > .contenedor { max-width: none; padding-inline: 0; }
.jerarquia .articulo__cuerpo > .bloque > .contenedor > h2 { max-width: none; margin-bottom: 1rem; padding-top: 0; border-top: 0; font-size: var(--text-heading-sm); line-height: 1.2; }
.articulo__cuerpo > .bloque > .contenedor > :is(p, .lista, .lista-pasos, h3, .nota) { max-width: none; font-size: 1.0625rem; line-height: 1.65; }
.articulo__cuerpo > .bloque > .contenedor > :is(.guias, .relacionadas-dentro) { margin-top: 1.5rem; }
.articulo__cuerpo .guias { grid-template-columns: 1fr; }
/* Pasos numerados de las guías: número en Bruma con texto Azul, y aire antes del párrafo que sigue a una lista */
.articulo__cuerpo .lista-pasos li::before { background: var(--azul-100); color: var(--azul-700); }
.articulo__cuerpo > .bloque > .contenedor > :is(.lista, .lista-pasos, .tabla) + p { margin-top: 1.5rem; }

@media (max-width: 960px) {
  .articulo__rejilla { grid-template-columns: 1fr; gap: 2rem; }
  .articulo__lado { position: static; }
  .articulo__toc { padding: 14px 18px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radius-cards); }
  .articulo__toc summary { display: flex; justify-content: space-between; align-items: center; margin: 0; cursor: pointer; }
  .articulo__toc summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: var(--pizarra); }
  .articulo__toc[open] summary { margin-bottom: .75rem; }
  .articulo__toc[open] summary::after { content: "−"; }
  .articulo__wa { display: none; }
}

/* --- Hub de guías (recursos.html) ---------------------------------------------------------------------
   Arriba, las tres para empezar con su foto (una grande y dos al lado). Debajo, todas en filas con foto chica,
   agrupadas en cuatro temas que se filtran con botones (sitio.js); sin JS se ven todas. */
.hub__cat { font-size: .8125rem; font-weight: 600; color: var(--azul-600); }

.destacadas { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.destacadas__lado { display: grid; gap: 16px; }
.destacada { display: grid; overflow: hidden; background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-large-cards); color: var(--onyx); text-decoration: none; transition: border-color var(--duration-hover); }
.destacada:hover { border-color: var(--tinta); }
.destacada__foto { display: block; overflow: hidden; }
.destacada img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); transition: transform .5s var(--ease-settle); }
.destacada__texto { display: grid; align-content: start; gap: .4rem; padding: clamp(18px, 2vw, 28px); }
.destacada b { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 650; line-height: 1.25; letter-spacing: var(--tracking-subheading); }
.destacada small { font-size: .9375rem; line-height: 1.5; color: var(--pizarra); }
.destacada__leer { display: inline-flex; align-items: center; gap: .4em; margin-top: .5rem; font-size: .9375rem; font-weight: 600; color: var(--color-link); }
.destacada__leer .i { width: 15px; height: 15px; transition: transform var(--duration-hover); }
.destacada:hover .destacada__leer .i { transform: translateX(3px); }
.destacada--grande { grid-template-rows: minmax(300px, 1fr) auto; }
.destacada--grande b { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); }
.destacada--chica { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.destacada--chica .destacada__foto { min-height: 210px; }

.hub__filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.hub__filtros button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1px solid var(--hueso); border-radius: var(--radius-badges); background: #fff; font: inherit; font-size: .9375rem; font-weight: 550; color: var(--onyx); cursor: pointer; transition: background var(--duration-hover), border-color var(--duration-hover), color var(--duration-hover); }
.hub__filtros button span { font-size: .8125rem; color: var(--pizarra); }
.hub__filtros button:hover { border-color: var(--tinta); }
.hub__filtros button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.hub__filtros button[aria-pressed="true"] span { color: var(--niebla); }
.hub__grupo { margin-top: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); }
.hub__grupo[hidden] { display: none; }
.hub__tema { padding-bottom: .85rem; border-bottom: 2px solid var(--tinta); font-size: clamp(1.2rem, 1.05rem + .4vw, 1.45rem); font-weight: 550; letter-spacing: var(--tracking-subheading); color: var(--onyx); }
.hub__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
.hub__guia { display: grid; grid-template-columns: 112px minmax(0, 1fr) 16px; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--linea); color: var(--onyx); text-decoration: none; }
.hub__guia img { width: 112px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-cards); }
.hub__texto { display: grid; gap: .2rem; }
.hub__guia b { font-weight: 600; line-height: 1.3; transition: color var(--duration-hover); }
.hub__guia small { font-size: .875rem; line-height: 1.45; color: var(--pizarra); }
.hub__guia .i { width: 16px; height: 16px; color: var(--ceniza); transition: transform var(--duration-hover), color var(--duration-hover); }
.hub__guia:hover b { color: var(--color-link); }
.hub__guia:hover .i { color: var(--color-link); transform: translateX(3px); }
.bloque > .contenedor > .hub__grupos + p { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }

@media (max-width: 960px) {
  .destacadas { grid-template-columns: 1fr; }
  .destacada--grande { grid-template-rows: auto auto; }
  .destacada--grande .destacada__foto { aspect-ratio: 16 / 9; }
  .hub__lista { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .destacada--chica { grid-template-columns: 1fr; }
  .destacada--chica .destacada__foto { min-height: 0; aspect-ratio: 16 / 9; }
  .hub__filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--margen)); padding-inline: var(--margen); scrollbar-width: none; }
  .hub__filtros::-webkit-scrollbar { display: none; }
  .hub__filtros button { flex: none; }
  .hub__guia { grid-template-columns: 84px minmax(0, 1fr); }
  .hub__guia img { width: 84px; }
  .hub__guia .i { display: none; }
}

/* Sectores: índice en filas con el número de cada capítulo, el mismo que su línea de sección (01, 02…) */
.indice-filas__cap:has(.indice-filas__num) { display: flex; align-items: center; gap: 12px; }
.indice-filas__num { flex: none; display: grid; place-content: center; width: 38px; height: 38px; border: 1px solid var(--nube); border-radius: 50%; font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--onyx); }
/* Con la línea de sección arriba, el título del capítulo ya no lleva su línea de color propia */
.acentos .capitulo > .contenedor > .seccion + h2 { font-size: var(--h2); max-width: none; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-top: 0; border-top: 0; }

/* Menú en mayúsculas (24/10/2026): barra, títulos de columna y rótulos de familia */
.nav__it { text-transform: uppercase; font-size: .8125rem; font-weight: 600; letter-spacing: .05em; }
.mega__tit { text-transform: uppercase; font-size: .875rem; font-weight: 700; letter-spacing: .06em; }
.mega__rotulo { text-transform: uppercase; font-size: .6875rem; letter-spacing: .08em; margin-bottom: 6px; }
.mega__empresas { margin-top: 0; }
.menu__panel > a:not(.btn), .menu__grupo > summary { text-transform: uppercase; font-size: 1rem; letter-spacing: .05em; font-weight: 600; }
.menu__sub { text-transform: uppercase; letter-spacing: .08em; }

/* Empresas: sin tarjeta, subtitular en mayúsculas con la descripción debajo */
.mega__empresas { display: block; padding: 0; border: 0; border-radius: 0; background: none; text-decoration: none; }
.mega__empresas:hover { border: 0; }
.mega__empresas b { text-transform: uppercase; font-size: .6875rem; font-weight: 650; letter-spacing: .08em; color: var(--azul-700); margin-bottom: 6px; }
.mega__empresas b::after { content: "→"; display: inline-block; margin-left: .5em; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s var(--mega-ease); }
.mega__empresas:hover b::after, .mega__empresas:focus-visible b::after { opacity: 1; transform: none; }
.mega__empresas small { font-size: var(--text-body-sm); color: var(--pizarra); margin-top: 0; line-height: 1.45; }

/* ==========================================================================
   Sectores y ciudades (sectores.html, 25/10/2026)
   Sectores: índice por familias en filas, empresas aparte en verde.
   Ciudades: una ruta de occidente a oriente; cada zona es un tramo de color y cada ciudad, una parada.
   ========================================================================== */
.isec { --isec-ease: cubic-bezier(.2, .7, .2, 1); margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); }
.isec__familias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 2rem + 1.5vw, 3.5rem) clamp(2rem, 1rem + 4vw, 5rem); }
.isec__tit { position: relative; font-size: 1.125rem; font-weight: 650; color: var(--onyx); padding-bottom: 14px; }
.isec__tit::before, .isec__tit::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hueso); }
.isec__tit::after { bottom: -.5px; height: 2px; background: linear-gradient(90deg, var(--azul-500) 0%, var(--azul-300) 40%, var(--naranja-400) 75%, var(--naranja-500) 100%); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--isec-ease); }
.isec__fam:hover .isec__tit::after, .isec__fam:focus-within .isec__tit::after, .isec__empresas:hover .isec__tit::after, .isec__empresas:focus-within .isec__tit::after { transform: scaleX(1); }
.isec__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--linea); text-decoration: none; transition: padding var(--duration-state) var(--isec-ease), background var(--duration-hover); }
.isec__fila::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--azul-500); opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .3s var(--isec-ease); }
.isec__nombre { font-size: 1.25rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; color: var(--onyx); transition: color var(--duration-hover); }
.isec__frase { grid-column: 1; margin-top: 4px; font-size: .9375rem; font-weight: 450; line-height: 1.45; color: var(--pizarra); max-width: 52ch; }
.isec__fila:hover, .isec__fila:focus-visible { padding-left: 12px; background: var(--azul-50); }
.isec__fila:hover .isec__nombre, .isec__fila:focus-visible .isec__nombre { color: var(--azul-500); }
.isec__fila:hover::after, .isec__fila:focus-visible::after { opacity: 1; transform: none; }
.isec__empresas { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); border-radius: var(--radius-cards); background: var(--azul-50); }
.isec__emp-cabeza p { margin-top: 16px; font-size: .9375rem; color: var(--carbon); max-width: 40ch; }
.isec__emp-cabeza a { display: inline-block; margin-top: 16px; font-weight: 650; color: var(--azul-700); text-underline-offset: 3px; }
.isec__empresas ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-content: start; }
.isec__empresas .isec__fila { border-bottom-color: var(--azul-100); }
.isec__empresas .isec__fila::after { color: var(--azul-700); }
.isec__empresas .isec__fila:hover, .isec__empresas .isec__fila:focus-visible { background: #fff; }
.isec__empresas .isec__fila:hover .isec__nombre, .isec__empresas .isec__fila:focus-visible .isec__nombre { color: var(--azul-700); }
@media (max-width: 860px) {
  .isec__familias, .isec__empresas, .isec__empresas ul { grid-template-columns: 1fr; }
}

/* La ruta: una línea continua que cambia de color por zona; las paradas cuelgan de su ramal */
.ruta { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.ruta__sentido { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: .8125rem; font-weight: 600; color: var(--pizarra); }
.ruta__sentido span:last-child::after { content: " →"; }
.ruta__sentido span:first-child::before { content: "← "; }
.ruta__tramos { display: grid; grid-template-columns: 6fr 10fr 4fr 5fr; }
.ruta__tramo { position: relative; padding: 34px clamp(12px, 1.5vw, 28px) 0 0; border-top: 6px solid var(--zona); }
.ruta__tramo::before { content: ""; position: absolute; top: -13px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 5px solid var(--zona); }
.ruta__tramo:last-child::after { content: ""; position: absolute; top: -13px; right: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--zona); }
.ruta__cabeza :is(h3, h4) { font-size: 1.375rem; font-weight: 700; letter-spacing: -.015em; color: var(--onyx); }
.ruta__cabeza p { margin-top: 4px; font-size: .9375rem; color: var(--carbon); text-wrap: balance; }
.ruta__cabeza span { display: inline-block; margin-top: 10px; font-size: .8125rem; font-weight: 600; color: var(--pizarra); }
.ruta__depto { margin-top: 24px; }
.ruta__dep { font-size: .8125rem; font-weight: 600; color: var(--pizarra); margin-bottom: 4px; }
.ruta__depto ul { position: relative; margin-left: 4px; padding-left: 18px; border-left: 2px solid color-mix(in srgb, var(--zona) 35%, transparent); }
.ruta__depto li { position: relative; }
.ruta__depto li::before { content: ""; position: absolute; left: -24px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--zona); transition: background var(--duration-hover); }
.ruta__depto a { display: inline-block; padding: 5px 0; font-size: 1.0625rem; font-weight: 550; color: var(--onyx); text-decoration: none; transition: color var(--duration-hover); }
.ruta__depto li:hover::before, .ruta__depto li:focus-within::before { background: var(--zona); }
.ruta__depto a:hover, .ruta__depto a:focus-visible { color: var(--azul-500); text-decoration: underline; text-underline-offset: 4px; }
/* En las zonas con muchas ciudades, los departamentos se reparten en dos columnas */
.ruta__tramo:nth-child(2) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(12px, 1.5vw, 28px); align-content: start; }
.ruta__tramo:nth-child(2) .ruta__cabeza { grid-column: 1 / -1; }
.ruta__nota { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); padding-top: 20px; border-top: 1px solid var(--linea); color: var(--carbon); max-width: 72ch; }
@media (max-width: 960px) {
  .ruta__sentido { display: none; }
  .ruta__tramos { grid-template-columns: 1fr; margin-left: 10px; }
  .ruta__tramo { border-top: 0; border-left: 6px solid var(--zona); padding: 0 0 36px 28px; }
  .ruta__tramo::before { top: 0; left: -13px; }
  .ruta__tramo:last-child { padding-bottom: 8px; }
  .ruta__tramo:last-child::after { top: auto; bottom: -13px; right: auto; left: -13px; }
  .ruta__tramo:nth-child(2) { display: block; }
}

/* «Lo que es igual» en filas a dos columnas, y las preguntas con el título a la izquierda */
#lo-que-es-igual-en-todos-los-sectores-y-ciudades .lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 4vw, 5rem); margin-top: 2rem; max-width: none; }
#lo-que-es-igual-en-todos-los-sectores-y-ciudades .lista li { padding: 16px 0 16px 0; border-bottom: 1px solid var(--linea); color: var(--pizarra); }
#lo-que-es-igual-en-todos-los-sectores-y-ciudades .lista li::before { display: none; }
#lo-que-es-igual-en-todos-los-sectores-y-ciudades .lista li { font-size: .9375rem; }
#lo-que-es-igual-en-todos-los-sectores-y-ciudades .lista strong { display: block; margin-bottom: 2px; color: var(--onyx); font-size: 1.1875rem; font-weight: 650; letter-spacing: -.01em; }
#lo-que-es-igual-en-todos-los-sectores-y-ciudades .lista strong a { text-decoration: none; color: inherit; }
#lo-que-es-igual-en-todos-los-sectores-y-ciudades .lista strong a:hover { color: var(--azul-500); }
#preguntas-frecuentes-sobre-sectores-y-ciudades { background: var(--azul-50); padding-block: var(--sec); margin-top: var(--sec); }
#preguntas-frecuentes-sobre-sectores-y-ciudades > .contenedor { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 5rem); align-items: start; }
#preguntas-frecuentes-sobre-sectores-y-ciudades h2 { margin: 0; }
#preguntas-frecuentes-sobre-sectores-y-ciudades .faq { margin-top: 0; max-width: none; }
@media (max-width: 860px) {
  #lo-que-es-igual-en-todos-los-sectores-y-ciudades .lista, #preguntas-frecuentes-sobre-sectores-y-ciudades > .contenedor { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .isec__tit::after, .isec__fila, .isec__fila::after { transition: none; } }

/* --- Antetítulos y rótulos en Geist Mono (25/10/2026) ------------------------
   Como en northline-finance-studio: mono de 11 px, peso normal, mayúsculas con
   0.16em de espacio. Solo en antetítulos, rótulos de categoría, encabezados de
   tabla y números de índice; títulos y texto siguen en Geist. */
.antetitulo, .seccion__nombre, .indice__titulo, .pie h2, .guia__cat, .demo__rubro,
.zonas__dep, .plan__ademas, .mega__rotulo, .menu__sub {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 400;
  letter-spacing: var(--tracking-mono-caps); text-transform: uppercase; line-height: 1.5;
}
.tabla thead th {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 400; letter-spacing: .1em;
}
.indice li::before, .seccion__num, .indice-filas__num {
  font-family: var(--font-mono); font-weight: 400; letter-spacing: 0;
}

/* --- Páginas de servicio (las 6 del menú «Servicios», "clase": "servicio", 26/10/2026) -----------------------------
   Índice numerado y línea numerada como los sectores; las partes con figura alternan de lado ("alternar") y cada
   página lleva figuras propias de su servicio (build.py, «Figuras propias de las páginas de servicio»).
   [data-aparece]: sitio.js pone .aparece--espera y al entrar en pantalla .aparece--visto; sin JS se ve el final. */
@media (min-width: 961px) {
  .servicio .parte--izq { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
  .servicio .parte--izq > .figura { order: -1; justify-self: start; }
}
/* Pasos junto a una figura: en columna, unidos por una línea vertical */
.acentos .parte--figura .parte__texto > .lista-pasos:has(> li) { grid-template-columns: 1fr; gap: 10px; }
.acentos .parte--figura .lista-pasos li { padding: 18px 22px 18px 66px; }
.acentos .parte--figura .lista-pasos li::before { left: 20px; top: 18px; }
.acentos .parte--figura .lista-pasos li:not(:last-child)::after { content: ""; top: 52px; bottom: -11px; left: 35px; right: auto; border-top: 0; border-left: 2px dashed var(--cap); }
.acentos .parte__texto > * + :is(.motivos, .garantia) { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.acentos .parte__texto > :is(.motivos, .garantia) + * { margin-top: 1.75rem; }

/* Motivos por los que la gente se va (renovar) */
.motivos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.motivos li { display: grid; gap: 10px; align-content: start; padding: 24px 22px; background: #fff; border: 1px solid var(--cap-borde, var(--hueso)); border-radius: var(--radius-cards); }
.motivos svg { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--cap-tinte, var(--azul-50)); fill: none; stroke: var(--cap-texto, var(--azul-600)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.motivos h4 { font-size: 1.0625rem; font-weight: 650; line-height: 1.3; letter-spacing: var(--tracking-subheading); color: var(--onyx); }
.motivos p { font-size: .9375rem; line-height: 1.5; color: var(--carbon); }
@media (max-width: 1080px) { .motivos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .motivos { grid-template-columns: 1fr; } }

/* «Primero la ves, después pagas» con el sello de la garantía (@sello, reutilizable) */
.garantia { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(24px, 4vw, 48px); background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-large-cards); }
.garantia__texto h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 600; line-height: 1.2; letter-spacing: var(--tracking-subheading); color: var(--color-heading-display); }
.garantia__texto p { margin-top: .9rem; max-width: 60ch; font-size: 1.0625rem; color: var(--carbon); }
.garantia__texto strong { color: var(--onyx); }
.garantia__sello { display: grid; justify-items: center; gap: 10px; width: clamp(200px, 20vw, 240px); margin: 0; }
.garantia__sello img { width: 100%; height: auto; rotate: -8deg; }
.garantia__sello figcaption { font-size: .8125rem; line-height: 1.4; color: var(--pizarra); text-align: center; max-width: 30ch; }
@media (max-width: 700px) { .garantia { grid-template-columns: 1fr; justify-items: start; } .garantia__sello { justify-self: center; } }

/* Búsqueda con la respuesta de un asistente de IA debajo (seo-local) */
.ia { padding: 16px 18px; background: var(--azul-50); border: 1px solid var(--azul-100); border-radius: var(--radius-large-cards); transition: opacity .45s var(--ease-settle), transform .45s var(--ease-settle); }
.figura--busqueda.escribiendo .ia { opacity: .3; transform: translateY(8px); }
.ia__cab { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 650; color: var(--azul-600); }
.ia__cab svg { width: 16px; height: 16px; fill: var(--azul-500); }
.ia__texto { margin-top: 6px; font-size: .9375rem; line-height: 1.5; color: var(--onyx); }
.ia__texto strong { color: var(--azul-600); }

/* Tu zona: el negocio en el centro, anillos de distancia y búsquedas alrededor (pequeños negocios) */
.figura--zona { display: grid; gap: 14px; width: 100%; max-width: 540px; justify-self: center; }
.zona { position: relative; overflow: hidden; background: var(--azul-50); border: 1px solid var(--azul-100); border-radius: var(--radius-large-cards); }
.zona__mapa { display: block; width: 100%; height: auto; }
.zona__anillo { fill: none; stroke: var(--azul-500); stroke-width: 1.5; stroke-dasharray: 4 6; transform-box: fill-box; transform-origin: center; }
.zona__anillo--1 { fill: color-mix(in srgb, var(--azul-500) 12%, transparent); stroke-dasharray: none; stroke-opacity: .5; }
.zona__anillo--2 { fill: color-mix(in srgb, var(--azul-500) 6%, transparent); stroke-opacity: .45; }
.zona__anillo--3 { stroke-opacity: .3; }
.zona__dist { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; fill: var(--azul-600); text-anchor: middle; paint-order: stroke; stroke: var(--azul-50); stroke-width: 5px; stroke-linejoin: round; }
.zona__pin path { fill: var(--azul-500); }
.zona__pin circle { fill: #fff; }
.zona__tu { position: absolute; left: 50%; top: 53%; transform: translateX(-50%); padding: 4px 10px; background: var(--onyx); color: #fff; border-radius: var(--radius-badges); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.zona__busca { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-badges); box-shadow: var(--shadow-subtle-2); font-size: .8125rem; font-weight: 500; color: var(--onyx); white-space: nowrap; }
.zona__busca svg { width: 14px; height: 14px; fill: none; stroke: var(--pizarra); stroke-width: 1.8; stroke-linecap: round; }
.zona__busca--1 { left: 4%; top: 7%; }
.zona__busca--2 { right: 4%; top: 25%; }
.zona__busca--3 { left: 5%; bottom: 24%; }
.zona__busca--4 { right: 5%; bottom: 7%; }
.aparece--espera:not(.aparece--visto) .zona__busca { opacity: 0; transform: translateY(8px); }
.aparece--espera:not(.aparece--visto) .zona__anillo { opacity: 0; transform: scale(.6); }
.aparece--visto .zona__anillo { transition: opacity .8s ease, transform 1.1s var(--ease-settle); }
.aparece--visto .zona__anillo--2 { transition-delay: .15s; }
.aparece--visto .zona__anillo--3 { transition-delay: .3s; }
.aparece--visto .zona__busca { transition: opacity .5s ease, transform .5s var(--ease-settle); }
.aparece--visto .zona__busca--1 { transition-delay: .6s; }
.aparece--visto .zona__busca--2 { transition-delay: .9s; }
.aparece--visto .zona__busca--3 { transition-delay: 1.2s; }
.aparece--visto .zona__busca--4 { transition-delay: 1.5s; }
@media (max-width: 520px) { .zona__busca { padding: 5px 9px; font-size: .6875rem; } .zona__busca svg { width: 11px; height: 11px; } .zona__tu { font-size: .6875rem; } }

/* Antes y después en el celular, con una línea que se arrastra (renovar y menú QR) */
.figura--antesdespues { display: grid; justify-items: center; gap: 12px; width: 100%; }
.antesdes { width: min(300px, 82vw); padding: 10px; background: var(--onyx); border-radius: 42px; box-shadow: 0 32px 60px -24px rgb(9 12 29 / .45); }
.antesdes:has(.antesdes__control:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.antesdes__in { --corte: 50%; position: relative; aspect-ratio: 280 / 560; border-radius: 33px; overflow: hidden; background: #fff; }
.antesdes__capa { position: absolute; inset: 0; overflow: hidden; }
.antesdes__capa--despues { clip-path: inset(0 0 0 var(--corte)); border-radius: 0; }
.antesdes__mango { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgb(9 12 29 / .15); pointer-events: none; }
.antesdes__mango::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--onyx); }
.antesdes__control { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.antesdes__rotulos { display: flex; justify-content: space-between; width: min(300px, 82vw); font-size: .8125rem; font-weight: 600; color: var(--pizarra); }
.antesdes__rotulos span:last-child { color: var(--azul-700); }
/* La página de antes: hecha para computadora, en letra diminuta (es una ilustración de otra página, por eso Times) */
.vieja { height: 100%; display: grid; align-content: start; gap: 7px; padding: 30px 9px 10px; background: #fff; color: #222; font-family: "Times New Roman", Times, serif; font-size: 6.5px; line-height: 1.3; letter-spacing: 0; }
.vieja__cab { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding-bottom: 3px; border-bottom: 2px solid #1d3e8a; }
.vieja__cab b { font-size: 8px; color: #1d3e8a; }
.vieja__cab span { font-size: 5px; color: #00e; text-decoration: underline; white-space: nowrap; }
.vieja__banner { padding: 6px; background: #f7d34a; color: #b00; font-size: 9px; font-weight: 700; text-align: center; }
.vieja__cols { display: grid; grid-template-columns: 42% 1fr; gap: 5px; }
.vieja__foto { aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, #ddd 0 4px, #eee 4px 8px); border: 1px solid #ccc; }
.vieja__texto { display: grid; gap: 3px; align-content: start; }
.vieja__texto i, .vieja__form i { display: block; height: 3px; background: #c8c8c8; }
.vieja__pdf { color: #00e; font-size: 7px; text-decoration: underline; }
.vieja__form { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 4px; padding: 5px; border: 1px solid #bbb; background: #f6f6f6; font-size: 6px; }
.vieja__form i { height: 7px; background: #fff; border: 1px solid #999; }
.vieja__form i.alto { height: 18px; }
.vieja__form u { grid-column: 2; justify-self: start; padding: 1px 6px; border: 1px solid #777; background: #e6e6e6; text-decoration: none; }
.vieja__pie { margin-top: 10px; font-size: 5px; color: #777; text-align: center; }
/* El menú en PDF y en texto */
.pdf { height: 100%; display: grid; grid-template-rows: auto 1fr auto; background: #525659; font-family: var(--font-body); }
.pdf__barra { display: flex; justify-content: space-between; padding: 28px 16px 9px; background: #323639; color: #fff; font-size: 11px; }
.pdf__hoja { display: grid; align-content: start; gap: 6px; margin: 16px 12px; padding: 14px; background: #f5f0e6; rotate: -1deg; filter: blur(.5px); }
.pdf__hoja b { margin-bottom: 4px; font-family: Georgia, serif; font-size: 15px; letter-spacing: .25em; text-align: center; color: #3a3328; }
.pdf__hoja i { display: block; height: 4px; border-radius: 1px; background: #a39886; }
.pdf__aviso { justify-self: center; margin-bottom: 18px; padding: 6px 12px; border-radius: 99px; background: rgb(0 0 0 / .6); color: #fff; font-size: 11px; }
.menu-txt__busca { display: flex; align-items: center; gap: 6px; margin: 2px 12px 10px; padding: 8px 12px; border-radius: 99px; background: color-mix(in srgb, var(--c-tinta) 8%, transparent); font-size: 12px; }
.menu-txt__busca svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-txt__tabs { display: flex; gap: 6px; margin: 0 12px 6px; font-size: 11px; }
.menu-txt__tabs b, .menu-txt__tabs span { padding: 3px 10px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--c-tinta) 22%, transparent); }
.menu-txt__tabs b { background: var(--c-oscuro); border-color: var(--c-oscuro); color: #fff; font-weight: 600; }
.menu-txt li span { display: grid; gap: 1px; }
.menu-txt small { font-size: 10px; font-weight: 600; color: var(--c-oscuro); }

/* Cada dirección vieja lleva a la nueva (renovar) */
.figura--redir { display: grid; gap: 14px; width: 100%; max-width: 560px; justify-self: end; }
.redir { padding: var(--card-padding); background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-large-cards); }
.redir__cab, .redir li { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); align-items: center; }
.redir__cab { padding-bottom: 10px; border-bottom: 1px solid var(--linea-fuerte); font-size: .8125rem; font-weight: 600; color: var(--pizarra); }
.redir__cab span:last-child { grid-column: 3; }
.redir li { padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: .875rem; line-height: 1.35; }
.redir s { color: var(--ceniza); overflow-wrap: anywhere; }
.redir li > span { font-weight: 600; color: var(--onyx); overflow-wrap: anywhere; }
.redir li .i { width: 16px; height: 16px; color: var(--azul-500); }
.redir__pie { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .875rem; font-weight: 600; color: var(--azul-700); }
.redir__pie .i { width: 16px; height: 16px; color: var(--azul-500); }

/* El informe del mes (seo-local), con números de ejemplo */
.figura--informe { display: grid; gap: 14px; width: 100%; max-width: 480px; justify-self: end; }
.informe { padding: var(--card-padding); background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-large-cards); box-shadow: var(--shadow-subtle-2); }
.informe__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding-bottom: 14px; border-bottom: 1px solid var(--linea-fuerte); }
.informe__cab b { font-size: 1.125rem; font-weight: 650; color: var(--onyx); }
.informe__cab span { font-size: .8125rem; color: var(--pizarra); }
.informe__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; padding-block: 18px; border-bottom: 1px solid var(--linea); }
.informe__cifras dt { font-size: .8125rem; line-height: 1.3; color: var(--pizarra); }
.informe__cifras dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 4px; }
.informe__cifras dd b { font-size: 1.75rem; font-weight: 650; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--onyx); }
.informe__cifras dd span { font-size: .8125rem; font-weight: 600; color: var(--azul-700); }
.informe__busca { margin-top: 14px; font-size: .875rem; color: var(--pizarra); }
.informe__busca b { color: var(--onyx); font-weight: 600; }
.informe__tit { margin-top: 16px; font-size: .8125rem; font-weight: 600; color: var(--onyx); }
.informe__grafica { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.informe__grafica li { display: grid; grid-template-rows: 104px auto; text-align: center; }
.informe__barra { position: relative; align-self: end; height: calc(var(--v) * 100%); background: var(--azul-200); border-radius: 4px 4px 0 0; transform-origin: bottom; }
.informe__ultima .informe__barra { background: var(--azul-500); }
.informe__barra::after { content: attr(data-valor); position: absolute; bottom: calc(100% + 4px); left: 50%; translate: -50% 0; font-size: .75rem; font-weight: 600; color: var(--onyx); opacity: 0; transition: opacity var(--duration-hover); }
.informe__ultima .informe__barra::after, .informe__grafica li:hover .informe__barra::after { opacity: 1; }
.informe__grafica small { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--nube); font-size: .75rem; color: var(--pizarra); }
.aparece--espera:not(.aparece--visto) .informe__barra { transform: scaleY(0); }
.aparece--visto .informe__barra { transition: transform .8s var(--ease-settle); }
.aparece--visto .informe__grafica li:nth-child(2) .informe__barra { transition-delay: .08s; }
.aparece--visto .informe__grafica li:nth-child(3) .informe__barra { transition-delay: .16s; }
.aparece--visto .informe__grafica li:nth-child(4) .informe__barra { transition-delay: .24s; }
.aparece--visto .informe__grafica li:nth-child(5) .informe__barra { transition-delay: .32s; }
.aparece--visto .informe__grafica li:nth-child(6) .informe__barra { transition-delay: .4s; }

/* La reserva del cliente y el aviso que te llega (reservas) */
.figura--reserva { position: relative; display: grid; gap: 14px; width: 100%; max-width: 460px; justify-self: end; padding-top: 46px; }
.reserva { padding: var(--card-padding); background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-large-cards); box-shadow: var(--shadow-subtle-2); font-size: .875rem; }
.reserva__negocio { font-size: 1rem; font-weight: 650; color: var(--onyx); }
.reserva__negocio span { font-weight: 500; color: var(--pizarra); }
.reserva__paso { margin: 16px 0 8px; font-size: .8125rem; font-weight: 600; color: var(--pizarra); }
.reserva__servicios { display: flex; flex-wrap: wrap; gap: 6px; }
.reserva__servicios li { padding: 7px 12px; border: 1px solid var(--hueso); border-radius: var(--radius-badges); font-weight: 500; }
.reserva__servicios small { margin-left: 4px; color: var(--pizarra); }
.reserva__servicios .si { background: var(--azul-50); border-color: var(--azul-500); }
.reserva__dias { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.reserva__dias li, .reserva__horas li { padding: 8px 0; border: 1px solid var(--hueso); border-radius: 10px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.reserva__dias li { display: grid; }
.reserva__dias small { font-size: .6875rem; font-weight: 500; color: var(--pizarra); }
.reserva__dias .si { background: var(--onyx); border-color: var(--onyx); color: #fff; }
.reserva__dias .si small { color: var(--niebla); }
.reserva__horas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.reserva__horas .ocupada { background: var(--humo); border-color: transparent; color: var(--ceniza); text-decoration: line-through; }
.reserva__horas .si { background: var(--azul-500); border-color: var(--azul-500); color: #fff; }
.reserva__boton { display: block; margin-top: 18px; padding: 12px; border-radius: var(--radius-buttons); background: var(--tinta); color: #fff; font-weight: 600; text-align: center; }
.aviso { position: absolute; top: 0; right: -10px; width: min(290px, 82%); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; background: rgb(255 255 255 / .97); border: 1px solid var(--hueso); border-radius: 16px; box-shadow: var(--shadow-md); font-size: .8125rem; }
.aviso__ico { display: grid; place-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--azul-500); }
.aviso__ico svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aviso p { display: grid; line-height: 1.3; color: var(--carbon); }
.aviso b { font-weight: 650; color: var(--onyx); }
.aviso small { align-self: start; color: var(--pizarra); }
.aparece--espera:not(.aparece--visto) .reserva__horas .si { background: transparent; border-color: var(--hueso); color: var(--tinta); }
.aparece--espera:not(.aparece--visto) .aviso { opacity: 0; transform: translateY(-14px) scale(.97); }
.aparece--visto .reserva__horas .si { transition: background-color .4s ease .5s, border-color .4s ease .5s; }
.aparece--visto .aviso { transition: opacity .5s ease 1.3s, transform .6s var(--ease-settle) 1.3s; }
@media (max-width: 560px) { .aviso { right: 0; } }

/* La agenda del día en la app (reservas) */
.figura--agenda { display: grid; justify-items: center; gap: 14px; }
.cel--app { width: min(300px, 82vw); }
.agenda { background: #fff; color: var(--onyx); }
.agenda__cab { display: flex; justify-content: space-between; align-items: center; padding: 26px 18px 2px; font-size: 14px; }
.agenda__cab span { font-size: 18px; color: var(--pizarra); }
.agenda__resumen { padding: 0 18px 12px; text-align: center; font-size: 11.5px; color: var(--pizarra); }
.agenda__lista { display: grid; gap: 6px; padding-inline: 10px; }
.agenda__cita { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; align-items: start; }
.agenda__cita time { padding-top: 8px; font-size: 11px; font-weight: 600; color: var(--pizarra); font-variant-numeric: tabular-nums; }
.agenda__cita p { display: grid; padding: 7px 10px; border-left: 3px solid var(--azul-500); border-radius: 10px; background: var(--azul-50); line-height: 1.3; }
.agenda__cita b { font-size: 12.5px; }
.agenda__cita span { font-size: 11.5px; color: var(--carbon); }
.agenda__cita small { margin-top: 2px; font-size: 10.5px; font-weight: 600; color: var(--azul-600); }
.agenda__cita--tel p { background: var(--azul-50); border-left-color: var(--azul-500); }
.agenda__cita--tel small { color: var(--azul-700); }
.agenda__cita--bloq p { background: repeating-linear-gradient(135deg, var(--humo) 0 6px, #fff 6px 12px); border-left-color: var(--ceniza); }
.agenda__cita--bloq b { color: var(--pizarra); }
.agenda__cita--libre p { background: transparent; border: 1px dashed var(--nube); }
.agenda__cita--libre b { font-weight: 600; color: var(--azul-700); }
.agenda__tabs { display: flex; justify-content: space-around; margin-top: 14px; padding: 10px 6px 0; border-top: 1px solid var(--linea); font-size: 11px; color: var(--pizarra); }
.agenda__tabs b { color: var(--azul-500); }

/* El letrero de la mesa con el QR (menú QR) */
.figura--qr { display: grid; gap: 14px; width: 100%; max-width: 500px; justify-self: center; }
.mesa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: center; padding: clamp(24px, 3vw, 36px); background: var(--blanco); border-radius: var(--radius-large-cards); }
.letrero { padding: 18px 16px 16px; background: var(--c-fondo); border-top: 6px solid var(--c-acento); border-radius: 12px; text-align: center; box-shadow: 0 26px 30px -18px rgb(9 12 29 / .35); transform: perspective(700px) rotateX(7deg) rotateZ(-2deg); }
.letrero__nombre { font-size: 1rem; font-weight: 700; color: var(--c-oscuro); }
.letrero__txt { margin-top: 2px; font-size: .75rem; line-height: 1.35; color: var(--c-oscuro); }
.qr { display: block; width: 100%; max-width: 150px; margin: 12px auto 8px; padding: 6px; background: #fff; border-radius: 6px; fill: var(--c-oscuro); }
.qr__marco { fill: none; stroke: var(--c-oscuro); stroke-width: 1; }
.letrero__dir { font-size: .6875rem; font-weight: 600; color: var(--c-oscuro); }
.mesa__notas { display: grid; gap: 10px; }
.mesa__notas li { display: flex; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--nube); font-size: .9375rem; font-weight: 500; line-height: 1.35; color: var(--onyx); }
.mesa__notas li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .45em; border-radius: 50%; background: var(--cap, var(--azul-500)); }
@media (max-width: 520px) { .mesa { grid-template-columns: 1fr; } .letrero { max-width: 240px; justify-self: center; } }

/* El reloj de 48 horas (página en 48 horas): cada tramo con el color de su paso */
.figura--reloj { display: grid; justify-items: center; gap: 14px; width: 100%; max-width: 400px; justify-self: center; }
.reloj { width: 100%; height: auto; overflow: visible; }
.reloj__fondo { fill: none; stroke: var(--humo); stroke-width: 26; }
.reloj__arco { fill: none; stroke-width: 26; stroke-dasharray: var(--l) 48; stroke-dashoffset: var(--o); transform: rotate(-90deg); transform-origin: 160px 160px; }
.reloj__arco--a { stroke: var(--azul-500); }
.reloj__arco--b { stroke: var(--azul-800); }
.reloj__arco--c { stroke: var(--naranja-500); }
.reloj__arco--d { stroke: var(--azul-300); }
.reloj__marcas line { stroke: var(--nube); stroke-width: 1.5; }
.reloj__horas text { font-family: var(--font-mono); font-size: 11px; fill: var(--pizarra); text-anchor: middle; }
.reloj__grande { font-size: 46px; font-weight: 600; letter-spacing: -.04em; fill: var(--onyx); text-anchor: middle; }
.reloj__chico { font-size: 13px; fill: var(--pizarra); text-anchor: middle; }
.aparece--espera:not(.aparece--visto) .reloj__arco { stroke-dasharray: 0 48; }
.aparece--visto .reloj__arco { transition: stroke-dasharray .75s cubic-bezier(.65, 0, .35, 1) calc(var(--k) * .6s); }
.parte--figura:has(.figura--reloj) .lista-pasos li:nth-child(1)::before { background: var(--azul-500); color: #fff; }
.parte--figura:has(.figura--reloj) .lista-pasos li:nth-child(2)::before { background: var(--azul-800); color: #fff; }
.parte--figura:has(.figura--reloj) .lista-pasos li:nth-child(3)::before { background: var(--naranja-500); color: var(--onyx); }
.parte--figura:has(.figura--reloj) .lista-pasos li:nth-child(4)::before { background: var(--azul-300); color: var(--onyx); }

/* La primera versión ya es el 80 % (página en 24 horas) */
.figura--ochenta { width: 100%; max-width: 520px; justify-self: end; }
.ochenta { padding: var(--card-padding); background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-large-cards); }
.ochenta__tit { font-size: 1.125rem; font-weight: 650; letter-spacing: var(--tracking-subheading); color: var(--onyx); }
.ochenta__barra { display: flex; gap: 2px; height: 46px; margin-top: 14px; border-radius: 10px; overflow: hidden; background: var(--humo); font-weight: 700; font-variant-numeric: tabular-nums; }
.ochenta__barra span { display: flex; align-items: center; padding-inline: 14px; white-space: nowrap; }
.ochenta__lleno { flex: 0 0 calc(80% - 1px); background: var(--azul-500); color: #fff; }
.ochenta__falta { flex: 1; justify-content: center; background: var(--naranja-500); color: var(--onyx); }
.ochenta__leyenda { display: grid; gap: 10px; margin-top: 14px; }
.ochenta__leyenda li { display: flex; gap: 10px; font-size: .875rem; line-height: 1.45; color: var(--carbon); }
.ochenta__leyenda i { flex: none; width: 10px; height: 10px; margin-top: .4em; border-radius: 3px; background: var(--azul-500); }
.ochenta__leyenda i.falta { background: var(--naranja-500); }
.ochenta__leyenda b { color: var(--onyx); }
.ochenta__linea { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--nube); }
.ochenta__linea li { position: relative; display: grid; align-content: start; gap: 2px; padding-top: 20px; font-size: .8125rem; line-height: 1.35; }
.ochenta__linea li::before { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--azul-500); }
.ochenta__linea li:not(:last-child)::after { content: ""; position: absolute; top: 4px; left: 16px; right: -4px; height: 2px; background: var(--azul-100); }
.ochenta__linea b { font-weight: 650; color: var(--onyx); }
.ochenta__linea span { color: var(--pizarra); }
.aparece--espera:not(.aparece--visto) .ochenta__lleno { flex-basis: 0; }
.aparece--visto .ochenta__lleno { transition: flex-basis 1.2s cubic-bezier(.65, 0, .35, 1) .2s; }
@media (max-width: 520px) { .ochenta__linea { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; } .ochenta__linea li:nth-child(2)::after { content: none; } }
@media (max-width: 560px) {
  .redir__cab { display: none; }
  .redir li { grid-template-columns: 24px minmax(0, 1fr); row-gap: 2px; }
  .redir s { grid-column: 1 / -1; }
}

/* --- «Qué pasa después» y «tu tiempo» (portada, @tutiempo; idea de aen-media.com, 26/10/2026) ----------------
   4 tarjetas: la pantalla a la izquierda (celular, navegador o chat) y el texto a la derecha, con la pastilla de reloj. */
.tutiempo__sub { margin-top: 1rem; max-width: 56ch; font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.5; color: var(--carbon); }
.tutiempo__sub strong { color: var(--onyx); }
.tiempo { list-style: none; margin: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem) 0 0; padding: 0; display: grid; gap: clamp(14px, 1.5vw, 20px); }
.tiempo__paso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-cards); overflow: hidden; }
.tiempo__pantalla { position: relative; display: flex; justify-content: center; align-items: flex-start; height: clamp(270px, 21vw, 320px); padding: 32px 28px 0; overflow: hidden; background: var(--azul-50); border-right: 1px solid var(--hueso); }
.tiempo__paso--3 .tiempo__pantalla { align-items: center; padding-bottom: 28px; background: var(--azul-50); }
.tiempo__paso--4 .tiempo__pantalla { background: var(--naranja-50); }
.tiempo__cel { width: min(230px, 62%); flex: none; border: 7px solid var(--onyx); border-bottom: 0; border-radius: 34px 34px 0 0; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgb(9 12 29 / .12); }
.tiempo__cel img { display: block; width: 100%; height: auto; }
/* Paso 1: el formulario de cotizar en miniatura; sitio.js lo llena solo y desplaza .mini para seguir el campo activo */
.tiempo__cel--demo { position: relative; align-self: stretch; }
.mini { padding: 16px 14px 18px; font-size: 10.5px; line-height: 1.3; color: var(--tinta); transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.mini__num { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: var(--tracking-mono-caps); text-transform: uppercase; color: var(--pizarra); }
.mini__tit { margin: 3px 0 9px; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--onyx); }
.mini__label { display: block; margin: 0 0 4px; font-weight: 600; }
.mini__campo { margin-bottom: 9px; }
.mini__input { display: flex; align-items: center; height: 27px; padding: 0 9px; border: 1px solid var(--nube); border-radius: 7px; white-space: nowrap; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.mini__input > span { flex: none; }
.mini__input--largo { justify-content: flex-end; }
.mini__campo--activo .mini__input { border-color: var(--azul-500); box-shadow: 0 0 0 2px rgb(31 79 216 / .18); }
.mini__campo--activo .mini__input::after { content: ""; flex: none; width: 1.5px; height: 13px; margin-left: 1px; background: var(--azul-500); animation: parpadeo 1.05s steps(1) infinite; }
.mini__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.mini__chip { padding: 4px 9px; border: 1px solid var(--nube); border-radius: 999px; font-size: 9.5px; color: var(--pizarra); transition: background .2s, border-color .2s, color .2s; }
.mini__chip--si { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.mini__btn { display: block; padding: 9px; border-radius: 999px; background: var(--tinta); color: #fff; font-weight: 700; font-size: 11.5px; text-align: center; transition: transform .15s; }
.mini__btn--toque { transform: scale(.95); }
.mini__aviso { margin-top: 8px; font-size: 8.5px; color: var(--pizarra); }
.mini__dedo { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgb(9 12 29 / .22); box-shadow: 0 0 0 5px rgb(9 12 29 / .08); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; pointer-events: none; }
.mini__dedo--toque { opacity: 1; transform: scale(1); }
.mini__listo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 22px 20px; background: #fff; text-align: center; font-size: 10.5px; color: var(--pizarra); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.mini__listo .mini__tit { margin-bottom: 5px; }
.mini__check { display: grid; place-content: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: 50%; background: var(--azul-100); color: var(--azul-500); transform: scale(.6); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.mini__check .i { width: 18px; height: 18px; }
.tiempo__cel--listo .mini__listo { opacity: 1; visibility: visible; }
.tiempo__cel--listo .mini__check { transform: scale(1); }
.tiempo__cel--borra .mini { opacity: 0; transition: opacity .3s; }
.tiempo__nav { width: 100%; max-width: 520px; flex: none; border: 1px solid var(--nube); border-bottom: 0; border-radius: 10px 10px 0 0; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgb(9 12 29 / .1); }
.tiempo__barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--humo); border-bottom: 1px solid var(--hueso); }
.tiempo__barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--nube); }
.tiempo__barra span { flex: 1; margin-left: 8px; padding: 3px 12px; border-radius: var(--radius-badges); background: #fff; border: 1px solid var(--hueso); font-size: .75rem; color: var(--pizarra); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiempo__nav img { display: block; width: 100%; height: auto; }
/* Paso 2: el ejemplo baja solo en la computadora y luego en el celular. sitio.js pone --fin (cuánto bajar) y .recorrido--anda */
.recorrido { position: relative; align-self: stretch; display: flex; justify-content: center; width: 100%; }
.recorrido__nav { display: flex; flex-direction: column; }
.recorrido__ventana { flex: 1; min-height: 0; height: 100%; overflow: hidden; }
.recorrido__pagina { display: block; width: 100%; height: auto; }
.recorrido__cel { position: absolute; top: 0; bottom: 0; left: 50%; margin-left: max(-115px, -31%); opacity: 0; }
.recorrido--anda .recorrido__nav { animation: recorrido-nav 26s infinite; }
.recorrido--anda .recorrido__cel { animation: recorrido-cel 26s infinite; }
.recorrido--anda .recorrido__nav .recorrido__pagina { animation: recorrido-escritorio 26s infinite; }
.recorrido--anda .recorrido__cel .recorrido__pagina { animation: recorrido-celular 26s infinite; }
.recorrido--quieto, .recorrido--quieto * { animation-play-state: paused !important; }
@keyframes recorrido-nav { 0%, 44% { opacity: 1; transform: none; } 48%, 96% { opacity: 0; transform: translateY(14px) scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes recorrido-cel { 0%, 45% { opacity: 0; transform: translateY(24px); } 49%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(24px); } }
@keyframes recorrido-escritorio { 0%, 5% { transform: none; animation-timing-function: cubic-bezier(.45, 0, .4, 1); } 42%, 48% { transform: translateY(var(--fin, 0px)); } 49%, 100% { transform: none; } }
@keyframes recorrido-celular { 0%, 53% { transform: none; animation-timing-function: cubic-bezier(.45, 0, .4, 1); } 89%, 97% { transform: translateY(var(--fin, 0px)); } 98%, 100% { transform: none; } }
.chat--paso { max-width: 340px; box-shadow: 0 18px 40px rgb(9 12 29 / .1); }
.chat--paso .chat__barra { padding: 9px 14px; }
.chat--paso .chat__barra img { width: 32px; height: 32px; }
.chat--paso .chat__cuerpo { padding: 12px; }
.chat--paso .chat__hilo { gap: 6px; }
/* Paso 3: la conversación llena la pantalla y sitio.js la va contando (.chat--anima); el hilo sube para que el último
   mensaje quede abajo, como en WhatsApp */
.chat--paso[data-chat-anima] { align-self: stretch; display: flex; flex-direction: column; }
.chat--paso[data-chat-anima] .chat__cuerpo { flex: 1; min-height: 0; overflow: hidden; }
.chat--anima .chat__hilo { transition: transform .5s cubic-bezier(.3, .7, .2, 1); }
.chat--anima .chat__msg, .chat--anima .chat__dia { opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .3s, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.chat--anima .chat__msg--c { transform-origin: right bottom; }
.chat--anima .chat__msg--s { transform-origin: left bottom; }
.chat--anima .chat--visto { opacity: 1; transform: none; }
.chat--anima .chat__barra span { transition: color .2s; }
.chat--escribe .chat__barra span { color: #6ee7a0; }
.chat--borra .chat__hilo { opacity: 0; transition: opacity .3s; }
.chat--paso .chat__msg { font-size: .8125rem; padding: 6px 10px; }
.chat--paso .chat__dia { margin-block: 2px; }
.tiempo__publicada { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-badges); background: var(--onyx); color: #fff; font-size: .875rem; font-weight: 600; box-shadow: 0 8px 24px rgb(9 12 29 / .25); }
.tiempo__publicada .i { width: 14px; height: 14px; color: var(--naranja-500); }
/* Paso 4: decidir y publicar. sitio.js pone .publica--anda y va sumando estados: --pregunta (sube la hoja),
   --lista (dirección definitiva, «Publicada» y confeti), --baja (la página baja un poco), --aviso (mensaje de un cliente) */
.publica { align-self: stretch; display: flex; justify-content: center; width: 100%; }
.publica__cel { position: relative; display: flex; flex-direction: column; }
.publica__barra { display: flex; align-items: center; gap: 5px; margin: 0; padding: 7px 10px; background: #f1f2f4; font-size: 10.5px; color: var(--onyx); white-space: nowrap; overflow: hidden; }
.publica__barra svg { flex: none; width: 11px; height: 11px; stroke: currentColor; stroke-width: 1.6; }
.publica__candado { color: #1e8e3e; fill: currentColor; }
.publica__candado path { fill: none; }
.publica__ojo { display: none; color: var(--pizarra); fill: currentColor; }
.publica__ojo path { fill: none; }
.publica__dir { overflow: hidden; text-overflow: clip; }
.publica__ventana { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.publica__ventana::after { content: ""; position: absolute; inset: 0; background: rgb(9 12 29 / .45); opacity: 0; transition: opacity .35s; }
.publica__pagina { display: block; width: 100%; height: auto; transition: transform 1.4s cubic-bezier(.45, 0, .3, 1); }
.publica__hoja { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 14px 12px 16px; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgb(9 12 29 / .18); transform: translateY(105%); transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
.publica__pregunta { margin: 0 0 4px; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--onyx); text-align: center; }
.publica__si, .publica__no { display: block; padding: 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center; transition: transform .15s; }
.publica__si { background: var(--naranja-500); color: var(--onyx); }
.publica__no { border: 1px solid var(--nube); color: var(--pizarra); font-weight: 600; }
.publica__toque { transform: scale(.94); }
.publica__aviso { position: absolute; left: 8px; right: 8px; top: 34px; padding: 8px 10px; border-radius: 12px; background: rgb(255 255 255 / .97); box-shadow: 0 10px 28px rgb(9 12 29 / .28); font-size: 10px; line-height: 1.35; color: var(--tinta); opacity: 0; transform: translateY(-130%); transition: transform .5s cubic-bezier(.3, 1.3, .5, 1), opacity .3s; }
.publica__aviso p { margin: 0; }
.publica__app { display: flex; align-items: center; gap: 4px; font-size: 8.5px; color: var(--pizarra); text-transform: uppercase; letter-spacing: .04em; }
.publica__app .i { width: 11px; height: 11px; color: #1fa855; }
.publica__quien { margin: 2px 0 1px !important; font-weight: 700; font-size: 10.5px; }
.publica .tiempo__publicada { z-index: 2; }
.publica__confeti { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.publica__confeti i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 2px; background: var(--naranja-500); opacity: 0; }
.publica__confeti i:nth-child(even) { background: var(--azul-500); border-radius: 50%; }
/* Estados animados (solo con sitio.js) */
.publica--anda .tiempo__publicada { opacity: 0; scale: .6; transition: opacity .25s, scale .45s cubic-bezier(.3, 1.6, .5, 1); }
.publica--anda .publica__candado { display: none; }
.publica--anda .publica__ojo { display: block; }
.publica--anda .publica__barra { color: var(--pizarra); }
.publica--pregunta .publica__ventana::after { opacity: 1; }
.publica--pregunta .publica__hoja { transform: none; }
.publica--lista .publica__candado { display: block; }
.publica--lista .publica__ojo { display: none; }
.publica--lista .publica__barra { color: var(--onyx); }
.publica--lista .tiempo__publicada { opacity: 1; scale: 1; }
.publica--lista .publica__confeti i { animation: confeti .9s cubic-bezier(.2, .7, .3, 1) .1s both; }
.publica--baja .publica__pagina { transform: translateY(-22%); }
.publica--aviso .publica__aviso { opacity: 1; transform: none; }
.publica--borra .publica__cel, .publica--borra .tiempo__publicada { opacity: 0; transition: opacity .35s; }
@keyframes confeti { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(62px) rotate(200deg) scale(.4); } }
.tiempo__texto { display: grid; align-content: center; justify-items: start; gap: .75rem; padding: clamp(24px, 3vw, 44px) clamp(24px, 3.5vw, 56px); }
.tiempo__texto .antetitulo { margin: 0; color: var(--azul-500); }
.tiempo__texto h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); font-weight: 600; line-height: 1.15; letter-spacing: var(--tracking-subheading); color: var(--color-heading-display); }
.tiempo__texto p:not([class]) { max-width: 52ch; color: var(--carbon); }
.tiempo__texto .btn { margin-top: .35rem; }
.reloj { display: inline-flex; justify-self: start; width: max-content; max-width: 100%; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border: 1px solid var(--hueso); border-radius: var(--radius-badges); background: var(--humo); font-size: .875rem; line-height: 1.3; color: var(--pizarra); }
.reloj svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--azul-500); stroke-width: 1.6; stroke-linecap: round; }
.reloj strong { font-weight: 600; color: var(--onyx); }
@media (max-width: 760px) {
  .tiempo__paso { grid-template-columns: 1fr; }
  .tiempo__pantalla { height: 250px; padding: 24px 20px 0; border-right: 0; border-bottom: 1px solid var(--hueso); }
  .tiempo__cel { width: min(200px, 60%); border-width: 6px; border-radius: 28px 28px 0 0; }
  .tiempo__paso--3 .tiempo__pantalla { height: auto; padding-bottom: 24px; }
  .tiempo__texto { padding: 22px 20px 26px; }
}
/* Cotizar: la pastilla va debajo del texto de cada paso */
.cotizar__pasos .reloj { margin-top: .6rem; padding-block: 4px; font-size: .8125rem; background: #fff; }
.cotizar__pasos h2 + p { color: var(--pizarra); font-size: .9688rem; }

/* El sello sobre el fondo oscuro de «El problema» (portada) */
.garantia__accion { margin-top: 1.25rem !important; }

/* «Que te encuentren en Google y en ChatGPT» (portada): texto a la izquierda, la búsqueda a la derecha */
.buscador .contenedor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); grid-template-rows: auto auto 1fr; column-gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.buscador .contenedor > .seccion { grid-column: 1 / -1; }
.buscador .contenedor > h2 { grid-column: 1; grid-row: 2; }
.buscador .contenedor > .buscador__texto { grid-column: 1; grid-row: 3; margin-top: 1.5rem; }
.buscador .contenedor > .figura--busqueda { grid-column: 2; grid-row: 2 / span 2; }
.buscador__texto { display: grid; gap: 1rem; }
.buscador__texto > p { max-width: 60ch; }
.buscador__texto .acciones { margin-top: .5rem; }
.buscador__guias { font-size: .9375rem; color: var(--pizarra); }
.buscador .figura--busqueda { margin-top: 0; }
@media (max-width: 960px) { .buscador .contenedor { grid-template-columns: 1fr; grid-template-rows: none; } .buscador .contenedor > * { grid-column: 1 !important; grid-row: auto !important; } .buscador .figura--busqueda { justify-self: start; margin-top: 2.5rem; } }

/* Empresas: «Fase 1 + Fase 2 = Resultado» (@formula) */
.formula { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.formula__fase { display: flex; flex-direction: column; padding: clamp(22px, 2.5vw, 32px); background: #fff; border: 1px solid var(--hueso); border-radius: var(--radius-cards); }
.formula__fase .antetitulo { margin: 0 0 .4rem; color: var(--azul-500); }
.formula__fase h3 { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.75rem); font-weight: 600; letter-spacing: var(--tracking-subheading); color: var(--color-heading-display); }
.formula__fase .lista { margin-top: 1rem; gap: .6rem; font-size: .9688rem; }
.formula__pago { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--hueso); font-size: .9375rem; color: var(--pizarra); }
.formula__fase .lista + .formula__pago { margin-top: 1.5rem; }
.formula__pago strong { color: var(--onyx); font-weight: 650; }
.formula__fase--3 { background: var(--onyx); border-color: var(--onyx); color: #fff; }
.formula__fase--3 .antetitulo { color: var(--naranja-500); }
.formula__fase--3 h3, .formula__fase--3 .formula__pago strong { color: #fff; }
.formula__fase--3 .lista li { color: rgb(255 255 255 / .88); }
.formula__fase--3 .lista li::before, .acentos .capitulo .formula__fase--3 .lista li::before { background: var(--naranja-500); }
.formula__fase--3 .formula__pago { border-color: rgb(255 255 255 / .18); color: rgb(255 255 255 / .72); }
.formula__op { align-self: center; display: grid; place-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--nube); color: var(--onyx); font-size: 1.5rem; font-weight: 600; line-height: 1; }
@media (max-width: 960px) {
  .formula { grid-template-columns: 1fr; justify-items: stretch; }
  .formula__op { justify-self: center; margin-block: -4px; }
}

/* --- Íconos de los botones (Google Material Symbols, Outlined) --------------- */
.i--mat { width: 1.3em; height: 1.3em; }
.btn--chico .i--mat { width: 1.25em; height: 1.25em; margin-left: -.1em; }
@media (max-width: 480px) { .cabecera__wa .i { display: none; } }

/* --- Botón de flujo (.btn--flujo) --------------------------------------------
   Efecto de 21st.dev (flow-button). Solo en los puntos de decisión: entrada, precio, garantía, cierre y envío del
   formulario. El resto de los botones lleva un ícono. build.py (flujo()) agrega las flechas y el círculo.
   Colores por variable: relleno, texto, círculo que crece y texto al pasar el mouse. */
.btn.btn--flujo {
  --f-fondo: var(--color-action); --f-texto: var(--onyx); --f-circulo: var(--onyx); --f-texto-hover: #fff;
  position: relative; isolation: isolate; overflow: hidden; gap: 0; padding-inline: 36px;
  border-radius: 100px; background: var(--f-fondo); border-color: var(--f-fondo); color: var(--f-texto);
  transition: border-radius 600ms cubic-bezier(.23, 1, .32, 1), color 600ms cubic-bezier(.23, 1, .32, 1), border-color 800ms cubic-bezier(.19, 1, .22, 1), transform 200ms;
}
.btn--flujo.btn--claro { --f-fondo: #fff; --f-circulo: var(--naranja-500); --f-texto-hover: var(--onyx); }   /* sobre la foto: blanco que se llena de naranja */
.cierre .btn--flujo, .plan--destacado .btn--flujo { --f-circulo: #fff; --f-texto-hover: var(--onyx); }         /* sobre fondo oscuro: el círculo es blanco */
.flujo__texto { position: relative; z-index: 1; display: block; text-align: center; transform: translateX(-12px); transition: transform 800ms ease-out; }
.flujo__flecha { position: absolute; z-index: 2; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: currentColor; pointer-events: none;
  transition: left 800ms cubic-bezier(.34, 1.56, .64, 1), right 800ms cubic-bezier(.34, 1.56, .64, 1); }
.flujo__flecha--izq { left: -25%; }
.flujo__flecha--der { right: 16px; }
.flujo__circulo { position: absolute; z-index: 0; top: 50%; left: 50%; width: 16px; aspect-ratio: 1; border-radius: 50%; background: var(--f-circulo);
  opacity: 0; transform: translate(-50%, -50%); transition: width 800ms cubic-bezier(.19, 1, .22, 1), opacity 800ms cubic-bezier(.19, 1, .22, 1); }
.btn.btn--flujo:is(:hover, :focus-visible) { background: var(--f-fondo); border-color: var(--f-circulo); color: var(--f-texto-hover); border-radius: 12px; }
.btn--flujo:is(:hover, :focus-visible) .flujo__texto { transform: translateX(12px); }
.btn--flujo:is(:hover, :focus-visible) .flujo__flecha--izq { left: 16px; }
.btn--flujo:is(:hover, :focus-visible) .flujo__flecha--der { right: -25%; }
.btn--flujo:is(:hover, :focus-visible) .flujo__circulo { width: calc(100% + 80px); opacity: 1; }
.btn.btn--flujo:active { transform: scale(.96); }
.btn.btn--flujo:disabled { opacity: .7; cursor: progress; }
.cabeza-foto .acciones .btn.btn--flujo { padding-inline: 36px; }
@media (max-width: 480px) { .btn.btn--flujo, .cabeza-foto .acciones .btn.btn--flujo { padding-inline: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .btn.btn--flujo, .flujo__texto, .flujo__flecha, .flujo__circulo { transition: none; }
}

/* --- Texto en mono y antetítulos en negrita (26/10/2026) --------------------
   Los rótulos en Geist Mono y los antetítulos pasan a peso 700 para que se lean mejor. */
.antetitulo, .seccion__nombre, .indice__titulo, .pie h2, .guia__cat, .demo__rubro, .zonas__dep, .plan__ademas,
.mega__rotulo, .menu__sub, .mega__empresas b, .hub__cat, .cifras span, .plan__etiqueta, .comp__etiqueta,
.tabla thead th, .indice li::before, .seccion__num, .indice-filas__num,
.formulario__paso, .cotizar__cuando, .cotizar__num, .propiedad__antes, .propiedad__despues-titulo,
.acentos .capitulo .guia__cat { font-weight: 700; }
.zona__dist, .reloj__horas text { font-weight: 700; }

/* Cotizar: cómo lo manda (correo o WhatsApp), campo trampa para robots y revisión antispam (28/10/2026) */
.cotizar__via-nota { font-size: .8125rem; color: var(--pizarra); margin-top: -.25rem; }
.cotizar__via-nota:empty { display: none; }
.cotizar__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* La revisión antispam no ocupa espacio salvo que Cloudflare pida tocarla */
.cf-turnstile { height: 0; overflow: hidden; }
.cf-turnstile.es-visible { height: auto; overflow: visible; }

/* Gracias y página no encontrada (28/10/2026) */
.cartel { padding: clamp(3rem, 9vw, 7rem) 0 clamp(3.5rem, 9vw, 7rem); }
.cartel__caja { max-width: 46rem; }
.cartel h1 { font-size: clamp(2.1rem, 5.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; color: var(--color-heading-display); text-wrap: balance; }
.cartel h1 em { font-style: normal; color: var(--color-highlight); }
.cartel__lead { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--carbon); margin-top: 1.25rem; max-width: 38rem; }
.cartel .acciones { margin-top: 1.75rem; align-items: center; }
.cartel__pasos { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--hueso); counter-reset: paso; }
.cartel__pasos li { display: grid; grid-template-columns: 2.25rem 11rem 1fr; gap: .75rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--hueso); counter-increment: paso; align-items: baseline; }
.cartel__pasos li::before { content: counter(paso, decimal-leading-zero); font-weight: 700; font-size: .8125rem; color: var(--naranja-600); }
.cartel__pasos b { font-weight: 650; color: var(--tinta); }
.cartel__pasos span { color: var(--pizarra); }
.cartel__volver { font-weight: 600; color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; padding: 10px 6px; }
.cartel__enlaces { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cartel__enlaces a { display: block; padding: 1.1rem 1.25rem; border: 1px solid var(--hueso); border-radius: 12px; background: var(--blanco); font-weight: 650; color: var(--tinta); text-decoration: none; transition: border-color .2s; }
.cartel__enlaces a:hover { border-color: var(--tinta); }
.cartel__enlaces span { display: block; font-weight: 400; font-size: .875rem; color: var(--pizarra); margin-top: .2rem; }
.cartel__nota { margin-top: 1.75rem; color: var(--pizarra); }
@media (max-width: 640px) {
  .cartel__pasos li { grid-template-columns: 2rem 1fr; }
  .cartel__pasos span { grid-column: 2; }
  .cartel__enlaces { grid-template-columns: 1fr; }
  .cartel .acciones .btn { width: 100%; justify-content: center; }
}
.cartel [hidden] { display: none !important; }

/* «Primero la ves, después pagas» (inicio, 01/11/2026): sección propia entre «El problema» y «Para quién es»,
   como un llamado: titular y mensaje a la izquierda, el sello a la derecha. Sin número de sección ni botón. */
.promesa { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--marfil); border-bottom: 1px solid var(--hueso); }
.promesa__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2rem, 6vw, 7rem); }
.promesa h2 { font-size: var(--h2); line-height: 1.08; letter-spacing: -.02em; max-width: 16ch; text-wrap: balance; }
.promesa__texto p { margin-top: 1.25rem; max-width: 52ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--carbon); }
.promesa__texto h2 + p { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.promesa__texto strong { color: var(--onyx); }
.promesa__sello { display: grid; justify-items: center; gap: 12px; width: clamp(220px, 24vw, 320px); margin: 0; }
.promesa__sello img { width: 100%; height: auto; rotate: -8deg; }
.promesa__sello figcaption { font-size: .875rem; line-height: 1.4; color: var(--pizarra); text-align: center; }
@media (max-width: 760px) {
  .promesa__rejilla { grid-template-columns: 1fr; }
  .promesa__sello { justify-self: center; width: min(240px, 70vw); }
}