/* Wildpass landing + checkout. Mobile-first: base styles are for phones (375 px), wider screens add columns.
   Colours and fonts come from /brand.css (generated from config/brand.config.js).
   Contrast (WCAG AA) checked: never yellow or white text on light backgrounds; small turquoise text uses
   --turquoise-text; red only for the demo banner and error borders. Touch targets are at least 44 px.
   Yellow (--yellow) is ONLY for clickable primary buttons: badges, labels and highlights never use it. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 48px; }
html:has(#checkout:not([hidden])) { scroll-padding-bottom: 88px; } /* keeps focused fields clear of the fixed total bar */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, ::before, ::after { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--font-text); font-size: 16px; line-height: 1.5; color: var(--night); background: var(--sky); }
h1, h2, h3 { font-family: var(--font-headings); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 12px; }
p { margin: 0 0 12px; }
a { color: var(--turquoise-text); font-weight: 600; }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; border-radius: 4px; }
.ai :focus-visible, .final-cta :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 46rem; }
.muted, .hint { color: var(--secondary); }
.hint { font-size: 0.85rem; font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- demo banner (always visible) + header ---------- */
.banner { position: sticky; top: 0; z-index: 50; background: var(--red); color: var(--white); font-size: 0.8rem; font-weight: 700; line-height: 1.35; text-align: center; padding: 7px 12px; }
.banner-short { display: none; }
@media (max-width: 599px) { .banner { white-space: nowrap; padding: 5px 12px; } .banner-long { display: none; } .banner-short { display: inline; } } /* phones: one line */
/* "Saltar al contenido": off screen until a keyboard user reaches it. */
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--night); color: var(--white); text-decoration: none; }
.skip-link:focus { top: 8px; outline: 3px solid var(--white); outline-offset: -6px; }
#contenido:focus, #preguntas:focus { outline: none; }
.site-header { position: sticky; top: var(--banner-h, 31px); z-index: 40; background: var(--white); box-shadow: 0 1px 0 var(--border); }
.site-header .wrap { padding-top: 6px; padding-bottom: 6px; }
.header-bar { display: flex; align-items: center; gap: 12px; }
.header-bar .logo { margin-right: auto; }
/* Anchors (#preguntas, #planes, #quote-form…) stop below the sticky banner + header (site-nav.js measures them). */
html { scroll-padding-top: calc(var(--sticky-h, 90px) + 8px); }
.menu-toggle { min-height: 44px; padding: 8px 16px; border: 2px solid var(--night); border-radius: 999px; background: var(--white); color: var(--night); font-weight: 700; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a:not(.primary) { display: flex; align-items: center; min-height: 44px; color: var(--night); text-decoration: none; font-weight: 600; }
.site-nav a:not(.primary):hover { color: var(--turquoise-text); text-decoration: underline; }
.header-bar .nav-cta { flex: none; min-height: 44px; padding: 8px 18px; font-size: 1rem; white-space: nowrap; }
/* Phones and tablets: a simple panel under the header, opened by "Menú". */
@media (max-width: 959px) {
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 8px 16px 16px; background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 12px 24px rgb(11 31 58 / 0.12); }
  .site-nav.is-open { display: block; }
  .site-nav li + li { border-top: 1px solid var(--border); }
  .site-nav a:not(.primary) { min-height: 48px; }
}
/* Landing on phones: the bottom sticky bar says "Ver mi precio", so the header doesn't (never two at once). */
@media (max-width: 699px) {
  .site-header.is-home .nav-cta { display: none; }
  .header-bar { gap: 8px; }
  .header-bar .nav-cta { min-height: 40px; padding: 6px 12px; font-size: 0.9rem; }
  .site-header:not(.is-home) .menu-toggle { padding: 6px 12px; }
}
@media (max-width: 374px) { .site-header:not(.is-home) .logo-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (min-width: 960px) {
  .menu-toggle { display: none; }
  .site-nav { display: flex; align-items: center; margin-right: 8px; }
  .site-nav ul { display: flex; gap: 24px; }
}
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; }
.logo svg { width: 36px; height: 36px; flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo .wordmark { font-family: var(--font-headings); font-weight: 700; font-size: 1.5rem; color: var(--night); letter-spacing: -0.02em; }
.logo .tagline { font-weight: 600; font-size: 0.72rem; color: var(--turquoise-text); margin-top: 3px; }

/* ---------- buttons ---------- */
button { font: inherit; cursor: pointer; }
.primary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 28px; border: 0; border-radius: 12px; box-shadow: none;
  background: var(--yellow); color: var(--night); font-family: var(--font-text); font-size: 1.1rem; font-weight: 700; text-decoration: none; text-align: center; }
.primary:hover { filter: brightness(0.95); }
/* Press feedback for every button and button-link (a small push down; no animation with reduced motion). */
.primary, .secondary { transition: transform 0.12s ease, filter 0.15s ease, background-color 0.15s ease; }
.primary:active:not(:disabled), .secondary:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.primary:disabled { opacity: 0.55; cursor: not-allowed; } /* e.g. "Pagar" until the terms are accepted */
.primary[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.block { display: flex; width: 100%; }
.secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 22px; border: 2px solid var(--night); border-radius: 12px;
  background: var(--white); color: var(--night); font-size: 1.1rem; font-weight: 700; text-decoration: none; text-align: center; }
.secondary:hover { background: var(--sky); }
.link-button { min-height: 44px; padding: 0; border: 0; background: none; color: var(--turquoise-text); font-weight: 700; }
.button-link { text-decoration: none; }

/* ---------- form fields ---------- */
.field { margin: 0 0 8px; }
label, legend { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; }
input:not([type="checkbox"]), select {
  display: block; width: 100%; height: 48px; padding: 0 12px; border: 1.5px solid var(--field-border); border-radius: 10px;
  background: var(--white); color: var(--night); font: inherit; font-size: 16px; /* 16 px stops iOS zooming in */ }
select { appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230B1F3A' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
input[aria-invalid="true"], select[aria-invalid="true"] { border: 2px solid var(--red); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.field-row .field { min-width: 0; }
/* Date boxes: iOS gives date inputs a built-in minimum width that ignores width: 100%, so the two boxes overlapped.
   appearance: none + min-width: 0 makes them obey the grid column. Very narrow phones get one box per line. */
.field-row input { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; text-align: left; }
/* Same height and left padding as the other fields. iPhone Safari draws the date text in an inner box that sits at the
   top: a line-height equal to the inner height (48 px − 2 × 1.5 px border) centres it vertically in every browser. */
.field-row input[type="date"] { line-height: 45px; padding-top: 0; padding-bottom: 0; }
.field-row input::-webkit-date-and-time-value { text-align: left; margin: 0; line-height: 45px; min-height: 45px; }
@media (max-width: 359px) { .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; } }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 1rem; margin: 16px 0; cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--turquoise); }

