/* Guardería Leloir · sitio.css
   Mobile first. Tokens en :root; modo oscuro con prefers-color-scheme.
   Animaciones: solo transform/opacity/clip-path. Todo se apaga con prefers-reduced-motion. */

:root{
  --bg:#F5F3EA; --surface:#FFFDF7; --sage:#E4ECDB; --ink:#15241B; --muted:#4A5A4F;
  --forest:#1E4630; --primary:#2D6A45; --grass:#4F8A3F; --clay:#B4492A; --ball:#D9F05A;
  --line:#C9D3C2; --border-ui:#7A8A7E; --on-primary:#FFFDF7;
  --step--1:clamp(.83rem,.80rem + .15vw,.9rem); --step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --step-1:clamp(1.2rem,1.12rem + .38vw,1.42rem); --step-2:clamp(1.44rem,1.3rem + .65vw,1.8rem);
  --step-3:clamp(1.85rem,1.5rem + 1.6vw,2.9rem); --display:clamp(2.6rem,1.6rem + 5vw,5.6rem);
  --space-s:clamp(.75rem,.7rem + .25vw,1rem); --space-m:clamp(1.25rem,1.1rem + .6vw,1.75rem); --space-l:clamp(3.5rem,2.6rem + 3.5vw,6.5rem);
  --radius:18px; --radius-lg:28px; --gutter:16px;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --barra:64px; color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1812; --surface:#15231A; --sage:#1C2E22; --ink:#ECF1E6; --muted:#A9B8AC; --forest:#0A120D;
    --primary:#86C77A; --grass:#6FAE5E; --clay:#E8886A; --line:#2C4033; --border-ui:#5E7364; --on-primary:#0E1812;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1812; --surface:#15231A; --sage:#1C2E22; --ink:#ECF1E6; --muted:#A9B8AC; --forest:#0A120D;
  --primary:#86C77A; --grass:#6FAE5E; --clay:#E8886A; --line:#2C4033; --border-ui:#5E7364; --on-primary:#0E1812;
}
@media (min-width:600px){ :root{ --gutter:28px } }
@media (min-width:1100px){ :root{ --gutter:48px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; interpolate-size:allow-keywords }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 var(--step-0)/1.6 var(--sans); overflow-x:hidden;
  padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom)); -webkit-font-smoothing:antialiased }
@media (min-width:900px){ body{ padding-bottom:0 } }
img,video,svg,picture{ display:block; max-width:100% }
img,video{ height:auto }
a{ color:var(--primary); text-underline-offset:.18em }
button{ font:inherit; color:inherit; cursor:pointer }
h1,h2,h3{ margin:0; text-wrap:balance }
p{ margin:0 0 1em; text-wrap:pretty }
:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:6px }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:absolute; left:8px; top:-60px; z-index:100; background:var(--ink); color:var(--surface); padding:.6em 1em; border-radius:10px }
.skip:focus{ top:8px }
svg use{ pointer-events:none }

/* ---------- Tipografía ---------- */
.display{ font:600 var(--display)/1.02 var(--serif); font-variation-settings:"SOFT" 100,"opsz" 144; letter-spacing:-.025em }
.display em,.h2 em{ font-style:italic; font-weight:400; color:var(--primary) }
.display--chico{ font-size:clamp(2.1rem,1.4rem + 3.4vw,4rem) }
.h2{ font:500 var(--step-3)/1.08 var(--serif); font-variation-settings:"SOFT" 80,"opsz" 96; letter-spacing:-.015em; margin-bottom:.5em; max-width:22ch }
.h2.centrado{ margin-inline:auto }
h3{ font:700 var(--step-1)/1.25 var(--sans) }
.eyebrow{ font:700 var(--step--1)/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--primary); margin-bottom:.9rem; display:flex; align-items:center; gap:.6em }
.eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px }
.eyebrow--claro{ color:var(--ball) }
.lead{ font-size:var(--step-1); color:var(--muted); max-width:34ch }
.sub{ color:var(--muted); max-width:46ch }
.centrado{ text-align:center; margin-inline:auto }
.nota{ font-size:var(--step--1); color:var(--muted) }
.tag-confirmar{ display:inline-block; font:700 .7rem/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--clay);
  border:1.5px solid currentColor; border-radius:99px; padding:.32em .6em; vertical-align:.15em; white-space:nowrap }

/* ---------- Layout ---------- */
.contenedor{ width:min(1200px,100%); margin-inline:auto; padding-inline:var(--gutter) }
.seccion{ padding-block:var(--space-l); position:relative }
.seccion--sage{ background:var(--sage) }
.seccion--crema{ background:var(--surface) }
.seccion--bosque{ background:var(--forest); color:#ECF1E6 }
.seccion--bosque .h2{ color:#FFFDF7 }
.seccion--bosque .h2 em{ color:var(--ball) }
.seccion--sinpad{ padding-bottom:calc(var(--space-l) * .8) }

/* ---------- Botones ---------- */
.btn{ --h:52px; display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:var(--h); padding:0 1.35em; border-radius:99px;
  font:600 1rem/1 var(--sans); letter-spacing:.01em; text-decoration:none; border:2px solid transparent; position:relative; isolation:isolate;
  transition:transform .25s var(--ease-out), background-color .25s, color .25s, box-shadow .25s }
.btn svg{ width:22px; height:22px; flex:none }
.btn:active{ transform:scale(.96) }
.btn--wa{ background:var(--primary); color:var(--on-primary); box-shadow:0 10px 24px -12px rgb(30 70 48 / .7) }
.btn--wa:hover{ background:var(--forest) }
.btn--linea{ border-color:var(--primary); color:var(--primary) }
.btn--linea:hover{ background:var(--primary); color:var(--on-primary) }
.btn--claro{ background:#FFFDF7; color:#15241B }
.btn--pelota{ background:var(--ball); color:#15241B; --h:58px; font-size:1.1rem }
.btn--chico{ --h:42px; padding:0 1em; font-size:.92rem }
.cola{ position:absolute; right:-12px; top:-6px; width:20px; height:24px; z-index:-1; color:var(--primary); transform-origin:3px 90%; transform:rotate(-10deg) }
.btn:is(:hover,:focus-visible) .cola, .barra__wa:is(:hover,:focus-visible) .cola{ animation:wag .24s ease-in-out infinite alternate }
.is-wag .cola{ animation:wag .14s ease-in-out 6 alternate }
@keyframes wag{ from{ transform:rotate(-18deg) } to{ transform:rotate(16deg) } }
.link{ display:inline-flex; align-items:center; gap:.4em; font-weight:600; text-decoration:none }
.link svg{ width:18px; height:18px; transition:transform .25s var(--ease-out) }
.link:hover svg{ transform:translateX(4px) }
.link--claro{ color:var(--ball) }

/* ---------- DEMO ---------- */
.demo{ position:fixed; z-index:60; left:10px; top:10px; display:flex; align-items:center; gap:.6em; max-width:calc(100vw - 20px);
  background:var(--ink); color:var(--surface); border:0; border-radius:99px; padding:5px; text-align:left; font-size:.78rem; line-height:1.3;
  box-shadow:0 8px 20px -10px rgb(0 0 0 / .5) }
.demo__pill{ background:var(--ball); color:#15241B; font-weight:800; letter-spacing:.1em; border-radius:99px; padding:.35em .7em }
.demo__txt{ display:none; padding-right:.7em }
.demo[aria-expanded="true"]{ border-radius:16px }
.demo[aria-expanded="true"] .demo__txt{ display:block }
@media (min-width:900px){ .demo{ top:auto; bottom:14px; left:14px } }

/* ---------- Header ---------- */
.top{ position:absolute; z-index:40; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:54px var(--gutter) 0; }
.marca{ font:600 1.3rem/1 var(--serif); font-variation-settings:"SOFT" 100,"opsz" 48; color:var(--ink); text-decoration:none; letter-spacing:-.01em }
.marca__i{ position:relative; display:inline-block }
.marca__pelota{ position:absolute; width:.5em; height:.5em; left:50%; top:-.42em; translate:-50% 0 }
.nav{ display:none }
.top__wa{ display:none }
@media (min-width:900px){
  .top{ position:fixed; padding:14px var(--gutter); transition:transform .4s var(--ease-out), background-color .3s, box-shadow .3s }
  .top.is-solida{ background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line) }
  .top.is-oculta{ transform:translateY(-110%) }
  .nav{ display:flex; gap:clamp(.8rem,1.6vw,1.8rem) }
  .nav a{ color:var(--ink); text-decoration:none; font-weight:500; font-size:.95rem; position:relative }
  .nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--grass); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out) }
  .nav a:hover::after{ transform:scaleX(1) }
  .top__wa{ display:inline-flex }
}

/* ---------- Hero ---------- */
.hero{ display:grid; padding:96px var(--gutter) 2.5rem; gap:1.8rem; max-width:1300px; margin-inline:auto }
.hero__media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/4.4; background:var(--sage); box-shadow:0 30px 60px -36px rgb(21 36 27 / .6) }
.hero__media picture,.hero__media img,.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero__img img{ object-position:50% 35% }
.hero__video{ opacity:0; transition:opacity 1.2s ease }
.hero__video.is-listo{ opacity:1 }
.hero__sello{ position:absolute; right:14px; bottom:14px; width:84px; height:84px; border-radius:50%; background:var(--ball); color:#15241B;
  display:grid; place-content:center; text-align:center; font:600 .7rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; rotate:-8deg;
  box-shadow:0 10px 20px -10px rgb(0 0 0 / .5) }
