/* ==========================================================
   AURA PERFUMES · hoja de estilos
   Display: Bodoni Moda (didone de etiqueta de perfumeria)
   Texto:   Jost (grotesca geometrica, estilo envase)
   ========================================================== */

:root{
  --porcelana:#FBFAF8;
  --niebla:#EFEAE4;
  --tinta:#191520;
  --tinta-60:rgba(25,21,32,.62);
  --tinta-30:rgba(25,21,32,.28);
  --ciruela:#4A2545;
  --ciruela-claro:#6D3A66;
  --oro:#B08D3F;
  --ok:#2E6B4F;
  --alerta:#9A5B12;
  --error:#8E2C2C;

  --r:2px;
  --shadow:0 1px 2px rgba(25,21,32,.05), 0 12px 32px -18px rgba(25,21,32,.35);
  --max:1220px;
  --paso:clamp(1rem,2.2vw,1.6rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--porcelana); color:var(--tinta);
  font-family:"Jost","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.6; font-weight:350;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}

h1,h2,h3,.display{
  font-family:"Bodoni Moda","Didot",Georgia,serif;
  font-weight:500; line-height:1.08; letter-spacing:-.01em; margin:0 0 .5em;
}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.15rem}

/* Cifra: precios, totales y numeros de cuenta. Sans-serif y sin cursiva
   a proposito -- Bodoni Moda en cursiva confunde digitos como 1/4/7. */
.cifra{
  font-family:"Jost",sans-serif; font-weight:600; font-style:normal;
  font-variant-numeric:tabular-nums; letter-spacing:0;
}

.eyebrow{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--tinta-60); font-weight:500; margin:0 0 1rem;
}
.contenedor{max-width:var(--max); margin:0 auto; padding:0 var(--paso)}
.seccion{padding:clamp(3rem,7vw,6rem) 0}
.hairline{border:0; border-top:1px solid var(--niebla); margin:0}

:focus-visible{outline:2px solid var(--ciruela); outline-offset:3px}

/* ---------- Barra superior + navegacion ---------- */
.anuncio{
  background:var(--tinta); color:var(--porcelana); text-align:center;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; padding:.55rem 1rem;
}
.nav{
  position:sticky; top:0; z-index:40; background:rgba(251,250,248,.92);
  backdrop-filter:saturate(150%) blur(8px); border-bottom:1px solid var(--niebla);
}
.nav__in{
  max-width:var(--max); margin:0 auto; padding:.9rem var(--paso);
  display:flex; align-items:center; gap:1.5rem;
}
.marca{font-family:"Bodoni Moda",serif; font-size:1.5rem; letter-spacing:.34em; padding-left:.34em}
.marca span{display:block; font-family:"Jost",sans-serif; font-size:.55rem;
  letter-spacing:.3em; color:var(--tinta-60); margin-top:-.2rem}
.nav__links{display:flex; gap:1.4rem; margin-left:auto; align-items:center;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase}
.nav__links a{padding:.35rem 0; border-bottom:1px solid transparent}
.nav__links a:hover{border-bottom-color:var(--tinta)}
.carrito-pill{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--tinta);
  color:var(--porcelana); padding:.5rem .9rem; border-radius:99px; letter-spacing:.12em;
}
.carrito-pill b{font-weight:500}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--niebla)}
.hero__in{
  max-width:var(--max); margin:0 auto; padding:clamp(3.5rem,9vw,7rem) var(--paso);
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.hero p.lede{font-size:1.05rem; max-width:46ch; color:var(--tinta-60)}
.hero__nota{
  border-left:1px solid var(--oro); padding-left:1.2rem; display:grid; gap:1.1rem;
}
.hero__nota dt{font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--tinta-60)}
.hero__nota dd{margin:.1rem 0 0; font-family:"Bodoni Moda",serif; font-size:1.5rem}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.6rem; border:1px solid var(--tinta); background:var(--tinta);
  color:var(--porcelana); border-radius:var(--r); cursor:pointer;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover{background:var(--ciruela); border-color:var(--ciruela)}
.btn:active{transform:translateY(1px)}
.btn--linea{background:transparent; color:var(--tinta)}
.btn--linea:hover{background:var(--tinta); color:var(--porcelana)}
.btn--full{width:100%}
.btn--sm{padding:.55rem 1rem; font-size:.7rem}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* ---------- Filtros ---------- */
.filtros{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  padding:1.1rem 0; border-top:1px solid var(--niebla); border-bottom:1px solid var(--niebla);
}
.filtros form{display:flex; flex-wrap:wrap; gap:.6rem; width:100%}
.campo, select.campo{
  padding:.6rem .8rem; border:1px solid var(--niebla); background:#fff;
  border-radius:var(--r); min-width:0;
}
.campo:focus{border-color:var(--ciruela); outline:none}
.buscador{flex:1 1 260px}

