/* =============================================================
   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 ============================ */
.hero{
  position:relative; overflow:hidden;
  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;
}
.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; }
}
