/* ========================================
   ComunicArte - Estilos principales
   Mobile-first responsive design
   ======================================== */

/* --- Variables CSS --- */
:root {
    --color-primary: #FFCF02;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-gray: #0A0A0A;
    --color-dark: #171717;    /* negro suavizado para el contenido del detalle de proyecto */
    --color-surface: #525252; /* gris del logo ("impulso creativo"), superficie elevada sobre el negro */
    --color-surface-section: #2e2e2e; /* gris de fondo de sección, más oscuro que --color-surface para que las tarjetas elevadas sigan destacando encima */
    --color-accent: #FFCF02;
    --font-body: 'Outfit', sans-serif;
    --font-heading: 'Outfit', sans-serif;
    --max-width: 1200px;
    --nav-height: 85px;
}

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

html {
    scroll-behavior: smooth;
    /* Cursor circular AMARILLO por defecto (fondo oscuro del sitio) */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23FFCF02'/%3E%3C/svg%3E") 10 10, auto;
}

/* Cursor circular NEGRO sobre secciones claras (para que se vea) */
.section--light,
.navbar,
.contacto-section {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23000000'/%3E%3C/svg%3E") 10 10, auto;
}

/* Nunca la "mano" del navegador: enlaces y controles usan el mismo círculo que su
   sección (heredan el color). Los inputs de texto conservan su cursor propio. */
a,
button,
summary,
label,
select {
    cursor: inherit;
}

/* Botones con relleno AMARILLO: cursor negro para que se vea sobre ellos
   (no afecta a los de línea/outline, que van sobre fondo oscuro) */
.escena__cta:not(.escena__cta--linea),
.proyecto-nav__all,
.filtro-btn--activo,
.contacto-fab,
.btn-volver-arriba {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23000000'/%3E%3C/svg%3E") 10 10, auto;
}

/* Cuando el botón amarillo se invierte a negro (al pasar el punto), cursor amarillo */
.escena__cta.sobre-punto {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23FFCF02'/%3E%3C/svg%3E") 10 10, auto;
}

body {
    font-family: var(--font-body);
    color: var(--color-black);
    font-size: 1.1rem;
    line-height: 1.7;
    letter-spacing: 0.005em;
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Los bloques a sangre usan width: 100vw, que incluye la barra de scroll
       vertical y desbordaba unos px a la derecha (scroll lateral). `clip` evita
       ese scroll sin crear un contenedor de scroll (no rompe position: sticky). */
    overflow-x: clip;
}

a,
button,
.proyecto-card,
.hamburger,
.filtro-btn,
.btn-volver-arriba {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23FFCF02'/%3E%3C/svg%3E") 10 10, pointer;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

ul {
    list-style: none;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* --- Contenedor --- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ========================================
   Navegación
   ======================================== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--color-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    height: var(--nav-height);
    transition: box-shadow 0.3s ease, background-color 0.3s ease, height 0.3s ease;
}

.navbar--scrolled {
    height: 70px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    background-color: var(--color-white);
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.nav-logo {
    flex-shrink: 0;
}

.nav-logo img {
    height: 50px;
    width: auto;
}

/* Hamburguesa */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: inherit;
    padding: 0.5rem;
    z-index: 1001;
}

.hamburger span {
    display: block;
    width: 26px;
    height: 3px;
    background-color: var(--color-black);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Menú móvil */
.nav-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background-color: var(--color-white);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.nav-menu.open {
    max-height: 70vh;
    overflow-y: auto;
    visibility: visible;
}

/* Al hacer scroll la navbar mide 70px: el menú fijo debe seguirla (evita hueco). */
.navbar--scrolled .nav-menu {
    top: 70px;
}

.nav-menu li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nav-menu a {
    display: block;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-black);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-menu a:hover {
    background-color: rgba(255, 207, 2, 0.16);
    color: var(--color-black);
}

/* Enlace de la página actual */
.nav-menu a.nav-link--active {
    color: var(--color-black);
    font-weight: 600;
    background-color: rgba(255, 207, 2, 0.16);
}

/* Desplegable "Servicios": en móvil es un acordeón dentro del menú */
.nav-desplegable__boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.5rem;
    background: none;
    border: 0;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-black);
    cursor: pointer;
}

.nav-desplegable__boton::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
}

.nav-item--desplegable.abierto > .nav-desplegable__boton::after {
    transform: rotate(-135deg) translateY(-2px);
}

.nav-desplegable__boton.nav-link--active {
    font-weight: 600;
}

.nav-submenu {
    display: none;
    background-color: rgba(0, 0, 0, 0.03);
}

.nav-item--desplegable.abierto > .nav-submenu {
    display: block;
}

.nav-submenu a {
    padding-left: 2.5rem;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

/* Selector de idioma ES / EN: toggle de dos posiciones en píldora. */
.nav-lang {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 20px;
}

.nav-lang__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 0.3rem 0.65rem;
    border-radius: 16px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-black);
    opacity: 0.55;
    transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.nav-lang__opt:hover {
    opacity: 0.85;
}

.nav-lang__opt--activo,
.nav-lang__opt--activo:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    opacity: 1;
}

/* ========================================
   Secciones generales
   ======================================== */
.section-title,
.page-title {
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    font-weight: 600;
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

.title-accent {
    font-weight: 600;
    position: relative;
}

.section-title::after,
.page-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--color-primary);
    margin: 0.75rem auto 0;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.page-header {
    padding: 4rem 0 2rem;
    text-align: center;
}

/* Variante de cabecera con foto de fondo (arte contemporáneo).
   La plantilla solo aporta la foto (background-image: url(...)); el fundido a
   negro lo pone este ::after para que la imagen forme parte de la página. */
.page-header--cover {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42vh;
    min-height: 42svh;
    background-size: cover;
    background-position: center;
    background-color: var(--color-black);
    padding: 4rem 0;
    overflow: hidden;
}

.page-header--cover .container {
    width: 100%;
}

/* En tablet/móvil el header 72vh dejaba demasiado hueco vacío alrededor del título;
   lo reducimos a una banda más ajustada (el escritorio se mantiene cinematográfico). */
@media (max-width: 1024px) {
    .page-header--cover {
        min-height: 340px;
        padding: 3.5rem 0;
    }
}

@media (max-width: 600px) {
    .page-header--cover {
        min-height: 280px;
        padding: 2.5rem 0;
    }
}

.page-header--cover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4) 55%, #000 100%);
}

.page-header--cover .container {
    position: relative;
    z-index: 1;
}

.page-header--cover .page-title {
    color: var(--color-white);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
    font-size: clamp(2.8rem, 7.2vw, 5.8rem);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.03em;
    text-align: left;
    margin: 0;
}

/* Variante de título grande en amarillo (como "¿Qué ofrecemos?" / "Nuestro
   Trabajo" de la web antigua): Servicios, Proyectos y Conócenos. */
.page-header--cover .page-title.page-title--acento {
    color: var(--color-primary);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.page-header--cover .page-title::after {
    margin-left: 0;
    margin-right: 0;
}

/* Galería de arte contemporáneo: marco amarillo de marca alrededor del
   mosaico de fotos (como el fondo amarillo de la galería de la página de
   contacto, adaptado a este formato de tarjetas con esquinas redondeadas). */
.galeria-arte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.25rem;
    border-radius: 16px;
    background-color: var(--color-primary);
}

.galeria-arte .obra {
    position: relative;
    margin: 0;
    transition: transform 0.3s ease;
}

.galeria-arte .obra img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
    display: block;
}

/* Punto amarillo "obra reservada": guiño a las galerías de arte
   (mismo gesto que el punto del logo ComunicArte) */
.galeria-arte .obra::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Prueba: punto amarillo grande que se entrelaza con las secciones (solo home) */
.scroll-dot {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(180px, 32vw, 340px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    z-index: 1;             /* por debajo de la navbar (1000) */
    overflow: hidden;
    transition: opacity 0.3s ease;
    /* auto solo importa donde el punto asoma por delante de otro contenido:
       el resto queda tapado por secciones con z-index mayor, así que el hover
       solo responde en la parte realmente visible del círculo. */
    pointer-events: auto;
}

/* Secciones que TAPAN el punto por completo (fondo opaco por encima) */
.home-capa-cubre {
    position: relative;
    z-index: 2;
}

/* Secciones donde el punto queda POR DETRÁS del contenido: el .container
   (transparente) se eleva por encima del punto, así el texto y las tarjetas
   quedan legibles y el punto asoma por los huecos y márgenes. */
.home-capa-detras > .container {
    position: relative;
    z-index: 2;
}

/* El texto amarillo (acentos, kicker) que queda sobre el punto cambia a negro
   para no confundirse con el amarillo del punto. La clase la pone main.js. */
.title-accent,
.escena__kicker {
    transition: color 0.25s ease;
}

.title-accent.sobre-punto,
.escena__kicker.sobre-punto {
    color: var(--color-black);
}

/* Cuando el título tiene su acento sobre el punto, el subrayado amarillo
   también pasa a negro para no fundirse con el punto. */
.section-title:has(.title-accent.sobre-punto)::after,
.page-title:has(.title-accent.sobre-punto)::after {
    background: var(--color-black);
    animation: none;
}

/* El botón amarillo, sobre el punto, se invierte a negro para no fundirse con él */
.escena__cta.sobre-punto {
    background: var(--color-black);
    color: var(--color-white);
}

/* El footer tapa el punto grande (evita que se solape, sobre todo en móvil).
   Aplica a todas las páginas porque el punto ahora está en base.html. */
.site-footer {
    position: relative;
    z-index: 2;
}

.galeria-arte .obra:hover {
    transform: translateY(-4px);
}

/* ========================================
   Fila imagen + texto alterna (editorial)
   ======================================== */
.bloque-arte {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    margin: 2.75rem 0;
}

.bloque-arte__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
}

