/* ===========================================================
   PASEOS CON AMOR — booking page
   Palette and type system drawn from the brand's own illustrated
   art (warm cream, magenta, teal, mustard, a touch of purple).
   Signature elements: the illustrated Yulia artwork itself, and a
   small heart+paw sticker badge used sparingly as an accent.
=========================================================== */

:root {
  --color-bg: #FBF3E1;
  --color-bg-card: #FFFDF8;
  --color-magenta: #EE2B72;
  --color-magenta-dark: #C81458;
  --color-teal: #0FADA3;
  --color-teal-dark: #0B857C;
  --color-purple: #7A3FC4;
  --color-mustard: #FFC229;
  --color-mustard-dark: #E0A400;
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1DA851;
  --color-text: #3A2E22;
  --color-text-soft: #6B5D4E;
  --color-border: rgba(58, 46, 34, 0.12);
  --color-outline: #FFFDF8;

  --font-display: "Baloo 2", ui-rounded, sans-serif;
  --font-script: "Caveat", cursive;
  --font-body: "Nunito", sans-serif;

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 999px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  --shadow-soft: 0 10px 26px rgba(58, 46, 34, 0.10);
  --shadow-lift: 0 16px 36px rgba(58, 46, 34, 0.18);
}

/* Sticker-outline: a thin light halo behind text, like a die-cut sticker.
   Uses a true text stroke (crisp) rather than stacked offset shadows
   (which blur on thin/cursive strokes). Only applied where the text
   itself is a dark/colored fill — on white-on-color text (like the
   footer wordmark) it's skipped entirely, since a light outline on
   already-light text just smears rather than reading as an edge. */
.sticker-text {
  -webkit-text-stroke: 3px var(--color-outline);
  paint-order: stroke fill;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-magenta-dark);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  font-weight: 700;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); color: var(--color-teal-dark); }
h3 { font-size: 1.2rem; color: var(--color-text); }

p { margin: 0 0 var(--space-2); color: var(--color-text-soft); }
a { color: var(--color-teal-dark); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-3); }

.skip-link {
  position: absolute; left: -999px; top: auto;
  background: var(--color-magenta-dark); color: #fff;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); z-index: 100;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--color-mustard-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 243, 225, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 2px dashed var(--color-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; }
.brand { text-decoration: none; display: inline-flex; align-items: baseline; gap: 6px; }
.brand-signature { font-family: var(--font-script); font-weight: 600; font-size: 1.55rem; color: var(--color-teal-dark); margin-right: 3px; opacity: 1; }
.brand-main { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--color-magenta-dark); }
.brand-footer .brand-main { color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); }
.brand-footer .brand-signature { color: rgba(255, 255, 255, 0.85); }

.lang-toggle {
  font-family: var(--font-body); font-weight: 700;
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 6px 14px; cursor: pointer; color: var(--color-text);
}
.lang-opt { opacity: 0.4; }
.lang-opt.is-active { opacity: 1; color: var(--color-magenta-dark); }
.lang-sep { margin: 0 4px; opacity: 0.4; }

.section { padding: var(--space-6) 0; position: relative; overflow: hidden; }
.section-tight { padding: var(--space-5) 0; }
.section-alt { background: rgba(255, 255, 255, 0.4); }
.section-floaty { position: relative; overflow: hidden; }
.section-floaty > .wrap { position: relative; z-index: 3; }

/* ---- Sparse accessory accents in section margins ---- */
.deco-accessory { position: absolute; opacity: 0.22; pointer-events: none; z-index: 0; }

/* ---- Illustrated image placements ---- */
/* Rounded banner under "Cómo funciona" heading */
.how-banner { max-width: 760px; margin: 0 auto var(--space-4); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.how-banner img { width: 100%; height: auto; display: block; }
/* Photo-updates two-column image */
.photo-updates-art img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
/* Cancel + privacy with compact side image (shown whole, not stretched) */
.info-with-art { align-items: start; gap: var(--space-4); }
.info-art { position: sticky; top: var(--space-4); }
.info-art img { width: 100%; height: auto; max-height: 460px; object-fit: contain; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.info-text-second { margin-top: var(--space-4); }
@media (max-width: 720px) {
  .info-art { position: static; margin-bottom: var(--space-3); }
  .info-art img { max-height: 320px; }
}
.deco-accessory--tl { top: 24px; left: 18px; transform: rotate(-12deg); }
.deco-accessory--tr { top: 24px; right: 18px; transform: rotate(10deg); }
.deco-accessory--br { bottom: 24px; right: 22px; transform: rotate(8deg); }
.deco-accessory--bl { bottom: 24px; left: 22px; transform: rotate(-8deg); }

/* keep decorations from cramping small screens */
@media (max-width: 720px) {
  .deco-accessory { display: none; }
}

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-4) 0 var(--space-5);
  display: flex;
  flex-direction: column;
}
.hero-inner { position: relative; z-index: 3; }
.hero-art { order: -1; margin-bottom: var(--space-3); }
.hero-art img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
}
.hero-sub { font-size: 1.12rem; max-width: 480px; }
.eyebrow { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; color: var(--color-teal-dark); margin-bottom: var(--space-2); }
.hero-ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
/* "Ver opciones y precios" has a full label (default / mobile) and a short
   "Ver opciones" label shown by default (desktop/tablet, where three buttons
   share one row); the full "Ver opciones y precios" is shown only on mobile.
   Uses the same 720px boundary as the pill split for consistent behaviour. */
