/* ============================================================
   Pet Value P.R. — BASE
   Reset suave, tipografía, utilidades y animación de entrada.
   Los colores vienen siempre de tokens.css.

   AUDITORÍA DE REGLAS GLOBALES (especificación maestra §8):
   este archivo es lo único que toca elementos genéricos, y solo
   con lo imprescindible para la propia landing:
   - box-sizing universal: evita desbordes de la retícula propia.
   - body: tipografía y color del proyecto (la plantilla de la
     landing no carga el CSS del tema; ver integrations/wordpress.md).
   - márgenes superiores de h1/h2/h3/p a 0: los espaciados los
     define cada componente, no el navegador.
   - img/svg max-width: las imágenes propias nunca rompen su contenedor.
   Nada más se estila a nivel de elemento. Todo lo demás va por
   clases del proyecto (prefijo de sección o componente).
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:94px}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--font-head)}
h1,h2{letter-spacing:-.03em}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img,svg{max-width:100%}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}

.container{width:min(calc(100% - 64px),var(--container));margin-inline:auto}
.sr-only{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;top:-70px;left:12px;padding:12px;background:var(--white);color:var(--navy);z-index:1000;border-radius:0 0 10px 10px;font-weight:700}
.skip-link:focus{top:0}

.section{padding:108px 0}
.section-light{background:var(--bg)}
.kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.17em;color:var(--blue);margin-bottom:22px}
.kicker-accent{color:var(--accent)}
.section-top{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:40px}
.section-top h2,.section-heading h2{font-size:clamp(38px,5.1vw,68px);line-height:1.09;margin:0;font-weight:800;color:var(--navy)}
.section-top h2 span,.section-heading h2 span{color:var(--muted)}
.section-top>p{max-width:310px;color:var(--muted);line-height:1.7;font-size:16px;margin-bottom:3px}

/* Animación de entrada (solo si hay JS; sin JS todo es visible) */
.reveal{transition:opacity .7s ease,transform .7s ease}
.js .reveal:not(.visible){opacity:0;transform:translateY(22px)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js .reveal:not(.visible){opacity:1;transform:none}
}