.bloque-arte--invertida .bloque-arte__img {
    order: 2;
}

.bloque-arte__texto h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.75rem;
}

.bloque-arte__texto p {
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

@media (max-width: 760px) {
    .bloque-arte {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .bloque-arte--invertida .bloque-arte__img {
        order: 0;
    }
    .bloque-arte__img {
        max-width: 460px;
        margin: 0 auto;
    }
}

/* Grano de textura muy sutil sobre todo el sitio (detalle de fondo) */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='gr'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gr)'/%3E%3C/svg%3E");
    background-size: 220px;
}

/* ========================================
   Metodología (Conócenos)
   ======================================== */
.metodologia-section {
    padding: 3.5rem 0;
    background-color: var(--color-surface-section);
}

.metodologia-subtitulo {
    text-align: center;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: -1rem;
    margin-bottom: 2rem;
    font-style: italic;
}

.metodologia-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 960px;
    margin: 0 auto;
}

.metodologia-item {
    position: relative;
    background-color: var(--color-gray);
    border-radius: 14px;
    padding: 1.7rem 1.6rem;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.metodologia-grid .metodologia-item:hover {
    transform: translateY(-6px);
}

.metodologia-numero {
    display: block;
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 0.6rem;
}

.metodologia-item h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.metodologia-item p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

@media (min-width: 768px) {
    .metodologia-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.section--light .metodologia-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 3px solid var(--color-primary);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}
.section--light .metodologia-item h3 { color: var(--color-black); }
.section--light .metodologia-item p { color: rgba(0, 0, 0, 0.7); }

/* ========================================
   Proyectos
   ======================================== */
.proyectos-section {
    position: relative;
    padding: 3rem 0 5rem;
}

.proyectos-section--home .container {
    max-width: 1500px;
}

/* Triángulos decorativos de acento (motivo recurrente de la web antigua).
   En home.html son además un botón real de "volver arriba": el triángulo en
   sí (::before) mantiene su tamaño visual pequeño, pero el botón que lo
   contiene tiene un área de toque más cómoda (32x32) sin cambiar el aspecto. */
.triangulo-acento {
    position: absolute;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    z-index: 2;
    cursor: inherit;
    pointer-events: none;
}

/* Solo donde el triángulo es un <button> real (home.html, "volver arriba")
   vuelve a ser clicable; en el resto de páginas sigue siendo decorativo. */
button.triangulo-acento {
    pointer-events: auto;
}

.triangulo-acento::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 22px solid var(--color-primary);
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease;
}

.triangulo-acento:hover::before {
    transform: translate(-50%, -70%);
}

.triangulo-acento--br { right: 5%; bottom: 8%; }
.triangulo-acento--tr { right: 5%; top: 8%; }

.categoria-grupo {
    margin-bottom: 3.5rem;
}

.proyectos-section__cta {
    text-align: center;
    margin-top: 1rem;
}

.categoria-titulo {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--color-primary);
    display: inline-block;
    transition: border-bottom-color 0.3s ease, padding-bottom 0.3s ease;
}

.categoria-titulo:hover {
    border-bottom-color: var(--color-accent);
    padding-bottom: 0.75rem;
}

.proyectos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* ========================================
   Carrusel de proyectos (flechas + barra de progreso,
   como "Últimos proyectos" y "Nuestro Trabajo" en la web antigua)
   ======================================== */
.carrusel-proyectos {
    position: relative;
    padding: 0 3rem;
}

.carrusel-proyectos__barra {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.carrusel-proyectos__progreso {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-primary);
    border-radius: 2px;
}

.proyectos-grid--carrusel {
    display: flex;
    grid-template-columns: none;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.proyectos-grid--carrusel::-webkit-scrollbar {
    display: none;
}

.proyectos-grid--carrusel .proyecto-card {
    flex: 0 0 auto;
    width: min(340px, 78vw);
    scroll-snap-align: start;
}

.carrusel-proyectos__flecha {
    position: absolute;
    top: calc(50% - 0.9rem);
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    z-index: 3;
}

.carrusel-proyectos__flecha:hover {
    background: var(--color-primary);
    color: var(--color-black);
    transform: translateY(-50%) scale(1.08);
}

.carrusel-proyectos__flecha:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.carrusel-proyectos__flecha--prev { left: 0; }
.carrusel-proyectos__flecha--next { right: 0; }

@media (max-width: 640px) {
    .carrusel-proyectos { padding: 0; }
    .carrusel-proyectos__flecha { display: none; }
}

.section--light .carrusel-proyectos__barra { background: rgba(0, 0, 0, 0.1); }
.section--light .carrusel-proyectos__flecha { background: rgba(0, 0, 0, 0.06); color: var(--color-black); }

.proyecto-card {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.proyecto-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 30px rgba(255, 207, 2, 0.15);
}

.card-img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.proyecto-card:hover .card-img-wrapper img {
    transform: scale(1.08);
}

/* La foto se funde hacia el negro por abajo; el título va siempre visible. */
.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 1.25rem 1.25rem;
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0) 100%);
    color: var(--color-white);
}

.card-overlay h3 {
    font-size: 1.1rem;
    font-weight: 600;
}


/* ========================================
   Proyecto Detalle
   ======================================== */

/* ── Cover slim ── */
.proyecto-cover {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: var(--color-black);
    padding: 4rem 0 2.75rem;
    min-height: 44vh;
    display: flex;
    align-items: flex-end;
}

/* 1. Cover que funde la portada con el negro de la página */
.proyecto-cover__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.55) 55%,
        var(--color-dark) 100%
    );
    z-index: 1;
}

.proyecto-cover__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.proyecto-back-btn {
    position: fixed;
    top: calc(var(--nav-height) + 1rem);
    left: 1.25rem;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 24px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease, opacity 0.6s ease;
}

.proyecto-back-btn--hidden {
    opacity: 0;
    pointer-events: none;
}

.proyecto-back-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-black);
    transform: translateX(-3px);
}

.proyecto-back-btn:hover svg {
    stroke: var(--color-black);
}

/* Responsive: en móvil solo icono, más compacto */
@media (max-width: 767px) {
    .proyecto-back-btn {
        top: calc(var(--nav-height) + 0.5rem);
        left: 0.75rem;
        padding: 0.45rem 0.75rem;
        font-size: 0.7rem;
    }

    .proyecto-back-btn span {
        display: none;
    }
}

.proyecto-categoria-badge {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0.3rem 0.9rem;
    border-radius: 4px;
    width: fit-content;
}

.proyecto-cover__titulo {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 600;
    color: var(--color-white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
    .proyecto-cover {
        min-height: 52vh;
        padding: 5rem 0 3.5rem;
    }
}

/* ── Sobre el proyecto ── */
/* 4. Con círculo decorativo */
.proyecto-about {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 0 1.25rem;
    background-color: var(--color-white);
}

.proyecto-about::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    right: -20px;
    width: 90px;
    height: 90px;
    border: 2.5px solid rgba(255, 207, 2, 0.45);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* ── Galería + nav ── */
.proyecto-detalle {
    padding: 1.5rem 0 2.5rem;
    background-color: var(--color-dark);
}

/* ── Barra de datos horizontal, justo bajo la portada ── */
.proyecto-meta-bar {
    background-color: var(--color-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.proyecto-meta-bar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 3rem;
    padding: 1.4rem 0;
}

.proyecto-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.proyecto-meta-item__label {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary);
}

.proyecto-meta-item__valor {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-white);
}

/* ── Sobre el proyecto: descripción a todo el ancho ── */
.proyecto-about .section-title {
    text-align: left;
    margin-bottom: 1.1rem;
}

.proyecto-descripcion {
    position: relative;
    z-index: 1;
    color: rgba(0, 0, 0, 0.74);
    font-size: 1.1rem;
    line-height: 1.85;
    text-align: left;
    max-width: 70ch;
}

/* ── Galería grid ── */
.proyecto-galeria-section {
    padding: 1.5rem 0 0;
}

/* Mosaico masonry: respeta la proporción natural de cada imagen */
.proyecto-galeria {
    columns: 2;
    column-gap: 0.75rem;
}

.proyecto-galeria__item {
    break-inside: avoid;
    margin-bottom: 0.75rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.35s ease, transform 0.3s ease;
    cursor: inherit;
}

.proyecto-galeria__item:hover {
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
}

.proyecto-galeria__item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.35s ease;
}

.proyecto-galeria__item:hover img {
    transform: scale(1.05);
}

@media (min-width: 768px) {
    .proyecto-galeria {
        columns: 2;
        column-gap: 1rem;
    }

    .proyecto-galeria__item {
        margin-bottom: 1rem;
    }
}

@media (min-width: 1024px) {
    .proyecto-galeria {
        columns: 3;
    }
}

/* ========================================
   Equipo / Conócenos
   ======================================== */
.empresa-descripcion {
    padding: 4rem 0;
    background-color: var(--color-gray);
}

/* Conócenos: entradilla más grande para el bloque editorial. */
.empresa-descripcion .bloque-arte__texto p,
.formacion-intro-section .bloque-arte__texto p,
.servicios-intro-section .bloque-arte__texto p {
    font-size: clamp(1.12rem, 1.8vw, 1.3rem);
    line-height: 1.9;
}

.formacion-intro-section .bloque-arte__img {
    aspect-ratio: 3 / 2;
}

/* Conócenos: layout editorial (foto fija a la izquierda + texto a la derecha,
   en columnas a partir de tablet), como tenía la web antigua. */
.conocenos-editorial {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3rem;
    align-items: start;
}

.conocenos-editorial__img {
    width: 100%;
    height: clamp(340px, 42vw, 560px);
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
}

