/*
 * Lo que necesita WordPress encima de los estilos del prototipo (unnion.css y paginas.css van tal cual).
 * Aquí solo lo que el prototipo no tenía porque no corría en WordPress.
 */

/* «Saltar al contenido»: invisible hasta que llega el foco del teclado */
.saltar { position: absolute; left: 16px; top: -60px; z-index: 300; padding: 10px 18px; border-radius: 999px; background: var(--hoja); color: var(--noche); font-weight: 600; text-decoration: none; transition: top .2s; }
.saltar:focus { top: 16px; }

/* Con la barra de administración (solo quien tiene sesión), la cabecera fija baja lo que mide la barra */
body.admin-bar .cabecera, body.admin-bar .menu-movil { top: 32px; }
@media (max-width: 782px) { body.admin-bar .cabecera, body.admin-bar .menu-movil { top: 46px; } }

/* La razón social y el NIT en la línea legal del pie (hallazgo G-04) */
.legal span small { display: block; margin-top: 4px; opacity: .8; }

/* El boletín del pie lleva la autorización de datos (Ley 1581): la píldora pasa a una fila interna
   y la casilla queda debajo, fuera de la píldora */
.pie-boletin form[data-tipo] { display: block; padding: 0; border: 0; border-radius: 0; background: none; }
.pie-boletin .boletin-fila { display: flex; gap: 6px; margin-top: 16px; padding: 6px; border-radius: 999px; background: rgba(0, 0, 0, .25); border: 1px solid var(--borde); }
.pie-boletin .check { margin: 10px 0 0; font-size: 12px; }

/* Ficha de producto: en computador, el recorte se pone a la altura y distancia de cada producto
   (en el prototipo lo hacía JavaScript; ahora lo manda el servidor en variables) */
@media (min-width: 960px) {
  .producto-portada .recorte[style*="--alto"] { height: var(--alto); bottom: var(--abajo); left: var(--izq, 67%); }
}

/* El texto de las notas son bloques nativos del editor (para que Unnión los edite): estas reglas los
   llevan al aspecto de las piezas del prototipo (n-recuadro, n-pasos, n-cita, n-tabla) */
/* El recuadro lleva el ícono de información a la izquierda, como el del prototipo (38 px + 16 px de espacio) */
.n2-cuerpo .n-recuadro.wp-block-group { display: block; position: relative; padding-left: 78px; }
.n2-cuerpo .n-recuadro.wp-block-group::before { content: ''; position: absolute; left: 24px; top: 22px; width: 38px; height: 38px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") center / 20px no-repeat; }
.n2-cuerpo .n-recuadro p { margin: 0; }
.n2-cuerpo .n-recuadro strong { display: block; font-size: 17px; color: #102017; margin-bottom: 4px; }
.n2-cuerpo .n-pasos li strong { display: block; color: #102017; font-size: 17px; }
.n2-cuerpo .n-cita p { margin: 0; }
.n2-cuerpo .n-tabla.wp-block-table { padding: 0; }
.n2-cuerpo .n-tabla table.has-fixed-layout { table-layout: auto; }
.n2-cuerpo .n-tabla thead { border-bottom: 0; }
.n2-cuerpo .n-foto.wp-block-image img { height: auto; }

/* El contenido de una página aún sin secciones (fases 1 a 3) no queda debajo de la cabecera fija */
main#contenido > .wp-block-post-content:empty { min-height: 40vh; }