/* ==========================================================================
   MUNDO VISA TOURS - Hoja de estilos principal
   Mobile first. Sin frameworks externos: todo se sirve desde el hosting, asi
   la pagina carga rapido incluso con conexion movil lenta.

   Los colores llegan como variables desde el panel (Configuracion >
   Apariencia), por lo que cambiar la identidad visual no requiere tocar CSS.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  /* ---- Paleta corporativa Mundo Visa Tours -------------------------------
     Tomada del logotipo. El panel (Configuracion > Apariencia) puede
     cambiarlos y estos valores quedan solo como respaldo.
       primary   Azul corporativo: estructura, botones, cabeceras.
       secondary Celeste del logo: degradados, aire y frescura.
       accent    Naranja mandarina: el color de marca, para lo que debe
                 llamar la atencion (boton de registro, datos destacados).
       dark      Azul marino del texto VISA: fondos y pie de pagina.
     ---------------------------------------------------------------------- */
  --c-primary:#12508C;
  --c-secondary:#2E8FC9;
  --c-accent:#F4610C;
  --c-dark:#0E2C50;

  --c-bg:#F5F8FB;
  --c-surface:#FFFFFF;
  --c-border:#E1E8EF;
  --c-text:#1C2C3A;
  --c-muted:#657C90;
  /* Confirmaciones y estados "todo bien": naranja de marca, no verde.
     Se conserva el nombre --c-success porque describe el significado, no el
     color; el unico verde que queda en la web es el de WhatsApp. */
  --c-success:#A8440A;
  --c-success-bg:#FFE7D1;
  --c-error:#C0392B;
  --c-error-bg:#FDECEA;
  --c-warning:#9A6200;
  --c-warning-bg:#FFF5E1;
  --c-info-bg:#E8F2FA;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;

  --shadow-sm:0 1px 2px rgba(11,34,57,.06), 0 2px 8px rgba(11,34,57,.05);
  --shadow:0 4px 12px rgba(11,34,57,.08), 0 12px 32px rgba(11,34,57,.07);
  --shadow-lg:0 18px 50px rgba(11,34,57,.16);

  --wrap:1120px;
  --gap:16px;

  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--c-primary);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;font-size:inherit}
table{border-collapse:collapse;width:100%}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

:focus-visible{outline:3px solid var(--c-secondary);outline-offset:2px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 18px}
.muted{color:var(--c-muted);font-size:14px}
.icon{width:1.15em;height:1.15em;fill:currentColor;flex:0 0 auto}
.icon--xl{width:52px;height:52px;opacity:.35}
.req{color:var(--c-error)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--c-dark);color:#fff;padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{left:0}

.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --------------------------------------------------------------- botones -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border:1px solid transparent;border-radius:var(--radius-sm);
  font-weight:700;font-size:15px;line-height:1.2;text-align:center;
  cursor:pointer;text-decoration:none;
  transition:transform .12s ease, box-shadow .15s ease, background-color .15s ease;
  min-height:46px;                     /* comodo para el dedo */
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-loading{opacity:.6;pointer-events:none}

.btn--primary{
  background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));
  color:#fff;box-shadow:var(--shadow-sm);
}
.btn--primary:hover{box-shadow:var(--shadow)}

/* Naranja de marca: reservado para la accion principal, para que destaque
   sobre el azul sin competir con el. Texto en azul marino, que es la pareja
   natural del naranja en el logotipo y da buen contraste. */
/* Texto blanco y algo mas grueso: sobre el naranja se lee mejor y el boton
   gana presencia. La sombra suave del texto asegura el contraste aunque el
   administrador elija un naranja mas claro desde Configuracion. */
.btn--accent{
  background:var(--c-accent);color:#fff;font-weight:800;letter-spacing:.4px;
  text-shadow:0 1px 2px rgba(0,0,0,.28);box-shadow:var(--shadow);
}
.btn--accent:hover{filter:brightness(1.07);box-shadow:var(--shadow-lg)}

