/* ==========================================================================
   Armazón del sitio público: cabecera y pie (includes/header.php, footer.php).
   Se carga en todas las páginas públicas después de styles.css.
   La web es primero la elección en curso; lo comercial va a la derecha y abajo.
   ========================================================================== */

:root { --nav-height: 68px; }
@media (max-width: 768px) { :root { --nav-height: 60px; } }

body { background: var(--blanco); }

/* ---------- Cabecera ---------- */
.sitio-cab {
    position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-fixed, 300);
    height: var(--nav-height);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--ceniza);
    font-family: var(--font-text);
}
.sitio-cab__fila {
    max-width: 1220px; height: 100%; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 22px;
}
.sitio-cab a { color: var(--tinta); text-decoration: none; }
.sitio-cab :focus-visible, .sitio-pie :focus-visible { outline: 2px solid var(--turquesa); outline-offset: 2px; border-radius: 6px; }

.sitio-marca { flex: none; display: inline-flex; align-items: center; gap: 10px; }
.sitio-marca svg { width: 30px; height: 30px; flex: none; }
.sitio-marca__nombre { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: -.02em; color: var(--tinta); white-space: nowrap; }
.sitio-marca__nombre span { color: var(--gris); }

/* La elección en curso, siempre a la vista: es la razón de la portada. */
.sitio-cita {
    flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 12px 6px 10px;
    font-size: 13px; line-height: 1; white-space: nowrap; color: var(--tinta);
    background: var(--hueso); border: 1px solid var(--ceniza); border-radius: 999px;
    transition: border-color .15s;
}
.sitio-cita:hover { border-color: var(--tinta); }
.sitio-cita b { font-weight: 500; }
.sitio-cita span:last-child { color: var(--gris); font-family: var(--font-mono); font-size: 12px; }
.sitio-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--turquesa); box-shadow: 0 0 0 0 rgba(var(--turquesa-rgb), .5); animation: sitio-latido 2.4s infinite; }
@keyframes sitio-latido { 0% { box-shadow: 0 0 0 0 rgba(var(--turquesa-rgb), .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(var(--turquesa-rgb), 0); } }

.sitio-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.sitio-nav a {
    display: inline-flex; align-items: center; min-height: 38px; padding: 8px 11px; border-radius: 9px;
    font-size: 14px; font-weight: 500; color: var(--gris); white-space: nowrap; transition: color .15s, background .15s;
}
.sitio-nav a:hover { color: var(--tinta); background: var(--hueso); }
.sitio-nav a[aria-current="page"] { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--turquesa); border-radius: 0; }

.sitio-acciones { flex: none; display: flex; align-items: center; gap: 6px; }
.sitio-acceder { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 10px; font-size: 14px; color: var(--gris); border-radius: 9px; }
.sitio-acceder:hover { color: var(--tinta); background: var(--hueso); }
.sitio-acceder svg { width: 16px; height: 16px; }
.sitio-boton {
    display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 15px;
    font-size: 14px; font-weight: 500; white-space: nowrap; border-radius: 10px;
    color: var(--blanco); background: var(--tinta); border: 1px solid var(--tinta); transition: opacity .15s;
}
.sitio-cab a.sitio-boton, .sitio-movil a.sitio-boton { color: var(--blanco); }
.sitio-boton:hover { opacity: .86; }

.sitio-menu {
    display: none; margin-left: auto; align-items: center; justify-content: center; gap: 8px;
    min-width: 44px; min-height: 44px; padding: 0 12px; font: inherit; font-size: 14px; font-weight: 500;
    color: var(--tinta); background: var(--blanco); border: 1px solid var(--ceniza); border-radius: 10px; cursor: pointer;
}
.sitio-menu svg { width: 18px; height: 18px; }

/* Menú del móvil: panel bajo la cabecera. */
.sitio-movil {
    position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: var(--z-fixed, 300);
    max-height: calc(100dvh - var(--nav-height)); overflow-y: auto;
    padding: 12px 18px 22px; background: var(--blanco); border-bottom: 1px solid var(--ceniza);
    box-shadow: 0 24px 40px -28px rgba(var(--tinta-rgb), .45);
}
.sitio-movil[hidden] { display: none; }
.sitio-movil nav { display: grid; }
.sitio-movil nav a {
    display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px;
    font-size: 1.0625rem; font-weight: 500; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--ceniza);
}
.sitio-movil nav a::after { content: '→'; color: var(--gris); font-weight: 400; }
.sitio-movil nav a[aria-current="page"] { color: var(--turquesa-dark, #0f766e); }
.sitio-movil .sitio-cita { margin: 4px 0 10px; }
.sitio-movil__pie { display: grid; gap: 10px; margin-top: 18px; }
.sitio-movil__pie .sitio-boton { justify-content: center; min-height: 48px; }
.sitio-movil__pie .sitio-acceder { justify-content: center; min-height: 44px; border: 1px solid var(--ceniza); }

@media (max-width: 1180px) {
    .sitio-cab__fila { gap: 14px; }
    .sitio-cita span:last-child { display: none; }
    .sitio-nav a { padding: 8px 8px; }
}
@media (max-width: 1020px) {
    .sitio-nav, .sitio-acciones, .sitio-cab__fila > .sitio-cita { display: none; }
    .sitio-menu { display: inline-flex; }
}
@media (max-width: 640px) {
    .sitio-cab__fila { padding: 0 14px 0 18px; }
    .sitio-marca svg { width: 26px; height: 26px; }
    .sitio-marca__nombre { font-size: 1rem; }
}
@media (max-width: 360px) {
    .sitio-marca__nombre span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sitio-punto { animation: none; } }

/* ---------- Pie ---------- */
.sitio-pie { background: var(--tinta); color: rgba(var(--blanco-rgb), .72); font-family: var(--font-text); font-size: 14px; line-height: 1.55; }
.sitio-pie a { color: rgba(var(--blanco-rgb), .82); text-decoration: none; }
.sitio-pie a:hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }
.sitio-pie__rejilla {
    max-width: 1220px; margin: 0 auto; padding: 56px 24px 36px;
    display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px;
}
.sitio-pie .sitio-marca__nombre { color: var(--blanco); }
.sitio-pie .sitio-marca__nombre span { color: rgba(var(--blanco-rgb), .55); }
.sitio-pie__lema { margin: 16px 0 0; max-width: 40ch; }
.sitio-pie__neutral {
    display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 12px 14px; max-width: 44ch;
    font-size: 13px; border: 1px solid rgba(var(--blanco-rgb), .16); border-radius: 12px;
}
.sitio-pie__neutral svg { flex: none; width: 18px; height: 18px; color: var(--turquesa); margin-top: 1px; }
.sitio-pie h2 {
    margin: 0 0 14px; font-family: var(--font-mono); font-size: 12px; font-weight: 400;
    text-transform: uppercase; letter-spacing: .08em; color: rgba(var(--blanco-rgb), .5);
}
.sitio-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sitio-pie__base {
    max-width: 1220px; margin: 0 auto; padding: 18px 24px 28px;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
    font-size: 12.5px; color: rgba(var(--blanco-rgb), .5); border-top: 1px solid rgba(var(--blanco-rgb), .12);
}
.sitio-pie__base p { margin: 0; }
@media (max-width: 900px) {
    .sitio-pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sitio-pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .sitio-pie__rejilla { grid-template-columns: 1fr; gap: 28px; padding: 44px 18px 28px; }
    .sitio-pie__base { padding: 18px 18px 26px; }
}
.sitio-pie .sitio-marca svg rect { fill: var(--blanco); }
.sitio-movil .sitio-cita span:last-child { display: inline; }