.conocenos-editorial__texto {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .conocenos-editorial__texto {
        display: block;
        column-count: 2;
        column-gap: 2.5rem;
    }
    .conocenos-editorial__texto p {
        break-inside: avoid;
        margin: 0 0 1.5rem;
    }
}

@media (max-width: 760px) {
    .conocenos-editorial {
        grid-template-columns: 1fr;
    }
    .conocenos-editorial__img {
        height: 280px;
    }
}

.equipo-section {
    padding: 3rem 0 5rem;
    background-color: var(--color-gray);
}

.miembro-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    margin-bottom: 4rem;
    padding: 2rem;
}

.miembro-foto {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
}

.miembro-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.miembro-foto img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 207, 2, 0.3);
}

.foto-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 600;
    color: var(--color-white);
}

.miembro-info h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.miembro-cargo {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.miembro-descripcion {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}

/* ========================================
   Contacto
   ======================================== */
.contacto-section {
    padding: 5rem 0;
    background: #ffffff;
}

/* --- Contacto: datos directos + formulario --- */
.contacto-directo {
    margin-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contacto-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem 1.25rem;
    padding: 2rem;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid var(--color-primary);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .contacto-form {
        grid-template-columns: 1fr 1fr;
    }
}

.contacto-form .campo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contacto-form .campo--full {
    grid-column: 1 / -1;
}

.contacto-form label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-black);
}

.contacto-form .campo-obligatorio {
    color: var(--color-primary);
    font-weight: 700;
}

.contacto-form .campo-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-black);
    background: #ffffff;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.contacto-form .campo-input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.contacto-form .campo-input:focus {
    outline: none;
    border-color: var(--color-black);
    box-shadow: 0 0 0 3px rgba(255, 207, 2, 0.4);
}

.contacto-form textarea.campo-input {
    resize: vertical;
    min-height: 130px;
}

.contacto-form input[name="website"] {
    display: none;
}

.contacto-form .errorlist {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #c0392b;
    font-size: 0.8rem;
}

.btn-enviar {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0.4rem;
    padding: 0.85rem 2rem;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-black);
    background: var(--color-primary);
    border: none;
    border-radius: 30px;
    cursor: inherit;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-enviar:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 207, 2, 0.3);
}

.form-mensajes {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.form-alert {
    padding: 0.85rem 1.1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    border-left: 4px solid;
}

.form-alert--success {
    background: rgba(39, 174, 96, 0.12);
    border-left-color: #27ae60;
    color: #1e7e45;
}

.form-alert--error {
    background: rgba(192, 57, 43, 0.1);
    border-left-color: #c0392b;
    color: #a8321f;
}

.contacto-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

/* Dos columnas (info | formulario) solo en escritorio. En tablet se apila:
   el formulario queda debajo, que se ve mejor con ese ancho. */
@media (min-width: 1024px) {
    .contacto-layout {
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        align-items: start;
    }
}

.contacto-izq h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 1rem;
    position: relative;
    width: fit-content;
}