.btn--ghost{background:var(--c-surface);color:var(--c-primary);border-color:var(--c-border)}
.btn--ghost:hover{border-color:var(--c-primary);background:#fbfdff}

.btn--danger{background:var(--c-error);color:#fff}
.btn--danger:hover{background:#a6301f}

.btn--whatsapp{background:#25D366;color:#053d1c}
.btn--whatsapp:hover{background:#1fb455}

.btn--sm{padding:9px 14px;font-size:14px;min-height:38px}
.btn--xs{padding:6px 10px;font-size:13px;min-height:32px;border-radius:6px}
.btn--lg{padding:16px 26px;font-size:16px;min-height:54px}
.btn--xl{padding:20px 32px;font-size:19px;min-height:62px;border-radius:var(--radius)}
.btn--block{width:100%}

/* --------------------------------------------------------------- alertas -- */
.flash-stack{display:grid;gap:10px;margin:18px auto;max-width:var(--wrap)}
.alert{
  padding:14px 16px;border-radius:var(--radius-sm);font-size:15px;
  border-left:4px solid transparent;
}
.alert--success{background:var(--c-success-bg);color:var(--c-success);border-color:var(--c-success)}
.alert--error  {background:var(--c-error-bg);color:var(--c-error);border-color:var(--c-error)}
.alert--warning{background:var(--c-warning-bg);color:var(--c-warning);border-color:var(--c-warning)}
.alert--info   {background:var(--c-info-bg);color:var(--c-primary);border-color:var(--c-primary)}

/* -------------------------------------------------------- cabecera sitio -- */
.site-header{
  background:var(--c-surface);border-bottom:1px solid var(--c-border);
  position:sticky;top:0;z-index:20;box-shadow:var(--shadow-sm);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand:hover{text-decoration:none}

/* El cuadro de la marca: contiene el logotipo real o, mientras no se sube,
   las siglas MVT. El nombre de la empresa va siempre a su derecha. */
.brand__mark{
  width:54px;height:54px;flex:0 0 auto;border-radius:12px;
  display:grid;place-items:center;overflow:hidden;
}
.brand__mark img{width:100%;height:100%;object-fit:contain}
.brand__mark-initials{
  width:100%;height:100%;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));
  color:#fff;font-weight:800;font-size:15px;letter-spacing:.5px;
}

.brand__text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand__text-hint{
  font-size:10px;letter-spacing:2px;color:var(--c-muted);font-weight:700;
}
.brand__text-name{
  font-size:15px;font-weight:800;color:var(--c-dark);text-transform:uppercase;
  letter-spacing:.3px;
}
.brand__text-tagline{
  font-size:11.5px;font-weight:600;color:var(--c-muted);text-transform:none;
}

/*
 * En el celular el nombre se lee en dos lineas, como en el logotipo:
 * MUNDO arriba y VISA TOURS debajo. Cada parte entera en su linea, sin
 * partirse a la mitad, y el lema tambien de una sola pieza.
 */
@media (max-width:480px){
  .brand__mark{width:46px;height:46px}
  .brand__text-name{font-size:14px;letter-spacing:.2px;line-height:1.15}
  .brand__word{display:block;white-space:nowrap}
  .brand__text-tagline{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media (min-width:640px){
  .brand__mark{width:62px;height:62px}
  .brand__text-name{font-size:17px}
}

/* -------------------------------------------------------------- hero ----- */
/* La cabecera ya no es un bloque plano y oscuro: el azul marino se abre hacia
   el azul corporativo en diagonal. Con eso el mismo color pesa menos y la
   pagina se siente mas abierta sin perder la elegancia. */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:var(--c-dark);
  background:linear-gradient(158deg, var(--c-dark) 0%, var(--c-primary) 100%);
  padding:36px 0 74px;
}

/* Curva blanca que une la cabecera con el cuerpo. Un corte recto entre una
   zona oscura y una clara resulta duro; la curva suaviza el encuentro y es
   lo que mas ayuda a que la pagina se vea amable. */
.hero::after{
  content:"";position:absolute;left:-3%;right:-3%;bottom:-1px;height:46px;
  background:var(--c-bg);border-radius:100% 100% 0 0 / 100% 100% 0 0;
  pointer-events:none;
}
.hero__glow{
  position:absolute;inset:-40% -20% auto -20%;height:520px;pointer-events:none;
  /* Reserva: si el navegador no entiende color-mix, queda el degradado simple. */
  background:linear-gradient(160deg, rgba(255,255,255,.10), transparent 60%);
  background:
    radial-gradient(420px 260px at 22% 18%, color-mix(in srgb, var(--c-secondary) 55%, transparent) 0%, transparent 70%),
    radial-gradient(520px 300px at 82% 8%, color-mix(in srgb, var(--c-primary) 65%, transparent) 0%, transparent 72%);
  opacity:.9;
}
/* El bloque de identidad (titulo, colegio, ubicacion) va junto; la fecha y el
   destino respiran un poco mas para que se lean como datos aparte. */
.hero__inner{position:relative;z-index:2;text-align:center;display:grid;gap:9px;justify-items:center}

/* Titulo principal de la pagina: RELACION DE PASAJEROS.
   Es texto configurable (Configuracion > Textos publicos); si se deja vacio
   no se dibuja y el nombre del viaje pasa a encabezar la pagina. */
.hero__kicker{
  font-size:clamp(23px,6.6vw,36px);line-height:1.1;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:#fff;margin:0;
}
/* Nombre del viaje: dato secundario, debajo del titulo. */
.hero__title{
  font-size:clamp(16px,4.2vw,22px);line-height:1.25;font-weight:700;letter-spacing:.6px;
  color:rgba(255,255,255,.88);margin:-2px 0 0;
}
.hero__school{
  font-size:clamp(21px,6vw,32px);line-height:1.15;font-weight:800;letter-spacing:.8px;
  color:var(--c-accent);margin:-1px 0 0;
}
.hero__location{
  font-size:14px;line-height:1.2;font-weight:700;letter-spacing:2px;
  color:rgba(255,255,255,.82);margin:-4px 0 0;
}
.hero__date{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  padding:9px 16px;border-radius:999px;font-weight:700;font-size:14px;
  margin-top:5px;
}
.hero__destination{
  display:inline-flex;align-items:center;gap:7px;font-size:14px;
  font-weight:700;letter-spacing:.6px;color:rgba(255,255,255,.8);margin:-2px 0 0;
}
.hero__note{max-width:560px;color:rgba(255,255,255,.8);font-size:15px}
.hero__cta{margin-top:8px;width:100%;max-width:420px}

.hero__image{
  width:100%;max-width:640px;margin-top:8px;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.14);aspect-ratio:16/9;background:#0d2b46;
}
.hero__image img{width:100%;height:100%;object-fit:cover}
.hero__image--empty{
  display:grid;place-items:center;gap:8px;color:rgba(255,255,255,.4);
  border-style:dashed;box-shadow:none;
}
.hero__image--empty svg{width:60px;height:60px;fill:currentColor}
.hero__image--empty span{font-size:13px;letter-spacing:1px;text-transform:uppercase}

.hero--home .hero__title{font-size:clamp(24px,6vw,38px)}

.capacity{width:100%;max-width:420px}
/* La barra de plazas va en celeste, no en naranja: asi el naranja queda
   reservado para el boton de registro y no compite consigo mismo. */
.capacity__bar{height:8px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.capacity__bar span{display:block;height:100%;background:var(--c-secondary);border-radius:99px}
.capacity__text{font-size:13px;color:rgba(255,255,255,.8);margin-top:8px}

.notice{
  display:flex;gap:12px;align-items:flex-start;text-align:left;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  padding:16px 18px;border-radius:var(--radius);max-width:520px;
}
.notice .icon{width:22px;height:22px;color:var(--c-accent)}
.notice p{font-size:15px;color:rgba(255,255,255,.92)}

/* -------------------------------------------------------------- secciones -- */
.section{padding:30px 18px}
.section__title{font-size:20px;font-weight:800;color:var(--c-dark);margin-bottom:12px}
.subtitle{font-size:16px;font-weight:700;color:var(--c-dark);margin:18px 0 10px}

.card{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-sm);margin-bottom:18px;
}
.card__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:16px;
}
.card__title{font-size:17px;font-weight:800;color:var(--c-dark)}
.card__subtitle{font-size:14px;color:var(--c-muted);margin-top:2px}
.card__head-actions{display:flex;gap:8px;flex-wrap:wrap}
.card--info{border-left:4px solid var(--c-secondary)}
.card--empty{text-align:center;display:grid;gap:10px;justify-items:center;padding:38px 20px}
.card--tip{background:var(--c-info-bg);border-color:#cfe3f3}
.prose p{margin-bottom:10px}

.steps-preview__list{display:grid;gap:14px;margin-top:6px}
.steps-preview__list li{display:flex;gap:14px;align-items:flex-start;
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:16px}
.steps-preview__num{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--c-primary);color:#fff;font-weight:800;font-size:15px;
}
.steps-preview h3{font-size:15px;font-weight:800;color:var(--c-dark)}
.steps-preview p{font-size:14px;color:var(--c-muted)}

/* ------------------------------------------------------- tarjetas viajes -- */
.trip-grid{display:grid;gap:16px}
.trip-card__link{
  display:flex;flex-direction:column;height:100%;background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .15s ease, box-shadow .15s ease;
}
.trip-card__link:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.trip-card__media{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--c-primary),var(--c-secondary))}
.trip-card__media img{width:100%;height:100%;object-fit:cover}
.trip-card__media-placeholder{position:absolute;inset:0;display:grid;place-items:center}
.trip-card__media-placeholder svg{width:56px;height:56px;fill:rgba(255,255,255,.5)}
.trip-card__date{
  position:absolute;bottom:10px;left:10px;background:rgba(11,34,57,.85);color:#fff;
  padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;
}
.trip-card__body{padding:16px;flex:1}
.trip-card__school{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--c-secondary)}
.trip-card__name{font-size:17px;font-weight:800;color:var(--c-dark);margin:4px 0 6px}
.trip-card__meta{font-size:13px;color:var(--c-muted)}
.trip-card__meta--muted{opacity:.85}
.trip-card__foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-top:1px solid var(--c-border);
}
.trip-card__arrow{color:var(--c-primary);font-weight:800}

