/* Self-hosted fonts (the live CSP allows font-src 'self' but blocks Google Fonts).
   Variable woff2, latin subset — covers Spanish. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anek Latin";
  src: url("fonts/anek-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* === FONTPRELOAD-20261010 metric-matched fallbacks — safe to delete to revert. ===
   While the two woff2 files above are still in flight (font-display:swap), the stacks below fall to the
   system faces "Iowan Old Style" (serif) and "Avenir Next" (sans) on iOS/macOS. Declaring an @font-face
   with the SAME family name shadows the installed font for this document, so the fallback glyphs can be
   scaled to Fraunces/Anek widths and the swap no longer re-wraps lines (= no layout shift). Measured in
   Chromium on the live hero copy at 100px: Fraunces 580 = 1499.7, Iowan Roman = 1586.5 → size-adjust 94.5%
   (lands 1499.2); Fraunces 700 = 1495.8, Iowan Bold = 1710.4 → 87.4%; Anek 400 = 4975.1, Avenir Next
   Regular = 5779.6 → 86.1%; Anek 600 = 5246.5, Avenir Next DemiBold = 5846.7 → 89.7%. The ascent/descent/
   line-gap overrides are divided by size-adjust (Chromium scales them too) so the line box matches the
   web font's 98/26/0 (Fraunces) and 90/20/5 (Anek) at 100px. No italic faces on purpose: Fraunces and
   Anek have none here either, so both sides get the same synthesised oblique and identical widths.
   Windows (Palatino Linotype / Segoe UI) and Android (Noto) are not shadowed — not measurable from
   this Mac — they rely on the header preloads alone. Browsers without size-adjust (Safari < 17) ignore
   the descriptors and get the plain system font, exactly as before. */
@font-face {
  font-family: "Iowan Old Style";
  src: local("IowanOldStyle-Roman"), local("Iowan Old Style Roman");
  font-weight: 100 599;
  font-style: normal;
  size-adjust: 94.5%;
  ascent-override: 103.7%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Iowan Old Style";
  src: local("IowanOldStyle-Bold"), local("Iowan Old Style Bold");
  font-weight: 600 900;
  font-style: normal;
  size-adjust: 87.4%;
  ascent-override: 112.1%;
  descent-override: 29.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Avenir Next";
  src: local("AvenirNext-Regular"), local("Avenir Next Regular");
  font-weight: 100 599;
  font-style: normal;
  size-adjust: 86.1%;
  ascent-override: 104.5%;
  descent-override: 23.2%;
  line-gap-override: 5.8%;
}
@font-face {
  font-family: "Avenir Next";
  src: local("AvenirNext-DemiBold"), local("Avenir Next Demi Bold");
  font-weight: 600 900;
  font-style: normal;
  size-adjust: 89.7%;
  ascent-override: 100.3%;
  descent-override: 22.3%;
  line-gap-override: 5.6%;
}
/* === end FONTPRELOAD-20261010 === */

/* ==========================================================================
   Mariposa Travels · cinematic layer
   Loaded AFTER style.min.css. Everything is scoped under html.cine, so removing the class (or the
   <link>) restores the site exactly. The layer never changes markup that forms or WhatsApp links
   depend on; see tests/contract.mjs.

   1. Tokens               5. Header and menu          9. Country landing pages
   2. The site's tokens    6. Buttons and links       10. Motion
   3. Base type and grounds 7. Banners               11. Reduced motion
   4. Focus                 8. Footer
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
html.cine {
  --cine-cal: #E7EBEC;          /* limewash tinted with añil: reading ground */
  --cine-cal-2: #F1F3F3;        /* lifted limewash: cards and fields */
  --cine-sombra: #D3DADE;       /* limewash in shade: secondary surfaces, rules */
  --cine-noche: #0F1430;        /* night: cinema scenes, footer */
  --cine-noche-2: #1A2146;
  --cine-noche-3: #0A0E22;
  --cine-kajal: #15182B;        /* body text on limewash, 14.6:1 */
  --cine-kajal-2: #3B4058;      /* secondary text on limewash, 8.5:1 */
  --cine-claro: #E9ECEF;        /* text on night, 15:1 */
  --cine-claro-2: #AEB6C8;      /* secondary text on night, 8.9:1 */
  --cine-anil: #2B3A86;         /* brand colour: links, accents on limewash, 8.5:1 */
  --cine-anil-2: #223070;
  --cine-coral: #F06078;        /* light only: dawn */
  --cine-magenta: #D860A8;      /* light only: dusk */
  /* --cine-morado retired 2026-09-26 (CSSPURPLE-20260926): purple is out of the palette; it had no var() users. */
  --cine-lampara: #F3B45F;      /* lamp flame: night only, 9.9:1 on night */
  --cine-arenisca: #9A3F2A;     /* errors, 5.6:1 on limewash */
  --cine-rule: rgba(21, 24, 43, .14);
  --cine-rule-night: rgba(233, 236, 239, .16);

  --cine-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --cine-sans: "Anek Latin", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Fraunces reads solid at 560+; its optical-size axis handles display vs text automatically */

  --cine-t-press: 90ms;
  --cine-t-quick: 180ms;
  --cine-t-base: 320ms;
  --cine-t-page: 300ms;
  --cine-t-light: 900ms;
  --cine-ease: cubic-bezier(.65, 0, .35, 1);   /* camera */
  --cine-ease-out: cubic-bezier(.2, .7, .2, 1);
  --cine-ease-in: cubic-bezier(.4, 0, 1, 1);

  /* 2. The site's own tokens, re-pointed so existing components follow ---- */
  --font-display: var(--cine-serif);
  --font-prose: var(--cine-sans);
  --font-ui: var(--cine-sans);

  --c-ground: var(--cine-cal);
  --c-cream: var(--cine-cal-2);
  --c-indigo-050: var(--cine-cal-2);
  --c-indigo-200: var(--cine-sombra);
  --c-dark: var(--cine-noche);
  --c-indigo-800: var(--cine-noche);
  --c-plum: var(--cine-noche-3);
  --c-ink-warm: var(--cine-kajal);
  --c-ink-mid: var(--cine-kajal-2);
  --c-indigo: var(--cine-anil);
  --c-gold-text: var(--cine-anil);
  --c-indigo-deep: var(--cine-anil-2);
  --c-indigo-600: var(--cine-anil-2);
  --c-indigo-700: #1D2A62;
  --c-indigo-750: #19245A;
  --c-indigo-300: var(--cine-lampara);
  --c-gold-light: var(--cine-lampara);
  --c-gold: var(--cine-cal);            /* CTA fills: see section 6 for their ink */
  --c-gold-ui: var(--cine-anil);
  --c-gold-rim: var(--cine-sombra);

  --luxv2-card: var(--cine-cal-2);
  --luxv2-ink: var(--cine-kajal);
  --luxv2-ink-2: var(--cine-kajal-2);
  --luxv2-ink-2-dark: var(--cine-claro-2);
  --luxv2-on-dark: var(--cine-claro);
  --luxv2-radius: 3px;
  --luxv2-shadow: 0 1px 0 var(--cine-rule);
  --luxv2-shadow-lift: 0 12px 28px -18px rgba(15, 20, 48, .45);
}