.hero__sello b{ display:block; font:600 1.45rem/1 var(--serif); letter-spacing:0; margin-top:3px }
.hero__txt .display > span{ display:block }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:.8rem 1rem; margin:1.6rem 0 1.4rem }
.confianza{ display:inline-flex; align-items:center; gap:.6rem; flex-wrap:wrap; color:var(--muted); text-decoration:none; font-size:var(--step--1) }
.confianza b{ color:var(--ink) }
.estrellas{ display:inline-flex; gap:2px; color:#E2A93B }
.estrellas svg{ width:16px; height:16px }
@media (min-width:900px){
  .hero{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; padding-top:110px; min-height:min(100svh,900px); gap:4rem }
  .hero__txt{ order:-1 }
  .hero__media{ aspect-ratio:4/4.9 }
  .hero__sello{ width:110px; height:110px; right:-10px; bottom:30px }
}

/* ---------- Pasto ---------- */
.pasto{ height:48px; margin-top:-48px; position:relative; z-index:2; pointer-events:none; overflow:hidden }
.pasto svg{ width:calc(100% + 60px); max-width:none; height:100%; margin-left:-30px }
.pasto path{ transform-box:fill-box; transform-origin:50% 100% }
.pasto .p1{ fill:var(--pasto-base) } .pasto .p2{ fill:var(--primary) } .pasto .p3{ fill:var(--grass) }
@media (min-width:900px){ .pasto{ height:72px; margin-top:-72px } }
@supports (animation-timeline:view()){
  .pasto .p1{ animation:viento linear both; animation-timeline:view() }
  .pasto .p2{ animation:viento2 linear both; animation-timeline:view() }
  .pasto .p3{ animation:viento linear both reverse; animation-timeline:view() }
}
@supports not (animation-timeline:view()){
  .pasto.is-visible .p2{ animation:vaiven 3.4s ease-in-out infinite alternate }
  .pasto.is-visible .p3{ animation:vaiven 4.2s ease-in-out infinite alternate-reverse }
}
@keyframes viento{ from{ transform:skewX(-9deg) } to{ transform:skewX(7deg) } }
@keyframes viento2{ from{ transform:skewX(6deg) } to{ transform:skewX(-6deg) } }
@keyframes vaiven{ from{ transform:skewX(-5deg) } to{ transform:skewX(5deg) } }
/* el bloque que sigue al pasto toma su color de fondo */
.pasto + .seccion--sage{ border-top:0 }

/* ---------- Pilares ---------- */
.pilares{ list-style:none; padding:0; margin:2.2rem 0 0; display:grid; gap:1rem }
.pilar{ background:var(--surface); border-radius:var(--radius); padding:1.6rem 1.4rem; text-align:center }
.pilar__ico{ width:64px; height:64px; margin:0 auto .9rem; color:var(--primary) }
.pilar h3{ font:500 var(--step-2)/1.1 var(--serif); margin-bottom:.4rem }
.pilar p{ color:var(--muted); margin:0 }
@media (min-width:760px){ .pilares{ grid-template-columns:repeat(3,1fr); gap:1.4rem } }

/* ---------- Servicios ---------- */
.servicios{ list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:.9rem }
.serv{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.3rem 1.2rem; display:grid; grid-template-columns:56px 1fr; gap:.2rem 1rem;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out) }
.serv h3,.serv p{ grid-column:2 }
.serv p{ color:var(--muted); margin:0; font-size:.98rem }
.serv__ico{ grid-row:1 / span 2; position:relative; width:56px; height:56px; border-radius:16px; background:var(--sage); color:var(--primary) }
.serv__cabeza{ position:absolute; inset:4px; width:48px; height:48px }
.serv__extra{ position:absolute; right:-6px; top:-6px; width:26px; height:26px; padding:4px; border-radius:50%; background:var(--ball); color:#15241B }
.ear{ transform-box:fill-box; transition:transform .26s var(--ease-spring) }
.ear-l{ transform-origin:100% 100% } .ear-r{ transform-origin:0 100% }
.serv.is-in .ear-l, .serv:hover .ear-l{ transform:rotate(-16deg) }
.serv.is-in .ear-r, .serv:hover .ear-r{ transform:rotate(16deg) }
.serv--a_confirmar{ border-style:dashed }
@media (min-width:700px){ .servicios{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .servicios{ grid-template-columns:repeat(4,1fr) } .serv{ grid-template-columns:1fr; padding:1.5rem } .serv h3,.serv p{ grid-column:1 } .serv__ico{ grid-row:auto; margin-bottom:.8rem } }
@media (hover:hover){ .serv:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -18px rgb(21 36 27 / .35) } }

/* ---------- Un día ---------- */
.dia{ display:grid; gap:2rem }
.dia__video{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; max-width:340px; margin-top:1.2rem; display:none }
.dia__video video{ width:100%; height:100%; object-fit:cover }
.linea{ list-style:none; margin:0; padding:0 0 0 38px; position:relative; display:grid; gap:1.4rem }
.linea::before{ content:""; position:absolute; left:13px; top:8px; bottom:8px; width:2px; background:repeating-linear-gradient(var(--line) 0 6px, transparent 6px 12px) }
.linea__pelota{ position:absolute; left:2px; top:0; width:24px; height:24px; z-index:2; transition:top .5s cubic-bezier(.5,0,.75,0) }
.linea__pelota svg{ width:100%; height:100%; transform-origin:50% 100% }
.hito{ position:relative }
.hito::before{ content:""; position:absolute; left:-30px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--surface); border:2px solid var(--grass) }
.hito__hora{ font:700 var(--step--1)/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--primary); margin:0 0 .5rem }
.hito__card{ display:grid; grid-template-columns:34% 1fr; gap:1rem; background:var(--bg); border-radius:var(--radius); padding:.7rem; align-items:center }
.hito__foto img{ aspect-ratio:1; object-fit:cover; border-radius:12px; width:100% }
.hito h3{ font-size:1.06rem; margin-bottom:.25rem }
.hito p{ font-size:.94rem; color:var(--muted); margin:0 }
.hito__frase{ font:italic 400 .95rem/1.3 var(--serif)!important; color:var(--clay)!important; margin-top:.4rem!important }
@media (min-width:900px){
  .dia{ grid-template-columns:.8fr 1.2fr; gap:4rem; align-items:start }
  .dia__intro{ position:sticky; top:110px }
  .dia__video{ display:block }
  .hito__card{ grid-template-columns:180px 1fr; padding:.9rem; gap:1.4rem }
}

