/* ============================================================
   OSICOS · Sitio público — sistema de diseño
   Basado fielmente en la Propuesta 1 "Naturaleza Cálida":
   editorial orgánico, Fraunces + Nunito Sans, terracota/oliva/crema.
   Sin frameworks, sin build step — CSS y JS planos con módulos ES.
   ============================================================ */

:root {
  /* Paleta de marca — idéntica a design-proposals/propuesta-1/style.css */
  --cream: #F6EFE4;
  --cream-2: #EFE5D5;
  --cream-3: #E7DDC9;
  --ink: #3A342C;
  /* Nota: --muted, --terra y --terra-dark se ajustaron respecto a la Propuesta 1
     original (más claros) para cumplir contraste WCAG 2.2 AA sobre crema/blanco
     y sobre blanco. Se conserva la identidad terracota/oliva, con tonos apenas
     más profundos. Ver auditoría de accesibilidad (Lighthouse) en la Fase 1. */
  --muted: #6b6255;
  --terra: #a8543a;       /* terracota de marca (fondo de botón con texto blanco: 5.26:1) */
  --terra-dark: #8f4530;  /* hover y texto terracota sobre fondos claros (>=5.3:1) */
  --terra-soft: #f6e4d0;
  --olive: #4A5D43;
  --olive-dk: #3a4a35;
  --sage: #8CA07E;        /* decorativo (fondos, puntos), no para texto */
  --sage-ink: #5f7550;    /* verde salvia legible como texto sobre blanco (5.06:1) */
  --sage-soft: #DDE6D3;

  /* Estados semánticos: se apoyan en la paleta de marca cuando es posible;
     el rojo de error es la única adición fuera de paleta a propósito — la
     claridad de "esto falló / esto se canceló" importa más que la pureza
     cromática, y un rojo distinto del terracota evita que un aviso de
     error se lea como una llamada a la acción. */
  --success-bg: var(--sage-soft);
  --success-text: var(--olive-dk);
  --warn-bg: var(--terra-soft);
  --warn-text: var(--terra-dark);
  --danger: #b3261e;
  --danger-bg: #f7dcd7;
  --danger-text: #8c2b1f;

  --shadow: 0 18px 40px rgba(74, 93, 67, .14);
  --shadow-sm: 0 8px 22px rgba(74, 93, 67, .10);
  --shadow-lift: 0 22px 48px rgba(58, 52, 44, .18);
  --radius: 24px;
  --radius-sm: 14px;
  --maxw: 1140px;

  /* Curvas de movimiento — ease-out marcado para entradas/interacción,
     ease-in-out para elementos que se mueven en pantalla. Nunca ease-in
     (arranca lento, se siente perezoso). Un solo sistema, usado en todo
     el sitio en vez de valores ".2s"/".15s" sueltos. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-panel: 280ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .serif { font-family: 'Fraunces', Georgia, serif; font-weight: 700; line-height: 1.12; }
.italic { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; }
img, svg { max-width: 100%; display: block; }
.icon { display: inline-block; flex: none; width: 20px; height: 20px; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font: inherit; }
input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section { padding: 88px 0; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-30 { margin-top: 30px; }
.no-pt { padding-top: 0; }
.muted { color: var(--muted); }
.block-title { color: var(--olive); font-size: 2.1rem; margin: 8px 0 12px; }
.align-center { align-items: center; }
.is-hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; background: var(--olive); color: #fff;
  padding: 12px 20px; border-radius: 12px; font-weight: 800; z-index: 200; transition: top .15s;
}
.skip-link:focus { top: 12px; }

.eyebrow { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.1rem; color: var(--terra); }
.sec-head { max-width: 640px; margin-bottom: 44px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--olive); margin: 8px 0 12px; }
.sec-head p { color: var(--muted); font-size: 1.08rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 800; font-size: 1rem; padding: 15px 30px; border-radius: 40px;
  border: 2px solid var(--terra); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-base) ease, border-color var(--dur-base) ease,
    color var(--dur-base) ease, transform var(--dur-fast) var(--ease-out);
}
.btn:active:not(:disabled):not(.is-disabled) { transform: scale(0.97); }
.btn-solid { background: var(--terra); color: #fff; }
.btn-solid:hover { background: var(--terra-dark); border-color: var(--terra-dark); }
.btn-ghost { background: transparent; color: var(--olive); border-color: var(--olive); }
.btn-ghost:hover { background: var(--olive); color: #fff; }
.btn-light { background: #fff; color: var(--terra); border-color: #fff; }
.btn-light:hover { background: var(--cream-2); }
.btn-text { background: none; border-style: none; padding: 8px 4px; color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }
.btn-danger { border-color: var(--danger); color: var(--danger); background: transparent; }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: .92rem; }
.btn:disabled, .btn.is-disabled { opacity: .55; cursor: not-allowed; }
.btn:disabled:active, .btn.is-disabled:active { transform: none; }
.btn .spinner { display: none; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .btn-label { opacity: .7; }

.spinner {
  width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.5);
  border-top-color: #fff; animation: spin .7s linear infinite;
}
.btn-ghost .spinner, .btn-text .spinner { border-color: rgba(74,93,67,.3); border-top-color: var(--olive); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Nav ---------- */
header.site-header {
  position: sticky; top: 0; z-index: 40; background: rgba(246, 239, 228, .92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--cream-2);
}
nav.site-nav { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.6rem; color: var(--olive); flex: none; }
.brand img { width: 42px; height: 42px; }
.nav-links { display: flex; gap: 22px; align-items: center; font-weight: 700; }
.nav-links a:not(.btn) { color: var(--ink); position: relative; padding: 6px 0; }
.nav-links a:not(.btn):hover { color: var(--terra); }
.nav-links a.active:not(.btn) { color: var(--terra); }
.nav-links a.active:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px;
  background: var(--terra); border-radius: 3px;
}
.nav-links .btn { padding: 11px 22px; font-size: .95rem; }
.nav-toggle {
  display: none; position: relative; width: 34px; height: 34px; background: none;
  border: none; cursor: pointer; padding: 0; flex: none;
}
.nav-toggle .bar {
  position: absolute; left: 5px; right: 5px; height: 2.5px; border-radius: 2px;
  background: var(--olive);
  transition: transform var(--dur-base) var(--ease-in-out), opacity var(--dur-fast) ease;
}
.nav-toggle .bar:nth-child(1) { top: 11px; }
.nav-toggle .bar:nth-child(2) { top: 16px; }
.nav-toggle .bar:nth-child(3) { top: 21px; }
.nav-toggle.is-open .bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle.is-open .bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.nav-auth { display: flex; align-items: center; gap: 10px; }
.nav-auth-name { font-weight: 800; color: var(--olive); font-size: .92rem; }
.nav-auth-name .hi { color: var(--muted); font-weight: 600; }

@media (max-width: 900px) {
  /* Menú desplegable móvil: panel OPACO y elevado (blanco, no crema — el
     crema es el fondo de la página y hacía que el panel fuera invisible),
     con divisores entre enlaces para que se lea como una lista, no como
     texto flotando sobre el hero.
     Se anima con el truco de grid-template-rows 0fr→1fr (en vez de un
     display:none/flex instantáneo): el contenido real vive en
     .nav-links-inner, que se recorta con overflow:hidden mientras la fila
     de grid crece. `visibility` se retrasa con transition-delay para que el
     panel cerrado no quede enfocable por teclado con altura 0. */
  .nav-links {
    display: grid; grid-template-rows: 0fr; position: absolute; left: 0; right: 0;
    top: 78px; background: #fff; visibility: hidden; opacity: 0;
    border-bottom: 1px solid var(--cream-3); box-shadow: var(--shadow);
    transition: grid-template-rows var(--dur-panel) var(--ease-out),
      opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-panel);
  }
  .nav-links-inner {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0;
    overflow: hidden auto; max-height: calc(100dvh - 78px); padding: 6px 22px 20px;
  }
  .nav-links.open {
    grid-template-rows: 1fr; visibility: visible; opacity: 1; transition-delay: 0s;
  }
  .nav-links-inner a:not(.btn) {
    padding: 15px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--cream-2);
  }
  .nav-links-inner a.active:not(.btn) { color: var(--terra); }
  .nav-links-inner a.active:not(.btn)::after { display: none; }
  .nav-links-inner .nav-auth { padding: 13px 4px 0; }
  .nav-links-inner .btn { width: 100%; margin-top: 14px; padding: 14px 22px; font-size: 1rem; }
  .nav-toggle { display: block; }
}
@media (min-width: 901px) {
  /* En escritorio el wrapper no debe alterar el flex del nav. */
  .nav-links-inner { display: contents; }
}