/* 3. Base type and grounds -------------------------------------------------- */
html.cine body {
  background-color: var(--cine-cal);
  color: var(--cine-kajal);
  font-family: var(--cine-sans);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.cine :where(h1, h2, h3, h4) {
  font-family: var(--cine-serif);
  font-weight: 560;
  letter-spacing: -.014em;
  font-optical-sizing: auto;
  text-wrap: balance;
}
/* Some base-CSS versions hardcode the old display face (Playfair/Goudy) on headings instead of using
   --font-display; assert Fraunces on the real content headings so the layer is robust across versions. */
html.cine :is(main, header, footer) :is(h1, h2, h3, h4),
html.cine :is(.p3-title, .innerbanner h1, .ms-manifesto-h) { font-family: var(--cine-serif) !important; }
html.cine :where(p, li, dd, blockquote) { text-wrap: pretty; }
/* the site sets body copy at weight 300; Vijay reads on a phone and wants it solid */
html.cine main :is(p, li, td, dd) { font-weight: 450; }
html.cine :where(main a:not([class])) {
  color: var(--cine-anil);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
html.cine :where(main a:not([class])):hover { text-decoration-thickness: 2px; }
html.cine ::selection { background: rgba(43, 58, 134, .2); }

/* 4. Focus: always visible, añil on limewash, lamp light on night ------------ */
html.cine :focus-visible {
  outline: 2px solid var(--cine-anil);
  outline-offset: 3px;
}
html.cine :is(footer, .footer-area, .innerbanner, .mainMenu) :focus-visible { outline-color: var(--cine-lampara); }
/* FOCUSNIGHT-20260927: the lamp ring above never rendered on links and buttons on dark grounds.
   style.css (2026-09-07) sets a global a/button/input/textarea/select :focus-visible ring with
   !important in --c-gold-text, chosen because #906239 then cleared 3:1 on light AND dark grounds; this
   layer re-points --c-gold-text to añil, which is 1.8:1 on noche. Importance beats specificity, so the
   night colour needs !important too. Grounds covered:
   - footer and inner banners: noche / the banner scrim (lamp on noche 9.9:1);
   - the header, which is dark in BOTH states (transparent over the hero/banner scrim, solid noche once
     .sticky; the 404/410 pages open on a dark band too). The scrim's lightest measured ground still
     gives ~4.1:1 for the lamp. The Menú toggle has its own cream id rule in style.css, which outranks the
     header selector, so MENUFOCUS-20260927 names #menuIcon below by id; on the /blog index the unscrolled
     header's añil rule for it (BLOGMINHDR, 1-3-0) still outranks this one (1-2-1), as it should;
   - the cookie bar (#cookie-consent, noche-3: lamp 10.4:1). The ring sits outside the light "Aceptar"
     fill, on the bar;
   - the phone fast-path bar on country pages (.cine-jump, §9c, noche at 96%). Its own lamp rules for
     .cine-jump-wa / .cine-jump-cta carry no !important, so they lost to the global ring as well.
   - the drawer menu (.mainMenu, its own noche-3 panel: lamp ~10:1). Its links and close button had a
     cream !important ring (style.css NAVA11Y-20260901, 0-3-0 at most); DRAWERFOCUS-20260927 adds it to
     the list below (0-3-1) so the drawer matches the header it opens from.
   FOCUSNIGHT2-20260927 adds the photo heroes and dark boxes a render of all 23 page types still found
   at 1.1-1.9:1: the homepage hero (.p3-hero) and destinations band (.banner-content, which exists only
   there), the tour hero and related-tours band (.td-hero, .td-related), the transport closing band
   (.tp-cta), the Guía Esencial download box (.ge-dl) and the blog's guide box (.blog-guide-cta); plus
   two night-filled controls that are their own ground, so they match on themselves: the skip link
   (over the header zone) and #scrollUp (reached after the footer, so over it). The blog index, whose
   unscrolled header sits on limewash, puts añil back (BLOGMINHDR in pages/blogs.blade.php). */
html.cine :is(footer, .footer-area, .innerbanner, .header-area, .mainMenu, .cookie-consent, .cine-jump,
  .p3-hero, .banner-content, .td-hero, .td-related, .tp-cta, .ge-dl, .blog-guide-cta) :focus-visible,
html.cine .skip-link:focus-visible, html.cine #scrollUp:focus-visible, html.cine #menuIcon:focus-visible { outline-color: var(--cine-lampara) !important; }
/* The night bands (--c-dark / --cine-noche grounds): enquiry bands on tour, agency, destination and country
   pages, the homepage inquiry, Momentos, stats and why-us bands, lead-magnet and gallery CTAs, the tour
   phone bar, the chat header and the 404/410 bands. Their LIGHT panels keep añil, because the ring sits on
   the panel there: the tour form (.enquiry/.form-content), the agencies form, #clForm, the inquiry wizard
   (.iw, white) and the 404 search box. A browser without complex :not() drops this rule and keeps añil. */
html.cine :is(.td-enquire, .pa-formsec, .dest-inquiry, .cl-form, .home-inquiry, .moments-strip, .stats-band, .wu-band, .pa-hero, .lead-magnet, .lm-cta-box, .gallery-cta, .postproof-cta, .td-mbar, .mtchat-head, .err-404, .err-410) :focus-visible:not(:is(.enquiry, .form-content, .pa-formsec form, #clForm, .iw, .err-search) *) { outline-color: var(--cine-lampara) !important; }

/* 5. Header, menu and the phone bar ------------------------------------------- */
/* The header keeps its ground-adaptive ink (inline styles set by its own script win over these). */
html.cine .header-area { font-family: var(--cine-sans); }
html.cine .hdr-nav a { font-family: var(--cine-sans); font-weight: 500; letter-spacing: .005em; }
html.cine .header-cta {
  background-color: var(--cine-cal);
  color: var(--cine-kajal);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(21, 24, 43, .22);
  font-family: var(--cine-sans);
  font-weight: 600;
  transition: background-color var(--cine-t-quick) var(--cine-ease-out);
}
html.cine .header-cta:hover { background-color: var(--cine-lampara); color: var(--cine-kajal); }
html.cine .mainMenu { background-color: var(--cine-noche); }
html.cine .mainMenu .menu-cta { background: var(--cine-cal); color: var(--cine-kajal); border-radius: 3px; }
html.cine .mobile-cta-bar { background: var(--cine-noche); border-top: 1px solid var(--cine-rule-night); }
html.cine .mcta-quote {
  background: var(--cine-noche);
  color: var(--cine-claro);
  font-family: var(--cine-sans);
  font-weight: 600;
  letter-spacing: .01em;
}
html.cine .mcta-quote:active { background: var(--cine-noche-2); }
html.cine #scrollUp { background: var(--cine-noche); color: var(--cine-claro); border-radius: 3px; box-shadow: none; }

/* 6. Buttons ---------------------------------------------------------------------- */
html.cine .btn-mariposa {
  background: var(--cine-kajal) !important;   /* CMS buttons carry inline colours */
  background-image: none !important;
  color: var(--cine-cal) !important;
  border: 0 !important;
  border-radius: 3px !important;
  font-family: var(--cine-sans) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  transition: background-color var(--cine-t-quick) var(--cine-ease-out), scale var(--cine-t-press) var(--cine-ease-out);
}
html.cine .btn-mariposa:hover { background: var(--cine-anil) !important; }
/* The site's primary-CTA family. style.min.css paints all of these with !important, so the layer must too. */
html.cine :is(.iw-next, .iw-submit, .td-btn-g, .td-book-cta, .td-mbar-cta, .tp-btn-g, .pa-btn-g, .cl-btn) {
  background-color: var(--cine-kajal) !important;
  background-image: none !important;
  color: var(--cine-cal) !important;
  border-radius: 3px !important;
  font-family: var(--cine-sans);
  font-weight: 600;
  letter-spacing: .01em;
  filter: none !important;
}
html.cine :is(.iw-next, .iw-submit, .td-btn-g, .td-book-cta, .td-mbar-cta, .tp-btn-g, .pa-btn-g, .cl-btn):hover { background-color: var(--cine-anil) !important; }
html.cine .td-mbar .td-mbar-cta { background-color: var(--cine-cal) !important; color: var(--cine-kajal) !important; }
html.cine :is(.btn-mariposa, .cl-btn, .mcta-quote, .header-cta, .iw-next, .iw-submit, .td-btn-g, .td-book-cta, .td-mbar-cta, .tp-btn-g, .pa-btn-g):active { scale: .97; }

/* 7. Banners ------------------------------------------------------------------------ */
html.cine .innerbanner { position: relative; isolation: isolate; }
html.cine .innerbanner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 20, 48, .30) 0%, rgba(15, 20, 48, .10) 38%, rgba(15, 20, 48, .82) 100%);
}
html.cine .innerbanner .ib-title { position: relative; z-index: 1; }
html.cine .innerbanner h1 {
  font-family: var(--cine-serif);
  font-weight: 580;
  letter-spacing: -.022em;
  line-height: 1;
  color: var(--cine-claro);
}
html.cine .bread { background-color: var(--cine-sombra); }
html.cine .bread :is(a, li) { color: var(--cine-kajal-2); font-family: var(--cine-sans); }

/* 8. Footer -------------------------------------------------------------------------- */
html.cine .footer-area { background-color: var(--cine-noche); color: var(--cine-claro-2); }
html.cine .footer-area .fclose-h { font-family: var(--cine-serif); font-weight: 560; letter-spacing: -.015em; color: var(--cine-claro); }
html.cine .footer-area .fclose-sub { color: var(--cine-claro-2); font-weight: 400; }
html.cine .footer-area .fclose-cta {
  background: transparent;
  color: var(--cine-claro);
  border: 1px solid rgba(233, 236, 239, .35);
  border-radius: 3px;
  font-family: var(--cine-sans);
  font-weight: 600;
}
html.cine .footer-area .fclose-cta:hover { background: var(--cine-claro); color: var(--cine-kajal); }
html.cine .footer-area :is(summary, .fchev, i.fa) { color: var(--cine-lampara); }

/* 9. Country landing pages (/page/viajes-a-la-india-desde-*) ----------------------------- */
/* 9a. The CMS body: editorial type. Colours written inline in the CMS need !important. */
html.cine section.inner { background-color: var(--cine-cal); }
html.cine .ab-content { color: var(--cine-kajal); font-size: 1.0625rem; line-height: 1.68; }
html.cine .ab-content :is(p, li, td, th) { color: var(--cine-kajal); }
html.cine .ab-content h2 {
  font-size: clamp(1.65rem, 4.8vw, 2.25rem) !important;
  line-height: 1.1 !important;
  font-weight: 540 !important;
  color: var(--cine-kajal) !important;
  margin: 2.1em 0 .55em !important;
}
html.cine .ab-content h3,
html.cine .ab-content h2.cms-section-heading {
  font-size: clamp(1.2rem, 3.8vw, 1.45rem) !important;
  line-height: 1.2 !important;
  font-weight: 560 !important;
  color: var(--cine-kajal) !important;
}
/* Semantic H2s on the four utility pages keep the previous H3 spacing. */
html.cine .ab-content h2.cms-section-heading { margin: 22px 0 .5rem !important; }
html.cine .ab-content ul li::marker { color: var(--cine-anil); }
html.cine .ab-content :is(th, td) { border-color: var(--cine-rule) !important; }
html.cine .ab-content [style*="#e6ddc9"] { border-color: var(--cine-rule) !important; }
html.cine .ab-content :is([style*="background:#fbf6ea"], [style*="background:#fff"], [style*="background: #fff"]) { background: var(--cine-cal-2) !important; }
html.cine .ab-content [style*="border-radius:10px"] { border-radius: 3px !important; }
html.cine .ab-content :is([style*="color:#6b6459"], [style*="color:#8a8378"]) { color: var(--cine-kajal-2) !important; }
html.cine .ab-content :is([style*="color:#23201a"], [style*="color:#2b2620"]) { color: var(--cine-kajal) !important; }
html.cine .ab-content [style*="background:#C9A227"] { background: var(--cine-anil) !important; color: var(--cine-cal) !important; }
/* De-shout the CMS card eyebrows ("TU PRIMERA VEZ" → a quiet serif kicker): the tracked all-caps
   label is the commonest generated-page tell, so the layer turns them into editorial kickers. */
html.cine .ab-content [style*="text-transform:uppercase"] {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--cine-serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  color: var(--cine-anil) !important;
}
html.cine .ab-content blockquote {
  border-left: 2px solid var(--cine-anil) !important;
  background: transparent !important;
  padding: .15em 0 .15em 1em !important;
  font-family: var(--cine-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--cine-kajal) !important;
}
html.cine .ab-content blockquote cite { font-family: var(--cine-sans); font-style: normal; font-size: .9375rem; color: var(--cine-kajal-2); }
html.cine .lm-note { background: var(--cine-sombra) !important; border: 0 !important; border-left: 3px solid var(--cine-anil) !important; border-radius: 0 !important; }

/* 9b. The enquiry, as a letter on a night band. Field names, #clForm, .cl-grid and .cl-btn are
       untouched: its script hides .cl-grid and .cl-btn on success and reads the fields by name. */
html.cine .cl-form {
  margin: clamp(48px, 9vw, 96px) calc(50% - 50vw) 0;
  padding: clamp(44px, 9vw, 96px) max(20px, calc(50vw - 340px)) clamp(48px, 9vw, 96px);
  border: 0;
  border-radius: 0;
  background: radial-gradient(70vw 55vw at 90% -10%, rgba(243, 180, 95, .16), transparent 65%),
              radial-gradient(50vw 40vw at 0% 110%, rgba(43, 58, 134, .45), transparent 70%),
              var(--cine-noche);
  color: var(--cine-claro);
}
html.cine .cl-form h2 { /* Fraunces */
  margin: 0 0 .35em;
  font-family: var(--cine-serif);
  font-weight: 580;
  font-size: clamp(1.9rem, 6.4vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--cine-claro);
}
html.cine .cl-form .cl-sub { margin: 0 0 clamp(22px, 4vw, 34px); font-size: 1.0625rem; line-height: 1.55; color: var(--cine-claro-2); }
html.cine .cl-form #clForm {
  position: relative;
  padding: clamp(22px, 5.5vw, 44px);
  background: var(--cine-cal-2);
  color: var(--cine-kajal);
  border-radius: 2px;
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .6);
}
html.cine .cl-form .cl-grid { gap: 22px 28px; }
html.cine .cl-form .cl-f span { font: 600 .9375rem/1.3 var(--cine-sans); letter-spacing: 0; color: var(--cine-kajal-2); }
html.cine .cl-form .cl-f b { color: var(--cine-anil); }
html.cine .cl-form .cl-f :is(input, select) {
  min-height: 48px;
  padding: 10px 2px 8px;
  border: 0;
  border-bottom: 1.5px solid rgba(43, 58, 134, .55);
  border-radius: 0;
  background-color: transparent;
  color: var(--cine-kajal);
  font: 500 1.0625rem/1.3 var(--cine-sans);   /* 17px: no zoom on iPhone */
  transition: border-color var(--cine-t-quick), background-color var(--cine-t-quick);
}
html.cine .cl-form .cl-f select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232B3A86' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
html.cine .cl-form .cl-f :is(input, select)::placeholder { color: rgba(59, 64, 88, .72); }
html.cine .cl-form .cl-f :is(input, select):focus {
  outline: none;
  border-bottom: 2.5px solid var(--cine-kajal);
  background-color: rgba(43, 58, 134, .06);
}
html.cine .cl-form .cl-f :is(input, select):focus-visible { outline: 2px solid var(--cine-anil); outline-offset: 3px; }
html.cine .cl-form .cl-f input.cl-bad { border-bottom: 2.5px solid var(--cine-arenisca); background-color: rgba(154, 63, 42, .06); }
html.cine .cl-form .cl-btn {
  margin-top: 26px;
  min-height: 52px;
  padding: 0 28px;
  font-size: 1.0625rem;
  line-height: 1;
  transform: none;
  transition: background-color var(--cine-t-quick) var(--cine-ease-out), scale var(--cine-t-press) var(--cine-ease-out);
}
html.cine .cl-form .cl-msg { font: 600 1rem/1.45 var(--cine-sans); }
html.cine .cl-form .cl-msg.cl-ok { font: italic 480 1.3125rem/1.4 var(--cine-serif); color: var(--cine-anil); }
html.cine .cl-form .cl-msg.cl-err { color: var(--cine-arenisca); }
html.cine .cl-form .cl-priv { margin-top: 14px; font-size: .875rem; color: var(--cine-kajal-2); }
html.cine .cl-form .cl-priv i { color: var(--cine-anil); }
@media (max-width: 640px) {
  html.cine .cl-form .cl-btn { width: 100%; }
}