/* Errors: red border, text stays night blue on white. */
.error { background: var(--white); border: 2px solid var(--red); border-left-width: 8px; color: var(--night); font-weight: 600; padding: 10px 12px; margin: 10px 0; border-radius: 10px; }
/* One per field, right under it (Ida/Vuelta: under the whole row). Same look, a little smaller. */
.field-error { background: var(--white); border: 2px solid var(--red); border-left-width: 6px; color: var(--night); font-weight: 600; font-size: 0.92rem; line-height: 1.4;
  padding: 8px 10px; margin: 6px 0 10px; border-radius: 10px; }
.field-error .error-action { display: inline; min-height: 44px; text-align: left; text-decoration: underline; }
.travelers .field-error { margin: 0; }
.field-hint { margin: -2px 0 6px; }
.max-travelers { margin: 6px 0 0; font-weight: 600; }
.details-status:empty { display: none; }
.details-status { text-align: left; color: var(--night); font-weight: 600; margin: 0 0 12px; }

/* ---------- 1. hero + quote form ---------- */
.hero { position: relative; overflow: hidden; padding: 10px 0 32px; }
.hero h1 { font-size: clamp(1.6rem, 7.4vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 6px; text-wrap: balance; }
.claim-part { display: block; } /* always two lines: "Travel wild. / We've got you." (never a lonely "you.") */
/* Large bold text, so turquoise #0E7C86 on sky passes AA for large text (4.38:1 ≥ 3:1). */
.hero-tagline { font-family: var(--font-headings); font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--turquoise); margin: 2px 0 4px; }
.hero-sub { font-size: 0.95rem; line-height: 1.45; color: var(--secondary); margin-bottom: 10px; }
/* Phone: copy, then the WHOLE landscape as a band (a strip of sky on top holds the route), then the pass card standing on
   the ground: nothing overlaps the mountains. The turquoise behind the card continues the ground of the picture. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "scene" "form"; }
.hero-grid::after { content: ''; grid-area: form; margin: 0 -16px -32px; background: var(--turquoise); }
.hero-copy { grid-area: copy; position: relative; z-index: 1; }
.quote-card { grid-area: form; position: relative; z-index: 1; background: var(--white); border-radius: 16px; padding: 14px; }

/* Layered landscape behind the hero: 3 parallax layers (public/landing-fx.js moves them on scroll), one <g> per scene,
   cross-faded when a destination is picked. Absolutely placed, so it never moves the page (no layout shift). */
.hero-scene { grid-area: scene; position: relative; padding-top: 56px; margin: 0 -16px; overflow: hidden; pointer-events: none; }
.hero-scene::before { content: ''; display: block; aspect-ratio: 3 / 1; } /* the 1200×400 picture, shown whole */
.hero-scene .layer { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; aspect-ratio: 3 / 1; overflow: visible; }
.hero-scene .layer-far, .hero-scene .layer-mid { will-change: transform; }
.hero-scene .scene { opacity: 0; transition: opacity 0.7s ease; }
.hero-scene .scene.is-active { opacity: 1; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Slow sunrise from behind the hills (ease-out), then a soft warm glow fades in. Once per visit (public/sun-once.js
   adds .sun-seen on later loads); with reduced motion everything is simply shown in its final place. */
.hero-scene .sun-rise { animation: sunrise 3.5s 0.3s cubic-bezier(0.33, 1, 0.68, 1) both; }
@keyframes sunrise { from { transform: translateY(240px); } }
.hero-scene .sun-glow { animation: sun-glow 2.2s 1.8s ease-out both; }
@keyframes sun-glow { from { opacity: 0; } }
.sun-seen .hero-scene .sun-rise, .sun-seen .hero-scene .sun-glow { animation: none; }
/* Headline, form and route are there at once (no entrance animation): only the sun and the landscape move. */
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }

/* The form as a "travel pass": a stub on top, a dashed tear line and two half-circle notches cut at its ends. */
.pass { --pass-pad: 14px; --notch-y: calc(var(--pass-pad) + 61px);
  -webkit-mask: radial-gradient(circle 9px at 0 var(--notch-y), #0000 8.5px, #000 9px) left / 51% 100% no-repeat,
                radial-gradient(circle 9px at 100% var(--notch-y), #0000 8.5px, #000 9px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 9px at 0 var(--notch-y), #0000 8.5px, #000 9px) left / 51% 100% no-repeat,
                radial-gradient(circle 9px at 100% var(--notch-y), #0000 8.5px, #000 9px) right / 51% 100% no-repeat; }
/* Stub: "Calcula tu precio" (the form's heading) with "Seguros Wildpass" small underneath. Fixed line heights keep the
   tear line exactly at --notch-y. */
.pass-head { display: flex; flex-direction: column; gap: 2px; margin: calc(-1 * var(--pass-pad)) calc(-1 * var(--pass-pad)) 12px; padding: var(--pass-pad) var(--pass-pad) 10px;
  border-bottom: 2px dashed var(--border); border-radius: 16px 16px 0 0; background: var(--mint); font-family: var(--font-headings); font-weight: 700; }
.pass-title { font-size: 1.6rem; line-height: 32px; letter-spacing: -0.02em; color: var(--night); }
.pass-brand { font-size: 0.7rem; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--turquoise-text); }

/* Live price, right above "Ver mi precio": "Tu precio: desde X €" big in night blue, "plan Wild · 1 viajero" small under it.
   Both lines are always there (placeholder first), so the button never moves; digits roll like an odometer. */
.price-preview { display: grid; justify-items: center; margin: 4px 0 10px; text-align: center; }
.price-preview[hidden] { display: none; }
.pp-main { font-family: var(--font-headings); font-weight: 700; font-size: 1.35rem; line-height: 1.2; color: var(--night); }
.pp-sub { font-size: 0.85rem; line-height: 1.4; color: var(--secondary); }
.odo { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; }
.odo-strip { display: flex; flex-direction: column; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.odo-strip span { height: 1.2em; }

/* Route strip: Spain → destination on a dotted texture, the flight path draws itself and a little plane flies it. */
.route { grid-area: scene; align-self: start; position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: 0; padding: 4px 12px; border-radius: 14px;
  background: rgb(255 255 255 / 0.85); font-weight: 700; font-size: 0.85rem; color: var(--night); }
.route-map { flex: 1; min-width: 0; height: 48px; }
.route-from, .route-to { flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-to { flex: 0 1 auto; max-width: 55%; }
.route-map { min-width: 56px; }
.route-to { color: var(--secondary); }
.route.has-dest .route-to { color: var(--night); }
.route:not(.has-dest) { visibility: hidden; } /* nothing until a destination is chosen (space kept: no jump) */
#route-mask { transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1); }
.route.has-dest #route-mask { stroke-dashoffset: 0; }
.route-plane, .route-end { opacity: 0; transition: opacity 0.3s; }
.route.has-dest .route-plane, .route.has-dest .route-end { opacity: 1; }
.ages-field { margin-bottom: 6px; }
.ages-field legend { margin-bottom: 0; }
.field-help { margin: 0 0 6px; font-size: 0.85rem; color: var(--secondary); }

/* Searchable destination box (public/destination-picker.js) */
select[hidden] { display: none; } /* the plain <select> once the search box replaces it */
.combo { position: relative; }
.combo-input { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230B1F3A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.combo-input::placeholder { color: var(--secondary); opacity: 1; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--white); border: 1.5px solid var(--field-border); border-radius: 12px; padding: 4px 0; box-shadow: 0 12px 28px rgb(11 31 58 / 0.16); }
.combo-group { padding: 8px 14px 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary); }
.combo-option { padding: 10px 14px; min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.combo-option:hover { background: var(--sky); }
.combo-option.is-active { background: var(--mint); outline: 2px solid var(--turquoise); outline-offset: -2px; }
.combo-option[aria-selected="true"] { font-weight: 700; }
.combo-alias { margin-left: 6px; font-size: 0.85rem; font-weight: 400; color: var(--secondary); }
.combo-empty { padding: 12px 14px; color: var(--secondary); }
.travelers { display: grid; gap: 8px; }
/* "Viajero N" | age dropdown | remove button (rows 2+; row 1 keeps the column empty so dropdowns line up) */
.traveler-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 44px; gap: 6px; align-items: center; }
.traveler-row label { margin: 0; font-weight: 600; font-size: 0.95rem; }
.traveler-row select { font-weight: 600; }
.remove-age { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--secondary); display: inline-flex; align-items: center; justify-content: center; }
.remove-age:hover { color: var(--night); background: var(--sky); }
.add-traveler { min-height: 44px; margin-top: 0; padding: 0 4px; border: 0; background: none; color: var(--turquoise-text); font-weight: 700; }
.add-traveler:hover { text-decoration: underline; }
.form-note { font-size: 0.85rem; line-height: 1.35; color: var(--secondary); text-align: center; margin: 6px 0 0; }

/* ---------- 2. AI block ---------- */
.ai { background: var(--turquoise); color: var(--white); padding: 48px 0; }
.ai h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); color: var(--white); }
.ai-text { font-size: 1.05rem; max-width: 40rem; }
.showcase { margin: 28px 0 0; }
.showcase-label { display: inline-block; margin-bottom: 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
/* AI block: title, text, the chat (centred, max 640 px) and one compatibility line. */
.ai { text-align: center; }
.ai-text { margin-left: auto; margin-right: auto; }
.showcase { max-width: 640px; margin-left: auto; margin-right: auto; text-align: left; }
/* Example chat. Every bubble is in the page from the start (final state). While playing, unplayed ones take no space,
   but the white box keeps its final height (min-height set by landing-fx.js), so there is no turquoise gap and nothing
   below moves. Typed text = visible part + transparent rest. */
.chat { list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--white); color: var(--night); border-radius: 18px; }
.bubble { position: relative; max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 0.95rem; line-height: 1.4;
  transition: opacity 0.35s, transform 0.35s; }
.bubble-user { align-self: flex-end; background: var(--turquoise); color: var(--white); border-bottom-right-radius: 4px; }
.bubble-assistant { align-self: flex-start; background: var(--sky); border-bottom-left-radius: 4px; }
.bubble-done { align-self: center; background: var(--mint); color: var(--turquoise-text); font-weight: 700; border-radius: 999px; }
.is-playing .bubble:not(.is-shown) { display: none; } /* not there yet: the white box only grows as messages arrive */
.is-playing .bubble.is-shown { animation: bubble-in 0.35s ease both; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px); } }
.bubble .rest { color: transparent; }
.bubble.is-typing .typed::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-right: -2px; vertical-align: text-bottom; background: currentColor; animation: blink 0.9s steps(1) infinite; }
.bubble.is-thinking .bubble-text { color: transparent; }
.bubble.is-thinking::after { content: '•••'; position: absolute; left: 14px; top: 10px; letter-spacing: 0.2em; color: var(--secondary); animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.showcase-replay { display: flex; margin: 12px auto 0; }
.showcase-replay[hidden] { display: none; }
/* /agentes page: example prompt card and the tool list (built from the real WebMCP tools). */
.prompt-card { margin: 0; background: var(--sky); color: var(--night); border-radius: 16px; padding: 16px; }
.prompt-card :focus-visible { outline-color: var(--night); }
.prompt-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--secondary); }
.prompt-text { margin: 6px 0 14px; font-size: 1.05rem; line-height: 1.45; quotes: "“" "”"; }
.prompt-text::before { content: open-quote; } .prompt-text::after { content: close-quote; }
.copy-prompt { min-height: 44px; padding: 8px 20px; font-size: 1rem; }
.ai-note { font-size: 0.95rem; margin: 16px auto 0; max-width: 40rem; }
.ai-agents { font-size: 0.95rem; margin: 20px auto 0; max-width: 40rem; }
.ai-agents a { color: var(--white); font-weight: 600; text-underline-offset: 3px; }
.card-page .ai-note { margin-left: 0; color: var(--secondary); }
.dev-tool-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 8px; }
/* /agentes: an index to the two parts, each part a block with its own heading. */
.agents-index { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 12px 0 8px; }
.agents-index a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; border: 2px solid var(--night); border-radius: 999px; color: var(--night); font-weight: 700; text-decoration: none; }
.agents-index a:hover { background: var(--mint); }
.agents-part { margin-top: 28px; padding-top: 4px; border-top: 2px solid var(--border); }
.agents-part h3 { font-size: 1.15rem; margin: 22px 0 8px; }
.agents-can { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.agents-safety, .agent-no-card { margin: 16px 0 0; padding: 12px 14px; border-left: 4px solid var(--turquoise); border-radius: 8px; background: var(--mint); color: var(--night); font-weight: 600; }
.agents-chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.agents-chat li { max-width: 34rem; padding: 10px 14px; border-radius: 14px; background: var(--sky); }
.agents-chat .from-you { justify-self: end; background: var(--mint); }
.dev-flow { line-height: 1.9; }
.dev-errors { margin: 6px 0 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.code-card { margin: 14px 0 0; }
.code-card figcaption { font-weight: 700; margin-bottom: 6px; }
.code-card pre { margin: 0 0 8px; padding: 14px; border-radius: 12px; background: var(--night); color: var(--white); overflow-x: auto; font-size: 0.85rem; line-height: 1.5; }
.card-page .code-card code { font-weight: 400; overflow-wrap: normal; }
.copy-code { min-height: 44px; padding: 8px 18px; font-size: 0.95rem; }
.dev-rules { margin: 6px 0 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.card-page code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- trust strip: 4 white cards on sky, each icon in a soft mint circle. Phones 2×2 (icon on top, centred,
   short text, max 2 lines); computers 4 in a row (icon left). ---------- */
.trust { background: var(--sky); padding: 16px 0; }
.trust-list { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.trust-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; background: var(--white); border-radius: 16px; text-align: center; font-size: 0.9rem; font-weight: 700; line-height: 1.3; color: var(--night); }
.trust-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--mint); color: var(--turquoise-text); }
.trust-icon .icon { width: 26px; height: 26px; }
.trust-long { display: none; }
@media (max-width: 359px) { .trust-item { padding: 12px 8px; font-size: 0.85rem; } }
@media (min-width: 600px) { .trust-long { display: inline; } .trust-short { display: none; } }
@media (min-width: 700px) {
  .trust { padding: 28px 0; }
  .trust-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .trust-item { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 18px; text-align: left; font-size: 1rem; }
  .trust-icon { width: 56px; height: 56px; }
  .trust-icon .icon { width: 30px; height: 30px; }
}
.plans-more { text-align: center; margin: 18px 0 0; }

/* ---------- 3. editorial + benefits ---------- */
.editorial { background: var(--white); padding: 56px 0; text-align: center; }
.eyebrow { color: var(--turquoise-text); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.big-headline { font-size: clamp(2rem, 8vw, 3.4rem); max-width: 18ch; margin: 0 auto 36px; letter-spacing: -0.02em; }
.benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: 36px; }
.benefit svg { width: 96px; height: 96px; margin-bottom: 10px; }
.benefit h3 { font-size: 1.2rem; margin-bottom: 6px; }
.benefit p { color: var(--secondary); max-width: 22rem; margin: 0 auto; }
/* Phones: compact rows, small picture on the left, title and text on the right. */
@media (max-width: 699px) {
  .benefits { gap: 22px; text-align: left; }
  .benefit { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .benefit svg { grid-row: span 2; width: 56px; height: 56px; margin: 0; }
  .benefit h3 { font-size: 1.05rem; margin: 2px 0 2px; }
  .benefit p { max-width: none; margin: 0; font-size: 0.95rem; }
}

/* ---------- 4. plans band ---------- */
.plans-band { background: var(--mint); padding: 48px 0; }
.plans-band h2 { text-align: center; font-size: clamp(1.6rem, 6vw, 2.4rem); margin-bottom: 24px; }
/* Equal-height cards: the description grows, so prices and buttons line up at the bottom of every card. */
.plan-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; }
.plan-card { position: relative; min-width: 0; background: var(--white); border-radius: 16px; padding: 24px 20px 20px; border: 2px solid transparent; display: flex; flex-direction: column; }
.plan-card.featured { border-color: var(--turquoise); }
.plan-card h3 { font-size: 1.5rem; margin-bottom: 4px; }
.plan-card p { margin-bottom: 8px; }
.plan-card .desc { flex-grow: 1; }
.from-price { font-family: var(--font-headings); font-weight: 700; font-size: 1.6rem; white-space: nowrap; margin: 4px 0 14px !important; }
.from-price sup { font-size: 0.9rem; }
.card-button { margin-top: auto; }
/* Badge: turquoise pill with white text, sitting on the card's top edge (so it never pushes the content down). */
.badge { position: absolute; top: 0; left: 18px; transform: translateY(-50%); margin: 0 !important; background: var(--turquoise); color: var(--white);
  font-weight: 700; font-size: 0.8rem; line-height: 1.2; border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.from-note { text-align: center; font-size: 0.85rem; color: var(--secondary); margin: 14px 0 0; }

/* ---------- 5. FAQ + final CTA ---------- */
.faq { padding: 48px 0; }
.faq h2 { text-align: center; font-size: clamp(1.6rem, 6vw, 2.2rem); margin-bottom: 20px; }
.faq-toggle-row { text-align: center; margin: 0 0 20px; }
.faq-list[hidden] { display: none; }
.faq-item { background: var(--white); border-radius: 12px; margin: 0 0 10px; }
.faq-item a { color: var(--turquoise-text); }
.faq-item summary { position: relative; list-style: none; cursor: pointer; min-height: 56px; padding: 15px 52px 15px 16px; font-weight: 700; border-radius: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--turquoise-text); }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { padding: 0 16px 16px; margin: 0; color: var(--secondary); }
/* Smooth open/close (browsers with ::details-content: Chrome, Edge, Safari 18.4+; others simply open at once). */
.faq-item { interpolate-size: allow-keywords; }
.faq-item::details-content { height: 0; overflow: clip; transition: height 0.3s ease, content-visibility 0.3s allow-discrete; }
.faq-item[open]::details-content { height: auto; }
.final-cta { background: var(--turquoise); padding: 48px 0; text-align: center; }
.final-cta h2 { color: var(--white); font-size: clamp(1.8rem, 7vw, 2.6rem); margin-bottom: 18px; }

/* ---------- footer ---------- */
.site-footer { background: var(--night); color: var(--white); padding: 28px 0 36px; font-size: 0.9rem; }
.site-footer a { color: var(--white); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.footer-links a, .footer-links span { display: inline-flex; align-items: center; min-height: 44px; }
/* ---------- "Tu asistente está usando Wildpass": only after a real WebMCP tool call (public/agent-pill.js) ---------- */
.agent-pill { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  max-width: calc(100vw - 32px); animation: slide-up 0.25s ease both; }
.agent-pill[hidden] { display: none; }
.agent-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--night);
  background: var(--night); color: var(--white); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgb(11 31 58 / 0.25); }
