:root {
  --color-principal: #064878;
  --color-secundario: #0665b7;
  --color-complemento-1: #cc1519;
  --color-complemento-2: #f2eddf;
  --color-complemento-3: #FFFFFF;
  --color-texto: #26282B;
}

body {
  /* Las galletas decorativas sobresalen del borde de la pantalla a propósito. */
  overflow-x: hidden;
  overflow-x: clip;
  font-family: 'Roboto', sans-serif;
  color: var(--color-texto);
  background-color: var(--color-complemento-3);
}

h1, h2, h3, h4, h5, h6, .ac-fuente-titulo {
  font-family: 'Google Sans Flex', 'Roboto', sans-serif;
  font-weight: 700;
}

/* Encabezado */
.ac-encabezado {
  background-color: var(--color-complemento-3);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color .3s ease, box-shadow .3s ease;
}

/* El encabezado es fixed: el contenido necesita este espacio para no quedar debajo. */
.ac-cuerpo-con-espacio {
  padding-top: 88px;
}

.ac-logo {
  height: 64px;
  width: auto;
}

.ac-logo-icono {
  height: 52px;
  width: auto;
}

.ac-logo-pie {
  height: 100px;
  width: auto;
  margin-bottom: .75rem;
}

.navbar-nav .nav-link {
  color: var(--color-texto);
  font-weight: 500;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: var(--color-principal);
}

.ac-acceso-tutores {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

@media (min-width: 992px) {
  .navbar-nav .ac-acceso-tutores {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-secundario);
    border-radius: 50%;
    color: var(--color-principal);
    transition: background-color .2s ease, color .2s ease;
  }

  .navbar-nav .ac-acceso-tutores:hover {
    background-color: var(--color-principal);
    color: var(--color-complemento-3);
  }
}

.ac-boton-medico {
  background-color: var(--color-principal);
  color: var(--color-complemento-3);
  font-weight: 500;
  border-radius: 999px;
  padding: .5rem 1.25rem;
}

.ac-boton-medico:hover {
  background-color: #043457;
  color: var(--color-complemento-3);
}

.ac-boton-tutor {
  background-color: transparent;
  color: var(--color-principal);
  border: 1px solid var(--color-principal);
  font-weight: 500;
  border-radius: 999px;
  padding: .5rem 1.25rem;
}

.ac-boton-tutor:hover {
  background-color: var(--color-complemento-2);
  color: var(--color-principal);
}

.ac-boton-whatsapp {
  background-color: var(--color-complemento-1);
  color: var(--color-complemento-3);
  font-weight: 700;
  border-radius: 999px;
  padding: .75rem 2rem;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.ac-boton-whatsapp:hover {
  background-color: #a51014;
  color: var(--color-complemento-3);
}

/* Hero */
.ac-hero {
  background: linear-gradient(135deg, var(--color-principal), var(--color-secundario));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-complemento-3);
  padding: 5rem 0;
}

.ac-hero h1 {
  font-size: 2.75rem;
}

/* Entrada de los encabezados de servicios, tienda y contacto (assets/js/titulo-animado.js):
   mientras dura, el fondo es blanco y el degradado azul entra como capa con barrido. */
.ac-hero--animado {
  position: relative;
}

.ac-hero--animado > .container {
  position: relative;
  z-index: 1;
}

.ac-hero--animado.ac-titulo--animando {
  background: var(--color-complemento-3);
}

.ac-titulo--animando::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-principal), var(--color-secundario));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.65, 0, .35, 1);
}

.ac-titulo--animando.ac-titulo--fase-azul::before {
  transform: scaleX(1);
}

.ac-titulo--animando .ac-titulo-letra:not(.ac-visible) {
  visibility: hidden;
}

/* Hero de inicio (index.php). Capas, de atrás hacia adelante: fondo azul,
   marca gigante "AnimalClinic", perro y tarjeta de texto. Los estilos de esta
   sección son el estado FINAL; la animación de entrada (assets/js/inicio-hero.js)
   solo actúa mientras existe .ac-hero--animando. */
.ac-hero-inicio {
  /* El tercer límite cuida pantallas anchas pero bajas (tablet horizontal): el
     perro visible mide .898 de su ancho, así que con .85 de la altura del hero
     nunca llega hasta arriba. */
  --ancho-perro: min(780px, 56vw, calc((100vh - 88px) * .85));
  position: relative;
  min-height: calc(100vh - 88px);
  min-height: calc(100svh - 88px);
  display: flex;
  align-items: flex-start;
  padding: 3.5rem 0;
  overflow: hidden;
  background-color: var(--color-complemento-3);
}

