/* =============================================================
   PoolDay — Hoja de estilos
   Mobile-first. Accesible. Sin dependencias externas.
   ============================================================= */

:root{
  /* Paleta */
  --ink:        #082B3A;
  --ink-soft:   #3D5866;
  --aqua:       #12B5C9;
  --aqua-deep:  #0A7E92;
  --aqua-dark:  #06596B;
  --aqua-light: #E6F8FB;
  --sun:        #FFB930;
  --sun-dark:   #E89C0E;
  --sun-light:  #FFD37A;   /* amarillo sobre fondos oscuros: contraste AA */
  --star:       #B8730A;   /* amarillo legible sobre blanco */
  --coral:      #FF7A5C;
  --required:   #C2410C;   /* asterisco de campo obligatorio */
  --sand:       #FDF6EC;
  --sand-line:  #EFE2CE;
  --white:      #FFFFFF;
  --line:       #E3EAEE;

  /* Tipografía */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Medidas */
  --wrap: 1180px;
  --radius: 18px;
  --radius-lg: 26px;
  --header-h: 68px;

  /* Sombras */
  --shadow-sm: 0 2px 10px rgba(8,43,58,.06);
  --shadow:    0 10px 30px rgba(8,43,58,.10);
  --shadow-lg: 0 24px 60px rgba(8,43,58,.16);
}

*,*::before,*::after{ box-sizing:border-box; }

/* El atributo hidden siempre gana. Sin esto, cualquier regla con
   display (flex, grid…) deja visible —y clickeable— un elemento
   marcado como oculto. */
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
a{ color:var(--aqua-deep); }

h1,h2,h3{
  font-family:var(--font-display);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  font-weight:800;
}
h2{ font-size:clamp(1.75rem, 5.2vw, 2.6rem); }
h3{ font-size:1.16rem; font-weight:700; letter-spacing:-.01em; }
p{ margin:0 0 1em; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }
.wrap-narrow{ max-width:760px; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:14px 20px; border-radius:0 0 12px 0;
  font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--sun);
  outline-offset:3px;
  border-radius:6px;
}

/* ============================ BOTONES ============================ */
.btn{
  --btn-bg:var(--aqua-deep); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:52px; padding:14px 26px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--font-display); font-size:1rem; font-weight:700;
  border:0; border-radius:999px; text-decoration:none; cursor:pointer;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 6px 18px rgba(10,126,146,.24);
  text-align:center;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(10,126,146,.30); }
.btn:active{ transform:translateY(0); }

.btn-primary{ --btn-bg:var(--aqua-deep); }
.btn-primary:hover{ background:#08697A; }

.btn-sun{
  --btn-bg:var(--sun); --btn-fg:#3A2400;
  box-shadow:0 8px 22px rgba(232,156,14,.34);
}
.btn-sun:hover{ background:var(--sun-dark); box-shadow:0 14px 30px rgba(232,156,14,.40); }

.btn-ghost{
  --btn-bg:rgba(255,255,255,.16); --btn-fg:#fff;
  border:2px solid rgba(255,255,255,.75);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:none;
}
.btn-ghost:hover{ background:rgba(255,255,255,.28); box-shadow:none; }

.btn-xl{ min-height:60px; padding:17px 32px; font-size:1.06rem; }
.btn-block{ display:flex; width:100%; }

/* ============================ HEADER ============================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.site-header.is-solid{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line), 0 6px 20px rgba(8,43,58,.06);
}
.header-inner{ display:flex; align-items:center; gap:16px; }

.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.logo-mark{ color:var(--aqua-deep); display:flex; }
.site-header:not(.is-solid) .logo-mark{ color:rgba(255,255,255,.22); }
.logo-text{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  letter-spacing:-.035em; color:var(--ink);
}
.logo-text span{ color:var(--aqua-deep); }
.site-header:not(.is-solid) .logo-text{ color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.32); }
.site-header:not(.is-solid) .logo-text span{ color:var(--sun-light); }
.logo-text-light{ color:#fff; }

.site-nav{ display:none; }
.btn-header{ display:none; }

.nav-toggle{
  width:48px; height:48px; display:grid; place-content:center; gap:5px;
  background:rgba(255,255,255,.92); border:0; border-radius:14px; cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.nav-toggle span{ display:block; width:22px; height:2.5px; border-radius:2px; background:var(--ink); transition:.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* Menú desplegado en mobile */
.site-nav.is-open{
  display:flex; flex-direction:column;
  position:fixed; top:var(--header-h); left:0; right:0;
  background:#fff; padding:12px 20px 22px;
  box-shadow:var(--shadow-lg);
  border-top:1px solid var(--line);
  max-height:calc(100vh - var(--header-h)); overflow-y:auto;
}
.site-nav.is-open a{
  padding:15px 4px; font-weight:600; font-size:1.06rem;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);
}
.site-nav.is-open a:last-child{ border-bottom:0; }

/* ============================ HERO ============================ */
/* Sin overflow:hidden a proposito. El panel de huespedes del buscador
   se abre hacia abajo y sobresale del hero: si el hero recorta, solo se
   ve la primera fila (Adultos) y desaparecen Ninos y Bebes. La capa
   decorativa .hero-bg ya esta contenida por su inset:0, asi que el
   recorte no hacia falta. */
.hero{
  position:relative;
  padding:calc(var(--header-h) + 34px) 0 48px;
  background:linear-gradient(168deg,#076576 0%,#065B6E 45%,#04424F 100%);
  color:#fff;
}
.hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 55% at 88% 6%, rgba(255,201,90,.30) 0%, rgba(255,201,90,0) 62%),
    radial-gradient(70% 50% at 4% 96%, rgba(69,222,240,.28) 0%, rgba(69,222,240,0) 65%);
}
.hero-inner{ position:relative; z-index:2; display:grid; gap:30px; }

.hero-figure{
  position:relative; margin:0; order:-1;
  border-radius:24px; overflow:visible;
  animation:figIn .9s cubic-bezier(.2,.75,.3,1) both .1s;
}
.hero-figure video,
.hero-figure img{
  display:block;
  width:100%; height:auto; aspect-ratio:3/2;
  object-fit:cover; object-position:center 50%;
  border-radius:24px;
  border:5px solid rgba(255,255,255,.85);
  box-shadow:0 26px 60px rgba(3,40,52,.45);
  background:#0B5C6E;
}
@keyframes figIn{ from{ opacity:0; transform:translateY(26px) scale(.97) } to{ opacity:1; transform:none } }

.hero-chip{
  position:absolute; display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.97); color:var(--ink);
  padding:7px 12px; border-radius:13px;
  box-shadow:0 12px 28px rgba(3,40,52,.28);
  font-size:.76rem; line-height:1.3; white-space:nowrap;
  animation:chipIn .6s cubic-bezier(.2,.8,.3,1) both;
}
.hero-chip span:last-child{ display:flex; flex-direction:column; }
.hero-chip strong{ font-family:var(--font-display); font-size:.86rem; font-weight:800; }
.hero-chip small{ font-size:.76rem; color:var(--ink-soft); }
.hero-chip .chip-ico{ font-size:1rem; }
.hero-chip-a{ top:12px; left:12px; animation-delay:.55s; }
.hero-chip-b{ bottom:12px; right:12px; animation-delay:.75s; }
@keyframes chipIn{ from{ opacity:0; transform:translateY(10px) scale(.92) } to{ opacity:1; transform:none } }

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:9px 16px 9px 13px; border-radius:999px;
  font-size:.87rem; font-weight:600; line-height:1.35;
  margin-bottom:20px; max-width:100%;
}
.pulse-dot{
  width:9px; height:9px; border-radius:50%; background:var(--sun); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(255,185,48,.7); animation:pulse 2.2s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 12px rgba(255,185,48,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,185,48,0) }
}

.hero-title{
  font-size:clamp(2.1rem, 8.6vw, 3.9rem);
  max-width:15ch;
  margin-bottom:.42em;
}
.hero-sub{
  font-size:clamp(1.05rem, 4.2vw, 1.28rem);
  font-weight:500; max-width:34ch;
  color:rgba(255,255,255,.97);
  margin-bottom:1.5em;
}
/* El monto es el gancho: se lee antes que el resto del título.
   Va en su propia línea para que no se parta en pantallas chicas. */
.hero-amount{
  display:block;
  font-size:clamp(3.4rem, 15vw, 6.2rem);
  line-height:.92;
  font-weight:800;
  color:var(--sun-light);
  letter-spacing:-.02em;
  margin:.08em 0 .02em;
  text-shadow:0 3px 18px rgba(8,43,58,.35);
}
.hero-amount-unit{
  display:block;
  font-size:clamp(1.3rem, 5vw, 2rem);
  font-weight:700;
  line-height:1.15;
}

/* Respaldo del monto de arriba. Chico, pero no escondido: sin esto
   el titular sería una promesa de ingresos sin sustento. */
.hero-note{
  font-size:.83rem; line-height:1.5;
  color:rgba(255,255,255,.86);
  max-width:44ch;
  margin:0 0 20px;
}
.hero-note a{ color:var(--sun-light); text-decoration:underline; }

.hero-cta{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }

.hero-points{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 18px;
  font-size:.94rem; font-weight:500; color:rgba(255,255,255,.96);
}
.hero-points li{ display:flex; align-items:center; gap:7px; }
.hero-points span{ color:var(--sun-light); font-weight:800; }

/* ============================ FRANJA ============================ */
.strip{ background:var(--ink); color:#fff; padding:22px 0; }
.strip-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px 14px;
  text-align:center;
}
.strip-item strong{
  display:block; font-family:var(--font-display); font-size:1rem; font-weight:700;
}
.strip-item span{ display:block; font-size:.83rem; color:rgba(255,255,255,.66); line-height:1.4; }

