/* estilo.css — Landing «Brutalista v2».
   Paleta y tipografías del diseño, declaradas AQUÍ: esta página tiene que poder
   servirse sin arrastrar el CSS de la app.

   Las tres constantes del estilo: borde negro de 3px en todo, sombra DURA sin
   difuminar, y cero esquinas redondeadas. Si algo se ve blando, es que se ha
   colado un radio. */

:root {
  --papel: #fff6ec;
  --tinta: #1a1008;
  --acento: #c25030;
  --suave: #5c4438;
  --hueco: #f7e3d4;
  --borde: 3px;
  --max: 1200px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: var(--acento); text-decoration: none; }
.br-ic { display: block; flex: 0 0 auto; }

/* El mono en versalitas es la voz de las etiquetas de toda la página. */
.br-mono,
.br-mini {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.br-mini-acc { color: var(--acento); }
.br-acc { color: var(--acento); }
.br-p { font-size: .96rem; line-height: 1.6; color: var(--suave); }

/* ================= Cabecera ================= */

.br-top {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px clamp(14px, 3vw, 32px);
  background: var(--papel);
  border-bottom: var(--borde) solid var(--tinta);
}
/* El logo es coral; aquí manda el negro, así que se apaga a tinta plana. */
.br-logo { height: 24px; width: auto; filter: brightness(0); }

.br-nav { display: flex; gap: clamp(10px, 2vw, 22px); }
.br-nav a,
.br-link {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta);
}
.br-nav a:hover, .br-link:hover { color: var(--acento); }

.br-top-acc { display: flex; align-items: center; gap: 10px; }

.br-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  background: var(--acento);
  color: var(--papel);
  border: var(--borde) solid var(--tinta);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: box-shadow .15s, transform .15s;
}
/* El gesto del estilo: el botón se despega y deja su sombra dura detrás. */
.br-chip:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--tinta); color: var(--papel); }

/* ================= Hero ================= */

.br-hero { border-bottom: var(--borde) solid var(--tinta); }

.br-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr);
  border-bottom: var(--borde) solid var(--tinta);
}

.br-hero-txt {
  padding: clamp(24px, 4vw, 52px) clamp(14px, 3vw, 32px) clamp(22px, 3.4vw, 42px);
  border-right: var(--borde) solid var(--tinta);
}

.br-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: clamp(14px, 2.2vw, 24px);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--acento);
}
.br-badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  background: var(--acento);
  color: var(--papel);
  border: 2px solid var(--tinta);
  letter-spacing: .14em;
}

