/* =========================================================
   Bigotes · Sistema de diseño
   ========================================================= */
:root{
  /* Marca */
  --rojo: #e31d24;
  --rojo-600: #c8161c;
  --rojo-50: #fff1f1;
  --rojo-100: #ffe1e1;
  --wa: #25d366;
  --wa-600: #1ebe5a;

  /* Neutros */
  --tinta: #0f172a;
  --tinta-2: #334155;
  --gris: #64748b;
  --borde: #e8e5e1;
  --fondo: #fffaf6;
  --blanco: #ffffff;

  /* Tipografía */
  --fuente: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Escala tipográfica: un tamaño por grupo */
  --fs-display: clamp(2.3rem, min(3.4vw + 1rem, 7.2vh), 3.9rem);  /* Título principal de cada página (h1) */
  --fs-h2: clamp(1.85rem, 1.8vw + 1rem, 2.6rem);                  /* Títulos de sección */
  --fs-h3: 1.3rem;                                                 /* Títulos de tarjetas y bloques */
  --fs-h4: 1.05rem;                                                /* Subtítulos pequeños (preguntas, pasos de la ficha) */
  --fs-lead: 1.125rem;                                             /* Párrafo de introducción bajo un título */
  --fs-body: 1rem;                                                 /* Párrafos y listas */
  --fs-sm: .92rem;                                                 /* Menú, etiquetas, datos de contacto, formularios */
  --fs-xs: .8rem;                                                  /* Etiquetas en mayúscula, notas y textos legales */

  /* Radios y sombras */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --sombra-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
  --sombra-md: 0 10px 30px -12px rgba(15,23,42,.18);
  --sombra-lg: 0 30px 60px -20px rgba(15,23,42,.25);

  --ancho: 1180px;
  --ancho-marca: 320px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Base */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 100px; }
