/* EL SITIO PÚBLICO B2B (26 sep 2026)
 *
 * Se apoya en `sitio.css` —papel blanco, tinta negra, Inter en peso 300,
 * radios de 8 px, sin sombras— y añade lo que el reposicionamiento pidió:
 * una barra con desplegables, un pie con todo el catálogo, tablas
 * comparativas y fichas densas en vez de tarjetas gigantes casi vacías.
 *
 * CONTRASTE AA. El gris de las etiquetas (`--sitio-ceniza`, #8d8d8d) da
 * 3.3:1 sobre blanco y no alcanza el 4.5:1 que pide WCAG AA para texto
 * pequeño. Aquí las etiquetas, notas y la línea legal pasan a
 * `--sitio-pizarra` (#666, 5.7:1). El color de los pilares se queda en
 * filos de 2 o 3 px, nunca en texto.
 *
 * NADA EN LÍNEA: la CSP es `style-src 'self'`. */

:root {
  --barra-alto: 72px;
  --pilar-entrepreneur: #E8631A;
  --pilar-scholastic: #1259B8;
  --pilar-financial: #1F8A5B;
  --pilar-meta: #6A3FD1;
}

.solo-lector {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Contraste AA en todo el sitio público, portada incluida. */
.sitio .micro, .sitio .pie-sitio .legal, .sitio .aviso-datos { color: var(--sitio-pizarra); }
.sitio :focus-visible { outline: 2px solid var(--sitio-tinta); outline-offset: 3px; }

/* ── LA BARRA ────────────────────────────────────────────────────────── */
.sitio .barra-sitio {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--sitio-tinta);
  background: var(--sitio-papel);
  border-bottom: 1px solid var(--sitio-filo);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* En la portada, sobre el video: transparente y en blanco. Al salir del
   video `inicio.js` pone `sobre-papel` y vuelve a papel y tinta. */
.sitio.inicio:not(.sobre-papel):not(.con-menu) .barra-sitio {
  background: transparent; color: var(--sitio-papel); border-bottom-color: transparent;
}
@media (prefers-reduced-motion: reduce) { .sitio .barra-sitio { transition: none; } }

.sitio .barra-interior {
  max-width: 1280px; margin: 0 auto; height: var(--barra-alto); box-sizing: border-box;
  padding: 0 clamp(20px, 3vw, 32px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.sitio .barra-sitio .marca-sitio {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  color: inherit; text-decoration: none;
  /* AL UNÍSONO EN 500 (dueño, 3 oct 2026, segunda vuelta: el 700 «ya
     está muy gruesa»; su referencia era ESTA barra como estaba). La
     palabra none va en 500 en el sitio, el pie, el login y la consola. */
  font-size: 18px; font-weight: 500; letter-spacing: -0.02em;
  transition: font-size 0.2s ease, gap 0.2s ease;
}
.sitio .barra-sitio .marca-sitio svg { transition: width 0.2s ease, height 0.2s ease; }
/* LA MARCA DE LA PORTADA (dueño, 2 oct 2026, segunda vuelta: «está del
   mismo tamaño y no está en la esquina»). En la portada la barra va a TODO
   lo ancho —el logo pegado a la esquina izquierda, no al carril de
   1280— y sobre el video la marca sube franco (36×27 + 24 px); al
   deslizar a papel se encoge al tamaño de todo el sitio con la misma
   transición. El ancho no se anima: cambiarlo a media transición salta. */
.sitio.inicio .barra-interior { max-width: none; }
.sitio.inicio:not(.sobre-papel):not(.con-menu) .barra-sitio .marca-sitio { font-size: 26px; gap: 12px; }
.sitio.inicio:not(.sobre-papel):not(.con-menu) .barra-sitio .marca-sitio svg { width: 38px; height: 29px; }

/* El botón de las tres rayas: solo en pantallas angostas. */
.sitio .abre-navegacion {
  display: none; width: 44px; min-height: 44px; height: 44px; padding: 0;
  background: transparent; color: inherit; border-radius: 8px; font-size: 0;
}
.sitio .abre-navegacion:hover { background: transparent; }
.sitio .hamburguesa { display: grid; gap: 5px; width: 22px; margin: 0 auto; }
.sitio .hamburguesa span { display: block; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease; }
.sitio .menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.sitio .menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
.sitio .menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.sitio .navegacion { display: flex; align-items: center; gap: 20px; flex: 1 1 auto; justify-content: flex-end; }
.sitio .menu-principal { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.sitio .menu-principal > li > a,
.sitio .menu-principal summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 0 12px; border-radius: 8px;
  color: inherit; text-decoration: none; cursor: pointer;
  font-size: 14px; font-weight: 400; letter-spacing: 0.005em; white-space: nowrap;
  list-style: none;
}
.sitio .menu-principal summary::-webkit-details-marker { display: none; }
.sitio .menu-principal summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.sitio .menu-principal details[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.sitio .menu-principal > li > a:hover,
.sitio .menu-principal summary:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.sitio .menu-principal > li.puesto > a,
.sitio .menu-principal > li.puesto summary { font-weight: 500; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

.sitio .con-sub { position: relative; }
.sitio .submenu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 41;
  min-width: 300px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 2px; padding: 10px;
  background: var(--sitio-papel); color: var(--sitio-tinta);
  border: 1px solid var(--sitio-bruma); border-radius: var(--sitio-radio);
}
.sitio .rejilla-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; min-width: 580px; }
.sitio .subenlace {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-radius: 6px;
  color: var(--sitio-tinta); text-decoration: none;
}
.sitio .subenlace b { font-size: 14px; font-weight: 500; }
.sitio .subenlace span { font-size: 12.5px; line-height: 1.4; color: var(--sitio-pizarra); }
.sitio .subenlace:hover, .sitio .subenlace[aria-current] { background: var(--sitio-niebla); }
.sitio .subenlace[aria-current] b { text-decoration: underline; text-underline-offset: 4px; }
.sitio .ver-todo {
  margin-top: 6px; padding: 12px 12px 4px; border-top: 1px solid var(--sitio-bruma);
  color: var(--sitio-tinta); font-size: 13px; text-decoration: none;
}
.sitio .ver-todo::after { content: " \2192"; }
.sitio .ver-todo:hover { text-decoration: underline; text-underline-offset: 4px; }

.sitio .acciones-barra { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sitio .cta-barra {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border-radius: var(--sitio-pildora); text-decoration: none; white-space: nowrap;
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  background: var(--sitio-char); color: var(--sitio-papel);
}
.sitio .cta-barra:hover { background: var(--sitio-midnight); }
.sitio.inicio:not(.sobre-papel):not(.con-menu) .cta-barra { background: var(--sitio-papel); color: var(--sitio-tinta); }
.sitio .entrar { color: inherit; text-decoration: none; font-size: 14px; }
.sitio .solo-movil { display: none; }

/* ── LA BARRA EN PANTALLA ANGOSTA: una hoja debajo de la barra ─────── */
@media (max-width: 1100px) {
  .sitio .abre-navegacion { display: inline-flex; align-items: center; justify-content: center; }
  .sitio .navegacion {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    top: calc(var(--barra-alto) + env(safe-area-inset-top, 0px));
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px;
    padding: 12px clamp(20px, 3vw, 32px) calc(32px + env(safe-area-inset-bottom, 0px));
    background: var(--sitio-papel); color: var(--sitio-tinta);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .sitio .menu-abierto .navegacion { display: flex; }
  /* Sin guion, el menú se enseña entero: nadie se queda sin navegación. */
  html:not(.con-guion) .sitio .navegacion { display: flex; position: static; }
  .sitio .menu-abierto { background: var(--sitio-papel); color: var(--sitio-tinta); }
  .sitio .menu-principal { flex-direction: column; align-items: stretch; gap: 0; }
  .sitio .menu-principal > li { border-bottom: 1px solid var(--sitio-bruma); }
  .sitio .menu-principal > li > a,
  .sitio .menu-principal summary {
    display: flex; justify-content: space-between; min-height: 56px; padding: 0 2px;
    font-size: 18px; font-weight: 300; border-radius: 0;
  }
  .sitio .menu-principal > li > a:hover, .sitio .menu-principal summary:hover { background: none; }
  .sitio .submenu, .sitio .rejilla-sub { position: static; min-width: 0; border: 0; padding: 0 0 12px; }
  .sitio .rejilla-sub { grid-template-columns: 1fr; }
  .sitio .acciones-barra { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 16px; }
  .sitio .cta-barra { justify-content: center; min-height: 52px; font-size: 15px; }
  /* «Iniciar sesión» en el menú del teléfono era una línea de texto suelta
     (dueño, 4 oct 2026: «se ve horrible el inicio de sesión»): botón de
     relleno suave, del mismo porte que «Agenda una demo». */
  .sitio .acciones-barra .entrar {
    display: flex; justify-content: center; align-items: center;
    min-height: 52px; font-size: 15px; font-weight: 500;
    background: var(--sitio-bruma); border-radius: 999px;
  }
  .sitio .solo-movil { display: flex; justify-content: center; min-height: 44px; align-items: center; }
  body.sitio.con-menu { overflow: hidden; }
}

/* ── EL CUERPO DE LAS PÁGINAS ─────────────────────────────────────── */
.sitio.publico main { padding-top: calc(var(--barra-alto) + env(safe-area-inset-top, 0px)); }
.sitio .portada-b2b { padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--sitio-filo); }
.sitio .portada-b2b .ancho { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.sitio .portada-b2b h1 { max-width: 20ch; text-wrap: balance; }
.sitio .portada-b2b .subida { max-width: 62ch; }
.sitio .portada-b2b[data-pilar] .ancho::before {
  content: ""; width: 48px; height: 3px; margin-bottom: 4px; background: var(--pilar);
}
.sitio [data-pilar="entrepreneur"] { --pilar: var(--pilar-entrepreneur); }
.sitio [data-pilar="scholastic"] { --pilar: var(--pilar-scholastic); }
.sitio [data-pilar="financial"] { --pilar: var(--pilar-financial); }
.sitio [data-pilar="meta"] { --pilar: var(--pilar-meta); }
.sitio .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.sitio .sin-arriba { padding-top: 0; }
.sitio .banda-hueso.sin-arriba { padding-top: clamp(32px, 4vw, 48px); }

.sitio .migas ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--sitio-pizarra); }
.sitio .migas li + li::before { content: "/"; margin-right: 6px; color: var(--sitio-pizarra); }
.sitio .migas a { color: var(--sitio-pizarra); text-decoration: none; }
.sitio .migas a:hover { color: var(--sitio-tinta); text-decoration: underline; text-underline-offset: 4px; }

.sitio .encabezado-seccion { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(24px, 3vw, 40px); max-width: 760px; }
.sitio .encabezado-seccion.segunda { margin-top: clamp(40px, 5vw, 64px); }
.sitio .encabezado-seccion .apoyo { max-width: 60ch; }

.sitio .dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.sitio .dos-columnas > div { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .sitio .dos-columnas { grid-template-columns: 1fr; } }

.sitio .lista-reto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sitio .lista-reto li { padding: 16px 0; border-top: 1px solid var(--sitio-filo); font-size: 15px; line-height: 1.55; color: var(--sitio-tinta); }
.sitio .lista-reto li:last-child { border-bottom: 1px solid var(--sitio-filo); }

/* LA REJILLA DE PUNTOS: título y detalle bajo una línea fina. Es la forma
   densa que sustituye a las tarjetas grandes: se leen doce de un vistazo. */
.sitio .rejilla-puntos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px);
}
.sitio .rejilla-puntos.dos, .sitio .rejilla-puntos.compacta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sitio .rejilla-puntos.una { grid-template-columns: 1fr; }
.sitio .rejilla-puntos li { display: flex; flex-direction: column; gap: 8px; padding: 22px 0 26px; border-top: 1px solid var(--sitio-tinta); }
.sitio .rejilla-puntos h3 { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.sitio .rejilla-puntos p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--sitio-pizarra); }
.sitio .dos-columnas .rejilla-puntos.compacta { grid-template-columns: 1fr; }
@media (max-width: 960px) { .sitio .rejilla-puntos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sitio .rejilla-puntos, .sitio .rejilla-puntos.dos, .sitio .rejilla-puntos.compacta { grid-template-columns: 1fr; } }