.hero-see-link .see-short { display: inline; }
.hero-see-link .see-full { display: none; }
/* Mobile-only "Ver opciones" button that sits on the hero image under the
   pills; hidden on desktop where the link lives in the button row below.
   Two-class selector so it beats the base `.btn { display: inline-flex }`. */
.hero-text .hero-see-mobile { display: none; }
.hero-note { font-size: 0.9rem; opacity: 0.85; }
.whatsapp-inline { align-items: center; gap: 8px; }
/* The hero's inline WhatsApp button is redundant with the floating
   WhatsApp button present on every screen, so it's hidden site-wide.
   Two-class selector so it beats the base `.btn { display: inline-flex }`.
   The element stays in the DOM (its href is still wired up), just hidden. */
.hero-ctas .whatsapp-inline { display: none; }

/* Desktop: the illustration becomes a full-bleed background for the
   whole hero, with the text sitting directly on the image's own open
   sky rather than in a separate boxed card. A gradient scrim guarantees
   the text stays legible even if the crop shifts at different widths. */
@media (min-width: 861px) {
  .hero {
    flex-direction: row;
    align-items: center;
    min-height: 640px;
    padding: 0;
  }
  .hero-art {
    position: absolute; inset: 0; z-index: 0;
    margin-bottom: 0;
  }
  .hero-art img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 38%;
    border-radius: 0; box-shadow: none;
  }
  .hero::after {
    content: "";
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(
      90deg,
      var(--color-bg) 0%,
      var(--color-bg) 26%,
      rgba(251, 243, 225, 0.7) 34%,
      rgba(251, 243, 225, 0.2) 44%,
      rgba(251, 243, 225, 0) 52%
    );
  }
  .hero-inner { z-index: 3; width: 100%; padding: var(--space-5) var(--space-3); }
  .hero-copy { max-width: 520px; }

  /* Three buttons on a single row: Reservar ahora · Ver opciones · Quién soy.
     The short label is the default; just prevent wrapping so they stay on
     one line. */
  .hero-ctas { flex-wrap: nowrap; align-items: center; }
  .hero-ctas .btn { white-space: nowrap; flex: 0 0 auto; }

  /* Fill the two secondary hero links (Ver opciones, Quién soy) with solid
     teal on desktop for stronger visibility over the illustration. Mobile
     keeps them as quiet text links. */
  .hero-ctas .btn-outline:not(.whatsapp-inline) {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: #fff;
  }
  .hero-ctas .btn-outline:not(.whatsapp-inline):hover {
    background: var(--color-teal-dark);
    border-color: var(--color-teal-dark);
    color: #fff;
  }

  /* Tighten the hero rhythm so the block sits a little higher: less gap
     under the pill and above the paragraph. */
  .hero .ribbon { margin-bottom: var(--space-3); }
  .hero-actions .hero-sub { margin-top: var(--space-3); }
}


/* Page-load reveal: hero content fades and rises in with a short stagger.
   animation-fill-mode "both" holds the 0% state during the delay so
   nothing flashes at full opacity before its turn. */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeUpIn 0.7s ease-out both; }
.reveal-1 { animation-delay: 0s; }
.reveal-2 { animation-delay: 0.1s; }
.reveal-3 { animation-delay: 0.2s; }
.reveal-4 { animation-delay: 0.3s; }
.reveal-5 { animation-delay: 0.38s; }

/* Ambient floating hearts/paws in the hero — decorative only, low
   opacity, slow, and hidden entirely under reduced motion below. */
.floaties { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.floaty { position: absolute; opacity: 0; animation: floatUp 8s ease-in-out infinite; }
.floaty-1 { top: 6%; left: 4%; animation-duration: 8s; animation-delay: 0.4s; }
.floaty-2 { top: 72%; left: 9%; animation-duration: 9.5s; animation-delay: 1.6s; }
.floaty-3 { top: 10%; left: 90%; animation-duration: 7.5s; animation-delay: 2.4s; }
.floaty-4 { top: 58%; left: 94%; animation-duration: 6.8s; animation-delay: 0.9s; }
.floaty-5 { top: 88%; left: 48%; animation-duration: 9s; animation-delay: 3.1s; }
.floaty-6 { top: 28%; left: 16%; animation-duration: 7s; animation-delay: 2.2s; }
.floaty-7 { top: 40%; left: 82%; animation-duration: 8.2s; animation-delay: 1s; }
.floaty-8 { top: 18%; left: 60%; animation-duration: 9.8s; animation-delay: 0.2s; }
.floaty-9 { top: 78%; left: 30%; animation-duration: 6.4s; animation-delay: 3.6s; }

@keyframes floatUp {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.75; }
  85% { opacity: 0.55; }
  100% { transform: translateY(-34px); opacity: 0; }
}

