/* ==========================================================================
   WandT — estilos propios
   Tailwind (vía CDN) cubre casi todo; aquí solo lo que Tailwind no hace:
   formas orgánicas, el símbolo de marca, y algunas transiciones concretas.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

/* font-family en sí la ponen las utilidades font-body / font-display / font-monowt
   de Tailwind (configuradas en includes/header.php); aquí solo un extra que
   Tailwind no cubre. */
.font-display {
  font-optical-sizing: auto;
}

/* Compensa la cabecera fija al saltar a una sección por ancla */
section[id] {
  scroll-margin-top: 88px;
}

/* ---- Foco visible y accesible en todos los elementos interactivos ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #6E2A35;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Marcos orgánicos para las fotografías
   "Formas orgánicas, ligeramente irregulares, únicas" — documento de marca
   ========================================================================== */
.marco-organico {
  overflow: hidden;
  transition: border-radius 0.6s ease;
}

.marco-1 { border-radius: 63% 37% 54% 46% / 41% 47% 53% 59%; }
.marco-2 { border-radius: 41% 59% 65% 35% / 48% 41% 59% 52%; }
.marco-3 { border-radius: 55% 45% 40% 60% / 55% 40% 60% 45%; }
.marco-4 { border-radius: 48% 52% 37% 63% / 61% 45% 55% 39%; }

.marco-organico:hover {
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .marco-organico { transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Sello de referencia y precio, como una marca de contraste en la plata
   ========================================================================== */
.sello {
  transform: rotate(-1.5deg);
}
.sello-alt {
  transform: rotate(1.5deg);
}

/* ==========================================================================
   Símbolo WandT: dos formas orgánicas que se encuentran y se unen
   (se repite como marca, no como decoración suelta)
   ========================================================================== */
.marca-simbolo {
  display: inline-block;
  overflow: visible;
}

/* ==========================================================================
   Modal de pedido
   ========================================================================== */
#modal-pedido {
  transition: opacity 0.25s ease;
}
#modal-pedido[data-estado="cerrado"] {
  opacity: 0;
  pointer-events: none;
}
#modal-pedido[data-estado="abierto"] {
  opacity: 1;
  pointer-events: auto;
}

#modal-panel {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#modal-pedido[data-estado="cerrado"] #modal-panel {
  transform: translateY(12px) scale(0.98);
  opacity: 0;
}
#modal-pedido[data-estado="abierto"] #modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #modal-pedido,
  #modal-panel {
    transition: none;
  }
}

/* ==========================================================================
   Menú móvil
   ========================================================================== */
#menu-movil {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
#menu-movil[data-estado="abierto"] {
  max-height: 320px;
}

/* ==========================================================================
   Botón "copiar email" — pequeño estado de confirmación
   ========================================================================== */
[data-copiado="true"] .texto-copiar::before {
  content: "Copiado ✓";
}
[data-copiado="true"] .texto-copiar {
  font-size: 0;
}
[data-copiado="true"] .texto-copiar::before {
  font-size: 0.875rem;
}