/*
 * Reset liviano, elementos base y las pocas utilidades de layout que se
 * repiten en todas las secciones. Todo lo que sea una pieza reconocible
 * (botón, card, header) vive en components.css.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Quien pidió menos movimiento no quiere que el navegador le anime el salto
   de los anchors tampoco. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--c-fuente-texto);
  font-size: var(--c-txt-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--c-fuente-titulo);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Va con `body` a propósito: los estilos que WordPress genera desde theme.json
   se imprimen después de esta hoja y traen su propio `a { color: … }` con la
   misma especificidad, así que un selector de un solo elemento perdería. El
   naranja de theme.json queda para el editor; en el front lo pone cada
   componente, y los links de una novedad los estila `.prosa a`. */
body a {
  color: inherit;
  text-decoration: none;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--c-borde);
}

:focus-visible {
  outline: 2px solid var(--c-naranja);
  outline-offset: 3px;
  border-radius: var(--c-radio-sm);
}

/* --- Layout --- */

.contenedor {
  width: 100%;
  max-width: var(--c-ancho);
  margin-inline: auto;
  padding-inline: var(--c-pad-lateral);
}

.seccion {
  padding-block: var(--c-seccion-y);
}

/* Las tres secciones largas —ProVet, Nosotros y Contacto— cierran un escalón
   más arriba en pantallas grandes: son bloques densos y sin ese aire extra la
   página se lee como una sola tira continua. */
.seccion--amplia {
  padding-block: clamp(5rem, 3.5rem + 4.5vw, 7rem);
}

/* El header es fijo: sin esto, saltar a #servicios deja el título abajo de él. */
[id] {
  scroll-margin-top: calc(var(--c-header-alto) + 1rem);
}

/* `screen-reader-text` es el nombre que usan el core y los plugins: sin este
   alias, textos que WordPress da por invisibles aparecerían en pantalla. */
.solo-lectores,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Primer tabulador de la página: invisible hasta que se enfoca. */
.saltar-al-contenido {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--c-naranja);
  color: var(--c-sobre-oscuro);
  font-weight: 700;
  border-radius: var(--c-radio);
  transform: translateY(-150%);
  transition: transform var(--c-trans);
}

.saltar-al-contenido:focus {
  transform: none;
}

/* --- Encabezados de sección --- */

.seccion__etiqueta {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--c-naranja);
  font-size: var(--c-txt-sm);
  font-weight: 700;
  /* Es un renglón suelto arriba del título: el interlineado de párrafo del
     body le agrega aire que acá solo separa la etiqueta de lo que anuncia. */
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seccion__titulo {
  margin-bottom: 1rem;
  font-size: var(--c-txt-titulo);
  line-height: var(--c-txt-titulo-lh);
}

/* El remate en itálica naranja es el gesto que se repite en cada título. */
.seccion__titulo em {
  color: var(--c-naranja);
  font-style: italic;
}

.seccion__bajada {
  max-width: var(--c-ancho-texto);
  color: var(--c-apagado);
  font-size: var(--c-txt-lg);
  /* Un punto más cerrado que el cuerpo: son dos o tres renglones grandes y con
     el interlineado del body se despegan del título. */
  line-height: 1.55;
}

.seccion__cabecera {
  max-width: var(--c-ancho-texto);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

/* Un escalón menos de tamaño, para las secciones donde el título comparte
   fila con el contenido en vez de encabezarlo. */
.seccion__titulo--chico {
  font-size: var(--c-txt-titulo-sm);
  line-height: var(--c-txt-titulo-sm-lh);
}

.seccion__cabecera--centrada {
  margin-inline: auto;
  text-align: center;
}

/* Un escalón más ancha que el resto, para las cabeceras cuya bajada tiene que
   entrar en un solo renglón en escritorio. La bajada trae su propio tope de
   medida de lectura, así que sin soltarlo la cabecera se ensancharía sola. */
.seccion__cabecera--ancha {
  max-width: 48rem;
}

.seccion__cabecera--ancha .seccion__bajada {
  max-width: none;
}

/* Dentro de una grilla el aire lo pone el gap, no la cabecera: ni el margen de
   abajo del bloque ni el que arrastra su último elemento —la cabecera es un
   ítem de grilla, así que ese margen no colapsa hacia afuera y se sumaría. */
.seccion__cabecera--sin-aire {
  margin-bottom: 0;
}

.seccion__cabecera--sin-aire > :last-child {
  margin-bottom: 0;
}

.seccion__cabecera--centrada .seccion__bajada {
  margin-inline: auto;
}

/* --- Reveal al hacer scroll --- */

/* main.js le pone .es-visible cuando la sección entra en pantalla. Sin JS
   la regla de abajo nunca aplica, así que el contenido se ve igual: la
   animación es una mejora, no un requisito para leer la página. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms ease-out,
    transform 600ms ease-out;
}

.js .reveal.es-visible {
  opacity: 1;
  transform: none;
}

/* Escalonado de los hijos de una grilla revelada. */
.js .reveal--escalonado > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 500ms ease-out,
    transform 500ms ease-out;
}

.js .reveal--escalonado.es-visible > * {
  opacity: 1;
  transform: none;
}

.js .reveal--escalonado.es-visible > *:nth-child(1) {
  transition-delay: 0ms;
}
.js .reveal--escalonado.es-visible > *:nth-child(2) {
  transition-delay: 70ms;
}
.js .reveal--escalonado.es-visible > *:nth-child(3) {
  transition-delay: 140ms;
}
.js .reveal--escalonado.es-visible > *:nth-child(4) {
  transition-delay: 210ms;
}
.js .reveal--escalonado.es-visible > *:nth-child(5) {
  transition-delay: 280ms;
}
.js .reveal--escalonado.es-visible > *:nth-child(6) {
  transition-delay: 350ms;
}
.js .reveal--escalonado.es-visible > *:nth-child(7) {
  transition-delay: 420ms;
}
.js .reveal--escalonado.es-visible > *:nth-child(8) {
  transition-delay: 490ms;
}
.js .reveal--escalonado.es-visible > *:nth-child(n + 9) {
  transition-delay: 560ms;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal--escalonado > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}