/*
 * Piezas reutilizables: botones, cards, badges, header, footer, marquee,
 * acordeón de FAQ y el botón flotante de WhatsApp. Lo que aparece una sola
 * vez y solo en una sección vive en sections.css.
 */

/* --- Botones --- */

/* El alto va por min-height y no por padding vertical: así todos los botones
   de una misma medida se alinean aunque uno tenga ícono y otro no, y si algún
   texto llega a dos líneas el botón crece en vez de deformarse. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--c-radio-lg);
  font-family: var(--c-fuente-texto);
  font-size: var(--c-txt-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  /* Las etiquetas son cortas y conocidas: antes que partirlas en dos renglones
     —lo que deforma el botón cuando el texto entra por medio píxel— preferimos
     que sobresalga esos pocos píxeles del contenedor. Con el techo de abajo,
     "pocos" es literal: nunca más que el aire lateral. */
  white-space: nowrap;
  /* El techo que faltaba. Sin él, un botón que no entra se sale de la página
     en vez de acomodarse: "Quiero saber más de ProVet" pide 335px y en un
     teléfono de 360 el contenedor da 328. Con nowrap y sin max-width esos 7px
     terminaban contra el borde de la pantalla. */
  max-width: 100%;
  cursor: pointer;
  transition:
    background-color var(--c-trans),
    border-color var(--c-trans),
    color var(--c-trans),
    box-shadow var(--c-trans),
    transform var(--c-trans);
}

.boton:hover {
  transform: translateY(-2px);
}

.boton:active {
  transform: none;
}

/* Medida fija, no relativa al texto: en el botón grande un ícono escalado se
   come el ancho que el renglón necesita para entrar en una sola línea. */
.boton__icono {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: currentColor;
}

.boton--primario {
  background-color: var(--c-naranja);
  color: var(--c-sobre-oscuro);
  box-shadow: var(--c-sombra-suave);
}

.boton--primario:hover {
  background-color: hsl(25 85% 32%);
  box-shadow: var(--c-sombra-media);
}

.boton--secundario {
  background-color: var(--c-sobre-oscuro);
  border-color: var(--c-borde);
  color: var(--c-texto);
  box-shadow: var(--c-sombra-card);
}

.boton--secundario:hover {
  border-color: var(--c-naranja);
  color: var(--c-naranja);
  box-shadow: var(--c-sombra-suave);
}

/* Sobre el hero y otras zonas oscuras: solo el borde, relleno al pasar. */
.boton--contorno-claro {
  background-color: transparent;
  border-color: hsl(var(--c-sobre-oscuro-hsl) / 0.5);
  color: var(--c-sobre-oscuro);
  backdrop-filter: blur(4px);
}

.boton--contorno-claro:hover {
  background-color: var(--c-sobre-oscuro);
  border-color: var(--c-sobre-oscuro);
  color: var(--c-texto);
}

/* Va en naranja, no en verde: el verde de WhatsApp queda reservado para el
   botón flotante, que es el único que tiene que leerse como "app de mensajes"
   y no como parte de la paleta de la marca. */
.boton--whatsapp {
  background-color: var(--c-naranja);
  color: #fff;
  box-shadow: var(--c-sombra-boton);
}

.boton--whatsapp:hover {
  background-color: hsl(25 85% 28%);
  box-shadow: var(--c-sombra-media);
}

/* La única variante con degradado, y va solo en los dos botones del header —el
   de la barra y el del menú de mobile—, igual que en el sitio de referencia:
   sobre el video del hero el naranja plano se confunde con el fondo. */
.boton--hero {
  background-image: linear-gradient(to right, var(--c-naranja), hsl(15 75% 35%));
  color: var(--c-sobre-oscuro);
  box-shadow: var(--c-sombra-boton);
}

.boton--hero:hover {
  box-shadow: var(--c-sombra-media);
}

.boton--provet {
  background-color: var(--c-sobre-oscuro);
  color: var(--c-provet-fondo);
}

.boton--provet:hover {
  background-color: hsl(0 0% 92%);
}

.boton--chico {
  min-height: 2.25rem;
  padding-inline: 1.25rem;
  font-size: var(--c-txt-sm);
}

/* Para los llamados a la acción que arrancan una conversación —hero, ProVet y
   el cierre de la página—: un escalón más grande que el resto para que se lean
   como la salida principal de la sección. */
.boton--grande {
  min-height: 3.5rem;
  padding-inline: 2.5rem;
  font-size: var(--c-txt-lg);
}

.boton--ancho {
  width: 100%;
}

