/* ---- Skip link (accesibilidad) ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus-visible {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 12px 24px;
  background: #3D1A08;
  color: #FFFEF5;
  font-weight: 700;
  font-size: 0.875rem;
  z-index: 10000;
  border-radius: 0 0 12px 0;
  outline: 3px solid #F5C518;
  outline-offset: 0;
}

/* ---- Focus visible global ---- */
:focus-visible {
  outline: 3px solid #F5C518;
  outline-offset: 3px;
}
/* Los inputs ya tienen su propio box-shadow de foco */
input:focus-visible,
textarea:focus-visible {
  outline: none;
}

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
              transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }
.reveal.d5 { transition-delay: 0.40s; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* catalog tabs */
.tab-btn {
  border: 2px solid rgba(61,26,8,0.22);
  color: rgba(61,26,8,0.6);
  transition: all 0.22s ease;
}
.tab-btn:hover { border-color:#3D1A08; color:#3D1A08; }
.tab-btn.active { background:#3D1A08; border-color:#3D1A08; color:#FFFEF5; }

/* product card image zoom */
.card-img { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.prod-card:hover .card-img { transform: scale(1.07); }

/* smooth scroll */
html { scroll-behavior: smooth; }

/* form focus */
input:focus, textarea:focus {
  outline: none;
  border-color: #F5C518;
  box-shadow: 0 0 0 3px rgba(245,197,24,0.18);
}

/* ---- Hero: pétalos flotantes ---- */
.hero-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.hero-petal {
  position: absolute;
  bottom: -8%;
  will-change: transform, opacity;
}
@keyframes petalRiseR {
  0%   { transform: translateY(0)       translateX(0)    rotate(0deg);   opacity: 0; }
  7%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-110vh)  translateX(52px) rotate(155deg); opacity: 0; }
}
@keyframes petalRiseL {
  0%   { transform: translateY(0)       translateX(0)    rotate(18deg);  opacity: 0; }
  7%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-110vh)  translateX(-46px) rotate(-135deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-petal { animation: none !important; display: none; }
}

/* ---- Modal de producto ---- */
#modal-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
#modal-overlay.modal-abierto {
  opacity: 1;
  pointer-events: auto;
}
#modal-card {
  transform: scale(0.95) translateY(14px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#modal-overlay.modal-abierto #modal-card {
  transform: scale(1) translateY(0);
}

/* ---- Modal legal (Privacidad / Cookies / Términos) ---- */
#legal-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
#legal-overlay.legal-abierto {
  opacity: 1;
  pointer-events: auto;
}
#legal-card {
  transform: scale(0.95) translateY(14px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#legal-overlay.legal-abierto #legal-card {
  transform: scale(1) translateY(0);
}
#legal-body h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.975rem;
  font-weight: 600;
  color: #3D1A08;
  margin-top: 1.25rem;
  margin-bottom: 0.375rem;
}
html.dark #legal-body h3 { color: #FFF8EE; }
#legal-body p  { margin-bottom: 0.625rem; line-height: 1.7; }
#legal-body ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 0.75rem; }
#legal-body li { margin-bottom: 0.25rem; line-height: 1.65; }

/* ---- Carrito lateral ---- */
#carrito-overlay {
  pointer-events: none;
}
#carrito-overlay.carrito-abierto {
  pointer-events: auto;
}
#carrito-backdrop {
  opacity: 0;
  transition: opacity 0.3s ease;
}
#carrito-overlay.carrito-abierto #carrito-backdrop {
  opacity: 1;
}
#carrito-panel {
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
#carrito-overlay.carrito-abierto #carrito-panel {
  transform: translateX(0);
}

/* ---- FAB de carrito ---- */
@keyframes fabPulse {
  0%, 100% { transform: scale(1); }
  40%       { transform: scale(1.2); }
}
.fab-pulse {
  animation: fabPulse 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .fab-pulse { animation: none; }
}

/* ---- Toast de carrito ---- */
#carrito-toast {
  position: fixed;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  pointer-events: none;
  z-index: 210;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#carrito-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- Sección de Tiendas ---- */
/* Card de info superpuesto al mapa */
#mapa-info {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#mapa-info.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.tienda-card--activa {
  border-color: #F5C518;
  box-shadow: 0 4px 20px rgba(245, 197, 24, 0.25);
}
.tienda-card--activa .tienda-num {
  background: #F5C518;
  color: #3D1A08;
}

/* Fix: Tailwind preflight rompe los tiles de Leaflet */
.leaflet-container img {
  max-width: none !important;
  display: inline !important;
}

/* ---- Mapa en mobile ---- */
@media (max-width: 639px) {
  #mapa { height: 560px !important; }
  #mapa-info { left: 1rem !important; right: 1rem !important; width: auto !important; }
}

/* ---- Tarjetas de valores (Quiénes somos) ---- */
.valor-card {
  border: 1.5px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.valor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(61, 26, 8, 0.09);
  border-color: rgba(245, 197, 24, 0.5);
}

/* Popup de Leaflet */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(61, 26, 8, 0.15) !important;
  padding: 10px 14px !important;
}
.leaflet-popup-content {
  margin: 0 !important;
}
.leaflet-popup-tip-container {
  margin-top: -1px;
}


