/* ============================================================
   AGENCIA ESTUMA — Hoja de Estilos Principal
   Archivo: css/estilos.css
   Paleta corporativa base: Verde #39EA5F
   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:          #39EA5F;
    --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__redes {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}

.barra-superior__red-social .barra-superior__icono {
    display: inline-flex;
}

.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__iconos-extra-movil {
    display: none;
}

.cabecera__icono-extra {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         0.5rem;
    color:           var(--color-oscuro-principal, #1a1a1a);
    text-decoration: none;
}

.cabecera__icono-extra svg,
.cabecera__icono-extra .icono-menu-extra {
    width:  20px;
    height: 20px;
}

.icono-menu-extra {
    width:        20px;
    height:       20px;
    object-fit:   contain;
    margin-right: 0.35rem;
}

.menu-item--extra .menu-enlace svg {
    width:        18px;
    height:       18px;
    margin-right: 0.35rem;
    flex-shrink:  0;
}

.menu-item--solo-icono .menu-etiqueta {
    /* Se sigue leyendo para lectores de pantalla, pero no ocupa
       espacio visual — así el menú no se desborda con muchos
       enlaces. */
    position: absolute;
    width:    1px;
    height:   1px;
    overflow: hidden;
    clip:     rect(0,0,0,0);
    white-space: nowrap;
}

.menu-item--solo-icono .menu-enlace svg,
.menu-item--solo-icono .menu-enlace .icono-menu-extra {
    margin-right: 0;
}

.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: hamburguesa a la izquierda, logo centrado de
   verdad (posición absoluta respecto al centro, no depende de que
   los lados pesen lo mismo), e iconos a la derecha. El menú
   horizontal desaparece por completo (el hamburguesa lo sustituye) */
body.menu-desbordado .cabecera-contenedor {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    position:        relative;
}

body.menu-desbordado .cabecera__hamburguesa {
    display: flex;
}

body.menu-desbordado .logotipo-enlace {
    position:  absolute;
    left:      50%;
    top:       50%;
    transform: translate(-50%, -50%);
}

body.menu-desbordado #menu-principal {
    display: none;
}

body.menu-desbordado .cabecera__iconos-extra-movil {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    margin-left: auto;
}

/* 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: 1220px) {
    .cabecera-contenedor {
        display:         flex !important;
        align-items:     center;
        justify-content: space-between;
        position:        relative;
    }
    .cabecera__hamburguesa {
        display: flex !important;
    }
    .logotipo-enlace {
        position:  absolute;
        left:      50%;
        top:       50%;
        transform: translate(-50%, -50%);
    }
    #menu-principal {
        display: none !important;
    }
    .cabecera__iconos-extra-movil {
        display:     flex !important;
        align-items: center;
        gap:         0.5rem;
        margin-left: auto;
    }
}

/* --- 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-medio, #C08552);
    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 B-BIS — TABLET también con barra de apps inferior
   Rango: (max-width: 1220px) and (min-width: 769px)

   Antes, en este rango tablet se mostraba el menú horizontal de
   escritorio; ahora que ese menú pasa a modo hamburguesa desde
   1220px (con más enlaces, ya no cabía), hacía falta algo visible
   para navegar sin abrir el hamburguesa cada vez — se reutiliza la
   misma barra de apps inferior que ya existe en móvil.
   ============================================================ */
@media screen and (max-width: 1220px) and (min-width: 769px) {

    :root {
        --altura-barra-app: 72px;
    }

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

    #pie-global {
        padding-bottom: var(--altura-barra-app);
    }

    /* El nav de la cabecera (con "Mi Agenda"/"Buscador" añadidos)
       se oculta aquí igual que en móvil — la barra de apps de abajo
       (con sus propios enlaces de Menú Móvil) es la que manda. */
    body:has(.menu-movil-dinamico) #menu-principal {
        display: none !important;
    }

    .menu-movil-dinamico {
        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-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.3rem;
        padding:          0.6rem 0.5rem 0.5rem;
        font-size:        0.7rem;
        font-weight:      600;
        letter-spacing:   0.05em;
        color:            var(--color-gris-texto);
        border-radius:    0;
        text-transform:   uppercase;
        background-color: transparent;
        transition:       var(--transicion-base);
    }

    .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:     block;
        font-size:   1.5rem;
        line-height: 1;
    }
}


/* ============================================================
   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: 1rem;
        --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: 0.85rem;
        --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);
}


/* ============================================================
   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:          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);
}

.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:       rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

.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: verde corporativo #39EA5F 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 verde 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(6, 40, 20, 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 verde 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: verde 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-oscuro-principal);
    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-oscuro-principal);
}

.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-oscuro-principal);
}

.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-oscuro-principal);
    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-oscuro-principal);
    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-oscuro-principal);
}

.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-oscuro-principal);
        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-oscuro-principal);
        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-oscuro-principal);
}

/* 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-oscuro-principal);
    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-oscuro-principal);
}

.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-oscuro-principal);
    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-oscuro-principal);
}

/* 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-oscuro-principal);
    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-oscuro-principal);
    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-oscuro-principal);
    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;
}

.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-oscuro-principal);
}

.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-oscuro-principal);
}

.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: #39EA5F; /* 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-oscuro-principal);
    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-oscuro-principal);
}

.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-oscuro-principal);
    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 blanco, con texto en negro */
.panel-sidebar {
    width:            260px;
    flex-shrink:      0;
    background:       #ffffff;
    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(0, 0, 0, 0.12);
}

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

/* 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(57, 234, 95, 0.10);
    border-radius: 10px;
    border:        1px solid rgba(0, 0, 0, 0.08);
}

.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:       var(--color-oscuro-principal);
    display:     block;
    line-height: 1.2;
}

.sidebar-usuario-rol {
    font-size: var(--tipo-xs);
    color:     rgba(0, 0, 0, 0.60);
    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(0, 0, 0, 0.70);
    border-radius:  8px;
    transition:     var(--transicion-base);
    position:       relative;
}

.sidebar-enlace:hover {
    background-color: rgba(0, 0, 0, 0.10);
    color:            var(--color-oscuro-principal);
}

/* Ítem ACTIVO */
.sidebar-item--activo > .sidebar-enlace {
    background:   linear-gradient(90deg, rgba(0,0,0,0.16), rgba(0,0,0,0.06));
    color:        var(--color-oscuro-principal);
    font-weight:  700;
    border-left:  3px solid var(--color-oscuro-principal);
    padding-left: calc(0.875rem - 3px);
    box-shadow:   inset 0 0 0 1px rgba(0,0,0,0.10);
}

.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(0, 0, 0, 0.18);
    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(0, 0, 0, 0.65);
    border-radius:    6px;
    transition:       var(--transicion-base);
    background-color: rgba(0, 0, 0, 0.05);
    margin-bottom:    2px;
}

