/* ==========================================================================
   VIRA Psicología — hoja de estilos
   0. Tipografías
   1. Tokens (paleta, tipografía, espacios)
   2. Base
   3. Utilidades y layout
   4. Fondos de sección
   5. Botones y enlaces
   6. Logotipo (placeholder)
   7. Header y navegación
   8. Tarjeta desplegable
   9. Secciones (hero, adopción, equipo, contacto, mapa, 404)
   10. Footer
   11. Movimiento reducido
   ========================================================================== */

/* 0. Tipografías (alojadas en /fonts, licencia SIL OFL 1.1) ---------------
   Subconjunto latino en WOFF2. Montserrat es variable (pesos 400–600). */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-400-600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bellefair";
  src: url("/fonts/bellefair-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Paleta de marca (no usar colores fuera de esta lista) */
  --salvia-profunda: #58716E;
  --salvia: #628180;
  --eucalipto: #809489;
  --liquen: #959D95;
  --musgo: #A5A795;
  --piedra: #AFA68E;
  --arena: #A4A38E;
  --crema: #F5EFD8;
  --salvia-oscura: #3F524F;
  --arena-clara: #E7DFC6;
  --blanco: #FFFFFF;

  /* Colores semánticos (contraste verificado WCAG AA) */
  --color-bg: var(--blanco);
  --color-text: var(--salvia-oscura);      /* 8,3:1 sobre blanco · 7,2:1 crema · 6,2:1 arena clara */
  --color-heading: var(--salvia-profunda); /* 5,25:1 sobre blanco · 4,55:1 crema */
  --color-link: var(--salvia-profunda);
  --color-link-hover: var(--salvia-oscura);
  --color-line: var(--arena-clara);
  --color-focus: var(--salvia-oscura);

  /* Tipografía */
  --font-display: "Bellefair", Georgia, serif;
  --font-body: "Montserrat", system-ui, sans-serif;
  --fs-base: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;
  --fs-h1: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 2.875rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --tracking-logo: 0.34em;
  --tracking-label: 0.4em;

  /* Espacios y formas */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;
  --section-pad: clamp(4rem, 3rem + 5vw, 7rem);
  --container: 72rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --radius: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 30px -18px rgb(63 82 79 / 0.35);

  /* Header: alto suficiente para respetar el área de protección del logo */
  --header-h: 96px;

  /* Movimiento */
  --dur: 280ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 64em) {
  :root { --header-h: 100px; }
}

/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Lo que Safari muestra por encima del header y por debajo del footer
     (rebote del scroll, barra inferior): crema arriba, salvia profunda abajo */
  background: linear-gradient(var(--crema) 50%, var(--salvia-profunda) 50%);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

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

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--color-link-hover); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--arena-clara); color: var(--salvia-oscura); }

/* Todas las secciones con ancla dejan sitio al header fijo */
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* 3. Utilidades y layout --------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); }

.section__header {
  max-width: 44rem;
  margin-bottom: var(--space-7);
}
.section__header--center {
  margin-inline: auto;
  text-align: center;
}
.section__header--center h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin: var(--space-5) auto 0;
  background: currentColor;
  opacity: 0.6;
}

.lead { font-size: 1.125rem; }

/* Etiqueta / descriptor en mayúsculas */
.label {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-heading);
}

/* Filete decorativo (guiño a la línea del horizonte) */
.rule {
  width: 3rem;
  height: 1px;
  margin: var(--space-5) 0;
  border: 0;
  background: currentColor;
  opacity: 0.6;
}
.section__header--center .rule { margin-inline: auto; }

.visually-hidden {
  position: absolute !important;
  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;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--salvia-oscura);
  color: var(--blanco);
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--blanco); }

/* 4. Fondos de sección (solo combinaciones aprobadas) ---------------------- */
.bg-blanco { background: var(--blanco); }

.bg-crema { background: var(--crema); }

