/* ============================================================================
   CABA — site chrome and home. Values come from the approved handoff
   (design-claude/). Colours and type only through the tokens in base.css.
   ========================================================================= */

.caba-saltar {
  position: absolute; left: -9999px;
  background: var(--caba-paper); color: var(--caba-ink);
  padding: 12px 20px; z-index: 100;
}
.caba-saltar:focus { left: 0; top: 0; }

/* ---- Contact bar ---- */
.caba-contacto-barra {
  background: var(--caba-verde);
  color: var(--caba-paper);
  padding: 10px var(--caba-gutter);
  display: flex; flex-wrap: wrap; gap: 6px 28px;
  justify-content: space-between; align-items: baseline;
  font-family: var(--caba-font-label);
  font-weight: 500; font-size: var(--caba-size-label);
  letter-spacing: .12em; text-transform: uppercase;
  position: relative; z-index: 4;
}
.caba-contacto-barra__enlaces { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.caba-contacto-barra a {
  color: var(--caba-paper);
  text-decoration: none;
  border-bottom: 1px solid var(--caba-naranja);
  padding-bottom: 2px;
}
.caba-contacto-barra a:hover { border-bottom-color: var(--caba-paper); color: var(--caba-paper); }

/* ---- Announcement bar: off unless there is something to say ---- */
.caba-anuncio {
  background: var(--caba-naranja);
  color: var(--caba-ink);
  padding: 10px var(--caba-gutter);
  font-family: var(--caba-font-label);
  font-weight: 700; font-size: var(--caba-size-label);
  letter-spacing: .12em; text-transform: uppercase;
  position: relative; z-index: 4;
}
.caba-anuncio a { color: var(--caba-ink); text-decoration-color: var(--caba-ink); }

/* ---- Masthead ---- */
.caba-cabecera {
  border-bottom: var(--caba-rule-ink);
  padding: 20px var(--caba-gutter) 18px;
  display: flex; flex-wrap: wrap; gap: 18px 40px;
  justify-content: space-between; align-items: flex-end;
  position: relative; z-index: 4;
}
/* The escudo matches the height of the wordmark block beside it — stretched by the flex line
   rather than pinned to a fixed 64px, which left it visibly shorter than the text. */
.caba-marca { display: flex; align-items: stretch; gap: 18px; text-decoration: none; }
.caba-marca__escudo {
  height: auto; width: auto; align-self: stretch;
  max-height: 92px; object-fit: contain; flex: none;
}
.caba-marca__sigla {
  display: block;
  font-family: var(--caba-font-display);
  font-size: 38px; line-height: .88; letter-spacing: .01em;
  color: var(--caba-verde);
}
.caba-marca__nombre {
  display: block;
  font-size: var(--caba-size-sm); line-height: 1.25;
  color: var(--caba-ink);
  margin-top: 7px; max-width: 32ch;
}

.caba-nav { display: flex; flex-wrap: wrap; gap: 4px 2px; align-items: baseline; }
.caba-nav a {
  padding: 8px 13px;
  color: var(--caba-ink);
  text-decoration: none;
}
.caba-nav a:hover { color: var(--caba-verde); }
.caba-nav a.is-current {
  border-bottom: 3px solid var(--caba-naranja);
  padding-bottom: 5px;
  font-weight: 700;
}
/* The handoff draws "Tienda" as a filled button, not a text link — the one nav item that
   isn't just navigation. Targeted by URL rather than a menu-item class: caba_render_menu()
   prints every item identically and lives in functions.php, outside this file's ownership. */
.caba-nav a[href*="/tienda"] {
  background: var(--caba-verde); color: var(--caba-paper);
  padding: 11px 17px; margin-left: 10px; font-weight: 700;
}
.caba-nav a[href*="/tienda"]:hover { background: var(--caba-ink); color: var(--caba-paper); }
.caba-nav-boton { display: none; background: none; border: var(--caba-rule-ink); padding: 9px 14px; cursor: pointer; }

@media (max-width: 860px) {
  .caba-nav-boton { display: block; }
  .caba-nav { flex-basis: 100%; flex-direction: column; }
  .caba-nav[hidden] { display: none; }
}

/* ---- La franja arbitral: twelve bars, one orange. The signature element. ---- */
.caba-franja {
  background: linear-gradient(90deg,
    var(--caba-ink)     0 8.333%,  var(--caba-paper)  8.333% 16.666%,
    var(--caba-ink) 16.666% 25%,   var(--caba-paper)     25% 33.333%,
    var(--caba-ink) 33.333% 41.666%, var(--caba-naranja) 41.666% 50%,
    var(--caba-ink)     50% 58.333%, var(--caba-paper) 58.333% 66.666%,
    var(--caba-ink) 66.666% 75%,   var(--caba-paper)     75% 83.333%,
    var(--caba-ink) 83.333% 91.666%, var(--caba-paper) 91.666% 100%);
  height: var(--caba-franja-alto);
}
/* The footer runs its own count: twenty bars at 15px, orange on the 6th and the 16th.
   Its own rule on purpose — the shared 12-bar franja is what every other screen was verified
   against, and this one sits on verde. */
.caba-franja--pie {
  height: 15px;
  background: linear-gradient(90deg,
    var(--caba-ink)    0  5%,  var(--caba-paper)   5% 10%,
    var(--caba-ink)   10% 15%, var(--caba-paper)  15% 20%,
    var(--caba-ink)   20% 25%, var(--caba-naranja) 25% 30%,
    var(--caba-ink)   30% 35%, var(--caba-paper)  35% 40%,
    var(--caba-ink)   40% 45%, var(--caba-paper)  45% 50%,
    var(--caba-ink)   50% 55%, var(--caba-paper)  55% 60%,
    var(--caba-ink)   60% 65%, var(--caba-paper)  65% 70%,
    var(--caba-ink)   70% 75%, var(--caba-naranja) 75% 80%,
    var(--caba-ink)   80% 85%, var(--caba-paper)  85% 90%,
    var(--caba-ink)   90% 95%, var(--caba-paper)  95% 100%);
}
.caba-franja--vertical {
  width: 52px; height: auto; flex: none;
  background: linear-gradient(180deg,
    var(--caba-verde)     0 12.5%, var(--caba-paper) 12.5% 25%,
    var(--caba-verde)    25% 37.5%, var(--caba-paper) 37.5% 50%,
    var(--caba-verde)    50% 62.5%, var(--caba-naranja) 62.5% 75%,
    var(--caba-verde)    75% 87.5%, var(--caba-paper) 87.5% 100%);
}

/* ---- Hero ----
   Flex row exactly as the handoff draws it (display:flex on the section itself, no grid/
   breakpoint indirection): text column flex:1 1 560px, photo column flex:1 1 400px, wrapping
   to one column below ~1000px because the two basis widths no longer fit the line. */
.caba-hero {
  display: flex; flex-wrap: wrap; align-items: stretch;
  background: var(--caba-verde);
  color: var(--caba-paper);
  position: relative; z-index: 3;
}
.caba-hero__texto {
  flex: 1 1 560px;
  padding: clamp(40px, 4vw, 68px) var(--caba-gutter) clamp(28px, 3vw, 44px);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(28px, 4vw, 44px);
}

/* Duotone ink → orange, as the handoff asks for on 100% of photography. Multiplying a
   greyscale image over orange maps white to orange and black to near-ink — which also solves
   the archive's studio portraits arriving as cut-outs on a white background. The column keeps
   its ink ground, orange top rule and franja arbitral whether or not a photo is loaded yet —
   the frame is the constant, the photo is what fills it once the Customizer has one. */
.caba-hero__foto {
  flex: 1 1 400px;
  margin: 0; position: relative; overflow: hidden;
  background: var(--caba-ink);
  min-height: 320px;
  display: flex; flex-direction: column;
}
.caba-hero__foto::before {
  content: ""; display: block; flex: none; height: 9px;
  background: var(--caba-naranja);
}
/* The duotone needs an orange BACKDROP, and `mix-blend-mode` blends against what is painted
   behind the element — not against the element's own background, which paints underneath its
   own content. Setting `background: naranja` on the <img> therefore did nothing and the photo
   multiplied against the ink column, going almost black. So the orange lives on a wrapper the
   image blends into, and `isolation: isolate` stops that blend leaking onto the ink column. */
.caba-hero__foto-marco {
  flex: 1 1 auto; min-height: 0; position: relative;
  background: var(--caba-naranja);
  isolation: isolate;
  overflow: hidden;
}
.caba-hero__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%;   /* faces sit high in these frames */
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: multiply;
}
/* Ten bands, verde/tinta, the sixth in naranja — la franja arbitral, horizontal. Sticks to the
   bottom of the column via margin-top:auto so the frame still reads correctly with no photo. */
