/*
 * Base compartida por el sitio y el panel: colores, tipografía, botones y las
 * tarjetas que también aparecen en la vista previa del panel.
 */

:root {
  /* Marca */
  --azul: #0B4DA2;
  --azul-oscuro: #0A3D85;
  --azul-hover: #083577;
  --azul-claro: #E3ECFA;
  --azul-suave: #DCE8FA;
  --azul-borde: #B7CCEE;
  --azul-brillante: #3B7BE0;
  --marino: #0A1B36;
  --marino-2: #183463;
  --amarillo: #FFC531;
  --amarillo-hover: #F5B70F;
  --amarillo-suave: #FFE7A3;
  --amarillo-crema: #FBEFD0;
  --amarillo-claro: #FFF0C2;
  --amarillo-texto: #5C4300;
  --ocre: #6E5208;

  /* Neutros */
  --tinta: #0F1B2D;
  --tinta-2: #3D4757;
  --gris: #4A5568;
  --gris-claro: #8893A6;
  --gris-neutro: #E8EBF1;
  --gris-neutro-texto: #2E3A4E;
  --borde: #DAE0EA;
  --borde-suave: #E4E9F1;
  --borde-control: #7D889C;
  --borde-punteado: #9EADC6;
  --fondo: #F2F5FA;
  --fondo-2: #F8F9FC;
  --fondo-3: #F5F7FA;
  --blanco: #FFFFFF;

  /* Sobre fondos oscuros */
  --en-oscuro: #E6ECF7;
  --en-oscuro-2: #A9B8D3;
  --en-oscuro-3: #CCD7EC;
  --sub-banda: #D3E0F5;

  /* Estados */
  --peligro: #B42318;
  --peligro-hover: #8F1C13;
  --peligro-suave: #FDE8E6;
  --urgente: #A12A0F;

  /* Placeholders de fotos */
  --tinte-producto: #E6EEF9;
  --tinta-producto: #1F4A8C;

  --fuente: Figtree, "Segoe UI", system-ui, -apple-system, sans-serif;
  --fuente-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --contenedor: 1240px;
  --radio-sm: 10px;
  --radio: 16px;
  --radio-lg: 24px;
  --puntos: radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.6px);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, p, figure {
  margin: 0;
}

h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--blanco);
}

.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--radio-sm);
  background: var(--amarillo);
  color: var(--tinta);
  font-weight: 700;
  text-decoration: none;
}

.saltar:focus {
  top: 16px;
}

.icono {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icono--fino {
  stroke-width: 1.5;
}

/* ---------------------------------------------------------------- Botones */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn--pildora { border-radius: 999px; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn--bloque { width: 100%; min-height: 52px; }

.btn--primario { background: var(--azul); color: var(--blanco); }
.btn--primario:hover { background: var(--azul-hover); color: var(--blanco); }

.btn--amarillo { background: var(--amarillo); color: var(--tinta); }
.btn--amarillo:hover { background: var(--amarillo-hover); color: var(--tinta); }

.btn--contorno { border-color: var(--azul); background: var(--blanco); color: var(--azul); }
.btn--contorno:hover { background: var(--azul-claro); color: var(--azul-hover); }

.btn--secundario { border: 1px solid var(--borde-control); background: var(--blanco); color: var(--tinta); }
.btn--secundario:hover { background: var(--fondo); color: var(--tinta); }

.btn--texto { background: transparent; color: var(--azul); }
.btn--texto:hover { background: var(--azul-claro); }

.btn--peligro { background: var(--peligro); color: var(--blanco); }
.btn--peligro:hover { background: var(--peligro-hover); color: var(--blanco); }

.btn--texto-peligro { min-height: 44px; padding: 0 12px; background: transparent; color: var(--peligro); }
.btn--texto-peligro:hover { background: var(--peligro-suave); color: var(--peligro); }

.btn-menu {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--borde);
  border-radius: 12px;
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
}

.btn-menu > span:not(.sr) {
  display: flex;
}

.btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
}

.btn-icono:hover { background: var(--fondo); color: var(--tinta); }
.btn-icono--peligro { color: var(--peligro); }
.btn-icono--peligro:hover { background: var(--peligro-suave); color: var(--peligro); }

/* ------------------------------------------------------------------ Marca */

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tinta);
  text-decoration: none;
}

.marca:hover { color: var(--tinta); }

.marca__logo { flex-shrink: 0; }

.marca__texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.marca__nombre {
  font-family: var(--fuente-display);
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.marca__nombre--sm { font-size: 21px; }

.marca__lema {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--azul);
}

