/* Encargo: tema moderno sobre Bootstrap 5.3 (todo local, sin CDN). */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ac: #5b5bd6;
  --ac-osc: #4a4ac0;
  --ac-2: #8b5cf6;
  --ac-suave: #eeeefc;
  --ac-borde: #d9d9f7;
  --fondo: #f5f6fb;
  --tarjeta: #ffffff;
  --texto: #1b1d2b;
  --suave: #5f6579;
  --borde: #e6e8f2;
  --exito: #15803d;
  --exito-osc: #0f6a37;
  --exito-suave: #dcf5e6;
  --radio: 16px;
  --sombra: 0 1px 2px rgba(27, 29, 43, .04), 0 4px 16px rgba(27, 29, 43, .05);
  --sombra-alta: 0 10px 40px rgba(60, 60, 140, .16);
  --lateral-w: 264px;
  --inferior-h: 68px;

  --bs-font-sans-serif: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-color: var(--texto);
  --bs-body-color-rgb: 27, 29, 43;
  --bs-body-bg: var(--fondo);
  --bs-body-bg-rgb: 245, 246, 251;
  --bs-secondary-color: var(--suave);
  --bs-border-color: var(--borde);
  --bs-border-radius: 12px;
  --bs-border-radius-lg: var(--radio);
  --bs-primary: var(--ac);
  --bs-primary-rgb: 91, 91, 214;
  --bs-primary-text-emphasis: #3a3aa6;
  --bs-primary-bg-subtle: var(--ac-suave);
  --bs-primary-border-subtle: var(--ac-borde);
  --bs-link-color: var(--ac);
  --bs-link-color-rgb: 91, 91, 214;
  --bs-link-hover-color: var(--ac-osc);
  --bs-link-hover-color-rgb: 74, 74, 192;
  --bs-focus-ring-color: rgba(91, 91, 214, .25);
  --bs-success: var(--exito);
  --bs-success-rgb: 21, 128, 61;
  --bs-success-text-emphasis: var(--exito-osc);
  --bs-success-bg-subtle: var(--exito-suave);
  accent-color: var(--ac);
}

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
html:has(.menu-inferior) { scroll-padding-bottom: calc(var(--inferior-h) + env(safe-area-inset-bottom) + 24px); }
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--bs-body-font-family);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { letter-spacing: -.02em; font-weight: 700; }
a { text-decoration: none; }
.minw-0 { min-width: 0; }
.row > *, .d-grid > *, .tarjeta { min-width: 0; }
.d-grid { grid-template-columns: minmax(0, 1fr); }
.texto-suave { color: var(--suave); }
.texto-acento { color: var(--ac); }
.texto-exito { color: var(--exito); }
:focus-visible { outline: 3px solid var(--ac); outline-offset: 2px; }
.cta-final :focus-visible, .auth-lado :focus-visible { outline-color: #fff; }

/* ---------- Botones y formularios ---------- */
.btn {
  --bs-btn-border-radius: 12px;
  --bs-btn-font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}
.btn-sm { min-height: 36px; }
.btn-lg { min-height: 52px; --bs-btn-font-size: 1rem; }
.btn-primary {
  --bs-btn-bg: var(--ac);
  --bs-btn-border-color: var(--ac);
  --bs-btn-hover-bg: var(--ac-osc);
  --bs-btn-hover-border-color: var(--ac-osc);
  --bs-btn-active-bg: #3f3fb0;
  --bs-btn-active-border-color: #3f3fb0;
  --bs-btn-disabled-bg: var(--ac);
  --bs-btn-disabled-border-color: var(--ac);
  --bs-btn-focus-shadow-rgb: 91, 91, 214;
  background-image: linear-gradient(135deg, var(--ac), #6d5ce0);
  box-shadow: 0 6px 16px rgba(91, 91, 214, .28);
}
.btn-outline-primary {
  --bs-btn-color: var(--ac);
  --bs-btn-border-color: var(--ac-borde);
  --bs-btn-hover-bg: var(--ac);
  --bs-btn-hover-border-color: var(--ac);
  --bs-btn-active-bg: var(--ac-osc);
  --bs-btn-active-border-color: var(--ac-osc);
  --bs-btn-focus-shadow-rgb: 91, 91, 214;
}
.btn-link { --bs-btn-color: var(--ac); --bs-btn-hover-color: var(--ac-osc); --bs-btn-focus-shadow-rgb: 91, 91, 214; }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--borde); }
.btn-outline-secondary { --bs-btn-color: var(--texto); --bs-btn-border-color: var(--borde); --bs-btn-hover-bg: var(--ac-suave); --bs-btn-hover-color: var(--ac); --bs-btn-hover-border-color: var(--ac-borde); --bs-btn-active-bg: var(--ac-suave); --bs-btn-active-color: var(--ac); --bs-btn-active-border-color: var(--ac-borde); }
.form-control, .form-select {
  min-height: 46px;
  border-radius: 12px;
  border-color: var(--borde);
  background-color: #fff;
  padding: .6rem .85rem;
}
/* Espacio a la derecha para que el texto no pise la flecha del select. */
.form-select { padding-right: 2.5rem; text-overflow: ellipsis; }
.form-control-sm, .form-select-sm { min-height: 36px; padding-top: .25rem; padding-bottom: .25rem; }
.form-select-sm { padding-left: .6rem; padding-right: 2.25rem; }
textarea.form-control { min-height: 96px; }
.form-control:focus, .form-select:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px rgba(91, 91, 214, .35);
}
.form-label { font-weight: 600; font-size: .85rem; margin-bottom: .35rem; }
.form-check-input { width: 1.25em; height: 1.25em; }
.form-check-input:checked { background-color: var(--ac); border-color: var(--ac); }
.form-check-input:focus { border-color: var(--ac); box-shadow: 0 0 0 3px rgba(91, 91, 214, .35); }
.input-group > .btn { min-width: 46px; }