.agent-toggle:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }
.agent-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); flex: none; }
.agent-pill.is-active .agent-dot { animation: agent-pulse 1.2s ease-in-out infinite; }
@keyframes agent-pulse { 50% { opacity: 0.35; transform: scale(0.7); } }
.agent-count { min-width: 1.5em; padding: 0 6px; border-radius: 999px; background: var(--white); color: var(--night); font-size: 0.75rem; text-align: center; }
.agent-count:empty { display: none; }
.agent-log { width: min(320px, calc(100vw - 32px)); max-height: min(50vh, 320px); overflow-y: auto; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border);
  background: var(--white); color: var(--night); box-shadow: 0 10px 30px rgb(11 31 58 / 0.2); }
.agent-log[hidden] { display: none; }
.agent-log-title { margin: 0 0 8px; font-weight: 700; }
.agent-log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.9rem; }
.agent-log time { color: var(--secondary); font-variant-numeric: tabular-nums; margin-right: 4px; }
/* Checkout: a floating bubble would sit on some button while scrolling, so it docks as a slim strip on top of the
   total bar (one fixed bottom block), and the page gets matching extra room so every button can scroll clear of it. */
html:has(#checkout:not([hidden])) .agent-pill { left: 0; right: 0; bottom: var(--total-bar-h, 65px); max-width: none; align-items: stretch; gap: 0; animation: none; }
html:has(#checkout:not([hidden])) .agent-toggle { justify-content: center; border-radius: 0; min-height: 40px; padding: 6px 16px; box-shadow: none; font-size: 0.85rem; }
html:has(#checkout:not([hidden])) .agent-log { margin: 0 16px 8px; align-self: flex-end; }
html:has(#checkout:not([hidden])):has(.agent-pill:not([hidden])) .checkout-wrap { padding-bottom: 160px; }
html:has(#checkout:not([hidden])):has(.agent-pill:not([hidden])) { scroll-padding-bottom: 130px; }
html:has(.agent-pill:not([hidden])) .site-footer { padding-bottom: 90px; }
@media (max-width: 699px) {
  html:has(.sticky-cta:not([hidden])) .agent-pill { bottom: calc(84px + env(safe-area-inset-bottom)); }
  html:has(.agent-pill:not([hidden])) .site-footer { padding-bottom: 170px; }
}

/* ---------- simple pages (terms) ---------- */
.page { padding: 16px 0 40px; }
.card-page { background: var(--white); border-radius: 16px; padding: 8px 18px 20px; }
.card-page h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); margin-top: 16px; }
.card-page h2 { margin-top: 24px; }
.table-wrap { overflow-x: auto; }
.data-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.data-table th, .data-table td { border-bottom: 1px solid var(--border); padding: 8px; text-align: left; vertical-align: top; }
.data-table thead th { background: var(--sky); white-space: nowrap; }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table .strong { font-weight: 700; }

/* ---------- checkout ---------- */
.checkout-wrap { padding-top: 16px; padding-bottom: 96px; } /* room for the action bar */
.progress { margin-bottom: 8px; }
.progress-text { font-weight: 700; font-size: 0.9rem; margin: 0 0 6px; }
.progress-bar { height: 8px; background: var(--white); border-radius: 999px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 25%; background: var(--turquoise); border-radius: 999px; transition: width 0.25s; }
.step h2 { font-size: clamp(1.6rem, 6.5vw, 2.3rem); margin-top: 4px; }
.step h2:focus { outline: none; }

/* Trip summary card (steps 1–3) */
.trip-card { position: relative; background: var(--white); border-radius: 16px; box-shadow: 0 4px 18px rgba(11, 31, 58, 0.08); padding: 12px 16px; margin: 0 0 16px; }
.trip-card dl { margin: 0; display: grid; gap: 8px; }
.trip-item { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; align-items: start; padding-right: 64px; }
.trip-item .icon { grid-row: span 2; color: var(--turquoise-text); margin-top: 2px; }
.trip-item dt { font-size: 0.75rem; font-weight: 700; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.trip-item dd { margin: 0; font-weight: 600; }
.edit-trip { position: absolute; top: 6px; right: 12px; padding: 0 6px; text-decoration: underline; }

/* Plan comparison: the SAME two cards at every width. ≥600 px side by side (subgrid aligns each coverage row across both
   cards); phones one under the other at full width, with room above Wild+ for its badge. No phone-only layout. */
.plan-compare { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin: 22px 0 12px; }
@media (min-width: 600px) { .plan-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 0; } }
.plan-option { position: relative; display: grid; grid-row: span 9; grid-template-rows: subgrid; row-gap: 0; min-width: 0; /* name, price, 6 coverage rows, button */
  background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 24px 16px 16px; text-align: left; }
.plan-option.featured { background: var(--mint); border: 2px solid var(--turquoise); padding: 23px 15px 15px; }
/* The marked plan (step 1): a thick night ring around its card. */
.plan-option { cursor: pointer; }
.plan-option.is-selected { box-shadow: 0 0 0 3px var(--night); }
.selected-note { font-family: var(--font-text); font-size: 0.8rem; font-weight: 700; color: var(--turquoise-text); }
.plan-option .badge { left: 50%; transform: translate(-50%, -50%); font-size: 0.72rem; padding: 4px 10px; white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 12px); }
.plan-option h3 { font-size: 1.35rem; margin: 0; }
.plan-price { font-family: var(--font-headings); font-weight: 700; font-size: 1.6rem; margin: 2px 0 6px; }
.plan-option dl { display: grid; grid-template-rows: subgrid; grid-row: span 6; margin: 0; }
.plan-option .feature { padding: 10px 0; border-top: 1px solid var(--border); }
.plan-option.featured .feature { border-top-color: #A9D8D4; }
.plan-option dt { font-size: 0.7rem; font-weight: 700; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; margin-bottom: 2px; }
.plan-option dd { margin: 0; font-weight: 600; font-size: 0.95rem; line-height: 1.35; overflow-wrap: anywhere; }
.plan-option .primary, .plan-option .secondary { width: 100%; min-height: 52px; padding: 10px 6px; font-size: 1rem; margin-top: 12px; align-self: end; }
/* Phones: a compact first screen, so "Ver mi precio" shows without scrolling on a 375×812 phone. The landscape stays
   whole: only flat ground is cropped off its bottom, and the (smaller) route strip covers nothing but sky. */
@media (max-width: 599px) {
  .site-header .wrap { padding-top: 4px; padding-bottom: 4px; }
  .hero { padding-top: 6px; }
  .hero h1 { font-size: clamp(1.4rem, 6.6vw, 1.75rem); margin-bottom: 4px; }
  .hero-tagline { font-size: 1.2rem; margin: 0 0 2px; }
  .hero-sub { font-size: 0.85rem; line-height: 1.35; margin-bottom: 2px; }
  .hero-scene { padding-top: 20px; }
  .hero-scene::before { aspect-ratio: 3 / 0.92; } /* the picture's last 8 %: plain ground, continued behind the card */
  .hero-scene .layer { top: 20px; bottom: auto; }
  .hero-scene .sun-pos { transform: translateY(-34px); } /* phones: the whole sun clears the hills */
  .route { padding: 2px 10px; }
  .route-map { height: 32px; }
  .quote-card { padding: 12px; }
  .pass { --pass-pad: 12px; --notch-y: calc(var(--pass-pad) + 53px); }
  .pass-head { padding-bottom: 8px; margin-bottom: 8px; }
  .pass-title { font-size: 1.45rem; line-height: 28px; }
  .pass-brand { font-size: 0.65rem; line-height: 14px; }
  .field { margin-bottom: 6px; }
  .field-help { margin-bottom: 4px; }
  .price-preview { margin: 0 0 8px; }
  .pp-main { font-size: 1.2rem; }
  .pp-sub { font-size: 0.8rem; line-height: 1.35; }
}

/* Exclusions: closed by default; one minus icon per line. */
.exclusions { background: var(--white); border-radius: 16px; margin: 4px 0 16px; }
.exclusions summary { position: relative; list-style: none; cursor: pointer; min-height: 56px; padding: 16px 52px 16px 16px; font-weight: 700; border-radius: 16px; }
.exclusions summary::-webkit-details-marker { display: none; }
.exclusions summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--turquoise-text); }
.exclusions[open] summary::after { content: '−'; }
.exclusion-group { padding: 0 16px 14px; }
.exclusion-group h3 { font-family: var(--font-text); font-size: 0.8rem; font-weight: 700; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.04em; margin: 6px 0 8px; }
.exclusion-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.exclusion-group li { position: relative; padding-left: 28px; font-size: 0.95rem; line-height: 1.45; }
.exclusion-group li::before { content: ''; position: absolute; left: 2px; top: 0.3em; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--secondary);
  background: linear-gradient(var(--secondary), var(--secondary)) center / 8px 1.5px no-repeat; }

