.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.editorial-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.primary-gradient {
    background: linear-gradient(135deg, #809f9a 0%, #466460 100%);
}

.text-shadow-sm {
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
/* Mobile Menu Toggle Logic */
#mobile-menu:target {
    display: block;
}


.bg-primary-gradient {
    background: linear-gradient(135deg, #4d654a 0%, #41593f 100%);
}

.glass-header {
    background: rgba(249, 250, 248, 0.7);
    backdrop-filter: blur(24px);
}

.asymmetric-card {
    border-radius: 8px;
}

.editorial-shadow {
    box-shadow: 0px 20px 40px rgba(26, 28, 28, 0.06);
}

/* ---------- Plano interactivo de oficinas (Espacios) ---------- */
/* Fondo blanco. Oficinas libres: capa verde permanente; reservadas: capa roja permanente.
   Salas de reuniones/formación y servicios: solo al pasar el ratón.
   El trazo va recortado por la propia forma (solo hacia dentro). */
#plano-svg .zona {
    fill: transparent;
    stroke: transparent;
    stroke-width: 56;           /* la mitad queda recortada: 28 visibles hacia dentro */
    cursor: pointer;
    transition: fill .18s ease, stroke .18s ease;
    outline: none;
}
/* Oficinas libres */
#plano-svg .zona-oficina { fill: rgba(128, 159, 154, 0.30); stroke: rgba(128, 159, 154, 0.55); }
#plano-svg .zona-oficina:hover, #plano-svg .zona-oficina:focus-visible, #plano-svg .zona-oficina.zona-hover {
    fill: rgba(128, 159, 154, 0.55);
    stroke: #466460;
}
/* Reservadas */
#plano-svg .zona-reservada, #plano-svg .zona-oficina.zona-reservada { fill: rgba(186, 26, 26, 0.26); stroke: rgba(186, 26, 26, 0.5); }
#plano-svg .zona-reservada:hover, #plano-svg .zona-reservada:focus-visible, #plano-svg .zona-reservada.zona-hover { fill: rgba(186, 26, 26, 0.42); stroke: #93000a; }
/* Salas y servicios: solo hover */
#plano-svg .zona-reuniones:hover, #plano-svg .zona-formacion:hover, #plano-svg .zona-reuniones:focus-visible, #plano-svg .zona-formacion:focus-visible,
#plano-svg .zona-reuniones.zona-hover, #plano-svg .zona-formacion.zona-hover { fill: rgba(22, 62, 110, 0.35); stroke: #163e6e; }
#plano-svg .zona-comun:hover, #plano-svg .zona-comun:focus-visible, #plano-svg .zona-comun.zona-hover { fill: rgba(113, 121, 119, 0.25); stroke: #717977; }
/* Seleccionada */
#plano-svg .zona-sel, #plano-svg .zona-sel:hover { fill: rgba(216, 163, 51, 0.5); stroke: #d8a333; stroke-width: 72; }
#plano-svg .zona-reservada.zona-sel, #plano-svg .zona-reservada.zona-sel:hover { fill: rgba(186, 26, 26, 0.42); stroke: #d8a333; }
#plano-tip.tip-reservada { color: #93000a; border-color: rgba(186, 26, 26, 0.35); }
/* Modo edición: todas visibles */
#plano-wrap.editando #plano-svg { cursor: crosshair; }
#plano-wrap.editando #plano-svg .zona { pointer-events: none; fill: rgba(128, 159, 154, 0.25); stroke: rgba(70,100,96,.9); }
#plano-wrap.editando #plano-svg .zona-reuniones, #plano-wrap.editando #plano-svg .zona-formacion { fill: rgba(22, 62, 110, 0.25); stroke: rgba(22,62,110,.9); }
#plano-wrap.editando #plano-svg .zona-comun { fill: rgba(113,121,119,.15); stroke: rgba(113,121,119,.8); }
#plano-wrap.editando #plano-svg .zona-pendiente { fill: rgba(206, 53, 104, 0.2); stroke: rgba(206, 53, 104, 0.8); }
#plano-wrap.editando #plano-svg .zona-ignorar { fill: rgba(0,0,0,0.04); stroke: rgba(0,0,0,0.3); stroke-dasharray: 60 60; }
#plano-wrap.editando #plano-svg .zona-sel { fill: rgba(216, 163, 51, 0.5); stroke: #d8a333; }
#plano-svg .zona-temp { fill: rgba(216, 163, 51, 0.3); stroke: #d8a333; stroke-width: 30; pointer-events: none; }
#plano-svg .zona-label { fill: #1a1c1c; font: 700 260px Manrope, sans-serif; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: 40; }

/* ---------- Preguntas frecuentes ---------- */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { background: #f3f3f4; }
.faq-answer a { color: #466460; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.faq-answer a:hover { color: #809f9a; }

/* ---------- Páginas legales ---------- */
.legal h2 { font-size: 1.25rem; font-weight: 700; color: #1a1c1c; margin: 2rem 0 .75rem; }
.legal p, .legal li { color: #414847; line-height: 1.7; }
.legal ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; }
.legal li { margin: .35rem 0; }
.legal a { color: #466460; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Plano en móvil: desplazable horizontalmente */
.plano-scroll { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
@media (hover: none) { #plano-tip { display: none !important; } }