/* ============================ SECCIONES ============================ */
.section{ padding:68px 0; }
.section-sand{ background:var(--sand); }
.section-deep{ background:linear-gradient(160deg,#076576 0%,#05505F 100%); color:#fff; }
.section-sim{ background:linear-gradient(165deg,#076576 0%,#065B6E 58%,#04404F 100%); color:#fff; }
.section-form{ background:linear-gradient(170deg,#076576 0%,#04404F 100%); color:#fff; }

.section-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.kicker{
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:#07697C; margin-bottom:.7em;
}
.kicker-light{ color:var(--sun-light); }
.section-lead{ color:var(--ink-soft); font-size:1.03rem; margin:0; }
.section-deep .section-lead,
.section-sim .section-lead,
.section-form .section-lead{ color:rgba(255,255,255,.95); }

.statement{
  text-align:center; font-family:var(--font-display);
  font-size:clamp(1.1rem,4vw,1.42rem); font-weight:500;
  color:var(--ink-soft); max-width:24ch; margin:44px auto 0; line-height:1.4;
}
.statement strong{ color:var(--ink); font-weight:800; display:block; }
.statement-soft{ max-width:32ch; }

.disclaimer{
  text-align:center; font-size:.88rem; font-style:italic;
  color:rgba(255,255,255,.92); max-width:60ch; margin:28px auto 0; line-height:1.55;
}
.disclaimer-dark{ color:var(--ink-soft); }

/* ============================ BENEFICIO DE LANZAMIENTO ============================ */
.launch{
  background:linear-gradient(160deg,var(--ink) 0%,var(--aqua-dark) 100%);
  padding:38px 0 40px; position:relative; overflow:hidden;
}
.launch::after{
  content:''; position:absolute; inset:auto -60px -120px auto;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,185,48,.22),transparent 70%);
}
.launch-inner{ position:relative; text-align:center; max-width:640px; }

.launch-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 15px; border-radius:999px;
  background:rgba(255,185,48,.18); border:1px solid rgba(255,185,48,.55);
  color:var(--sun-light); font-family:var(--font-display);
  font-weight:800; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
}
.launch-title{
  color:#fff; margin:16px 0 22px;
  font-size:clamp(1.35rem,5.4vw,1.9rem); line-height:1.22;
}
.launch-title strong{ color:var(--sun); }

.launch-list{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px; text-align:left; }
.launch-list li{
  display:flex; gap:13px; align-items:flex-start;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  border-radius:16px; padding:15px 16px;
  color:rgba(255,255,255,.92); font-size:.97rem; line-height:1.55;
}
.launch-list strong{ display:block; color:#fff; }
.launch-ico{
  flex:0 0 auto; width:44px; height:44px; border-radius:13px;
  display:grid; place-content:center;
  background:var(--sun); color:var(--ink);
  font-family:var(--font-display); font-weight:800; font-size:1.02rem;
}

.launch-left{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  margin:0 0 22px; color:rgba(255,255,255,.9); font-size:.95rem;
}
.launch-left-txt{ display:block; }
.launch-left strong{ color:var(--sun-light); font-size:1.05rem; }
.launch-bar{
  display:block; width:min(300px,80%); height:7px; border-radius:999px;
  background:rgba(255,255,255,.22); overflow:hidden;
}
.launch-bar i{
  display:block; height:100%; border-radius:999px; background:var(--sun);
  transition:width .8s cubic-bezier(.2,.8,.3,1);
}
.launch-cta{ width:100%; max-width:340px; }

/* Bloque del beneficio dentro de las Condiciones */
.legal-launch{
  background:linear-gradient(180deg,#FFF8EC,#fff);
  border:2px solid var(--sun); border-radius:var(--radius);
  padding:20px 18px 6px; margin:0 0 1.5em;
}
.legal-launch h5{
  font-family:var(--font-display); font-weight:800; font-size:1.1rem;
  color:var(--ink); margin:0 0 .6em;
}

/* ============================ PASOS ============================ */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:18px;
}
.step{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 24px 26px; text-align:center; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.step:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.step-art{
  position:relative; width:96px; height:96px; margin:0 auto 18px;
  display:grid; place-content:center; border-radius:28px;
  background:var(--aqua-light); color:var(--aqua-deep);
}
.step-num{
  position:absolute; top:-10px; right:-10px;
  width:36px; height:36px; border-radius:50%;
  background:var(--sun); color:#3A2400;
  font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  display:grid; place-content:center;
  box-shadow:0 4px 12px rgba(232,156,14,.4);
}
.step p{ color:var(--ink-soft); margin:0; }

/* ============================ SIMULADOR ============================ */
.sim{
  display:grid; gap:18px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius-lg); padding:22px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.sim-controls{ display:grid; gap:26px; }

.sim-field label{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1rem; margin-bottom:4px;
}
.sim-value{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:1.85rem; color:var(--sun); line-height:1.2; margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.sim-scale{
  display:flex; justify-content:space-between;
  font-size:.85rem; color:rgba(255,255,255,.92); margin-top:6px;
}

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:46px; background:transparent; cursor:pointer; margin:0;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:10px; border-radius:999px;
  background:linear-gradient(90deg,var(--sun) 0 var(--fill,50%), rgba(255,255,255,.26) var(--fill,50%) 100%);
}
input[type="range"]::-moz-range-track{
  height:10px; border-radius:999px; background:rgba(255,255,255,.26);
}
input[type="range"]::-moz-range-progress{
  height:10px; border-radius:999px; background:var(--sun);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:32px; height:32px; margin-top:-11px;
  border-radius:50%; background:#fff; border:4px solid var(--sun);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:transform .15s ease;
}
input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.12); }
input[type="range"]::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%;
  background:#fff; border:4px solid var(--sun); box-shadow:0 4px 14px rgba(0,0,0,.28);
}

.sim-result{
  background:rgba(255,255,255,.96); color:var(--ink);
  border-radius:var(--radius); padding:28px 22px; text-align:center;
  box-shadow:var(--shadow);
}
.sim-result-label{
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  color:var(--ink-soft); margin:0 0 4px;
}
.sim-amount{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.5rem, 12vw, 4rem);
  line-height:1.02; letter-spacing:-.035em;
  color:var(--aqua-deep); margin:0;
  font-variant-numeric:tabular-nums;
  transition:transform .18s ease;
}
.sim-amount.bump{ transform:scale(1.045); }
.sim-period{
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  color:var(--ink-soft); margin:2px 0 14px;
}
.sim-note{ color:var(--ink-soft); font-size:.95rem; margin:0 auto 20px; max-width:32ch; }
.sim-cta{ width:100%; }

/* ============================ CALCULADORA DE PRECIO ============================ */
.calc{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius-lg); padding:20px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}

/* ---- Progreso ---- */
.calc-progress{ margin-bottom:22px; }
.calc-progress-bar{
  height:8px; border-radius:999px; background:rgba(255,255,255,.22); overflow:hidden;
}
.calc-progress-bar span{
  display:block; height:100%; width:14%; border-radius:999px;
  background:var(--sun); transition:width .35s cubic-bezier(.2,.8,.3,1);
}
.calc-progress-text{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:10px 0 0; font-size:.9rem; color:rgba(255,255,255,.92);
}
.calc-progress-label{
  font-family:var(--font-display); font-weight:700; color:var(--sun-light);
}
.calc-progress-label::before{ content:'· '; color:rgba(255,255,255,.4); }

/* ---- Pasos ---- */
.calc-step{ border:0; padding:0; margin:0; min-width:0; }
.calc-step:not(.is-active){ display:none; }
.calc-step.is-active{ animation:calcIn .32s cubic-bezier(.2,.8,.3,1) both; }
@keyframes calcIn{ from{ opacity:0; transform:translateX(14px) } to{ opacity:1; transform:none } }

.calc-q{
  display:block; float:none; width:100%; padding:0;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.25rem,5vw,1.6rem); line-height:1.25;
  letter-spacing:-.02em; color:#fff; margin:0 0 20px;
}
.calc-sub{
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  color:#fff; margin:26px 0 10px;
}
.calc-sub:first-of-type{ margin-top:0; }
.calc-highlight{
  display:flex; align-items:flex-start; gap:11px;
  margin:-4px 0 18px; padding:14px 15px;
  background:rgba(255,199,90,.16);
  border:2px solid var(--sun);
  border-radius:14px;
  font-size:1.02rem; line-height:1.5; color:#fff;
}
.calc-highlight-ico{ flex:0 0 auto; font-size:1.25rem; line-height:1.3; }
.calc-highlight strong{ color:var(--sun-light); font-weight:800; }

.calc-note-inline{
  font-size:.9rem; color:var(--sun-light); margin:-4px 0 12px; font-weight:600;
}
.calc-step .optional{ color:rgba(255,255,255,.72); }

/* ---- Opciones tipo radio ---- */
.calc-options{ display:grid; gap:9px; }
.calc-options-grid{ grid-template-columns:1fr 1fr; }

.calc-opt{ position:relative; display:block; cursor:pointer; }
.calc-opt input{ position:absolute; opacity:0; width:0; height:0; }
.calc-opt span{
  display:flex; align-items:center; gap:10px;
  min-height:56px; padding:14px 16px;
  background:rgba(255,255,255,.10); color:#fff;
  border:2px solid rgba(255,255,255,.26); border-radius:14px;
  font-weight:600; font-size:.98rem; line-height:1.3;
  transition:background .16s ease, border-color .16s ease;
}
.calc-opt span::before{
  content:''; flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); background:transparent;
  transition:.16s;
}
.calc-opt:hover span{ background:rgba(255,255,255,.18); }
.calc-opt input:checked + span{
  background:#fff; color:var(--ink); border-color:#fff;
}
.calc-opt input:checked + span::before{
  border-color:var(--aqua-deep); border-width:6px; background:#fff;
}
.calc-opt input:focus-visible + span{ outline:3px solid var(--sun); outline-offset:3px; }

/* ---- Tarjetas: qué ofrece (piscina / barbacoa) ---- */
/* Las dos tarjetas miden lo mismo. La prioridad de la piscina la
   marcan el orden, venir tildada por defecto y la nota destacada
   de arriba, no el tamaño. */
.offer-cards{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.offer-inner{ height:100%; }

.offer-card{ position:relative; display:block; cursor:pointer; }
.offer-card input{ position:absolute; opacity:0; width:0; height:0; }

.offer-inner{
  display:block; overflow:hidden; border-radius:16px;
  background:rgba(255,255,255,.10);
  border:2px solid rgba(255,255,255,.26);
  transition:border-color .16s ease, background .16s ease;
}
.offer-inner img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  opacity:.62; transition:opacity .2s ease;
}
.offer-body{
  display:flex; align-items:center; gap:9px;
  padding:12px 13px; color:#fff;
}
.offer-body > span:last-child{ min-width:0; }
.offer-body strong{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; }
.offer-check{
  flex:0 0 auto; width:22px; height:22px; border-radius:7px;
  border:2px solid rgba(255,255,255,.55); background:transparent;
  display:grid; place-content:center; transition:.16s;
}
.offer-check::before{
  content:'✓'; font-size:.85rem; font-weight:800; color:var(--aqua-deep);
  opacity:0; transition:opacity .16s ease;
}
.offer-card:hover .offer-inner{ background:rgba(255,255,255,.18); }
.offer-card input:checked + .offer-inner{
  border-color:#fff; background:#fff;
}
.offer-card input:checked + .offer-inner img{ opacity:1; }
.offer-card input:checked + .offer-inner .offer-body{ color:var(--ink); }
.offer-card input:checked + .offer-inner .offer-check{
  background:#fff; border-color:var(--aqua-deep);
}
.offer-card input:checked + .offer-inner .offer-check::before{ opacity:1; }
.offer-card input:focus-visible + .offer-inner{ outline:3px solid var(--sun); outline-offset:3px; }

