/* Dos mundos en una hacienda.
   Hospedaje: los colores del logo (azules y verdes, versión clara, nov 2026); foto en arco con sello,
   bordes ondulados entre secciones y cabañas en tarjetas con el precio en un círculo.
   Minka (dirección C, "cuaderno de viaje"): papel crema, polaroids, notas a mano, stickers,
   la semana como una ruta punteada y el precio como un boleto.
   Una barra superior común deja claro en cuál de los dos estás. */
:root {
  --paper: #F3E7D3;
  --surface: #FFF8EE;
  --ink: #2E1E14;
  --muted: #6E5A48;
  --line: #E2CFB2;
  --alt: #EADBC3;
  --primary: #B5603A;
  --primary-ink: #FFF8EE;
  --accent: #A9542F;
  --deep: #4A2716;
  --deep-ink: #FFF3E2;
  --deep-muted: #D9C4AA;
  --deep-line: rgba(255, 243, 226, .18);
  --hi: #E4B98A;
  --hi-ink: #2E1E14;
  --switch: #14160F;
  --head: var(--surface);
  --head-ink: var(--ink);
  --heading: #4A2716;
  --cta2: #4A2716;
  --cta2-ink: #FFF8EE;
  --blob: #E4C9A3;
  --pill: #E9D6B8;
  --pill-ink: #6E3A1F;
  --minka-band: #E6ECDC;
  --minka-ink: #17301F;
  --minka-accent: #2C6A3E;
  --minka-accent-ink: #FFFFFF;
  --river: #1C6797;
  --star: #C98A16;
  --wa: #1E7B4C;
  --switch-h: 54px;
  --display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 4px;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  --step-4: clamp(2.4rem, 1.4rem + 3.8vw, 4.6rem);
}
@media all {
  :root {
    --paper: #17110C; --surface: #22190F; --ink: #F3E7D3; --muted: #C2AD94; --line: #3B2C1F; --alt: #1D150E;
    --primary: #E08A5E; --primary-ink: #23140B; --accent: #E8A27A;
    --deep: #0E0905; --deep-ink: #F3E7D3; --deep-muted: #C2AD94; --hi: #E4B98A; --hi-ink: #23140B;
    --switch: #080604; --river: #7DB7E0; --star: #E6B24C;
    --heading: #F3E7D3; --cta2: #E4B98A; --cta2-ink: #23140B; --blob: #3A2818; --pill: #3A2818; --pill-ink: #F0C9A0;
    --minka-band: #132019; --minka-ink: #E6EDE1; --minka-accent: #B2D35B; --minka-accent-ink: #102010;
    color-scheme: dark;
  }
}
:root {
  --paper: #17110C; --surface: #22190F; --ink: #F3E7D3; --muted: #C2AD94; --line: #3B2C1F; --alt: #1D150E;
  --primary: #E08A5E; --primary-ink: #23140B; --accent: #E8A27A;
  --deep: #0E0905; --deep-ink: #F3E7D3; --deep-muted: #C2AD94; --hi: #E4B98A; --hi-ink: #23140B;
  --switch: #080604; --river: #7DB7E0; --star: #E6B24C;
  --heading: #F3E7D3; --cta2: #E4B98A; --cta2-ink: #23140B; --blob: #3A2818; --pill: #3A2818; --pill-ink: #F0C9A0;
  --minka-band: #132019; --minka-ink: #E6EDE1; --minka-accent: #B2D35B; --minka-accent-ink: #102010;
  color-scheme: dark;
}

/* Minka: "Del fruto a la barra" (elegida en Claude Design). La página sigue los colores del cacao:
   pulpa clara arriba, luego fermentación, secado y tostado, y chocolate abajo, donde están el precio y la solicitud. */
body[data-page="minka"] {
  --paper: #FBF4F1; --surface: #FFFFFF; --ink: #2B1610; --muted: #6B4A3E; --line: rgba(43, 22, 16, .14); --alt: #F6E6E4;
  --primary: #A3214A; --primary-ink: #FFFFFF; --accent: #A3214A;
  --deep: #1E0F0B; --deep-ink: #FBEFE6; --deep-muted: #E7CDBB; --deep-line: rgba(251, 239, 230, .16);
  --hi: #A3214A; --hi-ink: #FFFFFF; --switch: #14160F;
  --head: #FBF4F1; --head-ink: #2B1610; --heading: #2B1610;
  --kraft: #F6E6E4; --kraft-ink: #2B1610; --kraft-line: rgba(43, 22, 16, .2); --tape: transparent; --pola: #FFFFFF; --rule: rgba(43, 22, 16, .14);
  --c-pulpa: #FBF4F1; --c-pulpa2: #F6E6E4; --c-mazorca: #A3214A; --c-mazorca-d: #7E1636; --c-ferm: #FBE3B2; --c-sec: #EBD0AA;
  --c-tost: #8A4A2B; --c-tost2: #6A361F; --c-voz: #4A261B; --c-choco: #2B1610; --c-choco2: #3A2019; --c-cream: #FBEFE6; --c-cream2: #E7CDBB; --c-gold: #F2B33D;
  --display: "Gloock", Georgia, "Times New Roman", serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--switch-h) + 84px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, .06); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--step-0); line-height: 1.6; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: #14160F; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
p, li, dd, dt, label, figcaption { overflow-wrap: break-word; }
/* Alemán: palabras compuestas largas */
:lang(de) p, :lang(de) li, :lang(de) dd, :lang(de) h3, :lang(de) h4, :lang(de) label, :lang(de) figcaption, :lang(de) .facts span, :lang(de) .cross-title, :lang(de) .cross-desc, :lang(de) .tile span { -webkit-hyphens: auto; hyphens: auto; }
.cross-title, .cross-desc, .tile span { overflow-wrap: break-word; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p { margin: 0; }
a { color: var(--river); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--hi); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--surface); color: var(--ink); padding: 8px 14px; z-index: 100; border-radius: var(--radius); }
.skip:focus { top: 12px; }
.sel { user-select: all; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

.wrap { max-width: 1200px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 700px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 var(--step-0)/1.1 var(--body); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; text-align: center; transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: var(--step--1); }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-hi { background: var(--hi); color: var(--hi-ink); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-light { border-color: rgba(255, 255, 255, .85); color: #fff; background: rgba(0, 0, 0, .12); }
.btn.is-off { opacity: .5; cursor: default; transform: none; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Barra común: un selector con dos mundos. La píldora se desliza al cambiar de página */
/* La barra queda fija arriba al bajar por la página; la cabecera de cada mundo va justo debajo */
.switch { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 55; background: #14160F; color: rgba(255, 255, 255, .72); font-size: 0.8125rem; }
.switch-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; height: var(--switch-h); }
.switch-intro { font-family: var(--display); font-style: italic; font-size: 0.95rem; color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg { position: relative; min-width: 0; max-width: 100%; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.seg::-webkit-scrollbar { display: none; }
.seg.is-scroll { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 26px), transparent); }
/* Cada pestaña lleva el color de su sección (versión B elegida en Claude Design) */
.seg-opt { --tab: #E4B98A; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 15px; border-radius: 999px; color: rgba(255, 255, 255, .82); text-decoration: none; font-weight: 600; font-size: 0.8125rem; letter-spacing: .01em; white-space: nowrap; transition: background-color .25s ease, color .25s ease; }
.seg-home { --tab: #E4B98A; }
.seg-minka { --tab: #F3C6D3; }
.seg-eventos { --tab: #F6A47A; }
.seg-historia { --tab: #A9C8FF; }
.seg-comunidad { --tab: #B9DC98; }
.seg-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tab); }
.seg-opt .ic { display: none; color: var(--tab); }
.seg-short { display: none; }
.seg-opt[aria-current="page"] { background: var(--tab); color: #1E1B15; box-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
.seg-opt[aria-current="page"] .seg-dot { display: none; }
.seg-opt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .seg-opt:not([aria-current]):hover { color: #fff; } }
.langs { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.langs-bar { justify-self: end; gap: 2px; font-weight: 700; letter-spacing: .08em; font-size: 0.75rem; }
.langs-bar .lang { display: inline-block; padding: 5px 7px; border-radius: 3px; color: rgba(255, 255, 255, .7); text-decoration: none; }
.langs-bar .lang.on { color: #fff; background: rgba(255, 255, 255, .12); }
.langs-bar .lang.off { opacity: .45; }
.langs-menu { display: none; }

/* Cabecera de cada mundo */
.site-header { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--switch-h)); z-index: 50; background: var(--head); color: var(--head-ink); border-bottom: 1px solid var(--line); transition: box-shadow .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.site-header.is-hidden { transform: translateY(calc(-100% - 2px)); box-shadow: none; }
.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(20, 14, 8, .1); }
body[data-page="minka"] .site-header { border-bottom-color: var(--deep-line); }
.bar { display: flex; align-items: center; gap: 16px; min-height: 70px; }
.brand { display: flex; flex: none; align-items: center; text-decoration: none; color: inherit; }
.logo { height: 50px; width: auto; }
.logo-dark { display: none; }
@media all { :root .logo-light { display: none; } :root .logo-dark { display: block; } }
:root .logo-light { display: none; }
:root .logo-dark { display: block; }
.brand-minka { flex-direction: column; align-items: flex-start; gap: 3px; }
.wordmark { font-family: var(--display); font-size: 2rem; line-height: .9; letter-spacing: .01em; }
.brand-minka .by { font-size: 0.75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--deep-muted); }
.site-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--head-ink); text-decoration: none; font-weight: 500; font-size: 0.9375rem; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
body[data-page="minka"] .nav-links a::after { background: var(--hi); }
.nav-links a:hover::after { transform: scaleX(1); }
.menu-btn { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--head-ink); cursor: pointer; align-items: center; justify-content: center; }
body[data-page="minka"] .menu-btn { border-color: var(--deep-line); }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s ease; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; }
.menu-btn[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1040px) {
  .menu-btn { display: inline-flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 18px; background: var(--head); border-bottom: 1px solid var(--line); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); box-shadow: 0 18px 30px rgba(0, 0, 0, .12); max-height: calc(100vh - 70px - var(--switch-h)); max-height: calc(100dvh - 70px - var(--switch-h)); overflow-y: auto; overscroll-behavior: contain; }
  body[data-page="minka"] .site-nav { border-bottom-color: var(--deep-line); }
  .site-nav.open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: var(--step-1); }
  body[data-page="minka"] .nav-links a { border-bottom-color: var(--deep-line); }
  .nav-links a::after { display: none; }
  .site-nav .btn { align-self: flex-start; }
  .logo { height: 44px; }
}
@media (max-width: 560px) {
  .langs-bar { gap: 0; }
  .langs-bar .lang { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
}

/* Etiquetas */
.eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.kicker::before { content: ""; width: 28px; height: 1.5px; background: currentColor; }
.note { color: var(--muted); font-size: var(--step--1); }
.sub { font-family: var(--body); font-size: 0.8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; display: flex; align-items: center; gap: 16px; }
.sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.stars { color: var(--star); letter-spacing: 2px; }

/* Secciones */
.band { padding-block: clamp(64px, 9vw, 120px); }
.band-alt { background: var(--alt); }
.band-deep { background: var(--deep); color: var(--deep-ink); }
.sec-head { display: flex; flex-direction: column; gap: 12px; max-width: 46em; margin-bottom: clamp(32px, 5vw, 56px); align-items: flex-start; }
.sec-head p:not(.kicker) { color: var(--muted); font-size: var(--step-1); }
.sec-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--line); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 7vw, 96px); align-items: start; }
.split > * { min-width: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* ===== Hospedaje ===== */
.cover { position: relative; min-height: min(88vh, 820px); min-height: min(88svh, 820px); display: flex; align-items: flex-end; color: #fff; isolation: isolate; overflow: hidden; background: #2a2118; }
.cover-img { position: absolute; inset: 0; z-index: -2; }
.cover-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 14, 8, .05) 0%, rgba(20, 14, 8, .15) 40%, rgba(20, 14, 8, .78) 100%), linear-gradient(90deg, rgba(20, 14, 8, .45) 0%, rgba(20, 14, 8, 0) 60%); }
.cover-in { width: 100%; padding-block: clamp(80px, 14vh, 160px) clamp(40px, 7vh, 72px); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.cover .eyebrow { color: var(--hi); }
.cover-title { font-size: var(--step-4); max-width: 13em; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.cover-lead { font-size: var(--step-1); max-width: 32em; color: rgba(255, 255, 255, .9); }
.rating { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-weight: 500; text-decoration: none; font-size: var(--step--1); padding-block: 10px; margin-block: -10px; }
.rating:hover { text-decoration: underline; }
.cover .rating { color: rgba(255, 255, 255, .92); }

.intro-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(36px, 7vw, 100px); align-items: center; }
.intro-text { font-family: var(--display); font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.35rem); line-height: 1.28; text-wrap: pretty; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.facts li { display: flex; flex-direction: column; gap: 2px; padding: 16px 0; border-top: 1px solid var(--line); min-width: 0; }
.facts b { font-family: var(--display); font-weight: 400; font-size: var(--step-2); line-height: 1.1; }
.facts span { color: var(--muted); font-size: var(--step--1); }

.cabins { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 88px); }
.cabin { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.cabin:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.cabin:nth-child(even) .cabin-photo { order: 2; }
.cabin-photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--line); }
.cabin-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cabin-body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cabin-num { font-family: var(--display); font-size: 1rem; color: var(--accent); letter-spacing: .08em; padding-bottom: 10px; border-bottom: 1px solid var(--line); min-width: 64px; }
.cabin-kind { font-size: 0.8125rem; font-weight: 700; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }
.cabin h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.cabin-rooms { color: var(--muted); max-width: 28em; }
.cabin-price { font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 8px; }
.cabin-price b { font-family: var(--display); font-weight: 400; font-size: var(--step-2); color: var(--accent); }
.cabin-price span { color: var(--muted); font-size: var(--step--1); width: 100%; }

.river { position: relative; height: clamp(300px, 46vw, 600px); overflow: hidden; color: #fff; background: #3b3a2c; }
.river img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.river::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 8, 0) 45%, rgba(10, 12, 8, .6)); }
.river figcaption { position: absolute; left: 0; right: 0; bottom: clamp(24px, 4vw, 48px); z-index: 1; }
.river figcaption span { display: block; font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); max-width: 22em; line-height: 1.2; }

.tiles { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--radius); background: var(--line); }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile span { position: absolute; inset: auto 0 0; padding: 48px 16px 14px; color: #fff; font-weight: 600; line-height: 1.3; background: linear-gradient(transparent, rgba(12, 9, 6, .82)); }
.extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.extra { display: flex; flex-direction: column; gap: 18px; }
.extra-photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--line); }
.extra-photo img { width: 100%; height: 100%; object-fit: cover; }
.extra-body { display: flex; flex-direction: column; gap: 8px; }
.extra-body h4 { font-size: var(--step-2); }
.extra-body > p:not(.meta):not(.extra-price) { color: var(--muted); }
.meta { color: var(--accent); font-weight: 700; font-size: 0.8125rem; letter-spacing: .12em; text-transform: uppercase; }
.extra-price { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }

.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 230px); grid-auto-flow: dense; gap: 12px; }
.mosaic figure { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--line); }
.mosaic .w2 { grid-column: span 2; }
.mosaic .h2 { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mosaic figcaption { position: absolute; inset: auto 0 0; padding: 36px 14px 10px; color: #fff; font-size: var(--step--1); font-weight: 500; background: linear-gradient(transparent, rgba(12, 9, 6, .7)); }

.score { display: flex; align-items: baseline; gap: 14px; }
.score b { font-family: var(--display); font-weight: 400; font-size: clamp(4rem, 2rem + 6vw, 6.5rem); line-height: 1; }
.score .stars { font-size: var(--step-2); }
.svc { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; width: 100%; }
.svc div { padding: 14px 0; border-top: 1px solid var(--line); }
.svc dt { font-weight: 700; }
.svc dd { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.address { font-weight: 600; font-size: var(--step-1); }
.cat-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cat-btn { gap: 8px; }
.cat-btn .ic { width: 18px; height: 18px; flex: none; }
.cat-status { margin: 10px 0 0; font-size: var(--step--1); color: var(--muted); }
.cat-status:empty { display: none; }

.cross { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.cross-card { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 16px; padding-right: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.cross-photo { display: block; width: 112px; height: 112px; border-radius: 4px; overflow: hidden; }
.cross-photo img { width: 100%; height: 100%; object-fit: cover; }
.cross-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cross-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cross-title { font-family: var(--display); font-size: var(--step-2); line-height: 1.15; }
.cross-desc { color: var(--muted); font-size: var(--step--1); max-width: 40em; }
.cross-go { font-weight: 700; white-space: nowrap; color: var(--accent); }

/* ===== Minka ===== */
.mhero { background: var(--deep); color: var(--deep-ink); padding-block: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px); overflow: hidden; }
.mhero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.mhero-text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; min-width: 0; }
.mhero .eyebrow { color: var(--hi); }
.word { font-size: clamp(4.6rem, 2rem + 10vw, 9.5rem); line-height: .85; letter-spacing: -.01em; }
.entry { border-top: 1.5px solid var(--deep-ink); border-bottom: 1px solid var(--deep-line); padding-block: 12px; display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 30em; }
.entry-head { font-style: italic; font-family: var(--display); font-size: var(--step-1); color: var(--deep-muted); }
.entry-def { font-size: var(--step-1); font-weight: 500; }
.entry-n { font-weight: 700; color: var(--hi); margin-right: 4px; }
.mhero-lead { font-size: var(--step-1); color: var(--deep-muted); max-width: 32em; }
.arch { justify-self: end; width: 100%; max-width: 460px; aspect-ratio: 4 / 5.2; border-radius: 999px 999px 4px 4px; overflow: hidden; outline: 1px solid var(--deep-line); outline-offset: 10px; margin: 10px; background: #0d1a11; }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.facts-deep { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 5vw, 64px); }
.facts-deep li { border-top-color: var(--deep-line); }
.facts-deep span { color: var(--deep-muted); }

.intro-m { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.intro-m p { font-size: var(--step-1); color: var(--muted); text-wrap: pretty; }

.herbarium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.label-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); pointer-events: none; }
.lc-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; }
.lc-term { font-family: var(--display); font-size: clamp(1.9rem, 1.4rem + 1vw, 2.4rem); line-height: 1; color: var(--accent); overflow-wrap: anywhere; }
.lc-term.is-sci { font-style: italic; font-size: clamp(1.55rem, 1.2rem + .8vw, 1.9rem); }
.lc-gloss { font-family: var(--display); font-style: italic; color: var(--muted); }
.lc-gloss::before { content: "— "; }
.label-card h3 { font-family: var(--body); font-weight: 700; font-size: var(--step-0); }
.lc-text { color: var(--muted); font-size: 0.9375rem; }

.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; background: var(--deep); }
.strip figure { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #0d1a11; }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.strip figcaption { position: absolute; inset: auto 0 0; padding: 36px 14px 12px; color: #fff; font-size: var(--step--1); font-weight: 500; background: linear-gradient(transparent, rgba(6, 14, 9, .75)); }

.day-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(36px, 6vw, 80px); align-items: start; }
.timeline { list-style: none; margin: 0 0 16px; padding: 0; }
.timeline li { display: grid; grid-template-columns: 5.2rem 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.timeline time { font-family: var(--display); font-size: var(--step-1); color: var(--accent); font-variant-numeric: tabular-nums; }
.weeks { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.week-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.week { background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 20px 22px 8px; min-width: 0; }
.week h3 { font-size: var(--step-2); display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.week h3 span { font-family: var(--body); font-size: 0.75rem; font-weight: 700; color: var(--accent); letter-spacing: .14em; text-transform: uppercase; }
.week dl { margin: 0; }
.wday { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.wday dt { font-weight: 700; font-size: var(--step--1); padding-top: 2px; }
.wday dd { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.wday small { color: var(--muted); font-size: var(--step--1); }
.wday small b { color: var(--ink); font-weight: 600; margin-right: 4px; }

.h3-sm { font-size: var(--step-2); margin-top: 14px; }
.stay p { color: var(--muted); }
.stay-photos { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.stay-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--line); }
.stay-photos > :first-child { grid-column: 1 / -1; }
.stay-photos > :first-child img { aspect-ratio: 16 / 10; }

.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
.price-main { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; }
.price-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.price-big b { font-family: var(--display); font-weight: 400; font-size: clamp(3.4rem, 2rem + 5vw, 5.6rem); line-height: 1; color: var(--hi); }
.price-big span { color: var(--deep-muted); font-size: var(--step-1); }
.price-2w { font-size: var(--step-1); font-weight: 600; }
.price-dates { color: var(--deep-muted); max-width: 30em; }
.price-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; min-width: 0; }
.price-lists h3 { font-size: 0.8125rem; font-family: var(--body); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--deep-line); }
.check, .dash { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; color: var(--deep-muted); }
.check li, .dash li { padding-left: 26px; position: relative; }
.check li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--hi); border-bottom: 2px solid var(--hi); transform: rotate(-45deg); }
.dash li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 12px; height: 2px; background: var(--deep-muted); }

.faq-wrap { max-width: 880px; display: flex; flex-direction: column; gap: 28px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-family: var(--display); font-size: var(--step-2); line-height: 1.2; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--body); font-size: 1.6rem; font-weight: 300; color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 40em; }

.form-wrap { max-width: 920px; }
.apply { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: clamp(20px, 4vw, 44px); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: var(--step--1); }
.field abbr { color: #B24A2A; text-decoration: none; }
.field input, .field select, .field textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; min-height: 48px; width: 100%; }
.field textarea { resize: vertical; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #B24A2A; }
.check-field { flex-direction: row; align-items: flex-start; gap: 12px; }
.check-field input { width: 24px; height: 24px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--primary); }
.check-field label { font-weight: 400; font-size: var(--step-0); padding-block: 2px; cursor: pointer; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-status { font-weight: 600; }
.form-status.ok { color: var(--accent); }
.form-status.err { color: #B24A2A; }
.form-alt { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--muted); font-size: var(--step--1); border-top: 1px solid var(--line); padding-top: 16px; }
.link-wa { font-weight: 700; color: var(--accent); display: inline-block; padding-block: 10px; margin-block: -10px; }

/* Pie */
.site-footer { background: var(--deep); color: var(--deep-ink); padding-block: 64px 24px; }
.foot { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr 1fr; gap: 32px; }
.foot-brand { display: flex; flex-direction: column; gap: 10px; }
.foot-brand img { width: 160px; }
.wordmark-foot { font-size: 2.6rem; }
.foot-note { color: var(--deep-muted); font-size: var(--step--1); max-width: 22em; }
.foot-col { display: flex; flex-direction: column; gap: 6px; color: var(--deep-muted); font-size: var(--step--1); min-width: 0; }
.foot-col h2 { font-family: var(--body); font-size: 0.75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--deep-ink); margin-bottom: 8px; }
.foot-col a { color: var(--deep-ink); }
.foot-base { margin-top: 48px; color: var(--deep-muted); font-size: var(--step--1); }
.foot-base p { padding-top: 18px; border-top: 1px solid var(--deep-line); }