/* En un teléfono los 2,5rem de aire interno del botón grande son un lujo: se
   comen 80px de los 328 útiles y dejan a las etiquetas largas sin lugar. Con
   1,5rem entran todas en un solo renglón hasta 360px de pantalla.
   El `normal` es la red debajo de eso: en un iPhone SE ni así entra la etiqueta
   de ProVet, y dos renglones centrados se leen como una decisión —el alto sale
   de min-height, así que el botón crece— mientras que salirse de la pantalla
   se lee como un error. `balance` evita el corte con una sola palabra huérfana
   en el segundo renglón; donde no está soportado, el texto parte normal. */
@media (max-width: 30rem) {
  .boton--grande {
    padding-inline: 1.5rem;
    white-space: normal;
    text-wrap: balance;
  }
}

/* --- Enlace con flecha --- */

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--c-naranja);
  font-weight: 700;
  transition: gap var(--c-trans);
}

.enlace-flecha:hover {
  gap: 0.75rem;
}

.enlace-flecha svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El "volver" reusa la misma flecha dada vuelta: un ícono menos que mantener.
   Va apagado porque es navegación de servicio, no la acción de la página. */
.enlace-flecha--atras {
  color: var(--c-apagado);
  font-size: var(--c-txt-sm);
}

.enlace-flecha--atras:hover {
  color: var(--c-naranja);
}

.enlace-flecha--atras svg {
  transform: rotate(180deg);
}

/* --- Filtros (chips) --- */

/* Los usan el listado de novedades (por categoría) y la galería (por especie).
   Son links reales con URL propia, no botones de JavaScript. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

.filtros__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--c-borde);
  border-radius: var(--c-radio-full);
  background-color: var(--c-fondo);
  color: var(--c-apagado);
  font-size: var(--c-txt-sm);
  font-weight: 700;
  transition: color var(--c-trans), background-color var(--c-trans), border-color var(--c-trans);
}

.filtros__chip:hover {
  border-color: var(--c-naranja-claro);
  color: var(--c-naranja);
}

.filtros__chip.es-activo {
  border-color: transparent;
  background-color: var(--c-naranja);
  color: var(--c-sobre-oscuro);
}

/* --- Badges --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  background-color: var(--c-acento);
  color: var(--c-naranja);
  border-radius: var(--c-radio-full);
  font-size: var(--c-txt-sm);
  font-weight: 700;
  line-height: 1.2;
}

.badge svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: currentColor;
}

.badge--claro {
  background-color: hsl(var(--c-sobre-oscuro-hsl) / 0.15);
  color: var(--c-sobre-oscuro);
  backdrop-filter: blur(4px);
}

.badge--destacado {
  background-color: var(--c-naranja);
  color: var(--c-sobre-oscuro);
}

/* --- Cards --- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--c-grad-card);
  border: 1px solid var(--c-borde);
  border-radius: var(--c-radio-xl);
  box-shadow: var(--c-sombra-card);
  transition:
    box-shadow var(--c-trans),
    border-color var(--c-trans),
    transform var(--c-trans);
}

.card--enlazada:hover {
  border-color: hsl(var(--c-naranja-hsl) / 0.35);
  box-shadow: var(--c-sombra-media);
  transform: translateY(-4px);
}

/* Enlace que estira su área de click hasta cubrir la card entera, sin encerrar
   el resto del markup: así adentro pueden convivir otros links (el badge de
   categoría) y el HTML no queda con anclas anidadas. */
.enlace-cubre::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* El badge va antes que el título en el markup, así que sin z-index la capa
   del enlace le taparía el click. */
.card .badge {
  position: relative;
  z-index: 1;
}

.card__titulo {
  margin-bottom: 0.5rem;
  font-size: var(--c-txt-xl);
}

.card__texto {
  color: var(--c-apagado);
  font-size: var(--c-txt-base);
}

/* Cuadradito de ícono arriba de cada card. */
.icono-caja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  background-color: var(--c-acento);
  color: var(--c-naranja);
  /* Un escalón menos que la card que lo contiene: la caja del ícono es chica y
     con el mismo radio se le redondea de más. */
  border-radius: var(--c-radio-lg);
  transition: background-color var(--c-trans);
}

.icono-caja svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card--enlazada:hover .icono-caja {
  background-color: var(--c-naranja);
  color: var(--c-sobre-oscuro);
}

.icono-caja--claro {
  background-color: hsl(var(--c-sobre-oscuro-hsl) / 0.15);
  color: var(--c-sobre-oscuro);
}

/* --- Header --- */

