/* ===========================================================
   Canis Felis — Sistema visual
   Estilo: alegre y amigable · Paleta del logo
   =========================================================== */

:root{
  --teal:#16B5CB;
  --teal-dark:#0C8DA3;
  --teal-deep:#0A6B7E;
  --orange:#F5821F;
  --orange-soft:#FF9A3D;
  --yellow:#FBB614;
  --navy:#1C5C84;
  --navy-deep:#16465F;
  --ink:#143746;
  --muted:#5C7480;
  --cream:#FFF8EE;
  --mint:#E9F8FB;
  --peach:#FFF1E2;
  --white:#ffffff;
  --line:#E6EEF1;

  --shadow-sm:0 6px 18px rgba(20,55,70,.08);
  --shadow:0 18px 44px rgba(20,55,70,.14);
  --shadow-lg:0 30px 70px rgba(12,141,163,.22);

  --r-sm:14px;
  --r:22px;
  --r-lg:34px;
  --r-pill:999px;

  --max:1180px;
  --font-head:'Poppins',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;color:var(--navy-deep);font-weight:700}
h1{font-size:clamp(2.1rem,5vw,3.5rem);letter-spacing:-.5px}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);letter-spacing:-.4px}
h3{font-size:1.25rem}
p{color:var(--muted)}
section{position:relative}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.center{text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:1.5px;
  color:var(--teal-dark);background:var(--mint);
  padding:7px 16px;border-radius:var(--r-pill);margin-bottom:18px;
}
.eyebrow.orange{color:var(--orange);background:var(--peach)}
.lead{font-size:1.15rem;max-width:620px}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-weight:600;font-size:1rem;
  padding:14px 28px;border-radius:var(--r-pill);
  cursor:pointer;border:none;transition:transform .18s ease,box-shadow .18s ease,background .18s;
  white-space:nowrap;
}
.btn svg{width:20px;height:20px}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;box-shadow:0 12px 26px rgba(12,141,163,.35)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(12,141,163,.45)}
.btn-orange{background:linear-gradient(135deg,var(--orange-soft),var(--orange));color:#fff;box-shadow:0 12px 26px rgba(245,130,31,.35)}
.btn-orange:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(245,130,31,.45)}
.btn-ghost{background:#fff;color:var(--navy);border:2px solid var(--line)}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--teal);color:var(--teal-dark)}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 12px 26px rgba(37,211,102,.35)}
.btn-wa:hover{transform:translateY(-3px)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 24px;max-width:var(--max);margin:0 auto}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:50px;height:50px}
.brand .word{font-family:var(--font-head);font-weight:800;font-size:1.4rem;line-height:1;color:var(--navy)}
.brand .word span{color:var(--teal)}
.brand small{display:block;font-family:var(--font-body);font-weight:600;font-size:.62rem;letter-spacing:2px;color:var(--orange);text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  font-family:var(--font-head);font-weight:500;font-size:.96rem;color:var(--ink);
  padding:9px 14px;border-radius:var(--r-pill);transition:.15s;
}
.nav-links a:hover{background:var(--mint);color:var(--teal-dark)}
.nav-links a.active{background:var(--navy);color:#fff}
.nav-cta{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;background:var(--mint);border:none;border-radius:12px;padding:10px;cursor:pointer}
.menu-btn svg{width:24px;height:24px;color:var(--navy)}

/* ---------- Hero ---------- */
.hero{padding:64px 0 90px;background:
  radial-gradient(1100px 500px at 80% -10%,var(--mint),transparent 60%),
  radial-gradient(900px 500px at -10% 110%,var(--peach),transparent 55%);
  overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero h1 span{color:var(--teal)}
.hero p{margin:22px 0 30px;font-size:1.18rem;max-width:520px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-trust{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero-trust .t{display:flex;flex-direction:column}
.hero-trust b{font-family:var(--font-head);font-size:1.7rem;color:var(--navy)}
.hero-trust span{font-size:.86rem;color:var(--muted)}

.hero-visual{position:relative}
.hero-photo{border-radius:38px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/4.4;background:var(--mint)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.9;z-index:-1}
.float-card{
  position:absolute;background:#fff;border-radius:var(--r);padding:14px 18px;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:600;font-size:.92rem;color:var(--navy)
}
.float-card .ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:none}
.float-card.one{top:24px;left:-26px}
.float-card.two{bottom:34px;right:-22px}
.float-card small{display:block;font-weight:500;color:var(--muted);font-size:.78rem}

/* paw decorations */
.paw-deco{position:absolute;opacity:.12;color:var(--teal);z-index:0;pointer-events:none}

/* ---------- Section base ---------- */
.s{padding:84px 0}
.s.tint{background:var(--cream)}
.s.mint{background:linear-gradient(180deg,var(--mint),#fff)}
.s-head{max-width:680px;margin:0 auto 52px}

/* ---------- Service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;
  position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.card .ic{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;color:#fff;margin-bottom:18px}
.card h3{margin-bottom:8px;color:var(--navy-deep)}
.card p{font-size:.97rem}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-family:var(--font-head);font-weight:600;font-size:.92rem;color:var(--teal-dark)}
.card .more svg{width:16px;height:16px;transition:transform .2s}
.card:hover .more svg{transform:translateX(4px)}

/* color helpers for icon chips */
.bg-teal{background:linear-gradient(135deg,var(--teal),var(--teal-dark))}
.bg-orange{background:linear-gradient(135deg,var(--orange-soft),var(--orange))}
.bg-yellow{background:linear-gradient(135deg,var(--yellow),#F39C12)}
.bg-navy{background:linear-gradient(135deg,var(--navy),var(--navy-deep))}

/* ---------- Plans ---------- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
.plan{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);padding:30px 24px;
  display:flex;flex-direction:column;position:relative;transition:transform .2s,box-shadow .2s;
}
.plan:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.plan.featured{border-color:var(--teal);box-shadow:var(--shadow);transform:translateY(-6px)}
.plan .tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-family:var(--font-head);font-weight:600;font-size:.74rem;padding:6px 16px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:1px}
.plan .pet{font-family:var(--font-head);font-weight:600;font-size:.8rem;letter-spacing:1px;text-transform:uppercase;color:var(--orange);margin-bottom:4px}
.plan .pet.cat{color:var(--orange)}
.plan .pet.dog{color:var(--yellow)}
.plan h3{font-size:1.35rem;color:var(--navy-deep)}
.plan .price{font-family:var(--font-head);font-weight:800;font-size:2.4rem;color:var(--teal-dark);margin:10px 0 4px}
.plan .price small{font-size:.95rem;font-weight:600;color:var(--muted)}
.plan ul{list-style:none;margin:18px 0 24px;display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:10px;font-size:.93rem;color:var(--ink);align-items:flex-start}
.plan li svg{width:20px;height:20px;color:var(--teal);flex:none;margin-top:2px}
.plan .btn{margin-top:auto;justify-content:center;width:100%}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.gallery a{border-radius:var(--r);overflow:hidden;position:relative;box-shadow:var(--shadow-sm);background:linear-gradient(135deg,var(--mint),var(--peach))}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery a:hover img{transform:scale(1.08)}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:span 2}

/* ---------- Split / about ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.split .media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:5/4;background:linear-gradient(135deg,var(--mint),var(--peach))}
.split .media img{width:100%;height:100%;object-fit:cover}
.tick-list{list-style:none;margin:24px 0 30px;display:flex;flex-direction:column;gap:14px}
.tick-list li{display:flex;gap:14px;align-items:flex-start}
.tick-list .tk{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}
.tick-list b{display:block;color:var(--navy-deep);font-family:var(--font-head)}
.tick-list span{font-size:.95rem}

/* ---------- Testimonial ---------- */
.quote{
  max-width:820px;margin:0 auto;text-align:center;background:#fff;border-radius:var(--r-lg);
  padding:54px 40px;box-shadow:var(--shadow);position:relative;
}
.quote .mark{font-family:var(--font-head);font-size:5rem;line-height:.5;color:var(--teal);opacity:.25}
.quote p{font-size:1.3rem;color:var(--ink);font-style:italic;margin:10px 0 22px}
.quote .who{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--font-head);font-weight:600;color:var(--navy)}
.quote .who .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--orange));display:grid;place-items:center;color:#fff}
.stars{color:var(--yellow);font-size:1.2rem;letter-spacing:3px}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--teal),var(--navy));border-radius:var(--r-lg);padding:56px 48px;color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.88);max-width:560px;margin:14px auto 28px}
.cta-band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-band .paw-deco{color:#fff;opacity:.14}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;gap:16px;align-items:center;margin-bottom:16px;box-shadow:var(--shadow-sm);transition:.2s}
.info-card:hover{transform:translateX(6px);box-shadow:var(--shadow)}
.info-card .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;flex:none}
.info-card b{font-family:var(--font-head);color:var(--navy-deep);display:block}
.info-card span{color:var(--muted);font-size:.95rem}
form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-sm)}
.field{margin-bottom:16px}
.field label{font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--navy);display:block;margin-bottom:6px}
.field input,.field textarea{width:100%;padding:13px 16px;border:2px solid var(--line);border-radius:14px;font-family:var(--font-body);font-size:1rem;color:var(--ink);transition:.15s;background:var(--cream)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--teal);background:#fff}
.field textarea{min-height:120px;resize:vertical}

