/* ==========================================================================
   LA BANDA DE MARCA Y EL PIE DEL SITIO

   Porteado de `MAQUETA-INICIO-ESCENARIO.html` / `MAQUETA-INICIO-CARTELERA.html`
   —las dos comparten esta cabecera y este pie, escritos una sola vez— el
   12/09/2026. El relevamiento que los respalda es `INICIO.md`.

   EL CSS SE COPIA, NO SE REINTERPRETA: los tokens, los radios, las sombras y
   sobre todo los nombres de clase son los mismos que en la maqueta. El diff
   contra el `<style>` de la maqueta tiene que seguir siendo corto.

   ==========================================================================
   POR QUE LAS CLASES LLEVAN `svo-`

   Porque esta es la primera hoja del proyecto que carga en TODAS las paginas.
   Hasta ahora cada hoja porteada vivia en una sola superficie —`panel.css`
   solo en `/panel/`, `mapas.css` solo en `/mapas/`, `survivo-events.css` solo
   en la ficha—, asi que la misma palabra podia significar tres cosas sin
   cruzarse nunca. Medido antes de portear: `.cabecera` ya existe en
   `mapas.css` (la fila de controles del editor), `.pie` en `panel.css` en tres
   lugares (el pie de un modal, de `details.permisos` y del selector de fecha)
   y `.franja` en `mapas.css` (una banda de 250px de alto). Sin prefijo, esta
   hoja les pintaria encima a las tres.

   `.solo-lectores` NO lleva prefijo: en `panel.css` significa exactamente lo
   mismo. Eso es vocabulario compartido, no un choque.

   La regla completa esta en la skill `survivo-design`.

   ==========================================================================
   LO QUE ESTA HOJA NO HACE

   No toca el `body`, ni los titulos, ni los enlaces, ni la tipografia de nada
   que este fuera de `.svo-cabecera` y `.svo-pie`. El medio de cada pagina
   —ficha, carrito, checkout, contenido— sigue siendo de Astra hasta que se
   porte, y esta hoja no se mete. Por eso cada regla cuelga de una de esas dos
   clases, y las dos unicas sueltas —`.svo-franja` y `.solo-lectores`— son
   nombres que no existen en ninguna otra parte del sitio.
   ========================================================================== */


/* La tipografia de la marca TIENE QUE GANARLE A UN `!important`.
   `astra-child/style.css` le clava `font-family:'Owners Wide' !important` a
   `body, button, input, select, textarea`. Owners Wide es la tipografia del
   lockup, no de texto: sin esta linea, el menu y el pie se dibujan con ella.
   Un selector de clase con `!important` le gana a uno de elemento con
   `!important`, que es exactamente lo que hace falta aca. */
.svo-cabecera,.svo-pie{
  font-family:"Archivo",system-ui,-apple-system,sans-serif!important;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased}
.svo-cabecera *,.svo-pie *{box-sizing:border-box}
.svo-cabecera a,.svo-pie a{box-shadow:none}

/* Solo para lectores de pantalla: el rotulo que la vista no necesita. */
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* El contenedor de cada seccion: 1260 como el panel, con 16 de aire en
   telefono y 20 de 700 para arriba. */
.svo-franja{max-width:1260px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.svo-franja{padding:0 20px}}