/* ---- Sub-preguntas que aparecen al marcar ---- */
.calc-followup{ animation:calcIn .28s cubic-bezier(.2,.8,.3,1) both; }

/* ---- Campo "Otros" ---- */
.calc-otros{ margin-top:14px; animation:calcIn .24s cubic-bezier(.2,.8,.3,1) both; }
.calc-otros label{
  display:block; font-weight:600; font-size:.94rem; color:#fff; margin-bottom:7px;
}
.calc-otros input{
  width:100%; min-height:52px; padding:13px 15px;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:#fff; border:2px solid transparent; border-radius:14px;
}
.calc-otros input:focus{ outline:none; border-color:var(--sun); }

/* En el formulario de anfitriones el fondo es claro */
.host-otros label{ color:var(--ink); }
.host-otros input{ border-color:var(--sand-line); }

/* ---- Chips dentro de la calculadora ---- */
.calc-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.calc-chips .chip span{
  background:rgba(255,255,255,.10); color:#fff;
  border-color:rgba(255,255,255,.26);
}
.calc-chips .chip input:checked + span{
  background:#fff; border-color:#fff; color:var(--aqua-dark);
}

/* ---- Campos de texto/fecha ---- */
.calc-field{ margin-top:22px; }
.calc-field label{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1rem; color:#fff; margin-bottom:8px;
}
.calc-field input{
  width:100%; min-height:54px; padding:14px 16px;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:#fff; border:2px solid transparent; border-radius:14px;
}
.calc-field input:disabled{ background:rgba(255,255,255,.5); color:var(--ink-soft); }
.calc-field input:focus{ outline:none; border-color:var(--sun); }
.calc-field .hint{ color:rgba(255,255,255,.82); }

/* ---- Navegación ---- */
.calc-error{
  display:none; margin:16px 0 0; padding:12px 15px;
  background:rgba(255,122,92,.20); border:1px solid rgba(255,150,125,.5);
  border-radius:12px; color:#FFE2DB; font-weight:600; font-size:.94rem;
}
.calc-error.is-visible{ display:block; }

.calc-nav{ display:flex; gap:10px; margin-top:26px; }
.calc-next{ flex:1 1 auto; min-height:56px; }
.calc-back{ flex:0 0 auto; min-height:56px; padding:14px 22px; }

.btn-ghost-dark{
  --btn-bg:transparent; --btn-fg:#fff;
  border:2px solid rgba(255,255,255,.55); box-shadow:none;
}
.btn-ghost-dark:hover{ background:rgba(255,255,255,.14); box-shadow:none; }

/* ---- Resultado ---- */
.calc-result{ animation:calcIn .4s cubic-bezier(.2,.8,.3,1) both; }
.calc-result-card{
  background:rgba(255,255,255,.97); color:var(--ink);
  border-radius:var(--radius); padding:26px 20px; text-align:center;
  box-shadow:var(--shadow);
}
.calc-result-kicker{
  font-family:var(--font-display); font-weight:800; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:#07697C; margin:0 0 10px;
}
.calc-range{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.9rem,8vw,2.6rem); letter-spacing:-.03em;
  color:var(--aqua-deep); margin:0 0 18px; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.calc-suggest-label{
  font-size:.95rem; color:var(--ink-soft); margin:0 0 2px; font-weight:600;
}
.calc-suggest{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.6rem,13vw,3.6rem); line-height:1; letter-spacing:-.035em;
  color:var(--ink); margin:0; font-variant-numeric:tabular-nums;
}
.calc-suggest-unit{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:var(--ink-soft); margin:4px 0 0;
}

.calc-score{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.calc-score-bar{
  height:10px; border-radius:999px; background:var(--line); overflow:hidden; margin-bottom:10px;
}
.calc-score-bar span{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--aqua),var(--aqua-deep));
  transition:width .8s cubic-bezier(.2,.8,.3,1);
}
.calc-score p{ margin:0; font-size:.96rem; color:var(--ink-soft); }
.calc-score strong{ color:var(--ink); font-size:1.1rem; }

.calc-reasons{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.calc-reasons li{
  display:flex; gap:11px; align-items:flex-start;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  border-radius:14px; padding:14px 15px;
  font-size:.96rem; line-height:1.55; color:rgba(255,255,255,.96);
}
.calc-reasons li .r-ico{ flex:0 0 auto; font-weight:800; font-size:1.05rem; line-height:1.4; }
.calc-reasons li.is-up .r-ico{ color:var(--sun-light); }
.calc-reasons li.is-down .r-ico{ color:#FFC9BB; }

.calc-market{
  margin:16px 0 0; padding:14px 16px; border-radius:14px;
  background:rgba(255,255,255,.14); color:#fff; font-size:.95rem; line-height:1.55;
}
.calc-basis{
  margin:16px 0 0; font-size:.88rem; line-height:1.55;
  color:rgba(255,255,255,.86); text-align:center;
}

/* ---- Precio propio ---- */
.calc-own{
  margin-top:24px; padding:22px 20px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius);
}
.calc-own > label{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.08rem; color:#fff; margin-bottom:12px;
}
.calc-own-input{
  display:flex; align-items:center; gap:4px;
  background:#fff; border:2px solid transparent; border-radius:14px;
  padding:0 16px; min-height:60px;
}
.calc-own-input:focus-within{ border-color:var(--sun); }
.calc-own-input span{
  font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--ink-soft);
}
.calc-own-input input{
  flex:1 1 auto; width:100%; border:0; outline:none; background:transparent;
  font-family:var(--font-display); font-weight:800; font-size:1.6rem;
  color:var(--ink); padding:12px 0; min-width:0;
  font-variant-numeric:tabular-nums;
}
.calc-own-status{
  display:flex; align-items:center; gap:8px;
  margin:14px 0 0; font-weight:700; font-size:.98rem; color:#fff;
}
.calc-own-hint{
  margin:6px 0 0; font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.86);
}

/* ---- Ingresos ---- */
.calc-income{
  margin-top:20px; padding:22px 20px; text-align:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius);
}
.calc-income > label{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.08rem; color:#fff; margin-bottom:4px;
}
.calc-income .sim-value{ margin-bottom:6px; }
.calc-income-label{
  margin:20px 0 4px; font-family:var(--font-display); font-weight:600;
  font-size:.98rem; color:rgba(255,255,255,.94); line-height:1.4;
}
.calc-income .sim-amount{ color:var(--sun); }
.calc-income .sim-period{ color:rgba(255,255,255,.9); margin-bottom:0; }

.calc-result-nav{ display:grid; gap:10px; margin-top:24px; }

/* ============================ LISTING ============================ */
.listing-wrap{ display:flex; justify-content:center; }
.listing{
  width:100%; max-width:440px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow);
  transition:transform .3s ease, box-shadow .3s ease;
}
.listing:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }

.listing-media{ position:relative; aspect-ratio:3/2; background:var(--aqua-light); }
.listing-media img{ width:100%; height:100%; object-fit:cover; }
.listing-tag{
  position:absolute; top:12px; left:12px;
  background:rgba(8,43,58,.78); color:#fff;
  font-size:.8rem; font-weight:600; letter-spacing:.03em;
  padding:6px 12px; border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.listing-fav{
  position:absolute; top:10px; right:12px;
  font-size:1.5rem; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35); line-height:1;
}

.listing-body{ padding:20px; }
.listing-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.listing-top h3{ margin:0 0 2px; font-size:1.1rem; }
.listing-rating{
  display:flex; align-items:center; gap:5px; margin:0;
  font-size:.9rem; white-space:nowrap; color:var(--ink);
}
.stars{ color:var(--star); letter-spacing:-1px; font-size:.85rem; }

.listing-amenities{
  list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:7px;
}
.listing-amenities li{
  display:flex; align-items:center; gap:5px;
  background:var(--aqua-light); color:var(--aqua-dark);
  font-size:.83rem; font-weight:600;
  padding:6px 11px; border-radius:999px;
}
.listing-capacity{
  display:flex; align-items:center; gap:7px;
  margin:12px 0 0; font-size:.93rem; font-weight:600; color:var(--ink-soft);
}
.listing-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
}
.listing-price{ margin:0; line-height:1.2; }
.listing-price strong{
  display:block; font-family:var(--font-display); font-weight:800; font-size:1.5rem;
  letter-spacing:-.02em;
}
.listing-price span{ font-size:.85rem; color:var(--ink-soft); font-weight:600; }
.listing-btn{ min-height:48px; padding:12px 20px; font-size:.95rem; }