.caba-hero__foto-franja { display: flex; flex: none; width: 100%; height: clamp(48px, 8vw, 96px); margin-top: auto; }
.caba-hero__foto-franja span { flex: 1; }
.caba-hero__foto-franja span:nth-child(odd)  { background: var(--caba-verde); }
.caba-hero__foto-franja span:nth-child(even) { background: var(--caba-ink); }
.caba-hero__foto-franja span:nth-child(6)    { background: var(--caba-naranja); }
.caba-hero__foto figcaption {
  flex: none;
  padding: 10px 16px; margin: 0;
  background: var(--caba-ink); color: var(--caba-paper);
}
@media (max-width: 999px) { .caba-hero__foto { min-height: 260px; max-height: 62vh; } }

.caba-hero__cintillo { color: var(--caba-paper); margin: 0 0 24px; opacity: .85; }
.caba-hero__titulo {
  margin: 0;
  font-size: var(--caba-size-mega);
  line-height: .88; letter-spacing: -.02em;
  color: var(--caba-paper);
}
.caba-hero__bajada {
  margin: 22px 0 0; max-width: 32ch;
  font-size: var(--caba-size-lg); line-height: 1.32;
  color: var(--caba-paper);
}

/* Two audiences, two doors. */
.caba-entradas { display: flex; flex-wrap: wrap; align-items: stretch; }
.caba-entrada {
  flex: 1 1 262px;
  display: flex; flex-direction: column; gap: 7px;
  padding: 20px 24px 22px;
  text-decoration: none;
  border-top: 9px solid var(--caba-naranja);
}
.caba-entrada--aspirante { background: var(--caba-paper); color: var(--caba-ink); }
/* The handoff gives this door a top border in its own background colour — the orange
   rule belongs to the aspirante door alone, so the two read as different weights. */
