/* Codeoscopic — estilos del front (complementan theme.json) */

:root {
  --co-shadow: 0 14px 40px -18px rgba(17, 17, 17, 0.30);
  --co-shadow-hover: 0 26px 60px -24px rgba(17, 17, 17, 0.45);
  --co-radius: 18px;
  --co-gold: #EAC649;
  --co-gold-d: #D4AD2A;
  --co-ink: #0E162A;
  --co-ink-deep: #0A1923;
  --co-sand: #FAF8F3;
  --co-muted: #4E5A63;
  --co-muted-soft: #6B7680;
  /* Alto aproximado de .co-header. En eventos solo separa el contenido del hero
     de la cabecera; ya no coloca el hero, así que un par de píxeles de más o de
     menos no dejan ninguna costura. */
  --co-nav-h: 79px;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--co-sand); }
::selection { background: var(--co-gold); color: var(--co-ink); }

/* Secciones full-width contiguas: sin franjas blancas entre bandas */
main .wp-block-post-content > .alignfull { margin-top: 0; margin-bottom: 0; }
main .wp-block-post-content > :first-child { margin-top: 0; }
/* el contenido arranca pegado a la cabecera y pega con el footer */
.wp-site-blocks > main { margin-top: 0; margin-bottom: 0; }
.wp-site-blocks > footer { margin-top: 0; }

/* --- Footer legible y con vida --- */
footer.wp-block-group { border-top: 1px solid rgba(234, 198, 73, .22); }
footer.wp-block-group a:not(.wp-element-button) {
  color: rgba(255, 255, 255, .74);
  text-decoration: none;
  transition: color .15s ease;
}
footer.wp-block-group a:not(.wp-element-button):hover { color: var(--co-gold); }
/* Los botones del pie mantienen texto navy sobre oro: en crema el contraste
   sobre #EAC649 baja a ~1.8:1 y no pasa el mínimo de accesibilidad. */
footer.wp-block-group .wp-element-button { color: var(--co-ink); }
footer.wp-block-group .wp-block-list { line-height: 2; }
footer.wp-block-group h3 { letter-spacing: .02em; margin-bottom: .6rem; }

/* --- Cabecera --- */
/* El template-part envuelve .co-header en un <header class="wp-block-template-part">
   de su misma altura; eso rompe el sticky (no puede moverse fuera de su padre).
   display:contents saca ese wrapper del flujo para que .co-header pegue respecto a
   .wp-site-blocks y el sticky funcione en toda la página. */
header.wp-block-template-part:has(.co-header) { display: contents; }
.co-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 243, 0.82) !important;
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(14,22,42, 0.07) !important;
}
.co-logo img, .co-logo svg { display: block; height: 30px; width: auto; }
/* CTA de cabecera: pill oscura (no la pill oro por defecto) */
.co-header .wp-block-button__link {
  background: var(--co-ink) !important;
  color: var(--co-sand) !important;
  padding: 0.65rem 1.35rem;
}
.co-header .wp-block-button__link:hover { background: #000 !important; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }

/* --- Navegación con paneles (mega menú) ---
   Los paneles se posicionan contra .co-header (sticky ya crea contexto de
   posicionado), así que salen a sangre completa aunque el nav esté dentro del
   contenedor de 1280px. */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.co-nav__list {
  display: flex; align-items: center; gap: 4px;
  margin: 0; padding: 0; list-style: none;
}
.co-nav__item { position: static; }
.co-nav__trigger {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--wp--preset--font-size--medium);
  font-weight: 500; line-height: 1.2; color: var(--co-ink); opacity: .78;
  transition: opacity .18s ease, background-color .18s ease;
}
.co-nav__trigger:hover { opacity: 1; background: rgba(14,22,42,.05); }
.co-nav__trigger[aria-expanded="true"] { opacity: 1; background: rgba(14,22,42,.06); }
.co-nav__chev { transition: transform .2s ease; }
.co-nav__trigger[aria-expanded="true"] .co-nav__chev { transform: rotate(180deg); }
.co-nav__burger { display: none; }

.co-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--wp--preset--color--white);
  border-bottom: 1px solid var(--wp--preset--color--gray-line);
  box-shadow: 0 24px 48px -24px rgba(14,22,42,.28);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.co-nav__item.is-open .co-mega { opacity: 1; visibility: visible; transform: none; }
.co-mega__inner {
  max-width: 1280px; margin-inline: auto;
  padding: 40px; display: grid; gap: 40px;
}
/* El inner siempre son los 1280px centrados de la página: así el panel arranca
   en la misma vertical que el logo y que el contenido de cada sección. Lo que
   varía por panel es el reparto interno, no la caja. */
.co-mega__inner--grupo { grid-template-columns: 1fr 560px; }
.co-mega__inner--grupo .co-mega__brands { grid-template-columns: 1fr 1fr; }
.co-mega__inner--workspace { grid-template-columns: 1fr 320px; }
.co-mega__inner--actualidad { grid-template-columns: 1fr; }
.co-mega__inner--actualidad .co-mega__links--duo { max-width: 660px; }
.co-mega__col--aside {
  padding-left: 40px; border-left: 1px solid var(--wp--preset--color--gray-line);
}
.co-mega__eyebrow {
  margin: 0 0 6px; font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--co-muted-soft);
}
.co-mega__lead {
  margin: 0 0 22px; font-size: var(--wp--preset--font-size--small);
  line-height: 1.5; color: var(--co-muted);
}
.co-mega__eyebrow + .co-mega__links,
.co-mega__eyebrow + .co-mega__brands { margin-top: 18px; }

.co-mega__links { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.co-mega__links--duo { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.co-mega__links a {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: var(--co-ink);
  transition: background-color .15s ease;
}
.co-mega__links a:hover { background: var(--wp--preset--color--cream); }
.co-mega__ico { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; color: var(--wp--preset--color--gold-deep); }
.co-mega__links b { display: block; font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.35; }
.co-mega__links em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: .8125rem; line-height: 1.4; color: var(--co-muted-soft);
}
.co-mega__links--tight a { padding-block: 8px; }

/* Productos: el wordmark hace de título, el claim va debajo. */
.co-mega__prods {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 24px;
}
.co-mega__prods a {
  display: block; padding: 12px; border-radius: 10px;
  text-decoration: none; transition: background-color .15s ease;
}
.co-mega__prods a:hover { background: var(--wp--preset--color--cream); }
.co-mega__mark { display: block; width: auto; height: 20px; }
.co-mega__mark--bcover { height: 17px; }
.co-mega__mark--coverize { height: 16px; }
.co-mega__prods em {
  display: block; margin-top: 8px; font-style: normal;
  font-size: .8125rem; line-height: 1.4; color: var(--co-muted);
}

.co-mega__brands { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.co-mega__brands a {
  display: flex; align-items: center; justify-content: center;
  height: 78px; padding: 16px; border: 1px solid var(--wp--preset--color--gray-line);
  border-radius: 12px; transition: border-color .15s ease, background-color .15s ease;
}
.co-mega__brands a:hover { border-color: var(--co-gold); background: var(--wp--preset--color--cream); }
.co-mega__brands img { display: block; max-width: 100%; height: auto; max-height: 42px; width: auto; }

.co-mega__promo {
  display: block; margin-top: 22px; padding: 20px;
  border-radius: 12px; background: var(--co-ink); text-decoration: none;
}
.co-mega__promo b { display: block; color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.co-mega__promo span { display: block; margin-top: 6px; font-size: .8125rem; line-height: 1.45; color: rgba(255,255,255,.72); }
.co-mega__promo i { display: block; margin-top: 12px; font-style: normal; font-size: .8125rem; font-weight: 600; color: var(--co-gold); }
.co-mega__promo:hover i { text-decoration: underline; }

@media (max-width: 980px) {
  .co-nav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 0; border: 0; border-radius: 8px;
    background: transparent; cursor: pointer; color: var(--co-ink);
  }
  .co-nav__burger-box { display: grid; gap: 5px; width: 20px; }
  .co-nav__burger-box i { display: block; height: 2px; background: currentColor; border-radius: 2px; }
  .co-nav__menu {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - 100%); overflow-y: auto;
    padding: 8px 20px 24px;
    background: var(--wp--preset--color--white);
    border-bottom: 1px solid var(--wp--preset--color--gray-line);
    box-shadow: 0 24px 48px -24px rgba(14,22,42,.28);
    display: none;
  }
  .co-nav.is-open .co-nav__menu { display: block; }
  .co-nav__list { display: block; }
  .co-nav__trigger { width: 100%; justify-content: space-between; padding: 14px 4px; border-radius: 0; }
  .co-nav__item + .co-nav__item .co-nav__trigger { border-top: 1px solid var(--wp--preset--color--gray-line); }
  /* En móvil el panel es un acordeón en flujo, no una capa flotante. */
  .co-mega {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; display: none;
  }
  .co-nav__item.is-open .co-mega { display: block; }
  .co-mega__inner,
  .co-mega__inner--grupo,
  .co-mega__inner--workspace,
  .co-mega__inner--actualidad { grid-template-columns: 1fr; max-width: none; padding: 4px 0 16px; gap: 24px; }
  .co-mega__col--aside { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--wp--preset--color--gray-line); }
  .co-mega__prods,
  .co-mega__links--duo { grid-template-columns: 1fr; }
}

