/* ============================================================
   Réplica de maquetación — aedeec.org (layout only, contenido placeholder)
   Mobile-first · breakpoints: 768px (tablet) · 1025px (desktop)
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Paleta global del original (kit de Elementor) */
  --c-primary:   #003399;  /* azul UE: bandas, headings, iconos          */
  --c-secondary: #335BAA;  /* azul medio: subtítulos, iconos secundarios */
  --c-accent:    #F2E635;  /* amarillo UE: foco/acentos                  */
  --c-gold:      #A68F1F;  /* dorado oliva: botones, textos de contacto  */
  --c-gold-dark: #8C6A03;  /* dorado oscuro: nombres del consejo         */
  --c-navy:      #202140;
  --c-warm-gray: #A6A297;
  --c-cream:     #F2EFEC;  /* fondo barra de navegación                  */
  --c-gray:      #EEEEEE;  /* fondo de secciones                         */
  --c-sand:      #DBC5B1;
  --c-white:     #FFFFFF;
  --c-black:     #000000;
  --c-btn-blue:  #4054B2;  /* texto del botón CONTÁCTANOS                */
  --c-whatsapp:  #25D366;

  /* Superficies del rediseño */
  --c-navy-deep: #0B1B45;             /* secciones oscuras / footer      */
  --c-surface:   #F5F6FA;             /* fondo de sección (gris frío)    */
  --c-ink:       #2A3242;             /* texto de cuerpo                 */
  --ph-dark:  #0E1B3A;                /* fondo del vídeo del hero        */

  /* Sombras entintadas de azul y radios */
  --shadow-sm: 0 1px 3px rgba(11, 27, 69, .08), 0 1px 2px rgba(11, 27, 69, .06);
  --shadow-md: 0 6px 18px rgba(11, 27, 69, .10), 0 2px 6px rgba(11, 27, 69, .06);
  --shadow-lg: 0 18px 40px rgba(11, 27, 69, .16), 0 4px 12px rgba(11, 27, 69, .08);
  --r-sm: 2px; --r-md: 3px; --r-lg: 4px;   /* esquinas casi rectas: registro sobrio/institucional */
  --ease: cubic-bezier(.22, .8, .3, 1);

  /* Tipografías */
  --f-serif: "Playfair Display", Georgia, serif;
  --f-sans:  "Outfit", "Segoe UI", Arial, sans-serif;

  /* Layout */
  --container:     1140px;
  --container-nav: 1147px;
  --gutter:        20px;

  /* Escala tipográfica (desktop se ajusta en media queries) */
  --fs-h2-band:  32px;   /* bandas PRESIDENCIA / CONSEJO         */
  --fs-title-m:  32px;   /* título de sección en móvil            */
  --fs-title-d:  41px;   /* título de sección en desktop          */
  --fs-card-h3:  25px;   /* títulos de tarjetas de galardones     */
  --fs-body:     16px;
  --lh-body:     24px;
}

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
/* sin text-wrap: balance — el original no lo usa y cambiaba los cortes de línea */
img { border-radius: inherit; }
img, svg, video { max-width: 100%; display: block; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.topbar :focus-visible, .band :focus-visible, .intro :focus-visible,
.hero :focus-visible, .cookie-bar :focus-visible { outline-color: var(--c-accent); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 30px; }
@media (min-width: 768px) {
  .container { padding-inline: 0; }   /* Elementor: container sin padding, las columnas llevan el suyo */
}

/* Visibilidad condicional: el original oculta estos bloques en tablet y desktop */
@media (min-width: 768px) { .m-only { display: none !important; } }
@media (max-width: 767px) { .d-only { display: none !important; } }

/* ---------- Placeholders de imagen ---------- */
.ph { background: var(--ph-photo); }
.ph--square    { width: 300px; height: 300px; margin-inline: auto; }
.ph--portrait  { width: 300px; height: 300px; max-width: 100%; margin-inline: auto; }
.ph--landscape { aspect-ratio: 4 / 3; width: 100%; }
.ph--video     { aspect-ratio: 16 / 9; width: 100%; background: var(--ph-dark); }
.ph--logo      { width: 200px; height: 100px; margin-inline: auto; background: var(--ph-logo); }
.ph--logo-sm   { width: 150px; height: 75px; }
.ph--map       { height: 300px; width: 100%; background: var(--ph-map); }

/* ---------- Botones ---------- */
.btn {
  display: inline-block; text-align: center;
  transition: background .25s var(--ease), color .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn--contact {                       /* CTA del header: píldora blanca del original */
  background: #fff;
  color: #4054B2;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 15px; font-weight: 400; line-height: 1;
  letter-spacing: 0;
  border: 1px solid #fff;
  border-radius: 33px;
  padding: 8px 15px;
  white-space: nowrap;
}
.btn--contact:hover { background: var(--c-primary); color: #fff; border-color: #fff; }

.btn--gold {                          /* "Más Información" en tarjetas */
  background: var(--c-gold);
  color: var(--c-white);
  /* Roboto 13/13 peso 500 y 10x20 de relleno: la caja de 136x33 del original */
  font-family: "Roboto", Arial, sans-serif;
  font-size: 13px; font-weight: 500; line-height: 1;
  letter-spacing: normal;
  border-radius: var(--r-sm);
  padding: 10px 20px;
  box-shadow: var(--shadow-sm);
}
.btn--gold:hover { background: var(--c-gold-dark); box-shadow: var(--shadow-md); }

.btn--pill {                          /* ENVIAR / ACEPTAR */
  background: var(--c-gold);
  color: var(--c-white);
  font-size: 14px; font-weight: 600;
  letter-spacing: .5px;
  border-radius: var(--r-sm);
  padding: 12px 40px;
  box-shadow: var(--shadow-sm);
}
.btn--pill:hover { background: var(--c-gold-dark); box-shadow: var(--shadow-md); }

/* ============================================================
   HEADER
   ============================================================ */

/* --- Top bar --- */
.topbar { background: var(--c-primary); }
.topbar__inner {
  max-width: 1600px; margin-inline: auto;
  min-height: 48px;
  padding: 8px 15px;
  display: flex; align-items: center;
  gap: 6px 28px;
}
.topbar__social { display: flex; gap: 5px; align-items: center; }
.topbar__social a { padding: 11px 9px; }          /* icono de 14px como el original, pero cómodo de tocar */
.topbar__social svg { width: 14px; height: 14px; fill: var(--c-white); }
.topbar__info { display: none; }                   /* el original la oculta en móvil */
@media (min-width: 768px) {
  .topbar__inner { flex-wrap: wrap; justify-content: center; }
  .topbar__social a { padding: 4px; }
  .topbar__info { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
  .topbar__info li { display: flex; align-items: center; gap: 11px; }
  .topbar__info svg { width: 14px; height: 14px; fill: var(--c-white); flex: none; }
  .topbar__info span { color: var(--c-white); font-size: 12px; line-height: 1.4; }
}

/* --- Nav bar: crema del original (sección 4897ee33) con filete inferior negro --- */
.navbar {
  background: #F2EFEC;
  border-bottom: 1px solid #030303;
  padding-inline: 5%;
  position: sticky; top: 0; z-index: 50;
  transition: box-shadow .3s var(--ease);
}
.navbar.is-scrolled { box-shadow: var(--shadow-md); }
.navbar__inner {
  max-width: var(--container-nav); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; gap: 16px;
}
.navbar__nav { flex: 1; min-width: 0; }

.navbar__toggle { display: none; padding: 8px 4px; }
.navbar__toggle span {
  display: block; width: 26px; height: 3px; border-radius: 2px;
  background: var(--c-black); margin: 5px 0;
  transition: transform .3s, opacity .3s;
}
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.navbar__menu {
  display: flex; align-items: center; justify-content: space-between;  /* repartido a lo ancho, como el original */
  flex-wrap: nowrap;
}
.navbar__menu > li { position: relative; margin-inline: 12px; }
.navbar__menu > li:first-child { margin-left: 0; }
.navbar__menu > li:last-child { margin-right: 24px; }
@media (min-width: 768px) and (max-width: 1200px) {
  .navbar__menu > li { margin-inline: 6px; }
  .navbar__menu > li > a { font-size: 13.5px; }
}
.navbar__menu > li > a {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: "Roboto", Arial, sans-serif;   /* Roboto 16/400 negro: el tamaño exacto del original */
  font-size: 16px; font-weight: 400; text-transform: uppercase;
  letter-spacing: 0;
  color: #000;
  padding: 14px 0;
  position: relative;
  transition: color .25s var(--ease);
}
.navbar__menu > li > a:hover { color: var(--c-primary); }
.caret { width: 18px; height: 18px; fill: currentColor; }
/* subrayado animado en dorado */
.navbar__menu > li > a::after {
  content: ""; position: absolute;
  left: 0; right: .8px;              /* descuenta el letter-spacing sobrante tras la última letra */
  bottom: 15px;                      /* ~4px bajo la línea base: pegado al texto, no al borde de la barra */
  height: 2px; background: #030303;   /* el original subraya en negro (#030303) */
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
/* en los ítems con flecha el subrayado cubre solo el texto, no el caret */
.navbar__menu > li.has-sub > a::after { right: 22px; }
/* puente invisible bajo el ítem: el cursor llega al panel sin cortar el hover */
.has-sub > a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
}
/* solo al pasar el ratón / con foco: el ítem activo no lo mantiene fijo */
.navbar__menu > li > a:hover::after,
.navbar__menu > li > a:focus-visible::after,
.navbar__menu > li.has-sub:hover > a::after,
.navbar__menu > li.has-sub.is-open > a::after { transform: scaleX(1); }

/* ---------- Dropdown GALARDONES: paneles definidos, apertura por niveles ---------- */
.submenu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 340px;
  background: #F2EFEC;                 /* desplegable crema con filete negro inferior, como el original */
  border: solid #000;
  border-width: 0 0 1px 0;
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  padding: 0;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  pointer-events: none;
}
/* SOLO se abre el panel del nivel sobre el que estás (combinador hijo) */
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu,
.has-sub.is-open > .submenu {
  opacity: 1; visibility: visible; transform: translate(0, 0);
  transition-delay: 0s;
  pointer-events: auto;
}

/* filas del desplegable: Roboto 500 negro sobre crema, sin redondeos (como el original) */
.submenu li + li { margin-top: 0; }
.submenu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px; font-weight: 500; color: #000; line-height: 1.4;
  border-radius: 0;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.submenu a:hover {
  background: rgba(0, 0, 0, .05); color: #000;
}

/* nivel 3: panel lateral que aparece solo al pasar por su padre */
.submenu .has-sub { position: relative; }
.submenu .has-sub > a::after {
  content: "›"; font-size: 17px; line-height: 1;
  color: #000; flex: none;
  transition: transform .18s var(--ease);
}
.submenu .has-sub:hover > a::after { transform: translateX(3px); }
.submenu .has-sub > .submenu {
  top: -8px; left: 100%; margin-left: 6px;
  transform: translateX(8px);
}
.submenu .has-sub:hover > .submenu,
.submenu .has-sub:focus-within > .submenu,
.submenu .has-sub.is-open > .submenu { transform: translateX(0); }
/* puente invisible: no se pierde el hover al cruzar al panel lateral */
.submenu .submenu::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -12px; width: 12px;
}

/* ============================================================
   HERO — vídeo de fondo (placeholder sólido oscuro) + logo
   ============================================================ */
.hero {
  background: var(--ph-dark);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;          /* en móvil el original mide 375×375 */
  padding: 10px;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero::after {                   /* velo blanco al 30% sobre el vídeo, como el original */
  content: ""; position: absolute; inset: 0;
  background: #FFF; opacity: .3;
  pointer-events: none;
}
.hero__logo {                    /* el original muestra el logo a 355px en móvil */
  position: relative; z-index: 1;
  width: min(355px, 95vw); height: auto;
}
@media (min-width: 768px) {
  .hero {
    aspect-ratio: auto; min-height: 100dvh; padding: 0;
    align-items: flex-end; justify-content: flex-start;
  }
  .hero__logo { width: 300px; margin: 0 0 48px 40px; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .35)); }
}

/* ============================================================
   INTRO — fondo imagen bandera UE (placeholder azul), texto + vídeo
   ============================================================ */
.intro {
  background: var(--c-secondary) url("../img/intro-bg.jpg") center / cover no-repeat;
  padding: 30px 0;
  position: relative;
}
.intro::before {                 /* velo azul secundario al 80% sobre la bandera, como el original */
  content: ""; position: absolute; inset: 0;
  background: var(--c-secondary); opacity: .8;
}
.intro > .container { position: relative; }
.intro__video { aspect-ratio: 16 / 9; }
.intro__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.intro__grid { display: grid; gap: 30px; }
.intro__text h2 {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 34px; line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--c-white);
  margin-bottom: 22px;
}
.intro__text p { color: rgba(255, 255, 255, .92); margin-bottom: 16px; max-width: 58ch; }
.intro__media { align-self: center; }
.intro__video { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
@media (min-width: 768px) {
  .intro { padding: 100px 0; }
  .intro__grid {
    max-width: none;                     /* sección a sancho completo como el original */
    padding-inline: 30px 5%;
    grid-template-columns: 44% 1fr; gap: 4%; align-items: center;
  }
}

/* ============================================================
   Títulos de sección
   ============================================================ */
.section-title {
  font-family: var(--f-serif); font-weight: 600;   /* Playfair 600/41px, como el original */
  font-size: var(--fs-title-m); line-height: 1.2;
  color: var(--c-primary);
  text-align: center;
  padding: 25px 0 20px;
}
@media (min-width: 768px) {
  .section-title { font-size: 41px; }
}

/* ============================================================
   GALARDONES — tarjetas modernas en zig-zag
   ============================================================ */
.awards { background: var(--c-gray); padding: 60px 0 80px; }   /* mismo #EEE que ACTIVIDADES (y que el original) */

/* Cinta de sellos de certificación (solo móvil): 4 por vista sobre el mismo #EEE,
   igual que el image-carousel del original (31 sellos, saltos de 10 → 4 puntos) */
.sello-strip { background: var(--c-gray); padding: 20px 0 14px; }
.mcar--logos { margin: 0 10px; }
.mcar--logos .mcar__slide { flex: 0 0 25%; padding-inline: 5px; }
/* los sellos son banderines verticales (336×745): sin el 3/2 recortado de las fotos de gala */
.mcar--logos .mcar__slide img { width: 100%; height: auto; display: block; aspect-ratio: auto; object-fit: contain; border-radius: 0; box-shadow: none; }
.mcar--logos .mcar__arrow { display: none; }   /* el original no muestra flechas en móvil */

.award-card {
  display: grid; grid-template-columns: 40% 1fr; gap: 20px;
  align-items: start;
  padding: 30px 0;
  overflow-wrap: break-word;
}
.award-card > * { min-width: 0; }   /* evita que el min-content desborde el grid */
.award-card__media { order: -1; }
.award-card__media img { width: 100%; height: auto; max-width: 300px; margin-inline: auto; display: block; }
.award-card__body h3 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: var(--fs-card-h3); line-height: 1.5;   /* 37.5px como el original */
  color: var(--c-primary);
  text-transform: uppercase;        /* el original los pinta en versales por CSS */
  /* cifras de caja alta: Playfair usa por defecto cifras de estilo antiguo, más bajas
     que las mayúsculas, y un año como 2029 quedaba informal dentro de un título en
     versales; así los dígitos alinean con las capitales */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  margin-bottom: 20px;
}
/* Párrafos como el original: Roboto, dorado del kit global y justificados */
.award-card__body p {
  font-family: "Roboto", Arial, sans-serif;
  color: var(--c-gold); text-align: justify;
  margin-bottom: 14.4px; max-width: 550px;    /* 0.9em y caja de 550px, como el original */
}
.award-card__body p:last-of-type { margin-bottom: 34px; }   /* aire del widget antes del botón */
@media (max-width: 767px) {
  /* fila compacta original: imagen izq | título 15px + botón der, centrados en vertical
     (Elementor invierte el orden de columnas en móvil: la imagen queda a la izquierda) */
  .award-card { grid-template-columns: 1fr 1fr; gap: 15px; padding: 10px 0; align-items: center; }
  .award-card__media { order: -1; }
  .award-card__body h3 { font-size: 15px; line-height: 1.5; margin-bottom: 10px; }
  .award-card__body p { display: none; }             /* la variante móvil no lleva párrafo */
}