/* 4b. Effects from the current site that the Step 2 spec retires ------------- */
/* page-load fade (replaced by the cut through night) */
html.cine body { animation: none !important; }
/* the cursor ring: the arrow is never replaced (its script still runs; remove it at install) */
html.cine .mt-cursor { display: none !important; }
/* text and blocks never animate in */
html.cine.sr-on .sr-item,
html.cine.sr-on .sr-img { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
/* magnetic pull on every button: only the one door keeps it (m/magnet.js uses `translate`, not `transform`) */
html.cine :is(.btn, .td-btn-g, .p3-btn-g, .td-book-cta, .iw-next, .iw-submit) { transform: none !important; }

/* 9c. Fast path to the enquiry (phone only, country pages) --------------------------- */
html.cine .cine-jump {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;                 /* below the site's popup (99990) and menu; above content */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(15, 20, 48, .96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--cine-rule-night);
  animation: cine-jump-in var(--cine-t-base) var(--cine-ease) both;
}
@keyframes cine-jump-in { from { transform: translateY(100%); } to { transform: none; } }
html.cine .cine-jump-note {
  flex: 1;
  min-width: 0;
  font: 500 .875rem/1.25 var(--cine-sans);
  color: var(--cine-claro-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;          /* keep the bar one line once WhatsApp + CTA share the row */
}
/* WhatsApp shortcut: icon-only ghost button to fit beside the primary CTA on the phone bar */
html.cine .cine-jump-wa {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 48px;
  border-radius: 3px;
  border: 1px solid var(--cine-claro-2);
  background: transparent;
  color: var(--cine-claro);
  transition: background-color var(--cine-t-quick) var(--cine-ease-out), scale var(--cine-t-press) var(--cine-ease-out);
}
html.cine .cine-jump-wa:hover { background: rgba(233, 236, 239, .1); }
html.cine .cine-jump-wa:active { scale: .97; }
html.cine .cine-jump-wa:focus-visible { outline: 2px solid var(--cine-lampara); outline-offset: 3px; }
html.cine .cine-jump-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 3px;
  background: var(--cine-cal);
  color: var(--cine-kajal);
  font: 600 1rem/1 var(--cine-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--cine-t-quick) var(--cine-ease-out), scale var(--cine-t-press) var(--cine-ease-out);
}
html.cine .cine-jump-cta:active { scale: .97; background: var(--cine-lampara); }
html.cine .cine-jump-cta:focus-visible { outline: 2px solid var(--cine-lampara); outline-offset: 3px; }
/* On a narrow phone there is no room for the reassurance line beside both buttons, and a truncated
   fragment reads as broken. Drop it there and let the primary CTA fill the row next to WhatsApp. */
@media (max-width: 519px) {
  html.cine .cine-jump-note { display: none; }
  html.cine .cine-jump-cta { flex: 1; justify-content: center; }
}
@media (min-width: 901px) { html.cine .cine-jump { display: none; } }  /* phones only */
@media (prefers-reduced-motion: reduce) { html.cine .cine-jump { animation: none; } }
/* keep the last content clear of the bar on phones, and lift the scroll-to-top button above it */
@media (max-width: 900px) {
  html.cine .footer-area { padding-bottom: 84px; }
  html.cine .cine-has-jump #scrollUp { bottom: 84px; }
}

/* 9d. Homepage (desktop; phones on / redirect to the m-dot app) ----------------------- */
/* Hero: the kept H1 stays; make white serif read solidly over the busy palace photo. */
html.cine .p3-hero .p3-title {
  font-weight: 580 !important;   /* a site rule sets 400; Fraunces should read solid over the photo */
  text-shadow: 0 1px 2px rgba(8, 6, 12, .35), 0 2px 24px rgba(8, 6, 12, .3);
}
html.cine .p3-hero .p3-sub {
  text-shadow: 0 1px 12px rgba(8, 6, 12, .45);
}
/* the añil underline under "India" (the site's .p3-title .g em) — keep it, tuned to the brand ink */
html.cine .p3-title .g em { text-decoration-color: var(--cine-lampara); }
/* Phones (and any narrow viewport that still gets Laravel) had no hero scrim: add one so the
   headline never depends on the photo. Desktop already has its ::before gradient. */
@media (max-width: 900px) {
  html.cine .p3-hero { position: relative; isolation: isolate; }
  html.cine .p3-hero > .p3-video,
  html.cine .p3-hero > .p3-mobimg { z-index: 0; }
  html.cine .p3-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 14, 34, .34) 0%, rgba(10, 14, 34, .12) 40%, rgba(10, 14, 34, .74) 100%);
  }
  html.cine .p3-hero .p3-wrap { position: relative; z-index: 2; }
  /* a global mobile h1 rule resets the weight; the hero headline must stay solid over the photo */
  html.cine .p3-hero .p3-title { font-weight: 580 !important; }
}
/* Section rhythm: the "Momentos" band and the review wall are the two photo bands; let their
   captions read as one system (they already share a caption spec — just ensure the night ground). */
