/* CALA — Cámara Americana de Latinos Avanzando. Hoja de estilo única.
 *
 * La paleta NO está inventada: sale del logotipo, medida color por color del
 * archivo. El celeste de la estrella, el verde de las figuras, el dorado del
 * mapa de Texas. Nada más se agregó; los neutros son papel y tinta.
 *
 * El logotipo ya trae mucho color, así que el sitio es deliberadamente sobrio:
 * fondos claros, una sola sección oscura por bloque de argumento, y el color
 * puesto donde sostiene una idea — nunca de relleno.
 *
 * No hay estilos en línea en ninguna plantilla: la política de contenido del
 * servidor prohíbe el atributo style=, así que un estilo suelto no se ve gris,
 * se ve roto. Todo vive aquí.
 */

@font-face {
  font-family: "Fraunces";
  src: url("/fuentes/fraunces-var.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Sans";
  src: url("/fuentes/plexsans-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Medidos del logotipo ── */
  --celeste:       #42c2f3;   /* punta de la estrella */
  --azul:          #1e90c2;   /* azul de la sigla C·A·L·A */
  --azul-hondo:    #10699d;   /* «LATINOS AVANZANDO» */
  --verde:         #369440;   /* figuras y los iconos de valores */
  --verde-hondo:   #1b6940;
  --dorado:        #d6a83f;   /* mapa de Texas y el trazo */
  --dorado-claro:  #e8c46a;

  /* ── Derivados para fondos oscuros ── */
  --noche:         #0a3f5f;
  --noche-hondo:   #062c44;

  /* ── Papel y tinta ── */
  --blanco:        #ffffff;
  --hueso:         #f5f8fa;
  --crema:         #faf6ee;
  --tinta:         #16232c;
  --tinta-suave:   #4c5c68;
  --tinta-tenue:   #78858f;
  --linea:         #dce4ea;
  --linea-clara:   #e9eef2;

  /* El rojo de la casa. MISMO VALOR que `--peligro` en `panel.css`: el
     portal y el sitio público son la misma marca, y dos rojos distintos
     se notan aunque nadie sepa decir por qué. Se añadió el 2026-09-18
     porque `.nota--mal` lo usaba y aquí no existía: la regla llevaba
     muerta en silencio desde que se escribió. */
  --peligro:       #9f1239;

  /* ── Aviso de revisión ── */
  --ambar:         #fff6e2;
  --ambar-borde:   #d99b2b;
  --ambar-tinta:   #6b4a08;

  --ancho:         1180px;
  --ancho-angosto: 760px;
  --radio:         6px;
  --sombra:        0 1px 2px rgba(10,63,95,.05), 0 18px 40px -28px rgba(10,63,95,.4);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
  font-weight: 400;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-hondo); }
a:hover { color: var(--verde-hondo); }

h1, h2, h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.45rem); font-weight: 500; }
h2 { font-size: clamp(1.55rem, 3.3vw, 2.3rem); margin-bottom: .7em; }
h3 { font-size: 1.14rem; font-weight: 600; }
p { margin: 0 0 1.1em; }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
/* El encabezado de sección fluye con el contenedor. Antes iba clavado a 760px
   mientras las rejillas de abajo medían 1180: el párrafo terminaba cuatro dedos
   antes que las tarjetas y se leía como texto cortado, no como medida de lectura. */
.angosto { max-width: min(100%, var(--ancho)); }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--noche); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 8px 0;
}
.saltar:focus { left: 0; }

:focus-visible { outline: 3px solid var(--dorado); outline-offset: 2px; }

/* La franja azul→verde→dorado es el trazo del logotipo convertido en regla.
   Se usa como remate de la cabecera y como separador entre bloques. */