.marca--oscura,
.marca--oscura:hover { color: var(--blanco); }
.marca--oscura .marca__lema { color: var(--en-oscuro-2); }

/* -------------------------------------------------- Tarjeta de una oferta */

.tarjeta-oferta {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #DFE5EE;
  border-radius: 18px;
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05);
}

.tarjeta-oferta__foto {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tinte-producto);
  color: var(--tinta-producto);
}

.tarjeta-oferta--combo .tarjeta-oferta__foto {
  background: var(--amarillo-crema);
  color: var(--ocre);
}

.tarjeta-oferta__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarjeta-oferta__icono { stroke-width: 1.5; }

.chip-combo,
.chip-aviso {
  position: absolute;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.chip-combo {
  left: 14px;
  background: var(--tinta);
  color: var(--blanco);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chip-aviso {
  right: 14px;
  background: var(--blanco);
  color: var(--urgente);
}

.etiqueta-precio {
  position: absolute;
  left: 16px;
  bottom: -22px;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 14px 6px 12px;
  border-radius: 10px;
  background: var(--amarillo);
  color: var(--tinta);
  transform: rotate(-3deg);
  box-shadow: 0 6px 16px rgba(15, 27, 45, 0.18);
  font-family: var(--fuente-display);
  font-stretch: 75%;
  line-height: 1;
}

.etiqueta-precio__signo { margin-top: 3px; font-size: 20px; font-weight: 700; }
.etiqueta-precio__entero { font-size: 46px; font-weight: 800; letter-spacing: -0.02em; }
.etiqueta-precio__dec { margin-top: 3px; font-size: 20px; font-weight: 800; }

.tarjeta-oferta__cuerpo {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 38px 20px 20px;
}

.tarjeta-oferta__nombre {
  font-family: var(--fuente);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.tarjeta-oferta__vigencia {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--gris);
}

/* -------------------------------------------------- Tarjeta de una noticia */

.tarjeta-noticia {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--borde);
  border-radius: 18px;
  background: var(--blanco);
  scroll-margin-top: 100px;
}

.tarjeta-noticia:target {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-suave);
}

.tarjeta-noticia__cabeza {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bloque-fecha {
  width: 68px;
  height: 76px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 14px;
  background: var(--azul);
  color: var(--blanco);
}

.bloque-fecha__dia {
  font-family: var(--fuente-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.bloque-fecha__mes {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tarjeta-noticia__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.tarjeta-noticia__dia {
  font-size: 14px;
  color: var(--gris);
}

.tarjeta-noticia__titulo {
  font-family: var(--fuente-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.tarjeta-noticia__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris);
}

.tarjeta-noticia--realizada { background: var(--fondo-2); }
.tarjeta-noticia--realizada .bloque-fecha { background: #E5E9F0; color: var(--tinta-2); }
.tarjeta-noticia--realizada .tarjeta-noticia__titulo { font-size: 21px; color: var(--tinta-2); }
.tarjeta-noticia--realizada .con-icono,
.tarjeta-noticia--realizada .con-icono .icono { color: var(--tinta-2); }

.chip-tipo {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chip-tipo--campana { background: var(--azul-suave); color: var(--azul-oscuro); }
.chip-tipo--evento { background: var(--gris-neutro); color: var(--gris-neutro-texto); }
.chip-tipo--sorteo { background: var(--amarillo-suave); color: var(--amarillo-texto); }

.con-icono {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.con-icono .icono {
  margin-top: 1px;
  color: var(--azul);
}

.con-icono--mediano { font-size: 15px; }
.con-icono--grande { font-size: 16px; }

.recortar-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.enlace-flecha {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-top: auto;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.enlace-flecha:hover { text-decoration: underline; }

/* ------------------------------------------------- Tarjeta de una sucursal */

.tarjeta-sucursal {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: 20px;
  background: var(--fondo-2);
}

.tarjeta-sucursal__foto {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tinte-producto);
  color: var(--tinta-producto);
}

.tarjeta-sucursal__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarjeta-sucursal__cuerpo {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.tarjeta-sucursal__nombre {
  font-family: var(--fuente-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.tarjeta-sucursal__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris);
}

.tarjeta-sucursal .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* --------------------------------------------------------- Página de error */

.pagina-error {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.pagina-error__caja {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.pagina-error__codigo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--azul);
}

.pagina-error__titulo {
  font-family: var(--fuente-display);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.05;
}

.pagina-error__texto { color: var(--gris); }

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