@media (min-width: 768px) {
  .award-card {
    grid-template-columns: 1fr 1fr; gap: 30px; align-items: center;
    padding: 34px 0;
    margin-bottom: 28px;
  }
  .award-card__media { order: 2; }
  /* el original NO alterna: la imagen va siempre a la derecha en escritorio */
  .award-card__media img {
    width: 320px; margin: 0 auto;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
  }
}

/* ============================================================
   Bandas azules (solo móvil en el original)
   ============================================================ */
.band { background: var(--c-primary); padding: 10px 20px; }   /* banda fina: 52px total como el original */
.band h2 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: var(--fs-h2-band); line-height: 1.1;
  color: var(--c-white); text-align: center;
}

/* ---------- Presidencia (solo móvil): dos columnas 50/50 con retrato redondo,
     cargo y nombre 12px Playfair azul y reseña dorada, como el original ---------- */
.leadership { background: var(--c-white); padding: 14px 0 10px; }
.leadership .container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.leadership .person { text-align: center; padding: 8px 0; }
.person__photo {
  width: min(150px, 78%); height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; display: block; margin: 0 auto 12px;
}
.person__role, .person__name {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 12px; line-height: 1.5;
  color: var(--c-primary);
  margin: 0;
}
.person__name { margin-bottom: 6px; }
.person p { color: var(--c-gold); font-size: 13px; line-height: 1.6; max-width: 480px; margin-inline: auto; }