/* Keep the hero calm on small screens — full density only once there's
   room for it (tablet and up). */
@media (max-width: 640px) {
  .floaty-4, .floaty-5, .floaty-6, .floaty-7, .floaty-8, .floaty-9 { display: none; }
}
@media (min-width: 641px) and (max-width: 860px) {
  .floaty-8, .floaty-9 { display: none; }
}

/* Ribbon: a bold pill-style tagline banner, sticker-adjacent without
   the full poster-frame treatment. */
.ribbon {
  display: inline-block;
  background: var(--color-magenta);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 8px 20px;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--space-2);
  transform-origin: 50% 0%;
  animation: ribbonFlutter 5s ease-in-out infinite;
}
@keyframes ribbonFlutter {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1deg); }
}

/* Tagline pill has two forms: the full combined pill (default / desktop)
   and a two-pill stacked version used only on mobile. */
.ribbon-split { display: none; }

/* Heartbeat on the heart standing in for the "o" in "love" */
.brand-heart { display: inline-block; color: var(--color-teal); vertical-align: -2px; }
.brand-heart svg { animation: heartbeat 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon, .brand-heart svg { animation: none; }
}


@media (prefers-reduced-motion: reduce) {
  .floaties { display: none; }
  .reveal { animation: none; opacity: 1; transform: none; }
}

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  padding: 14px 26px; border-radius: var(--radius-pill);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-mustard); color: var(--color-text); box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--color-mustard-dark); box-shadow: var(--shadow-lift); }
.btn-outline { background: transparent; border-color: var(--color-teal); color: var(--color-teal-dark); }
.btn-outline:hover { background: var(--color-teal); color: #fff; }
.btn-primary-teal { background: var(--color-teal); border-color: var(--color-teal); color: #fff; }
.btn-primary-teal:hover { background: var(--color-teal-dark); border-color: var(--color-teal-dark); color: #fff; }
.btn-block { display: flex; width: 100%; }

.feature-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); text-align: center; }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: var(--space-1); }
.feature-icon--magenta { background: rgba(232, 67, 127, 0.14); color: var(--color-magenta-dark); }
.feature-icon--teal { background: rgba(28, 158, 150, 0.14); color: var(--color-teal-dark); }
.feature-icon--mustard { background: rgba(240, 180, 41, 0.18); color: var(--color-mustard-dark); }
.feature-icon--purple { background: rgba(110, 76, 158, 0.14); color: var(--color-purple); }
.feature p { color: var(--color-text); font-weight: 600; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.card { position: relative; background: var(--color-bg-card); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-soft); border: 2px solid var(--color-border); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; }
.card-highlight { border: 2px dashed var(--color-magenta); }

/* Hover: gentle 3D-ish lift */
.card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-lift); }

/* Subtle floating hearts on hover — pure CSS, two drifting hearts rising from the CTA area.
   They fully fade before reaching the top, so no overflow clipping is needed
   (which keeps the "Lo más elegido" badge, positioned above the card, visible). */
.card::before, .card::after {
  content: "\2665";
  position: absolute;
  right: 20px;
  bottom: 90px;
  font-size: 1rem;
  color: var(--color-magenta);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.card:hover::before { animation: heartFloat 2.6s ease-out infinite; }
.card:hover::after { animation: heartFloat 2.6s ease-out infinite; animation-delay: 1.2s; right: 38px; font-size: 0.78rem; color: var(--color-purple); }

@keyframes heartFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0.6) rotate(-8deg); }
  25%  { opacity: 0.65; }
  100% { opacity: 0; transform: translateY(-52px) scale(1.05) rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
  .card:hover::before, .card:hover::after { animation: none; opacity: 0; }
}
.card-badge {
  position: absolute; top: -14px; left: var(--space-3);
  background: var(--color-magenta); color: #fff; font-weight: 700; font-size: 0.75rem;
  padding: 5px 14px; border-radius: var(--radius-pill); box-shadow: var(--shadow-soft);
  transform-origin: 50% 100%;
  animation: badgeWiggle 6s ease-in-out infinite;
}
@keyframes badgeWiggle {
  0%, 90%, 100% { transform: rotate(0deg); }
  91.5% { transform: rotate(-7deg); }
  94% { transform: rotate(6deg); }
  96.5% { transform: rotate(-3deg); }
  98.5% { transform: rotate(2deg); }
}
.card-eyebrow { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; font-weight: 800; color: var(--color-teal-dark); margin-bottom: var(--space-1); }
.price { margin: var(--space-1) 0 var(--space-2); }
.price-amount { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; color: var(--color-magenta-dark); }
.price-note { font-size: 0.85rem; color: var(--color-text-soft); }
.card-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.card-list li { padding-left: 1.5em; position: relative; margin-bottom: 8px; color: var(--color-text); }
.card-list li::before { content: "🐾"; position: absolute; left: 0; font-size: 0.85em; }

