/* ============================================================
   EZ EXPRESS — Sistema de diseño
   Colores de marca: azul #1717A8 · rojo #F5141C · blanco
   ============================================================ */

:root {
  /* Marca */
  --blue:        #1717A8;
  --blue-700:    #12128C;
  --blue-900:    #0A0A55;
  --blue-50:     #EEEEFB;
  --blue-100:    #DCDCF6;
  --red:         #F5141C;
  --red-700:     #C90D14;
  --red-50:      #FEECED;

  /* El dorado del afiche del cupón. Solo se usa ahí. */
  --gold:        #C9A24B;

  /* Neutros */
  --white:       #FFFFFF;
  --ink:         #0D0D1F;
  --ink-2:       #3A3A55;
  --ink-3:       #6B6B85;
  --line:        #E3E3EE;
  --bg-soft:     #F6F7FB;

  /* Sistema */
  --radius:      14px;
  --radius-sm:   9px;
  --radius-lg:   22px;
  --shadow-sm:   0 1px 2px rgba(13,13,31,.06), 0 2px 8px rgba(13,13,31,.05);
  --shadow:      0 4px 14px rgba(13,13,31,.08), 0 12px 32px rgba(13,13,31,.07);
  --shadow-lg:   0 18px 50px rgba(10,10,85,.16);
  --maxw:        1180px;
  --nav-h:       74px;

  /* Escala fluida: en vez de saltar de un valor a otro en cada
     breakpoint, el aire crece y se encoge con el ancho real de la
     pantalla. Eso es lo que hace que en el celular no sobre espacio
     vacio ni se sienta apretado. */
  --wrap-pad:    clamp(16px, 4.6vw, 20px);
  --pad-sec:     clamp(46px, 8.5vw, 84px);
  --pad-card:    clamp(18px, 4.8vw, 26px);
  --gap:         clamp(14px, 3.4vw, 22px);

  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Archivo Black", "Arial Black", var(--font);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--wrap-pad); }
.section { padding: var(--pad-sec) 0; }
.section--soft { background: var(--bg-soft); }
.section--blue { background: var(--blue-900); color: var(--white); }
.section--blue .sec-sub { color: rgba(255,255,255,.75); }

.sec-head { max-width: 720px; margin: 0 auto clamp(28px, 5.6vw, 48px); text-align: center; }
.sec-head--left { margin-inline: 0; text-align: left; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red); margin-bottom: 12px;
}
.section--blue .eyebrow { color: #FF6A70; }
.sec-title { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.6rem); font-weight: 800; }
.sec-sub { font-size: 1.06rem; color: var(--ink-2); margin: 0; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: .97rem; letter-spacing: .01em;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.btn--primary { background: var(--red); color: var(--white); box-shadow: 0 6px 18px rgba(245,20,28,.32); }
.btn--primary:hover { background: var(--red-700); box-shadow: 0 10px 26px rgba(245,20,28,.4); }
.btn--blue { background: var(--blue); color: var(--white); box-shadow: 0 6px 18px rgba(23,23,168,.28); }
.btn--blue:hover { background: var(--blue-700); }
.btn--ghost { background: transparent; color: var(--blue); border-color: var(--blue-100); }
.btn--ghost:hover { background: var(--blue-50); border-color: var(--blue); }
.btn--white { background: var(--white); color: var(--blue-900); }
.btn--white:hover { background: var(--blue-50); }
.btn--outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); }
.btn--outline-white:hover { background: rgba(255,255,255,.12); border-color: var(--white); }
.btn--lg { padding: 16px 32px; font-size: 1.04rem; }
.btn--sm { padding: 9px 17px; font-size: .86rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60; height: var(--nav-h);
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { height: 100%; display: flex; align-items: center; gap: 20px; }
.nav__logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav__logo img { height: 42px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__links a {
  padding: 9px 13px; border-radius: 8px; font-size: .93rem; font-weight: 600; color: var(--ink-2);
  transition: color .15s, background-color .15s;
}
.nav__links a:hover { color: var(--blue); background: var(--blue-50); }
.nav__links a[aria-current="page"] { color: var(--blue); }
.nav__cta { display: flex; align-items: center; gap: 10px; margin-left: 14px; }

/* ---------- Cabecera del panel ----------
   Dos filas. Arriba el logo y la sesión, que nunca se cortan; abajo
   las secciones, todas a la vista y en grupos. Si no caben en una
   fila bajan enteras a la siguiente: nunca se parte una palabra
   dentro de su botón ni se esconde nada en un «Más».

   Antes era el mismo menú de la web pública con doce entradas
   metidas en una fila pensada para seis, y el botón de Salir se
   salía por la derecha. */
.phead-top { background: var(--white); border-bottom: 1px solid var(--line); }
.phead-top__in {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding-top: 8px; padding-bottom: 8px;
}
.phead-top__logo { display: flex; align-items: center; flex: none; }
.phead-top__logo img { height: 38px; width: auto; }
.phead-top__tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-50); border-radius: 6px; padding: 4px 8px;
}
.phead-top__cuenta { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.phead-top__web {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .88rem; font-weight: 600; color: var(--ink-3); text-decoration: none;
}
.phead-top__web:hover { color: var(--blue); }
.phead-top__web svg { width: 14px; height: 14px; }
.phead-top__user {
  display: flex; align-items: center; gap: 10px;
  padding-left: 16px; border-left: 1px solid var(--line);
}
.phead-top__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: var(--white); font-weight: 800; font-size: .95rem;
}
.phead-top__who { display: flex; flex-direction: column; line-height: 1.2; }
.phead-top__who strong { font-size: .9rem; color: var(--ink); white-space: nowrap; }
.phead-top__who small { font-size: .74rem; color: var(--ink-3); }
.phead-top__salir { white-space: nowrap; }

/* La fila de secciones se queda arriba al bajar por una tabla larga:
   así se cambia de página sin volver a subir. */
.phead-menu {
  position: sticky; top: 0; z-index: 60;
  background: var(--blue-900);
  box-shadow: 0 2px 10px rgba(10,10,85,.18);
}
.phead-menu__in { display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 2px; }
.phead-menu a {
  position: relative; display: flex; align-items: center;
  padding: 13px 11px; white-space: nowrap;
  font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.76);
  text-decoration: none; transition: color .15s, background-color .15s;
}
.phead-menu a:hover { color: var(--white); background: rgba(255,255,255,.08); }
.phead-menu a[aria-current="page"] { color: var(--white); }
.phead-menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--red);
}
.phead-menu__sep {
  align-self: center; width: 1px; height: 18px; margin: 0 8px;
  background: rgba(255,255,255,.2);
}

/* En el celular la fila de secciones no se queda pegada —en el panel
   se leen tablas largas— y va en UNA línea que se desliza con el
   dedo: envuelta ocupaba un tercio de la pantalla. */
