/* Can Resort — estilos de producción. Todo valor de diseño viene de tokens.css, ver CONVENTIONS.md */

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  line-height: var(--p-line-height);
  letter-spacing: var(--p-letter-spacing);
  color: var(--color-texto);
  background: var(--color-superficie);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0 0 16px; color: var(--color-texto); }
h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-line-height); letter-spacing: var(--h1-letter-spacing); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-line-height); letter-spacing: var(--h2-letter-spacing); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-line-height); letter-spacing: var(--h3-letter-spacing); }
h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-line-height); letter-spacing: var(--h4-letter-spacing); }
p { margin: 0 0 16px; }

.container {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--side-gutter);
}

.section { padding-block: var(--space-section-gap); }
.section--fondo { background: var(--color-fondo); }

/* Cabecera de sección: [etiqueta] + título + [frase]. En desktop, centrada y apilada */
.section-head { margin-bottom: 32px; }
.section-head > :last-child { margin-bottom: 0; }
.section-head p:not(.pill-label) { color: var(--color-texto-muted); }
/* título grande que no es encabezado (cuando la etiqueta hace de H2): mismo aspecto que un H2 */
.section-head p.section-head__title {
  margin: 0 0 16px; font-family: var(--font-heading); font-size: var(--h2-size); font-weight: var(--h2-weight);
  line-height: var(--h2-line-height); letter-spacing: var(--h2-letter-spacing); color: var(--color-texto);
}
@media (min-width: 900px) {
  .section-head {
    display: flex; flex-direction: column; align-items: center;
    max-width: 760px; margin-inline: auto; margin-bottom: 40px; text-align: center;
  }
  .section-head + .faq-list { margin-inline: auto; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -48px;
  background: var(--color-texto); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-sm);
  z-index: 1000; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 16px;
  border: none;
  transition: background-color .15s ease, transform .1s ease;
}
.btn:active { transform: scale(0.98); }

.btn--whatsapp {
  background: var(--color-boton-whatsapp);
  color: #fff;
  box-shadow: var(--shadow-cta-whatsapp);
}
.btn--whatsapp:hover, .btn--whatsapp:focus-visible { background: var(--color-boton-whatsapp-hover); }

.btn--secondary {
  background: var(--color-cta-secundario);
  color: #fff;
}
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--color-cta-secundario-hover); }

.btn--outline {
  background: transparent;
  color: var(--color-texto);
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radius-sm);
}
.btn--outline:hover, .btn--outline:focus-visible { border-color: var(--color-texto); }

.btn-icon { font-size: 18px; line-height: 1; flex: none; }

/* ---------- Header ---------- */
.site-header {
  background: var(--color-header);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 0 var(--color-borde);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 8px;
  gap: 10px;
}
.logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 700; font-size: 18px;
  color: var(--color-texto);
  white-space: nowrap;
}
.logo__icon { width: 26px; height: 26px; color: var(--color-boton-whatsapp); flex: none; }
.logo__img { width: 72px; height: 72px; }
.logo--footer .logo__img { width: 88px; height: 88px; }


@media (min-width: 480px) {
  .logo { font-size: 22px; gap: 10px; }
  .logo__icon { width: 32px; height: 32px; }
  .logo__img { width: 88px; height: 88px; }
}

.main-nav { display: none; }
.main-nav__list { display: flex; align-items: center; gap: 28px; }
.main-nav__list > li { position: relative; }
.main-nav a { font-weight: 600; font-size: 16px; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--color-cta-secundario); }


.header-actions { display: flex; align-items: center; gap: 16px; }

.nav-toggle {
  display: inline-flex; background: none; border: none; padding: 8px;
}
.nav-toggle i { font-size: 24px; }

.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--color-header);
  border-top: 1px solid var(--color-borde);
  padding: 16px var(--side-gutter) 24px;
}
.mobile-nav.is-open { display: flex; }
/* Botón de llamada del menú móvil: naranja (el verde es solo de WhatsApp) */
.mobile-nav .mobile-nav__call {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px;
  padding: 14px 20px; border: none; border-radius: var(--radius-pill);
  background: var(--color-cta-secundario); color: var(--color-texto); font-weight: 700;
}
.mobile-nav .mobile-nav__call:hover, .mobile-nav .mobile-nav__call:focus-visible { background: var(--color-cta-secundario-hover); }
.mobile-nav a { padding: 12px 0; font-weight: 600; border-bottom: 1px solid var(--color-borde); display: block; width: 100%; text-align: left; background: none; border-left: none; border-right: none; border-top: none; }

@media (min-width: 960px) {
  .main-nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

@media (max-width: 479px) {
  .header-actions .btn--whatsapp { padding: 10px 16px; font-size: 14px; gap: 6px; }
  .header-actions .btn-icon { font-size: 16px; }
  .nav-toggle { padding: 6px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 560px; display: flex; align-items: center; color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; background: var(--color-texto); }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.55), rgba(20,20,20,.35) 40%, rgba(20,20,20,.65)); z-index: 1; }