.bg-arena-clara {
  background: var(--arena-clara);
  /* Salvia profunda no llega a 4,5:1 sobre arena clara: se usa salvia oscura */
  --color-heading: var(--salvia-oscura);
  --color-link: var(--salvia-oscura);
}

.bg-salvia-profunda {
  background: var(--salvia-profunda);
  --color-text: var(--crema);       /* 4,55:1 */
  --color-heading: var(--crema);
  --color-link: var(--crema);
  --color-link-hover: var(--blanco);
  --color-focus: var(--crema);
  color: var(--color-text);
}

/* 5. Botones y enlaces ----------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* Principal: blanco sobre salvia profunda (5,25:1) → hover salvia oscura (8,3:1) */
.btn--primary {
  background: var(--salvia-profunda);
  color: var(--blanco);
}
.btn--primary:hover {
  background: var(--salvia-oscura);
  color: var(--blanco);
}

/* Secundario: contorno */
.btn--outline {
  background: transparent;
  color: var(--color-link);
  border-color: currentColor;
}
.btn--outline:hover {
  background: var(--salvia-oscura);
  border-color: var(--salvia-oscura);
  color: var(--blanco);
}

/* Claro: para fondos salvia profunda */
.btn--light {
  background: var(--crema);
  color: var(--salvia-oscura);
}
.btn--light:hover {
  background: var(--blanco);
  color: var(--salvia-oscura);
}

.btn--small {
  min-height: 42px;
  padding: 0.6rem 1.25rem;
  font-size: 0.75rem;
}

/* Grupo de botones */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.section__header--center .btn-group { justify-content: center; }

/* Enlace con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--fs-small);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link-arrow::after {
  content: "→";
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover::after { transform: translateX(3px); }

/* 6. Logotipo --------------------------------------------------------------
   Archivos en /assets/logo/ (generados a partir de los vectoriales del manual).
   Tamaños mínimos del manual: horizontal 160 px de ancho, vertical 120 px,
   símbolo 24 px. Área de protección: 1x (altura de la «V») libre alrededor. */
.logo {
  display: inline-flex;
  flex: none;
}
.logo img { display: block; }

/* Horizontal (header y footer) */
.logo--horizontal img {
  width: auto;
  height: 54px;   /* = 160 px de ancho */
  min-width: 160px;
}
@media (min-width: 64em) {
  .logo--horizontal img { height: 56px; }
}

/* 7. Header y navegación --------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--crema);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--arena-clara);
  box-shadow: var(--shadow-soft);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: var(--header-h);
}
/* Filete bajo el menú (guía visual) */
.site-header__inner::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: var(--salvia-profunda);
  opacity: 0.5;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--salvia-profunda);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--salvia-profunda);
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__icon {
  position: relative;
  width: 18px;
  height: 12px;
}
.nav-toggle__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle__icon span:nth-child(1) { top: 0; }
.nav-toggle__icon span:nth-child(2) { top: 5px; }
.nav-toggle__icon span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.site-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: block;
  color: var(--salvia-oscura);
  font-family: var(--font-display); /* menú en Bellefair, como en la guía visual */
  font-weight: 400;
  font-size: 1.1875rem;
  text-decoration: none;
}
.site-nav__link:hover { color: var(--salvia-profunda); }
.site-nav__link[aria-current] {
  color: var(--salvia-profunda);
}

/* Móvil y tablet: menú desplegable bajo el header */
@media (max-width: 63.99em) {
  /* Sin JS el botón no sirve: el menú se muestra siempre */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-header__inner { height: auto; flex-wrap: wrap; padding-block: var(--space-3); }
  html:not(.js) .site-nav { width: 100%; }

  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--crema);
    border-bottom: 1px solid var(--arena-clara);
    box-shadow: var(--shadow-soft);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .js .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .site-nav__list {
    display: flex;
    flex-direction: column;
    padding: var(--space-3) var(--gutter) var(--space-6);
  }
  .site-nav__link {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--arena-clara);
    font-size: 1.3125rem;
  }
  .site-nav__link[aria-current] {
    border-bottom-color: var(--salvia-profunda);
  }
  .site-nav__item--cta { margin-top: var(--space-5); }
  .site-nav__item--cta .btn { width: 100%; }
}

