/* 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;
}

/* ==========================================================================
   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: #9030A8;       /* last light; may set text on limewash, 5.5:1 */
  --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); }

/* 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); }
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 {
  font-size: clamp(1.2rem, 3.8vw, 1.45rem) !important;
  line-height: 1.2 !important;
  font-weight: 560 !important;
  color: var(--cine-kajal) !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(216, 96, 168, .26), transparent 65%),
              radial-gradient(50vw 40vw at 0% 110%, rgba(144, 48, 168, .20), 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, 8, 20, .34) 0%, rgba(10, 8, 20, .12) 40%, rgba(10, 8, 20, .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);
}

/* 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; }
}