.franja {
  height: 4px;
  background: linear-gradient(90deg, var(--celeste) 0%, var(--azul) 28%, var(--verde) 66%, var(--dorado) 100%);
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */

.cabecera {
  background: var(--blanco);
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 1px 0 var(--linea-clara), 0 6px 20px -18px rgba(10,63,95,.5);
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: .7rem 0;
}
/* `flex-shrink: 0` NO ES ADORNO — cura un defecto medido el 2026-09-18.
 *
 * `.cabecera__fila` es un flex, y por omisión TODO hijo de un flex se puede
 * encoger. Cuando el menú no cabe —entre 901px y el ancho en que la fila
 * empieza a apretar— el navegador reparte el recorte, y la marca es lo que
 * cede: a 901px se había encogido hasta CERO y la cabecera salía sin
 * logotipo, con el menú empezando pegado al borde izquierdo.
 *
 * No fallaba nada y no había error en ninguna consola: sólo no estaba. Lo
 * cazó una captura a 901px, que es justo el ancho de un pelo por encima del
 * punto de quiebre del menú — el que nadie mira porque «ahí ya es
 * escritorio».
 *
 * Lo que cede es el MENU, que para eso tiene su regla de encoger letra y
 * hueco en el tramo 901–1300. La marca es lo último que debe desaparecer de
 * una cabecera. */
.marca { display: block; line-height: 0; flex-shrink: 0; }
/* LA MARCA ES CUADRADA desde el 2026-09-18 (Isaac: «hay que usar sólo la de
   la estrella, para que se vea cuadrada»). Antes era el lockup horizontal
   —estrella + «C.A.L.A» + dos renglones de nombre— apretado en 52 píxeles de
   alto: el nombre no se leía y se comía el ancho que el menú necesitaba.

   58 Y NO 52: un emblema cuadrado tiene menos masa visual que un lockup
   ancho de la misma altura, y a 52 se leía como un icono pequeño al lado del
   menú. Seis píxeles más lo devuelven al peso que tenía, y la cabecera sólo
   crece eso. El archivo va recortado AL RAS a propósito: el aire lo pone esta
   hoja, no el PNG, porque un margen metido dentro de la imagen no se puede
   quitar desde aquí. */
.marca img { height: 58px; width: auto; }

.nav { display: flex; align-items: center; gap: 1.3rem; }
/* `:not(.boton)` NO ES ADORNO — cura un defecto medido.
 *
 * `.nav a` pesa (0,1,1) y `.boton` pesa (0,1,0): el selector del menu le
 * GANABA al del boton, asi que el llamado principal del sitio —«Quiero
 * afiliarme», blanco sobre verde por diseño— se pintaba con `--tinta-suave`
 * (#4c5c68) sobre `--verde` (#369440): **1.80:1**. El minimo para 14 px es
 * 4.5:1. No era «se ve grisáceo»: era ilegible, y llevaba asi desde que
 * nacio el sitio. Lo cazo Isaac mirando, no una prueba.
 *
 * Se excluye la CLASE, no el boton de hoy: cualquier boton que entre al menu
 * mañana queda curado sin que nadie se acuerde. Subir la especificidad de
 * `.boton` habria curado este y dejado el siguiente esperando. */
.nav a:not(.boton) {
  color: var(--tinta-suave); text-decoration: none;
  font-size: .875rem; font-weight: 500;
}
.nav a:not(.boton):hover { color: var(--azul-hondo); }
.nav__idioma {
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: .2rem .7rem;
  font-size: .8rem !important;
}

.menu__casilla, .menu__boton { display: none; }

/* ── Botones ────────────────────────────────────────────────────────────── */

.boton {
  display: inline-block;
  background: var(--verde);
  color: var(--blanco);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: .82rem 1.7rem;
  border-radius: var(--radio);
  border: 1px solid var(--verde);
  transition: background .16s ease, transform .16s ease;
}
.boton:hover { background: var(--verde-hondo); color: var(--blanco); transform: translateY(-1px); }
.boton--chico { padding: .48rem 1.05rem; font-size: .875rem; }
.boton--dorado { background: var(--dorado); border-color: var(--dorado); color: #34260a; }
.boton--dorado:hover { background: var(--dorado-claro); color: #34260a; }

.enlace-fuerte {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--dorado);
  padding-bottom: 2px;
}
.enlace-fuerte:hover { border-bottom-color: var(--verde); }

/* ── Cintilla de revisión ───────────────────────────────────────────────── */

/* Va al final de la página: es nota de trabajo interno, no un anuncio para
   quien llega. Por eso el borde marca arriba y no abajo. */
.cintilla {
  background: var(--ambar);
  border-top: 1px solid var(--ambar-borde);
  color: var(--ambar-tinta);
  font-size: .855rem;
  padding: .55rem 0;
}
.cintilla a { color: var(--ambar-tinta); }

.nota {
  background: var(--ambar);
  border-left: 3px solid var(--ambar-borde);
  color: var(--ambar-tinta);
  font-size: .86rem;
  line-height: 1.55;
  padding: .7rem .9rem;
  margin: .9rem 0 1.2rem;
  border-radius: 0 var(--radio) var(--radio) 0;
}
.nota--oscura { background: rgba(255,246,226,.94); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  background: var(--noche);
  color: #dae7ef;
  padding: clamp(2.6rem, 5.5vw, 4rem) 0 clamp(2.4rem, 5vw, 3.4rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* La fotografía de los cuatro horizontes de Texas. Va detrás de todo y el
   encuadre se ancla al centro-derecha: ahí están los edificios, y el lado
   izquierdo —cielo abierto— es justo donde cae el titular. */
.hero__fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% 62%;
  z-index: -2;
}

/* El velo. Dos capas a propósito: la horizontal oscurece el lado del texto y
   se abre hacia la ciudad; la vertical asienta el pie del hero para que el
   sello legal se lea. Sin esto el titular blanco cae sobre el cielo dorado. */
.hero__velo {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(6,32,49,.90) 0%,
      rgba(6,32,49,.78) 30%,
      rgba(8,45,68,.46) 60%,
      rgba(8,45,68,.16) 100%),
    linear-gradient(180deg,
      rgba(6,32,49,.30) 0%,
      rgba(6,32,49,.22) 42%,
      rgba(6,32,49,.18) 72%,
      rgba(6,32,49,.48) 100%);
}
.hero__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 3rem;
  align-items: center;
}
.hero h1 { color: var(--blanco); max-width: 15ch; }
.hero .entrada { font-size: 1.16rem; max-width: 54ch; color: #c3d6e3; }
.hero .entrada b { color: var(--blanco); font-weight: 600; }

.kicker {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--dorado-claro);
  margin-bottom: 1.1rem;
  font-weight: 600;
}

.hero__lema {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  color: var(--dorado-claro);
  letter-spacing: .02em;
  margin: 0 0 1.6rem;
}

.hero__acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem;
  margin: 1.8rem 0 2.1rem;
}
.hero__acciones .enlace-fuerte { color: #c3d6e3; border-bottom-color: rgba(214,168,63,.6); }
.hero__acciones .enlace-fuerte:hover { color: var(--blanco); }

.hero__sello {
  font-size: .88rem; color: #a9c1d2; margin-bottom: .2rem;
  padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.14);
}
.hero__prueba { font-size: .8rem; color: #7fa0b6; margin: 0; }


/* ── Cintilla de los cuatro pilares ─────────────────────────────────────── */

/* Va pegada al hero y hace de puente entre la promesa y el argumento. El borde
   superior es el mismo trazo del logotipo, para que la franja se lea como parte
   de la marca y no como una barra suelta. */
.pilares {
  background: var(--noche-hondo);
  color: #c6d5e3;
  padding: 0;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--celeste), var(--azul) 30%, var(--verde) 66%, var(--dorado)) 1;
}
.pilares__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.pilar {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.7rem 1.6rem 1.8rem;
  border-left: 1px solid rgba(255,255,255,.10);
}
.pilar:first-child { border-left: 0; }
.pilar__nombre {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.42rem;
  color: var(--blanco);
  line-height: 1.1;
}
.pilar__texto {
  font-size: .88rem;
  color: #9fb8ca;
  line-height: 1.45;
}

/* ── Secciones ──────────────────────────────────────────────────────────── */

.seccion { padding: clamp(3rem, 6.5vw, 5.2rem) 0; }
.seccion--hueso { background: var(--hueso); }
.seccion--crema { background: var(--crema); }
.seccion--oscura { background: var(--noche); color: #c3d6e3; }

.rotulo {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .19em;
  color: var(--verde-hondo); font-weight: 600;
  margin-bottom: .9rem;
}
.rotulo::after {
  content: ""; display: block; width: 46px; height: 3px;
  background: linear-gradient(90deg, var(--azul), var(--verde));
  margin-top: .55rem;
}
.rotulo--claro { color: var(--dorado-claro); }
.rotulo--claro::after { background: linear-gradient(90deg, var(--celeste), var(--dorado)); }
.titulo--claro { color: var(--blanco); }
.claro { color: #c3d6e3; }
.claro b { color: var(--blanco); }
.tenue { color: #87a5b9; font-size: .9rem; }
.destacado { font-size: 1.3rem; }

/* El remate de una sección oscura: cierra el argumento y tiene que pesar más
   que los párrafos que lo preceden, sin llegar al tamaño de un título — si
   compite con el h2, la sección parece tener dos encabezados. */
.remate {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.35rem, 2.4vw, 1.72rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--blanco);
  margin: 1.9rem 0 0;
  max-width: 34ch;
  /* Reparte las líneas para que ninguna quede con una palabra suelta: sin
     esto, «Texas.» caía solo en un tercer renglón. */
  text-wrap: balance;
}
.entrada { font-size: 1.1rem; color: var(--tinta-suave); }
.sub { margin-top: 2.2rem; }

/* ── Cita ───────────────────────────────────────────────────────────────── */

.cita {
  margin: 2.2rem 0;
  padding: 1.3rem 0 1.3rem 1.6rem;
  border-left: 3px solid var(--dorado);
}
.cita p {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.28rem;
  line-height: 1.4;
  margin-bottom: .6rem;
}
/* Cuando la cita no lleva atribución, el hueco de la firma no tiene por qué
   quedarse: el bloque cierra en la última línea. */
.cita p:last-child { margin-bottom: 0; }
.cita cite {
  font-style: normal; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--tinta-tenue);
}

/* ── Los cuatro valores ─────────────────────────────────────────────────── */

.valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 1.6rem;
  margin-top: 2.4rem;
}
.valor { border-top: 3px solid; padding-top: 1rem; }
.valor:nth-child(1) { border-color: var(--azul); }
.valor:nth-child(2) { border-color: var(--verde); }
.valor:nth-child(3) { border-color: var(--celeste); }
.valor:nth-child(4) { border-color: var(--dorado); }
.valor h3 { margin-bottom: .35rem; color: var(--tinta); }
.valor p { margin: 0; font-size: .93rem; color: var(--tinta-suave); }

