/* =========================================================
   IAMU — capa Hoja: misma web (Manrope, secciones, fotos),
   con el logo Hoja, paleta azul de Punta del Este y vidrio.
   Cada destino puede tener su color: cambiá los tokens en
   body[data-dest="..."] (Punta del Este = azul, por defecto).
   ========================================================= */
:root {
  --bg: #eef3f8;
  --bg-2: #dfe8f2;
  --paper: #f7fafd;
  --ink: #0a1f3d;
  --ink-soft: #3b5070;
  --muted: #7b8ea8;
  --line: #cfdbe8;
  --dark: #0a1f3d;
  --dark-2: #12305a;
  --accent: #1d5fa8;
  --soft-on-dark: #a9c1de;
  --text-on-dark: #d6e3f2;
  --tint: 10, 31, 61;          /* azul noche, para velos sobre fotos */
}
/* Próximos destinos (todavía sin uso): */
body[data-dest="br"] { --dark: #0f3326; --dark-2: #1a4a38; --accent: #2f7d5b; --tint: 15, 51, 38; }
body[data-dest="ba"] { --dark: #262420; --dark-2: #3a3731; --accent: #8a7d6b; --tint: 38, 36, 32; }

/* ---------- Logo Hoja ---------- */
.logo { display: inline-flex; align-items: center; letter-spacing: 0; line-height: 0; }
.logo svg { height: 26px; width: auto; display: block; }
.splash__box .logo svg { height: 40px; }
.site-footer .logo svg { height: 40px; }

/* ---------- Azules en lugar de negro/marrón ---------- */
.btn:hover { background: var(--dark-2); }
.btn--light:hover { background: #fff; }
.hero, .plan__img { background-color: var(--dark); }
.hero::before { background: linear-gradient(180deg, rgba(var(--tint),.5) 0%, rgba(var(--tint),.05) 28%, rgba(var(--tint),.1) 50%, rgba(var(--tint),.78) 100%); }
.plan__img::after { background: linear-gradient(180deg, rgba(var(--tint),.1), rgba(var(--tint),.66)); }
.closing::after { background: linear-gradient(90deg, rgba(var(--tint),.75), rgba(var(--tint),.15)); }
.pillars { background: linear-gradient(180deg, var(--dark) 0%, #0d2a52 100%); }
.exp { background: radial-gradient(110% 80% at 90% 0%, #164a8c 0%, #0d2a52 45%, var(--dark) 100%); }
.pillars .sec-head .eyebrow, .exp .sec-head .eyebrow, .stack__n, .pcard__date span, .pcard__where, .qcta--dark .eyebrow { color: var(--soft-on-dark); }
.stack__card { background: var(--dark-2); box-shadow: 0 -20px 60px rgba(var(--tint),.45); }
.stack__txt p, .pcard__line, .qcta--dark p { color: var(--text-on-dark); }
.stack__txt li { color: var(--text-on-dark); border-color: rgba(214,227,242,.28); }
.tab[aria-selected="true"] small { color: var(--soft-on-dark); }
.opt input:checked + span em, .pack input:checked + span em, .pack input:checked + span small { color: var(--soft-on-dark); }
.mega-scrim { background: rgba(var(--tint),.28); }
.lightbox { background: rgba(var(--tint),.96); }
.lightbox .lb-count { color: var(--soft-on-dark); }
.splash { background: rgba(var(--tint),.55); }
.wa-float { background: var(--accent); }
.mega__list a:hover, .site-footer a:hover, .book__plan:hover strong { color: var(--accent); }

.closing .h2 em { color: var(--text-on-dark); }
.hero .display em { color: #fff; opacity: .92; }
.hero__title { text-shadow: 0 2px 30px rgba(var(--tint),.35); }
.btn--light { background: #fff; border-color: #fff; }

/* ---------- Transparencias ---------- */
/* header de vidrio al bajar */
.site-header.is-solid, .site-header.is-open { background: rgba(238,243,248,.7); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.mega { background: rgba(247,250,253,.95); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); }
.mega__panel { padding-left: var(--gutter); padding-right: var(--gutter); }
.head-cta { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.head-cta:hover { background: #fff; color: var(--ink); }
.site-header.is-solid .head-cta, .site-header.is-open .head-cta { background: var(--dark); color: #fff; border-color: var(--dark); }

/* buscador de vidrio sobre la portada */
.search { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); box-shadow: 0 24px 60px rgba(var(--tint),.3); }
.search label { border-color: rgba(255,255,255,.25); }
.search small { color: rgba(255,255,255,.75); }
.search select, .search input { color: #fff; }
.search select option { color: var(--ink); }
.search input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .75; }
.search .btn { background: #fff; color: var(--ink); border-color: #fff; }
.search .btn:hover { background: var(--dark); color: #fff; border-color: var(--dark); }

/* vidrio acanalado (portada y cierre) */
.hj-flute { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: min(40%, 620px); pointer-events: none;
  backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.02) 7px, rgba(var(--tint),.14) 18px, rgba(255,255,255,.1) 24px);
  border-right: 1px solid rgba(255,255,255,.28); }
.closing .hj-flute { width: min(62%, 940px); }
.closing .wrap { z-index: 2; }

/* fichas: panel translúcido con textos chicos sobre la foto de la casa */
.card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--tint),0) 55%, rgba(var(--tint),.16) 100%); pointer-events: none; }
.card__glass { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.45); background: rgba(var(--tint),.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); text-shadow: 0 1px 6px rgba(var(--tint),.35); color: #fff; font-size: 9px; line-height: 1.35; letter-spacing: .16em; text-transform: uppercase; transition: background .4s; }
.card__glass > span:nth-child(even) { text-align: right; }
.card:hover .card__glass { background: rgba(var(--tint),.18); }
.card__badge { z-index: 3; background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card--pick .card__glass { display: none; }

/* tarjetas oscuras translúcidas */
.pcard, .qcta--dark { background: rgba(255,255,255,.06); border-color: rgba(214,227,242,.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pcard:hover { border-color: rgba(214,227,242,.45); }
.stack__txt { background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,0)); }
.filters { background: rgba(238,243,248,.72); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }
.banner { background: linear-gradient(100deg, var(--dark), var(--dark-2) 60%, var(--accent)); }
.book { background: rgba(255,255,255,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* ---------- Menú arriba también en pantallas medianas ---------- */
@media (min-width: 641px) and (max-width: 960px) {
  .nav { display: flex; }
  .nav > button, .nav > a { padding: 10px 9px; font-size: 11px; letter-spacing: .16em; }
  .menu-btn, .head-cta { display: none; }
  .header-right { margin-left: 0; }
  .mega, .mega-scrim { display: block; }
  .mega__panel { grid-template-columns: 1fr 1.6fr; gap: 30px; }
  .mega__list { columns: 1; }
}

@media (max-width: 640px) {
  .logo svg { height: 22px; }
  .hj-flute { width: 100%; opacity: .55; }
}

/* ---------- Letra del logo en los detalles ----------
   Forum es la letra de Google más parecida al logo Hoja (trazos finos que se abren en las puntas). */
:root { --brand: "Forum", "Manrope", serif; }
.eyebrow, .sec-head .eyebrow, .concept__eyebrow, .card__glass, .stack__n, .steps__n, .pcard__date b, .party__date,
.site-footer h4, .site-footer .eyebrow, .site-footer .legal, .card__zone, .detail__crumb {
  font-family: var(--brand); font-weight: 400;
}
.eyebrow, .site-footer .eyebrow { font-size: 13px; letter-spacing: .3em; }
.card__glass { font-size: 10px; letter-spacing: .18em; }
.card__zone { font-size: 12px; letter-spacing: .28em; }
.stack__n { font-size: 28px; letter-spacing: .14em; }
.steps__n { font-size: 20px; width: 50px; height: 50px; letter-spacing: 0; }
.pcard__date b { font-size: 70px; letter-spacing: -.01em; }
.site-footer h4 { font-size: 12px; letter-spacing: .3em; }