@media (max-width: 980px) {
  .phead-menu { position: static; }
  .phead-menu__in {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .phead-menu__in::-webkit-scrollbar { display: none; }
  .phead-menu a { flex: none; padding: 12px 10px; }
}
/* En el celular la fila de arriba se queda con lo justo: el logo, un
   icono para ver la web y el botón de Salir, que es lo que no puede
   salirse de la pantalla. El nombre de quién entró es adorno. */
@media (max-width: 640px) {
  .phead-top__in { flex-wrap: wrap; gap: 10px; min-height: 58px; }
  .phead-top__tag, .phead-top__user, .phead-top__web-txt { display: none; }
  .phead-top__cuenta { gap: 14px; }
  .phead-top__web svg { width: 18px; height: 18px; }
  .phead-top__logo img { height: 32px; }
}
.nav__toggle {
  display: none; margin-left: auto; background: none; border: 0; padding: 8px;
  color: var(--blue); border-radius: 8px;
}

/* El botón corto de entrar, solo para el celular: en pantalla grande
   ya está la barra de botones completa a la derecha.

   Va aquí arriba y no más abajo a propósito: el media query del
   celular está a continuación, y si esta regla quedara después lo
   anularía por venir la última con la misma especificidad. */
.nav__mini { display: none; }
.nav__toggle:hover { background: var(--blue-50); }

/* Menú móvil: la barra crece hacia abajo (push-down), sin superposiciones

   El corte está en 1150 y no en 980 por una razón medida: con la barra
   completa —logo, seis enlaces y dos botones— el contenido pide unos
   1104 px. Entre 981 y 1104 la barra no cabía y se salía por la derecha
   unos 95 px, y ahí caen dos tamaños muy comunes: la tableta en
   horizontal (1024) y la ventana del navegador puesta a media pantalla.
   Por debajo de 1150 se usa el menú de hamburguesa, que en ese ancho se
   ve bien y no obliga a encoger nada. */
@media (max-width: 1150px) {
  .nav { height: auto; }
  .nav__inner { flex-wrap: wrap; min-height: var(--nav-h); gap: 12px; }
  /* El botón de entrar, en la barra blanca. Va pegado al hamburguesa
     y empuja los dos a la derecha con su propio margen, así el logo
     se queda a la izquierda como siempre. */
  .nav__mini { display: flex; margin-left: auto; }
  .nav__mini .btn { white-space: nowrap; padding: 8px 14px; font-size: .88rem; }
  .nav__toggle { display: block; margin-left: 6px; }
  .nav__links, .nav__cta {
    display: none;
    flex: 0 0 100%; width: 100%;
    flex-direction: column; align-items: stretch; gap: 4px; margin: 0;
  }
  .nav.is-open .nav__links { display: flex; padding-top: 6px; border-top: 1px solid var(--line); }
  .nav.is-open .nav__cta { display: flex; padding-bottom: 18px; }
  .nav__links a { padding: 13px 10px; font-size: 1rem; }
  .nav__cta .btn { width: 100%; }

}

/* ---------- Hero ---------- */
/* La foto de la bodega va DETRÁS del degradado de siempre, no en su
   lugar: el azul tapado al 88 % deja ver las cajas y los estantes sin
   quitarle contraste al texto blanco, que es lo que la gente viene a
   leer. Si la foto no cargara, el degradado queda igual que antes. */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(245,20,28,.20), transparent 60%),
    radial-gradient(760px 520px at 8% 8%, rgba(23,23,168,.30), transparent 62%),
    linear-gradient(160deg, rgba(10,10,85,.95) 0%, rgba(18,18,140,.90) 62%, rgba(23,23,168,.84) 100%),
    url("../assets/bodega-guayaquil.jpg") center / cover no-repeat,
    linear-gradient(160deg, var(--blue-900) 0%, var(--blue-700) 62%, var(--blue) 100%);
  color: var(--white);
  padding: clamp(30px, 7vw, 78px) 0 0;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 90px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.06));
  pointer-events: none;
}
.hero__grid {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(30px, 6.5vw, 56px); align-items: center;
  padding-bottom: clamp(34px, 6.5vw, 64px);
}
.hero__route {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; font-size: .88rem; font-weight: 700; letter-spacing: .02em;
  margin-bottom: 22px;
}
.hero__route .flags { font-size: 1.1rem; letter-spacing: 2px; }
.hero h1 {
  font-size: clamp(2.15rem, 1.2rem + 3.9vw, 3.75rem);
  font-weight: 800; letter-spacing: -0.03em; margin-bottom: 20px;
}
.hero h1 .hl { color: #FFD5D7; }
.hero h1 .hl-red {
  background: linear-gradient(180deg, transparent 62%, rgba(245,20,28,.85) 62%);
  padding: 0 4px;
}
.hero__lead { font-size: 1.13rem; color: rgba(255,255,255,.85); max-width: 54ch; margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.hero__proof { display: flex; align-items: center; gap: 14px; font-size: .92rem; color: rgba(255,255,255,.78); }
.hero__proof strong { color: var(--white); }
.stars { color: #FFC94D; letter-spacing: 2px; }

/* Tarjeta de rastreo en hero */
.track-card {
  background: var(--white); color: var(--ink); border-radius: var(--radius-lg);
  padding: clamp(20px, 5.2vw, 30px); box-shadow: var(--shadow-lg);
}
.track-card h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 6px; }
.track-card p.hint { font-size: .92rem; color: var(--ink-3); margin-bottom: 18px; }
.track-form { display: flex; gap: 10px; }
.track-form input {
  flex: 1 1 auto; min-width: 0; padding: 14px 16px; border: 2px solid var(--line);
  border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.track-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-50); }
.track-divider {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 18px;
  color: var(--ink-3); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.track-divider::before, .track-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Barra de confianza */
.trustbar { border-top: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.16); }
.trustbar__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 26px 0;
}
.trustbar__item { text-align: center; padding: 6px 12px; }
.trustbar__num { font-size: 1.6rem; font-weight: 800; color: var(--white); line-height: 1.1; }
.trustbar__label { font-size: .84rem; color: rgba(255,255,255,.72); }
.trustbar__nota {
  max-width: 78ch; margin: 0 auto; padding: 0 0 26px;
  font-size: .87rem; line-height: 1.6; color: rgba(255,255,255,.6); text-align: center;
}
.trustbar__nota:empty { display: none; }

@media (max-width: 900px) {
  /* En celular la foto se recorta mucho y, centrada, solo se veía la
     parte oscura de los estantes. Corrida a la derecha se ven las
     cajas y la gente trabajando, que es lo que cuenta la foto. */
  .hero { background-position: center, center, center, 72% center, center; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; }
  .trustbar__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 520px) {
  .track-form { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}

/* ---------- Grillas de tarjetas ---------- */
.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--pad-card); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-100); }
.card__icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue); margin-bottom: 16px;
}
.card__icon--red { background: var(--red-50); color: var(--red); }
.card h3 { font-size: 1.13rem; font-weight: 800; margin-bottom: 8px; }
.card p { font-size: .96rem; color: var(--ink-2); margin: 0; }
.card__flag {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red); background: var(--red-50);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}

/* ---------- Pasos ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 4vw, 26px); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 12px; }
.step__num {
  counter-increment: step; width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue); color: var(--white); display: grid; place-items: center;
  font-weight: 800; font-size: 1.15rem; margin-bottom: 16px; box-shadow: 0 6px 16px rgba(23,23,168,.28);
}
.step__num::before { content: counter(step); }
.step h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: 6px; }
.step p { font-size: .95rem; color: var(--ink-2); margin: 0; }

/* ---------- Tiendas ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.store-chip {
  padding: 11px 22px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); font-weight: 700; font-size: .95rem; color: var(--ink-2);
  box-shadow: var(--shadow-sm); transition: transform .15s, color .15s, border-color .15s;
}
.store-chip:hover { transform: translateY(-3px); color: var(--blue); border-color: var(--blue-100); }
.store-chip--more { background: var(--blue); color: var(--white); border-color: var(--blue); }
.store-chip--more:hover { color: var(--white); }

/* ---------- Categorías ---------- */
.cat-card { display: flex; flex-direction: column; height: 100%; }

/* La foto de cada categoría. Va pegada a los bordes de la tarjeta —de
   ahí los márgenes negativos— y con alto fijo, para que las tres se
   vean parejas aunque las fotos no midan igual. */
.cat-card__foto {
  display: block; width: calc(100% + var(--pad-card) * 2);
  margin: calc(var(--pad-card) * -1) calc(var(--pad-card) * -1) 18px;
  height: 172px; object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-soft);
}
.cat-card--featured { border-color: var(--blue); box-shadow: var(--shadow); position: relative; }
.cat-card--featured::before {
  content: "Más usada"; position: absolute; top: -12px; left: 26px;
  background: var(--red); color: var(--white); font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
}
.cat-card__tag { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.cat-card__name { font-size: 1.45rem; font-weight: 800; margin: 4px 0 10px; }
.cat-specs { margin: 18px 0 22px; border-top: 1px solid var(--line); }
.cat-specs li {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .93rem;
}
.cat-specs dt, .cat-specs .k { color: var(--ink-3); }
.cat-specs .v { font-weight: 700; text-align: right; }
.cat-card .btn { margin-top: auto; }

/* ---------- Diferenciadores (fondo azul) ---------- */
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .diff-grid { grid-template-columns: 1fr; } }
.diff {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: var(--pad-card);
}
.diff h3 { font-size: 1.08rem; font-weight: 800; color: var(--white); margin-bottom: 8px; }
.diff p { color: rgba(255,255,255,.78); font-size: .95rem; margin: 0; }
.diff__mark { color: #6BE59B; font-weight: 800; }

/* ---------- Testimonios ---------- */
.quote { display: flex; flex-direction: column; gap: 14px; }
.quote p { font-size: 1rem; color: var(--ink-2); font-style: italic; margin: 0; }
.quote__who { display: flex; align-items: center; gap: 12px; }
.quote__av {
  width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: var(--white);
  display: grid; place-items: center; font-weight: 800; font-size: .95rem; flex: 0 0 auto;
}
.quote__name { font-weight: 700; font-size: .93rem; }
.quote__meta { font-size: .82rem; color: var(--ink-3); }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
  margin-bottom: 12px; overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.faq details[open] { border-color: var(--blue-100); box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 54px 18px 20px; position: relative;
  font-weight: 700; font-size: 1.01rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--blue); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.faq .faq__body { padding: 0 20px 20px; color: var(--ink-2); font-size: .97rem; }
.faq .faq__body p:last-child { margin-bottom: 0; }
.faq .faq__body ul { list-style: disc; padding-left: 20px; margin: 0 0 1em; }
.faq .faq__body li { margin-bottom: 6px; }

/* ---------- CTA final ---------- */
.cta-final {
  background: linear-gradient(130deg, var(--blue-900), var(--blue) 78%);
  color: var(--white); border-radius: var(--radius-lg); text-align: center;
  padding: clamp(34px, 7.5vw, 54px) clamp(20px, 5.5vw, 44px);
  box-shadow: var(--shadow-lg);
}
.cta-final h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.35rem); font-weight: 800; }
.cta-final p { color: rgba(255,255,255,.82); max-width: 58ch; margin-inline: auto; font-size: 1.05rem; }
.cta-final .hero__actions { justify-content: center; margin-top: 26px; margin-bottom: 0; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.72); padding: clamp(40px, 8vw, 60px) 0 28px; font-size: .93rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(26px, 5vw, 36px); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 { color: var(--white); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.footer a:hover { color: var(--white); }
.footer li { margin-bottom: 9px; }
.footer__logo { background: var(--white); border-radius: 10px; padding: 12px 14px; display: inline-block; margin-bottom: 16px; }
.footer__logo img { height: 38px; }
.footer__social { display: flex; gap: 10px; margin-top: 14px; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08);
  display: grid; place-items: center; transition: background-color .15s, transform .15s;
}
.footer__social a:hover { background: var(--blue); transform: translateY(-2px); }
.footer__bottom {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .86rem;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 24px rgba(37,211,102,.45);
  transition: transform .18s ease;
}
.wa-float:hover { transform: scale(1.08); }

/* ============================================================
   Formularios / cuenta / panel
   ============================================================ */