/* ==========================================================================
   LA CABECERA — LA BANDA DE MARCA

   Es la unica superficie de la pagina que NO cambia con el tema: el degradado
   de lima a violeta es la marca, no una decoracion del tema claro. Es la misma
   banda que `MAQUETA-PANEL.html` establecio, para que el sitio y el panel se
   lean como una sola marca.

   Las decisiones, con su fuente:

   - NAVEGACION VISIBLE, SIN HAMBURGUESA. NN/g (Pernice y Budiu, 2016, 179
     participantes): la navegacion oculta se usa la mitad de las veces que la
     visible y con cuatro enlaces o menos hay que mostrarlos. Survivo tiene
     tres. En escritorio van a la izquierda, en tinta negra; en telefono queda
     uno solo —el que no tiene icono— a la derecha.

   - "PRODUCTORES" ES UN ENLACE DE TEXTO, NO UN BOTON. NN/g (Sherwin, 2015):
     no se navega por audiencia; si hace falta, la audiencia va en la
     navegacion utilitaria "con prominencia reducida". El comprador es dueño
     de la banda; el productor tiene su bloque al final de la portada.

   - LOS CONTROLES MIDEN 36 Y SU AREA DE TOQUE 44. En telefono son dos
     seguidos: 36 mas los 8 de separacion dan 44 de centro a centro, que es el
     minimo de Apple y de WCAG 2.5.5.
   ========================================================================== */
.svo-cabecera{background:linear-gradient(90deg,var(--lima) 0%,var(--violeta) 100%);
  box-shadow:inset 0 -1px 0 rgba(10,10,10,.18)}
.svo-cabecera .barra{max-width:1260px;margin:0 auto;padding:0 16px;min-height:56px;
  display:flex;align-items:center;gap:8px}
@media (min-width:700px){.svo-cabecera .barra{padding:0 20px;min-height:60px;gap:14px}}
.svo-cabecera :focus-visible{outline:2px solid #fff;outline-offset:2px}
/* El logo y los enlaces viven en la mitad lima: ahi el anillo blanco no se ve
   (1,16:1). Negro sobre lima da 17:1. Los iconos siguen con el blanco. */
.svo-cabecera .logo:focus-visible,.svo-cabecera .nav a:focus-visible{outline-color:var(--tinta-lima)}
.svo-cabecera .logo{display:flex;align-items:center;color:var(--tinta-lima);text-decoration:none;
  flex:none;padding:8px 0}
.svo-cabecera .lockup-h{height:24px;width:auto;display:block}
@media (min-width:700px){.svo-cabecera .lockup-h{height:26px}}
/* Los enlaces de escritorio, en tinta negra porque viven en la mitad lima.
   Sin el alfa .78 que tenian: en el tercio del medio de la banda —donde el
   lima ya no es lima y el violeta todavia no es violeta— bajaba de 4,5:1. */
.svo-cabecera .nav{display:none}
@media (min-width:700px){
  .svo-cabecera .nav{display:flex;gap:2px;margin-left:8px}
  .svo-cabecera .nav a{padding:8px 11px;border-radius:8px;font-weight:600;font-size:13.5px;
    color:var(--tinta-lima);text-decoration:none;white-space:nowrap}
  .svo-cabecera .nav a:hover{background:rgba(10,10,10,.08)}
  .svo-cabecera .nav a.actual{box-shadow:inset 0 -2px 0 var(--tinta-lima);border-radius:0;padding-bottom:6px}
}
.svo-cabecera .lado{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--tinta-violeta)}
/* ACA VIVIAN LAS REGLAS DE `.productores-enlace`, SACADAS EL 13/09/2026.
   El enlace se quito del marcado porque tapaba el carrito en telefono: la
   pildora llevaba el rotulo entero al lado de los tres iconos y `.lado`
   terminaba en 388 con la pagina en 375. El porque completo, con la medicion,
   esta arriba del hueco que dejo en `svo-banda.php`. */
/* El area de toque es 44x44 aunque la caja se vea de 36: los 8 de separacion
   entre iconos son parte del target, no un hueco muerto. */
.svo-cabecera .icono::after{content:"";position:absolute;inset:-4px}
.svo-cabecera .icono{width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.14);color:var(--tinta-violeta);display:grid;place-items:center;
  flex:none;padding:0;text-decoration:none;position:relative}