/* ---------- Consejo de honor (solo móvil): retratos redondos en filas 3-2-3-2
     centradas (33% / 38% como las columnas del original) ---------- */
.council { background: var(--c-white); padding: 20px 0 26px; }
.council__grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  overflow-wrap: break-word;
}
.member { text-align: center; min-width: 0; width: 33%; padding: 14px 7px 4px; }
/* pares centrados (Enríquez/Maroto y Miralles/De las Heras) al 38% como el original */
.member:nth-child(4), .member:nth-child(5),
.member:nth-child(9), .member:nth-child(10) { width: 38%; }
.member__photo {
  width: min(120px, 84%); height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; display: block; margin: 0 auto 10px;
}
.member h3 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 12px; line-height: 1.5;
  color: var(--c-primary);
  margin-bottom: 2px;
}
.member p { color: var(--c-gold); font-size: 12px; line-height: 1.5; }
.member__memoriam {
  font-family: var(--f-serif); font-weight: 700;
  color: #1A1A1A !important; font-size: 12px !important;
  margin-bottom: 4px;
}

/* ---------- Publicaciones (solo móvil): iconos dorados enlazados sobre #EEE ---------- */
.publications { background: var(--c-gray); padding: 0 0 30px; }
.publications .section-title { padding: 22px 0 6px; font-size: 30px; }
.publications__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pub-card a { display: block; }
.pub-card__img { width: min(200px, 88%); height: auto; display: block; margin: 0 auto; }
.pub-card h3 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 26px; color: var(--c-primary);
  text-align: center; margin-top: 6px;
}

/* ============================================================
   ACTIVIDADES — plano sobre gris, como el original: icono SVG
   dorado 100px + título Playfair azul secundario + texto dorado
   (kit global: título #335BAA, texto #A68F1F, hueco 15px)
   ============================================================ */
.activities { background: var(--c-gray); padding: 90px 0; }
.activities .section-title { padding-top: 0; margin-bottom: 40px; }
.activities__grid { display: grid; gap: 40px; }
@media (min-width: 768px) {
  .activities__grid { align-items: start; margin-top: 30px; }
}
.icon-box {
  display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center;
}
.icon-box__img { width: 100px; height: 100px; }
.icon-box h3 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 28px; line-height: 1.2;
  color: var(--c-secondary);
}
.icon-box p { color: var(--c-gold); font-size: 16px; line-height: 1.6; }
@media (min-width: 768px) {
  .activities__grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .icon-box h3 { font-size: 24px; }
}
@media (min-width: 1025px) {
  .icon-box h3 { font-size: 28px; }
}

/* ============================================================
   FOOTER — claro (#EEE) con filete dorado, como el original
   ============================================================ */
.site-footer {
  background: var(--c-gray); color: var(--c-ink); position: relative;
  border-bottom: 5px solid var(--c-gold);   /* el original cierra con este filete */
}
/* Cuñas azules del original (shape divider "tilt", 30px, mismo path y espejado) */
.shape {
  position: absolute; left: 0; width: 100%;
  line-height: 0; overflow: hidden; z-index: 1;
}
.shape--top { top: -1px; }
.shape--bottom { bottom: -1px; transform: rotate(180deg); }
.shape svg {
  display: block; position: relative; left: 50%;
  width: calc(100% + 1.3px); height: 30px;
  transform: translateX(-50%) rotateY(180deg);
}
.shape path { fill: var(--c-primary); }
.site-footer > .container { position: relative; z-index: 2; }

.site-footer__grid { display: grid; gap: 32px; padding-block: 50px 24px; }
.site-footer__logo {
  display: block; margin-inline: auto; width: 190px; height: auto;
}
.site-footer__mapframe {
  width: 100%; height: 300px; border: 0; display: block;
  border-radius: var(--r-md);
}
.modal__logo { display: block; margin: 20px auto 0; }
@media (max-width: 767px) {
  .site-footer__map { display: none; }               /* el original oculta el mapa en móvil */
  .site-footer__form { max-width: 280px; margin-inline: auto; }
  .site-footer__logo { width: 168px; }
}
.site-footer__form h2 {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 22px; color: var(--c-primary);
  text-align: center; margin: 15px 0 20px;
}

