/* Bescala · estilos del sitio público (maquetación). Usa solo tokens del sistema de diseño. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera-alto) + 16px); }
body { font-family: var(--font-sans); background: var(--superficie); color: var(--texto); font-size: 16px; line-height: 24px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--superficie); }
img, svg { max-width: 100%; }
a { color: var(--enlace); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.salto { position: absolute; left: 16px; top: -60px; z-index: 40; }
.salto:focus { top: 12px; }

/* Contenedores y secciones */
.envoltura { box-sizing: border-box; width: 100%; max-width: calc(var(--contenido-max) + 2 * var(--espacio-8)); margin: 0 auto; padding-left: max(var(--espacio-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--espacio-4), env(safe-area-inset-right, 0px)); }
.seccion { background: var(--superficie); color: var(--texto); padding-block: var(--espacio-7); }
.seccion__cabeza { display: flex; flex-direction: column; gap: var(--espacio-3); max-width: var(--lectura-max); margin-bottom: var(--espacio-6); }
.antetitulo { font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--marca-texto); margin: 0; }
.titulo-seccion { margin: 0; font: 700 28px/34px var(--font-sans); letter-spacing: -.015em; }
.entrada { margin: 0; font-size: 18px; line-height: 27px; color: var(--texto-suave); }
.enlace-flecha { display: inline-flex; align-items: center; gap: var(--espacio-2); font-weight: 600; color: var(--enlace); text-underline-offset: 4px; min-height: var(--tactil-min); }

/* Cabecera */
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--superficie); border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-4); min-height: var(--cabecera-alto); }
.logo { display: inline-flex; line-height: 0; border-radius: var(--radio-sm); }
.logo svg { width: 189px; height: 36px; }
.logo:focus-visible, .menu summary:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--espacio-1); }
.nav a { display: inline-flex; align-items: center; min-height: var(--tactil-min); padding: 0 var(--espacio-3); border-radius: var(--radio-md); color: var(--texto-suave); font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--texto); background: var(--superficie-hover); }
.nav a:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.cabecera__acciones { display: none; gap: var(--espacio-3); }
.menu { position: relative; }
.menu summary { list-style: none; display: inline-flex; align-items: center; gap: var(--espacio-2); min-height: var(--tactil-min); padding: 0 var(--espacio-4); border: 1px solid var(--borde-control); border-radius: var(--radio-md); font-weight: 600; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 18px; height: 18px; }
.menu__panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 32px)); box-sizing: border-box; background: var(--superficie-elevada); border: 1px solid var(--linea); border-radius: var(--radio-lg); box-shadow: var(--sombra-flotante); padding: var(--espacio-3); display: flex; flex-direction: column; gap: var(--espacio-1); }
.menu__panel a:not(.bs-btn) { display: flex; align-items: center; min-height: var(--tactil-min); padding: 0 var(--espacio-3); border-radius: var(--radio-md); color: var(--texto); text-decoration: none; font-weight: 500; }
.menu__panel a:not(.bs-btn):hover { background: var(--superficie-hover); }
.menu__panel .bs-btn { margin-top: var(--espacio-2); }

/* Portada */
.portada { padding-block: var(--espacio-7) var(--espacio-8); }
.portada__rejilla { display: grid; gap: var(--espacio-7); align-items: center; }
.portada__texto { display: flex; flex-direction: column; gap: var(--espacio-5); min-width: 0; }
.portada h1 { margin: 0; font: 800 clamp(36px, 7vw, 50px)/1.04 var(--font-sans); letter-spacing: -.025em; }
.portada h1 em { font-style: normal; color: var(--marca-texto); }
.portada .entrada { max-width: 34em; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); }

