/* ============================================================
   Grupo Pro CYB — sistema visual "La mesa grande"
   Tokens, base, componentes compartidos y temas por marca.
   ============================================================ */

@font-face {
  font-family: "Bogista";
  src: url("assets/fonts/bogista.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  --borde-superior: 6px; /* franja de marca del <body>; M6 la descuenta de las pantallas de 100svh */
  --carbon: #1a1511;
  --carbon-2: #261f18;
  --carbon-3: #322a20;
  --crema: #f4ecdc;
  --hueso: #e5d9c0;
  --tinta: #2b2119;
  --tinta-suave: #5c4f40;
  --brasa: #e8621d;
  --brasa-hover: #f97d38;
  /* Texto SOBRE brasa: el blanco daba 3.39:1 (insuficiente WCAG AA);
     esta tinta alcanza 5.34:1 sobre brasa y 6.9:1 sobre brasa-hover. */
  --brasa-ink: #1a1511;
  --peltre: #cfc8b8;
  --exito: #3e7d4f;
  --error: #c0392b;
  /* Variantes para usarse como TEXTO sobre fondo carbon (>=4.5:1); los
     tonos base quedan para fondos y bordes. */
  --exito-texto: #56a56b;
  --error-texto: #e0604f;
  /* Mismo caso, al reves: el brasa es un color de FONDO. Como TEXTO sobre
     superficies claras da 2.89:1 sobre el crema del panel y 3.39:1 sobre
     blanco, los dos por debajo de AA. Esta variante oscura del mismo naranja
     (H20, luminosidad al 35%) sube a 5.22:1 y 6.13:1. */
  --brasa-texto: #a8410c;
  /* Y otra vez lo mismo con los estados de formulario: --exito-texto y
     --error-texto estan calculados para el carbon. Dentro del panel crema dan
     2.56:1 y 3.00:1. Estas son sus variantes para fondo claro: 6.19:1 y
     6.87:1. Importa mas que las otras, porque es el texto que le dice al
     usuario si su envio salio o fallo. */
  --exito-panel: #276237;
  --error-panel: #96271b;
  --acc: var(--brasa);
  --acc-ink: #1a1511;
  --display: "Bogista", "Georgia", serif;
  --heavy: "Satoshi", "Segoe UI", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px;
  --container: 1120px;
}

/* Acentos por marca */
/* P4 (2026-08-27): Del Abuelo pasa de rosa a naranja (--brasa), a decision de
   Gabriel. Coincide con el default de :root, pero se deja explicito aqui
   -junto al resto de acentos por marca- para que no lea como un olvido.
   El logotipo nuevo llega en gris neutro y no fuerza ningun color; el acento
   sigue siendo un asunto de la UI (botones, CTAs), no del logotipo mismo. */
body[data-brand="botanas"] { --acc: #e8621d; --acc-ink: #1a1511; }
body[data-brand="tostadas"] { --acc: #c53a40; --acc-ink: #f4ecdc; }
body[data-brand="guarnicion"] { --acc: #d97a1f; --acc-ink: #f4ecdc; }
body[data-brand="rocave"] { --acc: #cfc8b8; --acc-ink: #14100c; }
/* Meduse va con los azules reales del logotipo, no con el lavanda inventado
   que traia antes. Texto blanco sobre el marino: 9.10:1. Ver bloque MEDUSE. */
body[data-brand="meduse"] { --acc: #31496e; --acc-ink: #ffffff; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.no-scroll, html.no-scroll body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--carbon);
  color: var(--crema);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  border-top: var(--borde-superior) solid var(--acc);
}

/* Tema claro (La Guarnicion) */
body[data-theme="light"] {
  background: var(--crema);
  color: var(--tinta);
}

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

h1, h2, h3 { line-height: 1.12; margin: 0 0 0.5rem; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 7vw, 3.9rem); letter-spacing: 0.01em; }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 4.5vw, 2.5rem); }
h3 { font-family: var(--heavy); font-size: 1.12rem; }
p { margin: 0 0 1rem; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--brasa);
  outline-offset: 2px;
  border-radius: 4px;
}
body[data-brand="rocave"] :focus-visible { outline-color: #cfc8b8; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--brasa);
  color: var(--brasa-ink);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 60;
}
.skip-link:focus { left: 12px; }

.container {
  width: min(var(--container), calc(100% - 2.5rem));
  margin-inline: auto;
}

/* El header va sticky: sin este margen, la seccion a la que apunta un ancla
   aterriza con su borde superior metido debajo de la barra. Afecta tanto a la
   navegacion interna como a los enlaces de campana con ?from=...#seccion. */
main > section[id],
main aside[id] { scroll-margin-top: 76px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--carbon) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(244, 236, 220, 0.12);
}
body[data-theme="light"] .site-header {
  background: color-mix(in srgb, var(--crema) 90%, transparent);
  border-bottom-color: rgba(43, 33, 25, 0.12);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 62px;
}
.wordmark {
  font-family: var(--heavy);
  font-size: 1.18rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 0;
}
.wordmark b { color: var(--brasa); }
body[data-brand="rocave"] .wordmark b { color: var(--peltre); }

.main-nav {
  display: flex;
  gap: 0.2rem;
  margin-left: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
  text-decoration: none;
  font-family: var(--heavy);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  padding: 12px 12px;
  border-radius: 8px;
  opacity: 0.85;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { opacity: 1; color: var(--acc); }
body[data-brand="tostadas"] .main-nav a:hover,
body[data-brand="tostadas"] .main-nav a[aria-current="page"] { color: #e98a8e; }
body[data-brand="tostadas"] .main-nav a.is-current { color: #e98a8e; }
body[data-theme="light"] .main-nav a:hover,
body[data-theme="light"] .main-nav a[aria-current="page"] { color: var(--acc-texto, var(--acc)); }
.main-nav a.is-current { opacity: 1; color: var(--acc); }
body[data-theme="light"] .main-nav a.is-current { color: var(--acc-texto, var(--acc)); }
.main-nav a.is-current::after { content: ""; display: block; height: 2px; background: currentColor; border-radius: 2px; }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brasa);
  color: var(--brasa-ink);
  font-family: var(--heavy);
  font-size: 0.9rem;
  text-decoration: none;
  padding: 11px 18px;
  border-radius: 999px;
  white-space: nowrap;
}
.header-cta:hover { background: var(--brasa-hover); }

@media (max-width: 720px) {
  /* La nav horizontal se recorta en pantallas angostas y deja enlaces
     enfocables fuera del viewport: en movil el indice es la navegacion
     principal y el CTA de cabecera queda compacto y siempre visible. */
  .main-nav { display: none; }
  .header-cta { margin-left: auto; font-size: 0.8rem; padding: 9px 14px; min-height: 44px; }
  .indice-trigger { min-height: 44px; }
  /* Del Abuelo ya trae su CTA fijo en la barra inferior: sin duplicarlo arriba. */
  body.has-actionbar .header-cta { display: none; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--heavy);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  padding: 14px 26px;
  min-height: 48px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--brasa); color: var(--brasa-ink); }
.btn-primary:hover { background: var(--brasa-hover); }
.btn-secondary {
  background: transparent;
  color: var(--crema);
  box-shadow: inset 0 0 0 2px rgba(244, 236, 220, 0.45);
}
.btn-secondary:hover { box-shadow: inset 0 0 0 2px var(--crema); }
body[data-theme="light"] .btn-secondary {
  color: var(--tinta);
  box-shadow: inset 0 0 0 2px rgba(43, 33, 25, 0.4);
}
body[data-theme="light"] .btn-secondary:hover { box-shadow: inset 0 0 0 2px var(--tinta); }
.btn-full { width: 100%; }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.text-link {
  font-family: var(--heavy);
  font-size: 0.95rem;
  color: var(--acc);
  text-underline-offset: 4px;
}
body[data-brand="tostadas"] .text-link { color: #e98a8e; }

/* ---------- Secciones ---------- */
.section { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.section-tight { padding: clamp(2rem, 5vw, 3.5rem) 0; }

.eyebrow {
  font-family: var(--heavy);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--acc);
  display: block;
  margin-bottom: 0.7rem;
}
body[data-brand="tostadas"] .eyebrow { color: #e98a8e; }
/* Mismo caso que el brasa: el naranja de La Guarnicion es color de marca, no
   de texto. Sobre el crema del tema claro da 2.65:1; esta variante oscura del
   mismo tono (luminosidad al 32%) sube a 5.38:1. */
body[data-brand="guarnicion"] { --acc-texto: #8f5014; }
body[data-theme="light"] .eyebrow { color: var(--acc-texto, var(--acc)); }
body[data-theme="light"] .text-link { color: var(--acc-texto, var(--acc)); }

.section-heading { max-width: 640px; margin-bottom: 2.2rem; }
.section-heading p { color: var(--peltre); }
body[data-theme="light"] .section-heading p { color: var(--tinta-suave); }

.row-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

/* ---------- Hero del grupo ---------- */
.hero-group {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}
.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero-copy .lead {
  font-size: 1.12rem;
  color: var(--peltre);
  max-width: 34rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.8rem;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--peltre);
}
.trust-row li::before { content: "— "; color: var(--brasa); }

.mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}
.mosaic figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--carbon-2);
}
.mosaic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.mosaic figure:nth-child(1) { grid-row: span 2; }
.mosaic figure:nth-child(1) img { aspect-ratio: 3 / 4.4; }
.mosaic figcaption {
  font-family: var(--heavy);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 12px;
  color: var(--peltre);
}

/* ---------- Directorio de marcas (fichas) ---------- */
.brand-deck {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
/* Fix espacio muerto (Direccion 2026-07-15): con auto-fit, 1120px de
   contenedor ajusta 3 columnas -- Del Abuelo (ficha-star, ancho completo) +
   3 fichas dejaban a la 4a (Meduse) sola en una fila con 2 celdas vacias.
   A partir de 900px se fuerzan 4 columnas fijas: las 4 fichas no-star caben
   en una sola fila, sin huecos. */
@media (min-width: 900px) {
  .brand-deck { grid-template-columns: repeat(4, 1fr); }
  /* Posiciones dinamicas: escalonado vertical alterno en vez de rejilla
     perfectamente pareja (mismo recurso que .discipline-grid.offset). */
  .brand-deck .ficha:not(.ficha-star):nth-child(even) { margin-top: 1.6rem; }
  .brand-deck .ficha:not(.ficha-star):nth-child(odd) { margin-top: -0.6rem; }
}
.ficha {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  background: var(--carbon-2);
  border: 1px solid rgba(244, 236, 220, 0.12);
  border-top: 5px solid var(--ficha-acc, var(--brasa));
  min-height: 250px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.ficha:hover { transform: translateY(-3px); border-color: var(--ficha-acc, var(--brasa)); }
.ficha-star { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .ficha-star { display: grid; grid-template-columns: 1.1fr 1fr; }
  .ficha-star .ficha-media { order: 2; min-height: 100%; }
}
.ficha-media { position: relative; background: var(--carbon-3); }
.ficha-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.ficha-star .ficha-media img { aspect-ratio: auto; min-height: 240px; }
.ficha-media.contain { display: grid; place-items: center; padding: 1.6rem; }
.ficha-media.contain img { object-fit: contain; height: 140px; width: auto; aspect-ratio: auto; }
.ficha-body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.ficha-num {
  font-family: var(--display);
  font-size: 1rem;
  /* El color de marca vale siempre como borde o fondo, pero como TEXTO solo
     si llega a 4.5:1 sobre el carbon. De los cinco, unicamente el rojo de
     Tostadas se queda corto (3.50:1): esa ficha declara --ficha-ink con la
     variante clara que el resto del sitio ya usa para su texto. */
  color: var(--ficha-ink, var(--ficha-acc, var(--brasa)));
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  display: block;
}
.ficha h3 { font-size: 1.35rem; margin-bottom: 0.35rem; }
.ficha p { color: var(--peltre); font-size: 0.95rem; margin-bottom: 1rem; }
.ficha-cta {
  margin-top: auto;
  font-family: var(--heavy);
  font-size: 0.9rem;
  color: var(--crema);
}
.ficha-cta::after { content: " →"; color: var(--ficha-acc, var(--brasa)); }
.chip {
  display: inline-block;
  font-family: var(--heavy);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- Panel crema (formularios, reserva) ---------- */
.panel {
  background: var(--crema);
  color: var(--tinta);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 4vw, 2rem);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.panel h2, .panel h3 { color: var(--tinta); }
.panel .eyebrow { color: var(--brasa-texto); }
/* El brasa sigue sirviendo como texto sobre el carbon (5.39:1), pero dentro
   del panel crema cae a 2.89:1. Se corrige por superficie, en un solo sitio,
   en vez de parchear cada componente que entra al panel. */
.panel .directions-link,
.panel .branch-map-toggle { color: var(--brasa-texto); }
.panel p { color: var(--tinta-suave); }
.panel .field-hint { color: var(--tinta-suave); }
.reserva-nota { font-size: 0.85rem; margin: 0.7rem 0 0; }

/* Lo que el Club promete, antes de pedir el telefono: cada punto es una
   condicion que el negocio tiene que poder cumplir. */
.club-promesa {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.club-promesa li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  color: var(--peltre);
}
.club-promesa li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--acc);
}

/* ---------- Formularios ---------- */
form label {
  display: block;
  font-family: var(--heavy);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.9rem;
}
form input, form select, form textarea {
  width: 100%;
  margin-top: 6px;
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: #fffdf7;
  border: 1.5px solid #cbbc9d;
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 48px;
}
form textarea { resize: vertical; min-height: 90px; }
form input:focus, form select:focus, form textarea:focus {
  outline: 3px solid var(--brasa);
  outline-offset: 1px;
  border-color: var(--brasa);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--body);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--tinta-suave);
}
.check-row input {
  width: 20px;
  min-height: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--brasa);
  flex-shrink: 0;
}
/* ===== CLUB V2 — casillas de marcas ===== */
.brand-checks {
  border: 1.5px solid #cbbc9d;
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin: 0 0 0.9rem;
}
.brand-checks legend {
  font-family: var(--heavy);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0 6px;
}
.brand-check-all {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #cbbc9d;
}
.brand-checks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
@media (max-width: 480px) {
  .brand-checks-grid { grid-template-columns: 1fr; }
}
/* ===== FIN CLUB V2 ===== */

.status-line { min-height: 1.4em; font-size: 0.92rem; margin: 0.6rem 0 0; }
.status-line[data-status="success"] { color: var(--exito-texto); }
.status-line[data-status="error"] { color: var(--error-texto); }
/* Todos los formularios del sitio viven dentro del panel crema o de una pagina
   de tema claro, asi que en la practica estas son las reglas que se aplican. */
.panel .status-line[data-status="success"],
body[data-theme="light"] .status-line[data-status="success"] { color: var(--exito-panel); }
.panel .status-line[data-status="error"],
body[data-theme="light"] .status-line[data-status="error"] { color: var(--error-panel); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.field-error { display: block; color: var(--error-texto); font-size: 0.82rem; margin-top: 4px; font-weight: 400; }
.panel .field-error,
body[data-theme="light"] .field-error { color: var(--error-panel); }
input.is-invalid, select.is-invalid { border-color: var(--error); }
/* El verde de exito necesita texto blanco (4.9:1); con la tinta de brasa
   solo daria 3.7:1. */
.btn.is-success { background: var(--exito); color: #fff; }
.btn.is-success::before { content: "✓ "; }

/* ---------- Horarios por sucursal ----------
   Un renglon por rango de dias, con los dias destacados y la hora alineada.
   Reemplaza la linea apretada que antes juntaba horario + WhatsApp. */
.horario-lista { margin: 0.5rem 0; display: grid; gap: 0.2rem; }
.horario-lista div { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.horario-lista dt { font-family: var(--heavy); font-size: 0.82rem; min-width: 6.5rem; }
.horario-lista dd { margin: 0; font-size: 0.88rem; color: var(--peltre); }
body[data-theme="light"] .horario-lista dd { color: var(--tinta-suave); }

.branch-hours-line { display: grid; gap: 0.2rem; margin-bottom: 0.6rem; }
.horario-fila { display: block; font-size: 0.9rem; }
.horario-fila b { font-family: var(--heavy); font-weight: 400; margin-right: 0.4rem; }

.branch-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }

/* Casilla de aviso vs. marketing en los formularios (consentimiento separado) */
/* El enlace al aviso de privacidad vive SIEMPRE dentro del panel crema, asi
   que necesita tonos oscuros: el brasa a secas daba 2.89:1 y el peltre de
   Rocave, 1.42:1 — es decir, el enlace legal del consentimiento era
   practicamente invisible en esa pagina. */
.consent-legal a { color: var(--brasa-texto); text-underline-offset: 3px; }
body[data-brand="rocave"] .consent-legal a { color: #7e6226; }
.field-hint { display: block; margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--peltre); }
body[data-theme="light"] .field-hint { color: var(--tinta-suave); }

/* ---------- Paginas legales (aviso de privacidad) ---------- */
.legal-hero { padding: clamp(2.5rem, 6vw, 4rem) 0 0.5rem; }
.legal-doc { max-width: 46rem; }
.legal-doc h2 {
  font-family: var(--heavy);
  font-size: 1.12rem;
  margin: 2rem 0 0.5rem;
}
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal-doc li { margin-bottom: 0.4rem; }
.legal-doc a { color: var(--brasa); text-underline-offset: 3px; }
.legal-updated {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  font-size: 0.85rem;
  color: var(--peltre);
}
body[data-theme="light"] .legal-updated { color: var(--tinta-suave); }

/* ---------- Club ---------- */
.club-band {
  background: var(--carbon-2);
  border-block: 1px solid rgba(244, 236, 220, 0.12);
}
.club-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 880px) { .club-grid { grid-template-columns: 1fr 1fr; } }
.club-note { font-size: 0.85rem; color: var(--peltre); }

/* ---------- Portada corporativa: Grupo Pro CYB para negocios (Bloque C) ----------
   La portada tiene dos publicos: el consumidor que llega suelto y, sobre todo,
   el B2B (inversion, alianzas, franquicias, empleo), que es el que de verdad
   busca la portada del grupo. Esta seccion es su puerta: un formulario por
   intencion, separado del Club promocional. */
.negocio-band {
  background: var(--carbon-2);
  border-block: 1px solid rgba(244, 236, 220, 0.12);
}
.negocio-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 880px) { .negocio-grid { grid-template-columns: 1fr 1fr; } }
.negocio-intro p { color: var(--peltre); max-width: 34rem; }
.negocio-vias {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.negocio-vias li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  color: var(--peltre);
}
.negocio-vias li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brasa);
}
.negocio-vias strong { color: var(--crema); font-family: var(--heavy); font-weight: 400; }
.negocio-nota { font-size: 0.8rem; color: var(--tinta-suave); margin: 0.9rem 0 0; }
/* Misma nota al pie de un formulario, pero ANTES del boton: la frecuencia de
   envio y como darse de baja tienen que verse antes de aceptar, no despues. */
.form-nota { font-size: 0.8rem; color: var(--tinta-suave); margin: 0.9rem 0 0.2rem; }
.form-nota a { color: inherit; text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid rgba(244, 236, 220, 0.12);
  padding: 2.5rem 0 5.5rem;
  font-size: 0.9rem;
  color: var(--peltre);
}
body[data-theme="light"] .site-footer {
  border-top-color: rgba(43, 33, 25, 0.15);
  color: var(--tinta-suave);
}
.footer-grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.site-footer h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.site-footer a { text-decoration: none; opacity: 0.85; }
.site-footer a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.footer-legal { margin-top: 2rem; font-size: 0.8rem; opacity: 0.7; }

/* ---------- Barra de accion movil ---------- */
.mobile-actionbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--carbon-2);
  border-top: 1px solid rgba(244, 236, 220, 0.16);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-actionbar a {
  font-family: var(--heavy);
  font-size: 0.86rem;
  text-decoration: none;
  text-align: center;
  padding: 15px 4px;
  color: var(--crema);
}
.mobile-actionbar a:first-child { background: var(--brasa); color: var(--brasa-ink); }
@media (min-width: 880px) { .mobile-actionbar { display: none; } body { --actionbar: 0px; } }
@media (max-width: 879px) { body.has-actionbar { padding-bottom: 58px; } }

/* ============================================================
   Grupo Pro CYB (index) — identidad corporativa distinta de las marcas
   Tipografia estructural, "espectro" de las 5 marcas como firma.
   ============================================================ */
.corp-masthead {
  padding: clamp(3.2rem, 8vw, 6rem) 0 clamp(2.4rem, 6vw, 4rem);
  border-bottom: 1px solid rgba(244, 236, 220, 0.1);
}
.corp-h1 {
  font-family: var(--heavy);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  font-size: clamp(2.6rem, 8vw, 4.8rem);
  max-width: 16ch;
  margin-bottom: 1.1rem;
}
.corp-masthead .lead { max-width: 42rem; }

.spectrum-rule {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  margin: 2rem 0 2.2rem;
  max-width: 420px;
}
.spectrum-rule span { flex: 1; background: var(--c); }

/* ---------- Franja de confianza (portada) ----------
   Los datos duros bajan aqui, despues de las marcas, en vez de interrumpir
   entre el indice y las tarjetas. Solo quedan los dos que el visitante usa
   para ubicarse; el resto eran cifras que ya cuenta el propio portafolio. */
.trust-band {
  padding: clamp(1.6rem, 4vw, 2.4rem) 0;
  border-block: 1px solid rgba(244, 236, 220, 0.12);
}
.trust-band-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.6rem;
}
.trust-item { margin: 0; }
.trust-item strong {
  display: block;
  font-family: var(--heavy);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--crema);
  margin-bottom: 0.15rem;
}
.trust-item span { font-size: 0.86rem; color: var(--peltre); }

.editorial-strip {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, 1fr);
}
.editorial-strip figure { margin: 0; border-radius: 10px; overflow: hidden; position: relative; }
.editorial-strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.editorial-strip figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6rem 0.7rem;
  font-family: var(--heavy);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent);
}

/* ============================================================
   Pagina Del Abuelo
   ============================================================ */
.hero-botanas { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.hero-botanas-grid { display: grid; gap: 2.2rem; }
@media (min-width: 960px) { .hero-botanas-grid { grid-template-columns: 1.05fr 0.95fr; align-items: start; } }
.hero-logo { width: min(320px, 70%); margin-bottom: 1.2rem; }
.hero-branch-line { font-family: var(--heavy); font-size: 0.92rem; color: var(--acc); margin: 0.4rem 0 0; }

.branch-hours-line { font-size: 0.9rem; }
.directions-link {
  font-family: var(--heavy);
  font-size: 0.9rem;
  color: var(--brasa);
  text-underline-offset: 4px;
}

.branch-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.branch-card {
  position: relative;
  background: var(--carbon-2);
  border: 1px solid rgba(244, 236, 220, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.branch-card.is-active { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
/* --foto-pos la fija cada imagen inline segun branch.photoPosition
   (config.js/botanas.js): el material nuevo (2026-08-31) es vertical y
   object-fit:cover recorta arriba/abajo, asi que el encuadre correcto
   depende de la foto, no de un 50% 50% generico. */
.branch-card img { aspect-ratio: 16 / 10; object-fit: cover; object-position: var(--foto-pos, 50% 50%); width: 100%; }
.branch-card-body { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.branch-card h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 0; }
.branch-ambiente { font-family: var(--heavy); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); }
.branch-card p { margin: 0; font-size: 0.92rem; color: var(--peltre); }
.branch-card small { color: var(--peltre); }
.branch-card-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
/* Accion principal de cada sucursal: un enlace de verdad a la reserva de ESA
   sucursal. Antes era un boton que solo "seleccionaba" y dejaba al usuario
   buscando donde continuar. */
.branch-reserve {
  flex: 1 1 100%;
  min-height: 44px;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.88rem;
  text-align: center;
}
/* Quien llega desde la ficha de Maps de una sucursal concreta ve cual es. */
.branch-flag {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  font-family: var(--heavy);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--brasa);
  color: var(--brasa-ink);
  padding: 4px 10px;
  border-radius: 999px;
}
.branch-map-link {
  flex: 1 1 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--heavy);
  font-size: 0.88rem;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(244, 236, 220, 0.4);
}

.open-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--heavy);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--peltre);
  margin-bottom: 0.2rem;
}
.open-chip[hidden] { display: none; }
.open-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8a8378; flex-shrink: 0; }
.open-chip.is-open { color: #7fc98f; }
.open-chip.is-open::before { background: #4caf6d; }
.panel .open-chip { color: var(--tinta-suave); }
.panel .open-chip.is-open { color: #2f6b40; }
/* Atajo secundario: antes decia solo el numero de telefono, que se escanea
   como "llama tu y averigua". Ahora dice para que sirve. */
.branch-phone { font-size: 0.88rem; color: var(--peltre); text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }

/* Cuarta puerta junto a las tres sucursales (B4, 2026-09-09): "Cotiza tu
   evento". La renderiza botanas.js dentro de #branchGrid (misma rejilla que
   las 3 tarjetas de sucursal), asi que cae como 4a pieza de la fila a 1440
   y despues de la 3a sucursal a 375 sin CSS de posicionamiento aparte -- es
   el orden natural del grid. Mismo radio/borde que .branch-card (los
   hereda), sin foto: usa un tono de acento en vez de imagen, y el mismo
   tratamiento de hover/foco que .menu-cat-chip. */
.branch-card--cotiza {
  /* Fondo plano de .branch-card (var(--carbon-2)), sin degradado: se probo
     un tinte de --acc en la esquina y el texto naranja (--acc, tanto el
     eyebrow como el CTA) caia a 3.77:1 justo ahi -- bajo el 4.5:1 del
     umbral. Plano y sin variacion evita que dependa de en que parte del
     degradado caiga el texto; el circulo de icono ya distingue la tarjeta
     de sobra. */
  justify-content: center;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.branch-card--cotiza:hover,
.branch-card--cotiza:focus-visible {
  border-color: var(--acc);
  transform: translateY(-2px);
}
.branch-card--cotiza:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .branch-card--cotiza:hover, .branch-card--cotiza:focus-visible { transform: none; }
}
.branch-card--cotiza-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--acc);
  color: var(--acc-ink);
  flex: 0 0 auto;
}
.branch-card--cotiza-icon svg { width: 20px; height: 20px; }
.branch-card--cotiza h3 { font-family: var(--display); font-weight: 400; font-size: 1.4rem; margin: 0.5rem 0 0; }
.branch-card--cotiza p { margin: 0; }
.branch-card--cotiza-cta {
  margin-top: 0.9rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--heavy);
  font-size: 0.88rem;
  color: var(--acc);
}

/* Pestanas de sucursal de la seccion de eventos */
.event-branch-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.event-branch-tab {
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--heavy);
  font-size: 0.85rem;
  color: var(--crema);
  background: transparent;
  border: 1px solid rgba(244, 236, 220, 0.28);
}
.event-branch-tab.is-active { background: var(--brasa); color: var(--brasa-ink); border-color: transparent; }

.menu-native { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 1.5rem; }
.menu-section-block { background: var(--carbon-2); border: 1px solid rgba(244,236,220,0.1); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.menu-section-block h3 { font-family: var(--display); font-weight: 400; font-size: 1.45rem; color: var(--acc); margin-bottom: 0.2rem; }
.menu-note { font-size: 0.85rem; color: var(--peltre); margin-bottom: 0.8rem; }
.menu-section-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.menu-section-block li { display: grid; grid-template-columns: 1fr auto; gap: 0 0.8rem; align-items: baseline; }
.menu-item-name { font-weight: 600; }
.menu-item-desc { grid-column: 1; font-size: 0.88rem; color: var(--peltre); }
.menu-item-price { font-variant-numeric: tabular-nums; color: var(--acc); font-family: var(--heavy); white-space: nowrap; }

/* Teaser al visor de menu.html#carta-1 (B3, 2026-09-09; antes era un
   <details> con los 2 JPG de la carta de agosto, ya retirada). */
.menu-image-fallback {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  background: var(--carbon-2);
  border: 1px solid rgba(244, 236, 220, 0.14);
  text-decoration: none;
  color: var(--crema);
}
.menu-image-fallback img { flex: none; width: 52px; height: auto; border-radius: 8px; }
.menu-image-fallback span { display: block; font-size: 0.84rem; color: var(--peltre); line-height: 1.45; }
.menu-image-fallback strong { display: block; font-family: var(--heavy); font-size: 0.86rem; color: var(--crema); margin-bottom: 0.15rem; }

.menu-dialog {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  background: var(--carbon-2);
  max-width: min(960px, 92vw);
}
.menu-dialog::backdrop { background: rgba(10, 8, 6, 0.82); }
.menu-dialog img { max-height: 84vh; width: auto; max-width: 100%; margin-inline: auto; }
.menu-dialog-close {
  position: sticky;
  top: 10px;
  margin: 10px 10px 0 auto;
  display: block;
  font-family: var(--heavy);
  background: var(--crema);
  color: var(--tinta);
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
  z-index: 2;
}

.event-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.event-card {
  background: var(--carbon-2);
  border: 1px solid rgba(244, 236, 220, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
}
/* --foto-pos: mismo mecanismo que .branch-card img, ver esa nota. */
.event-card img { aspect-ratio: 16 / 11; object-fit: cover; object-position: var(--foto-pos, 50% 50%); width: 100%; }
.event-card > span {
  display: block;
  font-family: var(--heavy);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc);
  padding: 1rem 1.2rem 0;
}
.event-card h3 { padding: 0.2rem 1.2rem 0; font-family: var(--display); font-weight: 400; font-size: 1.35rem; }
.event-card p { padding: 0 1.2rem 1.2rem; margin: 0; font-size: 0.92rem; color: var(--peltre); }

.reservation-result { margin-top: 1rem; border-top: 1.5px dashed #cbbc9d; padding-top: 1rem; }
.whatsapp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  width: 100%;
  font-family: var(--heavy);
  font-size: 0.92rem;
  background: #1f7a43;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  padding: 10px 16px;
  text-align: center;
}
.after-visit { margin-top: 1.1rem; font-size: 0.9rem; }
.after-visit span { font-family: var(--heavy); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brasa); }
.after-visit h3 { font-size: 1rem; margin: 0.3rem 0 0.5rem; }
.review-link { color: var(--tinta); font-family: var(--heavy); font-size: 0.92rem; text-underline-offset: 4px; }
.visit-reward { font-size: 0.85rem; color: var(--tinta-suave); margin-top: 0.6rem; }

/* ============================================================
   Paginas de marca (hero comun)
   ============================================================ */
.brand-hero { padding: clamp(2.8rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.brand-hero-grid { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 900px) { .brand-hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.brand-logo { width: min(300px, 62%); margin-bottom: 1.4rem; }
.brand-hero .lead { font-size: 1.1rem; color: var(--peltre); max-width: 32rem; }
body[data-theme="light"] .brand-hero .lead { color: var(--tinta-suave); }
.brand-hero-media { border-radius: var(--radius); overflow: hidden; }
.brand-hero-media img { width: 100%; object-fit: cover; }
.breadcrumb {
  font-family: var(--heavy);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  margin-bottom: 1.6rem;
  display: inline-block;
  text-decoration: none;
  opacity: 0.8;
}
.breadcrumb:hover { opacity: 1; }
.breadcrumb::before { content: "← "; color: var(--acc); }

.pending-note {
  border: 1.5px dashed color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  font-size: 0.92rem;
  max-width: 640px;
}
.pending-note strong { font-family: var(--heavy); }

/* ---------- Tostadas ---------- */
.product-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.product-card {
  background: var(--carbon-2);
  border: 1px solid rgba(244, 236, 220, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-card img { aspect-ratio: 4 / 4.4; object-fit: cover; width: 100%; }
.product-card-body { padding: 1.1rem 1.2rem 1.2rem; }
.product-card h3 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; margin-bottom: 0.25rem; }
.product-card p { margin: 0; font-size: 0.9rem; color: var(--peltre); }
.product-card.text-only { justify-content: center; border-left: 4px solid var(--acc); min-height: 130px; }

.wide-banner { border-radius: var(--radius); overflow: hidden; }
.wide-banner img { width: 100%; }

/* ---------- Rocave ---------- */
.alcohol-note {
  margin-top: 2.5rem;
  border: 1px solid rgba(207, 200, 184, 0.3);
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--peltre);
  text-align: center;
}

/* ---------- Guarnicion: catalogo ---------- */
.gu-cat-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.gu-cat-card {
  display: flex;
  flex-direction: column;
  background: #fffdf5;
  border: 1.5px solid #e0d3b4;
  border-top: 4px solid var(--maroon);
  border-radius: var(--radius);
  overflow: hidden;
}
/* La tarjeta de misterio ocupa la fila entera. Con --container en 1120px
   nunca caben cinco columnas -necesitarian 1276.8px- asi que quedaba siempre
   huerfana en su propia fila con ~800px de vacio al lado. Y ademas es la
   pieza de campana del lanzamiento, no un producto mas del anaquel. */
.gu-cat-card--misterio { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .gu-cat-card--misterio {
    display: grid;
    grid-template-columns: minmax(240px, 32%) 1fr;
    grid-template-rows: 1fr auto;
  }
  .gu-cat-card--misterio .gu-cat-media {
    grid-column: 1;
    grid-row: 1 / -1;
    height: 100%;
    aspect-ratio: auto;
  }
  .gu-cat-card--misterio .gu-cat-cuerpo { grid-column: 2; grid-row: 1; align-self: end; }
  .gu-cat-card--misterio .gu-cat-accion {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin: 0 1.3rem 1.3rem;
  }
}
.gu-cat-media {
  position: relative;
  /* Flex, no grid: con "display: grid; place-items: center" el porcentaje de
     max-height del <img> no se resuelve contra la fila implicita -queda como
     "none"- y la foto vertical se sale 54px por debajo de esta caja, encima
     del cuerpo de la tarjeta. Con flex, el mismo max-height: 100% de abajo si
     se resuelve contra la caja de contenido y la foto queda contenida sin
     recortarse ni deformarse. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  /* Proporcion fija en vez de min-height: la unica foto real es vertical
     (618x1000) y estiraba su caja a ~386px mientras las fantasma se quedaban
     en el minimo, dejando 241px de hueco antes del boton en esas tarjetas. */
  aspect-ratio: 4 / 5;
  /* .gu-cat-media es hijo de un flex column (.gu-cat-card). Sin este reset,
     "min-height: auto" -el default de los items flex- usa el tamano minimo
     del contenido para el eje principal: la foto vertical, a su relacion
     natural, pide mas alto que el 4/5 y se lo queda, volviendo a romper la
     igualdad de alturas que el aspect-ratio de arriba deberia garantizar. */
  min-height: 0;
  background: #f7efdd;
}
/* object-fit: contain porque max-width y max-height al 100% se resuelven por
   separado: sin esto, la foto vertical (618x1000) se estira sin guardar su
   relacion de aspecto -0.77 en vez de 0.62- en lugar de encogerse dentro de
   la caja. contain la deja completa y sin deformar; nunca recorta. */
.gu-cat-media img { max-width: 100%; max-height: 100%; height: auto; object-fit: contain; }
.gu-cat-media--fantasma { background: var(--maroon); }
/* El wordmark hace de empaque cuando no hay foto de producto. Se apaga un
   poco para que no compita con la tarjeta que si tiene fotografia real. */
.gu-cat-fantasma { width: 72%; opacity: 0.55; }

.gu-cat-media--misterio { background: var(--maroon); }
.gu-cat-silueta { width: 42%; fill: #1a0d0c; }
.gu-cat-que {
  position: absolute;
  left: var(--qx);
  top: var(--qy);
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #fff;
  line-height: 1;
}

.gu-cat-cuerpo { padding: 1.2rem 1.3rem; flex: 1; }
.gu-cat-cuerpo h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--tinta);
  margin: 0.5rem 0 0.4rem;
}
/* El estado nunca comunica solo por color: siempre lleva su texto. */
.gu-cat-estado {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #e8dcc0;
  color: #6b4a12;
}
.gu-cat-card--anaquel .gu-cat-estado { background: #d9e8cf; color: #33591f; }
.gu-cat-estado--misterio { background: var(--acc); color: #14100c; }
.gu-cat-presentacion { margin: 0 0 0.3rem; font-size: 0.85rem; color: var(--acc-texto, var(--acc)); font-weight: 600; }
.gu-cat-resumen { margin: 0; font-size: 0.92rem; color: var(--tinta-suave); }
.gu-cat-variantes {
  list-style: none;
  padding: 0;
  margin: 0.7rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.gu-cat-variantes li {
  font-size: 0.76rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid #e0d3b4;
  border-radius: 999px;
  color: var(--tinta-suave);
}
.gu-cat-lanzamiento { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--tinta-suave); font-style: italic; }

.gu-cat-accion {
  display: block;
  margin: 0 1.3rem 1.3rem;
  padding: 0.7rem 1rem;
  text-align: center;
  border-radius: var(--radius);
  background: var(--maroon);
  color: #f4ecdc;
  font-weight: 600;
  text-decoration: none;
}
.gu-cat-accion:hover { background: #5f1a18; }
.gu-cat-accion:focus-visible { outline: 3px solid var(--acc-texto); outline-offset: 2px; }

/* ---------- Meduse ---------- */
.discipline-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.discipline {
  border: 1px solid rgba(99, 141, 190, 0.4);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  background: linear-gradient(180deg, rgba(99, 141, 190, 0.09), transparent 65%);
}
.discipline h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--acc); }
.discipline p { margin: 0; font-size: 0.95rem; color: var(--peltre); }
/* ============================================================
   Componentes compartidos v2: mapa, logo real, social, mayoreo
   ============================================================ */
.brand-logo-img { height: 34px; width: auto; display: block; }

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}
.social-row a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--heavy);
  font-size: 0.85rem;
  text-decoration: none;
  opacity: 0.9;
}
.social-row a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.location-card {
  display: grid;
  gap: 1.2rem;
  background: var(--carbon-2);
  border: 1px solid rgba(244, 236, 220, 0.12);
  border-radius: var(--radius);
  padding: 1.4rem;
}
@media (min-width: 780px) { .location-card { grid-template-columns: 1fr 1fr; align-items: center; } }
.location-card h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin-bottom: 0.4rem; }
.location-card p { color: var(--peltre); margin: 0 0 1rem; }
body[data-theme="light"] .location-card {
  background: #fffdf5;
  border-color: #e0d3b4;
}
body[data-theme="light"] .location-card p { color: var(--tinta-suave); }

.map-embed {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--carbon-3);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.branch-map-toggle {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--heavy);
  font-size: 0.85rem;
  color: var(--brasa);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Bloque mayoreo / proveedor (La Guarnicion) */
.wholesale-block {
  display: grid;
  gap: 1.4rem;
  background: linear-gradient(180deg, rgba(122, 35, 32, 0.06), transparent);
  border: 1.5px solid rgba(122, 35, 32, 0.25);
  border-radius: var(--radius);
  padding: 1.8rem;
}
@media (min-width: 820px) { .wholesale-block { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }
.wholesale-block h2 { color: var(--tinta); }
.wholesale-block p { color: var(--tinta-suave); }
.wholesale-list { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: 0.5rem; }
.wholesale-list li {
  font-size: 0.95rem;
  color: var(--tinta-suave);
  padding-left: 1.3rem;
  position: relative;
}
.wholesale-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc);
}

/* ============================================================
   Tostadas del Compa's — identidad pop / fast-food
   Rojo + mostaza, formas diagonales, tipografia blocky.
   ============================================================ */
body[data-brand="tostadas"] { --mostaza: #f0ad3d; }

.diagonal-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.8rem, 7vw, 5rem) 0 clamp(3.5rem, 8vw, 6rem);
}
.diagonal-hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% 18% -10%;
  background: linear-gradient(115deg, #1a1511 0%, #1a1511 46%, var(--mostaza) 46%, var(--mostaza) 100%);
  z-index: 0;
}
.diagonal-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% 0 -10%;
  height: 22%;
  background: var(--brasa-underlay, #c53a40);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
  z-index: 0;
}
.diagonal-hero > .container { position: relative; z-index: 1; }
.diagonal-hero .eyebrow { color: var(--mostaza); }
.diagonal-hero .brand-logo { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45)); }

.menu-board {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.menu-board-card {
  position: relative;
  background: var(--carbon-2);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(244, 236, 220, 0.12);
  display: flex;
  flex-direction: column;
}
.menu-board-card .board-media {
  position: relative;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
.menu-board-card .board-media img { width: 100%; height: 100%; object-fit: cover; }
.menu-board-card .board-num {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--mostaza);
  color: #1a1511;
  font-family: var(--heavy);
  font-size: 1.1rem;
  border-radius: 50%;
  z-index: 2;
}
.menu-board-card .board-body { padding: 1rem 1.2rem 1.3rem; margin-top: -0.6rem; }
.menu-board-card h3 {
  font-family: var(--heavy);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}
.menu-board-card p { margin: 0; font-size: 0.9rem; color: var(--peltre); }
.menu-board-card.is-text {
  justify-content: center;
  padding: 1.6rem 1.3rem;
  border-left: 5px solid var(--mostaza);
  min-height: 140px;
}

/* Rocave: el escenario secuestrado que vivía aquí (cinco pantallas con
   position:sticky que capturaban rueda/teclado/tacto vía rocave.js) se
   retiró entero el 2026-08-29 — reconstrucción completa, frente P6. Causó
   dos fallos Critical en agosto (no soltaba la página; tapaba el
   formulario de distribución) y ninguna de las cinco referencias que
   dictaron la reconstrucción captura el scroll. El bloque nuevo vive al
   final de este archivo, rotulado "P6 · ROCAVE". `.visually-hidden` se
   conserva ahí (sigue siendo utilidad genérica, no específica de Rocave).
   Confirmado con grep antes de borrar: `.rocave-mark`, `.rocave-notes`,
   `.rocave-showcase`, `.showcase-caption`, `.rocave-strip` y `.gold-rule`
   no se usaban en ninguna otra página — sólo en este archivo y en
   rocave.html, que se reescribió en el mismo frente. Informe completo:
   documentacion/auditorias/P6-rocave-2026-08-29.md */

/* ============================================================
   La Guarnicion — acento maroon real de etiqueta
   ============================================================ */
body[data-brand="guarnicion"] { --maroon: #7a2320; }
.label-proof {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #fffdf5;
  border: 1.5px solid #e0d3b4;
  border-radius: 999px;
  padding: 0.6rem 1.2rem 0.6rem 0.6rem;
  width: fit-content;
}
.label-proof img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.label-proof span { font-family: var(--heavy); font-size: 0.82rem; color: var(--tinta); }

/* ============================================================
   Meduse — identidad de movimiento / asimetria
   ============================================================ */
.discipline-grid.offset { gap: 1.4rem; }
@media (min-width: 780px) {
  .discipline-grid.offset article:nth-child(2) { margin-top: 2.4rem; }
}
.discipline-grid .discipline {
  position: relative;
  border-top: 3px solid var(--azul-claro);
  border-radius: 4px;
}

/* ============================================================
   Motion v2 — revelado, presion y view transitions
   ============================================================ */
:root { --dur-quick: 180ms; --dur-reveal: 480ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); }

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal].is-revealed { opacity: 1; transform: none; }

.btn:active, .branch-select-button:active, .menu-page-toggle:active {
  transform: scale(0.97);
}
.btn, .branch-select-button, .menu-page-toggle { transition: background var(--dur-quick) ease, transform var(--dur-quick) ease, box-shadow var(--dur-quick) ease; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn:active, .branch-select-button:active, .menu-page-toggle:active { transform: none; }
  @view-transition { navigation: none; }
}

/* ============================================================
   Brand tour — previous/next static navigation band (Task 8)
   ============================================================ */
.brand-tour {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(244, 236, 220, 0.12);
}
body[data-theme="light"] .brand-tour { border-top-color: rgba(43, 33, 25, 0.15); }
.brand-tour a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.6rem clamp(1.2rem, 4vw, 3rem);
  text-decoration: none;
  font-family: var(--display);
  font-size: clamp(1.05rem, 3vw, 1.6rem);
  overflow-wrap: break-word;
  border-bottom: 4px solid transparent;
  transition: border-color var(--dur-quick) ease, background var(--dur-quick) ease;
}
.brand-tour a span {
  font-family: var(--heavy);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}
.brand-tour a.next { text-align: right; align-items: flex-end; }
.brand-tour a:hover, .brand-tour a:focus-visible { border-bottom-color: var(--tour-acc, var(--brasa)); background: rgba(244, 236, 220, 0.04); }

/* ===== TOSTADAS — La Tira del Compa's (marquee cinético) =====
   Franja tipográfica a sangre, energía de puesto callejero. Dos carriles en
   sentidos opuestos que se inclinan con el scroll (JS). Estado por defecto
   (sin-JS / prefers-reduced-motion): tira estática, envuelta y legible. */
body[data-brand="tostadas"] {
  --tira-red: #c53a40;
  --tira-mostaza: #f0ad3d;
  /* Este crema se lee sobre el rojo de la tira. A tamano grande cumplia, pero
     en movil la tipografia baja del umbral de 24px y entonces sus 4.41:1 se
     quedaban cortos. Se aclara lo justo: 4.99:1, valido a cualquier tamano. */
  --tira-crema: #fffaf3;
}

.tira-compas {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: clamp(0.5rem, 3vw, 1.5rem);
  padding: clamp(1.1rem, 3.4vw, 1.9rem) 0 clamp(0.9rem, 3vw, 1.5rem);
  background-color: var(--tira-red);
  background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.07) 0 16px, transparent 16px 34px);
  border-top: 4px solid var(--tira-mostaza);
  border-bottom: 4px solid var(--tira-mostaza);
}

.tira-title {
  margin: 0 auto clamp(0.7rem, 2.2vw, 1.05rem);
  max-width: 42rem;
  padding: 0 1.1rem;
  text-align: center;
  font-family: var(--heavy);
  font-size: clamp(0.92rem, 2.6vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: #fff;
}
.tira-title span {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.82em;
  letter-spacing: 0;
  text-transform: none;
  /* A 12px este crema daba 4.25:1 sobre el rojo de la tira: se aclara lo justo
     para pasar AA (4.84:1) sin perder el tono calido frente al blanco puro
     del titulo que lleva encima. */
  color: #fff6ea;
}

/* La inclinación (--tira-lean) la escribe el JS a partir de la velocidad de
   scroll; es puramente decorativa (no coloca contenido), así que se anula en
   reduced-motion sin romper el layout. */
.tira-viewport {
  transform: skewX(var(--tira-lean, 0deg));
  will-change: transform;
}

.tira-lane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.5rem;
  will-change: transform;
}
.tira-lane--alt { margin-top: 0.15rem; }

.tira-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.4rem;
}

/* Estado vivo (JS + movimiento permitido): una sola línea que corre. */
.tira-compas.is-live .tira-lane {
  flex-wrap: nowrap;
  width: max-content;
  justify-content: flex-start;
  gap: 0;
}
.tira-compas.is-live .tira-group {
  flex: none;
  flex-wrap: nowrap;
  gap: 0;
}
/* Estático: el carril decorativo se oculta; quedan los chips como índice. */
.tira-compas:not(.is-live) .tira-lane--alt { display: none; }

.tira-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.3rem 0.85rem;
  border-radius: 12px;
  font-family: var(--heavy);
  font-size: clamp(1.35rem, 5vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--tira-crema);
  transition: color var(--dur-quick) ease, background var(--dur-quick) ease, transform var(--dur-quick) ease;
}
.tira-chip:hover,
.tira-chip:focus-visible {
  background: var(--tira-mostaza);
  color: #1a1511;
  transform: rotate(-1.6deg);
}

.tira-star {
  flex: none;
  padding: 0 0.28rem;
  color: var(--tira-mostaza);
  font-size: clamp(0.9rem, 2.6vw, 1.5rem);
  line-height: 1;
  transform: translateY(-0.06em);
}

.tira-phrase {
  flex: none;
  padding: 0 0.35rem;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.95rem, 3.2vw, 1.55rem);
  white-space: nowrap;
  color: var(--tira-crema);
}
.tira-lane--alt .tira-star { color: #fff; opacity: 0.6; }

.tira-controls { text-align: center; margin-top: clamp(0.7rem, 2vw, 1rem); }
.tira-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: #1a1511;
  color: var(--tira-crema);
  font-family: var(--heavy);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.tira-toggle::before {
  content: "\23F8"; /* ⏸ */
  font-size: 0.9em;
  line-height: 1;
  color: var(--tira-mostaza);
}
.tira-toggle[aria-pressed="true"]::before { content: "\25B6"; } /* ▶ */
.tira-toggle:hover { background: #241c15; }

/* Cabeceo del sticky header al saltar desde un chip + resalte de la tarjeta. */
body[data-brand="tostadas"] .menu-board-card { scroll-margin-top: 84px; }
.menu-board-card.is-antojo {
  animation: tiraAntojo 1.5s var(--ease-out);
  z-index: 2;
}
@keyframes tiraAntojo {
  0%   { box-shadow: 0 0 0 0 rgba(240, 173, 61, 0); }
  12%  { box-shadow: 0 0 0 4px var(--tira-mostaza); }
  40%  { box-shadow: 0 0 0 4px var(--tira-mostaza); }
  100% { box-shadow: 0 0 0 0 rgba(240, 173, 61, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tira-viewport { transform: none !important; }
  .tira-compas .tira-lane { transform: none !important; }
  .tira-controls { display: none; } /* no hay movimiento que pausar */
  .menu-board-card.is-antojo { animation: none; }
}
/* ===== FIN TOSTADAS ===== */

/* ===== TOSTADAS — carta que vende =====
   Catalogo por categorias con foto y accion por platillo. Sustituye la lista
   de precios de julio. El bloque de La Tira (arriba) NO se toca.
   Las tarjetas sin foto no se dejan vacias: caen a un campo naranja con el
   nombre en display, porque etiquetar una foto con el platillo equivocado es
   peor que no ponerla. */

body[data-brand="tostadas"] {
  --carta-campo: #e0a03c;      /* el naranja de los flyers de la marca */
  --carta-tinta: #14100c;
  /* El encabezado del sitio tambien es sticky y mide 63px en todos los anchos.
     Los chips de categoria tienen que pegarse POR DEBAJO de el: con top:0 se
     metian detras (z-index 20 contra 40) y quedaban invisibles e intocables
     justo durante los 8000px de carta, que es cuando sirven. */
  --carta-header: 63px;
  --carta-banda: 135px;        /* header + fila de chips, para el scroll */
}

/* Chips de categoria: pegajosos bajo el header, como la carta de la referencia */
.carta-chips {
  position: sticky;
  top: var(--carta-header);
  z-index: 20;
  margin: 0 0 2rem;
  padding: 0.75rem 0;
  background: linear-gradient(to bottom, var(--carbon) 70%, transparent);
}
.carta-chips-fila {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.carta-chips-fila::-webkit-scrollbar { display: none; }
.carta-chip {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  border: 1px solid rgba(244, 236, 220, 0.25);
  border-radius: 999px;
  color: var(--crema);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.carta-chip:hover,
.carta-chip:focus-visible { background: var(--acc); border-color: var(--acc); color: #fff; }

.carta-constantes {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--acc);
  background: rgba(197, 58, 64, 0.09);
  border-radius: 0 12px 12px 0;
}
.carta-constantes p { margin: 0 0 0.35rem; }
.carta-constantes p:last-child { margin-bottom: 0; }
.carta-constantes-nota { color: var(--peltre); font-size: 0.95rem; }

.carta-seccion { margin: 0 0 3.5rem; scroll-margin-top: var(--carta-banda); }
.carta-seccion-foto {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  aspect-ratio: 3 / 2;
}
.carta-seccion-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carta-seccion-cab { margin-bottom: 1.5rem; }
.carta-seccion-cab h3 { margin: 0; }
.carta-lema {
  margin: 0.35rem 0 0;
  color: var(--carta-campo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.carta-seccion-nota { margin: 0.35rem 0 0; color: var(--peltre); font-size: 0.95rem; }

.carta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.carta-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(244, 236, 220, 0.12);
  scroll-margin-top: var(--carta-banda);
}
.carta-card-media { aspect-ratio: 1 / 1; overflow: hidden; }
.carta-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carta-card-cuerpo { padding: 0.9rem 1rem 0.5rem; flex: 1; }
.carta-card-cuerpo h4 { margin: 0; font-size: 1.05rem; }
.carta-card-desc { margin: 0.3rem 0 0; color: var(--peltre); font-size: 0.88rem; }
.carta-edad {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--peltre);
}

/* Sin foto confirmada: campo naranja y tipografia. Intencional, no roto. */
.carta-card--sinfoto { background: var(--carta-campo); border-color: var(--carta-campo); }
.carta-card--sinfoto .carta-card-cuerpo { padding-top: 2.5rem; padding-bottom: 1.5rem; }
.carta-card--sinfoto h4 {
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1.05;
  color: var(--carta-tinta);
}
.carta-card--sinfoto .carta-card-desc,
.carta-card--sinfoto .carta-edad { color: rgba(20, 16, 12, 0.75); }

.carta-tallas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.5rem 1rem 1rem; }
.carta-pedir {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 0.75rem;
  border-radius: 10px;
  background: var(--acc);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  text-align: center;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.carta-pedir--solo { margin: 0.5rem 1rem 1rem; }
.carta-pedir:hover { filter: brightness(1.1); }
.carta-pedir:active { transform: translateY(1px); }
.carta-card--sinfoto .carta-pedir { background: var(--carta-tinta); }

/* «Tap-to-antojo»: al tocar un chip de La Tira, su destino se resalta un
   momento. Estaba definido solo para las clases del menu viejo, asi que sin
   esto la firma de la marca salta al sitio correcto pero sin senalarlo. */
.carta-card.is-antojo,
.carta-seccion.is-antojo { animation: antojo 1.5s ease; }
@keyframes antojo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197, 58, 64, 0); }
  20% { box-shadow: 0 0 0 4px rgba(197, 58, 64, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .carta-chip,
  .carta-pedir { transition: none; }
  .carta-pedir:active { transform: none; }
  .carta-card.is-antojo,
  .carta-seccion.is-antojo { animation: none; }
}

@media (max-width: 640px) {
  .carta-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .carta-card-cuerpo { padding: 0.75rem 0.75rem 0.4rem; }
  .carta-card-cuerpo h4 { font-size: 0.95rem; }
  .carta-tallas { grid-template-columns: 1fr; padding: 0.4rem 0.75rem 0.75rem; }
  .carta-pedir--solo { margin: 0.4rem 0.75rem 0.75rem; }
  .carta-card--sinfoto h4 { font-size: 1.25rem; }
}

.brand-hero-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}
.tostadas-estado { margin: 0 0 0.75rem; }

/* Con movimiento reducido el video no se reproduce: queda el poster. Un video
   pausado a media reproduccion seria una animacion congelada, no una imagen. */
@media (prefers-reduced-motion: reduce) {
  .brand-hero-video { display: none; }
  .brand-hero-media {
    background-image: url("assets/photos/tostadas-hero.webp");
    background-size: cover;
    background-position: center;
    aspect-ratio: 933 / 1400;
  }
}
.domicilio-crunch { position: relative; background: var(--carta-campo); color: var(--carta-tinta); }
/* #ubicacion no tenía contexto de posicionamiento propio: lo necesita la
   capa de la cinta (A2, ronda de ajuste) para anclarse a esta sección y no
   a un ancestro más arriba en el árbol. */
#ubicacion { position: relative; }
.domicilio-crunch .eyebrow,
.domicilio-crunch h2,
.domicilio-crunch h3,
.domicilio-crunch p { color: var(--carta-tinta); }
.domicilio-pasos {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.domicilio-pasos li { margin: 0; }
.domicilio-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--carta-tinta);
  color: var(--carta-campo);
  font-weight: 800;
  margin-bottom: 0.6rem;
}
.domicilio-pasos h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.domicilio-pasos p { margin: 0; font-size: 0.95rem; }
.domicilio-envio { max-width: 52ch; margin: 0 0 1.5rem; font-size: 0.95rem; }
.domicilio-crunch .btn-primary { background: var(--carta-tinta); color: var(--carta-campo); }

.ubicacion-sello {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--carta-campo);
  border-radius: 12px;
  max-width: 46ch;
}
.comunidad-acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* El anillo de foco global es --brasa (#e8621d). Sobre el campo naranja de la
   marca (#e0a03c) da 1.5:1 y practicamente desaparece, por debajo del 3:1 que
   WCAG exige a un indicador de foco. En esas superficies pasa a tinta oscura,
   que da 8.35:1. Afecta al boton de pedir del bloque de domicilio y a las
   tarjetas sin foto, que son la mayoria de la carta. */
.carta-card--sinfoto :focus-visible,
.domicilio-crunch :focus-visible { outline-color: var(--carta-tinta); }

/* .btn-primary:hover y .domicilio-crunch .btn-primary empatan en especificidad
   y gana la segunda por orden, asi que el boton se quedaba sin senal al
   apuntarlo. El filtro no compite con el color, lo modula. */
.domicilio-crunch .btn-primary:hover { filter: brightness(1.12); }
/* ===== FIN TOSTADAS CARTA ===== */

/* ===== TOSTADAS — CIERRE TEMPORAL POR MUDANZA (A2, 2026-08-31) =====
   Cinta de "Próximamente" + CTA de pedido inertes + panel de aviso de
   reapertura. Todo detrás de marca.cierreTemporal.activo (config.js), leído
   por tostadas.js / pedido.js / index.js. Con activo:false ningún script
   toca este DOM y las tres páginas quedan exactamente como hoy (C7).

   El amarillo es TOKEN NUEVO, no --mostaza: --mostaza (#f0ad3d) ya es el
   fondo diagonal del hero (identidad de marca) y al lado de la cinta se lee
   como el mismo color, no como una cinta aplicada encima. --cinta es un
   amarillo mas saturado, de uso exclusivo para este estado. Contraste
   --carbon sobre --cinta calculado: 10.8:1 (ver el numero medido en vivo,
   con getComputedStyle, en el informe -- K1 pide ese, no este). */
body[data-brand="tostadas"] { --cinta: #f2c230; }

/* ---------- La cinta: bandas cruzadas con marquesina en bucle ----------
   Ronda de ajuste 2026-09-01 (Gabriel, sobre la primera entrega): "las
   cintas más grandes que pasen por encima de lo que hay en la página,
   encima de textos, imágenes, formularios". La v1 vivía en un carril propio
   DEBAJO del contenido (evitaba tocar nada, a propósito); esta versión es
   una capa absoluta que cubre la sección entera -- hero, #domicilio,
   #ubicacion, el hero de pedido.html -- y cruza el logo, el video, el
   formulario o la tarjeta de ubicación, lo que haya. pointer-events:none:
   cruza VISUALMENTE pero nunca bloquea un clic en lo que sigue vivo debajo
   (el formulario de reapertura, "Ver el menú"). */
.cierre-cintas-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.cinta {
  position: absolute;
  left: -6%;
  width: 112%;
  height: clamp(56px, 11vw, 150px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--cinta);
  box-shadow: 0 0 0 3px rgba(26, 21, 17, 0.55) inset;
}
.cierre-cintas-overlay .cinta--a { top: 30%; transform: rotate(-8deg); }
.cierre-cintas-overlay .cinta--b { top: 60%; transform: rotate(9deg); }
/* Bucle sin costura: el texto va DOBLE dentro del carril y se anima solo
   la mitad del ancho total (translateX(-50%)); al llegar, la segunda copia
   ya ocupa el lugar exacto de la primera. */
.cinta-track { display: flex; width: max-content; animation: cintaMarquee 24s linear infinite; }
.cinta-rep {
  display: inline-flex;
  white-space: nowrap;
  padding-right: 1.2em;
  font-family: var(--heavy);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(0.95rem, 2.6vw, 1.5rem);
  color: var(--carbon);
}
@keyframes cintaMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* K7: la marquesina se detiene con movimiento reducido; las bandas se
   quedan quietas pero visibles y legibles (no display:none). */
@media (prefers-reduced-motion: reduce) {
  .cinta-track { animation: none; }
}

/* A 375px una sola banda, más ancha: dos bandas de este tamaño cruzadas en
   una columna angosta se pisan entre sí y dejan de leerse como cinta.
   Declarado en el registro de decisiones (§3.3 del método permite
   simplificar el PATRÓN por ancho si se declara). */
@media (max-width: 480px) {
  .cierre-cintas-overlay .cinta--b { display: none; }
  .cierre-cintas-overlay .cinta--a { top: 42%; transform: rotate(-6deg); }
  /* #domicilio apila los pasos ARRIBA del formulario a este ancho -- medido
     en vivo, el panel #reapertura empieza al 56% de la sección. El 42%
     genérico cruzaba los pasos y se perdía el formulario por completo. */
  #tostadasCintaDomicilio .cinta--a { top: 72%; }
}

/* ---------- El bloque de cierre: título, mensaje, CTA de aviso ----------
   §4.2 del método: la cinta existe y se lee: el mensaje es lo que tiene que
   tener prominencia. Por eso el título va a escala de subtítulo grande,
   más grande que la propia cinta, y la cinta nunca lleva texto ejecutivo.
   El bloque vive DEBAJO de donde cruza la cinta (z-index 1 contra 6 de la
   cinta): el aviso real siempre se lee limpio, sin la marquesina encima. */
.cierre-bloque { position: relative; z-index: 1; margin-top: 2.2rem; }
/* Tarjeta opaca, no transparente: medido en vivo, el título en --crema caía
   a 4.41:1 cuando el bloque aterrizaba sobre el rojo del hero (::after) y a
   1.66:1 sobre el mostaza -- ninguno de los dos es AA, y la posición varía
   con el contenido. --carbon-2 (misma familia que .location-card/.ficha)
   da 13.84:1 sin importar qué diagonal quede detrás. */
.cierre-texto {
  max-width: 40rem;
  background: var(--carbon-2);
  border: 1px solid rgba(244, 236, 220, 0.14);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
}
.cierre-titulo {
  font-family: var(--heavy);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  color: var(--crema);
  margin: 0 0 0.6rem;
}
.cierre-mensaje { color: var(--crema); opacity: 0.92; font-size: 1.05rem; max-width: 38rem; margin: 0 0 1.3rem; }
.cierre-acciones { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* Version fina del texto (dentro de #domicilio / #ubicacion / pedido.html):
   mismo carbon/cinta, tamaño de ficha, no de hero. */
.cierre-bloque--ficha { margin: 1.4rem 0 0; }
.cierre-bloque--ficha .cierre-titulo { font-size: 1.15rem; margin-bottom: 0.35rem; }
.cierre-bloque--ficha .cierre-mensaje { font-size: 0.95rem; margin-bottom: 1rem; }

/* ---------- CTA inertes ----------
   El <a> pasa a <button disabled> (tostadas.js / pedido.js): sale del
   tabulador y de la activación por teclado solo con el atributo nativo, sin
   depender de pointer-events. Mismo espíritu que .pedido-enviar[aria-disabled]
   -- ya resuelto en este archivo --, generalizado a botón real. */
button.btn[disabled] {
  appearance: none;
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--carbon-3);
  color: var(--peltre);
  box-shadow: none;
}
button.header-cta[disabled] {
  appearance: none;
  border: 0;
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--carbon-3);
  color: var(--peltre);
}
.mobile-actionbar button[disabled] {
  appearance: none;
  border: 0;
  background: var(--carbon-3);
  color: var(--peltre);
  opacity: 0.75;
  cursor: not-allowed;
}
/* location_card: era un <a> de texto suelto dentro de .social-row, sin
   clase .btn. El inerte se lee tachado, no atenuado -- comunica "esto ya
   no aplica" en una lista donde el WhatsApp de contacto (activo) queda al
   lado, sin tachar. */
.social-row button[disabled] {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--peltre);
  text-decoration: line-through;
  opacity: 0.7;
  cursor: not-allowed;
}

/* ---------- Ronda de ajuste 2026-09-01: ni la carta ni el carrito ----------
   Gabriel: "que no funcione ni queden clickeables los botones para hacer
   pedidos ni carrito de compras". El bloqueo real (nada se agrega, nada se
   envía) vive en JS -- esto es la lectura visual: atenuados y con cursor de
   bloqueado, para que no inviten al toque aunque el clic ya no haga nada.
   .carta-pedir y [data-mi-cta] además llevan preventDefault() en fase de
   captura (tostadas.js); .pedido-add/.pedido-cant, guardas en pedido.js. */
body.cierre-pedido-mudo .carta-pedir,
body.cierre-pedido-mudo [data-mi-cta],
body.cierre-pedido-mudo .pedido-add,
body.cierre-pedido-mudo .pedido-cant {
  opacity: 0.4;
  cursor: not-allowed;
}
/* .pedido-add/.pedido-cant no tienen un padre que reaccione al clic, así
   que pointer-events:none es seguro ahí. .carta-pedir/[data-mi-cta] SÍ
   viven dentro de una tarjeta que abre una hoja de detalle al tocar
   cualquier otro punto -- quitarles el pointer-events los "trasladaría" a
   ese padre y el toque abriría la hoja en su lugar. Se quedan recibiendo el
   clic (para que no pase nada más) y lo bloquea el preventDefault() en fase
   de captura de tostadas.js. */
body.cierre-pedido-mudo .pedido-add,
body.cierre-pedido-mudo .pedido-cant {
  pointer-events: none;
}
/* La tarjeta entera de la carta sigue abriendo la hoja de detalle (no es un
   botón de pedido, es solo ver más grande lo que ya se ve en la tarjeta) --
   pero el cursor dice que no hay acción de compra detrás. */
body.cierre-pedido-mudo .carta-card { cursor: default; }

/* ---------- Panel de aviso de reapertura (dentro de #domicilio) ----------
   Reutiliza [data-b2b-scope] de main.js (mismo componente que Rocave y La
   Guarnición): sin tocar main.js, el formulario ya envía, valida y marca el
   lead por su clubScope -- ver el registro de decisiones. */
.reapertura-panel { margin-top: 1.6rem; max-width: 26rem; }
.reapertura-panel .eyebrow { color: var(--carta-tinta); opacity: 0.72; }
.reapertura-panel h3 { margin: 0 0 0.5rem; }
.reapertura-panel .reapertura-nota { font-size: 0.85rem; margin: 0 0 1rem; }

/* ---------- #ubicacion durante el cierre ---------- */
.ubicacion-wa-reapertura { margin-top: 0.5rem; }
/* .branch-hours-line declara su propio display:grid (styles.css:581), que
   gana sobre el [hidden]{display:none} del navegador -- medido en vivo: con
   hidden="true" puesto, el horario seguía pintándose. Mismo problema que ya
   resolvieron .open-chip[hidden] y .pedido-cerrado[hidden] en este archivo. */
.branch-hours-line[hidden] { display: none; }

/* ---------- Sello amarillo de la tarjeta 02 (portada, index.html) ----------
   Ahí no cabe una banda diagonal (tarjeta angosta en rejilla): mismo
   amarillo y misma tipografía que la cinta, como etiqueta suelta. Decisión
   declarada en el registro. */
.despacho-badge-cierre {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 0.5rem;
  padding: 0.32em 0.7em;
  border-radius: 5px;
  background: var(--cinta, #f2c230);
  color: var(--carbon);
  font-family: var(--heavy);
  font-weight: 900;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 480px) {
  /* K2 a 375px: dos bandas cruzadas sobre un hero angosto tapan más del
     25% del área y rompen la cota. Una sola banda, más ancha -- declarado
     en el registro de decisiones (§3.3 del método permite simplificar el
     PATRÓN por ancho si se declara; el mecanismo -- marquesina, contraste,
     aria-hidden -- sigue siendo el mismo a cualquier ancho). */
  .cierre-cintas:not(.cierre-cintas--fina) { height: clamp(64px, 20vw, 88px); }
  .cierre-cintas:not(.cierre-cintas--fina) .cinta--b { display: none; }
  .cierre-cintas:not(.cierre-cintas--fina) .cinta--a {
    height: clamp(36px, 9vw, 44px);
    top: 50%;
    margin-top: calc(clamp(36px, 9vw, 44px) / -2);
    transform: rotate(-4deg);
  }
}
/* ===== FIN TOSTADAS — CIERRE TEMPORAL ===== */

/* ===== TOSTADAS — PANTALLA ÚNICA "PRÓXIMAMENTE" (M1, 2026-09-13) =====
   Reemplaza TODO el contenido de tostadas-del-compas.html mientras la marca
   está en cambios: fondo, logo y "Próximamente", nada más (decisión D2 de
   Gabriel, cerrada). El bloque de arriba (CIERRE TEMPORAL, A2) deja de
   aplicarse a esta página -- se queda en el archivo porque sigue gobernando
   pedido.html a través de pedido.js, que no se tocó.

   Fondo en dos capas + velo, tal como pidió el cliente ("gradiente o imagen
   desenfocada" -> las dos, no una u otra):
     1. (capa de abajo) degradado diagonal en los colores YA establecidos de
        la marca (ver bloque "Tostadas del Compa's — identidad pop" arriba:
        --carbon + rojo #c53a40 + --mostaza) -- si la imagen no carga, la
        pantalla sigue funcionando solo con esto.
     2. (capa de en medio) tostadas-proximamente-bg.webp: la misma foto del
        poster del hero, reducida a 40px de ancho y desenfocada antes de
        guardarse (scripts/preparar_fondo_tostadas_2026-09.py) -- pesa 436
        bytes, muy por debajo del limite de 20 KB del umbral M1.
     3. (capa de arriba) velo oscuro semitransparente: el logo y el texto en
        --crema necesitan AA de verdad encima de una foto de comida con tonos
        claros, no solo del degradado. */
.proximamente-pantalla {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  background: var(--carbon); /* respaldo solido: se ve aunque CSS fondo falle */
}
.proximamente-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(20, 16, 13, 0.76), rgba(20, 16, 13, 0.76)),
    url("assets/photos/tostadas-proximamente-bg.webp"),
    linear-gradient(135deg, var(--carbon) 0%, var(--carbon) 38%, #c53a40 72%, var(--mostaza, #f0ad3d) 100%);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.proximamente-contenido {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.9rem;
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(2rem, 8vw, 3.5rem) 1.25rem 1rem;
}
.proximamente-logo { width: min(300px, 62%); height: auto; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45)); }
.proximamente-palabra {
  font-family: var(--heavy);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  color: var(--crema);
  margin: 0;
}
.proximamente-mensaje {
  color: var(--crema);
  opacity: 0.92;
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  max-width: 30rem;
  margin: 0;
}
.proximamente-pie {
  position: relative;
  z-index: 1;
  flex: none;
  text-align: center;
  padding: 0 1rem clamp(1rem, 4vw, 1.6rem);
}
.proximamente-pie a { color: var(--peltre); font-size: 0.78rem; text-decoration: underline; text-underline-offset: 2px; }
.proximamente-pie a:hover, .proximamente-pie a:focus-visible { color: var(--crema); }
/* ===== FIN TOSTADAS — PANTALLA ÚNICA ===== */

/* ===== LA GUARNICIÓN — El empaque en el anaquel (ficha de despensa) =====
   Firma de marca: el empaque real queda fijo sobre una repisa de madera
   mientras cuatro paneles narran la "ficha" del producto; cada uno enciende
   una anotacion (punto + etiqueta con guia) sobre la parte real del empaque.
   Calido, cotidiano, de alacena — lo opuesto a la cava nocturna de Rocave.
   Solo se AGREGAN reglas nuevas; nada existente se modifica. */

/* Intro calmado, previo al anaquel */
.gu-hero-intro {
  padding: clamp(2.6rem, 7vw, 4.5rem) 0 clamp(1.2rem, 4vw, 2rem);
  max-width: 640px;
}
.gu-hero-intro .lead {
  font-size: 1.12rem;
  color: var(--tinta-suave);
  max-width: 34rem;
}
.gu-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--maroon, #7a2320);
  opacity: 0.9;
  margin-top: 1.8rem;
}
/* La flecha nunca tuvo regla propia: .scroll-hint (la clase que trae el
   marcado) no existe en este archivo, y sin display/tamano un <svg> con solo
   viewBox resuelve su ancho al 100% del contenedor -> 335px en movil, 566px
   en escritorio (ver auditoria P5). El width/height del marcado es la red de
   seguridad si este CSS no carga; esto es lo que la hace verse bien: escala
   con el texto en vez de quedar en un tamano fijo. */
.gu-scroll-hint svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* Seccion anaquel: escena sticky + paneles de anotacion */
.gu-shelf { position: relative; padding-bottom: clamp(2rem, 5vw, 3rem); }
.gu-shelf-grid { display: grid; gap: 1.2rem; }
@media (min-width: 900px) {
  .gu-shelf-grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: start; }
}

.gu-stage {
  position: sticky;
  top: 74px;
  z-index: 1;
  display: flex;
  height: 56vh;
  min-height: 340px;
}
@media (min-width: 900px) {
  .gu-stage { height: calc(100vh - 120px); min-height: 500px; }
}
@media (max-width: 899px) {
  .gu-stage { order: -1; margin-bottom: 0.4rem; }
}

/* Escena: halo calido + empaque + repisa de madera.
   Se estira a la altura fija del stage (flex) para que el empaque SIEMPRE
   quepa dentro del area sticky y no invada los paneles. */
.gu-scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: radial-gradient(120% 78% at 50% 24%, rgba(217, 122, 31, 0.12), transparent 62%);
}

.gu-package-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Caja con las proporciones EXACTAS del empaque: al derivar el ancho de la
   altura via aspect-ratio, los puntos de anotacion (%) mapean siempre a la
   misma region real del empaque sin depender de medidas por JS. */
.gu-package-anchor {
  position: relative;
  height: 100%;
  aspect-ratio: 618 / 1000;
  max-width: 100%;
  margin-bottom: -3px;
}
.gu-package {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform: rotate(var(--tilt, 0deg));
  transform-origin: 50% 100%;
  transition: transform 0.18s linear;
  filter: drop-shadow(0 16px 24px rgba(43, 33, 25, 0.26));
}

/* Repisa de madera calida (evoca la despensa/anaquel) */
.gu-shelf-plank {
  position: relative;
  width: min(94%, 460px);
  height: clamp(15px, 3.2vw, 24px);
  border-radius: 3px;
  background: linear-gradient(180deg, #dab782 0%, #c59a5e 42%, #a9783f 43%, #8f5e30 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    0 14px 24px -12px rgba(43, 33, 25, 0.55);
}
.gu-shelf-plank::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  transform: translateX(-50%);
  width: 60%;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(43, 33, 25, 0.32), transparent 72%);
}

/* Anotaciones: punto sobre el empaque + etiqueta con linea guia */
.gu-callout { position: absolute; left: var(--cx); top: var(--cy); width: 0; height: 0; }
.gu-dot {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--maroon, #7a2320);
  box-shadow: 0 0 0 3px rgba(255, 253, 245, 0.92), 0 2px 5px rgba(43, 33, 25, 0.35);
  transition: transform 0.3s var(--ease-out, ease), background 0.3s ease;
}
.gu-callout.is-active .gu-dot {
  background: var(--acc);
  transform: translate(-50%, -50%) scale(1.22);
}
.gu-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--acc);
  opacity: 0;
  pointer-events: none;
}
.gu-callout.is-active .gu-dot::after { animation: guPulse 1.9s ease-out infinite; }
@keyframes guPulse {
  0% { opacity: 0.55; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.6); }
}

.gu-tag {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  max-width: 44vw;
  font-family: var(--heavy);
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--tinta);
  background: #fffdf5;
  border: 1.5px solid #e0d3b4;
  border-radius: 10px;
  padding: 0.38rem 0.6rem;
  box-shadow: 0 8px 18px -8px rgba(43, 33, 25, 0.45);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out, ease);
  pointer-events: none;
}
.gu-callout.is-active .gu-tag { opacity: 1; }
@media (min-width: 900px) { .gu-tag { max-width: 15rem; font-size: 0.8rem; } }

/* Etiqueta se coloca "hacia adentro" del empaque para no salirse del marco;
   la linea guia la conecta con el punto. */
.gu-callout[data-side="up"] .gu-tag { transform: translate(-50%, calc(-100% - 15px)); }
.gu-callout[data-side="in-right"] .gu-tag { transform: translate(15px, -50%); }
.gu-callout[data-side="in-left"] .gu-tag { transform: translate(calc(-100% - 15px), -50%); }

.gu-tag::before {
  content: "";
  position: absolute;
  background: var(--maroon, #7a2320);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out, ease);
}
.gu-callout.is-active .gu-tag::before { opacity: 0.7; }
.gu-callout[data-side="up"] .gu-tag::before { left: 50%; bottom: -15px; width: 1.5px; height: 15px; transform: translateX(-50%); }
.gu-callout[data-side="in-right"] .gu-tag::before { top: 50%; left: -15px; width: 15px; height: 1.5px; transform: translateY(-50%); }
.gu-callout[data-side="in-left"] .gu-tag::before { top: 50%; right: -15px; width: 15px; height: 1.5px; transform: translateY(-50%); }

/* Paneles de narracion (la "ficha") */
.gu-panels { display: flex; flex-direction: column; }
.gu-panel {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 0 2rem 1.15rem;
  border-top: 1px solid rgba(122, 35, 32, 0.16);
}
.gu-panel:first-child { border-top: 0; }
/* Barra de acento (decorativa) que crece en el panel activo */
.gu-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--acc);
  border-radius: 3px;
  transition: height 0.4s var(--ease-out, ease);
}
.gu-panel.is-active::before { height: 56%; }
.gu-panel-num {
  display: block;
  font-family: var(--heavy);
  color: var(--maroon, #7a2320);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  margin-bottom: 0.55rem;
}
.gu-panel h2 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); color: var(--tinta); margin-bottom: 0.55rem; }
.gu-panel p { color: var(--tinta-suave); font-size: 1.05rem; max-width: 32rem; margin: 0; }

@media (max-width: 899px) {
  .gu-panel { min-height: auto; padding: 2.1rem 0 2.1rem 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* El empaque conserva su centrado (layout) y solo se apaga la inclinacion
     decorativa; el resaltado por scroll sigue funcionando (cambia de contenido,
     no anima). Las transiciones ya las neutraliza la regla global. */
  .gu-package { transform: none; }
  .gu-dot::after { animation: none; }
}
/* ===== FIN LA GUARNICIÓN ===== */

/* ===== MEDUSE — página blanca y paleta real de marca =====
   Meduse es AZUL, no lavanda: los dos tonos de abajo salen medidos del propio
   archivo del logotipo (assets/brands/logo-meduse-color.webp), donde ocupan
   25 847 y 21 680 px. El lavanda que traía antes (a98cbd) era un color
   inventado que no existe en la marca.

   Regla de contraste que no se viola:
   · --azul       #31496e  9.10:1 sobre blanco → texto, títulos y fondo de
                           botón (con texto blanco encima).
   · --azul-claro #638dbe  3.45:1 sobre blanco → SOLO decorativo: bordes,
                           rellenos, líneas, iconos, texto grande (>=24px) y
                           fondos con tinta oscura encima. Nunca texto normal.
   · --azul-medio #3f6597  5.97:1 sobre blanco → derivado del acero (mismo
                           tono, luminosidad al 42%) para las etiquetas
                           pequeñas que el acero no puede sostener.

   La página va sobre blanco puro. En vez de duplicar el tema claro, se
   reutiliza el compartido (body[data-theme="light"]) redefiniendo sus tokens:
   el "papel" de Meduse es #ffffff y no el crema #f4ecdc de La Guarnición, y
   las tintas pasan de marrón cálido a un neutro azulado que acompaña al logo. */
body[data-brand="meduse"] {
  --azul: #31496e;
  --azul-medio: #3f6597;
  --azul-claro: #638dbe;
  --crema: #ffffff;      /* papel de la marca */
  --tinta: #1c2430;      /* texto principal — 14.5:1 sobre blanco */
  --tinta-suave: #4f6076; /* texto de apoyo — 6.43:1 */
  --peltre: #4f6076;     /* mismo apoyo para las reglas que aún no distinguen tema */
}
body[data-brand="meduse"] :focus-visible { outline-color: var(--azul); }

/* Botones y CTA de la marca: antes iban con el color escrito a mano en cada
   etiqueta del HTML (header, hero, precios, cierre). Ahora salen de la
   variable, así el color de marca se cambia en un solo sitio. */
body[data-brand="meduse"] .btn-primary,
body[data-brand="meduse"] .header-cta {
  background: var(--acc);
  color: var(--acc-ink);
}
body[data-brand="meduse"] .btn-primary:hover,
body[data-brand="meduse"] .header-cta:hover { background: #3d5a87; }

/* El tema claro compartido está afinado para el crema de La Guarnición: sobre
   blanco puro su tarjeta #fffdf5 se ve como una mancha amarillenta y sus
   bordes marrones desentonan con el azul. Se reencuadran en la familia de la
   marca sin tocar la regla compartida. */
body[data-brand="meduse"] .location-card {
  background: #f6f9fc;
  border-color: rgba(49, 73, 110, 0.18);
}
body[data-brand="meduse"] .btn-secondary { box-shadow: inset 0 0 0 2px rgba(49, 73, 110, 0.45); }
body[data-brand="meduse"] .btn-secondary:hover { box-shadow: inset 0 0 0 2px var(--azul); }

/* ---------- Hero tipográfico ---------- */
.meduse-hero {
  position: relative;
  overflow: clip;
  padding: clamp(2.6rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.4rem);
}
.meduse-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -26%;
  right: -14%;
  width: 66vw;
  height: 66vw;
  max-width: 640px;
  max-height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 141, 190,0.24), transparent 66%);
  pointer-events: none;
}
.meduse-hero > .container { position: relative; z-index: 1; }

.meduse-wordmark {
  font-family: var(--display);
  font-weight: 400;
  color: var(--azul);
  line-height: 0.86;
  margin: 0.3rem 0 1.1rem;
  font-size: clamp(3.4rem, 20vw, 9rem);
  letter-spacing: 0.01em;
}
.mw-letters { display: inline-flex; }
.mw-letters > span {
  display: inline-block;
  transform-origin: center bottom;
  /* Elongación vertical de reposo: la línea aérea que se estira hacia arriba. */
  transform: scaleY(1.14);
  animation: meduseRise 0.9s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes meduseRise {
  from { opacity: 0; transform: translateY(115%) scaleY(1.5); }
  to   { opacity: 1; transform: translateY(0) scaleY(1.14); }
}

.meduse-hero .lead { max-width: 38rem; color: var(--peltre); }

/* ---------- Foto real en el primer pantallazo ----------
   Meduse vende una experiencia fisica: la pagina abria con 5.8 pantallas de
   tipografia antes de la primera foto de una clase. La evidencia se adelanta
   al hero. En movil la foto entra entre el logotipo y el parrafo (titulo →
   imagen → texto); en pantallas anchas pasa a una segunda columna completa. */
.meduse-hero-foto {
  margin: 0 0 1.4rem;
  border-radius: var(--radius);
  overflow: hidden;
  /* Se recorta a apaisado en movil para no comerse el primer pantallazo: el
     original es vertical (1440x1798) y a ancho completo mediria ~420px. */
  aspect-ratio: 5 / 4;
  max-height: 30vh;
  box-shadow: 0 14px 34px rgba(49, 73, 110, 0.18);
}
.meduse-hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

@media (min-width: 860px) {
  /* Dos columnas: el texto conserva su orden de lectura y la foto ocupa una
     franja vertical completa a la derecha. */
  .meduse-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: clamp(1.8rem, 4vw, 3.2rem);
    align-items: start;
    grid-template-areas:
      "miga   foto"
      "rotulo foto"
      "titulo foto"
      "texto  foto"
      "sello  foto"
      "acciones foto";
    grid-template-rows: auto auto auto auto auto 1fr;
  }
  .meduse-hero-grid > .breadcrumb { grid-area: miga; justify-self: start; }
  .meduse-hero-grid > .eyebrow { grid-area: rotulo; }
  .meduse-hero-grid > .meduse-wordmark { grid-area: titulo; }
  .meduse-hero-grid > .lead { grid-area: texto; }
  .meduse-hero-grid > .meduse-women-badge { grid-area: sello; justify-self: start; }
  .meduse-hero-grid > .hero-actions { grid-area: acciones; align-self: start; }
  .meduse-hero-foto {
    grid-area: foto;
    margin: 0;
    aspect-ratio: 4 / 5;
    max-height: none;
    align-self: stretch;
  }
}

/* ---------- Los cinco valores: una sola composicion, sin scroll ----------
   Antes esto ocupaba 3.3 pantallas de movil con una animacion ligada al
   scroll: una palabra por pantalla. Se conservan las palabras y el color,
   pero resueltas en un bloque unico. El eje vertical (la barra / la tela) se
   queda como regla fija, que era lo que daba sentido de escenario. */
.meduse-valores {
  position: relative;
  padding: clamp(2.2rem, 6vw, 3.4rem) 0;
}
.valores-rotulo {
  font-family: var(--heavy);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--azul-medio);
  margin: 0 0 1rem;
}
.valores-lista {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.4rem;
  border-left: 1px solid rgba(99, 141, 190, 0.55);
}
.valores-lista li {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 9vw, 3.6rem);
  line-height: 1.04;
  color: var(--azul);
  /* El acero solo se permite en tipografia grande (>=24px), donde el minimo
     AA baja a 3:1 y sus 3.45:1 si cumplen. */
}
.valores-lista li:nth-child(even) { color: var(--azul-claro); }
@media (min-width: 780px) {
  /* Asimetria editorial alrededor del eje: se conserva el gesto de la version
     anterior, ahora sin depender del scroll. */
  .valores-lista li:nth-child(even) { margin-left: clamp(1.5rem, 6vw, 5rem); }
}

/* ===== FIN MEDUSE ===== */

/* ===== MEDUSE — refinado =====
   Segunda pasada con material real: tabla de horarios, planes de precio,
   logos sin fondo (37 variantes curadas) y el flyer oficial. Reutiliza las
   custom properties de arriba (--azul, --azul-medio, --azul-claro), ya
   definidas en body[data-brand="meduse"], para que el vocabulario de color
   no se duplique ni se desalinee entre ambas pasadas. */

/* ---------- Horarios: tabla real (8 franjas x 5 días) ---------- */
.horario-scroll-hint {
  display: none;
  font-size: 0.78rem;
  color: var(--azul-medio);
  margin: -0.6rem 0 0.8rem;
}
.horario-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(49, 73, 110, 0.22);
  border-radius: var(--radius);
}
.horario-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 0.88rem;
}
.horario-table th,
.horario-table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(49, 73, 110, 0.12);
}
.horario-table tr:last-child th,
.horario-table tr:last-child td { border-bottom: 0; }
/* Sobre blanco la tabla invierte: encabezado en azul marino con texto blanco
   (9.10:1) y celdas sobre papel. La columna de hora se distingue con un
   relleno de acero muy diluido, no con un bloque oscuro. */
.horario-table thead th {
  font-family: var(--heavy);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--azul);
}
.horario-table tbody th[scope="row"] {
  font-family: var(--heavy);
  font-weight: 600;
  color: var(--tinta);
  background: #eef3f9;
}
/* Columna de hora fija durante el scroll horizontal en móvil. */
.horario-table thead th:first-child,
.horario-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  border-right: 1px solid rgba(49, 73, 110, 0.18);
}
.horario-table thead th:first-child { z-index: 2; }
.horario-table tbody th[scope="row"] { z-index: 1; }
/* Las celdas vacías son un guion decorativo, no información: pueden bajar de
   contraste sin perder nada (el hueco ya se lee por ausencia de clase). */
.horario-table td.is-empty { color: #8a97a8; }

/* Cada clase es un enlace a WhatsApp (lo arma main.js al cargar). El enlace
   ocupa toda la celda —de ahí el margen negativo que cancela el relleno del
   td— para dar un area de toque completa de 44px, no solo el ancho del texto. */
.horario-cta {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: -0.65rem -0.85rem;
  padding: 0.65rem 0.85rem;
  color: var(--azul);
  text-decoration: underline;
  text-decoration-color: rgba(99, 141, 190, 0.55);
  text-underline-offset: 3px;
}
.horario-cta:hover,
.horario-cta:focus-visible {
  background: rgba(99, 141, 190, 0.18);
  text-decoration-color: currentColor;
}
.horario-cta-aviso {
  font-size: 0.85rem;
  color: var(--tinta-suave);
  margin: -0.6rem 0 0.9rem;
}

/* ---------- Paso 2: de la clase al plan ----------
   Tocar una clase no manda directo a WhatsApp: abre este dialogo para elegir
   plan. El mensaje final sale con la clase Y el plan dentro, que es la
   diferencia entre "quiero informacion" y alguien que ya sabe que va a pagar. */
.clase-dialog {
  width: min(30rem, calc(100% - 2rem));
  padding: clamp(1.4rem, 4vw, 2rem);
  border: 0;
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--tinta);
  box-shadow: 0 24px 60px rgba(49, 73, 110, 0.28);
}
.clase-dialog::backdrop { background: rgba(28, 36, 48, 0.55); }
.clase-dialog h2 { color: var(--azul); margin-bottom: 0.2rem; }
.clase-dialog-when {
  font-family: var(--heavy);
  font-size: 0.9rem;
  color: var(--tinta-suave);
  margin: 0 0 1.2rem;
}
.clase-dialog-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
}
.clase-dialog-close:hover { background: rgba(49, 73, 110, 0.08); }
.clase-dialog-close svg { width: 20px; height: 20px; }

.clase-planes { border: 0; padding: 0; margin: 0 0 1.2rem; }
.clase-planes legend {
  font-family: var(--heavy);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azul-medio);
  padding: 0;
  margin-bottom: 0.6rem;
}
.clase-plan {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.5rem 0.85rem;
  margin-bottom: 0.45rem;
  border: 1px solid rgba(99, 141, 190, 0.45);
  border-radius: var(--radius);
  cursor: pointer;
}
.clase-plan:has(input:checked) {
  border-color: var(--azul);
  background: rgba(99, 141, 190, 0.12);
}
.clase-plan input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex: none;
  accent-color: var(--azul);
}
.clase-plan-body { display: grid; gap: 0.1rem; flex: 1; }
.clase-plan-label { font-family: var(--heavy); font-size: 0.92rem; }
.clase-plan-detalle { font-size: 0.8rem; color: var(--tinta-suave); }
.clase-plan-precio {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.clase-dialog-nota { font-size: 0.82rem; margin: 0.7rem 0 0; }
.horario-tag {
  display: block;
  margin-top: 2px;
  font-family: var(--heavy);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--azul-medio);
}
.horario-table tr.is-kids-slot td,
.horario-table tr.is-kids-slot th[scope="row"] { background: rgba(99, 141, 190, 0.16); }
@media (max-width: 700px) {
  .horario-scroll-hint { display: block; }
}

.horario-notas {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.horario-notas li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--peltre);
}
.horario-notas li::before { content: "—"; position: absolute; left: 0; color: var(--azul); }

/* ---------- Precios: 4 planes + ilimitado destacado ---------- */
.price-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1.5rem 1.1rem;
  border: 1px solid rgba(99, 141, 190, 0.45);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(99, 141, 190, 0.12), #ffffff 65%);
}
.price-freq {
  font-family: var(--heavy);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--azul-medio);
}
.price-amount {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 2.3rem);
  color: var(--tinta);
}
.price-detail { font-size: 0.82rem; color: var(--peltre); }
/* Plan ilimitado: se invierte respecto al resto. Con la página en blanco, la
   tarjeta que destaca es la de azul marino sólido; el logotipo va en su
   variante blanca porque ahí sí tiene fondo oscuro. Todos los textos de esta
   tarjeta pasan a blanco (9.10:1 sobre el marino). */
.price-card.is-unlimited {
  background: var(--azul);
  border-color: var(--azul);
  box-shadow: 0 14px 32px rgba(49, 73, 110, 0.28);
}
.price-card.is-unlimited .price-freq,
.price-card.is-unlimited .price-detail,
.price-card.is-unlimited .price-amount { color: #ffffff; }
.price-card-logo { width: 56px; height: 56px; object-fit: contain; margin-bottom: 0.2rem; }

.price-extra { margin-top: 1.4rem; }
.price-extra p { margin: 0 0 0.4rem; color: var(--peltre); }
.price-extra strong { color: var(--tinta); font-family: var(--heavy); }
.price-note { font-size: 0.9rem; }
.servicios-row { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0.8rem 0 0; padding: 0; }
.servicios-row .chip { margin-left: 0; color: var(--azul-medio); }

/* ---------- CTA de cierre: flyer real + logo a color ---------- */
.meduse-cta { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.cta-grid { display: grid; gap: 1.8rem; align-items: center; }
@media (min-width: 860px) {
  .cta-grid { grid-template-columns: 0.85fr 1.15fr; gap: 2.6rem; }
}
.cta-flyer {
  max-width: 300px;
  margin: 0 auto;
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(49, 73, 110, 0.22);
}
@media (min-width: 860px) { .cta-flyer { max-width: 100%; } }
.cta-logo { width: 68px; height: 68px; margin-bottom: 1rem; }
.cta-copy p { color: var(--peltre); max-width: 34rem; }

@media (prefers-reduced-motion: reduce) {
  /* La columna de hora usa position:sticky para LAYOUT (fijarse durante el
     scroll horizontal), no para decorar con movimiento: no se apaga aquí,
     solo se documenta para que quede claro que es intencional (misma
     lección que el resto del sitio: transform/position de layout no se
     desactiva con reduced-motion, solo lo puramente decorativo). */
}

/* ---------- Ajustes Dirección 2026-07-15: bio real + fotos + contacto ---------- */
.meduse-women-badge {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.35rem 0.8rem;
  font-family: var(--heavy);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Insignia informativa, no acción: va en acero con tinta oscura encima
     (5.48:1) para no competir con los botones, que son los únicos marinos. */
  color: #14100c;
  background: var(--azul-claro);
  border-radius: 999px;
}
/* El mosaico de rejilla (grid de 2/4 columnas con figure:first-child a
   ancho/alto doble) que vivía aquí quedó huérfano el 2026-09-08: R3
   reescribió sitio/meduse.html a la mampostería de dos <div
   class="mdr-gallery-col">, y ninguna propiedad de display/grid de este
   bloque aplica ya. Lo que SÍ seguía aplicando por cascada —figure{
   aspect-ratio:4/5}, figure:first-child{aspect-ratio:16/10} e
   img{width/height:100%}— es del bloque "=== R3 ... Meduse ===" de más
   abajo, con el mismo defecto que motiva B6 §2: `figure:first-child` es
   posicional, no semántico, y coincidía con el primer <figure> de CADA
   columna (el propio de mdr-gallery-col:first-child Y el de la segunda
   columna), aplastando meduse-pole-fitness-02.webp a 16:10 sin que nadie
   lo pidiera. Retirado entero en B6 (2026-09-09); su reemplazo, ya
   correctamente escopado a la columna izquierda, vive en el bloque R3. */

/* ===== BOTANAS — menú y reserva independientes ===== */

/* --- Calidez y puntos de entrada en la página insignia --- */
/* Brillo cálido, estático (sin animación), detrás del héroe de Del Abuelo. */
.hero-botanas { position: relative; }
.hero-botanas::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(115% 90% at 12% -5%, rgba(242, 169, 169, 0.12), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.hero-botanas > .container { position: relative; z-index: 1; }

/* CTA a la derecha del encabezado de una sección (row-heading) */
.section-cta { white-space: nowrap; }

/* --- menu.html: el menú como pantalla propia --- */
.menu-hero { padding: clamp(1.6rem, 5vw, 2.6rem) 0 0.4rem; }
.menu-hero .hero-logo { width: min(240px, 58%); margin-bottom: 0.9rem; }
.menu-hero h1 { margin-bottom: 0.4rem; }
.menu-hero .lead { color: var(--peltre); max-width: 42rem; }
.menu-hero .hero-actions { margin-top: 1.3rem; }

/* Barra de categorías sticky, con scroll horizontal en móvil */
.menu-catbar {
  position: sticky;
  top: 61px; /* justo bajo el header sticky */
  z-index: 30;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.7rem 0;
  margin: 0.6rem 0 1.6rem;
  background: color-mix(in srgb, var(--carbon) 92%, transparent);
  backdrop-filter: blur(10px);
  border-block: 1px solid rgba(244, 236, 220, 0.1);
  scroll-snap-type: x proximity;
}
.menu-catbar::-webkit-scrollbar { display: none; }
.menu-catbar a {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(244, 236, 220, 0.16);
  font-family: var(--heavy);
  font-size: 0.85rem;
  color: var(--peltre);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-quick) ease, color var(--dur-quick) ease, border-color var(--dur-quick) ease;
}
.menu-catbar a:hover { color: var(--crema); border-color: var(--acc); }
.menu-catbar a.is-current {
  background: var(--acc);
  color: var(--acc-ink);
  border-color: var(--acc);
}

/* Lista de secciones en una columna legible; los anclas compensan las
   barras sticky (header + categorías) con scroll-margin. */
.menu-page .menu-native {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 760px;
  margin: 0 auto 2rem;
}
/* Un track "1fr" sin minimo explicito hereda min-width:auto (= min-content
   del contenido); con precios largos en .menu-item-price (white-space:nowrap)
   eso desborda el ancho del viewport. min-width:0 fuerza al item de grid a
   respetar el ancho del track en vez de su contenido. */
.menu-page .menu-section-block { scroll-margin-top: 128px; min-width: 0; }

/* --- Visor de la carta impresa (B3, 2026-09-09): sustituye al <details>
   "Ver el menu en imagen" de arriba, que solo mostraba dos JPG de la carta
   de agosto ya retirada. Vive encima del menu nativo, no escondido. --- */
.carta-visor { max-width: 32rem; margin: 0 auto 2.6rem; scroll-margin-top: 76px; }
.carta-visor-head { text-align: center; margin-bottom: 1rem; }
.carta-visor-head h2 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: 0 0 0.3rem; }
.carta-visor-head p { color: var(--peltre); font-size: 0.88rem; margin: 0; }
/* Las flechas SUPERPUESTAS a la imagen (no a los lados, consumiendo ancho de
   flex) -- medido en vivo (2026-09-10): a los lados, dos circulos de 40px +
   gap dejaban la hoja en 242px a 375px de viewport y el precio mas chico
   ("$15", hoja 6) renderizaba a ~5.9px de alto. Superpuestas, la hoja usa
   TODO el ancho disponible. Ver tambien el full-bleed de abajo (P4). */
.carta-track-wrap { position: relative; }
.carta-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius);
  background: var(--carbon-3);
}
.carta-hoja { flex: 0 0 100%; scroll-snap-align: start; display: flex; }
.carta-hoja picture, .carta-hoja img { width: 100%; height: auto; display: block; }
.carta-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(244, 236, 220, 0.16);
  background: rgba(20, 16, 12, 0.72);
  backdrop-filter: blur(2px);
  color: var(--crema);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.carta-flecha--prev { left: 0.5rem; }
.carta-flecha--next { right: 0.5rem; }
.carta-flecha svg { width: 20px; height: 20px; }
.carta-flecha:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }
.carta-visor-pie { display: flex; align-items: center; justify-content: space-between; margin-top: 0.7rem; }
/* Full-bleed SOLO de la imagen en movil: rompe el inset de .container (que
   fija su propio ancho, no padding, asi que un margin-inline negativo comun
   no alcanza -- se usa el truco 50%/50vw). El encabezado, el pie y el QR se
   quedan legibles con su propio margen; el motivo de romper el contenedor es
   unicamente maximizar el ancho de la HOJA, que es lo que pide la puerta P4. */
@media (max-width: 480px) {
  .carta-track-wrap { margin-inline: calc(50% - 50vw); }
  .carta-track { border-radius: 0; }
}
.carta-contador { font-family: var(--heavy); font-size: 0.8rem; color: var(--peltre); font-variant-numeric: tabular-nums; }
.carta-zoom-btn {
  background: none;
  border: 1px solid rgba(244, 236, 220, 0.16);
  color: var(--crema);
  font-family: var(--heavy);
  font-size: 0.76rem;
  min-height: 38px;
  padding: 0 0.9rem;
  border-radius: 999px;
  cursor: pointer;
}
.carta-qr {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--carbon-2);
}
.carta-qr img { flex: none; width: 88px; height: 88px; border-radius: 8px; background: #fff; padding: 6px; }
.carta-qr-url { font-family: var(--heavy); font-size: 0.85rem; margin: 0 0 0.2rem; }
.carta-qr-nota { font-size: 0.76rem; color: var(--peltre); margin: 0 0 0.5rem; line-height: 1.5; }
.carta-qr-descarga { font-size: 0.78rem; color: var(--brasa); text-decoration: underline; }
body[data-theme="light"] .carta-qr-descarga { color: var(--brasa-texto); }
@media (min-width: 560px) { .carta-qr img { width: 110px; height: 110px; } }
@media (prefers-reduced-motion: reduce) { .carta-track { scroll-behavior: auto; } }

/* --- reservar.html: la reserva como pantalla propia y compartible --- */
.reserva-hero { padding: clamp(1.6rem, 5vw, 2.6rem) 0 0.4rem; }
.reserva-hero h1 { margin-bottom: 0.4rem; }
.reserva-hero .lead { color: var(--peltre); max-width: 42rem; }

.reserva-grid { display: grid; gap: 1.6rem; padding-bottom: clamp(2.5rem, 7vw, 4.5rem); }
@media (min-width: 900px) {
  .reserva-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
}

/* ---------- Paso 1: elegir sucursal ----------
   La pantalla ya no llega con una sucursal puesta. La eleccion se hace aqui,
   con foto y estado a la vista, para decidirla de un vistazo en vez de leer
   tres renglones de texto. */
.reserva-paso {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
  margin-bottom: 0.3rem;
}
.reserva-paso span {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 50%;
  background: var(--acc);
  color: var(--acc-ink);
  font-family: var(--heavy);
  font-size: 0.9rem;
}
.reserva-paso-nota { color: var(--peltre); font-size: 0.9rem; margin-bottom: 1rem; }

.branch-chooser { display: grid; gap: 0.7rem; margin-top: 0.4rem; }
.branch-chooser-chip {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  background: var(--carbon-2);
  border: 1px solid rgba(244, 236, 220, 0.14);
  border-radius: var(--radius);
  color: var(--crema);
  padding: 0;
  font-family: var(--body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.branch-chooser-chip:hover { border-color: var(--acc); transform: translateY(-2px); }
.bc-foto { flex: none; width: 34%; max-width: 150px; }
.bc-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-cuerpo { display: block; padding: 0.9rem 1rem; min-width: 0; flex: 1; }
.branch-chooser-chip .bc-amb {
  display: block;
  font-family: var(--heavy);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc);
}
.branch-chooser-chip .bc-name {
  display: block;
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.15;
  margin: 0.15rem 0;
}
.branch-chooser-chip .bc-meta { display: block; font-size: 0.82rem; color: var(--peltre); margin-bottom: 0.4rem; }

/* La marca de elegida: sin esto, tocar una tarjeta no se notaba. */
.bc-marca {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--acc-ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.bc-marca svg { width: 17px; height: 17px; }
.branch-chooser-chip.is-chosen {
  border-color: var(--acc);
  box-shadow: inset 0 0 0 2px var(--acc);
}
.branch-chooser-chip.is-chosen .bc-marca { opacity: 1; transform: scale(1); }
/* Las no elegidas se apagan para que la elegida cante sola. */
.branch-chooser:has(.is-chosen) .branch-chooser-chip:not(.is-chosen) { opacity: 0.55; }
.branch-chooser:has(.is-chosen) .branch-chooser-chip:not(.is-chosen):hover { opacity: 1; }

/* ---------- El panel, cerrado hasta que haya sucursal ---------- */
.reserva-bloqueo { text-align: center; padding: 1.4rem 0.5rem; }
.reserva-bloqueo-icono {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 0.8rem;
  border-radius: 50%;
  background: rgba(197, 58, 64, 0.1);
  color: var(--brasa-texto);
}
.reserva-bloqueo-icono svg { width: 26px; height: 26px; }
.reserva-bloqueo h2 { font-size: 1.4rem; margin-bottom: 0.3rem; }
.reserva-bloqueo p { max-width: 24rem; margin-inline: auto; }

/* Confirmacion de la eleccion, arriba del formulario: el usuario tiene que
   poder verificar DONDE esta reservando sin volver a subir. */
.reserva-elegida {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  background: rgba(62, 125, 79, 0.12);
  border: 1px solid rgba(39, 98, 55, 0.35);
}
.reserva-elegida-check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--exito-panel);
  color: #fff;
}
.reserva-elegida-check svg { width: 16px; height: 16px; }
.reserva-elegida-texto { display: grid; gap: 0.05rem; flex: 1; min-width: 0; }
.reserva-elegida-texto em {
  font-style: normal;
  font-family: var(--heavy);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--exito-panel);
}
.reserva-elegida-texto strong { font-family: var(--display); font-weight: 400; font-size: 1.25rem; color: var(--tinta); }
.reserva-cambiar {
  flex: none;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(43, 33, 25, 0.3);
  color: var(--tinta);
  font-family: var(--heavy);
  font-size: 0.8rem;
}
.reserva-cambiar:hover { border-color: var(--tinta); }

.reserva-share { font-size: 0.85rem; color: var(--peltre); margin-top: 1rem; }
.reserva-share code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  background: var(--carbon-3);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ===== FIN BOTANAS ===== */

/* ===== ÍNDICE — navegación de pantalla completa (Fase 2) =====
   Overlay unico y consistente en las 8 paginas con header (no en 404.html,
   que se mantiene minima a proposito). Un control siempre visible revela
   las 5 marcas como bandas verticales a color -- la "columna vertebral"
   cromatica del grupo se vuelve navegacion funcional, no decoracion.
   Tintas de banda calculadas por contraste real (WCAG) contra cada color
   de marca, no reutilizadas ciegamente de --acc-ink (ese token se penso
   para acentos chicos, no para un fondo solido a pantalla completa). */

.indice-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(244, 236, 220, 0.06);
  border: 1px solid rgba(244, 236, 220, 0.24);
  color: var(--crema);
  font-family: var(--heavy);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.15s ease;
}
.indice-trigger:hover { border-color: rgba(244, 236, 220, 0.5); }
.indice-trigger[aria-expanded="true"] { border-color: var(--acc); }
body[data-theme="light"] .indice-trigger {
  background: rgba(43, 33, 25, 0.05);
  border-color: rgba(43, 33, 25, 0.2);
  color: var(--tinta);
}
body[data-theme="light"] .indice-trigger:hover { border-color: rgba(43, 33, 25, 0.45); }

.indice-trigger-swatch { display: flex; gap: 3px; flex: none; }
.indice-trigger-swatch i { display: block; width: 6px; height: 16px; border-radius: 2px; background: var(--c); }

@media (max-width: 420px) {
  /* Ocultar el texto SOLO visualmente: con display:none el boton se quedaba
     sin nombre accesible para lectores de pantalla. */
  .indice-trigger-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .indice-trigger { padding: 8px 10px; }
}

.indice-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: var(--carbon);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.32s ease, transform 0.32s ease;
  pointer-events: none;
}
.indice-overlay[hidden] { display: none; }
.indice-overlay.is-open { opacity: 1; transform: none; pointer-events: auto; }

.indice-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
}
.indice-home {
  font-family: var(--heavy);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--crema);
  text-decoration: none;
}
.indice-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244, 236, 220, 0.32);
  background: transparent;
  color: var(--crema);
  cursor: pointer;
}
.indice-close:hover { background: rgba(244, 236, 220, 0.1); }
.indice-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.indice-bands { flex: 1; display: flex; min-height: 0; }
.indice-band {
  --band-ink: #14100c;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.5rem 0.6rem;
  background: color-mix(in srgb, var(--band) 16%, var(--carbon));
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  text-decoration: none;
  color: var(--crema);
  overflow: hidden;
  transition: flex 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s ease;
}
.indice-band:first-child { border-left: none; }
.indice-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--band);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
}
.indice-band:hover, .indice-band:focus-visible {
  flex: 3.4;
  color: var(--band-ink);
}
.indice-band:hover::before, .indice-band:focus-visible::before { opacity: 1; }
.indice-band > * { position: relative; z-index: 1; }

.indice-band-num { font-family: var(--heavy); font-size: 0.72rem; letter-spacing: 0.14em; opacity: 0.7; }
.indice-band-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.indice-band:hover .indice-band-name,
.indice-band:focus-visible .indice-band-name { writing-mode: horizontal-tb; transform: none; }
.indice-band-tag {
  font-family: var(--body);
  font-size: 0.84rem;
  text-align: center;
  max-width: 16rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s;
}
.indice-band:hover .indice-band-tag,
.indice-band:focus-visible .indice-band-tag { opacity: 0.9; transform: none; }
.indice-band-here {
  display: none;
  font-family: var(--heavy);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.indice-band.is-current .indice-band-here { display: block; }
.indice-band.is-current { box-shadow: inset 0 0 0 2px var(--band); }

.indice-shortcuts {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem) 1.4rem;
}
.indice-shortcuts a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--heavy);
  font-size: 0.82rem;
  color: var(--crema);
  text-decoration: none;
  border: 1px solid rgba(244, 236, 220, 0.32);
  border-radius: 999px;
  padding: 10px 18px;
}
.indice-shortcuts a:hover { border-color: var(--crema); }

@media (max-width: 780px) {
  .indice-bands { flex-direction: column; overflow-y: auto; }
  .indice-band {
    flex: 1 1 auto;
    min-height: 15.5vh;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0 1.4rem;
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.25);
  }
  .indice-band:first-child { border-top: none; }
  .indice-band-name { writing-mode: horizontal-tb; transform: none; text-align: left; font-size: clamp(1.3rem, 6vw, 1.7rem); }
  .indice-band-tag { opacity: 0.78; transform: none; text-align: left; max-width: none; }
  /* Sin hover real en tactil: el toque da una respuesta breve (:active) y
     navega directo -- evita un patron de doble-tap confuso. */
  .indice-band:active { filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .indice-overlay { transition: opacity 0.15s ease; transform: none; }
  .indice-band { transition: color 0.15s ease; }
  .indice-band::before { transition: opacity 0.15s ease; }
  .indice-band-tag { transition: none; }
}

/* ===== BOTANAS — refinado =====
   Ronda 2026-07-13: mata el "espacio muerto" en del-abuelo.html con
   fotos reales curadas (mosaico en el hero + tira "Antojo real") y pule
   jerarquia/ritmo en menu.html y reservar.html. No toca reglas de otras
   marcas ni las de BOTANAS anteriores (arriba). */

/* --- Mosaico de fotos dentro del hero: balancea la altura de hero-copy
   contra el panel de reserva (antes quedaba mucho mas corto que el panel,
   dejando un bloque de espacio vacio a su derecha en desktop). Se usan solo
   2 fotos en una fila (no el patron de 3 con la primera a doble altura),
   para no pasarse de largo y voltear el desbalance hacia el otro lado. */
.hero-mosaic { margin-top: 1.6rem; }
.hero-mosaic figure:nth-child(1) { grid-row: auto; }
.hero-mosaic figure:nth-child(1) img { aspect-ratio: 4 / 5; }
.hero-mosaic figcaption { color: var(--peltre); }

/* --- Tira "Antojo real": reusa editorial-strip (index.html) tal cual, sin
   overrides — misma cuadricula de 3 columnas, otras 3 fotos reales. */
.botanas-antojo { border-top: 1px solid rgba(244, 236, 220, 0.1); }

/* ===== BOTANAS — ajustes Direccion 2026-07-15 ===== */
/* Antojo real: fotos mas grandes y con menos margen lateral en desktop
   (antes sobraba mucho aire a los bordes). Captions quitados en el HTML. */
.botanas-antojo > .container { width: min(1340px, calc(100% - 2.5rem)); }
.botanas-antojo .editorial-strip { gap: 0.9rem; }
.botanas-antojo .editorial-strip img { aspect-ratio: 4 / 5; }

/* Menu de la pagina principal en version compacta: chips por categoria que
   llevan al menu completo, en vez de reproducir todo el menu aqui. */
.menu-cat-chip {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.2rem;
  background: var(--carbon-2);
  border: 1px solid rgba(244, 236, 220, 0.12);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.menu-cat-chip:hover,
.menu-cat-chip:focus-visible {
  border-color: var(--acc);
  transform: translateY(-2px);
  background: rgba(244, 236, 220, 0.05);
}
.menu-cat-title { font-family: var(--heavy); font-weight: 900; color: var(--crema); font-size: 1.02rem; }
.menu-cat-count { font-size: 0.8rem; color: var(--peltre); }
@media (prefers-reduced-motion: reduce) {
  .menu-cat-chip:hover,
  .menu-cat-chip:focus-visible { transform: none; }
}
/* ===== FIN BOTANAS — ajustes 2026-07-15 ===== */

/* --- menu.html: foto ancla junto al encabezado del menu (antes era puro
   texto sobre fondo vacio en desktop). En movil se apila arriba del texto. */
.menu-hero-grid { display: grid; gap: 1.6rem; }
@media (min-width: 900px) {
  .menu-hero-grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
  .menu-hero-grid > div:first-child { order: 1; }
  .menu-hero-media { order: 2; }
}
.menu-hero-media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--carbon-2);
}
.menu-hero-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

/* Acento superior por categoria: rompe la "pared de texto" del menu largo
   con un marcador de inicio consistente (mismo patron que .discipline de
   Meduse), reforzando jerarquia entre categorias. */
.menu-page .menu-section-block { border-top: 3px solid var(--acc); }

/* --- reservar.html: foto de apoyo bajo el selector de sucursal, para que
   la columna izquierda no quede mucho mas corta que el panel del formulario. */
.reserva-media { margin: 1.4rem 0 0; border-radius: var(--radius); overflow: hidden; background: var(--carbon-2); }
.reserva-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.reserva-media figcaption { padding: 0.6rem 0.2rem 0; font-size: 0.85rem; color: var(--peltre); }

/* Nota: los figure nuevos con data-reveal heredan el respeto a
   prefers-reduced-motion de la regla global existente en este archivo
   (html.js [data-reveal] queda opacity:1/transform:none sin transicion). */

/* ===== FIN BOTANAS — refinado ===== */
/* ===== FIN ÍNDICE ===== */

/* ===== GRUPO CYB — INDEX (refinado): retirado 2026-08-25, frente P1.
   Su función (numeral de fondo, índice rápido lateral, franjas de
   espectro en pantallas anchas) queda cubierta por el bloque P1 nuevo
   (numeral) o se descartó a propósito (índice rápido — Despacho lo
   reemplaza; franjas laterales — ya no hacían falta con el nuevo
   contenido). .ficha-tag y .today-band* se fueron con el mismo bloque:
   ninguna otra página los usaba (verificado con grep antes de borrar).
   Ver docs/superpowers/specs/2026-08-25-portada-grupo-pro-cyb-design.md */
/* ===== GUARNICIÓN — refinado =====
   Solo agrega reglas nuevas (ninguna linea existente se edita, ni siquiera
   la del bloque "El empaque en el anaquel" mas arriba). Objetivo: subir
   densidad de composicion sin contenido nuevo -- mas jerarquia tipografica,
   ritmo vertical entre secciones, y mas protagonismo real para el logotipo
   (version mono, con transparencia real) y el empaque (mismo archivo que ya
   usa el anaquel), tal como pidio Direccion. Nada de fotos/logos/copy nuevos:
   todo lo que se ve aqui ya existia en assets/ o en el propio HTML de esta
   pagina antes de este cambio. */

/* Hero: de columna angosta (640px) a dos columnas en escritorio, con el
   logotipo (version transparente, sin caja de fondo) como pieza grande al
   lado del mensaje. En movil se mantiene apilado, con el logotipo como
   cierre visual justo antes de entrar al anaquel. */
@media (min-width: 900px) {
  .gu-hero-intro { max-width: none; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
  .gu-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; column-gap: 2.6rem; align-items: center; }
}
.gu-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}
@media (min-width: 900px) { .gu-hero-visual { margin-top: 0; } }
.gu-hero-visual::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(58% 62% at 50% 50%, rgba(217, 122, 31, 0.22), transparent 72%);
}
.gu-hero-intro .brand-logo.gu-hero-logo {
  position: relative;
  z-index: 1;
  width: min(230px, 72%);
  margin: 0 auto;
  filter: drop-shadow(0 16px 26px rgba(43, 33, 25, 0.2));
}
@media (min-width: 900px) {
  .gu-hero-intro .brand-logo.gu-hero-logo { width: min(420px, 100%); margin: 0; }
}

/* Fila de datos rapidos: reutiliza, palabra por palabra, las 4 etiquetas del
   anaquel (gu-tag) como adelanto -- mas jerarquia y densidad en el hero sin
   inventar copy nueva. El punto reusa el color --maroon del anaquel para
   que el ojo conecte ambos momentos de la pagina. */
.gu-fact-row {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.3rem;
  max-width: 34rem;
}
.gu-fact-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--heavy);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--tinta-suave);
}
.gu-fact-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--maroon, #7a2320);
  flex: 0 0 auto;
}

/* Acento bajo cada "eyebrow" de esta pagina: refuerza el inicio de cada
   seccion (jerarquia tipografica + ritmo), sin tocar la regla compartida
   .eyebrow (se aplica solo dentro de esta marca via body[data-brand]).
   De paso, fix puntual documentado: .eyebrow usa --acc (#d97a1f) sobre el
   fondo crema del tema claro, que mide ~2.65:1 (bajo el AA de 4.5:1 para
   texto normal). Se corrige aqui, SOLO para esta marca, a --maroon
   (~8.56:1) -- ya es el color de acento del anaquel, asi que ademas conecta
   visualmente el eyebrow con la firma existente. No se toca la regla
   compartida .eyebrow, que sigue igual para las demas marcas. */
body[data-brand="guarnicion"] .eyebrow { position: relative; padding-bottom: 0.65rem; color: var(--maroon, #7a2320); }
body[data-brand="guarnicion"] .eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: var(--maroon, #7a2320);
}

/* El lavado calido de #productos se repone para Tostadas, que tambien tiene
   una seccion con ese id y no trae fondo propio. La regla original iba sin
   acotar por marca, asi que retirarla por Guarnicion se la llevaba por
   delante. #mayoreo si era exclusivo de esta ficha. Rocave salio de aqui en
   M9: su #productos es la apertura de una pagina BLANCA y un lavado naranja
   la teñiria. */
body[data-brand="tostadas"] #productos {
  background: linear-gradient(180deg, rgba(217, 122, 31, 0.05), transparent 46%);
}

/* ---------- Sistema de bloques a sangre ----------
   Las cuatro secciones estaban en `transparent` con dos degradados de 5% de
   opacidad (las reglas #productos y #mayoreo, sin acotar por marca). Medido contra
   la referencia del cliente, ese era el hueco: misma longitud de pagina, cero
   ritmo cromatico. El guinda #7A2320 no es un color nuevo: es el rojo real de
   la etiqueta NOM-051, que ya vivia aqui como --maroon para los bordes de
   tarjeta. Pasa de detalle a protagonista. */
body[data-brand="guarnicion"] {
  --gu-guinda: #7a2320;
  --gu-guinda-hondo: #5a1715;
  --gu-dorado: #f2b830;
  --gu-crema-clara: #fbf6ec;
}

.gu-bloque { position: relative; }
/* Los bloques van a sangre pero su contenido sigue dentro de --container:
   el color cruza la pantalla, el texto no. */
.gu-bloque--guinda {
  background: var(--gu-guinda);
  color: var(--crema);
}
.gu-bloque--dorado {
  background: var(--gu-dorado);
  /* Tinta sobre dorado da 8.75:1. Blanco daria 1.9:1, por debajo de
     cualquier minimo: el dorado NUNCA lleva texto claro. */
  color: var(--tinta);
}
.gu-bloque--crema { background: var(--gu-crema-clara); }

/* Sobre guinda plano, el titular y el cuerpo heredan crema; el eyebrow y sus
   acentos estaban calculados para fondo claro y sobre guinda desaparecen. */
.gu-bloque--guinda h2,
.gu-bloque--guinda h3,
.gu-bloque--guinda p { color: inherit; }
/* ...pero las tarjetas del catalogo son islas claras DENTRO del bloque, asi
   que ahi `inherit` tiene que resolver a tinta, no a crema. Sin esta linea,
   `.gu-bloque--guinda h3` (0,1,1) empata con `.gu-cat-cuerpo h3` (0,1,1) y
   gana por orden: los cinco nombres de producto quedaban en crema sobre
   crema-clara, 1.09:1, invisibles. Lo mismo con los resumenes, porque
   `.gu-bloque--guinda p` (0,1,1) supera a `.gu-cat-resumen` (0,1,0). */
.gu-bloque--guinda .gu-cat-card { color: var(--tinta); }
body[data-brand="guarnicion"] .gu-bloque--guinda .eyebrow { color: var(--gu-dorado); }
body[data-brand="guarnicion"] .gu-bloque--guinda .eyebrow::after { background: var(--gu-dorado); }

/* Textura de grano de maiz. La cenefa de granos ya viene impresa en la
   etiqueta real, asi que no se inventa nada: se traslada. Al 6% es lo que
   evita que el color plano se lea barato, y va como mascara para tomar el
   color del bloque en vez de duplicar el archivo por cada fondo. */
.gu-bloque--guinda::before,
.gu-bloque--dorado::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background: currentColor;
  -webkit-mask: url("assets/brand-art/gu-maiz.svg") repeat 0 0 / 40px 40px;
  mask: url("assets/brand-art/gu-maiz.svg") repeat 0 0 / 40px 40px;
}
/* El contenido por encima de la textura. */
.gu-bloque > * { position: relative; z-index: 1; }

/* ---------- Onda separadora ----------
   Marca el corte entre dos bloques de color: la tira lleva el color del
   bloque ANTERIOR y el siguiente lo invade por debajo, recortado con la
   onda. Mosaico horizontal: el trazado empieza y termina a la misma altura,
   asi que la repeticion no deja escalon.

   Hacen falta las dos capas. La tira es hermana de las secciones, no hija,
   asi que lo que la mascara recorta deja ver el fondo del body -crema en
   tema claro-, no el bloque de arriba. Con una sola capa, las dos ondas que
   cierran un bloque guinda quedaban crema sobre crema (1.00:1 y 1.09:1):
   invisibles, y el guinda cortaba en linea recta. */
.gu-onda {
  position: relative;
  height: clamp(26px, 4vw, 52px);
  margin: 0;
  background: var(--onda-antes, transparent);
}
.gu-onda::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--onda, var(--crema));
  -webkit-mask: url("assets/brand-art/gu-onda.svg") repeat-x bottom / 240px 100%;
  mask: url("assets/brand-art/gu-onda.svg") repeat-x bottom / 240px 100%;
}
/* Nombradas «de donde vienen» a «a donde van», para que el HTML se lea solo. */
.gu-onda--guinda-a-crema { --onda-antes: var(--gu-guinda); --onda: var(--crema); }
.gu-onda--crema-a-guinda { --onda-antes: var(--crema); --onda: var(--gu-guinda); }
.gu-onda--guinda-a-cremaclara { --onda-antes: var(--gu-guinda); --onda: var(--gu-crema-clara); }
.gu-onda--cremaclara-a-dorado { --onda-antes: var(--gu-crema-clara); --onda: var(--gu-dorado); }

/* ---------- Hero en guinda ----------
   Abria con el logotipo en escala de grises sobre crema, teniendo el de
   color sin usar en assets/brands/. Ahora entra el de color sobre guinda,
   con el empaque real al lado: el primer viewport pasa de una marca de agua
   apagada a producto y marca a todo color. */
.gu-hero-intro.gu-bloque--guinda {
  padding-top: clamp(2.4rem, 6vw, 4rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  /* .gu-hero-intro traia max-width: 640px, y el reset a `none` vivia dentro
     de @media (min-width: 900px). Al colgar el bloque guinda de esa misma
     seccion, el color «a sangre» quedaba encerrado en 640px: a 768px el hero
     era un rectangulo guinda con 128px de franja crema a la derecha. Por
     debajo de 640px no se nota, asi que revisar solo en movil no lo caza. */
  max-width: none;
}
/* El limite de linea se muda a la columna de texto, que es a quien le tocaba. */
.gu-hero-intro .gu-hero-copy { max-width: 640px; }

/* Botones del hero: estaban calculados para el crema anterior. Sobre guinda,
   el secundario daba 1.57:1 de texto y 1.24:1 de aro, y el primario seguia en
   el naranja corporativo, que pelea con la paleta que este bloque impone.

   El intento de arreglo de abajo (".gu-bloque--guinda .btn-secondary", sin el
   prefijo body[data-theme]) llevaba aqui desde entonces y NUNCA se aplico: la
   pagina es data-theme="light", y "body[data-theme=\"light\"] .btn-secondary"
   (mas arriba, ~L256) tiene mas especificidad (0,2,1) que esta regla (0,2,0) y
   gana sin importar el orden en la hoja. Medido en vivo el 2026-09-09 (B1
   §2.6): el texto seguia calculando tinta sobre guinda, 1.57:1. El selector
   de aqui abajo iguala esa especificidad para ganar de verdad. */
body[data-theme="light"] .gu-bloque--guinda .btn-secondary {
  color: var(--crema);
  box-shadow: inset 0 0 0 2px rgba(244, 236, 220, 0.45);
}
body[data-theme="light"] .gu-bloque--guinda .btn-secondary:hover {
  box-shadow: inset 0 0 0 2px var(--crema);
}
.gu-bloque--guinda .btn-primary {
  background: var(--gu-dorado);
  color: var(--tinta);
}
.gu-bloque--guinda .btn-primary:hover { background: #e0a622; }
/* El aro de foco global es --brasa: 2.97:1 sobre guinda, por debajo del 3:1
   de WCAG 1.4.11. El dorado da 5.59:1. */
.gu-bloque--guinda a:focus-visible,
.gu-bloque--guinda button:focus-visible { outline-color: var(--gu-dorado); }
/* Resplandor calido detras del producto. Va en un pseudo-elemento del
   bloque, no en el visual, para que cruce todo el ancho a sangre. */
.gu-hero-intro.gu-bloque--guinda::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 80% at 72% 46%, rgba(242, 184, 48, 0.28), transparent 68%);
}
/* El .container ya sube sobre las dos capas decorativas con la regla
   `.gu-bloque > *` de arriba: no hace falta repetirla aqui. */

.gu-hero-intro h1 {
  /* Estaba clavado en 56px. La referencia llega a 60px con una pagina mucho
     menos densa; aqui el titular es la pieza que sostiene el bloque. */
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.95;
  color: var(--crema);
  margin-bottom: 0.6rem;
}
.gu-hero-intro .lead { color: var(--crema); opacity: 0.92; }
/* .breadcrumb arrastra opacity: 0.8 de su regla base. Dorado puro sobre
   guinda son 5.59:1, pero compuesto con ese 0.8 baja a 4.14:1, por debajo
   del AA de 4.5:1 para su tamano. El calculo de contraste midio el color
   declarado, no el que se acaba pintando. */
.gu-hero-intro .breadcrumb { color: var(--gu-dorado); opacity: 1; }

/* Fila de datos: de puntos sueltos a pildoras doradas. Sobre guinda, el
   texto en --tinta-suave que traian era ilegible. */
.gu-bloque--guinda .gu-fact-row { gap: 0.6rem; }
.gu-bloque--guinda .gu-fact-row li {
  background: rgba(244, 236, 220, 0.12);
  border: 1px solid rgba(242, 184, 48, 0.45);
  border-radius: 999px;
  padding: 0.34rem 0.85rem;
  color: var(--crema);
}
.gu-bloque--guinda .gu-fact-dot { background: var(--gu-dorado); }
.gu-bloque--guinda .gu-scroll-hint { color: var(--gu-dorado); }

/* El visual: logotipo arriba, empaque abajo y montado sobre el. */
.gu-hero-visual { flex-direction: column; gap: 0; }
/* logo-guarnicion.webp es VP8 lossy SIN canal alfa: trae el fondo crema
   incrustado, asi que sobre guinda aparece como un rectangulo duro. No se
   puede quitar sin degradar la imagen, pero redondeado deja de ser un
   accidente y pasa a leerse como lo que es: la placa clara de la etiqueta
   sobre el guinda del empaque. */
.gu-hero-intro .brand-logo.gu-hero-logo {
  width: min(300px, 84%);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(26, 13, 12, 0.45);
}
@media (min-width: 900px) {
  .gu-hero-intro .brand-logo.gu-hero-logo { width: min(400px, 100%); margin: 0 auto; }
}
.gu-hero-empaque {
  position: relative;
  z-index: 1;
  width: min(230px, 62%);
  height: auto;
  margin-top: -1.2rem;
  filter: drop-shadow(0 22px 34px rgba(26, 13, 12, 0.5));
}
@media (min-width: 900px) { .gu-hero-empaque { width: min(280px, 74%); } }
/* El resplandor del hero-visual heredado era naranja sobre crema; sobre
   guinda no aporta y ensucia el borde del empaque. */
.gu-hero-visual::before { display: none; }

/* ---------- Titulo con ornamento ----------
   El swash del logotipo flanqueando el titular. Es el mueble que repite en
   cada seccion y da la sensacion de sistema, no de pagina suelta. Se pinta
   con currentColor via mascara, asi que el mismo archivo sirve sobre guinda
   (dorado) y sobre crema (guinda). */
.gu-heading-ornado {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.gu-heading-ornado::before,
.gu-heading-ornado::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(44px, 8vw, 74px);
  height: 26px;
  background: currentColor;
  opacity: 0.5;
  -webkit-mask: url("assets/brand-art/gu-liston.svg") no-repeat center / contain;
  mask: url("assets/brand-art/gu-liston.svg") no-repeat center / contain;
}
.gu-heading-ornado::after { transform: scaleX(-1); }
/* En movil el titular necesita todo el ancho: se queda un solo ornamento. */
@media (max-width: 560px) {
  .gu-heading-ornado::after { display: none; }
}

/* ---------- Catalogo sobre guinda ----------
   Las cinco tarjetas pesaban igual, siendo que solo una se puede comprar.
   Sobre el bloque guinda, la de anaquel se queda en crema llena y las cuatro
   en produccion bajan a un crema velado: la jerarquia la carga el contraste,
   no un borde mas. */
.gu-bloque--guinda .gu-cat-grid { gap: 1.4rem; }
.gu-bloque--guinda .gu-cat-card {
  background: var(--gu-crema-clara);
  border: 0;
  border-top: 5px solid var(--gu-dorado);
  box-shadow: 0 14px 28px rgba(26, 13, 12, 0.28);
}
.gu-bloque--guinda .gu-cat-card--camino {
  background: rgba(251, 246, 236, 0.9);
  border-top-color: rgba(242, 184, 48, 0.5);
}
.gu-bloque--guinda .gu-cat-card--anaquel {
  border-top-width: 7px;
  box-shadow: 0 18px 38px rgba(26, 13, 12, 0.4);
}

/* La caja de la ilustracion: dorado tenue, para que el dibujo plano tenga
   sobre que apoyarse sin competir con la foto real de al lado. */
.gu-cat-media--ilustracion {
  background: radial-gradient(70% 70% at 50% 45%, rgba(242, 184, 48, 0.34), rgba(242, 184, 48, 0.12));
}
.gu-cat-ilustracion {
  width: 74%;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(122, 35, 32, 0.22));
}

/* El fantasma y el misterio usaban var(--maroon) de fondo. Sobre el bloque
   guinda esa caja desaparecia dentro de la seccion. */
.gu-bloque--guinda .gu-cat-media--fantasma,
.gu-bloque--guinda .gu-cat-media--misterio { background: var(--gu-guinda-hondo); }

/* Distintivos de estado: el de anaquel es el unico que promete compra hoy. */
.gu-bloque--guinda .gu-cat-card--anaquel .gu-cat-estado {
  background: var(--gu-dorado);
  color: var(--tinta);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
/* Las estrellas del liston marcan el unico producto que existe de verdad.
   Es la misma pareja que el logotipo lleva bajo "SABOR Y TRADICION", asi que
   el adorno no es gratuito: distingue anaquel de produccion de un vistazo. */
.gu-bloque--guinda .gu-cat-card--anaquel .gu-cat-estado::after {
  content: "";
  width: 30px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("assets/brand-art/gu-estrellas.svg") no-repeat center / contain;
  mask: url("assets/brand-art/gu-estrellas.svg") no-repeat center / contain;
}
.gu-bloque--guinda .gu-cat-card--camino .gu-cat-estado {
  background: rgba(122, 35, 32, 0.12);
  color: var(--gu-guinda);
}
.gu-bloque--guinda .gu-cat-accion {
  background: var(--gu-guinda);
  color: var(--crema);
}
.gu-bloque--guinda .gu-cat-accion:hover { background: var(--gu-guinda-hondo); }
/* El aro lleva outline-offset, asi que se dibuja DENTRO de la tarjeta
   crema-clara, no sobre el guinda del bloque: el dorado ahi da 1.67:1 y no
   llega al 3:1 de WCAG 1.4.11. La regla de la que se partia (linea 1184) usa
   var(--acc-texto) = #8f5014, que ya daba 5.86:1 -no los 3.05:1 que decia un
   comentario anterior, que confundia --acc-texto con --acc-. El guinda da
   9.31:1 y ademas casa con el boton. */
.gu-bloque--guinda .gu-cat-accion:focus-visible {
  outline: 3px solid var(--gu-guinda);
  outline-offset: 2px;
}

/* ---------- Empaque: la veta mas marcada ----------
   La seccion se queda sobre crema (es el respiro del ritmo y el fondo que el
   packshot necesita), pero sus piezas suben de contraste para no quedar
   apagadas entre dos bloques de guinda. */
.gu-shelf .gu-dot { background: var(--gu-guinda); }
.gu-shelf .gu-tag {
  background: var(--gu-guinda);
  color: var(--crema);
}
.gu-panel.is-active::before { background: var(--gu-dorado); }
.gu-panel-num { color: var(--gu-guinda); }
.gu-shelf-plank { filter: saturate(1.15) contrast(1.06); }

/* ---------- Tira de usos ----------
   La pagina ensenaba producto pero nunca antojo. Cuatro platillos por
   ingrediente, con cocina mexicana generica: no afirma nada sobre la marca
   ni nombra producto fuera del catalogo. */
.gu-usos-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.gu-uso { text-align: center; }
.gu-uso img {
  width: min(140px, 62%);
  height: auto;
  margin: 0 auto 0.9rem;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(122, 35, 32, 0.18));
}
.gu-uso h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--gu-guinda);
  margin: 0 0 0.35rem;
}
.gu-uso p {
  margin: 0 auto;
  color: var(--tinta-suave);
  font-size: 0.98rem;
  max-width: 22rem;
}
/* Escalonado de la tira: mismo criterio que el catalogo, un poco mas corto
   porque son cuatro piezas en una sola fila y se ven casi a la vez. */
.gu-uso:nth-child(2) { --reveal-delay: 60ms; }
.gu-uso:nth-child(3) { --reveal-delay: 120ms; }
.gu-uso:nth-child(4) { --reveal-delay: 180ms; }

/* ---------- Movimiento ----------
   Todo va por transicion sobre estados reales (hover, focus, revelado), no
   por bucles infinitos: una pagina de producto que se mueve sola cansa y
   compite con el contenido. El revelado al entrar en pantalla lo gestiona
   [data-reveal] de main.js, que ya lleva su IntersectionObserver.

   Nada de esto necesita guarda propia: la regla global de styles.css:73-76
   apaga toda transicion y animacion bajo prefers-reduced-motion. */
.gu-cat-card {
  transition: transform var(--dur-reveal) var(--ease-out),
              box-shadow var(--dur-reveal) var(--ease-out);
}
.gu-bloque--guinda .gu-cat-card:hover,
.gu-bloque--guinda .gu-cat-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px rgba(26, 13, 12, 0.42);
}
/* La ilustracion crece un poco dentro de su caja, que tiene overflow oculto:
   asi el gesto se siente del producto y no de la tarjeta entera. */
.gu-cat-ilustracion,
.gu-uso img {
  transition: transform var(--dur-reveal) var(--ease-out);
}
.gu-cat-card:hover .gu-cat-ilustracion,
.gu-cat-card:focus-within .gu-cat-ilustracion { transform: scale(1.06) rotate(-2deg); }
.gu-uso:hover img { transform: scale(1.06) rotate(-2deg); }

/* El empaque del hero entra con un poco mas de recorrido que el resto, que es
   lo que lo vuelve la pieza que manda en el primer viewport. */
html.js .gu-hero-empaque[data-reveal] { transform: translateY(26px) scale(0.97); }
html.js .gu-hero-empaque[data-reveal].is-revealed { transform: none; }
.gu-hero-empaque { transition: transform var(--dur-reveal) var(--ease-out); }

/* Las llamadas del empaque ya cambian de estado al bajar; se les da la misma
   curva que al resto para que el conjunto se sienta de una pieza. */
.gu-callout .gu-dot,
.gu-callout .gu-tag { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }

/* ---------- Mayoreo sobre dorado ----------
   Es el bloque de conversion de la pagina y era el mas apagado de los cinco.
   Sobre dorado, el formulario en panel crema elevado se lee como la pieza a
   la que hay que llegar. Tinta sobre dorado da 8.75:1. */
.gu-bloque--dorado .wholesale-block h2,
.gu-bloque--dorado .wholesale-block p,
.gu-bloque--dorado .wholesale-list li { color: var(--tinta); }
body[data-brand="guarnicion"] .gu-bloque--dorado .eyebrow { color: var(--gu-guinda); }
body[data-brand="guarnicion"] .gu-bloque--dorado .eyebrow::after { background: var(--gu-guinda); }
/* .wholesale-list lleva list-style:none, asi que ::marker no pinta nunca: la
   vinieta real es li::before, en --acc (#D97A1F), que sobre dorado da 1.73:1
   y desaparece. */
.gu-bloque--dorado .wholesale-list li::before { background: var(--gu-guinda); }

.gu-bloque--dorado .panel {
  background: var(--gu-crema-clara);
  border: 0;
  box-shadow: 0 20px 44px rgba(90, 23, 21, 0.32);
}
.gu-bloque--dorado .btn-primary {
  background: var(--gu-guinda);
  color: var(--crema);
}
.gu-bloque--dorado .btn-primary:hover { background: var(--gu-guinda-hondo); }
.gu-bloque--dorado .gu-wholesale-photo {
  filter: drop-shadow(0 18px 30px rgba(90, 23, 21, 0.4));
}

/* Mayoreo: la columna de la nota quedaba sola y vacia; se le da compania al
   empaque real (mismo archivo que el anaquel) para reforzar el producto
   tambien en el cierre comercial de la pagina. */
.gu-wholesale-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.gu-wholesale-photo {
  width: min(150px, 55%);
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(43, 33, 25, 0.22));
}
@media (min-width: 620px) { .gu-wholesale-photo { width: min(168px, 42%); } }
/* ===== FIN ===== */

/* ============================================================
   TOSTADAS — pantalla de pedidos (pedido.html)
   Una parte importante de las ventas de la marca es domicilio y la web no
   ofrecia forma de pedir. Esta pantalla arma el pedido y lo entrega escrito
   por WhatsApp. No cobra: se paga al recibir.
   ============================================================ */
.pedido-hero { position: relative; padding: clamp(1.6rem, 5vw, 2.6rem) 0 1rem; }
.pedido-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.2rem 0 1rem; }
.pedido-horario { font-family: var(--heavy); font-size: 0.85rem; color: var(--peltre); }
/* Estar cerrado NO bloquea el pedido: este aviso es informativo, no una
   alarma, asi que usa el acento de marca en vez del rojo de error. */
.pedido-cerrado {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  max-width: 34rem;
  font-size: 0.85rem;
  font-family: var(--heavy);
  color: var(--crema);
  background: rgba(232, 98, 29, 0.14);
  border-left: 3px solid var(--brasa);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin: 0 0 1rem;
}
.pedido-cerrado[hidden] { display: none; }

.pedido-grid { display: grid; gap: 1.6rem; padding-bottom: clamp(2rem, 6vw, 4rem); }
@media (min-width: 900px) {
  .pedido-grid { grid-template-columns: 1.15fr 0.85fr; align-items: start; gap: 2.2rem; }
  /* El carrito acompana al usuario mientras recorre el menu: sin esto habria
     que bajar hasta el final para ver que llevas. */
  .pedido-carrito-col { position: sticky; top: 84px; }
  .pedido-carrito { max-height: calc(100vh - 108px); overflow-y: auto; }
}

/* Los pasos van numerados: la pantalla se escanea, no se lee. */
.pedido-paso {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
  margin-bottom: 0.5rem;
}
.pedido-paso span {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 50%;
  background: var(--acc);
  color: var(--acc-ink);
  font-family: var(--heavy);
  font-size: 0.9rem;
}
.pedido-paso--sub { font-size: 1.15rem; margin-top: 1.4rem; }
.pedido-paso--sub span { width: 1.6rem; height: 1.6rem; font-size: 0.8rem; }
.pedido-nota-menu { color: var(--peltre); font-size: 0.9rem; margin-bottom: 1.4rem; }

/* Cada seccion es un bloque cerrado con su foto: 26 platillos de golpe eran
   una lista larguisima donde para pedir una torta habia que pasar por delante
   de todo lo demas. Es un <details>, asi que el teclado y el estado abierto /
   cerrado vienen del navegador. */
.pedido-seccion {
  margin-bottom: 0.7rem;
  border: 1px solid rgba(244, 236, 220, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--carbon-2);
}
.pedido-seccion[open] { border-color: rgba(233, 138, 142, 0.4); }
.pedido-seccion-cab {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1rem 0.7rem 0;
  cursor: pointer;
  list-style: none;
  min-height: 76px;
}
.pedido-seccion-cab::-webkit-details-marker { display: none; }
.pedido-seccion-cab:hover { background: rgba(244, 236, 220, 0.04); }
.pedido-seccion-foto { flex: none; width: 86px; align-self: stretch; }
.pedido-seccion-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pedido-seccion-texto { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.pedido-seccion-titulo {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.15;
  color: #e98a8e;
}
.pedido-seccion-meta { font-size: 0.82rem; color: var(--peltre); }
.pedido-seccion-nota { font-size: 0.78rem; color: var(--peltre); font-style: italic; }
.pedido-seccion-flecha {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--peltre);
  transition: transform 0.2s ease;
}
.pedido-seccion-flecha svg { width: 20px; height: 20px; }
.pedido-seccion[open] .pedido-seccion-flecha { transform: rotate(180deg); }
.pedido-seccion .pedido-items { padding: 0 1rem 1rem; }
.pedido-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pedido-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  background: var(--carbon-2);
  border: 1px solid rgba(244, 236, 220, 0.1);
  border-radius: var(--radius);
}
.pedido-item-info { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 12rem; }
.pedido-item-nombre { font-weight: 600; }
.pedido-item-desc { font-size: 0.84rem; color: var(--peltre); }
.pedido-item-tamanos { display: flex; gap: 0.4rem; flex: none; }

.pedido-add {
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid rgba(244, 236, 220, 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--crema);
  font-family: var(--heavy);
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pedido-add b { font-variant-numeric: tabular-nums; margin-left: 0.35rem; }
.pedido-add:hover { border-color: var(--acc); }
/* Confirmacion breve del toque: en movil el carrito queda abajo y sin esto
   no hay ninguna senal de que el boton hizo algo. */
.pedido-add.is-added { background: var(--exito); color: #fff; border-color: transparent; }
.pedido-add--solo { flex: none; }
.pedido-add--extra { margin: 0 0.4rem 0.4rem 0; }

/* ---------- El carrito ---------- */
.pedido-carrito .pedido-paso { color: var(--tinta); }
.pedido-vacio { font-size: 0.9rem; }
.pedido-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pedido-linea {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(43, 33, 25, 0.12);
}
.pedido-linea-nombre { font-size: 0.9rem; color: var(--tinta); min-width: 0; }
.pedido-linea-nombre em { font-style: normal; color: var(--tinta-suave); font-size: 0.85em; }
.pedido-linea-controles { display: flex; align-items: center; gap: 0.35rem; }
.pedido-linea-controles b { min-width: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--tinta); }
.pedido-cant {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(43, 33, 25, 0.3);
  background: transparent;
  color: var(--tinta);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.pedido-cant:hover { border-color: var(--tinta); }
.pedido-linea-precio { font-variant-numeric: tabular-nums; font-family: var(--heavy); font-size: 0.9rem; color: var(--tinta); }

.pedido-item-edad {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tinta-suave);
}
.pedido-add-edad {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  margin-left: 0.35rem;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: var(--tinta);
  color: var(--crema);
}
.pedido-sugerencia { margin-top: 1rem; }
.pedido-sugerencia .pedido-add { color: var(--tinta); border-color: rgba(43, 33, 25, 0.3); }

.pedido-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 1rem 0 0.2rem;
  color: var(--tinta);
}
/* Un display de autor gana sobre el [hidden] del navegador, asi que sin esta
   linea el "Total estimado $0" se veia con el carrito vacio, que es cuando
   pedido.js lo marca como oculto. Mismo caso que .open-chip y .pedido-cerrado. */
.pedido-total[hidden] { display: none; }
.pedido-total span em {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  color: var(--tinta-suave);
}
.pedido-total strong { font-family: var(--display); font-weight: 400; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.pedido-total-nota { font-size: 0.82rem; margin-bottom: 0.6rem; }

.pedido-modo { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.pedido-modo-opcion {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(43, 33, 25, 0.25);
  border-radius: var(--radius);
  cursor: pointer;
}
.pedido-modo-opcion:has(input:checked) { border-color: var(--acc); background: rgba(197, 58, 64, 0.08); }
.pedido-modo-opcion input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex: none;
  accent-color: var(--acc);
}
/* flex:1 + min-width:0: sin lo primero el span colapsaba a 0 y su texto se
   salia; sin lo segundo no encogia y empujaba la pagina 30px fuera de
   pantalla en moviles de 390px. Hacen falta los dos. */
.pedido-modo-opcion span { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }
.pedido-modo-opcion strong { font-family: var(--heavy); font-size: 0.92rem; color: var(--tinta); }
.pedido-modo-opcion em { font-style: normal; font-size: 0.8rem; color: var(--tinta-suave); }

.pedido-aviso-ciudad {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.85rem;
  font-family: var(--heavy);
  color: var(--tinta);
  background: rgba(197, 58, 64, 0.1);
  border-left: 3px solid var(--brasa-texto);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin: 0 0 0.9rem;
}
.pedido-envio-nota,
.pedido-recoger-nota { font-size: 0.84rem; color: var(--tinta-suave); margin: 0.2rem 0 1rem; }
.pedido-legal { font-size: 0.8rem; color: var(--tinta-suave); margin: 0.7rem 0 0; }
/* Sin nada en el carrito el boton no lleva a ningun sitio: se ve apagado. */
.pedido-enviar[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.pedido-edad-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(10, 8, 6, 0.72);
}
.pedido-edad-gate[hidden] { display: none; }
.pedido-edad-caja {
  max-width: 26rem;
  background: var(--crema);
  color: var(--tinta);
  border: 1px solid rgba(43, 33, 25, 0.18);
  border-radius: 16px;
  padding: 1.5rem;
}
.pedido-edad-caja h3 { margin: 0 0 0.6rem; }
.pedido-edad-caja p { margin: 0 0 1rem; font-size: 0.95rem; }
.pedido-edad-botones { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pedido-edad-botones .btn { min-height: 44px; }
.pedido-edad-nota { margin: 0.9rem 0 0; color: var(--tinta-suave); font-size: 0.9rem; }

.pedido-resena {
  margin: 1rem 0 0;
  padding: 1rem;
  border: 1px dashed rgba(43, 33, 25, 0.28);
  border-radius: 12px;
}
.pedido-resena[hidden] { display: none; }
.pedido-resena p { margin: 0 0 0.75rem; font-size: 0.92rem; }

/* ============ P4 · BOTANAS — rediseño 2026-08 ============ */

/* --- Hero variante "foto-collage al frente" --- */
.hero-botanas--v2 {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: clamp(560px, 92vh, 820px);
  display: flex;
  align-items: flex-end;
}
.hero-botanas--v2::before { display: none; } /* la foto+degradado reemplaza el glow radial de .hero-botanas base */
.hero-botanas--v2 .hero-photo { position: absolute; inset: 0; z-index: 0; }
.hero-botanas--v2 .hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* B4 2026-09-09: charola cenital (botanas-portada-charola-01.webp), no el
     mariachi de antes. object-position elegido sobre captura a 375/768/1440
     -- deja ver la charola completa en movil (ahi no sobra alto que
     recortar) y centra el contenido de la charola en desktop, donde la caja
     del hero es mucho mas panoramica que la foto y solo se ve una franja. */
  object-position: 50% 30%;
  display: block;
}
.hero-botanas--v2 .hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* B4 2026-09-09: velo reforzado y adelantado respecto al de antes (antes
     empezaba a oscurecer recien al 32% de la caja). La foto nueva es mucho
     mas clara/saturada donde cae la primera linea del H1 que la anterior
     (mariachi de noche); medido con el texto real de .hero-copy a los tres
     anchos (ver B4-decisiones.md): con el velo viejo, el primer renglon del
     H1 a 375 daba 3.32:1, bajo el 4.5:1 que pide el umbral. Este arranca
     antes y sube mas rapido -- ajusta el velo, no el texto, como pide el
     prompt. */
  background: linear-gradient(180deg, rgba(26, 21, 17, 0.05) 0%, rgba(26, 21, 17, 0.48) 42%, rgba(26, 21, 17, 0.95) 85%);
}
.hero-botanas--v2 > .container {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 12vh, 6rem) clamp(2rem, 6vw, 3.5rem);
}
.hero-botanas--v2 .hero-logo { height: 44px; width: auto; margin-bottom: 1rem; }
.hero-botanas--v2 h1 {
  font-size: clamp(2.6rem, 8vw, 4.8rem);
  line-height: 0.96;
}

/* Entrada del hero al cargar (no scroll-triggered, esta sobre el pliegue).
   @starting-style degrada mostrando el estado final si el navegador no lo
   soporta - nunca deja contenido oculto, a diferencia de scroll-timeline. */
.hero-botanas--v2 .hero-copy {
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
@starting-style {
  .hero-botanas--v2 .hero-copy { opacity: 0; transform: translateY(24px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-botanas--v2 .hero-copy { transition: none; }
}

/* --- Sección historia: el momento estelar --- */
.historia-abuelo { background: var(--carbon-2); }
.historia-abuelo-grid { display: grid; gap: 1.6rem; }
@media (min-width: 720px) {
  .historia-abuelo-grid { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 2.4rem; }
}
.historia-abuelo-foto { margin: 0; }
.historia-abuelo-foto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  filter: grayscale(1);
  transition: filter 900ms var(--ease-out);
}
/* B4 2026-09-09: pedido del cliente -- la foto "Desde 2014" se queda en
   blanco y negro tambien revelada (antes viraba a sepia). La transicion se
   conserva (es la que da el efecto de aparicion, ver .historia-abuelo-foto
   img arriba), solo cambia de que gris sale a que gris llega. La foto de
   origen ya es blanco y negro (medido 2026-09-09, saturacion 0 sobre
   80x80 muestras) -- este filtro es lo unico que la volvia sepia. */
.historia-abuelo-foto img.is-revealed {
  filter: grayscale(1) contrast(1.05);
}
.historia-abuelo-texto h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1.03;
  margin: 0.3rem 0 1rem;
}
.historia-abuelo-texto p { color: var(--peltre); max-width: 38rem; }
@media (prefers-reduced-motion: reduce) {
  .historia-abuelo-foto img { transition: none; }
}

/* --- Revelados mas marcados, solo en Del Abuelo (no toca el default sitewide) ---
   La regla de reposo por si sola gana por especificidad a la regla base
   ".is-revealed" (misma cuenta de clases/atributos, un elemento extra por
   "body") y deja el transform pegado en translateY(30px) para siempre. Hace
   falta la companera ".is-revealed" explicita, con la misma especificidad
   base+algo, para que sí se resetee. Verificado: sin esta regla, las
   tarjetas de sucursales/eventos quedaban invisibles de forma permanente. */
html.js body[data-brand="botanas"] [data-reveal] {
  transform: translateY(30px);
  transition-duration: 640ms;
}
html.js body[data-brand="botanas"] [data-reveal].is-revealed {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js body[data-brand="botanas"] [data-reveal] { transform: none; transition: none; }
}

/* ============ /P4 ============ */

/* ============ P3 · MENÚ INTERACTIVO — 2026-08 ============
   Componente compartido Del Abuelo (modo `consulta`) + Tostadas (modo `pedido`).
   Ver docs/superpowers/specs/2026-08-26-menu-interactivo-design.md.
   Usa los tokens ya existentes (--carbon*, --crema, --peltre, --acc) para que
   cada marca herede su color por `data-brand`, sin paleta propia aquí. */

/* ---- Buscador: input persistente, no una capa aparte (es una pagina real,
   no una app; una capa de pantalla completa aqui seria complejidad de mas). */
.mi-buscador {
  position: relative;
  margin: 0 0 1rem;
}
.mi-buscador input {
  width: 100%;
  min-height: 48px;
  padding: 0 2.6rem 0 1rem;
  background: var(--carbon-2);
  border: 1px solid rgba(244, 236, 220, 0.16);
  border-radius: 999px;
  color: var(--crema);
  font-family: var(--body);
  font-size: 0.95rem;
}
.mi-buscador input::placeholder { color: var(--peltre); }
.mi-buscador input:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }
.mi-buscador svg {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--peltre);
  pointer-events: none;
}
.mi-buscador-limpiar {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--carbon-3);
  color: var(--crema);
  display: none;
  place-items: center;
  cursor: pointer;
}
.mi-buscador[data-con-texto] svg { display: none; }
.mi-buscador[data-con-texto] .mi-buscador-limpiar { display: grid; }

.mi-resultados { display: grid; gap: 0.4rem; }
.mi-resultados[hidden] { display: none; }
.mi-resultados-sec {
  font-family: var(--heavy);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc);
  margin: 1.1rem 0 0.3rem;
}
.mi-resultados-sec:first-child { margin-top: 0.4rem; }
.mi-vacio {
  text-align: center;
  padding: 2.4rem 1rem;
  color: var(--peltre);
}
.mi-vacio b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--crema);
  margin-bottom: 0.4rem;
}

/* ---- Portada: hero + rejilla de puertas ---- */
.mi-portada-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  margin: 0 0 1.2rem;
  background: var(--carbon-2);
}
.mi-portada-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mi-portada-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 21, 17, 0.15) 20%, rgba(26, 21, 17, 0.82) 100%);
}
.mi-portada-hero-txt {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1rem;
}
.mi-portada-hero-txt h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1;
  margin: 0;
  color: var(--crema);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.mi-puertas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) { .mi-puertas { grid-template-columns: repeat(3, 1fr); } }
.mi-puerta {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(244, 236, 220, 0.14);
  aspect-ratio: 3 / 4;
  text-decoration: none;
  min-height: 44px;
}
.mi-puerta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mi-puerta-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, rgba(26, 21, 17, 0.12) 32%, rgba(26, 21, 17, 0.9) 100%);
}
.mi-puerta-txt { position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.65rem; }
.mi-puerta-txt h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.02rem, 3vw, 1.3rem);
  line-height: 1.08;
  margin: 0;
  color: var(--crema);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.mi-puerta-txt span {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--heavy);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc);
}
.mi-puerta-candado {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  font-family: var(--heavy);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  background: rgba(20, 16, 12, 0.75);
  color: var(--hueso);
  border: 1px solid rgba(244, 236, 220, 0.2);
  border-radius: 999px;
  padding: 3px 7px;
}
.mi-puerta:hover .mi-puerta-scrim,
.mi-puerta:focus-visible .mi-puerta-scrim { background: linear-gradient(175deg, rgba(26, 21, 17, 0.05) 24%, rgba(26, 21, 17, 0.85) 100%); }
.mi-puerta:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }

/* ---- Vista de un grupo ---- */
.mi-vista[hidden] { display: none; }

.mi-nav-volver {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.9rem 0 0.5rem;
  margin: 0 0 0.8rem;
  border: 1px solid rgba(244, 236, 220, 0.16);
  border-radius: 999px;
  background: var(--carbon-2);
  color: var(--crema);
  font-family: var(--heavy);
  font-size: 0.82rem;
  text-decoration: none;
}
.mi-nav-volver svg { width: 18px; height: 18px; }
.mi-nav-volver:hover,
.mi-nav-volver:focus-visible { border-color: var(--acc); }

.mi-grupo-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  margin: 0 0 1rem;
  background: var(--carbon-2);
}
.mi-grupo-hero img { width: 100%; height: 100%; object-fit: cover; }
.mi-grupo-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 21, 17, 0.1) 30%, rgba(26, 21, 17, 0.82) 100%);
}
.mi-grupo-hero-txt { position: absolute; left: 1rem; right: 1rem; bottom: 0.85rem; }
.mi-grupo-hero-txt h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  line-height: 1.02;
  margin: 0;
  color: var(--crema);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.mi-grupo-hero-txt p {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--hueso);
  max-width: 40rem;
}

.mi-subchips {
  position: sticky;
  top: 61px;
  z-index: 30;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.7rem 0;
  margin: 0 0 1.2rem;
  background: color-mix(in srgb, var(--carbon) 92%, transparent);
  backdrop-filter: blur(8px);
}
.mi-subchips::-webkit-scrollbar { display: none; }
.mi-subchips a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(244, 236, 220, 0.16);
  font-family: var(--heavy);
  font-size: 0.78rem;
  color: var(--peltre);
  text-decoration: none;
  white-space: nowrap;
}
.mi-subchips a:hover { color: var(--crema); border-color: var(--acc); }
.mi-subchips a[aria-current="true"] { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }

.mi-seccion { margin: 0 0 2.2rem; scroll-margin-top: 128px; }
.mi-seccion-foto { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 8; margin: 0 0 0.9rem; background: var(--carbon-2); }
.mi-seccion-foto img { width: 100%; height: 100%; object-fit: cover; }
.mi-seccion-tit {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  margin: 0 0 0.25rem;
  color: var(--crema);
}
.mi-seccion-nota { font-size: 0.82rem; color: var(--peltre); margin: 0 0 0.9rem; line-height: 1.5; }

/* ---- Lista de platillos: fila ancha, foto solo donde existe.
   minmax(0,1fr) y no 1fr: un nombre largo (p. ej. una lista de cervezas)
   no baja de su min-content y desborda el renglon (bug real, ver spec §6). */
.mi-lista { display: grid; gap: 2px; }
.mi-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: start;
  width: 100%;
  padding: 0.8rem 0.1rem;
  border: 0;
  border-bottom: 1px solid rgba(244, 236, 220, 0.08);
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: default;
}
.mi-item.mi-tocable { cursor: pointer; min-height: 44px; }
.mi-item.mi-tocable:hover .mi-item-nombre,
.mi-item.mi-tocable:focus-visible .mi-item-nombre { color: var(--acc); }
.mi-item:focus-visible { outline: 3px solid var(--brasa); outline-offset: -2px; border-radius: 6px; }
.mi-item-foto { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; background: var(--carbon-2); grid-row: span 2; }
.mi-item-foto img { width: 100%; height: 100%; object-fit: cover; }
.mi-item-txt { min-width: 0; }
.mi-item-nombre { margin: 0; font-family: var(--body); font-weight: 600; font-size: 0.92rem; color: var(--crema); overflow-wrap: anywhere; }
.mi-item-desc { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--peltre); line-height: 1.4; }
.mi-item-ver { display: inline-block; margin-top: 0.3rem; font-family: var(--heavy); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--acc); }
.mi-item-edad {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--heavy);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  background: var(--carbon-3);
  color: var(--hueso);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}
/* El precio nunca es una lista completa de variantes en el renglon (bug
   real, ver spec §6): "Desde $X" aqui, el desglose vive en la hoja. */
.mi-item-precio {
  font-family: var(--heavy);
  font-size: 0.86rem;
  color: var(--brasa);
  font-variant-numeric: tabular-nums;
  text-align: right;
  max-width: 8.5rem;
  overflow-wrap: anywhere;
  padding-top: 1px;
}
body[data-theme="light"] .mi-item-precio { color: var(--brasa-texto); }

/* ---- Arma tu Botana: pieza destacada, no modal ---- */
.mi-arma {
  background: linear-gradient(158deg, var(--carbon-3), var(--carbon-2));
  border: 1px solid rgba(244, 236, 220, 0.14);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1.2rem;
}
/* Nota legal del pie del menu (config.menuNota, B2 2026-09-09): un bloque
   de texto informativo, no un platillo, asi que se separa visualmente del
   resto con una linea superior. */
.mi-nota { margin: 2rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(244, 236, 220, 0.16); font-size: 0.78rem; color: var(--peltre); line-height: 1.5; }
.mi-nota p { margin: 0 0 0.4rem; }
.mi-nota p:last-child { margin-bottom: 0; }

.mi-arma-tit { font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--acc); margin: 0 0 0.2rem; }
.mi-arma-nota { font-size: 0.8rem; color: var(--peltre); margin: 0 0 1rem; line-height: 1.5; }
.mi-arma-pasos { display: flex; gap: 5px; margin: 0 0 0.9rem; padding: 0; list-style: none; }
.mi-arma-pip { flex: 1; height: 3px; border-radius: 2px; background: var(--carbon); }
.mi-arma-pip[data-on] { background: var(--brasa); }
.mi-arma-paso-tit { font-family: var(--heavy); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--peltre); margin: 0 0 0.7rem; }
.mi-arma-ops { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.mi-arma-op {
  background: var(--carbon);
  border: 1px solid rgba(244, 236, 220, 0.16);
  color: var(--crema);
  font-family: var(--body);
  font-size: 0.85rem;
  min-height: 40px;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
}
.mi-arma-op[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 600; }
.mi-arma-op:disabled { opacity: 0.35; cursor: not-allowed; }
.mi-arma-op:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }
/* M2 2026-09-13 (queja 3): "Añadir a mi lista" en el paso final es la accion
   principal, no una opcion mas -mismo tratamiento visual que .mi-lista-add
   en la hoja de un platillo, para que se lea como el mismo gesto en toda la
   pagina. */
.mi-arma-op--add { border-color: var(--acc); color: var(--acc); }
.mi-arma-op--add:disabled { opacity: 1; color: var(--peltre); border-color: rgba(244, 236, 220, 0.16); }
.mi-arma-pie { display: flex; justify-content: space-between; align-items: center; gap: 0.7rem; border-top: 1px solid rgba(244, 236, 220, 0.14); padding-top: 0.8rem; }
.mi-arma-resumen { font-size: 0.8rem; color: var(--peltre); line-height: 1.45; flex: 1; }
.mi-arma-resumen b { color: var(--crema); font-weight: 600; }
.mi-arma-atras { background: none; border: 1px solid rgba(244, 236, 220, 0.16); color: var(--crema); font-family: var(--heavy); font-size: 0.78rem; min-height: 40px; padding: 0 0.9rem; border-radius: 999px; cursor: pointer; }

/* ---- Hoja de detalle (bottom sheet) ---- */
.mi-velo {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 8, 6, 0.68);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.mi-velo[data-abierta] { opacity: 1; pointer-events: auto; }
.mi-hoja {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 81;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--carbon-2);
  border-top: 1px solid rgba(244, 236, 220, 0.16);
  border-radius: 20px 20px 0 0;
  transform: translateY(102%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.mi-hoja[data-abierta] { transform: translateY(0); }
.mi-hoja[hidden] { display: none; }
@media (min-width: 700px) {
  .mi-hoja { left: 50%; right: auto; width: min(30rem, calc(100vw - 2rem)); transform: translate(-50%, 102%); border-radius: 20px 20px 0 0; bottom: 2rem; }
  .mi-hoja[data-abierta] { transform: translate(-50%, 0); }
}
.mi-hoja-asa { width: 40px; height: 4px; border-radius: 3px; background: var(--carbon-3); margin: 0.6rem auto 0; }
/* M2 2026-09-13: envoltorio que SÍ hace scroll, para que la ✕ (fija en
   .mi-hoja, ver .mi-hoja-cerrar) no se vaya con el contenido largo. Se
   limita a una altura algo menor que el 88vh de .mi-hoja para que el
   contenedor de fuera nunca necesite su propio scroll -asi la hoja de
   Tostadas (carta-interactiva.js, markup sin este envoltorio) no cambia:
   sigue usando el overflow-y de .mi-hoja tal cual, sin tocarlo. */
.mi-hoja-scroll { overflow-y: auto; max-height: calc(88vh - 2rem); }
.mi-hoja-foto { aspect-ratio: 16 / 10; margin: 0.8rem 1rem 0; border-radius: 14px; overflow: hidden; background: var(--carbon-3); }
.mi-hoja-foto img { width: 100%; height: 100%; object-fit: cover; }
.mi-hoja-cuerpo { position: relative; padding: 1rem 1.1rem 1.4rem; }
.mi-hoja-cuerpo h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: 0 0 0.3rem; color: var(--crema); line-height: 1.08; }
.mi-hoja-precio { font-family: var(--heavy); font-size: 1.05rem; color: var(--brasa); margin: 0 0 0.8rem; font-variant-numeric: tabular-nums; }
body[data-theme="light"] .mi-hoja-precio { color: var(--brasa-texto); }
.mi-hoja-desc { font-size: 0.86rem; color: var(--peltre); margin: 0 0 1rem; line-height: 1.55; }
.mi-hoja-cerrar {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  /* M2 2026-09-13: sin esto, .mi-hoja-cuerpo (mismo z-index:auto, pero
     pintado despues en el marcado) queda encima y se come el clic -pasaba
     siempre que la hoja no tenia foto, que es el panel de "Mi lista" y la
     mayoria de los platillos (hallazgo real, ver informe). */
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--carbon-3);
  border: 1px solid rgba(244, 236, 220, 0.16);
  color: var(--crema);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.mi-hoja-cerrar:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }
.mi-variantes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.1rem; }
.mi-variante {
  flex: 1;
  min-width: 5.5rem;
  background: var(--carbon);
  border: 1px solid rgba(244, 236, 220, 0.16);
  color: var(--crema);
  font-family: var(--body);
  font-size: 0.8rem;
  min-height: 44px;
  padding: 0.5rem 0.4rem;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  gap: 2px;
}
.mi-variante[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.mi-variante b { font-family: var(--heavy); font-size: 0.87rem; font-variant-numeric: tabular-nums; }
.mi-variante:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }
.mi-hoja-nota { font-size: 0.76rem; color: var(--peltre); margin: 0.9rem 0 0; text-align: center; line-height: 1.5; }

/* Modo `consulta`: cierre honesto, sin boton de pedido. */
.mi-hoja-cierre {
  display: block;
  width: 100%;
  min-height: 48px;
  text-align: center;
  font-family: var(--heavy);
  font-size: 0.87rem;
  padding: 0.85rem;
  border-radius: 12px;
  border: 0;
  text-decoration: none;
  background: var(--brasa);
  color: var(--brasa-ink);
  cursor: pointer;
}

/* ---- Puerta de edad de navegación (por sección, no por grupo/carrito):
   reutiliza .pedido-edad-gate/.pedido-edad-caja/etc. tal cual, solo cambia
   el id y la copia. Ver menu.js. ---- */

/* ---- Vista compacta (homepage): rejilla de grupos con foto, extiende
   .menu-cat-chip en vez de duplicarlo (renderMenuCompact en main.js es una
   sola funcion, no se bifurca). B4 2026-09-09: la foto pasa a ocupar toda la
   tarjeta -antes una miniatura de 52x52px en fila con el texto- para que el
   bloque lea como puerta a la carta ("una cuarta puerta" es tambien el
   lenguaje que usa Gabriel para la tarjeta de eventos de SS4, mismo
   vocabulario que .mi-puerta de menu.html). No se reusa .mi-puerta tal cual
   porque esa clase es de menu.html (rejilla de 3 columnas fija); aqui el
   numero de grupos varia (bajo de 6 a 5 en B2) y el bloque vive en una
   pagina mas apretada -- mismo lenguaje visual (foto a sangre + velo +
   texto abajo), grid propio. */
.menu-cat-chip--grupo {
  position: relative;
  display: block;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
}
.menu-cat-chip-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--carbon-3);
}
.menu-cat-chip-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, rgba(26, 21, 17, 0.06) 34%, rgba(26, 21, 17, 0.92) 100%);
}
.menu-cat-chip-txt {
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.menu-cat-chip--grupo .menu-cat-title { color: var(--crema); }
.menu-cat-chip--grupo .menu-cat-count { color: var(--peltre); }

/* Rejilla de la vista compacta: 2 columnas en movil (5 puertas caben en 3
   filas cortas, no una debajo de otra) y mas columnas segun el ancho.
   Selector compuesto para ganar por especificidad a .menu-native base
   (906) sin depender del orden en la hoja. */
.menu-native.menu-native--grupos { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
@media (min-width: 640px) {
  .menu-native.menu-native--grupos { grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
}
@media (min-width: 980px) {
  .menu-native.menu-native--grupos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mi-hoja, .mi-velo, .mi-puerta-scrim { transition: none !important; }
  .mi-puerta:hover .mi-puerta-scrim, .mi-puerta:focus-visible .mi-puerta-scrim { background: linear-gradient(175deg, rgba(26, 21, 17, 0.12) 32%, rgba(26, 21, 17, 0.9) 100%); }
}

/* ---- Mi lista (B3, 2026-09-09): "enlistar el pedido mientras lo ves" que
   pidio el cliente. D1: vive en pantalla, no manda WhatsApp. El panel
   reutiliza .mi-hoja/.mi-velo -una segunda instancia, ver menu.html/menu.js-
   asi que no hace falta CSS nuevo para el propio cajon, solo su contenido. */
.mi-lista-add {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 0 0 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--acc);
  background: none;
  color: var(--acc);
  font-family: var(--heavy);
  font-size: 0.85rem;
  cursor: pointer;
}
.mi-lista-contador {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  /* M2 2026-09-13: por encima de .mi-velo (80), no debajo -si no, se
     encendia detras del oscurecido de la hoja y "añadir" no mostraba nada
     (hallazgo real, ver informe). */
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 46px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 0;
  background: var(--brasa);
  color: var(--brasa-ink);
  font-family: var(--heavy);
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(10, 8, 6, 0.35);
}
/* Un display de autor (flex, arriba) gana sobre el [hidden] del navegador
   -mismo hallazgo ya documentado en .pedido-total[hidden] de este archivo. */
.mi-lista-contador[hidden] { display: none; }
.mi-lista-cuerpo h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 0 0 0.8rem; }
.mi-lista-items { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.7rem; }
.mi-lista-fila { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.6rem; }
.mi-lista-fila-nombre { font-size: 0.86rem; }
.mi-lista-fila-nombre em { display: block; font-style: normal; color: var(--peltre); font-size: 0.76rem; }
.mi-lista-fila-cant { display: flex; align-items: center; gap: 0.5rem; }
.mi-lista-cant { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(244, 236, 220, 0.16); background: var(--carbon-3); color: var(--crema); cursor: pointer; }
.mi-lista-fila-precio { font-family: var(--heavy); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.mi-lista-total { display: flex; justify-content: space-between; font-family: var(--heavy); font-size: 1rem; border-top: 1px solid rgba(244, 236, 220, 0.16); padding-top: 0.8rem; margin: 0; }
.mi-lista-total b { color: var(--brasa); }
body[data-theme="light"] .mi-lista-total b { color: var(--brasa-texto); }
.mi-lista-vacia { color: var(--peltre); font-size: 0.86rem; line-height: 1.6; }
.mi-lista-acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.mi-lista-acciones .btn { flex: 1; min-width: 8rem; }
.mi-lista-vaciar { background: none; border: 0; color: var(--peltre); font-size: 0.8rem; text-decoration: underline; cursor: pointer; }
/* ============ /P3 ============ */
/* ============ P1 · PORTADA GRUPO PRO CYB — rediseño 2026-08 ============
   Especificación: docs/superpowers/specs/2026-08-25-portada-grupo-pro-cyb-design.md
   Bloque nuevo, no reescribe reglas existentes. */

/* --- PENDIENTE: Satoshi Light autoalojada -----------------------------
   api.fontshare.com fue inalcanzable desde este entorno el 2026-08-25
   (timeout de red, confirmado también en el propio sitio de Fontshare).
   El contraste editorial "grande y delicado" del lead del hero queda
   pendiente: por ahora el lead usa la tipografía base del sitio, sin
   degradar nada (no hay ningún archivo roto referenciado). Cuando haya
   red o Gabriel entregue el archivo, se agrega aquí:

   @font-face {
     font-family: "Satoshi Light";
     src: url("assets/fonts/satoshi-light.woff2") format("woff2");
     font-weight: 300;
     font-display: swap;
   }
   .p1-lead-font { font-family: "Satoshi Light", var(--heavy); font-weight: 300; }
------------------------------------------------------------------------- */

/* --- Contenedor del hero: relative+overflow:hidden, heredado del bloque
   retirado. Sin esto, el numeral fantasma (right negativo a propósito) y
   .p1-hero-photo (position:absolute) pierden su ancla de posicionamiento
   y el numeral desborda la página en vez de recortarse contra el borde. --- */
.corp-masthead--index {
  position: relative;
  overflow: hidden;
}
.corp-masthead-numeral {
  position: absolute;
  top: clamp(-2.4rem, -5vw, -1rem);
  right: clamp(-1.6rem, -3vw, -0.4rem);
  font-family: var(--heavy);
  font-weight: 900;
  font-size: clamp(9rem, 26vw, 16rem);
  line-height: 1;
  color: rgba(244, 236, 220, 0.05);
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

/* --- Hero: foto real a sangre + degradado, una sola columna --- */
.p1-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.p1-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.p1-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26, 21, 17, 0.55) 0%,
    rgba(26, 21, 17, 0.75) 45%,
    var(--carbon) 92%
  );
}
.p1-hero-body {
  position: relative;
  max-width: 42rem;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.p1-hero-body .lead {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.5;
}
.p1-hero-body .corp-h1,
.despacho-body h3,
.p1-proof-intro {
  text-wrap: balance;
}

/* --- Despacho: cinco marcas, cinco documentos, un mismo sistema de fila --- */
.despacho-list {
  display: flex;
  flex-direction: column;
}
.despacho-row {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-block: clamp(2.2rem, 5vw, 3.2rem);
  border-top: 1px solid rgba(244, 236, 220, 0.14);
  text-decoration: none;
}
.despacho-row:first-child { border-top: none; }
@media (min-width: 760px) {
  .despacho-row { flex-direction: row; align-items: stretch; gap: 2.4rem; }
  .despacho-row.reverse { flex-direction: row-reverse; }
}

.despacho-media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: var(--carbon-3);
}
@media (min-width: 760px) {
  .despacho-media { width: 42%; }
}
.despacho-media img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}
/* Borde "perforado": linea punteada superpuesta, sin imagen ni clip-path */
.despacho-media.perforated::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background-image: linear-gradient(rgba(244, 236, 220, 0.35) 55%, transparent 0%);
  background-size: 1px 9px;
  background-repeat: repeat-y;
}
@media (max-width: 759px) {
  .despacho-media.perforated::after {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 1px;
    background-image: linear-gradient(90deg, rgba(244, 236, 220, 0.35) 55%, transparent 0%);
    background-size: 9px 1px;
    background-repeat: repeat-x;
  }
}

.despacho-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.4rem 0.2rem;
  min-width: 0;
}
.despacho-body.tabular {
  background: var(--carbon-3);
  border-radius: 4px;
  padding: 1.4rem 1.6rem;
}
.despacho-num {
  font-family: var(--heavy);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.despacho-body h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 800;
  margin: 0.15rem 0 0.1rem;
  color: var(--crema);
}
.despacho-body p {
  color: var(--peltre);
  font-size: 0.92rem;
  max-width: 42ch;
  margin: 0;
}
.despacho-body p em {
  font-style: normal;
  color: var(--crema);
  border-bottom: 1px dashed var(--peltre);
}
.despacho-stamp {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 0.6rem;
  border: 2px solid currentColor;
  border-radius: 6px;
  padding: 0.5em 0.9em;
  font-family: var(--heavy);
  font-weight: 900;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.despacho-row:nth-child(odd) .despacho-stamp { transform: rotate(-2.5deg); }
.despacho-row:nth-child(even) .despacho-stamp { transform: rotate(2deg); }
.despacho-row:hover .despacho-stamp, .despacho-row:focus-visible .despacho-stamp {
  background: rgba(244, 236, 220, 0.07);
  transform: rotate(0deg);
}

/* Lista tabular (Guarnicion, Rocave): filas de producto + estado */
.despacho-rowlist { margin-top: 0.4rem; }
.despacho-rowlist-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: 1px dashed rgba(244, 236, 220, 0.15);
  font-size: 0.88rem;
}
.despacho-rowlist-item:first-child { border-top: none; }
/* El nombre del producto se queda en crema — heredar el color de marca de
   la fila (pensado para el numeral/borde/sello) lo dejaba con bajo
   contraste contra --carbon-3, confirmado en revisión visual (hallazgo
   P1-portada-2026-08-25 §gstack-design-review). El acento de marca sigue
   vivo en .despacho-num y .despacho-stamp, no hace falta repetirlo aquí. */
.despacho-rowlist-item span:first-child { color: var(--crema); }
.despacho-rowlist-item span:last-child { color: var(--peltre); font-family: "SFMono-Regular", Consolas, monospace; }

@media (prefers-reduced-motion: reduce) {
  .despacho-stamp { transform: none !important; }
  .despacho-row:hover .despacho-stamp, .despacho-row:focus-visible .despacho-stamp { transform: none; }
}

/* --- Banda de prueba: diagrama de Uruapan, no cifras infladas --- */
.p1-proof { text-align: center; padding-block: clamp(2.5rem, 6vw, 4rem); }
.p1-proof-intro {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--crema);
  max-width: 30ch;
  margin: 0 auto 1.6rem;
}
.p1-proof-map {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.p1-proof-note {
  font-size: 0.82rem;
  color: var(--peltre);
  opacity: 0.8;
  max-width: 46ch;
  margin: 1.4rem auto 0;
}

/* ============ /P1 ============ */
/* ============ P5 · GUARNICIÓN MÓVIL — arreglo 2026-08 ============
   Bug en vivo reportado por Gabriel: "los pngs se enciman en el texto" en
   la-guarnicion.html en móvil. Reproducido y medido con agent-browser a
   375px: el empaque (.gu-package, dentro de .gu-stage) se solapaba con el
   texto de hasta 3 paneles a la vez (hasta 78px de intersección vertical
   medida), entre scrollY ≈1554 y ≈2900 — ver tabla en la auditoría.

   Causa: .gu-stage (línea 2392) es position:sticky en TODAS las anchuras.
   El media query de móvil (max-width:899px, línea 2404) solo cambiaba
   order/margin-bottom; nunca desactivaba el sticky. En escritorio esto
   funciona porque el empaque vive en su propia columna: el texto sube por
   OTRA columna y nunca comparte espacio horizontal con él. En móvil no hay
   segunda columna — el empaque y los 4 paneles comparten el mismo ancho
   completo, así que en cuanto el empaque se queda fijo en pantalla, el
   texto que sube detrás pasa forzosamente por debajo/detrás de la foto.
   No es arreglable subiendo z-index al texto: taparía la foto en vez del
   texto, y el efecto "se lee la ficha sobre el empaque" solo tiene sentido
   con las dos cosas visibles a la vez, algo que una sola columna angosta
   no puede dar sin rehacer el componente (fuera de alcance de este arreglo).

   Se desactiva el sticky SOLO en móvil. El escenario (repisa, empaque,
   degradado, callouts) queda igual — solo deja de quedarse fijo en
   pantalla y pasa a la misma fila que ya tenía en el grid (order:-1 de
   arriba lo deja primero, antes de los paneles). La lógica de "qué
   anotación está activa" (guarnicion.js, IntersectionObserver) sigue
   funcionando sin cambios; lo que se pierde es verla actualizarse EN VIVO
   mientras se lee cada panel, porque el empaque ya no está en pantalla al
   mismo tiempo que el panel 2/3/4. Es el costo necesario para que el texto
   nunca quede tapado — Gabriel puede pedir una alternativa con más
   trabajo (p.ej. una miniatura fija aparte) si esto no le convence. */
@media (max-width: 899px) {
  .gu-stage {
    position: static;
  }
}
/* ============ /P5 ============ */

/* ============ P1B · PORTADA GRUPO PRO CYB — rediseño 2026-08 ============
   Reconstrucción dirigida por el kit de referencias:
   documentacion/referencias/2026-08-25-kit-portada-grupo-pro-cyb.md (P1A).
   Bloque nuevo: no reescribe :root, ni el bloque P1 anterior (línea 5087),
   ni ninguna regla compartida (.btn, .container, .section, .site-header).

   Alcance real de este frente, tal como lo acota el kit: de las 3 secciones
   de la portada que vienen del esqueleto hero→pilares→remate, el Hero
   (.corp-masthead--index) YA sigue el patrón correcto (foto fija, sin
   video — decisión de Gabriel, 2026-08-28) y NO se toca. Quedan dos:

     · #marcas (.despacho-list) — pasa de 3 fotos + 2 tarjetas tabulares
       (inconsistente, dos marcas sin imagen) a las 5 marcas con SU
       logotipo, normalizado ÓPTICAMENTE (no por caja: cada logo trae su
       propia relación de aspecto real, de 1:1 a 5.47:1 — medido con
       Pillow sobre los WebP de sitio/assets/brands/).

     · .trust-band.p1-proof — el caso de fallo ("terrible", Gabriel
       2026-08-28): SVG con 5 puntos a mano sobre ejes inventados, titular
       en negativo ("no somos..."), nota a pie que se disculpa. Se
       reemplaza por una tabla de los 5 puntos reales de Uruapan con sus
       coordenadas (ya en config.js vía mapEmbed, extraídas en el kit §1),
       titular en afirmativo, cero disculpas.

   .section#negocio y .section.club-band#club quedan fuera — el kit (§8)
   confirma que no son parte de este esqueleto. */

/* --- E1 · Tokens ---------------------------------------------------
   Gemelos -rgb para poder usar rgba(var(--x-rgb), alpha) en vez de
   hardcodear rgb a mano (técnica de skyclinics, kit §3) — se usan en la
   barra de "escaneo" del remate (E6) y en los degradados de las tarjetas
   de marca. Los 5 colores de banda del índice de marcas, que hoy solo
   existen como hex sueltos en el HTML (style="--c: #f2a9a9" etc.), se
   proponen aquí como tokens; no se toca el HTML existente que ya usa el
   hex directo — estos tokens son para el CSS nuevo de este bloque. */
:root {
  --carbon-rgb: 26, 21, 17;
  --crema-rgb: 244, 236, 220;
  --brasa-rgb: 232, 98, 29;

  --marca-botanas: #f2a9a9;
  --marca-botanas-rgb: 242, 169, 169;
  --marca-tostadas: #c53a40;
  --marca-tostadas-rgb: 197, 58, 64;
  /* --marca-tostadas de TEXTO sobre --carbon da 3.50:1 (bajo el 4.5:1 de
     WCAG AA) — medido al revisar este frente. Mismo caso que --brasa-texto/
     --exito-texto en el bloque de tokens de arriba: se sube L en HSL
     (0.50->0.60) manteniendo el matiz, hasta 4.84:1. Se usa en .despacho-num
     y .despacho-stamp de la fila de Tostadas (antes usaban el hex de
     --marca-tostadas directo), y como color del pin de Tostadas en el mapa.
     (Citaba tambien .p1b-punto-num, clase retirada el 2026-08-29 al rehacer
     el remate con el mapa real.) */
  --marca-tostadas-texto: #d16166;
  --marca-guarnicion: #d97a1f;
  --marca-guarnicion-rgb: 217, 122, 31;
  --marca-rocave: #c9a24b;
  --marca-rocave-rgb: 201, 162, 75;
  --marca-meduse: #638dbe;
  --marca-meduse-rgb: 99, 141, 190;
}

/* --- E2/E3 · Marcas: logotipo en vez de foto/tabla, óptico no por caja ---
   Placa clara u oscura ELEGIDA POR DATO, no por alternancia decorativa: se
   midió con Pillow (luminancia media de los píxeles opacos de cada WebP,
   sitio/assets/brands/) qué tinta necesita qué fondo para leerse:

     marca        | archivo                 | tinta          | placa
     Del Abuelo   | logo-botanas-ink.webp   | carbón (54)    | clara
     Tostadas     | logo-tostadas.webp      | color, ya clara(155) | oscura
     Guarnición   | logo-guarnicion.webp    | fondo propio crema (RGB, sin alfa) | clara
     Rocave       | logo-rocave.webp        | crema (233)    | oscura
     Meduse       | logo-meduse-color.webp  | azul marca (101 — buen contraste sobre crema) | clara

   object-fit:contain (no cover, como las fotos que sustituye) porque las 5
   traen su propia relación de aspecto real, de 1:1 (Meduse) a 5.47:1
   (Rocave) — forzar la misma anchura o altura las habría dejado
   desequilibradas (instrucción de Gabriel, 2026-08-28). --mark-scale es el
   único ajuste fino previsto por marca, para cuando el "peso" óptico de un
   logo necesite un empujón tras revisión visual; por defecto no hace nada. */
.despacho-media.brandmark {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  min-height: 0;
  padding: clamp(1.7rem, 6vw, 2.5rem);
}
.despacho-media.brandmark img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  transform: scale(var(--mark-scale, 1));
}
.despacho-media.brandmark--dark { background: var(--carbon-3); }
.despacho-media.brandmark--light { background: var(--crema); }

@media (prefers-reduced-motion: no-preference) {
  .despacho-row:hover .brandmark img,
  .despacho-row:focus-visible .brandmark img {
    transform: scale(calc(var(--mark-scale, 1) * 1.035));
  }
  .despacho-media.brandmark img {
    transition: transform var(--dur-reveal) var(--ease-out);
  }
}

/* .despacho-num/.despacho-stamp medían 11.52px/12.16px en el bloque P1 —
   por debajo del mínimo legible (hallazgo de la puerta de medición de este
   frente, antes/después en el informe P1B). No se toca la regla del bloque
   P1: se sube aquí, que gana por ir después con la misma especificidad. */
.despacho-num,
.despacho-stamp {
  font-size: 0.82rem;
}

/* --- Remate: el mapa real de Uruapan ----------------------------------
   Sustituye a la tabla de coordenadas de la primera pasada de P1B, que
   Gabriel rechazó con la pregunta correcta: «¿de qué le sirve a un usuario
   eso?». Una coordenada en grados no ubica a nadie; un mapa sí.

   La geometría (calles, río Cupatitzio, parques) se genera en build con
   scripts/generar-mapa-uruapan.py a partir de datos de OpenStreetMap, y se
   sirve como SVG estático desde assets/map/. En runtime no se pide nada a
   ningún dominio externo: la CSP (img-src 'self') lo bloquearía, y además
   un mapa que depende de una red ajena es un mapa que algún día no carga.

   Dos encuadres del MISMO lugar, porque un mapa 3:2 a 375px mide 250px de
   alto y ahí los cinco puntos se amontonan: apaisado en escritorio,
   vertical en móvil. Cada encuadre tiene su propio recuadro geográfico y
   por tanto su propio juego de porcentajes; se intercambian abajo, en el
   punto de quiebre. Los porcentajes NO se escriben a mano: los imprime el
   generador. Si una sucursal se muda, se corrige config.js, se vuelve a
   correr el script y se pegan los valores nuevos. */

/* El suelo propio de la sección. El diagnóstico de las referencias fue que
   la portada se veía plana porque nada era más oscuro que el fondo: el
   rango de valor entero vivía en ~22 niveles alrededor de L24, y --carbon
   mide L22. Aquí el suelo baja a L~13 y la luz se mete en dos focos
   pequeños, uno cálido y uno frío, con el centro FUERA del lienzo — que es
   la diferencia entre "una mancha con centro visible" y "luz que entra".
   --brasa es color de grupo, no de una marca, así que no rompe la igualdad
   entre las cinco. */
.p1b-remate {
  --suelo: #14100d;
  position: relative;
  background:
    radial-gradient(95% 62% at 88% -12%, rgba(var(--brasa-rgb), 0.22), transparent 62%),
    radial-gradient(75% 58% at 6% 108%, rgba(99, 141, 190, 0.14), transparent 64%),
    var(--suelo);
}

.p1b-remate-head {
  max-width: 40rem;
  margin-bottom: clamp(1.8rem, 5vw, 2.8rem);
}
.p1b-remate-head h2 {
  font-family: var(--heavy);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.98;
  font-size: clamp(2rem, 6.4vw, 3.6rem);
  margin: 0 0 0.9rem;
  color: var(--crema);
  text-wrap: balance;
}
/* El recurso de o-scs: las dos líneas del titular con el MISMO tamaño, peso
   y familia, y la segunda a la mitad de luz. Medido en la referencia: blanco
   puro contra rgb(126,126,126) sobre negro, o sea 49%. Tiene que hacerse con
   color y nunca con font-weight — el proyecto sólo tiene un archivo de
   Satoshi (peso 900), así que un peso menor lo sintetizaría el navegador y
   las dos líneas dejarían de casar. 0.52 sobre este suelo da 7.4:1. */
.p1b-fantasma { color: rgba(var(--crema-rgb), 0.52); }

.p1b-remate-head p {
  color: var(--peltre);
  max-width: 46ch;
  margin: 0;
}

/* --- El marco del mapa ---------------------------------------------------
   Sangra a todo el ancho: .section sólo tiene padding vertical, así que no
   hacen falta márgenes negativos (y se evita el clásico desborde de 100vw
   contra la barra de scroll en Windows).

   aspect-ratio fija la caja a la misma proporción que el SVG, que es lo que
   permite colocar los pines en % y que caigan exactos. max-height encoge la
   caja entera manteniendo la proporción — nunca recorta la imagen, así que
   los pines siguen alineados a cualquier tamaño. */
.p1b-mapa {
  margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
}
.p1b-mapa-marco {
  position: relative;
  width: 100%;
  /* El alto se limita por el ANCHO, no con max-height. Con aspect-ratio, un
     max-height no encoge la caja: recorta el alto y deja el ancho igual, la
     proporcion se rompe y object-fit:cover empieza a recortar el mapa — con
     lo que los pines, que se colocan en % del marco, dejan de caer sobre su
     calle. Limitando el ancho, el alto lo deduce aspect-ratio y la
     correspondencia entre porcentaje y terreno se conserva a cualquier
     tamano. 1.5 es la proporcion del SVG de escritorio (1200/800). */
  max-width: min(1500px, calc(78vh * 1.5));
  aspect-ratio: 1200 / 800;
  margin-inline: auto;
  overflow: hidden;
  /* La ciudad se desvanece contra los cuatro bordes: dice que Uruapan
     CONTINÚA fuera del encuadre. Es el recurso del desvanecido de o-scs,
     movido al único sitio donde no miente — sobre la lista sería insinuar
     que hay más de cinco domicilios, y no los hay.
     Es máscara, no filter: no cuesta repintado y no aparece en el conteo
     de `caro` de la puerta de medición. */
  -webkit-mask-image: radial-gradient(118% 108% at 50% 50%, #000 52%, transparent 97%);
  mask-image: radial-gradient(118% 108% at 50% 50%, #000 52%, transparent 97%);
}
.p1b-mapa-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Pines ---------------------------------------------------------------
   Marcadores visuales, no enlaces: los destinos vivos están en la lista de
   abajo. Así no se duplica cada enlace en el árbol de accesibilidad y no
   queda un objetivo táctil de 26px como única vía de acceso a un domicilio.
   Van con aria-hidden en el HTML; el <img> lleva el alt que describe dónde
   está cada uno. */
.p1b-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid var(--punto-color);
  background: rgba(var(--carbon-rgb), 0.55);
  color: var(--punto-color);
}
.p1b-pin::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--punto-color);
}
.p1b-pin-eti {
  position: absolute;
  left: 34px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--heavy);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--crema);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7);
}

/* La Casa (02) y Tostadas (04) están a 261 m reales: en el mapa quedan a
   menos de 5% de altura y sus discos casi se tocan. Es el problema clásico
   de un mapa de verdad, y la regla también es la clásica: se separan las
   ETIQUETAS, jamás los puntos — mover un punto para que "se vea mejor"
   falsifica el único dato que sostiene la sección. */
.p1b-pin--la-casa .p1b-pin-eti { top: -2px; transform: none; }
.p1b-pin--tostadas .p1b-pin-eti { top: auto; bottom: -4px; transform: none; }
/* Terraza queda pegada al borde inferior y Meduse al poniente: sus
   etiquetas se van hacia dentro para no salirse del marco. */
.p1b-pin--terraza .p1b-pin-eti { top: auto; bottom: 4px; transform: none; }
.p1b-pin--meduse .p1b-pin-eti { left: auto; right: 34px; }
/* Ver el bloque movil: ahi se cambia por la version corta. */
.p1b-eti-corta { display: none; }

/* El retículo: dos hilos que cruzan el marco entero por el punto activo.
   Instrumento de agrimensor, no rosa de los vientos — una rosa náutica
   sobre una sola ciudad sería disfraz de escala global. Se clipan contra
   .p1b-mapa-marco (overflow:hidden), por eso pueden medir 100vmax. */
.p1b-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vmax;
  height: 1px;
  transform: translate(-50%, -50%);
  background: currentColor;
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out);
  pointer-events: none;
}
.p1b-pin-cruz {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 100vmax;
  transform: translate(-50%, -50%);
  background: currentColor;
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out);
  pointer-events: none;
}
.p1b-pin.is-active::before,
.p1b-pin.is-active .p1b-pin-cruz { opacity: 0.34; }
.p1b-pin.is-active {
  background: rgba(var(--carbon-rgb), 0.2);
  box-shadow: 0 0 0 6px rgba(var(--carbon-rgb), 0.35);
}

/* --- Las dos marcas que salen de la ciudad -------------------------------
   La Guarnición y Rocave no tienen domicilio de atención. La versión
   anterior lo resolvía con una nota al pie que pedía perdón («no reparten
   desde un mostrador propio»); ésta lo dibuja: dos vectores que SALEN del
   encuadre, en la misma dirección en que sale la carretera. Su naturaleza
   es distribuir, y eso se afirma, no se confiesa. */
.p1b-salida {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--heavy);
  font-weight: 900;
  /* 0.82rem = 13.12px. No baja de 13px: es el minimo legible que mide la
     puerta de este frente, y estas dos etiquetas son las unicas que nombran
     a La Guarnicion y Rocave en toda la seccion. */
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--punto-color);
  white-space: nowrap;
}
.p1b-salida::before {
  content: "";
  width: clamp(28px, 6vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.p1b-salida b {
  font-weight: inherit;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7);
}
.p1b-salida--guarnicion {
  --punto-color: #d97a1f;
  left: 2%;
  top: 26%;
  flex-direction: row-reverse;
}
.p1b-salida--guarnicion::before {
  background: linear-gradient(270deg, transparent, currentColor);
}
.p1b-salida--rocave {
  --punto-color: #c9a24b;
  right: 2%;
  bottom: 22%;
  flex-direction: row-reverse;
}

/* --- La lista: las cinco marcas, agrupadas ------------------------------
   No se numeran los domicilios 01…05: esos números ya identifican a las
   cinco MARCAS en #marcas, y tres de los cinco domicilios son la misma
   marca. La lista conserva la numeración del grupo y cuelga de cada marca
   sus direcciones, así que las cinco aparecen exactamente una vez y en
   igualdad — incluidas las dos que no tienen mostrador. */
.p1b-marcas-mapa {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(var(--crema-rgb), 0.14);
}
.p1b-mm {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  grid-template-areas:
    "num marca"
    ".   tipo"
    ".   dirs";
  gap: 0.15rem 0.6rem;
  padding: 1.1rem 0.2rem;
  border-bottom: 1px solid rgba(var(--crema-rgb), 0.14);
}
.p1b-mm-num {
  grid-area: num;
  font-family: var(--heavy);
  font-weight: 900;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--punto-color);
}
.p1b-mm-marca {
  grid-area: marca;
  font-family: var(--display);
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  color: var(--crema);
}
.p1b-mm-tipo {
  grid-area: tipo;
  font-size: 0.84rem;
  color: var(--peltre);
}
.p1b-mm-dirs {
  grid-area: dirs;
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}
.p1b-mm-dirs a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.8rem;
  row-gap: 0.1rem;
  /* 0.72rem arriba y abajo + la línea de texto dejan la fila por encima de
     44px de alto, que es el mínimo táctil. Es la vía de acceso real a cada
     domicilio, así que aquí no se puede apretar. */
  padding: 0.72rem 0.6rem;
  margin-inline: -0.6rem;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-quick) var(--ease-out);
}
.p1b-mm-dirs b {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--crema);
}
.p1b-mm-dirs span {
  font-size: 0.85rem;
  color: var(--peltre);
}
.p1b-mm-dirs a:hover,
.p1b-mm-dirs a:focus-visible {
  background: rgba(var(--crema-rgb), 0.06);
}

/* Las dos marcas que no atienden en mostrador. Su enlace lleva una flecha que
   apunta hacia FUERA, el mismo gesto que sus dos vectores sobre el mapa: lo
   suyo es salir de la ciudad. No se les baja el tono ni el tamano respecto a
   las otras tres -eso las subordinaria-; cambia el signo, no el rango. */
.p1b-mm--sale .p1b-mm-dirs b::after {
  content: " ↗"; /* flecha noreste, caracter literal: el escape CSS
     97 se serializaba mal al pasar por el generador */
  color: var(--punto-color);
}

/* La fila que corresponde al punto activo del mapa. La referencia usa una
   barra naranja SÓLIDA, no un tinte del 10% — la timidez de ese tinte era
   parte de la queja. Con el naranja pleno el texto DEBE ir en carbón:
   crema sobre brasa da 2.90:1 y reprueba AA; carbón sobre brasa da 5.37:1
   y pasa. */
.p1b-mm-dirs li.is-active a {
  background: var(--brasa);
}
.p1b-mm-dirs li.is-active b,
.p1b-mm-dirs li.is-active span { color: var(--brasa-ink); }

.p1b-mapa-fuente {
  margin: 1.4rem 0 0;
  font-size: 0.85rem; /* 13.6px — ver nota de minimo legible arriba */
  color: var(--peltre);
  max-width: 60ch;
}
.p1b-mapa-fuente a { color: inherit; }

/* --- Encuadre vertical: móvil -------------------------------------------
   Otro recuadro geográfico, así que otros porcentajes. Los imprime
   scripts/generar-mapa-uruapan.py — no se escriben a mano. */
@media (max-width: 767px) {
  /* 0.75 es la proporcion del SVG vertical (750/1000). Mismo criterio. */
  .p1b-mapa-marco { aspect-ratio: 750 / 1000; max-width: min(100%, calc(70vh * 0.75)); }
  .p1b-pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  /* 0.78rem = 12.48px seguiria por debajo del minimo; 0.82rem = 13.12px. */
  .p1b-pin-eti { left: 28px; font-size: 0.82rem; letter-spacing: 0.02em; }

  /* En el encuadre vertical, La Casa y Tostadas caen al 69% de un ancho de
     375px: su etiqueta hacia la derecha se salia del marco (medido: borde
     derecho en 425px). Se voltean hacia dentro. Meduse ya iba volteada por
     estar al poniente. */
  .p1b-pin--la-casa .p1b-pin-eti,
  .p1b-pin--tostadas .p1b-pin-eti {
    left: auto;
    right: 28px;
    text-align: right;
  }
  .p1b-pin--meduse .p1b-pin-eti { right: auto; left: 28px; text-align: left; }

  /* "Tostadas del Compa's" es la unica etiqueta larga -las otras cuatro son
     nombres de sucursal- y a este ancho no cabe. Se acorta; el nombre
     completo esta en la lista, justo debajo. */
  .p1b-eti-larga { display: none; }
  .p1b-eti-corta { display: inline; }

  .p1b-salida { font-size: 0.82rem; letter-spacing: 0.05em; }
}

/* --- Quiebre hacia arriba: 900px, el dominante del proyecto -------------- */
@media (min-width: 900px) {
  .p1b-mm {
    grid-template-columns: 3rem minmax(14rem, 18rem) 1fr;
    grid-template-areas:
      "num marca dirs"
      "num tipo  dirs";
    align-items: start;
    gap: 0.2rem 1.4rem;
    padding: 1.3rem 0.2rem;
  }
  .p1b-mm-dirs { margin-top: 0; }
  .p1b-pin-eti { font-size: 0.82rem; }
}

/* Movimiento: el bucle que enciende un punto a la vez lo lleva
   sitio/index.js. Sin JS o con reduced-motion no se activa ninguno, y la
   sección sigue completa — las cinco marcas, sus domicilios y el mapa con
   los cinco pines visibles. Nada de lo que se entiende depende del estado
   activo, que es la regla que ya seguía el bloque anterior. */
@media (prefers-reduced-motion: reduce) {
  .p1b-pin::before,
  .p1b-pin-cruz,
  .p1b-mm-dirs a { transition: none; }
}

/* Posiciones de los cinco domicilios. Generadas — ver cabecera del bloque. */
.p1b-pin--latino { --x: 53.61%; --y: 49.89%; --punto-color: #f2a9a9; }
.p1b-pin--la-casa { --x: 61.21%; --y: 10.12%; --punto-color: #f2a9a9; }
.p1b-pin--terraza { --x: 54.93%; --y: 89.88%; --punto-color: #f2a9a9; }
.p1b-pin--tostadas { --x: 61.11%; --y: 15.01%; --punto-color: #d16166; }
.p1b-pin--meduse { --x: 38.79%; --y: 54.63%; --punto-color: #638dbe; }
@media (max-width: 767px) {
  .p1b-pin--latino { --x: 56.19%; --y: 49.91%; }
  .p1b-pin--la-casa { --x: 69.22%; --y: 15.82%; }
  .p1b-pin--terraza { --x: 58.46%; --y: 84.18%; }
  .p1b-pin--tostadas { --x: 69.04%; --y: 20.01%; }
  .p1b-pin--meduse { --x: 30.78%; --y: 53.97%; }
}

/* --- Hero: el lienzo de luz -------------------------------------------
   Reconstruido el 2026-08-29. Gabriel rechazó la versión anterior porque la
   portada «vive aún como su base»; esto responde al diagnóstico que salió de
   medir las dos referencias pixel a pixel.

   EL DIAGNÓSTICO, QUE NO ERA LA ESTRUCTURA. La portada se veía plana porque
   su rango de valor entero vivía en ~22 niveles alrededor de L24, y --carbon
   mide L22: *nada en la página era más oscuro que el fondo*. o-scs.com es
   99 % negro absoluto con un 1 % que llega a blanco puro; skyclinics vive en
   30 niveles pero colocados arriba del todo. Las dos se comprometen con un
   extremo y meten el contraste en un área pequeña. Por eso aquí el suelo baja
   a L~10 y toda la luz se concentra en un objeto.

   CINCO ARCOS, NO UN ANILLO. El aro se parte en cinco segmentos de 66°
   separados por 6° de casi-negro, uno por color de marca y TODOS a la misma
   intensidad. La igualdad entre las cinco queda garantizada por construcción
   y no por promesa: no hay forma de que una destaque sin editar el gradiente.
   (La referencia sí tiene crestas y apagones a lo largo de su aro; eso es lo
   único que no se copia, porque aquí rompería la igualdad.)

   SIN filter NI backdrop-filter. Todo el difuminado se hace con paradas
   suaves de máscara, que no cuestan repintado. Es la única vía compatible con
   `caro: 0` en móvil, y vale igual en escritorio.

   EL TEXTO VA ENCIMA SIN VELO. Ni scrim, ni text-shadow, ni caja. Funciona
   sólo porque el relleno del disco se queda por debajo de L16. Quien suba ese
   relleno tiene que volver a medir el contraste del h1. */

.corp-masthead--index {
  --suelo: #0c0907;
  /* Diámetro del aro. Verificado contra las dos capturas de la referencia:
     en 1440×900 da min(504, 979) = 504 px (medido allí: 500 px); en 375×812
     da min(455, 255) = 255 px (medido: ~250 px). Una sola expresión cubre
     los dos casos. */
  --aro: min(56vh, 68vw);
  /* Centro del aro. La reticula sale de este MISMO punto: si se mueve uno hay
     que mover el otro, o los radios dejan de nacer del objeto que iluminan.
     En escritorio se corre a la derecha porque el texto de este hero va
     alineado a la izquierda -a diferencia del de la referencia, que va
     centrado- y un aro centrado detrás de un texto a la izquierda queda
     desequilibrado. En móvil el texto ocupa todo el ancho y vuelve al centro. */
  --aro-x: 50%;
  --aro-y: 44%;

  display: grid;
  align-content: center;
  min-height: 84vh;
  min-height: 84svh;
  /* .corp-masthead pone clamp(3.2rem, 8vw, 6rem) arriba, pensado para un hero
     con menos piezas. Aqui hay cejilla + titular de 3 lineas + parrafo de 4 +
     dos botones + la regla de espectro, y con el relleno compartido el hero se
     iba a 1077px contra un viewport de 900. Se aprieta SOLO en la portada:
     .corp-masthead a secas la usa 404.html, donde el titular es corto y el
     relleno original esta bien. */
  padding-block: clamp(2.2rem, 5vw, 3.4rem);
  /* No se oscurecen los bordes: se ACLARA el centro. Es el hallazgo que más
     cuesta creer de las referencias — lo que parece viñeta es un
     levantamiento radial de 8-14 niveles sobre un suelo ya muy oscuro. La
     versión anterior hacía lo contrario (una foto clara con scrim encima), y
     de ahí salía el rango L17-39 que aplanaba todo. */
  background:
    radial-gradient(circle at var(--aro-x) var(--aro-y), #191209 0%, #120d09 38%, var(--suelo) 72%);
}

.p1b-lienzo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.p1b-lienzo > * {
  position: absolute;
  left: var(--aro-x);
  top: var(--aro-y);
  translate: -50% -50%;
  pointer-events: none;
}

/* Los cinco arcos, en el orden del índice de marcas: 01 Del Abuelo, 02 Tostadas,
   03 Guarnición, 04 Rocave, 05 Meduse. Empieza en -90deg (arriba) y gira en
   sentido horario, así que se leen como se numeran. Los 6° de #0c0907 entre
   arco y arco son la separación: sin ellos los colores se funden y deja de
   contarse que son cinco. */
.p1b-aro,
.p1b-halo {
  width: var(--aro);
  aspect-ratio: 1;
  border-radius: 50%;
}

/* El ARO lleva los cortes: es la linea nitida, y es donde se cuenta
   que son cinco. */
.p1b-aro {
  background: conic-gradient(
    from -90deg,
    #f2a9a9 0deg 66deg,    transparent 66deg 72deg,
    #c53a40 72deg 138deg,  transparent 138deg 144deg,
    #d97a1f 144deg 210deg, transparent 210deg 216deg,
    #c9a24b 216deg 282deg, transparent 282deg 288deg,
    #638dbe 288deg 354deg, transparent 354deg 360deg
  );
}
/* Los huecos van TRANSPARENTES, no en color de suelo. Con un suelo opaco los
   halos -que son copias del mismo cono, mas grandes- pintaban cunas negras
   duras que cortaban el resplandor en seis radios; se veia un aro roto, no
   cinco segmentos. Transparente, el halo simplemente no emite donde no hay
   arco, que es lo que hace una fuente de luz real. */

/* Los HALOS no llevan los cortes. Primero se probo con ellos y quedaba mal:
   un hueco de 6 grados en una copia al doble de tamano proyecta un rayo
   oscuro largo, y se leia como artefacto -un aro rajado- en vez de como
   separacion. La luz difunde: el resplandor es un lavado continuo por los
   cinco colores, y la cuenta de cinco la lleva la linea nitida del aro.
   Cada color ocupa el mismo arco, asi que la igualdad se mantiene. */
.p1b-halo {
  background: conic-gradient(
    from -90deg,
    #f2a9a9 0deg,   #f2a9a9 50deg,
    #c53a40 88deg,  #c53a40 122deg,
    #d97a1f 160deg, #d97a1f 194deg,
    #c9a24b 232deg, #c9a24b 266deg,
    #638dbe 304deg, #638dbe 338deg,
    #f2a9a9 360deg
  );
}

/* La línea del aro: una corona finísima recortada del cono. */
.p1b-aro {
  -webkit-mask: radial-gradient(closest-side, transparent 0 97.4%, #000 98.2% 99.3%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 0 97.4%, #000 98.2% 99.3%, transparent 100%);
}

/* Halos: dos copias del mismo cono, más grandes y con la máscara BLANDA. Una
   parada suave de máscara ES difuminado, y sale gratis — mientras que
   filter:blur() sobre una caja de 500 px repinta en cada scroll, y
   box-shadow ni siquiera sirve aquí (la máscara recorta también la sombra). */
.p1b-halo--cerca {
  scale: 1.16;
  opacity: 0.5;
  -webkit-mask: radial-gradient(closest-side, transparent 0 72%, rgba(0, 0, 0, 0.85) 88%, rgba(0, 0, 0, 0.95) 95%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 0 72%, rgba(0, 0, 0, 0.85) 88%, rgba(0, 0, 0, 0.95) 95%, transparent 100%);
}
.p1b-halo--amplio {
  scale: 2;
  opacity: 0.14;
  -webkit-mask: radial-gradient(closest-side, transparent 0 28%, rgba(0, 0, 0, 0.5) 52%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 0 28%, rgba(0, 0, 0, 0.5) 52%, transparent 100%);
}

/* Relleno del disco: dos temperaturas enfrentadas, que es lo que da volumen
   al negro en las dos referencias. Cálido arriba con --brasa (color de GRUPO,
   no de una marca) y frío abajo con el azul de Meduse a un 8 % — a esa alpha
   nadie lo lee como «la marca Meduse», se lee como contraluz.
   TECHO DURO: el relleno no puede pasar de ~L16 sobre el suelo. Es lo que
   permite que el h1 en --crema cruce por encima sin velo. */
.p1b-disco {
  width: var(--aro);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    rgba(var(--brasa-rgb), 0.05) 0%,
    rgba(var(--crema-rgb), 0.017) 46%,
    rgba(99, 141, 190, 0.08) 100%
  );
}

/* Retícula radial: 12 radios cada 30° y circunferencias concéntricas, saliendo
   del mismo centro que el aro. Es lo que ata el objeto de luz al lienzo entero
   en vez de dejarlo flotando como un adorno, y cuesta cero bytes: dos
   degradados nativos, ni un SVG ni una petición.
   Los 0.08deg dan ~1 px de grosor a la distancia a la que se ve el radio. */
.p1b-reticula {
  width: calc(var(--aro) * 3.1);
  aspect-ratio: 1;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(var(--crema-rgb), 0.07) 0deg 0.08deg,
      transparent 0.08deg 30deg
    ),
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0 calc(var(--aro) * 0.47),
      rgba(var(--crema-rgb), 0.032) calc(var(--aro) * 0.47) calc(var(--aro) * 0.474)
    );
  -webkit-mask: radial-gradient(closest-side, #000 10%, rgba(0, 0, 0, 0.55) 42%, transparent 78%);
  mask: radial-gradient(closest-side, #000 10%, rgba(0, 0, 0, 0.55) 42%, transparent 78%);
}

/* Grano: un degradado sintético de este recorrido bandea en 8 bits, y se nota
   sobre todo en los tramos oscuros, que es justo donde vive este hero. Las
   referencias no bandean porque debajo tienen textura de foto; aquí no hay
   foto, así que la textura se pone a mano.
   Es un data: URI, o sea `img-src 'self' data:` — la CSP lo permite y no es
   una petición de red. ~0.3 KB. */
.p1b-grano {
  width: 100%;
  height: 100%;
  translate: 0 0;
  left: 0;
  top: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* El contenido, por encima del lienzo. */
.corp-masthead--index .p1-hero-body {
  position: relative;
  z-index: 1;
}

/* El titular, a la escala de la referencia. Medido en o-scs @1440: la línea
   más larga ocupa el 72.7 % del viewport con un cuerpo de ~110px = 7.6vw, e
   interlineado 1.03. El .corp-h1 compartido topa en 4.8rem = 76.8px: le
   faltaba un 43 %. Se sube SÓLO en la portada — .corp-h1 lo comparte
   404.html, y ahí el titular es corto y no necesita este tamaño.
   Se quita también el max-width:16ch, que forzaba un corte de línea que no
   eligió nadie; el salto lo marca el <br> del HTML, como en la referencia. */
.corp-masthead--index .corp-h1 {
  font-size: clamp(2.7rem, 7.6vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  max-width: none;
}

/* Las dos líneas del titular con el MISMO cuerpo, peso y familia, y la segunda
   a la mitad de luz. Medido en la referencia: blanco puro contra rgb(126,126,126)
   sobre negro = 49 %.
   Tiene que hacerse con COLOR y nunca con font-weight: el proyecto sólo tiene
   un archivo de Satoshi (peso 900), así que un peso menor lo sintetizaría el
   navegador y las dos líneas dejarían de casar. 0.52 sobre este suelo da
   9.6:1, muy por encima de AA. */
.corp-masthead--index .p1b-fantasma {
  color: rgba(var(--crema-rgb), 0.52);
}

.corp-masthead--index .lead {
  color: var(--peltre);
}

/* Móvil: el texto ocupa todo el ancho, así que el aro vuelve al centro y sube
   un poco. Nada se apaga — la retícula de la referencia tampoco se simplifica
   en 375, y aquí no hay nada que apagar: cero filtros, cero imágenes. */
@media (max-width: 767px) {
  .corp-masthead--index {
    --aro-x: 50%;
    --aro-y: 40%;
    min-height: 78vh;
    min-height: 78svh;
  }
}

@media (min-width: 900px) {
  .corp-masthead--index {
    --aro-x: 68%;
    --aro-y: 48%;
  }
}

/* Una respiración muy lenta del halo, sólo en escritorio. Afecta a los cinco
   arcos por igual (es opacidad sobre el elemento entero), así que no rompe la
   igualdad entre marcas. Es animación de opacidad: la compone la GPU sin
   repintar. Aun así no se corre en móvil, donde no compensa el gasto. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .p1b-halo--cerca {
    animation: p1b-respira 14s ease-in-out infinite alternate;
  }
}
@keyframes p1b-respira {
  from { opacity: 0.4; }
  to { opacity: 0.62; }
}

/* NOTA sobre reglas que quedaron sin uso en el bloque P1 (línea ~5087):
   .p1-hero-photo, .p1-hero-photo img, .p1-hero-photo::after y
   .corp-masthead-numeral ya no tienen elemento en el HTML — la foto y el
   numeral salieron del hero el 2026-08-29. No se borran de aquel bloque por
   la misma razón por la que el bloque «INDEX (refinado)» se dejó anotado en
   vez de suprimido (kit P1A, Anexo): borrar dentro del bloque de otro frente
   ensucia el diff y dificulta el rollback. Quedan inertes y anotadas. */

/* ======================================================================
   EL RESTO DE LA PORTADA — 2026-08-29
   Gabriel: «el Hero ya se ve mejor, pero todo lo demás en sí sigue igual».
   Cierto. Estos son los cuatro problemas medidos que lo causaban, con su
   arreglo. Todo va acotado a la portada: ni una regla compartida se
   reescribe.
   ====================================================================== */

/* --- 1 · LA ESCALA ESTABA INVERTIDA -----------------------------------
   Medido a 1440 antes de esto: h1 102.4px / h2 de sección 40px / nombre de
   marca 33.6px. Es decir, el rótulo de la sección pesaba MÁS que el nombre
   de la marca, que es el contenido real de la página. En o-scs el titular
   de cada pilar mide 60px contra un rótulo de sección de 20px: el pilar
   pesa el TRIPLE que el rótulo. Aquí pesaba 0.84 veces.

   Y había dos voces sin regla: el h1 en Satoshi 900 y los tres h2 en
   Bogista 400. Ninguna de las dos referencias mezcla familias en sus
   titulares. Se unifica: Satoshi para la estructura (rótulos y titulares
   de sección), Bogista para el NOMBRE de cada marca — que es donde el
   serif sí aporta contraste de rol, porque distingue el nombre propio de
   la interfaz que lo rodea. */

/* El rótulo de sección baja a rótulo de verdad. #marcas ya usa .eyebrow
   directamente en su h2; esto alcanza a los de #negocio y #club. */
/* OJO: #club NO es exclusivo de la portada — del-abuelo.html tiene su
   propia seccion con id="club" y class="club-band" (linea 278 de esa pagina,
   territorio del frente P4). Todo lo de este bloque que toque #club va anclado
   a body[data-brand="grupo"], que solo lleva index.html, para no meterse en
   una pagina de marca. #negocio si es exclusivo de la portada (comprobado:
   grep 'id="negocio"' solo devuelve index.html), pero se ancla igual por
   coherencia. */
body[data-brand="grupo"] #negocio > .container > * > h2,
body[data-brand="grupo"] #club > .container > * > h2,
body[data-brand="grupo"] #negocio h2.section-titulo,
body[data-brand="grupo"] #club h2.section-titulo {
  font-family: var(--heavy);
  font-weight: 900;
  /* Ojo con pasarse: en #marcas el h2 SI baja a rotulo, porque las cinco
     filas se explican solas. Aqui no. "Construimos algo juntos?" y
     "Novedades de todas las marcas" son la PROPUESTA de su seccion, no una
     etiqueta — y encima de cada una ya hay una cejilla. Dejarlas en 1.35rem
     apilaba dos rotulos y ninguna pieza lideraba el bloque. Se quedan por
     debajo del nombre de marca (60.8px) y muy por encima de la cejilla. */
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--crema);
  text-wrap: balance;
}

/* Y el nombre de marca sube al rango que le corresponde: de 33.6px a 61px
   a 1440. El clamp viejo (1.5rem, 3.4vw, 2.1rem) se congelaba a los 988px
   de ancho; éste no se congela hasta ~2000px. */
#marcas .despacho-body h3 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 0.9rem + 3.4vw, 3.8rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0.1rem 0 0.25rem;
}

/* --- 2 · EL COLOR DE MARCA VIVÍA EN EL 2% DE LOS PÍXELES ---------------
   El color de cada marca sólo lo consumían el numeral (13px de texto) y el
   borde de 2px del sello. El fondo de la fila, el filete y el nombre eran
   idénticos en las cinco: a un metro de distancia, cinco filas del mismo
   color. Los cinco tokens --marca-*-rgb estaban declarados en este mismo
   bloque desde la primera pasada y no se usaba ni uno.

   Ahora el color va a SUPERFICIE. Sigue sin jerarquizar: las cinco reciben
   exactamente el mismo tratamiento con su propio color. */
#marcas .despacho-row {
  position: relative;
  isolation: isolate;
  padding-inline: clamp(0.9rem, 3vw, 2rem);
  border-top: 1px solid rgba(var(--marca-rgb), 0.28);
  background:
    linear-gradient(100deg, rgba(var(--marca-rgb), 0.085) 0%, transparent 52%),
    linear-gradient(180deg, transparent 0%, rgba(var(--carbon-rgb), 0.5) 100%);
  transition: background var(--dur-reveal) var(--ease-out);
}
/* En las filas volteadas la luz entra por el otro lado, para que el gesto
   acompane a la maqueta en vez de contradecirla. */
#marcas .despacho-row.reverse {
  background:
    linear-gradient(260deg, rgba(var(--marca-rgb), 0.085) 0%, transparent 52%),
    linear-gradient(180deg, transparent 0%, rgba(var(--carbon-rgb), 0.5) 100%);
}
#marcas .despacho-row:hover,
#marcas .despacho-row:focus-visible {
  background:
    linear-gradient(100deg, rgba(var(--marca-rgb), 0.16) 0%, transparent 62%),
    linear-gradient(180deg, transparent 0%, rgba(var(--carbon-rgb), 0.5) 100%);
}
#marcas .despacho-row.reverse:hover,
#marcas .despacho-row.reverse:focus-visible {
  background:
    linear-gradient(260deg, rgba(var(--marca-rgb), 0.16) 0%, transparent 62%),
    linear-gradient(180deg, transparent 0%, rgba(var(--carbon-rgb), 0.5) 100%);
}

/* El numeral de cada marca, a tamaño de titular. Es el único número grande
   que la portada puede permitirse sin inventar nada: son cinco marcas y son
   cinco. Va detrás del contenido (z-index -1 dentro del `isolation` de la
   fila, así que no se escapa a otras capas) y en el color de la marca a
   baja alpha: se lee como marca de agua, no compite con el nombre. */
#marcas .despacho-row::before {
  content: attr(data-num);
  position: absolute;
  z-index: -1;
  top: clamp(0.1rem, 0.5vw, 0.8rem);
  right: clamp(0.4rem, 2vw, 1.6rem);
  font-family: var(--heavy);
  font-weight: 900;
  /* El minimo baja a 2.6rem por una razon medida, no estetica: a 375px la
     fila tiene 35.2px de padding superior y la caja del logotipo empieza
     justo ahi. Con el minimo anterior (3.4rem) el numeral medaa 43.5px de
     alto, se metia 8px por debajo del logotipo y la caja opaca le cortaba
     los pies — se leia como error, no como marca de agua. A 2.6rem mide
     33.3px y cabe entero en su propia banda. */
  font-size: clamp(2.6rem, 11vw, 8rem);
  line-height: 0.8;
  color: rgba(var(--marca-rgb), 0.2);
  pointer-events: none;
  user-select: none;
}
#marcas .despacho-row.reverse::before {
  right: auto;
  left: clamp(0.4rem, 2vw, 1.6rem);
}

/* El numeral chico de la fila deja de repetir el numero -ya esta gigante
   detras- y se queda con la etiqueta de despacho, que es lo que aporta. */
#marcas .despacho-num {
  color: rgba(var(--marca-rgb), 0.95);
}

/* --- 3 · LOS CINCO LOGOTIPOS APLASTADOS EN LA MISMA CAJA ---------------
   La «normalización óptica» de la primera pasada impuso aspect-ratio 4/3 a
   los cinco, así que los cinco logotipos acababan en una caja de 390x272px
   idéntica, en la misma posición. Eso no es normalizar: es aplanar.
   Los cinco van de 1:1 (Meduse) a 5.47:1 (Rocave) — medido con Pillow sobre
   los propios WebP. Ahora cada obra dicta su caja, vía --marca-ratio, y su
   ancho de columna, vía --marca-span. Varía el ANCHO y la PROPORCIÓN, nunca
   el tamaño del tipo ni el tratamiento: rompe la uniformidad sin jerarquizar. */
#marcas .despacho-media.brandmark {
  aspect-ratio: var(--marca-ratio, 4 / 3);
}
@media (min-width: 760px) {
  #marcas .despacho-media {
    width: var(--marca-span, 42%);
    /* .despacho-row usa align-items:stretch, asi que la caja del logotipo se
       estiraba hasta la altura de la fila y aspect-ratio no podia con ella.
       Se notaba en La Guarnicion y Rocave, las dos filas con lista tabular:
       su texto es mas alto, y arrastraba la caja a 1.09 y 1.49 en vez de las
       1.5 y 3.0 que pide cada logotipo. Con align-self la caja conserva su
       proporcion y el texto crece por su cuenta. */
    align-self: flex-start;
  }
}

/* --- 4 · EL FONDO NO CAMBIABA EN 8000px DE DOCUMENTO -------------------
   --carbon (#1a1511) contra --carbon-2 (#261f18) da 1.12:1: un escalón
   invisible. Todo el separador entre secciones eran 18 filetes de 1px a
   rgba(crema, 0.10-0.14), cada uno a ~1.6:1 contra el fondo. Ese apilado de
   hairlines ERA el «documento educado».

   Las referencias no separan con filetes: cada bloque tiene su propia
   superficie y el corte es seco. Aquí, cuatro suelos distintos en cuatro
   pantallas, cada uno con su par de luces cálida/fría con el centro FUERA
   del lienzo — que es la diferencia entre «una mancha con centro visible» y
   «luz que entra». */
#marcas {
  background:
    radial-gradient(80% 50% at 4% -6%, rgba(var(--brasa-rgb), 0.09), transparent 62%),
    linear-gradient(180deg, var(--suelo-marcas-top) 0%, var(--suelo-marcas-bot) 100%);
  --suelo-marcas-top: #100c09;
  --suelo-marcas-bot: #1c1712;
  padding-block: clamp(1.6rem, 3.5vw, 3rem);
}
/* El rótulo de la sección respira antes de la primera marca. */
#marcas > .container > .eyebrow {
  margin-bottom: clamp(1rem, 2.5vw, 1.6rem);
}

body[data-brand="grupo"] #negocio {
  /* Un petróleo: es el único suelo de la página con sesgo frío, y por eso
     el bloque de negocio se lee como otro territorio sin necesitar título. */
  background:
    radial-gradient(70% 55% at 96% -8%, rgba(99, 141, 190, 0.13), transparent 64%),
    radial-gradient(60% 50% at 2% 104%, rgba(var(--brasa-rgb), 0.08), transparent 62%),
    #0e1417;
}
body[data-brand="grupo"] #club {
  background:
    radial-gradient(85% 60% at 50% -14%, rgba(var(--brasa-rgb), 0.16), transparent 66%),
    #171009;
}

/* Los filetes de 1px de estas dos bandas ya no hacen falta: ahora separa la
   superficie. Se apagan aquí, sin tocar la regla compartida. */
body[data-brand="grupo"] #negocio.negocio-band,
body[data-brand="grupo"] #club.club-band {
  border-block-color: transparent;
}

/* --- 5 · EL MOVIMIENTO ERA DE 14 PÍXELES -------------------------------
   El único movimiento de la portada era opacity 0->1 + translateY(14px) en
   las cinco filas de marca. 14px sobre una fila de 455px de alto = 3.1% de
   su propia altura: imperceptible. Se sube a un recorrido que se ve, y se
   escalona con más aire entre filas. El bloque global de
   prefers-reduced-motion (styles.css:1887) ya lo neutraliza; no hace falta
   guarda nueva. */
#marcas [data-reveal] {
  transform: translateY(clamp(26px, 5vh, 54px)) scale(0.988);
  transform-origin: 50% 0;
}
#marcas [data-reveal].is-revealed {
  transform: none;
}

/* --- 6 · EL SELLO ROTADO ----------------------------------------------
   La rotación de 2.5 grados leía como calcomanía, no como sistema: era el
   único gesto de autor de la página y apuntaba en dirección contraria a
   todo lo demás. Se cambia por lo que un CTA sí debe hacer — indicar
   dirección. La flecha se desplaza al apuntar la fila. */
#marcas .despacho-row .despacho-stamp {
  transform: none;
  gap: 0.5rem;
  align-items: center;
  background: rgba(var(--marca-rgb), 0.1);
  border-color: rgba(var(--marca-rgb), 0.8);
  transition: background var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out);
}
#marcas .despacho-row .despacho-stamp::after {
  content: "→";
  display: inline-block;
  transition: transform var(--dur-quick) var(--ease-out);
}
#marcas .despacho-row:hover .despacho-stamp,
#marcas .despacho-row:focus-visible .despacho-stamp {
  transform: none;
  background: rgba(var(--marca-rgb), 0.2);
  border-color: rgba(var(--marca-rgb), 1);
}
#marcas .despacho-row:hover .despacho-stamp::after,
#marcas .despacho-row:focus-visible .despacho-stamp::after {
  transform: translateX(5px);
}
@media (prefers-reduced-motion: reduce) {
  #marcas .despacho-row:hover .despacho-stamp::after,
  #marcas .despacho-row:focus-visible .despacho-stamp::after { transform: none; }
}

/* --- 7 · #negocio Y #club ERAN LA MISMA MAQUETA, DOS VECES --------------
   Las dos: mismo fondo --carbon-2, mismo filete de 1px, mismo grid 1fr 1fr,
   misma columna de texto a la izquierda y mismo panel crema a la derecha.
   Medido, sumaban 1765px a 1440 y 2850px a 375 — un tercio de la portada
   movil leyendose como un solo bloque larguisimo.

   Ya tienen suelos distintos (arriba). Aqui se separan tambien por EJE:
   negocio da mas peso al texto -es donde se explica que hay cinco vias de
   trabajar con el grupo-, y el club se comprime, porque lo unico que pide
   es un correo y no necesita media pantalla para pedirlo.

   Se ataca con la proporcion del grid, no con el color del panel: .panel es
   regla compartida por las once paginas y sus campos de formulario estan
   calculados para fondo crema. Cambiarlo desde aqui arriesgaria el
   contraste de los inputs, que es justo donde no se puede fallar. */
@media (min-width: 880px) {
  body[data-brand="grupo"] #negocio .negocio-grid { grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
  body[data-brand="grupo"] #club .club-grid { grid-template-columns: 1fr 0.8fr; gap: clamp(1.6rem, 3.5vw, 2.8rem); }
}

/* El ritmo vertical era uniforme -.section pone el mismo padding a las tres
   secciones- asi que ninguna pesaba mas que otra. Se reparte desigual, que
   es lo que hace un diseno y no una hoja de estilos: el club se aprieta,
   negocio se queda en medio, y el remate (el mapa) ya respira arriba. */
body[data-brand="grupo"] #club { padding-block: clamp(2rem, 4.5vw, 3.2rem); }
body[data-brand="grupo"] #negocio { padding-block: clamp(2.6rem, 6vw, 4.4rem); }

/* La promesa del club y su nota son texto de apoyo: no necesitan el mismo
   aire que el parrafo principal. */
body[data-brand="grupo"] #club .club-promesa { margin-block: 0.9rem; }
body[data-brand="grupo"] #club .club-note { margin-bottom: 0; }

/* --- 8 · EL OBJETO MÁS LUMINOSO DE LA PORTADA ERA UN FORMULARIO ---------
   Medido: los dos .panel crema ocupaban 544x740 y 544x669 px. La tarjeta de
   marca más visible mide 470x384. Es decir, cada formulario pesaba 2.2-2.4
   veces más superficie clara que la marca más grande — en la portada de un
   grupo cuyo mensaje es «cinco marcas iguales».

   POR QUÉ NO SE FUSIONARON LOS DOS FORMULARIOS
   La idea inicial era fundirlos en uno con selector de intención. Al leer
   main.js y worker/ resultó estar mal: no son el mismo formulario con otra
   etiqueta. El del Club manda status "active" y marketingOptIn tomado de una
   casilla propia obligatoria; el de negocio manda status "lead_b2b" y
   marketingOptIn SIEMPRE false. El comentario de main.js:768 lo dice: son
   consentimientos distintos y la hoja tiene que poder demostrar cuál se dio
   (LFPDPPP). Fundirlos deja dos salidas y las dos son malas: un lead B2B con
   marketingOptIn true que nadie pidió, o un alta del Club con false a la que
   no se le puede escribir nunca. Se descartó.

   LO QUE SÍ SE HACE
   Invertir el panel en la portada: de crema sólido a superficie oscura con
   borde. Cero campos tocados, cero payload tocado, cero JS. Sólo color.

   PERO EL COLOR AQUÍ NO ES COSMÉTICO: dentro de este panel viven las dos
   casillas de consentimiento, el enlace al aviso de privacidad y los mensajes
   de error. Todas las reglas de abajo existen porque cada una de esas piezas
   estaba calculada para fondo crema y sobre oscuro habría quedado ilegible o
   invisible. Van todos los casos, no los evidentes. */

body[data-brand="grupo"] #negocio .panel,
body[data-brand="grupo"] #club .panel {
  /* --carbon-2 y no --carbon-3, por una razon medida. Los tokens
     --error-texto y --exito-texto estan calculados en :root para dar >=4.5:1
     sobre la familia --carbon. Con el panel en --carbon-3 (#322a20, el mas
     claro de los tres) el mensaje de error caia a 4.0:1 y reprobaba AA —
     justo el texto que le dice al visitante que su envio fallo. Sobre
     --carbon-2 los mismos tokens vuelven a 4.7:1 sin inventar colores
     nuevos. Contra los suelos de estas dos secciones (#0e1417 y #171009)
     sigue leyendose como superficie levantada. */
  background: var(--carbon-2);
  color: var(--crema);
  /* 0.38 y no 0.16, medido: WCAG 1.4.11 pide 3:1 para el limite de un
     componente, y la alpha minima que lo alcanza contra el panel Y contra
     los dos suelos de seccion es 0.36. Con 0.16 el borde daba 1.59:1 y el
     panel -que ya solo contrasta 1.14:1 contra su fondo- no se leia como
     superficie. */
  border: 1px solid rgba(var(--crema-rgb), 0.38);
  /* La sombra de 50px que levantaba el panel crema sobre el fondo oscuro ya
     no tiene nada que levantar: el panel ES oscuro. Se queda una mínima. */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Etiquetas de campo. Heredaban --tinta (#2b2119) del .panel: sobre --carbon-3
   darían 1.4:1, o sea invisibles. */
body[data-brand="grupo"] #negocio .panel label,
body[data-brand="grupo"] #club .panel label,
body[data-brand="grupo"] #negocio .panel legend,
body[data-brand="grupo"] #club .panel legend {
  color: var(--crema);
}

/* Los campos. El #fffdf7 con borde #cbbc9d es un campo claro sobre panel
   claro; aquí sería un rectángulo blanco brillante sobre oscuro — peor que
   el problema que se venía a resolver. */
body[data-brand="grupo"] #negocio .panel input:not([type="checkbox"]),
body[data-brand="grupo"] #negocio .panel select,
body[data-brand="grupo"] #negocio .panel textarea,
body[data-brand="grupo"] #club .panel input:not([type="checkbox"]),
body[data-brand="grupo"] #club .panel select,
body[data-brand="grupo"] #club .panel textarea {
  background: rgba(var(--carbon-rgb), 0.55);
  border-color: rgba(var(--crema-rgb), 0.38); /* 3.04:1 contra el fondo del campo */
  color: var(--crema);
}
body[data-brand="grupo"] #negocio .panel input::placeholder,
body[data-brand="grupo"] #negocio .panel textarea::placeholder,
body[data-brand="grupo"] #club .panel input::placeholder,
body[data-brand="grupo"] #club .panel textarea::placeholder {
  color: var(--peltre);
  opacity: 1; /* Firefox lo baja a 0.54 por defecto y hunde el contraste */
}
/* El foco ya era --brasa y funciona igual de bien sobre oscuro; sólo se sube
   el borde para que el campo enfocado no dependa sólo del anillo. */
body[data-brand="grupo"] #negocio .panel input:focus,
body[data-brand="grupo"] #negocio .panel select:focus,
body[data-brand="grupo"] #negocio .panel textarea:focus,
body[data-brand="grupo"] #club .panel input:focus,
body[data-brand="grupo"] #club .panel select:focus,
body[data-brand="grupo"] #club .panel textarea:focus {
  border-color: var(--brasa);
  background: rgba(var(--carbon-rgb), 0.75);
}

/* Texto de las casillas: era --tinta-suave (#5c4f40), pensado para crema. */
body[data-brand="grupo"] #negocio .panel .check-row,
body[data-brand="grupo"] #club .panel .check-row {
  color: var(--peltre);
}

/* Recuadro de marcas del Club y su separador punteado. */
body[data-brand="grupo"] #club .panel .brand-checks {
  border-color: rgba(var(--crema-rgb), 0.22);
}
body[data-brand="grupo"] #club .panel .brand-check-all {
  border-bottom-color: rgba(var(--crema-rgb), 0.22);
}

/* --- Las tres piezas legales, que es donde no se puede fallar ----------- */

/* Enlace al aviso de privacidad. Estaba en --brasa-texto (#a8410c), una
   variante OSCURA calculada a propósito para el panel crema; sobre
   --carbon-3 da 2.2:1 y desaparece. Vuelve al brasa claro, que sobre este
   fondo sí pasa. */
body[data-brand="grupo"] #negocio .panel .consent-legal a,
body[data-brand="grupo"] #club .panel .consent-legal a,
body[data-brand="grupo"] #negocio .panel .text-link,
body[data-brand="grupo"] #club .panel .text-link {
  color: var(--brasa-hover);
}

/* Errores de validación. .panel .field-error los fija en --error-panel
   (#96271b), otra variante calculada para fondo claro. Sobre oscuro vuelve
   la variante para carbón. */
body[data-brand="grupo"] #negocio .panel .field-error,
body[data-brand="grupo"] #club .panel .field-error {
  color: var(--error-texto);
}

/* Línea de estado: igual que arriba. .panel las fija en --exito-panel y
   --error-panel, las dos para fondo claro. Es el mensaje que le dice al
   visitante si su envío salió o falló: si queda ilegible, el formulario
   funciona pero nadie lo sabe. */
body[data-brand="grupo"] #negocio .panel .status-line[data-status="success"],
body[data-brand="grupo"] #club .panel .status-line[data-status="success"] {
  color: var(--exito-texto);
}
body[data-brand="grupo"] #negocio .panel .status-line[data-status="error"],
body[data-brand="grupo"] #club .panel .status-line[data-status="error"] {
  color: var(--error-texto);
}

/* Pistas de campo y nota al pie del panel. */
body[data-brand="grupo"] #negocio .panel .field-hint,
body[data-brand="grupo"] #club .panel .field-hint,
body[data-brand="grupo"] #negocio .panel .panel-note,
body[data-brand="grupo"] #club .panel .panel-note {
  color: var(--peltre);
}

/* --- 9 · LA PANTALLA CLARA --------------------------------------------
   Autorizado por Gabriel el 2026-08-29, tras preguntar si convenía pasar la
   portada entera a fondo claro. La respuesta medida fue que no: 262 reglas del
   sistema asumen oscuro (57 `color: var(--crema)`, 82 `--peltre`, 57
   `rgba(244,236,220,…)`, 54 fondos `--carbon`), y sobre todo el hero es una
   FUENTE DE LUZ — aro, halos y retícula son emisión contra oscuridad. Sobre
   crema un resplandor no resplandece: queda un círculo plano. No es
   recolorear, es volver a concebirlo.

   Lo que sí se toma de la idea es el recurso de la referencia: o-scs es 99 %
   negro absoluto **y tiene exactamente una pantalla clara**. Esa inversión
   única es lo que parte el sitio en dos y le da columna vertebral.

   Se invierte #negocio y no otra, por contenido: parte la portada en el
   público que viene a comer (arriba) y el que viene a hacer negocio (abajo).
   Son dos conversaciones distintas y hasta ahora se leían igual.

   El panel del formulario se queda OSCURO: sobre la sección clara es una
   contra-inversión que refuerza el gesto. Sus contrastes internos no cambian
   —se miden contra su propio fondo— y ya están verificados en la adenda 4. */

body[data-brand="grupo"] #negocio {
  /* Las dos temperaturas, como en todas las secciones, pero al revés: sobre
     claro los focos restan luz en vez de sumarla. */
  background:
    radial-gradient(72% 55% at 96% -10%, rgba(var(--brasa-rgb), 0.13), transparent 62%),
    radial-gradient(58% 48% at 2% 104%, rgba(99, 141, 190, 0.12), transparent 60%),
    var(--crema);
  color: var(--tinta);
}

/* El titular y el cuerpo. Sin esto heredarían --crema sobre --crema. */
body[data-brand="grupo"] #negocio > .container > * > h2,
body[data-brand="grupo"] #negocio h2.section-titulo {
  color: var(--tinta);
}
body[data-brand="grupo"] #negocio .negocio-intro p {
  color: var(--tinta-suave);
}

/* La cejilla va en --brasa-texto, la variante OSCURA del naranja que el
   proyecto ya tiene calculada justo para esto: --brasa sobre crema da
   2.89:1 y reprueba; --brasa-texto (#a8410c) da 5.22:1. Es el mismo patrón
   que usan las dos páginas de marca que ya son claras. */
body[data-brand="grupo"] #negocio .eyebrow {
  color: var(--brasa-texto);
}

/* Lista de vías de trabajo. El cuadrito marcador se queda en --brasa: es un
   fondo de 7x7px, no texto, y sobre crema se ve perfectamente. */
body[data-brand="grupo"] #negocio .negocio-vias li {
  color: var(--tinta-suave);
}
body[data-brand="grupo"] #negocio .negocio-vias strong {
  color: var(--tinta);
}

/* El botón secundario es un contorno de currentColor pensado para fondo
   oscuro. Se le da el tratamiento claro que el proyecto ya definió para
   body[data-theme="light"], sin tocar aquella regla. */
body[data-brand="grupo"] #negocio .btn-secondary {
  color: var(--tinta);
  box-shadow: inset 0 0 0 2px rgba(43, 33, 25, 0.4);
}
body[data-brand="grupo"] #negocio .btn-secondary:hover {
  box-shadow: inset 0 0 0 2px var(--tinta);
}
/* El primario no necesita nada: --brasa es color de FONDO y su texto es
   --brasa-ink (#1a1511), que da 5.34:1 sobre el naranja en cualquier
   contexto. */

/* La costura con la sección de arriba (el mapa, oscuro) y la de abajo (el
   club, oscuro). El corte es SECO a propósito: las referencias no ponen
   banda de transición entre suelos, y es justo el canto lo que hace que la
   inversión se lea como una pantalla nueva y no como un degradado. Sólo se
   apaga el filete de 1px, que ahí ya no separa nada. */
body[data-brand="grupo"] #negocio.negocio-band {
  border-block-color: transparent;
}

/* --- Arreglo de un fallo propio, encontrado al auditar este cambio ------
   .negocio-nota vive DENTRO del panel del formulario y usa --tinta-suave
   (#5c4f40), que funcionaba cuando el panel era crema. Al pasar el panel a
   oscuro (adenda 4) quedó en 2.05:1 — reprueba AA de calle, y es el texto
   que aclara que enviar el formulario no suscribe a nada y que las
   franquicias son un modelo en desarrollo. Se apuntó a `.panel-note`, que
   no existe; la clase real es `.negocio-nota`.
   El panel sigue oscuro aunque la sección sea clara, así que el color
   correcto aquí es --peltre, no --tinta-suave. */
body[data-brand="grupo"] #negocio .panel .negocio-nota {
  color: var(--peltre);
  font-size: 0.85rem; /* 13.6px: 0.8rem daba 12.8px, bajo el mínimo legible */
}
/* ============ /P1B ============ */

/* === M9 2026-10-05 · Rocave · inicio ===
   Rocave en blanco: una botella que recorre los cuatro productos.
   Sustituye por completo el bloque P6 (escenas de 100svh, una por producto,
   sobre carbon). Kit: documentacion/referencias/2026-10-05-kit-rocave-blanco.md
   (Klimt Wine = el recorrido; STILL. = como se ve eso sobre fondo claro).
   Informe: documentacion/auditorias/tanda-2026-10-03/M9-rocave-fondo-blanco.md

   Lo que NO cambia respecto a P6 y por eso se conserva con su nombre: las
   tres curvas y las cinco duraciones de los revelados (--ro-asentar,
   --ro-t-mascara...; Gabriel no pidio cambiar ninguna), la escala
   tipografica fluida, el sistema de particulas y el seguimiento del mouse
   (A3/A4, ahora una sola nube en el escenario) y el patron "nunca capturar
   el scroll": scroll nativo del documento con position:sticky, sin snap.

   Reglas COMPARTIDAS que este bloque reescribe acotadas a Rocave (el resto de
   styles.css no se toca; ver tambien las tres que se retiraron de otros
   sitios del archivo, declaradas en el registro de decisiones):
     · body[data-theme="light"] pone fondo crema: aqui es blanco (#fff).
     · .site-header / .mobile-actionbar usan color-mix(): se redeclaran en
       rgba() plano (el detector de fondos oscuros no lee color-mix).
     · body[data-brand="rocave"] :focus-visible (peltre, invisible sobre
       blanco).
     · .visually-hidden: es utilidad compartida (la usa meduse.html); vivia en
       el bloque P6 y se conserva aqui identica. */

/* ---------- 1. Tokens ---------- */
body[data-brand="rocave"] {
  --gold: #c9a24b;
  --gold-soft: #e8cf94;
  --ro-tinta: #14100c; /* el carbon de la marca, ahora como texto */
  --ro-suave: #5a5148; /* texto secundario: 7.9:1 sobre blanco */
  --ro-linea: rgba(20, 16, 12, 0.14);
  --ro-oro-texto: #7a5f1f; /* el oro como TEXTO: 6.0:1. El #c9a24b sobre blanco da 2.4:1 */
  --ro-header-h: 69px; /* 62px min-height del header + 6px border-top + 1px borde */
  --ro-S: calc(100svh - var(--ro-header-h)); /* alto del escenario fijado */
  --ro-gutter: clamp(16px, 1.4vw, 20px);
  --ro-barra: 0px; /* alto de la barra fija del movil; sube a 58px mas abajo */
  --ro-banda-h: 4.6rem;
  --ro-cols: minmax(0, 21rem) minmax(0, 1fr) minmax(0, 24rem); /* columnas de la escena de producto */

  /* Curvas y duraciones de los revelados: las de P6, sin tocar. */
  --ro-asentar: cubic-bezier(0.19, 1, 0.22, 1); /* expo.out: entradas */
  --ro-cortina: cubic-bezier(0.77, 0, 0.18, 1); /* expo.inOut */
  --ro-rebote: cubic-bezier(0.34, 1.56, 0.64, 1); /* back.out(1.7) */
  --ro-t-narrativa: 1.1s; /* revelado base */
  --ro-t-mascara: 1.3s; /* lineas de texto enmascaradas */
  --ro-t-cortina: 1.4s;
  --ro-t-barra: 1.2s;
  --ro-t-ui: 0.45s; /* hover, foco, botones */
  --ro-paso: 80ms; /* escalonado por --ro-retardo */

  /* Escala tipografica fluida. Suelo en 13px: nunca por debajo (leyenda de alcohol incluida). */
  --ro-display: clamp(56px, 10vw, 144px); /* titulo de producto y titular de portada (Klimt) */
  --ro-h2: clamp(30px, 4.5vw, 62px);
  --ro-h3: clamp(22px, 2.8vw, 34px);
  --ro-cuerpo: clamp(16px, 1.5vw, 19px);
  --ro-chico: clamp(14px, 1.3vw, 16px);
  --ro-etiqueta: clamp(13px, 1.1vw, 15px);
}
/* Tema claro de la pagina, en BLANCO (el base pone crema). El carbon de la
   marca pasa a texto; el acento de texto es el oro oscuro, no el oro de relleno. */
body[data-brand="rocave"][data-theme="light"] {
  background: #ffffff;
  color: var(--ro-tinta);
  border-top-color: var(--gold);
  --acc-texto: var(--ro-oro-texto);
}
body[data-brand="rocave"] :focus-visible { outline-color: var(--ro-oro-texto); }
body[data-brand="rocave"] .breadcrumb::before { color: var(--gold); }

/* Cabecera, pie, recorrido de marcas y barra del movil: el sitio ya trae las
   variantes claras (Meduse y La Guarnicion las usan). Aqui solo se pasan a
   rgba() plano y a blanco. */
body[data-brand="rocave"] .site-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--ro-linea);
}
body[data-brand="rocave"] .site-footer { color: var(--ro-suave); border-top-color: var(--ro-linea); }
body[data-brand="rocave"] .brand-tour { border-top-color: var(--ro-linea); }
body[data-brand="rocave"][data-theme="light"] .mobile-actionbar {
  background: rgba(255, 255, 255, 0.97);
  border-top-color: var(--ro-linea);
}
body[data-brand="rocave"] .indice-trigger { background: transparent; } /* un fondo translucido no lo lee ningun medidor de contraste */
body[data-brand="rocave"] .mobile-actionbar a { color: var(--ro-tinta); }
/* El primer hueco es el CTA (Distribuir): oro con texto carbon, 7.9:1. */
body[data-brand="rocave"] .mobile-actionbar a:first-child { background: var(--gold); color: var(--ro-tinta); }
@media (max-width: 879px) {
  body[data-brand="rocave"] { --ro-barra: 58px; }
}

/* Utilidad compartida (la usa tambien meduse.html): #ro-anuncio,
   aria-live="polite", anuncia el producto activo sin mostrar texto. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 2. Revelados de texto: por TIEMPO, al empezar su parte quieta ----------
   Los textos NO van atados al scroll (eso es la botella, el resplandor y la
   palabra gigante, ver 4): cuando la botella queda de pie, rocave.js marca la
   seccion .activa y estos revelados corren con las curvas de siempre. Al
   salir la marcan .pasada y se van hacia arriba, mas rapido. Sin la clase
   html.js todo queda visible (sin JavaScript la pagina se lee entera). */
@media (prefers-reduced-motion: no-preference) {
  html.js body[data-brand="rocave"] .ro-parte [data-ro-revelar] {
    opacity: 0;
    transform: translateY(46px);
    transition:
      opacity var(--ro-t-narrativa) var(--ro-asentar),
      transform var(--ro-t-narrativa) var(--ro-asentar);
    transition-delay: var(--ro-retardo, 0ms);
  }
  html.js body[data-brand="rocave"] .ro-parte.activa [data-ro-revelar],
  html.js body[data-brand="rocave"] .ro-pieza:focus-within [data-ro-revelar] {
    opacity: 1;
    transform: none;
  }
  html.js body[data-brand="rocave"] .ro-parte.pasada [data-ro-revelar] {
    opacity: 0;
    transform: translateY(-34px);
    transition-duration: 0.55s;
    transition-delay: 0ms;
  }
  html.js body[data-brand="rocave"] .ro-parte .ro-linea > span {
    transform: translateY(115%);
    transition: transform var(--ro-t-mascara) var(--ro-asentar);
    transition-delay: var(--ro-retardo, 0ms);
  }
  html.js body[data-brand="rocave"] .ro-parte.activa .ro-linea > span,
  html.js body[data-brand="rocave"] .ro-pieza:focus-within .ro-linea > span { transform: translateY(0); }
  html.js body[data-brand="rocave"] .ro-parte.pasada .ro-linea > span {
    transform: translateY(-115%);
    transition-duration: 0.6s;
    transition-delay: 0ms;
  }
}
.ro-linea { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ro-linea > span { display: block; }

/* ---------- 3. El recorrido: un contenedor, un escenario fijado, una botella ----------
   #ro-recorrido mide la suma de sus pasos (kit §7, total 940 svh con los
   valores por defecto; los escribe rocave.js como --ro-p-* y --ro-total).
   El escenario es hijo directo y su bloque contenedor es ESTE div, no <main>
   (el fallo de agosto: "se ve por detras de la pagina de jugo que algo sigue
   bajando"). Las secciones pasan por encima del escenario: la primera sube
   bajo el (margen superior negativo) y cada una mide su paso + el alto del
   escenario y se mete bajo la siguiente con margen inferior negativo, para
   que su .ro-pieza (tambien sticky, del alto del escenario) quede fijada
   exactamente durante su paso. La ultima no tiene margen negativo: esos
   ultimos --ro-S px son el tramo en que el escenario se suelta. OJO: el
   escenario NO lleva margen negativo -- el margen entra en la caja que
   position:sticky usa para decidir cuando soltar, y con -S el escenario
   colgaba S px por debajo del contenedor (medido, M1).
   svh y no dvh: la barra del navegador movil se esconde a mitad del scroll. */
.ro-recorrido {
  --ro-u: calc(1svh - (100svh - var(--ro-header-h)) / var(--ro-total, 940));
  position: relative;
  isolation: isolate;
}
.ro-escenario {
  position: sticky;
  top: var(--ro-header-h);
  height: var(--ro-S);
  overflow: hidden;
  pointer-events: none;
  --ro-botella-alto: min(calc(var(--ro-bot-svh, 68) * 1svh), 930px);
  --ro-botella-cy: 52%;
  --ro-tinte: 91 127 99;
  --ro-tinte-claro: 190 207 194;
}
.ro-escenario[data-prod="3"],
.ro-escenario[data-prod="4"] {
  /* Techo fisico de tequila y jugo: 1156 y 1120 px de alto reales; la puerta C3 los
     limita a 61 svh (se pintan por debajo de su techo sin ablandarse en retina). */
  --ro-botella-alto: min(calc(var(--ro-bot-chica, 61) * 1svh), 834px);
}
.ro-parte {
  position: relative;
  z-index: 1;
  pointer-events: none;
  scroll-margin-top: calc(var(--ro-header-h) - 12svh); /* las anclas aterrizan DENTRO de la parte quieta */
}
.ro-parte--apertura { margin-top: calc(-1 * var(--ro-S)); } /* la primera seccion sube bajo el escenario */
.ro-parte:not(:last-child) { margin-bottom: calc(-1 * var(--ro-S)); }
.ro-parte--apertura { height: calc(var(--ro-p-apertura, 100) * var(--ro-u) + var(--ro-S)); }
.ro-parte--declaracion { height: calc(var(--ro-p-declaracion, 120) * var(--ro-u) + var(--ro-S)); }
.ro-parte--producto { height: calc(var(--ro-p-producto, 180) * var(--ro-u) + var(--ro-S)); }
.ro-parte--ultima { height: calc(var(--ro-p-ultimo, 180) * var(--ro-u) + var(--ro-S)); }
.ro-pieza {
  position: sticky;
  top: var(--ro-header-h);
  height: var(--ro-S);
  padding-bottom: var(--ro-barra);
}
.ro-parte.activa a { pointer-events: auto; }

/* ---------- 4. Las capas del escenario ---------- */
/* Fondo: un resplandor por producto (STILL, medido). Fondo blanco; el color
   entra detras de la botella sin teñir la pagina. Cuatro capas apiladas, solo
   una con opacidad 1 en la parte quieta; rocave.js cruza las opacidades con
   el progreso. */
.ro-brillo {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
  background: radial-gradient(
    72% 85% at 50% var(--ro-botella-cy),
    rgb(var(--c) / var(--ro-glow-alfa, 0.19)) 0%,
    rgb(var(--c) / calc(var(--ro-glow-alfa, 0.19) * 0.42)) 42%,
    rgb(var(--c) / 0) 72%
  );
}
.ro-brillo--1 { --c: 91 127 99; opacity: 0.5; } /* verde agave */
.ro-brillo--2 { --c: 201 162 75; } /* oro */
.ro-brillo--3 { --c: 227 145 130; } /* salmon (el --ro-salmon que la marca ya usaba para el tequila) */
.ro-brillo--4 { --c: 196 62 50; } /* tomate */

/* Tipografia de display. Titular de portada: el papel de "Where Art Meets
   Wine" en Klimt (abajo a la izquierda). Palabra gigante perfilada: la de
   STILL (trazo de 1.5px, carbon al 8 %). Las dos detras de la botella. */
.ro-titular-apertura {
  position: absolute;
  left: var(--ro-gutter);
  bottom: calc(var(--ro-banda-h) + var(--ro-barra) + 0.9rem);
  margin: 0;
  max-width: 6.6em; /* dos lineas, como dice el kit: "Bebidas con / carácter". La botella pasa por delante de "con" (decision 5, ronda de ajuste 1) */
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--ro-display);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--ro-tinta);
  will-change: opacity, transform;
}
.ro-capa-prod {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  will-change: opacity, transform;
}
.ro-palabra {
  margin: 0;
  font-family: var(--heavy);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(60px, 18vw, 300px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(20, 16, 12, 0.08);
  white-space: nowrap;
  user-select: none;
}
/* El gato de la etiqueta como marca de agua teñida, en composicion asimetrica
   (tequila arriba a la derecha, jugo abajo a la izquierda). */
.ro-gato {
  position: absolute;
  right: 3%;
  top: 6%;
  width: min(46vw, 520px);
  aspect-ratio: 1 / 1;
  background-image: linear-gradient(rgb(var(--c, 227 145 130)), rgb(var(--c, 227 145 130)));
  opacity: 0.07;
  -webkit-mask: url("assets/brand-art/ro-gato.svg") no-repeat center / contain;
  mask: url("assets/brand-art/ro-gato.svg") no-repeat center / contain;
}
.ro-capa-prod[data-p="3"] .ro-gato { --c: 227 145 130; }
.ro-capa-prod[data-p="4"] .ro-gato { --c: 196 62 50; }
.ro-gato--inverso { right: auto; left: 3%; top: auto; bottom: 6%; transform: scaleX(-1); }

/* Satelites: UNA nube en el escenario, teñida con el color del producto
   activo (--ro-tinte lo interpola rocave.js). Tres capas de parallax
   (fondo/media/frente): la capa lleva el movimiento del mouse, el nucleo de
   cada particula el flotar (@keyframes ro-flotar): un transform, un dueño. */
.ro-particulas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ro-capa-par { position: absolute; inset: 0; will-change: transform; }
.ro-particula { position: absolute; }
.ro-particula-nucleo {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(var(--ro-tinte-claro)), rgb(var(--ro-tinte)) 60%, rgb(var(--ro-tinte) / 0) 100%);
  animation: ro-flotar var(--ro-flota-dur, 6s) ease-in-out infinite;
}
.ro-capa-par--fondo .ro-particula-nucleo { filter: blur(1.5px); }
@keyframes ro-flotar {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--ro-flota-x, 10px), var(--ro-flota-y, -14px)); }
}

/* Objeto principal: la botella. El envoltorio lleva el movimiento del scroll
   (rocave.js escribe su transform completo: traslado, inclinacion, escala y
   giro 2D con perspectiva); la imagen de dentro, el seguimiento del mouse. */
.ro-botella-viaje {
  position: absolute;
  left: 50%;
  top: var(--ro-botella-cy);
  height: var(--ro-botella-alto);
  display: flex;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.ro-botella {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  /* Sobre blanco el vidrio del mezcal casi desaparece: sombra suave + el
     resplandor verde de detras sostienen la silueta (kit §5.2). El render no
     se toca. */
  filter: drop-shadow(0 10px 22px rgba(20, 16, 12, 0.16));
  will-change: transform;
}
.ro-sombra {
  position: absolute;
  left: 50%;
  bottom: -1.6%;
  width: 150%;
  height: 5.5%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(20, 16, 12, 0.3), rgba(20, 16, 12, 0));
}

/* ---------- 5. Apertura (E1) y declaracion (E2) ---------- */
.ro-pieza--apertura .breadcrumb {
  position: absolute;
  top: 0.9rem;
  left: var(--ro-gutter);
  margin: 0;
  color: var(--ro-suave);
  opacity: 1;
}
.ro-pieza--apertura .breadcrumb:hover { color: var(--ro-tinta); }
.ro-h1 { position: absolute; top: 0.8rem; left: 50%; margin: 0; transform: translateX(-50%); }
.ro-wordmark { width: min(260px, 52vw); height: auto; }
/* Con el escenario vivo el titular lo pinta el escenario (capa de display,
   aria-hidden); este parrafo queda para lectores de pantalla. */
.ro-tagline {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.ro-banda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--ro-barra);
  height: var(--ro-banda-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  padding: 0.5rem 1.2rem;
  background: #ffffff;
  border-top: 1px solid var(--ro-linea);
}
.ro-banda-ticker {
  margin: 0;
  font-family: ui-monospace, "Cascadia Code", Consolas, "SFMono-Regular", monospace;
  font-size: var(--ro-etiqueta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ro-suave);
  text-align: center;
}
.ro-banda-ticker strong { color: var(--ro-tinta); font-weight: 700; }
/* Leyenda de alcohol: existe y se lee (>= 13px) sin competir con ningun titular. */
.ro-banda-legal.alcohol-note,
.alcohol-note.ro-nota-suelta {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: var(--ro-etiqueta);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: center;
  max-width: 40rem;
  color: var(--ro-suave);
  opacity: 1;
}
.alcohol-note.ro-nota-suelta { margin: 1.4rem auto 0; }

.ro-pieza--declaracion {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2.2rem, 6svh, 4rem) var(--ro-gutter) var(--ro-barra);
}
.ro-declaracion {
  margin: 0;
  max-width: 19em;
  text-align: center;
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 48px);
  line-height: 1.16;
  letter-spacing: -0.015em;
}
/* Cada palabra pasa de carbon al 25 % a carbon al 100 % segun --ro-decl
   (0..15, lo escribe rocave.js); sin JS el valor por defecto es el 100 %. */
.ro-declaracion span {
  color: rgb(20 16 12 / calc(0.25 + 0.75 * clamp(0, var(--ro-decl, 30) - var(--i), 1)));
}

/* ---------- 6. Escena de producto (E3-E6) ---------- */
.ro-botella-lineal { display: none; }
.ro-pieza--producto {
  display: flex;
  flex-direction: column;
  padding: 0.5rem var(--ro-gutter) var(--ro-barra);
}
/* Color de texto de cada producto (el numero del titulo): version oscurecida
   del color del resplandor, >= 3:1 sobre blanco a 144 px. Declarado en la
   seccion y no en la pieza, para que el id lo pueda sobrescribir. */
.ro-parte--producto { --ro-acento: var(--ro-oro-texto); }
#ro-mezcal { --ro-acento: #4f7a5a; }
#ro-cerveza { --ro-acento: #9a7416; }
#ro-tequila { --ro-acento: #c0543f; }
#ro-jugo { --ro-acento: #c43e32; }
.ro-titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--ro-display);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ro-tinta);
}
@media (min-width: 900px) {
  /* el raíl fijo vive en el borde derecho: la escena de producto le deja sitio */
  .ro-pieza--producto { padding-right: 7.2rem; }
}
.ro-n { font-weight: 400; color: var(--ro-acento); margin-right: 0.08em; }
.ro-fila-datos {
  display: grid;
  grid-template-columns: var(--ro-cols);
  margin: 0.5rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--ro-linea);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ro-suave);
}
.ro-fila-datos span:last-child { grid-column: 3; }
.ro-cuerpo {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--ro-cols);
  align-content: start;
  padding-top: clamp(1rem, 7svh, 4rem);
}
.ro-col-izq { grid-column: 1; }
.ro-col-der { grid-column: 3; }
.ro-nota {
  margin: 0 0 0.12em;
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ro-tinta);
}
/* Ficha: el patron de filas de STILL (cantidad + unidad, filete fino entre filas). */
.ro-ficha { list-style: none; margin: 0; padding: 0; }
.ro-ficha li {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  padding: 0.7rem 0;
  border-top: 1px solid var(--ro-linea);
  white-space: nowrap;
}
.ro-ficha li:last-child { border-bottom: 1px solid var(--ro-linea); }
.ro-ficha b {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1;
  color: var(--ro-tinta);
}
.ro-ficha span {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ro-suave);
}
.ro-descripcion { margin: 0; font-family: var(--body); font-size: 14px; line-height: 1.5; color: var(--ro-suave); }
.ro-enlace {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ro-tinta);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--ro-t-ui) ease;
}
.ro-enlace:hover { color: var(--ro-oro-texto); }
/* Sello del teaser: chip dorado solido con texto carbon (7.9:1). */
.ro-sello-proximo { margin: 0.4rem 0 0; }
body[data-brand="rocave"] .ro-sello-proximo .eyebrow {
  display: inline-flex;
  margin: 0;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ro-tinta);
}

/* ---------- 7. Raíl de productos ----------
   Enlaces reales (<a href="#id">): funcionan con cero JavaScript. El "estas
   aqui" lo marca rocave.js con aria-current segun el progreso del recorrido. */
.ro-rail { display: none; }
@media (min-width: 900px) {
  .ro-rail {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: fixed;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
  }
  .ro-rail a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    color: var(--ro-suave);
    font-family: var(--heavy);
    font-size: var(--ro-etiqueta);
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: color var(--ro-t-ui) ease;
  }
  .ro-rail { transition: opacity var(--ro-t-ui) ease; }
  .ro-rail.ro-rail--fuera { opacity: 0; pointer-events: none; }
  .ro-rail a:hover { color: var(--ro-tinta); }
  .ro-rail a[aria-current="true"] { color: var(--ro-tinta); box-shadow: 0 2px 0 var(--gold); }
  .ro-rail a span { display: none; }
  .ro-rail a[aria-current="true"] span { display: inline; }
}

/* ---------- 8. Responsive: el MISMO recorrido a todos los anchos ----------
   Lo que se adapta es la composicion del contenido, no el mecanismo. */
@media (max-width: 768px) {
  .ro-escenario {
    --ro-botella-alto: min(calc(var(--ro-bot-svh-movil, 34) * 1svh), 930px);
    --ro-botella-cy: 47%;
    --ro-banda-h: 7.2rem;
  }
  .ro-h1 { top: 2.6rem; }
  .ro-banda { padding: 0.4rem 1rem; gap: 0.2em; }
  .ro-escenario[data-prod="3"],
  .ro-escenario[data-prod="4"] { --ro-botella-alto: min(calc(var(--ro-bot-svh-movil, 34) * 1svh), 834px); }
  .ro-palabra { font-size: clamp(60px, 17vw, 200px); }
  .ro-titular-apertura { font-size: clamp(44px, 14vw, 88px); max-width: 7em; }
  .ro-declaracion { font-size: clamp(22px, 6.4vw, 30px); }
  .ro-titulo { font-size: clamp(34px, 10.5vw, 72px); }
  .ro-fila-datos { grid-template-columns: 1fr auto; margin-top: 0.4rem; padding-top: 0.5rem; font-size: 13px; }
  .ro-fila-datos span:last-child { grid-column: auto; }
  .ro-cuerpo { display: flex; flex-direction: column; padding-top: 0.7rem; }
  .ro-nota { font-size: clamp(22px, 6vw, 28px); }
  .ro-col-der { margin-top: auto; }
  .ro-ficha li { padding: 0.45rem 0; }
  .ro-enlace { margin-top: 0.7rem; }
  .ro-gato { width: 70vw; }
}
/* Viewport bajo (portatil corto, 1440x720): con una pieza de 100svh, un alto
   reducido es otra composicion, no la misma encogida. */
@media (min-width: 769px) and (max-height: 760px) {
  .ro-cuerpo { padding-top: clamp(0.6rem, 3svh, 2rem); }
}

/* ---------- 9. Version lineal: sin JavaScript o con movimiento reducido ----------
   Nada atado al scroll: el escenario se esconde y cada producto vuelve a ser
   una seccion normal con su propia botella, su texto y sus revelados ya
   resueltos (los revelados solo existen bajo no-preference). Es la misma
   hoja minima que rocave.html lleva en <noscript> para los navegadores que
   no entienden (scripting: none). */
@media (scripting: none), (prefers-reduced-motion: reduce) {
  .ro-escenario { display: none; }
  .ro-recorrido .ro-parte { height: auto; margin: 0; pointer-events: auto; padding: clamp(2rem, 6vw, 4rem) 0; }
  .ro-recorrido .ro-pieza { position: static; height: auto; padding: 0 var(--ro-gutter); max-width: 1120px; margin-inline: auto; }
  .ro-recorrido .ro-botella-lineal {
    display: block;
    height: min(52svh, 480px);
    width: auto;
    margin: 0 auto 1.2rem;
    filter: drop-shadow(0 10px 22px rgba(20, 16, 12, 0.16));
  }
  .ro-recorrido .ro-pieza--apertura { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
  .ro-recorrido .ro-pieza--apertura .breadcrumb,
  .ro-recorrido .ro-h1,
  .ro-recorrido .ro-banda { position: static; transform: none; }
  .ro-recorrido .ro-banda { height: auto; width: 100%; }
  .ro-recorrido .ro-tagline {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
    font-family: var(--display); font-size: var(--ro-display); line-height: 0.95; letter-spacing: -0.015em;
  }
  .ro-recorrido .ro-pieza--declaracion { padding-block: 1rem; }
  .ro-recorrido .ro-pieza--producto { max-width: 1120px; }
  .ro-recorrido .ro-parte--producto { background: radial-gradient(60% 55% at 50% 30%, rgb(var(--c) / 0.14), rgb(var(--c) / 0) 70%); }
  #ro-mezcal { --c: 91 127 99; }
  #ro-cerveza { --c: 201 162 75; }
  #ro-tequila { --c: 227 145 130; }
  #ro-jugo { --c: 196 62 50; }
  .ro-recorrido .ro-cuerpo { display: block; padding-top: 1rem; }
  .ro-recorrido .ro-col-der { margin-top: 1.4rem; max-width: 24rem; }
  .ro-recorrido .ro-fila-datos { grid-template-columns: 1fr auto; }
  .ro-recorrido .ro-fila-datos span:last-child { grid-column: auto; }
  .ro-recorrido .ro-titulo { font-size: clamp(40px, 9vw, 96px); }
  /* El raíl deja de ser una barra fija al borde (en la version lineal no hay
     escenario ni recorrido que lo aparte al terminar: se quedaba encima del
     mazapan, el formulario y el pie, hallazgo P2 de Codex): pasa a ser un
     indice normal en fila, al principio de la pagina. */
  .ro-rail { position: static; transform: none; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem; padding: 0.8rem var(--ro-gutter) 0; }
  .ro-rail a span { display: inline; }
}

/* ---------- 10. Proximamente: Mezcal de mazapan (E8) ----------
   Tarjeta, no banner: blanca, con la foto a un lado (arriba en movil) y un
   maximo de 60 vh de alto. Sin velo: el texto carbon va sobre blanco. La foto
   (rocave-cerveza-brindis.webp, 1466 px de ancho real) nunca se amplia por
   encima de su origen: ocupa menos de la mitad del contenedor. */
.ro-proximo {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  max-height: 60vh;
  border: 1px solid var(--ro-linea);
  border-radius: calc(var(--radius) * 1.3);
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(20, 16, 12, 0.08);
}
.ro-proximo-foto { position: relative; min-height: 14rem; }
.ro-proximo-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ro-proximo-contenido { align-self: center; padding: clamp(1.6rem, 4vw, 2.8rem); max-width: 34rem; }
.ro-proximo-contenido h2 { font-size: var(--ro-h2); margin: 0.2rem 0 0.5rem; color: var(--ro-tinta); }
.ro-proximo-contenido p { color: var(--ro-suave); margin: 0 0 0.4rem; }
.ro-proximo-contenido .text-link { display: inline-block; margin-top: 0.6rem; color: var(--ro-oro-texto); font-weight: 600; }
@media (max-width: 768px) {
  .ro-proximo { grid-template-columns: 1fr; max-height: none; }
  .ro-proximo-foto { min-height: 0; height: 22vh; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js body[data-brand="rocave"] .ro-proximo {
    opacity: 0;
    transform: translateY(46px);
    transition: opacity var(--ro-t-narrativa) var(--ro-asentar), transform var(--ro-t-narrativa) var(--ro-asentar);
  }
  html.js body[data-brand="rocave"] .ro-proximo.show { opacity: 1; transform: none; }
}

/* ---------- 11. En la mesa (E9) ----------
   Tres fotos reales como tarjetas, cada una por debajo del 40 % del ancho del
   contenedor; la de boneless (persona identificable) nunca es la mas grande:
   las tres miden lo mismo. B5: dos columnas + la tercera centrada a ≤ 899. */
.ro-mesa-titulo {
  text-align: center;
  font-size: var(--ro-h2);
  color: var(--ro-tinta);
  margin: 0 0 0.8rem;
}
.ro-mesa-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 1rem;
  margin: 0.2rem auto 0;
  max-width: 56rem;
}
.ro-mesa-foto {
  position: relative;
  width: 100%;
  min-width: 0; /* si no, aspect-ratio deriva el ancho del alto ya estirado por el grid y desborda */
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 14px 30px rgba(20, 16, 12, 0.14);
}
.ro-mesa-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.ro-mesa-caption { margin: 1.2rem auto 0; text-align: center; color: var(--ro-suave); font-size: var(--ro-chico); max-width: 32rem; }
@media (prefers-reduced-motion: no-preference) {
  html.js body[data-brand="rocave"] .ro-mesa-foto {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
    transition: opacity var(--ro-t-narrativa) var(--ro-asentar), transform var(--ro-t-narrativa) var(--ro-asentar);
    transition-delay: var(--ro-retardo, 0ms);
  }
  html.js body[data-brand="rocave"] .ro-mesa-foto.show { opacity: 1; transform: none; }
}
@media (max-width: 899px) {
  .ro-mesa-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .ro-mesa-grid > :nth-child(3) { grid-column: 1 / -1; max-width: 60%; margin-inline: auto; }
}

/* ---------- 12. Formulario de distribucion (E10) — piel clara ----------
   Sale de la piel clara que el sitio ya tiene resuelta para el formulario
   en blanco (.gu-bloque--dorado .panel, La Guarnicion): panel claro con filete
   y sombra suave, sin borde de color. El boton de enviar va en oro con texto
   carbon (inline en el HTML). */
body[data-brand="rocave"] #distribuir .panel {
  background: #fbf8f1;
  color: var(--ro-tinta);
  border: 1px solid var(--ro-linea);
  box-shadow: 0 18px 44px rgba(20, 16, 12, 0.08);
}
body[data-brand="rocave"] #distribuir .panel label,
body[data-brand="rocave"] #distribuir .panel legend { color: var(--ro-tinta); }
body[data-brand="rocave"] #distribuir .panel input:not([type="checkbox"]),
body[data-brand="rocave"] #distribuir .panel select,
body[data-brand="rocave"] #distribuir .panel textarea {
  background: #ffffff;
  border-color: rgba(20, 16, 12, 0.3);
  color: var(--ro-tinta);
  color-scheme: light;
}
body[data-brand="rocave"] #distribuir .panel input::placeholder,
body[data-brand="rocave"] #distribuir .panel textarea::placeholder { color: #6b645b; opacity: 1; }
body[data-brand="rocave"] #distribuir .panel input:focus,
body[data-brand="rocave"] #distribuir .panel select:focus,
body[data-brand="rocave"] #distribuir .panel textarea:focus {
  border-color: var(--ro-oro-texto);
  background: #ffffff;
  outline-color: var(--ro-oro-texto);
}
body[data-brand="rocave"] #distribuir .panel .check-row { color: var(--ro-suave); }
body[data-brand="rocave"] #distribuir .panel .consent-legal a { color: var(--ro-oro-texto); }
body[data-brand="rocave"] #distribuir .section-heading p { color: var(--ro-suave); }

/* === M9 · fin === */

/* === R1 2026-09-04 · Principal · inicio ===
   Reconstrucción de sitio/index.html (kit: documentacion/referencias/
   2026-09-04-kit-principal.md; prompt: Re-mejora 04-09/R1-principal-grupo-pro-cyb.md).
   Fusión medida de to-top.ch (pila pegada, cuerpo grande, cifra fantasma) y
   daynight.co.uk (escala en clamp(), ficha flotante, rótulo numerado, grano).
   Bloque nuevo y autocontenido: no edita ninguna regla anterior a este punto.
   Donde hace falta anular una regla compartida (el orden del espectro de
   colores del hero, el color de los tres pines de Del Abuelo, el ancho del
   marco del mapa), se redeclara aquí con la misma clase — gana por ir
   después en la cascada — y queda declarado en el registro de decisiones
   del informe, no en un comentario suelto. */

/* ---------- 0 · Rótulo de sección numerado (patrón daynight §3.7) ----------
   Común a las escenas 03-07. Cuando la escena no tiene un titular propio más
   grande (escena 04), el rótulo mismo es el <h2>; si no, es un <p>. */
.r1-rotulo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 1.1rem;
  font-family: var(--heavy);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--peltre);
  font-variant-numeric: tabular-nums;
}
h2.r1-rotulo { line-height: 1; }
.r1-rotulo::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--brasa) 70%, transparent);
  box-shadow: inset 0 0 0 3.5px var(--carbon), inset 0 0 0 5px var(--brasa);
}
body[data-theme="light"] .r1-rotulo::before { box-shadow: inset 0 0 0 3.5px var(--crema), inset 0 0 0 5px var(--brasa); }
.r1-titular { font-family: var(--display); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; max-width: 20ch; }
.r1-escena { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }

/* ---------- 1 · Entrada narrativa — sustituye la única transición de la
   página (0,48 s) por el rango medido de las dos referencias (M5-M7).
   Reutiliza el mecanismo YA EXISTENTE (main.js: IntersectionObserver sobre
   [data-reveal], agrega/quita .is-revealed, respeta prefers-reduced-motion) —
   patrón ya resuelto por marca (ver body[data-brand="botanas"] arriba, ~L4434).
   Aquí solo se redeclara el tiempo/curva/escalón para "grupo". El escalón usa
   --r (0..n) en vez de --reveal-delay (ms) porque así lo mide el kit (§3.4,
   §9.2 M7) y porque son enteros pequeños fijados a mano por tarjeta/fila, no
   milisegundos calculados. La regla .is-revealed-compañera es obligatoria con
   la MISMA especificidad que la de reposo (ver comentario de P4, ~L4428): sin
   ella el elemento se queda invisible para siempre. ---------- */
html.js body[data-brand="grupo"] [data-reveal] {
  transform: translateY(24px);
  transition: opacity 1.15s cubic-bezier(.16, 1, .3, 1), transform 1.3s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--r, 0) * 0.12s);
}
html.js body[data-brand="grupo"] [data-reveal].is-revealed { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js body[data-brand="grupo"] [data-reveal] { transform: none; transition: none; }
}

/* ---------- 2 · Escena 01 — Portada ----------
   El lienzo p1b-lienzo (aro, halos, disco, retícula, grano) SE CONSERVA tal
   cual — es lo único que el diagnóstico salvó — y solo se redimensiona. */
.r1-hero.corp-masthead--index {
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  padding-block: 96px 22px;
  --aro: min(62svh, 58vw);
}
@media (max-width: 767px) {
  .r1-hero.corp-masthead--index {
    padding-block: 88px 20px;
    --aro: min(48svh, 66vw);
  }
}
/* Espectro reordenado (petición 7 / kit §5.10): Del Abuelo ya no es la primera
   por rosa heredado sino por --brasa, y el orden nuevo es
   del abuelo · guarnición · rocave · meduse · tostadas. Redeclara SOLO
   `background` (el resto de .p1b-aro/.p1b-halo, incluida la máscara, sigue
   como está). */
.p1b-aro {
  background: conic-gradient(
    from -90deg,
    #e8621d 0deg 66deg,   transparent 66deg 72deg,
    #d97a1f 72deg 138deg, transparent 138deg 144deg,
    #c9a24b 144deg 210deg, transparent 210deg 216deg,
    #31496e 216deg 282deg, transparent 282deg 288deg,
    #c53a40 288deg 354deg, transparent 354deg 360deg
  );
}
.p1b-halo {
  background: conic-gradient(
    from -90deg,
    #e8621d 0deg,   #e8621d 50deg,
    #d97a1f 88deg,  #d97a1f 122deg,
    #c9a24b 160deg, #c9a24b 194deg,
    #31496e 232deg, #31496e 266deg,
    #c53a40 304deg, #c53a40 338deg,
    #e8621d 360deg
  );
}
/* H1: máscara de línea + entrada por palabra (patrón daynight §3.4), con el
   acento por COLOR (--brasa), no por cursiva — el titular ya es display. */
.r1-linea { display: block; overflow: hidden; padding: 0.04em 0 0.14em; }
.r1-palabra {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: r1EntraPalabra 1.15s cubic-bezier(.16, .84, .28, 1) both;
  animation-delay: calc(var(--w, 0) * 0.06s);
}
@keyframes r1EntraPalabra {
  0% { transform: translateY(105%); opacity: 0; }
  40% { opacity: 1; }
  to { transform: translateY(0); opacity: 1; }
}
.r1-acento { font-style: normal; color: var(--brasa); }
@media (prefers-reduced-motion: reduce) {
  .r1-palabra { opacity: 1; transform: none; animation: none; }
}
/* .p1-hero-body trae max-width:42rem del bloque genérico (pensado para un
   masthead corto, p.ej. 404.html); aquí el H1 necesita todo el ancho del
   .container o "Cinco negocios andando," parte en tres líneas por palabra
   en vez de una. La entradilla SÍ se queda en una columna angosta (su propio
   max-width, más abajo) — es al H1 al que hay que soltarle la correa. */
.corp-masthead--index .r1-hero-body { max-width: none; }
.corp-masthead--index .r1-h1 {
  font-size: clamp(34px, 5.2vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: none;
  text-wrap: balance;
}
.corp-masthead--index .r1-lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  max-width: 42rem;
  color: var(--peltre);
}

/* ---------- 3 · Escena 02 — Cinta de oficios ----------
   Ribbon nuevo (no existía en la Principal); mecanismo propio, independiente
   de la marquesina de Tostadas. Dos bandas cruzadas a >480px, una sola a
   ≤480px (simplificación PREAUTORIZADA por el prompt §8.7) — pero SIEMPRE
   animada, incluida la banda única: lo único que la detiene es
   prefers-reduced-motion (M8, M13). */
.r1-oficios {
  background: var(--brasa);
  height: 144px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 375px) { .r1-oficios { height: 96px; } }
.r1-oficios-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: r1Marquee 14s linear infinite;
  font-family: var(--heavy);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--carbon);
  font-size: clamp(0.95rem, 2.6vw, 1.5rem);
}
.r1-oficios-track--inv { animation-name: r1MarqueeInv; animation-duration: 17s; opacity: 0.72; }
.r1-oficios-item { padding: 0 0.6em; }
@keyframes r1Marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes r1MarqueeInv { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 480px) {
  .r1-oficios-track--inv { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .r1-oficios-track { animation: none; transform: none; }
}

/* ---------- 4 · Escena 03 — la pila pegada (el núcleo del frente) ----------
   M1-M4: contenedor flex-column, gap:100px, overflow:visible, EXACTAMENTE
   cinco hijos y ninguno más (ni rótulo, ni titular, ni botón: van en un
   .container hermano, antes de .r1-pila). 5×592+4×100 = 3360 a 1440 (M3). */
.r1-escena--marcas-intro { padding-bottom: 0.5rem; }
.r1-escena--marcas-intro .r1-cabeza { max-width: 46rem; }
.r1-escena--marcas-intro .r1-bajada { color: var(--peltre); font-size: 1.02rem; margin-top: 0.6rem; }
.r1-escena--marcas { padding-top: 0.5rem; }

.r1-pila {
  display: flex;
  flex-direction: column;
  gap: 100px;
  overflow: visible;
}
.r1-tarjeta {
  position: sticky;
  top: 100px;
  margin: 0;
  z-index: auto;
  display: block;
  height: 592px;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  background: var(--c-bg);
  color: var(--c-ink);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.r1-tarjeta-cifra {
  position: absolute;
  left: -0.05em;
  bottom: -0.18em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(96px, 20vw, 300px);
  line-height: 1;
  opacity: 0.14;
  color: var(--c-ink);
  pointer-events: none;
  z-index: 0;
}
.r1-tarjeta-foto,
.r1-tarjeta-velo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 40%;
  height: 100%;
  z-index: 0;
}
.r1-tarjeta-foto { object-fit: cover; }
.r1-tarjeta-velo {
  background: linear-gradient(180deg, transparent 40%, color-mix(in oklab, var(--c-bg) 88%, transparent));
  pointer-events: none;
}
.r1-tarjeta-cuerpo {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: min(56%, 30rem);
  display: flex;
  flex-direction: column;
  padding: 40px 40px 32px;
}
.r1-tarjeta-logo { width: 34%; height: auto; object-fit: contain; object-position: left center; display: block; }
.r1-tarjeta-nombre { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.18; letter-spacing: -0.03em; margin: 0.85em 0 0.4em; }
.r1-tarjeta-linea { font-size: 15px; line-height: 1.5; margin: 0 0 1rem; color: color-mix(in oklab, var(--c-ink) 82%, transparent); }
.r1-tarjeta-lista {
  list-style: none;
  margin: 0 0 1.2rem;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklab, var(--c-ink) 20%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: color-mix(in oklab, var(--c-ink) 78%, transparent);
}
/* 14px, no 13: son direcciones y estados de producto reales — "texto de
   lectura" en la definición del kit (§4.2), no rótulo. Sólo el "18+" y el
   resto del pie (§6.6, mínimo legal 13px) están debajo de esa barra, y 14px
   ya la cumple de sobra. */
.r1-tarjeta-pie {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--heavy);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.r1-tarjeta-pie-nota { opacity: 0.82; white-space: nowrap; }
.r1-tarjeta-pie-cta { white-space: nowrap; }
.r1-tarjeta:hover .r1-tarjeta-pie-cta, .r1-tarjeta:focus-visible .r1-tarjeta-pie-cta { text-decoration: underline; text-underline-offset: 3px; }

/* Tarjeta 05 (Tostadas, cierre temporal) — única con tratamiento distinto:
   cinta diagonal reutilizando el amarillo de cierre ya usado en el resto del
   sitio (.despacho-badge-cierre, --cinta:#f2c230), y la cifra/foto se atenúan
   un poco más para que la cinta lea primero. Registro de decisiones #2. */
.r1-tarjeta--cerrada .r1-tarjeta-cifra,
.r1-tarjeta--cerrada .r1-tarjeta-foto { opacity: 0.55; }
.r1-tarjeta-cinta {
  position: absolute;
  top: 22px;
  right: -46px;
  z-index: 2;
  width: 190px;
  padding: 5px 0;
  text-align: center;
  transform: rotate(38deg);
  background: var(--cinta, #f2c230);
  color: var(--carbon);
  font-family: var(--heavy);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .r1-pila { gap: 50px; }
  .r1-tarjeta { height: 400px; }
  .r1-tarjeta-foto, .r1-tarjeta-velo { display: none; }
  .r1-tarjeta-cuerpo { max-width: none; padding: 28px 24px 24px; }
  .r1-tarjeta-logo { width: 52%; }
  .r1-tarjeta-cifra { font-size: clamp(96px, 30vw, 190px); }
}

/* ---------- 5 · Escena 04 — Cómo trabaja el grupo ---------- */
.r1-filas { display: flex; flex-direction: column; }
.r1-fila {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2rem);
  min-height: 112px;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(244, 236, 220, 0.14);
  transition: padding-left 0.26s cubic-bezier(.33, 1, .68, 1);
}
body[data-theme="light"] .r1-fila { border-top-color: rgba(43, 33, 25, 0.14); }
.r1-filas .r1-fila:last-child { border-bottom: 1px solid rgba(244, 236, 220, 0.14); }
body[data-theme="light"] .r1-filas .r1-fila:last-child { border-bottom-color: rgba(43, 33, 25, 0.14); }
.r1-fila:hover, .r1-fila:focus-within { padding-left: 12px; }
.r1-fila-num { font-family: var(--body); font-size: 0.85rem; opacity: 0.28; font-variant-numeric: tabular-nums; flex: none; width: 2ch; }
.r1-fila-verbo { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.4vw, 52px); line-height: 1.05; margin: 0; flex: none; min-width: 9ch; }
.r1-fila-linea { margin: 0; color: var(--peltre); font-size: 15px; max-width: 34rem; }
body[data-theme="light"] .r1-fila-linea { color: var(--tinta-suave); }
.r1-fila-flecha { margin-left: auto; opacity: 0.5; transition: color 0.2s ease, opacity 0.2s ease; flex: none; }
.r1-fila:hover .r1-fila-flecha, .r1-fila:focus-within .r1-fila-flecha { color: var(--brasa); opacity: 1; }
@media (max-width: 640px) {
  .r1-fila { flex-wrap: wrap; min-height: 88px; }
  .r1-fila-num { order: -1; width: auto; }
  .r1-fila-verbo { min-width: 0; }
  .r1-fila-flecha { display: none; }
}
@media (hover: none) and (pointer: coarse) {
  .r1-fila-flecha { display: none; }
}

/* ---------- 6 · Escena 05 — Dónde estamos (el mapa) ---------- */
.r1-mapa-marco { max-width: min(1500px, calc(68vh * 1.5)); }
/* Botones-pin: mismo aspecto que antes (.p1b-pin), solo se resetea el cromo
   nativo de <button> — el resto de la regla sigue en el bloque original. */
/* C11 (objetivos táctiles <44px, hoy 30, objetivo ≤6): el disco visual del
   pin mide 26px porque así está medido y dibujado (.p1b-pin, borde+fondo en
   el propio elemento). Agrandar ESE elemento a 44px agrandaría el círculo
   dibujado, no solo el área de toque. Se separan las dos cosas: el <button>
   crece a 44×44 y pierde su propio borde/fondo; un <span> nuevo,
   .r1-pin-disco, dibuja el círculo de 26px sin cambiar el tamaño de toque.
   .p1b-pin-cruz y ::after/::before siguen centrados igual (se posicionan al
   50%/50% del propio botón, que sigue centrado en el mismo punto del mapa). */
button.p1b-pin.r1-pin {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: none;
  background: none;
  display: grid;
  place-items: center;
  font: inherit;
  cursor: pointer;
}
.r1-pin-disco {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--punto-color);
  background: rgba(var(--carbon-rgb), 0.55);
  pointer-events: none;
}
/* Dato heredado corregido (kit §8.1): Del Abuelo es --brasa desde P4, no el
   rosa #f2a9a9 con el que había quedado esta sección. */
.p1b-pin--latino, .p1b-pin--la-casa, .p1b-pin--terraza { --punto-color: #e8621d; }
/* C7 (texto de lectura ≥14px, cero excepciones): la lista accesible del mapa
   traía "tipo" y dirección a 13.44/13.6px. Son "dirección" en la definición
   literal del kit (§4.2) — se suben a 14, la única regla de esta lista que
   no se hereda tal cual. */
.p1b-mm-tipo, .p1b-mm-dirs span { font-size: 14px; }

.r1-mapa-ficha {
  position: absolute;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  width: 320px;
  height: 210px;
  max-width: 34%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--crema-rgb), 0.2);
  background-color: var(--carbon-2);
  background-image: var(--r1-ficha-foto, none);
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* R1b: la posición Y y la escala salen de dos variables, no de un
     transform distinto por regla — ver el comentario junto a --abajo, más
     abajo, del porqué. */
  --r1-ficha-y: calc(-100% - 22px);
  --r1-ficha-escala: 0.96;
  transform: translate(-50%, var(--r1-ficha-y)) scale(var(--r1-ficha-escala));
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 5;
}
.r1-mapa-ficha.is-on { opacity: 1; --r1-ficha-y: calc(-100% - 10px); --r1-ficha-escala: 1; pointer-events: auto; }
.r1-mapa-ficha::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.75)); }
.r1-ficha-cuerpo { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 12px 16px 14px; color: #fff; }
.r1-ficha-nombre { display: block; font-family: var(--heavy); font-size: 17px; margin-bottom: 2px; }
.r1-ficha-dir { display: block; font-size: 14px; opacity: 0.88; margin-bottom: 8px; }
.r1-ficha-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--heavy);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 2px;
}
@media (max-width: 767px) {
  .r1-mapa-ficha { width: 260px; height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .r1-mapa-ficha { transition: none; }
}

/* R1b 2026-09-08 — la ficha desbordaba .p1b-mapa-marco (overflow:hidden,
   necesario para recortar los retículos de los pines) cuando el pin caía en
   la mitad superior del mapa: la-casa y tostadas quedaban recortados hasta
   un 25% visible. La ficha ya no se posiciona con los porcentajes --fx/--fy:
   index.js le da left/top en px medidos contra el marco, para poder decidir
   lado y recortar el desborde lateral. El max-width:34% heredado se retira
   porque ganaba a los anchos declarados (a 375 dejaba la ficha en 128px y la
   dirección en 4 líneas). */
.r1-mapa-ficha { max-width: none; width: 320px; }
@media (max-width: 767px) { .r1-mapa-ficha { width: 260px; } }

/* Pines de la mitad superior del mapa: la ficha no cabe encima y el marco la
   recortaría. Abre hacia abajo. La clase la pone index.js con la altura real
   de la ficha, no con un breakpoint.
   Se redeclara --r1-ficha-y (variable, no la propiedad transform) a
   propósito: con dos reglas declarando su propio `transform` a la misma
   especificidad (.r1-mapa-ficha.is-on y .r1-mapa-ficha--abajo.is-on), la
   cascada en frío elige bien (comprobado con transition:none) pero la
   TRANSICIÓN de 0.3s, en este entorno, se resolvía contra la regla
   equivocada -- la-casa y tostadas abrían "abajo" en la clase pero se
   animaban con el translateY de "arriba", saliéndose del marco por arriba.
   Con un único `transform` (arriba) que solo lee variables, no hay dos
   declaraciones de la misma propiedad compitiendo y la transición interpola
   la variable correcta. Registro de decisiones #4. */
.r1-mapa-ficha--abajo { --r1-ficha-y: 22px; }
.r1-mapa-ficha--abajo.is-on { --r1-ficha-y: 10px; }

/* ---------- 7 · Escenas 06/07 — formularios ----------
   .panel, .negocio-*, .club-*, .check-row, .brand-checks, .hero-actions se
   REUTILIZAN sin cambio (patrón ya resuelto, método §4.3) — el kit solo pide
   radio de 20px y ancho de lectura máximo de 560px en el panel de estas dos
   escenas. */
body[data-brand="grupo"] #negocio .panel,
body[data-brand="grupo"] #club .panel {
  border-radius: 20px;
  max-width: 560px;
}

/* ---------- 8 · Escena 08 — pie y recorrido ---------- */
.r1-footer-wordmark { display: block; width: min(46%, 420px); height: auto; margin: 0 0 clamp(1.6rem, 4vw, 2.4rem); }
@media (max-width: 767px) { .r1-footer-wordmark { width: 78%; } }

/* ---------- 9 · Índice de marcas (petición 5 / kit §5.11) ----------
   Alcance acotado a las DOS cosas que autoriza el prompt §8.5: el logotipo
   dentro de cada banda, y el rótulo del disparador (cambiado en el propio
   HTML de cada página). Nada más de .indice-band/.indice-overlay se toca. */
.indice-band-logo { display: block; width: min(60%, 130px); margin-bottom: 0.5rem; opacity: 0.92; }
.indice-band-logo img { width: 100%; height: auto; object-fit: contain; display: block; }
@media (max-width: 780px) {
  .indice-band-logo { width: 76px; margin-bottom: 0; }
}

/* === R1 · fin === */

/* === R3 2026-09-08 · Meduse · inicio ===
   Densificacion de sitio/meduse.html (kit: documentacion/referencias/
   2026-09-08-kit-meduse.md; prompt: Re-mejora 04-09/R3-meduse.md). Bloque
   nuevo y autocontenido: no edita ninguna regla anterior a este punto.
   El Ascenso tipografico (.meduse-wordmark, .mw-letters, @keyframes
   meduseRise, arriba en este mismo archivo) NO se toca — es la unica regla
   dura del frente que no admite excepcion. */

/* ---------- 0 · Tokens del bloque (kit §2.4 / §4) ---------- */
body[data-brand="meduse"] {
  --banda-1: color-mix(in oklab, var(--azul-claro) 12%, #fff);
  --banda-2: color-mix(in oklab, var(--azul-claro) 20%, #fff);
}
/* Fondo explicito en las ocho escenas: aunque el papel de la marca ya es
   blanco por herencia del body, declararlo aqui hace de "capa 1" una
   composicion intencional, no un accidente heredado (mismo principio que las
   bandas de abajo) — y es lo que mide el detector de capas del §9.1 del
   prompt sobre el fondo PROPIO de cada <section>, no el de sus hijos. */
.mdr-escena { position: relative; overflow: hidden; background: #fff; }
.mdr-banda-1 { background: var(--banda-1); }
.mdr-banda-2 { background: var(--banda-2); }
.mdr-oscura { background: var(--azul); color: #fff; }

/* ---------- 1 · Rotulo de seccion numerado (patron daynight, kit principal
   §3.7 / kit meduse §4 y §5.3) — sustituye a los .eyebrow sueltos de las
   escenas 02-08. La escena 01 conserva su propio .eyebrow (miga de pan). */
/* Ahora es un <a> a la propia escena (permalink de scroll: peticion de
   Gabriel, 2026-09-09) — reset del subrayado nativo y una transicion de
   color al pasar el mouse/tocar, para que la afordancia de "esto lleva a
   algo" quede visible sin gritar. */
.mdr-rotulo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 1rem;
  font-family: var(--heavy);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  width: fit-content;
  transition: color 0.2s ease;
}
.mdr-rotulo:hover, .mdr-rotulo:focus-visible { color: var(--azul); }
.mdr-rotulo::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--azul-claro) 70%, transparent);
  box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 5px var(--azul-claro);
  transition: box-shadow 0.2s ease;
}
.mdr-rotulo:hover::before, .mdr-rotulo:focus-visible::before { box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 5px var(--azul); }
.mdr-rotulo--inv { color: rgba(255, 255, 255, 0.78); }
.mdr-rotulo--inv:hover, .mdr-rotulo--inv:focus-visible { color: #fff; }
.mdr-rotulo--inv::before { box-shadow: inset 0 0 0 3.5px var(--azul), inset 0 0 0 5px #fff; }
.mdr-rotulo--inv:hover::before, .mdr-rotulo--inv:focus-visible::before { box-shadow: inset 0 0 0 3.5px var(--azul), inset 0 0 0 5px #fff; }

/* ---------- 2 · Entrada narrativa — sustituye el unico tiempo de la pagina
   (0.48s, ver --dur-reveal arriba) por el rango del kit (M2-M4). Reutiliza el
   mecanismo YA EXISTENTE (main.js: IntersectionObserver sobre [data-reveal],
   agrega/quita .is-revealed, respeta prefers-reduced-motion) — mismo patron
   que R1 (bloque de arriba). El escalon usa --r (entero por indice), no
   --reveal-delay (ms): con esto --reveal-delay desaparece de meduse.html
   (M4). La regla .is-revealed companera es obligatoria con la MISMA
   especificidad que la de reposo: sin ella el elemento queda invisible para
   siempre. */
html.js body[data-brand="meduse"] [data-reveal] {
  transform: translateY(24px);
  transition: opacity 1.15s cubic-bezier(.16, 1, .3, 1), transform 1.3s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--r, 0) * 0.12s);
}
html.js body[data-brand="meduse"] [data-reveal].is-revealed { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js body[data-brand="meduse"] [data-reveal] { transform: none; transition: none; }
}

/* ---------- 3 · El Arial de los 34 botones (kit §7.4/§8.9) — alcance
   acotado a las clases propias de este bloque, no al reset compartido
   (form input/select/textarea, linea ~489, deja fuera a button a proposito). */
body[data-brand="meduse"] .horario-cta,
body[data-brand="meduse"] .mdr-franja-toggle,
body[data-brand="meduse"] .mdr-disc-btn,
body[data-brand="meduse"] .mdr-price-btn { font: inherit; }

/* ---------- 4 · Escena 01 — Portada (halo espejo + contador de escena; el
   wordmark y la foto del hero NO se tocan, §2 del prompt) ---------- */
.mdr-contador {
  position: absolute;
  top: 18px;
  right: max(18px, calc((100% - var(--container)) / 2 + 6px));
  z-index: 2;
  font-family: var(--heavy);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
/* Halo espejo: mismo radio que .meduse-hero::before (arriba en este archivo),
   reflejado abajo-izquierda, al 60% de su opacidad (decision discrecional —
   ver informe: se conserva porque vive detras del wordmark en Z y fuera del
   area que ocupan las letras, así que no le estorba). */
.meduse-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -26%;
  left: -14%;
  width: 66vw;
  height: 66vw;
  max-width: 640px;
  max-height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 141, 190, 0.144), transparent 66%);
  pointer-events: none;
}
.meduse-hero .lead { font-size: 1.06rem; line-height: 1.5; }

/* ---------- 5 · Escena 02 — En el aire · valores ---------- */
.valores-lista li { position: relative; padding-left: 2.2rem; }
.mdr-valor-num {
  position: absolute;
  left: 0;
  top: 0.18em;
  font-family: var(--heavy);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--azul-claro);
}
@media (min-width: 780px) {
  .meduse-valores .container { position: relative; }
  .valores-lista { position: relative; }
  .valores-lista::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1.1rem;
    width: 1px;
    background: rgba(99, 141, 190, 0.3);
  }
}

/* ---------- 6 · Escena 03 — El estudio · galeria (mamposteria de dos
   columnas, patron polepositions §2.2 — sustituye la rejilla uniforme de
   hoy). meduse-pole-exotico-02.webp (964x900, la mas pequeña) va siempre en
   tamaño normal: nunca en posicion oversized (kit §1.1). El bleed de
   oversized solo se activa desde 1360px: por debajo, el margen del
   .container (fijo en 20px por lado hasta 1160px, ver .container arriba) es
   mas angosto que el -119px/-40px que mide el kit, y aplicarlo ahi desborda
   la pagina a 375/768/1024 (Q1, no negociable — decision discrecional). */
.mdr-gallery-wrap { position: relative; }
.mdr-gallery-cifra {
  position: absolute;
  left: -0.02em;
  top: -0.08em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 1;
  color: var(--azul);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 699px) { .mdr-gallery-cifra { font-size: 4rem; } }
.meduse-gallery-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.mdr-gallery-col { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
/* B6 2026-09-09 — pie de foto retirado (peticion del cliente: repetia el alt
   de su <img> sin decir nada nuevo). El alt se queda intacto para quien no ve
   la foto. La figura se queda como <figure> aunque ya no lleve <figcaption>:
   el zoom al apuntar y los selectores de mamposteria de abajo cuelgan de ese
   elemento. */
.meduse-gallery-grid figure { margin: 0; overflow: hidden; border-radius: var(--radius); }
/* B6 2026-09-09 — ya no hay una relacion de aspecto unica repetida cinco
   veces: cada figura normal usa la proporcion real de su foto (el
   width/height del propio <img>, las seis medidas en el kit §1.1). Es lo que
   el reparto de mas abajo necesita para que la mamposteria tenga alturas de
   verdad distintas, no una caja identica reordenada.
   Las DOS fotos marcadas "oversized" son la excepcion deliberada: van mas
   anchas y mas cortas porque sangran -119px hacia el margen vacio de la
   pagina (mas abajo). Van escopadas por CLASE, no por posicion — el
   `figure:first-child` a secas que vivia en el bloque huerfano ya retirado
   (comentario cerca de la linea 2962) coincidia tambien con la primera
   figura de la segunda columna y la aplastaba a 16:10 sin que nadie lo
   pidiera (hallazgo de B6 §2, aparte del solape que si pidio el cliente —
   B6-decisiones.md #3). Por clase, son siempre las mismas dos fotos
   (exotico-01 y kids-02) pase lo que pase con el reparto de las otras tres. */
.mdr-oversized { aspect-ratio: 16 / 10; }
.meduse-gallery-grid img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* Zoom suave al pasar el mouse (peticion de Gabriel, 2026-09-09): el
   overflow:hidden de arriba en la propia <figure> es lo que recorta el
   sobrante sin mover el resto de la mamposteria. */
.meduse-gallery-grid img { transition: transform 0.5s cubic-bezier(.16, 1, .3, 1); }
.meduse-gallery-grid figure:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .meduse-gallery-grid img { transition: none; }
  .meduse-gallery-grid figure:hover img { transform: none; }
}
/* La primera foto (la mas grande, "oversized" en la columna izquierda) se
   recortaba desde arriba con el object-position:top heredado (linea ~2930)
   y a una sola columna le cortaba el cuerpo de la bailarina por debajo de
   la cadera. Centrada, entra la pose completa (peticion de Gabriel,
   2026-09-09). Acotado a la PRIMERA figura y a movil: en columnas, "top"
   sigue siendo el recorte correcto para las demas fotos. */
@media (max-width: 699px) {
  .mdr-gallery-col:first-child figure:first-child img { object-position: center; }
}
@media (min-width: 700px) {
  .meduse-gallery-grid { flex-direction: row; align-items: flex-start; gap: 1.2rem; }
  .mdr-gallery-col { flex: 1 1 0; gap: 1.2rem; }
}
@media (min-width: 1360px) {
  .mdr-oversized { margin-left: -119px; }
  .mdr-oversized-right { margin-right: -119px; }
}

/* ---------- 7 · Escena 04 — Disciplinas: mamposteria de dos columnas
   (patron polepositions §2.2), numeral de fondo y boton redondo que se
   enciende al apuntar la tarjeta entera. discipline-grid pasa a envolver
   DOS <ul class="mdr-disc-col"> explicitas (antes era un <div> con
   columns:2) — asi el detector de capas del §9.1 cuenta un "objeto
   principal" real sin inventar una foto que no existe (decision discrecional
   #1 — ver informe: disciplinas va SIN foto, con el numeral como capa
   principal), Y de paso se evita el bug de CSS multicolumn +
   break-inside:avoid + transform de [data-reveal] que hacia que una tarjeta
   se pintara encima de la vecina (hallazgo de Gabriel, 2026-09-09): dos
   columnas explicitas con flexbox no dependen del balanceo de altura del
   navegador, asi que no hay donde se solape nada. El boton salta al
   horario, no abre el dialogo de clase: dos disciplinas (Twerk, Ejercicio
   funcional) no tienen ninguna fila en la tabla — filtrarlas habria exigido
   inventar una que no existe (decision discrecional #2). */
.discipline-grid.offset { display: flex; flex-direction: column; gap: 1rem; }
.mdr-disc-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.discipline { position: relative; overflow: hidden; margin-bottom: 0; }
.discipline h3 { position: relative; z-index: 1; font-size: 35px; margin-top: 0.15rem; }
.discipline p { position: relative; z-index: 1; padding-right: 2.6rem; }
.mdr-disc-num {
  position: absolute;
  right: 0.9rem;
  bottom: 0.6rem;
  z-index: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1;
  color: var(--azul);
  opacity: 0.18;
  pointer-events: none;
}
.mdr-disc-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 0.6rem;
  border-radius: 50%;
  border: 1px solid rgba(99, 141, 190, 0.5);
  color: var(--azul);
  text-decoration: none;
  font-size: 1.1rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.discipline:hover .mdr-disc-btn,
.discipline:focus-within .mdr-disc-btn { background: var(--azul); color: #fff; }
@media (min-width: 768px) {
  .discipline-grid.offset { flex-direction: row; align-items: flex-start; gap: 1.4rem; }
  .mdr-disc-col { flex: 1 1 0; gap: 96px; }
}
/* B6 2026-09-09 — el bleed de -119px que aqui vivia (patron polepositions
   §2.2: "una pieza se sale del contenedor hacia el margen de la pagina")
   funciona en la galeria de arriba porque ahi se sale hacia el margen VACIO
   de la pagina. Aqui "Telas aereas" se salia hacia la COLUMNA DERECHA, que
   esta ocupada por "Ejercicio funcional": a partir de 1360px invadia 97px de
   su vecina (peticion del cliente, B6 §2). La clase mdr-oversized-right ya
   se retiro del <li> en meduse.html — esta regla queda vacia y se borra con
   ella. El ritmo que daba el desbordamiento lo sigue dando el numeral de
   fondo (.mdr-disc-num) mas el desfase natural entre columnas de 3 tarjetas
   de alto distinto (decision discrecional, ver B6-decisiones.md). */

/* ---------- 8 · Escena 05 — Horario: la hora como pieza de display (C8) y
   el colapso por ancho (patron poleboutique §2.3, unica excepcion
   preautorizada al mecanismo universal, prompt §8.6). Un solo <table> en
   todo momento (M6): a >=768 sigue siendo la rejilla de hoy —el th de la
   hora conserva su position:sticky sin cambio, arriba en este archivo (M7)—;
   a <768 CSS reordena las mismas <tr>/<td> en ocho bloques plegables. El
   estado abierto/cerrado vive en tr[data-abierto] (main.js solo alterna el
   atributo, no reconstruye marcado) y nace en "true" en el propio HTML: sin
   JS la tabla se ve completa a cualquier ancho (Q6). */
.horario-scroll { background: var(--banda-1); padding: clamp(0.5rem, 2vw, 0.9rem); }
/* Piso tipografico: la etiqueta "Solo ninas" (.horario-tag, arriba en este
   archivo) vivia a 9.6px — bajo el piso de rotulo de C4 (11px) y bajo el
   minimo legal de la propia etiqueta de franja (13px, kit §5.4/8.7). Sube a
   13px sin tocar su mayuscula/letter-spacing ya correctos. */
.horario-tag { font-size: 13px; }
.horario-table tbody th[scope="row"] {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.horario-table td,
.horario-table .horario-cta { font-size: 15px; }
.mdr-franja-toggle {
  display: none;
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(49, 73, 110, 0.1);
  color: var(--azul);
  cursor: pointer;
  position: relative;
}
.mdr-franja-toggle::before,
.mdr-franja-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.mdr-franja-toggle::after { transition: transform 0.25s ease; }
tr[data-abierto="false"] .mdr-franja-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
@media (max-width: 767px) {
  .horario-scroll { overflow-x: visible; border: 0; background: none; padding: 0; }
  .horario-table, .horario-table thead, .horario-table tbody,
  .horario-table tr, .horario-table th, .horario-table td { display: block; width: 100%; min-width: 0; }
  .horario-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .horario-table tbody tr {
    margin-bottom: 0.5rem;
    border: 1px solid rgba(49, 73, 110, 0.22);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--banda-1);
  }
  .horario-table tbody th[scope="row"] {
    position: static;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 56px;
    padding: 0.5rem 1rem;
    border-right: 0;
    background: #fff;
  }
  .mdr-franja-toggle { display: flex; align-items: center; justify-content: center; }
  .horario-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 1rem;
    border-bottom: 1px solid rgba(49, 73, 110, 0.14);
    max-height: 64px;
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
  }
  .horario-table tbody td::before {
    content: attr(data-dia);
    flex: none;
    width: 5.5em;
    font-family: var(--heavy);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-suave);
  }
  .horario-table tbody td:last-child { border-bottom: 0; }
  .horario-table tbody .horario-cta { margin: -0.3rem 0; flex: 1; }
  tr[data-abierto="false"] td { max-height: 0; padding-block: 0; opacity: 0; border-bottom: 0; }
}

/* ---------- 9 · Escena 06 — Planes: precio a 70px que no encoge en ningun
   ancho (C7, M9 — ninguna regla de abajo mete .price-amount en un @media). */
.price-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.price-card {
  flex: 1 1 260px;
  max-width: 341px;
  padding: 0;
  gap: 0;
  border: 3px solid color-mix(in oklab, var(--azul-claro) 22%, #fff);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.price-card.is-unlimited { position: relative; border-color: var(--azul); }
.mdr-price-glow {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 70%);
  pointer-events: none;
}
.mdr-price-head { width: 100%; padding: 16px 20px; min-height: 64px; background: var(--azul); display: flex; align-items: center; justify-content: center; }
.price-card .price-freq { color: #fff; font-size: 35px; font-family: var(--display); font-weight: 400; letter-spacing: 0; text-transform: none; }
.price-card.is-unlimited .mdr-price-head { flex-direction: column; gap: 0.35rem; padding: 14px 20px 10px; }
.price-card.is-unlimited .price-card-logo { width: min(52%, 160px); height: auto; object-fit: contain; margin: 0; }
.mdr-price-body { width: 100%; padding: 21px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.price-card .price-amount { font-size: 70px; line-height: 1; display: flex; align-items: flex-start; gap: 2px; color: var(--tinta); }
.mdr-price-sign { font-size: 45px; margin-top: 4px; }
.price-card.is-unlimited .price-amount { color: #fff; }
.mdr-price-datos {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(49, 73, 110, 0.16);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
  font-size: 17px;
  color: var(--tinta-suave);
}
.price-card.is-unlimited .mdr-price-datos { border-top-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.88); }
.mdr-price-datos .price-detail { color: var(--tinta); font-family: var(--heavy); font-size: 17px; }
.price-card.is-unlimited .mdr-price-datos .price-detail { color: #fff; }
.mdr-price-btn {
  display: block;
  width: calc(100% - 40px);
  margin: 0 20px 20px;
  padding: 15px 24px;
  box-sizing: border-box;
  min-height: 56px;
  text-align: center;
  border: 3px solid var(--azul);
  border-radius: 56px;
  font-family: var(--heavy);
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  color: var(--azul);
  transition: background 0.2s ease, color 0.2s ease;
}
.mdr-price-btn:hover, .mdr-price-btn:focus-visible { background: var(--azul); color: #fff; }
.price-card.is-unlimited .mdr-price-btn { border-color: #fff; color: #fff; }
.price-card.is-unlimited .mdr-price-btn:hover,
.price-card.is-unlimited .mdr-price-btn:focus-visible { background: #fff; color: var(--azul); }
@media (max-width: 480px) { .price-card { flex-basis: 100%; } }

/* ---------- 10 · Escena 07 — Ven a moverte: unica escena oscura de la
   pagina tras el hero (patron poleflowberlin §2.4, kit §4.7). El acento de
   "moverte" NO usa --azul-claro puro: contra --azul da 2.63:1, por debajo
   incluso del minimo de texto grande (Q9). Se aclara con color-mix del mismo
   token hasta 5.2:1 — deriva del token de marca, no es un hex nuevo (mismo
   principio que --banda-1/--banda-2). */
.mdr-cta-grid { position: relative; z-index: 1; max-width: 46rem; padding-block: clamp(1rem, 4vw, 2rem); }
.mdr-hero-mirror--inv {
  position: absolute;
  z-index: 0;
  top: -20%;
  right: -18%;
  width: 60vw;
  height: 60vw;
  max-width: 560px;
  max-height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 66%);
  pointer-events: none;
}
.meduse-cta.mdr-oscura h2 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); color: #fff; }
.mdr-palabra-acc { font-style: normal; color: color-mix(in oklab, var(--azul-claro) 50%, #fff 50%); }
.mdr-cta-lead { color: rgba(255, 255, 255, 0.86); font-size: 1.06rem; max-width: 34rem; }
.meduse-cta.mdr-oscura .btn-primary { background: #fff; color: var(--azul); }
.meduse-cta.mdr-oscura .btn-primary:hover { background: var(--banda-1); }
.meduse-cta.mdr-oscura .btn-secondary { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
.meduse-cta.mdr-oscura .btn-secondary:hover { box-shadow: inset 0 0 0 2px #fff; }

/* ---------- 11 · Escena 08 — Donde: el wordmark de cierre a gran escala
   (patron daynight: su pieza tipografica mayor es el wordmark del pie),
   marca-meduse-ink.png en vez de logo-meduse-*.webp (M10). ---------- */
.mdr-cierre-wordmark { display: block; width: min(46%, 460px); height: auto; margin: clamp(2rem, 6vw, 3.5rem) auto 0; }
@media (max-width: 767px) { .mdr-cierre-wordmark { width: 78%; } }

/* ---------- 12 · Piso tipografico (C4/C5) en elementos compartidos que SI
   viven dentro del contenido propio de Meduse o que el kit exige por su
   minimo legal (§5.4) — acotado con body[data-brand="meduse"], asi que no
   toca las otras diez paginas (Q10). Lo que queda fuera de este punto
   (header, indice-overlay, dialogo) es cromo compartido protegido por el
   §10 del prompt: no se toca aqui y queda declarado en el informe. */
/* Hallazgo visual (no en el kit): .horario-cta es un <button> que main.js ya
   creaba, pero la regla original (arriba en este archivo) nunca reseteaba el
   cromo nativo del navegador — appearance:auto le pintaba un recuadro gris
   con relieve encima del subrayado. Pasaba inadvertido en la tabla angosta
   de 640px; en el acordeón, mas espacioso, se veia. Entra en el rediseño por
   el §4.1 del prompt ("todo elemento heredado sin tratamiento propio entra
   tambien"). */
body[data-brand="meduse"] .horario-cta { appearance: none; border: 0; background: none; cursor: pointer; }
body[data-brand="meduse"] .horario-cta-aviso { font-size: 14px; }
body[data-brand="meduse"] .social-row a { font-size: 14px; }
body[data-brand="meduse"] .footer-legal { font-size: 13px; }

/* === R3 · fin ===

/* === M3 2026-09-13 · Meduse · inicio ===
   Dos peticiones del cliente (prompt: Mantenimiento 13-09/
   M3-meduse-galeria-y-horario.md). Bloque nuevo y autocontenido: no edita
   ninguna regla anterior a este punto, incluido el bloque R3 de arriba (sus
   reglas .meduse-gallery-grid / .mdr-gallery-col / .mdr-oversized* quedan
   sin usar porque la galeria ya no lleva esas clases en el HTML — se dejan
   intactas, no se borran, por la misma regla de "fuera de tu bloque no se
   edita").
   1) La galeria pasa de mamposteria de dos columnas a un carrusel
      horizontal (mismo patron que el visor de la carta de Del Abuelo —
      menu.js/menu.html "Visor de la carta impresa", styles.css ~linea
      3140 — con clases propias mdr-gal-* porque son dos paginas con dos
      lenguajes visuales distintos).
   2) Las flechas de #disciplinas resaltan sus clases en la tabla de
      horario en vez de solo saltar a #horarios. */

/* ---------- 1 · Escena 03 — El estudio: carrusel horizontal.
   Reutiliza .mdr-gallery-wrap / .mdr-gallery-cifra del bloque R3 (arriba,
   sin tocarlas): siguen dando el position:relative del envoltorio y el
   numeral de fondo "05". Altura fija en la tira y cada foto a
   height:100%/width:auto — nunca object-fit:cover — para que las cinco se
   vean COMPLETAS, como pidio el cliente: las proporciones reales van de
   0.75 a 1.07 (kit §1.1), asi que cada hoja tiene su propio ancho. Cabe en
   una pantalla de alto a los tres anchos medidos (informe M3, tabla de
   alturas). ---------- */
.mdr-gal-track-wrap { position: relative; z-index: 1; }
.mdr-gal-track {
  display: flex;
  gap: 0.9rem;
  height: clamp(240px, 46vh, 460px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.2rem;
  cursor: grab;
}
.mdr-gal-track.is-arrastrando { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.mdr-gal-track:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 2px; }
.mdr-gal-hoja { flex: 0 0 auto; height: 100%; margin: 0; scroll-snap-align: start; }
.mdr-gal-hoja img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  border-radius: var(--radius);
  /* El arrastre lo maneja el track por Pointer Events; una <img> nativa
     arrastrable (comportamiento por defecto del navegador) interrumpe el
     pointermove a mitad de gesto. */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.mdr-gal-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(49, 73, 110, 0.18);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(2px);
  color: var(--azul);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(49, 73, 110, 0.16);
}
.mdr-gal-flecha:hover, .mdr-gal-flecha:focus-visible { background: #fff; }
.mdr-gal-flecha:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 2px; }
.mdr-gal-flecha--prev { left: 0.6rem; }
.mdr-gal-flecha--next { right: 0.6rem; }
.mdr-gal-flecha svg { width: 18px; height: 18px; }
.mdr-gal-contador {
  position: relative;
  z-index: 1;
  margin: 0.7rem 0 0;
  font-family: var(--heavy);
  font-size: 13px;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .mdr-gal-track { height: clamp(220px, 52vh, 380px); }
}
@media (prefers-reduced-motion: reduce) {
  .mdr-gal-track { scroll-behavior: auto; }
}

/* ---------- 2 · Escena 04 → 05: las flechas de disciplina resaltan el
   horario (peticion 2). El mapa disciplina→celda vive en main.js (una sola
   tabla de equivalencias, prompt §2.1); aqui solo el aspecto de las dos
   celdas — resaltada y atenuada —, con el contraste medido en las dos
   (prompt §2.3, informe M3 §… contraste).
   Atenuada: var(--tinta-suave) sobre blanco = 6.43:1 (ya documentado como
   tal mas arriba en este archivo, token de marca). Resaltada: var(--azul)
   en negrita sobre el tinte de fondo (~6.7:1, calculado) — ninguna de las
   dos baja de 4.5:1 (texto de lectura). Las celdas vacias (.is-empty) nunca
   se tocan: no son informacion, son un guion decorativo. ---------- */
.horario-table.mdr-filtro-activo td:not(.is-empty) .horario-cta { color: var(--tinta-suave); }
.horario-table.mdr-filtro-activo td.mdr-celda-resaltada { background: rgba(49, 73, 110, 0.16); border-left: 3px solid var(--azul); }
.horario-table.mdr-filtro-activo td.mdr-celda-resaltada .horario-cta { color: var(--azul); font-weight: 700; }
@media (max-width: 767px) {
  .horario-table.mdr-filtro-activo td.mdr-celda-resaltada { border-left: 0; border-top: 3px solid var(--azul); }
}
.mdr-horario-filtro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  width: fit-content;
  margin: 0.9rem 0 0;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  background: rgba(49, 73, 110, 0.1);
  border: 1px solid rgba(49, 73, 110, 0.25);
  border-radius: 999px;
  font-family: var(--heavy);
  font-size: 14px;
  color: var(--azul);
}
/* Un display de autor (flex, arriba) gana sobre el [hidden] del navegador —
   mismo hallazgo ya documentado en .pedido-total[hidden] y
   .mi-lista-contador[hidden] de este archivo. Sin esta linea el indicador
   quedaba visible SIEMPRE, con texto vacio antes de activar ningun filtro, y
   el estado "vacio, hidden=true" tras tocar "Quitar filtro" se veia igual
   que el estado activo con texto viejo — parecia que el boton no hacia nada
   (hallazgo de Gabriel, 2026-09-14). */
.mdr-horario-filtro[hidden] { display: none; }
.mdr-horario-filtro-quitar {
  border: 0;
  background: var(--azul);
  color: #fff;
  font-family: var(--heavy);
  font-size: 13px;
  padding: 0.35rem 0.9rem;
  min-height: 32px;
  border-radius: 999px;
  cursor: pointer;
}
.mdr-horario-filtro-quitar:hover, .mdr-horario-filtro-quitar:focus-visible { background: var(--azul-medio); }
.mdr-horario-filtro-quitar:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 2px; }

/* === M3 · fin === */

/* === C3 2026-09-11 · Conversión y flujo · inicio ===
   Auditoría de cierre, frente C3. Tres cosas:
     1. La barra fija de acciones deja de ser exclusiva del Abuelo.
     2. La promesa de "qué sigue" junto a cada formulario.
     3. La página de gracias.
   Reglas COMPARTIDAS reescritas aquí (§7 de AGENTS.md: fuera del bloque no se
   edita nada) — las tres originales siguen intactas arriba:
     · .mobile-actionbar a:first-child     línea 711  (usaba --brasa fijo)
     · body.has-actionbar .header-cta      línea 228  (escondía el CTA siempre)
     · .mi-lista-contador                  línea 5227 (chocaba con la barra)
   ------------------------------------------------------------------ */

/* 1a. El primer hueco de la barra es el CTA principal, así que se pinta con
   el acento DE LA MARCA, no con el naranja del Abuelo. En del-abuelo.html
   --acc y --brasa son el mismo #e8621d: la página de referencia no cambia
   ni un pixel. */
.mobile-actionbar a:first-child { background: var(--acc); color: var(--acc-ink); }

/* Rocave: el oro del primer hueco de la barra vive en el bloque M9 (la barra
   pasa a ser blanca). */

/* La Guarnición es la única marca cuyo --acc-ink NO sirve aquí: el crema
   sobre su naranja da 2.65:1, por debajo de AA (medido, 2026-09-17). La
   tinta sobre ese mismo naranja da 5.07:1. Es el mismo problema que ya
   está documentado arriba para --brasa-ink, resuelto igual. */
body[data-brand="guarnicion"] .mobile-actionbar a:first-child { color: var(--tinta); }

/* 1b. Barra en las dos páginas claras (La Guarnición y Meduse). Meduse es
   clara a propósito y no se "armoniza" con el resto: su barra también es
   clara. El carbón de la regla base solo aplica a las páginas oscuras. */
body[data-theme="light"] .mobile-actionbar {
  background: color-mix(in srgb, var(--crema) 94%, var(--tinta));
  border-top-color: rgba(43, 33, 25, 0.2);
}
/* :not(:first-child) y no un `a` a secas: las dos reglas tienen la misma
   especificidad, esta va después, y sin el :not() se comía el --acc-ink del
   primer hueco — el blanco de Meduse sobre su marino y el crema de La
   Guarnición sobre su naranja se volvían tinta oscura (visto en la captura
   de 375 px antes de corregirlo). */
body[data-theme="light"] .mobile-actionbar a:not(:first-child) { color: var(--tinta); }

/* 1c. Área táctil: 15px+15px de padding sobre una línea de 0.86rem daban
   51px medidos. Se fija el mínimo para que un cambio de tipografía no lo
   baje por debajo de los 44 px de WCAG 2.5.5. */
.mobile-actionbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

/* 1d. El CTA de cabecera solo se esconde donde la barra REPITE esa misma
   acción (Del Abuelo, Menú, Guarnición, Rocave, Meduse). En index.html la
   barra ofrece Reservar/Marcas/Dónde estamos y el CTA de cabecera es
   "Hablar de alianzas": esconderlo habría borrado la única entrada de
   negocio del móvil. La regla original (línea 228) hacía justo eso.
   Se anula aquí y se vuelve a aplicar con la clase de opt-in. */
@media (max-width: 720px) {
  body.has-actionbar .header-cta { display: inline-flex; }
  body.has-actionbar.actionbar-suple-cta .header-cta { display: none; }
}

/* 1e. "Mi lista" de la carta es fija abajo a la derecha y la barra también
   es fija abajo: sin esto el contador se apoyaba encima de los enlaces.
   Solo por debajo del ancho al que existe la barra. */
@media (max-width: 879px) {
  body.has-actionbar .mi-lista-contador { bottom: calc(1rem + 58px + env(safe-area-inset-bottom, 0px)); }
}

/* 2. Promesa de tiempo de respuesta. No es un compromiso nuevo: main.js la
   arma con el horario que cada marca ya publica en config.js (ver
   promesaRespuesta()). Vive dentro de los paneles crema, así que hereda el
   mismo gris de .form-nota. */
/* Marca con ::before POSICIONADO, no con flex. La primera versión era un
   contenedor flex y cada <b> del texto se convertía en un ítem de flex: la
   promesa de la reserva, que lleva dos, se partía en tres columnas
   ilegibles (visto en la captura de gracias.html a 375 px). El texto de
   estas líneas viene con marcado dentro, así que el contenedor tiene que
   seguir siendo un párrafo normal. */
.promesa-respuesta {
  position: relative;
  margin: 0.9rem 0 0.2rem;
  padding-left: 1.4rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.promesa-respuesta[hidden] { display: none; }
.promesa-respuesta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.55;
}
.promesa-respuesta b { color: var(--tinta); font-weight: 700; }
/* Fuera del panel crema (pedido.html la pone sobre el fondo oscuro de la
   ficha, gracias.html sobre el carbón) el gris de tinta no se lee. */
.promesa-respuesta--oscura { color: var(--peltre); }
.promesa-respuesta--oscura b { color: var(--crema); }
/* Y gracias.html se pinta con el tema de la marca: en Meduse y La Guarnición
   es clara, y ahí el peltre no se lee sobre el crema. */
body[data-theme="light"] .promesa-respuesta--oscura { color: var(--tinta-suave); }
body[data-theme="light"] .promesa-respuesta--oscura b { color: var(--tinta); }

/* 3. Página de gracias. Reusa el sistema: .panel, .btn, .site-footer. Lo
   propio es el bloque de confirmación y la rejilla de segunda acción. */
.gracias-main { padding: clamp(2.6rem, 8vw, 5rem) 0 clamp(3rem, 8vw, 5rem); }
.gracias-caja { max-width: 40rem; margin: 0 auto; text-align: center; }
.gracias-check {
  width: 62px;
  height: 62px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--acc);
  color: var(--acc-ink);
}
.gracias-check svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
/* Mismo caso que el primer hueco de la barra: el --acc-ink crema de La
   Guarnición sobre su naranja da 2.65:1, por debajo del 3:1 que pide WCAG
   1.4.11 para un gráfico. La tinta da 5.07:1. */
body[data-brand="guarnicion"] .gracias-check { color: var(--tinta); }
.gracias-caja h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 0.8rem; }
.gracias-lead { color: var(--peltre); font-size: 1.05rem; }
body[data-theme="light"] .gracias-lead { color: var(--tinta-suave); }

.gracias-siguiente {
  margin: 2rem auto 0;
  max-width: 34rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid rgba(244, 236, 220, 0.16);
  border-radius: var(--radius);
  background: var(--carbon-2);
  text-align: left;
}
body[data-theme="light"] .gracias-siguiente {
  background: color-mix(in srgb, var(--crema) 94%, var(--tinta));
  border-color: rgba(43, 33, 25, 0.16);
}
.gracias-siguiente h2 { font-family: var(--heavy); font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.6rem; }

/* El enlace de rescate: si el navegador bloqueó la pestaña de WhatsApp, el
   mensaje sigue disponible aquí. Se pinta solo cuando gracias.js encuentra
   la URL que dejó el formulario en sessionStorage. */
.gracias-rescate { margin: 1.4rem auto 0; max-width: 34rem; text-align: left; }

.gracias-acciones {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.gracias-accion {
  display: block;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(244, 236, 220, 0.16);
  border-radius: var(--radius);
  text-decoration: none;
  min-height: 48px;
}
body[data-theme="light"] .gracias-accion { border-color: rgba(43, 33, 25, 0.16); }
.gracias-accion:hover, .gracias-accion:focus-visible { border-color: var(--acc); background: rgba(244, 236, 220, 0.04); }
body[data-theme="light"] .gracias-accion:hover, body[data-theme="light"] .gracias-accion:focus-visible { background: rgba(43, 33, 25, 0.04); }
.gracias-accion strong { display: block; font-family: var(--heavy); font-size: 1rem; margin-bottom: 0.15rem; }
.gracias-accion span { font-size: 0.86rem; color: var(--peltre); }
body[data-theme="light"] .gracias-accion span { color: var(--tinta-suave); }
/* === C3 · fin === */

/* === M5 2026-10-03 · Del Abuelo · inicio === */
/* Reglas viejas que quedan SIN EFECTO (no se editan, estan fuera de este
   bloque): .editorial-strip y sus hijos en la tira "Antojo real"
   (.botanas-antojo .editorial-strip y su img 4/5) -- esa tira ya es el
   carrusel de abajo; .editorial-strip sigue vivo en index.html. Y, de la
   tarjeta "Cotiza tu evento", dejan de aplicar el hover que la levantaba,
   el focus-visible de toda la tarjeta, la transition, text-decoration/color
   (ya no es un enlace) y .branch-card--cotiza-cta (el falso boton interior,
   ahora hay dos botones de verdad). */

/* --- Tarjeta "Cotiza tu evento": ya no es un enlace --- */
.branch-card--cotiza:hover,
.branch-card--cotiza:focus-visible {
  border-color: rgba(244, 236, 220, 0.12);
  transform: none;
}
.branch-card .cotiza-numero { margin: 0.5rem 0 0; font-family: var(--heavy); font-size: 1.35rem; letter-spacing: 0.02em; color: var(--crema); }
.cotiza-acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.cotiza-acciones .btn { min-height: 44px; padding: 0 1.2rem; font-size: 0.92rem; }
.cotiza-acciones .btn svg { width: 18px; height: 18px; }
.branch-card--cotiza .cotiza-acciones .btn { flex: 1 1 100%; }

/* --- Cabecera de #eventos: telefono y las mismas dos acciones --- */
.eventos-cabecera-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; }
.eventos-contacto { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.eventos-contacto .cotiza-numero { margin: 0; font-family: var(--body, inherit); font-size: 0.95rem; letter-spacing: 0; color: var(--peltre); }
.eventos-contacto .cotiza-numero strong { font-family: var(--heavy); color: var(--crema); font-weight: 400; white-space: nowrap; }
.eventos-contacto .cotiza-acciones { margin-top: 0; }

/* --- Carrusel generico (carrusel-auto.js): boton de pausa --- */
.carrusel-pausa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(244, 236, 220, 0.3);
  background: transparent;
  color: var(--crema);
  font-family: var(--heavy);
  font-size: 0.85rem;
  cursor: pointer;
}
.carrusel-pausa[hidden] { display: none; }
.carrusel-pausa::before { content: ""; width: 10px; height: 12px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%); }
.carrusel-pausa[aria-pressed="true"]::before { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.carrusel-pausa:hover { border-color: var(--acc); }
.carrusel-pausa:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }

/* --- "Antojo real": carrusel de fotos --- */
.antojo-carrusel { --antojo-gap: 0.9rem; --antojo-pie: 3.6rem; position: relative; padding-bottom: var(--antojo-pie); }
.antojo-pista {
  position: relative;
  display: flex;
  gap: var(--antojo-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.js .antojo-pista { scrollbar-width: none; }
.js .antojo-pista::-webkit-scrollbar { display: none; }
.antojo-pista:focus-visible { outline: 3px solid var(--brasa); outline-offset: 4px; }
/* 1 foto con la siguiente asomando; 2 a 768; 3 con la cuarta asomando a 1440 */
.antojo-pista figure {
  margin: 0;
  flex: 0 0 calc((100% - var(--antojo-gap)) / 1.15);
  scroll-snap-align: start;
  border-radius: 10px;
  overflow: hidden;
}
.antojo-pista img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
@media (min-width: 640px) {
  .antojo-pista figure { flex-basis: calc((100% - 2 * var(--antojo-gap)) / 2.25); }
}
@media (min-width: 1024px) {
  .antojo-pista figure { flex-basis: calc((100% - 3 * var(--antojo-gap)) / 3.25); }
}
.antojo-carrusel .carrusel-pausa { position: absolute; left: 0; bottom: 0; }
.antojo-flecha {
  display: none;
  position: absolute;
  top: calc((100% - var(--antojo-pie)) / 2);
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244, 236, 220, 0.16);
  background: rgba(20, 16, 12, 0.72);
  backdrop-filter: blur(2px);
  color: var(--crema);
  place-items: center;
  cursor: pointer;
}
.js .antojo-flecha { display: grid; }
.antojo-flecha--prev { left: 0.5rem; }
.antojo-flecha--next { right: 0.5rem; }
.antojo-flecha svg { width: 20px; height: 20px; }
.antojo-flecha:hover { border-color: var(--acc); }
.antojo-flecha:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }
/* === M5 · fin === */

/* === M6 2026-10-03 · Meduse y Tostadas · inicio ===
   Dos carruseles que avanzan solos (carrusel-auto.js, el modulo de M5). El
   boton de pausa base (.carrusel-pausa) vive en el bloque M5 y esta pensado
   para paginas oscuras: aqui se ajusta para Meduse (clara) y se afina para
   Tostadas (oscura). Fuera de este bloque no se edita nada. */

/* --- Meduse: el contador y el boton de pausa comparten fila --- */
.mdr-gal-pie {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin-top: 0.4rem;
}
.mdr-gal-pie .mdr-gal-contador { margin: 0; }
/* Pagina clara: el boton base (borde y texto crema) no se veria. --azul
   (#31496e) sobre blanco da ~9:1; el borde cumple 3:1 de componente de UI. */
.mdr-gallery-wrap .carrusel-pausa {
  color: var(--azul);
  background: #fff;
  border: 1.5px solid var(--azul);
  font-size: 14px;
}
.mdr-gallery-wrap .carrusel-pausa:hover { background: rgba(49, 73, 110, 0.08); border-color: var(--azul-medio); }
.mdr-gallery-wrap .carrusel-pausa:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 2px; }

/* --- Tostadas: carrusel dentro de la pantalla unica ---
   (1) La pantalla de M1 mide 100svh, pero el <body> lleva un border-top de 6px
   (regla global, linea ~98) que M1 no descontó: la pagina ya scrolleaba 6 px.
   El ancho de esa franja es ahora la variable --borde-superior (:root).
   M1 lo midio con body.scrollHeight (812) y no con
   documentElement.scrollHeight (818). Se descuenta aqui, sin tocar el bloque
   de M1 ni la regla global. */
.proximamente-pantalla { min-height: calc(100svh - var(--borde-superior)); }

/* (2) La tira es mas ancha que la columna de texto (34rem): 2,5 fotos a
   375, 3,5 a 640 y 4,5 a 1024, con tope de 52rem para que no se estire. En un
   flex en columna con align-items:center, un hijo mas ancho que el contenedor
   se desborda por igual a los dos lados. min(..., 22svh) evita que, en una
   pantalla baja, las fotos empujen el contenido fuera de la vista. */
.proximamente-carrusel {
  --prox-gap: 0.6rem;
  --prox-vistas: 2.5;
  --prox-huecos: 2;
  width: min(52rem, calc(100vw - 2.5rem));
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 640px) { .proximamente-carrusel { --prox-vistas: 3.5; --prox-huecos: 3; } }
@media (min-width: 1024px) { .proximamente-carrusel { --prox-vistas: 4.5; --prox-huecos: 4; } }
.proximamente-pista {
  position: relative;
  align-self: stretch;
  display: flex;
  gap: var(--prox-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 236, 220, 0.55) transparent;
  padding-bottom: 0.35rem;
}
.proximamente-pista:focus-visible { outline: 3px solid var(--brasa); outline-offset: 4px; }
/* Arrastre con raton (tostadas-proximamente.js): sin snap mientras se arrastra, y
   la <img> no es arrastrable de forma nativa (interrumpiria el pointermove). */
.proximamente-pista { cursor: grab; }
.proximamente-pista.is-arrastrando { scroll-snap-type: none; cursor: grabbing; }
.proximamente-pista img { pointer-events: none; -webkit-user-select: none; user-select: none; }
.proximamente-pista figure {
  margin: 0;
  flex: 0 0 min(calc((100% - var(--prox-huecos) * var(--prox-gap)) / var(--prox-vistas)), 22svh);
  scroll-snap-align: start;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.proximamente-pista img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.proximamente-carrusel .carrusel-pausa { border-color: rgba(244, 236, 220, 0.55); }
/* === M6 · fin === */

/* === M7 2026-10-03 · La Guarnición · inicio === */
/* Logo nuevo (logo-guarnicion-color.webp, RGBA con alfa): la cinta del logo es
   rojo oscuro y el hero es guinda, asi que sin fondo se pierde. Va sobre la
   misma placa crema que traia horneada el logo viejo (rgb 255 251 234, medido
   del pixel de fondo del webp anterior), ahora hecha con CSS, con el radio y la
   sombra de siempre. Reescribe la regla de arriba (.gu-hero-intro
   .brand-logo.gu-hero-logo) solo en lo que cambia: la placa. */
.gu-hero-intro .brand-logo.gu-hero-logo {
  box-sizing: border-box;
  height: auto;
  background: rgb(255, 251, 234);
  padding: clamp(0.6rem, 3.4%, 1.1rem);
  filter: none;
}
/* === M7 · fin === */

/* === M8 2026-10-03 · Principal · inicio ===
   Frente M8 (Mantenimiento 03-10): cada botón con un solo destino y tres
   bloques nuevos en index.html — «¿Qué buscas?» (#que-buscas, #para-negocios),
   datos clave (#datos-clave) y paso a paso (#pasos). Mecanismos medidos en
   franquiciasdetacos.com (documentacion/referencias/2026-10-03-medicion-
   franquiciasdetacos.md) llevados a la paleta oscura de R1; la paleta azul, el
   papel y la tipografía de la referencia no se toman.
   Bloque nuevo y autocontenido: no edita ninguna regla anterior. Donde pisa
   una regla compartida (.r1-escena y su padding, el color del rótulo sobre la
   banda naranja) lo hace con la misma clase y por ir después en la cascada. */

/* ---------- 1 · Ancho y respiro de los bloques nuevos ---------- */
.container.m8-ancho { width: min(1240px, calc(100% - 2.5rem)); }
.m8-busca { position: relative; overflow-x: clip; padding: clamp(2.4rem, 5vw, 3.2rem) 0 clamp(1rem, 2vw, 1.2rem); }
.m8-busca--negocio { padding: clamp(1rem, 2vw, 1.4rem) 0 clamp(2.4rem, 4.5vw, 3rem); }
.m8-busca .r1-cabeza { max-width: 62rem; margin-bottom: 1rem; }
.m8-busca .r1-bajada { color: var(--peltre); font-size: 1.02rem; margin: 0.6rem 0 0; }

/* ---------- 2 · ¿Qué buscas? — tarjeta con círculo montado ----------
   Medido en #razones de la referencia: borde 3 px, radio 18 px, círculo de
   120 px que sube 77 px sobre el borde, línea bajo el título. Aquí el círculo
   mide 88 px y queda con su centro sobre el borde (mitad fuera, mitad dentro);
   el aro --carbon-2 que lo rodea "corta" la línea de la tarjeta detrás. */
.m8-grupo { scroll-margin-top: 84px; }
.m8-grupo-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--crema);
}
.m8-grupo-titulo span {
  font-family: var(--heavy);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--brasa);
  padding: 7px 12px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
}
.m8-desliza {
  display: none;
  margin: 0.7rem 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--peltre);
}
.m8-pista { padding-top: 54px; }
.m8-cartas {
  --m8-gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 58px var(--m8-gap);
}
.m8-carta {
  position: relative;
  flex: 0 1 calc((100% - 3 * var(--m8-gap)) / 4);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 18px 16px;
  background: var(--carbon-2);
  border: 3px solid var(--c);
  border-radius: 18px;
}
.m8-disco {
  position: absolute;
  top: -46px;
  left: 50%;
  width: 88px;
  height: 88px;
  margin-left: -44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c);
  color: var(--c-ink);
  box-shadow: 0 0 0 6px var(--carbon-2);
}
.m8-ico {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.m8-carta-titulo {
  margin: 0 0 0.6rem;
  max-width: 17ch;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Línea discontinua bajo el título: en la referencia es una imagen de 290×1 px
   (linea.png, 213 bytes); aquí es un borde discontinuo del propio CSS. */
.m8-carta-titulo::after {
  content: "";
  display: block;
  width: 84%;
  margin: 0.6rem auto 0;
  border-top: 2px dashed color-mix(in oklab, var(--c) 65%, transparent);
}
.m8-carta-texto { margin: 0 0 0.9rem; font-size: 15px; line-height: 1.45; color: var(--peltre); text-wrap: pretty; }
.m8-carta-btn {
  margin-top: auto;
  width: 100%;
  min-height: 46px;
  padding: 10px 8px;
  font-size: 0.92rem;
  text-align: center;
  background: var(--c);
  color: var(--c-ink);
}
.m8-carta-btn:hover { background: var(--c); filter: brightness(1.12); }
.m8-carta-btn:focus-visible { outline: 3px solid var(--crema); outline-offset: 3px; }
@media (hover: hover) {
  .m8-carta { transition: transform 0.2s ease; }
  .m8-carta:hover { transform: translateY(-3px); }
}

/* Tableta: tres por fila. */
@media (max-width: 1099px) {
  .m8-carta { flex-basis: calc((100% - 2 * var(--m8-gap)) / 3); }
}
/* Móvil: una tira que se desliza (scroll-snap, sin JavaScript). Mantiene el
   mecanismo del círculo montado en 375 sin apilar once tarjetas; la referencia
   hace lo mismo con un Swiper. El círculo asoma por arriba, por eso la tira
   lleva 58 px de relleno superior. */
@media (max-width: 719px) {
  .m8-desliza { display: block; }
  .m8-pista {
    overflow-x: auto;
    margin-inline: -1.25rem;
    padding: 54px 1.25rem 16px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .m8-pista:focus-visible { outline: 3px solid var(--crema); outline-offset: -3px; }
  .m8-cartas { flex-wrap: nowrap; justify-content: flex-start; width: max-content; --m8-gap: 16px; }
  .m8-carta { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; }
}

/* ---------- 3 · Datos clave — banda con el plato que la pisa ----------
   Referencia (#datos): sección de 995 px con relleno superior de 550 px, el
   plato y la banda en UNA imagen de fondo (655 KB), datos separados por
   lineas2.png (4×100 px). Aquí: banda de CSS con borde superior inclinado, un
   recorte con alfa que la pisa por la mitad, y divisores discontinuos. */
.m8-datos {
  --m8-plato-w: clamp(250px, 36vw, 500px);
  --m8-plato-h: calc(var(--m8-plato-w) * 520 / 900);
  --m8-trazo: rgba(26, 21, 17, 0.55);
  position: relative;
  overflow-x: clip;
  margin-top: clamp(-4.5rem, -6vw, -2.5rem);
  padding-top: calc(var(--m8-plato-h) / 2);
}
.m8-datos-plato {
  position: absolute;
  top: 0;
  right: max(1.25rem, calc((100% - 1240px) / 2));
  z-index: 2;
  width: var(--m8-plato-w);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.5));
  transform: translateY(var(--deriva, 0px)) rotate(-4deg);
}
.m8-datos-banda {
  position: relative;
  padding: clamp(1.8rem, 3vw, 2.4rem) 0 clamp(2rem, 3vw, 2.2rem);
  background: var(--brasa);
  color: var(--carbon);
  clip-path: polygon(0 clamp(24px, 4vw, 56px), 100% 0, 100% 100%, 0 100%);
}
.m8-datos-intro { padding-top: calc(var(--m8-plato-h) / 2 + 0.6rem); }
@media (min-width: 900px) {
  .m8-datos-intro { padding-top: clamp(0.5rem, 2vw, 1.6rem); max-width: min(48%, 32rem); }
}
.m8-datos .r1-rotulo { color: var(--carbon); }
.m8-datos .r1-rotulo::before {
  border-color: var(--carbon);
  box-shadow: inset 0 0 0 3.5px var(--brasa), inset 0 0 0 5px var(--carbon);
}
.m8-datos .r1-titular { margin: 0; max-width: 22ch; font-size: clamp(30px, 3.1vw, 44px); color: var(--carbon); }
.m8-datos-bajada { margin: 0.6rem 0 0; font-size: 17px; line-height: 1.45; color: var(--carbon); }
.m8-datos-lista {
  list-style: none;
  margin: clamp(1.4rem, 2.4vw, 1.8rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.m8-datos-lista li { padding: 8px clamp(10px, 1.4vw, 20px); text-align: center; }
.m8-datos-lista li + li { border-left: 2px dashed var(--m8-trazo); }
.m8-dato-cifra {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.m8-dato-texto { display: block; max-width: 19ch; margin: 0.5rem auto 0; font-size: 15px; line-height: 1.35; }
@media (min-width: 600px) and (max-width: 1099px) {
  .m8-datos-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m8-datos-lista li { border: 0; padding-block: 14px; }
  .m8-datos-lista li:not(:nth-child(3n + 1)) { border-left: 2px dashed var(--m8-trazo); }
  .m8-datos-lista li:nth-child(n + 4) { border-top: 2px dashed var(--m8-trazo); }
}
@media (max-width: 599px) {
  .m8-datos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m8-datos-lista li { border: 0; }
  .m8-datos-lista li:nth-child(even) { border-left: 2px dashed var(--m8-trazo); }
  .m8-datos-lista li:nth-child(n + 3) { border-top: 2px dashed var(--m8-trazo); }
  .m8-dato-texto { font-size: 14px; }
}

/* ---------- 4 · Paso a paso ----------
   Referencia (#pasos2): titular a la izquierda, pasos a la derecha, número
   grande en letra de brocha (Under Station, 32 px) + título en negrita. Aquí el
   número va en la tipografía de display del sitio (la brocha es de otra marca)
   y mide 44-68 px; son tres pasos, no seis. */
.m8-pasos { position: relative; overflow-x: clip; padding: clamp(2.2rem, 3.6vw, 2.4rem) 0; }
.m8-pasos-grid { display: grid; gap: 1.6rem 4rem; align-items: start; }
@media (min-width: 900px) { .m8-pasos-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.m8-pasos .r1-titular { margin: 0; max-width: 14ch; }
.m8-pasos-bajada { margin: 0.7rem 0 0; color: var(--peltre); font-size: 1.02rem; }
.m8-pasos-lista { list-style: none; margin: 0; padding: 0; }
.m8-pasos-lista li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.2rem;
  align-items: start;
  padding: 0.9rem 0;
  border-top: 2px dashed rgba(244, 236, 220, 0.22);
}
.m8-pasos-lista li:first-child { border-top: 0; padding-top: 0; }
.m8-paso-num {
  min-width: 2.3ch;
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 68px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--brasa);
  font-variant-numeric: tabular-nums;
}
.m8-paso-titulo { margin: 0 0 0.3rem; font-family: var(--heavy); font-weight: 900; font-size: 18px; line-height: 1.25; }
.m8-paso-texto { margin: 0; max-width: 38rem; font-size: 15.5px; line-height: 1.5; color: var(--peltre); }

/* ---------- 5 · Recortes que flotan en las orillas ----------
   Decoración (alt vacío, aria-hidden). Solo con ancho de sobra: por debajo de
   1400 px los costados no dejan margen y taparían una tarjeta. La deriva con
   el scroll (≤ 40 px de recorrido) la pone index.js en --deriva y se apaga con
   prefers-reduced-motion. */
.m8-flota {
  display: none;
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
  transform: translateY(var(--deriva, 0px)) rotate(var(--giro, 0deg));
}
@media (min-width: 1400px) {
  .m8-flota { display: block; width: 64px; }
  .m8-flota--botella { right: 10px; top: 16%; --giro: 9deg; }
  .m8-flota--frasco { left: 10px; top: 24%; --giro: -8deg; }
}

/* ---------- 6 · Banda de negocio: sin los botones que ya tienen tarjeta ----------
   Con la lista de vías y los dos botones fuera, la columna izquierda queda
   corta junto al formulario: se queda pegada mientras se rellena. */
@media (min-width: 880px) {
  body[data-brand="grupo"] #negocio .negocio-intro { position: sticky; top: 96px; }
}
/* ---------- 7 · Cabecera: cuatro enlaces y un CTA más largo ----------
   «Hacer negocio con nosotros» mide 231 px (el «Hablar de alianzas» de antes,
   162) y el menú pasó de tres enlaces a cuatro: entre 721 y 899 px la nav
   desbordaba (hasta 105 px a 721) y dejaba enlaces enfocables fuera de la
   cabecera. Se aprieta el relleno de los enlaces y, de 421 a 899 px, el rótulo
   «Las 5 marcas» se oculta SOLO visualmente (mismo recurso que ya usa el sitio
   a ≤ 420 px), así que el botón del índice conserva su nombre accesible. */
@media (max-width: 899px) {
  .main-nav a { padding-inline: 9px; }
}
/* De 721 a 767 px aún faltan 36 px: esa franja usa la cabecera del móvil (sin
   la nav; el índice y el CTA siguen), solo en esta página. */
@media (min-width: 721px) and (max-width: 767px) {
  body[data-brand="grupo"] .main-nav { display: none; }
  body[data-brand="grupo"] .header-cta { margin-left: auto; }
}
@media (min-width: 421px) and (max-width: 899px) {
  .indice-trigger-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .indice-trigger { padding: 8px 10px; }
}
/* El logo no se encoge nunca: con «Hacer negocio con nosotros» (probada y
   descartada) caía a 38 px de ancho a 375 y a 23 px a 360 porque el CTA le
   quitaba el sitio. Con «Negocios con nosotros» (169 px) cabe a 72 px; a 360 y
   menos se aprieta un poco el CTA y el hueco entre piezas para no tocar el logo. */
@media (min-width: 360px) {
  body[data-brand="grupo"] .wordmark { flex-shrink: 0; }
}
@media (max-width: 380px) {
  body[data-brand="grupo"] .header-inner { gap: 10px; }
  body[data-brand="grupo"] .header-cta { padding-inline: 11px; }
}
/* Por debajo de 360 px el logo vuelve a ceder como antes (44 px a 320), pero el
   CTA se compacta para que ceda menos que con el texto a tamaño normal. */
@media (max-width: 359px) {
  body[data-brand="grupo"] .header-cta { font-size: 0.74rem; padding-inline: 9px; }
}
/* === M8 · fin === */

/* === M10 2026-10-15 · configurador · inicio === */
/* "Continuar" del paso de seleccion libre (Arma tu charola): ocupa su propia fila bajo las opciones. */
.mi-arma-op--continuar { flex-basis: 100%; margin-top: 0.4rem; }
/* === M10 · fin === */

/* === M11 2026-10-15 · Del Abuelo interfaz · inicio ===
   Quitarle a del-abuelo.html el patron de interfaz generica: la misma tarjeta
   oscura con borde de 1 px y esquina de 14 px en cada seccion, botones pildora
   apilados, un borde y un brillo naranja para marcar "la activa", y el mismo
   antetitulo naranja abriendo todas las secciones.

   TODO va acotado a .pagina-del-abuelo (clase del <body> de esta pagina):
   menu.html y reservar.html comparten data-brand="botanas" y muchas clases, y
   no se tocan aqui. Informe: documentacion/auditorias/tanda-2026-10-15/
   M11-del-abuelo-interfaz.md · decisiones: M11-decisiones.md.

   Reglas viejas que quedan SIN EFECTO en esta pagina (estan fuera de este
   bloque y no se editan; aqui se reescriben con mas especificidad):
   .branch-card (fondo, borde, radio, overflow), .branch-card.is-active (borde y
   brillo naranja), .branch-card-actions, .branch-card--cotiza*, .branch-map-link
   (pildora con aro), .branch-map-toggle (enlace subrayado), .branch-phone,
   .event-card (fondo y borde), .event-branch-tab (pildoras), .menu-cat-chip
   (borde), .menu-image-fallback (caja) y .panel (sombra).

   Escala de radios de la pagina: 10 px (superficies y fotos, via --radius),
   999 px (controles: botones, pestañas, pausa) y 50 % (flechas redondas). */

.pagina-del-abuelo {
  --radius: 10px;
  --m11-linea: rgba(244, 236, 220, 0.16);
}

/* ---------- Hero: texto legible sobre la foto ---------- */
/* Medido sobre pixeles (scripts/medir-del-abuelo-m11.js): el antetitulo naranja
   daba 1,3:1 y el "← Grupo Pro CYB" 1,9:1 sobre la charola. El naranja es
   color de FONDO (ver --brasa-texto arriba): aqui el antetitulo pasa a hueso
   con una raya naranja delante, y el velo arranca antes. */
.pagina-del-abuelo .hero-botanas--v2 .hero-photo::after {
  background: linear-gradient(
    180deg,
    rgba(26, 21, 17, 0.05) 0%,
    rgba(26, 21, 17, 0.62) 26%,
    rgba(26, 21, 17, 0.9) 46%,
    rgba(26, 21, 17, 0.96) 100%
  );
}
@media (max-width: 639px) {
  /* A 375 la miga cae sobre la parte clara de la charola: el velo arranca antes. */
  .pagina-del-abuelo .hero-botanas--v2 .hero-photo::after {
    background: linear-gradient(
      180deg,
      rgba(26, 21, 17, 0.05) 0%,
      rgba(26, 21, 17, 0.8) 20%,
      rgba(26, 21, 17, 0.93) 38%,
      rgba(26, 21, 17, 0.96) 100%
    );
  }
}
.pagina-del-abuelo .hero-botanas--v2 .breadcrumb {
  color: var(--crema);
  opacity: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-bottom: 0.4rem;
}
.pagina-del-abuelo .hero-botanas--v2 .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--hueso);
}
.pagina-del-abuelo .hero-botanas--v2 .eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: none;
  background: var(--brasa);
}

/* ---------- Ritmo de las secciones ---------- */
/* El antetitulo naranja queda donde dice algo (hero, "Desde 2014", Club). En
   las otras cuatro baja a neutro con una raya delante, y cada seccion abre de
   una forma distinta en vez de repetir antetitulo + titular + parrafo. */
.pagina-del-abuelo #sucursales .eyebrow,
.pagina-del-abuelo #menu .eyebrow,
.pagina-del-abuelo .botanas-antojo .eyebrow,
.pagina-del-abuelo #eventos .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--peltre);
}
.pagina-del-abuelo #sucursales .eyebrow::before,
.pagina-del-abuelo #menu .eyebrow::before,
.pagina-del-abuelo .botanas-antojo .eyebrow::before,
.pagina-del-abuelo #eventos .eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: none;
  background: var(--m11-linea);
}
.pagina-del-abuelo #sucursales .section-heading h2,
.pagina-del-abuelo #eventos .section-heading h2 {
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  line-height: 1.04;
}
@media (min-width: 900px) {
  /* Sucursales: titular a la izquierda, el parrafo a la derecha, a ras. */
  .pagina-del-abuelo #sucursales .section-heading {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: 3rem;
    align-items: end;
  }
  .pagina-del-abuelo #sucursales .section-heading .eyebrow { grid-column: 1 / -1; }
  .pagina-del-abuelo #sucursales .section-heading h2 { margin: 0; }
  .pagina-del-abuelo #sucursales .section-heading p { margin: 0; }
}

/* ---------- Sucursales: fichas sin caja ---------- */
.pagina-del-abuelo .branch-grid {
  grid-template-columns: 1fr;
  gap: 2.75rem 2rem;
}
.pagina-del-abuelo .branch-card {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
/* "La activa" ya no se dice con borde y brillo (y no significaba nada: era
   siempre Latino). Si alguien llega con ?suc=, la ficha lleva la etiqueta
   "La que buscabas" y un fondo un tono mas claro. */
.pagina-del-abuelo .branch-card.is-active { border: 0; box-shadow: none; }
.pagina-del-abuelo .branch-card:has(.branch-flag) {
  background: var(--carbon-2);
  padding: 0.75rem;
  margin: -0.75rem;
  border-radius: var(--radius);
}
.pagina-del-abuelo .branch-card:has(.branch-flag) .branch-flag { top: 1.45rem; left: 1.45rem; }
.pagina-del-abuelo .branch-card img { border-radius: var(--radius); }
.pagina-del-abuelo .branch-card-body { padding: 1rem 0 0; gap: 0.3rem; }
.pagina-del-abuelo .branch-card h3 { font-size: 1.85rem; line-height: 1.05; margin-top: 0.1rem; }
.pagina-del-abuelo .horario-lista { margin: 0.7rem 0 0.4rem; gap: 0.3rem; }
.pagina-del-abuelo .horario-lista div { display: grid; grid-template-columns: 7.6rem 1fr; gap: 0 0.6rem; }
.pagina-del-abuelo .horario-lista dt { min-width: 0; }
.pagina-del-abuelo .branch-reserve {
  flex: none;
  align-self: stretch;
  margin-top: 0.9rem;
  min-height: 48px;
  font-size: 0.95rem;
}
/* Una sola accion primaria por ficha: "Reservar". Lo demas es una lista
   quieta de filas con icono, separadas por una linea. */
.pagina-del-abuelo .branch-mas { display: flex; flex-direction: column; margin-top: 0.7rem; }
.pagina-del-abuelo .branch-fila {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0;
  margin: 0;
  flex: none;
  font-family: var(--heavy);
  font-size: 0.88rem;
  color: var(--peltre);
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--m11-linea);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
.pagina-del-abuelo .branch-fila:hover { color: var(--crema); }
.pagina-del-abuelo .branch-fila svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--brasa);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pagina-del-abuelo .branch-card .map-embed { margin-top: 0.7rem; }

@media (min-width: 640px) and (max-width: 959px) {
  /* A 768 tres columnas no caben: la ficha pasa a foto a la izquierda. */
  .pagina-del-abuelo .branch-card {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: 1.75rem;
    align-items: start;
  }
  .pagina-del-abuelo .branch-card > img { aspect-ratio: 4 / 5; height: auto; align-self: start; }
  .pagina-del-abuelo .branch-card-body { padding-top: 0; }
}
@media (min-width: 960px) {
  .pagina-del-abuelo .branch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cotizar un evento: ya no es la cuarta "sucursal" de la rejilla sino una
   banda debajo de ellas. */
.pagina-del-abuelo .branch-cotiza {
  grid-column: 1 / -1;
  display: grid;
  gap: 1rem 2.5rem;
  align-items: center;
  padding-top: 1.75rem;
  border-top: 1px solid var(--m11-linea);
}
@media (min-width: 880px) {
  .pagina-del-abuelo .branch-cotiza { grid-template-columns: minmax(0, 1.3fr) auto auto; }
}
.pagina-del-abuelo .branch-cotiza h3 { font-family: var(--display); font-weight: 400; font-size: 1.85rem; margin: 0.2rem 0 0.2rem; }
.pagina-del-abuelo .branch-cotiza p { margin: 0; color: var(--peltre); }
.pagina-del-abuelo .branch-cotiza .cotiza-numero {
  margin: 0;
  font-family: var(--heavy);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--crema);
  white-space: nowrap;
}
.pagina-del-abuelo .branch-cotiza .cotiza-acciones { margin: 0; align-items: center; gap: 0.2rem 1.4rem; }

/* Enlace de accion secundaria con icono (cotizar y llamar). */
.pagina-del-abuelo .link-accion {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--heavy);
  font-size: 0.92rem;
  color: var(--crema);
  text-decoration: underline;
  text-decoration-color: rgba(244, 236, 220, 0.4);
  text-underline-offset: 5px;
}
.pagina-del-abuelo .link-accion:hover { color: var(--brasa); text-decoration-color: var(--brasa); }
.pagina-del-abuelo .link-accion svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Menu: puertas sin borde y sin la fila huerfana ---------- */
.pagina-del-abuelo .menu-cat-chip { border: 0; }
.pagina-del-abuelo .menu-native.menu-native--grupos {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.pagina-del-abuelo .menu-native--grupos > .menu-cat-chip--grupo:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 2 / 1;
}
.pagina-del-abuelo .menu-native--grupos > .mi-nota { grid-column: 1 / -1; margin-top: 1rem; }
@media (min-width: 640px) {
  .pagina-del-abuelo .menu-native.menu-native--grupos { grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
  .pagina-del-abuelo .menu-native--grupos > .menu-cat-chip--grupo:first-child {
    grid-column: span 2;
    aspect-ratio: auto;
  }
}
@media (min-width: 980px) {
  .pagina-del-abuelo .menu-native.menu-native--grupos { grid-template-columns: repeat(6, 1fr); gap: 1rem; }
  .pagina-del-abuelo .menu-native--grupos > .menu-cat-chip--grupo { grid-column: span 2; aspect-ratio: 4 / 3; }
  .pagina-del-abuelo .menu-native--grupos > .menu-cat-chip--grupo:nth-child(-n + 2) {
    grid-column: span 3;
    aspect-ratio: 2 / 1;
  }
  .pagina-del-abuelo .menu-native--grupos > .menu-cat-chip--grupo:nth-child(-n + 2) .menu-cat-title { font-size: 1.25rem; }
}
.pagina-del-abuelo .menu-image-fallback {
  background: none;
  border: 0;
  border-top: 1px solid var(--m11-linea);
  border-radius: 0;
  padding: 1.1rem 0 0;
  margin-top: 2rem;
}
.pagina-del-abuelo .menu-image-fallback img { border-radius: var(--radius); }
.pagina-del-abuelo .menu-image-fallback:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Eventos: fichas sin caja y pestañas de texto ---------- */
.pagina-del-abuelo .event-branch-tabs {
  gap: 0;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--m11-linea);
}
.pagina-del-abuelo .event-branch-tab {
  padding: 0 1.25rem;
  margin-bottom: -1px;
  background: none;
  color: var(--peltre);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
}
.pagina-del-abuelo .event-branch-tab:first-child { padding-left: 0; }
.pagina-del-abuelo .event-branch-tab:hover { color: var(--crema); }
.pagina-del-abuelo .event-branch-tab.is-active {
  background: none;
  color: var(--crema);
  border-color: transparent;
  border-bottom-color: var(--brasa);
}
.pagina-del-abuelo .event-grid { gap: 2.25rem 1.5rem; }
.pagina-del-abuelo .event-card { background: none; border: 0; border-radius: 0; overflow: visible; }
.pagina-del-abuelo .event-card img { border-radius: var(--radius); }
.pagina-del-abuelo .event-card > span { padding: 1rem 0 0; }
.pagina-del-abuelo .event-card h3 { padding: 0.25rem 0 0; }
.pagina-del-abuelo .event-card p { padding: 0.25rem 0 0; }
.pagina-del-abuelo .eventos-contacto .cotiza-numero { font-size: 1rem; }
.pagina-del-abuelo .eventos-cabecera-acciones { flex-direction: column; align-items: flex-start; gap: 0; }
.pagina-del-abuelo .eventos-contacto { flex-direction: column; align-items: flex-start; gap: 0; }

/* Las cabeceras con accion a la derecha (Menu y Eventos) heredaban el tope de
   640 px de .section-heading y la accion caia debajo. */
.pagina-del-abuelo #menu .row-heading,
.pagina-del-abuelo #eventos .row-heading { max-width: none; }

/* ---------- Antojo real: flechas sin vidrio ---------- */
.pagina-del-abuelo .antojo-flecha {
  backdrop-filter: none;
  background: rgba(20, 16, 12, 0.9);
  border-color: rgba(244, 236, 220, 0.34);
}

/* ---------- Club: panel plano y casillas con zona tactil ---------- */
.pagina-del-abuelo .club-band .panel { box-shadow: none; }
.pagina-del-abuelo .club-band .check-row { min-height: 44px; align-items: center; padding-block: 0.3rem; }
.pagina-del-abuelo .club-band .check-row input { margin-top: 0; }
/* El circulo hueco delante de la promesa parecia un radio sin marcar. */
.pagina-del-abuelo .promesa-respuesta { padding-left: 0; }
.pagina-del-abuelo .promesa-respuesta::before { display: none; }

/* "Recibir promos" ya no es boton sino enlace: zona tactil de 44 px. */
.pagina-del-abuelo .section-cta.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- Pie: enlaces con zona tactil ---------- */
.pagina-del-abuelo .site-footer ul { gap: 0; }
.pagina-del-abuelo .site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.pagina-del-abuelo .footer-legal a {
  display: inline-block;
  padding: 14px 0;
  margin: -14px 0;
}
/* === M11 · fin === */

/* === M12 2026-10-15 · índice · inicio ===
   La sexta banda del índice de marcas: Pro CYB Arquitectos. No tiene logotipo
   en imagen, así que su marca va como texto, «PRO CYB», en la letra de su
   propia web (Arial 600, interletra -0,06em). Hereda el color de la banda
   (crema en reposo, la tinta #181a19 al pasar), igual que los logotipos crema
   de las otras cinco. El resto de la banda es el componente de siempre. */
.indice-band-logo--texto {
  width: auto;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing: -0.06em;
  line-height: 1;
  white-space: nowrap;
}
/* En móvil las bandas son filas y «Pro CYB Arquitectos» es el nombre más
   largo de las seis: con el logotipo de texto, el lema y «Estás aquí» la fila
   medía 382 px en 375 (426 px en sus propias páginas). Solo esta banda se
   aprieta: logotipo más pequeño, nombre un punto menor y el lema y el «Estás
   aquí» autorizados a partirse. */
@media (max-width: 780px) {
  .indice-band-logo--texto { width: auto; font-size: 0.95rem; }
  .indice-band[data-brand-id="arquitectura"] { gap: 0.7rem; }
  .indice-band[data-brand-id="arquitectura"] .indice-band-name { font-size: clamp(1.1rem, 5vw, 1.5rem); min-width: 0; }
  .indice-band[data-brand-id="arquitectura"] .indice-band-tag,
  .indice-band[data-brand-id="arquitectura"] .indice-band-here { min-width: 0; flex: 0 1 auto; }
}
/* === M12 · fin === */