/* ============================ REQUISITOS ============================ */
.reqs{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.req{
  display:flex; gap:15px; align-items:flex-start;
  background:#fff; border:1px solid var(--sand-line); border-radius:var(--radius);
  padding:20px 20px; box-shadow:var(--shadow-sm);
}
.req-check{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:var(--aqua-deep); color:#fff;
  display:grid; place-content:center; font-weight:800; font-size:1rem;
}
.req h3{ margin:0 0 3px; }
.req p{ margin:0; color:var(--ink-soft); font-size:.96rem; }
.req-highlight{ border:2px solid var(--aqua); background:linear-gradient(180deg,#F2FCFD,#fff); }

/* Foto + cierre de la sección de requisitos */
.req-note{
  display:grid; gap:20px; align-items:center;
  margin-top:34px; padding:18px;
  background:#fff; border:1px solid var(--sand-line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.req-note img,
.req-note video{
  display:block;
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:16px; background:var(--aqua-light);
}
.req-note p{ margin:0 0 .6em; color:var(--ink-soft); }
.req-note p:last-child{ margin-bottom:0; }
.req-note-lead{
  font-family:var(--font-display); font-weight:800;
  font-size:1.22rem; color:var(--ink) !important; line-height:1.3;
}
.req-note strong{ color:var(--ink); }
.req-highlight .req-check{ background:var(--sun); color:#3A2400; }
.badge-req{
  display:inline-block; vertical-align:middle; margin-left:6px;
  background:var(--sun); color:#3A2400;
  font-family:var(--font-body); font-size:.76rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px;
}

/* ============================ EXTRAS ============================ */
.extras{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:11px;
}
.extras li{
  display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:15px 14px; font-weight:600; font-size:.95rem;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, border-color .2s ease;
}
.extras li:hover{ transform:translateY(-3px); border-color:var(--aqua); }
.extras span{ font-size:1.25rem; line-height:1; }

/* ============================ CONTROL ============================ */
.controls{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
}
.control{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius); padding:22px 20px;
  transition:transform .25s ease, background .25s ease;
}
.control:hover{ transform:translateY(-4px); background:rgba(255,255,255,.16); }
.control-ico{ font-size:1.9rem; line-height:1; display:block; margin-bottom:10px; }
.control h3{ margin:0 0 5px; color:#fff; }
.control p{ margin:0; color:rgba(255,255,255,.94); font-size:.96rem; }

/* ============================ PROTECCIÓN ============================ */
.protect{ display:grid; gap:16px; }
.protect-card{
  background:#fff; border:1px solid var(--sand-line); border-radius:var(--radius-lg);
  padding:26px 22px; box-shadow:var(--shadow-sm);
}
.protect-ico{ font-size:2rem; display:block; margin-bottom:10px; }
.protect-card h3{ margin:0 0 6px; }
.protect-amount{
  font-family:var(--font-display); font-weight:800;
  font-size:1.75rem; color:var(--aqua-deep); margin:0 0 10px; letter-spacing:-.02em;
}
.protect-card p:last-child{ margin:0; color:var(--ink-soft); font-size:.96rem; }

/* ============================ CONFIANZA ============================ */
.trust{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.trust li{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:19px 18px; box-shadow:var(--shadow-sm);
}
.trust li > span{
  flex:0 0 auto; width:44px; height:44px; border-radius:14px;
  background:var(--aqua-light); display:grid; place-content:center; font-size:1.3rem;
}
.trust h3{ margin:0 0 3px; font-size:1.05rem; }
.trust p{ margin:0; color:var(--ink-soft); font-size:.94rem; }

/* ============================ FAQ ============================ */
.faq{ display:grid; gap:10px; }
.faq-item{
  background:#fff; border:1px solid var(--sand-line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease;
}
.faq-item[open]{ box-shadow:var(--shadow); border-color:var(--aqua); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 20px; min-height:56px;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:''; flex:0 0 auto; width:14px; height:14px;
  border-right:2.5px solid var(--aqua-deep); border-bottom:2.5px solid var(--aqua-deep);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .25s ease;
}
.faq-item[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.faq-body{ padding:0 20px 20px; }
.faq-body p{ margin:0; color:var(--ink-soft); }

/* ============================ FORMULARIOS ============================ */
.form-card{
  background:#fff; color:var(--ink);
  border-radius:var(--radius-lg); padding:26px 20px;
  box-shadow:var(--shadow-lg);
}
.field{ margin-bottom:20px; border:0; padding:0; min-width:0; }
.field-row{ display:grid; gap:0; }

.field > label:not(.check):not(.file-drop), .field > legend{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1rem; margin-bottom:7px; padding:0; line-height:1.4;
}
.optional{ font-weight:500; color:var(--ink-soft); font-size:.88rem; }
.req-star{ color:var(--required); }

input[type="text"], input[type="tel"], input[type="email"], select, textarea{
  width:100%; min-height:54px; padding:14px 16px;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:#fff; border:2px solid var(--line); border-radius:14px;
  transition:border-color .18s ease, box-shadow .18s ease;
  appearance:none; -webkit-appearance:none;
}
textarea{ min-height:110px; resize:vertical; line-height:1.55; }
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7E92' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:20px;
  padding-right:46px; cursor:pointer;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--aqua);
  box-shadow:0 0 0 4px rgba(18,181,201,.16);
}
input::placeholder, textarea::placeholder{ color:#9AAFB9; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea,
.field.has-error .check-box{ border-color:var(--coral); }

.hint{ font-size:.85rem; color:var(--ink-soft); margin:7px 0 0; }
.error{
  display:none; font-size:.85rem; font-weight:600; color:#D9432B; margin:7px 0 0;
}
.field.has-error .error{ display:block; }

/* Checkbox grande */
.check{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check-box{
  flex:0 0 auto; width:28px; height:28px; margin-top:1px;
  border:2px solid var(--line); border-radius:9px; background:#fff;
  display:grid; place-content:center; transition:.18s;
}
.check-box::after{
  content:''; width:8px; height:14px;
  border-right:3px solid #fff; border-bottom:3px solid #fff;
  transform:rotate(45deg) scale(0); transition:transform .18s ease; margin-top:-3px;
}
.check input:checked + .check-box{ background:var(--aqua-deep); border-color:var(--aqua-deep); }
.check input:checked + .check-box::after{ transform:rotate(45deg) scale(1); }
.check input:focus-visible + .check-box{ outline:3px solid var(--sun); outline-offset:3px; }
.check-text{ font-weight:600; line-height:1.45; padding-top:2px; }
.check-big{
  background:var(--sand); border:2px solid var(--sand-line); border-radius:14px;
  padding:15px 16px; min-height:56px;
}
.check-big:hover{ border-color:var(--aqua); }

/* Chips de extras */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ cursor:pointer; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-flex; align-items:center; min-height:46px;
  padding:11px 17px; border-radius:999px;
  background:#fff; border:2px solid var(--line);
  font-weight:600; font-size:.94rem; transition:.16s;
}
.chip input:checked + span{
  background:var(--aqua-light); border-color:var(--aqua-deep); color:var(--aqua-dark);
}
.chip input:checked + span::before{ content:'✓'; margin-right:7px; font-weight:800; }
.chip input:focus-visible + span{ outline:3px solid var(--sun); outline-offset:3px; }

/* Foto */
.file-drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:110px; padding:20px; text-align:center; cursor:pointer;
  border:2px dashed var(--line); border-radius:16px; background:var(--sand);
  transition:.18s;
}
.file-drop:hover{ border-color:var(--aqua); background:#F2FCFD; }
.file-ico{ font-size:1.7rem; }
.file-text{ font-weight:600; font-size:.95rem; color:var(--ink-soft); }
.file-drop.has-file{ border-style:solid; border-color:var(--aqua-deep); background:#F2FCFD; }

.form-legal{
  font-size:.83rem; color:var(--ink-soft); text-align:center;
  margin:16px 0 0; line-height:1.5;
}
.form-status{
  margin:14px 0 0; text-align:center; font-weight:600; font-size:.95rem; min-height:1px;
}
.form-status.is-error{ color:#D9432B; }

.btn[aria-busy="true"]{ opacity:.72; pointer-events:none; }

/* Éxito */
.success{ text-align:center; padding:22px 6px; animation:popIn .45s cubic-bezier(.2,.8,.3,1) both; }
@keyframes popIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.success-ico{ font-size:3rem; display:block; margin-bottom:10px; }
.success h3{ font-size:1.45rem; margin-bottom:.4em; }
.success p{ color:var(--ink-soft); margin:0 auto; max-width:38ch; }
.success-sm .success-ico{ font-size:2.4rem; }
.success-sm h3{ font-size:1.2rem; }

/* ============================ INVITADOS ============================ */
.section-guest{ background:var(--sand); padding:56px 0; }
.guest-card{
  background:#fff; border:1px solid var(--sand-line); border-radius:var(--radius-lg);
  padding:28px 22px; box-shadow:var(--shadow);
}
.guest-media{
  border-radius:var(--radius); overflow:hidden; margin-bottom:22px;
  background:var(--aqua-light);
}
.guest-media video{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover;
}
.guest-copy{ text-align:center; margin-bottom:22px; }
.guest-copy h2{ font-size:clamp(1.5rem,5vw,2rem); }
.guest-copy p{ color:var(--ink-soft); margin:0 auto; max-width:34ch; }
.guest-form .field{ margin-bottom:16px; }

/* ============================ FOOTER ============================ */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.72); padding:44px 0 96px; }
.footer-inner{ display:grid; gap:26px; text-align:center; }
.footer-brand p{ margin:6px 0 0; font-size:.93rem; }
.footer-brand .logo-text{ font-size:1.4rem; }
.footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px 20px; }
.footer-nav a{
  color:rgba(255,255,255,.86); text-decoration:none; font-size:.96rem; font-weight:500;
  padding:11px 4px; display:inline-block;
}
.footer-nav a:hover{ color:#fff; text-decoration:underline; }
.footer-legal{ font-size:.88rem; margin:0; color:rgba(255,255,255,.62); }
.footer-legal a{ color:rgba(255,255,255,.82); display:inline-block; padding:11px 4px; }

/* ============================ MENSAJE DE TRANQUILIDAD ============================ */
.reassure{
  display:flex; gap:15px; align-items:flex-start;
  max-width:660px; margin:26px auto 0; padding:20px 20px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius);
}
.reassure-ico{
  flex:0 0 auto; width:46px; height:46px; border-radius:14px;
  background:rgba(255,255,255,.16); color:var(--sun-light);
  display:grid; place-content:center;
}
.reassure h3{ margin:0 0 6px; color:#fff; font-size:1.06rem; }
.reassure p{ margin:0; color:rgba(255,255,255,.94); font-size:.94rem; line-height:1.6; }
.reassure-link{ margin-top:10px !important; }
.reassure-link a{ color:var(--sun-light); font-weight:600; }

/* ============================ CHECKBOX DE CONDICIONES ============================ */
.field-terms{ margin-top:4px; }
.check-terms{
  background:var(--sand); border:2px solid var(--sand-line); border-radius:14px;
  padding:15px 16px; min-height:56px;
}
.check-terms:hover{ border-color:var(--aqua); }
.check-terms .check-text{ font-weight:500; font-size:.97rem; }
.check-terms a{ color:#07697C; font-weight:700; text-decoration:underline; }
.check-terms a:hover{ color:var(--ink); }
.field-terms.has-error .check-terms{ border-color:var(--coral); background:#FFF6F4; }

/* ============================ SALIDA ALTERNATIVA DEL FORMULARIO ============================ */
.alt-toggle{
  display:inline-block; margin-top:11px; padding:9px 2px;
  background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:.93rem; font-weight:600;
  color:var(--aqua-deep); text-decoration:underline; text-underline-offset:3px;
}
.alt-toggle:hover{ color:var(--ink); }
.alt-toggle::after{ content:' →'; text-decoration:none; }
.alt-toggle[aria-expanded="true"]::after{ content:''; }

.alt-space{
  margin-top:12px; padding:16px;
  background:var(--sand); border:1px solid var(--sand-line); border-radius:14px;
  animation:calcIn .24s cubic-bezier(.2,.8,.3,1) both;
}
.alt-space-lead{
  margin:0 0 11px; font-size:.93rem; font-weight:600; color:var(--ink-soft);
}

/* ============================ MODAL LEGAL ============================ */
.legal-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(4,32,42,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:0;
  animation:legalFade .2s ease both;
}
@keyframes legalFade{ from{ opacity:0 } to{ opacity:1 } }

.legal-modal{
  display:flex; flex-direction:column;
  width:100%; max-width:780px;
  max-height:92dvh; height:92dvh;
  background:#fff; color:var(--ink);
  border-radius:24px 24px 0 0;
  box-shadow:0 -12px 60px rgba(3,30,40,.4);
  overflow:hidden;
  animation:legalUp .3s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes legalUp{ from{ transform:translateY(28px) } to{ transform:none } }
.legal-modal:focus{ outline:none; }

.legal-head{
  flex:0 0 auto;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:20px 20px 16px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.legal-eyebrow{
  margin:0 0 2px; font-family:var(--font-display); font-weight:800;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--aqua);
}
.legal-head h2{
  margin:0; font-size:1.16rem; line-height:1.25;
}
.legal-close{
  flex:0 0 auto; width:46px; height:46px;
  display:grid; place-content:center;
  background:var(--sand); color:var(--ink);
  border:0; border-radius:14px; cursor:pointer;
  transition:background .18s ease;
}
.legal-close:hover{ background:var(--sand-line); }

.legal-body{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:22px 20px 8px;
  overscroll-behavior:contain;
}

.legal-doc .legal-h1{
  font-size:1.44rem; line-height:1.2; margin:0 0 .55em;
}
.legal-lead{
  font-size:1rem; line-height:1.6; color:var(--ink-soft);
  background:var(--sand); border-left:4px solid var(--aqua);
  padding:15px 16px; border-radius:0 12px 12px 0; margin-bottom:1.6em;
}
.legal-doc h4{
  font-family:var(--font-display); font-weight:800;
  font-size:1.08rem; line-height:1.3; letter-spacing:-.01em;
  color:var(--ink); margin:1.9em 0 .6em;
  padding-top:1.1em; border-top:1px solid var(--line);
}
.legal-doc h4:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.legal-doc p{ margin:0 0 1em; line-height:1.68; color:var(--ink-soft); font-size:1rem; }
.legal-doc strong{ color:var(--ink); font-weight:700; }
.legal-doc ul{ margin:0 0 1.2em; padding-left:0; list-style:none; }
.legal-doc ul li{
  position:relative; padding-left:22px; margin-bottom:.55em;
  line-height:1.6; color:var(--ink-soft);
}
.legal-doc ul li::before{
  content:''; position:absolute; left:4px; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--aqua);
}
.legal-doc a{ color:var(--aqua-deep); font-weight:600; }

/* Bloque destacado: Protección frente a daños */
.legal-highlight{
  background:linear-gradient(180deg,#F2FCFD,#fff);
  border:2px solid var(--aqua);
  border-radius:var(--radius);
  padding:22px 20px 8px;
  margin:0 0 1.5em;
}
.legal-highlight-ico{
  display:grid; place-content:center;
  width:52px; height:52px; border-radius:16px;
  background:var(--aqua-deep); color:#fff; margin-bottom:12px;
}
.legal-highlight h5{
  font-family:var(--font-display); font-weight:800;
  font-size:1.24rem; line-height:1.2; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 .6em;
}
.legal-highlight ul li::before{ background:var(--aqua-deep); }
.legal-note{
  background:var(--aqua-light); border-radius:12px;
  padding:13px 15px; font-size:.94rem !important;
  color:var(--aqua-dark) !important; font-weight:600;
}

.legal-cover{ margin:0 0 1.2em; }
.legal-cover dt{
  font-family:var(--font-display); font-weight:700; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--aqua-deep);
  margin-bottom:3px;
}
.legal-cover dd{
  margin:0 0 1em; font-size:1.04rem; color:var(--ink); line-height:1.5;
}

.legal-contact{ list-style:none; margin:0 0 1.5em; padding:0; display:grid; gap:12px; }
.legal-contact li{
  display:flex; gap:14px; align-items:center; padding:0 !important;
  background:var(--sand); border-radius:14px; padding:15px 16px !important;
}
.legal-contact li::before{ display:none; }
.legal-contact li > span{ font-size:1.4rem; line-height:1; }
.legal-contact strong{ display:block; font-size:.86rem; color:var(--ink-soft); font-weight:600; }
.legal-contact a, .legal-contact div > span{ font-size:1.04rem; font-weight:700; color:var(--ink); }
.legal-contact a{ color:var(--aqua-deep); }
.legal-cta{ margin-top:.4em; }

.legal-version{
  margin-top:2em !important; padding-top:1.2em; border-top:1px solid var(--line);
  font-size:.88rem !important; color:var(--ink-soft) !important;
}

.legal-foot{
  flex:0 0 auto;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:#fff;
}
.legal-foot .btn{ width:100%; }

body.legal-open{ overflow:hidden; }

/* Enlaces legales del pie */
.footer-legal-nav{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:2px 10px; font-size:.9rem;
}
.footer-legal-nav a{
  color:rgba(255,255,255,.7); text-decoration:none;
  padding:11px 4px; display:inline-block;
}
.footer-legal-nav a:hover{ color:#fff; text-decoration:underline; }
.footer-legal-nav span{ color:rgba(255,255,255,.3); }

/* ============================ CTA FIJO MOBILE ============================ */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .3s ease;
}
.sticky-cta.is-visible{ transform:none; }

/* ============================ ANIMACIÓN REVEAL ============================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================ BREAKPOINTS ============================ */
@media (min-width:600px){
  .hero-cta{ flex-direction:row; flex-wrap:wrap; }
  .hero-cta .btn{ flex:0 1 auto; }
  .strip-grid{ grid-template-columns:repeat(4,1fr); }
  .field-row{ grid-template-columns:1fr 1fr; gap:0 16px; }
  .form-card{ padding:34px 30px; }
  .guest-card{ padding:34px 30px; }
  .reqs{ grid-template-columns:1fr 1fr; }
  .protect{ grid-template-columns:1fr 1fr; }
  .trust{ grid-template-columns:1fr 1fr; }
  .sim{ padding:28px; }
  .sim-cta{ width:auto; min-width:280px; }
}

@media (min-width:900px){
  body{ font-size:17px; }
  :root{ --header-h:76px; }
  .section{ padding:96px 0; }
  .section-head{ margin-bottom:52px; }

  .site-nav{ display:flex; align-items:center; gap:26px; margin-right:8px; }
  .site-nav a{
    color:#fff; text-decoration:none; font-weight:600; font-size:.95rem;
    text-shadow:0 2px 10px rgba(0,0,0,.3); padding:6px 0;
    border-bottom:2px solid transparent; transition:.2s;
  }
  .site-nav a:hover{ border-bottom-color:var(--sun); }
  .site-header.is-solid .site-nav a{ color:var(--ink-soft); text-shadow:none; }
  .site-header.is-solid .site-nav a:hover{ color:var(--aqua-deep); }
  .btn-header{ display:inline-flex; min-height:48px; padding:12px 22px; font-size:.95rem; }
  .nav-toggle{ display:none; }
  .site-nav.is-open{ position:static; flex-direction:row; padding:0; box-shadow:none; background:none; border:0; max-height:none; }
  .site-nav.is-open a{ border-bottom:2px solid transparent; padding:6px 0; font-size:.95rem; }

  .hero{ padding:calc(var(--header-h) + 70px) 0 90px; }
  .hero-inner{
    grid-template-columns:1.02fr .98fr; align-items:center; gap:56px;
  }
  .hero-copy{ order:0; }
  .hero-figure{ order:0; }
  .hero-figure video,
  .hero-figure img{ aspect-ratio:3/2; object-position:center 50%; }
  .hero-points{ gap:10px 28px; font-size:1rem; }
  .hero-chip{ font-size:.85rem; padding:12px 18px; border-radius:16px; }
  .hero-chip strong{ font-size:1.05rem; }
  .hero-chip-a{ top:24px; left:-34px; }
  .hero-chip-b{ bottom:24px; right:-30px; }

  .steps{ grid-template-columns:repeat(3,1fr); gap:24px; }
  .step{ padding:36px 28px 32px; }

  .sim{ grid-template-columns:1.05fr .95fr; align-items:center; gap:34px; padding:34px; }
  .sim-result{ padding:36px 30px; }

  .calc{ padding:34px; }
  /* 2 columnas: los grupos de 4 quedan 2×2 y los de 6, 3×2. */
  .calc-options-grid{ grid-template-columns:1fr 1fr; }
  /* En desktop las fotos no necesitan ser tan altas */
  .offer-inner img{ aspect-ratio:16/10; }
  .offer-body{ padding:14px 16px; }
  .calc-result-card{ padding:38px 34px; }
  .calc-own, .calc-income{ padding:28px 30px; }
  .calc-reasons{ grid-template-columns:1fr 1fr; }
  .calc-result-nav{ grid-template-columns:1fr 1fr; }
  .calc-result-nav .btn{ width:100%; }

  .reqs{ gap:18px; }
  .req{ padding:26px 24px; }
  .req-note{ grid-template-columns:minmax(0,300px) 1fr; gap:28px; padding:24px; margin-top:40px; }
  /* En desktop el video vertical se luce en formato retrato */
  .req-note video{ aspect-ratio:3/4; }
  .req-note-lead{ font-size:1.45rem; }
  .extras{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
  .controls{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .control{ padding:28px 24px; }
  .trust{ gap:18px; }
  .trust li{ padding:24px 22px; }
  .protect{ gap:22px; }
  .protect-card{ padding:34px 30px; }

  .listing{ max-width:520px; }
  .listing-body{ padding:26px; }

  .footer-inner{
    grid-template-columns:1fr auto; text-align:left; align-items:center; gap:18px 40px;
  }
  .footer-nav{ justify-content:flex-end; }
  .footer-legal-nav{ grid-column:1/-1; justify-content:center; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); }
  .footer-legal{ grid-column:1/-1; text-align:center; padding-top:0; }
  .site-footer{ padding-bottom:44px; }

  .launch{ padding:52px 0 56px; }
  .launch-list{ grid-template-columns:1fr 1fr; }
  .launch-cta{ width:auto; padding-left:44px; padding-right:44px; }

  .sticky-cta{ display:none; }
  .form-card{ padding:44px 42px; }

  /* Modal legal centrado en pantallas grandes */
  .legal-overlay{ align-items:center; padding:32px 20px; }
  .legal-modal{
    height:auto; max-height:86vh;
    border-radius:var(--radius-lg);
    box-shadow:0 30px 90px rgba(3,30,40,.45);
  }
  .legal-head{ padding:26px 34px 20px; }
  .legal-head h2{ font-size:1.32rem; }
  .legal-body{ padding:30px 34px 10px; }
  .legal-doc .legal-h1{ font-size:1.8rem; }
  .legal-highlight{ padding:28px 26px 12px; }
  .legal-foot{ padding:16px 34px; text-align:right; }
  .legal-foot .btn{ width:auto; min-width:190px; }

  .reassure{ padding:24px 26px; gap:18px; }
}

@media (min-width:1200px){
  .hero-title{ font-size:3.5rem; }
  .hero-inner{ gap:70px; }
}

/* ============================ PREFERENCIAS ============================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .site-header,.sticky-cta,.hero-scroll{ display:none!important; }
  body{ color:#000; }
}


/* ====================== PARA QUÉ LO ALQUILAN ====================== */
.uses{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:20px;
}
.use{
  background:var(--white);
  border:1px solid var(--sand-line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.use-media{ aspect-ratio:4/3; background:var(--aqua-light); }
.use-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.use-body{ padding:18px 20px 22px; }
.use-body h3{ margin:0 0 .25em; font-size:1.18rem; }
.use-meta{
  margin:0 0 .6em;
  font-family:var(--font-display); font-weight:700; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--aqua-deep);
}
.use-body p:last-child{ margin:0; color:var(--ink-soft); font-size:.98rem; }

/* El reencuadre de precio. Fondo oscuro para que corte la sección. */
.split{
  margin-top:36px; padding:26px 24px;
  background:var(--ink); color:#fff;
  border-radius:var(--radius-lg);
  text-align:center;
}
.split-kicker{
  margin:0 0 .7em;
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sun-light);
}
.split-line{
  margin:0 0 .6em;
  font-family:var(--font-display);
  font-size:clamp(1.1rem, 4.4vw, 1.5rem); font-weight:500; line-height:1.45;
}
.split-line strong{ color:var(--sun-light); font-weight:800; }
.split-note{
  margin:0; font-size:.95rem; color:rgba(255,255,255,.82);
  max-width:46ch; margin-inline:auto;
}

@media (min-width:780px){
  .uses{ grid-template-columns:repeat(3,1fr); }
  .split{ padding:32px 40px; }
}


/* ====================== CATÁLOGO DE ESPACIOS ====================== */
.catalogo-head{ padding-bottom:56px; }

.catalogo-filtros{
  display:grid; grid-template-columns:1fr; gap:14px;
  max-width:620px; margin:0 auto 26px;
}
.catalogo-cuenta{
  text-align:center; margin:0 0 22px;
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--aqua-deep);
}

.catalogo{ display:grid; grid-template-columns:1fr; gap:24px; }

/* Aviso de estado: cargando, vacío o error. Ocupa el ancho completo
   de la grilla para que no quede apretado en una columna. */
.catalogo-aviso{
  grid-column:1 / -1;
  text-align:center; color:var(--ink-soft);
  background:var(--white); border:1px dashed var(--sand-line);
  border-radius:var(--radius); padding:34px 24px; margin:0;
}

.card-espacio{ width:100%; max-width:none; }
.card-link{ color:inherit; text-decoration:none; }
.card-link:hover{ text-decoration:underline; }
.card-zona{
  margin:0 0 10px; font-size:.9rem; color:var(--ink-soft); font-weight:500;
}

/* ====================== FICHA DE UN ESPACIO ====================== */
.miga{ background:var(--sand); border-bottom:1px solid var(--sand-line); }
.miga .wrap{ padding-top:14px; padding-bottom:14px; }
.miga a{
  font-weight:600; font-size:.94rem; color:var(--aqua-deep); text-decoration:none;
}
.miga a:hover{ text-decoration:underline; }

.ficha-seccion{ padding-top:32px; }
.ficha-head h1{ font-size:clamp(1.7rem,6vw,2.5rem); margin:0 0 .2em; }
.ficha-zona{ margin:0 0 22px; color:var(--ink-soft); font-weight:500; }

.ficha-foto-principal{
  position:relative; aspect-ratio:3/2; border-radius:var(--radius-lg);
  overflow:hidden; background:var(--aqua-light);
}
.ficha-foto-principal img{ width:100%; height:100%; object-fit:cover; display:block; }

.ficha-miniaturas{
  display:flex; gap:10px; margin-top:12px;
  overflow-x:auto; padding-bottom:4px;
}
.ficha-mini{
  flex:0 0 88px; width:88px; height:66px; padding:0;
  border:2px solid transparent; border-radius:12px; overflow:hidden;
  background:none; cursor:pointer;
}
.ficha-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.ficha-mini.is-activa{ border-color:var(--aqua); }
.ficha-mini:focus-visible{ outline:3px solid var(--aqua); outline-offset:2px; }

.ficha-cols{ display:grid; grid-template-columns:1fr; gap:30px; margin-top:32px; }
.ficha-bloque{ margin-bottom:28px; }
.ficha-bloque h2{ font-size:1.25rem; margin:0 0 .5em; }
.ficha-bloque p{ margin:0; color:var(--ink-soft); }

.ficha-incluye{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px 16px;
}
.ficha-incluye li{
  position:relative; padding-left:24px; font-size:.97rem;
}
.ficha-incluye li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--aqua-deep); font-weight:800;
}
.ficha-reglas{ margin:0; padding-left:20px; color:var(--ink-soft); }
.ficha-reglas li{ margin-bottom:6px; }

.ficha-precio{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:24px;
  box-shadow:var(--shadow); align-self:start;
}
.ficha-precio-kicker{
  margin:0 0 .3em;
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--aqua-deep);
}
.ficha-precio-monto{ margin:0 0 .3em; line-height:1.1; }
.ficha-precio-monto strong{
  font-family:var(--font-display); font-size:2.1rem; font-weight:800;
}
.ficha-precio-monto span{ font-size:.95rem; color:var(--ink-soft); font-weight:600; }
.ficha-precio-semana{ margin:0 0 .2em; font-size:.94rem; color:var(--ink-soft); }
.ficha-precio-cap{ margin:0 0 18px; font-size:.94rem; color:var(--ink-soft); }
.ficha-precio-nota{
  margin:14px 0 0; font-size:.84rem; line-height:1.5; color:var(--ink-soft);
}

@media (min-width:700px){
  .catalogo-filtros{ grid-template-columns:1fr 1fr; }
  .catalogo{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1000px){
  .catalogo{ grid-template-columns:repeat(3,1fr); }
  .ficha-cols{ grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); gap:46px; }
  .ficha-precio{ position:sticky; top:calc(var(--header-h) + 20px); }
}


/* ============== PÁGINAS INTERNAS (sin hero oscuro detrás) ==============
   En la portada el encabezado arranca transparente sobre el video y se
   vuelve sólido al bajar. Acá no hay nada oscuro detrás, así que el
   logo blanco quedaba invisible sobre el fondo claro: el encabezado
   tiene que nacer sólido y quedarse así. */
.pagina-interna .site-header{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line), 0 6px 20px rgba(8,43,58,.06);
}
.pagina-interna .site-header .logo-mark{ color:var(--aqua-deep); }
.pagina-interna .site-header .logo-text{ color:var(--ink); text-shadow:none; }
.pagina-interna .site-header .logo-text span{ color:var(--aqua-deep); }
.pagina-interna main{ padding-top:var(--header-h); }

/* Las etiquetas de .calc-field son blancas porque la calculadora vive
   sobre fondo oscuro. Los filtros del catálogo están sobre fondo claro. */
.catalogo-filtros .calc-field{ margin-top:0; }
.catalogo-filtros .calc-field label{ color:var(--ink); }
.catalogo-filtros select{
  width:100%; min-height:54px; padding:14px 16px;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line);
  border-radius:14px; appearance:none;
}
.catalogo-filtros select:focus-visible{
  outline:3px solid var(--aqua); outline-offset:2px;
}

@media (min-width:900px){
  .pagina-interna .site-header .site-nav a{ color:var(--ink-soft); text-shadow:none; }
  .pagina-interna .site-header .site-nav a:hover,
  .pagina-interna .site-header .site-nav a[aria-current="page"]{ color:var(--aqua-deep); }
}

/* La 3:2 a ancho completo daba una foto de 760 px de alto en escritorio:
   tapaba el precio y las condiciones, que es lo que la gente vino a ver. */
@media (min-width:1000px){
  .ficha-foto-principal{ aspect-ratio:auto; height:460px; }
}


/* ====================== PUBLICAR MI ESPACIO ====================== */
.wrap-narrow{ max-width:760px; }

.pub-bloque{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 22px; margin:0 0 24px; background:var(--white);
  box-shadow:var(--shadow-sm);
}
.pub-bloque legend{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:800; font-size:1.2rem;
  color:var(--ink); padding:0 8px;
}
.pub-num{
  display:grid; place-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--aqua-deep); color:#fff;
  font-size:.9rem; font-weight:800;
}
.pub-ayuda{
  margin:.4em 0 1.4em; color:var(--ink-soft); font-size:.96rem; line-height:1.55;
}

/* Las etiquetas de .field son blancas en el formulario de la portada,
   que vive sobre fondo oscuro. Acá el fondo es blanco. */
.pub-form .field label{ color:var(--ink); }
/* Las casillas, los radios y el selector de archivos quedan afuera: con
   width:100% esta regla le ganaba a .visually-hidden y estiraba el input
   de fotos a 390 px, desbordando la pantalla en el celular. */
.pub-form .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.pub-form .field select,
.pub-form .field textarea{
  width:100%; min-height:54px; padding:14px 16px;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:14px;
}
.pub-form .field textarea{ min-height:auto; line-height:1.6; resize:vertical; }
.pub-form .field input:not([type="checkbox"]):not([type="file"]):focus-visible,
.pub-form .field select:focus-visible,
.pub-form .field textarea:focus-visible{
  outline:3px solid var(--aqua); outline-offset:2px;
}
.pub-form .field.has-error input:not([type="checkbox"]):not([type="file"]),
.pub-form .field.has-error select,
.pub-form .field.has-error textarea{ border-color:var(--required); }
.pub-form .hint{ color:var(--ink-soft); }

.pub-fila{ display:grid; grid-template-columns:1fr; gap:0 18px; }

/* Signo de peso pegado al campo: deja claro que el número es en pesos
   y evita que alguien escriba "$ 7.200" adentro. */
.pub-money{ position:relative; }
.pub-money span{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-weight:700; color:var(--ink-soft); pointer-events:none;
}
.pub-money input{ padding-left:34px !important; }

.pub-nota{
  margin:0 0 14px; padding:12px 14px;
  background:#FFF6E5; border:1px solid var(--sun-light); border-radius:12px;
  font-size:.93rem; color:#6B4A00;
}

.pub-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.pub-chips .calc-opt{ margin:0; }

/* Los chips de la calculadora son blancos sobre fondo oscuro. Acá el
   fondo es blanco y quedaban invisibles: mismo componente, colores
   invertidos. */
.pub-chips .calc-opt span{
  background:var(--white); color:var(--ink);
  border-color:var(--line);
  min-height:48px; padding:10px 14px; font-size:.94rem;
}
/* Cuadrado y no círculo: son casillas de marcar varias, no opciones
   excluyentes. El círculo le dice a la gente que sólo puede elegir una. */
.pub-chips .calc-opt span::before{ border-color:var(--line); border-radius:6px; }
.pub-chips .calc-opt input:checked + span{
  background:var(--aqua-light); color:var(--ink);
  border-color:var(--aqua-deep);
}
.pub-chips .calc-opt input:checked + span::before{
  border-color:var(--aqua-deep); background:var(--white);
}
.pub-chips .calc-opt input:focus-visible + span{
  outline:3px solid var(--aqua); outline-offset:3px;
}

.pub-acciones-reglas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.btn-sm{ min-height:44px; padding:10px 16px; font-size:.9rem; }

/* ---- Fotos ---- */
.pub-fotos{
  list-style:none; margin:18px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.pub-foto{
  position:relative; border-radius:14px; overflow:hidden;
  aspect-ratio:4/3; background:var(--aqua-light);
}
.pub-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.pub-foto-badge{
  position:absolute; top:8px; left:8px;
  background:var(--ink); color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
  padding:4px 9px; border-radius:999px;
}
.pub-foto-quitar{
  position:absolute; top:6px; right:6px;
  width:32px; height:32px; border:0; border-radius:50%;
  background:rgba(8,43,58,.78); color:#fff;
  font-size:1.2rem; line-height:1; cursor:pointer;
}
.pub-foto-principal{
  position:absolute; left:8px; right:8px; bottom:8px;
  border:0; border-radius:10px; padding:8px;
  background:rgba(255,255,255,.94); color:var(--ink);
  font-family:var(--font-body); font-size:.8rem; font-weight:700; cursor:pointer;
}
.pub-foto-quitar:focus-visible,
.pub-foto-principal:focus-visible{ outline:3px solid var(--aqua); outline-offset:2px; }
.pub-fotos-pie{
  grid-column:1 / -1; text-align:center;
  font-size:.88rem; color:var(--ink-soft);
}

.pub-aviso{
  margin:0 0 18px; padding:14px 16px;
  background:var(--aqua-light); border-radius:12px;
  font-size:.93rem; color:var(--aqua-dark);
}
.pub-estado{
  margin:14px 0 0; text-align:center;
  font-size:.93rem; color:var(--ink-soft); min-height:1.4em;
}

.pub-gracias{ text-align:center; padding:40px 20px; }
.pub-gracias-lead{
  max-width:46ch; margin:0 auto 26px;
  font-size:1.05rem; line-height:1.6; color:var(--ink-soft);
}
.pub-gracias-nota{
  max-width:42ch; margin:22px auto 26px;
  font-size:.88rem; color:var(--ink-soft);
}

/* Qué pasa después. Sin esto, "pendiente de aprobación" se lee como
   "quedó en la nada": el anfitrión necesita ver el recorrido. */
.pub-pasos{
  list-style:none; counter-reset:paso;
  max-width:440px; margin:0 auto; padding:0; text-align:left;
}
.pub-pasos li{
  counter-increment:paso; position:relative;
  padding:0 0 18px 46px; font-size:.97rem; color:var(--ink-soft);
}
.pub-pasos li::before{
  content:counter(paso);
  position:absolute; left:0; top:-2px;
  width:30px; height:30px; display:grid; place-content:center;
  border-radius:50%; background:var(--aqua-light); color:var(--aqua-dark);
  font-family:var(--font-display); font-weight:800; font-size:.9rem;
}
.pub-pasos li:not(:last-child)::after{
  content:""; position:absolute; left:14px; top:32px; bottom:4px;
  width:2px; background:var(--line);
}
.pub-pasos strong{ color:var(--ink); }

.pub-gracias-ico{
  width:64px; height:64px; margin:0 auto 18px;
  display:grid; place-content:center; border-radius:50%;
  background:var(--aqua-deep); color:#fff; font-size:2rem; font-weight:800;
}

@media (min-width:640px){
  .pub-fila{ grid-template-columns:1fr 1fr; }
  .pub-fotos{ grid-template-columns:repeat(3,1fr); }
  .pub-bloque{ padding:30px 28px; }
}


/* ====================== BLOQUE "PUBLICAR" DE LA PORTADA ======================
   Reemplaza al formulario corto. Vive sobre el fondo oscuro de
   .section-form, por eso los textos son claros. */
.cta-publicar{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);
  padding:28px 24px; margin-bottom:28px;
}
.cta-publicar-kicker{
  margin:0 0 .8em;
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sun-light);
}
.cta-publicar-lista{ list-style:none; margin:0 0 24px; padding:0; }
.cta-publicar-lista li{
  display:flex; gap:12px; align-items:flex-start;
  padding:10px 0; color:#fff; font-size:1rem; line-height:1.45;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.cta-publicar-lista li:last-child{ border-bottom:0; }
.cta-publicar-lista span{ flex:0 0 auto; font-size:1.15rem; line-height:1.3; }
.cta-publicar-alt{
  margin:16px 0 0; text-align:center;
  font-size:.95rem; color:rgba(255,255,255,.85);
}
.cta-publicar-alt a{ color:var(--sun-light); font-weight:700; }

@media (min-width:640px){
  .cta-publicar{ padding:34px 36px; }
}


/* ====================== DOCUMENTO LEGAL EN PÁGINA PROPIA ======================
   Las Condiciones para huéspedes reutilizan los estilos .legal-doc del
   modal de la portada, pero viven en una página propia para poder
   mandarlas por WhatsApp. */
.doc-seccion{ padding-top:36px; }
.doc-pagina{ max-width:760px; margin:0 auto; }
.doc-pagina .legal-h1{ font-size:clamp(1.6rem,5.5vw,2.2rem); margin:0 0 .6em; }
.doc-pagina .legal-lead{
  font-size:1.05rem; line-height:1.65; color:var(--ink-soft); margin:0 0 1.6em;
}
.doc-pagina .legal-highlight{ margin:0 0 2.2em; }
.doc-version{
  margin:2.4em 0 0; padding-top:1.2em; border-top:1px solid var(--line);
  font-size:.88rem; color:var(--ink-soft);
}

/* ====================== BLOQUE DE ALERTA (el gancho) ======================
   Es el bloque que sostiene toda la propuesta: por qué hace falta
   verificar. Fondo oscuro para que corte visualmente con el hero. */
.alerta{ background:var(--ink); padding:clamp(48px,7vw,80px) 0; }
.alerta-caja{
  display:grid; grid-template-columns:1fr; gap:18px;
  max-width:920px; margin:0 auto;
}
.alerta-ico{
  width:56px; height:56px; border-radius:16px; display:grid; place-content:center;
  background:rgba(255,185,48,.16); color:var(--sun); flex:0 0 auto;
}
.alerta-cuerpo h2{
  font-family:var(--font-display); font-weight:800; color:#fff;
  font-size:clamp(1.6rem,4.4vw,2.3rem); line-height:1.15; margin:0 0 .5em;
  letter-spacing:-.02em;
}
.alerta-lead{
  color:rgba(255,255,255,.88); font-size:1.05rem; line-height:1.65; margin:0 0 26px;
  max-width:62ch;
}
.alerta-datos{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:26px; }
.dato{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:16px; padding:18px 20px;
}
.dato-cifra{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:1.5rem; color:var(--sun-light); line-height:1.1; margin-bottom:6px;
}
.dato p{ margin:0; color:rgba(255,255,255,.85); font-size:.96rem; line-height:1.55; }
.dato strong{ color:#fff; }
.alerta-cierre{
  background:rgba(18,181,201,.14); border-left:4px solid var(--aqua);
  border-radius:0 14px 14px 0; padding:16px 20px; margin:0 0 18px;
  color:rgba(255,255,255,.92); line-height:1.6;
}
.alerta-cierre strong{ color:#fff; }
.alerta-fuentes{ margin:0; font-size:.85rem; color:rgba(255,255,255,.6); }
.alerta-fuentes a{ color:rgba(255,255,255,.82); text-decoration:underline; }
.alerta-fuentes a:hover{ color:var(--sun-light); }
.alerta-fuentes span{ margin:0 6px; }

@media (min-width:760px){
  .alerta-caja{ grid-template-columns:auto 1fr; gap:26px; align-items:start; }
  .alerta-datos{ grid-template-columns:repeat(3,1fr); }
}

/* ====================== PASOS (cómo funciona) ====================== */
.pasos-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:18px;
}
.paso-card{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:28px 24px 24px;
  box-shadow:var(--shadow-sm);
}
.paso-num{
  position:absolute; top:-18px; left:24px;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-content:center;
  background:var(--aqua-deep); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:1.15rem;
  box-shadow:0 4px 12px rgba(10,126,146,.3);
}
.paso-card h3{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  margin:12px 0 8px; color:var(--ink);
}
.paso-card p{ margin:0; color:var(--ink-soft); line-height:1.6; font-size:.98rem; }

@media (min-width:860px){
  .pasos-grid{ grid-template-columns:repeat(3,1fr); gap:24px; }
}

/* ====================== QUÉ VERIFICAMOS ====================== */
.verif-grid{
  display:grid; grid-template-columns:1fr; gap:16px;
}
.verif-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px 22px;
  box-shadow:var(--shadow-sm);
}
.verif-ico{
  display:grid; place-content:center;
  width:52px; height:52px; border-radius:16px;
  background:var(--aqua-light); font-size:1.5rem; margin-bottom:16px;
}
.verif-card h3{
  font-family:var(--font-display); font-weight:700; font-size:1.12rem;
  margin:0 0 8px; color:var(--ink);
}
.verif-card p{ margin:0; color:var(--ink-soft); line-height:1.6; font-size:.97rem; }
.verif-nota{
  max-width:60ch; margin:28px auto 0; text-align:center;
  font-size:.95rem; color:var(--ink-soft); line-height:1.65;
}

@media (min-width:760px){
  .verif-grid{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
}
@media (min-width:1040px){
  .verif-grid{ gap:24px; }
}

/* Fila de tres campos: capacidad, dormitorios y baños. */
@media (min-width:640px){
  .pub-fila-3{ grid-template-columns:1.4fr 1fr 1fr; }
}

/* ====================== SELLO DE VERIFICADO ======================
   Es la promesa central del sitio. Sobre la foto en el listado y
   arriba del precio en la ficha. */
.sello-verificado{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--aqua-deep); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  letter-spacing:.01em; padding:6px 12px 6px 8px; border-radius:999px;
  margin:0; box-shadow:0 2px 8px rgba(8,43,58,.22);
}
.sello-ico{
  display:grid; place-content:center;
  width:17px; height:17px; border-radius:50%;
  background:#fff; color:var(--aqua-deep);
  font-size:.7rem; font-weight:800; line-height:1;
}
/* Sobre la foto de la tarjeta */
.listing-media .sello-verificado{ position:absolute; top:12px; left:12px; z-index:2; }
/* En la ficha va suelto, arriba del precio */
.ficha-precio .sello-verificado{ margin-bottom:14px; }

.card-casa{
  margin:2px 0 0; font-size:.9rem; color:var(--ink-soft);
}

/* ====================== BUSCADOR DE FECHAS ======================
   No filtra: las fechas viajan al mensaje de WhatsApp del dueño. */
.busca{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  background:rgba(255,255,255,.96); border-radius:var(--radius);
  padding:14px; margin:0 0 22px; box-shadow:0 8px 26px rgba(8,43,58,.18);
  max-width:520px;
}
.busca-campo{ display:flex; flex-direction:column; gap:4px; }
.busca-campo label{
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--aqua-deep);
}
.busca-campo input{
  min-height:46px; padding:8px 12px; width:100%;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:12px;
}
.busca-campo input:focus-visible{ outline:3px solid var(--aqua); outline-offset:2px; }
.busca-btn{ grid-column:1 / -1; min-height:50px; }
.busca-aviso{
  grid-column:1 / -1; margin:0; font-size:.86rem; color:var(--required);
}
.busca-aviso:empty{ display:none; }

@media (min-width:560px){
  .busca{ grid-template-columns:1fr 1fr auto; align-items:end; }
  .busca-btn{ grid-column:auto; }
}

/* Recordatorio de las fechas buscadas */
.chip-fechas{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--aqua-light); border:1px solid #BFEAF1;
  border-radius:999px; padding:9px 16px; margin:0 0 18px;
  font-size:.92rem; color:var(--aqua-dark);
}
.chip-fechas a{ color:var(--aqua-deep); font-weight:700; text-decoration:underline; }
.ficha-precio .chip-fechas{ border-radius:12px; margin-bottom:12px; font-size:.88rem; }