/* Escritorio: menú en línea */
@media (min-width: 64em) {
  .nav-toggle { display: none; }
  .site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 0.2rem + 1.4vw, 2rem);
  }
  .site-nav__link {
    position: relative;
    padding-block: var(--space-2);
  }
  .site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .site-nav__link:hover::after,
  .site-nav__link[aria-current]::after { transform: scaleX(1); }
  .site-nav__item--cta { margin-left: var(--space-2); }
}

/* 8. Tarjeta desplegable ---------------------------------------------------
   Sin JS el texto está siempre visible. Con JS (clase .js en <html>) se pliega
   y se despliega animando grid-template-rows 0fr → 1fr. Las tarjetas plegadas
   tienen todas la misma altura (min-height de la cabecera); al abrir una, solo
   crece esa tarjeta: las vecinas no cambian de tamaño ni de posición. */
.cards {
  display: grid;
  gap: var(--space-5);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--arena-clara);
  border-radius: var(--radius-lg) var(--radius) var(--radius-lg) var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bg-blanco .card { background: var(--crema); border-color: transparent; }

.card__heading {
  margin: 0;
  font-size: var(--fs-h3);
}

.card__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 5.5rem;
  padding: var(--space-5);
  border: 0;
  border-radius: inherit;
  background: none;
  color: var(--salvia-profunda);
  font: inherit;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.bg-arena-clara .card__toggle { color: var(--salvia-oscura); }
.card__toggle:focus-visible { outline-offset: -3px; }

.card__icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--eucalipto);
}
.card__icon svg { width: 100%; height: 100%; }

.card__title { flex: 1; }

/* Pista visual "+" que gira a "×" al abrir */
.card__hint {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--piedra);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card__hint::before,
.card__hint::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: var(--salvia-profunda);
  transform: translate(-50%, -50%);
}
.card__hint::after { transform: translate(-50%, -50%) rotate(90deg); }
.js .card__hint { display: block; }
html:not(.js) .card__hint { display: none; }

.card__body {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--fs-small);
}
.card__body p { margin-bottom: var(--space-3); }
.card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}

/* Estado plegado (solo con JS) */
.js .card__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.js .card__panel-inner {
  min-height: 0;
  overflow: hidden;
}
.js .card__body {
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

/* Estado desplegado: clic / toque / teclado */
.js .card.is-open .card__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}
.js .card.is-open .card__body { opacity: 1; }
.card.is-open .card__hint { transform: rotate(45deg); }

/* Realce común: abierta, hover (ratón) y foco de teclado */
.card.is-open,
.card:has(.card__toggle:focus-visible) {
  border-color: var(--piedra);
  box-shadow: var(--shadow-soft);
}
.card:has(.card__toggle:focus-visible) .card__hint,
.card.is-open .card__hint {
  border-color: var(--salvia-profunda);
}

/* Escritorio con ratón: se despliega también al pasar por encima.
   Un pequeño retardo evita aperturas accidentales al cruzar la tarjeta. */
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    border-color: var(--piedra);
    box-shadow: var(--shadow-soft);
  }
  .card:hover .card__hint {
    border-color: var(--salvia-profunda);
    transform: rotate(45deg);
  }
  .js .card:hover .card__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition-delay: 120ms;
  }
  .js .card:hover .card__body {
    opacity: 1;
    transition-delay: 120ms;
  }
}

