/* ════════════════════════════════════════════════
   despachos.css — Universolibro
   Sección de despachos y zonas de envío
   Mobile First · Usa tokens de base.css
   ════════════════════════════════════════════════ */

.despachos {
  background: var(--c-fondo-suave);
  padding-block: var(--s-xl);
  position: relative;
}

.despachos__interior { position: relative; z-index: 1; }

/* ── Cabecera ── */
.despachos__cabecera {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--s-xl);
}

.despachos__cabecera .etiqueta-seccion { margin-bottom: var(--s-md); }
.despachos__cabecera .titulo-h2 { margin-bottom: var(--s-sm); }

/* ── Grilla de tarjetas ── */
.despachos__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
  margin-bottom: var(--s-xl);
}

@media (min-width: 480px) {
  .despachos__grilla { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .despachos__grilla { grid-template-columns: repeat(4, 1fr); }
}

.despachos__tarjeta {
  background: var(--c-fondo);
  border: 1.5px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: var(--s-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  transition: transform var(--tr-n), box-shadow var(--tr-n), border-color var(--tr-n);
}

.despachos__tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--c-rojo);
}

.despachos__tarjeta-icono {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FDEDEC;
  color: var(--c-rojo);
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

.despachos__tarjeta-titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--c-texto);
}

.despachos__tarjeta-texto {
  font-size: var(--t-sm);
  color: var(--c-texto-suave);
  line-height: 1.6;
}

/* ── Zonas ── */
.despachos__zonas {
  background: var(--c-fondo);
  border: 1.5px solid var(--c-borde);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  margin-bottom: var(--s-xl);
}

.despachos__zonas-titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--c-texto);
  margin-bottom: var(--s-md);
  text-align: center;
}

.despachos__zonas-grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-sm);
}

@media (min-width: 640px) {
  .despachos__zonas-grilla { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .despachos__zonas-grilla { grid-template-columns: repeat(4, 1fr); }
}

.despachos__zona {
  padding: var(--s-md);
  border-radius: var(--r-sm);
  border-left: 4px solid;
}

.despachos__zona--rm      { border-color: var(--c-rojo);          background: #FDEDEC; }
.despachos__zona--norte   { border-color: var(--c-naranja);       background: #FBE9E7; }
.despachos__zona--centro  { border-color: var(--color-azul-escolar); background: #EBF5FB; }
.despachos__zona--sur     { border-color: #27AE60;                background: #E9F7EF; }

.despachos__zona-badge {
  display: block;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--c-texto);
  margin-bottom: 0.3rem;
}

.despachos__zona p {
  font-size: var(--t-xs);
  color: var(--c-texto-suave);
  line-height: 1.5;
}

/* ── CTA ── */
.despachos__cta { text-align: center; }

.despachos__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 52px;
  padding: 0 var(--s-xl);
  background: var(--c-verde-ws);
  color: #fff;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t-md);
  border-radius: var(--r-pill);
  transition: background var(--tr-r), transform var(--tr-r), box-shadow var(--tr-r);
}

.despachos__btn:hover {
  background: var(--c-verde-ws-h);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.despachos__btn:focus-visible {
  outline: 3px solid var(--c-verde-ws);
  outline-offset: 3px;
}

/* ── Modo oscuro ── */
[data-tema="oscuro"] .despachos { background: var(--c-fondo-suave); }
[data-tema="oscuro"] .despachos__tarjeta { background: var(--c-fondo); border-color: var(--c-borde); }
[data-tema="oscuro"] .despachos__zonas { background: var(--c-fondo); border-color: var(--c-borde); }
[data-tema="oscuro"] .despachos__tarjeta-icono { background: rgba(139,0,0,.15); }


/* ════════════════════════════════════════════════
   faq.css — Universolibro
   Acordeón de preguntas frecuentes
   ════════════════════════════════════════════════ */

.faq {
  background: var(--c-fondo);
  padding-block: var(--s-xl);
}

.faq__interior {}

.faq__cabecera {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--s-xl);
}

.faq__cabecera .etiqueta-seccion { margin-bottom: var(--s-md); }
.faq__cabecera .titulo-h2 { margin-bottom: var(--s-sm); }

/* ── Acordeón ── */
.faq__lista {
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}

.faq__item {
  border: 1.5px solid var(--c-borde);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--tr-n), box-shadow var(--tr-n);
}

.faq__item:has(.faq__pregunta[aria-expanded="true"]) {
  border-color: var(--c-rojo);
  box-shadow: var(--sh-sm);
}

.faq__pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-md) var(--s-lg);
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-md);
  text-align: left;
  cursor: pointer;
  min-height: 64px;
  border: none;
  transition: background var(--tr-r), color var(--tr-r);
}

.faq__pregunta:hover { background: var(--c-fondo-suave); }

.faq__pregunta[aria-expanded="true"] {
  color: var(--c-rojo);
  background: #FDEDEC;
}

.faq__pregunta:focus-visible {
  outline: 3px solid var(--c-rojo);
  outline-offset: -3px;
}

.faq__icono {
  flex-shrink: 0;
  transition: transform var(--tr-n);
}