.contacto-izq h2::after {
    content: '';
    position: absolute;
    left: -4px;
    bottom: 2px;
    width: 0;
    height: 35%;
    background-color: rgba(255, 207, 2, 0.45);
    z-index: -1;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.fade-in.visible .contacto-izq h2::after {
    width: calc(100% + 8px);
}

.contacto-izq p {
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    font-size: 1rem;
}

.contacto-direccion {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(255, 207, 2, 0.3);
}

.contacto-direccion__texto {
    display: inline-block;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(6px);
    transition: color 0.3s ease, transform 0.3s ease, font-weight 0.3s ease, opacity 0.5s ease;
}

.fade-in.visible .contacto-direccion__texto {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.contacto-direccion__texto:hover {
    color: var(--color-black);
    transform: translateY(-2px);
    font-weight: 600;
}

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

.contacto-enlace {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-black);
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--color-primary);
    border-radius: 0 8px 8px 0;
    opacity: 0;
    transform: translateX(-10px);
    transition: border-left-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.fade-in.visible .contacto-enlace {
    opacity: 1;
    transform: translateX(0);
}

.fade-in.visible .contacto-enlace:nth-child(1) { transition-delay: 0.1s; }
.fade-in.visible .contacto-enlace:nth-child(2) { transition-delay: 0.25s; }
.fade-in.visible .contacto-enlace:nth-child(3) { transition-delay: 0.4s; }

.contacto-enlace:hover {
    border-left-color: var(--color-accent);
    background-color: rgba(255, 207, 2, 0.06);
    transform: translateX(4px);
    box-shadow: 0 2px 12px rgba(255, 207, 2, 0.1);
}

.contacto-enlace svg {
    color: var(--color-primary);
    flex-shrink: 0;
    transition: color 0.3s ease, transform 0.3s ease;
}

.contacto-enlace:hover svg {
    color: var(--color-accent);
    transform: scale(1.15);
}

.contacto-enlace__nombre {
    font-weight: 600;
    font-size: 0.9rem;
}

.contacto-enlace__nombre::after {
    content: '—';
    margin-left: 0.4rem;
    color: #ccc;
    font-weight: 400;
}

.contacto-enlace__valor {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.contacto-enlace:hover .contacto-enlace__valor {
    color: var(--color-accent);
}

/* Columna izquierda: acentos amarillos (borde de los enlaces / icono) */
.contacto-izq .contacto-enlace { color: var(--color-black); }
.contacto-izq .contacto-enlace__valor { color: rgba(0, 0, 0, 0.6); }
.contacto-izq .contacto-enlace:hover .contacto-enlace__valor { color: var(--color-black); }
.contacto-izq .contacto-enlace__nombre::after { color: rgba(0, 0, 0, 0.3); }
.contacto-izq .contacto-direccion__texto { color: rgba(0, 0, 0, 0.6); }
.contacto-izq .contacto-direccion__texto:hover { color: var(--color-black); }

/* Toque de color: iconos de contacto en círculo amarillo con icono negro */
.contacto-izq .contacto-enlace svg {
    color: var(--color-black);
    background: var(--color-primary);
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 50%;
    box-sizing: border-box;
}
.contacto-izq .contacto-enlace:hover svg { color: var(--color-black); }

/* ========================================
   Footer
   ======================================== */
.site-footer {
    background-color: var(--color-black);
    color: var(--color-white);
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23FFCF02'/%3E%3C/svg%3E") 10 10, auto;
    padding: 2.5rem 0 1.5rem;
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .footer-info {
        align-items: flex-end;
    }

    .footer-copy {
        text-align: center;
    }
}

.footer-logo img {
    height: 72px;
    width: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-logo:hover img {
    opacity: 1;
    transform: scale(1.05);
}

.footer-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.footer-info p {
    font-size: 0.9rem;
    opacity: 0.75;
    margin: 0;
}

.footer-copy {
    font-size: 0.8rem;
    opacity: 0.6;
    text-align: center;
    padding: 1rem 0 0;
    width: 100%;
    margin: 0;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.6;
    width: 100%;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-legal span {
    opacity: 0.5;
}

.footer-social {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    justify-content: center;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    opacity: 0.7;
    transition: opacity 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.footer-social a:hover {
    opacity: 1;
    color: var(--color-primary);
    transform: scale(1.15);
}

.site-footer a {
    color: var(--color-primary);
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--color-accent);
}


/* ========================================
   Textura noise extendida
   ======================================== */
.site-footer,
.page-header,
.proyecto-cover {
    position: relative;
}

.site-footer::before,
.page-header::before,
.proyecto-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px;
    pointer-events: none;
    z-index: 0;
}

.site-footer > *,
.page-header > *,
.proyecto-cover > * {
    position: relative;
    z-index: 1;
}

/* ========================================
   Tratamiento artístico título-accent
   ======================================== */
.title-accent {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-primary);
}

/* ========================================
   Acentos geométricos decorativos
   ======================================== */
.metodologia-section,
.formacion-objetivos-section,
.contacto-section {
    position: relative;
    overflow: hidden;
}

/* Metodología: círculo + líneas */
.metodologia-section::before {
    content: '';
    position: absolute;
    top: 2rem;
    right: -20px;
    width: 150px;
    height: 150px;
    border: 3px solid rgba(255, 207, 2, 0.22);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Contacto: círculo grande */
.contacto-section::before {
    content: '';
    position: absolute;
    top: 3rem;
    left: -40px;
    width: 160px;
    height: 160px;
    border: 3px solid rgba(255, 207, 2, 0.08);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* ========================================
   Ámbitos: decoración rica y dispersa
   ======================================== */
.ambitos-section {
    position: relative;
    overflow: hidden;
}

.ambitos-section::before {
    content: '';
    position: absolute;
    top: 5%;
    left: -20px;
    width: 140px;
    height: 140px;
    border: 2px solid rgba(255, 207, 2, 0.08);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* El contenido (acordeón) por encima de los círculos decorativos */
.ambitos-section .container {
    position: relative;
    z-index: 1;
}

/* "Ámbitos de Consultoría" sobre fondo CLARO: círculos/puntos amarillos VISIBLES
   (los de arriba son muy tenues, pensados para fondo oscuro). */
.ambitos-section.section--light::before {
    top: 7%;
    left: -20px;
    width: 74px;
    height: 74px;
    border-color: rgba(255, 207, 2, 0.55);
}

/* ========================================
   Decoraciones adicionales — secciones claras
   ======================================== */

/* Empresa descripción: líneas diagonales */
.empresa-descripcion {
    position: relative;
    overflow: hidden;
}

.empresa-descripcion::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -30px;
    width: 130px;
    height: 130px;
    border: 2px solid rgba(255, 207, 2, 0.15);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Servicios intro: círculos concéntricos + puntos */
.servicios-intro-section {
    position: relative;
    overflow: hidden;
}

.servicios-intro-section::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px solid rgba(255, 207, 2, 0.07);
    box-shadow:
        inset 0 0 0 22px transparent,
        inset 0 0 0 24px rgba(255, 207, 2, 0.05),
        inset 0 0 0 48px transparent,
        inset 0 0 0 50px rgba(255, 207, 2, 0.03);
    pointer-events: none;
    z-index: 0;
}

/* Formación intro: rejilla de puntos + dispersos */
.formacion-intro-section {
    position: relative;
    overflow: hidden;
}

.formacion-intro-section::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -30px;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(255, 207, 2, 0.15);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.formacion-intro-section .container {
    position: relative;
    z-index: 1;
}

/* Proyectos: círculo */
.proyectos-section {
    position: relative;
    overflow: hidden;
}

.proyectos-section::before {
    content: '';
    position: absolute;
    top: 3rem;
    left: -50px;
    width: 140px;
    height: 140px;
    border: 2px solid rgba(255, 207, 2, 0.15);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Formatos: líneas diagonales + puntos esparcidos */
.formatos-section {
    position: relative;
    overflow: hidden;
}

.formatos-section::before {
    content: '';
    position: absolute;
    top: -15px;
    right: -15px;
    width: 150px;
    height: 150px;
    border: 3px solid rgba(255, 207, 2, 0.26);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Equipo: resplandor + constelación dispersa */
.equipo-section {
    position: relative;
    overflow: hidden;
}

.equipo-section::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -40px;
    width: 140px;
    height: 140px;
    border: 2px solid rgba(255, 207, 2, 0.15);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Programas: puntos dispersos ambos lados */
.programas-section {
    position: relative;
    overflow: hidden;
}

.programas-section::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -35px;
    width: 130px;
    height: 130px;
    border: 2px solid rgba(255, 207, 2, 0.15);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Contacto: círculo + rejilla + puntos */
/* Objetivos formativos: cruz + puntos */
.formacion-objetivos-section::before {
    content: '';
    position: absolute;
    top: -15px;
    right: -15px;
    width: 145px;
    height: 145px;
    border: 3px solid rgba(255, 207, 2, 0.26);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.formacion-objetivos-section .container {
    position: relative;
    z-index: 1;
}

/* ========================================
   Hover expresivos en tarjetas
   ======================================== */
.proyecto-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s ease;
    z-index: 2;
}

.proyecto-card:hover::after {
    transform: scaleX(1);
}

.programa-card::after,
.formato-item::after,
.metodologia-item::after,
.comm-card::after,
.area-card::after,
.acordeon-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    border-radius: 0 0 12px 12px;
}

.comm-card::after,
.area-card::after,
.metodologia-item::after {
    border-radius: 0 0 14px 14px;
}

.programa-card:hover::after,
.formato-item:hover::after,
.metodologia-item:hover::after,
.comm-card:hover::after,
.area-card:hover::after,
.acordeon-item:hover::after {
    transform: scaleX(1);
}

/* position:relative + overflow:hidden para que el ::after de arriba se
   recorte bien contra las esquinas redondeadas de cada tarjeta. */
.programa-card,
.metodologia-item,
.comm-card,
.area-card,
.acordeon-item {
    position: relative;
    overflow: hidden;
}

.programa-card,
.formato-item {
    position: relative;
    overflow: hidden;
}

/* ========================================
   Gradientes enriquecidos
   ======================================== */

/* Línea superior del footer */
.site-footer {
    border-top: 3px solid var(--color-primary);
}

/* ========================================
   Animación Fade-in
   ======================================== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   Responsive — Tablet (768px+)
   ======================================== */
@media (min-width: 768px) {
    .proyectos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .miembro-card {
        flex-direction: row;
        text-align: left;
        gap: 3rem;
    }

    .miembro-card:nth-child(even) {
        flex-direction: row-reverse;
    }

    .miembro-card:nth-child(even) .miembro-info {
        text-align: right;
    }
}

/* ========================================
   Responsive — Desktop (1024px+)
   ======================================== */
@media (min-width: 1024px) {
    .nav-container {
        max-width: none;
        padding: 0 3rem;
    }

    .nav-logo img {
        height: 62px;
    }

    .hamburger {
        display: none;
    }

    .nav-menu {
        position: static;
        max-height: none;
        overflow: visible;
        visibility: visible;
        display: flex;
        gap: 0;
        box-shadow: none;
        background: transparent;
        order: 1;
    }

    /* La píldora de idioma queda después de los enlaces de página en escritorio
       (en móvil, sin esta regla, el orden natural del HTML la deja junto a la
       hamburguesa). */
    .nav-right {
        order: 2;
    }

    .nav-menu li {
        border-bottom: none;
    }

    .nav-menu {
        gap: 0.5rem;
    }

    .nav-menu a {
        padding: 0.5rem 1.25rem;
        position: relative;
        transition: color 0.3s ease;
    }

    .nav-menu a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
        transition: width 0.3s ease, left 0.3s ease;
        border-radius: 2px;
    }

    .nav-menu a:hover::after {
        width: 80%;
        left: 10%;
    }

    .nav-menu a:hover {
        color: var(--color-black);
        background-color: transparent;
    }

    /* En escritorio el activo se marca con texto amarillo + subrayado fijo */
    .nav-item--desplegable {
        position: relative;
    }

    .nav-desplegable__boton {
        width: auto;
        padding: 0.5rem 1.25rem;
    }

    .nav-desplegable__boton.nav-link--active {
        color: var(--color-black);
    }

    .nav-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 13rem;
        padding: 0.5rem 0;
        background-color: var(--color-white);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        border-radius: 4px;
    }

    .nav-item--desplegable:hover > .nav-submenu,
    .nav-item--desplegable:focus-within > .nav-submenu {
        display: block;
    }

    .nav-submenu a {
        padding: 0.6rem 1.25rem;
    }

    .nav-menu a.nav-link--active {
        background-color: transparent;
    }

    .nav-menu a.nav-link--active::after {
        width: 80%;
        left: 10%;
    }

    .proyectos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   Navegación entre proyectos
   ======================================== */
.proyecto-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Ocupa su celda para que el botón central no se descoloque cuando falta prev/next */
.proyecto-nav__spacer {
    display: block;
}

.proyecto-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    font-family: var(--font-heading);
    color: var(--color-white);
    background-color: #262626;
    transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.2s ease;
}

.proyecto-nav__prev {
    justify-self: start;
}

.proyecto-nav__next {
    justify-self: end;
}

.proyecto-nav__link:hover {
    border-color: var(--color-primary);
}

.proyecto-nav__prev:hover {
    transform: translateX(-3px);
}

.proyecto-nav__next:hover {
    transform: translateX(3px);
}

.proyecto-nav__cara {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.proyecto-nav__next .proyecto-nav__cara {
    align-items: flex-end;
}

.proyecto-nav__label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary);
}

.proyecto-nav__text {
    max-width: 180px;
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mismo motivo de triángulo amarillo que .triangulo-acento (la web antigua),
   aquí apuntando a los lados para marcar "proyecto anterior/siguiente". */
.proyecto-nav__arrow {
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.proyecto-nav__arrow--prev {
    border-right: 12px solid var(--color-primary);
}

.proyecto-nav__arrow--next {
    border-left: 12px solid var(--color-primary);
}

/* Botón central: pill amarillo claramente visible sobre el fondo oscuro */
.proyecto-nav__all {
    justify-self: center;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-black);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.proyecto-nav__all:hover {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* ========================================
   Lightbox
   ======================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

/* 7. Lightbox con transición más suave */
.lightbox__img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    object-fit: contain;
}

.lightbox.active .lightbox__img {
    transform: scale(1);
    opacity: 1;
}

.lightbox__close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 2.5rem;
    line-height: 1;
    cursor: inherit;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

.lightbox__close:hover {
    opacity: 1;
    transform: scale(1.15);
}

.lightbox__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: var(--color-white);
    font-size: 2.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    z-index: 10;
}

.lightbox__arrow:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.25);
}

.lightbox__prev {
    left: 1.5rem;
}

.lightbox__next {
    right: 1.5rem;
}

.lightbox__counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.7;
    letter-spacing: 2px;
}

/* Lightbox cursor */
.proyecto-galeria__item {
    cursor: inherit;
}

/* Body cuando lightbox está abierto */
body.lightbox-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .lightbox__arrow {
        width: 40px;
        height: 40px;
        font-size: 1.75rem;
    }

    .lightbox__prev {
        left: 0.5rem;
    }

    .lightbox__next {
        right: 0.5rem;
    }

    .proyecto-nav {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .proyecto-nav__link {
        width: 100%;
        justify-content: center;
    }

    .proyecto-nav__prev,
    .proyecto-nav__next {
        justify-self: stretch;
    }

    .proyecto-nav__next .proyecto-nav__cara {
        align-items: center;
    }

    .proyecto-nav__text {
        max-width: none;
    }
}

/* ========================================
   Movimiento reducido — accesibilidad
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   Focus states — accesibilidad teclado
   ======================================== */
/* Proyecto detalle */
.proyecto-back-btn:focus-visible,
.proyecto-nav__link:focus-visible,
.lightbox__close:focus-visible,
.lightbox__arrow:focus-visible,
/* Navegación global */
.nav-menu a:focus-visible,
.nav-logo:focus-visible,
.hamburger:focus-visible,
/* Footer */
.site-footer a:focus-visible,
.footer-logo:focus-visible,
.footer-social a:focus-visible,
/* Botones flotantes */
.contacto-fab:focus-visible,
.contacto-fab-panel__item:focus-visible,
.btn-volver-arriba:focus-visible,
.a11y-toolbar-toggle:focus-visible,
.a11y-toolbar-panel__opcion:focus-visible,
.a11y-toolbar-panel__reset:focus-visible,
.a11y-btn:focus-visible,
button.triangulo-acento:focus-visible,
/* Proyectos lista */
.filtro-btn:focus-visible,
.proyecto-card a:focus-visible,
/* Botones/enlaces de escenas y acordeones */
.escena__cta:focus-visible,
.escena__cta--linea:focus-visible,
.acordeon-trigger:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* ========================================
   Animaciones escalonadas (staggered)
   ======================================== */
