/* ==========================================================================
   mejoras.css — se carga después de estilos.css y bloques.css
   Componentes añadidos en la revisión de septiembre de 2026:
   menú de una sola fila, migas, FAQ, acordeones, pasos, tablas,
   barra fija de llamada en móvil y pie a columnas.
   ========================================================================== */

/* --- Accesibilidad: salto al contenido ---------------------------------- */
.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: var(--color-primario);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 0 0 var(--border-radius) 0;
}
.salto-contenido:focus { left: 0; }

:where(a, button, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--color-primario-claro);
    outline-offset: 2px;
}

/* --- Cabecera pegajosa en lugar de fija -------------------------------- */
/* La cabecera era position:fixed y el hueco se compensaba con un
   padding-top de 10rem escrito a mano en body, con dos valores más en los
   media queries. Con la altura real de la cabecera (180 px) ese hueco se
   quedaba corto y el contenido se metía 20 px por debajo del menú. Con
   sticky la cabecera ocupa su sitio en el flujo, no hace falta compensar
   nada y no puede volver a descuadrarse al cambiar el menú. */
.cabecera-fija {
    position: sticky;
    top: 0;
}
body {
    padding-top: 0;
}
/* El ancla de un enlace interno queda debajo de la cabecera pegajosa,
   así que se reserva su altura aproximada al hacer scroll. */
:target,
main section,
main h2,
main h3 {
    scroll-margin-top: 11.5rem;
}
@media (max-width: 768px) {
    :target, main section, main h2, main h3 { scroll-margin-top: 8.5rem; }
}

/* --- Menú ---------------------------------------------------------------- */
/* El diseño original tenía cuatro entradas centradas, y para centrarlas
   .fila-inferior .contenedor llevaba 210px de padding a cada lado: de los
   1000px del contenedor, el menú solo disponía de 580. Con ocho entradas eso
   obligaba a una barra de desplazamiento en escritorio. Se recupera el ancho
   completo del contenedor. */
.fila-inferior .contenedor {
    padding-left: var(--padding-contenedor);
    padding-right: var(--padding-contenedor);
}
.menu-principal ul {
    justify-content: center;
    flex-wrap: wrap;          /* red de seguridad: si algún día no cabe, envuelve */
}
.menu-principal ul li {
    flex: 0 0 auto;
    min-width: 0;
}
.menu-principal ul li a {
    padding: 0.7rem 0.8rem;
    white-space: nowrap;
    font-size: 0.95rem;
}

/* En tableta y móvil no cabe de ninguna manera, así que se desliza en una
   sola línea. Sin barra de desplazamiento a la vista: en su lugar, un
   degradado en el borde derecho, que se entiende mejor que una barra fina. */
@media (max-width: 1024px) {
    .fila-inferior { position: relative; }
    .fila-inferior::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 2.5rem;
        pointer-events: none;
        background: linear-gradient(to right, rgba(244,244,244,0), var(--color-fondo-medio) 70%);
    }
    .fila-inferior .contenedor { padding-left: 0; padding-right: 0; }
    .menu-principal ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .menu-principal ul::-webkit-scrollbar { display: none; }
    .menu-principal ul li { scroll-snap-align: start; }
    .menu-principal ul li:last-child a { padding-right: 2.75rem; }
}
@media (max-width: 768px) {
    .menu-principal ul li a { padding: 0.55rem 0.7rem; font-size: 0.85rem; }
    .menu-principal ul li:last-child a { padding-right: 2.75rem; }
}

/* --- Migas de pan ------------------------------------------------------- */
.migas { background: var(--color-seccion-1); padding: 0.5rem 0; font-size: 0.85rem; }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.migas li + li::before { content: "›"; margin-right: 0.35rem; color: var(--color-texto-claro); }
.migas a { color: var(--color-primario-oscuro); text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas span { color: var(--color-texto-claro); }

/* --- Preguntas frecuentes ---------------------------------------------- */
.faq { max-width: 900px; margin: 0 auto; }
.faq-item {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--border-radius);
    margin-bottom: 0.6rem;
    overflow: hidden;
}
.faq-item > summary {
    cursor: pointer;
    padding: 0.9rem 2.5rem 0.9rem 1rem;
    font-weight: 700;
    position: relative;
    list-style: none;
    line-height: 1.4;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: "+";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-primario);
    font-weight: 400;
}
.faq-item[open] > summary::after { content: "–"; }
.faq-item[open] > summary { background: var(--color-fondo-medio); }
.faq-r { padding: 0.25rem 1rem 1rem; }
.faq-r p { margin: 0 0 0.6rem; }
.faq-r p:last-child { margin-bottom: 0; }
.faq-r ul { margin: 0 0 0.6rem 1.1rem; }