/* Punto decorativo */
.subenlace-panel::before {
    content:      '';
    width:        5px;
    height:       5px;
    border-radius: 50%;
    background:   rgba(0, 0, 0, 0.25);
    flex-shrink:  0;
    transition:   var(--transicion-base);
}

.subenlace-panel:hover {
    background-color: rgba(0, 0, 0, 0.12);
    color:            var(--color-oscuro-principal);
}

.subenlace-panel:hover::before {
    background: var(--color-oscuro-principal);
}

/* Subenlace ACTIVO — marcado al seleccionar */
.subenlace-panel--activo {
    background-color: rgba(0, 0, 0, 0.16) !important;
    color:            var(--color-oscuro-principal) !important;
    font-weight:      700;
}

.subenlace-panel--activo::before {
    background: var(--color-oscuro-principal) !important;
}

/* Pie del sidebar */
.sidebar-pie {
    padding:    0.75rem;
    margin-top: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.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(0, 0, 0, 0.55);
    border-radius: 8px;
    transition:    var(--transicion-base);
}

.sidebar-cerrar-sesion:hover {
    background-color: rgba(220, 38, 38, 0.15);
    color:            #7f1d1d;
}

/* Scrollbar del sidebar */
.panel-sidebar::-webkit-scrollbar {
    width: 4px;
}
.panel-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.panel-sidebar::-webkit-scrollbar-thumb {
    background:    rgba(0, 0, 0, 0.20);
    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-oscuro-principal);
}



/* 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-oscuro-principal);
    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-oscuro-principal);
    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;
}

/* 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 de verdad (por encima de donde el menú ya cabe entero):
   menú dinámico móvil invisible. Por debajo de esto (hasta 769px),
   se deja ver — es la barra de apps que ahora también se usa en
   tablet, no solo en móvil. */
@media screen and (min-width: 1221px) {
    .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-oscuro-principal);
        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-oscuro-principal);
    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-oscuro-principal);
    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-oscuro-principal);
    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-oscuro-principal);
}

.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-oscuro-principal);
    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-oscuro-principal);
    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-oscuro-principal);
}

.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-oscuro-principal);
    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-oscuro-principal);
    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-oscuro-principal);
}

.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-oscuro-principal); 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-oscuro-principal);
    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-oscuro-principal);
    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-oscuro-principal);
    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));
    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;
}

/* Fila de 3 columnas iguales */
.editor-fila-3col {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.25rem;
    align-items:           start;
}

@media screen and (max-width: 768px) {
    .editor-fila-3col { grid-template-columns: 1fr; }
}

/* 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-oscuro-principal);
    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-oscuro-principal);
    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-oscuro-principal);
}

.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-oscuro-principal);
    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;
}

/* 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;
    text-transform: uppercase;
}

/* 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: 3rem 0;
    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;
}

.proyecto-extracto--evento {
    text-align:    left;
    font-size:     1.05rem;
    margin:        0 0 1.25rem;
}

/* 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;
}

.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 {
    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;
}

.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;
}

/* ============================================================
   BLOQUE "DESTACADOS" — banners publicitarios contratados,
   repetido al final de todas las páginas públicas
   ============================================================ */

.destacados-seccion {
    margin: 3rem 0;
}

.destacados-etiqueta {
    display:         inline-block;
    padding:         0.4rem 1rem;
    margin-bottom:   1.25rem;
    font-size:       var(--tipo-sm);
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.02em;
    color:           #ffffff;
    background:      var(--color-corporativo);
    border-radius:   var(--radio-redondo);
}

.destacados-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.25rem;
}

.destacados-tile {
    display:        block;
    overflow:       hidden;
    aspect-ratio:   3 / 2;
    border-radius:  8px;
    background:     var(--color-gris-claro);
    transition:     var(--transicion-base);
}

.destacados-tile:hover {
    opacity: 0.9;
}

.destacados-tile img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.destacados-tile-sin-imagen {
    width:   100%;
    height:  100%;
    background: var(--color-gris-claro);
}

@media (max-width: 768px) {
    .destacados-grid {
        grid-template-columns: 1fr;
    }
}

.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;
    container-type: inline-size;
    container-name: evento-tarjeta;
}

.grid-proyecto-imagen {
    position:     relative;
    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 {
    display: block;
    height:  100%;
}

/* 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);
}

/* Cuando un evento tiene categoría secundaria, los dos ribbons van
   dentro de este envoltorio en fila, en vez de superpuestos uno
   encima del otro (que es lo que pasaría si ambos usaran su propio
   position:absolute al mismo tiempo). */
.grid-proyecto-ribbons {
    position:  absolute;
    top:       0.75rem;
    left:      0.75rem;
    z-index:   2;
    display:   flex;
    flex-wrap: wrap;
    gap:       0.4rem;
    max-width: calc(100% - 1.5rem);
}

.grid-proyecto-ribbons .grid-proyecto-ribbon {
    position: static;
}

.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-enlace-titulo {
    color:           inherit;
    text-decoration: none;
}

/* El ">" (hijo directo) es a propósito: en las tarjetas de Cápsulas/
   Convocatorias/etc. "Leer más" cuelga directamente de .grid-proyecto-info,
   pero en las tarjetas de EVENTO va dentro de .evento-acciones junto
   al botón "Guardar" — sin este ">" esta regla también pillaba ese
   botón y le forzaba ancho completo, descolocando "Guardar" al lado. */
.grid-proyecto-info > .evento-btn--leer-mas {
    margin-top: auto;
    flex:       0 0 auto;
    display:    block;
    width:      100%;
}

.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-oscuro-principal);
}

.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-oscuro-principal);
    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-oscuro-principal);
    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-oscuro-principal); }
    .proyecto-card-btn--ver       { color: var(--color-gris-oscuro); }
    .proyecto-card-btn--duplicar  { color: var(--color-oscuro-principal); }
    .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-oscuro-principal);
}


