/* ============ Huellipaz Mascotas — Design tokens (primitive → semantic → component) ============ */
:root{
  /* primitive */
  --teal-900:#0B3A41; --teal-700:#0A7F8B; --teal-500:#22B5C2; --teal-300:#8EDDE4; --teal-100:#DDF5F7; --teal-50:#F0FBFC;
  --sky-200:#BFE9F2; --sky-100:#E3F6FA;
  --cream:#FFFBF4; --white:#fff;
  --gold-400:#F6C945; --gold-200:#FCE9A8;
  --peach-400:#FFAE82; --peach-100:#FFE6D6;
  --brown-600:#8B5E3C;
  --green-700:#138F4B; --green-800:#0E7A3E;
  /* semantic */
  --bg:var(--cream); --surface:var(--white); --ink:var(--teal-900); --ink-soft:#3E6168;
  --primary:var(--teal-700); --primary-bright:var(--teal-500); --accent:var(--gold-400); --warm:var(--peach-400);
  --wa:var(--green-700);
  /* scale */
  --r-sm:14px; --r-md:22px; --r-lg:32px; --r-pill:999px;
  --shadow-clay:0 10px 0 -2px rgba(10,127,139,.10), 0 18px 40px -12px rgba(11,58,65,.22), inset 0 -6px 0 rgba(10,127,139,.06), inset 0 4px 0 rgba(255,255,255,.9);
  --shadow-soft:0 12px 32px -14px rgba(11,58,65,.28);
  --ease:cubic-bezier(.22,.8,.3,1);
  --font-head:'Fredoka',system-ui,sans-serif; --font-body:'Nunito',system-ui,sans-serif;
  --container:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--bg);overflow-x:hidden}
body.loading{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;font-weight:600;letter-spacing:.005em}
.container{width:min(var(--container),100% - 2.5rem);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold-400);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:10px;z-index:10000}
.skip:focus{left:8px}

/* ============ Preloader ============ */
#preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:linear-gradient(180deg,#CDEFF5 0%,#EAF9FA 55%,#FFFBF4 100%);transition:transform .6s var(--ease),opacity .4s .2s;overflow:hidden}
#preloader.done{transform:translateY(-100%);opacity:0;pointer-events:none}
.pl-cloud{position:absolute;background:#fff;border-radius:var(--r-pill);opacity:.85;filter:blur(1px);animation:drift 14s linear infinite}
.pl-cloud::before,.pl-cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.pl-cloud.c1{width:170px;height:46px;top:16%;left:-200px}
.pl-cloud.c1::before{width:70px;height:70px;top:-34px;left:26px}.pl-cloud.c1::after{width:52px;height:52px;top:-22px;left:86px}
.pl-cloud.c2{width:220px;height:56px;top:68%;left:-260px;animation-duration:20s;animation-delay:-6s}
.pl-cloud.c2::before{width:84px;height:84px;top:-44px;left:34px}.pl-cloud.c2::after{width:64px;height:64px;top:-28px;left:112px}
.pl-cloud.c3{width:130px;height:36px;top:42%;left:-160px;animation-duration:17s;animation-delay:-11s;opacity:.6}
.pl-cloud.c3::before{width:54px;height:54px;top:-26px;left:20px}.pl-cloud.c3::after{width:40px;height:40px;top:-16px;left:66px}
@keyframes drift{to{transform:translateX(calc(100vw + 400px))}}
.pl-stage{position:relative;text-align:center;width:min(440px,90vw)}
.pl-glow{position:absolute;left:50%;top:44%;width:340px;height:340px;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(246,201,69,.55),rgba(246,201,69,0) 68%);animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.18);opacity:.75}}
.pl-cross{position:relative;width:150px;height:150px;margin:0 auto -34px;z-index:2}
.pl-cross .p{position:absolute;width:48px;height:48px;color:var(--teal-500);opacity:0;transform:scale(.2) rotate(-25deg);animation:pawPop .55s var(--ease) forwards}
.pl-cross .p:nth-child(1){left:51px;top:0;animation-delay:.1s}
.pl-cross .p:nth-child(2){left:0;top:51px;animation-delay:.3s}
.pl-cross .p:nth-child(3){left:51px;top:51px;animation-delay:.5s;color:var(--gold-400)}
.pl-cross .p:nth-child(4){left:102px;top:51px;animation-delay:.7s}
.pl-cross .p:nth-child(5){left:51px;top:102px;animation-delay:.9s}
@keyframes pawPop{70%{transform:scale(1.15) rotate(4deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.pl-logo{position:relative;z-index:1;background:#fff;border-radius:var(--r-lg);padding:46px 22px 18px;box-shadow:var(--shadow-clay);animation:floaty 3.4s ease-in-out infinite}
.pl-logo img{width:100%;height:auto;border-radius:12px}
@keyframes floaty{50%{transform:translateY(-8px)}}
.pl-text{margin-top:1.6rem;font-family:var(--font-head);color:var(--primary);font-size:1.15rem;letter-spacing:.04em}
.pl-bar{height:10px;border-radius:var(--r-pill);background:rgba(255,255,255,.8);margin:.9rem auto 0;width:min(260px,70%);overflow:hidden;box-shadow:inset 0 2px 4px rgba(11,58,65,.12)}
.pl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal-300),var(--teal-500),var(--gold-400));border-radius:inherit;transition:width .25s linear}
.pl-star{position:absolute;color:var(--gold-400);animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.25;transform:scale(.6)}}