html.cine .moments-strip { background-color: var(--cine-noche); }
html.cine .moments-strip .mstrip-title,
html.cine .moments-strip h2 { color: var(--cine-claro); }
/* The B&W destinations rail label ("Lugares que se quedan contigo") over the grey rail */
html.cine .indiajourneys .ij-title,
html.cine .indiajourneys h2 { font-family: var(--cine-serif); font-weight: 560; letter-spacing: -.015em; }
/* de-shout the remaining homepage kickers (tracked all-caps → quiet añil serif) */
html.cine :is(.mstrip-kicker, .whyus-kicker, .hi-kicker, .sigj-kicker, .voices-kicker) {
  text-transform: none; letter-spacing: 0; font-family: var(--cine-serif);
  font-style: italic; font-weight: 500; color: var(--cine-anil);
}
html.cine .moments-strip .mstrip-kicker { color: var(--cine-lampara); }

/* 9e. Tour pages (/package/*; desktop — phones redirect to the m-dot app) --------------- */
/* The tour template forces headings to EB Garamond !important, so re-assert Fraunces there. */
html.cine :is(.td-hero, .td-body, .td-related, .td-enquire) :is(h1, h2, h3, h4),
html.cine :is(.td-title, .td-day-title, .td-book-price, .td-rt-card b) {
  font-family: var(--cine-serif) !important;
  font-optical-sizing: auto;
}
html.cine .td-title { font-weight: 580 !important; letter-spacing: -.02em; }
html.cine .td-day-title { font-weight: 560 !important; }