/* Rejilla de 4 columnas (Adopción y acogimiento) */
@media (min-width: 64em) {
  .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tarjeta centrada: icono arriba, título centrado (guía visual) */
.card--centered .card__toggle {
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  min-height: 13.5rem; /* cabe un título de 3 líneas: todas las tarjetas plegadas miden igual */
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
}
.card--centered .card__title { flex: none; }
.card--centered .card__icon {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  padding: 0.85rem;
  border-radius: 50%;
  background: var(--crema);
  color: var(--salvia-profunda);
  transition: transform var(--dur) var(--ease);
}
.card--centered .card__hint {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}
@media (hover: hover) and (pointer: fine) {
  .card--centered:hover .card__icon { transform: scale(1.06); }
}

/* Tarjeta destacada (Servicios): crema sobre salvia profunda (4,55:1) */
.card.card--feature {
  background: var(--salvia-profunda);
  border-color: var(--salvia-profunda);
  color: var(--crema);
  box-shadow: 0 24px 40px -32px rgb(63 82 79 / 0.9);
  --color-focus: var(--crema);
  --color-link: var(--crema);
  --color-link-hover: var(--blanco);
}
.card--feature .card__toggle {
  min-height: 15rem;
  color: var(--crema);
}
.card--feature .card__heading { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem); }
.card--feature .card__icon {
  width: 5rem;
  height: 5rem;
  padding: 1.1rem;
  background: var(--salvia-oscura);
  color: var(--crema);
}
.card--feature .card__hint { border-color: var(--crema); }
.card--feature .card__hint::before,
.card--feature .card__hint::after { background: var(--crema); }
.card--feature .card__body a { color: var(--crema); }
.card--feature .card__body a:hover { color: var(--blanco); }
.card--feature .card__toggle:focus-visible { outline-color: var(--crema); }
.card.card--feature.is-open,
.card.card--feature:has(.card__toggle:focus-visible) {
  border-color: var(--salvia-oscura);
  background: var(--salvia-oscura);
}
.card--feature.is-open .card__hint,
.card--feature:has(.card__toggle:focus-visible) .card__hint { border-color: var(--crema); }
@media (hover: hover) and (pointer: fine) {
  .card.card--feature:hover {
    border-color: var(--salvia-oscura);
    background: var(--salvia-oscura);
  }
  .card--feature:hover .card__hint { border-color: var(--crema); }
}

/* 9. Secciones ------------------------------------------------------------- */

/* Ondas decorativas entre secciones (guiño al agua, sin abusar).
   Toman el color de la sección contigua. */
.hero,
.section--waved { position: relative; }
.wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(28px, 5vw, 72px);
  color: var(--blanco);
  pointer-events: none;
}
.wave--top {
  top: -1px;
  bottom: auto;
}
.section--waved { padding-block: calc(var(--section-pad) + 2rem) var(--section-pad); }

/* Hero (#inicio): texto a la izquierda, logotipo a la derecha (guía visual) */
.hero {
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) calc(var(--section-pad) + 2.5rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 56em) {
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.hero__title {
  margin-bottom: var(--space-3);
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  line-height: 1.05;
  color: var(--salvia-profunda);
}
.hero__motto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  font-weight: 400; /* lema: Montserrat Regular (manual) */
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--salvia-profunda);
}
.hero__text {
  max-width: 38rem;
  margin-bottom: var(--space-6);
  font-size: 1.0625rem;
}
@media (min-width: 56em) {
  .hero__text { font-size: 1.125rem; }
}

/* Logotipo dentro de un marco orgánico blanco, con una "sombra" arena desplazada */
.hero__visual {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(82%, 460px);
}
.hero__visual::before,
.hero__visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.hero__visual::before {
  inset: 0;
  background: var(--arena-clara);
  border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%;
  transform: translate(6%, 5%) rotate(-6deg);
}
.hero__visual::after {
  width: 34%;
  aspect-ratio: 1;
  top: -6%;
  left: -7%;
  border: 1px solid var(--eucalipto);
  border-radius: 50%;
}
.hero__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--blanco);
  border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
  box-shadow: 0 30px 60px -40px rgb(63 82 79 / 0.55);
}
.hero__logo {
  width: 62%;
  min-width: 120px; /* mínimo del manual */
  height: auto;
}