.auth-page {
  background: var(--bg-soft); min-height: calc(100vh - var(--nav-h));
  padding: clamp(26px, 6vw, 56px) 0 clamp(46px, 8vw, 72px);
}
/* 100dvh descuenta la barra del navegador movil, que aparece y
   desaparece al hacer scroll. Con 100vh la pagina daba un salto. */
@supports (height: 100dvh) { .auth-page { min-height: calc(100dvh - var(--nav-h)); } }
.auth-card {
  max-width: 460px; margin-inline: auto; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(22px, 5.5vw, 36px); box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 1.65rem; font-weight: 800; margin-bottom: 6px; }
.auth-card .sub { color: var(--ink-3); font-size: .96rem; margin-bottom: 26px; }

.tabs { display: flex; gap: 6px; background: var(--bg-soft); padding: 5px; border-radius: 999px; margin-bottom: 26px; }
.tabs button {
  flex: 1; padding: 10px 14px; border: 0; background: transparent; border-radius: 999px;
  font-weight: 700; font-size: .94rem; color: var(--ink-3); transition: background-color .15s, color .15s;
}
.tabs button[aria-selected="true"] { background: var(--white); color: var(--blue); box-shadow: var(--shadow-sm); }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: 6px; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--radius-sm);
  font-size: 1rem; font-family: inherit; background: var(--white); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-50);
}
.field .help { font-size: .82rem; color: var(--ink-3); margin-top: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.alert { padding: 13px 16px; border-radius: var(--radius-sm); font-size: .92rem; margin-bottom: 18px; }
.alert--error { background: var(--red-50); color: var(--red-700); border: 1px solid #F8C9CB; }
.alert--ok { background: #E9F9EF; color: #0E7A3D; border: 1px solid #BDEBCE; }
.alert--info { background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); }
.alert--amber { background: #FFF3D6; color: #7A5000; border: 1px solid #F3DDA8; }

/* Recordatorio fijo del panel — con aire de notificación */
.recordatorio {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--blue-100);
  border-left: 4px solid var(--red);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.recordatorio__icono {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--red-50); color: var(--red);
}
.recordatorio__texto { flex: 1 1 260px; min-width: 0; }
.recordatorio__texto strong { display: block; font-size: 1rem; margin-bottom: 3px; }
.recordatorio__texto p { margin: 0; font-size: .9rem; color: var(--ink-2); }
@media (max-width: 560px) {
  .recordatorio { gap: 12px; padding: 14px; }
  /* El icono es decorativo: en el móvil estorba más de lo que aporta,
     y este bloque se ve en cada visita. */
  .recordatorio__icono { display: none; }
  .recordatorio__texto p { font-size: .86rem; }
  .recordatorio .btn { width: 100%; }
}
/* El navegador oculta [hidden] con `display:none`, pero cualquier clase
   nuestra que declare `display` (.btn, .alert…) le gana por especificidad
   y el elemento se sigue viendo. Esta regla lo zanja para toda la web. */
[hidden] { display: none !important; }

/* Panel */
.panel {
  background: var(--bg-soft); min-height: calc(100vh - var(--nav-h));
  padding: clamp(24px, 5vw, 40px) 0 clamp(46px, 8vw, 72px);
}
@supports (height: 100dvh) { .panel { min-height: calc(100dvh - var(--nav-h)); } }
.panel__head {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  margin-bottom: 30px;
}
.panel__head h1 { font-size: 1.75rem; font-weight: 800; margin: 0; }
.panel__head .muted { color: var(--ink-3); font-size: .95rem; }
.panel-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--gap); align-items: start; }
@media (max-width: 900px) { .panel-grid { grid-template-columns: 1fr; } }

.box {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--pad-card); box-shadow: var(--shadow-sm); margin-bottom: var(--gap);
}
.box > h2 { font-size: 1.18rem; font-weight: 800; margin-bottom: 4px; }
.box > .box-sub { color: var(--ink-3); font-size: .92rem; margin-bottom: 20px; }