.br-h1 {
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  font-size: clamp(2.9rem, 9.6vw, 7.6rem);
  line-height: .82;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.br-h1-a { display: block; color: var(--acento); }
.br-h1-b { display: block; color: var(--tinta); }
/* La tercera palabra es la que remata: caja de acento con sombra dura. El
   inline-block es obligatorio para que la caja se ajuste a la palabra. */
.br-h1-c {
  display: inline-block;
  background: var(--acento);
  color: var(--papel);
  border: var(--borde) solid var(--tinta);
  padding: 0 .14em;
  box-shadow: 8px 8px 0 var(--tinta);
}

.br-lede {
  max-width: 50ch;
  margin-top: clamp(24px, 3.4vw, 40px);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.55;
  color: var(--suave);
  text-wrap: pretty;
}

/* Tira de cuatro verbos, encajonada y sin huecos entre celdas. */
.br-tira {
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(20px, 2.8vw, 32px);
  border: var(--borde) solid var(--tinta);
  width: max-content;
  max-width: 100%;
}
.br-tira span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-right: var(--borde) solid var(--tinta);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.br-tira span:last-child { border-right: 0; }
.br-tira .br-ic { color: var(--acento); }

/* ---- Columna de tarjetas ---- */

.br-hero-side {
  background: var(--acento);
  padding: clamp(18px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 18px);
}

.br-card { border: var(--borde) solid var(--tinta); background: var(--papel); box-shadow: 7px 7px 0 var(--tinta); }
/* La imagen va absoluta dentro de una caja con aspect-ratio: en flujo, un
   <img height:100%> ahí dentro es una dependencia circular y el navegador la
   rompe usando el alto natural de la foto, que descuadra la tarjeta. */
.br-card-foto { position: relative; aspect-ratio: 16 / 10; border-bottom: var(--borde) solid var(--tinta); background: var(--hueco); }
.br-card-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.br-card-txt { padding: 11px 13px; }
.br-card-txt .br-mini { color: var(--acento); font-size: 10px; }
.br-card-nombre {
  margin-top: 3px;
  font-family: "Archivo Black", sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.br-card-pie { margin-top: 4px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: var(--suave); }

/* Invertida: fondo tinta y sombra clara. Es lo que rompe la fila de tarjetas
   iguales y da el aire de cartel. */
.br-actividad {
  border: var(--borde) solid var(--tinta);
  background: var(--tinta);
  color: var(--papel);
  padding: 13px 15px;
  box-shadow: 7px 7px 0 var(--papel);
}
.br-actividad .br-mini { font-size: 10px; margin-bottom: 8px; }
.br-act-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 7px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
}
.br-act-fila.es-primera { padding-top: 0; padding-bottom: 7px; border-bottom: 2px solid rgba(255, 246, 236, .28); }
.br-act-cuando { color: var(--acento); white-space: nowrap; }

/* ---- Tres llamadas ---- */

/* Las columnas NO se declaran a mano: se crea una por boton, del mismo ancho.
   Con repeat(3, 1fr) fijo, quitar una llamada dejaba un hueco vacio a la
   derecha —paso al retirar el boton de crear cuenta—, y anadir una cuarta la
   habria mandado a una segunda fila. */
.br-hero-cta { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.br-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(18px, 2.6vw, 26px);
  background: var(--acento);
  color: var(--papel);
  border-right: var(--borde) solid var(--tinta);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  transition: background .15s;
}
.br-cta:last-child { border-right: 0; }
.br-cta:hover { background: var(--tinta); color: var(--papel); }

/* ================= Ticker ================= */

.br-ticker {
  background: var(--tinta);
  overflow: hidden;
  padding: 11px 0;
  border-bottom: var(--borde) solid var(--tinta);
}
.br-ticker-pista {
  display: flex;
  gap: 26px;
  width: max-content;
  animation: br-tick 40s linear infinite;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--papel);
  white-space: nowrap;
}
.br-rombo { color: var(--acento); }
/* -50% porque la lista va DUPLICADA en el marcado: al llegar a la mitad, lo
   que se ve es idéntico al principio y el salto no se nota. */
@keyframes br-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .br-ticker-pista { animation: none; } }

/* ================= Secciones ================= */

.br-seccion { padding: clamp(32px, 5vw, 64px) clamp(14px, 3vw, 32px); border-bottom: var(--borde) solid var(--tinta); }
.br-ancho { max-width: var(--max); margin: 0 auto; }

.br-h2 {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin-bottom: clamp(20px, 3vw, 36px);
}
.br-h2-claro { color: var(--papel); }

/* ---- Qué se hace ---- */

.br-acciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); }
.br-accion {
  border: var(--borde) solid var(--tinta);
  background: var(--papel);
  padding: clamp(18px, 2.4vw, 28px);
  transition: transform .15s, box-shadow .15s;
}
.br-accion:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--acento); }
.br-accion-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  background: var(--acento);
  color: var(--papel);
  border: var(--borde) solid var(--tinta);
}
.br-accion h3 {
  margin: 6px 0 8px;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

/* ---- Empezar ---- */

.br-empezar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: var(--borde) solid var(--tinta); }

.br-empezar-txt {
  background: var(--tinta);
  color: var(--papel);
  padding: clamp(28px, 4.5vw, 64px) clamp(14px, 3vw, 44px);
  border-right: var(--borde) solid var(--tinta);
}
.br-empezar-txt .br-mini { letter-spacing: .2em; margin-bottom: clamp(18px, 2.6vw, 28px); }

.br-pasos { list-style: none; }
.br-pasos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 2px solid rgba(255, 246, 236, .3);
}
.br-pasos li:last-child { border-bottom: 2px solid rgba(255, 246, 236, .3); }
.br-paso-n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; color: var(--acento); }
.br-pasos strong { font-size: 1.02rem; }
.br-pasos p { margin-top: 3px; font-size: .94rem; color: rgba(255, 246, 236, .8); }

.br-boton-claro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  margin-top: clamp(22px, 3vw, 32px);
  background: var(--acento);
  color: var(--papel);
  border: var(--borde) solid var(--papel);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .15s, color .15s;
}
.br-boton-claro:hover { background: var(--papel); color: var(--acento); }