/* Tarjetas de adopción: títulos largos, algo más pequeños */
#adopcion .card__heading { font-size: 1.25rem; }

/* Franja con foto de la clínica */
.photo-band {
  display: grid;
  background: var(--salvia-profunda);
}
@media (min-width: 56em) {
  .photo-band { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.photo-band__media {
  min-width: 0;
  aspect-ratio: 16 / 10;
}
@media (min-width: 56em) {
  .photo-band__media { aspect-ratio: auto; min-height: 460px; }
}
.photo-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-band__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5);
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, 1rem + 4vw, 5rem);
}
.photo-band__text .label { margin: 0; }
.photo-band__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.2;
  color: var(--crema);
}

/* Huecos reservados para fotos (placeholder hasta que lleguen las imágenes).
   Si se publica antes de tener las fotos y no se quiere mostrar el rótulo,
   basta con añadir: .photo-slot__label { display: none; } */
.photo-slot {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 110%, var(--eucalipto) 0 28%, transparent 28.5%),
    radial-gradient(circle at 105% 0%, var(--crema) 0 30%, transparent 30.5%),
    var(--arena-clara);
  color: var(--salvia-oscura);
}
.photo-slot--wide {
  /* Base crema: se distingue de la sección de Adopción (arena clara) que tiene encima */
  background:
    radial-gradient(ellipse at 15% 120%, var(--eucalipto) 0 35%, transparent 35.5%),
    radial-gradient(circle at 105% 45%, var(--arena-clara) 0 22%, transparent 22.5%),
    var(--crema);
}
.photo-slot__initials {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  line-height: 1;
  letter-spacing: var(--tracking-logo);
  margin-right: calc(-1 * var(--tracking-logo));
}
.photo-slot__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.9rem;
  border: 1px dashed var(--salvia-oscura);
  border-radius: var(--radius-pill);
  background: var(--crema);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Equipo: fichas verticales lado a lado (guía visual) */
.team {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 56em) {
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
    align-items: stretch; /* las dos fichas miden lo mismo */
  }
}
.team > li { display: flex; }
.team-card,
.team-card__body,
.team-card__bio {
  display: flex;
  flex-direction: column;
}
.team-card { flex: 1; }
.team-card__body,
.team-card__bio { flex: 1; }
.team-card__toggle { align-self: flex-start; }
.team-card__bio > .team-card__toggle { margin-top: auto; }
.team-card {
  padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  background: var(--crema);
  border-radius: var(--radius-lg);
}
.team-card__photo {
  width: min(260px, 75%);
  aspect-ratio: 4 / 5;
  margin: 0 auto var(--space-6);
  overflow: hidden;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg); /* arco */
  background: var(--arena-clara);
  box-shadow: 0 24px 40px -30px rgb(63 82 79 / 0.6);
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.team-card__body > .team-card__name,
.team-card__body > .team-card__role,
.team-card__body > .team-card__num { text-align: center; }
.team-card__name { margin-bottom: var(--space-2); }
.team-card__role {
  margin-bottom: var(--space-1);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--salvia-profunda);
}
.team-card__num { font-size: var(--fs-small); }
.team-card__bio {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--piedra);
  font-size: var(--fs-small);
}
.team-card__bio strong { font-weight: 600; }
.team-card__more > p { margin-bottom: var(--space-4); }
.team-card__quote {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.35;
  color: var(--salvia-profunda);
}
.team-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 0.4rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--salvia-profunda);
  font: 600 var(--fs-small) / 1.4 var(--font-body);
  cursor: pointer;
}
.team-card__toggle::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.team-card__toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.team-card__toggle:hover { color: var(--salvia-oscura); }