/* ── Misión y visión ────────────────────────────────────────────────────── */

.mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-top: 1.8rem;
}
.mv__carta {
  border-top: 4px solid;
  padding: 1.5rem 0 0;
}
.mv__carta--mision { border-color: var(--azul); }
.mv__carta--vision { border-color: var(--dorado); }
.mv__carta h2 {
  font-size: 1.55rem;
  margin-bottom: .6rem;
}
.mv__carta p {
  color: var(--tinta-suave);
  font-size: 1.03rem;
  max-width: 46ch;
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .mv { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── Tarjetas de beneficio ──────────────────────────────────────────────── */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea-clara);
  border-top: 3px solid var(--azul);
  border-radius: var(--radio);
  padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: var(--sombra);
}
.tarjeta__num {
  font-family: "Fraunces", Georgia, serif;
  font-size: .95rem;
  color: var(--dorado);
  letter-spacing: .08em;
  display: block;
  margin-bottom: .5rem;
}
.tarjeta h3 { margin-bottom: .45rem; }
/* Beneficios por categoría (pendiente 128, 2026-10-07): la categoría es el
   h3 y cada tarjeta un h4 que se ve igual que el h3 de siempre. */
.grupo-beneficios { margin-top: 3rem; }
.grupo-beneficios > .tarjetas { margin-top: 1.2rem; }
.tarjeta h4 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 1.14rem; font-weight: 600; line-height: 1.14;
  letter-spacing: -0.012em; margin: 0 0 .45rem;
}
.tarjeta p { margin: 0; font-size: .945rem; color: var(--tinta-suave); line-height: 1.6; }
.tarjeta--nota {
  background: var(--crema);
  border-top-color: var(--dorado);
  display: grid; align-content: center;
}
.tarjeta--nota p { color: var(--tinta); }

/* ── Lista de lo que hacemos afuera ─────────────────────────────────────── */

.lista-afuera {
  list-style: none; margin: 2.3rem 0 0; padding: 0;
  border-top: 1px solid var(--linea);
}
.lista-afuera li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1rem 2.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--linea);
}
.lista-afuera h3 { margin: 0; color: var(--azul-hondo); }
.lista-afuera p { margin: 0; color: var(--tinta-suave); }

/* ── Niveles de membresía ───────────────────────────────────────────────── */

.niveles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1.4rem;
  margin: 2.4rem 0 2rem;
  align-items: start;
}
.nivel {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.6rem 1.4rem;
  display: flex; flex-direction: column;
}
.nivel::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--radio) var(--radio) 0 0;
}
.nivel--plata::before    { background: #9fb4bf; }
.nivel--oro::before      { background: var(--dorado); }
.nivel--platino::before  { background: var(--azul); }
.nivel--diamante::before { background: linear-gradient(90deg, var(--celeste), var(--verde)); }

.nivel h3 { color: var(--tinta); margin: .4rem 0 .1rem; font-size: 1.3rem; }
/* La clase de estatutos, debajo del nombre de venta: dice de quién es este
   nivel antes de decir qué trae. Va en verde para que se lea como etiqueta y
   no como parte del lema. */
.nivel__clase {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--verde-hondo); font-weight: 600; margin: 0 0 .35rem;
}
.nivel__lema { font-size: .88rem; color: var(--tinta-tenue); margin-bottom: 1rem; }

.nivel__regular {
  font-size: .88rem; color: var(--tinta-tenue);
  margin: 0 0 .1rem;
}
.nivel__regular s { text-decoration-thickness: 1.5px; }
.nivel__precio {
  font-family: "Fraunces", Georgia, serif;
  margin: 0 0 .3rem;
  color: var(--verde-hondo);
}
.nivel__precio b { font-size: 2.1rem; font-weight: 600; letter-spacing: -.015em; }
.nivel__precio span {
  font-size: .85rem; color: var(--tinta-tenue); font-family: "Plex Sans", sans-serif;
  white-space: nowrap;
}
/* La raya que separa el precio de la lista de beneficios vivía colgada del
   valor estimado. Al quitar aquel renglón se habría ido con él, y el precio
   quedaría pegado al primer beneficio: se muda al borde superior de la lista,
   que es de quien era el trabajo. */
.nivel ul {
  margin: 0; padding: .9rem 0 0; list-style: none;
  border-top: 1px solid var(--linea-clara);
}
.nivel li {
  font-size: .89rem; color: var(--tinta-suave);
  padding-left: 1.2rem; margin-bottom: .5rem;
  position: relative; line-height: 1.5;
}
.nivel li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--verde);
}
/* El botón de cada tarjeta, pegado abajo. `margin-top:auto` dentro del flex
   de `.nivel` es lo que hace que los cuatro queden a la MISMA altura aunque
   las listas de beneficios midan distinto — sin eso, el de Plata (seis
   viñetas) sube y el de Diamante (ocho) baja, y la rejilla se ve rota. */
.nivel__pie { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linea-clara);
              margin-top: auto; }
.nivel__pie .boton { display: block; text-align: center; }

.nivel--destacado { border-color: var(--azul); border-width: 2px; box-shadow: var(--sombra); }
.nivel__cinta {
  position: absolute; top: -.75rem; left: 1.4rem;
  background: var(--azul); color: var(--blanco);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
  padding: .22rem .6rem; border-radius: 999px;
  margin: 0;
}