/* ============================================================
   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-oscuro-principal);
    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-oscuro-principal);
    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-oscuro-principal); 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-oscuro-principal);
    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: #ffffff;
    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(0,0,0,0.15);
    flex-shrink:     0;
}

.sidebar-movil-logo {
    height:  var(--logo-panel-alto-escritorio, 32px);
    filter:  brightness(0);
}

.sidebar-movil-cerrar {
    background:  transparent;
    border:      none;
    color:       rgba(0,0,0,0.65);
    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(0,0,0,0.15);
    flex-shrink: 0;
}

.sidebar-movil-nombre {
    color:       var(--color-oscuro-principal);
    font-weight: 600;
    font-size:   var(--tipo-sm);
    margin:      0;
}

.sidebar-movil-rol {
    color:     rgba(0,0,0,0.55);
    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(0,0,0,0.70);
    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:      var(--color-oscuro-principal);
    background: rgba(0,0,0,0.08);
}

.sidebar-movil-enlace.activo {
    border-left: 3px solid var(--color-oscuro-principal);
    color: var(--color-oscuro-principal);
}

.sidebar-movil-subgrupo {
    padding-left: 2.5rem;
}

.sidebar-movil-subenlace {
    display:         block;
    padding:         0.5rem 1rem;
    color:           rgba(0,0,0,0.55);
    text-decoration: none;
    font-size:       var(--tipo-xs);
    transition:      color 0.15s;
}

.sidebar-movil-subenlace:hover { color: var(--color-oscuro-principal); }

.sidebar-movil-cerrar-sesion {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         1rem 1.25rem;
    color:           rgba(0,0,0,0.55);
    text-decoration: none;
    font-size:       var(--tipo-sm);
    border-top:      1px solid rgba(0,0,0,0.15);
    flex-shrink:     0;
    transition:      color 0.15s;
}

.sidebar-movil-cerrar-sesion:hover { color: var(--color-oscuro-principal); }

.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-oscuro-principal);
    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-oscuro-principal);
    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-oscuro-principal);
}

/* 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-oscuro-principal);
}

.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-oscuro-principal);
}

.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;
}

.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; }
}

/* ============================================================
   AGENDA CULTURAL — Tarjeta de Evento
   ============================================================ */

.evento-etiqueta-gratis {
    position:         absolute;
    top:               0.75rem;
    right:             0.75rem;
    z-index:           2;
    padding:           0.35rem 0.7rem;
    background-color:  #ffffff;
    color:             #000000;
    font-size:         var(--tipo-xs);
    font-weight:       700;
    text-transform:    uppercase;
    letter-spacing:    0.04em;
    border-radius:     var(--radio-redondo);
}

.evento-info {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.evento-enlace-titulo {
    text-decoration: none;
    color:           inherit;
}

.evento-meta-lista {
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
    margin:         0.25rem 0 0.5rem;
}

.evento-meta-fila {
    display:      flex;
    align-items:  center;
    gap:          0.4rem;
    font-size:    var(--tipo-sm);
    color:        var(--color-gris-texto);
}

.evento-meta-fila svg {
    flex-shrink: 0;
    opacity:     0.7;
}

.evento-meta-organizador {
    font-weight: 600;
    color:       var(--color-oscuro-principal);
}

.evento-comprar-entradas {
    font-weight:     700;
    color:           var(--color-corporativo);
    text-decoration: underline;
}

.evento-acciones {
    display: flex;
    gap:     0.6rem;
    margin-top: 0.4rem;
}

@container evento-tarjeta (max-width: 340px) {
    .evento-acciones {
        flex-direction: column;
    }
    .evento-btn {
        width: 100%;
    }
}

.evento-btn {
    flex:            1;
    min-width:       0;
    text-align:      center;
    padding:         0.6rem 0.9rem;
    font-size:       var(--tipo-sm);
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.03em;
    text-decoration: none;
    border-radius:   var(--radio-redondo);
    cursor:          pointer;
    transition:      var(--transicion-base);
    border:          1px solid transparent;
}

.evento-btn--leer-mas {
    background: var(--color-corporativo);
    color:      #ffffff;
}

.evento-btn--leer-mas:hover {
    opacity: 0.9;
}

.evento-btn--guardar {
    background:  transparent;
    color:       var(--color-oscuro-principal);
    border-color: var(--color-gris-claro);
}

.evento-btn--guardar:hover {
    border-color: var(--color-corporativo);
    color:        var(--color-corporativo);
}

.evento-btn--guardar.evento-btn--guardado {
    background:   var(--color-corporativo-claro);
    border-color: var(--color-corporativo);
    color:        var(--color-corporativo);
}

/* ============================================================
   AGENDA CULTURAL — Calendario mensual
   ============================================================ */

.agenda-calendario-cabecera {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             1.5rem;
    margin:          1rem 0 1.5rem;
}

.agenda-cal-titulo {
    font-family:  var(--fuente-titulos, serif);
    font-size:    clamp(1.4rem, 3vw, 2rem);
    font-weight:  700;
    margin:       0;
    min-width:    14ch;
    text-align:   center;
}

.agenda-cal-nav {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            2.25rem;
    height:           2.25rem;
    border-radius:    50%;
    background:       var(--color-gris-claro);
    color:            var(--color-oscuro-principal);
    text-decoration:  none;
    font-size:        1.1rem;
    transition:       var(--transicion-base);
}

.agenda-cal-nav:hover {
    background: var(--color-corporativo);
    color:      #ffffff;
}

.agenda-calendario-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   1px;
    background:            var(--color-gris-claro);
    border:                1px solid var(--color-gris-claro);
}

.agenda-cal-diasemana {
    background:     #ffffff;
    padding:        0.6rem;
    text-align:     center;
    font-size:      var(--tipo-xs);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--color-gris-texto);
}

.agenda-cal-celda {
    background:    #ffffff;
    min-height:    100px;
    min-width:     0;
    padding:       0.4rem;
    display:       flex;
    flex-direction: column;
    gap:           0.25rem;
}

.agenda-cal-celda--vacia {
    background: var(--color-gris-claro);
}

.agenda-cal-celda--hoy {
    background:  rgba(57, 234, 95, 0.14);
    box-shadow:  inset 0 0 0 2px var(--color-corporativo);
}

/* Botón único para tablet/móvil (oculto en escritorio) — todo el
   día es un solo enlace, en vez de intentar mostrar cada evento
   por separado en un hueco demasiado estrecho para leerlos o
   pulsarlos con precisión. */
.agenda-cal-celda-movil-boton {
    display: none;
}

@media (max-width: 1099px) {
    .agenda-cal-celda-escritorio {
        display: none;
    }
    .agenda-cal-celda-movil-boton {
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        flex:            1;
        width:           100%;
        gap:             0.4rem;
        text-decoration: none;
        color:           inherit;
        border-radius:   6px;
        transition:      background-color 0.15s;
    }
    .agenda-cal-celda-movil-boton:not(.agenda-cal-celda-movil-boton--vacio):hover,
    .agenda-cal-celda-movil-boton:not(.agenda-cal-celda-movil-boton--vacio):active {
        background-color: rgba(57, 234, 95, 0.15);
    }
    .agenda-cal-celda-movil-boton .agenda-cal-numero {
        font-size:   1rem;
        font-weight: 700;
        color:       var(--color-oscuro-principal);
    }
    /* Número + "evento(s)" en dos líneas apiladas, sobre una
       píldora verde que destaca frente al número del día (que es
       un número suelto, sin fondo) — así no se confunden entre
       sí, y cada línea es corta de sobra para caber en una
       columna estrecha (antes "6 eventos" en una sola línea casi
       no cabía). */
    .agenda-cal-celda-movil-contador {
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        line-height:     1.1;
        color:           #000000;
        background:      var(--color-corporativo);
        border-radius:   8px;
        padding:         0.2rem 0.5rem;
    }
    .agenda-cal-celda-movil-contador strong {
        font-size:   0.8rem;
        font-weight: 800;
    }
    .agenda-cal-celda-movil-contador small {
        font-size:      0.5rem;
        font-weight:    700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color:          #000000;
    }
}

