/* ============================================================
   LA CASITA CANINA — tokens
   Paleta: verde salvia (primario) / crema hueso (fondo) /
   tierra cacao (acentos y botones). Sin neón, sin primarios.
   ============================================================ */
:root{
  --cream:        #FBF8F2;
  --cream-deep:   #F3EEE2;
  --sage:         #637858;
  --sage-mid:     #8FA383;
  --sage-soft:    #DDE4D3;
  --sage-deep:    #3F4F38;
  --ink:          #232C1D;
  --muted:        #676F5F;
  --forest:       #2C3E24;
  --forest-deep:  #1A2615;
  --line:         #E2DDCE;
  --sage-light:   #A9C19B;
  --edge:         #7D8E72;   /* bordes de control: 3.31:1 crema, 3.03:1 crema hondo */

  --display: "Lora", "Iowan Old Style", Georgia, serif;
  --body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --arch-lg: 260px 260px 20px 20px;
  --arch-md: 150px 150px 16px 16px;
  --arch-sm: 90px 90px 10px 10px;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --gap: clamp(2rem, 5vw, 4.5rem);
  --shadow: 0 24px 60px -32px rgba(35,44,29,.35);

  /* curvas de movimiento: una sola familia para toda la pagina */
  --ease-out:  cubic-bezier(.22,1,.36,1);   /* entradas: sale rapido, asienta suave */
  --ease-soft: cubic-bezier(.4,0,.2,1);     /* opacidad y color */
  --lift: 0 18px 40px -28px rgba(35,44,29,.45);
  --header-h: 5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  color:var(--sage-deep);
  line-height:1.16;
  letter-spacing:-.012em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.05rem,1.05rem + 2.8vw,3.7rem)}
h2{font-size:clamp(1.68rem,1.25rem + 1.95vw,2.65rem)}
h3{font-size:clamp(1.14rem,1.05rem + .45vw,1.36rem); line-height:1.3}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.wrap{width:min(1180px,100% - (var(--pad) * 2)); margin-inline:auto}
.section{padding-block:clamp(4.5rem,9vw,8.5rem)}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.lead{font-size:clamp(1.08rem,1rem + .35vw,1.25rem); color:var(--muted); font-weight:300}

.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage); margin:0 0 1.35rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--sage-mid); flex:none}
.eyebrow--center{justify-content:center}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--body); font-size:.86rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  padding:1.05rem 2rem; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:background-color .25s ease, color .25s ease,
  border-color .25s ease, transform .25s ease;
}
.btn--primary{background:var(--forest); color:var(--cream)}
.btn--primary:hover{background:var(--forest-deep); transform:translateY(-2px)}
.btn--ghost{border-color:var(--edge); color:var(--sage-deep); background:transparent}
.btn--ghost:hover{background:var(--sage-soft); transform:translateY(-2px)}
.btn--light{background:var(--cream); color:var(--forest-deep)}
.btn--light:hover{background:#fff; transform:translateY(-2px)}
.btn--sm{padding:.72rem 1.4rem; font-size:.75rem}
.btn svg{width:1.05em; height:1.05em; fill:currentColor}
a:focus-visible,button:focus-visible{outline:2px solid var(--forest); outline-offset:3px; border-radius:4px}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(251,248,242,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s ease;
}
.site-header.is-stuck{border-bottom-color:var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.9rem}

/* Lockup del logotipo */
.brand{display:flex; align-items:center; gap:.8rem; text-decoration:none}
.brand-logo{width:auto; height:52px; flex:none}
@media(max-width:520px){.brand-logo{height:46px}}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-name{font-family:var(--display); font-size:1.06rem; color:var(--sage-deep)}
.brand-sub{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); margin-top:.3rem}

.nav-links{display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0}
.nav-links a{text-decoration:none; font-size:.86rem; color:var(--muted); transition:color .2s ease}
.nav-links a:hover{color:var(--sage-deep)}
.nav-cta{display:none}
@media(min-width:900px){.nav-cta{display:inline-flex}}

.nav-toggle{
  display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line);
  border-radius:50%; background:transparent; cursor:pointer;
}
.nav-toggle span{display:block; width:17px; height:1.5px; background:var(--sage-deep); position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--sage-deep);
  transition:transform .25s ease, top .25s ease;
}
.nav-toggle span::before{top:-5.5px} .nav-toggle span::after{top:5.5px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}
@media(min-width:900px){.nav-toggle{display:none}}