/* ---------- Mosaico del lugar ---------- */
.mosaico{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:2rem }
.mos{ margin:0; position:relative; border-radius:var(--radius); overflow:hidden; background:#0A120D }
.mos img,.mos video{ width:100%; height:100%; object-fit:cover; aspect-ratio:1; transition:transform 1.2s var(--ease-out) }
.mos--a{ grid-column:1 / -1 } .mos--a img{ aspect-ratio:4/3 }
.mos figcaption{ position:absolute; inset:auto 0 0; padding:2.2rem .9rem .8rem; font-size:.86rem; font-weight:600; color:#FFFDF7;
  background:linear-gradient(to top, rgb(10 18 13 / .8), transparent) }
@media (hover:hover){ .mos:hover img{ transform:scale(1.05) } }
@media (min-width:900px){
  .mosaico{ grid-template-columns:1.7fr .8fr 1fr 1fr; grid-template-rows:240px 240px; gap:14px;
    grid-template-areas:"a f b c" "a f d e" }
  .mos img,.mos video{ aspect-ratio:auto }
  .mos--a{ grid-area:a } .mos--a img{ aspect-ratio:auto } .mos--b{ grid-area:b } .mos--c{ grid-area:c }
  .mos--d{ grid-area:d } .mos--e{ grid-area:e } .mos--f{ grid-area:f }
}

/* ---------- Nosotros ---------- */
.nos{ display:grid; gap:2.4rem }
.nos__fotos{ position:relative; padding:0 18% 14% 0 }
.nos__f1 img{ border-radius:var(--radius-lg); aspect-ratio:4/5; object-fit:cover; width:100% }
.nos__f2{ position:absolute; right:0; bottom:0; width:44%; z-index:2 }
.nos__f2 img{ border-radius:var(--radius); border:6px solid var(--bg); aspect-ratio:1; object-fit:cover; rotate:4deg; box-shadow:0 20px 40px -24px rgb(0 0 0 / .5) }
.nos__txt > p{ color:var(--muted); max-width:52ch }
.pasos{ list-style:none; padding:0; margin:1.8rem 0 0; display:grid; gap:.9rem; counter-reset:p }
.pasos li{ display:grid; grid-template-columns:42px 1fr; gap:.9rem; align-items:start }
.pasos b{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--ball); color:#15241B; font:600 1.15rem/1 var(--serif) }
.pasos h3{ font-size:1.02rem; margin:.15rem 0 .15rem }
.pasos p{ margin:0; color:var(--muted); font-size:.95rem }
@media (min-width:900px){ .nos{ grid-template-columns:.9fr 1.1fr; gap:5rem; align-items:center } .pasos{ grid-template-columns:1fr 1fr; gap:1.2rem 1.6rem } }

/* ---------- Reseñas / carrusel ---------- */
.res__cabeza{ display:grid; gap:1.2rem; align-items:end }
.contador{ display:flex; align-items:center; gap:1rem; text-decoration:none; color:var(--ink); background:var(--surface); border-radius:var(--radius); padding:.9rem 1.2rem; justify-self:start }
.contador__num{ font:600 3.2rem/1 var(--serif); font-variant-numeric:tabular-nums; position:relative }
.contador__num::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:6px; background:var(--ball); border-radius:3px; z-index:-1; transform:scaleX(var(--sub,1)); transform-origin:left; transition:transform .5s var(--ease-out) .9s }
.contador__lado{ display:grid; gap:.3rem; font-size:.9rem; color:var(--muted) }
.estrellas--llenar{ clip-path:inset(0 var(--fill,0%) 0 0); transition:clip-path .9s var(--ease-out) .15s }
@media (min-width:900px){ .res__cabeza{ grid-template-columns:1fr auto } }

.carrusel{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:1.8rem var(--gutter) .6rem; scroll-padding-inline:var(--gutter);
  scrollbar-width:none; overscroll-behavior-x:contain }
.carrusel::-webkit-scrollbar{ display:none }
.carrusel > *{ scroll-snap-align:start; flex:0 0 auto }
@media (min-width:1300px){ .carrusel{ padding-inline:calc((100vw - 1200px) / 2 + var(--gutter)); scroll-padding-inline:calc((100vw - 1200px) / 2 + var(--gutter)) } }
.resena{ width:min(82vw,380px); margin:0; background:var(--surface); border-radius:var(--radius); padding:1.5rem 1.4rem 1.3rem; display:flex; flex-direction:column; gap:.8rem }
.resena__comillas{ width:34px; height:26px; color:var(--grass) }
.resena blockquote{ margin:0; font:400 1.12rem/1.42 var(--serif); font-variation-settings:"SOFT" 100; flex:1 }
.resena blockquote p{ margin:0 }
.resena figcaption{ font-size:.9rem; color:var(--muted) }
.resena figcaption b{ color:var(--ink) }
.resena figcaption span{ display:block; font-size:.8rem; margin-top:.15rem }
.carrusel__pie{ display:flex; align-items:center; justify-content:space-between; gap:1.4rem; margin-top:1rem }
.progreso{ flex:1; max-width:280px; height:3px; background:var(--line); border-radius:3px; overflow:hidden }
.progreso span{ display:block; height:100%; width:100%; background:var(--grass); transform-origin:left; transform:scaleX(var(--p,.1)) }
.progreso--claro{ background:rgb(255 255 255 / .15) } .progreso--claro span{ background:var(--ball) }

/* ---------- Prensa ---------- */
.prensa{ display:grid; gap:1rem; margin:2rem 0 1.2rem }
.nota-prensa{ display:grid; gap:.7rem; padding:1.6rem 1.5rem; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s }
.nota-prensa__medio{ font:800 .8rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--primary) }
.nota-prensa__titulo{ font:500 var(--step-2)/1.15 var(--serif); font-variation-settings:"SOFT" 60 }
.nota-prensa__res{ color:var(--muted) }
.nota-prensa__pie{ display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--muted) }
.nota-prensa__pie svg{ width:18px; height:18px; margin-left:auto; color:var(--primary); transition:transform .3s var(--ease-out) }
.nota-prensa:hover{ border-color:var(--grass); transform:translateY(-3px); box-shadow:0 18px 34px -20px rgb(21 36 27 / .4) }
.nota-prensa:hover svg{ transform:translateX(4px) }
@media (min-width:800px){ .prensa{ grid-template-columns:1fr 1fr } }

/* ---------- Requisitos ---------- */
.req{ display:grid; gap:2rem }
.req__foto img{ border-radius:var(--radius-lg); aspect-ratio:4/3; object-fit:cover; width:100%; margin-top:1rem }
.check{ list-style:none; padding:0; margin:0 0 1.4rem; display:grid; gap:.6rem }
.check li{ display:grid; grid-template-columns:26px 1fr; gap:.8rem; background:var(--bg); padding:.9rem 1rem; border-radius:14px; align-items:start }
.check svg{ width:26px; height:26px; color:var(--grass) }
.check--no svg{ color:var(--clay) }
.confirmar{ border:1.5px dashed var(--clay); border-radius:var(--radius); padding:1rem 1.2rem; margin-bottom:1rem }
.confirmar p{ margin:0 0 .4rem; color:var(--clay) }
.confirmar ul{ margin:0; padding-left:1.1rem; color:var(--muted) }
@media (min-width:900px){ .req{ grid-template-columns:.85fr 1.15fr; gap:4rem } }