/* Pet-sitting duration/price list — bolder and more colorful than the
   plain card-list, since price clarity matters more here. */
.sitting-price-list { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: flex; flex-direction: column; gap: 8px; }
.sitting-price-list li {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: 10px 16px; box-shadow: var(--shadow-soft);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  cursor: default;
}
.sitting-price-list li:nth-child(odd):hover { transform: translateY(-4px) rotate(-0.6deg); box-shadow: var(--shadow-lift); }
.sitting-price-list li:nth-child(even):hover { transform: translateY(-4px) rotate(0.6deg); box-shadow: var(--shadow-lift); }

@media (prefers-reduced-motion: reduce) {
  .sitting-price-list li { transition: none; }
  .sitting-price-list li:hover { transform: none; }
}
.sitting-price-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sitting-price-label { font-weight: 700; font-size: 1.05rem; color: var(--color-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sitting-price-tag {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  color: #fff; padding: 6px 18px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.sitting-price-tag--teal { background: var(--color-teal); }
.sitting-price-tag--mustard { background: var(--color-mustard-dark); }
.sitting-price-tag--magenta { background: var(--color-magenta); }
.sitting-price-tag--purple { background: var(--color-purple); }
.sitting-price-desc { font-size: 0.85rem; line-height: 1.35; color: var(--color-text-soft); margin: 0; }
.sitting-price-catnote {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--color-purple); background: rgba(122, 63, 196, 0.12);
  border-radius: var(--radius-pill); padding: 3px 10px 3px 6px;
}
.sitting-price-note { font-size: 0.82rem; color: var(--color-text-soft); font-style: italic; margin: 0 0 var(--space-3); }

/* Dogs-only hint for walk-related cards/panels */
.walks-dogs-only {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--color-text-soft); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 3px 10px 3px 6px;
  margin-top: 6px;
}
.walks-dogs-only img { width: 14px; height: 14px; display: block; }

/* ---- Section order + "Book now" jump buttons ----
   The booking calendar is the most important action, so it sits right
   after the service cards on every screen size. <main> becomes a flex
   column and each section gets an explicit order; the booking section
   keeps its markup and iframe intact, only its position changes.
   Flow: hero → what's included → choose option → BOOKING → how it works
   → area → sitting → about → gallery → trust → faq → updates → cancel */
main#top { display: flex; flex-direction: column; }
/* nth-of-type counts every <section>; the hero is section 1. */
main#top > .hero                    { order: 0; }  /* hero */
main#top > section:nth-of-type(2)   { order: 1; }  /* what's included */
main#top > #services                { order: 2; }  /* choose your option */
main#top > #booking                 { order: 3; }  /* calendar — moved up */
main#top > section:nth-of-type(4)   { order: 4; }  /* how it works */
main#top > section:nth-of-type(5)   { order: 5; }  /* service area */
main#top > section:nth-of-type(6)   { order: 6; }  /* sitting spotlight */
main#top > section:nth-of-type(7)   { order: 7; }  /* about */
main#top > #gallery                 { order: 8; }  /* gallery */
main#top > section:nth-of-type(9)   { order: 9; }  /* trust */
main#top > section:nth-of-type(10)  { order: 10; } /* faq */
main#top > section:nth-of-type(11)  { order: 11; } /* photo updates */
main#top > section:nth-of-type(13)  { order: 12; } /* cancel + privacy */

/* "Book now" jump buttons that lead to the calendar, shown on all sizes. */
.book-jump {
  display: flex;
  width: fit-content;
  margin: var(--space-4) auto 0;
}
@media (max-width: 720px) {
  .book-jump { width: 100%; max-width: 360px; margin-top: var(--space-3); }
}

.steps { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-3); align-items: stretch; }
/* Wide desktop: all five on one line, slightly compressed */
@media (min-width: 1080px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
  .steps .step-card { padding: var(--space-2); gap: 10px; flex-direction: column; }
  .steps .step-num { width: 38px; height: 38px; min-width: 38px; font-size: 1.15rem; }
}
/* Medium: 3 on top, 2 underneath (centered) */
@media (min-width: 700px) and (max-width: 1079px) {
  .steps { grid-template-columns: repeat(6, 1fr); }
  .steps .step-card { grid-column: span 2; }
  .steps .step-card:nth-child(4) { grid-column: 2 / span 2; }
  .steps .step-card:nth-child(5) { grid-column: 4 / span 2; }
}
/* Small tablet: 2 columns */
@media (min-width: 480px) and (max-width: 699px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: single column */
@media (max-width: 479px) {
  .steps { grid-template-columns: 1fr; }
}
.step-card {
  display: flex; gap: var(--space-2); align-items: flex-start;
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-3); box-shadow: var(--shadow-soft);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  cursor: default;
}
.step-card:nth-child(odd):hover { transform: translateY(-6px) rotate(-0.8deg); box-shadow: var(--shadow-lift); }
.step-card:nth-child(even):hover { transform: translateY(-6px) rotate(0.8deg); box-shadow: var(--shadow-lift); }
.step-num {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: #fff; background: var(--color-teal);
  border-radius: 50%; width: 44px; height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft);
}