@media(max-width:899px){
  .nav-links{
    position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--cream); border-bottom:1px solid var(--line);
    padding:0 var(--pad); max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease;
  }
  .nav-links.is-open{max-height:min(70vh,34rem); overflow-y:auto; padding-block:1rem 1.75rem}
  .nav-links li{width:100%}
  .nav-links a{display:block; padding:.85rem 0; font-size:1rem; border-bottom:1px solid var(--line)}
  .nav-links li:last-child a{border-bottom:none}
}

/* ---------- hero ---------- */
.hero{padding-top:clamp(3rem,6vw,5rem); padding-bottom:clamp(3.5rem,7vw,6rem); overflow:hidden}
.hero-grid{display:grid; gap:var(--gap); align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.02fr .98fr}}
.hero h1{margin-bottom:1.6rem}
/* Sin acento cromático, el énfasis del H1 se separa por VALOR (casi negro verdoso)
   + itálica, no por matiz. */
.hero h1 em{font-style:italic; color:var(--forest-deep)}
.hero-actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem}
.hero-note{
  margin-top:1.9rem; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.92rem; color:var(--muted); max-width:44ch;
}
.hero-note strong{color:var(--sage-deep); font-weight:700}

/* ---------- marco de foto en arco (lenguaje formal: el techo de la casita) ---------- */
.photo{
  position:relative; overflow:hidden; background:var(--sage-soft);
  border-radius:var(--arch-lg); box-shadow:var(--shadow); isolation:isolate;
}
.photo::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:1px solid rgba(63,79,56,.16); pointer-events:none; z-index:4;
}
/* Capa de gradación: empuja los medios tonos hacia el salvia y baja la saturación.
   Cualquier foto que se coloque aquí queda dentro de la paleta de marca. */
.photo::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:3;
  pointer-events:none; mix-blend-mode:soft-light;
  background:linear-gradient(170deg, rgba(143,163,131,.55) 0%, rgba(63,79,56,.30) 100%);
}
.photo img{width:100%; height:100%; object-fit:cover; position:relative; z-index:2;
  filter:saturate(.88) contrast(1.02)}
.photo--md{border-radius:var(--arch-md)}
.photo--hero{aspect-ratio:4/5}
.photo--wide{aspect-ratio:5/4}
/* Placeholder diseñado: queda visible solo si la imagen no carga */
.photo-fallback{
  position:absolute; inset:0; z-index:1; display:grid; place-content:center;
  gap:.8rem; padding:2.5rem; text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%, #E9EEDF 0%, #DDE4D3 55%, #CBD6BE 100%);
}
.photo-fallback span{
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage);
}
.photo-fallback p{
  font-family:var(--display); font-size:1rem; line-height:1.4; color:var(--sage-deep);
  max-width:26ch; margin:0 auto;
}

/* ---------- franja de ocupación (dato real, no adorno) ---------- */
.occupancy{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1rem 1.6rem; padding:1.15rem 1.6rem; background:var(--cream-deep);
  border-radius:999px; width:fit-content; margin-inline:auto;
}
.occupancy-label{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage-deep); font-weight:700}
.occupancy-dots{display:flex; gap:.45rem}
.occupancy-dots i{width:11px; height:11px; border-radius:50%; background:var(--sage-deep); display:block}
.occupancy-dots i.is-free{background:transparent; border:1.5px solid var(--edge)}
.occupancy-note{font-size:.85rem; color:var(--muted)}

/* ---------- problema / solución ---------- */
.split{display:grid; gap:var(--gap); align-items:start}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,6rem)}}
.panel-problem h2{color:var(--ink)}
.panel-solution{
  background:var(--sage-soft); border-radius:26px;
  padding:clamp(2rem,4vw,3.2rem);
}
.panel-solution h2{margin-bottom:1.2rem}
.rule{width:38px; height:2px; background:var(--forest); margin:0 0 1.6rem}