/* ---------- Tarifas ---------- */
.aviso-demo{ display:flex; gap:.8rem; align-items:center; background:var(--ball); color:#15241B; border-radius:14px; padding:.9rem 1rem; margin:1.4rem 0 1.6rem; max-width:720px }
.aviso-demo svg{ width:30px; height:30px; flex:none }
.tarifas{ display:grid; gap:1rem }
.tarifa{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.4rem }
.tarifa h3{ margin-bottom:.6rem }
.tarifa--destacada{ background:var(--forest); color:#ECF1E6; border:0 }
.tarifa--destacada h3{ color:#FFFDF7 }
.tarifa__precio{ font:600 clamp(2.4rem,2rem + 2vw,3.2rem)/1 var(--serif); font-variant-numeric:tabular-nums; margin:.2rem 0 1rem; color:var(--ball) }
.tarifa__precio span{ font:500 1rem var(--sans); color:#A9B8AC; margin-left:.3em }
.tarifa ul{ padding-left:1.1rem; margin:0 } .tarifa li{ margin:.3rem 0 }
.tarifa__lista{ list-style:none; padding:0!important }
.tarifa__lista li{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px dashed var(--line); font-variant-numeric:tabular-nums }
.tarifa__nota{ font-size:.85rem; color:var(--muted); margin:.9rem 0 0 }
@media (min-width:900px){ .tarifas{ grid-template-columns:1.1fr 1fr 1fr } }
.calc{ margin-top:1.6rem; background:var(--sage); border-radius:var(--radius); padding:1.4rem }
.calc h3 small{ font-weight:500; color:var(--muted); font-size:.85rem }
.calc__campos{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:1rem 0 }
.calc label{ display:grid; gap:.3rem; font-size:.85rem; font-weight:600; color:var(--muted) }
.calc input[type=date],.calc select{ font:inherit; color:var(--ink); background:var(--surface); border:1.5px solid var(--border-ui); border-radius:12px; padding:.6rem .7rem; min-height:46px; width:100% }
.calc__chk{ display:flex!important; align-items:center; gap:.5rem!important; grid-column:1 / -1; font-weight:500!important; color:var(--ink)!important }
.calc__chk input{ width:20px; height:20px; accent-color:var(--primary) }
.calc__res{ display:block; background:var(--surface); border-radius:14px; padding:1rem 1.1rem; font-variant-numeric:tabular-nums }
.calc__res b{ font:600 1.6rem/1.1 var(--serif) }
.calc__res small{ display:block; color:var(--muted); margin-top:.3rem }
@media (min-width:900px){ .calc__campos{ grid-template-columns:repeat(3,1fr) auto auto; align-items:end } .calc__chk{ grid-column:auto } }

/* ---------- Galería ---------- */
.carrusel--fotos{ padding-top:1.4rem }
.gal{ width:min(78vw,340px); aspect-ratio:4/5; border:0; padding:0; border-radius:var(--radius); overflow:hidden; background:#0A120D; position:relative }
.gal img,.gal video{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out) }
@media (hover:hover){ .gal:hover img{ transform:scale(1.04) } }
.lightbox{ border:0; padding:0; background:transparent; max-width:100vw; max-height:100dvh; width:100%; height:100%; margin:0 }
.lightbox::backdrop{ background:rgb(10 18 13 / .92) }
.lightbox[open]{ display:grid; place-items:center }
.lightbox__media{ width:min(94vw,900px); max-height:86dvh; display:grid; place-items:center }
.lightbox__media img,.lightbox__media video{ max-height:86dvh; width:auto; max-width:100%; border-radius:14px; object-fit:contain; view-transition-name:foto-activa }
.lightbox__x{ position:fixed; top:14px; right:14px; width:48px; height:48px; border-radius:50%; border:0; background:#FFFDF7; color:#15241B; display:grid; place-items:center; z-index:2 }
.lightbox__x svg,.hoja__x svg,.bot__x svg{ width:22px; height:22px }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:1.4rem }
.buscar input{ width:100%; font:inherit; color:var(--ink); background:var(--surface); border:1.5px solid var(--border-ui); border-radius:99px; padding:.8rem 1.2rem; min-height:50px; margin-top:.4rem }
.chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem }
.chip{ border:1.5px solid var(--line); background:transparent; border-radius:99px; padding:.45rem .9rem; font-size:.88rem; font-weight:600; min-height:40px }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--surface) }
.pregunta{ border-bottom:1px solid var(--line) }
.pregunta summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 0; font-weight:600; font-size:1.04rem; cursor:pointer; min-height:56px }
.pregunta summary::-webkit-details-marker{ display:none }
.mas{ position:relative; width:30px; height:30px; flex:none; border-radius:50%; background:var(--sage); transition:transform .26s var(--ease-out), background-color .26s }
.mas::before,.mas::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:var(--ink); translate:-50% -50%; border-radius:2px }
.mas::after{ rotate:90deg }
.pregunta[open] .mas{ transform:rotate(45deg); background:var(--ball) }
.pregunta__r p{ color:var(--muted); margin:0 0 1.2rem; max-width:62ch }
.pregunta::details-content{ block-size:0; overflow:clip; transition:block-size .32s var(--ease-out), content-visibility .32s allow-discrete }
.pregunta[open]::details-content{ block-size:auto }
.faq__vacia{ padding:1.4rem; background:var(--sage); border-radius:var(--radius); margin-top:1rem }
@media (min-width:900px){ .faq{ grid-template-columns:.8fr 1.2fr; gap:4rem; align-items:start } .faq__cabeza{ position:sticky; top:110px } }

/* ---------- Ubicación ---------- */
.ubi{ display:grid; gap:2rem }
.ubi__dir{ display:flex; gap:.6rem; align-items:flex-start; font-weight:600; font-size:1.06rem }
.ubi__dir svg{ width:24px; height:24px; color:var(--primary); flex:none }
.accesos{ padding-left:1.1rem; color:var(--muted); margin:0 0 1.2rem }
.ubi__btns{ display:flex; gap:.7rem; flex-wrap:wrap }
.mapa{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3.2; background:var(--surface) }
.mapa__foto,.mapa__foto img,.mapa iframe{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0 }
.mapa__btn{ position:absolute; left:50%; bottom:1rem; translate:-50% 0; box-shadow:0 10px 24px -10px rgb(0 0 0 / .5) }
@media (min-width:900px){ .ubi{ grid-template-columns:1fr 1.1fr; gap:4rem; align-items:center } }