/* LAS TARJETAS DE PRODUCTO Y DE INDUSTRIA: un filo del color del pilar,
   el nombre, lo que hace y a dónde lleva. La tarjeta entera es el enlace. */
.sitio .rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.sitio .tarjeta-b2b {
  display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px;
  background: var(--sitio-niebla); border: 1px solid var(--sitio-bruma); border-top: 2px solid var(--pilar, var(--sitio-tinta));
  border-radius: 0 0 var(--sitio-radio) var(--sitio-radio);
  color: var(--sitio-tinta); text-decoration: none;
}
.sitio .banda-hueso .tarjeta-b2b { background: var(--sitio-papel); }
.sitio .tarjeta-b2b h3 { margin: 0; font-size: 22px; font-weight: 300; letter-spacing: -0.02em; }
.sitio .tarjeta-b2b p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sitio-pizarra); flex: 1 1 auto; }
.sitio .tarjeta-b2b .ver { font-size: 13px; }
.sitio .tarjeta-b2b .ver::after { content: " \2192"; }
.sitio .tarjeta-b2b:hover .ver { text-decoration: underline; text-underline-offset: 4px; }
.sitio .grupo-pilar + .grupo-pilar { padding-top: 0; }

/* ── LAS TABLAS: la densidad que pidió el encargo ─────────────────── */
.sitio .tabla-envoltura { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sitio .tabla-datos, .sitio .tabla-comparativa { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.sitio .tabla-datos th, .sitio .tabla-datos td { text-align: left; vertical-align: top; padding: 14px 0; border-top: 1px solid var(--sitio-filo); }
.sitio .tabla-datos tr:last-child th, .sitio .tabla-datos tr:last-child td { border-bottom: 1px solid var(--sitio-filo); }
.sitio .tabla-datos th { width: 40%; padding-right: 20px; font-weight: 500; color: var(--sitio-tinta); }
.sitio .tabla-datos td { color: var(--sitio-pizarra); }
.sitio .tabla-comparativa th, .sitio .tabla-comparativa td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--sitio-filo); }
.sitio .tabla-comparativa thead th { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--sitio-pizarra); border-bottom: 1px solid var(--sitio-tinta); white-space: nowrap; }
.sitio .tabla-comparativa tbody th { font-weight: 500; white-space: nowrap; }
.sitio .tabla-comparativa td { color: var(--sitio-pizarra); }
.sitio .tabla-comparativa a { color: var(--sitio-tinta); text-underline-offset: 4px; }
.sitio .tabla-comparativa tr[data-pilar] th { box-shadow: inset 3px 0 0 var(--pilar); padding-left: 14px; }
.sitio .tabla-comparativa.matriz { min-width: 760px; }
.sitio .tabla-comparativa.matriz thead th:not(:first-child),
.sitio .tabla-comparativa.matriz td { text-align: center; padding-right: 8px; padding-left: 8px; }
.sitio .tabla-comparativa.matriz td.si { color: var(--sitio-tinta); font-size: 11px; }
@media (max-width: 640px) {
  .sitio .tabla-datos th { width: auto; display: block; padding-bottom: 2px; }
  .sitio .tabla-datos td { display: block; padding-top: 0; border-top: 0; }
  .sitio .tabla-datos tr:last-child th { border-bottom: 0; }
}

