/*
 * Estilos para el plugin Onda Proyectos Europeos
 * Compatible con Divi: hereda la fuente de cuerpo del tema y usa
 * las variables CSS de Divi para colores de acento y fuente de título.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   VARIABLES Y SISTEMA DE DISEÑO
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Colores de marca */
  --ope-color-europeo:    #003087;   /* Azul UE */
  --ope-color-nextgen:    #12123A;   /* Azul corporativo Next Generation */
  --ope-color-ejecucion:  #e67e00;   /* Naranja — en ejecución */
  --ope-color-finalizado: #2e7d32;   /* Verde oscuro — finalizado */

  /* Colores de texto (escala) */
  --ope-color-acento:  var(--et_global_heading_text_color, #003087);
  --ope-color-texto:   #333333;   /* cuerpo principal */
  --ope-color-muted:   #555555;   /* texto secundario */
  --ope-color-sutil:   #777777;   /* meta, placeholders */

  /* Fondos y bordes */
  --ope-color-fondo-alt: #f5f7fa;
  --ope-color-borde:     #dde1e7;

  /* Tipografía — dos variables diferenciadas */
  --ope-fuente-titulo: var(--et_pb_font_header_family, 'Open Sans', sans-serif);
  --ope-fuente-cuerpo: inherit;   /* hereda la fuente de cuerpo de Divi */

  /* Escala de tamaños */
  --ope-text-xs:   0.75rem;    /* 12px — badges */
  --ope-text-sm:   0.875rem;   /* 14px — meta, programa */
  --ope-text-base: 1rem;       /* 16px — cuerpo */
  --ope-text-lg:   1.125rem;   /* 18px — lead, h3 */
  --ope-text-xl:   1.375rem;   /* 22px — h2 sección */
  --ope-text-2xl:  clamp(1.75rem, 3.5vw, 2.5rem);  /* h1 página */

  /* Utilitarios */
  --ope-radio:  6px;
  --ope-sombra: 0 2px 12px rgba(0, 0, 0, .08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET LOCAL — scoped a nuestros contenedores
   ═══════════════════════════════════════════════════════════════════════════ */

.ope-proyecto *,
.ope-archivo *,
.ope-destacados *,
.ope-cifras * {
  box-sizing: border-box;
}

/* Base tipográfica compartida por ambas páginas */
.ope-proyecto,
.ope-archivo {
  font-family:  var(--ope-fuente-cuerpo);
  font-size:    var(--ope-text-base);
  line-height:  1.65;
  color:        var(--ope-color-texto);
}

/* Neutralizar márgenes de Divi en headings dentro de nuestros contenedores */
.ope-proyecto h1,
.ope-proyecto h2,
.ope-proyecto h3,
.ope-archivo  h1,
.ope-archivo  h2,
.ope-archivo  h3 {
  font-family:  var(--ope-fuente-titulo);
  color:        var(--ope-color-acento);
  line-height:  1.25;
  margin-top:   0;
  padding:      0;
}

.ope-proyecto p,
.ope-archivo  p {
  font-family:  var(--ope-fuente-cuerpo);
  font-size:    var(--ope-text-base);
  line-height:  1.65;
  color:        var(--ope-color-texto);
  margin-top:   0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA INDIVIDUAL — single-proyecto-europeo.php
   ═══════════════════════════════════════════════════════════════════════════ */

.ope-proyecto {
  max-width: 900px;
  margin:    0 auto;
  padding:   2.5rem 1.25rem;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.ope-proyecto__cabecera {
  margin-bottom: 2.5rem;
}

.ope-proyecto__badges {
  display:   flex;
  flex-wrap: wrap;
  gap:       .5rem;
  margin-bottom: .85rem;
}

/* h1 del proyecto */
.ope-proyecto__titulo {
  font-family:  var(--ope-fuente-titulo);
  font-size:    var(--ope-text-2xl);
  font-weight:  700;
  color:        var(--ope-color-acento);
  line-height:  1.2;
  margin:       0 0 .6rem;
}

/* h3 subtítulo programa — semántico bajo h1 */
.ope-proyecto__programa {
  font-family:  var(--ope-fuente-cuerpo);
  font-size:    var(--ope-text-lg);
  font-weight:  600;
  color:        var(--ope-color-muted);
  line-height:  1.4;
  margin:       0;
}

/* ── Títulos de sección (h2) ──────────────────────────────────────────────── */
.ope-seccion__titulo {
  font-family:  var(--ope-fuente-titulo);
  font-size:    var(--ope-text-xl);
  font-weight:  700;
  color:        var(--ope-color-acento);
  line-height:  1.3;
  border-left:  4px solid var(--ope-color-europeo);
  padding-left: .65rem;
  margin:       2.25rem 0 1rem;
}

/* ── Descripción ──────────────────────────────────────────────────────────── */
.ope-proyecto__descripcion {
  margin-bottom: 2rem;
}

.ope-proyecto__descripcion-contenido p {
  font-size:     var(--ope-text-base);
  line-height:   1.75;
  color:         var(--ope-color-texto);
  margin-bottom: 1rem;
}

/* ── Tabla de datos ───────────────────────────────────────────────────────── */
.ope-proyecto__datos {
  margin-bottom: 2rem;
}

.ope-tabla-datos {
  width:          100%;
  border-collapse: collapse;
  font-family:    var(--ope-fuente-cuerpo);
  font-size:      var(--ope-text-sm);
}

.ope-tabla-datos th,
.ope-tabla-datos td {
  padding:        .7rem 1rem;
  border:         1px solid var(--ope-color-borde);
  text-align:     left;
  vertical-align: top;
  line-height:    1.5;
}

.ope-tabla-datos th {
  background:    var(--ope-color-fondo-alt);
  font-weight:   600;
  color:         var(--ope-color-muted);
  white-space:   nowrap;
  width:         22%;
}

.ope-tabla-datos td {
  color:         var(--ope-color-texto);
  font-weight:   400;
}

.ope-tabla-datos tr:hover td {
  background: #fafbfc;
}

@media (max-width: 600px) {
  .ope-tabla-datos,
  .ope-tabla-datos tbody,
  .ope-tabla-datos tr,
  .ope-tabla-datos th,
  .ope-tabla-datos td {
    display: block;
    width:   100%;
  }

  .ope-tabla-datos th {
    border-bottom: none;
    padding-bottom: .3rem;
  }

  .ope-tabla-datos td {
    margin-bottom: .5rem;
  }
}

/* ── Socios ───────────────────────────────────────────────────────────────── */
.ope-proyecto__socios {
  margin-bottom: 2rem;
}

.ope-socios-lista {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:        .5rem;
}

.ope-socios-lista__item {
  background:  var(--ope-color-fondo-alt);
  border:      1px solid var(--ope-color-borde);
  border-radius: var(--ope-radio);
  padding:     .55rem 1rem;
  font-family: var(--ope-fuente-cuerpo);
  font-size:   var(--ope-text-sm);
  font-weight: 400;
  color:       var(--ope-color-texto);
  line-height: 1.5;
}

/* ── CTA de navegación (bottom) ───────────────────────────────────────────── */
.ope-proyecto__nav-cta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         1rem;
  margin:      2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top:  1px solid var(--ope-color-borde);
}

/* ── Galería de logos ─────────────────────────────────────────────────────── */
.ope-proyecto__logos {
  margin-bottom: 2.5rem;
}

.ope-galeria-logos {
  display:       flex;
  flex-wrap:     wrap;
  gap:           1.5rem;
  align-items:   center;
  padding:       1.25rem;
  background:    var(--ope-color-fondo-alt);
  border:        1px solid var(--ope-color-borde);
  border-radius: var(--ope-radio);
}

.ope-galeria-logos__item {
  margin: 0;
  flex:   0 0 auto;
}

.ope-galeria-logos__img {
  height:      60px;
  width:       auto;
  object-fit:  contain;
  display:     block;
}

/* ── Galería de fotos ─────────────────────────────────────────────────────── */
.ope-proyecto__fotos {
  margin-bottom: 2.5rem;
}

.ope-galeria-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:     1rem;
}

.ope-galeria-fotos__item {
  margin:        0;
  overflow:      hidden;
  border-radius: var(--ope-radio);
  box-shadow:    var(--ope-sombra);
}

.ope-galeria-fotos__enlace {
  display: block;
}

.ope-galeria-fotos__img {
  width:        100%;
  height:       200px;
  object-fit:   cover;
  display:      block;
  transition:   transform .3s ease;
}

.ope-galeria-fotos__item:hover .ope-galeria-fotos__img {
  transform: scale(1.04);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA DE ARCHIVO — archive-proyecto-europeo.php
   ═══════════════════════════════════════════════════════════════════════════ */

.ope-archivo {
  max-width: 1100px;
  margin:    0 auto;
  padding:   2.5rem 1.25rem;
}

/* ── Cabecera del archivo ─────────────────────────────────────────────────── */
.ope-archivo__cabecera {
  text-align:    center;
  margin-bottom: 3rem;
}

.ope-archivo__titulo {
  font-family:  var(--ope-fuente-titulo);
  font-size:    var(--ope-text-2xl);
  font-weight:  700;
  color:        var(--ope-color-acento);
  line-height:  1.2;
  margin:       0 0 .75rem;
}

.ope-archivo__subtitulo,
.ope-archivo__descripcion {
  font-family:  var(--ope-fuente-cuerpo);
  font-size:    var(--ope-text-lg);
  font-weight:  400;
  color:        var(--ope-color-muted);
  line-height:  1.6;
  max-width:    640px;
  margin:       0 auto;
}

.ope-archivo__vacio {
  text-align:  center;
  font-size:   var(--ope-text-base);
  color:       var(--ope-color-sutil);
  padding:     3rem 0;
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.ope-badge {
  display:        inline-block;
  padding:        .3rem .85rem;
  border-radius:  999px;
  font-family:    var(--ope-fuente-cuerpo);
  font-size:      var(--ope-text-xs);
  font-weight:    700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height:    1;
  color:          #fff;
}

.ope-badge--europeo   { background-color: var(--ope-color-europeo); }
.ope-badge--nextgen   { background-color: var(--ope-color-nextgen); }
.ope-badge--sm        { font-size: .7rem; padding: .2rem .65rem; }
.ope-estado--ejecucion  { background-color: var(--ope-color-ejecucion); }
.ope-estado--finalizado { background-color: var(--ope-color-finalizado); }

.ope-tarjeta-proyecto__badges {
  display:   flex;
  flex-wrap: wrap;
  gap:       .4rem;
}

/* ── Grid de tarjetas ─────────────────────────────────────────────────────── */
.ope-grid-proyectos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:     1.75rem;
  margin-bottom: 2.5rem;
}

/* ── Tarjeta ──────────────────────────────────────────────────────────────── */
.ope-tarjeta-proyecto {
  background:    #fff;
  border:        1px solid var(--ope-color-borde);
  border-radius: calc(var(--ope-radio) * 1.5);
  box-shadow:    var(--ope-sombra);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  transition:    box-shadow .2s, transform .2s;
}

.ope-tarjeta-proyecto:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  transform:  translateY(-3px);
}

.ope-tarjeta-proyecto__imagen-enlace {
  display:          block !important;
  position:         relative !important;
  width:            100% !important;
  padding-top:      56.25% !important;   /* 16:9 = 9/16 = 0.5625 */
  overflow:         hidden !important;
  text-decoration:  none !important;
  background:       var(--ope-color-fondo-alt);
}

.ope-tarjeta-proyecto__imagen {
  position:         absolute !important;
  top:              0 !important;
  left:             0 !important;
  width:            100% !important;
  height:           100% !important;
  object-fit:       contain !important;
  object-position:  center !important;
  background:       var(--ope-color-fondo-alt) !important;
  display:          block !important;
  transition:       transform .3s ease;
  margin:           0 !important;
  padding:          0 !important;
  border-radius:    0 !important;
}

.ope-tarjeta-proyecto:hover .ope-tarjeta-proyecto__imagen {
  transform: scale(1.04);
}

.ope-tarjeta-proyecto__contenido {
  padding:        1.25rem 1.4rem 1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            .65rem;
  flex:           1;
}

/* h2 de la tarjeta */
.ope-tarjeta-proyecto__titulo {
  font-family:  var(--ope-fuente-titulo);
  font-size:    var(--ope-text-lg);
  font-weight:  700;
  color:        var(--ope-color-acento);
  line-height:  1.3;
  margin:       0;
}

.ope-tarjeta-proyecto__titulo a {
  color:           var(--ope-color-acento);
  text-decoration: none;
}

.ope-tarjeta-proyecto__titulo a:hover {
  text-decoration: underline;
}

/* Programa en tarjeta */
.ope-tarjeta-proyecto__programa {
  font-family:  var(--ope-fuente-cuerpo);
  font-size:    var(--ope-text-sm);
  font-weight:  500;
  color:        var(--ope-color-muted);
  line-height:  1.4;
  margin:       0;
}

/* Extracto en tarjeta */
.ope-tarjeta-proyecto__extracto {
  font-family:  var(--ope-fuente-cuerpo);
  font-size:    var(--ope-text-sm);
  font-weight:  400;
  color:        var(--ope-color-muted);
  line-height:  1.6;
  flex:         1;
}

.ope-tarjeta-proyecto__extracto p {
  font-size:    var(--ope-text-sm);
  color:        var(--ope-color-muted);
  margin:       0;
}

/* ── Tarjeta sin imagen: placeholder de color ─────────────────────────────── */
.ope-tarjeta-proyecto__imagen-enlace--placeholder {
  background: linear-gradient(135deg, #002570 0%, var(--ope-color-europeo) 60%, #1a5fc8 100%) !important;
  /* hereda display:block, position:relative, width:100%, padding-top:56.25% de la clase base */
}

.ope-tarjeta-proyecto--nextgen .ope-tarjeta-proyecto__imagen-enlace--placeholder,
.ope-tarjeta-proyecto__imagen-enlace--placeholder--nextgen {
  background: linear-gradient(135deg, #0a0a22 0%, var(--ope-color-nextgen) 60%, #1e1e5c 100%) !important;
}

/* ── Botón nextgen ────────────────────────────────────────────────────────── */
.ope-btn--nextgen {
  background:   transparent;
  border-color: var(--ope-color-nextgen);
  color:        var(--ope-color-nextgen);
}

.ope-btn--nextgen:hover {
  background: var(--ope-color-nextgen);
  color:      #fff;
}

/* ── Variante nextgen del archivo: filtros y paginador en verde ───────────── */
.ope-archivo--nextgen .ope-prog-filtro--activo {
  background:   var(--ope-color-nextgen);
  border-color: var(--ope-color-nextgen);
}

.ope-archivo--nextgen .page-numbers.current,
.ope-archivo--nextgen .page-numbers:hover {
  background:   var(--ope-color-nextgen);
  border-color: var(--ope-color-nextgen);
}

/* ── Paginador ────────────────────────────────────────────────────────────── */
.ope-paginador {
  margin-top: 2rem;
}

/* ── Paginación — scoped para no afectar otras páginas ───────────────────── */
.ope-archivo .nav-links {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             .5rem;
  margin-top:      1.5rem;
}

.ope-archivo .page-numbers {
  display:         inline-block;
  padding:         .4rem .85rem;
  border:          1px solid var(--ope-color-borde);
  border-radius:   var(--ope-radio);
  font-family:     var(--ope-fuente-cuerpo);
  font-size:       var(--ope-text-sm);
  font-weight:     500;
  color:           var(--ope-color-acento);
  text-decoration: none;
  line-height:     1.5;
}

.ope-archivo .page-numbers.current,
.ope-archivo .page-numbers:hover {
  background:   var(--ope-color-europeo);
  border-color: var(--ope-color-europeo);
  color:        #fff;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.ope-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             .4rem;
  padding:         .65rem 1.4rem;
  border-radius:   var(--ope-radio);
  font-family:     var(--ope-fuente-cuerpo);
  font-size:       var(--ope-text-sm);
  font-weight:     600;
  line-height:     1;
  text-decoration: none;
  transition:      opacity .2s, transform .15s;
  cursor:          pointer;
  border:          2px solid transparent;
}

.ope-btn:hover {
  opacity:   .88;
  transform: translateY(-1px);
}

.ope-btn--primario {
  background:   var(--ope-color-europeo);
  border-color: var(--ope-color-europeo);
  color:        #fff;
}

.ope-btn--secundario {
  background:   transparent;
  border-color: var(--ope-color-europeo);
  color:        var(--ope-color-europeo);
}

.ope-btn--sm {
  padding:   .4rem 1rem;
  font-size: var(--ope-text-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENÚ DE NAVEGACIÓN — shortcode [menu_proyectos_europeos]
   ═══════════════════════════════════════════════════════════════════════════ */

.ope-nav-proyectos {
  position:      relative;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--ope-color-borde);
  background:    #fff;
}

.ope-nav__principal {
  display:     flex;
  align-items: center;
  gap:         .25rem;
}

/* ── Lista de secciones ───────────────────────────────────────────────────── */
.ope-menu {
  display:     flex;
  flex-wrap:   wrap;
  align-items: stretch;
  list-style:  none;
  padding:     0;
  margin:      0;
  flex:        1;
}

.ope-menu > li > a,
.ope-menu > li > button {
  display:         flex;
  align-items:     center;
  padding:         .75rem .9rem;
  font-family:     var(--ope-fuente-cuerpo);
  font-size:       var(--ope-text-sm);
  font-weight:     600;
  color:           var(--ope-color-texto);
  text-decoration: none;
  white-space:     nowrap;
  border-bottom:   3px solid transparent;
  background:      none;
  border-top:      none;
  border-left:     none;
  border-right:    none;
  line-height:     1;
  cursor:          pointer;
  transition:      color .2s, border-color .2s;
}

.ope-menu > li > a:hover,
.ope-menu > li.current-menu-item > a,
.ope-menu > li.current-page-ancestor > a {
  color:              var(--ope-color-europeo);
  border-bottom-color: var(--ope-color-europeo);
}

/* ── Selector de idioma ──────────────────────────────────────────────────── */
.ope-lang-selector {
  position: relative;
}

.ope-lang-selector__btn {
  display:       flex;
  align-items:   center;
  gap:           .35rem;
  padding:       .75rem .9rem;
  background:    none;
  border:        none;
  border-bottom: 3px solid transparent;
  font-family:   var(--ope-fuente-cuerpo);
  font-size:     var(--ope-text-sm);
  font-weight:   700;
  color:         var(--ope-color-texto);
  cursor:        pointer;
  white-space:   nowrap;
  line-height:   1;
  transition:    color .2s, border-color .2s;
}

.ope-lang-selector__btn:hover,
.ope-lang-selector.is-open .ope-lang-selector__btn {
  color:              var(--ope-color-europeo);
  border-bottom-color: var(--ope-color-europeo);
}

.ope-lang-selector__arrow {
  font-size:   .55rem;
  transition:  transform .2s;
  display:     inline-block;
}

.ope-lang-selector.is-open .ope-lang-selector__arrow {
  transform: rotate(180deg);
}

.ope-lang-selector__dropdown {
  display:       none;
  position:      absolute;
  top:           calc(100% + 4px);
  right:         0;
  min-width:     140px;
  list-style:    none;
  padding:       .4rem 0;
  margin:        0;
  background:    #fff;
  border:        1px solid var(--ope-color-borde);
  border-radius: var(--ope-radio);
  box-shadow:    var(--ope-sombra);
  z-index:       9999;
}

.ope-lang-selector.is-open .ope-lang-selector__dropdown {
  display: block;
}

.ope-lang-selector__dropdown li > a {
  display:         block;
  padding:         .55rem 1.1rem;
  font-family:     var(--ope-fuente-cuerpo);
  font-size:       var(--ope-text-sm);
  font-weight:     400;
  color:           var(--ope-color-texto);
  text-decoration: none;
  transition:      background .15s, color .15s;
}

.ope-lang-selector__dropdown li > a:hover {
  background: var(--ope-color-fondo-alt);
  color:      var(--ope-color-europeo);
}

.ope-lang-selector__dropdown li.current-lang > a {
  font-weight: 700;
  color:       var(--ope-color-europeo);
}

/* ── Buscador ────────────────────────────────────────────────────────────── */
.ope-busqueda {
  display:       flex;
  align-items:   center;
  border:        1.5px solid var(--ope-color-borde);
  border-radius: 999px;
  overflow:      hidden;
  background:    var(--ope-color-fondo-alt);
  margin:        .4rem .5rem .4rem 0;
  flex-shrink:   0;
  transition:    border-color .2s;
}

.ope-busqueda:focus-within {
  border-color: var(--ope-color-europeo);
}

.ope-busqueda__input {
  border:      none;
  background:  transparent;
  padding:     .4rem .75rem;
  font-family: var(--ope-fuente-cuerpo);
  font-size:   var(--ope-text-sm);
  color:       var(--ope-color-texto);
  width:       150px;
  outline:     none;
}

.ope-busqueda__input::placeholder {
  color: var(--ope-color-sutil);
}

.ope-busqueda__btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         .4rem .65rem;
  background:      none;
  border:          none;
  color:           var(--ope-color-sutil);
  cursor:          pointer;
  flex-shrink:     0;
  transition:      color .2s;
}

.ope-busqueda__btn:hover {
  color: var(--ope-color-europeo);
}

/* ── Hamburguesa (oculto en escritorio) ───────────────────────────────────── */
.ope-nav__toggle {
  display:  none;
  padding:  .55rem;
  background: none;
  border:   none;
  cursor:   pointer;
  color:    var(--ope-color-texto);
  position: absolute;
  top:      .5rem;
  right:    1rem;
}

.ope-nav__hamburger {
  display:    block;
  position:   relative;
  width:      22px;
  height:     2px;
  background: currentColor;
  transition: background .2s;
}

.ope-nav__hamburger::before,
.ope-nav__hamburger::after {
  content:    '';
  position:   absolute;
  left:       0;
  width:      22px;
  height:     2px;
  background: currentColor;
  transition: transform .25s ease;
}

.ope-nav__hamburger::before { top: -6px; }
.ope-nav__hamburger::after  { top:  6px; }

.ope-nav__toggle[aria-expanded="true"] .ope-nav__hamburger            { background: transparent; }
.ope-nav__toggle[aria-expanded="true"] .ope-nav__hamburger::before    { transform: translateY(6px) rotate(45deg); }
.ope-nav__toggle[aria-expanded="true"] .ope-nav__hamburger::after     { transform: translateY(-6px) rotate(-45deg); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ope-nav__toggle {
    display:     flex;
    align-items: center;
  }

  .ope-nav__principal {
    display:        none;
    flex-direction: column;
    align-items:    stretch;
    padding-bottom: .75rem;
  }

  .ope-nav__principal.is-open {
    display: flex;
  }

  .ope-menu {
    flex-direction: column;
    width:          100%;
  }

  .ope-menu > li {
    border-top: 1px solid var(--ope-color-borde);
  }

  .ope-menu > li > a,
  .ope-lang-selector__btn {
    border-bottom: none;
    width:         100%;
    padding:       .85rem 1.25rem;
  }

  .ope-lang-selector { width: 100%; }

  .ope-lang-selector__dropdown {
    position:      static;
    box-shadow:    none;
    border:        none;
    border-radius: 0;
    background:    var(--ope-color-fondo-alt);
    border-top:    1px solid var(--ope-color-borde);
    padding:       .25rem 0;
  }

  .ope-lang-selector__dropdown li > a {
    padding-left: 2.25rem;
  }

  .ope-busqueda {
    margin: .5rem 1.25rem;
    width:  calc(100% - 2.5rem);
  }

  .ope-busqueda__input {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .ope-proyecto,
  .ope-archivo {
    padding: 1.5rem 1rem;
  }

  .ope-grid-proyectos {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHORTCODE [proyectos_destacados] — tarjetas modernas de portada
   ═══════════════════════════════════════════════════════════════════════════ */

.ope-destacados {
  width: 100%;
}

/* ── Cabecera de sección ──────────────────────────────────────────────────── */
.ope-destacados__header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             .75rem;
  margin-bottom:   2rem;
}

.ope-destacados__titulo {
  font-family:  var(--ope-fuente-titulo);
  font-size:    clamp(1.5rem, 3vw, 2rem);
  font-weight:  800;
  color:        var(--ope-color-acento);
  line-height:  1.2;
  margin:       0;
}

.ope-destacados__enlace-todos {
  font-family:     var(--ope-fuente-cuerpo);
  font-size:       var(--ope-text-sm);
  font-weight:     600;
  color:           var(--ope-color-europeo);
  text-decoration: none;
  white-space:     nowrap;
  transition:      color .2s;
}

.ope-destacados__enlace-todos:hover {
  color:           var(--ope-color-acento);
  text-decoration: underline;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.ope-destacados__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:     1.75rem;
}

/* ── Tarjeta ──────────────────────────────────────────────────────────────── */
.ope-card {
  background:     #fff;
  border-radius:  12px;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  box-shadow:     0 1px 4px rgba(0,0,0,.07), 0 8px 24px rgba(0,0,0,.06);
  transition:     transform .28s cubic-bezier(.25,.46,.45,.94),
                  box-shadow .28s cubic-bezier(.25,.46,.45,.94);
  border-top:     3px solid var(--ope-color-europeo);
}

.ope-card--nextgen {
  border-top-color: var(--ope-color-nextgen);
}

.ope-card:hover {
  transform:  translateY(-7px);
  box-shadow: 0 4px 8px rgba(0,0,0,.07), 0 20px 48px rgba(0,0,0,.13);
}

/* ── Zona de imagen ───────────────────────────────────────────────────────── */
.ope-card__imagen-wrap {
  display:         block !important;   /* Divi fuerza inline en <a> */
  position:        relative;
  aspect-ratio:    16/9;
  overflow:        hidden;
  text-decoration: none;
  background:      #e8edf5;            /* fallback mientras carga */
}

.ope-card__imagen {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
}

.ope-card:hover .ope-card__imagen {
  transform: scale(1.07);
}

/* Placeholder sin imagen — usa inset:0 en lugar de height:100% */
.ope-card__placeholder {
  position:        absolute;
  inset:           0;
  background:      linear-gradient(135deg, #002570 0%, var(--ope-color-europeo) 60%, #1a5fc8 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.ope-card--nextgen .ope-card__placeholder {
  background: linear-gradient(135deg, #0a0a22 0%, var(--ope-color-nextgen) 60%, #1e1e5c 100%);
}

.ope-card__placeholder svg {
  width:     60%;
  max-width: 160px;
  opacity:   .7;
}

/* Badges sobre la imagen */
.ope-card__badges-img {
  position:   absolute;
  bottom:     .75rem;
  left:       .75rem;
  display:    flex;
  flex-wrap:  wrap;
  gap:        .3rem;
}

/* ── Cuerpo ───────────────────────────────────────────────────────────────── */
.ope-card__body {
  padding:        1.2rem 1.35rem 1.4rem;
  display:        flex;
  flex-direction: column;
  gap:            .55rem;
  flex:           1;
}

/* Programa */
.ope-card__programa {
  font-family:    var(--ope-fuente-cuerpo);
  font-size:      .7rem;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--ope-color-europeo);
  margin:         0;
  line-height:    1;
}

.ope-card--nextgen .ope-card__programa {
  color: var(--ope-color-nextgen);
}

/* Título */
.ope-card__titulo {
  font-family:           var(--ope-fuente-titulo);
  font-size:             1.05rem;
  font-weight:           700;
  line-height:           1.35;
  margin:                0;
  display:               -webkit-box;
  -webkit-line-clamp:    2;
  -webkit-box-orient:    vertical;
  overflow:              hidden;
}

.ope-card__titulo a {
  color:           var(--ope-color-texto);
  text-decoration: none;
  transition:      color .2s;
}

.ope-card:hover .ope-card__titulo a {
  color: var(--ope-color-europeo);
}

.ope-card--nextgen:hover .ope-card__titulo a {
  color: var(--ope-color-nextgen);
}

/* Extracto */
.ope-card__extracto {
  font-family:           var(--ope-fuente-cuerpo);
  font-size:             var(--ope-text-sm);
  color:                 var(--ope-color-muted);
  line-height:           1.6;
  margin:                0;
  flex:                  1;
  display:               -webkit-box;
  -webkit-line-clamp:    3;
  -webkit-box-orient:    vertical;
  overflow:              hidden;
}

/* CTA link */
.ope-card__cta {
  display:         inline-flex;
  align-items:     center;
  gap:             .3rem;
  font-family:     var(--ope-fuente-cuerpo);
  font-size:       var(--ope-text-sm);
  font-weight:     700;
  color:           var(--ope-color-europeo);
  text-decoration: none;
  margin-top:      .35rem;
  padding-top:     .85rem;
  border-top:      1px solid var(--ope-color-borde);
  transition:      gap .2s, color .2s;
}

.ope-card__cta:hover {
  gap: .55rem;
}

.ope-card--nextgen .ope-card__cta {
  color: var(--ope-color-nextgen);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .ope-destacados__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 580px) {
  .ope-destacados__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .ope-destacados__titulo {
    font-size: 1.4rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHORTCODE [ope_cifras] — contador dinámico
   ═══════════════════════════════════════════════════════════════════════════ */

.ope-cifras {
  display:         flex;
  justify-content: center;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             3rem 5rem;
  padding:         .5rem 1rem;
}

.ope-cifras__item {
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .4rem;
}

.ope-cifras__numero {
  display:              block;
  font-family:          var(--ope-fuente-titulo) !important;
  font-size:            clamp(2.25rem, 5vw, 3.75rem) !important;
  font-weight:          800 !important;
  line-height:          1;
  color:                var(--ope-color-acento) !important;
  font-variant-numeric: tabular-nums;
}

.ope-cifras__etiqueta {
  display:        block;
  font-family:    var(--ope-fuente-cuerpo);
  font-size:      var(--ope-text-sm);
  font-weight:    600;
  color:          var(--ope-color-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

@media (max-width: 580px) {
  .ope-cifras {
    gap: 2rem 3rem;
  }

  .ope-cifras__numero {
    font-size: 2rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE PROYECTO — plantilla individual
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reset box-sizing para el single */
.ope-single *,
.ope-single__hero * {
  box-sizing: border-box;
}

/* ── Hero (full-width, fuera de .container) ────────────────────────────────── */

.ope-single__hero {
  position:       relative;
  overflow:       hidden;
  min-height:     320px;
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom:  0;
}

.ope-single__hero--color {
  background: linear-gradient(135deg, var(--ope-color-europeo) 0%, #005bbb 100%);
  min-height: 220px;
}

.ope-single__hero-bg {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  transition:          transform 6s ease;
}

.ope-single__hero:hover .ope-single__hero-bg {
  transform: scale(1.03);
}

.ope-single__hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,20,60,.75) 100%);
}

.ope-single__hero-inner {
  position:              relative;
  z-index:               2;
  width:                 100%;
  max-width:             1080px;
  margin:                0 auto;
  padding:               1.75rem 30px;
  display:               grid;
  grid-template-columns: 1fr auto auto;
  gap:                   1.25rem;
  align-items:           center;
  flex:                  1;
}

.ope-single__hero-texto {
  min-width: 0;
}

.ope-single__hero-logo-box {
  background:      rgba(255,255,255,.97);
  border-radius:   var(--ope-radio);
  padding:         10px 14px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-width:       170px;
  min-height:      120px;
}

.ope-single__hero-logo-box img {
  max-height: 130px;
  max-width:  240px;
  width:      auto;
  height:     auto;
  object-fit: contain;
  display:    block;
}

.ope-single__badges {
  display:       flex;
  flex-wrap:     wrap;
  gap:           .5rem;
  margin-bottom: .85rem;
}

.ope-single__titulo {
  font-family: var(--ope-fuente-titulo);
  font-size:   clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 700;
  color:       #fff !important;
  line-height: 1.2;
  margin:      0 0 .5rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

.ope-single__programa {
  font-size:   var(--ope-text-lg);
  color:       rgba(255,255,255,.88) !important;
  margin:      0 0 1rem;
  font-weight: 500;
}

.ope-single__hero-duracion {
  font-size:   var(--ope-text-sm);
  color:       rgba(255,255,255,.80) !important;
  margin:      .2rem 0 1.25rem;
  font-weight: 500;
  letter-spacing: .03em;
}

.ope-single__hero-logos {
  display:        flex;
  flex-direction: column;
  gap:            .6rem;
  margin-top:     .75rem;
}

.ope-single__hero-logo {
  max-height:    64px;
  max-width:     180px;
  object-fit:    contain;
  background:    rgba(255,255,255,.92);
  border-radius: var(--ope-radio);
  padding:       6px 12px;
  display:       block;
}

/* ── Artículo principal ──────────────────────────────────────────────────── */

.ope-single {
  padding: 2.5rem 0 3rem;
}

/* ── Cuerpo: 2 columnas ──────────────────────────────────────────────────── */

.ope-single__cuerpo {
  display:               grid;
  grid-template-columns: 1fr 340px;
  gap:                   2.5rem;
  align-items:           start;
  margin-bottom:         2.5rem;
}

/* Eliminar cualquier borde vertical — alta especificidad para ganar a Divi */
html body #main-content .ope-single__cuerpo,
html body #main-content .ope-single__principal,
html body #main-content .ope-single__lateral,
html body #main-content .ope-single__cuerpo > div {
  border-left:   none !important;
  border-right:  none !important;
  border-top:    none !important;
  outline:       none !important;
  box-shadow:    none !important;
}

html body #main-content .ope-single__cuerpo::before,
html body #main-content .ope-single__cuerpo::after,
html body #main-content .ope-single__principal::before,
html body #main-content .ope-single__principal::after,
html body #main-content .ope-single__lateral::before,
html body #main-content .ope-single__lateral::after,
html body #main-content .ope-single__cuerpo > div::before,
html body #main-content .ope-single__cuerpo > div::after {
  display: none !important;
  content: none !important;
  border:  none !important;
}

/* Eliminar cualquier border/outline/shadow en el contenedor principal */
.single-proyecto-europeo .container,
.single-proyecto-europeo article.ope-single,
.single-proyecto-europeo #main-content,
.single-proyecto-europeo #et-main-area {
  border:      none !important;
  outline:     none !important;
  box-shadow:  none !important;
}

/* Con et_no_sidebar en el body (añadido via PHP), Divi gestiona
   correctamente el layout sin sidebar. Solo mantenemos el override
   del ::before por si alguna caché sirve la clase antigua.           */
.single-proyecto-europeo #main-content .container::before,
.single-proyecto-europeo #main-content .container::after {
  display:    none !important;
  content:    none !important;
}

/* ── Secciones ───────────────────────────────────────────────────────────── */

.ope-single__seccion {
  margin-bottom: 1.5rem;
}

.ope-single__seccion--alt {
  background:    var(--ope-color-fondo-alt);
  border-radius: var(--ope-radio);
  padding:       1.5rem;
}

.ope-single__subtitulo {
  font-family:   var(--ope-fuente-titulo) !important;
  font-size:     var(--ope-text-xl) !important;
  font-weight:   700 !important;
  color:         var(--ope-color-acento) !important;
  margin:        0 0 1rem !important;
  padding:       0 0 .5rem !important;
  border-bottom: 2px solid var(--ope-color-borde) !important;
  text-transform: none !important;
}

/* ── Descripción ─────────────────────────────────────────────────────────── */

.ope-single__descripcion {
  font-size:   var(--ope-text-base);
  color:       var(--ope-color-texto);
  line-height: 1.75;
}

.ope-single__descripcion p {
  margin:    0 0 1em;
  font-size: var(--ope-text-base);
  color:     var(--ope-color-texto);
}

/* ── Socios ──────────────────────────────────────────────────────────────── */

.ope-single__socios-lista {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap: .4rem;
}

.ope-single__socios-lista li {
  font-size:     var(--ope-text-sm);
  color:         var(--ope-color-texto);
  padding:       .5rem .75rem;
  background:    var(--ope-color-fondo-alt);
  border-left:   3px solid var(--ope-color-europeo);
  border-radius: 0 var(--ope-radio) var(--ope-radio) 0;
}

/* ── Ficha de datos ──────────────────────────────────────────────────────── */

.ope-single__ficha {
  background:    #fff;
  border:        1px solid var(--ope-color-borde);
  border-radius: calc(var(--ope-radio) * 2);
  padding:       1.5rem;
  box-shadow:    var(--ope-sombra);
}

.ope-single__ficha-lista {
  margin:         0;
  display:        flex;
  flex-direction: column;
}

.ope-single__ficha-fila {
  display:       grid;
  grid-template-columns: auto 1fr;
  gap:           .2rem .75rem;
  padding:       .6rem 0;
  border-bottom: 1px solid var(--ope-color-borde);
  align-items:   center;
}

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

.ope-single__ficha-fila dt {
  font-size:      var(--ope-text-xs) !important;
  font-weight:    700 !important;
  color:          var(--ope-color-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  white-space:    nowrap;
  line-height:    1.4;
}

.ope-single__ficha-fila dd {
  font-size:   var(--ope-text-sm) !important;
  font-weight: 600 !important;
  color:       var(--ope-color-texto) !important;
  margin:      0 !important;
  line-height: 1.4;
}


/* ── Logos del proyecto — sin título, full-width ────────────────────────── */

.ope-single__seccion--logos {
  border-top:   1px solid var(--ope-color-borde);
  padding-top:  1.5rem;
  margin-bottom: 1.5rem;
}

.ope-single__logos {
  display:         flex;
  flex-wrap:       wrap;
  gap:             1.5rem 2rem;
  align-items:     center;
  justify-content: flex-start;
}

.ope-single__logo-item {
  margin:        0;
  padding:       1rem 1.5rem;
  background:    #fff;
  border:        1px solid var(--ope-color-borde);
  border-radius: var(--ope-radio);
  flex:          0 0 auto;
}

.ope-single__logo-item img {
  max-height: 80px;
  max-width:  200px;
  object-fit: contain;
  display:    block;
}

/* ── Documentación del proyecto ──────────────────────────────────────────── */

.ope-single__docs {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        .5rem;
}

.ope-single__doc-item {
  display: block;
}

.ope-single__doc-enlace {
  display:         flex;
  align-items:     center;
  gap:             .75rem;
  padding:         .75rem 1rem;
  background:      var(--ope-color-fondo-alt);
  border:          1px solid var(--ope-color-borde);
  border-radius:   var(--ope-radio);
  text-decoration: none;
  color:           var(--ope-color-texto);
  font-size:       var(--ope-text-sm);
  transition:      background .2s, border-color .2s, color .2s;
}

.ope-single__doc-enlace:hover {
  background:    #fff;
  border-color:  var(--ope-color-europeo);
  color:         var(--ope-color-europeo);
}

.ope-single__doc-ext {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  min-width:      3rem;
  padding:        .2rem .5rem;
  background:     var(--ope-color-europeo);
  color:          #fff;
  border-radius:  4px;
  font-size:      .65rem;
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-shrink:    0;
}

.ope-single__doc-nombre {
  flex:      1;
  min-width: 0;
  overflow:  hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  font-weight:   500;
}

.ope-single__doc-arrow {
  flex-shrink:  0;
  color:        var(--ope-color-sutil);
  transition:   color .2s;
}

.ope-single__doc-enlace:hover .ope-single__doc-arrow {
  color: var(--ope-color-europeo);
}

/* ── Galería de fotos ────────────────────────────────────────────────────── */

.ope-single__galeria {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   1rem;
}

.ope-single__galeria-item {
  margin:        0;
  border-radius: var(--ope-radio);
  overflow:      hidden;
  aspect-ratio:  4/3;
}

.ope-single__galeria-item a {
  display: block;
  height:  100%;
}

.ope-single__galeria-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .35s ease;
}

.ope-single__galeria-item:hover img {
  transform: scale(1.05);
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */

.ope-single__cta {
  display:         flex;
  flex-wrap:       wrap;
  gap:             1rem;
  justify-content: space-between;
  align-items:     center;
  margin-top:      2rem;
  padding-top:     1.5rem;
  border-top:      1px solid var(--ope-color-borde);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

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

  .ope-single__lateral {
    order: -1;
  }
}

@media (max-width: 600px) {
  .ope-single__hero {
    min-height: 240px;
  }

  .ope-single__hero-inner {
    padding:               1.5rem 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    auto auto;
  }

  .ope-single__hero-texto {
    grid-column: 1 / -1;
  }

  .ope-single__hero-logo-box {
    min-width:  0;
    min-height: 90px;
    padding:    8px 12px;
  }

  .ope-single__hero-logo-box img {
    max-height: 90px;
    max-width:  160px;
  }

  .ope-single__ficha-fila {
    grid-template-columns: 1fr;
    gap: .1rem;
  }

  .ope-single__galeria {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .ope-single__cta {
    flex-direction: column;
    align-items:    stretch;
  }

  .ope-single__cta .ope-btn {
    text-align:      center;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHTBOX — galería de fotos
   ═══════════════════════════════════════════════════════════════════════════ */

.ope-lb {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         999999;
  background:      rgba(0, 0, 0, .92);
  align-items:     center;
  justify-content: center;
  gap:             0;
}
.ope-lb--active { display: flex; }

/* Botón cerrar */
.ope-lb__close {
  position:   absolute;
  top:        1rem;
  right:      1rem;
  background: rgba(255,255,255,.1);
  border:     none;
  color:      #fff;
  border-radius: 50%;
  width:  2.5rem;
  height: 2.5rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:  pointer;
  z-index: 2;
  transition: background .2s;
}
.ope-lb__close:hover { background: rgba(255,255,255,.25); }

/* Flechas de navegación */
.ope-lb__nav {
  background: none;
  border:     none;
  color:      rgba(255,255,255,.75);
  cursor:     pointer;
  padding:    1rem;
  flex-shrink: 0;
  transition:  color .2s;
  line-height: 0;
}
.ope-lb__nav:hover { color: #fff; }

/* Imagen */
.ope-lb__stage {
  flex:           1;
  display:        flex;
  align-items:    center;
  justify-content:center;
  max-height:     calc(100vh - 6rem);
  overflow:       hidden;
}
.ope-lb__img {
  max-width:  calc(100vw - 8rem);
  max-height: calc(100vh - 6rem);
  object-fit: contain;
  border-radius: var(--ope-radio);
  user-select: none;
}

/* Footer: descripción + contador */
.ope-lb__footer {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    .75rem 1.5rem;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  display:    flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:        1rem;
  color:      rgba(255,255,255,.85);
  font-size:  var(--ope-text-sm);
}
.ope-lb__counter {
  flex-shrink: 0;
  opacity:     .75;
}

/* Trigger — cursor pointer en las fotos de la galería */
.ope-single__galeria-item a[data-ope-lb] {
  cursor: zoom-in;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRAMAS — tabs de categoría y filtros de tipo
   ═══════════════════════════════════════════════════════════════════════════ */

.ope-prog-tabs {
  display:     flex;
  gap:         .5rem;
  margin:      1.5rem 0 1rem;
  border-bottom: 2px solid var(--ope-color-borde);
  padding-bottom: 0;
}

.ope-prog-tab {
  padding:         .55rem 1.25rem;
  font-size:       var(--ope-text-sm);
  font-weight:     600;
  color:           var(--ope-color-muted);
  text-decoration: none;
  border:          1px solid transparent;
  border-bottom:   none;
  border-radius:   var(--ope-radio) var(--ope-radio) 0 0;
  margin-bottom:   -2px;
  transition:      color .15s, background .15s;
}

.ope-prog-tab:hover {
  color:      var(--ope-color-acento);
  background: var(--ope-color-fondo-alt);
}

.ope-prog-tab--activo {
  color:       var(--ope-color-acento);
  background:  #fff;
  border-color: var(--ope-color-borde);
  border-bottom-color: #fff;
}

.ope-prog-filtros {
  display:   flex;
  flex-wrap: wrap;
  gap:       .5rem;
  margin:    1rem 0 1.5rem;
}

.ope-prog-filtro {
  padding:       .4rem 1rem;
  font-size:     var(--ope-text-sm);
  font-weight:   500;
  color:         var(--ope-color-muted);
  background:    var(--ope-color-fondo-alt);
  border:        1px solid var(--ope-color-borde);
  border-radius: 20px;
  cursor:        pointer;
  transition:    color .15s, background .15s, border-color .15s;
}

.ope-prog-filtro:hover {
  color:        var(--ope-color-acento);
  border-color: var(--ope-color-acento);
}

.ope-prog-filtro--activo {
  color:        #fff;
  background:   var(--ope-color-europeo);
  border-color: var(--ope-color-europeo);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRAMAS EUROPEOS — tarjetas (archivo + shortcode)
   ═══════════════════════════════════════════════════════════════════════════ */

.ope-prog-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   1.5rem;
  margin-top:            1.5rem;
}

.ope-prog-card {
  display:       flex;
  flex-direction: column;
  border:        1px solid var(--ope-color-borde);
  border-radius: var(--ope-radio);
  overflow:      hidden;
  box-shadow:    var(--ope-sombra);
  background:    #fff;
  transition:    box-shadow .2s, transform .2s;
}

.ope-prog-card:hover {
  box-shadow: 0 6px 24px rgba(0, 48, 135, .12);
  transform:  translateY(-2px);
}

/* Área del logo */
.ope-prog-card__logo-wrap {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      130px;
  padding:         1.25rem;
  background:      var(--ope-color-fondo-alt);
  border-bottom:   1px solid var(--ope-color-borde);
  text-decoration: none;
}

.ope-prog-card__logo {
  max-height:  90px;
  max-width:   100%;
  width:       auto;
  object-fit:  contain;
  display:     block;
}

.ope-prog-card__logo-placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:  80px;
  height: 80px;
  border-radius: 50%;
  background:    var(--ope-color-borde);
  color:         var(--ope-color-muted);
  font-size:     2rem;
}

/* Cuerpo */
.ope-prog-card__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        1.25rem;
  gap:            .6rem;
}

.ope-prog-card__meta {
  display:   flex;
  flex-wrap: wrap;
  gap:       .4rem;
  align-items: center;
}

.ope-prog-card__periodo {
  font-size:   var(--ope-text-xs);
  color:       var(--ope-color-muted);
  font-weight: 500;
}

.ope-prog-card__titulo {
  font-family: var(--ope-fuente-titulo);
  font-size:   var(--ope-text-lg);
  font-weight: 700;
  color:       var(--ope-color-acento);
  margin:      0;
  line-height: 1.3;
}

.ope-prog-card__titulo a {
  color:           inherit;
  text-decoration: none;
}

.ope-prog-card__titulo a:hover {
  text-decoration: underline;
}

.ope-prog-card__extracto {
  font-size:   var(--ope-text-sm);
  color:       var(--ope-color-muted);
  line-height: 1.6;
  margin:      0;
  flex:        1;
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

.ope-prog-card__acciones {
  display:   flex;
  flex-wrap: wrap;
  gap:       .5rem;
  margin-top: .4rem;
}

/* Botón outline */
.ope-btn--outline {
  background:  transparent;
  color:       var(--ope-color-europeo);
  border:      1.5px solid var(--ope-color-europeo);
}

.ope-btn--outline:hover {
  background: var(--ope-color-europeo);
  color:      #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRAMA INDIVIDUAL — single-programa-europeo.php
   ═══════════════════════════════════════════════════════════════════════════ */

.ope-prog-single {
  max-width: 960px;
  margin:    0 auto;
  padding:   2rem 1.25rem 3rem;
  font-family: var(--ope-fuente-cuerpo);
  color:     var(--ope-color-texto);
}

.ope-prog-single__cabecera {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  padding-bottom: 1.5rem;
  border-bottom:  2px solid var(--ope-color-borde);
  margin-bottom:  2rem;
}

.ope-prog-single__meta {
  display:   flex;
  flex-wrap: wrap;
  gap:       .5rem;
  align-items: center;
}

.ope-prog-single__periodo {
  font-size:   var(--ope-text-sm);
  color:       var(--ope-color-muted);
  font-weight: 500;
  padding:     .2rem .6rem;
  border:      1px solid var(--ope-color-borde);
  border-radius: 4px;
}

.ope-prog-single__logo {
  max-width: 240px;
}

.ope-prog-single__logo img {
  max-height:  100px;
  max-width:   100%;
  width:       auto;
  object-fit:  contain;
  display:     block;
}

.ope-prog-single__titulo {
  font-family: var(--ope-fuente-titulo);
  font-size:   var(--ope-text-2xl);
  font-weight: 700;
  color:       var(--ope-color-acento);
  line-height: 1.2;
  margin:      0;
}

.ope-prog-single__seccion {
  margin-bottom: 2.5rem;
}

.ope-prog-single__descripcion p {
  font-size:   var(--ope-text-base);
  line-height: 1.75;
  color:       var(--ope-color-texto);
  margin-bottom: 1rem;
}

.ope-prog-single__nav {
  padding-top:  1.5rem;
  border-top:   1px solid var(--ope-color-borde);
  margin-top:   1rem;
}

/* Reset selector para prog-single */
.ope-prog-single *,
.ope-prog-grid * {
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .ope-prog-grid {
    grid-template-columns: 1fr;
  }

  .ope-prog-single__logo {
    max-width: 160px;
  }

  .ope-prog-card__acciones {
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA EDIL — Onda RecONecta
   ═══════════════════════════════════════════════════════════════════════════ */

.ope-edil {
  max-width:   1100px;
  margin:      0 auto;
  padding:     2rem 1.25rem 3rem;
  font-family: var(--ope-fuente-cuerpo);
  color:       var(--ope-color-texto);
  box-sizing:  border-box;
}

.ope-edil * {
  box-sizing: border-box;
}

.ope-edil__intro {
  max-width:   780px;
  margin:      2rem auto;
  text-align:  center;
  font-size:   var(--ope-text-lg);
  line-height: 1.7;
  color:       var(--ope-color-texto);
}

.ope-edil__seccion-titulo {
  font-family:    var(--ope-fuente-titulo) !important;
  font-size:      var(--ope-text-xl) !important;
  color:          var(--ope-color-acento) !important;
  text-align:     center !important;
  margin:         3rem 0 1.5rem !important;
  padding:        0 !important;
  border:         none !important;
}

/* ── Cuadrícula de los 4 proyectos ──────────────────────────────────────── */

.ope-edil__proyectos {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1.5rem;
  margin:                1.5rem 0 2.5rem;
}

.ope-edil__proyecto {
  background:    #fff;
  border-radius: var(--ope-radio);
  box-shadow:    var(--ope-sombra);
  padding:       1.75rem;
  border-top:    4px solid var(--ope-color-europeo);
}

.ope-edil__proyecto-nombre {
  font-family: var(--ope-fuente-titulo) !important;
  font-size:   var(--ope-text-lg) !important;
  font-weight: 700 !important;
  color:       var(--ope-color-acento) !important;
  margin:      0 0 .35rem !important;
  padding:     0 !important;
}

.ope-edil__proyecto-desc {
  font-size:   var(--ope-text-sm);
  color:       var(--ope-color-muted);
  font-style:  italic;
  margin:      0 0 1rem !important;
  padding:     0 !important;
}

.ope-edil__proyecto ul {
  margin:      0;
  padding-left: 1.25rem;
  list-style:  disc;
  color:       var(--ope-color-texto);
  font-size:   var(--ope-text-sm);
  line-height: 1.7;
}

.ope-edil__proyecto ul li {
  margin-bottom: .35rem;
}

/* ── Financiación ───────────────────────────────────────────────────────── */

.ope-edil__financiacion {
  background:      var(--ope-color-fondo-alt);
  border-radius:   var(--ope-radio);
  padding:         2rem 2.5rem;
  margin:          1.5rem 0 2.5rem;
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             3rem 5rem;
  flex-wrap:       wrap;
  text-align:      center;
}

.ope-edil__fondo-item strong {
  display:     block;
  font-family: var(--ope-fuente-titulo);
  font-size:   clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color:       var(--ope-color-acento);
  line-height: 1.1;
}

.ope-edil__fondo-item span {
  display:        block;
  font-size:      var(--ope-text-sm);
  color:          var(--ope-color-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight:    600;
  margin-top:     .3rem;
}

/* ── Documentos ─────────────────────────────────────────────────────────── */

.ope-edil__documentos {
  display:         flex;
  gap:             1rem;
  flex-wrap:       wrap;
  justify-content: center;
  margin:          1.5rem 0 2rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
  .ope-edil__proyectos {
    grid-template-columns: 1fr;
  }

  .ope-edil__financiacion {
    gap: 2rem 3rem;
    padding: 1.5rem;
  }

  .ope-edil__documentos {
    flex-direction: column;
    align-items: stretch;
  }

  .ope-edil__documentos .ope-btn {
    text-align: center;
  }
}