/* ================= PALETA ATARDECER DAISY ================= */
:root{
  --daisy:       #9aa5d7;
  --daisy-dark:  #6b76b3;
  --daisy-light: #c7cdeb;
  --rosa:        #d99bb4;
  --durazno:     #e8b08c;
  --fondo:       #1d1828;
  --fondo-2:     #262035;
  --surface:     #2b2440;
  --borde:       rgba(154,165,215,.18);
  --texto:       #f3eee7;
  --texto-suave: #b9b3c9;
  --neon: 0 0 6px var(--daisy), 0 0 18px rgba(154,165,215,.7), 0 0 36px rgba(217,155,180,.4);
}

*{ scroll-behavior:smooth; }
html, body{ overflow-x: clip; }
img{ max-width:100%; }

/* 🔧 FOOTER SIEMPRE ABAJO: body flexible en columna */
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(154,165,215,.12), transparent 60%),
    radial-gradient(700px 450px at 5% 100%, rgba(217,155,180,.08), transparent 60%),
    var(--fondo);
  color: var(--texto);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  letter-spacing: .2px;
  padding-top: 84px;
}
main{ flex: 1; }
.footer{ margin-top: auto; }

h1,h2,h3,h4,h5,.brand-text{ font-family:'Playfair Display', serif; }
p{ line-height:1.75; }
section[id]{ scroll-margin-top: 120px; }  /* aterriza justo debajo del header fijo, sin cortar el título */

/* ================= HEADER ================= */
#header{
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 100%;
  background: rgba(22,18,31,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
  padding: .9rem 0;
  transition: width .5s cubic-bezier(.4,0,.2,1), top .5s, border-radius .5s,
              padding .5s, background .5s, box-shadow .5s;
}
#header .nav-link{ color: var(--texto-suave); position:relative; transition:color .3s; font-weight:400; }
#header .brand-text{
  color: var(--texto); font-size:1.7rem; font-weight:600; letter-spacing:2px;
  text-shadow: 0 0 12px rgba(154,165,215,.6);
}
#header .nav-link::after{
  content:""; position:absolute; left:50%; bottom:2px; width:0; height:2px;
  background: linear-gradient(90deg, var(--daisy), var(--rosa));
  transition:all .3s; transform:translateX(-50%);
  box-shadow: 0 0 10px var(--daisy);
}
#header .nav-link:hover, #header .nav-link.active{ color:#fff; }
#header .nav-link:hover::after, #header .nav-link.active::after{ width:70%; }

#header.scrolled{
  top: 10px;
  width: min(860px, 94%);
  border-radius: 60px;
  border-bottom: none;
  background: rgba(22,18,31,.85);
  backdrop-filter: blur(14px);
  outline: 1.5px solid var(--daisy);
  outline-offset: 3px;
  box-shadow: 0 0 22px rgba(154,165,215,.45), inset 0 0 18px rgba(154,165,215,.06);
  padding: .35rem 0;
}
#header.scrolled .brand-text{ font-size:1.35rem; }
#header.scrolled .nav-link{ font-size:.92rem; padding-top:.3rem; padding-bottom:.3rem; }
.logo-img{
  height:76px; width:auto;
  margin:.1rem .9rem .1rem .1rem;
}
#header.scrolled .logo-img{ height:60px; }
.navbar-toggler{ border-color: var(--borde); }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%239aa5d7' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ================= ANIMACIÓN 1: neón letra por letra (SOLO hero) ================= */
.neon-title{ font-weight:700; color:var(--texto); }
.neon-title span{
  display:inline-block;
  animation: neonLetra 4.5s linear infinite;
  animation-delay: calc(var(--i) * .18s);
}
@keyframes neonLetra{
  0%,100%{ color:inherit; text-shadow:none; }
  5%{
    color:#fff;
    text-shadow: 0 0 8px var(--daisy), 0 0 20px var(--daisy),
                 0 0 40px var(--rosa), 0 0 65px var(--rosa);
    transform: translateY(-3px);
  }
  10%{ color:inherit; text-shadow:none; transform:translateY(0); }
}