/* Contacto */
.contact {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 64em) {
  /* Mapa y datos a la izquierda, formulario a la derecha (guía visual) */
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-7); }
}
.contact__info {
  display: grid;
  gap: var(--space-5);
}

.panel {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--blanco);
  border-radius: var(--radius-lg) var(--radius) var(--radius-lg) var(--radius);
}

.contact-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}
@media (min-width: 30em) {
  .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contact-list dt {
  margin-bottom: var(--space-1);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--salvia-profunda);
}
.contact-list dd {
  margin: 0;
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}

/* Formulario de contacto
   La paleta no tiene rojo: los errores se indican con texto, icono y borde
   más grueso (nunca solo con color). Bordes de campo en salvia (4,2:1 sobre
   blanco, cumple el 3:1 exigido a los componentes de interfaz). */
.form { display: grid; gap: var(--space-5); }
.form__grid { display: grid; gap: var(--space-5); }
@media (min-width: 40em) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.form__note,
.form__hint {
  margin: 0;
  font-size: 0.875rem;
}
.form__hint { margin-bottom: var(--space-2); }
.form__field { display: grid; align-content: start; }
.form label {
  margin-bottom: var(--space-2);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--salvia-oscura);
}
.form__req { color: var(--salvia-profunda); }
.form__optional { font-weight: 400; }

.form input:not([type="checkbox"]),
.form select,
.form textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--salvia);
  border-radius: var(--radius);
  background: var(--blanco);
  color: var(--salvia-oscura);
  font: inherit;
  font-size: 1rem; /* evita el zoom automático en iOS */
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form textarea { min-height: 8rem; resize: vertical; }
.form select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2358716E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}
.form input:not([type="checkbox"]):focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 3px solid var(--salvia-oscura);
  outline-offset: 1px;
  border-color: var(--salvia-oscura);
}
.form [aria-invalid="true"] {
  border: 2px solid var(--salvia-oscura) !important;
  background-color: var(--crema) !important;
}

.form__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--salvia-oscura);
}
.form__error::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--salvia-oscura);
  color: var(--blanco);
  font-size: 0.75rem;
  line-height: 1;
}
.form__error[hidden] { display: none; }

.form__field--check {
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  align-items: start;
}
.form__field--check input {
  width: 22px;
  height: 22px;
  margin: 0.1rem 0 0;
  accent-color: var(--salvia-profunda);
}
.form__field--check label {
  margin: 0;
  font-weight: 400;
}
.form__field--check .form__error { grid-column: 1 / -1; }

.form__rgpd {
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--piedra);
  background: var(--crema);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.form__rgpd-title {
  margin-bottom: var(--space-2);
  font-weight: 600;
}
.form__rgpd dl { margin: 0 0 var(--space-2); }
.form__rgpd dt { display: inline; font-weight: 600; }
.form__rgpd dd { display: inline; margin: 0; }
.form__rgpd dl > div + div { margin-top: var(--space-1); }

.form__botcheck { display: none !important; }

.form__submit { justify-self: start; }
.form__submit[aria-disabled="true"] { cursor: progress; opacity: 0.85; }

/* Avisos de éxito / error del envío */
.form-alert {
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--arena-clara);
  color: var(--salvia-oscura);
  border-left: 4px solid var(--salvia-profunda);
}
.form-alert:focus { outline: none; }
.form-alert:focus-visible { outline: 3px solid var(--salvia-oscura); outline-offset: 3px; }
.form-alert--error { border-left-color: var(--salvia-oscura); background: var(--crema); }
.form-alert__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.25;
}
.form-alert a { color: var(--salvia-oscura); }