/* ---------- propuesta de valor ---------- */
.cards{display:grid; gap:1.5rem; margin-top:clamp(2.5rem,5vw,4rem)}
@media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:clamp(1.8rem,3vw,2.4rem); display:flex; flex-direction:column;
}
.card-mark{
  width:52px; height:52px; border-radius:var(--arch-sm); background:var(--sage-soft);
  display:grid; place-items:center; margin-bottom:1.6rem;
}
.card-mark svg{width:26px; height:26px; stroke:var(--sage-deep); fill:none; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round}
.card h3{margin-bottom:.85rem}
.card p{color:var(--muted); font-size:.98rem; margin:0}

/* ---------- firma: el parte del día ---------- */
.report{background:var(--sage-deep); color:var(--cream-deep)}
.report h2{color:var(--cream)}
.report .eyebrow{color:var(--sage-light)}
.report .eyebrow::before{background:var(--sage-light)}
.report .lead{color:rgba(243,238,226,.78)}
.report-grid{display:grid; gap:var(--gap); align-items:center}
@media(min-width:900px){.report-grid{grid-template-columns:1fr 1fr}}
.report-copy p{color:rgba(243,238,226,.78)}
/* Sobre fondo verde oscuro, --forest es invisible: se invierte a salvia claro. */
.report .rule{background:var(--sage-mid)}
.report a:focus-visible,.report button:focus-visible{outline-color:var(--sage-mid)}

.thread{
  max-width:380px; margin-inline:auto; width:100%;
  background:var(--cream); border-radius:30px; padding:1.5rem 1.2rem;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.55);
}
.thread-head{
  display:flex; align-items:center; gap:.7rem; padding-bottom:1rem;
  border-bottom:1px solid var(--line); margin-bottom:1.2rem;
}
.thread-avatar{width:38px; height:38px; flex:none; border-radius:50%}
.thread-name{font-size:.9rem; font-weight:700; color:var(--ink); line-height:1.2}
.thread-status{font-size:.72rem; color:var(--sage)}
.msg{
  background:var(--sage-soft); color:var(--ink); border-radius:16px 16px 16px 4px;
  padding:.75rem .95rem; font-size:.92rem; line-height:1.5; margin-bottom:.7rem;
  max-width:90%; opacity:0; transform:translateY(10px);
}
.msg time{display:block; font-size:.68rem; color:var(--muted); margin-top:.35rem; letter-spacing:.04em}
.msg--photo{padding:.45rem .45rem .75rem; max-width:74%}
.msg--photo .photo{border-radius:12px; box-shadow:none; aspect-ratio:4/3; margin-bottom:.55rem}
.msg--photo .photo-fallback{padding:1rem}
.msg--photo .photo-fallback p{font-size:.78rem}
.msg-caption{padding-inline:.5rem}
.thread.is-live .msg{animation:msgIn .5s cubic-bezier(.22,1,.36,1) forwards}
.thread.is-live .msg:nth-child(1){animation-delay:.05s}
.thread.is-live .msg:nth-child(2){animation-delay:.35s}
.thread.is-live .msg:nth-child(3){animation-delay:.7s}
.thread.is-live .msg:nth-child(4){animation-delay:1.05s}
.thread.is-live .msg:nth-child(5){animation-delay:1.4s}
@keyframes msgIn{to{opacity:1; transform:none}}

/* ---------- testimonios ---------- */
.quotes{display:grid; gap:1.5rem; margin-top:clamp(2.5rem,5vw,4rem)}
@media(min-width:820px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{
  border-top:2px solid var(--sage-soft); padding-top:1.9rem;
  display:flex; flex-direction:column;
}
.quote blockquote{
  margin:0 0 1.6rem; font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem,.95rem + .4vw,1.24rem); line-height:1.5; color:var(--sage-deep);
}
.quote-by{display:flex; align-items:center; gap:.85rem; margin-top:auto}
.quote-initial{
  width:38px; height:38px; flex:none; border-radius:var(--arch-sm); background:var(--cream-deep);
  display:grid; place-items:center; font-family:var(--display); color:var(--sage-deep); font-size:1rem;
}
.quote-name{font-size:.92rem; font-weight:700; line-height:1.3}
.quote-meta{font-size:.8rem; color:var(--muted)}