/* --- Conmutador de idioma (pill + popover) --- */
.co-header .co-logo { align-items: center; }
.co-lang { position: relative; display: inline-flex; align-items: center; padding-left: 1rem; }
/* divider vertical respecto al logo */
.co-lang::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 24px; background: var(--wp--preset--color--gray-line);
}
.co-lang__toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent;
  border: 1px solid var(--wp--preset--color--gray-line);
  border-radius: 999px; padding: .38rem .8rem;
  font: inherit; font-weight: 700; font-size: .85rem; line-height: 1;
  color: var(--co-ink); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.co-lang__toggle:hover { border-color: var(--co-gold); background: var(--wp--preset--color--cream); }
.co-lang__arrow {
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; transition: transform .18s ease;
}
.co-lang:hover .co-lang__arrow, .co-lang:focus-within .co-lang__arrow { transform: rotate(180deg); }
.co-lang__pop {
  position: absolute; left: 0; top: calc(100% + 8px); min-width: 168px;
  background: #fff; border: 1px solid var(--wp--preset--color--gray-line);
  border-radius: 12px; box-shadow: var(--co-shadow); padding: .4rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 200;
}
.co-lang:hover .co-lang__pop, .co-lang:focus-within .co-lang__pop { opacity: 1; visibility: visible; transform: none; }
.co-lang__item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: 8px;
  text-decoration: none; color: var(--co-ink); font-size: .92rem; font-weight: 600;
}
.co-lang__item b { width: 22px; font-size: .76rem; font-weight: 800; color: var(--wp--preset--color--gray); }
.co-lang__item > span { flex: 1; }
.co-lang__item:hover { background: var(--wp--preset--color--cream); }
.co-lang__item.is-current, .co-lang__item.is-current b { color: var(--wp--preset--color--gold-deep); }
.co-lang__tick { color: var(--wp--preset--color--gold-deep); font-weight: 800; }

/* --- Botones: pill, oro. Variante outline --- */
.wp-block-button__link { position: relative; overflow: hidden; transition: transform .15s ease, background .15s ease, box-shadow .2s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(234,198,73,.7); }
/* brillo que cruza el botón al pasar el ratón */
.wp-block-button__link::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .55s ease;
}
.wp-block-button__link:hover::after { left: 140%; }
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent !important;
  color: currentColor !important;
  border: 2px solid currentColor;
}
.is-style-outline .wp-block-button__link:hover {
  background: var(--co-gold) !important;
  color: var(--co-ink) !important;
  border-color: var(--co-gold);
}

/* --- Tarjetas --- */
.co-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--gray-line);
  border-radius: var(--co-radius);
  box-shadow: var(--co-shadow);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.co-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--co-gold), #f4df82 60%, transparent);
  opacity: 0; transition: opacity .2s ease;
}
.co-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--co-shadow-hover);
  border-color: var(--co-gold);
}
.co-card:hover::before { opacity: 1; }

/* Captura dentro de la tarjeta */
.co-card__media {
  background: linear-gradient(160deg, var(--wp--preset--color--cream), #F2EAC6);
  border-bottom: 1px solid var(--wp--preset--color--gray-line);
  padding: 1.4rem 1.4rem 0;
  aspect-ratio: 16 / 10;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.co-card__media img {
  width: 100%; height: auto; display: block;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 8px 24px -8px rgba(17,17,17,.35);
}

/* Mockup en hero (imagen enmarcada) */
.co-mockup img {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.6);
}

/* Etiqueta tipo "tag" en oro */
.co-tag {
  display: block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gold-deep);
}

/* --- Stats: banda oscura, números oro VISIBLES --- */
.co-stats { position: relative; overflow: hidden; }
.co-stats::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 200px at 15% 0%, rgba(234,198,73,.10), transparent 70%),
    radial-gradient(500px 200px at 90% 100%, rgba(234,198,73,.08), transparent 70%);
  pointer-events: none;
}
.co-stats__grid {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  text-align: center;
}
.co-stats__item { padding: .5rem 1rem; }
.co-stats__item + .co-stats__item { border-left: 1px solid rgba(255,255,255,.10); }
.co-stats__num {
  display: inline-block;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: center;
  color: var(--co-gold);
}
.co-stats__label {
  display: block; margin-top: .6rem;
  color: rgba(255,255,255,.78); font-size: .95rem;
}
@media (max-width: 700px) {
  .co-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .co-stats__item:nth-child(odd) { border-left: 0; }
}

/* --- Hero con motivo de anillos + glow animado --- */
.co-hero {
  position: relative;
  overflow: hidden;
  color: var(--wp--preset--color--white);
}
/* halo dorado que respira (da luz a la parte de arriba) */
.co-hero::before {
  content: "";
  position: absolute; inset: -20% -10% auto auto;
  width: 70%; height: 140%;
  background: radial-gradient(closest-side, rgba(234,198,73,.22), rgba(234,198,73,.06) 55%, transparent 72%);
  filter: blur(10px);
  animation: co-breathe 7s ease-in-out infinite;
  pointer-events: none;
}
/* anillos concéntricos (eco del logo) */
.co-hero::after {
  content: "";
  position: absolute;
  right: -80px; top: 50%;
  width: 480px; height: 480px;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 38%, rgba(234,198,73,.20) 38% 40%, transparent 40%),
    radial-gradient(circle, transparent 0 50%, rgba(234,198,73,.34) 50% 52%, transparent 52%),
    radial-gradient(circle, transparent 0 64%, rgba(234,198,73,.16) 64% 66%, transparent 66%);
  animation: co-spin 60s linear infinite;
  pointer-events: none;
}
.co-hero > * { position: relative; z-index: 1; }
.co-hero :is(h1,h2,h3,p) { color: var(--wp--preset--color--white); }
.co-hero .co-tag { color: var(--co-gold); }

/* Entrada del texto del hero (al cargar) */
.co-hero .co-tag,
.co-hero h1,
.co-hero p,
.co-hero .wp-block-buttons { opacity: 0; animation: co-rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.co-hero h1 { animation-delay: .08s; }
.co-hero p  { animation-delay: .16s; }
.co-hero .wp-block-buttons { animation-delay: .24s; }

/* --- CTA llamativo --- */
.co-cta { position: relative; overflow: hidden; text-align: center; }
.co-cta > * { position: relative; z-index: 1; }
.co-cta::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 720px; height: 720px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(234,198,73,.30), rgba(234,198,73,.08) 55%, transparent 72%);
  filter: blur(6px); animation: co-breathe 7s ease-in-out infinite; pointer-events: none;
}
.co-cta::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 540px; height: 540px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 49%, rgba(234,198,73,.18) 49% 50.5%, transparent 50.5%),
    radial-gradient(circle, transparent 0 66%, rgba(234,198,73,.12) 66% 67%, transparent 67%);
  animation: co-spin-c 70s linear infinite; pointer-events: none;
}
@keyframes co-spin-c { to { transform: translate(-50%, -50%) rotate(360deg); } }
.co-cta .co-tag { color: var(--co-gold); }
.co-cta :is(h2, p) { color: var(--wp--preset--color--white); }
.co-cta p { max-width: 620px; margin-inline: auto; opacity: .92; }

/* --- Reveal al hacer scroll (lo activa anim.js) --- */
.co-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.co-reveal.co-in { opacity: 1; transform: none; }

