/* ============================================================
   MICTLÁN — Sistema visual v2
   Ouija oscuro · verde bosque profundo · oro antiguo · oxblood
   ============================================================ */

:root{
  /* Fondos oscuros */
  --bg:#0B140E;            /* casi negro verdoso */
  --bg-2:#0F1B13;
  --green:#13261B;         /* verde bosque profundo */
  --green-2:#19311F;
  --green-3:#214029;
  --green-line:#2E4A36;
  --panel:#11201734;       /* (no usar directo) */
  --card:#13211A;
  --card-2:#182A20;
  --card-line:#2B4334;

  /* Oro antiguo */
  --gold:#C49A4A;
  --gold-claro:#E7CE8A;
  --gold-bri:#F2DDA0;
  --gold-deep:#8A6A2A;

  /* Crema / texto */
  --cream:#ECE3CD;
  --cream-soft:rgba(236,227,205,.74);
  --cream-faint:rgba(236,227,205,.46);

  /* Vino / oxblood (acentos, precios, botones) */
  --wine:#6E1A2C;
  --wine-2:#86223A;
  --wine-deep:#511021;
  --rose:#A65E6E;

  --radius:3px;
  --radius-lg:8px;
  --shadow-soft:0 18px 50px -20px rgba(0,0,0,.7);
  --shadow-card:0 14px 40px -18px rgba(0,0,0,.65);
  --maxw:1280px;

  --font-logo:"Cinzel Decorative", serif;
  --font-display:"Cinzel", serif;
  --font-gothic:"Angel Wish", "UnifrakturCook", "Pirata One", serif;
  --font-serif:"Cormorant Garamond", Georgia, serif;
  --font-ui:"Jost", "Segoe UI", sans-serif;

  /* ---- alias de compatibilidad (páginas catálogo/producto/carrito) ---- */
  --bone:var(--bg); --bone-2:var(--bg-2); --amate:var(--green-2); --amate-line:var(--card-line);
  --ink:var(--cream); --ink-soft:var(--cream-soft); --ink-faint:var(--cream-faint);
  --obsidian:var(--bg); --obsidian-2:var(--green); --obsidian-3:var(--green-2); --obsidian-line:var(--green-line);
  --vino:var(--wine); --vino-2:var(--wine-2);
  --oro:var(--gold); --oro-claro:var(--gold-claro); --oro-deep:var(--gold-deep);
  --marigold:var(--gold); --marigold-deep:var(--gold-deep);
  --verde:#6FA386; --turquesa:var(--gold); --morado:var(--wine); --morado-2:var(--rose); --fucsia:var(--wine-2);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-ui);
  color:var(--cream);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;color:inherit;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--wine);color:var(--gold-claro);}

/* textura de follaje sutil para fondos verdes */
.foliage{position:relative;}
/* tramado de enredaderas removido a pedido */
.foliage:before{content:none;}

/* Scroll del prototipo — fondo: calavera de plumas (fija) detrás de todo el sitio */
.app-scroll{
  height:100vh;overflow-y:auto;overflow-x:hidden;
  background-color:var(--bg);
  background-image:url("../img/fondopag.jpg");
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
  background-repeat:no-repeat;
}
.app-scroll::-webkit-scrollbar{width:12px;}
.app-scroll::-webkit-scrollbar-track{background:var(--bg-2);}
.app-scroll::-webkit-scrollbar-thumb{background:var(--gold-deep);border:3px solid var(--bg-2);border-radius:8px;}