.aviso-descuento {
  display: inline-block;
  background: var(--dorado);
  color: #34260a;
  font-weight: 600;
  font-size: .95rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}
.pie-nivel { font-size: .9rem; color: var(--tinta-suave); margin-bottom: .7rem; }
.pie-nivel--tenue { font-size: .84rem; color: var(--tinta-tenue); }

/* ── Charter Member ─────────────────────────────────────────────────────── */

.charter {
  background: var(--noche);
  color: #c3d6e3;
  padding: clamp(3rem, 6.5vw, 5rem) 0;
}
.charter__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.charter__sello {
  display: inline-block;
  border: 2px solid var(--dorado);
  color: var(--dorado-claro);
  font-family: "Fraunces", Georgia, serif;
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .5rem 1.2rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.charter ul { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.charter li {
  padding-left: 1.5rem; margin-bottom: .7rem; position: relative;
  color: #c3d6e3; font-size: .95rem;
}
.charter li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dorado);
}
.taller {
  background: rgba(255,255,255,.05);
  border-left: 3px solid var(--celeste);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  border-radius: 0 var(--radio) var(--radio) 0;
}
.taller h3 { color: var(--blanco); margin-bottom: .3rem; font-size: 1.05rem; }
.taller p { margin: 0; font-size: .92rem; color: #b1c8d8; }

/* ── Ruta de educación ──────────────────────────────────────────────────── */

.ruta-edu { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 1rem; }
.ruta-edu li {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: .6rem 2rem;
  background: var(--blanco);
  border: 1px solid var(--linea-clara);
  border-left: 4px solid var(--azul);
  border-radius: var(--radio);
  padding: 1.2rem 1.4rem;
}
.ruta-edu li:nth-child(2) { border-left-color: var(--verde); }
.ruta-edu li:nth-child(3) { border-left-color: var(--celeste); }
.ruta-edu li:nth-child(4) { border-left-color: var(--azul-hondo); }
.ruta-edu li:nth-child(5) { border-left-color: var(--dorado); }
.ruta-edu h3 { margin: 0; color: var(--tinta); }
.ruta-edu .para { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-tenue); margin: .2rem 0 0; }
.ruta-edu p:last-child { margin: 0; color: var(--tinta-suave); font-size: .95rem; }

/* ── Tabla del pacto ────────────────────────────────────────────────────── */

.tabla-envoltura { overflow-x: auto; margin: 1.8rem 0 2rem; }
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
}
.tabla th {
  background: var(--noche);
  color: var(--blanco);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: left;
  padding: .75rem .9rem;
  white-space: nowrap;
}
.tabla td {
  padding: .7rem .9rem;
  border-top: 1px solid var(--linea-clara);
  color: var(--tinta-suave);
}
.tabla td:first-child { color: var(--tinta); font-weight: 600; }
.tabla tbody tr:last-child td { color: var(--verde-hondo); font-weight: 600; }

.lista-reglas { margin: 1.2rem 0 0; padding: 0; list-style: none; }
.lista-reglas li {
  padding: 1rem 0 1rem 1.5rem;
  border-top: 1px solid var(--linea);
  position: relative;
  color: var(--tinta-suave);
}
.lista-reglas li::before {
  content: "";
  position: absolute; left: 0; top: 1.55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dorado);
}
.lista-reglas b { color: var(--tinta); }

/* ── El consejo ─────────────────────────────────────────────────────────── */

/* La línea que invita a mirar las tarjetas. No es un párrafo más: cierra el
   texto y abre la galería, así que va en la serif de los títulos y con la regla
   corta debajo, para que el ojo la lea como puerta y no como pie de página. */
.invitacion {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.2rem;
  color: var(--azul-hondo);
  margin: 1.6rem 0 0;
}
.invitacion::after {
  content: "";
  display: block;
  width: 54px; height: 3px;
  background: linear-gradient(90deg, var(--azul), var(--verde));
  margin-top: .7rem;
}

.consejo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 1.6rem;
  margin-top: 2.4rem;
}
.persona {
  background: var(--blanco);
  border: 1px solid var(--linea-clara);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex; flex-direction: column;
}
.persona__foto { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.persona__sinfoto {
  width: 100%; aspect-ratio: 1 / 1;
  background: var(--hueso);
  display: grid; place-items: center;
  color: var(--tinta-tenue);
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.6rem;
  border-bottom: 1px solid var(--linea-clara);
}
.persona__cuerpo { padding: 1.2rem 1.3rem 1.4rem; }
.persona h3 { margin-bottom: .15rem; font-size: 1.1rem; }
.persona__cargo {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--verde-hondo); font-weight: 600; margin-bottom: .2rem;
}
/* El área de trabajo va debajo del cargo estatutario y en otro tono: el cargo
   dice qué firma esa persona ante el estado; la Dirección dice de qué responde
   ante un socio que necesita algo. Son dos ejes, no dos nombres de lo mismo. */
.persona__area {
  font-size: .78rem; line-height: 1.35;
  color: var(--azul-hondo); font-weight: 600; margin-bottom: .7rem;
}
.persona__bio { font-size: .9rem; color: var(--tinta-suave); margin-bottom: .7rem; }
.persona__cita {
  font-family: "Fraunces", Georgia, serif;
  font-size: .95rem;
  color: var(--azul-hondo);
  border-top: 1px solid var(--linea-clara);
  padding-top: .8rem;
  margin: 0;
}

/* ── Ruta del primer año ────────────────────────────────────────────────── */

.ruta {
  list-style: none; margin: 2.5rem 0 0; padding: 0 0 0 1.9rem;
  border-left: 2px solid var(--linea);
  counter-reset: hito;
}
.ruta li { position: relative; padding-bottom: 1.8rem; counter-increment: hito; }
.ruta li:last-child { padding-bottom: 0; }
.ruta li::before {
  content: counter(hito);
  position: absolute; left: -2.85rem; top: -.1rem;
  width: 1.95rem; height: 1.95rem;
  border-radius: 50%;
  background: var(--azul-hondo); color: var(--blanco);
  font-family: "Fraunces", Georgia, serif;
  font-size: .95rem;
  display: grid; place-items: center;
}
.ruta h3 { margin-bottom: .3rem; color: var(--azul-hondo); }
.ruta p { margin: 0; color: var(--tinta-suave); max-width: 62ch; }

/* ── Preguntas ──────────────────────────────────────────────────────────── */

.faq { margin-top: 2rem; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.4rem 1.15rem 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--azul-hondo);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: .3rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400;
  color: var(--dorado);
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 1.3rem; color: var(--tinta-suave); max-width: 68ch; }

/* ── Cierre ─────────────────────────────────────────────────────────────── */