.tag{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.4px}
.tag--open{background:var(--c-success-bg);color:var(--c-success)}
.tag--muted{background:#eef2f6;color:var(--c-muted)}

/* ------------------------------------------------------------ formulario -- */
.form-page{padding:26px 0 48px}
.form-page__inner{max-width:680px}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;margin-bottom:14px}
.form-page__head{text-align:center;margin-bottom:18px}
.form-page__school{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--c-secondary)}
.form-page__title{font-size:clamp(22px,6vw,30px);font-weight:800;color:var(--c-dark);margin:4px 0}
.form-page__date{font-size:14px;color:var(--c-muted);font-weight:600}

/* Encabezado de "elige tu comida": las 3 lineas (colegio, lugar, dia y
   fecha) mas grandes que en el resto de paginas publicas, bien pegadas
   entre si (mismo espacio de 4px entre cada una, incluido el titulo), para
   que se lean de un vistazo desde el enlace de WhatsApp. */
.meal-header__school{font-size:19px;letter-spacing:1px;line-height:1.15;margin:0}
.meal-header__place{font-size:18px;font-weight:700;color:var(--c-dark);line-height:1.15;margin:4px 0 0}
.meal-header .form-page__date{font-size:17px;font-weight:700;line-height:1.15;margin:4px 0 0}
.meal-header .form-page__title{line-height:1.15;margin:4px 0 0}
.meal-header__info{font-size:15px;color:var(--c-dark);line-height:1.3;margin:4px 0 0}
.meal-header__info--strong{font-size:17px;font-weight:700;margin-top:10px}
.meal-header__info a{font-weight:700}
.meal-header .meal-header__info + .form-page__title{margin-top:14px}

