/* ==========================================================
   LA HUELLA CAMPESTRE · identidad: verde lima + teal + crema
   ========================================================== */

:root {
  --verde: #9bb341;
  --verde-oscuro: #7a9032;
  --verde-hoja: #b5cc55;
  --teal: #28abb1;
  --teal-oscuro: #1d8d92;
  --teal-claro: #45c2c8;
  --azul: #1f9fd8;
  --azul-oscuro: #14739f;
  --crema: #fdf6e3;
  --crema-sombra: #f0e6c8;
  --tinta: #2b3318;
  --blanco: #fffdf7;
  --wsp: #23c163;

  --f-display: "Luckiest Guy", cursive;
  --f-script: "Chewy", cursive;
  --f-body: "Baloo 2", sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* huellita SVG reutilizable como máscara */
  --paw-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='66' rx='21' ry='17'/%3E%3Cellipse cx='24' cy='42' rx='9.5' ry='13' transform='rotate(-22 24 42)'/%3E%3Cellipse cx='42' cy='30' rx='9.5' ry='13' transform='rotate(-7 42 30)'/%3E%3Cellipse cx='60' cy='30' rx='9.5' ry='13' transform='rotate(7 60 30)'/%3E%3Cellipse cx='78' cy='42' rx='9.5' ry='13' transform='rotate(22 78 42)'/%3E%3C/svg%3E");
  --heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 88C22 66 8 48 8 31A23 23 0 0 1 50 18 23 23 0 0 1 92 31c0 17-14 35-42 57Z'/%3E%3C/svg%3E");
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 52C180 88 340 6 560 30 780 54 920 92 1130 60 1280 38 1380 50 1440 42L1440 90 0 90Z'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  color: var(--tinta);
  background: var(--crema);
  overflow-x: hidden;
  line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; }

section { position: relative; }

section[id] { scroll-margin-top: 92px; }

.container { width: min(1120px, 92vw); margin-inline: auto; position: relative; z-index: 2; }

::selection { background: var(--azul); color: var(--blanco); }

:focus-visible { outline: 3px dashed var(--azul); outline-offset: 3px; border-radius: 6px; }

/* ---------- patrones de huellitas que derivan ---------- */
.pattern-verde, .pattern-teal { overflow: hidden; }