/* Mapa estático */
.map {
  position: relative;
  overflow: hidden;
  background: var(--arena-clara);
  border-radius: var(--radius-lg) var(--radius) var(--radius-lg) var(--radius);
}
.map__art {
  width: 100%;
  height: 220px;
}
@media (min-width: 64em) {
  .map__art { height: 320px; } /* mapa más grande, como en la guía visual */
  .map .map__pin { top: 120px; }
}
.map__road {
  stroke: var(--blanco);
  stroke-width: 10;
}
.map__road--main {
  stroke: var(--piedra);
  stroke-width: 6;
}
.map__water {
  stroke: var(--eucalipto);
  stroke-width: 14;
}
.map__pin {
  position: absolute;
  top: 70px;
  left: 50%;
  width: 32px;
  height: 44px;
  transform: translateX(-50%);
  fill: var(--salvia-profunda);
}
.map__pin circle { fill: var(--crema); }
.map__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--blanco);
}
.map__address {
  margin: 0;
  font-size: var(--fs-small);
}

/* Páginas legales */
.legal__inner { max-width: calc(48rem + 2 * var(--gutter)); }
.legal__header {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--piedra);
}
.legal__header h1 { font-size: var(--fs-h2); }
.legal__updated { font-size: var(--fs-small); }
.legal h2 {
  margin-top: var(--space-7);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
}
.legal ul { padding-left: 1.2em; margin: 0 0 var(--space-4); }
.legal li + li { margin-top: var(--space-2); }
.legal li::marker { color: var(--piedra); }
.legal strong { font-weight: 600; }
.legal code { font-size: 0.9em; }
.legal a { overflow-wrap: anywhere; }
.legal__back { margin-top: var(--space-8); }

/* Página 404 */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 55vh;
  justify-content: center;
  text-align: center;
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 8vw, 9rem);
  line-height: 1;
  letter-spacing: var(--tracking-logo);
  margin-right: calc(-1 * var(--tracking-logo));
  color: var(--salvia-profunda);
}
.error-page p { max-width: 34rem; }
.error-page .btn-group { justify-content: center; margin-top: var(--space-5); }

/* 10. Footer ---------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--fs-small);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 48em) {
  .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; }
}
.site-footer__brand .logo { margin-bottom: var(--space-5); }
.site-footer__brand .logo img { height: 60px; }
.site-footer__title {
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.site-footer address { font-style: normal; }
.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer li + li { margin-top: var(--space-2); }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgb(245 239 216 / 0.35); /* crema translúcida */
  font-size: 0.8125rem;
}
.site-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.site-footer__legal li + li { margin-top: 0; }

/* Botón flotante de WhatsApp (colores de la paleta: blanco sobre salvia profunda, 5,25:1) */
.whatsapp-btn {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--crema); /* lo separa del footer, que es del mismo color */
  background: var(--salvia-profunda);
  color: var(--blanco);
  box-shadow: 0 8px 24px -8px rgb(63 82 79 / 0.6);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.whatsapp-btn:hover {
  background: var(--salvia-oscura);
  color: var(--blanco);
  transform: translateY(-2px);
}
.whatsapp-btn:focus-visible {
  outline: 3px solid var(--salvia-oscura);
  outline-offset: 3px;
  border-radius: 50%;
}
@media (min-width: 64em) {
  .whatsapp-btn {
    right: max(1.5rem, env(safe-area-inset-right));
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    width: 60px;
    height: 60px;
  }
}
/* Que el botón no tape lo último del footer */
.site-footer { padding-bottom: calc(var(--space-6) + 72px); }
@media print { .whatsapp-btn { display: none; } }

/* Aparición suave al hacer scroll (solo con JS y sin movimiento reducido) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.cards > li.reveal:nth-child(4n + 2) { transition-delay: 90ms; }
.cards > li.reveal:nth-child(4n + 3) { transition-delay: 180ms; }
.cards > li.reveal:nth-child(4n + 4) { transition-delay: 270ms; }
.team > li:nth-child(2) .reveal { transition-delay: 120ms; }
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* 11. Movimiento reducido -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
}