@media (prefers-reduced-motion: reduce) {
  .step-card { transition: none; }
  .step-card:hover { transform: none; }
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: center; }
.two-col.reverse { direction: rtl; }
.two-col.reverse > * { direction: ltr; }
/* Sitting section: show the square illustration in full (no crop), and
   let the text column sit alongside it, top-aligned and compact. */
.two-col-sitting { align-items: start; }
.two-col-sitting .sitting-art { position: sticky; top: var(--space-4); }
.two-col-sitting .sitting-art img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 720px) { .two-col, .two-col.reverse { grid-template-columns: 1fr; direction: ltr; } .two-col-sitting .sitting-art { position: static; } }

.area-map-wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.area-map { width: 100%; max-width: 400px; height: auto; margin: 0 auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transition: transform 0.35s ease, box-shadow 0.35s ease; }
.area-map-wrap:hover .area-map { transform: translateY(-6px) scale(1.015); box-shadow: var(--shadow-lift); }

/* SVG sub-elements animate from their own center */
.area-map .area-ring, .area-map .area-fill-inner, .area-map .area-fill-outer,
.area-map .area-ripple, .area-map .area-pin, .area-map .area-map-grid {
  transform-origin: 200px 200px;
  transform-box: view-box;
}
.area-pin { transform-origin: 200px 200px; transform-box: view-box; }

/* dashed rings slowly rotate on hover for a living feel */
.area-ring--outer { transition: transform 0.6s ease; }
.area-ring--inner { transition: transform 0.6s ease; }
.area-map-wrap:hover .area-ring--outer { animation: area-spin 26s linear infinite; }
.area-map-wrap:hover .area-ring--inner { animation: area-spin-rev 20s linear infinite; }

/* fills gently breathe */
.area-fill-inner, .area-fill-outer { transition: transform 0.5s ease; }
.area-map-wrap:hover .area-fill-inner { animation: area-breathe 3.2s ease-in-out infinite; }
.area-map-wrap:hover .area-fill-outer { animation: area-breathe 3.8s ease-in-out infinite; }

/* ripple rings expand outward like sonar, only on hover */
.area-ripple { opacity: 0; }
.area-map-wrap:hover .area-ripple { animation: area-ripple 2.6s ease-out infinite; }
.area-map-wrap:hover .area-ripple--2 { animation-delay: 1.3s; }

/* The center location pin stays fixed and always visible — only the
   surrounding effects (ripples, breathing fills, spinning rings) animate. */

/* On touch screens there's no hover, so the map would sit static. Run the
   same living effects automatically at mobile widths: sonar ripples and
   gently breathing fills. The pin itself stays put. */
@media (max-width: 720px) {
  .area-ripple { animation: area-ripple 3.4s ease-out infinite; }
  .area-ripple--2 { animation: area-ripple 3.4s ease-out infinite; animation-delay: 1.7s; }
  .area-fill-inner { animation: area-breathe 4.2s ease-in-out infinite; }
  .area-fill-outer { animation: area-breathe 4.8s ease-in-out infinite; }
}

@keyframes area-spin { to { transform: rotate(360deg); } }
@keyframes area-spin-rev { to { transform: rotate(-360deg); } }
@keyframes area-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes area-ripple {
  0% { transform: scale(0.6); opacity: 0; }
  30% { opacity: 0.5; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes area-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .area-map, .area-ring--outer, .area-ring--inner,
  .area-fill-inner, .area-fill-outer, .area-ripple, .area-pin {
    animation: none !important;
    transition: none !important;
  }
  .area-map-wrap:hover .area-map { transform: none; }
}
.area-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; }
.area-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.area-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }
.area-dot--teal { background: var(--color-teal); }
.area-dot--purple { background: var(--color-purple); }
.area-dot--magenta { background: var(--color-magenta); }
.area-map-link { display: inline-flex; align-items: center; gap: 6px; align-self: center; font-size: 0.85rem; font-weight: 600; color: var(--color-teal-dark); text-decoration: none; }
.area-map-link:hover { text-decoration: underline; }
.area-map-link svg { color: var(--color-magenta); }