.hero__content { position: relative; z-index: 2; width: 100%; max-width: none; padding-block: 64px 40px; }
.hero__content > * { max-width: 640px; } /* bloque pegado a la izquierda del container */
.hero__content h1 { color: #fff; }
/* H1 con la palabra clave ("Residencia canina Málaga") como antetítulo; el titular grande es texto, no encabezado */
.hero__content .hero__kicker {
  display: table; margin-bottom: 14px; padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--color-superficie); color: var(--color-texto);
  font-family: var(--font-body); font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.hero__content .hero__title {
  margin: 0 0 16px; color: #fff;
  font-family: var(--font-heading); font-size: clamp(40px, 6vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
}
.hero__title span { display: block; } /* una frase por línea */
.hero__content p { color: #fff; font-size: 18px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
/* Sobre el vídeo, el botón de contorno necesita un relleno claro translúcido para leerse */
.hero__actions .btn--ghost-light {
  background: rgba(255, 255, 255, .22); border-color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero__actions .btn--ghost-light:hover, .hero__actions .btn--ghost-light:focus-visible { background: #fff; color: var(--color-texto); }
.hero__proof { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 24px; }
.hero__google { display: block; background: #fff; border-radius: var(--radius-sm); padding: 6px 10px; transition: transform .15s ease; }
.hero__google:hover, .hero__google:focus-visible { transform: translateY(-2px); }
.hero__google img { width: 120px; height: auto; }
.hero__guests { display: flex; align-items: center; gap: 12px; }
.hero__avatars { display: flex; }
.hero__avatars li + li { margin-left: -12px; }
.hero__avatars img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.hero__content .hero__guests p { margin: 0; font-size: 15px; font-weight: 600; }

/* ---------- Lo que nos hace diferentes: banda en movimiento continuo ---------- */
.usp-marquee { overflow: hidden; background: var(--color-superficie); color: var(--color-texto); padding-block: 16px; border-bottom: 1px solid var(--color-borde); }
.usp-marquee__track { display: flex; width: max-content; animation: usp-scroll 45s linear infinite; }
.usp-marquee:hover .usp-marquee__track { animation-play-state: paused; }
.usp-marquee__list { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.usp-marquee__list li { display: flex; align-items: center; gap: 10px; padding-inline: 14px; white-space: nowrap; font-size: 16px; font-weight: 400; }
.usp-marquee__item { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; } /* H3 con el mismo aspecto que el texto de la banda */
.usp-marquee__list li::after { content: ""; width: 1px; height: 22px; margin-left: 18px; background: var(--color-borde); }
.usp-marquee__list i {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-fondo); color: var(--color-cta-secundario); font-size: 15px;
}
@media (min-width: 900px) { .usp-marquee { padding-block: 20px; } .usp-marquee__list li { font-size: 17px; } }
@keyframes usp-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .usp-marquee__track { animation: none; width: auto; }
  .usp-marquee__list { flex-wrap: wrap; justify-content: center; row-gap: 10px; width: 100%; }
  .usp-marquee__list[aria-hidden="true"] { display: none; }
}

/* ---------- ¿Por qué Can Resort?: título centrado, línea fina y párrafo centrado ---------- */
.intro__inner { max-width: 1000px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.intro__inner h2 { margin: 0; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.15; }
.intro__divider { width: 100%; margin: 32px 0; border: 0; border-top: 1px solid rgba(36, 36, 36, .14); }
.intro__inner p { margin: 0; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.75; color: var(--color-texto-muted); }
.intro__inner strong { font-weight: 600; color: var(--color-texto); }

/* Imagen con sombra y zoom al pasar el ratón (pestañas de servicios) */
.media-zoom {
  margin: 0; border-radius: var(--radius-image); overflow: hidden;
  box-shadow: 0 18px 40px rgba(36, 36, 36, 0.22);
}
.media-zoom img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
@media (min-width: 900px) { .media-zoom img { aspect-ratio: 4 / 5; max-height: 480px; } }
.media-zoom:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .media-zoom img { transition: none; } .media-zoom:hover img { transform: none; } }


/* ---------- Servicios para perros (pestañas) ---------- */
#servicios-perros, #testimonios { scroll-margin-top: 80px; } /* que el header fijo no tape el título al llegar desde el hero */
.service-tabs {
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: 16px; padding: 20px; margin: 32px 0 24px;
}
.service-tabs__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.service-tabs__label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-texto-muted); }
.service-tabs__list { display: inline-flex; gap: 4px; padding: 5px; background: #F3F1EE; border-radius: var(--radius-pill); }
.service-tabs__tab {
  border: none; background: transparent; color: var(--color-texto);
  padding: 10px 20px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 600; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.service-tabs__tab:hover { background: rgba(244, 141, 48, 0.12); }
.service-tabs__tab[aria-selected="true"] { background: var(--color-cta-secundario); color: #fff; box-shadow: 0 4px 12px rgba(244, 141, 48, 0.35); }
.service-tabs__tab:focus-visible { outline: 2px solid var(--color-texto); outline-offset: 2px; }
.service-tabs__panel { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
.service-tabs__panel[hidden] { display: none; }
.service-tabs__panel .faq-list { max-width: none; }
.service-tabs__panel .media-zoom img { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .service-tabs { max-width: calc(100% - 420px - 48px); } /* solo el ancho de la columna de FAQs */
  .service-tabs__panel { grid-template-columns: 1fr minmax(0, 420px); gap: 48px; }
  .service-tabs__panel .media-zoom img { aspect-ratio: 1; }
}
.faq-item__q { margin: 0; font-size: inherit; line-height: 1.3; letter-spacing: 0; }

/* ---------- Recogida y entrega: cifras + furgoneta sobre ruta "Tu casa → Can Resort" ---------- */
.pickup__grid, .visit__grid { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .pickup__grid, .visit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
.pickup__content, .visit__content { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.pickup__content header p:last-child, .visit__content header p:not(.pill-label) { margin: 0 0 12px; font-size: 18px; color: var(--color-texto-muted); }
.pickup__content header p:last-child { margin: 0; }
.pickup__content strong, .visit__content header strong { color: var(--color-texto); }

.pickup__facts { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pickup__facts li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; background: var(--color-superficie); }
.pickup__fact { margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--color-texto-muted); } /* H3 con aspecto de texto de apoyo */
.pickup__facts strong { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); line-height: 1.1; letter-spacing: -0.02em; }
.pickup__facts span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.45; color: var(--color-texto-muted); }

/* Calculadora del transporte (en ventana emergente): 30 € por trayecto hasta 30 km, +1 €/km a partir de ahí */
/* Mismo tamaño y peso que el botón de WhatsApp; con texto blanco a 16px el naranja tiene que ser
   más tostado (#B85C0D) para llegar al contraste AA (4,6:1) */
.btn--calc { background: #B85C0D; color: #fff; box-shadow: 0 8px 20px rgba(244, 141, 48, .3); }
.btn--calc:hover, .btn--calc:focus-visible { background: #9E4F0B; }
.pickup-dialog {
  width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box;
  padding: 0; border: 0; border-radius: 22px; background: var(--color-superficie); color: var(--color-texto);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.pickup-dialog::backdrop { background: rgba(20, 20, 20, .55); }
.pickup-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 0; }
.pickup-dialog__title { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 20px; font-weight: 700; }
.pickup-dialog__title i { color: var(--color-cta-secundario); }
.pickup-dialog__close { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: #F3F1EE; color: var(--color-texto); font-size: 18px; }
.pickup-dialog__close:hover, .pickup-dialog__close:focus-visible { background: var(--color-texto); color: #fff; }
.pickup-calc { display: grid; gap: 16px; padding: 18px 22px 22px; }
.pickup-calc__cta { justify-content: center; }
.pickup-calc__address { position: relative; display: grid; gap: 6px; }
.pickup-calc__address input, .pickup-calc__field input {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 14px;
  border: 2px solid rgba(36, 36, 36, .14); border-radius: 12px; background: #fff;
  font: inherit; font-size: 16px; font-weight: 500; color: var(--color-texto);
}
.pickup-calc__address input:focus-visible { outline: none; border-color: var(--color-texto); }
.pickup-calc__suggest {
  position: absolute; z-index: 2; top: 78px; left: 0; right: 0; margin: 0; padding: 6px;
  list-style: none; background: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgba(36, 36, 36, .18);
}
.pickup-calc__suggest[hidden] { display: none; }
.pickup-calc__suggest li { padding: 10px 12px; border-radius: 8px; font-size: 15px; line-height: 1.35; cursor: pointer; }
.pickup-calc__suggest li:hover, .pickup-calc__suggest li[aria-selected="true"] { background: var(--color-fondo); }
.pickup-calc__status { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--color-texto-muted); }
.pickup-calc__field--km { max-width: 260px; }
.pickup-calc__map { margin: 0; display: grid; gap: 8px; }
.pickup-calc__map[hidden] { display: none; }
.pickup-calc__map iframe { width: 100%; height: 220px; border: 0; border-radius: 14px; background: #F3F1EE; }
.pickup-calc__maplink { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--color-texto); text-decoration: underline; text-underline-offset: 3px; }
.pickup-calc__maplink i { color: var(--color-cta-secundario); }
.pickup-calc__field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.pickup-calc__field select, .pickup-calc__field input {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 14px;
  border: 2px solid rgba(36, 36, 36, .14); border-radius: 12px; background: #fff;
  font: inherit; font-size: 16px; font-weight: 500; color: var(--color-texto);
}
.pickup-calc__field select:focus-visible, .pickup-calc__field input:focus-visible { outline: none; border-color: var(--color-texto); }
.pickup-calc__trips { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pickup-calc__trips legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.pickup-calc__trips label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; cursor: pointer;
  border: 2px solid rgba(36, 36, 36, .12); border-radius: var(--radius-pill); font-size: 15px;
}
.pickup-calc__trips label:has(input:checked) { border-color: var(--color-texto); background: var(--color-fondo); }
.pickup-calc__trips input { accent-color: var(--color-texto); }
.pickup-calc__dogs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pickup-calc__dogs-label { font-size: 14px; font-weight: 600; }
.pickup-calc__dogs .calc-stepper { gap: 4px; padding: 4px; }
.pickup-calc__dogs .calc-stepper__btn { width: 34px; height: 34px; font-size: 13px; }
.pickup-calc__dogs .calc-stepper input { width: 40px; font-size: 17px; }
.pickup-calc__result {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px;
  padding: 14px 18px; border-radius: 14px; background: var(--color-texto); color: #fff; font-size: 15px;
}
.pickup-calc .pickup-calc__result strong { font-family: var(--font-heading); font-size: 26px; margin-left: 6px; color: #fff; }
.pickup-calc .pickup-calc__result span:last-child strong { color: var(--color-fondo); }
.pickup-calc__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-texto-muted); }

.pickup__visual { position: relative; width: 100%; max-width: 560px; aspect-ratio: 560 / 500; margin-inline: auto; }
.pickup__route { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(36, 36, 36, .3); }
.pickup__car { position: absolute; left: 5%; top: 24%; width: 92%; height: auto; filter: drop-shadow(0 26px 30px rgba(36, 36, 36, .28)); }
.pickup__stop {
  position: absolute; margin: 0; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px; border-radius: var(--radius-pill);
  background: var(--color-superficie); box-shadow: 0 10px 24px rgba(36, 36, 36, .12); line-height: 1.25;
}
.pickup__stop strong { display: block; font-size: 15px; }
.pickup__stop small { display: block; font-size: 13px; color: var(--color-texto-muted); }
.pickup__stop--home { top: 4%; left: 0; }
.pickup__stop--resort { bottom: 2%; right: 0; background: var(--color-texto); color: #fff; }
/* Móvil: la etiqueta "Can Resort" más abajo para que no quede encima de la furgoneta */
@media (max-width: 599px) {
  .pickup__visual { margin-bottom: 56px; }
  .pickup__stop--resort { bottom: -48px; }
}
.pickup__stop--resort small { color: #D9D6D0; }
.pickup__stop--resort:hover, .pickup__stop--resort:focus-visible { background: #000; }
.pickup__stop-icon { width: 38px; height: 38px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--color-fondo); font-size: 16px; color: var(--color-texto); }
.pickup__stop--resort .pickup__stop-icon { background: var(--color-cta-secundario); }

/* ---------- Servicios ---------- */
.services-grid { display: grid; gap: var(--space-widget-gap); grid-template-columns: 1fr; }
@media (min-width: 700px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
.service-card {
  background: var(--color-superficie); border-radius: var(--radius-image);
  box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column;
}
.service-card__media { aspect-ratio: 16/10; background: var(--color-fondo); display: flex; align-items: center; justify-content: center; }
.service-card__media i { font-size: 56px; color: var(--color-cta-secundario); }
.service-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.service-card__body .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Cómo trabajamos: pasos + conversación de WhatsApp de ejemplo ---------- */
.booking-steps__grid { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .booking-steps__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 72px; } }
.booking-steps__content { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.booking-steps__content header p:last-child { margin: 0; font-size: 18px; color: var(--color-texto-muted); max-width: 520px; }
.booking-steps__content header strong { color: var(--color-texto); }
/* Etiqueta sobre el título de sección: crema sobre fondo blanco; --light (blanca) sobre fondos de color */
.pill-label {
  display: inline-block; margin: 0 0 14px; padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--color-fondo); color: var(--color-texto);
  font-family: var(--font-body); font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.pill-label.pill-label--light { background: var(--color-superficie); }
h2.pill-label { color: var(--color-texto); } /* etiqueta que hace de H2: mismo aspecto que la etiqueta normal */

.stepper { display: grid; margin: 0; padding: 0; list-style: none; }
.stepper li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding-bottom: 26px; }
.stepper li:last-child { padding-bottom: 0; }
.stepper li:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: var(--color-fondo); }
.stepper__num {
  width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-cta-secundario); color: var(--color-texto);
  font-family: var(--font-heading); font-weight: 800; font-size: 21px;
}
.stepper h3 { margin: 4px 0 6px; font-size: 22px; line-height: 1.2; }
.stepper p { margin: 0; color: var(--color-texto-muted); }

.booking-steps__visual { position: relative; display: flex; flex-direction: column; align-items: center; padding-block: 24px; }
.booking-steps__visual::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: min(420px, 100%); aspect-ratio: 1;
  border-radius: 50%; background: var(--color-fondo); transform: translate(-50%, -50%);
}

.chat-mock {
  position: relative; margin: 0; width: min(280px, 100%); box-sizing: border-box;
  padding: 10px; border-radius: 40px; background: var(--color-texto);
  box-shadow: 0 30px 60px rgba(36, 36, 36, .25);
}
.chat-mock__screen { display: flex; flex-direction: column; height: 460px; border-radius: 31px; overflow: hidden; background: #F3EDE4; }
.chat-mock [hidden] { display: none !important; }
.chat-mock__header { flex: none; display: flex; align-items: center; gap: 10px; padding: 28px 16px 12px; background: #fff; border-bottom: 1px solid var(--color-borde); }
.chat-mock__header strong { display: block; font-size: 14px; }
.chat-mock__header small { display: block; font-size: 11px; color: var(--color-texto-muted); }
.chat-mock__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; padding: 8px 7px 9px; box-sizing: border-box; background: var(--color-fondo); object-fit: contain; }
/* Los mensajes se apilan desde abajo: al aparecer uno nuevo, los anteriores suben y salen por arriba */
.chat-mock__body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 12px 18px; font-size: 13px; line-height: 1.4; }
.chat-mock__body > * { flex: none; }
.chat-mock.is-playing .bubble { animation: bubble-in .35s ease both; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.bubble--typing { display: flex; gap: 4px; padding: 12px 14px; }
.bubble--typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-texto-muted); animation: typing-dot 1s infinite ease-in-out; }
.bubble--typing span:nth-child(2) { animation-delay: .15s; }
.bubble--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-mock__day { align-self: center; padding: 3px 10px; border-radius: 8px; background: #fff; font-size: 11px; color: var(--color-texto-muted); }
.bubble { margin: 0; max-width: 80%; padding: 8px 12px; color: var(--color-texto); }
.bubble time { display: block; margin-top: 2px; text-align: right; font-size: 10px; color: var(--color-texto-muted); }
.bubble--out { align-self: flex-end; background: #DCF5E3; border-radius: 14px 14px 4px 14px; }
.bubble--in { align-self: flex-start; background: #fff; border-radius: 14px 14px 14px 4px; }
.bubble--card { align-self: flex-start; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--color-fondo); border-radius: 12px; font-weight: 600; }
.bubble__step {
  width: 24px; height: 24px; border-radius: 6px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-cta-secundario); color: var(--color-texto); font-weight: 800; font-size: 12px;
}
.bubble--photo { align-self: flex-start; width: 190px; padding: 0; overflow: hidden; background: #fff; border-radius: 14px; }
.bubble--photo img { width: 100%; height: 120px; object-fit: cover; object-position: center 12%; } /* encuadre en la cabeza del perro */
.bubble--photo p { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; font-weight: 600; }

/* ---------- Testimonios ---------- */
.rating-badge { display: inline-flex; margin-top: 4px; align-items: center; gap: 10px; background: var(--color-superficie); border-radius: var(--radius-pill); padding: 10px 18px; box-shadow: var(--shadow-card); font-weight: 700; }
.rating-badge i { font-size: 18px; color: #F5A623; }
/* Carrusel de reseñas: scroll-snap nativo, JS solo para los puntos y "Leer más" */
.reviews__track {
  position: relative; /* contiene a los .visually-hidden (absolute) de las tarjetas: si no, ensanchan la página */
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 8px 4px 20px; margin-inline: -4px;
  scroll-padding-inline: 4px; /* el imán de la 1.ª tarjeta coincide con scrollLeft 0: si no, el navegador desplaza la pista 4 px al cargar y Chrome deja de medir el LCP (PageSpeed daba "NO_LCP") */
  scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible { outline: 2px solid var(--color-cta-secundario); outline-offset: 4px; border-radius: 20px; }
@media (min-width: 700px) { .reviews__track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (min-width: 1000px) { .reviews__track { grid-auto-columns: calc((100% - 40px) / 3); } }
@media (prefers-reduced-motion: reduce) { .reviews__track { scroll-behavior: auto; } }

.review-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--color-superficie); border-radius: 20px;
  box-shadow: var(--shadow-card); padding: 28px;
}
.review-card__top { display: flex; align-items: center; justify-content: space-between; }
.review-card__quote { font-size: 22px; color: var(--color-texto); }
.review-card__stars { display: flex; gap: 2px; color: #F5A623; font-size: 15px; }
.review-card__source { display: flex; align-items: center; gap: 4px; margin: 10px 0 14px; }
.review-card__source svg { width: 16px; height: 16px; }
.review-card__source i { font-size: 13px; color: #1A73E8; }
.review-card__text {
  margin: 0; color: var(--color-texto-muted); line-height: 1.65;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}
.review-card.is-expanded .review-card__text { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.review-card__more {
  align-self: flex-start; margin-top: 8px; padding: 0; border: none; background: none;
  color: var(--color-cta-secundario); font-weight: 600; font-size: 14px;
}
.review-card__more:hover, .review-card__more:focus-visible { text-decoration: underline; }
.review-card__author {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--color-borde);
}
.review-card__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-cta-secundario), var(--color-cta-secundario-hover));
  color: #fff; font-weight: 700; font-family: var(--font-heading);
}
.review-card__author strong { display: block; font-family: var(--font-heading); color: var(--color-texto); }
.review-card__author small { display: block; font-size: 13px; color: var(--color-texto-muted); }

.reviews__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.reviews__dot {
  width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%;
  background: rgba(36, 36, 36, 0.2); transition: background-color .2s ease, transform .2s ease;
}
.reviews__dot[aria-current="true"] { background: var(--color-cta-secundario); transform: scale(1.25); }
.reviews__dot:focus-visible { outline: 2px solid var(--color-texto); outline-offset: 2px; }

.reviews__cta { display: flex; justify-content: center; margin: 28px 0 0; }
.btn--google { box-shadow: 0 8px 20px rgba(244, 141, 48, 0.35); }
.btn--google__logo { width: 24px; height: 24px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.btn--google__logo svg { width: 15px; height: 15px; }

/* ---------- Visítanos: collage de fotos + tarjeta de dirección + horario de visitas ---------- */
.visit__collage { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; padding-bottom: 72px; }
.visit__photo { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; box-shadow: 0 18px 40px rgba(36, 36, 36, .16); aspect-ratio: 1; }
.visit__photo--main { grid-row: span 2; aspect-ratio: auto; min-height: 320px; }
.visit__card {
  position: absolute; left: 20px; bottom: 0; width: min(360px, calc(100% - 40px)); box-sizing: border-box;
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px;
  background: var(--color-superficie); box-shadow: 0 18px 40px rgba(36, 36, 36, .16);
}
.visit__card p { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.45; color: var(--color-texto-muted); }
.visit__card strong { font-family: var(--font-heading); font-size: 18px; color: var(--color-texto); }
.visit__card-address { color: inherit; text-decoration: underline; text-decoration-color: rgba(36, 36, 36, .3); text-underline-offset: 3px; }
.visit__card-address:hover, .visit__card-address:focus-visible { color: var(--color-texto); text-decoration-color: currentColor; }
.visit__card-rating { font-size: 14px; font-weight: 700; color: var(--color-texto); }
.visit__card-rating i { color: #B76A00; }
.visit__card-icon { width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--color-cta-secundario); font-size: 20px; color: var(--color-texto); }

/* Móvil: etiqueta y título antes de las fotos, y la tarjeta de dirección debajo del collage (no encima) */
@media (max-width: 899px) {
  .visit__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .visit__content, .visit__content header { display: contents; }
  .visit__content .pill-label { order: 1; align-self: flex-start; }
  .visit__content h2 { order: 2; margin-bottom: 24px; }
  .visit__collage { order: 3; padding-bottom: 0; margin-bottom: 28px; }
  .visit__content header p:not(.pill-label) { order: 4; }
  .visit__hours { order: 5; margin-top: 12px; }
  .visit__card { position: static; grid-column: 1 / -1; width: 100%; }
}
.visit__hours { width: 100%; box-sizing: border-box; padding: 22px 24px; border-radius: 18px; background: var(--color-superficie); }
.visit__hours h3, .visit__hours-title { font-family: var(--font-heading); font-weight: 600; margin: 0 0 12px; font-size: 18px; line-height: 1.3; letter-spacing: 0; }
.visit__hours dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; font-size: 15px; }
.visit__hours dt { color: var(--color-texto-muted); }
.visit__hours dd { margin: 0; font-weight: 700; text-align: right; }
@media (max-width: 479px) { .visit__hours dl { grid-template-columns: 1fr; gap: 2px; } .visit__hours dd { text-align: left; margin-bottom: 8px; } }

/* ---------- Reserva: foto de fondo que se acerca sola, lenta y en bucle (efecto Ken Burns) ---------- */
.booking-cta { position: relative; overflow: hidden; color: #fff; text-align: center; background: var(--color-texto); }
.booking-cta__media { position: absolute; inset: 0; }
.booking-cta__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: center 40%;
  animation: booking-zoom 14s ease-in-out infinite alternate;
}
@keyframes booking-zoom { from { transform: scale(1); } to { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .booking-cta__media img { animation: none; } }
.booking-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(20, 20, 20, .55), rgba(20, 20, 20, .78)); }
.booking-cta__content {
  position: relative; z-index: 1; max-width: 760px;
  display: flex; flex-direction: column; align-items: center;
  padding-block: 112px;
}
.booking-cta__title { font-family: var(--font-heading); font-weight: 600; letter-spacing: var(--h2-letter-spacing); color: #fff; font-size: clamp(32px, 5vw, 48px); line-height: 1.1; margin-bottom: 18px; }
.booking-cta__content > p:not([class]) { font-size: 18px; color: rgba(255, 255, 255, .9); max-width: 620px; }
.booking-cta strong { color: #fff; }
.booking-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 12px; }
.btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .85); }
.btn--ghost-light:hover, .btn--ghost-light:focus-visible { background: #fff; color: var(--color-texto); }
.booking-cta__rating { margin: 22px 0 0; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.booking-cta__rating i { color: #F5A623; margin-right: 4px; }
@media (min-width: 900px) { .booking-cta__content { padding-block: 152px; } }

/* ---------- Galería ---------- */
/* Galería en mosaico sin huecos: en móvil cuadrícula de 2 columnas de fotos cuadradas; en desktop
   4 columnas de 8 filas rellenadas columna a columna, con fotos de 2 filas (o 3 las --tall) que suman
   lo mismo en cada columna. Aparición en cascada con JS; sin JS las fotos se ven igual */
.gallery-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gallery-item { margin: 0; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-fondo); aspect-ratio: 1; }
@media (min-width: 1000px) {
  .gallery-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(8, 80px); grid-auto-flow: column; gap: 16px; }
  .gallery-item { aspect-ratio: auto; grid-row: span 2; }
  .gallery-item--tall { grid-row: span 3; }
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.js-reveal .gallery-item { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s ease; }
.js-reveal .gallery-item.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .gallery-item { opacity: 1; transform: none; transition: none; }
  .gallery-item img { transition: none; }
  .gallery-item:hover img { transform: none; }
}

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 12px; max-width: 820px; }
.faq-item { background: var(--color-superficie); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); border: 1px solid var(--color-borde); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; font-weight: 700; font-family: var(--font-heading); font-size: 18px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chevron { font-size: 16px; flex: none; transition: transform .2s ease; color: var(--color-cta-secundario); }
.faq-item[open] summary .chevron { transform: rotate(180deg); }
.faq-item__body { padding: 0 20px 20px; color: var(--color-texto); } /* respuestas en negro (pedido de Kike), no en gris */
.faq-item__body ul { margin-top: 8px; display: grid; gap: 8px; padding-left: 18px; list-style: disc; }
.faq-item__body li p { margin: 6px 0 0; } /* párrafo de detalle dentro de un punto de la lista */

/* ---------- Blog ---------- */
.blog-grid { display: grid; gap: var(--space-widget-gap); grid-template-columns: 1fr; }
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { background: var(--color-superficie); border-radius: var(--radius-image); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.blog-card__media { aspect-ratio: 16/10; background: var(--color-fondo); }
.blog-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card__body h3 { font-size: 18px; }
.blog-cta { text-align: center; margin-top: 32px; }

/* ---------- Tarifas (página de ciudad) ---------- */
.pricing-table-wrap { overflow-x: auto; box-shadow: var(--shadow-card); border-radius: var(--radius-image); }
table.pricing-table { width: 100%; border-collapse: collapse; background: var(--color-superficie); min-width: 560px; }
table.pricing-table th, table.pricing-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--color-borde); }
table.pricing-table thead th { font-family: var(--font-heading); font-weight: 700; background: var(--color-fondo); }
table.pricing-table tbody tr:last-child td { border-bottom: none; }
.price-tag { font-weight: 700; color: var(--color-boton-whatsapp); white-space: nowrap; }
.supplements-list { display: grid; gap: 10px; margin-top: 16px; }
.supplements-list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--color-superficie); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.supplements-list strong { color: var(--color-cta-secundario); white-space: nowrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-fondo); color: var(--color-texto); padding-block: var(--space-section-gap) 24px; }
.site-footer a { color: var(--color-texto); }
.site-footer a:hover, .site-footer a:focus-visible { color: #000; text-decoration: underline; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; margin-bottom: 32px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid .footer-title { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--color-texto); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }
.footer-grid ul { display: grid; gap: 10px; }
.footer-grid p { color: var(--color-texto-muted); }
.footer-hours { display: flex; gap: 10px; align-items: flex-start; }
.footer-grid ul + p { margin-top: 16px; } /* dirección bajo el horario */
.footer-hours i { margin-top: 4px; color: var(--color-cta-secundario); }
.footer-grid .footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-superficie); font-size: 20px; transition: background-color .15s ease, color .15s ease;
}
.footer-social a:hover, .footer-social a:focus-visible { background: var(--color-texto); color: #fff; text-decoration: none; }
.footer-address { display: inline-flex; gap: 8px; align-items: flex-start; }
.footer-address i { margin-top: 4px; color: var(--color-cta-secundario); }
.footer-address:hover, .footer-address:focus-visible { text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(36, 36, 36, .14); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--color-texto-muted); }
.footer-bottom a { color: var(--color-texto); }

/* ---------- Cabecera de página interior (tarifas, servicios…) con pictogramas de perro ---------- */
.page-hero { position: relative; overflow: hidden; padding-block: 40px 64px; }
.page-hero__inner { position: relative; z-index: 1; max-width: 860px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.page-hero h1 { margin: 6px 0 14px; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; }
.page-hero p { margin: 0; max-width: 680px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7; color: var(--color-texto-muted); }
.page-hero .pill-label { max-width: none; margin-bottom: 4px; font-size: 13px; line-height: 1.4; color: var(--color-texto); } /* la regla de arriba no debe agrandar la etiqueta */
.page-hero strong { color: var(--color-texto); }
.page-hero__deco { position: absolute; bottom: 12px; width: 150px; height: auto; opacity: .55; display: none; }
.page-hero__deco--left { left: max(16px, calc(50% - 640px)); }
.page-hero__deco--right { right: max(16px, calc(50% - 640px)); }
@media (min-width: 1100px) { .page-hero__deco { display: block; } }

/* ---------- Calculadora de tarifas ---------- */
.pricing-calc__grid { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; margin: 0; }
.pricing-calc__steps { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 44px; }
.calc-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.calc-step__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.calc-step__icon { width: 56px; height: 56px; flex: none; padding: 8px; box-sizing: border-box; border-radius: 50%; background: var(--color-fondo); }
.calc-step__num { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-texto-muted); }
.calc-step__title { margin: 0; font-family: var(--font-heading); font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--color-texto); }
.calc-step__hint { margin: -8px 0 14px; font-size: 15px; color: var(--color-texto-muted); }

.calc-options { display: grid; gap: 12px; }
.calc-option {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer;
  border: 2px solid rgba(36, 36, 36, .12); border-radius: 18px; background: var(--color-superficie);
  transition: border-color .15s ease, background-color .15s ease;
}
.calc-option:hover { border-color: rgba(36, 36, 36, .35); }
.calc-option:has(input:checked) { border-color: var(--color-texto); background: var(--color-fondo); }
.calc-option input { width: 20px; height: 20px; flex: none; accent-color: var(--color-texto); }
.calc-option__text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.calc-option__text strong, .calc-option__name { font-family: var(--font-heading); font-size: 20px; }
.calc-option { position: relative; }
.calc-option__name { margin: 0; font-weight: 700; line-height: 1.25; letter-spacing: 0; color: var(--color-texto); }
.calc-option__hit { position: absolute; inset: 0; border-radius: inherit; cursor: pointer; } /* toda la tarjeta es clicable sin meter el H3 dentro de un <label> */
.calc-option:has(input:focus-visible) { outline: 2px solid var(--color-cta-secundario); outline-offset: 2px; }
h2.calc-step__title { letter-spacing: 0; }
.calc-option__text span { font-size: 14px; color: var(--color-texto-muted); }
.calc-option--guarderia .calc-option__text span { color: var(--color-texto); font-weight: 600; }
.calc-option__price { white-space: nowrap; font-size: 14px; color: var(--color-texto-muted); }
.calc-option__price strong { font-family: var(--font-heading); font-size: 28px; color: var(--color-texto); }

.calc-stepper { display: inline-flex; align-items: center; gap: 6px; padding: 6px; border-radius: var(--radius-pill); background: #F3F1EE; }
.calc-stepper__btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--color-superficie); color: var(--color-texto); font-size: 16px; }
.calc-stepper__btn:hover, .calc-stepper__btn:focus-visible { background: var(--color-texto); color: #fff; }
.calc-stepper input {
  width: 72px; border: 0; background: transparent; text-align: center;
  font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--color-texto); -moz-appearance: textfield;
}
.calc-stepper input::-webkit-outer-spin-button, .calc-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.calc-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.calc-extra {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px; cursor: pointer;
  border: 2px solid rgba(36, 36, 36, .12); border-radius: 14px; background: var(--color-superficie);
}
.calc-extra:hover { border-color: rgba(36, 36, 36, .35); }
.calc-extra:has(input:checked) { border-color: var(--color-texto); background: var(--color-fondo); }
.calc-extra input { width: 20px; height: 20px; flex: none; accent-color: var(--color-texto); }
.calc-extra__label { flex: 1; font-size: 15px; line-height: 1.4; }
.calc-extra__price { white-space: nowrap; font-family: var(--font-heading); font-weight: 700; font-size: 17px; }
.calc-extra.is-included { cursor: default; border-style: dashed; background: var(--color-fondo-suave); }
.calc-extra.is-included:hover { border-color: rgba(36, 36, 36, .12); }
.calc-extra.is-included .calc-extra__label { color: var(--color-texto-muted); }
.calc-extra__included { white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--color-texto); }
.calc-extra__included i { color: var(--color-boton-whatsapp); }
.calc-extra__price small { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--color-texto-muted); }