.cierre {
  background: var(--noche-hondo);
  color: #c3d6e3;
  padding: clamp(3.2rem, 6.5vw, 5.2rem) 0;
}
.contacto__datos {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.14);
}
.contacto__grande {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.42rem;
  color: var(--blanco);
  margin-bottom: .35rem;
}

/* ── Página interior sencilla ───────────────────────────────────────────── */

.interior { padding: clamp(2.8rem, 6vw, 4.4rem) 0; }
.interior h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.interior p { color: var(--tinta-suave); max-width: 68ch; }

.lista-notas { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.lista-notas li {
  background: var(--ambar);
  border-left: 3px solid var(--ambar-borde);
  color: var(--ambar-tinta);
  padding: .9rem 1.1rem;
  margin-bottom: .8rem;
  border-radius: 0 var(--radio) var(--radio) 0;
}
.lista-notas code {
  display: block;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .3rem;
  opacity: .75;
}

/* ── Pie ────────────────────────────────────────────────────────────────── */

.pie {
  background: var(--noche);
  color: #a9c1d2;
  padding: 3rem 0 1.6rem;
  font-size: .9rem;
}
.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.4rem;
}
.pie h3 {
  color: var(--blanco);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .14em;
  font-family: "Plex Sans", sans-serif;
  margin-bottom: .8rem;
}
.pie a { color: #a9c1d2; text-decoration: none; }
.pie a:hover { color: var(--blanco); }
.pie p { margin: 0 0 .5rem; }
.pie__logo { width: 230px; margin-bottom: 1rem; }
.pie__nota { font-size: .84rem; line-height: 1.55; max-width: 46ch; }
.pie__nota--tenue { color: #7fa0b6; font-size: .79rem; }
.pie__legal {
  margin-top: 2.2rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.13);
  color: #7fa0b6; font-size: .8rem;
}
.pie__legal p { margin: 0; }

/* ── Responsivo ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero__rejilla { grid-template-columns: 1fr; gap: 2rem; }
  /* En pantalla angosta el recorte se corre hacia la ciudad y el velo se
     vuelve parejo: en vertical no hay «lado izquierdo» que respetar — el texto
     ocupa todo el ancho y necesita fondo uniforme debajo. */
  .hero__fondo { object-position: 88% 62%; }
  .hero__velo {
    background:
      linear-gradient(180deg,
        rgba(6,32,49,.92) 0%,
        rgba(6,32,49,.88) 55%,
        rgba(6,32,49,.94) 100%);
  }
  .lista-afuera li { grid-template-columns: 1fr; gap: .4rem; }
  .charter__rejilla { grid-template-columns: 1fr; gap: 2rem; }
  .ruta-edu li { grid-template-columns: 1fr; gap: .5rem; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}

/* Menú móvil: casilla oculta + etiqueta. Sin JavaScript, porque el sitio no
   carga ni una línea de script y no va a empezar por un menú. */
/* EL MENU SE PLIEGA A 1000px, NO A 900 — cambiado el 2026-09-18 con la regla
   medida, no elegida.
   
   El menú tiene ONCE elementos: ocho enlaces, el idioma, el acceso y el
   llamado principal. MEDIDO, no estimado —capturas cada 20px y un contador
   de píxeles buscando el borde derecho del botón verde—: la fila completa
   cabe desde 1130px, y a 1110 «Quiero afiliarme» se corta por un píxel.
   Se pone 1150 para que entre con margen.
   
   Mis dos primeras cifras (970 y 1000) fueron ESTIMADAS a ojo y las dos
   estaban cortas. La tercera se midió.
   
   No es culpa del logotipo nuevo —la estrella cuadrada es 105px más angosta
   que el lockup que había— sino de que el menú creció: «Contacto» entró esta
   misma tarde. Se vio ahora porque las capturas de este cambio fueron a los
   anchos que nadie mira: 901 es un pelo por encima del quiebre, el ancho que
   se salta quien prueba «celular y escritorio» y nada en medio.
   
   Un menú plegado se abre de un toque; un llamado cortado por el borde no se
   arregla desde el otro lado. Por eso cede el menú.
   
   Y ESTE NUMERO ESTA ATADO A OTROS DOS: el `media` del `<source>` del
   logotipo en `publico/_armazon.html` —para que la marca cambie EXACTAMENTE
   donde entra la hamburguesa, que es como Isaac lo pidió— y el `min-width`
   del tramo apretado de abajo. Si se mueve uno, se mueven los tres.
   `altar_estilos` los ata. */
@media (max-width: 1150px) {
  .menu__boton {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; cursor: pointer;
    border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 0 10px;
  }
  .menu__boton span { display: block; height: 2px; background: var(--azul-hondo); border-radius: 2px; }

  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 12px 24px -18px rgba(10,63,95,.6);
    flex-direction: column; align-items: stretch;
    gap: 0;
    padding: .5rem 0 1rem;
  }
  .menu__casilla:checked ~ .nav { display: flex; }
  .nav a {
    padding: .85rem min(5vw, 1.25rem);
    border-top: 1px solid var(--linea-clara);
    font-size: 1rem;
  }
  .nav__idioma { border: 0; border-radius: 0; align-self: flex-start; }
  .nav .boton { margin: .8rem min(5vw, 1.25rem) 0; text-align: center; }
  .cabecera__fila { position: relative; }
  /* AQUI LA MARCA ES OTRA IMAGEN, no la misma más chica. A partir de este
     mismo ancho el `<picture>` del armazón cambia la estrella por el lockup
     horizontal: el menú se plegó y el ancho quedó libre, así que cabe el
     nombre completo. Los dos cortes —éste y el del `media` del `<source>`—
     tienen que ser EL MISMO 900px, o habrá un ancho con menú plegado y
     estrella. `altar_estilos` los ata.

     52 y no 46: el lockup mide 658×210, así que a 52 de alto son 163 de
     ancho — con la hamburguesa de 44 y sus márgenes, cabe de sobra hasta en
     360px. Y por debajo de 46 los dos renglones del nombre dejan de leerse,
     que es justo lo que este cambio venía a recuperar. */
  .marca img { height: 64px; }
}