/* ---------- cierre ---------- */
.closing{background:var(--cream-deep)}
.closing-inner{text-align:center; max-width:56ch; margin-inline:auto}
.closing h2{margin-bottom:1.3rem}
.closing .lead{margin-bottom:2.4rem}
.closing-actions{display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center}
.gift{
  margin-top:2.6rem; display:inline-flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem 1.4rem; font-size:.85rem; color:var(--muted);
}
.gift b{color:var(--sage-deep); font-weight:700}

/* ---------- footer ---------- */
.site-footer{background:var(--sage-deep); color:rgba(243,238,226,.72); padding-block:clamp(3.5rem,6vw,5rem) 2rem}
.footer-grid{display:grid; gap:2.5rem}
@media(min-width:760px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
.site-footer h3{color:var(--cream); font-size:1.05rem; margin-bottom:1rem}
.site-footer .brand-name{color:var(--cream); font-size:1.3rem}
.site-footer .brand-logo{width:auto; height:62px; background:var(--cream); border-radius:999px; padding:.5rem .85rem}
.site-footer p{font-size:.92rem; line-height:1.7}
.site-footer a{text-decoration:none; transition:color .2s ease}
.site-footer a:hover{color:var(--cream)}
.footer-list{list-style:none; margin:0; padding:0; font-size:.92rem}
.footer-list li{margin-bottom:.6rem}

/* mapa: toda la tarjeta es un enlace, un clic abre Google Maps */
.footer-map{
  position:relative; display:block; margin-top:1.1rem;
  aspect-ratio:16/10; border-radius:18px; overflow:hidden;
  background:var(--sage-deep); border:1px solid rgba(243,238,226,.18);
  box-shadow:0 18px 34px -22px rgba(0,0,0,.7);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.footer-map iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:grayscale(.4) contrast(.95) brightness(.98);
  pointer-events:none; /* el clic lo recibe el enlace, no el iframe */
}
.footer-map::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(26,38,21,.55) 0%, rgba(26,38,21,.08) 45%, transparent 75%);
}
.footer-map:hover{transform:translateY(-2px); border-color:rgba(243,238,226,.42); box-shadow:0 22px 40px -20px rgba(0,0,0,.75)}
.footer-map:focus-visible{outline:2px solid var(--sage-mid); outline-offset:3px}
.footer-map .map-cta{
  position:absolute; left:.7rem; bottom:.7rem; z-index:1;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .8rem; border-radius:999px;
  background:var(--cream); color:var(--forest);
  font-size:.76rem; font-weight:700; letter-spacing:.02em;
}
.footer-map .map-cta svg{width:14px; height:14px; fill:currentColor}

.footer-bottom{
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.6rem; border-top:1px solid rgba(221,228,211,.18);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; font-size:.78rem;
}

/* ---------- dock flotante: asistente IA + WhatsApp ---------- */
.dock{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:80;
  display:flex; flex-direction:column; align-items:flex-end; gap:.85rem;
}
.dock-actions{display:flex; align-items:center; gap:.7rem}
.dock-btn{
  width:56px; height:56px; flex:none; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center; position:relative;
  box-shadow:0 14px 30px -12px rgba(35,44,29,.6);
  transition:transform .25s ease, background-color .25s ease;
}
.dock-btn:hover{transform:scale(1.06)}
.dock-btn svg{width:27px; height:27px; fill:currentColor}
.dock-btn--wa{background:var(--forest); color:var(--cream); text-decoration:none}
.dock-btn--wa:hover{background:var(--forest-deep)}
.dock-btn--chat{background:var(--cream); color:var(--sage-deep); border:1px solid var(--sage-soft)}
.dock-btn--chat:hover{background:#fff}
.dock-btn--chat svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.dock-badge{
  position:absolute; top:-2px; right:-2px; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--forest); color:var(--cream);
  font-size:.66rem; font-weight:700; line-height:19px; text-align:center;
  border:2px solid var(--cream);
}
.chat.is-open ~ .dock-actions .dock-badge{display:none}

/* ---------- widget de chat ---------- */
.chat{
  width:min(372px, calc(100vw - 2rem));
  max-height:min(560px, calc(100vh - 9rem));
  background:var(--cream); border:1px solid var(--line); border-radius:24px;
  box-shadow:0 34px 70px -30px rgba(26,38,21,.55);
  display:flex; flex-direction:column; overflow:hidden;
  transform-origin:bottom right;
  opacity:0; transform:translateY(14px) scale(.96); pointer-events:none;
  transition:opacity .28s ease, transform .38s cubic-bezier(.22,1,.36,1);
}
.chat.is-open{opacity:1; transform:none; pointer-events:auto}