.calc-summary {
  flex: 1 1 340px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px;
  padding: 32px 30px; border-radius: 24px; background: var(--color-texto); color: #fff;
  box-shadow: 0 24px 50px rgba(36, 36, 36, .25);
}
@media (min-width: 1000px) { .calc-summary { position: sticky; top: 120px; } }
.calc-summary .pill-label { align-self: flex-start; margin: 0; }
.calc-summary__tarifa { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.calc-summary__tarifa strong { font-family: var(--font-heading); font-size: 26px; }
.calc-summary__tarifa span { font-size: 15px; color: #D9D6D0; }
.calc-summary__features { display: grid; gap: 10px; font-size: 15px; }
.calc-summary__features li { display: flex; gap: 10px; }
.calc-summary__features li::before { content: "✓"; font-weight: 800; color: var(--color-cta-secundario); }
.calc-summary__features li.is-off { color: #8A8A8A; text-decoration: line-through; }
.calc-summary__features li.is-off::before { content: "–"; color: #8A8A8A; }
.calc-summary__lines { margin: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); display: grid; gap: 8px; font-size: 15px; }
.calc-summary__lines div { display: flex; justify-content: space-between; gap: 12px; }
.calc-summary__lines dt, .calc-summary__lines dd { margin: 0; }
.calc-summary__lines .calc-summary__extra { color: #D9D6D0; }
.calc-summary__per { font-weight: 700; }
.calc-summary__total {
  margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-radius: 16px; background: rgba(252, 238, 200, .12);
}
.calc-summary__total span { font-size: 15px; color: var(--color-fondo); }
.calc-summary__total strong { font-family: var(--font-heading); font-size: 44px; letter-spacing: -0.03em; }
.calc-summary__cta { justify-content: center; }
.calc-summary__note { margin: 0; font-size: 13px; line-height: 1.5; color: #D9D6D0; }

/* ---------- Nuestras instalaciones: foto + cifras y tarjetas de las tres zonas ---------- */
.facilities__grid { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.facilities__media { flex: 1 1 420px; min-width: 0; }
.facilities__media img { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .facilities__media img { aspect-ratio: 4 / 5; max-height: 560px; } }
.facilities__content { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.facilities__content .pill-label { margin: 0; }
.facilities__content h2 { margin: 0; }
.facilities__content > p:not(.pill-label) { margin: 0; color: var(--color-texto-muted); }
.facilities__content strong { color: var(--color-texto); }
.facilities__stats { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.facilities__stats li { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border-radius: 16px; background: var(--color-fondo); }
.facilities__stats strong { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); line-height: 1.1; letter-spacing: -0.02em; }
.facilities__stats span { font-size: 15px; color: var(--color-texto-muted); }
.facilities__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--outline-dark { background: transparent; color: var(--color-texto); border: 1.5px solid var(--color-texto); }
.btn--outline-dark:hover, .btn--outline-dark:focus-visible { background: var(--color-texto); color: #fff; }
.btn--outline-dark .btn-icon { font-size: 14px; }

.zone-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.zone-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--color-superficie); box-shadow: 0 18px 40px rgba(36, 36, 36, .16), 0 2px 8px rgba(36, 36, 36, .06); transition: transform .2s ease, box-shadow .2s ease; }
.zone-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(36, 36, 36, .2), 0 2px 8px rgba(36, 36, 36, .06); }
.zone-card__media { margin: 0; height: 240px; border-radius: 0; box-shadow: none; }
.zone-card__media img { width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; }
.zone-card__media--pending {
  display: flex; align-items: center; justify-content: center;
  background: #F3EDE4; border-bottom: 2px dashed rgba(36, 36, 36, .15);
  color: var(--color-texto-muted); font-size: 15px; font-weight: 600;
}
.zone-card__body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px; text-align: center; }
.zone-card__body h3 { margin: 0; }
.zone-card__body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-texto-muted); }
.zone-card__body strong { color: var(--color-texto); }

/* ---------- Breadcrumb (compartido: servicio/tarifas) ---------- */
.breadcrumb { padding-block: 16px; font-size: 14px; color: var(--color-texto-muted); }
.breadcrumb a:hover { color: var(--color-cta-secundario); }
.breadcrumb .sep { margin: 0 6px; }

/* ---------- Widget WhatsApp flotante (placeholder de estructura — funcionalidad completa en Fase 3) ---------- */
.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--color-boton-whatsapp); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-cta-whatsapp); border: none;
}
.whatsapp-float i { font-size: 32px; }