.form{padding:22px 18px}

/* Indicador de progreso */
.stepper{display:flex;align-items:center;gap:0;margin-bottom:6px}
.stepper__item{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.stepper__item + .stepper__item::before{
  content:"";flex:1;height:2px;background:var(--c-border);margin:0 8px;border-radius:2px;
}
.stepper__dot{
  width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:#eef2f6;color:var(--c-muted);font-weight:800;font-size:14px;
  border:2px solid var(--c-border);transition:all .18s ease;
}
.stepper__label{font-size:13px;font-weight:700;color:var(--c-muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.stepper__item.is-current .stepper__dot{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.stepper__item.is-current .stepper__label{color:var(--c-dark)}
.stepper__item.is-done .stepper__dot{background:var(--c-success);border-color:var(--c-success);color:#fff}
.stepper__counter{
  font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--c-muted);
  text-align:center;margin-bottom:18px;text-transform:uppercase;
}

.step{border:0;padding:0;margin:0}
.step__legend{
  font-size:13px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--c-primary);padding:0;margin-bottom:14px;
}
.step__actions{margin-top:22px;display:grid;gap:10px}
.step__actions--split{grid-template-columns:auto 1fr}

/* Los pasos solo se ocultan si hay JavaScript para volver a mostrarlos. */
.js .step[hidden]{display:none}

/* Campos */
.field{display:grid;gap:6px;margin-bottom:16px;min-width:0}
.field__label{font-size:14px;font-weight:700;color:var(--c-dark)}
.field__input{
  width:100%;padding:14px 14px;font-size:16px;   /* 16px evita el zoom en iOS */
  font-family:inherit;color:var(--c-text);background:var(--c-surface);
  border:1.5px solid var(--c-border);border-radius:var(--radius-sm);
  transition:border-color .15s ease, box-shadow .15s ease;
  min-height:50px;-webkit-appearance:none;appearance:none;
}
select.field__input{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23657C90'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:22px;
  padding-right:38px;
}
.field__input:focus{border-color:var(--c-primary);box-shadow:0 0 0 4px rgba(14,90,138,.12);outline:none}
.field__input::placeholder{color:#9db0c1}
.field__input--locked{background:#f2f6f9;color:var(--c-muted);font-weight:700}

/* Nombres y apellidos: se ven en mayusculas mientras se escriben, igual que
   como quedan guardados. El servidor los convierte de todas formas. */
.field__input--upper{text-transform:uppercase}
.field__input--upper::placeholder{text-transform:none}
.field__input--file{padding:10px;min-height:auto;font-size:14px}
textarea.field__input{min-height:110px;resize:vertical;line-height:1.5}

.field__hint{font-size:13px;color:var(--c-muted)}
.field__hint--warn{color:var(--c-warning)}
.field__error{font-size:13px;font-weight:600;color:var(--c-error);min-height:0}
.field__error:empty{display:none}

.field--invalid .field__input{border-color:var(--c-error);background:#fffafa}
.field--invalid .field__input:focus{box-shadow:0 0 0 4px rgba(192,57,43,.12)}

.field__group{display:flex;align-items:stretch}
.field__group .field__input{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.field__prefix{
  display:grid;place-items:center;padding:0 13px;font-weight:800;font-size:15px;
  color:var(--c-muted);background:#f2f6f9;border:1.5px solid var(--c-border);border-right:0;
  border-radius:var(--radius-sm) 0 0 var(--radius-sm);
}
.field__toggle{
  border:1.5px solid var(--c-border);border-left:0;background:#f2f6f9;color:var(--c-muted);
  padding:0 13px;cursor:pointer;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.field__toggle:hover{color:var(--c-primary)}
.field__group > .field__input:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}

.field-row{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:520px){
  .field-row{grid-template-columns:1.4fr 1fr;gap:14px}
}

.checkbox{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer;font-weight:600}
.checkbox input{width:22px;height:22px;accent-color:var(--c-primary);flex:0 0 auto;margin-top:1px}

.privacy-note{
  display:flex;gap:11px;align-items:flex-start;background:var(--c-info-bg);
  border-radius:var(--radius-sm);padding:14px;margin-top:6px;
}
.privacy-note .icon{width:20px;height:20px;color:var(--c-primary)}
.privacy-note p{font-size:13px;color:#33566f}

/* ------------------------------------------------- pantallas de resultado -- */
.result{padding:40px 0 60px}
.result__inner{max-width:600px;text-align:center;display:grid;gap:16px;justify-items:center}
.result__icon{width:84px;height:84px;border-radius:50%;display:grid;place-items:center}
.result__icon svg{width:46px;height:46px;fill:#fff}
.result__icon--ok{background:linear-gradient(135deg,var(--c-accent),#FF8C42);box-shadow:0 12px 30px rgba(244,97,12,.28)}
.result__icon--warn{background:linear-gradient(135deg,#E08D2B,var(--c-accent));box-shadow:0 12px 30px rgba(224,141,43,.28)}
.result__title{font-size:clamp(21px,5.6vw,30px);font-weight:800;color:var(--c-dark);line-height:1.2}
.result__message{font-size:16px;color:var(--c-muted);max-width:480px}
.result__actions{display:grid;gap:10px;width:100%;max-width:400px;margin-top:6px}
.result__actions--split{gap:10px}
.result__footnote{font-size:13px;color:var(--c-muted);max-width:460px;margin-top:8px}

.code-card{
  background:var(--c-surface);border:2px dashed var(--c-secondary);border-radius:var(--radius);
  padding:20px 24px;display:grid;gap:8px;justify-items:center;width:100%;max-width:380px;
}
.code-card__label{font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--c-muted)}
.code-card__value{
  font-size:clamp(26px,8vw,36px);font-weight:800;letter-spacing:2px;color:var(--c-primary);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.code-card__hint{font-size:12px;color:var(--c-muted)}

/* Resumen de lo registrado, para revisarlo antes de cerrar la pagina. */
.receipt{
  width:100%;text-align:left;background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:var(--radius);
  padding:18px 18px 8px;box-shadow:var(--shadow-sm);
}
.receipt__title{
  font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--c-secondary);margin:0 0 8px;
}
.receipt__title + .receipt__list{margin-bottom:18px}
.receipt__list{display:grid;gap:0;margin:0}
.receipt__list > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px dashed var(--c-border);
}
.receipt__list > div:last-child{border-bottom:0}
.receipt__list dt{font-size:13.5px;color:var(--c-muted);flex:0 0 auto}
.receipt__list dd{font-size:15px;font-weight:600;color:var(--c-dark);text-align:right;margin:0}
.receipt__strong{font-size:16px !important;font-weight:800 !important}

/* Aviso legal: tiene que leerse, no decorar. */
.legal-notice{
  display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  background:var(--c-warning-bg);border:2px solid #E8C98A;border-radius:var(--radius);
  padding:16px;
}
.legal-notice .icon{width:24px;height:24px;color:var(--c-warning);flex:0 0 auto;margin-top:1px}
.legal-notice p{
  font-size:13.5px;line-height:1.55;font-weight:700;color:#6B4708;
}

.summary{
  display:grid;gap:1px;background:var(--c-border);border:1px solid var(--c-border);
  border-radius:var(--radius);overflow:hidden;width:100%;text-align:left;
}
.summary > div{background:var(--c-surface);padding:13px 16px;display:flex;justify-content:space-between;gap:14px}
.summary dt{font-size:13px;color:var(--c-muted);font-weight:600}
.summary dd{font-size:14px;font-weight:700;color:var(--c-dark);text-align:right}

/* -------------------------------------------------------------- pie sitio -- */
/* Una franja fina naranja-celeste cierra la pagina y repite la pareja de
   colores de la marca, atando el pie con la cabecera. */
.site-footer{
  position:relative;background:var(--c-dark);color:rgba(255,255,255,.78);
  margin-top:20px;padding:37px 0 0;
}
.site-footer::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--c-accent),var(--c-secondary));
}
.site-footer__inner{display:grid;gap:22px}

/* Marca del pie: nombre y eslogan muy juntos, y el logotipo debajo. */
.site-footer__brand{display:grid;gap:0;justify-items:start}
.site-footer__name{
  font-size:18px;font-weight:800;color:#fff;letter-spacing:.5px;line-height:1.15;
}
.site-footer__tagline{font-size:14px;line-height:1.2;margin:1px 0 0}
.site-footer__logo{
  max-width:92px;height:auto;margin-top:12px;object-fit:contain;
}

.site-footer__contact{display:grid;gap:7px;font-size:14px}
.site-footer__contact span{color:var(--c-accent);font-weight:700;font-size:12px;
  letter-spacing:1.2px;text-transform:uppercase;display:block}
.site-footer__contact a{color:#fff}

/* Redes: iconos de marca, sin texto. */
.site-footer__social{display:flex;gap:12px;align-items:center}
.social-icon{
  width:44px;height:44px;display:grid;place-items:center;border-radius:12px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  color:#fff;transition:background-color .15s ease,transform .15s ease,color .15s ease;
}
.social-icon svg{width:22px;height:22px;fill:currentColor}
.social-icon:hover{transform:translateY(-2px);text-decoration:none}
.social-icon--facebook:hover{background:#1877F2;border-color:#1877F2}
.social-icon--instagram:hover{
  background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7);border-color:transparent;
}
.social-icon--tiktok:hover{background:#000;border-color:#25F4EE;color:#25F4EE}
.site-footer__legal{
  border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding:16px 18px 22px;
}
.site-footer__legal p{font-size:12px;color:rgba(255,255,255,.55);max-width:760px}

/* ---------------------------------------------------------- pantalla auth -- */
.auth-body{
  min-height:100vh;display:grid;place-items:center;padding:24px 16px;
  background:var(--c-dark);
  background:
    radial-gradient(900px 420px at 15% 0%, color-mix(in srgb, var(--c-secondary) 35%, transparent), transparent 70%),
    radial-gradient(900px 500px at 90% 10%, color-mix(in srgb, var(--c-primary) 45%, transparent), transparent 72%),
    var(--c-dark);
}
.auth{width:100%;max-width:430px}
.auth__panel{
  background:var(--c-surface);border-radius:var(--radius-lg);padding:30px 24px;
  box-shadow:var(--shadow-lg);
}
.auth__brand{text-align:center;display:grid;gap:6px;justify-items:center;margin-bottom:22px}
.auth__brand img{max-height:76px;width:auto;object-fit:contain}
.auth__brand-mark{
  width:62px;height:62px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));
  color:#fff;font-weight:800;font-size:19px;letter-spacing:1px;
}
.auth__brand-name{font-size:15px;font-weight:800;color:var(--c-dark);text-transform:uppercase;letter-spacing:1.2px}
.auth__brand-tagline{font-size:13px;color:var(--c-muted)}
.auth__title{font-size:21px;font-weight:800;color:var(--c-dark);text-align:center}
.auth__subtitle{font-size:14px;color:var(--c-muted);text-align:center;margin:4px 0 20px}
.auth__note{font-size:12px;color:var(--c-muted);margin-top:16px;text-align:center;line-height:1.5}
.auth__back{text-align:center;margin-top:18px;font-size:14px}

/* ------------------------------------------------------------- utilidades -- */
.code{
  font-size:13px;background:#f2f6f9;border:1px solid var(--c-border);
  padding:2px 7px;border-radius:5px;color:var(--c-dark);font-weight:700;white-space:nowrap;
}
.code--short{font-size:12px}

/* ---------------------------------------------------------- escritorio --- */
@media (min-width:640px){
  .wrap{padding:0 24px}
  .form{padding:28px 26px}
  .hero{padding:48px 0 56px}
  .result__actions--split{display:flex;justify-content:center}
  .result__actions--split .btn{flex:1}
  .trip-grid{grid-template-columns:repeat(2,1fr)}
  .steps-preview__list{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:960px){
  .trip-grid{grid-template-columns:repeat(3,1fr)}
  .site-footer__inner{grid-template-columns:1.4fr 1fr auto;align-items:start}
  .hero{padding:56px 0 64px}
}

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

/* Grado y seccion: identifica la lista dentro del colegio. */
.hero__grade{
  display:inline-block;font-size:14px;font-weight:800;letter-spacing:2px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  padding:5px 14px;border-radius:999px;margin:2px 0 0;
}

/* ---------------------------------------------------------------- conformidad
   Casilla que el pasajero marca antes de enviar. Es una casilla cuadrada
   grande, facil de pulsar en el telefono, y el texto completo actua de
   etiqueta para que se pueda marcar tocando cualquier parte. */
.consent{
  margin:18px 0 6px;padding:16px;border-radius:var(--radius);
  background:var(--c-success-bg);border:1px solid rgba(168,68,10,.25);
}
.consent__box{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.consent__box input{position:absolute;opacity:0;width:0;height:0}
.consent__mark{
  flex:0 0 auto;width:26px;height:26px;border-radius:6px;margin-top:1px;
  border:2px solid var(--c-success);background:var(--c-surface);
  display:grid;place-items:center;transition:background-color .15s ease;
}
.consent__mark::after{
  content:"";width:10px;height:6px;margin-top:-3px;
  border-left:3px solid #fff;border-bottom:3px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform .15s ease;
}
.consent__box input:checked + .consent__mark{background:var(--c-accent);border-color:var(--c-accent)}
.consent__box input:checked + .consent__mark::after{transform:rotate(-45deg) scale(1)}
.consent__box input:focus-visible + .consent__mark{outline:3px solid var(--c-secondary);outline-offset:2px}
.consent__text{font-size:.94rem;line-height:1.55;color:var(--c-text);text-align:left}
.consent--invalid{border-color:var(--c-error);background:var(--c-error-bg)}
.consent--invalid .consent__mark{border-color:var(--c-error)}

/* ------------------------------------------------------------- comprobante
   El "ticket" que se lleva el pasajero: se ve en pantalla, se descarga como
   foto (se dibuja en un canvas) y se imprime o guarda en PDF. */
.ticket{
  margin:24px auto 8px;max-width:560px;text-align:left;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;
}
.ticket__head{background:var(--c-primary);color:#fff;padding:14px 18px;text-align:center}
.ticket__brand{margin:0;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.ticket__kind{margin:3px 0 0;font-size:.86rem;letter-spacing:.1em;opacity:.9}
.ticket__code-label{
  margin:14px 0 0;text-align:center;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-muted);
}
.ticket__code{
  margin:4px 0 12px;text-align:center;color:var(--c-accent);
  font-size:2.15rem;font-weight:800;letter-spacing:.06em;
}
.ticket__title{
  margin:12px 18px 6px;padding-bottom:6px;border-bottom:1px solid var(--c-border);
  font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-primary);
}
.ticket .receipt__list{margin:0;padding:0 18px}

/* Dentro del comprobante la letra va mas grande y la etiqueta pegada a su
   dato: en una hoja angosta, un nombre en un extremo y "Viajante" en el otro
   se lee mal. Etiqueta a la izquierda, dato justo al lado. */
.ticket__logo{
  display:block;width:96px;height:96px;margin:0 auto 8px;
  object-fit:cover;border-radius:50%;padding:0;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.ticket .receipt__list > div{
  display:grid;grid-template-columns:36% 1fr;gap:8px;align-items:baseline;
  padding:6px 0;
}
.ticket .receipt__list dt{font-size:18px}
.ticket .receipt__list dd{font-size:21px;text-align:left;line-height:1.25}
.ticket .receipt__strong{font-size:23px !important}
.ticket__legal{
  margin:10px 0 0;padding:12px 18px;background:var(--c-bg);
  border-top:1px solid var(--c-border);font-size:.88rem;line-height:1.45;
  color:var(--c-text);font-weight:700;
}

@media print{
  /* Al imprimir (o guardar en PDF) sale solo el comprobante. */
  body *{visibility:hidden}
  #ticket,#ticket *{visibility:visible}
  #ticket{
    position:absolute;top:0;left:0;width:100%;max-width:none;
    border:0;box-shadow:none;border-radius:0;
  }
  .ticket__head{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ------------------------------------------------------- pedidos de comidas */
.meal-options{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.meal-option{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  background:var(--c-surface);border:1.5px solid var(--c-border);
  border-radius:var(--radius);padding:16px 18px;transition:border-color .15s,background .15s;
}
.meal-option:hover{border-color:var(--c-secondary)}
.meal-option input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--c-primary)}
.meal-option__photo{width:64px;height:64px;flex:0 0 auto;border-radius:var(--radius-sm);object-fit:cover}
.meal-option__text{display:flex;flex-direction:column;gap:2px}
.meal-option__name{font-weight:800;font-size:16px}
.meal-option__desc{font-size:14px;color:var(--c-muted)}
.meal-option.is-selected{border-color:var(--c-primary);background:var(--c-bg)}
.meal-list-closed{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);
  padding:20px;text-align:center;color:var(--c-muted);
}

/* --------------------------------------------------- lista para operador */
.operator-list{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.operator-list__item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:var(--radius);
  padding:14px 18px;font:inherit;color:inherit;transition:border-color .15s,background .15s;
}
.operator-list__item:hover{border-color:var(--c-secondary)}
.operator-list__code{font-weight:800;color:var(--c-primary);flex:0 0 auto}
.operator-list__name{font-weight:700}

.operator-overlay{
  position:fixed;inset:0;background:rgba(14,44,80,.72);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.operator-overlay[hidden]{display:none}
.operator-overlay__card{position:relative;max-width:420px;width:100%}
.operator-overlay__close{
  position:absolute;top:-16px;right:-16px;width:38px;height:38px;border-radius:50%;
  background:var(--c-dark);color:#FFFFFF;border:3px solid #FFFFFF;font-size:20px;font-weight:800;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.operator-card{
  background:#FFFFFF;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.operator-card__head{
  background:var(--c-primary);color:#FFFFFF;font-weight:800;font-size:20px;
  letter-spacing:1px;text-align:center;padding:18px 20px;
}
.operator-card__body{padding:20px 22px}
.operator-card__nombre{font-weight:800;font-size:17px;color:var(--c-dark);margin:0 0 14px}
.operator-card__row{
  display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--c-border);
}
.operator-card__row:last-child{border-bottom:0}
.operator-card__label{color:var(--c-muted);font-size:14px}
.operator-card__value{font-weight:700;color:var(--c-dark);text-align:right}
/* Separa "Datos del viajante" de "Datos del viaje" dentro de la misma tarjeta. */
.operator-card__subtitle{
  font-weight:800;font-size:13px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--c-primary);margin:16px 0 4px;
}
.operator-card__subtitle:first-child{margin-top:0}