/* ====================== GARANTÍA DE LA SEÑA ====================== */
.garantia{ background:var(--sand); }
.garantia-caja{
  background:var(--white); border:1px solid var(--sand-line);
  border-radius:var(--radius-lg); padding:clamp(26px,5vw,44px);
  box-shadow:var(--shadow-sm); text-align:center;
}
.garantia-escudo{
  display:grid; place-content:center; width:66px; height:66px;
  margin:0 auto 18px; border-radius:20px;
  background:var(--aqua-light); color:var(--aqua-deep);
}
.garantia-caja h2{
  font-family:var(--font-display); font-weight:800; color:var(--ink);
  font-size:clamp(1.45rem,4vw,2.05rem); line-height:1.2;
  margin:0 0 .6em; letter-spacing:-.02em;
}
.garantia-lead{
  max-width:56ch; margin:0 auto 24px;
  font-size:1.04rem; line-height:1.65; color:var(--ink-soft);
}
.garantia-pasos{
  list-style:none; counter-reset:g; margin:0 auto 22px; padding:0;
  max-width:460px; text-align:left;
}
.garantia-pasos li{
  counter-increment:g; position:relative;
  padding:0 0 14px 40px; color:var(--ink-soft); line-height:1.55; font-size:.97rem;
}
.garantia-pasos li::before{
  content:counter(g); position:absolute; left:0; top:-1px;
  width:26px; height:26px; border-radius:50%;
  background:var(--aqua-deep); color:#fff;
  display:grid; place-content:center;
  font-family:var(--font-display); font-weight:800; font-size:.82rem;
}
.garantia-pasos strong{ color:var(--ink); }
/* El tope va en letra chica a propósito: lo que tiene que quedar
   grabado es la promesa, no el límite. */