body{
  margin: 0;
  font-family: var(--fuente);
  color: var(--tinta-2);
  background: var(--fondo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width: 100%; display: block; }
[hidden]{ display: none !important; }
h1, h2, h3, h4{ color: var(--tinta); margin: 0; line-height: 1.12; letter-spacing: -.025em; font-weight: 800; }
p{ margin: 0 0 1rem; }
a{ color: inherit; }
:focus-visible{ outline: 3px solid rgba(227,29,36,.45); outline-offset: 3px; border-radius: 6px; }
::selection{ background: var(--rojo-100); color: var(--tinta); }

.contenedor{ width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.seccion{ padding: 104px 0; }
#servicios{ padding-top: 56px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Encabezados de sección */
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
 font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rojo); margin-bottom: 14px;
}
.eyebrow::before{ content:""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.sub-seccion{ color: var(--gris); max-width: 56ch; margin: 16px 0 0; }
.cabecera-seccion{ margin-bottom: 56px; }
.cabecera-seccion.centro{ text-align: center; }
.cabecera-seccion.centro .sub-seccion{ margin-left: auto; margin-right: auto; }

/* =========================================================
   Botones
   ========================================================= */
.btn{
  --pad-y: 14px; --pad-x: 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 9999px; border: 1px solid transparent;
  font: 700 1rem/1 var(--fuente); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn i{ font-size: 1.15em; }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-sm{ --pad-y: 10px; --pad-x: 18px; }
.btn-lg{ --pad-y: 18px; --pad-x: 30px; }

.btn-wa{ background: var(--wa); color: #fff; box-shadow: 0 10px 24px -10px rgba(37,211,102,.7); }
.btn-wa:hover{ background: var(--wa-600); color: #fff; box-shadow: 0 16px 30px -12px rgba(37,211,102,.8); }
.btn-rojo{ background: var(--rojo); color: #fff; box-shadow: 0 10px 24px -10px rgba(227,29,36,.6); }
.btn-rojo:hover{ background: var(--rojo-600); color: #fff; }
.btn-claro{ background: var(--blanco); color: var(--tinta); border-color: var(--borde); }
.btn-claro:hover{ border-color: var(--tinta); color: var(--tinta); }
.btn-flecha i{ transition: transform .2s var(--ease); }
.btn-flecha:hover i{ transform: translateX(4px); }

/* =========================================================
   Encabezado
   ========================================================= */

.encabezado{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--borde);
  transition: box-shadow .3s var(--ease), background-color .3s;
}
.encabezado.con-sombra{ box-shadow: 0 8px 30px -12px rgba(15,23,42,.15); background: rgba(255,255,255,.95); }
.nav{
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  min-height: 92px; padding: 10px 0;
  transition: min-height .3s var(--ease);
}
.encabezado.con-sombra .nav{ min-height: 72px; }
.encabezado.con-sombra .logo{ height: 54px; }
/* El logo comparte ancho con la etiqueta del hero para quedar centrado sobre ella */
.marca{ display: inline-flex; align-items: center; justify-content: center; width: var(--ancho-marca); }
.logo{ height: 70px; width: auto; transition: transform .25s var(--ease), height .3s var(--ease); }
.marca:hover .logo{ transform: rotate(-3deg) scale(1.04); }

.menu{ display: flex; justify-content: flex-end; gap: 4px; margin-right: 8px; }
.menu .enlace{
  position: relative; padding: 10px 18px; border-radius: 9999px;
  color: var(--tinta-2); font-weight: 600; text-decoration: none;
  transition: color .2s, background-color .2s;
}
.menu .enlace:hover{ color: var(--tinta); background: rgba(15,23,42,.05); }
.menu .enlace.activo{ color: var(--rojo); background: var(--rojo-50); }

/* Hamburguesa (checkbox) */
#alternar-menu{ display: none; }
.boton-menu{ display: none; width: 46px; height: 46px; border-radius: 9999px; background: var(--fondo); border: 1px solid var(--borde); cursor: pointer; align-items:center; justify-content:center; }
.boton-menu span, .boton-menu span::before, .boton-menu span::after{ display:block; width: 18px; height: 2px; border-radius: 2px; background: var(--tinta); position: relative; transition: .25s var(--ease); }
.boton-menu span::before, .boton-menu span::after{ content:""; position:absolute; left:0; }
.boton-menu span::before{ top: -6px; }
.boton-menu span::after{ top: 6px; }
#alternar-menu:checked + .boton-menu span{ background: transparent; }
#alternar-menu:checked + .boton-menu span::before{ top: 0; transform: rotate(45deg); }
#alternar-menu:checked + .boton-menu span::after{ top: 0; transform: rotate(-45deg); }
.menu-responsive{ display: none; }

/* =========================================================
   Hero
   ========================================================= */
/* La portada se ajusta al alto de la pantalla (menos el menú) */
.hero{
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: calc(100vh - 93px); min-height: calc(100svh - 93px);
  padding: clamp(12px, 2.2vh, 36px) 0 clamp(40px, 8vh, 110px);
}
.hero::before{
  content:""; position:absolute; inset: -40% -10% auto auto; width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(227,29,36,.13), transparent 70%); pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset: auto auto -30% -15%; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(56,189,248,.12), transparent 70%); pointer-events:none;
}
.hero-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.chip{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: var(--ancho-marca);
  padding: 7px 14px 7px 8px; border-radius: 9999px;
  background: var(--blanco); border: 1px solid var(--borde); box-shadow: var(--sombra-sm);
 font-weight: 600; color: var(--tinta-2);
}
.chip .chip-icono{ width: 26px; height: 26px; border-radius: 9999px; display:inline-flex; align-items:center; justify-content:center; background: var(--rojo-50); color: var(--rojo); font-size: .8rem; }
.hero-titulo{ line-height: 1.02; letter-spacing: -.04em; margin: clamp(14px, 2.4vh, 22px) 0; }
.resaltado{ position: relative; color: var(--rojo); white-space: nowrap; }
.resaltado svg{ position:absolute; left: 0; bottom: -.18em; width: 100%; height: .35em; overflow: visible; }
.resaltado svg path{ stroke: var(--rojo); stroke-width: 6; fill: none; stroke-linecap: round; opacity: .35; stroke-dasharray: 400; stroke-dashoffset: 400; animation: trazo 1.2s .5s var(--ease) forwards; }
@keyframes trazo{ to{ stroke-dashoffset: 0; } }
.hero-sub{ color: var(--gris); max-width: 50ch; margin-bottom: clamp(20px, 3.6vh, 34px); }
.hero-cta{ display: flex; flex-wrap: wrap; gap: 12px; }
.hero-confianza{ display: flex; flex-wrap: wrap; gap: 10px 22px; margin: clamp(18px, 3.4vh, 34px) 0 0; padding: 0; list-style: none; }
.hero-confianza li{ display:inline-flex; align-items:center; gap: 8px; font-weight: 600; color: var(--tinta-2); }
.hero-confianza i{ color: var(--wa); }

.hero-visual{ position: relative; width: min(100%, 66vh); justify-self: center; }
.hero-marco{
  position: relative; aspect-ratio: 1 / 1; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  background: linear-gradient(145deg, #ffe4e4 0%, #fff5ec 55%, #e0f2fe 100%);
  display:flex; align-items:center; justify-content:center; padding: 3%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.hero-marco img{ width: 100%; height: auto; transform: scale(1.06); filter: drop-shadow(0 24px 32px rgba(15,23,42,.14)); }
/* Las cajas flotantes van en las esquinas libres del círculo, fuera del dibujo */
.flotante{
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--borde); border-radius: 14px;
  padding: 10px 14px 10px 10px; box-shadow: var(--sombra-md);
  animation: flotar 6s ease-in-out infinite;
  white-space: nowrap;
}
.flotante strong{ display:block; color: var(--tinta); line-height: 1.2; }
.flotante small{ color: var(--gris); }
.flotante-icono{ width: 36px; height: 36px; border-radius: 10px; display:flex; align-items:center; justify-content:center; font-size: .95rem; }
.flotante-1{ top: -1%; left: -8%; }
.flotante-1 .flotante-icono{ background: var(--rojo-50); color: var(--rojo); }
.flotante-2{ bottom: -11%; right: 4%; animation-delay: -3s; }
.flotante-2 .flotante-icono{ background: #dcfce7; color: #16a34a; }
@keyframes flotar{ 50%{ transform: translateY(-10px); } }

/* Franja de cobertura: bloque propio, separado del hero */
.cinta{ position: relative; padding: 56px 0 0; }
.cinta-caja{
  display: flex; align-items: center; gap: 0;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-lg);
  box-shadow: var(--sombra-md); padding: 10px; overflow: hidden;
}
.cinta-label{
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 6px 22px 6px 8px; margin-right: 6px; border-right: 1px solid var(--borde);
}
.cinta-label-icono{ width: 44px; height: 44px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: var(--rojo); color: #fff; font-size: 1.05rem; box-shadow: 0 8px 18px -8px rgba(227,29,36,.7); }
.cinta-label strong{ display: block; color: var(--tinta); font-weight: 800; line-height: 1.2; }
.cinta-label small{ display: block; color: var(--gris); font-weight: 600; letter-spacing: .02em; }
.cinta-pista{ overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cinta-items{ display: inline-flex; gap: 10px; padding: 4px 10px 4px 0; margin: 0; list-style: none; white-space: nowrap; animation: desliza 36s linear infinite; }
.cinta-items li{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 9999px;
  background: var(--fondo); border: 1px solid var(--borde);
  color: var(--tinta); font-weight: 600;
}
.cinta-items li::before{ content:""; width: 7px; height: 7px; border-radius: 9999px; background: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-100); }
.cinta-caja:hover .cinta-items{ animation-play-state: paused; }
/* Pocos sectores: etiquetas fijas, sin desplazamiento */
.cinta-consulta{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; margin: 0 12px 0 8px; color: var(--rojo); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; }
.cinta-consulta i{ transition: transform .2s var(--ease); }
.cinta-consulta:hover{ color: var(--rojo-600); }
.cinta-consulta:hover i{ transform: translateX(4px); }
.cinta-items.cinta-fija{ animation: none; flex: 1; display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 8px 4px 16px; white-space: normal; }
@keyframes desliza{ to{ transform: translateX(-50%); } }

/* =========================================================
   Servicios
   ========================================================= */
/* Tarjetas de resumen en formato horizontal compacto (el detalle está más abajo) */
.grid-servicios{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#servicios .cabecera-seccion{ margin-bottom: 40px; }
.servicio{
  position: relative; display: grid; grid-template-columns: 42% 1fr; gap: 0;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: 10px; box-shadow: var(--sombra-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.servicio:hover{ transform: translateY(-4px); box-shadow: var(--sombra-md); border-color: transparent; }
.servicio-media{
  position: relative; border-radius: calc(var(--r-lg) - 6px); overflow: hidden; min-height: 210px;
  background: #eef6f7; border: 1px solid rgba(15,23,42,.04);
}
.servicio-azul .servicio-media{ background: #c9dbfc; }
.servicio-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 61% center; display: block; }
.servicio-azul .servicio-media img{ object-position: 45% center; }

.servicio-cuerpo{ padding: 14px 12px 8px 22px; display:flex; flex-direction:column; }
.servicio-encabezado{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.servicio-icono{ flex: 0 0 48px; height: 48px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: var(--rojo-50); color: var(--rojo); font-size: 1.15rem; }
.servicio-azul .servicio-icono{ background: #e0eaff; color: #4f6ef0; }
.servicio-categoria{ display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 2px; }
.servicio h3{ margin: 0; }
.servicio-desc{ color: var(--gris); margin-bottom: 16px; }
.servicio-acciones{ margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borde); display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; }
.servicio-acciones .btn{ --pad-y: 11px; --pad-x: 18px; font-size: var(--fs-sm); }
.servicio .servicio-icono{ flex-basis: 42px; height: 42px; font-size: 1rem; }
.enlace-flecha{ display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; transition: color .2s; }
.enlace-flecha i{ transition: transform .2s var(--ease); }
.enlace-flecha:hover{ color: var(--rojo); }
.enlace-flecha:hover i{ transform: translateX(4px); }

/* Secciones de detalle de cada servicio (imagen + texto) */
.seccion-blanca{ background: var(--blanco); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
#veterinaria, #peluqueria{ padding: 80px 0; }
.detalle-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.detalle-grid:has(.detalle-media-cuadrada){ grid-template-columns: 380px 1fr; }
.detalle-invertido .detalle-media{ order: 2; }
.detalle-media{
  border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 10;
  background: #eef6f7; border: 1px solid var(--borde); box-shadow: var(--sombra-md);
}
.detalle-media-azul{ background: #c9dbfc; }
.detalle-media-cuadrada{ aspect-ratio: 1 / 1; background: #fff; max-width: 380px; justify-self: center; width: 100%; }
.detalle-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.detalle-texto .sub-seccion{ margin: 12px 0 18px; }
/* Lista en dos columnas y sectores en formato compacto */
.detalle-texto .lista-check{ grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0 0 18px; }
.detalle-texto .cobertura{ padding: 12px 16px; margin-bottom: 22px; }
.detalle-texto .cobertura p{ margin: 0; display: inline; }
.detalle-texto .cobertura p + p::before{ content: " · "; }
.eyebrow-azul{ color: #4f6ef0; }
.detalle-acciones{ display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
#tarifas, #modalidades{ margin-top: 48px; }

/* Aviso dentro de la tarjeta de peluquería que lleva a las modalidades */
.aviso-modalidades{
  display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
  padding: 14px 16px; border-radius: var(--r-md); text-decoration: none;
  background: #eef3ff; border: 1px solid #d6e2ff; transition: background-color .2s, border-color .2s;
}
.aviso-modalidades:hover{ background: #e3ebff; border-color: #bccfff; }
.aviso-modalidades-icono{ flex: 0 0 40px; height: 40px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: #fff; color: #4f6ef0; }
.aviso-modalidades strong{ display: block; color: var(--tinta); font-size: var(--fs-sm); }
.aviso-modalidades small{ display: block; color: var(--gris); font-size: var(--fs-xs); font-weight: 600; }
.aviso-modalidades-flecha{ margin-left: auto; color: #4f6ef0; animation: rebote 2s ease-in-out infinite; }
@keyframes rebote{ 50%{ transform: translateY(4px); } }

.aviso-rojo{ background: var(--rojo-50); border-color: #fbd0d0; }
.aviso-rojo:hover{ background: var(--rojo-100); border-color: #f6b4b4; }
.aviso-rojo .aviso-modalidades-icono, .aviso-rojo .aviso-modalidades-flecha{ color: var(--rojo); }

/* Tarifas de vacunación */
.tarifas{
  margin-top: 36px; padding: 32px 36px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, #fff1f1 0%, #fff8f4 55%, #f3fbf9 100%);
  border: 1px solid #f6dcdc;
}
.modalidades-etiqueta.etiqueta-roja{ color: var(--rojo); }
.tarifas-grid{ display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 20px; align-items: center; max-width: 920px; margin: 0 auto; }
.tarifa{
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 20px 18px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tarifa:hover{ transform: translateY(-4px); box-shadow: var(--sombra-md); }
.tarifa-icono{ width: 40px; height: 40px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: var(--rojo-50); color: var(--rojo); font-size: 1rem; margin-bottom: 10px; }
.tarifa h4{ font-size: var(--fs-h4); margin-bottom: 4px; }
.tarifa-detalle{ color: var(--gris); font-size: var(--fs-sm); margin: 0; }
.tarifa-precio{ font-size: 1.75rem; font-weight: 800; color: var(--tinta); letter-spacing: -.03em; line-height: 1.1; margin: 6px 0 14px; }
.tarifa-precio small{ font-size: var(--fs-xs); font-weight: 700; color: var(--gris); letter-spacing: .04em; }
.tarifa-destacada{ border: 2px solid var(--rojo); padding: 28px 20px 22px; box-shadow: 0 24px 50px -24px rgba(227,29,36,.45); }
.tarifa-destacada .tarifa-icono{ background: var(--rojo); color: #fff; }
.tarifa-destacada .tarifa-precio{ font-size: 2.15rem; color: var(--rojo); margin-bottom: 6px; }
.tarifa-cinta{
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--rojo); color: #fff; padding: 6px 14px; border-radius: 9999px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 8px 18px -8px rgba(227,29,36,.7);
}
.tarifa-cinta i{ color: #fde047; }
.tarifa-ahorro{ display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 9999px; background: #dcfce7; color: #15803d; font-size: var(--fs-xs); font-weight: 800; }
.tarifas-nota{ display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; margin: 20px 0 0; color: var(--gris); font-size: var(--fs-sm); }
.tarifas-nota i{ color: var(--rojo); }

/* Compromiso social */
.social{ padding: 88px 0 56px; }
.social-caja{
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center;
  padding: 52px 56px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, #fff7e8 0%, #fff1e6 50%, #ffe9e9 100%);
  border: 1px solid #f7dfc8;
}
.social-caja::after{ content: "\f1b0"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: -30px; bottom: -60px; font-size: 14rem; color: rgba(227,29,36,.05); transform: rotate(-18deg); pointer-events: none; }
.social-etiqueta{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 9999px; background: #fff; color: var(--rojo); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; box-shadow: var(--sombra-sm); margin-bottom: 16px; }
.social-texto h2{ font-size: var(--fs-h2); margin-bottom: 14px; }
.social-texto p{ font-size: var(--fs-lead); color: var(--tinta-2); margin: 0 0 10px; max-width: 52ch; }
.social-texto p strong{ color: var(--tinta); }
.social-texto .social-gracias{ font-size: var(--fs-sm); color: var(--gris); margin: 0; }
.social-contador{ position: relative; z-index: 1; background: rgba(255,255,255,.8); border: 1px solid #f3dcc7; border-radius: var(--r-lg); padding: 24px; text-align: center; box-shadow: var(--sombra-sm); }
.social-huellas{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; justify-items: center; }
.social-huellas span{ width: 40px; height: 40px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: #fff3e0; }
.social-huellas svg{ width: 22px; height: 22px; fill: #e59a3a; }
.social-igual{ margin: 12px 0; color: var(--rojo); }
.social-regalo{ display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: var(--r-md); background: var(--rojo); color: #fff; }
.social-regalo-icono{ flex: 0 0 40px; height: 40px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.18); }
.social-regalo strong{ display: block; font-size: var(--fs-sm); }
.social-regalo small{ display: block; font-size: var(--fs-xs); opacity: .85; }

/* --- Animación tierna del compromiso social ---
   whatsapp.js agrega .animar a .social-caja al entrar en pantalla:
   0.1s–1.3s las 10 huellitas se estampan una a una → 1.35s rebota la flecha
   → 1.5s aparece el regalo → desde 1.8s suben corazones sin parar */
.svg-defs{ position: absolute; width: 0; height: 0; overflow: hidden; }
.social-texto, .social-contador{ position: relative; z-index: 1; }
.social-regalo{ position: relative; }

/* Corazón que late en la etiqueta */
.social-etiqueta .latido{ width: 14px; height: 14px; fill: var(--rojo); animation: latido 1.6s ease-in-out infinite; }
@keyframes latido{ 0%, 60%, 100%{ transform: scale(1); } 15%{ transform: scale(1.3); } 30%{ transform: scale(.95); } 45%{ transform: scale(1.18); } }

/* Rastro de patitas caminando por el fondo (se repite) */
.social-rastro{ position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.social-rastro svg{
  position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px;
  fill: rgba(227,29,36,.16); transform: rotate(90deg); opacity: 0;
  animation: pisada 5.4s ease-out var(--d) infinite;
}
@keyframes pisada{
  0%   { opacity: 0; transform: rotate(90deg) scale(1.5); }
  6%   { opacity: 1; transform: rotate(90deg) scale(.92); }
  10%  { transform: rotate(90deg) scale(1); }
  55%  { opacity: 1; }
  75%, 100% { opacity: 0; transform: rotate(90deg) scale(1); }
}

/* Contador: huellitas que se estampan una a una */
.js .social-huellas span{ opacity: .35; }
.js .social-huellas svg{ opacity: 0; transform: scale(1.8) rotate(-20deg); }
.social-caja.animar .social-huellas span{ animation: fondoHuella .35s ease-out both; animation-delay: calc(.1s + var(--i) * .12s); }
.social-caja.animar .social-huellas svg{ animation: estampa .45s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(.1s + var(--i) * .12s); }
@keyframes estampa{
  0%   { opacity: 0; transform: scale(1.8) rotate(-20deg); }
  60%  { opacity: 1; transform: scale(.85) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes fondoHuella{ from{ opacity: .35; } to{ opacity: 1; } }

/* Flecha y regalo */
.social-caja.animar .social-igual i{ animation: rebota .6s ease-in-out 1.35s 2; }
@keyframes rebota{ 50%{ transform: translateY(6px); } }
.js .social-regalo{ opacity: 0; transform: scale(.85); }
.social-caja.animar .social-regalo{ animation: regaloPop .55s cubic-bezier(.34,1.56,.64,1) 1.5s both, regaloBrillo 2.4s ease-in-out 2.1s infinite; }
@keyframes regaloPop{ from{ opacity: 0; transform: scale(.85); } to{ opacity: 1; transform: scale(1); } }
@keyframes regaloBrillo{ 0%, 100%{ box-shadow: 0 0 0 0 rgba(227,29,36,.35); } 50%{ box-shadow: 0 0 0 8px rgba(227,29,36,0); } }
.social-caja.animar .social-regalo-icono i{ animation: regaloSalta 2.4s ease-in-out 2.1s infinite; }
@keyframes regaloSalta{ 0%, 70%, 100%{ transform: none; } 80%{ transform: translateY(-3px) rotate(-8deg); } 90%{ transform: translateY(0) rotate(6deg); } }

/* Corazones que suben desde el regalo */
.social-corazones{ position: absolute; left: 34px; top: 8px; width: 0; height: 0; pointer-events: none; }
.social-corazones svg{ position: absolute; left: -9px; top: -6px; width: 18px; height: 18px; fill: #ff6b81; opacity: 0; }
.social-corazones svg:nth-child(even){ fill: var(--rojo); }
.social-caja.animar .social-corazones svg{ animation: corazonSube 3s ease-out infinite; animation-delay: calc(1.8s + var(--d)); }
@keyframes corazonSube{
  0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
  15%  { opacity: 1; transform: translate(calc(var(--dx) * .3), -18px) scale(var(--s)); }
  70%  { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), -95px) scale(calc(var(--s) * .8)) rotate(12deg); }
}

@media (prefers-reduced-motion: reduce){
  .js .social-huellas span, .js .social-huellas svg, .js .social-regalo{ opacity: 1; transform: none; animation: none !important; }
  .social-rastro, .social-corazones{ display: none; }
}

/* Productos que usamos en el baño (foto real + especificaciones) */
#productos{ margin-top: 48px; }
.productos{
  display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center;
  padding: 22px; border-radius: var(--r-xl); background: var(--blanco); border: 1px solid var(--borde); box-shadow: var(--sombra-sm);
}
.productos-foto{ border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1200 / 1367; background: #3a4150; box-shadow: var(--sombra-md); }
.productos-foto img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.productos-texto{ padding-right: 20px; }
.productos-texto h3{ font-size: var(--fs-h3); margin-bottom: 10px; }
.productos-texto > p{ color: var(--gris); margin-bottom: 16px; }
.productos-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.productos-lista li{ display: flex; gap: 14px; align-items: flex-start; padding: 11px 14px; border-radius: var(--r-md); background: var(--fondo); border: 1px solid var(--borde); }
.productos-lista strong{ display: block; color: var(--tinta); font-size: var(--fs-sm); margin-bottom: 2px; }
.productos-lista span{ display: block; color: var(--gris); font-size: var(--fs-sm); line-height: 1.5; }
.producto-punto{ flex: 0 0 12px; height: 12px; border-radius: 9999px; margin-top: 5px; }
.producto-rojo{ background: #d9372f; box-shadow: 0 0 0 4px #fde2e0; }
.producto-naranjo{ background: #ea7d1f; box-shadow: 0 0 0 4px #fdebd8; }
.producto-verde{ background: #5aa833; box-shadow: 0 0 0 4px #e3f3d8; }
.productos-sellos{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.productos-sellos li{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 9999px; background: #dcfce7; color: #15803d; font-size: var(--fs-xs); font-weight: 700; }

/* Bloque de modalidades de peluquería */
.modalidades{
  margin-top: 36px; padding: 32px 36px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, #eef3ff 0%, #f6f9ff 55%, #fff6f2 100%);
  border: 1px solid #dde6fb;
}
.modalidades-cabecera{ max-width: 680px; margin: 0 auto 24px; text-align: center; }
.modalidades-etiqueta{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 9999px; background: #fff; color: #4f6ef0; font-weight: 700; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; box-shadow: var(--sombra-sm); margin-bottom: 14px; }
.modalidades-cabecera h3{ font-size: var(--fs-h3); margin-bottom: 10px; }
.modalidades-cabecera p{ color: var(--gris); margin: 0; }
.modalidades-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.modalidad{
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 24px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.modalidad:hover{ transform: translateY(-4px); box-shadow: var(--sombra-md); }
.modalidad-destacada{ border-color: #c7d6fd; }
.modalidad-top{ display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 14px; }
.modalidad-icono{ width: 52px; height: 52px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: #e0eaff; color: #4f6ef0; font-size: 1.25rem; }
.modalidad-num{ font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); background: var(--fondo); border: 1px solid var(--borde); padding: 5px 12px; border-radius: 9999px; }
.modalidad h4{ font-size: var(--fs-h3); margin-bottom: 10px; }
.modalidad p{ color: var(--gris); margin-bottom: 14px; }
.modalidad p strong{ color: var(--tinta); }
.modalidad-requisitos{ list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.modalidad-ideal{ display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4f6ef0; margin-bottom: 8px; }
.modalidad-requisitos li{ display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--tinta-2); }
.modalidad-requisitos i{ width: 20px; height: 20px; border-radius: 9999px; display:inline-flex; align-items:center; justify-content:center; background: #dcfce7; color: #16a34a; font-size: .6rem; }
.modalidad .btn{ margin-top: auto; }
.modalidades-nota{ text-align: center; margin: 24px 0 0; color: var(--gris); font-size: var(--fs-sm); }
.modalidades-nota i{ color: #4f6ef0; margin-right: 4px; }
.modalidades-nota a{ color: var(--rojo); font-weight: 700; text-decoration: none; }
.modalidades-nota a:hover{ text-decoration: underline; }
.lista-check{ list-style: none; margin: 4px 0 22px; padding: 0; display: grid; gap: 10px; }
.lista-check li{ display:flex; align-items:flex-start; gap: 12px; color: var(--tinta-2); font-weight: 500; }
.lista-check li::before{
  content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .7rem;
  flex: 0 0 22px; height: 22px; border-radius: 9999px; margin-top: 1px;
  display:inline-flex; align-items:center; justify-content:center; background: #dcfce7; color: #16a34a;
}
.cobertura{ background: var(--fondo); border: 1px dashed #e7d9cf; border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 24px; }
.cobertura strong{ display:flex; align-items:center; gap: 8px; color: var(--tinta); margin-bottom: 6px; }
.cobertura strong i{ color: var(--rojo); }
.cobertura p{ margin: 0 0 4px; }
.cobertura p:last-child{ margin: 0; color: var(--gris); }

/* =========================================================
   Cómo funciona
   ========================================================= */
.seccion-pasos{ background: var(--blanco); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.pasos{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: paso; position: relative; }
/* Línea punteada entre pasos: ::before es la guía gris, ::after el relleno rojo que se dibuja */
.pasos::before, .pasos::after{
  content:""; position:absolute; top: 33px; height: 2px;
  left: calc((100% - 56px) / 6); right: calc((100% - 56px) / 6);
}
.pasos::before{ background: repeating-linear-gradient(90deg, var(--borde) 0 8px, transparent 8px 14px); }
.pasos::after{ background: repeating-linear-gradient(90deg, var(--rojo) 0 8px, transparent 8px 14px); clip-path: inset(0 100% 0 0); }
.paso{ position: relative; z-index: 1; text-align: center; padding: 0 12px; }

/* Animación secuencial (whatsapp.js agrega .animar al entrar en pantalla)
   0.00s paso 1 → 0.30s línea al paso 2 → 0.70s paso 2 → 0.95s línea al paso 3 → 1.35s paso 3 */
.js .pasos .paso{ opacity: 0; transform: translateY(14px); }
.js .pasos .paso .paso-icono{ transform: scale(.6); }
.pasos.animar .paso{ animation: pasoEntra .45s cubic-bezier(.2,.7,.2,1) both; }
.pasos.animar .paso .paso-icono{ animation: iconoEntra .5s cubic-bezier(.34,1.56,.64,1) both; }
.pasos.animar .paso:nth-child(2), .pasos.animar .paso:nth-child(2) .paso-icono{ animation-delay: .7s; }
.pasos.animar .paso:nth-child(3), .pasos.animar .paso:nth-child(3) .paso-icono{ animation-delay: 1.35s; }
.pasos.animar::after{ animation: lineaPasos 1.35s linear .3s both; }
@keyframes pasoEntra{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
@keyframes iconoEntra{ from{ transform: scale(.6); } to{ transform: scale(1); } }
@keyframes lineaPasos{
  0%      { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(.45,0,.25,1); }
  29.6%   { clip-path: inset(0 50% 0 0); }   /* llega al paso 2 (0.70s) */
  48.1%   { clip-path: inset(0 50% 0 0); animation-timing-function: cubic-bezier(.45,0,.25,1); } /* espera la aparición del paso 2 */
  77.8%   { clip-path: inset(0 0 0 0); }     /* llega al paso 3 (1.35s) */
  100%    { clip-path: inset(0 0 0 0); }
}
.paso-icono{
  position: relative; width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 22px;
  display:flex; align-items:center; justify-content:center; font-size: 1.5rem;
  background: var(--blanco); color: var(--rojo); border: 1px solid var(--borde); box-shadow: var(--sombra-md);
}
.paso-icono::after{
  counter-increment: paso; content: counter(paso);
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 9999px;
  background: var(--rojo); color: #fff; font-size: .78rem; font-weight: 800; display:flex; align-items:center; justify-content:center;
  border: 3px solid var(--blanco);
}
.paso h3{ margin-bottom: 8px; }
.paso p{ color: var(--gris); margin: 0 auto; max-width: 30ch; }

/* =========================================================
   Beneficios (bento)
   ========================================================= */
.bento{ display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-auto-rows: minmax(220px, auto); gap: 20px; }
.bento-item{
  position: relative; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: 104px 30px 30px; display:flex; flex-direction:column; justify-content: flex-end;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.bento-item:hover{ transform: translateY(-4px); box-shadow: var(--sombra-md); }
.bento-item h3{ margin-bottom: 8px; }
.bento-item p{ margin: 0; color: var(--gris); }
.bento-icono{ position: absolute; top: 28px; left: 30px; width: 52px; height: 52px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: var(--rojo-50); color: var(--rojo); font-size: 1.25rem; }
.bento-destacado{ grid-row: span 2; background: var(--rojo); border-color: var(--rojo); }
.bento-destacado h3{ color: #fff; }
.bento-destacado p{ color: rgba(255,255,255,.85); }
.bento-destacado .bento-icono{ background: rgba(255,255,255,.16); color: #fff; }
.bento-destacado::after{ content:""; position:absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent); }
.bento-ancho{ grid-column: span 2; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-grid{ display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq-lista{ display: grid; gap: 12px; }
.faq-item{ background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-md); transition: border-color .2s, box-shadow .2s; }
.faq-item[open]{ border-color: #f3c4c4; box-shadow: var(--sombra-sm); }
.faq-item summary{ list-style: none; cursor: pointer; display:flex; justify-content: space-between; align-items:center; gap: 16px; padding: 20px 22px; font-weight: 700; color: var(--tinta); }
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{ content: "+"; flex: 0 0 30px; height: 30px; border-radius: 9999px; display:flex; align-items:center; justify-content:center; background: var(--fondo); color: var(--rojo); font-size: 1.2rem; font-weight: 600; transition: transform .25s var(--ease), background-color .2s; }
.faq-item[open] summary::after{ transform: rotate(45deg); background: var(--rojo-50); }
.faq-item p{ padding: 0 22px 20px; margin: 0; color: var(--gris); }

/* =========================================================
   Algunos de nuestros clientes (fotos tipo polaroid, informal)
   ========================================================= */
.clientes{ padding: 40px 0 104px; }
.clientes-cabecera{ text-align: center; margin-bottom: 36px; }
.clientes-cabecera .eyebrow{ justify-content: center; }
.clientes-titulo{ font-size: var(--fs-h3); }
.clientes-fotos{ list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; }
.clientes-fotos li{
  width: 190px; padding: 8px 8px 26px; background: var(--blanco); border-radius: 6px;
  box-shadow: 0 10px 24px -12px rgba(15,23,42,.35), 0 1px 2px rgba(15,23,42,.06);
  transform: rotate(var(--giro, 0deg)); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.clientes-fotos li:nth-child(1){ --giro: -4deg; }
.clientes-fotos li:nth-child(2){ --giro: 3deg; margin-top: 14px; }
.clientes-fotos li:nth-child(3){ --giro: -2deg; }
.clientes-fotos li:nth-child(4){ --giro: 4deg; margin-top: 10px; }
.clientes-fotos li:nth-child(5){ --giro: -3deg; }
.clientes-fotos li:hover{ transform: rotate(0deg) scale(1.06); box-shadow: var(--sombra-lg); z-index: 1; position: relative; }
.clientes-fotos img{ width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; display: block; }
.clientes-nota{ text-align: center; margin: 40px 0 0; color: var(--gris); font-size: var(--fs-sm); }
.clientes-nota a{ color: #16a34a; font-weight: 700; text-decoration: none; }
.clientes-nota a i{ margin-left: 4px; transition: transform .2s var(--ease); }
.clientes-nota a:hover i{ transform: translateX(4px); }
@media (max-width: 600px){
  .clientes{ padding: 24px 0 72px; }
  .clientes-fotos{ gap: 12px; }
  .clientes-fotos li{ width: calc(50% - 12px); max-width: 170px; padding: 6px 6px 18px; margin-top: 0 !important; }
}

/* =========================================================
   CTA final
   ========================================================= */
.cta-final{ padding: 0 0 104px; }
.cta-caja{
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: var(--tinta); color: #cbd5e1; padding: 72px 64px;
  display: grid; grid-template-columns: 1.3fr auto; gap: 40px; align-items: center;
}
.cta-caja::before{ content:""; position:absolute; right: -120px; top: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(closest-side, rgba(227,29,36,.55), transparent); }
.cta-caja::after{ content:""; position:absolute; left: 30%; bottom: -220px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(37,211,102,.18), transparent); }
.cta-caja > *{ position: relative; z-index: 1; }
.cta-caja h2{ color: #fff; margin-bottom: 14px; }
.cta-caja p{ margin: 0; max-width: 46ch; }
.cta-acciones{ display: flex; flex-direction: column; gap: 12px; }
.cta-acciones .btn-claro{ background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.cta-acciones .btn-claro:hover{ border-color: #fff; color: #fff; }

/* =========================================================
   Pie de página
   ========================================================= */
.pie{ background: var(--blanco); border-top: 1px solid var(--borde); padding: 72px 0 0; }
.pie-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; }
.pie-marca img{ height: 54px; width: auto; margin-bottom: 18px; }
.pie-marca p{ color: var(--gris); max-width: 32ch; }
.pie h4{ text-transform: uppercase; letter-spacing: .12em; color: var(--gris); font-weight: 700; margin-bottom: 18px; }
.pie ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pie ul a, .pie-dato a{ color: var(--tinta-2); text-decoration: none; font-weight: 500; transition: color .2s; }
.pie ul a:hover, .pie-dato a:hover{ color: var(--rojo); }
.pie-dato{ margin: 0 0 10px; }
.pie-dato i{ width: 18px; margin-right: 6px; color: var(--rojo); }
.redes{ display: flex; gap: 10px; margin-top: 4px; }
.redes a{ width: 42px; height: 42px; border-radius: 12px; display:inline-flex; align-items:center; justify-content:center; background: var(--fondo); color: var(--tinta); border: 1px solid var(--borde); text-decoration: none; transition: all .2s var(--ease); }
.redes a:hover{ background: var(--rojo); color: #fff; border-color: var(--rojo); transform: translateY(-3px); }
.pie-copy{ border-top: 1px solid var(--borde); padding: 22px 0; color: var(--gris); }
.pie-copy .contenedor{ display:flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pie-copy p{ margin: 0; }

/* Botón flotante de WhatsApp */
.wa-flotante{
  position: fixed; right: 22px; bottom: 22px; z-index: 1001;
  width: 60px; height: 60px; border-radius: 9999px; background: var(--wa); color: #fff;
  display:flex; align-items:center; justify-content:center; font-size: 1.9rem; text-decoration: none;
  box-shadow: 0 14px 30px -8px rgba(37,211,102,.7);
  transition: transform .35s var(--ease), opacity .35s var(--ease), visibility .35s;
}
/* En inicio aparece recién al llegar a Servicios (lo controla whatsapp.js) */
.js .wa-flotante[data-mostrar-desde]:not(.visible){ opacity: 0; visibility: hidden; transform: translateY(24px) scale(.85); pointer-events: none; }
.wa-flotante::before{ content:""; position:absolute; inset: 0; border-radius: inherit; border: 2px solid var(--wa); animation: onda 2.4s infinite; }
.wa-flotante:hover{ color:#fff; transform: scale(1.08); }
@keyframes onda{ 0%{ transform: scale(1); opacity: .7; } 100%{ transform: scale(1.6); opacity: 0; } }

/* Burbuja de mensaje junto al botón flotante (la crea whatsapp.js) */
.wa-burbuja{
  position: fixed; right: 96px; bottom: 30px; z-index: 1001;
  width: max-content; max-width: 260px; padding: 14px 38px 14px 16px;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: 18px 18px 4px 18px; box-shadow: var(--sombra-lg);
  opacity: 0; visibility: hidden; transform: translateX(12px) scale(.92); transform-origin: bottom right;
  transition: opacity .35s var(--ease), transform .45s cubic-bezier(.34,1.56,.64,1), visibility .35s;
}
.wa-burbuja::after{
  content:""; position: absolute; right: -7px; bottom: 14px; width: 14px; height: 14px;
  background: var(--blanco); border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  transform: rotate(-45deg);
}
.wa-burbuja.abierta{ opacity: 1; visibility: visible; transform: none; }
.wa-burbuja-enlace{ display: block; text-decoration: none; }
.wa-burbuja-enlace strong{ display: block; color: var(--tinta); font-size: var(--fs-sm); margin-bottom: 2px; }
.wa-burbuja-enlace span{ display: block; color: var(--gris); font-size: var(--fs-xs); line-height: 1.45; }
.wa-burbuja-enlace:hover strong{ color: #16a34a; }
.wa-burbuja-cerrar{
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border: 0; border-radius: 9999px;
  background: var(--fondo); color: var(--gris); font-size: 1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background-color .2s, color .2s;
}
.wa-burbuja-cerrar:hover{ background: var(--rojo-50); color: var(--rojo); }
@media (max-width: 600px){
  .wa-burbuja{ right: 80px; bottom: 22px; max-width: 215px; }
}

/* =========================================================
   Página de contacto
   ========================================================= */
.hero-pagina{ position: relative; padding: 56px 0 8px; text-align: center; overflow: hidden; }
.hero-pagina::before{ content:""; position:absolute; left: 50%; top: -260px; transform: translateX(-50%); width: 900px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(227,29,36,.10), transparent 70%); pointer-events:none; }
.hero-pagina .contenedor{ position: relative; }
.hero-pagina h1{ letter-spacing: -.04em; margin: 8px 0 16px; }
.hero-pagina p{ color: var(--gris); max-width: 52ch; margin: 0 auto; }

.canales{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0 0; }
.canal{
  text-align: left;
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 26px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.canal:hover{ transform: translateY(-4px); box-shadow: var(--sombra-md); }
.canal-icono{ width: 50px; height: 50px; border-radius: 15px; display:flex; align-items:center; justify-content:center; font-size: 1.3rem; margin-bottom: 18px; background: var(--rojo-50); color: var(--rojo); }
.canal-icono.verde{ background: #dcfce7; color: #16a34a; }
.canal h3{ margin-bottom: 6px; }
.canal p{ color: var(--gris); margin: 0 0 20px; max-width: none; }
.canal .btn{ margin-top: auto; }

.seccion-ficha{ padding: 40px 0 104px; }
.ficha-grid{ display: grid; grid-template-columns: .75fr 1.25fr; gap: 28px; align-items: start; }
.tarjeta{ background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-sm); }

.panel-info{ position: sticky; top: 100px; padding: 30px; }
.panel-info h2{ margin-bottom: 22px; }
.info-lista{ list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 18px; }
.info-lista li{ display: flex; gap: 14px; align-items: flex-start; }
.info-lista .info-icono{ flex: 0 0 40px; height: 40px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: var(--fondo); color: var(--rojo); border: 1px solid var(--borde); }
.info-lista strong{ display: block; color: var(--tinta); margin-bottom: 2px; }
.info-lista span, .info-lista a{ display:block; color: var(--gris); text-decoration: none; }
.info-lista a:hover{ color: var(--rojo); }

/* Ficha de agendamiento */
.contacto-form{ padding: 36px; }
.ficha-encabezado{ display: flex; gap: 16px; align-items: flex-start; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--borde); }
.ficha-icono{ flex: 0 0 52px; height: 52px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: var(--rojo); color: #fff; font-size: 1.3rem; box-shadow: 0 10px 20px -8px rgba(227,29,36,.6); }
.ficha-encabezado h2{ margin-bottom: 6px; }
.form-ayuda{ margin: 0; color: var(--gris); }
.form-ayuda strong{ color: var(--tinta); }

.ficha-bloque{ border: 0; margin: 0; padding: 26px 0 8px; min-width: 0; }
.ficha-bloque + .ficha-bloque{ border-top: 1px dashed var(--borde); }
.ficha-bloque legend{ float: left; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 18px; font-weight: 800; color: var(--tinta); letter-spacing: -.01em; }
.ficha-bloque legend + *{ clear: both; }
.ficha-paso{ width: 28px; height: 28px; border-radius: 9px; background: var(--rojo-50); color: var(--rojo); display:inline-flex; align-items:center; justify-content:center; font-size: .85rem; font-weight: 800; }
.ficha-bloque > .form-campo + .form-campo{ margin-top: 20px; }

.form-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-lleno{ grid-column: 1 / -1; }
.form-campo{ display: flex; flex-direction: column; }
.form-campo > label, .pregunta-titulo{ color: var(--tinta); font-weight: 600; margin: 0 0 8px; }
.req{ color: var(--rojo); }
.form-campo input, .form-campo textarea, .form-campo select, .detalle-condicional input{
  width: 100%; font: 500 1rem var(--fuente); color: var(--tinta);
  background: var(--fondo); border: 1.5px solid var(--borde); border-radius: 12px; padding: 13px 15px;
  outline: none; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.form-campo input::placeholder, .form-campo textarea::placeholder, .detalle-condicional input::placeholder{ color: #a3a9b4; }
.form-campo input:hover, .form-campo textarea:hover, .form-campo select:hover{ border-color: #d6cfc8; }
.form-campo input:focus, .form-campo textarea:focus, .form-campo select:focus, .detalle-condicional input:focus{
  border-color: var(--rojo); background: var(--blanco); box-shadow: 0 0 0 4px rgba(227,29,36,.10);
}
.form-campo select{
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.form-campo textarea{ resize: vertical; min-height: 110px; }
.form-campo .msg-error{ display: none; color: #dc2626; font-weight: 500; margin-top: 7px; }
.form-campo input.invalido, .form-campo textarea.invalido, .form-campo select.invalido{ border-color: #ef4444; background: #fff7f7; }

.opciones{ display: flex; flex-wrap: wrap; gap: 10px; }
.opcion{ position: relative; cursor: pointer; margin: 0; }
.opcion input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion span{
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px;
  border: 1.5px solid var(--borde); border-radius: 9999px; background: var(--fondo);
  color: var(--tinta-2); font-weight: 600; transition: all .18s var(--ease);
}
.opcion span::before{ content:""; width: 16px; height: 16px; border-radius: 9999px; border: 2px solid #cbd5e1; background: #fff; transition: all .18s var(--ease); }
.opcion:hover span{ border-color: #f0b4b4; }
.opcion input:checked + span{ border-color: var(--rojo); background: var(--rojo-50); color: var(--rojo); }
.opcion input:checked + span::before{ border-color: var(--rojo); border-width: 5px; }
.opcion input:focus-visible + span{ box-shadow: 0 0 0 4px rgba(227,29,36,.15); }
.pregunta.invalido .opcion span{ border-color: #ef4444; }
.detalle-condicional{ display: flex; flex-direction: column; margin-top: 12px; padding: 16px; background: var(--fondo); border-radius: 14px; border: 1px solid var(--borde); border-left: 3px solid var(--rojo); animation: aparece .3s var(--ease); }
.detalle-condicional[hidden]{ display: none; }
.detalle-condicional label{ color: var(--tinta); font-weight: 600; margin: 0 0 8px; }
.detalle-condicional input{ background: var(--blanco); }
@keyframes aparece{ from{ opacity: 0; transform: translateY(-6px); } }

.form-acciones{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--borde); }
.estado-form{ margin: 0; font-weight: 600; color: var(--gris); }
.estado-form.ok{ color: #16a34a; }
.estado-form.error{ color: #dc2626; }
.form-nota{ display:flex; align-items:center; gap: 8px; margin: 14px 0 0; color: var(--gris); }

/* Barra de progreso de la ficha */
.ficha-progreso{ display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; }
.ficha-progreso-barra{ flex: 1; height: 8px; border-radius: 9999px; background: var(--fondo); border: 1px solid var(--borde); overflow: hidden; }
.ficha-progreso-barra span{ display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--rojo), #f97316); transition: width .4s var(--ease); }
.ficha-progreso small{ flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 700; color: var(--gris); }
.ficha-progreso small.completo{ color: #16a34a; }

/* Elección de servicio en tarjetas grandes */
.servicio-opciones{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.servicio-opcion{ position: relative; cursor: pointer; margin: 0; }
.servicio-opcion input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.servicio-opcion-caja{
  display: flex; align-items: center; gap: 14px; height: 100%;
  padding: 16px; border-radius: var(--r-md); border: 1.5px solid var(--borde); background: var(--fondo);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.servicio-opcion-icono{ flex: 0 0 44px; height: 44px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: var(--rojo-50); color: var(--rojo); font-size: 1.05rem; transition: background-color .2s, color .2s; }
.servicio-opcion-azul .servicio-opcion-icono{ background: #e0eaff; color: #4f6ef0; }
.servicio-opcion strong{ display: block; color: var(--tinta); font-size: var(--fs-sm); }
.servicio-opcion small{ display: block; color: var(--gris); font-size: var(--fs-xs); font-weight: 500; }
.servicio-opcion:hover .servicio-opcion-caja{ border-color: #d6cfc8; }
.servicio-opcion input:checked + .servicio-opcion-caja{ border-color: var(--rojo); background: var(--rojo-50); box-shadow: 0 0 0 4px rgba(227,29,36,.08); }
.servicio-opcion input:checked + .servicio-opcion-caja .servicio-opcion-icono{ background: var(--rojo); color: #fff; }
.servicio-opcion-azul input:checked + .servicio-opcion-caja{ border-color: #4f6ef0; background: #eef3ff; box-shadow: 0 0 0 4px rgba(79,110,240,.10); }
.servicio-opcion-azul input:checked + .servicio-opcion-caja .servicio-opcion-icono{ background: #4f6ef0; color: #fff; }
.servicio-opcion input:focus-visible + .servicio-opcion-caja{ outline: 3px solid rgba(227,29,36,.35); outline-offset: 2px; }
.pregunta.invalido .servicio-opcion-caja{ border-color: #ef4444; }

/* Preguntas que aparecen según la elección */
.ficha-condicional{ margin-top: 20px; animation: aparece .3s var(--ease); }
.ficha-condicional .ficha-condicional{ margin-top: 18px; }
.form-grid + .ficha-condicional, .form-grid + .form-campo{ margin-top: 20px; }
.opcion span i{ font-size: .9em; opacity: .8; }
.opcion-destacada span{ border-color: #fbd0d0; }
.opcion-destacada span i{ color: #eab308; opacity: 1; }
.ficha-aviso{ display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: var(--fs-sm); }
.ficha-aviso i{ margin-top: 3px; }
.ficha-nota-agenda{ display: flex; gap: 8px; align-items: center; margin: 12px 0 0; color: var(--gris); font-size: var(--fs-xs); }
.ficha-nota-agenda i{ color: var(--rojo); }

/* =========================================================
   Escala tipográfica aplicada (cada grupo comparte tamaño)
   ========================================================= */
body{ font-size: var(--fs-body); }

/* h1 de cada página */
.hero-titulo,
.hero-pagina h1{ font-size: var(--fs-display); }

/* Títulos de sección */
.titulo-seccion,
.cta-caja h2{ font-size: var(--fs-h2); }

/* Títulos de tarjetas y bloques */
.servicio h3,
.paso h3,
.bento-item h3,
.bento-destacado h3,
.canal h3,
.panel-info h2,
.ficha-encabezado h2{ font-size: var(--fs-h3); }

/* Subtítulos pequeños */
.faq-item summary,
.ficha-bloque legend,
.cinta-label strong{ font-size: var(--fs-h4); }

/* Párrafos de introducción */
.hero-sub,
.sub-seccion,
.hero-pagina p,
.cta-caja p{ font-size: var(--fs-lead); }

/* Párrafos y listas */
.servicio-desc,
.lista-check li,
.cobertura p,
.paso p,
.bento-item p,
.bento-destacado p,
.faq-item p,
.canal p,
.btn-lg{ font-size: var(--fs-body); }

/* Menú, etiquetas, datos y formularios */
.menu .enlace,
.btn-sm,
.chip,
.cinta-items li,
.hero-confianza li,
.flotante strong,
.cobertura strong,
.cobertura p:last-child,
.info-lista strong,
.info-lista span, .info-lista a,
.pie-marca p,
.pie-dato,
.form-campo > label, .pregunta-titulo,
.detalle-condicional label,
.opcion span,
.estado-form{ font-size: var(--fs-sm); }

/* Etiquetas en mayúscula, notas y legales */
.eyebrow,
.cinta-label small,
.pie h4,
.flotante small,
.pie-copy,
.form-nota,
.form-campo .msg-error{ font-size: var(--fs-xs); }

/* =========================================================
   Animación de aparición al hacer scroll
   ========================================================= */
.js .revelar{ opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--retraso, 0s); }
.js .revelar.visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html{ scroll-behavior: auto; }
  .js .revelar{ opacity: 1; transform: none; }
  .resaltado svg path{ stroke-dashoffset: 0; }
  .js .pasos .paso, .js .pasos .paso .paso-icono{ opacity: 1; transform: none; animation: none !important; }
  .pasos::after{ clip-path: none; animation: none !important; }
}

/* =========================================================
   Responsive
   ========================================================= */
/* Tarjetas de resumen: en pantallas medianas, una por fila para que el texto no se apriete */
@media (max-width: 1100px){
  .grid-servicios{ grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
}

/* Pantallas medianas: cajas flotantes más compactas para no saturar la ilustración */
@media (min-width: 901px) and (max-width: 1200px){
  .flotante{ padding: 8px 12px 8px 8px; }
  .flotante small{ display: none; }
  .flotante-icono{ width: 32px; height: 32px; font-size: .85rem; }
  .flotante-1{ left: -4%; }
  .flotante-2{ right: 0; }
}

@media (max-width: 1024px){
  .bento{ grid-template-columns: 1fr 1fr; }
  .bento-destacado{ grid-row: auto; grid-column: span 2; min-height: 260px; }
  .bento-ancho{ grid-column: span 2; }
  .pie-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px){
  .seccion{ padding: 80px 0; }
  #servicios{ padding-top: 48px; }

  .nav, .encabezado.con-sombra .nav{ min-height: 72px; padding: 8px 0; }
  .marca{ width: auto; }
  .chip{ min-width: 0; }
  .logo{ height: 60px; }
  .encabezado.con-sombra .logo{ height: 52px; }
  .menu{ display: none; }
  .nav-cta{ justify-self: end; }
  .boton-menu{ display: inline-flex; }
  .menu-responsive{
    display: block; grid-column: 1 / -1;
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .3s var(--ease), opacity .3s, visibility .3s;
  }
  #alternar-menu:checked ~ .menu-responsive{ max-height: 300px; opacity: 1; visibility: visible; }
  .menu-responsive .lista{ display: grid; gap: 6px; padding: 8px 4px 6px; }
  .menu-responsive .enlace{ display:flex; align-items:center; gap: 12px; padding: 14px 16px; border-radius: 16px; color: var(--tinta); font-weight: 700; text-decoration: none; background: var(--fondo); }
  .menu-responsive .enlace i{ color: var(--rojo); width: 18px; text-align: center; }
  .menu-responsive .enlace.activo{ background: var(--rojo-50); color: var(--rojo); }

  .hero{ min-height: 0; padding: 48px 0 72px; }
  .hero-grid{ grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .hero-sub{ margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-confianza{ justify-content: center; }
  .hero-visual{ max-width: 460px; margin: 0 auto; width: 100%; }
  .flotante-1{ left: 0; }
  .flotante-2{ right: 0; }

  .grid-servicios{ grid-template-columns: 1fr; }
  .modalidades, .tarifas{ padding: 32px 24px; }
  .detalle-grid, .detalle-grid:has(.detalle-media-cuadrada){ grid-template-columns: 1fr; gap: 32px; }
  #veterinaria, #peluqueria{ padding: 64px 0; }
  .detalle-invertido .detalle-media{ order: 0; }
  #tarifas, #modalidades, #productos{ margin-top: 48px; }
  .productos{ grid-template-columns: 1fr; gap: 28px; padding: 20px; }
  .productos-foto{ max-width: 420px; width: 100%; margin: 0 auto; }
  .productos-texto{ padding-right: 0; }
  .social{ padding-top: 64px; }
  .modalidades-grid{ grid-template-columns: 1fr; }
  .tarifas-grid{ grid-template-columns: 1fr; max-width: 420px; gap: 26px; }
  .tarifa-destacada{ order: -1; }
  .social-caja{ grid-template-columns: 1fr; padding: 40px 32px; gap: 28px; }
  .pasos{ grid-template-columns: 1fr; gap: 36px; }
  .pasos::before, .pasos::after{ display: none; }
  .faq-grid{ grid-template-columns: 1fr; gap: 32px; }
  .cta-caja{ grid-template-columns: 1fr; padding: 56px 32px; text-align: center; }
  .cta-caja p{ margin: 0 auto; }

  .canales{ grid-template-columns: 1fr; }
  .ficha-grid{ grid-template-columns: 1fr; }
  .ficha-grid .contacto-form{ order: -1; }
  .panel-info{ position: static; }
}

@media (max-width: 600px){
  .contenedor{ padding: 0 16px; }
  .seccion{ padding: 64px 0; }
  #servicios{ padding-top: 40px; }
  .cabecera-seccion{ margin-bottom: 40px; }
  .logo, .encabezado.con-sombra .logo{ height: 52px; }
  .nav-cta span{ display: none; }
  .nav-cta.btn-sm{ --pad-x: 13px; }
  .hero-cta .btn{ width: 100%; }
  .resaltado{ white-space: normal; }
  .resaltado svg{ display: none; }
  .flotante{ padding: 9px 12px 9px 9px; }
  .flotante-icono{ width: 34px; height: 34px; font-size: .9rem; }
  .flotante small{ display: none; }
  .cinta{ padding-top: 40px; }
  .cinta-caja{ flex-direction: column; align-items: stretch; padding: 8px; }
  .cinta-label{ border-right: 0; border-bottom: 1px solid var(--borde); margin: 0 0 8px; padding: 6px 6px 12px; }
  .cinta-items.cinta-fija{ padding: 2px; }
  .cinta-consulta{ margin: 12px 6px 6px; }
  .modalidades, .tarifas{ padding: 26px 16px; border-radius: var(--r-lg); }
  .social-caja{ padding: 32px 20px; border-radius: var(--r-lg); }
  .social-huellas i{ width: 32px; height: 32px; font-size: .8rem; }
  .modalidad{ padding: 22px; }
  .modalidad .btn{ width: 100%; }
  .detalle-texto .lista-check{ grid-template-columns: 1fr; }
  .detalle-acciones .btn{ width: 100%; }
  .detalle-acciones{ justify-content: center; }
  .servicio{ grid-template-columns: 1fr; }
  .servicio-media{ min-height: 0; aspect-ratio: 16 / 9; }
  .servicio-cuerpo{ padding: 18px 8px 8px; }
  .servicio .btn{ width: 100%; }
  .servicio-acciones{ justify-content: center; }
  .bento{ grid-template-columns: 1fr; }
  .bento-destacado, .bento-ancho{ grid-column: auto; }
  .bento-item{ min-height: 200px; padding: 100px 26px 26px; }
  .cta-final{ padding-bottom: 64px; }
  .cta-caja{ padding: 44px 22px; border-radius: var(--r-lg); }
  .cta-acciones .btn{ width: 100%; }
  .pie-grid{ grid-template-columns: 1fr; gap: 32px; }
  .contacto-form{ padding: 22px; }
  .form-grid{ grid-template-columns: 1fr; }
  .servicio-opciones{ grid-template-columns: 1fr; }
  .form-acciones .btn{ width: 100%; }
  .panel-info{ padding: 24px; }
  .wa-flotante{ width: 54px; height: 54px; font-size: 1.7rem; right: 16px; bottom: 16px; }
}

/* =========================================================
   Celular: ajustes de orden y ritmo (no afectan la vista de escritorio)
   ========================================================= */
@media (max-width: 600px){
  /* Ritmo vertical más parejo entre secciones */
  .seccion, #veterinaria, #peluqueria{ padding: 56px 0; }
  #servicios{ padding-top: 36px; }
  .cabecera-seccion{ margin-bottom: 28px; }
  #tarifas, #modalidades, #productos{ margin-top: 36px; }
  .social{ padding: 48px 0 32px; }
  .clientes{ padding: 16px 0 56px; }

  /* Portada: más compacta y sin cajas flotantes sobre el dibujo */
  .hero{ padding: 32px 0 40px; }
  .hero-grid{ gap: 28px; }
  .hero-titulo{ font-size: 2.15rem; margin: 16px 0 14px; text-wrap: balance; }
  .hero-sub{ font-size: 1.02rem; margin-bottom: 22px; }
  .hero-cta{ gap: 10px; }
  .hero-confianza{ margin-top: 20px; gap: 8px 16px; }
  .hero-visual{ max-width: 300px; }
  .flotante{ display: none; }

  /* Franja de cobertura más compacta */
  .cinta{ padding-top: 28px; }

  /* Todos los encabezados de sección centrados, igual que la portada */
  .detalle-texto{ text-align: center; }
  .detalle-texto .eyebrow{ justify-content: center; }
  .detalle-texto .sub-seccion{ margin-left: auto; margin-right: auto; }
  .titulo-seccion{ text-wrap: balance; }

  /* Lo que incluye cada servicio: etiquetas ordenadas en vez de lista larga */
  .detalle-texto .lista-check{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .detalle-texto .lista-check li{ padding: 7px 12px 7px 8px; border-radius: 9999px; background: var(--blanco); border: 1px solid var(--borde); font-size: var(--fs-sm); gap: 8px; align-items: center; }
  .detalle-texto .lista-check li::before{ flex-basis: 20px; height: 20px; margin: 0; }
  .detalle-texto .cobertura{ text-align: left; }
  .detalle-acciones{ flex-direction: column; gap: 14px; }

  /* Imágenes de detalle a un tamaño razonable */
  .detalle-media-cuadrada{ max-width: 240px; }
  .detalle-media:not(.detalle-media-cuadrada){ max-width: 340px; width: 100%; justify-self: center; }

  /* Tarifas: el pack destacado arriba y las vacunas sueltas en filas compactas */
  .tarifas-grid{ gap: 12px; }
  .tarifa-destacada{ margin: 6px 0 8px; }
  .tarifa:not(.tarifa-destacada){ flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 14px 16px; }
  .tarifa:not(.tarifa-destacada) .tarifa-icono{ margin: 0; flex: 0 0 38px; height: 38px; }
  .tarifa:not(.tarifa-destacada) h4{ flex: 1; margin: 0; font-size: var(--fs-sm); }
  .tarifa:not(.tarifa-destacada) .tarifa-precio{ font-size: 1.15rem; margin: 0; }
  .tarifa:not(.tarifa-destacada) .btn{ --pad-x: 12px; --pad-y: 8px; }
  .tarifas-nota{ text-align: left; align-items: flex-start; }

  /* Modalidades y productos */
  .modalidades-cabecera{ margin-bottom: 18px; }
  .modalidad{ padding: 20px; }
  .productos-foto{ max-width: 240px; }
  .productos-texto{ text-align: center; }
  .productos-lista{ text-align: left; }

  /* Cómo funciona: línea de tiempo vertical (ícono a la izquierda, texto a la derecha) */
  .pasos{ gap: 0; max-width: 360px; margin: 0 auto; }
  .paso{ display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; text-align: left; padding: 0 0 26px; }
  .paso:last-child{ padding-bottom: 0; }
  .paso-icono{ grid-row: span 2; width: 56px; height: 56px; margin: 0; border-radius: 18px; font-size: 1.25rem; }
  .paso h3{ align-self: end; margin: 4px 0 4px; }
  .paso p{ margin: 0; max-width: none; }
  .paso:not(:last-child)::before{ content: ""; position: absolute; left: 27px; top: 62px; bottom: 6px; border-left: 2px dashed var(--borde); }

  /* Compromiso social */
  .social-texto{ text-align: center; }
  .social-texto p{ margin-left: auto; margin-right: auto; }
  .social-contador{ padding: 18px; }

  /* Pie de página compacto */
  .pie{ padding-top: 48px; }
  .pie-grid{ grid-template-columns: 1fr; gap: 26px; padding-bottom: 32px; }
  .pie h4{ margin-bottom: 12px; }
  .clientes-nota a{ white-space: nowrap; }
  .pie-copy .contenedor{ flex-direction: column; gap: 4px; }

  /* Contacto */
  .hero-pagina{ padding-top: 36px; }
  .seccion-ficha{ padding: 24px 0 64px; }
}

/* Celular: portada ordenada (ilustración → mensaje → acción → ventajas) */
@media (max-width: 600px){
  .hero{ padding: 20px 0 36px; }
  .hero-grid{ gap: 14px; }
  .hero-visual{ order: -1; max-width: 230px; }
  .hero-texto{ display: flex; flex-direction: column; align-items: center; }
  .chip{ font-size: var(--fs-xs); padding: 5px 12px 5px 6px; }
  .chip .chip-icono{ width: 22px; height: 22px; }
  .hero-titulo{ font-size: 2rem; margin: 14px 0 12px; }
  .hero-sub{ font-size: .98rem; line-height: 1.55; margin-bottom: 20px; max-width: 34ch; }

  /* Un botón principal y "Ver servicios" como enlace discreto */
  .hero-cta{ flex-direction: column; align-items: center; gap: 6px; width: 100%; }
  .hero-cta .btn-wa{ width: 100%; }
  .hero-cta .btn-claro{ width: auto; background: none; border: 0; box-shadow: none; --pad-y: 10px; font-size: var(--fs-sm); color: var(--tinta-2); }
  .hero-cta .btn-claro:hover{ transform: none; color: var(--rojo); }

  /* Ventajas: tres tarjetitas iguales en una fila */
  .hero-confianza{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 18px; }
  .hero-confianza li{
    flex-direction: column; justify-content: flex-start; gap: 6px; text-align: center;
    padding: 12px 6px; border-radius: 14px; background: var(--blanco); border: 1px solid var(--borde);
    font-size: var(--fs-xs); line-height: 1.3;
  }
  .hero-confianza i{ font-size: 1.05rem; }
}

/* Celular: botón principal y ventajas más livianos y elegantes */
@media (max-width: 600px){
  .hero-cta .btn-wa{ width: auto; --pad-y: 13px; --pad-x: 26px; font-size: var(--fs-sm); box-shadow: 0 8px 18px -10px rgba(37,211,102,.75); }
  .hero-cta{ gap: 2px; }
  .hero-cta .btn-claro{ font-size: var(--fs-xs); }

  .hero-confianza{ gap: 0; margin-top: 22px; max-width: 340px; }
  .hero-confianza li{
    background: none; border: 0; border-radius: 0; padding: 2px 6px; gap: 5px;
    color: var(--gris); font-weight: 600;
  }
  .hero-confianza li + li{ border-left: 1px solid var(--borde); }
  .hero-confianza i{ font-size: .9rem; }
}

/* Celular: tarjetas de servicios compactas y elegantes */
@media (max-width: 600px){
  .grid-servicios{ gap: 16px; }
  .servicio{ padding: 8px; border-radius: 22px; }
  .servicio-media{ aspect-ratio: 2.1 / 1; border-radius: 16px; }
  .servicio-cuerpo{ padding: 14px 10px 6px; }
  .servicio-encabezado{ margin-bottom: 6px; gap: 10px; }
  .servicio .servicio-icono{ flex-basis: 36px; height: 36px; border-radius: 11px; font-size: .9rem; }
  .servicio h3{ font-size: 1.12rem; }
  .servicio-categoria{ font-size: .68rem; }
  .servicio-desc{ font-size: var(--fs-sm); line-height: 1.5; margin-bottom: 12px; }

  /* Botón del tamaño de su texto y enlace al lado */
  .servicio-acciones{ flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; padding-top: 12px; gap: 8px; }
  .servicio .btn{ width: auto; }
  .servicio-acciones .btn{ --pad-y: 10px; --pad-x: 16px; font-size: .84rem; box-shadow: 0 8px 18px -10px rgba(37,211,102,.75); }
  .servicio-acciones .enlace-flecha{ font-size: .8rem; text-align: right; }
}
@media (max-width: 600px){ .solo-escritorio{ display: none; } }

/* Celular: sección Veterinaria a domicilio más fina y sin desbordes */
@media (max-width: 600px){
  .detalle-media-cuadrada{ max-width: 200px; }
  .detalle-grid{ gap: 22px; }
  .detalle-texto .titulo-seccion{ font-size: 1.75rem; }
  .detalle-texto .sub-seccion{ font-size: .98rem; line-height: 1.55; max-width: 34ch; margin: 10px auto 16px; }
  .detalle-texto .lista-check{ margin-bottom: 16px; }
  .detalle-texto .cobertura{ padding: 12px 14px; margin-bottom: 18px; }
  .detalle-texto .cobertura strong{ font-size: var(--fs-xs); }
  .detalle-texto .cobertura p{ font-size: .86rem; }

  /* Botón del tamaño de su texto, como en la portada */
  .detalle-acciones{ gap: 4px; }
  .detalle-acciones .btn{ width: auto; --pad-y: 12px; --pad-x: 24px; font-size: var(--fs-sm); box-shadow: 0 8px 18px -10px rgba(37,211,102,.75); }
  .detalle-acciones .enlace-flecha{ font-size: .84rem; padding: 8px; }

  /* Tarifas: que nada se salga del bloque */
  .tarifas{ padding: 24px 14px; }
  .tarifas .modalidades-cabecera h3{ font-size: 1.15rem; }
  .tarifas .modalidades-cabecera p{ font-size: .88rem; }
  .tarifas-grid{ grid-template-columns: minmax(0, 1fr); width: 100%; }
  .tarifa{ min-width: 0; }
  .tarifa-destacada{ padding: 26px 16px 20px; }
  .tarifa-destacada .tarifa-precio{ font-size: 1.9rem; }
  .tarifa-destacada .btn{ --pad-y: 10px; --pad-x: 20px; font-size: .86rem; }
  .tarifa:not(.tarifa-destacada){ padding: 12px; gap: 10px; }
  .tarifa:not(.tarifa-destacada) .tarifa-icono{ flex-basis: 34px; height: 34px; font-size: .85rem; }
  .tarifa:not(.tarifa-destacada) h4{ font-size: .86rem; line-height: 1.25; }
  .tarifa:not(.tarifa-destacada) .tarifa-precio{ font-size: 1rem; }
  .tarifa:not(.tarifa-destacada) .btn{ --pad-x: 12px; --pad-y: 7px; font-size: .8rem; }
  .tarifas-nota{ font-size: .82rem; margin-top: 14px; }
}

/* Celular: ilustración del veterinario sin marco, sobre un círculo suave */
@media (max-width: 600px){
  .detalle-media-cuadrada{
    max-width: 230px; border: 0; box-shadow: none; border-radius: 50%; overflow: visible;
    background: radial-gradient(circle at 50% 55%, #ffe4e4 0%, #fff1ec 55%, rgba(255,241,236,0) 72%);
  }
  .detalle-media-cuadrada img{ object-fit: contain; transform: scale(1.04); }
  #veterinaria .detalle-grid{ gap: 10px; }
  #veterinaria .detalle-texto .titulo-seccion{ font-size: 1.65rem; }
}

/* Celular: sección Peluquería canina ordenada y coherente con Veterinaria */
@media (max-width: 600px){
  /* Encabezado */
  #peluqueria .detalle-grid{ gap: 18px; }
  #peluqueria .detalle-media{ max-width: 290px; border-radius: 22px; box-shadow: 0 14px 30px -18px rgba(79,110,240,.55); border: 0; }
  #peluqueria .detalle-texto .titulo-seccion{ font-size: 1.65rem; }

  /* Lo que incluye: grilla 2x2 pareja */
  #peluqueria .detalle-texto .lista-check{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 340px; margin-left: auto; margin-right: auto; }
  #peluqueria .detalle-texto .lista-check li{ justify-content: flex-start; font-size: .84rem; padding: 8px 10px 8px 8px; border-radius: 12px; text-align: left; line-height: 1.25; }

  /* Modalidades: tarjetas compactas */
  .modalidades{ padding: 24px 14px; }
  .modalidades .modalidades-cabecera h3{ font-size: 1.15rem; }
  .modalidades .modalidades-cabecera p{ font-size: .88rem; }
  .modalidades-grid{ gap: 12px; }
  .modalidad{ padding: 18px 16px; }
  .modalidad-top{ margin-bottom: 10px; }
  .modalidad-icono{ width: 42px; height: 42px; border-radius: 13px; font-size: 1rem; }
  .modalidad-num{ font-size: .66rem; padding: 4px 10px; }
  .modalidad h4{ font-size: 1.1rem; margin-bottom: 6px; }
  .modalidad p{ font-size: .9rem; line-height: 1.5; margin-bottom: 12px; }
  .modalidad-ideal{ font-size: .68rem; margin-bottom: 6px; }
  .modalidad-requisitos{ margin-bottom: 16px; gap: 6px; }
  .modalidad-requisitos li{ font-size: .84rem; }
  .modalidad .btn{ width: auto; align-self: center; --pad-y: 10px; --pad-x: 20px; font-size: .84rem; box-shadow: 0 8px 18px -10px rgba(37,211,102,.75); }
  .modalidades-nota{ font-size: .84rem; margin-top: 16px; }

  /* Productos: foto chica y lista compacta */
  .productos{ padding: 18px 14px; gap: 18px; }
  .productos-foto{ max-width: 180px; border-radius: 18px; }
  .productos-texto h3{ font-size: 1.15rem; }
  .productos-texto > p{ font-size: .88rem; margin-bottom: 12px; }
  .productos-lista{ gap: 8px; }
  .productos-lista li{ padding: 10px 12px; gap: 10px; }
  .productos-lista strong{ font-size: .86rem; }
  .productos-lista span{ font-size: .8rem; }
}

/* Celular: productos de calidad con foto apaisada y lista limpia */
@media (max-width: 600px){
  .productos{ padding: 0 0 6px; gap: 0; overflow: hidden; }
  .productos-foto{ max-width: none; width: 100%; aspect-ratio: 16 / 10; border-radius: 0; box-shadow: none; }
  .productos-foto img{ object-position: 50% 68%; }
  .productos-texto{ padding: 18px 18px 6px; }
  .productos-texto .modalidades-etiqueta{ margin-top: -36px; position: relative; box-shadow: var(--sombra-md); }
  .productos-texto h3{ margin-bottom: 6px; }
  .productos-texto > p{ max-width: 30ch; margin-left: auto; margin-right: auto; margin-bottom: 8px; }

  .productos-lista{ gap: 0; }
  .productos-lista li{ background: none; border: 0; border-radius: 0; padding: 12px 2px; align-items: center; }
  .productos-lista li + li{ border-top: 1px solid var(--borde); }
  .producto-punto{ margin-top: 0; }
}

/* Celular: "Cómo funciona" como línea de tiempo animada */
@media (max-width: 600px){
  .seccion-pasos .cabecera-seccion{ margin-bottom: 30px; }
  .seccion-pasos .titulo-seccion{ font-size: 1.75rem; }
  .pasos{ max-width: 380px; margin-top: 14px; }
  .paso{
    grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center;
    padding: 14px 14px 14px 12px; margin-bottom: 26px;
    background: var(--fondo); border: 1px solid var(--borde); border-radius: 18px;
  }
  .paso:last-child{ margin-bottom: 0; padding-bottom: 14px; }
  .paso-icono{ width: 52px; height: 52px; border-radius: 16px; font-size: 1.15rem; box-shadow: var(--sombra-sm); }
  .paso-icono::after{ width: 22px; height: 22px; font-size: .7rem; top: -7px; right: -7px; }
  .paso h3{ font-size: 1.05rem; margin: 0 0 2px; align-self: end; }
  .paso p{ font-size: .88rem; line-height: 1.45; color: var(--gris); }

  /* Conector entre tarjetas: guía gris + relleno rojo que se dibuja hacia abajo */
  .paso:not(:last-child)::before,
  .paso:not(:last-child)::after{ content: ""; position: absolute; left: 37px; top: calc(100% + 1px); height: 24px; width: 0; border-left: 2px dashed var(--borde); }
  .paso:not(:last-child)::after{ border-left-color: var(--rojo); transform: scaleY(0); transform-origin: top; }
  .pasos.animar .paso:nth-child(1)::after{ animation: conector .4s cubic-bezier(.45,0,.25,1) .3s both; }
  .pasos.animar .paso:nth-child(2)::after{ animation: conector .4s cubic-bezier(.45,0,.25,1) .95s both; }
}
@keyframes conector{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }
@media (max-width: 600px) and (prefers-reduced-motion: reduce){
  .paso:not(:last-child)::after{ transform: none; animation: none !important; }
}

/* Celular: compromiso social más liviano y proporcionado */
@media (max-width: 600px){
  .social-caja{ padding: 28px 18px 20px; gap: 22px; }
  .social-etiqueta{ font-size: .68rem; padding: 5px 12px; margin-bottom: 12px; }
  .social-texto h2{ font-size: 1.6rem; line-height: 1.15; margin-bottom: 10px; text-wrap: balance; }
  .social-texto p{ font-size: .95rem; line-height: 1.55; max-width: 32ch; }
  .social-texto .social-gracias{ font-size: .82rem; margin-top: 4px; }

  .social-contador{ padding: 16px 14px; border-radius: 18px; }
  .social-huellas{ gap: 8px; max-width: 260px; margin: 0 auto; }
  .social-huellas span{ width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; }
  .social-huellas svg{ width: 20px; height: 20px; }
  .social-igual{ margin: 8px 0; }
  .social-regalo{ padding: 12px; gap: 12px; border-radius: 14px; }
  .social-regalo-icono{ flex-basis: 38px; height: 38px; }
  .social-regalo strong{ font-size: .92rem; }
  .social-regalo small{ font-size: .78rem; line-height: 1.45; }
}

/* Tarifas: "Vacuna" como parte del nombre en escritorio, etiqueta pequeña en celular */
.tarifa h4 small{ font: inherit; color: inherit; }

/* Celular: tarifas de vacunación con pack horizontal y filas limpias */
@media (max-width: 600px){
  .tarifas{ padding: 24px 14px 18px; }
  .tarifas .modalidades-cabecera{ margin-bottom: 26px; }

  /* Pack Anual: tarjeta horizontal */
  .tarifa-destacada{
    display: grid; grid-template-columns: 44px 1fr auto; column-gap: 12px; row-gap: 2px;
    align-items: center; text-align: left; padding: 24px 16px 16px;
    background: linear-gradient(160deg, #fff 0%, #fff6f6 100%);
    box-shadow: 0 18px 36px -22px rgba(227,29,36,.55);
  }
  .tarifa-destacada .tarifa-cinta{ left: 16px; transform: none; top: -13px; font-size: .66rem; padding: 5px 12px; }
  .tarifa-destacada .tarifa-icono{ grid-column: 1; grid-row: 1 / span 2; margin: 0; width: 44px; height: 44px; }
  .tarifa-destacada h4{ grid-column: 2; grid-row: 1; margin: 0; font-size: 1.02rem; align-self: end; }
  .tarifa-destacada .tarifa-detalle{ grid-column: 2; grid-row: 2; font-size: .8rem; align-self: start; }
  .tarifa-destacada .tarifa-precio{ grid-column: 3; grid-row: 1 / span 2; margin: 0; font-size: 1.65rem; text-align: right; line-height: 1; }
  .tarifa-destacada .tarifa-precio small{ display: block; font-size: .62rem; margin-top: 3px; }
  .tarifa-destacada .tarifa-ahorro{ grid-column: 1 / -1; grid-row: 3; justify-self: start; margin: 14px 0 0; }
  .tarifa-destacada .btn{ grid-column: 1 / -1; grid-row: 4; justify-self: stretch; margin-top: 12px; --pad-y: 11px; }

  /* Vacunas sueltas */
  .tarifa:not(.tarifa-destacada){ padding: 12px 12px 12px 14px; }
  .tarifa:not(.tarifa-destacada) h4{ line-height: 1.15; font-size: .95rem; }
  .tarifa:not(.tarifa-destacada) h4 small{ display: block; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin-bottom: 2px; }
  .tarifa:not(.tarifa-destacada) .tarifa-precio{ font-size: 1.05rem; }
  .tarifa:not(.tarifa-destacada):hover{ transform: none; }

  .tarifas-nota{ justify-content: center; text-align: center; font-size: .78rem; margin-top: 16px; }
}

/* Celular: vacunas sueltas en dos niveles (nombre arriba, precio abajo) para que nunca se salgan */
@media (max-width: 600px){
  .tarifa:not(.tarifa-destacada){
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0;
    align-items: center; text-align: left; padding: 12px 12px 12px 14px;
  }
  .tarifa:not(.tarifa-destacada) .tarifa-icono{ grid-column: 1; grid-row: 1 / span 2; margin: 0; width: 40px; height: 40px; }
  .tarifa:not(.tarifa-destacada) h4{ grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: .95rem; line-height: 1.2; }
  .tarifa:not(.tarifa-destacada) h4 small{ display: inline; font: inherit; color: inherit; letter-spacing: 0; text-transform: none; margin: 0; }
  .tarifa:not(.tarifa-destacada) .tarifa-precio{ grid-column: 2; grid-row: 2; align-self: start; margin: 2px 0 0; font-size: 1rem; color: var(--rojo); }
  .tarifa:not(.tarifa-destacada) .btn{ grid-column: 3; grid-row: 1 / span 2; --pad-x: 14px; --pad-y: 8px; font-size: .8rem; }
}

/* Celulares angostos (≤ 380px): tarifas más compactas */
@media (max-width: 380px){
  .tarifas{ padding-left: 10px; padding-right: 10px; }
  .tarifa-destacada{ grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: 10px; padding: 22px 12px 14px; }
  .tarifa-destacada .tarifa-icono{ width: 38px; height: 38px; }
  .tarifa-destacada h4{ font-size: .95rem; }
  .tarifa-destacada .tarifa-precio{ font-size: 1.35rem; }
  .tarifa:not(.tarifa-destacada){ grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 10px; padding: 10px; }
  .tarifa:not(.tarifa-destacada) .tarifa-icono{ width: 34px; height: 34px; }
  .tarifa:not(.tarifa-destacada) h4{ font-size: .88rem; }
  .tarifa:not(.tarifa-destacada) .btn{ --pad-x: 12px; }
}

/* Selector de modalidad (pestañas): solo en celular; en escritorio se ven las dos tarjetas */
.selector-modalidad{ display: none; }
@media (max-width: 600px){
  .selector-modalidad{
    position: relative; display: grid; grid-template-columns: 1fr 1fr;
    padding: 5px; margin: 0 auto 14px; max-width: 340px;
    background: var(--blanco); border: 1px solid #dde6fb; border-radius: 9999px; box-shadow: var(--sombra-sm);
  }
  /* Píldora que se desliza bajo la opción activa */
  .selector-modalidad::before{
    content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
    border-radius: 9999px; background: #4f6ef0; box-shadow: 0 6px 14px -6px rgba(79,110,240,.7);
    transition: transform .35s var(--ease);
  }
  .selector-modalidad[data-activa="1"]::before{ transform: translateX(100%); }
  .selector-modalidad button{
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 8px; border: 0; background: none; cursor: pointer; border-radius: 9999px;
    font: 700 .9rem var(--fuente); color: var(--tinta-2); transition: color .25s;
  }
  .selector-modalidad button[aria-selected="true"]{ color: #fff; }

  /* Solo se muestra la tarjeta elegida */
  .modalidades-grid{ display: block; }
  .modalidad:not(.activa){ display: none; }
  .modalidad.activa{ animation: aparece .35s var(--ease); }
  .modalidad{ align-items: stretch; text-align: left; }
  .modalidad-top{ display: none; }
  .modalidad h4{ font-size: 1.15rem; }
  .modalidad p{ font-size: .95rem; line-height: 1.55; }
  .modalidad .btn{ width: 100%; align-self: stretch; }
}

/* Manito que indica que se puede elegir la modalidad (desaparece al primer toque) */
.selector-pista{ display: none; }
@media (max-width: 600px){
  .selector-modalidad{ margin-bottom: 6px; }
  .selector-pista{ display: block; text-align: center; margin: 0 0 14px; font-size: .78rem; font-weight: 600; color: #4f6ef0; transition: opacity .3s; }
  .selector-modalidad.usado + .selector-pista{ opacity: 0; height: 0; margin: 0; overflow: hidden; }

  .mano-guia{
    position: absolute; z-index: 2; left: 72%; top: 58%; pointer-events: none;
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    opacity: 0;
  }
  .mano-guia i{ font-size: 2rem; color: #fff; -webkit-text-stroke: 1.4px var(--tinta); filter: drop-shadow(0 4px 6px rgba(15,23,42,.35)); transform-origin: 40% 10%; }
  .mano-onda{ position: absolute; left: 4px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: rgba(79,110,240,.45); opacity: 0; }

  .selector-modalidad.ver .mano-guia{ animation: manoMueve 2.8s ease-in-out .4s infinite; }
  .selector-modalidad.ver .mano-guia i{ animation: manoToca 2.8s ease-in-out .4s infinite; }
  .selector-modalidad.ver .mano-onda{ animation: manoOnda 2.8s ease-out .4s infinite; }
  .selector-modalidad.usado .mano-guia{ animation: none; opacity: 0; transition: opacity .2s; }

  /* Sutil invitación en la pestaña inactiva */
  .selector-modalidad.ver:not(.usado) button[aria-selected="false"]{ animation: pestanaInvita 2.8s ease-in-out .4s infinite; }
}
@keyframes manoMueve{
  0%   { opacity: 0; transform: translate(26px, 22px); }
  18%  { opacity: 1; transform: translate(0, 0); }
  70%  { opacity: 1; transform: translate(0, 0); }
  85%, 100% { opacity: 0; transform: translate(10px, 14px); }
}
@keyframes manoToca{
  0%, 30% { transform: scale(1); }
  38%     { transform: scale(.82) rotate(-6deg); }
  48%, 100% { transform: scale(1); }
}
@keyframes manoOnda{
  0%, 36% { opacity: 0; transform: scale(.4); }
  40%     { opacity: 1; transform: scale(.6); }
  70%, 100% { opacity: 0; transform: scale(3); }
}
@keyframes pestanaInvita{
  0%, 34%, 60%, 100% { background: transparent; }
  40%, 52% { background: rgba(79,110,240,.12); }
}
@media (prefers-reduced-motion: reduce){
  .mano-guia{ display: none; }
}

/* Patita de gatito en lugar de la manito */
@media (max-width: 600px){
  .mano-guia{ left: 70%; top: 40%; width: 30px; height: 46px; align-items: flex-start; }
  .patita{ width: 30px; height: 46px; display: block; filter: drop-shadow(0 4px 5px rgba(15,23,42,.25)); transform-origin: 50% 20%; }
  .mano-onda{ left: 6px; top: -4px; background: rgba(255,159,178,.55); }
  .selector-modalidad.ver .patita{ animation: manoToca 2.8s ease-in-out .4s infinite; }
}
@media (max-width: 600px){
  .mano-guia{ left: auto; right: 6%; top: 62%; width: 42px; height: 64px; }
  .patita{ width: 42px; height: 64px; }
  .mano-onda{ left: 12px; top: 0; }
}

/* Huellita guía: cae como sello sobre la pestaña "Pickup" */
@media (max-width: 600px){
  .mano-guia{ left: auto; right: 9%; top: 50%; width: 36px; height: 36px; margin-top: -18px; align-items: center; }
  .patita{ width: 36px; height: 36px; fill: #ff6b81; stroke: #fff; stroke-width: 3px; paint-order: stroke; filter: drop-shadow(0 3px 5px rgba(227,29,36,.35)); transform: rotate(18deg); }
  .mano-onda{ left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: rgba(255,107,129,.45); }
  .selector-modalidad.ver .mano-guia{ animation: huellaSello 2.8s ease-in-out .4s infinite; }
  .selector-modalidad.ver .patita{ animation: none; }
}
@keyframes huellaSello{
  0%   { opacity: 0; transform: translate(-14px, -26px) scale(1.6) rotate(20deg); }
  22%  { opacity: 1; transform: translate(0, 0) scale(.85) rotate(0); }
  30%  { transform: translate(0, 0) scale(1) rotate(0); }
  70%  { opacity: 1; transform: translate(0, 0) scale(1); }
  90%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}
@media (max-width: 600px){ .mano-guia{ right: 2%; } }
/* Huellita más pequeña y en el borde derecho de la pestaña, sin tapar el texto */
@media (max-width: 600px){
  .mano-guia{ right: 9px; width: 22px; height: 22px; margin-top: -11px; }
  .patita{ width: 22px; height: 22px; stroke-width: 4px; }
  .mano-onda{ width: 16px; height: 16px; margin: -8px 0 0 -8px; }
}
@media (max-width: 600px){
  .selector-modalidad:not(.usado) button[data-modalidad="1"]{ padding-right: 28px; }
}

/* Celular: productos de calidad v2 — fichas con el color de cada botella */
@media (max-width: 600px){
  .productos-foto{ position: relative; aspect-ratio: 4 / 3; }
  .productos-foto::after{ content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events: none; }
  .productos-foto img{ object-position: 50% 62%; }
  .productos-texto{ padding: 0 16px 8px; }
  .productos-texto .modalidades-etiqueta{ margin-top: -22px; z-index: 1; }
  .productos-texto h3{ font-size: 1.2rem; }
  .productos-texto > p{ font-size: .9rem; margin-bottom: 16px; }

  .productos-lista{ gap: 10px; }
  .productos-lista li{
    position: relative; display: block; text-align: left;
    padding: 12px 14px 12px 18px; border-radius: 14px;
    background: var(--fondo); border: 1px solid var(--borde);
  }
  .productos-lista li + li{ border-top: 1px solid var(--borde); }
  .productos-lista li::before{ content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--color-producto); }
  .productos-lista li:nth-child(1){ --color-producto: #d9372f; }
  .productos-lista li:nth-child(2){ --color-producto: #ea7d1f; }
  .productos-lista li:nth-child(3){ --color-producto: #5aa833; }
  .producto-punto{ display: none; }
  .productos-lista strong{ font-size: .92rem; margin-bottom: 3px; }
  .productos-lista span{ font-size: .84rem; line-height: 1.45; }
}
@media (max-width: 600px){
  .productos-lista .producto-punto{ display: none; }
  .productos-lista li::before{ left: -1px; }
  .productos-foto::after{ height: 22%; }
}

/* Celular: zonas de atención compactas y ordenadas */
@media (max-width: 600px){
  .cinta-caja{ padding: 16px; gap: 0; }
  .cinta-label{ justify-content: center; border-bottom: 0; margin: 0 0 12px; padding: 0; gap: 10px; }
  .cinta-label-icono{ width: 36px; height: 36px; border-radius: 11px; font-size: .9rem; }
  .cinta-label strong{ font-size: 1rem; }
  .cinta-label small{ font-size: .74rem; }

  /* Los tres sectores en una fila pareja */
  .cinta-items.cinta-fija{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0; }
  .cinta-items.cinta-fija li{
    flex-direction: column; justify-content: center; gap: 6px; text-align: center;
    padding: 10px 4px; border-radius: 12px; font-size: .78rem; line-height: 1.2; white-space: normal;
  }
  .cinta-items.cinta-fija li::before{ width: 6px; height: 6px; }

  .cinta-consulta{ justify-content: center; margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--borde); font-size: .82rem; }
}

/* Celular: sectores sin recuadros, separados por líneas finas */
@media (max-width: 600px){
  .cinta-items.cinta-fija{ gap: 0; margin: 4px 0 2px; }
  .cinta-items.cinta-fija li{
    background: none; border: 0; border-radius: 0; padding: 4px 6px;
    font-size: .84rem; font-weight: 700; color: var(--tinta); gap: 5px;
  }
  .cinta-items.cinta-fija li + li{ border-left: 1px solid var(--borde); }
  .cinta-items.cinta-fija li::before{
    content: "\f3c5"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    width: auto; height: auto; background: none; box-shadow: none; border-radius: 0;
    color: var(--rojo); font-size: .85rem;
  }
  .cinta-consulta{ border-top: 0; padding-top: 6px; margin-top: 10px; }
}

/* Celular: zonas de atención como franja simple, sin tarjeta */
@media (max-width: 600px){
  .cinta-caja{ background: none; border: 0; box-shadow: none; padding: 0; text-align: center; }
  .cinta-label{ margin: 0 0 8px; }
  .cinta-label-icono{ display: none; }
  .cinta-label strong{ display: none; }
  .cinta-label small{ display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rojo); }
  .cinta-label small::before{ content: "\f3c5"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .8rem; }

  .cinta-items.cinta-fija{ display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; margin: 0; }
  .cinta-items.cinta-fija li{ display: inline; padding: 0; font-size: 1.02rem; font-weight: 700; }
  .cinta-items.cinta-fija li + li{ border-left: 0; }
  .cinta-items.cinta-fija li::before{ content: none; }
  .cinta-items.cinta-fija li + li::before{ content: "·"; display: inline; font-family: inherit; color: var(--rojo); margin: 0 10px; font-size: 1.1rem; }

  .cinta-consulta{ margin-top: 8px; padding-top: 0; font-size: .8rem; color: var(--gris); }
  .cinta-consulta:hover{ color: var(--rojo); }
}
@media (max-width: 600px){
  .cinta-items.cinta-fija{ flex-wrap: nowrap; white-space: nowrap; }
  .cinta-items.cinta-fija li{ font-size: .92rem; }
  .cinta-items.cinta-fija li + li::before{ margin: 0 7px; }
}
@media (max-width: 380px){
  .cinta-items.cinta-fija li{ font-size: .8rem; }
  .cinta-items.cinta-fija li + li::before{ margin: 0 5px; }
}

/* Celular: sectores perfectamente alineados, separados por puntos centrados */
@media (max-width: 600px){
  .cinta-items.cinta-fija{ align-items: center; justify-content: center; }
  .cinta-items.cinta-fija li{ display: inline-flex; align-items: center; line-height: 1; padding: 0; gap: 0; color: var(--tinta); }
  .cinta-items.cinta-fija li + li::before{
    content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px; border-radius: 50%;
    background: var(--rojo); font-size: 0;
  }
  .cinta-label{ margin-bottom: 10px; }
  .cinta-consulta{ margin-top: 12px; }
}
@media (max-width: 380px){
  .cinta-items.cinta-fija li + li::before{ margin: 0 7px; }
}
@media (max-width: 600px){
  .cinta-items.cinta-fija li{ flex-direction: row; text-align: left; }
}

/* Celular: sección Servicios (resumen) más fina */
@media (max-width: 600px){
  #servicios .cabecera-seccion{ margin-bottom: 22px; }
  #servicios .titulo-seccion{ font-size: 1.6rem; line-height: 1.15; }
  #servicios .titulo-seccion br{ display: none; }
  #servicios .sub-seccion{ font-size: .92rem; line-height: 1.5; max-width: 32ch; margin-top: 10px; }

  .servicio-media{ aspect-ratio: 2.4 / 1; }
  .servicio-desc{ font-size: .88rem; }

  /* Botón y enlace siempre en una línea */
  .servicio-acciones{ flex-wrap: nowrap; }
  .servicio-acciones .btn{ --pad-x: 14px; --pad-y: 10px; font-size: .8rem; white-space: nowrap; }
  .servicio-acciones .enlace-flecha{ white-space: nowrap; font-size: .8rem; gap: 5px; }

  /* Botón flotante de WhatsApp más discreto en celular */
  .wa-flotante{ width: 50px; height: 50px; font-size: 1.55rem; right: 14px; bottom: 14px; }
  .wa-burbuja{ right: 74px; bottom: 18px; }
}

/* Celular: portada que entra completa en la primera pantalla */
@media (max-width: 600px){
  .hero{ padding: 12px 0 32px; }
  .hero-grid{ gap: 6px; }
  .hero-visual{ max-width: 210px; }
  .hero-marco{ padding: 4%; }
  .chip{ margin-bottom: 0; }
  .hero-titulo{ font-size: 1.85rem; margin: 12px 0 10px; }
  .hero-sub{ font-size: .95rem; margin-bottom: 18px; max-width: 30ch; }
  .hero-confianza{ margin-top: 18px; }
}
@media (max-width: 380px){
  .hero-visual{ max-width: 180px; }
  .hero-titulo{ font-size: 1.7rem; }
}

/* Celular: ilustración de la portada más grande y protagonista */
@media (max-width: 600px){
  .hero{ padding-top: 4px; }
  .hero-visual{ max-width: 300px; margin-bottom: -10px; }
  .hero-marco{ padding: 0; }
  .hero-marco img{ transform: scale(1.1); }
}
@media (max-width: 380px){
  .hero-visual{ max-width: 270px; }
}

/* Celular: imagen de la portada centrada y separada del texto */
@media (max-width: 600px){
  .hero-visual{ width: 88%; max-width: 320px; margin: 0 auto 8px; }
  .hero-marco img{ transform: scale(1.04); }
  .hero-texto{ padding: 0 4px; }
}

/* Celular: sin la fila de ventajas en la portada (el botón queda como cierre) */
@media (max-width: 600px){
  .hero-confianza{ display: none; }
}

/* Celular: "Ver servicios" discreto, con flecha que rebota suave */
@media (max-width: 600px){
  .hero-cta .btn-claro,
  .hero-cta .btn-claro:hover,
  .hero-cta .btn-claro:focus,
  .hero-cta .btn-claro:active{ color: var(--gris); background: none; font-size: .78rem; font-weight: 600; }
  .hero-cta .btn-claro i{ font-size: .8em; animation: flechaBaja 1.8s ease-in-out infinite; }
}
@keyframes flechaBaja{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce){ .hero-cta .btn-claro i{ animation: none; } }

/* Celular: rastro de patitas en una franja propia arriba de la tarjeta */
@media (max-width: 600px){
  .social-caja{ padding-top: 58px; }
  .social-rastro svg{ width: 22px; height: 22px; fill: rgba(227,29,36,.22); }
  .social-rastro svg:nth-child(1){ --x: 5% !important; --y: 14px !important; }
  .social-rastro svg:nth-child(2){ --x: 15% !important; --y: 28px !important; }
  .social-rastro svg:nth-child(3){ --x: 25% !important; --y: 14px !important; }
  .social-rastro svg:nth-child(4){ --x: 35% !important; --y: 28px !important; }
  .social-rastro svg:nth-child(5){ --x: 45% !important; --y: 14px !important; }
  .social-rastro svg:nth-child(6){ --x: 55% !important; --y: 28px !important; }
  .social-rastro svg:nth-child(7){ --x: 65% !important; --y: 14px !important; }
  .social-rastro svg:nth-child(8){ --x: 75% !important; --y: 28px !important; }
  .social-rastro svg:nth-child(9){ --x: 85% !important; --y: 14px !important; }
}

/* =========================================================
   Portada con vida: rastro de patitas, ilustración flotando y brillos
   ========================================================= */
.hero-rastro{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-rastro svg{
  position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px;
  fill: rgba(227,29,36,.10); opacity: 0;
  animation: pisadaHero 6.5s ease-out var(--d) infinite;
}
.hero-rastro svg:nth-child(odd){ margin-left: -10px; }
@keyframes pisadaHero{
  0%   { opacity: 0; transform: rotate(40deg) scale(1.5); }
  6%   { opacity: 1; transform: rotate(40deg) scale(.9); }
  10%  { transform: rotate(40deg) scale(1); }
  50%  { opacity: 1; }
  70%, 100% { opacity: 0; transform: rotate(40deg) scale(1); }
}

/* Ilustración flotando suave */
.hero-marco{ animation: flotaIlustracion 5s ease-in-out infinite; }
@keyframes flotaIlustracion{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

/* Brillos que titilan alrededor de la ilustración */
.brillo{
  position: absolute; z-index: 2; left: var(--bx); top: var(--by); width: var(--bs); height: var(--bs);
  pointer-events: none; opacity: 0;
  background: #f5b8d0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: titila 2.8s ease-in-out var(--bd) infinite;
}
.brillo:nth-child(even){ background: #ffd36e; }
@keyframes titila{
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0); }
  50%      { opacity: 1; transform: scale(1) rotate(45deg); }
}

@media (max-width: 600px){
  .hero-rastro svg{ width: 22px; height: 22px; fill: rgba(227,29,36,.12); }
  .hero-rastro svg:nth-child(1){ --x: 6% !important;  --y: 96% !important; }
  .hero-rastro svg:nth-child(2){ --x: 14% !important; --y: 88% !important; }
  .hero-rastro svg:nth-child(3){ --x: 22% !important; --y: 78% !important; }
  .hero-rastro svg:nth-child(4){ --x: 6% !important;  --y: 70% !important; }
  .hero-rastro svg:nth-child(5){ --x: 92% !important; --y: 62% !important; }
  .hero-rastro svg:nth-child(6){ --x: 84% !important; --y: 52% !important; }
  .hero-rastro svg:nth-child(7){ --x: 92% !important; --y: 42% !important; }
  .hero-rastro svg:nth-child(8){ --x: 84% !important; --y: 32% !important; }
  .hero-rastro svg:nth-child(9){ --x: 92% !important; --y: 22% !important; }
  .hero-rastro svg:nth-child(10){ --x: 84% !important; --y: 12% !important; }
  @keyframes pisadaHeroM{
    0%   { opacity: 0; transform: rotate(-20deg) scale(1.5); }
    6%   { opacity: 1; transform: rotate(-20deg) scale(.9); }
    10%  { transform: rotate(-20deg) scale(1); }
    50%  { opacity: 1; }
    70%, 100% { opacity: 0; transform: rotate(-20deg) scale(1); }
  }
  .hero-rastro svg{ animation-name: pisadaHeroM; }
  .hero-marco{ animation-duration: 4.5s; }
  @keyframes flotaIlustracion{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
}

@media (prefers-reduced-motion: reduce){
  .hero-rastro, .brillo{ display: none; }
  .hero-marco{ animation: none; }
}

/* Escritorio: el rastro sube por el espacio entre el texto y la ilustración, sin pasar sobre el título */
@media (min-width: 601px){
  .hero-rastro svg:nth-child(1){ --x: 30% !important; --y: 94% !important; }
  .hero-rastro svg:nth-child(2){ --x: 36% !important; --y: 88% !important; }
  .hero-rastro svg:nth-child(3){ --x: 41% !important; --y: 80% !important; }
  .hero-rastro svg:nth-child(4){ --x: 47% !important; --y: 72% !important; }
  .hero-rastro svg:nth-child(5){ --x: 50% !important; --y: 62% !important; }
  .hero-rastro svg:nth-child(6){ --x: 54% !important; --y: 52% !important; }
  .hero-rastro svg:nth-child(7){ --x: 51% !important; --y: 42% !important; }
  .hero-rastro svg:nth-child(8){ --x: 55% !important; --y: 32% !important; }
  .hero-rastro svg:nth-child(9){ --x: 52% !important; --y: 22% !important; }
  .hero-rastro svg:nth-child(10){ --x: 56% !important; --y: 12% !important; }
  @keyframes pisadaHero{
    0%   { opacity: 0; transform: rotate(15deg) scale(1.5); }
    6%   { opacity: 1; transform: rotate(15deg) scale(.9); }
    10%  { transform: rotate(15deg) scale(1); }
    50%  { opacity: 1; }
    70%, 100% { opacity: 0; transform: rotate(15deg) scale(1); }
  }
}

/* Ilustración de la portada sin flotar */
.hero-marco{ animation: none !important; }

/* Estrellitas más visibles */
.brillo{ width: calc(var(--bs) * 1.5); height: calc(var(--bs) * 1.5); background: #ff7eb0; filter: drop-shadow(0 0 4px rgba(255,126,176,.6)); }
.brillo:nth-child(even){ background: #ffc23a; filter: drop-shadow(0 0 4px rgba(255,194,58,.6)); }
.brillo:nth-child(3n){ background: #b48cff; filter: drop-shadow(0 0 4px rgba(180,140,255,.6)); }

/* Las estrellitas quedan alrededor (no encima) de la ilustración */
.brillo{ margin: calc(var(--bs) * -.75) 0 0 calc(var(--bs) * -.75); }

/* Celular: patitas caminando en línea por la franja inferior de la portada */
@media (max-width: 600px){
  .hero-rastro svg:nth-child(1){ --x: 4% !important;  --y: 97% !important; }
  .hero-rastro svg:nth-child(2){ --x: 14% !important; --y: 93% !important; }
  .hero-rastro svg:nth-child(3){ --x: 24% !important; --y: 97% !important; }
  .hero-rastro svg:nth-child(4){ --x: 34% !important; --y: 93% !important; }
  .hero-rastro svg:nth-child(5){ --x: 44% !important; --y: 97% !important; }
  .hero-rastro svg:nth-child(6){ --x: 54% !important; --y: 93% !important; }
  .hero-rastro svg:nth-child(7){ --x: 64% !important; --y: 97% !important; }
  .hero-rastro svg:nth-child(8){ --x: 74% !important; --y: 93% !important; }
  .hero-rastro svg:nth-child(9){ --x: 84% !important; --y: 97% !important; }
  .hero-rastro svg:nth-child(10){ --x: 94% !important; --y: 93% !important; }
  .hero-rastro svg:nth-child(odd){ margin-left: 0; }
  @keyframes pisadaHeroM{
    0%   { opacity: 0; transform: rotate(90deg) scale(1.5); }
    6%   { opacity: 1; transform: rotate(90deg) scale(.9); }
    10%  { transform: rotate(90deg) scale(1); }
    50%  { opacity: 1; }
    70%, 100% { opacity: 0; transform: rotate(90deg) scale(1); }
  }
  .hero{ padding-bottom: 48px; }
}

/* Celular: ilustración sin el círculo de fondo */
@media (max-width: 600px){
  .hero-marco{ background: none; box-shadow: none; }
}

/* Celular: sin rastro de patitas en la portada */
@media (max-width: 600px){
  .hero-rastro{ display: none; }
  .hero{ padding-bottom: 32px; }
}

/* =========================================================
   Burbujas de jabón sobre la foto de productos
   ========================================================= */
.productos-foto{ position: relative; }
.burbujas{ position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.burbuja{
  position: absolute; left: var(--x); bottom: 18%;
  width: calc(var(--s) * 1.6); height: calc(var(--s) * 1.6); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0 12%, rgba(255,255,255,.25) 28%, rgba(190,225,255,.18) 60%, rgba(255,182,214,.35) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 6px rgba(255,255,255,.35);
  opacity: 0; animation: burbujaSube 7s ease-in var(--d) infinite;
  display: flex; align-items: center; justify-content: center;
}
.burbuja.con-huella{ width: calc(var(--s) * 2); height: calc(var(--s) * 2); }
.burbuja svg{ width: 55%; height: 55%; fill: rgba(255,126,176,.85); }
@keyframes burbujaSube{
  0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
  10%  { opacity: 1; transform: translate(4px, -20px) scale(1); }
  35%  { transform: translate(-8px, -90px) scale(1); }
  60%  { transform: translate(8px, -170px) scale(1.04); }
  82%  { opacity: 1; transform: translate(-6px, -240px) scale(1.08); }
  88%  { opacity: 0; transform: translate(-6px, -252px) scale(1.5); }
  100% { opacity: 0; transform: translate(-6px, -252px) scale(1.5); }
}
@media (prefers-reduced-motion: reduce){ .burbujas{ display: none; } }

/* Burbujas que se revientan al tocarlas */
.burbuja{ pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.burbuja::after{ content: ""; position: absolute; inset: -10px; border-radius: 50%; } /* área de toque más grande */
.burbuja-pop{ position: absolute; z-index: 3; pointer-events: none; width: 0; height: 0; }
.burbuja-pop::before{
  content: ""; position: absolute; left: calc(var(--t) / -2); top: calc(var(--t) / -2); width: var(--t); height: var(--t);
  border-radius: 50%; border: 2px solid rgba(255,255,255,.95); box-shadow: 0 0 8px rgba(255,182,214,.8);
  animation: popAro .45s ease-out forwards;
}
.burbuja-pop i{
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.95); box-shadow: 0 0 4px rgba(255,126,176,.9);
  animation: popGota .5s ease-out forwards;
}
@keyframes popAro{ from{ transform: scale(.7); opacity: 1; } to{ transform: scale(1.7); opacity: 0; } }
@keyframes popGota{ from{ transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; } to{ transform: rotate(var(--a)) translateX(calc(var(--t) * .9)) scale(.3); opacity: 0; } }
/* Burbujas: parten un poquito más abajo */
.burbuja{ bottom: 11%; }
.burbuja{ bottom: 5%; }
.burbuja{ bottom: 0; }

/* Burbujas: subida pareja, a velocidad constante y sin tirones */
.burbuja{ animation: burbujaSubeSuave 8s linear var(--d) infinite; }
@keyframes burbujaSubeSuave{
  0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
  8%   { opacity: 1; transform: translate(3px, -21px) scale(1); }
  25%  { transform: translate(-5px, -65px) scale(1); }
  45%  { transform: translate(5px, -117px) scale(1.01); }
  65%  { transform: translate(-5px, -169px) scale(1.02); }
  85%  { opacity: 1; transform: translate(4px, -221px) scale(1.05); }
  92%  { opacity: 0; transform: translate(4px, -239px) scale(1.4); }
  100% { opacity: 0; transform: translate(4px, -239px) scale(1.4); }
}

/* Burbujas más discretas: menos opacas para no tapar las etiquetas */
.burbuja{
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.85) 0 12%, rgba(255,255,255,.15) 28%, rgba(190,225,255,.10) 60%, rgba(255,182,214,.25) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.burbuja svg{ fill: rgba(255,126,176,.7); }

/* Computador: sin rastro de patitas en el bloque de compromiso (en celular se mantiene arriba) */
@media (min-width: 601px){
  .social-rastro{ display: none; }
}

/* =========================================================
   Peluquería spa: aromaterapia y musicoterapia destacadas
   ========================================================= */
.lista-check li.spa-plus{ color: #4f6ef0; font-weight: 700; }
.lista-check li.spa-plus::before{ display: none; }
.lista-check li.spa-plus i{
  flex: 0 0 22px; height: 22px; border-radius: 9999px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e0eaff; color: #4f6ef0; font-size: .66rem;
}
@media (max-width: 600px){
  #peluqueria .detalle-texto .lista-check li.spa-plus{ background: #eef3ff; border-color: #d6e2ff; }
  #peluqueria .detalle-texto .lista-check li.spa-plus i{ flex-basis: 20px; height: 20px; }
}

/* Notas musicales flotando sobre la ilustración de la peluquera */
.detalle-media{ position: relative; }
.notas{ position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.notas i{
  position: absolute; left: var(--nx); bottom: 30%; font-size: 1.2rem; color: #4f6ef0; opacity: 0;
  text-shadow: 0 2px 6px rgba(79,110,240,.3);
  animation: notaSube 4s ease-in-out var(--nd) infinite;
}
.notas i:nth-child(2){ font-size: .95rem; color: #ff7eb0; }
@keyframes notaSube{
  0%   { opacity: 0; transform: translate(0, 0) rotate(-10deg) scale(.6); }
  15%  { opacity: 1; transform: translate(6px, -14px) rotate(6deg) scale(1); }
  50%  { transform: translate(-6px, -48px) rotate(-6deg); }
  85%  { opacity: 1; transform: translate(6px, -82px) rotate(8deg); }
  100% { opacity: 0; transform: translate(0, -96px) rotate(0) scale(.9); }
}
@media (prefers-reduced-motion: reduce){ .notas{ display: none; } }

/* Notas musicales por los bordes libres de la ilustración, sin tapar a la peluquera ni al perro */
.notas i{ bottom: 12%; }
.notas i:nth-child(1){ left: 4% !important; }
.notas i:nth-child(2){ left: auto !important; right: 5%; bottom: 34%; }
.notas i:nth-child(3){ left: 8% !important; }

/* Sello de confianza: atención por médico veterinario */
.sello-vet{
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  padding: 8px 16px 8px 8px; border-radius: 9999px;
  background: var(--rojo-50); border: 1px solid #fbd0d0; color: var(--tinta-2); font-size: var(--fs-sm);
}
.sello-vet strong{ color: var(--tinta); }
.sello-vet-icono{ flex: 0 0 30px; height: 30px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--rojo); color: #fff; font-size: .8rem; }
.tarifas-nota strong{ color: var(--tinta-2); }
@media (max-width: 600px){
  .sello-vet{ display: flex; text-align: left; border-radius: 16px; font-size: .84rem; line-height: 1.35; margin: 0 auto 18px; max-width: 340px; }
}
@media (max-width: 600px){
  .sello-vet .sello-sep{ display: none; }
  .sello-vet .sello-sub{ display: block; color: var(--gris); font-size: .78rem; }
}
/* Sello: título arriba y detalle abajo, en todas las pantallas */
.sello-vet{ border-radius: 16px; padding: 10px 18px 10px 10px; line-height: 1.35; }
.sello-vet .sello-sep{ display: none; }
.sello-vet .sello-sub{ display: block; color: var(--gris); font-size: .82rem; }
.sello-vet-icono{ flex-basis: 34px; height: 34px; }

/* Modalidades: checks en azul, el único verde queda en el botón */
.modalidad-requisitos i{ background: #e0eaff; color: #4f6ef0; }

/* Peluquería: checks en azul; Aromaterapia y Musicoterapia destacadas con círculo azul relleno */
#peluqueria .lista-check li::before{ background: #e0eaff; color: #4f6ef0; }
#peluqueria .lista-check li.spa-plus i{ background: #4f6ef0; color: #fff; }