/* ======================================================================
   ATLAS DEL VINO MUNDIAL — atlas.css (COMPARTIDO)
   Estilos comunes de todo el proyecto: base, navegación, contenedores,
   mapas, leyendas, tarjetas, índice y pie.
   Cada página suma su propio CSS con su tema y ajustes:
   index, chile, argentina, australia, nuevazelanda, espana,
   sudafrica, uruguay, mexico y tipicidad (.css).
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Work+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ----------------------------------------------------------------------
   1. VARIABLES GLOBALES — paleta única del proyecto
   (fuente de verdad también para los "puntitos" del index)
---------------------------------------------------------------------- */
:root {
  /* Neutros compartidos */
  --panel-border: rgba(232, 217, 176, 0.14);
  --gold: #C9A24B;
  --gold-dim: rgba(201, 162, 75, 0.45);
  --gold-soft: rgba(201, 162, 75, 0.16);
  --ivory: #F3ECDD;
  --muted: #AE9CA1;

  /* Chile */
  --north: #B8763A;
  --north-soft: rgba(184, 118, 58, 0.20);
  --central: #9C2740;
  --central-soft: rgba(156, 39, 64, 0.20);
  --south: #2C6B5F;
  --south-soft: rgba(44, 107, 95, 0.22);

  /* Argentina */
  --noa: #B8763A;
  --noa-soft: rgba(184, 118, 58, 0.20);
  --cuyo: #9C3927;
  --cuyo-soft: rgba(156, 57, 39, 0.20);
  --patagonia: #2C5B6B;
  --patagonia-soft: rgba(44, 91, 107, 0.22);

  /* Australia — súper-zonas GI */
  --sea: #B8763A;
  --sea-soft: rgba(184, 118, 58, 0.20);
  --wa: #2C5B7A;
  --wa-soft: rgba(44, 91, 122, 0.20);
  /* Australia — acentos por estado */
  --c-sa: #B8763A;
  --c-vic: #9C2740;
  --c-nsw: #A8622F;
  --c-qld: #7A8C4F;
  --c-tas: #3F7A82;
  --c-wa: #2C5B7A;

  /* Nueva Zelanda (comparte --north; su tema redefine --south) */
  --nz-south: #2C6B7A;
  --nz-south-soft: rgba(44, 107, 122, 0.22);

  /* España */
  --z-atlantico: #2C6B5F;
  --z-norte: #B8763A;
  --z-meseta: #7A4A2C;
  --z-cataluna: #9C2740;
  --z-levante: #6B7A3F;
  --z-sur: #A8842E;
}

/* ----------------------------------------------------------------------
   2. TEMAS POR PÁGINA — cada página define el suyo en su propio CSS
   (index.css, chile.css, argentina.css, australia.css, nuevazelanda.css,
   espana.css, sudafrica.css, uruguay.css, mexico.css, tipicidad.css)
---------------------------------------------------------------------- */
body,
body.theme-index {
  --bg: #110C0A;
  --page-bg: #0A0706;
  --panel: #1C1613;
}

/* Filas de tipicidad y pestañas: ver tipicidad.css */
.grape-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.grape-link:hover {
  color: var(--gold);
}

