/* ============================================================
   AGENCIA ESTUMA — Hoja de Estilos Principal
   Archivo: css/estilos.css
   Paleta corporativa base: Azul #004F71
   Estructura: Global/Desktop → Tablet → Móvil Grande → Móvil Pequeño
   ============================================================ */


/* ------------------------------------------------------------
   1. RESET CSS BASE
   ------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    line-height: 1;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img,
video {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
    border: none;
    background: none;
    outline: none;
}


/* ------------------------------------------------------------
   2. VARIABLES CSS — PALETA CORPORATIVA AGENCIA ESTUMA
   ------------------------------------------------------------ */

:root {

    /* --- Azul corporativo (color identitario principal) --- */
    --color-corporativo:          #004F71;
    --color-corporativo-oscuro:   #003A54;
    --color-corporativo-medio:    #006494;
    --color-corporativo-claro:    #E6F2F7;
    --color-corporativo-suave:    rgba(0, 79, 113, 0.08);

    /* --- Oscuros / Fondos --- */
    --color-negro:                #0D0D0D;
    --color-oscuro-principal:     #111827;
    --color-oscuro-secundario:    #1C2B3A;
    --color-oscuro-terciario:     #243447;

    /* --- Blancos / Cremas / Texto claro --- */
    --color-blanco:               #FFFFFF;
    --color-fondo-pagina:         var(--color-blanco);
    --color-crema:                #F5F2EE;
    --color-texto-sobre-oscuro:   #EAE8E4;

    /* --- Grises --- */
    --color-gris-claro:           #F4F6F8;
    --color-gris-medio:           #D1D5DB;
    --color-gris-texto:           #6B7280;
    --color-gris-oscuro:          #374151;

    /* --- Bordes --- */
    --color-borde-claro:          rgba(209, 213, 219, 0.60);
    --color-borde-oscuro:         rgba(255, 255, 255, 0.08);
    --color-borde-corporativo:    rgba(0, 79, 113, 0.25);

    /* --- Tipografía --- */
    --fuente-principal:           'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* --- Escala tipográfica --- */
    --tipo-xs:                    0.75rem;
    --tipo-sm:                    0.875rem;
    --tipo-base:                  1rem;
    --tipo-md:                    1.125rem;
    --tipo-lg:                    1.375rem;
    --tipo-xl:                    1.75rem;
    --tipo-2xl:                   2.25rem;
    --tipo-3xl:                   3.25rem;
    --tipo-4xl:                   5rem;
    --tipo-display:               7rem;

    /* --- Espaciados (sistema 8pt) --- */
    --espacio-xs:                 0.5rem;
    --espacio-sm:                 1rem;
    --espacio-md:                 2rem;
    --espacio-lg:                 4rem;
    --espacio-xl:                 7rem;
    --espacio-xxl:                10rem;

    /* --- Layout --- */
    --ancho-maximo:               1440px;
    --padding-contenedor:         2.5rem;
    --altura-cabecera:            80px;
    --altura-barra-app:           70px;
    --altura-barra-superior:      40px;

    /* --- Cabecera global (menú principal): configurable desde
       Configuración → Cabecera global. Si no se configura nada,
       se quedan estos valores de siempre. --- */
    --cabecera-color-fondo:       var(--color-blanco);
    --cabecera-color-texto:       var(--color-gris-oscuro);

    /* --- Transiciones --- */
    --transicion-base:            all 0.25s ease;
    --transicion-suave:           all 0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* --- Radios --- */
    --radio-sm:                   4px;
    --radio-md:                   8px;
    --radio-lg:                   16px;
    --radio-redondo:              9999px;

    /* --- Sombras --- */
    --sombra-suave:               0 2px 12px rgba(0, 0, 0, 0.07);
    --sombra-media:               0 8px 32px rgba(0, 0, 0, 0.12);
    --sombra-corporativa:         0 4px 20px rgba(0, 79, 113, 0.18);
    --sombra-barra-app:           0 -2px 16px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   SECCIÓN A — ESTILOS GLOBALES Y DESKTOP (desde 1100px)
   ============================================================ */

body {
    font-family:             var(--fuente-principal);
    font-size:               var(--tipo-base);
    color:                   var(--color-oscuro-principal);
    background-color:        var(--color-fondo-pagina);
    font-weight:             400;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height:             1.6;
    overflow-x:              hidden;
}

/* --- Contenedor reutilizable --- */
.contenedor {
    width:         100%;
    max-width:     var(--ancho-maximo);
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  var(--padding-contenedor);
    padding-right: var(--padding-contenedor);
}


/* -------------------------------------------------------
   CABECERA GLOBAL — Desktop
   ------------------------------------------------------- */

/* ============================================================
   BARRA SUPERIOR DE CONTACTO (ubicación / teléfono / WhatsApp)
   ============================================================ */
.barra-superior {
    position:         fixed;
    top:              0;
    left:             0;
    width:            100%;
    height:           var(--altura-barra-superior);
    z-index:          1001;
    background-color: var(--color-corporativo);
    color:            #FFFFFF;
    font-size:        var(--tipo-xs);
    display:          flex;
    align-items:      center;
}

.barra-superior__fila {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    gap:             1rem;
}

.barra-superior__izquierda,
.barra-superior__derecha {
    display:     flex;
    align-items: center;
    gap:         1.25rem;
    overflow-x:  auto;
    scrollbar-width: none;
}
.barra-superior__izquierda::-webkit-scrollbar,
.barra-superior__derecha::-webkit-scrollbar { display: none; }

.barra-superior__item {
    display:         flex;
    align-items:     center;
    gap:             0.4rem;
    color:           inherit;
    text-decoration: none;
    white-space:     nowrap;
    transition:      var(--transicion-base);
}

.barra-superior__item:hover {
    opacity: 0.8;
}

.barra-superior__icono {
    display: flex;
    flex-shrink: 0;
}

.barra-superior__icono svg {
    width:  14px;
    height: 14px;
    display: block;
}

/* Cuando existe la barra, la cabecera fija baja y el contenido
   compensa el hueco total (cabecera + barra) */
body.con-barra-superior #cabecera-global {
    top: var(--altura-barra-superior);
}
body.con-barra-superior #contenido-principal {
    padding-top: calc(var(--altura-cabecera) + var(--altura-barra-superior));
}

@media screen and (max-width: 768px) {
    :root {
        --altura-barra-superior: 34px;
    }
    .barra-superior {
        font-size: 0.65rem;
    }
    .barra-superior__izquierda,
    .barra-superior__derecha {
        gap: 0.75rem;
    }
}

#cabecera-global {
    position:         fixed;
    top:              0;
    left:             0;
    width:            100%;
    height:           var(--altura-cabecera);
    z-index:          1000;
    background-color: var(--cabecera-color-fondo);
    border-bottom:    1px solid var(--color-borde-claro);
    box-shadow:       var(--sombra-suave);
    transition:       var(--transicion-base);
}

.cabecera-contenedor {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
}

/* --- Logotipo --- */
.logotipo-enlace {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

/* Si el logo es más alto que la propia cabecera (un logo redondo
   pensado para sobresalir, por ejemplo), esta clase hace que el
   sobrante se desborde hacia abajo, no repartido mitad arriba/
   mitad abajo — la mitad de arriba quedaría cortada contra el
   borde superior de la pantalla, al ser la cabecera
   "position:fixed; top:0". Se activa solo si se marca la casilla
   correspondiente en Configuración → Marca — así los logos
   normales (que caben dentro de la cabecera) se quedan centrados
   como siempre, sin que este ajuste les afecte. */
body.logo-desbordar-abajo .logotipo-enlace {
    align-self: flex-start;
}

.logo-agencia {
    height:            var(--logo-alto-escritorio, 45px);
    width:             auto;
    display:           block;
    transition:        var(--transicion-base);
    object-fit:        contain;
}

.logotipo-enlace:hover .logo-agencia {
    opacity: 0.82;
}

/* --- Cabecera: fila normal (menú horizontal cuando cabe) --- */
.cabecera-contenedor {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
    gap:             1rem;
}

/* --- Menú de navegación — Desktop --- */
.menu-principal {
    display:          flex;
    align-items:      center;
    flex:             1;
    min-width:        0;
    overflow-x:       auto;
    scrollbar-width:  none;      /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge */
}

.menu-principal::-webkit-scrollbar {
    display: none;               /* Chrome/Safari/Edge nuevo */
}

.menu-lista {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             0.25rem;
    flex-wrap:       nowrap;
    flex:            1;
    min-width:       0;
}

.menu-item {
    display:     flex;
    flex-shrink: 0;
}

/* --- Botón hamburguesa (izquierda) y lupa (derecha): ocultos por
       defecto, aparecen cuando el menú horizontal no cabe o en móvil
       (ver menu-desbordado.js) — estilo JCARD --- */
.cabecera__hamburguesa,
.cabecera__buscar {
    display:     none;
    align-items: center;
    justify-content: center;
    background:  none;
    border:      none;
    cursor:      pointer;
    flex-shrink: 0;
    padding:     0.5rem;
    color:       var(--color-oscuro-principal, #1a1a1a);
}

.cabecera__hamburguesa {
    flex-direction: column;
    gap:            5px;
}

.cabecera__hamburguesa-barra {
    display:          block;
    width:            24px;
    height:           2px;
    background-color: var(--color-oscuro-principal, #1a1a1a);
    border-radius:    2px;
    transition:       var(--transicion-base);
}

.cabecera__buscar svg {
    width:  22px;
    height: 22px;
}

/* Cuando desborda: la cabecera pasa a grid de 3 columnas
   (hamburguesa | logo centrado | lupa), y el menú horizontal
   desaparece por completo (el hamburguesa lo sustituye) */
body.menu-desbordado .cabecera-contenedor {
    display:               grid;
    grid-template-columns: auto 1fr auto;
    align-items:           center;
}

body.menu-desbordado .cabecera__hamburguesa {
    display:     flex;
    grid-column: 1;
    justify-self: start;
}

body.menu-desbordado .logotipo-enlace {
    grid-column:  2;
    justify-self: center;
}

body.menu-desbordado .cabecera__buscar {
    display:      flex;
    grid-column:  3;
    justify-self: end;
}

/**
 * La ocultación de #menu-principal SOLO por encima de 768px — por
 * debajo de eso, otra regla de más abajo (la barra de aplicación
 * inferior, "--- MENÚ: se convierte en barra inferior de App ---")
 * ya se encarga de transformar este mismo elemento en la barra de
 * abajo, en vez de ocultarlo. Sin este límite, esta regla ganaba
 * siempre (por ir después en el archivo) y dejaba la barra de app
 * sin poder mostrarse nunca en su franja de ancho.
 */
@media screen and (min-width: 769px) {
    body.menu-desbordado #menu-principal {
        /**
         * NUNCA display:none aquí — un elemento con display:none no
         * tiene ancho medible (scrollWidth pasa a valer 0), así que la
         * siguiente comprobación de menu-desbordado.js creería que "ya
         * cabe" y lo volvería a mostrar, entrando en un parpadeo
         * mostrado/ocultado sin fin cada vez que se vuelve a comprobar
         * (cada 700ms, o al redimensionar) — confirmado de verdad con
         * una prueba automatizada: la clase alternaba True/False sin
         * parar. Con position:absolute + visibility:hidden, el menú
         * sale del flujo normal (no deja un hueco vacío donde estaba)
         * y no se ve ni se puede pulsar, pero conserva un ancho
         * calculable en todo momento para la siguiente comprobación.
         */
        position:      absolute;
        visibility:    hidden;
        pointer-events: none;
    }
}

/* Respaldo garantizado por CSS puro (sin depender de JS ni de
   temporizados) para pantallas medianas/tablet: por debajo de este
   ancho, SIEMPRE se muestra hamburguesa/logo-centro/lupa, nunca el
   menú horizontal. El JS solo se necesita por ENCIMA de este ancho,
   para el caso de "caben muchos enlaces pero no todos". */
@media screen and (max-width: 1160px) {
    .cabecera-contenedor {
        display:               grid !important;
        grid-template-columns: auto 1fr auto;
        align-items:           center;
    }
    .cabecera__hamburguesa {
        display:      flex !important;
        grid-column:  1;
        justify-self: start;
    }
    .logotipo-enlace {
        grid-column:  2;
        justify-self: center;
    }
    .cabecera__buscar {
        display:      flex !important;
        grid-column:  3;
        justify-self: end;
    }
}

/**
 * Ocultar el menú horizontal SOLO en la franja de tablet
 * (769-1160px) — por debajo de 768px, la barra de aplicación
 * inferior (más abajo en este archivo) se encarga de transformar
 * este mismo elemento, en vez de ocultarlo. Igual que con la regla
 * equivalente basada en JavaScript de más arriba: nunca
 * display:none, para no perder la capacidad de medir su ancho.
 */
@media screen and (max-width: 1160px) and (min-width: 769px) {
    #menu-principal {
        position:       absolute !important;
        visibility:     hidden !important;
        pointer-events: none !important;
    }
}

/* --- Panel de menú lateral (se abre desde la IZQUIERDA) --- */
.panel-menu-desbordado {
    position:          fixed;
    top:               0;
    left:              0;
    bottom:            0;
    width:             min(85vw, 360px);
    z-index:           2000;
    background-color:  var(--color-blanco);
    display:           flex;
    flex-direction:    column;
    transform:         translateX(-100%);
    visibility:        hidden;
    box-shadow:        var(--sombra-fuerte, 0 0 40px rgba(0,0,0,0.25));
    transition:        transform 0.3s ease, visibility 0.3s ease;
}

.panel-menu-desbordado.abierto {
    transform:  translateX(0);
    visibility: visible;
}

/* ============================================================
   PANEL DE BÚSQUEDA — a pantalla completa (no un cajón lateral
   como el menú, ya que aquí lo importante es tener sitio de
   sobra para escribir sin pelearse con el teclado en móvil)
   ============================================================ */
.panel-buscar {
    position:          fixed;
    inset:             0;
    z-index:           2001;
    background-color:  var(--color-blanco);
    display:           flex;
    flex-direction:    column;
    transform:         translateY(-100%);
    visibility:        hidden;
    transition:        transform 0.3s ease, visibility 0.3s ease;
}

.panel-buscar.abierto {
    transform:  translateY(0);
    visibility: visible;
}

.panel-buscar-velo {
    position:   fixed;
    inset:      0;
    z-index:    2000;
    background: rgba(0, 0, 0, 0.4);
    opacity:    0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.panel-buscar-velo.abierto {
    opacity:    1;
    visibility: visible;
}

.panel-buscar__cabecera {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          1.5rem;
    background-color: var(--color-corporativo);
    flex-shrink:      0;
}

.panel-buscar__logo {
    display: flex;
    flex:    1;
    justify-content: center;
}

.panel-buscar__logo img {
    height:     var(--logo-lateral-alto-escritorio, 34px);
    width:      auto;
    object-fit: contain;
}

.panel-buscar__cerrar {
    background:  none;
    border:      none;
    font-size:   1.5rem;
    line-height: 1;
    cursor:      pointer;
    color:       #FFFFFF;
    padding:     0.25rem;
    flex-shrink: 0;
}

.panel-buscar__form {
    display:        flex;
    align-items:    center;
    gap:            0.75rem;
    padding:        2.5rem 1.5rem;
    max-width:      640px;
    width:          100%;
    margin:         0 auto;
}

.panel-buscar__input {
    flex:           1;
    min-width:      0;
    font-size:      1.25rem;
    font-family:    inherit;
    color:          var(--color-oscuro-principal);
    border:         none;
    border-bottom:  2px solid var(--color-borde-claro);
    border-radius:  0;
    padding:        0.75rem 0.25rem;
    background:     transparent;
    transition:     var(--transicion-base);
}

.panel-buscar__input::placeholder {
    color: var(--color-gris-texto);
}

.panel-buscar__input:focus {
    outline:            none;
    border-bottom-color: var(--color-corporativo);
}

.panel-buscar__boton {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            48px;
    height:           48px;
    border-radius:    50%;
    background-color: var(--color-corporativo);
    color:            #ffffff;
    border:           none;
    cursor:           pointer;
    flex-shrink:      0;
    transition:       var(--transicion-base);
}

.panel-buscar__boton:hover {
    background-color: var(--color-corporativo-oscuro);
}

.panel-buscar__boton svg {
    width:  22px;
    height: 22px;
}

@media screen and (max-width: 480px) {
    .panel-buscar__form {
        padding: 1.5rem 1.25rem;
    }
    .panel-buscar__input {
        font-size: 1.0625rem;
    }
}

/* Velo oscuro detrás del panel */
.panel-menu-desbordado-velo {
    position:   fixed;
    inset:      0;
    z-index:    1999;
    background: rgba(0, 0, 0, 0.4);
    opacity:    0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.panel-menu-desbordado-velo.abierto {
    opacity:    1;
    visibility: visible;
}

.panel-menu-desbordado__cabecera {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          1.5rem;
    background-color: var(--color-corporativo);
    flex-shrink:      0;
}

/* Todo lo que va debajo de la cabecera (menú de enlaces + pie de
   contacto) comparte una única zona de scroll — así el pie nunca
   ocupa un hueco fijo compitiendo con el menú: solo aparece al
   llegar al final de verdad, y el menú se puede recorrer entero
   sin que nada le quite espacio de por medio. */
.panel-menu-desbordado__scroll {
    flex:       1;
    min-height: 0;
    overflow-y: auto;
}

.panel-menu-desbordado__logo {
    display: flex;
    flex: 1;
    justify-content: center;
}

.panel-menu-desbordado__logo img {
    height:     var(--logo-lateral-alto-escritorio, 34px);
    width:      auto;
    object-fit: contain;
}

.panel-menu-desbordado__titulo {
    font-weight:    700;
    font-size:      var(--tipo-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--color-gris-texto);
}

.panel-menu-desbordado__cerrar {
    background:  none;
    border:      none;
    font-size:   1.5rem;
    line-height: 1;
    cursor:      pointer;
    color:       #FFFFFF;
    padding:     0.25rem;
    flex-shrink: 0;
}

/* Pie del menú lateral móvil: dirección/teléfono/email + redes
   sociales, debajo de los enlaces (Menús → Menú Lateral) */
.panel-menu-desbordado__pie {
    padding:    1.5rem;
    border-top: 1px solid var(--color-borde-claro);
}

.panel-menu-contacto {
    display:        flex;
    flex-direction: column;
    gap:            0.9rem;
    margin-bottom:  1.25rem;
}

.panel-menu-contacto-linea {
    margin:      0;
    font-size:   var(--tipo-sm);
    color:       var(--color-gris-texto);
    text-align:  center;
}

.panel-menu-contacto-titulo {
    display:        block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size:      var(--tipo-xs);
    font-weight:    700;
    color:          var(--color-corporativo, #004F71);
    margin-bottom:  0.2rem;
}

/* Enlace o botón libre, dentro de la lista de elementos del pie
   del menú móvil (junto a las líneas de texto informativo) */
.panel-menu-enlace-libre {
    display:         block;
    text-align:      center;
    color:           var(--color-corporativo);
    font-size:       var(--tipo-sm);
    font-weight:     600;
    text-decoration: none;
}

.panel-menu-enlace-libre:hover {
    text-decoration: underline;
}

.panel-menu-boton {
    align-self: center;
}

.panel-menu-redes {
    display:         flex;
    justify-content: center;
    gap:             1rem;
    flex-wrap:       wrap;
}

.panel-menu-red-social {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border-radius:    50%;
    background-color: var(--color-gris-claro);
    color:            var(--color-oscuro-principal);
    text-decoration:  none;
    font-size:         var(--tipo-xs);
    transition:        var(--transicion-base);
}

.panel-menu-red-social img {
    width:      18px;
    height:     18px;
    object-fit: contain;
}

.panel-menu-red-social:hover {
    background-color: var(--color-corporativo-claro, #E0EEF4);
}

.panel-menu-desbordado__lista {
    list-style: none;
    margin:     0;
    padding:    0.5rem 1.5rem 0.5rem;
}

.panel-menu-item {
    border-bottom: 1px solid var(--color-borde-claro);
}

.panel-menu-item--nivel-0 { border-bottom: 1px solid var(--color-borde-claro); }
.panel-menu-item--nivel-1 { border-bottom: 1px solid var(--color-gris-claro); }
.panel-menu-item--nivel-2 { border-bottom: 1px solid var(--color-gris-claro); }

.panel-menu-fila {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.panel-menu-fila a {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
    flex:            1;
    min-width:       0;
    padding:         0.9rem 0;
    font-size:       1.05rem;
    font-weight:     600;
    color:           var(--color-oscuro-principal, #1a1a1a);
    text-decoration: none;
}

.panel-menu-item--nivel-1 .panel-menu-fila a,
.panel-menu-item--nivel-2 .panel-menu-fila a {
    font-size:   0.95rem;
    font-weight: 500;
    padding:     0.75rem 0;
}

.panel-menu-fila a:hover {
    color: var(--color-corporativo);
}

.panel-menu-fila img {
    width:      20px;
    height:     20px;
    object-fit: contain;
    flex-shrink: 0;
}

.panel-menu-toggle {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--color-gris-texto);
    padding:     0.5rem;
    display:     flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.panel-menu-toggle svg {
    width:      18px;
    height:     18px;
    transition: transform 0.25s ease;
}

.panel-menu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.panel-submenu {
    list-style: none;
    margin:     0;
    padding:    0 0 0.25rem 1.5rem;
}

.panel-submenu[hidden] {
    display: none;
}

@media screen and (max-width: 480px) {
    .panel-menu-desbordado { width: 100vw; }
}

.menu-enlace {
    display:         flex;
    align-items:     center;
    gap:             0.4rem;
    padding:         0.5rem 1rem;
    font-size:       var(--tipo-sm);
    font-weight:     500;
    letter-spacing:  0.04em;
    color:           var(--cabecera-color-texto);
    border-radius:   var(--radio-md);
    transition:      var(--transicion-base);
    position:        relative;
}

.menu-enlace::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             1rem;
    right:            1rem;
    height:           2px;
    background-color: var(--color-corporativo);
    border-radius:    var(--radio-redondo);
    transform:        scaleX(0);
    transition:       var(--transicion-base);
}

.menu-enlace:hover {
    color:            var(--color-corporativo);
    background-color: var(--color-corporativo-suave);
}

.menu-enlace:hover::after {
    transform: scaleX(1);
}

/* Iconos: ocultos en desktop (solo visibles en App) */
.menu-icono {
    display: none;
}


/* --- Compensación de cabecera fija --- */
#contenido-principal {
    padding-top: var(--altura-cabecera);
}


/* -------------------------------------------------------
   PIE DE PÁGINA — Desktop
   ------------------------------------------------------- */

#pie-global {
    background-color: var(--color-corporativo);
    color:            var(--color-texto-sobre-oscuro);
    border-top:       3px solid var(--color-corporativo-oscuro);
}

.pie-contenedor {
    padding-top:    var(--espacio-lg);
    padding-bottom: var(--espacio-lg);
}

/* --- Columnas: número variable, se reparten solas ---
   (No se puede mezclar una unidad "fr" con repeat(auto-fit, ...)
   en la misma lista de columnas: es sintaxis inválida y el
   navegador descarta la regla entera, cayendo en una sola
   columna. En su lugar, la columna de marca ocupa el doble de
   ancho con grid-column:span 2.) */
.pie-columnas,
.pie-contenedor {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:                   var(--espacio-lg);
    align-items:           start;
}

.pie-columna--marca {
    grid-column: span 2;
    min-width:   240px;
}

@media screen and (max-width: 640px) {
    .pie-columna--marca {
        grid-column: 1 / -1;
    }
}

/* --- Logo y redes sociales (columna de marca) --- */
.pie-logo-enlace {
    display: inline-block;
    margin-bottom: var(--espacio-sm);
}

.pie-logo {
    height:     var(--logo-pie-alto-escritorio, 36px);
    width:      auto;
    object-fit: contain;
    display:    block;
}

.pie-redes-sociales {
    display:     flex;
    gap:         0.75rem;
    margin-top:  var(--espacio-sm);
}

.pie-red-social {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border-radius:    50%;
    background-color: rgba(255, 255, 255, 0.12);
    transition:       var(--transicion-base);
}

.pie-red-social:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.pie-red-social img {
    width:  18px;
    height: 18px;
    object-fit: contain;
}

.pie-red-social-letra {
    font-size:   0.7rem;
    font-weight: 700;
    color:       var(--color-blanco);
    letter-spacing: 0.02em;
}

/* --- Títulos de columna --- */
.pie-titulo-columna {
    font-size:      var(--tipo-sm);
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--color-blanco);
    margin-bottom:  var(--espacio-sm);
    padding-bottom: 0.625rem;
    border-bottom:  1px solid var(--pie-color-linea-titulo, var(--color-borde-corporativo));
}

/* --- Columna marca --- */
.pie-descripcion {
    font-size:   var(--tipo-sm);
    color:       var(--pie-color-texto, var(--color-gris-texto));
    line-height: 1.75;
    margin-bottom: var(--espacio-sm);
}

.pie-contacto-rapido {
    display:        flex;
    flex-direction: column;
    gap:            0.375rem;
    font-style:     normal;
}

.pie-dato,
.pie-enlace-dato {
    display:     flex;
    align-items: flex-start;
    gap:         0.5rem;
    font-size:   var(--tipo-sm);
    color:       var(--pie-color-texto, var(--color-gris-texto));
    transition:  var(--transicion-base);
    line-height: 1.5;
}

.pie-dato .pie-enlace-icono {
    margin-top: 0.15em; /* centra visualmente el icono con la primera línea de texto, incluso si el texto ocupa varias líneas */
}

.pie-enlace-dato:hover {
    color: var(--pie-color-enlace-hover, var(--color-corporativo-medio));
}

/* --- Listas de enlaces del pie --- */
.pie-lista-enlaces {
    display:        flex;
    flex-direction: column;
    gap:            0.625rem;
}

.pie-enlace {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   var(--tipo-sm);
    color:       var(--pie-color-enlaces, var(--color-gris-texto));
    transition:  var(--transicion-base);
    line-height: 1;
}

.pie-enlace-icono {
    width:      16px;
    height:     16px;
    object-fit: contain;
    flex-shrink: 0;
}

.pie-enlace:hover {
    color:           var(--pie-color-enlace-hover, var(--color-corporativo-medio));
    padding-left:    0.375rem;
}

/* --- Premios y distinciones (fila de imágenes encima del copyright) --- */
.pie-premios {
    border-top:     1px solid var(--color-borde-oscuro);
    padding-top:    var(--espacio-sm);
    padding-bottom: var(--espacio-sm);
}

.pie-premios-fila {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    gap:             1.5rem;
}

.pie-premio-enlace {
    display: inline-flex;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.pie-premio-enlace:hover {
    opacity: 1;
}

.pie-premio-imagen {
    height:     var(--premio-alto-escritorio, 44px);
    width:      auto;
    max-width:  120px;
    object-fit: contain;
}

.pie-premios-texto {
    margin-top:     0.75rem;
    text-align:     center;
    font-size:      var(--tipo-xs);
    color:          var(--pie-color-texto, var(--color-gris-texto));
    opacity:        0.85;
}

/* --- Línea de copyright --- */
.pie-copyright {
    border-top:  1px solid var(--color-borde-oscuro);
    padding-top: var(--espacio-sm);
    padding-bottom: var(--espacio-sm);
}

.pie-copyright-texto {
    font-size: var(--tipo-xs);
    color:     var(--pie-color-texto, var(--color-gris-texto));
    text-align: center;
    letter-spacing: 0.04em;
}

.pie-credito-texto {
    font-size:      var(--tipo-xs);
    color:          var(--pie-color-texto, var(--color-gris-texto));
    opacity:        0.7;
    text-align:     center;
    letter-spacing: 0.04em;
    margin-top:     0.35rem;
}

.pie-credito-texto a {
    color:           inherit;
    text-decoration: none;
}

.pie-credito-texto a:hover {
    text-decoration: underline;
}

/* ============================================================
   PIE — DISEÑO CENTRADO (logo y texto arriba, columnas debajo,
   redes sociales centradas al final) — estilo alternativo
   ============================================================ */
.pie-contenedor-centrado {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding-top:    var(--espacio-lg);
    padding-bottom: var(--espacio-lg);
    gap:            var(--espacio-lg);
}

.pie-marca-centrada {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    max-width:      640px;
}

.pie-marca-centrada .pie-logo-enlace {
    margin-bottom: var(--espacio-sm);
}

.pie-descripcion-centrada {
    text-align: center;
}

.pie-columnas-centrado {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    justify-content:       center;
    gap:                   var(--espacio-lg);
    width:                 100%;
    text-align:            center;
}

.pie-columnas-centrado .pie-lista-enlaces {
    align-items: center;
}

.pie-columnas-centrado .pie-titulo-columna {
    border-bottom: 2px solid var(--pie-color-linea-titulo, var(--color-corporativo-medio, currentColor));
    display:       inline-block;
}

.pie-redes-centradas {
    justify-content: center;
    margin-top: 0;
}

@media screen and (max-width: 768px) {
    .pie-columnas-centrado {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        text-align: center;
    }

    /* En móvil, el diseño "estándar" del pie también se centra:
       columnas apiladas, texto centrado, igual que el "centrado" */
    .pie-contenedor {
        grid-template-columns: 1fr;
        text-align:            center;
        justify-items:         center;
    }

    .pie-columna--marca {
        grid-column: 1;
        min-width:   0;
    }

    .pie-lista-enlaces {
        align-items: center;
    }

    .pie-redes-sociales {
        justify-content: center;
    }
    .pie-columnas-centrado .pie-titulo-columna {
        border-bottom: none;
    }
}


/* ============================================================
   SECCIÓN B — MEDIA QUERY TABLET / INTERMEDIO
   Rango: (max-width: 1099px) and (min-width: 769px)
   ============================================================ */

@media screen and (max-width: 1099px) and (min-width: 769px) {

    :root {
        --padding-contenedor: 2rem;
        --altura-cabecera:    72px;
        --tipo-display:       5rem;
        --tipo-4xl:           3.75rem;
        --tipo-3xl:           2.75rem;
        --espacio-xl:         5rem;
        --espacio-lg:         3rem;
    }

    #contenido-principal {
        padding-top: var(--altura-cabecera);
    }

    /* Logo en tablet */
    .logo-agencia {
        height: var(--logo-alto-escritorio, 40px);
    }

    /* Menú más compacto en tablet */
    .menu-enlace {
        padding:        0.5rem 0.75rem;
        font-size:      var(--tipo-xs);
        letter-spacing: 0.02em;
    }

    .menu-enlace::after {
        left:  0.75rem;
        right: 0.75rem;
    }

    /* Columnas del pie: reducir gap */
    .pie-columnas {
        gap: var(--espacio-md);
    }
}


/* ============================================================
   SECCIÓN C — MEDIA QUERY MÓVIL GRANDE (formato App)
   Rango: (max-width: 768px) and (min-width: 481px)
   ============================================================ */

@media screen and (max-width: 768px) and (min-width: 481px) {

    :root {
        --padding-contenedor: 1.5rem;
        --altura-cabecera:    60px;
        --altura-barra-app:   68px;
    }

    #contenido-principal {
        padding-top:    var(--altura-cabecera);
        padding-bottom: var(--altura-barra-app);
    }

    /* El pie ahora se muestra siempre; reservamos el mismo hueco
       para que la barra de apps fija no lo tape */
    #pie-global {
        padding-bottom: var(--altura-barra-app);
    }

    /* --- CABECERA: solo logotipo centrado --- */
    .cabecera-contenedor {
        justify-content: center;
    }

    .logo-agencia {
        height: var(--logo-alto-escritorio, 35px);
    }

    /* --- MENÚ: se convierte en barra inferior de App --- */
    .menu-principal {
        position:         fixed;
        bottom:           0;
        left:             0;
        width:            100%;
        height:           var(--altura-barra-app);
        z-index:          999;
        background-color: var(--color-blanco);
        border-top:       1px solid var(--color-borde-claro);
        box-shadow:       var(--sombra-barra-app);
        padding-bottom:   env(safe-area-inset-bottom, 0px);
    }

    .menu-lista {
        display:         flex;
        align-items:     stretch;
        justify-content: space-around;
        gap:             0;
        height:          100%;
        width:           100%;
    }

    .menu-item {
        flex:    1;
        display: flex;
    }

    .menu-enlace {
        display:          flex;
        flex-direction:   column;
        align-items:      center;
        justify-content:  center;
        flex:             1;
        gap:              0.25rem;
        padding:          0.5rem 0.25rem 0.375rem;
        font-size:        0.625rem;
        font-weight:      600;
        letter-spacing:   0.06em;
        color:            var(--color-gris-texto);
        border-radius:    0;
        text-transform:   uppercase;
        background-color: transparent;
        transition:       var(--transicion-base);
    }

    .menu-enlace::after {
        display: none;
    }

    .menu-enlace:hover,
    .menu-enlace:active {
        color:            var(--color-corporativo);
        background-color: var(--color-corporativo-claro);
    }

    /* Iconos: visibles en App */
    .menu-icono {
        display:   block;
        font-size: 1.375rem;
        line-height: 1;
    }
}


/* ============================================================
   SECCIÓN D — MEDIA QUERY MÓVIL PEQUEÑO (App compacta)
   Rango: (max-width: 480px)
   ============================================================ */

@media screen and (max-width: 480px) {

    :root {
        --padding-contenedor: 1.25rem;
        --altura-cabecera:    56px;
        --altura-barra-app:   64px;
    }

    #contenido-principal {
        padding-top:    var(--altura-cabecera);
        padding-bottom: var(--altura-barra-app);
    }

    /* El pie ahora se muestra siempre; reservamos el mismo hueco
       para que la barra de apps fija no lo tape */
    #pie-global {
        padding-bottom: var(--altura-barra-app);
    }

    /* --- CABECERA --- */
    .cabecera-contenedor {
        justify-content: center;
    }

    .logo-agencia {
        height: var(--logo-alto-escritorio, 32px);
    }

    /* --- BARRA APP inferior --- */
    .menu-principal {
        position:         fixed;
        bottom:           0;
        left:             0;
        width:            100%;
        height:           var(--altura-barra-app);
        z-index:          999;
        background-color: var(--color-blanco);
        border-top:       1px solid var(--color-borde-claro);
        box-shadow:       var(--sombra-barra-app);
        padding-bottom:   env(safe-area-inset-bottom, 0px);
    }

    .menu-lista {
        display:         flex;
        align-items:     stretch;
        justify-content: space-around;
        gap:             0;
        height:          100%;
        width:           100%;
    }

    .menu-item {
        flex:    1;
        display: flex;
    }

    .menu-enlace {
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        flex:            1;
        gap:             0.2rem;
        padding:         0.375rem 0.125rem 0.25rem;
        font-size:       0.5625rem;
        font-weight:     600;
        letter-spacing:  0.05em;
        color:           var(--color-gris-texto);
        border-radius:   0;
        text-transform:  uppercase;
        transition:      var(--transicion-base);
    }

    .menu-enlace::after {
        display: none;
    }

    .menu-enlace:hover,
    .menu-enlace:active {
        color:            var(--color-corporativo);
        background-color: var(--color-corporativo-claro);
    }

    /* Iconos */
    .menu-icono {
        display:     block;
        font-size:   1.25rem;
        line-height: 1;
    }
}


/* ============================================================
   PUNTO 4 — HERO Y METODOLOGÍA
   ============================================================ */


/* -------------------------------------------------------
   HERO — Desktop (desde 1100px)
   ------------------------------------------------------- */

.hero-agencia {
    background-color:        rgba(0, 79, 113, 0.50);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter:         blur(8px);
    position:                relative;
    overflow:                hidden;
}

/* Vídeo de fondo real, detrás del velo y del contenido */
.hero-slide-video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    z-index:    0;
}

/* Velo personalizable sobre la imagen de fondo (color + transparencia
   elegidos por el usuario en el editor) */
.hero-slide-overlay {
    position:       absolute;
    inset:          0;
    z-index:        0;
    pointer-events: none;
}

.hero-slide .hero-contenedor {
    position: relative;
    z-index:  1;
}

/* --- Carrusel del hero (varias diapositivas) --- */
.hero-agencia-carrusel {
    position: relative;
}

.hero-agencia-carrusel:not(.hero-agencia-carrusel--unica) {
    min-height: 70vh;
    overflow:   hidden;
}

.hero-agencia-carrusel:not(.hero-agencia-carrusel--unica) .hero-slide {
    position:       absolute;
    inset:          0;
    display:        flex;
    align-items:    center;
    opacity:        0;
    visibility:     hidden;
    transition:     opacity 0.8s ease;
    pointer-events: none;
}

.hero-agencia-carrusel:not(.hero-agencia-carrusel--unica) .hero-slide.activo {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
}

.hero-agencia-carrusel:not(.hero-agencia-carrusel--unica) .hero-contenedor {
    padding-top:    0;
    padding-bottom: 0;
    width:          100%;
}

.hero-slide-flecha {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         2;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    border:          none;
    background:      rgba(255, 255, 255, 0.15);
    color:           #ffffff;
    font-size:       1.75rem;
    line-height:     1;
    cursor:          pointer;
    transition:      var(--transicion-base);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.hero-slide-flecha:hover {
    background: rgba(255, 255, 255, 0.3);
}

.hero-slide-flecha--prev { left:  1.5rem; }
.hero-slide-flecha--next { right: 1.5rem; }

.hero-slide-dots {
    position:        absolute;
    bottom:          1.5rem;
    left:            50%;
    transform:       translateX(-50%);
    z-index:         2;
    display:         flex;
    gap:             0.5rem;
}

.hero-slide-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    border:        none;
    background:    rgba(255, 255, 255, 0.4);
    cursor:        pointer;
    padding:       0;
    transition:    var(--transicion-base);
}

.hero-slide-dot.activo {
    background: #ffffff;
    transform:  scale(1.25);
}

@media screen and (max-width: 768px) {
    .hero-agencia-carrusel:not(.hero-agencia-carrusel--unica) {
        min-height: 60vh;
    }
    .hero-slide-flecha {
        width:     36px;
        height:    36px;
        font-size: 1.375rem;
    }
    .hero-slide-flecha--prev { left:  0.75rem; }
    .hero-slide-flecha--next { right: 0.75rem; }
}

.hero-agencia::before {
    content:        '';
    position:       absolute;
    top:            0;
    left:           0;
    width:          100%;
    height:         100%;
    background:     radial-gradient(
                        ellipse 70% 50% at 65% 40%,
                        rgba(255, 255, 255, 0.06) 0%,
                        transparent 70%
                    );
    pointer-events: none;
}

.hero-contenedor {
    position:       relative;
    z-index:        1;
    padding-top:    var(--espacio-xxl);
    padding-bottom: var(--espacio-xxl);
}

.hero-contenido {
    max-width: 820px;
}

.hero-pretitulo {
    font-size:      var(--tipo-xs);
    font-weight:    600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 0.85);
    margin-bottom:  var(--espacio-sm);
}

.hero-titular {
    font-size:      var(--tipo-display);
    font-weight:    700;
    line-height:    1.0;
    letter-spacing: -0.02em;
    color:          var(--color-blanco);
    margin-bottom:  var(--espacio-md);
}

.hero-descripcion {
    font-size:      var(--tipo-md);
    line-height:    1.75;
    color:          var(--color-gris-texto);
    max-width:      560px;
    margin-bottom:  var(--espacio-lg);
}

.hero-acciones {
    display:     flex;
    align-items: center;
    gap:         var(--espacio-sm);
    flex-wrap:   wrap;
}

/* --- Botones del Hero --- */
.boton-hero {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         1rem 2.25rem;
    font-size:       var(--tipo-sm);
    font-weight:     600;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    border-radius:   var(--radio-redondo);
    transition:      var(--transicion-suave);
    cursor:          pointer;
    white-space:     nowrap;
}

.boton-hero--principal {
    background-color: var(--color-corporativo);
    color:            var(--color-blanco);
    border:           2px solid var(--color-corporativo);
}

.boton-hero--principal:hover {
    background-color: var(--color-corporativo-oscuro);
    border-color:     var(--color-corporativo-oscuro);
    transform:        translateY(-2px);
    box-shadow:       var(--sombra-corporativa);
}

.boton-hero--secundario {
    background-color: transparent;
    color:            var(--color-crema);
    border:           2px solid var(--color-borde-oscuro);
}

.boton-hero--secundario:hover {
    border-color:     var(--color-corporativo-medio);
    color:            var(--color-blanco);
    transform:        translateY(-2px);
}

.boton-hero--fantasma {
    background-color: transparent;
    color:            var(--color-crema);
    border:           2px solid transparent;
    padding-left:     0.5rem;
    padding-right:    0.5rem;
}

.boton-hero--fantasma:hover {
    color:        var(--color-blanco);
    transform:    translateY(-2px);
}


/* -------------------------------------------------------
   METODOLOGÍA — Desktop (desde 1100px)
   ------------------------------------------------------- */

.metodologia-grid {
    /* Sin background-color propio: así el color que elijas en
       "Fondo del bloque" (aplicado en el envoltorio exterior) se ve
       en toda la sección, sin que este fondo por defecto lo tape
       justo en el centro. */
    padding-top:      var(--espacio-xl);
    padding-bottom:   var(--espacio-md);
}

.metodologia-cabecera {
    text-align:    center;
    margin-bottom: var(--espacio-lg);
    max-width:     640px;
    margin-left:   auto;
    margin-right:  auto;
}

.metodologia-pretitulo {
    font-size:      var(--tipo-xs);
    font-weight:    600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color:          var(--color-corporativo);
    margin-bottom:  0.75rem;
}

.metodologia-titulo {
    font-size:      var(--tipo-3xl);
    font-weight:    700;
    letter-spacing: -0.02em;
    color:          var(--color-oscuro-principal);
    line-height:    1.1;
    margin-bottom:  var(--espacio-sm);
}

.metodologia-descripcion {
    font-size:   var(--tipo-base);
    line-height: 1.75;
    color:       var(--color-gris-texto);
}

/* --- Rejilla 4 columnas --- */
.metodologia-rejilla {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.5rem;
}

.metodologia-rejilla--2col { grid-template-columns: repeat(2, 1fr); }
.metodologia-rejilla--3col { grid-template-columns: repeat(3, 1fr); }
.metodologia-rejilla--4col { grid-template-columns: repeat(4, 1fr); }
.metodologia-rejilla--6col { grid-template-columns: repeat(6, 1fr); }

/* Estilo "simple": icono + título + texto, sin tarjeta (fondo/borde) */
.metodologia-rejilla--simple {
    margin-top: var(--espacio-md);
}
.tarjeta-paso--simple .tarjeta-numero {
    display: none;
}

@media screen and (max-width: 1099px) {
    .metodologia-rejilla--3col,
    .metodologia-rejilla--4col,
    .metodologia-rejilla--6col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 640px) {
    .metodologia-rejilla--2col,
    .metodologia-rejilla--3col,
    .metodologia-rejilla--4col,
    .metodologia-rejilla--6col {
        grid-template-columns: 1fr;
    }
}

.metodologia-rejilla > * {
    min-width: 0;
}

/* --- Tarjeta de paso --- */
.tarjeta-paso {
    background-color: var(--color-blanco);
    border-radius:    var(--radio-lg);
    overflow:         hidden;
    border:           1px solid var(--color-borde-claro);
    transition:       var(--transicion-suave);
    cursor:           default;
}

.tarjeta-paso:hover {
    transform:  translateY(-6px);
    box-shadow: var(--sombra-media);
    border-color: var(--color-borde-corporativo);
}

/* Estilo "simple": sin tarjeta (fondo/borde). Tiene que ir DESPUÉS
   de la definición base de arriba — con la misma especificidad
   (una sola clase cada una), en un empate gana la regla que
   aparece más tarde en el archivo. */
.tarjeta-paso--simple {
    background:  transparent;
    border:      none;
    text-align:  center;
}
.tarjeta-paso--simple:hover {
    transform: none;
    box-shadow: none;
}

.tarjeta-paso-imagen-contenedor {
    overflow:   hidden;
    aspect-ratio: 3 / 2;
    max-height: 260px; /* evita que se dispare en pantallas/columnas muy anchas */
}

/* Cuando el contenido es un icono o un número (no una foto), se
   muestra como una insignia circular con aire alrededor, no como
   una caja rectangular pegada al borde de la tarjeta. */
.tarjeta-paso-imagen-contenedor:has(.imagen-paso--icono),
.tarjeta-paso-imagen-contenedor:has(.imagen-paso--numero) {
    aspect-ratio:  1;
    max-width:     90px;
    max-height:    90px;
    margin:        var(--espacio-md) auto 0;
    overflow:      visible;
}
.imagen-paso--icono,
.imagen-paso--numero {
    border-radius: 50%;
    width:  100%;
    height: 100%;
}

.imagen-paso {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tarjeta-paso:hover .imagen-paso {
    transform: scale(1.06);
}

/* Cuando el paso no tiene imagen: número grande sobre color de fondo */
.imagen-paso--numero {
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #ffffff;
    font-size:       1.75rem;
    font-weight:     700;
    letter-spacing:  -0.02em;
}

.imagen-paso--icono {
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.tarjeta-paso-icono-img {
    width:  45%;
    height: 45%;
    object-fit: contain;
}

.tarjeta-paso-boton-wrap {
    margin-top: 1rem;
}

@media screen and (max-width: 768px) {
    .imagen-paso--numero {
        font-size: 3rem;
    }
}

.tarjeta-paso-contenido {
    padding: 1.25rem;
}

.tarjeta-numero {
    display:        block;
    font-size:      var(--tipo-xs);
    font-weight:    700;
    letter-spacing: 0.16em;
    color:          var(--color-corporativo);
    margin-bottom:  0.5rem;
}

.tarjeta-titulo {
    font-size:      var(--tipo-sm);
    font-weight:    700;
    letter-spacing: 0.10em;
    color:          var(--color-oscuro-principal);
    margin-bottom:  0.625rem;
    line-height:    1.2;
}

.tarjeta-descripcion {
    font-size:   var(--tipo-sm);
    line-height: 1.65;
    color:       var(--color-gris-texto);
}

/* ============================================================
   BLOQUE "RESULTADOS CON CIFRAS" — título+subtítulo a un lado,
   cifras destacadas en rejilla al otro, párrafos en columnas debajo.
   ============================================================ */
.resultados-cifras {
    padding: var(--espacio-lg) 0;
}

.resultados-cifras-superior {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    gap:             2.5rem 3rem;
    justify-content: space-between;
    margin-bottom:   2.5rem;
}

.resultados-cifras-texto {
    flex:      1 1 300px;
    max-width: 420px;
}

.resultados-cifras-titulo {
    font-size:   var(--tipo-2xl);
    font-weight: 700;
    line-height: 1.25;
    color:       var(--color-oscuro-principal);
    margin:      0 0 0.75rem;
}

.resultados-cifras-subtitulo {
    font-size: var(--tipo-base);
    color:     var(--color-gris-texto);
    margin:    0;
}

.resultados-cifras-grid {
    display:               grid;
    grid-template-columns: repeat(2, auto);
    column-gap:            3.5rem;
    row-gap:               2rem;
    flex:                  2 1 400px;
}

.resultados-cifras-item {
    display: flex;
    flex-direction: column;
}

.resultados-cifras-valor {
    font-size:   var(--tipo-3xl);
    font-weight: 800;
    line-height: 1.1;
}

.resultados-cifras-etiqueta {
    font-size:   var(--tipo-sm);
    font-weight: 600;
    color:       var(--color-oscuro-principal);
    margin-top:  0.25rem;
}

.resultados-cifras-explicacion {
    font-size:   var(--tipo-xs);
    line-height: 1.5;
    color:       var(--color-gris-texto);
    margin-top:  0.35rem;
    max-width:   240px;
}

.resultados-cifras-parrafos {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:                   2rem;
}

.resultados-cifras-parrafos p {
    font-size:   var(--tipo-base);
    line-height: 1.7;
    color:       var(--color-gris-texto);
    margin:      0;
}

@media screen and (max-width: 768px) {
    .resultados-cifras-superior {
        flex-direction: column;
        gap:            2rem;
    }

    /* En escritorio (fila) el "300px"/"400px" de flex-basis fija el
       ANCHO de cada columna — correcto ahí. Al pasar a columna en
       móvil, ese mismo flex-basis pasa a leerse como ALTO mínimo
       (el eje principal del flex ahora es vertical), dejando un
       hueco en blanco tan alto como ese valor antes del siguiente
       bloque. Con flex-basis:auto cada uno mide solo lo que ocupa
       su contenido real, en los dos ejes. */
    .resultados-cifras-texto,
    .resultados-cifras-grid {
        flex-basis: auto;
        max-width:  none;
    }

    .resultados-cifras-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap:            1.5rem;
    }

    .resultados-cifras-valor {
        font-size: var(--tipo-2xl);
    }

    .resultados-cifras-parrafos {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   BLOQUE "PREGUNTAS FRECUENTES" — lista desplegable (details/summary)
   ============================================================ */
.faq-bloque {
    padding: var(--espacio-lg) 0;
}

.faq-cabecera {
    margin:        0 0 2rem;
}

.faq-cabecera--centro {
    text-align: center;
}

.faq-cabecera--derecha {
    text-align: right;
}

.faq-titulo {
    font-size:   var(--tipo-2xl);
    font-weight: 700;
    line-height: 1.2;
    color:       var(--color-oscuro-principal);
    margin:      0 0 0.75rem;
}

.faq-descripcion {
    font-size: var(--tipo-base);
    color:     var(--color-gris-texto);
    margin:    0;
}

.faq-lista {
    margin:    0;
    border-top: 1px solid var(--color-borde-claro);
}

.faq-item {
    border-bottom: 1px solid var(--color-borde-claro);
}

.faq-pregunta {
    position:    relative;
    display:     block;
    cursor:      pointer;
    list-style:  none;
    padding:     1.1rem 2.5rem 1.1rem 0;
    font-size:   var(--tipo-base);
    font-weight: 600;
    line-height: 1.4;
    color:       var(--color-oscuro-principal);
}

.faq-pregunta::-webkit-details-marker {
    display: none;
}

.faq-pregunta::after {
    content:     '+';
    position:    absolute;
    right:       0.25rem;
    top:         50%;
    transform:   translateY(-50%);
    font-size:   1.5rem;
    font-weight: 400;
    line-height: 1;
}

.faq-item[open] > .faq-pregunta::after {
    content: '\2212';
}

.faq-pregunta:focus-visible {
    outline:        2px solid var(--color-oscuro-principal);
    outline-offset: 2px;
}

.faq-respuesta {
    padding:     0 2.5rem 1.25rem 0;
    line-height: 1.7;
    color:       var(--color-gris-texto);
}

.faq-respuesta p {
    margin: 0 0 0.75rem;
}

.faq-respuesta p:last-child {
    margin-bottom: 0;
}


/* Un fragmento de código largo e imposible de partir (una URL, un @id) dentro de
   un texto de ayuda no debe desbordar la página en pantallas estrechas. */
.panel-campo-ayuda code {
    overflow-wrap: anywhere;
}

/* ============================================================
   AYUDA → VERSIÓN: historial de cambios por versión
   ============================================================ */
.version-titulo-historial {
    font-size: 1.1rem;
    margin:    2rem 0 0.75rem;
}

.version-entrada-cabecera {
    display:     flex;
    flex-wrap:   wrap;
    align-items: baseline;
    gap:         0.5rem 0.9rem;
    margin-bottom: 0.5rem;
}

.version-entrada-titulo {
    font-size:   1.15rem;
    font-weight: 700;
    margin:      0;
    color:       var(--color-oscuro-principal);
}

.version-fecha {
    font-size: var(--tipo-sm);
    color:     var(--color-gris-texto);
}

.version-instalada {
    padding:        0.1rem 0.55rem;
    border-radius:  999px;
    background:     rgba(16, 185, 129, 0.15);
    color:          #047857;
    font-size:      var(--tipo-xs);
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.version-resumen {
    margin:      0.25rem 0 1rem;
    color:       var(--color-gris-texto);
    line-height: 1.6;
}

.version-grupo {
    margin:         1.25rem 0 0.4rem;
    font-size:      var(--tipo-xs);
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.version-grupo--nuevo      { color: #0f766e; }
.version-grupo--mejora     { color: #1d4ed8; }
.version-grupo--correccion { color: #b45309; }

.version-cambios {
    margin:       0;
    padding-left: 1.15rem;
    list-style:   disc;   /* el reseteo global de listas quita las viñetas */
}

.version-cambios li {
    margin-bottom: 0.45rem;
    line-height:   1.55;
}

.version-antigua > summary {
    display:     flex;
    flex-wrap:   wrap;
    align-items: baseline;
    gap:         0.5rem 0.9rem;
    cursor:      pointer;
    list-style:  none;
}

.version-antigua > summary::-webkit-details-marker {
    display: none;
}

.version-antigua > summary::before {
    content: '▸';
}

.version-antigua[open] > summary::before {
    content: '▾';
}

/* Logo e imagen principal de Datos de empresa: botones de elegir/quitar y vista previa */
.empresa-campo-acciones {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.5rem;
    margin-top: 0.5rem;
}

.empresa-campo-preview {
    display:       block;
    max-width:     220px;
    max-height:    72px;
    margin-top:    0.75rem;
    padding:       0.5rem;
    background:    var(--color-gris-claro);
    border:        1px solid var(--color-borde-claro);
    border-radius: 6px;
    object-fit:    contain;
}

/* ============================================================
   TABLA DE HORARIO (Posicionamiento → Datos de empresa)
   Compacta y alineada por la izquierda: encabezados y contenido
   comparten el mismo borde, y las horas no se estiran.
   ============================================================ */
.tabla-horario-wrap {
    max-width:  100%;
    overflow-x: auto;
}

.tabla-horario {
    width:           auto;
    border-collapse: collapse;
    margin-top:      0.5rem;
}

.tabla-horario th,
.tabla-horario td {
    text-align:     left;
    vertical-align: middle;
    padding:        0.4rem 2rem 0.4rem 0;
}

.tabla-horario thead th {
    padding-top:    0;
    padding-bottom: 0.5rem;
    font-size:      var(--tipo-xs);
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--color-gris-texto);
    white-space:    nowrap;
}

.tabla-horario tbody tr {
    border-top: 1px solid var(--color-borde-claro);
}

.tabla-horario__dia {
    min-width:   7rem;
    font-weight: 600;
}

.tabla-horario input[type="checkbox"] {
    width:  1.15rem;
    height: 1.15rem;
    margin: 0;
}

.tabla-horario__franja {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    white-space: nowrap;
}

.tabla-horario input[type="time"] {
    width:     7.5rem;
    min-width: 0;
    padding:   0.4rem 0.6rem;
    font-size: var(--tipo-sm);
}

.tabla-horario__fila--cerrada .tabla-horario__franja {
    opacity: 0.4;
}

/* Pantallas estrechas: cada día pasa a ser una tarjeta (sin desplazamiento
   horizontal). Día y «Cerrado» arriba; cada franja con su etiqueta encima. */
@media screen and (max-width: 640px) {
    .tabla-horario,
    .tabla-horario tbody {
        display: block;
        width:   100%;
    }

    .tabla-horario thead {
        position: absolute;           /* oculta a la vista, no a los lectores de pantalla */
        width:    1px;
        height:   1px;
        overflow: hidden;
        clip:     rect(0 0 0 0);
    }

    .tabla-horario tbody tr {
        display:               grid;
        grid-template-columns: 1fr auto;
        align-items:           center;
        padding:               0.6rem 0;
    }

    .tabla-horario th,
    .tabla-horario td {
        padding: 0.25rem 0;
    }

    .tabla-horario td[data-label="Cerrado"] {
        display:        flex;
        flex-direction: row-reverse;
        align-items:    center;
        gap:            0.5rem;
    }

    .tabla-horario td[data-label="Cerrado"]::before {
        content:   attr(data-label);
        font-size: var(--tipo-sm);
    }

    .tabla-horario td[data-label^="Franja"] {
        grid-column: 1 / -1;
    }

    .tabla-horario td[data-label^="Franja"]::before {
        content:        attr(data-label);
        display:        block;
        margin-bottom:  0.2rem;
        font-size:      var(--tipo-xs);
        font-weight:    700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color:          var(--color-gris-texto);
    }
}


/* ============================================================
   PUNTO 4 — TABLET (max-width: 1099px) and (min-width: 769px)
   ============================================================ */

@media screen and (max-width: 1099px) and (min-width: 769px) {

    /* Hero */
    .hero-contenedor {
        padding-top:    var(--espacio-xl);
        padding-bottom: var(--espacio-xl);
    }

    .hero-titular {
        font-size: var(--tipo-4xl);
    }

    .hero-descripcion {
        font-size: var(--tipo-base);
    }

    /* Metodología: 4 → 2 columnas */
    .metodologia-rejilla {
        display:               grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap:                   1.25rem;
    }

    .metodologia-titulo {
        font-size: var(--tipo-2xl);
    }
}


/* ============================================================
   PUNTO 4 — MÓVIL GRANDE (max-width: 768px) and (min-width: 481px)
   ============================================================ */

@media screen and (max-width: 768px) and (min-width: 481px) {

    /* Hero compacto */
    .hero-contenedor {
        padding-top:    var(--espacio-lg);
        padding-bottom: var(--espacio-lg);
    }

    .hero-pretitulo {
        font-size: 0.625rem;
    }

    .hero-titular {
        font-size:     var(--tipo-3xl);
        margin-bottom: var(--espacio-sm);
    }

    .hero-descripcion {
        font-size:     var(--tipo-sm);
        margin-bottom: var(--espacio-md);
    }

    .boton-hero {
        padding:   0.875rem 1.75rem;
        font-size: var(--tipo-xs);
        width:     100%;
        max-width: 320px;
    }

    .hero-acciones {
        flex-direction: column;
        align-items:    flex-start;
    }

    /* Metodología — carrusel horizontal App */
    .metodologia-grid {
        padding-top:    var(--espacio-lg);
        padding-bottom: var(--espacio-lg);
    }

    .metodologia-rejilla {
        display:                grid;
        grid-template-columns:  unset;
        display:                flex;
        flex-direction:         row;
        flex-wrap:              nowrap;
        gap:                    1rem;
        overflow-x:             auto;
        scroll-snap-type:       x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-left:           var(--padding-contenedor);
        padding-right:          var(--padding-contenedor);
        padding-bottom:         1rem;
        margin-left:            calc(-1 * var(--padding-contenedor));
        margin-right:           calc(-1 * var(--padding-contenedor));
        scrollbar-width:        none;
    }

    .metodologia-rejilla::-webkit-scrollbar {
        display: none;
    }

    .tarjeta-paso {
        flex:              0 0 78%;
        scroll-snap-align: start;
    }

    .tarjeta-paso:hover {
        transform:  none;
        box-shadow: none;
    }

    .metodologia-titulo {
        font-size: var(--tipo-xl);
    }

    .metodologia-descripcion {
        font-size: var(--tipo-sm);
    }
}


/* ============================================================
   PUNTO 4 — MÓVIL PEQUEÑO (max-width: 480px)
   ============================================================ */

@media screen and (max-width: 480px) {

    /* Hero muy compacto */
    .hero-contenedor {
        padding-top:    var(--espacio-md);
        padding-bottom: var(--espacio-md);
    }

    .hero-pretitulo {
        font-size:     0.625rem;
        margin-bottom: 0.625rem;
    }

    .hero-titular {
        font-size:     var(--tipo-2xl);
        margin-bottom: var(--espacio-sm);
        letter-spacing: -0.01em;
    }

    .hero-descripcion {
        font-size:     var(--tipo-sm);
        line-height:   1.65;
        margin-bottom: var(--espacio-sm);
    }

    .boton-hero {
        padding:   1rem 1.5rem;
        font-size: var(--tipo-xs);
        width:     100%;
        max-width: 100%;
    }

    .hero-acciones {
        flex-direction: column;
        align-items:    stretch;
    }

    /* Metodología — carrusel horizontal App compacto */
    .metodologia-grid {
        padding-top:    var(--espacio-md);
        padding-bottom: var(--espacio-md);
    }

    .metodologia-rejilla {
        display:                flex;
        flex-direction:         row;
        flex-wrap:              nowrap;
        gap:                    0.875rem;
        overflow-x:             auto;
        scroll-snap-type:       x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-left:           var(--padding-contenedor);
        padding-right:          var(--padding-contenedor);
        padding-bottom:         1rem;
        margin-left:            calc(-1 * var(--padding-contenedor));
        margin-right:           calc(-1 * var(--padding-contenedor));
        scrollbar-width:        none;
    }

    .metodologia-rejilla::-webkit-scrollbar {
        display: none;
    }

    .tarjeta-paso {
        flex:              0 0 82%;
        scroll-snap-align: start;
    }

    .tarjeta-paso:hover {
        transform:  none;
        box-shadow: none;
    }

    .metodologia-titulo {
        font-size: var(--tipo-lg);
    }

    .metodologia-cabecera {
        margin-bottom: var(--espacio-md);
    }
}
/* ============================================================
   PUNTO 5 — TABLET (max-width: 1099px) and (min-width: 769px)
   ============================================================ */

@media screen and (max-width: 1099px) and (min-width: 769px) {

    /* Layout vertical: info arriba, formulario abajo */
    .contacto-contenedor {
        grid-template-columns: 1fr;
        gap:                   var(--espacio-md);
    }

    .contacto-titular {
        font-size: var(--tipo-2xl);
    }

    .contacto-formulario-contenedor {
        padding: 2rem;
    }

    .campo-grupo--mitad {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================
   PUNTO 5 — MÓVIL GRANDE (max-width: 768px) and (min-width: 481px)
   ============================================================ */

@media screen and (max-width: 768px) and (min-width: 481px) {

    .contacto-agencia {
        padding-top:    var(--espacio-lg);
        padding-bottom: calc(var(--altura-barra-app) + var(--espacio-lg));
    }

    /* Layout vertical */
    .contacto-contenedor {
        grid-template-columns: 1fr;
        gap:                   var(--espacio-md);
    }

    .contacto-titular {
        font-size: var(--tipo-xl);
    }

    .contacto-descripcion {
        font-size: var(--tipo-sm);
    }

    /* Formulario estética App */
    .contacto-formulario-contenedor {
        background-color: transparent;
        border:           none;
        padding:          0;
    }

    /* Una sola columna en móvil */
    .campo-grupo--mitad {
        grid-template-columns: 1fr;
        gap:                   1.125rem;
    }

    /* Inputs más grandes para dedos */
    .campo-input,
    .campo-textarea {
        padding:          1.125rem 1.25rem;
        font-size:        1rem;
        border-radius:    var(--radio-lg);
        background-color: rgba(255, 255, 255, 0.07);
        border-color:     rgba(255, 255, 255, 0.14);
    }

    .campo-textarea {
        min-height: 160px;
    }

    /* Botón ancho completo estilo App */
    .boton-enviar {
        width:         100%;
        padding:       1.25rem;
        font-size:     var(--tipo-base);
        border-radius: var(--radio-xl);
        align-self:    stretch;
    }
}


/* ============================================================
   PUNTO 5 — MÓVIL PEQUEÑO (max-width: 480px)
   ============================================================ */

@media screen and (max-width: 480px) {

    .contacto-agencia {
        padding-top:    var(--espacio-md);
        padding-bottom: calc(var(--altura-barra-app) + var(--espacio-md));
    }

    .contacto-contenedor {
        grid-template-columns: 1fr;
        gap:                   var(--espacio-sm);
    }

    .contacto-titular {
        font-size: var(--tipo-xl);
    }

    .contacto-descripcion {
        font-size:     var(--tipo-sm);
        margin-bottom: var(--espacio-sm);
    }

    .contacto-datos {
        gap: 0.875rem;
    }

    /* Formulario sin contenedor visual */
    .contacto-formulario-contenedor {
        background-color: transparent;
        border:           none;
        padding:          0;
    }

    .campo-grupo--mitad {
        grid-template-columns: 1fr;
        gap:                   1rem;
    }

    /* Inputs grandes para App compacta */
    .campo-input,
    .campo-textarea {
        padding:          1.25rem 1.125rem;
        font-size:        1rem;
        border-radius:    var(--radio-lg);
        background-color: rgba(255, 255, 255, 0.07);
        border-color:     rgba(255, 255, 255, 0.14);
    }

    .campo-textarea {
        min-height: 150px;
        resize:     none;
    }

    /* Botón 100% ancho, bien separado de la barra inferior */
    .boton-enviar {
        width:         100%;
        padding:       1.375rem;
        font-size:     var(--tipo-base);
        border-radius: var(--radio-xl);
        align-self:    stretch;
        letter-spacing: 0.06em;
    }

    .formulario-aviso-legal {
        text-align: center;
    }
}


/* ============================================================
   PUNTO 5 — SECCIÓN CONTACTO
   Fondo translúcido: rgba(0, 79, 113, 0.5)
   ============================================================ */


/* -------------------------------------------------------
   CONTACTO — Desktop (desde 1100px)
   ------------------------------------------------------- */

.contacto-agencia {
    /* Sin background-color propio, por el mismo motivo que en
       Metodología: no debe tapar el color de "Fondo del bloque". */
    padding-top:      var(--espacio-xl);
    padding-bottom:   var(--espacio-xl);
}

.contacto-contenedor {
    display:               grid;
    grid-template-columns: 2fr 3fr;
    gap:                   var(--espacio-lg);
    align-items:           start;
}

/* Evita que el contenido interno (inputs, textos largos) fuerce
   a las columnas a expandirse más allá de su ancho asignado */
.contacto-contenedor > * {
    min-width: 0;
}

/* --- Bloque informativo izquierda --- */
.contacto-pretitulo {
    font-size:      var(--tipo-xs);
    font-weight:    600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color:          var(--color-corporativo);
    margin-bottom:  0.875rem;
}

.contacto-titular {
    font-size:      var(--tipo-3xl);
    font-weight:    700;
    letter-spacing: -0.02em;
    line-height:    1.05;
    color:          var(--color-oscuro-principal);
    margin-bottom:  var(--espacio-sm);
}

.contacto-descripcion {
    font-size:      var(--tipo-base);
    line-height:    1.80;
    color:          var(--color-gris-texto);
    margin-bottom:  var(--espacio-md);
}

.contacto-datos {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

.contacto-dato-item {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}

.contacto-dato-etiqueta {
    font-size:      var(--tipo-xs);
    font-weight:    600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--color-corporativo);
}

.contacto-dato-valor {
    font-size:   var(--tipo-base);
    color:       var(--color-gris-oscuro);
    transition:  var(--transicion-base);
    line-height: 1.2;
}

a.contacto-dato-valor:hover {
    color: var(--color-corporativo);
}

/* --- Caja formulario con fondo translúcido corporativo --- */
.contacto-formulario-contenedor {
    background-color: rgba(0, 79, 113, 0.50);
    border-radius:    var(--radio-lg);
    padding:          2.5rem;
}

/* --- Estructura interna del formulario --- */
.formulario-estuma {
    display:        flex;
    flex-direction: column;
    gap:            1.375rem;
}

.campo-grupo--mitad {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1.25rem;
}

.campo-grupo--mitad > * {
    min-width: 0;
}

.campo-fila {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.campo-etiqueta {
    font-size:      var(--tipo-xs);
    font-weight:    600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          #374151;
}

/* La sección de contacto de la portada tiene fondo oscuro — ahí
   sí hace falta el texto en blanco. En cualquier otro sitio donde
   aparezca el formulario (como el bloque "Llamada a la acción +
   formulario", que puede colocarse en cualquier página, con fondo
   claro u oscuro según el caso), el gris oscuro de arriba es la
   opción segura por defecto — quien quiera texto claro puede
   configurar su propio "Color de las etiquetas" en el bloque. */
.contacto-agencia .campo-etiqueta {
    color: var(--color-blanco);
}

.campo-opcional {
    font-weight:    400;
    text-transform: none;
    letter-spacing: 0;
    color:          rgba(255, 255, 255, 0.60);
    font-size:      var(--tipo-xs);
}

/* --- Inputs y textarea: minimalistas sobre fondo translúcido --- */
.campo-input,
.campo-textarea {
    width:            100%;
    background-color: rgba(255, 255, 255, 0.90);
    border:           2px solid transparent;
    border-radius:    6px;
    padding:          0.875rem 1.125rem;
    font-size:        var(--tipo-base);
    color:            var(--color-oscuro-principal);
    transition:       var(--transicion-base);
    line-height:      1.5;
}

.campo-input::placeholder,
.campo-textarea::placeholder {
    color: var(--color-gris-texto);
}

.campo-input:hover,
.campo-textarea:hover {
    background-color: var(--color-blanco);
    border-color:     rgba(0, 79, 113, 0.30);
}

.campo-input:focus,
.campo-textarea:focus {
    background-color: var(--color-blanco);
    border-color:     var(--color-corporativo);
    box-shadow:       0 0 0 3px rgba(0, 79, 113, 0.20);
    outline:          none;
}

/* .campo-etiqueta / .campo-input están pensados por defecto para
   fondos oscuros o de color (texto blanco, caja semitransparente).
   Dentro de un modal con fondo blanco eso los deja invisibles
   (texto blanco sobre blanco, borde transparente sobre blanco).
   Esta regla lo corrige para cualquier modal marcado con la
   clase .modal-fondo-blanco. */
.modal-fondo-blanco .campo-etiqueta {
    color: var(--color-oscuro-principal);
}
.modal-fondo-blanco .campo-opcional {
    color: var(--color-gris-texto);
}
.modal-fondo-blanco .campo-input,
.modal-fondo-blanco .campo-textarea {
    background-color: var(--color-gris-claro);
    border: 2px solid var(--color-borde-claro);
}
.modal-fondo-blanco .campo-input:hover,
.modal-fondo-blanco .campo-textarea:hover {
    background-color: var(--color-blanco);
}

/* Mismo motivo que .modal-fondo-blanco de arriba, pero para el
   formulario del bloque público "Llamada a la acción + formulario":
   .campo-input/.campo-textarea están pensados para fondos oscuros
   (caja semitransparente casi blanca, borde transparente hasta el
   hover) — sobre una página de fondo blanco (el caso normal para
   este bloque) los campos quedan invisibles. A diferencia del
   modal, aquí no hay una clase que active/desactive el modo según
   el color de fondo de cada página, así que se aplica siempre: un
   campo con borde visible se ve bien tanto en fondo blanco como en
   uno de color, al revés de lo que pasaba antes. */
.proyecto-cta-formulario-wrap .campo-input,
.proyecto-cta-formulario-wrap .campo-textarea {
    background-color: var(--color-gris-claro);
    border:           2px solid var(--color-borde-claro);
}
.proyecto-cta-formulario-wrap .campo-input:hover,
.proyecto-cta-formulario-wrap .campo-textarea:hover {
    background-color: var(--color-blanco);
}

.campo-textarea {
    resize:     vertical;
    min-height: 140px;
}

/* --- Fila de envío --- */
.campo-fila--envio {
    gap: 1rem;
}

/* ------------------------------------------------------------
   OVERRIDE: campos dentro del panel de administración
   (.panel-contenido tiene fondo blanco/claro, no el fondo oscuro
   para el que se diseñaron .campo-etiqueta / .campo-input originales)
   ------------------------------------------------------------ */
.panel-contenido .campo-etiqueta {
    color: var(--color-oscuro-principal);
}

.panel-contenido .campo-opcional {
    color: var(--color-gris-texto);
}

.panel-contenido .campo-input,
.panel-contenido .campo-textarea {
    background-color: var(--color-gris-claro);
    border:            1px solid var(--color-borde-claro);
}

.panel-contenido .campo-input:hover,
.panel-contenido .campo-textarea:hover {
    background-color: var(--color-blanco);
    border-color:      rgba(0, 79, 113, 0.35);
}

.panel-contenido .campo-input:focus,
.panel-contenido .campo-textarea:focus {
    background-color: var(--color-blanco);
    border-color:      var(--color-corporativo);
    box-shadow:        0 0 0 3px rgba(0, 79, 113, 0.15);
}

/* Modal de insertar/editar enlace en el constructor — misma
   corrección que .panel-contenido: fondo blanco de verdad, no el
   pensado por defecto para fondos oscuros. */
.modal-enlace-tarjeta .campo-etiqueta {
    color: var(--color-oscuro-principal);
}
.modal-enlace-tarjeta .campo-opcional {
    color: var(--color-gris-texto);
}
.modal-enlace-tarjeta .campo-input {
    background-color: var(--color-gris-claro);
    border:            1px solid var(--color-borde-claro);
}
.modal-enlace-tarjeta .campo-input:hover {
    background-color: var(--color-blanco);
    border-color:      rgba(0, 79, 113, 0.35);
}
.modal-enlace-tarjeta .campo-input:focus {
    background-color: var(--color-blanco);
    border-color:      var(--color-corporativo);
    box-shadow:        0 0 0 3px rgba(0, 79, 113, 0.15);
    outline:           none;
}

/* Espaciado más compacto entre campos del panel */
.panel-contenido .campo-fila {
    gap: 0.4rem;
}

.panel-contenido .menu-form-rejilla,
.panel-contenido .campo-grupo--mitad {
    gap: 1rem;
}

/* ------------------------------------------------------------
   Tipografía del panel: escala más comedida
   (los tamaños base --tipo-* están pensados para el sitio
   público; aquí se ajustan para una interfaz de administración)
   ------------------------------------------------------------ */
.panel-contenido .panel-titulo {
    font-size: 1.5rem;   /* antes 2.25rem */
}

.panel-contenido .panel-seccion-titulo {
    font-size:     1rem; /* antes 1.375rem */
    margin-bottom: 1rem;
}

.panel-contenido .tabla-th {
    font-size: 0.75rem; /* antes 0.6875rem — se quedaba diminuto */
}

.panel-contenido .tabla-td {
    font-size: 0.875rem; /* antes 0.8125rem */
}

.panel-contenido .tabla-accion {
    padding:   0.5rem 0.9rem; /* antes 0.25rem 0.5rem — los botones quedaban minúsculos y pegados */
    font-size: 0.75rem; /* antes 0.625rem */
}

@media screen and (max-width: 768px) {
    .panel-contenido .panel-titulo {
        font-size: 1.25rem;
    }
    .panel-contenido .panel-seccion-titulo {
        font-size:     0.9375rem;
        margin-bottom: 0.875rem;
    }
}

/* Botón enviar: tamaño compacto dentro del panel
   (la versión base es un CTA grande pensado para el
   formulario de contacto público) */
.panel-contenido .boton-enviar {
    padding:        0.75rem 1.75rem;
    font-size:      var(--tipo-xs);
    letter-spacing: 0.06em;
}

@media screen and (max-width: 768px) {
    .panel-contenido .boton-enviar {
        padding:    0.875rem 1.5rem;
        font-size:  var(--tipo-xs);
        width:      auto;
        align-self: flex-start;
    }
    .panel-contenido .menu-form-btn .boton-enviar {
        width: 100%;
    }
}

/* Botones finales del editor (Cancelar / Actualizar / Guardar cambios) */
.panel-contenido .editor-acciones {
    padding: 1rem;
}

.panel-contenido .editor-btn-borrador,
.panel-contenido .editor-btn-actualizar {
    padding:   0.625rem 1.25rem;
    font-size: var(--tipo-xs);
}

.panel-contenido .editor-btn-publicar {
    padding:        0.625rem 1.5rem;
    font-size:      var(--tipo-xs);
    letter-spacing: 0.05em;
}

/* --- Botón enviar --- */
.boton-enviar {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          1.125rem 2.5rem;
    background-color: var(--color-corporativo);
    color:            var(--color-blanco);
    font-size:        var(--tipo-sm);
    font-weight:      700;
    letter-spacing:   0.08em;
    text-transform:   uppercase;
    border:           2px solid var(--color-corporativo);
    border-radius:    6px;
    cursor:           pointer;
    transition:       var(--transicion-suave);
    align-self:       flex-start;
}

.boton-enviar:hover {
    background-color: var(--color-corporativo-oscuro);
    border-color:     var(--color-corporativo-oscuro);
    transform:        translateY(-2px);
    box-shadow:       var(--sombra-corporativa);
}

.boton-enviar:active {
    transform:  translateY(0);
    box-shadow: none;
}

.formulario-aviso-legal {
    font-size:   var(--tipo-xs);
    color:       #6b7280;
    line-height: 1.6;
}

/* Igual que con .campo-etiqueta y el enlace de la casilla: en la
   portada el fondo es oscuro, así que ahí sí hace falta el blanco
   semitransparente original. En cualquier otro sitio (como el
   bloque "Llamada a la acción + formulario"), el gris de arriba es
   la opción segura sobre fondo claro. */
.contacto-agencia .formulario-aviso-legal {
    color: rgba(255, 255, 255, 0.65);
}

.campo-fila--check {
    margin-bottom: 0.5rem;
}

.campo-check-etiqueta {
    display:     flex;
    align-items: flex-start;
    gap:         0.6rem;
    font-size:   var(--tipo-xs);
    line-height: 1.5;
    cursor:      pointer;
    color:       inherit;
}

.campo-check-etiqueta input[type="checkbox"] {
    flex-shrink:  0;
    width:        18px;
    height:       18px;
    margin-top:   0.1rem;
    cursor:       pointer;
    accent-color: var(--color-corporativo);
}

/* El enlace de "política de privacidad" reutiliza .aviso-enlace,
   pero esa clase se diseñó para el fondo oscuro de la sección de
   contacto de la portada (texto blanco) — aquí, dentro de la
   casilla, el formulario puede estar sobre cualquier fondo (claro
   u oscuro, según dónde se coloque el bloque), así que se le da
   un color propio en vez de heredar el blanco. */
.campo-check-etiqueta .aviso-enlace {
    color: var(--color-corporativo);
}

/* ...pero en la propia portada, el fondo SÍ es oscuro (y del mismo
   azul que --color-corporativo), así que ahí hace falta devolver
   el blanco — si no, el enlace se queda invisible sobre su propio
   color. Mismo patrón que con .campo-etiqueta un poco más arriba. */
.contacto-agencia .campo-check-etiqueta .aviso-enlace {
    color: var(--color-blanco);
}

.aviso-enlace {
    color:      var(--color-blanco);
    transition: var(--transicion-base);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aviso-enlace:hover {
    color: rgba(255, 255, 255, 0.75);
}


/* ============================================================
   PUNTO 5 — TABLET (max-width: 1099px) and (min-width: 769px)
   ============================================================ */

@media screen and (max-width: 1099px) and (min-width: 769px) {

    /* Layout vertical: info arriba, formulario abajo */
    .contacto-contenedor {
        grid-template-columns: 1fr;
        gap:                   var(--espacio-md);
    }

    .contacto-titular {
        font-size: var(--tipo-2xl);
    }

    /* Formulario ocupa el 100% del ancho */
    .contacto-formulario-contenedor {
        padding: 2rem;
    }

    .campo-grupo--mitad {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================
   PUNTO 5 — MÓVIL GRANDE (max-width: 768px) and (min-width: 481px)
   ============================================================ */

@media screen and (max-width: 768px) and (min-width: 481px) {

    .contacto-agencia {
        padding-top:    var(--espacio-lg);
        padding-bottom: calc(var(--altura-barra-app) + var(--espacio-lg));
    }

    .contacto-contenedor {
        grid-template-columns: 1fr;
        gap:                   var(--espacio-md);
    }

    .contacto-titular {
        font-size: var(--tipo-xl);
    }

    .contacto-descripcion {
        font-size: var(--tipo-sm);
    }

    /* Formulario a pantalla completa */
    .contacto-formulario-contenedor {
        padding:       1.75rem 1.5rem;
        border-radius: var(--radio-md);
    }

    /* Una sola columna */
    .campo-grupo--mitad {
        grid-template-columns: 1fr;
        gap:                   1.125rem;
    }

    /* Inputs grandes estilo App */
    .campo-input,
    .campo-textarea {
        padding:       1.125rem 1.25rem;
        font-size:     1rem;
        border-radius: 6px;
    }

    .campo-textarea {
        min-height: 160px;
    }

    /* Botón 100% ancho estilo App */
    .boton-enviar {
        width:         100%;
        padding:       1.25rem;
        font-size:     var(--tipo-base);
        border-radius: 6px;
        align-self:    stretch;
    }
}


/* ============================================================
   PUNTO 5 — MÓVIL PEQUEÑO (max-width: 480px)
   ============================================================ */

@media screen and (max-width: 480px) {

    .contacto-agencia {
        padding-top:    var(--espacio-md);
        padding-bottom: calc(var(--altura-barra-app) + var(--espacio-md));
    }

    .contacto-contenedor {
        grid-template-columns: 1fr;
        gap:                   var(--espacio-sm);
    }

    .contacto-titular {
        font-size: var(--tipo-xl);
    }

    .contacto-descripcion {
        font-size:     var(--tipo-sm);
        margin-bottom: var(--espacio-sm);
    }

    .contacto-datos {
        gap: 0.875rem;
    }

    .contacto-formulario-contenedor {
        padding:       1.5rem 1.25rem;
        border-radius: var(--radio-md);
    }

    .campo-grupo--mitad {
        grid-template-columns: 1fr;
        gap:                   1rem;
    }

    /* Inputs cómodos para pulgar */
    .campo-input,
    .campo-textarea {
        padding:       1.25rem 1.125rem;
        font-size:     1rem;
        border-radius: 6px;
    }

    .campo-textarea {
        min-height:  150px;
        resize:      none;
    }

    /* Botón 100% ancho con margen seguro sobre barra App */
    .boton-enviar {
        width:          100%;
        padding:        1.375rem;
        font-size:      var(--tipo-base);
        border-radius:  6px;
        align-self:     stretch;
        letter-spacing: 0.06em;
    }

    .formulario-aviso-legal {
        text-align: center;
    }
}

/* ============================================================
   PUNTO 6 — PÁGINA DE LOGIN
   Fondo: azul corporativo #004F71 vibrante
   Tarjeta: rgba(255,255,255,0.15) + blur(16px)
   ============================================================ */


/* -------------------------------------------------------
   LOGIN — Base y fondo (todas las pantallas)
   ------------------------------------------------------- */

.pagina-login {
    min-height:       100vh;
    background-color: var(--color-corporativo);
    position:         relative;
    overflow:         hidden;
}

/* Capa decorativa: reflejos de luz sobre el azul sólido */
.login-fondo {
    position:   absolute;
    inset:      0;
    background: radial-gradient(
                    ellipse 80% 60% at 25% 40%,
                    rgba(255, 255, 255, 0.12) 0%,
                    transparent 60%
                ),
                radial-gradient(
                    ellipse 50% 40% at 80% 75%,
                    rgba(0, 30, 60, 0.30) 0%,
                    transparent 55%
                );
    pointer-events: none;
}

/* Centrado perfecto vertical y horizontal */
.login-contenedor {
    position:        relative;
    z-index:         1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    padding:         var(--espacio-md) var(--padding-contenedor);
}

/* --- Tarjeta cristal blanca sobre azul vibrante --- */
.tarjeta-login {
    width:                   100%;
    max-width:               420px;
    background-color:        rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter:         blur(16px);
    border:                  1px solid rgba(255, 255, 255, 0.28);
    border-radius:           var(--radio-lg);
    padding:                 2.75rem 2.5rem;
    display:                 flex;
    flex-direction:          column;
    gap:                     1.75rem;
}

/* --- Logo --- */
.login-logo {
    display:         flex;
    justify-content: center;
}

.login-logo-enlace {
    display:    inline-flex;
    transition: var(--transicion-base);
}

.login-logo-enlace:hover {
    opacity: 0.80;
}

.login-logo-imagen {
    height: 42px;
    width:  auto;
}

/* --- Bienvenida --- */
.login-bienvenida {
    text-align: center;
}

.login-titulo {
    font-size:      var(--tipo-lg);
    font-weight:    700;
    color:          var(--login-color-titulo, #ffffff);
    letter-spacing: -0.01em;
    line-height:    1.2;
    margin-bottom:  0.5rem;
}

.login-subtitulo {
    font-size:   var(--tipo-sm);
    color:       var(--login-color-subtitulo, rgba(255, 255, 255, 0.72));
    line-height: 1.5;
}

/* --- Formulario --- */
.formulario-login {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

.formulario-login .campo-etiqueta {
    font-size:      var(--tipo-xs);
    font-weight:    600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          var(--login-color-texto, #ffffff);
}

/* Inputs: fondo blanco limpio sobre tarjeta cristal */
.formulario-login .campo-input {
    width:            100%;
    background-color: rgba(255, 255, 255, 0.92);
    border:           2px solid transparent;
    border-radius:    6px;
    padding:          0.9rem 1.125rem;
    font-size:        var(--tipo-base);
    color:            var(--color-oscuro-principal);
    transition:       var(--transicion-base);
    line-height:      1.5;
}

.formulario-login .campo-input::placeholder {
    color: var(--color-gris-texto);
}

.formulario-login .campo-input:hover {
    background-color: #ffffff;
    border-color:     rgba(0, 79, 113, 0.30);
}

.formulario-login .campo-input:focus {
    background-color: #ffffff;
    border-color:     var(--color-corporativo-oscuro);
    box-shadow:       0 0 0 3px rgba(255, 255, 255, 0.30);
    outline:          none;
}

/* --- Opciones: recordarme + olvidé contraseña --- */
.login-opciones {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.75rem;
}

.login-recuerdame {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    cursor:      pointer;
}

.login-checkbox {
    width:        16px;
    height:       16px;
    accent-color: #ffffff;
    cursor:       pointer;
    flex-shrink:  0;
}

.login-recuerdame-texto {
    font-size: var(--tipo-sm);
    color:     rgba(255, 255, 255, 0.80);
}

.login-olvidaste {
    font-size:   var(--tipo-sm);
    color:       var(--login-color-enlaces, rgba(255, 255, 255, 0.65));
    transition:  var(--transicion-base);
    white-space: nowrap;
}

.login-olvidaste:hover {
    color: var(--login-color-enlaces, #ffffff);
    filter: brightness(1.2);
}

/* --- Botón de acceso: azul sólido con contraste fuerte --- */
.boton-acceso {
    width:            100%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          1rem 2rem;
    background-color: var(--color-corporativo-oscuro);
    color:            #ffffff;
    font-size:        var(--tipo-sm);
    font-weight:      700;
    letter-spacing:   0.08em;
    text-transform:   uppercase;
    border:           2px solid rgba(255, 255, 255, 0.40);
    border-radius:    6px;
    cursor:           pointer;
    transition:       var(--transicion-suave);
    margin-top:       0.25rem;
}

.boton-acceso:hover {
    background-color: #ffffff;
    border-color:     #ffffff;
    color:            var(--color-corporativo);
    transform:        translateY(-2px);
    box-shadow:       0 8px 24px rgba(0, 0, 0, 0.20);
}

.boton-acceso:active {
    transform:  translateY(0);
    box-shadow: none;
}

/* --- Pie de tarjeta --- */
.login-pie {
    text-align:  center;
    padding-top: 0.25rem;
    border-top:  1px solid rgba(255, 255, 255, 0.18);
}

.login-volver {
    font-size:  var(--tipo-sm);
    color:      rgba(255, 255, 255, 0.55);
    transition: var(--transicion-base);
}

.login-volver:hover {
    color: #ffffff;
}


/* ============================================================
   PUNTO 6 — LOGIN TABLET (max-width: 1099px) and (min-width: 769px)
   ============================================================ */

@media screen and (max-width: 1099px) and (min-width: 769px) {

    .tarjeta-login {
        max-width: 400px;
        padding:   2.5rem 2.25rem;
    }

    .login-logo-imagen {
        height: 38px;
    }
}


/* ============================================================
   PUNTO 6 — LOGIN MÓVIL GRANDE (max-width: 768px) and (min-width: 481px)
   ============================================================ */

@media screen and (max-width: 768px) and (min-width: 481px) {

    .login-contenedor {
        align-items: flex-start;
        padding-top: var(--espacio-lg);
    }

    .tarjeta-login {
        max-width:     100%;
        padding:       2.25rem 1.75rem;
        border-radius: var(--radio-md);
        gap:           1.5rem;
    }

    .login-logo-imagen {
        height: 36px;
    }

    .login-titulo {
        font-size: var(--tipo-md);
    }

    .formulario-login .campo-input {
        padding:       1.125rem 1.25rem;
        font-size:     1rem;
    }

    .boton-acceso {
        padding:   1.25rem;
        font-size: var(--tipo-base);
    }
}


/* ============================================================
   PUNTO 6 — LOGIN MÓVIL PEQUEÑO (max-width: 480px)
   ============================================================ */

@media screen and (max-width: 480px) {

    .login-contenedor {
        align-items: flex-start;
        padding:     var(--espacio-md) var(--espacio-sm);
    }

    .tarjeta-login {
        max-width:     100%;
        padding:       2rem 1.25rem 1.75rem;
        border-radius: var(--radio-md);
        gap:           1.375rem;
    }

    .login-logo-imagen {
        height: 32px;
    }

    .login-titulo {
        font-size: var(--tipo-md);
    }

    .login-subtitulo {
        font-size: var(--tipo-xs);
    }

    .login-opciones {
        flex-direction: column;
        align-items:    flex-start;
        gap:            0.625rem;
    }

    .formulario-login .campo-input {
        padding:   1.25rem 1.125rem;
        font-size: 1rem;
    }

    .boton-acceso {
        padding:        1.375rem;
        font-size:      var(--tipo-base);
        letter-spacing: 0.06em;
    }

    .login-volver {
        font-size: var(--tipo-xs);
    }
}


/* ============================================================
   PUNTO 7 — DASHBOARD PRIVADO
   ============================================================ */


/* -------------------------------------------------------
   DASHBOARD — Base global (todas las pantallas)
   ------------------------------------------------------- */

.pagina-dashboard {
    background-color: #F4F6F8;
    min-height:       100vh;
}

.dashboard-contenedor {
    display:    flex;
    min-height: 100vh;
}


/* -------------------------------------------------------
   SIDEBAR — Desktop (desde 1100px)
   ------------------------------------------------------- */

.panel-sidebar {
    width:            260px;
    flex-shrink:      0;
    background-color: var(--color-corporativo);
    min-height:       100vh;
    position:         sticky;
    top:              0;
    height:           100vh;
    display:          flex;
    flex-direction:   column;
    overflow-y:       auto;
}

/* Logo en sidebar */
.sidebar-logo {
    padding:       1.75rem 1.5rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-logo-enlace {
    display:    inline-flex;
    transition: var(--transicion-base);
}

.sidebar-logo-enlace:hover {
    opacity: 0.80;
}

.sidebar-logo-imagen {
    height: var(--logo-panel-alto-escritorio, 36px);
    width:  auto;
    filter: brightness(0) invert(1);
}

/* Perfil de usuario */
.sidebar-usuario {
    display:       flex;
    align-items:   center;
    gap:           0.875rem;
    padding:       1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebar-avatar {
    width:            38px;
    height:           38px;
    border-radius:    50%;
    background-color: rgba(255, 255, 255, 0.18);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
}

.sidebar-avatar-iniciales {
    font-size:   var(--tipo-xs);
    font-weight: 700;
    color:       #ffffff;
    line-height: 1;
}

.sidebar-usuario-info {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    overflow:       hidden;
}

.sidebar-usuario-nombre {
    font-size:     var(--tipo-sm);
    font-weight:   600;
    color:         #ffffff;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.sidebar-usuario-rol {
    font-size: var(--tipo-xs);
    color:     rgba(255, 255, 255, 0.60);
}

/* Navegación del sidebar */
.sidebar-nav {
    flex:    1;
    padding: 1rem 0.75rem;
}

.sidebar-menu {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}

.sidebar-item {
    display:        flex;
    flex-direction: column;   /* enlace padre + submenú apilados verticalmente */
}

.sidebar-enlace {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    width:         100%;
    padding:       0.75rem 1rem;
    font-size:     var(--tipo-sm);
    font-weight:   500;
    color:         rgba(255, 255, 255, 0.72);
    border-radius: var(--radio-md);
    transition:    var(--transicion-base);
}

.sidebar-enlace:hover {
    background-color: rgba(255, 255, 255, 0.10);
    color:            #ffffff;
}

.sidebar-item--activo .sidebar-enlace {
    background-color: rgba(255, 255, 255, 0.18);
    color:            #ffffff;
    font-weight:      600;
}

.sidebar-icono {
    font-size:   1.125rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Pie del sidebar: cerrar sesión */
.sidebar-pie {
    padding:    0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebar-cerrar-sesion {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    width:         100%;
    padding:       0.75rem 1rem;
    font-size:     var(--tipo-sm);
    font-weight:   500;
    color:         rgba(255, 255, 255, 0.55);
    border-radius: var(--radio-md);
    transition:    var(--transicion-base);
}

.sidebar-cerrar-sesion:hover {
    background-color: rgba(255, 60, 60, 0.15);
    color:            #ff8080;
}


/* -------------------------------------------------------
   CONTENIDO PRINCIPAL — Desktop
   ------------------------------------------------------- */

.panel-contenido {
    flex:       1;
    min-width:  0;
    padding:    2rem 2.5rem;
    display:    flex;
    flex-direction: column;
    gap:        2rem;
}

/* Cabecera del panel */
.panel-cabecera {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    flex-wrap:       wrap;
}

/* ============================================================
   CABECERA DE SALUDO — solo en la pantalla Resumen
   ============================================================ */
.panel-cabecera--saludo {
    position:         relative;
    overflow:         hidden;
    align-items:      flex-start;
    padding:          2.5rem 2.25rem;
    border-radius:    var(--radio-lg);
    background:       linear-gradient(120deg, #f2f9fc 0%, #dceefa 45%, #b9def0 100%);
    margin-bottom:    0.5rem;
}

.panel-cabecera--saludo::before {
    content:              '';
    position:             absolute;
    inset:                0;
    background-image:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='300' viewBox='0 0 900 300'%3E%3Cpath d='M0,220 Q220,100 440,190 T900,110' stroke='%237fb8dc' stroke-width='2' fill='none' opacity='0.45'/%3E%3Cpath d='M50,270 Q280,160 520,230 T950,150' stroke='%235c9fc9' stroke-width='2' fill='none' opacity='0.35'/%3E%3Cpath d='M150,60 Q380,10 600,70 T1000,20' stroke='%23a8d3ea' stroke-width='2' fill='none' opacity='0.4'/%3E%3C/svg%3E");
    background-repeat:    no-repeat;
    background-position:  right -20px center;
    background-size:      70% auto;
    pointer-events:       none;
}

.panel-cabecera--saludo .panel-cabecera-texto {
    position: relative;
    z-index:  1;
}

.panel-cabecera--saludo .panel-titulo {
    font-size:      var(--tipo-2xl);
    color:          var(--color-oscuro-principal);
}

.panel-cabecera--saludo .panel-subtitulo {
    font-size: var(--tipo-base);
    color:     var(--color-gris-oscuro);
}

.panel-cabecera--saludo .panel-cabecera-acciones {
    position: relative;
    z-index:  1;
}

@media screen and (max-width: 768px) {
    .panel-cabecera--saludo {
        padding: 1.75rem 1.5rem;
    }
    .panel-cabecera--saludo::before {
        background-size:     140% auto;
        background-position: center bottom -40px;
        opacity:              0.6;
    }
}

.panel-cabecera-texto {
    order: 1;
}

.panel-cabecera-acciones {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-wrap:   wrap;
}

.panel-cabecera-botones-rapidos {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
    .panel-cabecera-texto {
        order: 1;
        width: 100%;
    }
    .panel-cabecera-acciones {
        order:          2;
        width:          100%;
        flex-direction: column;
        align-items:    stretch;
        gap:            0.6rem;
    }
    .panel-cabecera-acciones .panel-fecha {
        text-align: center;
        font-size:  var(--tipo-xs);
    }
    .panel-cabecera-botones-rapidos {
        flex-wrap: nowrap;
        gap:       0.5rem;
    }
    .panel-cabecera-botones-rapidos .editor-btn-borrador {
        flex:        1;
        min-width:   0;
        text-align:  center;
        padding:     0.55rem 0.4rem;
        font-size:   var(--tipo-xs);
        white-space: nowrap;
    }
    .editor-acciones-cabecera {
        order:      2;
        width:      100%;
        flex-wrap:  nowrap;
        gap:        0.5rem;
    }
    .editor-acciones-cabecera .editor-btn-borrador,
    .editor-acciones-cabecera .editor-btn-actualizar,
    .editor-acciones-cabecera .editor-btn-publicar {
        flex:      1;
        min-width: 0;
        padding:   0.5rem 0.4rem;
        font-size: var(--tipo-xs);
        text-align: center;
        line-height: 1.2;
    }
    .panel-cabecera > .editor-btn-volver {
        order: 2;
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .panel-cabecera-botones-rapidos {
        flex-wrap: wrap;
    }
    .panel-cabecera-botones-rapidos .editor-btn-borrador {
        flex-basis: calc(50% - 0.25rem);
    }
}

.panel-titulo {
    font-size:      var(--tipo-2xl);
    font-weight:    700;
    color:          var(--color-oscuro-principal);
    letter-spacing: -0.02em;
    line-height:    1.1;
    margin-bottom:  0.25rem;
}

.panel-subtitulo {
    font-size: var(--tipo-sm);
    color:     var(--color-gris-texto);
}

.panel-fecha {
    font-size:   var(--tipo-sm);
    color:       var(--color-gris-texto);
    white-space: nowrap;
}

/* Título de sección interna */
.panel-seccion-titulo {
    font-size:     var(--tipo-lg);
    font-weight:   700;
    color:         var(--color-oscuro-principal);
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.panel-seccion-cabecera {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1.25rem;
}

.panel-ver-todos {
    font-size:  var(--tipo-sm);
    font-weight: 600;
    color:      var(--color-corporativo);
    transition: var(--transicion-base);
}

.panel-ver-todos:hover {
    color: var(--color-corporativo-oscuro);
}


/* -------------------------------------------------------
   RESUMEN DE CALIDAD SEO (ahora vive como tarjeta dentro de
   la rejilla de métricas — ver .tarjeta-metrica--seo)
   ------------------------------------------------------- */
.seo-resumen-barra {
    display:       flex;
    width:         100%;
    height:        14px;
    border-radius: var(--radio-redondo);
    overflow:      hidden;
    background:    var(--color-gris-claro);
    margin-bottom: 0.75rem;
}

.seo-resumen-tramo {
    height: 100%;
    transition: var(--transicion-base);
}

.seo-resumen-tramo--bueno { background-color: #10b981; }
.seo-resumen-tramo--medio { background-color: #f59e0b; }
.seo-resumen-tramo--malo  { background-color: #ef4444; }

.seo-resumen-leyenda {
    display:  flex;
    flex-wrap: wrap;
    gap:      1.5rem;
}

.seo-resumen-leyenda-item {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   var(--tipo-sm);
    color:       var(--color-gris-texto);
}

.seo-resumen-punto {
    display:       inline-block;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    flex-shrink:   0;
}

.seo-resumen-punto--bueno { background-color: #10b981; }
.seo-resumen-punto--medio { background-color: #f59e0b; }
.seo-resumen-punto--malo  { background-color: #ef4444; }

@media screen and (max-width: 768px) {
    .seo-resumen-leyenda {
        gap: 0.75rem 1rem;
    }
}

/* -------------------------------------------------------
   TARJETAS DE MÉTRICAS
   ------------------------------------------------------- */

.metricas-rejilla {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    align-items:           stretch;
    gap:                   1.25rem;
}

.metricas-rejilla > * {
    min-width: 0;
}

/* Ya no hace falta que la tarjeta del SEO ocupe el doble de
   columnas — ahora todas las tarjetas del resumen tienen el
   mismo ancho amplio por defecto. */
.tarjeta-metrica-seo-titulo {
    display: block;
}

.tarjeta-metrica {
    background-color: var(--color-blanco);
    border-radius:    6px;
    border:           1px solid var(--color-borde-claro);
    padding:          1.5rem;
    display:          flex;
    flex-direction:   column;
    justify-content:  space-between;
    height:           100%;
    gap:              0.875rem;
    box-shadow:       var(--sombra-suave);
    transition:       var(--transicion-base);
}

.tarjeta-metrica:hover {
    box-shadow:   var(--sombra-media);
    border-color: var(--color-borde-corporativo);
}

.tarjeta-metrica-icono {
    width:           44px;
    height:          44px;
    border-radius:   var(--radio-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.375rem;
}

.tarjeta-metrica-icono--leads {
    background-color: rgba(0, 79, 113, 0.10);
    color:            var(--color-corporativo);
}

.tarjeta-metrica-icono--proyectos {
    background-color: rgba(0, 100, 148, 0.10);
    color:            var(--color-corporativo-medio);
}

.tarjeta-metrica-icono--paginas {
    background-color: rgba(55, 65, 81, 0.08);
    color:            var(--color-gris-oscuro);
}

.tarjeta-metrica-datos {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}

.tarjeta-metrica-valor {
    font-size:      var(--tipo-3xl);
    font-weight:    700;
    color:          var(--color-oscuro-principal);
    letter-spacing: -0.02em;
    line-height:    1;
}

.tarjeta-metrica-etiqueta {
    font-size:   var(--tipo-sm);
    color:       var(--color-gris-texto);
    font-weight: 500;
}

.tarjeta-metrica-etiqueta--grande {
    font-size:   var(--tipo-lg);
    font-weight: 700;
    color:       var(--color-oscuro-principal);
}

.tarjeta-metrica-subtexto {
    font-size: var(--tipo-xs);
    color:     var(--color-gris-texto);
    margin-top: 0.15rem;
}

/* ============================================================
   ACTIVIDAD RECIENTE (pantalla Resumen)
   ============================================================ */
.actividad-reciente-seccion {
    background-color: var(--color-blanco);
    border:           1px solid var(--color-borde-claro);
    border-radius:    6px;
    padding:          1.5rem;
    box-shadow:       var(--sombra-suave);
}

.actividad-reciente-lista {
    list-style: none;
    margin:     0.75rem 0 0;
    padding:    0;
}

.actividad-reciente-item {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    padding:       0.75rem 0;
    border-bottom: 1px solid var(--color-borde-claro);
    flex-wrap:     wrap;
}

.actividad-reciente-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.actividad-reciente-tipo {
    flex-shrink:      0;
    font-size:        var(--tipo-xs);
    font-weight:      700;
    text-transform:   uppercase;
    letter-spacing:   0.04em;
    padding:          0.2rem 0.6rem;
    border-radius:    var(--radio-redondo);
    background-color: var(--color-corporativo-suave);
    color:            var(--color-corporativo);
}

.actividad-reciente-tipo--insight { background-color: rgba(16, 185, 129, 0.12); color: #0d9668; }
.actividad-reciente-tipo--pagina  { background-color: rgba(55, 65, 81, 0.10);  color: var(--color-gris-oscuro); }

.actividad-reciente-titulo {
    flex:            1 1 200px;
    font-size:       var(--tipo-sm);
    font-weight:     600;
    color:           var(--color-oscuro-principal);
    text-decoration: none;
}

.actividad-reciente-titulo:hover {
    color:           var(--color-corporativo);
    text-decoration: underline;
}

.actividad-reciente-meta {
    flex-shrink: 0;
    font-size:   var(--tipo-xs);
    color:       var(--color-gris-texto);
}

.tarjeta-metrica-tendencia {
    display:       inline-block;
    font-size:   var(--tipo-xs);
    font-weight: 600;
    padding:     0.25rem 0.625rem;
    border-radius: var(--radio-redondo);
    align-self:  flex-start;
    text-decoration: none;
    cursor:      pointer;
    transition:  var(--transicion-base);
}

.tarjeta-metrica-tendencia:hover {
    filter: brightness(0.92);
}

.tarjeta-metrica-tendencia--positiva {
    background-color: rgba(16, 185, 129, 0.10);
    color:            #059669;
}

.tarjeta-metrica-tendencia--neutra {
    background-color: rgba(107, 114, 128, 0.10);
    color:            var(--color-gris-texto);
}


/* -------------------------------------------------------
   TABLA DE DATOS
   ------------------------------------------------------- */

.tabla-contenedor {
    background-color: var(--color-blanco);
    border-radius:    6px;
    border:           1px solid var(--color-borde-claro);
    box-shadow:       var(--sombra-suave);
    /* overflow-x:auto (no "hidden") para que la tabla pueda
       desplazarse en horizontal en CUALQUIER ancho, no solo en
       los @media estrechos de más abajo — antes, entre 1100px y
       el ancho real de la tabla, no había ningún scroll activo:
       el contenido simplemente se recortaba o se salía sin más. */
    overflow-x:       auto;
    overflow-y:       hidden;
    /* Barra de scroll siempre visible (no la fina/auto-oculta por
       defecto de macOS/algunos navegadores) — sin esto, el scroll
       funciona de verdad pero no hay ninguna pista visual de que
       existe, así que el usuario ve la tabla recortada sin saber
       que puede desplazarse para ver el resto. */
    scrollbar-width:  thin;
}

.tabla-contenedor::-webkit-scrollbar {
    height: 8px;
}

.tabla-contenedor::-webkit-scrollbar-track {
    background: var(--color-gris-claro);
}

.tabla-contenedor::-webkit-scrollbar-thumb {
    background-color: var(--color-borde-claro);
    border-radius:    4px;
}

.tabla-contenedor::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gris-texto);
}

.tabla-panel {
    width:           100%;
    border-collapse: collapse;
    table-layout:    auto;
}

.tabla-cabecera {
    background-color: #F8F9FA;
    border-bottom:    1px solid var(--color-borde-claro);
}

.tabla-th {
    padding:        1rem 1.25rem;
    font-size:      var(--tipo-xs);
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-gris-texto);
    text-align:     left;
    white-space:    nowrap;
}

.tabla-fila {
    border-bottom: 1px solid var(--color-borde-claro);
    transition:    var(--transicion-base);
}

.tabla-fila:last-child {
    border-bottom: none;
}

.tabla-fila:hover {
    background-color: #F8F9FA;
}

.tabla-td {
    padding:     1.35rem 1.5rem;
    font-size:   var(--tipo-sm);
    color:       var(--color-gris-oscuro);
    line-height: 1.5;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* Título del proyecto — siempre visible completo */
.tabla-td--titulo-proyecto {
    white-space: normal;
    overflow:    visible;
    min-width:   160px;
}

/* Columna URL de Páginas — recortada con puntos suspensivos (la
   ruta completa siempre disponible al pasar el ratón, vía title).
   100px es el mínimo seguro que no desborda ni siquiera en el
   tramo más estrecho donde la tabla ya se muestra (justo por
   encima de 1300px) — se amplía en pantallas con sitio de sobra. */
.tabla-td--url-pagina {
    max-width:     40px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

@media screen and (min-width: 1620px) {
    .tabla-td--url-pagina { max-width: 220px; }
}

@media screen and (min-width: 1850px) {
    .tabla-td--url-pagina { max-width: 340px; }
}

.tabla-td--nombre {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    font-weight: 600;
    color:       var(--color-oscuro-principal);
}

.tabla-avatar {
    width:            32px;
    height:           32px;
    border-radius:    50%;
    background-color: var(--color-corporativo-claro);
    color:            var(--color-corporativo);
    font-size:        var(--tipo-xs);
    font-weight:      700;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
}

.tabla-fecha {
    font-size: var(--tipo-xs);
    color:     var(--color-gris-texto);
}

.tabla-td--acciones {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-wrap:   nowrap;
}

.tabla-accion {
    font-size:     var(--tipo-xs);
    font-weight:   600;
    padding:       0.375rem 0.75rem;
    border-radius: var(--radio-sm);
    transition:    var(--transicion-base);
    white-space:   nowrap;
}

.tabla-accion--ver {
    background-color: var(--color-corporativo-claro);
    color:            var(--color-corporativo);
}

.tabla-accion--ver:hover {
    background-color: var(--color-corporativo);
    color:            #ffffff;
}

/* Acciones "neutras" (ni positivas ni destructivas): Quitar 2FA,
   Activar/Desactivar... — antes no tenían ningún fondo propio y se
   veían como texto plano pegado al resto, sin separación visual
   clara respecto a Editar (azul) y Eliminar (rojo). */
.tabla-accion--neutral {
    background-color: var(--color-gris-claro);
    color:            var(--color-gris-oscuro);
}

.tabla-accion--neutral:hover {
    background-color: var(--color-borde-claro);
}

.tabla-accion--eliminar {
    background-color: rgba(220, 38, 38, 0.08);
    color:            #DC2626;
}

.tabla-accion--eliminar:hover {
    background-color: #DC2626;
    color:            #ffffff;
}

/* Barra app inferior: oculta en desktop */
.dashboard-nav-app {
    display: none;
}


/* ============================================================
   PUNTO 7 — DASHBOARD TABLET (max-width: 1099px) and (min-width: 769px)
   ============================================================ */

@media screen and (max-width: 1099px) and (min-width: 769px) {

    /* Sidebar más estrecho en tablet */
    .panel-sidebar {
        width: 220px;
    }

    .panel-contenido {
        padding: 1.5rem 1.75rem;
        gap:     1.5rem;
    }

    .panel-titulo {
        font-size: var(--tipo-xl);
    }

    /* Métricas: columnas compactas, se adaptan al número de tarjetas */
    .metricas-rejilla {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap:                   1rem;
    }

    .tarjeta-metrica {
        padding: 1.25rem;
    }

    .tarjeta-metrica-valor {
        font-size: var(--tipo-2xl);
    }

    /* Tabla: scroll horizontal si hace falta */
    .tabla-contenedor {
        overflow-x: auto;
    }

    .tabla-panel {
        table-layout: auto;
        min-width:    560px;
    }
}


/* ============================================================
   PUNTO 7 — DASHBOARD MÓVIL GRANDE (max-width: 768px) and (min-width: 481px)
   ============================================================ */

@media screen and (max-width: 768px) and (min-width: 481px) {
    .dashboard-contenedor {
        flex-direction: column;
    }

    /* Sidebar oculto en móvil */
    .panel-sidebar {
        display: none;
    }

    /* Contenido ocupa todo el ancho */
    .panel-contenido {
        padding:        1.25rem 1.25rem;
        padding-bottom: calc(var(--altura-barra-app) + 1.5rem);
        gap:            1.5rem;
    }

    .panel-titulo {
        font-size: var(--tipo-xl);
    }

    /* Métricas: rejilla responsive (2 columnas en este ancho) */
    .metricas-rejilla {
        display:               grid;
        grid-template-columns: repeat(2, 1fr);
        gap:                   1rem;
    }

    .tarjeta-metrica {
        padding: 1.25rem;
    }

    /* Tabla con scroll horizontal */
    .tabla-contenedor {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tabla-panel {
        table-layout: auto;
        min-width:    520px;
    }

    /* Barra App inferior: visible en móvil */
    .dashboard-nav-app {
        display:          block;
        position:         fixed;
        bottom:           0;
        left:             0;
        width:            100%;
        min-height:       var(--altura-barra-app);
        height:           auto;
        z-index:          999;
        background-color: var(--color-blanco);
        border-top:       1px solid var(--color-borde-claro);
        box-shadow:       var(--sombra-barra-app);
        padding-bottom:   env(safe-area-inset-bottom, 0px);
    }

    .dashboard-nav-lista {
        display:         flex;
        align-items:     stretch;
        justify-content: space-around;
        height:          100%;
        width:           100%;
    }

    .dashboard-nav-item {
        flex:    1;
        display: flex;
    }

    .dashboard-nav-enlace {
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        flex:            1;
        gap:             0.2rem;
        padding:         0.5rem 0.25rem 0.375rem;
        font-size:       0.625rem;
        font-weight:     600;
        letter-spacing:  0.06em;
        color:           var(--color-gris-texto);
        text-transform:  uppercase;
        transition:      var(--transicion-base);
    }

    .dashboard-nav-enlace:hover,
    .dashboard-nav-item--activo .dashboard-nav-enlace {
        color:            var(--color-corporativo);
        background-color: var(--color-corporativo-claro);
    }

    .dashboard-nav-icono {
        display:     block;
        font-size:   1.375rem;
        line-height: 1;
    }

    .dashboard-nav-icono-img {
        display:    block;
        width:      1.375rem;
        height:     1.375rem;
        object-fit: contain;
    }
}


/* ============================================================
   PUNTO 7 — DASHBOARD MÓVIL PEQUEÑO (max-width: 480px)
   ============================================================ */

@media screen and (max-width: 480px) {

    .dashboard-contenedor {
        flex-direction: column;
    }

    .panel-sidebar {
        display: none;
    }

    .panel-contenido {
        padding:        1rem;
        padding-bottom: calc(var(--altura-barra-app) + 1.25rem);
        gap:            1.25rem;
    }

    .panel-titulo {
        font-size: var(--tipo-lg);
    }

    .panel-subtitulo {
        font-size: var(--tipo-xs);
    }

    /* Métricas: rejilla responsive (1 columna en móvil pequeño) */
    .metricas-rejilla {
        display:               grid;
        grid-template-columns: 1fr;
        gap:                   0.875rem;
    }

    .tarjeta-metrica {
        padding: 1.125rem;
    }

    .tarjeta-metrica-valor {
        font-size: var(--tipo-2xl);
    }

    /* Tabla scroll horizontal */
    .tabla-contenedor {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tabla-panel {
        table-layout: auto;
        min-width:    480px;
    }

    .tabla-th,
    .tabla-td {
        padding: 0.75rem 1rem;
    }

    /* Barra App inferior */
    .dashboard-nav-app {
        display:          block;
        position:         fixed;
        bottom:           0;
        left:             0;
        width:            100%;
        min-height:       var(--altura-barra-app);
        height:           auto;
        z-index:          999;
        background-color: var(--color-blanco);
        border-top:       1px solid var(--color-borde-claro);
        box-shadow:       var(--sombra-barra-app);
        padding-bottom:   env(safe-area-inset-bottom, 0px);
    }

    .dashboard-nav-lista {
        display:         flex;
        align-items:     stretch;
        justify-content: space-around;
        height:          100%;
        width:           100%;
    }

    .dashboard-nav-item {
        flex:    1;
        display: flex;
    }

    .dashboard-nav-enlace {
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        flex:            1;
        gap:             0.2rem;
        padding:         0.375rem 0.125rem 0.25rem;
        font-size:       0.5625rem;
        font-weight:     600;
        letter-spacing:  0.05em;
        color:           var(--color-gris-texto);
        text-transform:  uppercase;
        transition:      var(--transicion-base);
    }

    .dashboard-nav-enlace:hover,
    .dashboard-nav-item--activo .dashboard-nav-enlace {
        color:            var(--color-corporativo);
        background-color: var(--color-corporativo-claro);
    }

    .dashboard-nav-icono {
        display:     block;
        font-size:   1.25rem;
        line-height: 1;
    }

    .dashboard-nav-icono-img {
        display:    block;
        width:      1.25rem;
        height:     1.25rem;
        object-fit: contain;
    }
}


/* ============================================================
   PUNTO 8 — CONSTRUCTOR DE BLOQUES (nueva-pagina.html)
   ============================================================ */


/* -------------------------------------------------------
   EDITOR — Base y estructura (Desktop desde 1100px)
   ------------------------------------------------------- */

/* Botón volver al panel */
.editor-btn-volver {
    font-size:   var(--tipo-sm);
    font-weight: 600;
    color:       var(--color-gris-texto);
    transition:  var(--transicion-base);
    white-space: nowrap;
}

.editor-btn-volver:hover {
    color: var(--color-corporativo);
}

/* Formulario principal del editor */
.editor-formulario {
    display:        flex;
    flex-direction: column;
    gap:            1.75rem;
}

/* Campo título de la página */
.editor-campo-titulo {
    display:          flex;
    flex-direction:   column;
    gap:              0.5rem;
    background-color: var(--color-blanco);
    border:           1px solid var(--color-borde-claro);
    border-radius:    6px;
    padding:          1.5rem;
    box-shadow:       var(--sombra-suave);
}

.editor-etiqueta {
    font-size:      var(--tipo-xs);
    font-weight:    700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          var(--color-gris-texto);
}

.editor-input-titulo {
    width:            100%;
    background-color: transparent;
    border:           none;
    border-bottom:    2px solid var(--color-borde-claro);
    border-radius:    0;
    padding:          0.625rem 0;
    font-size:        var(--tipo-xl);
    font-weight:      700;
    color:            var(--color-oscuro-principal);
    letter-spacing:   -0.01em;
    transition:       var(--transicion-base);
    line-height:      1.3;
}

.editor-input-titulo::placeholder {
    color:       var(--color-gris-medio);
    font-weight: 400;
}

.editor-input-titulo:focus {
    outline:      none;
    border-color: var(--color-corporativo);
}


/* -------------------------------------------------------
   CONSTRUCTOR DE BLOQUES — Contenedor principal
   ------------------------------------------------------- */

.constructor-bloques {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

.constructor-cabecera {
    display:     flex;
    align-items: baseline;
    gap:         1rem;
    flex-wrap:   wrap;
}

.constructor-titulo {
    font-size:   var(--tipo-lg);
    font-weight: 700;
    color:       var(--color-oscuro-principal);
    letter-spacing: -0.01em;
}

.constructor-info {
    font-size: var(--tipo-sm);
    color:     var(--color-gris-texto);
}


/* -------------------------------------------------------
   BLOQUE GENÉRICO — Estructura visual compartida
   ------------------------------------------------------- */

.bloque-item {
    background-color: var(--color-blanco);
    border:           1px solid var(--color-borde-claro);
    border-radius:    6px;
    box-shadow:       var(--sombra-suave);
    overflow:         hidden;
    transition:       var(--transicion-base);
}

.bloque-item:hover {
    border-color: var(--color-borde-corporativo);
    box-shadow:   var(--sombra-media);
}

/* Barra superior del bloque */
.bloque-barra {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          0.75rem 1.25rem;
    background-color: #F4F6F8;
    border-bottom:    1px solid var(--color-borde-claro);
    gap:              1rem;
}

.bloque-barra-izquierda {
    display:     flex;
    align-items: center;
    gap:         0.625rem;
}

.bloque-tipo-icono {
    font-size: 1rem;
    color:     var(--color-corporativo);
    line-height: 1;
}

.bloque-tipo-nombre {
    font-size:   var(--tipo-sm);
    font-weight: 600;
    color:       var(--color-gris-oscuro);
}

.bloque-barra-controles {
    display: flex;
    gap:     0.375rem;
}

.bloque-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            28px;
    height:           28px;
    font-size:        0.75rem;
    font-weight:      700;
    border-radius:    var(--radio-sm);
    cursor:           pointer;
    transition:       var(--transicion-base);
    background-color: transparent;
    border:           1px solid var(--color-borde-claro);
    color:            var(--color-gris-texto);
}

.bloque-btn:hover {
    background-color: var(--color-gris-claro);
    color:            var(--color-oscuro-principal);
}

.bloque-btn--eliminar:hover {
    background-color: rgba(220, 38, 38, 0.08);
    border-color:     rgba(220, 38, 38, 0.25);
    color:            #DC2626;
}

/* Contenido interior del bloque */
.bloque-contenido {
    padding: 1.5rem;
}


/* -------------------------------------------------------
   BLOQUE 1 — FILA DE COLUMNAS
   ------------------------------------------------------- */

.fila-columnas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:     1.25rem;
    align-items: start;
}

.columna-item {
    display:          flex;
    flex-direction:   column;
    gap:              1rem;
    background-color: #F8F9FA;
    border:           1px solid var(--color-borde-claro);
    border-radius:    6px;
    overflow:         hidden;
}

.columna-cabecera {
    padding:          0.5rem 1rem;
    background-color: var(--color-corporativo-claro);
    border-bottom:    1px solid var(--color-borde-corporativo);
}

.columna-etiqueta {
    font-size:      var(--tipo-xs);
    font-weight:    700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          var(--color-corporativo);
}

.columna-campos {
    display:        flex;
    flex-direction: column;
    gap:            0.875rem;
    padding:        1rem;
}

/* Textarea pequeño para columnas */
.campo-textarea--sm {
    min-height: 80px;
    resize:     vertical;
}

/* Simulador de subida de imagen */
.campo-imagen-simulado {
    display:          flex;
    align-items:      center;
    gap:              0.625rem;
    padding:          0.75rem 1rem;
    background-color: var(--color-blanco);
    border:           2px dashed var(--color-gris-medio);
    border-radius:    6px;
    cursor:           pointer;
    transition:       var(--transicion-base);
    position:         relative;
    overflow:         hidden;
}

.campo-imagen-simulado:hover {
    border-color: var(--color-corporativo);
    background-color: var(--color-corporativo-claro);
}

.campo-imagen-icono {
    font-size: 1.25rem;
    color:     var(--color-corporativo);
    line-height: 1;
    flex-shrink: 0;
}

.campo-imagen-texto {
    font-size:  var(--tipo-sm);
    color:      var(--color-gris-texto);
    transition: var(--transicion-base);
}

.campo-imagen-simulado:hover .campo-imagen-texto {
    color: var(--color-corporativo);
}

/* Input file real oculto sobre el simulador */
.campo-archivo {
    position: absolute;
    inset:    0;
    opacity:  0;
    cursor:   pointer;
    width:    100%;
    height:   100%;
}


/* -------------------------------------------------------
   BLOQUE 2 — ELEMENTO DE VÍDEO
   ------------------------------------------------------- */

.video-campos {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

/* Caja de previsualización del vídeo */
.video-preview {
    width:            100%;
    aspect-ratio:     16 / 9;
    background-color: #1A1A2E;
    border-radius:    6px;
    border:           1px solid var(--color-borde-claro);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    overflow:         hidden;
}

.video-preview-interior {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.75rem;
}

.video-preview-icono {
    font-size:        2.5rem;
    color:            rgba(255, 255, 255, 0.25);
    line-height:      1;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            64px;
    height:           64px;
    border-radius:    50%;
    background-color: rgba(255, 255, 255, 0.08);
    border:           1px solid rgba(255, 255, 255, 0.12);
}

.video-preview-texto {
    font-size: var(--tipo-sm);
    color:     rgba(255, 255, 255, 0.35);
}


/* -------------------------------------------------------
   BOTÓN AÑADIR BLOQUE
   ------------------------------------------------------- */

.constructor-anadir {
    display:         flex;
    justify-content: center;
    padding:         0.5rem 0;
}

.btn-anadir-bloque {
    display:          inline-flex;
    align-items:      center;
    gap:              0.5rem;
    padding:          0.875rem 2rem;
    background-color: transparent;
    color:            var(--color-corporativo);
    font-size:        var(--tipo-sm);
    font-weight:      700;
    letter-spacing:   0.06em;
    border:           2px dashed var(--color-borde-corporativo);
    border-radius:    6px;
    cursor:           pointer;
    transition:       var(--transicion-suave);
    width:            100%;
    justify-content:  center;
}

.btn-anadir-bloque:hover {
    background-color: var(--color-corporativo-claro);
    border-color:     var(--color-corporativo);
    border-style:     solid;
}


/* -------------------------------------------------------
   ACCIONES FINALES DEL EDITOR
   ------------------------------------------------------- */

.editor-acciones {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             1rem;
    padding:         1.5rem;
    background-color: var(--color-blanco);
    border:           1px solid var(--color-borde-claro);
    border-radius:    6px;
    box-shadow:       var(--sombra-suave);
    flex-wrap:        wrap;
}

.editor-acciones-cabecera {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-wrap:   wrap;
}
.editor-acciones-cabecera .editor-btn-borrador,
.editor-acciones-cabecera .editor-btn-actualizar,
.editor-acciones-cabecera .editor-btn-publicar {
    padding:   0.5rem 1rem;
    font-size: var(--tipo-sm);
}

.editor-btn-borrador {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          0.875rem 1.75rem;
    background-color: transparent;
    color:            var(--color-gris-oscuro);
    font-size:        var(--tipo-sm);
    font-weight:      600;
    letter-spacing:   0.04em;
    border:           1px solid var(--color-gris-medio);
    border-radius:    6px;
    cursor:           pointer;
    transition:       var(--transicion-base);
}

.editor-btn-borrador:hover {
    background-color: var(--color-gris-claro);
    border-color:     var(--color-gris-oscuro);
    color:            var(--color-oscuro-principal);
}

.editor-btn-publicar {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          0.875rem 2.25rem;
    background-color: var(--color-corporativo);
    color:            #ffffff;
    font-size:        var(--tipo-sm);
    font-weight:      700;
    letter-spacing:   0.08em;
    text-transform:   uppercase;
    border:           2px solid var(--color-corporativo);
    border-radius:    6px;
    cursor:           pointer;
    transition:       var(--transicion-suave);
}

.editor-btn-publicar:hover {
    background-color: var(--color-corporativo-oscuro);
    border-color:     var(--color-corporativo-oscuro);
    transform:        translateY(-2px);
    box-shadow:       var(--sombra-corporativa);
}

.editor-btn-publicar:active {
    transform:  translateY(0);
    box-shadow: none;
}


/* ============================================================
   PUNTO 8 — TABLET (max-width: 1099px) and (min-width: 769px)
   ============================================================ */

@media screen and (max-width: 1099px) and (min-width: 769px) {

    /* Columnas 3 → 2 en tablet */
    .fila-columnas {
        grid-template-columns: repeat(2, 1fr);
    }

    /* La tercera columna ocupa el ancho completo */
    .fila-columnas .columna-item:nth-child(3) {
        grid-column: 1 / -1;
    }

    .bloque-contenido {
        padding: 1.25rem;
    }

    .editor-acciones {
        padding: 1.25rem;
    }

    .editor-input-titulo {
        font-size: var(--tipo-lg);
    }
}


/* ============================================================
   PUNTO 8 — MÓVIL GRANDE (max-width: 768px) and (min-width: 481px)
   ============================================================ */

@media screen and (max-width: 768px) and (min-width: 481px) {

    /* Columnas → apiladas verticalmente */
    .fila-columnas {
        display:        flex;
        flex-direction: column;
        gap:            1rem;
    }

    .bloque-contenido {
        padding: 1rem;
    }

    .bloque-barra {
        padding: 0.625rem 1rem;
    }

    .editor-campo-titulo {
        padding: 1.25rem;
    }

    .editor-input-titulo {
        font-size: var(--tipo-lg);
    }

    .constructor-titulo {
        font-size: var(--tipo-md);
    }

    /* Video preview mantiene ratio */
    .video-preview {
        aspect-ratio: 16 / 9;
    }

    /* Botón añadir: ancho completo */
    .btn-anadir-bloque {
        width:   100%;
        padding: 1.125rem 1.5rem;
    }

    /* Acciones: columna, botones al 100% */
    .editor-acciones {
        flex-direction: column;
        align-items:    stretch;
        padding-bottom: calc(var(--altura-barra-app) + 1.5rem);
    }

    .editor-btn-borrador,
    .editor-btn-publicar {
        width:   100%;
        padding: 1.125rem;
    }
}


/* ============================================================
   PUNTO 8 — MÓVIL PEQUEÑO (max-width: 480px)
   ============================================================ */

@media screen and (max-width: 480px) {

    /* Columnas → apiladas verticalmente */
    .fila-columnas {
        display:        flex;
        flex-direction: column;
        gap:            0.875rem;
    }

    .bloque-contenido {
        padding: 0.875rem;
    }

    .bloque-barra {
        padding: 0.5rem 0.875rem;
    }

    .bloque-tipo-nombre {
        font-size: var(--tipo-xs);
    }

    .editor-campo-titulo {
        padding: 1rem;
    }

    .editor-input-titulo {
        font-size: var(--tipo-lg);
    }

    .constructor-titulo {
        font-size: var(--tipo-md);
    }

    .constructor-info {
        font-size: var(--tipo-xs);
    }

    /* Video preview compacto */
    .video-preview-icono {
        width:     48px;
        height:    48px;
        font-size: 1.75rem;
    }

    /* Botón añadir: ancho completo */
    .btn-anadir-bloque {
        width:   100%;
        padding: 1.125rem 1.25rem;
        font-size: var(--tipo-xs);
    }

    /* Acciones: columna, botones 100%, margen barra app */
    .editor-acciones {
        flex-direction: column;
        align-items:    stretch;
        padding:        1rem;
        padding-bottom: calc(var(--altura-barra-app) + 1.25rem);
        gap:            0.75rem;
    }

    .editor-btn-borrador,
    .editor-btn-publicar {
        width:   100%;
        padding: 1.25rem;
    }

    .editor-btn-publicar {
        letter-spacing: 0.06em;
    }
}


/* ============================================================
   PUNTO 11 — ESTADOS DEL FORMULARIO DE CONTACTO
   ============================================================ */

/* Honeypot: completamente invisible para humanos */
.campo-honeypot {
    position:   absolute;
    left:       -9999px;
    width:      1px;
    height:     1px;
    overflow:   hidden;
    opacity:    0;
    tabindex:   -1;
}

/* --- Avisos de éxito y error (sobre el formulario) --- */
.formulario-aviso {
    display:       flex;
    align-items:   flex-start;
    gap:           0.75rem;
    padding:       1rem 1.25rem;
    border-radius: 6px;
    font-size:     var(--tipo-sm);
    font-weight:   500;
    line-height:   1.55;
    margin-bottom: 1.25rem;
}

.formulario-aviso--exito {
    background-color: rgba(16, 185, 129, 0.15);
    border:           1px solid rgba(16, 185, 129, 0.40);
    color:            #ffffff;
}

.formulario-aviso--error {
    background-color: rgba(220, 38, 38, 0.15);
    border:           1px solid rgba(220, 38, 38, 0.40);
    color:            #ffffff;
}

/* ============================================================
   AVISO DE SESIÓN CADUCADA (banner fijo, todas las pantallas
   del panel — ver el latido de sesión en partes/sidebar.php)
   ============================================================ */
.aviso-sesion-caducada {
    position:      fixed;
    top:           0;
    left:          0;
    right:         0;
    z-index:       99999;
    background:    rgba(0, 79, 113, 0.5);
    color:         #ffffff;
    padding:       0.85rem 1.25rem;
    text-align:    center;
    font-size:     var(--tipo-sm);
    box-shadow:    0 2px 12px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
}

.aviso-sesion-caducada button {
    margin-left:      0.75rem;
    padding:          0.35rem 0.9rem;
    background-color: #ffffff;
    color:            var(--color-corporativo);
    border:           none;
    border-radius:    var(--radio-redondo);
    font-weight:      700;
    font-size:        var(--tipo-xs);
    cursor:           pointer;
}

.formulario-aviso--info {
    background-color: var(--color-corporativo-claro);
    border:           1px solid var(--color-corporativo-suave);
    color:            var(--color-corporativo-oscuro);
}

/* Dentro de la tarjeta oscura del login, el aviso informativo
   necesita el mismo tratamiento (semitransparente + texto claro)
   que ya llevan los de éxito/error en esta misma pantalla — la
   versión de arriba está pensada para el panel de fondo claro. */
.tarjeta-login .formulario-aviso--info {
    background-color: rgba(255, 255, 255, 0.15);
    border-color:     rgba(255, 255, 255, 0.35);
    color:            #ffffff;
}

.tarjeta-login .formulario-aviso--info .formulario-aviso-icono {
    background-color: rgba(255, 255, 255, 0.30);
    color:             #ffffff;
}

.formulario-aviso--info a {
    color:           var(--color-corporativo);
    font-weight:     700;
    text-decoration: underline;
}

.formulario-aviso--info .formulario-aviso-icono {
    background-color: var(--color-corporativo);
    color:            #ffffff;
}

.formulario-aviso-icono {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            22px;
    height:           22px;
    border-radius:    50%;
    font-size:        0.75rem;
    font-weight:      700;
    flex-shrink:      0;
    line-height:      1;
}

.formulario-aviso--exito .formulario-aviso-icono {
    background-color: rgba(16, 185, 129, 0.30);
    color:            #6ee7b7;
}

.formulario-aviso--error .formulario-aviso-icono {
    background-color: rgba(220, 38, 38, 0.30);
    color:            #fca5a5;
}

/* --- Campo con error individual --- */
.campo-fila--error .campo-input,
.campo-fila--error .campo-textarea,
.campo-input--error {
    border-color:     rgba(220, 38, 38, 0.70) !important;
    background-color: rgba(220, 38, 38, 0.06) !important;
}

/* El propio texto de dentro del campo (el placeholder) se pone en
   rojo y cambia a un aviso corto (ej. "Nombre / Empresa
   obligatorio") cuando ese campo falla al enviar — además del
   texto pequeño de abajo (.campo-error-texto), para que se note
   justo donde la persona ya tiene puesta la vista. */
.campo-input--error::placeholder {
    color:   #dc2626;
    opacity: 1;
}

.campo-fila--error .campo-input:focus,
.campo-fila--error .campo-textarea:focus {
    border-color: #DC2626 !important;
    box-shadow:   0 0 0 3px rgba(220, 38, 38, 0.18) !important;
}

/* Texto de error bajo el campo */
.campo-error-texto {
    display:     block;
    font-size:   var(--tipo-xs);
    color:       #fca5a5;
    margin-top:  0.25rem;
    font-weight: 500;
}


/* ============================================================
   PUNTO 12 — BADGES DE ESTADO EN TABLA DE LEADS
   ============================================================ */

.tabla-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       0.25rem 0.625rem;
    font-size:     var(--tipo-xs);
    font-weight:   600;
    border-radius: var(--radio-redondo);
    white-space:   nowrap;
}

.tabla-badge--nuevo {
    background-color: rgba(0, 79, 113, 0.12);
    color:            var(--color-corporativo);
}

.tabla-badge--leido {
    background-color: rgba(107, 114, 128, 0.10);
    color:            var(--color-gris-texto);
}


/* ============================================================
   PUNTO 14 — MENÚ DE TIPO DE BLOQUE (constructor dinámico)
   ============================================================ */

.menu-tipo-bloque {
    display:          flex;
    flex-direction:   column;
    gap:              0.5rem;
    background-color: var(--color-blanco);
    border:           1px solid var(--color-borde-claro);
    border-radius:    var(--radio-md);
    padding:          0.75rem;
    box-shadow:       var(--sombra-media);
    margin-top:       0.5rem;
}

.menu-tipo-opcion {
    display:          flex;
    align-items:      center;
    gap:              0.625rem;
    padding:          0.75rem 1rem;
    font-size:        var(--tipo-sm);
    font-weight:      600;
    color:            var(--color-oscuro-principal);
    background-color: var(--color-gris-claro);
    border:           1px solid var(--color-borde-claro);
    border-radius:    var(--radio-md);
    cursor:           pointer;
    transition:       var(--transicion-base);
    text-align:       left;
}

.menu-tipo-opcion:hover {
    background-color: var(--color-corporativo-claro);
    border-color:     var(--color-borde-corporativo);
    color:            var(--color-corporativo);
}

.menu-tipo-opcion--cancelar {
    color:            var(--color-gris-texto);
    background-color: transparent;
    border-color:     transparent;
    font-weight:      400;
}

.menu-tipo-opcion--cancelar:hover {
    background-color: var(--color-gris-claro);
    color:            var(--color-oscuro-principal);
    border-color:     var(--color-borde-claro);
}

/* Selector de columnas en barra de bloque */
.selector-columnas {
    padding:          0.375rem 0.625rem;
    font-size:        var(--tipo-xs);
    font-weight:      500;
    color:            var(--color-gris-oscuro);
    background-color: var(--color-blanco);
    border:           1px solid var(--color-borde-claro);
    border-radius:    var(--radio-sm);
    cursor:           pointer;
    transition:       var(--transicion-base);
}

.selector-columnas:focus {
    border-color: var(--color-corporativo);
    outline:      none;
}

/* Grid dinámico según columnas seleccionadas */
.fila-columnas--1col { grid-template-columns: 1fr; }
.fila-columnas--2col { grid-template-columns: repeat(2, 1fr); }
.fila-columnas--3col { grid-template-columns: repeat(3, 1fr); }

@media screen and (max-width: 768px) {
    .fila-columnas--2col,
    .fila-columnas--3col {
        display:        flex;
        flex-direction: column;
    }
}


/* ============================================================
   PUNTO 15 — RENDERIZADOR DE PÁGINAS DINÁMICAS
   ============================================================ */

/* --- Hero de página dinámica (personalizable: color o imagen) --- */
.pagina-dinamica-hero {
    position:         relative;
    background-color: #004F71; /* fallback si no hay estilo inline */
    padding:          0;
    min-height:       var(--cab-alto, auto);
    display:          flex;
    flex-direction:   column;
}

.pagina-dinamica-hero-video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    z-index:    0;
}

.pagina-dinamica-hero-velo {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        0;
}

.pagina-dinamica-hero-overlay {
    position: relative;
    z-index:  1;
    width:    100%;
    flex:     1;
    display:        flex;
    flex-direction: column;
}

.pagina-dinamica-hero-overlay {
    padding-top:    var(--espacio-lg);
    padding-bottom: var(--espacio-md);
}

.pagina-dinamica-hero-overlay .contenedor {
    display:        flex;
    flex-direction: column;
    flex:           1;
    width:          100%;
}

/* Las migas se quedan fijas arriba; título y subtítulo se centran
   juntos en el espacio que quede libre debajo (aunque la cabecera
   tenga una altura configurada mayor que su contenido) */
.pagina-dinamica-hero-textos {
    margin-top:    auto;
    margin-bottom: auto;
}

/* Posición vertical "abajo": el bloque de texto se pega al fondo
   de la cabecera en vez de quedar centrado en el espacio libre */
.pagina-dinamica-hero-textos--abajo {
    margin-bottom: 0;
}

/* El oscurecimiento sobre la imagen ahora lo controla por completo
   el "velo" configurable (.pagina-dinamica-hero-velo, con su propio
   color y opacidad elegidos en el editor) — ver más arriba. Antes
   había aquí una regla adicional que oscurecía solo el bloque de
   texto (no toda la cabecera), y al convivir con el velo nuevo
   creaba una franja más oscura justo detrás del título y el resto
   de la imagen con menos tinte. Se ha quitado esa regla.
*/

.pagina-dinamica-titulo {
    font-size:      var(--cab-tam-titulo, var(--tipo-3xl));
    font-weight:    700;
    color:          var(--cab-color-titulo, var(--color-blanco));
    letter-spacing: -0.02em;
    line-height:    1.1;
    margin-bottom:  var(--espacio-sm);
}

.pagina-dinamica-descripcion {
    font-size:   var(--cab-tam-subtitulo, var(--tipo-md));
    color:       var(--cab-color-subtitulo, rgba(255, 255, 255, 0.80));
    line-height: 1.65;
}

.pagina-dinamica-boton {
    display:    inline-flex;
    align-self: flex-start; /* por defecto (alineación izquierda): ancho de su contenido, no todo el ancho */
    margin-top: var(--espacio-sm);
}
.pagina-dinamica-boton:hover {
    filter: brightness(1.08);
}

/* El botón sigue la misma alineación elegida para el texto de la cabecera */
.pagina-dinamica-hero--align-center .pagina-dinamica-boton { align-self: center; }
.pagina-dinamica-hero--align-right  .pagina-dinamica-boton { align-self: flex-end; }

/* Alineación del texto de la cabecera */
.pagina-dinamica-hero--align-left   { text-align: left; }
.pagina-dinamica-hero--align-center { text-align: center; }
.pagina-dinamica-hero--align-right  { text-align: right; }

.pagina-dinamica-hero--align-center .pagina-dinamica-descripcion { margin-left: auto; margin-right: auto; }
.pagina-dinamica-hero--align-right  .pagina-dinamica-descripcion { margin-left: auto; }

/* El nombre del cliente (debajo del título) usa flexbox por dentro,
   así que "text-align" heredado no le afecta — necesita su propia
   regla, igual que el botón y las migas de pan. */
.pagina-dinamica-hero--align-center .proyecto-meta-hero { justify-content: center; }
.pagina-dinamica-hero--align-right  .proyecto-meta-hero { justify-content: flex-end; }

/* Migas de pan dentro del hero de página dinámica */
.pagina-dinamica-hero .proyecto-migas {
    color:         var(--cab-color-migas, rgba(255, 255, 255, 0.70));
    margin-bottom: var(--espacio-sm);
}

.pagina-dinamica-hero .proyecto-migas a {
    color:           var(--cab-color-migas, rgba(255, 255, 255, 0.70));
    text-decoration: none;
}

.pagina-dinamica-hero .proyecto-migas a:hover {
    color: #ffffff;
}

.pagina-dinamica-hero--align-center .proyecto-migas { justify-content: center; }
.pagina-dinamica-hero--align-right  .proyecto-migas { justify-content: flex-end; }

/* Migas de pan en el hero de la portada */
.hero-migas {
    color:         rgba(255, 255, 255, 0.70);
    margin-bottom: var(--espacio-sm);
}

/* --- Contenido dinámico --- */
.pagina-dinamica-contenido {
    padding-top:    var(--espacio-lg);
    padding-bottom: var(--espacio-xl);
    background-color: var(--color-fondo-pagina);
}

/* Sin cabecera: el contenido empieza más cerca del menú */
.pagina-dinamica-contenido--sin-cabecera {
    padding-top: var(--espacio-md);
}

/* Con cabecera: la propia cabecera ya deja aire debajo (su
   padding-bottom), así que aquí no hace falta añadir tanto más —
   antes se sumaban los dos espacios y quedaba un hueco enorme */
.pagina-dinamica-contenido--con-cabecera {
    padding-top: 1.5rem;
}

/* Home: los bloques (Hero, etc.) están diseñados para pegarse
   justo debajo del menú, sin espacio adicional impuesto */
.pagina-dinamica-contenido--home {
    padding-top: 0;
}

.pagina-dinamica-vacia {
    font-size:  var(--tipo-base);
    color:      var(--color-gris-texto);
    text-align: center;
    padding:    var(--espacio-lg) 0;
}

/* --- Filas dinámicas de columnas --- */
.fila-dinamica {
    display:       grid;
    gap:           2rem;
    margin-bottom: var(--espacio-lg);
}

.fila-dinamica:last-child {
    margin-bottom: 0;
}

.columnas-1 { grid-template-columns: 1fr; }
.columnas-2 { grid-template-columns: repeat(2, 1fr); }
.columnas-3 { grid-template-columns: repeat(3, 1fr); }

/* --- Columna individual --- */
.columna-dinamica {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.columna-dinamica-imagen {
    overflow:     hidden;
    border-radius: var(--radio-md);
    aspect-ratio:  16 / 9;
}

.columna-dinamica-imagen img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.columna-dinamica-imagen img:hover {
    transform: scale(1.04);
}

.columna-dinamica-titulo {
    font-size:      var(--tipo-lg);
    font-weight:    700;
    color:          var(--color-oscuro-principal);
    letter-spacing: -0.01em;
    line-height:    1.2;
}

.columna-dinamica-texto {
    font-size:   var(--tipo-base);
    color:       var(--color-gris-texto);
    line-height: 1.75;
}

/* --- Bloque de vídeo --- */
.video-dinamico {
    margin-bottom: var(--espacio-lg);
}

.video-dinamico-wrapper {
    position:       relative;
    width:          100%;
    aspect-ratio:   16 / 9;
    border-radius:  var(--radio-md);
    overflow:       hidden;
    background:     var(--color-oscuro-principal);
}

.video-dinamico-wrapper iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   0;
}

/* --- Página 404 --- */
.error-404-seccion {
    background-color: var(--color-oscuro-secundario);
    min-height:       80vh;
    display:          flex;
    align-items:      center;
}

.error-404-contenedor {
    text-align: center;
    padding:    var(--espacio-xl) 0;
}

.error-404-codigo {
    display:        block;
    font-size:      9rem;
    font-weight:    700;
    color:          var(--color-corporativo);
    line-height:    1;
    margin-bottom:  var(--espacio-sm);
    letter-spacing: -0.04em;
}

.error-404-imagen {
    display:       block;
    max-width:     320px;
    width:         100%;
    height:        auto;
    margin:        0 auto var(--espacio-md);
}

.error-404-titulo {
    font-size:      var(--tipo-2xl);
    font-weight:    700;
    color:          var(--color-blanco);
    margin-bottom:  var(--espacio-sm);
}

.error-404-descripcion {
    font-size:     var(--tipo-base);
    color:         var(--color-gris-texto);
    line-height:   1.75;
    margin-bottom: var(--espacio-lg);
}

/* --- Responsive renderizador --- */
@media screen and (max-width: 1099px) and (min-width: 769px) {
    .columnas-3 { grid-template-columns: repeat(2, 1fr); }
    .pagina-dinamica-titulo { font-size: var(--tipo-2xl); }
}

@media screen and (max-width: 768px) {
    .columnas-2,
    .columnas-3 {
        grid-template-columns: 1fr;
    }
    .pagina-dinamica-titulo { font-size: var(--tipo-xl); }
    .error-404-codigo       { font-size: 6rem; }
    .error-404-titulo       { font-size: var(--tipo-xl); }
}



/* Flecha indicadora dentro del enlace padre */






/* Punto decorativo izquierdo */




.sidebar-subenlace:hover::before {
    background-color: rgba(255, 255, 255, 0.80);
}


/* ============================================================
   PUNTO 16 — ÁRBOL DE CATEGORÍAS
   ============================================================ */

.panel-seccion-bloque {
    background-color: var(--color-blanco);
    border:           1px solid var(--color-borde-claro);
    border-radius:    6px;
    padding:          1.75rem;
    box-shadow:       var(--sombra-suave);
    margin-bottom:    1.5rem;
}

/* Fila de un elemento en listas de gestión libres (Redes sociales,
   Premios y distinciones...): en pantalla ancha va todo en una
   línea (imagen + formulario + botones de mover/eliminar), pero
   sin esta regla, en móvil se aprieta todo en una sola fila
   estrecha sin ajustarse — aquí se apila en columna, ocupando
   todo el ancho disponible. */
.panel-fila-item {
    flex-wrap: wrap;
}

@media screen and (max-width: 640px) {
    .panel-fila-item {
        flex-direction: column;
        align-items:    stretch;
    }
    .panel-fila-item > img {
        align-self: center;
    }
    .panel-fila-item > form {
        flex-direction: column;
        align-items:    stretch;
        width:          100%;
    }
    .panel-fila-item > form input,
    .panel-fila-item > form button,
    .panel-fila-item > form label {
        width: 100%;
    }
    .panel-fila-item > div {
        width:           100%;
        justify-content: space-between;
    }
}

/* Listado de Proyectos/Insights: la tabla (escritorio) y las
   tarjetas (móvil) ya tienen su propio marco y sombra propios —
   envolverlas también en .panel-seccion-bloque duplicaba el
   borde ("tarjeta dentro de otra tarjeta"). Aquí solo hace falta
   el espaciado, sin marco adicional. */
.listado-contenido-seccion {
    margin-bottom: 1.5rem;
}

/* Formulario de categoría en línea */
.formulario-categoria {
    width: 100%;
}

.cat-form-fila {
    display:     flex;
    align-items: flex-end;
    gap:         1rem;
    flex-wrap:   wrap;
}

.cat-form-campo--nombre { flex: 2; min-width: 200px; }
.cat-form-campo--padre  { flex: 1; min-width: 180px; }
.cat-form-campo--btn    { flex-shrink: 0; padding-bottom: 0; }

.cat-form-campo--btn .boton-enviar {
    padding:   0.875rem 1.5rem;
    font-size: var(--tipo-sm);
    align-self: flex-end;
    white-space: nowrap;
}

/* Árbol de categorías */
.cat-fila--raiz td {
    font-weight:      600;
    color:            var(--color-oscuro-principal);
    background-color: var(--color-gris-claro);
}

.cat-fila--hijo td {
    color: var(--color-gris-oscuro);
}

.cat-nombre-texto {
    display:     inline-flex;
    align-items: center;
    gap:         0.375rem;
}

.cat-prefijo {
    color:       var(--color-corporativo);
    font-weight: 700;
    font-size:   var(--tipo-sm);
    flex-shrink: 0;
}

/* Badges de tipo */
.cat-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       0.2rem 0.6rem;
    font-size:     var(--tipo-xs);
    font-weight:   600;
    border-radius: var(--radio-redondo);
    white-space:   nowrap;
}

.cat-badge--principal {
    background-color: rgba(0, 79, 113, 0.10);
    color:            var(--color-corporativo);
}

.cat-badge--sub {
    background-color: rgba(107, 114, 128, 0.10);
    color:            var(--color-gris-texto);
}

/* Badge de tipo en título de sección */
.cat-tipo-badge {
    display:          inline-flex;
    align-items:      center;
    margin-left:      0.75rem;
    padding:          0.2rem 0.75rem;
    font-size:        var(--tipo-sm);
    font-weight:      600;
    background-color: var(--color-corporativo-claro);
    color:            var(--color-corporativo);
    border-radius:    var(--radio-redondo);
    vertical-align:   middle;
}

@media screen and (max-width: 768px) {
    .cat-form-fila {
        flex-direction: column;
        align-items:    stretch;
    }
    .cat-form-campo--nombre,
    .cat-form-campo--padre,
    .cat-form-campo--btn { flex: unset; width: 100%; }
    .cat-form-campo--btn .boton-enviar { width: 100%; }
}


/* ============================================================
   SIDEBAR — REDISEÑO VISUAL PREMIUM
   ============================================================ */

/* Sidebar: fondo azul oscuro con degradado lateral */
.panel-sidebar {
    width:            260px;
    flex-shrink:      0;
    background:       linear-gradient(160deg, #00344D 0%, #004F71 60%, #005F87 100%);
    min-height:       100vh;
    position:         sticky;
    top:              0;
    height:           100vh;
    display:          flex;
    flex-direction:   column;
    overflow-y:       auto;
    box-shadow:       4px 0 24px rgba(0, 0, 0, 0.18);
}

/* Logo */
.sidebar-logo {
    padding:       1.5rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logo-imagen {
    height: var(--logo-panel-alto-escritorio, 36px);
    width:  auto;
    filter: brightness(0) invert(1);
}

/* Perfil de usuario */
.sidebar-usuario {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    padding:       1rem 1.25rem;
    margin:        0.75rem 0.75rem 0.25rem;
    background:    rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    border:        1px solid rgba(255, 255, 255, 0.10);
}

.sidebar-avatar {
    width:            36px;
    height:           36px;
    border-radius:    50%;
    background:       linear-gradient(135deg, #00B4D8, #0077B6);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    box-shadow:       0 2px 8px rgba(0, 0, 0, 0.25);
}

.sidebar-avatar-iniciales {
    font-size:   0.7rem;
    font-weight: 700;
    color:       #ffffff;
}

.sidebar-usuario-nombre {
    font-size:   var(--tipo-sm);
    font-weight: 600;
    color:       #ffffff;
    display:     block;
    line-height: 1.2;
}

.sidebar-usuario-rol {
    font-size: var(--tipo-xs);
    color:     rgba(255, 255, 255, 0.50);
    display:   block;
}

/* Nav principal */
.sidebar-nav {
    flex:    1;
    padding: 0.75rem;
}

.sidebar-menu {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
    list-style:     none;
}

/* Ítem principal */
.sidebar-item {
    display:        flex;
    flex-direction: column;
    border-radius:  8px;
    overflow:       hidden;
}

/* Enlace principal — en mayúsculas */
.sidebar-enlace {
    display:        flex;
    align-items:    center;
    gap:            0.625rem;
    padding:        0.65rem 0.875rem;
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 0.55);
    border-radius:  8px;
    transition:     var(--transicion-base);
    position:       relative;
}

.sidebar-enlace:hover {
    background-color: rgba(255, 255, 255, 0.10);
    color:            #ffffff;
}

/* Ítem ACTIVO */
.sidebar-item--activo > .sidebar-enlace {
    background:   linear-gradient(90deg, rgba(255,255,255,0.20), rgba(255,255,255,0.10));
    color:        #ffffff;
    font-weight:  700;
    border-left:  3px solid #ffffff;
    padding-left: calc(0.875rem - 3px);
    box-shadow:   inset 0 0 0 1px rgba(255,255,255,0.12);
}

.sidebar-icono {
    font-size:   1rem;
    line-height: 1;
    flex-shrink: 0;
    opacity:     0.80;
}

.sidebar-item--activo > .sidebar-enlace .sidebar-icono {
    opacity: 1;
}

/* ---- SUBMENÚS SIEMPRE VISIBLES ---- */

.sidebar-item--grupo {
    display:        flex;
    flex-direction: column;
    border-radius:  8px;
    overflow:       visible;
}

/* Caja de subenlaces */
.subenlaces-panel {
    display:       block;
    list-style:    none;
    margin:        0.125rem 0 0.375rem 0.75rem;
    padding:       0.25rem 0;
    border-left:   2px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 0 6px 6px;
}

/* Cada subenlace — mayúsculas + fondo suave */
.subenlace-panel {
    display:          flex;
    align-items:      center;
    gap:              0.5rem;
    padding:          0.5rem 0.875rem 0.5rem 1rem;
    font-size:        0.625rem;
    font-weight:      600;
    letter-spacing:   0.09em;
    text-transform:   uppercase;
    color:            rgba(255, 255, 255, 0.55);
    border-radius:    6px;
    transition:       var(--transicion-base);
    background-color: rgba(255, 255, 255, 0.05);
    margin-bottom:    2px;
}

/* Punto decorativo */
.subenlace-panel::before {
    content:      '';
    width:        5px;
    height:       5px;
    border-radius: 50%;
    background:   rgba(255, 255, 255, 0.20);
    flex-shrink:  0;
    transition:   var(--transicion-base);
}

.subenlace-panel:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color:            #ffffff;
}

.subenlace-panel:hover::before {
    background: #ffffff;
}

/* Subenlace ACTIVO — marcado al seleccionar */
.subenlace-panel--activo {
    background-color: rgba(255, 255, 255, 0.18) !important;
    color:            #ffffff !important;
    font-weight:      700;
}

.subenlace-panel--activo::before {
    background: #ffffff !important;
}

/* Pie del sidebar */
.sidebar-pie {
    padding:    0.75rem;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-cerrar-sesion {
    display:       flex;
    align-items:   center;
    gap:           0.625rem;
    width:         100%;
    padding:       0.65rem 0.875rem;
    font-size:     var(--tipo-sm);
    font-weight:   500;
    color:         rgba(255, 255, 255, 0.45);
    border-radius: 8px;
    transition:    var(--transicion-base);
}

.sidebar-cerrar-sesion:hover {
    background-color: rgba(220, 38, 38, 0.15);
    color:            #fca5a5;
}

/* Scrollbar del sidebar */
.panel-sidebar::-webkit-scrollbar {
    width: 4px;
}
.panel-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.panel-sidebar::-webkit-scrollbar-thumb {
    background:    rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* Tablet */
@media screen and (max-width: 1099px) and (min-width: 769px) {
    .panel-sidebar { width: 220px; }
}

/* Móvil: sidebar oculto, barra app inferior */
@media screen and (max-width: 768px) {
    .panel-sidebar { display: none; }
}


/* ============================================================
   PUNTO 17 — GESTIÓN DE MENÚS
   ============================================================ */

/* Placeholder icono vacío — cuadrado gris redondeado */
.icono-vacio-placeholder {
    width:            24px;
    height:           24px;
    background-color: #E0E0E0;
    border-radius:    4px;
    display:          inline-block;
    flex-shrink:      0;
}

/* Preview de icono en tabla */
.menu-icono-preview {
    width:         24px;
    height:        24px;
    object-fit:    contain;
    border-radius: 4px;
    display:       block;
}

/* Rejilla del formulario de menú */
.menu-form-rejilla {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.25rem;
    margin-bottom:         1.25rem;
}

.menu-form-activo {
    justify-content: flex-start;
}

.menu-toggle {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    cursor:      pointer;
    font-size:   var(--tipo-sm);
    color:       var(--color-gris-oscuro);
}

.menu-toggle input[type="checkbox"] {
    width:        18px;
    height:       18px;
    accent-color: var(--color-corporativo);
    cursor:       pointer;
}

.menu-form-btn {
    display:         flex;
    justify-content: flex-start;
}

/* Previsualización barra App */
.menu-preview-app {
    margin-top:    1.5rem;
    padding-top:   1.5rem;
    border-top:    1px solid var(--color-borde-claro);
}

.menu-preview-titulo {
    font-size:      var(--tipo-xs);
    font-weight:    600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          var(--color-gris-texto);
    margin-bottom:  0.875rem;
}

.menu-preview-barra {
    display:          flex;
    align-items:      center;
    justify-content:  space-around;
    background-color: var(--color-blanco);
    border:           1px solid var(--color-borde-claro);
    border-radius:    var(--radio-lg);
    padding:          0.875rem 1rem;
    max-width:        420px;
    box-shadow:       var(--sombra-suave);
    gap:              0.5rem;
}

.menu-preview-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.375rem;
    flex:           1;
    text-decoration: none;
}

.menu-preview-icono-img {
    width:         24px;
    height:        24px;
    object-fit:    contain;
}

.menu-preview-nombre {
    font-size:      0.6rem;
    font-weight:    600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          var(--color-gris-texto);
}

@media screen and (max-width: 1099px) and (min-width: 769px) {
    .menu-form-rejilla {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .menu-form-rejilla {
        grid-template-columns: 1fr;
    }
    .menu-form-btn .boton-enviar {
        width: 100%;
    }
}


/* ============================================================
   PUNTO 17 — PREVISUALIZACIÓN MENÚ PC
   ============================================================ */

.menu-preview-pc {
    display:          flex;
    align-items:      center;
    gap:              0.25rem;
    background-color: var(--color-blanco);
    border:           1px solid var(--color-borde-claro);
    border-radius:    var(--radio-lg);
    padding:          0.75rem 1.5rem;
    box-shadow:       var(--sombra-suave);
    flex-wrap:        wrap;
}

.menu-preview-pc-enlace {
    display:       inline-flex;
    align-items:   center;
    gap:           0.4rem;
    padding:       0.5rem 1rem;
    font-size:     var(--tipo-sm);
    font-weight:   500;
    color:         var(--color-gris-oscuro);
    border-radius: var(--radio-md);
    transition:    var(--transicion-base);
    text-decoration: none;
}

.menu-preview-pc-enlace:hover {
    background-color: var(--color-corporativo-suave);
    color:            var(--color-corporativo);
}



/* Icono dentro del enlace de navegación desktop */
.menu-enlace {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.icono-menu-pc {
    width:        18px;
    height:       18px;
    object-fit:   contain;
    flex-shrink:  0;
    display:      block;
}

/* En móvil los iconos del menú principal público no se muestran
   (el menú de escritorio se sustituye por el menú dinámico móvil) */
@media screen and (max-width: 768px) {
    #menu-principal .icono-menu-pc {
        display: none;
    }
}


/* ============================================================
   PUNTO 18 — GALERÍA DE MEDIOS
   ============================================================ */

.galeria-errores-lista {
    margin-top:  0.5rem;
    padding-left: 1.25rem;
    font-size:   var(--tipo-xs);
    opacity:     0.85;
}

/* --- Zona de carga (dropzone) --- */
.galeria-form-subida {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.galeria-dropzone {
    border:           2px dashed var(--color-borde-corporativo);
    border-radius:    6px;
    background-color: var(--color-corporativo-claro);
    padding:          2rem 1.5rem;
    text-align:       center;
    transition:       var(--transicion-base);
    cursor:           pointer;
}

.galeria-dropzone--activo,
.galeria-dropzone:hover {
    border-color:     var(--color-corporativo);
    background-color: rgba(0, 79, 113, 0.08);
}

.galeria-dropzone-interior {
    pointer-events: none;
}

.galeria-dropzone-icono {
    display:     block;
    font-size:   2.5rem;
    color:       var(--color-corporativo);
    margin-bottom: 0.75rem;
    line-height: 1;
}

.galeria-dropzone-texto {
    font-size:     var(--tipo-base);
    color:         var(--color-gris-oscuro);
    margin-bottom: 0.375rem;
}

.galeria-dropzone-label {
    color:          var(--color-corporativo);
    font-weight:    600;
    cursor:         pointer;
    pointer-events: all;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.galeria-dropzone-info {
    font-size: var(--tipo-xs);
    color:     var(--color-gris-texto);
}

.galeria-input-archivo {
    position: absolute;
    width:    1px;
    height:   1px;
    opacity:  0;
    overflow: hidden;
}

/* Preview presubida */
.galeria-preview-presubida {
    display:         flex;
    flex-wrap:       wrap;
    gap:             0.75rem;
    margin-top:      1rem;
    justify-content: flex-start;
    display:         none;
}

.galeria-preview-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.375rem;
    width:          80px;
}

.galeria-preview-thumb {
    width:         80px;
    height:        80px;
    object-fit:    cover;
    border-radius: 6px;
    border:        1px solid var(--color-borde-claro);
}

.galeria-preview-nombre {
    font-size:     0.6rem;
    color:         var(--color-gris-texto);
    text-align:    center;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    max-width:     80px;
}

/* Acciones del formulario */
.galeria-form-acciones {
    display:     flex;
    align-items: center;
    gap:         1rem;
}

.galeria-contador {
    font-size:  var(--tipo-sm);
    color:      var(--color-gris-texto);
    font-style: italic;
}

/* --- Galería vacía --- */
.galeria-vacia {
    text-align: center;
    color:      var(--color-gris-texto);
    padding:    3rem 0;
    font-size:  var(--tipo-base);
}

/* --- Rejilla de imágenes --- */
.galeria-rejilla {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   1rem;
}

/* --- Ítem de galería --- */
.galeria-item {
    display:        flex;
    flex-direction: column;
    border-radius:  6px;
    overflow:       hidden;
    border:         1px solid var(--color-borde-claro);
    background:     var(--color-blanco);
    transition:     var(--transicion-base);
}

.galeria-item:hover {
    border-color: var(--color-borde-corporativo);
    box-shadow:   var(--sombra-media);
}

/* Miniatura cuadrada */
.galeria-item-imagen {
    position:    relative;
    aspect-ratio: 1 / 1;
    overflow:    hidden;
    background:  var(--color-gris-claro);
}

.galeria-thumb {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.35s ease;
    display:    block;
}

.galeria-item:hover .galeria-thumb {
    transform: scale(1.04);
}

/* Overlay con botones */
.galeria-item-overlay {
    position:         absolute;
    inset:            0;
    background:       rgba(0, 0, 0, 0.55);
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              0.5rem;
    opacity:          0;
    transition:       opacity 0.25s ease;
    backdrop-filter:  blur(2px);
}

.galeria-item-imagen:hover .galeria-item-overlay {
    opacity: 1;
}

/* Botones del overlay */
.galeria-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          0.4rem 0.875rem;
    font-size:        var(--tipo-xs);
    font-weight:      600;
    border-radius:    6px;
    cursor:           pointer;
    transition:       var(--transicion-base);
    border:           none;
    white-space:      nowrap;
    letter-spacing:   0.04em;
}

.galeria-btn--copiar {
    background-color: rgba(255, 255, 255, 0.90);
    color:            var(--color-oscuro-principal);
}

.galeria-btn--copiar:hover,
.galeria-btn--copiada {
    background-color: var(--color-corporativo);
    color:            #ffffff;
}

.galeria-btn--eliminar {
    background-color: rgba(220, 38, 38, 0.80);
    color:            #ffffff;
}

.galeria-btn--eliminar:hover {
    background-color: #DC2626;
}

/* Info de la imagen */
.galeria-item-info {
    padding: 0.625rem 0.75rem;
}

.galeria-item-nombre {
    font-size:     var(--tipo-xs);
    font-weight:   500;
    color:         var(--color-oscuro-principal);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}

.galeria-item-meta {
    font-size: 0.625rem;
    color:     var(--color-gris-texto);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.galeria-item-alt-form {
    margin-top: 0.5rem;
}

.galeria-item-alt-label {
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
    font-size:      0.625rem;
    font-weight:    600;
    color:          var(--color-gris-texto);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom:  0.25rem;
}

.galeria-item-alt-pendiente {
    color:       #b45309;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}

.galeria-item-alt-input {
    width:         100%;
    font-size:     0.75rem;
    padding:       0.35rem 0.5rem;
    border:        1px solid var(--color-borde-claro);
    border-radius: 4px;
}

/* Responsive */
@media screen and (max-width: 1099px) and (min-width: 769px) {
    .galeria-rejilla {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media screen and (max-width: 768px) {
    .galeria-rejilla {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.75rem;
    }
    .galeria-dropzone { padding: 1.5rem 1rem; }
    .galeria-form-acciones { flex-direction: column; align-items: stretch; }
    .galeria-form-acciones .boton-enviar { width: 100%; }
}


/* ============================================================
   MENÚ MÓVIL DINÁMICO (menus_movil) vs MENÚ ESTÁTICO
   Cuando existe .menu-movil-dinamico, el #menu-principal
   se oculta en móvil y la barra dinámica toma su lugar.
   ============================================================ */

/* Desktop y tablet (desde 769px): menú dinámico móvil invisible */
@media screen and (min-width: 769px) {
    .menu-movil-dinamico {
        display: none !important;
    }
}

/* Móvil (hasta 768px): ocultar menú principal estático,
   mostrar barra dinámica de menus_movil */
@media screen and (max-width: 768px) {

    /* Ocultar el nav estático cuando existe el dinámico */
    body:has(.menu-movil-dinamico) #menu-principal {
        display: none !important;
    }

    /* Barra dinámica: altura automática para no cortar texto */
    .menu-movil-dinamico {
        display:          block;
        position:         fixed;
        bottom:           0;
        left:             0;
        width:            100%;
        min-height:       var(--altura-barra-app);
        height:           auto;
        z-index:          1000;
        background-color: var(--color-blanco);
        border-top:       1px solid var(--color-borde-claro);
        box-shadow:       var(--sombra-barra-app);
        padding-bottom:   env(safe-area-inset-bottom, 0px);
    }

    .menu-movil-dinamico .menu-lista {
        display:         flex;
        align-items:     stretch;
        justify-content: space-around;
        gap:             0;
        height:          100%;
        width:           100%;
    }

    .menu-movil-dinamico .menu-item {
        flex:    1;
        display: flex;
    }

    .menu-movil-dinamico .menu-enlace {
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        flex:            1;
        gap:             0.2rem;
        padding:         0.5rem 0.25rem 0.5rem;
        font-size:       0.6rem;
        font-weight:     600;
        letter-spacing:  0.05em;
        color:           var(--color-gris-texto);
        border-radius:   0;
        text-transform:  uppercase;
        transition:      var(--transicion-base);
        background-color: transparent;
        overflow:        visible;
        white-space:     nowrap;
    }

    .menu-movil-dinamico .menu-etiqueta {
        display:     block;
        line-height: 1.1;
        overflow:    visible;
        white-space: nowrap;
    }

    .menu-movil-dinamico .menu-enlace::after {
        display: none;
    }

    .menu-movil-dinamico .menu-enlace:hover,
    .menu-movil-dinamico .menu-enlace:active {
        color:            var(--color-corporativo);
        background-color: var(--color-corporativo-claro);
    }

    .menu-movil-dinamico .menu-icono {
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           22px;
        height:          22px;
        line-height:     1;
        flex-shrink:     0;
    }

    .menu-movil-dinamico .menu-icono img {
        width:      22px;
        height:     22px;
        object-fit: contain;
        display:    block;
    }
}

/* Fila en edición en tablas del panel */
.tabla-fila--editando {
    background-color: var(--color-corporativo-claro);
    border-left:      3px solid var(--color-corporativo);
}


/* Icono imagen en barra App móvil pública */
.icono-menu-movil-app {
    width:      22px;
    height:     22px;
    object-fit: contain;
    display:    block;
}

/* Placeholder cuando no hay icono en barra App móvil */
.icono-app-placeholder {
    display:          block;
    width:            22px;
    height:           22px;
    background-color: var(--color-gris-medio);
    border-radius:    4px;
    opacity:          0.35;
    flex-shrink:      0;
}


/* ============================================================
   MENÚ PC PÚBLICO — ICONOS Y ALINEACIÓN
   ============================================================ */

/* Enlace con icono: Flexbox horizontal alineado */
.menu-enlace {
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* Icono subido desde el panel */
.icono-menu-pc {
    width:       18px;
    height:      18px;
    object-fit:  contain;
    flex-shrink: 0;
    display:     block;
}

/* Placeholder gris cuando no hay icono */
.icono-vacio-placeholder {
    width:            18px;
    height:           18px;
    background-color: #E0E0E0;
    border-radius:    4px;
    flex-shrink:      0;
    display:          block;
}

/* En móvil los iconos del menú principal público no se muestran
   (el menú de escritorio se sustituye por el menú dinámico móvil) */
@media screen and (max-width: 768px) {
    #menu-principal .icono-menu-pc,
    #menu-principal .icono-vacio-placeholder {
        display: none;
    }
}



/* ============================================================
   EDITOR DE PROYECTOS
   ============================================================ */

.proyecto-meta-rejilla {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.25rem;
}

/* Selector de imagen hero */
.proyecto-hero-selector {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.proyecto-hero-preview {
    width:            100%;
    height:           200px;
    background:       var(--color-gris-claro);
    border:           2px dashed var(--color-borde-claro);
    border-radius:    6px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    position:         relative;
    overflow:         hidden;
}

.proyecto-hero-preview img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.hero-placeholder-texto {
    color:     var(--color-gris-texto);
    font-size: var(--tipo-sm);
}

.hero-quitar-btn {
    position:         absolute;
    top:              0.5rem;
    right:            0.5rem;
    width:            28px;
    height:           28px;
    background:       rgba(0,0,0,0.60);
    color:            #fff;
    border-radius:    50%;
    font-size:        0.75rem;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       var(--transicion-base);
}

.hero-quitar-btn:hover {
    background: rgba(220, 38, 38, 0.80);
}

/* Grid selector de galería */
.proyecto-galeria-selector {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap:                   0.5rem;
    max-height:            250px;
    overflow-y:            auto;
    border:                1px solid var(--color-borde-claro);
    border-radius:         6px;
    padding:               0.75rem;
    background:            var(--color-gris-claro);
}

.galeria-selector-item {
    aspect-ratio: 1;
    overflow:     hidden;
    border-radius: 4px;
    cursor:       pointer;
    border:       2px solid transparent;
    transition:   var(--transicion-base);
}

.galeria-selector-item:hover {
    border-color: var(--color-corporativo);
}

.galeria-selector-item--activo {
    border-color: var(--color-corporativo);
    box-shadow:   0 0 0 2px rgba(0,79,113,0.25);
}

.galeria-selector-item img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.galeria-paginacion {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             0.375rem;
    padding:         0.75rem 1rem;
    border-top:      1px solid var(--color-borde-claro);
    flex-shrink:     0;
}

.galeria-paginacion-btn {
    min-width:     32px;
    height:        32px;
    padding:       0 0.5rem;
    border:        1px solid var(--color-borde-claro);
    border-radius: 6px;
    background:    #fff;
    color:         var(--color-oscuro-principal);
    font-size:     var(--tipo-sm);
    font-weight:   600;
    cursor:        pointer;
    transition:    var(--transicion-base);
}

.galeria-paginacion-btn:hover {
    border-color: var(--color-corporativo);
}

.galeria-paginacion-btn.activo {
    background:   var(--color-corporativo);
    border-color: var(--color-corporativo);
    color:        #fff;
}

/* Responsive editor */
@media screen and (max-width: 1099px) and (min-width: 769px) {
    .proyecto-meta-rejilla {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .proyecto-meta-rejilla {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   SLUG EDITABLE
   ============================================================ */

.slug-contenedor {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    background:  var(--color-gris-claro);
    border:      1px solid var(--color-borde-claro);
    border-radius: 6px;
    padding:     0.5rem 0.75rem;
}

.slug-prefijo {
    font-size:   var(--tipo-sm);
    color:       var(--color-gris-texto);
    white-space: nowrap;
    flex-shrink: 0;
}

.slug-input {
    flex:        1;
    border:      none !important;
    background:  transparent !important;
    padding:     0 !important;
    font-family: monospace;
    font-size:   var(--tipo-sm);
    color:       var(--color-corporativo);
    box-shadow:  none !important;
}

.slug-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.slug-regenerar {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--color-gris-texto);
    font-size:   1rem;
    padding:     0.25rem;
    transition:  var(--transicion-base);
    flex-shrink: 0;
}

.slug-regenerar:hover {
    color: var(--color-corporativo);
    transform: rotate(180deg);
}


/* ============================================================
   CONFIGURACIÓN — TIPOGRAFÍAS
   ============================================================ */

.tipografias-opciones {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   1rem;
}

.tipografia-opcion {
    display:          flex;
    flex-direction:   column;
    gap:              0.75rem;
    padding:          1.25rem;
    border:           2px solid var(--color-borde-claro);
    border-radius:    6px;
    cursor:           pointer;
    transition:       var(--transicion-base);
    background:       var(--color-blanco);
}

.tipografia-opcion input[type="radio"] {
    display: none;
}

.tipografia-opcion:hover {
    border-color: var(--color-borde-corporativo);
    background:   var(--color-corporativo-claro);
}

.tipografia-opcion--activa {
    border-color:     var(--color-corporativo) !important;
    background:       var(--color-corporativo-claro) !important;
    box-shadow:       0 0 0 3px rgba(0, 79, 113, 0.15);
}

.tipografia-muestra {
    display:        flex;
    align-items:    baseline;
    gap:            1rem;
    padding-bottom: 0.75rem;
    border-bottom:  1px solid var(--color-borde-claro);
}

.tipografia-nombre-fuente {
    font-size:   3rem;
    line-height: 1;
    color:       var(--color-oscuro-principal);
    flex-shrink: 0;
}

.tipografia-texto-muestra {
    font-size:   1rem;
    color:       var(--color-gris-oscuro);
    line-height: 1.4;
}

.tipografia-info {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.tipografia-nombre {
    font-size:   var(--tipo-sm);
    font-weight: 700;
    color:       var(--color-oscuro-principal);
}

.tipografia-desc {
    font-size: var(--tipo-xs);
    color:     var(--color-gris-texto);
}

/* Preview zona */
.tipografia-preview-zona {
    background:    var(--color-gris-claro);
    border-radius: 6px;
    padding:       2rem;
    border:        1px solid var(--color-borde-claro);
}

.preview-menu {
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    color:          var(--color-gris-texto);
    margin-bottom:  1.5rem;
    text-transform: uppercase;
}

.preview-h1 {
    font-size:      2.5rem;
    font-weight:    700;
    color:          var(--color-oscuro-principal);
    margin-bottom:  0.75rem;
    line-height:    1.1;
}

.preview-h2 {
    font-size:      1.5rem;
    font-weight:    600;
    color:          var(--color-corporativo);
    margin-bottom:  1rem;
    line-height:    1.2;
}

.preview-p {
    font-size:   1rem;
    line-height: 1.75;
    color:       var(--color-gris-oscuro);
    max-width:   600px;
}

@media screen and (max-width: 768px) {
    .tipografias-opciones {
        grid-template-columns: 1fr;
    }
    .tipografia-nombre-fuente {
        font-size: 2rem;
    }
}


/* ============================================================
   CONFIGURACIÓN — BOTONES
   ============================================================ */

.btn-config-bloque {
    margin-bottom: 1.5rem;
}

.btn-config-cabecera {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             2rem;
    margin-bottom:   1.5rem;
    flex-wrap:       wrap;
}

.btn-preview-zona {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       200px;
    min-height:      80px;
    background:      var(--color-gris-claro);
    border:          1px solid var(--color-borde-claro);
    border-radius:   6px;
    padding:         1.25rem 1.5rem;
}

.btn-config-rejilla {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.25rem;
}

/* Color picker */
.color-picker-grupo {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-wrap:   wrap;
}

.color-picker {
    width:         48px;
    height:        40px;
    padding:       2px;
    border:        1px solid var(--color-borde-claro);
    border-radius: 6px;
    cursor:        pointer;
    background:    none;
}

.color-transparente {
    display:     flex;
    align-items: center;
    gap:         0.375rem;
    font-size:   var(--tipo-xs);
    color:       var(--color-gris-texto);
    cursor:      pointer;
    white-space: nowrap;
}

/* Slider de radio */
.radio-slider-grupo {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.radio-slider-grupo input[type="range"] {
    flex:         1;
    accent-color: var(--color-corporativo);
}

/* Preview conjunto */
.btn-preview-conjunto {
    display:         flex;
    align-items:     center;
    gap:             1.25rem;
    flex-wrap:       wrap;
    padding:         2rem;
    background:      var(--color-gris-claro);
    border:          1px solid var(--color-borde-claro);
    border-radius:   6px;
}

@media screen and (max-width: 1099px) and (min-width: 769px) {
    .btn-config-rejilla {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .btn-config-rejilla {
        grid-template-columns: 1fr;
    }
    .btn-config-cabecera {
        flex-direction: column;
    }
    .btn-preview-zona {
        width: 100%;
    }
}


/* ============================================================
   CONSTRUCTOR DE BLOQUES
   ============================================================ */

/* Zona principal */
#constructor-zona {
    display:        flex;
    flex-direction: column;
    gap:            0;
    min-height:     300px;
}

/* Bloque individual */
.constructor-bloque {
    position:      relative;
    border:        1px solid #D0DDE6;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    transition:    border-color 0.2s, box-shadow 0.2s;
    background:    var(--color-blanco);
    box-shadow:    0 1px 4px rgba(0, 79, 113, 0.06);
}

.constructor-bloque:hover {
    border-color: var(--color-corporativo);
    box-shadow:   0 2px 10px rgba(0, 79, 113, 0.12);
}

.constructor-bloque--arrastrando {
    opacity:    0.4;
    cursor:     grabbing;
}

.constructor-bloque--sobre {
    border-color:     var(--color-corporativo) !important;
    background-color: var(--color-corporativo-claro) !important;
}

/* Cabecera de bloque */
.constructor-bloque-cabecera {
    display:          flex;
    align-items:      center;
    gap:              0.5rem;
    padding:          0.5rem 0.75rem;
    background:       #EEF3F6;
    border-radius:    6px 6px 0 0;
    border-bottom:    2px solid #D0DDE6;
    opacity:          1;
    transition:       background 0.15s;
}

.constructor-bloque:hover .constructor-bloque-cabecera {
    background: #DDE8F0;
}

/* Opciones comunes de bloque: ancho + color de fondo */
.constructor-bloque-opciones {
    display:          flex;
    align-items:      center;
    flex-wrap:        wrap;
    gap:              0.75rem;
    padding:          0.5rem 0.75rem;
    background:       #F8FAFB;
    border-bottom:    1px solid var(--color-borde-claro);
    font-size:        var(--tipo-xs);
}

.constructor-ancho-toggle {
    display: flex;
    gap:     2px;
}

.constructor-ancho-btn {
    padding:        0.3rem 0.625rem;
    font-size:      var(--tipo-xs);
    font-weight:    600;
    color:          var(--color-gris-texto);
    background:     var(--color-blanco);
    border:         1px solid var(--color-borde-claro);
    border-radius:  4px;
    cursor:         pointer;
    transition:     var(--transicion-base);
}

.constructor-ancho-btn:hover {
    background: var(--color-corporativo-claro);
    color:      var(--color-corporativo);
}

.constructor-ancho-btn.activo {
    background:   var(--color-corporativo);
    border-color: var(--color-corporativo);
    color:        #ffffff;
}

.constructor-color-fondo-label {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    color:       var(--color-gris-texto);
    font-weight: 600;
}

.constructor-color-fondo-label input[type="color"] {
    width:         28px;
    height:        24px;
    padding:       0;
    border:        1px solid var(--color-borde-claro);
    border-radius: 4px;
    cursor:        pointer;
}

.constructor-color-fondo-quitar {
    padding:        0.3rem 0.625rem;
    font-size:      var(--tipo-xs);
    font-weight:    600;
    color:          var(--color-gris-texto);
    background:     var(--color-blanco);
    border:         1px solid var(--color-borde-claro);
    border-radius:  4px;
    cursor:         pointer;
    transition:     var(--transicion-base);
}

.constructor-color-fondo-quitar:hover {
    background: rgba(220, 38, 38, 0.08);
    color:      #DC2626;
    border-color: rgba(220, 38, 38, 0.3);
}

/* Envoltorios públicos de cada bloque (ancho + color de fondo elegidos) */
.bloque-ancho-completo,
.bloque-ancho-contenido {
    width: 100%;
}

.constructor-drag-handle {
    cursor:      grab;
    color:       var(--color-corporativo);
    font-size:   1rem;
    padding:     0 0.25rem;
    flex-shrink: 0;
    opacity:     0.6;
}
.constructor-drag-handle:hover { opacity: 1; }

.constructor-drag-handle:active {
    cursor: grabbing;
}

.constructor-tipo-label {
    font-size:      var(--tipo-xs);
    font-weight:    700;
    color:          var(--color-corporativo);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex:           1;
}

.constructor-acciones {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.25rem;
    justify-content: flex-end;
}

.constructor-btn-accion {
    width:         28px;
    height:        28px;
    border:        none;
    background:    transparent;
    border-radius: 4px;
    cursor:        pointer;
    color:         var(--color-gris-texto);
    font-size:     0.8rem;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    var(--transicion-base);
}

.constructor-btn-accion:hover {
    background: rgba(0, 79, 113, 0.10);
    color:      var(--color-corporativo);
}

.constructor-btn-accion:disabled {
    opacity: 0.3;
    cursor:  default;
}

.constructor-btn-eliminar:hover {
    background: rgba(220, 38, 38, 0.10) !important;
    color:      #DC2626 !important;
}

/* Cuerpo de bloque */
.constructor-bloque-cuerpo {
    padding: 1rem 1.25rem 1.25rem;
}

/* Botones añadir bloque */
.constructor-add-entre {
    text-align: center;
    padding:    0.375rem 0;
    opacity:    1;
}

.constructor-btn-add-entre {
    font-size:     var(--tipo-xs);
    color:         var(--color-corporativo);
    border:        1px dashed var(--color-borde-corporativo);
    border-radius: var(--radio-redondo);
    padding:       0.25rem 1rem;
    background:    transparent;
    cursor:        pointer;
    transition:    var(--transicion-base);
}

.constructor-btn-add-entre:hover {
    background: var(--color-corporativo-claro);
}

.constructor-add-final {
    text-align:  center;
    padding:     2rem 0 1rem;
    border-top:  2px dashed #D0DDE6;
    margin-top:  0.75rem;
}

.constructor-btn-add {
    font-size:     var(--tipo-sm);
    font-weight:   700;
    color:         var(--color-corporativo);
    border:        2px dashed #7AAFC4;
    border-radius: var(--radio-redondo);
    padding:       0.875rem 2.5rem;
    background:    #F0F7FB;
    cursor:        pointer;
    transition:    var(--transicion-base);
    letter-spacing: 0.04em;
}

.constructor-btn-add:hover {
    background:   var(--color-corporativo-claro);
    border-color: var(--color-corporativo);
    box-shadow:   0 2px 8px rgba(0, 79, 113, 0.12);
}

/* ---- Menú de tipos de bloque ---- */
.constructor-menu-bloques {
    position:      fixed;
    z-index:       9999;
    background:    var(--color-blanco);
    border:        1px solid var(--color-borde-claro);
    border-radius: 8px;
    box-shadow:    0 8px 32px rgba(0, 0, 0, 0.14);
    padding:       0.5rem;
    min-width:     220px;
    display:       flex;
    flex-direction: column;
    max-height:    calc(100vh - 16px);
}

.constructor-menu-bloques-rejilla {
    display:       grid;
    grid-template-columns: 1fr 1fr;
    gap:           0.25rem;
    overflow-y:    auto;
}

.constructor-menu-item {
    display:       flex;
    align-items:   center;
    gap:           0.625rem;
    padding:       0.625rem 0.875rem;
    border:        none;
    background:    transparent;
    border-radius: 6px;
    cursor:        pointer;
    text-align:    left;
    transition:    var(--transicion-base);
    width:         100%;
}

.constructor-menu-item:hover {
    background: var(--color-corporativo-claro);
    color:      var(--color-corporativo);
}

.constructor-menu-icono {
    font-size:   1.1rem;
    flex-shrink: 0;
}

.constructor-menu-label {
    font-size:  var(--tipo-sm);
    font-weight: 500;
}

.constructor-menu-cerrar {
    border:      none;
    background:  transparent;
    cursor:      pointer;
    color:       var(--color-gris-texto);
    font-size:   var(--tipo-xs);
    padding:     0.375rem;
    border-top:  1px solid var(--color-borde-claro);
    margin-top:  0.25rem;
    width:       100%;
    text-align:  center;
    flex-shrink: 0;
}

/* ---- Barra de formato flotante ---- */
.constructor-barra-formato {
    position:      fixed;
    z-index:       9998;
    display:       flex;
    align-items:   center;
    gap:           2px;
    background:    var(--color-oscuro-principal);
    border-radius: 6px;
    padding:       0.375rem 0.5rem;
    box-shadow:    0 4px 16px rgba(0, 0, 0, 0.25);
    opacity:       0;
    transition:    opacity 0.15s;
    pointer-events: none;
    flex-wrap:     wrap;
    max-width:     360px;
}

.constructor-barra-formato[style*="opacity: 1"],
.constructor-barra-formato[style*="opacity:1"] {
    pointer-events: all;
}

.barra-btn {
    width:         30px;
    height:        28px;
    border:        none;
    background:    transparent;
    border-radius: 4px;
    cursor:        pointer;
    color:         rgba(255, 255, 255, 0.80);
    font-size:     0.8rem;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background 0.15s;
}

.barra-btn:hover,
.barra-btn.activo {
    background: rgba(255, 255, 255, 0.18);
    color:      #ffffff;
}

.barra-sep {
    width:        1px;
    height:       18px;
    background:   rgba(255, 255, 255, 0.20);
    margin:       0 2px;
    flex-shrink:  0;
}

/* ---- Bloque texto ---- */
.constructor-nivel-selector {
    display:       flex;
    gap:           0.25rem;
    margin-bottom: 0.5rem;
    flex-wrap:     wrap;
}

.constructor-nivel-btn {
    padding:       0.25rem 0.625rem;
    font-size:     var(--tipo-xs);
    border:        1px solid var(--color-borde-claro);
    border-radius: var(--radio-redondo);
    background:    transparent;
    cursor:        pointer;
    transition:    var(--transicion-base);
    color:         var(--color-gris-texto);
}

.constructor-nivel-btn.activo,
.constructor-nivel-btn:hover {
    background:   var(--color-corporativo);
    border-color: var(--color-corporativo);
    color:        #ffffff;
}

.constructor-texto-editable {
    width:          100%;
    min-height:     48px;
    outline:        none;
    line-height:    1.7;
    color:          var(--color-oscuro-principal);
    caret-color:    var(--color-corporativo);
    word-break:     break-word;
    white-space:    pre-wrap;
}

.constructor-texto-editable ul { list-style: disc;    margin: 0.5em 0 0.5em 1.5em; }
.constructor-texto-editable ul ul { list-style: circle; margin-top: 0.3em; }
.constructor-texto-editable ul ul ul { list-style: square; }
.constructor-texto-editable ol ol { list-style: lower-alpha; margin-top: 0.3em; }
.constructor-texto-editable ol ol ol { list-style: lower-roman; }
.constructor-texto-editable ol { list-style: decimal; margin: 0.5em 0 0.5em 1.5em; }
.constructor-texto-editable li { display: list-item; margin-bottom: 0.3em; }
.constructor-texto-editable a  { color: var(--color-corporativo); text-decoration: underline; }

/* Cuando el propio campo editable ES un título (h1-h4), no solo
   cuando hay uno anidado dentro de un párrafo normal — para que el
   tamaño se vea en el editor igual que se verá en la web pública. */
h1.constructor-texto-editable { font-size: 2.25rem; font-weight: 700; }
h2.constructor-texto-editable { font-size: 1.75rem; font-weight: 700; }
h3.constructor-texto-editable { font-size: 1.35rem; font-weight: 600; }
h4.constructor-texto-editable { font-size: 1.1rem;  font-weight: 600; }

.constructor-texto-editable:empty::before {
    content:  attr(data-placeholder);
    color:    var(--color-gris-texto);
    opacity:  0.6;
    pointer-events: none;
}

.constructor-texto-editable h1 { font-size: 2rem;   font-weight: 700; margin: 0.5rem 0; }
.constructor-texto-editable h2 { font-size: 1.5rem;  font-weight: 600; margin: 0.5rem 0; }
.constructor-texto-editable h3 { font-size: 1.25rem; font-weight: 600; margin: 0.5rem 0; }
.constructor-texto-editable h4 { font-size: 1.1rem;  font-weight: 600; margin: 0.5rem 0; }

/* ---- Bloque imagen ---- */
.constructor-imagen-vacia {
    border:           2px dashed var(--color-borde-claro);
    border-radius:    6px;
    padding:          2.5rem 1rem;
    text-align:       center;
    background:       var(--color-gris-claro);
}

.constructor-imagen-opciones-subida {
    display:     flex;
    align-items: center;
    gap:         1rem;
    justify-content: center;
    flex-wrap:   wrap;
}

.constructor-btn-galeria,
.constructor-btn-subir {
    padding:       0.625rem 1.25rem;
    border-radius: var(--radio-md);
    font-size:     var(--tipo-sm);
    font-weight:   600;
    cursor:        pointer;
    transition:    var(--transicion-base);
}

.constructor-btn-galeria {
    background: var(--color-corporativo);
    color:      #ffffff;
    border:     none;
}

.constructor-btn-subir {
    background:  transparent;
    border:      2px solid var(--color-borde-corporativo);
    color:       var(--color-corporativo);
    display:     inline-block;
}

.constructor-btn-galeria:hover { background: var(--color-corporativo-oscuro); }
.constructor-btn-subir:hover   { background: var(--color-corporativo-claro);  }

.constructor-btn-toggle {
    padding:       0.5rem 1rem;
    border-radius: var(--radio-md);
    font-size:     var(--tipo-sm);
    font-weight:   600;
    cursor:        pointer;
    background:    transparent;
    border:        2px solid var(--color-borde-corporativo);
    color:         var(--color-corporativo);
    transition:    var(--transicion-base);
}

.constructor-btn-toggle:hover {
    background: var(--color-corporativo-claro);
}

.constructor-btn-toggle.activo {
    background: var(--color-corporativo);
    color:      #ffffff;
    border-color: var(--color-corporativo);
}

.constructor-o {
    color:     var(--color-gris-texto);
    font-size: var(--tipo-sm);
}

.constructor-imagen-preview {
    position:    relative;
    text-align:  center;
    margin-bottom: 1rem;
}

.constructor-imagen-preview img {
    border-radius: 6px;
    max-width:     100%;
}

.constructor-img-quitar {
    display:       inline-flex;
    align-items:   center;
    gap:           0.375rem;
    margin-top:    0.5rem;
    padding:       0.375rem 0.875rem;
    border:        1px solid var(--color-borde-claro);
    border-radius: var(--radio-redondo);
    font-size:     var(--tipo-xs);
    background:    var(--color-blanco);
    cursor:        pointer;
    color:         var(--color-gris-texto);
    transition:    var(--transicion-base);
}

.constructor-img-quitar:hover {
    border-color: #DC2626;
    color:        #DC2626;
}

.constructor-imagen-opciones {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   0.75rem;
}

/* ---- Bloque vídeo ---- */
.constructor-video-preview {
    margin-top:    0.75rem;
    border-radius: 6px;
    overflow:      hidden;
    aspect-ratio:  16/9;
    background:    var(--color-oscuro-principal);
}

.constructor-video-preview iframe {
    width:  100%;
    height: 100%;
    border: none;
}

.constructor-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          100%;
    color:           rgba(255,255,255,0.40);
    font-size:       var(--tipo-sm);
    padding:         1rem;
    text-align:      center;
}

/* ---- Bloque columnas ---- */
.constructor-col-selector {
    display:       flex;
    gap:           0.5rem;
    margin-bottom: 1rem;
    flex-wrap:     wrap;
}

.constructor-col-btn {
    padding:       0.375rem 0.875rem;
    font-size:     var(--tipo-xs);
    border:        1px solid var(--color-borde-claro);
    border-radius: var(--radio-redondo);
    background:    transparent;
    cursor:        pointer;
    transition:    var(--transicion-base);
    color:         var(--color-gris-texto);
    font-family:   monospace;
}

.constructor-col-btn.activo,
.constructor-col-btn:hover {
    background:   var(--color-corporativo);
    border-color: var(--color-corporativo);
    color:        #ffffff;
}

.constructor-columnas {
    display: grid;
    gap:     1rem;
}

.constructor-columnas--50-50    { grid-template-columns: 1fr 1fr; }
.constructor-columnas--70-30    { grid-template-columns: 7fr 3fr; }
.constructor-columnas--30-70    { grid-template-columns: 3fr 7fr; }
.constructor-columnas--33-33-33 { grid-template-columns: 1fr 1fr 1fr; }
.constructor-columnas--4igual,
.constructor-columnas--8igual,
.constructor-columnas--12igual  { grid-template-columns: repeat(4, 1fr); }
.constructor-columnas--6igual,
.constructor-columnas--9igual   { grid-template-columns: repeat(3, 1fr); }

.constructor-columna {
    border:        1px dashed var(--color-borde-claro);
    border-radius: 4px;
    padding:       0.75rem;
    min-height:    80px;
}

.constructor-col-editable {
    min-height: 60px;
}

/* ---- Bloque cita ---- */
.constructor-cita-preview {
    border-left:    4px solid var(--color-corporativo);
    padding:        1rem 1.5rem;
    background:     var(--color-corporativo-claro);
    border-radius:  0 6px 6px 0;
    margin:         0;
}

.constructor-cita-preview .constructor-texto-editable {
    font-style:  italic;
    color:       var(--color-oscuro-principal);
    min-height:  40px;
    line-height: 1.25;
}

.constructor-cita-autor {
    margin-top:  0.5rem;
    font-size:   var(--tipo-sm);
    font-weight: 600;
    color:       var(--color-corporativo);
    outline:     none;
    min-height:  24px;
}

.constructor-cita-autor:empty::before {
    content: attr(data-placeholder);
    color:   var(--color-gris-texto);
    opacity: 0.6;
    font-weight: 400;
}

/* ---- Bloque botón ---- */
.constructor-boton-config {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   0.75rem;
    margin-bottom:         1rem;
}

.constructor-boton-preview {
    padding:    1rem;
    background: var(--color-gris-claro);
    border-radius: 6px;
    border:     1px solid var(--color-borde-claro);
}

/* ---- Bloque separador ---- */
.sep-preview {
    margin:  1rem 0;
    height:  24px;
    display: flex;
    align-items: center;
}

.sep-linea     { border-top: 1px solid var(--color-borde-claro); }
.sep-doble     { border-top: 3px double var(--color-borde-claro); }
.sep-punteada  { border-top: 1px dashed var(--color-borde-claro); }
.sep-espaciado { height: 48px; }

/* ---- Modal galería ---- */
.constructor-modal-galeria {
    display:          none;
    position:         fixed;
    inset:            0;
    background:       rgba(0, 0, 0, 0.60);
    z-index:          10000;
    align-items:      center;
    justify-content:  center;
    padding:          1rem;
}

.constructor-modal-contenido {
    background:    var(--color-blanco);
    border-radius: 8px;
    width:         min(700px, 100%);
    max-height:    80vh;
    display:       flex;
    flex-direction: column;
    box-shadow:    0 20px 60px rgba(0, 0, 0, 0.25);
}

.constructor-modal-cabecera {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.25rem;
    border-bottom:   1px solid var(--color-borde-claro);
}

.constructor-modal-cabecera h3 {
    font-size:   var(--tipo-lg);
    font-weight: 600;
    color:       var(--color-oscuro-principal);
}

.constructor-modal-cabecera button {
    border:        none;
    background:    transparent;
    font-size:     1.25rem;
    cursor:        pointer;
    color:         var(--color-gris-texto);
    padding:       0.25rem;
}

.constructor-modal-cuerpo {
    padding:    1rem;
    overflow-y: auto;
    flex:       1;
    display:    grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    /* Cada fila mide lo que mide su contenido. Con `auto` (el valor por defecto),
       al haber más miniaturas de las que caben en la altura limitada del cuerpo,
       el navegador comprimía las filas y las miniaturas se solapaban en vez de
       desplazarse. */
    grid-auto-rows: max-content;
    gap:        0.75rem;
    align-content: start;
}

/* Responsive constructor */
@media screen and (max-width: 768px) {
    .constructor-columnas--50-50,
    .constructor-columnas--70-30,
    .constructor-columnas--30-70,
    .constructor-columnas--33-33-33,
    .constructor-columnas--4igual,
    .constructor-columnas--6igual,
    .constructor-columnas--8igual,
    .constructor-columnas--9igual,
    .constructor-columnas--12igual {
        grid-template-columns: 1fr;
    }

    .constructor-boton-config {
        grid-template-columns: 1fr;
    }

    .constructor-imagen-opciones {
        grid-template-columns: 1fr;
    }

    .constructor-menu-bloques {
        left: 1rem !important;
        right: 1rem;
        width: calc(100% - 2rem);
    }

    .constructor-menu-bloques-rejilla {
        grid-template-columns: 1fr 1fr;
    }

    /* Barra de formato fija arriba en móvil */
    .constructor-barra-formato {
        position:   fixed !important;
        top:        auto !important;
        bottom:     0 !important;
        left:       0 !important;
        right:      0 !important;
        width:      100%;
        max-width:  100%;
        border-radius: 0;
        justify-content: center;
        padding:    0.5rem;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
        padding-bottom: env(safe-area-inset-bottom, 0.5rem);
    }
}


/* ============================================================
   EDITOR DE PROYECTO — LAYOUT
   ============================================================ */

/* Fila de 2 columnas iguales */
.editor-fila-2col {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1.25rem;
    align-items:           start;
}

/* Fila de 4 columnas iguales */
.editor-fila-4col {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.25rem;
    align-items:           start;
}

/* Input grande para el título */
.campo-input--grande {
    font-size:   1.125rem !important; /* antes 1.375rem */
    font-weight: 600 !important;
    padding:     0.75rem 1rem !important;
}

/* Texto de ayuda bajo el título de sección */
.panel-campo-ayuda {
    font-size:     var(--tipo-sm);
    color:         var(--color-gris-texto);
    margin-bottom: 0.875rem;
    line-height:   1.5;
}

.panel-campo-ayuda kbd {
    background:    var(--color-gris-claro);
    border:        1px solid var(--color-borde-claro);
    border-radius: 4px;
    padding:       0.1rem 0.375rem;
    font-size:     0.75rem;
    font-family:   monospace;
    color:         var(--color-oscuro-principal);
}

/* Responsive */
@media screen and (max-width: 1099px) and (min-width: 769px) {
    .editor-fila-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .editor-fila-2col,
    .editor-fila-4col {
        grid-template-columns: 1fr;
    }
}

/* Filtros de Auditoría: 3 columnas iguales en escritorio (Tipo de
   acción / Sección / Usuario), 1 columna en móvil — con clase
   propia en vez de un estilo en línea, para que la versión móvil
   de abajo pueda aplicarse (un estilo en línea ganaría siempre a
   cualquier regla en una hoja de estilos externa). */
.filtros-auditoria-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media screen and (max-width: 768px) {
    .filtros-auditoria-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   CONSTRUCTOR — BLOQUES INTERNOS EN COLUMNAS
   ============================================================ */

.constructor-col-cabecera {
    font-size:      var(--tipo-xs);
    font-weight:    700;
    color:          var(--color-corporativo);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:        0.375rem 0.5rem;
    background:     #EEF3F6;
    border-radius:  4px 4px 0 0;
    margin-bottom:  0.5rem;
}

.constructor-col-zona {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    min-height:     80px;
}

.constructor-bloque-interno {
    border:        1px solid #D0DDE6;
    border-radius: 4px;
    background:    var(--color-blanco);
    overflow:      hidden;
}

.constructor-bloque-interno-cab {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          0.3rem 0.5rem;
    background:       #F4F8FA;
    border-bottom:    1px solid #E0EAF0;
}

.constructor-tipo-label-mini {
    font-size:      0.65rem;
    font-weight:    700;
    color:          var(--color-corporativo);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.constructor-acciones-mini {
    display: flex;
    gap:     0.2rem;
}

.constructor-acciones-mini button {
    width:         22px;
    height:        22px;
    border:        none;
    background:    transparent;
    border-radius: 3px;
    cursor:        pointer;
    color:         var(--color-gris-texto);
    font-size:     0.7rem;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    var(--transicion-base);
}

.constructor-acciones-mini button:hover {
    background: rgba(0, 79, 113, 0.10);
    color:      var(--color-corporativo);
}

.constructor-acciones-mini button:disabled {
    opacity: 0.25;
    cursor:  default;
}

.constructor-acciones-mini .constructor-btn-eliminar:hover {
    background: rgba(220, 38, 38, 0.10) !important;
    color:      #DC2626 !important;
}

.constructor-bloque-interno-cuerpo {
    padding: 0.625rem 0.75rem;
}

/* Botón añadir dentro de columna */
.constructor-btn-add-col {
    width:         100%;
    padding:       0.5rem;
    border:        1px dashed #C0D5E0;
    border-radius: 4px;
    background:    #F8FBFD;
    color:         var(--color-corporativo);
    font-size:     var(--tipo-xs);
    font-weight:   600;
    cursor:        pointer;
    transition:    var(--transicion-base);
    text-align:    center;
    margin-top:    0.25rem;
}

.constructor-btn-add-col:hover {
    background:   var(--color-corporativo-claro);
    border-color: var(--color-corporativo);
}


/* ============================================================
   VISTA PÚBLICA DE PROYECTO
   ============================================================ */

.pagina-proyecto {
    background-color: var(--color-blanco);
}

/* Hero con imagen */
.proyecto-hero {
    position:             relative;
    min-height:           45vh;
    max-height:           560px;
    background-size:      cover;
    background-position:  center;
    background-repeat:    no-repeat;
    display:              flex;
    align-items:          flex-end;
}

.proyecto-hero-overlay {
    width:              100%;
    padding:            4rem 0 3rem;
    background:         linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.20) 60%, transparent 100%);
}

.proyecto-titulo-hero {
    font-size:      clamp(2rem, 5vw, 3.5rem);
    font-weight:    700;
    color:          #ffffff;
    line-height:    1.1;
    margin-top:     1rem;
    font-family:    var(--fuente-titulos, serif);
}

.proyecto-meta-hero {
    display:     flex;
    gap:         1.5rem;
    margin-top:  0.75rem;
    color:       rgba(255,255,255,0.80);
    font-size:   var(--tipo-sm);
    font-weight: 500;
}

.proyecto-meta-hero a {
    text-decoration:       underline;
    text-underline-offset: 2px;
    transition:            color 0.2s;
}

.proyecto-meta-hero a:hover {
    color: #ffffff;
}

/* Sin hero */
.proyecto-cabecera-simple {
    position:         relative;
    padding:          4rem 0 2rem;
    background-color: var(--color-gris-claro);
    border-bottom:    1px solid var(--color-borde-claro);
}

/* Migas de pan ancladas al borde real de la pantalla (arriba-izquierda),
   ignorando el ancho centrado de .contenedor */
.migas-flotantes {
    position: absolute !important;
    top:      1.5rem;
    left:     1.5rem;
    z-index:  5;
    margin:   0 !important;
}

@media screen and (max-width: 768px) {
    .migas-flotantes {
        top:  1rem;
        left: 1rem;
    }
}

.proyecto-titulo {
    font-size:   clamp(1.75rem, 4vw, 3rem);
    font-weight: 700;
    color:       var(--color-oscuro-principal);
    line-height: 1.15;
    margin-top:  1rem;
}

.proyecto-meta {
    display:     flex;
    gap:         2rem;
    margin-top:  1rem;
    flex-wrap:   wrap;
}

.proyecto-meta-item {
    font-size:  var(--tipo-sm);
    color:      var(--color-gris-texto);
}

/* Migas de pan */
.proyecto-migas {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   var(--tipo-xs);
    flex-wrap:   wrap;
}

/* El último tramo (la página en la que estás) puede ser muy
   largo — se recorta con puntos suspensivos en vez de ocupar
   toda una línea, más estrecho cuanto menor es la pantalla. */
.proyecto-migas [aria-current="page"] {
    display:        inline-block;
    max-width:      320px;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    vertical-align: bottom;
}

@media screen and (max-width: 1099px) {
    .proyecto-migas [aria-current="page"] { max-width: 220px; }
}

@media screen and (max-width: 480px) {
    .proyecto-migas [aria-current="page"] { max-width: 140px; }
}

.proyecto-hero .proyecto-migas {
    color: rgba(255,255,255,0.70);
}

.proyecto-hero .proyecto-migas a {
    color:           rgba(255,255,255,0.70);
    text-decoration: none;
}

.proyecto-hero .proyecto-migas a:hover {
    color: #ffffff;
}

.proyecto-cabecera-simple .proyecto-migas {
    color: var(--color-gris-texto);
}

.proyecto-cabecera-simple .proyecto-migas a {
    color:           var(--color-corporativo);
    text-decoration: none;
}

/* Extracto */
.proyecto-extracto-seccion {
    padding: 2.5rem 0 2rem;
    border-bottom: 1px solid var(--color-borde-claro);
}

.proyecto-extracto-contenedor {
    max-width: var(--ancho-maximo);
    margin:    0 auto;
}

.proyecto-extracto {
    font-size:   1.2rem;
    line-height: 1.75;
    color:       var(--color-gris-oscuro);
    text-align:  center;
}

/* Cuando el contenido va justo después del extracto, no se suma otro padding grande: el bloque
   que abre (índice, texto…) ya trae su propio margen. */
.proyecto-extracto-seccion + .proyecto-contenido { padding-top: 1rem; }

/* Contenido */
.proyecto-contenido {
    padding: 4rem 0;
}

.proyecto-contenido-contenedor {
    max-width: var(--ancho-maximo);
    margin:    0 auto;
}

/* Bloques de contenido */
.proyecto-parrafo {
    font-size:     1rem;
    line-height:   1.8;
    color:         var(--color-gris-oscuro);
    margin-bottom: 1.25rem;
}

.proyecto-parrafo ul, .proyecto-h1 ul, .proyecto-h2 ul, .proyecto-h3 ul, .proyecto-h4 ul {
    list-style: disc;
    margin: 0.75em 0 0.75em 1.5em;
}
.proyecto-parrafo ol, .proyecto-h1 ol, .proyecto-h2 ol, .proyecto-h3 ol, .proyecto-h4 ol {
    list-style: decimal;
    margin: 0.75em 0 0.75em 1.5em;
}
.proyecto-parrafo li, .proyecto-h1 li, .proyecto-h2 li, .proyecto-h3 li, .proyecto-h4 li {
    display: list-item;
    margin-bottom: 0.4em;
    line-height: 1.7;
}

/* Listas anidadas (sub-elementos, creados con Tab): distinto tipo
   de viñeta por nivel para que se distingan visualmente, con
   margen ya de por sí menor por estar dentro de otro <li>. */
.proyecto-parrafo ul ul, .proyecto-h1 ul ul, .proyecto-h2 ul ul, .proyecto-h3 ul ul, .proyecto-h4 ul ul {
    list-style: circle;
    margin-top: 0.4em;
}
.proyecto-parrafo ul ul ul, .proyecto-h1 ul ul ul, .proyecto-h2 ul ul ul, .proyecto-h3 ul ul ul, .proyecto-h4 ul ul ul {
    list-style: square;
}
.proyecto-parrafo ol ol, .proyecto-h1 ol ol, .proyecto-h2 ol ol, .proyecto-h3 ol ol, .proyecto-h4 ol ol {
    list-style: lower-alpha;
    margin-top: 0.4em;
}
.proyecto-parrafo ol ol ol, .proyecto-h1 ol ol ol, .proyecto-h2 ol ol ol, .proyecto-h3 ol ol ol, .proyecto-h4 ol ol ol {
    list-style: lower-roman;
}

.proyecto-parrafo a, .proyecto-h1 a, .proyecto-h2 a, .proyecto-h3 a, .proyecto-h4 a {
    color: var(--color-corporativo);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var(--transicion-base);
}
.proyecto-parrafo a:hover, .proyecto-h1 a:hover, .proyecto-h2 a:hover, .proyecto-h3 a:hover, .proyecto-h4 a:hover {
    color: var(--color-corporativo-oscuro);
}

.proyecto-h1 { font-family: var(--fuente-titulos,serif); font-size: 2.25rem; font-weight: 700; margin: 2.5rem 0 1rem; color: var(--color-oscuro-principal); }
.proyecto-h2 { font-family: var(--fuente-titulos,serif); font-size: 1.75rem; font-weight: 700; margin: 2rem 0 0.875rem; color: var(--color-oscuro-principal); }
.proyecto-h3 { font-family: var(--fuente-titulos,serif); font-size: 1.35rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: var(--color-oscuro-principal); }
.proyecto-h4 { font-family: var(--fuente-titulos,serif); font-size: 1.1rem;  font-weight: 600; margin: 1.25rem 0 0.5rem; color: var(--color-oscuro-principal); }

.proyecto-imagen {
    margin: 2rem auto;
}

.proyecto-imagen img {
    width:         100%;
    border-radius: 6px;
    display:       block;
}

/* ============================================================
   BLOQUE "IMAGEN CON TEXTO" (banner con velo + texto superpuesto)
   ============================================================ */
.imagen-banner {
    position:        relative;
    width:           100%;
    overflow:        hidden;
    display:         flex;
    margin:          2rem 0;
}

.bloque-ancho-contenido .imagen-banner {
    border-radius: 12px;
}

.imagen-banner-img {
    position:      absolute;
    inset:         0;
    width:         100%;
    height:        100%;
    object-fit:    cover;
    object-position: center;
}

.imagen-banner-velo {
    position: absolute;
    inset:    0;
}

.imagen-banner-contenido {
    position:       relative;
    z-index:        2;
    display:        flex;
    flex-direction: column;
    width:          100%;
    padding:        2.5rem;
    gap:             0.5rem;
}

.imagen-banner--align-left   { align-items: flex-start; text-align: left; }
.imagen-banner--align-center { align-items: center;     text-align: center; }
.imagen-banner--align-right  { align-items: flex-end;   text-align: right; }

.imagen-banner--posv-centro { justify-content: center; }
.imagen-banner--posv-abajo  { justify-content: flex-end; }

.imagen-banner-pretitulo {
    display:        block;
    font-weight:    600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    max-width:      640px;
}

.imagen-banner-titulo {
    display:        block;
    font-family:    var(--fuente-titulos, serif);
    font-weight:    700;
    letter-spacing: -0.02em;
    line-height:    1.1;
    margin:         0;
    max-width:      760px;
}

.imagen-banner-descripcion {
    display:     block;
    line-height: 1.6;
    margin:      0;
    max-width:   640px;
}

@media screen and (max-width: 768px) {
    .imagen-banner-contenido {
        padding: 1.5rem;
    }
}

.proyecto-caption {
    font-size:   var(--tipo-sm);
    color:       var(--color-gris-texto);
    text-align:  center;
    margin-top:  0.5rem;
    font-style:  italic;
}

/* ============================================================
   BOTÓN "AMPLIAR" (bloque Imagen, opción configurable) — solo
   se muestra en móvil; en escritorio/tablet no tiene sentido
   (la imagen ya se ve a tamaño completo).
   ============================================================ */
.imagen-boton-ampliar {
    display:         none;
    align-items:     center;
    justify-content: center;
    gap:             0.4rem;
    margin:          0.75rem auto 0;
    padding:         0.5rem 1rem;
    border:          1px solid var(--color-borde-claro);
    border-radius:   999px;
    background:      var(--color-blanco);
    color:           var(--color-oscuro-principal);
    font-size:       var(--tipo-sm);
    font-weight:     600;
    font-family:     inherit;
    cursor:          pointer;
}

.imagen-boton-ampliar svg {
    width:       16px;
    height:      16px;
    flex-shrink: 0;
}

@media screen and (max-width: 768px) {
    .imagen-boton-ampliar { display: inline-flex; }
}

/* Lightbox de imagen a pantalla completa (lo abre el botón de
   arriba) — mismo patrón que .panel-buscar/.panel-menu-desbordado:
   overlay fijo, oculto por opacidad+visibility, clase ".abierto"
   para mostrarlo. Ver js/lightbox-imagen.js. */
.lightbox-imagen {
    position:        fixed;
    inset:           0;
    z-index:         2500;
    background:      rgba(0, 0, 0, 0.9);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1.5rem;
    opacity:         0;
    visibility:      hidden;
    transition:      opacity 0.25s ease, visibility 0.25s ease;
}

.lightbox-imagen.abierto {
    opacity:    1;
    visibility: visible;
}

.lightbox-imagen img {
    max-width:     100%;
    max-height:    100%;
    border-radius: 6px;
    display:       block;
}

.lightbox-imagen__cerrar {
    position:      absolute;
    top:           1rem;
    right:         1rem;
    width:         44px;
    height:        44px;
    border-radius: 50%;
    border:        none;
    background:    rgba(255, 255, 255, 0.15);
    color:         #fff;
    font-size:     1.5rem;
    line-height:   1;
    cursor:        pointer;
}

.proyecto-video {
    margin:        2rem 0;
    aspect-ratio:  16/9;
    border-radius: 6px;
    overflow:      hidden;
}

.proyecto-video iframe {
    width:  100%;
    height: 100%;
    border: none;
}

/* Columnas */
.proyecto-columnas {
    display: grid;
    gap:     2rem;
    margin:  2rem 0;
}

.col-50-50    { grid-template-columns: 1fr 1fr; }
.col-70-30    { grid-template-columns: 7fr 3fr; }
.col-30-70    { grid-template-columns: 3fr 7fr; }
.col-33-33-33 { grid-template-columns: 1fr 1fr 1fr; }

/* Módulos de columnas iguales (4, 8 ó 12 bloques) — la rejilla
   fija de 4 columnas reparte automáticamente los bloques en filas:
   4 bloques = 1 fila, 8 = 2 filas, 12 = 3 filas */
.col-4igual,
.col-8igual,
.col-12igual { grid-template-columns: repeat(4, 1fr); }
.col-6igual,
.col-9igual  { grid-template-columns: repeat(3, 1fr); }

.proyecto-columna { min-width: 0; }

/* Índice de contenidos automático */
.proyecto-h2, .proyecto-h3, .proyecto-h4 {
    scroll-margin-top: calc(var(--altura-cabecera) + var(--altura-barra-superior, 0px) + 1.5rem);
}

.proyecto-indice {
    border: 1px solid var(--color-borde-claro);
    background: var(--color-gris-claro);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
}

.proyecto-indice .indice-titulo {
    font-weight:   700;
    font-size:     var(--tipo-base);
    margin:        0 0 0.75rem;
    color:         var(--color-oscuro-principal);
    cursor:        default;
}

details.proyecto-indice .indice-titulo {
    cursor: pointer;
    list-style: none;
}
details.proyecto-indice .indice-titulo::-webkit-details-marker { display: none; }
details.proyecto-indice .indice-titulo::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.15s ease;
}
details[open].proyecto-indice .indice-titulo::before {
    transform: rotate(90deg);
}

.indice-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.indice-item a {
    text-transform: none;
    color: var(--color-corporativo);
    text-decoration: none;
    font-size: var(--tipo-sm);
    line-height: 1.4;
    display: inline-block;
}
.indice-item a:hover {
    text-decoration: underline;
}

/* Jerarquía visual: H3 y H4 se sangran respecto a H2 */
.indice-item--h2 { margin-left: 0; font-weight: 600; }
.indice-item--h3 { margin-left: 1.25rem; }
.indice-item--h4 { margin-left: 2.5rem; font-size: var(--tipo-xs); opacity: 0.85; }

.proyecto-cita {
    border-left:    4px solid var(--color-corporativo);
    padding:        1.25rem 1.75rem;
    margin:         2rem 0;
    background:     var(--color-corporativo-claro);
    border-radius:  0 6px 6px 0;
    font-size:      1.1rem;
    font-style:     italic;
    color:          var(--color-oscuro-principal);
    line-height:    1.7;
}

.proyecto-cita cite {
    display:     block;
    margin-top:  0.75rem;
    font-size:   var(--tipo-sm);
    font-weight: 600;
    font-style:  normal;
    color:       var(--color-corporativo);
}

.proyecto-espaciador {
    width: 100%;
}

/* Reseñas de Google */
.proyecto-resenas {
    margin: 2rem 0;
}

.resenas-resumen {
    text-align: center;
    margin-bottom: 2rem;
}
.resenas-resumen-titulo {
    font-size:      var(--tipo-xl);
    font-weight:    800;
    letter-spacing: 0.02em;
    margin:         0 0 0.5rem;
    color:          var(--color-oscuro-principal);
}
.resenas-resumen-estrellas {
    color:     #f5b400;
    font-size: 2rem;
    letter-spacing: 0.15em;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.resenas-resumen-total {
    color: var(--color-gris-texto);
    margin: 0 0 0.75rem;
}
.resenas-resumen-logo {
    display: inline-flex;
}

.resenas-boton-wrap {
    display:         flex;
    justify-content: center;
    margin-top:      2rem;
}

.resenas-carrusel {
    display:                    flex;
    gap:                        1.25rem;
    overflow-x:                 auto;
    scroll-snap-type:           x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom:             0.75rem;
}
.resenas-carrusel::-webkit-scrollbar {
    height: 6px;
}
.resenas-carrusel::-webkit-scrollbar-thumb {
    background: var(--color-borde-claro);
    border-radius: 999px;
}

.resena-tarjeta {
    flex:            0 0 280px;
    scroll-snap-align: start;
    border:          1px solid var(--color-borde-claro);
    border-radius:   12px;
    padding:         1.25rem;
    background:      #fff;
}

.resena-cabecera {
    display:      flex;
    align-items:  center;
    gap:          0.75rem;
    margin-bottom: 0.75rem;
}

.resena-avatar {
    width:         44px;
    height:        44px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
}
.resena-avatar--inicial {
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    font-weight:     700;
    font-size:       var(--tipo-base);
}

.resena-autor-info {
    display:        flex;
    flex-direction: column;
    flex:           1;
    min-width:      0;
}
.resena-autor-info strong {
    font-size:     var(--tipo-sm);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.resena-fecha {
    font-size: var(--tipo-xs);
    color:     var(--color-gris-texto);
}

.resena-logo-google {
    flex-shrink: 0;
}

.resena-estrellas {
    color:         #f5b400;
    letter-spacing: 0.1em;
    margin-bottom: 0.6rem;
}
.resena-verificado {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           16px;
    height:          16px;
    border-radius:   50%;
    background:      #1a73e8;
    color:           #fff;
    font-size:       10px;
    vertical-align:  middle;
}

.resena-texto {
    font-size:   var(--tipo-sm);
    line-height: 1.6;
    color:       var(--color-oscuro-principal);
    margin:      0;
    display:         -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

@media screen and (max-width: 768px) {
    .resena-tarjeta {
        flex-basis: 82%;
    }
}

.proyecto-cabecera-seccion {
    margin: 2rem 0;
}
.proyecto-cabecera-seccion-pretitulo {
    font-weight:    600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin:         0 0 0.6rem;
}
.proyecto-cabecera-seccion-titulo {
    font-weight:    700;
    letter-spacing: -0.02em;
    line-height:    1.1;
    margin:         0 0 0.5rem;
}
.proyecto-cabecera-seccion-descripcion {
    line-height: 1.6;
    margin:      0;
}

/* --- Cabecera de sección con vídeo de fondo --- */
.proyecto-cabecera-seccion--video {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    border-radius:   var(--radio-md, 8px);
    padding:         2.5rem;
}

.proyecto-cabecera-seccion-video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    z-index:    0;
}

.proyecto-cabecera-seccion-velo {
    position: absolute;
    inset:    0;
    z-index:  1;
}

.proyecto-cabecera-seccion-contenido {
    position: relative;
    z-index:  2;
    max-width: 900px;
}

.proyecto-separador {
    border: none;
    border-top: 1px solid var(--color-borde-claro);
    margin: 2.5rem 0;
}

.proyecto-separador--espacio {
    height: 3rem;
}

.proyecto-boton-wrap {
    margin: 2rem 0;
}

.proyecto-boton-wrap--multiple {
    display:         flex;
    gap:              1rem;
    flex-wrap:        wrap;
}

.proyecto-boton-wrap--multiple[style*="text-align:center"] { justify-content: center; }
.proyecto-boton-wrap--multiple[style*="text-align:right"]  { justify-content: flex-end; }

.proyecto-icono-wrap a {
    text-decoration: none;
    display: inline-block;
}

.btn-publico {
    display:         inline-flex;
    align-items:     center;
    text-decoration: none;
    font-weight:     600;
    transition:      var(--transicion-base);
}

.btn-publico:hover {
    filter: brightness(1.12);
}

.btn-publico svg {
    flex-shrink: 0;
}

/* --- Llamada a la acción (CTA) --- */
.proyecto-cta {
    padding:       var(--espacio-xl) 0;
    border-radius: 12px;
}

.proyecto-cta-contenido {
    max-width:  760px;
    margin:     0 auto;
    padding:    0 var(--padding-contenedor);
}

.proyecto-cta--center .proyecto-cta-contenido {
    text-align: center;
}
.proyecto-cta--left .proyecto-cta-contenido {
    text-align: left;
    margin-left: 0;
}

.proyecto-cta-titulo {
    font-size:      var(--tipo-2xl);
    font-weight:    700;
    color:          var(--color-corporativo);
    letter-spacing: 0.01em;
    margin-bottom:  0.75rem;
}

.proyecto-cta-subtitulo {
    font-size:     var(--tipo-base);
    color:         var(--color-gris-oscuro);
    line-height:   1.7;
    margin-bottom: 2rem;
}

.proyecto-cta-botones {
    display:         flex;
    gap:             1rem;
    flex-wrap:       wrap;
}
.proyecto-cta--center .proyecto-cta-botones {
    justify-content: center;
}

/* Bloque de Código HTML — envoltorio mínimo a propósito, para no
   imponer ningún estilo al contenido pegado (iframes, widgets...) */
.bloque-codigo-libre {
    max-width: 100%;
    overflow-x: auto;
}

/* Tarjeta de código visual — para el bloque "Código HTML" marcado
   como Markdown: se muestra tal cual, con colores de sintaxis,
   como una tarjeta de código normal (no se convierte a texto
   renderizado, a propósito). El resaltado en sí lo pone CodeMirror
   por JS (ver el script que se añade en proyecto-publico.php,
   insight-publico.php y pagina-dinamica.php cuando hace falta). */
.bloque-codigo-visual {
    max-width:        100%;
    border-radius:    12px;
    background:       #f6f7f9;
    border:           1px solid var(--color-borde-claro);
    overflow:         hidden;
    margin:           1.5rem 0;
}

.bloque-codigo-visual-etiqueta {
    padding:       0.85rem 1.25rem;
    font-size:     var(--tipo-sm);
    color:         var(--color-gris-texto);
    font-weight:   600;
}

.bloque-codigo-visual .CodeMirror {
    background:    transparent;
    border:        none;
    border-top:    1px solid var(--color-borde-claro);
    font-size:     0.85rem;
    line-height:   1.7;
    height:        auto;
    padding:       1rem 0;
}
.bloque-codigo-visual .CodeMirror-lines { padding: 0.5rem 0; }
.bloque-codigo-visual .CodeMirror pre.CodeMirror-line { padding: 0 1.25rem; }

/* Mientras CodeMirror no ha cargado (o si algo falla), que al
   menos se vea legible: texto de máquina de escribir con aire,
   no todo apretado en una sola línea. */
.bloque-codigo-visual-fuente {
    display:        block;
    width:          100%;
    box-sizing:     border-box;
    border:         none;
    border-top:     1px solid var(--color-borde-claro);
    background:     transparent;
    font-family:    'SFMono-Regular', Consolas, monospace;
    font-size:      0.85rem;
    line-height:    1.7;
    padding:        1rem 1.25rem;
    resize:         none;
    color:          var(--color-oscuro-principal);
}

/* Formulario del bloque Buscador — mismo bloque visual que el
   CTA (proyecto-cta), con un campo + botón en vez de botones */
.proyecto-cta-buscador-form {
    display:        flex;
    gap:             0.75rem;
    flex-wrap:       wrap;
    max-width:       460px;
}
.proyecto-cta--center .proyecto-cta-buscador-form {
    margin-left:  auto;
    margin-right: auto;
}

.proyecto-cta-buscador-input {
    flex:           1;
    min-width:      180px;
    padding:        0.875rem 1.125rem;
    font-size:      1rem;
    font-family:    inherit;
    color:          var(--color-oscuro-principal);
    background:     var(--color-blanco);
    border:         1px solid var(--color-borde-claro);
    border-radius:  6px;
    transition:     var(--transicion-base);
}

.proyecto-cta-buscador-input::placeholder {
    color: var(--color-gris-texto);
}

.proyecto-cta-buscador-input:focus {
    outline:      none;
    border-color: var(--color-corporativo);
    box-shadow:   0 0 0 3px rgba(0, 79, 113, 0.15);
}

@media screen and (max-width: 480px) {
    .proyecto-cta-buscador-form {
        flex-direction: column;
    }
    .proyecto-cta-buscador-form .proyecto-cta-boton {
        justify-content: center;
    }
}

.proyecto-cta-boton {
    gap: 0.5rem;
}

.proyecto-cta-texto-inferior {
    font-size:  var(--tipo-sm);
    color:      var(--color-gris-texto);
    margin-top: 2rem;
}

@media screen and (max-width: 768px) {
    .proyecto-cta-botones {
        flex-direction: column;
        align-items:    stretch;
    }
    .proyecto-cta-boton {
        justify-content: center;
    }
}

/* Responsive */
@media screen and (max-width: 1099px) {
    /* Paso intermedio: rejillas de 4/6/8/9/12 columnas iguales -> 2 columnas en tablet */
    .col-4igual,
    .col-6igual,
    .col-8igual,
    .col-9igual,
    .col-12igual {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .col-50-50,
    .col-70-30,
    .col-30-70,
    .col-33-33-33,
    .col-4igual,
    .col-6igual,
    .col-8igual,
    .col-9igual,
    .col-12igual {
        grid-template-columns: 1fr;
    }

    .proyecto-hero { min-height: 50vh; }
    .proyecto-titulo-hero { font-size: 1.75rem; }
    .proyecto-extracto { font-size: 1rem; }
    .proyecto-contenido { padding: 2rem 0; }
}


/* ============================================================
   GRID DE PROYECTOS PÚBLICO
   ============================================================ */

/* Barra de filtro de proyectos por categoría */
.filtro-proyectos {
    display:       flex;
    flex-wrap:     wrap;
    gap:           0.625rem;
    margin-bottom: 2.5rem;
}

.listado-cargar-mas-wrap {
    display:         flex;
    justify-content: center;
    margin-top:      2rem;
}

.filtro-proyectos-btn {
    padding:        0.625rem 1.25rem;
    font-size:      var(--tipo-sm);
    font-weight:    600;
    color:          var(--color-gris-oscuro);
    background:     var(--color-gris-claro);
    border:         1px solid transparent;
    border-radius:  var(--radio-redondo);
    cursor:         pointer;
    transition:     var(--transicion-base);
}

.filtro-proyectos-btn:hover {
    background: var(--color-corporativo-claro);
    color:      var(--color-corporativo);
}

.filtro-proyectos-btn.activo {
    background: var(--color-corporativo);
    color:      #ffffff;
}

/* Botones de filtro con icono asignado — el icono está siempre en
   el HTML (lo decide PHP, según si la categoría tiene uno o no),
   pero por DEFECTO se muestra oculto y el botón se ve como la
   píldora de texto de siempre. Son los 3 bloques @media de abajo
   (uno por tamaño de pantalla, según lo elegido en Configuración
   → Listado) los que activan el icono+texto-debajo cuando toca —
   así cambia con el simple ancho de la ventana, con CSS puro, sin
   ningún parpadeo ni JavaScript de por medio. */
.filtro-proyectos-icono {
    display: none;
    width:      28px;
    height:     28px;
    object-fit: contain;
}

@media screen and (min-width: 1100px) {
    .filtro-modo-escritorio-icono .filtro-proyectos-btn--tiene-icono {
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        gap:             0.4rem;
        padding:         0.75rem 1rem;
        min-width:       84px;
        border-radius:   12px;
    }
    .filtro-modo-escritorio-icono .filtro-proyectos-btn--tiene-icono .filtro-proyectos-icono { display: block; }
    .filtro-modo-escritorio-icono .filtro-proyectos-btn--tiene-icono span {
        font-size:   var(--tipo-xs);
        font-weight: 600;
        line-height: 1.2;
        text-align:  center;
    }
}

@media screen and (max-width: 1099px) and (min-width: 769px) {
    .filtro-modo-tablet-icono .filtro-proyectos-btn--tiene-icono {
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        gap:             0.4rem;
        padding:         0.75rem 1rem;
        min-width:       84px;
        border-radius:   12px;
    }
    .filtro-modo-tablet-icono .filtro-proyectos-btn--tiene-icono .filtro-proyectos-icono { display: block; }
    .filtro-modo-tablet-icono .filtro-proyectos-btn--tiene-icono span {
        font-size:   var(--tipo-xs);
        font-weight: 600;
        line-height: 1.2;
        text-align:  center;
    }
}

@media screen and (max-width: 768px) {
    .filtro-modo-movil-icono .filtro-proyectos-btn--tiene-icono {
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        gap:             0.4rem;
        padding:         0.75rem 1rem;
        min-width:       84px;
        border-radius:   12px;
    }
    .filtro-modo-movil-icono .filtro-proyectos-btn--tiene-icono .filtro-proyectos-icono { display: block; }
    .filtro-modo-movil-icono .filtro-proyectos-btn--tiene-icono span {
        font-size:   var(--tipo-xs);
        font-weight: 600;
        line-height: 1.2;
        text-align:  center;
    }
}

/* Mostrar/ocultar el botón "Todos" del filtro según el tamaño de
   pantalla — mismo sistema y mismos 3 puntos de corte que el
   icono/texto de arriba. Si se oculta, el filtro sigue empezando
   en "todos los proyectos" por dentro (el botón solo desaparece
   visualmente); para volver a verlos todos sin él, hay que
   recargar la página o pulsar un botón de categoría y "des-
   activarlo" — si esto es un problema, dínoslo y lo ajustamos
   para que la primera categoría se active sola en su lugar. */
@media screen and (min-width: 1100px) {
    .filtro-todos-escritorio-ocultar .filtro-proyectos-btn--todos { display: none; }
}

@media screen and (max-width: 1099px) and (min-width: 769px) {
    .filtro-todos-tablet-ocultar .filtro-proyectos-btn--todos { display: none; }
}

@media screen and (max-width: 768px) {
    .filtro-todos-movil-ocultar .filtro-proyectos-btn--todos { display: none; }
}

/* Desplegable ("caja") de categorías — tercera forma de filtrar,
   pensada para ahorrar espacio horizontal cuando hay muchas
   categorías. Oculto por defecto; son los mismos 3 @media de
   siempre (escritorio/tablet/móvil) los que lo muestran (y
   ocultan la barra de botones) cuando el ajuste sea
   "Desplegable" en Configuración → Listado. */
.filtro-proyectos-select {
    display:           none;
    width:             100%;
    max-width:         320px;
    padding:           0.75rem 1rem;
    font-size:         var(--tipo-sm);
    font-weight:       600;
    color:             var(--color-gris-oscuro);
    background-color:  var(--color-blanco);
    border:            1px solid var(--color-borde-claro);
    border-radius:     var(--radio-sm);
    cursor:            pointer;
    margin-bottom:     2.5rem;
}

/* Envoltorio con etiqueta ("Filtrar por:" + el desplegable) — solo
   se genera si se ha configurado un texto en Configuración →
   Listado. Hereda el mismo display:none por defecto que el propio
   <select> (vía los 3 @media de abajo, que también lo controlan
   a él como envoltorio). */
.filtro-proyectos-select-envoltorio {
    display:       none;
    align-items:   center;
    gap:           0.75rem;
    margin-bottom: 2.5rem;
    cursor:        pointer;
}

.filtro-proyectos-select-envoltorio .filtro-proyectos-select {
    margin-bottom: 0;
    width:         auto;
    flex:          1;
}

.filtro-proyectos-select-etiqueta {
    font-size:   var(--tipo-sm);
    font-weight: 600;
    color:       var(--color-gris-oscuro);
    white-space: nowrap;
}

@media screen and (min-width: 1100px) {
    .filtro-modo-escritorio-desplegable .filtro-proyectos { display: none; }
    .filtro-modo-escritorio-desplegable .filtro-proyectos-select { display: block; }
    .filtro-modo-escritorio-desplegable .filtro-proyectos-select-envoltorio { display: flex; }
}

@media screen and (max-width: 1099px) and (min-width: 769px) {
    .filtro-modo-tablet-desplegable .filtro-proyectos { display: none; }
    .filtro-modo-tablet-desplegable .filtro-proyectos-select { display: block; }
    .filtro-modo-tablet-desplegable .filtro-proyectos-select-envoltorio { display: flex; }
}

@media screen and (max-width: 768px) {
    .filtro-modo-movil-desplegable .filtro-proyectos { display: none; }
    .filtro-modo-movil-desplegable .filtro-proyectos-select { display: block; }
    .filtro-modo-movil-desplegable .filtro-proyectos-select-envoltorio { display: flex; }
}

.listado-proyectos-vacio {
    text-align: center;
    color:      var(--color-gris-texto);
    padding:    3rem 0;
}

.grid-proyectos-seccion {
    margin: 3rem 0;
}

.grid-proyectos-titulo {
    font-family:   var(--fuente-titulos, serif);
    font-size:     clamp(1.5rem, 3vw, 2rem);
    font-weight:   700;
    color:         var(--color-oscuro-principal);
    margin-bottom: 2rem;
    text-align:    center;
}

.grid-proyectos {
    display: grid;
    gap:     1.5rem;
}

.grid-proyectos > * {
    min-width: 0;
}

.grid-proyectos--2col { grid-template-columns: repeat(2, 1fr); }
.grid-proyectos--3col { grid-template-columns: repeat(3, 1fr); }
.grid-proyectos--4col { grid-template-columns: repeat(4, 1fr); }
.grid-proyectos--6col { grid-template-columns: repeat(6, 1fr); }

/* Tarjeta */
.grid-proyecto-card {
    border-radius: 8px;
    overflow:      hidden;
    border:        1px solid var(--color-borde-claro);
    background:    var(--color-blanco);
    transition:    transform 0.25s ease, box-shadow 0.25s ease;
}

.grid-proyecto-card:hover {
    transform:  translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 79, 113, 0.12);
}

.grid-proyecto-enlace {
    display:         flex;
    flex-direction:  column;
    height:          100%;
    text-decoration: none;
    color:           inherit;
}

.grid-proyecto-card {
    display:       flex;
    flex-direction: column;
    height:        100%;
    border-radius: 8px;
    overflow:      hidden;
    border:        1px solid var(--color-borde-claro);
    background:    var(--color-blanco);
    transition:    transform 0.25s ease, box-shadow 0.25s ease;
}

.grid-proyecto-imagen {
    /* width:100% explícito — es la causa real del hueco en
       Firefox (no el enlace de dentro, que ya se corrigió antes
       pero no era el problema de fondo). .grid-proyecto-card es
       flex column, y este div es un hijo flex con aspect-ratio +
       max-height a la vez. Chrome/Safari estiran el hijo al ancho
       disponible de la columna primero y solo después aplican la
       proporción (por eso sale rectangular, no cuadrado, cuando
       max-height recorta la altura). Firefox, en cambio, resuelve
       aspect-ratio+max-height como una caja "libre" (cuadrado
       420×420 en este caso) SIN estirarla antes al ancho de la
       columna del grid — de ahí el hueco a la derecha, solo en
       Firefox. Con width:100% ya no depende del stretch por
       defecto del flex: se fuerza el ancho real de la columna en
       los 3 navegadores por igual, y aspect-ratio/max-height solo
       deciden la altura a partir de ese ancho ya fijado. */
    position:     relative;
    width:        100%;
    aspect-ratio: 1/1;
    max-height:   420px; /* evita que se dispare en pantallas/columnas muy anchas (ancho completo) */
    overflow:     hidden;
    background:   var(--color-gris-claro);
}

.grid-proyecto-enlace-imagen {
    /* Antes: display:block + height:100% (el ancho quedaba en
       "auto", resuelto por flujo normal contra el ancho de la
       columna del grid). Firefox redondea esa resolución de
       porcentaje con un subpíxel distinto al que usa para la
       propia columna (1fr), y esa diferencia de <1px deja una
       línea vertical visible a la derecha de la imagen —no pasa
       en Chrome/Safari, que redondean igual en los dos sitios—.
       Con position:absolute + inset:0, el navegador estira el
       enlace directamente contra la caja ya calculada de
       .grid-proyecto-imagen (relative), sin volver a resolver un
       porcentaje de ancho por su cuenta, así que no hay margen
       para que el redondeo diverja. */
    position: absolute;
    inset:    0;
    display:  block;
}

/* Ribbon de categoría sobre la imagen */
.grid-proyecto-ribbon {
    position:         absolute;
    top:              0.75rem;
    left:             0.75rem;
    z-index:          2;
    padding:          0.35rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.92);
    color:            var(--color-corporativo);
    font-size:        var(--tipo-xs);
    font-weight:      700;
    text-transform:   uppercase;
    letter-spacing:   0.04em;
    border-radius:    var(--radio-redondo);
    text-decoration:  none;
    transition:       var(--transicion-base);
}

.grid-proyecto-ribbon:hover {
    filter:    brightness(1.15);
    transform: scale(1.04);
}

.grid-proyecto-imagen img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.35s ease;
    display:    block;
}

.grid-proyecto-card:hover .grid-proyecto-imagen img {
    transform: scale(1.04);
}

.grid-proyecto-sin-imagen {
    width:            100%;
    height:           100%;
    background:       linear-gradient(135deg, var(--color-corporativo-claro), var(--color-gris-claro));
}

.grid-proyecto-info {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.grid-proyecto-nombre {
    font-family:   var(--fuente-titulos, serif);
    font-size:     1.1rem;
    font-weight:   700;
    color:         var(--color-oscuro-principal);
    margin-bottom: 0.5rem;
    line-height:   1.3;
}

.grid-proyecto-extracto {
    font-size:   var(--tipo-sm);
    color:       var(--color-gris-oscuro);
    line-height: 1.6;
    flex:        1;
    margin-bottom: 0.75rem;
}

.grid-proyecto-meta {
    display:     flex;
    gap:         1rem;
    font-size:   var(--tipo-xs);
    color:       var(--color-gris-texto);
    margin-bottom: 0.75rem;
}

.grid-proyecto-ver {
    font-size:      var(--tipo-xs);
    font-weight:    700;
    color:          var(--color-corporativo);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top:     auto;
    transition:     gap 0.2s;
}

.grid-proyecto-card:hover .grid-proyecto-ver {
    text-decoration: underline;
}

/* La rejilla de 6 columnas necesita más ancho por tarjeta que las
   de 3/4. Como el contenedor tiene un ancho máximo de 1440px (ver
   --ancho-maximo), 6 columnas nunca llegan a tener un ancho cómodo
   por tarjeta aunque la pantalla sea más ancha — así que se amplía
   el rango en el que caen a 3 columnas hasta 2000px; por encima de
   eso ya se asume una pantalla ultra-ancha donde 6 sí se leen bien. */
@media screen and (max-width: 2000px) and (min-width: 1100px) {
    .grid-proyectos--6col { grid-template-columns: repeat(3, 1fr); }
}

/* Responsive: cascada progresiva, no un salto brusco a 1 columna */
@media screen and (max-width: 1099px) and (min-width: 769px) {
    .grid-proyectos--4col { grid-template-columns: repeat(2, 1fr); }
    .grid-proyectos--3col { grid-template-columns: repeat(2, 1fr); }
    .grid-proyectos--6col { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 768px) and (min-width: 481px) {
    .grid-proyectos--3col,
    .grid-proyectos--4col,
    .grid-proyectos--6col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 480px) {
    .grid-proyectos--2col,
    .grid-proyectos--3col,
    .grid-proyectos--4col,
    .grid-proyectos--6col {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    /* Modo "carrusel deslizable" en móvil: en vez de apilarse en
       columna, las tarjetas se desplazan horizontalmente con
       deslizamiento táctil nativo (sin necesidad de JavaScript) */
    .grid-proyectos--movil-slide {
        display:                  flex;
        overflow-x:                auto;
        scroll-snap-type:          x mandatory;
        -webkit-overflow-scrolling: touch;
        gap:                       1rem;
        padding-bottom:            0.75rem;
    }

    .grid-proyectos--movil-slide::-webkit-scrollbar {
        height: 5px;
    }

    .grid-proyectos--movil-slide::-webkit-scrollbar-thumb {
        background-color: var(--color-borde-claro);
        border-radius:    10px;
    }

    .grid-proyectos--movil-slide .grid-proyecto-card {
        flex:          0 0 82%;
        scroll-snap-align: start;
    }
}

/* Bloque grid en el constructor — placeholder */
.constructor-grid-proyectos-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.constructor-grid-config {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1rem;
}

.constructor-grid-preview {
    border:        1px dashed var(--color-borde-corporativo);
    border-radius: 6px;
    background:    var(--color-corporativo-claro);
    padding:       2rem;
    text-align:    center;
}

.constructor-grid-placeholder {
    color: var(--color-corporativo);
}

.constructor-grid-icono {
    font-size:     2rem;
    display:       block;
    margin-bottom: 0.5rem;
}

.constructor-grid-info {
    font-size: var(--tipo-xs);
    color:     var(--color-gris-texto);
    margin-top: 0.25rem;
}

@media screen and (max-width: 768px) {
    .constructor-grid-config {
        grid-template-columns: 1fr;
    }
}


/* Banner de vista previa */
.preview-aviso {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              1rem;
    padding:          0.75rem 1.5rem;
    background:       #FEF3C7;
    border-bottom:    2px solid #F59E0B;
    font-size:        var(--tipo-sm);
    color:            #92400E;
    position:         sticky;
    top:              0;
    z-index:          100;
}

.preview-aviso a {
    color:            var(--color-corporativo);
    font-weight:      600;
    text-decoration:  none;
    white-space:      nowrap;
}

.preview-aviso a:hover {
    text-decoration: underline;
}


/* ============================================================
   CONSTRUCTOR — BARRA DE ALINEACIÓN
   ============================================================ */

.constructor-align-barra {
    display:       flex;
    align-items:   center;
    gap:           2px;
    margin-bottom: 0.5rem;
}

.constructor-align-btn {
    width:           30px;
    height:          28px;
    border:          1px solid var(--color-borde-claro);
    background:      var(--color-blanco);
    border-radius:   4px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      var(--transicion-base);
    color:           var(--color-gris-texto);
    padding:         0;
}

.constructor-align-btn svg {
    width:  16px;
    height: 16px;
}

.constructor-align-btn:hover {
    border-color: var(--color-corporativo);
    color:        var(--color-corporativo);
    background:   var(--color-corporativo-claro);
}

.constructor-align-btn.activo {
    border-color:     var(--color-corporativo);
    background-color: var(--color-corporativo);
    color:            #ffffff;
}

/* Bloque wrapper público — aplica alineación */
.bloque-wrapper {
    width: 100%;
    box-sizing: border-box;
}


/* Hero selector — botones */
.hero-botones-wrap {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-wrap:   wrap;
    padding:     1.5rem;
    background:  var(--color-gris-claro);
    border:      2px dashed var(--color-borde-claro);
    border-radius: 6px;
}


/* ============================================================
   PROYECTOS — VISTA MÓVIL EN TARJETAS
   ============================================================ */

/* Desktop grande: tabla visible, tarjetas ocultas */
.listado-cards-movil { display: none; }

/* El comentario de este bloque en el HTML decía "tabla solo en
   desktop >1300px", pero este punto de corte estaba en 1099px —
   no coincidían. Por debajo de 1300px la tabla no tiene sitio de
   sobra para mostrarse entera (con todas sus columnas y los 4
   botones de acción en una sola fila), así que entre 1100px y
   ~1299px aparecía desbordada — hasta 162px de más, medido en la
   práctica. Corregido a 1299px, el punto donde de verdad cabe sin
   desbordar. */
@media screen and (max-width: 1309px) {

    /* Tablet y móvil: tabla oculta, tarjetas visibles */
    .listado-tabla-desktop { display: none; }
    .listado-cards-movil   { display: grid; gap: 0.75rem; }

    /* Tablet: 2 columnas / Móvil: 1 columna */
    .listado-cards-movil {
        grid-template-columns: repeat(2, 1fr);
    }

    .proyecto-card-movil {
        border:        1px solid var(--color-borde-claro);
        border-radius: 8px;
        background:    var(--color-blanco);
        overflow:      hidden;
        box-shadow:    var(--sombra-suave);
    }

    /* Fila superior: imagen + info */
    .proyecto-card-top {
        display:     flex;
        align-items: center;
        gap:         0.875rem;
        padding:     0.875rem;
    }

    .proyecto-card-img {
        width:         72px;
        height:        52px;
        object-fit:    cover;
        border-radius: 4px;
        flex-shrink:   0;
        display:       block;
    }

    .proyecto-card-img--vacia {
        background: var(--color-gris-claro);
        border:     1px solid var(--color-borde-claro);
    }

    .proyecto-card-info {
        flex: 1;
        min-width: 0;
    }

    .proyecto-card-titulo {
        font-weight:   700;
        font-size:     var(--tipo-sm);
        color:         var(--color-oscuro-principal);
        white-space:   normal;
        overflow:      visible;
        text-overflow: unset;
        line-height:   1.35;
        margin-bottom: 0.2rem;
    }

    .proyecto-card-meta {
        font-size: var(--tipo-xs);
        color:     var(--color-gris-texto);
        margin-bottom: 0.375rem;
    }

    /* Fila de acciones: 2 por fila */
    .proyecto-card-acciones {
        display:               grid;
        grid-template-columns: 1fr 1fr;
        border-top:            1px solid var(--color-borde-claro);
    }

    .proyecto-card-btn {
        display:         flex;
        align-items:     center;
        justify-content: center;
        gap:             0.375rem;
        padding:         0.625rem 0.5rem;
        font-size:       0.75rem;
        font-weight:     600;
        border:          none;
        background:      transparent;
        cursor:          pointer;
        text-decoration: none;
        transition:      var(--transicion-base);
        border-right:    1px solid var(--color-borde-claro);
    }

    .proyecto-card-btn:last-child,
    .proyecto-card-btn:nth-child(2) {
        border-right: none;
    }

    /* Separador entre filas de botones */
    .proyecto-card-btn:nth-child(3),
    .proyecto-card-btn:nth-child(4) {
        border-top: 1px solid var(--color-borde-claro);
    }

    .proyecto-card-btn--editar    { color: var(--color-corporativo); }
    .proyecto-card-btn--ver       { color: var(--color-gris-oscuro); }
    .proyecto-card-btn--duplicar  { color: var(--color-corporativo); }
    .proyecto-card-btn--eliminar  { color: #DC2626; }

    .proyecto-card-btn:hover {
        background: var(--color-gris-claro);
    }
}


/* ============================================================
   PUBLICACIÓN — CAMPO DE FECHA PROGRAMADA
   ============================================================ */

.publicacion-grid {
    display:               grid;
    grid-template-columns: auto 1fr;
    gap:                   1.5rem;
    align-items:           start;
}

.publicacion-switch {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    min-width:      180px;
}

.publicacion-estado {
    font-size:  var(--tipo-sm);
    color:      var(--color-gris-texto);
    font-style: italic;
}

@media screen and (max-width: 768px) {
    .publicacion-grid {
        grid-template-columns: 1fr;
    }
}


/* Columnas opcionales que se ocultan en tablet — hasta 1500px
   (no 1300px): la vista de tabla arranca justo en 1300px (ver
   .listado-tabla-desktop/.listado-cards-movil), así que si estas
   columnas reaparecieran ahí mismo, la tabla necesitaría todo su
   ancho de golpe justo al empezar a mostrarse, desbordando entre
   1300 y ~1450px sin ningún margen de sobra. Extendido hasta que
   de verdad sobre sitio para mostrarlas sin desbordar. */
@media screen and (max-width: 1500px) and (min-width: 769px) {
    .tabla-th--ocultar-tablet,
    .tabla-td--ocultar-tablet {
        display: none;
    }
}

/* Botones de acción con icono */
.tabla-td--acciones .tabla-accion {
    padding:     0.5rem 0.9rem; /* antes 0.25rem 0.5rem — la que de verdad ganaba y dejaba todo diminuto */
    font-size:   0.75rem; /* antes 0.625rem */
    min-width:   auto;
    text-align:  center;
}

@media screen and (max-width: 480px) {
    .listado-cards-movil {
        grid-template-columns: 1fr;
    }
}


/* Controles del bloque columnas */
.constructor-col-controles {
    display:     flex;
    align-items: center;
    gap:         1rem;
    margin-bottom: 1rem;
    flex-wrap:   wrap;
}

.constructor-col-align-v {
    display:     flex;
    align-items: center;
    gap:         0.25rem;
    border-left: 1px solid var(--color-borde-claro);
    padding-left: 1rem;
}

/* Contenedor interno de columna para alineación vertical */
.proyecto-col-inner {
    width: 100%;
}


/* Botón HTML en bloques de texto */
.constructor-btn-html {
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
    padding:       0.25rem 0.625rem;
    font-size:     0.7rem;
    font-weight:   600;
    color:         var(--color-gris-texto);
    border:        1px solid var(--color-borde-claro);
    border-radius: var(--radio-redondo);
    background:    var(--color-gris-claro);
    cursor:        pointer;
    transition:    var(--transicion-base);
    font-family:   monospace;
    margin-left:   auto;
    margin-bottom: 0.5rem;
    float:         right;
}

.constructor-btn-html:hover {
    background:   var(--color-corporativo-claro);
    border-color: var(--color-corporativo);
    color:        var(--color-corporativo);
}


/* ============================================================
   BLOQUES: LISTA, TABLA Y DOCUMENTO
   ============================================================ */

/* --- LISTA en el constructor --- */
.constructor-lista-fila {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    margin-bottom: 0.375rem;
}

.constructor-lista-bullet {
    font-weight:  700;
    color:        var(--color-corporativo);
    min-width:    1.25rem;
    text-align:   center;
    flex-shrink:  0;
}

.constructor-lista-btn-del {
    border:        none;
    background:    transparent;
    color:         var(--color-gris-texto);
    cursor:        pointer;
    padding:       0.25rem;
    border-radius: 4px;
    font-size:     0.75rem;
    flex-shrink:   0;
}

.constructor-lista-btn-del:hover { color: #DC2626; }

/* Lista pública */
.proyecto-lista-ul,
.proyecto-lista-ol {
    margin:      1.25rem 0;
    padding-left: 1.75rem;
    line-height:  1.8;
    color:        var(--color-gris-oscuro);
    font-size:    1rem;
}

.proyecto-lista-ul li { list-style-type: disc; }
.proyecto-lista-ol li { list-style-type: decimal; }

/* Alineación — wrapeamos en div para centrar la lista entera */
.lista-wrap-left   { text-align: left; }
.lista-wrap-center { text-align: center; }
.lista-wrap-right  { text-align: right; }

.lista-wrap-center .proyecto-lista-ul,
.lista-wrap-center .proyecto-lista-ol {
    display:      inline-block;
    text-align:   left;  /* El texto de los items sigue a la izq */
    padding-left: 1.25rem;
}

.lista-wrap-right .proyecto-lista-ul,
.lista-wrap-right .proyecto-lista-ol {
    display:      inline-block;
    text-align:   left;
    padding-left: 1.25rem;
}

/* --- TABLA en el constructor --- */
.constructor-tabla-wrap {
    overflow-x: auto;
}

.constructor-tabla-ctrl {
    display:       flex;
    gap:           0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap:     wrap;
}

.constructor-tabla-preview {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--tipo-sm);
}

.constructor-tabla-preview th,
.constructor-tabla-preview td {
    border:  1px solid var(--color-borde-claro);
    padding: 0.25rem;
}

.constructor-tabla-preview th {
    background: var(--color-gris-claro);
}

.constructor-tabla-cell {
    width:       100%;
    border:      none;
    background:  transparent;
    font-size:   var(--tipo-sm);
    padding:     0.25rem;
    outline:     none;
    font-weight: inherit;
}

/* Tabla pública */
.proyecto-tabla-wrap {
    overflow-x:    auto;
    margin:        1.5rem 0;
    border-radius: 6px;
    border:        1px solid var(--color-borde-claro);
}

.proyecto-tabla {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--tipo-sm);
    color:           var(--color-gris-oscuro);
}

.proyecto-tabla th {
    background:    var(--color-corporativo);
    color:         #ffffff;
    padding:       0.75rem 1rem;
    text-align:    left;
    font-weight:   600;
    font-size:     var(--tipo-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.proyecto-tabla td {
    padding:       0.75rem 1rem;
    border-bottom: 1px solid var(--color-borde-claro);
}

.proyecto-tabla tr:last-child td { border-bottom: none; }
.proyecto-tabla tr:nth-child(even) td { background: var(--color-gris-claro); }

/* --- DOCUMENTO --- */
.constructor-doc-preview {
    display:       flex;
    align-items:   center;
    gap:           0.875rem;
    margin-top:    1rem;
    padding:       0.875rem 1rem;
    background:    var(--color-corporativo-claro);
    border:        1px solid var(--color-borde-corporativo);
    border-radius: 6px;
}

.constructor-doc-icono { font-size: 1.5rem; flex-shrink: 0; }

/* Documento público */
.proyecto-documento {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    padding:       1rem 1.25rem;
    border:        1px solid var(--color-borde-claro);
    border-radius: 8px;
    background:    var(--color-gris-claro);
    margin:        1.5rem 0;
    transition:    var(--transicion-base);
}

.proyecto-documento:hover {
    border-color: var(--color-corporativo);
    background:   var(--color-corporativo-claro);
}

.doc-icono { font-size: 2rem; flex-shrink: 0; }

.doc-info {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.doc-nombre {
    font-weight: 600;
    color:       var(--color-oscuro-principal);
    font-size:   var(--tipo-sm);
}

.doc-tamaño {
    font-size: var(--tipo-xs);
    color:     var(--color-gris-texto);
}

.doc-descargar {
    padding:         0.5rem 1rem;
    background:      var(--color-corporativo);
    color:           #ffffff;
    border-radius:   var(--radio-redondo);
    text-decoration: none;
    font-size:       var(--tipo-sm);
    font-weight:     600;
    white-space:     nowrap;
    transition:      var(--transicion-base);
    flex-shrink:     0;
}

.doc-descargar:hover { background: var(--color-corporativo-oscuro); }


/* Botón Actualizar — guarda y se queda en el editor */
.editor-btn-actualizar {
    padding:       0.75rem 1.5rem;
    border-radius: var(--radio-md);
    font-size:     var(--tipo-sm);
    font-weight:   600;
    cursor:        pointer;
    transition:    var(--transicion-base);
    border:        2px solid var(--color-corporativo);
    background:    transparent;
    color:         var(--color-corporativo);
    letter-spacing: 0.04em;
}

.editor-btn-actualizar:hover {
    background: var(--color-corporativo-claro);
}


/* ============================================================
   LISTA DE DOCUMENTOS Y TABLA DE DOCUMENTOS
   ============================================================ */

/* Panel — filas de la lista docs */
.constructor-lista-docs-wrap { display: flex; flex-direction: column; gap: 0.5rem; }

.constructor-doc-fila {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    padding:       0.5rem 0.75rem;
    border:        1px solid var(--color-borde-claro);
    border-radius: 6px;
    background:    var(--color-blanco);
}

.constructor-doc-fila-archivo {
    display:     flex;
    align-items: center;
    gap:         0.375rem;
    flex-shrink: 0;
    min-width:   160px;
}

.constructor-doc-fila-archivo.tiene-archivo {
    background:    var(--color-corporativo-claro);
    border:        1px solid var(--color-borde-corporativo);
    border-radius: 4px;
    padding:       0.25rem 0.5rem;
}

.constructor-doc-icono-sm { font-size: 1rem; flex-shrink: 0; }
.constructor-doc-nombre-sm { font-size: 0.7rem; color: var(--color-corporativo); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pública — lista docs */
.proyecto-lista-docs {
    list-style:    none;
    padding:       0;
    margin:        1.25rem 0;
    display:       flex;
    flex-direction: column;
    gap:           0.625rem;
}

.lista-doc-item {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           1rem;
    padding:       0.75rem 1rem;
    border:        1px solid var(--color-borde-claro);
    border-radius: 6px;
    background:    var(--color-blanco);
    transition:    var(--transicion-base);
}

.lista-doc-item:hover {
    border-color: var(--color-corporativo);
    background:   var(--color-corporativo-claro);
}

.lista-doc-texto {
    font-size:   var(--tipo-sm);
    color:       var(--color-gris-oscuro);
    flex:        1;
    line-height: 1.5;
}

.lista-doc-archivo {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-shrink: 0;
}

.lista-doc-icono  { font-size: 1.1rem; }
.lista-doc-nombre {
    font-size:     var(--tipo-sm);
    color:         var(--color-gris-oscuro);
    max-width:     160px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.lista-doc-btn-descargar {
    display:         inline-flex;
    align-items:     center;
    text-decoration: none;
    background:      var(--color-corporativo);
    color:           #ffffff;
    padding:         0.375rem 0.875rem;
    border-radius:   var(--radio-redondo);
    font-size:       var(--tipo-xs);
    font-weight:     600;
    white-space:     nowrap;
    flex-shrink:     0;
    transition:      var(--transicion-base);
    margin-left:     0.75rem;
}

.lista-doc-btn-descargar:hover { background: var(--color-corporativo-oscuro); }

/* Tabla docs */
.proyecto-tabla-docs .tabla-doc-celda {
    padding: 0.625rem 1rem;
}

.tabla-doc-celda {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.75rem;
}

.tabla-doc-info {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    color:       var(--color-gris-oscuro);
}

.tabla-doc-nombre {
    max-width:     150px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    font-size:     var(--tipo-sm);
}

.tabla-doc-btn-descargar {
    display:         inline-flex;
    align-items:     center;
    text-decoration: none;
    background:      var(--color-corporativo);
    color:           #ffffff;
    padding:         0.3rem 0.75rem;
    border-radius:   var(--radio-redondo);
    font-size:       var(--tipo-xs);
    font-weight:     600;
    white-space:     nowrap;
    flex-shrink:     0;
    transition:      var(--transicion-base);
}

.tabla-doc-btn-descargar:hover { background: var(--color-corporativo-oscuro); }


/* ============================================================
   BARRA DE PROGRESO DE SUBIDA
   ============================================================ */

.constructor-upload-progreso {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    min-width:     140px;
    padding:       0.25rem 0.5rem;
}

.constructor-upload-barra {
    flex:          1;
    height:        6px;
    background:    var(--color-borde-claro);
    border-radius: 3px;
    overflow:      hidden;
    min-width:     60px;
}

.constructor-upload-fill {
    height:     100%;
    background: var(--color-corporativo);
    border-radius: 3px;
    transition: width 0.15s ease;
}

.constructor-upload-texto {
    font-size:   0.7rem;
    color:       var(--color-corporativo);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}


/* ============================================================
   SIDEBAR MÓVIL DESLIZANTE (dashboard)
   ============================================================ */

.sidebar-movil-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.5);
    z-index:    1998;
    backdrop-filter: blur(2px);
}

.sidebar-movil-overlay.activo { display: block; }

.sidebar-movil-panel {
    position:   fixed;
    top:        0;
    left:       0;
    bottom:     0;
    width:      min(320px, 85vw);
    background: var(--color-corporativo);
    z-index:    1999;
    transform:  translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    display:    flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar-movil-panel.abierto { transform: translateX(0); }

.sidebar-movil-cabecera {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.25rem 1rem 1rem;
    border-bottom:   1px solid rgba(255,255,255,0.1);
    flex-shrink:     0;
}

.sidebar-movil-logo {
    height:  var(--logo-panel-alto-escritorio, 32px);
    filter:  brightness(0) invert(1);
}

.sidebar-movil-cerrar {
    background:  transparent;
    border:      none;
    color:       rgba(255,255,255,0.7);
    font-size:   1.25rem;
    cursor:      pointer;
    padding:     0.25rem 0.5rem;
    line-height: 1;
}

.sidebar-movil-usuario {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    padding:     1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.sidebar-movil-nombre {
    color:       #ffffff;
    font-weight: 600;
    font-size:   var(--tipo-sm);
    margin:      0;
}

.sidebar-movil-rol {
    color:     rgba(255,255,255,0.5);
    font-size: var(--tipo-xs);
    margin:    0;
}

.sidebar-movil-nav {
    flex:       1;
    padding:    0.75rem 0;
    overflow-y: auto;
}

.sidebar-movil-enlace {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
    padding:         0.75rem 1.25rem;
    color:           rgba(255,255,255,0.75);
    text-decoration: none;
    font-size:       var(--tipo-sm);
    font-weight:     600;
    cursor:          pointer;
    transition:      background 0.15s, color 0.15s;
    letter-spacing:  0.03em;
    text-transform:  uppercase;
}

.sidebar-movil-enlace:hover,
.sidebar-movil-enlace.activo {
    color:      #ffffff;
    background: rgba(255,255,255,0.08);
}

.sidebar-movil-enlace.activo {
    border-left: 3px solid var(--color-corporativo-claro);
    color: var(--color-corporativo-claro);
}

.sidebar-movil-subgrupo {
    padding-left: 2.5rem;
}

.sidebar-movil-subenlace {
    display:         block;
    padding:         0.5rem 1rem;
    color:           rgba(255,255,255,0.5);
    text-decoration: none;
    font-size:       var(--tipo-xs);
    transition:      color 0.15s;
}

.sidebar-movil-subenlace:hover { color: rgba(255,255,255,0.9); }

.sidebar-movil-cerrar-sesion {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         1rem 1.25rem;
    color:           rgba(255,255,255,0.5);
    text-decoration: none;
    font-size:       var(--tipo-sm);
    border-top:      1px solid rgba(255,255,255,0.1);
    flex-shrink:     0;
    transition:      color 0.15s;
}

.sidebar-movil-cerrar-sesion:hover { color: #ffffff; }

.dashboard-nav-btn-menu {
    background: transparent;
    border:     none;
    cursor:     pointer;
    width:      100%;
}

/* Solo visible en móvil */
@media screen and (min-width: 769px) {
    .sidebar-movil-overlay,
    .sidebar-movil-panel { display: none !important; }
}


/* ============================================================
   SELECTOR DE ICONO — Modal biblioteca Iconografía
   ============================================================ */

.campo-icono-acciones {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-wrap:   wrap;
    margin-bottom: 0.5rem;
}

.campo-icono-preview-caja {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            40px;
    height:           40px;
    border-radius:    6px;
    border:           1px solid var(--color-borde-claro);
    background-color: var(--color-gris-claro);
    flex-shrink:      0;
    overflow:         hidden;
}

.campo-icono-preview-caja img {
    max-width:  28px;
    max-height: 28px;
    object-fit: contain;
}

.campo-icono-btn {
    display:          inline-flex;
    align-items:      center;
    gap:               0.4rem;
    padding:           0.5rem 0.875rem;
    font-size:         var(--tipo-xs);
    font-weight:       600;
    color:             var(--color-corporativo);
    background-color:  var(--color-corporativo-claro);
    border:            1px solid transparent;
    border-radius:     6px;
    cursor:            pointer;
    transition:        var(--transicion-base);
    white-space:       nowrap;
}

.campo-icono-btn:hover {
    background-color: var(--color-corporativo);
    color:            #ffffff;
}

.campo-icono-btn.activo {
    background-color: var(--color-corporativo);
    color:            #ffffff;
}

.campo-icono-btn--quitar {
    color:            #DC2626;
    background-color: rgba(220, 38, 38, 0.08);
}

.campo-icono-btn--quitar:hover {
    background-color: #DC2626;
    color:            #ffffff;
}

.campo-icono-btn input[type="file"] {
    position: absolute;
    inset:    0;
    opacity:  0;
    cursor:   pointer;
    width:    100%;
    height:   100%;
}

.campo-icono-btn--archivo {
    position: relative;
    overflow: hidden;
}

/* Modal */
.modal-selector-icono {
    display:          none;
    position:         fixed;
    inset:            0;
    background:       rgba(0, 0, 0, 0.60);
    z-index:          10000;
    align-items:      center;
    justify-content:  center;
    padding:          1rem;
}

.modal-selector-icono.activo {
    display: flex;
}

.modal-selector-icono-contenido {
    background:     var(--color-blanco);
    border-radius:  8px;
    width:          min(560px, 100%);
    max-height:     80vh;
    display:        flex;
    flex-direction: column;
    box-shadow:     0 20px 60px rgba(0, 0, 0, 0.25);
}

.modal-selector-icono-cabecera {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.25rem;
    border-bottom:   1px solid var(--color-borde-claro);
}

.modal-selector-icono-cabecera h3 {
    font-size:   var(--tipo-lg);
    font-weight: 600;
    color:       var(--color-oscuro-principal);
}

.modal-selector-icono-cabecera button {
    border:     none;
    background: transparent;
    font-size:  1.25rem;
    cursor:     pointer;
    color:      var(--color-gris-texto);
    padding:    0.25rem;
}

.modal-selector-icono-cuerpo {
    padding:               1rem;
    overflow-y:            auto;
    flex:                  1;
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap:                   0.625rem;
    align-content:         start;
}

.modal-selector-icono-item {
    display:          flex;
    align-items:       center;
    justify-content:   center;
    width:             64px;
    height:            64px;
    padding:           0.5rem;
    border:            1px solid var(--color-borde-claro);
    border-radius:     8px;
    background-color:  var(--color-gris-claro);
    cursor:            pointer;
    transition:        var(--transicion-base);
}

.modal-selector-icono-item:hover {
    border-color: var(--color-corporativo);
    background-color: var(--color-corporativo-claro);
    transform: scale(1.05);
}

.modal-selector-icono-item img {
    max-width:  100%;
    max-height: 100%;
    object-fit: contain;
}

.modal-selector-icono-vacio {
    grid-column:  1 / -1;
    text-align:   center;
    color:        var(--color-gris-texto);
    font-size:    var(--tipo-sm);
    padding:      2rem 1rem;
}

.modal-selector-icono-vacio a {
    color:       var(--color-corporativo);
    font-weight: 600;
}

.modal-selector-icono-pie {
    padding:       0.75rem 1.25rem;
    border-top:    1px solid var(--color-borde-claro);
    text-align:    center;
}

.modal-selector-icono-pie a {
    font-size:   var(--tipo-xs);
    color:       var(--color-gris-texto);
    font-weight: 600;
}

.modal-selector-icono-pie a:hover {
    color: var(--color-corporativo);
}

/* Rejilla de iconos en el panel Iconografía (más compacta que galería) */
.galeria-rejilla--iconos {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.galeria-item-imagen--icono {
    aspect-ratio:     1 / 1;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background-color: var(--color-gris-claro);
}

.galeria-thumb--icono {
    max-width:  60%;
    max-height: 60%;
    width:      auto;
    height:     auto;
    object-fit: contain;
}

/* Rejilla de documentos en el panel Galería de Documentos:
   icono grande centrado en vez de miniatura de imagen */
.galeria-item-imagen--doc {
    aspect-ratio:     1 / 1;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background-color: var(--color-gris-claro);
}
.galeria-doc-icono-enlace {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    text-decoration: none;
}
.galeria-doc-icono {
    font-size: 3rem;
    line-height: 1;
}

/* ============================================================
   PANEL PLEGABLE DE BUSCAR/FILTRAR — Proyectos / Insights
   En escritorio se ve siempre todo, como antes (el <summary> con
   el icono queda oculto). En móvil se pliega bajo un único botón
   compacto — ahí es donde de verdad ocupaba mucha pantalla.
   ============================================================ */
.listado-filtros-panel {
    margin-bottom: 1.25rem;
}

.listado-filtros-resumen {
    display:          none;
    align-items:      center;
    gap:              0.5rem;
    padding:          0.75rem 1rem;
    background-color: var(--color-blanco);
    border:           1px solid var(--color-borde-claro);
    border-radius:    6px;
    font-size:        var(--tipo-sm);
    font-weight:      600;
    color:            var(--color-gris-oscuro);
    cursor:           pointer;
    list-style:       none;
    box-shadow:       var(--sombra-suave);
}

.listado-filtros-resumen::-webkit-details-marker {
    display: none;
}

.listado-filtros-flecha {
    margin-left: auto;
    transition:  transform 0.2s ease;
    color:       var(--color-gris-texto);
}

.listado-filtros-panel[open] .listado-filtros-flecha {
    transform: rotate(180deg);
}

.listado-filtros-badge {
    width:            8px;
    height:           8px;
    border-radius:    50%;
    background-color: var(--color-corporativo);
    flex-shrink:      0;
}

.listado-filtros-contenido {
    padding-top: 1rem;
}

@media screen and (min-width: 769px) {
    /* Escritorio: siempre todo visible, sin el botón de despliegue */
    .listado-filtros-resumen  { display: none !important; }
    .listado-filtros-contenido { display: block !important; padding-top: 0; }
}

@media screen and (max-width: 768px) {
    /* Móvil: plegado tras un único botón compacto con icono */
    .listado-filtros-resumen { display: flex; }
    .listado-filtros-contenido {
        border:            1px solid var(--color-borde-claro);
        border-top:        none;
        border-radius:     0 0 6px 6px;
        padding:           1rem;
        background-color:  var(--color-gris-claro);
        margin-top:        -1px;
    }
    .orden-fecha-selector {
        gap: 0.5rem 0.625rem;
    }
    .orden-fecha-btn {
        padding:   0.4rem 0.75rem;
        font-size: var(--tipo-xs);
    }
}

.orden-fecha-selector {
    display:       flex;
    align-items:   center;
    flex-wrap:     wrap;
    gap:           0.625rem;
    margin-bottom: 1.25rem;
}

/* Rejilla modular: cada filtro (Ordenar / Categoría / Mostrar)
   ocupa una columna igual, con la etiqueta arriba y el control
   justo debajo — en vez de ir todo en una fila suelta que se
   desalineaba al envolver en pantallas estrechas. */
.listado-filtros-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:                   1.25rem;
    align-items:           start;
}

.listado-filtros-grid > .campo-fila {
    background-color: var(--color-blanco);
    border:            1px solid var(--color-borde-claro);
    border-radius:     6px;
    padding:           0.875rem 1rem;
}

.listado-filtros-grid .campo-fila .campo-etiqueta {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
    margin-bottom: 0.1rem;
}

.listado-toggle-grupo {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
}

.listado-categoria-resumen--bloque {
    width:           100%;
    justify-content: space-between;
    background-color: var(--color-gris-claro);
}

.orden-fecha-etiqueta {
    font-size:   var(--tipo-xs);
    color:       var(--color-gris-texto);
    font-weight: 600;
}

.orden-fecha-btn {
    padding:         0.4rem 0.875rem;
    font-size:       var(--tipo-xs);
    font-weight:     600;
    color:           var(--color-gris-oscuro);
    background:      var(--color-gris-claro);
    border-radius:   var(--radio-redondo);
    text-decoration: none;
    transition:      var(--transicion-base);
}

.orden-fecha-btn:hover {
    background: var(--color-corporativo-claro);
    color:      var(--color-corporativo);
}

.orden-fecha-btn.activo {
    background: var(--color-corporativo);
    color:      #ffffff;
}

/* ============================================================
   DESPLEGABLE DE CATEGORÍA — sustituye al <select> nativo para
   que en móvil se pliegue hacia abajo dentro de la propia
   página (como el resto de filtros), en vez del listado nativo
   del sistema operativo superpuesto encima de todo. Es un <div>
   con JS propio (no un <details> anidado) para que se comporte
   igual en cualquier navegador.
   ============================================================ */
.listado-categoria-dropdown {
    display:  block;
    width:    100%;
    position: relative;
}

.listado-categoria-resumen {
    display:          inline-flex;
    align-items:      center;
    gap:              0.4rem;
    cursor:           pointer;
    padding:          0.4rem 0.875rem;
    background-color: var(--color-gris-claro);
    border:           none;
    border-radius:    var(--radio-redondo);
    font-size:        var(--tipo-xs);
    font-weight:      600;
    color:            var(--color-gris-oscuro);
}

.listado-categoria-dropdown.abierto .listado-categoria-flecha {
    transform: rotate(180deg);
}

.listado-categoria-flecha {
    transition: transform 0.2s ease;
    color:      var(--color-gris-texto);
}

.listado-categoria-opciones {
    display:           none;
    flex-direction:    column;
    gap:               0.125rem;
    margin-top:        0.5rem;
    padding:           0.5rem;
    background-color:  var(--color-blanco);
    border:            1px solid var(--color-borde-claro);
    border-radius:     6px;
    box-shadow:        var(--sombra-media);
    max-height:        280px;
    overflow-y:        auto;
    width:             100%;
}

.listado-categoria-dropdown.abierto .listado-categoria-opciones {
    display: flex;
}

.listado-categoria-opcion {
    padding:         0.55rem 0.75rem;
    border-radius:   4px;
    font-size:       var(--tipo-sm);
    line-height:     1.35;
    color:           var(--color-gris-oscuro);
    text-decoration: none;
    white-space:     normal;
    word-break:      break-word;
}

.listado-categoria-opcion:hover {
    background-color: var(--color-corporativo-claro);
}

.listado-categoria-opcion.activo {
    background-color: var(--color-corporativo);
    color:            #ffffff;
    font-weight:      600;
}

/* ============================================================
   PANEL SEO — Proyectos / Insights / Páginas
   ============================================================ */
.seo-preview-google {
    padding:          1rem 1.25rem;
    background-color: var(--color-gris-claro);
    border-radius:    8px;
    margin-bottom:    1.25rem;
    font-family:      arial, sans-serif;
}

.seo-preview-url {
    font-size: 0.8125rem;
    color:     #1a0dab;
    margin-bottom: 0.2rem;
}

.seo-preview-titulo {
    font-size:     1.125rem;
    color:         #1a0dab;
    margin-bottom: 0.2rem;
    line-height:   1.3;
}

.seo-preview-desc {
    font-size:   0.8125rem;
    color:       #4d5156;
    line-height: 1.4;
}

.seo-checklist {
    display:       flex;
    flex-direction: column;
    gap:           0.4rem;
    margin-bottom: 1.5rem;
}

.seo-check-item {
    display:      flex;
    align-items:  center;
    gap:          0.5rem;
    font-size:    var(--tipo-xs);
    padding:      0.4rem 0.75rem;
    border-radius: 6px;
}

.seo-check-item--ok {
    background: rgba(16, 122, 63, 0.08);
    color:      #107A3F;
}

.seo-check-item--fail {
    background: rgba(217, 119, 6, 0.08);
    color:      #92400E;
}

.seo-check-icono {
    font-weight: 700;
}

.seo-detalle {
    border:        1px solid var(--color-borde-claro);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow:      hidden;
}

.seo-detalle summary {
    padding:       0.75rem 1rem;
    background:    var(--color-gris-claro);
    font-weight:   600;
    font-size:     var(--tipo-sm);
    cursor:        pointer;
    list-style:    none;
}

.seo-detalle summary::-webkit-details-marker {
    display: none;
}

.seo-detalle summary::before {
    content:      '▸ ';
    color:        var(--color-corporativo);
}

.seo-detalle[open] summary::before {
    content: '▾ ';
}

.seo-detalle > *:not(summary) {
    padding: 1rem;
}

.seo-detalle .campo-fila,
.seo-detalle .editor-fila-2col {
    padding: 0;
    margin-bottom: 0.875rem;
}

.seo-contador {
    font-size: var(--tipo-xs);
    color:     var(--color-gris-texto);
    text-align: right;
    margin-top: 0.25rem;
}

.seo-contador--exceso {
    color:       #DC2626;
    font-weight: 600;
}

/* ============================================================
   GESTIÓN DE MENÚS (pantallas grandes / lateral / móvil / móvil
   dashboard) — vista de tarjetas por debajo de 850px, en vez de
   forzar 6 columnas en una sola fila. Con punto de corte propio
   (no el de 1299px de Páginas/Proyectos): estas tablas son más
   sencillas y ya caben bien en una fila hasta bastante más abajo
   que Páginas, así que no hacía falta cambiar tan pronto — pero
   por debajo de 850px, la suma de columnas ya no cabe ni
   recortando la URL al mínimo, así que ahí sí compensa pasar a
   tarjetas en dos líneas en vez de obligar el scroll horizontal.
   ============================================================ */
.menu-cards-movil { display: none; }

/* table-layout:fixed para estas 4 tablas concretas (no las de
   Páginas/Proyectos, que ya funcionan bien con auto) — con
   table-layout:auto, un max-width en una celda solo afecta a
   dónde se recortan los puntos suspensivos, pero el navegador
   puede seguir asignándole más ancho real a la columna si el
   texto de origen es largo (aunque se vea recortado). Con URLs
   largas como "agencia-de-publicidad-cantabria", eso seguía
   desbordando. table-layout:fixed sí respeta los anchos
   declarados de verdad, sin excepciones. */
.menu-tabla-desktop .tabla-panel {
    table-layout: fixed;
}

.menu-tabla-desktop .tabla-panel th:nth-child(1),
.menu-tabla-desktop .tabla-panel td:nth-child(1) { width: 44px !important; }

.menu-tabla-desktop .tabla-panel th:nth-child(3),
.menu-tabla-desktop .tabla-panel td:nth-child(3) { width: 55px !important; }

.menu-tabla-desktop .tabla-panel th:nth-child(4),
.menu-tabla-desktop .tabla-panel td:nth-child(4) { width: 55px !important; }

.menu-tabla-desktop .tabla-panel th:nth-child(5),
.menu-tabla-desktop .tabla-panel td:nth-child(5) { width: 78px !important; }

.menu-tabla-desktop .tabla-panel th:nth-child(6),
.menu-tabla-desktop .tabla-panel td:nth-child(6) { width: 150px !important; }

@media screen and (max-width: 890px) {
    .menu-tabla-desktop { display: none; }
    .menu-cards-movil   { display: flex; flex-direction: column; gap: 0.75rem; }
}

.menu-card-movil {
    background:    var(--color-blanco);
    border:        1px solid var(--color-borde-claro);
    border-radius: 8px;
    padding:       1rem;
}

.menu-card-movil-fila1 {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    flex-wrap:   wrap;
}

.menu-card-movil-fila1 strong {
    flex:      1;
    min-width: 0;
    font-size: var(--tipo-sm);
}

.menu-card-movil-fila2 {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             0.75rem;
    margin-top:      0.6rem;
    padding-top:     0.6rem;
    border-top:      1px solid var(--color-borde-claro);
}

.menu-card-movil-url {
    font-family:   monospace;
    font-size:     0.75rem;
    color:         var(--color-gris-texto);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    min-width:     0;
}

.menu-card-movil-orden {
    font-size:   var(--tipo-xs);
    color:       var(--color-gris-texto);
    white-space: nowrap;
    flex-shrink: 0;
}

.menu-card-movil-acciones {
    display:    flex;
    gap:        0.6rem;
    margin-top: 0.75rem;
}

.menu-card-movil-acciones .tabla-accion {
    flex:       1;
    text-align: center;
}

/* ============================================================
   USUARIOS — vista de tarjetas en pantallas estrechas, igual que
   ya se hizo en Gestión de Menús: 7 columnas con hasta 4 botones
   de acción no caben en una sola fila por debajo de cierto ancho,
   así que se pasa a un diseño en varias líneas por tarjeta.
   ============================================================ */
.usuarios-cards-movil { display: none; }

@media screen and (max-width: 1150px) {
    .usuarios-tabla-desktop { display: none; }
    .usuarios-cards-movil   { display: flex; flex-direction: column; gap: 0.75rem; }
}

.usuario-card-movil {
    background:    var(--color-blanco);
    border:        1px solid var(--color-borde-claro);
    border-radius: 8px;
    padding:       1rem;
}

.usuario-card-movil-fila1 {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.75rem;
    margin-bottom:   0.5rem;
}

.usuario-card-movil-fila1 strong {
    font-size: var(--tipo-sm);
}

.usuario-card-movil-correo {
    font-size:     var(--tipo-sm);
    color:         var(--color-gris-texto);
    margin:        0 0 0.6rem;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.usuario-card-movil-datos {
    display:       flex;
    flex-direction: column;
    gap:           0.3rem;
    font-size:     var(--tipo-xs);
    color:         var(--color-gris-texto);
    padding-top:   0.6rem;
    border-top:    1px solid var(--color-borde-claro);
    margin-bottom: 0.75rem;
}

.usuario-card-movil-datos strong {
    color: var(--color-gris-oscuro);
}

.usuario-card-movil-acciones {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
}

.usuario-card-movil-acciones .tabla-accion {
    flex: 1;
    min-width: 90px;
    text-align: center;
}

/* table-layout:fixed con anchos explícitos — misma lección que
   en Gestión de Menús: con auto, el correo/nombre largos pueden
   seguir empujando el ancho real de la columna aunque se corten
   visualmente. Nombre y Correo se quedan flexibles (sin ancho
   fijo), absorbiendo el resto del espacio disponible entre los
   dos a partes iguales. */
.usuarios-tabla-desktop .tabla-panel {
    table-layout: fixed;
}

.usuarios-tabla-desktop .tabla-panel th:nth-child(3),
.usuarios-tabla-desktop .tabla-panel td:nth-child(3) { width: 140px !important; }

.usuarios-tabla-desktop .tabla-panel th:nth-child(4),
.usuarios-tabla-desktop .tabla-panel td:nth-child(4) { width: 110px !important; }

.usuarios-tabla-desktop .tabla-panel th:nth-child(5),
.usuarios-tabla-desktop .tabla-panel td:nth-child(5) { width: 100px !important; }

.usuarios-tabla-desktop .tabla-panel th:nth-child(6),
.usuarios-tabla-desktop .tabla-panel td:nth-child(6) { width: 165px !important; }

.usuarios-tabla-desktop .tabla-panel th:nth-child(7),
.usuarios-tabla-desktop .tabla-panel td:nth-child(7) { width: 260px !important; }

.usuarios-tabla-desktop .tabla-panel td:nth-child(1),
.usuarios-tabla-desktop .tabla-panel td:nth-child(2) {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

/* AUDITORÍA — la columna "Detalle" no tenía ningún límite de
   ancho; con table-layout:auto (el de por defecto) el navegador
   deja que la tabla entera crezca todo lo que ese texto más largo
   necesite, desbordando. table-layout:fixed + max-width con
   puntos suspensivos (la descripción completa siempre disponible
   al pasar el ratón, vía title) — la misma solución ya usada hoy
   en Usuarios y Gestión de Menús. */
.tabla-auditoria {
    table-layout: fixed;
}

.tabla-td--auditoria-detalle {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.tabla-auditoria .cat-badge {
    max-width:     100%;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       block;
}

/* ============================================================
   AUDITORÍA — vista de tarjetas en pantallas estrechas. Las 4
   columnas fijas (Fecha/Usuario/Acción/IP) ya suman 595px por sí
   solas, sin contar Detalle — con muchas filas seguidas, el
   scroll horizontal se vuelve incómodo mezclado con el scroll
   vertical de tantos registros. Punto de corte generoso, dado el
   ancho real que necesitan esas 4 columnas juntas.
   ============================================================ */
.auditoria-cards-movil { display: none; }

@media screen and (max-width: 1300px) {
    .auditoria-tabla-desktop { display: none; }
    .auditoria-cards-movil   { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
}

.auditoria-card-movil {
    background:    var(--color-blanco);
    border:        1px solid var(--color-borde-claro);
    border-radius: 8px;
    padding:       1rem;
}

.auditoria-card-movil-fila1 {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.75rem;
    margin-bottom:   0.6rem;
}

.auditoria-card-movil-fecha {
    font-size: var(--tipo-xs);
    color:     var(--color-gris-texto);
    white-space: nowrap;
}

.auditoria-card-movil-detalle {
    font-size:     var(--tipo-sm);
    color:         var(--color-gris-oscuro);
    margin:        0 0 0.6rem;
    line-height:   1.4;
}

.auditoria-card-movil-fila3 {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             0.75rem;
    padding-top:     0.6rem;
    border-top:      1px solid var(--color-borde-claro);
    font-size:       var(--tipo-xs);
    color:           var(--color-gris-texto);
}

/* ============================================================
   RESEÑAS — a esta tabla le faltaban las clases básicas por
   completo (tabla-contenedor, tabla-td en las celdas), por eso el
   texto no se recortaba y las filas se hacían enormes. Ahora con
   table-layout:fixed (misma lección de hoy: colgroup, no th/td
   sueltos) y vista de tarjetas en pantallas estrechas.
   ============================================================ */
.tabla-resenas {
    table-layout: fixed;
}

.resenas-cards-movil { display: none; }

@media screen and (max-width: 1150px) {
    .resenas-tabla-desktop { display: none; }
    .resenas-cards-movil   { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
}

.resena-card-movil {
    background:    var(--color-blanco);
    border:        1px solid var(--color-borde-claro);
    border-radius: 8px;
    padding:       1rem;
}

.resena-card-movil-fila1 {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.75rem;
    margin-bottom:   0.6rem;
}

.resena-card-movil-texto {
    font-size:   var(--tipo-sm);
    color:       var(--color-gris-oscuro);
    line-height: 1.4;
    margin:      0 0 0.6rem;
}

.resena-card-movil-fila3 {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             0.75rem;
    padding-top:     0.6rem;
    padding-bottom:  0.75rem;
    border-top:      1px solid var(--color-borde-claro);
    font-size:       var(--tipo-xs);
    color:           var(--color-gris-texto);
}

.resena-card-movil-acciones {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
}

.resena-card-movil-acciones .tabla-accion {
    flex:       1;
    min-width:  60px;
    text-align: center;
}

/* ============================================================
   RESEÑAS — "Resumen general": los 2 bloques de campos usaban
   grid-template-columns FORZADO en línea (4 columnas / 2fr 1fr),
   que anulaba el comportamiento responsivo que ya tiene
   .editor-fila-2col (colapsar a 2 y luego a 1 columna en
   pantallas estrechas) — por eso nunca se adaptaba y los campos
   quedaban aplastados en móvil.
   ============================================================ */
.resumen-fila-4col {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                    1rem;
}

.filtro-estilo-3col {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                    1.5rem;
}

@media screen and (max-width: 1099px) and (min-width: 769px) {
    .filtro-estilo-3col { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 768px) {
    .filtro-estilo-3col { grid-template-columns: 1fr; }
}

.resumen-fila-2col {
    display:               grid;
    grid-template-columns: 2fr 1fr;
    gap:                    1rem;
    margin-top:             0.75rem;
}

@media screen and (max-width: 1099px) and (min-width: 769px) {
    .resumen-fila-4col { grid-template-columns: repeat(2, 1fr); }
    .resumen-fila-2col { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 768px) {
    .resumen-fila-4col { grid-template-columns: 1fr; }
    .resumen-fila-2col { grid-template-columns: 1fr; }
}


/* ============================================================
   HERO PRINCIPAL — alineación por dispositivo y tamaño del titular
   Rangos coherentes con el resto del CSS:
   PC >= 1100px · Tablet 769-1099px · Móvil <= 768px
   Sin clases = comportamiento anterior (nada cambia por defecto).
   ============================================================ */
.hero-contenido--alineable { max-width: none; }

@media screen and (min-width: 1100px) {
    .hero-contenido .hero-pretitulo.hero-al-pc-left,
    .hero-contenido .hero-titular.hero-al-pc-left,
    .hero-contenido .hero-descripcion.hero-al-pc-left { text-align: left; }
    .hero-contenido .hero-descripcion.hero-al-pc-left { margin-left: 0; margin-right: auto; }
    .hero-contenido .hero-acciones.hero-al-pc-left { justify-content: flex-start; }
    .hero-contenido .hero-pretitulo.hero-al-pc-center,
    .hero-contenido .hero-titular.hero-al-pc-center,
    .hero-contenido .hero-descripcion.hero-al-pc-center { text-align: center; }
    .hero-contenido .hero-descripcion.hero-al-pc-center { margin-left: auto; margin-right: auto; }
    .hero-contenido .hero-acciones.hero-al-pc-center { justify-content: center; }
    .hero-contenido .hero-pretitulo.hero-al-pc-right,
    .hero-contenido .hero-titular.hero-al-pc-right,
    .hero-contenido .hero-descripcion.hero-al-pc-right { text-align: right; }
    .hero-contenido .hero-descripcion.hero-al-pc-right { margin-left: auto; margin-right: 0; }
    .hero-contenido .hero-acciones.hero-al-pc-right { justify-content: flex-end; }
}
@media screen and (max-width: 1099px) and (min-width: 769px) {
    .hero-contenido .hero-pretitulo.hero-al-tablet-left,
    .hero-contenido .hero-titular.hero-al-tablet-left,
    .hero-contenido .hero-descripcion.hero-al-tablet-left { text-align: left; }
    .hero-contenido .hero-descripcion.hero-al-tablet-left { margin-left: 0; margin-right: auto; }
    .hero-contenido .hero-acciones.hero-al-tablet-left { justify-content: flex-start; }
    .hero-contenido .hero-pretitulo.hero-al-tablet-center,
    .hero-contenido .hero-titular.hero-al-tablet-center,
    .hero-contenido .hero-descripcion.hero-al-tablet-center { text-align: center; }
    .hero-contenido .hero-descripcion.hero-al-tablet-center { margin-left: auto; margin-right: auto; }
    .hero-contenido .hero-acciones.hero-al-tablet-center { justify-content: center; }
    .hero-contenido .hero-pretitulo.hero-al-tablet-right,
    .hero-contenido .hero-titular.hero-al-tablet-right,
    .hero-contenido .hero-descripcion.hero-al-tablet-right { text-align: right; }
    .hero-contenido .hero-descripcion.hero-al-tablet-right { margin-left: auto; margin-right: 0; }
    .hero-contenido .hero-acciones.hero-al-tablet-right { justify-content: flex-end; }
}
@media screen and (max-width: 768px) {
    .hero-contenido .hero-pretitulo.hero-al-movil-left,
    .hero-contenido .hero-titular.hero-al-movil-left,
    .hero-contenido .hero-descripcion.hero-al-movil-left { text-align: left; }
    .hero-contenido .hero-descripcion.hero-al-movil-left { margin-left: 0; margin-right: auto; }
    .hero-contenido .hero-acciones.hero-al-movil-left { justify-content: flex-start; }
    @media (min-width: 481px) { .hero-contenido .hero-acciones.hero-al-movil-left { align-items: flex-start; } }
    .hero-contenido .hero-pretitulo.hero-al-movil-center,
    .hero-contenido .hero-titular.hero-al-movil-center,
    .hero-contenido .hero-descripcion.hero-al-movil-center { text-align: center; }
    .hero-contenido .hero-descripcion.hero-al-movil-center { margin-left: auto; margin-right: auto; }
    .hero-contenido .hero-acciones.hero-al-movil-center { justify-content: center; }
    @media (min-width: 481px) { .hero-contenido .hero-acciones.hero-al-movil-center { align-items: center; } }
    .hero-contenido .hero-pretitulo.hero-al-movil-right,
    .hero-contenido .hero-titular.hero-al-movil-right,
    .hero-contenido .hero-descripcion.hero-al-movil-right { text-align: right; }
    .hero-contenido .hero-descripcion.hero-al-movil-right { margin-left: auto; margin-right: 0; }
    .hero-contenido .hero-acciones.hero-al-movil-right { justify-content: flex-end; }
    @media (min-width: 481px) { .hero-contenido .hero-acciones.hero-al-movil-right { align-items: flex-end; } }
}
@media screen and (min-width: 1100px) {
    .hero-titular.hero-tam-pc { font-size: var(--hero-tam-pc); }
}
@media screen and (max-width: 1099px) and (min-width: 769px) {
    .hero-titular.hero-tam-tablet { font-size: var(--hero-tam-tablet); }
}
@media screen and (max-width: 768px) {
    .hero-titular.hero-tam-movil { font-size: var(--hero-tam-movil); }
}


/* ============================================================
   BOTONES DE CABECERA DE PANEL (galería y sus informes)
   Grupo alineado a la derecha del título; todos con aspecto de botón.
   ============================================================ */
.panel-cabecera-botones {
    order:           2;   /* .panel-cabecera-texto tiene order:1: el título primero, los botones después */
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: flex-end;
    gap:             0.5rem;
}

.panel-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              0.35rem;
    padding:          0.55rem 1rem;
    font-size:        var(--tipo-sm);
    font-weight:      600;
    line-height:      1.2;
    color:            var(--color-oscuro-principal);
    background-color: var(--color-blanco);
    border:           1px solid var(--color-borde-claro);
    border-radius:    var(--radio-md);
    cursor:           pointer;
    white-space:      nowrap;
    text-decoration:  none;
    transition:       var(--transicion-base);
}

.panel-btn:hover {
    color:        var(--color-corporativo);
    border-color: var(--color-corporativo);
}

.panel-btn--sm {
    padding:   0.4rem 0.75rem;
    font-size: var(--tipo-xs);
}

.panel-btn--peligro {
    color: #991b1b;
}
.panel-btn--peligro:hover {
    color:        #991b1b;
    border-color: #991b1b;
}

@media screen and (max-width: 768px) {
    .panel-cabecera-botones {
        width:           100%;
        justify-content: stretch;
    }
    .panel-cabecera-botones .panel-btn {
        flex:       1 1 auto;
        white-space: normal;
        text-align:  center;
    }
}


/* ============================================================
   CABECERA — el título/subtítulo pueden ser h1-h4 (etiqueta elegible
   en el editor) sin cambiar el aspecto: mismo peso y márgenes que el
   párrafo del que se parte (los navegadores dan negrita y márgenes
   propios a los encabezados).
   ============================================================ */
h2.pagina-dinamica-descripcion,
h3.pagina-dinamica-descripcion,
h4.pagina-dinamica-descripcion {
    font-weight: 400;
    margin:      0;
}


/* ============================================================
   MENÚ PRINCIPAL — submenús desplegables en pantallas grandes
   Solo desde 1161px (donde se ve el menú horizontal). Por debajo,
   el menú horizontal no se muestra y los hijos van en el panel
   lateral. Por defecto el desplegable está oculto (display:none: no
   cuenta para medir si el menú cabe, ver menu-desbordado.js).
   ============================================================ */
.menu-submenu {
    display: none;
}

@media screen and (min-width: 1161px) {
    /* El nav tenía overflow-x:auto, que recortaba cualquier desplegable.
       Si el menú no cabe, menu-desbordado.js lo sustituye por la hamburguesa. */
    .menu-principal {
        overflow: visible;
    }

    .menu-item {
        position: relative;
    }

    .menu-caret {
        display:      inline-block;
        width:        0.4rem;
        height:       0.4rem;
        margin-left:  0.1rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform:    translateY(-0.1rem) rotate(45deg);
        flex-shrink:  0;
    }

    .menu-caret--lado {
        margin-left: auto;
        transform:   rotate(-45deg);
    }

    .menu-submenu {
        position:         absolute;
        top:              100%;
        left:             0;
        z-index:          1001;
        min-width:        13rem;
        margin:           0;
        padding:          0.4rem 0;
        list-style:       none;
        background-color: var(--cabecera-color-fondo);
        border:           1px solid var(--color-borde-claro);
        border-radius:    var(--radio-md);
        box-shadow:       0 12px 28px rgba(0, 0, 0, 0.14);
    }

    /* El desplegable arranca justo en el borde inferior de la cabecera (el enlace está centrado
       en ella) y un puente invisible, justo DEBAJO del enlace, cubre el hueco entre ambos para
       que el desplegable no se cierre al bajar el ratón. */
    .menu-item--con-submenu > .menu-submenu--nivel-1 {
        top: calc(50% + var(--altura-cabecera) / 2);
    }

    .menu-item--con-submenu::after {
        content:  '';
        position: absolute;
        left:     0;
        right:    0;
        top:      100%;
        height:   calc(var(--altura-cabecera) / 2 - 0.75rem);
        z-index:  1;
    }

    .menu-item--con-submenu:hover > .menu-submenu,
    .menu-item--con-submenu:focus-within > .menu-submenu,
    .menu-subitem--con-submenu:hover > .menu-submenu,
    .menu-subitem--con-submenu:focus-within > .menu-submenu {
        display:   block;
        animation: menu-submenu-entra 0.14s ease-out;
    }

    .menu-subitem {
        position: relative;
        display:  block;
    }

    /* Nietos: se abren a la derecha de su padre */
    .menu-submenu .menu-submenu {
        top:  -0.4rem;
        left: calc(100% - 0.25rem);
    }

    /* Abierto hacia la izquierda cuando no cabe a la derecha (lo marca menu-desbordado.js) */
    .menu-item--con-submenu > .menu-submenu--izquierda {
        left:  auto;
        right: 0;
    }
    .menu-submenu .menu-submenu--izquierda {
        left:  auto;
        right: calc(100% - 0.25rem);
    }

    .menu-sublink {
        display:     flex;
        align-items: center;
        gap:         0.6rem;
        padding:     0.55rem 1.1rem;
        font-size:   var(--tipo-sm);
        font-weight: 500;
        color:       var(--cabecera-color-texto);
        white-space: nowrap;
        transition:  var(--transicion-base);
    }

    .menu-sublink:hover,
    .menu-sublink:focus-visible {
        color:            var(--color-corporativo);
        background-color: var(--color-corporativo-suave);
    }
}

@keyframes menu-submenu-entra {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .menu-item--con-submenu:hover > .menu-submenu,
    .menu-item--con-submenu:focus-within > .menu-submenu,
    .menu-subitem--con-submenu:hover > .menu-submenu,
    .menu-subitem--con-submenu:focus-within > .menu-submenu { animation: none; }
}

/* ============================================================
   COLUMNAS EN MÓVIL: menos aire cuando se apilan
   Antes: hueco entre columnas 2rem + margen 2rem de cada bloque
   interior (imagen, título...) = ~4rem entre elementos, y el primer
   y último bloque de cada columna sumaban margen extra.
   ============================================================ */
@media screen and (max-width: 768px) {
    /* Aire arriba y abajo como padding (no margin): un margen del bloque
       se «escapa» por fuera del color de fondo del bloque y la imagen
       quedaba pegada al borde del fondo. */
    .proyecto-columnas {
        gap:     0.75rem;
        margin:  0;
        padding: 2rem 0;
    }
    .proyecto-columna > :first-child { margin-top: 0; }
    .proyecto-columna > :last-child  { margin-bottom: 0; }
    /* La imagen lleva "margin:2rem auto" en línea (style=""): hace falta
       !important, y solo en vertical para no perder el centrado. */
    .proyecto-columna > .proyecto-imagen,
    .proyecto-columna > .imagen-banner,
    .proyecto-columna > .proyecto-video,
    .proyecto-columna > .proyecto-tabla-wrap { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
    .proyecto-columna > :first-child.proyecto-imagen,
    .proyecto-columna > :first-child.imagen-banner,
    .proyecto-columna > :first-child.proyecto-video,
    .proyecto-columna > :first-child.proyecto-tabla-wrap { margin-top: 0 !important; }
    .proyecto-columna > :last-child.proyecto-imagen,
    .proyecto-columna > :last-child.imagen-banner,
    .proyecto-columna > :last-child.proyecto-video,
    .proyecto-columna > :last-child.proyecto-tabla-wrap { margin-bottom: 0 !important; }
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
    .proyecto-columnas { gap: 1.25rem; }
}

/* ============================================================
   CTA / CTA con formulario: títulos largos no desbordan
   Una palabra larga («INFRAESTRUCTURAS») en mayúsculas ensanchaba
   el bloque más que la pantalla y descentraba todo el contenido.
   ============================================================ */
.proyecto-cta,
.proyecto-cta-contenido {
    box-sizing: border-box;
    max-width:  100%;
    min-width:  0;
}
.proyecto-cta-titulo,
.proyecto-cta-subtitulo {
    max-width:     100%;
    overflow-wrap: anywhere;
    word-break:    normal;
    hyphens:       auto;
}
@media screen and (max-width: 768px) {
    .proyecto-cta-titulo { font-size: clamp(1.5rem, 7.5vw, var(--tipo-2xl)); line-height: 1.2; }
}

/* ============================================================
   RESULTADOS CON CIFRAS en móvil: sin desbordes
   Con align-items:center en columna y 1fr (que no baja del ancho
   mínimo del contenido), palabras largas (POSICIONAMIENTO, títulos
   grandes) hacían el bloque más ancho que la pantalla.
   ============================================================ */
.resultados-cifras,
.resultados-cifras .contenedor,
.resultados-cifras-superior > *,
.resultados-cifras-item { min-width: 0; }
.resultados-cifras-titulo,
.resultados-cifras-subtitulo,
.resultados-cifras-valor,
.resultados-cifras-etiqueta,
.resultados-cifras-explicacion {
    max-width:     100%;
    overflow-wrap: anywhere;
}
@media screen and (max-width: 768px) {
    .resultados-cifras-superior { align-items: stretch; }
    .resultados-cifras-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
    .resultados-cifras-titulo { font-size: clamp(1.5rem, 7vw, var(--tipo-2xl)); }
    .resultados-cifras-valor  { font-size: clamp(1.5rem, 8vw, var(--tipo-2xl)); }
    .resultados-cifras-etiqueta { font-size: clamp(0.7rem, 3.2vw, var(--tipo-sm)); }
}


/* ============================================================
   AUDITORÍA SEO / GEO: tabla con filas separadas
   ============================================================ */
.tabla-auditoria { border-collapse: collapse; width: 100%; }
.tabla-auditoria th {
    padding: 0.7rem 0.9rem;
    font-size: var(--tipo-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-gris-texto);
    background: #F8F9FA;
    border-bottom: 2px solid var(--color-borde-claro);
    white-space: nowrap;
}
.tabla-auditoria td {
    padding: 0.9rem 0.9rem;
    vertical-align: top;
    border-bottom: 1px solid var(--color-borde-claro);
}
.tabla-auditoria tbody tr:nth-child(even) { background: #FAFBFC; }
.tabla-auditoria tbody tr:hover { background: #F1F5F9; }
.tabla-auditoria tbody tr:last-child td { border-bottom: none; }
/* Cada fallo en su propia línea, con una raya fina entre uno y otro */
.auditoria-problema { padding: 0.3rem 0; line-height: 1.4; }
.auditoria-problema + .auditoria-problema { border-top: 1px dashed #E4C9A6; }
.auditoria-problema:first-child { padding-top: 0; }
.auditoria-problema:last-child { padding-bottom: 0; }
/* La columna «Qué mejorar» (penúltima) tiene un ancho mínimo cómodo; las demás se ajustan a su contenido */
.tabla-auditoria th:nth-last-child(2),
.tabla-auditoria td:nth-last-child(2) { min-width: 380px; }
.tabla-auditoria td:not(:nth-last-child(2)) { white-space: nowrap; }
.tabla-auditoria td:nth-child(3) { white-space: normal; min-width: 150px; max-width: 260px; }
.tabla-panel.tabla-auditoria { table-layout: auto; }


/* ============================================================
   BLOQUE "LISTA DE ENLACES" — título + filas «texto — detalle: enlace»
   ============================================================ */
.lista-enlaces-bloque {
    padding: var(--espacio-md, 1.5rem) 0;
}
.lista-enlaces-interior {
    margin: 0;
}
.lista-enlaces-cabecera { margin: 0 0 1rem; }
.lista-enlaces-cabecera .lista-enlaces-titulo { margin-top: 0; }
.lista-enlaces--centro  { text-align: center; }
.lista-enlaces--derecha { text-align: right; }
.lista-enlaces-titulo--sin-nivel {
    font-family: var(--fuente-titulos, serif);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--color-oscuro-principal);
}
.lista-enlaces-descripcion { margin: 0.25rem 0 0; }
.lista-enlaces-lista {
    margin: 0;
    padding-left: 1.5rem;
    line-height: 1.7;
}
.lista-enlaces-lista--ul { list-style: disc; }
.lista-enlaces-lista--ol { list-style: decimal; }
.lista-enlaces-lista--ninguno { list-style: none; padding-left: 0; }
.lista-enlaces-lista.lista-enlaces--centro  { list-style-position: inside; padding-left: 0; }
.lista-enlaces-lista.lista-enlaces--derecha { list-style-position: inside; padding-left: 0; }
.lista-enlaces-item { margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.lista-enlaces-detalle { font-style: italic; }
.lista-enlaces-enlace {
    color: var(--color-corporativo);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lista-enlaces-enlace:hover { text-decoration-thickness: 2px; }


/* Auditoría GEO: «i» de ayuda en las cabeceras y sección de ayuda */
.auditoria-info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.05rem; height: 1.05rem; margin-left: 0.2rem;
    border: 1px solid currentColor; border-radius: 50%;
    font-size: 0.68rem; font-weight: 700; font-style: italic; line-height: 1;
    text-decoration: none; text-transform: none; vertical-align: middle;
    color: var(--color-corporativo); opacity: 0.8;
}
.auditoria-info:hover { opacity: 1; background: var(--color-corporativo); color: #fff; }
.auditoria-ayuda { margin: 1rem 0 0; display: grid; gap: 0.75rem; }
.auditoria-ayuda-item { border: 1px solid var(--color-borde-claro); border-radius: 8px; padding: 0.75rem 1rem; scroll-margin-top: 1rem; }
.auditoria-ayuda-item:target { border-color: var(--color-corporativo); background: var(--color-gris-claro); }
.auditoria-ayuda dt { font-weight: 700; margin: 0 0 0.25rem; }
.auditoria-ayuda dd { margin: 0 0 0.25rem; font-size: var(--tipo-sm); line-height: 1.5; }


/* ============================================================
   AUDITORÍA ON-PAGE (Posicionamiento) — insignias y celdas
   ============================================================ */
.tabla-onpage td { vertical-align: top; }
.onpage-url { font-weight: 600; word-break: break-all; }
.onpage-sub { font-size: 0.74rem; color: var(--color-gris-texto); margin-top: 0.2rem; }
.onpage-kw { min-width: 190px; }
.onpage-kw-form { display: flex; gap: 0.35rem; align-items: center; }
.onpage-kw-form .campo-input { min-width: 0; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.onpage-badge {
    display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.onpage-badge--ok, .onpage-badge--verde   { background: #dcfce7; color: #166534; border-color: #86efac; }
.onpage-badge--medio, .onpage-badge--ambar { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.onpage-badge--mal, .onpage-badge--rojo   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.onpage-badge--naranja                    { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.tabla-onpage td:first-child { min-width: 240px; max-width: 320px; }
.tabla-onpage .auditoria-problema { font-size: 0.76rem; color: #92400e; line-height: 1.35; white-space: normal; padding: 0.25rem 0; }
.tabla-onpage th, .tabla-onpage td { white-space: normal; }

/* On-Page: URLs y títulos largos se parten en lugar de salirse de su columna */
.tabla-panel.tabla-onpage { table-layout: auto; }
.tabla-onpage td { overflow-wrap: anywhere; word-break: break-word; }
.tabla-onpage td:first-child { width: 320px; min-width: 240px; max-width: 320px; }
.tabla-onpage .onpage-url { overflow-wrap: anywhere; word-break: break-all; }
/* On-Page: anula las reglas de «tabla-auditoria» pensadas para otras columnas (nowrap y 380 px en la penúltima) */
.tabla-panel.tabla-auditoria.tabla-onpage td { white-space: normal; }
.tabla-panel.tabla-auditoria.tabla-onpage td:nth-last-child(2) { min-width: 0; }
.tabla-panel.tabla-auditoria.tabla-onpage td:nth-child(3) { min-width: 0; max-width: none; }
.tabla-panel.tabla-auditoria.tabla-onpage td:last-child { white-space: nowrap; }
.tabla-onpage .onpage-kw { min-width: 230px; }
.tabla-onpage .onpage-kw-form .campo-input { flex: 1 1 140px; min-width: 140px; }

/* ── Imágenes pendientes de revisar: una fila por imagen, un texto por sitio ── */
.tabla-alt-imagenes td { vertical-align: top; }
.alt-img-celda { width: 150px; }
.alt-img-miniatura { display:block; padding:0; border:1px solid var(--color-borde, #e5e7eb); border-radius:6px; background:#fff; cursor:zoom-in; overflow:hidden; }
.alt-img-miniatura img { display:block; width:130px; height:90px; object-fit:cover; }
.alt-img-nombre { display:block; margin-top:.35rem; font-size:.72rem; color:var(--color-gris-texto); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alt-img-usos { min-width:420px; }
.alt-uso-form { margin:0 0 .75rem; padding:.5rem .65rem; border:1px solid var(--color-borde, #e5e7eb); border-radius:6px; background:#fff; }
.alt-uso-form--defecto { background:#f8fafc; }
.alt-uso-form--mal { border-color:#f59e0b; background:#fffbeb; }
.alt-uso-etiqueta { display:block; font-size:.78rem; font-weight:600; margin-bottom:.3rem; }
.alt-uso-nota { font-weight:400; color:var(--color-gris-texto); font-size:.74rem; }
.alt-uso-campo { display:flex; gap:.35rem; align-items:center; }
.alt-uso-campo .campo-input { flex:1 1 auto; font-size:.8rem; min-width:0; }
.alt-uso-ver { font-weight:400; font-size:.74rem; margin-left:.35rem; }
.alt-uso-propio { font-weight:400; font-size:.72rem; color:#1d4ed8; margin-left:.35rem; }
.alt-uso-fallo { font-size:.76rem; color:#92400e; margin-top:.3rem; }
.alt-uso-otro { margin:.25rem 0; font-size:.74rem; color:var(--color-gris-texto); }
@media (max-width:760px) { .alt-img-usos { min-width:0; } .alt-uso-campo { flex-wrap:wrap; } }

/* ── Bloque «Iconos con título y texto» ── */
.iconos-texto-bloque { padding: 2rem 0; }
.iconos-texto-cabecera { margin-bottom: 2.5rem; }
.iconos-texto--centro { text-align: center; }
.iconos-texto--izquierda { text-align: left; }
.iconos-texto--derecha { text-align: right; }
.iconos-texto-titulo { margin: 0 0 .5rem; }
.iconos-texto-titulo--sin-nivel { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.2; }
.iconos-texto-descripcion { margin: 0 auto; max-width: 760px; color: var(--color-gris-texto, #6b7280); }
.iconos-texto--izquierda .iconos-texto-descripcion { margin-left: 0; }
.iconos-texto--derecha .iconos-texto-descripcion { margin-right: 0; }
.iconos-texto-rejilla { display: grid; gap: 2.5rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .iconos-texto-rejilla--2col, .iconos-texto-rejilla--3col, .iconos-texto-rejilla--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .iconos-texto-rejilla { row-gap: 4.5rem; } /* más aire entre filas solo en pantallas grandes */
    .iconos-texto-rejilla--3col { grid-template-columns: repeat(3, 1fr); }
    .iconos-texto-rejilla--4col { grid-template-columns: repeat(4, 1fr); }
}
.iconos-texto-items--center .iconos-texto-item { text-align: center; }
.iconos-texto-items--left .iconos-texto-item { text-align: left; }
.iconos-texto-icono { margin-bottom: 1rem; }
.iconos-texto-icono img { width: var(--iconos-texto-tam, 56px); height: var(--iconos-texto-tam, 56px); object-fit: contain; display: inline-block; }
.iconos-texto-item-titulo { margin: 0 0 .6rem; font-size: 1.25rem; line-height: 1.25; }
.iconos-texto-item-titulo a { color: inherit; text-decoration: none; }
.iconos-texto-item-titulo a:hover { text-decoration: underline; }
.iconos-texto-item-titulo--sin-nivel { font-weight: 700; }
.iconos-texto-item-texto { margin: 0; }
.iconos-texto-boton { margin-top: 2.5rem; }


/* ============================================================
   Configuración → Tipografías: tabla de tamaños y altura de línea
   ============================================================ */
.tabla-escala-tipografica { display: flex; flex-direction: column; gap: 0.75rem; }
.escala-fila { display: grid; grid-template-columns: 9rem repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-items: end; }
.escala-fila--cab { font-size: var(--tipo-xs); font-weight: 600; color: var(--color-gris-texto); text-transform: uppercase; letter-spacing: 0.04em; align-items: center; }
.escala-nombre { font-weight: 600; padding-bottom: 0.6rem; }
.escala-etq { display: none; font-size: var(--tipo-xs); color: var(--color-gris-texto); margin-bottom: 0.25rem; }
@media (max-width: 720px) {
    .escala-fila { grid-template-columns: 1fr 1fr; }
    .escala-fila--cab { display: none; }
    .escala-nombre { grid-column: 1 / -1; padding-bottom: 0; }
    .escala-etq { display: block; }
}

/* Configuración → portada con tarjetas por subsección */
.config-indice-grupo { margin-bottom: 2rem; }
.config-indice-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.config-tarjeta { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--color-borde-claro, #e2e8f0); border-radius: 12px; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s, border-color .15s; }
.config-tarjeta:hover, .config-tarjeta:focus-visible { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); border-color: var(--color-primario, #004F71); }
.config-tarjeta-icono { font-size: 1.5rem; line-height: 1; }
.config-tarjeta-titulo { font-weight: 700; font-size: var(--tipo-md, 1.1rem); }
.config-tarjeta-texto { font-size: var(--tipo-sm); color: var(--color-gris-texto); line-height: 1.5; margin: 0; }


/* ============================================================
   Columnas: contenido de la columna dentro de una «ficha»
   (borde + sombra). Si lo primero es una imagen, vídeo o banner,
   ocupa todo el ancho de la ficha, pegada arriba.
   ============================================================ */
.proyecto-columna--ficha {
    background:    #fff;
    border:        1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    box-shadow:    0 6px 24px rgba(0, 0, 0, 0.09);
    padding:       1.5rem;
    overflow:      hidden;
    align-self:    stretch; /* fichas de una misma fila con la misma altura */
}
.proyecto-columna--ficha > :first-child { margin-top: 0; }
.proyecto-columna--ficha > :last-child  { margin-bottom: 0; }
.proyecto-columna--ficha > :first-child.proyecto-imagen,
.proyecto-columna--ficha > :first-child.imagen-banner,
.proyecto-columna--ficha > :first-child.proyecto-video {
    margin: -1.5rem -1.5rem 1.25rem !important;
    max-width: none !important;
    width: calc(100% + 3rem) !important;
}
.proyecto-columna--ficha > :first-child.proyecto-imagen img { border-radius: 0; }

/* Constructor: interruptor «Ficha» en la cabecera de cada columna */
.constructor-col-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.constructor-col-ficha-opcion { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; }
.constructor-columna--ficha .constructor-col-zona { box-shadow: inset 0 0 0 2px var(--color-corporativo-claro, #E6F2F7); }

/* Ajustes de la ficha (sombra, borde, colores) dentro de la columna del constructor */
.constructor-col-ficha-ajustes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.75rem; padding: 0.5rem; background: #F6F9FB; border-bottom: 1px solid var(--color-borde-claro, #e2e8f0); font-size: var(--tipo-xs); }
.constructor-col-ficha-ajustes label { display: flex; flex-direction: column; gap: 0.2rem; font-weight: 600; }
.constructor-col-ficha-ajustes select { padding: 0.25rem 0.4rem; font-size: var(--tipo-xs); }
.constructor-col-ficha-color { display: inline-flex; align-items: center; gap: 0.35rem; }
.constructor-col-ficha-color input[type=color] { width: 36px; height: 28px; padding: 0; border: 1px solid var(--color-borde-claro, #ccc); border-radius: 6px; cursor: pointer; background: none; }
.constructor-col-ficha-color button { border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--color-gris-texto); }

/* ============================================================
   Bloque «Contacto con formulario a medida» (contacto_form)
   ============================================================ */
.contacto-form-bloque {
    position:            relative;
    background-size:     cover;
    background-position: center;
    padding:             4rem 0;
    margin:              2rem 0;
    isolation:           isolate;
}
.contacto-form-bloque--imagen::before {
    content:  "";
    position: absolute;
    inset:    0;
    background: var(--contacto-velo, rgba(0, 0, 0, 0.45));
    z-index:  -1;
}
.contacto-form-rejilla { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) {
    .contacto-form-rejilla { grid-template-columns: 1fr 1fr; gap: 4rem; }
    .contacto-form-bloque--izquierda .contacto-form-rejilla { grid-template-columns: 1fr 1fr; }
}
.contacto-form-titulo { margin: 0 0 1rem; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; color: inherit; }
.contacto-form-descripcion { margin: 0 0 1.75rem; font-size: 1.1rem; line-height: 1.6; color: inherit; opacity: 0.95; }
.contacto-form-datos { list-style: none; margin: 0; padding: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.contacto-form-dato { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; list-style: none; }
.contacto-form-dato a { color: inherit; text-decoration: none; }
.contacto-form-dato a:hover { text-decoration: underline; }
.contacto-form-dato-icono { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.contacto-form-dato-icono img { width: 1.15rem; height: 1.15rem; object-fit: contain; }

.contacto-form-ficha {
    background:    #fff;
    color:         var(--color-oscuro-principal, #111827);
    border-radius: 16px;
    box-shadow:    0 18px 50px rgba(0, 0, 0, 0.25);
    padding:       2rem;
    min-width:     0;
}
.contacto-form-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.contacto-form-campo { min-width: 0; }
.contacto-form-campo--completo { grid-column: 1 / -1; }
@media (max-width: 600px) { .contacto-form-campo--mitad { grid-column: 1 / -1; } .contacto-form-ficha { padding: 1.4rem; } }
.contacto-form-ficha .campo-etiqueta { color: #374151; }
.contacto-form-ficha .campo-input,
.contacto-form-ficha .campo-textarea { background-color: var(--color-gris-claro, #f4f6f8); border: 2px solid var(--color-borde-claro, #e2e8f0); }
.contacto-form-ficha .campo-input:hover,
.contacto-form-ficha .campo-textarea:hover { background-color: #fff; }
.contacto-form-ficha select.campo-input { appearance: auto; }
.contacto-form-req { color: #dc2626; }
.contacto-form-boton { width: 100%; margin-top: 1.25rem; cursor: pointer; text-align: center; justify-content: center; }
.contacto-form-ficha .formulario-aviso { margin-bottom: 1rem; }
.contacto-form-ficha .campo-fila--check { grid-column: 1 / -1; }

.contacto-form-ficha .contacto-form-legal { margin: 0.9rem 0 0; font-size: var(--tipo-xs); line-height: 1.5; color: var(--color-gris-texto, #6b7280); }

/* Contacto con formulario: fondo con movimiento suave (elige el movimiento en el bloque) */
.contacto-form-bloque { overflow: hidden; }
.contacto-form-fondo { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; will-change: transform; transform-origin: center; }
.contacto-form-fondo--zoom       { animation: contacto-zoom   var(--contacto-dur, 28s) ease-in-out infinite alternate; }
.contacto-form-fondo--zoom_fuera { animation: contacto-zoomf  var(--contacto-dur, 28s) ease-in-out infinite alternate; }
.contacto-form-fondo--izquierda  { animation: contacto-izq    var(--contacto-dur, 28s) ease-in-out infinite alternate; }
.contacto-form-fondo--derecha    { animation: contacto-der    var(--contacto-dur, 28s) ease-in-out infinite alternate; }
.contacto-form-fondo--arriba     { animation: contacto-arriba var(--contacto-dur, 28s) ease-in-out infinite alternate; }
.contacto-form-fondo--diagonal   { animation: contacto-diag   var(--contacto-dur, 28s) ease-in-out infinite alternate; }
@keyframes contacto-zoom    { from { transform: scale(1); }    to { transform: scale(1.12); } }
@keyframes contacto-zoomf   { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes contacto-izq     { from { transform: scale(1.12) translateX(3%); }  to { transform: scale(1.12) translateX(-3%); } }
@keyframes contacto-der     { from { transform: scale(1.12) translateX(-3%); } to { transform: scale(1.12) translateX(3%); } }
@keyframes contacto-arriba  { from { transform: scale(1.12) translateY(3%); }  to { transform: scale(1.12) translateY(-3%); } }
@keyframes contacto-diag    { from { transform: scale(1.14) translate(3%, 3%); } to { transform: scale(1.14) translate(-3%, -3%); } }
@media (prefers-reduced-motion: reduce) { .contacto-form-fondo { animation: none !important; } }


/* Selector de iconos: fondo gris claro y cuadrícula, para que se vean también los iconos blancos */
#iconografia-grid {
    background: #e2e5ea;
    gap: 0;
    padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    border-top: 1px solid #c4c9d1;
    border-left: 1px solid #c4c9d1;
}
#iconografia-grid .galeria-selector-item.icono-celda {
    background: #e2e5ea;
    border: 0;
    border-right: 1px solid #c4c9d1;
    border-bottom: 1px solid #c4c9d1;
    border-radius: 0;
    padding: 1rem;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
#iconografia-grid .galeria-selector-item.icono-celda img { width: 100%; height: 100%; max-width: 64px; max-height: 64px; object-fit: contain; }
#iconografia-grid .galeria-selector-item.icono-celda:hover { background: #d3d8df; outline: 2px solid var(--color-corporativo, #00506f); outline-offset: -2px; }

/* ============================================================
   Bloque «Imagen + texto con iconos» (imagen_destacado)
   ============================================================ */
.idest-bloque { margin: 2rem 0; background: var(--idest-fondo, #f6f6f6); overflow: hidden; }
.idest-rejilla { display: grid; grid-template-columns: 1fr; min-height: var(--idest-alto, 440px); }
@media (min-width: 900px) {
    .idest-rejilla { grid-template-columns: 1.05fr 1fr; }
    .idest-bloque--derecha .idest-rejilla { grid-template-columns: 1fr 1.05fr; }
    .idest-bloque--sin-imagen .idest-rejilla { grid-template-columns: 1fr; }
}
.idest-imagen { position: relative; min-height: 260px; background: var(--idest-acento, #e0a21b); }
.idest-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) {
    .idest-imagen--diagonal img { clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%); }
    .idest-bloque--derecha .idest-imagen--diagonal img { clip-path: polygon(0 0, 100% 0, 89% 100%, 0 100%); }
    .idest-imagen--diagonal { background: var(--idest-fondo, #f6f6f6); }
    .idest-imagen--diagonal::before {
        content: ""; position: absolute; inset: 0; background: var(--idest-acento, #e0a21b);
        clip-path: polygon(0 0, 18% 0, 4% 100%, 0 100%);
    }
    .idest-bloque--derecha .idest-imagen--diagonal::before { clip-path: polygon(82% 0, 100% 0, 100% 100%, 96% 100%); }
}
@media (max-width: 899px) { .idest-imagen--diagonal { border-bottom: 6px solid var(--idest-acento, #e0a21b); } }
.idest-panel { padding: 3rem 2rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 900px) { .idest-panel { padding: 3rem 4rem; } }
.idest-linea { display: block; width: 56px; height: 3px; background: var(--idest-acento, #e0a21b); margin-bottom: 1.6rem; }
.idest-titulo { margin: 0 0 1rem; color: var(--color-corporativo, #1f2d4d); }
.idest-texto { margin: 0 0 1rem; max-width: 60ch; color: var(--color-gris-texto, #4b5563); }
.idest-items { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.idest-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.idest-item-icono { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.idest-item-icono img { width: 52%; height: 52%; object-fit: contain; }
.idest-item-texto { font-weight: 500; line-height: 1.35; color: var(--color-corporativo, #1f2d4d); }
.idest-item-texto a { color: inherit; text-decoration: none; }
.idest-item-texto a:hover { text-decoration: underline; }
.idest-boton { margin-top: 2rem; }
.idest-boton .btn-publico { display: inline-flex; align-items: center; gap: 0.5rem; }