/* ---------- Contacto / pie ---------- */
.contacto{ background:var(--forest); color:#ECF1E6; padding-block:calc(var(--space-l) * 1.1); text-align:center; overflow:hidden }
.contacto .display{ color:#FFFDF7 } .contacto .display em{ color:var(--ball) }
.contacto__in{ display:grid; justify-items:center; gap:1rem; position:relative }
.contacto__in > p{ max-width:44ch; color:#C9D3C2 }
.contacto__btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-top:.6rem }
.contacto__pelota{ width:46px; height:46px; cursor:pointer; transform-origin:50% 100% }
.pie{ background:#0A120D; color:#A9B8AC; padding:2.6rem 0 1.4rem; font-size:.92rem }
.pie__in{ display:grid; gap:1.4rem }
.marca--pie{ color:#FFFDF7; margin:0 0 .5rem; font-size:1.4rem }
.pie__links{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem }
.pie__links a{ color:#ECF1E6; text-decoration:none; font-weight:600 }
.pie__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.6rem 1rem; margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid #1E3326; font-size:.82rem }
.pie__legal p{ margin:0 }
.pie__chiste{ font-style:italic; font-family:var(--serif) }
.arriba{ width:48px; height:48px; border-radius:50%; border:1.5px solid #2C4033; background:transparent; display:grid; place-items:center }
.arriba svg{ width:26px; height:26px; transition:transform .4s var(--ease-spring) }
.arriba:hover svg{ transform:translateY(-6px) rotate(-30deg) }
@media (min-width:800px){ .pie__in{ grid-template-columns:1fr auto; align-items:end } }

/* ---------- Barra inferior (celular) ---------- */
.barra{ position:fixed; z-index:50; inset:auto 0 0; height:calc(var(--barra) + env(safe-area-inset-bottom)); padding:0 8px env(safe-area-inset-bottom);
  background:var(--forest); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; transform:translateY(105%); transition:transform .38s var(--ease-spring) }
.barra.is-on{ transform:none }
.barra.is-oculta{ transform:translateY(105%) }
.barra__btn{ display:grid; justify-items:center; gap:2px; background:none; border:0; color:#ECF1E6; font-size:.72rem; font-weight:600; min-height:56px }
.barra__btn svg{ width:24px; height:24px }
.barra__wa{ position:relative; isolation:isolate; display:flex; align-items:center; gap:.5rem; height:56px; margin-top:-16px; padding:0 1.4rem; border-radius:99px; background:var(--ball); color:#15241B; font-weight:700; text-decoration:none; box-shadow:0 12px 24px -10px rgb(0 0 0 / .6) }
.barra__wa svg{ width:24px; height:24px }
.barra__wa .cola{ color:var(--ball); right:-10px; top:-4px }
.barra__progreso{ position:absolute; left:0; right:0; top:0; height:2px; background:var(--grass); transform-origin:left; transform:scaleX(0) }
@supports (animation-timeline:scroll()){ .barra__progreso{ animation:prog linear both; animation-timeline:scroll(root) } }
@keyframes prog{ to{ transform:scaleX(1) } }
@media (min-width:900px){ .barra{ display:none } }

.hoja{ border:0; padding:1.2rem var(--gutter) calc(1.6rem + env(safe-area-inset-bottom)); margin:auto 0 0; width:100%; max-width:100%; max-height:86dvh; border-radius:24px 24px 0 0;
  background:var(--surface); color:var(--ink) }
.hoja::backdrop{ background:rgb(10 18 13 / .5) }
.hoja[open]{ animation:subir .42s var(--ease-out) }
.hoja__barra{ width:44px; height:5px; border-radius:3px; background:var(--line); margin:0 auto 1rem }
.hoja__x{ position:absolute; right:12px; top:12px; width:44px; height:44px; border:0; border-radius:50%; background:var(--sage); display:grid; place-items:center }
.hoja nav{ display:grid }
.hoja a{ font:500 1.5rem/1.2 var(--serif); color:var(--ink); text-decoration:none; padding:.6rem 0; border-bottom:1px solid var(--line); animation:aparecer .4s var(--ease-out) both; animation-delay:calc(var(--i) * 35ms) }
@keyframes subir{ from{ transform:translateY(100%) } }
@keyframes aparecer{ from{ opacity:0; transform:translateY(10px) } }

/* ---------- Bot ---------- */
.bot-burbuja{ display:none }
@media (min-width:900px){
  .bot-burbuja{ position:fixed; z-index:45; right:20px; bottom:20px; display:flex; align-items:center; gap:.6rem; border:0; border-radius:99px; padding:.8rem 1.2rem .8rem .9rem;
    background:var(--forest); color:#FFFDF7; font-weight:600; box-shadow:0 16px 34px -14px rgb(0 0 0 / .6); transition:transform .3s var(--ease-spring) }
  .bot-burbuja svg{ width:26px; height:26px; color:var(--ball) }
  .bot-burbuja:hover{ transform:translateY(-3px) }
}
.bot{ position:fixed; z-index:70; inset:0; display:flex; flex-direction:column; background:var(--surface); color:var(--ink) }
.bot[hidden]{ display:none }
.bot.is-abriendo{ animation:subir .38s var(--ease-out) }
@media (min-width:900px){ .bot{ inset:auto 20px 20px auto; width:390px; height:min(620px,calc(100dvh - 40px)); border-radius:22px; box-shadow:0 30px 60px -20px rgb(0 0 0 / .5); overflow:hidden } }
.bot__cab{ display:flex; align-items:center; gap:.8rem; padding:calc(.8rem + env(safe-area-inset-top)) 1rem .8rem; background:var(--forest); color:#FFFDF7 }
.bot__avatar{ width:42px; height:42px; border-radius:50%; background:var(--ball); color:#15241B; display:grid; place-items:center; flex:none }
.bot__avatar svg{ width:28px; height:28px }
.bot__titulo{ margin:0; font-weight:700 } .bot__sub{ margin:0; font-size:.78rem; color:#C9D3C2 }
.bot__x{ margin-left:auto; width:44px; height:44px; border-radius:50%; border:0; background:rgb(255 255 255 / .1); color:#FFFDF7; display:grid; place-items:center }
.bot__msgs{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; background:var(--bg); overscroll-behavior:contain }
.msg{ max-width:86%; padding:.7rem .95rem; border-radius:18px; line-height:1.45; font-size:.97rem; white-space:pre-wrap; overflow-wrap:anywhere; animation:aparecer .3s var(--ease-out) }
.msg--bot{ background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:6px; align-self:flex-start }
.msg--yo{ background:var(--primary); color:var(--on-primary); border-bottom-right-radius:6px; align-self:flex-end }
.msg--pensando{ display:flex; gap:4px; align-items:center }
.msg--pensando i{ width:7px; height:7px; border-radius:50%; background:var(--grass); animation:salto 1s infinite ease-in-out }
.msg--pensando i:nth-child(2){ animation-delay:.15s } .msg--pensando i:nth-child(3){ animation-delay:.3s }
@keyframes salto{ 0%,100%{ transform:translateY(0) } 40%{ transform:translateY(-6px) } }
.msg a{ color:inherit; font-weight:700 }
.bot__chips{ display:flex; gap:.4rem; overflow-x:auto; padding:.6rem 1rem 0; background:var(--bg); scrollbar-width:none }
.bot__chips button{ flex:none; border:1.5px solid var(--primary); color:var(--primary); background:var(--surface); border-radius:99px; padding:.45rem .8rem; font-size:.86rem; font-weight:600 }
.bot__form{ display:flex; gap:.5rem; padding:.7rem 1rem; background:var(--bg) }
.bot__form input{ flex:1; min-width:0; font:inherit; font-size:16px; color:var(--ink); background:var(--surface); border:1.5px solid var(--border-ui); border-radius:99px; padding:.7rem 1rem; min-height:48px }
.bot__form button{ width:48px; height:48px; flex:none; border:0; border-radius:50%; background:var(--primary); color:var(--on-primary); display:grid; place-items:center }
.bot__form button svg{ width:22px; height:22px }
.bot__legal{ margin:0; padding:0 1rem calc(.7rem + env(safe-area-inset-bottom)); font-size:.74rem; color:var(--muted); background:var(--bg) }

/* ---------- 404 ---------- */
.e404{ min-height:100svh; display:grid; place-content:center; justify-items:start; gap:1rem; padding:6rem var(--gutter); max-width:760px; margin-inline:auto }
.e404__pelota{ width:64px; height:64px; animation:rodar 1.4s var(--ease-out) both }
@keyframes rodar{ from{ transform:translateX(60vw) rotate(720deg) } 70%{ transform:translateX(-10px) rotate(-20deg) } }

/* ---------- Revelado (solo con JS) ---------- */
.js [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); transition-delay:calc(var(--i,0) * 60ms) }
.js [data-reveal].is-in{ opacity:1; transform:none }
@media (min-width:900px){ .js [data-reveal]{ transform:translateY(26px); transition-duration:.75s } }

/* ---------- Cursor hocico (desktop) ---------- */
.hocico{ position:fixed; left:0; top:0; z-index:90; width:12px; height:12px; border-radius:50%; background:rgb(21 36 27 / .22); pointer-events:none; translate:-50% -50%; transition:width .2s, height .2s, background-color .2s }
.hocico svg{ width:100%; height:100%; opacity:0; transition:opacity .2s }
.hocico.is-sniff{ width:28px; height:28px; background:transparent }
.hocico.is-sniff svg{ opacity:1; animation:sniff .5s ease-in-out 2 }
@keyframes sniff{ 0%,100%{ transform:scale(1) } 25%{ transform:scale(1.16) } 50%{ transform:scale(1) } 75%{ transform:scale(1.12) } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }
  .pasto path{ animation:none!important; transform:none!important }
  .js [data-reveal]{ transform:none }
  .hero__video,.hocico{ display:none!important }
}

/* picture llena su contenedor cuando la imagen es de tamaño fijo */
.gal picture,.mos picture{ display:block; width:100%; height:100% }

/* ---- Ajustes QA celular (30/10) ---- */
@media (max-width:899px){
  .demo{ position:absolute }                      /* no tapa contenido al scrollear */
  .barra{ transform:none }                         /* WhatsApp visible desde la primera pantalla */
  .barra.is-oculta{ transform:translateY(105%) }
  .hero__media{ aspect-ratio:4/3.5 }
  .hero{ gap:1.4rem }
}
.chip,.bot__chips button{ min-height:44px }
.pie__links a{ display:inline-block; padding:.6rem 0 }
.calc__chk input{ width:24px; height:24px }
.link{ min-height:44px }

/* ---- Ajustes QA desktop (30/10) ---- */
.tarifa__demo{ display:inline-block; font:700 .68rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; background:var(--ball); color:#15241B; border-radius:99px; padding:.35em .65em; margin:-.2rem 0 .8rem }
.gal img{ -webkit-user-drag:none; user-select:none }
@media (min-width:900px){ .pie__legal{ padding-right:240px } .hero__txt .display em{ display:block; margin-top:.08em } }
@media (prefers-reduced-motion:reduce){ .js [data-reveal]{ opacity:1!important } .estrellas--llenar{ clip-path:none!important } }

/* ---- Reveal por palabra ---- */
.js [data-palabras] .pal{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .08em .1em; margin:0 -.08em -.1em }
.js [data-palabras] .pal > span{ display:inline-block; transform:translateY(105%) rotate(4deg); opacity:0; filter:blur(4px);
  transition:transform .8s var(--ease-out), opacity .6s ease, filter .7s ease; transition-delay:calc(var(--w) * 55ms) }
.js [data-palabras].is-in .pal > span{ transform:none; opacity:1; filter:none }
@media (max-width:899px){ .js [data-palabras] .pal > span{ filter:none } }

/* ---- Huellas que caminan ---- */
[data-huellas]{ position:relative; overflow:hidden }
.huellas{ position:absolute; inset:0; pointer-events:none; z-index:0 }
[data-huellas] > :not(.huellas){ position:relative; z-index:1 }
.huella{ position:absolute; width:22px; height:22px; color:var(--grass); opacity:0; translate:-50% -50%;
  animation:pisada 3.6s ease both; animation-delay:var(--d) }
.contacto .huella{ color:var(--ball) }
@keyframes pisada{ 0%{ opacity:0; transform:rotate(var(--r)) scale(.6) } 8%{ opacity:var(--o,.28); transform:rotate(var(--r)) scale(1) } 62%{ opacity:var(--o,.28) } 100%{ opacity:0; transform:rotate(var(--r)) scale(1) } }
@media (min-width:900px){ .huella{ width:26px; height:26px } }
@media (prefers-reduced-motion:reduce){
  .huellas{ display:none }
  .js [data-palabras] .pal > span{ transform:none!important; opacity:1!important; filter:none!important }
}

/* ---- Bandas parallax ---- */
.paralaje{ position:relative; overflow:hidden; min-height:72svh; display:grid; place-items:end start; color:#FFFDF7; isolation:isolate; background:#0A120D }
.paralaje__fondo{ position:absolute; inset:-22% 0; z-index:-2; will-change:transform }
.paralaje__img,.paralaje__img img{ width:100%; height:100%; object-fit:cover }
.paralaje::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgb(10 18 13 / .82) 0%, rgb(10 18 13 / .25) 55%, rgb(10 18 13 / .1)) }
.paralaje__cita{ margin:0; padding:var(--space-l) var(--gutter); max-width:900px }
.paralaje__cita blockquote{ margin:0 0 .8rem; font:500 clamp(1.9rem,1.3rem + 3vw,3.6rem)/1.08 var(--serif); font-variation-settings:"SOFT" 100,"opsz" 120; letter-spacing:-.015em }
.paralaje__cita figcaption{ font-size:.9rem; color:#C9D3C2; display:flex; align-items:center; gap:.6em }
.paralaje__cita figcaption::before{ content:""; width:28px; height:2px; background:var(--ball) }
@media (min-width:900px){ .paralaje{ min-height:82vh } .paralaje__cita{ padding-left:calc((100vw - 1200px)/2 + var(--gutter)) } }
@media (prefers-reduced-motion:reduce){ .paralaje__fondo{ inset:0; transform:none!important } }

/* ---- Perritos de los servicios: una raza por tarjeta ---- */
.serv__ico{ background:var(--sage) }
.serv__ico--0{ --pelo:#E7B979; --oreja:#C28747; --hocico:#F6E3C3 }                       /* golden */
.serv__ico--1{ --pelo:#F6EFE3; --oreja:#8B5A2B; --hocico:#FFFFFF; --mancha:#C98B4E }    /* beagle */
.serv__ico--2{ --pelo:#FBF8F1; --oreja:#EDE3D2; --hocico:#FFFFFF }                       /* westie */
.serv__ico--3{ --pelo:#B07444; --oreja:#6E4325; --hocico:#DDAA7E }                       /* salchicha */
.serv__ico--4{ --pelo:#D3CFC8; --oreja:#A8A39A; --hocico:#ECE9E3 }                       /* caniche gris */
.serv__ico--5{ --pelo:#E9D6B8; --oreja:#CDB089; --hocico:#F7EEDF; --mancha:#FFFFFF }    /* mestizo crema */
.serv__ico--6{ --pelo:#8A5A35; --oreja:#5C381E; --hocico:#B88456 }                       /* labrador chocolate */
.serv__ico--7{ --pelo:#FFFFFF; --oreja:#3A3330; --hocico:#FFFFFF; --mancha:#3A3330 }    /* blanco y negro */
.bot__avatar{ --pelo:#E7B979; --oreja:#C28747; --hocico:#F6E3C3 }
.bot__avatar svg{ width:34px; height:34px }
/* orejas que se mueven: caen y se balancean */
.ear{ transform-box:fill-box; transition:transform .45s var(--ease-spring) }
.ear-l{ transform-origin:85% 10% } .ear-r{ transform-origin:15% 10% }
.serv.is-in .ear-l, .serv.is-in .ear-r{ transform:none }
@media (hover:hover){
  .serv:hover .ear-l{ transform:rotate(14deg) } .serv:hover .ear-r{ transform:rotate(-14deg) }
  .serv:hover .serv__cabeza{ animation:ladeo .6s var(--ease-out) }
}
@keyframes ladeo{ 40%{ transform:rotate(-9deg) } 100%{ transform:rotate(0) } }
@media (max-width:1099px){ .serv{ grid-template-columns:64px 1fr } }
.serv__ico{ width:64px; height:64px; border-radius:20px }
.serv__cabeza{ inset:2px; width:60px; height:60px }

/* ---- FAQ: destacadas + ventana con todas ---- */
.faq__todas{ margin-top:.6rem }
.faq__todas svg{ width:20px; height:20px }
.faq__mas{ display:flex; align-items:center; gap:.5rem; width:100%; margin-top:1rem; padding:1rem 1.1rem; min-height:56px; border:1.5px dashed var(--line);
  border-radius:var(--radius); background:transparent; font-weight:600; color:var(--primary); text-align:left }
.faq__mas svg{ width:20px; height:20px; margin-left:auto; transition:transform .25s var(--ease-out) }
.faq__mas:hover svg{ transform:translateX(4px) }
.faq-modal{ border:0; padding:0; margin:auto 0 0; width:100%; max-width:100%; height:92dvh; max-height:92dvh; border-radius:24px 24px 0 0;
  background:var(--surface); color:var(--ink); display:none; flex-direction:column; overflow:hidden }
.faq-modal[open]{ display:flex; animation:subir .42s var(--ease-out) }
.faq-modal::backdrop{ background:rgb(10 18 13 / .55) }
.faq-modal__cab{ position:relative; padding:1rem var(--gutter) .8rem; border-bottom:1px solid var(--line) }
.faq-modal__titulo{ font:500 var(--step-2)/1.1 var(--serif); margin:0 3rem .8rem 0 }
.faq-modal__cab .buscar input{ margin-top:0 }
.faq-modal__cab .chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:.7rem calc(var(--gutter) * -1) 0; padding:0 var(--gutter) }
.faq-modal__cab .chip{ flex:none }
.faq-modal__lista{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:.4rem var(--gutter) calc(1.6rem + env(safe-area-inset-bottom)) }
.faq-modal__wa{ margin-top:1.4rem; width:100% }
@media (min-width:900px){
  .faq-modal{ margin:auto; width:min(760px,92vw); height:min(84vh,820px); border-radius:24px; box-shadow:0 40px 80px -30px rgb(0 0 0 / .6) }
  .faq-modal[open]{ animation:aparecer .35s var(--ease-out) }
  .faq-modal__wa{ width:auto }
}
body.sin-scroll{ overflow:hidden }

/* ---- Tarifas a medida ---- */
.factores{ list-style:none; padding:0; margin:1.8rem 0 1.2rem; display:grid; gap:.9rem }
.factor{ display:grid; grid-template-columns:56px 1fr; gap:.15rem 1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem }
.factor h3,.factor p{ grid-column:2 } .factor p{ margin:0; color:var(--muted); font-size:.96rem }
.factor__ico{ grid-row:1 / span 2; width:56px; height:56px; border-radius:16px; background:var(--sage); display:grid; place-items:center; color:var(--primary) }
.factor__ico svg{ width:44px; height:44px }
.factor:not(:first-child) .factor__ico svg{ width:30px; height:30px }
.reserva{ display:grid; gap:.8rem; margin:1.2rem 0 }
.reserva__dato{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center; background:var(--forest); color:#ECF1E6; border-radius:var(--radius); padding:1rem 1.2rem }
.reserva__dato b{ font:600 clamp(1.5rem,1.2rem + 1.2vw,2.1rem)/1 var(--serif); color:var(--ball); min-width:3.6em }
.reserva__dato span{ font-size:.95rem }
.presu{ display:grid; gap:1rem; justify-items:start; background:var(--sage); border-radius:var(--radius-lg); padding:1.5rem 1.4rem; margin-top:.4rem }
.presu__txt{ margin:0; font-size:1.06rem; max-width:44ch }
@media (min-width:900px){
  .factores{ grid-template-columns:repeat(3,1fr) } .factor{ grid-template-columns:1fr } .factor h3,.factor p{ grid-column:1 } .factor__ico{ grid-row:auto; margin-bottom:.6rem }
  .reserva{ grid-template-columns:repeat(3,1fr) } .reserva__dato{ grid-template-columns:1fr; align-content:start }
  .presu{ grid-template-columns:1fr auto; align-items:center }
}

/* ---- Ficha del huésped ---- */
.ficha{ display:grid; gap:2.2rem; align-items:center }
.ficha__btns{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.2rem }
.papel{ position:relative; background:#FFFDF7; color:#15241B; border-radius:6px 6px 18px 18px; padding:2.2rem 1.4rem 1.6rem;
  box-shadow:0 1px 0 #e7e1cf, 0 24px 50px -28px rgb(21 36 27 / .55); rotate:-1.2deg;
  background-image:repeating-linear-gradient(transparent 0 31px, #E8EFE2 31px 32px) }
.papel__clip{ position:absolute; top:-14px; left:50%; translate:-50% 0; width:84px; height:26px; border-radius:8px; background:var(--forest); box-shadow:inset 0 -4px 0 rgb(0 0 0 / .15) }
.papel__titulo{ font:600 1.4rem/1 var(--serif); margin:0 0 1rem; text-align:center }
.papel__lista{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem }
.papel__lista li{ display:grid; grid-template-columns:32px 1fr; gap:.6rem; align-items:start; padding-bottom:.55rem; border-bottom:1px dashed #D9D2BF }
.papel__lista li:last-child{ border:0 }
.papel__e{ font-size:1.3rem; line-height:1.2 }
.papel__lista b{ display:block; font-size:.98rem }
.papel__lista span{ font-size:.88rem; color:#4A5A4F }
.papel__sello{ position:absolute; right:14px; bottom:12px; font:700 .9rem/1 var(--sans); letter-spacing:.06em; color:var(--clay); border:2px solid currentColor; border-radius:8px; padding:.35em .55em; rotate:-12deg; opacity:.75 }
.js .papel.is-in .papel__lista li{ animation:aparecer .5s var(--ease-out) both; animation-delay:calc(var(--i) * 70ms + .2s) }
@media (min-width:900px){ .ficha{ grid-template-columns:1fr 1fr; gap:4rem } .papel{ padding:2.4rem 2rem 2rem } }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .papel{ box-shadow:0 24px 50px -20px rgb(0 0 0 / .7) } }

/* ---- Historias (estilo stories) ---- */
.historias{ padding:.4rem 0 1.6rem }
.historias__fila{ display:flex; gap:14px; overflow-x:auto; padding:.4rem var(--gutter); scrollbar-width:none; scroll-snap-type:x proximity }
.historias__fila::-webkit-scrollbar{ display:none }
.historia{ flex:none; border:0; background:none; padding:0; display:grid; justify-items:center; gap:.4rem; width:76px; scroll-snap-align:start }
.historia__aro{ width:74px; height:74px; border-radius:50%; padding:3px; background:conic-gradient(var(--ball), var(--grass), var(--primary), var(--ball)); display:block; transition:transform .3s var(--ease-spring) }
.historia__aro img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid var(--bg) }
.historia__aro--destacada{ animation:latido 2.4s ease-in-out infinite }
.historia:active .historia__aro{ transform:scale(.92) }
.historia__txt{ font-size:.74rem; font-weight:600; line-height:1.15; text-align:center; color:var(--ink) }
.historia.is-vista .historia__aro{ background:var(--line) }
@keyframes latido{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } }
@media (min-width:900px){ .historias__fila{ justify-content:center } .historia{ width:92px } .historia__aro{ width:88px; height:88px } }
.visor{ border:0; padding:0; margin:0; width:100vw; height:100dvh; max-width:100vw; max-height:100dvh; background:#000; color:#fff; overflow:hidden }
.visor::backdrop{ background:#000 }
.visor[open]{ display:block; animation:aparecer .25s ease }
.visor__media{ position:absolute; inset:0; display:grid; place-items:center }
.visor__media video{ width:100%; height:100%; object-fit:contain; background:#000 }
.visor__media video::cue{ font:500 1rem/1.35 var(--sans); background:rgb(0 0 0 / .65) }
.visor__barras{ position:absolute; z-index:3; top:calc(10px + env(safe-area-inset-top)); left:10px; right:10px; display:flex; gap:4px }
.visor__barras span{ flex:1; height:3px; border-radius:2px; background:rgb(255 255 255 / .3); overflow:hidden }
.visor__barras i{ display:block; height:100%; background:#fff; transform-origin:left; transform:scaleX(0) }
.visor__barras span.is-vista i{ transform:scaleX(1) }
.visor__titulo{ position:absolute; z-index:3; top:calc(24px + env(safe-area-inset-top)); left:14px; margin:0; font-weight:700; font-size:.95rem; text-shadow:0 1px 6px rgb(0 0 0 / .6) }
.visor__x{ position:absolute; z-index:4; top:calc(18px + env(safe-area-inset-top)); right:10px; width:44px; height:44px; border:0; border-radius:50%; background:rgb(0 0 0 / .35); color:#fff; display:grid; place-items:center }
.visor__x svg{ width:24px; height:24px }
.visor__sonido{ position:absolute; z-index:4; top:calc(70px + env(safe-area-inset-top)); left:50%; translate:-50% 0; border:0; border-radius:99px; padding:.6rem 1rem; background:rgb(0 0 0 / .55); color:#fff; font-weight:600 }
.visor__nav{ position:absolute; z-index:2; top:0; bottom:0; width:35%; border:0; background:transparent }
.visor__nav--ant{ left:0 } .visor__nav--sig{ right:0; width:65% }
.visor__cta{ position:absolute; z-index:4; left:50%; translate:-50% 0; bottom:calc(20px + env(safe-area-inset-bottom)) }
@media (min-width:900px){ .visor__media video{ width:auto; max-width:100%; border-radius:14px } }
.ver-marcelo{ display:flex; align-items:center; gap:.9rem; margin:.2rem 0 1.2rem; padding:.7rem 1.1rem .7rem .7rem; border:1.5px solid var(--line); border-radius:99px; background:var(--surface); text-align:left; min-height:56px }
.ver-marcelo__play{ width:42px; height:42px; border-radius:50%; background:var(--ball); color:#15241B; display:grid; place-items:center; font-size:.9rem; padding-left:3px }
.ver-marcelo b{ display:block; font-size:.98rem } .ver-marcelo small{ color:var(--muted); font-size:.8rem }
@media (prefers-reduced-motion:reduce){ .historia__aro--destacada{ animation:none } }
.visor__media{ inset:calc(64px + env(safe-area-inset-top)) 0 calc(90px + env(safe-area-inset-bottom)) }

/* historias: dejar lugar al pasto que viene abajo */
.historias{ padding-bottom:64px }
@media (min-width:900px){ .historias{ padding-bottom:96px } }

/* ---- Burbuja del bot: perrito que olfatea ---- */
.bot-burbuja__perro{ width:40px; height:40px; flex:none; border-radius:50%; background:var(--ball); display:grid; place-items:center;
  --pelo:#E7B979; --oreja:#C28747; --hocico:#F6E3C3; animation:olfatear 2.6s ease-in-out infinite }
.bot-burbuja__perro svg{ width:34px; height:34px }
.bot-burbuja__perro .ear-l{ animation:orejaI 2.6s ease-in-out infinite } .bot-burbuja__perro .ear-r{ animation:orejaD 2.6s ease-in-out infinite }
.bot-burbuja__txt{ display:grid; text-align:left; line-height:1.15 }
.bot-burbuja__txt small{ font-weight:500; font-size:.74rem; color:#C9D3C2 }
@keyframes olfatear{ 0%,60%,100%{ transform:rotate(0) translateY(0) } 65%{ transform:rotate(-8deg) translateY(-2px) } 70%{ transform:rotate(6deg) } 75%{ transform:rotate(-5deg) translateY(-1px) } 80%{ transform:rotate(3deg) } }
@keyframes orejaI{ 0%,62%,100%{ transform:none } 70%{ transform:rotate(18deg) } }
@keyframes orejaD{ 0%,62%,100%{ transform:none } 70%{ transform:rotate(-18deg) } }
.bot-burbuja{ padding:.45rem 1.1rem .45rem .45rem }
.bot-burbuja > svg{ display:none }
.barra__btn .bot-burbuja__perro{ width:30px; height:30px; animation-duration:3.4s } .barra__btn .bot-burbuja__perro svg{ width:26px; height:26px }
@media (prefers-reduced-motion:reduce){ .bot-burbuja__perro,.bot-burbuja__perro .ear{ animation:none } }
.msg__perro{ display:inline-block; vertical-align:-6px; margin-right:4px; width:26px; height:26px; --pelo:#E7B979; --oreja:#C28747; --hocico:#F6E3C3 }

/* ---- Mapa con estilo ---- */
.mapa{ aspect-ratio:auto; min-height:340px; box-shadow:0 30px 60px -36px rgb(21 36 27 / .6); border:6px solid var(--surface) }
.mapa iframe{ filter:grayscale(.45) sepia(.12) saturate(1.15) contrast(1.02) }
.mapa__card{ position:absolute; left:12px; right:12px; bottom:12px; display:flex; align-items:center; gap:.8rem; padding:.8rem .9rem; border-radius:16px;
  background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(6px); color:var(--ink); text-decoration:none; box-shadow:0 12px 30px -12px rgb(0 0 0 / .45) }
.mapa__card .mapa__pin{ width:44px; height:44px; border-radius:50%; background:var(--forest); display:grid; place-items:center; flex:none; --pelo:#E7B979; --oreja:#C28747; --hocico:#F6E3C3 }
.mapa__card .mapa__pin svg{ width:36px; height:36px }
.mapa__card b{ display:block } .mapa__card small{ color:var(--muted) }
.mapa__card .mapa__ir{ margin-left:auto; background:var(--primary); color:var(--on-primary); border-radius:99px; padding:.55rem .9rem; font-weight:600; font-size:.88rem; white-space:nowrap }
@media (min-width:900px){ .mapa{ min-height:460px } .mapa__card{ left:auto; width:360px } }
.serv{ align-content:start }
.serv h3{ margin-bottom:.35rem }
@media (max-width:899px){
  .mapa__card{ padding:.55rem .6rem; gap:.6rem }
  .mapa__card small{ display:none }
  .mapa__card .mapa__pin{ width:38px; height:38px } .mapa__card .mapa__pin svg{ width:30px; height:30px }
  .mapa__card .mapa__ir{ padding:.5rem .8rem }
}

/* ---- Modo app en el celular (30/10) ---- */
html{ -webkit-tap-highlight-color:transparent }
.carrusel,.historias__fila,[data-carrusel]{ overscroll-behavior-x:contain }
dialog{ overscroll-behavior:contain }
.barra,.barra *,.btn,.chip,.top{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none }
@media (hover:none){
  .btn,.chip,.barra__btn,.barra__wa,.serv,.historia,.link,.bot__chips button,.pregunta summary{ transition:scale .16s var(--ease-out) }
  .btn:active,.chip:active,.barra__btn:active,.barra__wa:active,.serv:active,.historia:active,.link:active,.bot__chips button:active,.pregunta summary:active{ scale:.96 }
}
@media (max-width:899px){
  body{ padding-bottom:calc(var(--barra) + 20px + env(safe-area-inset-bottom)) }
  /* Barra superior tipo app: fija, compacta, translúcida al scrollear y se esconde al bajar */
  .top{ position:fixed; padding:calc(12px + env(safe-area-inset-top)) var(--gutter) 12px; transition:transform .35s var(--ease-out), background-color .3s, box-shadow .3s }
  .top.is-solida{ background:color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px); box-shadow:0 1px 0 var(--line) }
  .top.is-oculta{ transform:translateY(-110%) }
  .hero{ padding-top:calc(72px + env(safe-area-inset-top)) }
  html{ scroll-padding-top:72px }
  /* Barra inferior flotante tipo tab bar */
  .barra{ left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); height:var(--barra); padding:0 6px; border-radius:26px;
    background:color-mix(in srgb, var(--forest) 92%, transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    box-shadow:0 16px 34px -14px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .07) }
  .barra.is-oculta{ transform:translateY(calc(100% + 24px + env(safe-area-inset-bottom))) }
  .barra__progreso{ left:22px; right:22px; border-radius:2px }
  /* WhatsApp 20 % más chico */
  .barra__wa{ height:45px; margin-top:-12px; padding:0 1.1rem; gap:.4rem; font-size:.88rem }
  .barra__wa svg{ width:20px; height:20px }
}

/* ---- Páginas internas (SEO, 30/10) ---- */
h1.eyebrow--h1{ margin-top:0; font-size:var(--step--1); line-height:1.35 }
.pag{ padding:calc(84px + env(safe-area-inset-top)) 0 var(--space-l) }
.pag__in{ display:grid; gap:1.6rem; align-items:center }
.migas{ display:flex; gap:.5em; flex-wrap:wrap; font-size:.85rem; color:var(--muted); margin-bottom:1rem }
.migas a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line) }
.migas a:hover{ color:var(--primary) }
.h1-pag{ font:600 clamp(2.3rem, 5.2vw + 1rem, 4.4rem)/1.03 var(--serif); font-variation-settings:"SOFT" 100,"opsz" 120; letter-spacing:-.02em; margin:0 0 .6em; text-wrap:balance }
.pag__txt .lead{ max-width:58ch; font-size:clamp(1.05rem, .9rem + .5vw, 1.25rem); margin:0 0 .8em }
.pag__txt .hero__ctas{ margin-top:1.4rem }
.pag__foto{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3.4; background:var(--sage); box-shadow:0 30px 60px -36px rgb(21 36 27 / .6) }
.pag__foto img{ width:100%; height:100%; object-fit:cover }
@media (min-width:900px){ .pag{ padding-top:120px } .pag__in{ grid-template-columns:1.1fr .9fr; gap:3rem } .pag__foto{ aspect-ratio:4/4.4 } }
.faq-pag{ max-width:860px }
.faq-pag__cat{ font:600 var(--step-1)/1.2 var(--serif); margin:2.2rem 0 .4rem; color:var(--primary) }
.faq-pag__mas{ margin-top:1.4rem }
.rel{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.8rem }
@media (min-width:800px){ .rel{ grid-template-columns:repeat(2,1fr) } }
.rel__a{ position:relative; display:grid; gap:.3rem; padding:1.1rem 3rem 1.1rem 1.2rem; border-radius:var(--radius); background:var(--surface); color:var(--ink); text-decoration:none; box-shadow:0 0 0 1px var(--line); transition:box-shadow .25s, translate .25s var(--ease-out) }
.rel__a b{ font:600 1.08rem/1.2 var(--serif) }
.rel__a span{ color:var(--muted); font-size:.92rem; line-height:1.45 }
.rel__a svg{ position:absolute; right:1rem; top:50%; width:20px; height:20px; translate:0 -50%; color:var(--primary) }
.rel__a:hover{ box-shadow:0 0 0 2px var(--grass); translate:0 -2px }
.serv__mas{ display:inline-flex; align-items:center; gap:.35em; margin-top:.5rem; font-weight:600; font-size:.92rem; color:var(--primary); text-decoration:none; min-height:44px }
.serv__mas svg{ width:16px; height:16px; transition:translate .2s }
.serv__mas:hover svg{ translate:3px 0 }
.serv .serv__mas{ grid-column:2 }
@media (min-width:1100px){ .serv .serv__mas{ grid-column:1 } }
.nav a[aria-current="page"]::after{ transform:scaleX(1) }

/* ---- Pastilla de WhatsApp = perro salchicha (30/10) ---- */
.salchi{ --piel:var(--ball); --oscuro:color-mix(in srgb, var(--ball) 62%, #15241B); overflow:visible; padding-left:1.5rem !important; padding-right:1.2rem !important }
.salchi .salchi__cabeza{ position:absolute; left:-25px; top:-8px; width:44px; height:34px; z-index:1; transform-origin:34px 26px; animation:salchi-cabeza 3.2s ease-in-out infinite; filter:drop-shadow(0 4px 6px rgb(0 0 0 / .18)) }
.salchi__piel{ fill:var(--piel) }
.salchi__oreja{ fill:var(--oscuro); transform-origin:31px 7px; animation:salchi-oreja 3.2s ease-in-out infinite }
.salchi__ojo{ fill:#15241B }
.salchi .cola{ color:var(--piel); right:-13px; top:-5px; animation:wag .42s ease-in-out infinite alternate }
.salchi:is(:hover,:focus-visible) .cola, .salchi.is-wag .cola{ animation-duration:.14s }
.salchi__patas{ position:absolute; inset:auto 14px -6px 14px; display:flex; justify-content:space-between; z-index:-1; pointer-events:none }
.salchi__patas i{ width:7px; height:10px; border-radius:0 0 4px 4px; background:var(--oscuro); transform-origin:50% 0; animation:salchi-pata .5s ease-in-out infinite alternate }
.salchi__patas i:nth-child(1){ margin-left:4px } .salchi__patas i:nth-child(2){ margin-right:auto; margin-left:6px; animation-delay:-.25s }
.salchi__patas i:nth-child(3){ margin-left:auto; margin-right:6px } .salchi__patas i:nth-child(4){ margin-right:4px; animation-delay:-.25s }
@keyframes salchi-pata{ from{ transform:rotate(-14deg) } to{ transform:rotate(14deg) } }
@keyframes salchi-cabeza{ 0%,70%,100%{ transform:rotate(0) } 78%{ transform:rotate(-9deg) } 86%{ transform:rotate(5deg) } }
@keyframes salchi-oreja{ 0%,70%,100%{ transform:rotate(0) } 80%{ transform:rotate(12deg) } 90%{ transform:rotate(-6deg) } }
@media (prefers-reduced-motion: reduce){ .salchi *,.salchi .cola{ animation:none !important } }