.chat-head{
  display:flex; align-items:center; gap:.75rem; padding:.95rem 1.1rem;
  background:var(--sage-deep); color:var(--cream); flex:none;
}
.chat-avatar{width:40px; height:40px; flex:none; border-radius:50%}
.chat-title{font-family:var(--display); font-size:1.02rem; line-height:1.2; color:var(--cream)}
.chat-status{
  display:flex; align-items:center; gap:.4rem; margin-top:.2rem;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage-light);
}
.chat-status::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--sage-mid)}
.chat-close{
  margin-left:auto; width:32px; height:32px; flex:none; border-radius:50%;
  border:none; background:transparent; color:rgba(243,238,226,.7); cursor:pointer;
  display:grid; place-items:center; transition:background-color .2s ease, color .2s ease;
}
.chat-close:hover{background:rgba(243,238,226,.12); color:var(--cream)}
.chat-close svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}

.chat-body{
  padding:1.15rem; overflow-y:auto; display:flex; flex-direction:column; gap:.55rem;
  scrollbar-width:thin; scrollbar-color:var(--sage-soft) transparent;
}
.chat-body::-webkit-scrollbar{width:6px}
.chat-body::-webkit-scrollbar-thumb{background:var(--sage-soft); border-radius:99px}

.chat-msg{
  max-width:88%; padding:.7rem .9rem; font-size:.9rem; line-height:1.55;
  animation:chatIn .35s cubic-bezier(.22,1,.36,1) both;
}
.chat-msg--bot{background:var(--sage-soft); color:var(--ink); border-radius:16px 16px 16px 4px; align-self:flex-start}
.chat-msg--user{background:var(--forest); color:var(--cream-deep); border-radius:16px 16px 4px 16px; align-self:flex-end; max-width:80%}
@keyframes chatIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

.chat-typing{display:flex; gap:4px; align-items:center; padding:.85rem .9rem}
.chat-typing i{width:6px; height:6px; border-radius:50%; background:var(--sage); display:block; animation:blink 1.2s infinite}
.chat-typing i:nth-child(2){animation-delay:.18s}
.chat-typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.28; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}

.chat-chips{display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1.15rem .95rem}
.chip{
  border:1px solid var(--edge); background:transparent; color:var(--sage-deep);
  border-radius:999px; padding:.44rem .85rem; font:inherit; font-size:.79rem; line-height:1.2;
  cursor:pointer; transition:background-color .2s ease, color .2s ease;
}
.chip:hover{background:var(--sage-soft)}

.chat-foot{
  display:flex; align-items:center; gap:.5rem; padding:.6rem .65rem .6rem 1rem;
  border-top:1px solid var(--line); background:#fff; flex:none;
}
.chat-input{flex:1; min-width:0; border:none; background:transparent; font:inherit; font-size:.88rem; color:var(--ink); padding:.45rem 0}
.chat-input::placeholder{color:var(--muted)}
.chat-input:focus{outline:none}
.chat-send{
  width:38px; height:38px; flex:none; border-radius:50%; border:none; cursor:pointer;
  background:var(--forest); color:var(--cream); display:grid; place-items:center;
  transition:background-color .2s ease;
}
.chat-send:hover{background:var(--forest-deep)}
.chat-send svg{width:16px; height:16px; fill:currentColor}
.chat-note{
  flex:none; padding:.55rem 1rem .75rem; background:#fff; text-align:center;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  border-top:1px solid var(--line);
}

@media(max-width:420px){
  .chat{max-height:calc(100vh - 8rem)}
  .chat-head{padding:.8rem .9rem}
  .chat-body{padding:1rem}
}


/* ============================================================
   MOVIMIENTO
   Regla de la casa: el movimiento acompana la lectura, nunca la
   interrumpe. Todo entra desde abajo, corto (14-22px) y una sola
   vez. Nada rebota, nada gira, nada se repite en bucle.
   ============================================================ */

/* ---------- entrada al hacer scroll ---------- */
.js .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease-soft) var(--d,0s),
             transform .7s var(--ease-out) var(--d,0s);
}
.js .reveal.is-in{opacity:1; transform:none}