.ac-hero-escena {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ac-hero-escena::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-principal);
  transform-origin: left center;
}

.ac-hero-marca {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32%;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-family: 'Google Sans Flex', 'Roboto', sans-serif;
  font-weight: 700;
  /* "AnimalClinic" mide ~5.5em de ancho: 17vw lo deja casi de borde a borde. */
  font-size: min(17vw, 20rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--color-complemento-3);
  opacity: .28;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, rgba(0,0,0,.25) 100%);
  mask-image: linear-gradient(to bottom, #000 30%, rgba(0,0,0,.25) 100%);
  user-select: none;
  pointer-events: none;
}

.ac-hero-marca-cursor,
.ac-cursor-escritura {
  display: inline-block;
  width: .06em;
  height: .72em;
  margin-right: -.06em; /* ancho neto cero: el texto centrado no se mueve al avanzar el cursor */
  background-color: currentColor;
  animation: ac-parpadeo .8s steps(1) infinite;
}

@keyframes ac-parpadeo {
  50% { opacity: 0; }
}

.ac-hero-perro {
  position: absolute;
  right: -3vw;
  width: var(--ancho-perro);
  max-width: none;
  height: auto;
  /* Depende del encuadre de inicio-perro.webp (1200×1500, corte inferior del
     perro en y=1282): quedan 218 px transparentes debajo, que equivalen a
     (1500 - 1282) / 1500 × 1.25 = .182 del ancho. Se baja un poco más (.19)
     porque las últimas filas del corte quedan semitransparentes por la
     compresión y dejan ver una franja azul. Si cambia la imagen, recalcular. */
  bottom: calc(var(--ancho-perro) * -.19);
}

/* Sin .container a propósito: la tarjeta va más pegada al borde izquierdo
   que el resto del contenido del sitio. */
.ac-hero-contenido {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 clamp(1rem, 4vw, 3.5rem);
  /* Sombra aquí y no en la tarjeta: la máscara del hueso recortaría su propio box-shadow. */
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, .18));
}

/* Tarjeta con forma de hueso. La máscara une tres capas: en cada extremo un par
   de círculos encimados (SVG de 110×200 escalado a la altura de la tarjeta, así
   las puntas siempre se tocan sin importar cuánto texto haya) y al centro el
   cuello, 12% más bajo arriba y abajo. --hueso-cuello-lado es dónde empieza el
   cuello desde cada orilla: debe caer dentro de las puntas y pasar la muesca
   (~11.5% de la altura). La tarjeta se pinta con el azul del contorno y ::before,
   1px adentro y con la misma máscara, con el blanco: queda un contorno de ~1px. */
.ac-hero-texto {
  --hueso-cuello-lado: 50px;
  position: relative;
  isolation: isolate;
  max-width: 480px;
  padding: 2.5rem 2.75rem;
  background-color: var(--color-secundario);
}

.ac-hero-texto::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background-color: var(--color-complemento-3);
}

.ac-hero-texto,
.ac-hero-texto::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 200' width='110' height='200'%3E%3Ccircle cx='55' cy='55' r='55'/%3E%3Ccircle cx='55' cy='145' r='55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 200' width='110' height='200'%3E%3Ccircle cx='55' cy='55' r='55'/%3E%3Ccircle cx='55' cy='145' r='55'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 200' width='110' height='200'%3E%3Ccircle cx='55' cy='55' r='55'/%3E%3Ccircle cx='55' cy='145' r='55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 200' width='110' height='200'%3E%3Ccircle cx='55' cy='55' r='55'/%3E%3Ccircle cx='55' cy='145' r='55'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-size: auto 100%, auto 100%, calc(100% - 2 * var(--hueso-cuello-lado)) 76%;
  mask-size: auto 100%, auto 100%, calc(100% - 2 * var(--hueso-cuello-lado)) 76%;
  -webkit-mask-position: left center, right center, center;
  mask-position: left center, right center, center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.ac-hero-texto h1 {
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--color-principal);
  margin-bottom: .75rem;
}

/* Botones flotantes de contacto (todas las páginas, ver includes/pie.php) */
.ac-flotantes {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1010;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.ac-flotante {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-complemento-3);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: transform .2s ease, background-color .2s ease;
}