.garantia-chica{
  max-width:60ch; margin:0 auto; padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.83rem; line-height:1.6; color:#8297A2;
}
.garantia-chica a{ color:var(--aqua-deep); text-decoration:underline; }

/* ====================== FRANJA DE FOTOS ======================
   Ambientación, no publicaciones. Sin sello, sin precio y sin
   enlace, a propósito. */
.franja{ padding:clamp(48px,7vw,84px) 0; background:var(--white); }
.franja-grid{
  display:grid; grid-template-columns:1fr; gap:12px;
}
.franja-foto{
  margin:0; border-radius:var(--radius); overflow:hidden;
  background:var(--aqua-light); aspect-ratio:16/9;
}
.franja-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.franja-pie{
  margin:16px 0 0; text-align:center;
  font-size:.84rem; color:#8297A2;
}

@media (min-width:700px){
  .franja-grid{ grid-template-columns:repeat(6,1fr); gap:14px; }
  .franja-ancha{ grid-column:span 3; }
  .franja-foto:not(.franja-ancha){ grid-column:span 2; }
}

/* ====================== BUSCADOR ======================
   Ubicación, fechas y huéspedes. Las fechas no filtran: viajan al
   mensaje de WhatsApp del dueño. */
.buscador{
  display:grid; grid-template-columns:1fr; gap:10px;
  background:rgba(255,255,255,.97); border-radius:var(--radius);
  padding:14px; margin:0 0 22px; box-shadow:0 8px 26px rgba(8,43,58,.18);
}
.buscador-campo{ display:flex; flex-direction:column; gap:4px; position:relative; }
.buscador-campo label{
  font-family:var(--font-display); font-weight:700; font-size:.76rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--aqua-deep);
}
.buscador-campo input,
.buscador-resumen{
  min-height:46px; padding:8px 12px; width:100%; text-align:left;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:12px;
}
.buscador-campo input::placeholder{ color:#9AAAB2; }
.buscador-resumen{ cursor:pointer; }
.buscador-campo input:focus-visible,
.buscador-resumen:focus-visible{ outline:3px solid var(--aqua); outline-offset:2px; }
.buscador-btn{ min-height:50px; }
.buscador-aviso{
  grid-column:1 / -1; margin:0; font-size:.86rem; color:var(--required);
}
.buscador-aviso:empty{ display:none; }

/* Panel de huéspedes */
.hues-panel{
  position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0;
  min-width:260px; background:var(--white); border:1px solid var(--line);
  border-radius:14px; padding:14px; box-shadow:0 12px 32px rgba(8,43,58,.22);
}
/* Cuando abajo no hay lugar, el panel se abre hacia arriba. La clase
   la pone js/main.js midiendo el espacio real en la ventana. */
.hues-panel.es-arriba{ top:auto; bottom:calc(100% + 6px); }
.hues-fila{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.hues-fila:last-of-type{ border-bottom:0; }
.hues-fila strong{ display:block; font-family:var(--font-display); font-size:.97rem; color:var(--ink); }
.hues-fila small{ color:var(--ink-soft); font-size:.82rem; }
.hues-ctrl{ display:flex; align-items:center; gap:10px; }
.hues-btn{
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--white); color:var(--aqua-deep);
  font-size:1.1rem; line-height:1; display:grid; place-content:center;
}
.hues-btn:hover{ border-color:var(--aqua-deep); }
.hues-btn:focus-visible{ outline:3px solid var(--aqua); outline-offset:2px; }
.hues-valor{ min-width:20px; text-align:center; font-weight:700; color:var(--ink); }
.hues-nota{ margin:10px 0 0; font-size:.78rem; color:#8297A2; }

@media (min-width:760px){
  .buscador{ grid-template-columns:1.4fr 1fr 1fr 1.1fr auto; align-items:end; gap:12px; }
  .hues-panel{ left:auto; right:0; width:300px; }
}

/* Bloque de resultados parecidos */
.catalogo-similares{ margin-top:38px; padding-top:30px; border-top:1px solid var(--line); }
.catalogo-similares > h2{
  font-family:var(--font-display); font-weight:800; color:var(--ink);
  font-size:clamp(1.15rem,3vw,1.5rem); margin:0 0 20px; letter-spacing:-.01em;
}

/* El resumen de huéspedes no puede desarmar la grilla del buscador. */
.buscador-resumen{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (min-width:760px){
  .buscador{ grid-template-columns:1.7fr 1fr 1fr 1.15fr auto; }
}

/* Los campos de fecha traen un ancho mínimo propio que le comía el
   espacio a la ubicación. Con min-width:0 la grilla manda. */
.buscador-campo,
.buscador-campo input,
.buscador-resumen{ min-width:0; }

/* En el hero el buscador ocupa las dos columnas: es la acción
   principal de la página y con media columna los campos quedaban
   ilegibles. */
.hero .buscador{ grid-column:1 / -1; margin:0; }
@media (min-width:900px){
  .hero .buscador{ margin-top:8px; }
}