/* ---------- Rejilla de productos ---------- */
.rejilla{
  display:grid; gap:1px; background:var(--niebla);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  border:1px solid var(--niebla); margin-top:2rem;
}
.card{
  background:var(--porcelana); padding:1.4rem 1.2rem 1.2rem; display:flex; flex-direction:column;
  transition:background .2s ease;
}
.card:hover{background:#fff}
.card__foto{
  aspect-ratio:3/4; background:var(--niebla); margin:-1.4rem -1.2rem 1rem; overflow:hidden;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.card__foto img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.card:hover .card__foto img{transform:scale(1.045)}
.card__foto--vacia{
  background:linear-gradient(160deg,var(--niebla),var(--porcelana));
}
.card__foto--vacia span{
  font-family:"Bodoni Moda",serif; font-size:1.8rem; letter-spacing:.06em; color:var(--tinta-30);
}
.card__marca{font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--oro)}
.card__nombre{
  font-family:"Bodoni Moda",serif; font-size:1.05rem; line-height:1.25; margin:.5rem 0 .35rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card__meta{font-size:.72rem; letter-spacing:.1em; color:var(--tinta-60); text-transform:uppercase}
.card__precio{
  color:var(--ciruela); font-size:1.55rem; margin:.9rem 0 .9rem;
  display:flex; align-items:baseline; gap:.4rem;
}
.card__precio::before{
  content:"PVP"; font-family:"Jost",sans-serif; font-style:normal; font-weight:500;
  font-size:.6rem; letter-spacing:.18em; color:var(--tinta-60);
}
.card form{margin-top:auto}

/* Vial: indicador tipografico de presentacion (ml) */
.vial{display:flex; align-items:center; gap:.45rem; margin-top:.6rem}
.vial__barra{height:3px; background:var(--niebla); flex:1; position:relative}
.vial__barra i{position:absolute; inset:0 auto 0 0; background:var(--ciruela); display:block}

/* ---------- Indice de marcas (elemento firma) ---------- */
.indice{
  display:flex; flex-wrap:wrap; gap:.15rem .9rem; padding:1.4rem 0;
  font-size:.78rem; letter-spacing:.08em;
}
.indice a{color:var(--tinta-60); border-bottom:1px solid transparent; padding-bottom:2px}
.indice a:hover,.indice a[aria-current="true"]{color:var(--tinta); border-bottom-color:var(--oro)}
.indice__letra{font-family:"Bodoni Moda",serif; color:var(--oro); font-size:1rem; padding-right:.2rem}

/* ---------- Tablas ---------- */
.tabla{width:100%; border-collapse:collapse; font-size:.88rem}
.tabla th{
  text-align:left; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-60); font-weight:500; padding:.7rem .6rem; border-bottom:1px solid var(--tinta-30);
}
.tabla td{padding:.85rem .6rem; border-bottom:1px solid var(--niebla); vertical-align:middle}
.tabla tr:hover td{background:#fff}
.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- Paneles / formularios ---------- */
.panel{background:#fff; border:1px solid var(--niebla); padding:clamp(1.2rem,3vw,2rem); border-radius:var(--r)}
.grid-form{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.grid-form .full{grid-column:1/-1}
label.lbl{display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-60); margin-bottom:.35rem}
input.campo,textarea.campo,select.campo{width:100%}
textarea.campo{min-height:90px; resize:vertical}
.check{display:flex; gap:.7rem; align-items:flex-start; padding:1rem;
  border:1px solid var(--niebla); background:var(--porcelana); border-radius:var(--r)}
.check input{margin-top:.35rem; width:18px; height:18px; accent-color:var(--ciruela)}

/* ---------- Resumen / totales ---------- */
.resumen{position:sticky; top:96px}
.linea{display:flex; justify-content:space-between; padding:.5rem 0; font-size:.92rem}
.linea--total{
  border-top:1px solid var(--tinta-30); margin-top:.6rem; padding-top:.9rem; font-size:1.5rem;
}
.linea--total .cifra{font-size:1.5rem}
.dos-col{display:grid; grid-template-columns:1.6fr .9fr; gap:clamp(1.5rem,4vw,3rem); align-items:start}

/* ---------- Datos bancarios ---------- */
.banco{border:1px solid var(--ciruela); padding:1.4rem; background:#fff}
.banco dl{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.2rem; margin:0}
.banco dt{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-60); align-self:center}
.banco dd{margin:0; font-family:"Bodoni Moda",serif; font-size:1.1rem}
.banco dd.cifra{font-family:"Jost",sans-serif; font-weight:600; font-style:normal; font-size:1rem}
.copiar{cursor:pointer; border:1px dashed var(--tinta-30); background:none; padding:.2rem .5rem; font-size:.7rem}

/* ---------- Estados ---------- */
.badge{
  display:inline-block; padding:.28rem .7rem; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; border:1px solid currentColor; border-radius:99px; white-space:nowrap;
}
.badge--warn{color:var(--alerta)} .badge--info{color:var(--ciruela-claro)}
.badge--ship{color:#1F5C8B} .badge--ok{color:var(--ok)} .badge--bad{color:var(--error)}

.aviso{padding:.9rem 1.1rem; border-left:3px solid; margin-bottom:1rem; font-size:.9rem; background:#fff}
.aviso--ok{border-color:var(--ok)} .aviso--warn{border-color:var(--alerta)}
.aviso--error{border-color:var(--error)} .aviso--info{border-color:var(--ciruela)}

/* ---------- Linea de tiempo del pedido ---------- */
.timeline{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--niebla)}
.timeline li{background:#fff; padding:.8rem 1rem; font-size:.85rem}
.timeline li b{font-weight:500}
.timeline time{color:var(--tinta-60); font-size:.75rem}

/* ---------- Pie ---------- */
.pie{background:var(--tinta); color:var(--niebla); margin-top:4rem}
.pie__in{max-width:var(--max); margin:0 auto; padding:3rem var(--paso) 2rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem}
.pie h4{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro); margin:0 0 .8rem}
.pie a:hover{color:#fff}
.pie small{display:block; text-align:center; padding:1.2rem; border-top:1px solid rgba(255,255,255,.12);
  font-size:.72rem; color:rgba(255,255,255,.5)}

/* ---------- Fotos de producto (admin) ---------- */
.miniatura{
  width:52px; height:68px; background:var(--niebla); overflow:hidden; margin-bottom:.4rem;
}
.miniatura img{width:100%; height:100%; object-fit:cover}
.miniatura--vacia{background:linear-gradient(160deg,var(--niebla),var(--porcelana))}
.foto-controles{display:flex; flex-direction:column; gap:.3rem; width:130px}
.foto-controles input[type="file"]{font-size:.68rem; max-width:130px}
.foto-controles .btn{padding:.35rem .6rem; font-size:.62rem}

/* ---------- Admin ---------- */
.admin-shell{display:grid; grid-template-columns:230px 1fr; min-height:100vh}
.admin-nav{background:var(--tinta); color:var(--niebla); padding:1.6rem 1.2rem}
.admin-nav a{display:block; padding:.6rem .7rem; font-size:.8rem; letter-spacing:.08em; border-radius:var(--r)}
.admin-nav a:hover,.admin-nav a.activo{background:rgba(255,255,255,.09); color:#fff}
.admin-main{padding:clamp(1.2rem,3vw,2.4rem); background:var(--porcelana)}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; background:var(--niebla); border:1px solid var(--niebla)}
.kpi{background:#fff; padding:1.2rem}
.kpi b{display:block; font-family:"Jost",sans-serif; font-weight:600; font-variant-numeric:tabular-nums; font-size:2rem; line-height:1.1}
.kpi span{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-60)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero__in,.dos-col{grid-template-columns:1fr}
  .admin-shell{grid-template-columns:1fr}
  .admin-nav{display:flex; gap:.4rem; overflow-x:auto; padding:.8rem}
  .resumen{position:static}
}
@media (max-width:560px){
  .grid-form{grid-template-columns:1fr}
  .nav__links{gap:.9rem; font-size:.7rem}
  .nav__links .oculta-movil{display:none}
  .tabla thead{display:none}
  .tabla td{display:flex; justify-content:space-between; gap:1rem; border:0; padding:.45rem .2rem}
  .tabla tbody tr{display:block; border-bottom:1px solid var(--niebla); padding:.7rem 0}
  .tabla td::before{content:attr(data-th); font-size:.64rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--tinta-60)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}