/* ---------- Utilidades responsive ---------- */
@media (min-width: 760px) {
  .hero__content { padding-block: 104px 64px; padding-inline: 48px; }
}

/* ---------- Blog: artículo (plantilla tools/blog/plantilla.html) ---------- */
.post-hero { position: relative; min-height: clamp(440px, 62vh, 600px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--color-texto); }
.post-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.82) 100%); }
.post-hero__inner { position: relative; z-index: 1; width: 100%; max-width: calc(760px + 2 * var(--side-gutter)); padding-block: 40px 48px; }
.post-hero .breadcrumb { padding-top: 0; color: rgba(255,255,255,.88); }
.post-hero .breadcrumb a:hover { color: var(--color-fondo); }
.post-hero h1 { color: #fff; max-width: 860px; margin: 10px 0 20px; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.1; text-shadow: 0 2px 20px rgba(0,0,0,.3); }

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; font-size: 15px; color: rgba(255,255,255,.92); }
.post-meta__author { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.post-meta__author img { width: 40px; height: 40px; padding: 3px; border-radius: 50%; background: var(--color-superficie); object-fit: contain; }
.post-meta__item { display: inline-flex; align-items: center; gap: 6px; }
.post-meta__item i { color: var(--color-fondo); }

.post-layout { padding-top: 40px; }
@media (min-width: 1000px) { .post-layout { padding-top: 56px; } }
.post-main { min-width: 0; max-width: 760px; margin-inline: auto; }

/* Índice del artículo: desplegable, arriba del texto (móvil y escritorio) */
.post-toc { margin-bottom: 40px; border-radius: 18px; background: var(--color-fondo); overflow: hidden; }
.post-toc__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; border: 0; background: transparent; text-align: left; color: var(--color-texto);
}
.post-toc__toggle strong { font-family: var(--font-heading); font-size: 19px; }
.post-toc__toggle > span > span { display: block; font-size: 14px; color: var(--color-texto-muted); }
.post-toc__toggle .chevron { color: var(--color-texto); transition: transform .2s ease; }
.post-toc__toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.post-toc__toggle:focus-visible { outline: 2px solid var(--color-texto); outline-offset: -4px; border-radius: 18px; }
.post-toc ol { margin: 0; padding: 4px 12px 16px; border-top: 1px solid rgba(36,36,36,.08); list-style: none; display: grid; gap: 2px; }
.post-toc ol[hidden] { display: none; }
.post-toc a {
  display: block; padding: 9px 12px; border-radius: 10px;
  font-size: 15px; line-height: 1.4; color: var(--color-texto); transition: background-color .15s ease;
}
.post-toc .is-sub a { padding-left: 28px; font-size: 14px; color: var(--color-texto-muted); }
.post-toc a:hover, .post-toc a:focus-visible { background: rgba(255,255,255,.7); }