.pattern-verde::before, .pattern-teal::before {
  content: "";
  position: absolute;
  inset: -240px 0 0 -240px;
  background-color: transparent;
  -webkit-mask-image: none;
  background-image: var(--paw-bg);
  background-size: 240px 240px;
  animation: drift 90s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.pattern-verde { background: var(--verde); }
.pattern-verde::before {
  --paw-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='%23a8c04c' transform='rotate(-18 60 60) translate(28 36) scale(.62)'%3E%3Cellipse cx='50' cy='66' rx='21' ry='17'/%3E%3Cellipse cx='24' cy='42' rx='9.5' ry='13'/%3E%3Cellipse cx='42' cy='30' rx='9.5' ry='13'/%3E%3Cellipse cx='60' cy='30' rx='9.5' ry='13'/%3E%3Cellipse cx='78' cy='42' rx='9.5' ry='13'/%3E%3C/g%3E%3Cg fill='%23a8c04c' transform='rotate(24 170 170) translate(142 150) scale(.52)'%3E%3Cellipse cx='50' cy='66' rx='21' ry='17'/%3E%3Cellipse cx='24' cy='42' rx='9.5' ry='13'/%3E%3Cellipse cx='42' cy='30' rx='9.5' ry='13'/%3E%3Cellipse cx='60' cy='30' rx='9.5' ry='13'/%3E%3Cellipse cx='78' cy='42' rx='9.5' ry='13'/%3E%3C/g%3E%3C/svg%3E");
}

.pattern-teal { background: var(--teal); }
.pattern-teal::before {
  --paw-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='%2337b6bc' transform='rotate(-18 60 60) translate(28 36) scale(.62)'%3E%3Cellipse cx='50' cy='66' rx='21' ry='17'/%3E%3Cellipse cx='24' cy='42' rx='9.5' ry='13'/%3E%3Cellipse cx='42' cy='30' rx='9.5' ry='13'/%3E%3Cellipse cx='60' cy='30' rx='9.5' ry='13'/%3E%3Cellipse cx='78' cy='42' rx='9.5' ry='13'/%3E%3C/g%3E%3Cg fill='%2337b6bc' transform='rotate(24 170 170) translate(142 150) scale(.52)'%3E%3Cellipse cx='50' cy='66' rx='21' ry='17'/%3E%3Cellipse cx='24' cy='42' rx='9.5' ry='13'/%3E%3Cellipse cx='42' cy='30' rx='9.5' ry='13'/%3E%3Cellipse cx='60' cy='30' rx='9.5' ry='13'/%3E%3Cellipse cx='78' cy='42' rx='9.5' ry='13'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes drift { to { transform: translate(240px, 240px); } }

/* ---------- ondas entre secciones ---------- */
.quienes::after, .servicios::after, .funciona::after, .incluye::after, .galeria::after, .cta-final::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(34px, 6.5vw, 78px);
  -webkit-mask-image: var(--wave-mask);
  mask-image: var(--wave-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  z-index: 3;
  pointer-events: none;
}
.quienes::after  { background: var(--crema); }
.servicios::after { background: var(--verde); transform: scaleX(-1); }
.funciona::after { background: var(--teal); }
.incluye::after  { background: var(--crema); transform: scaleX(-1); }
.galeria::after  { background: var(--azul); }
.cta-final::after { background: var(--tinta); transform: scaleX(-1); }

/* ---------- tipografía de marca ---------- */
.title-sticker {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  letter-spacing: 0.02em;
  color: var(--blanco);
  text-transform: uppercase;
  text-shadow:
    2px 0 0 var(--out-c, var(--teal-oscuro)), -2px 0 0 var(--out-c, var(--teal-oscuro)),
    0 2px 0 var(--out-c, var(--teal-oscuro)), 0 -2px 0 var(--out-c, var(--teal-oscuro)),
    1.5px 1.5px 0 var(--out-c, var(--teal-oscuro)), -1.5px 1.5px 0 var(--out-c, var(--teal-oscuro)),
    1.5px -1.5px 0 var(--out-c, var(--teal-oscuro)), -1.5px -1.5px 0 var(--out-c, var(--teal-oscuro)),
    5px 7px 0 rgba(43, 51, 24, 0.16);
  rotate: -1.2deg;
  margin-bottom: 0.4em;
}
.pattern-verde .title-sticker { --out-c: var(--verde-oscuro); }
.title-sticker.on-crema { color: var(--verde); --out-c: var(--blanco); text-shadow:
    2.5px 0 0 var(--blanco), -2.5px 0 0 var(--blanco), 0 2.5px 0 var(--blanco), 0 -2.5px 0 var(--blanco),
    2px 2px 0 var(--blanco), -2px 2px 0 var(--blanco), 2px -2px 0 var(--blanco), -2px -2px 0 var(--blanco),
    6px 8px 0 rgba(43, 51, 24, 0.12);
}

.section-sub {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 600;
  max-width: 60ch;
  margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
}
.section-sub.on-color { color: var(--tinta); }

/* ---------- botones sticker ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 1.02rem;
  text-decoration: none;
  color: var(--tinta);
  background: var(--crema);
  border: 3px solid var(--tinta);
  border-radius: 999px;
  padding: 0.7em 1.5em;
  box-shadow: 0 5px 0 0 rgba(43, 51, 24, 0.85);
  transition: translate 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background 0.18s;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { translate: 0 -3px; box-shadow: 0 8px 0 0 rgba(43, 51, 24, 0.85); }
.btn:active { translate: 0 2px; box-shadow: 0 2px 0 0 rgba(43, 51, 24, 0.85); }

.btn-big { font-size: clamp(1.1rem, 2.2vw, 1.3rem); padding: 0.8em 1.7em; }
.btn-ghost { background: transparent; color: var(--blanco); border-color: var(--blanco); box-shadow: 0 5px 0 0 rgba(43, 51, 24, 0.35); }
.btn-verde { background: var(--verde); color: var(--blanco); border-color: var(--verde-oscuro); box-shadow: 0 5px 0 0 var(--verde-oscuro); }
.btn-verde:hover { box-shadow: 0 8px 0 0 var(--verde-oscuro); }
.btn-teal { background: var(--teal); color: var(--blanco); border-color: var(--teal-oscuro); box-shadow: 0 5px 0 0 var(--teal-oscuro); }
.btn-teal:hover { box-shadow: 0 8px 0 0 var(--teal-oscuro); }
.btn-azul { background: var(--azul); color: var(--blanco); border-color: var(--azul-oscuro); box-shadow: 0 5px 0 0 var(--azul-oscuro); }
.btn-azul:hover { box-shadow: 0 8px 0 0 var(--azul-oscuro); }

.wa-ico { width: 1.25em; height: 1.25em; fill: var(--wsp); }

/* ---------- barra de progreso ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 200; pointer-events: none; }
.progress span { display: block; height: 100%; width: 0%; background: var(--azul); border-radius: 0 99px 99px 0; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  translate: -50% 0;
  width: min(1080px, 94vw);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  background: var(--crema);
  border: 3px solid var(--tinta);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  box-shadow: 0 6px 0 0 rgba(43, 51, 24, 0.25);
  transition: padding 0.3s var(--ease-out), box-shadow 0.3s;
}
.nav.scrolled { padding: 0.3rem 1.1rem; box-shadow: 0 4px 0 0 rgba(43, 51, 24, 0.25); }

.nav-logo img { width: clamp(86px, 9vw, 104px); height: auto; transition: width 0.3s var(--ease-out); }
.nav.scrolled .nav-logo img { width: 78px; }

.nav-links { display: flex; gap: clamp(0.6rem, 1.6vw, 1.3rem); margin-inline: auto; }
.nav-links a {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--tinta);
  text-decoration: none;
  padding: 0.25em 0.6em;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.nav-links a:hover { background: var(--crema-sombra); }
.nav-links a.active { background: var(--verde); color: var(--blanco); }

.btn-nav { font-size: 0.92rem; padding: 0.5em 1.1em; background: var(--azul); color: var(--blanco); border-color: var(--azul-oscuro); box-shadow: 0 4px 0 0 var(--azul-oscuro); }
.btn-nav:hover { box-shadow: 0 7px 0 0 var(--azul-oscuro); }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-burger span { width: 26px; height: 4px; border-radius: 4px; background: var(--tinta); transition: transform 0.3s var(--ease-out), opacity 0.2s; }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--verde);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
}
body.menu-open .menu-overlay { opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }
.menu-overlay nav { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.menu-overlay nav > a:not(.btn) {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  color: var(--blanco);
  text-decoration: none;
  text-shadow: 3px 4px 0 var(--verde-oscuro);
  letter-spacing: 0.03em;
}

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(7rem, 14vh, 9rem) 5vw clamp(12rem, 24vh, 15rem);
}

.hero-inner { position: relative; z-index: 2; max-width: 860px; }

.hero-logo {
  width: clamp(240px, 36vw, 400px);
  margin-inline: auto;
  filter: drop-shadow(0 10px 0 rgba(43, 51, 24, 0.18));
  animation: dropIn 0.9s var(--ease-out) both;
}

.hero-kicker {
  font-family: var(--f-script);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  color: var(--crema);
  text-shadow: 2px 3px 0 var(--verde-oscuro);
  margin-top: 1.1rem;
  animation: riseIn 0.7s var(--ease-out) 0.18s both;
}

.hero-title { margin-top: 0.6rem; line-height: 0.95; animation: riseIn 0.7s var(--ease-out) 0.32s both; }
.hero-title .line-caps {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7.6vw, 5.4rem);
  color: var(--blanco);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  text-shadow:
    3px 0 0 var(--verde-oscuro), -3px 0 0 var(--verde-oscuro),
    0 3px 0 var(--verde-oscuro), 0 -3px 0 var(--verde-oscuro),
    2px 2px 0 var(--verde-oscuro), -2px 2px 0 var(--verde-oscuro),
    2px -2px 0 var(--verde-oscuro), -2px -2px 0 var(--verde-oscuro),
    7px 9px 0 rgba(43, 51, 24, 0.18);
}
.hero-title .line-script, .cta-title .line-script {
  display: block;
  font-family: var(--f-script);
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  color: var(--crema);
  rotate: -2.5deg;
  margin-top: 0.25em;
  text-shadow: 3px 4px 0 var(--verde-oscuro);
}

.hero-sub {
  max-width: 56ch;
  margin: 1.3rem auto 0;
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  font-weight: 600;
  color: var(--tinta);
  animation: riseIn 0.7s var(--ease-out) 0.46s both;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 1.7rem;
  animation: riseIn 0.7s var(--ease-out) 0.6s both;
}

.hero-dog {
  position: absolute;
  bottom: -4px;
  left: 50%;
  translate: -50% 0;
  width: min(540px, 84vw);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  animation: dogUp 1.1s var(--ease-out) 0.55s both;
}
.hero-dog img { width: 100%; filter: drop-shadow(0 -6px 18px rgba(43, 51, 24, 0.18)); }
.hero-dog.boop { animation: boop 0.5s var(--ease-out); }

@keyframes dropIn { from { opacity: 0; transform: translateY(-46px); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes dogUp { from { transform: translateY(101%); } to { transform: none; } }
@keyframes boop { 30% { transform: scale(1.06, 0.9) translateY(6px); } 70% { transform: scale(0.97, 1.04); } }

/* corazoncitos del boop */
.boop-heart {
  position: absolute;
  width: 30px; height: 30px;
  background: var(--crema);
  -webkit-mask-image: var(--heart-mask);
  mask-image: var(--heart-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
  z-index: 5;
  animation: heartUp 1.1s var(--ease-out) forwards;
}
@keyframes heartUp { to { transform: translate(var(--dx, 0), -130px) rotate(var(--rot, 10deg)) scale(0.4); opacity: 0; } }

/* ---------- stickers flotantes ---------- */
.stk {
  position: absolute;
  display: block;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 1;
  animation: floaty 6s ease-in-out infinite;
}
.stk-paw { -webkit-mask-image: var(--paw-mask); mask-image: var(--paw-mask); background: var(--verde-hoja); }
.stk-heart { -webkit-mask-image: var(--heart-mask); mask-image: var(--heart-mask); background: var(--crema); }

.hero .s1 { width: 74px; height: 74px; top: 16%; left: 7%; rotate: -22deg; }
.hero .s2 { width: 46px; height: 46px; top: 23%; right: 12%; rotate: 14deg; background: var(--azul); animation-delay: 1.2s; }
.hero .s3 { width: 110px; height: 110px; bottom: 26%; right: 5%; rotate: 28deg; animation-delay: 0.6s; }
.hero .s4 { width: 38px; height: 38px; bottom: 34%; left: 13%; rotate: -12deg; animation-delay: 2s; }
.hero .s5 { width: 56px; height: 56px; top: 55%; left: 3%; rotate: 40deg; background: var(--crema); animation-delay: 1.6s; }

@keyframes floaty { 50% { translate: 0 -14px; } }

/* ---------- marquee ---------- */
.marquee {
  background: var(--azul);
  border-block: 4px solid var(--tinta);
  overflow: hidden;
  padding: 0.7rem 0;
  position: relative;
  z-index: 4;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  width: max-content;
  animation: marq 26s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  color: var(--blanco);
  text-shadow: 2px 3px 0 var(--azul-oscuro);
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.paw-i {
  width: 1.5em; height: 1.5em;
  flex: 0 0 auto;
  background: var(--crema);
  -webkit-mask-image: var(--paw-mask);
  mask-image: var(--paw-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  rotate: 18deg;
}
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- quiénes somos ---------- */
.quienes { padding: clamp(4rem, 9vw, 7rem) 0 clamp(7rem, 12vw, 9rem); }

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.quienes-text p { color: var(--tinta); font-weight: 600; font-size: clamp(1rem, 1.9vw, 1.13rem); margin-bottom: 1rem; max-width: 58ch; }
.quienes-text strong { color: var(--blanco); }

.objetivo-card {
  background: var(--crema);
  border-radius: 24px;
  padding: 1.3rem 1.5rem;
  rotate: -1deg;
  box-shadow: 7px 9px 0 0 var(--teal-oscuro);
  margin: 1.5rem 0 1.2rem;
}
.objetivo-card .card-label {
  font-family: var(--f-script);
  color: var(--azul);
  font-size: 1.25rem;
  display: block;
  margin-bottom: 0.2em;
}
.objetivo-card p { margin: 0; }

.lema {
  font-family: var(--f-script);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  color: var(--blanco) !important;
  text-shadow: 2px 3px 0 var(--teal-oscuro);
  rotate: -1.5deg;
  max-width: none !important;
}

.quienes-collage { position: relative; min-height: clamp(380px, 46vw, 560px); }

.polaroid {
  position: absolute;
  background: var(--crema);
  padding: 12px 12px 8px;
  border-radius: 14px;
  box-shadow: 8px 10px 0 0 var(--teal-oscuro);
}
.polaroid img { border-radius: 8px; width: 100%; object-fit: cover; }
.polaroid figcaption {
  font-family: var(--f-script);
  text-align: center;
  font-size: 1.15rem;
  color: var(--tinta);
  padding: 6px 0 4px;
}
.p-a { width: 70%; top: 0; left: 0; rotate: -4deg; z-index: 1; }
.p-a img { aspect-ratio: 4 / 3.4; }
.p-b { width: 52%; bottom: 0; right: 0; rotate: 5deg; z-index: 2; }
.p-b img { aspect-ratio: 3 / 3.6; }
.collage-heart { width: 64px; height: 64px; top: -22px; right: 8%; rotate: 14deg; background: var(--crema); }

/* contadores */
.counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.counter .num {
  font-family: var(--f-display);
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  color: var(--blanco);
  display: block;
  text-shadow: 2px 0 0 var(--teal-oscuro), -2px 0 0 var(--teal-oscuro), 0 2px 0 var(--teal-oscuro), 0 -2px 0 var(--teal-oscuro), 4px 6px 0 rgba(43, 51, 24, 0.2);
}
.counter .lbl { font-weight: 800; color: var(--tinta); font-size: clamp(0.9rem, 1.6vw, 1.05rem); }

/* ---------- servicios ---------- */
.servicios { background: var(--crema); padding: clamp(4rem, 9vw, 7rem) 0 clamp(7rem, 12vw, 9rem); text-align: center; }
.servicios .section-sub { margin-inline: auto; }

.tabs { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); }
.tab {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: clamp(1rem, 2vw, 1.15rem);
  padding: 0.65em 1.5em;
  border-radius: 999px;
  border: 3px solid var(--tinta);
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
  box-shadow: 0 4px 0 0 rgba(43, 51, 24, 0.3);
  transition: translate 0.18s var(--ease-out), box-shadow 0.18s, background 0.2s, color 0.2s;
}
.tab:hover { translate: 0 -2px; box-shadow: 0 6px 0 0 rgba(43, 51, 24, 0.3); }
.tab[aria-selected="true"] { color: var(--blanco); translate: 0 -3px; }
.tab-verde[aria-selected="true"] { background: var(--verde); border-color: var(--verde-oscuro); box-shadow: 0 6px 0 0 var(--verde-oscuro); }
.tab-teal[aria-selected="true"] { background: var(--teal); border-color: var(--teal-oscuro); box-shadow: 0 6px 0 0 var(--teal-oscuro); }
.tab-azul[aria-selected="true"] { background: var(--azul); border-color: var(--azul-oscuro); box-shadow: 0 6px 0 0 var(--azul-oscuro); }

.panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  text-align: left;
}
.panel[hidden] { display: none; }
.panel.enter .panel-photo { animation: panelPhoto 0.55s var(--ease-out) both; }
.panel.enter .panel-body { animation: riseIn 0.55s var(--ease-out) 0.08s both; }
@keyframes panelPhoto { from { opacity: 0; transform: translateY(22px) rotate(-4deg); } to { opacity: 1; } }

.panel-photo { margin: 0; border-radius: 22px; padding: 12px; background: var(--blanco); rotate: -2deg; }
.panel-photo img { border-radius: 14px; aspect-ratio: 4 / 3.2; object-fit: cover; width: 100%; }
.frame-verde { box-shadow: 10px 12px 0 0 var(--verde); }
.frame-teal { box-shadow: 10px 12px 0 0 var(--teal); }
.frame-azul { box-shadow: 10px 12px 0 0 var(--azul); }

.panel-name { font-family: var(--f-script); font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1; margin-bottom: 0.35em; }
.name-verde { color: var(--verde-oscuro); }
.name-teal { color: var(--teal-oscuro); }
.name-azul { color: var(--azul-oscuro); }

.panel-body > p { font-weight: 600; max-width: 48ch; }

.paw-list { list-style: none; margin: 1.2rem 0 1.6rem; display: grid; gap: 0.65rem; }
.paw-list li { position: relative; padding-left: 2.1em; font-weight: 700; font-size: 1.05rem; }
.paw-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.05em;
  width: 1.45em; height: 1.45em;
  background: var(--verde);
  -webkit-mask-image: var(--paw-mask);
  mask-image: var(--paw-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  rotate: -10deg;
}
#panel-hotel .paw-list li::before { background: var(--teal); }
#panel-vet .paw-list li::before { background: var(--azul); }

/* ---------- cómo funciona ---------- */
.funciona { padding: clamp(4rem, 9vw, 7rem) 0 clamp(7rem, 12vw, 9rem); text-align: center; }
.funciona .section-sub { margin-inline: auto; }

.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4rem); }

.steps-path { position: absolute; top: 34px; left: 0; width: 100%; height: 120px; z-index: 0; }
.steps-path path {
  stroke: var(--crema);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 16 14;
}

.step { position: relative; z-index: 1; }
.step-num {
  font-family: var(--f-display);
  font-size: 2.2rem;
  color: var(--verde-oscuro);
  background: var(--crema);
  width: 84px; height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 4px solid var(--verde-oscuro);
  box-shadow: 0 6px 0 0 var(--verde-oscuro);
  margin: 0 auto 1rem;
  padding-top: 8px;
}
.step h3 { font-family: var(--f-script); font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--blanco); text-shadow: 2px 3px 0 var(--verde-oscuro); margin-bottom: 0.3em; }
.step p { font-weight: 600; max-width: 30ch; margin-inline: auto; }