.fade-in-stagger {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-stagger.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   Filtros de categoría
   ======================================== */
.filtros-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.filtros-bar__categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.filtro-btn {
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 207, 2, 0.15), rgba(255, 207, 2, 0.1));
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-white);
    transition: all 0.3s ease;
}

.filtro-btn:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: var(--color-black);
    transform: translateY(-2px);
}

.filtro-btn--activo {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: var(--color-black);
}

.section--light .filtro-btn { color: var(--color-black); }

.categoria-grupo {
    transition: opacity 0.4s ease, max-height 0.5s ease, margin-bottom 0.4s ease;
    overflow: hidden;
}

.categoria-grupo--oculto {
    opacity: 0;
    max-height: 0 !important;
    margin-bottom: 0;
    pointer-events: none;
}

/* ========================================
   Botón Volver Arriba
   ======================================== */
/* ========================================
   Botón flotante Contáctanos (FAB)
   ======================================== */
.contacto-fab-wrapper {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
}

.contacto-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-black);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(255, 207, 2, 0.35);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: inherit;
}

.contacto-fab:hover {
    background-color: var(--color-accent);
    transform: scale(1.08);
    box-shadow: 0 6px 25px rgba(255, 207, 2, 0.45);
}

.contacto-fab__icon-close {
    display: none;
}

.contacto-fab-wrapper.open .contacto-fab__icon-phone {
    display: none;
}

.contacto-fab-wrapper.open .contacto-fab__icon-close {
    display: block;
}

.contacto-fab-panel {
    position: absolute;
    bottom: calc(100% + 0.75rem);
    right: 0;
    width: 280px;
    background-color: var(--color-black);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transform-origin: bottom right;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.contacto-fab-wrapper.open .contacto-fab-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.contacto-fab-panel__header {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 1rem 1.25rem;
}

.contacto-fab-panel__section {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-gray);
}

.contacto-fab-panel__section:last-child {
    border-bottom: none;
}

.contacto-fab-panel__label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
}

.contacto-fab-panel__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    color: var(--color-white);
    transition: color 0.2s ease;
    text-decoration: none;
}

.contacto-fab-panel__item:hover {
    color: var(--color-accent);
}

.contacto-fab-panel__item svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

.contacto-fab-panel__name {
    font-weight: 600;
    font-size: 0.85rem;
}

.contacto-fab-panel__name::after {
    content: '·';
    margin-left: 0.4rem;
    color: #ccc;
}

.contacto-fab-panel__value {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.contacto-fab-panel__item:hover .contacto-fab-panel__value {
    color: var(--color-accent);
}

.btn-volver-arriba {
    position: fixed;
    bottom: 6rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-black);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    z-index: 999;
}

.btn-volver-arriba--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-volver-arriba:hover {
    background-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.btn-volver-arriba:active {
    transform: translateY(-1px);
}

/* ========================================
   Aviso de cookies
   ======================================== */
.cookie-banner[hidden] {
    display: none;
}

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    background-color: var(--color-black);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.cookie-banner__texto {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}

.cookie-banner__texto a {
    color: var(--color-primary);
    text-decoration: underline;
}

.cookie-banner__btn {
    flex-shrink: 0;
    padding: 0.6rem 1.5rem;
    background-color: var(--color-primary);
    color: var(--color-black);
    border: none;
    border-radius: 40px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: inherit;
    transition: background-color 0.2s ease;
}

.cookie-banner__btn:hover {
    background-color: var(--color-accent);
}

/* ========================================
   Barra de accesibilidad flotante
   ======================================== */
.a11y-toolbar-wrapper {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 1400;
}

.a11y-toolbar-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-black);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(255, 207, 2, 0.35);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: inherit;
}

.a11y-toolbar-toggle:hover {
    background-color: var(--color-accent);
    transform: scale(1.08);
    box-shadow: 0 6px 25px rgba(255, 207, 2, 0.45);
}

.a11y-toolbar-panel {
    position: absolute;
    bottom: calc(100% + 0.75rem);
    left: 0;
    width: 260px;
    max-width: calc(100vw - 4rem);
    background-color: var(--color-black);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transform-origin: bottom left;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    padding: 0.5rem 0 0.75rem;
}

.a11y-toolbar-wrapper.open .a11y-toolbar-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.a11y-toolbar-panel__header {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-gray);
}

.a11y-toolbar-panel__grupo {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-gray);
}

.a11y-toolbar-panel__label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
}

.a11y-toolbar-panel__fila {
    display: flex;
    gap: 0.6rem;
}

.a11y-btn {
    flex: 1;
    padding: 0.4rem 0;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: inherit;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.a11y-btn:hover {
    background: var(--color-primary);
    color: var(--color-black);
}

.a11y-toolbar-panel__opcion {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.65rem 1.25rem;
    color: var(--color-white);
    background: none;
    border: none;
    font-size: 0.85rem;
    cursor: inherit;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.a11y-toolbar-panel__opcion:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-accent);
}

.a11y-toolbar-panel__opcion[aria-pressed="true"] {
    color: var(--color-primary);
    font-weight: 600;
}

.a11y-toolbar-panel__opcion[aria-pressed="true"]::before {
    content: '✓ ';
}

.a11y-toolbar-panel__reset {
    display: block;
    width: calc(100% - 2.5rem);
    margin: 0.6rem 1.25rem 0;
    padding: 0.5rem 0;
    text-align: center;
    background: none;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: inherit;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.a11y-toolbar-panel__reset:hover {
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Efectos globales: se aplican sobre #a11y-contenido (navbar + main + footer),
   NO sobre body. Un elemento con filter se convierte en el "containing
   block" de sus descendientes position:fixed — si el filtro fuera en body,
   los widgets flotantes (fixed, hermanos de este div) se recolocarían
   respecto al alto total de la página en vez de la ventana y desaparecerían
   de la vista. Al aislarlo en este div, los widgets flotantes quedan fuera
   y no les afecta. */
html.a11y-escala-grises #a11y-contenido { filter: grayscale(1); }
html.a11y-alto-contraste #a11y-contenido { filter: contrast(1.35) saturate(1.15); }
html.a11y-contraste-negativo #a11y-contenido { filter: invert(1) hue-rotate(180deg); }

/* !important deliberado: son overrides de accesibilidad que deben ganar
   siempre a los estilos concretos de cada componente. */
html.a11y-subrayar-enlaces a { text-decoration: underline !important; }

html.a11y-fuente-legible body,
html.a11y-fuente-legible button,
html.a11y-fuente-legible input,
html.a11y-fuente-legible textarea {
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0.02em;
    line-height: 1.85;
}

/* Todo el sitio mide tipografía y espaciados en rem, que toma como referencia
   el font-size de <html> (no el de <body>) — así que para que el texto
   realmente crezca hay que tocar el de <html>, no el de body. */
html[data-a11y-fuente="-1"] { font-size: 90%; }
html[data-a11y-fuente="1"] { font-size: 112.5%; }
html[data-a11y-fuente="2"] { font-size: 125%; }
html[data-a11y-fuente="3"] { font-size: 137.5%; }

@media (max-width: 480px) {
    .a11y-toolbar-wrapper { left: 1rem; bottom: 1rem; }
}

/* ========================================
   Página Servicios de Consultoría
   ======================================== */
.servicios-intro-section {
    padding: 3rem 0;
    background-color: var(--color-gray);
}

/* El párrafo de intro no tenía color propio: heredaba el blanco del body y
   quedaba invisible en las secciones .section--light (fondo blanco). */
.servicios-intro {
    max-width: 760px;
    margin: 0 auto;
    font-size: clamp(1.12rem, 1.8vw, 1.3rem);
    line-height: 1.9;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
}

.section--light .servicios-intro {
    color: rgba(0, 0, 0, 0.72);
}

.ambitos-section {
    padding: 5rem 0;
    background: var(--color-surface-section);
}

/* ========================================
   Página Formación
   ======================================== */
.formacion-intro-section {
    padding: 3rem 0;
    background-color: var(--color-gray);
}

/* Objetivos formativos: fondo blanco (rompe el bloque negro entre la
   cabecera y "Programas Formativos"; ver .section--light en el template). */
.formacion-objetivos-section {
    padding: 3rem 0;
}

/* "Qué Conseguirás" como checklist minimalista (sin cajas): icono ✓ amarillo +
   texto sobre el fondo blanco, con una línea fina separando cada ítem. */
.formacion-objetivos-section .objetivos-grid {
    gap: 0;
    max-width: 760px;
}

.formacion-objetivos-section .objetivo-item {
    background: transparent;
    box-shadow: none;
    border-left: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding: 1.05rem 0.25rem;
    gap: 1.1rem;
}

.formacion-objetivos-section .objetivo-item:last-child {
    border-bottom: none;
}

.formacion-objetivos-section .objetivo-item:hover {
    transform: none;
    box-shadow: none;
}

.formacion-objetivos-section .objetivo-item span {
    color: rgba(0, 0, 0, 0.75);
    font-size: 1rem;
}

/* Especificidad reforzada (3 clases) para que este checklist plano gane
   siempre a la regla genérica de tarjeta de .section--light, sin depender
   de qué bloque esté más abajo en el fichero. */
.formacion-objetivos-section.section--light .objetivo-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0;
    box-shadow: none;
}

.formacion-objetivos-section.section--light .objetivo-item:last-child {
    border-bottom: none;
}

.objetivos-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 700px;
    margin: 0 auto;
}