.agenda-cal-numero {
    font-size:   var(--tipo-sm);
    font-weight: 600;
    color:       var(--color-gris-texto);
}

.agenda-cal-numero--enlace {
    display:         inline-block;
    text-decoration: none;
    cursor:          pointer;
    border-radius:   4px;
    padding:         0 0.15rem;
    transition:      background-color 0.15s, color 0.15s;
}

.agenda-cal-numero--enlace:hover {
    background-color: var(--color-corporativo);
    color:            #ffffff;
}

.agenda-cal-evento {
    display:         block;
    padding:         0.2rem 0.4rem;
    font-size:       0.65rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.02em;
    text-decoration: none;
    border-radius:   4px;
    overflow:        hidden;
    text-overflow:   ellipsis;
    white-space:     nowrap;
    min-width:       0;
    max-width:       100%;
}

.agenda-cal-mas {
    display:         inline-block;
    font-size:       0.65rem;
    color:           var(--color-gris-texto);
    padding:         0 0.2rem;
    text-decoration: none;
    cursor:          pointer;
    font-weight:     600;
}

.agenda-cal-mas:hover {
    color:           var(--color-corporativo);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .agenda-calendario-grid {
        grid-template-columns: repeat(7, minmax(2.4rem, 1fr));
    }
    .agenda-cal-celda {
        min-height: 78px;
        padding:    0.3rem 0.15rem;
    }
    .agenda-cal-diasemana {
        padding:   0.3rem 0.1rem;
        font-size: 0.6rem;
    }
    .agenda-cal-celda-movil-boton {
        gap: 0.3rem;
    }
    .agenda-cal-celda-movil-contador {
        padding: 0.15rem 0.4rem;
    }
    .agenda-cal-celda-movil-contador strong {
        font-size: 0.75rem;
    }
    .agenda-cal-celda-movil-contador small {
        font-size: 0.45rem;
    }
}

/* ============================================================
   PANEL — Calculadora de presupuesto de publicidad
   ============================================================ */

.calculadora-layout {
    display:               grid;
    grid-template-columns: 1fr 320px;
    gap:                   1.5rem;
    align-items:           start;
}

@media (max-width: 1024px) {
    .calculadora-layout {
        grid-template-columns: 1fr;
    }
}

.calculadora-duracion-grupo {
    display:  flex;
    flex-wrap: wrap;
    gap:      0.6rem;
}

.calculadora-duracion-btn {
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
    padding:        0.55rem 1.1rem;
    border-radius:  var(--radio-redondo);
    border:         1px solid var(--color-gris-claro);
    background:     #ffffff;
    font-weight:    600;
    font-size:      var(--tipo-sm);
    cursor:         pointer;
    transition:     var(--transicion-base);
}

