:root {
  --blue-900: #003b8e;
  --blue-700: #005fcb;
  --blue-400: #41b7ff;
  --yellow: #ffcc00;
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(148, 163, 184, .35);
  --card: rgba(255, 255, 255, .9);
  --shadow: 0 24px 70px rgba(15, 23, 42, .16);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
.modal-dialog::-webkit-scrollbar, .modal-overlay::-webkit-scrollbar { width: 0; height: 0; display: none; }
body { font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--text); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.landing-body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 12px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,1), rgba(228,243,255,.85) 45%, rgba(212,231,255,.95) 100%),
    linear-gradient(135deg, #f8fbff, #dcecff);
}
.page-wrapper { width: 100%; max-width: 430px; }
.hero-card {
  border-radius: 30px;
  background: var(--card);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--shadow);
  padding: 20px;
}
.hero-inner { display: grid; gap: 15px; }
.landing-header { display: grid; gap: 14px; text-align: center; }
.logo-frame { padding: 5px; border-radius: 22px; background: linear-gradient(135deg, rgba(65,183,255,.35), rgba(255,255,255,.95)); border: 1px solid rgba(0,95,203,.16); box-shadow: 0 18px 38px rgba(15,23,42,.14); }
.logo-frame img { display: block; width: 100%; border-radius: 18px; }
.company-name { font-weight: 800; font-size: 1.35rem; letter-spacing: .14em; color: var(--blue-900); }
.tagline { color: var(--muted); font-size: .78rem; line-height: 1.45; max-width: 330px; margin: 4px auto 0; }
.social-links { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.social-link { min-width: 42px; height: 42px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 26px rgba(15,23,42,.10); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; font-size: .72rem; font-weight: 800; }
.social-link:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(15,23,42,.16); }
.social-link svg { width: 20px; height: 20px; flex: 0 0 auto; }
.social-link--whatsapp { color: #128c7e; }
.social-link--instagram { color: #c13584; }
.language-switch { display: inline-flex; justify-content: center; gap: 6px; padding: 5px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.72); margin-top: 12px; }
.lang-btn { border: 0; border-radius: 999px; padding: 7px 12px; background: transparent; color: var(--muted); font-size: .76rem; font-weight: 800; }
.lang-btn.active { background: linear-gradient(135deg, var(--blue-700), var(--blue-400)); color: white; box-shadow: 0 8px 20px rgba(0,95,203,.22); }
.soft-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.headline { text-align: center; color: var(--blue-900); font-size: 1rem; line-height: 1.45; }
.subheadline { text-align: center; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.benefits-list { display: grid; gap: 7px; list-style: none; color: #475569; font-size: .78rem; }
.benefits-list li { display: grid; grid-template-columns: 14px 1fr; gap: 7px; align-items: start; }
.benefits-list li::before { content: '✦'; color: var(--blue-700); font-size: .68rem; margin-top: 2px; }
.box-section { border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.7); padding: 14px; box-shadow: 0 16px 34px rgba(15,23,42,.08); }
.pricing-title { text-align: center; color: var(--blue-900); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
.pricing-grid { display: grid; gap: 9px; }
.box-option { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; align-items: center; border: 1px solid rgba(148,163,184,.24); border-radius: 17px; background: #fff; padding: 9px; }
.box-figure img { width: 58px; height: 48px; object-fit: contain; display: block; border-radius: 10px; }
.box-option strong { display: block; color: var(--blue-900); font-size: .82rem; }
.box-option span { display: block; color: var(--muted); font-size: .72rem; line-height: 1.3; }
.box-price { font-size: .95rem; }
.weight-note { width: fit-content; justify-self: center; color: #15803d; background: #ecfdf5; border: 1px solid #bbf7d0; border-radius: 999px; padding: 7px 13px; font-size: .78rem; font-weight: 800; }
.cta-actions { display: grid; gap: 9px; }
.cta-button, .instructions-button { width: 100%; border: 0; border-radius: 999px; padding: 13px 18px; font-size: .86rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; justify-content: center; gap: 8px; align-items: center; text-decoration: none; }
.cta-button { color: #1f2937; background: linear-gradient(135deg, #ffdf62, var(--yellow)); box-shadow: 0 18px 35px rgba(250,204,21,.32); }
.instructions-button { color: var(--blue-900); background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 28px rgba(15,23,42,.09); }
.fine-print { text-align: center; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.landing-footer { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .72rem; border-top: 1px solid var(--line); padding-top: 10px; }
.flags { display: flex; gap: 4px; align-items: center; font-size: .95rem; }
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: none; align-items: center; justify-content: center; padding: 14px; z-index: 20; overflow-y: auto; scrollbar-width: none; }
.modal-overlay.is-visible { display: flex; }
.modal-dialog { width: min(760px, 100%); max-height: calc(100dvh - 28px); overflow-y: auto; border-radius: 26px; padding: 22px; background: rgba(255,255,255,.98); box-shadow: var(--shadow); position: relative; scrollbar-width: none; }
.modal-close { position: absolute; top: 12px; right: 12px; border: 0; width: 32px; height: 32px; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: 1.2rem; }
.modal-title { color: var(--blue-900); font-size: 1.1rem; }
.modal-subtitle { color: var(--muted); font-size: .78rem; margin: 4px 0 16px; }
.booking-form { display: grid; gap: 14px; }
.form-section-title { color: var(--blue-900); font-size: .82rem; font-weight: 800; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.form-field { display: grid; gap: 4px; font-size: .78rem; }
.form-field--full { grid-column: 1 / -1; }
.form-label { font-weight: 700; }
.form-input, .form-select, .form-textarea { width: 100%; border: 1px solid rgba(148,163,184,.65); border-radius: 12px; padding: 9px 10px; outline: none; background: #f8fafc; font-size: .82rem; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--blue-700); background: #fff; box-shadow: 0 0 0 3px rgba(65,183,255,.13); }
.form-message { padding: 10px 12px; border-radius: 14px; font-size: .8rem; border: 1px solid; }
.form-message.ok { color: #166534; background: #ecfdf5; border-color: #86efac; }
.form-message.error { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.success-card { display: grid; gap: 8px; color: #14532d; background: linear-gradient(135deg, #ecfdf5, #f0fdf4); border-color: #86efac; }
.success-card strong { color: #166534; font-size: .95rem; }
.success-card p { line-height: 1.5; }
.success-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.success-actions a, .success-actions button { border: 0; border-radius: 999px; padding: 8px 11px; text-decoration: none; font-weight: 800; font-size: .74rem; background: #fff; color: #166534; border: 1px solid #bbf7d0; }
.booking-footer { display: flex; gap: 12px; justify-content: space-between; align-items: center; color: var(--muted); font-size: .72rem; }
.booking-submit { border: 0; border-radius: 999px; padding: 10px 16px; background: linear-gradient(135deg, var(--blue-700), var(--blue-900)); color: white; font-weight: 800; }
@media (max-width: 560px) {
  .landing-body { padding: 8px; align-items: start; }
  .hero-card { padding: 16px; border-radius: 26px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field--full { grid-column: auto; }
  .booking-footer { flex-direction: column; align-items: stretch; }
  .booking-submit { width: 100%; }
}


/* Página de instruções */
.instructions-page { min-height: 100dvh; padding: 24px 12px; background: radial-gradient(circle at 10% 0%, #fff, #e4f3ff 45%, #d4e7ff 100%); }
.instructions-wrapper { width: 100%; max-width: 760px; margin: 0 auto; }
.instructions-card { background: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow); border-radius: 30px; padding: 24px; display: grid; gap: 18px; }
.instructions-top { display: flex; gap: 16px; align-items: center; }
.instructions-logo { width: 86px; height: 70px; object-fit: contain; border-radius: 18px; background: #fff; border: 1px solid var(--line); padding: 6px; }
.instructions-kicker { color: var(--blue-700); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.instructions-title { color: var(--blue-900); font-size: 1.35rem; line-height: 1.25; }
.instructions-subtitle { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.instructions-list { display: grid; gap: 11px; list-style: none; }
.instructions-list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; background: #fff; border: 1px solid rgba(148,163,184,.25); border-radius: 18px; padding: 12px; }
.instructions-list li::before { content: '✓'; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: #eff6ff; color: var(--blue-700); font-weight: 900; }
.instructions-list strong { display: block; color: var(--blue-900); font-size: .9rem; margin-bottom: 2px; }
.instructions-list span { color: #475569; font-size: .82rem; line-height: 1.5; }
.instructions-alert { background: #fffbeb; color: #713f12; border: 1px solid #fde68a; border-radius: 18px; padding: 13px; font-size: .84rem; line-height: 1.5; }
.instructions-footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.back-button, .whatsapp-button { border-radius: 999px; padding: 12px 16px; text-align: center; text-decoration: none; font-weight: 800; font-size: .82rem; }
.back-button { background: #fff; color: var(--blue-900); border: 1px solid var(--line); }
.whatsapp-button { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
@media (max-width: 560px) {
  .instructions-page { padding: 8px; }
  .instructions-card { padding: 18px; border-radius: 26px; }
  .instructions-top { display: grid; text-align: center; justify-items: center; }
  .instructions-title { font-size: 1.12rem; }
  .instructions-footer-actions { grid-template-columns: 1fr; }
}