.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition:
    background-color var(--c-trans),
    box-shadow var(--c-trans),
    backdrop-filter var(--c-trans);
}

/* Tres cosas vuelven sólido al header, y las tres tienen que estar en el mismo
   `:not()`: si el fondo transparente le gana por especificidad a alguna, esa
   deja de verse aunque el resto de sus reglas apliquen.
   - `.esta-fijo`: main.js, al pasar los 24px de scroll.
   - `.header--solido`: páginas internas, donde no hay hero oscuro atrás.
   - `.header--menu-abierto`: el panel de mobile desplegado, que es claro. */
.header:not(.esta-fijo):not(.header--solido):not(.header--menu-abierto) {
  background-color: transparent;
}

.header.esta-fijo,
.header--solido,
.header--menu-abierto {
  background-color: hsl(var(--c-fondo-hsl) / 0.9);
  backdrop-filter: blur(12px);
  box-shadow: var(--c-sombra-card);
}

.header__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--c-header-alto);
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.header__logo img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--c-radio-full);
  object-fit: cover;
}

.header__nombre {
  display: flex;
  flex-direction: column;
}

.header__marca {
  font-family: var(--c-fuente-titulo);
  font-size: var(--c-txt-lg);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

.header__rubro {
  display: none;
  font-size: var(--c-txt-xs);
  line-height: 1.4;
  opacity: 0.75;
}

@media (min-width: 640px) {
  .header__rubro {
    display: block;
  }
}

.header__nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

.header__nav a {
  position: relative;
  font-size: var(--c-txt-sm);
  font-weight: 600;
  transition: color var(--c-trans);
}

.header__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--c-trans);
}

.header__nav a:hover::after {
  transform: scaleX(1);
}

.header__acciones {
  display: none;
  align-items: center;
  gap: 1rem;
}

.header__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--c-txt-sm);
  font-weight: 700;
  transition: color var(--c-trans);
}

.header__tel svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sobre el hero, todo el header va en blanco. La misma lista de estados que el
   fondo: con el menú desplegado el teléfono cae adentro del panel claro y en
   blanco desaparecería. */
.header:not(.esta-fijo):not(.header--solido):not(.header--menu-abierto) .header__marca,
.header:not(.esta-fijo):not(.header--solido):not(.header--menu-abierto) .header__nav a,
.header:not(.esta-fijo):not(.header--solido):not(.header--menu-abierto) .header__tel,
.header:not(.esta-fijo):not(.header--solido):not(.header--menu-abierto) .header__hamburguesa {
  color: var(--c-sobre-oscuro);
}

.header.esta-fijo .header__nav a:hover,
.header--solido .header__nav a:hover,
.header.esta-fijo .header__tel:hover,
.header--solido .header__tel:hover,
.header--menu-abierto .header__tel:hover {
  color: var(--c-naranja);
}

/* ProVet lleva su propio color en el menú, pero solo con el header sólido:
   sobre el hero oscuro el violeta no se lee. */
.header.esta-fijo .header__nav a.es-provet,
.header--solido .header__nav a.es-provet,
.header__menu a.es-provet {
  color: var(--c-provet);
}

.header__hamburguesa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  border-radius: var(--c-radio);
}

.header__hamburguesa svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* El ícono de cerrar solo se muestra con el menú abierto, y viceversa. */
.header__hamburguesa .icono-cerrar,
.header__hamburguesa[aria-expanded='true'] .icono-abrir {
  display: none;
}

.header__hamburguesa[aria-expanded='true'] .icono-cerrar {
  display: block;
}

.header__menu {
  display: none;
  padding: 1rem 0;
  background-color: var(--c-fondo);
  border-top: 1px solid var(--c-borde);
}

.header__menu.esta-abierto {
  display: block;
  animation: cucha-aparecer 250ms ease-out;
}

/* Columna con gap propio: cada link es un bloque que se pinta entero al tocarlo,
   no un renglón de texto suelto. El padding lateral se suma al del contenedor,
   así que el texto arranca corrido respecto del logo de arriba. */
.header__menu .contenedor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Solo los links de navegación, que son hijos directos del contenedor: el
   teléfono y el botón del pie cuelgan más abajo y tienen que conservar su
   display y su radio propios. */
.header__menu .contenedor > a {
  display: block;
  padding: 0.75rem 1rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--c-radio);
  transition:
    background-color var(--c-trans),
    color var(--c-trans);
}

.header__menu .contenedor > a:hover {
  color: var(--c-naranja);
  background-color: var(--c-acento);
}

/* El teléfono y el botón son acciones, no navegación: van separados del resto
   por una línea, como en el sitio de referencia. */