.sitting-art img, .about-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }

.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
/* Wide desktop: all four trust cards on one line, compressed */
@media (min-width: 1080px) {
  .trust-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
  .trust-item { padding: var(--space-2); }
  .trust-item .feature-icon { width: 46px; height: 46px; }
  .trust-item p { font-size: 0.9rem; line-height: 1.4; }
}
/* Medium: clean 2x2 */
@media (min-width: 700px) and (max-width: 1079px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Small tablet: 2 columns */
@media (min-width: 480px) and (max-width: 699px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: single column */
@media (max-width: 479px) {
  .trust-grid { grid-template-columns: 1fr; }
}
.trust-item { background: var(--color-bg-card); border-radius: var(--radius-md); padding: var(--space-3); text-align: center; box-shadow: var(--shadow-soft); }
.trust-item .feature-icon { margin-left: auto; margin-right: auto; }

.trust-item p { color: var(--color-text); margin: 0; }

.faq-list { margin-top: var(--space-3); }
.faq-item { background: var(--color-bg-card); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); box-shadow: var(--shadow-soft); }
.faq-item summary { cursor: pointer; font-weight: 700; color: var(--color-magenta-dark); font-family: var(--font-display); }
.faq-item p { margin-top: var(--space-2); margin-bottom: 0; }

.booking-help { max-width: 620px; }
.booking-tabs, .booking-subtabs {
  display: flex; gap: var(--space-1); margin: var(--space-3) 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 2px;
}
.booking-tabs::-webkit-scrollbar, .booking-subtabs::-webkit-scrollbar { display: none; }
.booking-subtabs { margin-top: 0; margin-bottom: var(--space-3); }
.booking-tab, .booking-subtab {
  flex: 0 0 auto; white-space: nowrap;
  font-family: var(--font-body); font-weight: 700; padding: 10px 22px;
  border-radius: var(--radius-pill); border: 2px solid var(--color-border);
  background: transparent; cursor: pointer; color: var(--color-text-soft);
}
.booking-tab.is-active { background: var(--color-teal); color: #fff; border-color: var(--color-teal); }
.booking-subtab.is-active { background: var(--color-magenta); color: #fff; border-color: var(--color-magenta); }
.booking-panel, .booking-subpanel { display: none; }
.booking-panel.is-active, .booking-subpanel.is-active { display: block; }

.cal-frame-wrap { width: 100%; min-height: 640px; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-card); box-shadow: var(--shadow-soft); }
.ypl-cal-frame { display: block; width: 100%; height: 640px; border: 0; background: var(--color-bg-card); }
.cal-direct-link { margin: var(--space-2) 0 0; text-align: center; font-size: 0.9rem; color: var(--color-text-soft); }
.cal-direct-link a { color: var(--color-teal-dark); font-weight: 700; }
@media (max-width: 720px) {
  .cal-frame-wrap { min-height: 560px; }
  .ypl-cal-frame { height: 560px; }
}

.extra-walks { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 2px dashed var(--color-border); }

.whatsapp-fab {
  position: fixed; bottom: 20px; right: 20px; z-index: 30;
  background: var(--color-whatsapp-dark); color: #fff; text-decoration: none;
  padding: 12px 20px; border-radius: var(--radius-pill);
  display: flex; align-items: center; gap: 8px; font-weight: 700; box-shadow: var(--shadow-lift);
  transition: opacity 0.25s ease, transform 0.25s ease;
  animation: whatsappPulse 6s ease-out infinite;
}
.whatsapp-fab:hover { background: var(--color-whatsapp); }
.whatsapp-fab--hidden { opacity: 0; transform: scale(0.7); pointer-events: none; }

@keyframes whatsappPulse {
  0% { box-shadow: var(--shadow-lift), 0 0 0 0 rgba(37, 211, 102, 0.55); }
  10% { box-shadow: var(--shadow-lift), 0 0 0 12px rgba(37, 211, 102, 0); }
  100% { box-shadow: var(--shadow-lift), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Soft attention pulse for the hero's primary "Reservar ahora" button,
   mirroring the WhatsApp button's pulse in the brand mustard. Applied only
   on mobile (below), where guiding the eye to booking matters most. */
@keyframes bookPulse {
  0% { box-shadow: var(--shadow-soft), 0 0 0 0 rgba(245, 179, 45, 0.5); }
  12% { box-shadow: var(--shadow-soft), 0 0 0 12px rgba(245, 179, 45, 0); }
  100% { box-shadow: var(--shadow-soft), 0 0 0 0 rgba(245, 179, 45, 0); }
}

.whatsapp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-bg-card); color: var(--color-text);
  border: 2px dashed var(--color-teal);
  border-radius: var(--radius-pill);
  padding: 7px 16px 7px 7px;
  font-weight: 800; text-decoration: none;
}
.whatsapp-pill-icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-whatsapp); color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab { animation: none; }
}