.objetivo-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background-color: var(--color-gray);
    border-radius: 10px;
    border-left: 4px solid var(--color-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease;
}

.objetivo-item:hover {
    transform: translateX(6px);
    box-shadow: 0 4px 16px rgba(255, 207, 2, 0.15);
    border-left-color: var(--color-accent);
}

.objetivo-item svg {
    flex-shrink: 0;
    color: var(--color-accent);
}

.objetivo-item span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.5;
}

/* Programas formativos: mismo negro que "Qué Conseguirás", pero con un
   degradado y un filo superior sutiles para que no se fundan en un único
   bloque negro sin ruptura. */
.programas-section {
    padding: 3.5rem 0;
    border-top: 1px solid rgba(255, 207, 2, 0.12);
    background: linear-gradient(160deg, rgba(255, 207, 2, 0.05) 0%, #000 60%);
}

.programas-lista {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.programa-card {
    display: flex;
    gap: 1.5rem;
    background-color: var(--color-black);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.programas-lista .programa-card:hover {
    transform: translateY(-6px);
}

.programa-card-numero {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    opacity: 1;
}

.programa-card-content h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.programa-dirigido {
    font-size: 0.85rem;
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.programa-card-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.programa-card-content li {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    padding-left: 1.25rem;
    position: relative;
}

.programa-card-content li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
}

@media (max-width: 600px) {
    .programa-card {
        flex-direction: column;
    }
}

.section--light .programa-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 3px solid var(--color-primary);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}
.section--light .programa-card-content h3 { color: var(--color-black); }
.section--light .programa-card-content li { color: rgba(0, 0, 0, 0.7); }

/* Formatos formativos */
.formatos-section {
    padding: 3.5rem 0;
    background-color: var(--color-black);
}

.formatos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.formato-item {
    background-color: var(--color-gray);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.formato-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(255, 207, 2, 0.18);
}

.formato-item svg {
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.formato-item h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.formato-item p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

@media (min-width: 768px) {
    .formatos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .formatos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================
   Acordeón de servicios (Cultura)
   ======================================== */
.acordeon-ayuda {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-accent);
    font-weight: 600;
    margin: 0 auto 2rem;
}

.acordeon {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.acordeon-item {
    background-color: var(--color-black);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border-left: 4px solid var(--color-primary);
    transition: box-shadow 0.3s ease, border-left-color 0.3s ease;
}

.acordeon-item--abierto {
    box-shadow: 0 8px 30px rgba(255, 207, 2, 0.18);
    border-left-color: var(--color-accent);
}

.acordeon-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: none;
    border: none;
    cursor: inherit;
    text-align: left;
    font-family: inherit;
}

.acordeon-num {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1;
    opacity: 0.6;
}

.acordeon-titulo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.acordeon-titulo strong {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.3;
}

.acordeon-titulo small {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.5;
}

.acordeon-chevron {
    flex-shrink: 0;
    color: var(--color-accent);
    transition: transform 0.3s ease;
}

.acordeon-item--abierto .acordeon-chevron {
    transform: rotate(180deg);
}

.acordeon-panel {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.35s ease, visibility 0.35s ease;
}

/* Cuando el ítem está abierto el panel es visible (y accesible al teclado/lector). */
.acordeon-item--abierto .acordeon-panel {
    visibility: visible;
}

.acordeon-panel ul {
    list-style: none;
    padding: 0 1.75rem 1.5rem 3.75rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.acordeon-panel li {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    padding-left: 1.25rem;
    position: relative;
}

.acordeon-panel li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
}

@media (max-width: 600px) {
    .acordeon-trigger {
        gap: 0.85rem;
        padding: 1.25rem 1.25rem;
    }

    .acordeon-panel ul {
        padding-left: 2.5rem;
    }
}

/* Variante con icono (ámbitos de Consultoría) */
.acordeon-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--color-primary);
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.acordeon-item--abierto .acordeon-icon {
    background-color: var(--color-black);
    color: var(--color-primary);
}

.acordeon-item--destacado {
    border-left-color: var(--color-accent);
}

.acordeon-badge {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.acordeon-panel .ambito-cta {
    margin: 0 1.75rem 1.5rem 3.75rem;
}

@media (max-width: 600px) {
    .acordeon-panel .ambito-cta {
        margin-left: 2.5rem;
    }
}

/* ========================================
   Botón "Descubre la especialidad" (Servicios → Cultura)
   ======================================== */
.ambito-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.6rem 1.25rem;
    background-color: var(--color-primary);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.ambito-cta:hover {
    background-color: var(--color-black);
    color: var(--color-primary);
    transform: translateX(4px);
}

/* ========================================
   Ámbitos de Consultoría — lista simple estática (Servicios), sin
   desplegable: reutiliza .acordeon-item/.acordeon-icon/.acordeon-titulo
   (puramente visuales) pero todo el contenido queda siempre visible, como
   en la web antigua.
   ======================================== */
.ambitos-lista {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.ambitos-lista .acordeon-item {
    padding: 1.5rem 1.75rem;
}

.ambito-item__cabecera {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.ambito-item__lista {
    list-style: none;
    padding: 0 0 0 3.75rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ambito-item__lista li {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    padding-left: 1.25rem;
    position: relative;
}

.ambito-item__lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
}

.ambito-item__cta {
    margin: 0.25rem 0 0 3.75rem;
}

@media (max-width: 600px) {
    .ambito-item__cabecera {
        gap: 0.85rem;
    }

    .ambito-item__lista,
    .ambito-item__cta {
        padding-left: 0;
        margin-left: 2.5rem;
    }
}

.section--light .ambito-item__lista li { color: rgba(0, 0, 0, 0.7); }

/* ========================================
   Temas de sección — ritmo alternado (negro es el tema por defecto)
   ======================================== */
/* Sección clara: fondo blanco + texto oscuro. Las tarjetas/chips con fondo propio
   oscuro se mantienen (resaltan como objeto negro sobre papel blanco); solo se
   oscurece el texto plano que va directamente sobre el blanco. */
.section--light {
    background: var(--color-white);
}

/* Modificador para alternar con el gris del logo ("impulso creativo") las
   secciones blancas que quedan pegadas unas a otras — rompe la monotonía sin
   volver al negro. Como el gris es medio-oscuro, el texto suelto (no dentro
   de una tarjeta blanca) pasa a blanco; las tarjetas blancas de dentro
   (.metodologia-item, .comm-card, .programa-card, .acordeon-item...) no
   cambian, quedan "elevadas" sobre el gris igual que hacían en modo oscuro. */
.section--tint {
    background: var(--color-surface);
}

.section--tint .categoria-titulo,
.section--tint .filtro-btn {
    color: var(--color-white);
}

.section--tint .carrusel-proyectos__barra { background: rgba(255, 255, 255, 0.18); }
.section--tint .carrusel-proyectos__flecha { background: rgba(255, 255, 255, 0.14); color: var(--color-white); }

.formacion-objetivos-section.section--tint .objetivo-item { border-bottom-color: rgba(255, 255, 255, 0.18); }
.formacion-objetivos-section.section--tint .objetivo-item span { color: rgba(255, 255, 255, 0.85); }

/* "Con quién trabajamos": banda BLANCA (para que los logos con fondo blanco se
   integren) con muro de logos en grayscale que recuperan color al pasar el ratón. */
.clientes-section {
    background: #ffffff;
}

/* Cinta de logos en movimiento continuo (estilo web antigua).
   A sangre: se sale del .container para ocupar todo el ancho de la página. */
.clientes-marquee {
    margin-top: 2.5rem;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.clientes-track {
    display: flex;
    align-items: center;
    gap: 4.5rem;
    width: max-content;
    animation: clientes-scroll 32s linear infinite;
}

.clientes-marquee:hover .clientes-track {
    animation-play-state: paused;
}

.clientes-track img {
    height: 110px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    flex-shrink: 0;
}

@keyframes clientes-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 600px) {
    .clientes-track { gap: 3rem; }
    .clientes-track img { height: 78px; max-width: 210px; }
}

/* Sin movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .clientes-track { animation: none; }
}

.section--light .section-title,
.section--light .title-accent,
.section--light .bloque-arte__texto h3,
.section--light .miembro-info h2 {
    color: var(--color-black);
}

.section--light .bloque-arte__texto p,
.section--light .miembro-cargo,
.section--light .miembro-descripcion,
.section--light .metodologia-subtitulo {
    color: rgba(0, 0, 0, 0.72);
}


/* ========================================
   Tarjetas — contraste real con el fondo de su sección
   ======================================== */
/* SECCIONES OSCURAS (tema por defecto): antes muchas tarjetas tenían el mismo
   negro que el fondo y desaparecían. Superficie elevada (gris del logo) para
   que se despeguen del negro; las que no llevan acento amarillo reciben
   además borde. */
.metodologia-item,
.programa-card,
.formato-item,
.objetivo-item,
.acordeon-item {
    background-color: var(--color-surface);
}

.metodologia-item,
.programa-card,
.formato-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Filo amarillo superior de las tarjetas de metodología: debe ir DESPUÉS del
   border 1px de arriba, si no el atajo `border` lo pisaría. */
.metodologia-item {
    border-top: 3px solid var(--color-primary);
}

/* SECCIONES CLARAS: esas mismas tarjetas pasan a una superficie gris muy suave
   (se separan del blanco de la sección) con elevación y acento amarillo, para que
   no queden "blanco sobre blanco". */
.section--light :is(.acordeon-item, .formato-item, .objetivo-item) {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* Acento amarillo superior en las tarjetas de icono (no llevan borde izquierdo) */
.section--light .formato-item {
    border-top: 3px solid var(--color-primary);
}

.section--light :is(.acordeon-item, .objetivo-item) {
    border-left: 4px solid var(--color-primary);
}

.section--light :is(.formato-item) :is(h3, h4, p, span, li, strong, small) {
    color: var(--color-black);
}
/* Acordeón sobre secciones claras: ayuda, títulos, chevron y lista en oscuro. */
.section--light .acordeon-ayuda { color: rgba(0, 0, 0, 0.68); }
.section--light .acordeon-titulo strong { color: var(--color-black); }
.section--light .acordeon-titulo small { color: rgba(0, 0, 0, 0.7); }
.section--light .acordeon-chevron { color: var(--color-black); }
.section--light .acordeon-panel li { color: rgba(0, 0, 0, 0.7); }

/* ========================================
   Escenas a pantalla completa (home)
   Cada sección = foto a sangre + titular corto + 1-2 líneas.
   ======================================== */
.escena {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-color: var(--color-black);
    color: var(--color-white);
    overflow: hidden;
    scroll-snap-align: start;
}

/* Velo que funde la foto y garantiza legibilidad del texto. */
.escena::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.55) 40%,
        rgba(0, 0, 0, 0.25) 70%,
        rgba(0, 0, 0, 0.55) 100%);
}

/* El hero centra el texto verticalmente (zona donde el velo general es más
   claro) y su título es amarillo: sobre fotos claras (p.ej. una sala de
   galería con paredes blancas) el contraste se queda corto. Velo propio,
   más oscuro y uniforme, solo para esta escena. */
.escena--hero::after {
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.7) 40%,
        rgba(0, 0, 0, 0.6) 70%,
        rgba(0, 0, 0, 0.72) 100%);
}

.escena--dcha { align-items: flex-end; }

/* Hero: texto pegado a la izquierda y centrado en vertical (no abajo).
   Descuenta la navbar sticky para caber en una sola pantalla. */
.escena--hero {
    align-items: center;
    min-height: calc(100vh - var(--nav-height));
    min-height: calc(100svh - var(--nav-height));
}

/* En tablet/móvil el hero se reduce un poco (deja asomar el inicio de la
   siguiente sección y se siente menos largo). */
@media (max-width: 1024px) {
    .escena--hero {
        min-height: calc(85vh - var(--nav-height));
        min-height: calc(85svh - var(--nav-height));
    }
}
.escena--hero .escena__contenido {
    max-width: none;
    margin: 0;
    padding: 3rem 6vw;
}

.escena__contenido {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 6vw 14vh;
}

.escena--dcha .escena__contenido { text-align: right; }

.escena__kicker {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.escena__titulo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2.6rem, 7vw, 6rem);
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin: 0;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.escena--hero .escena__titulo {
    font-size: clamp(3.2rem, 8.5vw, 7.5rem);
    color: var(--color-primary);
}

.escena__texto {
    margin-top: 1.5rem;
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    font-weight: 400;
    line-height: 1.65;
    max-width: 46ch;
    color: rgba(255, 255, 255, 0.88);
}

.escena--dcha .escena__texto { margin-left: auto; }

/* Botón / enlace de acción dentro de una escena */
.escena__cta {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.9rem 2.2rem;
    background: var(--color-primary);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    border-radius: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.25s ease, color 0.25s ease;
}

.escena__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(255, 207, 2, 0.3);
}