/* ---------- Page head band (páginas internas) ---------- */
.page-head { background: var(--sage-soft); padding: 64px 0 68px; position: relative; overflow: hidden; }
.page-head .crumb { font-weight: 700; color: var(--olive); margin-bottom: 10px; font-size: .95rem; }
.page-head .crumb .italic { color: var(--terra-dark); }
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--olive); }
.page-head h1 .italic { color: var(--terra); }
.page-head p { color: var(--muted); font-size: 1.1rem; max-width: 560px; margin-top: 14px; }
.page-head .paw {
  position: absolute; right: -2%; bottom: -22%; width: 15rem; height: 15rem;
  color: var(--olive); opacity: .1; transform: rotate(-12deg);
}

/* ---------- Hero (Inicio) ---------- */
.hero { padding: 60px 0 84px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); color: var(--olive); }
.hero h1 .italic { color: var(--terra); }
.hero p { font-size: 1.15rem; color: var(--muted); margin: 20px 0 30px; max-width: 480px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-actions.center { justify-content: center; }
.hero-note { margin-top: 30px; display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--olive); }
.hero-note .dots { display: flex; }
.hero-note .dots span {
  width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--cream);
  margin-left: -12px; display: grid; place-items: center; background: var(--sage-soft); color: var(--olive);
}
.hero-note .dots span .icon { width: 17px; height: 17px; }
.hero-note .dots span:first-child { margin-left: 0; }
/* ---------- Nosotros · Nuestra historia ----------
   Collage de tres fotos reales (una alta y dos apiladas) con una insignia «24 h»,
   y cuatro razones con icono. Sustituye al logo sobre una mancha verde, que no
   decía nada de la clínica. */
.story { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.story-photos {
  position: relative; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px;
  aspect-ratio: 1 / 1.08;
}
.story-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; background: var(--sage-soft); box-shadow: var(--shadow-sm); }
.story-photos .sp-a { grid-row: 1 / 3; }
.story-photos .sp-b { border-radius: 24px 24px 24px 90px; }
.story-photos .sp-c { border-radius: 24px 90px 24px 24px; }
.story-photos .sp-badge {
  position: absolute; left: -10px; bottom: 26px; background: var(--terra); color: #fff; border-radius: 999px;
  padding: 11px 20px; font-size: .9rem; box-shadow: var(--shadow-sm); display: flex; gap: 8px; align-items: baseline;
}
.story-photos .sp-badge strong { font-family: 'Fraunces', serif; font-size: 1.35rem; line-height: 1; }
.story-text .block-title { margin-bottom: 14px; }
.story-points { display: grid; gap: 18px; margin-top: 26px; }
.story-points li { display: flex; gap: 14px; align-items: flex-start; }
.story-points .sp-icon {
  flex: none; width: 42px; height: 42px; border-radius: 14px; background: var(--terra-soft); color: var(--terra);
  display: grid; place-items: center;
}
.story-points .sp-icon .icon { width: 21px; height: 21px; }
.story-points strong { display: block; color: var(--olive); font-family: 'Fraunces', serif; font-size: 1.08rem; margin-bottom: 2px; }
.story-points li > span:last-child { color: var(--muted); }
.story-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story-photos { aspect-ratio: 1 / 0.95; }
  .story-photos .sp-badge { left: 8px; }
}
@media (max-width: 640px) {
  .story-photos { gap: 10px; }
  .story-photos img { border-radius: 18px; }
  .story-photos .sp-b { border-radius: 18px 18px 18px 56px; }
  .story-photos .sp-c { border-radius: 18px 56px 18px 18px; }
  .story-cta .btn { flex: 1 1 100%; }
}

/* ---------- Grillas / tarjetas genéricas ---------- */
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: #fff; border: 1px solid var(--cream-2); border-radius: var(--radius); padding: 30px;
  transition: transform var(--dur-panel) var(--ease-out), box-shadow var(--dur-panel) var(--ease-out), border-color var(--dur-base) ease;
}
.card.hoverable:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card.hoverable:active { transform: translateY(-6px) scale(.985); }
/* Insignia circular compartida por tarjetas de servicio, filas, opciones y
   citas — un solo sistema en vez de cinco cuadrados planos redeclarados.
   Circular (no cuadrado redondeado) a propósito: hace juego con el avatar
   del veterinario y los puntos del calendario, y se siente menos "plantilla
   SaaS" que un tile cuadrado con icono centrado. */
.ic {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 1.6rem;
  background: radial-gradient(circle at 32% 26%, #fff, var(--sage-soft) 74%);
  box-shadow: inset 0 0 0 1px rgba(74, 93, 67, .1);
}
.ic .icon, .ic svg { width: 1.15em; height: 1.15em; color: var(--olive); }
.card .ic { margin-bottom: 16px; }
.card h3 { font-size: 1.35rem; color: var(--ink); }
.card p { color: var(--muted); margin: 10px 0 16px; }
.price { font-family: 'Fraunces', serif; font-weight: 700; color: var(--terra); font-size: 1.2rem; }
.price small { color: var(--muted); font-family: 'Nunito Sans'; font-weight: 700; font-size: .82rem; }

/* Filas de servicio */
.svc-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
  background: #fff; border: 1px solid var(--cream-2); border-radius: 22px; padding: 24px 28px;
  margin-bottom: 16px; transition: box-shadow var(--dur-panel) var(--ease-out), transform var(--dur-panel) var(--ease-out);
}
.svc-row:hover { box-shadow: var(--shadow-sm); transform: translateX(6px); }
.svc-row:active { transform: translateX(6px) scale(.99); }
.svc-row .ic { width: 64px; height: 64px; font-size: 1.7rem; }
.svc-row h3 { font-size: 1.4rem; color: var(--olive); }
.svc-row p { color: var(--muted); margin-top: 4px; }
.svc-row .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.svc-row .meta .price { font-size: 1.3rem; }
.svc-row .meta .dur { color: var(--muted); font-weight: 700; font-size: .88rem; }
.svc-row .meta .svc-cta { margin-top: 8px; }
@media (max-width: 880px) { .svc-row .meta { align-items: flex-start; } }

/* Skeleton de fila de servicio */
.skeleton-svc { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; background: #fff; border: 1px solid var(--cream-2); border-radius: 22px; padding: 24px 28px; margin-bottom: 16px; }
.skeleton-svc .sk-ic { width: 62px; height: 62px; border-radius: 18px; }
.skeleton-svc .sk-lines { min-width: 0; }
.skeleton-svc .sk-meta { width: 90px; height: 40px; }

/* Filtros / chips */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.chip {
  border: 2px solid var(--cream-3); background: #fff; color: var(--olive); padding: 9px 20px;
  border-radius: 40px; font-weight: 800; cursor: pointer; font-family: inherit;
  transition: border-color var(--dur-base) ease, background var(--dur-base) ease,
    color var(--dur-base) ease, transform var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--terra); }