.ac-flotante svg {
  width: 26px;
  height: 26px;
}

.ac-flotante:hover,
.ac-flotante:focus-visible {
  color: var(--color-complemento-3);
  transform: scale(1.08);
}

.ac-flotante:focus-visible {
  outline: 3px solid var(--color-secundario);
  outline-offset: 3px;
}

.ac-flotante--whatsapp {
  background-color: var(--color-complemento-1);
}

.ac-flotante--whatsapp:hover {
  background-color: #a51014;
}

.ac-flotante--llamada {
  background-color: var(--color-principal);
}

.ac-flotante--llamada:hover {
  background-color: #043457;
}

/* En móvil y tablet vertical la escena (azul + marca + perro) va arriba con
   altura propia y la tarjeta debajo, montada sobre el borde para tapar el
   corte recto del perro. */
@media (max-width: 991.98px) {
  .ac-hero-inicio {
    --ancho-perro: 85vw;
    display: block;
    min-height: 0;
    padding: 0 0 2.5rem;
  }

  .ac-hero-escena {
    position: relative;
    height: max(380px, 58svh);
  }

  .ac-hero-marca {
    font-size: 30vw;
    line-height: .85;
  }

  .ac-hero-marca-palabra {
    display: block;
  }

  .ac-hero-perro {
    right: auto;
    left: 50%;
    translate: -50% 0;
  }

  .ac-hero-contenido {
    margin-top: -2rem;
    padding: 0 .5rem;
  }

  .ac-hero-texto {
    --hueso-cuello-lado: 56px;
    margin-inline: auto;
    padding: 2.5rem 2.25rem;
  }

  .ac-hero-texto h1 {
    font-size: 1.45rem;
  }

  .ac-flotante {
    width: 52px;
    height: 52px;
  }
}

/* Animación de entrada */
/* Duraciones sincronizadas con las constantes de assets/js/inicio-hero.js. */
.ac-hero--animando .ac-hero-escena::before {
  transform: scaleX(0);
  transition: transform .9s cubic-bezier(.65, 0, .35, 1);
}

.ac-hero--animando.ac-hero--fase-azul .ac-hero-escena::before {
  transform: scaleX(1);
}

.ac-hero--animando .ac-hero-marca-letra:not(.ac-visible) {
  visibility: hidden;
}

.ac-hero--animando .ac-hero-marca {
  opacity: 1;
  transition: opacity 1.4s ease;
}

/* Perro: sube desde abajo y frena despacio. */
.ac-hero--animando .ac-hero-perro {
  transform: translateY(105%);
  opacity: 0;
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1), opacity 1s ease;
}

/* Tarjeta: entra desde la izquierda, desfasada para no llegar a la par del perro. */
.ac-hero--animando .ac-hero-texto {
  opacity: 0;
  transform: translateX(-2.5rem);
  transition: opacity 1.1s ease .55s, transform 1.3s cubic-bezier(.33, 1, .68, 1) .55s;
}

.ac-hero--animando.ac-hero--fase-final .ac-hero-marca {
  opacity: .28;
}

.ac-hero--animando.ac-hero--fase-final .ac-hero-perro,
.ac-hero--animando.ac-hero--fase-final .ac-hero-texto {
  transform: none;
  opacity: 1;
}

