/* ============================================================
   base.css — Tipografía, primitivas de layout, utilidades,
   texturas de marca y animaciones de entrada.
   ============================================================ */

/* ---------- Contenedores ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.contenedor--angosto { max-width: 1040px; }
.contenedor--texto  { max-width: 760px; }

.seccion { padding-block: var(--seccion-y); }
.seccion--corta { padding-block: calc(var(--seccion-y) * .58); }
.seccion--noche { background: var(--g-noche); color: var(--c-lino); }
.seccion--arena { background: var(--c-lino-2); }

/* ---------- Tipografía de marca ---------- */
.display    { font-family: var(--f-display); font-weight: 300; }
.display-xl { font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 300; line-height: .94; }
.display-lg { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 300; line-height: 1.0; }
.display-md { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 300; line-height: 1.1; }
.display-sm { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 400; line-height: 1.2; }

/* Cursiva de acento: el gesto "escrito a mano" de la marca */
.cursiva { font-style: italic; font-weight: 300; }
.cursiva--laton {
  font-style: italic;
  background: var(--g-laton);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Antetítulo: versalita espaciada, el sello editorial del sitio */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--c-laton-hondo);
  max-width: 100%;
  /* Cuelgan de aquí nombres de usuario y etiquetas sin espacios. */
  overflow-wrap: anywhere;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow--centro { justify-content: center; }
.eyebrow--centro::after {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .55;
}
.seccion--noche .eyebrow { color: var(--c-laton-claro); }

.plomo {
  font-size: var(--t-md);
  color: var(--c-humo);
  font-weight: 300;
  line-height: 1.66;
  max-width: var(--ancho-texto);
}
.seccion--noche .plomo { color: rgba(247,243,238,.72); }

.texto-suave { color: var(--c-humo); }
.texto-tenue { color: var(--c-humo-claro); }
.texto-laton { color: var(--c-laton-hondo); }
.centro { text-align: center; }
.centro .plomo { margin-inline: auto; }

/* ---------- Encabezado de sección ---------- */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
  flex-wrap: wrap;
}
/* `min(680px, 100%)` y no `680px` a secas: en columna centrada el
   bloque se dimensiona por su contenido, y una palabra larga sin
   espacios —el usuario de Instagram, por ejemplo— lo hacía más ancho
   que la pantalla y arrastraba la página entera de lado. */
.sec-head__txt { max-width: min(680px, 100%); min-width: 0; }
.sec-head__txt .eyebrow { margin-bottom: var(--s-3); }
.sec-head__txt .plomo { margin-top: var(--s-4); }
.sec-head--centro {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sec-head--centro .plomo { margin-inline: auto; }

/* ---------- Reglas y ornamentos ---------- */
.regla {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-borde-fuerte) 18%, var(--c-borde-fuerte) 82%, transparent);
  border: 0;
}
.seccion--noche .regla {
  background: linear-gradient(90deg, transparent, rgba(231,201,154,.28) 18%, rgba(231,201,154,.28) 82%, transparent);
}

/* Rombo ornamental — motivo del monograma */
.rombo {
  width: 7px; height: 7px;
  background: var(--c-laton);
  transform: rotate(45deg);
  flex: none;
}

.ornamento {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  color: var(--c-laton);
}
.ornamento::before, .ornamento::after {
  content: "";
  width: clamp(40px, 12vw, 120px);
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: .5;
}
.ornamento::after { background: linear-gradient(90deg, currentColor, transparent); }

/* ---------- Texturas de marca ---------- */
/* Grano de lino: da calidez y evita el "plano digital" */
.textura-lino { position: relative; }
.textura-lino::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(90deg, rgba(140,110,70,.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(140,110,70,.035) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.seccion--noche.textura-lino::before { mix-blend-mode: overlay; opacity: .35; }

/* Halo cálido: luz difusa detrás de piezas destacadas */
.halo { position: relative; isolation: isolate; }
.halo::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18%;
  background: radial-gradient(closest-side, rgba(201,163,102,.24), transparent 72%);
  pointer-events: none;
}

/* ---------- Grillas ---------- */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }

@media (max-width: 1080px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 620px) {
  /* Los bloques de texto (columnas de prosa, tarjetas con párrafo,
     testimonios) sí se apilan: a 375 px no caben dos y quedan
     ilegibles. */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

  /* Las grillas de PRODUCTO no. Con una sola columna cada ficha medía
     el ancho completo de la pantalla y la fotografía pasaba de 400 px
     de alto: había que desplazarse una pantalla entera por pieza y no
     se podía comparar nada. Dos columnas dejan la foto en torno a
     165 px, que es lo que se espera de un catálogo en el móvil. */
  .grid--piezas,
  .grid--2.grid--mantener, .grid--3.grid--mantener, .grid--4.grid--mantener {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5) var(--s-3);
  }
}

.flex { display: flex; }
.flex-centro { display: flex; align-items: center; }
.entre { justify-content: space-between; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); }
.wrap { flex-wrap: wrap; }

/* ---------- Utilidades ---------- */
.oculto { display: none !important; }
.solo-lector {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.no-scroll { overflow: hidden; }

.saltar-a {
  position: absolute; top: -100px; left: var(--s-4);
  z-index: 999;
  background: var(--c-tinta); color: var(--c-lino);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-full);
  transition: top var(--d-rapido);
}
.saltar-a:focus { top: var(--s-4); }

/* ---------- Animaciones de entrada (scroll reveal) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--d-lento) var(--e-salida),
    transform var(--d-lento) var(--e-salida);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"]   { transform: none; }
[data-reveal="left"]   { transform: translateX(-34px); }
[data-reveal="right"]  { transform: translateX(34px); }
[data-reveal="escala"] { transform: scale(.94); }
[data-reveal].visible  { opacity: 1; transform: none; }

/* En el teléfono la entrada es solo vertical.
   Los bloques que entran de lado quedan 34 px desplazados hasta que
   se revelan, y como ahí ocupan el ancho completo eso bastaba para
   que la página se pudiera arrastrar en horizontal. Una animación
   decorativa no puede romper el desplazamiento de la página. */
@media (max-width: 620px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(26px); }
}

/* Revelado de líneas de titular: cada línea sube tras una máscara */
.reveal-linea { display: block; overflow: hidden; }
.reveal-linea > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--e-salida);
  transition-delay: var(--reveal-delay, 0ms);
}
.visible .reveal-linea > span,
.reveal-linea.visible > span { transform: translateY(0); }

@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(1.2deg); }
}
@keyframes brillo-metal {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulso-suave {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .7;  transform: scale(1.05); }
}
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.flota { animation: flotar 7s var(--e-suave) infinite; }
.aparece { animation: aparecer var(--d-lento) var(--e-salida) both; }

/* ---------- Transición entre vistas ---------- */
#app { min-height: 62vh; }
#app.vista-saliendo { opacity: 0; transform: translateY(10px); }
#app {
  transition: opacity var(--d-medio) var(--e-suave), transform var(--d-medio) var(--e-suave);
}

/* ---------- Estados de carga ---------- */
.esqueleto {
  background: linear-gradient(100deg, var(--c-lino-2) 30%, var(--c-arena) 50%, var(--c-lino-2) 70%);
  background-size: 220% 100%;
  animation: brillo-metal 1.4s linear infinite;
  border-radius: var(--r-md);
}