/* ============================================================
   CHILL HOUSE BOADILLA · chillhouse.es
   Sistema editorial: fondo hueso, tinta suave, acento terracota.
   Tipografía: Fraunces (display) + Manrope (texto).
   ============================================================ */

:root{
  --bone:#F4F0E8;
  --paper:#FBF9F3;
  --sand:#E9E2D3;
  --ink:#1B1714;
  --ink-soft:#4A443D;
  --terra:#A8523C;
  --line:rgba(27,23,20,.16);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Manrope",-apple-system,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.05rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3rem)}

::selection{background:var(--terra);color:var(--paper)}

/* accesibilidad */
.salto{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:200}
.salto:focus{left:0}

/* ---------- tipografía editorial ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:480;line-height:1.08;letter-spacing:-.01em}
.kicker{
  display:flex;align-items:center;gap:.9rem;
  font-size:.72rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:var(--terra);margin-bottom:1.6rem;
}
.kicker::before{content:"";width:2.6rem;height:1px;background:var(--terra);flex:none}
.titulo{font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:1.2rem}
.titulo em,.lead em{font-style:italic;font-weight:380;color:var(--terra)}
.lead{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.45;font-weight:380;color:var(--ink-soft)}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .45s var(--ease),box-shadow .45s var(--ease);
  background:transparent;
}
.topbar.solida{background:rgba(244,240,232,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:4.6rem}
.logo{display:flex;flex-direction:column;line-height:1}
.logo .marca{font-family:var(--serif);font-size:1.32rem;font-weight:560;letter-spacing:.02em}
.logo .marca em{font-style:italic;font-weight:400}
.logo .lugar{font-size:.58rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:var(--terra);margin-top:.28rem}
.topbar:not(.solida) .logo,.topbar:not(.solida) .nav-desktop a,.topbar:not(.solida) .idioma{color:var(--paper)}
.topbar:not(.solida) .logo .lugar{color:var(--paper)}

.nav-desktop{display:flex;gap:1.9rem;font-size:.86rem;font-weight:600;letter-spacing:.04em}
.nav-desktop a{position:relative;padding:.3rem 0}
.nav-desktop a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-desktop a:hover::after{transform:scaleX(1);transform-origin:left}

.acciones{display:flex;align-items:center;gap:1.1rem}
.idioma{font-size:.78rem;font-weight:700;letter-spacing:.14em;opacity:.85}
.idioma:hover{opacity:1}
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:.84rem;font-weight:700;letter-spacing:.06em;
  padding:.78rem 1.5rem;border:1px solid var(--ink);border-radius:999px;
  cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.btn:hover{background:var(--terra);border-color:var(--terra);transform:translateY(-2px)}
.btn--claro{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--claro:hover{background:var(--terra);border-color:var(--terra);color:var(--paper)}
.btn--linea{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--linea:hover{background:var(--ink);color:var(--paper)}

.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;z-index:130}
.burger span{display:block;width:1.55rem;height:2px;background:var(--ink);margin:.32rem 0;transition:.35s var(--ease)}
.topbar:not(.solida) .burger span{background:var(--paper)}
.burger.abierto span{background:var(--ink)}
.burger.abierto span:nth-child(1){transform:translateY(.42rem) rotate(45deg)}
.burger.abierto span:nth-child(2){opacity:0}
.burger.abierto span:nth-child(3){transform:translateY(-.42rem) rotate(-45deg)}

.nav-movil{
  position:fixed;inset:0;background:var(--bone);z-index:120;
  display:flex;flex-direction:column;justify-content:center;gap:1.1rem;
  padding:0 2rem;visibility:hidden;opacity:0;transition:.4s var(--ease);
}
.nav-movil.abierta{visibility:visible;opacity:1}
.nav-movil a{font-family:var(--serif);font-size:2rem}
.nav-movil .btn{align-self:flex-start;font-family:var(--sans);font-size:.9rem;margin-top:1rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.hero-fondo{position:absolute;inset:0;overflow:hidden}
.hero-fondo img{
  width:100%;height:100%;object-fit:cover;
  animation:hero-zoom 22s var(--ease) both;
  will-change:transform;
}
@keyframes hero-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero-fondo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,15,10,.74) 0%,rgba(20,15,10,.18) 46%,rgba(20,15,10,.22) 100%);
}
.hero-cont{position:relative;z-index:2;color:var(--paper);width:100%;padding-bottom:clamp(2.5rem,7vh,5.5rem)}
.hero .kicker{color:var(--paper)}
.hero .kicker::before{background:var(--paper)}
.hero h1{font-size:clamp(2.6rem,6.4vw,5.4rem);font-weight:430;max-width:18ch}
.hero h1 em{font-style:italic;font-weight:340}
.hero-sub{font-size:clamp(1rem,1.5vw,1.18rem);max-width:46ch;margin:1.4rem 0 2.2rem;opacity:.92}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap}

/* reveal por líneas con máscara */
.linea-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.linea-mask>span{display:block;transform:translateY(112%);transition:transform 1s var(--ease)}
.lineas-listas .linea-mask>span{transform:translateY(0)}
.lineas-listas .linea-mask:nth-child(2)>span{transition-delay:.12s}
.lineas-listas .linea-mask:nth-child(3)>span{transition-delay:.24s}

.hero-scroll{
  position:absolute;right:clamp(1.2rem,4vw,3rem);bottom:clamp(2.5rem,7vh,5.5rem);z-index:2;
  width:1px;height:5.5rem;background:rgba(251,249,243,.3);overflow:hidden;
}
.hero-scroll::after{
  content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:var(--paper);animation:gota 2.4s var(--ease) infinite;
}
@keyframes gota{to{top:110%}}

/* ============================================================
   MARQUESINA editorial
   ============================================================ */
.cinta{border-block:1px solid var(--line);padding:1.05rem 0;overflow:hidden;background:var(--paper)}
.cinta-pista{display:flex;width:max-content;animation:cinta 38s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
@keyframes cinta{to{transform:translateX(-50%)}}
.cinta-grupo{display:flex;align-items:baseline;gap:2.6rem;padding-right:2.6rem;white-space:nowrap}
.cinta-grupo span{font-size:.92rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
.cinta-grupo em{font-family:var(--serif);font-style:italic;font-size:1.06rem;letter-spacing:.02em;text-transform:none;color:var(--terra)}

/* ============================================================
   SECCIONES
   ============================================================ */
.seccion{padding:clamp(4.5rem,10vw,8.5rem) 0}
.seccion--papel{background:var(--paper)}
.seccion--tinta{background:var(--ink);color:var(--bone)}
.seccion--tinta .kicker{color:var(--sand)}
.seccion--tinta .kicker::before{background:var(--sand)}

/* --- La casa --- */
.casa-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.casa-texto p+p{margin-top:1.2rem}
.casa-texto .lead{margin-bottom:1.8rem}
.casa-foto{position:relative}
.casa-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.casa-foto figcaption{
  margin-top:.8rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;gap:.8rem;align-items:center;
}
.casa-foto figcaption::before{content:"";width:1.8rem;height:1px;background:var(--terra)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line);margin-top:clamp(3rem,7vw,5.5rem)}
.stat{background:var(--bone);padding:2.2rem 1.4rem;text-align:center}
.seccion--papel .stat{background:var(--paper)}
.stat b{display:block;font-family:var(--serif);font-weight:430;font-size:clamp(2.1rem,3.6vw,3.2rem);line-height:1}
.stat b sup{font-size:.45em;font-weight:400}
.stat>span{display:block;margin-top:.55rem;font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}

/* ============================================================
   ESPACIOS · galería editorial
   ============================================================ */
.zona{margin-top:clamp(3.2rem,7vw,5.5rem)}
.zona-cab{display:flex;align-items:baseline;gap:1.2rem;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.6rem}
.zona-cab i{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--terra)}
.zona-cab h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:460}
.zona-cab small{margin-left:auto;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

.galeria{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.6rem,1.2vw,1.1rem)}
.foto{
  position:relative;overflow:hidden;cursor:pointer;border:0;padding:0;background:var(--sand);
  grid-column:span 2;aspect-ratio:4/3;text-align:left;
}
.foto--ancha{grid-column:span 4;aspect-ratio:16/9.5}
.foto--media{grid-column:span 3;aspect-ratio:3/2}
.foto img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.foto:hover img,.foto:focus-visible img{transform:scale(1.045)}
.foto figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:center;
  padding:.7rem .95rem;color:var(--paper);
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(20,15,10,.62),transparent);
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.foto figcaption::after{content:"+";font-family:var(--serif);font-size:1.15rem;font-weight:400}
.foto:hover figcaption,.foto:focus-visible figcaption{opacity:1;transform:translateY(0)}