.calculadora-duracion-btn.activo {
    background:  var(--color-oscuro-principal, #111827);
    border-color: var(--color-oscuro-principal, #111827);
    color:       #ffffff;
}

.calculadora-duracion-descuento {
    font-size: var(--tipo-xs);
    opacity:   0.75;
}

.calculadora-seccion-titulo {
    background:      var(--color-corporativo);
    color:           #ffffff;
    padding:         0.6rem 1rem;
    margin:          -1.75rem -1.75rem 1rem;
    border-radius:   6px 6px 0 0;
    font-size:       var(--tipo-base);
}

.calculadora-item {
    display:             grid;
    grid-template-columns: 1fr auto auto;
    align-items:         center;
    gap:                 1rem;
    padding:             0.85rem 0;
    border-bottom:       1px solid var(--color-gris-claro);
}

.calculadora-item:last-child {
    border-bottom: none;
}

.calculadora-item-nombre {
    font-weight: 700;
    margin:      0 0 0.15rem;
}

.calculadora-item-desc {
    font-size: var(--tipo-sm);
    color:     var(--color-gris-texto);
    margin:    0 0 0.3rem;
}

.calculadora-item-demanda {
    display:        inline-block;
    padding:        0.15rem 0.55rem;
    font-size:       0.65rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.03em;
    background:      var(--color-oscuro-principal, #111827);
    color:           #ffffff;
    border-radius:   var(--radio-redondo);
}

.calculadora-item-precio {
    font-weight:  700;
    white-space:  nowrap;
    text-align:   right;
}

.calculadora-item-precio span {
    font-weight: 400;
    font-size:   var(--tipo-xs);
    color:       var(--color-gris-texto);
}

.calculadora-item-stepper {
    display:      flex;
    align-items:  center;
    gap:          0.6rem;
}

.calculadora-item-stepper button {
    width:          1.8rem;
    height:         1.8rem;
    border-radius:  50%;
    border:         1px solid var(--color-gris-claro);
    background:     #ffffff;
    font-size:      1rem;
    line-height:    1;
    cursor:         pointer;
    transition:     var(--transicion-base);
}

.calculadora-item-stepper button:hover {
    background: var(--color-corporativo-claro);
    border-color: var(--color-corporativo);
}

.calculadora-item-stepper span {
    min-width:   1.5rem;
    text-align:  center;
    font-weight: 700;
}

.calculadora-resumen {
    position:         sticky;
    top:              1.5rem;
    border:           1px solid var(--color-gris-claro);
    border-radius:    6px;
    overflow:         hidden;
    background:       #ffffff;
}

.calculadora-resumen-cabecera {
    background: var(--color-oscuro-principal, #111827);
    color:      #ffffff;
    padding:    1rem 1.25rem;
    font-size:  var(--tipo-sm);
}

.calculadora-resumen-cuerpo {
    padding: 1.25rem;
}

.calculadora-resumen-lista {
    list-style: none;
    margin:     0 0 1rem;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        0.4rem;
    font-size:  var(--tipo-sm);
}

.calculadora-resumen-linea {
    display:         flex;
    justify-content: space-between;
    padding:         0.5rem 0;
    border-top:      1px solid var(--color-gris-claro);
    font-size:       var(--tipo-sm);
}

.calculadora-resumen-linea--total {
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--color-oscuro-principal);
}

/* ============================================================
   FICHA PÚBLICA DE EVENTO — bloque de información
   (fecha / lugar / organizador / entradas), bajo la cabecera
   ============================================================ */

.evento-detalle-seccion {
    padding: 1.5rem 0 0.5rem;
}

.evento-detalle-badges {
    display:      flex;
    flex-wrap:    wrap;
    gap:          0.5rem;
    margin-bottom: 1rem;
}

.evento-detalle-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             0.35rem;
    padding:         0.4rem 0.9rem;
    background:      var(--color-corporativo);
    color:           var(--color-oscuro-principal);
    font-size:       var(--tipo-xs);
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.04em;
    border-radius:   var(--radio-redondo);
    text-decoration: none;
}

.evento-detalle-card {
    background:            var(--color-gris-claro, #F4F6F8);
    border-radius:         12px;
    padding:               1.5rem;
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1rem;
    width:                 100%;
}

@media screen and (min-width: 769px) {
    .evento-detalle-card {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        align-items: stretch;
    }
}

@media screen and (max-width: 768px) {
    .evento-detalle-card {
        padding: 0.85rem;
        gap:     0.5rem;
        border-radius: 10px;
    }
    .evento-detalle-modulo {
        padding: 0.6rem 0.75rem;
        gap:     0.5rem;
        border-radius: 6px;
    }
    .evento-detalle-modulo--lugar {
        gap: 0.45rem;
    }
    .evento-detalle-submodulo {
        gap: 0.5rem;
    }
    .evento-detalle-modulo-etiqueta {
        font-size:     0.62rem;
        margin-bottom: 0.05rem;
    }
    .evento-detalle-modulo-valor {
        font-size: 0.85rem;
    }
    .evento-detalle-icono svg {
        width:  14px;
        height: 14px;
    }
    .evento-detalle-icono--lugar {
        font-size: 0.85rem;
    }
    .evento-detalle-como-llegar {
        font-size: 0.8rem;
    }
    .evento-detalle-boton {
        padding:   0.7rem 1.2rem;
        font-size: 0.85rem;
    }
}

.evento-detalle-modulo {
    display:       flex;
    align-items:   flex-start;
    gap:           0.7rem;
    background:    #ffffff;
    border-radius: 8px;
    padding:       0.9rem 1.1rem;
}

.evento-detalle-modulo .evento-detalle-icono {
    margin-top: 0.15rem;
}

/* El módulo de Lugar puede llevar dentro hasta 3 datos distintos
   (Lugar, Dirección, Cómo llegar) — cada uno con su propio icono,
   apilados en la misma caja en vez de ir todos en una sola fila. */
.evento-detalle-modulo--lugar {
    flex-direction: column;
    gap:            0.85rem;
}

.evento-detalle-submodulo {
    display:     flex;
    align-items: flex-start;
    gap:         0.7rem;
    width:       100%;
}

.evento-detalle-submodulo .evento-detalle-icono {
    margin-top: 0.15rem;
}

.evento-detalle-modulo-etiqueta {
    display:        block;
    font-size:      var(--tipo-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight:    700;
    color:          var(--color-gris-texto);
    margin-bottom:  0.2rem;
}

.evento-detalle-modulo-valor {
    margin:      0;
    font-size:   var(--tipo-base);
    font-weight: 600;
    color:       var(--color-oscuro-principal);
}

/* El botón de entradas ocupa siempre el ancho completo de la
   cuadrícula, sea cual sea el número de columnas */
.evento-detalle-boton-wrap {
    grid-column: 1 / -1;
}

.evento-detalle-fila {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    margin:      0;
    color:       var(--color-oscuro-principal);
    font-size:   var(--tipo-base);
}

.evento-detalle-icono {
    display:      inline-flex;
    flex-shrink:  0;
    opacity:      0.75;
}

.evento-detalle-como-llegar {
    font-size:       var(--tipo-sm);
    font-weight:     700;
    color:           var(--color-corporativo-oscuro, var(--color-corporativo));
    text-decoration: underline;
    white-space:     nowrap;
}

.evento-detalle-icono--lugar {
    font-size: 0.95em;
}

.evento-detalle-punto {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--color-gris-texto);
    flex-shrink:   0;
}

.evento-detalle-boton {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    margin-top:      0.5rem;
    padding:         0.75rem 1.5rem;
    background:      var(--color-corporativo);
    color:           var(--color-oscuro-principal);
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.03em;
    font-size:       var(--tipo-sm);
    border-radius:   var(--radio-redondo);
    text-decoration: none;
    align-self:      flex-start;
    transition:      var(--transicion-base);
}

.evento-detalle-boton:hover {
    opacity: 0.9;
}

.evento-detalle-boton--info {
    cursor: default;
}

@media (max-width: 600px) {
    .evento-detalle-card {
        max-width: 100%;
    }
}

/* ============================================================
   FILTRO POR CATEGORÍA — estilos texto/icono/desplegable,
   configurables por Escritorio/Tablet/Móvil (Configuración →
   Listado de cada tipo: Eventos, Cápsulas, Convocatorias,
   Recomendaciones, Directorio)
   ============================================================ */

.filtro-proyectos-envoltorio {
    display: block;
}

/* Icono con nombre debajo — oculto por defecto, el CSS de cada
   modo/ancho decide cuándo mostrarlo */
.filtro-proyectos-icono {
    display:     none;
    width:       28px;
    height:      28px;
    object-fit:  contain;
}

/* ---- Modo "icono con nombre debajo" ---- */
@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 { display: block; font-size: 0.75rem; font-weight: 600; 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 { display: block; font-size: 0.75rem; font-weight: 600; 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:       76px;
        border-radius:   12px;
    }
    .filtro-modo-movil-icono .filtro-proyectos-btn--tiene-icono .filtro-proyectos-icono { display: block; width: 24px; height: 24px; }
    .filtro-modo-movil-icono .filtro-proyectos-btn--tiene-icono span { display: block; font-size: 0.7rem; font-weight: 600; text-align: center; }
}

/* ---- Mostrar/ocultar el botón "Todos" ---- */
@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; }
}

/* ---- Modo "desplegable" ---- */
.filtro-proyectos-select {
    display:        none;
    width:          100%;
    max-width:      320px;
    padding:        0.75rem 1rem;
    font-size:      0.9rem;
    font-weight:    600;
    color:          var(--color-oscuro-principal);
    background:     #ffffff;
    border:         1px solid var(--color-gris-claro);
    border-radius:  6px;
    cursor:         pointer;
    margin-bottom:  2.5rem;
}

.filtro-proyectos-select-envoltorio {
    display:       none;
    align-items:   center;
    gap:           0.75rem;
    margin-bottom: 2.5rem;
}

.filtro-proyectos-select-envoltorio .filtro-proyectos-select {
    margin-bottom: 0;
    width:         auto;
    flex:          1;
}

.filtro-proyectos-select-etiqueta {
    font-size:      0.9rem;
    font-weight:    600;
    white-space:    nowrap;
    color:          var(--color-oscuro-principal);
}

@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; }
}

