@font-face { font-family: 'Poppins'; src: url('/fuentes/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fuentes/poppins-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fuentes/poppins-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fuentes/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fuentes/poppins-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: 'CIRO Wordmark'; src: url('/fuentes/orbitron-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; }

:root {
  
  --navy:        #003B71;   
  --navy-hondo:  #00284E;   
  --azul:        #0073CF;   
  --azul-tinta:  #005AA3;   
  --azul-hondo:  #004E8C;   
  --cielo:       #00A3E0;
  --cielo-suave: #E6F4FC;   

  
  --ahorro:       #00A76F;  
  --ahorro-hondo: #008054;
  --ahorro-texto: #00734B;  
  --ahorro-suave: #E3F7EF;

  
  --aviso:        #F59E0B;
  --aviso-suave:  #FFF4E5;
  --aviso-tinta:  #9A5B00;  
  --aviso-linea:  #F0C888;
  --alerta:       #E5484D;  
  --alerta-tinta: #A32C2A;  

  
  --tinta:    #12263A;      
  --tinta-2:  #41566B;      
  --apagado:  #6B8199;      
  --linea:    #DEE7EF;
  --linea-2:  #EDF2F7;
  --linea-campo: #C7D3E0;   
  --fondo:    #F2F6FA;
  --tarjeta:  #FFFFFF;

  
  --r-sm: 12px;   
  --r-md: 16px;   
  --r-lg: 22px;   
  --r-xl: 26px;   
  --r-pill: 999px;

  
  
  --sombra:       0 1px 2px rgba(16,42,67,.06), 0 6px 16px rgba(16,42,67,.08);
  --sombra-alta:  0 8px 26px rgba(16,42,67,.12);
  --sombra-marca: 0 6px 22px rgba(0,115,207,.22);  

  
  --gutter: 16px;           
  --ancho: 1120px;
  --ritmo: 56px;            
}

@media (min-width: 640px)  { :root { --gutter: 24px; } }
@media (min-width: 900px)  { :root { --ritmo: 88px; --r-xl: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;   
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Poppins', 'Century Gothic', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  margin: 0; text-wrap: balance;
  
  overflow-wrap: break-word;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--azul-tinta); }

.cifra__n, .renglon__cifra, .diferencia__cifra, .dato__n, .cuenta td { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: inherit;
}
:focus:not(:focus-visible) { outline: none; }

.heroe :focus-visible,
.pie :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: var(--tarjeta); color: var(--azul-tinta);
  padding: 12px 18px; border-radius: var(--r-sm);
  font-weight: 800; text-decoration: none; box-shadow: var(--sombra-alta);
  transition: top .16s ease;
}
.saltar:focus { top: 8px; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }

.medida { max-width: 68ch; }

