/* =========================================================
   Mansion Clothes · estilos base compartidos
   Única fuente de verdad para nav, mega-menú, botones, footer,
   bolsa y menú móvil. La usan index, catalogo y producto.
   ========================================================= */

/* woff2 subsetado a latin (cubre acentos y ñ del español).
   Cinzel es variable: un solo archivo cubre el rango 500-600.
   Antes eran 5 .ttf = 143.8 KB; ahora 4 .woff2 = 93.5 KB. */
@font-face{ font-family:'Cinzel'; src:url('../fonts/cinzel-latin.woff2') format('woff2'); font-weight:500 600; font-display:swap; }
@font-face{ font-family:'Lato'; src:url('../fonts/lato-300-latin.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face{ font-family:'Lato'; src:url('../fonts/lato-400-latin.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Lato'; src:url('../fonts/lato-700-latin.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  /* --- Color ---
     Paleta Verde Imperial. Proporción de marca: 60 crema / 30 verde / 10 oro.
     El oro es puntuación: marca un momento por pantalla, no todos. */
  --verde:#1B3A2C;
  --verde-deep:#142A20;
  --oro:#B9975B;          /* solo sobre fondo oscuro: 5.53:1 sobre --verde-deep */
  --oro-soft:#CDB083;
  --oro-ink:#78623B;      /* oro legible sobre fondo claro: 5.16:1 sobre --crema */
  --crema:#F6F1E7;
  --paper:#FBF9F3;
  --ink:#1e2a24;          /* 14.13:1 sobre --paper */
  --muted:#616c64;        /* 4.86:1 sobre --crema · 5.20:1 sobre --paper (antes #6c786f fallaba AA) */
  --line:#ccc7ba;         /* hairline visible (antes #e4ded0 daba 1.27:1: invisible) */
  --line-soft:#e4ded0;    /* divisor decorativo, sin carga informativa */

  /* --- Escala tipográfica --- razón >=1.25 entre pasos */
  --fs-display:clamp(2.25rem, 5vw, 3.5rem);      /* 36 -> 56 */
  --fs-h2:clamp(1.75rem, 3.2vw, 2.5rem);         /* 28 -> 40 */
  --fs-h3:clamp(1.25rem, 2vw, 1.625rem);         /* 20 -> 26 */
  --fs-lead:clamp(1rem, 1.1vw, 1.125rem);        /* 16 -> 18 */
  --fs-body:1rem;
  --fs-small:0.875rem;
  --fs-label:0.75rem;

  /* --- Tipografías --- */
  --font-display:'Cinzel',Georgia,serif;
  --font-body:'Lato',system-ui,sans-serif;

  /* --- Escala z --- semántica, sin valores arbitrarios */
  --z-mega:80;
  --z-fab:90;
  --z-nav:100;
  --z-overlay:150;
  --z-drawer:160;
  --z-mmenu:170;
  --z-skip:200;

  --nav-h:82px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:var(--font-body); font-size:var(--fs-body); color:var(--ink); background:var(--paper); line-height:1.6; overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; letter-spacing:.04em; line-height:1.12; text-wrap:balance; }
p{ text-wrap:pretty; }

.wrap{ width:min(1360px,92vw); margin-inline:auto; }
:focus-visible{ outline:2px solid var(--oro); outline-offset:3px; }

/* El nav es fijo: sin esto, al llegar a una sección por ancla su encabezado
   queda por debajo de la barra. Afecta a todo enlace #seccion del sitio. */
section[id],main[id],footer[id]{ scroll-margin-top:calc(var(--nav-h) + 16px); }

/* Texto claro sobre fondo oscuro: pesa menos ópticamente, necesita más aire */
.on-dark{ line-height:1.7; }

.skip{ position:absolute; left:-999px; top:0; background:var(--verde); color:var(--crema); padding:10px 16px; z-index:var(--z-skip); }
.skip:focus{ left:12px; top:12px; }

/* Iconos: sprite SVG inline. Se dimensionan con font-size como la fuente de
   iconos que sustituyen, así el resto de reglas siguen valiendo. */
.ico{ width:1em; height:1em; flex:none; fill:currentColor; vertical-align:-.125em; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Etiqueta de sección. Por defecto en verde: el oro sobre fondo claro
   da 2.44:1 y es ilegible. El oro queda reservado a fondos oscuros. */
.eyebrow{ font-size:var(--fs-label); letter-spacing:.28em; text-transform:uppercase; color:var(--verde); font-weight:700; }
.on-dark .eyebrow,.eyebrow--gold{ color:var(--oro); }

/* ===== BOTONES ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  padding:16px 34px; border:1px solid transparent; cursor:pointer; background:none;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-gold{ background:var(--oro); color:#14251a; }      /* 5.84:1 */
.btn-gold:hover{ background:var(--oro-soft); }
.btn-ghost{ border-color:var(--verde); color:var(--verde); }
.btn-ghost:hover{ background:var(--verde); color:var(--crema); border-color:var(--verde); }
.btn-ghost-light{ border-color:rgba(246,241,231,.6); color:var(--crema); }
.btn-ghost-light:hover{ background:var(--crema); color:var(--verde); border-color:var(--crema); }

/* ===== ANNOUNCE + NAV ===== */
.announce{ background:var(--verde); color:var(--crema); text-align:center; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; padding:9px 16px; }
.nav{ position:fixed; top:0; left:0; right:0; z-index:var(--z-nav); transition:background .4s var(--ease), box-shadow .4s var(--ease); }
.nav .bar{ height:var(--nav-h); display:flex; align-items:center; }
.nav .bar .wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.nav a.navlink{ font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--crema); position:relative; padding:8px 0; transition:color .3s; }
.nav .left,.nav .right{ display:flex; align-items:center; gap:34px; }
.nav .right{ justify-content:flex-end; }
.navitem{ position:static; }
.nav a.navlink::after{ content:""; position:absolute; left:0; bottom:2px; width:0; height:1px; background:var(--oro); transition:width .3s var(--ease); }
.navitem:hover a.navlink::after,.navitem.open a.navlink::after{ width:100%; }
/* width:auto es obligatorio: los atributos width/height del HTML son hints de
   presentación CSS, así que sin esto el width del atributo estira la imagen. */
.nav .brand img{ height:56px; width:auto; transition:opacity .3s; }
.nav .brand .dark{ display:none; }
.nav .bag{ background:none; border:none; color:var(--crema); cursor:pointer; font-size:23px; position:relative; display:flex; }
.nav .bag .count{ position:absolute; top:-6px; right:-9px; background:var(--oro); color:#14251a; font-family:var(--font-body); font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.nav .burger{ display:none; background:none; border:none; color:var(--crema); font-size:25px; cursor:pointer; }
.nav.solid{ background:var(--paper); box-shadow:0 1px 0 var(--line-soft); }
.nav.solid a.navlink,.nav.solid .bag,.nav.solid .burger{ color:var(--verde); }
.nav.solid .brand .light{ display:none; }
.nav.solid .brand .dark{ display:block; }
/* páginas internas: nav sólido desde el inicio */
.nav--inner{ background:var(--paper); box-shadow:0 1px 0 var(--line-soft); }
.nav--inner a.navlink,.nav--inner .bag,.nav--inner .burger{ color:var(--verde); }
.nav--inner .brand .light{ display:none; }
.nav--inner .brand .dark{ display:block; }

/* ===== MEGA MENÚ ===== */
/* visibility NO se interpola: al abrir conmuta en 0s (si no, el panel sigue
   oculto durante la transición y su contenido queda fuera del orden de
   tabulación); al cerrar espera .3s para que se vea el desvanecido. */
.mega{ position:absolute; top:100%; left:0; right:0; z-index:var(--z-mega); background:var(--paper); border-top:1px solid var(--line-soft); box-shadow:0 26px 46px rgba(20,42,32,.14); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
.mega.show{ opacity:1; visibility:visible; transform:none; transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s; }
.mega-inner{ display:grid; grid-template-columns:1.5fr 1fr; gap:56px; padding:40px 0 46px; }
.mega .col-title{ font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; }
.mega-brands{ display:grid; grid-template-columns:1fr 1fr; gap:0 44px; }
/* Lista repetida: Lato, no Cinzel. Cinzel a 17px se lee mal y satura de ornamento. */
.bitem{ font-family:var(--font-body); font-size:15px; letter-spacing:.06em; color:var(--verde); padding:12px 0; cursor:pointer; border-bottom:1px solid var(--line-soft); transition:color .2s, padding-left .25s var(--ease); display:flex; align-items:center; justify-content:space-between; }
.bitem .ico{ opacity:0; transition:opacity .2s; color:var(--oro-ink); }
.bitem:hover,.bitem.active{ color:var(--verde-deep); padding-left:8px; }
.bitem:hover .ico,.bitem.active .ico{ opacity:1; }
.mega-sizes{ border-left:1px solid var(--line-soft); padding-left:56px; }
.mega-sizes .hint{ font-family:var(--font-display); font-size:20px; color:var(--verde); margin-bottom:18px; min-height:26px; }
.msz{ display:flex; gap:10px; flex-wrap:wrap; }
.msz a{ width:56px; height:48px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:13px; letter-spacing:.12em; color:var(--muted); transition:.2s; pointer-events:none; }
.mega-sizes.ready .msz a{ pointer-events:auto; color:var(--ink); }
.msz a:hover{ background:var(--verde); color:var(--crema); border-color:var(--verde); }
.mega-sizes .note{ margin-top:22px; font-size:12px; color:var(--muted); font-weight:400; }

/* ===== FOOTER ===== */
/* El botón flotante de WhatsApp ocupa los 78px inferiores del viewport y al
   final de la página caía justo encima de la línea legal, tapando "Términos".
   El acolchado inferior deja esa franja libre. */
footer{ background:var(--verde-deep); color:rgba(246,241,231,.78); padding:72px 0 clamp(92px,8vw,112px); line-height:1.7; }
footer .top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(246,241,231,.14); }
footer .brand img{ width:200px; height:auto; margin-bottom:20px; }
footer .brand p{ font-weight:300; font-size:var(--fs-small); max-width:34ch; }
footer .social{ display:flex; gap:14px; margin-top:22px; }
footer .social a{ width:40px; height:40px; border:1px solid rgba(246,241,231,.3); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--crema); transition:background .3s, color .3s, border-color .3s; }
footer .social a:hover{ background:var(--oro); color:#14251a; border-color:var(--oro); }
footer .col h4{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-label); letter-spacing:.2em; text-transform:uppercase; color:var(--crema); margin-bottom:18px; }
footer .col a{ display:block; font-size:var(--fs-small); font-weight:300; padding:6px 0; transition:color .3s; }
footer .col a:hover{ color:var(--oro-soft); }
/* .5 daba 4.46:1 — por debajo de AA */
footer .bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:26px; font-size:12px; color:rgba(246,241,231,.62); }
footer .bottom a:hover{ color:var(--oro-soft); }