/* EL FLUJO: una secuencia de verdad, por eso lleva números. */
.sitio .flujo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2.5vw, 32px); }
.sitio .flujo li { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--sitio-tinta); }
.sitio .flujo .paso { font-size: 12px; color: var(--sitio-pizarra); font-variant-numeric: tabular-nums; }
.sitio .flujo h3 { margin: 0; font-size: 18px; font-weight: 500; }
.sitio .flujo p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--sitio-pizarra); }
@media (max-width: 960px) { .sitio .flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(16px, 2.5vw, 32px); } }
@media (max-width: 560px) { .sitio .flujo { grid-template-columns: 1fr; } }

/* LA LISTA DE ENLACES: un documento por renglón y qué contiene. */
.sitio .lista-enlaces { list-style: none; margin: 0; padding: 0; }
.sitio .lista-enlaces li { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 8px 24px; padding: 16px 0; border-top: 1px solid var(--sitio-filo); align-items: baseline; }
.sitio .lista-enlaces li:last-child { border-bottom: 1px solid var(--sitio-filo); }
.sitio .lista-enlaces a { color: var(--sitio-tinta); font-size: 16px; text-underline-offset: 4px; }
.sitio .lista-enlaces span { font-size: 14px; line-height: 1.5; color: var(--sitio-pizarra); }
.sitio .lista-enlaces.grande a { font-size: 19px; font-weight: 300; }
@media (max-width: 640px) { .sitio .lista-enlaces li { grid-template-columns: 1fr; } }