/* Símbolo de la portada: el isotipo líquido como resumen del flujo */
.portada__simbolo { margin: 0; display: grid; gap: var(--espacio-5); justify-items: center; align-items: center; min-width: 0; }
.simbolo { width: min(240px, 64vw); height: auto; overflow: visible; }
.simbolo__rama { fill: var(--marca-lima-profundo); stroke: var(--marca-lima-profundo); stroke-width: 8; }
.simbolo__base { fill: var(--escalon-pendiente); stroke: var(--escalon-pendiente); stroke-width: 14; }
.simbolo__luz { fill: var(--marca-lima); stroke: var(--marca-lima); stroke-width: 14; }
.simbolo__luz > * { transition: opacity .25s ease; }
.simbolo rect { stroke: none; }
.simbolo__hueco { fill: var(--superficie); }
.simbolo__punto { fill: var(--marca-azul); }
.simbolo__anillo { fill: none; stroke: var(--marca-azul); stroke-width: 3.5; }
.portada__pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-3) var(--espacio-4); width: 100%; }
.portada__pasos li { display: flex; gap: var(--espacio-3); align-items: flex-start; padding: var(--espacio-2); margin: calc(var(--espacio-2) * -1); border-radius: var(--radio-md); cursor: default; }
.portada__pasos li:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.portada__pasos .num { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--marca-lima); color: var(--sobre-accion); font: 700 12px/1 var(--font-mono); }
.portada__pasos .p5 .num { background: var(--marca-azul); color: var(--marca-noche); border-radius: var(--radio-full); }
.portada__pasos strong { display: block; font-size: 15px; line-height: 20px; }
.portada__pasos li > span:last-child > span { display: block; font: 500 12px/16px var(--font-mono); color: var(--texto-tenue); }
.portada__pasos .p5 { grid-column: 1 / -1; }
/* Al pasar o enfocar un paso, solo su módulo queda encendido */
.portada__simbolo:has(.portada__pasos li:hover, .portada__pasos li:focus-visible) .simbolo__luz > * { opacity: 0; }
.portada__simbolo:has(.p1:hover, .p1:focus-visible) .simbolo__luz .m1,
.portada__simbolo:has(.p2:hover, .p2:focus-visible) .simbolo__luz :is(.m2, .n2),
.portada__simbolo:has(.p3:hover, .p3:focus-visible) .simbolo__luz :is(.m3, .n3),
.portada__simbolo:has(.p4:hover, .p4:focus-visible) .simbolo__luz :is(.m4, .n4),
.portada__simbolo:has(.p5:hover, .p5:focus-visible) .simbolo__luz :is(.m5, .n5) { opacity: 1; }
.portada__pasos li:hover, .portada__pasos li:focus-visible { background: var(--superficie-hover); }
/* Recorrido al cargar: los módulos se encienden de abajo hacia arriba y cada paso aparece con el suyo */
.simbolo__luz > *, .simbolo__destino, .portada__pasos li { animation: encender .5s ease backwards; }
.simbolo__luz .m1, .portada__pasos .p1 { animation-delay: .2s; }
.simbolo__luz :is(.n2, .m2), .portada__pasos .p2 { animation-delay: .8s; }
.simbolo__luz :is(.n3, .m3), .portada__pasos .p3 { animation-delay: 1.4s; }
.simbolo__luz :is(.n4, .m4), .portada__pasos .p4 { animation-delay: 2s; }
.simbolo__luz :is(.n5, .m5), .portada__pasos .p5 { animation-delay: 2.6s; }
.simbolo__destino { animation-name: llegar-destino; animation-delay: 2.9s; transform-origin: 94px 26px; }
@keyframes encender { from { opacity: 0; } to { opacity: 1; } }
@keyframes llegar-destino { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.portada__pasos li { animation-name: encender-texto; }
@keyframes encender-texto { from { opacity: .3; } to { opacity: 1; } }
@media (min-width: 1024px) {
  .portada__simbolo { grid-template-columns: minmax(0, 1fr) 200px; justify-items: stretch; }
  .simbolo { width: 100%; max-width: 340px; justify-self: center; }
  .portada__pasos { grid-template-columns: 1fr; gap: var(--espacio-4); }
  .portada__pasos .p5 { grid-column: auto; }
}
@keyframes llegar { from { transform: translateY(16px) scale(.97); } to { transform: none; } }

.precio-texto { font-size: 24px; line-height: 30px; }
.mosaico__principal { position: relative; overflow: hidden; min-height: 220px; }
.mosaico__principal > :not(svg) { position: relative; }
.mosaico__rutas { position: absolute; inset: 0 0 auto; width: 100%; height: 150px; }
.mosaico__principal { padding-top: 160px; }
@media (min-width: 1024px) { .mosaico__rutas { height: 50%; } .mosaico__principal { padding-top: 200px; min-height: 380px; } }
.mosaico__rutas path { fill: none; stroke: #1B2740; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
.mosaico__rutas path.lima { stroke: var(--marca-lima); }

/* Garantías: mosaico */
.mosaico { display: grid; gap: var(--espacio-4); grid-template-columns: 1fr; }
.mosaico .bs-tarjeta h3 { font-size: 18px; line-height: 24px; }
.mosaico__principal { background: var(--marca-noche); color: var(--marca-nube); border-color: var(--marca-noche); }
.mosaico__principal h3 { color: var(--marca-nube); font-size: 24px !important; line-height: 30px !important; }
.mosaico__principal p { color: var(--marca-nube) !important; opacity: .86; }
.mosaico__principal .bs-antetitulo { color: var(--marca-lima); }
.icono { width: 40px; height: 40px; flex: none; }

/* Qué hacemos */
.dos { display: grid; gap: var(--espacio-4); }
.servicio { flex-direction: row; gap: var(--espacio-4); align-items: flex-start; }
.servicio > div { display: flex; flex-direction: column; gap: var(--espacio-2); min-width: 0; }
.servicio .icono { width: 56px; height: 56px; padding: 6px; border-radius: var(--radio-md); background: var(--marca-noche); box-sizing: border-box; }

/* Planes */
.planes { display: grid; gap: var(--espacio-4); align-items: stretch; }
.planes__nota { margin: var(--espacio-5) 0 0; font-size: 14px; line-height: 20px; color: var(--texto-tenue); max-width: var(--lectura-max); }

/* Cómo trabajamos */
.detalle { margin-top: var(--espacio-6); border: 1px solid var(--linea); border-radius: var(--radio-lg); background: var(--superficie-elevada); }
.detalle summary { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); min-height: 56px; padding: 0 var(--espacio-5); font-weight: 700; cursor: pointer; list-style: none; border-radius: var(--radio-lg); }
.detalle summary::-webkit-details-marker { display: none; }
.detalle summary:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.detalle summary svg { width: 20px; height: 20px; transition: transform .2s ease; }
.detalle[open] summary svg { transform: rotate(180deg); }
.pasos12 { list-style: none; margin: 0; padding: 0 var(--espacio-5) var(--espacio-5); display: grid; gap: 0; }
.pasos12 li { display: grid; grid-template-columns: 40px 1fr; gap: 2px var(--espacio-3); padding: var(--espacio-3) 0; border-top: 1px solid var(--linea); }
.pasos12 .n { grid-row: span 3; font: 700 16px/24px var(--font-mono); color: var(--marca-texto); }
.pasos12 strong { font-size: 16px; }
.pasos12 span { color: var(--texto-suave); font-size: 15px; line-height: 22px; }
.pasos12 .t { font: 500 13px/18px var(--font-mono); color: var(--texto-tenue); }

/* Demos */
.demos { display: grid; gap: var(--espacio-4); }
.ventana { border-radius: var(--radio-md); border: 1px solid var(--linea); overflow: hidden; background: var(--superficie); aspect-ratio: 16 / 10; max-width: 100%; display: flex; flex-direction: column; }
.ventana__barra { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--linea); }
.ventana__barra i { width: 8px; height: 8px; border-radius: var(--radio-full); background: var(--escalon-pendiente); }
.ventana__cuerpo { flex: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; padding: 12px; }
.ventana__cuerpo b { display: block; border-radius: 6px; background: var(--escalon-pendiente); }
.ventana__cuerpo b.t { height: 14px; width: 80%; background: var(--texto-tenue); }
.ventana__cuerpo b.l { height: 8px; width: 95%; margin-top: 8px; }
.ventana__cuerpo b.l2 { height: 8px; width: 70%; margin-top: 6px; }
.ventana__cuerpo b.c { height: 18px; width: 52%; margin-top: 12px; background: var(--accion); }
.ventana__cuerpo .img { grid-row: span 1; border-radius: var(--radio-sm); }
.demo__problema { font-size: 15px; line-height: 22px; color: var(--texto-suave); margin: 0; }
.demo__problema strong { color: var(--texto); }
.demo__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }

/* Preguntas */
.preguntas { display: flex; flex-direction: column; gap: var(--espacio-3); max-width: 820px; }
.pregunta { border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--superficie-elevada); }
.pregunta summary { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-4); min-height: 56px; padding: var(--espacio-3) var(--espacio-5); font-weight: 700; font-size: 17px; line-height: 24px; cursor: pointer; list-style: none; border-radius: var(--radio-md); }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.pregunta summary svg { width: 20px; height: 20px; flex: none; transition: transform .2s ease; }
.pregunta[open] summary svg { transform: rotate(45deg); }
.pregunta p { margin: 0; padding: 0 var(--espacio-5) var(--espacio-5); color: var(--texto-suave); max-width: var(--lectura-max); }

/* Cierre */
.cierre { position: relative; overflow: hidden; border-radius: var(--radio-xl); background: var(--superficie-elevada); border: 1px solid var(--linea); padding: var(--espacio-6) var(--espacio-5); display: grid; gap: var(--espacio-6); }
.cierre__texto { position: relative; display: flex; flex-direction: column; gap: var(--espacio-4); min-width: 0; }
.cierre h2 { margin: 0; font: 800 clamp(28px, 5vw, 36px)/1.1 var(--font-sans); letter-spacing: -.02em; }
.persona { position: relative; display: flex; gap: var(--espacio-4); align-items: center; }
.persona__foto { width: 88px; height: 88px; flex: none; border-radius: var(--radio-lg); border: 2px dashed var(--borde-control); display: flex; align-items: center; justify-content: center; text-align: center; font: 500 11px/14px var(--font-mono); color: var(--texto-tenue); padding: 6px; box-sizing: border-box; }
.persona strong { display: block; }
.persona span { color: var(--texto-tenue); font-size: 14px; line-height: 20px; }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding-block: var(--espacio-7) calc(var(--espacio-7) + 76px); font-size: 15px; line-height: 22px; color: var(--texto-suave); }
.pie__rejilla { display: grid; gap: var(--espacio-6); }
.pie h2 { margin: 0 0 var(--espacio-3); font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-2); }
.pie a { color: var(--texto); text-underline-offset: 3px; }
.pie .dato-mono { font-family: var(--font-mono); color: var(--texto); }
.pie__legal { margin-top: var(--espacio-6); padding-top: var(--espacio-5); border-top: 1px solid var(--linea); font-size: 13px; line-height: 18px; color: var(--texto-tenue); }

/* Barra fija en celular */
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; gap: var(--espacio-2); padding: var(--espacio-3) max(var(--espacio-4), env(safe-area-inset-right, 0px)) calc(var(--espacio-3) + env(safe-area-inset-bottom, 0px)) max(var(--espacio-4), env(safe-area-inset-left, 0px)); background: var(--superficie-elevada); border-top: 1px solid var(--linea); box-shadow: var(--sombra-flotante); }
.barra-movil .bs-btn { flex: 1; padding: 0 var(--espacio-3); }