.escena__cta--linea {
    background: transparent;
    color: var(--color-white);
    padding: 0.6rem 0;
    border-radius: 0;
    border-bottom: 2px solid var(--color-primary);
}

.escena__cta--linea:hover {
    color: var(--color-primary);
    transform: translateX(4px);
    box-shadow: none;
}

/* Indicador de scroll en el hero */
.escena__scroll {
    position: absolute;
    left: 50%;
    bottom: 2.5rem;
    transform: translateX(-50%);
    z-index: 1;
    color: rgba(255, 255, 255, 0.7);
    animation: escena-scroll 2s ease-in-out infinite;
}

@keyframes escena-scroll {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
    50%      { transform: translate(-50%, 8px); opacity: 1; }
}

@media (max-width: 640px) {
    .escena__contenido { padding: 0 1.5rem 16vh; }
    .escena--dcha .escena__contenido,
    .escena--dcha .escena__texto { text-align: left; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .escena__scroll { animation: none; }
}

/* ========================================
   Bloques de contenido de la home (equilibrio foto/texto)
   ======================================== */
.bloque-seccion { position: relative; padding: 5.5rem 0; }

.bloque {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3.5rem;
    align-items: center;
    margin-top: 2.5rem;
}

.bloque__texto p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.1rem;
    color: rgba(255, 255, 255, 0.82);
}

.bloque__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
}

.bloque__pares {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 0.6rem;
    margin-top: 1.7rem;
}

.bloque__pares span {
    border-left: 3px solid var(--color-primary);
    padding: 0.15rem 0 0.15rem 0.7rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
}

@media (max-width: 760px) {
    .bloque { grid-template-columns: 1fr; gap: 2rem; }
}

/* "Qué hacemos": puntos amarillos dispersos de fondo, como en el resto del sitio */
.comm-hacemos-section {
    position: relative;
    overflow: hidden;
}

.comm-hacemos-section::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: -25px;
    width: 110px;
    height: 110px;
    border: 2px solid rgba(255, 207, 2, 0.1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.comm-hacemos-section .container {
    position: relative;
    z-index: 1;
}

/* Tarjetas de Comunicación 360 */
.comm-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
    margin-top: 3rem;
}

@media (min-width: 600px) {
    .comm-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .comm-grid { grid-template-columns: repeat(3, 1fr); }
}

.comm-card {
    background-color: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--color-primary);
    border-radius: 14px;
    padding: 1.7rem 1.6rem;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.comm-grid .comm-card:hover {
    transform: translateY(-6px);
}

.comm-card__n {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--color-primary);
    margin-bottom: 0.6rem;
}

.comm-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.comm-card p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}

.section--light .comm-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 3px solid var(--color-primary);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}
.section--light .comm-card p { color: rgba(0, 0, 0, 0.7); }

/* CTA final — banda con foto de fondo y velo oscuro (escena de cierre) */
.cta-seccion {
    position: relative;
    padding: 7rem 0;
    text-align: center;
    background: #000 url("../img/arte-2.webp") center / cover no-repeat;
    color: var(--color-white);
    overflow: hidden;
}

.cta-seccion::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.62) 100%);
}

.cta-seccion .container {
    position: relative;
    z-index: 1;
}

.cta-seccion .section-title { color: var(--color-white); }

.cta-seccion p {
    max-width: 54ch;
    margin: 0 auto 2rem;
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

/* Texto oscuro para los bloques de contenido dentro de secciones claras */
.section--light .bloque__texto p { color: rgba(0, 0, 0, 0.74); }
.section--light .bloque__pares span { color: var(--color-black); }

/* Enlace-línea (escena__cta--linea) sobre secciones claras → texto oscuro */
.section--light .escena__cta--linea { color: var(--color-black); }

/* Servicios (home): tarjetas-enlace a las líneas de servicio.
   Móvil: 1 columna. Tablet en adelante: 2×2. */
.areas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
    margin-top: 3rem;
}

@media (min-width: 600px) {
    .areas-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 780px;
        margin-inline: auto;
    }
}

@media (min-width: 900px) {
    .areas-grid {
        max-width: 900px;
    }
}

.area-card {
    display: block;
    background-color: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--color-primary);
    border-radius: 14px;
    padding: 2rem 1.8rem;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.areas-grid .area-card:hover {
    transform: translateY(-4px);
}

.area-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.7rem;
}

.area-card p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 1.2rem;
}

.area-card__link {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary);
}

/* "Qué hacemos" sobre sección clara: tarjetas blancas con texto oscuro,
   acento amarillo superior y elevación (mismo tratamiento que el resto de
   tarjetas en .section--light). */
.section--light .area-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 3px solid var(--color-primary);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
.section--light .area-card h3 { color: var(--color-black); }
.section--light .area-card p { color: rgba(0, 0, 0, 0.72); }
.section--light .area-card__link { color: var(--color-black); }

/* Reescrituras de .section--tint que necesitan ganar a las de .section--light
   de arriba (misma especificidad): se colocan después de todas ellas a
   propósito, para no depender de en qué orden se añadan nuevas reglas claras. */
.section--tint .section-title,
.section--tint .title-accent,
.section--tint .metodologia-subtitulo,
.section--tint .acordeon-ayuda,
.section--tint .escena__cta--linea {
    color: var(--color-white);
}

/* ========================================
   Páginas legales (Aviso legal, Privacidad, Cookies)
   ======================================== */
.legal-texto {
    max-width: 820px;
    color: var(--color-black);
}

.legal-texto p,
.legal-texto ul {
    color: rgba(0, 0, 0, 0.78);
    margin-bottom: 1.25rem;
}

.legal-texto h2 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--color-black);
    margin: 2.5rem 0 1rem;
}

.legal-texto h2:first-of-type {
    margin-top: 0;
}

.legal-texto ul {
    padding-left: 1.25rem;
}

.legal-texto li {
    margin-bottom: 0.4rem;
}

.tabla-cookies-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.tabla-cookies {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.tabla-cookies th,
.tabla-cookies td {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.78);
}

/* Mosaico a sangre con fondo amarillo de marca asomando entre las fotos
   (como la franja de galería de la web antigua, que tiene fondo amarillo
   detrás de las imágenes de la página de contacto). */
.contacto-galeria {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 4.5rem;
    background-color: var(--color-primary);
}

.contacto-galeria::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
    z-index: 1;
    pointer-events: none;
}

.contacto-galeria img {
    width: 100%;
    height: 46vh;
    min-height: 280px;
    object-fit: cover;
    display: block;
    filter: brightness(0.88) saturate(0.95);
    transition: filter 0.6s ease, transform 0.6s ease;
}