/* De-shout the purple tracked eyebrows into quiet añil serif kickers (they use #4E3BB0 !important). */
html.cine :is(.td-eyebrow, .td-book-eyebrow, .td-enquire .td-eyebrow, .td-related .td-eyebrow) {
  color: var(--cine-anil) !important;
  font-family: var(--cine-serif) !important;
  font-style: italic;
  font-weight: 500 !important;
  font-size: 1rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* the hero kicker repeats the searched phrase (kept for SEO) — just make it read cleanly on the photo */
html.cine .td-kicker { color: var(--cine-lampara) !important; font-family: var(--cine-sans); font-weight: 600; }
html.cine .td-hero .td-fact i { color: var(--cine-lampara) !important; }
html.cine .td-body .td-fact i, html.cine .td-book .td-fact i { color: var(--cine-anil) !important; }

/* Vijay's day notes: an italic serif margin note, like the homepage founder voice */
html.cine .td-note {
  font-family: var(--cine-serif);
  font-style: italic;
  border-left: 2px solid var(--cine-anil);
  background: transparent !important;
  padding-left: 14px;
}
html.cine .td-note i.fa { color: var(--cine-anil) !important; }
html.cine .td-talkline { font-family: var(--cine-serif); font-style: italic; color: var(--cine-kajal-2); }

/* Sticky booking card */
html.cine .td-book { background: var(--cine-cal-2); border: 1px solid var(--cine-rule); border-radius: 3px; }
html.cine .td-book-price { color: var(--cine-kajal); }
html.cine .td-book-note, html.cine .td-book-note strong { color: var(--cine-kajal-2) !important; }
html.cine .td-book-trust i.fa { color: var(--cine-anil) !important; }

/* Related-tour cards */
html.cine .td-rt-card { background: var(--cine-cal-2); border: 1px solid var(--cine-rule); border-radius: 3px; }

/* The enquiry form on its night band: clean cinematic fields, ink submit. Field names untouched. */
html.cine .td-enquire { background-color: var(--cine-noche); }
html.cine .td-enquire :is(.td-eyebrow, h2, .td-enquire-sub) { color: var(--cine-claro); }
html.cine .td-enquire .td-eyebrow { color: var(--cine-lampara) !important; }
html.cine .td-enquire .enquiry, html.cine .td-enquire .form-content {
  background: var(--cine-cal-2);
  border-radius: 2px;
  color: var(--cine-kajal);
}
html.cine .td-enquire .form-control {
  min-height: 48px;
  border: 0;
  border-bottom: 1.5px solid rgba(43, 58, 134, .5);
  border-radius: 0;
  background: transparent;
  color: var(--cine-kajal);
  font: 500 1.0625rem/1.3 var(--cine-sans);   /* 17px: no iOS zoom */
  transition: border-color var(--cine-t-quick), background-color var(--cine-t-quick);
}
html.cine .td-enquire .form-control:focus {
  outline: none;
  border-bottom: 2.5px solid var(--cine-kajal);
  background: rgba(43, 58, 134, .06);
  box-shadow: none;
}
html.cine .td-enquire .form-control:focus-visible { outline: 2px solid var(--cine-anil); outline-offset: 3px; }
html.cine .td-enquire textarea.form-control { border: 1.5px solid rgba(43, 58, 134, .5); border-radius: 3px; }
html.cine .td-enquire .form-secure { color: var(--cine-kajal-2); }
html.cine .td-enquire .form-secure i.fa { color: var(--cine-anil); }

/* the itinerary map renders via Leaflet (site JS); in the static shared preview it can't, so a plain
   limewash panel reads better than an empty white box there. Live keeps the real map. */
html.cine .td-luxmap:empty { background: var(--cine-sombra); min-height: 0; }

/* 9f. Tailor-made page (/tailormade-journeys; desktop — phones redirect to the m-dot app) --- */
/* De-shout the tracked-caps kickers/roles into quiet añil serif kickers */
html.cine :is(.tm-kicker, .tmv-kicker, .tmt-rol) {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--cine-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--cine-anil);
}
/* "Tu viaje a medida incluye" icon cards + team cards */
html.cine .tm-incl .tmi i.fa, html.cine .tm-team .tmt i.fa { color: var(--cine-anil); }
html.cine .tm-team .tmt-rol { color: var(--cine-anil); }
/* Testimonials: italic serif quotes, añil rule + stars */
html.cine .tm-voices .tmv-text { font-family: var(--cine-serif); color: var(--cine-kajal-2); }
html.cine .tm-voices .tmv-stars { color: var(--cine-anil); }
html.cine .tm-voices .tmv-item { border-left-color: var(--cine-rule); }
html.cine .tm-voices .tmv-name { font-family: var(--cine-serif); font-weight: 560; }