.caba-entrada--asociado  { background: var(--caba-ink); color: var(--caba-paper); border-top-color: var(--caba-ink); }
/* Rótulo colour flips independently of the door's body colour: ink on the light aspirante
   door, but naranja (not paper) on the dark asociado door — the handoff's own contrast. */
.caba-entrada--aspirante .caba-entrada__rotulo { color: var(--caba-ink); }
.caba-entrada--asociado  .caba-entrada__rotulo { color: var(--caba-naranja); }
.caba-entrada__titulo {
  font-family: var(--caba-font-display);
  font-size: 30px; line-height: .9; letter-spacing: -.02em;
}
.caba-entrada--aspirante .caba-entrada__titulo { color: var(--caba-verde); }
.caba-entrada--asociado  .caba-entrada__titulo { color: var(--caba-paper); }
.caba-entrada__pie {
  margin-top: 8px; align-self: flex-start;
  border-bottom: 1px solid var(--caba-naranja); padding-bottom: 2px;
  font-size: 16px;
}

/* ---- Generic sections ---- */
.caba-seccion { padding-block: var(--caba-section); }
.caba-seccion__titulo { font-size: var(--caba-size-xl); margin-bottom: 24px; }
.caba-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; }
.caba-tarjeta img { display: block; width: 100%; }
.caba-tarjeta__titulo { font-size: var(--caba-size-lg); margin: 6px 0 0; }
.caba-tarjeta__titulo a { text-decoration: none; }
.caba-tarjeta__titulo a:hover { text-decoration: underline; text-decoration-color: var(--caba-naranja); }

.caba-seccion__cabecera {
  display: flex; flex-wrap: wrap; gap: 8px 32px;
  align-items: baseline; justify-content: space-between;
  border-bottom: var(--caba-rule-ink);
  padding-bottom: 12px; margin-bottom: 26px;
}
.caba-seccion__cabecera .caba-seccion__titulo { margin: 0; }

/* The handoff runs circulares/programación/noticias headings much larger than the shared
   .caba-seccion__titulo default (which page-efa.php also uses, so that base rule stays put).
   Scoped to each section's own wrapper instead of changed globally. */
.caba-circulares .caba-seccion__titulo,
.caba-noticias .caba-seccion__titulo,
.caba-programaciones .caba-seccion__titulo {
  font-size: clamp(3rem, 1rem + 3.6vw, 4rem); line-height: .9; letter-spacing: -.02em;
}
.caba-circulares .caba-seccion__titulo { text-transform: uppercase; letter-spacing: .01em; }

.caba-enlace-mas {
  color: var(--caba-verde); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid var(--caba-naranja); padding-bottom: 2px;
}
.caba-enlace-mas:hover { border-bottom-color: var(--caba-ink); }

/* The other "see more" link the handoff uses: body-text size, not the label face, with a
   thicker orange rule. Shared by the noticias header and the EFA "Requisitos" link — same
   inline style in both places in the handoff, just a different ground colour. */
.caba-enlace-subrayado {
  display: inline-block; background: none; border: 0; padding: 0 0 3px;
  color: var(--caba-ink); font-family: var(--caba-font-text); font-size: 17px;
  text-decoration: none; border-bottom: 2px solid var(--caba-naranja);
}
.caba-enlace-subrayado:hover { border-bottom-color: var(--caba-ink); }
.caba-efa .caba-enlace-subrayado { color: var(--caba-paper); }

.caba-tarjeta__meta { color: var(--caba-gris); margin: 10px 0 0; }
.caba-tarjeta__entradilla { font-size: var(--caba-size-sm); color: var(--caba-gris); margin: 8px 0 0; }