@media (max-width: 900px) {
  /* Dos y dos: cuatro columnas en pantalla angosta dejan una palabra por línea
     y la cintilla deja de leerse como una sola idea. */
  .pilares__rejilla { grid-template-columns: 1fr 1fr; }
  .pilar:nth-child(3) { border-left: 0; }
  .pilar:nth-child(3), .pilar:nth-child(4) { border-top: 1px solid rgba(255,255,255,.10); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .pie__rejilla { grid-template-columns: 1fr; gap: 1.8rem; }
  .pilares__rejilla { grid-template-columns: 1fr; }
  .pilar { border-left: 0; border-top: 1px solid rgba(255,255,255,.10); padding: 1.15rem 0 1.2rem; }
  .pilar:first-child { border-top: 0; }
  .ruta { padding-left: 1.6rem; }
  .ruta li::before { left: -2.6rem; width: 1.7rem; height: 1.7rem; font-size: .85rem; }
}

/* ── Rejilla del final: las tarjetas que llevan a las demás páginas ─────── */
/* Son enlaces enteros, no una tarjeta con un enlace adentro: el área de toque
   de un dedo en un teléfono es de unos 9 mm, y un renglón de texto mide 4. */
.tarjeta--enlace {
  display: block; text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.tarjeta--enlace h3 { color: var(--azul-hondo); }
.tarjeta--enlace:hover,
.tarjeta--enlace:focus-visible { border-color: var(--azul); transform: translateY(-2px); }
.tarjetas--cinco { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }


/* ── Acceso al portal (agregado 2026-09-11) ──────────────────────────────── */
/* Una sola puerta para todos; el correo decide lo que se ve adentro. Discreto
   a proposito: el llamado principal de una camara de comercio es afiliarse,
   no entrar. Se lee como enlace, no compite con el boton. */
.nav__acceso{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--azul-hondo); text-decoration:none; font-weight:600; font-size:.94rem;
  padding:.35rem .55rem; border-radius:var(--radio, 6px);
  border:1px solid transparent;
}
.nav__acceso:hover,
.nav__acceso:focus-visible{ background:var(--hueso); border-color:var(--linea) }
/* El foco tiene que VERSE: quien navega con teclado no puede adivinar donde esta. */
.nav__acceso:focus-visible{ outline:2px solid var(--azul); outline-offset:2px }
.nav__llave{ flex:0 0 auto; opacity:.85 }
@media (prefers-color-scheme:dark){
  .nav__acceso{ color:var(--celeste) }
}

/* ── Puerta de entrada (agregado 2026-09-11) ─────────────────────────────── */
/* Usa el MISMO hero que la portada: el visitante no siente que cambió de sitio
   al ir a entrar. Cabecera y pie son los del sitio, no una copia. */
.puerta-hero{
  position:relative; isolation:isolate;
  min-height:clamp(30rem,72vh,44rem);
  display:grid; align-items:center;
  padding:3rem 0;
}
.puerta-hero__fondo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%; z-index:-2;
}
/* El velo no es decoración: sin él, el texto blanco sobre una foto con cielo
   claro baja de 4.5:1 y deja de leerse en cuanto cambia la imagen. */
/* El velo no es decoración: sostiene la legibilidad pase lo que pase con la
   foto. Medido contra el PEOR caso (una foto blanca debajo): con el extremo
   claro al .58 que tenía, el párrafo daba 2.75:1 y no pasa AA. Al .80 da
   5.06:1 con el color de texto de abajo. Los números, no el ojo. */
