/* ============================================================
   FIRST CLEVELAND CLINIC LATIN AMERICAN CONGRESS OF CARDIOLOGY
   Guayaquil, Ecuador — 14–16.07.2027
   Hoja de estilo única · mobile-first · sin dependencias
   ------------------------------------------------------------
   1. Tokens          5. Hero
   2. Reset / base    6. Secciones
   3. Utilidades      7. Formularios
   4. Header / nav    8. Footer / responsive
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Color */
  --warm-white:  #FBF8F3;
  --paper:       #FFFFFF;
  --sand:        #F3EEE5;
  --navy:        #0A2540;
  --navy-deep:   #061A2E;
  --navy-soft:   #1D3B5C;
  --green:       #046A38;
  --green-deep:  #03502B;
  --gold:        #B08D4D;
  --champagne:   #E3D4B4;
  --ink:         #16202B;
  --muted:       #5B6672;
  --rule:        #E4DED2;
  --rule-strong: #CFC6B5;

  /* Tipografía */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:   clamp(2.1rem, 6.4vw, 4.2rem);
  --fs-h2:     clamp(1.65rem, 4.2vw, 2.75rem);
  --fs-h3:     clamp(1.15rem, 2.4vw, 1.4rem);
  --fs-body:   clamp(1rem, 0.97rem + 0.2vw, 1.075rem);
  --fs-small:  0.875rem;
  --fs-micro:  0.75rem;

  /* Espaciado y medidas */
  --space-section: clamp(3.5rem, 9vw, 7.5rem);
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --maxw: 1180px;
  --maxw-narrow: 780px;
  --radius: 2px;
  --header-h: 64px;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--warm-white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; margin: 0; color: var(--navy); }
p { margin: 0 0 1rem; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem; text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; color: #fff; }

/* Contenido sólo para lectores de pantalla (el <h1> del hero vive dentro de la pieza gráfica) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 3. Utilidades ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--maxw-narrow); }

.eyebrow {
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--green);
  margin: 0 0 .85rem;
}
.subhead {
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 1.25rem; padding-bottom: .6rem; border-bottom: 1px solid var(--rule);
}
.note { font-size: var(--fs-small); color: var(--muted); margin: .35rem 0 0; }
.cms-placeholder { color: #6E675A; font-style: italic; }
.notice {
  background: var(--sand); border-left: 3px solid var(--gold);
  padding: .9rem 1.1rem; font-size: var(--fs-small); color: var(--ink); margin: 0 0 1.75rem;
}
.disclaimer {
  display: inline-block; font-size: var(--fs-small); color: var(--navy);
  background: var(--champagne); padding: .5rem .9rem; margin: 0 0 1.75rem;
  border-radius: var(--radius);
}

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: .8rem 1.7rem;
  font-family: var(--sans); font-size: .875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-soft); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--rule-strong); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); background: rgba(10,37,64,.04); }
.btn-gold { background: var(--champagne); color: var(--navy); }   /* contraste AA sobre navy */
.btn-gold:hover { background: #F0E4C9; color: var(--navy); }
.btn-sm { min-height: 40px; padding: .5rem 1.05rem; font-size: .75rem; }
.btn-block { width: 100%; }
.btn.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- 4. Header / navegación ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,248,243,.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h);
}
/* El logo de Cleveland Clinic ocupa el lugar del antiguo .brand-line-1 de texto.
   El <a> conserva su aria-label con el nombre completo, por eso el img va con
   alt="" (si no, el lector de pantalla lo anunciaría dos veces). */
.brand { display: flex; flex-direction: column; gap: .28rem; text-decoration: none; line-height: 1.15; }
.brand-logo { display: block; }
.brand-logo img { display: block; width: auto; max-height: 24px; }
.brand-line-2 { display: none; font-size: .58rem; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); }

.site-nav { display: none; }
.nav-list { display: flex; gap: clamp(.9rem, 2vw, 1.9rem); }
.nav-list a {
  text-decoration: none; font-size: .8rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--navy); padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.nav-list a:hover, .nav-list a.is-current { border-bottom-color: var(--green); color: var(--green); }