.contact-form { display: grid; gap: 10px; justify-items: center; }
.contact-form input, .contact-form textarea {
  width: 100%;
  font: 400 15px/1.4 var(--f-sans);
  color: var(--c-gold);            /* el original escribe en dorado dentro del campo */
  background: var(--c-white);
  border: 1px solid #D8D8D8;
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--c-gold); opacity: .6; }
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(166, 143, 31, .18);
}
/* Nombre y Email en la misma fila, como el original */
@media (min-width: 480px) {
  .site-footer__form .contact-form { grid-template-columns: 1fr 1fr; }
  .site-footer__form .contact-form textarea,
  .site-footer__form .contact-form .btn--pill,
  .site-footer__form .contact-form__ok { grid-column: 1 / -1; }
}
.contact-form textarea { resize: vertical; min-height: 70px; }
.contact-form .btn--pill {          /* ENVIAR: ancho completo, 13px, radio 20 como el original */
  margin-top: 4px; width: 100%;
  font-size: 13px; line-height: 1;
  padding: 13px 20px; border-radius: 20px;
}
.contact-form__ok { color: var(--c-primary); font-size: 14px; text-align: center; }

/* con relleno lateral: sin él, en móvil la dirección y el aviso legal quedaban pegados
   a los bordes de la pantalla y el icono del pin tocaba el borde izquierdo */
.site-footer__contact { text-align: center; padding: 10px 24px 30px; }
@media (max-width: 767px) {
  .contact-list li { align-items: flex-start; }      /* el icono, a la altura de la 1ª línea */
  .contact-list li svg { margin-top: 3px; }
}
.contact-list {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; margin-bottom: 30px;      /* respiración del original */
}
.contact-list li { display: flex; align-items: center; gap: 10px; }
.contact-list svg { width: 18px; height: 18px; fill: var(--c-primary); flex: none; }
.contact-list span { color: var(--c-gold); font-size: 16px; font-weight: 300; font-style: oblique; }

/* El teléfono (barra superior y pie) abre el chat de WhatsApp: el enlace se mete
   dentro del <li>, así que hereda su misma disposición para no mover nada. */
.wa-tel { display: flex; align-items: inherit; gap: inherit; color: inherit; }
.wa-tel:hover span { text-decoration: underline; }
@media (max-width: 767px) {
  .contact-list li .wa-tel { align-items: flex-start; position: relative; }
  /* el número se ve igual, pero se toca en una franja de 44px: el área
     invisible se añade con un ::after para no descolocar la lista */
  .contact-list li .wa-tel::after {
    content: ""; position: absolute; left: -8px; right: -8px;
    top: 50%; height: 44px; transform: translateY(-50%);
  }
}

.social-list { display: flex; justify-content: center; gap: 16px; margin-bottom: 18px; }
.social-list a {
  display: grid; place-items: center;
  width: 26px; height: 26px;              /* glifo suelto, sin caja: como el original */
  padding: 6px;                            /* área de toque de 38px sin agrandar el glifo */
  box-sizing: content-box;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.social-list a:hover { opacity: .7; transform: translateY(-2px); }
.social-list svg { width: 20px; height: 20px; fill: var(--c-primary); }

.site-footer__legal {
  font-size: 14px; font-weight: 200; font-style: oblique;
  text-transform: capitalize;
  color: var(--c-gold);
}

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--gutter); }
  .site-footer__map { align-self: center; }
  .contact-list { flex-direction: row; justify-content: center; gap: 8px 28px; flex-wrap: wrap; }
  .contact-list span { font-size: 16px; }
}

/* ============================================================
   MODAL CONTACTO (popup del original, gradiente azul→blanco)
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.modal__box {
  position: relative;
  width: min(370px, calc(100vw - 40px));
  max-height: 90vh; overflow: auto;
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-white) 55%);
  border-radius: var(--r-md);
  padding: 40px 25px 25px;
  text-align: center;
  animation: modal-in .4s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(30px); } }
.modal__box h2 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 29px; color: var(--c-white);
  margin-bottom: 12px;
}
.modal__box > p { color: var(--c-white); font-size: 14px; line-height: 1.5; margin-bottom: 40px; }
.modal__box .ph--logo-sm { margin-top: 20px; }
.modal__close {
  position: absolute; top: 8px; right: 12px;
  font-size: 28px; line-height: 1; color: var(--c-white);
  padding: 4px 8px;
}

/* ============================================================
   COOKIE BAR
   ============================================================ */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150;
  margin-inline: auto; max-width: 860px;
  background: rgba(11, 27, 69, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  gap: 12px 24px; flex-wrap: wrap;
  padding: 16px 22px;
}
.cookie-bar p {
  font-size: 13.5px; line-height: 1.45;
  color: #DDE4F5; text-align: left;
  flex: 1 1 320px;
}
.btn--cookie { font-size: 13px; padding: 10px 26px; flex: none; }
.cookie-bar.is-hidden { display: none; }

/* ============================================================
   BOTÓN FLOTANTE DE CHAT
   ============================================================ */
.whatsapp-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 160;
  width: 60px; height: 60px; border-radius: 50%;   /* redondo, como el original */
  background: var(--c-whatsapp);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  transition: transform .2s, bottom .3s var(--ease);
}
/* Mientras se ve el aviso de cookies el botón sube justo por encima, para no
   taparlo; --alto-cookies lo mide main.js (el aviso cambia de alto según el
   ancho de pantalla). Al aceptar, el aviso se oculta y el botón baja solo. */
#cookie-bar:not(.is-hidden) ~ .whatsapp-fab { bottom: calc(32px + var(--alto-cookies, 96px)); }
.whatsapp-fab:hover { transform: scale(1.08); }
.whatsapp-fab svg { width: 34px; height: 34px; fill: var(--c-white); }

/* ============================================================
   Navegación móvil
   ============================================================ */
