@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700;800;900&family=Baloo+2:wght@600;700;800&family=Creepster&display=swap');

/* Misma fuente manuscrita que usa el servidor (includes/polaroid.php) para escribir la frase en
   el hueco blanco de la Polaroid — autoalojada, así la vista previa en el navegador coincide
   exactamente con el archivo final que se genera con GD. */
@font-face {
  font-family: 'Caveat';
  src: url('/assets/fonts/Caveat-Variable.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --primary: #77556f;
  --primary-dark: #61465c;
  --accent: #bb8095;
  --gold: #e0a458;
  --ink: #493d49;
  --bg: #fffaf7;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
}
h1, h2, h3, .font-display { font-family: 'Outfit', sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.container { max-width: 1150px; margin: 0 auto; padding: 0 1.25rem; position: relative; z-index: 2; }

/* --- Formas decorativas flotantes ("blobs"), sutiles, tono de marca --- */
.blob { position: absolute; border-radius: 999px; filter: blur(42px); opacity: .45; z-index: 0; pointer-events: none; }
.blob-accent { background: var(--accent); }
.blob-gold { background: var(--gold); }
.blob-primary { background: var(--primary); }
@keyframes blob-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-18px) scale(1.05); } }
.blob-float { animation: blob-float 8s ease-in-out infinite; }

header.site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,250,247,.9); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(73,61,73,.08); }

.announcement { background: var(--primary); color: #fffaf7; text-align: center; padding: 0.6rem 1rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; }
.brand img { height: 42px; width: auto; }
nav.main-nav { display: flex; gap: 1.5rem; font-weight: 600; font-size: .9rem; }
.btn-cart { position: relative; border: 1.5px solid rgba(119,85,111,.35); border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .85rem; }
.btn-cart .count { background: var(--accent); color: white; border-radius: 999px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; margin-left: .4rem; }

.btn-primary { display: inline-flex; align-items: center; gap: .5rem; background: var(--primary); color: white; border: 0; border-radius: 999px; padding: .85rem 1.6rem; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 8px 20px -6px rgba(119,85,111,.45); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { display: inline-flex; align-items: center; gap: .5rem; background: white; color: var(--primary); border: 1.5px solid var(--primary); border-radius: 999px; padding: .7rem 1.4rem; font-weight: 600; }

.hero { background: color-mix(in srgb, var(--accent) 40%, white); border-radius: 1.75rem; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; margin: 1.5rem 0; transition: transform .35s ease, box-shadow .35s ease; color: var(--ink); }
.hero:hover { transform: translateY(-10px); box-shadow: 0 26px 50px -12px rgba(73,61,73,.28); }
.hero-copy { padding: 3rem 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.hero-copy h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1; font-weight: 600; margin: .75rem 0 1.25rem; }
.hero-art { position: relative; min-height: 300px; }
.hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bubble {
  position: absolute; z-index: 3; background: rgba(255,250,247,.95); border-radius: 999px;
  padding: .55rem 1rem; box-shadow: 0 8px 22px rgba(73,61,73,.2);
  font-weight: 700; font-size: .78rem; color: var(--ink); display: flex; align-items: center; gap: .4rem;
  animation: bubble-float 5s ease-in-out infinite;
}
@keyframes bubble-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-2deg); } }
.eyebrow { display: inline-block; background: rgba(255,255,255,.92); border: 1px solid color-mix(in srgb, var(--primary) 30%, white); box-shadow: 0 2px 8px rgba(0,0,0,.08); color: var(--primary-dark); border-radius: 999px; padding: .4rem 1rem; font-size: .8rem; font-weight: 700; width: fit-content; }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; } }

.section-kicker { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, white); padding: .3rem .85rem; border-radius: 999px; margin-bottom: .5rem; }
section { margin: 3rem 0; }