.site-footer { background: var(--color-magenta-dark); color: #fff; padding: var(--space-5) 0 var(--space-4); }
.footer-inner { text-align: center; }
.site-footer p { color: rgba(255,255,255,0.8); }
.footer-links { display: flex; gap: var(--space-3); align-items: center; justify-content: center; margin: var(--space-2) 0; flex-wrap: wrap; }
.footer-links a:not(.whatsapp-pill) { color: #fff; text-decoration: underline; }
.footer-fine { font-size: 0.8rem; opacity: 0.75; }

/* ---------- Photo gallery marquee ---------- */
.gallery-section { overflow: hidden; }
.gallery-hint { text-align: center; font-size: 0.85rem; margin-top: var(--space-2); margin-bottom: 0; }

.gallery-row {
  overflow: hidden;
  margin: var(--space-2) 0;
}
.gallery-track {
  display: flex;
  gap: var(--space-2);
  width: max-content;
  animation: marqueeLeft 55s linear infinite;
}
.gallery-track-2 { animation-name: marqueeRight; animation-duration: 65s; }
.gallery-row:hover .gallery-track,
.gallery-row.is-paused .gallery-track {
  animation-play-state: paused;
}
.gallery-track img {
  height: 140px;
  width: 140px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.gallery-track img:hover { transform: scale(1.04); }

@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marqueeRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 640px) {
  .gallery-track img { height: 96px; width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track { animation: none; }
  .gallery-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gallery-track img:nth-child(n+12) { display: none; } /* drop the duplicated set */
}

/* ---------- Lightbox ---------- */
.lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  background: rgba(42, 35, 28, 0.88);
  align-items: center; justify-content: center;
  padding: var(--space-3);
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 100%; max-height: 85vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}
.lightbox-close {
  position: absolute; top: 16px; right: 20px;
  background: var(--color-bg-card); color: var(--color-text);
  border: none; border-radius: 50%;
  width: 40px; height: 40px; font-size: 1.4rem; line-height: 1;
  cursor: pointer;
}

@media (max-width: 640px) {
  .whatsapp-fab span:last-child { display: none; }
  .whatsapp-fab { padding: 14px; border-radius: 50%; }
}

/* ===========================================================
   MOBILE REFINEMENTS  (≤ 720px)
   One consolidated block, appended last so it has final say.
   Goals: even vertical rhythm, calendar higher up, compact
   trust cards, larger gallery, sparse decorative hearts.
   Desktop (≥ 721px) is completely untouched by everything here.
=========================================================== */
@media (max-width: 720px) {

  /* ---- 1. Even, intentional vertical spacing ----
     The root cause of the big empty gaps: every .section used
     96px top+bottom padding (--space-6) and .section-tight 64px.
     Stacked on a phone that reads as dead space. One calm rhythm: */
  .section { padding: 40px 0; }
  .section-tight { padding: 32px 0; }

  /* Trim oversized inner margins that compounded the gaps */
  .how-banner { margin-bottom: var(--space-3); }
  .cards-grid,
  .trust-grid,
  .feature-row { margin-top: var(--space-3); }
  .steps { margin-top: var(--space-3); }
  h2 { margin-bottom: var(--space-2); }

  /* ---- 4. Mobile hero: portrait illustration with the hero text sitting
     on the open sky at the TOP of the image, and the buttons in a calm
     cream area BELOW the illustration.

     Layout: the hero is a 2-row grid. Row 1 holds the illustration and the
     text stacked in the SAME cell, so the heading rests directly on the
     image's sky. Row 2 holds the buttons, which therefore fall naturally
     below the image with no overlap and no magic numbers. */
  .hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: 0 0 var(--space-3);
    min-height: 0;
    overflow: visible;
    background: var(--color-bg);
  }
  /* Illustration: row 1, full width, natural portrait ratio, nothing cropped */
  .hero-art {
    grid-row: 1; grid-column: 1;
    align-self: start;
    margin: 0; padding: 0;
    position: relative; z-index: 0;
  }
  .hero-art picture { display: block; }
  .hero-art img {
    width: 100%; height: auto; display: block;
    border-radius: 0; box-shadow: none;
  }
  .hero::after { display: none; }

  /* hero-inner spans the whole grid; hero-copy places its two children into
     the grid rows: text into row 1 (over the image), actions into row 2. */
  .hero-inner {
    grid-row: 1 / 3; grid-column: 1;
    display: grid;
    grid-template-rows: subgrid;
    position: relative; z-index: 2;
    width: 100%;
    padding: 0;
  }
  .hero-copy {
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: subgrid;
    max-width: 100%;
  }
  /* Text sits in row 1, top-aligned, on the sky, with side padding */
  .hero-text {
    grid-row: 1;
    align-self: start;
    padding: var(--space-4) var(--space-3) 0;
  }
  /* Actions sit in row 2 — below the illustration — on cream */
  .hero-actions {
    grid-row: 2;
    padding: var(--space-3) var(--space-3) 0;
  }

  .hero h1 {
    font-size: clamp(1.75rem, 7.6vw, 2.35rem);
    line-height: 1.12;
    margin-bottom: var(--space-2);
  }
  .hero .eyebrow { margin-bottom: var(--space-1); }
  /* Mobile shows the two-pill split instead of the single combined pill,
     to fill the space under the heading more intentionally. */
  .hero .ribbon--full { display: none; }

  /* Two pills on ONE line (side by side) on the hero sky. */
  .ribbon-split {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-2);
  }

  /* "Ver opciones" moves onto the image, under the pills, as a filled teal
     button. The original copy in the button row below is hidden on mobile. */
  .hero-text .hero-see-mobile {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: var(--space-2);
    padding: 8px 18px;
    font-size: 0.9rem;
  }
  .hero-actions .hero-see-link { display: none; }
  .hero .ribbon {
    background: rgba(238, 43, 114, 0.12);
    color: var(--color-magenta-dark);
    box-shadow: none;
    font-size: 0.82rem;
    padding: 6px 14px;
    margin-bottom: var(--space-2);
  }
  /* the split pills sit in their own flex row */
  .ribbon-split .ribbon { margin-bottom: 0; }
  .hero-sub { font-size: 0.98rem; margin-bottom: 0; max-width: 20rem; }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: var(--space-2);
  }
  .hero-ctas .btn-primary { width: 100%; animation: bookPulse 5s ease-out infinite; }
  /* Quién soy: simple secondary text link on mobile — teal text, underline,
     no fill or button appearance. */
  .hero-ctas .hero-bio-link {
    width: 100%;
    background: transparent;
    border-color: transparent;
    color: var(--color-teal-dark);
    text-decoration: underline;
    padding: 8px;
    font-size: 1.08rem;
  }
  .hero-ctas .hero-bio-link:hover {
    background: transparent;
    border-color: transparent;
    color: var(--color-teal-dark);
  }
  .hero-ctas .whatsapp-inline { display: none; }
  .hero-note { margin: 0; }

  /* ---- 5. Compact Trust & Safety cards ----
     Screenshots showed each card very tall with lots of air.
     Two-up grid, tighter padding, smaller icons. */
  .trust-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .trust-item {
    padding: var(--space-2);
    border-radius: var(--radius-md);
  }
  .trust-item .feature-icon {
    width: 42px; height: 42px;
    margin-bottom: 6px;
  }
  .trust-item .feature-icon svg { width: 22px; height: 22px; }
  .trust-item p { font-size: 0.82rem; line-height: 1.35; }

  /* The single-column fallback at ≤479px in the base sheet would
     undo the 2-up layout; keep two columns down to the narrowest
     phones, dropping to one only on very tiny widths. */

  /* ---- Feature row (What's included) a touch tighter ---- */
  .feature-icon { width: 50px; height: 50px; }

}

