/* ═══════════════════════════════════════════════════════════════════════════
   BASE — reinicio, tipografía, retícula y animaciones de entrada
   ═══════════════════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa la cabecera fija al saltar a un ancla */
  scroll-padding-top: calc(var(--alto-cabecera) + var(--e-4));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--t-md);
  line-height: var(--interlinea-texto);
  font-weight: var(--peso-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Bloquea el desplazamiento del fondo con el carrito o el menú abiertos */
body.sin-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--e-4); font-weight: var(--peso-semi); }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-semi);
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--espaciado-letra-titulo);
  color: var(--tinta);
}
h1 { font-size: var(--t-4xl); line-height: var(--interlinea-apretada); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); font-family: var(--fuente-texto); font-weight: var(--peso-semi); }

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

a {
  color: var(--marca);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--curva);
}
a:hover { color: var(--marca-oscuro); }

/* El texto largo lleva subrayado para que el enlace se distinga sin color */
.prosa a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }

strong, b { font-weight: var(--peso-semi); }
small { font-size: var(--t-sm); }

ul, ol { margin: 0 0 var(--e-4); padding-left: 1.35em; }
li { margin-bottom: var(--e-2); }
li:last-child { margin-bottom: 0; }

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

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

blockquote {
  margin: var(--e-6) 0;
  padding: var(--e-4) var(--e-5);
  border-left: 2px solid var(--acento);
  background: var(--fondo-alt);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-style: italic;
  color: var(--tinta-suave);
}
blockquote p:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; }

button { font-family: inherit; font-size: inherit; }

/* ── Foco visible y accesibilidad ────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}
:focus:not(:focus-visible) { outline: none; }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar-contenido {
  position: absolute;
  top: -100px;
  left: var(--e-4);
  z-index: var(--z-aviso);
  background: var(--marca);
  color: #fff;
  padding: var(--e-3) var(--e-5);
  border-radius: 0 0 var(--radio) var(--radio);
  font-size: var(--t-base);
  font-weight: var(--peso-semi);
  transition: top var(--dur) var(--curva);
}
.saltar-contenido:focus { top: 0; color: #fff; }

/* ── Retícula y contenedores ─────────────────────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding-inline: var(--canal);
}
.contenedor--estrecho { max-width: var(--ancho-estrecho); }
.contenedor--medio    { max-width: var(--ancho-medio); }
.contenedor--ancho    { max-width: 90rem; }

.seccion        { padding-block: var(--seccion-y); }
.seccion--densa { padding-block: var(--seccion-y-densa); }
.seccion--amplia{ padding-block: var(--seccion-y-amplia); }
.seccion--alt   { background: var(--fondo-alt); }
.seccion--arena { background: var(--fondo-arena); }
.seccion--oscura{ background: var(--fondo-oscuro); color: #F3EDEF; }
.seccion--oscura h1, .seccion--oscura h2, .seccion--oscura h3 { color: #FFF; }

.rejilla { display: grid; gap: var(--e-5); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }

@media (max-width: 768px) {
  .rejilla--2 { grid-template-columns: 1fr; }
}

/* ── Encabezado de sección ───────────────────────────────────────────────── */
.cabecera-seccion {
  max-width: 40rem;
  margin-bottom: var(--e-7);
}
.cabecera-seccion--centrada { margin-inline: auto; text-align: center; }
.cabecera-seccion h2 { margin-bottom: var(--e-3); }
.cabecera-seccion p {
  color: var(--tinta-suave);
  font-size: var(--t-lg);
  margin: 0;
}

.ojo {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--espaciado-letra-ojo);
  text-transform: uppercase;
  color: var(--marca);
  margin-bottom: var(--e-3);
}
.ojo--dorado { color: var(--acento-700); }
.ojo--claro  { color: var(--acento-300); }

/* Filete dorado decorativo bajo un titular */
.filete::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--acento);
  margin-top: var(--e-4);
}
.filete--centrado::after { margin-inline: auto; }