/* Cuerpo del artículo */
.prose > :first-child { margin-top: 0; }
.prose > p:first-child { font-size: 20px; line-height: 1.6; color: var(--color-texto); }
.prose h2 { margin: 56px 0 18px; font-size: clamp(26px, 3vw, 32px); line-height: 1.2; scroll-margin-top: 110px; }
.prose h3 { margin: 32px 0 12px; font-size: 21px; line-height: 1.3; letter-spacing: -0.02em; scroll-margin-top: 110px; }
.prose h4 { margin: 24px 0 10px; font-size: 18px; }
.prose p, .prose li { font-size: 17px; line-height: 1.75; color: var(--color-texto-muted); }
.prose strong { color: var(--color-texto); }
.prose a { color: var(--color-texto); text-decoration: underline; text-decoration-color: var(--color-cta-secundario); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover, .prose a:focus-visible { color: var(--color-cta-secundario); }
.prose ul, .prose ol { margin: 0 0 20px; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 9px; height: 9px; border-radius: 50%; background: var(--color-cta-secundario); }
.prose ol { padding-left: 22px; list-style: decimal; }
.prose blockquote { margin: 28px 0; padding: 22px 26px; border-left: 5px solid var(--color-cta-secundario); border-radius: 0 16px 16px 0; background: var(--color-fondo); }
.prose blockquote p { margin: 0; color: var(--color-texto); font-size: 18px; }
.prose img { height: auto; border-radius: var(--radius-image); }
.prose-table { margin: 0 0 24px; overflow-x: auto; border-radius: 16px; box-shadow: var(--shadow-card); }
.prose-table table { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--color-superficie); font-size: 15px; }
.prose-table th, .prose-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--color-borde); }
.prose-table thead th { font-family: var(--font-heading); background: var(--color-fondo); }
.prose-table tbody tr:last-child > * { border-bottom: 0; }
.prose-table tbody th { font-weight: 600; }
.prose-table td.is-no::before { content: "✕"; margin-right: 8px; font-weight: 700; color: var(--color-negativo); }
.prose-table td.is-yes::before { content: "✓"; margin-right: 8px; font-weight: 800; color: var(--color-boton-whatsapp-hover); }