/* Escalonado: las tarjetas y las citas cruzan el umbral a la vez por
   estar en la misma fila. Sin este retardo entrarian de golpe, como un
   bloque; con el, se leen de izquierda a derecha. */
.cards  > .reveal:nth-child(2),
.quotes > .reveal:nth-child(2){--d:.10s}
.cards  > .reveal:nth-child(3),
.quotes > .reveal:nth-child(3){--d:.20s}

/* El panel de la respuesta entra despues del problema: primero el nudo,
   luego el alivio. El orden importa para el argumento. */
.split > .panel-solution.reveal{--d:.14s}

/* Las fotos suman un acercamiento minimo. Da sensacion de material,
   no de imagen pegada. */
.js .reveal .photo img{transform:scale(1.035); transition:transform 1.1s var(--ease-out) var(--d,0s)}
.reveal.is-in .photo img{transform:none}

/* La linea del eyebrow se dibuja sola. Solo dentro de bloques .reveal:
   fuera de ellos nunca recibe .is-in y debe quedarse visible. */
.js .reveal .eyebrow::before{transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-out) calc(var(--d,0s) + .18s)}
.reveal.is-in .eyebrow::before{transform:scaleX(1)}

/* Los puntos de ocupacion se llenan en secuencia, como contando lugares. */
.js .reveal .occupancy-dots i{transform:scale(0); transition:transform .42s var(--ease-out)}
.reveal.is-in .occupancy-dots i{transform:scale(1)}
.reveal.is-in .occupancy-dots i:nth-child(1){transition-delay:.22s}
.reveal.is-in .occupancy-dots i:nth-child(2){transition-delay:.28s}
.reveal.is-in .occupancy-dots i:nth-child(3){transition-delay:.34s}
.reveal.is-in .occupancy-dots i:nth-child(4){transition-delay:.40s}
.reveal.is-in .occupancy-dots i:nth-child(5){transition-delay:.46s}
.reveal.is-in .occupancy-dots i:nth-child(6){transition-delay:.52s}
.reveal.is-in .occupancy-dots i:nth-child(7){transition-delay:.58s}
.reveal.is-in .occupancy-dots i:nth-child(8){transition-delay:.64s}

/* ---------- entrada al cargar (solo el hero) ---------- */
/* Condicionado a .js: si el script no corre, el hero se ve completo.
   Nunca dejamos contenido dependiendo de JavaScript para ser visible. */
.js .hero-copy > *,
.js .hero .photo{opacity:0; transform:translateY(18px)}
.js .hero .photo{transform:translateY(18px) scale(.985)}
.js.is-ready .hero-copy > *,
.js.is-ready .hero .photo{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease-soft) var(--d,0s),
             transform .95s var(--ease-out) var(--d,0s);
}
.js .hero-copy > .eyebrow     {--d:.05s}
.js .hero-copy > h1           {--d:.13s}
.js .hero-copy > .lead        {--d:.23s}
.js .hero-copy > .hero-actions{--d:.31s}
.js .hero-copy > .hero-note   {--d:.38s}
.js .hero .photo              {--d:.16s}

/* El dock aparece al final, cuando el hero ya asento. Si entrara junto
   compite con el H1 por la atencion. */
.js .dock{opacity:0; transform:translateY(12px)}
.js.is-ready .dock{opacity:1; transform:none; transition:opacity .6s var(--ease-soft) 1.1s, transform .6s var(--ease-out) 1.1s}

/* Las fotos aparecen cuando terminan de decodificar, no de golpe. */
.photo img{transition:opacity .9s var(--ease-soft)}
.photo img.is-loading{opacity:0}

/* ---------- estados de interaccion ---------- */
/* Las tarjetas eran completamente estaticas: no habia respuesta al puntero. */
.card{transition:transform .35s var(--ease-out), border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft)}
.card:hover{transform:translateY(-4px); border-color:var(--sage-mid); box-shadow:var(--lift)}
.card-mark{transition:background-color .35s var(--ease-soft), transform .35s var(--ease-out)}
.card:hover .card-mark{background:var(--sage-mid); transform:rotate(-3deg)}