.puerta-hero__velo{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
    rgba(6,44,68,.95) 0%, rgba(10,63,95,.90) 45%, rgba(10,63,95,.80) 100%);
}
.puerta-hero__rejilla{
  display:grid; gap:2.5rem; align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(min(100%,21rem),.95fr);
}
.puerta-hero__texto{color:#fff; max-width:34rem}
.puerta-hero__texto h1{color:#fff; margin:.2rem 0 .6rem}
.puerta-hero__texto .entrada{color:#eaf4fa}

.puerta-caja{
  background:var(--blanco); border-radius:var(--radio,10px);
  padding:1.6rem; box-shadow:0 18px 50px -20px rgba(6,44,68,.75);
  border:1px solid rgba(255,255,255,.35);
}
.puerta-caja label{
  display:block; font-size:.82rem; font-weight:600;
  margin:.85rem 0 .3rem; color:var(--azul-hondo);
}
.puerta-caja label:first-of-type{margin-top:0}
.puerta-caja input{
  width:100%; font:inherit; padding:.62rem .75rem;
  border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--hueso); color:var(--tinta);
}
.puerta-caja input:focus{
  outline:none; border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(30,144,194,.22); background:var(--blanco);
}
.puerta-caja .boton{width:100%; margin-top:1.1rem; justify-content:center}
.puerta-caja__error{
  background:#ffe4e6; color:#9f1239; border:1px solid currentColor;
  border-radius:var(--radio); padding:.6rem .8rem;
  font-size:.88rem; margin:0 0 1rem;
}
/* Aviso de la puerta: verde, y con el tono de texto MEDIDO, no elegido a ojo.
   #14532d sobre #dcfce7 = 8.30:1 — AA con holgura. La puerta no tiene modo
   oscuro (la caja es blanca sobre el hero a proposito), asi que aqui hay un
   solo modo que medir; en el panel son dos y ahi se miden los dos. */
.puerta-caja__aviso{
  background:#dcfce7; color:#14532d; border:1px solid currentColor;
  border-radius:var(--radio); padding:.6rem .8rem;
  font-size:.88rem; margin:0 0 1rem; line-height:1.5;
  display:flex; gap:.5rem; align-items:flex-start;
}
.puerta-caja__aviso svg{flex:0 0 auto; margin-top:.15rem}
.puerta-caja__nota{
  margin:1rem 0 0; font-size:.84rem; color:var(--tinta-media,#4a6170);
  text-align:center; line-height:1.5;
}
@media (max-width:820px){
  .puerta-hero__rejilla{grid-template-columns:1fr}
  .puerta-hero{min-height:0; padding:2rem 0 2.5rem}
}

/* ── Utilidades de la caja de formularios ────────────────────────────────
   POR QUE EXISTEN, y no como `style="..."` en la plantilla: la CSP del sitio
   es `style-src 'self'` SIN `'unsafe-inline'`, asi que el navegador DESCARTA
   todo atributo `style` en silencio. No avisa, no rompe: simplemente la regla
   no existe. El 2026-09-12 el formulario de afiliacion se veia con las
   casillas centradas y despegadas de su texto por eso mismo, y solo se vio
   mirando una captura — el HTML servido era correcto.
   Regla dura para este proyecto: si hace falta un estilo, va aqui con nombre. */

/* Etiqueta con casilla o radio al lado. Sin esto, la casilla se va sola a un
   renglon y el texto al siguiente. */
.opcion{display:flex; gap:.6rem; align-items:flex-start; margin:.5rem 0; font-weight:400}
.opcion--centro{align-items:center; gap:.5rem; margin-top:.45rem}
.puerta-caja .opcion input,
.puerta-caja .casilla input{width:auto; margin:0; flex:0 0 auto}
.opcion b{font-weight:700}

/* Grupo de opciones. El `fieldset` trae borde y relleno propios del navegador
   que aqui estorban; el `legend` es lo que un lector de pantalla anuncia. */
.grupo{border:0; padding:0; margin:1.1rem 0 0; min-width:0}
.grupo > legend{
  padding:0; margin:0 0 .3rem; text-align:left; font-size:.82rem;
  font-weight:600; color:var(--azul-hondo);
}

/* Variantes de la nota de la caja */
.puerta-caja__nota--izq{text-align:left}
.puerta-caja__nota--pegada{margin:0 0 .6rem}

/* Las instrucciones de pago llegan de la base con sus saltos de linea puestos:
   se respetan tal cual o el texto se aplasta en un parrafo ilegible. */
.instrucciones{white-space:pre-wrap; margin:.2rem 0 0}

/* El desplegable de «corregir mis datos» */
.desplegable{margin-top:1.2rem}
.desplegable > summary{
  cursor:pointer; font-size:.88rem; color:var(--tinta-media,#4a6170);
}
.desplegable > form{margin-top:.8rem}

/* ═══ DIRECTORIO DE NEGOCIOS ═══════════════════════════════════════════════
   Se declara ANTES de escribir la plantilla, no después. El 2026-09-12 se
   descubrio que cinco pantallas del portal usaban clases que `panel.css` nunca
   habia declarado, y que `.opcion` vivia en esta hoja pero no en aquella: en
   los dos casos el HTML era correcto y la pagina no. Una clase que no esta
   declarada no existe, aunque se lea bien en el codigo. */

/* Los filtros. Sin JavaScript: es un formulario GET con un boton, porque la
   CSP prohibe scripts y un `onchange` que envia el formulario llevaba horas
   muerto en el panel sin que nadie lo notara. */
.filtros{
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:flex-end;
  margin:0 0 1.8rem; padding:1rem 1.1rem;
  background:var(--hueso); border:1px solid var(--linea);
  border-radius:var(--radio);
}
.filtros__campo{display:flex; flex-direction:column; gap:.25rem; min-width:0; flex:1 1 12rem}
.filtros__campo label{font-size:.78rem; font-weight:600; color:var(--azul-hondo)}
.filtros select{
  font:inherit; padding:.55rem .7rem; max-width:100%;
  border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--blanco); color:var(--tinta);
}
.filtros select:focus{
  outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(30,144,194,.22);
}
.filtros__acciones{display:flex; gap:.5rem; flex-wrap:wrap}

/* La ficha en la lista. Es enlace entero: el area de toque en un telefono es
   la tarjeta, no un renglon de texto de 14 px. */
.negocio{
  display:flex; flex-direction:column; gap:.35rem;
  padding:1.1rem 1.2rem; background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--radio);
  text-decoration:none; color:inherit; transition:border-color .15s, transform .15s;
}
.negocio:hover, .negocio:focus-visible{
  border-color:var(--azul); transform:translateY(-2px);
}
/* El logotipo del socio en la tarjeta de la lista.
   `object-fit:contain` y no `cover`: un logotipo recortado es un logotipo
   roto — la marca de alguien no se recorta para que cuadre en una caja. La
   caja tiene alto FIJO y ancho libre, asi que un logo apaisado y uno cuadrado
   ocupan el mismo renglon y los nombres de las tarjetas quedan alineados.
   `max-width:100%` para que uno muy ancho no empuje la tarjeta. */
.negocio__logo{
  height:44px; width:auto; max-width:100%; object-fit:contain;
  object-position:left center; align-self:flex-start; margin-bottom:.1rem;
}
.negocio__nombre{font-family:"Fraunces", Georgia, serif; font-size:1.08rem; font-weight:700;
  color:var(--azul-hondo); line-height:1.25}
.negocio__donde{font-size:.83rem; color:var(--tinta-suave)}
.negocio__que{font-size:.9rem; color:var(--tinta); margin:.15rem 0 0}
/* La base de los sellos VA ANTES de sus variantes. Iba después, y con la
   misma especificidad la última gana: el azul del nivel, el verde de
   participación y el morado de referido se pintaban dorados como el de
   Charter (visto en una captura el 2026-10-03). */
.negocio__sello{
  align-self:flex-start; font-size:.68rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:.15rem .5rem; border-radius:99px;
  background:var(--crema); color:#7a5b12; border:1px solid var(--dorado-claro);
}
/* El distintivo del NIVEL se distingue del de Charter: son dos cosas y
   confundirlas le quita valor a las dos. El de Charter es dorado —el ano
   fundacional—; este es azul, el color de la marca. */
.negocio__sello--nivel{
  background:#e7f2f8; color:var(--azul-hondo); border-color:#bcdcec;
}
/* La insignia de participación (idea #5): verde, la de quien SE PRESENTA a
   los eventos — distinta del dorado de Charter y del azul del nivel, para
   que nadie la lea como premio por pagar más. */
.negocio__sello--participa{
  background:#eaf5ec; color:var(--verde-hondo); border-color:#cfe6d4;
}
/* «Trajo un socio a la Cámara» (idea #5, migración 058): morado, distinto
   de los otros tres. Es un hecho —trajo a alguien que pagó—, no un premio. */
.negocio__sello--referido{
  background:#f4ecf6; color:#6b3a78; border-color:#e2cfe8;
}
/* «N socios han trabajado con él» (idea #43): verde azulado, el color de
   lo que confirman otros socios — ni nivel, ni premio. */
.negocio__sello--trabajos{
  background:#e6f4f3; color:#1f5f5b; border-color:#c4e3e0;
}

/* La ficha completa, la pagina de un solo negocio. */
/* Aqui el logotipo va mas grande y arriba del nombre: la pagina es de un solo
   negocio y es lo primero que se mira. Mismo `contain` que en la lista. */
.ficha__logo{
  max-height:120px; max-width:min(100%, 320px); width:auto; height:auto;
  object-fit:contain; object-position:left center;
}
.ficha__contacto{
  display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0 0;
}
.ficha__dato{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .85rem; background:var(--hueso);
  border:1px solid var(--linea); border-radius:99px;
  font-size:.9rem; text-decoration:none; color:var(--azul-hondo);
}
a.ficha__dato:hover{border-color:var(--azul)}

/* La paginacion. Numeros no: «anterior / siguiente» y en que pagina vas.
   Con veinticuatro por pagina, una fila de numeritos sobra hasta los cientos. */
.paginas{
  display:flex; gap:.7rem; align-items:center; justify-content:center;
  margin:2rem 0 0; flex-wrap:wrap;
}
.paginas__cual{font-size:.88rem; color:var(--tinta-suave)}
.ficha__desde{margin-top:1.6rem}
/* Los tres caminos del 404 publico. Se envuelven en telefono en vez de
   salirse: un boton cortado por el borde es un camino que no existe. */
.acciones-404{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem}

/* ── El menu, con seis secciones ────────────────────────────────────────────
   Al agregar «Directorio» el 2026-09-12 la barra paso de cinco a seis y en un
   portatil de 1280 px las etiquetas se partian en dos renglones: «Por qué /
   existimos». Se veia roto, y el menu colapsa a boton hasta los 820 px, o sea
   que ese ancho lo ve mucha gente.

   Dos reglas, en este orden: una etiqueta NUNCA se parte —es un solo enlace,
   no dos— y en el tramo apretado se encoge el espacio y la letra en vez de
   reventar la fila. Medido con capturas a 1280 y 1440, no a ojo.

   El rango arranca en 901 px porque AHI esta el punto de quiebre real del
   menu: a 900 y por debajo ya es el boton de hamburguesa. La primera version
   decia 821, leido de una media query que resulto ser de otra cosa — se
   corrigio comprobandolo con una captura a 900, donde la barra ya no existe. */
.nav a{white-space:nowrap}
@media (min-width:1151px) and (max-width:1300px){
  .nav{gap:.95rem}
  .nav a{font-size:.82rem}
  .cabecera .boton{padding-left:.9rem; padding-right:.9rem}
}

}

/* ── El calendario publico ──────────────────────────────────────────────────
   La tarjeta de cada evento: el bloque de fecha a la izquierda —dia grande,
   mes en tres letras— y el contenido al lado. Es la forma que un ojo reconoce
   como «calendario» sin leer nada, y por eso se prefiere a una tabla. */
.agenda{display:flex; flex-direction:column; gap:1rem; margin-top:1.6rem}
.evento{
  display:flex; gap:1.3rem; align-items:flex-start;
  padding:1.2rem 1.3rem; background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--radio);
}
/* El bloque de fecha NO se encoge: con `flex:none` un titulo largo no lo
   aplasta hasta dejar el dia partido en dos renglones. */