/* Sección dividida: foto a sangre en una mitad, texto en la otra. */
.ac-dividida {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ac-dividida-imagen,
.ac-dividida-mapa {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  /* Nunca más alta que la pantalla visible bajo el encabezado fijo. */
  max-height: calc(100vh - 88px);
  max-height: calc(100svh - 88px);
  object-fit: cover;
}

.ac-dividida-texto {
  align-self: center;
  max-width: 640px; /* mitad del ancho de .container en xl */
  padding: 4rem clamp(1.5rem, 5vw, 4.5rem);
}

@media (max-width: 991.98px) {
  .ac-dividida {
    grid-template-columns: 1fr;
  }

  .ac-dividida-imagen,
  .ac-dividida-mapa {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .ac-dividida-texto {
    max-width: none;
    padding: 2.5rem 1.25rem 3rem;
  }
}

/* Galletas decorativas (galletaDecorativa() en includes/encabezado.php).
   Van centradas sobre el borde superior de su sección, en la franja de padding
   entre una sección y otra: así no tapan texto ni fotos. La posición horizontal
   llega en línea (left: N%). z-index 2 las pone encima del fondo de la sección
   anterior. */
.ac-seccion,
.ac-dividida,
.ac-pie {
  position: relative;
}

.ac-galleta,
.ac-migas {
  --desplazamiento-y: -50%;
  position: absolute;
  top: 0;
  z-index: 2;
  width: clamp(90px, 10vw, 160px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transform: translate(-50%, var(--desplazamiento-y)) rotate(var(--giro));
}

/* Al tocarla "se come" (assets/js/galletas.js): sale con pop y deja .ac-migas. */
.ac-galleta {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .2));
  transition: scale .2s ease;
  animation: ac-flotar 4.5s ease-in-out var(--retraso, 0s) infinite;
}

@media (hover: hover) {
  .ac-galleta:hover {
    scale: 1.1;
  }
}

/* Más grande que la galleta: en su imagen las migas ocupan solo el centro del lienzo. */
.ac-migas {
  width: clamp(150px, 17vw, 270px);
  pointer-events: none;
  animation: ac-pop .5s cubic-bezier(.34, 1.56, .64, 1) .15s backwards;
}

@keyframes ac-flotar {
  0%, 100% { transform: translate(-50%, var(--desplazamiento-y)) rotate(var(--giro)); }
  50%      { transform: translate(-50%, calc(var(--desplazamiento-y) - 12px)) rotate(calc(var(--giro) + 8deg)); }
}

/* Aparición (assets/js/galletas.js): ocultas hasta que termina la entrada de la
   página y luego "pop" al entrar en pantalla. El pop usa la propiedad scale, que
   se combina con el transform del flotado sin pisarlo. Ocultas solo con opacity
   (sin scale) para que su caja siga midiendo lo real: de eso dependen
   IntersectionObserver y la carga diferida de la imagen. */
.ac-galletas-js .ac-galleta {
  opacity: 0;
  pointer-events: none; /* invisible todavía: que no se pueda "comer" a ciegas */
}

/* Relleno "backwards" (no "both"): al terminar el pop, scale vuelve a quedar libre
   para el agrandado al pasar el mouse. */
.ac-galletas-js .ac-galleta.ac-galleta--visible {
  opacity: 1;
  pointer-events: auto;
  animation:
    ac-flotar 4.5s ease-in-out var(--retraso, 0s) infinite,
    ac-pop .7s cubic-bezier(.34, 1.56, .64, 1) var(--retraso-pop, 0s) backwards;
}

@keyframes ac-pop {
  from { scale: 0; opacity: 0; }
  to   { scale: 1; opacity: 1; }
}

/* Mismo peso que la regla de arriba y declarada después, para ganarle. */
.ac-galleta.ac-galleta--comida,
.ac-galletas-js .ac-galleta.ac-galleta--comida {
  pointer-events: none;
  animation: ac-pop-salida .45s ease-in forwards;
}

@keyframes ac-pop-salida {
  0%   { scale: 1;    opacity: 1; }
  35%  { scale: 1.3;  opacity: 1; }
  100% { scale: 0;    opacity: 0; }
}

/* En las secciones divididas apiladas (móvil/tablet) la foto o el mapa (4:3 a
   todo el ancho) queda arriba: la galleta baja al borde superior del bloque de
   texto y pasa a la izquierda, lejos de la del pie de página (que va a la
   derecha). !important porque la posición de escritorio llega en línea. */
@media (max-width: 991.98px) {
  .ac-dividida > .ac-galleta,
  .ac-dividida > .ac-migas {
    top: 75vw;
    left: 18% !important;
  }
}

@media (max-width: 767.98px) {
  .ac-galleta {
    width: 80px;
  }

  .ac-migas {
    width: 135px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ac-galleta,
  .ac-migas {
    animation: none;
  }
}

/* Secciones generales */
.ac-seccion {
  padding: 4rem 0;
}

.ac-seccion-clara {
  background-color: var(--color-complemento-2);
}

.ac-etiqueta {
  color: var(--color-secundario);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
}

/* Tarjetas de servicio */
.ac-tarjeta {
  border: 1px solid var(--color-secundario);
  background-color: var(--color-complemento-3);
  border-radius: 1rem;
  padding: 2rem;
  height: 100%;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  transition: transform .2s ease;
}

.ac-tarjeta:hover {
  transform: translateY(-4px);
}

.ac-tarjeta-icono {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-complemento-2);
  color: var(--color-principal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* Ancho relativo a la propia tarjeta (no a la ventana): así nunca se sale de
   su columna sin importar el punto de quiebre (evita que se encimen entre
   tarjetas en tablet vertical, donde las 3 columnas son angostas). */
.ac-tarjeta-foto {
  display: block;
  width: 60%;
  max-width: 250px;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--color-complemento-2);
  margin: 0 auto 1rem;
}

.ac-insignia-cita {
  display: inline-block;
  vertical-align: middle;
  margin-left: .35rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  background-color: var(--color-complemento-1);
  color: var(--color-complemento-3);
  font-family: 'Roboto', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Tienda (tienda.php): filtros, galería justificada y visor. El encabezado
   reparte título y descripción en dos columnas a todo el ancho; los filtros
   van debajo, en su propia fila. */
.ac-tienda-encabezado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 1rem 3rem;
  margin-bottom: 2rem;
}

.ac-tienda-descripcion {
  font-size: 1.15rem;
}

.ac-tienda-encabezado .ac-tienda-filtros {
  grid-column: 1 / -1;
  margin-top: .5rem;
}

@media (max-width: 767.98px) {
  .ac-tienda-encabezado {
    grid-template-columns: minmax(0, 1fr);
  }

  .ac-tienda-descripcion {
    font-size: 1rem;
  }
}

.ac-tienda-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ac-tienda-filtro {
  border: 1px solid var(--color-secundario);
  background-color: var(--color-complemento-3);
  color: var(--color-principal);
  font-weight: 500;
  border-radius: 999px;
  padding: .45rem 1rem;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.ac-tienda-filtro span {
  font-size: .8em;
  opacity: .65;
  margin-left: .15rem;
}

.ac-tienda-filtro:hover {
  background-color: var(--color-complemento-2);
}

.ac-tienda-filtro[aria-pressed="true"] {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
  color: var(--color-complemento-3);
}

.ac-tienda-filtro:focus-visible,
.ac-galeria-item:focus-visible,
.ac-visor-boton:focus-visible {
  outline: 3px solid var(--color-secundario);
  outline-offset: 3px;
}

/* Filas justificadas: cada foto crece en proporción a su relación de aspecto,
   así todas las de una fila comparten altura y ninguna se recorta, mezclando
   horizontales y verticales. El ::after absorbe el espacio de la última fila
   para que no se estire. */
.ac-galeria {
  --alto-fila: 280px;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.ac-galeria::after {
  content: "";
  flex-grow: 999999;
}

.ac-galeria-item {
  position: relative;
  display: block;
  flex: calc(var(--proporcion) * 100) 1 calc(var(--proporcion) * var(--alto-fila));
  max-width: 100%;
  aspect-ratio: var(--proporcion);
  padding: 0;
  border: 0;
  border-radius: .9rem;
  overflow: hidden;
  background-color: var(--color-complemento-2);
  cursor: zoom-in;
}

.ac-galeria-item[hidden] {
  display: none;
}

.ac-galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .4s ease;
}

.ac-galeria-pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: .75rem;
  text-align: left;
  pointer-events: none;
}

.ac-galeria-categoria {
  background-color: var(--color-complemento-3);
  color: var(--color-principal);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 999px;
  padding: .2rem .65rem;
}

.ac-galeria-texto {
  color: var(--color-complemento-3);
  font-weight: 500;
  line-height: 1.3;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .3s ease;
}

/* Solo con mouse: al pasar sobre una foto se amplía, muestra su descripción y
   las demás se atenúan. En pantallas táctiles la descripción se lee en el visor. */
@media (hover: hover) {
  .ac-galeria-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, color-mix(in srgb, var(--color-principal) 85%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
  }

  .ac-galeria-pie {
    z-index: 2;
  }

  .ac-galeria-item:hover img,
  .ac-galeria-item:focus-visible img {
    transform: scale(1.06);
  }

  .ac-galeria-item:hover::before,
  .ac-galeria-item:focus-visible::before {
    opacity: 1;
  }

  .ac-galeria-item:hover .ac-galeria-texto,
  .ac-galeria-item:focus-visible .ac-galeria-texto {
    max-height: 4em;
    opacity: 1;
  }

  .ac-galeria:hover .ac-galeria-item:not(:hover) img {
    filter: saturate(.6) brightness(.85);
  }
}

/* Entrada escalonada al hacer scroll (la activa assets/js/galeria-tienda.js). */
.ac-galeria-item--por-revelar {
  opacity: 0;
  transform: translateY(1.25rem);
}

.ac-galeria-item--revelado {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 1199.98px) {
  .ac-galeria {
    --alto-fila: 220px;
  }
}

/* En móvil los filtros van en una sola fila deslizable para no ocupar media pantalla. */
@media (max-width: 767.98px) {
  .ac-galeria {
    --alto-fila: 150px;
    gap: .5rem;
  }

  .ac-galeria-item {
    border-radius: .6rem;
  }

  .ac-galeria-pie {
    padding: .5rem;
  }

  .ac-galeria-categoria {
    font-size: .62rem;
  }

  .ac-tienda-filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding: 0 3rem .25rem 0; /* el último filtro puede salir del desvanecido */
    scrollbar-width: none;
    /* Desvanecido a la derecha: indica que hay más filtros al deslizar. */
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }

  .ac-tienda-filtros::-webkit-scrollbar {
    display: none;
  }
}

/* Visor de foto ampliada */
html:has(.ac-visor[open]) {
  overflow: hidden;
}

.ac-visor {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1.5rem;
  border: 0;
  background: transparent;
}

.ac-visor[open] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.ac-visor::backdrop {
  background-color: rgba(0, 0, 0, .88);
  backdrop-filter: blur(4px);
}

.ac-visor-figura {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}

.ac-visor-imagen {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 8rem);
  object-fit: contain;
  border-radius: .5rem;
  transition: opacity .25s ease;
  touch-action: pan-y;
}