.faq__pregunta[aria-expanded="true"] .faq__icono {
  transform: rotate(180deg);
  color: var(--c-rojo);
}

/* Respuesta — animación con grid-template-rows */
.faq__respuesta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--tr-n);
}

.faq__respuesta:not([hidden]) {
  grid-template-rows: 1fr;
}

.faq__respuesta[hidden] {
  display: grid !important; /* sobrescribe hidden para que la animación funcione */
  visibility: hidden;
  grid-template-rows: 0fr;
}

.faq__respuesta > p {
  overflow: hidden;
  padding: 0 var(--s-lg) var(--s-md);
  font-size: var(--t-base);
  color: var(--c-texto-suave);
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .faq__respuesta { transition: none; }
  .faq__icono { transition: none; }
}

/* ── Modo oscuro ── */
[data-tema="oscuro"] .faq__pregunta { background: var(--c-fondo-suave); }
[data-tema="oscuro"] .faq__pregunta:hover { background: var(--c-borde); }
[data-tema="oscuro"] .faq__pregunta[aria-expanded="true"] { background: rgba(139,0,0,.15); }
[data-tema="oscuro"] .faq__item { border-color: var(--c-borde); }


/* ════════════════════════════════════════════════
   cta-final.css — Universolibro
   Sección CTA final con código de descuento
   Fondo oscuro de marca, cierra la página con fuerza
   ════════════════════════════════════════════════ */

.cta-final {
  background: linear-gradient(135deg, var(--c-rojo) 0%, var(--c-rojo-oscuro) 50%, #4A0000 100%);
  padding-block: clamp(3rem, 8vw, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-final__decoracion {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cta-final__decoracion--1 {
  width: 400px; height: 400px;
  top: -200px; right: -100px;
  background: radial-gradient(circle, rgba(249,168,37,.15), transparent 70%);
}

.cta-final__decoracion--2 {
  width: 300px; height: 300px;
  bottom: -150px; left: -80px;
  background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
}

.cta-final__interior {
  position: relative;
  z-index: 1;
}

.cta-final__etiqueta {
  font-family: var(--f-titulo);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--c-amarillo);
  text-transform: uppercase;
  margin-bottom: var(--s-sm);
  display: block;
}

.cta-final__titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-h2);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: var(--s-md);
}

.cta-final__subtitulo {
  font-size: var(--t-md);
  color: rgba(255,255,255,.85);
  line-height: 1.65;
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--s-lg);
}

.cta-final__subtitulo strong { color: var(--c-amarillo); }

/* ── Caja del código ── */
.cta-final__codigo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  background: rgba(255,255,255,.12);
  border: 2px dashed rgba(255,255,255,.4);
  border-radius: var(--r-md);
  padding: var(--s-sm) var(--s-lg);
  margin-bottom: var(--s-lg);
}

.cta-final__codigo-texto {
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 900;
  color: var(--c-amarillo);
  letter-spacing: 0.12em;
}

.cta-final__copiar {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.8em;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--tr-r);
  min-height: 44px;
}

.cta-final__copiar:hover { background: rgba(255,255,255,.25); }
.cta-final__copiar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ── Botón WhatsApp ── */
.cta-final__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 56px;
  padding: 0 var(--s-xl);
  background: var(--c-verde-ws);
  color: #fff;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t-md);
  border-radius: var(--r-pill);
  margin-bottom: var(--s-md);
  transition: background var(--tr-r), transform var(--tr-r), box-shadow var(--tr-r);
}

.cta-final__btn:hover {
  background: var(--c-verde-ws-h);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,.4);
}

.cta-final__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.cta-final__nota {
  font-size: var(--t-xs);
  color: rgba(255,255,255,.55);
}


/* ════════════════════════════════════════════════
   footer.css — Universolibro
   Footer completo con buscador
   Fondo oscuro — cierre definitivo de la página
   ════════════════════════════════════════════════ */

.footer {
  background: #0F1923;
  color: rgba(255,255,255,.8);
}

/* ── Superior ── */
.footer__superior {
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-block: var(--s-xl);
}

.footer__interior {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xl);
}

@media (min-width: 640px) {
  .footer__interior { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer__interior { grid-template-columns: 1.8fr 1fr 1fr 1.6fr; gap: var(--s-lg); }
}

/* ── Columna marca ── */
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  margin-bottom: var(--s-md);
}

.footer__logo-nombre {
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 900;
  color: #fff;
}

.footer__descripcion {
  font-size: var(--t-sm);
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  margin-bottom: var(--s-md);
  max-width: 36ch;
}

.footer__ws {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--c-verde-ws);
  font-weight: 700;
  font-size: var(--t-sm);
  transition: color var(--tr-r);
  min-height: 44px;
}

.footer__ws:hover { color: var(--c-verde-ws-h); }

.footer__ws:focus-visible {
  outline: 3px solid var(--c-verde-ws);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Títulos de columna ── */
.footer__col-titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-sm);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--s-md);
}