.br-empezar-demo {
  background: var(--acento);
  padding: clamp(24px, 3.6vw, 52px) clamp(14px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.br-demo { background: var(--papel); border: var(--borde) solid var(--tinta); padding: 14px 16px; box-shadow: 6px 6px 0 var(--tinta); }
.br-demo-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.br-demo-av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  background: var(--acento);
  color: var(--papel);
  border: 2px solid var(--tinta);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
}
.br-demo-cab .br-mono { letter-spacing: .06em; text-transform: none; }
.br-demo-foto { position: relative; aspect-ratio: 16 / 8; border: 2px solid var(--tinta); background: var(--hueco); }
.br-demo-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.br-demo-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.br-demo-pie strong { font-family: "Archivo Black", sans-serif; font-size: .98rem; text-transform: uppercase; letter-spacing: -.01em; }
.br-demo-pie .br-mono { text-transform: none; letter-spacing: .04em; }
/* Plato y sitio apilados. `min-width: 0` para que un nombre largo se recorte
   dentro de su columna en vez de empujar la nota fuera de la tarjeta. */
.br-demo-nombre { display: grid; gap: 3px; min-width: 0; }
.br-demo-sitio {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .62;
}

.br-demo .br-mini { font-size: 10.5px; margin-bottom: 9px; }
.br-barras { display: grid; gap: 7px; }
/* Sin space-between: con tres hijos (etiqueta, tramos, nota) repartia el
   hueco en DOS sitios y los tramos quedaban flotando en el centro. La
   etiqueta crece y empuja tramos y nota juntos a la derecha. */
.br-barra { display: flex; align-items: center; gap: 10px; }
.br-barra > :first-child { flex: 1 1 auto; }
.br-barra .br-mono { font-size: 11.5px; letter-spacing: .04em; text-transform: none; }
.br-tramos { display: flex; gap: 3px; }
.br-tramo { width: 16px; height: 9px; background: var(--papel); border: 2px solid var(--tinta); }
.br-tramo.es-lleno { background: var(--acento); }
/* La nota, al final de cada barra. Ancho minimo y cifras tabulares para que
   las cinco queden alineadas en columna y no bailen segun el numero. */
.br-barra-nota {
  min-width: 3.4em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
  font-weight: 600;
}

/* ---- Reglas ---- */

/* Un solo marco con tabiques dentro, no tres cajas sueltas: es lo que hace que
   parezca una tabla impresa y no una fila de tarjetas. */
.br-reglas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--borde) solid var(--tinta); }
.br-regla { padding: clamp(18px, 2.4vw, 28px); border-right: var(--borde) solid var(--tinta); background: var(--papel); }
.br-regla:last-child { border-right: 0; }
.br-regla.es-destacada { background: var(--acento); color: var(--papel); }
.br-regla.es-destacada .br-p { color: var(--papel); }
.br-regla.es-destacada .br-regla-n { color: var(--papel); }
.br-regla-n { font-family: "Archivo Black", sans-serif; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; color: var(--acento); }
.br-regla h3 { margin: 10px 0 6px; font-family: "Archivo Black", sans-serif; font-size: 1.05rem; text-transform: uppercase; letter-spacing: -.01em; }

/* ---- Cierre ---- */

.br-cierre {
  background: var(--acento);
  color: var(--papel);
  padding: clamp(36px, 6vw, 90px) clamp(14px, 3vw, 32px);
  border-bottom: var(--borde) solid var(--tinta);
}
.br-cierre-caja { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.br-cierre .br-mini { letter-spacing: .2em; margin-bottom: clamp(16px, 2.4vw, 26px); }
.br-h1-cierre { font-size: clamp(2rem, 6.4vw, 5rem); line-height: .88; letter-spacing: -.04em; }
.br-cierre-p { max-width: 42ch; margin-top: clamp(16px, 2.4vw, 24px); font-size: 1.05rem; line-height: 1.6; }

.br-boton-blanco {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 32px;
  background: var(--papel);
  color: var(--acento);
  border: var(--borde) solid var(--tinta);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .15s, box-shadow .15s;
}
.br-boton-blanco:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--tinta); color: var(--acento); }

/* ---- Instagram ---- */
/* Fondo tinta: las fotos son lo que tiene que llamar, y sobre oscuro es donde
   mas resaltan. Coincide con el de «empezar», pero entre las dos hay una
   seccion clara y la estructura no se parece —aquella son dos columnas, esta
   es texto centrado y una tira a sangre—, asi que no se leen como repetidas. */