/* ---------- incluye ---------- */
.incluye { padding: clamp(4rem, 9vw, 7rem) 0 clamp(7rem, 12vw, 9rem); }

.incluye-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4.5vw, 4rem); align-items: start; margin-top: 1rem; }

.check-list {
  list-style: none;
  background: var(--crema);
  border-radius: 26px;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  rotate: 0.6deg;
  box-shadow: 9px 11px 0 0 var(--teal-oscuro);
  display: grid;
  gap: 1.05rem;
}
.check-list li { display: flex; align-items: center; gap: 0.8em; font-weight: 800; font-size: clamp(1.02rem, 2vw, 1.2rem); flex-wrap: wrap; }
.paw-check {
  width: 1.7em; height: 1.7em;
  flex: 0 0 auto;
  background: var(--verde);
  -webkit-mask-image: var(--paw-mask);
  mask-image: var(--paw-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  rotate: -12deg;
}
.check-list li:nth-child(even) .paw-check { background: var(--teal); rotate: 10deg; }

.burst {
  font-family: var(--f-script);
  background: var(--azul);
  color: var(--blanco);
  padding: 0.45em 0.9em;
  font-size: 0.95em;
  clip-path: polygon(50% 0%, 59% 9%, 72% 4%, 76% 16%, 90% 16%, 88% 29%, 100% 35%, 92% 46%, 100% 58%, 89% 65%, 93% 78%, 80% 79%, 77% 92%, 64% 87%, 56% 99%, 47% 89%, 35% 96%, 30% 84%, 16% 86%, 18% 72%, 5% 67%, 12% 56%, 2% 46%, 12% 37%, 7% 24%, 21% 22%, 21% 9%, 35% 11%, 41% 0%);
  rotate: -7deg;
  animation: burstPulse 2.4s ease-in-out infinite;
}
@keyframes burstPulse { 50% { scale: 1.08; rotate: -4deg; } }

.incluye-cards { display: grid; gap: 1.4rem; }
.detail-card {
  background: var(--crema);
  border-radius: 24px;
  padding: 1.5rem 1.7rem;
  box-shadow: 8px 10px 0 0 var(--teal-oscuro);
}
.detail-card:nth-child(2) { rotate: -0.8deg; }
.card-script { font-family: var(--f-script); color: var(--teal-oscuro); font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-bottom: 0.35em; }
.detail-card p { font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.chip {
  font-weight: 800;
  background: var(--teal);
  color: var(--blanco);
  border-radius: 999px;
  padding: 0.35em 1em;
  box-shadow: 0 3px 0 0 var(--teal-oscuro);
}
.chip:nth-child(odd) { background: var(--verde); box-shadow: 0 3px 0 0 var(--verde-oscuro); rotate: -2deg; }

/* ---------- galería ---------- */
.galeria { background: var(--crema); padding: clamp(4rem, 9vw, 7rem) 0 clamp(7rem, 12vw, 9rem); }

.gallery-wrap { position: relative; }

.gallery {
  display: flex;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1.4rem max(calc((100vw - 1120px) / 2), 4vw) 2rem;
  scrollbar-width: none;
  cursor: grab;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery.dragging { cursor: grabbing; scroll-snap-type: none; }

.gallery figure {
  flex: 0 0 min(400px, 76vw);
  scroll-snap-align: center;
  margin: 0;
  background: var(--blanco);
  border-radius: 18px;
  padding: 10px 10px 6px;
  box-shadow: 6px 8px 0 0 var(--verde);
  transition: translate 0.25s var(--ease-out);
}
.gallery figure:nth-child(even) { rotate: 1.3deg; box-shadow: 6px 8px 0 0 var(--teal); }
.gallery figure:nth-child(odd) { rotate: -1.2deg; }
.gallery figure:hover { translate: 0 -6px; }
.gallery img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; pointer-events: none; }
.gallery figcaption { font-family: var(--f-script); text-align: center; padding: 8px 4px 4px; font-size: 1.1rem; }

.g-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 3px solid var(--tinta);
  background: var(--crema);
  color: var(--tinta);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 0 0 rgba(43, 51, 24, 0.4);
  transition: translate 0.18s var(--ease-out);
  display: grid;
  place-items: center;
  padding-bottom: 5px;
}
.g-arrow:hover { translate: 0 calc(-50% - 3px); }
.g-prev { left: clamp(8px, 2vw, 26px); }
.g-next { right: clamp(8px, 2vw, 26px); }

/* lightbox */
.lightbox { border: 0; border-radius: 22px; background: var(--crema); padding: 14px; max-width: min(920px, 92vw); }
.lightbox::backdrop { background: rgba(43, 51, 24, 0.82); }
.lightbox img { border-radius: 14px; max-height: 76vh; width: auto; max-width: 100%; margin-inline: auto; }
.lightbox p { font-family: var(--f-script); text-align: center; font-size: 1.3rem; padding-top: 10px; color: var(--tinta); }
.lb-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid var(--tinta);
  background: var(--blanco);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  z-index: 2;
}