.person { background: var(--white); border-radius: 16px; padding: 14px; margin: 0 0 12px; }
.person legend { float: left; width: 100%; font-size: 1.05rem; margin-bottom: 10px; }
.person legend + * { clear: both; }
.person .check { margin: 0 0 10px; font-size: 0.95rem; }

.summary { background: var(--white); border-radius: 16px; padding: 6px 16px 14px; }
.summary dl { margin: 0; }
.summary .row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.summary dt { color: var(--secondary); font-weight: 600; font-size: 0.9rem; }
.summary dd { margin: 0; font-weight: 600; }
.summary h3 { font-size: 1.05rem; margin: 16px 0 6px; }
/* Stripe test-mode card form (Stripe's own frame inside a white card, like the summary). */
.card-payment { background: var(--white); border-radius: 16px; padding: 6px 16px 16px; margin-top: 16px; }
.card-payment .card-title { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; margin: 16px 0 12px; }
.card-title .icon { width: 28px; height: 28px; color: var(--turquoise-text); }
/* The only payment method, shown as a selected option (Stripe's card fields follow right under it). */
.pay-method { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 14px 16px; border: 2px solid var(--turquoise); border-radius: 12px; background: var(--mint); font-weight: 700; }
.pay-radio { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--turquoise); background: radial-gradient(var(--turquoise) 0 5px, var(--white) 6px); }
.pay-method .icon { color: var(--night); flex: none; }
.pay-method-name { flex: 1; min-width: 0; }
.pay-method-state { font-size: 0.8rem; font-weight: 700; color: var(--turquoise-text); }
@media (max-width: 359px) { .pay-method-state { display: none; } }
.card-payment #payment-element { min-height: 120px; }
.card-payment .stripe-note { text-align: left; margin-top: 12px; }
.summary ul { margin: 0; padding-left: 20px; }
.summary li { margin-bottom: 4px; }
.summary .people { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.summary .people th, .summary .people td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.summary .people .num { text-align: right; }
.summary .total-row { display: flex; justify-content: space-between; align-items: baseline; background: var(--mint); border-radius: 10px; padding: 12px; margin-top: 14px; font-weight: 700; }
.summary .total-row strong { font-family: var(--font-headings); font-size: 1.4rem; }
/* Step 3: compact summary card */
.review-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; }
.review-head h3 { margin: 0; font-size: 1.15rem; }
.review-head .link-button { text-decoration: underline; padding: 0 6px; }
.review-card .row { grid-template-columns: 7rem 1fr; padding: 7px 0; }
.review-card dd { overflow-wrap: anywhere; }
.review-zone { margin: 10px 0 8px; font-size: 0.9rem; font-weight: 600; color: var(--secondary); }
.summary .chips { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.summary .chip { margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--mint); color: var(--night); font-size: 0.85rem; font-weight: 700; }
.review-more { border-top: 1px solid var(--border); }
.review-more summary { position: relative; list-style: none; cursor: pointer; min-height: 48px; padding: 13px 40px 13px 0; font-weight: 700; }
.review-more summary::-webkit-details-marker { display: none; }
.review-more summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--turquoise-text); }
.review-more[open] summary::after { content: '−'; }
.review-more ul { margin: 0 0 12px; font-size: 0.92rem; }
.review-more p { margin: 0 0 12px; }
/* "Pagar X €" with "Póliza al instante en tu email" next to it; under it, while disabled, "Acepta las condiciones para pagar". */
.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pay-row .primary { flex: 1 1 240px; }
.pay-instant { margin: 0; font-weight: 600; color: var(--turquoise-text); }
.pay-hint { text-align: left; margin-top: 8px; }
.pay-hint[hidden] { display: none; }
/* Step 1: what Wild+ costs on top of Wild. */
/* Computers: summary on the left, payment on the right, so the card form is on the first screen (1440×900). */
@media (min-width: 960px) {
  html:has(#step-3:not([hidden])) .checkout-wrap { max-width: 72rem; }
  #step-3:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  #step-3 > h2 { grid-column: 1 / -1; }
  #step-3 .card-payment { margin-top: 0; }
}
.plan-diff { margin: 0 0 6px; font-size: 0.85rem; font-weight: 700; color: var(--turquoise-text); }
.plan-price-box .plan-price { margin-bottom: 0; }

.policy-number { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary); }
.policy-number strong { display: block; margin-top: 2px; font-family: var(--font-headings); font-size: 1.7rem; letter-spacing: 0.04em; color: var(--night); text-transform: none; }

