/* ===========================================================
   Sistema visual. Cero dependencias externas: sin CDN, sin
   fuentes remotas, sin librerías. Todo tipografía del sistema.

   La idea que ordena el diseño: una campaña gremial se lee
   como un documento serio, no como una landing de producto.
   De ahí el contraste entre titulares con serif y cuerpo en
   sans, y el uso del dorado como firma y no como decoración.
   =========================================================== */

:root {
  /* --- Color --- */
  --fondo:        #ffffff;
  --fondo-alt:    #f5f3ed;
  --tinta:        #0d161d;
  --tinta-media:  #3d4d59;
  --tinta-suave:  #61707c;
  --linea:        #e0e6eb;
  --linea-fuerte: #c3cdd6;
  --marca:        #123c48;
  --marca-clara:  #1b5878;
  --acento:       #95702e;
  --tarjeta:      #ffffff;

  --sombra:       0 1px 2px rgba(13,22,29,.04), 0 12px 32px rgba(13,22,29,.06);
  --sombra-alta:  0 2px 6px rgba(13,22,29,.06), 0 24px 60px rgba(13,22,29,.13);

  /* --- Tipografía --- */
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  /* --- Medidas --- */
  --radio:   6px;
  --radio-s: 4px;
  --ancho:   1160px;
  --paso:    clamp(56px, 7vw, 96px);   /* ritmo vertical de las secciones */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in srgb, var(--acento) 30%, transparent); }

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

/* --- Titulares en serif: el contraste que le da carácter --- */
h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 .45em;
}
h1 { font-size: clamp(2.3rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }

h3 {
  font-family: var(--sans);
  font-size: 1.16rem; font-weight: 680; line-height: 1.25;
  letter-spacing: -.01em; margin: 0 0 .4em;
}
h4 {
  font-family: var(--sans);
  font-size: .73rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--tinta-suave); font-weight: 750; margin: 2.2em 0 .9em;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 670; color: var(--tinta); }

a { color: var(--marca-clara); text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 4px;
}

.wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.wrap--angosto { max-width: 800px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--marca);
  color: #fff; padding: 10px 16px; z-index: 60;
}
.skip:focus { left: 0; }

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fondo) 84%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linea);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 64px; flex-wrap: wrap;
}
.topbar__mark {
  font-weight: 700; font-size: .88rem; letter-spacing: -.01em;
}
.topbar nav { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.topbar nav a {
  color: var(--tinta-suave); text-decoration: none; font-size: .87rem;
  font-weight: 550; padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.topbar nav a:hover { color: var(--tinta); border-bottom-color: var(--acento); }
.nav-cta {
  color: #fff !important; background: var(--marca); border-bottom: none !important;
  padding: 8px 16px !important; border-radius: 999px; font-weight: 650 !important;
}

.nav-cta:hover { opacity: .9; }

/* ---------- Portada ---------- */
.hero {
  padding: calc(var(--paso) * 1.25) 0 var(--paso);
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--linea);
  background:
    radial-gradient(820px 420px at 4% -25%,
      color-mix(in srgb, var(--marca) 16%, transparent), transparent 66%),
    radial-gradient(620px 320px at 96% 6%,
      color-mix(in srgb, var(--acento) 11%, transparent), transparent 60%);
}
.hero__eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-size: .71rem;
  font-weight: 750; color: var(--acento); margin-bottom: 22px;
}
.hero h1 { max-width: 19ch; margin-bottom: .5em; }
.hero__lema {
  font-family: var(--sans);
  font-size: clamp(1.04rem, 1.7vw, 1.22rem); line-height: 1.55;
  color: var(--tinta-media); max-width: 58ch; margin-bottom: 0;
}
.hero__lema strong { color: var(--tinta); }
.hero__credencial {
  margin-top: 28px; font-size: .94rem; font-weight: 620;
  padding: 4px 0 4px 18px; border-left: 3px solid var(--acento);
  max-width: 52ch; color: var(--tinta);
}
.hero__acciones { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 34px; }
.hero__meta {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--linea);
  font-size: .8rem; color: var(--tinta-suave); letter-spacing: .015em;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block; padding: 13px 24px; border-radius: var(--radio-s);
  border: 1px solid var(--linea-fuerte); background: var(--tarjeta);
  color: var(--tinta); text-decoration: none; font-size: .95rem; font-weight: 620;
  font-family: var(--sans); cursor: pointer;
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}
.btn:hover { border-color: var(--marca-clara); transform: translateY(-1px); }
.btn--primary {
  background: var(--marca); border-color: var(--marca); color: #fff;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--marca) 30%, transparent);
}