@keyframes co-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes co-breathe { 0%,100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes co-spin { to { transform: translateY(-50%) rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .co-hero::before, .co-hero::after, .co-cta::before, .co-cta::after,
  .co-hero .co-tag, .co-hero h1, .co-hero p, .co-hero .wp-block-buttons,
  .co-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* El borde oro sí se mantiene: es la señal de foco. Lo que se quita es el
     desplazamiento de la tarjeta y el acercamiento de la foto. */
  .co-evcard,
  .co-evcard__media img { transition: none !important; }
  .co-evcard:hover, .co-evcard:focus-within { transform: none !important; }
  .co-evcard:hover .co-evcard__media img,
  .co-evcard:focus-within .co-evcard__media img { transform: none !important; }
}

/* --- Secciones sobre ink --- */
.has-ink-background-color .co-tag,
.has-ink-soft-background-color .co-tag { color: var(--co-gold); }

/* --- Tabla de conectividad --- */
.co-connectivity { border-radius: var(--co-radius); overflow: hidden; box-shadow: var(--co-shadow); border: 1px solid var(--wp--preset--color--gray-line); }
.co-connectivity table { width: 100%; border-collapse: collapse; }
.co-connectivity th, .co-connectivity td { text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid var(--wp--preset--color--gray-line); }
.co-connectivity thead th {
  background: var(--co-ink);
  color: var(--co-gold);
  font-size: .82rem; letter-spacing: .05em; text-transform: uppercase;
}
.co-connectivity tbody tr:last-child td { border-bottom: 0; }
.co-connectivity tbody tr:hover { background: var(--wp--preset--color--cream); }
.co-badge { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 800; }
.co-badge--ok   { background: #FBF1C8; color: #6E5600; }
.co-badge--soon { background: #FDEBC8; color: #8A5A00; }
.co-badge--no   { background: #F0E0E0; color: #8A2A2A; }

/* --- Matriz de conectividad (diseño Codeoscopic, datos desde TablePress) --- */
.co-conx {
  --cx-green: #8A6D12;   /* acento corporativo: oro sobre claro (dots, marca) */
  --cx-green-d: #6E5600; /* oro profundo (hover de etiqueta) */
  --cx-ink: #0E162A;     /* ink corporativo (cabecera de la tabla) */
  --cx-muted: #6B6862;
  --cx-line: #E7E2D0;
  --cx-bg: #FAF8EC;
  --cx-nav: 82px;   /* alto del header sticky del sitio (.co-header) */
  --cx-head: 148px; /* alto de la cabecera de la tabla (para fijar bandas debajo) */
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--cx-ink);
}
/* Ocupar todo el ancho: el wrapper lleva .alignfull (layout WP) + gutter propio. */
.co-conx.alignfull { padding-inline: clamp(16px, 3vw, 56px); }
.co-conx__eyebrow { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.co-conx__brand { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cx-green); }
.co-conx__claim { font-size: 13px; color: #8c99a6; letter-spacing: .04em; }
.co-conx__title { font-size: 34px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.02em; line-height: 1.1; }
.co-conx__intro { margin: 0 0 26px; font-size: 15px; color: var(--cx-muted); max-width: 620px; line-height: 1.5; }

/* Leyenda */
.co-conx__legend { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 14px 2px; font-size: 13px; color: var(--cx-muted); }
.co-conx__legend > div { display: flex; align-items: center; gap: 8px; }
.co-conx__count { margin-left: auto; font-weight: 600; color: var(--cx-ink); }
.co-conx__dot { width: 13px; height: 13px; border-radius: 50%; background: var(--cx-green); display: inline-block; vertical-align: middle; }
.co-conx__dot--off { background: transparent; border: 1.5px solid #d3dade; }

/* Tablas apiladas (una por juego de columnas) */
.co-conx__scroll + .co-conx__scroll { margin-top: 36px; }

/* Tabla */
.co-conx__scroll {
  /* Sin scroll interno: scrollea la página. El sticky se fija al viewport,
     con offset por el nav del sitio (y la barra de admin si estás logueado). */
  overflow: visible; border: 1px solid var(--cx-line);
  border-radius: 10px; background: #fff; box-shadow: 0 6px 24px rgba(22,38,59,.06);
}
.co-conx__scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.co-conx__scroll::-webkit-scrollbar-thumb { background: #c4ccd2; border-radius: 6px; }
.co-conx__scroll::-webkit-scrollbar-track { background: #eef1f3; }
.co-conx table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }

.co-conx thead th.co-conx__corner {
  position: sticky; left: 0; top: var(--cx-nav); z-index: 5; background: var(--cx-ink); color: #fff;
  text-align: left; padding: 0 16px 14px; min-width: 260px; width: 260px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  border-right: 1px solid #3a352a; height: 148px; vertical-align: bottom;
}
.co-conx thead th.co-conx__col {
  position: sticky; top: var(--cx-nav); z-index: 4; background: var(--cx-ink); color: #fff;
  height: 148px; width: 34px; min-width: 34px; padding: 0; vertical-align: bottom;
  border-left: 1px solid #2a2723;
}
.co-conx thead th.co-conx__col span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 11px; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
  margin: 0 auto 12px; line-height: 34px; max-height: 120px; overflow: hidden; display: block;
}

/* Banda de categoría (cuando varias categorías comparten columnas en una tabla). */
.co-conx td.co-conx__cat-band {
  position: sticky; left: 0; top: calc(var(--cx-nav) + var(--cx-head)); z-index: 3;
  background: var(--cx-ink); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 12px 16px;
}
/* Banda de sección (estilo PDF: azul itálica sobre fondo claro). */
.co-conx td.co-conx__section {
  position: sticky; left: 0; top: calc(var(--cx-nav) + var(--cx-head)); z-index: 3;
  background: var(--cx-bg); color: var(--cx-green-d);
  font-size: 12px; font-weight: 700; font-style: italic; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 16px; border-top: 1px solid var(--cx-line); border-bottom: 1px solid var(--cx-line);
}
/* Barra de admin de WordPress (solo logueado): empuja 32px todo el sticky. */
body.admin-bar .co-conx thead th.co-conx__corner,
body.admin-bar .co-conx thead th.co-conx__col { top: calc(var(--cx-nav) + 32px); }
body.admin-bar .co-conx td.co-conx__cat-band,
body.admin-bar .co-conx td.co-conx__section { top: calc(var(--cx-nav) + var(--cx-head) + 32px); }
.co-conx td.co-conx__label {
  position: sticky; left: 0; z-index: 2; background: #fff; font-size: 13px; font-weight: 500;
  padding: 9px 16px; border-right: 1px solid #e4e8eb; border-bottom: 1px solid #eef1f3;
  min-width: 260px; width: 260px;
}
.co-conx td.co-conx__cell {
  text-align: center; border-bottom: 1px solid #eef1f3; border-left: 1px solid #f2f4f6;
  padding: 0; height: 38px; background: #fff;
}
/* Compañía que no aplica a esta categoría (≠ "no disponible"). */
.co-conx td.co-conx__cell--na {
  background: repeating-linear-gradient(135deg, #f6f8fa, #f6f8fa 5px, #eef1f4 5px, #eef1f4 10px);
}
.co-conx tr.co-conx__row:hover td { background: var(--cx-bg); }
.co-conx tr.co-conx__row:hover td.co-conx__label { color: var(--cx-green-d); }

.co-conx__foot { margin: 18px 2px 0; font-size: 12px; color: #9aa5b0; }

/* --- Rejilla de vídeos --- */
.co-videos { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* --- Detalle: separador en oro --- */
.wp-block-separator:not(.is-style-wide) { border-color: var(--co-gold); opacity: .5; }

/* ============================================================= */
/* ===============  REDISEÑO HOME 2026  ======================== */
/* ============================================================= */

/* Contenedor central de las secciones de la home (1200px de contenido). */
.co-wrap { max-width: 1280px; margin-inline: auto; padding-inline: 40px; width: 100%; }

/* --- HERO (Figma 37:7248 + 45:7065) ---
   El diseño pinta un degradado oro→transparente de 932px desde el borde superior
   de la página; el header sticky ocupa los primeros ~68px, así que quedan 864px.
   Va en el contenedor de la home, no en la banda del hero: así el titular y las
   tarjetas son dos patterns independientes y el degradado sigue sin costura por
   detrás de ambos, sea cual sea el largo del texto. */
body.home .wp-block-post-content {
  background-color: var(--wp--preset--color--white);
  background-image: linear-gradient(180deg, rgba(234,198,73,.2) 0%, rgba(217,217,217,0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 864px;
}
.co-lead { position: relative; }
.co-lead .co-wrap { position: relative; padding-top: 120px; padding-bottom: 0; }

/* Titular + entradilla: columna de 708px centrada, texto alineado a la izquierda. */
.co-lead__inner { max-width: 708px; margin-inline: auto; }
.co-lead__inner h1 { max-width: 700px; margin: 0; text-wrap: balance; }
.co-lead__sub {
  margin: 36px 0 0;
  font-size: var(--wp--preset--font-size--large);
  line-height: 42px;
  letter-spacing: -.03em;
  color: var(--co-ink-deep);
  opacity: .7;
}

/* Tres tarjetas, en su propia banda, montadas sobre la cola del degradado.
   El mismo aire arriba y abajo: en el Figma las tarjetas solapan 7px la banda
   navy siguiente (imprecisión, no un solape buscado) y quedaban pegadas. */
.co-hcards .co-wrap { padding-top: 75px; padding-bottom: 75px; }
.co-lead__cards {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  max-width: 1100px;
  margin-inline: auto;
}
.co-hcard {
  flex: 1 1 0;
  min-width: 0;
  /* px 36 / py 32, más los 36px de holgura inferior del grupo interior. */
  padding: 32px 36px 68px;
  background: var(--wp--preset--color--white);
  box-shadow: 0 2px 2px rgba(14,22,42,.1);
}
.co-hcard__icon { margin: 0 0 20px; }
.co-hcard__icon img { display: block; width: 63px; height: 41px; }
/* Doble clase: gana al border-bottom y al width del core/separator. */
.co-hcard__rule.wp-block-separator {
  width: 100%; max-width: none; height: 1px; margin: 0 0 20px;
  border: 0; background: var(--co-ink); opacity: .1;
}
.co-hcard__title { margin: 0 0 20px; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; }
.co-hcard__text { margin: 0; font-size: 15px; line-height: 24px; letter-spacing: -.01em; }

/* --- PRODUCTOS: banda navy con glow (Figma 38:6801) --- */
.co-prods {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--co-ink);
  /* Sin padding lateral: la cinta va a sangre para que las tarjetas entren y
     salgan por los bordes de la pantalla. El título pone su propio margen.
     Mismo aire arriba y abajo: los 207px inferiores del Figma dejaban una
     franja navy vacía bajo las tarjetas. */
  padding: 80px 0;
}
/* Arte de fondo: tres formas difuminadas exportadas del Figma, ancladas al centro
   igual que en el diseño (frame de 1500px). Decorativas: van con aria-hidden. */
.co-prods__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.co-prods__deco img { position: absolute; display: block; max-width: none; }
.co-prods__deco img:nth-child(1) {
  width: 1703px; height: 1703px;
  left: calc(50% - 71.9px); top: -189px;
  margin-left: -851.5px; margin-top: -851.5px;
  transform: rotate(15deg);
}
.co-prods__deco img:nth-child(2) {
  width: 1865px; height: 1865px;
  left: calc(50% - 1369px); top: -1201px;
}
.co-prods__deco img:nth-child(3) {
  width: 1561px; height: 1561px;
  left: calc(50% + 837px); top: -237px;
  margin-left: -780.5px; margin-top: -780.5px;
  transform: rotate(-60deg);
}
.co-prods__title {
  max-width: 741px;
  margin: 0 auto;
  padding-inline: 40px;
  color: var(--wp--preset--color--white);
  font-size: 29px; line-height: 40px; font-weight: 500;
  letter-spacing: -.03em; text-align: center;
}

/* --- Cinta continua de productos ---
   El JS clona las tarjetas y mide el desplazamiento exacto de un ciclo, que deja
   en --co-marquee-shift; así el bucle no tiene costura con cualquier número de
   tarjetas. Sin JS la cinta queda quieta y se puede arrastrar con el dedo. */
.co-prods__deck {
  /* El Figma pone 100px entre el título y las tarjetas; queda despegado. */
  margin-top: 60px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.co-prods__deck::-webkit-scrollbar { display: none; }
.co-prods__track {
  display: flex;
  gap: 40px;
  width: max-content;
  padding-inline: 40px;
}
/* Solo anima cuando el JS ya ha clonado y medido. */
.co-prods__deck.is-marquee {
  overflow-x: hidden;
  /* Desvanecido en los extremos. Va con mask y no con un degradado superpuesto
     porque detrás hay arte de color: un rectángulo navy encima lo taparía. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.co-prods__deck.is-marquee .co-prods__track {
  padding-inline: 0;
  animation: co-marquee var(--co-marquee-duration, 35s) linear infinite;
  will-change: transform;
}
.co-prods__deck.is-marquee:hover .co-prods__track,
.co-prods__deck.is-marquee:focus-within .co-prods__track { animation-play-state: paused; }
@keyframes co-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--co-marquee-shift, 0px)), 0, 0); }
}

.co-pcard {
  flex: 0 0 250px;
  height: 323px;
  overflow: hidden;
  /* El core mete padding a cualquier grupo con fondo (.has-background): lo anulamos,
     el espaciado real lo ponen .co-pcard__head y .co-pcard__shot. */
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 0 52px rgba(14,22,42,.5);
}
.co-pcard__head { padding: 28px 28px 0; }
.co-pcard__logo { margin: 0 0 30px; }
/* El alto va aquí y no en atributos del bloque: core/image no serializa un style
   inline en el img, y el editor marcaría el bloque como contenido no válido.
   Ancho automático para que cada logotipo conserve su propia proporción. */
.co-pcard__logo img { display: block; width: auto; height: 26px; }
.co-pcard__logo--integra img { height: 34px; }
.co-pcard__logo--coverize img { height: 30px; }
.co-pcard__claim {
  margin: 0;
  color: #111;
  font-size: 19px; line-height: 26px; font-weight: 500; letter-spacing: -.02em;
}
.co-pcard__shot {
  flex: 0 0 149px;
  margin: 0;
  padding: 0 28px 28px;
  display: flex;
  align-items: center;
}
.co-pcard__shot img {
  width: 100%; height: 116px;
  object-fit: cover; object-position: top;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(17,17,17,.2);
}

/* --- GRUPO: empresas + aseguradoras (Figma 37:7228) --- */
.co-grupo { background: var(--wp--preset--color--white); }
.co-grupo .co-wrap { padding-top: 193px; padding-bottom: 32px; }
.co-grupo__grid {
  display: flex;
  gap: 40px;
  align-items: stretch;
  max-width: 1100px;
  margin-inline: auto;
}
.co-gcard {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 36px;
  background: var(--wp--preset--color--white);
  box-shadow: 0 2px 2px rgba(14,22,42,.1);
}
.co-gcard__head { padding-bottom: 36px; }
/* La columna «Empresas» va atenuada en el diseño. */
.co-gcard--muted .co-gcard__head { opacity: .58; }
.co-gcard__title { margin: 0 0 10px; font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.co-gcard--wide .co-gcard__title { margin-bottom: 20px; font-size: 32px; line-height: 1.2; }
.co-gcard__rule.wp-block-separator {
  width: 100%; max-width: none; height: 1px; margin: 0 0 10px;
  border: 0; background: var(--co-ink); opacity: .1;
}
.co-gcard--wide .co-gcard__rule.wp-block-separator { margin-bottom: 20px; }
.co-gcard__text { margin: 0; font-size: 15px; line-height: 22px; letter-spacing: -.01em; }
.co-gcard__text + .co-gcard__text { margin-top: 22px; }
.co-gcard__text strong { display: block; font-weight: 600; }
/* Pie de la columna «Empresas»: dos marcas del grupo. */
.co-gcard__brands { display: flex; gap: 8px; justify-content: center; padding-inline: 10px; }
/* Reparten el ancho disponible: a 229px fijos no caben las dos y se apilan. */
.co-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; max-width: 229px; }
.co-brand img { display: block; width: auto; max-width: 100%; }
.co-brand__logo { margin: 0; }
.co-brand__logo img { height: 41px; }
.co-brand__logo--gecose img { height: 49px; }
.co-brand__cap { width: 160px; margin: 0; font-size: 12px; line-height: 22px; letter-spacing: -.01em; }
/* Pie de la columna de aseguradoras: pastilla enlazada. */
.co-gcard__pill { margin: 0; }
.co-gcard__pill img { display: block; width: 298px; height: 135px; }

/* --- CTA «¿Hablamos?» (Figma 62:2148) --- */
.co-hablamos { max-width: 700px; margin-inline: auto; text-align: center; }
.co-hablamos__text {
  margin: 0;
  font-size: 23px; line-height: 36px; letter-spacing: -.03em;
  color: rgba(17,17,17,.7);
}
.co-hablamos__text strong { font-weight: 700; color: #111; }
.co-hablamos__cta { justify-content: center; margin-top: 30px; }
.co-hablamos__cta .wp-block-button__link {
  min-width: 190px;
  padding: 0 10px;
  height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 150px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 0 rgba(34,34,34,.15);
}

/* Banda crema compartida por «proyectos» y el cierre «¿Hablamos?» (Figma 62:2147:
   oro #EAC649 al 10% sobre blanco). */
.co-cream { background: #FDF9ED; }
.co-cream .co-wrap { padding-top: 126px; padding-bottom: 0; }
.co-cream + .co-cream .co-wrap { padding-top: 82px; padding-bottom: 100px; }

/* --- CONFÍAN EN NOSOTROS: banda oro con tira de logos (Figma 41:7041) --- */
.co-clientes {
  position: relative;
  background: #E3B941;
}
/* El título va dentro de .co-wrap para alinear con el resto de secciones: con el
   padding fijo de 166px del frame de 1500 del Figma se descuadra a otros anchos. */
.co-clientes .co-wrap { padding-top: 51px; padding-bottom: 56px; }
.co-clientes__title {
  margin: 0;
  font-size: 30px; line-height: 1.07; font-weight: 600; letter-spacing: -.01em;
  color: var(--co-ink);
}
.co-clientes__band {
  margin-top: 40px;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 38px 56px;
}
/* is-layout-flow añade margin-block-start a los hermanos y en un flex con gap
   duplica la separación. */
.co-clientes__band > * { margin-top: 0; }
.co-clientes__logo { margin: 0; }
/* Normalización por caja, no por alto: las proporciones van de 1:1 a 6,5:1. */
.co-clientes__logo img {
  display: block;
  width: auto; height: auto;
  max-height: 40px; max-width: 150px;
  /* Monocromo blanco como en el diseño: brightness(0) aplana a negro conservando
     el alfa, e invert(1) lo lleva a blanco. Así el logo se guarda en color y el
     blanco lo pone el CSS, sin quemar una segunda copia de cada archivo. */
  filter: brightness(0) invert(1);
}
/* AXA, Zurich y Generali son marcas casi cuadradas: con el mismo alto que las
   alargadas se ven pequeñas, así que crecen un poco. */
.co-clientes__logo--compacto img { max-height: 52px; }

/* --- BLOG / VÍDEOS / WEBINARS: cabecera de sección con badge --- */
.co-sechead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-bottom: 20px;
}
.co-sechead__badge { display: flex; align-items: center; gap: 8px; margin: 0; }
.co-sechead__badge svg { flex: none; }
.co-sechead__badge b { font-size: 19px; line-height: 23px; font-weight: 600; letter-spacing: -.01em; }
.co-sechead__link {
  margin: 0; opacity: .5;
  font-size: 15px; line-height: 24px; font-weight: 600; letter-spacing: -.01em;
}
.co-sechead__link a { color: inherit; text-decoration: none; }
.co-sechead__link a:hover { text-decoration: underline; }

/* --- BLOG: tres tarjetas (Figma 37:7289) --- */
.co-blog { background: var(--wp--preset--color--white); }
.co-blog .co-wrap { padding-top: 74px; padding-bottom: 0; }
/* La rejilla es el post-template del core/query (un <ul>) y cada tarjeta su <li>. */
.co-blog__grid { display: flex; gap: 40px; align-items: stretch; justify-content: center; list-style: none; margin: 0; padding: 0; }
.co-blog__grid > li {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  padding: 0;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--co-gold);
}
/* is-layout-flow añade margin-block-start a los hermanos: dentro de un flex con
   gap eso duplica la separación, y en la rejilla desalinea las tarjetas. */
.co-blog__grid > li,
.co-bcard__body > * { margin-top: 0; }
.co-bcard__photo { margin: 0; }
/* 170px y no los 190 del diseño: allí la foto llevaba encima el badge dorado
   de la maqueta; recortado, a 190 el zoom de object-fit se comía los laterales. */
.co-bcard__photo img { display: block; width: 100%; height: 170px; object-fit: cover; }
.co-bcard__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.co-bcard__cat {
  margin: 0;
  font-size: 11px; line-height: 16px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--wp--preset--color--gold-deep);
}
/* core/post-terms enlaza cada término: hereda el color del rótulo. */
.co-bcard__cat a { color: inherit; text-decoration: none; }
.co-bcard__cat a:hover { text-decoration: underline; }
.co-bcard__title { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; }
.co-bcard__title a { color: inherit; text-decoration: none; }
.co-bcard__title a:hover { text-decoration: underline; }
.co-bcard__date { margin: auto 0 0; font-size: 12px; line-height: 22px; color: var(--co-muted-soft); }

/* --- VÍDEOS + WEBINARS: dos columnas simétricas (Figma 38:6979) --- */
.co-media { background: var(--wp--preset--color--white); }
.co-media .co-wrap { padding-top: 103px; padding-bottom: 156px; }
.co-media__grid { display: flex; gap: 40px; align-items: stretch; }
.co-mcard {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  padding: 0;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--co-gold);
}
/* Padding simétrico: con 0 abajo el rótulo quedaba pegado a la imagen. */
.co-mcard .co-sechead { justify-content: center; margin: 0; padding: 22px 0; }
.co-mcard__photo { margin: 0; }
.co-mcard__photo img { display: block; width: 100%; height: 336px; object-fit: cover; }
.co-mcard__body { padding: 28px 32px 0; }
.co-mcard__title { margin: 0; font-size: 19px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
.co-mcard__meta { margin: 8px 0 0; font-size: 15px; line-height: 24px; color: var(--co-muted); }
.co-mcard__meta span + span::before { content: " · "; }
.co-mcard__foot { margin: auto 0 0; padding: 24px 0; display: flex; justify-content: center; }
.co-mcard__foot .wp-block-button__link {
  min-width: 275px; height: 49px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 150px; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
}

/* --- PROYECTOS: RSC + Next Generation (Figma 62:2152) --- */
.co-proy__grid { display: flex; gap: 40px; align-items: stretch; }
.co-pcard2 {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  padding: 0;
  background: var(--wp--preset--color--white);
  box-shadow: 0 2px 2px rgba(14,22,42,.1);
}
.co-pcard2__photo { margin: 0; }
.co-pcard2__photo img { display: block; width: 100%; height: 180px; object-fit: cover; }
.co-pcard2__body { padding: 36px 32px 0; }
.co-pcard2__logo { margin: 0 0 21px; }
.co-pcard2__logo img { display: block; width: auto; max-width: 100%; }
.co-pcard2__logo--rsc img { height: 74px; }
.co-pcard2__logo--nextgen img { height: 40px; }
.co-pcard2__rule.wp-block-separator {
  width: 100%; max-width: none; height: 1px; margin: 0 0 21px;
  border: 0; background: var(--co-ink); opacity: .1;
}
.co-pcard2__text { margin: 0; font-size: 15px; line-height: 22px; letter-spacing: -.01em; }
.co-pcard2__more { margin: auto 0 0; padding: 24px 32px 32px; }
.co-pcard2__more a {
  font-size: 15px; line-height: 28px; font-weight: 600; letter-spacing: -.01em;
  color: var(--wp--preset--color--gold-deep); text-decoration: none;
}
.co-pcard2__more a:hover { text-decoration: underline; }

/* --- CTA (tarjeta oro) --- */
.co-cta-sec { background: var(--co-sand); }
.co-cta-sec .co-wrap { padding-top: 90px; padding-bottom: 100px; }
.co-cta-card {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(120deg, #eac649, #e3b63f); border-radius: 28px; padding: 72px 56px;
}
.co-cta-card::before {
  content: ""; position: absolute; left: -40px; bottom: -60px; width: 200px; height: 200px;
  border: 2px solid rgba(14,22,42,.12); border-radius: 50%;
}
.co-cta-card > * { position: relative; z-index: 2; }
.co-cta-card h2 { color: var(--co-ink) !important; font-size: clamp(2rem, 3.6vw, 2.875rem); margin-bottom: 16px; }
.co-cta-card__sub { font-size: 18px; color: #3a3526; max-width: 480px; margin: 0 auto 32px; }
.co-cta-card .wp-block-button__link {
  background: var(--co-ink) !important; color: var(--co-sand) !important; padding: 1rem 2.25rem; font-size: 17px;
}
.co-cta-card .wp-block-button__link:hover { background: #000 !important; }

/* --- FOOTER (Figma 37:7174) --- */
.co-footer { background: var(--co-ink-deep) !important; color: rgba(250,248,243,.72) !important; }
.co-footer .co-wrap { padding-top: 60px; padding-bottom: 60px; }
.co-footer__logo { display: inline-block; margin-bottom: 32px; }
.co-footer__logo img { display: block; width: 188px; height: 36px; }
/* Cuatro columnas con los anchos del diseño (1200px de contenido). */
.co-footer .co-footer__grid {
  display: grid; grid-template-columns: 30.6% 17% 24.7% 27.7%; gap: 0;
  padding-bottom: 48px; border-bottom: 1px solid rgba(250,248,243,.1);
}
/* El grupo es is-layout-flow: WP añade margin-block-start a todo hijo que no sea
   el primero, y en grid eso baja las columnas 2-4 respecto a la primera. */
.co-footer .co-footer__grid > * { margin-top: 0; }
.co-footer__col h3 { color: var(--co-sand) !important; font-family: var(--wp--preset--font-family--sans); font-weight: 600; font-size: 15px; letter-spacing: .01em; margin-bottom: 8px; }
/* Bloque de newsletter + redes, alineado al centro como en el diseño. */
.co-footer__news { text-align: center; }
.co-footer__news-title { margin: 0 0 20px; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--co-sand); }
.co-footer__news-cta { margin: 0 0 20px; }
.co-footer__news-cta .wp-block-button__link {
  width: 100%; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 150px; padding: 0 16px;
  font-size: 15px; font-weight: 600; line-height: 1.2;
}
.co-footer__social { list-style: none; display: flex; gap: 20px; justify-content: center; margin: 0; padding: 0; }
.co-footer__social a { display: block; width: 20px; height: 20px; color: rgba(250,248,243,.72); }
.co-footer__social a:hover { color: var(--co-gold); }
.co-footer__social svg { display: block; width: 20px; height: 20px; }
.co-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.co-footer__col a { color: rgba(250,248,243,.72); font-size: 14.5px; text-decoration: none; transition: color .15s ease; }
.co-footer__col a:hover { color: var(--co-gold); }
.co-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 24px; flex-wrap: wrap; font-size: 13.5px; color: rgba(250,248,243,.45);
}

/* --- Responsive home --- */
@media (max-width: 980px) {
  .co-footer .co-footer__grid { grid-template-columns: 1fr 1fr; }
  /* Las tres tarjetas del hero no caben en fila: pasan a columna. */
  .co-lead__cards { flex-direction: column; gap: 24px; max-width: 708px; margin-top: 56px; }
  .co-lead { background-size: 100% 620px; }
}
@media (max-width: 600px) {
  .co-wrap { padding-inline: 22px; }
  .co-lead .co-wrap { padding-top: 64px; }
  .co-lead__sub { line-height: 1.55; margin-top: 24px; }
  .co-hcard { padding: 26px 24px 48px; }
  .co-cta-card { padding: 48px 28px; }
  .co-footer .co-footer__grid { grid-template-columns: 1fr; }

  /* Con el burger dentro, la fila del header no cabe: el pill de idioma se iba a
     una segunda línea y el CTA partía el texto en tres. Se comprime todo y se
     prohíbe el salto. (Debe ir después de las reglas base de .co-lang.) */
  .co-header .co-logo { flex-wrap: nowrap; gap: .4rem; }
  .co-logo img, .co-logo svg { height: 22px; }
  .co-lang { padding-left: .5rem; }
  .co-lang__toggle { padding: .28rem .45rem; font-size: .75rem; }
  .co-header .wp-block-button__link { padding: .5rem .75rem; font-size: .78rem; white-space: nowrap; }
  .co-nav__burger { width: 32px; }

  .co-clientes .co-wrap { padding-top: 40px; padding-bottom: 44px; }
  .co-clientes__band { gap: 26px 34px; margin-top: 30px; }
  .co-clientes__logo img { max-height: 32px; max-width: 118px; }
  .co-clientes__logo--compacto img { max-height: 42px; }
}

/* --- PÁGINA DE EVENTOS (Figma «Eventos» → 1:14224) --- */
/* El fondo de la página y el relleno de la curva salen de la misma variable: la
   curva es una forma que continúa el fondo, y si no coinciden se ve una banda
   del alto de la curva. El Figma usa blanco porque su frame es blanco; aquí el
   fondo del sitio es crema. */
.co-ev { --co-ev-fondo: var(--co-sand); background: var(--co-ev-fondo); }
/* La cabecera va integrada en el hero: transparente y en blanco mientras se ve
   el hero, y con su fondo habitual en cuanto se sale de él. Lo conmuta anim.js
   con un IntersectionObserver; sin JS se queda en el estado sólido, que es el
   legible. */
.co-header.is-sobre-hero {
  background: transparent !important;
  backdrop-filter: none;
  border-bottom-color: transparent !important;
}
.co-header.is-sobre-hero .co-nav__trigger,
.co-header.is-sobre-hero .co-lang__toggle { color: var(--wp--preset--color--white); opacity: .9; }
.co-header.is-sobre-hero .co-nav__trigger:hover,
.co-header.is-sobre-hero .co-nav__trigger[aria-expanded="true"] { opacity: 1; background: rgba(255,255,255,.14); }
.co-header.is-sobre-hero .co-lang__toggle { border-color: rgba(255,255,255,.45); }
.co-header.is-sobre-hero .co-lang::before { background: rgba(255,255,255,.35); }
.co-header.is-sobre-hero .co-logo img { filter: brightness(0) invert(1); }
.co-header.is-sobre-hero .wp-block-button__link {
  background: var(--wp--preset--color--white) !important;
  color: var(--co-ink) !important;
}

/* Hero: banda con el degradado del diseño y la curva blanca encajada abajo.
   La cabecera es sticky y ocupa sitio en el flujo, así que sin el margen negativo
   el degradado empezaría por debajo y quedaba una franja crema arriba. Se sube el
   alto de la cabecera y se compensa con padding para no perder altura útil. */
/* En esta página la cabecera sale del flujo y se superpone al hero, así que el
   hero empieza en y=0 por construcción. Antes se subía con un margen negativo
   igual al alto de la cabecera, pero ese alto depende del texto y del zoom: si
   no cuadraba al píxel asomaba una franja del fondo de la página. */
.wp-site-blocks:has(.co-ev) .co-header {
  position: fixed;
  top: 0; left: 0; right: 0;
}
.co-ev > .co-ev__hero {
  position: relative;
  box-sizing: content-box;
  height: 225px;
  padding-top: var(--co-nav-h);
  /* El color de respaldo es el promedio de la fila superior del degradado
     (#141931), no el navy del tema: con zoom o densidades fraccionarias el
     redondeo puede dejar una raya de sub-píxel en el borde, y así queda
     indistinguible en vez de asomar un navy más oscuro. */
  background: #141931 url('../images/eventos/hero-degradado.jpg') center/cover no-repeat;
}
.co-ev__hero-curva {
  position: absolute; left: 0; right: 0; bottom: -1px;
  display: block; width: 100%; height: 72px;
  color: var(--co-ev-fondo);
}
.co-ev__hero-curva path { fill: currentColor; }

/* Entradilla centrada. El h1 va a 700px como en el diseño. */
.co-ev__intro { text-align: center; }
.co-ev .co-wrap.co-ev__intro { padding-top: 38px; padding-bottom: 0; }
.co-ev__eyebrow {
  margin: 0;
  font-size: 17px; line-height: 20px; font-weight: 600; letter-spacing: -.01em;
  color: var(--co-gold);
}
.co-ev__title {
  max-width: 700px; margin: 24px auto 0;
  font-size: 37px; line-height: 50px; font-weight: 600; letter-spacing: -.01em;
  color: var(--co-ink);
}

.co-ev .co-wrap.co-ev__listas { padding-top: 96px; padding-bottom: 120px; }
.co-ev__sec {
  margin: 0;
  font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -.01em;
  color: #000;
}
.co-ev__proximos { margin-top: 20px; }
.co-ev__pasados { margin-top: 20px; }
/* La separación entre secciones solo cuando la de próximos se muestra: si está
   oculta, su margen dejaba un hueco muerto sobre «Eventos pasados». */
.co-ev__seccion--proximos:has(.co-evcard) + .co-ev__seccion { margin-top: 72px; }

/* EM envuelve cada lista en .em-view-container > .em-list; no aportan nada aquí. */
.co-ev .em-view-container, .co-ev .em-list { display: contents; }
/* Sin próximos eventos no se anuncia la sección: desaparece con su encabezado.
   Encabezado y lista van en un mismo grupo justamente para esto.
   La regla está invertida —oculta por defecto, visible solo si tiene tarjetas—
   porque :has() no se puede anidar dentro de otro :has(), y así tanto esta como
   la del margen de abajo necesitan uno solo. */
.co-ev__seccion--proximos { display: none; }
.co-ev__seccion--proximos:has(.co-evcard) { display: block; }
/* La de pasados sí conserva el aviso: si no hubiera ninguno, la página se quedaría
   sin contenido y en blanco. EM lo deja como texto suelto dentro de .em-list, que
   es display: contents, así que necesita su propia caja. */
.co-ev__pasados:not(:has(.co-evcard)) {
  display: block;
  padding: 22px 24px;
  border: 1px dashed var(--wp--preset--color--gray-line);
  border-radius: 12px;
  font-size: 15px; line-height: 24px; color: var(--co-muted);
}

/* --- Tarjeta de evento --- */
.co-evcard {
  position: relative;
  background: var(--wp--preset--color--white);
  box-shadow: 0 2px 5px rgba(14,22,42,.1);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
/* El borde oro va en un pseudoelemento y no en la propia tarjeta por dos
   razones: un border real cambiaría el tamaño de la caja al aparecer y
   descuadraría la fila, y un box-shadow inset queda por debajo de la imagen,
   que es contenido. Al estar posicionado, el pseudoelemento pinta por encima. */
.co-evcard::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border: 2px solid transparent;
  transition: border-color .25s ease;
}
/* focus-within además de hover: si no, el borde no aparece al llegar tabulando. */
.co-evcard:hover,
.co-evcard:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -12px rgba(14,22,42,.28);
}
.co-evcard:hover::after,
.co-evcard:focus-within::after { border-color: var(--co-gold); }

.co-evcard__media { display: block; margin: 0; overflow: hidden; }
/* Acercamiento leve de la foto, recortado por el propio contenedor. */
.co-evcard__media img { transition: transform .45s ease; }
.co-evcard:hover .co-evcard__media img,
.co-evcard:focus-within .co-evcard__media img { transform: scale(1.05); }
.co-evcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.co-evcard__sinfoto {
  display: block; width: 100%; height: 100%;
  background: var(--co-ink) linear-gradient(135deg, rgba(234,198,73,.35), rgba(14,22,42,0));
}
.co-evcard__body { padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.co-evcard__meta {
  margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px;
  font-size: 13px; line-height: 20px; letter-spacing: -.01em; color: var(--co-ink);
}
.co-evcard__dato { display: inline-flex; align-items: center; gap: 4px; }
.co-evcard__ico { flex: none; width: 14px; height: 14px; opacity: .5; }
.co-evcard__title {
  margin: 0;
  font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em;
  color: var(--co-ink);
}
/* Sin subrayado al pasar por encima: la señal de que la tarjeta responde es el
   borde oro, que abarca toda la caja. */
.co-evcard__title a { color: inherit; text-decoration: none; }
/* Enlace estirado: el único enlace de la tarjeta cubre toda la caja, así que se
   puede pulsar en cualquier punto. Evita repetir el enlace en la imagen, que
   duplicaría destinos para el teclado y ensuciaría el nombre accesible. */
.co-evcard__title a::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
}

/* Próximos: tarjeta ancha, imagen a la mitad y meta abajo. */
.co-ev__proximos .co-evcard {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 256px;
}
.co-ev__proximos .co-evcard + .co-evcard { margin-top: 40px; }
.co-ev__proximos .co-evcard__body { justify-content: space-between; }
.co-ev__proximos .co-evcard__title { font-size: 25px; line-height: 33px; order: -1; }

/* Pasados: rejilla de tres, imagen arriba. */
/* Sin align-items la rejilla estira los hijos, así que todas las tarjetas de una
   misma fila acaban con el mismo alto aunque el titular ocupe más líneas. El
   Figma hace lo mismo: su primera fila mide 232 y la segunda 256, iguales dentro
   de cada fila. */
.co-ev__pasados {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.co-ev__pasados .co-evcard__media { height: 100px; }

@media (max-width: 980px) {
  .co-ev__pasados { grid-template-columns: repeat(2, 1fr); }
  .co-ev__title { font-size: 30px; line-height: 40px; }
}
@media (max-width: 600px) {
  :root { --co-nav-h: 75px; }
  .co-ev__hero { height: 160px; }
  .co-ev__hero-curva { height: 44px; }
  .co-ev .co-wrap.co-ev__listas { padding-top: 56px; padding-bottom: 64px; }
  .co-ev__title { font-size: 25px; line-height: 34px; margin-top: 18px; }
  .co-ev__pasados { grid-template-columns: 1fr; gap: 24px; }
  .co-ev__proximos .co-evcard { grid-template-columns: 1fr; }
  .co-ev__proximos .co-evcard__media { height: 180px; }
  .co-ev__proximos .co-evcard__title { font-size: 21px; line-height: 29px; }
  .co-evcard__body { padding: 22px; }
}

/* --- FICHA DE EVENTO (Figma «Detalle evento» → 1:14489) --- */
.co-evd { --co-evd-fondo: var(--co-sand); background: var(--co-evd-fondo); }
/* Igual que en el listado: la cabecera sale del flujo y se superpone al hero. */
.wp-site-blocks:has(.co-evd) .co-header { position: fixed; top: 0; left: 0; right: 0; }
/* El hero es la imagen destacada con su propio degradado de overlay, más la
   curva encajada abajo. Se usa core/post-featured-image y no core/cover porque
   el primero es un bloque dinámico: su marcado lo genera el servidor y no
   depende de que el HTML escrito a mano coincida con lo que guardaría el editor. */
/* El alto no puede depender de la imagen: core/post-featured-image no pinta nada
   cuando el evento no tiene destacada, el hero se quedaba a 0 y el titular
   desaparecía bajo la cabecera, que aquí va en fixed. Con min-height y un fondo
   de reserva (el mismo degradado del listado) la página no cambia de estructura.
   Cuando sí hay imagen, la tapa por completo. */
.co-evd > .co-evd__hero {
  position: relative;
  min-height: 400px;
  background: #141931 url('../images/eventos/hero-degradado.jpg') center/cover no-repeat;
}
.co-evd__foto { margin: 0; }
.co-evd__foto img { display: block; width: 100%; height: 400px; object-fit: cover; }
.co-evd__curva {
  position: absolute; left: 0; right: 0; bottom: -1px;
  display: block; width: 100%; height: 72px;
  color: var(--co-evd-fondo);
}
.co-evd__curva path { fill: currentColor; }

/* Columna de 700px como en el diseño, más el aire lateral. */
.co-evd__cuerpo { max-width: 780px; margin-inline: auto; padding: 20px 40px 120px; }
/* El diseño encadena los bloques con 40px. Los del formato de EM son hijos de
   .entry-content, no del grupo, así que hay que apuntar a los dos niveles. */
.co-evd__cuerpo > * + *,
.co-evd__bloques > * + * { margin-top: 40px; }
.co-evd .entry-content { margin-top: 40px; }
.co-evd .entry-content > :first-child { margin-top: 0; }
/* Volver al listado. Va antes del titular y no cuenta para la separación de 40px
   entre bloques, así que lleva la suya. */
.co-evd__volver {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 20px;
  font-size: 15px; line-height: 22px; font-weight: 600;
  color: var(--co-muted); text-decoration: none;
  transition: color .15s ease;
}
.co-evd__volver svg { width: 18px; height: 18px; flex: none; transition: transform .15s ease; }
.co-evd__volver:hover { color: var(--co-ink); }
.co-evd__volver:hover svg { transform: translateX(-2px); }

.co-evd__title {
  margin: 0;
  font-size: 37px; line-height: 52px; font-weight: 600; letter-spacing: -.01em;
  color: var(--co-ink);
}

/* Fecha / Hora / Lugar */
.co-evd__meta { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.co-evd__dato { display: flex; flex-direction: column; }
.co-evd__label {
  font-size: 17px; line-height: 28px; font-weight: 700;
  color: var(--co-ink);
}
.co-evd__valor { font-size: 17px; line-height: 28px; color: var(--co-ink); }

/* Botón de inscripción: pill oro a todo el ancho de la columna. Sin margin-top
   propio, igual que el separador: lo pone la regla de separación de bloques. */
.co-evd__cta { margin-inline: 0; margin-bottom: 0; }
.co-evd__boton {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 24px;
  border-radius: 150px;
  background: var(--co-gold);
  color: var(--co-ink);
  font-size: 15px; line-height: 18px; font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.co-evd__boton:hover { background: var(--co-gold-d); transform: translateY(-2px); }

/* Sin margin-top propio: lo pone la regla de separación de bloques. Un `margin: 0`
   aquí la pisaba y el separador quedaba pegado a la meta. */
.co-evd__regla { height: 1px; margin-inline: 0; margin-bottom: 0; border: 0; background: var(--co-gold); }

.co-evd__h2 {
  margin: 0 0 20px;
  font-size: 25px; line-height: 28px; font-weight: 600; letter-spacing: -.01em;
  color: #000;
}
.co-evd__desc p { margin: 0 0 20px; font-size: 17px; line-height: 28px; color: var(--co-ink); }
.co-evd__desc p:last-child { margin-bottom: 0; }

.co-evd__bloque > .co-evd__label { display: block; margin: 0 0 8px; }

/* Añadir al calendario */
.co-evd__cals { margin: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.co-evd__cal {
  flex: 1 1 180px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 20px;
  border: 1px solid var(--wp--preset--color--gray-line);
  border-radius: 150px;
  background: var(--wp--preset--color--white);
  color: var(--co-ink);
  font-size: 15px; line-height: 18px; font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.co-evd__cal:hover { border-color: var(--co-gold); box-shadow: 0 6px 16px -8px rgba(14,22,42,.25); }
.co-evd__cal img { display: block; width: 20px; height: 20px; }

/* Categorías y tags. EM los pinta distinto: las categorías en un <ul>, que sin
   tocar se apila y va sangrado, y los tags como enlaces sueltos separados por
   comas. La pastilla se aplica a cada enlace, y el font-size: 0 del contenedor
   esconde esas comas. */
.co-evd__pills { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0; }
.co-evd__pills ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.co-evd__pills li { margin: 0; }
.co-evd__pill {
  display: inline-flex; align-items: center;
  min-height: 34px; padding: 8px 16px;
  border-radius: 20px;
  background: rgba(234,198,73,.2);
  color: var(--co-ink);
  font-size: 15px; line-height: 18px; font-weight: 600;
}
/* Las comas que mete EM entre términos estorban con las pastillas. */
.co-evd__pills { gap: 8px; }
.co-evd__pills br { display: none; }

@media (max-width: 600px) {
  .co-evd > .co-evd__hero { min-height: 260px; }
  .co-evd__curva { height: 44px; }
  .co-evd__cuerpo { padding: 16px 22px 64px; }
  .co-evd__cuerpo > * + * { margin-top: 28px; }
  .co-evd__title { font-size: 25px; line-height: 34px; }
  .co-evd__h2 { font-size: 21px; line-height: 26px; }
  .co-evd__cal { flex: 1 1 100%; }
}

/* Formulario de inscripción de Events Manager. El diseño no lo cubre —solo llega
   hasta el botón—, pero al quitar la capa «pixelbones» del plugin se quedó sin
   estilos, así que aquí va lo mínimo para que use la tipografía y los colores del
   tema. El contenedor es .em-booking-form; .em-booking no existe como clase. */
.co-evd .em-booking-form { max-width: 100%; }
.co-evd .em-booking-section {
  padding: 24px;
  border: 1px solid var(--wp--preset--color--gray-line);
  border-radius: 12px;
  background: var(--wp--preset--color--white);
}
.co-evd .em-booking-section + .em-booking-section { margin-top: 16px; }
.co-evd .em-booking-section-title {
  margin: 0 0 16px;
  font-size: 19px; line-height: 26px; font-weight: 600; color: var(--co-ink);
}
.co-evd .em-booking-form p { margin: 0 0 16px; }
.co-evd .em-booking-form label {
  display: block; margin-bottom: 6px;
  font-size: 15px; line-height: 22px; font-weight: 600; color: var(--co-ink);
}
.co-evd .em-booking-form input[type="text"],
.co-evd .em-booking-form input[type="email"],
.co-evd .em-booking-form input[type="tel"],
.co-evd .em-booking-form input[type="number"],
.co-evd .em-booking-form select,
.co-evd .em-booking-form textarea {
  width: 100%; max-width: 420px; box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--wp--preset--color--gray-line);
  border-radius: 10px;
  background: var(--wp--preset--color--white);
  font: inherit; font-size: 15px; color: var(--co-ink);
}
.co-evd .em-booking-form textarea { min-height: 110px; resize: vertical; }
.co-evd .em-booking-form input:focus,
.co-evd .em-booking-form select:focus,
.co-evd .em-booking-form textarea:focus {
  outline: 2px solid var(--co-gold); outline-offset: 1px; border-color: var(--co-gold);
}
/* Las casillas no deben estirarse ni llevar la etiqueta en bloque. */
.co-evd .em-booking-form input[type="checkbox"],
.co-evd .em-booking-form input[type="radio"] { width: auto; max-width: none; }
.co-evd .em-booking-form input[type="checkbox"] + label,
.co-evd .em-booking-form label:has(input[type="checkbox"]) { display: inline; font-weight: 400; }
.co-evd .em-booking-form input[type="submit"],
.co-evd .em-booking-form button[type="submit"] {
  display: block; width: 100%; max-width: none;
  min-height: 48px; padding: 12px 24px;
  border: 0; border-radius: 150px;
  background: var(--co-gold); color: var(--co-ink);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease;
}
.co-evd .em-booking-form input[type="submit"]:hover,
.co-evd .em-booking-form button[type="submit"]:hover { background: var(--co-gold-d); }

/* Modal de inscripción. El <dialog> lo crea anim.js moviendo la sección de
   reservas dentro; en el HTML no existe, así que sin JS la sección se queda en la
   página y sigue siendo alcanzable. */
.co-evd__modal {
  width: min(640px, calc(100vw - 32px));
  max-height: min(86vh, 860px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--wp--preset--color--white);
  box-shadow: 0 32px 64px -24px rgba(14,22,42,.4);
  overflow: auto;
  overscroll-behavior: contain;
}
.co-evd__modal::backdrop { background: rgba(10,25,35,.55); }
/* Dentro del modal la sección no necesita su propia separación ni tarjeta. */
.co-evd__modal .co-evd__reservas { margin: 0; padding: 28px 32px 32px; }
.co-evd__modal .co-evd__h2 { margin: 0 0 20px; padding-right: 32px; }
/* El formulario tiene que caber sin scroll, así que dentro del modal se quitan
   las tarjetas de cada sección: solo en padding gastaban 144px de los 931 que
   medía el contenido, contra 774 disponibles. */
.co-evd__modal .em-booking-section {
  padding: 0; border: 0; border-radius: 0; background: none;
}
.co-evd__modal .em-booking-section + .em-booking-section { margin-top: 18px; }
.co-evd__modal .em-booking-section-title { margin: 0 0 12px; font-size: 17px; line-height: 24px; }
/* La cabecera de la sección de plazas se deja vacía a propósito (ver
   em-setup.php); sin esto quedaría su margen suelto. */
.co-evd__modal .em-booking-section-title:empty { display: none; }
.co-evd__modal .em-booking-form p { margin: 0 0 12px; }
.co-evd__modal .em-booking-form label { margin-bottom: 4px; }
.co-evd__modal .em-booking-form input[type="text"],
.co-evd__modal .em-booking-form input[type="email"],
.co-evd__modal .em-booking-form input[type="tel"],
.co-evd__modal .em-booking-form input[type="number"],
.co-evd__modal .em-booking-form select,
.co-evd__modal .em-booking-form textarea { padding: 10px 12px; max-width: none; }
.co-evd__modal .em-booking-form textarea { min-height: 76px; }
.co-evd__modal-cerrar {
  position: sticky; top: 0; z-index: 1;
  float: right;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 12px 12px 0 0;
  border: 0; border-radius: 999px;
  background: var(--wp--preset--color--cream);
  color: var(--co-ink);
  font-size: 24px; line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease;
}
.co-evd__modal-cerrar:hover { background: var(--co-gold); }
/* showModal() enfoca el primer elemento del diálogo, que es este botón. El anillo
   por defecto del navegador es azul y canta sobre el crema; se sustituye por uno
   navy, que mantiene el contraste. */
.co-evd__modal-cerrar:focus-visible { outline: 2px solid var(--co-ink); outline-offset: 2px; }

@media (max-width: 600px) {
  .co-evd__modal { width: calc(100vw - 20px); max-height: 92vh; border-radius: 12px; }
  .co-evd__modal .co-evd__reservas { padding: 20px; }
}

/* =========================================================================
   BLOG: listado y archivos de categoría (Figma «Blog» → 37:6838)
   ========================================================================= */

/* Fondo blanco, como el marco del diseño: la arena del tema haría que las
   tarjetas blancas de la rejilla no se distinguieran del fondo. */
.co-bl { background: var(--wp--preset--color--white); }

/* --- Entradilla centrada (700px en el diseño) --- */
.co-bl__intro { text-align: center; }
.co-bl .co-wrap.co-bl__intro { padding-top: 110px; padding-bottom: 0; }
.co-bl__eyebrow {
  margin: 0;
  font-size: 13px; line-height: 15px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--co-gold);
}
.co-bl__title {
  max-width: 700px; margin: 16px auto 0;
  font-size: 44px; line-height: 56px; font-weight: 600; letter-spacing: -.01em;
  color: var(--co-ink);
}

.co-bl .co-wrap.co-bl__destacados { padding-top: 72px; padding-bottom: 0; }
.co-bl .co-wrap.co-bl__listado { padding-top: 72px; padding-bottom: 120px; }

/* --- Destacados: pieza principal + columna de titulares --- */
/* Las dos columnas miden lo mismo: la de titulares reparte su alto en cuatro
   filas iguales para que la última acabe a la altura de la pieza principal. */
.co-bldest { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
/* Enlace estirado: el titular es el único enlace de la tarjeta y su pseudoelemento
   cubre toda la caja, así que se puede pulsar en cualquier punto (igual que en las
   tarjetas de evento). */
.co-bldest__main,
.co-bldest__fila { position: relative; }
.co-bldest__title a { color: inherit; text-decoration: none; }
.co-bldest__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.co-bldest__main {
  display: flex; flex-direction: column;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--co-gold);
  transition: box-shadow .25s ease, transform .25s ease;
}
.co-bldest__main:hover,
.co-bldest__main:focus-within { transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(14,22,42,.28); }
.co-bldest__media { display: block; overflow: hidden; background: var(--co-ink-deep); }
.co-bldest__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.co-bldest__sinfoto {
  display: block; width: 100%; height: 100%;
  background: var(--co-ink) linear-gradient(135deg, rgba(234,198,73,.35), rgba(14,22,42,0));
}
/* El alto de la fila lo manda la columna que más ocupe (normalmente los cuatro
   titulares). Lo que sobra se lo queda la foto, que crece: si lo hiciera el
   cuerpo, la tarjeta se quedaba con un hueco blanco bajo la fecha. */
.co-bldest__main > .co-bldest__media { flex: 1 1 auto; min-height: 340px; }
.co-bldest__body { display: flex; flex-direction: column; gap: 10px; }
.co-bldest__main .co-bldest__body { padding: 24px 28px 28px; }
.co-bldest__cat {
  margin: 0;
  font-size: 11px; line-height: 16px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--wp--preset--color--gold-deep);
}
.co-bldest__main .co-bldest__title {
  margin: 0;
  font-size: 25px; line-height: 33px; font-weight: 600; letter-spacing: -.01em;
}
.co-bldest__date { margin: 0; font-size: 12px; line-height: 22px; color: var(--co-muted-soft); }

/* La columna de titulares mide lo mismo que la pieza principal: cuatro filas
   iguales repartidas con el mismo hueco que la rejilla. */
.co-bldest__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 24px; }
.co-bldest__fila {
  display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 24px;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--co-gold);
  transition: box-shadow .25s ease, transform .25s ease;
}
.co-bldest__fila:hover,
.co-bldest__fila:focus-within { transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(14,22,42,.28); }
.co-bldest__fila > .co-bldest__media { height: 100%; }
.co-bldest__fila .co-bldest__body { padding: 16px 24px 16px 0; gap: 6px; }
.co-bldest__fila .co-bldest__title {
  margin: 0;
  font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em;
}

/* --- Pestañas de categorías --- */
.co-bltabs { border-bottom: 1px solid rgba(14,22,42,.12); padding-bottom: 20px; }
.co-bltabs__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 32px;
}
.co-bltabs__item {
  font-size: 15px; line-height: 24px; font-weight: 600; letter-spacing: -.01em;
  color: var(--co-ink);
}
/* Inactivas en gris, como en el diseño; la activa recupera el navy. */
.co-bltabs__item a { color: rgba(14,22,42,.45); text-decoration: none; transition: color .15s ease; }
.co-bltabs__item a:hover { color: var(--co-ink); }
.co-bltabs__item.is-current a { color: var(--co-ink); }
.co-bltabs__item--todas a { display: inline-flex; align-items: center; gap: 8px; }
.co-bltabs__item--todas b { font-size: 19px; line-height: 23px; font-weight: 600; }
.co-bltabs__ico { flex: none; }

/* --- Rejilla de entradas: la misma tarjeta que en la home (.co-bcard) --- */
.co-bl__query { margin-top: 40px; }
.co-bl__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  list-style: none; margin: 0; padding: 0;
}
.co-bl__grid > li {
  display: flex; flex-direction: column; margin-top: 0;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--co-gold);
}

/* --- Paginación: números a la derecha, como en el diseño --- */
.co-bl__pag { margin-top: 60px; font-size: 15px; font-weight: 600; }
.co-bl__pag .wp-block-query-pagination-numbers { display: flex; gap: 18px; }
.co-bl__pag a { color: rgba(14,22,42,.45); text-decoration: none; }
.co-bl__pag a:hover { color: var(--co-ink); }
.co-bl__pag .page-numbers.current { color: var(--co-ink); font-weight: 700; }

@media (max-width: 980px) {
  .co-bl .co-wrap.co-bl__intro { padding-top: 72px; }
  .co-bl__title { font-size: 32px; line-height: 42px; }
  .co-bldest { grid-template-columns: 1fr; }
  .co-bldest__main > .co-bldest__media { height: 260px; }
  .co-bl__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .co-bl__title { font-size: 25px; line-height: 34px; }
  .co-bl .co-wrap.co-bl__destacados,
  .co-bl .co-wrap.co-bl__listado { padding-top: 48px; }
  .co-bl .co-wrap.co-bl__listado { padding-bottom: 64px; }
  .co-bldest__fila { grid-template-columns: 120px 1fr; gap: 16px; }
  .co-bldest__fila .co-bldest__body { padding: 14px 16px 14px 0; }
  .co-bl__grid { grid-template-columns: 1fr; gap: 24px; }
  /* Con el listado a una columna las pestañas repartidas quedaban desperdigadas:
     mejor pegadas a la izquierda y con scroll horizontal si no caben. */
  .co-bltabs__list { justify-content: flex-start; }
}