/* ---------- Tipografía ---------- */
.eyebrow{
  font-family:var(--font-ui);font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;font-size:12px;
}
@font-face{
  font-family:"Angel Wish";
  src:url("../fonts/angel-wish.ttf") format("truetype"),
      url("../fonts/angel-wish.otf") format("opentype");
  font-weight:normal;font-style:normal;font-display:swap;
}
.display{font-family:var(--font-display);font-weight:700;line-height:1.04;letter-spacing:.02em;}
.serif{font-family:var(--font-serif);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* ---------- Encabezado de sección ---------- */
.section-head{display:flex;align-items:center;justify-content:center;gap:20px;margin:0 auto;}
.section-head .line{height:1px;flex:1;max-width:200px;background:linear-gradient(90deg,transparent,var(--gold-deep));}
.section-head .line.r{background:linear-gradient(90deg,var(--gold-deep),transparent);}
.section-head h2{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:clamp(20px,2.4vw,30px);margin:0;white-space:nowrap;color:var(--gold-claro);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--font-ui);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  font-size:12.5px;padding:15px 28px;border:none;border-radius:var(--radius);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.btn:active{transform:translateY(1px);}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-bri),var(--gold));
  color:#1c1205;box-shadow:0 8px 22px -10px rgba(196,154,74,.7);border:1px solid var(--gold-claro);
}
.btn-gold:hover{box-shadow:0 14px 32px -10px rgba(231,206,138,.9);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--gold-claro);border:1px solid var(--gold-deep);}
.btn-outline:hover{background:var(--gold);color:#1c1205;border-color:var(--gold);}
.btn-wine{
  background:linear-gradient(180deg,var(--wine-2),var(--wine));color:var(--gold-claro);
  border:1px solid var(--wine-2);box-shadow:0 8px 22px -12px rgba(158,34,64,.8);
}
.btn-wine:hover{background:var(--wine-2);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(158,34,64,.95);}
.btn-ghost{background:transparent;color:var(--cream-soft);border:1px solid var(--card-line);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-claro);}
.btn-ink{background:linear-gradient(180deg,var(--wine-2),var(--wine));color:var(--gold-claro);border:1px solid var(--wine-2);}
.btn-ink:hover{background:var(--wine-2);transform:translateY(-2px);}
.btn-full{width:100%;}

/* ---------- Greca / ornamentos ---------- */
.greca{height:16px;background-repeat:repeat-x;background-size:auto 100%;background-position:center;}
.flourish{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold-deep);}
.flourish .ln{height:1px;width:60px;background:linear-gradient(90deg,transparent,var(--gold-deep));}
.flourish .ln.r{background:linear-gradient(90deg,var(--gold-deep),transparent);}

/* ---------- Placeholder de foto (oscuro, oro) ---------- */
.foto{
  position:relative;width:100%;height:100%;overflow:hidden;display:flex;
  align-items:center;justify-content:center;background:var(--ph-bg,var(--card-2));
}
.foto:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.06),transparent 60%),linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45));}
.foto .talavera-frame{position:absolute;inset:12px;border:1px solid var(--ph-line,rgba(231,206,138,.32));border-radius:2px;pointer-events:none;z-index:2;}
.foto .talavera-frame:after{content:"";position:absolute;inset:5px;border:1px solid var(--ph-line,rgba(231,206,138,.16));}
.foto .motif{width:52%;height:52%;opacity:.92;z-index:2;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));color:var(--ph-ink,var(--gold-claro));}
.foto .ph-hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;z-index:3;
  font-family:var(--font-ui);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ph-ink,rgba(231,206,138,.55));opacity:.7;}
.foto .corner{position:absolute;width:14px;height:14px;opacity:.6;z-index:2;color:var(--ph-ink,var(--gold-claro));}
.foto .corner.tl{top:9px;left:9px;}.foto .corner.tr{top:9px;right:9px;transform:scaleX(-1);}
.foto .corner.bl{bottom:9px;left:9px;transform:scaleY(-1);}.foto .corner.br{bottom:9px;right:9px;transform:scale(-1,-1);}

/* ---------- Cards ---------- */
.card{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius-lg);
  overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:var(--gold-deep);}

.badge{display:inline-block;font-family:var(--font-ui);font-weight:700;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:2px;color:var(--gold-claro);}

/* inputs */
.field{
  width:100%;font-family:var(--font-ui);font-size:14px;padding:13px 14px;
  border:1px solid var(--card-line);border-radius:var(--radius);
  background:rgba(0,0,0,.28);color:var(--cream);
}
.field::placeholder{color:var(--cream-faint);}
.field:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,154,74,.18);}
input.field, textarea.field{cursor:text;}