.grid-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .grid-products { grid-template-columns: repeat(2, 1fr); } }
.product-card { background: white; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 2px 10px rgba(73,61,73,.06); transition: transform .25s, box-shadow .25s; display: block; position: relative; }
.product-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; z-index: 2; }
.product-card:hover::before { transform: scaleX(1); }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(73,61,73,.14); }
.product-visual { position: relative; aspect-ratio: 1; background: #f1e8ed; overflow: hidden; border: 3px solid var(--pcard-color, var(--accent)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); transition: border-color .25s; }
.product-visual img { width: 100%; height: 100%; object-fit: cover; }
.badge-price { position: absolute; top: .6rem; left: .6rem; background: var(--ink); color: white; font-weight: 700; font-size: .78rem; padding: .3rem .7rem; border-radius: 999px; }
.product-card .info { padding: .8rem 1rem 1.1rem; }
.product-card h3 { font-size: 1rem; margin: 0; font-weight: 600; }

.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.5rem 0; }
.filters a { border: 1px solid #ded0d8; border-radius: 999px; padding: .55rem 1.1rem; font-size: .85rem; font-weight: 600; }
.filters a.active { background: var(--ink); border-color: var(--ink); color: white; }

.card { background: white; border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 2px 10px rgba(73,61,73,.06); }
.card-pop { position: relative; overflow: hidden; }
.card-pop::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--primary), var(--accent), var(--gold)); }
.icon-circle { width: 3.5rem; height: 3.5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 1rem; background: color-mix(in srgb, var(--accent) 20%, white); }

table.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.admin-table th, table.admin-table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid #eee; }
table.admin-table th { font-weight: 700; color: var(--primary); }

input, select, textarea { font: inherit; padding: .65rem .8rem; border: 1px solid #d8cdd3; border-radius: .6rem; width: 100%; background: white; }
label { display: block; font-size: .85rem; font-weight: 600; margin: .9rem 0 .3rem; }
form .btn-primary, form .btn-secondary { margin-top: 1.2rem; }

.error { color: #ac2d16; font-size: .85rem; margin: .5rem 0; }
.notice { background: #f1e5ed; color: #67475f; border-radius: .8rem; padding: .9rem 1.1rem; font-size: .9rem; }

footer.site-footer { border-top: 1px solid rgba(73,61,73,.08); margin-top: 4rem; padding: 2.5rem 0; text-align: center; font-size: .85rem; color: #7b6877; }
/* Mientras el editor de recorte está abierto, el pie de página real se oculta del todo (no solo
   se tapa visualmente) para que no pueda verse ni colarse de ninguna forma detrás de la ventana. */
body.crop-modal-open footer.site-footer { display: none !important; }
footer.site-footer .brand-name { font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--primary); font-size: 1.1rem; margin-bottom: .3rem; }
footer.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: .8rem 0; font-size: .8rem; }
footer.site-footer nav a { text-decoration: underline; }

.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar { width: 220px; background: var(--ink); color: white; padding: 1.5rem 1rem; flex-shrink: 0; }
.admin-sidebar a { display: block; padding: .6rem .8rem; border-radius: .5rem; font-size: .9rem; margin-bottom: .2rem; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255,255,255,.12); }
.admin-main { flex: 1; padding: 2rem; background: #f7f2f4; }

/* --- Menú dinámico (categorías reales + desplegable de subcategorías) --- */
.nav-toggle { display: none; background: none; border: 1px solid rgba(73,61,73,.2); border-radius: .5rem; font-size: 1.1rem; padding: .35rem .65rem; cursor: pointer; }
.main-nav > a, .nav-item > a { position: relative; padding: .3rem 0; }
.main-nav > a::after, .nav-item > a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transition: right .25s ease;
}
.main-nav > a:hover::after, .nav-item > a:hover::after, .main-nav > a.current::after { right: 0; }
/* Flotado suave y continuo de los enlaces del menú, con retardo distinto por elemento. */
.main-nav > a, .nav-item { animation: nav-float 3.2s ease-in-out infinite; }
.main-nav > a:nth-child(2), .nav-item:nth-of-type(1) { animation-delay: .2s; }
.main-nav > a:nth-child(3), .nav-item:nth-of-type(2) { animation-delay: .4s; }
.main-nav > a:nth-child(4), .nav-item:nth-of-type(3) { animation-delay: .6s; }
.main-nav > a:last-child { animation-delay: .8s; }
@keyframes nav-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (max-width: 820px) { .main-nav > a, .nav-item { animation: none; } }
@media (prefers-reduced-motion: reduce) { .main-nav > a, .nav-item { animation: none; } }
.nav-item { position: relative; display: inline-flex; }
.nav-dropdown {
  position: absolute; top: 100%; left: -.5rem; background: white; border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(73,61,73,.16); padding: .5rem; min-width: 190px; z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: .5rem; font-weight: 500; font-size: .85rem; white-space: nowrap; }
.nav-dropdown a:hover { background: color-mix(in srgb, var(--primary) 10%, white); }
.nav-dot { width: .5rem; height: .5rem; border-radius: 999px; flex-shrink: 0; }

#navClose { display: none; }
@media (max-width: 820px) {
  #navClose { display: block; }
  .nav-toggle { display: inline-block; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(30, 20, 28, .45); z-index: 39; display: none; }
  .nav-backdrop.open { display: block; }
  nav.main-nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(82vw, 320px);
    background: #fffaf7; flex-direction: column; align-items: flex-start; gap: 0;
    padding: 1rem 1.25rem 2rem; display: none; box-shadow: -12px 0 32px rgba(73,61,73,.22);
    overflow-y: auto; z-index: 45;
  }
  nav.main-nav.open { display: flex; }
  .main-nav a, .nav-item { width: 100%; }
  .main-nav > a, .nav-item > a { padding: .7rem 0; border-bottom: 1px solid rgba(73,61,73,.08); }
  .nav-dropdown { position: static; box-shadow: none; padding: 0 0 0 1rem; opacity: 1; visibility: visible; transform: none; max-height: 0; overflow: hidden; transition: max-height .25s ease; }
  .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.open .nav-dropdown { max-height: 300px; }
  .header-inner { position: relative; flex-wrap: wrap; }
}