.quote{transition:border-top-color .35s var(--ease-soft)}
.quote:hover{border-top-color:var(--sage-mid)}
.quote-initial{transition:background-color .35s var(--ease-soft)}
.quote:hover .quote-initial{background:var(--sage-soft)}

/* Subrayado que crece desde el lado por el que entra el puntero. */
@media(min-width:900px){
  .nav-links a{position:relative}
  .nav-links a::after{
    content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
    background:var(--sage-mid); transform:scaleX(0); transform-origin:right;
    transition:transform .32s var(--ease-out);
  }
  .nav-links a:hover::after{transform:scaleX(1); transform-origin:left}
}

/* El boton se hunde al presionar: confirma el clic antes de que navegue. */
.btn:active{transform:translateY(0) scale(.985)}
.btn--primary:hover{box-shadow:var(--lift)}
.dock-btn:active{transform:scale(.96)}

/* Al fijarse, el header proyecta una sombra minima ademas del borde.
   Separa la barra del contenido sin dibujar una caja. */
.site-header{transition:border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft)}
.site-header.is-stuck{box-shadow:0 10px 30px -26px rgba(35,44,29,.55)}

/* ---------- detalles finos ---------- */
/* El ancla quedaba debajo del header fijo: se perdian 81px de cada seccion. */
[id]{scroll-margin-top:calc(var(--header-h) + 1.5rem)}

/* Seleccion de texto dentro de la paleta, no el azul del sistema. */
::selection{background:var(--sage-soft); color:var(--sage-deep)}

/* Evita lineas huerfanas de una sola palabra al final de los parrafos. */
p,.lead,figcaption{text-wrap:pretty}

/* ---------- accesibilidad de movimiento ---------- */
/* Quien pidio menos movimiento ve la pagina completa y quieta, no una
   version degradada: se neutralizan tambien los estados iniciales. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .reveal,.msg{opacity:1; transform:none}
  .js .hero-copy > *,.js .hero .photo,.js .dock{opacity:1; transform:none}
  .reveal .photo img{transform:none}
  .reveal .eyebrow::before{transform:scaleX(1)}
  .reveal .occupancy-dots i{transform:scale(1)}
  .photo img.is-loading{opacity:1}
  .card:hover,.btn:active,.dock-btn:active{transform:none}
  .chat-typing i{opacity:.6}
}

/* ---------- saltar al contenido ---------- */
/* Sin esto, quien navega con teclado tiene que recorrer toda la navegacion
   en cada carga antes de llegar al texto. Solo se ve al recibir el foco. */
.skip-link{
  position:absolute; left:50%; top:0; transform:translate(-50%,-120%);
  z-index:100; background:var(--forest); color:var(--cream);
  padding:.75rem 1.4rem; border-radius:0 0 12px 12px; text-decoration:none;
  font-size:.85rem; font-weight:700; letter-spacing:.06em;
  transition:transform .2s var(--ease-out);
}
.skip-link:focus-visible{transform:translate(-50%,0); outline-offset:2px}

/* ============================================================
   CALENDARIO DE DISPONIBILIDAD
   Nace con [hidden]. Solo el JavaScript lo revela, y solo si la API
   contesto: un calendario vacio o congelado es peor que ninguno.
   ============================================================ */
.cal-intro{
  max-width:44ch; margin:2.6rem auto 0; text-align:center;
  font-size:.95rem; color:var(--muted);
}
.calendario{
  max-width:24rem; margin:1.4rem auto 2.6rem; text-align:left;
  background:var(--cream); border:1px solid var(--line);
  border-radius:22px; padding:1.3rem 1.4rem 1.1rem;
  box-shadow:var(--lift);
}
/* Dos meses en escritorio. A 24rem centrada en un ancho de 1180 sobraba
   tanto espacio a los lados que la tarjeta se veia pequena; ademas quien
   planea un viaje casi siempre cruza dos meses. */
@media(min-width:860px){
  /* El contenedor .closing-inner limita a 56ch para que el texto se lea,
     pero eso dejaba la tarjeta en 559px con mucho vacio alrededor. Se
     escapa de esa anchura centrandose respecto al padre, que ya esta
     centrado en la pagina. */
  .calendario{
    width:min(44rem, calc(100vw - 4rem));
    max-width:none;
    margin-left:50%;
    transform:translateX(-50%);
    padding:1.5rem 1.8rem 1.2rem;
  }
}