/* The detailed enquiry (#tourid → tailormadesend) inside <details>, on limewash: cinematic fields.
   Field names (name/email/country/date/comfort[]/persons/age) are untouched. */
html.cine .tm-detailed .tmf-label { font-family: var(--cine-sans); color: var(--cine-kajal-2); font-weight: 600; }
html.cine .tm-detailed .tmf-label .tmf-req { color: var(--cine-anil); }
html.cine .tm-detailed .enroll-form h3 { font-family: var(--cine-serif); font-weight: 560; }
html.cine .tm-detailed .form-control {
  min-height: 48px;
  border: 0;
  border-bottom: 1.5px solid rgba(43, 58, 134, .5);
  border-radius: 0;
  background: transparent;
  color: var(--cine-kajal);
  font: 500 1.0625rem/1.3 var(--cine-sans);   /* 17px: no iOS zoom */
  transition: border-color var(--cine-t-quick), background-color var(--cine-t-quick);
}
html.cine .tm-detailed .form-control:focus {
  outline: none;
  border-bottom: 2.5px solid var(--cine-kajal);
  background: rgba(43, 58, 134, .06);
  box-shadow: none;
}
html.cine .tm-detailed .form-control:focus-visible { outline: 2px solid var(--cine-anil); outline-offset: 3px; }
html.cine .tm-detailed textarea.form-control { border: 1.5px solid rgba(43, 58, 134, .5); border-radius: 3px; }
/* the "Prefiero darnos todos los detalles" toggle to the detailed form */
html.cine .tm-detailed > summary { font-family: var(--cine-sans); font-weight: 600; color: var(--cine-anil); }

/* 9g. Remaining page types: contact, B2B agencies, tours listing, destinations ---------- */
/* A shared cinematic field style for the remaining lead forms (contact #quickid, B2B #paForm).
   Field names are never touched; this is purely visual. */