/* Success screen: a boarding pass. Main part + stub, separated by a perforated (dashed + notched) line. */
.boarding { display: grid; grid-template-columns: minmax(0, 1fr); margin: 8px 0 4px; }
/* Each half is white and has quarter-circle cuts at the shared edge: together they make the two ticket notches. */
.boarding-main, .boarding-stub { background: var(--white); }
.boarding-main { border-radius: 18px 18px 0 0;
  -webkit-mask: radial-gradient(circle 11px at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat; }
.boarding-stub { border-radius: 0 0 18px 18px;
  -webkit-mask: radial-gradient(circle 11px at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat; }
.boarding-main { position: relative; padding: 16px 18px 18px; }
.boarding-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; font-family: var(--font-headings); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--turquoise-text); }
.boarding-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0; }
.boarding-grid .b-wide { grid-column: 1 / -1; padding-right: 128px; }
.boarding-grid dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary); }
.boarding-grid dd { margin: 2px 0 0; font-family: var(--font-headings); font-weight: 700; font-size: 1.15rem; overflow-wrap: anywhere; }
.done-name { display: block; }
@media (max-width: 479px) { .boarding-head span + span { display: none; } }
.boarding-stub { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num num" "note qr"; column-gap: 16px; row-gap: 10px; align-items: end;
  padding: 18px; border-top: 2px dashed var(--border); }
.boarding-stub .policy-number { grid-area: num; }
.qr { grid-area: qr; width: 112px; height: 112px; }
.qr svg { display: block; width: 100%; height: 100%; }
.qr-note { grid-area: note; margin: 0; font-size: 0.85rem; color: var(--secondary); }
/* "CUBIERTO" stamp: lands with a thump once (static with reduced motion). */
.stamp { position: absolute; right: 14px; top: 52px; margin: 0; padding: 4px 12px; border: 3px solid var(--turquoise-text); border-radius: 8px;
  font-family: var(--font-headings); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--turquoise-text);
  transform: rotate(-12deg); opacity: 0.9; animation: stamp 0.5s 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) both; pointer-events: none; }