/* ── Links ── */
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer__link {
  font-size: var(--t-sm);
  color: rgba(255,255,255,.6);
  transition: color var(--tr-r);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.footer__link:hover { color: var(--c-amarillo); }

.footer__link:focus-visible {
  outline: 3px solid var(--c-amarillo);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Buscador del footer ── */
.footer__buscador {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}

.footer__buscador-campo {
  position: relative;
  display: flex;
  align-items: center;
}

.footer__buscador-campo svg {
  position: absolute;
  left: 0.75rem;
  color: rgba(255,255,255,.4);
  pointer-events: none;
}

.footer__buscador-input {
  width: 100%;
  height: 44px;
  padding: 0 0.75rem 0 2.25rem;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm);
  color: #fff;
  font-family: var(--f-cuerpo);
  font-size: var(--t-sm);
  transition: border-color var(--tr-r), background var(--tr-r);
  -webkit-appearance: none;
}

.footer__buscador-input::placeholder { color: rgba(255,255,255,.35); }

.footer__buscador-input:focus {
  outline: none;
  border-color: var(--c-amarillo);
  background: rgba(255,255,255,.12);
}

.footer__buscador-btn {
  height: 44px;
  padding: 0 var(--s-lg);
  background: var(--c-amarillo);
  color: #1a1a1a;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t-sm);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--tr-r), transform var(--tr-r);
}

.footer__buscador-btn:hover {
  background: #e8971e;
  transform: translateY(-1px);
}

.footer__buscador-btn:focus-visible {
  outline: 3px solid var(--c-amarillo);
  outline-offset: 2px;
}

.footer__horario {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--t-xs);
  color: rgba(255,255,255,.45);
  margin-top: var(--s-sm);
}

/* ── Inferior ── */
.footer__inferior {
  padding-block: var(--s-md);
}

.footer__copy {
  font-size: var(--t-xs);
  color: rgba(255,255,255,.35);
  text-align: center;
}

.footer__copy-link {
  color: rgba(255,255,255,.5);
  transition: color var(--tr-r);
}

.footer__copy-link:hover { color: var(--c-amarillo); }


/* ════════════════════════════════════════════════
   popup.css — Universolibro
   Popup de bienvenida con oferta primera compra
   ════════════════════════════════════════════════ */

.popup {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-md);
}

.popup[hidden] { display: none !important; }

/* Overlay semitransparente */
.popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

/* Caja del popup */
.popup__caja {
  position: relative;
  z-index: 1;
  background: var(--c-fondo);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: var(--sh-xl);
  animation: popup-entrar 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes popup-entrar {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .popup__caja { animation: none; }
}

/* Botón cerrar */
.popup__cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-fondo-suave);
  border: 1.5px solid var(--c-borde);
  color: var(--c-texto-tenue);
  cursor: pointer;
  transition: background var(--tr-r), color var(--tr-r);
}

.popup__cerrar:hover { background: var(--c-rojo); color: #fff; border-color: var(--c-rojo); }
.popup__cerrar:focus-visible { outline: 3px solid var(--c-rojo); outline-offset: 2px; }

.popup__icono {
  font-size: 2.5rem;
  margin-bottom: var(--s-sm);
  display: block;
}

.popup__eyebrow {
  font-family: var(--f-titulo);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-rojo);
  margin-bottom: 0.3rem;
}

.popup__titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 900;
  color: var(--c-texto);
  margin-bottom: var(--s-sm);
  line-height: 1.2;
}

.popup__titulo span { color: var(--c-rojo); }

.popup__desc {
  font-size: var(--t-sm);
  color: var(--c-texto-suave);
  line-height: 1.65;
  margin-bottom: var(--s-lg);
}

/* Código de descuento */
.popup__codigo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  background: var(--color-fondo-badge);
  border: 2px dashed var(--c-amarillo);
  border-radius: var(--r-md);
  padding: var(--s-sm) var(--s-md);
  margin-bottom: var(--s-lg);
}

.popup__codigo-texto {
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 900;
  color: var(--c-rojo);
  letter-spacing: 0.1em;
}

.popup__copiar {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.35em 0.8em;
  background: var(--c-amarillo);
  color: #1a1a1a;
  border: none;
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--tr-r), transform var(--tr-r);
  min-height: 44px;
}

.popup__copiar:hover { background: #e8971e; transform: scale(1.04); }
.popup__copiar:focus-visible { outline: 3px solid var(--c-rojo); outline-offset: 2px; }

/* Botón WhatsApp */
.popup__btn-ws {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s-lg);
  background: var(--c-verde-ws);
  color: #fff;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t-base);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-sm);
  transition: background var(--tr-r), transform var(--tr-r), box-shadow var(--tr-r);
}

.popup__btn-ws:hover {
  background: var(--c-verde-ws-h);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,211,102,.35);
}

.popup__btn-ws:focus-visible { outline: 3px solid var(--c-verde-ws); outline-offset: 3px; }

.popup__nota {
  font-size: var(--t-xs);
  color: var(--c-texto-tenue);
}

/* Modo oscuro */
[data-tema="oscuro"] .popup__caja {
  background: var(--c-fondo-suave);
  border: 1px solid var(--c-borde);
}

[data-tema="oscuro"] .popup__cerrar {
  background: var(--c-fondo);
  border-color: var(--c-borde);
}