/* ----------------------------------------------------------------------
   3. RESET Y BASE
---------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
}

body {
  font-family: 'Work Sans', sans-serif;
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
}

body:not(.theme-index) {
  padding: 0 0 28px;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 1.5px solid var(--gold);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------------
   4. NAVEGACIÓN
---------------------------------------------------------------------- */
.topnav {
  width: 100%;
  display: flex;
  justify-content: center;
  background: var(--page-bg);
  border-bottom: 1px solid var(--panel-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

body:not(.theme-index) .topnav {
  margin-bottom: 28px;
}

.topnav-inner {
  width: 100%;
  max-width: 900px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-wrap: wrap;
  row-gap: 8px;
}

.topnav-inner a.brand,
.topnav-brand {
  color: var(--gold);
}

.topnav-links {
  display: flex;
  gap: 22px;
  color: var(--muted);
  flex-wrap: wrap;
  row-gap: 6px;
}

.topnav-links a:hover {
  color: var(--ivory);
}

.topnav-links a.current {
  color: var(--ivory);
  border-bottom: 1px solid var(--gold-dim);
  padding-bottom: 2px;
}

/* ----------------------------------------------------------------------
   5. CONTENEDORES
---------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1120px;
  padding: 0 24px 60px;
}

.poster {
  width: 100%;
  max-width: 900px;
  margin: 0 10px;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(201, 162, 75, 0.09), transparent 55%),
    radial-gradient(circle at 100% 100%, var(--poster-glow, rgba(156, 39, 64, 0.10)), transparent 45%);
  padding: 50px 56px 46px;
  position: relative;
  border: 1px solid rgba(232, 217, 176, 0.10);
}

/* ----------------------------------------------------------------------
   6. CABECERAS
---------------------------------------------------------------------- */
header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

header.hero {
  padding: 64px 0 34px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.28em;
  font-size: 11px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero .eyebrow {
  margin-bottom: 14px;
}

h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.05;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}

h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

.hero h1 {
  font-size: 52px;
  line-height: 1.08;
  margin: 0 0 16px;
}

.subtitle {
  max-width: 560px;
  margin: 0 auto;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.hero .subtitle {
  font-size: 15px;
  line-height: 1.65;
}

/* .theme-*.subtitle por página: ver su CSS (australia, nuevazelanda, espana) */

.rule {
  width: 120px;
  height: 1px;
  background: var(--gold-dim);
  margin: 18px auto 0;
}

.hero .rule {
  margin-top: 22px;
}

/* ----------------------------------------------------------------------
   7. ETIQUETAS DE SECCIÓN
---------------------------------------------------------------------- */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 16px;
}

.section-label .num {
  font-family: 'IBM Plex Mono';
  font-size: 11px;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-label h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 19px;
  margin: 0;
  letter-spacing: 0.01em;
}

.section-label .line {
  flex: 1;
  height: 1px;
  background: var(--panel-border);
}

.section-label .tally {
  font-family: 'IBM Plex Mono';
  font-size: 10.5px;
  color: var(--muted);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: 4px 11px;
  white-space: nowrap;
}

.section-label .tally b {
  color: var(--gold);
  font-weight: 600;
}

/* ----------------------------------------------------------------------
   8. MAPA MUNDIAL
---------------------------------------------------------------------- */
.world-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 20px 22px 16px;
  margin-bottom: 34px;
}

.world-map-wrap {
  position: relative;
}

#worldSvg {
  width: 100%;
  display: block;
}

.band-caption {
  font-family: 'IBM Plex Mono';
  font-size: 9.5px;
  letter-spacing: 0.06em;
  fill: var(--gold);
  opacity: 0.85;
}

.world-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted);
}

.world-legend .item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dot-avail {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}

.dot-soon {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.2px solid var(--muted);
  display: inline-block;
}

.swatch-line {
  width: 16px;
  height: 2px;
  background: var(--gold);
  opacity: 0.55;
  display: inline-block;
}

.connector-note {
  text-align: center;
  font-family: 'IBM Plex Mono';
  font-size: 10.5px;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-top: 10px;
}

/* Pines interactivos (index) */
.pin-label {
  font-family: 'IBM Plex Mono';
  font-size: 10.5px;
}

.pin-label.on {
  fill: var(--ivory);
  font-weight: 600;
}

.pin-label.off {
  fill: var(--muted);
}

svg a {
  cursor: pointer;
}

svg a:focus {
  outline: none;
}

.pin-ring {
  transition: r 160ms ease, opacity 160ms ease;
}

.pin-hovered .pin-ring {
  r: 9.5;
}

.pin-hovered .pin-dot {
  filter: drop-shadow(0 0 4px rgba(201, 162, 75, 0.9));
}

/* ----------------------------------------------------------------------
   9. PANELES DE MAPA POR PAÍS
---------------------------------------------------------------------- */
.chile-panel,
.argentina-panel,
.aus-panel,
.nz-panel,
.es-panel,
.sa-panel,
.uy-panel,
.mx-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 26px 26px 20px;
}

.chile-panel,
.argentina-panel,
.nz-panel,
.sa-panel,
.uy-panel,
.mx-panel {
  margin-bottom: 30px;
}

.aus-panel {
  margin-bottom: 14px;
}

.es-panel {
  margin-bottom: 16px;
}

.argentina-map-container,
.chile-map-container,
.nz-map-container,
.sa-map-container,
.uy-map-container,
.mx-map-container {
  position: relative;
  width: 100%;
  height: 820px;
}

.argentina-map-container svg,
.chile-map-container svg,
.nz-map-container svg,
.sa-map-container svg,
.uy-map-container svg,
.mx-map-container svg,
.aus-map-container svg,
.es-map-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ----------------------------------------------------------------------
   10. TIPOGRAFÍA DENTRO DE LOS SVG
---------------------------------------------------------------------- */
.map-sub-label {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  fill: var(--ivory);
}

.map-sub-alt {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 10.5px;
  fill: var(--gold);
}

.map-sub-coords {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  font-size: 10px;
  fill: var(--muted);
}

.map-zone-title {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-anchor: middle;
}