/* ---------- Pestañas (nav-pills / nav-tabs) en índigo ---------- */
.nav {
  --bs-nav-link-color: var(--ac);
  --bs-nav-link-hover-color: var(--ac-osc);
}
.nav-pills {
  --bs-nav-pills-border-radius: 12px;
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: var(--ac);
}
.nav-pills .nav-link { min-height: 44px; font-weight: 600; }
.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--ac-osc);
  --bs-nav-tabs-link-active-border-color: var(--borde) var(--borde) #fff;
  --bs-nav-tabs-link-hover-border-color: var(--ac-borde) var(--ac-borde) var(--borde);
}

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
}
.tarjeta-enlace { display: block; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.tarjeta-enlace:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--ac-borde); color: inherit; }
.tarjeta-pedido { padding: 1rem; display: flex; flex-direction: column; }
.tarjeta-pedido > :first-child { margin-bottom: .9rem; }
.tarjeta-pedido > .pie-pedido { margin-top: auto; }
/* Celda de una rejilla que contiene una tarjeta de pedido: todas las de una fila miden lo mismo. */
.celda-pedido { display: flex; flex-direction: column; min-width: 0; }
.celda-pedido > .tarjeta-pedido { flex: 1 1 auto; }
.titulo-pedido { font-size: 1rem; font-weight: 650; margin: 0; line-height: 1.3; letter-spacing: -.01em; }
.meta-linea { display: flex; flex-wrap: wrap; gap: .25rem .85rem; margin-top: .4rem; color: var(--suave); font-size: .82rem; align-items: center; }
.meta-linea i { margin-right: .2rem; }
.pie-pedido { display: flex; justify-content: space-between; gap: .75rem; padding-top: .85rem; border-top: 1px dashed var(--borde); }
.pie-pedido > div { display: flex; flex-direction: column; min-width: 0; }
.pie-pedido .etq { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.pie-pedido strong { font-size: .92rem; font-variant-numeric: tabular-nums; }

.icono-cat {
  --h: 240;
  flex: none;
  width: 48px; height: 48px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  color: hsl(var(--h) 55% 42%);
  background: hsl(var(--h) 80% 95%);
}
.etiqueta-suave {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--ac-suave); color: var(--ac-osc);
  border-radius: 999px; padding: .12rem .6rem; font-size: .75rem; font-weight: 600;
}
.insignia-estado {
  flex: none; white-space: nowrap;
  border-radius: 999px; padding: .2rem .65rem; font-size: .72rem; font-weight: 650;
  background: #eef0f6; color: #4b5163;
}
.insignia-estado.est-info { background: #e1f3fb; color: #0b6483; }
.insignia-estado.est-primary { background: var(--ac-suave); color: var(--ac-osc); }
.insignia-estado.est-warning { background: #fff2d8; color: #8a5a00; }
.insignia-estado.est-success { background: var(--exito-suave); color: var(--exito-osc); }
.insignia-estado.est-danger { background: #fde4e4; color: #a32424; }
.insignia-estado.est-dark { background: #e4e6ee; color: #1b1d2b; }

/* Insignia reutilizable de identidad verificada (junto al nombre). */
.insignia-verificado {
  display: inline-flex; align-items: center; gap: .25rem; flex: none; white-space: nowrap;
  background: var(--exito-suave); color: var(--exito-osc);
  border-radius: 999px; padding: .1rem .55rem; font-size: .72rem; font-weight: 650; line-height: 1.5;
}
.etiqueta-suave.es-aviso { background: #fff2d8; color: #8a5a00; }

.titulo-pagina { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.titulo-pagina h1 { font-size: 1.5rem; margin: 0; }
.titulo-pagina p { margin: .25rem 0 0; color: var(--suave); }
.titulo-accion { display: flex; gap: .5rem; flex-wrap: wrap; }

.rejilla { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.rejilla-3, .rejilla-2 { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.contenedor-angosto { max-width: 560px; margin: 0 auto; }
.contenedor-medio { max-width: 720px; }

/* ---------- Vacío, alertas, avisos ---------- */
.vacio { text-align: center; padding: 2.5rem 1rem; max-width: 460px; margin: 0 auto; }
.vacio h2 { font-size: 1.15rem; margin: 1rem 0 .4rem; }
.vacio p { color: var(--suave); margin-bottom: 1rem; }
.vacio-icono { width: 72px; height: 72px; border-radius: 22px; background: var(--ac-suave); color: var(--ac); display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; }
.vacio-accion { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }

.alerta { display: flex; gap: .65rem; align-items: flex-start; border-radius: 12px; padding: .75rem .9rem; font-size: .88rem; }
.alerta i { margin-top: .1rem; }
.alerta-info { background: #e8f1fe; color: #1d4a9a; }
.alerta-success { background: var(--exito-suave); color: var(--exito-osc); }
.alerta-warning { background: #fff2d8; color: #8a5a00; }
.alerta-danger { background: #fde4e4; color: #a32424; }

/* Avisos: en móvil van sobre el menú inferior (no tapan la barra superior); el contenedor
 * no captura clics y solo el botón de cierre es interactivo. */
.avisos {
  position: fixed; z-index: 2000; left: 12px; right: 12px;
  bottom: calc(var(--inferior-h) + env(safe-area-inset-bottom) + 12px);
  display: flex; flex-direction: column; gap: .5rem; pointer-events: none;
}
.aviso-toast {
  pointer-events: none;
  display: flex; gap: .65rem; align-items: flex-start;
  background: #1b1d2b; color: #fff; border-radius: 14px; padding: .8rem 1rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25); font-size: .9rem;
  animation: entra .22s ease;
}
.aviso-toast > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.aviso-cerrar {
  pointer-events: auto; flex: none; width: 32px; height: 32px; margin: -.3rem -.5rem -.3rem 0;
  border: 0; border-radius: 10px; background: transparent; color: #fff; opacity: .85;
  display: inline-flex; align-items: center; justify-content: center;
}
.aviso-cerrar:hover { background: rgba(255, 255, 255, .16); opacity: 1; }
.aviso-cerrar:focus-visible { outline-color: #fff; }
.aviso-toast.saliendo { opacity: 0; transform: translateY(8px); transition: all .22s ease; }
.aviso-success i { color: #5ee09a; }
.aviso-danger i { color: #ff8a8a; }
.aviso-warning i { color: #ffd166; }
.aviso-info i { color: #9db4ff; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.avatar {
  --h: 240; --t: 40px;
  flex: none; width: var(--t); height: var(--t);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: calc(var(--t) * .38);
  color: hsl(var(--h) 55% 32%); background: hsl(var(--h) 75% 90%);
}
.estrellas { color: #f5a524; white-space: nowrap; letter-spacing: .05em; }
.estrella-btn { color: #f5a524; }

/* ---------- Línea de tiempo ---------- */
.linea-tiempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-tiempo li { position: relative; display: flex; gap: .85rem; padding-bottom: 1.25rem; }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--borde); }
.linea-tiempo .punto { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ac-suave); color: var(--ac); display: inline-flex; align-items: center; justify-content: center; }
.linea-tiempo .actual .punto { background: var(--ac); color: #fff; box-shadow: 0 0 0 5px rgba(91, 91, 214, .15); }
.linea-tiempo .contenido-evento { flex: 1; min-width: 0; padding-top: .15rem; }
.linea-tiempo .tipo-cancelado .punto, .linea-tiempo .tipo-disputa .punto { background: #fde4e4; color: #a32424; }
.linea-tiempo .tipo-entregado .punto, .linea-tiempo .tipo-cerrado .punto { background: #dcf5e6; color: #11703d; }

/* ---------- Marco de la app ---------- */
.app-shell { min-height: 100vh; }
.lateral { display: none; }
.app-main { min-height: 100vh; padding-bottom: calc(var(--inferior-h) + env(safe-area-inset-bottom) + 1rem); }
.contenido { max-width: 1160px; margin: 0 auto; padding: 1rem 16px 1.5rem; }
.contenido:focus { outline: none; }

.barra-superior {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .6rem;
  min-height: 60px; padding: .4rem 16px;
  background: rgba(245, 246, 251, .85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.barra-acciones { margin-left: auto; display: flex; gap: .25rem; }
.btn-icono {
  position: relative; width: 44px; height: 44px; border: 0; background: transparent;
  border-radius: 12px; color: var(--texto); font-size: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icono:hover { background: var(--ac-suave); color: var(--ac); }
.insignia-notif {
  position: absolute; top: -6px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--fondo); line-height: 1;
}
.btn-icono .insignia-notif { top: 4px; right: 3px; }
.insignia-notif[hidden] { display: none; }

.marca { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; color: var(--texto); letter-spacing: -.03em; }
.marca:hover { color: var(--texto); }
.marca-logo { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, var(--ac), var(--ac-2)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; box-shadow: 0 6px 14px rgba(91, 91, 214, .35); }

.selector-modo { display: inline-flex; background: #e9ebf5; padding: 3px; border-radius: 12px; gap: 2px; }
.selector-modo button {
  border: 0; background: transparent; min-height: 40px; padding: 0 .8rem; border-radius: 10px;
  font-weight: 600; font-size: .82rem; color: var(--suave); display: inline-flex; align-items: center; gap: .35rem;
}
.selector-modo button.activo { background: #fff; color: var(--ac-osc); box-shadow: 0 1px 4px rgba(27, 29, 43, .12); }
.selector-barra { margin-left: .25rem; }
.selector-lateral { display: flex; margin: 1rem 0 .75rem; }
.selector-lateral button { flex: 1; justify-content: center; }

.menu-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; height: calc(var(--inferior-h) + env(safe-area-inset-bottom));
  padding: 0 4px env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--borde);
}
.inf-item {
  flex: 1; min-width: 0; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--suave); font-size: .68rem; font-weight: 600;
}
.inf-item .nav-icono { position: relative; font-size: 1.35rem; line-height: 1; }
.inf-item.activo { color: var(--ac); }
.inf-item.activo .nav-icono::after { content: ""; position: absolute; left: 50%; top: -9px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: var(--ac); }
.inf-item.destacado .nav-icono { color: var(--ac); font-size: 1.6rem; }
.inf-item:hover { color: var(--ac); }

/* ---------- Auth ---------- */
.publico { min-height: 100vh; }
.auth-pagina { min-height: 100vh; display: block; }
.auth-lado { display: none; }
.auth-principal { padding: 20px 16px 32px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.auth-movil { width: 100%; max-width: 440px; padding: .5rem 0 1.25rem; }
.auth-tarjeta { width: 100%; min-width: 0; max-width: 440px; background: #fff; border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--sombra); padding: 1.5rem; }
.auth-tarjeta h1 { font-size: 1.5rem; margin-bottom: .25rem; }
.auth-centro { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px 16px; }
.separador { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 1rem; color: var(--suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.demo-lista { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
.demo-cuenta {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 56px;
  min-width: 0; padding: .55rem .75rem; background: #fff; border: 1px solid var(--borde); border-radius: 14px; text-align: left;
  transition: border-color .15s, background .15s;
}
.demo-cuenta:hover { border-color: var(--ac-borde); background: var(--ac-suave); }
.demo-cuenta > .minw-0 { flex: 1 1 auto; }
.demo-cuenta > .bi { flex: none; }
.demo-icono { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--ac-suave); color: var(--ac); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.lista-beneficios { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.lista-beneficios li { display: flex; gap: .75rem; align-items: flex-start; color: rgba(255, 255, 255, .92); }
.lista-beneficios i { flex: none; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Landing ---------- */
.landing-ancho { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.landing-nav { position: sticky; top: 0; z-index: 30; background: rgba(245, 246, 251, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--borde); }
.landing-nav .landing-ancho { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.landing-enlaces { display: none; margin-left: 1.5rem; gap: .25rem; }
.enlace-boton { border: 0; background: transparent; padding: .5rem .8rem; border-radius: 10px; font-weight: 600; color: var(--suave); min-height: 44px; }
.enlace-boton:hover { color: var(--ac); background: var(--ac-suave); }
.landing-acciones { margin-left: auto; display: flex; gap: .5rem; }
.landing-acciones .btn { padding-left: .9rem; padding-right: .9rem; }
.landing-acciones .btn-light { display: none; }

.hero { padding: 2.25rem 0 2.5rem; background: radial-gradient(900px 420px at 85% -10%, rgba(139, 92, 246, .16), transparent 60%), radial-gradient(700px 380px at -10% 10%, rgba(91, 91, 214, .12), transparent 60%); }
.hero-grid { display: grid; gap: 2.25rem; align-items: center; }
.etiqueta-prototipo { margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2rem, 6.5vw, 3.4rem); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; margin-bottom: 1rem; }
.hero-sub { font-size: 1.05rem; color: var(--suave); max-width: 540px; }
.hero-botones { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.hero-botones .btn { flex: 1 1 auto; }
.hero-puntos { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; color: var(--texto); font-weight: 500; font-size: .9rem; }
.hero-puntos i { color: var(--exito); margin-right: .4rem; }
.hero-visual { position: relative; max-width: 420px; margin: .5rem auto 1rem; width: 100%; }
/* Los chips van en una fila bajo la tarjeta: no se superponen con el monto ni la insignia. */
.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.25rem; }
.hero-tarjeta { transform: rotate(-2deg); }
.hero-tarjeta .tarjeta { box-shadow: var(--sombra-alta); padding: 1.1rem; pointer-events: none; }
.chip-flotante { background: #fff; border: 1px solid var(--borde); border-radius: 999px; padding: .45rem .85rem; font-size: .8rem; font-weight: 600; box-shadow: var(--sombra-alta); display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.chip-flotante i { color: var(--ac); }

.seccion { padding: 3rem 0; }
.seccion-suave { background: #fff; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.seccion-cabecera { text-align: center; max-width: 600px; margin: 0 auto 2rem; }
.seccion-cabecera h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; }
.seccion-cabecera p { color: var(--suave); }
.paso { position: relative; padding: 1.5rem; }
.paso-num { position: absolute; top: 1rem; right: 1.25rem; font-size: 2.5rem; font-weight: 800; color: var(--ac-suave); line-height: 1; }
.paso-icono, .lado-icono { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--ac-suave), #e6dcff); color: var(--ac); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; }
.paso h3, .lado h3 { font-size: 1.1rem; }
.paso p, .lado p { color: var(--suave); margin: 0; }
.lado { padding: 1.5rem; }
.lista-check { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; gap: .6rem; }
.lista-check li { display: flex; gap: .55rem; }
.lista-check li::before { content: "\f26e"; font-family: "bootstrap-icons"; color: var(--ac); }
.cta-final { background: linear-gradient(135deg, var(--ac), var(--ac-2)); color: #fff; border-radius: 24px; text-align: center; padding: 2.5rem 1.25rem; box-shadow: var(--sombra-alta); }
.cta-final h2 { font-weight: 800; }
.cta-final p { opacity: .9; }
.landing-pie { padding: 1.5rem 0 2.5rem; color: var(--suave); text-align: center; font-size: .85rem; }

/* Landing: caminos, vitrina, pasos, bento, testimonios, preguntas. */
.landing { --aviso-fondo: #fff2d8; --aviso-texto: #8a5a00; }
.landing .texto-exito-osc { color: var(--exito-osc); }
.etiqueta-ejemplo { background: var(--aviso-fondo); color: var(--aviso-texto); }
.landing .seccion-cabecera .etiqueta-ejemplo { margin-right: .35rem; }
.subtitulo-seccion { font-size: 1.25rem; font-weight: 800; text-align: center; margin: 2.5rem 0 1.25rem; }
@keyframes landing-entrada { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-texto, .hero-visual { animation: landing-entrada .55s ease both; }
.hero-visual { animation-delay: .12s; }

.camino { display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem; border-top: 4px solid var(--ac); }
.camino-viajar { border-top-color: var(--exito); }
.camino-viajar .lado-icono { background: var(--exito-suave); color: var(--exito-osc); }
.camino p { color: var(--suave); }
.camino .lista-check { flex: 1 1 auto; }
.camino-viajar .lista-check li::before { color: var(--exito); }

.vitrina { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.vitrina-item { min-width: 0; display: flex; }
.vitrina-tarjeta { flex: 1 1 auto; display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem; }
.vitrina-tarjeta .icono-cat { margin-bottom: .5rem; }
.vitrina-cat { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.vitrina-tarjeta h3 { font-size: 1rem; font-weight: 650; margin: 0; line-height: 1.3; letter-spacing: -.01em; }
.vitrina-montos { margin: auto 0 0; padding-top: .75rem; border-top: 1px dashed var(--borde); display: flex; flex-direction: column; gap: .15rem; font-size: .82rem; color: var(--suave); }
.vitrina-montos strong { color: var(--texto); font-variant-numeric: tabular-nums; margin-left: .25rem; }
.vitrina-montos .texto-exito-osc { color: var(--exito-osc); }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }

.bento { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.bento-item { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 24px; box-shadow: var(--sombra); padding: 1.5rem; min-width: 0; }
.bento-item h3 { font-size: 1.15rem; font-weight: 800; }
.bento-item p { color: var(--suave); margin: 0 0 .5rem; }
.bento-icono { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--ac-suave); color: var(--ac); font-size: 1.5rem; margin-bottom: 1rem; }
.bento-pago { background: var(--exito-osc); border-color: var(--exito-osc); color: #fff; }
.bento-pago p { color: rgba(255, 255, 255, .92); }
.bento-pago .bento-icono { background: rgba(255, 255, 255, .18); color: #fff; }
.bento-verif .bento-icono { background: var(--exito-suave); color: var(--exito-osc); }
.bento-codigo { background: var(--ac-suave); border-color: var(--ac-borde); }
.bento-codigo p { color: var(--texto); }
.bento-cifras { font-size: 1.9rem; font-weight: 800; letter-spacing: .08em; color: var(--ac-osc); font-variant-numeric: tabular-nums; line-height: 1.1; }
.bento-linea { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; counter-reset: ev; }
.bento-linea li { counter-increment: ev; display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; padding: .2rem .75rem .2rem .35rem; border-radius: 999px; background: var(--fondo); border: 1px solid var(--borde); font-size: .85rem; font-weight: 600; color: var(--texto); }
.bento-linea li::before { content: counter(ev); width: 22px; height: 22px; border-radius: 50%; background: var(--ac); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; }
.bento-linea li:last-child::before { background: var(--exito); }

.testimonio { margin: 0; display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.testimonio blockquote { margin: 0; color: var(--texto); }
.testimonio figcaption { margin-top: auto; display: flex; align-items: center; gap: .75rem; }
.testimonio figcaption small { display: block; color: var(--suave); }
.testimonio-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ac-suave); color: var(--ac); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.faq-caja { overflow: hidden; }
.faq summary:focus-visible { outline-offset: -3px; }

/* ---------- Vistas comunes (antes un <style> en comun.js) ---------- */
.chat-caja {
  display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; padding: 1rem;
  background: var(--fondo); border-radius: 12px; min-height: 200px;
  /* Móvil: deja sitio para la barra superior, el encabezado, el campo y el menú inferior. */
  height: clamp(200px, calc(100vh - 430px), 520px);
}
@supports (height: 100dvh) {
  .chat-caja { height: clamp(200px, calc(100dvh - 430px), 520px); }
}
.chat-form { display: flex; gap: .5rem; margin-top: .75rem; }
.burbuja { max-width: 82%; padding: .55rem .85rem; border-radius: 16px; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
.burbuja small { display: block; font-size: .75rem; opacity: .75; margin-top: .15rem; }
.burbuja.mia small { opacity: .92; }
.burbuja.mia { align-self: flex-end; background: var(--ac); color: #fff; border-bottom-right-radius: 4px; }
.burbuja.otra { align-self: flex-start; background: #fff; border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.aviso-item { display: flex; gap: .85rem; align-items: flex-start; width: 100%; text-align: left; padding: .9rem 1rem; color: inherit; background: #fff; border: 0; border-bottom: 1px solid var(--borde); min-height: 56px; }
.aviso-item:last-child { border-bottom: 0; }
.aviso-item:hover { background: var(--fondo); color: inherit; }
.aviso-item.nueva { background: var(--ac-suave); }
.aviso-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: .4rem; background: transparent; }
.aviso-item.nueva .aviso-punto { background: var(--ac); }
.faq { border-bottom: 1px solid var(--borde); }
.faq:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 52px; padding: .5rem 1rem; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "\f282"; font-family: "bootstrap-icons"; color: var(--suave); transition: transform .2s; }
.faq[open] summary::after { transform: rotate(180deg); }
.faq .faq-cuerpo { padding: 0 1rem 1rem; color: var(--suave); }
.fila-dato { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--borde); }
.fila-dato:last-child { border-bottom: 0; }
.fila-dato span:first-child { color: var(--suave); }
.fila-dato span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.enlace-fila { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .5rem .25rem; color: var(--texto); border-bottom: 1px solid var(--borde); }
.enlace-fila:last-child { border-bottom: 0; }
.enlace-fila:hover { color: var(--ac); }
.enlace-fila i:first-child { color: var(--ac); font-size: 1.15rem; width: 24px; text-align: center; }
.enlace-fila i:last-child { margin-left: auto; color: var(--suave); }

/* ---------- Utilidades de las vistas (antes estilos en línea) ---------- */
.monto-grande { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.monto-stat { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.img-comprobante { max-height: 220px; }
.img-previa { max-height: 200px; }
.campo-codigo { letter-spacing: .25em; }
.campo-codigo-sm { letter-spacing: .2em; }
.caja-codigo { background: var(--ac-suave); }
.codigo-grande { font-size: 2.2rem; letter-spacing: .25em; }
.caja-fondo { background: var(--fondo); }
.vacio-icono.sm { width: 44px; height: 44px; border-radius: 14px; margin: 0; font-size: 1.2rem; }
.opcion-entrega { border: 2px solid var(--borde); }
.opcion-entrega.activa { border-color: var(--ac); background: var(--ac-suave); }
.paso-flujo { min-width: 120px; flex-basis: 0; }
.tarjeta-codigo { border: 2px solid var(--ac-borde); background: var(--ac-suave); }
.codigo-entrega { font-size: 2.6rem; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.tarjeta-ejemplo { background: linear-gradient(135deg, var(--ac), var(--ac-2)); }
.tarjeta-ejemplo .numero { letter-spacing: .15em; }
.progress { --bs-progress-bar-bg: var(--ac); }
.progreso-fino { height: 8px; }
.texto-libre { overflow-wrap: anywhere; white-space: pre-wrap; }

/* ---------- Escritorio ---------- */
@media (min-width: 576px) {
  .contenido { padding-left: 24px; padding-right: 24px; }
  .hero-botones .btn { flex: 0 0 auto; }
  .landing-acciones .btn-light { display: inline-flex; }
}
@media (min-width: 480px) {
  .vitrina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-pago, .bento-historial { grid-column: span 2; }
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  /* El campo de mensaje queda visible por encima del menú inferior aunque la página sea más alta. */
  .chat-form {
    position: sticky; z-index: 5; background: #fff; padding-top: .5rem; margin-bottom: -.25rem;
    bottom: calc(var(--inferior-h) + env(safe-area-inset-bottom) + .5rem);
  }
}
@media (max-width: 479.98px) {
  .barra-superior .marca span:last-child { display: none; }
  .selector-modo button { padding: 0 .6rem; font-size: .78rem; }
}
@media (min-width: 992px) {
  .rejilla { grid-template-columns: repeat(3, 1fr); }
  .app-main { margin-left: var(--lateral-w); padding-bottom: 0; }
  .menu-inferior { display: none; }
  .barra-superior { background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: .75rem; }
  .barra-superior .marca, .selector-barra { display: none; }
  .contenido { padding: .5rem 32px 3rem; }
  .titulo-pagina h1 { font-size: 1.85rem; }

  .lateral {
    position: fixed; z-index: 35; top: 0; bottom: 0; left: 0; width: var(--lateral-w);
    display: flex; flex-direction: column; padding: 1.25rem 1rem;
    background: #fff; border-right: 1px solid var(--borde);
  }
  .lateral > .marca + .lateral-nav { margin-top: 1.5rem; }
  .lateral-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -.25rem; padding: 0 .25rem; }
  .lateral-sep { margin: 1.25rem .75rem .4rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); font-weight: 700; }
  .nav-item { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: 0 .75rem; border-radius: 12px; color: var(--texto); font-weight: 550; }
  .nav-item .nav-icono { position: relative; font-size: 1.15rem; width: 24px; text-align: center; color: var(--suave); }
  .nav-item:hover { background: var(--fondo); color: var(--texto); }
  .nav-item.activo { background: var(--ac-suave); color: var(--ac-osc); font-weight: 650; }
  .nav-item.activo .nav-icono { color: var(--ac); }
  .nav-item-sec { min-height: 40px; font-size: .9rem; }
  .nav-item .insignia-notif { top: -7px; right: -11px; border-color: #fff; }
  .lateral-pie { display: flex; align-items: center; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
  .usuario-mini { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; color: var(--texto); }
  .usuario-mini:hover { color: var(--texto); }
  .btn-salir { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--suave); font-size: 1.2rem; }
  .btn-salir:hover { background: #fde4e4; color: #a32424; }
  .avisos { left: auto; right: 24px; top: auto; bottom: 24px; width: 360px; flex-direction: column-reverse; }
  html:has(.menu-inferior) { scroll-padding-bottom: 24px; }

  .landing-enlaces { display: flex; }
  .vitrina { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento-pago { grid-column: span 2; }
  .bento-verif, .bento-codigo { grid-column: span 1; }
  .bento-historial { grid-column: span 4; }
  .hero { padding: 4.5rem 0 5rem; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
  .seccion { padding: 5rem 0; }

  .auth-pagina { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(480px, 1fr); }
  .auth-lado { display: flex; align-items: center; padding: 3rem; background: linear-gradient(150deg, #4a4ac0, #7c5cf0 70%); color: #fff; }
  .auth-lado-interior { max-width: 420px; margin: 0 auto; }
  .auth-lado .marca { color: #fff; }
  .auth-lado .marca-logo { background: rgba(255, 255, 255, .2); box-shadow: none; }
  .auth-lado h2 { font-size: 2rem; font-weight: 800; margin-top: 2.5rem; line-height: 1.15; color: #fff; }
  .auth-principal { justify-content: center; padding: 3rem; }
  .auth-movil { display: none; }
}
@media (min-width: 1400px) {
  .rejilla { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.ruta-pedido { font-weight: 600; color: var(--texto); }