/* --- Acordeón para listados largos ------------------------------------- */
.acordeon {
    border: 1px dashed var(--color-borde);
    border-radius: var(--border-radius);
    margin: 1rem 0;
    background: var(--color-fondo);
}
.acordeon > summary {
    cursor: pointer;
    padding: 0.8rem 1rem;
    font-weight: 700;
    color: var(--color-primario-oscuro);
}
.acordeon[open] > summary { border-bottom: 1px solid var(--color-borde); }
.acordeon-cuerpo { padding: 0.9rem 1rem; }
.acordeon-nota { padding: 0.9rem 1rem 0; margin: 0; color: var(--color-texto-claro); font-size: 0.9rem; }
.acordeon-cuerpo ul { columns: 2; column-gap: 2rem; margin-left: 1.1rem; }
@media (max-width: 600px) { .acordeon-cuerpo ul { columns: 1; } }
.lista-inline { list-style: none; margin: 0; padding: 0; columns: auto !important; }
.lista-inline li { display: inline; }
.lista-inline li::after { content: " · "; color: var(--color-texto-claro); }
.lista-inline li:last-child::after { content: ""; }

/* --- Pasos numerados --------------------------------------------------- */
.pasos {
    list-style: none;
    counter-reset: paso;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
}
.pasos li {
    counter-increment: paso;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--border-radius);
    padding: 1.1rem 1rem 1rem 1rem;
    position: relative;
}
.pasos li::before {
    content: counter(paso);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-primario);
    color: #fff;
    font-weight: 700;
    margin-bottom: 0.6rem;
}
.pasos li h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.pasos li p { margin: 0; }

/* --- Tablas ------------------------------------------------------------ */
.tabla-envoltorio { overflow-x: auto; margin: 1rem 0 1.5rem; -webkit-overflow-scrolling: touch; }
.tabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-fondo);
    font-size: 0.95rem;
    min-width: 520px;
}
.tabla caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 0.5rem;
    color: var(--color-texto-claro);
    font-size: 0.9rem;
}
.tabla th, .tabla td {
    border: 1px solid var(--color-borde);
    padding: 0.6rem 0.7rem;
    text-align: left;
    vertical-align: top;
}
.tabla thead th { background: var(--color-primario); color: #fff; font-weight: 700; }
.tabla tbody th { background: var(--color-fondo-medio); font-weight: 700; }
.tabla tbody tr:nth-child(even) td { background: #fafafa; }
.tabla-datos { min-width: 0; }
.tabla-datos tbody th { width: 34%; }

/* --- Avisos ------------------------------------------------------------ */
.aviso {
    background: #fff8e1;
    border-left: 4px solid #e0a800;
    padding: 0.8rem 1rem;
    margin: 1rem 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-size: 0.95rem;
}
.aviso.aviso-ok { background: #eef7f1; border-left-color: var(--color-primario); }
.aviso.aviso-idioma { background: #eef3fa; border-left-color: #2c5f9e; }

/* --- Rejilla de servicios: que se localice de un vistazo -------------- */
/* Dos grupos etiquetados en lugar de siete tarjetas seguidas: primero por el
   problema que tiene el visitante, después por quién es. Los títulos están en
   primera persona del problema («Abrir la puerta», «La persiana no sube»)
   porque es lo que la persona reconoce sin tener que interpretar. */
.grupo-etiqueta {
    text-align: center;
    margin: 1.5rem 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-texto-claro);
}
.grupo-etiqueta:first-of-type { margin-top: 0.5rem; }

.opcion-menu {
    position: relative;
    padding-bottom: 2.1rem;
}
.opcion-menu h3 { line-height: 1.25; }
.opcion-menu p { font-size: 0.93rem; line-height: 1.4; }
/* Flecha que deja claro que la tarjeta entera es un enlace */
.opcion-menu::after {
    content: "→";
    position: absolute;
    left: 50%;
    bottom: 0.7rem;
    transform: translateX(-50%);
    color: var(--color-primario);
    font-size: 1.15rem;
    line-height: 1;
    opacity: .55;
    transition: var(--transicion-rapida);
}
.opcion-menu:hover::after,
.opcion-menu:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateX(4px);
}
.opcion-menu svg { transition: var(--transicion-rapida); }
.opcion-menu:hover svg { transform: scale(1.06); }

/* --- Indicador de «abierto ahora» ------------------------------------- */
/* El punto en marcha es lo que hace que se lea como un estado en vivo y no
   como un texto más. El estado es siempre abierto: el teléfono se atiende las
   24 horas. Lo que cambia con la hora es el matiz de debajo. */
.estado-ahora {
    max-width: 760px;
    margin: 0 auto;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-left: 5px solid var(--color-primario);
    border-radius: var(--border-radius);
    padding: 1.1rem 1.25rem;
    text-align: center;
}
.estado-cabecera {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    line-height: 1.3;
}
.estado-abierto {
    font-weight: 700;
    color: var(--color-primario-oscuro);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.estado-sep { color: var(--color-borde); }
.estado-titulo { font-weight: 700; color: var(--color-texto); }
.estado-detalle {
    margin: 0 0 0.5rem;
    color: var(--color-texto-claro);
    font-size: 0.97rem;
}
.estado-detalle:last-of-type { margin-bottom: 0.9rem; }
.estado-tel { margin: 0; }

.punto-vivo {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #25965f;
    flex: 0 0 12px;
}
.punto-vivo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25965f;
    animation: latido 2s ease-out infinite;
}
@keyframes latido {
    0%   { transform: scale(1);   opacity: .7; }
    70%  { transform: scale(3.2); opacity: 0; }
    100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .punto-vivo::after { animation: none; }
}
@media (max-width: 600px) {
    .estado-cabecera { font-size: 1.02rem; }
    .estado-sep { display: none; }
}

/* --- Las dos vías de contacto: urgencia o cita ------------------------- */
.dos-vias {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.dos-vias li {
    background: var(--color-fondo);
    border-left: 4px solid var(--color-primario);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
}

/* --- Etiquetas --------------------------------------------------------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; padding: 0; }
.chips li {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.85rem;
}

/* --- Figuras e ilustraciones ------------------------------------------- */
figure.ilustracion { margin: 1.25rem 0; text-align: center; }
figure.ilustracion img, figure.ilustracion svg { max-width: 100%; height: auto; }
figure.ilustracion figcaption {
    font-size: 0.88rem;
    color: var(--color-texto-claro);
    margin-top: 0.5rem;
    text-align: left;
}

/* --- Rejilla genérica de tarjetas -------------------------------------- */
.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}
.rejilla > .tarjeta {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--border-radius);
    padding: 1.1rem;
}
.rejilla > .tarjeta h3 { margin-top: 0; }
.rejilla > .tarjeta ul { margin: 0.5rem 0 0 1.1rem; }

/* --- Barra fija de llamada en móvil ------------------------------------ */
/* Aparece solo al hacer scroll, cuando el botón del hero ya no se ve. Al
   entrar hay dos llamadas a la acción (la de la cabecera y la del hero) y
   tres eran demasiadas. Lo controla js/phone-tracking.js añadiendo la clase
   .visible; sin JavaScript la barra no llega a mostrarse, y quedan los
   botones de la cabecera y del contenido. */
.barra-movil { display: none; }
@media (max-width: 768px) {
    .barra-movil {
        display: block;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 900;
        background: var(--color-primario);
        box-shadow: 0 -2px 10px rgba(0,0,0,.25);
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateY(105%);
        transition: transform .28s ease;
        will-change: transform;
    }
    .barra-movil.visible { transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) {
        .barra-movil { transition: none; }
    }
    .barra-movil a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        padding: 0.7rem 1rem;
        color: #fff;
        text-decoration: none;
    }
    .barra-movil svg { flex: 0 0 24px; }
    .barra-movil-txt { display: flex; flex-direction: column; line-height: 1.15; }
    .barra-movil-txt small { font-size: 0.78rem; opacity: .9; }
    body { padding-bottom: 4.2rem; }
}