/* Tablet */
@media (min-width: 720px) {
  .envoltura { padding-left: max(var(--espacio-6), env(safe-area-inset-left, 0px)); padding-right: max(var(--espacio-6), env(safe-area-inset-right, 0px)); }
  .seccion { padding-block: var(--espacio-8); }
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos, .demos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cierre { padding: var(--espacio-7); }
  .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Escritorio */
@media (min-width: 1024px) {
  .envoltura { padding-left: max(var(--espacio-8), env(safe-area-inset-left, 0px)); padding-right: max(var(--espacio-8), env(safe-area-inset-right, 0px)); }
  .seccion { padding-block: var(--espacio-9); }
  .nav, .cabecera__acciones { display: flex; }
  .menu { display: none; }
  .portada { padding-block: var(--espacio-8) var(--espacio-9); }
  .portada__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--espacio-8); }
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .mosaico__principal { grid-column: span 2; grid-row: span 2; justify-content: flex-end; }
  .mosaico > :nth-child(4) { grid-column: span 2; }
  .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .planes .bs-tarjeta--destacada { margin-block: calc(var(--espacio-4) * -1); padding-block: calc(23px + var(--espacio-4)); }
  .demos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cierre { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
  .pie { padding-bottom: var(--espacio-7); }
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .barra-movil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .simbolo__luz > *, .simbolo__destino, .portada__pasos li { animation: none; }
  .detalle summary svg, .pregunta summary svg { transition: none; }
}

/* ---------- Páginas internas ---------- */
.sin-barra .pie { padding-bottom: var(--espacio-7); }
.nav a[aria-current="page"], .menu__panel a[aria-current="page"] { color: var(--texto); background: var(--superficie-hover); box-shadow: inset 0 -2px 0 var(--marca-texto); }
.cabeza-pagina { padding-block: var(--espacio-7) var(--espacio-6); }
.cabeza-pagina h1 { margin: 0; font: 800 clamp(28px, 6vw, 40px)/1.1 var(--font-sans); letter-spacing: -.02em; max-width: 22ch; }
.cabeza-pagina .entrada { margin-top: var(--espacio-4); max-width: var(--lectura-max); }
.cabeza-pagina .antetitulo { margin-bottom: var(--espacio-3); }
.migas { margin: 0 0 var(--espacio-4); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; color: var(--texto-tenue); }
.migas a { color: var(--texto-tenue); }
.subtitulo { margin: 0 0 var(--espacio-4); font: 700 20px/28px var(--font-sans); }
.prosa { max-width: var(--lectura-max); color: var(--texto-suave); }
.prosa h2 { margin: var(--espacio-6) 0 var(--espacio-3); font: 700 22px/28px var(--font-sans); color: var(--texto); }
.prosa h3 { margin: var(--espacio-5) 0 var(--espacio-2); font: 700 17px/24px var(--font-sans); color: var(--texto); }
.prosa p, .prosa li { font-size: 16px; line-height: 26px; }
.prosa ul, .prosa ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--espacio-2); }
.rejilla-2 { display: grid; gap: var(--espacio-5); }
.rejilla-3 { display: grid; gap: var(--espacio-4); }
@media (min-width: 720px) { .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .cabeza-pagina { padding-block: var(--espacio-8) var(--espacio-7); }
  .rejilla-2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--espacio-8); align-items: start; }
  .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.titulo-plan { margin: 0; font: 700 24px/30px var(--font-sans); }
.beneficios { list-style: none; margin: var(--espacio-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-3); }
.beneficios li { display: grid; grid-template-columns: 12px 1fr; column-gap: var(--espacio-3); }
.beneficios li::before { content: ""; width: 12px; height: 12px; margin-top: 5px; border-radius: 4px; background: var(--escalon-listo); grid-row: span 2; }
.beneficios strong { font-size: 15px; line-height: 22px; }
.beneficios span { font-size: 14px; line-height: 20px; color: var(--texto-tenue); }
.no-incluye { font-size: 14px !important; line-height: 20px !important; color: var(--texto-tenue) !important; padding-top: var(--espacio-3); border-top: 1px solid var(--linea); }
.tabla-comparar tbody th { text-align: left; font: 600 14px/20px var(--font-sans); color: var(--texto); padding: 12px 16px; border-bottom: 1px solid var(--linea); text-transform: none; letter-spacing: 0; white-space: normal; }
.mantenimiento { display: grid; gap: var(--espacio-5); align-items: center; }
.mantenimiento .titulo-seccion { margin: var(--espacio-2) 0; }
.mantenimiento__accion { display: flex; flex-wrap: wrap; gap: var(--espacio-4); align-items: center; }
@media (min-width: 900px) { .mantenimiento { grid-template-columns: 1fr auto; padding: var(--espacio-6); } }
.lateral { display: flex; flex-direction: column; gap: var(--espacio-4); min-width: 0; }
@media (min-width: 1024px) { .lateral { position: sticky; top: calc(var(--cabecera-alto) + var(--espacio-5)); } }
.pasos12--abierto { padding: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.filtro { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--espacio-4); border-radius: var(--radio-full); border: 1px solid var(--borde-control); background: transparent; color: var(--texto); font: 600 14px/20px var(--font-sans); text-decoration: none; cursor: pointer; }
.filtro:hover { background: var(--superficie-hover); }
.filtro[aria-pressed="true"] { background: var(--secundario); color: var(--sobre-secundario); border-color: var(--secundario-borde); }
.filtro:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.filtros__cuenta { margin: var(--espacio-4) 0 var(--espacio-5); font: 500 13px/18px var(--font-mono); color: var(--texto-tenue); }
.demo[hidden] { display: none !important; }
.demo__acciones .bs-btn[aria-disabled="true"] { opacity: .6; }
.grupos-preguntas { display: flex; flex-direction: column; gap: var(--espacio-7); }
.grupo-preguntas { scroll-margin-top: calc(var(--cabecera-alto) + 24px); }