/* reveal de imágenes: cortina + escala */
.des{clip-path:inset(0 0 100% 0)}
.des img{transform:scale(1.08)}
.des.visto{clip-path:inset(0 0 0% 0);transition:clip-path 1.1s var(--ease)}
.des.visto img{transform:scale(1);transition:transform 1.4s var(--ease)}
.des.visto:hover img{transform:scale(1.045)}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed;inset:0;z-index:150;background:rgba(18,14,11,.94);
  display:flex;align-items:center;justify-content:center;
  visibility:hidden;opacity:0;transition:.35s var(--ease);
}
.lightbox.abierto{visibility:visible;opacity:1}
.lightbox img{max-width:88vw;max-height:82vh;object-fit:contain}
.lb-pie{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  color:var(--paper);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  display:flex;gap:1.4rem;align-items:baseline;white-space:nowrap;
}
.lb-pie em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:.02em;font-size:.95rem}
.lb-btn{
  position:absolute;background:none;border:1px solid rgba(251,249,243,.35);color:var(--paper);
  width:2.9rem;height:2.9rem;border-radius:50%;cursor:pointer;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;transition:.3s var(--ease);
}
.lb-btn:hover{background:var(--paper);color:var(--ink)}
.lb-cerrar{top:1.4rem;right:1.4rem}
.lb-prev{left:1.4rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1.4rem;top:50%;transform:translateY(-50%)}