.sitio .captura-b2b { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sitio .captura-b2b img { display: block; width: 100%; height: auto; border-radius: var(--sitio-radio); border: 1px solid var(--sitio-bruma); background: var(--sitio-papel); }
.sitio .captura-b2b figcaption { font-size: 13px; color: var(--sitio-pizarra); }

.sitio .mas { margin-top: 28px; }
.sitio .mision { font-size: clamp(22px, 2.6vw, 30px); font-weight: 300; line-height: 1.3; letter-spacing: -0.015em; }
.sitio .certificaciones { margin-top: 20px; }

/* CONTRATACIÓN: el único sitio del sitio donde vive una cifra. */
.sitio .contratacion { display: flex; flex-direction: column; gap: 18px; background: var(--sitio-papel); border: 1px solid var(--sitio-bruma); }
.sitio .desde-precio { font-size: clamp(22px, 2.4vw, 28px); font-weight: 300; letter-spacing: -0.015em; line-height: 1.3; }
.sitio .lista-simple { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.5; color: var(--sitio-pizarra); }
.sitio .contratacion .pildora { align-self: flex-start; }

.sitio .cierre-b2b .ancho { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.sitio .cierre-b2b h2 { max-width: 22ch; text-wrap: balance; }
.sitio .cierre-b2b .pildora { background: var(--sitio-papel); color: var(--sitio-tinta); }
.sitio .cierre-b2b .pildora:hover { background: var(--sitio-bruma); }
.sitio .cierre-b2b .fantasma { color: var(--sitio-papel); border-color: rgba(255, 255, 255, 0.7); }
.sitio .cierre-b2b .fantasma:hover { background: rgba(255, 255, 255, 0.12); }

/* ── EL FORMULARIO ──────────────────────────────────────────────────── */
.sitio .con-forma { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .sitio .con-forma { grid-template-columns: 1fr; } }
.sitio .forma { display: flex; flex-direction: column; gap: 18px; max-width: 680px; }
.sitio .forma .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .sitio .forma .dos { grid-template-columns: 1fr; } }
.sitio .forma .campo { display: flex; flex-direction: column; gap: 8px; }
.sitio .forma .etiqueta { font-size: 13px; font-weight: 500; color: var(--sitio-tinta); }
.sitio .forma .etiqueta i { font-style: normal; font-weight: 400; color: var(--sitio-pizarra); }
.sitio .forma input, .sitio .forma select, .sitio .forma textarea {
  width: 100%; box-sizing: border-box; min-height: 50px;
  background: var(--sitio-papel); border: 1px solid #b9b9b9; border-radius: var(--sitio-radio);
  color: var(--sitio-tinta); font: inherit; font-size: 16px; padding: 12px 14px;
}
.sitio .forma textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.sitio .forma select { appearance: auto; }
.sitio .forma input:focus, .sitio .forma select:focus, .sitio .forma textarea:focus { outline: 2px solid var(--sitio-tinta); outline-offset: 1px; border-color: var(--sitio-tinta); }
.sitio .forma [aria-invalid="true"] { border-color: #b3261e; }
.sitio .forma button { align-self: flex-start; width: auto; }
.sitio .forma .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sitio .aviso-datos { font-size: 13px; line-height: 1.5; }
.sitio .aviso-datos a { color: var(--sitio-tinta); }
.sitio .forma .aviso { min-height: 1.4em; font-size: 14px; }
.sitio .forma .aviso.mal { color: #b3261e; }
.sitio .forma .aviso.bien { color: var(--sitio-tinta); font-size: 17px; }
.sitio .antes-forma { position: sticky; top: calc(var(--barra-alto) + 24px); }

/* El botón de la forma no hereda el de la aplicación (`none.css` lo pone
   a lo ancho, con 58 px y letra de 19). */
.sitio .pildora, .sitio .fantasma { width: auto; font-size: 13px; }
.sitio button.pildora { min-height: 48px; }

/* ── EL PIE ─────────────────────────────────────────────────────────── */
/* MENOS AIRE MUERTO (dueño, 4 oct 2026 — cambio 2 de docs/29: «solo
   quita el aire vacío»): el colchón entre el cierre oscuro y las
   columnas era de más de una pantalla en total. */
.sitio .pie-b2b { display: flex; flex-direction: column; gap: 28px; max-width: 1280px; padding-top: 28px; }
.sitio .pie-columnas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 24px; width: 100%; }
.sitio .columna-pie { display: flex; flex-direction: column; gap: 14px; }
.sitio .titulo-columna { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--sitio-tinta); margin: 0; }
.sitio .columna-pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sitio .pie-b2b .columna-pie a { font-size: 13.5px; line-height: 1.4; color: var(--sitio-pizarra); text-decoration: none; }
.sitio .pie-b2b .columna-pie a:hover { color: var(--sitio-tinta); text-decoration: underline; text-underline-offset: 4px; }
.sitio .pie-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; width: 100%; padding-top: 24px; border-top: 1px solid var(--sitio-filo); }
.sitio .marca-pie { display: inline-flex; align-items: center; gap: 8px; color: var(--sitio-tinta); text-decoration: none; font-weight: 500; }
.sitio .pie-b2b .legal { width: auto; margin: 0; font-size: 12.5px; }
@media (max-width: 1100px) { .sitio .pie-columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sitio .pie-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── LA SALIDA SEGURA EN TRES FRENTES (dueño, 26 sep 2026) ──────────
   El bloque que la portada, Educación y ABC comparten. Va en banda
   oscura porque es la tesis del sitio: el cliente ideal son colegios y el
   argumento es la entrega del alumno. El azul de Scholastic es un filo,
   nunca un fondo. */
.sitio .salida-segura .encabezado-seccion { max-width: 820px; }
.sitio .salida-segura .encabezado-seccion::before { content: ""; width: 48px; height: 3px; background: var(--pilar); }
.sitio .frentes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); }
.sitio .frente { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.45); }
.sitio .frente .numero { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--sitio-bruma); }
.sitio .frente h3, .sitio .frente h4 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 300; letter-spacing: -0.02em; color: var(--sitio-papel); }
.sitio .frente .pregunta { font-size: 15px; color: var(--sitio-bruma); }
.sitio .puntos-frente { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.sitio .puntos-frente li { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 14.5px; line-height: 1.55; color: var(--sitio-papel); }
.sitio .vias { margin-top: clamp(36px, 4vw, 56px); display: flex; flex-direction: column; gap: 14px; }
.sitio .lista-vias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sitio .lista-vias li { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--sitio-radio); }
.sitio .lista-vias b { font-weight: 500; color: var(--sitio-papel); }
.sitio .lista-vias span { font-size: 14px; line-height: 1.5; color: var(--sitio-bruma); }
.sitio .salida-segura .colegios-hoy { margin-top: 18px; color: var(--sitio-bruma); }
.sitio .salida-segura .acciones { margin-top: 32px; }
.sitio .salida-segura .pildora { background: var(--sitio-papel); color: var(--sitio-tinta); }
.sitio .salida-segura .pildora:hover { background: var(--sitio-bruma); }
.sitio .salida-segura .fantasma { color: var(--sitio-papel); border-color: rgba(255, 255, 255, 0.7); }
.sitio .salida-segura .fantasma:hover { background: rgba(255, 255, 255, 0.12); }
.sitio .banda-oscura .micro { color: var(--sitio-bruma); }
@media (max-width: 900px) { .sitio .frentes, .sitio .lista-vias { grid-template-columns: 1fr; } .sitio .frente + .frente { margin-top: 28px; } }