/* ---- Noticias: home ----
   Asymmetric layout — one large featured story, two smaller ones stacked beside it — matching
   the handoff. `.caba-rejilla`/`.caba-tarjeta` above are the general-purpose grid the noticias
   archive and other listings use; this page has its own classes because its shape is unique
   to the home and must not change what those other templates render. */
.caba-noticias { padding-block: clamp(44px, 5vw, 76px) clamp(24px, 3vw, 40px); }
.caba-seccion__cabecera--llana { border-bottom: 0; padding-bottom: 0; margin-bottom: 32px; }
.caba-noticias__cuerpo { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.caba-noticia__meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 10px; font-weight: 700; color: var(--caba-ink); }
.caba-noticia__meta .caba-num { font-weight: 500; color: var(--caba-gris); }
/* The featured story's meta sits 18px under its photograph and 12px above the headline. */
.caba-noticia-destacada .caba-noticia__meta { margin: 18px 0 12px; }

.caba-noticia-destacada { flex: 1 1 520px; }
.caba-noticia-destacada__foto {
  position: relative; display: block; overflow: hidden;
  width: 100%; height: min(44vw, 376px); min-height: 220px;
  background: var(--caba-ink);
}
.caba-noticia-destacada__foto::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 8px;
  background: var(--caba-naranja); z-index: 1;
}
/* Sin duotono, a diferencia del héroe. El tratamiento supone una fotografía: multiplicar un
   gris sobre naranja funciona con tonos medios, pero las noticias de CABA se ilustran con
   carteles de fondo blanco, y blanco × naranja da naranja plano — la imagen desaparecía
   entera. El héroe y la galería lo conservan porque ahí sí hay fotografía. */
.caba-noticia-destacada__foto img {
  display: block; width: 100%; height: 100%; background: var(--caba-naranja);
  object-fit: cover; object-position: 50% 20%;
}
.caba-noticia-destacada__franja { position: absolute; right: 0; top: 8px; bottom: 0; width: 48px; display: flex; flex-direction: column; }
.caba-noticia-destacada__franja span { flex: 1; }
.caba-noticia-destacada__franja span:nth-child(1),
.caba-noticia-destacada__franja span:nth-child(3),
.caba-noticia-destacada__franja span:nth-child(5) { background: var(--caba-verde); }
.caba-noticia-destacada__franja span:nth-child(2),
.caba-noticia-destacada__franja span:nth-child(6) { background: var(--caba-ink); }
.caba-noticia-destacada__franja span:nth-child(4) { background: var(--caba-naranja); }
.caba-noticia-destacada__titulo {
  margin: 0 0 14px; font-family: var(--caba-font-text); font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem); line-height: 1.12; color: var(--caba-ink);
}
.caba-noticia-destacada__titulo a { text-decoration: none; }
.caba-noticia-destacada__titulo a:hover { color: var(--caba-verde); }
.caba-noticia-destacada__entradilla { margin: 0; max-width: 64ch; font-size: 17px; line-height: 1.5; color: var(--caba-ink); }

.caba-noticias__secundarias {
  flex: 1 1 280px;
  display: flex; flex-direction: column; gap: 26px;
  margin-top: clamp(0px, 2vw, 40px);
}
.caba-noticia-secundaria { border-top: 1px solid var(--caba-ink); padding-top: 16px; }
.caba-noticia-secundaria--foto { border-top: 9px solid var(--caba-verde); }
.caba-noticia-secundaria__titulo {
  margin: 0 0 10px; font-family: var(--caba-font-text); font-weight: 700;
  font-size: 22px; line-height: 1.18; color: var(--caba-ink);
}
.caba-noticia-secundaria--foto .caba-noticia-secundaria__titulo { margin-bottom: 14px; }
.caba-noticia-secundaria__titulo a { text-decoration: none; }
.caba-noticia-secundaria__titulo a:hover { color: var(--caba-verde); }
.caba-noticia-secundaria__resumen { margin: 0; font-size: 16px; line-height: 1.5; color: var(--caba-ink); }
.caba-noticia-secundaria__foto {
  position: relative; display: block; overflow: hidden;
  width: 100%; height: 148px; background: var(--caba-ink);
}
.caba-noticia-secundaria__foto::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 6px; background: var(--caba-naranja);
}
.caba-noticia-secundaria__foto img {   /* sin duotono, igual que la destacada */
  display: block; width: 100%; height: 100%; background: var(--caba-naranja);
  object-fit: cover;
}

/* Primary action. Green, because orange is a fill colour and this carries text. */
.caba-boton {
  display: inline-block;
  background: var(--caba-verde); color: var(--caba-paper);
  padding: 13px 22px; text-decoration: none;
  font-family: var(--caba-font-label); font-weight: 700;
  font-size: var(--caba-size-label); letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 4px solid var(--caba-naranja);
}
.caba-boton:hover { background: var(--caba-ink); color: var(--caba-paper); }

