/* ===========================================================================
   ANIVERSARIO 2025 — landing de diseño propio (page-catalogo-aniversario-2025.php)

   No es una página de catálogo: es la pieza que Aristas hizo para su
   aniversario 22, y se trae tal cual como excepción a la regla de plantillas
   genéricas (decisión de Carlos Sotelo). El copy y el orden salen literales
   de producción; lo único que cambia a propósito es esto:

   NINGUNA foto se muestra por encima de su resolución nativa. En producción
   (Elementor) las columnas y fondos se estiran con background-size:cover o
   width:100% sin tope, así que en monitores anchos las fotos de 800-1000px
   se ven infladas. Acá cada <img> trae un `max-width` igual a su tamaño real
   (inline, puesto por la plantilla) y cada fondo fija `background-size` en
   píxeles exactos en vez de "cover": por debajo de ese tamaño se recorta
   centrado igual que producción, por encima se queda en su tamaño real,
   centrado, con el color de fondo llenando el resto. Ese "resto" solo se ve
   en monitores más anchos que la foto (>1920px en las de sangre, columnas
   de más de ~700-1000px en las demás), que no es el caso típico.

   Breakpoint móvil: 767px, el mismo corte que usan los flags de producción
   (hide_mobile / hide_desktop+hide_tablet) para separar parrilla de
   carrusel.
   ======================================================================== */

.a25 {
  background: var(--white);
  color: var(--ink);
}

/* Todo <img> de la landing: nunca más grande que su ancho nativo (lo fija la
   plantilla en `style="max-width:…px"`), centrado, sin recorte forzado. */
.a25 img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ------------------------------- 1. hero -------------------------------- */
.a25-hero {
  background: var(--ink);
  /* header--blanco flota encima (position:absolute), así que no hace falta
     dejarle aire: la foto arranca justo en el borde superior. */
}

/* --------------------------- 2/3/8/13/17. filas -------------------------- */
.a25-fila {
  display: flex;
  align-items: stretch;
}
.a25-fila__mitad {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
}
/* Mitad de contenido: imagen + titular/párrafo opcionales, centrados. */
.a25-fila__mitad:not(.a25-fila__mitad--fondo) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.2rem, 4vw, 3rem);
  text-align: center;
}
.a25-fila__mitad--fondo {
  background-color: var(--bg-light);
}
@media (max-width: 767px) {
  .a25-fila { flex-direction: column; }
  .a25-fila__mitad { max-width: 100%; flex-basis: auto; }
  .a25-fila__mitad--fondo {
    aspect-ratio: var(--bgw) / var(--bgh);
    min-height: 200px;
  }
}

/* ------------------------------- titulares ------------------------------- */
/* Amadine, 2.4em (≈38.4px a 16px base), centrados — medido en producción. */
.a25-titular {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.05rem + 2.1vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: center;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.a25-titular--suelto {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(2.4rem, 5.5vw, 4.5rem) 20px;
}
.a25-titular-bloque {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2.4rem, 5.5vw, 4.5rem) 20px;
  text-align: center;
}
.a25-titular-bloque .a25-titular { margin-bottom: .7em; }

.a25-parrafo {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 640px;
  margin: 0 auto;
}
.a25-parrafo--suelto {
  padding: 0 20px clamp(2.4rem, 5.5vw, 4.5rem);
}

/* ------------------------------ carruseles -------------------------------
   Scroll horizontal nativo con scroll-snap — el mismo patrón que
   .cat-galeria en catalogos.css. Un slide por vista, a sangre. */
.a25-carrusel {
  position: relative;
  background: var(--ink);
}
.a25-carrusel__pista {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.a25-carrusel__pista::-webkit-scrollbar { display: none; }
.a25-carrusel__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.a25-carrusel__img { margin: 0 auto; }
.a25-carrusel:focus-within .a25-carrusel__pista,
.a25-carrusel__pista:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.a25-carrusel__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.a25-carrusel__flecha:hover { background: rgba(255, 255, 255, .85); }
.a25-carrusel__flecha--prev { left: 12px; }
.a25-carrusel__flecha--next { right: 12px; }
@media (max-width: 600px) {
  .a25-carrusel__flecha { width: 36px; height: 36px; }
}

.a25-carrusel--movil { display: none; }

/* --------------------------- 6/19. parrilla 2×2 --------------------------
   Escritorio y tablet: mosaico sin espacio (flex_gap:0 en el original). En
   móvil se oculta y aparece el carrusel con las mismas cuatro fotos. */
.a25-parrilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.a25-parrilla__item {
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------ 11. fila de tres -------------------------- */
.a25-tres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.a25-tres__item {
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .a25-tres { grid-template-columns: 1fr; }
}

/* ------------------------------- 16. foto a sangre ------------------------ */
.a25-foto {
  background: var(--ink);
}

/* --------------------------------- 20. cta -------------------------------- */
.a25-cta {
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5rem) 20px clamp(3.5rem, 7vw, 6rem);
}
/* .btn--primary trae flex:1;min-width:230px porque en producto.php siempre
   va en pareja con .btn--ghost repartiéndose el ancho. Acá va solo: sin
   anular eso, un flex:1 dentro de un flex parent lo estira a todo el ancho. */
.a25-cta .btn { flex: none; min-width: 0; }

@media (max-width: 767px) {
  .a25-parrilla { display: none; }
  .a25-carrusel--movil { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .a25-carrusel__pista { scroll-behavior: auto; }
}