html.cine :is(.contact_form, #paForm, .ct-form) .form-control,
html.cine .contact-textarea {
  min-height: 48px;
  border: 0;
  border-bottom: 1.5px solid rgba(43, 58, 134, .5);
  border-radius: 0;
  background: transparent;
  color: var(--cine-kajal);
  font: 500 1.0625rem/1.3 var(--cine-sans);   /* 17px: no iOS zoom */
  transition: border-color var(--cine-t-quick), background-color var(--cine-t-quick);
}
html.cine :is(.contact_form, #paForm, .ct-form) .form-control:focus,
html.cine .contact-textarea:focus {
  outline: none;
  border-bottom: 2.5px solid var(--cine-kajal);
  background: rgba(43, 58, 134, .06);
  box-shadow: none;
}
html.cine :is(.contact_form, #paForm, .ct-form) .form-control:focus-visible { outline: 2px solid var(--cine-anil); outline-offset: 3px; }
html.cine :is(.contact-textarea, #paForm textarea.form-control) { border: 1.5px solid rgba(43, 58, 134, .5); border-radius: 3px; }
html.cine :is(.ct-label, .pa-lbl) { font-family: var(--cine-sans); color: var(--cine-kajal-2); font-weight: 600; }
html.cine :is(.ct-req, .pa-lbl .pa-req) { color: var(--cine-anil); }

/* Contact: the direct-contact aside + rating */
html.cine .ct-direct { background: var(--cine-cal-2); border: 1px solid var(--cine-rule); border-radius: 3px; }
html.cine .ct-direct-lead { font-family: var(--cine-serif); }
html.cine .ct-rate .ct-stars, html.cine .ct-trust i.fa { color: var(--cine-anil); }
html.cine .ct-nap i.fa { color: var(--cine-anil); }

/* B2B agencies: de-shout kickers, style the numbered steps/stats and cards */
html.cine .pa-kicker {
  text-transform: none; letter-spacing: 0; font-family: var(--cine-serif);
  font-style: italic; font-weight: 500; font-size: 1rem; color: var(--cine-anil);
}
html.cine :is(.pa-card, .pa-fit, .pa-inc) { background: var(--cine-cal-2); border: 1px solid var(--cine-rule); border-radius: 3px; }
html.cine :is(.pa-step-no, .pa-num, .pa-stat) { font-family: var(--cine-serif); color: var(--cine-anil); }
html.cine .pa-ic i.fa { color: var(--cine-anil); }
html.cine .pa-formsec { background-color: var(--cine-noche); }
html.cine .pa-formsec :is(.pa-kicker, h2, .pa-form-sub) { color: var(--cine-claro); }
html.cine .pa-formsec .pa-kicker { color: var(--cine-lampara); }
html.cine .pa-formsec form { background: var(--cine-cal-2); border-radius: 2px; color: var(--cine-kajal); }
html.cine .pa-formsec .pa-lbl { color: var(--cine-kajal-2); }

/* Tours listing: filter pills + price table */
html.cine .tp-chips button, html.cine .tp-chip {
  border-radius: 3px; border: 1.5px solid rgba(43, 58, 134, .35); background: transparent;
  color: var(--cine-anil); font-family: var(--cine-sans); font-weight: 560;
}
html.cine .tp-chips button[aria-pressed="true"], html.cine .tp-chip.is-active, html.cine .tp-chip[aria-current="true"] {
  background: var(--cine-anil); color: var(--cine-cal); border-color: var(--cine-anil);
}
html.cine .tp-table :is(th, td) { border-color: var(--cine-rule); }
html.cine .tp-table thead th { font-family: var(--cine-sans); font-weight: 600; color: var(--cine-kajal-2); }
html.cine .tp-catn { font-family: var(--cine-serif); font-weight: 560; }
html.cine :is(.tp-catprice, .tp-td-price) { font-weight: 640; color: var(--cine-kajal); }

/* Destination pages (/destination/*): CMS body reuses §9a .ab-content; add the destination extras */
html.cine .dest-inq-eyebrow {
  text-transform: none; letter-spacing: 0; font-family: var(--cine-serif);
  font-style: italic; font-weight: 500; color: var(--cine-anil);
}
html.cine .dest-inquiry { background-color: var(--cine-noche); }
html.cine .dest-inquiry :is(.dest-inq-eyebrow) { color: var(--cine-lampara); }
html.cine .dest-inquiry :is(.dest-inq-h, h2) { color: var(--cine-claro); font-family: var(--cine-serif); }
html.cine .dest-inquiry .dest-inq-p { color: var(--cine-claro-2); }
html.cine .dest-tour-card { background: var(--cine-cal-2); border: 1px solid var(--cine-rule); border-radius: 3px; }
html.cine .dest-tour-card b, html.cine .dest-tour-card h3 { font-family: var(--cine-serif); font-weight: 560; }

/* 9h. Signature moments --------------------------------------------------------------- */
/* "Mientras tanto, en India": a quiet limewash strip under the hero with the live India hour */
html.cine .cine-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  padding: 18px var(--gut, clamp(20px, 5vw, 72px));
  background: var(--cine-sombra);
  border-bottom: 1px solid var(--cine-rule);
  color: var(--cine-kajal);
  font-family: var(--cine-sans);
}
html.cine .cine-clock-label {
  font-family: var(--cine-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cine-anil);
  font-size: 1.0625rem;
}
html.cine .cine-clock-time { font-variant-numeric: tabular-nums; color: var(--cine-kajal-2); font-size: .9375rem; }
html.cine .cine-clock-time b { font-weight: 600; color: var(--cine-kajal); }
html.cine .cine-clock-line { font-style: italic; font-family: var(--cine-serif); color: var(--cine-kajal-2); font-size: 1rem; }
html.cine .cine-clock { --gut: clamp(20px, 5vw, 72px); }
@media (min-width: 700px) { html.cine .cine-clock { justify-content: center; } }

/* "no monumentos": a hairline strikes the word on scroll-in — the tagline performing itself */
html.cine .ms-manifesto-h .cine-strike {
  position: relative;
  white-space: nowrap;
}
html.cine .ms-manifesto-h .cine-strike::after {
  content: "";
  position: absolute;
  left: -.04em;
  right: -.04em;
  top: 52%;
  height: 2px;
  background: var(--cine-coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--cine-ease) 150ms;
}
html.cine .ms-manifesto-h.cine-struck .cine-strike::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  html.cine .ms-manifesto-h .cine-strike::after { transition: none; }
}

/* 9i. Contrast repair — every text must meet WCAG AA on its real ground ---------------- */
/* (a) Dark/night bands: dark accents & labels were invisible → light. !important beats the
   token re-points and any base rule. Light cards nested inside are re-asserted in (b). */
html.cine :is(.pa-stats, .pa-num, .pa-stat) .pa-num,
html.cine .pa-stats .pa-num, html.cine .pa-stats .pa-stat { color: var(--cine-lampara) !important; }
html.cine .pa-stats .pa-lbl,
html.cine .pa-formsec .pa-sub { color: var(--cine-claro-2) !important; }
html.cine :is(.pa-formsec, .pa-stats) .pa-kicker { color: var(--cine-lampara) !important; }
html.cine .pa-formsec :is(h2, .pa-form-sub) { color: var(--cine-claro) !important; }
html.cine .td-related :is(.td-eyebrow, .td-eyebrow--c) { color: var(--cine-lampara) !important; }

/* (b) Light cards inside dark bands: headings/labels were light-on-light → dark. */
html.cine :is(.td-enquire .enquiry, .td-enquire .form-content, .pa-formsec form) :is(h2, h3) { color: var(--cine-kajal) !important; }
html.cine :is(.pa-formsec form, .td-enquire .enquiry) :is(.pa-lbl, label) { color: var(--cine-kajal-2) !important; }

/* (c) Light-on-light: the "N noches · N días" chip printed cream on limewash */
html.cine .sigj-chip { color: var(--cine-kajal) !important; }

/* (d) The site's warm-grey secondary text is too faint on limewash → darken to kajal-2 (8.5:1) */
html.cine :is(.sigj-from, .sigj-per, .sigj-legend li, .voices-scale, .vx-label, .vx-loc,
  .iw-lab, .tmf-opt, .voices figcaption, .hx-catpic figcaption, .td-book .td-book-note) { color: var(--cine-kajal-2) !important; }
/* the tour price "Desde" label: bare <span> on the light aside card kept the site's warm grey
   (the <strong> price already inherits kajal, so only the label span needs darkening) */
html.cine .td-book-price span { color: var(--cine-kajal-2) !important; }
/* the mobile booking bar is a night bar → its "Desde" <small> must be light */
html.cine .td-mbar-price small { color: var(--cine-claro-2) !important; }

/* (e) Generic filled CTA ("Hazlo tuyo") had añil text on a brown fill → ink button */
html.cine main a.btn:not(.cine-jump-cta):not(.header-cta):not(.menu-cta) {
  background-color: var(--cine-kajal) !important;
  background-image: none !important;
  color: var(--cine-cal) !important;
}
html.cine main a.btn:not(.cine-jump-cta):not(.header-cta):not(.menu-cta):hover { background-color: var(--cine-anil) !important; }

/* (f) further page templates surfaced by the whole-site deep audit ------------------- */
/* calculator: the muted disclaimer on cream, and the dark heading on the night CTA band */
html.cine :is(.calc-disc, .calc-disc strong) { color: var(--cine-kajal-2) !important; }
html.cine .lm-cta-box :is(.lm-h, .lm-sub, p) { color: var(--cine-claro) !important; }
/* muted warm-grey secondary text on light grounds → kajal-2 (hoteles-palacio loc, packages
   note, transport footnote + the "· País" location in traveller quotes) */
html.cine :is(.hp-loc, .ce-note, .tp-tfoot, .tp-quote figcaption, .tp-quote figcaption span) { color: var(--cine-kajal-2) !important; }
/* transport dark surfaces: añil accents were invisible → light */
html.cine .tp-badge { color: var(--cine-lampara) !important; }
/* only the transport vehicle table (its own wrapper) has a DARK header row — the /tour-packages
   comparison table shares .tp-table but sits on a light ground and keeps its kajal-2 th (§ above) */
html.cine .tp-tablewrap .tp-table thead th { color: var(--cine-claro) !important; }
/* photo/video gallery caption sits over a photo tile with no scrim → give it a legible ground */
html.cine .gv-cap {
  background: linear-gradient(to top, rgba(15, 20, 48, .92), rgba(15, 20, 48, .42)) !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* (g) EN/PT luxury landing pages (site-rendered, lx-*) --------------------------------- */
/* muted warm-grey secondary text on light grounds → kajal-2 */
html.cine :is(.lx-trustline, .lx-pkg-meta) { color: var(--cine-kajal-2) !important; }
/* the category tag overlays the TOP of the photo, where the card's bottom scrim doesn't reach,
   so over a bright image it washed out → give it its own chip ground (the white name at the
   bottom already sits on the card's ::after scrim). */
html.cine .lx-dest-tag {
  background: rgba(12, 9, 5, .58);
  padding: .28em .55em;
  border-radius: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* (h) surfaced by the exhaustive per-URL sweep -------------------------------------- */
/* blog/article prose (.ab-content) sits on the light ground: the site's grey figcaptions and the
   default pink inline <code> both slip under AA there → readable ink */
html.cine .ab-content figcaption { color: var(--cine-kajal-2) !important; }
html.cine .ab-content code { color: var(--cine-kajal) !important; }
/* destinations hub: the muted meta line + hub subtitle print grey #6B6B6B (4.4:1) on limewash */
html.cine :is(.dch-meta, .dhub-sub) { color: var(--cine-kajal-2) !important; }

/* 10. Motion ----------------------------------------------------------------- */
@view-transition { navigation: auto; }
html.cine::view-transition { background: #0F1430; }
html.cine::view-transition-old(root) { animation: 150ms cubic-bezier(.4, 0, 1, 1) both cine-a-noche; }
html.cine::view-transition-new(root) { animation: 250ms cubic-bezier(.2, .7, .2, 1) 100ms both cine-desde-noche; }
@keyframes cine-a-noche { to { opacity: 0; } }
@keyframes cine-desde-noche { from { opacity: 0; } }

/* photos develop once (js/m/develop.js adds .cine-dev, then .cine-in) */
html.cine img.cine-dev { filter: brightness(.5) saturate(.7); transition: filter var(--cine-t-light) var(--cine-ease); }
html.cine img.cine-dev.cine-in { filter: none; }

/* 11. Reduced motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html.cine img.cine-dev { filter: none; transition: none; }
  html.cine::view-transition-group(*),
  html.cine::view-transition-old(*),
  html.cine::view-transition-new(*) { animation-duration: 1ms; }
}

/* ============================================================================
   TYPO-20260920 — long-form editorial body readability (site-wide).
   Audit finding: .ab-content p / .overview p (destinations, blog, category
   intros, tour overview) render at 20px / weight 300 / line-height 1.5, which
   is light, oversized and tight — while cine already intends .ab-content at
   ~17px/1.68. Fonts (Fraunces serif + Anek Latin sans), contrast and the
   ~730px reading measure are already correct, so this only normalises SIZE,
   WEIGHT, LEADING and paragraph rhythm on genuine long-form copy. No !important,
   no font change, no layout change. Reverts by deleting this block.
   ============================================================================ */
html.cine :is(.ab-content, .overview) p,
html.cine :is(.ab-content, .overview) li{
  font-family: var(--cine-sans);
  font-weight: 400;
  font-size: 1.125rem;      /* 18px desktop */
  line-height: 1.7;
  letter-spacing: normal;
  text-align: left;
}
html.cine :is(.ab-content, .overview) p{ margin-bottom: 1.35em; }
html.cine :is(.ab-content, .overview) li{ margin-bottom: .5em; }
@media (max-width:767px){
  html.cine :is(.ab-content, .overview) p,
  html.cine :is(.ab-content, .overview) li{ font-size: 1.0625rem; line-height: 1.68; }  /* 17px mobile */
}
/* the small blog sidebar widget copy is fine at 16px but was weight 300 */
html.cine .blogtxt p{ font-weight: 400; }
/* tour detail: overview (.td-rich) + day-by-day (.td-day) prose were 15px / line-height 2.0
   (small + very loose). Lift only the body PARAGRAPHS to a comfortable itinerary read; day
   titles, hotel labels, inclusion lists and pricing keep their own sizes so they stay differentiated. */
html.cine :is(.td-rich, .td-day) p{ font-weight:400; font-size:1.0625rem; line-height:1.65; }  /* 17px */
@media (max-width:767px){
  html.cine :is(.td-rich, .td-day) p{ font-size:1rem; line-height:1.6; }  /* 16px */
}

/* homepage founder ("Hola, soy Vijay") body: a later override had dropped these paragraphs to
   14.5px in a system-font stack (inconsistent with the site's Anek Latin). Lift to a comfortable
   read and unify the font. The serif lead (.founder-lead) keeps its own editorial accent. */
html.cine .founder .founder-text p:not(.founder-lead){
  font-family: var(--cine-sans);
  font-size: 15.5px !important;   /* overrides an existing 14.5px !important on this selector */
  line-height: 1.68 !important;
}
@media (max-width:767px){
  html.cine .founder .founder-text p:not(.founder-lead){ font-size: 16px !important; line-height: 1.66 !important; }
}

/* homepage body copy weights: the hero sub, the "why us" feature-card body and the signature-journeys
   subtitle rendered at weight 300 (light); the why-us card body was also only 13.5px. Lift to weight
   400 for readability (task: no body weight below 400) and nudge the card body up a touch. Headings and
   colours unchanged. */
html.cine .p3-sub{ font-weight:400; }
html.cine .sigj-sub{ font-weight:400; }
html.cine .whyus-card p{ font-family:var(--cine-sans) !important; font-weight:400 !important; font-size:14px !important; line-height:1.55 !important; }
/* === SIGJ-DUR-20260921: the editorial signature-journey duration chip is forced to kajal ink by
   'html.cine .sigj-chip{color:var(--cine-kajal)!important}' above, yet on these cards it sits on a
   photograph with no plate -> dark ink over a dark photo gradient, effectively illegible. Give the
   editorial chip a solid indigo plate + bold ivory text so the duration reads over any image (the
   route + price sit legibly in the card body below). Desktop/tablet only; mobile intentionally hides
   the chip (see .luxv2 .sig-journeys .sigj-chip{display:none} in style.css). Delete to revert. === */
html.cine .sigj-ed .sigj-grid .sigj-chip{
  top:14px !important;bottom:auto !important;left:14px !important;
  padding:6px 12px !important;
  background:rgba(21,24,43,.90) !important;
  border:1px solid rgba(196,149,106,.6) !important;
  border-radius:999px !important;
  font-weight:700 !important;
  font-size:11px !important;
  letter-spacing:.06em !important;
  color:#FBF7F0 !important;
  text-shadow:none !important;
  box-shadow:0 2px 10px rgba(8,6,14,.4) !important;
}
/* === end SIGJ-DUR-20260921 === */