/* ============================================================
   IDEAL PARA · filas editoriales
   ============================================================ */
.usos{border-top:1px solid var(--line);margin-top:1.5rem}
.uso{
  display:grid;grid-template-columns:5rem 1fr auto;align-items:center;gap:1.5rem;
  padding:1.7rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--ease);
}
.uso:hover{padding-left:1.2rem}
.uso i{font-family:var(--serif);font-style:italic;color:var(--terra);font-size:.95rem}
.uso h3{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:440}
.uso p{font-size:.92rem;color:var(--ink-soft);max-width:34ch;text-align:right}
.seccion--tinta .uso p{color:var(--sand)}
.seccion--tinta .uso{border-color:rgba(244,240,232,.18)}
.seccion--tinta .usos{border-color:rgba(244,240,232,.18)}
.uso .flecha{
  display:inline-block;font-family:var(--serif);font-size:1.4rem;
  transform:translateX(-6px);opacity:0;transition:.4s var(--ease);
}
.uso:hover .flecha{transform:translateX(0);opacity:1}
.nota-produccion{
  margin-top:2rem;font-size:.95rem;color:var(--sand);
  display:flex;gap:.9rem;align-items:flex-start;max-width:62ch;
}
.nota-produccion::before{content:"";width:2rem;height:1px;background:var(--terra);flex:none;margin-top:.7rem}

/* ============================================================
   FICHA TÉCNICA
   ============================================================ */