.btn--primary:hover {
  box-shadow: 0 8px 22px color-mix(in srgb, var(--marca) 38%, transparent);
}
.btn--grande {
  font-size: 1.08rem; font-weight: 700; padding: 18px 38px;
  border: none; letter-spacing: -.01em;
}

/* ---------- Secciones ---------- */
.seccion { padding: var(--paso) 0; }
.seccion--alt { background: var(--fondo-alt); border-block: 1px solid var(--linea); }
.seccion--destacada {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--marca) 10%, var(--fondo)), var(--fondo));
  border-block: 1px solid var(--linea);
}
.seccion h2 { max-width: 24ch; }
.seccion__intro {
  color: var(--tinta-suave); max-width: 58ch; margin-bottom: 2.4em; font-size: 1.01rem;
}

/* Firma dorada antes de cada título: el único adorno de la página */
.marca-seccion {
  display: block; width: 44px; height: 3px; background: var(--acento);
  border-radius: 2px; margin-bottom: 26px;
}

/* ---------- Empresas ---------- */
.empresas {
  display: grid; gap: 20px; margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.empresa-card {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 30px 26px; box-shadow: var(--sombra);
  transition: transform .15s ease, box-shadow .15s ease;
  text-align: center;   /* el logo manda: si va centrado, la tarjeta también */
}
.empresa-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.empresa-card__logo {
  height: 114px; margin-bottom: 24px;
  display: flex; align-items: center; justify-content: center;
}
.empresa-card__logo img { max-height: 114px; width: auto; object-fit: contain; }
.empresa-card__logo--placa {
  background: #fff; border-radius: 10px; padding: 12px 16px;
  height: auto; min-height: 110px; align-items: center; margin: 0 auto;
  border: 1px solid var(--linea);
  /* flex + fit-content: se ajusta al ancho del logo pero sigue siendo
     un bloque, así lo que va debajo no se le pone al lado */
  display: flex; width: fit-content;
}
.empresa-card__logo--placa img { max-height: 78px; }
.empresa-card__fallback {
  font-family: var(--serif); font-size: 1.75rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--tinta); opacity: .3;
}
.empresa-card__rol {
  display: block; font-size: .65rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: .14em; color: var(--acento);
  margin-bottom: 7px;
}
.empresa-card h3 { font-size: 1.12rem; }
.empresa-card p { margin: 0; font-size: .89rem; color: var(--tinta-suave); }
.empresa-card__quien {
  margin-top: 16px !important; padding-top: 13px;
  border-top: 1px solid var(--linea); font-size: .83rem !important;
  font-weight: 650; color: var(--tinta) !important;
}

/* ---------- Puntos del canal ---------- */
/* En una columna de 760px, tres columnas quedaban de 230px: los títulos
   se partían y las reglas superiores se veían cortadas. Va como lista. */
.puntos { margin-top: 40px; }
.punto {
  display: grid; grid-template-columns: 215px 1fr; gap: 24px;
  padding: 22px 0; border-top: 1px solid var(--linea-fuerte);
  align-items: start;
}
.punto:last-child { border-bottom: 1px solid var(--linea-fuerte); }
.punto h3 {
  font-size: 1.02rem; margin: 0; position: relative; padding-left: 18px;
  color: var(--tinta);
}
.punto h3::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--acento);
}
.punto p { margin: 0; font-size: .95rem; color: var(--tinta-media); }