.evento__cuando{
  flex:none; width:4.6rem; text-align:center; padding:.55rem .2rem;
  background:var(--azul-hondo); color:#fff; border-radius:var(--radio);
  line-height:1.05;
}
.evento__dia{display:block; font-size:1.75rem; font-weight:700; letter-spacing:-.02em}
.evento__mes{display:block; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.12em; margin-top:.15rem}
.evento__ano{display:block; font-size:.68rem; opacity:.72; margin-top:.2rem}
.evento__que{min-width:0}
.evento__que h2{font-size:1.15rem; margin:.1rem 0 .3rem; line-height:1.25}
.evento__tipo{font-size:.78rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--verde-hondo); margin:0}
.evento__donde{font-size:.88rem; color:var(--tinta-suave); margin:0 0 .4rem}

/* Lo que ya paso: una lista, no tarjetas. Son prueba de actividad, no
   invitaciones — darles el mismo peso visual que a lo que viene confundiria
   sobre a que se puede ir todavia. */
.lista-pasados{list-style:none; margin:1.2rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.55rem}
.lista-pasados li{
  display:flex; gap:.7rem; align-items:baseline; flex-wrap:wrap;
  padding:.7rem .9rem; background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--radio); font-size:.93rem;
}
.pasado__fecha{font-variant-numeric:tabular-nums; color:var(--tinta-suave);
  font-size:.85rem; flex:none}
.pasado__tipo{font-size:.7rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--verde-hondo); flex:none}
.pasado__lugar{color:var(--tinta-suave); font-size:.85rem}

/* En un telefono la tarjeta se apila: el bloque de fecha arriba, en fila. */
@media (max-width:560px){
  .evento{flex-direction:column; gap:.8rem}
  .evento__cuando{
    width:auto; display:flex; gap:.45rem; align-items:baseline;
    padding:.35rem .7rem; align-self:flex-start;
  }
  .evento__dia{font-size:1.25rem}
  .evento__mes,.evento__ano{margin-top:0}
}

/* El campo trampa del formulario de contacto. NO se usa `display:none`: hay
   robots que saltan lo que esta oculto asi, porque es la senal obvia. Se saca
   de la pantalla con posicionamiento absoluto, que para el robot que lee el
   HTML es indistinguible de un campo normal. El `aria-hidden` y el
   `tabindex="-1"` del HTML lo esconden de un lector de pantalla, que es lo
   que importa para que no moleste a una persona. */
.trampa{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden;
}
.nota--ok{border-left-color:var(--verde); background:#f2f9f3}
.nota--mal{border-left-color:var(--peligro); background:#fdf3f3}

/* ── El formulario del contacto ─────────────────────────────────────────────
   Mismo lenguaje que la caja de afiliacion —etiqueta arriba, campo de fondo
   hueso, foco azul— pero sobre el fondo normal de la pagina y no dentro de
   una tarjeta flotante: aqui no hay hero detras. Las reglas se escriben otra
   vez en vez de reusar `.puerta-caja` porque aquella incluye la sombra y el
   borde de la tarjeta, y heredarlos aqui pondria una tarjeta donde no la hay. */
.formulario .fila{display:flex; gap:1rem; flex-wrap:wrap; margin-top:.9rem}
.formulario .fila > .campo{flex:1 1 16rem; min-width:0}
.formulario .campo{margin-top:.9rem}
.formulario .campo--ancho{width:100%}
.formulario label{
  display:block; font-size:.82rem; font-weight:600;
  margin:0 0 .3rem; color:var(--azul-hondo);
}
.formulario input, .formulario select, .formulario textarea{
  width:100%; font:inherit; padding:.62rem .75rem;
  border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--hueso); color:var(--tinta);
}
.formulario textarea{resize:vertical; min-height:7rem; line-height:1.5}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus{
  outline:none; border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(30,144,194,.22); background:var(--blanco);
}
.formulario .pista{
  display:block; margin-top:.3rem; font-size:.8rem; color:var(--tinta-suave);
}
.formulario .sub{font-weight:400; color:var(--tinta-tenue)}
.formulario .acciones{margin-top:1.3rem}

/* Las etiquetas de giro (056): lo que hace el negocio, en su ficha y en su
   tarjeta del directorio. Grises y discretas: describen, no premian. */
.negocio__etiquetas{display:flex;flex-wrap:wrap;gap:.3rem;margin:.2rem 0 0}
.etiqueta{display:inline-block;font-size:.76rem;padding:.15rem .55rem;border-radius:999px;
  background:var(--hueso);border:1px solid var(--linea);color:var(--tinta-suave)}

/* La ficha como página del negocio (idea #12, migración 066): horario con
   sus saltos de línea, y «Cómo llegar». */
.ficha__horario{margin:1rem 0; padding:.8rem 1rem; border:1px solid var(--linea-clara); border-radius:10px; background:var(--hueso)}
.ficha__horario p{margin:.2rem 0}
.ficha__pre{white-space:pre-line}