.header-actions { display: flex; align-items: center; gap: .65rem; }
.lang-switch { display: flex; align-items: center; gap: .3rem; }
.lang-btn {
  background: none; border: 0; padding: .3rem .2rem; cursor: pointer;
  font-size: .75rem; font-weight: 600; letter-spacing: .09em; color: var(--muted);
}
.lang-btn.is-active { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.lang-sep { color: var(--rule-strong); font-size: .75rem; }
.header-cta { display: none; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 1px solid var(--rule-strong);
  border-radius: var(--radius); cursor: pointer;
}
.nav-toggle-bars { display: block; width: 18px; }
.nav-toggle-bars i { display: block; height: 1.5px; background: var(--navy); margin: 4px 0; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Panel mobile */
.site-nav.is-open {
  display: block; position: fixed; z-index: 120;
  top: 0; right: 0; bottom: 0; width: min(84vw, 340px);
  background: var(--paper); border-left: 1px solid var(--rule);
  padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
  overflow-y: auto;
}
.site-nav.is-open .nav-list { flex-direction: column; gap: 0; }
.site-nav.is-open .nav-list a {
  display: block; padding: 1rem 0; font-size: 1rem; letter-spacing: .04em;
  border-bottom: 1px solid var(--rule);
}
.nav-backdrop { position: fixed; inset: 0; background: rgba(6,26,46,.35); z-index: 110; }
body.nav-open { overflow: hidden; }

/* CTA fijo mobile */
.mobile-cta {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: 12px; z-index: 90;
  box-shadow: 0 6px 22px rgba(6,26,46,.22);
}

/* ---------- 5. Hero (banner) ---------- */
.hero { padding-top: 0; }   /* la pieza gráfica arranca a ras del header */

/* Fila de logos oficiales (pie).
   Los logos reales van de 2.2:1 a 6.3:1, así que se limitan por ALTO y no por
   ancho: con max-width todos medirían lo mismo de largo y el de Cleveland
   Clinic, mucho más apaisado, quedaría ópticamente diminuto. */
.host-logos {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 4vw, 2.5rem); align-items: center; justify-items: center;
  padding-bottom: clamp(1.75rem, 5vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
}
.host-logos picture { display: block; }
.host-logos img { display: block; width: auto; max-width: 100%; max-height: 44px; }

/* Banner a sangre completa: pieza gráfica oficial, sin recorte ni velo encima.
   El título va compuesto dentro de la imagen, por eso no hay texto superpuesto. */
.hero-banner { background: var(--paper); }
.hero-banner picture { display: block; }
.hero-banner-img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
/* Móvil: encuadre hacia el bloque de título para que siga siendo legible */
@media (max-width: 699px) {
  .hero-banner-img { aspect-ratio: 1 / 1; object-position: 10% center; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .hero-banner-img { aspect-ratio: 5 / 4; object-position: 16% center; }
}

/* Datos esenciales y CTAs, ahora bajo la pieza gráfica */
.hero-meta { padding: clamp(1.75rem, 5vw, 2.75rem) 0 clamp(2rem, 5vw, 3rem); }

/* Titular. El eslogan de marca salió de la pieza gráfica y aquí es texto vivo,
   traducible y seleccionable; antes el texto mayor de la zona era una cita. */
.hero-lede {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  line-height: 1.22;
  color: var(--navy);
  text-wrap: balance;
  /* 34rem partía el titular en dos líneas (+46 px). Medido: 39rem en ES y 38rem
     en EN al tamaño máximo del clamp, así que 40rem lo deja en una sola. */
  max-width: 40rem;
  margin: .9rem 0 0;
}

/* Banda de datos + botones */
.hero-band {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  align-items: end;
}

.hero-figures {
  display: grid;
  gap: 1.1rem 2.25rem;
  grid-template-columns: 1fr;
  margin: 0;
}
.hero-figures dt {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .3rem;
}
.hero-figures dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--navy);
}
.hero-figures dd small {
  display: block;
  margin-top: .2rem;
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--muted);
}