/* ---------- CTA final ---------- */
.cta-final {
  background: var(--azul);
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(7rem, 11vw, 8.5rem);
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: -240px 0 0 -240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='%2336aade' transform='translate(28 36) scale(.62)'%3E%3Cellipse cx='50' cy='66' rx='21' ry='17'/%3E%3Cellipse cx='24' cy='42' rx='9.5' ry='13'/%3E%3Cellipse cx='42' cy='30' rx='9.5' ry='13'/%3E%3Cellipse cx='60' cy='30' rx='9.5' ry='13'/%3E%3Cellipse cx='78' cy='42' rx='9.5' ry='13'/%3E%3C/g%3E%3Cg fill='%2336aade' transform='translate(142 150) scale(.52)'%3E%3Cellipse cx='50' cy='66' rx='21' ry='17'/%3E%3Cellipse cx='24' cy='42' rx='9.5' ry='13'/%3E%3Cellipse cx='42' cy='30' rx='9.5' ry='13'/%3E%3Cellipse cx='60' cy='30' rx='9.5' ry='13'/%3E%3Cellipse cx='78' cy='42' rx='9.5' ry='13'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 240px;
  animation: drift 90s linear infinite;
  pointer-events: none;
}

.cta-split { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: end; }

.cta-kicker { font-family: var(--f-script); font-size: clamp(1.2rem, 2.6vw, 1.6rem); color: var(--crema); text-shadow: 2px 3px 0 var(--azul-oscuro); }