/* ================================================================
   MODO OSCURO
   ================================================================ */

/* Transición suave al cambiar tema */
.theme-transitioning,
.theme-transitioning * {
  transition:
    background-color 0.25s ease,
    color            0.2s  ease,
    border-color     0.2s  ease !important;
}

/* ---- Tabs del catálogo en oscuro ---- */
html.dark .tab-btn {
  border-color: rgba(239,227,200,0.22);
  color: rgba(239,227,200,0.6);
}
html.dark .tab-btn:hover {
  border-color: #EFE3C8;
  color: #EFE3C8;
}
html.dark .tab-btn.active {
  background-color: #EFE3C8;
  border-color:     #EFE3C8;
  color: #150903;
}

/* ---- Tarjetas de producto ---- */
html.dark .prod-card            { background-color: #1F0E06; }
html.dark .prod-card h3         { color: #EFE3C8; }
html.dark .prod-card > div > p  { color: rgba(239,227,200,0.55); }
html.dark .agregar-btn {
  border-color: rgba(239,227,200,0.15);
  color:        rgba(239,227,200,0.65);
}
html.dark .agregar-btn:hover {
  border-color:     #F5C518;
  background-color: rgba(245,197,24,0.12);
  color: #EFE3C8;
}

/* ---- Precios en oscuro (en tarjetas y modal) ---- */
html.dark .prod-card .text-cafe,
html.dark #modal-precio .text-cafe { color: #EFE3C8; }
html.dark .prod-card .text-cafe\/40,
html.dark #modal-precio .line-through { color: rgba(239,227,200,0.4) !important; }

/* ---- Características del modal (generadas por JS) ---- */
html.dark #modal-caracteristicas li {
  border-color: rgba(239,227,200,0.1);
  color:        #EFE3C8;
}
html.dark #modal-caracteristicas .text-cafe\/45 { color: rgba(239,227,200,0.45); }
html.dark #modal-caracteristicas .text-cafe     { color: #EFE3C8; }

/* ---- Lista de tiendas (generadas por JS) ---- */
html.dark .tienda-card              { background-color: #1F0E06; }
html.dark .tienda-card p            { color: #EFE3C8; }
html.dark .tienda-card p.text-cafe\/45 { color: rgba(239,227,200,0.45); }
html.dark .tienda-num {
  background-color: rgba(239,227,200,0.12);
  color: #EFE3C8;
}
html.dark .tienda-card--activa {
  border-color: #F5C518;
}
html.dark .tienda-card--activa .tienda-num {
  background-color: #F5C518;
  color: #3D1A08;
}

/* ---- Items del carrito (generados por JS) ---- */
html.dark #carrito-lista .bg-white { background-color: #1F0E06; }
html.dark #carrito-lista p.font-bold { color: #EFE3C8; }
html.dark #carrito-lista p.text-cafe\/45 { color: rgba(239,227,200,0.45); }
html.dark .carrito-ctrl {
  border-color: rgba(239,227,200,0.2);
  color:        rgba(239,227,200,0.6);
}
html.dark .carrito-ctrl:hover { border-color: rgba(239,227,200,0.5); }

/* ---- Tarjetas del equipo (generadas por JS) ---- */
html.dark .equipo-card          { background-color: #1F0E06; }
html.dark .equipo-card h3       { color: #EFE3C8; }
html.dark .equipo-card p        { color: rgba(239,227,200,0.5); }

/* ---- Tarjetas de valores ---- */
html.dark .valor-card { background-color: #281507 !important; }

/* ---- Card de info sobre el mapa ---- */
html.dark #mapa-info { background-color: #1F0E06; }

/* ---- Mapa en modo oscuro ---- */
html.dark #mapa { filter: brightness(0.65) saturate(0.5); }

/* ---- Inputs y textarea en oscuro ---- */
html.dark input:focus,
html.dark textarea:focus {
  border-color: #F5C518;
  box-shadow: 0 0 0 3px rgba(245,197,24,0.12);
}

/* ---- Loader de cambio de tema ---- */
#theme-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  background: rgba(0, 0, 0, 0.06);
}
#theme-loader.visible { opacity: 1; }

.theme-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(245, 197, 24, 0.22);
  border-top-color: #F5C518;
  animation: themeSpin 0.55s linear infinite;
  filter: drop-shadow(0 0 6px rgba(245, 197, 24, 0.35));
}
@keyframes themeSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-spinner { animation: none; }
}

/* ---- Panel de preferencias ---- */
.prefs-panel {
  animation: prefsFade 0.15s ease;
}
@keyframes prefsFade {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Active states en el panel de prefs */
.lang-btn.prefs-active {
  background-color: rgba(61,26,8,0.08);
  color: #3D1A08;
}
html.dark .lang-btn.prefs-active {
  background-color: rgba(239,227,200,0.12);
  color: #EFE3C8;
}
.theme-btn.prefs-active {
  background-color: rgba(61,26,8,0.10);
  color: #3D1A08;
}
html.dark .theme-btn.prefs-active {
  background-color: rgba(239,227,200,0.14);
  color: #EFE3C8;
}

/* Tuerca girada cuando el panel está abierto */
.prefs-chevron-open { transform: rotate(90deg); }