/* WhatsApp flotante */
.wa-float { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px 0 14px; min-height: 52px; border-radius: 999px; background: var(--wa); color: #fff; text-decoration: none; font-weight: 700; box-shadow: 0 10px 26px rgba(10, 20, 14, .3); }
.menu-open .wa-float { display: none; }

/* Efectos al pasar el mouse, solo en pantallas con puntero (evita estados pegados en el celular) */
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .wa-float:hover { transform: translateY(-1px); }
  .btn-outline:hover { background: var(--ink); color: var(--paper); }
  .btn-light:hover { background: #fff; color: #1a1a1a; }
  .mosaic figure:hover img { transform: scale(1.03); }
  .cross-card:hover { border-color: var(--ink); transform: translateY(-1px); }
}

/* Tablet */
@media (max-width: 1000px) {
  .herbarium { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .intro-grid, .split, .day-grid, .price-grid, .intro-m { grid-template-columns: 1fr; }
  .mhero-grid { grid-template-columns: 1fr; }
  .arch { justify-self: center; max-width: 380px; order: -1; }
  .cabin, .cabin:nth-child(even) { grid-template-columns: 1fr; gap: 22px; }
  .cabin:nth-child(even) .cabin-photo { order: 0; }
  .cabin-photo { aspect-ratio: 3 / 2; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .extras { grid-template-columns: 1fr; gap: 32px; }
  .extra { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: center; }
  .strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .strip figure { grid-column: span 2; }
  .strip figure:nth-child(-n+2) { grid-column: span 3; aspect-ratio: 4 / 3; }
  .foot { grid-template-columns: 1fr 1fr; }
}
/* Celular */
@media (max-width: 640px) {
  .cover { min-height: min(84vh, 680px); min-height: min(84svh, 680px); }
  .cover-img img { object-position: 42% 50%; }
  .cover::after { background: linear-gradient(180deg, rgba(20, 14, 8, .25) 0%, rgba(20, 14, 8, .5) 30%, rgba(20, 14, 8, .88) 100%); }
  .facts, .facts-deep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week-cols, .price-lists, .apply, .herbarium { grid-template-columns: 1fr; }
  .extra { grid-template-columns: 1fr; gap: 16px; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; gap: 8px; }
  .svc { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip figure, .strip figure:nth-child(-n+2) { grid-column: span 1; aspect-ratio: 1; }
  .strip figure:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
  .cross-card { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; padding: 14px; }
  .cross-photo { width: 80px; height: 80px; }
  .cross-go { grid-column: 1 / -1; }
  .foot { grid-template-columns: 1fr; }
  .wa-float span { display: none; }
  .wa-float { padding: 0; width: 56px; min-height: 56px; }
  .actions .btn { flex: 1 1 100%; }
  .faq summary { font-size: var(--step-1); }
  /* Minka en celular: primero el texto y el botón, después la foto */
  .arch { order: 0; max-width: 300px; margin-top: 4px; }
  /* Cabecera más baja para dejar más pantalla al contenido */
  .bar { min-height: 62px; }
  .logo { height: 40px; }
  .wordmark { font-size: 1.75rem; }
  .menu-btn { width: 44px; height: 44px; }
  .site-nav { max-height: calc(100vh - 62px - var(--switch-h)); max-height: calc(100dvh - 62px - var(--switch-h)); }
}
/* Celular en horizontal: pantallas bajas */
@media (max-height: 520px) and (orientation: landscape) {
  .bar { min-height: 56px; }
  .logo { height: 36px; }
  .wordmark { font-size: 1.6rem; }
  .brand-minka .by { display: none; }
  .cover-in { padding-top: 48px; padding-bottom: 32px; }
  .cover-title { font-size: clamp(2rem, 1.2rem + 3vw, 2.8rem); }
  .site-nav { max-height: calc(100vh - 56px - var(--switch-h)); max-height: calc(100dvh - 56px - var(--switch-h)); }
}

/* ===== v4: íconos, datos del catálogo, mapa, testimonios, visor de fotos y movimiento ===== */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 18px; height: 18px; }
.btn .ic { margin-left: -4px; }

/* Servicios incluidos */
.amenities { margin: calc(-1 * clamp(8px, 2vw, 20px)) 0 clamp(40px, 6vw, 72px); }
.amenities .sub { margin-bottom: 14px; }
.amenities ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.amenities li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-weight: 600; font-size: 0.9375rem; line-height: 1.3; min-width: 0; }
.amenities .ic { width: 26px; height: 26px; color: var(--accent); }

/* Ficha de cada cabaña (catálogo) */
.cabin-tagline { font-family: var(--display); font-style: italic; font-size: var(--step-1); color: var(--muted); line-height: 1.35; max-width: 26em; }
.rooms { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); margin-top: 6px; }
.rooms-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.room { padding: 12px 14px; min-width: 0; }
.rooms-2 .room + .room { border-left: 1px solid var(--line); }
.room-name { font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: flex; flex-direction: column; gap: 2px; }
.room-name span { letter-spacing: .01em; text-transform: none; font-weight: 500; font-size: 0.8125rem; }
.room ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.9375rem; }
.room li { display: flex; align-items: center; gap: 8px; }
.room .ic, .room-bath .ic { color: var(--accent); }
.room-bath { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.ideal { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.ideal span { font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.ideal em { font-style: normal; font-size: 0.8125rem; padding: 5px 11px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.cabin-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Mapa del lodge */
.map-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "map head" "map chips" "map card" "map places"; grid-template-rows: auto auto auto 1fr; column-gap: clamp(28px, 4vw, 56px); row-gap: 22px; align-items: start; }
.map-head { grid-area: head; margin-bottom: 0; }
.map-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 8px; }
.map { grid-area: map; position: sticky; top: 96px; }
.map-cards { grid-area: card; }
.map-places { grid-area: places; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 0.9375rem/1 var(--body); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.chip-n { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--alt); color: var(--ink); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0; }
.chip[aria-pressed="true"] .chip-n { background: rgba(255, 255, 255, .22); color: inherit; }
.map-canvas { position: relative; container-type: inline-size; border-radius: 2.5% / 3.1%; box-shadow: 0 1px 0 var(--line), 0 18px 40px rgba(40, 28, 16, .14); }
.map-canvas img { width: 100%; border-radius: 2.5% / 3.1%; }
.map figcaption { margin-top: 12px; }
.pin { position: absolute; transform: translate(-50%, -50%); width: 30px; width: max(26px, 5.4cqw); aspect-ratio: 1; padding: 0; border-radius: 50%; border: 2px solid #fff; background: #fff; color: #2A1F17; font: 700 12px/1 var(--body); font-size: max(11px, 1.9cqw); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .2s ease; z-index: 1; --tx: -50%; }
.pin-cabin { background: #7A3F22; color: #fff; }
.pin.is-on, .pin.is-hl { transform: translate(-50%, -50%) scale(1.3); z-index: 3; }
.pin.is-on { background: #A24E21; }
.pin.is-hl.pin-place { background: #2A1F17; color: #fff; }
.pin.is-on::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid #A24E21; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.75); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.pin-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(var(--tx)) translateY(4px); white-space: nowrap; background: #fff; color: #1E1B15; font: 600 11px/1.2 var(--body); font-style: normal; padding: 6px 9px; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.tip-r { --tx: 0%; } .tip-r .pin-tip { left: auto; right: -6px; }
.tip-l { --tx: 0%; } .tip-l .pin-tip { left: -6px; }
.pin.is-on .pin-tip, .pin.is-hl .pin-tip, .pin:focus-visible .pin-tip { opacity: 1; transform: translateX(var(--tx)) translateY(0); }
@media (hover: hover) and (pointer: fine) { .pin:hover { transform: translate(-50%, -50%) scale(1.18); z-index: 4; } .pin:hover .pin-tip { opacity: 1; transform: translateX(var(--tx)) translateY(0); } }
.pin:focus-visible { outline: 3px solid var(--hi); outline-offset: 2px; }
.map-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.map-card[hidden] { display: none; }
.map-card.enter { animation: cardIn .4s cubic-bezier(.2, .7, .2, 1); }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } }
.map-card-img { display: block; width: 112px; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--line); }
.map-card-img img { width: 100%; height: 100%; object-fit: cover; }
.map-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.map-card .cabin-kind { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.map-card .chip-n { width: 24px; height: 24px; font-size: 0.75rem; background: #7A3F22; color: #fff; }
.map-card h3 { font-size: var(--step-2); }
.map-card-rooms { color: var(--muted); font-size: var(--step--1); }
.map-card .cabin-price { margin: 2px 0 4px; }
.map-card-links { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 700; font-size: var(--step--1); }
.map-card-links a { color: var(--accent); padding-block: 10px; margin-block: -8px; }
/* Nombre del punto: con JS hay una sola etiqueta y se coloca donde no tape otros números ni se salga del mapa */
.js .map-canvas .pin-tip { display: none; }
.map-tip { position: absolute; left: 0; top: 0; z-index: 6; white-space: nowrap; background: #fff; color: #1E1B15; font: 600 12px/1.2 var(--body); font-size: clamp(11px, 1.45cqw, 13px); padding: 6px 9px; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); pointer-events: none; opacity: 0; transition: opacity .16s ease; }
.map-tip.is-shown { opacity: 1; }
.map-tip.is-docked { background: #2A1F17; color: #fff; }
.map-card { scroll-margin: 96px 0 16px; }
.map-card-num { display: grid; place-items: center; align-content: center; gap: 2px; background: var(--alt); color: #7A3F22; }
.map-card-num .ic { width: 26px; height: 26px; stroke-width: 1.7; }
.map-card-num b { font: 700 1.5rem/1 var(--display); color: var(--ink); }
.pin-place.is-on { background: #2A1F17; color: #fff; }
.pin-place.is-on::after { border-color: #2A1F17; }
.places button[aria-pressed="true"] { color: var(--accent); font-weight: 600; }
.places button[aria-pressed="true"] .pn { background: #2A1F17; border-color: #2A1F17; color: #fff; }
.map-places .sub { margin-bottom: 6px; }
.places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.places button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: 400 0.9375rem/1.3 var(--body); text-align: left; cursor: pointer; transition: color .2s ease; }
.places button:focus-visible { outline: 3px solid var(--hi); outline-offset: 2px; }
.places button.is-hl { color: var(--accent); }
.pn { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 0.75rem; font-weight: 700; transition: background-color .2s ease, color .2s ease; }
.places button.is-hl .pn { background: #2A1F17; border-color: #2A1F17; color: #fff; }

/* Minka: fichas con foto e invitación */
.lc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.lc-head > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lc-photo { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: var(--alt); display: grid; place-items: center; }
.lc-photo img { width: 100%; height: 100%; object-fit: cover; }
.lc-icon { border-style: dashed; color: var(--accent); background: transparent; }
.lc-icon .ic { width: 28px; height: 28px; }
.label-cta { background: var(--deep); color: var(--deep-ink); border-radius: 2px; padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; justify-content: flex-end; min-width: 0; }
.lc-cta-title { font-family: var(--display); font-size: var(--step-2); line-height: 1.15; }
.label-cta p:not(.lc-cta-title) { color: var(--deep-muted); font-size: 0.9375rem; }

/* Testimonios */
.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 28px; }
.t-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 26px 24px; display: flex; flex-direction: column; gap: 16px; }
.t-card blockquote { margin: 0; font-family: var(--display); font-size: var(--step-1); line-height: 1.4; }
.t-card blockquote::before { content: "\201C"; display: block; font-size: 3rem; line-height: .6; color: var(--accent); margin-bottom: 6px; }
.t-card figcaption { display: flex; flex-direction: column; gap: 2px; font-size: var(--step--1); color: var(--muted); margin-top: auto; }
.t-card figcaption b { color: var(--ink); font-size: var(--step-0); }
.t-card figcaption em { font-style: normal; font-weight: 700; color: var(--accent); }
.t-photo { display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--alt); }
.t-photo img { width: 100%; height: 100%; object-fit: cover; }
.t-photo-empty { border: 1.5px dashed var(--muted); background: transparent; opacity: .5; }
.voices.is-template .t-card { border-style: dashed; background: transparent; }
.voices.is-template blockquote, .voices.is-template figcaption b { color: var(--muted); }
.tpl-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--step--1); color: var(--muted); margin-bottom: 14px; }
.tpl-badge { font-size: 0.6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; background: #F3D9A4; color: #4A3200; }
.first-gen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(24px, 4vw, 44px); background: var(--alt); border-radius: 4px; }
.first-gen-main { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.first-gen-main h3 { font-size: var(--step-3); }
.first-gen-main p { color: var(--muted); font-size: var(--step-1); max-width: 34em; }
.first-gen-proof { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-left: clamp(0px, 3vw, 40px); border-left: 1px solid var(--line); }
.score-sm b { font-size: clamp(3rem, 2rem + 3vw, 4.2rem); }
.first-gen-proof a { font-weight: 700; color: var(--accent); padding-block: 10px; margin-block: -6px; }

/* Fotos que se amplían */
.zoom { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: zoom-in; border-radius: inherit; }
.zoom:focus-visible { outline: 3px solid var(--hi); outline-offset: -3px; }
.stay-photos .zoom { border-radius: var(--radius); overflow: hidden; }
.mosaic figcaption, .strip figcaption { pointer-events: none; }
body.lb-open { overflow: hidden; }
.lb { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 8, 6, .97); color: #fff; overflow: hidden; }
.lb::backdrop { background: rgba(10, 8, 6, .85); }
.lb[open] { display: grid; place-items: center; animation: fadeIn .3s ease both; }
.lb.closing { animation: fadeOut .22s ease both; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
.lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(94vw, 1200px); padding: 68px 16px 84px; }
.lb-img { max-width: 100%; max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); width: auto; height: auto; border-radius: 4px; transition: opacity .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.lb[open] .lb-img { animation: lbZoom .45s cubic-bezier(.2, .7, .2, 1) both; }
.lb-img.swap { opacity: 0; transform: scale(.97); }
@keyframes lbZoom { from { transform: scale(.94); opacity: 0; } }
.lb-cap { font-size: var(--step-0); color: rgba(255, 255, 255, .86); text-align: center; }
.lb-count { position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); left: calc(20px + env(safe-area-inset-left, 0px)); margin: 0; font-size: var(--step--1); color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.lb-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lb-close { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); }
.lb-prev { left: calc(14px + env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.lb-next { right: calc(14px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }

/* Movimiento: entrada, aparición al hacer scroll, paralaje y cambio de página */
@view-transition { navigation: auto; }
.switch { view-transition-name: topbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes kb { from { transform: scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .cover-img img, .arch img, .arch-photo img { animation: kb 2.6s cubic-bezier(.2, .7, .2, 1) both; }
  .cover-in > *, .mhero-text > *, .arch, .hero-b-text > *, .hero-b-art, .mc-text > *, .collage { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .cover-in > :nth-child(2), .mhero-text > :nth-child(2), .hero-b-text > :nth-child(2), .mc-text > :nth-child(2) { animation-delay: .08s; }
  .cover-in > :nth-child(3), .mhero-text > :nth-child(3), .arch, .hero-b-text > :nth-child(3), .hero-b-art, .mc-text > :nth-child(3), .collage { animation-delay: .16s; }
  .cover-in > :nth-child(4), .mhero-text > :nth-child(4), .hero-b-text > :nth-child(4), .mc-text > :nth-child(4) { animation-delay: .24s; }
  .cover-in > :nth-child(5), .mhero-text > :nth-child(5), .hero-b-text > :nth-child(5), .mc-text > :nth-child(5) { animation-delay: .32s; }
  .seal-text, .stamp-text { transform-box: view-box; transform-origin: 50% 50%; animation: spin 48s linear infinite; }
  .mhero-text > :nth-child(6) { animation-delay: .4s; }
  .reveal-ready .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
  .reveal-ready .reveal.is-in { opacity: 1; transform: none; }
  .reveal-ready .cabin.reveal { opacity: 1; transform: none; }
  .reveal-ready .cabin.reveal .cabin-photo { clip-path: inset(8% 8% 8% 8%); transition: clip-path 1.1s cubic-bezier(.2, .7, .2, 1); }
  .reveal-ready .cabin.reveal .cabin-photo img { transform: scale(1.12); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
  .reveal-ready .cabin.reveal .cabin-body { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1) .15s, transform .9s cubic-bezier(.2, .7, .2, 1) .15s; }
  .reveal-ready .cabin.reveal.is-in .cabin-photo { clip-path: inset(0 0 0 0); }
  .reveal-ready .cabin.reveal.is-in .cabin-photo img { transform: none; }
  .reveal-ready .cabin.reveal.is-in .cabin-body { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .river img { position: absolute; left: 0; top: -12%; height: 124%; animation: drift linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes drift { from { transform: translateY(-6%); } to { transform: translateY(6%); } }
  }
}

@media (max-width: 1000px) {
  .map-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "chips" "map" "card" "places"; grid-template-rows: none; }
  .map { position: static; }
}
@media (max-width: 900px) {
  .amenities ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voices, .first-gen { grid-template-columns: 1fr; }
  .first-gen-proof { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 20px; width: 100%; }
}
@media (max-width: 640px) {
  .amenities ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .amenities li { flex-direction: row; align-items: center; padding: 12px; font-size: 0.875rem; }
  .amenities .ic { width: 22px; height: 22px; }
  .map-card { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .map-card-img { width: 84px; }
  .lb-prev, .lb-next { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: none; }
  .lb-prev { left: calc(50% - 64px); }
  .lb-next { right: calc(50% - 64px); }
}
@media (max-width: 420px) {
  .places { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 370px) {
  .rooms-2 { grid-template-columns: minmax(0, 1fr); }
  .rooms-2 .room + .room { border-left: 0; border-top: 1px solid var(--line); }
}

/* Barra común en pantallas medianas y chicas */
@media (max-width: 1100px) {
  .switch-intro { display: none; }
  .switch-in { grid-template-columns: minmax(0, 1fr) auto; }
  .seg { justify-self: start; }
}
@media (max-width: 900px) {
  :root { --switch-h: 52px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  :root { --switch-h: 46px; }
  .seg-opt { min-height: 36px; }
}
/* Celular: las cinco pestañas en una fila con icono y nombre corto; los idiomas pasan al menú */
@media (max-width: 760px) {
  :root { --switch-h: 64px; }
  .switch-in { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: max(6px, env(safe-area-inset-left, 0px)); padding-right: max(6px, env(safe-area-inset-right, 0px)); }
  .seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .seg-opt { min-width: 0; flex-direction: column; gap: 3px; min-height: 52px; padding: 0 2px; border-radius: 14px; font-size: .75rem; letter-spacing: 0; }
  .seg-opt .ic { display: block; width: 20px; height: 20px; }
  .seg-opt[aria-current="page"] .ic { color: #1E1B15; }
  .seg-dot, .seg-long { display: none; }
  .seg-short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .langs-bar { display: none; }
  .langs-menu { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
  .langs-menu .lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--head-ink); font-weight: 600; text-decoration: none; }
  .langs-menu .lang.on { background: var(--hi); border-color: transparent; color: var(--hi-ink); }
  .langs-menu .lang.off { opacity: .5; }
}
@media (max-width: 380px) {
  .seg-opt { padding: 0; letter-spacing: -.02em; }
}

/* ===== Hospedaje · dirección B: tierra y cacao ===== */
body[data-page="home"] .band:not(.band-cacao) :is(h2, h3), body[data-page="home"] .intro-text { color: var(--heading); }
.btn-cream { background: var(--surface); color: var(--heading); }
.btn-deep { background: var(--cta2); color: var(--cta2-ink); }
.btn-minka { background: var(--minka-accent); color: var(--minka-accent-ink); }
.pill-eyebrow { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font-size: 0.75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

.hero-b { padding-block: clamp(32px, 5vw, 64px) clamp(36px, 5vw, 72px); overflow: hidden; }
.hero-b-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero-b-text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; min-width: 0; }
.hero-b-title { font-size: clamp(2.6rem, 1.3rem + 4.3vw, 4.8rem); line-height: .98; color: var(--heading); }
.hero-b-lead { font-size: var(--step-1); color: var(--muted); max-width: 32em; }
.hero-b .rating { color: var(--ink); }
.hero-b-art { position: relative; width: 100%; max-width: 600px; aspect-ratio: 16 / 15; justify-self: center; }
.blob { position: absolute; left: -6%; top: 0; width: 112%; height: 100%; fill: var(--blob); }
.arch-photo { position: absolute; left: 15%; top: 2%; width: 66%; height: 93%; margin: 0; overflow: hidden; border-radius: 50% 50% 28px 28px / 38% 38% 28px 28px; box-shadow: 0 24px 50px rgba(74, 39, 22, .25); background: var(--line); }
.arch-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.seal { position: absolute; left: 1%; bottom: 4%; width: 25%; min-width: 92px; max-width: 150px; height: auto; aspect-ratio: 1; overflow: visible; filter: drop-shadow(0 8px 16px rgba(74, 39, 22, .25)); }
.seal-bg { fill: var(--primary); }
.seal-ring { fill: none; stroke: var(--primary-ink); stroke-opacity: .45; }
.seal-text { fill: var(--primary-ink); font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: 2.6px; }
.seal-leaf { fill: none; stroke: var(--primary-ink); stroke-width: 2; stroke-linecap: round; }

.wave { display: block; width: 100%; height: clamp(30px, 5vw, 70px); margin-bottom: -1px; }
.wave-to-cacao { background: var(--paper); fill: var(--deep); }
.wave-from-cacao { background: var(--deep); fill: var(--paper); }
.wave-to-minka { background: var(--alt); fill: var(--minka-band); }
.wave-to-foot { background: var(--minka-band); fill: var(--deep); }
.wave + .band, .wave + .minka-teaser { padding-top: clamp(24px, 4vw, 48px); }
.wave-from-cacao + .band { background: var(--paper); position: relative; }

.band-cacao { background: var(--deep); color: var(--deep-ink); }
.band-cacao .sec-head h2 { color: var(--deep-ink); }
.band-cacao .sec-head p:not(.kicker), .band-cacao .note { color: var(--deep-muted); }
.band-cacao .kicker { color: var(--hi); }
.band-cacao .sub { color: var(--deep-muted); }
.band-cacao .sub::after { background: var(--deep-line); }
.band-cacao .amenities li { background: rgba(255, 248, 238, .06); border-color: var(--deep-line); color: var(--deep-ink); }
.band-cacao .amenities .ic { color: var(--hi); }
.band-cacao .sec-foot { border-top-color: var(--deep-line); }

.cabin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); align-items: start; }
.cabin-card { background: var(--surface); color: var(--ink); border-radius: 28px; padding: 14px 14px 26px; display: flex; flex-direction: column; min-width: 0; }
.cc-photo { position: relative; margin-bottom: 20px; }
.cc-photo figure { margin: 0; height: clamp(220px, 25vw, 320px); border-radius: 180px 180px 16px 16px; overflow: hidden; background: var(--line); }
.cc-photo img { width: 100%; height: 100%; object-fit: cover; }
.price-badge { position: absolute; right: 16px; bottom: -28px; margin: 0; width: 104px; height: 104px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; box-shadow: 0 10px 22px rgba(74, 39, 22, .3); }
.price-badge b { font-family: var(--display); font-weight: 400; font-size: 1.85rem; line-height: 1; }
.price-badge span { font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.15; max-width: 84px; }
.cc-body { display: flex; flex-direction: column; gap: 10px; padding: 0 12px; align-items: flex-start; }
.cabin-card .cabin-kind { margin-top: 4px; padding-right: 108px; }
.cabin-card h3 { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.6rem); color: var(--heading); }
.cabin-card .rooms { background: var(--paper); border-color: var(--line); }
.cabin-card .ideal em { background: var(--surface); }
.cc-price { color: var(--muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; }

body[data-page="home"] .tile { border-radius: 50% 50% 12px 12px / 37.5% 37.5% 12px 12px; }
body[data-page="home"] .extra-photo { border-radius: 160px 160px 14px 14px; }
body[data-page="home"] .mosaic figure { border-radius: 18px; }
body[data-page="home"] .mosaic figure.w2.h2 { border-radius: 220px 220px 18px 18px; }
body[data-page="home"] .reviews { background: var(--surface); border-radius: 28px; padding: clamp(24px, 4vw, 40px); }
body[data-page="home"] .chip, body[data-page="home"] .map-card, body[data-page="home"] .amenities li { border-radius: 18px; }
body[data-page="home"] .chip { border-radius: 999px; }

.river-edge { position: absolute; left: 0; width: 100%; height: clamp(14px, 3vw, 40px); z-index: 2; fill: var(--paper); pointer-events: none; }
.river-top { top: -1px; }
.river-bottom { bottom: -1px; }
.river figcaption { bottom: clamp(36px, 6vw, 76px); }

.minka-teaser { background: var(--minka-band); color: var(--minka-ink); padding-block: clamp(32px, 5vw, 56px) clamp(48px, 7vw, 88px); }
.teaser-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 32px; align-items: end; margin-bottom: clamp(24px, 4vw, 40px); }
.teaser-head .kicker { color: var(--minka-accent); grid-column: 1 / -1; }
.teaser-head h2 { grid-column: 1; color: var(--minka-ink); }
.teaser-head p:not(.kicker) { grid-column: 1; max-width: 40em; color: var(--minka-ink); opacity: .82; font-size: var(--step-1); }
.teaser-head .btn { grid-column: 2; grid-row: 2 / span 2; }
.teaser-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 36px); }
.teaser-photos a { display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; }
.teaser-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: clamp(60px, 10vw, 140px) 8px; background: var(--line); }
.teaser-photos li:nth-child(2) img { border-radius: 8px clamp(60px, 10vw, 140px); }
.teaser-photos span { font-family: var(--display); font-size: var(--step-2); line-height: 1.15; }
@media (hover: hover) and (pointer: fine) { .teaser-photos a:hover span { text-decoration: underline; text-underline-offset: 4px; } }

@media (max-width: 900px) {
  .hero-b-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-b-art { order: -1; width: 92%; max-width: 460px; }
  .cabin-grid { grid-template-columns: minmax(0, 1fr); }
  .teaser-head { grid-template-columns: minmax(0, 1fr); }
  .teaser-head .btn { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (max-width: 640px) {
  .hero-b-art { width: 100%; max-width: 380px; }
  .teaser-photos { grid-template-columns: minmax(0, 1fr); }
  .teaser-photos img { aspect-ratio: 16 / 10; }
  .price-badge { width: 88px; height: 88px; right: 10px; bottom: -22px; }
  .price-badge b { font-size: 1.5rem; }
  .price-badge span { font-size: 0.625rem; max-width: 70px; }
  .cabin-card { border-radius: 22px; padding: 10px 10px 22px; }
  .cabin-card .cabin-kind { padding-right: 92px; }
  .cc-body { padding: 0 8px; }
}

/* ===== Minka · dirección C: cuaderno de viaje ===== */

.hand { font-family: var(--hand); font-weight: 700; color: var(--accent); letter-spacing: 0; text-transform: none; }
h2 .hand { display: inline-block; font-size: .6em; margin-left: .25em; rotate: -2deg; }
body[data-page="minka"] .site-header { border-bottom: 2px dashed var(--line); }
body[data-page="minka"] .brand-minka .by { color: var(--muted); }
body[data-page="minka"] .menu-btn { border-color: var(--line); }
body[data-page="minka"] .kicker { font-family: var(--hand); font-size: 1.65rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
body[data-page="minka"] .sec-head h2, body[data-page="minka"] .weeks > h2 { color: var(--ink); }

.mhero-c { padding-block: clamp(32px, 5vw, 64px) clamp(28px, 4vw, 48px); overflow: hidden; }
.mc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.mc-text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; min-width: 0; }
.mhero-c .eyebrow { color: var(--accent); }
.word-c { position: relative; font-size: clamp(4.6rem, 2rem + 9vw, 9.5rem); line-height: .85; color: var(--ink); padding-bottom: 10px; }
.scribble { position: absolute; left: 2%; bottom: -12px; width: 92%; height: 26px; fill: none; stroke: var(--primary); stroke-width: 5; stroke-linecap: round; }
.torn { width: 100%; max-width: 32em; margin-top: 10px; padding: 18px 26px; background: var(--pola); rotate: -1.2deg; filter: drop-shadow(0 8px 14px rgba(80, 60, 20, .12)); clip-path: polygon(0 6%, 4% 0, 9% 7%, 15% 1%, 21% 6%, 27% 0, 33% 5%, 39% 1%, 45% 7%, 51% 0, 57% 6%, 63% 1%, 69% 7%, 75% 0, 81% 6%, 87% 1%, 93% 6%, 100% 0, 100% 94%, 95% 100%, 89% 93%, 83% 99%, 77% 94%, 71% 100%, 65% 95%, 59% 99%, 53% 93%, 47% 100%, 41% 94%, 35% 99%, 29% 93%, 23% 100%, 17% 95%, 11% 99%, 5% 93%, 0 100%); }
.torn .entry-head { font-family: var(--display); font-style: italic; font-size: var(--step-1); color: var(--muted); }
.torn .entry-def { font-size: var(--step-1); font-weight: 500; }
.torn .entry-n { color: var(--accent); font-weight: 700; margin-right: 4px; }
.mc-lead { font-size: var(--step-1); color: var(--muted); max-width: 32em; }

.collage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1.08; justify-self: center; }
.pola { margin: 0; background: var(--pola); padding: clamp(8px, 1.1vw, 14px) clamp(8px, 1.1vw, 14px) 0; box-shadow: 0 18px 36px rgba(60, 45, 15, .2); }
.pola img { display: block; width: 100%; object-fit: cover; background: var(--line); }
.pola figcaption { font-family: var(--hand); font-weight: 700; font-size: clamp(1.15rem, .9rem + .8vw, 1.7rem); line-height: 1.1; text-align: center; color: var(--ink); padding: 8px 4px 12px; }
.collage .pola { position: absolute; }
.pola-1 { left: 3%; top: 3%; width: 58%; rotate: -4deg; z-index: 1; }
.pola-1 img { aspect-ratio: 4 / 5; object-position: 50% 60%; }
.pola-2 { right: 0; top: 46%; width: 42%; rotate: 6deg; z-index: 2; }
.pola-2 img { aspect-ratio: 11 / 12; }
.pola-3 { right: 4%; top: 0; width: 34%; rotate: 9deg; }
.pola-3 img { aspect-ratio: 8 / 7; }
.tape { position: absolute; width: 18%; height: 5%; background: var(--tape); z-index: 3; }
.tape-1 { left: 20%; top: 1%; rotate: -8deg; }
.tape-2 { right: 14%; top: 44%; rotate: 4deg; }
.stamp { position: absolute; left: 44%; top: 63%; width: 24%; min-width: 86px; z-index: 4; rotate: -12deg; overflow: visible; }
.stamp-bg { fill: var(--paper); fill-opacity: .9; stroke: var(--primary); stroke-width: 3; }
.stamp-ring { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 4 4; }
.stamp-text { fill: var(--primary); font-family: var(--body); font-size: 11.5px; font-weight: 700; letter-spacing: 3px; }
.stamp-word { fill: var(--primary); font-family: var(--display); font-size: 22px; }
.hand-note { position: absolute; left: 1%; bottom: 0; width: 44%; font-family: var(--hand); font-weight: 700; font-size: clamp(1.25rem, .95rem + 1vw, 1.9rem); line-height: 1.1; color: var(--accent); text-align: center; rotate: -3deg; }

.facts-c { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 52px); }
.facts-c li { border: 2px solid var(--ink); border-radius: 16px; background: var(--surface); padding: 14px 16px; box-shadow: 4px 5px 0 var(--kraft); }
.facts-c li:nth-child(odd) { rotate: -1deg; }
.facts-c li:nth-child(even) { rotate: .8deg; }

body[data-page="minka"] .label-card { border: 2px solid var(--ink); border-radius: 22px; background: var(--surface); box-shadow: 4px 5px 0 var(--kraft); }
body[data-page="minka"] .label-card::before { display: none; }
body[data-page="minka"] .herbarium > li:nth-child(odd) { rotate: -.8deg; }
body[data-page="minka"] .herbarium > li:nth-child(even) { rotate: .7deg; }
body[data-page="minka"] .herbarium > li:nth-child(3) { border-color: var(--primary); }
body[data-page="minka"] .lc-term { color: var(--ink); }
body[data-page="minka"] .lc-photo { border: 2px solid var(--ink); }
body[data-page="minka"] .lc-icon { border-style: dashed; color: var(--accent); }
body[data-page="minka"] .label-cta { background: var(--kraft); color: var(--kraft-ink); border-radius: 22px; border: 2px dashed var(--kraft-line); }
body[data-page="minka"] .label-cta p:not(.lc-cta-title) { color: var(--kraft-ink); }
body[data-page="minka"] .lc-cta-title { font-family: var(--hand); font-weight: 700; font-size: 2rem; line-height: 1.05; }

.pola-band { padding-block: clamp(44px, 6vw, 80px); }
.pola-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2.4vw, 32px); }
.pola-row .pola { position: relative; width: calc(20% - 26px); padding: 10px 10px 0; }
.pola-row .pola img { aspect-ratio: 1; }
.pola-row .pola:nth-child(odd) { rotate: -3deg; }
.pola-row .pola:nth-child(even) { rotate: 2.5deg; }
.pola-row .pola:nth-child(3) { rotate: -1deg; }
.pola .zoom { height: auto; }

.notebook { position: relative; margin-bottom: 14px; padding: 6px 20px 6px 66px; background-color: var(--pola); background-image: repeating-linear-gradient(180deg, transparent 0, transparent 47px, var(--rule) 47px, var(--rule) 48px); box-shadow: 0 14px 30px rgba(60, 45, 15, .12); }
.notebook::before { content: ""; position: absolute; left: 48px; top: 0; bottom: 0; width: 1.5px; background: #E8A08A; opacity: .8; }
.timeline-c { margin: 0; }
.timeline-c li { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 12px; align-items: center; min-height: 48px; padding: 0; border-top: 0; line-height: 1.5; }
.timeline-c time { font-family: var(--hand); font-weight: 700; font-size: 1.7rem; color: var(--accent); }

.route-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.route { min-width: 0; }
.route-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 16px; }
.route-title b { font-family: var(--display); font-weight: 400; font-size: var(--step-2); }
.route-title .hand { font-size: 1.5rem; }
.route-stops { list-style: none; margin: 0; padding: 0; position: relative; }
.route-stops::before { content: ""; position: absolute; left: 10px; top: 12px; bottom: 16px; border-left: 3px dotted var(--ink); opacity: .5; }
.stop { position: relative; padding: 0 0 18px 42px; }
.stop-dot { position: absolute; left: 0; top: 5px; width: 23px; height: 23px; border-radius: 50%; background: var(--ink); border: 4px solid var(--paper); box-shadow: 0 0 0 2px var(--ink); }
.stop.is-key .stop-dot { background: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.stop.is-end .stop-dot { background: var(--paper); border: 3px dashed var(--ink); box-shadow: none; }
.stop-day { font-family: var(--hand); font-weight: 700; font-size: 1.6rem; line-height: 1.15; }
.stop-what { font-weight: 500; }
.stop-more { font-size: var(--step--1); color: var(--muted); }
.stop-more b { color: var(--ink); font-weight: 600; margin-right: 4px; }

.stay-pola { gap: 18px !important; }
.stay-pola .zoom { background: var(--pola); padding: 10px 10px 30px; border-radius: 2px; overflow: visible; box-shadow: 0 14px 28px rgba(60, 45, 15, .16); }
.stay-pola .zoom img { border-radius: 0; }
.stay-pola > :nth-child(1) { rotate: -1.4deg; }
.stay-pola > :nth-child(2) { rotate: 2deg; }
.stay-pola > :nth-child(3) { rotate: -2deg; }

body[data-page="minka"] .t-card { position: relative; border: 0; border-radius: 2px; background: var(--pola); box-shadow: 0 14px 28px rgba(60, 45, 15, .14); rotate: -.6deg; }
body[data-page="minka"] .t-card:nth-child(even) { rotate: .8deg; }
body[data-page="minka"] .t-card::after { content: ""; position: absolute; top: -12px; left: calc(50% - 55px); width: 110px; height: 26px; background: var(--tape); rotate: -3deg; }
body[data-page="minka"] .voices.is-template .t-card { background: transparent; border: 2px dashed var(--line); box-shadow: none; }
body[data-page="minka"] .first-gen { background: var(--kraft); color: var(--kraft-ink); border-radius: 18px; }
body[data-page="minka"] .first-gen-main h3 { color: var(--ink); }
body[data-page="minka"] .first-gen-proof { border-left-color: var(--kraft-line); }

.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--kraft); color: var(--kraft-ink); border-radius: 18px; box-shadow: 0 18px 36px rgba(60, 45, 15, .16); }
.ticket::before, .ticket::after { content: ""; position: absolute; left: calc(55.55% - 18px); width: 36px; height: 36px; border-radius: 50%; background: var(--paper); }
.ticket::before { top: -18px; }
.ticket::after { bottom: -18px; }
.ticket-main { padding: clamp(24px, 4vw, 52px); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; min-width: 0; }
.ticket-stub { padding: clamp(24px, 4vw, 52px); border-left: 2px dashed var(--kraft-line); display: grid; gap: 22px; align-content: center; min-width: 0; }
.ticket-label { font-size: 0.75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.ticket-title { font-family: var(--hand); font-weight: 700; font-size: 2.3rem; line-height: 1; color: var(--accent); }
.ticket .price-big b { color: var(--ink); }
.ticket .price-big span, .ticket .price-dates, .ticket .price-2w { color: var(--kraft-ink); }
.ticket-stub h3 { font-family: var(--body); font-size: 0.8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--kraft-line); color: var(--kraft-ink); }
.ticket .check, .ticket .dash { color: var(--kraft-ink); }
.ticket .check li::before { border-color: var(--primary); }
.ticket .dash li::before { background: var(--kraft-ink); }

body[data-page="minka"] .apply { position: relative; border: 0; border-radius: 4px; background: var(--pola); box-shadow: 0 16px 32px rgba(60, 45, 15, .12); }
body[data-page="minka"] .apply::before { content: ""; position: absolute; top: -13px; left: calc(50% - 60px); width: 120px; height: 28px; background: var(--tape); rotate: 2deg; }

@media (max-width: 1040px) {
  body[data-page="minka"] .nav-links a, body[data-page="minka"] .site-nav { border-bottom-color: var(--line); }
}
@media (max-width: 900px) {
  .mc-grid { grid-template-columns: minmax(0, 1fr); }
  .collage { max-width: 440px; }
  .facts-c { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-cols { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .ticket::before, .ticket::after { display: none; }
  .ticket-stub { border-left: 0; border-top: 2px dashed var(--kraft-line); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pola-row .pola { width: calc(50% - 10px); }
  .ticket-stub { grid-template-columns: minmax(0, 1fr); }
  body[data-page="minka"] .herbarium > li:nth-child(odd), body[data-page="minka"] .herbarium > li:nth-child(even) { rotate: 0deg; }
  body[data-page="minka"] .t-card, body[data-page="minka"] .t-card:nth-child(even) { rotate: 0deg; }
  .facts-c li:nth-child(odd), .facts-c li:nth-child(even) { rotate: 0deg; }
  .notebook { padding-left: 54px; }
  .notebook::before { left: 38px; }
  .timeline-c li { grid-template-columns: 4.8rem minmax(0, 1fr); }
}

/* Redes sociales en el pie: colores de cada marca */
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.foot-col a.social { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; color: #FFFFFF; font-weight: 700; font-size: 0.875rem; text-decoration: none; box-shadow: 0 6px 14px rgba(0, 0, 0, .18); transition: transform .2s ease; }
.social-ig { background: linear-gradient(45deg, #C13584 0%, #833AB4 60%, #5851DB 100%); }
.social-fb { background: #0866FF; }
.foot-col a.social.has-icon { width: 44px; padding: 0; background: none; box-shadow: none; }
.social.has-icon img { width: 36px; height: 36px; }
@media (hover: hover) and (pointer: fine) { .foot-col a.social:hover { transform: translateY(-2px); } }

/* Reseñas de Google: carrusel que rota solo cada 5 s (la barrita del punto activo marca el tiempo).
   Se pausa al pasar el mouse, con el foco del teclado, fuera de pantalla o con el botón de pausa.
   Sin JavaScript se ven todas, una debajo de otra. */
@media (min-width: 901px) { .split-rv { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.rv-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 16px; }
.rv-summary .score b { font-size: clamp(3.2rem, 2rem + 3.4vw, 4.6rem); }
.rv { align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.rv-track { display: flex; flex-direction: column; gap: 14px; }
.rv-slide { position: relative; margin: 0; display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 3vw, 28px); background: var(--paper); border-radius: 22px; }
.rv-slide::before { content: "\201C"; position: absolute; top: 4px; right: 18px; font-family: var(--display); font-size: 5.5rem; line-height: 1; color: var(--primary); opacity: .3; pointer-events: none; }
.rv-slide > .stars { font-size: 1.05rem; align-self: flex-start; }
.rv-from { font-style: italic; }
.rv-slide blockquote { margin: 0; }
.rv-slide blockquote p { margin: 0; font-family: var(--display); font-size: clamp(1.2rem, 1.02rem + .65vw, 1.55rem); line-height: 1.32; color: var(--heading); text-wrap: pretty; }
.rv-sub { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rv-sub li { font-size: 0.8125rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.rv-sub b { color: var(--ink); }
.rv-slide figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.rv-av { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; font-family: var(--display); font-size: 1.25rem; line-height: 1; color: #FFF8EE; background: #B5603A; }
.rv-av-1 { background: #4A2716; }
.rv-av-2 { background: #2C6A3E; }
.rv-av-3 { background: #1C6797; }
.rv-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rv-who small { color: var(--muted); font-size: 0.8125rem; }

.rv.is-ready .rv-track { display: grid; touch-action: pan-y; }
.rv.is-ready .rv-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(32px); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .6s; }
.rv.is-ready .rv-track .rv-slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.rv-ctrl { display: flex; align-items: center; gap: 6px; }
.rv-ctrl[hidden] { display: none; }
.rv-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.rv-btn .ic { width: 20px; height: 20px; }
.rv-btn:focus-visible, .rv-dot:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .rv-btn:hover { border-color: var(--ink); background: var(--paper); } }
.rv-toggle { margin-left: auto; }
.rv-toggle .ic-play, .rv.is-user-paused .rv-toggle .ic-pause { display: none; }
.rv.is-user-paused .rv-toggle .ic-play { display: block; }
.rv.is-static .rv-toggle { display: none; }
.rv-dots { display: flex; align-items: center; flex: 1 1 auto; margin-left: -7px; }
.rv-dot { display: inline-grid; place-items: center; width: 22px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; transition: width .35s ease; }
.rv-dot i { position: relative; display: block; width: 8px; height: 8px; overflow: hidden; border-radius: 999px; background: var(--line); background: color-mix(in srgb, var(--muted) 38%, transparent); transition: width .35s ease; }
.rv-dot b { position: absolute; inset: 0; border-radius: inherit; background: var(--primary); transform: scaleX(0); transform-origin: left center; }
.rv-dot[aria-current="true"] { width: 46px; }
.rv-dot[aria-current="true"] i { width: 34px; }
.rv-dot[aria-current="true"] b { transform: scaleX(1); }
.rv.is-auto .rv-dot[aria-current="true"] b { animation: rv-fill 5s linear both; }
.rv.is-auto.is-paused .rv-dot[aria-current="true"] b { animation-play-state: paused; }
@keyframes rv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 380px) {
  .rv-ctrl { flex-wrap: wrap; row-gap: 0; }
  .rv-dots { flex-basis: 100%; }
}

/* Videos del lodge: tres reels verticales. En celular se deslizan de lado; en computadora, tres columnas.
   El botón propio de reproducir solo aparece con JavaScript; sin él quedan los controles del navegador. */
.reels-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-top: clamp(48px, 7vw, 80px); margin-bottom: 18px; }
.reels-head .sub { margin: 0; }
.reels-head p { margin: 0; color: var(--muted); }
.reels { list-style: none; margin: 0; padding: 4px 0 14px; display: grid; grid-auto-flow: column; grid-auto-columns: min(66vw, 270px); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.reel { scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.reel-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 140px 140px 16px 16px; background: #14110C; box-shadow: 0 18px 36px rgba(74, 39, 22, .2); }
.reel-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #14110C; }
.reel-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; display: grid; place-items: center; padding: 0 0 0 4px; border: 0; border-radius: 50%; background: var(--primary); color: var(--primary-ink); cursor: pointer; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.reel-play[hidden] { display: none; }
.reel-play .ic { width: 28px; height: 28px; fill: currentColor; stroke: none; }
.reel-play:focus-visible { outline: 3px solid #FFF8EE; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .reel-frame:hover .reel-play { transform: scale(1.06); } }
.reel-dur { position: absolute; left: 12px; bottom: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(12, 9, 6, .72); color: #fff; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.reel.is-playing .reel-dur, .reel.is-playing .reel-play { display: none; }
.reel-title { margin: 10px 0 0; font-family: var(--display); font-size: var(--step-2); line-height: 1.15; color: var(--heading); }
.reel-text { margin: 0; color: var(--muted); font-size: var(--step--1); }
@media (min-width: 900px) {
  .reels { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: start; gap: clamp(20px, 3vw, 36px); overflow: visible; padding-bottom: 0; }
}

/* Foto del restaurante en Horarios y servicios */
.svc-photo { position: relative; width: 100%; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: var(--line); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-photo figcaption { position: absolute; left: 12px; bottom: 12px; padding: 3px 12px; border-radius: 999px; background: rgba(12, 9, 6, .7); color: #fff; font-size: 0.8125rem; font-weight: 600; }

/* Título a mano sobre la franja de polaroids de Minka */
.pola-title { font-family: var(--hand); font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1.05; text-align: center; color: var(--ink); margin: 0 0 clamp(22px, 3vw, 36px); rotate: -1.5deg; }
/* El pie de la polaroid grande queda a la izquierda para que el sello no lo tape */
.collage .pola-1 figcaption { text-align: left; padding-left: 8%; padding-right: 30%; }
:lang(de) .hand-note { font-size: clamp(1.05rem, .85rem + 1vw, 1.6rem); }

/* ===== Portada A "Noche en la selva" (elegida en Claude Design) =====
   Foto a pantalla completa debajo de la cabecera, que arriba del todo es transparente con el logo blanco
   y al bajar vuelve a ser sólida. En computadora los datos van en una barra de vidrio sobre la foto;
   en celular la foto es vertical, el texto va abajo y los datos quedan debajo, sobre el papel. */
:root { --head-h: 71px; }
@media (max-width: 640px) { :root { --head-h: 63px; } }
@media (max-height: 520px) and (orientation: landscape) { :root { --head-h: 57px; } }
.site-header { transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
body:not(.menu-open) .site-header.over-hero:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; box-shadow: none; color: #FFF8EE; }
body:not(.menu-open) .site-header.over-hero:not(.is-scrolled) .logo-light { display: none; }
body:not(.menu-open) .site-header.over-hero:not(.is-scrolled) .logo-dark { display: block; }
body:not(.menu-open) .site-header.over-hero:not(.is-scrolled) .menu-btn { border-color: rgba(255, 248, 238, .45); color: #FFF8EE; background: rgba(20, 15, 10, .3); }
@media (min-width: 1041px) {
  .site-header.over-hero:not(.is-scrolled) .nav-links a { color: rgba(255, 248, 238, .94); }
  .site-header.over-hero:not(.is-scrolled) .btn-deep { background: #F3E7D3; color: #2E1E14; }
}

.hero-a { position: relative; display: grid; margin-top: calc(-1 * var(--head-h)); }
.hero-a .wrap { max-width: 1360px; }
/* La portada mide al menos el alto de la pantalla, pero crece si el texto no cabe: nunca se monta sobre el logo ni sobre la barra */
.hero-a-stage { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; justify-content: center; min-height: clamp(560px, calc(100vh - var(--switch-h)), 980px); min-height: clamp(560px, calc(100svh - var(--switch-h)), 980px); overflow: hidden; background: #0E0B07; color: #FFF8EE; }
.hero-a-media, .hero-a-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-a-media img { object-fit: cover; object-position: 58% 62%; }
.hero-a-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 9, 5, .9) 0%, rgba(12, 9, 5, .74) 30%, rgba(12, 9, 5, .38) 50%, rgba(12, 9, 5, 0) 70%), linear-gradient(180deg, rgba(12, 9, 5, .5) 0%, rgba(12, 9, 5, 0) 20%, rgba(12, 9, 5, 0) 56%, rgba(12, 9, 5, .72) 100%); }
.hero-a-in { position: relative; z-index: 1; width: 100%; box-sizing: border-box; padding-top: calc(var(--head-h) + clamp(28px, 6vh, 72px)); padding-bottom: calc(clamp(48px, 4.6vw, 66px) + 160px); }
.hero-a-text { max-width: 720px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero-a-eyebrow { margin: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 248, 238, .32); background: rgba(255, 248, 238, .08); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #F0D9B8; }
.hero-a-title { max-width: 8.4em; font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.6rem); font-size: clamp(2.6rem, min(1.5rem + 4.6vw, 1rem + 8vh), 5.6rem); line-height: 1; letter-spacing: -.01em; color: #FFF8EE; }
.hero-a-title em { font-style: italic; color: #E4B98A; }
.hero-a-lead { margin: 0; max-width: 28em; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); font-size: var(--step-1); line-height: 1.55; color: rgba(255, 248, 238, .88); }
.hero-a-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.hero-a .btn { min-height: 54px; padding: 0 28px; font-weight: 700; }
.hero-a .btn-primary { background: #B5603A; color: #FFF8EE; }
.btn-glass { border: 1px solid rgba(255, 248, 238, .5); background: rgba(255, 248, 238, .08); color: #FFF8EE; }
.hero-a-video { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 8px; color: #FFF8EE; font-weight: 700; text-decoration: none; }
.hero-a-video small { font-size: inherit; font-weight: 500; opacity: .8; }
.hero-a-play { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 248, 238, .4); background: rgba(255, 248, 238, .16); transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.hero-a-play .ic { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; stroke: none; }
.hero-a a:focus-visible { outline: 3px solid #E4B98A; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .hero-a-video:hover .hero-a-play { background: #B5603A; border-color: #B5603A; transform: scale(1.06); }
  .btn-glass:hover { background: rgba(255, 248, 238, .18); }
}
.hero-a-wave { position: absolute; z-index: 2; left: 0; bottom: -1px; width: 100%; height: clamp(22px, 3vw, 44px); fill: var(--paper); }
.hero-a-facts-wrap { grid-area: 1 / 1; align-self: end; position: relative; z-index: 3; width: 100%; box-sizing: border-box; margin-bottom: clamp(48px, 4.6vw, 66px); }
.hero-a-facts { list-style: none; margin: 0; padding: 20px 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; border-radius: 20px; border: 1px solid rgba(255, 248, 238, .16); background: rgba(20, 15, 10, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #FFF8EE; }
.hero-a-facts li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-a-facts li + li { padding-left: 24px; border-left: 1px solid rgba(255, 248, 238, .16); }
.hero-a-facts b { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); line-height: 1.1; }
.hero-a-facts b .stars { font-family: var(--body); font-size: .62em; letter-spacing: 1px; color: #E6B24C; vertical-align: .15em; }
.hero-a-facts li > span { font-size: .875rem; color: rgba(255, 248, 238, .78); }

.intro-photo { margin: 0; justify-self: center; width: 100%; max-width: 380px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% 50% 24px 24px / 36% 36% 24px 24px; background: var(--line); box-shadow: 0 24px 50px rgba(74, 39, 22, .22); }
.intro-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

@media (max-width: 1100px) and (min-width: 701px) {
  .hero-a-facts { padding: 18px 22px; gap: 18px; }
  .hero-a-facts li + li { padding-left: 18px; }
}
@media (max-width: 900px) { .intro-photo { max-width: 300px; } }
@media (max-width: 700px) {
  .hero-a { display: block; }
  .hero-a-stage { justify-content: flex-end; min-height: clamp(560px, calc(100vh - var(--switch-h)), 860px); min-height: clamp(560px, calc(100svh - var(--switch-h)), 860px); }
  .hero-a-media img { object-position: 50% 50%; }
  .hero-a-scrim { background: linear-gradient(180deg, rgba(12, 9, 5, .55) 0%, rgba(12, 9, 5, 0) 20%, rgba(12, 9, 5, .15) 40%, rgba(12, 9, 5, .9) 76%); }
  .hero-a-in { padding-top: calc(var(--head-h) + 24px); padding-bottom: clamp(38px, 10vw, 52px); }
  .hero-a-text { gap: 14px; }
  .hero-a-eyebrow { padding: 6px 12px; font-size: .75rem; letter-spacing: .12em; }
  .hero-a-lead { font-size: 1rem; }
  .hero-a-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; gap: 10px; margin-top: 2px; }
  .hero-a-actions .btn-primary { grid-column: 1 / -1; }
  .hero-a .btn { min-height: 50px; padding: 0 12px; font-size: .9375rem; }
  .hero-a-video { justify-content: center; gap: 6px; min-height: 50px; padding: 0 12px; border-radius: 999px; background: rgba(255, 248, 238, .14); font-size: .9375rem; text-align: center; }
  .hero-a-video small { display: none; }
  .hero-a-play { width: auto; height: auto; border: 0; background: none; }
  .hero-a-play .ic { width: 14px; height: 14px; }
  .hero-a-facts-wrap { margin-bottom: 0; padding-top: 8px; }
  .hero-a-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; gap: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); }
  .hero-a-facts li { padding: 14px 10px 14px 0; border-bottom: 1px solid var(--line); }
  .hero-a-facts li + li { padding-left: 0; border-left: 0; }
  .hero-a-facts li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .hero-a-facts b { color: var(--heading); }
  .hero-a-facts li > span { color: var(--muted); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-a-media img { animation: kb 2.6s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-a-text > *, .hero-a-facts { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-a-text > :nth-child(2) { animation-delay: .08s; }
  .hero-a-text > :nth-child(3) { animation-delay: .16s; }
  .hero-a-text > :nth-child(4) { animation-delay: .24s; }
  .hero-a-facts { animation-delay: .34s; }
}

.hero-a-video .hv-short { display: none; }
@media (max-width: 700px) { .hero-a-video .hv-long { display: none; } .hero-a-video .hv-short { display: inline; } }
/* Mientras se ve la portada, el botón flotante de WhatsApp se esconde: la portada ya tiene el suyo */
.wa-float { transition: opacity .25s ease, transform .25s ease; }
body.hero-on .wa-float { opacity: 0; transform: translateY(14px); pointer-events: none; }
/* Pantallas de computadora bajitas (laptop con el navegador abierto): todo un poco más compacto */
@media (min-width: 701px) and (max-height: 760px) {
  .hero-a-text { gap: 16px; }
  .hero-a-lead { font-size: 1.0625rem; }
  .hero-a .btn, .hero-a-video { min-height: 50px; }
  .hero-a-facts { padding-block: 16px; }
}
@media (max-width: 360px) {
  .hero-a .btn, .hero-a-video { padding: 0 8px; font-size: .875rem; }
  .hero-a .btn-primary { font-size: .9375rem; }
}

/* Botón con borde fino (se usa en varias secciones) */
.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: transparent; }

/* ===== Minka · "Del fruto a la barra" =====
   Cada sección tiene el color de una etapa del cacao. Los títulos van en Gloock y el texto en Onest. */
body[data-page="minka"] { font-family: var(--body); }
body[data-page="minka"] .site-header { border-bottom: 1px solid var(--line); }
body[data-page="minka"] .brand-minka { flex-direction: row; align-items: baseline; gap: 12px; min-height: 44px; }
body[data-page="minka"] .site-header .wordmark { font-size: 2.5rem; letter-spacing: 0; color: var(--ink); }
body[data-page="minka"] .brand-minka .by { font-size: .8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
@media (max-width: 640px) { body[data-page="minka"] .brand-minka .by { display: none; } body[data-page="minka"] .site-header .wordmark { font-size: 2.1rem; } }
body[data-page="minka"] .site-footer { background: #1E0F0B; }

.c4-sec { padding-block: clamp(64px, 8vw, 104px); }
.c4-s-pulpa2 { background: var(--c-pulpa2); }
.c4-s-ferm { background: var(--c-ferm); }
.c4-s-sec { background: var(--c-sec); }
.c4-s-tost { background: var(--c-tost); color: var(--c-cream); }
.c4-s-tost2 { background: var(--c-tost2); color: var(--c-cream); }
.c4-s-voz { background: var(--c-voz); color: var(--c-cream); }
.c4-s-choco { background: var(--c-choco); color: var(--c-cream); }
.c4-price-sec { padding-bottom: clamp(40px, 5vw, 72px); }
.c4-faq-sec { padding-top: clamp(32px, 4vw, 56px); }
.c4-s-tost .c4-h2, .c4-s-tost2 .c4-h2, .c4-s-voz .c4-h2, .c4-s-choco .c4-h2 { color: var(--c-cream); }
.c4-s-tost .c4-lead-sm, .c4-s-choco .c4-lead-sm { color: var(--c-cream2); }

.c4-h2 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.75rem); line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.c4-head { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.c4-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(28px, 6vw, 72px); align-items: start; }
.c4-split-end { align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.c4-split-center { align-items: center; }
.c4-lead-sm { margin: 0; font-size: var(--step-1); line-height: 1.6; color: var(--muted); }
.c4-stage { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 600; color: var(--ink); }
.c4-stage.is-dark { color: var(--c-cream); }
.c4-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px rgba(43, 22, 16, .1); }
.c4-stage.is-dark .c4-dot { box-shadow: 0 0 0 3px rgba(251, 239, 230, .2); }
.c4-dot-1 { background: #E9B9C7; } .c4-dot-2 { background: #F2B33D; } .c4-dot-3 { background: #D6A472; } .c4-dot-4 { background: #C27A4F; } .c4-dot-5 { background: #5A2E20; }

.c4-btn { min-height: 54px; padding: 0 28px; background: var(--c-mazorca); color: #FFFFFF; font-weight: 600; }
.c4-btn-line { min-height: 54px; padding: 0 26px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-weight: 600; }
.c4-btn-gold { min-height: 52px; padding: 0 26px; background: var(--c-gold); color: var(--c-choco); font-weight: 600; white-space: nowrap; }
.c4-btn-full { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .c4-btn:hover { background: var(--c-mazorca-d); }
  .c4-btn-line:hover { background: var(--ink); color: var(--paper); }
  .c4-btn-gold:hover { background: #F6C463; }
}
.c4-sec a:focus-visible, .c4-hero a:focus-visible, .c4-sec button:focus-visible, .c4-hero button:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }

/* Portada */
.c4-hero { background: var(--c-pulpa); padding-block: clamp(28px, 3.5vw, 48px) clamp(64px, 7vw, 96px); overflow: hidden; }
.c4-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.c4-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.c4-eyebrow { margin: 0; font-size: 1rem; font-weight: 500; color: var(--c-mazorca); }
.c4-h1 { font-size: clamp(3rem, 1.2rem + 5.8vw, 6.5rem); line-height: .95; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.c4-lead { margin: 0; max-width: 34em; font-size: var(--step-1); line-height: 1.6; color: var(--muted); }
.c4-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.c4-facts { margin: 4px 0 0; max-width: 36em; font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.c4-hero-art { position: relative; width: 100%; max-width: 520px; height: clamp(460px, 46vw, 680px); justify-self: end; }
.c4-pod { position: absolute; right: 0; top: 0; width: 88%; height: 94%; margin: 0; overflow: hidden; border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%; background: var(--c-pulpa2); }
.c4-round { position: absolute; left: 0; bottom: 0; width: 44%; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 50%; border: 10px solid var(--c-pulpa); background: var(--c-pulpa2); }
.c4-pod .zoom, .c4-round .zoom { height: 100%; border-radius: inherit; }
.c4-pod img, .c4-round img { width: 100%; height: 100%; object-fit: cover; }
.c4-pod img { object-position: 40% 50%; }
.c4-round img { object-position: 45% 40%; }
.c4-ribbon-wrap { margin-top: clamp(48px, 6vw, 72px); }
.c4-ribbon-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 22px; }
.c4-ribbon-head h2 { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem); line-height: 1.05; color: var(--ink); }
.c4-ribbon-head p { margin: 0; max-width: 30em; font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.c4-ribbon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.c4-step { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 26px; }
.c4-step img { width: 100%; height: clamp(150px, 13vw, 190px); object-fit: cover; }
.c4-step-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 20px; }
.c4-step-body p { margin: 0; font-size: .875rem; line-height: 1.45; opacity: .9; }
.c4-step-name { display: flex; align-items: baseline; gap: 10px; font-size: 1.0625rem !important; font-weight: 700; opacity: 1 !important; }
.c4-step-name span { font-family: var(--display); font-size: 1.85rem; font-weight: 400; line-height: 1; }
.c4-step-1 { background: #E9B9C7; color: var(--c-choco); }
.c4-step-2 { background: #F2B33D; color: var(--c-choco); }
.c4-step-3 { background: #D6A472; color: var(--c-choco); }
.c4-step-4 { background: #8A4A2B; color: var(--c-cream); }
.c4-step-5 { background: #2B1610; color: var(--c-cream); }

/* El programa */
.c4-intro-body { display: flex; flex-direction: column; gap: 20px; padding-top: clamp(0px, 4vw, 52px); }
.c4-intro-body p { margin: 0; font-size: var(--step-1); line-height: 1.6; color: var(--muted); }
.c4-intro-body .c4-intro-big { font-size: clamp(1.15rem, 1rem + .5vw, 1.32rem); color: var(--ink); }

/* Qué harás */
.c4-cacao { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden; border-radius: 34px; background: var(--c-mazorca); color: #FFFFFF; }
.c4-cacao-photo { position: relative; min-height: 440px; }
.c4-cacao-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c4-video-btn { position: absolute; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 12px; max-width: calc(100% - 44px); min-height: 52px; padding: 6px 20px 6px 7px; border-radius: 999px; background: #FFFFFF; color: var(--c-choco); font-size: .9375rem; font-weight: 600; line-height: 1.25; text-decoration: none; }
.c4-play { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--c-mazorca); color: #FFFFFF; }
.c4-play .ic { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; stroke: none; }
.c4-cacao-text { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(28px, 4vw, 52px); }
.c4-cacao-text p { margin: 0; }
.c4-cacao-label { font-size: .9375rem; opacity: .85; }
.c4-cacao-term { font-family: var(--display); font-size: clamp(2.8rem, 1.8rem + 2.8vw, 4.5rem); line-height: .95; }
.c4-cacao-text h3 { margin-top: 6px; font-family: var(--body); font-size: 1.375rem; font-weight: 700; }
.c4-cacao-text p:last-child { font-size: 1.0625rem; line-height: 1.6; opacity: .92; }
.c4-areas { margin-top: clamp(40px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 36px; }
.c4-area { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.c4-area > img { width: 100%; height: 230px; object-fit: cover; border-radius: 22px; }
.c4-area:nth-child(1) > img, .c4-area:nth-child(5) > img { border-radius: 120px 120px 22px 22px; }
.c4-area:nth-child(3) > img { border-radius: 22px 120px 22px 22px; }
.c4-area:nth-child(6) > img { border-radius: 22px 22px 120px 22px; }
.c4-term { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.c4-term-word { font-family: var(--display); font-size: 2.75rem; line-height: 1; color: var(--ink); }
.c4-term-word.is-sci { font-size: 2.1rem; }
.c4-term-gloss { font-size: .875rem; color: var(--muted); }
.c4-area h3 { font-family: var(--body); font-size: 1.0625rem; font-weight: 700; color: var(--c-mazorca-d); }
.c4-area-text { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--muted); }
.c4-skill { margin-top: clamp(40px, 5vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 28px 30px 28px 36px; border-radius: 999px; background: var(--c-choco); color: var(--c-cream); }
.c4-skill p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; font-size: 1rem; line-height: 1.5; color: var(--c-cream2); }
.c4-skill-title { font-family: var(--display); font-size: 2.1rem; line-height: 1; color: var(--c-cream); }

/* Así se trabaja */
.c4-work { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 16vw, 230px); grid-auto-flow: dense; gap: 14px; }
.c4-work figure { position: relative; margin: 0; overflow: hidden; border-radius: 24px; background: var(--c-pulpa2); }
.c4-work figure:first-child { grid-column: span 2; grid-row: span 2; }
.c4-work figure:nth-child(4) { grid-row: span 2; }
.c4-work .zoom { height: 100%; }
.c4-work img { width: 100%; height: 100%; object-fit: cover; }
.c4-work figcaption { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 5px 14px; border-radius: 999px; background: var(--c-pulpa); color: var(--ink); font-size: .875rem; font-weight: 600; pointer-events: none; }

/* Un día y las dos semanas */
.c4-day { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 18px; border-top: 2px solid var(--c-gold); }
.c4-day li { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 28px; min-width: 0; }
.c4-day li::before { content: ""; position: absolute; left: 0; top: -9px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--c-gold); background: var(--c-tost); }
.c4-day li.is-key::before { background: var(--c-gold); }
.c4-day time { font-family: var(--display); font-size: 1.85rem; line-height: 1; color: var(--c-cream); font-variant-numeric: tabular-nums; }
.c4-day span { font-size: .875rem; line-height: 1.4; color: var(--c-cream2); }
.c4-weeks { margin-top: clamp(56px, 7vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
.c4-week-title { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.c4-week-title b { font-family: var(--display); font-weight: 400; font-size: 2.5rem; line-height: 1; color: var(--c-cream); }
.c4-week-title span { font-size: 1rem; color: var(--c-gold); }
.c4-week ol { list-style: none; margin: 0; padding: 0; }
.c4-week li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid rgba(251, 239, 230, .16); }
.c4-daynum { font-family: var(--display); font-size: 2.1rem; line-height: 1; color: var(--c-cream); }
.c4-week li.is-key .c4-daynum { color: var(--c-gold); }
.c4-daytext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.c4-daytext > span { font-size: 1rem; font-weight: 600; color: var(--c-cream); }
.c4-daytext small { font-size: .875rem; line-height: 1.45; color: var(--c-cream2); }

/* Vivir aquí */
.c4-stay { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: stretch; }
.c4-stay-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.c4-stay-text h3 { margin-top: 10px; font-family: var(--body); font-size: 1.1875rem; font-weight: 700; color: var(--c-cream); }
.c4-stay-text p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--c-cream2); }
.c4-stay-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(260px, 1.3fr) minmax(200px, 1fr); gap: 14px; }
.c4-sp { margin: 0; overflow: hidden; border-radius: 22px; background: var(--c-tost); }
.c4-sp .zoom { height: 100%; }
.c4-sp img { width: 100%; height: 100%; object-fit: cover; }
.c4-sp-1 { grid-column: 1 / 3; border-radius: 150px 22px 22px 22px; }
.c4-sp-4 { border-radius: 50%; }

/* Voces */
/* Voces de Minka: título de la sección, tarjeta con foto para la primera generación y la reseña del lodge */
.c4-voz-head { display: flex; flex-direction: column; gap: 16px; max-width: 46rem; margin-bottom: clamp(32px, 4vw, 52px); }
.c4-voz-head p { margin: 0; font-size: var(--step-1); line-height: 1.6; color: var(--c-cream2); }
.c4-voz-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.c4-fg-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 240px 240px 28px 28px; background: var(--c-choco2); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.c4-fg-photo { height: clamp(240px, 24vw, 340px); background: var(--c-tost2); }
.c4-fg-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
.c4-fg { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(24px, 3.2vw, 40px); }
.c4-fg h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); line-height: 1.04; color: var(--c-cream); }
.c4-fg p { margin: 0; max-width: 34rem; font-size: var(--step-1); line-height: 1.55; color: var(--c-cream2); }
/* Carrusel de historias (mismo funcionamiento que las reseñas del hospedaje, con los colores del cacao) */
.c4-voz-grid.has-real { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.c4-stories { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.c4-tpl-note { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: .875rem; line-height: 1.45; color: var(--c-cream2); }
.c4-tpl-badge { padding: 3px 10px; border-radius: 999px; background: var(--c-gold); color: var(--c-choco); font-size: .75rem; font-weight: 700; }
.c4-rv { gap: 14px; }
.c4-rv .rv-slide { gap: 24px; padding: clamp(26px, 3.4vw, 40px); border-radius: 28px; background: var(--c-cream); color: var(--ink); box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.c4-rv .rv-slide::before { top: 6px; right: 24px; font-size: 6.5rem; color: var(--c-mazorca); opacity: .22; }
.c4-s-voz { overflow-x: clip; }
.c4-rv .rv-slide blockquote { padding-right: clamp(36px, 4vw, 52px); }
.c4-rv .rv-slide blockquote p { font-family: var(--display); font-size: clamp(1.35rem, 1.05rem + 1vw, 1.85rem); line-height: 1.26; color: var(--ink); }
.c4-rv.is-template .rv-slide { background: #F6E6E4; }
.c4-rv.is-template .rv-slide blockquote p { color: #5A3A2F; }
.c4-rv .rv-who b { color: var(--ink); }
.c4-rv .rv-who small { color: var(--muted); }
.c4-story-av { display: grid; place-items: center; width: 52px; height: 52px; flex: none; overflow: hidden; border-radius: 50%; background: var(--c-mazorca); color: #FFFFFF; font-family: var(--display); font-size: 1.35rem; line-height: 1; }
.c4-story-av img { width: 100%; height: 100%; object-fit: cover; }
.c4-story-av.is-empty { background: transparent; border: 2px dashed rgba(163, 33, 74, .55); color: var(--c-mazorca); font-family: var(--body); font-size: .9375rem; font-weight: 700; }
.c4-rv .rv-btn { border-color: rgba(251, 239, 230, .3); background: transparent; color: var(--c-cream); }
@media (hover: hover) and (pointer: fine) { .c4-rv .rv-btn:hover { border-color: var(--c-cream); background: rgba(251, 239, 230, .08); } }
.c4-rv .rv-btn:focus-visible, .c4-rv .rv-dot:focus-visible { outline-color: var(--c-gold); }
.c4-rv .rv-dot i { background: rgba(251, 239, 230, .3); }
.c4-rv .rv-dot b { background: var(--c-gold); }
@media (max-width: 900px) {
  .c4-voz-grid { grid-template-columns: minmax(0, 1fr); }
  .c4-fg-photo { height: clamp(250px, 44vw, 380px); }
}
@media (max-width: 640px) {
  .c4-fg-card { border-radius: 170px 170px 24px 24px; }
  .c4-fg-photo { height: 250px; }
  .c4-fg .btn { width: 100%; }
}

/* Precio: una barra de chocolate con su envoltura */
.c4-price { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(36px, 5vw, 64px); align-items: center; }
.c4-bar { position: relative; min-height: 420px; padding: 18px; border-radius: 28px; background: #3B2018; box-shadow: 0 40px 80px rgba(0, 0, 0, .45); }
.c4-squares { position: absolute; inset: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; }
.c4-squares span { border-radius: 10px; background: linear-gradient(145deg, #4A2A1F, #2F1912); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .07), inset -3px -3px 0 rgba(0, 0, 0, .25); }
.c4-wrapper { position: absolute; top: -14px; bottom: -14px; right: -18px; width: 58%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 44px); border-radius: 6px 22px 22px 6px; background: var(--c-pulpa); color: var(--ink); box-shadow: -18px 0 30px rgba(0, 0, 0, .25); }
.c4-wrapper p { margin: 0; }
.c4-wrapper-label { font-size: .875rem; font-weight: 600; color: var(--c-mazorca); }
.c4-from { font-size: 1.0625rem; color: var(--muted); }
.c4-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.c4-amount b { font-family: var(--display); font-weight: 400; font-size: clamp(3.6rem, 2.4rem + 3vw, 6rem); line-height: .9; white-space: nowrap; }
.c4-amount span { font-size: 1.0625rem; color: var(--muted); }
.c4-2w { font-size: 1.25rem; font-weight: 700; }
.c4-dates { font-size: .9375rem; line-height: 1.55; color: var(--muted); margin-bottom: 6px !important; }
.c4-lists { display: flex; flex-direction: column; gap: 14px; }
.c4-lists h3 { font-size: 1.75rem; color: var(--c-cream); }
.c4-lists h3 + ul { margin-bottom: 14px; }
.c4-check, .c4-dash { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.c4-check li, .c4-dash li { position: relative; padding-left: 30px; font-size: 1rem; line-height: 1.45; color: var(--c-cream); }
.c4-dash li { color: var(--c-cream2); }
.c4-check li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 13px; height: 7px; border-left: 2px solid var(--c-gold); border-bottom: 2px solid var(--c-gold); rotate: -45deg; }
.c4-dash li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 12px; height: 2px; border-radius: 2px; background: var(--c-cream2); }

/* Preguntas y solicitud */
.c4-faq-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); align-items: start; }
.c4-faq-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.c4-faq-col .c4-h2 { font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.5rem); }
.c4-faq { border-bottom: 1px solid rgba(251, 239, 230, .16); }
.c4-faq details { border-top: 1px solid rgba(251, 239, 230, .16); }
.c4-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 16px 0; list-style: none; cursor: pointer; font-size: 1.0625rem; font-weight: 600; color: var(--c-cream); }
.c4-faq summary::-webkit-details-marker { display: none; }
.c4-plus { position: relative; width: 18px; height: 18px; flex: none; }
.c4-plus::before, .c4-plus::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; border-radius: 2px; background: var(--c-cream2); transition: rotate .2s ease; }
.c4-plus::after { rotate: 90deg; }
.c4-faq details[open] .c4-plus::after { rotate: 0deg; }
.c4-faq details[open] .c4-plus::before, .c4-faq details[open] .c4-plus::after { background: var(--c-gold); }
.c4-faq details p { margin: -4px 0 18px; font-size: 1rem; line-height: 1.6; color: var(--c-cream2); }
.c4-form-card { padding: clamp(22px, 3vw, 40px); border-radius: 34px; background: var(--c-choco2); }
.c4-h2-form { font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3rem); }
.c4-form-lead { margin: 10px 0 22px; font-size: 1rem; color: var(--c-cream2); }
body[data-page="minka"] .c4-form { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 18px; }
body[data-page="minka"] .c4-form::before { display: none; }
.c4-form .field label { color: var(--c-cream2); }
.c4-form .field abbr { color: var(--c-gold); }
.c4-form .field input, .c4-form .field select, .c4-form .field textarea { border-radius: 14px; border: 1px solid rgba(251, 239, 230, .2); background: var(--c-choco); color: var(--c-cream); }
.c4-form .field input:focus-visible, .c4-form .field select:focus-visible, .c4-form .field textarea:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 1px; }
.c4-form .check-field label { color: var(--c-cream); }
.c4-form .check-field input { accent-color: var(--c-gold); }
.c4-form .form-status.ok { color: var(--c-gold); }
.c4-form .form-status.err { color: #FFB199; }
.c4-form .form-alt { color: var(--c-cream2); border-top-color: rgba(251, 239, 230, .16); }
.c4-form .link-wa { color: var(--c-gold); }

/* Video del cacao en una ventana */
.mk-video { width: auto; max-width: 92vw; padding: 0; border: 0; background: transparent; overflow: visible; }
.mk-video::backdrop { background: rgba(20, 8, 5, .9); }
.mk-video video { display: block; height: min(80vh, 746px); width: auto; max-width: 100%; aspect-ratio: 9 / 16; border-radius: 22px; background: #000; }
.mk-video-close { position: absolute; right: 0; top: -56px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #FFFFFF; cursor: pointer; }
.mk-video-close .ic { width: 22px; height: 22px; }

@media (max-width: 1000px) {
  .c4-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c4-day { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; border-top: 0; }
  .c4-day li { border-top: 2px solid var(--c-gold); }
}
@media (max-width: 900px) {
  .c4-hero-grid, .c4-split, .c4-stay, .c4-faq-form, .c4-price { grid-template-columns: minmax(0, 1fr); }
  .c4-split-end { align-items: start; }
  .c4-hero-art { justify-self: center; max-width: 440px; height: clamp(380px, 90vw, 520px); }
  .c4-ribbon { display: flex; gap: 12px; margin-inline: -32px; padding: 0 32px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 32px; overscroll-behavior-x: contain; }
  .c4-step { flex: none; width: min(64vw, 260px); scroll-snap-align: start; }
  .c4-cacao { grid-template-columns: minmax(0, 1fr); }
  .c4-cacao-photo { min-height: 320px; }
  .c4-weeks { grid-template-columns: minmax(0, 1fr); }
  .c4-bar { width: 100%; max-width: 620px; min-height: 380px; }
  .c4-wrapper { right: -10px; }
}
@media (max-width: 699px) {
  .c4-ribbon { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
}
@media (max-width: 640px) {
  .c4-actions .btn { flex: 1 1 100%; }
  .c4-areas { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .c4-area > img { height: 210px; }
  .c4-skill { flex-direction: column; align-items: flex-start; padding: 26px 24px; border-radius: 28px; }
  .c4-skill .btn { width: 100%; white-space: normal; text-align: center; }
  .c4-work { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
  .c4-work figure:nth-child(4) { grid-row: span 1; }
  .c4-work figure:last-child:nth-child(even) { grid-column: 1 / -1; }
  .c4-work figcaption { left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 4px 10px; font-size: .8125rem; }
  .c4-day { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .c4-stay-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 220px 160px 160px; gap: 10px; }
  .c4-sp-1 { grid-column: 1 / -1; border-radius: 110px 22px 22px 22px; }
  .c4-bar { max-width: none; min-height: 0; padding: 0; background: none; box-shadow: none; }
  .c4-squares { position: relative; inset: auto; height: 150px; padding: 12px; gap: 8px; border-radius: 22px; background: #3B2018; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
  .c4-wrapper { position: relative; top: auto; bottom: auto; right: auto; width: auto; margin: -70px 10px 0; border-radius: 6px 6px 22px 22px; box-shadow: 0 -12px 30px rgba(0, 0, 0, .25); }
  .c4-wrapper .btn { width: 100%; }
}
@media (max-width: 380px) {
  .c4-day { grid-template-columns: minmax(0, 1fr); }
  .c4-week li { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
}

/* ===== Mariposa morfo azul =====
   Símbolo de la hacienda: entra volando y se posa en la portada, cruza la pantalla en algunas transiciones
   y queda como firma en el pie de página. Las alas se dibujan una vez en el sprite (#mf-wing). */
.morfo { display: block; width: 100%; height: auto; overflow: visible; color: #3E2E23; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .28)); transition: filter .5s ease; }
.mf-l, .mf-r { transform-box: view-box; transform-origin: 100px 62px; }
.morfo.is-flying .mf-l, .morfo.is-flying .mf-r { animation: mf-flap .2s ease-in-out infinite alternate; }
.morfo.is-resting .mf-l, .morfo.is-resting .mf-r { animation: mf-rest 7.5s ease-in-out infinite; }
@keyframes mf-flap { from { transform: scaleX(1); } to { transform: scaleX(.14); } }
@keyframes mf-rest { 0%, 64%, 100% { transform: scaleX(1); } 71% { transform: scaleX(.32); } 78% { transform: scaleX(.96); } 84% { transform: scaleX(.46); } 91% { transform: scaleX(1); } }

.morfo-perch { position: absolute; z-index: 2; pointer-events: none; }
.morfo-perch .morfo { transform: rotate(var(--mf-tilt, 0deg)); }
/* Mientras el script decide si vuela, la mariposa no se ve; si el script no corre, aparece igual a los 4 segundos */
.js .morfo-perch:not(.mf-ready) .morfo { visibility: hidden; animation: mf-show 0s 4s forwards; }
.js .morfo-perch.mf-wait .morfo { visibility: hidden; animation: none; }
@keyframes mf-show { to { visibility: visible; } }

/* Portada del hospedaje: se posa al final del título, como un punto final */
.mf-nowrap { white-space: nowrap; }
.mf-hero { --mf-tilt: -14deg; position: relative; display: inline-block; width: .9em; margin-left: .1em; vertical-align: -.02em; }
@media (max-width: 700px) { .mf-hero { width: 1.05em; } }
.mf-hero .morfo { color: #9C8470; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }

/* Portada de Minka: se posa en el borde de la foto con forma de mazorca */
.mf-pod { --mf-tilt: -16deg; width: clamp(70px, 7.4vw, 104px); left: 3%; top: 15%; }

/* Las que cruzan una sección al llegar a ella: vuelan dentro de una franja de la propia sección */
[data-morfo] { position: relative; }
.mf-lane { position: absolute; left: 0; right: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.mf-lane .morfo { position: absolute; left: 0; top: 0; width: clamp(40px, 4.2vw, 60px); }
.morfo.is-flying { will-change: transform; filter: none; }

/* Firma en el pie de página */
.foot-base p { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.foot-morfo { flex: none; width: 40px; rotate: -12deg; }
.foot-morfo .morfo { color: #9C8470; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .morfo .mf-l, .morfo .mf-r { animation: none !important; }
  .js .morfo-perch:not(.mf-ready) .morfo { visibility: visible; animation: none; }
  .mf-lane { display: none; }
}

/* ===== Eventos, Historia y Comunidad · versión B elegida en Claude Design: cada sección con su color =====
   Como Minka, cada página cambia los colores de la web y usa Gloock (títulos) y Onest (texto). */
body[data-page="eventos"] {
  --paper: #FFF4EC; --surface: #FFFFFF; --ink: #36161F; --muted: #76474D; --line: rgba(54, 22, 31, .14); --alt: #F8DCCD;
  --primary: #B8441F; --primary-ink: #FFFFFF; --accent: #B8441F; --hi: #B8441F; --hi-ink: #FFFFFF;
  --deep: #36161F; --deep-ink: #FFF4EC; --deep-muted: #F2D6CB; --deep-line: rgba(255, 244, 236, .16);
  --head: #FFF4EC; --head-ink: #36161F; --heading: #36161F; --cta2: #B8441F; --cta2-ink: #FFFFFF;
  --coral: #E2683C; --gold: #F2B33D; --blush: #F8DCCD;
}
body[data-page="historia"] {
  --paper: #F3EADB; --surface: #FBF6EC; --ink: #2A2118; --muted: #65553F; --line: rgba(42, 33, 24, .18); --alt: #EADFCB;
  --primary: #1D5FD0; --primary-ink: #FFFFFF; --accent: #1D5FD0; --hi: #1D5FD0; --hi-ink: #FFFFFF;
  --deep: #2A2118; --deep-ink: #F6EEDF; --deep-muted: #CBBBA4; --deep-line: rgba(246, 238, 223, .16);
  --head: #F3EADB; --head-ink: #2A2118; --heading: #2A2118; --cta2: #1D5FD0; --cta2-ink: #FFFFFF;
  --navy: #0D1B3D; --cream: #F6EEDF; --cream2: #C9D6F2;
}
body[data-page="comunidad"] {
  --paper: #EEF2E4; --surface: #FFFFFF; --ink: #14261A; --muted: #46594A; --line: rgba(20, 38, 26, .14); --alt: #F6E3C6;
  --primary: #C24E26; --primary-ink: #FFFFFF; --accent: #1F5C3A; --hi: #1F5C3A; --hi-ink: #FFFFFF;
  --deep: #0F2A1B; --deep-ink: #F4F7EC; --deep-muted: #CFE0C6; --deep-line: rgba(244, 247, 236, .16);
  --head: #EEF2E4; --head-ink: #14261A; --heading: #14261A; --cta2: #1F5C3A; --cta2-ink: #FFFFFF;
  --green: #1F5C3A; --green-d: #0F2A1B; --leaf: #CFE3B8; --cream: #F4F7EC; --cream2: #CFE0C6;
}
body:is([data-page="eventos"], [data-page="historia"], [data-page="comunidad"]) { --display: "Gloock", Georgia, "Times New Roman", serif; --body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color-scheme: light; }
body:is([data-page="eventos"], [data-page="historia"], [data-page="comunidad"]) .logo-light { display: block; }
body:is([data-page="eventos"], [data-page="historia"], [data-page="comunidad"]) .logo-dark { display: none; }
body:is([data-page="eventos"], [data-page="historia"], [data-page="comunidad"]) main :is(h1, h2, h3) { color: var(--heading); }

/* Piezas comunes */
.nb-sec { padding-block: clamp(64px, 8vw, 104px); }
.nb-kicker { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--accent); }
.nb-h1 { font-size: clamp(3rem, 1.6rem + 4.6vw, 5.75rem); line-height: .96; }
.nb-h2 { font-size: clamp(2.4rem, 1.5rem + 2.8vw, 3.75rem); line-height: 1.02; }
.nb-lead { margin: 0; max-width: 34rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--muted); }
.nb-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.nb-hero-text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.nb-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 40px); }
.nb-head p, .nb-head-row p { margin: 0; color: var(--muted); font-size: var(--step-1); line-height: 1.55; }
.nb-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: clamp(24px, 3vw, 36px); }
.nb-head-row p { max-width: 28rem; font-size: 1.0625rem; }
.nb-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .9375rem; color: var(--primary); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .nb-link:hover { text-decoration: underline; text-underline-offset: 4px; } }
.nb-old { margin: 0; box-sizing: border-box; padding: 12px 12px 44px; background: #FBF6EC; box-shadow: 0 18px 36px rgba(42, 33, 24, .25); }
.nb-old-in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; box-sizing: border-box; padding: 0 12px; text-align: center; background: linear-gradient(160deg, #E9DCC6, #CDB894); border: 1.5px dashed rgba(90, 70, 50, .45); color: #5A4632; font-size: .875rem; font-weight: 600; line-height: 1.35; }
.nb-old-in .ic { width: 28px; height: 28px; }

/* ---- Eventos · Atardecer ---- */
.ev-hero { padding-block: clamp(48px, 7vw, 88px) clamp(56px, 8vw, 104px); overflow: hidden; }
.ev-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: clamp(36px, 5vw, 56px); align-items: center; }
.ev-accent { color: var(--coral); }
.ev-hero-art { position: relative; height: clamp(440px, 46vw, 620px); }
.ev-sun { position: absolute; right: 2%; top: 0; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--gold); }
.ev-arch { position: absolute; right: 12%; top: 6.5%; width: 64%; height: 90%; margin: 0; overflow: hidden; border-radius: 240px 240px 30px 30px; background: var(--alt); }
.ev-circle { position: absolute; left: 0; bottom: 0; width: 39%; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 50%; border: 10px solid var(--paper); background: var(--alt); }
.ev-arch img, .ev-circle img { width: 100%; height: 100%; object-fit: cover; }
.ev-arch img { object-position: 50% 82%; }
.ev-types-sec { padding-top: clamp(16px, 3vw, 32px); }
.ev-types { list-style: none; margin: 0; padding: 0; border-bottom: 1.5px solid var(--line); }
.ev-type { display: grid; grid-template-columns: 96px minmax(0, 1fr) 240px; gap: 32px; align-items: center; padding: 28px 0; border-top: 1.5px solid var(--line); }
.ev-num { font-family: var(--display); font-size: 3.5rem; line-height: 1; color: var(--coral); }
.ev-type-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ev-type h3 { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem); line-height: 1.05; }
.ev-type p { margin: 0; color: var(--muted); }
.ev-type > img { width: 240px; height: 160px; object-fit: cover; border-radius: 18px; }
.ev-spaces-sec { background: var(--deep); color: var(--deep-ink); }
.ev-spaces-sec .nb-h2 { color: var(--deep-ink); }
.ev-spaces-sec .nb-head p { color: var(--deep-muted); }
.ev-spaces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 16px; }
.ev-space { position: relative; margin: 0; overflow: hidden; border-radius: 26px; background: rgba(255, 244, 236, .08); }
.ev-space-1 { grid-column: span 2; grid-row: span 2; }
.ev-space-4 { grid-column: span 2; }
.ev-space > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-space::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(54, 22, 31, 0) 40%, rgba(54, 22, 31, .88) 100%); }
.ev-space figcaption { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 6px; color: var(--deep-ink); }
.ev-space b { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1.05; }
.ev-space figcaption > span:last-child { font-size: .9375rem; color: var(--deep-muted); }
.ev-chip { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: var(--gold); color: var(--deep); font-size: .8125rem; font-weight: 700; }
.ev-invite { max-width: 760px; margin: 0 auto; padding: 14px; border-radius: 34px; background: #FFFFFF; box-shadow: 0 30px 60px rgba(54, 22, 31, .14); }
.ev-invite-in { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: clamp(32px, 5vw, 52px) clamp(20px, 5vw, 48px); border-radius: 24px; border: 1.5px solid var(--coral); text-align: center; }
.ev-invite-kicker { margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.ev-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 520px; text-align: left; }
.ev-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; }
.ev-step-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blush); font-family: var(--display); font-size: 1.5rem; color: var(--primary); }
.ev-step-t { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.ev-step-t b { font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.ev-step-t span { color: var(--muted); line-height: 1.5; }
.ev-invite-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; color: var(--muted); }
/* La hacienda pone el lugar; la organización la coordina un wedding planner externo */
.ev-host-sec { padding-top: 0; }
.ev-host { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 52px); border-radius: 30px; background: var(--alt); }
.ev-host-text { display: flex; flex-direction: column; gap: 16px; }
.ev-host-text p { margin: 0; max-width: 32rem; font-size: var(--step-1); line-height: 1.6; color: var(--ink); }
.ev-host-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 24px; }
.ev-host-col { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border-radius: 20px; background: var(--paper); }
.ev-host-col h3 { font-size: 1.375rem; line-height: 1.15; }
.ev-host-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ev-host-col li { position: relative; padding-left: 26px; line-height: 1.45; color: var(--ink); }
.ev-host-col li::before { content: ""; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); }
.ev-host-col.is-planner li::before { background: transparent; border: 2px solid var(--muted); box-sizing: border-box; }

/* ---- Historia: la foto de Doña Marianita y su historia, en formato estático ---- */
.hi-head { padding-block: clamp(40px, 6vw, 72px) clamp(24px, 3vw, 40px); }
.hi-head-in { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.hi-head .nb-h1 { max-width: 12em; font-size: clamp(2.75rem, 1.5rem + 4.6vw, 5.75rem); line-height: .96; }
.hi-years { margin: 0; font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); color: var(--muted); }
.hi-portrait { margin-top: clamp(28px, 4vw, 48px); margin-bottom: 0; }
.hi-portrait img, .hi-photo img { display: block; width: 100%; height: auto; border-radius: 10px; }
.hi-part { padding-block: clamp(44px, 5vw, 72px); }
.hi-col { max-width: 44rem; display: flex; flex-direction: column; gap: 18px; }
.hi-col h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.05; }
.hi-col p { margin: 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.75; color: var(--ink); }
.hi-part-bfly { margin-block: clamp(16px, 3vw, 32px); background: radial-gradient(55% 75% at 75% 40%, rgba(69, 188, 255, .2), rgba(13, 27, 61, 0) 70%), var(--navy); }
body[data-page="historia"] .hi-part-bfly h2 { color: var(--cream); }
.hi-part-bfly p { color: var(--cream2); }
.hi-bfly-mark { display: block; width: clamp(84px, 9vw, 116px); rotate: -8deg; }
.hi-bfly-mark .morfo { color: #9C8470; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); }
.hi-photo { margin-top: clamp(8px, 2vw, 16px); margin-bottom: clamp(8px, 2vw, 16px); }

/* ---- Comunidad · Chakra ---- */
.co-hero { padding-block: clamp(56px, 7vw, 88px) clamp(64px, 8vw, 104px); background: var(--green); overflow: hidden; }
.co-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: clamp(36px, 5vw, 56px); align-items: center; }
body[data-page="comunidad"] .co-hero .nb-h1 { color: var(--cream); }
.co-hero .nb-kicker { color: var(--leaf); }
.co-hero .nb-lead { color: var(--cream2); }
.co-hero-art { position: relative; height: clamp(400px, 40vw, 560px); }
.co-hero-art figure { position: absolute; margin: 0; overflow: hidden; border-radius: 50%; aspect-ratio: 1; }
.co-hero-art img { width: 100%; height: 100%; object-fit: cover; }
.co-c1 { right: 0; top: 0; width: 72%; max-width: 400px; }
.co-c2 { left: 4%; bottom: 0; width: 47%; max-width: 260px; border: 10px solid var(--green); }
.co-c3 { right: 8%; bottom: 2%; width: 31%; max-width: 170px; border: 8px solid var(--green); }
.co-nums-sec { padding-top: clamp(64px, 8vw, 88px); }
.co-nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 32px; }
.co-nums li { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 3px solid var(--primary); }
.co-nums b { font-family: var(--display); font-weight: 400; font-size: clamp(4rem, 3rem + 3vw, 6rem); line-height: .9; color: var(--primary); }
.co-nums span { color: var(--muted); font-size: 1.0625rem; line-height: 1.45; }
.co-do { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 36px 28px; }
.co-card { display: flex; flex-direction: column; gap: 16px; }
.co-card > img { width: 100%; height: 300px; object-fit: cover; border-radius: 0 120px 0 120px; }
.co-card:nth-child(even) > img { border-radius: 120px 0 120px 0; }
.co-card h3 { font-size: 2.1rem; line-height: 1.05; }
.co-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.co-gallery-sec { padding-top: 0; }
.co-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.co-gallery figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.co-gallery .zoom { display: block; width: 100%; height: auto; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; border-radius: 22px; }
.co-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
@media (hover: hover) and (pointer: fine) { .co-gallery .zoom:hover img { transform: scale(1.04); } }
.co-gallery figcaption { font-size: .9375rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 900px) { .co-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.co-voice-sec { background: var(--alt); }
.co-voice { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.co-voice-ph { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; border: 2px dashed rgba(20, 38, 26, .35); color: var(--green); }
.co-voice-ph .ic { width: 32px; height: 32px; }
.co-voice blockquote { margin: 0; max-width: 18em; font-family: var(--display); font-size: clamp(1.9rem, 1.3rem + 1.9vw, 3rem); line-height: 1.15; color: var(--ink); }
.co-voice p { margin: 0; color: var(--muted); }
.co-voice b { color: var(--ink); }
.co-help-title { margin-bottom: clamp(28px, 4vw, 40px); }
.co-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.co-way { --way-bg: var(--green); --way-ink: var(--cream); --way-sub: var(--cream2); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-height: 360px; padding: 36px; border-radius: 30px; background: var(--way-bg); color: var(--way-ink); }
.co-way-2 { --way-bg: var(--primary); --way-ink: #FFFFFF; --way-sub: #FBE0D4; }
.co-way-3 { --way-bg: var(--green-d); }
.co-way .ic { width: 36px; height: 36px; stroke-width: 1.6; }
body[data-page="comunidad"] .co-way h3 { color: var(--way-ink); font-size: 2.4rem; line-height: 1.02; }
.co-way p { margin: 0; color: var(--way-sub); line-height: 1.55; }
.co-way-btn { margin-top: auto; background: var(--way-ink); color: var(--way-bg); }

.ev-gallery-sec { padding-bottom: clamp(24px, 4vw, 48px); }
.ev-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ev-gallery figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ev-gallery .zoom { display: block; width: 100%; height: auto; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; border-radius: 26px; }
.ev-gallery img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
@media (hover: hover) and (pointer: fine) { .ev-gallery .zoom:hover img { transform: scale(1.03); } }
.ev-gallery figcaption { font-size: .9375rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 760px) { .ev-gallery { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---- Celular y tablet ---- */
@media (max-width: 900px) {
  .ev-spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
}
@media (max-width: 760px) {
  .ev-type { grid-template-columns: 52px minmax(0, 1fr); gap: 16px 18px; padding: 24px 0; }
  .ev-type > img { grid-column: 1 / -1; grid-row: 1; width: 100%; height: 200px; }
  .ev-num { font-size: 2.5rem; }
}
@media (max-width: 560px) {
  .nb-actions .btn { flex: 1 1 100%; }
  .ev-spaces { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 260px; }
  .ev-space-1, .ev-space-4 { grid-column: auto; grid-row: auto; }
  .ev-invite { padding: 8px; border-radius: 28px; }
  .ev-invite-cta .btn { width: 100%; }
  .ev-invite-cta { width: 100%; }
  .co-card > img { height: 240px; }
  .co-way { min-height: 0; padding: 28px; }
}

/* ---- Versión final ---- */
/* Voces de Minka sin testimonios todavía: la invitación sola, centrada */
.c4-voz-grid.is-solo { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
/* Aviso de privacidad */
.legal { padding-block: clamp(48px, 8vw, 96px); }
.legal-in { max-width: 720px; }
.legal h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); line-height: 1.05; margin: 8px 0 10px; }
.legal-date { color: var(--muted); font-size: var(--step--1); margin: 0 0 clamp(24px, 4vw, 40px); }
.legal h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); margin: 32px 0 10px; }
.legal p { max-width: 68ch; line-height: 1.65; }
.foot-base p { flex-wrap: wrap; column-gap: 18px; }
.foot-legal { color: inherit; opacity: .8; text-underline-offset: 3px; }
.foot-legal:hover { opacity: 1; }
.check-field label a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Portada "Acuarela" del hospedaje (pedido de Marco, oct 2026) ---- */
.hero-w { --hw-ink: #1E2B49; --hw-paper: #F6EFE1; --hw-text: #2E2117; --hw-muted: #6E5B49; --hw-line: rgba(46, 33, 23, .16);
  position: relative; margin-top: calc(-1 * var(--head-h)); background: var(--hw-paper); color: var(--hw-text); }
/* Alto fijo de la portada (--hs). La acuarela llena todo el ancho, sin bordes difuminados.
   Encuadre: en pantallas anchas y bajitas (laptops) la imagen sube lo justo para que se vea la cabaña hasta el piso,
   pero nunca más de un 15 % de su alto, para que el título siga sobre el cielo. 76.47cqw = alto de la imagen a todo el ancho. */
.hero-w-stage { --hs: clamp(520px, calc(100vh - var(--switch-h) - 24px), 1100px); position: relative; overflow: hidden; height: var(--hs); background: #DCEBF2; container-type: inline-size; }
@supports (height: 100svh) { .hero-w-stage { --hs: clamp(520px, calc(100svh - var(--switch-h) - 24px), 1100px); } }
.hero-w-media, .hero-w-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* mientras llega la ilustración se ve una versión mínima y borrosa de la misma acuarela */
.hero-w-stage::before { content: ""; position: absolute; inset: -24px; background: var(--hw-lqip) 50% 0% / cover no-repeat; filter: blur(16px); }
.hero-w-media img { object-fit: cover; object-position: 50% 6%; object-position: 50% calc(-1 * clamp(0px, 76.47cqw * .8 - var(--hs), 76.47cqw * .15)); transform-origin: 50% 30%; }
/* luz suave arriba, para que el menú y el título se lean sobre el cielo y las hojas */
.hero-w-glow { position: absolute; inset: 0 0 auto; height: 58%; background: radial-gradient(ellipse 62% 70% at 50% 18%, rgba(255, 253, 246, .72) 0%, rgba(255, 253, 246, .38) 45%, rgba(255, 253, 246, 0) 72%), linear-gradient(180deg, rgba(255, 253, 246, .55) 0%, rgba(255, 253, 246, 0) 34%); pointer-events: none; }
.hero-w-in { position: relative; z-index: 2; display: grid; justify-items: center; padding-top: calc(var(--head-h) + clamp(10px, 2.6vh, 30px)); text-align: center; }
.hero-w-title, .hero-w-hello { grid-area: 1 / 1; margin: 0; font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif; font-weight: 600; color: var(--hw-ink); letter-spacing: .04em; line-height: 1.04; text-transform: uppercase; text-shadow: 0 0 18px rgba(255, 253, 246, .95), 0 0 2px rgba(255, 253, 246, .9); }
.hero-w-letters { display: flex; flex-direction: column; align-items: center; gap: .1em; }
.hero-w-t1 { font-size: clamp(1.1rem, .62rem + 1.5vw, 2rem); letter-spacing: .1em; }
.hero-w-t2 { font-size: clamp(2.1rem, .7rem + 4.6vw, 5.3rem); }
.hw-word { display: inline-block; white-space: nowrap; }
.hw-ch { display: inline-block; }
.hero-w-hello { align-self: center; font-size: clamp(2.1rem, .7rem + 4.6vw, 5.3rem); opacity: 0; pointer-events: none; }
/* la mariposa va al lado del título sin ocupar lugar en la línea, así el título queda centrado de verdad */
.hero-w .mf-nowrap { position: relative; }
.hero-w .mf-hero { position: absolute; left: 100%; bottom: .5em; width: .8em; margin-left: .06em; --mf-tilt: -18deg; }
@media (max-width: 700px) { .hero-w .mf-hero { width: .72em; } }
.hero-w .mf-hero .morfo { filter: drop-shadow(0 8px 10px rgba(30, 43, 73, .32)); }
.hero-w-trail { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-w-trail path { fill: none; stroke: var(--hw-ink); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: .1 9; opacity: .75; transition: opacity .9s ease; }
.hero-w-trail.is-gone path { opacity: 0; }
/* borde de papel irregular al pie de la ilustración */
.hero-w-edge { position: absolute; z-index: 2; left: 0; bottom: -1px; width: 100%; height: clamp(22px, 3.2vw, 46px); fill: var(--hw-paper); }
.hero-w-edge .hw-bleed { opacity: .55; }
/* papel con una textura muy suave */
.hero-w-paper { position: relative; padding: clamp(18px, 3vw, 36px) 0 clamp(36px, 5vw, 64px); background-color: var(--hw-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .17 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-w-body { display: grid; justify-items: center; text-align: center; gap: 14px; max-width: 980px; }
.hero-w-eyebrow { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9A5A35; }
.hero-w-sub { margin: 0; font-family: var(--display); font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem); line-height: 1.1; color: var(--hw-text); }
.hero-w-lead { margin: 0; max-width: 36em; font-size: var(--step-1); line-height: 1.55; color: var(--hw-muted); }
.hero-w-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 6px; }
.hero-w .btn { min-height: 54px; padding: 0 28px; font-weight: 700; }
.hero-w .btn-primary { background: #B5603A; border-color: #B5603A; color: #FFF8EE; }
.hero-w .btn-outline { border-color: rgba(46, 33, 23, .4); color: var(--hw-text); background: transparent; }
.hero-w-video { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 8px; color: var(--hw-text); font-weight: 700; text-decoration: none; }
.hero-w-video small { font-size: inherit; font-weight: 500; color: var(--hw-muted); }
.hero-w-play { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(46, 33, 23, .3); transition: background-color .2s ease, transform .2s ease; }
.hero-w-play .ic { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; stroke: none; }
.hero-w a:focus-visible { outline: 3px solid #B5603A; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .hero-w .btn-primary:hover { background: #9E4F2D; border-color: #9E4F2D; }
  .hero-w .btn-outline:hover { background: rgba(46, 33, 23, .06); }
  .hero-w-video:hover .hero-w-play { background: #B5603A; border-color: #B5603A; color: #FFF8EE; transform: scale(1.06); }
}
.hero-w-facts { list-style: none; width: 100%; margin: 18px 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; border-top: 1px solid var(--hw-line); }
.hero-w-facts li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-w-facts li + li { border-left: 1px solid var(--hw-line); }
.hero-w-facts b { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 1rem + .9vw, 1.8rem); line-height: 1.1; color: var(--hw-text); }
.hero-w-facts b .stars { font-family: var(--body); font-size: .62em; letter-spacing: 1px; color: #D9962C; vertical-align: .15em; }
.hero-w-facts li > span { font-size: .875rem; color: var(--hw-muted); }
.wave-to-cacao.wave-on-paper { background: #F6EFE1; }
/* menú sobre el cielo claro de la ilustración */
body:not(.menu-open) .site-header.over-light:not(.is-scrolled) { color: #1E2B49; }
body:not(.menu-open) .site-header.over-light:not(.is-scrolled) .logo-light { display: block; }
body:not(.menu-open) .site-header.over-light:not(.is-scrolled) .logo-dark { display: none; }
body:not(.menu-open) .site-header.over-light:not(.is-scrolled) .menu-btn { border-color: rgba(30, 43, 73, .35); color: #1E2B49; background: rgba(255, 253, 246, .6); }
@media (min-width: 901px) {
  .site-header.over-light:not(.is-scrolled) .nav-links a { color: #1E2B49; text-shadow: 0 0 10px rgba(255, 253, 246, .9); }
  .site-header.over-light:not(.is-scrolled) .btn-deep { background: #B5603A; color: #FFF8EE; }
}
@media (max-width: 700px) {
  .hero-w-stage { --hs: clamp(460px, 68svh, 640px); }
  .hero-w-media img { object-position: 44% 0%; }
  .hero-w-glow { height: 50%; background: linear-gradient(180deg, rgba(255, 253, 246, .7) 0%, rgba(255, 253, 246, .35) 26%, rgba(255, 253, 246, 0) 46%); }
  .hero-w-t2 { font-size: clamp(1.5rem, 8.6vw, 2.6rem); }
  .hero-w-hello { font-size: clamp(1.8rem, 8.6vw, 2.6rem); }
  .hero-w-body { justify-items: stretch; text-align: left; }
  .hero-w-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .hero-w-actions .btn-primary, .hero-w-actions .btn-outline { grid-column: 1 / -1; }
  .hero-w .btn { min-height: 50px; padding: 0 12px; font-size: .9375rem; }
  .hero-w-video { justify-content: center; gap: 6px; min-height: 50px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(46, 33, 23, .3); font-size: .9375rem; }
  .hero-w-video small { display: none; }
  .hero-w-play { width: auto; height: auto; border: 0; }
  .hero-w-play .ic { width: 14px; height: 14px; }
  .hero-w-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding-top: 0; }
  .hero-w-facts li { padding: 14px 10px 14px 0; border-bottom: 1px solid var(--hw-line); }
  .hero-w-facts li + li { border-left: 0; }
  .hero-w-facts li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--hw-line); }
}
/* Animación de entrada: la ilustración se acerca despacio (como la cámara del video), aparece el saludo y luego el título letra por letra */
@media (prefers-reduced-motion: no-preference) {
  /* la secuencia empieza cuando la ilustración ya cargó (clase is-go, la pone el script; sin script se ve todo quieto) */
  .js .hero-w:not(.is-go) .hw-ch { opacity: 0; }
  .js .hero-w.is-go .hw-scene:first-child { animation: hw-cam 11s cubic-bezier(.25, .6, .25, 1) both; }
  .hw-scene.is-settle:not(:first-child) { animation: hw-settle 2.8s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero-w.is-go .hero-w-hello { animation: hw-hello 1.9s ease .15s both; }
  .js .hero-w.is-go .hw-ch { animation: hw-ch .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(1.85s + var(--i) * 55ms); }
  .hero-w-body > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-w-body > :nth-child(2) { animation-delay: .06s; }
  .hero-w-body > :nth-child(3) { animation-delay: .12s; }
  .hero-w-body > :nth-child(4) { animation-delay: .18s; }
  .hero-w-body > :nth-child(5) { animation-delay: .24s; }
}
@keyframes hw-cam { from { transform: scale(1.12) translateX(2.5%); } to { transform: scale(1) translateX(0); } }
@keyframes hw-hello { 0% { opacity: 0; letter-spacing: .3em; filter: blur(6px); } 22%, 70% { opacity: 1; letter-spacing: .06em; filter: blur(0); } 100% { opacity: 0; letter-spacing: .02em; filter: blur(4px); } }
@keyframes hw-ch { from { opacity: 0; transform: translateY(.18em); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ---- Botón flotante de WhatsApp con su ícono (nov 2026) ---- */
.wa-float { justify-content: center; width: 60px; min-height: 60px; height: 60px; padding: 0; background: #25D366; color: #fff; box-shadow: 0 10px 26px rgba(10, 40, 24, .32); }
.wa-float .wa-icon { width: 32px; height: 32px; flex: none; }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { background: #1EBE5A; } }
.wa-float:focus-visible { outline: 3px solid #1E2B49; outline-offset: 3px; }
@media (max-width: 700px) { .wa-float { width: 56px; height: 56px; min-height: 56px; } .wa-float .wa-icon { width: 30px; height: 30px; } }

/* ---- Portada: una acuarela por cabaña y la mariposa que salta entre ellas (nov 2026) ---- */
.hw-scene { opacity: 0; }
.hw-scene.is-on, .hw-scene.is-next { opacity: 1; }
.hw-scene.is-next { z-index: 1; }
@keyframes hw-settle { from { transform: scale(1.05); } to { transform: none; } }
.hero-w-lead .hw-lead1 { display: block; margin-bottom: 4px; font-family: var(--display); font-style: italic; font-size: 1.15em; color: var(--hw-text); }
.hw-pick { position: absolute; z-index: 4; left: max(24px, calc((100% - 1360px) / 2 + 24px)); bottom: clamp(30px, 4vw, 54px); display: grid; justify-items: start; gap: 8px; max-width: min(540px, calc(100% - 48px)); padding: 12px 14px 12px; border-radius: 20px; border: 1px solid rgba(46, 33, 23, .12); background: rgba(250, 245, 234, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 14px 34px rgba(30, 43, 73, .2); color: var(--hw-text); }
.hw-pick-label { margin: 0 0 0 4px; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9A5A35; }
.hw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hw-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(46, 33, 23, .24); background: #FFFDF7; color: var(--hw-text); font: 600 .9375rem/1 var(--body); cursor: pointer; transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .2s ease; }
.hw-chip[aria-pressed="true"] { background: #1E2B49; border-color: #1E2B49; color: #FFF8EE; }
.hw-chip:focus-visible { outline: 3px solid #B5603A; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .hw-chip:hover { transform: translateY(-1px); border-color: rgba(46, 33, 23, .45); } }
.hw-info { margin: 2px 0 0 4px; font-size: .875rem; line-height: 1.45; color: var(--hw-muted); }
.hw-info b { font-weight: 600; color: var(--hw-text); }
.hw-info a { color: #9A5A35; font-weight: 700; text-underline-offset: 3px; }
.hw-info span { animation: hw-info .5s ease both; }
@keyframes hw-info { from { opacity: 0; transform: translateY(4px); } }
.hw-bfly { position: absolute; z-index: 3; left: 0; top: 0; width: 58px; margin: -22px 0 0 -29px; pointer-events: none; }
.hw-bfly[hidden] { display: none; }
.hw-bfly .morfo { display: block; width: 100%; height: auto; transform: rotate(-12deg); filter: drop-shadow(0 7px 9px rgba(30, 43, 73, .35)); }
@media (max-width: 700px) {
  .hw-pick { left: 12px; right: 12px; bottom: 26px; max-width: none; padding: 10px 10px 10px; border-radius: 18px; }
  .hw-chips { width: 100%; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
  .hw-chip { padding: 0 6px; text-align: center; line-height: 1.15; }
  .hw-chip { justify-content: center; padding: 0 10px; }
  .hw-info { font-size: .8125rem; }
  .hw-bfly { width: 46px; margin: -17px 0 0 -23px; }
}

/* ---- Minka: subtítulo y sección propia del cacao (nov 2026) ---- */
.c4-tagline { margin: -6px 0 0; font-family: var(--display); font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem); line-height: 1.2; color: var(--c-mazorca); }
.c4-cacao-sec .c4-ribbon-wrap { margin-top: 0; }
.c4-cacao-sec .c4-cacao { margin-top: clamp(32px, 4vw, 48px); }

/* ==== Cambios de Marco (nov 2026) ==== */
/* Portada de Hospedaje: el video a todo el ancho con su proporción (no se recorta); en celular, más alto y centrado */
.hero-v .hero-v-stage { position: relative; overflow: hidden; width: 100%; height: max(460px, 76.47vw); background: #CFE3F1; }
@supports (width: 1cqw) { .hero-v { container-type: inline-size; } .hero-v .hero-v-stage { height: max(460px, 76.47cqw); } }
.hero-v-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hero-v-toggle { position: absolute; z-index: 3; right: max(16px, env(safe-area-inset-right, 0px)); bottom: clamp(34px, 4vw, 56px); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(30, 43, 73, .25); background: rgba(255, 253, 246, .78); color: #1E2B49; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hero-v-toggle .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.hero-v-toggle .ic-play { fill: currentColor; }
.hero-v-toggle .ic-play { display: none; margin-left: 2px; }
.hero-v-toggle .ic-replay { display: none; }
.hero-v-toggle[data-state="paused"] .ic-pause, .hero-v-toggle[data-state="ended"] .ic-pause { display: none; }
.hero-v-toggle[data-state="paused"] .ic-play { display: block; }
.hero-v-toggle[data-state="ended"] .ic-replay { display: block; }
.hero-v-toggle:focus-visible { outline: 3px solid #B5603A; outline-offset: 2px; }
.hero-v .hero-w-edge { z-index: 2; }
@media (max-width: 700px) { .hero-v .hero-v-stage { height: max(min(480px, 70svh), 76.47vw); } @supports (width: 1cqw) { .hero-v .hero-v-stage { height: max(min(480px, 70svh), 76.47cqw); } } }

/* Franja del ceibo: más alta, el árbol es el protagonista */
.river-ceibo { height: clamp(420px, 58vw, 860px); }
.river-ceibo img { object-position: 50% 62%; }
.river-ceibo::after { background: linear-gradient(180deg, rgba(10, 12, 8, 0) 50%, rgba(10, 12, 8, .66)); }
@media (max-width: 700px) { .river-ceibo { height: clamp(420px, 120vw, 620px); } .river-ceibo img { object-position: 58% 60%; } }

/* Complementa tu aventura */
.extra-body h3 { font-size: var(--step-2); }
.extra-book { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-weight: 700; color: var(--accent); text-underline-offset: 4px; }

/* Cómo llegar: mapa de Google, dirección y rutas */
.arrive-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.arrive-info { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.arrive-address { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: var(--step-1); line-height: 1.45; }
.arrive-address .ic { flex: none; width: 26px; height: 26px; margin-top: 2px; color: var(--accent); }
.route-card { padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.route-card h3 { font-family: var(--body); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.route-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; }
.route-stops li { position: relative; display: flex; align-items: center; font-weight: 600; font-size: .9375rem; }
.route-stops li span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); white-space: nowrap; }
.route-stops li + li::before { content: ""; width: 18px; height: 0; border-top: 2px dotted var(--muted); margin: 0 4px; opacity: .7; }
.route-stops li.is-start span { border-color: var(--accent); }
.route-stops li.is-end span { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.arrive-note { margin: 0; color: var(--muted); }
.arrive-map { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.arrive-map iframe, .arrive-map-static { display: block; width: 100%; aspect-ratio: 4 / 3; min-height: 320px; border: 0; border-radius: 22px; background: var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
.arrive-map-static { position: relative; overflow: hidden; color: #fff; text-decoration: none; }
.arrive-map-static img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.8); }
.arrive-map-static span { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-weight: 700; white-space: nowrap; }
.arrive-map-static .ic { width: 18px; height: 18px; }
.catalog-band { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
.catalog-band .catalog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: center; }
.catalog-band .catalog h2 { grid-column: 1; }
.catalog-band .catalog > p { grid-column: 1; color: var(--muted); }
.catalog-band .cat-files { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
.catalog-band .cat-status { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .arrive-grid { grid-template-columns: minmax(0, 1fr); }
  .catalog-band .catalog { grid-template-columns: minmax(0, 1fr); }
  .catalog-band .cat-files { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .route-stops { flex-direction: column; align-items: flex-start; row-gap: 0; }
  .route-stops li + li::before { content: none; }
  .route-stops li { padding-left: 22px; min-height: 40px; }
  .route-stops li::after { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; border-left: 2px dotted var(--muted); opacity: .6; }
  .route-stops li.is-start::after { top: 50%; }
  .route-stops li.is-end::after { bottom: 50%; }
  .route-stops li span::before { content: ""; position: absolute; left: 2px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--accent); }
  .route-stops li span { position: static; }
}

/* Bloque de Minka en Hospedaje: solo letras */
.mt-type { position: relative; overflow: hidden; background: #2B1610; color: #FBEFE6; padding-block: clamp(72px, 10vw, 140px) clamp(80px, 11vw, 150px); }
.wave-to-minka { fill: #2B1610; }
.wave-to-foot { background: #2B1610; }
.mt-in { position: relative; display: grid; justify-items: start; gap: 18px; }
.mt-word { position: absolute; z-index: 0; right: -.04em; top: 50%; transform: translateY(-50%); margin: 0; font-family: var(--display); font-size: clamp(9rem, 4rem + 22vw, 24rem); line-height: .8; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px rgba(243, 198, 211, .28); pointer-events: none; user-select: none; white-space: nowrap; }
.mt-kicker { position: relative; color: #F3C6D3; }
.mt-title { position: relative; max-width: 14em; font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5.6rem); line-height: 1; letter-spacing: -.01em; color: #FBEFE6; }
.mt-l1 { display: block; }
.mt-l2 { display: block; font-style: italic; color: #F3C6D3; }
.mt-text { position: relative; max-width: 34em; font-size: var(--step-1); line-height: 1.55; color: rgba(251, 239, 230, .82); }
.mt-btn { position: relative; margin-top: 8px; background: #F3C6D3; color: #2B1610; }
@media (hover: hover) and (pointer: fine) { .mt-btn:hover { background: #FBEFE6; } }
@media (max-width: 700px) { .mt-type { padding-bottom: calc(36vw + 40px); } .mt-word { top: auto; bottom: calc(-36vw - 28px); right: auto; left: -.03em; transform: none; font-size: 40vw; } }

/* Galería en su propia página y acceso desde la cabecera */
.gal-page { padding-top: clamp(40px, 6vw, 72px); }
.gal-head h1 { font-size: var(--step-4); }
.gal-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
.head-gal { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--head-ink); text-decoration: none; font-weight: 600; font-size: .9375rem; order: 2; }
.head-gal .ic { width: 20px; height: 20px; }
.head-gal.is-on { background: var(--hi); border-color: var(--hi); color: var(--hi-ink); }
.site-nav { order: 1; }
.menu-btn { order: 3; }
@media (min-width: 1041px) { .head-gal { margin-left: 4px; } }
@media (max-width: 1040px) { .head-gal { margin-left: auto; } .menu-btn { margin-left: 8px; } }
@media (max-width: 420px) { .head-gal span { display: none; } .head-gal { width: 44px; padding: 0; justify-content: center; } }
body:not(.menu-open) .site-header.over-light:not(.is-scrolled) .head-gal { color: #1E2B49; border-color: rgba(30, 43, 73, .3); background: rgba(255, 253, 246, .6); }

/* Eventos: la noche como protagonista */
.ev-night { position: relative; display: grid; min-height: clamp(560px, calc(100svh - var(--switch-h) - 70px), 980px); padding: 0; overflow: hidden; background: #070B18; color: #FFF8EE; }
.ev-night-art { position: absolute; inset: 0; }
.ev-night-art img, .ev-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.ev-night-art img { object-fit: cover; object-position: 50% 50%; }
.ev-stars circle { fill: #FFFFFF; opacity: 0; filter: drop-shadow(0 0 6px rgba(200, 220, 255, .9)); }
@media (prefers-reduced-motion: no-preference) { .ev-stars circle { animation: ev-twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite; } }
@keyframes ev-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: .95; } }
.ev-night-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 18, .78) 0%, rgba(5, 8, 18, .45) 38%, rgba(5, 8, 18, 0) 64%), linear-gradient(180deg, rgba(5, 8, 18, 0) 55%, rgba(5, 8, 18, .7) 100%); }
.ev-night-in { position: relative; z-index: 1; display: flex; align-items: flex-end; padding-block: clamp(40px, 8vh, 96px); }
.ev-night-text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 620px; }
.ev-night-kicker { margin: 0; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 248, 238, .35); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FFE2C8; }
body[data-page="eventos"] main .ev-night-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.8rem, 1.4rem + 5vw, 6rem); line-height: .98; color: #FFF8EE; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.ev-night-title .ev-accent { color: #F6A47A; font-style: italic; }
.ev-night-lead { margin: 0; max-width: 32em; font-size: var(--step-1); line-height: 1.55; color: rgba(255, 248, 238, .9); text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.ev-night-btn { background: #F6A47A; color: #2A140C; }
.ev-night-line { border: 1.5px solid rgba(255, 248, 238, .7); color: #FFF8EE; background: rgba(5, 8, 18, .25); }
@media (hover: hover) and (pointer: fine) { .ev-night-btn:hover { background: #FFC39E; } .ev-night-line:hover { background: #FFF8EE; color: #1E1B15; } }
@media (max-width: 700px) {
  .ev-night { min-height: min(86svh, 760px); }
  .ev-night-scrim { background: linear-gradient(180deg, rgba(5, 8, 18, .1) 0%, rgba(5, 8, 18, .2) 35%, rgba(5, 8, 18, .86) 78%); }
  .ev-night-in { padding-block: 32px; }
}
/* Eventos con la foto de la fiesta (5 nov 2026): la fiesta queda abajo, el texto arriba sobre el cielo y los árboles */
.ev-night-art picture { position: absolute; inset: 0; }
.ev-night-art img { object-position: 50% 100%; }
.ev-night-scrim { background: linear-gradient(90deg, rgba(5, 8, 18, .72) 0%, rgba(5, 8, 18, .38) 36%, rgba(5, 8, 18, 0) 60%), linear-gradient(180deg, rgba(5, 8, 18, .5) 0%, rgba(5, 8, 18, 0) 46%); }
.ev-night-in { width: 100%; align-items: flex-start; padding-block: clamp(92px, 12vh, 132px) clamp(150px, 30vh, 320px); }
.ev-night .ev-night-text { max-width: 760px; gap: 16px; }
body[data-page="eventos"] main .ev-night .ev-night-title { font-size: clamp(2.6rem, 1.1rem + 4vw, 4.6rem); }
.ev-night .ev-night-lead { max-width: 34em; }
@media (max-width: 700px) {
  .ev-night { min-height: min(92svh, 860px); }
  .ev-night-art img { object-position: 50% 100%; }
  .ev-night-scrim { background: linear-gradient(180deg, rgba(5, 8, 18, .55) 0%, rgba(5, 8, 18, .35) 40%, rgba(5, 8, 18, 0) 62%); }
  .ev-night-in { padding-block: 92px 46svh; }
}
/* Cabecera: los enlaces nunca se parten en dos líneas; en pantallas medianas Galería queda solo con el ícono */
.nav-links a { white-space: nowrap; }
@media (min-width: 1041px) and (max-width: 1320px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: .875rem; }
  .site-nav { gap: 16px; }
  .head-gal { width: 44px; padding: 0; justify-content: center; }
  .head-gal span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Historia: cuento infantil descargable (6 nov 2026) */
.hi-cuento-top { margin-top: 4px; }
.hi-cuento-sec { padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 104px); }
.hi-cuento { display: grid; grid-template-columns: minmax(150px, 250px) 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; max-width: 62rem; margin-inline: auto; padding: clamp(24px, 4vw, 48px); border-radius: 18px; background: radial-gradient(60% 80% at 85% 30%, rgba(69, 188, 255, .22), rgba(13, 27, 61, 0) 70%), var(--navy); color: var(--cream); }
.hi-cuento-cover { margin: 0; }
.hi-cuento-cover img { display: block; width: 100%; height: auto; border-radius: 6px; transform: rotate(-2.5deg); box-shadow: 0 22px 44px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .3); }
.hi-cuento-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
body[data-page="historia"] .hi-cuento h2 { margin: 0; color: var(--cream); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); line-height: 1.04; }
.hi-cuento-text > p { margin: 0; color: var(--cream2); font-size: clamp(1rem, .96rem + .25vw, 1.15rem); line-height: 1.65; }
.hi-cuento .nb-kicker { color: #9DD7FF; }
.hi-cuento-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px !important; }
.hi-cuento-meta { font-size: var(--step--1); color: var(--cream2); opacity: .85; }
.hi-cuento .cat-status { color: var(--cream2); }
@media (max-width: 640px) {
  .hi-cuento { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hi-cuento-cover { width: min(210px, 62vw); }
  .hi-cuento-text { align-items: center; }
  .hi-cuento-actions { justify-content: center; }
  .hi-cuento-actions .btn { width: 100%; justify-content: center; }
}

/* ===== Hospedaje con los colores del logo (pedido de Marco, 6 nov 2026) =====
   Versión clara: fondos blancos y celeste muy suave, textos en el azul marino del logo,
   botones en su azul y detalles en los dos verdes de las hojas. Solo afecta a la página de Hospedaje. */
:root:has(body:is([data-page="home"], [data-page="galeria"], [data-page="privacidad"], [data-page="reservar"])) { background: #F5FAFD; color-scheme: light; }
/* la Galería salió de Hospedaje y usa los mismos colores */
body:is([data-page="home"], [data-page="galeria"], [data-page="privacidad"], [data-page="reservar"]) {
  --logo-blue: #0391CE; --logo-blue2: #0475AF; --logo-navy: #0B578E; --logo-green: #179348; --logo-green2: #0F7E43; --logo-lime: #8CBD48;
  --paper: #F5FAFD; --surface: #FFFFFF; --ink: #12304C; --muted: #4F6C86; --line: #D5E6F1; --alt: #EAF4FB;
  --primary: #0475AF; --primary-ink: #FFFFFF; --accent: #0F7E43;
  --deep: #0B4D7E; --deep-ink: #FFFFFF; --deep-muted: #CFE3F2; --deep-line: rgba(255, 255, 255, .22);
  --hi: #8CBD48; --hi-ink: #0E2A44; --switch: #0B4D7E;
  --head: #FFFFFF; --head-ink: #12304C; --heading: #0B578E;
  --cta2: #0B578E; --cta2-ink: #FFFFFF; --blob: #DCEEF9; --pill: #E6F2DC; --pill-ink: #0F6B3A;
  --minka-band: #0F7E43; --minka-ink: #FFFFFF; --minka-accent: #8CBD48; --minka-accent-ink: #0E2A1A;
  --river: #0391CE; --star: #E3A008;
  color-scheme: light;
}
body:is([data-page="home"], [data-page="galeria"], [data-page="privacidad"], [data-page="reservar"]) .logo-light { display: block; }
body:is([data-page="home"], [data-page="galeria"], [data-page="privacidad"], [data-page="reservar"]) .logo-dark { display: none; }
body:is([data-page="home"], [data-page="galeria"], [data-page="privacidad"], [data-page="reservar"]) .switch { background: #0B4D7E; }
body[data-page="galeria"] .head-gal.is-on { color: #0E2A44; }
/* la pestaña de Hospedaje en la barra superior usa el verde claro del logo en todas las páginas */
.seg-home { --tab: #8CBD48; }
/* portada: el papel de abajo del video pasa a blanco con textos en azul */
body[data-page="home"] .hero-w { --hw-ink: #0B578E; --hw-paper: #FFFFFF; --hw-text: #12304C; --hw-muted: #4F6C86; --hw-line: rgba(11, 87, 142, .16); }
body[data-page="home"] .hero-w-paper { background-image: none; }
body[data-page="home"] .hero-w-eyebrow { color: #0F7E43; }
body[data-page="home"] .hero-w-sub { color: #0B578E; }
body[data-page="home"] .hero-w .btn-primary { background: #0475AF; border-color: #0475AF; color: #FFFFFF; }
body[data-page="home"] .hero-w .btn-outline { border-color: rgba(11, 87, 142, .4); color: #0B578E; }
body[data-page="home"] .hero-w a:focus-visible, body[data-page="home"] .hero-v-toggle:focus-visible { outline-color: #0391CE; }
@media (hover: hover) and (pointer: fine) {
  body[data-page="home"] .hero-w .btn-primary:hover { background: #0B578E; border-color: #0B578E; }
  body[data-page="home"] .hero-w .btn-outline:hover { background: rgba(3, 145, 206, .07); }
}
body[data-page="home"] .hero-v-toggle { color: #0B578E; border-color: rgba(11, 87, 142, .25); background: rgba(255, 255, 255, .82); }
/* cabecera sobre la portada */
@media (min-width: 901px) {
  body[data-page="home"] .site-header.over-light:not(.is-scrolled) .btn-deep,
  body[data-page="home"] .site-header.over-hero:not(.is-scrolled) .btn-deep { background: #0475AF; color: #FFFFFF; }
  body[data-page="home"] .site-header.over-light:not(.is-scrolled) .nav-links a { color: #0B578E; }
}
body[data-page="home"]:not(.menu-open) .site-header.over-light:not(.is-scrolled) { color: #0B578E; }
body[data-page="home"]:not(.menu-open) .site-header.over-light:not(.is-scrolled) .head-gal { color: #0B578E; border-color: rgba(11, 87, 142, .3); background: rgba(255, 255, 255, .7); }
body[data-page="home"]:not(.menu-open) .site-header.over-light:not(.is-scrolled) .menu-btn { color: #0B578E; border-color: rgba(11, 87, 142, .35); background: rgba(255, 255, 255, .7); }
body[data-page="home"] .head-gal.is-on { color: #0E2A44; }
/* habitaciones: banda celeste clara con tarjetas blancas (antes chocolate) */
body[data-page="home"] .wave-to-cacao, body[data-page="home"] .wave-to-cacao.wave-on-paper { background: #FFFFFF; fill: #E8F3FA; }
body[data-page="home"] .wave-from-cacao { background: #E8F3FA; fill: var(--paper); }
body[data-page="home"] .band-cacao { background: #E8F3FA; color: var(--ink); }
body[data-page="home"] .band-cacao .sec-head h2 { color: #0B578E; }
body[data-page="home"] .band-cacao .sec-head p:not(.kicker), body[data-page="home"] .band-cacao .note, body[data-page="home"] .band-cacao .sub { color: var(--muted); }
body[data-page="home"] .band-cacao .kicker { color: #0F7E43; }
body[data-page="home"] .band-cacao .sub::after { background: var(--line); }
body[data-page="home"] .band-cacao .amenities li { background: #FFFFFF; border-color: var(--line); color: var(--ink); }
body[data-page="home"] .band-cacao .amenities .ic { color: #179348; }
body[data-page="home"] .band-cacao .sec-foot { border-top-color: var(--line); }
body[data-page="home"] .band-cacao .btn-cream { background: #0475AF; color: #FFFFFF; border-color: #0475AF; }
body[data-page="home"] .cabin-card { box-shadow: 0 1px 0 rgba(11, 87, 142, .06), 0 18px 40px rgba(11, 77, 126, .10); }
/* mapa: pines en azul marino, el elegido en el azul del logo; lugares activos en verde */
body[data-page="home"] .map-canvas { box-shadow: 0 1px 0 var(--line), 0 18px 40px rgba(11, 77, 126, .16); }
body[data-page="home"] .pin { color: #0B578E; }
body[data-page="home"] .pin-cabin { background: #0B578E; color: #FFFFFF; }
body[data-page="home"] .pin.is-on { background: #0391CE; color: #FFFFFF; }
body[data-page="home"] .pin.is-on::after { border-color: #0391CE; }
body[data-page="home"] .pin.is-hl.pin-place, body[data-page="home"] .pin-place.is-on { background: #0F7E43; color: #FFFFFF; }
body[data-page="home"] .pin-place.is-on::after { border-color: #0F7E43; }
body[data-page="home"] .map-card .chip-n { background: #0B578E; color: #FFFFFF; }
body[data-page="home"] .map-card-num { color: #0B578E; }
body[data-page="home"] .map-tip, body[data-page="home"] .pin-tip { color: #0B578E; }
body[data-page="home"] .map-tip.is-docked { background: #0B578E; color: #FFFFFF; }
/* reseñas: iniciales en los colores del logo */
body[data-page="home"] .rv-av { background: #0391CE; color: #FFFFFF; }
body[data-page="home"] .rv-av-1 { background: #0B578E; }
body[data-page="home"] .rv-av-2 { background: #179348; }
body[data-page="home"] .rv-av-3 { background: #0475AF; }
/* Minka al final: en el verde de las hojas del logo */
body[data-page="home"] .wave-to-minka { fill: #0F7E43; }
body[data-page="home"] .wave-to-foot { background: #0F7E43; fill: var(--deep); }
body[data-page="home"] .mt-type { background: #0F7E43; color: #FFFFFF; }
body[data-page="home"] .mt-word { -webkit-text-stroke: 1.5px rgba(200, 229, 154, .32); }
body[data-page="home"] .mt-kicker { color: #D3EBA9; }
body[data-page="home"] .mt-title { color: #FFFFFF; }
body[data-page="home"] .mt-l2 { color: #CDE8A0; }
body[data-page="home"] .mt-text { color: rgba(255, 255, 255, .9); }
body[data-page="home"] .mt-btn { background: #FFFFFF; color: #0F6B3A; }
@media (hover: hover) and (pointer: fine) { body[data-page="home"] .mt-btn:hover { background: #E6F2DC; } }

/* ===== Eventos, Historia y Comunidad con los colores del logo (6 nov 2026) =====
   Cada página conserva su fondo claro, su tipografía y su diseño; botones, enlaces, títulos, bandas oscuras
   y pie de página pasan a los azules y verdes del logo, para que toda la web se sienta una sola. */
body:is([data-page="eventos"], [data-page="historia"], [data-page="comunidad"]) {
  --primary: #0475AF; --primary-ink: #FFFFFF; --accent: #0F7E43; --hi: #0F7E43; --hi-ink: #FFFFFF;
  --heading: #0B578E; --ink: #17324D; --muted: #4E6780; --cta2: #0475AF; --cta2-ink: #FFFFFF; --head-ink: #17324D;
  --deep: #0B4D7E; --deep-ink: #FFFFFF; --deep-muted: #CFE3F2; --deep-line: rgba(255, 255, 255, .2);
  --line: rgba(11, 87, 142, .15);
}
body[data-page="eventos"] { --coral: #0391CE; --gold: #8CBD48; --blush: #E3F1FA; --alt: #EAF4FB; }
body[data-page="historia"] { --navy: #0A3F68; }
body[data-page="comunidad"] { --green: #0F7E43; --green-d: #0B4D7E; --leaf: #D3EBA9; --cream2: #DCEFD0; --alt: #EAF4FB; }
/* Eventos: portada de noche, espacios e invitación */
.ev-night-kicker { color: #D3EBA9; }
.ev-night-title .ev-accent { color: #B6DD7A; }
.ev-night-btn { background: #0475AF; color: #FFFFFF; }
@media (hover: hover) and (pointer: fine) { .ev-night-btn:hover { background: #0391CE; } }
body[data-page="eventos"] .ev-space::after { background: linear-gradient(180deg, rgba(6, 36, 62, 0) 40%, rgba(6, 36, 62, .88) 100%); }
body[data-page="eventos"] .ev-invite { box-shadow: 0 30px 60px rgba(11, 77, 126, .14); }
body[data-page="eventos"] .ev-chip { color: #0E2A44; }
/* Comunidad: tarjetas de "cómo ayudar" */
body[data-page="comunidad"] .co-way-2 { --way-sub: #D6EAF7; }
body[data-page="comunidad"] .co-voice-ph { border-color: rgba(11, 87, 142, .35); }
body:is([data-page="eventos"], [data-page="historia"], [data-page="comunidad"]) .switch { background: #0B4D7E; }
/* Galería y Minka: fotos sin descripciones encima ni en el visor (pedido de Marco, 7 nov 2026) */
body:is([data-page="galeria"], [data-page="minka"]) .lb-cap { display: none; }

/* Portada en laptop y computadora (7 nov 2026): la pintura entera cabe en la pantalla, sin tener que bajar.
   Debajo de la cabecera, centrada sobre el papel blanco, con los bordes rasgados (nítidos, sin difuminar).
   En celular sigue igual, a todo el ancho. */
@media (min-width: 701px) {
  .hero-v { padding-top: calc(var(--head-h) + 10px); }
  .hero-v .hero-v-stage, .hero-v .hero-v-stage { height: auto; }
  .hero-v .hero-v-stage { width: min(100%, calc((100vh - var(--switch-h) - var(--head-h) - 30px) * 1.3077)); aspect-ratio: 1088 / 832; margin-inline: auto;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 765' preserveAspectRatio='none'%3E%3Cpath d='M0.0 2.4 L16.4 4.4 L31.6 3.7 L51.4 0.8 L73.5 0.7 L94.5 0.9 L109.9 3.0 L137.2 1.2 L154.7 4.3 L183.9 4.0 L204.2 6.4 L219.0 5.7 L237.6 1.4 L253.5 2.4 L280.6 1.6 L303.9 4.3 L323.8 3.8 L338.8 0.9 L356.1 4.6 L377.0 2.4 L400.3 3.2 L419.1 5.3 L444.3 2.0 L467.5 3.7 L495.5 4.9 L514.1 6.4 L530.0 3.0 L556.1 1.4 L577.9 0.7 L602.6 5.1 L625.8 5.8 L644.8 4.7 L668.3 4.0 L689.6 5.5 L718.8 3.3 L743.4 0.9 L768.6 4.4 L798.5 5.4 L817.0 2.8 L841.7 0.6 L863.1 1.5 L879.0 0.9 L905.3 1.3 L923.3 2.8 L951.2 1.0 L972.4 3.8 L994.6 5.7 L997.8 0.0 L997.3 20.6 L993.8 48.8 L998.4 65.2 L998.1 82.9 L996.0 104.7 L999.5 122.9 L997.3 143.6 L993.8 166.6 L996.4 191.7 L995.4 215.6 L994.1 230.4 L994.3 256.9 L997.1 283.7 L998.9 304.1 L999.1 328.2 L998.2 343.3 L997.5 359.9 L999.5 374.7 L998.9 391.2 L999.3 411.0 L995.8 439.0 L998.0 455.3 L997.3 474.9 L994.4 490.9 L996.7 520.7 L999.0 542.5 L997.4 558.1 L994.5 576.4 L999.4 592.9 L996.3 622.2 L996.2 638.5 L996.3 652.9 L994.3 682.6 L997.9 707.7 L998.5 727.6 L996.3 754.0 L1000.0 762.4 L982.4 759.2 L952.7 759.0 L925.8 759.2 L899.9 763.0 L877.7 762.2 L863.2 764.3 L844.7 762.8 L819.6 758.3 L798.5 758.4 L768.7 758.3 L748.8 763.1 L731.2 763.2 L713.9 760.4 L685.5 759.0 L663.9 760.3 L637.1 763.9 L612.5 758.6 L586.0 759.6 L564.3 763.3 L537.7 762.3 L510.9 758.2 L490.6 761.9 L461.4 759.8 L444.7 763.7 L428.3 758.6 L401.4 763.5 L374.1 758.1 L349.6 762.2 L326.9 763.6 L312.6 758.2 L288.2 761.1 L259.3 761.7 L231.3 759.1 L214.0 762.9 L195.3 762.9 L171.9 762.8 L151.2 763.6 L122.6 762.2 L101.3 760.7 L72.8 761.8 L44.2 761.2 L21.6 761.1 L7.3 761.6 L0.5 765.0 L1.5 738.2 L4.9 716.6 L2.5 693.7 L3.8 671.4 L1.1 644.9 L2.0 621.9 L5.1 603.5 L3.9 581.4 L6.0 555.2 L4.2 534.1 L3.6 512.0 L3.2 486.9 L3.4 464.4 L4.7 435.4 L6.2 407.3 L3.9 389.2 L5.5 360.1 L1.2 343.9 L0.9 322.8 L0.9 305.0 L5.2 280.3 L1.4 251.9 L4.5 226.4 L5.8 210.2 L1.8 180.7 L2.9 151.4 L6.4 129.6 L1.5 102.3 L3.6 81.4 L1.7 62.0 L4.8 42.9 L3.8 28.6 L0.6 7.5Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 765' preserveAspectRatio='none'%3E%3Cpath d='M0.0 2.4 L16.4 4.4 L31.6 3.7 L51.4 0.8 L73.5 0.7 L94.5 0.9 L109.9 3.0 L137.2 1.2 L154.7 4.3 L183.9 4.0 L204.2 6.4 L219.0 5.7 L237.6 1.4 L253.5 2.4 L280.6 1.6 L303.9 4.3 L323.8 3.8 L338.8 0.9 L356.1 4.6 L377.0 2.4 L400.3 3.2 L419.1 5.3 L444.3 2.0 L467.5 3.7 L495.5 4.9 L514.1 6.4 L530.0 3.0 L556.1 1.4 L577.9 0.7 L602.6 5.1 L625.8 5.8 L644.8 4.7 L668.3 4.0 L689.6 5.5 L718.8 3.3 L743.4 0.9 L768.6 4.4 L798.5 5.4 L817.0 2.8 L841.7 0.6 L863.1 1.5 L879.0 0.9 L905.3 1.3 L923.3 2.8 L951.2 1.0 L972.4 3.8 L994.6 5.7 L997.8 0.0 L997.3 20.6 L993.8 48.8 L998.4 65.2 L998.1 82.9 L996.0 104.7 L999.5 122.9 L997.3 143.6 L993.8 166.6 L996.4 191.7 L995.4 215.6 L994.1 230.4 L994.3 256.9 L997.1 283.7 L998.9 304.1 L999.1 328.2 L998.2 343.3 L997.5 359.9 L999.5 374.7 L998.9 391.2 L999.3 411.0 L995.8 439.0 L998.0 455.3 L997.3 474.9 L994.4 490.9 L996.7 520.7 L999.0 542.5 L997.4 558.1 L994.5 576.4 L999.4 592.9 L996.3 622.2 L996.2 638.5 L996.3 652.9 L994.3 682.6 L997.9 707.7 L998.5 727.6 L996.3 754.0 L1000.0 762.4 L982.4 759.2 L952.7 759.0 L925.8 759.2 L899.9 763.0 L877.7 762.2 L863.2 764.3 L844.7 762.8 L819.6 758.3 L798.5 758.4 L768.7 758.3 L748.8 763.1 L731.2 763.2 L713.9 760.4 L685.5 759.0 L663.9 760.3 L637.1 763.9 L612.5 758.6 L586.0 759.6 L564.3 763.3 L537.7 762.3 L510.9 758.2 L490.6 761.9 L461.4 759.8 L444.7 763.7 L428.3 758.6 L401.4 763.5 L374.1 758.1 L349.6 762.2 L326.9 763.6 L312.6 758.2 L288.2 761.1 L259.3 761.7 L231.3 759.1 L214.0 762.9 L195.3 762.9 L171.9 762.8 L151.2 763.6 L122.6 762.2 L101.3 760.7 L72.8 761.8 L44.2 761.2 L21.6 761.1 L7.3 761.6 L0.5 765.0 L1.5 738.2 L4.9 716.6 L2.5 693.7 L3.8 671.4 L1.1 644.9 L2.0 621.9 L5.1 603.5 L3.9 581.4 L6.0 555.2 L4.2 534.1 L3.6 512.0 L3.2 486.9 L3.4 464.4 L4.7 435.4 L6.2 407.3 L3.9 389.2 L5.5 360.1 L1.2 343.9 L0.9 322.8 L0.9 305.0 L5.2 280.3 L1.4 251.9 L4.5 226.4 L5.8 210.2 L1.8 180.7 L2.9 151.4 L6.4 129.6 L1.5 102.3 L3.6 81.4 L1.7 62.0 L4.8 42.9 L3.8 28.6 L0.6 7.5Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
  @supports (width: 1cqw) { .hero-v .hero-v-stage { height: auto; } }
  .hero-v .hero-w-edge { display: none; }
  .hero-v .hero-v-toggle { bottom: 22px; right: 22px; }
}
@media (min-width: 1100px) {
  .hero-v .hero-v-stage { width: min(100%, 62vw, calc((100vh - var(--switch-h) - var(--head-h) - 30px) * 1.3077)); }
}
/* Lianas en acuarela a los lados de la portada (pantallas de 1100 px o más) */
.hv-deco { display: none; }
@media (min-width: 1100px) {
  .hero-v { --hv-w2: min(62vw, calc((100vh - var(--switch-h) - var(--head-h) - 30px) * 1.3077)); --hv-h: calc(var(--hv-w2) / 1.3077); }
  .hv-deco { display: block; position: absolute; z-index: 1; top: var(--head-h); width: calc((100% - var(--hv-w2)) / 2); height: calc(var(--hv-h) + 10px); overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px); mask-image: linear-gradient(180deg, transparent 0, #000 22px); }
  .hv-deco-l { left: 0; }
  .hv-deco-r { right: 0; }
  .hv-deco picture { position: absolute; top: 0; display: block; }
  .hv-deco img { display: block; width: 100%; height: auto; }
  .hv-liana { transform-origin: 50% 0; animation: hv-sway 7s ease-in-out infinite alternate; }
  /* follaje tupido arriba y cinco lianas por lado, cada una con su propio vaivén */
  .hv-copa { left: -3%; width: 106%; top: -8px; z-index: 2; transform-origin: 50% 0; animation: hv-sway-s 9s ease-in-out infinite alternate; }
  .hv-liana { top: 4%; }
  .hv-l4 { left: 1%; width: 25%; animation-duration: 7.6s; animation-delay: -3s; }
  .hv-l2 { left: 20%; width: 27%; animation-duration: 6.4s; animation-delay: -2s; }
  .hv-l1 { left: 40%; width: 30%; animation-duration: 8s; }
  .hv-l3 { left: 61%; width: 24%; animation-duration: 7.1s; animation-delay: -4s; }
  .hv-l5 { left: 78%; width: 19%; animation-duration: 6.8s; animation-delay: -1s; }
  .hv-r5 { left: 2%; width: 19%; animation-duration: 6.9s; animation-delay: -2s; }
  .hv-r3 { left: 17%; width: 24%; animation-duration: 7.4s; animation-delay: -1s; }
  .hv-r2 { left: 35%; width: 29%; animation-duration: 8.4s; animation-delay: -3s; }
  .hv-r4 { left: 55%; width: 26%; animation-duration: 7.2s; animation-delay: -5s; }
  .hv-r1 { left: 73%; width: 28%; animation-duration: 6.6s; animation-delay: -4s; }
  .hv-leaf { z-index: 3; }
  .hv-leaf { width: 10%; top: -40px; opacity: 0; animation: hv-fall 19s linear infinite; }
  .hv-leaf-1 { left: 22%; animation-delay: 1.5s; }
  .hv-leaf-2 { left: 56%; animation-duration: 23s; animation-delay: 9s; --dx: -26px; }
  .hv-leaf-3 { left: 76%; animation-duration: 21s; animation-delay: 15s; }
  .hv-leaf-4 { left: 18%; animation-duration: 22s; animation-delay: 5s; --dx: -24px; }
  .hv-leaf-5 { left: 50%; animation-duration: 18s; animation-delay: 12s; }
  .hv-leaf-6 { left: 78%; animation-duration: 24s; animation-delay: 18s; --dx: -30px; }
}
@keyframes hv-sway { from { transform: rotate(-1.7deg); } to { transform: rotate(1.7deg); } }
@keyframes hv-sway-s { from { transform: rotate(-.5deg); } to { transform: rotate(.5deg); } }
@keyframes hv-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(-20deg); }
  6% { opacity: .95; }
  25% { transform: translate(var(--dx, 28px), calc(var(--hv-h) * .26)) rotate(25deg); }
  50% { transform: translate(0, calc(var(--hv-h) * .52)) rotate(-15deg); }
  75% { transform: translate(var(--dx, 28px), calc(var(--hv-h) * .78)) rotate(30deg); }
  92% { opacity: .9; }
  100% { opacity: 0; transform: translate(0, calc(var(--hv-h) + 40px)) rotate(-10deg); }
}
@media (prefers-reduced-motion: reduce) { .hv-liana, .hv-copa { animation: none; } .hv-leaf { display: none; } }

/* ===== Correcciones de Marco (9 nov 2026) ===== */
/* Hospedaje: el botón "Reservar por WhatsApp" de la portada en el verde del logo */
body[data-page="home"] .hero-w .hero-w-actions .btn-primary { background: #0F7E43; border-color: #0F7E43; color: #FFFFFF; }
@media (hover: hover) and (pointer: fine) { body[data-page="home"] .hero-w .hero-w-actions .btn-primary:hover { background: #0B6234; border-color: #0B6234; } }

/* Minka en los verdes del logo: de un verde muy claro arriba a un verde selva oscuro abajo (antes, los colores del cacao) */
body[data-page="minka"] {
  --paper: #F3F8EE; --surface: #FFFFFF; --ink: #10301F; --muted: #46604F; --line: rgba(16, 48, 31, .14); --alt: #E7F2DE;
  --primary: #0F7E43; --primary-ink: #FFFFFF; --accent: #0F7E43; --hi: #0F7E43; --hi-ink: #FFFFFF;
  --deep: #0A2A1A; --deep-ink: #F1F8EA; --deep-muted: #C9E2B8; --deep-line: rgba(241, 248, 234, .16);
  --head: #F3F8EE; --head-ink: #10301F; --heading: #10301F; --cta2: #0F7E43; --cta2-ink: #FFFFFF;
  --kraft: #E7F2DE; --kraft-ink: #10301F; --kraft-line: rgba(16, 48, 31, .2); --rule: rgba(16, 48, 31, .14);
  --c-pulpa: #F3F8EE; --c-pulpa2: #E7F2DE; --c-mazorca: #0F7E43; --c-mazorca-d: #0B6234; --c-ferm: #EAF4D6; --c-sec: #D9EBC5;
  --c-tost: #176B3D; --c-tost2: #12552F; --c-voz: #0F4527; --c-choco: #0B321E; --c-choco2: #114029; --c-cream: #F1F8EA; --c-cream2: #C9E2B8; --c-gold: #8CBD48;
}
body[data-page="minka"] .switch { background: #0B4D7E; }
.seg-minka { --tab: #7ED3A6; }
body[data-page="minka"] .site-footer { background: #0A2A1A; }
.c4-dot-1 { background: #CFE8B0; } .c4-dot-2 { background: #8CBD48; } .c4-dot-3 { background: #4FA65A; } .c4-dot-4 { background: #179348; } .c4-dot-5 { background: #0B4D2C; }
.c4-dot { box-shadow: 0 0 0 3px rgba(16, 48, 31, .1); }
@media (hover: hover) and (pointer: fine) { .c4-btn-gold:hover { background: #A5D166; } }
.c4-step-1 { background: #DCEFC8; color: var(--c-choco); }
.c4-step-2 { background: #B9DC8A; color: var(--c-choco); }
.c4-step-3 { background: #8CBD48; color: var(--c-choco); }
.c4-step-4 { background: #179348; color: #FFFFFF; }
.c4-step-5 { background: #0B321E; color: var(--c-cream); }
.c4-rv.is-template .rv-slide { background: #E7F2DE; }
.c4-rv.is-template .rv-slide blockquote p { color: #2F4A39; }
.c4-story-av.is-empty { border-color: rgba(15, 126, 67, .55); }
.mk-video::backdrop { background: rgba(5, 20, 12, .9); }
.c4-form .form-status.err { color: #FFC2A8; }
.c4-area h3 { color: #0F7E43; }

/* Portada de Minka: la foto con el título dentro */
.c4-hero { padding-block: clamp(14px, 2vw, 24px) clamp(56px, 6vw, 88px); }
.c4-banner { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; min-height: 380px; max-height: calc(100svh - var(--switch-h) - var(--head-h) - 40px);
  border-radius: 30px; background: #2C5A35; isolation: isolate; }
.c4-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.c4-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 30, 17, .62) 0%, rgba(6, 30, 17, .32) 34%, rgba(6, 30, 17, 0) 56%), linear-gradient(0deg, rgba(6, 30, 17, .62) 0%, rgba(6, 30, 17, .2) 32%, rgba(6, 30, 17, 0) 52%); }
.c4-banner-text { position: absolute; z-index: 2; left: 0; bottom: 0; display: flex; flex-direction: column; gap: 12px; max-width: 50%; padding: clamp(22px, 4vw, 52px); }
.c4-banner .c4-eyebrow { color: #D6EDB4; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
body[data-page="minka"] .c4-banner .c4-h1 { margin: 0; font-size: clamp(2.9rem, 1.2rem + 4.6vw, 5.6rem); color: #FFFFFF; text-shadow: 0 2px 24px rgba(0, 0, 0, .4); text-wrap: balance; }
.mf-banner { --mf-tilt: 14deg; width: clamp(64px, 6.4vw, 96px); right: 4%; top: 7%; z-index: 3; }
.c4-hero-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 5vw, 72px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.c4-hero-body .c4-tagline { margin: 0; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); line-height: 1.12; color: var(--c-mazorca); }
.c4-hero-body .c4-hero-text { gap: 22px; }
@media (max-width: 700px) {
  .c4-banner { aspect-ratio: 3 / 2; min-height: 0; max-height: none; border-radius: 22px; }
  .c4-banner > img { object-position: 50% 50%; }
  .c4-banner-text { max-width: 60%; gap: 6px; padding: 16px 16px 18px; }
  .c4-banner .c4-eyebrow { font-size: .8125rem; }
  body[data-page="minka"] .c4-banner .c4-h1 { font-size: clamp(1.75rem, 1rem + 3.4vw, 2.1rem); line-height: 1; }
  .c4-banner::after { background: linear-gradient(0deg, rgba(6, 30, 17, .78) 0%, rgba(6, 30, 17, .35) 42%, rgba(6, 30, 17, 0) 66%), linear-gradient(90deg, rgba(6, 30, 17, .35) 0%, rgba(6, 30, 17, 0) 55%); }
  .mf-banner { width: 58px; right: 5%; top: 6%; }
  .c4-hero-body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* Siete áreas de trabajo: título y texto dentro de un recuadro verde */
#que-haras > .wrap > .c4-stage { margin-bottom: 18px; }
.c4-areas-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 16px clamp(28px, 5vw, 64px); align-items: center; padding: clamp(26px, 4vw, 48px) clamp(24px, 4vw, 52px); border-radius: 30px; background: #176B3D; color: #F1F8EA; }
body[data-page="minka"] .c4-areas-box .c4-h2 { color: #FFFFFF; }
.c4-areas-box .c4-lead-sm { color: #D6EDC3; }
@media (max-width: 700px) { .c4-areas-box { grid-template-columns: minmax(0, 1fr); border-radius: 24px; } }

/* Comunidad: cada forma de ayuda en su propia tarjeta, para que la foto y su texto no se confundan con los de al lado */
#labor .nb-head { padding-bottom: clamp(22px, 3vw, 32px); border-bottom: 2px solid #8CBD48; }
.co-do { gap: 24px; }
.co-card { padding: 14px 14px 24px; border-radius: 26px; background: #FFFFFF; border: 1px solid rgba(11, 87, 142, .14); box-shadow: 0 16px 34px rgba(11, 77, 126, .08); }
.co-card > img { border-radius: 0 90px 0 90px; }
.co-card:nth-child(even) > img { border-radius: 90px 0 90px 0; }
.co-card h3, .co-card p { padding-inline: 8px; }
@media (max-width: 560px) { .co-do { gap: 20px; } .co-card > img { height: 230px; } }
.c4-banner-text { max-width: min(64%, 700px); }
body[data-page="minka"] .c4-banner .c4-h1 { font-size: clamp(2.9rem, 1rem + 4.1vw, 5rem); text-wrap: balance; }
@media (max-width: 700px) { .c4-banner-text { max-width: 62%; } body[data-page="minka"] .c4-banner .c4-h1 { font-size: clamp(1.75rem, 1rem + 3.4vw, 2.1rem); } }
/* Comunidad: el título nuevo es más largo; más pequeño y sin cortar palabras */
body[data-page="comunidad"] .co-hero .nb-h1 { font-size: clamp(2.5rem, 1.3rem + 3.3vw, 4.5rem); line-height: 1; overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; }
#labor .nb-head { max-width: none; }
#labor .nb-head p { max-width: 46rem; }
/* Frase del Ceibo: en dos líneas a la izquierda, sin pasar sobre la persona junto al árbol */
.river-ceibo figcaption span { max-width: 15em; }
.river figcaption span { hyphens: manual; }
/* Lema de Minka como composición tipográfica que ocupa toda la columna izquierda (9 nov 2026) */
.c4-hero-body { align-items: center; }
.c4-hero-body .c4-tag { display: flex; flex-direction: column; margin: 0; font-size: clamp(2.2rem, 1.2rem + 2.7vw, 3.7rem); line-height: 1.02; color: #10301F; }
.c4-tag span { display: block; }
.c4-tag-1 { position: relative; align-self: flex-start; font-family: var(--display); font-size: 2.25em; line-height: .86; letter-spacing: -.02em; color: #0F7E43; margin-bottom: .12em; }
.c4-tag-sprout { position: absolute; left: 100%; top: -.04em; width: .42em; height: .42em; margin-left: .04em; fill: #8CBD48; stroke: #0F7E43; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; transform: rotate(8deg); }
.c4-tag-sprout path:first-child { fill: none; }
.c4-tag-2, .c4-tag-4 { font-family: "DM Serif Display", Georgia, serif; font-style: italic; }
.c4-tag-2 { color: #10301F; }
.c4-tag-3 { font-family: var(--display); padding-left: .7em; }
.c4-tag-4 { padding-left: 1.4em; color: #179348; }
.c4-tag-4::before { content: ""; display: inline-block; width: 1.1em; height: .07em; margin-right: .25em; vertical-align: .32em; background: #8CBD48; border-radius: 2px; }
@media (max-width: 700px) {
  .c4-hero-body .c4-tag { font-size: clamp(2rem, 1.2rem + 3.6vw, 2.5rem); }
  .c4-tag-1 { font-size: 2em; }
}
/* Comunidad: recuadro del Club Ambato de Los Ángeles (10 nov 2026) */
.co-club { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px; margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(22px, 3.4vw, 36px) clamp(22px, 4vw, 44px); border-radius: 26px; background: #E3F1FA; border: 1.5px solid rgba(8, 102, 255, .22); }
.co-club-text { display: flex; flex-direction: column; gap: 8px; flex: 1 1 420px; min-width: 0; }
.co-club-kicker { margin: 0; font-size: .9375rem; font-weight: 600; color: #0F7E43; }
body[data-page="comunidad"] .co-club h3 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.08; color: #0B578E; }
.co-club-text > p:last-child { margin: 0; max-width: 40rem; color: var(--muted); line-height: 1.55; }
.co-club-btn { flex: none; min-height: 52px; padding: 0 26px; background: #0866FF; color: #FFFFFF; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .co-club-btn:hover { background: #0652CC; } }
@media (max-width: 560px) { .co-club-btn { width: 100%; justify-content: center; } }

/* ===== Revisión final de diseño (nov 10) ===== */
/* Precio: el sello de la foto ya lo dice; la línea solo queda para la tarifa por persona */
.cabin-card .cc-price { margin-top: 2px; }
/* Eventos: el acento ocupa toda la segunda línea, como en la invitación a Minka */
.ev-night-title .ev-accent { display: block; }
/* Contraste (WCAG AA) en textos pequeños sobre color */
.switch-intro { color: rgba(255, 255, 255, .72); }
.c4-week-title span, .c4-week li.is-key .c4-daynum { color: #C2E28E; }
.c4-step-4 { background: #0F7E43; }
.c4-step-4 .c4-step-body p { opacity: 1; }
body[data-page="home"] .mt-kicker { color: #EEF7E8; }
body[data-page="home"] .mt-text { color: #FFFFFF; }
body[data-page="comunidad"] .co-hero .nb-kicker { color: #EEF7E8; }
body[data-page="comunidad"] .co-hero .nb-lead, body[data-page="comunidad"] .co-way-1 p, body[data-page="comunidad"] .co-way-3 p { color: #EEF7E8; }
body[data-page="comunidad"] .co-way-2 p { color: #FFFFFF; }
body[data-page="historia"] .nb-kicker:not(.hi-cuento .nb-kicker), .co-club-kicker { color: #0B6B39; }
/* Comunidad: títulos de las cuatro tarjetas en dos líneas, no tres */
@media (min-width: 1100px) { .co-card h3 { font-size: clamp(1.65rem, .6rem + 1.45vw, 2.1rem); } }

/* ===== Reservas (Hospedaje, nov 10): diseño adaptado de la versión de Lovable, con los colores del logo ===== */
.bk-band { background: var(--paper); }
.bk-head { max-width: 40rem; }
.bk { display: grid; gap: clamp(28px, 4vw, 48px); margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 1000px) { .bk { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.bk-steps { display: grid; gap: clamp(32px, 4vw, 44px); min-width: 0; }
.bk-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.bk-step legend { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 0; font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); color: var(--heading); }
.bk-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--logo-navy, #0B578E); color: #FFFFFF; font: 700 .95rem/1 var(--body); }
.bk-rooms { display: grid; gap: 10px; }
.bk-room { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border: 2px solid var(--line); border-radius: 20px; background: var(--surface); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.bk-room:hover { border-color: #9CC7E4; }
.bk-room input { position: absolute; opacity: 0; pointer-events: none; }
.bk-room img { flex: none; width: 84px; height: 64px; border-radius: 14px; object-fit: cover; }
.bk-room-t { display: grid; gap: 2px; flex: 1; min-width: 0; }
.bk-room-t b { font-size: 1.05rem; color: var(--ink); }
.bk-room-t small { color: var(--muted); font-size: .875rem; }
.bk-room-p { flex: none; text-align: right; font-weight: 700; color: var(--ink); white-space: nowrap; }
.bk-room-p small { font-weight: 500; color: var(--muted); }
.bk-check { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--logo-green2, #0F7E43); stroke: #FFFFFF; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease; }
.bk-room:has(input:checked) { border-color: var(--logo-green2, #0F7E43); box-shadow: 0 10px 26px rgba(11, 77, 126, .12); }
.bk-room:has(input:checked) .bk-check { opacity: 1; transform: scale(1); }
.bk-room:has(input:focus-visible) { outline: 3px solid var(--logo-blue, #0391CE); outline-offset: 3px; }
.bk-others { margin: 14px 0 0; color: var(--muted); font-size: .95rem; }
.bk-others a { color: var(--ink); font-weight: 700; }
.bk-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .bk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bk-field { display: grid; gap: 8px; align-content: start; margin-bottom: 14px; }
.bk-field label, .bk-label { font-weight: 700; font-size: .95rem; color: var(--ink); }
.bk-field input, .bk-field textarea, .bk-stepper { width: 100%; min-height: 50px; padding: 0 16px; border: 1.5px solid #C5DCEC; border-radius: 14px; background: var(--surface); color: var(--ink); font: 500 1rem/1.3 var(--body); }
.bk-field textarea { padding: 12px 16px; resize: vertical; min-height: 96px; }
.bk-field input:focus, .bk-field textarea:focus { outline: none; border-color: var(--logo-blue, #0391CE); box-shadow: 0 0 0 3px rgba(3, 145, 206, .18); }
.bk-field [aria-invalid="true"] { border-color: #C2410C; }
.bk-stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; }
.bk-stepper button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1.5px solid #C5DCEC; border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.bk-stepper button:hover:not(:disabled) { background: var(--alt); }
.bk-stepper button:disabled { opacity: .35; cursor: default; }
.bk-stepper output { font-weight: 700; }
.bk-hint { margin: 0; color: var(--muted); font-size: .875rem; }
.bk-err { margin: 0; color: #B13A0D; font-size: .875rem; font-weight: 600; }
.bk-err:empty { display: none; }
.bk-aside { min-width: 0; }
@media (min-width: 1000px) { .bk-aside { position: sticky; top: calc(var(--head-h) + 20px); } }
.bk-card { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: 0 28px 60px -26px rgba(11, 77, 126, .35); }
.bk-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bk-card-body { padding: clamp(20px, 3vw, 30px); }
.bk-name { margin-top: 8px; font-size: 2rem; color: var(--heading); }
.bk-kind { margin: 4px 0 0; color: var(--muted); }
.bk-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.bk-dates div { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: var(--alt); }
.bk-dates span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bk-dates b { color: var(--ink); }
.bk-rows { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.bk-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.bk-rows dt { color: var(--muted); }
.bk-rows dd { margin: 0; font-weight: 600; color: var(--ink); }
.bk-pp { margin: 10px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.bk-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.bk-total span { font-weight: 700; color: var(--ink); }
.bk-total b { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); color: var(--ink); white-space: nowrap; }
.bk-submit { width: 100%; margin-top: 20px; min-height: 54px; background: var(--logo-green2, #0F7E43); color: #FFFFFF; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .bk-submit:hover { background: #0B6B39; } }
.bk-wa-ic { flex: none; }
.bk-status { margin: 12px 0 0; color: var(--logo-green2, #0F7E43); font-weight: 600; font-size: .925rem; }
.bk-status:empty { display: none; }
.bk-incl { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .925rem; }
.bk-incl li { display: flex; align-items: center; gap: 8px; }
.bk-incl svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--logo-green2, #0F7E43); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bk-note { margin: 14px 4px 0; color: var(--muted); font-size: .875rem; text-align: center; }
@media (max-width: 520px) {
  .bk-room { flex-wrap: wrap; }
  .bk-room img { width: 72px; height: 56px; }
  .bk-room-p { width: 100%; text-align: left; padding-left: 86px; margin-top: -6px; }
}

/* Reservas como página propia */
.bk-page { padding-top: clamp(40px, 6vw, 72px); }
.bk-page .bk-head h1 { font-size: var(--step-4); color: var(--heading); }

/* ===== Portada en pantallas grandes (10 nov 2026) =====
   La pintura ya no va en un recuadro rasgado con lianas a los lados: sus bordes se funden con el papel como una acuarela
   de verdad (máscara orgánica --hv-edge). Desde 1100 px el texto va a la izquierda y la pintura a la derecha. */
.hero-v .hv-deco { display: none; }
@media (min-width: 701px) {
  .hero-v { background: #FFFFFF; }
  .hero-v .hero-v-stage { -webkit-mask: none; mask: none; background: transparent; overflow: visible; }
  .hero-v .hero-v-video { -webkit-mask: var(--hv-edge) center / 100% 100% no-repeat; mask: var(--hv-edge) center / 100% 100% no-repeat; }
  .hero-v .hero-v-toggle { bottom: 4%; right: 5%; }
}
@media (min-width: 1100px) {
  .hero-v { --hv-art: min(58vw, calc((100vh - var(--switch-h) - var(--head-h) - 40px) * 1.3077));
    display: grid; grid-template-columns: minmax(0, 1fr) var(--hv-art); align-items: center; column-gap: clamp(8px, 1.5vw, 32px);
    min-height: calc(100vh - var(--switch-h)); padding: calc(var(--head-h) + 6px) clamp(8px, 1.6vw, 36px) 20px 0; }
  @supports (height: 100svh) { .hero-v { --hv-art: min(58vw, calc((100svh - var(--switch-h) - var(--head-h) - 40px) * 1.3077)); min-height: calc(100svh - var(--switch-h)); } }
  .hero-v .hero-v-stage { grid-column: 2; grid-row: 1; width: var(--hv-art); margin: 0; }
  .hero-v .hero-w-paper { grid-column: 1; grid-row: 1; padding: 0; background: transparent; }
  .hero-v .hero-w-body { justify-items: start; text-align: left; gap: 16px; max-width: 34rem; margin: 0 0 0 max(24px, calc((100vw - 1200px) / 2 + 16px)); padding: 0; }
  .hero-v .hero-w-sub { font-size: clamp(2.3rem, .9rem + 2.5vw, 3.7rem); line-height: 1.04; }
  .hero-v .hero-w-lead { font-size: 1.0625rem; }
  .hero-v .hero-w-lead .hw-lead1 { font-size: 1.3em; margin-bottom: 8px; }
  .hero-v .hero-w-actions { justify-content: flex-start; }
  .hero-v .hero-w-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 10px; padding-top: 0; }
  .hero-v .hero-w-facts li { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hw-line); }
  .hero-v .hero-w-facts li + li { border-left: 0; }
  .hero-v .hero-w-facts li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--hw-line); }
  .hero-v .hero-w-facts li:nth-child(n+3) { border-bottom: 0; }
}
@media (min-width: 1100px) {
  .hero-v .hero-w-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .hero-v .hero-w-actions .btn { min-height: 50px; padding: 0 18px; font-size: .95rem; }
}
/* laptops bajitas (768-820 px de alto): todo el bloque de texto entra junto a la pintura */
@media (min-width: 1100px) and (max-height: 860px) {
  .hero-v .hero-w-body { gap: 10px; }
  .hero-v .hero-w-sub { font-size: clamp(2.1rem, .8rem + 2.2vw, 3rem); }
  .hero-v .hero-w-lead { font-size: 1rem; line-height: 1.5; }
  .hero-v .hero-w-lead .hw-lead1 { font-size: 1.22em; margin-bottom: 4px; }
  .hero-v .hero-w-facts { margin-top: 4px; }
  .hero-v .hero-w-facts li { padding-top: 8px; padding-bottom: 8px; }
  .hero-v .hero-w-facts b { font-size: 1.3rem; }
  .hero-v .hero-w-facts li > span { font-size: .8125rem; }
}
/* Reservas: fechas y personas en 2 × 2; menú desplegable de actividades extra (10 nov 2026) */
@media (min-width: 640px) { .bk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#bk-g-hint { margin-top: -4px; }
.bk-dd { position: relative; }
.bk-dd > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 0 16px; border: 1.5px solid #C5DCEC; border-radius: 14px; background: var(--surface); color: var(--muted); font: 500 1rem/1.3 var(--body); cursor: pointer; list-style: none; }
.bk-dd > summary::-webkit-details-marker { display: none; }
.bk-dd > summary:focus-visible { outline: 3px solid var(--logo-blue, #0391CE); outline-offset: 2px; }
.bk-dd[open] > summary { border-color: var(--logo-blue, #0391CE); box-shadow: 0 0 0 3px rgba(3, 145, 206, .14); }
.bk-dd-label.is-set { color: var(--ink); font-weight: 700; }
.bk-dd-chev { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.bk-dd[open] .bk-dd-chev { transform: rotate(180deg); }
.bk-dd-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 24px 48px -18px rgba(11, 77, 126, .35); }
.bk-dd-opt { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; cursor: pointer; }
.bk-dd-opt:hover { background: var(--alt); }
.bk-dd-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bk-dd-opt b { display: block; color: var(--ink); }
.bk-dd-opt small { color: var(--muted); font-size: .875rem; }
.bk-dd-box { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1.5px solid #9CC7E4; border-radius: 7px; background: #FFFFFF; }
.bk-dd-box svg { width: 16px; height: 16px; fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.bk-dd-opt:has(input:checked) .bk-dd-box { border-color: var(--logo-green2, #0F7E43); background: var(--logo-green2, #0F7E43); }
.bk-dd-opt:has(input:checked) .bk-dd-box svg { opacity: 1; }
.bk-dd-opt:has(input:focus-visible) { outline: 3px solid var(--logo-blue, #0391CE); outline-offset: -3px; }
.bk-dd + .bk-hint { margin-top: 10px; }
.bk-row-extras dd { max-width: 60%; text-align: right; }
.bk-extras-note { margin: 8px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.bk-rows > [hidden], .bk-extras-note[hidden], .bk-pp[hidden] { display: none; }
.bk-dd-opt { padding: 10px 12px; }
.bk-dd-opt > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.bk-dd-opt b { display: inline; }
/* Reservas: segundo botón para enviar la solicitud por correo */
.bk-mail-btn { width: 100%; margin-top: 10px; min-height: 52px; border-color: #0B578E; background: transparent; color: #0B578E; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .bk-mail-btn:hover { background: #EAF4FB; } }
.bk-mail-ic { flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bk-mail-addr { margin: 8px 0 0; color: var(--muted); font-size: .8125rem; text-align: center; overflow-wrap: anywhere; }
.bk-mail-addr a { color: var(--ink); font-weight: 600; }