/* --- Aviso de "aburrimiento" si el usuario no interactúa con la página --- */
#boredOverlay {
  position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(73,61,73,.55); backdrop-filter: blur(3px); cursor: pointer; text-align: center; padding: 2rem;
}
#boredOverlay.show { display: flex; animation: bored-fade .35s ease both; }
#boredOverlay .bored-msg {
  font-family: 'Baloo 2', cursive; font-weight: 800; color: white;
  font-size: clamp(2.8rem, 9vw, 6rem); line-height: 1; text-shadow: 0 6px 24px rgba(0,0,0,.35);
  transform: rotate(-3deg); animation: bored-wiggle 1.8s ease-in-out infinite;
}
#boredOverlay .bored-sub { color: white; font-size: 1rem; margin-top: 1rem; font-weight: 600; opacity: .9; }
@keyframes bored-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bored-wiggle { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.05); } }

/* --- Franja de texto en movimiento continuo, debajo del banner --- */
.ticker { overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(73,61,73,.08); border-bottom: 1px solid rgba(73,61,73,.08); padding: .9rem 0; margin: 1.5rem 0; }
.ticker-track { display: inline-flex; gap: 2.5rem; animation: ticker-scroll 16s linear infinite; }
.ticker-track span { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .04em; color: var(--primary); display: inline-flex; align-items: center; gap: .7rem; }
.ticker-track .ticker-dot { color: var(--gold); font-size: 1.1rem; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* --- Asistente de IA (widget flotante de chat) --- */
#assistantButton {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 150; width: 3.6rem; height: 3.6rem;
  border-radius: 999px; border: 0; cursor: pointer; font-size: 1.5rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white; box-shadow: 0 10px 26px rgba(73,61,73,.35);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease;
}
#assistantButton:hover { transform: scale(1.08) rotate(-4deg); }
#assistantPanel {
  position: fixed; bottom: 5.6rem; right: 1.5rem; z-index: 150; width: min(340px, calc(100vw - 2.5rem));
  height: min(460px, calc(100vh - 8rem)); background: white; border-radius: 1.25rem;
  box-shadow: 0 20px 50px rgba(73,61,73,.28); display: none; flex-direction: column; overflow: hidden;
}
#assistantPanel.open { display: flex; animation: bored-fade .25s ease both; }
#assistantPanel header {
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; padding: .9rem 1.1rem;
  font-family: 'Outfit', sans-serif; font-weight: 700; display: flex; justify-content: space-between; align-items: center;
}
#assistantPanel header button { background: none; border: 0; color: white; font-size: 1.2rem; cursor: pointer; }
#assistantMessages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; background: #fbf5f7; }
.assistant-msg { max-width: 85%; padding: .6rem .85rem; border-radius: 1rem; font-size: .85rem; line-height: 1.4; }
.assistant-msg.user { align-self: flex-end; background: var(--primary); color: white; border-bottom-right-radius: .3rem; }
.assistant-msg.bot { align-self: flex-start; background: white; border: 1px solid #ecdfe6; border-bottom-left-radius: .3rem; }
.assistant-msg.error { align-self: center; color: #ac2d16; font-size: .78rem; }
#assistantForm { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid #eee; }
#assistantForm input { flex: 1; padding: .6rem .8rem; }
#assistantForm button { background: var(--primary); color: white; border: 0; border-radius: .6rem; padding: 0 1rem; font-weight: 700; cursor: pointer; }

/* --- Temas estacionales: cambian TODA la paleta de color de la web (botones, menú, insignias,
   bordes, hero...) porque todo el diseño está construido sobre estas variables --primary/
   --primary-dark/--accent/--gold/--ink/--bg. Cada tema redefine sus propios tonos, no solo un
   tinte de fondo. --- */
.theme-navidad {
  --primary: #9c2b3a; --primary-dark: #7a1f2b; --accent: #3f6b4f; --gold: #d1a441; --ink: #33201f; --bg: #fdf5ee;
  background: linear-gradient(180deg, #fbe4e2 0%, var(--bg) 420px);
}
.theme-vacaciones {
  --primary: #1a7f8f; --primary-dark: #135d69; --accent: #f2994a; --gold: #ffcf56; --ink: #1c3a3d; --bg: #fdfbf0;
  background: linear-gradient(180deg, #d6f0ee 0%, var(--bg) 420px);
}
.theme-halloween {
  --primary: #e8792e; --primary-dark: #b85b1e; --accent: #7a5aa8; --gold: #e8b23d; --ink: #241726; --bg: #050203;
  background: radial-gradient(circle at 50% 30%, #0c0509 0%, var(--bg) 70%);
}
/* Texto que cae directamente sobre el fondo negro (títulos de sección, etc.) necesita ser claro
   para leerse; lo que está DENTRO de una tarjeta/ventana clara vuelve a su tinta oscura normal. */
body.theme-halloween { color: #f0e6da; }
body.theme-halloween .card,
body.theme-halloween .product-card,
body.theme-halloween .hero,
body.theme-halloween .trust-item,
body.theme-halloween .site-header,
body.theme-halloween .site-footer,
body.theme-halloween .nav-dropdown,
body.theme-halloween #assistantMessages,
body.theme-halloween .assistant-msg.bot,
body.theme-halloween input,
body.theme-halloween select,
body.theme-halloween textarea { color: #241726; }

/* "Ventanas" de madera vieja y rota: marco de tablones + cruceta + grietas de cristal,
   superpuestas sobre las tarjetas/paneles claros que flotan en el fondo negro. */
body.theme-halloween .card,
body.theme-halloween .product-card,
body.theme-halloween .hero,
body.theme-halloween .trust-item {
  border: 5px solid #4a2f1c;
  box-shadow: inset 0 0 0 3px #6b4423, inset 0 0 0 6px #3a2415, 0 4px 14px rgba(0,0,0,.5);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cline%20x1='50'%20y1='3'%20x2='50'%20y2='97'%20stroke='%235a3a22'%20stroke-width='2.2'/%3E%3Cline%20x1='3'%20y1='50'%20x2='97'%20y2='50'%20stroke='%235a3a22'%20stroke-width='2.2'/%3E%3Cpath%20d='M9,7%20L27,24%20L19,38%20L36,49'%20stroke='%23888'%20stroke-width='.7'%20fill='none'%20opacity='.55'/%3E%3Cpath%20d='M93,9%20L79,22%20L86,35%20L74,44'%20stroke='%23888'%20stroke-width='.7'%20fill='none'%20opacity='.45'/%3E%3Cpath%20d='M14,93%20L30,78%20L24,66'%20stroke='%23888'%20stroke-width='.6'%20fill='none'%20opacity='.4'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  border-radius: 6px;
}
.theme-semana-santa {
  --primary: #7c5cad; --primary-dark: #5f4386; --accent: #d98fae; --gold: #8fb996; --ink: #362a45; --bg: #fdf6fb;
  background: linear-gradient(180deg, #eee0f5 0%, var(--bg) 420px);
}
.theme-hispanidad {
  --primary: #aa151b; --primary-dark: #7d0f14; --accent: #f1bf00; --gold: #e0a458; --ink: #3a2a1a; --bg: #fff8e8;
  background: linear-gradient(180deg, #fbe3c7 0%, var(--bg) 420px);
}
.theme-dia-padre {
  --primary: #2b5f8a; --primary-dark: #1e4563; --accent: #c17a4a; --gold: #d9b568; --ink: #26313d; --bg: #f5f7fa;
  background: linear-gradient(180deg, #dbe6ef 0%, var(--bg) 420px);
}
.theme-dia-madre {
  --primary: #c15b7c; --primary-dark: #9c4363; --accent: #f3a6c1; --gold: #e7c9dd; --ink: #4a2938; --bg: #fdf3f7;
  background: linear-gradient(180deg, #fbe1ec 0%, var(--bg) 420px);
}
.theme-dia-trabajo {
  --primary: #c0392b; --primary-dark: #96291e; --accent: #e8ad3a; --gold: #f2c14e; --ink: #2c2013; --bg: #fdf6ea;
  background: linear-gradient(180deg, #fbe6c2 0%, var(--bg) 420px);
}
.theme-region-murcia {
  --primary: #8c1d2b; --primary-dark: #661320; --accent: #d4af37; --gold: #e8c766; --ink: #2e1a1e; --bg: #fdf3ec;
  background: linear-gradient(180deg, #f2d9bd 0%, var(--bg) 420px);
}

.theme-snow {
  position: fixed; top: -5%; z-index: 5; color: #eaf4fb; opacity: .85; pointer-events: none;
  animation-name: snow-fall; animation-timing-function: linear; animation-iteration-count: infinite;
  text-shadow: 0 0 4px rgba(73,61,73,.15);
}
@keyframes snow-fall {
  from { transform: translateY(-10vh) translateX(0); }
  to { transform: translateY(110vh) translateX(20px); }
}

.theme-corner-icon {
  position: fixed; z-index: 5; font-size: 2.2rem; opacity: .5; pointer-events: none;
  animation: bubble-float 6s ease-in-out infinite;
}

/* --- Halloween: rayos grandes que cruzan la pantalla de arriba abajo, con destello sincronizado,
   lluvia de fondo, y el rótulo "HALLOWEEN" tenue detrás de todo. Todo por detrás de las
   tarjetas (z-index bajo) para no tapar nunca las ventanas. --- */
.theme-bolt-big {
  position: fixed; top: 0; width: 90px; height: 100vh; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, #fff9e0, #ffe066 45%, #fff9e0);
  clip-path: polygon(48% 0%, 58% 0%, 40% 22%, 54% 22%, 28% 48%, 46% 48%, 18% 76%, 40% 76%, 12% 100%,
                      36% 62%, 22% 62%, 40% 34%, 26% 34%, 46% 9%, 34% 9%);
  filter: drop-shadow(0 0 22px rgba(255, 225, 120, .9));
  opacity: 0; animation-name: bigbolt-strike; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes bigbolt-strike {
  0%, 100% { opacity: 0; }
  38% { opacity: 0; }
  38.2% { opacity: 1; }
  38.5% { opacity: .15; }
  38.8% { opacity: .9; }
  39.3% { opacity: 0; }
}
.theme-flash {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; background: white; opacity: 0;
  animation-name: bigbolt-strike; animation-timing-function: linear; animation-iteration-count: infinite;
}

/* Lluvia: dos capas de rayas diagonales cayendo en bucle, ligero (un solo elemento por capa, sin
   cientos de gotas individuales). */
.theme-rain {
  position: fixed; inset: -10% -10% -10% -10%; z-index: 1; pointer-events: none;
  background-image: repeating-linear-gradient(102deg, rgba(210, 220, 255, .55) 0px, rgba(210, 220, 255, .55) 1px, transparent 1px, transparent 16px);
  background-size: 140px 100px;
  animation: rain-fall linear infinite;
}
.theme-rain.back { opacity: .35; background-size: 180px 130px; animation-duration: .9s; }
.theme-rain.front { opacity: .55; animation-duration: .5s; }
@keyframes rain-fall {
  from { background-position: 0 0; }
  to { background-position: -60px 220px; }
}

/* Rótulo "HALLOWEEN" tenue de fondo, en tipografía de terror. */
.theme-word {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg);
  font-family: 'Creepster', cursive; font-size: clamp(3.5rem, 17vw, 13rem);
  color: rgba(232, 121, 46, .16); text-shadow: 0 0 50px rgba(122, 90, 168, .35);
  letter-spacing: .04em; white-space: nowrap; z-index: 1; pointer-events: none;
}

/* --- Navidad: renos corriendo de un lado a otro del fondo --- */
.theme-reindeer { position: fixed; z-index: 1; font-size: 2.6rem; pointer-events: none; opacity: .8; }
.theme-reindeer.to-right { animation: reindeer-right linear infinite; }
.theme-reindeer.to-left { display: inline-block; transform: scaleX(-1); animation: reindeer-left linear infinite; }
@keyframes reindeer-right { from { left: -10vw; } to { left: 110vw; } }
@keyframes reindeer-left { from { left: 110vw; } to { left: -10vw; } }
/* Rebote/trote: elemento interno independiente del desplazamiento, para que el reno "salte" al
   correr en vez de deslizarse en línea recta. */
.reindeer-trot { display: inline-block; animation: reindeer-trot .42s ease-in-out infinite; }
@keyframes reindeer-trot {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-9px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-snow, .theme-corner-icon, .theme-bolt-big, .theme-flash, .theme-rain, .theme-reindeer, .theme-waves, .reindeer-trot,
  .theme-sparkle, .theme-petal, .theme-heart-rise, .theme-firework i, .theme-gear { animation: none; display: none; }
}

/* --- Vacaciones: olas de mar moviéndose en el fondo, dos capas con distinta profundidad --- */
.theme-waves {
  position: fixed; left: 0; right: -200px; bottom: 0; height: 70px; z-index: 3; pointer-events: none;
  background-repeat: repeat-x; animation: wave-scroll linear infinite;
}
.theme-waves.front {
  height: 56px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'%3E%3Cpath d='M0 30 Q25 10 50 30 T100 30 T150 30 T200 30 V60 H0 Z' fill='%231a7f8f' fill-opacity='0.35'/%3E%3C/svg%3E");
  background-size: 200px 56px;
  animation-duration: 7s;
}
.theme-waves.back {
  height: 84px; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'%3E%3Cpath d='M0 32 Q25 14 50 32 T100 32 T150 32 T200 32 V60 H0 Z' fill='%23f2994a' fill-opacity='0.22'/%3E%3C/svg%3E");
  background-size: 200px 84px;
  animation-duration: 13s;
}
@keyframes wave-scroll {
  from { background-position-x: 0; }
  to { background-position-x: -200px; }
}

/* --- Destello/brillo genérico (✨), reutilizado en varios temas --- */
.theme-sparkle { position: fixed; z-index: 1; pointer-events: none; font-size: 1.1rem; animation-name: sparkle-twinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}

/* --- Pétalos cayendo (Semana Santa) --- */
.theme-petal { position: fixed; top: -6%; z-index: 1; pointer-events: none; animation-name: petal-fall; animation-timing-function: ease-in; animation-iteration-count: infinite; }
@keyframes petal-fall {
  from { transform: translateY(-10vh) translateX(0) rotate(0deg); }
  to { transform: translateY(112vh) translateX(50px) rotate(220deg); }
}

/* --- Corazones/flores subiendo (Día de la Madre) --- */
.theme-heart-rise { position: fixed; bottom: -6%; z-index: 1; pointer-events: none; animation-name: heart-rise; animation-timing-function: ease-out; animation-iteration-count: infinite; }
@keyframes heart-rise {
  0% { transform: translateY(0) scale(.7); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-112vh) translateX(24px) scale(1.15); opacity: 0; }
}

/* --- Fuegos artificiales (Hispanidad, Región de Murcia): ráfaga de puntos que estallan desde un
   punto central y se apagan, en bucle. --- */
.theme-firework { position: fixed; z-index: 1; pointer-events: none; width: 4px; height: 4px; }
.theme-firework i { position: absolute; width: 5px; height: 5px; border-radius: 50%; opacity: 0; animation-name: firework-burst; animation-timing-function: ease-out; animation-duration: 3.2s; animation-iteration-count: infinite; }
@keyframes firework-burst {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  4% { opacity: 1; }
  55% { opacity: .5; }
  70%, 100% { transform: translate(var(--fx), var(--fy)) scale(.3); opacity: 0; }
}

/* --- Engranajes girando (Día del Trabajo) --- */
.theme-gear { position: fixed; z-index: 1; pointer-events: none; font-size: 3rem; opacity: .32; animation-name: gear-spin; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes gear-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* --- Pequeños toques de color extra --- */
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
::selection { background: var(--accent); color: white; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--accent), var(--gold)); border-radius: 999px; }
h2::before { content: "●"; color: var(--gold); font-size: .55em; margin-right: .5rem; vertical-align: middle; }

/* --- Compatibilidad con móvil y tablet --- */

/* Tarjetas con tabla: scroll horizontal en vez de romper el diseño en pantallas estrechas. */
.card { overflow-x: auto; }
.admin-table { min-width: 480px; }

/* Ficha de producto: imagen arriba, datos debajo en pantallas estrechas. */
.product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 760px) {
  .product-detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Checkout: resumen del pedido pasa debajo del formulario en pantallas estrechas. */
.checkout-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 760px) {
  .checkout-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Carrito: cada línea se reorganiza en dos filas en pantallas estrechas en vez de apretarse. */
.cart-line { display: flex; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid #eee; flex-wrap: wrap; }
@media (max-width: 560px) {
  .cart-line { position: relative; padding-right: 5.5rem; }
  .cart-line > form:last-child { position: absolute; top: .9rem; right: 0; }
}

/* Categorías/hero de la portada: menos columnas en pantallas medianas y pequeñas. */
.grid-categories { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) {
  .grid-categories { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grid-products { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .hero-copy { padding: 2rem 1.5rem; }
  .hero-picks { left: .75rem; right: .75rem; bottom: .75rem; }
  .hero-bubble { font-size: .68rem; padding: .45rem .75rem; }
  .hero-sticker { height: 4.5rem; width: 4.5rem; font-size: .68rem; top: .75rem; right: .75rem; }
  section { margin: 2rem 0; }
}

/* Panel de administración: la barra lateral pasa a franja horizontal con scroll arriba del todo
   en vez de robarle ancho al contenido en pantallas de móvil/tablet. */
@media (max-width: 820px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; display: flex; overflow-x: auto; gap: .3rem; padding: .8rem; }
  .admin-sidebar a { white-space: nowrap; margin-bottom: 0; }
  .admin-main { padding: 1.25rem; }
}

/* Formularios de par ancho/alto (tamaños de impresión) en una sola columna en móvil. */
.form-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 480px) {
  .form-pair-grid { grid-template-columns: 1fr; }
}

/* --- Más "visual": zoom suave en la foto al pasar el ratón, entrada con fundido --- */
.product-visual img { transition: transform .5s ease; }
.product-card:hover .product-visual img { transform: scale(1.08); }

@keyframes fade-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.product-card { animation: fade-in-up .5s ease both; }

/* En pantallas pequeñas, menos decoración de fondo (menos densidad = más limpio y más ligero) */
@media (max-width: 560px) {
  .theme-snow:nth-child(n+9) { display: none; }
  .theme-petal:nth-of-type(n+7) { display: none; }
  .theme-heart-rise:nth-of-type(n+6) { display: none; }
  .theme-reindeer.to-left { display: none; }
  .theme-firework:nth-of-type(n+2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card { animation: none; }
  .product-visual img { transition: none; }
}

/* --- Iconos ilustrados de categoría (portada) --- */
.category-icon-badge {
  width: 4.2rem; height: 4.2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto .8rem; transition: transform .3s ease;
}
.category-icon-badge svg { width: 2.2rem; height: 2.2rem; }
.category-card-visual:hover .category-icon-badge { transform: scale(1.1) rotate(-4deg); }

/* Quita el triángulo nativo del <details> del carrito (ya hay uno propio "▾ Ver fotos"). */
.cart-line summary::-webkit-details-marker { display: none; }
.cart-line summary { list-style: none; }

/* Editor de recorte: en pantallas de ordenador aprovecha bastante más ancho que en móvil,
   donde el max-width:420px de por defecto (pensado para caber en una pantalla estrecha) se
   queda corto y deja la foto muy pequeña para ajustarla con comodidad. */
@media (min-width: 700px) {
  #cropCard { max-width: 640px !important; }
  #cropCard .modal-preview-canvas { max-width: 280px !important; }
}
/* Ordenador: ventana en horizontal — foto y zoom a la izquierda, IA, vista previa y botones a la derecha. */
@media (min-width: 900px) {
  #cropCard { max-width: min(1180px, calc(100vw - 3rem)) !important; }
  #cropCard .crop-layout { display: grid; grid-template-columns: auto minmax(280px, 1fr); gap: 1.8rem; align-items: start; }
  #cropCard .crop-col-main #cropStage { margin-top: 0; }
  #cropCard .crop-col-side > :first-child { margin-top: 0; }
  #cropCard .modal-preview-canvas { max-width: 230px !important; }
}

/* Vista previa final de las fotos antes de añadirlas al carrito */
.preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.preview-item { text-align: center; }
.preview-img { min-height: 120px; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #7b6877; background: #faf6f9; border-radius: .6rem; padding: .4rem; }
.preview-img canvas { max-width: 100%; height: auto; border-radius: .3rem; box-shadow: 0 6px 16px rgba(73,61,73,.18); }
.preview-meta { font-size: .78rem; color: #7b6877; margin-top: .4rem; word-break: break-word; }
.preview-actions { display: flex; gap: .6rem; margin-top: 1.2rem; position: sticky; bottom: 0; background: #fff; padding-top: .8rem; }
@media (max-width: 560px) { .preview-grid { grid-template-columns: repeat(2, 1fr); } .preview-actions { flex-wrap: wrap; } }

/* Carrito: galería de fotos de un grupo (ventana nativa <dialog>) */
.cart-group-row { flex-wrap: wrap; }
dialog.cart-gallery { border: 0; border-radius: 1.25rem; padding: 1.4rem; width: min(960px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; box-shadow: 0 20px 60px rgba(30,20,28,.35); background: #fff; color: inherit; }
dialog.cart-gallery::backdrop, dialog.photo-zoom::backdrop { background: rgba(30,20,28,.6); }
.cart-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; top: -1.4rem; background: #fff; padding: .2rem 0 .6rem; z-index: 1; }
.cart-gallery-head h2 { font-size: 1.1rem; margin: 0; }
.cart-gallery-hint { font-size: .82rem; color: #7b6877; margin: 0 0 1rem; }
.cart-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.cart-gallery-item { margin: 0; text-align: center; }
.cart-gallery-item img { width: 100%; height: auto; border-radius: .5rem; box-shadow: 0 6px 16px rgba(73,61,73,.18); cursor: zoom-in; display: block; background: #faf6f9; }
.cart-gallery-item figcaption { font-size: .75rem; color: #7b6877; margin-top: .4rem; word-break: break-word; }
.cart-gallery-remove { margin-top: .4rem; padding: .35rem .9rem; font-size: .8rem; color: #ac2d16; border-color: #ac2d16; }
dialog.photo-zoom { border: 0; background: transparent; padding: 0; max-width: 96vw; max-height: 96vh; overflow: visible; }
dialog.photo-zoom img { max-width: 94vw; max-height: 92vh; border-radius: .6rem; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: zoom-out; display: block; }
@media (max-width: 560px) { .cart-gallery-grid { grid-template-columns: repeat(2, 1fr); } }