.chip:active { transform: scale(.96); }
.chip.active { background: var(--terra); color: #fff; border-color: var(--terra); }

/* Tarjeta de producto */
.prod {
  background: #fff; border: 1px solid var(--cream-2); border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-panel) var(--ease-out), box-shadow var(--dur-panel) var(--ease-out);
}
.prod:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.prod.is-clickable:active { transform: translateY(-6px) scale(.985); }
.prod .ph {
  background:
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 22% 108%, rgba(74,93,67,.10), transparent 55%),
    var(--sage-soft);
  font-size: 2.6rem; text-align: center; padding: 26px 0;
}
.ph-mark .icon { width: 46px; height: 46px; }
.ph-mark { display: inline-grid; place-items: center; color: var(--sage-ink); opacity: .45; line-height: 0; }
.prod .body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.prod .cat { font-family: 'Fraunces', serif; font-style: italic; color: var(--sage-ink); font-size: .92rem; }
.prod h3 { font-size: 1.14rem; color: var(--olive); margin: 2px 0 6px; }
.prod .desc { color: var(--muted); font-size: .9rem; flex: 1; }
.prod .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 8px; }
.stock-pill { font-size: .75rem; font-weight: 800; padding: 4px 11px; border-radius: 30px; white-space: nowrap; }
.stock-pill.ok { background: var(--success-bg); color: var(--success-text); }
.stock-pill.low { background: var(--warn-bg); color: var(--warn-text); }
.stock-pill.out { background: var(--danger-bg); color: var(--danger-text); }