/* CTA al final del artículo */
.post-cta {
  margin-top: 56px; padding: 32px; border-radius: 24px; background: var(--color-texto); color: #fff;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; box-shadow: 0 24px 50px rgba(36, 36, 36, .2);
}
.post-cta .pill-label { margin: 0; }
.post-cta a.btn { text-decoration: none; color: #fff; } /* nunca hereda el estilo de enlace del texto */
.post-cta__title { color: #fff; }
.post-cta__title { margin: 0; font-family: var(--font-heading); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; line-height: 1.2; }
.post-cta p:not(.pill-label):not(.post-cta__title) { margin: 0; color: #D9D6D0; }

/* Tarjetas de artículo (relacionados e índice del blog) */
.post-related { margin-top: 72px; }
.blog-card__media { overflow: hidden; }
.blog-card__media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.blog-card__body h3 { line-height: 1.3; }
.blog-card__meta { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-texto-muted); }
.blog-card h3 a { transition: color .15s ease; }
.blog-card h3 a::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta es clicable */
.blog-card { position: relative; transition: transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(36, 36, 36, .14); }
.blog-card:hover h3 a, .blog-card h3 a:focus-visible { text-decoration: underline; text-decoration-color: var(--color-cta-secundario); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 700px) and (max-width: 999px) { .blog-grid--index { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Servicios para perros: carrusel de fotos solo en móvil ---------- */
.service-slider { display: none; }
@media (max-width: 899px) {
  .service-slider { display: block; margin-bottom: 32px; }
  .service-slider__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    border-radius: var(--radius-image); box-shadow: var(--shadow-card); scrollbar-width: none;
  }
  .service-slider__track::-webkit-scrollbar { display: none; }
  .service-slider__slide { flex: 0 0 100%; scroll-snap-align: start; }
  .service-slider__slide img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  /* en móvil la foto va arriba en el carrusel: se ocultan las fotos de dentro de cada pestaña */
  .service-tabs__panel .media-zoom { display: none; }
}

/* ---------- FAQ con diseño (Home): icono por pregunta, puntos con icono, tarjetas ---------- */
.faq-item--rich summary { justify-content: flex-start; gap: 14px; padding: 16px 20px; }
.faq-item--rich summary .faq-item__q { flex: 1; }
.faq-item__icon {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-fondo); color: var(--color-cta-secundario); font-size: 17px; transition: background-color .2s ease, color .2s ease;
}
.faq-item--rich[open] .faq-item__icon, .faq-item--rich summary:hover .faq-item__icon { background: var(--color-cta-secundario); color: #fff; }
.faq-item--rich { transition: box-shadow .2s ease; }
.faq-item--rich[open] { box-shadow: 0 14px 34px rgba(36, 36, 36, .1); }
.faq-item--rich .faq-item__body { padding: 4px 20px 22px; display: grid; gap: 14px; font-size: 15.5px; line-height: 1.6; }
@media (min-width: 700px) { .faq-item--rich .faq-item__body { padding: 4px 28px 26px 76px; } }
.faq-item--rich .faq-item__body p { margin: 0; }
.faq-item--rich .faq-item__body strong { color: var(--color-texto); }
.faq-intro { color: var(--color-texto); }
.faq-intro a { font-weight: 700; color: var(--color-texto); text-decoration: underline; text-decoration-color: var(--color-cta-secundario); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Puntos con icono */
.faq-item__body ul.faq-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.faq-points li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--color-fondo-suave); }
.faq-points__icon {
  flex: none; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-superficie); color: var(--color-cta-secundario); font-size: 13px; box-shadow: 0 2px 6px rgba(36, 36, 36, .08);
}

/* Habitaciones: 3 tarjetas */
.faq-item__body ul.faq-rooms { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.faq-room { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; border: 1px solid var(--color-borde); background: var(--color-superficie); }
.faq-room__icon { width: 46px; height: 46px; margin-bottom: 6px; border-radius: 12px; display: inline-flex; align-items: flex-end; justify-content: center; background: var(--color-fondo); color: var(--color-texto); }
.faq-room__icon--l { font-size: 28px; } .faq-room__icon--m { font-size: 21px; } .faq-room__icon--s { font-size: 15px; }
.faq-room__icon i { margin-bottom: 7px; }
.faq-room strong { font-family: var(--font-heading); font-size: 19px; }
.faq-room__size { align-self: flex-start; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-fondo); color: var(--color-texto); font-size: 13px; font-weight: 700; }
.faq-room__desc { font-size: 14px; line-height: 1.45; }

/* Qué traer: checklist en tarjetas */
.faq-item__body ul.faq-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
@media (min-width: 700px) { .faq-item__body ul.faq-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq-checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--color-fondo-suave); }
.faq-checklist__check {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-superficie); color: var(--color-cta-secundario); font-size: 13px; box-shadow: 0 2px 6px rgba(36, 36, 36, .08);
}
.faq-checklist strong { display: block; font-family: var(--font-heading); font-size: 17px; line-height: 1.5; }
.faq-checklist p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; }