.destacado {
  margin-top: 38px; padding: 22px 24px;
  background: color-mix(in srgb, var(--acento) 12%, var(--fondo));
  border-left: 3px solid var(--acento); border-radius: 0 var(--radio-s) var(--radio-s) 0;
  font-size: 1.01rem;
}
.destacado strong { color: var(--tinta); }
.canal__video { margin-top: 28px; }
.canal__video video { width: 100%; border-radius: var(--radio); background: #000; }

/* ---------- Renglones ---------- */
.renglon + .renglon { margin-top: 64px; }
.renglon__titulo {
  font-family: var(--sans);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--acento); font-weight: 750; margin-bottom: 22px;
}
.renglon__grid {
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.persona {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 32px; display: flex; flex-direction: column;
  transition: box-shadow .18s ease;
}
.persona:hover { box-shadow: var(--sombra-alta); }
.persona__cab { display: flex; gap: 22px; align-items: flex-start; }
.persona__foto {
  flex: 0 0 132px; width: 132px; height: 132px; border-radius: 50%;
  overflow: hidden; background: var(--fondo-alt);
  box-shadow: 0 0 0 1px var(--linea), 0 0 0 6px color-mix(in srgb, var(--marca) 8%, transparent);
}
.persona__foto img { width: 100%; height: 100%; object-fit: cover; }
.persona__datos h3 {
  font-family: var(--serif); font-weight: 600; font-size: 1.42rem;
  letter-spacing: -.02em; margin: 12px 0 6px;
}
.persona__titular {
  color: var(--tinta-suave); font-size: .92rem; margin: 0; font-weight: 550;
}
.badge {
  display: inline-block; font-size: .63rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: .14em;
  padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--marca) 12%, transparent);
  color: var(--marca-clara);
}
.persona__enlaces {
  list-style: none; padding: 0; margin: 13px 0 0;
  display: flex; gap: 16px; font-size: .85rem;
}
.persona__gancho {
  margin: 26px 0 0; font-size: 1rem; line-height: 1.62;
  padding-left: 18px; border-left: 3px solid var(--acento);
}
.persona__video { margin-top: 22px; }
.persona__video video { width: 100%; border-radius: var(--radio-s); background: #000; }

.persona__mas { margin-top: 24px; border-top: 1px solid var(--linea); }
.persona__mas summary {
  cursor: pointer; font-size: .85rem; color: var(--marca-clara);
  padding: 15px 0 4px; list-style: none; font-weight: 650;
}
.persona__mas summary::-webkit-details-marker { display: none; }
.persona__mas summary::before { content: "+ "; }
.persona__mas[open] summary::before { content: "− "; }
.persona__mas summary:hover { text-decoration: underline; }
.persona__cuerpo { margin-top: 10px; font-size: .94rem; color: var(--tinta-media); }

.trayectoria { list-style: none; padding: 0; margin: 0; }
.trayectoria li {
  display: grid; grid-template-columns: 106px 1fr; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--linea); align-items: baseline;
}
.trayectoria li:first-child { border-top: none; }
.trayectoria__anos {
  font-size: .77rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums;
}
.trayectoria__cargo { display: block; font-size: .91rem; }
.trayectoria__cargo strong { font-weight: 650; display: block; }
.trayectoria__org { color: var(--tinta-suave); font-size: .84rem; }

.lista-simple { margin: 0; padding-left: 1.15em; font-size: .91rem; }
.lista-simple li { margin-bottom: .4em; }

/* ---------- Peso del voto ---------- */
.dato {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.8vw, 2.4rem); font-weight: 600; line-height: 1.2;
  color: var(--marca-clara); margin-bottom: .7em; letter-spacing: -.02em;
}

/* ---------- Cómo votar ---------- */
.lista-check { list-style: none; padding: 0; margin: 0 0 2em; }
.lista-check li {
  position: relative; padding-left: 34px; margin-bottom: 16px; font-size: 1rem;
}
.lista-check li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent);
}
.nota {
  font-size: .86rem; color: var(--tinta-suave);
  border-left: 2px solid var(--linea-fuerte); padding-left: 18px;
}