/* ---------- Formularios ---------- */
.form-card { background: #fff; border: 1px solid var(--cream-2); border-radius: 26px; padding: 36px; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 800; color: var(--olive); margin-bottom: 7px; font-size: .95rem; }
.field .optional { color: var(--muted); font-weight: 600; font-size: .82rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border: 2px solid var(--cream-3); border-radius: var(--radius-sm);
  font-size: 1rem; background: var(--cream); color: var(--ink); transition: border .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--terra); background: #fff; }
.field textarea { min-height: 90px; resize: vertical; }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.field .error-msg { color: var(--danger); font-size: .84rem; font-weight: 700; margin-top: 6px; display: none; }
.field.has-error .error-msg { display: block; }
.field .hint { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.code-input {
  width: 100%; text-align: center; font-family: 'Fraunces', serif; font-size: 1.8rem; font-weight: 700;
  letter-spacing: .5rem; padding: 14px 10px 14px 16px; border: 2px solid var(--cream-3); border-radius: var(--radius-sm);
  background: var(--cream); color: var(--olive);
}
.code-input:focus { outline: none; border-color: var(--terra); background: #fff; }

/* ---------- Alertas ---------- */
.alert { padding: 14px 18px; border-radius: var(--radius-sm); font-weight: 700; margin-bottom: 18px; display: flex; gap: 10px; align-items: flex-start; }
.alert-success { background: var(--success-bg); color: var(--success-text); }
.alert-error { background: var(--danger-bg); color: var(--danger-text); }
.alert-info { background: var(--cream-2); color: var(--olive-dk); }

/* ---------- Badges de estado (citas) ---------- */
.badge { font-size: .76rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.badge.pendiente { background: var(--warn-bg); color: var(--warn-text); }
.badge.confirmada { background: var(--success-bg); color: var(--success-text); }
.badge.completada { background: #dfe7f5; color: #2c5aa0; }
.badge.cancelada { background: var(--danger-bg); color: var(--danger-text); }
.badge.no_asistio { background: #e7e4de; color: #5b544a; }
.badge.vencida { background: #e7e4de; color: #5b544a; }

/* ---------- Calendario de agendamiento ---------- */
.calendar { background: #fff; border: 1px solid var(--cream-2); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.calendar-head .month-label { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.25rem; color: var(--olive); text-transform: capitalize; }
.calendar-nav { display: flex; gap: 8px; }
.calendar-nav button {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--cream-3); background: #fff;
  color: var(--olive); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; transition: .15s;
}
.calendar-nav button:hover:not(:disabled) { border-color: var(--terra); color: var(--terra); }
.calendar-nav button:disabled { opacity: .35; cursor: not-allowed; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.calendar-weekdays span { text-align: center; font-size: .74rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-day {
  aspect-ratio: 1; border-radius: 12px; border: 2px solid transparent; background: var(--cream);
  font-weight: 800; font-size: .95rem; color: var(--ink); cursor: pointer; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative;
  transition: border-color var(--dur-base) ease, background var(--dur-base) ease, transform var(--dur-fast) var(--ease-out);
}
.calendar-day:not(:disabled):active { transform: scale(.92); }
.calendar-day .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0; }
.calendar-day.is-open { color: var(--olive-dk); }
.calendar-day.is-open .dot { opacity: 1; color: var(--sage); }
.calendar-day.is-low { color: var(--terra-dark); }
.calendar-day.is-low .dot { opacity: 1; color: var(--terra); }
.calendar-day.is-open:hover:not(.is-selected), .calendar-day.is-low:hover:not(.is-selected) { border-color: var(--terra); background: #fff; }
.calendar-day.is-full { color: var(--muted); text-decoration: line-through; cursor: not-allowed; opacity: .55; }
.calendar-day.is-past, .calendar-day.is-outside { background: transparent; color: var(--cream-3); cursor: default; }
/* Cerrado: tachado diagonal suave, distinto de "ya pasó" (atenuado) y de "sin
   cupos" (tachado de texto). Ver U-72. */
.calendar-day.is-closed {
  color: var(--muted); cursor: default; opacity: .7;
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--cream-2, #efe9dc) 5px 7px);
}
.calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--sage); }
.calendar-day.is-selected { background: var(--terra); color: #fff; border-color: var(--terra); }
.calendar-day.is-selected .dot { opacity: 0; }
.calendar-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: .8rem; color: var(--muted); font-weight: 700; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calendar-legend .dot { width: 8px; height: 8px; border-radius: 50%; }
.calendar-legend .dot.open { background: var(--sage); }
.calendar-legend .dot.low { background: var(--terra); }
.calendar-legend .dot.full { background: var(--muted); }
.calendar-legend .dot.closed { background: repeating-linear-gradient(135deg, var(--cream-3) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--cream-3); }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.slot {
  padding: 11px; text-align: center; border: 2px solid var(--cream-3); border-radius: 12px; background: #fff;
  font-weight: 800; color: var(--olive); cursor: pointer;
  transition: border-color var(--dur-base) ease, background var(--dur-base) ease, transform var(--dur-fast) var(--ease-out);
}
.slot:hover { border-color: var(--terra); }
.slot:active { transform: scale(.95); }
.slot.is-selected { background: var(--terra); color: #fff; border-color: var(--terra); }
.slots-msg { grid-column: 1 / -1; padding: 16px; text-align: center; color: var(--muted); font-weight: 700; }

/* ---------- Wizard de agendamiento ---------- */
.wizard-steps { display: flex; align-items: center; margin-bottom: 40px; flex-wrap: wrap; gap: 6px; }
.wizard-step { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 800; font-size: .92rem; }
.wizard-step .n {
  width: 34px; height: 34px; border-radius: 50%; background: var(--cream-2); color: var(--muted);
  display: grid; place-items: center; font-family: 'Fraunces', serif; font-weight: 700; flex: none; transition: .2s;
}
.wizard-step.is-active { color: var(--olive); }
.wizard-step.is-active .n { background: var(--terra); color: #fff; }
.wizard-step.is-done .n { background: var(--olive); color: var(--cream); }
.wizard-step.is-done { color: var(--olive); }
.wizard-sep { width: 28px; height: 2px; background: var(--cream-3); margin: 0 4px; flex: none; }
@media (max-width: 720px) { .wizard-step span.label { display: none; } .wizard-sep { width: 16px; } }

.wizard-panel { display: none; }
.wizard-panel.is-active { display: block; animation: fade-in 240ms var(--ease-out); }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

.booking-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: start; }
.slots-label { display: block; font-weight: 800; color: var(--olive); margin-bottom: 10px; font-size: .95rem; }

/* Paso "Tus datos": contacto + mascota lado a lado (una columna en móvil). */
.booking-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.booking-block .slots-label { margin-bottom: 12px; }
.add-pet-card { border: 2px dashed var(--cream-3); border-radius: 20px; padding: 18px 22px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; color: var(--olive); font-weight: 800; background: transparent; width: 100%; transition: .15s; }
.add-pet-card:hover { border-color: var(--terra); color: var(--terra); }
.pet-options { display: grid; gap: 12px; margin-bottom: 14px; }

/* Botón-enlace en línea (p. ej. "¿Ya tienes cuenta? Inicia sesión"). */
.link-btn { background: none; border: none; padding: 0; color: var(--terra); font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--terra-dark); }
.inline-hint { color: var(--muted); font-size: .9rem; margin-top: 12px; }

/* Gate de "inicia sesión para ver esto" (p. ej. Mis citas). */
.auth-gate { background: var(--sage-soft); border: 1px dashed var(--sage); border-radius: var(--radius); padding: 34px 30px; text-align: center; }
.auth-gate p { color: var(--olive-dk); margin-bottom: 16px; }

.option-card {
  display: flex; align-items: center; gap: 16px; background: #fff; border: 2px solid var(--cream-2);
  border-radius: 20px; padding: 20px 22px; cursor: pointer; width: 100%; text-align: left;
  transition: border-color var(--dur-base) ease, background var(--dur-base) ease, transform var(--dur-fast) var(--ease-out);
}
.option-card:hover { border-color: var(--sage); }
.option-card:active { transform: scale(.99); }
.option-card.is-selected { border-color: var(--terra); background: var(--terra-soft); }
.option-card .ic { width: 50px; height: 50px; font-size: 1.4rem; }
.option-card .txt { min-width: 0; }
.option-card .txt h3 { font-size: 1.08rem; color: var(--olive); overflow-wrap: anywhere; }
.option-card .txt p { color: var(--muted); font-size: .88rem; margin-top: 2px; }
.option-card .txt .price { margin-top: 4px; display: block; }
.option-card .check {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--cream-3);
  flex: none; display: grid; place-items: center; color: transparent; transition: .15s;
}
.option-card.is-selected .check { background: var(--terra); border-color: var(--terra); color: #fff; }

/* ---------- Pasos (steps) ---------- */
.steps { display: grid; gap: 16px; }
.step { display: flex; gap: 16px; align-items: flex-start; }
.step .n {
  width: 42px; height: 42px; border-radius: 50%; background: var(--olive); color: var(--cream);
  display: grid; place-items: center; font-family: 'Fraunces', serif; font-weight: 700; flex: none;
}
.step b { font-family: 'Fraunces', serif; font-size: 1.15rem; color: var(--olive); display: block; }
.step span { color: var(--muted); }
.step-vertical { flex-direction: column; text-align: center; align-items: center; gap: 10px; }
.panel-olive .step span { color: rgba(246, 239, 228, .8); }
/* Dentro de un panel oliva, el badge numerado por defecto (fondo oliva)
   se vuelve invisible contra el fondo del panel — usa terracota para
   que siga contrastando. */
.panel-olive .step .n { background: var(--terra); color: #fff; }
.wrap-narrow { max-width: 1000px; margin: 0 auto; }

/* ---------- Nosotros / listas / equipo ---------- */
.feature-list { display: grid; gap: 16px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; }
.feature-list .chk {
  color: var(--terra); flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--terra-soft); display: grid; place-items: center; margin-top: 1px;
}
.feature-list .chk .icon { width: 14px; height: 14px; }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.member { background: #fff; border: 1px solid var(--cream-2); border-radius: 24px; padding: 26px; text-align: center; }
.member .av { width: 92px; height: 92px; border-radius: 50%; background: var(--sage-soft); display: grid; place-items: center; font-size: 2.8rem; margin: 0 auto 14px; }
.member h4 { font-size: 1.2rem; color: var(--olive); }
.member .role { color: var(--terra); font-family: 'Fraunces'; font-style: italic; }
.member p { color: var(--muted); font-size: .9rem; margin-top: 8px; }

/* Tarjeta de veterinario (Nosotros) */
.vet-cards { display: grid; gap: 22px; max-width: 640px; margin: 0 auto; }
.vet-cards .vet-card { max-width: none; margin: 0; }
.vet-card { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; background: #fff; border: 1px solid var(--cream-2); border-radius: var(--radius); padding: 32px; max-width: 640px; margin: 0 auto; box-shadow: var(--shadow-sm); }
.vet-card .av {
  width: 110px; height: 110px; border-radius: 50%; background: var(--sage-soft); display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 2.1rem; color: var(--olive); flex: none;
}
.vet-card h3 { font-size: 1.5rem; color: var(--olive); }
.vet-card .role { color: var(--terra); font-family: 'Fraunces', serif; font-style: italic; margin-bottom: 8px; }
.vet-card p { color: var(--muted); }
@media (max-width: 560px) { .vet-card { grid-template-columns: 1fr; text-align: center; padding: 26px; } .vet-card .av { margin: 0 auto; } }

/* ---------- Paneles de color ---------- */
.panel-olive { background: var(--olive); color: var(--cream); border-radius: 36px; padding: 64px 0; }
.panel-olive .sec-head h2 { color: var(--cream); }
.panel-olive .sec-head p { color: rgba(246, 239, 228, .78); }
.panel-olive .eyebrow { color: var(--sage-soft); }
.panel-terra { background: var(--terra); color: #fff; border-radius: 30px; padding: 46px; }
.panel-terra h2 { color: #fff; font-size: 2.1rem; }
.panel-terra p { color: rgba(255, 255, 255, .92); margin: 12px 0 22px; }

/* ---------- Contacto ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-cards .card { text-align: center; padding: 24px; }
.contact-cards .card .ic { margin: 0 auto 12px; }
.contact-cards .card h3 { color: var(--olive); font-size: 1.15rem; }
/* Mismo motivo que .footer-links: el correo de la clínica es una palabra de 34
   caracteres y, sin poder partirla, fijaba el ancho mínimo de la tarjeta por
   encima del viewport en pantallas de 320 px. */
.contact-cards .card p { margin: 6px 0 0; font-size: .92rem; color: var(--muted); overflow-wrap: anywhere; }
.hours-card { background: #fff; border: 1px solid var(--cream-2); border-radius: var(--radius); padding: 32px; }
.hours-card h3 { color: var(--olive); font-size: 1.5rem; margin-bottom: 16px; }
.hours-card .row { display: flex; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px dashed var(--cream-3); font-weight: 700; }
.hours-card .row span:last-child { text-align: right; }
.hours-card .row:last-child { border-bottom: none; }
.hours-card .row span:last-child { color: var(--terra); }
.map-placeholder {
  background: var(--sage-soft); border-radius: var(--radius); min-height: 300px; display: grid; place-items: center; gap: 10px;
  color: var(--olive); font-family: 'Fraunces'; font-style: italic; font-size: 1.2rem; border: 1px solid var(--cream-2);
  text-align: center; padding: 20px; text-decoration: none;
  transition: transform var(--dur-panel, .25s) var(--ease-out), box-shadow var(--dur-panel, .25s) var(--ease-out);
}
a.map-placeholder:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.map-placeholder .map-cta { font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; font-size: .9rem; color: var(--terra-dark); } /* 5,3:1 sobre salvia; --terra daba 4,09 (U-74) */

/* ---------- Testimonio ---------- */
.quote { text-align: center; max-width: 800px; margin: 0 auto; }
.quote .stars { color: var(--terra); display: flex; gap: 4px; justify-content: center; }
.quote .stars .icon { width: 18px; height: 18px; }
.quote p { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--olive); line-height: 1.5; margin: 14px 0; }
.quote .who { font-weight: 800; color: var(--muted); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(58, 52, 44, .55); display: none;
  align-items: center; justify-content: center; padding: 20px; z-index: 300;
}
.modal-overlay.is-open { display: flex; }
/* `position: relative` para que la ✕ de cerrar (.modal-close, absoluta) se
   ancle al DIÁLOGO. Sin esto su contenedor posicionado más cercano era el
   overlay a pantalla completa, así que la ✕ se dibujaba en la esquina de la
   VENTANA: en el móvil aparecía suelta encima del menú hamburguesa y el
   diálogo se veía sin ningún botón de cerrar. */
.modal { position: relative; background: #fff; border-radius: var(--radius); padding: 32px; width: 100%; max-width: 440px; box-shadow: var(--shadow-lift); max-height: 90vh; overflow-y: auto; }
.modal h3 { color: var(--olive); font-size: 1.4rem; margin-bottom: 6px; }
.modal .modal-sub { color: var(--muted); margin-bottom: 22px; }
.modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 1.4rem; color: var(--muted); cursor: pointer; }

/* ---------- Resumen de confirmación ---------- */
.summary-list .row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px dashed var(--cream-3); font-weight: 700; }
.summary-list .row:last-child { border-bottom: none; }
.summary-list .row span:first-child { color: var(--muted); }
.summary-list .row span:last-child { color: var(--olive); text-align: right; }
.success-when { font-family: 'Fraunces', serif; font-weight: 700; color: var(--terra); font-size: 1.2rem; margin: 6px 0 4px; }

/* ---------- Empty states / listas de citas ---------- */
.empty-state { text-align: center; padding: 60px 24px; color: var(--muted); }
.empty-state .ic {
  width: auto; height: auto; background: none; box-shadow: none; border-radius: 0;
  font-size: 3rem; margin: 0 auto 14px;
}
.empty-state .ic .icon, .empty-state .ic svg { width: 1em; height: 1em; color: var(--sage-ink); opacity: .85; }
.empty-state h3 { color: var(--olive); margin-bottom: 8px; }
.appt-card {
  background: #fff; border: 1px solid var(--cream-2); border-radius: var(--radius-sm); padding: 20px 22px;
  display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.appt-card .ic { width: 50px; height: 50px; font-size: 1.3rem; }
/* min-width: 0 + overflow-wrap: un nombre largo sin espacios ("Firulaisdelaselva…")
   desbordaba la tarjeta en móvil (U-73). */
.appt-card .info { flex: 1; min-width: 0; flex-basis: 180px; overflow-wrap: anywhere; }
.appt-card .info b { color: var(--olive); font-size: 1.05rem; }
.appt-card .info span { display: block; color: var(--muted); font-size: .9rem; margin-top: 2px; }
.appt-card .actions { display: flex; gap: 8px; align-items: center; }
.appt-card.embedded { border: none; padding: 0; margin: 0; }
.history-slot:empty { display: none; }

.loading { text-align: center; padding: 40px; color: var(--muted); font-weight: 700; }

/* ---------- Skeletons (estado de carga con forma, no solo texto) ---------- */
.skeleton { position: relative; overflow: hidden; background: var(--cream-2); border-radius: var(--radius-sm); }
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton-card { background: #fff; border: 1px solid var(--cream-2); border-radius: var(--radius); padding: 30px; }
.skeleton-card .sk-ic { width: 62px; height: 62px; border-radius: 18px; margin-bottom: 16px; }
.skeleton-card .sk-line { height: 14px; margin-bottom: 10px; }
.skeleton-card .sk-line.w-60 { width: 60%; }
.skeleton-card .sk-line.w-40 { width: 40%; }
.skeleton-slot { height: 44px; border-radius: 12px; }
.skeleton-prod { background: #fff; border: 1px solid var(--cream-2); border-radius: 22px; overflow: hidden; }
.skeleton-prod .sk-ph { height: 120px; border-radius: 0; }
.skeleton-prod .sk-body { padding: 20px; }

/* Producto que abre su detalle */
.prod.is-clickable { cursor: pointer; text-align: left; }
.prod-title { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.prod.is-clickable:hover .prod-title { color: var(--terra); }
.prod-title:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; border-radius: 4px; }
.prod .ph { position: relative; }
.prod .detail-hint { position: absolute; inset: auto 10px 10px auto; background: rgba(255,255,255,.85); color: var(--olive); font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; opacity: 0; transition: .15s; }
.prod.is-clickable:hover .detail-hint, .prod.is-clickable:focus-visible .detail-hint { opacity: 1; }

/* Detalle de producto (modal) */
.product-detail .ph-lg {
  background:
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 22% 108%, rgba(74,93,67,.10), transparent 55%),
    var(--sage-soft);
  font-size: 3.8rem; text-align: center; padding: 34px 0; border-radius: var(--radius-sm); margin-bottom: 18px;
}
.product-detail .cat { font-family: 'Fraunces', serif; font-style: italic; color: var(--sage-ink); }
.product-detail h3 { font-size: 1.5rem; color: var(--olive); margin: 2px 0 8px; }
.product-detail .desc { color: var(--muted); margin-bottom: 16px; }
.product-detail .meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.product-detail .price { font-size: 1.5rem; }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--cream-2); margin-top: 20px; padding: 64px 0 28px; }
.fgrid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
footer h3 { font-family: 'Fraunces', serif; color: var(--olive); font-size: 1.15rem; margin-bottom: 14px; }
.footer-brand { margin-bottom: 12px; }
.footer-about { color: var(--muted); max-width: 300px; }
/* `overflow-wrap: anywhere` porque el correo de la clínica
   (clinicaveterinariaosicos@gmail.com) es una sola palabra de 34 caracteres:
   sin esto fijaba el ancho mínimo de su columna del grid en 322 px y sacaba una
   barra de scroll horizontal en TODAS las páginas por debajo de 360 px de
   ancho (medido a 320 px: scrollWidth 350). */
.footer-links { display: grid; gap: 8px; color: var(--muted); font-weight: 600; overflow-wrap: anywhere; }
.footer-links a:hover { color: var(--terra); }
.fbottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--cream-3); color: var(--muted); text-align: center; font-weight: 600; font-size: .92rem; }
.fbottom a { font-weight: 800; color: var(--olive); }

/* ---------- Línea de tiempo conectada (Servicios: "Cómo trabajamos") ----------
   Reemplaza 3 tarjetas iguales en grilla por un proceso: los pasos comparten
   una línea, no tres cajas idénticas una junto a otra. */
.timeline { display: flex; align-items: flex-start; justify-content: space-between; position: relative; gap: 12px; }
.timeline::before { content: ''; position: absolute; top: 21px; left: 12%; right: 12%; height: 2px; background: rgba(246, 239, 228, .25); }
.timeline-step { flex: 1; text-align: center; position: relative; padding: 0 10px; }
.timeline-step .n {
  width: 42px; height: 42px; border-radius: 50%; background: var(--terra); color: #fff;
  display: grid; place-items: center; font-family: 'Fraunces', serif; font-weight: 700;
  margin: 0 auto 16px; position: relative; z-index: 1;
}
.timeline-step b { font-family: 'Fraunces', serif; font-size: 1.15rem; color: #fff; display: block; margin-bottom: 6px; }
.timeline-step span { color: rgba(246, 239, 228, .92); }
@media (max-width: 720px) {
  .timeline { flex-direction: column; gap: 26px; }
  .timeline::before { display: none; }
}

/* ---------- Franja de confianza (Inicio) ----------
   Banda delgada de hechos verificables, no una cuarta ronda de tarjetas. */
.trust-strip { background: var(--cream-2); border-top: 1px solid var(--cream-3); border-bottom: 1px solid var(--cream-3); }
.trust-strip .wrap { display: flex; flex-wrap: wrap; padding: 22px 28px; }
.trust-item { display: flex; align-items: center; gap: 12px; flex: 1 1 240px; padding: 8px 26px; border-left: 1px solid var(--cream-3); }
.trust-item:first-child { border-left: none; }
.trust-ic { width: 36px; height: 36px; flex: none; color: var(--terra); display: grid; place-items: center; }
.trust-ic .icon { width: 24px; height: 24px; }
.trust-item span { font-weight: 800; color: var(--olive); font-size: .92rem; line-height: 1.3; }
@media (max-width: 880px) { .trust-item { flex: 1 1 45%; border-left: none; padding: 8px 0; } }
@media (max-width: 560px) { .trust-item { flex: 1 1 100%; } }

/* ---------- Servicios: destacado + lista compacta (Inicio) ----------
   Rompe el patrón "todo son tarjetas iguales": un servicio en detalle,
   el resto en una lista escaneable. */
.services-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; align-items: start; }
.featured-service { background: #fff; border: 1px solid var(--cream-2); border-radius: var(--radius); padding: 36px; position: relative; overflow: hidden; }
.featured-service::before {
  content: ''; position: absolute; right: -18%; bottom: -32%; width: 260px; height: 260px;
  background: var(--sage-soft); border-radius: 58% 42% 47% 53%/55% 48% 52% 45%; z-index: 0; opacity: .55;
}
.featured-service > * { position: relative; z-index: 1; }
.featured-service .ic { width: 66px; height: 66px; font-size: 1.8rem; margin-bottom: 18px; }
.featured-service h3 { font-size: 1.6rem; color: var(--olive); margin: 4px 0 10px; }
.featured-service p { color: var(--muted); margin-bottom: 22px; }
.featured-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.service-list-compact { display: flex; flex-direction: column; }
.svc-row-compact {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 14px;
  background: #fff; border: 1px solid var(--cream-2); margin-bottom: 8px;
  transition: border-color var(--dur-base) ease, transform var(--dur-fast) var(--ease-out);
}
.svc-row-compact:hover { border-color: var(--sage); }
.svc-row-compact:active { transform: scale(.99); }
.svc-row-compact .ic { width: 42px; height: 42px; font-size: 1.05rem; flex: none; }
.svc-row-compact .name { flex: 1; font-weight: 800; color: var(--ink); }
.svc-row-compact .price { font-family: 'Fraunces', serif; font-weight: 700; color: var(--terra); white-space: nowrap; }
@media (max-width: 880px) { .services-split { grid-template-columns: 1fr; } }

/* ---------- Tienda: estante horizontal (Inicio) ----------
   Metáfora de estante, no otra grilla vertical repitiendo el ritmo de
   Servicios. Scroll-snap; el desvanecido lateral insinúa que hay más. */
.shelf-wrap { position: relative; }
.shelf {
  display: flex; gap: 20px; overflow-x: auto; padding: 4px 2px 18px; margin: 0 -2px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--sage) transparent;
}
.shelf .prod { flex: 0 0 236px; scroll-snap-align: start; }
.shelf::-webkit-scrollbar { height: 7px; }
.shelf::-webkit-scrollbar-thumb { background: var(--sage); border-radius: 8px; }
.shelf::-webkit-scrollbar-track { background: transparent; }
.shelf-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 18px; width: 56px;
  background: linear-gradient(90deg, transparent, var(--olive)); pointer-events: none;
}
@media (max-width: 560px) { .shelf .prod { flex-basis: 78vw; } }

/* ---------- Testimonio + estadística (Inicio) ----------
   Editorial en dos columnas asimétricas en vez de una cita sola y centrada. */
.testimonial-split { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center; }
.testimonial-split .quote { text-align: left; max-width: none; margin: 0; }
.testimonial-split .quote .stars { justify-content: flex-start; }
.stat-card { background: var(--sage-soft); border-radius: var(--radius); padding: 34px; text-align: center; }
.stat-card .num { font-family: 'Fraunces', serif; font-weight: 700; font-size: 2.6rem; color: var(--olive); display: block; }
.stat-card .lbl { color: var(--sage-ink); font-weight: 800; margin-top: 4px; }
@media (max-width: 880px) {
  .testimonial-split { grid-template-columns: 1fr; }
  .testimonial-split .quote { text-align: center; }
  .testimonial-split .quote .stars { justify-content: center; }
}

/* ---------- CTA unificada (Inicio) ----------
   Un solo panel con una regla interna, no dos tarjetas iguales una junto a
   la otra (el patrón "2 cards" es tan genérico como el de 3). */
.cta-unified { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; align-items: center; }
.cta-unified .cta-hours { padding-left: 44px; border-left: 1px solid rgba(255,255,255,.25); }
.cta-unified .cta-hours h3 { color: #fff; font-size: 1.1rem; margin-bottom: 14px; }
.cta-unified .cta-hours .row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.25); color: rgba(255,255,255,.85); font-weight: 700; font-size: .92rem; }
.cta-unified .cta-hours .row:last-child { border-bottom: none; }
.cta-unified .cta-hours .row span:last-child { color: #fff; }
@media (max-width: 880px) {
  .cta-unified { grid-template-columns: 1fr; gap: 26px; }
  .cta-unified .cta-hours { padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,.25); padding-top: 22px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .g4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .hero-grid, .g3, .g2, .form-row, .team, .contact-grid, .contact-cards, .fgrid, .svc-row, .booking-layout, .booking-form-grid { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .svc-row { text-align: left; }
  .svc-row .meta { text-align: left; }
  .panel-olive { border-radius: 0; }
}
@media (max-width: 560px) {
  section { padding: 56px 0; }
  .g3, .g4, .g2 { grid-template-columns: 1fr; }
  .form-card { padding: 24px; }
  .calendar { padding: 16px; }
  .calendar-day { font-size: .85rem; }
  .panel-terra { padding: 32px 24px; }
  .btn { padding: 14px 24px; }
}

/* ---------- Animación de entrada: construcción del logo ----------
   Ver public/web/js/intro.js. El overlay se inserta y anima solo por JS;
   si por lo que sea JS no corre, o el usuario pide menos movimiento, este
   bloque garantiza que nunca quede un overlay opaco tapando el sitio. */
#intro-overlay {
  position: fixed; inset: 0; z-index: 9999; background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--intro-leave-ms, 340ms) var(--ease-out);
}
#intro-overlay.is-leaving { opacity: 0; pointer-events: none; }
#intro-overlay[hidden] { display: none !important; }
/* El atributo hidden debe ganarle a .btn { display:flex }: sin esto, en la
   página de confirmación quedaba visible un «Confirmando…» eterno. */
.btn[hidden] { display: none !important; }
/* Failsafe que NO depende de JavaScript. El overlay es una capa opaca a
   pantalla completa (z-index 9999) y hasta ahora solo lo quitaba intro.js: si
   ese módulo no llegaba a ejecutarse —red móvil que corta la descarga, error de
   parseo, un bloqueador— el sitio entero quedaba tapado y sin forma de usarlo.
   Esta animación lo retira sola a los 4 s; en una carga sana JS lo quita mucho
   antes, así que nunca se llega a ver. (Con prefers-reduced-motion el overlay
   ya está oculto más abajo, así que el .001ms de ese bloque no lo afecta.) */
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }
#intro-overlay { animation: intro-failsafe 1ms linear 4s forwards; }

.intro-mark { width: 128px; height: 128px; }
.intro-mark .im-badge {
  opacity: 0; transform-origin: 32px 32px; transform: scale(.92);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
/* Hocico (nariz+boca+lengua, una sola forma rellena) y bigotes: son rellenos
   (fill), no trazos — el logo real no tiene contorno, así que aquí no aplica
   la técnica de "dibujado" por stroke-dashoffset. Cada uno aparece con un
   pop de opacidad+escala, escalonado. */
.intro-mark .im-mouth, .intro-mark .im-whisker {
  opacity: 0; transform-origin: center; transform: scale(.85);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
/* El aro alrededor de la cara: aparece con el mismo pop que los bigotes. */
.intro-mark .im-ring {
  opacity: 0; transform-origin: 32px 34px; transform: scale(.82);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.intro-mark.is-running .im-badge,
.intro-mark.is-running .im-mouth,
.intro-mark.is-running .im-whisker,
.intro-mark.is-running .im-ring { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #intro-overlay { display: none !important; }
}

/* ---------- Reduce el movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Estado de error del calendario: cuando /availability/summary falla, antes se
   pintaban los 30 días como cerrados y deshabilitados sin ningún mensaje —un
   mes entero apagado, indistinguible de una clínica que no abre nunca—. */
.calendar-error {
  grid-column: 1 / -1; display: grid; gap: 12px; place-items: center;
  padding: 28px 18px; text-align: center; color: var(--muted);
}
.calendar-error p { margin: 0; }

/* ---------- Acceso directo a urgencias ----------
   Una clínica que anuncia "Urgencias 24 h" en su primera pantalla no puede
   tener el teléfono solo en el pie, a 22 pantallas de scroll. Botón fijo, en
   todas las páginas, y en HTML estático: quien lo necesita a las 2 de la
   mañana no puede depender de que cargue el JavaScript. */
.urgencias-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px;
  background: var(--terra); color: #fff; font-weight: 800; font-size: .95rem;
  text-decoration: none; box-shadow: 0 10px 30px rgba(28, 25, 21, .28);
  transition: transform .2s var(--ease-out), background .2s ease;
}
.urgencias-fab:hover { background: var(--terra-dark); transform: translateY(-2px); color: #fff; }
.urgencias-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.urgencias-fab svg { width: 20px; height: 20px; flex: none; }
.urgencias-fab strong { font-weight: 800; }
@media (max-width: 640px) {
  /* En móvil solo el icono y "24 h": el texto completo taparía media pantalla. */
  .urgencias-fab { right: 14px; bottom: 14px; padding: 13px 16px; font-size: .88rem; }
  .urgencias-fab span strong { display: none; }
}
/* El indicador de scroll del hero vive en la misma esquina: se pasa a la
   izquierda para no quedar debajo del botón de urgencias. */
@media (min-width: 641px) { .h-scroll-cue { right: auto !important; left: 28px; } }
@media print { .urgencias-fab { display: none; } }

/* Nota bajo un servicio que no se agenda en línea (urgencias). */
.svc-nota { color: var(--terra-dark); font-weight: 700; font-size: .88rem; margin-top: 6px; }

/* =====================================================================
   MÓVIL PRIMERO
   ---------------------------------------------------------------------
   El sitio nació en escritorio y el móvil se resolvía "apilando" lo de
   escritorio: tarjetas de 30-36 px de relleno, una por fila, con alturas de
   una pantalla cada una; el botón flotante de urgencias tapando texto en
   todas las páginas; cabecera de 78 px; enlaces del pie de 27 px de alto.
   Esta capa define cómo se ve y se usa en el teléfono —que es donde llega la
   mayoría de los clientes— y deja el escritorio como está.
   Reglas: objetivos táctiles de 44 px o más, relleno lateral de 20 px,
   tarjetas compactas (dos por fila cuando el contenido lo permite), listas
   de opciones deslizables en horizontal, formularios con letra de 16 px
   (iOS hace zoom si es menor) y nada fijo tapando contenido.
   ===================================================================== */
:root { --header-h: 64px; --bar-h: 0px; --gutter: 20px; }
@media (min-width: 641px) { :root { --gutter: 28px; } }
@media (min-width: 901px) { :root { --header-h: 78px; } }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 14px); }
html.menu-abierto { overflow: hidden; }
a, button, summary, [role="button"], label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Cabecera ---------- */
nav.site-nav { height: var(--header-h); }
@media (max-width: 900px) {
  .brand { font-size: 1.38rem; gap: 10px; }
  .brand img { width: 36px; height: 36px; }
  /* 44 × 44: el ícono de 34 px se tocaba mal con el pulgar. */
  .nav-toggle { width: 44px; height: 44px; margin-right: -8px; }
  .nav-toggle .bar { left: 11px; right: 11px; }
  .nav-toggle .bar:nth-child(1) { top: 16px; }
  .nav-toggle .bar:nth-child(2) { top: 21px; }
  .nav-toggle .bar:nth-child(3) { top: 26px; }
  .nav-links { top: var(--header-h); }
  .nav-links-inner { max-height: calc(100dvh - var(--header-h)); padding: 4px var(--gutter) 22px; }
  .nav-links-inner a:not(.btn) { padding: 14px 4px; min-height: 52px; display: flex; align-items: center; }
  .nav-links-inner .nav-auth { min-height: 52px; }
  .nav-links-inner .btn-text { padding: 12px 4px; min-height: 44px; }
}

/* ---------- Barra inferior de acciones (móvil) ----------
   En escritorio es el botón flotante de urgencias de siempre. En el teléfono
   el botón flotante tapaba texto, precios y campos en casi cada pantalla; aquí
   se convierte en una barra fija con las dos acciones que importan —llamar a
   urgencias y agendar—, y la página reserva su alto abajo para que nada quede
   debajo. Se esconde con el menú abierto y mientras se escribe (nav.js). */
.mobile-cta { display: none; }
@media (max-width: 640px) {
  :root { --bar-h: calc(68px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: var(--bar-h); }
  .urgencias-region {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(246, 239, 228, .97); border-top: 1px solid var(--cream-3);
    box-shadow: 0 -10px 26px rgba(58, 52, 44, .08);
    transition: transform var(--dur-panel) var(--ease-out);
  }
  @supports (backdrop-filter: blur(8px)) { .urgencias-region { background: rgba(246, 239, 228, .9); backdrop-filter: blur(10px); } }
  .urgencias-region.is-tucked, html.menu-abierto .urgencias-region { transform: translateY(110%); }
  .urgencias-fab, .mobile-cta {
    position: static; flex: 1 1 0; min-height: 48px; padding: 0 12px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 800; font-size: .95rem; box-shadow: none; white-space: nowrap;
  }
  .urgencias-fab { background: #fff; color: var(--terra-dark); border: 2px solid var(--terra); }
  .urgencias-fab:hover { background: #fff; color: var(--terra-dark); transform: none; }
  .urgencias-fab span strong { display: inline; }
  .urgencias-fab:focus-visible, .mobile-cta:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }
  .mobile-cta { background: var(--terra); color: #fff; border: 2px solid var(--terra); }
  .mobile-cta:active, .urgencias-fab:active { transform: scale(.97); }
}

/* ---------- Tipografía y ritmo ---------- */
@media (max-width: 640px) {
  body { line-height: 1.6; }
  section { padding: 48px 0; }
  .sec-head { margin-bottom: 26px; }
  .sec-head h2 { font-size: clamp(1.6rem, 7vw, 2rem); }
  .sec-head p { font-size: 1rem; }
  .block-title { font-size: 1.7rem; }
  .btn { padding: 13px 22px; min-height: 48px; }
  .btn-sm { padding: 9px 16px; min-height: 42px; }
  .page-head { padding: 34px 0 38px; }
  .page-head h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .page-head p { font-size: 1rem; margin-top: 10px; }
  .page-head .paw { width: 9rem; height: 9rem; bottom: -18%; right: -8%; }
  .panel-olive { padding: 44px 0; }
  .panel-terra { padding: 28px 22px; border-radius: 22px; }
  .panel-terra h2 { font-size: 1.6rem; }
}

/* ---------- Tarjetas genéricas ---------- */
@media (max-width: 640px) {
  .card { padding: 20px; border-radius: 18px; }
  .card .ic { width: 46px; height: 46px; font-size: 1.3rem; margin-bottom: 12px; }
  .card h3 { font-size: 1.12rem; }
  .card p { font-size: .92rem; margin: 6px 0 10px; }
  .card.hoverable:hover { transform: none; box-shadow: none; }
  /* Grillas de 4 (especies, productos): dos por fila en vez de una tarjeta
     gigante por pantalla. */
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .g4 .card { padding: 16px; }
  .g4 .card p { font-size: .85rem; margin-bottom: 0; }
}

/* ---------- Servicios (lista de la página Servicios) ----------
   Una tarjeta por servicio medía casi una pantalla (ícono, título, texto,
   precio, duración y botón apilados con 30 px de relleno). En móvil es una
   fila: ícono + nombre + descripción, y abajo precio · duración con el botón
   a la derecha. */
@media (max-width: 880px) {
  .svc-row {
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic txt" "meta meta";
    gap: 12px 14px; padding: 16px; border-radius: 18px; margin-bottom: 12px; align-items: start;
  }
  .svc-row:hover, .svc-row:active { transform: none; }
  .svc-row .ic { grid-area: ic; width: 46px; height: 46px; font-size: 1.3rem; }
  .svc-row > div:nth-child(2) { grid-area: txt; min-width: 0; }
  .svc-row h3 { font-size: 1.12rem; }
  .svc-row p { font-size: .9rem; line-height: 1.5; }
  .svc-row .meta {
    grid-area: meta; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    border-top: 1px dashed var(--cream-3); padding-top: 12px;
  }
  .svc-row .meta .price { font-size: 1.15rem; }
  .svc-row .meta .svc-cta { margin: 0 0 0 auto; }
  .skeleton-svc { padding: 16px; gap: 14px; border-radius: 18px; }
}

/* ---------- Tienda: filtros deslizables y productos de dos en dos ---------- */
@media (max-width: 640px) {
  /* Los 7 filtros ocupaban 4 filas (medio pantallazo) antes del primer
     producto: ahora son una sola fila que se desliza con el dedo. */
  .filters {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1) 20px; padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter);
  }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex: none; min-height: 44px; padding: 9px 18px; }
  .prod { border-radius: 16px; }
  .prod:hover, .prod.is-clickable:active { transform: none; box-shadow: none; }
  .prod.is-clickable:active { background: var(--cream); }
  .prod .ph { font-size: 2.1rem; padding: 16px 0; }
  .prod .detail-hint { display: none; }
  .prod .body { padding: 12px 12px 14px; }
  .prod .cat { font-size: .78rem; }
  .prod h3 { font-size: 1rem; line-height: 1.22; margin: 2px 0 4px; }
  .prod-title { display: block; width: 100%; }
  .prod .desc {
    flex: 0 0 auto; font-size: .82rem; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .prod .foot { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: 10px; }
  .prod .price { font-size: 1.08rem; }
  .skeleton-prod .sk-ph { height: 80px; }
  .skeleton-prod .sk-body { padding: 12px; }
}

/* ---------- Nosotros: contacto y horario ---------- */
@media (max-width: 640px) {
  .contact-grid { gap: 22px; }
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .contact-cards .card { padding: 16px 12px; }
  .contact-cards .card .ic { width: 44px; height: 44px; margin-bottom: 8px; }
  .contact-cards .card h3 { font-size: 1rem; }
  .contact-cards .card p { font-size: .84rem; }
  .hours-card { padding: 22px 20px; }
  .hours-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
  .map-placeholder { min-height: 200px; }
  .vet-card { padding: 22px 18px; gap: 14px; }
  .vet-card .av { width: 84px; height: 84px; font-size: 1.7rem; }
  .vet-card h3 { font-size: 1.3rem; }
  /* El correo necesita la fila entera para no partirse a mitad de palabra. */
  .contact-cards .card-ancha { grid-column: 1 / -1; }
}

/* ---------- Formularios ---------- */
@media (max-width: 640px) {
  .form-card { padding: 20px 18px; border-radius: 20px; }
  .field { margin-bottom: 16px; }
  /* 16 px: con menos, Safari de iOS hace zoom al enfocar el campo. */
  .field input, .field select, .field textarea { font-size: 16px; padding: 12px 14px; min-height: 48px; }
  .code-input { font-size: 1.6rem; letter-spacing: .4rem; }
}

/* ---------- Asistente de reserva ---------- */
@media (max-width: 640px) {
  .wizard-steps { margin-bottom: 24px; }
  .option-card { padding: 14px 16px; gap: 12px; border-radius: 16px; }
  .option-card .ic { width: 42px; height: 42px; font-size: 1.15rem; }
  .option-card .txt h3 { font-size: 1.02rem; }
  .option-card .txt p {
    font-size: .84rem; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  /* Los botones de cada paso ocupan el ancho: el "Continuar" pequeño a la
     izquierda era fácil de pasar por alto. */
  .wizard-panel .hero-actions { display: flex; gap: 10px; flex-wrap: nowrap; }
  .wizard-panel .hero-actions .btn { flex: 1 1 auto; }
  .wizard-panel .hero-actions .btn-ghost { flex: 0 0 auto; }
  .calendar { padding: 14px 12px; border-radius: 20px; }
  .calendar-nav button { width: 44px; height: 44px; }
  .calendar-grid { gap: 5px; }
  .calendar-day { border-radius: 10px; }
  .calendar-legend { gap: 8px 14px; font-size: .78rem; }
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .slot { padding: 12px 6px; min-height: 48px; }
  .summary-list .row { flex-wrap: wrap; gap: 2px 12px; }
}

/* ---------- Modales: hoja inferior en el teléfono ----------
   Centrados en pantalla, los diálogos quedaban lejos del pulgar y con la ✕ de
   22 px en una esquina. Abajo, a todo el ancho, se alcanzan con una mano. */
@media (max-width: 640px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none; border-radius: 24px 24px 0 0; max-height: 92dvh;
    padding: 26px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    animation: hoja-sube 260ms var(--ease-out);
  }
  .modal .modal-actions { flex-direction: column-reverse; }
  .modal .modal-actions .btn { width: 100%; }
}
@keyframes hoja-sube { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.modal-close { width: 44px; height: 44px; top: 8px; right: 8px; border-radius: 50%; display: grid; place-items: center; }
.modal-close:focus:not(:focus-visible) { outline: none; }

/* ---------- Mis citas ---------- */
@media (max-width: 640px) {
  .appt-card { padding: 16px; gap: 12px; }
  .appt-card .actions { width: 100%; }
  .appt-card .actions .btn { flex: 1; }
  .auth-gate { padding: 26px 20px; }
}

/* ---------- Pie ---------- */
@media (max-width: 880px) {
  footer.site-footer { padding: 40px 0 22px; }
  /* Una columna: el contacto necesita el ancho completo para que el correo
     (una "palabra" de 34 caracteres) quepa en una línea; la navegación, que
     es corta, va en dos columnas. */
  .fgrid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .fgrid > div:nth-child(2) .footer-links { grid-template-columns: 1fr 1fr; column-gap: 18px; }
  footer h3 { margin-bottom: 4px; }
  /* 27 px de alto por enlace era demasiado poco para el dedo. */
  .footer-links { gap: 0; }
  .footer-links a, .footer-links span { padding: 9px 0; min-height: 44px; display: flex; align-items: center; line-height: 1.35; }
  .fbottom { margin-top: 22px; font-size: .85rem; }
  .fbottom a { display: inline-block; padding: 10px 4px; }
}
/* Pantallas de 360 px o menos (Android pequeños, iPhone SE): "Urgencias 24 h"
   + "Agendar cita" no caben; el de llamar se queda en ícono + "24 h" (su
   nombre accesible completo sigue en aria-label). */
@media (max-width: 360px) {
  .urgencias-fab { flex: 0 0 auto; padding: 0 14px; }
  .urgencias-fab span strong { display: none; }
  .urgencias-region:not(:has(.mobile-cta)) .urgencias-fab { flex: 1 1 auto; }
  .urgencias-region:not(:has(.mobile-cta)) .urgencias-fab span strong { display: inline; }
}
.brand { min-height: 44px; }

/* Tarjeta con foto arriba (Nosotros · "A quién atendemos"): la foto llega al
   borde de la tarjeta y el texto conserva su margen interior. */
.card.card--foto { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--foto .card-foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sage-soft); }
.card--foto > h3, .card--foto > p { margin-left: 24px; margin-right: 24px; }
.card--foto > h3 { margin-top: 20px; }
.card--foto > p:last-child { margin-bottom: 24px; }
@media (max-width: 640px) {
  .card--foto .card-foto { aspect-ratio: 1 / 1; }
  .card--foto > h3, .card--foto > p { margin-left: 14px; margin-right: 14px; }
  .card--foto > h3 { margin-top: 12px; }
  .card--foto > p:last-child { margin-bottom: 14px; }
}

/* Textos largos sin espacios (una URL en el motivo, 80 letras de corrido en un
   nombre, alergias larguísimas): antes ensanchaban toda la página en el resumen
   de la cita, en Mis citas y en la cabecera, y el botón principal quedaba
   desplazado. Se parten donde haga falta, y el saludo se recorta con "…". */
.summary-list .row > span { min-width: 0; overflow-wrap: anywhere; }
.alert, .alert > span, #loggedInBanner, .appt-card, .appt-card .info span, .hours-card .row span, .form-card { overflow-wrap: anywhere; }
.appt-card .info, .hours-card .row span { min-width: 0; }
.nav-auth-name { display: inline-block; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Casilla de autorización de datos personales (reserva de invitado y registro). */
.consent, .field .consent { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.45; cursor: pointer; font-weight: 400; color: var(--ink); margin: 14px 0; }
.consent input, .field .consent input { width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 4px; margin-top: 2px; flex: none; accent-color: var(--terra); }
.consent a { text-decoration: underline; }