.addr {
  background: var(--blue-50); border: 1px dashed var(--blue-100); border-radius: var(--radius-sm);
  padding: 18px; font-size: .95rem; position: relative;
}
.addr dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.addr dt { color: var(--ink-3); font-size: .86rem; }
.addr dd { margin: 0; font-weight: 700; word-break: break-word; }
.addr .locker-code { color: var(--red); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.copy-btn {
  margin-top: 14px; background: var(--white); border: 1px solid var(--blue-100); color: var(--blue);
  padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: .88rem;
  transition: background-color .15s;
}
.copy-btn:hover { background: var(--white); border-color: var(--blue); }

/* El botón chico que va pegado a cada dato. Tiene que caber al lado
   del valor sin empujarlo a otra línea en un celular, y al mismo
   tiempo ser lo bastante grande para tocarlo con el dedo: de ahí el
   relleno vertical y el min-height. */
.copia-mini {
  margin-left: 10px; padding: 3px 10px; min-height: 28px;
  background: var(--white); border: 1px solid var(--blue-100); color: var(--blue);
  border-radius: 999px; font-weight: 700; font-size: .72rem;
  letter-spacing: .02em; white-space: nowrap; vertical-align: middle;
  transition: background-color .15s, border-color .15s, color .15s;
}
.copia-mini:hover { border-color: var(--blue); }
.copia-mini.copiado { background: #0E7A3D; border-color: transparent; color: var(--white); }
.addr dd { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.rates { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 520px; }
table.rates th, table.rates td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); }
table.rates thead th {
  background: var(--blue-900); color: var(--white); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700;
}
table.rates thead th:first-child { border-top-left-radius: 10px; }
table.rates thead th:last-child { border-top-right-radius: 10px; }
table.rates tbody tr:hover { background: var(--bg-soft); }
table.rates .price { font-weight: 800; color: var(--blue); white-space: nowrap; }

.pkg-list li {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.pkg-list li:last-child { border-bottom: 0; }
.pkg__code { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; }
.pkg__desc { font-size: .88rem; color: var(--ink-3); }
.pkg__acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Tarjeta de un paquete dentro de "Mis paquetes" */
.paq { border: 1px solid var(--line); border-radius: 14px; padding: clamp(14px, 4vw, 18px); margin-bottom: 16px; }
/* Ya está en Guayaquil: se resalta, es la noticia que el cliente espera */
.paq--llego { border-color: #BDEBCE; background: #FBFEFC; }
.paq:last-child { margin-bottom: 0; }
.paq__head {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}

/* ---- La tarjeta se pliega ----
   Con varios paquetes, cada uno ocupaba una pantalla entera. Ahora
   la cabecera es lo único que se ve siempre y el detalle se abre al
   tocarla. */
.paq__head {
  cursor: pointer; list-style: none; user-select: none;
  padding-right: 26px; position: relative;
}
/* Safari pinta su propio triangulito si no se le quita */
.paq__head::-webkit-details-marker { display: none; }

/* La flecha, a la derecha del todo. Gira al abrir. */
.paq__head::after {
  content: ''; position: absolute; right: 2px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .18s ease;
}
.paq[open] > .paq__head::after { transform: rotate(-135deg); margin-top: -2px; }

.paq__head:hover .pkg__code { color: var(--blue); }

/* Lo que le falta a ese paquete, visible sin abrirlo: si no, habría
   que ir abriéndolos uno a uno para encontrar cuál era. */
.paq__pista {
  margin-top: 4px; font-size: .82rem; font-weight: 700;
  color: var(--red); letter-spacing: .01em;
}

/* El estado del envío también se dice en la cabecera, pero no es
   algo que falte: va en azul para que no se confunda con los avisos
   rojos de "falta el tracking" o "falta la factura". */
.paq__pista--envio { color: var(--blue); }

/* Al plegarse, el hueco entre la cabecera y lo de dentro lo pone ya
   cada bloque con su propio margen. */
.paq[open] > .paq__head { margin-bottom: 2px; }
.paq__facturas { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.paq__facturas .pkg-list li { padding: 10px 0; }

/* --- Lo que hay por hacer, arriba de cada página del panel ---
   Pegada a la cabecera y sin nada que abrir: si hay que desplegarla
   para ver que había un pago esperando, no sirve de nada.

   Cada aviso lleva su dibujo y su número, y lleva a la página donde
   se resuelve. Lo urgente —pagos, envíos, avisos de WhatsApp— va
   primero y en rojo; lo demás en ámbar. */
.pbar {
  background: var(--white); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(13,13,31,.04);
}
.pbar__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding-top: 12px; padding-bottom: 12px;
}
.pbar__head { display: flex; align-items: center; gap: 10px; flex: none; }
.pbar__bell {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFF4D6; color: #9A5B00;
}
.pbar--fuerte .pbar__bell { background: var(--red-50); color: var(--red-700); }
.pbar__bell svg { width: 18px; height: 18px; }
.pbar__eti { display: flex; flex-direction: column; line-height: 1.2; }
.pbar__eti strong { font-size: .92rem; color: var(--ink); }
.pbar__eti small { font-size: .76rem; color: var(--ink-3); white-space: nowrap; }
/* Al lado de «Pendientes» en pantalla ancha; debajo en el celular */
.pbar__items { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 520px; min-width: 0; }
.pbar__item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 9px; border-radius: 10px;
  background: #FFFBEF; border: 1px solid #F0DDA4; color: #5C4300;
  font-size: .87rem; font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pbar__item:hover {
  border-color: #D9A93A; color: #5C4300;
  box-shadow: 0 2px 8px rgba(13,13,31,.08); transform: translateY(-1px);
}
.pbar__ico { display: inline-flex; color: #9A5B00; }
.pbar__n {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #A5620A; color: var(--white); font-size: .78rem; font-weight: 800;
}
.pbar__flecha { width: 14px; height: 14px; opacity: .4; margin-left: -2px; }
.pbar__item:hover .pbar__flecha { opacity: .85; }
.pbar__item--fuerte { background: #FFF5F5; border-color: #F4C5C8; color: #7E0F14; }
.pbar__item--fuerte:hover { border-color: #E2747A; color: #7E0F14; }
.pbar__item--fuerte .pbar__ico { color: var(--red-700); }
.pbar__item--fuerte .pbar__n { background: var(--red-700); }

/* El mismo aviso, con sitio para explicarse, en el tablero */
.pend-list { list-style: none; margin: 0; padding: 0; }
.pend-list__item {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.pend-list__item:last-child { margin-bottom: 0; }
.pend-list__item--fuerte { border-color: #E9A0A0; background: #FFFAFA; }
.pend-list__item > a {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--ink);
}
.pend-list__item > a:hover strong { color: var(--blue); }
.pend-list__n {
  flex: none; min-width: 44px; height: 44px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--blue-50); color: var(--blue-900);
  font-size: 1.25rem; font-weight: 800;
}
.pend-list__item--fuerte .pend-list__n { background: #FFE7E7; color: #C42B2B; }
.pend-list__cajas {
  margin: 12px 0 0; padding: 12px 0 0 20px;
  border-top: 1px solid var(--line); font-size: .9rem;
}
.pend-list__cajas li { margin-bottom: 5px; }

/* --- Elegir qué cajas van en el envío ---
   Va dentro del formulario, no como cartel arriba de la lista: se
   pregunta cuando la persona ya decidió mandar algo. */
.grupo {
  border: 1px solid var(--blue-100);
  border-radius: 12px;
  padding: 14px;
  margin: 0 0 16px;
  background: var(--blue-50);
}
.grupo__titulo {
  padding: 0 6px; margin: 0;
  font-size: .98rem; font-weight: 800; color: var(--blue-900);
}
.grupo__texto { margin: 6px 0 12px; font-size: .88rem; color: var(--ink-2); }

.grupo__cajas {
  display: grid; gap: 4px;
  background: #fff;
  border: 1px solid var(--blue-100);
  border-radius: 10px;
  padding: 8px;
}
.grupo__caja {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px; border-radius: 8px; cursor: pointer;
}
.grupo__caja:hover { background: var(--blue-50); }
/* El cuadrito, más grande de lo normal: se marca con el dedo */
.grupo__caja input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--blue); }
.grupo__caja > span { display: block; }
.grupo__caja .pkg__desc { display: block; margin-top: 2px; }

/* La caja desde cuya tarjeta se abrió el envío: va sí o sí, así
   que lleva un visto fijo en vez de una casilla que se pueda
   desmarcar sin querer. */
.grupo__caja--fija { cursor: default; background: var(--blue-50); }
.grupo__caja--fija:hover { background: var(--blue-50); }
.grupo__tic {
  flex: none; width: 20px; height: 20px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--blue); color: #fff;
  font-size: .78rem; font-weight: 800;
}

.grupo__lb {
  display: inline-block; margin-left: 8px;
  font-size: .85rem; color: var(--ink-3);
}
.grupo__peso { margin: 12px 0 0; font-size: .95rem; color: var(--blue-900); }

/* --- Añadir el envío desde «Por pagar» ---
   Para no tener que salir a Mis paquetes, pedirlo, y volver. */
.envio-al-pagar {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.envio-al-pagar__titulo {
  margin: 0 0 4px; font-size: 1.05rem; color: var(--blue-900);
}

/* Envío a la ciudad del cliente, dentro de la tarjeta del paquete */
.paq__envio { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.paq__envio-head {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: baseline; justify-content: space-between; margin-bottom: 6px;
}
/* Foto de la guía de Servientrega dentro de la tarjeta */
.paq__guia-foto { display: block; margin-top: 12px; text-decoration: none; }
.paq__guia-foto img {
  display: block; max-width: 240px; max-height: 170px; width: auto;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft);
}
.paq__guia-foto .pkg__desc { margin-top: 6px; }

/* Bloque de "¿quién recibe?" dentro del formulario de envío */
.envio-quien {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; margin: 0 0 16px; background: var(--bg-soft);
}
.envio-quien legend { padding: 0 6px; }
.envio-op {
  display: inline-flex; align-items: center; gap: 7px;
  margin-right: 16px; font-size: .93rem; font-weight: 600; cursor: pointer;
}
.envio-op input { width: auto; margin: 0; }
.envio-quien .field:last-child { margin-bottom: 0; }
.envio-quien .help { font-size: .82rem; color: var(--ink-3); margin-top: 6px; }

.envio-form { margin-top: 16px; }
.envio-form .field { margin-bottom: 14px; }
.envio-form label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.envio-form input,
.envio-form select {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; background: #fff;
}
.envio-form input:focus,
.envio-form select:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.envio-form .help { font-size: .82rem; color: var(--ink-3); margin: 6px 0 0; }
/* Los redondeles y las casillas no se estiran como los campos de
   texto: con el ancho del 100 % de arriba quedaban lejos de su
   texto («Lo recibo yo», «Asegurar mi paquete»). */
.envio-form input[type="radio"],
.envio-form input[type="checkbox"] { width: auto; padding: 0; margin: 0; flex: 0 0 auto; accent-color: var(--blue); }
.envio-form label.envio-op {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; cursor: pointer; font-weight: 600;
}
.pkg__quitar {
  background: none; border: 0; padding: 4px 2px; cursor: pointer; font: inherit;
  font-size: .85rem; color: var(--ink-3); text-decoration: underline;
}
.pkg__quitar:hover { color: var(--red); }
.badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800;
  letter-spacing: .04em;
}
.badge--blue  { background: var(--blue-50); color: var(--blue); }
.badge--amber { background: #FFF3D6; color: #9A6400; }
.badge--green { background: #E9F9EF; color: #0E7A3D; }
.badge--gray  { background: #EEEEF3; color: var(--ink-3); }

.empty { text-align: center; padding: 34px 20px; color: var(--ink-3); }
.empty svg { margin: 0 auto 14px; color: var(--blue-100); }

/* Timeline de rastreo */
.timeline { position: relative; padding-left: 34px; margin-top: 8px; }
.timeline::before {
  content: ""; position: absolute; left: 13px; top: 10px; bottom: 10px; width: 2px; background: var(--line);
}
.timeline li { position: relative; padding-bottom: 26px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -29px; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--white); border: 3px solid var(--line);
}
.timeline li.done::before { border-color: var(--blue); background: var(--blue); }
.timeline li.current::before { border-color: var(--red); background: var(--red); box-shadow: 0 0 0 5px var(--red-50); }
.timeline .t-title { font-weight: 700; font-size: .98rem; }
.timeline .t-meta { font-size: .85rem; color: var(--ink-3); }

.util-note { font-size: .85rem; color: var(--ink-3); }
.util-note a { color: var(--blue); text-decoration: underline; }
.center { text-align: center; }
.mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }

/* Accesibilidad */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--blue); color: #fff;
  padding: 12px 18px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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


/* ============================================================
   MÓVIL — que se sienta una app, no una web encogida

   Tres ideas gobiernan todo lo de abajo:

   1. Aprovechar el ancho. En una pantalla de 375 px, una tarjeta con
      el icono arriba y el texto abajo desperdicia media pantalla. Con
      el icono a la izquierda ocupa casi la mitad de alto y se lee igual.
   2. Scroll horizontal donde el contenido es una lista de opciones
      (categorías, tiendas). Apilarlas verticalmente obliga a bajar
      metros de pantalla; deslizarlas de lado es el gesto natural.
   3. Nada de efectos de "hover" en pantallas táctiles. En un celular
      no existe el puntero: el navegador deja el efecto pegado después
      de tocar, y eso es lo que hace que una web se sienta barata.
   ============================================================ */

/* ---------- Base táctil (todas las pantallas) ---------- */

/* Ningún elemento debe poder empujar la página de lado. `clip` corta
   sin crear un contenedor de scroll, así la barra de navegación
   sigue quedándose pegada arriba. */
body { overflow-x: clip; }

a, button, summary, label,
input, select, textarea { -webkit-tap-highlight-color: transparent; }
/* Solo los títulos grandes se reparten en líneas parejas. En los
   títulos chicos `balance` hace lo contrario de lo que uno quiere:
   parte la frase en dos aunque en la primera línea sobre espacio. */
.hero h1, .sec-title, .cta-final h2, .auth-card h1, .panel__head h1 { text-wrap: balance; }
.sec-sub, .hero__lead, .card p, .step p { text-wrap: pretty; }

/* Un tracking largo no debe romper la caja que lo contiene */
.pkg__code, .locker-code { overflow-wrap: anywhere; }

/* Sombra sutil de la barra al hacer scroll: da profundidad y separa
   la barra del contenido que pasa por debajo. */
.nav.is-scrolled { box-shadow: 0 4px 18px rgba(13,13,31,.07); }

/* Carruseles: la barra de scroll se oculta porque el asomo de la
   siguiente tarjeta ya avisa que se desliza. */
.stores-scroll, .cats-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.stores-scroll::-webkit-scrollbar, .cats-scroll::-webkit-scrollbar { display: none; }

/* ---------- Sin puntero: se apaga el hover, se enciende el toque ---------- */
@media (hover: none) {
  .btn:hover, .card:hover, .store-chip:hover,
  .footer__social a:hover, .wa-float:hover { transform: none; }

  .card:hover        { box-shadow: var(--shadow-sm); border-color: var(--line); }
  .store-chip:not(.store-chip--more):hover { color: var(--ink-2); border-color: var(--line); }
  .btn--primary:hover { background: var(--red);  box-shadow: 0 6px 18px rgba(245,20,28,.32); }
  .btn--blue:hover    { background: var(--blue); }
  .btn--ghost:hover   { background: transparent; border-color: var(--blue-100); }
  .btn--white:hover   { background: var(--white); }
  .nav__links a:hover { color: var(--ink-2); background: transparent; }
  .footer__social a:hover { background: rgba(255,255,255,.08); }

  /* La respuesta al toque: un hundimiento corto. Es lo que hace que
     el botón se sienta "de verdad". */
  .btn:active, .copy-btn:active, .store-chip:active { transform: scale(.97); }
  .card:active { transform: scale(.99); }
  .wa-float:active { transform: scale(.94); }
  .nav__links a:active, .faq summary:active { background: var(--blue-50); }
}

/* ---------- Barra de navegación ----------
   Mismo corte que el bloque del menú de hamburguesa de más arriba: si
   los dos no coinciden, en la franja intermedia queda la barra alta
   con el menú plegado. */
@media (max-width: 1150px) {
  :root { --nav-h: 62px; }
  .nav__logo img { height: 34px; }
  .nav__toggle { padding: 10px; }
  .nav.is-open .nav__links { padding-top: 8px; }
  .nav__links a { border-radius: 10px; padding: 14px 12px; }
  .nav__cta { gap: 8px; }
}

/* ---------- Portada ---------- */
@media (max-width: 620px) {
  .hero__route { margin-bottom: 16px; padding: 7px 14px 7px 10px; font-size: .82rem; }
  .hero__lead  { font-size: 1.02rem; margin-bottom: 22px; }
  .hero__actions { gap: 10px; margin-bottom: 24px; }
  .hero__proof { font-size: .86rem; gap: 10px; }
  .btn--lg { padding: 15px 26px; font-size: 1rem; }
  .track-card h2 { font-size: 1.18rem; }
  .track-card p.hint { font-size: .88rem; margin-bottom: 14px; }
  .track-divider { margin: 18px 0 14px; font-size: .74rem; }

  .trustbar__grid { gap: 12px; padding: 20px 0; }
  .trustbar__item { padding: 4px 6px; }
  .trustbar__num { font-size: 1.35rem; }
  .trustbar__label { font-size: .78rem; line-height: 1.35; }
  .trustbar__nota { font-size: .82rem; padding-bottom: 20px; }
}

/* ---------- Tarjetas: icono a la izquierda ----------
   Solo las que tienen icono. Las de categoría y las de reseña llevan
   otra estructura y se quedan como están. */
@media (max-width: 620px) {
  .card:has(> .card__icon) {
    display: grid; align-items: start; column-gap: 14px;
    grid-template-columns: 42px 1fr;
    grid-template-areas: "icon flag" "icon title" "icon text";
  }
  .card:has(> .card__icon) > .card__icon {
    grid-area: icon; width: 42px; height: 42px; margin: 0; border-radius: 11px;
  }
  .card:has(> .card__icon) > .card__flag { grid-area: flag; justify-self: start; margin-bottom: 7px; }
  .card:has(> .card__icon) > h3 { grid-area: title; margin-bottom: 5px; font-size: 1.06rem; }
  .card:has(> .card__icon) > p  { grid-area: text; font-size: .93rem; }
}

/* ---------- Pasos: número a la izquierda ---------- */
@media (max-width: 620px) {
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .step {
    padding-top: 0; display: grid; align-items: start;
    grid-template-columns: 42px 1fr; column-gap: 14px;
  }
  .step__num { width: 42px; height: 42px; margin: 0; font-size: 1.05rem; grid-row: 1 / span 2; }
  .step h3 { margin-bottom: 4px; font-size: 1.04rem; }
  .step p { font-size: .93rem; }
}

/* ---------- Categorías: carrusel que se desliza ---------- */
@media (max-width: 760px) {
  .cats-scroll {
    display: flex; grid-template-columns: none;
    gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--wrap-pad);
    /* Sale del margen de la página para que el carrusel llegue al
       borde de la pantalla y se vea que hay más a la derecha. */
    margin-inline: calc(var(--wrap-pad) * -1);
    padding: 16px var(--wrap-pad) 8px;
  }
  .cats-scroll > .cat-card {
    flex: 0 0 min(85%, 340px);
    scroll-snap-align: start;
  }
}

/* ---------- Tiendas: dos filas que se deslizan ---------- */
@media (max-width: 760px) {
  .stores-scroll {
    display: grid; grid-auto-flow: column;
    grid-template-rows: repeat(2, auto); grid-auto-columns: max-content;
    justify-content: start; gap: 10px;
    overflow-x: auto; overscroll-behavior-x: contain;
    margin-inline: calc(var(--wrap-pad) * -1);
    padding: 2px var(--wrap-pad) 6px;
  }
  .store-chip { padding: 10px 18px; font-size: .9rem; }
}

/* ---------- Números de redes: los tres en una fila ---------- */
.redes-total { background: var(--blue-900); border-color: var(--blue-900); margin-bottom: 22px; }
.redes-total__num { font-size: clamp(2.5rem, 9vw, 3.4rem); font-weight: 800; color: #fff; line-height: 1.05; }
.redes-total__lbl { color: rgba(255,255,255,.78); font-size: clamp(.92rem, 3vw, 1.02rem); margin-top: 6px; }
.red-card__num { font-size: clamp(1.4rem, 6vw, 2.3rem); font-weight: 800; color: var(--blue); line-height: 1.1; }
.red-card__lbl { color: var(--ink-2); font-size: clamp(.78rem, 2.6vw, .97rem); margin-top: 6px; }

@media (max-width: 600px) {
  [data-testimonios] .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  [data-testimonios] .red-card { padding: 15px 8px; }
  .redes-total { padding: 22px 16px; }
}

/* ---------- Preguntas frecuentes ---------- */
@media (max-width: 620px) {
  .faq details { margin-bottom: 10px; }
  .faq summary { padding: 15px 44px 15px 16px; font-size: .96rem; }
  .faq summary::after { right: 16px; }
  .faq .faq__body { padding: 0 16px 16px; font-size: .93rem; }
}

/* ---------- Pie de página: dos columnas ---------- */
@media (max-width: 620px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  /* La marca y el contacto llevan texto largo: fila completa. */
  .footer__grid > :first-child,
  .footer__grid > :last-child { grid-column: 1 / -1; }
  .footer li { margin-bottom: 11px; }
  .footer__bottom { margin-top: 30px; font-size: .82rem; }
}

/* ---------- Panel del cliente ---------- */
@media (max-width: 620px) {
  .panel__head { gap: 10px; margin-bottom: 20px; }
  .panel__head h1 { font-size: 1.45rem; }
  .tabs button { padding: 11px 8px; font-size: .9rem; }

  /* Fila de paquete/factura: el texto arriba, los botones abajo
     ocupando todo el ancho. Botones así de anchos no se fallan. */
  .pkg-list li { flex-direction: column; align-items: stretch; gap: 10px; }
  .pkg__acciones { width: 100%; }
  .pkg__acciones .btn,
  .pkg__acciones .copy-btn { flex: 1 1 auto; justify-content: center; }
  .pkg__quitar { padding: 10px 2px; text-align: left; }
  /* La dirección del casillero se queda en dos columnas mientras
     quepa: apilarla sumaba 230 px de scroll y aquí no hace falta. */
  .addr { padding: 15px; }
  .addr dl { gap: 6px 12px; }
  .copy-btn { width: 100%; padding: 12px 16px; }

  .paq__head { gap: 8px; }
  .paq__guia-foto img { max-width: 100%; max-height: 200px; }

  /* La tabla de tarifas usa todo el ancho de la pantalla en vez de
     quedarse encerrada dentro del margen de la tarjeta. */
  .table-wrap {
    margin-inline: calc(var(--pad-card) * -1);
    padding-inline: var(--pad-card);
  }
  table.rates { min-width: 440px; font-size: .9rem; }
  table.rates th, table.rates td { padding: 11px 12px; }
  /* La primera columna necesita más aire: al desbordarse la tabla,
     su borde izquierdo coincide con el del recuadro y la primera
     letra queda pegada. Se le notaba en la P de PESO. */
  table.rates th:first-child,
  table.rates td:first-child { padding-left: 18px; }
}

/* ---------- Botón de WhatsApp y zona segura del teléfono ----------
   `env(safe-area-inset-*)` es el espacio que se reservan los iPhone
   para la barra del gesto de inicio. Sin esto el botón queda debajo. */
.footer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.wa-float {
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 620px) {
  .wa-float { width: 54px; height: 54px; right: max(14px, env(safe-area-inset-right, 0px)); }
  .wa-float svg { width: 27px; height: 27px; }
}

/* ---------- Fichas de categoría dentro del carrusel ----------
   En una tarjeta de 320 px, "Peso máximo" y su valor peleando por la
   misma línea terminaban partidos en dos. Etiqueta arriba, dato
   abajo: ocupa lo mismo y se lee de un vistazo. */
.cat-card--featured::before { left: var(--pad-card); }

@media (max-width: 620px) {
  .cat-card__name { font-size: 1.3rem; }
  .cat-specs { margin: 14px 0 18px; }
  .cat-specs li { display: block; padding: 10px 0; }
  .cat-specs .k { display: block; font-size: .81rem; margin-bottom: 1px; }
  .cat-specs .v { display: block; text-align: left; font-size: .95rem; }
}

/* ---------- El botón de WhatsApp se aparta al escribir ----------
   Está fijo abajo a la derecha, justo encima de donde caen los
   campos de un formulario. Mientras el cliente escribe se desvanece
   para no tapar nada ni recibir un toque que no era para él. */
.wa-float { transition: transform .18s ease, opacity .18s ease; }
body:has(input:focus, textarea:focus, select:focus) .wa-float {
  opacity: 0; pointer-events: none;
}

/* ---------- Formularios en el celular ----------
   Se aprieta el ritmo vertical (etiquetas, márgenes, relleno) pero
   NUNCA el tamaño de letra de los campos: por debajo de 16 px el
   iPhone hace zoom solo al tocarlos y descuadra toda la pantalla. */
@media (max-width: 620px) {
  .auth-card h1 { font-size: 1.45rem; }
  .auth-card .sub { font-size: .92rem; margin-bottom: 20px; }
  .tabs { margin-bottom: 20px; }
  .field { margin-bottom: 13px; }
  .field label { margin-bottom: 5px; font-size: .86rem; }
  .field input, .field select, .field textarea { padding: 11px 13px; }
  .field-row { gap: 12px; }
  .alert { padding: 12px 14px; font-size: .89rem; margin-bottom: 14px; }
  .recordatorio { margin-bottom: 18px; }
  .envio-quien { padding: 12px; }
  .envio-op { margin-right: 12px; font-size: .9rem; }
}

/* ---------- Que ninguna columna se niegue a encogerse ----------
   Un hijo de `grid` se niega por defecto a ser más angosto que su
   contenido (`min-width: auto`). La tabla de tarifas mide 440 px y
   vive dentro de un contenedor con su propio scroll horizontal, pero
   ese "no me encojo" se propagaba hacia arriba: la columna del panel
   se estiraba a 543 px y arrastraba TODA la página de lado en el
   celular. Con `min-width: 0` la columna se ajusta a la pantalla y la
   tabla se desliza sola, que es lo que siempre debió pasar. */
.panel-grid > *,
.grid > * { min-width: 0; }

/* ---------- Pantallas muy angostas (iPhone SE y parecidos) ----------
   Por debajo de 380 px la dirección ya no entra en dos columnas sin
   apretarse: ahí sí se apila, etiqueta arriba y dato abajo. */
@media (max-width: 379px) {
  .addr dl { grid-template-columns: 1fr; gap: 0; }
  .addr dt { margin-top: 10px; }
  .addr dl > dt:first-of-type { margin-top: 0; }
  .cats-scroll > .cat-card { flex: 0 0 88%; }
  .trustbar__num { font-size: 1.2rem; }
  .btn { padding: 12px 18px; font-size: .93rem; }
  .btn--lg { padding: 14px 20px; font-size: .97rem; }
}

/* ---------- Tablas de tres columnas que se apilan ----------
   El desglose del cobro y la lista de cuentas bancarias son lo más
   importante que ve el cliente en el celular. En una tabla que se
   desliza de lado, el número de cuenta o el valor quedan cortados
   justo cuando los va a copiar. Apiladas, cada fila se lee entera
   sin mover nada. */
@media (max-width: 620px) {
  .rates--apilable,
  .rates--apilable tbody,
  .rates--apilable tr,
  .rates--apilable td { display: block; width: 100%; }

  /* Sin la cabecera: cada dato ya se explica solo cuando va apilado */
  .rates--apilable thead { display: none; }

  table.rates--apilable { min-width: 0; }
  .rates--apilable tr {
    padding: 14px 0; border-bottom: 1px solid var(--line);
  }
  .rates--apilable tr:last-child { border-bottom: 0; }
  .rates--apilable tbody tr:hover { background: transparent; }
  table.rates--apilable td { border: 0; padding: 0; }
  table.rates--apilable td + td { margin-top: 4px; }
  table.rates--apilable td.price {
    margin-top: 7px; font-size: 1.06rem; white-space: normal;
  }

  /* Al apilarse ya no hay nada que deslizar */
  .table-wrap:has(> .rates--apilable) {
    margin-inline: 0; padding-inline: 0; overflow-x: visible;
  }
}

/* Las tablas del panel arrancan y terminan en el mismo borde que el
   resto de la tarjeta. Con el relleno de celda puesto, la de totales
   quedaba 12 px más adentro que el desglose de arriba y se notaba. */
@media (max-width: 620px) {
  table.rates th:first-child,
  table.rates td:first-child { padding-left: 0; }
  table.rates th:last-child,
  table.rates td:last-child  { padding-right: 0; }
}

/* ...menos la tabla de precios de la portada, que no está dentro de
   una tarjeta del panel: sin relleno, la P de PESO queda tocando el
   borde del recuadro azul. Va después de la regla de arriba y con el
   contenedor delante, para ganarle sin tener que tocarla. */
@media (max-width: 620px) {
  .cotiza__tabla table.rates th:first-child,
  .cotiza__tabla table.rates td:first-child { padding-left: 14px; }
  .cotiza__tabla table.rates th:last-child,
  .cotiza__tabla table.rates td:last-child  { padding-right: 14px; }
}

/* Subir la factura es la acción más importante de la tarjeta de un
   paquete: va del mismo ancho que las demás, no como un botoncito
   suelto a la izquierda. Y todos los botones pequeños ganan alto
   para que un dedo los acierte a la primera. */
@media (max-width: 620px) {
  .paq__facturas > .btn { width: 100%; }
  .btn--sm { padding: 11px 17px; }
}

/* ============================================================
   Cajas plegables del panel

   El panel del cliente tenía todo abierto de una vez y eso cansa:
   entras a ver si llegó tu paquete y te encuentras tarifas, tablas
   y formularios que solo consultas de vez en cuando. Lo que no se
   usa en cada visita ahora vive plegado, con su título a la vista,
   y se abre solo si el cliente lo pide.

   Se usa <details> del propio navegador: abre y cierra sin
   JavaScript, y el lector de pantalla ya sabe leerlo.
   ============================================================ */

.box--plegable { padding: 0; overflow: hidden; }

.box--plegable > details > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  padding: var(--pad-card);
}
.box--plegable > details > summary::-webkit-details-marker { display: none; }

.box--plegable > details > summary h2 {
  font-size: 1.18rem; font-weight: 800; margin: 0; flex: 1 1 auto;
}
.box--plegable > details > summary .plegable__pista {
  font-size: .86rem; color: var(--ink-3); font-weight: 600;
}

/* La flecha: apunta hacia abajo cerrada, hacia arriba abierta */
.box--plegable > details > summary::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 3px;
  border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.box--plegable > details[open] > summary::after {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.box--plegable > details > summary:focus-visible {
  outline: 3px solid var(--blue); outline-offset: -3px;
}
.box--plegable > details[open] > summary { padding-bottom: 4px; }

.box__cuerpo { padding: 0 var(--pad-card) var(--pad-card); }

/* Un plegable más chico, para agrupar algo dentro de una caja */
.plegable-sub {
  border-top: 1px solid var(--line); margin-top: 20px; padding-top: 4px;
}
.plegable-sub > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
}
.plegable-sub > summary::-webkit-details-marker { display: none; }
.plegable-sub > summary h3 { font-size: 1rem; font-weight: 800; margin: 0; flex: 1 1 auto; }
.plegable-sub > summary::after {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.plegable-sub[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.plegable-sub > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

@media (hover: hover) {
  .box--plegable > details > summary:hover h2,
  .plegable-sub > summary:hover h3 { color: var(--blue); }
}
@media (hover: none) {
  .box--plegable > details > summary:active,
  .plegable-sub > summary:active { background: var(--bg-soft); }
}

/* ---------- Páginas de una sola tarea ----------
   Declarar un paquete es una tarea corta: se abre, se llena y se
   sale. No necesita el ancho completo del panel, y con la columna
   angosta el ojo no tiene que recorrer la pantalla entera. */
.wrap--angosto { max-width: 680px; }

/* El enlace de vuelta al casillero. Es lo primero de la página
   porque el cliente llegó aquí desde un botón y tiene que ver de
   inmediato por dónde regresa. */
.volver {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 18px; padding: 8px 4px;
  font-size: .93rem; font-weight: 700; color: var(--blue);
}
.volver svg { flex: 0 0 auto; }
@media (hover: hover) { .volver:hover { text-decoration: underline; } }

/* ============================================================
   Inicio del casillero — avisos y menú

   El casillero dejó de ser una página larga con todo encima. Ahora
   el inicio contesta dos preguntas ("¿me llegó algo?", "¿debo
   algo?") y ofrece un menú para ir a cada cosa. Cada tarea vive en
   su propia pantalla.
   ============================================================ */

/* ---------- Los avisos que cambian el día del cliente ---------- */
.aviso {
  display: grid; grid-template-columns: 40px 1fr 18px;
  align-items: center; gap: 14px;
  padding: 15px 16px; margin-bottom: 12px;
  border: 1px solid transparent; border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.aviso__ico { display: grid; place-items: center; }
.aviso__txt { min-width: 0; }
.aviso__txt strong { display: block; font-size: 1rem; line-height: 1.3; }
.aviso__txt span { font-size: .88rem; opacity: .85; }
.aviso__flecha { display: grid; place-items: center; opacity: .6; }

.aviso--pago  { background: #FFF3D6; border-color: #F3DDA8; color: #7A5000; }
.aviso--listo { background: #E9F9EF; border-color: #BDEBCE; color: #0E7A3D; }
/* El único aviso que no habla de algo que debe hacer, sino de
   algo que ganó. Por eso lleva el azul de la marca y no el ámbar
   de "ojo, atiende esto". */
.aviso--premio { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }
/* Algo se movió en sus paquetes desde la última vez que los miró.
   Solo informa, así que no va en rojo ni en ámbar; y no es plata,
   así que tampoco en el azul del premio. Era celeste, pero junto al
   azul del premio casi no se distinguía: ahora es violeta, un color
   que no usa ningún otro aviso. */
.aviso--novedad { background: #F1ECFE; border-color: #D9CCFB; color: #5B2EB8; }

/* El número rojo junto a «Mis paquetes»: cuántos paquetes tienen
   algo nuevo desde la última vez que los miró. */
.cuenta-nueva {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px;
  border-radius: 999px; background: var(--red, #C1272D); color: #fff;
  font-size: .72rem; font-weight: 800; line-height: 1; vertical-align: middle;
}
.cas-nav a[aria-current="page"] .cuenta-nueva { background: #fff; color: var(--red, #C1272D); }

/* Paquete nuevo, o que cambió, en Mis paquetes: mismo violeta del
   aviso del inicio, para que se reconozca que es lo mismo. */
.paq--nuevo { border-color: #D9CCFB; box-shadow: 0 0 0 3px #F1ECFE; }
.paq__nuevo {
  display: inline-block; margin-bottom: 6px; padding: 3px 9px; border-radius: 999px;
  background: #5B2EB8; color: #fff;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

/* "Ya lo recibí", dentro del envío a su ciudad */
.paq__recibido {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
}

/* "¿Por qué pasa esto?" en la tarjeta de ¿es tuyo este paquete? */
.reclamo-porque { margin: 10px 0 4px; }
.reclamo-porque > summary {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none;
  font-weight: 700; font-size: .92rem; color: var(--blue);
}
.reclamo-porque > summary::-webkit-details-marker { display: none; }
.reclamo-porque > summary::after {
  content: ''; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.reclamo-porque[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.reclamo-porque .util-note { margin: 10px 0 0; }
/* El mismo desplegable, dentro de la tarjeta de un paquete declarado */
.paq__porque { margin: 14px 0 0; }

/* Envío por cooperativa: la casilla del seguro */
.envio-seguro { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.envio-seguro label.envio-seguro__check { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; cursor: pointer; }
.envio-seguro label.envio-seguro__check input { margin-top: 3px; }
.envio-seguro .field { margin: 12px 0 0; }

/* Retiro en una oficina de Servientrega: la ficha de la elegida */
.envio-entrega select { width: 100%; max-width: 100%; }
.oficina-sv {
  display: grid; gap: 3px; padding: 12px 14px; font-size: .9rem;
  border: 1px solid var(--blue-100); border-radius: 10px; background: var(--blue-50);
  overflow-wrap: anywhere;
}
.oficina-sv a { font-weight: 700; margin-top: 4px; }

/* El recordatorio que manda Edgar desde el panel. Va en ámbar: no es
   una novedad del paquete ni un pago en revisión, es un aviso suyo. */
.aviso--recordatorio { background: #FFF7E8; border-color: #F5D9A3; }
.aviso--recordatorio .aviso__ico { color: #A15C00; }
.aviso--recordatorio strong { color: #7A4600; }

/* El código de descuento, dentro de «Por pagar» */
.cupon-caja {
  margin: 16px 0 0; padding: 14px;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--bg-soft);
}
.cupon-caja__fila { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.cupon-caja__fila input {
  flex: 1 1 180px; min-width: 0; padding: 12px 14px; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  letter-spacing: .04em; font-weight: 700;
}
.cupon-caja__fila input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.cupon-caja__fila .btn { flex: 0 0 auto; }

/* La cuenta del envío: paquete + entrega = total. Antes solo se
   enseñaba la entrega, y parecía que era lo único que se pagaba. */
.cuenta__fila { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .95rem; }
.cuenta__fila small { color: var(--ink-3); font-weight: 400; }
.cuenta__fila em { font-style: normal; font-weight: 700; color: #0E7A3D; }
.cuenta__fila--total {
  border-top: 1px solid rgba(10,10,85,.15); margin-top: 4px; padding-top: 10px; font-size: 1rem;
}
.cuenta__fila--total span:last-child { font-size: 1.4rem; font-weight: 800; color: var(--blue); white-space: nowrap; }
.cuenta--corta {
  margin-top: 10px; padding: 12px 14px; border-radius: 10px;
  background: #FFF3D6; border: 1px solid #F3DDA8; color: #5C4300;
}
.cuenta--corta .cuenta__fila--total { border-top: 0; margin: 0; padding: 0; font-size: .92rem; align-items: center; }
.cuenta--corta .cuenta__fila--total span:last-child { font-size: 1.15rem; color: #7A5000; }

/* Una caja llegó a su nombre y no podemos entregársela hasta que
   diga que es suya. Es el único aviso que espera una respuesta,
   así que va en rojo de la marca: los demás informan, este pide. */
.aviso--pregunta {
  background: var(--red-50, #FDECEC);
  border-color: var(--red-100, #F7C9C9);
  color: var(--red, #C1272D);
}

@media (hover: hover) {
  .aviso:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
}

/* La tarjeta de "¿es tuyo este paquete?". Lleva borde de color
   porque aparece encima de la lista de paquetes y si se ve igual
   que el resto pasa desapercibida — y mientras no la contesten,
   ese paquete no le llega a nadie. */
.box--pregunta {
  border-left: 4px solid var(--red, #C1272D);
  background: var(--bg-soft, #FAFAFA);
}
.box--pregunta .track-divider { margin: 14px 0; }
/* «Sí, es mío — y es este pedido»: el tracking con la tienda y lo que
   compró no entra en una línea del teléfono y se salía del botón. */
.box--pregunta .reclamo-si {
  display: block; white-space: normal; height: auto; line-height: 1.35;
  padding-top: 12px; padding-bottom: 12px;
}
.box--pregunta .reclamo-si strong { white-space: nowrap; }
@media (hover: none) {
  .aviso:active { transform: scale(.99); }
}

/* ---------- El menú del casillero ----------
   Filas anchas, no cuadraditos: en un teléfono la fila deja sitio
   para el título Y para la línea que dice en qué estado está la
   cosa ("3 paquetes · 2 en Guayaquil"), que es la mitad del valor
   de esta pantalla. */
.menu-cas { display: grid; gap: 10px; margin-top: 4px; }
@media (min-width: 760px) { .menu-cas { grid-template-columns: 1fr 1fr; } }

.menu-cas__item {
  display: grid; grid-template-columns: 44px 1fr 10px;
  align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 16px;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.menu-cas__ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue);
}
.menu-cas__txt { min-width: 0; }
.menu-cas__t { display: block; font-weight: 800; font-size: 1rem; color: var(--ink); }
.menu-cas__d { display: block; font-size: .86rem; color: var(--ink-3); margin-top: 2px; }

/* La flecha se dibuja en CSS: es la misma en las ocho filas y no
   vale la pena repetir ocho veces el mismo SVG en el HTML. */
.menu-cas__item::after {
  content: ""; width: 8px; height: 8px;
  border-top: 2.5px solid var(--blue-100); border-right: 2.5px solid var(--blue-100);
  transform: rotate(45deg); transition: border-color .16s ease;
}

@media (hover: hover) {
  .menu-cas__item:hover {
    transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue-100);
  }
  .menu-cas__item:hover::after { border-color: var(--blue); }
}
@media (hover: none) {
  .menu-cas__item:active { transform: scale(.985); background: var(--bg-soft); }
}
.menu-cas__item:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* En la pantalla de inicio el vacío también comunica: si no hay
   avisos, el menú arranca más arriba y se ve todo de una. */
@media (max-width: 620px) {
  .menu-cas__item { padding: 14px; gap: 12px; grid-template-columns: 40px 1fr 10px; }
  .menu-cas__ico { width: 40px; height: 40px; border-radius: 11px; }
  .menu-cas__t { font-size: .97rem; }
  .menu-cas__d { font-size: .84rem; }
}

/* El "no tienes nada aquí" de una pantalla entera lleva su tarjeta,
   para que no quede un texto suelto flotando en el fondo gris. */
.box.empty { padding: 34px 20px; }

/* El menú lateral del casillero solo existe en computadora.
   En el celular no se pinta: ahí se navega con los accesos de la
   pantalla de inicio y el enlace de volver. */
.cas-nav { display: none; }

/* ============================================================
   El casillero en computadora

   En el teléfono el casillero se navega como una app: una tarea por
   pantalla, con un enlace para volver. En una pantalla de 1400 px eso
   se ve como un teléfono estirado, con la mitad del monitor vacío.

   Aquí abajo, y SOLO de 960 px para arriba, el casillero se convierte
   en lo que uno espera de un programa de escritorio: un menú fijo a la
   izquierda que siempre está a la vista, y el contenido usando el
   ancho de verdad. Nada de este bloque llega al celular.
   ============================================================ */

@media (min-width: 960px) {

  /* Dos columnas: menú y contenido. El menú se queda pegado al hacer
     scroll, que es la mitad de la gracia de tenerlo. */
  .cas-reja {
    display: grid; grid-template-columns: 232px minmax(0, 1fr);
    gap: 32px; align-items: start;
  }

  .cas-nav {
    display: block; position: sticky; top: calc(var(--nav-h) + 24px);
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 12px;
    box-shadow: var(--shadow-sm);
  }
  .cas-nav__rotulo {
    font-size: .72rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-3);
    margin: 6px 10px 10px;
  }
  .cas-nav a {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 11px; border-radius: 9px;
    font-size: .93rem; font-weight: 600; color: var(--ink-2);
    transition: background-color .14s, color .14s;
  }
  .cas-nav a svg { flex: 0 0 auto; color: var(--ink-3); transition: color .14s; }
  /* "Mi dirección de envío en EEUU" no entra en una línea, y está
     bien que no entre: es el nombre completo de la cosa y así no hay
     que adivinar de qué dirección se habla. Lo que hace falta es que
     al partirse en dos las líneas queden juntas y el icono siga a la
     altura del texto. */
  .cas-nav a span { line-height: 1.3; }
  .cas-nav a:hover { background: var(--blue-50); color: var(--blue); }
  .cas-nav a:hover svg { color: var(--blue); }
  .cas-nav a[aria-current="page"] {
    background: var(--blue); color: var(--white); box-shadow: 0 4px 12px rgba(23,23,168,.22);
  }
  .cas-nav a[aria-current="page"] svg { color: var(--white); }
  .cas-nav a:focus-visible { outline: 3px solid var(--blue); outline-offset: -2px; }

  /* Con el menú siempre a la vista, el enlace de volver sobra: sería
     una segunda forma de hacer lo mismo, y en escritorio confunde. */
  .casillero .volver { display: none; }

  /* El menú de la cabecera repetiría por tercera vez las mismas
     secciones. En el casillero la cabecera se queda con el logo y los
     dos botones de la derecha. */
  .casillero .nav__links { display: none; }

  /* El ancho del contenido: el tope de 680 px era para que en el
     celular no se estirara, pero aquí lo que estorba es el tope. Se
     le devuelve el ancho a la página y se limita solo la columna de
     texto, que es donde importa que las líneas no queden larguísimas. */
  .casillero .wrap--angosto { max-width: var(--maxw); }
  .casillero .wrap--angosto .cas-cuerpo { max-width: 780px; }

  /* Cajas que en el teléfono van una debajo de otra y aquí caben lado
     a lado. En el celular `.cas-columnas` no hace nada. */
  .cas-columnas {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap); align-items: start;
  }

  /* La pantalla de inicio: los avisos ocupan el ancho y los accesos
     se reparten en tres columnas, como un tablero. */
  .cas-avisos:not(:empty) { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cas-avisos .aviso { margin-bottom: 0; }
  .menu-cas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }

  /* Los botones a lo ancho son cosa del dedo. Con ratón, un botón de
     780 px de largo se ve como un error. */
  .casillero .box .btn--block,
  .casillero .cas-cuerpo > .btn--block { width: auto; min-width: 240px; }

  /* Los títulos de pantalla pueden respirar más aquí */
  .casillero .panel__head h1 { font-size: 1.9rem; }
}

/* De 1240 px para arriba sobra sitio de verdad: el menú se ensancha
   un poco y el contenido gana aire, sin llegar a líneas ilegibles. */
@media (min-width: 1240px) {
  .cas-reja { grid-template-columns: 248px minmax(0, 1fr); gap: 38px; }
  .casillero .wrap--angosto .cas-cuerpo { max-width: 840px; }
}

/* ============================================================
   Cotizador de la portada

   Dos piezas: la calculadora y una tablita de referencia con los
   pesos que más se repiten. En el celular se apilan y la tabla
   queda debajo, porque lo primero es poder escribir el peso.
   ============================================================ */
.cotiza {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(16px, 3vw, 26px);
  max-width: 900px; margin: 0 auto; align-items: start;
}
.cotiza__calc, .cotiza__tabla {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--pad-card);
}
.cotiza__calc { box-shadow: var(--shadow); }

.cotiza__cat {
  display: inline-block; margin-bottom: 16px; padding: 5px 12px; border-radius: 999px;
  background: var(--blue-50); color: var(--blue);
  font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

.cotiza__lbl {
  display: block; margin-bottom: 6px;
  font-size: .88rem; font-weight: 700; color: var(--ink-2);
}
.cotiza__campo { position: relative; }
.cotiza__campo input {
  width: 100%; padding: 15px 96px 15px 16px;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1.35rem; font-weight: 800; color: var(--ink);
  background: var(--white); transition: border-color .15s, box-shadow .15s;
}
.cotiza__campo input:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-50);
}
.cotiza__unidad {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: .9rem; font-weight: 700; color: var(--ink-3); pointer-events: none;
}

.cotiza__salida {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center;
}
.cotiza__rotulo {
  margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.cotiza__precio {
  margin: 2px 0 0; font-family: var(--font-display); color: var(--blue);
  font-size: clamp(2.4rem, 8vw, 3.1rem); line-height: 1.05;
}
.cotiza__detalle { margin: 4px 0 0; font-size: .92rem; color: var(--ink-2); min-height: 1.5em; }
.cotiza__taxes   { margin: 10px 0 0; font-size: .76rem; color: var(--ink-3); }

.cotiza__aviso { margin: 16px 0 0; text-align: left; }
.cotiza__avisotxt { margin: 0 0 10px; }

.cotiza__cta { margin-top: 18px; text-align: center; }
.cotiza__ctatexto { margin: 0 0 10px; font-size: .93rem; font-weight: 700; color: var(--ink-2); }

.cotiza__tabla h3 { margin: 0 0 12px; font-size: 1.02rem; font-weight: 800; }
/* La tabla de tarifas trae un ancho mínimo pensado para 4 columnas.
   Aquí son 2 y viven en una columna estrecha, así que se le quita. */
.cotiza__tabla table.rates { min-width: 0; }
.cotiza__tabla table.rates tbody tr { cursor: pointer; }
.cotiza__tabla table.rates tbody tr.is-igual { background: var(--blue-50); }
.cotiza__tabla table.rates tbody tr.is-igual td { color: var(--blue-700); font-weight: 800; }
.cotiza__tabla .util-note { margin: 12px 0 0; }

@media (max-width: 760px) {
  .cotiza { grid-template-columns: 1fr; max-width: 460px; }
}

/* ============================================================
   Cupón de bienvenida y referidos (portada)

   Fondo azul oscuro con dorado, como el afiche que reparte por
   redes: quien lo vio en Instagram tiene que reconocer lo mismo
   al entrar a la web.
   ============================================================ */
.promo { background: var(--blue-900); color: var(--white); }
.promo__caja {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 40px);
  align-items: center; max-width: 1000px; margin: 0 auto;
}

.promo__eyebrow {
  display: block; margin-bottom: 6px;
  font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.promo__cifra {
  margin: 0; font-family: var(--font-display); line-height: .88;
  font-size: clamp(4.5rem, 17vw, 7.5rem); color: var(--white);
  text-shadow: 0 0 34px rgba(255,255,255,.34);
}
.promo__cifra span { font-size: .5em; vertical-align: super; }
.promo__off {
  margin: 0 0 14px; font-family: var(--font-display); line-height: 1;
  font-size: clamp(2.4rem, 9vw, 4rem); color: var(--white);
  text-shadow: 0 0 34px rgba(255,255,255,.34);
}
.promo__titulo { margin: 0 0 10px; font-size: clamp(1.3rem, 3.4vw, 1.75rem); font-weight: 800; }
.promo__sub    { margin: 0 0 22px; color: rgba(255,255,255,.78); font-size: .97rem; }
.promo__chica  { margin: 14px 0 0; font-size: .78rem; line-height: 1.55; color: rgba(255,255,255,.55); }

.promo__pasos {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg); padding: var(--pad-card);
}
.promo__pasos h3 { margin: 0 0 8px; font-size: 1.12rem; font-weight: 800; }
.promo__pasostxt { margin: 0 0 18px; font-size: .93rem; color: rgba(255,255,255,.74); }

.promo__lista { list-style: none; margin: 0; padding: 0; }
.promo__paso {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 0; border-top: 1px solid rgba(255,255,255,.13);
}
.promo__paso:first-child { border-top: 0; padding-top: 0; }
.promo__pasoval {
  flex: 0 0 auto; min-width: 62px; text-align: center;
  font-family: var(--font-display); font-size: 1.35rem; color: var(--gold);
}
.promo__pasotxt { display: block; font-size: .92rem; }
.promo__pasotxt strong { display: block; }
.promo__pasotxt span   { color: rgba(255,255,255,.68); }

.promo__tope { margin: 16px 0 0; font-size: .82rem; color: rgba(255,255,255,.6); }

.promo__cuponcito {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
  background: var(--gold); color: var(--blue-900);
  border-radius: 999px; padding: 9px 18px;
}
.promo__cuponlbl {
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  opacity: .72;
}
.promo__cuponcod {
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .06em;
}

@media (max-width: 820px) {
  .promo__caja { grid-template-columns: 1fr; }
  .promo__cupon { text-align: center; }
  .promo__cuponcito { justify-content: center; }
}

/* ============================================================
   Invita y gana (pantalla del cliente)
   ============================================================ */
.ref-codigo { text-align: center; }
.ref-codigo__rotulo {
  margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.ref-codigo__valor {
  margin: 6px 0 16px; font-family: var(--font-display); color: var(--blue);
  font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: .08em;
}
.ref-codigo__botones {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.ref-grande {
  margin: 0; font-family: var(--font-display); color: var(--blue);
  font-size: clamp(2.4rem, 10vw, 3.2rem); line-height: 1;
}
.ref-como { margin: 0; padding-left: 20px; font-size: .94rem; color: var(--ink-2); }
.ref-como li { margin-bottom: 10px; }
.ref-como__tope { color: var(--ink-3); }
.ref-si { color: #0E7A3D; font-weight: 700; }
.opcional { font-weight: 400; color: var(--ink-3); }

@media (max-width: 520px) {
  .ref-codigo__botones .btn { width: 100%; }
}