.cta-title { margin: 0.4rem 0 1rem; line-height: 0.95; }
.cta-title .line-caps {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.3rem, 6.4vw, 4.6rem);
  color: var(--blanco);
  text-transform: uppercase;
  text-shadow:
    3px 0 0 var(--azul-oscuro), -3px 0 0 var(--azul-oscuro),
    0 3px 0 var(--azul-oscuro), 0 -3px 0 var(--azul-oscuro),
    2px 2px 0 var(--azul-oscuro), -2px 2px 0 var(--azul-oscuro),
    2px -2px 0 var(--azul-oscuro), -2px -2px 0 var(--azul-oscuro),
    6px 8px 0 rgba(43, 51, 24, 0.2);
}
.cta-title .line-script { color: var(--crema); text-shadow: 3px 4px 0 var(--azul-oscuro); font-size: clamp(2.2rem, 5.6vw, 3.8rem); }

.cta-sub { max-width: 52ch; font-weight: 600; color: var(--blanco); margin-bottom: 1.6rem; }

.cta-note { font-family: var(--f-script); color: var(--crema); margin-top: 0.8rem; font-size: 1.1rem; }

.cta-dog { max-height: clamp(340px, 44vw, 560px); width: auto; justify-self: center; filter: drop-shadow(8px 10px 0 rgba(20, 115, 159, 0.5)); }