.cal-cabecera{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:1.2rem}
.cal-titulo{
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage); margin:0;
}
.cal-nav{
  width:34px; height:34px; flex:none; border-radius:50%;
  border:1px solid var(--edge); background:transparent; color:var(--sage-deep);
  cursor:pointer; display:grid; place-items:center; font-size:1rem; line-height:1;
  transition:background-color .25s var(--ease-soft), opacity .25s var(--ease-soft);
}
.cal-nav:hover:not(:disabled){background:var(--sage-soft)}
.cal-nav:disabled{opacity:.3; cursor:default}

.cal-meses{display:grid; gap:1.6rem 2.2rem}
@media(min-width:860px){ .cal-meses{grid-template-columns:1fr 1fr} }

.cal-mes{
  font-family:var(--display); font-size:1rem; color:var(--sage-deep);
  margin:0 0 .8rem; text-transform:capitalize; letter-spacing:-.01em;
}
.cal-semana,.cal-rejilla{display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem}
.cal-semana{margin-bottom:.45rem}
.cal-semana span{
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-align:center; font-weight:700;
}
.cal-dia{
  aspect-ratio:1; display:grid; place-items:center; border-radius:9px;
  font-size:.85rem; color:var(--sage-deep); background:transparent;
}
.cal-dia--vacio{visibility:hidden}
/* Cuanto mas oscuro, menos lugar queda. El lleno ademas se tacha, para no
   depender solo del color: hay quien no distingue estos verdes. */
/* Semaforo. Los cuatro colores llevan texto propio con contraste
   verificado (5.8 a 6.8), y el lleno ademas va tachado para no depender
   solo del color. */
.cal-dia--libre{background:var(--sage-soft); color:var(--sage-deep)}
.cal-dia--medio{background:#EFE0AE; color:#5C4A12; font-weight:700}
.cal-dia--pocos{background:#F2D3B3; color:#7A3E12; font-weight:700}
.cal-dia--lleno{background:#F3D9D4; color:#8C2F1D; font-weight:700;
  text-decoration:line-through; text-decoration-thickness:1.5px}
.cal-dia--pasado{opacity:.3}

/* Convierte la rejilla en una respuesta, no solo en un dato. */
.cal-resumen{
  margin:.7rem 0 0; font-size:.78rem; color:var(--muted);
}
.cal-resumen b{color:var(--sage-deep); font-weight:700}

.cal-leyenda{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .9rem;
  margin:1.2rem 0 0; padding-top:.9rem; border-top:1px solid var(--line);
  font-size:.74rem; color:var(--muted);
}
.cal-marca{width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:.25rem; vertical-align:-1px}
.cal-marca--libre{background:var(--sage-soft)}
.cal-marca--medio{background:#EFE0AE}
.cal-marca--pocos{background:#F2D3B3}
.cal-marca--lleno{background:#F3D9D4}

/* ---------- detalle de una noche ---------- */
/* El atributo title solo funciona con raton y tarda un segundo en salir.
   En movil no existe: hay que poder tocar el dia. */
.cal-dia[data-info]:focus-visible{outline:2px solid var(--forest); outline-offset:2px}
/* En escritorio basta el raton. Solo en pantallas tactiles tiene sentido
   tocar, y aun asi no queda "seleccionado": el panel de abajo ya dice de
   que dia habla. */
@media(hover:none){ .cal-dia[data-info]{cursor:pointer} }

.cal-detalle{
  margin:.9rem 0 0; padding:.7rem .85rem; border-radius:12px;
  background:var(--cream-deep); border:1px solid var(--line);
  font-size:.82rem; color:var(--sage-deep); min-height:2.6rem;
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.cal-detalle b{font-weight:700}
.cal-detalle.agotado{background:#F3D9D4; border-color:#E3BDB5; color:#8C2F1D}
.cal-detalle .apagado{color:var(--muted)}
.cal-detalle-lugares{
  display:inline-flex; gap:.2rem; margin-left:auto;
}
.cal-detalle-lugares i{
  width:9px; height:9px; border-radius:50%; background:var(--sage-deep); display:block;
}
.cal-detalle-lugares i.libre{background:transparent; border:1.5px solid var(--edge)}