/* LAS CINCO INDUSTRIAS DE LA PORTADA: eran cuatro en una rejilla de tres
   con hilos de 1 px entre celdas, y una celda vacía se ve como un hueco
   gris. Cinco en fila en pantalla ancha; de dos en dos después, con la
   última a lo ancho. */
@media (min-width: 1101px) { .inicio .sectores { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 561px) and (max-width: 1100px) {
  .inicio .sectores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inicio .sectores .sector:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.inicio .nota-capturas { margin-top: 24px; }

/* EL TITULAR FORMAL ES MÁS LARGO que los de la víspera («Tu hora pico,
   bajo control»), y en la columna de 400 px de la portada se partía en
   siete renglones de 62 px. Columna más ancha y letra un punto menor. */
.inicio .hero .entrada { max-width: 780px; }
.inicio .hero .entrada .cuerpo { max-width: 60ch; }
.inicio .entrada-hero h1 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.08; }

/* Las páginas legales, el estado y la API traen `main#vista` con su
   propio relleno (planes.css), que gana por el id: sin esto la barra fija
   tapaba el título. */
body.sitio.planes.publico main#vista { padding-top: calc(var(--barra-alto) + env(safe-area-inset-top, 0px) + 40px); }

/* LA IMPLEMENTACIÓN SON CINCO PASOS: en pantalla ancha, cinco columnas;
   abajo de 960 px manda la regla general de `.flujo` (dos y luego una). */
@media (min-width: 961px) { .sitio .flujo.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* UN ANCLA NO QUEDA DEBAJO DE LA BARRA FIJA: /plataforma#implementacion
   saltaba y la barra tapaba la etiqueta de la sección. */
.sitio [id] { scroll-margin-top: calc(var(--barra-alto) + env(safe-area-inset-top, 0px) + 16px); }

/* ══════════════════════════════════════════════════════════════════════
 * LA FASE 2 DE LA AUDITORÍA WEB (docs/22, 29 sep 2026)
 * ══════════════════════════════════════════════════════════════════ */

/* La portada lleva los frentes compactos: dos puntos y las vías en una línea. */
.sitio .salida-segura.compacta .puntos-frente li { font-size: 15px; }
.sitio .salida-segura .vias-linea { margin-top: clamp(28px, 3vw, 40px); max-width: 72ch; color: var(--sitio-bruma); }

/* Cuatro tarjetas en fila para los ecosistemas de Plataforma. */
@media (min-width: 961px) { .sitio .rejilla-tarjetas.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* El diagrama de arquitectura: ancho completo, borde fino, pie pequeño. */
.sitio .diagrama-b2b { margin: 0 0 clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 12px; }
.sitio .diagrama-b2b img { display: block; width: 100%; height: auto; border: 1px solid var(--sitio-bruma); border-radius: var(--sitio-radio); background: var(--sitio-papel); }
.sitio .diagrama-b2b figcaption { font-size: 13px; color: var(--sitio-pizarra); }

/* Dos capturas de un producto, en fila. */
.sitio .capturas-b2b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
@media (max-width: 860px) { .sitio .capturas-b2b { grid-template-columns: 1fr; } }

/* EL PLEGABLE: un `<details>` con teclado y aria nativos. El resumen es un
   renglón con un chevrón; el cuerpo, el contenido tal cual. */
.sitio details.plegable { border-top: 1px solid var(--sitio-tinta); }
.sitio details.plegable > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--sitio-tinta);
}
.sitio details.plegable > summary::-webkit-details-marker { display: none; }
.sitio details.plegable > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.15s ease;
}
.sitio details.plegable[open] > summary::after { transform: rotate(-135deg); }
.sitio details.plegable > summary:hover { text-decoration: underline; text-underline-offset: 5px; }
.sitio .plegable-cuerpo { padding: 0 0 22px; }
.sitio .plegable-cuerpo .rejilla-puntos li:first-child { border-top: 0; padding-top: 4px; }
.sitio .plegable-cuerpo .tabla-datos tr:first-child th, .sitio .plegable-cuerpo .tabla-datos tr:first-child td { border-top: 0; }