/* chips */
.chip{
  font-family:var(--font-ui);font-size:13px;letter-spacing:.04em;padding:9px 16px;
  border:1px solid var(--card-line);border-radius:30px;background:rgba(0,0,0,.2);
  transition:all .2s;color:var(--cream-soft);
}
.chip:hover{border-color:var(--gold);color:var(--gold-claro);}
.chip.active{background:var(--gold);color:#1c1205;border-color:var(--gold);}

/* ---------- HERO OUIJA ---------- */
.ouija{
  position:relative;overflow:hidden;color:var(--cream);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(40,72,48,.55), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(8,16,11,.9), transparent 70%),
    linear-gradient(180deg,#0E1C12,#0A130D 70%);
}

/* ---------- HERO con video de fondo a pantalla completa ---------- */
.hero-video{
  /* más compacto: el lockup queda centrado y se asoman las categorías */
  min-height:70vh;
  padding:0;
}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;
  background:url("../img/fondopag.jpg") center top/cover no-repeat,#0A130D;
  filter:blur(3px) brightness(.6);transform:scale(1.06);
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,16,11,.30) 0%,
    rgba(8,16,11,0) 34%,
    rgba(8,16,11,.55) 76%,
    rgba(8,16,11,.94) 100%);
  box-shadow:inset 0 0 240px 70px rgba(0,0,0,.6);
}
.hero-cta{background:rgba(8,16,11,.66);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
/* lockup del logo sobre el video, con halo oscuro que oculta el wordmark del clip */
.hero-lockup{position:relative;padding:34px 56px;}
.hero-lockup:before{content:"";position:absolute;inset:-60% -24%;z-index:-1;
  background:radial-gradient(ellipse 58% 62% at center,
    rgba(6,12,8,.97) 0%, rgba(6,12,8,.93) 40%, rgba(6,12,8,.60) 64%, transparent 80%);}
.hero-lockup .wordmark{filter:drop-shadow(0 6px 22px rgba(0,0,0,.85));}
@media (max-width:900px){ .hero-video{min-height:62vh;} .hero-lockup{padding:24px 28px;} }
.ouija .vignette{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 240px 60px rgba(0,0,0,.78);}
.wordmark{
  font-family:var(--font-logo);font-weight:900;
  background:linear-gradient(180deg,#F4E2A6 6%,#D9B362 38%,#9C7430 72%,#E7CE8A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}
/* arco del abecedario */
.arc{position:relative;margin:0 auto;}
.arc span{
  position:absolute;left:50%;bottom:0;transform-origin:50% 100%;
  font-family:var(--font-display);font-weight:600;color:var(--gold-claro);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.planchette-eye{animation:gaze 6s ease-in-out infinite;}
@keyframes gaze{0%,100%{transform:translateX(0);}50%{transform:translateX(3px);}}

/* mano decorativa */
.hand-deco{position:absolute;color:var(--gold);opacity:.42;pointer-events:none;filter:drop-shadow(0 8px 22px rgba(0,0,0,.6));}

/* marco ornamental */
.ornframe{position:relative;border:1px solid var(--gold-deep);border-radius:4px;padding:24px 40px;background:rgba(8,16,11,.5);}
.ornframe:before,.ornframe:after{content:"✦";position:absolute;color:var(--gold);font-size:14px;top:-9px;}
.ornframe:before{left:18px;}.ornframe:after{right:18px;}

/* manifiesto */
.manifesto{background:transparent;}

@keyframes riseIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
.rise{opacity:1;}
@media (prefers-reduced-motion: no-preference){.rise{animation:riseIn .7s cubic-bezier(.2,.8,.2,1) both;}}

/* Logo + texto del hero: aparecen juntos a los 9s con un fundido, SIN movimiento.
   Solo ocurre una vez, al abrir la página; después quedan fijos. */
@keyframes heroFadeIn{from{opacity:0;}to{opacity:1;}}
.hero-logo-wrap{transform-origin:center center;}
@media (prefers-reduced-motion: no-preference){
  .hero-lockup{opacity:0;animation:heroFadeIn 1s ease 9s forwards;}
}

/* El brillo (cobre oscuro) aparece justo después, ya fijo el logo (~10.2s) */
@keyframes glowIn{from{opacity:0;}to{opacity:1;}}
.hero-logo-glow{opacity:1;}
@media (prefers-reduced-motion: no-preference){
  .hero-logo-glow{opacity:0;animation:glowIn 1.2s ease 10.2s forwards;}
}

@media (max-width:900px){.wrap{padding:0 20px;}}

/* =========================================================
   RESPONSIVE (web + móvil)
   ========================================================= */
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;margin:0;color:var(--gold-claro);}
.nav-drawer{display:none;}
.nav-drawer .nav-drawer-link{display:block;width:100%;text-align:left;background:none;border:none;color:var(--cream);
  font-family:var(--font-ui);font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 22px;border-bottom:1px solid var(--green-line);cursor:pointer;}
.nav-drawer .nav-drawer-link:hover{color:var(--gold-claro);background:rgba(0,0,0,.18);}
.nav-drawer .nav-drawer-sub{padding-left:38px;font-size:13px;color:var(--cream-soft);
  font-family:var(--font-serif);letter-spacing:.04em;text-transform:none;border-bottom:1px solid rgba(46,74,54,.5);}

/* Catálogo: botón Filtrar + drawer (solo se ven en móvil) */
.catalog-filter-btn{display:none;align-items:center;gap:8px;background:var(--vino);color:var(--cream);
  border:1px solid var(--gold-deep);border-radius:6px;padding:11px 18px;font-family:var(--font-ui);
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;}
.catalog-aside-close,.catalog-aside-done,.catalog-aside-backdrop{display:none;}

/* Tablet */
@media (max-width:1000px){
  .pdp-grid{grid-template-columns:1fr!important;gap:30px!important;}
  .cart-grid{grid-template-columns:1fr!important;gap:28px!important;}
  .catalog-grid{grid-template-columns:1fr!important;gap:24px!important;}
  .cats-grid{grid-template-columns:repeat(4,1fr)!important;}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:30px!important;}
  .pdp-gallery,.cart-aside{position:static!important;top:auto!important;}
  /* filtros como drawer */
  .catalog-filter-btn{display:inline-flex!important;}
  .catalog-aside{display:none!important;}
  .catalog-aside.open{display:block!important;position:fixed!important;inset:0!important;top:0!important;left:0!important;
    z-index:1300!important;overflow-y:auto!important;margin:0!important;
    background:linear-gradient(180deg,var(--green),var(--bg-2))!important;padding:20px 20px 100px!important;}
  .catalog-aside.open .catalog-aside-close{display:inline-grid!important;place-items:center;}
  .catalog-aside.open .catalog-aside-done{display:block!important;}
  .catalog-aside-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1290;}
}

/* Móvil ancho */
@media (max-width:820px){
  .nav-desktop-l,.nav-desktop-r{display:none!important;}
  .nav-burger{display:inline-grid!important;place-items:center;}
  .nav-drawer.open{display:block;background:linear-gradient(180deg,var(--green),var(--bg-2));border-bottom:1px solid var(--green-line);}
  .manifesto-grid{grid-template-columns:1fr!important;gap:22px!important;}
  .cats-grid{grid-template-columns:repeat(3,1fr)!important;}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Móvil chico */
@media (max-width:560px){
  .wrap{padding:0 16px!important;}
  .cats-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important;}
  .footer-grid{grid-template-columns:1fr!important;}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;}
  .ann-mid{display:none!important;}
}