@media (max-width: 767px) {
  .navbar { padding-inline: 16px; }
  .navbar__inner { min-height: 34px; justify-content: flex-end; }  /* barra fina, hamburguesa a la derecha */
  .navbar__toggle { display: block; padding: 8px 6px; }   /* ≥40px de alto para el dedo */
  .navbar__toggle span { width: 26px; height: 3px; margin: 4px 0; }
  .navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .navbar__nav { order: 2; flex: 0 0 auto; }
  .btn--contact { display: none; }        /* en móvil el original solo muestra la hamburguesa */

  .navbar__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: #F2EFEC;                 /* mismo crema que la barra, como el original */
    border-bottom: 1px solid #030303;
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .navbar__menu.is-open { display: flex; }
  .navbar__menu > li { margin: 0; border-top: 1px solid rgba(11, 27, 69, .06); }
  .navbar__menu > li > a { display: flex; justify-content: center; padding: 15px 20px; }
  .navbar__menu > li > a::after { display: none; }
  .submenu {
    position: static; min-width: 0; margin-left: 0;
    border: 0; border-radius: 0; box-shadow: none; padding: 6px 10px;
    border-top: 1px dashed rgba(11, 27, 69, .15);
    opacity: 1; visibility: hidden; transform: none;
    display: none; background: var(--c-surface);
    pointer-events: auto;
  }
  /* en móvil el hover no aplica: solo abre lo que se toca */
  .has-sub:hover > .submenu, .has-sub:focus-within > .submenu { display: none; }
  .has-sub.is-open > .submenu { display: block; visibility: visible; }
  .submenu a { justify-content: center; text-align: center; }
  .submenu .has-sub > .submenu { margin-left: 0; background: #ECEFF6; }
}

/* ============================================================
   PÁGINAS INTERIORES (galardones, certificaciones, prensa, blog…)
   ============================================================ */
.page-main { background: var(--c-white); padding: 40px 0 60px; }
.page-main .container { max-width: 960px; padding-inline: 30px; }
.page-title {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 34px; line-height: 1.15;
  color: var(--c-primary);
  text-align: center;
  margin-bottom: 30px;
}
.page-main h2, .page-main h3, .page-main h4 {
  font-family: var(--f-serif); font-weight: 600;
  color: var(--c-primary); line-height: 1.25;
  margin: 28px 0 12px;
}
.page-main h2 { font-size: 27px; }
.page-main h3 { font-size: 22px; }
.page-main h4 { font-size: 18px; color: var(--c-secondary); }
.page-main p { color: #444; margin-bottom: 14px; }
.page-img { display: block; margin: 20px auto; max-width: 100%; height: auto; }
.page-video { aspect-ratio: 16 / 9; margin: 24px 0; }
.page-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.gallery {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px; margin: 24px 0;
}
.gallery img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.gallery img:hover { transform: scale(1.025); box-shadow: var(--shadow-md); }
@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .page-title { font-size: 41px; }
}

/* ---------- Páginas interiores v2: estructura sección/columna real ---------- */
.page-layout { background: var(--c-white); }
.sec { padding: 20px 0; }
.sec__in {
  max-width: var(--container); margin-inline: auto;
  padding-inline: 30px;
  display: grid; grid-template-columns: 1fr; gap: 20px;
  align-items: start;   /* como Elementor: las columnas arrancan arriba, no centradas
                           (si una es mucho más corta no queda flotando a media página) */
}
.col { min-width: 0; }
.sec--dark, .sec--dark p { color: var(--c-white); }
.sec--dark .w-heading { color: var(--c-white); }
.w-heading {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 27px; line-height: 1.25;
  color: var(--c-primary);
  margin: 14px 0 12px;
}
.col > p { color: #444; margin-bottom: 12px; }
.w-img { max-width: 100%; height: auto; display: block; margin: 10px auto; }
.w-spacer { height: 20px; }
.w-divider { border: 0; border-top: 1px solid #C9C9C9; margin: 16px 0; }
.w-list { padding: 0; }
.w-list li { color: #444; margin-bottom: 8px; }
@media (min-width: 768px) {
  .sec__in { grid-template-columns: var(--cols, 1fr); padding-inline: 0; }
}

/* ---------- Blog: archivo en una columna, como el original ---------- */
/* el archivo usa el ancho completo del contenedor, como el original (no los 960 del resto de páginas) */
.page-main .container.archive { max-width: var(--container); padding-inline: 10px; }
@media (max-width: 767px) {
  .page-main .container.archive { padding-inline: 20px; }
}
.archive-post { margin-bottom: 46px; }
.archive-post h2 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 30px; line-height: 1.3;
  color: var(--c-primary);
  font-variant-numeric: lining-nums;   /* años (2021, 2022…) a la altura de las mayúsculas */
  font-feature-settings: "lnum" 1;
  margin: 0 0 16px;
}
.archive-post a { color: inherit; }
.archive-post h2 a:hover { color: var(--c-secondary); }
.archive-post img {
  width: 100%; height: auto; display: block;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease);
}
.archive-post a:hover img { box-shadow: var(--shadow-md); }
.archive-post p { font-size: 16px; line-height: 1.7; color: #4A4A4A; margin: 0; }
/* el «[…]» del extracto pasa a ser un botón hacia el artículo completo */
.archive-post__more { margin-top: 14px; }
.archive-post__more:hover { color: var(--c-white); }
@media (max-width: 767px) {
  .archive-post h2 { font-size: 24px; }
  .archive-post p { font-size: 15px; }
}

.pagination {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 10px 0 20px;
  border-top: 1px solid rgba(11, 27, 69, .10);
}
.pagination a {
  color: var(--c-primary); font-size: 15px; font-weight: 500;
  padding: 12px 4px;                        /* ≥36px de alto para tocar cómodo en móvil */
}
.pagination a:hover { color: var(--c-gold); }

/* Blog: rejilla de posts */
.container--wide { max-width: var(--container); }
.post-grid { display: grid; gap: 30px; }
.post-card a { display: block; }
.post-card img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  display: block; margin-bottom: 14px;
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.post-card a:hover img { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card h2 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 18px; line-height: 1.35;
  color: var(--c-primary); margin: 0;
}
.post-card a:hover h2 { color: var(--c-secondary); }
@media (min-width: 768px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   CONSEJO DE HONOR
   ============================================================ */
.sec--council-hero {
  position: relative; padding: 0;
  background: var(--c-primary) url("../img/p/945e83-Diseno-sin-titulo-27.jpg") center / cover no-repeat fixed;
}
.sec--council-hero::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(51, 91, 170, .3);       /* velo azul medio al 30%, como el original */
}
.sec--council-hero .sec__in {
  position: relative; min-height: 600px;
  align-items: center; justify-items: center;
}
.council-hero__title {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 55px; line-height: 1.2; text-align: center;
  color: var(--c-secondary);
  text-shadow: 0 2px 14px rgba(255, 255, 255, .35);
}
.council-title {
  font-family: var(--f-serif); font-weight: 500;
  font-size: 50px; line-height: 1.2;
  text-align: center; color: #16163F;
  margin: 30px 0 10px;
}
@media (max-width: 1024px) {
  .council-hero__title { font-size: 40px; }
  .council-title { font-size: 34px; }
}
@media (max-width: 767px) {
  .sec--council-hero { background-attachment: scroll; }
  .sec--council-hero .sec__in { min-height: 340px; }
  .council-hero__title { font-size: 35px; }
}

.council-person { text-align: center; }
.council-person__photo {
  width: 150px; height: 150px; border-radius: 50%;
  object-fit: cover; margin: 0 auto 14px; display: block;
  box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.council-person:hover .council-person__photo {
  transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow-lg);
}
.council-person__name {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 24px; line-height: 1.25;      /* el original los deja al tamaño de h2 */
  color: var(--c-primary); margin-bottom: 6px;
}
.council-person__role {
  font-size: 16px; font-weight: 600; letter-spacing: .8px;
  color: var(--c-gold); margin-bottom: 8px;
}
.council-person__bio {
  font-size: 17px; line-height: 1.6; color: var(--c-secondary);
  max-width: 62ch; margin-inline: auto;
}
.council-person--lead .council-person__name { font-size: 26px; }
.council-person--lead .council-person__photo { width: 170px; height: 170px; }
.council-person--lead .council-person__bio { max-width: none; }
.council-rule {
  border: 0; border-top: 1px solid rgba(166, 143, 31, .35);
  margin: 40px auto;
}
/* Reparto del original: filas de 3 y filas de 2 centradas en una rejilla de 4 */
.council-row { display: grid; gap: 40px 24px; }
.council-row + .council-row { margin-top: 40px; }
@media (min-width: 768px) {
  .council-row--3 { grid-template-columns: repeat(3, 1fr); }
  .council-row--2 { grid-template-columns: repeat(4, 1fr); }
  .council-row--2 > :first-child { grid-column: 2; }
}

/* "SABER MÁS": el acordeón del original, aquí con <details> (sin JS) */
.council-more {
  margin: 18px auto 0; text-align: left;   /* ocupa el ancho de la columna, como el original (~1120px) */
  border: 1px solid rgba(11, 27, 69, .12);
}
.council-more summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; letter-spacing: .6px;
  color: var(--c-gold);
  transition: background .2s var(--ease);
}
.council-more summary::-webkit-details-marker { display: none; }
.council-more summary::before { content: "+"; font-size: 16px; line-height: 1; }
.council-more[open] summary::before { content: "–"; }
.council-more summary:hover { background: rgba(166, 143, 31, .06); }
.council-more__body {
  padding: 2px 16px 16px;
  font-size: 17px; line-height: 1.75; color: var(--c-navy);
}
.council-more__body h3 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 20px; color: var(--c-primary);
  margin: 16px 0 8px;
}
.council-more__body p { margin-bottom: 12px; }
.council-more__body a.cite {
  font-size: 13px; padding: 3px 7px;   /* legible y tocable también en móvil */
  background: #F1F2F5; border-radius: 2px; color: #667;
  white-space: nowrap;
}
.council-more__body a.cite:hover { color: var(--c-primary); }

/* ---------- Páginas de gala: banda de hero, IGUAL en todas las páginas de premios ----------
   Una sola medida para todas: 16:9 a todo el ancho de la sección, con el velo azul al 50%.
   El ancho completo evita las franjas azules de los costados (en el original la foto y el
   velo cubren toda la sección y solo el contenido interior se limita a 1600px), y la
   proporción 16:9 deja las fotos (todas 1920×1080) enteras, sin recortes. */
.sec--gala-hero { position: relative; padding: 0; background: var(--c-secondary); }
.sec--gala-hero .sec__in {
  position: relative; max-width: none;
  aspect-ratio: 16 / 9; min-height: 0;
  padding-inline: 0; display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;   /* con "fixed" la foto se recorta a la ventana */
}
.sec--gala-hero .sec__in::after {          /* velo azul al 50%, como el original */
  content: ""; position: absolute; inset: 0;
  background: var(--c-secondary); opacity: .5;
}
/* Láminas y banners (Pasteur III, Miami, Carlos III, Líderes): no son fotos 16:9, así que
   se centran completas dentro de la misma banda en vez de recortarse */
.sec--gala-hero--contain .sec__in { background-size: contain; }
/* …y su banda va blanca, para que la lámina se funda con los costados */
.sec--gala-hero--light { background: var(--c-white); }
.sec--gala-hero--plain { background: var(--c-white); }

/* Carrusel de fotos de gala (media-carousel del original: 1 foto, flechas, puntos, 5s) */
.mcar { position: relative; margin: 10px 0 20px; }
/* arrastrable como el Swiper original: el gesto vertical sigue haciendo scroll */
.mcar__viewport { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.mcar__viewport:active { cursor: grabbing; }
.mcar__slide img { -webkit-user-drag: none; }
.mcar__track { display: flex; transition: transform .5s var(--ease); }
.mcar__slide { flex: 0 0 100%; margin: 0; min-width: 0; }
.mcar__slide img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-sm);
}
.mcar__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  font-size: 24px; line-height: 1; color: var(--c-white);
  background: rgba(11, 27, 69, .45);
  border-radius: var(--r-sm);
  transition: background .25s var(--ease), opacity .25s var(--ease);
}
.mcar__arrow:hover { background: rgba(11, 27, 69, .75); }
.mcar__arrow--prev { left: 8px; }
.mcar__arrow--next { right: 8px; }
/* Sin fila de puntos bajo los carruseles: se navega con las flechas y arrastrando.
   Con galerías largas (43 fotos en Carlos III) la fila ocupaba tres renglones. */