/* ---- Cifras ----
   The mega figure + sentence is editorial copy (see front-page.php header for sourcing); the
   level-by-level list below the rule is counted from the database, never typed in. No boxes, no
   grid tiles — the handoff runs this as plain type, so the old bordered-tile hover-fill bug
   (the <a> not covering its <li>) is gone by construction, not patched.
   Round 2 turned the three-across row into a five-row list: one level per line, figure and
   label on a shared baseline, and the largest group promoted to display scale in verde. */
.caba-cifras { padding-block: clamp(56px, 6vw, 104px) clamp(28px, 3vw, 48px); }
.caba-cifras__cabecera { display: flex; flex-wrap: wrap; gap: 20px 56px; align-items: flex-end; }
.caba-cifras__mega {
  font-family: var(--caba-font-display); font-size: clamp(5rem, 2rem + 9vw, 13rem);
  line-height: .86; letter-spacing: -.02em; color: var(--caba-verde);
}
.caba-cifras__titulo {
  margin: 0 0 14px; max-width: 28ch;
  font-family: var(--caba-font-text); font-weight: 400;
  font-size: var(--caba-size-lg); line-height: 1.3; color: var(--caba-ink);
}
.caba-cifras__enfasis { font-weight: 700; }
.caba-cifras__lista {
  margin: clamp(28px, 3vw, 48px) 0 0 clamp(0px, 10vw, 196px);
  display: flex; flex-direction: column; border-top: var(--caba-rule-ink);
}
/* The row IS the link, so figure and label answer the hover together. */
.caba-cifras__fila {
  display: flex; flex-wrap: wrap; gap: 6px 32px; align-items: baseline;
  padding: 15px 0; border-bottom: var(--caba-rule); text-decoration: none;
}
.caba-cifras__lista .caba-cifras__fila:last-child { border-bottom: var(--caba-rule-ink); }
.caba-cifras__fila-num {
  flex: 0 0 104px;
  font-family: var(--caba-font-display); font-size: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
  line-height: .9; letter-spacing: -.01em; color: var(--caba-ink);
}
.caba-cifras__fila-rotulo { flex: 1 1 260px; font-size: 18px; line-height: 1.35; color: var(--caba-ink); }
.caba-cifras__fila--mayor .caba-cifras__fila-num {
  font-size: clamp(3rem, 1.5rem + 3vw, 4.75rem); letter-spacing: -.02em; color: var(--caba-verde);
}
/* The label takes naranja-tinta (~5.1:1 on paper), never the display orange: at 18px that
   would fail AA. */
.caba-cifras__fila:hover .caba-cifras__fila-num    { color: var(--caba-naranja); }
.caba-cifras__fila:hover .caba-cifras__fila-rotulo { color: var(--caba-naranja-tinta); }

/* ---- Tables: consulted, not browsed. Scroll inside the frame, never past the page edge. ----
   Every rule is scoped under .caba-tabla-marco on purpose. `.caba-tabla` used to collide with
   the EFA convocatorias table in editorial.css; that table now has its own class
   (.caba-tabla-convocatorias, see editorial.css), so this one is free to match the handoff's
   own table colour (verde thead) without risk of the old green-on-green bleed. */
.caba-tabla-marco { overflow-x: auto; border: var(--caba-rule); max-width: 100%; }
.caba-tabla-marco .caba-tabla { min-width: 760px; width: 100%; font-size: var(--caba-size-sm); }
.caba-tabla-marco .caba-tabla th,
.caba-tabla-marco .caba-tabla td {
  padding: 13px 16px; text-align: left; vertical-align: top; background: transparent;
}
.caba-tabla-marco .caba-tabla thead th {
  font-family: var(--caba-font-label); font-weight: 700;
  font-size: var(--caba-size-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--caba-paper); background: var(--caba-verde); white-space: nowrap;
}
.caba-tabla-marco .caba-tabla tbody tr + tr { border-top: var(--caba-rule); }
.caba-tabla-marco .caba-tabla tbody tr:hover { background: rgba(37, 111, 48, .07); }
.caba-tabla-marco .caba-tabla tbody th {
  font-family: var(--caba-font-text); font-weight: 700;
  font-size: var(--caba-size-sm); color: var(--caba-ink);
}
/* The first and last cells keep their padding: the EFA table strips it to sit flush with a
   bare column, but this one lives inside a bordered frame and would touch the rule. */
.caba-tabla-marco .caba-tabla td:first-child,
.caba-tabla-marco .caba-tabla th:first-child { padding-left: 20px; }
.caba-tabla-marco .caba-tabla td:last-child,
.caba-tabla-marco .caba-tabla th:last-child {
  padding-right: 20px; text-align: right; white-space: nowrap;
}
.caba-tabla-marco .caba-tabla a { text-decoration: none; border-bottom: 2px solid var(--caba-naranja); padding-bottom: 1px; }
.caba-tabla-marco .caba-tabla a:hover { color: var(--caba-verde); border-bottom-color: var(--caba-ink); }