/* Check-in / check-out: horarios destacados */
.faq-item__body ul.faq-times { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
@media (min-width: 700px) { .faq-item__body ul.faq-times { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq-times li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--color-fondo-suave); }
.faq-times strong { white-space: nowrap; }
.faq-times__icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-superficie); color: var(--color-cta-secundario); font-size: 13px; box-shadow: 0 2px 6px rgba(36, 36, 36, .08); }
@media (max-width: 599px) {
  .faq-item--rich summary { gap: 12px; padding: 14px 16px; }
  .faq-item__icon { width: 36px; height: 36px; font-size: 15px; }
  .faq-item--rich .faq-item__body { padding: 2px 16px 18px; gap: 12px; font-size: 15px; }
  .faq-points li { gap: 10px; padding: 10px 12px; }
  .faq-points__icon { width: 26px; height: 26px; font-size: 12px; }
  /* habitaciones: fila compacta con el icono a la izquierda */
  .faq-room { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px; }
  .faq-room__icon { grid-row: span 3; margin: 0; }
  .faq-room strong { font-size: 17px; line-height: 1.2; }
  .faq-room__size, .faq-room__desc { grid-column: 2; }
  .faq-room__size { justify-self: start; }
}

/* Foco de las preguntas: sin recuadro al hacer clic, visible solo con teclado */
.faq-item summary:focus { outline: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--color-cta-secundario); outline-offset: -2px; border-radius: var(--radius-sm); }