/* Keep Trust cards two-up on small phones too (override base ≤479 rule) */
@media (min-width: 360px) and (max-width: 479px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
}
/* Very narrow: single column is genuinely more readable */
@media (max-width: 359px) {
  .trust-grid { grid-template-columns: 1fr; }
}

/* ---- 6. Larger Happy Memories gallery on mobile ----
   Base sheet drops thumbs to 96px at ≤640px; raise so faces
   read clearly without making the marquee bulky. */
@media (max-width: 720px) {
  .gallery-track img { height: 148px; width: 148px; }
}
@media (max-width: 400px) {
  .gallery-track img { height: 128px; width: 128px; }
}

/* ---- 7. Decorative hearts on mobile ----
   The new stacked hero is intentionally calm: the illustration already
   has hearts painted in, so the floating overlay hearts are hidden there
   to avoid clutter over the text block. A few ambient hearts remain in
   the "How it works" section only. */
@media (max-width: 720px) {
  /* Hero: no overlay floaties — keep the text block clean */
  .hero .floaties { display: none; }

  /* Ambient hearts behind the "How it works" floaty section:
     keep just three, spaced to the margins. */
  .section-floaty .floaty-4,
  .section-floaty .floaty-5,
  .section-floaty .floaty-6 { display: none; }
}

/* On the narrowest phones, shrink the two hero pills slightly so they still
   fit side by side on one line rather than wrapping. */
@media (max-width: 360px) {
  .hero .ribbon-split .ribbon { font-size: 0.72rem; padding: 5px 10px; }
  .ribbon-split { gap: 5px; }
}