/* ===== BOLSA ===== */
.overlay{ position:fixed; inset:0; background:rgba(10,18,13,.5); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s linear .4s; z-index:var(--z-overlay); }
.overlay.show{ opacity:1; visibility:visible; transition:opacity .4s var(--ease), visibility 0s; }
.drawer{ position:fixed; top:0; right:0; height:100dvh; width:min(430px,92vw); background:var(--paper); z-index:var(--z-drawer); transform:translateX(100%); transition:transform .45s var(--ease); display:flex; flex-direction:column; }
.drawer.show{ transform:none; }
.drawer .dhead{ display:flex; align-items:center; justify-content:space-between; padding:24px 26px; border-bottom:1px solid var(--line-soft); }
.drawer .dhead h3{ font-size:18px; color:var(--verde); }
.drawer .dhead button{ background:none; border:none; font-size:24px; cursor:pointer; color:var(--verde); display:flex; }
.drawer .items{ flex:1; overflow-y:auto; padding:8px 26px; }
.drawer .empty{ text-align:center; color:var(--muted); padding:80px 20px; font-weight:400; }
.ditem{ display:grid; grid-template-columns:64px 1fr auto; gap:16px; padding:20px 0; border-bottom:1px solid var(--line-soft); align-items:center; }
.ditem img{ width:64px; height:80px; object-fit:cover; background:#efe9db; }
/* nombre repetido en lista: Lato */
.ditem .nm{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-small); letter-spacing:.03em; color:var(--verde); }
.ditem .pr{ font-size:13px; color:var(--muted); margin-top:4px; }
.ditem .rm{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; transition:color .3s; }
.ditem .rm:hover{ color:#9a3b32; }
.drawer .dfoot{ padding:22px 26px 28px; border-top:1px solid var(--line-soft); }
.drawer .drow.total{ display:flex; justify-content:space-between; font-family:var(--font-display); font-size:18px; color:var(--verde); margin:0 0 20px; }
.drawer .note{ font-size:11.5px; color:var(--muted); text-align:center; margin-top:12px; font-weight:400; }
.drawer .btn{ width:100%; }

/* ===== MENÚ MÓVIL ===== */
.mmenu{ position:fixed; inset:0; background:var(--verde); color:var(--crema); z-index:var(--z-mmenu); transform:translateX(-100%); transition:transform .45s var(--ease); display:flex; flex-direction:column; padding:26px; }
.mmenu.show{ transform:none; }
.mmenu .mhead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; }
.mmenu .mhead img{ height:44px; width:auto; }
.mmenu .mhead button{ background:none; border:none; color:var(--crema); font-size:26px; }
.mmenu nav{ display:flex; flex-direction:column; gap:6px; }
.mmenu nav > a{ font-family:var(--font-display); font-size:26px; padding:12px 0; border-bottom:1px solid rgba(246,241,231,.14); }
.mmenu .mbody{ overflow-y:auto; flex:1; margin-right:-8px; padding-right:8px; }
.mmenu .mfoot{ margin-top:auto; padding-top:20px; }