/* ---------- Contacto ---------- */
.contact__inner { max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.contact__cta { padding: 16px 32px; font-size: 17px; }
.contact-list { width: 100%; display: grid; gap: 14px; }
.contact-list li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.5; color: var(--color-texto); }
.contact-list__icon {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-fondo-suave); color: var(--color-cta-secundario); font-size: 16px;
}
.contact-list a { text-decoration: underline; text-decoration-color: var(--color-cta-secundario); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.contact-list a:hover, .contact-list a:focus-visible { color: var(--color-cta-secundario-hover); }
.contact-map { line-height: 0; border-top: 1px solid var(--color-borde); }
.contact-map iframe { width: 100%; height: clamp(320px, 45vw, 460px); border: 0; }

/* Preguntas con lista de iconos dentro de las pestañas de servicio */
.faq-item__body--stack { display: grid; gap: 12px; }
.faq-item__body--stack p { margin: 0; }

/* ---------- Resumen de cada pestaña de servicio (para quién es), antes de sus preguntas ---------- */
.service-tabs__summary {
  display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 18px 20px;
  border-radius: var(--radius-sm); border-left: 4px solid var(--color-cta-secundario);
  background: var(--color-superficie); box-shadow: var(--shadow-card);
  font-size: 16px; line-height: 1.6; font-weight: 600; color: var(--color-texto);
}
.service-tabs__summary-icon {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-fondo); color: var(--color-cta-secundario); font-size: 15px;
}

/* ---------- Botón "volver arriba" (lo crea main.js en todas las páginas) ---------- */
.back-to-top {
  position: fixed; right: 26px; bottom: 92px; z-index: 199; width: 48px; height: 48px; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--color-texto); color: #fff; font-size: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background-color .15s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover, .back-to-top:focus-visible { background: var(--color-cta-secundario-hover); }
.back-to-top:focus-visible { outline: 2px solid var(--color-texto); outline-offset: 3px; }
.back-to-top i { transform: rotate(180deg); }

/* Valoración "4,9 · 1.121 reseñas en Google" como enlace a la sección de reseñas */
a.booking-cta__rating, a.visit__card-rating { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.booking-cta__rating:hover, a.booking-cta__rating:focus-visible, a.visit__card-rating:hover, a.visit__card-rating:focus-visible { text-decoration-thickness: 2px; }
a.booking-cta__rating { display: inline-flex; }

/* ---------- Banner de cookies (lo crea main.js) ---------- */
.cookie-banner {
  position: fixed; left: 20px; bottom: 20px; z-index: 400; width: min(440px, calc(100vw - 40px)); box-sizing: border-box;
  display: grid; gap: 14px; padding: 22px 22px 20px; border-radius: 20px;
  background: var(--color-superficie); border-top: 5px solid var(--color-cta-secundario);
  box-shadow: 0 24px 60px rgba(36, 36, 36, .28); color: var(--color-texto);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__head { display: flex; align-items: center; gap: 12px; }
.cookie-banner__icon { width: 38px; height: 38px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-fondo); color: var(--color-cta-secundario); }
.cookie-banner__title { margin: 0; font-family: var(--font-heading); font-size: 20px; font-weight: 700; }
.cookie-banner__text { margin: 0; font-size: 14px; line-height: 1.6; }
.cookie-banner__text a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-cta-secundario); text-underline-offset: 3px; }
.cookie-banner__prefs { display: grid; gap: 8px; }
.cookie-banner__prefs[hidden] { display: none; }
.cookie-pref { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--color-fondo-suave); cursor: pointer; }
.cookie-pref input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--color-texto); }
.cookie-pref strong { display: block; font-size: 15px; }
.cookie-pref small { display: block; font-size: 13px; line-height: 1.45; color: var(--color-texto-muted); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cookie-banner__actions .btn { flex: 1 1 auto; justify-content: center; padding: 12px 20px; font-size: 15px; }
.cookie-banner__actions [hidden] { display: none; }
.cookie-banner__link { flex: 1 0 100%; padding: 6px; border: 0; background: none; font-weight: 700; font-size: 14px; color: var(--color-texto); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner__link:hover, .cookie-banner__link:focus-visible { color: var(--color-cta-secundario-hover); }
@media (max-width: 520px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px; } }
.footer-cookies { padding: 0; border: 0; background: none; font: inherit; color: var(--color-texto); cursor: pointer; }
.footer-cookies:hover, .footer-cookies:focus-visible { text-decoration: underline; }

/* ---------- Páginas legales ---------- */
.legal { max-width: 760px; margin-inline: auto; }
.legal h2 { font-size: clamp(22px, 2.4vw, 26px); margin-top: 40px; }
.legal .prose-table table { min-width: 620px; }
.legal .prose-table th[scope="row"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; white-space: nowrap; }

/* ---------- Página 404 ---------- */
.notfound { padding-block: 72px 96px; }
.notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }