/* ============================================================
   PetEco · Clínica Veterinaria Galapagar
   Sistema de diseño compartido
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Figtree:wght@400;500;600&display=swap');

:root{
  /* Neutros */
  --bg:        #ffffff;
  --bg-soft:   #f6f6f7;
  --surface:   #ffffff;
  --grey:      #f1f1f3;
  --grey-2:    #e9e9ec;
  --fg:        #18181b;
  --fg-2:      #3a3a40;
  --muted:     #6e6e76;
  --border:    rgba(20,20,25,.08);
  --border-2:  rgba(20,20,25,.14);

  /* Marca (azul del logo) */
  --brand:     #7ba7bc;
  --brand-ink: #4f8095;
  --brand-soft:#e7f1f5;

  /* Pastel — equilibrio entre todos */
  --pink:      #f9d3e3;  --pink-ink:#c4356e;  --pink-soft:#fdecf3;
  --blue:      #cae8f7;  --blue-ink:#2f7fa6;  --blue-soft:#eaf6fc;
  --yellow:    #ffe08a;  --yellow-ink:#a9790f;--yellow-soft:#fff5d6;
  --lila:      #e0d3f7;  --lila-ink:#7a4fc0;  --lila-soft:#f2ecfb;
  --green:     #d3ecae;  --green-ink:#5c8b2c; --green-soft:#eef7e0;

  /* Botón */
  --black:     #161618;

  --radius:    24px;
  --radius-sm: 16px;
  --radius-xs: 12px;
  --shadow:    0 1px 2px rgba(20,20,25,.04), 0 6px 24px rgba(20,20,25,.05);
  --shadow-lg: 0 12px 40px rgba(20,20,25,.10);
  --ease:      cubic-bezier(.22,.61,.36,1);
  --maxw:      1200px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'Figtree', system-ui, sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Hanken Grotesk', system-ui, sans-serif; font-weight:700; line-height:1.08; letter-spacing:-.02em; color:var(--fg); }