/* Desplegable de casas dentro del menú móvil: da al táctil el mismo
   flujo casa -> talla que el mega-menú da al ratón. */
.macc{
  font-family:var(--font-display); font-size:26px; padding:12px 0; width:100%;
  background:none; border:none; border-bottom:1px solid rgba(246,241,231,.14);
  color:var(--crema); text-align:left; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.macc .ico{ font-size:20px; transition:transform .3s var(--ease); }
.macc[aria-expanded="true"] .ico{ transform:rotate(180deg); }
.macc-panel{ padding:6px 0 14px; }
.macc-panel[hidden]{ display:none; }
.mhouse{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; border-bottom:1px solid rgba(246,241,231,.10);
  color:rgba(246,241,231,.9); font-family:var(--font-body); font-size:16px; letter-spacing:.05em;
  padding:13px 4px; text-align:left; cursor:pointer;
}
.mhouse .ico{ font-size:16px; color:var(--oro-soft); transition:transform .3s var(--ease); }
.mhouse[aria-expanded="true"]{ color:var(--crema); }
.mhouse[aria-expanded="true"] .ico{ transform:rotate(180deg); }
.msizes{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 4px 16px; }
.msizes[hidden]{ display:none; }
.msizes a{
  min-width:52px; min-height:48px; padding:0 12px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(246,241,231,.35); color:var(--crema);
  font-size:14px; letter-spacing:.1em;
}
.msizes a:hover,.msizes a:focus-visible{ background:var(--crema); color:var(--verde); border-color:var(--crema); }

/* ===== WHATSAPP FAB ===== */
.wafab{ position:fixed; right:22px; bottom:22px; z-index:var(--z-fab); width:56px; height:56px; border-radius:50%; background:var(--verde); color:var(--crema); display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow:0 10px 30px rgba(20,42,32,.35); border:1px solid rgba(246,241,231,.25); transition:transform .3s var(--ease); }
.wafab:hover{ transform:scale(1.08); }

/* ===== REVEAL =====
   El contenido es visible por defecto. Solo se oculta cuando hay JS capaz
   de volver a mostrarlo (clase .js puesta por el script inline del <head>).
   Sin esto, un fallo de JS, un bot o un render headless dejan la página en blanco. */
[data-reveal]{ opacity:1; transform:none; }
.js [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].in{ opacity:1; transform:none; }

@media (max-width:860px){
  .nav .left,.nav .right .navitem{ display:none; }
  .nav .burger{ display:flex; }
  .nav .bar .wrap{ grid-template-columns:auto 1fr auto; }
  .nav .brand{ justify-self:start; }
  .nav .brand img{ height:46px; }
  .mega{ display:none; }
  footer .top{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:520px){
  footer .top{ grid-template-columns:1fr; }
  footer .bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .js [data-reveal]{ opacity:1; transform:none; }
}