.header__menu-pie {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-borde);
}

.header__menu-pie .header__tel {
  display: flex;
  justify-content: center;
  padding: 0.5rem 1rem;
}

.header__menu-pie .boton {
  margin-top: 0.5rem;
}

@media (min-width: 1024px) {
  .header__nav,
  .header__acciones {
    display: flex;
  }

  .header__hamburguesa,
  .header__menu.esta-abierto {
    display: none;
  }
}

/* --- Footer --- */

.footer {
  background-color: var(--c-marron-footer);
  color: hsl(var(--c-sobre-oscuro-hsl) / 0.75);
  font-size: var(--c-txt-sm);
}

.footer a {
  transition: color var(--c-trans);
}

.footer a:hover {
  color: var(--c-naranja-claro);
}

.footer__grilla {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.footer__marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: var(--c-sobre-oscuro);
}

.footer__marca img {
  width: 3rem;
  height: 3rem;
  border-radius: var(--c-radio-full);
  object-fit: cover;
}

.footer__marca span {
  font-family: var(--c-fuente-titulo);
  font-size: var(--c-txt-xl);
  font-weight: 600;
}

.footer__titulo {
  margin-bottom: 1rem;
  color: var(--c-sobre-oscuro);
  font-family: var(--c-fuente-texto);
  font-size: var(--c-txt-base);
  font-weight: 800;
}

.footer__lista li + li {
  margin-top: 0.6rem;
}

.footer__titulo--sep {
  margin-top: 1.75rem;
}

.footer__redes {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.footer__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: hsl(var(--c-sobre-oscuro-hsl) / 0.1);
  border-radius: var(--c-radio-full);
  transition:
    background-color var(--c-trans),
    color var(--c-trans);
}

.footer__redes a:hover {
  background-color: var(--c-naranja);
  color: var(--c-sobre-oscuro);
}

.footer__redes svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer__horario {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.footer__horario dt {
  font-weight: 600;
}

.footer__horario dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.footer__horario + .footer__horario {
  margin-top: 0.6rem;
}

/* Apilada y centrada en mobile: los dos textos son largos y uno al lado del
   otro se parten en cuatro renglones desparejos. Recién en tablet entran en
   fila, cada uno contra su margen. */
.footer__barra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid hsl(var(--c-sobre-oscuro-hsl) / 0.1);
  text-align: center;
}

@media (min-width: 640px) {
  .footer__grilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .footer__barra {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
  }
}

@media (min-width: 1024px) {
  .footer__grilla {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 3rem;
  }
}

/* --- Botón flotante de WhatsApp --- */

.wa-flotante {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background-color: var(--c-whatsapp);
  color: #fff;
  border-radius: var(--c-radio-full);
  box-shadow: var(--c-sombra-media);
  transition:
    background-color var(--c-trans),
    transform var(--c-trans);
}

.wa-flotante:hover {
  background-color: var(--c-whatsapp-hover);
  transform: scale(1.08);
}

.wa-flotante svg {
  position: relative;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}

/* Anillo que late. Es decorativo: va detrás y no recibe eventos. */
.wa-flotante__pulso {
  position: absolute;
  inset: 0;
  background-color: var(--c-whatsapp);
  border-radius: inherit;
  opacity: 0.75;
  animation: cucha-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}

.wa-flotante__globo {
  position: absolute;
  right: calc(100% + 0.75rem);
  padding: 0.5rem 0.9rem;
  background-color: var(--c-sobre-oscuro);
  color: var(--c-texto);
  border-radius: var(--c-radio);
  box-shadow: var(--c-sombra-media);
  font-size: var(--c-txt-sm);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(0.5rem);
  transition:
    opacity var(--c-trans),
    transform var(--c-trans);
  pointer-events: none;
}

.wa-flotante:hover .wa-flotante__globo,
.wa-flotante:focus-visible .wa-flotante__globo {
  opacity: 1;
  transform: none;
}

/* En pantallas chicas el globo se superpone con el contenido y no aporta. */
@media (max-width: 767px) {
  .wa-flotante__globo {
    display: none;
  }

  .wa-flotante {
    width: 3.5rem;
    height: 3.5rem;
  }

  .wa-flotante svg {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* --- Marquee --- */

.marquee {
  display: flex;
  overflow: hidden;
  /* Los bordes se desvanecen para que las tarjetas no aparezcan cortadas. */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__pista {
  display: flex;
  flex-shrink: 0;
  gap: 1.5rem;
  padding-right: 1.5rem;
  width: max-content;
  animation: cucha-marquee 60s linear infinite;
}

.marquee__pista--reversa {
  animation-direction: reverse;
}

.marquee:hover .marquee__pista {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    mask-image: none;
  }

  .marquee__pista {
    animation: none;
  }
}

/* --- Acordeón de FAQ --- */

/* <details> nativo: abre y cierra sin JS y ya viene accesible por teclado. */
.faq-item {
  /* El aire lateral lo pone la card y el vertical cada parte: así la pregunta
     y la respuesta cortan en la misma vertical sin repetir el padding. */
  padding-inline: 1.25rem;
  background-color: var(--c-sobre-oscuro);
  border: 1px solid var(--c-borde);
  border-radius: var(--c-radio-lg);
  box-shadow: var(--c-sombra-card);
  transition:
    border-color var(--c-trans),
    box-shadow var(--c-trans);
}

.faq-item[open] {
  border-color: hsl(var(--c-naranja-hsl) / 0.4);
  box-shadow: var(--c-sombra-suave);
}

.faq-item + .faq-item {
  margin-top: 0.75rem;
}

.faq-item__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  font-family: var(--c-fuente-titulo);
  font-size: var(--c-txt-base);
  font-weight: 600;
  line-height: 1.55;
  cursor: pointer;
  list-style: none;
  transition: color var(--c-trans);
}

@media (min-width: 768px) {
  .faq-item__pregunta {
    font-size: var(--c-txt-lg);
  }
}

/* El triangulito por defecto de Safari y de Chrome. */
.faq-item__pregunta::-webkit-details-marker {
  display: none;
}

.faq-item__pregunta::marker {
  content: '';
}

.faq-item__pregunta:hover {
  color: var(--c-naranja);
}

/* Flecha discreta: el que manda es el texto de la pregunta, no el indicador.
   Va en currentColor para que acompañe al texto cuando la fila está en hover. */
.faq-item__flecha {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--c-trans);
}

.faq-item[open] .faq-item__flecha {
  transform: rotate(180deg);
}

.faq-item__respuesta {
  padding-bottom: 1rem;
  color: var(--c-apagado);
  font-size: var(--c-txt-sm);
}

/* --- Contenido de novedades (single) --- */

.prosa {
  max-width: var(--c-ancho-texto);
  font-size: var(--c-txt-lg);
  line-height: 1.75;
}

.prosa > * + * {
  margin-top: 1.25em;
}

.prosa h2 {
  margin-top: 2em;
  font-size: var(--c-txt-3xl);
}

.prosa h3 {
  margin-top: 1.75em;
  font-size: var(--c-txt-2xl);
}

.prosa a {
  color: var(--c-naranja);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.prosa ul,
.prosa ol {
  padding-left: 1.5rem;
}

.prosa ul {
  list-style: disc;
}

.prosa ol {
  list-style: decimal;
}

.prosa li + li {
  margin-top: 0.5em;
}

.prosa li::marker {
  color: var(--c-naranja);
}

.prosa blockquote {
  padding-left: 1.25rem;
  border-left: 3px solid var(--c-naranja);
  color: var(--c-apagado);
  font-style: italic;
}

.prosa img,
.prosa figure {
  border-radius: var(--c-radio-lg);
}

.prosa figcaption {
  margin-top: 0.6rem;
  color: var(--c-apagado);
  font-size: var(--c-txt-sm);
  text-align: center;
}

.prosa strong {
  font-weight: 800;
}

.prosa code {
  padding: 0.15em 0.4em;
  background-color: var(--c-suave);
  border-radius: var(--c-radio-sm);
  font-size: 0.9em;
}

/* --- Paginación --- */

/* El markup lo arma `the_posts_pagination()`: las clases `page-numbers` y
   `nav-links` vienen del core, no las elegimos nosotros. */
.paginacion {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.paginacion .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.paginacion .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.75rem;
  background-color: var(--c-fondo);
  border: 1px solid var(--c-borde);
  border-radius: var(--c-radio-sm);
  color: var(--c-texto);
  font-weight: 600;
  transition:
    background-color var(--c-trans),
    border-color var(--c-trans),
    color var(--c-trans);
}

.paginacion a.page-numbers:hover {
  border-color: var(--c-naranja);
  color: var(--c-naranja);
}

.paginacion .page-numbers.current {
  background-color: var(--c-naranja);
  border-color: var(--c-naranja);
  color: var(--c-sobre-oscuro);
}

.paginacion .page-numbers.dots {
  background-color: transparent;
  border-color: transparent;
  color: var(--c-apagado);
}