/* ---------- Formularios ---------- */
.dato-mono { font-family: var(--font-mono); }
.formulario { display: flex; flex-direction: column; gap: var(--espacio-4); min-width: 0; }
.formulario.bs-tarjeta { gap: var(--espacio-4); }
.fila-2 { display: grid; gap: var(--espacio-4); }
@media (min-width: 560px) { .fila-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.paso-form { margin: 0; gap: var(--espacio-4); }
.paso-form legend { float: left; width: 100%; padding: 0; margin-bottom: var(--espacio-2); display: flex; align-items: center; gap: var(--espacio-3); font: 700 18px/24px var(--font-sans); color: var(--texto); }
.paso-form legend + * { clear: both; }
.paso-form__num { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accion); color: var(--sobre-accion); font: 700 13px/1 var(--font-mono); }
.opciones { display: flex; flex-direction: column; gap: var(--espacio-2); }
.opcion { display: flex; gap: var(--espacio-3); align-items: flex-start; padding: var(--espacio-3) var(--espacio-4); border: 1px solid var(--borde-control); border-radius: var(--radio-md); cursor: pointer; font-size: 14px; line-height: 20px; color: var(--texto-tenue); }
.opcion strong { display: block; font-size: 15px; line-height: 22px; color: var(--texto); }
.opcion input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--marca-texto); }
.opcion:has(input:checked) { border: 2px solid var(--texto); padding: calc(var(--espacio-3) - 1px) calc(var(--espacio-4) - 1px); background: var(--superficie-hover); }
.opcion:has(input:focus-visible) { box-shadow: var(--anillo-foco); }
.archivo { padding: 8px; }
.archivo::file-selector-button { margin-right: var(--espacio-3); min-height: 36px; padding: 0 var(--espacio-4); border: 0; border-radius: var(--radio-sm); background: var(--secundario); color: var(--sobre-secundario); font: 600 14px/20px var(--font-sans); cursor: pointer; }
.nota-legal { margin: 0; font-size: 13px; line-height: 19px; color: var(--texto-tenue); }