/* Galería grande del original: banda a sangre con la foto central (~79%, 50vh de alto,
   recorte cover) y las vecinas asomando por los bordes */
.sec--bleed .sec__in { max-width: none; padding-inline: 0; }
.mcar--wide { margin: 10px 0 26px; }
.mcar--wide .mcar__slide { flex: 0 0 79%; padding-inline: 5px; }
.mcar--wide .mcar__slide img {
  aspect-ratio: auto; height: 50vh; min-height: 240px; max-height: 600px;
  object-fit: cover; border-radius: 0;
}
/* fotos verticales (photocall de los Premios Madrid): con "cover" se quedaban
   en una franja del pecho, así que se enseñan enteras sobre el azul de la casa */
.mcar--wide .mcar__slide--tall img { object-fit: contain; background: var(--c-primary); }
.mcar--wide .mcar__arrow--prev { left: calc(10.5% + 14px); }
.mcar--wide .mcar__arrow--next { right: calc(10.5% + 14px); }
/* en móvil 50vh recorta demasiado la foto: se pasa a proporción 3:2 y flechas más juntas */
@media (max-width: 767px) {
  .mcar--wide .mcar__slide img { height: auto; aspect-ratio: 3 / 2; min-height: 0; }
  .mcar--wide .mcar__arrow--prev { left: calc(10.5% + 6px); }
  .mcar--wide .mcar__arrow--next { right: calc(10.5% + 6px); }
  .mcar--wide .mcar__arrow { width: 36px; height: 36px; font-size: 20px; }
  /* sin la fila de puntos, las flechas son el único control: se ven igual pero
     se tocan en 44px (el área invisible no altera la maqueta) */
  .mcar__arrow::after { content: ""; position: absolute; inset: -4px; }
}

.w-heading--center { text-align: center; }

/* Título de las páginas de gala: grande con filete dorado a la izquierda, como el original */
.w-heading--gala {
  font-family: "Merriweather", Georgia, serif;   /* el original usa Merriweather, no Playfair */
  font-size: 50px; font-weight: 500; line-height: 1.5;
  color: #16163F;
  padding-left: 30px;
  border-left: 4px solid #D3B574;
  margin: 0 0 20px;
}
@media (max-width: 1024px) { .w-heading--gala { font-size: 38px; } }
@media (max-width: 767px)  { .w-heading--gala { font-size: 34px; padding-left: 18px; } }

/* Cada gala pinta su título a un tamaño distinto, con sus propios saltos de pantalla
   (tomados del CSS del original). En línea no valen: un style="font-size" gana a las
   media queries y el título se quedaría gigante en el móvil. */
.w-heading--gala-45 { font-size: 45px; }        /* Medalla 2020, Carlos III, Alfonso X */
@media (max-width: 1024px) { .w-heading--gala-45 { font-size: 38px; } }
@media (max-width: 767px)  { .w-heading--gala-45 { font-size: 29px; } }
.w-heading--gala-47 { font-size: 47px; }        /* Isaac Peral */
@media (max-width: 1024px) { .w-heading--gala-47 { font-size: 38px; } }
@media (max-width: 767px)  { .w-heading--gala-47 { font-size: 26px; } }
/* en móvil la banda mantiene su 16:9 (≈219px a 390px de ancho, como el 27vh del original).
   Ojo: no poner min-height aquí — con aspect-ratio el navegador recalcula el ANCHO a partir
   de esa altura mínima y la banda desbordaba 1px la pantalla. */

/* "GALERÍA DE IMÁGENES": 32px centrado, como el original (nuestro w-heading base es 27px) */
/* «GALERÍA DE IMÁGENES»: rótulo grande y en el azul de la casa sobre el
   carrusel de fotos del final de cada página de premios */
.w-heading--gal {
  font-size: 42px; line-height: 1.2; text-align: center;
  color: var(--c-primary);
  margin: 0 0 22px;
}
@media (max-width: 1024px) { .w-heading--gal { font-size: 34px; } }
@media (max-width: 767px)  { .w-heading--gal { font-size: 28px; margin-bottom: 16px; } }

/* Secciones de gala a dos columnas: el original las separa con MÁRGENES de 150px,
   que se colapsan entre secciones vecinas (con relleno sumarían 300px) */
.sec--gala-2col { padding: 0; margin: 150px 0; }
@media (max-width: 1024px) { .sec--gala-2col { margin: 80px 0; } }
@media (max-width: 767px)  { .sec--gala-2col { margin: 40px 0; } }