@media (min-width: 520px) {
  .hero-figures { grid-template-columns: repeat(auto-fit, minmax(0, max-content)); justify-content: start; }
}
@media (min-width: 860px) {
  .hero-band { grid-template-columns: 1fr auto; }
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-actions .btn { flex: 1 1 auto; min-width: 190px; }   /* en móvil llenan la fila */
@media (min-width: 860px) {
  .hero-actions .btn { flex: 0 0 auto; }                   /* en escritorio, al ancho de su contenido */
}

/* Franja de cifras */
.strip { background: var(--navy); color: #fff; }
.strip-figures {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  padding-block: 1.15rem;
  margin: 0;
  list-style: none;
}
.strip-figures li {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  font-size: .92rem;
  letter-spacing: .01em;
}
.strip-figures b {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--champagne);
  font-variant-numeric: tabular-nums;
}

/* ---------- 6. Secciones ---------- */
.section { padding: var(--space-section) 0; }
.section-alt { background: var(--sand); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head h2 { font-size: var(--fs-h2); text-wrap: balance; }
.section-lead { margin-top: 1rem; color: var(--muted); max-width: 40rem; }
.subsection { margin-top: clamp(2.5rem, 6vw, 4rem); }

.prose { max-width: 40rem; }
.prose p { font-size: clamp(1.05rem, 2.4vw, 1.2rem); line-height: 1.72; color: #2A343F; }

.key-list { display: grid; gap: 0; max-width: 46rem; }
.key-list li {
  padding: .85rem 0 .85rem 1.5rem; border-bottom: 1px solid var(--rule);
  position: relative; font-size: 1rem;
}
.key-list li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: 8px; height: 1px; background: var(--gold); }

/* #acerca: dos columnas en escritorio (intro a la izquierda, áreas a la derecha).
   El .section-head queda a todo el ancho. Reglas scopeadas a .about-grid /
   .about-areas para no tocar .container ni .subsection, que usan otras secciones. */
.about-grid > .section-head,
.about-grid > .about-areas { grid-column: 1 / -1; }

.about-photo { margin: 0; }
/* El collage entregado es 1:1 con fondo transparente y sus propias sombras.
   Nada de 4/3 + cover: recortaba la rueda por arriba y el edificio por abajo.
   Tampoco border-radius: las esquinas ya vienen dibujadas en la pieza. */
.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 993;
  object-fit: contain;
}
@media (min-width: 960px) {
  .about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  /* la foto arranca a la altura del primer párrafo, no del título */
  .about-photo { align-self: start; }
  /* las áreas ya no van al lado: recuperan su separación vertical */
  .about-grid .about-areas { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
}

/* Áreas temáticas como chips. El borde izquierdo dorado sustituye al número
   01–08, que competía con el conteo 01–05 de la franja del hero. */
.areas {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.area {
  display: block;
  padding: .6rem .8rem;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--gold);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.35;
  color: var(--ink);
  background: #fff;
}

@media (min-width: 600px) and (max-width: 959px) {
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 8 chips en 4 columnas = 2 filas. Va aquí y no en el @media de .about-grid de
   arriba: con la misma especificidad gana el último, y la regla base .areas
   (1 columna) se declara entre medias. */
@media (min-width: 960px) {
  .areas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Anfitriones */
.hosts { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.host-card { background: var(--warm-white); padding: clamp(1.5rem, 4vw, 2rem); }
.host-card picture { display: block; }
/* max-width ademas del alto: el lockup de Cleveland Clinic es 6.3:1 y sin tope
   se comia el ancho de la tarjeta, dominando ópticamente sobre los demas. */
.host-card img { display: block; width: auto; max-width: min(100%, 210px); max-height: 58px; margin-bottom: 1.25rem; }
.host-card h3 { font-size: var(--fs-h3); margin-bottom: .5rem; }
.host-card p { font-size: var(--fs-small); margin: 0; }

.people { display: grid; gap: clamp(1.75rem, 5vw, 2.5rem); }
.person { }
/* Retratos oficiales: PNG/WebP cuadrados con marco y degradado ya incorporados,
   fondo transparente fuera de las esquinas redondeadas -> sin recorte ni fondo propio. */
.person picture { display: block; }
.portrait {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: transparent; margin-bottom: 1.1rem;
}
.person h4 { font-size: 1.2rem; margin-bottom: .3rem; }
.person-role { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin: 0 0 .3rem; }
.person-affil { font-size: var(--fs-small); color: var(--muted); margin: 0; }
.person-logo { display: block; width: auto; max-width: 100%; max-height: 32px; margin-top: 1rem; opacity: .95; }

/* --- Destacado: una sola persona en pieza gráfica a lo ancho ---
   La imagen trae nombre, cargo y afiliación compuestos dentro, y fondo
   transparente fuera del marco redondeado: se muestra entera, sin recorte. */
/* Va dentro de la subsección de Faculty invitada, entre la nota [CMS] y el
   carrusel, y centrado en la columna. */
.feature-person { margin: clamp(1.5rem, 4vw, 2.25rem) 0 clamp(1.75rem, 4vw, 2.5rem); }

.feature-person-fig { margin: 0; }
.feature-person-fig img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 860px;
  margin-inline: auto;
}

/* Art direction: la pieza apaisada solo desde 700 px; por debajo, retrato
   cuadrado + el mismo texto en HTML (medido: a 390 px la pieza cae a 85 px de
   alto y sus líneas quedan en ~8 px). Solo una de las dos se muestra. */
.feature-person-card { display: none; text-align: center; }
.feature-person-card picture { display: block; }
.feature-person-card .portrait { max-width: 260px; margin-inline: auto; margin-bottom: 1.1rem; }
.feature-person-name { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); margin: 0 0 .3rem; }

@media (max-width: 699px) {
  .feature-person-fig { display: none; }
  .feature-person-card { display: block; }
}

/* --- Carrusel de personas ---
   Va después de .people a propósito: .carousel-track pasa la lista a flex y las
   reglas @media de .people (grid-template-columns) quedan inertes, sin borrarlas. */
.carousel { position: relative; }

.carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-inline: -2px;   /* no recortar el anillo de foco de las tarjetas */
  padding-inline: 2px;
}
.carousel-viewport::-webkit-scrollbar { display: none; }

.carousel-track {
  display: flex;
  --per: 1;
  --car-gap: clamp(1.25rem, 4vw, 2rem);
  gap: var(--car-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.carousel-track > .person {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--car-gap)) / var(--per));
  scroll-snap-align: start;
}

@media (min-width: 600px) { .carousel-track { --per: 2; } }
@media (min-width: 900px) { .carousel-track { --per: 3; } }

.carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.25rem;
}
/* display:flex vence al [hidden] del UA (misma especificidad, hoja de autor):
   sin esta regla los botones se verían aunque el JS no los haya activado. */
.carousel-controls[hidden] { display: none; }
.carousel-btn {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  color: var(--navy);
  font-size: 1rem;
  cursor: pointer;
}
.carousel-btn:hover { border-color: var(--gold); color: var(--gold); }
.carousel-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .carousel-viewport { scroll-behavior: auto; }
}

/* Programa */
/* --- Programa : pestañas por día.
   La pestaña absorbe el label y la fecha que antes iban en el <header> de cada
   panel, por eso .day-label / .day-date desaparecieron junto con ese header. */
.day-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: -1px;   /* la pestaña activa se une al panel */
  position: relative;
  z-index: 1;
}
.day-tab {
  flex: 1 1 12rem;
  text-align: left;
  padding: .85rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 2px 2px 0 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
}
.day-tab-label {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--navy);
}
.day-tab-date {
  display: block;
  margin-top: .15rem;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.day-tab:hover { border-color: var(--gold); }
.day-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.day-tab[aria-selected="true"] {
  background: var(--paper);
  border-bottom-color: var(--paper);
  box-shadow: inset 0 2px 0 var(--gold);
}

/* Apiladas (verificado a 390 px) la pestaña activa quedaba arriba del todo y el
   acento superior no la ataba al panel. En vertical el acento pasa al costado y
   el grupo se despega del panel en vez de solaparlo. */
@media (max-width: 559px) {
  .day-tabs { margin-bottom: .35rem; }
  .day-tab { border-radius: 2px; }
  .day-tab[aria-selected="true"] {
    border-bottom-color: var(--rule);
    box-shadow: inset 2px 0 0 var(--gold);
  }
}

.days { border: 1px solid var(--rule); background: var(--paper); }
.day { background: var(--paper); padding: clamp(1.5rem, 4vw, 2.1rem); }
/* el <header> del panel ya no existe: quitar su separación superior */
.day > :first-child { margin-top: 0; }
.day-note { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin: 0 0 .75rem; }
.day ul li { padding: .6rem 0 .6rem 1.15rem; position: relative; font-size: .95rem; border-bottom: 1px dotted var(--rule); }
.day ul li:last-child { border-bottom: 0; }
.day ul li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; }
.program-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 5vw, 2.75rem); }
.program-actions .note { flex-basis: 100%; }

/* Industria */
.tiers { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.tier {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .25rem 1rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--rule);
}
.tier-name { font-family: var(--serif); font-size: 1.25rem; color: var(--navy); }
.tier-value { font-family: var(--serif); font-size: 1.25rem; color: var(--green); white-space: nowrap; }
.tier-flag { grid-column: 1 / -1; font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.industry-grid { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.industry-actions .btn { width: 100%; margin-bottom: .65rem; }

/* ---------- 7. Formularios ---------- */
.tabs { }
.tablist { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.75rem; }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: .75rem .25rem; margin-right: 1.25rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.tab.is-active { color: var(--navy); border-bottom-color: var(--green); }

.form { background: var(--paper); border: 1px solid var(--rule); padding: clamp(1.25rem, 4vw, 2rem); }
.section-alt .form { background: var(--paper); }
.field { margin: 0 0 1.1rem; }
.field-row { display: grid; gap: 0; }
.field label { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--navy); margin-bottom: .4rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .8rem .9rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--warm-white); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); background: var(--paper); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #A32020; background: #FDF6F5; }
.field-error { display: block; font-size: var(--fs-micro); color: #A32020; margin-top: .35rem; }

.field-check { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: start; margin-bottom: 1rem; }
.field-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--navy); }
.field-check label { font-size: var(--fs-small); font-weight: 400; color: var(--muted); margin: 0; line-height: 1.5; }

.form-status { margin: 1rem 0 0; font-size: var(--fs-small); }
.form-status.is-ok { color: var(--green-deep); background: #EDF5F0; border-left: 3px solid var(--green); padding: .8rem 1rem; }
.form-status.is-error { color: #A32020; background: #FDF3F2; border-left: 3px solid #A32020; padding: .8rem 1rem; }
.form-status .dev-note { display: block; margin-top: .4rem; color: var(--muted); font-size: var(--fs-micro); }

/* ---------- 8. Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.82); padding: clamp(3rem, 7vw, 4.5rem) 0 calc(4.5rem + env(safe-area-inset-bottom)); font-size: var(--fs-small); }
.site-footer h2, .site-footer strong { color: #fff; }
.site-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.site-footer a:hover { color: var(--champagne); text-decoration: underline; }
.footer-cta {
  display: grid; gap: 1rem; align-items: center;
  padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.16);
}
.footer-cta-text { font-family: var(--serif); font-size: clamp(1.15rem, 3vw, 1.6rem); color: #fff; margin: 0; }
.footer-logos { border-bottom: 1px solid rgba(255,255,255,.16); padding-bottom: 2rem; margin-bottom: 2rem; }
/* El footer usa las versiones íntegramente blancas de los logos: van directas
   sobre el navy, sin el pill blanco que antes hacía legibles los de color (con
   un logo blanco sobre pill blanco no se vería nada). Sin el padding del pill
   ya no hay que compensar el alto, así que baja de 58 a 44 px. */
.footer-logos img { max-height: 52px; max-width: 190px; }
.footer-grid { display: grid; gap: 2rem; }
.footer-head { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0 0 .9rem; }
.footer-col p { margin: 0 0 .4rem; }
.footer-col .cms-placeholder { color: rgba(255,255,255,.6); }
.footer-links li { padding: .28rem 0; }
.lang-switch-footer { margin-top: 1.1rem; }
.lang-switch-footer .lang-btn { color: rgba(255,255,255,.65); }
.lang-switch-footer .lang-btn.is-active { color: #fff; }
.footer-endorse {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.16);
}
.footer-endorse p { margin: 0; }
.footer-endorse img { width: auto; max-width: 100%; max-height: 38px; }
.footer-legal { margin: 1.75rem 0 0; font-size: var(--fs-micro); color: rgba(255,255,255,.6); }

/* ---------- Responsive ---------- */
@media (min-width: 600px) {
  .brand-line-2 { display: block; }
  .field-row { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .host-logos { grid-template-columns: repeat(4, 1fr); }
  .key-list-2col { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .people { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .hosts { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-cta { grid-template-columns: 1fr auto; }
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
  .site-nav { display: block; }
  .nav-toggle { display: none; }
  .header-cta { display: inline-flex; }
  .mobile-cta { display: none; }
  .brand-logo img { max-height: 30px; }
  .brand-line-2 { font-size: .62rem; }
  .site-footer { padding-bottom: clamp(3rem, 7vw, 4.5rem); }

  .hosts { grid-template-columns: repeat(4, 1fr); }
  .people { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
  .industry-grid { grid-template-columns: .8fr 1.2fr; align-items: start; }
  .tier { grid-template-columns: 1fr auto auto; gap: 1.5rem; align-items: baseline; }
  .tier-flag { grid-column: auto; }
  .program-actions .note { flex-basis: auto; align-self: center; }
}

@media (min-width: 1120px) {
  .prose p { font-size: 1.22rem; }
}

/* Impresión */
@media print {
  .site-header, .mobile-cta, .form, .tablist, .nav-backdrop { display: none !important; }
  body { background: #fff; }
}