/* Reunión: calendario y rejilla */
.calendario { min-width: 0; }
.cal__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); margin-bottom: var(--espacio-3); }
.cal__mes { font: 700 16px/22px var(--font-sans); text-transform: capitalize; }
.cal__nav { display: flex; gap: var(--espacio-2); }
.cal__nav button { width: var(--tactil-min); height: var(--tactil-min); border-radius: var(--radio-md); border: 1px solid var(--borde-control); background: transparent; color: var(--texto); cursor: pointer; display: grid; place-items: center; }
.cal__nav button:disabled { opacity: .35; cursor: not-allowed; }
.cal__nav svg { width: 18px; height: 18px; }
.cal__rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__dia-sem { font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); text-align: center; padding-bottom: 4px; }
.cal__dia { aspect-ratio: 1; min-height: 40px; max-width: 100%; border-radius: var(--radio-sm); border: 1px solid transparent; background: transparent; color: var(--texto-tenue); font: 500 14px/1 var(--font-mono); display: grid; place-items: center; position: relative; }
.cal__dia.es-libre { color: var(--texto); border-color: var(--borde-control); cursor: pointer; }
.cal__dia.es-libre::after { content: ""; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 2px; background: var(--escalon-listo); }
.cal__dia.es-libre:hover { background: var(--superficie-hover); }
.cal__dia[aria-pressed="true"] { background: var(--accion); color: var(--sobre-accion); border-color: var(--accion); font-weight: 700; }
.cal__dia[aria-pressed="true"]::after { background: var(--sobre-accion); }
.cal__dia:disabled { cursor: default; text-decoration: line-through; opacity: .55; }
.cal__dia:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.leyenda { margin: 0; display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-4); align-items: center; font-size: 13px; color: var(--texto-tenue); }
.punto { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.punto--libre { background: var(--escalon-listo); }
.punto--sin { background: var(--escalon-pendiente); }
.rejillas { min-width: 0; }
.rejilla-vacia { display: flex; flex-direction: column; gap: 4px; padding: var(--espacio-6) var(--espacio-5); border: 1px dashed var(--borde-control); border-radius: var(--radio-md); text-align: center; color: var(--texto-tenue); font-size: 14px; }
.rejilla-vacia strong { color: var(--texto); font-size: 15px; }
/* Rejilla seleccionable: una columna por día, filas de 30 minutos */
.rejilla { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(56px, 1fr)); max-height: 560px; overflow: auto; border-radius: var(--radio-md); background: var(--superficie-campo); touch-action: none; user-select: none; -webkit-user-select: none; }
.rejilla__esquina, .rejilla__col { position: sticky; top: 0; z-index: 2; background: var(--superficie-elevada); }
.rejilla__esquina { left: 0; z-index: 3; }
.rejilla__col { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-bottom: 1px solid var(--borde-control); position: sticky; }
.rejilla__col small { font: 700 11px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); }
.rejilla__col b { font: 800 20px/24px var(--font-sans); color: var(--texto); }
.rejilla__col em { font-style: normal; font-size: 12px; line-height: 16px; color: var(--texto-tenue); }
.rejilla__atajos { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 4px; }
.rejilla__atajos button { min-height: 24px; padding: 0 6px; border-radius: var(--radio-full); border: 1px solid var(--borde-control); background: transparent; color: var(--texto); font: 600 11px/14px var(--font-sans); cursor: pointer; }
.rejilla__atajos button:hover { background: var(--superficie-hover); }
.rejilla__quitar { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border: 0; border-radius: var(--radio-sm); background: transparent; color: var(--texto-tenue); font-size: 16px; line-height: 1; cursor: pointer; }
.rejilla__quitar:hover { background: var(--superficie-hover); color: var(--texto); }
.rejilla__atajos button:focus-visible, .rejilla__quitar:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.rejilla__hora { position: sticky; left: 0; z-index: 1; background: var(--superficie-campo); padding-right: 8px; font: 500 11px/1 var(--font-mono); color: var(--texto-tenue); text-align: right; transform: translateY(-6px); white-space: nowrap; }
.casilla { height: 24px; padding: 0; border: 0; border-left: 1px solid var(--linea); border-top: 1px solid var(--linea); background: transparent; cursor: crosshair; }
.casilla.media { border-top: 1px dashed var(--linea); }
.casilla.ultima { border-right: 1px solid var(--linea); }
.casilla.abajo { border-bottom: 1px solid var(--linea); }
.casilla:hover:not([aria-disabled="true"]):not([aria-pressed="true"]) { background: var(--superficie-hover); }
.casilla[aria-pressed="true"] { background: var(--destino-texto); }
.casilla.ocupada { cursor: not-allowed; background: repeating-linear-gradient(-45deg, var(--escalon-pendiente) 0 4px, transparent 4px 9px); }
.casilla.fuera { cursor: default; background: var(--superficie-elevada); }
.casilla:focus-visible { outline: 2px solid var(--texto); outline-offset: -2px; }
.rejilla__leyenda { margin: var(--espacio-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-4); align-items: center; font-size: 13px; color: var(--texto-tenue); }
.rejilla__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.rejilla__leyenda i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--linea); }
.l-sel { background: var(--destino-texto); }
.l-ocu { background: repeating-linear-gradient(-45deg, var(--escalon-pendiente) 0 3px, transparent 3px 6px); }
.l-fue { background: var(--superficie-elevada); }
.resumen__datos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.resumen__datos li { display: flex; justify-content: space-between; gap: var(--espacio-3); padding: var(--espacio-2) 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.resumen__datos li span:first-child { color: var(--texto-tenue); }
.resumen__datos li span:last-child { font-family: var(--font-mono); }
.resumen__dias { display: flex; flex-direction: column; gap: var(--espacio-2); }
.resumen__dia { font-size: 14px; line-height: 20px; }
.resumen__dia strong { display: block; text-transform: capitalize; }
.resumen__dia span { font-family: var(--font-mono); font-size: 13px; color: var(--texto-tenue); }

/* Hoja de reclamación y confirmaciones */
.hoja__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espacio-4); }
.hoja__cabeza p { margin: var(--espacio-2) 0 0; font-size: 14px; line-height: 20px; color: var(--texto-suave); }
.hoja__datos { margin: 0; display: flex; gap: var(--espacio-5); }
.hoja__datos dt { font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); }
.hoja__datos dd { margin: 2px 0 0; font: 500 14px/20px var(--font-mono); }
.hoja__datos--grande dd { font-size: 20px; line-height: 28px; font-weight: 700; }
.confirmacion { align-self: start; }
.confirmacion:focus { outline: none; }
.confirmacion .bs-insignia { align-self: flex-start; }
.confirmacion .titulo-seccion { margin: var(--espacio-2) 0 0; }

/* Gracias */
.gracias .gracias__ruta { margin-top: var(--espacio-7); }