.br-ig {
  background: var(--tinta);
  color: var(--papel);
  padding: 0 clamp(14px, 3vw, 32px) clamp(46px, 7vw, 96px);
}
.br-ig-txt {
  padding: clamp(40px, 6.4vw, 90px) 0 0;
  text-align: center;
}
.br-ig-txt .br-mini { margin-bottom: clamp(14px, 2vw, 22px); }
.br-ig-p {
  max-width: 46ch;
  margin: clamp(16px, 2.4vw, 24px) auto clamp(24px, 3.4vw, 34px);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Papel sobre tinta, al reves que el resto de botones: sobre el fondo oscuro
   es el elemento que tiene que ganar. */
.br-ig-boton {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 58px;
  padding: 0 30px;
  background: var(--papel);
  color: var(--acento);
  border: var(--borde) solid var(--papel);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .15s, box-shadow .15s;
}
.br-ig-boton:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--acento); color: var(--acento); }

/* El usuario en grande, que es lo unico que hay que recordar de esta seccion.
   `overflow-wrap: anywhere` porque el nombre lo pone otra persona y a este
   tamano uno largo se saldria de la pantalla sin avisar. */
.br-ig-arroba {
  display: inline-block;
  margin: clamp(6px, 1.4vw, 14px) 0 0;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  font-size: clamp(2.1rem, 7vw, 4.6rem);
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--papel);
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: color .15s;
}
.br-ig-arroba span { color: var(--acento); }
.br-ig-arroba:hover { color: var(--acento); }
/* La tarjeta del banner. Fondo papel sobre la tinta de la seccion, con la
   sombra dura en coral: es el mismo recurso que el resto de la pagina, pero
   aqui hace ademas que la tarjeta parezca despegada del fondo. */
.br-ig-post {
  margin-top: clamp(30px, 4.4vw, 56px);
  background: var(--papel);
  border: var(--borde) solid var(--tinta);
  box-shadow: 10px 10px 0 var(--acento);
  color: var(--tinta);
  overflow: hidden;
}

/* Cabecera al estilo de una publicacion, con los materiales de la pagina. */
.br-ig-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: var(--borde) solid var(--tinta);
}
/* El avatar redondo es la segunda —y ultima— excepcion a lo de cero radios,
   igual que el icono de Instagram: aqui el circulo ES lo que hace que se
   reconozca como una foto de perfil. */
.br-ig-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--tinta);
  object-fit: cover;
  flex: 0 0 auto;
}
.br-ig-quien { display: grid; gap: 1px; min-width: 0; margin-right: auto; }
.br-ig-quien strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.br-ig-quien span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
}
.br-ig-ver {
  flex: 0 0 auto;
  padding: 8px 15px;
  background: var(--acento);
  color: var(--papel);
  border: 2px solid var(--tinta);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .15s;
}
.br-ig-ver:hover { background: var(--tinta); color: var(--papel); }

/* Tabiques de 3px entre las piezas. El hueco deja ver el fondo tinta de la
   propia tira, asi que no hace falta pintar bordes en cada imagen.

   Se probo primero sin separacion, para que el eslogan pareciera una sola
   imagen. Separadas se lee igual —van alineadas y comparten fondo— y ademas
   se entiende que son TRES publicaciones, que es lo que son. Los tabiques
   son el mismo recurso que usa el resto de la pagina. */
.br-ig-tira {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--borde);
  background: var(--tinta);
  line-height: 0;
}
/* aspect-ratio 4/5, que es el formato de las publicaciones, y `cover` para que
   una pieza con dos pixeles de diferencia no desalinee la fila. SIN height:
   ponerlo aqui crearia una dependencia circular con el aspect-ratio y el
   navegador la resolveria con el alto natural de la foto. */
.br-ig-tira img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* ---- Pie ---- */

/* Rejilla y no flex con space-between: con tres hijos de anchos distintos,
   space-between reparte el hueco SOBRANTE, asi que el «© 2026 Yumi» acababa
   descentrado —tanto como difieran el logo y los enlaces—. Con dos columnas
   laterales de 1fr, la del medio cae en el centro exacto de la pagina pase lo
   que pase con las otras dos. */