.map-state-label {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.map-zone-banner {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  opacity: 0.6;
}

.map-lat-tick {
  font-family: 'IBM Plex Mono';
  font-size: 10px;
  fill: var(--muted);
  text-anchor: end;
}

.map-caption {
  text-align: center;
  font-family: 'IBM Plex Mono';
  font-size: 10.5px;
  color: var(--gold);
  letter-spacing: 0.06em;
  margin-top: 12px;
  line-height: 1.6;
}

.map-caption span {
  color: var(--muted);
}

/* ----------------------------------------------------------------------
   11. AUSTRALIA — cabeceras de grupo
---------------------------------------------------------------------- */
.group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
}

.group-header .gdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.group-header .gtitle {
  font-family: 'IBM Plex Mono';
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory);
}

.group-header .gnote {
  font-size: 11px;
  color: var(--muted);
}

.group-header .gline {
  flex: 1;
  height: 1px;
  background: var(--panel-border);
}

.varietal-section {
  margin-bottom: 28px;
}

.varietal-section .varietals {
  margin-bottom: 10px;
}

/* ----------------------------------------------------------------------
   12. ESPAÑA — CCAA, leyenda DO y excepciones
---------------------------------------------------------------------- */
.ccaa-border {
  fill: none;
  stroke: rgba(232, 217, 176, 0.22);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ccaa-label {
  font-family: 'IBM Plex Mono', monospace;
  fill: rgba(243, 236, 221, 0.36);
  letter-spacing: 0.14em;
  text-anchor: middle;
}

.do-zone {
  stroke-width: 1.2;
  stroke-linejoin: round;
  fill-opacity: 0.3;
  stroke-opacity: 0.75;
}

.do-zone.diffuse {
  fill-opacity: 0.1;
  stroke-opacity: 0.5;
  stroke-dasharray: 3 3;
}

.pin-num-zone {
  font-family: 'IBM Plex Mono';
  font-weight: 700;
  font-size: 11px;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #150F0D;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.legend-zone {
  margin-bottom: 18px;
}

.legend-zone-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.legend-zone-head .zdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-zone-head .ztitle {
  font-family: 'IBM Plex Mono';
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory);
}

.legend-zone-head .zline {
  flex: 1;
  height: 1px;
  background: var(--panel-border);
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 18px;
  margin-bottom: 6px;
}

.legend-zone .zone-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  line-height: 1.55;
  color: var(--muted);
  border-left: 2px solid var(--gold-dim);
  padding: 6px 10px;
  margin: 8px 0 4px;
  background: rgba(201, 162, 75, 0.06);
  border-radius: 0 5px 5px 0;
}

.legend-zone .zone-note b {
  color: var(--ivory);
  font-weight: 600;
}

.do-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--panel-border);
}

.do-row .badge {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono';
  font-size: 9.5px;
  font-weight: 700;
  color: #150F0D;
  margin-top: 1px;
}

.do-row .badge.multi {
  box-shadow: 0 0 0 2px var(--gold);
}

.do-row .dname {
  font-family: 'Work Sans';
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ivory);
}

.do-row .dname .star {
  color: var(--gold);
  margin-left: 3px;
}

.do-row .dmeta {
  font-family: 'IBM Plex Mono';
  font-size: 9.5px;
  color: var(--muted);
  line-height: 1.5;
}

.do-row .dmeta b {
  color: var(--gold);
  font-weight: 500;
}

.exceptions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.xcard {
  background: #241A16;
  border: 1.5px solid var(--gold-dim);
  border-radius: 7px;
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.xcard .xnum {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 1.5px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono';
  font-weight: 700;
  font-size: 12px;
  color: var(--gold);
}

.xcard .xtitle {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 16.5px;
  margin: 0 0 3px;
  color: var(--gold);
}

.xcard .xccaa {
  font-family: 'IBM Plex Mono';
  font-size: 10px;
  color: var(--ivory);
  margin-bottom: 7px;
  display: block;
  letter-spacing: 0.02em;
}

.xcard .xdesc {
  font-size: 12.3px;
  line-height: 1.55;
  color: var(--muted);
}

.xcard .xdesc b {
  color: var(--ivory);
  font-weight: 600;
}

.xcard .chips-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 12px 0 6px;
}

.xcard .chips {
  margin-top: 0;
}

/* ----------------------------------------------------------------------
   13. VARIEDADES Y CHIPS
---------------------------------------------------------------------- */
.varietals {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.vcard {
  flex: 1;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 18px 18px 20px;
  border-top: 3px solid;
}

.vcard .vtitle {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 2px;
}

/* .theme-espana .vcard .vtitle/.vdesc/.chip: ver espana.css */

.vcard .vrange {
  font-family: 'IBM Plex Mono';
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 10px;
  display: block;
}

.vcard .vdesc {
  font-size: 11.8px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 12px;
  min-height: 0;
}

.vclimate {
  font-size: 11.3px;
  line-height: 1.5;
  color: var(--ivory);
  background: rgba(243, 236, 221, 0.05);
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 14px;
}

.vclimate b {
  display: block;
  color: var(--gold);
  font-family: 'IBM Plex Mono';
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 3px;
  font-weight: 600;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  font-size: 11.3px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--panel-border);
  color: var(--ivory);
}