/* Legal */
.version { margin: var(--espacio-3) 0 0; font: 500 13px/18px var(--font-mono); color: var(--texto-tenue); }
.rejilla-legal { display: grid; gap: var(--espacio-6); }
.indice ol { margin: var(--espacio-3) 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--espacio-2); font-size: 14px; line-height: 20px; }
.indice a { color: var(--texto-suave); }
.prosa .bs-aviso { margin-bottom: var(--espacio-5); }
.prosa h2 { scroll-margin-top: calc(var(--cabecera-alto) + 24px); }
@media (min-width: 1024px) {
  .rejilla-legal { grid-template-columns: 240px minmax(0, 1fr); gap: var(--espacio-8); }
  .indice { position: sticky; top: calc(var(--cabecera-alto) + var(--espacio-5)); align-self: start; }
}
[hidden] { display: none !important; }
.gracias__ruta .bs-ruta { max-width: 640px; }
.persona__foto:has(img) { border: 0; padding: 0; }
.persona__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ---------- Nosotros (RF-145) ---------- */
.equipo { display: grid; gap: var(--espacio-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .equipo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.miembro { display: flex; flex-direction: column; gap: var(--espacio-2); }
.miembro h3 { margin: var(--espacio-2) 0 0; }
.miembro p { margin: 0; color: var(--texto-suave); font-size: 15px; line-height: 22px; }
.miembro__cargo { font: 500 13px/18px var(--font-mono); color: var(--texto-tenue) !important; }
.miembro__foto { width: 96px; height: 96px; border-radius: var(--radio-lg); overflow: hidden; }
.miembro__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-iniciales { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--marca-lima); color: #0F1626; font: 700 28px/1 var(--font-sans); letter-spacing: .02em; }
.persona__foto:has(.foto-iniciales) { border: 0; padding: 0; overflow: hidden; }
.persona__foto .foto-iniciales { font-size: 26px; }
.persona a { color: var(--marca-texto); font-weight: 600; }

/* ---------- Trabajos: webs en línea (RF-143) ---------- */
.ventana__url { margin-left: 6px; font: 500 11px/8px var(--font-mono); color: var(--texto-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo__rubro { margin: 0; font: 500 13px/18px var(--font-mono); color: var(--texto-tenue); }

/* ---------- Cabecera: enlace al portal ---------- */
.cabecera__portal { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) { .nav a { padding: 0 var(--espacio-2); } .cabecera__acciones { gap: var(--espacio-2); } .cabecera__acciones .bs-btn--secundario { display: none; } }
.nav a, .cabecera__acciones .bs-btn { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1439px) { .cabecera__acciones .bs-btn--secundario { display: none; } }
@media (min-width: 1024px) and (max-width: 1199px) { .nav a { padding: 0 10px; font-size: 15px; } .cabecera__fila { gap: var(--espacio-3); } }
.cabecera .logo { flex: none; }

/* ===== 25/10/2026: auditoría de contenido ===== */
/* Portada con imagen de fondo y velo oscuro (C-124). La imagen se reemplaza en img/portada-*.webp y img/portada.jpg.
   Con sus 4 cuadros entra completa en una laptop de 1366 × 768. */
.portada--imagen { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--espacio-6); }
.portada__fondo, .portada__fondo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.portada__fondo { z-index: -2; margin: 0; }
.portada__fondo img { object-fit: cover; object-position: 70% 50%; }
.portada__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0F1626B3 0%, #0F1626D9 55%, #0F1626 100%); }
.portada--imagen .portada__rejilla { display: grid; gap: var(--espacio-6); grid-template-areas: "texto" "cuadros" "simbolo"; align-items: center; }
.portada--imagen .portada__texto { grid-area: texto; gap: var(--espacio-4); max-width: 660px; }
.portada--imagen h1 { font-size: clamp(34px, 6vw, 46px); }
.portada--imagen .entrada { color: #DCE2EC; }
.portada--imagen .portada__simbolo { grid-area: simbolo; }
.portada__cuadros { grid-area: cuadros; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-3); }
.portada__cuadros li { display: flex; flex-direction: column; gap: 4px; padding: var(--espacio-4); border-radius: var(--radio-lg); background: #1B2740D9; border: 1px solid #6B779066; }
.portada__cuadros strong { font: 700 17px/22px var(--font-sans); color: var(--marca-lima); }
.portada__cuadros span { font-size: 14px; line-height: 20px; color: #C9D1DE; }
@media (min-width: 1024px) {
  .portada--imagen { padding-block: var(--espacio-6) var(--espacio-5); }
  .portada--imagen .portada__rejilla { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "texto simbolo" "cuadros cuadros"; gap: var(--espacio-5) var(--espacio-7); }
  .portada__cuadros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .portada--imagen .portada__simbolo { grid-template-columns: 150px minmax(0, 1fr); gap: var(--espacio-5); padding: var(--espacio-5); border-radius: var(--radio-xl); background: #0F1626CC; border: 1px solid #6B779066; }
  .portada--imagen .simbolo { max-width: 150px; }
  .portada--imagen .portada__pasos { gap: var(--espacio-3); }
  .portada__velo { background: linear-gradient(90deg, #0F1626F2 0%, #0F1626D9 40%, #0F1626A6 75%, #0F162680 100%), linear-gradient(180deg, transparent 70%, #0F1626 100%); }
}

/* ¿Te suena alguno de estos? */
.problemas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-4); }
.problema { gap: var(--espacio-3); }
.problema__dolor { margin: 0; font: 700 19px/26px var(--font-sans); color: var(--texto); }
.problema__sol { margin: 0; padding-left: var(--espacio-4); border-left: 3px solid var(--escalon-listo); color: var(--texto-suave); }
@media (min-width: 720px) { .problemas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .problema--ancho { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .problemas { grid-template-columns: repeat(6, minmax(0, 1fr)); } .problema { grid-column: span 3; } .problemas li:nth-child(-n+3) { grid-column: span 2; } .problemas li:nth-child(4) { grid-column: span 2; } .problema--ancho { grid-column: span 4; } }

/* Rubros */
.rubros { margin-top: var(--espacio-6); display: flex; flex-direction: column; gap: var(--espacio-3); }
.rubros__t { margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); }
.rubros__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.rubros__lista a { display: inline-flex; align-items: center; min-height: var(--tactil-min); padding: 0 var(--espacio-4); border: 1px solid var(--borde-control); border-radius: var(--radio-full); color: var(--texto); text-decoration: none; font-weight: 500; font-size: 15px; }
.rubros__lista a:hover { background: var(--superficie-hover); }
.rubros__lista a:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }

.ver-mas { margin: var(--espacio-5) 0 0; }
.plan__para { color: var(--texto-suave); }

/* Tu portal */
.portal-bloque { display: grid; gap: var(--espacio-7); align-items: center; }
.portal-bloque__texto { display: flex; flex-direction: column; gap: var(--espacio-4); max-width: var(--lectura-max); }
.portal-bloque__texto .bs-lista-incluye { font-size: 16px; line-height: 24px; }
.portal-bloque__fig { margin: 0; justify-self: center; width: min(300px, 80%); padding: 10px; border-radius: 40px; background: var(--superficie-elevada); border: 1px solid var(--borde-control); box-shadow: var(--sombra-flotante); }
.portal-bloque__fig img { display: block; width: 100%; height: auto; border-radius: 30px; }
@media (min-width: 900px) { .portal-bloque { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

/* Comparativa */
.tabla-formas td { font-size: 15px; line-height: 22px; }
.tabla-formas .tabla-formas__nos, .tabla-formas td:nth-child(2) { background: var(--estado-proceso-fondo); color: var(--estado-proceso-texto); font-weight: 600; }

/* Opiniones */
.opiniones { display: grid; gap: var(--espacio-4); }
.opinion { margin: 0; gap: var(--espacio-3); }
.opinion blockquote { margin: 0; }
.opinion blockquote p { margin: 0; font-size: 17px; line-height: 26px; color: var(--texto); }
.opinion figcaption { display: flex; flex-direction: column; font-size: 14px; color: var(--texto-tenue); }
.opinion figcaption strong { color: var(--texto); font-size: 15px; }
.opinion__ejemplo { align-self: flex-start; font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radio-sm); border: 1px dashed var(--borde-control); color: var(--texto-tenue); }
@media (min-width: 900px) { .opiniones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nota-maquetado { margin: 0 0 var(--espacio-4); font: 500 12px/18px var(--font-mono); color: var(--texto-tenue); border: 1px dashed var(--borde-control); border-radius: var(--radio-sm); padding: 6px 10px; max-width: var(--lectura-max); }

/* Contacto: qué pasa después */
.despues__pasos { margin: 0; padding: 0; list-style: none; counter-reset: p; display: flex; flex-direction: column; gap: var(--espacio-3); }
.despues__pasos li { counter-increment: p; display: grid; grid-template-columns: 28px 1fr; column-gap: var(--espacio-3); }
.despues__pasos li::before { content: counter(p); grid-row: span 2; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--marca-lima); color: var(--sobre-accion); font: 700 12px/1 var(--font-mono); }
.despues__pasos strong { font-size: 15px; line-height: 22px; }
.despues__pasos span { font-size: 14px; line-height: 20px; color: var(--texto-tenue); }
.tabla-formas { min-width: 680px; }
/* Una ruta con pocos pasos no se estira a todo el ancho (gracias, tu reunión) */
.bs-ruta:not(.bs-ruta--vertical) { max-width: calc(var(--pasos, 7) * 180px); }

/* Trabajos: filtros por tipo, rubro y plan (C-126) */
.filtros-grupos { display: flex; flex-direction: column; gap: var(--espacio-3); }
.filtros__t { display: inline-flex; align-items: center; min-width: 56px; font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); }
.filtros__cuenta .bs-btn { margin-left: var(--espacio-2); min-height: 0; padding: 0; font-size: 13px; }
.filtros__vacio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espacio-3); padding: var(--espacio-5); border: 1px dashed var(--borde-control); border-radius: var(--radio-lg); }
.filtros__vacio p { margin: 0; color: var(--texto-suave); }
.demos__filtro { margin: 0 0 var(--espacio-4); font-size: 15px; color: var(--texto-suave); }
.demos__filtro .bs-btn { margin-left: var(--espacio-2); min-height: 0; padding: 0; }
.rubros__lista a[aria-current="true"] { background: var(--secundario); color: var(--sobre-secundario); border-color: var(--secundario-borde); }
@media (max-width: 1023px) { .portada--imagen .simbolo { width: min(180px, 48vw); } }