/* N.º column: display font, matching the handoff's treatment of every reglamento figure. Row 1
   alone carries the three-bar marker (la franja arbitral, again); later rows reserve the same
   25px so every N.º lines up regardless. */
.caba-tabla-marco .caba-tabla td:first-child { font-family: var(--caba-font-display); font-size: 20px; }
.caba-tabla__numero { display: inline-flex; align-items: center; gap: 12px; padding-left: 25px; }
.caba-tabla__numero--marcado { padding-left: 0; }
.caba-tabla__marca { display: flex; height: 20px; width: 13px; flex: none; }
.caba-tabla__marca span { flex: 1; }
.caba-tabla__marca span:nth-child(1), .caba-tabla__marca span:nth-child(3) { background: var(--caba-verde); }
.caba-tabla__marca span:nth-child(2) { background: var(--caba-naranja); }
.caba-tabla__vigente { color: var(--caba-verde); }
.caba-tabla__no-vigente { color: var(--caba-gris); }
.caba-tabla-marco .caba-tabla th:nth-child(1) { width: 104px; }
.caba-tabla-marco .caba-tabla th:nth-child(2) { width: 130px; }
.caba-tabla-marco .caba-tabla th:nth-child(3) { width: 138px; }
.caba-tabla-marco .caba-tabla th:nth-child(5) { width: 116px; }
.caba-tabla-marco .caba-tabla th:nth-child(6) { width: 88px; }

/* ---- Document lists (programaciones on the home) ---- */
.caba-lista-documentos { list-style: none; margin: 22px 0 0; padding: 0; border-top: var(--caba-rule); }
.caba-lista-documentos li {
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline;
  padding: 13px 0; border-bottom: var(--caba-rule);
}
.caba-lista-documentos li > a:first-child { flex: 1 1 260px; text-decoration: none; font-weight: 700; }
.caba-lista-documentos li > a:first-child:hover { color: var(--caba-verde); }
.caba-lista-documentos .caba-label { color: var(--caba-gris); }
.caba-lista-documentos a.caba-label { color: var(--caba-naranja-tinta); text-decoration: none; border-bottom: 1px solid var(--caba-naranja); }
.caba-programaciones__bajada { max-width: 58ch; color: var(--caba-gris); margin: 0; }

/* ---- EFA band ----
   Verde ground, not ink — the handoff's own colour, and the reason the "Preinscribirme" CTA
   below is light-on-green rather than the page's usual green .caba-boton (which would vanish
   on this background). Two columns: status + pitch on the left, the next convocatoria's facts
   on the right, in a paper card that only renders when a real convocatoria backs it. */
.caba-efa { background: var(--caba-verde); color: var(--caba-paper); padding-block: clamp(48px, 5vw, 96px) clamp(44px, 5vw, 88px); }
.caba-efa__cuerpo { display: flex; flex-wrap: wrap; gap: 56px; align-items: stretch; }
.caba-efa__texto { flex: 1 1 520px; }

.caba-efa__rotulo { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 22px; color: var(--caba-paper); }
.caba-efa__estado { font-weight: 700; padding: 4px 9px; border: 1px solid var(--caba-linea); color: var(--caba-paper); }
.caba-efa__estado--abierta { border: 0; color: var(--caba-ink); background: var(--caba-naranja); padding: 5px 9px; }
.caba-efa__estado--proxima { border-color: var(--caba-paper); }
.caba-efa__estado--cerrada { font-weight: 500; }