.chip.flagship {
  border-color: var(--gold-dim);
  font-weight: 600;
}

/* Colores de zona en las tarjetas — leen de la paleta global */
.vcard.north {
  border-top-color: var(--north);
}

.vcard.north .vtitle {
  color: var(--north);
}

.vcard.north .chip {
  background: var(--north-soft);
}

.vcard.central {
  border-top-color: var(--central);
}

.vcard.central .vtitle {
  color: var(--central);
}

.vcard.central .chip {
  background: var(--central-soft);
}

.vcard.south {
  border-top-color: var(--south);
}

.vcard.south .vtitle {
  color: var(--south);
}

.vcard.south .chip {
  background: var(--south-soft);
}

.vcard.noa {
  border-top-color: var(--noa);
}

.vcard.noa .vtitle {
  color: var(--noa);
}

.vcard.noa .chip {
  background: var(--noa-soft);
}

.vcard.cuyo {
  border-top-color: var(--cuyo);
}

.vcard.cuyo .vtitle {
  color: var(--cuyo);
}

.vcard.cuyo .chip {
  background: var(--cuyo-soft);
}

.vcard.patagonia {
  border-top-color: var(--patagonia);
}

.vcard.patagonia .vtitle {
  color: var(--patagonia);
}

.vcard.patagonia .chip {
  background: var(--patagonia-soft);
}

/* ----------------------------------------------------------------------
   14. INDEX — índice de capítulos
---------------------------------------------------------------------- */
.plates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.plate {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  padding: 18px 18px 20px;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

a.plate:hover,
a.plate:focus-visible {
  border-color: var(--gold-dim);
  transform: translateY(-2px);
  background: #221A16;
}

.plate.soon {
  border-style: dashed;
  opacity: 0.62;
}

.plate.hovered {
  border-color: var(--gold-dim);
  background: #221A16;
}

.plate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.plate-num {
  font-family: 'IBM Plex Mono';
  font-size: 11px;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 12px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plate-status {
  font-family: 'IBM Plex Mono';
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plate-status.avail {
  color: var(--gold);
}

.plate-status.soon {
  color: var(--muted);
}

.plate-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 20px;
  margin: 0 0 2px;
}

.plate-range {
  font-family: 'IBM Plex Mono';
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-bottom: 10px;
}

.plate-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 14px;
  flex: 1;
}

.plate-zones {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.zone-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.zone-dot.blank {
  border: 1px dashed var(--panel-border);
  background: transparent;
}

.plate-cta {
  font-family: 'IBM Plex Mono';
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.plate-cta.soon-text {
  color: var(--muted);
}

/* ----------------------------------------------------------------------
   15. PIE DE PÁGINA
---------------------------------------------------------------------- */
footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--panel-border);
  padding-top: 16px;
}

.footer-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-legend .fitem {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--muted);
}

.footer-legend .fswatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

footer .disclaimer {
  font-family: 'IBM Plex Mono';
  font-size: 9.5px;
  color: var(--muted);
  text-align: right;
  max-width: 360px;
  line-height: 1.5;
  opacity: 0.8;
  margin-left: auto;
}

/* .theme-index footer .disclaimer: ver index.css */

/* ----------------------------------------------------------------------
   16. RESPONSIVE
---------------------------------------------------------------------- */
@media (max-width:820px) {
  .plates {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero h1 {
    font-size: 38px;
  }
}

@media (max-width:640px) {
  .poster {
    padding: 34px 20px 32px;
  }

  h1 {
    font-size: 32px;
  }

  .argentina-map-container,
  .chile-map-container,
  .nz-map-container,
  .sa-map-container,
  .uy-map-container,
  .mx-map-container {
    height: 620px;
  }

  .aus-map-container {
    height: 520px;
  }

  .es-map-container {
    height: 480px;
  }

  .varietals {
    flex-direction: column;
  }

  /* .theme-espana .varietals: ver espana.css */

  .legend-grid {
    grid-template-columns: 1fr;
  }

  .vcard {
    flex: 1 1 100%;
  }

  footer {
    flex-direction: column;
    align-items: flex-start;
  }

  footer .disclaimer {
    text-align: left;
    margin-left: 0;
  }
}

@media (max-width:560px) {
  .plates {
    grid-template-columns: 1fr;
  }

  .topnav-links {
    gap: 14px;
  }
}