/* Veterinaria Almendra: salvia y crema, tinta firme. Bitter (firme) + Manrope (amable). */
@font-face { font-family: 'Bitter'; src: url('../_shared/fonts/bitter-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../_shared/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 200 800; font-display: swap; }

:root {
  --bg: #f7f4ec;
  --surface: #ece7d6;
  --fg: #20291f;
  --muted: #5a6350;
  --line: rgba(32, 41, 31, 0.16);
  --accent: #3f5c3a;
  --accent-fg: #f7f4ec;
  --font-display: 'Bitter', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --display-weight: 650;
  --display-tracking: -0.01em;
  --radius: 16px;
  --radius-lg: 26px;
}

.hero h1 span { color: var(--accent); }

/* Estado en vivo: se alimenta de data-open-hours (demo.js). Sin JS queda el horario en prosa. */
.estado { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.5rem; padding: 0.85rem 1.3rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: var(--step-0); font-weight: 600; color: var(--fg); }
.estado::before { content: ''; width: 0.6rem; height: 0.6rem; flex: none; border-radius: 999px; background: var(--muted); }
.estado[data-open='true'] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.estado[data-open='true']::before { background: var(--accent); animation: pulso 2.4s ease-in-out infinite; }
.estado-urgencias { background: transparent; }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .estado[data-open='true']::before { animation: none; } }

/* Cartilla de vacunación: pestañas por especie, cada una con foto y tabla de edades. */
.cartilla-tabs .tabs { margin-bottom: 2.5rem; }
.cartilla { display: grid; gap: 2rem; align-items: start; }
.cartilla-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5 / 4; background: var(--surface); }
.cartilla-media img { width: 100%; height: 100%; object-fit: cover; }
.cartilla-body .table { margin-top: 0.25rem; }
.cartilla-cta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin-top: 1.5rem; }
.cartilla-cta p { color: var(--fg-soft); }
.cartilla-cta a { color: var(--fg); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line); }
.cartilla-cta a:hover { text-decoration-color: var(--accent); }
@media (min-width: 800px) { .cartilla { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); gap: 3rem; } }

/* Urgencias: foto a sangre con el estado en vivo y el protocolo. */
.urgencias-band { position: relative; isolation: isolate; display: grid; align-items: end; min-height: clamp(28rem, 66svh, 42rem); padding-block: clamp(3rem, 7vw, 6rem); color: #fff; }
.urgencias-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.urgencias-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20, 26, 18, 0.86), rgba(20, 26, 18, 0.4) 55%, rgba(20, 26, 18, 0.08)); }
.urgencias-band h2 { color: #fff; font-size: var(--step-4); max-width: 16ch; }
.urgencias-band .estado { margin-top: 1.25rem; border-color: rgba(255, 255, 255, 0.35); background: rgba(20, 26, 18, 0.35); color: #fff; }
.urgencias-band .estado[data-open='true'] { border-color: #fff; background: color-mix(in srgb, var(--accent) 55%, rgba(20,26,18,0.4)); }
.urgencias-steps { display: grid; gap: 1rem; margin: 1.75rem 0 0; max-width: 30rem; counter-reset: paso; }
.urgencias-steps li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: baseline; }
.urgencias-steps li::before { counter-increment: paso; content: counter(paso); font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-2); line-height: 1; color: rgba(255, 255, 255, 0.75); }
.urgencias-steps p { color: rgba(255, 255, 255, 0.92); }
.urgencias-band .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.urgencias-band .price-note { color: rgba(255, 255, 255, 0.8); font-size: var(--step-0); }

/* Formas de pago, en prosa junto a los datos de contacto. */
.pagos { margin-top: 1.5rem; color: var(--fg-soft); }

/* Área táctil completa en los enlaces de precio (rejilla de servicios y lista corta): 44px de alto mínimo. */
.item-foot { align-items: center; }
.item-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0; }

/* Dos servicios sin foto: fila con hairline, precio alineado y enlace propio, en vez de flotar sueltos en la rejilla. */
.svc-list { margin-top: clamp(1.75rem, 4vw, 2.75rem); border-top: 1px solid var(--line); }
.svc-list li { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 0.4rem 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.svc-list h3 { font-size: var(--step-1); }
.svc-list p { margin-top: 0.35rem; color: var(--fg-soft); font-size: var(--step-0); max-width: 34rem; }
.svc-list .price { grid-column: 2; grid-row: 1; justify-self: end; color: var(--fg); font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-2); line-height: 1; letter-spacing: var(--display-tracking); }
.svc-list .item-link { grid-column: 2; grid-row: 2; justify-self: end; }
@media (min-width: 700px) { .svc-list li { grid-template-columns: 1fr auto auto; align-items: center; } .svc-list .item-link { grid-column: 3; grid-row: 1; } }

/* Hechos de la clínica: no son un orden ni un ranking, así que van sin numerar, como hairlines de hecho en hecho. */
.clinic-facts { display: grid; margin-top: 2.25rem; border-top: 1px solid var(--line); }
.clinic-facts li { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.clinic-facts h3 { font-size: var(--step-1); }
.clinic-facts p { margin-top: 0.4rem; color: var(--fg-soft); }