.br-pie {
  background: var(--tinta);
  color: var(--papel);
  padding: 20px clamp(14px, 3vw, 32px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* El logo coral sobre fondo tinta: se pasa a blanco puro. */
.br-pie-logo { height: 20px; width: auto; justify-self: start; filter: brightness(0) invert(1); }
.br-pie-links { display: flex; gap: 18px; justify-self: end; }
.br-pie-links a { color: var(--papel); }
.br-pie-links a:hover { color: var(--acento); }

/* ================= Foco visible ================= */

/* El estilo va de bordes duros, así que el foco también: un contorno grueso y
   desplazado, no un halo suave. */
a:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.br-cierre a:focus-visible,
.br-empezar-txt a:focus-visible { outline-color: var(--papel); }

/* ================= Estrecho ================= */

@media (max-width: 1000px) {
  .br-acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .br-hero-split { grid-template-columns: minmax(0, 1fr); }
  .br-hero-txt { border-right: 0; border-bottom: var(--borde) solid var(--tinta); }
  .br-empezar { grid-template-columns: minmax(0, 1fr); }
  .br-empezar-txt { border-right: 0; border-bottom: var(--borde) solid var(--tinta); }
  /* Las tres llamadas se apilan: en una fila a este ancho, el texto de cada una
     se parte en tres líneas y la banda crece más que el hero. */
  .br-hero-cta { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .br-cta { border-right: 0; border-bottom: var(--borde) solid var(--tinta); }
  .br-cta:last-child { border-bottom: 0; }
  /* La tabla de reglas pasa a columna y los tabiques se vuelven horizontales. */
  .br-reglas { grid-template-columns: minmax(0, 1fr); }
  .br-regla { border-right: 0; border-bottom: var(--borde) solid var(--tinta); }
  .br-regla:last-child { border-bottom: 0; }
}

@media (max-width: 620px) {
  .br-acciones { grid-template-columns: minmax(0, 1fr); }

  /* Las cuatro pastillas no caben en una fila a este ancho. Con flex-wrap la
     ultima caia sola a una segunda linea y los tabiques quedaban colgando:
     la de arriba conservaba su borde derecho contra el vacio. En 2x2 la
     reticula cierra y el bloque sigue leyendose como una sola pieza. */
  .br-tira {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  /* Los tabiques se recolocan para la nueva reticula: vertical solo entre las
     dos columnas, horizontal solo bajo la primera fila. */
  .br-tira span:nth-child(odd) { border-right: var(--borde) solid var(--tinta); }
  .br-tira span:nth-child(even) { border-right: 0; }
  .br-tira span:nth-child(-n+2) { border-bottom: var(--borde) solid var(--tinta); }
  /* La navegación del medio se va: a este ancho compite con el logo y con el
     botón, y lo que hay que poder tocar siempre es «Avísame». */
  .br-nav { display: none; }
  .br-h1-c { box-shadow: 5px 5px 0 var(--tinta); }
  /* Una columna: el logo, el aviso y los enlaces se apilan centrados. Sin
     esto la rejilla de tres columnas aprieta los enlaces contra el borde. */
  /* La sombra dura, mas corta: a este ancho 10px se sale de la pantalla. */
  .br-ig-post { box-shadow: 5px 5px 0 var(--acento); }
  .br-pie { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .br-pie-logo, .br-pie-links { justify-self: center; }
}


/* ---- Lista de espera ---- */
/* Vive dentro de .br-cierre, que es la banda naranja: los campos van en papel
   para que el contraste del texto escrito sea el mismo que en el resto de la
   pagina y no blanco sobre naranja. */
.br-aviso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.br-aviso-campo { display: grid; gap: 8px; min-width: 0; }
.br-aviso-campo .br-mini { color: var(--papel); }

.br-aviso input {
  width: 100%;
  height: 58px;
  padding: 0 16px;
  background: var(--papel);
  color: var(--tinta);
  border: var(--borde) solid var(--tinta);
  font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
}
.br-aviso input::placeholder { color: var(--suave); opacity: .7; }
.br-aviso input:focus-visible { outline: var(--borde) solid var(--tinta); outline-offset: 3px; }

.br-aviso button { cursor: pointer; }
.br-aviso button[disabled] { opacity: .65; cursor: progress; transform: none; box-shadow: none; }

/* Ocupa toda la fila y reserva su alto SIEMPRE: si apareciera solo al
   responder, el boton daria un salto justo cuando lo acabas de pulsar. */
.br-aviso-estado {
  grid-column: 1 / -1;
  min-height: 1.5em;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--papel);
}
.br-aviso-estado.es-bien { font-weight: 600; }
/* El error va en tinta sobre el naranja: se lee mas que el papel y ademas se
   distingue del mensaje de exito sin depender solo del color. */
.br-aviso-estado.es-mal { color: var(--tinta); font-weight: 600; }

@media (max-width: 760px) {
  .br-aviso { grid-template-columns: minmax(0, 1fr); }
  .br-aviso button { width: 100%; justify-content: center; }
}