/* ===== Carrusel de categorías (marquee infinito) ===== */
.cat-marquee{overflow:hidden;position:relative;margin-top:34px;padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);}
.cat-track{display:flex;width:max-content;animation:catScroll 42s linear infinite;}
.cat-track:hover{animation-play-state:paused;}
.cat-item{flex:0 0 auto;width:238px;margin-right:16px;cursor:pointer;text-align:center;}
@keyframes catScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (max-width:560px){ .cat-item{width:180px;margin-right:12px;} }

/* Fondo de plumas: vertical en móvil; girado 90° (horizontal) en web */
@media (min-width:821px){
  .app-scroll{ background-image:url("../img/fondopag-web.jpg"); }
  .hero-bg{ background:url("../img/fondopag-web.jpg") center center/cover no-repeat,#0A130D; }
}

/* Manifiesto en móvil: sol pequeño arriba-izq, luna pequeña abajo-der */
@media (max-width:760px){
  .manif-sol{ top:8px!important; bottom:auto!important; left:-16px!important; transform:none!important; height:auto!important; width:116px!important; opacity:.42!important; }
  .manif-luna{ top:auto!important; bottom:8px!important; right:-16px!important; transform:none!important; height:auto!important; width:116px!important; opacity:.42!important; }
}

/* Guía de tallas: imagen de referencia + tabla (web lado a lado, móvil apilado) */
.legal-fig{ display:flex; gap:28px; align-items:flex-start; }
.legal-fig-img{ width:260px; flex:none; border-radius:10px; border:1px solid var(--amate-line); background:#fbf8f1; padding:14px; display:block; }
@media (max-width:700px){
  .legal-fig{ flex-direction:column; }
  .legal-fig-img{ width:min(300px,80%); margin:0 auto 6px; }
}