/* ================= ANIMACIÓN 2: shimmer suave para títulos de sección ================= */
.titulo-seccion{
  text-align:center; font-size:2.4rem; font-weight:600;
  background: linear-gradient(100deg,
    var(--texto) 42%, var(--daisy-light) 50%, var(--rosa) 55%, var(--texto) 63%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brillo 7s linear infinite;
}
@keyframes brillo{
  0%{ background-position: 120% center; }
  100%{ background-position: -120% center; }
}

/* ================= ANIMACIÓN 3: estrellitas del hero ✦ ================= */
.estrellas{
  position:absolute; top:0; left:0; width:3px; height:3px;
  border-radius:50%; pointer-events:none;
  box-shadow:
    10vw 12vh 0 1px rgba(255,255,255,.8),
    22vw 28vh 0 0   rgba(199,205,235,.7),
    35vw  8vh 0 1px rgba(255,255,255,.5),
    48vw 22vh 0 0   rgba(217,155,180,.8),
    63vw 10vh 0 1px rgba(255,255,255,.6),
    76vw 30vh 0 0   rgba(199,205,235,.6),
    88vw 14vh 0 1px rgba(255,255,255,.7),
    16vw 45vh 0 0   rgba(255,255,255,.4),
    70vw 48vh 0 0   rgba(217,155,180,.5);
  animation: parpadeo 3.8s ease-in-out infinite;
}
.estrellas-2{
  box-shadow:
     6vw 25vh 0 0   rgba(255,255,255,.6),
    18vw  9vh 0 1px rgba(217,155,180,.7),
    30vw 38vh 0 0   rgba(255,255,255,.5),
    44vw 14vh 0 0   rgba(199,205,235,.8),
    57vw 33vh 0 1px rgba(255,255,255,.5),
    69vw  6vh 0 0   rgba(255,255,255,.7),
    82vw 40vh 0 0   rgba(199,205,235,.5),
    93vw 24vh 0 1px rgba(217,155,180,.6);
  animation: parpadeo 4.6s ease-in-out infinite;
  animation-delay: 1.8s;
}
@keyframes parpadeo{
  0%,100%{ opacity:.2; }
  50%{ opacity:1; }
}

/* ================= HERO ================= */
.hero{
  min-height: 90vh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 50% 110%, rgba(232,176,140,.16), transparent 65%),
    radial-gradient(600px 350px at 80% 20%, rgba(154,165,215,.14), transparent 60%),
    linear-gradient(170deg, #1d1828 30%, #2a2138 70%, #342544);
}
.hero-content{ position:relative; z-index:2; }
.hero .display-2{ letter-spacing:8px; font-weight:700; }
.hero-sub{
  font-size:1.35rem; letter-spacing:4px; text-transform:uppercase;
  font-weight:400; color:var(--rosa);
}
.hero-desc{ max-width:620px; margin:1rem auto 0; color:var(--texto-suave); }
.hero strong{ color:var(--daisy-light); font-weight:500; }

.divisor{
  width:120px; height:2px; margin:1.4rem auto;
  background:linear-gradient(90deg, transparent, var(--daisy), var(--rosa), transparent);
  box-shadow:0 0 12px rgba(154,165,215,.6);
}

/* ================= NOSOTROS ================= */
.seccion-nosotros{
  background: linear-gradient(180deg, transparent, rgba(154,165,215,.05) 40%, transparent);
}
.img-nosotros{
  border-radius:24px; width:100%;
  border:1px solid var(--borde);
  box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 28px rgba(154,165,215,.18);
}

/* ================= BOTONES ================= */
.btn-daisy{
  background: linear-gradient(135deg, var(--daisy), var(--rosa));
  color:#1d1828; border:none; border-radius:40px;
  padding:.65rem 2rem; font-weight:600; letter-spacing:.5px;
  transition: all .35s;
}
.btn-daisy:hover{
  color:#1d1828; transform:translateY(-3px);
  box-shadow: var(--neon);
  filter: brightness(1.12);
}
.btn-outline-daisy{
  background:transparent; color:var(--daisy-light);
  border:1.5px solid var(--daisy); border-radius:40px;
  padding:.55rem 1.7rem; font-weight:500; transition:all .35s;
}
.btn-outline-daisy:hover{
  background:rgba(154,165,215,.12); color:#fff;
  border-color:var(--daisy-light);
  transform:translateY(-3px); box-shadow:var(--neon);
}

/* ================= SECCIONES / CARDS ================= */
.section{ padding: 5rem 0; }
.card-feature{
  background: var(--fondo-2);
  border:1px solid var(--borde); border-radius:22px;
  padding:2.2rem; text-align:center; height:100%;
  transition:all .4s;
}
.card-feature:hover{
  transform:translateY(-8px);
  border-color: rgba(154,165,215,.5);
  box-shadow: 0 14px 40px rgba(0,0,0,.4), 0 0 24px rgba(154,165,215,.25);
}
.card-feature p{ color:var(--texto-suave); margin:0; }
.feat-icon{ font-size:2.6rem; margin-bottom:.8rem; filter:drop-shadow(0 0 10px rgba(154,165,215,.5)); }

.card-prod{
  background: var(--fondo-2);
  border:1px solid var(--borde); border-radius:20px;
  overflow:hidden; height:100%; transition:all .4s;
}
.card-prod:hover{
  transform:translateY(-7px);
  border-color: rgba(154,165,215,.55);
  box-shadow: 0 16px 45px rgba(0,0,0,.45), 0 0 26px rgba(154,165,215,.3);
}
.card-prod img{ width:100%; height:240px; object-fit:cover; cursor:pointer; transition:transform .5s; }
.card-prod:hover img{ transform:scale(1.07); }
.card-prod h5{ color:var(--texto); }
.precio{ color:var(--daisy-light); font-weight:600; font-size:1.25rem; font-family:'Jost'; }
.precio-viejo{ text-decoration:line-through; opacity:.45; font-size:.95rem; margin-right:8px; color:var(--texto-suave); }
.badge-oferta{
  position:absolute; top:14px; left:14px; z-index:2;
  background:linear-gradient(135deg, var(--rosa), var(--durazno));
  color:#1d1828; border-radius:20px; padding:4px 14px;
  font-size:.78rem; font-weight:600;
  box-shadow:0 0 14px rgba(217,155,180,.7);
}

/* ================= FILTROS ================= */
.buscador-wrap{ max-width:420px; margin:0 auto 1.6rem; }
.chip{
  background:transparent; border:1px solid rgba(154,165,215,.35);
  color:var(--texto-suave); border-radius:30px;
  padding:.4rem 1.2rem; font-size:.92rem; transition:all .3s;
}
.chip:hover{ color:#fff; border-color:var(--daisy); box-shadow:0 0 14px rgba(154,165,215,.35); }
.chip.active{
  background:linear-gradient(135deg, var(--daisy), var(--rosa));
  color:#1d1828; font-weight:600; border-color:transparent;
  box-shadow:0 0 16px rgba(154,165,215,.5);
}

/* ================= FORMULARIOS ================= */
.form-control, .form-select, textarea.form-control{
  background: var(--fondo); border:1px solid var(--borde);
  color: var(--texto); border-radius:14px; padding:.75rem 1.1rem;
  transition: all .3s;
}
.form-control:focus, .form-select:focus{
  background: var(--fondo); color: var(--texto);
  border-color: var(--daisy);
  box-shadow: 0 0 0 .22rem rgba(154,165,215,.18), 0 0 16px rgba(154,165,215,.25);
}
.form-control::placeholder{ color:var(--texto-suave); opacity:.55; }
label, .form-label{ color:var(--texto-suave); }

.form-card{
  background: linear-gradient(var(--fondo-2), var(--fondo-2)) padding-box,
              linear-gradient(140deg, var(--daisy), transparent 40%, var(--rosa)) border-box;
  border: 1.5px solid transparent;
  border-radius:26px; padding:2.6rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  max-width:480px; margin:2rem auto;
}

.tabs-daisy{ border:1px solid var(--borde); border-radius:40px; padding:5px; background:var(--fondo); }
.tabs-daisy .nav-link{
  border-radius:30px; color:var(--texto-suave); font-weight:500;
  padding:.5rem 1.6rem; transition:all .3s; border:none;
}
.tabs-daisy .nav-link:hover{ color:#fff; }
.tabs-daisy .nav-link.active{
  background:linear-gradient(135deg, var(--daisy), var(--rosa));
  color:#1d1828; box-shadow:0 0 14px rgba(154,165,215,.45);
}

/* ================= TABLAS / OVERRIDES ================= */
.table{ --bs-table-bg:transparent; --bs-table-color:var(--texto); border-color:var(--borde); }
.table thead th{ color:var(--daisy-light); font-weight:500; border-color:var(--borde); }
.bg-white{ background:var(--fondo-2) !important; border:1px solid var(--borde); }
.text-muted{ color:var(--texto-suave) !important; }
.modal-content{
  background:var(--fondo-2); color:var(--texto);
  border:1px solid var(--borde); border-radius:22px !important;
  box-shadow:0 0 40px rgba(154,165,215,.2);
}
.btn-close{ filter:invert(1) brightness(1.4); }

/* ================= CARRITO / WHATSAPP ================= */
.btn-cart{ position:relative; }
.badge-cart{
  background:linear-gradient(135deg, var(--daisy), var(--rosa)); color:#1d1828;
  border-radius:50%; padding:2px 8px; font-size:.75rem; font-weight:600;
  box-shadow:0 0 10px rgba(154,165,215,.7);
}
.wsp-float{
  position:fixed; bottom:24px; right:24px; z-index:1050;
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  background:rgba(37,211,102,.28);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1.5px solid rgba(37,211,102,.6);
  box-shadow:0 8px 24px rgba(37,211,102,.35);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .35s,
              border-color .35s, box-shadow .35s;
}
/* ondas de sonar que se expanden y se disuelven */
.wsp-float::before,
.wsp-float::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(37,211,102,.75);
  animation:onda 2.6s cubic-bezier(.15,.55,.35,1) infinite;
  pointer-events:none;
}
.wsp-float::after{ animation-delay:1.3s; }
@keyframes onda{
  0%  { transform:scale(1); opacity:.9; }
  70% { transform:scale(1.75); opacity:0; }
  100%{ transform:scale(1.75); opacity:0; }
}
.wsp-float svg{
  width:32px; height:32px; fill:#25d366;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); transition:fill .35s;
}
.wsp-float:hover{
  transform:scale(1.15) rotate(8deg);
  background:linear-gradient(135deg, rgba(154,165,215,.85), rgba(217,155,180,.85));
  border-color:var(--rosa);
  box-shadow:0 0 36px rgba(217,155,180,.85);
}
.wsp-float:hover::before, .wsp-float:hover::after{ animation:none; opacity:0; }
.wsp-float:hover svg{ fill:#fff; }

/* ================= FOOTER / EXTRAS ================= */
.footer{
  background:#16121f; color:var(--texto-suave);
  padding:3rem 0 0;
  border-top:1px solid var(--borde);
}
.footer-titulo{
  font-size:1rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--daisy-light); margin-bottom:1rem;
}
.footer-redes{ display:flex; align-items:center; flex-wrap:wrap; gap:.8rem; margin-bottom:1rem; }
.red-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:50px;
  background:rgba(154,165,215,.12);
  border:1.5px solid rgba(154,165,215,.35);
  color:var(--texto); font-size:.88rem; text-decoration:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s,
              box-shadow .3s, border-color .3s, color .3s;
}
.red-pill svg{ width:18px; height:18px; fill:var(--daisy-light); transition:fill .3s; }
.red-pill:hover{
  transform:translateY(-4px) scale(1.05);
  background:linear-gradient(135deg, rgba(154,165,215,.9), rgba(217,155,180,.9));
  border-color:transparent; color:#fff;
  box-shadow:0 0 18px rgba(217,155,180,.6);
}
.red-pill:hover svg{ fill:#fff; }
.footer-logo{ height:96px; width:auto; margin-bottom:.6rem; }
.footer-nombre{
  font-family:'Playfair Display'; font-size:1.35rem; letter-spacing:1px;
  color:var(--texto); margin-bottom:.3rem;
}
.footer-lema{ font-size:.9rem; margin-bottom:0; }
.footer-item{ margin-bottom:.35rem; font-size:.92rem; }
.footer-item a{ color:var(--daisy-light); text-decoration:none; }
.footer-item a:hover{ color:var(--rosa); }
.footer-base{
  margin-top:2rem; padding:1rem; text-align:center;
  border-top:1px solid rgba(154,165,215,.15);
  font-size:.85rem;
}
.footer strong{ color:var(--daisy-light); font-family:'Playfair Display'; letter-spacing:1px; }

.fade-up{ animation:fadeUp .7s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(25px)} to{opacity:1; transform:none} }
.carousel-detalle img{ height:430px; object-fit:cover; border-radius:20px; }
.carousel-detalle{ box-shadow:0 18px 50px rgba(0,0,0,.5); border-radius:20px; }

/* ================= ADMIN DASHBOARD ================= */
.stat-card{
  background: linear-gradient(var(--fondo-2), var(--fondo-2)) padding-box,
              linear-gradient(140deg, var(--daisy), transparent 50%, var(--rosa)) border-box;
  border: 1.5px solid transparent;
  border-radius: 20px;
  padding: 1.2rem .8rem;
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  animation: fadeUp .6s ease both;
  animation-delay: var(--d, 0s);
  transition: transform .3s, box-shadow .3s;
}
.stat-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 0 22px rgba(154,165,215,.35);
}
.stat-ico{ font-size:1.6rem; filter: drop-shadow(0 0 8px rgba(154,165,215,.6)); }
.stat-num{
  font-family:'Jost'; font-size:2rem; font-weight:600;
  background: linear-gradient(135deg, var(--daisy-light), var(--rosa));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{ font-size:.8rem; letter-spacing:2px; text-transform:uppercase; color:var(--texto-suave); }

.admin-tabla{
  background: var(--fondo-2);
  border:1px solid var(--borde); border-radius:20px;
  animation: fadeUp .6s ease both; animation-delay:.15s;
}
.admin-tabla tbody tr{ transition: background .25s; }
.admin-tabla tbody tr:hover{ background: rgba(154,165,215,.07); }
.admin-tabla img{ transition: transform .3s; }
.admin-tabla tr:hover img{ transform: scale(1.6); }

.banner-edicion{
  background: rgba(154,165,215,.12);
  border:1px solid var(--daisy); border-radius:14px;
  padding:.6rem 1rem; font-size:.92rem; margin-top:.6rem;
  box-shadow: 0 0 14px rgba(154,165,215,.25);
  animation: fadeUp .4s ease both;
}
.btn-accion{
  width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--borde); background:transparent;
  font-size:.9rem; transition: all .3s; margin-left:6px;
}
.btn-accion:hover{ transform:translateY(-2px); }
.btn-accion.editar:hover{ border-color:var(--daisy); box-shadow:0 0 12px rgba(154,165,215,.5); }
.btn-accion.borrar:hover{ border-color:#e06a7e; box-shadow:0 0 12px rgba(224,106,126,.5); }

/* ===== AURORA ANIMADA DEL HERO (solo CSS, paleta Daisy) ===== */
.hero::before{
  content:"";
  position:absolute; inset:-30%;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(154,165,215,.28), transparent 60%),
    radial-gradient(45% 55% at 80% 25%, rgba(217,155,180,.22), transparent 60%),
    radial-gradient(50% 50% at 50% 90%, rgba(232,176,140,.20), transparent 60%);
  filter: blur(40px);
  animation: auroraFlota 18s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes auroraFlota{
  0%   { transform: translate(-4%, -3%) scale(1);    opacity:.85; }
  50%  { transform: translate(5%, 4%)  scale(1.12);  opacity:1; }
  100% { transform: translate(-3%, 6%) scale(1.05);  opacity:.9; }
}
/* respeta a quien tiene reducción de movimiento activada */
@media (prefers-reduced-motion: reduce){
  .hero::before{ animation:none; }
}