:root{--p:#71407f;--l:#a87cbc;--r:#d98e9b;--bg:#fbf4f8;--line:#eadbea;--muted:#817184}
*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;color:#56315f;background:#fff}a{text-decoration:none;color:inherit}
header{text-align:center;padding:34px 20px;background:linear-gradient(120deg,#fff5f8,#f3eaf7)}.mark{width:68px;height:68px;border:3px solid var(--p);border-radius:50%;display:grid;place-items:center;margin:auto;font-size:28px}.brand{font:42px Georgia;letter-spacing:8px;color:var(--p);margin-top:10px}.sub{color:var(--r);letter-spacing:5px;font-size:12px;font-weight:bold}.claim{font:italic 18px Georgia;margin-top:12px}
.nav{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:12px;border-bottom:1px solid var(--line);background:#fff}.nav a{border:1px solid var(--line);border-radius:24px;padding:9px 14px;color:var(--p)}.nav a:hover{background:var(--p);color:#fff}
.wrap{max-width:1200px;margin:auto;padding:38px 20px 80px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 10px 30px #71407f10}.card img{width:100%;height:355px;object-fit:cover;display:block}.info{padding:18px}.cat{color:var(--r);font-size:11px;font-weight:bold;letter-spacing:2px;text-transform:uppercase}.name{font:24px Georgia;margin:7px 0}.prices{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.old{text-decoration:line-through;color:#aaa}.offer{font-size:22px;color:var(--p);font-weight:bold}.sale{background:#f8e6eb;color:#b14e65;border-radius:18px;padding:6px 9px;font-size:11px;font-weight:bold}.btn{display:inline-block;margin-top:13px;background:var(--p);color:#fff;padding:10px 15px;border-radius:20px}
.detail{display:grid;grid-template-columns:1.05fr 1fr;gap:44px}.mainbox{position:relative}.main{width:100%;height:590px;object-fit:cover;border-radius:24px}.arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;background:#ffffffdd;color:var(--p);font-size:24px}.prev{left:14px}.next{right:14px}.thumbs{display:flex;gap:10px;margin-top:12px;overflow:auto}.thumb{width:88px;height:88px;object-fit:cover;border-radius:12px;border:3px solid transparent;cursor:pointer}.thumb.active{border-color:var(--p)}
.detail h1{font:46px Georgia;margin:8px 0 18px}.desc{color:var(--muted);line-height:1.6}.label{margin-top:23px;font-weight:bold}.colors,.opts{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}.color{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;padding:8px 12px;border-radius:24px;cursor:pointer}.color.sel{border:2px solid var(--p)}.swatch{width:22px;height:22px;border-radius:50%}.opt{border:1px solid var(--line);background:#fff;color:var(--p);padding:9px 13px;border-radius:20px}.opt.sel{background:var(--p);color:#fff}.qty{display:flex;gap:12px;align-items:center;margin-top:10px}.qty button{width:35px;height:35px;border-radius:50%;border:1px solid var(--line);background:#fff}.wa{display:block;margin-top:25px;text-align:center;background:#25d366;color:#08200f;padding:15px;border-radius:14px;font-weight:bold}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}.detail{grid-template-columns:1fr}.main{height:480px}}@media(max-width:530px){.grid{grid-template-columns:1fr}.main{height:420px}}

/* V7: cabecera horizontal compacta */
header{
  text-align:left;
  padding:0;
  background:linear-gradient(100deg,#fff7fa,#f5edf8);
  border-bottom:1px solid var(--line);
}
header .header-inner{
  max-width:1200px;
  min-height:82px;
  margin:auto;
  padding:10px 20px;
  display:flex;
  align-items:center;
  gap:16px;
}
header .mark{
  width:52px;
  height:52px;
  min-width:52px;
  margin:0;
  font-size:22px;
}
header .brand{
  margin:0;
  font-size:31px;
  letter-spacing:6px;
  line-height:1;
}
header .sub{
  margin-left:4px;
  font-size:10px;
  letter-spacing:3px;
  white-space:nowrap;
}
header .claim{
  margin:0 0 0 auto;
  font-size:17px;
  white-space:nowrap;
  color:var(--p);
}
@media(max-width:760px){
  header .header-inner{min-height:68px;gap:10px;padding:8px 14px}
  header .mark{width:44px;height:44px;min-width:44px}
  header .brand{font-size:25px;letter-spacing:4px}
  header .sub{display:none}
  header .claim{font-size:13px;white-space:normal;text-align:right;max-width:190px}
}
@media(max-width:480px){
  header .claim{display:none}
}

body{background:linear-gradient(rgba(255,255,255,.91),rgba(255,255,255,.94)),url("fondo-orianny.png") center top/cover fixed no-repeat}header{background:rgba(255,248,250,.96)!important}.brand-logo{width:190px;height:58px;object-fit:contain;display:block}.header-contact{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}.contact-item{font-size:12px;color:var(--p);white-space:nowrap}.socials{display:flex;gap:7px}.social{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;border:1px solid #dfc8df;background:white;color:var(--p);font-size:12px;font-weight:700}.social:hover{background:var(--p);color:#fff}.nav{background:rgba(255,255,255,.94)}.wrap{background:rgba(255,255,255,.84);border-radius:26px;margin-top:28px;margin-bottom:28px}.subscribe{max-width:1160px;margin:30px auto 55px;border-radius:28px;padding:34px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(120deg,rgba(113,64,127,.95),rgba(217,142,155,.95));color:white}.subscribe h2{font:34px Georgia;margin:0 0 8px}.subscribe p{margin:0}.subscribe-btn{background:white;color:#71407f;padding:14px 22px;border-radius:25px;font-weight:bold}.site-footer{text-align:center;padding:25px;background:#56315f;color:white;font-size:13px}@media(max-width:850px){.brand-logo{width:155px}.contact-item{display:none}}@media(max-width:620px){.brand-logo{width:130px;height:48px}.social{width:29px;height:29px}.subscribe{margin:22px 14px 40px;display:block;text-align:center}.subscribe-btn{display:inline-block;margin-top:20px}}

/* V10 - Header integrado, fijo y navegación activa */
:root{--header-h:78px;--nav-h:58px}

/* Header forma parte de la cinta: nada sobrepuesto */
header{
  position:sticky;
  top:0;
  z-index:1000;
  height:var(--header-h);
  padding:0 !important;
  background:rgba(255,248,250,.98);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(113,64,127,.06);
}
header .header-inner{
  position:relative;
  height:100%;
  min-height:0 !important;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px !important;
  display:flex;
  align-items:center;
  gap:18px;
  overflow:hidden;
}
header .brand-logo{
  position:static !important;
  display:block;
  width:auto !important;
  height:80% !important;
  max-height:62px;
  object-fit:contain;
  object-position:left center;
  margin:0 !important;
  flex:0 0 auto;
}

/* Categorías fijas justo debajo del header */
.nav{
  position:sticky;
  top:var(--header-h);
  z-index:999;
  min-height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 4px 12px rgba(113,64,127,.05);
}

/* Estado activo: deja claro dónde está el usuario */
.nav a.active,
.nav a[aria-current="page"]{
  background:var(--p) !important;
  color:#fff !important;
  border-color:var(--p) !important;
  font-weight:700;
  box-shadow:0 5px 14px rgba(113,64,127,.18);
}
.nav a.active:hover,
.nav a[aria-current="page"]:hover{
  background:var(--p) !important;
  color:#fff !important;
}

/* Evita que el contenido quede oculto bajo las cintas al navegar */
html{scroll-padding-top:calc(var(--header-h) + var(--nav-h) + 12px)}

@media(max-width:850px){
  :root{--header-h:70px;--nav-h:56px}
  header .brand-logo{height:78% !important;max-height:55px}
}
@media(max-width:620px){
  :root{--header-h:64px;--nav-h:54px}
  header .header-inner{padding:0 12px !important}
  header .brand-logo{height:80% !important;max-height:51px}
}

/* V11 - logo real recortado: sin márgenes blancos internos */
:root{--header-h:96px}
header .brand-logo{
  height:82px !important;
  width:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left center !important;
}
@media(max-width:850px){
  :root{--header-h:86px}
  header .brand-logo{height:72px !important}
}
@media(max-width:620px){
  :root{--header-h:76px}
  header .brand-logo{height:64px !important}
}

.thumb-button{border:3px solid transparent;background:transparent;padding:0;border-radius:12px;cursor:pointer;flex:0 0 88px}
.thumb-button.active{border-color:var(--p)}
.thumb-button .thumb{display:block;width:82px;height:82px;border:0}
.notice{padding:24px;background:#fff3f6;border:1px solid #e6cbd9;border-radius:18px}
header .header-inner{overflow:hidden}
.subscribe-btn{display:inline-block}