@keyframes stamp { from { transform: rotate(-12deg) scale(2.4); opacity: 0; } }
.confetti { position: fixed; left: 50%; top: 40%; width: 0; height: 0; z-index: 60; pointer-events: none; }
.confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: confetti 1.8s var(--d) cubic-bezier(0.2, 0.6, 0.4, 1) forwards; }
@keyframes confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  45% { opacity: 1; transform: translate(calc(var(--x) * 0.8), var(--y)) rotate(calc(var(--r) * 0.5)); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 340px)) rotate(var(--r)); } }

/* ---------- "¿Y si…?" scenarios ---------- */
.section-intro { color: var(--secondary); font-size: 1.05rem; margin: 0 0 20px; }
.whatif { padding: 48px 0; }
.whatif h2, .destinations h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); margin-bottom: 6px; }
/* Category filter: text buttons with a turquoise underline when on. */
.whatif-filters { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 10px; }
.whatif-filter { min-height: 44px; padding: 6px 2px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--secondary); font-weight: 700; font-size: 0.95rem; }
.whatif-filter:hover { color: var(--night); }
.whatif-filter[aria-pressed="true"] { color: var(--night); border-bottom-color: var(--turquoise); }
/* Chips: one row that scrolls sideways on phones and tablets (first chip on the content edge, a fade + a hint say there are
   more); computers show them all, wrapped. */
.whatif-tabs-box { position: relative; --edge: max(16px, calc((100% - 72rem) / 2 + 16px)); }
.whatif-tabs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--edge); padding: 2px var(--edge) 8px; scrollbar-width: none; }
.whatif-tabs::-webkit-scrollbar { display: none; }
.whatif-tabs-box::before, .whatif-tabs-box::after { content: ''; position: absolute; top: 0; bottom: 8px; width: 40px; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.whatif-tabs-box::before { left: 0; background: linear-gradient(to left, transparent, var(--sky)); }
.whatif-tabs-box::after { right: 0; background: linear-gradient(to right, transparent, var(--sky)); }
.whatif-tabs-box.more-left::before, .whatif-tabs-box.more-right::after { opacity: 1; }
.whatif-tab { flex: none; scroll-snap-align: start; min-height: 44px; padding: 8px 16px; border: 2px solid var(--night); border-radius: 999px; background: var(--white); color: var(--night); font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.whatif-tab:hover { background: var(--mint); }
.whatif-tab[aria-selected="true"] { background: var(--night); color: var(--white); }
.whatif-tab[hidden] { display: none; }
.whatif-hint { margin: 0 auto 10px; font-size: 0.85rem; color: var(--secondary); visibility: hidden; } /* reserved space: no shift */
.whatif-tabs-box.scrolls + .whatif-hint { visibility: visible; }
/* ONE card: every panel sits in the same grid cell, so the box keeps the tallest one's height and nothing below moves. */
.whatif-panels { display: grid; }
.whatif-panel { grid-area: 1 / 1; background: var(--white); border-radius: 18px; padding: 20px; }
.whatif-panel[hidden] { display: block; visibility: hidden; }
.whatif-panel:not([hidden]) { animation: rise-in 0.35s ease both; }
.whatif-cat { margin: 0 0 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--turquoise-text); }
.whatif-panel h3 { font-size: 1.3rem; margin: 0 0 8px; }
.whatif-panel .verdicts { margin-top: 14px; }
@media (min-width: 700px) {
  .whatif-panel, .whatif-panel[hidden] { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 36px; padding: 28px 32px; }
  .whatif-panel > * { grid-column: 1; }
  .whatif-panel .verdicts { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
}
@media (min-width: 960px) {
  .whatif-tabs { flex-wrap: wrap; overflow: visible; }
  .whatif-tabs-box::before, .whatif-tabs-box::after { display: none; }
  .whatif-hint { display: none; }
}
.whatif-figure { margin: 0 0 10px; color: var(--turquoise-text); font-weight: 600; font-size: 0.9rem; }
.whatif-figure .count { display: inline-block; font-family: var(--font-headings); font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--night); }
.whatif-figure-label { display: block; }
.whatif-text { margin: 10px 0 0; font-size: 1rem; color: var(--secondary); }
.verdicts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.verdict { display: grid; grid-template-columns: 3.6rem auto; justify-content: start; align-items: center; gap: 4px 10px; padding: 8px 12px; border-radius: 10px; background: var(--sky); }
/* Badges as wide as their words, never stretched. */
.verdict-state { justify-self: start; font-weight: 700; font-size: 0.85rem; padding: 1px 10px; border-radius: 999px; }
.verdict.is-ok .verdict-state { background: var(--turquoise); color: var(--white); }
.verdict.is-no .verdict-state { background: var(--white); color: var(--night); border: 1.5px solid var(--secondary); }
.verdict-text { grid-column: 1 / -1; font-size: 0.9rem; color: var(--secondary); }
.whatif-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.whatif-note { margin: 0; font-size: 0.9rem; color: var(--secondary); }
.whatif-note a { color: var(--turquoise-text); font-weight: 700; }

/* ---------- destinations strip ---------- */
.destinations { padding: 8px 0 48px; }
/* Carousels ("¿Y si…?", destinations). The strip runs the full width of the screen, but its first card lines up with the
   page's content edge (16 px on phones, the 72rem column on computers). Phones swipe; computers get ‹ › buttons. */
.carousel { position: relative; --edge: max(16px, calc((100% - 72rem) / 2 + 16px)); }
.carousel-strip { list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0; padding: 4px var(--edge) 12px;
  scroll-padding: 0 var(--edge); scrollbar-width: none; }
.carousel-strip::-webkit-scrollbar { display: none; }
.dest-strip li, #dest-strip > li { flex: none; width: 46vw; max-width: 220px; scroll-snap-align: start; }
/* "There is more": a thin line under the strip whose dark part shows where you are. */
.carousel-progress { position: relative; height: 4px; margin: 2px var(--edge) 0; border-radius: 999px; background: rgb(11 31 58 / 0.12); overflow: hidden; }
.carousel-progress[hidden] { display: none; }
.carousel-progress span { position: absolute; top: 0; bottom: 0; left: calc((100% - var(--thumb, 30%)) * var(--pos, 0)); width: var(--thumb, 30%); border-radius: 999px; background: var(--night); }
.carousel-hint { margin: 8px auto 0; font-size: 0.85rem; color: var(--secondary); }
.carousel-arrow { display: none; }
@media (min-width: 700px) {
  .carousel-arrow:not([hidden]) { display: grid; place-items: center; position: absolute; top: calc(50% - 30px); z-index: 2; width: 48px; height: 48px; padding: 0;
    border: 2px solid var(--night); border-radius: 50%; background: var(--white); color: var(--night); cursor: pointer; box-shadow: 0 4px 14px rgb(11 31 58 / 0.18); }
  .carousel-prev { left: 12px; }
  .carousel-next { right: 12px; }
  .carousel-arrow:disabled { opacity: 0; pointer-events: none; }
  .carousel-arrow:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }
  #dest-strip > li { width: 200px; }
}
.dest-card { display: flex; flex-direction: column; width: 100%; padding: 0 0 12px; border: 2px solid var(--border); border-radius: 16px; background: var(--white); overflow: hidden; text-align: left; color: var(--night);
  transition: transform 0.15s ease, border-color 0.15s ease; }