/* ── Prosa (contenido editorial de páginas, blog y fichas) ───────────────── */
.prosa { font-size: var(--t-lg); line-height: 1.75; color: #3A3134; }
.prosa > * + * { margin-top: var(--e-4); }
.prosa h2 {
  font-size: var(--t-2xl);
  margin-top: var(--e-7);
  margin-bottom: var(--e-3);
}
.prosa h3 {
  font-size: var(--t-xl);
  margin-top: var(--e-6);
  margin-bottom: var(--e-2);
}
.prosa h2:first-child, .prosa h3:first-child { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 1.25em; }
.prosa li { margin-bottom: var(--e-2); }
.prosa img { border-radius: var(--radio-md); margin-block: var(--e-6); }

.prosa table {
  margin-block: var(--e-6);
  font-size: var(--t-base);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.prosa thead { background: var(--fondo-alt); }
.prosa th, .prosa td {
  padding: var(--e-3) var(--e-4);
  text-align: left;
  border-bottom: 1px solid var(--borde);
}
.prosa th { font-weight: var(--peso-semi); font-size: var(--t-sm);
  letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave); }
.prosa tbody tr:last-child td { border-bottom: 0; }

/* Las tablas anchas se desplazan solas en móvil sin romper la página */
.tabla-desplazable { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMACIONES DE ENTRADA
   Sólo se anima transform y opacity: nunca disparan reflow.
   El estado inicial se aplica únicamente si JS está activo (html.js), para
   que sin JavaScript el contenido sea visible desde el primer momento.
   ═══════════════════════════════════════════════════════════════════════════ */

.js .revelar {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--dur-reveal) var(--curva),
    transform var(--dur-reveal) var(--curva);
  will-change: opacity, transform;
}
.js .revelar.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Variantes de dirección */
.js .revelar--izq  { transform: translate3d(-24px, 0, 0); }
.js .revelar--der  { transform: translate3d(24px, 0, 0); }
.js .revelar--zoom { transform: scale(.965); }
.js .revelar--izq.visible,
.js .revelar--der.visible  { transform: translate3d(0, 0, 0); }
.js .revelar--zoom.visible { transform: scale(1); }

/* Escalonado de rejillas: cada tarjeta entra 60 ms después de la anterior.
   El índice lo inyecta el JS como variable --i.                          */
.js .revelar[style*="--i"] { transition-delay: calc(var(--i) * 60ms); }

@media (prefers-reduced-motion: reduce) {
  .js .revelar,
  .js .revelar--izq,
  .js .revelar--der,
  .js .revelar--zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Esqueletos de carga ─────────────────────────────────────────────────── */
.esqueleto {
  background: linear-gradient(100deg, var(--fondo-alt) 30%, #FFF 50%, var(--fondo-alt) 70%);
  background-size: 220% 100%;
  animation: brillo 1.4s ease-in-out infinite;
  border-radius: var(--radio);
  color: transparent;
  user-select: none;
}
@keyframes brillo {
  from { background-position: 180% 0; }
  to   { background-position: -60% 0; }
}
.esqueleto__imagen { aspect-ratio: 4 / 5; width: 100%; }
.esqueleto__linea  { height: .8em; margin-bottom: var(--e-2); }
.esqueleto__linea--corta { width: 55%; }

@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; background: var(--fondo-alt); }
}

/* ── Utilidades ──────────────────────────────────────────────────────────── */
.centrado    { text-align: center; }
.oculto      { display: none !important; }
.sin-margen  { margin: 0 !important; }
.tenue       { color: var(--tinta-suave); }
.pequeno     { font-size: var(--t-base); }
.mayusculas  { text-transform: uppercase; letter-spacing: var(--espaciado-letra-ojo); font-size: var(--t-xs); }
.serif       { font-family: var(--fuente-titulo); }

.pila        { display: flex; flex-direction: column; gap: var(--e-4); }
.fila        { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.fila--entre { justify-content: space-between; }
.fila--fin   { justify-content: flex-end; }
.fila--centro{ justify-content: center; }

@media (max-width: 480px) {
  .ocultar-movil { display: none !important; }
}
@media (min-width: 1024px) {
  .ocultar-escritorio { display: none !important; }
}

/* ── Impresión ───────────────────────────────────────────────────────────── */
@media print {
  .cabecera, .pie, .cta-persistente, .whatsapp-flotante, .carrito-panel, .anuncio { display: none !important; }
  body { background: #fff; }
  .js .revelar { opacity: 1 !important; transform: none !important; }
}