.svo-cabecera .icono:hover{border-color:#fff;background:rgba(255,255,255,.28);color:#fff}
.svo-cabecera .icono svg{width:17px;height:17px;display:block}
/* La cuenta del carrito: negro con lima adentro, el otro par de la marca. Un
   circulo violeta sobre el extremo violeta de la banda se perderia. */
.svo-cabecera .icono .n{position:absolute;top:-6px;right:-7px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:#0a0a0a;color:var(--lima);display:grid;place-items:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;line-height:1}
.svo-cabecera .icono .n[hidden]{display:none}


/* ==========================================================================
   EL PIE

   Superficie del tema, no la banda: el sitio de hoy repite el degradado abajo,
   y en telefono eso es una segunda pantalla de violeta con texto blanco sobre
   lima, que no se lee. El pie es una zona de servicio —contacto, legal, la
   cuenta— y se dibuja como tal, con el lockup apilado en tinta.

   Todo lo que dice sale de una constante de `00-pais.php`, leida con
   `defined()` y con respaldo vacio. Aca no se escribe ni un mail, ni un
   telefono, ni un nombre de pais: esta hoja es NUCLEO y baja igual a Colombia.
   ========================================================================== */
.svo-pie{margin-top:56px;border-top:1px solid var(--line);background:var(--surface-2);color:var(--ink)}
.svo-pie .adentro{padding-top:40px;padding-bottom:30px;display:grid;gap:28px 24px}
@media (min-width:560px){.svo-pie .adentro{grid-template-columns:1fr 1fr}}
@media (min-width:880px){.svo-pie .adentro{grid-template-columns:1.5fr 1fr 1fr 1fr;padding-top:44px;padding-bottom:36px}}
.svo-pie .lockup-v{height:58px;width:auto;display:block;color:var(--ink)}
.svo-pie .marca-txt{font-size:13.5px;color:var(--ink-2);max-width:30ch;margin-top:14px;line-height:1.5}
@media (min-width:560px){.svo-pie .col-marca{grid-column:1/-1}}
@media (min-width:880px){.svo-pie .col-marca{grid-column:auto}}
/* Todo lo que informa va en `--ink-2`, no en `--ink-3`: el terciario da 3,1:1
   en claro y 4,3:1 en oscuro, y no llega para texto. `--ink-3` queda para
   iconos y bordes. Y los enlaces ganan area de toque sin agrandar el texto. */
.svo-pie h4{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);
  font-weight:700;margin:0 0 11px}
.svo-pie ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.svo-pie li{font-size:14px;line-height:1.4}
.svo-pie a{color:var(--ink);text-decoration:none;display:inline-block;padding:6px 0;margin:-6px 0}
.svo-pie a:hover{color:var(--acento);text-decoration:underline;text-underline-offset:3px}
.svo-pie .mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:13px}
.svo-pie .nota{color:var(--ink-2);font-size:12.5px}
.svo-pie .final{border-top:1px solid var(--line)}
.svo-pie .final .adentro{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;
  padding-top:14px;padding-bottom:18px;font-size:12.5px;color:var(--ink-2)}


/* ==========================================================================
   AÑADIDOS DEL TEMA — lo que no esta en la maqueta, y por que

   Va al final y con rotulo, como manda la regla de porteo: nunca intercalado
   entre lo copiado, para que el diff contra la maqueta siga siendo legible.

   POR AHORA NO HAY NINGUNO, y vale la pena decir por que: la primera version
   traia dos reglas para tapar la cabecera y el pie de Astra —un
   `.site-header{margin-bottom:0}` y un `.site-footer{display:none}`—. Las dos
   sobraban: `svo-banda.php` desengancha `astra_header` y `astra_footer`, asi
   que ese markup no llega a existir y no hay nada que tapar. Verificado en el
   HTML servido: las unicas etiquetas de chrome son `.svo-cabecera` y
   `.svo-pie`.

   CSS muerto con un comentario que afirma algo que ya no pasa es peor que no
   tener la regla: la proxima persona lo lee y cree que hace falta.
   ========================================================================== */