/* ============ Header ============ */
.site-header{position:fixed;inset:0 0 auto 0;z-index:900;transition:background .3s,box-shadow .3s,padding .3s;padding:.9rem 0}
.site-header.scrolled{background:rgba(255,251,244,.92);backdrop-filter:blur(12px);box-shadow:0 6px 24px -14px rgba(11,58,65,.3);padding:.45rem 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:block;background:#fff;border-radius:16px;padding:4px 10px;box-shadow:var(--shadow-soft)}
.brand img{height:46px;width:auto}
.menu{display:flex;gap:.25rem;list-style:none;align-items:center}
.menu a{display:block;padding:.55rem .9rem;border-radius:var(--r-pill);font-weight:700;font-size:.97rem;color:var(--ink);transition:background .2s,color .2s}
.menu a:hover{background:var(--teal-100);color:var(--primary)}
.burger{display:none;width:48px;height:48px;border:0;border-radius:16px;background:#fff;box-shadow:var(--shadow-soft);cursor:pointer;place-items:center}
.burger span,.burger span::before,.burger span::after{display:block;width:22px;height:3px;background:var(--ink);border-radius:3px;position:relative;transition:.3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;rotate:45deg}.burger[aria-expanded=true] span::after{top:0;rotate:-45deg}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.8rem 1.5rem;border:0;border-radius:var(--r-pill);font:700 1rem var(--font-body);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,background .2s;touch-action:manipulation}
.btn svg{width:22px;height:22px;flex:none}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 6px 0 var(--green-800),0 14px 24px -10px rgba(19,143,75,.6)}
.btn-wa:hover{transform:translateY(-2px);background:#0F8043}
.btn-wa:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green-800)}
.btn-soft{background:#fff;color:var(--primary);box-shadow:0 6px 0 var(--teal-100),0 14px 24px -12px rgba(11,58,65,.3)}
.btn-soft:hover{transform:translateY(-2px)}
.btn-soft:active{transform:translateY(4px);box-shadow:0 2px 0 var(--teal-100)}
.btn-sm{min-height:44px;padding:.55rem 1.1rem;font-size:.95rem}

/* ============ Sections ============ */
section{position:relative}
.section{padding:clamp(4rem,9vw,7rem) 0}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font:700 .9rem var(--font-head);letter-spacing:.14em;text-transform:uppercase;color:var(--primary);background:var(--teal-100);padding:.35rem .9rem;border-radius:var(--r-pill)}
.section-head{text-align:center;max-width:720px;margin:0 auto 3rem}
.section-head h2{font-size:clamp(2rem,4.5vw,3.1rem);margin:1rem 0 .8rem;color:var(--ink)}
.section-head p{color:var(--ink-soft)}
.bg-sky{background:linear-gradient(180deg,var(--cream),var(--sky-100) 40%,var(--sky-100) 60%,var(--cream))}
.bg-white{background:#fff}

/* Paw-cross divider (marquee) */
.divider{position:relative;overflow:hidden;padding:1.6rem 0;margin:.5rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:repeating-linear-gradient(90deg,var(--teal-300) 0 12px,transparent 12px 26px);opacity:.7}
.divider .track{display:flex;width:max-content;animation:slide 38s linear infinite}
.divider.rev .track{animation-direction:reverse;animation-duration:46s}
.divider:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.paw-cross{width:64px;height:64px;position:relative;flex:none;margin:0 clamp(1.6rem,4vw,3.2rem);color:var(--teal-500);background:var(--bg);border-radius:50%;animation:wiggle 3.6s ease-in-out infinite}
.paw-cross.c2{color:var(--teal-700)}.paw-cross.c3{color:#E3A800}.paw-cross.c4{color:var(--peach-400)}
.bg-sky .divider .paw-cross,.divider.on-sky .paw-cross{background:transparent}
.paw-cross svg{position:absolute;width:21px;height:21px}
.paw-cross svg:nth-child(1){left:21.5px;top:0}.paw-cross svg:nth-child(2){left:0;top:21.5px}.paw-cross svg:nth-child(3){left:21.5px;top:21.5px;color:var(--gold-400)}.paw-cross svg:nth-child(4){left:43px;top:21.5px}.paw-cross svg:nth-child(5){left:21.5px;top:43px}
@keyframes wiggle{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-8px)}}