.caba-efa__titulo {
  font-size: clamp(3rem, 1rem + 4.4vw, 5.5rem); line-height: .88; margin: 0 0 24px;
  letter-spacing: -.02em; color: var(--caba-paper); max-width: 20ch;
}
.caba-efa__bajada { max-width: 60ch; font-size: var(--caba-size-md); line-height: 1.45; margin: 0 0 34px; color: var(--caba-paper); }
.caba-efa__acciones { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.caba-efa__cta {
  display: inline-block; border: 0; padding: 17px 24px; text-decoration: none;
  font-family: var(--caba-font-label); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
}
.caba-efa__cta--abierta { background: var(--caba-paper); color: var(--caba-ink); }
.caba-efa__cta--proxima { background: var(--caba-naranja); color: var(--caba-ink); }
.caba-efa__cerrada {
  border: 1px solid var(--caba-linea); padding: 17px 24px; color: var(--caba-paper); font-weight: 500;
}

/* The next-convocatoria card. Every row is a real field; a row simply doesn't print when the
   convocatoria doesn't carry it (there is no "inicio de clases" field on the CPT yet, so that
   row from the handoff has no home here — never filled with a placeholder date). */
.caba-efa__tarjeta {
  flex: 1 1 320px; max-width: 404px;
  background: var(--caba-paper); color: var(--caba-ink);
  padding: 26px 30px 24px; display: flex; flex-direction: column;
}
.caba-efa__tarjeta-etiqueta {
  color: var(--caba-verde); padding-bottom: 14px; border-bottom: 1px solid var(--caba-verde); margin: 0;
}
.caba-efa__fila {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 13px 0; border-bottom: var(--caba-rule); font-size: 16px;
}
.caba-efa__fila--costo { border-bottom: 0; font-weight: 700; }
.caba-efa__fila--costo span:last-child { color: var(--caba-verde); }
.caba-efa__tarjeta-franja { display: flex; height: 15px; width: 100%; margin-top: auto; }
.caba-efa__tarjeta-franja span { flex: 1; }
.caba-efa__tarjeta-franja span:nth-child(odd)  { background: var(--caba-verde); }
.caba-efa__tarjeta-franja span:nth-child(even) { background: var(--caba-paper); }
.caba-efa__tarjeta-franja span:nth-child(6)    { background: var(--caba-naranja); }

/* ---- Reconocimientos ----
   Two columns: heading + the association's own award citation on the left, a bordered list of
   rows (not a card grid) on the right — name/grantor left, "Grado Oro / year" right-aligned. */
.caba-reconocimientos { padding-block: clamp(52px, 6vw, 112px) clamp(36px, 4vw, 64px); }
.caba-reconocimientos__cuerpo { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.caba-reconocimientos__intro { flex: 1 1 420px; max-width: 34rem; }
.caba-reconocimientos__titulo {
  margin: 0 0 20px; font-size: clamp(3rem, 1rem + 3.2vw, 3.75rem);
  line-height: .9; letter-spacing: -.02em; color: var(--caba-verde);
}
.caba-reconocimientos__bajada { margin: 0; font-size: 17px; line-height: 1.55; color: var(--caba-ink); }
.caba-reconocimientos__lista { flex: 1 1 440px; display: flex; flex-direction: column; border-top: var(--caba-rule-ink); }
.caba-reconocimientos__fila {
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between;
  padding: 20px 0; border-bottom: var(--caba-rule);
}
.caba-reconocimientos__fila:last-child { border-bottom: 0; }
.caba-reconocimiento__quien { max-width: 34ch; }
.caba-reconocimiento__nombre { font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--caba-verde); }
.caba-reconocimiento__otorga { margin-top: 7px; font-size: 16px; color: var(--caba-ink); }
/* 10px, not the label default's 11px — the handoff runs this one figure smaller. */
.caba-reconocimiento__grado { font-size: 10px; color: var(--caba-ink); text-align: right; line-height: 1.9; white-space: nowrap; }

/* ---- El Profe Dice ----
   Verde ground. The piece sits left (order:1) and the article figure right (order:2), which is
   why the DOM order is the reverse. The band is Customizer-fed and renders nothing until the
   client writes a piece — see front-page.php. */
.caba-profe {
  background: var(--caba-verde); color: var(--caba-paper);
  padding: clamp(40px, 4vw, 64px) var(--caba-gutter) clamp(36px, 4vw, 56px);
  display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end;
}
.caba-profe__cifra { flex: 0 1 300px; order: 2; }
.caba-profe__articulo {
  font-family: var(--caba-font-display); font-size: clamp(4rem, 2rem + 4vw, 7.5rem);
  line-height: .86; letter-spacing: -.02em; color: var(--caba-paper);
}
/* Empty state: the figure inverts into a paper chip, so an announced-but-unwritten piece
   reads as a marker and not as a published article number. */
.caba-profe__articulo--vacio {
  display: inline-block; padding: 0 18px;
  background: var(--caba-paper); color: var(--caba-verde);
}
.caba-profe__fuente { margin: 14px 0 0; font-size: 16px; line-height: 1.45; color: var(--caba-paper); }
.caba-profe__cuerpo {
  flex: 1 1 520px; order: 1;
  border-right: 1px solid var(--caba-paper); padding-right: clamp(0px, 3vw, 48px);
}
.caba-profe__rotulo {
  display: inline-block; margin: 0 0 18px; padding: 5px 9px;
  font-weight: 700; color: var(--caba-ink); background: var(--caba-naranja);
}
.caba-profe__titulo {
  margin: 0 0 20px; max-width: 24ch;
  font-size: clamp(3rem, 1rem + 3.2vw, 4.25rem); line-height: .9; letter-spacing: -.02em;
  color: var(--caba-paper);
}
.caba-profe__texto { margin: 0 0 26px; max-width: 66ch; font-size: 18px; line-height: 1.5; color: var(--caba-paper); }
.caba-profe__cta {
  display: inline-block; background: var(--caba-paper); color: var(--caba-ink);
  padding: 15px 22px; text-decoration: none;
  font-family: var(--caba-font-label); font-weight: 700; font-size: var(--caba-size-label);
  letter-spacing: .12em; text-transform: uppercase;
}
.caba-profe .caba-profe__cta:hover { background: var(--caba-naranja); color: var(--caba-ink); }
/* Below ~1000px the two columns stack and a right-hand rule would hang in mid-air. */
@media (max-width: 999px) { .caba-profe__cuerpo { border-right: 0; padding-right: 0; } }

/* ---- Avales / socios ----
   Boxed slots, matching the handoff exactly (194×74, 1px border, 9px/11px padding) rather than
   the borderless "optically aligned" treatment this used to carry. Faithful replication over
   improving it: real marks are all different aspect ratios — FIBA is wide, the Fecolcesto shield
   is tall — so a fixed box does letterbox some of them. Flagged in the build report rather than
   quietly redesigned again. */
.caba-aliados-seccion { padding-block: clamp(24px, 3vw, 40px) clamp(40px, 4vw, 72px); }
.caba-aliados {
  display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: flex-start;
  padding-bottom: 30px; border-bottom: var(--caba-rule);
}
.caba-aliados--socio { border-bottom: 0; padding-bottom: 0; padding-top: 26px; margin-left: clamp(0px, 6vw, 120px); }
.caba-aliados__rotulo { flex: 0 0 186px; color: var(--caba-verde); font-weight: 700; margin: 0; line-height: 1.7; }
.caba-aliados--socio .caba-aliados__rotulo { color: var(--caba-ink); }
.caba-aliados__lista { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0; padding: 0; }
.caba-aliados__caja {
  display: flex; align-items: center; justify-content: center;
  width: 194px; height: 74px; box-sizing: border-box;
  border: 1px solid var(--caba-verde); padding: 9px 11px;
}
.caba-aliados--socio .caba-aliados__caja { border-color: var(--caba-linea); }
.caba-aliados__caja a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; line-height: 0; border: 0; }
.caba-aliados__caja img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* ---- Footer ----
   Ground is VERDE, not ink. Every value below is the handoff's; read it with
   `python3 scripts/design-spec.py` before changing one. */