/* SEGURIDAD: seis pilares en dos columnas; el detalle técnico bajo cada uno. */
.sitio .pilares { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.sitio .pilar { display: flex; flex-direction: column; gap: 10px; padding: 26px 0 8px; border-top: 1px solid var(--sitio-tinta); }
.sitio .pilar h2, .sitio .pilar h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 300; letter-spacing: -0.02em; margin: 0; }
/* LAS TRES PUERTAS DE SEGURIDAD (4 oct 2026): dirección, operación,
   sistemas. Tres tarjetas que llevan a su nivel; en teléfono, una
   debajo de otra. */
.sitio .niveles-seguridad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sitio .niveles-seguridad .nivel { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--sitio-bruma);
  border-radius: var(--sitio-radio); background: var(--sitio-papel); color: var(--sitio-tinta); text-decoration: none; }
.sitio .niveles-seguridad .nivel b { font-weight: 500; font-size: 17px; }
.sitio .niveles-seguridad .nivel b::after { content: " \2193"; color: var(--sitio-pizarra); }
.sitio .niveles-seguridad .nivel span { font-size: 14px; color: var(--sitio-pizarra); }
.sitio .niveles-seguridad .nivel:hover { border-color: var(--sitio-tinta); }
@media (max-width: 760px) { .sitio .niveles-seguridad { grid-template-columns: 1fr; } }
.sitio .pilar > p { font-size: 16px; line-height: 1.5; color: var(--sitio-tinta); max-width: 52ch; }
.sitio .pilar details.plegable { border-top: 0; margin-top: 4px; }
.sitio .pilar details.plegable > summary { min-height: 44px; padding: 8px 0; font-size: 14px; font-weight: 500; color: var(--sitio-pizarra); justify-content: flex-start; }
.sitio .pilar details.plegable > summary::after { margin-left: 4px; }
.sitio .pilar .plegable-cuerpo { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.sitio .pilar .plegable-cuerpo h3 { font-size: 15px; font-weight: 500; margin-top: 8px; }
.sitio .pilar .plegable-cuerpo p { font-size: 14.5px; line-height: 1.55; color: var(--sitio-pizarra); }
@media (max-width: 860px) { .sitio .pilares { grid-template-columns: 1fr; } }

/* PREGUNTAS FRECUENTES: una pregunta por renglón, la respuesta plegada. */
.sitio .preguntas { max-width: 820px; display: flex; flex-direction: column; }
.sitio .preguntas details.plegable:last-child { border-bottom: 1px solid var(--sitio-tinta); }
.sitio .preguntas details.plegable > summary { font-size: 18px; font-weight: 400; }
.sitio .preguntas .plegable-cuerpo p { font-size: 15.5px; line-height: 1.55; color: var(--sitio-pizarra); max-width: 68ch; }

/* LEGALES: volver al índice al final de cada bloque, y una hoja imprimible. */
.volver-indice { margin: 18px 0 0; font-size: 13px; }
.volver-indice a { color: var(--secundario, #666); text-decoration: none; }
.volver-indice a:hover { color: var(--negro, #000); text-decoration: underline; text-underline-offset: 4px; }
@media print {
  .sitio .barra-sitio, .sitio .pie-sitio, .sitio .pie, .volver-indice, .sitio .cierre-b2b, .sitio .acciones { display: none !important; }
  .sitio.publico main, body.sitio.planes.publico main#vista { padding-top: 0; }
  .sitio details.plegable, .sitio details.plegable[open] { border: 0; }
  .sitio details.plegable > .plegable-cuerpo { display: block; }
  .sitio a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
}

/* VERIFICADO POR TERCEROS (propuesta B aprobada, 1 oct 2026): la línea
   de la portada y tres celdas mudas en /seguridad#verificado. */
.sitio .verificado-terceros { margin: 18px 0 0; }
.sitio .verificado-celdas { list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sitio .verificado-celdas li { background: var(--sitio-papel);
  border: 1px solid var(--sitio-filo); border-radius: 14px;
  padding: 26px 18px; text-align: center; }
.sitio .verificado-celdas .cal { display: block; font-size: 42px;
  font-weight: 300; letter-spacing: -0.02em; line-height: 1; }
.sitio .verificado-celdas .quien { display: block; margin-top: 10px;
  font-size: 13.5px; color: var(--sitio-pizarra); }
.sitio .captura-prueba { margin: 18px 0 0; }
.sitio .captura-prueba img { width: 100%; height: auto; display: block;
  border-radius: 12px; border: 1px solid var(--sitio-filo); }
@media (max-width: 720px) {
  .sitio .verificado-celdas { grid-template-columns: 1fr; }
}