/* confeti de huellitas */
.confetti-paw {
  position: fixed;
  width: 26px; height: 26px;
  -webkit-mask-image: var(--paw-mask);
  mask-image: var(--paw-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
  z-index: 300;
  animation: confetti 1.25s var(--ease-out) forwards;
}
@keyframes confetti { to { transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(0.3); opacity: 0; } }

/* ---------- footer ---------- */
.footer { background: var(--tinta); color: var(--crema); padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; }

.footer-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }

.footer-brand img { width: 180px; }
.footer-lema { font-family: var(--f-script); color: var(--verde-hoja); margin-top: 0.8rem; font-size: 1.15rem; }

.footer-links { display: grid; gap: 0.55rem; }
.footer-links a, .footer-contact a { color: var(--crema); text-decoration: none; font-weight: 700; }
.footer-links a:hover, .footer-contact a:hover { color: var(--verde-hoja); }

.footer-contact { display: grid; gap: 0.45rem; font-weight: 600; }
.footer-contact a { color: var(--verde-hoja); }

.footer-copy { text-align: center; margin-top: 2.5rem; opacity: 0.65; font-size: 0.9rem; padding-inline: 5vw; }

/* ---------- WhatsApp flotante ---------- */
.whats-float {
  position: fixed;
  bottom: 20px; right: 20px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--wsp);
  display: grid;
  place-items: center;
  z-index: 150;
  box-shadow: 0 5px 0 0 rgba(43, 51, 24, 0.4);
  scale: 0;
  transition: scale 0.35s var(--ease-out);
}
.whats-float.show { scale: 1; }
.whats-float:hover { scale: 1.08; }
.whats-float svg { width: 34px; height: 34px; fill: var(--blanco); }
.whats-float::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid var(--wsp);
  animation: ping 2.2s ease-out infinite;
}
@keyframes ping { 70%, 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- reveals ---------- */
[data-reveal] {
  opacity: 0;
  translate: 0 30px;
  transition: opacity 0.75s var(--ease-out), translate 0.75s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 95ms);
}
[data-reveal].revealed { opacity: 1; translate: 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .nav-links, .btn-nav { display: none; }
  .nav-burger { display: flex; }

  .split, .panel, .incluye-grid, .cta-split { grid-template-columns: 1fr; }

  .quienes-collage { min-height: 0; height: auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; align-items: start; margin-top: 1.5rem; }
  .polaroid { position: static; }
  .p-a, .p-b { width: 100%; }
  .collage-heart { display: none; }

  .counters { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }

  .panel { text-align: left; }
  .panel-photo { rotate: -1.5deg; max-width: 560px; margin-inline: auto; }

  .steps { grid-template-columns: 1fr; gap: 2.6rem; }
  .steps-path { display: none; }
  .step:not(:last-child)::after {
    content: "";
    display: block;
    width: 5px; height: 38px;
    margin: 1.4rem auto 0;
    background-image: linear-gradient(var(--crema) 55%, transparent 55%);
    background-size: 5px 14px;
    border-radius: 4px;
  }

  .cta-split { align-items: center; }
  .cta-dog { max-height: 300px; order: -1; }

  .g-arrow { display: none; }

  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-contact a { overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
  .nav { top: 10px; padding: 0.45rem 0.9rem; }
  .hero { padding-bottom: 9.5rem; }
  .hero-dog { width: 96vw; }
  .hero .s3 { display: none; }
  .btn-big { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .hero-ctas { width: 100%; }
  .quienes-collage { grid-template-columns: 1fr; }
  .p-b { max-width: 78%; justify-self: end; margin-top: -2rem; rotate: 4deg; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; translate: 0 0; }
  .hero-dog, .hero-logo, .hero-kicker, .hero-title, .hero-sub, .hero-ctas { animation: none; opacity: 1; transform: none; }
}