/* ============================================================
   BUSCADOR DE EVENTOS — página especial alternativa a la Agenda
   con calendario (buscador de texto + chips + fechas + orden)
   ============================================================ */

/* Panel único: todo el buscador agrupado en una tarjeta con
   borde/sombra propios, en vez de elementos sueltos flotando
   directamente sobre el fondo de la página. */
.buscador-eventos-panel {
    background:       #ffffff;
    border:           1px solid var(--color-borde-claro, #e5e7eb);
    border-radius:    12px;
    box-shadow:       var(--sombra-suave);
    padding:          1.5rem 1.75rem;
    margin-bottom:    2rem;
}

.buscador-eventos-caja {
    margin-bottom: 1rem;
}

/* Desplegable "Filtros de búsqueda" — cerrado de entrada, el
   usuario decide si lo abre. Categorías/fecha/orden/botones solo
   se ven cuando lo despliega; el buscador de texto de arriba
   siempre está visible y funciona por su cuenta (Intro busca). */
.buscador-eventos-filtros-detalle {
    margin-top: 0;
}

.buscador-eventos-filtros-resumen {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              0.5rem;
    padding:          0.75rem 1rem;
    background-color: var(--color-gris-claro, #f4f6f8);
    border-radius:    8px;
    cursor:           pointer;
    font-weight:      600;
    font-size:        var(--tipo-sm);
    color:            var(--color-oscuro-principal);
    list-style:       none;
    user-select:      none;
}

.buscador-eventos-filtros-resumen::-webkit-details-marker {
    display: none;
}

.buscador-eventos-filtros-flecha {
    width:      18px;
    height:     18px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color:      var(--color-gris-texto);
}

.buscador-eventos-filtros-detalle[open] .buscador-eventos-filtros-flecha {
    transform: rotate(180deg);
}

.buscador-eventos-filtros-cuerpo {
    padding-top: 1rem;
}

/* ============================================================
   SECCIÓN PLEGABLE genérica — mismo patrón visual que el
   desplegable "Filtros de búsqueda" de arriba, reutilizable en
   cualquier otra sección que convenga recoger de entrada (por
   ejemplo, "Eventos gratuitos" en la Agenda con calendario).
   ============================================================ */
.seccion-plegable-resumen {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              0.5rem;
    padding:          0.85rem 1.25rem;
    background-color: var(--color-gris-claro, #f4f6f8);
    border-radius:    8px;
    cursor:           pointer;
    font-weight:      700;
    font-size:        var(--tipo-md, 1.1rem);
    color:            var(--color-oscuro-principal);
    list-style:       none;
    user-select:      none;
}

.seccion-plegable-resumen::-webkit-details-marker {
    display: none;
}

.seccion-plegable-flecha {
    width:       18px;
    height:      18px;
    flex-shrink: 0;
    transition:  transform 0.2s ease;
    color:       var(--color-gris-texto);
}

details[open] > .seccion-plegable-resumen .seccion-plegable-flecha {
    transform: rotate(180deg);
}

.seccion-plegable-cuerpo {
    padding-top: 1.5rem;
}

.buscador-eventos-input {
    width:          100%;
    padding:        0.85rem 1.15rem;
    font-size:       1rem;
    color:          var(--color-oscuro-principal);
    background:     var(--color-gris-claro, #f4f6f8);
    border:         1px solid var(--color-gris-claro);
    border-radius:  8px;
}

.buscador-eventos-input:focus {
    outline:      none;
    border-color: var(--color-corporativo);
    background:   #ffffff;
}

/* Dentro del panel, el envoltorio del filtro de categorías no
   necesita el margen inferior grande que tiene por defecto (ya
   lo separa el padding del propio panel) */
.buscador-eventos-panel .filtro-proyectos-envoltorio {
    margin-bottom: 1rem;
}
.buscador-eventos-panel .filtro-proyectos {
    margin-bottom: 0;
}
.buscador-eventos-panel .filtro-proyectos-select,
.buscador-eventos-panel .filtro-proyectos-select-envoltorio {
    margin-bottom: 0;
}

/* Fila compacta final: Desde / Hasta / Ordenar / Buscar / Borrar,
   todo alineado en la misma línea (se envuelve solo si no cabe) */
.buscador-eventos-fila-compacta {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     end;
    gap:             1rem;
    padding-top:     1rem;
    border-top:      1px solid var(--color-gris-claro, #eef0f2);
}

.buscador-eventos-fila-compacta .campo-fila {
    flex:      0 1 160px;
    min-width: 140px;
}

.buscador-eventos-fila-compacta .campo-etiqueta {
    font-size:     var(--tipo-xs);
    margin-bottom: 0.3rem;
    display:       block;
}

.buscador-eventos-fila-compacta .campo-input {
    background:   var(--color-gris-claro, #f4f6f8);
    border:       1px solid var(--color-gris-claro);
    width:        100%;
    min-width:    0;
    max-width:    100%;
    box-sizing:   border-box;
}

/* iOS/Safari: el <input type="date"> nativo tiene un ancho mínimo
   interno propio (los huecos de día/mes/año + el icono de
   calendario) que a veces ignora el width:100% normal del CSS y
   se sale de su propia caja — esto lo fuerza a respetar el ancho
   real disponible, sea cual sea. */
.buscador-eventos-fila-compacta input[type="date"] {
    min-width:  0;
    max-width:  100%;
    box-sizing: border-box;
}

.buscador-eventos-acciones {
    display:       flex;
    gap:           0.6rem;
    flex-wrap:     wrap;
    margin-top:    1rem;
    margin-bottom: 1rem;
}

.buscador-eventos-contador {
    font-size:     var(--tipo-sm);
    color:         var(--color-gris-texto);
    margin-bottom: 1rem;
    /* Para que al bajar aquí con "Buscar evento" no quede tapado
       bajo la cabecera fija de arriba */
    scroll-margin-top: calc(var(--altura-cabecera) + var(--altura-barra-superior, 0px) + 1.5rem);
}

@media screen and (max-width: 768px) {
    .buscador-eventos-panel {
        padding: 0.75rem;
        margin-bottom: 1rem;
        border-radius: 8px;
    }

    /* Buscador de texto: bajo, pero con letra de al menos 16px —
       por debajo de eso, iOS/Safari amplía la pantalla al enfocar
       el campo (piensa que el texto es demasiado pequeño para
       leerlo), aunque el propio campo sea compacto en alto. */
    .buscador-eventos-caja {
        margin-bottom: 0.5rem;
    }
    .buscador-eventos-input {
        padding:       0.5rem 0.75rem;
        font-size:     16px;
        border-radius: 6px;
    }

    .buscador-eventos-filtros-resumen {
        padding:   0.6rem 0.85rem;
        font-size: 0.8rem;
    }
    .buscador-eventos-filtros-cuerpo {
        padding-top: 0.75rem;
    }

    /* Chips de categoría: compactos de verdad */
    .buscador-eventos-panel .filtro-proyectos-envoltorio {
        margin-bottom: 0.5rem;
    }
    .buscador-eventos-panel .filtro-proyectos {
        gap: 0.3rem;
        margin-bottom: 0;
    }
    .buscador-eventos-panel .filtro-proyectos-btn {
        padding:   0.28rem 0.6rem;
        font-size: 0.7rem;
    }
    .buscador-eventos-panel .filtro-proyectos-select {
        padding:       0.5rem 0.7rem;
        font-size:     0.8rem;
        border-radius: 6px;
    }

    /* Fila de fecha/orden/botones: campos bajos, etiquetas mínimas */
    .buscador-eventos-fila-compacta {
        flex-direction: column;
        align-items:    stretch;
        gap:            0.4rem;
        padding-top:    0.5rem;
        overflow-x:     hidden;
    }
    .buscador-eventos-fila-compacta .campo-fila {
        flex: 1 1 auto;
        min-width: 0;
    }
    .buscador-eventos-fila-compacta .campo-etiqueta {
        font-size:     0.65rem;
        margin-bottom: 0.15rem;
    }
    .buscador-eventos-fila-compacta .campo-input {
        padding:       0.5rem 0.65rem;
        font-size:     0.85rem;
        border-radius: 6px;
    }
    .buscador-eventos-acciones {
        margin-left:   0;
        width:         100%;
        gap:           0.4rem;
        margin-top:    0.75rem;
        margin-bottom: 0.75rem;
    }
    .buscador-eventos-acciones .btn-publico {
        flex: 1;
        justify-content: center;
        padding:   0.55rem 0.8rem !important;
        font-size: 0.8rem !important;
    }

    /* El contador tiene menos aire antes de la rejilla de eventos */
    .buscador-eventos-contador {
        margin-bottom: 0.5rem;
        font-size:     0.75rem;
    }
}

/* ============================================================
   PÁGINA "DÍA DE AGENDA" — botón de volver, encima de la
   cabecera de navegación día anterior/siguiente (reutiliza
   .agenda-calendario-cabecera / .agenda-cal-nav / .agenda-cal-titulo)
   ============================================================ */
.dia-eventos-volver {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    font-size:       var(--tipo-sm);
    font-weight:     600;
    color:           var(--color-gris-texto);
    text-decoration: none;
    margin-bottom:   1rem;
    transition:      color 0.15s;
}

.dia-eventos-volver svg {
    width:  18px;
    height: 18px;
    flex-shrink: 0;
}

.dia-eventos-volver:hover {
    color: var(--color-corporativo-oscuro, var(--color-corporativo));
}

/* ============================================================
   "MI AGENDA" — eventos guardados por el visitante (localStorage)
   ============================================================ */
.mi-agenda-titulo-guardados {
    margin-top: 2.5rem;
}

.mi-agenda-quitar {
    display:         block;
    width:           100%;
    background:      none;
    border:          none;
    border-top:      1px solid var(--color-gris-claro, #eef0f2);
    padding:         0.6rem 1.25rem;
    font-size:       var(--tipo-xs);
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.03em;
    color:           var(--color-gris-texto);
    cursor:          pointer;
    text-align:      center;
    transition:      color 0.15s;
}

.mi-agenda-quitar:hover {
    color: #C0392B;
}

/* ============================================================
   CARRUSELES (Eventos / Secciones) — tarjetas con título
   superpuesto sobre la imagen, deslizables horizontalmente
   ============================================================ */
.carrusel-bloque-contenedor {
    padding: 2rem 0;
}

.carrusel-wrap {
    position: relative;
}

.carrusel-track {
    display:            flex;
    gap:                1rem;
    overflow-x:         auto;
    scroll-snap-type:   x mandatory;
    scrollbar-width:    none;
    -ms-overflow-style: none;
    padding:            0.25rem 0.25rem 0.75rem;
}

.carrusel-track::-webkit-scrollbar {
    display: none;
}

.carrusel-item {
    position:         relative;
    flex:             0 0 260px;
    height:           300px;
    border-radius:    12px;
    overflow:         hidden;
    scroll-snap-align: start;
    text-decoration:  none;
    display:          block;
    background:       #1a1a1a;
    box-shadow:       0 2px 10px rgba(0,0,0,0.12);
}

.carrusel-item-imagen {
    position: absolute;
    inset:    0;
}

.carrusel-item-imagen img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.carrusel-item-overlay {
    position:   absolute;
    left: 0; right: 0; bottom: 0;
    padding:    1.1rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 20%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0) 100%);
}

.carrusel-item-titulo {
    color:            #ffffff;
    font-weight:      700;
    font-size:        0.92rem;
    line-height:      1.35;
    letter-spacing:   0.01em;
    display:          -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow:         hidden;
}

.carrusel-flecha {
    position:         absolute;
    top:              50%;
    transform:        translateY(-50%);
    width:            42px;
    height:           42px;
    border-radius:    50%;
    border:           none;
    background:       rgba(255,255,255,0.92);
    box-shadow:       0 2px 10px rgba(0,0,0,0.25);
    font-size:        1.5rem;
    line-height:      1;
    color:            var(--color-oscuro-principal, #1a1a1a);
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    z-index:          2;
    transition:       var(--transicion-base);
}

.carrusel-flecha:hover {
    background: #ffffff;
}

.carrusel-flecha--siguiente {
    right: 6px;
}

.carrusel-flecha--anterior {
    left: 6px;
}

@media screen and (max-width: 768px) {
    .carrusel-item {
        flex:   0 0 210px;
        height: 240px;
    }
    .carrusel-flecha {
        width:  36px;
        height: 36px;
    }
}

/* ============================================================
   MAPA DE EVENTOS (Leaflet + OpenStreetMap)
   ============================================================ */
.mapa-eventos-contenedor {
    padding-top: 2rem;
}

.mapa-eventos-caja {
    width:         100%;
    height:        480px;
    border-radius: 12px;
    overflow:      hidden;
    margin-bottom: 2rem;
    background:    var(--color-gris-claro, #F4F6F8);
    z-index:       1;
}

@media screen and (max-width: 768px) {
    .mapa-eventos-caja {
        height: 340px;
    }
}

.mapa-eventos-marcador-envoltorio {
    background: none;
    border:     none;
}

.mapa-eventos-marcador {
    position:        relative;
    width:           34px;
    height:          34px;
    border-radius:   50% 50% 50% 0;
    transform:       rotate(-45deg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 2px 6px rgba(0,0,0,0.35);
    border:          2px solid #ffffff;
}

.mapa-eventos-marcador img {
    width:     18px;
    height:    18px;
    transform: rotate(45deg);
    filter:    brightness(0) invert(1);
}

.mapa-eventos-popup {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
    min-width:      160px;
    max-width:      220px;
}

.mapa-eventos-popup--varios {
    max-height:    280px;
    overflow-y:    auto;
    gap:           0;
}

.mapa-eventos-popup-item {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}

.mapa-eventos-popup--varios .mapa-eventos-popup-item {
    padding-bottom: 0.6rem;
    margin-bottom:  0.6rem;
    border-bottom:  1px solid var(--color-borde-claro, #eee);
}

.mapa-eventos-popup--varios .mapa-eventos-popup-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mapa-eventos-marcador-cuenta {
    position:         absolute;
    top:              -6px;
    right:            -6px;
    background:       #ffffff;
    color:            var(--color-oscuro-principal, #1a1a1a);
    font-size:        0.65rem;
    font-weight:      800;
    width:            18px;
    height:           18px;
    border-radius:    50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    box-shadow:       0 1px 3px rgba(0,0,0,0.4);
    transform:        rotate(45deg);
}

.mapa-eventos-popup img {
    width:         100%;
    height:        90px;
    object-fit:    cover;
    border-radius: 6px;
    margin-bottom: 0.3rem;
}

.mapa-eventos-popup strong {
    font-size:   0.9rem;
    line-height: 1.3;
    color:       var(--color-oscuro-principal, #1a1a1a);
}

.mapa-eventos-popup span {
    font-size: 0.78rem;
    color:     var(--color-gris-texto, #666);
}

.mapa-eventos-popup-fecha {
    font-weight: 600;
}

.mapa-eventos-popup a {
    font-size:      0.8rem;
    font-weight:    700;
    color:          var(--color-corporativo, #39EA5F);
    text-decoration: none;
    margin-top:     0.2rem;
}

.leaflet-popup-content-wrapper {
    border-radius: 10px;
}

.proyecto-imagen-copyright {
    font-size:   0.78rem;
    font-style:  italic;
    color:       var(--color-gris-texto, #888);
    margin:      0.75rem 0 0;
    padding-top: 0.75rem;
}

/* Copyright del bloque Imagen del constructor — puede ir debajo
   (como una línea de texto más) o superpuesto sobre la propia
   imagen, en la esquina inferior derecha. */
.proyecto-imagen-envoltorio {
    position: relative;
    display:  block;
}

.proyecto-imagen-copyright--debajo {
    display:     block;
    text-align:  right;
    margin-top:  0.4rem;
    padding-top: 0;
}

.proyecto-imagen-copyright--superpuesto {
    position:      absolute;
    right:         0.6rem;
    bottom:        0.6rem;
    margin:        0;
    padding:       0.25rem 0.6rem;
    background:    rgba(0,0,0,0.55);
    color:         #ffffff;
    font-style:    normal;
    border-radius: 4px;
}


.listado-orden-fila {
    display:       flex;
    align-items:   center;
    gap:           0.6rem;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

.listado-orden-select {
    width:    auto;
    max-width: 220px;
}

.barra-superior__idiomas-wrap {
    position: relative;
}

.barra-superior__idiomas-btn {
    display:        flex;
    align-items:    center;
    gap:            0.35rem;
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        0.2rem 0.3rem;
    border-radius:  4px;
    color:          inherit;
    transition:     var(--transicion-base);
}

.barra-superior__idiomas-btn:hover {
    background: rgba(255,255,255,0.25);
}

.barra-superior__bandera {
    display:       inline-flex;
    width:         20px;
    height:        14px;
    border-radius: 2px;
    overflow:      hidden;
    box-shadow:    0 0 0 1px rgba(0,0,0,0.15);
    flex-shrink:   0;
}

.barra-superior__bandera svg {
    width:  100%;
    height: 100%;
    display: block;
}

.barra-superior__idiomas-flecha {
    transition: transform 0.15s;
}

.barra-superior__idiomas-btn[aria-expanded="true"] .barra-superior__idiomas-flecha {
    transform: rotate(180deg);
}

.barra-superior__idiomas-menu {
    display:        none;
    flex-direction: column;
    position:       absolute;
    top:            calc(100% + 0.5rem);
    left:           0;
    background:     #ffffff;
    border-radius:  8px;
    box-shadow:     0 4px 16px rgba(0,0,0,0.18);
    padding:        0.4rem;
    min-width:      170px;
    z-index:        1200;
}

.barra-superior__idiomas-menu--abierto {
    display: flex;
}

.barra-superior__idiomas-opcion {
    display:         flex;
    align-items:     center;
    gap:             0.55rem;
    background:      none;
    border:          none;
    cursor:          pointer;
    width:           100%;
    text-align:      left;
    padding:         0.5rem 0.6rem;
    border-radius:   6px;
    font-size:       var(--tipo-sm);
    color:           var(--color-oscuro-principal, #1a1a1a);
    transition:      var(--transicion-base);
}

.barra-superior__idiomas-opcion:hover {
    background: var(--color-gris-claro, #f4f6f8);
}

.barra-superior__idiomas-opcion--actual {
    opacity: 0.55;
    cursor:  default;
}



.boton-peligro {
    background:    #E5484D;
    color:         #ffffff;
    border:        none;
    border-radius: 6px;
    padding:       0.6rem 1.2rem;
    font-size:     var(--tipo-sm);
    font-weight:   600;
    cursor:        pointer;
    transition:    var(--transicion-base);
}

.boton-peligro:hover {
    background: #C93A3E;
}

.panel-vacio {
    padding:       2.5rem;
    text-align:    center;
    color:         var(--color-gris-texto, #666);
    background:    var(--color-gris-claro, #f4f6f8);
    border-radius: 8px;
}

.subida-progreso {
    align-items:  center;
    gap:          0.6rem;
    width:        100%;
    margin-top:   0.6rem;
}

.subida-progreso-track {
    flex:          1;
    height:        8px;
    background:    var(--color-gris-claro, #e8ecf0);
    border-radius: 4px;
    overflow:      hidden;
}

.subida-progreso-barra {
    height:      100%;
    background:  var(--color-corporativo, #39EA5F);
    border-radius: 4px;
    transition:  width 0.15s ease-out;
}

.subida-progreso-texto {
    font-size:   0.75rem;
    font-weight: 600;
    color:       var(--color-gris-texto, #666);
    min-width:   2.5rem;
    text-align:  right;
}

.constructor-checkboxes-categoria {
    max-height:    180px;
    overflow-y:    auto;
    border:        1px solid var(--color-borde-claro, #e2e2e2);
    border-radius: 6px;
    padding:       0.6rem 0.75rem;
    background:    #ffffff;
}