.caba-pie {
  background: var(--caba-verde);
  color: var(--caba-paper);
  padding: clamp(44px, 4vw, 72px) var(--caba-gutter) 0;
  position: relative; z-index: 3;
}
.caba-pie__cuerpo { display: flex; flex-wrap: wrap; gap: 48px 64px; padding-bottom: 48px; }

/* Identity column */
.caba-pie__identidad { flex: 1 1 380px; max-width: 44rem; }
.caba-pie__marca { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.caba-pie__escudo { width: 56px; height: auto; flex: none; }
.caba-pie__sigla {
  font-family: var(--caba-font-display);
  font-size: 30px; line-height: .88; letter-spacing: .01em; color: var(--caba-paper);
}
.caba-pie__direccion { margin: 0; font-size: var(--caba-size-body); line-height: 1.6; }
.caba-pie__contacto {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-size: var(--caba-size-body);
}
.caba-pie__contacto a {
  color: var(--caba-paper); text-decoration: none;
  border-bottom: 1px solid var(--caba-naranja); padding-bottom: 3px;
}
.caba-pie__contacto a:hover { border-bottom-color: var(--caba-paper); }
.caba-mapa--pie { margin-top: 22px; max-width: 420px; border-color: var(--caba-paper); }

/* Link columns */
.caba-pie__columnas { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 32px 40px; }
.caba-pie__columna { flex: 1 1 200px; }
.caba-pie__rotulo {
  margin: 0 0 14px; padding-bottom: 12px;
  font-weight: 700; color: var(--caba-paper);
  border-bottom: 1px solid var(--caba-paper);
}
.caba-pie__rotulo a { color: inherit; text-decoration: none; }
.caba-pie__rotulo a:hover { color: var(--caba-naranja); }
.caba-pie__lista {
  display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
  font-size: var(--caba-size-body);
}
.caba-pie__lista a { color: var(--caba-paper); text-decoration: none; }
.caba-pie__lista a:hover,
.caba-pie__lista a.is-current { border-bottom: 1px solid var(--caba-naranja); }

/* Legal bar, below la franja */
.caba-pie__legal {
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  justify-content: space-between; align-items: center;
  padding: 22px 0 26px; margin: 0; color: var(--caba-paper);
}
.caba-pie__credito a {
  color: var(--caba-paper); text-decoration: none;
  border-bottom: 1px solid var(--caba-naranja); padding-bottom: 2px;
}
.caba-pie__credito a:hover { border-bottom-color: var(--caba-paper); }