/* ---------- Page hero (interior) ---------- */
.page-hero{padding:60px 0 64px;background:
  radial-gradient(900px 400px at 90% -20%,var(--mint),transparent 60%),
  radial-gradient(700px 400px at 0% 120%,var(--peach),transparent 55%);text-align:center}
.page-hero .crumb{font-size:.85rem;color:var(--muted);margin-bottom:14px;font-family:var(--font-head)}
.page-hero .crumb a:hover{color:var(--teal-dark)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:#cfe3ea;padding:60px 0 26px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.site-footer .brand .word{color:#fff}
.site-footer .brand .word span{color:var(--teal)}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:16px}
.site-footer a,.site-footer p{color:#a9c6d1;font-size:.95rem}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.site-footer ul a:hover{color:#fff}
.foot-about{font-size:.95rem;margin:16px 0;max-width:320px}
.socials{display:flex;gap:10px;margin-top:8px}
.socials a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:.2s}
.socials a:hover{background:var(--teal);transform:translateY(-3px)}
.socials svg{width:20px;height:20px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;text-align:center;font-size:.86rem;color:#8fb2bf}

/* ---------- Floating WhatsApp ---------- */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:60;width:62px;height:62px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 14px 30px rgba(37,211,102,.5);animation:bob 2.4s ease-in-out infinite}
.wa-float svg{width:32px;height:32px;color:#fff}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr;gap:38px}
  .hero-visual{max-width:460px;margin:0 auto}
  .cards{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  body{font-size:16px}
  .nav-links{
    position:absolute;top:74px;left:16px;right:16px;background:#fff;flex-direction:column;
    align-items:stretch;padding:14px;border-radius:var(--r);box-shadow:var(--shadow);
    display:none;border:1px solid var(--line);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 16px}
  .menu-btn{display:block}
  .nav .btn-primary{display:none}
  .cards,.plans{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .s{padding:60px 0}
  .quote{padding:38px 24px}
  .cta-band{padding:42px 24px}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
}