/* ============================================================
   VetHomy — style.css
   Marca: Cian #00C9E8 · Rosa #F5187A · Marino #022e48
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  /* Colores de marca */
  --c-cyan:         #00C9E8;
  --c-pink:         #F5187A;
  /* Navy corregido 2026-07-08 (dado por el cliente en la reunión
     2026-07-06, hex correcto confirmado en el chat): antes #0B1F6B. */
  --c-navy:         #022e48;
  --c-purple:       #7B5EA7;
  --c-cyan-pale:    #e0f9fd;
  --c-pink-pale:    #fce4ef;
  --c-navy-pale:    #e8edf8;

  /* Variantes "profundas" del cian/fucsia — mismo tono de marca pero
     oscurecido lo justo para que el texto/icono blanco encima cumpla
     WCAG AA (≥4.5:1). El cian y el fucsia puros fallan ese contraste con
     texto blanco (ver .team-card__avatar); antes lo disimulaba el punto
     medio del degradado diagonal (mezclaba con navy). Al pasar a color
     plano (icons minimalistas, sin degradado) hace falta este tono fijo
     en su lugar. */
  --c-cyan-deep:    #066CA3;
  --c-pink-deep:    #AF1A76;

  /* Fucsia corporativo dado por el cliente (2026-07-06), distinto del
     --c-pink histórico. Usado en botones y, plano (sin degradado), en
     --grad-brand — ver nota junto a esa variable más abajo. */
  --c-btn-fuchsia:  #fa327f;

  /* Semánticos claros */
  --c-bg:           #ffffff;
  --c-bg-alt:       #f5f8ff;
  --c-text:         #0a0f1e;
  --c-text-muted:   #3d4366;
  --c-border:       #dde3f0;
  --c-shadow:       rgba(11, 31, 107, 0.10);

  /* Gradientes */
  /* --grad-brand pedido "plano" (2026-07-06): antes era un degradado de
     azul a fucsia (cian→púrpura→fucsia); ahora es el fucsia corporativo
     sólido. Se mantiene el nombre de la variable porque cambiarlo
     obligaría a tocar sus 7 usos (texto degradado, insignias, barra de
     progreso, día del calendario seleccionado, conector de "Cómo
     funciona", avatar de reseña) sin ningún beneficio funcional. */
  --grad-brand:     var(--c-btn-fuchsia);
  --grad-cyan:      linear-gradient(135deg, #00C9E8 0%, #022e48 100%);
  --grad-pink:      linear-gradient(135deg, #F5187A 0%, #7B5EA7 100%);

  /* Tipografía */
  --font:           'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display:   'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fscale:         1;
  --fs-xs:          calc(0.75rem  * var(--fscale));
  --fs-sm:          calc(0.875rem * var(--fscale));
  --fs-base:        calc(1rem     * var(--fscale));
  --fs-lg:          calc(1.125rem * var(--fscale));
  --fs-xl:          calc(1.25rem  * var(--fscale));
  --fs-2xl:         calc(1.5rem   * var(--fscale));
  --fs-3xl:         calc(1.875rem * var(--fscale));
  --fs-4xl:         calc(2.25rem  * var(--fscale));
  --fs-5xl:         calc(3rem     * var(--fscale));

  /* Layout */
  --max-w:          1200px;
  --r:              12px;
  --r-lg:           20px;
  --r-xl:           28px;
  --r-pill:         999px;

  /* Sombras */
  --sh-sm: 0 1px 4px  var(--c-shadow);
  --sh-md: 0 4px 16px var(--c-shadow);
  --sh-lg: 0 8px 32px var(--c-shadow);
  --sh-xl: 0 16px 56px var(--c-shadow);

  /* Transición */
  --t: 200ms ease;

  /* Alturas fijas */
  --h-a11y:   44px;
  --h-header: 72px;
}

/* ── Modo alto contraste ──────────────────────────────────── */
.hc {
  --c-cyan:       #00e5ff;
  --c-pink:       #ff69b4;
  --c-navy:       #0033ff;
  --c-bg:         #000000;
  --c-bg-alt:     #111111;
  --c-text:       #ffffff;
  --c-text-muted: #cccccc;
  --c-border:     #ffffff;
  --c-shadow:     rgba(255,255,255,0.15);
  --c-cyan-pale:  #001a1f;
  --c-pink-pale:  #1a0010;
  --grad-brand:   linear-gradient(135deg, #00e5ff 0%, #ff69b4 100%);
  --grad-cyan:    linear-gradient(135deg, #00e5ff 0%, #0033ff 100%);
  --grad-pink:    linear-gradient(135deg, #ff69b4 0%, #0033ff 100%);
}

/* ── Escala de fuente ─────────────────────────────────────── */
.fz-sm { --fscale: 0.875; }
.fz-md { --fscale: 1;     }
.fz-lg { --fscale: 1.25;  }

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .btn {
  font-family: var(--font-display);
}

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

a {
  color: var(--c-cyan);
  text-decoration: none;
  transition: color var(--t);
}
a:hover { text-decoration: underline; }

ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }

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

/* ── Accesibilidad base ───────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -200px;
  left: 1rem;
  z-index: 9999;
  padding: 0.6rem 1.2rem;
  background: var(--c-navy);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  border-radius: var(--r);
  transition: top var(--t);
}
.skip-link:focus { top: 0.75rem; }

/* Focus global */
:focus-visible {
  outline: 3px solid var(--c-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
.hc :focus-visible {
  outline: 4px solid #ffff00;
  outline-offset: 4px;
}

/* ── Barra de accesibilidad ───────────────────────────────── */
.a11y-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--h-a11y);
  background: var(--c-navy);
  color: #fff;
}
.hc .a11y-bar { background: #111; border-bottom: 2px solid #fff; }

.a11y-bar__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.a11y-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .75rem;
  height: 32px;
  min-width: 44px;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: 6px;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.a11y-btn:hover { background: rgba(255,255,255,.22); }
.a11y-btn[aria-pressed="true"],
.a11y-btn.active {
  background: var(--c-cyan);
  border-color: var(--c-cyan);
  color: var(--c-navy);
}
.hc .a11y-btn[aria-pressed="true"],
.hc .a11y-btn.active {
  background: #ffff00;
  border-color: #ffff00;
  color: #000;
}

/* ── Header ───────────────────────────────────────────────── */
.header {
  position: sticky;
  top: var(--h-a11y);
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  transition: box-shadow var(--t);
}
.header.scrolled { box-shadow: var(--sh-md); }
.hc .header { background: #111; }

/* Fila superior: logo + CTA (pedido cliente 2026-07-08, sample1.jpeg) */
.header__top {
  height: var(--h-header);
  border-bottom: 1px solid var(--c-border);
}
.hc .header__top { border-color: #fff; }

.header__top-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  -webkit-tap-highlight-color: transparent;
}
.header__logo:hover,
.header__logo:active { text-decoration: none; }
.header__logo-icon {
  /* Más grande en desktop (pedido 2026-07-08); en móvil/tablet se
     mantiene el tamaño original (ver @media max-width:768px) para no
     apretar la cabecera cuando baja a 64px de alto. */
  height: 48px;
  width: auto;
  object-fit: contain;
}
.header__logo-text {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1;
  color: var(--c-navy);
}
.header__logo-text--accent { color: var(--c-pink); }
.hc .header__logo-text { color: #fff; }

/* Fila inferior: barra navy a todo el ancho con el menú (icono + texto).
   En móvil se colapsa a altura 0 — el propio #nav-menu se convierte en
   el desplegable fijo de siempre (ver @media max-width:768px), así que
   no hace falta ocultar esta fila con display:none (rompería el fixed). */
.header__navbar { background: var(--c-navy); }
.hc .header__navbar { background: #111; }

.nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .8rem .9rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: color var(--t), background var(--t);
}
.nav__link-icon { flex: none; }
.nav__link:hover {
  color: var(--c-cyan);
  text-decoration: none;
}
.hc .nav__link:hover { color: #00e5ff; }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none;
  border: none;
  border-radius: 8px;
}
.nav__bar {
  display: block;
  width: 22px; height: 2.5px;
  background: var(--c-navy);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}
.hc .nav__bar { background: #fff; }

.nav__toggle[aria-expanded="true"] .nav__bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav__toggle[aria-expanded="true"] .nav__bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ── Container ────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Botones ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 800;
  border-radius: var(--r);
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  min-height: 44px;
  transition: all var(--t);
}
.btn--lg { padding: 1rem 2rem; font-size: var(--fs-lg); }
.btn--sm { padding: .4rem 1rem; font-size: var(--fs-sm); min-height: 36px; }
.btn--full { width: 100%; }

.btn--primary {
  background: var(--c-btn-fuchsia);
  color: #fff;
}
.btn--primary:hover {
  opacity: .9;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(250,50,127,.35);
  color: #fff;
  text-decoration: none;
}

.btn--outline-brand {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-cyan);
}
.btn--outline-brand:hover {
  background: var(--c-cyan);
  color: #fff;
  text-decoration: none;
}

.btn--outline {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-border);
}
.btn--outline:hover {
  border-color: var(--c-cyan);
  color: var(--c-cyan);
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  color: var(--c-text-muted);
  border-color: var(--c-border);
}
.btn--ghost:hover {
  border-color: var(--c-cyan);
  color: var(--c-cyan);
  text-decoration: none;
}

.hc .btn--primary { background: #00e5ff; color: #000; }
.hc .btn--outline-brand { color: #fff; border-color: #00e5ff; }
.hc .btn--outline-brand:hover { background: #00e5ff; color: #000; }
.hc .btn--outline { color: #fff; border-color: #fff; }
.hc .btn--outline:hover { border-color: #00e5ff; color: #00e5ff; }

/* ── Sección común ────────────────────────────────────────── */
.section-header { text-align: center; margin-bottom: 4rem; }

.section-title {
  font-size: var(--fs-3xl);
  font-weight: 900;
  color: var(--c-navy);
  line-height: 1.2;
  margin-bottom: .75rem;
}
.hc .section-title { color: var(--c-cyan); }

.section-subtitle {
  font-size: var(--fs-lg);
  color: var(--c-text-muted);
}
.hc .section-subtitle { color: #ccc; }

.section-eyebrow {
  font-size: var(--fs-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-pink);
  margin-bottom: .5rem;
}
.hc .section-eyebrow { color: #ff69b4; }

/* ── Scroll-reveal ─────────────────────────────────────────── */
/* .reveal parte oculta/desplazada; interactions.js añade
   .is-visible vía IntersectionObserver al entrar en el viewport. */
.reveal {
  opacity: 0;
  transform: translateY(32px) scale(.97);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Variante con más "punch" para momentos de marca a pantalla completa
   (ver sección .chapter) — parte de más pequeño y tarda más en asentarse,
   para que se note más el "vengo de lejos" al entrar en pantalla. */
.reveal--chapter {
  transform: translateY(0) scale(.7);
  transition: opacity 900ms ease, transform 900ms ease;
}
.reveal--chapter.is-visible { transform: none; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
}

/* ── Hero: banner de ancho completo con carrusel de fondo ─── */
.hero__carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 82vh;
  min-height: 480px;
  max-height: 780px;
  touch-action: pan-y;
}
.hc .hero__carousel { border-bottom: 2px solid #fff; }

.hero__carousel-track {
  display: flex;
  height: 100%;
  transition: transform 500ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .hero__carousel-track { transition: none; }
}

.hero__slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}
.hero__slide img {
  position: absolute;
  top: -9%;
  left: 0;
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
}

.hero__carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  background: rgba(11,31,107,.55);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 50%;
  backdrop-filter: blur(3px);
  transition: background var(--t), transform var(--t);
}
.hero__carousel-btn:hover { background: rgba(11,31,107,.8); }
.hero__carousel-btn--prev { left: 1.25rem; }
.hero__carousel-btn--next { right: 1.25rem; }
.hc .hero__carousel-btn { background: #000; border-color: var(--c-cyan); }

.hero__carousel-dots {
  position: absolute;
  left: 0; right: 0;
  bottom: 1.5rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: .5rem;
}
.hero__carousel-dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 1.5px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: background var(--t), transform var(--t);
}
.hero__carousel-dot[aria-pressed="true"] {
  background: #fff;
  transform: scale(1.25);
}
.hc .hero__carousel-dot { border-color: var(--c-cyan); }
.hc .hero__carousel-dot[aria-pressed="true"] { background: var(--c-cyan); }

.hero__wave { margin-top: 0; line-height: 0; position: relative; z-index: 1; }
.hero__wave svg { width: 100%; }

/* Degradado suave que "adelanta" el color de la siguiente sección
   (marino) antes del recorte de la ola, para que el cambio de fondo no
   se sienta como un corte brusco entre la foto y el color plano. */
.hero__fade {
  position: absolute;
  left: 0; right: 0;
  bottom: 78px;
  height: 160px;
  background: linear-gradient(to bottom, rgba(11,31,107,0) 0%, var(--c-navy) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Momento de marca: móvil con VetHomy ──────────────────── */
.phone-showcase {
  position: relative;
  background: var(--c-navy);
  text-align: center;
  /* Importante: SIN overflow:hidden — rompe el position:sticky del
     efecto "pin" de zoom (mismo problema ya visto en .why, ver
     Convenciones técnicas más abajo). */
}
.hc .phone-showcase { background: #000; }

/* Modo por defecto / sin JS / reduced-motion / móvil: flujo normal,
   sin altura especial ni sticky — el icono solo gira al entrar en
   pantalla (bindPhoneShowcase sigue calculándolo sin necesidad de pin). */
.phone-showcase__pin { position: relative; }

.phone-showcase__inner { position: relative; z-index: 1; padding: 6rem 0; }

/* Modo "pin": al llegar el icono a su posición final, la sección se
   ancla un tramo extra de scroll durante el cual el icono sigue
   agrandándose (ver bindPhoneShowcase) antes de soltarse. */
.is-pinned .phone-showcase__viewport {
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.phone-showcase__stage {
  perspective: 1200px;
  /* El icono crece hasta scale(1.65) sin reflow (es un transform), así
     que reservamos altura de sobra para que no tape el título de abajo
     cuando esté al máximo tamaño. */
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.phone-showcase__icon {
  width: 170px;
  margin: 0 auto;
  filter: drop-shadow(0 25px 45px rgba(0,0,0,.45));
  transform-style: preserve-3d;
  will-change: transform;
  /* Estado inicial (sin JS / reduced-motion): visible, sin 3D */
  transform: none;
}

.phone-showcase__title {
  color: #fff;
  font-size: var(--fs-3xl);
  font-weight: 800;
  margin-bottom: .75rem;
}
.phone-showcase__subtitle {
  color: rgba(255,255,255,.75);
  font-size: var(--fs-lg);
  max-width: 480px;
  margin: 0 auto;
}
.hc .phone-showcase__subtitle { color: #ccc; }

.phone-showcase__wave { line-height: 0; }
.phone-showcase__wave svg { width: 100%; }

@media (max-width: 1024px) {
  /* El tramo de zoom anclado solo se activa en ≥1024px (ver
     bindPhoneShowcase) — por debajo de eso el icono solo gira, así que
     no hace falta reservar tanta altura. */
  .phone-showcase__stage { min-height: 260px; }
}

@media (max-width: 768px) {
  .phone-showcase__inner { padding: 4rem 0; }
  .phone-showcase__icon { width: 130px; }
  .phone-showcase__stage { min-height: 200px; }
  .phone-showcase__title { font-size: var(--fs-2xl); }
}

/* ── Calendario de citas ──────────────────────────────────── */
.calendar-section {
  background: var(--c-bg-alt);
  padding: 6.5rem 0;
}
.hc .calendar-section { background: #111; }

.calendar {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: start;
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 2rem;
  box-shadow: var(--sh-md);
}
.hc .calendar { background: #1a1a1a; border-color: #fff; }

.calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.calendar__nav-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: var(--c-bg-alt);
  border: 1.5px solid var(--c-border);
  border-radius: 50%;
  color: var(--c-navy);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.calendar__nav-btn:hover { background: var(--c-cyan-pale); border-color: var(--c-cyan); color: var(--c-cyan); }
.calendar__nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.calendar__nav-btn:disabled:hover { background: var(--c-bg-alt); border-color: var(--c-border); color: var(--c-navy); }
.hc .calendar__nav-btn { background: #000; border-color: #fff; color: #fff; }

.calendar__month-label {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-navy);
  text-transform: capitalize;
}
.hc .calendar__month-label { color: #fff; }

.calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .35rem;
  margin-bottom: .5rem;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--c-text-muted);
  text-transform: uppercase;
}
.hc .calendar__weekdays { color: #ccc; }

.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .35rem;
}

.calendar__day {
  aspect-ratio: 1;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-alt);
  border: 1.5px solid transparent;
  border-radius: var(--r);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text);
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.calendar__day:hover:not(:disabled) { border-color: var(--c-cyan); color: var(--c-cyan); }
.calendar__day:disabled {
  background: none;
  color: var(--c-text-muted);
  opacity: .35;
  cursor: not-allowed;
}
.calendar__day--today { border-color: var(--c-cyan); }
.calendar__day[aria-pressed="true"] {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  transform: scale(1.05);
}
.calendar__day--empty { visibility: hidden; }
.hc .calendar__day { background: #000; color: #fff; }
.hc .calendar__day:disabled { color: #666; }
.hc .calendar__day[aria-pressed="true"] { background: var(--c-cyan); color: #000; }

.calendar__slots-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-navy);
  margin-bottom: 1rem;
}
.hc .calendar__slots-title { color: #fff; }

.calendar__slots-empty {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.hc .calendar__slots-empty { color: #ccc; }

.calendar__slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
.calendar__slots-grid[hidden] { display: none; }

.calendar__slot {
  padding: .6rem .5rem;
  text-align: center;
  background: var(--c-bg-alt);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--c-navy);
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.calendar__slot:hover { border-color: var(--c-cyan); color: var(--c-cyan); }
.calendar__slot[aria-pressed="true"] {
  background: var(--c-pink);
  border-color: var(--c-pink);
  color: #fff;
  transform: scale(1.05);
}
.hc .calendar__slot { background: #000; color: #fff; border-color: #fff; }
.hc .calendar__slot[aria-pressed="true"] { background: var(--c-cyan); border-color: var(--c-cyan); color: #000; }

.calendar__confirm {
  grid-column: 1 / -1;
  margin-top: .5rem;
  padding: 2rem;
}

.calendar__confirm-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-navy);
  margin-bottom: 1.25rem;
}
.hc .calendar__confirm-title { color: #fff; }

/* ── Servicios ────────────────────────────────────────────── */
.services {
  background: var(--c-navy);
  padding: 6.5rem 0;
}
.hc .services { background: #111; }

/* Fondo azul oscuro pedido por el cliente (2026-07-08) para que la
   sección destaque frente a "Cómo funciona", que se queda en claro.
   .section-title/.section-subtitle son oscuros por defecto (pensados
   para fondos claros), así que se sobrescriben aquí a blanco. En modo
   .hc no hace falta tocar nada: ya se vuelven claros globalmente. */
.services .section-title { color: #fff; }
.services .section-subtitle { color: rgba(255,255,255,.75); }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.service-card {
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 2rem;
  position: relative;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.hc .service-card { background: #1a1a1a; border-color: #fff; }

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: var(--c-cyan);
}
.service-card--featured {
  border-color: var(--c-pink);
  box-shadow: var(--sh-md);
}

.service-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: .2rem .9rem;
  background: var(--grad-pink);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 800;
  border-radius: var(--r-pill);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.service-card__icon {
  width: 76px; height: 76px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.service-card__icon--cyan     { background: var(--c-cyan-pale); }
.service-card__icon--pink     { background: var(--c-pink-pale); }
.service-card__icon--gradient { background: linear-gradient(135deg, var(--c-cyan-pale), var(--c-pink-pale)); }

.service-card__title {
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--c-navy);
  margin-bottom: .25rem;
}
.hc .service-card__title { color: #00e5ff; }

.service-card__pill {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--c-pink);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 1rem;
}
.hc .service-card__pill { color: #ff69b4; }

.service-card__desc {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.hc .service-card__desc { color: #ccc; }

.service-card__link {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--c-cyan);
}
.service-card__link:hover { color: var(--c-pink); }

/* ── Servicio destacado (tarjeta única) ───────────────────── */
.service-card--hero {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 3rem;
  max-width: 980px;
  margin: 0 auto;
  border-color: var(--c-pink);
  box-shadow: var(--sh-lg);
}

.service-card--hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  /* Icono de línea minimalista (sin degradado ni relleno) sobre una
     tarjeta plana en navy — mismo tratamiento que .why-card__icon. */
  background: var(--c-navy);
  color: #fff;
  border-radius: var(--r-lg);
}
.hc .service-card--hero__media { background: #000; border: 2px solid var(--c-cyan); }

.service-card--hero__video {
  display: block;
  width: 100%;
  max-height: 460px;
  border-radius: var(--r);
  background: #000;
}

.service-card--hero__body .service-card__title { font-size: var(--fs-3xl); }
.service-card--hero__body .service-card__desc  { margin-bottom: 1.25rem; }

.service-card--hero__list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 2rem;
}
.service-card--hero__list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text);
}
.service-card--hero__list li svg { color: var(--c-cyan); flex-shrink: 0; }
.hc .service-card--hero__list li { color: #fff; }
.hc .service-card--hero__list li svg { color: #00e5ff; }

/* ── Cómo funciona ────────────────────────────────────────── */
.how-it-works {
  padding: 6.5rem 0;
  background: var(--c-bg);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(12.5% + 20px);
  right: calc(12.5% + 20px);
  height: 3px;
  background: var(--grad-brand);
  border-radius: 2px;
  z-index: 0;
}
.hc .steps::before { background: #00e5ff; }

.step {
  text-align: center;
  position: relative;
  z-index: 1;
  transition: transform var(--t);
}
.step:hover { transform: translateY(-4px); }

.step__bubble {
  position: relative;
  width: 84px; height: 84px;
  border-radius: 50%;
  /* Icono de línea blanca lisa sobre el círculo fucsia de marca. */
  background: var(--c-pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: var(--sh-lg);
}
.hc .step__bubble { background: #00e5ff; color: #000; }

.step__number {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-navy);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 900;
  border-radius: 50%;
  border: 2px solid var(--c-bg);
}
.hc .step__number { background: #000; border-color: #fff; }

.step__title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-navy);
  margin-bottom: .5rem;
}
.hc .step__title { color: #fff; }

.step__desc {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  line-height: 1.65;
  max-width: 260px;
  margin-inline: auto;
}
.hc .step__desc { color: #ccc; }

/* ── CTA de urgencia (debajo del calendario, ClickUp 86can7d6z) ──── */
.urgent-cta {
  max-width: 640px;
  margin: 2.5rem auto 0;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--c-pink-pale);
  border: 1px solid rgba(250,50,127,.25);
  border-radius: var(--r-lg);
}
.hc .urgent-cta { background: #1a0010; border-color: #ff69b4; }

.urgent-cta__icon {
  flex: none;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-btn-fuchsia);
  color: #fff;
}
.hc .urgent-cta__icon { background: #ff69b4; color: #000; }

.urgent-cta__text {
  flex: 1;
  font-weight: 800;
  color: var(--c-navy);
}
.hc .urgent-cta__text { color: #fff; }

.urgent-cta__btn { flex: none; }

@media (max-width: 640px) {
  .urgent-cta { flex-direction: column; text-align: center; padding: 1.5rem; }
  .urgent-cta__btn { width: 100%; }
}

/* ── Precios ──────────────────────────────────────────────── */
.pricing {
  padding: 6.5rem 0;
  background: var(--c-bg-alt);
}
.hc .pricing { background: #111; }

.pricing__categories {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.pricing__category-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-navy);
  text-align: center;
  margin-bottom: 1.75rem;
}
.pricing__category-title--packs { font-size: var(--fs-xl); }
.hc .pricing__category-title { color: #fff; }

.pricing__category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  justify-content: center;
  gap: 2.5rem;
  align-items: start;
}

.pricing-card {
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 2rem;
  position: relative;
  transition: transform var(--t), box-shadow var(--t);
}
.hc .pricing-card { background: #1a1a1a; border-color: #fff; }

.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

.pricing-card--featured {
  border-color: var(--c-pink);
  box-shadow: var(--sh-md);
  transform: scale(1.03);
}
.pricing-card--featured:hover { transform: scale(1.03) translateY(-4px); }

.pricing-card__badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  padding: .2rem .9rem;
  background: var(--grad-brand);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 800;
  border-radius: var(--r-pill);
  white-space: nowrap;
  text-transform: uppercase;
}

.pricing-card__name {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--c-navy);
  margin-bottom: 1rem;
}
.hc .pricing-card__name { color: #00e5ff; }

.pricing-card__price {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--c-border);
}
.hc .pricing-card__price { border-color: #444; }

.pricing-card__amount {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: 900;
  color: var(--c-navy);
  line-height: 1.1;
}
.hc .pricing-card__amount { color: #fff; }

.pricing-card__period {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.hc .pricing-card__period { color: #ccc; }

.pricing-card__save {
  display: inline-block;
  margin-left: .5rem;
  padding: .2rem .7rem;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: #fff;
  background: var(--c-btn-fuchsia);
  border-radius: var(--r-pill);
  vertical-align: middle;
}
.hc .pricing-card__save { color: #00e5ff; background: transparent; border: 1px solid #00e5ff; }

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-bottom: 2rem;
}
.pricing-card__features li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.pricing-card__features li svg { color: var(--c-cyan); flex-shrink: 0; }
.hc .pricing-card__features li { color: #ccc; }
.hc .pricing-card__features li svg { color: #00e5ff; }

/* ── Formulario (reusado por el mini-formulario del calendario) ── */
.contact-form {
  background: var(--c-bg-alt);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 2.5rem;
}
.hc .contact-form { background: #111; border-color: #fff; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group { margin-bottom: 1.25rem; }

.form-group--check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: .4rem;
}
.hc .form-label { color: #fff; }

.form-label--check {
  margin-bottom: 0;
  font-weight: 600;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.hc .form-label--check { color: #ccc; }

.required { color: var(--c-pink); margin-left: .1rem; }

.form-input {
  width: 100%;
  padding: .7rem 1rem;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  min-height: 44px;
  transition: border-color var(--t), box-shadow var(--t);
}
.hc .form-input { background: #000; color: #fff; border-color: #fff; }

.form-input:focus {
  outline: none;
  border-color: var(--c-cyan);
  box-shadow: 0 0 0 3px rgba(0,201,232,.2);
}
.hc .form-input:focus {
  border-color: #00e5ff;
  box-shadow: 0 0 0 4px rgba(0,229,255,.25);
}

.form-input[aria-invalid="true"] {
  border-color: var(--c-pink);
  box-shadow: 0 0 0 3px rgba(245,24,122,.15);
}

.form-input[readonly] {
  background: var(--c-bg-alt);
  color: var(--c-navy);
  font-weight: 700;
  cursor: default;
}
.form-input[readonly]:focus { box-shadow: none; border-color: var(--c-border); }
.hc .form-input[readonly] { background: #000; color: #fff; }

.form-input::placeholder { color: #9aa0bb; }
.hc .form-input::placeholder { color: #666; }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233d4366' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-textarea {
  resize: vertical;
  min-height: 110px;
}

.form-checkbox {
  width: 20px; height: 20px;
  min-width: 20px;
  margin-top: 1px;
  accent-color: var(--c-cyan);
  cursor: pointer;
  border-radius: 4px;
}

.btn--submit { margin-top: .5rem; }

.form-status {
  min-height: 1.5rem;
  margin-top: 1rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
}
.form-status.success { color: #059669; }
.form-status.error   { color: var(--c-pink); }
.hc .form-status.success { color: #00ff88; }
.hc .form-status.error   { color: #ff69b4; }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--c-navy);
  color: rgba(255,255,255,.8);
}
.hc .footer { background: #000; border-top: 2px solid #fff; }

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  padding: 4rem 1.5rem 3rem;
}

.footer__logo-text {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 1rem;
}
.footer__logo-icon { height: 34px; width: auto; }
.footer__logo-vet { color: rgba(255,255,255,.9); }
.footer__logo-hom { color: var(--c-pink); }

.footer__tagline {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: rgba(255,255,255,.6);
  margin-bottom: 1rem;
}

.footer__powered {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.footer__nav-title {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1rem;
}

.footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.footer__nav a {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.6);
  transition: color var(--t);
}
.footer__nav a:hover { color: var(--c-cyan); text-decoration: none; }
.hc .footer__nav a:hover { color: #00e5ff; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1.25rem 0;
}
.hc .footer__bottom { border-color: rgba(255,255,255,.3); }

.footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.45);
}

.footer__legal {
  display: flex;
  gap: 1.25rem;
}
.footer__legal a {
  color: rgba(255,255,255,.45);
  font-size: var(--fs-xs);
}
.footer__legal a:hover { color: var(--c-cyan); }

/* ── Cookie banner ────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  width: calc(100% - 3rem);
  max-width: 620px;
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--sh-xl);
}
.hc .cookie-banner { background: #111; border-color: #fff; }

.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cookie-banner__inner p {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  line-height: 1.5;
  min-width: 200px;
}
.cookie-banner__inner strong {
  display: block;
  color: var(--c-text);
  font-size: var(--fs-base);
  margin-bottom: .25rem;
}
.hc .cookie-banner__inner p  { color: #ccc; }
.hc .cookie-banner__inner strong { color: #fff; }

.cookie-banner__actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}

/* ── Steps (3 pasos) ──────────────────────────────────────── */
/* Modo por defecto / sin JS / reduced-motion: grid normal ──── */
.steps__pin { position: relative; }
.steps__viewport { padding-top: 1rem; }

.steps--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  padding: 0 1.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}
.steps--3::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(16.67% + 20px);
  right: calc(16.67% + 20px);
  height: 3px;
  background: var(--grad-brand);
  border-radius: 2px;
  z-index: 0;
}
.hc .steps--3::before { background: #00e5ff; }

/* Modo "pin": pasos en fila, se desplazan en horizontal con el
   scroll vertical — encaja bien con su naturaleza secuencial
   (1 → 2 → 3). ──────────────────────────────────────────────── */
.steps__pin.is-pinned { overflow: visible; }

.is-pinned .steps__viewport {
  position: sticky;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 0;
}

.is-pinned .steps--3 {
  display: flex;
  flex-wrap: nowrap;
  max-width: none;
  margin: 0;
  padding-left: max(1.5rem, calc((100vw - var(--max-w)) / 2));
  /* Tarjetas mucho más grandes (ver abajo) ya generan de sobra recorrido
     natural — no hace falta un margen final grande como en equipo. */
  padding-right: 6rem;
  will-change: transform;
}
.is-pinned .steps--3::before { display: none; }

/* Cada paso ocupa casi toda la pantalla, como una diapositiva — con solo
   3 pasos, un ancho modesto apenas se movía y el efecto pasaba
   desapercibido ("queda ridículo"). Así el recorrido y el efecto de
   profundidad se notan de verdad. */
.is-pinned .step {
  flex: 0 0 clamp(560px, 78vw, 900px);
}
.is-pinned .step__bubble {
  width: 140px;
  height: 140px;
  margin-bottom: 2rem;
}
.is-pinned .step__bubble svg {
  width: 56px;
  height: 56px;
}
.is-pinned .step__number {
  width: 40px;
  height: 40px;
  top: -8px;
  right: -8px;
  font-size: var(--fs-base);
}
.is-pinned .step__title {
  font-size: var(--fs-3xl);
  margin-bottom: 1rem;
}
.is-pinned .step__desc {
  font-size: var(--fs-lg);
  max-width: 420px;
}
/* El JS controla transform/opacity para el efecto de profundidad;
   evita que el hover (translateY) compita con esa animación. */
.is-pinned .step:hover { transform: none; }

/* ── Barra de progreso de las secciones "pin" ─────────────────
   Compartida por equipo, "cómo funciona" y "¿por qué VetHomy?".
   Solo tiene sentido visualmente cuando `.is-pinned` está activo;
   el JS ya solo actualiza su ancho en ese modo. ────────────────── */
.pin-progress {
  display: none;
}
.is-pinned .pin-progress {
  display: block;
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.25rem;
  height: 4px;
  background: rgba(128, 132, 150, .3);
  border-radius: 2px;
  overflow: hidden;
  z-index: 3;
}
.pin-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--grad-brand);
  border-radius: 2px;
}
.hc .pin-progress { background: rgba(255,255,255,.25); }
.hc .pin-progress__bar { background: var(--c-cyan); }

/* Tarjetas dentro de una sección "pin": el JS anima su propio
   transform/opacity (efecto de profundidad tipo coverflow) — que la
   transición sea suave y que la escala crezca desde el centro. */
.is-pinned .why-card,
.is-pinned .team-card,
.is-pinned .step {
  transition: transform 120ms ease, opacity 120ms ease;
  transform-origin: center center;
}
.is-pinned .team-card:hover { transform: none; }

/* ── Capítulo (transición a pantalla completa) ─────────────── */
.chapter {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--c-navy);
  padding: 5rem 0;
}
.hc .chapter { background: #000; }

.chapter__eyebrow {
  color: var(--c-cyan);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 1rem;
}
.hc .chapter__eyebrow { color: #00e5ff; }

.chapter__title {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.15;
}

@media (max-width: 768px) {
  .chapter { min-height: 45vh; padding: 4rem 0; }
}

/* ── Equipo ───────────────────────────────────────────────── */
.team {
  padding: 6.5rem 0;
  background: var(--c-bg);
}
.hc .team { background: #0a0a0a; }

/* ── Modo por defecto / sin JS / reduced-motion: grid normal ─── */
.team__pin { position: relative; }

.team__viewport { padding-top: 1rem; }

.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.25rem;
  padding: 0 1.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ── Modo "pin": tarjetas en fila que se desplazan en horizontal
   mientras el usuario hace scroll vertical (activado solo por JS,
   en pantallas anchas y si el usuario no pide menos movimiento). ── */
.team__pin.is-pinned { overflow: visible; }

.is-pinned .team__viewport {
  position: sticky;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
}

.is-pinned .team__header { flex: none; }

.is-pinned .team__grid {
  display: flex;
  flex-wrap: nowrap;
  max-width: none;
  margin: 0;
  padding-left: max(1.5rem, calc((100vw - var(--max-w)) / 2));
  /* Margen final generoso: garantiza un recorrido horizontal largo aunque
     las tarjetas quepan casi todas en pantallas anchas (efecto "wow",
     no un desplazamiento de unos pocos px). */
  padding-right: 32vw;
  will-change: transform;
}

.is-pinned .team-card {
  flex: 0 0 clamp(340px, 40vw, 480px);
}

.team-card {
  text-align: center;
  /* Tarjetas más altas (pedido en reunión 2026-07-06): más aire arriba
     y abajo, y un avatar más grande — también deja más hueco para
     cuando lleguen las fotos reales del equipo. */
  padding: 2.75rem 1.75rem 2.25rem;
  background: var(--c-bg-alt);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  touch-action: manipulation;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--c-cyan);
}
.hc .team-card { background: #111; border-color: #555; }
.hc .team-card:hover { border-color: #00e5ff; }

.team-card__avatar {
  width: 104px; height: 104px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  font-weight: 900;
  color: #fff;
  /* Color plano, sin degradado — mismo criterio de minimalismo aplicado
     al resto de iconos del sitio (why-card, step__bubble, servicio). */
  background: var(--c-navy);
}
.team-card__avatar--brand  { background: var(--c-navy); }
.team-card__avatar--cyan   { background: var(--c-cyan-deep); }
.team-card__avatar--pink   { background: var(--c-pink-deep); }
.team-card__avatar--purple { background: var(--c-purple); }
.hc .team-card__avatar { background: var(--c-cyan); color: #000; }

.team-card__name {
  font-size: var(--fs-lg);
  font-weight: 900;
  color: var(--c-navy);
  margin-bottom: .15rem;
}
.hc .team-card__name { color: #00e5ff; }

.team-card__role {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--c-pink);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .75rem;
}
.hc .team-card__role { color: #ff69b4; }

.team-card__bio {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  line-height: 1.6;
}
.hc .team-card__bio { color: #ccc; }

/* ── Por qué VetHomy (beneficios + accesibilidad) ─────────── */
.why {
  padding: 6.5rem 0;
  background: var(--c-navy);
  /* Importante: SIN overflow:hidden aquí — rompe el position:sticky del
     efecto "pin" horizontal (.is-pinned .why__viewport). El degradado
     decorativo de abajo (::before) no necesita el recorte: ya está
     encajado con inset:0 dentro de este mismo contenedor. Si hace falta
     recortar algo en el futuro, hazlo en un envoltorio interno propio,
     no aquí. */
  position: relative;
}
.hc .why { background: #000; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }

.why::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Atenuado (antes .18/.12) — menos elemento decorativo compitiendo con
     el contenido, más "espacio en blanco" visual pedido por el cliente. */
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,201,232,.11) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(245,24,122,.08) 0%, transparent 55%);
  pointer-events: none;
}

.why__title    { color: #fff; }
.why__subtitle { color: rgba(255,255,255,.7); }
.hc .why__title { color: #00e5ff; }
.hc .why__subtitle { color: #ccc; }

/* Modo por defecto / sin JS / reduced-motion: grid normal ──── */
.why__pin { position: relative; }
.why__viewport { padding-top: 1rem; }

/* 3 bloques (ClickUp 86camyu00/01/02) — mismo tratamiento "diapositiva"
   con paralax en el icono que .steps--3 en "¿Cómo funciona?" (pedido
   cliente 2026-07-10), adaptado a fondo navy: línea de conexión igual,
   pero el círculo del icono usa blanco translúcido en vez de navy
   plano (que sería invisible sobre este fondo). */
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  padding: 0 1.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.why__grid::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(16.67% + 20px);
  right: calc(16.67% + 20px);
  height: 3px;
  background: var(--grad-brand);
  border-radius: 2px;
  z-index: 0;
}
.hc .why__grid::before { background: #00e5ff; }

/* Modo "pin": tarjetas en fila, se desplazan en horizontal con el
   scroll vertical (mismo mecanismo que el equipo, ver JS
   bindPinnedHorizontalScroll). ─────────────────────────────── */
.why__pin.is-pinned { overflow: visible; }

.is-pinned .why__viewport {
  position: sticky;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 0;
}

.is-pinned .why__grid {
  display: flex;
  flex-wrap: nowrap;
  max-width: none;
  margin: 0;
  padding-left: max(1.5rem, calc((100vw - var(--max-w)) / 2));
  padding-right: 6rem;
  will-change: transform;
}
.is-pinned .why__grid::before { display: none; }

/* Con solo 3 bloques, tarjetas grandes tipo diapositiva — igual que
   .is-pinned .step, si no el recorrido de scroll pasa desapercibido. */
.is-pinned .why-card {
  flex: 0 0 clamp(560px, 78vw, 900px);
  /* Mantiene la misma intensidad en las tres tarjetas; el efecto de
     profundidad conserva la escala, pero no atenúa las laterales. */
  opacity: 1 !important;
}

.why-card {
  text-align: center;
  padding: 2rem 1.25rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  transition: background var(--t), transform var(--t);
  touch-action: manipulation;
}
.why-card:hover { background: rgba(255,255,255,.13); transform: translateY(-4px); }
.hc .why-card { border-color: rgba(255,255,255,.3); }
.is-pinned .why-card:hover { transform: none; }

.why-card__icon {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  box-shadow: var(--sh-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: #fff;
}
.is-pinned .why-card__icon {
  width: 140px;
  height: 140px;
  margin-bottom: 2rem;
}
.is-pinned .why-card__icon svg {
  width: 56px;
  height: 56px;
}

.why-card__title {
  font-size: var(--fs-base);
  font-weight: 900;
  color: #fff;
  margin-bottom: .5rem;
  line-height: 1.3;
}
.is-pinned .why-card__title {
  font-size: var(--fs-3xl);
  margin-bottom: 1rem;
}

.why-card__desc {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.65);
  line-height: 1.6;
}
.is-pinned .why-card__desc {
  font-size: var(--fs-lg);
  max-width: 480px;
  margin-inline: auto;
}
.hc .why-card__desc { color: #ccc; }

/* ── Opiniones ────────────────────────────────────────────── */
.reviews {
  padding: 6.5rem 0;
  background: var(--c-bg-alt);
}
.hc .reviews { background: #111; }

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.review-card {
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform var(--t), box-shadow var(--t);
  touch-action: manipulation;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.hc .review-card { background: #1a1a1a; border-color: #555; }

.review-card__stars {
  display: flex;
  gap: .2rem;
  color: #f59e0b;
}

.review-card__quote {
  font-size: var(--fs-base);
  color: var(--c-text);
  line-height: 1.7;
  font-style: italic;
  flex: 1;
}
.hc .review-card__quote { color: #e0e0e0; }

.review-card__author {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.review-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 900;
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-card__name {
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--c-navy);
}
.hc .review-card__name { color: #00e5ff; }

.review-card__meta {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.hc .review-card__meta { color: #888; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq {
  padding: 6.5rem 0;
  background: var(--c-bg);
}
.hc .faq { background: #0a0a0a; }

.faq__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.faq__item {
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t);
}
.faq__item:has(.faq__question[aria-expanded="true"]) {
  border-color: var(--c-cyan);
}
.hc .faq__item { border-color: #444; }
.hc .faq__item:has(.faq__question[aria-expanded="true"]) { border-color: #00e5ff; }

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--c-navy);
  cursor: pointer;
  touch-action: manipulation;
  min-height: 56px;
  transition: background var(--t), color var(--t);
}
.faq__question:hover { background: var(--c-cyan-pale); color: var(--c-cyan); }
.faq__question[aria-expanded="true"] { color: var(--c-cyan); }
.hc .faq__question { color: #fff; }
.hc .faq__question:hover { background: #1a1a1a; color: #00e5ff; }
.hc .faq__question[aria-expanded="true"] { color: #00e5ff; }

.faq__arrow {
  flex-shrink: 0;
  transition: transform var(--t);
  color: var(--c-text-muted);
}
.faq__question[aria-expanded="true"] .faq__arrow {
  transform: rotate(180deg);
  color: var(--c-cyan);
}
.hc .faq__question[aria-expanded="true"] .faq__arrow { color: #00e5ff; }

.faq__answer {
  padding: 0 1.5rem 1.25rem;
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  line-height: 1.75;
}
.faq__answer[hidden] { display: none; }
.hc .faq__answer { color: #ccc; }

/* ── Trabaja con nosotros ─────────────────────────────────── */
/* Trabaja con nosotros: 5 secciones con ritmo navy/claro/blanco, igual
   que en la home, para evitar el efecto "todo azul" monótono. */
.wwu-hero,
.wwu-challenge,
.wwu-points-band,
.wwu-closing-band,
.wwu-apply {
  padding: 6.5rem 0;
  position: relative;
}
.wwu-hero         { background: var(--c-navy); }
.wwu-challenge    { background: var(--c-bg-alt); }
.wwu-points-band  { background: var(--c-bg); }
.wwu-closing-band { background: var(--c-navy); }
.wwu-apply        { background: var(--c-bg-alt); }

.hc .wwu-hero         { background: #111; }
.hc .wwu-challenge    { background: #111; }
.hc .wwu-points-band  { background: #0a0a0a; }
.hc .wwu-closing-band { background: #000; }
.hc .wwu-apply        { background: #111; }

.wwu-hero .section-title { color: #fff; }
.wwu-hero .section-subtitle { color: rgba(255,255,255,.75); }
.hc .wwu-hero .section-title { color: #00e5ff; }
.hc .wwu-hero .section-subtitle { color: #ccc; }

.wwu__intro,
.wwu__closing {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: rgba(255,255,255,.85);
}
.hc .wwu__intro,
.hc .wwu__closing { color: #fff; }

.wwu__block {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: var(--c-text-muted);
}

.wwu__intro p,
.wwu__block p,
.wwu__closing p { margin-bottom: 1.25rem; }
.wwu__intro p { font-size: var(--fs-lg); }

.wwu__block-title {
  font-size: var(--fs-xl);
  color: var(--c-navy);
  margin-bottom: 1.25rem;
}
.hc .wwu__block-title { color: var(--c-text); }

.wwu__closing h2 {
  font-size: var(--fs-xl);
  color: #fff;
  margin-bottom: 1.25rem;
}
.wwu__closing h3 {
  font-size: var(--fs-lg);
  color: #fff;
  margin: 2rem 0 .5rem;
}
.hc .wwu__closing h2,
.hc .wwu__closing h3 { color: #00e5ff; }

.wwu__points-title {
  text-align: center;
  color: var(--c-navy);
  font-size: var(--fs-xl);
  margin-bottom: 2.5rem;
}
.hc .wwu__points-title { color: var(--c-text); }

.wwu__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: var(--max-w);
  margin: 0 auto;
}

.wwu-point {
  text-align: center;
  padding: 2rem 1.25rem;
  background: var(--c-bg-alt);
  border: 1px solid rgba(2,46,72,.08);
  border-radius: var(--r-lg);
  transition: background var(--t), transform var(--t);
}
.wwu-point:hover { background: #eef2fc; transform: translateY(-4px); }
.hc .wwu-point { background: #1a1a1a; border-color: rgba(255,255,255,.3); }

/* Chip circular navy con icono blanco — mismo tratamiento que
   .step__bubble, apropiado para tarjetas sobre fondo claro. */
.wwu-point__icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: var(--sh-lg);
}
.hc .wwu-point__icon { background: #00e5ff; color: #000; }

.wwu-point__title {
  color: var(--c-navy);
  font-size: var(--fs-base);
  font-weight: 700;
  margin-bottom: .5rem;
}
.hc .wwu-point__title { color: #fff; }

.wwu-point__desc { color: var(--c-text-muted); font-size: var(--fs-sm); }
.hc .wwu-point__desc { color: #ccc; }

.wwu__form { max-width: 640px; margin: 0 auto; }

/* ── WhatsApp FAB ─────────────────────────────────────────── */
/* Abajo-izquierda: Marina (chatbot) ocupa la derecha, ver más abajo. */
.whatsapp-fab {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 400;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  background: #25D366;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
  border-radius: var(--r-pill);
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
  touch-action: manipulation;
  min-height: 52px;
}
.whatsapp-fab:hover {
  background: #1ebe5a;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(37,211,102,.5);
  color: #fff;
  text-decoration: none;
}
.hc .whatsapp-fab { background: #00cc55; border: 2px solid #fff; }

/* WhatsApp link inline */
.whatsapp-link { color: #25D366; font-weight: 700; }
.whatsapp-link:hover { color: #1ebe5a; }

/* ── Responsive ───────────────────────────────────────────── */

/* Tablet grande */
@media (max-width: 1200px) {
  .team__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  /* En tablet/móvil hay swipe táctil de sobra para el carrusel, así que
     se ocultan las flechas (menos elementos compitiendo en pantallas
     pequeñas). */
  .hero__carousel-btn { display: none; }

  .calendar { grid-template-columns: 1fr; }

  .steps--3 { grid-template-columns: 1fr; }
  .steps--3::before { display: none; }
  .why__grid { grid-template-columns: 1fr; }
  .why__grid::before { display: none; }
  .service-card--hero { grid-template-columns: 1fr; }
  .pricing__category-cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .pricing-card--featured { transform: none; }
  .pricing-card--featured:hover { transform: translateY(-4px); }
  .footer__inner  { grid-template-columns: 1fr; }
  .footer__brand  { text-align: center; }
  .footer__logo-text { justify-content: center; }
  .reviews__grid  { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  .team__grid  { grid-template-columns: repeat(2, 1fr); }
  .wwu__points { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet pequeña / móvil */
@media (max-width: 768px) {
  :root { --h-header: 64px; }

  .header__logo-icon { height: 38px; }
  .hero__carousel { height: 74vh; min-height: 420px; }
  .section-title { font-size: var(--fs-2xl); }

  /* Menú hamburguesa: la barra navy de la fila inferior se colapsa (sin
     display:none, que rompería el position:fixed del #nav-menu) y el
     menú vuelve a ser el desplegable de siempre, con texto oscuro sobre
     fondo claro en vez del blanco de la barra navy de escritorio. */
  .header__navbar { height: 0; overflow: visible; background: none; }

  .nav__toggle { display: flex; }
  .nav__cta    { display: none; }

  .nav__menu {
    display: none;
    position: fixed;
    top: calc(var(--h-a11y) + var(--h-header));
    left: 0; right: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    flex-direction: column;
    padding: 1rem;
    gap: .25rem;
    box-shadow: var(--sh-lg);
    z-index: 99;
  }
  .hc .nav__menu { background: #111; border-color: #fff; }
  .nav__menu.open { display: flex; }

  .nav__link {
    color: var(--c-text);
    font-size: var(--fs-base);
    padding: .75rem 1rem;
    border-radius: 8px;
  }
  .nav__link:hover { background: var(--c-cyan-pale); }
  .hc .nav__link { color: #fff; }
  .hc .nav__link:hover { background: #222; color: #00e5ff; }

  .steps { grid-template-columns: 1fr; }

  /* Más espacio en blanco en desktop (6.5rem) es demasiado en móvil —
     mobile-first: recorta el padding vertical de las secciones de
     contenido para no alargar el scroll innecesariamente. */
  .calendar-section,
  .services,
  .how-it-works,
  .pricing,
  .team,
  .why,
  .reviews,
  .faq,
  .wwu-hero,
  .wwu-challenge,
  .wwu-points-band,
  .wwu-closing-band,
  .wwu-apply {
    padding: 4.5rem 0;
  }

  .footer__nav  { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer__bottom-inner { flex-direction: column; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 1.5rem; }
  .why__grid  { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .wwu__points { grid-template-columns: 1fr; }
  .calendar__slots-grid { grid-template-columns: repeat(3, 1fr); }
  .whatsapp-fab span { display: none; }
  .whatsapp-fab { padding: .85rem; border-radius: 50%; }
}

/* Móvil pequeño */
@media (max-width: 480px) {
  .hero__carousel { height: 68vh; min-height: 380px; }
  .pricing__category-cards { grid-template-columns: 1fr; }
  .cookie-banner__actions { width: 100%; justify-content: stretch; }
  .cookie-banner__actions .btn { flex: 1; }
  .calendar__slots-grid { grid-template-columns: repeat(2, 1fr); }
  .calendar__days { gap: .25rem; }
}

/* ── Touch / Cordova improvements ─────────────────────────── */
@media (hover: none) {
  .service-card:hover,
  .why-card:hover,
  .team-card:hover,
  .review-card:hover,
  .pricing-card:hover,
  .step:hover {
    transform: none;
    box-shadow: none;
  }
  .btn--primary:hover,
  .btn--outline-brand:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Safe area insets for notched devices (Cordova) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .whatsapp-fab {
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
    left: calc(1.5rem + env(safe-area-inset-left));
  }
  .footer { padding-bottom: env(safe-area-inset-bottom); }

  .cbot-launcher {
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
    right: calc(1.5rem + env(safe-area-inset-right));
  }
}

/* ============================================================
   Chatbot "Marina" — asistente virtual de VetHomy
   Lanzador abajo-derecha (no choca con el FAB de WhatsApp, que
   queda abajo-izquierda).
   ============================================================ */

/* ── Lanzador ─────────────────────────────────────────────── */
.cbot-launcher {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 450;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.25rem .75rem .85rem;
  background: var(--c-btn-fuchsia);
  color: #fff;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 800;
  border: none;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 20px rgba(250, 50, 127, .35);
  transition: transform var(--t), box-shadow var(--t);
  touch-action: manipulation;
  min-height: 52px;
}
.cbot-launcher:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(250, 50, 127, .45);
}
.cbot-launcher__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .22);
  border-radius: 50%;
  overflow: hidden;
}
.cbot-launcher__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.cbot-launcher svg { display: block; }
.hc .cbot-launcher {
  background: #000;
  color: #fff;
  border: 2px solid var(--c-cyan);
}
.hc .cbot-launcher__icon { background: var(--c-cyan); color: #000; }

/* ── Panel ────────────────────────────────────────────────── */
.cbot-panel {
  position: fixed;
  bottom: 6.5rem;
  right: 1.5rem;
  z-index: 460;
  width: min(380px, calc(100vw - 3rem));
  height: min(560px, calc(100vh - 9rem));
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transform-origin: bottom right;
  transition: opacity var(--t), transform var(--t);
  pointer-events: none;
}
.cbot-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cbot-panel[hidden] { display: none; }

/* ── Cabecera ─────────────────────────────────────────────── */
.cbot__header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.1rem;
  background: var(--grad-cyan);
  color: #fff;
}
.cbot__avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: cover;
  display: block;
  background: rgba(255, 255, 255, .2);
  border-radius: 50%;
}
.cbot__title { display: flex; flex-direction: column; line-height: 1.2; }
.cbot__title strong { font-size: var(--fs-base); font-weight: 800; }
.cbot__title span { font-size: var(--fs-xs); opacity: .9; }
.cbot__status::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: .35rem;
  background: #4ade80;
  border-radius: 50%;
  vertical-align: middle;
}
.cbot__close {
  margin-left: auto;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .15);
  border: none;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
}
.cbot__close:hover { background: rgba(255, 255, 255, .3); }
.hc .cbot__header { background: #000; border-bottom: 2px solid var(--c-cyan); }
.hc .cbot__close { background: #222; border: 1px solid #fff; }

/* ── Conversación ─────────────────────────────────────────── */
.cbot__log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--c-bg-alt);
  scroll-behavior: smooth;
}
.cbot__msg { display: flex; flex-direction: column; gap: .3rem; max-width: 85%; }
.cbot__msg--bot  { align-self: flex-start; }
.cbot__msg--user { align-self: flex-end; }

.cbot__bubble {
  padding: .65rem .9rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  border-radius: var(--r-lg);
}
.cbot__msg--bot .cbot__bubble {
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-bottom-left-radius: 6px;
}
.cbot__msg--user .cbot__bubble {
  background: var(--c-navy);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.hc .cbot__msg--bot .cbot__bubble  { background: #111; color: #fff; border-color: #fff; }
.hc .cbot__msg--user .cbot__bubble { background: var(--c-cyan); color: #000; }

/* Indicador "escribiendo…" */
.cbot__bubble--typing { display: inline-flex; gap: 4px; padding: .8rem .9rem; }
.cbot__bubble--typing span {
  width: 7px; height: 7px;
  background: var(--c-text-muted);
  border-radius: 50%;
  animation: cbotBlink 1.2s infinite ease-in-out both;
}
.cbot__bubble--typing span:nth-child(2) { animation-delay: .2s; }
.cbot__bubble--typing span:nth-child(3) { animation-delay: .4s; }
@keyframes cbotBlink {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

/* ── Acciones (CTA) y sugerencias ─────────────────────────── */
.cbot__actions, .cbot__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-self: flex-start;
  max-width: 100%;
}
.cbot__action {
  padding: .55rem .9rem;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: #fff;
  background: var(--c-pink);
  border: none;
  border-radius: var(--r-pill);
  transition: transform var(--t), filter var(--t);
}
.cbot__action:hover { transform: translateY(-2px); filter: brightness(1.05); }
.cbot__chip {
  padding: .5rem .85rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-navy);
  background: var(--c-cyan-pale);
  border: 1px solid var(--c-cyan);
  border-radius: var(--r-pill);
  transition: background var(--t);
}
.cbot__chip:hover { background: var(--c-cyan); color: #fff; }
.hc .cbot__action { background: var(--c-pink); color: #000; border: 2px solid #fff; }
.hc .cbot__chip   { background: #111; color: var(--c-cyan); }

/* ── Pie: formulario + aviso ──────────────────────────────── */
.cbot__form {
  display: flex;
  gap: .5rem;
  padding: .75rem;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
}
.cbot__input {
  flex: 1;
  min-width: 0;
  padding: .7rem .9rem;
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--c-text);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
}
.cbot__input:focus { outline: 3px solid var(--c-cyan); outline-offset: 1px; }
.cbot__send {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--c-cyan);
  border: none;
  border-radius: 50%;
  transition: transform var(--t), filter var(--t);
}
.cbot__send:hover { transform: scale(1.06); filter: brightness(1.05); }
.cbot__disclaimer {
  padding: .4rem 1rem .7rem;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-align: center;
  background: var(--c-bg);
}
.hc .cbot__input { background: #111; color: #fff; border-color: #fff; }
.hc .cbot__send  { background: var(--c-cyan); color: #000; }
.hc .cbot__disclaimer { color: #ccc; }

/* ── Móvil: panel a pantalla casi completa ────────────────── */
@media (max-width: 480px) {
  /* FAB circular limpio (sin texto ni doble círculo) */
  .cbot-launcher {
    width: 56px;
    height: 56px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .cbot-launcher span:not(.cbot-launcher__icon) { display: none; }
  .cbot-launcher__icon {
    /* Antes esto quitaba el tamaño fijo asumiendo un <svg> pequeño de
       icono; ahora el lanzador tiene la foto de Marina (<img>), que sin
       un tamaño explícito aquí se renderizaba a su tamaño natural (se
       veía enorme dentro del botón circular de 56px). El icono debe
       llenar el botón entero, como en el resto de anchos. */
    width: 56px;
    height: 56px;
    background: none;
    border-radius: 50%;
    overflow: hidden;
  }
  .cbot-launcher__icon svg { width: 26px; height: 26px; }
  .cbot-launcher__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  .cbot-panel {
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    transform-origin: bottom center;
  }
}