/* ---------- Apoyo y chat ---------- */
.lanzador { margin-top: 34px; }
.lanzador .ayuda { margin-top: 16px; max-width: 48ch; }
#bot { margin-top: 26px; }
.bot__marco {
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  overflow: hidden; background: var(--tarjeta); box-shadow: var(--sombra-alta);
}
.bot__marco iframe { width: 100%; height: 560px; border: 0; display: block; }
.ayuda { font-size: .82rem; color: var(--tinta-suave); margin: 10px 0 0; }

/* ---------- Pie ---------- */
.pie {
  padding: 44px 0; border-top: 1px solid var(--linea);
  font-size: .84rem; color: var(--tinta-suave);
}
.pie p { margin: 0 0 8px; }
.pie__contacto { font-size: .9rem; font-weight: 650; }
.pie__datos { max-width: 76ch; }
.pie__legal { font-size: .78rem; opacity: .82; }
.noscript { padding: 36px 24px; }

/* ---------- Móvil ---------- */
@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .hero { padding: 52px 0 46px; }
  .hero__acciones .btn { width: 100%; text-align: center; }
  .persona { padding: 24px; }
  .persona__cab { gap: 18px; }
  .persona__foto { flex-basis: 104px; width: 104px; height: 104px; }
  .trayectoria li { grid-template-columns: 1fr; gap: 3px; }
  .punto { grid-template-columns: 1fr; gap: 8px; }
  .btn--grande { width: 100%; text-align: center; padding: 17px 24px; }
  .topbar nav { gap: 14px; }
  .topbar nav a { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

@media print {
  .topbar, .hero__acciones, .skip, .lanzador, .bot__marco { display: none; }
  body { font-size: 12pt; }
  .seccion { padding: 20px 0; }
}

/* ---------- Tarjetas de empresa afiliada ---------- */
.empresas__titulo {
  margin: 46px 0 0; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--tinta-suave); font-weight: 750;
}
.empresa-card__desde {
  margin-top: 8px !important; font-size: .83rem !important;
  color: var(--tinta-suave); font-variant-numeric: tabular-nums;
}
.empresa-card__rep {
  margin-top: 20px; padding-top: 17px;
  border-top: 1px solid var(--linea);
}
.empresa-card__rep-eti {
  display: block; font-size: .64rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--tinta-suave); font-weight: 700;
  margin-bottom: 5px;
}
.empresa-card__rep-nombre {
  margin: 0 !important; font-size: .95rem !important; font-weight: 680;
  color: var(--tinta) !important;
}
.empresa-card__rep-rol {
  margin: 2px 0 0 !important; font-size: .82rem !important;
  color: var(--tinta-suave) !important;
}

/* El primer enlace de cada ficha es el que más prueba aporta: se destaca */
.persona__enlaces li:first-child a { font-weight: 650; }
.persona__enlaces a { text-decoration-thickness: 1px; }

/* Cuando no hay logo y cae al nombre escrito, el bloque no necesita
   la altura completa que sí necesita una imagen */
.empresa-card__logo--texto { height: auto; min-height: 86px; }

/* Medida de lectura: 800px con este cuerpo daban líneas de casi 80
   caracteres, por encima de lo cómodo */
.wrap--angosto { max-width: 760px; }

/* Segundo punto de entrada al chat, dentro de la sección del canal */
.canal__accion { margin: 26px 0 0; }

/* ---------- Compartir ---------- */
.compartir {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px;
  padding-top: 28px; border-top: 1px solid var(--linea-fuerte);
}

/* ---------- Espacio reservado del video ---------- */
.video-pendiente {
  margin-top: 28px; padding: 30px 26px; text-align: center;
  border: 2px dashed var(--linea-fuerte); border-radius: var(--radio);
  background: color-mix(in srgb, var(--tinta) 3%, transparent);
}
.video-pendiente__eti {
  display: block; font-size: .64rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--tinta-suave); margin-bottom: 10px;
}
.video-pendiente p {
  margin: 0; font-size: .9rem; color: var(--tinta-suave); max-width: 46ch;
  margin-inline: auto;
}

/* ---------- Preguntas y respuestas ---------- */
.faq { margin-top: 34px; border-top: 1px solid var(--linea-fuerte); }
.faq__item { border-bottom: 1px solid var(--linea-fuerte); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 20px 34px 20px 0;
  font-size: 1.04rem; font-weight: 650; position: relative;
  color: var(--tinta);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 6px; top: 18px;
  font-size: 1.35rem; font-weight: 400; color: var(--acento); line-height: 1;
}
.faq__item[open] summary::after { content: "−"; }
.faq__item summary:hover { color: var(--marca-clara); }
.faq__r {
  margin: 0 0 22px !important; font-size: .97rem; color: var(--tinta-media);
  max-width: 66ch;
}

/* Dirección editorial de la candidatura: marfil, azul y retratos reales. */
:root { color-scheme: light; --ancho: 1240px; --paso: clamp(64px, 7vw, 104px); }
[hidden] { display: none !important; }
html { scroll-padding-top: 100px; }
body { font-size: 17px; }
h1, h2 { font-weight: 400; letter-spacing: -.035em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.topbar__inner { min-height: 86px; gap: 20px; }
.topbar__brand { display: flex; align-items: center; gap: 12px; color: var(--marca); text-decoration: none; }
.topbar__symbol { display: grid; place-items: center; width: 38px; height: 44px; background: var(--marca); color: #e3c58d; font-size: 27px; }
.topbar__mark { display: block; font-size: .85rem; }
.topbar__sub { display: block; font-size: .66rem; color: var(--tinta-suave); margin-top: 3px; }
.topbar nav { gap: 20px; }
.topbar nav a { font-size: .8rem; }
.nav-cta { border-radius: 4px; padding: 11px 18px !important; }
.menu-toggle { display: none; }
.hero { background: #f6f4ef; padding: 76px 0 0; }
.hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 64px; align-items: center; }
.hero__copy { min-width: 0; }
.hero__eyebrow { font-size: .63rem; line-height: 1.8; max-width: 53ch; margin-bottom: 24px; }
.hero h1 { font-size: clamp(2.7rem, 4.3vw, 3.8rem); max-width: 19ch; color: var(--marca); line-height: 1.05; margin-bottom: 25px; }
.hero__lema { font-size: 1rem; line-height: 1.7; }
.hero__credencial { font-size: .8rem; font-weight: 400; margin-top: 24px; padding-left: 14px; max-width: 60ch; }
.hero__acciones { margin-top: 27px; gap: 10px; }
.hero__acciones .btn { font-size: .8rem; padding: 14px 18px; }
.btn { box-shadow: none; line-height: 1.5; min-height: 46px; }
.btn--primary { box-shadow: none; }
.hero__equipo { align-self: center; padding-top: 20px; }
.hero__equipo-label { color: var(--marca); font-size: .7rem; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 18px; }
.hero__retratos { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.hero__retrato { margin: 0; min-width: 0; }
.hero__retrato:nth-child(2) { margin-top: 56px; }
.hero__retrato img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 80px 4px 4px 4px; }
.hero__retrato:nth-child(2) img { border-radius: 4px 4px 80px 4px; }
.hero__retrato figcaption { padding: 18px 0 0; }
.hero__rol { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .16em; color: var(--acento); margin-bottom: 6px; }
.hero__retrato strong { display: block; font-family: var(--serif); color: var(--marca); font-size: 1.3rem; font-weight: 400; line-height: 1.2; }
.hero__empresa { display: block; color: var(--tinta-suave); font-size: .7rem; margin-top: 8px; }
.hero__perfil-link { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; padding-top: 17px; border-top: 1px solid #d5d8d1; color: var(--marca); text-decoration: none; font-size: .8rem; }
.hero__perfil-link span { font-size: 1.4rem; }
.hero__bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; margin-top: 52px; border-top: 1px solid #d5d8d1; }
.hero__meta { margin: 0; padding: 0; border: 0; font-size: .72rem; }
.hero__bottom > a { font-size: .72rem; color: var(--tinta-media); text-decoration: none; }
.hero__bottom > a span { margin-left: 18px; }
#identidad { background: #fff; border: 0; }
.identidad__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: start; }
.identidad__historia p { font-size: .95rem; color: var(--tinta-media); }
.identidad__empresas { padding-top: 30px; }
.empresas__titulo { margin: 0; font-size: .66rem; }
.empresas { margin-top: 24px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.empresa-card { background: #f6f4ef; box-shadow: none; padding: 26px 16px; border: 0; text-align: left; }
.empresa-card:hover { transform: none; box-shadow: none; }
.empresa-card__logo, .empresa-card__logo--placa, .empresa-card__logo--texto { height: 100px; min-height: 100px; margin: 0 0 24px; width: 100%; padding: 10px; border: 0; border-radius: 3px; }
.empresa-card__fallback { opacity: 1; font-size: 1.55rem; color: var(--marca); }
.empresa-card__logo img { max-width: 100%; max-height: 74px; }
.empresa-card h3 { display: none; }
.empresa-card__rol { font-size: .59rem; }
.empresa-card p { font-size: .8rem; }
.empresa-card__rep-nombre { font-size: .86rem !important; }
#canal, #apoyo { background: #123c48; color: #e5edeb; --tinta: #fff; --tinta-media: #d4e0df; --tinta-suave: #b4c9ca; --linea-fuerte: #486871; --acento: #dec08a; }
#canal h2, #apoyo h2 { color: #fff; }
#canal .wrap { max-width: 1000px; }
#canalEntrada { max-width: 70ch; color: var(--tinta-media); }
.puntos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; counter-reset: canal; }
.punto { display: block; padding: 24px 0 0; border-color: #486871; counter-increment: canal; }
.punto::before { content: '0' counter(canal); display: block; color: #dec08a; font-family: var(--serif); font-size: 1.7rem; margin-bottom: 20px; }
.punto:last-child { border-bottom: 0; }
.punto h3 { padding: 0; margin-bottom: 12px; }
.punto h3::before { display: none; }
.punto p { font-size: .9rem; }
.destacado { background: #204954; border-radius: 0; font-size: .95rem; }
#canal .btn--primary, #apoyo .btn--primary { background: #e3c58d; border-color: #e3c58d; color: #153943; }
#renglones { background: #f6f4ef; }
.renglon__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.persona { box-shadow: none; border: 1px solid #dedfd7; padding: 30px; }
.persona:hover { box-shadow: var(--sombra); }
.persona__foto { border-radius: 4px; box-shadow: none; flex-basis: 116px; width: 116px; height: 146px; }
.persona__datos { min-width: 0; }
.persona__datos h3 { font-size: 1.55rem; font-weight: 400; color: var(--marca); }
.persona__titular { font-size: .82rem; }
.persona__enlaces { flex-wrap: wrap; gap: 5px 14px; font-size: .75rem; }
.persona__gancho { font-size: .91rem; color: var(--tinta-media); border-left-width: 2px; }
.badge { border-radius: 2px; background: #edf1ef; font-size: .58rem; }
#peso .wrap { max-width: 880px; }
#votar { background: #f6f4ef; }
.lista-check { counter-reset: votar; }
.lista-check li { counter-increment: votar; padding: 20px 0 20px 54px; margin: 0; border-bottom: 1px solid var(--linea); }
.lista-check li::before { content: '0' counter(votar); width: 30px; height: 30px; top: 24px; left: 0; background: transparent; box-shadow: none; color: var(--acento); font-family: var(--serif); font-size: 1.2rem; }
.faq__item summary { font-size: .98rem; padding-block: 24px; }
#apoyo .wrap { max-width: 850px; }
#apoyo .marca-seccion { background: #dec08a; }
#apoyo .ayuda { color: #c1d2d2; }
.pie { background: #f6f4ef; padding: 40px 0; }
.pie__legal { margin-top: 20px !important; max-width: 100ch; }
@media (max-width: 1050px) {
  .topbar__inner { min-height: 76px; }
  .topbar nav { gap: 12px; }
  .topbar__sub { max-width: 24ch; }
  .hero__grid { gap: 36px; }
  .identidad__grid { gap: 40px; }
  .empresas { grid-template-columns: 1fr; }
  .empresa-card__logo, .empresa-card__logo--placa, .empresa-card__logo--texto { max-width: 230px; }
  .persona__cab { flex-direction: column; }
  .persona__foto { flex-basis: auto; }
}
@media (max-width: 780px) {
  html { scroll-padding-top: 90px; }
  .topbar__inner { position: relative; flex-wrap: wrap; padding-block: 14px; }
  .topbar__mark { font-size: .76rem; }
  .topbar__sub { font-size: .6rem; max-width: none; }
  .topbar__symbol { width: 30px; height: 38px; }
  .menu-toggle:not([hidden]) { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 10px; background: transparent; border: 1px solid var(--linea-fuerte); border-radius: 4px; color: var(--marca); font: 600 .75rem var(--sans); }
  .topbar nav { display: none; width: 100%; padding-top: 8px; }
  .topbar nav.is-open { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .topbar nav a { padding: 12px 8px; }
  .hero { padding-top: 44px; }
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero h1 { max-width: 22ch; font-size: clamp(2.6rem, 7vw, 3.5rem); }
  .hero__copy { max-width: 640px; }
  .hero__equipo { padding-top: 44px; max-width: 520px; width: 100%; }
  .hero__retratos { gap: 20px; }
  .hero__retrato:nth-child(2) { margin-top: 30px; }
  .hero__bottom { margin-top: 36px; }
  .identidad__grid { grid-template-columns: 1fr; gap: 24px; }
  .identidad__empresas { padding-top: 0; }
  .empresas { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .puntos { grid-template-columns: 1fr; gap: 22px; }
  .punto { display: grid; grid-template-columns: 40px 1fr; gap: 8px 16px; }
  .punto::before { grid-row: 1 / 3; margin: 0; }
  .punto h3 { margin: 0; }
  .punto p { grid-column: 2; }
  .renglon__grid { grid-template-columns: 1fr; }
  .persona__cab { flex-direction: row; }
}
@media (max-width: 420px) {
  .wrap { padding-inline: 20px; }
  .topbar__brand { gap: 8px; }
  .topbar__symbol { display: none; }
  .topbar__inner { gap: 8px; }
  .hero__eyebrow { font-size: .6rem; }
  .hero__acciones .btn { width: 100%; }
  .hero__retratos { gap: 12px; }
  .hero__retrato strong { font-size: 1.12rem; }
  .hero__retrato img { border-top-left-radius: 54px; }
  .hero__retrato:nth-child(2) img { border-radius: 4px 4px 54px 4px; }
  .hero__bottom { gap: 10px; }
  .hero__bottom > a span { margin-left: 6px; }
  .empresas { grid-template-columns: 1fr; }
  .persona { padding: 22px; }
  .persona__cab { gap: 16px; }
  .persona__foto { width: 84px; height: 110px; flex: 0 0 84px; }
  .persona__datos h3 { font-size: 1.3rem; }
  .compartir .btn { width: 100%; text-align: center; overflow-wrap: anywhere; }
}
@media print {
  .menu-toggle, .hero__bottom > a { display: none !important; }
  #canal, #apoyo { background: #fff; color: #123c48; --tinta: #123c48; --tinta-media: #334e56; }
  #canal h2, #apoyo h2 { color: #123c48; }
  .hero { padding-top: 24px; }
  .hero__grid { grid-template-columns: 1fr 1fr; }
  .persona { break-inside: avoid; }
}