::selection{ background:var(--brand); color:#fff; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:clamp(56px,8vw,110px) 0; }
.section--soft{ background:var(--bg-soft); }

/* ---------- Tipografía utilitaria ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Hanken Grotesk'; font-weight:600; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--brand-ink);
}
.eyebrow::before{ content:""; width:18px; height:2px; border-radius:2px; background:var(--brand); }
.h-display{ font-size:clamp(40px,6.4vw,76px); }
.h1{ font-size:clamp(34px,5vw,56px); }
.h2{ font-size:clamp(28px,3.6vw,42px); }
.h3{ font-size:clamp(20px,2.2vw,26px); }
.lead{ font-size:clamp(17px,1.4vw,20px); color:var(--muted); max-width:56ch; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.section-head{ max-width:640px; margin:0 auto clamp(36px,5vw,60px); text-align:center; }
.section-head .h2{ margin:14px 0 12px; }

/* ---------- Botones ---------- */
.btn{
  --bg:var(--brand); --fg:#fff;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:100px;
  font-family:'Hanken Grotesk'; font-weight:600; font-size:15px;
  background:var(--bg); color:var(--fg);
  border:1.5px solid var(--bg);
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  will-change:transform;
}
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover{ background:var(--brand-ink); border-color:var(--brand-ink); color:#fff; transform:translateY(-3px); box-shadow:0 12px 26px rgba(123,167,188,.45); }
.btn:hover .arr{ transform:translateX(5px); }
.btn:active{ transform:translateY(-1px); }
.btn--ghost{ --bg:transparent; --fg:var(--fg); border-color:var(--border-2); }
.btn--ghost:hover{ background:var(--fg); border-color:var(--fg); color:#fff; box-shadow:none; transform:translateY(-3px); }
.btn--light{ --bg:#fff; --fg:var(--fg); border-color:var(--border-2); }
.btn--block{ width:100%; justify-content:center; }
.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Hanken Grotesk'; font-weight:600; font-size:15px; color:var(--fg);
  transition:color .3s var(--ease);
}
.link-arrow .arr{ transition:transform .35s var(--ease); }
.link-arrow:hover{ color:var(--brand-ink); }
.link-arrow:hover .arr{ transform:translateX(5px); }

/* round icon button (flecha en círculo) */
.icon-btn{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  border:1.5px solid var(--border-2); background:transparent; color:var(--fg);
  cursor:pointer; transition:all .35s var(--ease);
}
.icon-btn:hover{ background:var(--fg); color:#fff; border-color:var(--fg); transform:rotate(45deg); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.78); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.nav.scrolled{ border-color:var(--border); box-shadow:0 4px 24px rgba(20,20,25,.05); }
.nav-inner{ max-width:var(--maxw); margin:0 auto; padding:8px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:'Hanken Grotesk'; font-weight:800; font-size:21px; letter-spacing:-.01em; }
.brand img{ width:40px; height:40px; object-fit:contain; transition:transform .4s var(--ease); }
.nav .brand img{ width:80px; height:80px; }
.brand:hover img{ transform:rotate(-8deg) scale(1.06); }

/* Rastro de huellas que camina junto a PetEco */
.nav .brand{ position:relative; }
.nav .brand::after{
  content:""; flex:none; align-self:center;
  width:82px; height:26px; margin-left:8px; margin-top:2px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 28'%3E%3Cdefs%3E%3Cg id='p' fill='%237ba7bc'%3E%3Cellipse cx='8' cy='17' rx='5' ry='4'/%3E%3Cellipse cx='2.6' cy='10' rx='1.7' ry='2.5'/%3E%3Cellipse cx='6.6' cy='7.4' rx='1.7' ry='2.7'/%3E%3Cellipse cx='11' cy='8' rx='1.7' ry='2.6'/%3E%3Cellipse cx='14.6' cy='12' rx='1.6' ry='2.3'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(0,8) rotate(8 8 14)'/%3E%3Cuse href='%23p' transform='translate(21,-2) rotate(8 8 14)'/%3E%3Cuse href='%23p' transform='translate(42,6) rotate(8 8 14)'/%3E%3Cuse href='%23p' transform='translate(63,-4) rotate(8 8 14)'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left center; background-size:contain;
  opacity:.55;
  -webkit-mask-image:linear-gradient(90deg, #000 0 42%, transparent 60%);
  mask-image:linear-gradient(90deg, #000 0 42%, transparent 60%);
  -webkit-mask-size:230% 100%; mask-size:230% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:pawTrail 4.6s var(--ease) infinite;
}
@keyframes pawTrail{
  0%   { -webkit-mask-position:100% 0; mask-position:100% 0; opacity:0; }
  12%  { opacity:.55; }
  52%  { -webkit-mask-position:0% 0;  mask-position:0% 0;  opacity:.55; }
  74%  { -webkit-mask-position:0% 0;  mask-position:0% 0;  opacity:.55; }
  90%  { opacity:0; }
  100% { -webkit-mask-position:100% 0; mask-position:100% 0; opacity:0; }
}
.nav .brand:hover::after{ opacity:.85; }
@media (max-width:640px){ .nav .brand::after{ width:54px; height:20px; margin-left:5px; } }
@media (prefers-reduced-motion:reduce){
  .nav .brand::after{ animation:none; -webkit-mask-image:none; mask-image:none; opacity:.4; }
}
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  position:relative; padding:9px 16px; border-radius:100px;
  font-family:'Hanken Grotesk'; font-weight:600; font-size:15px; color:var(--fg-2);
  transition:color .25s, background .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px;
  background:var(--brand); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:hover{ color:var(--fg); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--fg); background:var(--grey); }
.nav-links a.active::after{ transform:scaleX(0); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-tel{ display:inline-flex; align-items:center; gap:8px; font-family:'Hanken Grotesk'; font-weight:600; font-size:15px; color:var(--fg); transition:color .25s; }
.nav-tel:hover{ color:var(--brand-ink); }
.nav-tel svg{ color:var(--brand-ink); }
.burger{ display:none; width:46px; height:46px; border-radius:14px; border:1.5px solid var(--border-2); background:#fff; cursor:pointer; position:relative; }
.burger span{ position:absolute; left:13px; right:13px; height:2px; background:var(--fg); border-radius:2px; transition:transform .35s var(--ease), opacity .25s; }
.burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:22px; } .burger span:nth-child(3){ top:28px; }
.burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Drawer móvil */
.drawer{ position:fixed; inset:0; z-index:55; pointer-events:none; }
.drawer-bg{ position:absolute; inset:0; background:rgba(20,20,25,.4); opacity:0; transition:opacity .35s; }
.drawer-panel{ position:absolute; top:0; right:0; height:100%; width:min(86vw,360px); background:#fff;
  padding:88px 28px 28px; transform:translateX(100%); transition:transform .42s var(--ease); display:flex; flex-direction:column; gap:6px; }
.drawer.open{ pointer-events:auto; }
.drawer.open .drawer-bg{ opacity:1; }
.drawer.open .drawer-panel{ transform:translateX(0); }
.drawer-panel a{ padding:14px 16px; border-radius:14px; font-family:'Hanken Grotesk'; font-weight:600; font-size:19px; transition:background .2s, color .2s; }
.drawer-panel a:hover, .drawer-panel a.active{ background:var(--grey); color:var(--brand-ink); }
.drawer-panel .btn{ margin-top:14px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:clamp(88px,10vw,140px) 0 clamp(40px,5vw,72px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; }
.hero h1{ font-size:clamp(38px,5.8vw,68px); margin:18px 0 20px; }
.hero h1 .hl{ position:relative; white-space:nowrap; color:var(--brand-ink); }
.hero h1 .hl::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:.07em; height:.34em; background:var(--yellow); z-index:-1; border-radius:6px; transform:rotate(-1.2deg); }
.hero .lead{ margin-bottom:30px; }
.hero-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hero-trust{ display:flex; align-items:center; gap:14px; margin-top:34px; }
.hero-stars{ color:var(--yellow-ink); letter-spacing:2px; font-size:15px; }
.hero-trust small{ display:block; color:var(--muted); font-size:14px; }
.hero-trust b{ font-family:'Hanken Grotesk'; }
/* Collage de fotos */
.hero-media{ position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:16px; }
.photo{ position:relative; border-radius:var(--radius); overflow:hidden; }
.photo .ph{ position:absolute; inset:0; display:grid; place-content:center; gap:8px; text-align:center; }
.photo .ph svg{ opacity:.5; }
.photo .ph span{ font-family:'Hanken Grotesk'; font-weight:600; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; opacity:.55; }
.hero-media .photo:nth-child(1){ aspect-ratio:3/4; background:var(--yellow); }
.hero-media .photo:nth-child(2){ aspect-ratio:3/4; background:var(--pink); margin-top:34px; }
.float-card{ position:absolute; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); padding:12px 16px; display:flex; align-items:center; gap:10px; }
.float-card .dot{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; }
.float-card b{ font-family:'Hanken Grotesk'; font-size:14px; display:block; }
.float-card small{ font-size:12px; color:var(--muted); }

/* ---------- Marquesina de servicios ---------- */
.marquee{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:18px 0; overflow:hidden; margin-top:clamp(36px,5vw,56px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:44px; width:max-content; animation:marquee 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ display:inline-flex; align-items:center; gap:12px; font-family:'Hanken Grotesk'; font-weight:600; font-size:18px; color:var(--fg-2); white-space:nowrap; }
.marquee-item .d{ width:7px; height:7px; border-radius:50%; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   CARDS / GRIDS genéricos
   ============================================================ */
.grid{ display:grid; gap:20px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* Tarjeta de servicio */
.svc-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.svc-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--accent,var(--brand)); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.svc-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:transparent; }
.svc-card:hover::before{ transform:scaleX(1); }
.svc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.svc-ic{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:var(--accent-soft,var(--brand-soft)); color:var(--accent-ink,var(--brand-ink)); transition:transform .45s var(--ease); }
.svc-card:hover .svc-ic{ transform:rotate(-6deg) scale(1.06); }
.svc-card h3{ font-size:21px; margin-bottom:9px; }
.svc-card p{ color:var(--muted); font-size:15.5px; }
.svc-tag{ display:inline-block; margin-top:18px; font-family:'Hanken Grotesk'; font-weight:600; font-size:13px; color:var(--muted); padding:5px 12px; border-radius:100px; background:var(--grey); }

/* Tarjeta CTA pastel (dentro de grids) */
.cta-card{ border-radius:var(--radius); padding:30px; display:flex; flex-direction:column; justify-content:space-between; gap:22px; background:var(--lila); color:var(--lila-ink); position:relative; overflow:hidden; }
.cta-card h3{ font-size:24px; color:inherit; }
.cta-card p{ font-size:15px; opacity:.85; }
.cta-card .paw{ position:absolute; right:-10px; bottom:-10px; opacity:.18; }
.cta-card .cta-pet{ position:absolute; right:2px; bottom:0; width:30%; max-width:120px; height:auto; pointer-events:none; transition:transform .5s var(--ease); filter:drop-shadow(0 8px 16px rgba(0,0,0,.14)); }
.cta-card:hover .cta-pet{ transform:translateY(-4px) scale(1.04); }
.cta-card .btn--light{ align-self:flex-start; position:relative; z-index:1; white-space:nowrap; }

/* Accent helpers */
.a-pink{ --accent:var(--pink-ink); --accent-soft:var(--pink-soft); --accent-ink:var(--pink-ink); }
.a-blue{ --accent:var(--brand); --accent-soft:var(--blue-soft); --accent-ink:var(--blue-ink); }
.a-yellow{ --accent:var(--yellow-ink); --accent-soft:var(--yellow-soft); --accent-ink:var(--yellow-ink); }
.a-lila{ --accent:var(--lila-ink); --accent-soft:var(--lila-soft); --accent-ink:var(--lila-ink); }
.a-green{ --accent:var(--green-ink); --accent-soft:var(--green-soft); --accent-ink:var(--green-ink); }

/* ---------- Filtros ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:clamp(32px,4vw,48px); }
.filter-btn{
  font-family:'Hanken Grotesk'; font-weight:600; font-size:15px;
  padding:11px 20px; border-radius:100px; cursor:pointer;
  background:var(--surface); color:var(--fg-2); border:1.5px solid var(--border-2);
  transition:all .3s var(--ease);
}
.filter-btn:hover{ border-color:var(--fg); transform:translateY(-2px); }
.filter-btn.active{ background:var(--fg); color:#fff; border-color:var(--fg); }

/* ============================================================
   POR QUÉ / FEATURES
   ============================================================ */
.why{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.why-media{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; background:var(--blue); }
.feat-list{ display:flex; flex-direction:column; gap:18px; margin-top:26px; }
.feat{ display:flex; gap:16px; align-items:flex-start; padding:16px; border-radius:var(--radius-sm); transition:background .3s var(--ease), transform .3s var(--ease); }
.feat:hover{ background:var(--bg-soft); transform:translateX(6px); }
.feat-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto; background:var(--accent-soft,var(--brand-soft)); color:var(--accent-ink,var(--brand-ink)); }
.feat h4{ font-size:18px; margin-bottom:4px; }
.feat p{ color:var(--muted); font-size:15px; }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat{ text-align:center; padding:30px 18px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.stat:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.stat .n{ font-family:'Hanken Grotesk'; font-weight:800; font-size:clamp(34px,4vw,48px); color:var(--brand-ink); line-height:1; letter-spacing:-.03em; }
.stat .l{ color:var(--muted); font-size:14.5px; margin-top:8px; }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testi-grid{ display:grid; grid-template-columns:1.1fr 1fr .9fr; gap:20px; align-items:stretch; }
.testi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px; display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.testi:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.testi.fill{ background:var(--green); border-color:transparent; }
.testi .quote{ font-family:'Hanken Grotesk'; font-weight:600; font-size:clamp(18px,1.6vw,21px); line-height:1.4; letter-spacing:-.01em; }
.testi .who{ margin-top:auto; padding-top:22px; display:flex; align-items:center; gap:12px; }
.testi .av{ width:46px; height:46px; border-radius:50%; background:var(--brand); display:grid; place-items:center; color:#fff; font-family:'Hanken Grotesk'; font-weight:700; flex:0 0 auto; }
.testi .who b{ font-family:'Hanken Grotesk'; display:block; font-size:15px; }
.testi .who small{ color:var(--muted); font-size:13px; }
.testi.fill .who small{ color:var(--green-ink); }
.testi .stars{ color:var(--yellow-ink); letter-spacing:2px; margin-bottom:14px; }

/* ============================================================
   EQUIPO (vets)
   ============================================================ */
.vets-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.vet{ border-radius:var(--radius); padding:18px; position:relative; overflow:hidden; aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:flex-end; transition:transform .4s var(--ease); }
.vet:hover{ transform:translateY(-7px); }
.vet .ph{ position:absolute; inset:0; display:grid; place-content:center; opacity:.45; }
.vet-tag{ position:relative; background:#fff; border-radius:16px; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; box-shadow:var(--shadow); }
.vet-tag b{ font-family:'Hanken Grotesk'; font-size:16px; display:block; }
.vet-tag small{ color:var(--muted); font-size:13px; }

/* ============================================================
   ARTÍCULOS / GALERÍA
   ============================================================ */
.art-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.art{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.art:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.art-img{ aspect-ratio:16/10; position:relative; display:grid; place-content:center; }
.art-img .ph{ opacity:.5; }
.art-body{ padding:24px; }
.art-meta{ display:flex; gap:10px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:12px; }
.chip{ font-family:'Hanken Grotesk'; font-weight:600; font-size:12px; padding:4px 11px; border-radius:100px; }
.art h3{ font-size:20px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.art:hover h3 .icon-btn{ background:var(--fg); color:#fff; border-color:var(--fg); transform:rotate(45deg); }

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery .photo{ aspect-ratio:1; }
.gallery .photo:nth-child(3n+1){ background:var(--blue); }
.gallery .photo:nth-child(3n+2){ background:var(--pink); }
.gallery .photo:nth-child(3n){ background:var(--lila); }

/* ============================================================
   BOOKING / FORM
   ============================================================ */
.booking{ background:var(--pink); border-radius:var(--radius); padding:clamp(28px,4vw,48px); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:'Hanken Grotesk'; font-weight:600; font-size:14px; }
.field input, .field select, .field textarea{
  font-family:'Figtree'; font-size:16px; color:var(--fg);
  background:#fff; border:1.5px solid transparent; border-radius:13px; padding:14px 16px;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(123,167,188,.22); }
.field.error input, .field.error select, .field.error textarea{ border-color:#e0567f; box-shadow:0 0 0 4px rgba(224,86,127,.16); }
.field .err{ font-size:13px; color:#c4356e; display:none; }
.field.error .err{ display:block; }
.form-note{ font-size:13px; color:var(--muted); margin-top:6px; }
.form-ok{ display:none; align-items:center; gap:12px; background:#fff; border-radius:16px; padding:18px 22px; margin-top:18px; }
.form-ok.show{ display:flex; animation:pop .5s var(--ease); }
.form-ok .dot{ width:38px; height:38px; border-radius:50%; background:var(--green); color:var(--green-ink); display:grid; place-items:center; flex:0 0 auto; }
@keyframes pop{ from{ opacity:0; transform:scale(.9) translateY(8px); } to{ opacity:1; transform:none; } }

/* Tarjetas de contacto */
.contact-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cc{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.cc:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.cc .ic{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px; }
.cc h4{ font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:6px; font-family:'Hanken Grotesk'; }
.cc a, .cc p{ font-family:'Hanken Grotesk'; font-weight:600; font-size:18px; color:var(--fg); transition:color .25s; }
.cc a:hover{ color:var(--brand-ink); }
.map-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); aspect-ratio:16/7; background:var(--grey); }
.map-frame iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.2) contrast(1.02); }

/* ============================================================
   FAQ (acordeón)
   ============================================================ */
.faq{ max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; transition:box-shadow .3s, border-color .3s; }
.faq-item.open{ box-shadow:var(--shadow); border-color:transparent; }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family:'Hanken Grotesk'; font-weight:600; font-size:clamp(16px,1.4vw,18px); color:var(--fg); }
.faq-q .pm{ width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:var(--grey); transition:background .3s, transform .35s var(--ease); position:relative; }
.faq-q .pm::before, .faq-q .pm::after{ content:""; position:absolute; width:13px; height:2px; background:var(--fg); border-radius:2px; transition:transform .35s var(--ease), background .3s; }
.faq-q .pm::after{ transform:rotate(90deg); }
.faq-item.open .pm{ background:var(--brand); }
.faq-item.open .pm::before, .faq-item.open .pm::after{ background:#fff; }
.faq-item.open .pm::after{ transform:rotate(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a-inner{ padding:0 24px 24px; color:var(--muted); font-size:15.5px; }

/* ============================================================
   PAGE HERO (cabeceras internas)
   ============================================================ */
.page-hero{ background:var(--bg-soft); padding:clamp(48px,7vw,90px) 0 clamp(40px,6vw,70px); text-align:center; position:relative; overflow:hidden; }
.page-hero .blob{ position:absolute; border-radius:50%; filter:blur(8px); opacity:.5; z-index:0; }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ margin:16px 0 14px; }
.breadcrumb{ display:inline-flex; gap:8px; align-items:center; font-family:'Hanken Grotesk'; font-weight:600; font-size:14px; color:var(--muted); }
.breadcrumb a:hover{ color:var(--brand-ink); }

/* ---- Page hero enriquecido (dos columnas + visual animado) ---- */
.page-hero--rich{ text-align:left; overflow:visible; padding:clamp(40px,5.5vw,76px) 0 clamp(44px,5vw,80px); }
.page-hero--rich .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center; }
.page-hero--rich .lead.center{ text-align:left; margin:0 !important; }
.page-hero--rich .breadcrumb{ margin-bottom:6px; }
.hero-copy{ max-width:540px; }
.hero-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hero-chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px; background:var(--surface);
  border:1px solid var(--border); font-family:'Hanken Grotesk'; font-weight:600; font-size:13.5px; color:var(--fg-2);
  box-shadow:var(--shadow); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); cursor:default; }
.hero-chip svg{ color:var(--brand-ink); }
.hero-chip:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand); }

/* Visual: órbita de especialidades */
.hero-stage{ position:relative; aspect-ratio:1/1; width:100%; max-width:440px; margin-inline:auto; }
.hero-ring{ position:absolute; inset:6%; border:1.5px dashed var(--border-2); border-radius:50%; animation:spin-slow 38s linear infinite; }
.hero-ring::before{ content:""; position:absolute; top:-5px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.hero-ring--2{ inset:20%; border-color:var(--border); animation-duration:26s; animation-direction:reverse; }
.hero-ring--2::before{ background:var(--pink-ink); box-shadow:0 0 0 4px var(--pink-soft); }
.hero-core{ position:absolute; inset:27%; border-radius:50%; overflow:hidden; box-shadow:var(--shadow-lg);
  animation:floaty 6s ease-in-out infinite; }
.hero-core img{ width:100%; height:100%; object-fit:cover; }
.hero-core::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 5px rgba(255,255,255,.7); }
.hero-pulse{ position:absolute; inset:27%; border-radius:50%; border:2px solid var(--brand); opacity:0; animation:pulse-ring 3.2s var(--ease) infinite; }
/* Satélites */
.sat{ position:absolute; width:clamp(48px,12%,62px); aspect-ratio:1/1; border-radius:50%; display:grid; place-items:center;
  box-shadow:var(--shadow); animation:floaty 5s ease-in-out infinite; transition:transform .4s var(--ease); }
.sat svg{ width:46%; height:46%; }
.sat img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.sat:hover{ transform:scale(1.12) translateY(-3px); }
.sat--1{ top:2%; left:48%; background:var(--pink); color:var(--pink-ink); animation-delay:-.4s; }
.sat--2{ top:34%; right:-2%; background:var(--yellow); color:var(--yellow-ink); animation-delay:-1.6s; }
.sat--3{ bottom:4%; right:14%; background:var(--green); color:var(--green-ink); animation-delay:-2.4s; }
.sat--4{ bottom:10%; left:-2%; background:var(--blue); color:var(--blue-ink); animation-delay:-1s; }
.sat--5{ top:24%; left:-4%; background:var(--lila); color:var(--lila-ink); animation-delay:-3s; }

/* Visual: pila de fotos (Sobre nosotros) */
.hero-stack{ position:relative; width:100%; max-width:460px; margin-inline:auto; aspect-ratio:1/1.02; }
.hero-stack .ph-card{ position:absolute; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); }
.hero-stack .ph-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.hero-stack .ph-card:hover img{ transform:scale(1.05); }
.ph-a{ width:62%; height:74%; left:0; top:0; z-index:2; animation:floaty 7s ease-in-out infinite; }
.ph-b{ width:50%; height:56%; right:0; bottom:2%; z-index:3; border:5px solid var(--surface); animation:floaty 6s ease-in-out infinite; animation-delay:-2s; }
.hero-stack .deco-blob{ position:absolute; border-radius:50%; filter:blur(6px); opacity:.55; z-index:0; }
.hero-badge{ position:absolute; z-index:4; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px;
  background:var(--surface); box-shadow:var(--shadow-lg); font-family:'Hanken Grotesk'; font-weight:700; font-size:14px; color:var(--fg);
  animation:floaty 5.5s ease-in-out infinite; animation-delay:-1s; }
.hero-badge svg{ color:var(--pink-ink); }
.hero-badge--pin{ left:-4%; bottom:20%; }
.hero-heart{ position:absolute; top:6%; right:6%; z-index:4; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--pink); color:var(--pink-ink); box-shadow:var(--shadow); animation:heart-beat 2.4s ease-in-out infinite; }

@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
@keyframes pulse-ring{ 0%{ transform:scale(.92); opacity:.7; } 70%{ transform:scale(1.18); opacity:0; } 100%{ opacity:0; } }
@keyframes heart-beat{ 0%,100%{ transform:scale(1); } 12%{ transform:scale(1.18); } 24%{ transform:scale(1); } 36%{ transform:scale(1.14); } }

@media (max-width:880px){
  .page-hero--rich{ text-align:center; }
  .page-hero--rich .wrap{ grid-template-columns:1fr; gap:36px; }
  .page-hero--rich .hero-copy{ max-width:none; margin-inline:auto; }
  .page-hero--rich .lead.center{ text-align:center !important; }
  .page-hero--rich .breadcrumb{ justify-content:center; }
  .hero-chips{ justify-content:center; }
  .hero-stage{ max-width:340px; }
  .hero-stack{ max-width:380px; }
}
@media (prefers-reduced-motion:reduce){
  .hero-ring, .hero-ring--2, .hero-core, .hero-pulse, .sat, .ph-a, .ph-b, .hero-badge, .hero-heart{ animation:none !important; }
}

/* ============================================================
   CTA banda
   ============================================================ */
.cta-band{ background:var(--lila); border-radius:var(--radius); padding:clamp(36px,5vw,64px); text-align:center; position:relative; overflow:hidden; }
.cta-band h2{ color:var(--lila-ink); margin-bottom:14px; }
.cta-band p{ color:var(--lila-ink); opacity:.8; max-width:48ch; margin:0 auto 28px; }
.cta-band .paw{ position:absolute; opacity:.16; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--bg-soft); border-top:1px solid var(--border); padding-top:clamp(48px,6vw,80px); }
.footer-cta{ background:var(--pink); border-radius:var(--radius); padding:clamp(28px,4vw,46px); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; margin-bottom:clamp(40px,5vw,64px); }
.footer-cta h2{ font-size:clamp(26px,3vw,38px); color:var(--pink-ink); }
.footer-cta .actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.footer-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:30px; padding-bottom:40px; }
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand p{ color:var(--muted); font-size:14.5px; max-width:30ch; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#fff; border:1px solid var(--border); color:var(--fg); transition:all .3s var(--ease); }
.footer-social a:hover{ background:var(--brand); color:#fff; border-color:var(--brand); transform:translateY(-3px); }
.footer-col h5{ font-family:'Hanken Grotesk'; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; color:var(--fg); }
.footer-col a, .footer-col p{ display:block; color:var(--muted); font-size:15px; padding:6px 0; transition:color .25s, transform .25s; }
.footer-col a:hover{ color:var(--brand-ink); transform:translateX(4px); }
.footer-contact a{ display:flex; gap:10px; align-items:flex-start; font-family:'Hanken Grotesk'; font-weight:500; }
.footer-contact svg{ color:var(--brand-ink); flex:0 0 auto; margin-top:3px; }
.footer-bottom{ border-top:1px solid var(--border); padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:14px; }
.footer-bottom .links{ display:flex; gap:18px; }
.footer-bottom a:hover{ color:var(--brand-ink); }
.footer-bottom .credit{ flex-basis:100%; text-align:center; margin-top:6px; color:var(--muted); font-size:13.5px; }
.footer-bottom .credit__heart{ display:inline-block; color:#ff5a8a; -webkit-text-fill-color:#ff5a8a; transform-origin:center; animation:credit-beat 1.5s ease-in-out infinite; }
.footer-bottom .credit__brand{ font-weight:800; text-decoration:none; background:linear-gradient(90deg,#ff8fb1,#ffd166,#7ed957,#7ba7bc,#c9a7eb,#ff8fb1); background-size:220% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:credit-shine 6s linear infinite; transition:filter .25s ease; }
.footer-bottom .credit__brand:hover{ filter:saturate(1.35) brightness(1.08); }
@keyframes credit-shine{ to{ background-position:220% center; } }
@keyframes credit-beat{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.28); } }
@media (prefers-reduced-motion:reduce){ .footer-bottom .credit__brand,.footer-bottom .credit__heart{ animation:none; } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.07s; } .reveal.d2{ transition-delay:.14s; } .reveal.d3{ transition-delay:.21s; } .reveal.d4{ transition-delay:.28s; } .reveal.d5{ transition-delay:.35s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; }
  *{ scroll-behavior:auto !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .footer-cols{ grid-template-columns:1fr 1fr; gap:30px 24px; }
  .footer-brand{ grid-column:1 / -1; }
  .testi-grid{ grid-template-columns:1fr 1fr; }
  .testi:nth-child(3){ grid-column:1 / -1; }
}
@media (max-width:900px){
  .nav-links, .nav-tel{ display:none; }
  .burger{ display:block; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ width:100%; max-width:480px; margin:0 auto; }
  .why{ grid-template-columns:1fr; }
  .why-media{ aspect-ratio:16/11; order:-1; }
  .grid-3, .grid-4{ grid-template-columns:1fr 1fr; }
  .vets-grid{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .contact-cards{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .booking-grid{ grid-template-columns:1fr !important; }
  .contact-grid{ grid-template-columns:1fr !important; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ padding:0 18px; }
  .section-head[style]{ flex-direction:column; align-items:flex-start !important; gap:18px; }
  /* Hero móvil: una foto grande protagonista + la segunda como inset enmarcado */
  .hero-media{ grid-template-columns:1fr; max-width:440px; position:relative; gap:0; }
  .hero-media .photo:nth-child(1){ aspect-ratio:4/3; }
  .hero-media .photo:nth-child(2){
    margin-top:0;
    position:absolute; right:-4px; bottom:-22px;
    width:44%; max-width:172px; aspect-ratio:3/4;
    border:5px solid var(--bg); box-shadow:var(--shadow); z-index:2;
  }
  .hero-media{ margin-bottom:26px; }
  .grid-3, .grid-2, .grid-4, .art-grid, .form-grid, .testi-grid, .vets-grid, .gallery{ grid-template-columns:1fr; }
  .testi:nth-child(3){ grid-column:auto; }
  .stats{ grid-template-columns:1fr 1fr; gap:12px; }
  .footer-cta{ grid-template-columns:1fr; }
  .footer-cta .actions{ justify-content:flex-start; }
  .footer-cols{ grid-template-columns:1fr; gap:26px; }
  .footer-brand{ grid-column:auto; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  /* Hero móvil: copy centrado, botón a su ancho natural, sin enlace secundario */
  .hero-copy{ text-align:center; display:flex; flex-direction:column; align-items:center; }
  .hero h1{ font-size:clamp(34px,8.5vw,42px); margin:14px 0 14px; }
  .hero .lead{ margin-bottom:22px; }
  .hero-copy .lead{ max-width:34ch; }
  .hero-actions{ justify-content:center; width:auto; margin-top:4px; }
  .hero-actions .btn{ width:auto; justify-content:center; }
  .hero-actions .link-arrow{ display:none; }
}
@media (max-width:400px){
  .stats{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   MÓVIL · pase "más ligero" (≤640px)
   Menos movimiento, pastel más suave, más aire. Escritorio intacto.
   ============================================================ */
@media (max-width:640px){
  /* 1 · Calmar el movimiento decorativo — el ojo abarca toda la
        pantalla a la vez, así que los bucles compiten y saturan.
        Se conserva el scroll-reveal y la interacción del chat. */
  .hero-ring, .hero-ring--2, .hero-core, .hero-pulse,
  .sat, .hero-badge, .hero-heart, .ph-a, .ph-b,
  .eco-scan__line, .eco-wave span, .eco-live i,
  .eco-signal small svg, .eco-float,
  .eco__launch .eco__dog{ animation:none !important; }
  .marquee-track{ animation-duration:60s; }      /* más lento, menos ruido */

  /* 2 · Pastel un punto más suave: al apilarse en vertical, los
        acentos a plena intensidad saturan. Mantiene la identidad. */
  :root{
    --pink:   color-mix(in srgb, #f9d3e3 68%, #fff);
    --blue:   color-mix(in srgb, #cae8f7 68%, #fff);
    --yellow: color-mix(in srgb, #ffe08a 70%, #fff);
    --lila:   color-mix(in srgb, #e0d3f7 68%, #fff);
    --green:  color-mix(in srgb, #d3ecae 68%, #fff);
  }

  /* 3 · Más aire entre bloques y sombras más ligeras */
  .section{ padding:62px 0; }
  .section-head{ margin-bottom:34px; }
  :root{
    --shadow:    0 1px 2px rgba(20,20,25,.03), 0 4px 16px rgba(20,20,25,.045);
    --shadow-lg: 0 8px 26px rgba(20,20,25,.08);
  }
}

/* ============ IMÁGENES ============ */
/* Foto a sangre dentro de cualquier marco con overflow:hidden */
.photo > img,
.why-media > img,
.art-img > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:0;
  transition:transform .6s var(--ease);
}
.vet > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 22%; display:block; z-index:0;
  transition:transform .6s var(--ease);
}
/* Zoom suave al pasar el ratón */
.photo:hover > img,
.why-media:hover > img,
.art:hover .art-img > img,
.vet:hover > img{ transform:scale(1.06); }
/* El tag del equipo siempre por encima de la foto */
.vet .vet-tag{ z-index:1; }
/* Para fotos con fondo transparente, el color del marco se mantiene detrás */
.photo > img[data-fit="contain"],
.why-media > img[data-fit="contain"],
.aside-photo > img[data-fit="contain"]{ object-fit:contain; }
.aside-photo > img[data-fit="contain"]{ padding:8% 10%; }

/* Galería: degradado sutil al hacer hover */
.gallery .photo{ cursor:pointer; }
.gallery .photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,transparent 55%,rgba(20,18,30,.28));
  opacity:0; transition:opacity .4s var(--ease);
}
.gallery .photo:hover::after{ opacity:1; }
.gallery .photo:hover{ transform:translateY(-4px); transition:transform .4s var(--ease); }

/* ============ BLOQUE DESTACADO (servicios) ============ */
.feature-duo{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(16px,2.5vw,28px);
  align-items:stretch; margin-top:clamp(28px,4vw,40px);
}
.feature-duo .fd-main,
.feature-duo .fd-side{
  position:relative; border-radius:var(--radius); overflow:hidden;
}
.feature-duo .fd-main{ aspect-ratio:16/10; background:var(--blue); }
.feature-duo .fd-side{ background:var(--lila); display:flex; flex-direction:column; }
.feature-duo .fd-main > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.feature-duo .fd-main:hover > img{ transform:scale(1.05); }
.feature-duo .fd-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:22px; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(20,18,30,.7));
}
.feature-duo .fd-cap b{ font-family:'Hanken Grotesk'; font-size:20px; display:block; }
.feature-duo .fd-cap small{ font-size:14px; opacity:.85; }
.feature-duo .fd-side .fd-img{
  flex:1; min-height:160px; display:grid; place-items:center; padding:22px;
}
.feature-duo .fd-side .fd-img img{ max-width:100%; max-height:200px; object-fit:contain; }
.feature-duo .fd-side .fd-text{ padding:0 24px 24px; }
.feature-duo .fd-side .fd-text h3{ color:var(--lila-ink); font-size:19px; margin-bottom:6px; }
.feature-duo .fd-side .fd-text p{ color:var(--lila-ink); opacity:.85; font-size:14.5px; }

/* Foto lateral (contacto) */
.aside-photo{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3; background:var(--yellow);
}
.aside-photo > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.aside-photo:hover > img{ transform:scale(1.05); }

@media (max-width:760px){
  .feature-duo{ grid-template-columns:1fr; }
}

/* ============ VÍDEO BAND ============ */
.video-band{
  position:relative; border-radius:var(--radius); overflow:hidden;
  min-height:clamp(360px,52vw,560px); display:flex;
  box-shadow:var(--shadow-lg); isolation:isolate;
}
.video-band__media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  transform:scale(1.02); transition:transform 1.2s ease;
}
.video-band:hover .video-band__media{ transform:scale(1.06); }
.video-band__overlay{
  position:relative; z-index:1; align-self:flex-end;
  max-width:560px; margin:auto auto clamp(28px,4vw,44px) clamp(28px,4vw,48px);
  padding:0; color:#fff;
}
.video-band::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(105deg, rgba(20,20,28,.72) 0%, rgba(20,20,28,.35) 42%, rgba(20,20,28,0) 70%),
             linear-gradient(0deg, rgba(20,20,28,.45) 0%, rgba(20,20,28,0) 45%);
}
.eyebrow--light{ color:#fff; }
.eyebrow--light::before{ background:#fff; }
.video-band__title{ margin:14px 0 12px; color:#fff; }
.video-band__text{
  font-size:clamp(16px,1.4vw,19px); line-height:1.5; color:rgba(255,255,255,.9);
  max-width:42ch; margin:0 0 22px;
}
.video-band .btn--light{ --bg:#fff; --fg:var(--black); border-color:transparent; }
.video-band .btn--light:hover{ --bg:var(--brand); --fg:#fff; }
.video-band__sound{
  position:absolute; top:18px; right:18px; z-index:2;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:rgba(20,20,28,.4); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .25s ease, transform .25s ease, color .25s ease;
}
.video-band__sound:hover{ background:var(--brand); transform:scale(1.08); }
@media (max-width:560px){
  .video-band__overlay{ margin:auto 20px 24px; }
}

/* ============================================================
   Asistente flotante "Eco" — chatbot de navegación
   ============================================================ */
.eco{ position:fixed; right:22px; bottom:0; z-index:120;
  font-family:'Figtree', system-ui, sans-serif;
  display:flex; flex-direction:column; align-items:flex-end; }
@media (max-width:560px){ .eco{ right:12px; } }

/* Stack de contacto rápido (WhatsApp + llamar): solo en móvil; en escritorio manda Eco */
.eco__actions{ display:none; flex-direction:column; gap:12px; margin-bottom:24px; }
.eco__fab{
  position:relative; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; color:#fff; text-decoration:none;
  box-shadow:0 6px 18px rgba(20,20,25,.22); cursor:pointer;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
}
.eco__fab--wa{ background:#25d366; }
.eco__fab--call{ background:var(--brand); }
.eco__fab::after{ /* anillo de pulso sutil */
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 currentColor; opacity:.5; animation:ecoFabPulse 2.8s var(--ease) infinite;
}
.eco__fab--call::after{ animation-delay:1.4s; }
@keyframes ecoFabPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } 35%{ box-shadow:0 0 0 9px rgba(0,0,0,0); opacity:0; } 100%{ box-shadow:0 0 0 0 rgba(0,0,0,0); opacity:0; } }
.eco__fab:hover{ transform:translateY(-4px) scale(1.08); box-shadow:0 12px 26px rgba(20,20,25,.30); filter:saturate(1.1); }
.eco__fab:active{ transform:translateY(-1px) scale(1.02); }
.eco__fab svg{ position:relative; z-index:1; }
/* tooltip a la izquierda */
.eco__tip{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--fg); color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap;
  padding:6px 11px; border-radius:8px; opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.eco__tip::after{ content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border:5px solid transparent; border-left-color:var(--fg); }
.eco__fab:hover .eco__tip{ opacity:1; transform:translateY(-50%) translateX(0); }
/* al abrir el chat, los botones se retiran */
.eco.is-open .eco__actions{ opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .25s, transform .25s; }
@media (prefers-reduced-motion: reduce){ .eco__fab::after{ animation:none; } }

/* Launcher (perro que asoma desde la esquina) */
.eco__launch{
  position:relative; width:124px; height:108px; border:0; padding:0; cursor:pointer;
  background:transparent; -webkit-tap-highlight-color:transparent;
  display:block;
}
/* círculo lila: medio recortado por el borde = "portal" del que sale el perro */
.eco__ring{
  position:absolute; right:6px; bottom:-34px; width:96px; height:96px; border-radius:50%;
  background:var(--lila-soft); border:1px solid var(--border);
  box-shadow:var(--shadow); transition:transform .3s var(--ease), background .3s var(--ease);
}
.eco__dog{
  position:absolute; right:-6px; bottom:-6px; width:128px; height:auto;
  filter:drop-shadow(0 8px 14px rgba(20,20,25,.20));
  transform-origin:bottom center;
  transition:transform .35s var(--ease);
}
.eco__launch:hover .eco__ring{ transform:scale(1.06); background:var(--brand-soft); }
.eco__launch:hover .eco__dog{ transform:translateY(-8px) rotate(-3deg) scale(1.05); }
.eco__launch:active .eco__dog{ transform:translateY(-3px) scale(1.0); }
/* asoma con un bote suave desde el borde inferior */
@keyframes ecoBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.eco__launch[data-bob="1"] .eco__dog{ animation:ecoBob 2.6s var(--ease) infinite; }

/* punto de notificación */
.eco__dot{
  position:absolute; top:14px; right:14px; width:16px; height:16px; border-radius:50%;
  background:var(--pink-ink); border:2.5px solid #fff; z-index:3;
  box-shadow:0 0 0 0 rgba(196,53,110,.5); animation:ecoPulse 2s infinite;
}
@keyframes ecoPulse{ 0%{box-shadow:0 0 0 0 rgba(196,53,110,.45)} 70%{box-shadow:0 0 0 10px rgba(196,53,110,0)} 100%{box-shadow:0 0 0 0 rgba(196,53,110,0)} }

/* globo de saludo */
.eco__hello{
  position:absolute; bottom:104px; right:72px; width:max-content; max-width:220px;
  background:#fff; color:var(--fg); border:1px solid var(--border);
  padding:11px 14px; border-radius:16px 16px 4px 16px; box-shadow:var(--shadow-lg);
  font-size:14px; line-height:1.35; transform-origin:bottom right;
  opacity:0; transform:scale(.7) translateY(8px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.eco__hello strong{ color:var(--brand-ink); }
.eco__hello::after{ content:""; position:absolute; right:-6px; bottom:10px;
  width:12px; height:12px; background:#fff; border-right:1px solid var(--border);
  border-bottom:1px solid var(--border); transform:rotate(-45deg); }
.eco__hello.is-on{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }
.eco__hello-x{ position:absolute; top:-8px; left:-8px; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--border); background:#fff; color:var(--muted); cursor:pointer;
  font-size:14px; line-height:1; display:grid; place-items:center; box-shadow:var(--shadow); }
.eco__hello-x:hover{ color:var(--fg); }
@media (max-width:560px){ .eco__hello{ display:none; } }

/* Panel de chat */
.eco__panel{
  position:absolute; right:0; bottom:18px; width:360px; max-width:calc(100vw - 32px);
  height:520px; max-height:calc(100vh - 48px);
  background:var(--surface); border:1px solid var(--border); border-radius:22px;
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
  transform-origin:bottom right; transition:opacity .3s var(--ease), transform .35s var(--ease);
}
.eco.is-open .eco__panel{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.eco.is-open .eco__launch{ opacity:0; pointer-events:none; transform:scale(.6); transition:opacity .25s, transform .25s; }
.eco.is-open .eco__hello{ display:none; }

.eco__head{
  display:flex; align-items:center; gap:11px; padding:14px 16px;
  background:linear-gradient(120deg, var(--brand-soft), var(--lila-soft));
  border-bottom:1px solid var(--border);
}
.eco__ava{ width:40px; height:40px; border-radius:50%; background:#fff; overflow:hidden;
  border:1px solid var(--border); flex:none; position:relative; }
.eco__ava img{ position:absolute; width:46px; height:auto; left:50%; bottom:-3px; transform:translateX(-50%); }
.eco__id{ flex:1; min-width:0; }
.eco__name{ font-family:'Hanken Grotesk', sans-serif; font-weight:700; font-size:15px; color:var(--fg); }
.eco__status{ font-size:12px; color:var(--brand-ink); display:flex; align-items:center; gap:5px; }
.eco__status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green-ink); box-shadow:0 0 0 3px var(--green-soft); }
.eco__close{ width:32px; height:32px; border-radius:50%; border:1px solid transparent; background:rgba(255,255,255,.5);
  color:var(--fg-2); cursor:pointer; display:grid; place-items:center; transition:background .2s, transform .2s; flex:none; }
.eco__close:hover{ background:#fff; transform:rotate(90deg); }

.eco__log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  background:var(--bg-soft); scroll-behavior:smooth; }
.eco__msg{ max-width:82%; padding:10px 13px; font-size:14px; line-height:1.42; border-radius:15px;
  animation:ecoIn .35s var(--ease) both; }
@keyframes ecoIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.eco__msg--bot{ align-self:flex-start; background:#fff; color:var(--fg); border:1px solid var(--border); border-bottom-left-radius:5px; }
.eco__msg--me{ align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:5px; }
.eco__msg a{ color:var(--brand-ink); font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--brand-soft); transition:border-color .2s; }
.eco__msg a:hover{ border-color:var(--brand-ink); }
.eco__msg--me a{ color:#fff; border-color:rgba(255,255,255,.5); }

/* typing dots */
.eco__typing{ align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background:#fff;
  border:1px solid var(--border); border-radius:15px; border-bottom-left-radius:5px; }
.eco__typing span{ width:7px; height:7px; border-radius:50%; background:var(--muted); opacity:.5; animation:ecoBlink 1.2s infinite; }
.eco__typing span:nth-child(2){ animation-delay:.2s } .eco__typing span:nth-child(3){ animation-delay:.4s }
@keyframes ecoBlink{ 0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)} }

/* chips de sugerencia */
.eco__chips{ display:flex; flex-wrap:wrap; gap:7px; padding:10px 16px 0; }
.eco__chip{ font:inherit; font-size:12.5px; padding:7px 12px; border-radius:999px; cursor:pointer;
  background:#fff; border:1px solid var(--border-2); color:var(--fg-2); transition:all .2s var(--ease); }
.eco__chip:hover{ background:var(--brand); color:#fff; border-color:var(--brand); transform:translateY(-2px); }

/* input */
.eco__form{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border); background:var(--surface); }
.eco__in{ flex:1; font:inherit; font-size:14px; padding:11px 14px; border-radius:999px;
  border:1px solid var(--border-2); background:var(--bg-soft); color:var(--fg); outline:none;
  transition:border-color .2s, background .2s; }
.eco__in:focus{ border-color:var(--brand); background:#fff; }
.eco__send{ width:42px; height:42px; flex:none; border-radius:50%; border:0; cursor:pointer;
  background:var(--brand); color:#fff; display:grid; place-items:center;
  transition:background .2s, transform .2s; }
.eco__send:hover{ background:var(--brand-ink); transform:scale(1.06); }
.eco__send:active{ transform:scale(.94); }

@media (prefers-reduced-motion:reduce){
  .eco *,.eco{ animation:none !important; transition:none !important; }
}

/* Eco más pequeño y discreto en móvil */
@media (max-width:560px){
  .eco__launch{ width:84px; height:74px; }
  .eco__dog{ width:86px; right:-4px; bottom:-4px; }
  .eco__ring{ width:64px; height:64px; right:6px; bottom:-22px; }
  .eco__dot{ top:8px; right:10px; width:13px; height:13px; }
  .eco__panel{ width:300px; height:460px; bottom:14px; }
  .eco__fab{ width:52px; height:52px; }
  /* En móvil: fuera el perro y su saludo, mandan los botones de contacto */
  .eco__actions{ display:flex; gap:12px; margin-bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
  .eco__launch, .eco__hello, .eco__panel{ display:none !important; }
}

/* ============================================================
   AFINADO RESPONSIVE (móvil)
   ============================================================ */
@media (max-width:640px){
  /* Las tarjetas flotantes del hero se solapan con el texto en móvil:
     se ocultan para mantener la composición limpia. */
  .hero-media .float-card{ display:none; }

  /* Servicios — tarjetas a DOS columnas y más compactas en móvil */
  .grid-3:has(.svc-card),
  .grid-4:has(.svc-card){ grid-template-columns:1fr 1fr; gap:12px; }
  .grid-3:has(.svc-card) .svc-card,
  .grid-4:has(.svc-card) .svc-card{ padding:18px 16px; }
  .grid-3:has(.svc-card) .svc-top,
  .grid-4:has(.svc-card) .svc-top{ margin-bottom:16px; }
  .grid-3:has(.svc-card) .svc-ic,
  .grid-4:has(.svc-card) .svc-ic{ width:44px; height:44px; border-radius:13px; }
  .grid-3:has(.svc-card) .svc-card h3,
  .grid-4:has(.svc-card) .svc-card h3{ font-size:17px; margin-bottom:6px; }
  .grid-3:has(.svc-card) .svc-card p,
  .grid-4:has(.svc-card) .svc-card p{ font-size:13.5px; }
  .grid-3:has(.svc-card) .svc-tag{ margin-top:14px; font-size:12px; padding:4px 10px; }
  /* la flecha del svc-top ocupa hueco en pantallas estrechas */
  .grid-3:has(.svc-card) .svc-top .icon-btn{ display:none; }
  /* La tarjeta CTA pasa a banda de ancho completo: en una celda estrecha
     el botón (nowrap) se cortaba y el perro se solapaba con él.
     Reservamos hueco a la derecha para el perro. */
  .grid-3:has(.svc-card) .cta-card{
    grid-column:1 / -1;
    padding-right:128px;
  }
  .grid-3:has(.svc-card) .cta-card .cta-pet{ width:108px; }
}
@media (max-width:380px){
  /* en pantallas muy estrechas, una sola columna para que respiren */
  .grid-3:has(.svc-card),
  .grid-4:has(.svc-card){ grid-template-columns:1fr; }
}
/* La banda CTA de servicios ocupa todo el ancho también en escritorio,
   como banner horizontal (con 6 tarjetas quedaría una celda suelta). */
@media (min-width:641px){
  .grid-3:has(.svc-card) .cta-card{
    grid-column:1 / -1;
    flex-direction:row; align-items:center; gap:36px;
    padding-right:200px; min-height:206px;
  }
  .grid-3:has(.svc-card) .cta-card > div{ flex:1; }
  .grid-3:has(.svc-card) .cta-card .btn--light{ align-self:center; flex:0 0 auto; }
  /* El alto del perro se ata al alto de la tarjeta: así nunca puede ser
     más alto que la banda y overflow:hidden no le recorta la cabeza. */
  .grid-3:has(.svc-card) .cta-card .cta-pet{
    width:auto; max-width:180px;
    height:calc(100% - 22px); max-height:210px;
    bottom:0; right:24px;
    object-fit:contain; object-position:bottom center;
  }
}

/* ============================================================
   PÁGINA ECOGRAFÍA — hero escáner, tabs, pasos, señales
   ============================================================ */

/* --- Hero: marco de ecografía "en directo" --- */
.eco-scan{ position:relative; width:100%; max-width:480px; margin-inline:auto; }
.eco-scan__frame{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3;
  box-shadow:var(--shadow-lg); border:6px solid #fff; background:#0c2530; }
.eco-scan__frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.eco-scan:hover .eco-scan__frame img{ transform:scale(1.05); }
/* línea de barrido que cruza la imagen */
.eco-scan__line{ position:absolute; left:0; right:0; top:0; height:3px; z-index:3;
  background:linear-gradient(90deg, transparent, var(--brand), #fff, var(--brand), transparent);
  box-shadow:0 0 16px 3px rgba(123,167,188,.8); animation:scSweep 3.6s var(--ease) infinite; }
.eco-scan__frame::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(123,167,188,.18), transparent 26%, transparent 74%, rgba(12,37,48,.42)); }
/* badge EN DIRECTO */
.eco-live{ position:absolute; top:14px; left:14px; z-index:4; display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px; background:rgba(12,37,48,.55); backdrop-filter:blur(6px);
  color:#fff; font-family:'Hanken Grotesk'; font-weight:700; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; }
.eco-live i{ width:8px; height:8px; border-radius:50%; background:#ff5b7f; box-shadow:0 0 0 0 rgba(255,91,127,.6); animation:scBlip 1.4s ease-out infinite; }
/* tira inferior con onda + latido */
.eco-signal{ position:absolute; left:14px; right:14px; bottom:14px; z-index:4; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:9px 13px; border-radius:14px; background:rgba(12,37,48,.5); backdrop-filter:blur(6px); color:#fff; }
.eco-signal small{ font-family:'Hanken Grotesk'; font-weight:600; font-size:12px; opacity:.92; display:flex; align-items:center; gap:7px; }
.eco-signal small svg{ color:#ff8aa6; animation:heart-beat 1.6s var(--ease) infinite; }
.eco-wave{ display:flex; align-items:center; gap:3px; height:24px; }
.eco-wave span{ width:3px; border-radius:2px; background:#bfe2f1; animation:scWave 1.05s ease-in-out infinite; }
.eco-wave span:nth-child(2){ animation-delay:.12s } .eco-wave span:nth-child(3){ animation-delay:.24s }
.eco-wave span:nth-child(4){ animation-delay:.36s } .eco-wave span:nth-child(5){ animation-delay:.48s }
.eco-wave span:nth-child(6){ animation-delay:.60s } .eco-wave span:nth-child(7){ animation-delay:.20s }
.eco-wave span:nth-child(8){ animation-delay:.40s }
/* tarjeta flotante */
.eco-float{ position:absolute; z-index:5; display:flex; align-items:center; gap:11px; padding:12px 15px;
  background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); animation:floaty 5s var(--ease) infinite; }
.eco-float--tr{ top:-18px; right:-10px; }
.eco-float .ef-ic{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:var(--green-soft); color:var(--green-ink); }
.eco-float b{ font-family:'Hanken Grotesk'; font-size:14px; display:block; color:var(--fg); }
.eco-float small{ color:var(--muted); font-size:12px; }

@keyframes scSweep{ 0%{ top:4%; opacity:0 } 12%{ opacity:1 } 88%{ opacity:1 } 100%{ top:96%; opacity:0 } }
@keyframes scWave{ 0%,100%{ height:6px } 50%{ height:22px } }
@keyframes scBlip{ 0%{ box-shadow:0 0 0 0 rgba(255,91,127,.6) } 70%{ box-shadow:0 0 0 7px rgba(255,91,127,0) } 100%{ box-shadow:0 0 0 0 rgba(255,91,127,0) } }

/* --- Tabs interactivas "¿Qué exploramos?" --- */
.tabs-nav{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:34px; }
.tab-btn{ display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  border:1px solid var(--border-2); background:var(--surface); color:var(--fg-2); cursor:pointer;
  font-family:'Hanken Grotesk'; font-weight:600; font-size:15px; transition:all .3s var(--ease); }
.tab-btn svg{ width:18px; height:18px; color:var(--brand-ink); transition:color .3s; }
.tab-btn:hover{ transform:translateY(-2px); border-color:var(--brand); box-shadow:var(--shadow); }
.tab-btn.active{ background:var(--black); border-color:var(--black); color:#fff; }
.tab-btn.active svg{ color:#fff; }
.tab-panels{ position:relative; }
.tab-panel{ display:none; }
.tab-panel.active{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,52px); align-items:center;
  animation:pop .5s var(--ease) both; }
.tab-visual{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:5/4; box-shadow:var(--shadow); }
.tab-visual img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.tab-panel.active:hover .tab-visual img{ transform:scale(1.06); }
.tab-visual .tag{ position:absolute; left:14px; bottom:14px; padding:7px 13px; border-radius:999px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(4px); font-family:'Hanken Grotesk'; font-weight:700; font-size:13px; color:var(--fg); }
.tab-body .eyebrow{ margin-bottom:12px; }
.tab-body h3{ font-family:'Hanken Grotesk'; font-weight:800; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em; margin-bottom:12px; }
.tab-body p{ color:var(--muted); margin-bottom:18px; }
.tab-list{ display:flex; flex-direction:column; gap:11px; }
.tab-list li{ display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--fg-2); }
.tab-list .ck{ width:24px; height:24px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); margin-top:1px; }
.tab-list .ck svg{ width:13px; height:13px; }

/* --- Timeline de pasos --- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.steps::before{ content:""; position:absolute; top:30px; left:8%; right:8%; height:2px;
  background:repeating-linear-gradient(90deg, var(--border-2) 0 8px, transparent 8px 16px); z-index:0; }
.step{ position:relative; z-index:1; text-align:center; }
.step .num{ width:60px; height:60px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
  font-family:'Hanken Grotesk'; font-weight:800; font-size:22px; color:var(--brand-ink);
  transition:transform .4s var(--ease), background .4s, color .4s; }
.step:hover .num{ transform:translateY(-6px) scale(1.06); background:var(--brand); color:#fff; }
.step h4{ font-family:'Hanken Grotesk'; font-weight:700; font-size:17px; margin-bottom:7px; }
.step p{ color:var(--muted); font-size:14px; }

/* --- Señales: cuándo conviene --- */
.sign{ display:flex; gap:15px; align-items:flex-start; padding:24px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.sign:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.sign .si{ width:46px; height:46px; flex:0 0 auto; border-radius:14px; display:grid; place-items:center; transition:transform .4s var(--ease); }
.sign:hover .si{ transform:rotate(-6deg) scale(1.08); }
.sign h4{ font-family:'Hanken Grotesk'; font-weight:700; font-size:16.5px; margin-bottom:5px; }
.sign p{ color:var(--muted); font-size:14px; }

@media (max-width:860px){
  .tab-panel.active{ grid-template-columns:1fr; gap:26px; }
  .tab-visual{ aspect-ratio:16/10; }
  .steps{ grid-template-columns:1fr 1fr; gap:28px 18px; }
  .steps::before{ display:none; }
}
@media (max-width:480px){
  .eco-float--tr{ right:0; top:-12px; padding:9px 12px; }
  .steps{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .eco-scan__line, .eco-wave span, .eco-live i, .eco-signal small svg, .eco-float{ animation:none !important; }
}

/* ===== Testimonios — carrusel de uno ===== */
.testi-carousel{ position:relative; max-width:1080px; margin:0 auto; }
.testi-viewport{ overflow:hidden; padding:20px 0; }
.testi-track{ display:flex; align-items:center; gap:30px; transition:transform .55s var(--ease); will-change:transform; }
.testi-slide{ flex:0 0 600px; max-width:600px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(28px,3.4vw,48px); text-align:center; display:flex; flex-direction:column; align-items:center;
  opacity:.4; transform:scale(.9); filter:blur(2.5px); transition:opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); }
.testi-slide.is-active{ opacity:1; transform:scale(1); filter:none; box-shadow:var(--shadow); }
.testi-slide:not(.is-active){ pointer-events:none; user-select:none; }
.testi-slide .stars{ color:var(--yellow-ink); letter-spacing:3px; margin-bottom:18px; font-size:18px; }
.testi-slide .quote{ font-family:'Hanken Grotesk'; font-weight:600; font-size:clamp(20px,2.2vw,27px); line-height:1.4; letter-spacing:-.01em; max-width:600px; }
.testi-slide .who{ margin-top:26px; display:flex; align-items:center; gap:12px; }
.testi-slide .av{ width:48px; height:48px; border-radius:50%; background:var(--brand); display:grid; place-items:center; color:#fff; font-family:'Hanken Grotesk'; font-weight:700; flex:0 0 auto; }
.testi-slide .who b{ font-family:'Hanken Grotesk'; display:block; font-size:15px; text-align:left; }
.testi-slide .who small{ color:var(--muted); font-size:13px; }
@media(max-width:640px){
  .testi-slide{ flex-basis:100%; max-width:100%; }
  .testi-slide:not(.is-active){ opacity:0; }
  .testi-viewport{ padding:8px 0; }
}
@media(prefers-reduced-motion:reduce){ .testi-track{ transition:none; } }
.testi-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:30px; }
.testi-arrow{ width:46px; height:46px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--fg); display:grid; place-items:center; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.testi-arrow:hover{ background:var(--brand); color:#fff; border-color:var(--brand); transform:scale(1.08); }
.testi-dots{ display:flex; gap:8px; }
.testi-dot{ width:8px; height:8px; border-radius:50%; background:var(--border); border:0; padding:0; cursor:pointer; transition:background .3s var(--ease), width .3s var(--ease); }
.testi-dot.is-active{ background:var(--brand); width:22px; border-radius:4px; }

/* ===== Equipo — bloque feature (home) ===== */
.team-feature{ position:relative; display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:center; max-width:960px; margin:0 auto; }
.team-feature::before{ content:""; position:absolute; left:-6%; top:-14%; width:46%; height:128%; background:radial-gradient(closest-side, color-mix(in oklab, var(--pink) 70%, transparent), transparent 70%); filter:blur(8px); z-index:0; pointer-events:none; }
.team-feature__photo{ position:relative; z-index:1; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow); }
.team-feature__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 24%; transition:transform .6s var(--ease); }
.team-feature:hover .team-feature__photo img{ transform:scale(1.05); }
.team-pill{ position:absolute; left:14px; bottom:14px; z-index:2; display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border-radius:999px; padding:7px 13px; font-size:13px; font-weight:600; font-family:'Hanken Grotesk'; box-shadow:var(--shadow); }
.team-pill__dot{ width:8px; height:8px; border-radius:50%; background:var(--green-ink); box-shadow:0 0 0 0 color-mix(in oklab, var(--green-ink) 60%, transparent); animation:teamDot 2s var(--ease) infinite; }
@keyframes teamDot{ 0%{ box-shadow:0 0 0 0 color-mix(in oklab, var(--green-ink) 55%, transparent); } 70%{ box-shadow:0 0 0 9px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
.team-feature__body{ position:relative; z-index:1; }
.team-feature__body h3{ font-family:'Hanken Grotesk'; font-weight:700; font-size:clamp(24px,3vw,34px); line-height:1.15; letter-spacing:-.02em; }
.team-feature__body p{ color:var(--muted); margin-top:14px; max-width:42ch; }
.team-creds{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 26px; }
.cred{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:8px 14px; font-size:13.5px; font-weight:600; font-family:'Hanken Grotesk'; transition:transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.cred svg{ color:var(--brand); transition:color .3s var(--ease); }
.cred:hover{ transform:translateY(-3px); border-color:var(--brand); color:var(--brand-ink); }
@media(max-width:760px){
  .team-feature{ grid-template-columns:1fr; max-width:480px; gap:24px; text-align:center; }
  .team-feature::before{ display:none; }
  .team-feature__body p{ margin-left:auto; margin-right:auto; }
  .team-creds{ justify-content:center; }
}
@media(prefers-reduced-motion:reduce){ .team-pill__dot{ animation:none; } }

/* ===== Blog — carrusel de un artículo ===== */
.art-carousel{ position:relative; max-width:680px; margin:0 auto; }
.art-track{ position:relative; }
.art-slide{ display:none; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.art-slide.is-active{ display:block; animation:testiIn .45s var(--ease); }
.art-slide:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.art-slide .art-img{ aspect-ratio:16/9; position:relative; display:grid; place-content:center; }
.art-slide .art-img > img{ width:100%; height:100%; object-fit:cover; }
.art-slide .art-body{ padding:24px; }
.art-slide .art-meta{ display:flex; gap:10px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:12px; }
.art-slide h3{ font-size:20px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-family:'Hanken Grotesk'; }
.art-slide:hover h3 .icon-btn{ background:var(--fg); color:#fff; border-color:var(--fg); transform:rotate(45deg); }
.art-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:26px; }

/* ===== Ajustes móvil pedidos ===== */
@media (max-width:640px){
  .stats-section{ display:none; }
  /* Navbar: solo teléfono + menú en móvil; fuera el CTA "Pedir cita" */
  .nav-cta .btn{ display:none; }
  /* Equipo: fuera los chips de credenciales para llegar antes al botón */
  .team-feature .team-creds{ display:none; }
  /* …pero el botón necesita aire respecto al párrafo de arriba */
  .team-feature__body .btn{ margin-top:22px; }
}

/* Equipo: una sola veterinaria → tarjeta centrada (todas las pantallas) */
.vets-grid--solo{ grid-template-columns:1fr; max-width:380px; margin:0 auto; }
.vets-grid--solo .vet{ aspect-ratio:4/5; }

/* ============================================================
   MÓVIL · más ligero y menos scroll  (Optimizate · jun 2026)
   Objetivo: poco texto, lectura rápida, sin scroll largo.
   Solo afecta a ≤640px; el escritorio queda intacto.
   ============================================================ */
@media (max-width:640px){
  /* Aire general más compacto para recorrer la página en menos scroll */
  .section{ padding:46px 0; }
  .section-head{ margin-bottom:22px; }
  .page-hero .lead, .section-head .lead{ font-size:15px; }
  .page-hero .h1, .hero .h1{ font-size:clamp(30px,8vw,38px); }

  /* SERVICIOS — tarjetas "de un vistazo": icono + título + etiqueta.
     Se oculta la descripción larga (en móvil prima entender rápido). */
  .grid-3:has(.svc-card) .svc-card p,
  .grid-4:has(.svc-card) .svc-card p{ display:none; }
  .grid-3:has(.svc-card) .svc-top,
  .grid-4:has(.svc-card) .svc-top{ margin-bottom:12px; }
  .grid-3:has(.svc-card) .svc-tag{ margin-top:10px; }
  /* DOS columnas siempre (incluso en móviles estrechos) → la mitad de scroll */
  .grid-3:has(.svc-card),
  .grid-4:has(.svc-card){ grid-template-columns:1fr 1fr; gap:10px; }

  /* "El día a día" — solo icono + título, sin descripción, en dos columnas */
  .grid-4:has(.feat){ grid-template-columns:1fr 1fr; gap:10px; }
  .grid-4 .feat p{ display:none; }
  .grid-4 .feat{ padding:16px; }

  /* SOBRE NOSOTROS — menos texto: ocultar el párrafo secundario largo */
  .why .muted{ display:none; }

  /* GALERÍA "Síguenos de cerca" — miniaturas pequeñas, sin scroll largo */
  .gallery{ grid-template-columns:repeat(3,1fr) !important; gap:8px; }
}

@media (max-width:380px){
  /* En pantallas muy estrechas: servicios y día a día siguen a 2 columnas */
  .grid-3:has(.svc-card),
  .grid-4:has(.svc-card),
  .grid-4:has(.feat){ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:1fr 1fr !important; }
}

/* ============================================================
   AÑADIDOS 2026-07-16 · Mega-menú Servicios · Equipo · Galería
   ============================================================ */

/* ---------- MEGA-MENÚ (escritorio) ---------- */
.nav-links .has-mega{ position:static; }
.nav-links .has-mega > a{ display:inline-flex; align-items:center; gap:5px; }
.nav-links .has-mega > a .caret{ transition:transform .3s var(--ease); opacity:.7; }
.nav-links .has-mega.open > a .caret{ transform:rotate(180deg); }
.nav-links .has-mega.open > a{ color:var(--fg); background:var(--grey); }

.mega{
  position:fixed; left:0; right:0; top:var(--nav-h,96px);
  background:#fff; border-bottom:1px solid var(--border);
  box-shadow:0 26px 44px rgba(20,20,25,.12);
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index:49;
}
.has-mega.open .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:var(--maxw); margin:0 auto; padding:28px 24px 32px;
  display:grid; grid-template-columns:1.35fr .65fr; gap:38px; align-items:stretch; }
.mega-eyebrow{ font-family:'Hanken Grotesk'; font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-ink); margin-bottom:14px; }
.mega-list{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; }
.mega-link{ display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:14px; transition:background .22s var(--ease), transform .22s var(--ease); }
.mega-link:hover{ background:var(--bg-soft); transform:translateX(3px); }
.mega-ic{ width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center; background:var(--accent-soft,var(--brand-soft)); color:var(--accent-ink,var(--brand-ink)); transition:transform .3s var(--ease); }
.mega-link:hover .mega-ic{ transform:scale(1.08) rotate(-3deg); }
.mega-tx b{ font-family:'Hanken Grotesk'; font-weight:600; font-size:15px; color:var(--fg); display:block; line-height:1.2; }
.mega-tx small{ color:var(--muted); font-size:12.5px; }
.mega-foot{ grid-column:1 / -1; margin-top:14px; padding-top:16px; border-top:1px solid var(--border); }
.mega-foot .link-arrow{ font-size:15px; }
.mega-media{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:250px; box-shadow:var(--shadow); }
.mega-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mega-media .mega-cap{ position:absolute; left:0; right:0; bottom:0; color:#fff; z-index:1; text-align:center;
  background:linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,.18) 55%, transparent); padding:40px 20px 18px; }
.mega-media .mega-cap b{ font-family:'Hanken Grotesk'; font-weight:700; font-size:17px; display:block; }
.mega-media .mega-cap small{ opacity:.9; font-size:13px; }

@media (max-width:900px){ .mega{ display:none !important; } .nav-links .has-mega > a .caret{ display:none; } }

/* ---------- DRAWER MÓVIL · submenú Servicios ---------- */
.drawer-sub-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:14px 16px; border-radius:14px; border:0; background:transparent; cursor:pointer;
  font-family:'Hanken Grotesk'; font-weight:600; font-size:19px; color:var(--fg); }
.drawer-sub-toggle .caret{ transition:transform .3s var(--ease); color:var(--muted); }
.drawer-group.open .drawer-sub-toggle{ background:var(--grey); color:var(--brand-ink); }
.drawer-group.open .drawer-sub-toggle .caret{ transform:rotate(180deg); }
.drawer-sub{ max-height:0; overflow:hidden; transition:max-height .34s var(--ease); }
.drawer-sub a{ display:block; font-size:16px !important; padding:10px 16px 10px 30px !important; color:var(--fg-2); }
.drawer-sub a::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); display:inline-block; margin-right:10px; vertical-align:middle; }

/* ---------- EQUIPO · grid de miembros (home + sobre nosotros) ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1000px; margin:0 auto; }
.tmember{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5;
  box-shadow:var(--shadow); background:var(--bg-soft); transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.tmember:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.tmember img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; transition:transform .7s var(--ease); }
.tmember:hover img{ transform:scale(1.06); }
.tmember__info{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:20px 18px 18px;
  color:#fff; background:linear-gradient(0deg, rgba(15,10,20,.82) 8%, rgba(15,10,20,.35) 58%, transparent); }
.tmember__info b{ font-family:'Hanken Grotesk'; font-weight:700; font-size:19px; letter-spacing:-.01em; display:block; }
.tmember__role{ display:inline-flex; align-items:center; gap:7px; margin-top:7px; font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22);
  padding:5px 11px; border-radius:999px; }
.tmember__role .rdot{ width:6px; height:6px; border-radius:50%; background:var(--green); }
@media(max-width:760px){ .team-grid{ grid-template-columns:1fr 1fr; gap:14px; max-width:520px; } }
@media(max-width:440px){ .team-grid{ grid-template-columns:1fr; max-width:340px; } }

/* ---------- GALERÍA BENTO · carrusel automático infinito ---------- */
.gallery-marquee{ position:relative; margin-top:8px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.gallery-row{ display:flex; gap:16px; width:max-content; will-change:transform; }
.gallery-row + .gallery-row{ margin-top:16px; }
.gallery-row--a{ animation:galleryScroll 52s linear infinite; }
.gallery-row--b{ animation:galleryScroll 62s linear infinite reverse; }
.gallery-marquee:hover .gallery-row{ animation-play-state:paused; }
@keyframes galleryScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.g-tile{ flex:none; height:230px; border-radius:18px; overflow:hidden; position:relative; box-shadow:var(--shadow); background:var(--bg-soft); }
.g-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.g-tile:hover img{ transform:scale(1.06); }
.g-tile--w{ width:360px; } .g-tile--m{ width:270px; } .g-tile--s{ width:210px; }
@media(max-width:640px){
  .g-tile{ height:170px; } .g-tile--w{ width:250px; } .g-tile--m{ width:200px; } .g-tile--s{ width:150px; }
  .gallery-row--b{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .gallery-row{ animation:none; } }

/* ---------- GALERÍA ECOGRAFÍA (grid) ---------- */
.eco-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.eco-shot{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow); background:var(--blue-soft); }
.eco-shot img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.eco-shot:hover img{ transform:scale(1.05); }
.eco-shot figcaption{ position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; color:#fff; font-size:13.5px; font-weight:600; font-family:'Hanken Grotesk'; background:linear-gradient(0deg, rgba(0,0,0,.6), transparent); }
@media(max-width:760px){ .eco-gallery{ grid-template-columns:1fr 1fr; } }
@media(max-width:460px){ .eco-gallery{ grid-template-columns:1fr; } }

/* Red de seguridad anti-scroll horizontal (2026-07-16) — clip no rompe position:sticky */
html, body{ overflow-x:clip; }