.d1 {
  font-size: clamp(2.125rem, 1.55rem + 2.9vw, 3.75rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
}
.d2 {
  font-size: clamp(1.625rem, 1.35rem + 1.35vw, 2.375rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.025em;
}
.h3 {
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  font-weight: 800; line-height: 1.2; letter-spacing: -.02em;
}
.h4 { font-size: 1rem; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }

.bajada {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: 500; line-height: 1.5; color: var(--tinta-2);
}
.chico { font-size: .875rem; font-weight: 500; color: var(--tinta-2); line-height: 1.5; }
.nota  { font-size: .8125rem; font-weight: 600; color: var(--tinta-2); line-height: 1.45; }

.volanta {
  font-size: .75rem; font-weight: 800; line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase; color: var(--azul-tinta);
}
.volanta--clara { color: rgba(255,255,255,.85); }
.volanta--dato  { color: var(--tinta-2); letter-spacing: .06em; }

.medida a, .parrafo a, .lista a, .pie__descargo a { color: var(--azul-tinta); font-weight: 700; text-underline-offset: 3px; }
.medida a:hover, .parrafo a:hover, .lista a:hover, .pie__descargo a:hover { color: var(--azul); }

.flecha-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--azul-tinta); font-weight: 700; text-decoration: none;
  text-underline-offset: 3px; border-radius: 6px;
}
.flecha-link:hover { text-decoration: underline; color: var(--azul); }
.flecha-link svg { flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  
  min-height: 50px; padding: 0 22px;
  border: 0; border-radius: var(--r-sm);
  background: var(--azul); color: #fff;
  font: inherit; font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .16s ease, transform .1s ease;
  -webkit-tap-highlight-color: rgba(0,115,207,.14);   
}
.btn:hover  { background: var(--azul-tinta); color: #fff; }
.btn:active { background: var(--azul-hondo); transform: scale(.985); }

.btn[disabled], .btn[aria-disabled="true"] { background: #A8C6E4; cursor: not-allowed; }

.btn--claro { background: #fff; color: var(--azul-tinta); }
.btn--claro:hover  { background: var(--cielo-suave); color: var(--azul-tinta); }
.btn--claro:active { background: #D2E9F8; }

.btn--fantasma { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.btn--fantasma:hover { background: rgba(255,255,255,.14); color: #fff; }

.btn--sm { min-height: 44px; padding: 0 16px; font-size: .9375rem; }

.barra {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: #fff;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.barra .marca { color: #fff; }
.barra .menu__boton { color: #fff; }
.barra .nav__a { color: rgba(255,255,255,.88); }
.barra .nav__a:hover { background: rgba(255,255,255,.16); color: #fff; }
.barra .nav__a[aria-current="page"] { background: rgba(255,255,255,.18); color: #fff; }
.barra .nav__rotulo { color: rgba(255,255,255,.72); }
.barra .nav__sep { background: rgba(255,255,255,.3); }
.barra .menu__boton:hover { background: rgba(255,255,255,.16); }

.barra.esta-pegada {
  position: fixed;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 0 var(--linea);
  color: var(--tinta);
}
.barra.esta-pegada .marca { color: var(--azul); }
.barra.esta-pegada .menu__boton { color: var(--tinta); }
.barra.esta-pegada .menu__boton:hover { background: var(--fondo); }
.barra.esta-pegada .nav__a { color: var(--tinta-2); }
.barra.esta-pegada .nav__a:hover { background: var(--fondo); color: var(--tinta); }
.barra.esta-pegada .nav__a[aria-current="page"] { background: var(--cielo-suave); color: var(--azul-tinta); }
.barra.esta-pegada .nav__rotulo { color: var(--tinta-2); }
.barra.esta-pegada .nav__sep { background: var(--linea); }

.barra .btn { background: #fff; color: var(--azul-tinta); }
.barra .btn:hover { background: var(--cielo-suave); color: var(--azul-tinta); }
.barra.esta-pegada .btn { background: var(--azul); color: #fff; }
.barra.esta-pegada .btn:hover { background: var(--azul-tinta); color: #fff; }

.barra :focus-visible { outline-color: #fff; }
.barra.esta-pegada :focus-visible { outline-color: var(--azul); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barra.esta-pegada { background: #fff; }
}

.barra__interior {
  max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter);
  min-height: 64px;
  display: flex; align-items: center; gap: 12px;
}
@media (min-width: 900px) { .barra__interior { min-height: 72px; gap: 18px; } }

.marca {
  display: inline-flex; align-items: center; flex: none;
  color: var(--azul); border-radius: var(--r-sm); text-decoration: none;
  font-family: 'CIRO Wordmark', 'Poppins', system-ui, sans-serif;
  font-weight: 700; font-size: 17px; line-height: 1;
  letter-spacing: .21em;
  
  padding: 12px .21em 12px 0;
}
@media (min-width: 900px) { .marca { font-size: 20px; } }

.barra__espacio { flex: 1 1 auto; }

.barra .btn { display: none; }
@media (min-width: 960px) { .barra .btn { display: inline-flex; } }

.nav { display: none; }
@media (min-width: 960px) { .nav { display: flex; align-items: center; gap: 2px; } }

.nav__a {
  display: inline-flex; align-items: center;
  padding: 9px 13px; border-radius: var(--r-pill);
  color: var(--tinta-2); font-size: .9375rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}
.nav__a:hover { background: var(--fondo); color: var(--tinta); }

.nav__a[aria-current="page"] { background: var(--cielo-suave); color: var(--azul-tinta); }

.nav__sep { width: 1px; height: 24px; background: var(--linea); margin-inline: 8px; flex: none; }
.nav__rotulo { font-size: .6875rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-2); padding-right: 2px; white-space: nowrap; }

.menu { position: relative; flex: none; }
@media (min-width: 960px) { .menu { display: none; } }

.menu__boton {
  list-style: none; cursor: pointer;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: var(--tinta);
  -webkit-tap-highlight-color: rgba(0,115,207,.14);
}
.menu__boton::-webkit-details-marker { display: none; }
.menu__boton::marker { content: ''; }
.menu__boton:hover { background: var(--fondo); }
.menu[open] .menu__boton { background: var(--cielo-suave); color: var(--azul-tinta); }
.menu__boton .cerrar { display: none; }
.menu[open] .menu__boton .abrir { display: none; }
.menu[open] .menu__boton .cerrar { display: block; }

.menu[open]::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: rgba(0,40,78,.42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: max-content; min-width: 260px; max-width: calc(100vw - 32px);
  background: var(--tarjeta);
  border: 1px solid var(--linea); border-radius: var(--r-lg);
  box-shadow: var(--sombra-alta);
  padding: 10px; list-style: none;
}
.menu__panel li + li { margin-top: 2px; }
.menu__panel a {
  display: block; padding: 12px 14px; border-radius: var(--r-sm);
  color: var(--tinta); font-weight: 700; font-size: .9375rem; text-decoration: none;
}
.menu__panel a:hover { background: var(--fondo); }
.menu__panel a[aria-current="page"] { background: var(--cielo-suave); color: var(--azul-tinta); }
.menu__rotulo {
  padding: 14px 14px 6px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-2);
  border-top: 1px solid var(--linea-2); margin-top: 8px;
}

.heroe {
  
  background: linear-gradient(100deg, var(--navy) 0%, var(--azul) 100%);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  color: #fff;
  
  padding: 78px 0 34px;
}
@media (min-width: 900px) {
  .heroe {
    background: linear-gradient(135deg, var(--navy) 0%, var(--azul) 100%);
    padding: 128px 0 64px;
  }
}

.heroe h1 { color: #fff; }
.heroe .bajada { color: rgba(255,255,255,.92); }
.heroe__interior { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.heroe__centro { max-width: 780px; }
.heroe__centro > * + * { margin-top: 14px; }
.heroe__centro .buscador { margin-top: 24px; }
.heroe__centro .chips { margin-top: 16px; }

.heroe--partido .heroe__centro { max-width: 620px; }
.heroe__figura { display: none; }
@media (min-width: 900px) {
  .heroe--partido .heroe__interior {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 40px; align-items: center;
  }
  .heroe__figura { display: block; margin: 0; }
  .heroe__figura img {
    width: 100%; border-radius: var(--r-lg);
    
    box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 18px 40px rgba(0,25,55,.28);
  }
}
@media (min-width: 1024px) {
  .heroe--partido .heroe__interior { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; }
}

.heroe--b2b { padding: 74px 0 32px; }
@media (min-width: 900px) { .heroe--b2b { padding: 116px 0 56px; } }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 479px) { .heroe__acciones .btn { width: 100%; } }

.buscador {
  display: flex; align-items: center;
  background: #fff; border-radius: var(--r-pill);
  padding: 4px 4px 4px 18px;
  min-height: 60px;
  max-width: 620px;
  transition: box-shadow .16s ease;
}

.buscador :focus-visible { outline-color: var(--azul); }
.buscador__lupa { flex: none; color: var(--apagado); display: block; }
.buscador__campo { flex: 1 1 auto; min-width: 0; margin-left: 11px; }
.buscador__campo input {
  width: 100%; border: 0; background: transparent;
  font: inherit;
  
  font-size: 1rem; font-weight: 500; color: var(--tinta);
  padding: 0; min-height: 44px;
}

.buscador__campo input::placeholder { color: var(--tinta-2); opacity: 1; }
.buscador__enviar {
  flex: none; width: 52px; height: 52px; border: 0; border-radius: var(--r-pill);
  background: var(--azul); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .16s ease;
  -webkit-tap-highlight-color: rgba(0,115,207,.14);
}
.buscador__enviar:hover  { background: var(--azul-tinta); }
.buscador__enviar:active { background: var(--azul-hondo); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.chips a {
  display: inline-flex; align-items: center;
  
  min-height: 44px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--tarjeta); color: var(--tinta-2);
  border: 1px solid var(--linea);
  font-size: .8125rem; font-weight: 700; text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.chips a:hover { background: var(--cielo-suave); border-color: var(--azul); color: var(--azul-tinta); }

.chips--heroe a { background: rgba(0,40,78,.28); border-color: rgba(255,255,255,.42); color: #fff; }
.chips--heroe a:hover { background: #fff; border-color: #fff; color: var(--azul-tinta); }

.chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--cielo-suave); color: var(--azul-tinta);
  font-size: .75rem; font-weight: 800; letter-spacing: .02em;
}

.franja { padding-block: var(--ritmo); }
.franja--apretada { padding-block: calc(var(--ritmo) * .6); }
.franja--blanca { background: var(--tarjeta); }
.franja > .contenedor > * + * { margin-top: 22px; }

.franja--marina {
  background: linear-gradient(135deg, var(--navy-hondo) 0%, var(--navy) 58%, var(--azul-tinta) 100%);
  color: #fff;
}
.franja--marina h2, .franja--marina h3 { color: #fff; }
.franja--marina .bajada, .franja--marina .parrafo { color: rgba(255,255,255,.90); }
.franja--marina .volanta { color: rgba(255,255,255,.82); }
.franja--marina .lista li { color: rgba(255,255,255,.90); }
.franja--marina .lista li::before { background: var(--cielo); }
.franja--marina .lista b, .franja--marina .lista strong,
.franja--marina .parrafo b, .franja--marina .parrafo strong { color: #fff; }
.franja--marina a { color: #fff; }
.franja--marina :focus-visible { outline-color: #fff; }

.franja--marina .tarjeta,
.franja--marina .tarjeta .parrafo,
.franja--marina .tarjeta .lista li,
.franja--marina .tarjeta .chico { color: var(--tinta-2); }
.franja--marina .tarjeta h2,
.franja--marina .tarjeta h3,
.franja--marina .tarjeta h4,
.franja--marina .tarjeta b,
.franja--marina .tarjeta strong { color: var(--tinta); }
.franja--marina .tarjeta a { color: var(--azul-tinta); }
.franja--marina .tarjeta .lista li::before { background: var(--azul); }
.franja--marina .tarjeta :focus-visible,
.franja--marina .aviso :focus-visible { outline-color: var(--azul); }

.franja--ahorro { background: var(--ahorro-suave); }
.franja--ahorro .volanta { color: var(--ahorro-texto); }
.franja--ahorro .tarjeta { border-color: #BCE8D6; }

.emoji-rotulo { display: block; font-size: 28px; line-height: 1; margin-bottom: 10px; }

.encabezado-seccion { max-width: 720px; }
.encabezado-seccion > * + * { margin-top: 10px; }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: 20px;
}
@media (min-width: 640px) { .tarjeta { padding: 24px; } }
.tarjeta > * + * { margin-top: 10px; }

.franja--blanca .tarjeta { border-color: var(--linea); }

.rejilla { display: grid; gap: 16px; }
@media (min-width: 720px) { .rejilla--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }

.accesos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; }
@media (min-width: 900px) { .accesos { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.acceso {
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 148px; padding: 16px;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-md);
  color: inherit; text-decoration: none;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
  -webkit-tap-highlight-color: rgba(0,115,207,.14);
}

.acceso:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); border-color: var(--azul); }
.acceso__emoji { font-size: 28px; line-height: 1; }
@media (min-width: 900px) { .acceso__emoji { font-size: 32px; } }
.acceso__titulo { margin-top: auto; padding-top: 14px; font-size: .9375rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.acceso__nota { margin-top: 3px; font-size: .8125rem; font-weight: 500; color: var(--tinta-2); line-height: 1.3; }

.aviso {
  background: var(--cielo-suave);
  border: 2px solid var(--azul);
  border-radius: var(--r-md);
  padding: 20px;
  color: var(--tinta-2);
}
.aviso > * + * { margin-top: 9px; }
.aviso__icono { color: var(--azul); display: block; }
.aviso p { font-size: .9375rem; font-weight: 500; line-height: 1.5; color: var(--tinta-2); }

.aviso .aviso__titulo { font-size: 1.0625rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--azul-tinta); }
.aviso a { color: var(--azul-tinta); font-weight: 700; }

.aviso--ambar { background: var(--aviso-suave); border: 1.5px solid var(--aviso-linea); }
.aviso--ambar .aviso__icono, .aviso--ambar .aviso .aviso__titulo, .aviso--ambar.aviso .aviso__titulo { color: var(--aviso-tinta); }

.aclaracion {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-md); padding: 18px 20px;
}
.aclaracion__icono { flex: none; color: var(--azul-tinta); }
.aclaracion__txt { flex: 1 1 260px; font-size: .9375rem; font-weight: 600; line-height: 1.45; color: var(--tinta-2); }

.aclaracion .btn { flex: none; border-radius: var(--r-pill); }
@media (max-width: 479px) { .aclaracion .btn { width: 100%; } }

.ficha-promo { display: inline-flex; align-items: center; gap: 6px; background: var(--cielo-suave); color: var(--azul-tinta); border-radius: var(--r-sm); padding: 6px 11px; font-size: .8125rem; font-weight: 800; }

.comparador,
.resultados > div:not(.aviso) {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: 18px;
}
@media (min-width: 640px) { .comparador, .resultados > div:not(.aviso) { padding: 26px; } }

.comparador > h2, .comparador > h3,
.comparador .ficha-cabeza h2,
.resultados > div > h2,
.resultados .ficha-cabeza h2 { font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.comparador .rubro, .resultados .rubro { margin-top: 9px; margin-bottom: 6px; }
.comparador + .comparador { margin-top: 16px; }
.resultados > * + * { margin-top: 16px; }

.renglon {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linea-2);
}
.renglon:last-of-type { border-bottom: 0; }

.renglon__que {
  flex: 1 1 auto; min-width: 40%; display: flex; flex-direction: column; gap: 1px;
  font-size: .9375rem; font-weight: 700; color: var(--tinta); line-height: 1.25;
  
  overflow-wrap: break-word;
}
.renglon__cuando {
  font-size: .6875rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-2);
}

.renglon__guia {
  flex: 1 1 auto; min-width: 12px;
  border-bottom: 2px dotted var(--linea);
  transform: translateY(-4px);
}
.renglon__cifra { flex: none; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; color: var(--tinta); white-space: nowrap; }

@media (max-width: 379px) {
  .renglon { flex-wrap: wrap; }
  .renglon__que { min-width: 100%; }
  .renglon__guia { display: none; }
  .renglon__cifra { font-size: 1rem; margin-top: 4px; }
}

.renglon--gana {
  background: var(--ahorro-suave);
  border-radius: var(--r-sm);
  border-bottom-color: transparent;
  padding: 11px 12px; margin-inline: -12px;
}
.renglon--gana .renglon__que,
.renglon--gana .renglon__cifra { color: var(--ahorro-texto); }

.renglon--gana .renglon__cuando { color: var(--ahorro-texto); }
.renglon--gana .renglon__guia { border-bottom-color: rgba(0,128,84,.3); }

.diferencia {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 14px; padding-top: 14px;
  border-top: 2px solid var(--linea);
}
.diferencia__rotulo { flex: none; font-size: .8125rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
.diferencia__guia { flex: 1 1 auto; min-width: 12px; border-bottom: 2px dotted var(--linea); transform: translateY(-4px); }
.diferencia__cifra {
  flex: none; font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  font-weight: 800; letter-spacing: -.03em; color: var(--ahorro-texto);
  line-height: 1;
}

.rubro { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; }
@media (min-width: 900px) { .cifras { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.cifra {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: 18px 16px;
}
.cifra__n {
  display: block;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  color: var(--tinta);
  
  overflow-wrap: anywhere;
}

.cifra--titular {
  grid-column: 1 / -1;
  background: var(--cielo-suave);
  border-color: var(--azul);
  padding: 22px 20px;
}
@media (min-width: 900px) { .cifra--titular { grid-column: span 2; } }
.cifra--titular .cifra__n { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); color: var(--azul-tinta); }
.cifra--titular .cifra__q { font-size: 1rem; color: var(--azul-tinta); font-weight: 700; }
.cifra__q { display: block; margin-top: 8px; font-size: .875rem; font-weight: 600; color: var(--tinta-2); line-height: 1.35; }
.cifra__f { display: block; margin-top: 7px; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); }

.rail {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--gutter);
  padding-block: 4px;
  margin-inline: calc(var(--gutter) * -1);
  
  scroll-padding-inline: var(--gutter);
  list-style: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > li { scroll-snap-align: start; flex: 0 0 auto; }

.categoria {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  width: 100px; min-height: 108px; padding: 12px 8px;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-md);
  color: var(--tinta-2); text-decoration: none; text-align: center;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease, color .16s ease;
  -webkit-tap-highlight-color: rgba(0,115,207,.14);
}
.categoria:hover { border-color: var(--azul); color: var(--azul-tinta); box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.categoria__emoji { font-size: 30px; line-height: 1; }
.categoria__txt { font-size: .8125rem; font-weight: 700; line-height: 1.2; }

@media (min-width: 900px) {
  .rail {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
    overflow: visible; padding-inline: 0; margin-inline: 0;
  }
  .categoria { width: auto; }
}

.puntos { display: none; justify-content: center; gap: 6px; margin-top: 14px; list-style: none; }
.puntos[data-visible] { display: flex; }
.puntos li { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--linea); transition: width .2s ease-out, background-color .2s ease-out; }
.puntos li[data-activo] { width: 18px; background: var(--azul); }
@media (min-width: 900px) { .puntos { display: none !important; } }

.tabla-envoltorio {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
}
.tabla { width: 100%; min-width: 600px; border-collapse: collapse; text-align: left; }
.tabla caption { padding: 18px 18px 4px; text-align: left; font-size: .9375rem; font-weight: 800; color: var(--tinta); }
.tabla th, .tabla td { padding: 14px 16px; border-bottom: 1px solid var(--linea-2); vertical-align: top; font-size: .875rem; }
.tabla thead th { font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); line-height: 1.35; }
.tabla tbody th { font-weight: 800; color: var(--tinta); white-space: nowrap; }
.tabla td { color: var(--tinta-2); font-weight: 500; }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:first-child th, .tabla tbody tr:first-child td { background: var(--cielo-suave); }

.si, .no { display: flex; align-items: baseline; gap: 8px; font-weight: 600; }

.si { color: var(--azul-tinta); }
.no { color: var(--tinta-2); }
.si b, .no b { font-size: 1rem; line-height: 1; flex: none; }
.no b { color: var(--tinta-2); }

.lista { list-style: none; display: grid; gap: 12px; }
.lista li { position: relative; padding-left: 26px; color: var(--tinta-2); }
.lista li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--azul);
}
.lista b, .lista strong { color: var(--tinta); font-weight: 700; }

.parrafo { color: var(--tinta-2); }
.parrafo + .parrafo { margin-top: 14px; }
.parrafo b, .parrafo strong { color: var(--tinta); font-weight: 700; }

.cuenta { width: 100%; border-collapse: collapse; }
.cuenta th, .cuenta td { padding: 11px 0; border-bottom: 1px solid var(--linea-2); font-size: .9375rem; }
.cuenta th { text-align: left; font-weight: 600; color: var(--tinta-2); }
.cuenta td { text-align: right; font-weight: 700; color: var(--tinta); white-space: nowrap; }
.cuenta .baja td { color: var(--ahorro-texto); }
.cuenta .total th, .cuenta .total td { border-bottom: 0; padding-top: 16px; font-weight: 800; color: var(--tinta); }
.cuenta .total th { font-size: 1.0625rem; }
.cuenta .total td { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); letter-spacing: -.03em; }

.datos { display: grid; gap: 12px; list-style: none; }
@media (min-width: 640px) { .datos { grid-template-columns: 1fr 1fr; } }
.dato { background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r-sm); padding: 16px; }
.dato__n { display: block; font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--azul-tinta); }
.dato__q { display: block; margin-top: 8px; font-size: .875rem; font-weight: 600; color: var(--tinta-2); line-height: 1.35; }

.form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 7px; flex: 1 1 260px; min-width: 0; }
.campo > span { font-size: .8125rem; font-weight: 700; color: var(--tinta); }
.campo input {
  width: 100%; min-height: 52px; padding: 14px;
  background: var(--tarjeta); color: var(--tinta);
  border: 1.5px solid var(--linea-campo); border-radius: var(--r-sm);
  font: inherit; font-size: 1rem;   
  transition: border-color .16s ease, box-shadow .16s ease;
}
.campo input::placeholder { color: var(--tinta-2); opacity: 1; }

.campo input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0,115,207,.18); }
.form .btn { flex: 0 0 auto; }
@media (max-width: 479px) { .form .btn { width: 100%; } }

.pie { background: var(--navy-hondo); color: rgba(255,255,255,.88); padding: 48px 0 32px; }
.pie__interior { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.pie .marca { color: #fff; font-size: 22px; }

.pie__cols { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 720px) { .pie__cols { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.pie__titulo { font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }

.pie__lista { list-style: none; margin-top: 8px; display: grid; gap: 0; }
.pie a { color: rgba(255,255,255,.88); text-decoration: none; font-size: .9375rem; font-weight: 500; border-radius: 6px; }
.pie__lista a { display: inline-block; padding: 8px 0; }
.pie a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.pie__descargo {
  margin-top: 36px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .8125rem; line-height: 1.65; color: rgba(255,255,255,.74);
  max-width: 82ch;
}
.pie__descargo a { font-size: inherit; text-decoration: underline; }
.pie__fecha { margin-top: 14px; font-size: .8125rem; color: rgba(255,255,255,.74); }

.puertas { display: grid; gap: 12px; list-style: none; }
@media (min-width: 720px) { .puertas { grid-template-columns: 1fr 1fr; gap: 16px; } }
.puerta {
  display: flex; align-items: center; gap: 14px;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: 20px; text-decoration: none; color: inherit;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
  -webkit-tap-highlight-color: rgba(0,115,207,.14);
}
.puerta:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); border-color: var(--azul); }
.puerta__emoji { font-size: 28px; line-height: 1; flex: none; }
.puerta__txt { flex: 1 1 auto; min-width: 0; }

.puerta__t { display: block; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.puerta__d { display: block; margin-top: 3px; font-size: .8125rem; font-weight: 500; color: var(--tinta-2); line-height: 1.35; }
.puerta__f { flex: none; color: var(--azul); }

.accion-fija {
  position: sticky; bottom: 12px; z-index: 30;
  
  margin: 8px 14px 0;
  padding: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  border-radius: var(--r-pill);
  
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--sombra-marca);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .accion-fija { background: #fff; }
}

@media (min-width: 960px) { .accion-fija { display: none; } }
.accion-fija .btn { width: 100%; border-radius: var(--r-pill); box-shadow: none; }

.accion-fija {
  transition: opacity .18s ease, transform .18s ease;
}
.accion-fija[data-oculta] {
  opacity: 0; transform: translateY(8px); pointer-events: none;
}

.texto-largo { max-width: 72ch; }
.texto-largo > * + * { margin-top: 16px; }
.texto-largo h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-top: 40px; }
.texto-largo h3 { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; margin-top: 28px; }
.texto-largo p, .texto-largo li { color: var(--tinta-2); }
.texto-largo ul, .texto-largo ol { list-style: none; display: grid; gap: 10px; }
.texto-largo ul li, .texto-largo ol li { position: relative; padding-left: 26px; }
.texto-largo ul li::before, .texto-largo ol li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--azul); }
.texto-largo table { width: 100%; border-collapse: collapse; }
.texto-largo th, .texto-largo td { padding: 12px 14px; border-bottom: 1px solid var(--linea-2); text-align: left; font-size: .875rem; color: var(--tinta-2); }
.texto-largo thead th { font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
.texto-largo strong, .texto-largo b { color: var(--tinta); font-weight: 700; }
.texto-largo .tarjeta > p:first-child { margin-top: 0; }

.citado {
  background: var(--fondo);
  border-left: 4px solid var(--azul);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 18px;
}
.franja--blanca .citado, .tarjeta .citado { background: var(--cielo-suave); }
.citado > p + p { margin-top: 10px; }
.citado p { font-size: .875rem; line-height: 1.6; color: var(--tinta-2); }

.ejemplos { display: grid; gap: 18px; }

.ejemplos--rota { display: block; overflow: hidden; }
.ejemplos__riel {
  display: flex;
  align-items: flex-start;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.ejemplos__riel--sin-animar { transition: none; }
.ejemplos--rota .ejemplo {
  
  flex: 0 0 100%; min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ejemplos__riel { transition: none; }
}

.ejemplo__gondola {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  
  color: var(--tinta-2);
}

.ejemplos__puntos {
  display: none;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.ejemplos--rota .ejemplos__puntos { display: flex; }
.ejemplos__punto {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 999px;
  background: var(--linea);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.ejemplos__punto[aria-current="true"] { width: 22px; background: var(--azul); }

.promos {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .promos { grid-template-columns: repeat(3, 1fr); } }
.promo {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: 18px;
}
.promo__pct {
  font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem);
  font-weight: 800; line-height: 1; letter-spacing: -.03em;
  
  color: var(--ahorro-texto);
}
.promo__pct span { font-size: .5em; margin-left: 2px; }
.promo__donde { margin-top: 8px; font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em; }
.promo__quien { margin-top: 2px; font-weight: 700; color: var(--tinta-2); font-size: .9375rem; }
.promo__cuando { margin-top: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.promo__tope { margin-top: 4px; font-size: 13px; color: var(--tinta-2); }

.ejemplos--promos .ejemplo { padding-bottom: 2px; }

.ficha-cabeza { display: flex; gap: 14px; align-items: flex-start; }
.ficha-cabeza__texto { flex: 1 1 auto; min-width: 0; }
.ficha-foto {
  flex: none;
  display: block;
  width: 72px; height: 72px;
  padding: 4px;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: #fff;
  object-fit: contain;
}
.ficha-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ficha-foto--grande { width: 96px; height: 96px; }

.ejemplo__ver { margin-top: 12px; font-size: 14px; font-weight: 700; }
.ejemplo__ver a { color: var(--azul-tinta); }

.mas-precios > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 2px 2px;
  font-size: 13px;
  font-weight: 700;
  
  color: var(--azul-tinta);
  border-radius: var(--r-sm);
}
.mas-precios > summary::-webkit-details-marker { display: none; }
.mas-precios > summary::after { content: " ↓"; }
.mas-precios[open] > summary::after { content: " ↑"; }

.contenedor--angosto { max-width: 760px; }
.ficha-link { color: inherit; text-decoration: none; }
.ficha-link:hover, .ficha-link:focus-visible { text-decoration: underline; }
.chip--gondola { margin-left: 6px; background: var(--celeste-suave, #eaf3fb); color: var(--tinta-2, #3d556f); }
.ficha-sub {
  margin: 22px 0 6px;
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-3, #6b7a90);
}
.ficha-pie { margin-top: 14px; font-size: 13px; color: var(--tinta-3, #6b7a90); }
.renglon__que a { color: inherit; text-decoration: none; }
.renglon__que a:hover, .renglon__que a:focus-visible { text-decoration: underline; }

.barra-app { display: none; }
@media (max-width: 720px) {
  .barra-app {
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--tinta, #0d2438);
    color: #fff;
    box-shadow: 0 10px 30px rgba(4, 24, 44, .28);
    transition: transform .22s ease, opacity .22s ease;
  }
  .barra-app[data-oculta] { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .barra-app__icono { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; }
  
  .barra-app__txt { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.25; }
  .barra-app__txt b { display: block; font-size: 13.5px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .barra-app__txt span { display: block; opacity: .72; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .barra-app__btn { padding: 9px 13px; font-size: 12.5px; }
  .barra-app__btn {
    flex: 0 0 auto;
    padding: 9px 14px; border-radius: 999px;
    background: #fff; color: var(--tinta, #0d2438);
    font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap;
  }
  
  .accion-fija { bottom: 76px; }
}

.mapa { margin-bottom: 28px; }

.mapa__filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mapa__filtro {
  padding: 9px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--r-pill);
  background: var(--tarjeta);
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--tinta-2);
  cursor: pointer;
}
.mapa__filtro[aria-pressed="true"] {
  background: var(--azul); border-color: var(--azul); color: #fff;
}

.mapa__lienzo {
  position: relative;
  height: min(70vh, 560px);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  
  overflow: hidden;
  background: var(--fondo);
}

.mapa__lienzo .leaflet-container { font: inherit; }

.mapa__aviso {
  margin-top: 10px;
  font-size: 14px;
  color: var(--tinta-2);
}

.mapa__punto span {
  display: block;
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(16, 42, 67, .45);
}
.mapa__punto--super span { background: var(--azul); }
.mapa__punto--nafta span { background: var(--aviso); }
.mapa__punto:focus-visible span { outline: 3px solid var(--azul-hondo); outline-offset: 2px; }

.mapa__ficha {
  position: absolute;
  z-index: 1000;   
  left: 10px; right: 10px; bottom: 10px;
  max-height: calc(100% - 20px);
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-alta);
}
@media (min-width: 720px) {
  .mapa__ficha { right: auto; top: 10px; bottom: 10px; width: 320px; }
}
.mapa__cerrar {
  position: absolute; top: 8px; right: 8px;
  width: 34px; height: 34px;
  border: 0; border-radius: 999px;
  background: var(--linea-2);
  font-size: 20px; line-height: 1; color: var(--tinta-2);
  cursor: pointer;
}
.mapa__tipo {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2);
}
.mapa__nombre { margin-top: 4px; font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.mapa__cadena { margin-top: 2px; font-weight: 700; color: var(--tinta-2); font-size: .9375rem; }
.mapa__donde { margin-top: 8px; font-size: .9375rem; }
.mapa__horario { margin-top: 6px; font-size: .875rem; color: var(--tinta-2); }

.mapa__precios { margin-top: 12px; border-top: 1px solid var(--linea-2); }
.mapa__fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linea-2);
  font-size: .9375rem;
}
.mapa__fila b { font-variant-numeric: tabular-nums; margin-left: auto; }
.mapa__fila i { font-style: normal; font-size: 12px; color: var(--tinta-2); min-width: 74px; text-align: right; }
.mapa__cuando { margin-top: 8px; font-size: 12px; color: var(--tinta-2); }

.mapa__cuando--viejo { color: var(--aviso-tinta); font-weight: 700; }

.mapa__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.mapa__mapas { font-size: 14px; font-weight: 700; color: var(--azul-tinta); }

.mapa__ubicar a { font-size: 18px; line-height: 26px; text-align: center; }

.mapa-cadenas {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .mapa-cadenas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .mapa-cadenas { grid-template-columns: repeat(3, 1fr); } }
.mapa-cadenas li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  font-weight: 700;
}
.mapa-cadenas span { font-size: 13px; font-weight: 700; color: var(--tinta-2); white-space: nowrap; }