:root {
  --blood: #CC0000;
  --blood-dark: #880000;
  --black: #0A0A0A;
  --near-black: #111111;
  --ink: #1A1A1A;
  --white: #F0EDE8;
  --gold: #C8A400;
  --smoke: #2A2A2A;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--black); color: var(--white); font-family: 'Special Elite', cursive; overflow-x: hidden; cursor: crosshair; }

/* BLOOD TOP */
.blood-drip-top { position: fixed; top: 0; left: 0; right: 0; height: 8px; background: var(--blood); z-index: 9999; box-shadow: 0 0 20px rgba(204,0,0,0.8); }
.blood-drip-top::after { content: ''; position: absolute; bottom: -40px; left: 0; right: 0; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 40' preserveAspectRatio='none'%3E%3Cpath d='M80,0 L78,28 Q80,40 82,28 L80,0 M200,0 L198,18 Q200,26 202,18 L200,0 M340,0 L337,34 Q340,40 343,34 L340,0 M480,0 L478,22 Q480,30 482,22 L480,0 M600,0 L597,38 Q600,40 603,38 L600,0 M720,0 L718,16 Q720,22 722,16 L720,0 M850,0 L847,30 Q850,38 853,30 L850,0 M980,0 L978,20 Q980,28 982,20 L980,0 M1100,0 L1097,36 Q1100,40 1103,36 L1100,0 M1250,0 L1248,14 Q1250,20 1252,14 L1250,0 M1380,0 L1378,26 Q1380,34 1382,26 L1380,0' stroke='%23CC0000' stroke-width='4' fill='%23CC0000'/%3E%3C/svg%3E") repeat-x; background-size: 1400px 40px; }

/* NAV */
nav { position: fixed; top: 8px; left: 0; right: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 1rem 3rem; background: rgba(10,10,10,0.96); border-bottom: 2px solid var(--blood); }
.nav-logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.logo-name { font-family: 'Black Ops One', sans-serif; font-size: 1.5rem; color: var(--white); }
.logo-sub { font-family: 'Permanent Marker', cursive; font-size: 0.7rem; color: var(--blood); letter-spacing: 0.1em; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 0.15em; color: #888; text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--blood); }
.nav-cta {
  font-family: 'Black Ops One', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  padding: 0.7rem 1.8rem;
  background: var(--blood);
  color: var(--white);
  text-decoration: none;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  box-shadow: 0 0 15px rgba(204,0,0,0.4);
  transition: all 0.2s;
  animation: navCTAPulse 2.5s ease-in-out infinite;
}
@keyframes navCTAPulse {
  0%,100% { box-shadow: 0 0 10px rgba(204,0,0,0.4); }
  50% { box-shadow: 0 0 25px rgba(204,0,0,0.8); }
}
.nav-cta:hover { background: #EE0000; transform: translateY(-2px); box-shadow: 0 0 30px rgba(204,0,0,0.9); }

/* HERO */
#hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 80px; background: var(--black); }
.hero-bg-text { position: absolute; font-family: 'Black Ops One', sans-serif; font-size: 28vw; color: rgba(204,0,0,0.04); white-space: nowrap; pointer-events: none; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 0; }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 3rem; align-items: center; }
.hero-badge { display: inline-block; background: var(--blood); font-family: 'Bebas Neue', sans-serif; font-size: 0.8rem; letter-spacing: 0.3em; padding: 0.3rem 1rem; margin-bottom: 1.5rem; }
.hero-badge::before { content: '●'; margin-right: 0.5rem; animation: blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.hero-name { font-family: 'Black Ops One', sans-serif; font-size: clamp(3.5rem,8vw,7rem); line-height: 0.95; opacity: 0; animation: slideIn 0.8s 0.2s forwards; }
.blood-word { color: var(--blood); display: block; }
.hero-tagline { font-family: 'Permanent Marker', cursive; font-size: clamp(1.2rem,3vw,1.8rem); color: var(--blood); margin-top: 0.8rem; opacity: 0; animation: slideIn 0.8s 0.4s forwards; }
.hero-desc { font-size: 1rem; color: #888; line-height: 1.8; margin-top: 1.5rem; max-width: 420px; opacity: 0; animation: slideIn 0.8s 0.6s forwards; }
.hero-btns { display: flex; gap: 1rem; margin-top: 2rem; opacity: 0; animation: slideIn 0.8s 0.8s forwards; }
@keyframes slideIn { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
.btn-blood {
  font-family: 'Black Ops One', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  padding: 1rem 2.5rem;
  background: var(--blood);
  color: var(--white);
  text-decoration: none;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  box-shadow: 0 0 20px rgba(204,0,0,0.5), 0 0 40px rgba(204,0,0,0.2);
  transition: all 0.2s;
  position: relative;
  text-transform: uppercase;
}
.btn-blood::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,80,80,0.3) 0%, transparent 50%);
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.btn-blood:hover {
  box-shadow: 0 0 30px rgba(204,0,0,0.9), 0 0 60px rgba(204,0,0,0.4);
  transform: translateY(-3px);
  background: #EE0000;
}
.btn-ghost {
  font-family: 'Black Ops One', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  padding: 1rem 2.5rem;
  background: transparent;
  color: var(--white);
  text-decoration: none;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  border: 2px solid rgba(255,255,255,0.25);
  transition: all 0.2s;
  position: relative;
}
.btn-ghost:hover {
  border-color: var(--blood);
  color: var(--blood);
  box-shadow: 0 0 15px rgba(204,0,0,0.3);
  transform: translateY(-3px);
}
.hero-masks { display: flex; align-items: center; justify-content: center; height: 580px; position: relative; opacity: 0; animation: fadeIn 1s 0.5s forwards; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.hero-mask-main { width: 300px; filter: drop-shadow(0 0 40px rgba(204,0,0,0.6)); animation: maskFloat 4s ease-in-out infinite; }
@keyframes maskFloat { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-18px) rotate(2deg)} }

/* DIVIDER */
.blood-divider { width: 100%; height: 6px; background: var(--blood); box-shadow: 0 0 15px rgba(204,0,0,0.5); }

/* SECTIONS */
section { position: relative; z-index: 2; padding: 5rem 3rem; }
#mascaras { background: var(--near-black); text-align: center; }
#estilos { background: var(--black); }
#artista { background: var(--near-black); }
#precios { background: var(--black); text-align: center; }
#reservacion { background: var(--near-black); }
#contacto { background: var(--black); }

.section-header { margin-bottom: 3rem; }
.sec-label { font-family: 'Permanent Marker', cursive; font-size: 0.9rem; color: var(--blood); display: block; margin-bottom: 0.5rem; }
.sec-title { font-family: 'Black Ops One', sans-serif; font-size: clamp(2.5rem,5vw,4rem); line-height: 1; color: var(--white); }
.sec-title span { color: var(--blood); }
.sec-sub { color: #666; font-size: 0.9rem; margin-top: 0.8rem; }

/* MASKS SHOWCASE */
.masks-showcase { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 3rem; }
.mask-item { display: flex; flex-direction: column; align-items: center; padding: 2rem 1.5rem; cursor: pointer; transition: all 0.3s; border: 2px solid transparent; width: 190px; }
.mask-item:hover { border-color: var(--blood); background: rgba(204,0,0,0.05); }
.mask-item:hover svg { filter: drop-shadow(0 0 20px rgba(204,0,0,0.9)); transform: scale(1.1) translateY(-6px); }
.mask-item svg { width: 140px; height: 160px; transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); filter: drop-shadow(0 8px 20px rgba(204,0,0,0.4)); }
.mask-item-name { font-family: 'Black Ops One', sans-serif; font-size: 0.9rem; color: var(--white); margin-top: 1rem; }
.mask-item-jp { font-size: 1.1rem; color: var(--blood); display: block; }
.mask-item-type { font-size: 0.6rem; font-family: 'Bebas Neue', sans-serif; color: #555; letter-spacing: 0.2em; margin-top: 0.3rem; }

/* ESTILOS */
.estilos-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin-top: 3rem; border: 3px solid var(--blood); box-shadow: 8px 8px 0 var(--blood-dark); }
.estilo-card { background: var(--ink); padding: 2.5rem 2rem; position: relative; overflow: hidden; transition: background 0.3s; cursor: pointer; }
.estilo-card:hover { background: #1A0000; }
.estilo-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--blood); transform: scaleX(0); transition: transform 0.3s; transform-origin: left; }
.estilo-card:hover::before { transform: scaleX(1); }
.estilo-num { font-family: 'Black Ops One', sans-serif; font-size: 5rem; color: rgba(204,0,0,0.08); position: absolute; top: -0.5rem; right: 1rem; }
.estilo-name { font-family: 'Black Ops One', sans-serif; font-size: 1.4rem; color: var(--white); margin-bottom: 0.3rem; }
.estilo-jp { font-size: 1.1rem; color: var(--blood); display: block; margin-bottom: 1rem; }
.estilo-desc { font-size: 0.9rem; color: #888; line-height: 1.7; }

/* ARTISTA */
.artista-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; max-width: 1100px; margin: 0 auto; }
.artista-visual { display: flex; justify-content: center; }
.artista-frame { position: relative; width: 340px; height: 400px; border: 3px solid var(--blood); box-shadow: 10px 10px 0 var(--blood-dark); background: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.artista-frame svg { width: 85%; height: 85%; filter: drop-shadow(0 10px 30px rgba(204,0,0,0.4)); }
.artista-tag { position: absolute; bottom: -14px; right: -14px; background: var(--blood); font-family: 'Black Ops One', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; padding: 0.4rem 1rem; }
.artista-yrs { position: absolute; top: -14px; left: -14px; background: var(--black); border: 2px solid var(--blood); font-family: 'Permanent Marker', cursive; font-size: 0.75rem; color: var(--blood); padding: 0.3rem 0.8rem; }
.artista-info h2 { font-family: 'Black Ops One', sans-serif; font-size: clamp(2.5rem,4vw,3.5rem); line-height: 1; margin-bottom: 0.3rem; }
.artista-info h2 .blood { color: var(--blood); }
.artista-subtitle { font-family: 'Permanent Marker', cursive; font-size: 1.2rem; color: var(--blood); display: block; margin-bottom: 1.5rem; }
.artista-bio { font-size: 1rem; color: #888; line-height: 1.8; margin-bottom: 2rem; }
.artista-stats { display: grid; grid-template-columns: repeat(3,1fr); border: 2px solid var(--blood); }
.astat { padding: 1rem; text-align: center; border-right: 2px solid var(--blood); }
.astat:last-child { border-right: none; }
.astat-num { font-family: 'Black Ops One', sans-serif; font-size: 2rem; color: var(--blood); display: block; }
.astat-lbl { font-size: 0.7rem; color: #666; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.1em; }

/* PRECIOS */
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; max-width: 1050px; margin: 3rem auto 0; }
.precio-card { background: var(--ink); padding: 2.5rem 2rem; border: 2px solid #222; position: relative; text-align: left; transition: all 0.3s; }
.precio-card:hover { border-color: var(--blood); transform: translateY(-5px); }
.precio-card.featured { border-color: var(--blood); background: #1A0000; }
.precio-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--blood); font-family: 'Bebas Neue', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; padding: 0.3rem 1rem; white-space: nowrap; }
.precio-tier { font-family: 'Black Ops One', sans-serif; font-size: 1.5rem; color: var(--white); }
.precio-jp { font-size: 0.8rem; color: var(--blood); display: block; margin-bottom: 1.2rem; letter-spacing: 0.1em; }
.precio-amount { font-family: 'Black Ops One', sans-serif; font-size: 2.2rem; color: var(--blood); display: block; line-height: 1; }
.precio-unit { font-size: 0.7rem; color: #666; display: block; margin-bottom: 1.2rem; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.1em; }
.precio-features { list-style: none; font-size: 0.85rem; color: #888; line-height: 2; }
.precio-features li::before { content: '▸ '; color: var(--blood); }
.precio-btn { display: block; margin-top: 1.5rem; font-family: 'Black Ops One', sans-serif; font-size: 0.9rem; letter-spacing: 0.15em; padding: 0.85rem; text-align: center; text-decoration: none; background: transparent; border: 2px solid var(--blood); color: var(--blood); clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%); transition: all 0.2s; position: relative; }
.precio-btn:hover, .featured .precio-btn { background: var(--blood); color: var(--white); box-shadow: 0 0 20px rgba(204,0,0,0.5); transform: translateY(-2px); }

/* CALENDARIO & RESERVACION */
.booking-wrap { max-width: 1100px; margin: 0 auto; }
.booking-grid { display: grid; grid-template-columns: 380px 1fr; gap: 2rem; margin-top: 3rem; }
.calendar-box { background: var(--ink); border: 2px solid var(--blood); box-shadow: 6px 6px 0 var(--blood-dark); padding: 1.5rem; }
.cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.cal-nav { background: none; border: 1px solid var(--blood); color: var(--blood); font-size: 1rem; padding: 0.3rem 0.8rem; cursor: pointer; transition: all 0.2s; font-family: 'Black Ops One', sans-serif; }
.cal-nav:hover { background: var(--blood); color: var(--white); }
.cal-title { font-family: 'Black Ops One', sans-serif; font-size: 1rem; letter-spacing: 0.1em; color: var(--white); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; margin-bottom: 0.5rem; }
.cal-weekdays span { font-family: 'Bebas Neue', sans-serif; font-size: 0.75rem; color: #555; letter-spacing: 0.1em; padding: 0.3rem 0; }
.cal-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 0.9rem; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; }
.cal-day:hover:not(.disabled):not(.empty) { background: rgba(204,0,0,0.15); border-color: var(--blood); color: var(--blood); }
.cal-day.selected { background: var(--blood); color: var(--white); }
.cal-day.disabled { color: #333; cursor: not-allowed; }
.cal-day.empty { cursor: default; }
.cal-day.today { border-color: var(--blood); color: var(--blood); }
.time-slots { margin-top: 1.2rem; border-top: 1px solid #333; padding-top: 1rem; }
.time-label { font-family: 'Bebas Neue', sans-serif; font-size: 0.8rem; letter-spacing: 0.2em; color: #666; margin-bottom: 0.8rem; }
.slots-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.time-slot { background: var(--smoke); border: 1px solid #333; padding: 0.5rem 0.3rem; text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 0.8rem; letter-spacing: 0.05em; cursor: pointer; transition: all 0.2s; color: var(--white); }
.time-slot:hover { border-color: var(--blood); color: var(--blood); }
.time-slot.selected { background: var(--blood); border-color: var(--blood); color: var(--white); }
.time-slot.unavailable { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }

/* FORM */
.booking-form-box { background: var(--ink); border: 2px solid var(--blood); box-shadow: 6px 6px 0 var(--blood-dark); padding: 2rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.fg { display: flex; flex-direction: column; gap: 0.4rem; }
.fg.full { grid-column: 1/-1; }
.flabel { font-family: 'Bebas Neue', sans-serif; font-size: 0.8rem; letter-spacing: 0.2em; color: #666; }
.finput, .fselect, .ftextarea { background: var(--black); border: 2px solid #333; padding: 0.7rem 1rem; color: var(--white); font-family: 'Special Elite', cursive; font-size: 0.9rem; width: 100%; transition: border-color 0.2s; -webkit-appearance: none; }
.finput:focus, .fselect:focus, .ftextarea:focus { outline: none; border-color: var(--blood); box-shadow: 3px 3px 0 var(--blood-dark); }
.fselect option { background: var(--ink); }
.ftextarea { height: 110px; resize: vertical; }
.fsubmit { width: 100%; margin-top: 1.5rem; padding: 1.1rem; background: var(--blood); border: 3px solid var(--black); outline: 2px solid var(--blood); color: var(--white); font-family: 'Black Ops One', sans-serif; font-size: 1.1rem; letter-spacing: 0.15em; cursor: pointer; box-shadow: 5px 5px 0 var(--blood-dark); transition: all 0.15s; }
.fsubmit:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--blood-dark); }
.form-note { text-align: center; margin-top: 0.8rem; font-size: 0.75rem; color: #555; }
.success-box { display: none; text-align: center; padding: 3rem 2rem; }
.success-box .big { font-family: 'Black Ops One', sans-serif; font-size: 2rem; color: var(--blood); display: block; margin-bottom: 0.5rem; }
.success-box p { color: #888; }

/* CONTACTO */
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 1100px; margin: 0 auto; }
.contact-block h2 { font-family: 'Black Ops One', sans-serif; font-size: 2rem; margin-bottom: 2rem; line-height: 1; }
.contact-block h2 span { color: var(--blood); display: block; }
.cline { display: flex; gap: 1rem; margin-bottom: 1.2rem; align-items: flex-start; border-left: 3px solid var(--blood); padding-left: 1rem; }
.cicon { font-size: 1.2rem; flex-shrink: 0; }
.ctext { font-size: 0.95rem; color: #888; line-height: 1.5; }
.ctext strong { color: var(--white); display: block; font-family: 'Bebas Neue', sans-serif; font-size: 0.8rem; letter-spacing: 0.1em; }
.social-row { display: flex; gap: 0.8rem; margin-top: 2rem; }
.soc-btn { font-family: 'Black Ops One', sans-serif; font-size: 0.8rem; padding: 0.5rem 1rem; border: 2px solid var(--blood); color: var(--blood); text-decoration: none; box-shadow: 3px 3px 0 var(--blood-dark); transition: all 0.2s; }
.soc-btn:hover { background: var(--blood); color: var(--white); }
.map-box { background: var(--ink); border: 2px solid var(--blood); box-shadow: 8px 8px 0 var(--blood-dark); min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; font-family: 'Black Ops One', sans-serif; color: var(--blood); font-size: 1.3rem; }
.map-pin-icon { font-size: 3rem; }
.map-box small { font-size: 0.75rem; color: #555; font-family: 'Special Elite', cursive; }

/* FOOTER */
footer { background: var(--black); border-top: 3px solid var(--blood); padding: 2rem 3rem; display: flex; justify-content: space-between; align-items: center; }
.foot-logo { font-family: 'Black Ops One', sans-serif; font-size: 1.2rem; color: var(--white); }
.foot-logo span { color: var(--blood); }
.foot-copy { font-size: 0.7rem; color: #555; text-align: center; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em; }
.foot-links { display: flex; gap: 1rem; }
.foot-links a { font-family: 'Bebas Neue', sans-serif; font-size: 0.8rem; color: #555; text-decoration: none; letter-spacing: 0.1em; transition: color 0.2s; }
.foot-links a:hover { color: var(--blood); }

/* REVEAL */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s, transform 0.7s; }
.reveal.v { opacity: 1; transform: translateY(0); }

/* TIENDA STYLES */
.tienda-hero { padding: 8rem 3rem 3rem; text-align: center; background: var(--black); }
.productos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px; padding: 2rem 3rem; max-width: 1400px; margin: 0 auto; }
.producto-card { background: var(--ink); border: 2px solid #222; position: relative; cursor: pointer; transition: all 0.3s; overflow: hidden; }
.producto-card:hover { border-color: var(--blood); transform: translateY(-4px); }
.producto-img { width: 100%; aspect-ratio: 1; background: var(--smoke); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.producto-img img { width: 100%; height: 100%; object-fit: cover; }
.producto-img .no-img { font-size: 4rem; }
.producto-info { padding: 1.2rem; }
.producto-nombre { font-family: 'Black Ops One', sans-serif; font-size: 1rem; letter-spacing: 0.05em; color: var(--white); margin-bottom: 0.3rem; }
.producto-cat { font-size: 0.65rem; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.2em; color: var(--blood); margin-bottom: 0.5rem; }
.producto-desc { font-size: 0.8rem; color: #888; line-height: 1.5; margin-bottom: 0.8rem; }
.producto-precio { font-family: 'Black Ops One', sans-serif; font-size: 1.4rem; color: var(--blood); display: block; margin-bottom: 0.8rem; }
.producto-precio small { font-size: 0.7rem; color: #666; }
.btn-agregar { width: 100%; font-family: 'Black Ops One', sans-serif; font-size: 0.85rem; letter-spacing: 0.1em; padding: 0.6rem; background: none; border: 2px solid var(--blood); color: var(--blood); cursor: pointer; transition: all 0.2s; box-shadow: 3px 3px 0 var(--blood-dark); }
.btn-agregar:hover { background: var(--blood); color: var(--white); }
.badge-nuevo { position: absolute; top: 10px; left: 10px; background: var(--blood); font-family: 'Bebas Neue', sans-serif; font-size: 0.65rem; letter-spacing: 0.2em; padding: 0.2rem 0.6rem; }
.filtros-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 1.5rem 3rem 0; justify-content: center; }
.filtro-btn { font-family: 'Bebas Neue', sans-serif; font-size: 0.85rem; letter-spacing: 0.15em; padding: 0.5rem 1.2rem; border: 1px solid #333; background: none; color: #666; cursor: pointer; transition: all 0.2s; }
.filtro-btn:hover, .filtro-btn.active { border-color: var(--blood); color: var(--blood); }
.carrito-btn { position: fixed; bottom: 2rem; right: 2rem; background: var(--blood); color: var(--white); border: none; font-family: 'Black Ops One', sans-serif; font-size: 1rem; padding: 1rem 1.5rem; cursor: pointer; box-shadow: 5px 5px 0 var(--blood-dark); z-index: 500; transition: all 0.2s; }
.carrito-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--blood-dark); }
.carrito-count { background: var(--white); color: var(--blood); border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; margin-left: 0.5rem; font-family: 'Bebas Neue', sans-serif; }
.carrito-panel { position: fixed; right: -420px; top: 0; width: 400px; height: 100vh; background: var(--ink); border-left: 2px solid var(--blood); z-index: 2000; transition: right 0.3s; overflow-y: auto; padding: 2rem; box-shadow: -10px 0 30px rgba(0,0,0,0.8); }
.carrito-panel.open { right: 0; }
.carrito-title { font-family: 'Black Ops One', sans-serif; font-size: 1.5rem; color: var(--white); margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.carrito-close { background: none; border: none; color: #666; font-size: 1.5rem; cursor: pointer; transition: color 0.2s; }
.carrito-close:hover { color: var(--blood); }
.carrito-item { display: flex; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #333; align-items: center; }
.carrito-item-info { flex: 1; }
.carrito-item-name { font-family: 'Black Ops One', sans-serif; font-size: 0.85rem; color: var(--white); }
.carrito-item-price { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; color: var(--blood); }
.carrito-qty { display: flex; gap: 0.5rem; align-items: center; }
.qty-btn { background: none; border: 1px solid var(--blood); color: var(--blood); width: 24px; height: 24px; cursor: pointer; font-family: 'Black Ops One', sans-serif; transition: all 0.2s; }
.qty-btn:hover { background: var(--blood); color: var(--white); }
.carrito-total { font-family: 'Black Ops One', sans-serif; font-size: 1.3rem; color: var(--white); margin: 1.5rem 0; padding-top: 1rem; border-top: 2px solid var(--blood); }
.carrito-total span { color: var(--blood); }
.btn-checkout { width: 100%; background: var(--blood); border: none; color: var(--white); font-family: 'Black Ops One', sans-serif; font-size: 1rem; letter-spacing: 0.1em; padding: 1rem; cursor: pointer; box-shadow: 4px 4px 0 var(--blood-dark); transition: all 0.2s; }
.btn-checkout:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--blood-dark); }
.carrito-empty { text-align: center; color: #555; font-size: 0.9rem; padding: 2rem; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1999; display: none; }
.overlay.show { display: block; }

/* ADMIN STYLES */
.admin-body { background: #0D0D0D; color: var(--white); font-family: 'Special Elite', cursive; }
.admin-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 240px; background: var(--ink); border-right: 2px solid var(--blood); padding: 1.5rem 0; z-index: 100; }
.admin-logo { padding: 0 1.5rem 1.5rem; border-bottom: 1px solid #333; }
.admin-logo h2 { font-family: 'Black Ops One', sans-serif; font-size: 1rem; color: var(--white); }
.admin-logo span { font-size: 0.65rem; color: var(--blood); font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.15em; }
.admin-nav { margin-top: 1rem; }
.admin-nav a { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1.5rem; color: #888; text-decoration: none; font-family: 'Bebas Neue', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em; transition: all 0.2s; border-left: 3px solid transparent; }
.admin-nav a:hover, .admin-nav a.active { color: var(--blood); border-left-color: var(--blood); background: rgba(204,0,0,0.05); }
.admin-main { margin-left: 240px; padding: 2rem; min-height: 100vh; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #222; }
.admin-topbar h1 { font-family: 'Black Ops One', sans-serif; font-size: 1.8rem; color: var(--white); }
.admin-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 2rem; }
.stat-card { background: var(--ink); border: 1px solid #333; border-left: 4px solid var(--blood); padding: 1.2rem; }
.stat-num { font-family: 'Black Ops One', sans-serif; font-size: 2rem; color: var(--blood); display: block; }
.stat-lbl { font-size: 0.7rem; color: #666; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.1em; }
.admin-section { background: var(--ink); border: 1px solid #333; padding: 1.5rem; margin-bottom: 1.5rem; }
.admin-section-title { font-family: 'Black Ops One', sans-serif; font-size: 1.1rem; color: var(--white); margin-bottom: 1.2rem; display: flex; justify-content: space-between; align-items: center; }
.btn-admin { font-family: 'Bebas Neue', sans-serif; font-size: 0.85rem; letter-spacing: 0.1em; padding: 0.5rem 1.2rem; background: var(--blood); border: none; color: var(--white); cursor: pointer; clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%); box-shadow: 0 0 10px rgba(204,0,0,0.4); transition: all 0.2s; }
.btn-admin:hover { background: #EE0000; box-shadow: 0 0 20px rgba(204,0,0,0.7); transform: translateY(-1px); }
.btn-admin.outline { background: none; border: 1px solid var(--blood); color: var(--blood); box-shadow: none; clip-path: none; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table th { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.1em; text-align: left; padding: 0.7rem; background: #0D0D0D; color: #666; border-bottom: 1px solid #333; font-size: 0.75rem; }
.admin-table td { padding: 0.8rem 0.7rem; border-bottom: 1px solid #1A1A1A; color: #ccc; vertical-align: middle; }
.admin-table tr:hover td { background: rgba(204,0,0,0.03); }
.status-badge { font-family: 'Bebas Neue', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; padding: 0.2rem 0.6rem; border-radius: 2px; }
.status-nuevo { background: rgba(204,0,0,0.2); color: var(--blood); }
.status-confirmado { background: rgba(0,150,0,0.2); color: #4CAF50; }
.status-completado { background: rgba(100,100,100,0.2); color: #888; }
.status-cancelado { background: rgba(255,100,0,0.2); color: #FF6600; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 3000; display: none; align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal-box { background: var(--ink); border: 2px solid var(--blood); box-shadow: 10px 10px 0 var(--blood-dark); padding: 2rem; width: 90%; max-width: 560px; max-height: 90vh; overflow-y: auto; }
.modal-title { font-family: 'Black Ops One', sans-serif; font-size: 1.3rem; color: var(--white); margin-bottom: 1.5rem; display: flex; justify-content: space-between; }
.modal-close { background: none; border: none; color: #666; font-size: 1.3rem; cursor: pointer; }
.modal-close:hover { color: var(--blood); }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-fg { display: flex; flex-direction: column; gap: 0.4rem; }
.admin-fg.full { grid-column: 1/-1; }
.admin-label { font-family: 'Bebas Neue', sans-serif; font-size: 0.75rem; letter-spacing: 0.15em; color: #666; }
.admin-input, .admin-select, .admin-textarea { background: #0D0D0D; border: 1px solid #333; padding: 0.6rem 0.8rem; color: var(--white); font-family: 'Special Elite', cursive; font-size: 0.85rem; width: 100%; transition: border-color 0.2s; }
.admin-input:focus, .admin-select:focus, .admin-textarea:focus { outline: none; border-color: var(--blood); }
.admin-select option { background: var(--ink); }
.admin-textarea { height: 90px; resize: vertical; }
.img-preview { width: 100%; height: 150px; background: #0D0D0D; border: 1px dashed #333; display: flex; align-items: center; justify-content: center; color: #555; font-size: 0.8rem; cursor: pointer; transition: border-color 0.2s; }
.img-preview:hover { border-color: var(--blood); }
.img-preview img { width: 100%; height: 100%; object-fit: cover; }
.toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: var(--blood); color: var(--white); font-family: 'Bebas Neue', sans-serif; font-size: 0.9rem; letter-spacing: 0.15em; padding: 0.8rem 2rem; z-index: 9999; display: none; box-shadow: 4px 4px 0 var(--blood-dark); }
.toast.show { display: block; animation: toastIn 0.3s ease; }
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* RESPONSIVE */
@media(max-width:900px){
  nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-masks { height: 280px; }
  .hero-mask-main { width: 200px; }
  .hero-btns { justify-content: center; }
  .estilos-grid { grid-template-columns: 1fr; }
  .artista-inner { grid-template-columns: 1fr; }
  .artista-frame { width: 260px; height: 320px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin: 3rem auto 0; }
  .booking-grid { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; }
  footer { flex-direction: column; gap: 0.8rem; text-align: center; padding: 1.5rem; }
  .admin-sidebar { display: none; }
  .admin-main { margin-left: 0; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .productos-grid { padding: 1rem; }
  .admin-form-grid { grid-template-columns: 1fr; }
}

/* =============================================
   MÁSCARAS REALES - Image styles
   ============================================= */
.mask-img-wrap {
  width: 180px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mask-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 25px rgba(204,0,0,0.5));
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: maskFloat 4s ease-in-out infinite;
}

.mask-item:nth-child(2) .mask-img-wrap img { animation-delay: -0.8s; }
.mask-item:nth-child(3) .mask-img-wrap img { animation-delay: -1.6s; }
.mask-item:nth-child(4) .mask-img-wrap img { animation-delay: -2.4s; }
.mask-item:nth-child(5) .mask-img-wrap img { animation-delay: -3.2s; }
.mask-item:nth-child(6) .mask-img-wrap img { animation-delay: -0.4s; }

.mask-item:hover .mask-img-wrap img {
  transform: scale(1.12) translateY(-10px) rotate(-3deg) !important;
  filter: drop-shadow(0 20px 40px rgba(204,0,0,0.9)) drop-shadow(0 0 20px rgba(204,0,0,0.5)) !important;
  animation-play-state: paused;
}

/* Hero mask real image */
.hero-mask-real {
  width: 320px;
  filter: drop-shadow(0 0 40px rgba(204,0,0,0.7)) drop-shadow(0 30px 60px rgba(0,0,0,0.9));
  animation: maskFloat 4s ease-in-out infinite;
}

@media(max-width:900px) {
  .mask-img-wrap { width: 120px; height: 140px; }
  .hero-mask-real { width: 200px; }
}

/* =============================================
   HERO ONI PRINCIPAL - BRUTAL
   ============================================= */
.hero-mask-container {
  position: relative;
  width: 500px;
  height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-oni-main {
  width: 420px;
  max-width: 420px;
  position: relative;
  z-index: 3;
  filter: 
    drop-shadow(0 0 30px rgba(204,0,0,0.9))
    drop-shadow(0 0 80px rgba(204,0,0,0.5))
    drop-shadow(0 0 120px rgba(204,0,0,0.3))
    drop-shadow(0 40px 80px rgba(0,0,0,0.9));
  animation: oniFloat 4s ease-in-out infinite, oniGlow 3s ease-in-out infinite;
}

@keyframes oniFloat {
  0%,100% { transform: translateY(0) rotate(-1deg) scale(1); }
  50% { transform: translateY(-20px) rotate(1deg) scale(1.02); }
}

@keyframes oniGlow {
  0%,100% {
    filter: 
      drop-shadow(0 0 20px rgba(204,0,0,0.7))
      drop-shadow(0 0 60px rgba(204,0,0,0.4))
      drop-shadow(0 40px 80px rgba(0,0,0,0.9));
  }
  50% {
    filter: 
      drop-shadow(0 0 50px rgba(204,0,0,1))
      drop-shadow(0 0 100px rgba(204,0,0,0.7))
      drop-shadow(0 0 150px rgba(204,0,0,0.4))
      drop-shadow(0 40px 80px rgba(0,0,0,0.9));
  }
}

/* BLOOD GLOW RINGS behind mask */
.blood-ring {
  position: absolute;
  border-radius: 50%;
  animation: ringPulse 3s ease-in-out infinite;
  z-index: 1;
}
.ring-1 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(204,0,0,0.15) 0%, transparent 70%);
  animation-delay: 0s;
}
.ring-2 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(204,0,0,0.08) 0%, transparent 70%);
  animation-delay: -1s;
}
.ring-3 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(204,0,0,0.04) 0%, transparent 70%);
  animation-delay: -2s;
}
@keyframes ringPulse {
  0%,100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* BLOOD DRIPS from mask */
.mask-drip {
  position: absolute;
  bottom: 40px;
  width: 6px;
  background: linear-gradient(to bottom, #CC0000, #880000, transparent);
  border-radius: 0 0 50% 50%;
  z-index: 4;
  animation: dripFall 3s ease-in-out infinite;
}
.drip-1 { height: 60px; left: 160px; animation-delay: 0s; width: 5px; }
.drip-2 { height: 90px; left: 200px; animation-delay: -1.2s; width: 7px; }
.drip-3 { height: 50px; left: 250px; animation-delay: -2.1s; width: 4px; }
@keyframes dripFall {
  0% { transform: scaleY(0); opacity: 0; transform-origin: top; }
  30% { transform: scaleY(1); opacity: 1; transform-origin: top; }
  80% { opacity: 1; }
  100% { transform: scaleY(1.3); opacity: 0; transform-origin: top; }
}

/* =============================================
   BLOOD DECORATIONS - Page-wide elements
   ============================================= */
.blood-decoration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.blood-splat { position: absolute; }
.splat-tl { top: 0; left: 0; width: 280px; opacity: 0.8; }
.splat-br { bottom: 0; right: 0; width: 280px; opacity: 0.8; }

/* =============================================
   BLOOD SECTION DIVIDERS
   ============================================= */
.blood-section-deco {
  position: relative;
  overflow: hidden;
}
.blood-section-deco::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #CC0000, transparent);
  animation: bloodLine 4s ease-in-out infinite;
}
@keyframes bloodLine {
  0%,100% { opacity: 0.4; transform: scaleX(0.8); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* BLOOD DROPS scattered on sections */
.blood-drops-row {
  display: flex;
  gap: 0;
  justify-content: center;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
  height: 40px;
}
.blood-drops-row svg {
  width: 100%;
  height: 40px;
}

/* SECTION CORNER BLOOD */
#mascaras, #estilos, #artista, #precios, #reservacion {
  position: relative;
}
#mascaras::after,
#precios::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 50'%3E%3Cpath d='M0,0 Q100,40 200,15 Q300,0 400,30 Q500,50 600,20 Q700,0 800,35 Q900,50 1000,18 Q1100,0 1200,28 Q1300,50 1400,15 L1400,50 L0,50 Z' fill='%23CC0000' opacity='0.08'/%3E%3C/svg%3E") no-repeat center;
  background-size: cover;
  pointer-events: none;
}

/* BLOOD PAINT STROKES on headings */
.sec-title {
  position: relative;
}
.sec-title::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 60px; height: 3px;
  background: var(--blood);
  box-shadow: 0 0 10px rgba(204,0,0,0.8);
}

/* ANIMATED BLOOD DROPS on nav */
.blood-drip-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, 
    rgba(255,50,50,0.3) 0%, 
    rgba(204,0,0,0) 20%, 
    rgba(255,50,50,0.2) 50%,
    rgba(204,0,0,0) 80%,
    rgba(255,50,50,0.3) 100%
  );
  animation: bloodShimmer 3s ease-in-out infinite;
}
@keyframes bloodShimmer {
  0%,100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* BLOOD TEXTURE on cards */
.estilo-card::after {
  content: '';
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  background: radial-gradient(circle, rgba(204,0,0,0.1) 0%, transparent 70%);
  border-radius: 50%;
}

/* PRECIO CARD blood accent */
.precio-card.featured::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(135deg, #CC0000, transparent, #CC0000);
  z-index: -1;
  animation: featuredGlow 2s ease-in-out infinite;
}
@keyframes featuredGlow {
  0%,100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* BLOOD CORNER BRACKETS on artista frame */
.artista-frame::before,
.artista-frame::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border-color: #CC0000;
  border-style: solid;
  z-index: 10;
}
.artista-frame::before {
  top: -3px; left: -3px;
  border-width: 3px 0 0 3px;
  box-shadow: -3px -3px 10px rgba(204,0,0,0.5);
}
.artista-frame::after {
  bottom: -3px; right: -3px;
  border-width: 0 3px 3px 0;
  box-shadow: 3px 3px 10px rgba(204,0,0,0.5);
}

@media(max-width:900px){
  .hero-oni-main { width: 260px; max-width: 260px; }
  .hero-mask-container { width: 300px; height: 380px; }
  .ring-1 { width: 220px; height: 220px; }
  .ring-2 { width: 290px; height: 290px; }
  .ring-3 { width: 350px; height: 350px; }
}

/* =============================================
   WHATSAPP FLOATING BUTTON - Custom BP Style
   ============================================= */
.wa-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  animation: waFloat 3s ease-in-out infinite;
}
.wa-float svg {
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 0 10px rgba(204,0,0,0.6));
  transition: all 0.3s;
}
.wa-float:hover svg {
  filter: drop-shadow(0 0 25px rgba(204,0,0,1));
  transform: scale(1.15);
}
.wa-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: #CC0000;
  opacity: 0;
  transition: opacity 0.3s;
}
.wa-float:hover .wa-label { opacity: 1; }
@keyframes waFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* =============================================
   FOOTER PRO
   ============================================= */
.footer-pro {
  background: #050505;
  position: relative;
  z-index: 2;
  margin-top: 0;
}

.footer-blood-line {
  height: 4px;
  background: linear-gradient(90deg, transparent, #CC0000 20%, #FF2200 50%, #CC0000 80%, transparent);
  box-shadow: 0 0 20px rgba(204,0,0,0.6), 0 0 40px rgba(204,0,0,0.3);
  animation: footerLine 3s ease-in-out infinite;
}
@keyframes footerLine {
  0%,100% { opacity: 0.7; }
  50% { opacity: 1; box-shadow: 0 0 30px rgba(204,0,0,0.9), 0 0 60px rgba(204,0,0,0.4); }
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding: 4rem 4rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-logo-big {
  display: flex;
  flex-direction: column;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.fl-gabo {
  font-family: 'Black Ops One', sans-serif;
  font-size: 2.5rem;
  color: #F0EDE8;
  letter-spacing: 0.05em;
}
.fl-gonzales {
  font-family: 'Black Ops One', sans-serif;
  font-size: 2.5rem;
  color: #CC0000;
  letter-spacing: 0.05em;
  text-shadow: 0 0 20px rgba(204,0,0,0.5);
}
.footer-tagline {
  font-family: 'Permanent Marker', cursive;
  font-size: 0.85rem;
  color: #CC0000;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.footer-desc {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.7;
  max-width: 300px;
  margin-bottom: 1.5rem;
}
.footer-social {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.fsoc-btn {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.9rem;
  border: 1px solid #333;
  color: #666;
  text-decoration: none;
  transition: all 0.2s;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.fsoc-btn:hover { border-color: #CC0000; color: #CC0000; }
.fsoc-btn.wa-style {
  border-color: #CC0000;
  color: #CC0000;
  background: rgba(204,0,0,0.08);
  font-size: 0.8rem;
}
.fsoc-btn.wa-style:hover {
  background: #CC0000;
  color: white;
}

.footer-col-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: #CC0000;
  margin-bottom: 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(204,0,0,0.2);
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer-links li, .footer-links a {
  font-size: 0.82rem;
  color: #555;
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.4;
}
.footer-links a:hover { color: #CC0000; }

.footer-cta-btn {
  display: inline-block;
  font-family: 'Black Ops One', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  padding: 0.7rem 1.4rem;
  background: #CC0000;
  color: white;
  text-decoration: none;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  box-shadow: 0 0 15px rgba(204,0,0,0.4);
  transition: all 0.2s;
}
.footer-cta-btn:hover {
  box-shadow: 0 0 25px rgba(204,0,0,0.8);
  transform: translateY(-2px);
}

.footer-masks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.footer-masks-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #0D0D0D;
  border: 1px solid #1A1A1A;
  padding: 0.3rem;
  filter: drop-shadow(0 3px 8px rgba(204,0,0,0.3));
  transition: all 0.3s;
}
.footer-masks-grid img:hover {
  filter: drop-shadow(0 5px 15px rgba(204,0,0,0.7));
  transform: scale(1.05);
  border-color: #CC0000;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 4rem;
  border-top: 1px solid #111;
  max-width: 1400px;
  margin: 0 auto;
}
.footer-bottom-left {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: #333;
}
.footer-sep { color: #CC0000; }
.footer-bottom-right { }
.dev-credit {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: #333;
}
.dev-credit strong {
  color: #CC0000;
  font-weight: normal;
}

@media(max-width:900px) {
  .footer-inner { grid-template-columns: 1fr; padding: 2rem; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; padding: 1rem; }
  .footer-bottom-left { flex-direction: column; gap: 0.3rem; }
  .wa-float { bottom: 1rem; right: 1rem; width: 50px; height: 50px; }
  .wa-float svg { width: 50px; height: 50px; }
}

/* =============================================
   ARTISTA REAL PHOTO
   ============================================= */
.artista-photo-frame {
  overflow: hidden;
  background: #0D0D0D;
}
.artista-real-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.1) saturate(0.9);
  transition: transform 0.5s ease;
}
.artista-photo-frame:hover .artista-real-photo {
  transform: scale(1.04);
}
.photo-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(204,0,0,0.03) 3px,
    rgba(204,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 2;
}
.photo-corner {
  position: absolute;
  width: 24px; height: 24px;
  border-color: #CC0000;
  border-style: solid;
  z-index: 3;
  box-shadow: 0 0 8px rgba(204,0,0,0.6);
}
.pc-tl { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.pc-tr { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.pc-bl { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
.pc-br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

/* =============================================
   DISEÑOS PERSONALIZADOS
   ============================================= */
.disenos-filtros {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  justify-content: center;
}
.dfiltro {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  padding: 0.5rem 1.4rem;
  background: none;
  border: 1px solid #333;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.dfiltro:hover, .dfiltro.active {
  border-color: #CC0000;
  color: #CC0000;
  background: rgba(204,0,0,0.07);
}

.disenos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 3px;
}

.diseno-card {
  background: var(--ink);
  border: 2px solid #1A1A1A;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  group: true;
}
.diseno-card:hover {
  border-color: #CC0000;
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(204,0,0,0.25);
}
.diseno-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  background: #0D0D0D;
}
.diseno-card:hover .diseno-img { transform: scale(1.06); }

.diseno-img-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #0D0D0D 0%, #1A0000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
}

.diseno-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, transparent 55%);
  pointer-events: none;
}
.diseno-blood-corner {
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-left: 35px solid transparent;
  border-top: 35px solid #CC0000;
  z-index: 2;
}
.diseno-cat-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(10,10,10,0.85);
  border: 1px solid #CC0000;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: #CC0000;
  padding: 0.2rem 0.6rem;
  z-index: 2;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}
.diseno-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.2rem;
  z-index: 2;
}
.diseno-nombre {
  font-family: 'Black Ops One', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 0.3rem;
}
.diseno-precio {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  color: #CC0000;
  display: block;
  margin-bottom: 0.8rem;
}
.diseno-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s;
}
.diseno-card:hover .diseno-btns {
  opacity: 1;
  transform: translateY(0);
}
.dbtn {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding: 0.5rem 0.3rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}
.dbtn-cotizar { background: #CC0000; color: #fff; }
.dbtn-cotizar:hover { background: #EE0000; }
.dbtn-agendar { background: transparent; border: 1px solid #CC0000; color: #CC0000; }
.dbtn-agendar:hover { background: #CC0000; color: #fff; }

/* MODAL DISENO */
.diseno-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.diseno-modal-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid #222;
}
.size-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 1rem 0;
}
.size-opt {
  background: #0D0D0D;
  border: 1px solid #333;
  padding: 0.7rem 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: #666;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}
.size-opt:hover, .size-opt.selected {
  border-color: #CC0000;
  color: #CC0000;
  background: rgba(204,0,0,0.08);
}
.size-opt .size-price {
  display: block;
  font-size: 0.7rem;
  color: inherit;
  margin-top: 0.2rem;
  opacity: 0.8;
}

/* Empty state */
.disenos-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 5rem 2rem;
  color: #333;
}
.disenos-empty div { font-size: 4rem; margin-bottom: 1rem; }
.disenos-empty p { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.2em; }
.disenos-empty small { font-size: 0.75rem; color: #222; letter-spacing: 0.15em; font-family: 'Bebas Neue', sans-serif; display: block; margin-top: 0.5rem; }

@media(max-width:900px) {
  .disenos-grid { grid-template-columns: 1fr 1fr; }
  .diseno-btns { opacity: 1; transform: none; }
  .diseno-modal-grid { grid-template-columns: 1fr; }
}

/* =============================================
   DISEÑOS PERSONALIZADOS — CARDS PRO
   ============================================= */

/* Filter buttons */
.disenos-filtros {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  justify-content: center;
}
.dfiltro {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  padding: 0.5rem 1.2rem;
  background: none;
  border: 1px solid #2A2A2A;
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
}
.dfiltro:hover { border-color: #CC0000; color: #CC0000; }
.dfiltro.active { border-color: #CC0000; color: #CC0000; background: rgba(204,0,0,0.08); }

/* Grid - responsive */
.disenos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 4px;
}

/* CARD */
.diseno-card {
  background: var(--ink);
  border: 1px solid #1A1A1A;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
}
.diseno-card:hover {
  border-color: #CC0000;
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(204,0,0,0.2), 0 0 0 1px rgba(204,0,0,0.3);
}

.diseno-nuevo-badge {
  position: absolute;
  top: 12px; left: -1px;
  background: #CC0000;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  padding: 0.25rem 0.8rem;
  z-index: 5;
  box-shadow: 3px 0 10px rgba(204,0,0,0.5);
}

.diseno-blood-corner {
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-left: 30px solid transparent;
  border-top: 30px solid #CC0000;
  z-index: 3;
  opacity: 0.7;
}
.diseno-card:hover .diseno-blood-corner { opacity: 1; }

/* Image container */
.diseno-img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #0D0D0D;
}
.diseno-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  transition: transform 0.5s ease;
  display: block;
}
.diseno-card:hover .diseno-img { transform: scale(1.08); }

.diseno-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  gap: 0.5rem;
  background: linear-gradient(135deg, #0D0D0D 0%, #1A0000 100%);
  color: #CC0000;
}
.diseno-img-placeholder span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.3em;
}

.diseno-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
  pointer-events: none;
  transition: opacity 0.3s;
}

.diseno-hover-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s;
  z-index: 2;
}
.diseno-card:hover .diseno-hover-info { opacity: 1; transform: translateY(0); }
.diseno-significado-preview {
  font-family: 'Permanent Marker', cursive;
  font-size: 0.7rem;
  color: rgba(204,0,0,0.9);
  letter-spacing: 0.05em;
  text-align: center;
}

/* Card body */
.diseno-card-body {
  padding: 1.2rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.diseno-cat-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: #CC0000;
}
.diseno-nombre {
  font-family: 'Black Ops One', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: #F0EDE8;
  line-height: 1.2;
}
.diseno-estilo-tag {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: #444;
  text-transform: uppercase;
}
.diseno-historia-preview {
  font-size: 0.8rem;
  color: #666;
  line-height: 1.6;
  margin-top: 0.3rem;
  flex: 1;
}
.diseno-footer-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid #1A1A1A;
}
.diseno-precio {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  color: #CC0000;
  letter-spacing: 0.05em;
}
.dbtn-ver {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  padding: 0.4rem 1rem;
  background: none;
  border: 1px solid #CC0000;
  color: #CC0000;
  cursor: pointer;
  transition: all 0.2s;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}
.dbtn-ver:hover { background: #CC0000; color: #fff; }

/* MODAL LAYOUT */
.diseno-modal-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.diseno-modal-img-wrap {
  position: relative;
  background: #0D0D0D;
  border: 1px solid #1A1A1A;
  overflow: hidden;
}
.diseno-modal-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 1rem;
  display: block;
  transition: transform 0.4s;
}
.diseno-modal-img:hover { transform: scale(1.04); }
.modal-img-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(204,0,0,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.diseno-modal-placeholder {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  gap: 0.5rem;
  color: #CC0000;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.2em;
}
.diseno-modal-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
.dmeta-item { display: flex; gap: 0.5rem; align-items: baseline; }
.dmeta-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: #555;
  flex-shrink: 0;
}
.dmeta-val {
  font-size: 0.8rem;
  color: #888;
}

.diseno-modal-section { margin-bottom: 1.2rem; }
.dsec-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: #CC0000;
  margin-bottom: 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(204,0,0,0.15);
}
.diseno-historia-full {
  font-size: 0.88rem;
  color: #888;
  line-height: 1.75;
  font-style: italic;
}

.significado-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.sig-tag {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(204,0,0,0.3);
  color: #CC0000;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}

/* Size selector grid */
.size-selector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.4rem;
}
.size-opt {
  background: #0D0D0D;
  border: 1px solid #252525;
  padding: 0.6rem 0.4rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  clip-path: polygon(3px 0%, 100% 0%, calc(100% - 3px) 100%, 0% 100%);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.size-opt:hover, .size-opt.selected { border-color: #CC0000; background: rgba(204,0,0,0.08); }
.size-label { font-family: 'Bebas Neue', sans-serif; font-size: 0.8rem; letter-spacing: 0.1em; color: #F0EDE8; }
.size-desc { font-size: 0.6rem; color: #555; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.1em; }
.size-price { font-family: 'Bebas Neue', sans-serif; font-size: 0.75rem; color: #CC0000; }

/* Precio estimado */
.precio-estimado-box {
  background: rgba(204,0,0,0.06);
  border: 1px solid rgba(204,0,0,0.2);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.precio-estimado-label { font-family: 'Bebas Neue', sans-serif; font-size: 0.65rem; letter-spacing: 0.2em; color: #555; }
.precio-estimado-num { font-family: 'Black Ops One', sans-serif; font-size: 1.8rem; color: #CC0000; line-height: 1.1; }
.precio-estimado-note { font-size: 0.7rem; color: #555; margin-top: 0.2rem; }

/* CTAs modal */
.modal-ctas { display: flex; flex-direction: column; gap: 0.6rem; }
.modal-cta-primary {
  width: 100%;
  padding: 1rem;
  background: #CC0000;
  border: none;
  color: #fff;
  font-family: 'Black Ops One', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  box-shadow: 0 0 20px rgba(204,0,0,0.4);
  transition: all 0.2s;
}
.modal-cta-primary:hover { background: #EE0000; box-shadow: 0 0 30px rgba(204,0,0,0.7); }
.modal-cta-secondary {
  width: 100%;
  padding: 0.8rem;
  background: transparent;
  border: 1px solid #CC0000;
  color: #CC0000;
  font-family: 'Black Ops One', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  transition: all 0.2s;
}
.modal-cta-secondary:hover { background: #CC0000; color: #fff; }
.modal-cta-note {
  font-size: 0.7rem;
  color: #444;
  text-align: center;
  margin-top: 0.5rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
}

.disenos-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 5rem 2rem;
}
.disenos-empty div { font-size: 4rem; margin-bottom: 1rem; }
.disenos-empty p { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.2em; color: #333; }
.disenos-empty small { font-size: 0.7rem; color: #222; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.15em; display: block; margin-top: 0.5rem; }

/* RESPONSIVE */
@media(max-width:900px) {
  .disenos-grid { grid-template-columns: 1fr 1fr; gap: 3px; }
  .diseno-hover-info { opacity: 1; transform: none; }
  .diseno-btns { opacity: 1; transform: none; }
  .diseno-modal-layout { grid-template-columns: 1fr; }
  .size-selector-grid { grid-template-columns: 1fr 1fr; }
  .diseno-modal-img-wrap { max-height: 280px; }
  .diseno-modal-img { max-height: 280px; object-fit: contain; }
}
@media(max-width:480px) {
  .disenos-grid { grid-template-columns: 1fr; }
  .dfiltro { font-size: 0.7rem; padding: 0.4rem 0.8rem; }
  .diseno-card-body { padding: 0.8rem; }
}

/* =============================================
   COTIZACIONES FLOW
   ============================================= */
.cotizar-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 3rem auto;
  max-width: 900px;
  flex-wrap: wrap;
}
.cotizar-step {
  flex: 1;
  min-width: 200px;
  background: var(--ink);
  border: 1px solid #222;
  border-top: 3px solid #CC0000;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.3s;
}
.cotizar-step:hover { border-color: #CC0000; transform: translateY(-4px); background: #1A0000; }
.cotizar-step-num {
  font-family: 'Black Ops One', sans-serif;
  font-size: 3rem;
  color: rgba(204,0,0,0.12);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.cotizar-step-icon { font-size: 2rem; margin-bottom: 0.8rem; }
.cotizar-step-title {
  font-family: 'Black Ops One', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: #F0EDE8;
  margin-bottom: 0.5rem;
}
.cotizar-step-desc { font-size: 0.8rem; color: #666; line-height: 1.5; }
.cotizar-arrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: #CC0000;
  opacity: 0.5;
}

.quick-cotizador {
  background: var(--ink);
  border: 2px solid #CC0000;
  box-shadow: 8px 8px 0 rgba(136,0,0,0.4);
  padding: 2.5rem;
  max-width: 800px;
  margin: 0 auto;
}
.qc-title {
  font-family: 'Black Ops One', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: #CC0000;
  margin-bottom: 1.5rem;
}
.qc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.qc-group { display: flex; flex-direction: column; gap: 0.4rem; }
.qc-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: #666;
  text-align: left;
}

@media(max-width:900px) {
  .cotizar-flow { flex-direction: column; gap: 0; }
  .cotizar-arrow { transform: rotate(90deg); }
  .cotizar-step { min-width: auto; width: 100%; }
  .qc-grid { grid-template-columns: 1fr; }
}

/* Quick cotizador grid fix */
.quick-cotizador .qc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  text-align: left;
}
@media(max-width:900px){
  .quick-cotizador .qc-grid { grid-template-columns: 1fr; }
}

/* =============================================
   CUSTOM UPLOAD BOX
   ============================================= */
.custom-upload-box {
  border-top: 1px solid rgba(204,0,0,0.2);
  padding-top: 1.5rem;
}

.upload-drop-area {
  border: 2px dashed rgba(204,0,0,0.4);
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: rgba(204,0,0,0.03);
  position: relative;
  overflow: hidden;
}
.upload-drop-area:hover {
  border-color: #CC0000;
  background: rgba(204,0,0,0.07);
}
.upload-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.upload-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: #CC0000;
}
.upload-subtext {
  font-size: 0.75rem;
  color: #555;
  margin-top: 0.3rem;
}
.upload-preview img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  border: 2px solid #CC0000;
}
.upload-preview.has-img .upload-icon,
.upload-preview.has-img .upload-text,
.upload-preview.has-img .upload-subtext { display: none; }

/* =============================================
   COTIZACIONES VISUAL GRID
   ============================================= */
.cotiz-card {
  cursor: pointer;
  transition: all 0.25s;
}
.cotiz-card:hover {
  border-color: rgba(204,0,0,0.5) !important;
  transform: translateY(-3px);
}
.cotiz-select-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(204,0,0,0.7);
  align-items: center;
  justify-content: center;
  z-index: 5;
}
#cotizTamanioBox {
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-10px); }
  to   { opacity:1; transform:translateY(0); }
}
#cotizSizes {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0.4rem;
}

/* =============================================
   REFERENCIA UPLOAD EN RESERVAS
   ============================================= */
.ref-upload-area {
  border: 2px dashed rgba(204,0,0,0.3);
  padding: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  background: rgba(204,0,0,0.02);
  min-height: 80px;
}
.ref-upload-area:hover {
  border-color: var(--blood);
  background: rgba(204,0,0,0.06);
}
.ref-preview-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.ref-upload-area img {
  max-height: 120px;
  max-width: 100%;
  object-fit: contain;
  border: 1px solid var(--blood);
}

/* =============================================
   TÉCNICAS GRID — 15 técnicas responsive
   ============================================= */
.tecnicas-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-top: 3rem;
}

.tecnica-card {
  background: var(--ink);
  padding: 1.5rem 1.2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  cursor: default;
  border-top: 3px solid transparent;
}
.tecnica-card:hover {
  background: #1A0000;
  border-top-color: var(--blood);
  transform: translateY(-4px);
  z-index: 2;
  box-shadow: 0 8px 25px rgba(204,0,0,0.2);
}
.tecnica-num {
  font-family: 'Black Ops One', sans-serif;
  font-size: 3.5rem;
  color: rgba(204,0,0,0.07);
  position: absolute;
  top: -0.8rem;
  right: 0.8rem;
  line-height: 1;
  pointer-events: none;
}
.tecnica-icon {
  font-size: 1.6rem;
  margin-bottom: 0.8rem;
  display: block;
  line-height: 1;
}
.tecnica-name {
  font-family: 'Black Ops One', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.tecnica-desc {
  font-size: 0.75rem;
  color: #666;
  line-height: 1.5;
  margin: 0;
}
.tecnica-card:hover .tecnica-name { color: var(--blood); }
.tecnica-card:hover .tecnica-desc { color: #888; }

/* RESPONSIVE */
@media(max-width:1200px) { .tecnicas-grid { grid-template-columns: repeat(4,1fr); } }
@media(max-width:900px)  { .tecnicas-grid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:600px)  { .tecnicas-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:380px)  { .tecnicas-grid { grid-template-columns: 1fr 1fr; gap: 2px; } }

/* =============================================
   LOGO REAL EN NAV
   ============================================= */
.nav-logo-img {
  height: 52px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(200,164,0,0.3));
  transition: filter 0.3s;
}
.nav-logo-img:hover {
  filter: drop-shadow(0 0 15px rgba(200,164,0,0.6));
}

/* Hero Oni bigger */
.hero-oni-main {
  width: 500px !important;
  max-width: 500px !important;
}

@media(max-width:900px) {
  .nav-logo-img { height: 40px; }
  .hero-oni-main { width: 280px !important; max-width: 280px !important; }
}

/* =============================================
   HERO LOGO FLOTANTE — reemplaza el Oni
   ============================================= */
.hero-logo-container {
  position: relative;
  width: 520px;
  height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-ring {
  position: absolute;
  border-radius: 50%;
  animation: ringPulse 3s ease-in-out infinite;
}
.logo-ring.ring-1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(200,164,0,0.08) 0%, transparent 70%);
  animation-delay: 0s;
}
.logo-ring.ring-2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(200,164,0,0.04) 0%, transparent 70%);
  animation-delay: -1.5s;
}

.hero-logo-float {
  width: 440px;
  max-width: 440px;
  position: relative;
  z-index: 3;
  filter:
    drop-shadow(0 0 30px rgba(200,164,0,0.5))
    drop-shadow(0 0 80px rgba(200,164,0,0.2))
    drop-shadow(0 40px 80px rgba(0,0,0,0.9));
  animation: logoFloat 5s ease-in-out infinite, logoGlow 4s ease-in-out infinite;
}

@keyframes logoFloat {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-18px) rotate(1deg); }
}

@keyframes logoGlow {
  0%,100% {
    filter:
      drop-shadow(0 0 20px rgba(200,164,0,0.4))
      drop-shadow(0 0 60px rgba(200,164,0,0.15))
      drop-shadow(0 40px 80px rgba(0,0,0,0.9));
  }
  50% {
    filter:
      drop-shadow(0 0 50px rgba(200,164,0,0.8))
      drop-shadow(0 0 100px rgba(200,164,0,0.3))
      drop-shadow(0 40px 80px rgba(0,0,0,0.9));
  }
}

/* NAV LOGO bigger */
.nav-logo-img {
  height: 70px !important;
}

@media(max-width:900px) {
  .hero-logo-container { width: 300px; height: 340px; }
  .hero-logo-float { width: 260px; max-width: 260px; }
  .logo-ring.ring-1 { width: 250px; height: 250px; }
  .logo-ring.ring-2 { width: 310px; height: 310px; }
  .nav-logo-img { height: 50px !important; }
}

/* Responsive custom cotiz grid */
@media(max-width:768px) {
  #cotizaciones > div > div:last-child > div {
    grid-template-columns: 1fr !important;
  }
}

/* Hero mask float — blood red glow instead of gold */
.hero-mask-float {
  filter:
    drop-shadow(0 0 30px rgba(204,0,0,0.6))
    drop-shadow(0 0 80px rgba(204,0,0,0.25))
    drop-shadow(0 40px 80px rgba(0,0,0,0.9)) !important;
  animation: maskFloat 5s ease-in-out infinite, maskGlow 4s ease-in-out infinite !important;
  width: 480px !important;
  max-width: 480px !important;
}
@keyframes maskFloat {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}
@keyframes maskGlow {
  0%,100% {
    filter: drop-shadow(0 0 25px rgba(204,0,0,0.5)) drop-shadow(0 0 60px rgba(204,0,0,0.2)) drop-shadow(0 40px 80px rgba(0,0,0,0.9));
  }
  50% {
    filter: drop-shadow(0 0 55px rgba(204,0,0,0.9)) drop-shadow(0 0 120px rgba(204,0,0,0.35)) drop-shadow(0 40px 80px rgba(0,0,0,0.9));
  }
}
@media(max-width:900px) {
  .hero-mask-float { width: 260px !important; max-width: 260px !important; }
}

/* =============================================
   MOBILE COMPLETO — phones & small tablets
   ============================================= */
@media(max-width:768px) {
  /* NAV */
  nav { padding: 0.8rem 1rem; }
  .nav-cta { display: none; }

  /* HERO */
  #hero { min-height: auto; padding-top: 70px; padding-bottom: 2rem; overflow: hidden; }
  .hero-inner { grid-template-columns: 1fr; padding: 0 1.2rem; gap: 0; text-align: center; }
  .hero-content { order: 2; }
  .hero-masks { order: 1; height: 240px; margin-bottom: 0.5rem; }
  .hero-mask-container { width: 240px !important; height: 240px !important; }
  .hero-oni-main, .hero-mask-float { width: 200px !important; max-width: 200px !important; }
  .ring-1 { width: 160px !important; height: 160px !important; }
  .ring-2 { width: 210px !important; height: 210px !important; }
  .ring-3 { width: 240px !important; height: 240px !important; }
  .hero-btns { flex-direction: column; align-items: center; gap: 0.7rem; }
  .hero-btns .btn-blood, .hero-btns .btn-ghost { width: 100%; max-width: 280px; text-align: center; justify-content: center; }
  .hero-desc { font-size: 0.88rem; margin: 0.8rem auto; }
  .hero-bg-text { display: none; }

  /* DISEÑOS */
  #disenos { padding: 3rem 1rem !important; }
  .disenos-filtros { gap: 0.4rem; padding: 0 0 1rem; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  .dfiltro { font-size: 0.72rem; padding: 0.4rem 0.8rem; white-space: nowrap; }
  .disenos-grid { grid-template-columns: 1fr 1fr !important; gap: 0.6rem !important; }

  /* ARTISTA */
  #artista .artista-inner { padding: 2rem 1.2rem; gap: 1.5rem; }
  .artista-frame { width: 220px !important; height: 270px !important; margin: 0 auto; }
  .artista-stats { gap: 1.5rem; justify-content: center; }

  /* ESTILOS */
  #estilos { padding: 2.5rem 0; }
  #estilos > div { padding: 0 1rem; }
  #estilos > div > div[style*="grid"] { grid-template-columns: 1fr 1fr !important; }

  /* RESERVAR */
  .booking-wrap { padding: 0 1rem; }
  .booking-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .calendar-box { overflow-x: auto; }

  /* COTIZACIÓN */
  .cotiz-split { flex-direction: column !important; }

  /* CONTACTO */
  #contacto .contact-inner { padding: 0 1rem; }
  .clines { gap: 0.8rem; }

  /* FOOTER */
  .footer-inner { grid-template-columns: 1fr !important; gap: 2rem; padding: 2rem 1.2rem; }
  .footer-bottom { flex-direction: column; gap: 0.4rem; text-align: center; padding: 1rem; font-size: 0.7rem; }
  .footer-sep { display: none; }
}

@media(max-width:420px) {
  .hero-name { font-size: 3rem !important; }
  .hero-oni-main, .hero-mask-float { width: 170px !important; max-width: 170px !important; }
  .hero-masks { height: 200px; }
  .hero-mask-container { width: 200px !important; height: 200px !important; }
  .ring-1 { width: 140px !important; height: 140px !important; }
  .ring-2 { width: 180px !important; height: 180px !important; }
  .ring-3 { width: 200px !important; height: 200px !important; }
  .disenos-grid { grid-template-columns: 1fr !important; }
  #estilos > div > div[style*="grid"] { grid-template-columns: 1fr !important; }
  .fsoc-btn { padding: 0.4rem 0.7rem; font-size: 0.7rem; }
}