/* ============ Hero ============ */
.hero{min-height:100svh;display:grid;align-items:center;padding:8rem 0 6rem;background:linear-gradient(180deg,#CDEFF5 0%,#E6F8FA 55%,var(--cream) 100%);overflow:hidden}
.hero .container{display:grid;justify-items:center;text-align:center;position:relative;z-index:2}
.hero h1{font-size:clamp(2.3rem,6.4vw,5rem);margin:1.2rem 0 1.4rem;color:var(--teal-900);text-transform:uppercase;letter-spacing:.04em;line-height:1.08;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--primary);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.05em;height:.28em;background:var(--gold-200);z-index:-1;border-radius:99px}
.hero p.lead{font-size:1.25rem;color:var(--ink-soft);max-width:640px}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2rem}
.hero-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:2rem;list-style:none}
.hero-badges li{background:rgba(255,255,255,.8);padding:.35rem .9rem;border-radius:var(--r-pill);font-weight:700;font-size:.92rem;color:var(--primary);box-shadow:var(--shadow-soft)}
.hero-art{position:relative;aspect-ratio:1;max-width:520px;margin-inline:auto;width:100%}
.hero-sun{position:absolute;inset:6% 6% 12% 6%;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.85) 40%,rgba(246,201,69,.28) 70%,transparent 72%);animation:breathe 6s ease-in-out infinite}
.pet{position:absolute;filter:drop-shadow(0 18px 18px rgba(11,58,65,.18))}
.pet.dog{width:50%;left:3%;bottom:16%;animation:bob 5s ease-in-out infinite}
.pet.cat{width:46%;right:2%;bottom:20%;animation:bob 5.8s ease-in-out -2s infinite}
@keyframes bob{50%{transform:translateY(-14px)}}
.halo{transform-origin:center;animation:halo 3s ease-in-out infinite}
@keyframes halo{50%{opacity:.75;transform:translateY(-3px)}}
.hero-cloud{position:absolute;left:4%;right:4%;bottom:8%;height:26%;z-index:1}
.cloud{position:absolute;background:#fff;border-radius:99px;filter:drop-shadow(0 14px 18px rgba(11,58,65,.12))}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.hero-cloud .cloud{inset:30% 0 0 0}
.hero-cloud .cloud::before{width:34%;aspect-ratio:1;left:10%;top:-70%}
.hero-cloud .cloud::after{width:42%;aspect-ratio:1;left:42%;top:-90%}
.bg-cloud{position:absolute;opacity:.9;animation:drift 60s linear infinite;z-index:0}
.bg-cloud.a{width:200px;height:52px;top:14%;left:-240px}
.bg-cloud.a::before{width:80px;height:80px;top:-38px;left:34px}.bg-cloud.a::after{width:60px;height:60px;top:-26px;left:100px}
.bg-cloud.b{width:260px;height:64px;top:60%;left:-300px;animation-duration:85s;animation-delay:-30s;opacity:.7}
.bg-cloud.b::before{width:100px;height:100px;top:-50px;left:40px}.bg-cloud.b::after{width:76px;height:76px;top:-34px;left:130px}
.star{position:absolute;color:var(--gold-400);animation:twinkle 3s ease-in-out infinite;z-index:1}
.steps-paws{position:absolute;inset:0;pointer-events:none;z-index:1}
.steps-paws svg{position:absolute;width:26px;height:26px;color:var(--teal-300);opacity:0;animation:step 9s ease-in-out infinite}
@keyframes step{0%{opacity:0}8%,30%{opacity:.55}45%,100%{opacity:0}}
.wave{position:absolute;left:0;right:0;bottom:-1px;height:70px;color:var(--cream)}
.wave svg{width:100%;height:100%}

/* ============ Servicios ============ */
.grid{display:grid;gap:1.6rem}
.services{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border-radius:var(--r-lg);padding:2rem 1.7rem;box-shadow:var(--shadow-clay);transition:transform .35s var(--ease);position:relative}
.card:hover{transform:translateY(-8px) rotate(-.4deg)}
.icon-blob{width:68px;height:68px;border-radius:24px 24px 24px 8px;display:grid;place-items:center;margin-bottom:1.2rem;background:var(--teal-100);color:var(--primary);box-shadow:inset 0 -5px 0 rgba(10,127,139,.12)}
.icon-blob svg{width:34px;height:34px}
.card:nth-child(3n+2) .icon-blob{background:var(--gold-200);color:#8A6500}
.card:nth-child(3n) .icon-blob{background:var(--peach-100);color:#B3541F}
.card h3{font-size:1.45rem;margin-bottom:.5rem}
.card p{color:var(--ink-soft);font-size:1rem}
.card .link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;font-weight:800;color:var(--primary);min-height:44px}
.card .link:hover{gap:.7rem}
.card .link{transition:gap .2s}
.card.featured{background:linear-gradient(160deg,#fff,var(--teal-50));outline:3px solid var(--gold-200)}
.tag{position:absolute;top:-14px;right:20px;background:var(--gold-400);color:var(--teal-900);font:700 .85rem var(--font-head);padding:.3rem .9rem;border-radius:var(--r-pill);box-shadow:0 4px 0 rgba(0,0,0,.08)}

/* ============ Planes ============ */
.plans{grid-template-columns:repeat(3,1fr);align-items:stretch}
.plan{display:flex;flex-direction:column;text-align:center}
.plan .plan-ico{width:84px;height:84px;margin:0 auto 1rem;border-radius:50%;background:var(--teal-100);display:grid;place-items:center;color:var(--primary)}
.plan.pro .plan-ico{background:var(--gold-200);color:#8A6500}
.plan h3{font-size:1.7rem}
.plan .sub{color:var(--ink-soft);margin:.3rem 0 1.2rem}
.plan ul{list-style:none;text-align:left;margin-bottom:1.6rem;flex:1}
.plan li{display:flex;gap:.65rem;padding:.4rem 0;color:var(--ink)}
.plan li svg{width:22px;height:22px;color:var(--teal-500);flex:none;margin-top:3px}
.note{max-width:760px;margin:2.5rem auto 0;text-align:center;color:var(--ink-soft);background:var(--teal-50);padding:1.2rem 1.5rem;border-radius:var(--r-md);border:2px dashed var(--teal-300)}

/* ============ Proceso ============ */
.process{grid-template-columns:repeat(4,1fr);counter-reset:s}
.step{text-align:center;padding:1rem}
.step .n{width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;font:600 1.6rem var(--font-head);color:#fff;background:linear-gradient(145deg,var(--teal-500),var(--teal-700));box-shadow:0 6px 0 rgba(10,127,139,.25)}
.step h3{font-size:1.25rem;margin-bottom:.4rem}.step p{color:var(--ink-soft);font-size:.98rem}

/* ============ Catálogo ============ */
.catalog{grid-template-columns:repeat(3,1fr)}
.product{padding:0;overflow:hidden;display:flex;flex-direction:column}
.product .pic{aspect-ratio:4/3;display:grid;place-items:center;background:var(--teal-100)}
.product:nth-child(3n+2) .pic{background:var(--gold-200)}
.product:nth-child(3n) .pic{background:var(--peach-100)}
.product .pic svg{width:55%;height:auto;transition:transform .4s var(--ease)}
.product:hover .pic svg{transform:scale(1.08) rotate(-3deg)}
.product .body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.product h3{font-size:1.3rem}
.product p{color:var(--ink-soft);font-size:.97rem;margin:.35rem 0 1rem;flex:1}
.catalog-more{margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.2rem 2rem;background:linear-gradient(120deg,var(--teal-700),var(--teal-500));color:#fff;border-radius:var(--r-lg);padding:1.8rem 2rem;box-shadow:var(--shadow-clay)}
.catalog-more p{font:500 1.25rem var(--font-head);max-width:560px;text-align:center}

/* ============ Paz / valores ============ */
.peace{background:linear-gradient(180deg,var(--teal-900),#0F4C55);color:#fff;overflow:hidden}
.peace .container{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;position:relative;z-index:2}
.peace h2{font-size:clamp(2rem,4.5vw,3rem);margin:1rem 0}
.peace .eyebrow{background:rgba(255,255,255,.12);color:var(--gold-200)}
.peace blockquote{font:400 1.35rem/1.6 var(--font-head);color:var(--gold-200);border-left:4px solid var(--gold-400);padding-left:1.2rem;margin:1.4rem 0}
.peace p{color:#CFE9EC}
.values{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.value{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:1.4rem;backdrop-filter:blur(4px)}
.value svg{width:32px;height:32px;color:var(--gold-400);margin-bottom:.6rem}
.value h3{font-size:1.2rem;margin-bottom:.25rem}.value p{font-size:.95rem}
.peace .star{opacity:.7}

/* ============ FAQ ============ */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:1rem}
details{background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-soft);overflow:hidden}
summary{list-style:none;cursor:pointer;padding:1.15rem 1.5rem;font:600 1.15rem var(--font-head);display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:56px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.8rem;color:var(--primary);transition:transform .3s;line-height:1}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 1.5rem 1.3rem;color:var(--ink-soft)}

/* ============ Contacto ============ */
.contact-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.5rem;align-items:start}
.contact-info h2{font-size:clamp(2rem,4vw,2.8rem);margin:1rem 0}
.contact-info p{color:var(--ink-soft);margin-bottom:1.5rem}
.info-list{list-style:none;display:grid;gap:1rem;margin-bottom:1.8rem}
.info-list li{display:flex;gap:.9rem;align-items:flex-start}
.info-list .ib{width:46px;height:46px;border-radius:16px;background:var(--teal-100);color:var(--primary);display:grid;place-items:center;flex:none}
.info-list svg{width:22px;height:22px}
.info-list b{display:block;font-family:var(--font-head);font-weight:600}
form.card{padding:2.2rem}
.field{margin-bottom:1.1rem}
label{display:block;font-weight:800;font-size:.95rem;margin-bottom:.35rem}
label .req{color:#C2410C}
input,select,textarea{width:100%;min-height:50px;padding:.75rem 1rem;border:2px solid var(--teal-100);border-radius:var(--r-sm);font:inherit;color:var(--ink);background:var(--teal-50);transition:border-color .2s,background .2s,box-shadow .2s}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal-500);background:#fff;box-shadow:0 0 0 4px rgba(34,181,194,.2)}
.field.invalid input,.field.invalid select{border-color:#C2410C;background:#FFF5EE}
.err{display:none;color:#B3360A;font-size:.9rem;margin-top:.3rem;font-weight:700}
.field.invalid .err{display:block}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-ok{display:none;margin-top:1rem;padding:1rem 1.2rem;background:#E7F8EE;color:#0B5A2C;border-radius:var(--r-sm);font-weight:700}
.form-ok.show{display:block}
.form-hint{font-size:.88rem;color:var(--ink-soft);margin-top:.8rem;text-align:center}

/* ============ Footer ============ */
footer{background:var(--teal-900);color:#CFE9EC;padding:4rem 0 1.5rem;position:relative}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.foot-logo{display:inline-block;background:#fff;border-radius:18px;padding:6px 14px;margin-bottom:1rem}
.foot-logo img{height:56px;width:auto}
footer h4{color:#fff;font-size:1.15rem;margin-bottom:1rem}
footer ul{list-style:none;display:grid;gap:.5rem}
footer ul a{display:inline-block;padding:.15rem 0;transition:color .2s}
footer ul a:hover{color:var(--gold-400)}
.socials{display:flex;gap:.7rem;margin-top:1.2rem}
.socials a{width:48px;height:48px;border-radius:16px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;transition:background .2s,transform .2s var(--ease)}
.socials a:hover{background:var(--gold-400);color:var(--teal-900);transform:translateY(-4px)}
.socials svg{width:22px;height:22px}
.foot-bottom{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;font-size:.92rem}

/* Floating WhatsApp */
.fab{position:fixed;right:1.1rem;bottom:1.1rem;z-index:800;width:62px;height:62px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 8px 0 var(--green-800),0 18px 30px -8px rgba(0,0,0,.35);transition:transform .2s var(--ease)}
.fab:hover{transform:translateY(-3px)}
.fab svg{width:32px;height:32px}
.fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--wa);animation:ping 2.4s ease-out infinite}
@keyframes ping{to{transform:scale(1.7);opacity:0}}

/* ============ Reveal ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ============ Responsive ============ */
@media (max-width:980px){
  .services,.catalog,.plans{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,1fr)}
  .hero .container,.peace .container,.contact-wrap{grid-template-columns:1fr}
  .hero{padding-top:7rem;text-align:center}
  .hero p.lead{margin-inline:auto}.hero-cta,.hero-badges{justify-content:center}
  .hero-art{max-width:420px}
  .foot-grid{grid-template-columns:1fr 1fr}.foot-grid>:first-child{grid-column:1/-1}
}
@media (max-width:720px){
  .burger{display:grid}
  .menu{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;background:var(--cream);padding:6rem 1.5rem 2rem;gap:.4rem;transform:translateY(-110%);transition:transform .45s var(--ease);box-shadow:0 20px 40px -20px rgba(0,0,0,.3);z-index:-1}
  .menu.open{transform:none}
  .menu a{font-size:1.15rem;padding:.8rem 1rem}
  .nav{position:relative;z-index:2}
  .brand img{height:40px}
}
@media (max-width:640px){
  .services,.catalog,.plans,.process,.values,.row,.foot-grid{grid-template-columns:1fr}
  .hero h1 em{white-space:normal}
  .divider::before,.divider::after{flex-basis:50px}
  form.card{padding:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============ Services with photos ============ */
.card.service{padding:0;overflow:hidden}
.svc-img{position:relative;aspect-ratio:3/2;overflow:hidden}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card.service:hover .svc-img img{transform:scale(1.07)}
.svc-img::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(11,58,65,.35))}
.svc-img .icon-blob{position:absolute;left:1.2rem;bottom:-1px;z-index:2;margin:0;width:62px;height:62px;border-radius:22px 22px 0 0;background:#fff;box-shadow:none}
.card.service:nth-child(3n+2) .icon-blob{background:#fff;color:#8A6500}
.card.service:nth-child(3n) .icon-blob{background:#fff;color:#B3541F}
.svc-body{padding:1.1rem 1.7rem 1.8rem}
.card.service .tag{z-index:3;top:14px;right:14px}

/* ============ Plans: color + motion ============ */
.plans .plan{border:3px solid #fff;animation:planFloat 6s ease-in-out infinite}
.plans .plan:nth-child(2){animation-delay:-2s}.plans .plan:nth-child(3){animation-delay:-4s}
@keyframes planFloat{50%{translate:0 -10px}}
.plan:hover{animation-play-state:paused;transform:translateY(-6px) scale(1.02)}
.plan:nth-child(1){background:linear-gradient(165deg,#E2F7F9 0%,#A9E4EB 100%);box-shadow:0 10px 0 -2px rgba(10,127,139,.18),0 28px 50px -16px rgba(10,127,139,.55)}
.plan:nth-child(2){background:linear-gradient(165deg,#FFF4C9 0%,#FFD97A 100%);box-shadow:0 10px 0 -2px rgba(214,150,0,.22),0 30px 54px -16px rgba(214,150,0,.6);border-color:#FFF8DD}
.plan:nth-child(3){background:linear-gradient(165deg,#FFEADD 0%,#FFB88E 100%);box-shadow:0 10px 0 -2px rgba(207,100,40,.2),0 28px 50px -16px rgba(207,100,40,.5)}
.plan .plan-ico{background:rgba(255,255,255,.75);box-shadow:inset 0 -5px 0 rgba(11,58,65,.08),0 8px 18px -8px rgba(11,58,65,.35)}
.plan.pro .plan-ico{background:rgba(255,255,255,.8)}
.plan .sub{color:var(--teal-900);opacity:.75}
.plan li svg{color:var(--teal-700)}
.plan:nth-child(2) li svg{color:#A87400}.plan:nth-child(3) li svg{color:#B3541F}
.plan.featured{outline:0}
.plan::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 85% 8%,rgba(255,255,255,.7),transparent 45%);pointer-events:none}
.plan::after{content:"";position:absolute;right:-18px;bottom:-18px;width:120px;height:120px;background:currentColor;opacity:.06;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><ellipse cx="12" cy="16.2" rx="5.4" ry="4.5"/><ellipse cx="4.9" cy="11" rx="2.3" ry="3"/><ellipse cx="9.2" cy="6" rx="2.3" ry="3.1"/><ellipse cx="14.8" cy="6" rx="2.3" ry="3.1"/><ellipse cx="19.1" cy="11" rx="2.3" ry="3"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><ellipse cx="12" cy="16.2" rx="5.4" ry="4.5"/><ellipse cx="4.9" cy="11" rx="2.3" ry="3"/><ellipse cx="9.2" cy="6" rx="2.3" ry="3.1"/><ellipse cx="14.8" cy="6" rx="2.3" ry="3.1"/><ellipse cx="19.1" cy="11" rx="2.3" ry="3"/></svg>') center/contain no-repeat;transform:rotate(-20deg)}
.plan>*{position:relative;z-index:1}
.plan .btn-wa{margin-top:auto}

/* ============ Timeline (Cómo funciona) ============ */
.timeline{position:relative;max-width:1000px;margin-inline:auto;padding:1rem .75rem;overflow-x:clip}
section#proceso{overflow-x:clip}
.tl-line{position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;border-radius:6px;background:repeating-linear-gradient(180deg,var(--teal-100) 0 12px,transparent 12px 22px)}
.tl-line i{position:absolute;left:0;top:0;width:100%;height:0;border-radius:6px;background:linear-gradient(180deg,var(--teal-500),var(--gold-400))}
.tl-item{position:relative;display:grid;grid-template-columns:1fr 84px 1fr;align-items:center;margin-bottom:3.5rem}
.tl-item:last-child{margin-bottom:0}
.tl-dot{grid-column:2;grid-row:1;justify-self:center;width:64px;height:64px;border-radius:50%;background:#fff;color:var(--teal-500);display:grid;place-items:center;box-shadow:0 0 0 6px var(--cream),var(--shadow-soft);z-index:2;transition:transform .5s var(--ease),color .5s,background .5s}
.tl-dot svg{width:30px;height:30px}
.tl-item.in .tl-dot{background:var(--teal-500);color:#fff;transform:scale(1.12) rotate(-8deg);animation:dotPulse 2.6s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 6px var(--cream),0 0 0 6px rgba(34,181,194,.4)}50%{box-shadow:0 0 0 6px var(--cream),0 0 0 18px rgba(34,181,194,0)}}
.tl-photo{grid-row:1;border-radius:36px 36px 36px 8px;overflow:hidden;aspect-ratio:3/2;box-shadow:var(--shadow-clay);border:5px solid #fff;opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.tl-photo img{width:100%;height:100%;object-fit:cover;animation:kenburns 14s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.12) translateX(-2%)}}
.tl-text{grid-row:1;opacity:0;transition:opacity .9s .15s var(--ease),transform .9s .15s var(--ease)}
.tl-text h3{font-size:1.7rem;color:var(--primary);margin-bottom:.4rem}
.tl-text p{color:var(--ink-soft)}
.tl-item.left .tl-photo{grid-column:1;margin-right:1.5rem;transform:translateX(-70px) rotate(-3deg)}
.tl-item.left .tl-text{grid-column:3;margin-left:1.5rem;transform:translateX(70px)}
.tl-item.right .tl-photo{grid-column:3;margin-left:1.5rem;transform:translateX(70px) rotate(3deg)}
.tl-item.right .tl-text{grid-column:1;margin-right:1.5rem;text-align:right;transform:translateX(-70px)}
.tl-item.in .tl-photo,.tl-item.in .tl-text{opacity:1;transform:none}
.tl-item.in .tl-photo{animation:photoFloat 6s ease-in-out 1s infinite}
@keyframes photoFloat{50%{translate:0 -8px}}

/* ============ Catalog photos ============ */
.product .pic{background:var(--teal-100);overflow:hidden}
.product .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.product:hover .pic img{transform:scale(1.08)}
.product .pic{position:relative}

@media (max-width:720px){
  .tl-line{left:32px;margin-left:-3px}
  .tl-item,.tl-item.left,.tl-item.right{grid-template-columns:64px 1fr;column-gap:1rem;row-gap:1rem;align-items:start}
  .tl-dot{grid-column:1;grid-row:1}
  .tl-item .tl-photo,.tl-item.left .tl-photo,.tl-item.right .tl-photo{grid-column:2;grid-row:1;margin:0;transform:translateX(50px)}
  .tl-item .tl-text,.tl-item.left .tl-text,.tl-item.right .tl-text{grid-column:2;grid-row:2;margin:0;text-align:left;transform:translateX(50px)}
  .tl-item.in .tl-photo,.tl-item.in .tl-text{transform:none}
}
@media (prefers-reduced-motion:reduce){.tl-photo,.tl-text{opacity:1!important;transform:none!important}.divider .track{animation:none}}

/* ============ Hero video background ============ */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,58,65,.62) 0%,rgba(11,58,65,.5) 45%,rgba(11,58,65,.72) 100%)}
.hero .bg-cloud{display:none}
.hero .star{z-index:2}
.hero h1{color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.35)}
.hero h1 em{color:var(--gold-200)}
.hero h1 em::after{background:rgba(246,201,69,.35)}
.hero p.lead{color:#F1FBFC;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.hero .eyebrow{background:rgba(255,255,255,.92)}
.hero-badges li{background:rgba(255,255,255,.92)}
.site-header:not(.scrolled) .menu a:not(.btn){color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.site-header:not(.scrolled) .menu a:not(.btn):hover{background:rgba(255,255,255,.2);color:#fff}
@media (max-width:720px){.site-header:not(.scrolled) .menu a:not(.btn){color:var(--ink);text-shadow:none}}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}.hero{background:url(assets/video/poster.jpg) center/cover}}

/* ============ Responsive polish ============ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:720px){
  .timeline{padding-inline:1.1rem}
  .hero{padding:6.5rem 0 5rem}
  .hero h1{max-width:100%;letter-spacing:.02em}
  .hero-cta .btn{width:100%;max-width:340px}
  .catalog-more{padding:1.5rem 1.2rem}
  .menu .btn{justify-content:center;margin-top:.4rem}
}
@media (min-width:1400px){:root{--container:1240px}body{font-size:1.125rem}}
@media (max-height:520px) and (orientation:landscape){.hero{min-height:auto;padding:6rem 0 4rem}}
.menu a.btn{display:inline-flex}