.dest-card:hover { border-color: var(--turquoise); transform: translateY(-2px); }
.dest-card:active { transform: translateY(1px) scale(0.98); }
.mini-scene { display: block; width: 100%; height: 96px; }
.dest-name { padding: 10px 12px 0; font-family: var(--font-headings); font-weight: 700; font-size: 1.1rem; }
.dest-price { padding: 0 12px; font-size: 0.9rem; color: var(--secondary); }
.dest-price-plus { color: var(--turquoise-text); font-weight: 600; }
.dest-note { margin-top: 6px; font-size: 0.85rem; color: var(--secondary); }

/* ---------- scroll reveal + sticky bar ---------- */
.reveal { transition: opacity 0.7s ease; }
.reveal:not(.is-in) { opacity: 0; } /* fade only: moving whole sections would count as layout shift */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--border);
  animation: slide-up 0.25s ease both; }
@keyframes slide-up { from { transform: translateY(100%); } }
@media (min-width: 700px) { .sticky-cta { display: none; } }
@media (max-width: 699px) { html:has(.sticky-cta:not([hidden])) body { padding-bottom: 80px; } } /* room for the bar: it never covers content */
#step-4 .primary { margin: 14px 0; }

/* Action bar (checkout): ONE row, 64 px plus the phone's safe area. Total on the left, the step's button (≥ 44 px) on the right. */
.total-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--white); border-top: 1px solid var(--border); padding: 0 0 env(safe-area-inset-bottom); }
.bar-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 63px; } /* + 1 px border = 64 */
.bar-total { display: flex; flex-direction: column; min-width: 0; margin: 0; line-height: 1.15; }
.bar-total span { font-size: 0.8rem; font-weight: 600; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-total strong { font-family: var(--font-headings); font-size: 1.35rem; white-space: nowrap; }
.bar-action { flex: none; min-height: 48px; max-width: 62%; padding: 8px 18px; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-action[hidden] { display: none; }
@media (max-width: 359px) { .bar-action { padding: 8px 12px; font-size: 0.95rem; } .bar-total strong { font-size: 1.2rem; } }

/* ---------- wider screens ---------- */
@media (min-width: 700px) {
  .benefits { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 46rem; margin: 0 auto; }
  .plan-card { padding: 24px 16px 18px; }
  .chat { padding: 20px; }
  .bubble { max-width: 78%; }
  .card-page { padding: 12px 32px 28px; }
  .trip-card { padding: 14px 96px 14px 18px; }
  .trip-card dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .trip-item { padding-right: 0; }
  .edit-trip { top: 50%; transform: translateY(-50%); }
  .boarding-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .boarding-stub { grid-template-areas: "num qr" "note qr"; align-items: start; }
  .boarding-stub .qr-note { align-self: end; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .from-price { font-size: 1.3rem; }
  .plan-card h3 { font-size: 1.3rem; }
}
@media (min-width: 960px) {
  .site-header .wrap { padding-top: 8px; padding-bottom: 8px; }
  .logo svg { width: 40px; height: 40px; }
  .logo .wordmark { font-size: 1.7rem; }
  .logo .tagline { font-size: 0.8rem; }
  /* The landscape keeps its 3:1 shape at every width (sun and pines never cut), and the hero leaves room under the card
     for the bottom quarter of the picture, where the pines stand. */
  .hero { --scene-h: max(380px, 33.34vw); padding: 56px 0 calc(var(--scene-h) * 0.27 + 16px); }
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; grid-template-rows: auto 1fr; grid-template-areas: "copy form" "route form"; column-gap: 56px; align-items: start; }
  .hero-copy { align-self: end; }
  .route { grid-area: route; align-self: start; max-width: 30rem; margin-top: 18px; }
  /* Desktop: the landscape fills the bottom of the whole hero, behind the copy and the card. */
  .hero-scene { position: absolute; left: 0; right: 0; bottom: 0; height: var(--scene-h); margin: 0; padding: 0; }
  .hero-scene::before, .hero-grid::after { display: none; }
  .hero-scene .layer { inset: 0; height: 100%; aspect-ratio: auto; }
  .hero-tagline { font-size: 1.75rem; margin: 6px 0 8px; }
  .hero-sub { font-size: 1.15rem; max-width: 30rem; }
  .quote-card { padding: 24px; }
  .pass { --pass-pad: 24px; }
  .ai { padding: 72px 0; }
  .editorial, .plans-band { padding: 80px 0; }
  .final-cta { padding: 72px 0; }
}

/* ---------- /condiciones: index, Wild vs Wild+ table, closing CTA ---------- */
.terms-index { margin: 16px 0 8px; padding: 14px 18px; background: var(--sky); border-radius: 12px; }
.terms-index-label { margin: 0 0 6px; font-weight: 700; }
.terms-index ol { margin: 0; padding-left: 1.3em; }
.terms-index li { margin: 4px 0; }
.terms-index a { color: var(--turquoise-text); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.terms-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; line-height: 1.35; }
.terms-table th, .terms-table td { padding: 9px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.terms-table thead th { font-family: var(--font-headings); font-size: 1rem; border-bottom: 2px solid var(--night); }
.terms-table thead th:last-child, .terms-table td:last-child { background: var(--mint); } /* Wild+ column, like its card */
.terms-table tbody th { font-weight: 600; color: var(--secondary); width: 34%; }
.terms-table :is(th, td):first-child { padding-left: 0; }
.page-cta { margin: 28px 0 8px; padding: 20px; background: var(--mint); border-radius: 14px; text-align: center; }
.page-cta p { margin: 0 0 14px; font-weight: 600; }
.terms-index a:focus-visible, .page-cta a:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; }
/* Phones: each row = the coverage name, then Wild | Wild+ side by side (each value labelled), so nothing is cut off. */
@media (max-width: 599px) {
  .terms-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .terms-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); padding: 10px 0; }
  .terms-table tbody :is(th, td) { border: 0; padding: 2px 8px 2px 0; }
  .terms-table tbody th { grid-column: 1 / -1; width: auto; color: var(--night); padding-bottom: 6px; }
  .terms-table td:last-child { background: var(--mint); border-radius: 8px; padding-left: 8px; }
  .terms-table td::before { content: attr(data-plan); display: block; font-size: 0.8rem; font-weight: 700; color: var(--secondary); }
}

/* ---------- 404 ---------- */
.not-found { text-align: center; padding: 16px 0 8px; }
.not-found svg { width: 140px; height: auto; margin: 8px auto 0; display: block; }
.not-found p { max-width: 32rem; margin-left: auto; margin-right: auto; }
.not-found-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
@media (min-width: 600px) { .terms-table { table-layout: fixed; } .terms-table thead th:first-child { width: 34%; } } /* Wild and Wild+ get equal columns */