.contacto-galeria img:hover {
    filter: brightness(1) saturate(1.05);
    transform: scale(1.02);
}

@media (max-width: 900px) {
    .contacto-galeria {
        grid-template-columns: repeat(2, 1fr);
    }
    .contacto-galeria img {
        height: 32vh;
        min-height: 220px;
    }
}

@media (max-width: 540px) {
    .contacto-galeria {
        grid-template-columns: 1fr;
    }
    .contacto-galeria img {
        height: 42vh;
        min-height: 240px;
    }
}

.tabla-cookies th {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-black);
    border-bottom: 2px solid var(--color-primary);
}

/* Tarjetas de áreas con foto (estilo de la web antigua): foto de fondo con
   degradado oscuro, texto abajo y zoom suave de la foto al pasar el ratón.
   La foto llega por la variable --area-foto, definida en cada tarjeta. */
.areas-grid--fotos {
    max-width: 960px;
    margin-inline: auto;
}

@media (min-width: 600px) {
    .areas-grid--fotos {
        max-width: 960px;
    }
}

.area-card.area-card--foto,
.section--light .area-card.area-card--foto {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 220px;
    padding: 1.8rem 1.5rem;
    border: 0;
    border-radius: 14px;
    background: #000;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    isolation: isolate;
}

@media (min-width: 600px) {
    .area-card.area-card--foto,
    .section--light .area-card.area-card--foto {
        min-height: 300px;
    }
}

.area-card--foto::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--area-foto) center / cover no-repeat;
    transition: transform 0.6s ease;
}

.area-card--foto::after {
    /* sustituye a la línea amarilla inferior: aquí es el degradado de lectura */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    height: auto;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.1) 100%);
    transform: none;
    border-radius: 0;
}

.areas-grid .area-card--foto:hover::before {
    transform: scale(1.08);
}

.area-card--foto h3,
.section--light .area-card--foto h3 {
    color: #fff;
}

.area-card--foto p,
.section--light .area-card--foto p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1rem;
}

.area-card--foto .area-card__link,
.section--light .area-card--foto .area-card__link {
    color: var(--color-primary);
}

/* Formación · Programas formativos: la sección deja de ser blanco puro (gris
   claro cálido) para que las tarjetas blancas queden elevadas, y se corrige el
   amarillo sobre blanco (número y "Dirigido a"), que apenas se leía. */
.programas-section.section--light {
    background: #f1f0ec;
}

.section--light .programa-card-numero {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    font-size: 1.35rem;
    border-radius: 10px;
    background: var(--color-black);
    color: var(--color-primary);
}

.section--light .programa-dirigido {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    background: #fff3b8;
    color: var(--color-black);
}

@media (min-width: 700px) {
    .programas-section .programa-card-content ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem 1.5rem;
    }
}

/* Consultoría · Ámbitos: mismo tratamiento que "Programas formativos": el fondo
   deja de ser blanco puro para que las tarjetas blancas queden elevadas. */
.ambitos-section.section--light:not(.section--tint) {
    background: #f1f0ec;
}

/* Ámbitos: mismos colores que los programas formativos: icono en cuadro negro
   con trazo amarillo (como el número 01-05) y etiqueta en amarillo pálido con
   texto negro (como "Dirigido a"). */
.ambitos-section.section--light .acordeon-icon {
    background-color: var(--color-black);
    color: var(--color-primary);
}

.ambitos-section.section--light .acordeon-badge {
    background-color: #fff3b8;
    color: var(--color-black);
}

/* ========================================
   Accesibilidad
   ======================================== */

/* El amarillo de marca (#FFCF02) apenas llega a 1,4:1 sobre blanco. Sobre fondo
   claro, el texto y los iconos amarillos usan un ámbar oscuro (≈4,9:1). */
:root {
    --color-acento-texto: #8A6D00;
}

.section--light .formato-item svg,
.contacto-form .campo-obligatorio {
    color: var(--color-acento-texto);
}

/* Foco de teclado visible en cualquier fondo: anillo negro con halo amarillo.
   :where() deja la especificidad en 0, así que los estilos de foco propios de
   cada componente siguen ganando. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--color-black);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--color-primary);
}

.campo-input:focus-visible {
    outline: 3px solid var(--color-black);
    outline-offset: 1px;
}

/* La imagen de la galería recorta su contenido: el anillo va por dentro */
.proyecto-galeria__item:focus-visible {
    outline-offset: -3px;
    box-shadow: inset 0 0 0 6px var(--color-primary);
}

/* Campo trampa anti-spam: fuera de pantalla (no display:none, que los bots
   más simples sí detectan) y sin acceso por teclado ni lectores de pantalla. */
.campo-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Mensajes de error del formulario */
.campo-error {
    margin-top: 0.35rem;
}

/* Listas y etiquetas de texto (contenido literal del documento de textos) */
.lista-texto {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.lista-texto li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    padding-left: 1.25rem;
    position: relative;
}

.lista-texto li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
}

.section--light .lista-texto li { color: rgba(0, 0, 0, 0.7); }

.etiqueta-texto {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 1.1rem 0 0.2rem;
}

.section--light .etiqueta-texto { color: var(--color-acento-texto); }

.acordeon-panel .etiqueta-texto,
.acordeon-panel .texto-panel {
    padding: 0 1.75rem 0 3.75rem;
}

.acordeon-panel .texto-panel {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.acordeon-panel .etiqueta-texto:first-child { margin-top: 0; }

.bloque-texto-extra {
    margin-top: 2.5rem;
}

.bloque-texto-extra p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 0.8rem;
    color: rgba(0, 0, 0, 0.75);
}

@media (max-width: 600px) {
    .acordeon-panel .etiqueta-texto,
    .acordeon-panel .texto-panel {
        padding-left: 2.5rem;
    }
}

/* Comunicación 360: "está pensada para" + "integra" + cierre */
.comm-pilares {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .comm-pilares { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

.comm-panel {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 3px solid var(--color-primary);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
    padding: 2rem 1.9rem;
}

.comm-panel__intro {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-black);
    margin-bottom: 1.3rem;
}

.comm-checks,
.comm-pasos {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comm-checks li,
.comm-pasos li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.78);
}

.comm-checks li:last-child,
.comm-pasos li:last-child {
    border-bottom: none;
}

.comm-checks svg {
    flex-shrink: 0;
    color: var(--color-acento-texto);
}

.comm-paso__n {
    flex-shrink: 0;
    min-width: 2.4rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--color-acento-texto);
}

.comm-cierre {
    margin: 2rem auto 0;
    max-width: 780px;
    padding: 0.4rem 0 0.4rem 1.4rem;
    border-left: 4px solid var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-black);
}

/* Consultoría: "Trabajamos con" */
.clientes-lista {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 860px;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 3rem;
}

@media (min-width: 700px) {
    .clientes-lista { grid-template-columns: repeat(2, 1fr); }
}

.clientes-lista li {
    padding: 1rem 0 1rem 1.2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-left: 3px solid var(--color-primary);
    margin-bottom: 0.4rem;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-black);
}

/* Ajustes de contraste y viñetas de las listas de texto */
.lista-texto li::before,
.clientes-lista li::before {
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(138, 109, 0, 0.35);
}

.lista-texto li { text-align: left; }
.formato-item .lista-texto { margin-top: 0.8rem; }

.section--light .acordeon-panel .texto-panel { color: rgba(0, 0, 0, 0.7); }

/* "Trabajamos con" sobre el gris (section--tint): texto claro y viñetas con color */
.clientes-lista li {
    position: relative;
    border-left: none;
    padding-left: 1.8rem;
}

.clientes-lista li::before {
    content: '';
    position: absolute;
    left: 0.2rem;
    top: 1.5rem;
    border-radius: 50%;
}

.section--tint .clientes-lista li {
    color: var(--color-white);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.section--tint .comm-cierre { color: var(--color-white); }

/* "Trabajamos con": cada elemento es una tarjetita con fondo propio */
.clientes-lista {
    gap: 0.9rem 1.25rem;
}

.section--tint .clientes-lista li,
.clientes-lista li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 1.1rem 1.4rem 1.1rem 3rem;
    background: #ffffff;
    color: var(--color-black);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 4px solid var(--color-primary);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    transition: transform 0.3s ease;
}

.clientes-lista li:hover { transform: translateY(-3px); }

.clientes-lista li::before {
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Frase de cierre de "Trabajamos con": centrada, con la misma anchura que la lista */
.clientes-lista + .comm-cierre {
    max-width: 860px;
    margin: 2.5rem auto 0;
    padding: 1.6rem 0 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    text-align: center;
}

/* Tarjetas de producción cultural: 3 columnas a todo el ancho, texto a la izquierda */
.formatos-grid--tres {
    max-width: none;
    margin-top: 2rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .formatos-grid--tres .formato-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .formatos-grid--tres { grid-template-columns: repeat(3, 1fr); }
}

.formatos-grid--tres .formato-item {
    text-align: left;
    padding: 1.8rem 1.6rem;
}

.formatos-grid--tres .formato-item h3 {
    font-size: 1.05rem;
    line-height: 1.35;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.formatos-grid--tres .lista-texto { margin-top: 0; }

.produccion-intro {
    max-width: 820px;
    margin: 0 auto 1rem;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.75);
}

.produccion-subtitulo {
    margin: 3rem 0 0;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-black);
}


.formatos-grid--tres .formato-item h3 { min-height: 2.8em; display: flex; align-items: flex-end; }

.formatos-grid--tres ~ .comm-cierre {
    max-width: 860px;
    margin: 2.5rem auto 0;
    padding: 0;
    border-left: none;
    text-align: center;
}