.ac-visor-imagen.ac-cargando {
  opacity: .2;
}

.ac-visor-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1rem;
  color: var(--color-complemento-3);
  text-align: center;
}

.ac-visor-contador {
  opacity: .65;
  font-size: .9rem;
}

.ac-visor-boton {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .14);
  color: var(--color-complemento-3);
  font-size: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}

.ac-visor-boton:hover {
  background-color: rgba(255, 255, 255, .28);
}

.ac-visor-boton[hidden] {
  display: none;
}

.ac-visor-cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

@media (max-width: 767.98px) {
  .ac-visor {
    padding: 4rem .75rem 5.5rem;
  }

  .ac-visor[open] {
    grid-template-columns: minmax(0, 1fr);
  }

  .ac-visor-anterior,
  .ac-visor-siguiente {
    position: absolute;
    bottom: 1.25rem;
  }

  .ac-visor-anterior {
    left: 1.25rem;
  }

  .ac-visor-siguiente {
    right: 1.25rem;
  }

  .ac-visor-imagen {
    max-height: calc(100dvh - 13rem);
  }
}

/* Lista de precios (servicios.php) */
.ac-tabla-precios {
  background-color: var(--color-complemento-3);
  border-radius: 1rem;
  padding: 1.5rem;
  height: 100%;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

.ac-tabla-precios-titulo {
  font-size: 1.1rem;
  color: var(--color-principal);
  margin-bottom: .75rem;
}

.ac-tabla-precios th {
  font-weight: 400;
  color: var(--color-texto);
}

.ac-tabla-precios td {
  font-weight: 700;
  color: var(--color-principal);
  white-space: nowrap;
}

.ac-tabla-precios tr:last-child > * {
  border-bottom: 0;
}

/* Lista de servicios con viñetas de patitas */
.ac-lista-patitas {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
}

.ac-lista-patitas li {
  padding-left: 1.75rem;
  position: relative;
  margin-bottom: .5rem;
  color: var(--color-texto);
}

.ac-lista-patitas li::before {
  content: "🐾";
  position: absolute;
  left: 0;
  top: -.05em;
  font-size: 1rem;
}

/* Pie de página */
.ac-pie {
  /* Retoma la franja roja bajo "Animal Clinic" del logo. */
  border-top: 6px solid var(--color-complemento-1);
  background-color: var(--color-complemento-3);
  color: var(--color-texto);
  padding: 3rem 0 1.5rem;
}

.ac-pie-titulo {
  color: var(--color-principal);
  font-family: 'Google Sans Flex', 'Roboto', sans-serif;
  margin-bottom: .75rem;
}

.ac-pie-texto {
  color: var(--color-texto);
  font-size: .9rem;
}

.ac-pie-texto a {
  color: var(--color-principal);
  font-weight: 500;
}

.ac-pie-linea {
  border-color: rgba(0,0,0,.1);
  margin: 2rem 0 1.5rem;
}