/* ==========================================================
   COMPONENTES COMPARTIDOS · botones, tarjetas, grillas,
   animación de aparición y sistema de fotos
   (el orden de las reglas importa: ver README · Pendientes)
   ========================================================== */

/* Botones */
.btn {
  display: inline-block;
  font: 700 1rem var(--font-body);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .95em 1.6em;
  background: var(--color-accent);
  color: var(--color-cream);
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-btn-hover); }
.btn:active { transform: translate(4px, 4px); box-shadow: var(--shadow-btn-active); }
.btn.btn-secondary { background: transparent; border-color: var(--color-silver); color: var(--color-silver); box-shadow: none; }
.btn.btn-secondary:hover { border-color: var(--color-cream); color: var(--color-cream); box-shadow: none; }
.btn.btn-big { font-size: 1.2rem; padding: 1.1em 2em; }

/* Ícono de WhatsApp de los enlaces [data-wa] (lo agrega js/whatsapp.js; toma el color del texto) */
.wa-icono { display: inline-block; width: 1.2em; height: 1.2em; margin-right: .5em; vertical-align: -.25em; flex: none; }

/* Puntos indicadores del carrusel circular (js/carrusel-circular.js) */
.carrusel-dots { display: flex; justify-content: center; }
.carrusel-dots button {
  width: 32px;
  height: 44px;                   /* objetivo táctil */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carrusel-dots button:before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--color-line); transition: background .3s, transform .3s; }
.carrusel-dots button[aria-current="true"]:before { background: var(--color-accent); transform: scale(1.3); }

/* Tarjetas */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-card);
  transition: transform .3s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-6px); border-color: var(--color-accent); }

/* Grillas */
.grid { display: grid; gap: var(--space-md); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Aparición al hacer scroll (js/scroll-reveal.js añade .is-visible) */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Tarjetas que también son .reveal: .reveal.is-visible{transform:none} anulaba
   la elevación de .card:hover. Esta regla, más específica, la recupera.
   La transición de entrada (.8s) no cambia; la elevación usa .3s como .card. */
.card.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .3s; }
.card.reveal.is-visible:hover {
  transform: translateY(-6px);
  transition: opacity .8s var(--ease), transform .3s var(--ease), border-color .3s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .carrusel-dots button:before { transition: none !important; }   /* el * del reset no alcanza a los pseudo-elementos */
}

/* Fotos y placeholders (figure.foto[data-slot]) */
.foto {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #1c1c1c, #0d0d0d);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.foto svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 45%;
  height: 60%;
  stroke: #555;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.foto figcaption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--color-caption-bg);
  color: var(--color-silver);
  padding: 2px 8px;
}
.foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.3);
}
.foto:has(img[src]) svg, .foto:has(img[src]) figcaption { display: none; }
.foto:has(img[src]):after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  mix-blend-mode: multiply;
  opacity: .35;
}

/* Foto en color (sin blanco y negro ni tinte rojo) */
.foto.foto-color img { filter: none; }
.foto.foto-color:has(img[src]):after { display: none; }

/* Marco inclinado con sombra roja */
.foto-frame { position: relative; padding: 14px; transform: rotate(2deg); }
.foto-frame:before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: translate(14px, 14px);
}
.foto-frame .foto { position: relative; aspect-ratio: 4/5; border: 3px solid var(--color-cream); }