/* Botón amarillo del "SUPLEMENTO LA RAZÓN" (Pasteur II) */
.btn--yellow { background: #F2E635; color: #fff; font-size: 15px; }
.btn--yellow:hover { background: #E3D71F; }

/* Título de las galas Pasteur: mismo filete dorado pero compacto (32/38/34, tal cual el original) */
.w-heading--gala-sm { font-size: 32px; }
@media (max-width: 1024px) { .w-heading--gala-sm { font-size: 38px; } }
@media (max-width: 767px)  { .w-heading--gala-sm { font-size: 34px; } }

/* Crónicas de Madrid 2029 y Pasteur IV: su título va un punto menor (30/38/29) */
.w-heading--gala-30 { font-size: 30px; }
@media (max-width: 1024px) { .w-heading--gala-30 { font-size: 38px; } }
@media (max-width: 767px)  { .w-heading--gala-30 { font-size: 29px; } }

/* El original monta estas secciones sobre un contenedor de 1200px, no los 1140 globales */
.sec--gala-2col .sec__in { max-width: 1200px; }

/* Vídeo de YouTube junto al texto (Pasteur I) */
.video-embed {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  border: 0; border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); margin-top: 18px;
}

/* I Calidad: el texto corre a dos columnas alrededor del vídeo (Montserrat 200 gris,
   como el original) y la foto de la noticia lleva pie dorado centrado de 12px */
.text-cols {
  columns: 2; column-gap: 16px;
  font-family: "Montserrat", var(--f-sans), sans-serif;
  font-weight: 200; font-size: 16px; line-height: 1.5; color: #4A4A4A;
}
/* el original parte los párrafos entre columnas (break-inside por defecto) */
.text-cols p { color: inherit; margin-bottom: 14.4px; }
/* las "negritas" del original son bolder(200) → 400: contraste sutil, no negrita gruesa */
.text-cols strong, .text-cols b { font-weight: 400; }
@media (max-width: 767px) { .text-cols { columns: 1; } }

/* Crónicas de Madrid 2029 y Pasteur IV: mismas dos columnas justificadas pero
   en Roboto azul oscuro con negritas de verdad (700), tal cual el original */
.w-cols2 {
  columns: 2; column-gap: 1em; text-align: justify;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px; line-height: 1.5; color: #202140;
}
.w-cols2 p { color: inherit; margin: 0 0 14.4px; }
.w-cols2 b, .w-cols2 strong { font-weight: 700; }
/* en móvil, una columna y SIN justificar: a 330px de medida el justificado abría
   "ríos" de espacios enormes entre palabras y el texto se leía a saltos */
@media (max-width: 767px) { .w-cols2 { columns: 1; text-align: left; } }

/* Titulares de las crónicas (Madrid 2029 y Pasteur IV): el tamaño de escritorio del
   original es enorme para un móvil, así que bajan por breakpoint como los de gala */
.w-heading--cronica { font-size: 40px; line-height: 1; color: #202140; text-align: justify; margin: 0 0 20px; }
.w-heading--cronica-sm { font-size: 32px; line-height: 1; color: #202140; margin: 0 0 20px; }
@media (max-width: 767px) {
  .w-heading--cronica { font-size: 25px; line-height: 1.15; text-align: left; }
  .w-heading--cronica-sm { font-size: 24px; line-height: 1.2; }
}

/* Columnas con relleno lateral propio del escritorio: en móvil se sumaba al de .sec__in
   y el bloque quedaba 45px más estrecho y descentrado respecto al resto de la página */
@media (min-width: 768px) {
  .col--pad-txt { padding: 0 30px 0 15px; }
  .col--pad-sm  { padding: 0 10px; }
}

.w-imgcap { margin: 10px 0; }
.w-imgcap figcaption {
  font-family: "Roboto", Arial, sans-serif; font-size: 16px;
  font-style: italic;                       /* el original lo muestra en cursiva */
  color: var(--c-gold); text-align: center; line-height: 1.6;
  margin-top: 10px;
}
/* Isaac Peral usa un pie más pequeño que el resto (12px en escritorio, 8px en móvil) */
.w-imgcap--sm figcaption { font-size: 12px; }
@media (max-width: 767px) {
  .w-imgcap figcaption { font-size: 12px; }
  /* el original lo baja a 8px, ilegible en un móvil: se queda en 11px, el mínimo legible */
  .w-imgcap--sm figcaption { font-size: 11px; }
}

/* Galerías del original: recorte 3:2, hueco de 10px y velo al pasar el ratón.
   El número de columnas lo fija cada página (4 en Isaac Peral y Alfonso X, 3 en Calidad). */
.gallery--4, .gallery--3 { gap: 10px; }
.gallery--4 img, .gallery--3 img {
  aspect-ratio: 3 / 2;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
}
.gallery--4 img:hover, .gallery--3 img:hover { filter: brightness(.86); }
@media (min-width: 1025px) {
  .gallery--4 { grid-template-columns: repeat(4, 1fr); }
  .gallery--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .gallery--4, .gallery--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .gallery--3 { grid-template-columns: repeat(3, 1fr); }   /* el original usa 3 en móvil */
}
/* en el móvil estrecho 3 columnas dejan miniaturas de ~110px: se pasa a 2 */
@media (max-width: 520px) {
  .gallery--4, .gallery--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Prensa: rejilla de recortes pegada, como el original ---------- */
.page-layout--press .sec { padding: 0; }              /* el original no separa las filas */
.page-layout--press .w-img { margin: 10px auto; }
/* recortes con enlace al medio: se marcan solo al pasar el ratón */
.press-clip { display: block; }
.press-clip .w-img { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.press-clip:hover .w-img {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.press-clip:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }

/* ---------- Prensa: portada con foto fija y PRENSA a 90px ---------- */
.sec--press-hero {
  position: relative;
  background: url("../img/p/6e1a59-PORTADA-PRENSA-AEDEEC.jpg") center / cover no-repeat fixed;
  padding: 0;
}
.sec--press-hero::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 255, 255, .3);   /* velo blanco al 30%, como el original */
}
.sec--press-hero .sec__in {
  position: relative;
  min-height: 530px; align-items: center; justify-items: center;
}
.sec--press-hero .w-heading {
  font-size: 90px; font-weight: 600; line-height: 1.1;
  text-align: center; margin: 0;
  text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
@media (max-width: 1024px) {
  .sec--press-hero .w-heading { font-size: 60px; }
}
@media (max-width: 767px) {
  .sec--press-hero { background-attachment: scroll; }
  .sec--press-hero .sec__in { min-height: 320px; }
  .sec--press-hero .w-heading { font-size: 41px; }
}

/* ---------- Certificaciones ---------- */
/* Cabecera con la foto del original, velo azul y fondo fijo (paralaje) */
.sec--cert-hero {
  position: relative;
  background: url("../img/p/4b5b64-AMAYA-ART-GALLERY.jpg") center / cover no-repeat fixed;
  padding: 90px 30px;
}
.sec--cert-hero::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(1, 58, 171, .45);   /* #013AAB73 al 80% de opacidad, como el original */
}
.sec--cert-hero .sec__in { position: relative; min-height: 420px; align-items: center; }
.sec--cert-hero .w-heading,
.sec--cert-hero p { color: var(--c-white); }
.sec--cert-hero .w-heading { font-size: 41px; }
@media (max-width: 767px) {
  .sec--cert-hero { background-attachment: scroll; padding: 60px 20px; }
  .sec--cert-hero .w-heading { font-size: 30px; }
  .sec--cert-hero .sec__in { min-height: 0; }
}

/* Sello + texto: entrada lateral, hover y paralaje */
.sec--cert .sec__in { align-items: center; }
/* el sello no lleva transform en el reveal: lo usa el paralaje */
.sec--cert .col.rv-left.reveal { transform: none; }

/* Tipografía de certificaciones, calcada del original: el hero lleva Playfair 51px
   blanco (37/31 en tablet/móvil, tracking -1.4px) con el párrafo blanco en Roboto;
   cada sello usa el h2 por defecto del kit (Playfair 600, 24px, azul) y texto dorado */
.sec--cert-hero .w-heading {
  font-size: 51px; font-weight: 600; line-height: 1.2;
  letter-spacing: -1.4px; color: var(--c-white);
}
/* La columna del texto va sangrada 80px y el párrafo en Poppins 16/1.9, como el original */
.sec--cert-hero .col:first-child { padding-left: 80px; }
.sec--cert-hero .col > p {
  color: var(--c-white);
  font-family: "Poppins", "Outfit", sans-serif;
  font-size: 16px; line-height: 1.9;
}
@media (max-width: 1024px) {
  .sec--cert-hero .w-heading { font-size: 37px; }
  .sec--cert-hero .col:first-child { padding-left: 30px; }
}
@media (max-width: 767px)  {
  .sec--cert-hero .w-heading { font-size: 31px; }
  .sec--cert-hero .col:first-child { padding-left: 0; }
}
.sec--cert .w-heading { font-size: 26px; }
.sec--cert .col > p {
  color: var(--c-gold);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 20px; line-height: 1.65;
}
@media (max-width: 767px) {
  .sec--cert .w-heading { font-size: 23px; }
  .sec--cert .col > p { font-size: 18px; }
}

/* Cada fila enseña su sello dentro de una composición de 1920×1080. En móvil
   (donde el fondo no se ve bien) vuelve el <img>, igual que hace el propio
   original con sus image-box solo-móvil.

   MOVIMIENTO, medido en aedeec.org/certificaciones (1440, 1920 y 1280 de ancho):
   a partir de 1025px el original ancla la composición a la pantalla
   (background-attachment: fixed, contain, centrada) y hace que cada fila mida
   justo una pantalla de alto. Al bajar, la imagen se queda quieta y la fila
   resbala por delante: el sello parece flotar y enlaza con el de la fila
   siguiente. Eso es exactamente lo que se reproduce aquí.

   La composición se pinta sobre la SECCIÓN, que ocupa todo el ancho, y no sobre
   la media columna de la izquierda. Es la diferencia que arreglaba el recorte:
   una imagen anclada se coloca respecto a la PANTALLA, así que pintándola en la
   media columna el sello caía fuera de su recuadro por la izquierda y se le
   comía el borde ("MPRESA CERTIFICADA"). En el original no pasa porque allí su
   columna llega hasta el borde de la pantalla; aquí, al ir sobre la sección,
   tampoco: la imagen siempre cabe entera de lado a lado.

   El alto de fila es 100vh, como el del original (allí la sección mide 813px en
   una pantalla de 813, 913 en una de 913...). Con la imagen "contain" sobre la
   pantalla, cuando la fila coincide con la pantalla se ve el sello completo. */
@media (min-width: 1025px) {
  .sec--cert.cert-bg {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-attachment: fixed;
  }
  .sec--cert .col.cert-win { min-height: 100vh; }
}
/* 768–1024px: el original apaga aquí el anclaje y el sello le queda diminuto
   (la imagen pasa a encajarse dentro de media columna: 512×288 en una pantalla
   de 1024). Se mantiene el sello grande y entero, que es lo que se ve bien. */
@media (min-width: 768px) and (max-width: 1024px) {
  .sec--cert.cert-bg {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto min(56.25vw, 900px);
  }
  .sec--cert .col.cert-win { min-height: min(56.25vw, 900px); }
}
@media (min-width: 768px) {
  .sec--cert .col.cert-win .cert-card { display: none; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  /* quien pide menos movimiento no lleva imagen anclada: el sello se queda
     quieto en su fila, del mismo tamaño y sin recortar */
  .sec--cert.cert-bg { background-attachment: scroll; background-size: auto min(56.25vw, 900px); }
  .sec--cert .col.cert-win { min-height: min(56.25vw, 900px); }
}
@media (max-width: 767px) {
  .sec--cert.cert-bg { background-image: none !important; }
}
/* Las filas de sellos se tocan (sin línea ni relleno): la cinta se ve continua.
   El recorte es por la entrada del texto: entra desplazado 34px a la derecha y,
   en pantallas medianas (donde el contenido ya toca los bordes), esos 34px
   asomaban y sacaban barra de desplazamiento horizontal. */
.sec--cert { padding: 0; overflow: hidden; }
/* El sello de móvil es un <img> dentro de la columna (el fondo anclado no funciona
   en los móviles), así que aquí solo se le da tamaño y sombra. */
.cert-card { display: block; }
.cert-card__img {
  width: 100%; height: auto;      /* sin height:auto el sello hereda el alto del atributo y sale estirado */
  max-width: 200px; margin-inline: auto; display: block;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  transition: box-shadow .45s var(--ease);
}
.cert-card:hover .cert-card__img { box-shadow: var(--shadow-lg); }

/* ---------- Animaciones de entrada (reveal on scroll) ---------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }
/* entrada lateral: el sello entra por la izquierda y su texto por la derecha */
.reveal.rv-left  { transform: translateX(-34px); }
.reveal.rv-right { transform: translateX(34px); }
.reveal.rv-down  { transform: translateY(-28px); }   /* fadeInDown del original (portada de Prensa) */
.reveal.rv-fade  { transform: none; }                 /* fadeIn puro (logo estrella del hero) */
.reveal.rv-left.in-view, .reveal.rv-right.in-view, .reveal.rv-down.in-view { transform: none; }
/* en móvil el desplazamiento lateral haría asomar barra horizontal: entra solo en vertical */
@media (max-width: 767px) {
  .reveal.rv-left, .reveal.rv-right { transform: translateY(24px); }
}

/* ---------- Accesibilidad: movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   ARTÍCULO DEL BLOG (páginas de cada entrada): columna centrada
   y legible, con el titular y la foto centrados sobre ella
   ============================================================ */
.post-page { padding: 46px 0 60px; }
.post-page__in { max-width: 860px; margin-inline: auto; padding-inline: 30px; }
.post-page__title {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 34px; line-height: 1.25;
  color: var(--c-primary); text-align: center;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  margin: 0 0 26px;
}
.post-page__figure { margin: 0 0 30px; }
.post-page__figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-sm); box-shadow: var(--shadow-sm);
}
.post-page__subtitle {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 22px; line-height: 1.35;
  color: var(--c-secondary); text-align: center;
  margin: 0 0 22px;
}
.post-page__body p {
  font-size: 16px; line-height: 1.75; color: #444;
  margin-bottom: 18px;
}
.post-page__body p:last-child { margin-bottom: 0; }
/* subtítulos de sección dentro del artículo */
.post-page__body h2 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 24px; line-height: 1.3;
  color: var(--c-primary);
  margin: 32px 0 14px;
}
@media (max-width: 767px) { .post-page__body h2 { font-size: 21px; margin-top: 26px; } }
.post-page__body b, .post-page__body strong { font-weight: 600; color: #333; }
.post-page__back {
  display: inline-block; margin-top: 34px;
  font-size: 15px; color: var(--c-primary); font-weight: 500;
}
.post-page__back:hover { color: var(--c-secondary); }
@media (max-width: 767px) {
  /* zona tocable cómoda en el móvil (antes 24px de alto) */
  .post-page__back { font-size: 16px; padding: 9px 2px; margin-top: 26px; }
}
@media (max-width: 767px) {
  .post-page { padding: 28px 0 40px; }
  .post-page__in { padding-inline: 22px; }
  .post-page__title { font-size: 26px; margin-bottom: 20px; }
  .post-page__subtitle { font-size: 19px; }
}