.ficha-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.specs{border-top:1px solid var(--line)}
.specs li{display:flex;justify-content:space-between;gap:1.5rem;padding:1.05rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.specs li span:first-child{font-weight:700;letter-spacing:.04em}
.specs li span:last-child{color:var(--ink-soft);text-align:right}
.amenities{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem .6rem;margin-top:.4rem}
.amenities li{
  display:flex;gap:.7rem;align-items:baseline;font-size:.95rem;padding:.55rem 0;
}

/* ============================================================
   TARIFAS
   ============================================================ */
.tarifas-tabla{border-top:1px solid var(--line);margin-top:1.4rem}
.tarifa{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:1.5rem;
  padding:1.5rem 0;border-bottom:1px solid var(--line);
}
.tarifa h3{font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:460}
.tarifa .precio{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:430;color:var(--terra);white-space:nowrap}
.tarifa .nota{text-align:right;font-size:.88rem;color:var(--ink-soft)}
.tarifas-pie{margin-top:1.6rem;font-size:.9rem;color:var(--ink-soft);display:flex;gap:.9rem;align-items:flex-start;max-width:70ch}
.tarifas-pie::before{content:"";width:2rem;height:1px;background:var(--terra);flex:none;margin-top:.7rem}

/* ============================================================
   UBICACIÓN
   ============================================================ */
.ubicacion-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2.5rem,6vw,5rem);align-items:stretch}
.ubicacion-datos li{display:flex;gap:.8rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.97rem}
.ubicacion-privacidad{margin-top:1.6rem;font-size:.88rem;color:var(--ink-soft);font-style:italic}
.mapa-caja{
  position:relative;min-height:380px;background:var(--sand);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.mapa-caja iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.contacto-canales{display:flex;flex-direction:column;gap:.4rem;margin-top:1.8rem}
.canal{
  display:flex;align-items:baseline;gap:1rem;padding:1.1rem 0;border-bottom:1px solid rgba(244,240,232,.18);
  font-size:1.05rem;transition:padding-left .4s var(--ease);
}
.canal:hover{padding-left:.8rem}
.canal small{font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--sand);width:5.4rem;flex:none}
.canal b{font-family:var(--serif);font-weight:460;font-size:1.15rem}

.formulario{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.campo{display:flex;flex-direction:column;gap:.45rem}
.campo--full{grid-column:1/-1}
.campo label{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sand)}
.campo input,.campo select,.campo textarea{
  background:transparent;border:0;border-bottom:1px solid rgba(244,240,232,.32);
  color:var(--bone);font-family:var(--sans);font-size:1rem;padding:.6rem 0;
  border-radius:0;transition:border-color .3s;
}
.campo select{appearance:none;cursor:pointer}
.campo select option{color:var(--ink)}
.campo textarea{resize:vertical;min-height:96px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--terra)}
.formulario .btn{grid-column:1/-1;justify-self:start;margin-top:.6rem}
.form-estado{grid-column:1/-1;font-size:.9rem;color:var(--sand);min-height:1.4em}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:var(--sand);border-top:1px solid rgba(244,240,232,.14);padding:2.6rem 0}
.footer-fila{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;font-size:.85rem}
.footer-fila .logo .lugar{color:var(--sand)}
.footer-fila nav{display:flex;gap:1.4rem}
.footer-fila nav a:hover{color:var(--paper);text-decoration:underline}

/* ============================================================
   PÁGINAS LEGALES
   ============================================================ */
.legal-pagina{max-width:760px;margin:0 auto;padding:8.5rem 1.5rem 5rem}
.legal-pagina h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:2rem}
.legal-pagina h2{font-size:1.3rem;margin:2.2rem 0 .8rem}
.legal-pagina p,.legal-pagina li{color:var(--ink-soft);font-size:.97rem}
.legal-pagina ul{list-style:disc;padding-left:1.4rem}
.legal-pagina a{text-decoration:underline}

/* ============================================================
   ANIMACIONES scroll-reveal
   ============================================================ */
.rev{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rev.visto{opacity:1;transform:none}
.rev-d1{transition-delay:.1s}
.rev-d2{transition-delay:.2s}
.rev-d3{transition-delay:.3s}
.rev-d4{transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rev,.des{opacity:1;transform:none;clip-path:none}
  .des img{transform:none}
  .linea-mask>span{transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .casa-grid,.ficha-grid,.ubicacion-grid,.contacto-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .foto,.foto--ancha,.foto--media{grid-column:span 1;aspect-ratio:4/3}
  .foto--ancha{grid-column:span 2;aspect-ratio:16/9.5}
  .uso{grid-template-columns:3rem 1fr;row-gap:.3rem}
  .uso p{grid-column:2;text-align:left;max-width:none}
  .uso .flecha{display:none}
  .tarifa{grid-template-columns:1fr auto}
  .tarifa .nota{grid-column:1/-1;text-align:left}
}
@media (max-width:760px){
  .nav-desktop{display:none}
  .acciones .btn{display:none}
  .burger{display:block}
  .formulario{grid-template-columns:1fr}
  .amenities{grid-template-columns:1fr}
  .hero h1{max-width:14ch}
  .hero-scroll{display:none}
}