/* Concepto: un parque de juegos. Ondas de color, huellitas que caminan, perros que flotan. */
:root{
  --purple:#7f2fd8; --purple-d:#5b1fa3;
  --orange:#f07f45; --orange-d:#d9622a;
  --yellow:#f7c948;
  --sky:#74d3ef; --sky-d:#3fb6dd;
  --blue:#3462d4;
  --ink:#2a1840; --cream:#fff8ef; --white:#ffffff;
  --script:"Lobster", "Brush Script MT", cursive;
  --display:"Fredoka", "Nunito", system-ui, sans-serif;
  --body:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));position:relative}
.script{font-family:var(--script);font-weight:400;letter-spacing:0}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:8px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:17px;text-decoration:none;white-space:nowrap;
  transition:transform .25s var(--spring),box-shadow .25s var(--ease-out),background-color .2s ease}
.btn:active{transform:scale(.96)}
.btn svg{width:20px;height:20px;flex:none}
.btn-white{background:#fff;color:var(--ink);box-shadow:0 6px 0 rgba(42,24,64,.18)}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 6px 0 var(--orange-d)}
.btn-purple{background:var(--purple);color:#fff;box-shadow:0 6px 0 var(--purple-d)}
.btn-yellow{background:var(--yellow);color:var(--ink);box-shadow:0 6px 0 #d6a520}
@media (hover:hover){.btn:hover{transform:translateY(-3px) rotate(-1.5deg)}}

/* ---------- Header ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px}
.nav .logo img{height:58px;width:auto}
.nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nav ul a{display:block;padding:8px 14px;border-radius:999px;font-family:var(--display);font-weight:600;text-decoration:none;transition:background-color .2s ease,color .2s ease}
.nav ul a:hover{background:#f4ecfd;color:var(--purple)}
.nav .btn{min-height:46px;padding:0 20px;font-size:16px}
@media (max-width:980px){.nav ul{display:none}.nav .logo img{height:46px}}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--orange);color:#fff;overflow:hidden;padding-block:120px 170px;isolation:isolate}
.hero .wave-top{position:absolute;inset:0 0 auto 0;width:100%;height:170px;z-index:-1}
.hero .wave-bot{position:absolute;inset:auto 0 -1px 0;width:100%;height:120px;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero h1{font-family:var(--script);font-weight:400;font-size:clamp(56px,7.4vw,112px);line-height:.92;text-shadow:0 6px 0 rgba(91,31,163,.25)}
.hero .sub{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,32px);color:var(--yellow);margin-top:18px;max-width:20ch;line-height:1.2}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.hero .chips span{background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.35);padding:6px 14px;border-radius:999px;font-weight:700;font-size:15px}
.collage{position:relative;aspect-ratio:1/1;max-width:100%}
.collage .blob{position:absolute;border-radius:50%;background:#fff}
.collage .b1{width:62%;aspect-ratio:1;right:-6%;bottom:4%;border-radius:58% 42% 50% 50%/55% 50% 50% 45%;animation:morph 9s ease-in-out infinite}
.collage .b2{width:34%;aspect-ratio:1;left:0;bottom:-2%;background:var(--purple);animation:morph 11s ease-in-out infinite reverse}
.collage img{position:absolute;filter:drop-shadow(0 18px 24px rgba(42,24,64,.28))}
.collage .blob{z-index:0}
.collage .d-big{width:74%;left:13%;top:6%;z-index:1;animation:float 6s ease-in-out infinite}
.collage .d-dalm{width:42%;left:-6%;bottom:-2%;z-index:4;animation:float 5s ease-in-out infinite .6s}
.collage .d-pair{width:64%;right:-6%;bottom:-2%;z-index:3;animation:float 7s ease-in-out infinite 1.2s}
.collage .d-baset{width:36%;right:-6%;top:16%;z-index:0;animation:float 5.5s ease-in-out infinite .3s}
.woof{position:absolute;font-family:"Lobster",cursive;color:var(--ink);background:var(--yellow);border:4px solid var(--ink);border-radius:50% 50% 50% 50%/55% 55% 45% 45%;display:grid;place-items:center;transform-origin:20% 90%;animation:wiggle 2.4s var(--spring) infinite}
.woof::after{content:"";position:absolute;left:12%;bottom:-14px;width:22px;height:22px;background:var(--yellow);border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:rotate(45deg) skew(10deg,10deg)}
.woof{z-index:4}
.woof.w1{width:27%;aspect-ratio:1.3;right:-6%;top:-2%;font-size:clamp(24px,3vw,40px)}
.woof.w2{width:18%;aspect-ratio:1.3;left:-6%;top:30%;font-size:clamp(14px,1.6vw,22px);animation-delay:.9s}
.paw{position:absolute;width:44px;height:44px;color:var(--yellow);pointer-events:none}
.paw-trail .paw{opacity:0;animation:step 4.8s ease-out infinite}
.paw-trail .paw:nth-child(2){animation-delay:.6s}
.paw-trail .paw:nth-child(3){animation-delay:1.2s}
.paw-trail .paw:nth-child(4){animation-delay:1.8s}
@media (max-width:900px){
  .hero{padding-block:100px 150px}
  .hero-grid{grid-template-columns:1fr}
  .collage{max-width:520px;margin:12px auto 0;width:100%}
}

/* ---------- Ribbon ---------- */
.ribbon{position:relative;z-index:3;margin-top:-34px;background:var(--purple);color:#fff;transform:rotate(-2deg);padding-block:16px;overflow:hidden;box-shadow:0 10px 0 var(--yellow)}
.ribbon .track{display:flex;width:max-content;animation:marquee 28s linear infinite}
.ribbon .track span{display:inline-flex;align-items:center;gap:22px;padding-right:22px;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,32px);white-space:nowrap}
.ribbon svg{width:28px;height:28px;color:var(--yellow)}

/* ---------- Secciones ---------- */
section{position:relative;padding-block:110px}
.head{text-align:center;margin-bottom:56px}
.head .kicker{font-family:var(--script);font-size:clamp(26px,3vw,36px);color:var(--orange)}
.head h2{font-size:clamp(40px,5.4vw,68px);margin-top:2px}
.squiggle{display:block;margin:14px auto 0;width:150px;height:22px}
.head p{max-width:56ch;margin:18px auto 0;color:#5a4a6e;font-size:18px}

/* ---------- Videos ---------- */
.videos .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.vcard{position:relative;border-radius:28px;padding:12px;background:var(--sky);transition:transform .4s var(--spring)}
.vcard:nth-child(1){transform:rotate(-2deg);background:var(--orange)}
.vcard:nth-child(2){transform:rotate(2deg);background:var(--purple);margin-top:40px}
@media (hover:hover){.vcard:hover{transform:rotate(0) scale(1.02)}}
.vcard .frame{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:20px;overflow:hidden;background:#1d1030}
.vcard .frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.vcard .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcard .play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:linear-gradient(transparent 40%,rgba(29,16,48,.55));cursor:pointer;padding:0;width:100%}
.vcard .play span{width:88px;height:88px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;box-shadow:0 0 0 0 rgba(247,201,72,.7);animation:pulse 2s ease-out infinite;transition:transform .25s var(--spring)}
.vcard .play span svg{width:36px;height:36px;margin-left:5px;color:var(--ink)}
@media (hover:hover){.vcard .play:hover span{transform:scale(1.1)}.vcard:hover .frame img{transform:scale(1.04)}}
.vcard h3{color:#fff;font-size:22px;padding:16px 10px 6px}
.vcard .tag{position:absolute;top:-18px;right:24px;background:var(--yellow);color:var(--ink);font-family:var(--display);font-weight:700;padding:6px 16px;border-radius:999px;transform:rotate(6deg);z-index:2}
@media (max-width:820px){.videos .grid{grid-template-columns:1fr}.vcard:nth-child(2){margin-top:0}}

/* ---------- Nosotros ---------- */
.about{background:var(--cream);overflow:hidden}
.about .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about figure{margin:0;position:relative}
.about figure::before{content:"";position:absolute;inset:8% 4% 0 4%;background:var(--sky);border-radius:46% 54% 42% 58%/52% 44% 56% 48%;animation:morph 10s ease-in-out infinite;z-index:0}
.about figure img{position:relative;z-index:1}
.about h2{font-size:clamp(40px,5vw,64px)}
.about .kicker{font-family:var(--script);font-size:32px;color:var(--purple)}
.about p.txt{margin-top:18px;font-size:18px;color:#4c3d60}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.pills li{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;background:#fff;font-weight:700;box-shadow:0 4px 0 rgba(42,24,64,.08);transition:transform .3s var(--spring)}
.pills li:nth-child(5n+1) i{background:var(--orange)}
.pills li:nth-child(5n+2) i{background:var(--purple)}
.pills li:nth-child(5n+3) i{background:var(--sky-d)}
.pills li:nth-child(5n+4) i{background:var(--blue)}
.pills li:nth-child(5n+5) i{background:var(--yellow)}
.pills i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.pills i svg{width:16px;height:16px;color:#fff}
@media (hover:hover){.pills li:hover{transform:translateY(-3px) rotate(-2deg)}}
@media (max-width:900px){.about .grid{grid-template-columns:1fr}.about figure{max-width:480px;margin-inline:auto}}

/* ---------- Servicios ---------- */
.services .filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:-20px 0 44px}
.filters button{font-family:var(--display);font-weight:600;font-size:16px;min-height:46px;padding:0 20px;border-radius:999px;border:3px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;transition:transform .25s var(--spring),background-color .2s ease,color .2s ease}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff}
.filters button:active{transform:scale(.95)}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.svc{--c:var(--orange);--cd:var(--orange-d);position:relative;display:flex;flex-direction:column;border-radius:28px;background:#fff;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--c);overflow:hidden;
  transition:transform .35s var(--spring),box-shadow .35s var(--spring),opacity .3s ease}
.svc[hidden]{display:none!important}
.svc.c-purple{--c:var(--purple)} .svc.c-sky{--c:var(--sky-d)} .svc.c-blue{--c:var(--blue)} .svc.c-yellow{--c:var(--yellow)}
@media (hover:hover){.svc:hover{transform:translate(-4px,-4px) rotate(-.6deg);box-shadow:14px 14px 0 var(--c)}}
.svc .banner{aspect-ratio:4/3;max-width:100%;background:var(--c);overflow:hidden;border-bottom:3px solid var(--ink)}
.svc .banner img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s var(--ease-out)}
@media (hover:hover){.svc:hover .banner img{transform:scale(1.06)}}
.svc .pet{position:absolute;right:4px;top:-74px;width:108px;height:108px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(42,24,64,.25));transform-origin:50% 100%;transition:transform .45s var(--spring);pointer-events:none}
.svc .pet-bug{position:absolute;right:104px;top:-34px;width:46px;height:46px;object-fit:contain;animation:float 3s ease-in-out infinite;pointer-events:none}
@media (hover:hover){.svc:hover .pet{transform:translateY(-8px) rotate(-6deg) scale(1.06)}}
.svc .body>.cat,.svc .body>h3{padding-right:84px}
.svc.wide .pet{top:14px;right:14px;width:120px;height:120px}
.svc.wide .pet-bug{display:none}
.svc .body{position:relative;padding:24px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.svc .cat{font-family:var(--script);font-size:22px;color:var(--c);line-height:1}
.svc.c-yellow .cat{color:#b58710}
.svc h3{font-size:28px}
.svc p{color:#4c3d60;font-size:16px}
.svc ul.benefits{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:15.5px;font-weight:700}
.svc ul.benefits li{display:flex;gap:8px;align-items:flex-start}
.svc ul.benefits svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--c)}
.svc .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px}
.svc .acts button,.svc .acts a{font-family:var(--display);font-weight:600;font-size:15px;min-height:44px;padding:0 18px;border-radius:999px;border:3px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:transform .2s var(--spring),background-color .2s ease}
.svc .acts .primary{background:var(--ink);color:#fff}
.svc .acts button:active,.svc .acts a:active{transform:scale(.95)}
.svc.wide{grid-column:span 2;flex-direction:row}
.svc-cta{background:var(--yellow);overflow:hidden}
.svc-cta .body{justify-content:center}
.svc-cta .cat{color:var(--purple)!important}
.svc-cta h3{font-size:34px}
.svc-cta p{color:var(--ink)}
.svc-cta .cta-paw{position:absolute;right:-30px;top:-20px;width:160px;height:160px;color:#fff;opacity:.5;transform:rotate(18deg);animation:wiggle 3s var(--spring) infinite}
.svc.wide .banner{flex:0 0 48%;border-bottom:0;border-right:3px solid var(--ink);display:grid;place-items:center;background:var(--sky)}
.svc.wide .banner img{object-fit:contain;object-position:center;padding:18px}
@media (max-width:1020px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.svc-grid{grid-template-columns:1fr}.svc.wide{grid-column:auto;flex-direction:column}.svc.wide .banner{border-right:0;border-bottom:3px solid var(--ink);aspect-ratio:4/3}.svc.wide .pet{top:-92px;bottom:auto}}

/* Lightbox de precios */
dialog.lb{border:0;padding:0;background:transparent;max-width:min(920px,94vw);max-height:92vh}
dialog.lb::backdrop{background:rgba(42,24,64,.75);backdrop-filter:blur(4px)}
dialog.lb[open]{animation:pop .35s var(--spring)}
dialog.lb img{max-height:84vh;width:auto;margin:auto;border-radius:20px;background:#fff}
dialog.lb button{position:absolute;top:10px;right:10px;width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);background:var(--yellow);font-size:22px;font-weight:800;cursor:pointer;color:var(--ink)}

/* ---------- Info strip (azul con huesitos) ---------- */
.info{background:var(--blue);color:#fff;padding-block:150px}
.info .wave{position:absolute;left:0;right:0;width:100%;height:90px}
.info .wave.t{top:-1px} .info .wave.b{bottom:-1px}
.pattern{position:absolute;inset:0;opacity:.12;pointer-events:none;background-size:180px 180px}
.info .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;text-align:center}
.info .grid > div{display:flex;flex-direction:column;align-items:center;gap:14px}
.info img{width:150px;height:150px;object-fit:contain;transition:transform .5s var(--spring)}
@media (hover:hover){.info .grid > div:hover img{transform:rotate(-10deg) scale(1.08)}}
.info h3{font-size:26px;color:var(--yellow)}
.info p{max-width:26ch;font-size:17px}
@media (max-width:820px){.info .grid{grid-template-columns:1fr}}

/* ---------- Opiniones ---------- */
.reviews{overflow:hidden;padding-block:110px 90px}
.rev-track{display:flex;gap:24px;width:max-content;animation:marquee 60s linear infinite;padding-block:30px 10px}
.rev-track:hover{animation-play-state:paused}
.rev{position:relative;width:min(380px,82vw);flex:none;background:#fff;border-radius:28px;padding:56px 28px 28px;border:3px solid var(--ink)}
.rev:nth-child(4n+1){transform:rotate(-1.5deg);box-shadow:8px 8px 0 var(--orange)}
.rev:nth-child(4n+2){transform:rotate(1.2deg);box-shadow:8px 8px 0 var(--purple)}
.rev:nth-child(4n+3){transform:rotate(-1deg);box-shadow:8px 8px 0 var(--sky-d)}
.rev:nth-child(4n+4){transform:rotate(1.5deg);box-shadow:8px 8px 0 var(--yellow)}
.rev .av{position:absolute;top:-32px;left:24px;width:64px;height:64px;border-radius:20px;border:3px solid var(--ink);display:grid;place-items:center;font-family:var(--script);font-size:32px;color:#fff}
.rev:nth-child(4n+1) .av{background:var(--orange)} .rev:nth-child(4n+2) .av{background:var(--purple)}
.rev:nth-child(4n+3) .av{background:var(--sky-d)} .rev:nth-child(4n+4) .av{background:var(--yellow);color:var(--ink)}
.rev .q{position:absolute;top:14px;right:22px;font-family:var(--script);font-size:64px;line-height:1;color:#e9def6}
.rev p{font-size:16px;color:#4c3d60}
.rev b{display:block;margin-top:16px;font-family:var(--display);font-size:18px}
.stars{display:flex;gap:2px;margin-bottom:10px;color:#f2b01e}
.stars svg{width:18px;height:18px}

/* ---------- CTA con perro ---------- */
.cta{background:var(--sky);overflow:hidden;padding-block:140px 120px}
.cta .wave{position:absolute;left:0;right:0;width:100%;height:80px}
.cta .wave.t{top:-1px} .cta .wave.b{bottom:-1px}
.cta .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.cta h2{font-size:clamp(40px,5vw,64px);color:#fff;text-shadow:0 4px 0 rgba(31,104,140,.35)}
.cta h2 .script{color:var(--purple);text-shadow:none}
.cta p{color:#174e66;font-size:19px;margin-top:16px;max-width:42ch;font-weight:700}
.cta .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cta .dog{position:relative;max-width:420px;margin-inline:auto}
.cta .dog::before{content:"";position:absolute;inset:18% 6% 8% 6%;background:var(--yellow);border-radius:50%;animation:morph 8s ease-in-out infinite}
.cta .dog img{position:relative;animation:float 5s ease-in-out infinite}
@media (max-width:820px){.cta .grid{grid-template-columns:1fr}}

/* ---------- Sucursales ---------- */
.branches .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.br{position:relative;border-radius:32px;padding:36px 30px 30px;color:#fff;display:flex;flex-direction:column;gap:18px;overflow:hidden;transition:transform .35s var(--spring)}
.br:nth-child(1){background:var(--purple)} .br:nth-child(2){background:var(--orange)} .br:nth-child(3){background:var(--blue)}
@media (hover:hover){.br:hover{transform:translateY(-6px) rotate(-1deg)}}
.br .bigpaw{position:absolute;right:-30px;bottom:-30px;width:170px;height:170px;opacity:.14;color:#fff;transform:rotate(-18deg)}
.br .zone{font-family:var(--script);font-size:22px;color:var(--yellow);line-height:1}
.br:nth-child(2) .zone{color:var(--ink)}
.br h3{font-size:34px;margin-top:4px}
.br address{font-style:normal;font-size:16px;opacity:.95}
.br .tel{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.br .hrs{font-size:15px;opacity:.85}
.br .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;position:relative}
.br .acts a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.5);color:#fff;text-decoration:none;font-weight:700;font-size:15px;transition:background-color .2s ease,transform .2s var(--spring)}
.br .acts a.wa{background:#fff;color:var(--ink);border-color:#fff}
.br .acts a:active{transform:scale(.95)}
@media (hover:hover){.br .acts a:hover{background:rgba(255,255,255,.3)}.br .acts a.wa:hover{background:var(--yellow);border-color:var(--yellow)}}
.br .acts svg{width:18px;height:18px}
.map{margin-top:32px;border-radius:32px;overflow:hidden;border:3px solid var(--ink);aspect-ratio:21/8;max-width:100%;background:var(--cream)}
.map iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:980px){.branches .grid{grid-template-columns:1fr}.map{aspect-ratio:4/3}}


/* ---------- Footer compacto ---------- */
.site-foot{position:relative;background:var(--purple);color:#fff;padding-block:72px 22px;overflow:hidden}
.site-foot .wave{position:absolute;top:-1px;left:0;right:0;width:100%;height:46px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.foot-brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.foot-brand img{width:64px;height:64px;background:#fff;border-radius:50%;padding:3px}
.foot-brand .script{font-size:clamp(24px,2.4vw,30px);line-height:1}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--display);font-weight:600}
.foot-links a{text-decoration:none;opacity:.9}.foot-links a:hover{opacity:1;color:var(--yellow)}
.social{display:flex;gap:10px}
.social a{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.14);display:grid;place-items:center;transition:transform .3s var(--spring),background-color .2s ease}
.social a:hover{background:var(--yellow);color:var(--ink);transform:rotate(-8deg) scale(1.08)}
.social svg{width:22px;height:22px}
.legal{margin-top:22px;padding-top:16px;border-top:2px dashed rgba(255,255,255,.25);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font-size:13.5px;opacity:.8}

/* WhatsApp flotante */
.wa-float{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:50;width:62px;height:62px;border-radius:50%;background:#25a35a;color:#fff;display:grid;place-items:center;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .25s var(--spring)}
.wa-float:hover{transform:rotate(-10deg) scale(1.06)}
.wa-float:active{transform:scale(.92)}
.wa-float svg{width:32px;height:32px}

/* ---------- Movimiento ---------- */
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes wiggle{0%,70%,100%{rotate:0deg}75%{rotate:-8deg}85%{rotate:6deg}92%{rotate:-3deg}}
@keyframes morph{0%,100%{border-radius:58% 42% 50% 50%/55% 50% 50% 45%}50%{border-radius:44% 56% 40% 60%/48% 60% 40% 52%}}
@keyframes step{0%{opacity:0;scale:.6}12%{opacity:1;scale:1}55%{opacity:1}75%,100%{opacity:0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(247,201,72,.7)}100%{box-shadow:0 0 0 26px rgba(247,201,72,0)}}
@keyframes pop{from{opacity:0;scale:.92}to{opacity:1;scale:1}}
.js .reveal{opacity:0;translate:0 28px;scale:.97;transition:opacity .7s var(--ease-out),translate .8s var(--spring),scale .8s var(--spring)}
.js .reveal.in{opacity:1;translate:0 0;scale:1}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;translate:0 0;scale:1}
  .paw-trail .paw{opacity:1}
}

/* ---------- Página de contacto ---------- */
.nav ul a[aria-current="page"]{background:#f4ecfd;color:var(--purple)}
.hero-sm{padding-block:110px 150px}
.hero-sm .hero-grid{grid-template-columns:1.2fr .8fr}
.hero-sm h1{font-size:clamp(56px,8vw,112px)}
.crumbs{display:flex;gap:10px;align-items:center;font-family:var(--display);font-weight:600;color:var(--yellow);margin-bottom:10px}
.crumbs a{color:#fff;text-decoration:none}.crumbs a:hover{text-decoration:underline}
.hero-sm .sub{max-width:34ch}
.contact-art{position:relative;aspect-ratio:1/1;max-width:100%}
.contact-art .blob{position:absolute;background:#fff;border-radius:58% 42% 50% 50%/55% 50% 50% 45%;animation:morph 9s ease-in-out infinite}
.contact-art .b1{inset:10% 4% 4% 10%}
.contact-art .d-marche{position:absolute;inset:6% 6% 0 6%;width:88%;filter:drop-shadow(0 18px 24px rgba(42,24,64,.28));animation:float 6s ease-in-out infinite}
.contact-art .woof.w1{width:34%;right:-4%;top:2%;font-size:clamp(20px,2.4vw,32px)}
@media (max-width:900px){.hero-sm .hero-grid{grid-template-columns:1fr}.contact-art{max-width:360px;margin-inline:auto;width:100%}}
.channels-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:-90px;position:relative;z-index:3}
.chan{display:flex;flex-direction:column;gap:2px;padding:26px 26px 24px;border-radius:28px;background:#fff;border:3px solid var(--ink);text-decoration:none;color:var(--ink);transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.chan.c-wa{box-shadow:8px 8px 0 #25a35a}.chan.c-mail{box-shadow:8px 8px 0 var(--purple)}.chan.c-time{box-shadow:8px 8px 0 var(--yellow)}
@media (hover:hover){a.chan:hover{transform:translate(-4px,-4px) rotate(-.8deg)}}
.chan-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;margin-bottom:12px}
.c-wa .chan-ico{background:#25a35a}.c-mail .chan-ico{background:var(--purple)}.c-time .chan-ico{background:var(--orange)}
.chan-ico svg{width:28px;height:28px}
.chan-k{font-family:var(--script);font-size:22px;color:var(--orange);line-height:1}
.chan-v{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.8vw,24px);overflow-wrap:anywhere}
.chan-h{font-size:15px;color:#5a4a6e}
@media (max-width:860px){.channels-grid{grid-template-columns:1fr;margin-top:-70px}}
.cita{background:var(--cream);overflow:hidden}
.cita-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.kicker-l{font-size:32px;color:var(--purple)}
.cita h2{font-size:clamp(38px,4.6vw,58px)}
.cita-p{margin-top:16px;font-size:18px;color:#4c3d60;max-width:42ch}
.cita-dog{width:min(300px,80%);margin-top:28px;animation:float 5s ease-in-out infinite;filter:drop-shadow(0 14px 18px rgba(42,24,64,.2))}
.form{background:#fff;border:3px solid var(--ink);border-radius:32px;padding:clamp(22px,3vw,36px);box-shadow:10px 10px 0 var(--sky-d);display:grid;gap:16px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form label{display:grid;gap:6px;font-family:var(--display);font-weight:600;font-size:15px}
.form input,.form select,.form textarea{font:500 16px/1.4 var(--body);color:var(--ink);background:#fbf7ff;border:2px solid #d9cbea;border-radius:14px;padding:12px 14px;min-height:48px;width:100%;transition:border-color .2s ease,box-shadow .2s ease}
.form textarea{resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(127,47,216,.15)}
.form .btn{justify-self:start;margin-top:4px}
.form-error{color:#b3261e;font-weight:700;font-size:15px}
.form-ok{color:#1d7a43;font-weight:700;font-size:15px}
@media (max-width:900px){.cita-grid{grid-template-columns:1fr}.cita-dog{display:none}}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.form .hint{font-family:var(--body);font-weight:500;font-size:13px;color:#6b5a80}
/* El formulario de WhatsApp solo se muestra en celular y tablet */
@media (min-width:861px){.mobile-only{display:none!important}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.legal .dev{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.5)}.legal .dev:hover{color:var(--yellow);border-color:var(--yellow)}