/* --- Pie a columnas ---------------------------------------------------- */
.pie-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.25rem 2rem;
    text-align: left;
    padding-bottom: 0.5rem;
}
.pie-col h2 {
    font-size: 1rem;
    margin: 0.75rem 0 0.4rem;
    color: #fff;
    border: 0;
}
footer .pie-col ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
footer .pie-col ul li { margin: 0 0 0.3rem; }
footer .pie-col ul li a { text-decoration: none; opacity: .92; font-size: 0.92rem; }
footer .pie-col ul li a:hover { text-decoration: underline; opacity: 1; }
.pie-telefono { text-align: center; margin: 1rem 0 0.25rem; }
.pie-telefono a { color: #fff; }
.pie-nota {
    text-align: center;
    font-size: 0.82rem;
    opacity: .75;
    max-width: 760px;
    margin: 0.5rem auto;
}
.pie-nota a { color: #fff; }
.pie-copy { text-align: center; font-size: 0.82rem; opacity: .6; margin: 0.5rem 0 0; }

/* --- Detalles de contenido -------------------------------------------- */
.destacado {
    background: var(--color-fondo-claro);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}
.destacado :last-child { margin-bottom: 0; }
.lead { font-size: 1.08rem; }
.dos-columnas ul li, .rejilla ul li { margin-bottom: 0.3rem; }
main h2 { margin-top: 0.25rem; }
main section > .contenedor > h2:first-child { margin-top: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Impresión: las guías tienen que salir limpias en papel ----------- */
@media print {
    .cabecera-fija, .barra-movil, .migas, footer, .seccion-color-4, #contacto-rapido { display: none !important; }
    body { padding: 0 !important; background: #fff; }
    main section { padding: 0.5rem 0; }
    .acordeon, .faq-item { border: 0; }
    .acordeon[open] > summary, .faq-item > summary { background: none; }
    .acordeon-cuerpo, .faq-r { padding-left: 0; }
    details:not([open]) > *:not(summary) { display: revert !important; }
    details { display: block; }
    a[href^="/"]::after, a[href^="http"]::after { content: ""; }
    .no-imprimir { display: none !important; }
}