/* =====================================================================
   OTORONGO'S GRILL — styles.css
   Diseño original "Dark Luxury Parrillero" — premium, cinemático, 2026
   ---------------------------------------------------------------------
   Paleta: negro profundo · rojo brasa · dorado ámbar
   Tipografía: Playfair Display (titulares) · Oswald (uppercase) · Open Sans (cuerpo)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS / VARIABLES
   --------------------------------------------------------------------- */
:root {
  /* Negros estratificados */
  --bg-0:        #08070a;   /* fondo base, casi obsidian */
  --bg-1:        #0d0c10;   /* secciones primarias */
  --bg-2:        #141318;   /* secciones alternas */
  --bg-3:        #1b1a20;   /* cards */
  --bg-4:        #232128;   /* hover surfaces */
  --line:        rgba(255,255,255,.06);
  --line-strong: rgba(255,255,255,.12);

  /* Rojo brasa (no el rojo plano del template — saturado pero profundo) */
  --ember:       #b8341f;   /* rojo brasa principal */
  --ember-deep:  #8a1f10;   /* rojo profundo */
  --ember-glow:  rgba(184,52,31,.45);
  --rojo-footer: #4a0a06;   /* footer oscuro como sangre coagulada */
  --rojo-soft:   #2a0807;

  /* Dorado ámbar (más cálido que el oro plano de GoodMeat) */
  --gold:        #d4a857;
  --clr-gold:    #d4a857;  /* FIX v10: alias — se usaba en 8 reglas sin estar definida */
  --gold-soft:   #b8923f;
  --gold-line:   rgba(212,168,87,.32);
  --gold-faint:  rgba(212,168,87,.14);

  /* Texto */
  --ink:         #f4ede0;   /* blanco cálido / hueso */
  --ink-muted:   #9a948a;
  --ink-dim:     #6b665e;

  /* Tipografía */
  --ft-display:  'Bebas Neue', 'Oswald', sans-serif;
  --ft-display-italic: 'Bebas Neue', sans-serif;
  --ft-uppercase:'Oswald', 'Helvetica Neue', sans-serif;
  --ft-body:     'Open Sans', system-ui, sans-serif;

  /* Motion */
  --ease:        cubic-bezier(.22,1,.36,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-soft:   cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------------------
   2. RESET + BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--ft-body);
  background: var(--bg-0);
  color: var(--ink);
  overflow-x: clip;
  line-height: 1.65;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--ember); color: var(--ink); }

/* Skip link — invisible hasta que recibe foco con teclado (accesibilidad) */
.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 3000;
  padding: 12px 20px;
  background: var(--gold);
  color: #1a0a00;
  font-family: var(--ft-uppercase);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 0 0 8px 8px;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 0; outline: 2px solid var(--ink); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) { .container { padding: 0 22px; } }

/* (3. cursor personalizado removido) */

/* ---------------------------------------------------------------------
   4. SCROLL PROGRESS BAR
   --------------------------------------------------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  width: 0%; height: 2px;
  background: linear-gradient(90deg, var(--ember) 0%, var(--gold) 100%);
  z-index: 9000;
  box-shadow: 0 0 12px var(--gold-line);
  will-change: width;
}

/* ---------------------------------------------------------------------
   5. TIPOGRAFÍA
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--ft-display);
  font-weight: 400;
  font-style: normal !important;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 7.5vw, 7rem); font-weight: 400; }
h2 { font-size: clamp(2.2rem, 4.5vw, 4rem); letter-spacing: 0.06em; }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }

p { text-wrap: pretty; }

.label {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ft-uppercase);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.label::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.section-desc {
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.8;
  max-width: 620px;
  margin-bottom: 60px;
}

/* ---------------------------------------------------------------------
   6. BOTONES
   --------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--ft-uppercase);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 17px 42px;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
  will-change: transform;
  isolation: isolate;
}

.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,.18) 50%,
    transparent 70%);
  transform: translateX(-110%);
  transition: transform .7s var(--ease);
  z-index: -1;
}
.btn:hover::before { transform: translateX(110%); }

.btn-primary {
  background: var(--ember);
  color: var(--ink);
  border-color: var(--ember);
  box-shadow: 0 8px 32px -8px var(--ember-glow);
}
.btn-primary:hover {
  background: var(--ember-deep);
  border-color: var(--ember-deep);
  box-shadow: 0 12px 40px -8px var(--ember-glow);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--gold-line);
}
.btn-outline:hover {
  background: var(--gold);
  color: var(--bg-0);
  border-color: var(--gold);
}

.btn-full { width: 100%; }

.btn-nav {
  background: linear-gradient(135deg, #7a5810 0%, #c9a84c 45%, #d4b85a 55%, #8b6914 100%) !important;
  color: #0d0c10 !important;
  padding: 11px 24px !important;
  margin-left: 14px;
  font-family: var(--ft-uppercase) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(212,168,87,.6) !important;
  border-radius: 2px !important;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 18px rgba(212,168,87,.25), inset 0 1px 0 rgba(255,255,255,.15);
  transition: filter .3s, box-shadow .3s, transform .3s !important;
}
.btn-nav::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .7s var(--ease);
}
.btn-nav:hover::after { transform: translateX(110%); }
.btn-nav:hover {
  filter: brightness(1.12) !important;
  box-shadow: 0 6px 24px rgba(212,168,87,.4), inset 0 1px 0 rgba(255,255,255,.2) !important;
  transform: translateY(-1px);
}

.account-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  margin-left: 12px;
  border: 1px solid rgba(212,168,87,.45);
  background: rgba(0,0,0,.26);
  color: var(--gold);
  border-radius: 999px;
  font-family: var(--ft-uppercase);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.account-trigger.is-logged {
  background: rgba(212,168,87,.12);
  border-color: rgba(212,168,87,.75);
  color: #fff;
}
.account-trigger-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,168,87,.16);
  color: var(--gold);
  font-size: .68rem;
  line-height: 1;
}
.account-trigger-avatar .avatar-mark {
  width: 22px;
  height: 22px;
  font-size: .72rem;
  box-shadow: none;
}
.account-trigger-avatar .trident-shape {
  width: 11px;
  height: 12px;
}
.account-trigger:hover {
  color: #fff;
  border-color: var(--gold);
  background: rgba(212,168,87,.12);
}

/* ---------------------------------------------------------------------
   7. ANIMATION UTILS (controladas por main.js via IntersectionObserver)
   --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: transform, opacity;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-l {
  opacity: 0; transform: translateX(-60px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: transform, opacity;
}
.reveal-l.is-visible { opacity: 1; transform: translateX(0); }

.reveal-r {
  opacity: 0; transform: translateX(60px);
  transition: opacity 1s var(--ease) .12s, transform 1s var(--ease) .12s;
  will-change: transform, opacity;
}
.reveal-r.is-visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0; transform: scale(.92);
  transition: opacity .8s var(--ease), transform .8s var(--ease-out);
  will-change: transform, opacity;
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

.reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: transform, opacity;
}
.reveal-word.is-visible { opacity: 1; transform: translateY(0); }

@keyframes shake {
  10%,90% { transform: translateX(-2px); }
  20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-6px); }
  40%,60% { transform: translateX(6px); }
}
.shake { animation: shake .5s both; }

/* ---------------------------------------------------------------------
   8. NAVBAR
   --------------------------------------------------------------------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(8,7,10,.96) 0%, rgba(13,12,16,.92) 100%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid rgba(212,168,87,.55);
  border-bottom: 1px solid rgba(212,168,87,.35);
  box-shadow:
    0 1px 0 rgba(212,168,87,.15),
    0 8px 32px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(212,168,87,.08);
  transition: border-color .4s var(--ease), box-shadow .4s;
  will-change: background-color;
}
/* Textura sutil con pseudo */
.navbar::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0;
  opacity: .6;
}
.navbar.is-scrolled {
  background: linear-gradient(180deg, rgba(60,8,4,.97) 0%, rgba(74,10,6,.95) 100%);
  border-top-color: rgba(212,168,87,.7);
  border-bottom-color: rgba(212,168,87,.45);
  box-shadow:
    0 1px 0 rgba(212,168,87,.25),
    0 0 40px rgba(212,168,87,.06),
    0 16px 48px rgba(0,0,0,.65);
}
.nav-container {
  display: flex; align-items: center; justify-content: space-between;
  height: 80px;
  position: relative; z-index: 1;
  transition: height .4s var(--ease);
}
.navbar.is-scrolled .nav-container { height: 66px; }

.nav-logo img {
  height: 80px; width: auto; object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
  transition: transform .4s var(--ease), filter .4s;
}
.nav-logo:hover img {
  transform: scale(1.06);
  filter: drop-shadow(0 2px 16px rgba(212,168,87,.5)) brightness(1.1);
}


.nav-links {
  display: flex; align-items: center; gap: 4px;
}
.nav-links a {
  position: relative;
  font-family: var(--ft-uppercase);
  font-size: .76rem; font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  padding: 10px 18px;
  transition: color .3s;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: 4px; left: 50%;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .35s var(--ease), left .35s var(--ease);
}
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { width: 70%; left: 15%; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none;
  cursor: pointer; padding: 8px;
  z-index: 1001;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 2px;
  background: var(--ink);
  transition: transform .3s, opacity .3s;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   9. HERO
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: clip;
  background: var(--bg-0);
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../images/fondos/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(.55) contrast(1.1) saturate(.85);
  transform: scale(1.08);
  will-change: transform;
}

/* Grid lines animadas */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(212,168,87,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,87,.05) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: gridDrift 40s linear infinite;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
@keyframes gridDrift {
  from { background-position: 0 0; }
  to   { background-position: 80px 80px; }
}

.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse at 50% 65%, rgba(184,52,31,.22) 0%, transparent 55%),
    linear-gradient(180deg, rgba(8,7,10,.85) 0%, rgba(8,7,10,.55) 50%, rgba(8,7,10,.95) 100%);
  pointer-events: none;
}
.hero-overlay::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 760px; height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ember-glow) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  animation: emberPulse 4.5s ease-in-out infinite;
  filter: blur(20px);
  will-change: transform, opacity;
}
@keyframes emberPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(.9); opacity: .55; }
  50%      { transform: translate(-50%,-50%) scale(1.18); opacity: 1; }
}

.hero-content {
  position: relative; z-index: 5;
  text-align: center;
  padding: 120px 24px 40px;
  width: 100%;
  max-width: 1100px;
  flex-shrink: 0;
  overflow: visible;
}

.hero-content h1 {
  margin-bottom: 28px;
  text-shadow: 0 4px 40px rgba(0,0,0,.85);
  letter-spacing: -0.02em;
}
.hero-content h1 span {
  display: block;
  color: var(--gold);
  font-family: var(--ft-display);
  font-style: italic;
  font-weight: 400;
  font-size: .82em;
  margin-top: .15em;
  letter-spacing: 0;
}

.hero-content p {
  font-size: 1.15rem;
  color: var(--ink-muted);
  letter-spacing: .04em;
  margin-bottom: 50px;
  max-width: 520px;
  margin-left: auto; margin-right: auto;
}

.hero-scroll {
  position: absolute;
  bottom: 38px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 26px; height: 44px;
  border: 1.5px solid var(--gold-line);
  border-radius: 14px;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 8px;
  color: transparent;
}
.hero-scroll::after {
  content: '';
  width: 4px; height: 8px;
  background: var(--gold);
  border-radius: 2px;
  animation: scrollBob 2s var(--ease) infinite;
  will-change: transform, opacity;
}
.hero-scroll span { display: none; } /* oculta el ↓ original */
@keyframes scrollBob {
  0%   { transform: translateY(0); opacity: 0; }
  35%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* Partículas hero */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  z-index: 3;
  filter: blur(.4px);
  box-shadow: 0 0 6px var(--gold-line);
  will-change: transform, opacity;
}

/* ---------------------------------------------------------------------
   10. SECTION HEADER (compartido)
   --------------------------------------------------------------------- */
section { position: relative; }

.section-head {
  margin-bottom: 56px;
}

/* Divisor dorado entre secciones */
.section-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 30%, var(--gold-line) 70%, transparent);
}

/* ---------------------------------------------------------------------
   11. PRESENTACIÓN
   --------------------------------------------------------------------- */
.presentacion {
  background: var(--bg-1);
  padding: 140px 0;
  position: relative;
}
.presentacion::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.presentacion-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 100px;
  align-items: center;
}
.presentacion-img {
  position: relative;
  aspect-ratio: 4/5;
}
.presentacion-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 2px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  position: relative; z-index: 1;
  filter: contrast(1.05);
}
/* Marco dorado desplazado */
.presentacion-img::before {
  content: '';
  position: absolute;
  inset: 24px -24px -24px 24px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  z-index: 0;
  transition: transform .8s var(--ease);
}
.presentacion-img:hover::before {
  transform: translate(-8px, -8px);
}
/* Esquinas decorativas doradas adicionales */
.presentacion-img::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}

.presentacion-texto h2 {
  margin-bottom: 28px;
  font-style: normal;
  font-weight: 400;
}
.presentacion-texto h2 strong,
.presentacion-texto h2 b {
  font-style: normal;
  font-weight: 900;
  color: var(--gold);
}
.presentacion-texto p {
  color: var(--ink-muted);
  line-height: 1.9;
  margin-bottom: 18px;
  font-size: 1rem;
}
.presentacion-texto p strong { color: var(--ink); font-weight: 600; }
.presentacion-texto .btn { margin-top: 18px; }

/* ---------------------------------------------------------------------
   12. PRODUCTOS
   --------------------------------------------------------------------- */
.productos {
  background: var(--bg-2);
  padding: 140px 0;
  position: relative;
}
.productos > .container > h2 { margin-bottom: 14px; }

.productos-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 64px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}
.tab-btn {
  position: relative;
  font-family: var(--ft-uppercase);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 16px 28px;
  background: transparent;
  color: var(--ink-dim);
  border: none;
  cursor: pointer;
  transition: color .35s;
  white-space: nowrap;
}
.tab-btn::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .4s var(--ease);
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.is-active { color: var(--gold); }
.tab-btn.is-active::after { transform: scaleX(1); }

.tab-panel {
  display: none;
  animation: tabFade .6s var(--ease) both;
}
.tab-panel.is-active { display: block; }
@keyframes tabFade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.productos-grid--2 {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  max-width: 900px;
  margin: 0 auto;
}

.producto-card {
  position: relative;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
  isolation: isolate;
}
.producto-card::before {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid transparent;
  background: linear-gradient(135deg, transparent, var(--gold) 50%, transparent) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
  z-index: 2;
}
.producto-card:hover {
  border-color: var(--gold-line);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
}
.producto-card:hover::before { opacity: 1; }

.producto-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-4);
}
.producto-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(8,7,10,.6) 100%);
  pointer-events: none;
  z-index: 1;
}
.producto-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
  will-change: transform;
}
.producto-card:hover .producto-img img { transform: scale(1.08); }

.producto-body {
  padding: 28px 26px 30px;
}
.producto-body h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: var(--ink);
  transition: color .3s;
}
.producto-card:hover .producto-body h3 { color: var(--gold); }
.producto-body p {
  font-size: .9rem;
  color: var(--ink-muted);
  line-height: 1.7;
}

/* Producto destacado (cilindro / parrilla) */
.producto-destacado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.producto-destacado-img {
  position: relative;
  aspect-ratio: 4/5;
}
.producto-destacado-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 30px 70px -15px rgba(0,0,0,.7);
  position: relative; z-index: 1;
}
.producto-destacado-img::before {
  content: '';
  position: absolute;
  inset: 28px -28px -28px 28px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  z-index: 0;
}
.producto-destacado-texto h3 {
  font-family: var(--ft-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.producto-destacado-texto p {
  color: var(--ink-muted);
  line-height: 1.9;
  margin-bottom: 16px;
  font-size: 1rem;
}
.producto-destacado-texto .btn { margin-top: 16px; }

/* ---------------------------------------------------------------------
   13. SERVICIOS
   --------------------------------------------------------------------- */
.servicios {
  background: var(--bg-1);
  padding: 140px 0;
}
.servicios > .container > h2 { margin-bottom: 14px; }

.servicios-principales {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.servicio-principal {
  position: relative;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
  will-change: transform;
}
.servicio-principal:hover {
  border-color: var(--gold-line);
}

.servicio-principal-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.servicio-principal-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
  will-change: transform;
}
.servicio-principal:hover .servicio-principal-img img { transform: scale(1.06); }
.servicio-principal-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(8,7,10,.85) 100%);
  pointer-events: none;
}

.servicio-principal-body { padding: 40px 36px 44px; }
.servicio-principal-body .label { margin-bottom: 14px; }
.servicio-principal-body h3 {
  font-size: 1.8rem;
  margin-bottom: 16px;
}
.servicio-principal-body p {
  color: var(--ink-muted);
  line-height: 1.85;
  margin-bottom: 24px;
  font-size: .95rem;
}

.servicio-lista {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.servicio-lista li {
  display: flex; align-items: center; gap: 14px;
  font-size: .92rem;
  color: var(--ink);
  font-family: var(--ft-uppercase);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8rem;
}
.servicio-lista li::before {
  content: '';
  width: 8px; height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-faint);
}

/* ---------------------------------------------------------------------
   14. HISTORIA
   --------------------------------------------------------------------- */
.historia {
  background: var(--bg-2);
  padding: 160px 0;
  position: relative;
  overflow: hidden;
}
.historia::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent);
  transform: translateX(-50%);
  opacity: .5;
}
.historia::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 30%, var(--gold-faint), transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(184,52,31,.08), transparent 50%);
  pointer-events: none;
}
.historia-inner {
  position: relative; z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.label-historia {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.label-historia::before,
.label-historia::after {
  content: '';
  width: 32px; height: 1px;
  background: var(--gold);
}
.historia-titulo {
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  font-style: italic;
  font-weight: 400;
  margin-bottom: 56px;
  letter-spacing: -0.015em;
}
.historia-texto {
  display: flex; flex-direction: column;
  gap: 24px;
  text-align: left;
  max-width: 680px;
  margin: 0 auto;
}
.historia-texto p {
  color: var(--ink-muted);
  line-height: 1.95;
  font-size: 1.05rem;
}
.historia-texto p::first-letter {
  /* Sutil énfasis en primera letra del primer párrafo solo */
}
.historia-texto p:first-of-type::first-letter {
  font-family: var(--ft-display);
  font-size: 3.4em;
  float: left;
  line-height: .9;
  margin: .05em .12em 0 0;
  color: var(--gold);
  font-weight: 700;
}
.historia-texto strong { color: var(--ink); font-weight: 600; }
.historia-firma {
  font-family: var(--ft-display);
  font-style: italic;
  color: var(--gold);
  font-size: 1.2rem;
  margin-top: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--gold-line);
  text-align: center;
}

/* ---------------------------------------------------------------------
   15. EXPERIENCIA
   --------------------------------------------------------------------- */
.experiencia {
  background: var(--bg-1);
  padding: 140px 0;
}
.experiencia-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 100px;
  align-items: center;
}
.experiencia-img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.experiencia-foto {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  position: relative; z-index: 1;
  filter: contrast(1.08) saturate(1.05);
  transition: transform 1.4s var(--ease);
  will-change: transform;
}
.experiencia-img::before {
  content: '';
  position: absolute;
  inset: 28px -28px -28px 28px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  z-index: 0;
}
.experiencia-img:hover .experiencia-foto { transform: scale(1.04); }

.experiencia-texto h2 {
  margin-bottom: 28px;
  font-style: italic;
  font-weight: 400;
}
.experiencia-texto p {
  color: var(--ink-muted);
  line-height: 1.9;
  margin-bottom: 18px;
  font-size: 1rem;
}
.experiencia-cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 36px;
}

/* ---------------------------------------------------------------------
   16. GALERÍA
   --------------------------------------------------------------------- */
.galeria {
  background: var(--bg-0);
  padding: 140px 0;
}
.galeria > .container > h2 { margin-bottom: 56px; }
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 12px;
}
.galeria-item {
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .8s var(--ease), filter .8s;
  will-change: transform, filter;
  isolation: isolate;
}
.galeria-item::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 100%);
  transition: background .5s;
  z-index: 1;
}
.galeria-item::after {
  content: '+';
  position: absolute; top: 50%; left: 50%;
  width: 56px; height: 56px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--ft-display);
  color: var(--gold);
  font-size: 1.5rem;
  font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  background: rgba(8,7,10,.4);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.galeria-item:hover { filter: brightness(1.1); transform: scale(1.01); }
.galeria-item:hover::before { background: linear-gradient(180deg, rgba(184,52,31,.15), rgba(0,0,0,.5)); }
.galeria-item:hover::after  { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.galeria-item--large { grid-column: span 2; grid-row: span 2; }
.galeria-item--tall  { grid-row: span 2; }
.galeria-item--wide  { grid-column: span 2; }

/* ---------------------------------------------------------------------
   17. FRASE IMPACTO
   --------------------------------------------------------------------- */
.frase-impacto {
  position: relative;
  padding: 160px 0;
  text-align: center;
  overflow: hidden;
  background: var(--bg-0);
  isolation: isolate;
}
.frase-impacto::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../images/fondos/fondo-2.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: brightness(.3) contrast(1.2) saturate(.7);
  transform: scale(1.1);
  will-change: transform;
}
.frase-impacto::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(74,10,6,.5) 0%, rgba(8,7,10,.92) 75%);
}
.fondo-blur::before { /* Compatibilidad con clase del HTML */ }
.fondo-blur--impacto { /* Compatibilidad con clase del HTML */ }

.frase-impacto > .container { position: relative; z-index: 1; }
.frase-impacto blockquote {
  position: relative;
  font-family: var(--ft-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
  letter-spacing: -0.01em;
}
.frase-impacto blockquote em {
  color: var(--gold);
  font-style: italic;
}
.frase-impacto blockquote::before {
  content: '\201C';
  display: block;
  font-family: var(--ft-display);
  font-size: 9rem;
  line-height: .5;
  color: var(--gold);
  opacity: .3;
  margin-bottom: 36px;
  font-style: normal;
}

/* ---------------------------------------------------------------------
   18. EQUIPO
   --------------------------------------------------------------------- */
.equipo {
  background: var(--bg-1);
  padding: 140px 0;
}
.equipo > .container > h2 { margin-bottom: 64px; }
.equipo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
.equipo-card {
  position: relative;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: visible;
  text-align: center;
  padding-bottom: 36px;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
  will-change: transform;
  display: flex;
  flex-direction: column;
}

.equipo-card .equipo-foto {
  overflow: hidden;
  border-radius: 2px 2px 0 0;
}

.equipo-card p {
  flex: 1;
}
.equipo-card:hover {
  border-color: var(--gold-line);
}

.equipo-foto {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  margin-bottom: 28px;
}
.equipo-foto::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(8,7,10,.7) 100%);
  z-index: 1;
}
.equipo-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .9s var(--ease);
  filter: grayscale(.15);
  will-change: transform, filter;
}
.equipo-card:hover .equipo-foto img {
  transform: scale(1.07);
  filter: grayscale(0);
}

.equipo-card h3 {
  font-size: 1.35rem;
  margin-bottom: 6px;
  padding: 0 24px;
  color: var(--ink);
}
.equipo-rol {
  display: inline-block;
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  padding: 0 24px;
  position: relative;
}
.equipo-card p {
  font-size: .9rem;
  color: var(--ink-muted);
  line-height: 1.75;
  padding: 0 32px;
}

/* ---------------------------------------------------------------------
   19. CTA INTERMEDIO
   --------------------------------------------------------------------- */
.cta-intermedio {
  position: relative;
  background: var(--rojo-soft);
  padding: 100px 0;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}
.cta-intermedio::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(184,52,31,.4), transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(212,168,87,.12), transparent 50%);
  animation: ctaGlow 6s ease-in-out infinite alternate;
  will-change: opacity;
}
@keyframes ctaGlow {
  from { opacity: .6; }
  to   { opacity: 1; }
}
.cta-intermedio > .container { position: relative; z-index: 1; }
.cta-intermedio h2 {
  margin-bottom: 18px;
  font-size: clamp(2rem, 4vw, 3rem);
  font-style: italic;
  font-weight: 400;
}
.cta-intermedio p {
  color: var(--ink-muted);
  margin-bottom: 36px;
  font-size: 1rem;
  max-width: 540px; margin-left: auto; margin-right: auto;
  margin-bottom: 40px;
}

/* ---------------------------------------------------------------------
   20. TESTIMONIO (autoridad con badge)
   --------------------------------------------------------------------- */
.testimonio {
  background: var(--bg-0);
  padding: 130px 0;
  text-align: center;
  position: relative;
}
.testimonio-inner { max-width: 760px; margin: 0 auto; }
.testimonio-badge {
  display: inline-block;
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bg-0);
  background: var(--gold);
  padding: 9px 24px;
  border-radius: 2px;
  margin-bottom: 32px;
  position: relative;
}
.testimonio-badge::before,
.testimonio-badge::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px; height: 1px;
  background: var(--gold-line);
  transform: translateY(-50%);
}
.testimonio-badge::before { right: calc(100% + 20px); }
.testimonio-badge::after  { left:  calc(100% + 20px); }
.testimonio-inner h2 {
  margin-bottom: 20px;
  font-style: italic;
  font-weight: 400;
}
.testimonio-desc {
  color: var(--ink-muted);
  line-height: 1.85;
  font-size: 1rem;
  max-width: 540px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   21. TESTIMONIOS (cards con backdrop-blur)
   --------------------------------------------------------------------- */
.testimonios {
  position: relative;
  padding: 140px 0;
  overflow: hidden;
  background: var(--bg-1);
  isolation: isolate;
}
.testimonios::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../images/fondos/fondo-3.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(.35) saturate(.7);
}
.testimonios::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(74,10,6,.92) 0%, rgba(13,12,16,.9) 100%),
    radial-gradient(circle at 30% 30%, rgba(212,168,87,.06) 1px, transparent 1px);
  background-size: auto, 24px 24px;
}
.testimonios .container { position: relative; z-index: 1; }
.testimonios > .container > .label { margin-bottom: 18px; }
.testimonios > .container > h2 {
  margin-bottom: 64px;
  font-style: italic;
  font-weight: 400;
}
.testimonios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
.testimonio-item {
  position: relative;
  background: rgba(13,12,16,.55);
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  padding: 40px 36px 36px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: border-color .5s, transform .5s var(--ease), background .5s;
  will-change: transform;
}
.testimonio-item::before {
  content: '\201C';
  position: absolute;
  top: 8px; left: 24px;
  font-family: var(--ft-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--gold);
  opacity: .35;
}
.testimonio-item:hover {
  border-color: var(--gold);
  background: rgba(13,12,16,.7);
}
.testimonio-item p {
  position: relative;
  color: rgba(244,237,224,.92);
  font-style: italic;
  line-height: 1.85;
  margin-bottom: 22px;
  font-size: 1rem;
  font-family: var(--ft-display);
}
.testimonio-item span {
  display: block;
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 18px;
  border-top: 1px solid var(--gold-faint);
}

/* ---------------------------------------------------------------------
   22. CONTACTO
   --------------------------------------------------------------------- */
.contacto {
  background: var(--bg-2);
  padding: 140px 0;
}
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 90px;
  align-items: start;
}
.contacto-info h2 {
  margin-bottom: 18px;
  font-style: italic;
  font-weight: 400;
}
.contacto-info > p {
  color: var(--ink-muted);
  line-height: 1.85;
  margin-bottom: 44px;
  font-size: 1rem;
}
.contacto-datos {
  display: flex; flex-direction: column;
  gap: 26px;
  margin-bottom: 40px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dato {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.dato-icon {
  font-size: 1.1rem;
  width: 40px; height: 40px;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color .3s, background .3s;
}
.dato:hover .dato-icon {
  border-color: var(--gold);
  background: var(--gold-faint);
}
.dato strong {
  display: block;
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.dato p, .dato a {
  font-size: .95rem;
  color: var(--ink);
  transition: color .3s;
}
.dato a:hover { color: var(--gold); }

.redes { display: flex; gap: 8px; flex-wrap: wrap; }
.red {
  font-family: var(--ft-uppercase);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  transition: border-color .3s, color .3s, background .3s;
  color: var(--ink-muted);
}
.red:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-faint);
}

/* Form */
.contacto-form {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 36px 36px 32px;
  display: flex; flex-direction: column;
  gap: 14px;
  position: relative;
}
.contacto-form::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--ember), var(--gold), var(--ember));
}
/* 2 columnas para pares de campos */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-family: var(--ft-uppercase);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--ft-body);
  font-size: .9rem;
  padding: 11px 16px;
  outline: none;
  transition: border-color .3s, background .3s;
  -webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--ink-dim); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.05);
}
.form-group select option { background: var(--bg-3); color: var(--ink); }
.form-group textarea { resize: vertical; min-height: 90px; }
.form-error {
  font-size: .72rem;
  color: #e87060;
  font-family: var(--ft-uppercase);
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 16px;
}

/* ---------------------------------------------------------------------
   23. FOOTER
   --------------------------------------------------------------------- */
.footer {
  background: var(--rojo-footer);
  position: relative;
}
.footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 56px;
  padding: 90px 40px 60px;
  max-width: 1280px;
  margin: 0 auto;
}
.footer-logo {
  height: 64px; width: auto;
  object-fit: contain;
  margin-bottom: 22px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
.footer-marca > p {
  font-size: .9rem;
  color: rgba(244,237,224,.65);
  line-height: 1.8;
  max-width: 320px;
}

.footer-col h4 {
  font-family: var(--ft-uppercase);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 26px;
  padding-bottom: 14px;
  position: relative;
}
.footer-col h4::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
}

.footer-col ul {
  display: flex; flex-direction: column;
  gap: 14px;
}
.footer-col ul li {
  display: flex; align-items: center; gap: 12px;
}
.footer-col ul li::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--gold);
  flex-shrink: 0;
  transition: width .3s ease, background .3s ease;
}
.footer-col ul li:hover::before {
  width: 22px;
  background: var(--ink);
}
.footer-col ul li a {
  font-size: .9rem;
  color: rgba(244,237,224,.72);
  transition: color .3s, letter-spacing .3s;
  display: inline-block;
  letter-spacing: 0;
}
.footer-col ul li a:hover {
  color: var(--ink);
  letter-spacing: .03em;
}
.footer-col > p {
  font-size: .9rem;
  color: rgba(244,237,224,.65);
  margin-bottom: 16px;
  line-height: 1.7;
}

.newsletter-form {
  display: flex; flex-direction: column;
  gap: 12px;
}
.newsletter-form input {
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(212,168,87,.25);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--ft-body);
  font-size: .92rem;
  padding: 14px 16px;
  outline: none;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.newsletter-form input::placeholder { color: rgba(244,237,224,.4); }
.newsletter-form input:focus {
  border-color: var(--gold);
  background: rgba(0,0,0,.5);
  box-shadow: 0 0 0 3px rgba(212,168,87,.12);
}
.newsletter-form .btn {
  padding: 13px 22px;
  font-size: .74rem;
}

.news-modal {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: none;
}
.news-modal.is-open { display: block; }
.news-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
}
.news-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: #171216;
  border: 1px solid rgba(212,168,87,.38);
  border-radius: 10px;
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  padding: 30px;
}
.news-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(212,168,87,.35);
  background: rgba(0,0,0,.24);
  color: var(--ink);
  font-size: 24px;
  cursor: pointer;
}
.news-kicker {
  display: block;
  color: var(--gold);
  font-family: var(--ft-uppercase);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.news-head h2 {
  color: #fff;
  margin-bottom: 10px;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  font-family: var(--ft-display);
  letter-spacing: .055em;
}
.news-head p {
  color: rgba(244,237,224,.72);
  line-height: 1.55;
  margin-bottom: 22px;
}
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.news-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--gold);
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.news-form input {
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(212,168,87,.28);
  border-radius: 4px;
  color: var(--ink);
  font: 400 .95rem var(--ft-body);
  padding: 13px 14px;
  outline: none;
}
.news-form input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,168,87,.12);
}
.news-check {
  flex-direction: row !important;
  align-items: flex-start;
  color: rgba(244,237,224,.78) !important;
  font: 400 .88rem var(--ft-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 14px;
}
.news-check input { width: auto; margin-top: 3px; }
.news-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
}
.news-actions .btn { flex: 1; }
.news-youtube {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(212,168,87,.45);
  color: var(--gold);
  text-decoration: none;
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.account-modal {
  position: fixed;
  inset: 0;
  z-index: 10090;
  display: none;
}
.account-modal.is-open { display: block; }
.account-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.74);
  backdrop-filter: blur(8px);
}
.account-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(700px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: #171216;
  border: 1px solid rgba(188,60,45,.45);
  border-radius: 10px;
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  padding: 30px;
}
.account-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(212,168,87,.35);
  background: rgba(0,0,0,.24);
  color: var(--ink);
  font-size: 24px;
  cursor: pointer;
}
.account-head h2 {
  color: #fff;
  margin-bottom: 10px;
  font-size: clamp(1.85rem, 2.8vw, 2.55rem);
  font-family: var(--ft-display);
  letter-spacing: .025em;
  line-height: 1.04;
}
.account-head p,
.account-empty {
  color: rgba(244,237,224,.72);
  line-height: 1.55;
  margin-bottom: 18px;
}
.account-tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0 22px;
  border-bottom: 1px solid rgba(244,237,224,.12);
  padding-bottom: 10px;
}
.account-tab {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(244,237,224,.12);
  color: rgba(244,237,224,.72);
  border-radius: 4px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.account-tab.is-active {
  color: var(--gold);
  border-color: rgba(212,168,87,.45);
  background: rgba(212,168,87,.08);
}
.account-status {
  border: 1px solid rgba(212,168,87,.24);
  background: rgba(212,168,87,.08);
  color: rgba(244,237,224,.86);
  border-radius: 6px;
  padding: 11px 13px;
  margin: -8px 0 18px;
  font-size: .9rem;
}
.account-status.is-error {
  border-color: rgba(192,57,43,.48);
  background: rgba(192,57,43,.16);
}
.account-panel { display: none; }
.account-panel.is-active { display: block; }
.account-login-showcase {
  border: 1px solid rgba(212,168,87,.22);
  background:
    linear-gradient(180deg, rgba(10,8,10,.22), rgba(10,8,10,.86)),
    url('../images/fondos/hero-bg.jpg') center/cover;
  border-radius: 12px;
  min-height: 210px;
  margin-bottom: 20px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.28);
}
.account-login-logo {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 1px solid rgba(212,168,87,.42);
  background: rgba(0,0,0,.45);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  box-shadow: 0 16px 38px rgba(0,0,0,.42);
}
.account-login-logo img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}
.account-login-showcase strong {
  color: #fff;
  font: 700 1.18rem var(--ft-display);
  letter-spacing: .03em;
  line-height: 1.1;
}
.account-login-showcase span {
  color: rgba(244,237,224,.72);
  font-size: .9rem;
  line-height: 1.45;
  max-width: 360px;
  margin-top: 7px;
}
.account-login-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: rgba(244,237,224,.5);
  font: 700 .72rem var(--ft-uppercase);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 16px 0;
}
.account-login-divider::before,
.account-login-divider::after {
  content: "";
  height: 1px;
  background: rgba(244,237,224,.12);
}
.account-google {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(244,237,224,.22);
  border-radius: 6px;
  background: rgba(255,255,255,.92);
  color: #171216;
  font: 700 .86rem var(--ft-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: .94;
  cursor: pointer;
}
.account-google:hover { opacity: 1; }
.account-google.is-disabled {
  background: rgba(244,237,224,.16);
  color: rgba(244,237,224,.62);
  opacity: 1;
  cursor: not-allowed;
}
.account-google.is-disabled:hover { opacity: 1; }
.account-google i { color: #4285f4; }
.account-google-note {
  margin: 9px 0 0;
  color: rgba(244,237,224,.56);
  font-size: .82rem;
  text-align: center;
}
.account-alt {
  color: rgba(244,237,224,.66);
  margin-top: 16px;
  text-align: center;
  font-size: .92rem;
}
.account-alt button {
  background: transparent;
  border: 0;
  color: var(--gold);
  cursor: pointer;
  font: 700 .78rem var(--ft-uppercase);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 0 2px;
  border-bottom: 1px solid rgba(212,168,87,.45);
}
.account-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--gold);
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.account-form label[hidden] { display: none !important; }
.account-form input {
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(212,168,87,.28);
  border-radius: 4px;
  color: var(--ink);
  font: 400 .95rem var(--ft-body);
  padding: 13px 14px;
  outline: none;
}
.account-form select {
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(212,168,87,.28);
  border-radius: 4px;
  color: var(--ink);
  font: 400 .95rem var(--ft-body);
  padding: 13px 14px;
  outline: none;
}
.account-form select option { color: #171216; }
.account-form input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,168,87,.12);
}
.account-form select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,168,87,.12);
}
.account-form select:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.account-form .btn { margin-top: 18px; width: 100%; }
.account-home {
  display: none;
}
.account-home.is-active {
  display: block;
}
.account-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(212,168,87,.18);
  background: rgba(255,255,255,.035);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 18px;
}
.account-profile-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d0c10;
  background: linear-gradient(135deg,#d4a857,#f1d579);
  font-family: var(--ft-uppercase);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.account-profile-avatar .avatar-mark {
  width: 54px;
  height: 54px;
  font-size: 1.28rem;
}
.account-profile-card strong {
  display: block;
  color: #fff;
  font-family: var(--ft-display);
  font-size: 1.32rem;
  letter-spacing: .035em;
  line-height: 1.05;
}
.account-profile-card span {
  display: block;
  color: rgba(244,237,224,.58);
  font-size: .86rem;
  margin-top: 4px;
}
.account-menu-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin: 18px 0;
}
.account-menu-grid button {
  min-height: 88px;
  border: 1px solid rgba(212,168,87,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: rgba(244,237,224,.86);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font: 700 .78rem var(--ft-uppercase);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.account-menu-grid button:hover {
  border-color: rgba(212,168,87,.55);
  background: rgba(212,168,87,.08);
  color: #fff;
}
.account-menu-grid i {
  color: var(--gold);
  font-size: 1.2rem;
}
.account-logout-main {
  width: 100%;
  justify-content: center;
}
.account-section-panel h3 {
  color: #fff;
  font: 700 1.45rem var(--ft-display);
  letter-spacing: .03em;
  margin-bottom: 10px;
}
.account-section-panel > p {
  color: rgba(244,237,224,.7);
  line-height: 1.55;
  margin-bottom: 16px;
}
.account-back {
  background: transparent;
  border: 0;
  color: var(--gold);
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
  font: 700 .74rem var(--ft-uppercase);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.account-news-opt {
  border: 1px solid rgba(212,168,87,.18);
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  padding: 14px;
}
.avatar-toggle {
  width: 100%;
  border: 1px solid rgba(212,168,87,.26);
  background: rgba(212,168,87,.07);
  color: var(--gold);
  border-radius: 6px;
  padding: 11px 12px;
  cursor: pointer;
  font: 700 .74rem var(--ft-uppercase);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.interest-fieldset {
  border: 1px solid rgba(212,168,87,.18);
  border-radius: 8px;
  padding: 14px;
  margin: 18px 0 4px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
  gap: 10px;
}
.avatar-fieldset {
  border: 1px solid rgba(212,168,87,.18);
  border-radius: 8px;
  padding: 18px;
  margin: 18px 0 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(118px,1fr));
  gap: 12px;
}
.avatar-fieldset[hidden] { display: none; }
.avatar-fieldset legend {
  color: var(--gold);
  padding: 0 8px;
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.avatar-fieldset label {
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: rgba(244,237,224,.78) !important;
  font: 700 .72rem var(--ft-uppercase) !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(244,237,224,.12);
  border-radius: 8px;
  padding: 13px 10px;
  min-height: 106px;
  text-align: center;
  position: relative;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.avatar-fieldset label:hover {
  border-color: rgba(212,168,87,.42);
  background: rgba(212,168,87,.055);
  transform: translateY(-1px);
}
.avatar-fieldset input {
  width: auto;
  position: absolute;
  top: 10px;
  left: 10px;
}
.avatar-fieldset .avatar-mark {
  flex: 0 0 auto;
}
.avatar-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #120d0b;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 18px rgba(0,0,0,.24);
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.avatar-fieldset strong {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
.avatar-mark::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.16);
  pointer-events: none;
}
.avatar-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.avatar-fuego { background: linear-gradient(145deg,#f6c75d,#c83a24 72%); color: #fff7dc; }
.avatar-otorongo { background: linear-gradient(145deg,#d6a34b,#5b3718); color: #fff1ca; }
.avatar-carne { background: linear-gradient(145deg,#f0b18f,#862a24 72%); color: #fff2e9; }
.avatar-pollo { background: linear-gradient(145deg,#f1d47b,#bf7b1e 72%); color: #28170a; }
.avatar-tridente { background: linear-gradient(145deg,#e1bd66,#8d6a22 72%); }
.trident-shape {
  width: 15px;
  height: 17px;
  display: block;
  position: relative;
}
.trident-shape::before,
.trident-shape::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.trident-shape {
  color: #150f09;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
  border-top: 3px solid currentColor;
  border-radius: 8px 8px 0 0;
}
.trident-shape::before {
  width: 3px;
  height: 17px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border-radius: 2px;
}
.trident-shape::after {
  width: 9px;
  height: 3px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 2px;
}
.account-history {
  border-top: 1px solid rgba(244,237,224,.12);
  margin-top: 18px;
  padding-top: 16px;
}
.account-history h3 {
  color: #fff;
  font: 700 1.15rem var(--ft-display);
  letter-spacing: .03em;
  margin-bottom: 12px;
}
.account-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap: 10px;
}
.account-history-grid article,
.account-cart-state {
  border: 1px solid rgba(244,237,224,.12);
  background: rgba(255,255,255,.03);
  border-radius: 6px;
  padding: 12px;
}
.account-history-grid strong,
.account-cart-state strong {
  display: block;
  color: var(--gold);
  font: 700 .72rem var(--ft-uppercase);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.account-history-grid p,
.account-cart-state p,
.account-history-grid li,
.account-cart-state li {
  color: rgba(244,237,224,.72);
  font-size: .86rem;
  line-height: 1.45;
}
.account-history-grid ul,
.account-cart-state ul {
  list-style: none;
  display: grid;
  gap: 6px;
}
.account-cart-state { margin-top: 10px; }
.interest-fieldset legend {
  color: var(--gold);
  padding: 0 8px;
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.interest-fieldset label {
  flex-direction: row !important;
  align-items: center;
  color: rgba(244,237,224,.78) !important;
  font: 400 .88rem var(--ft-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.interest-fieldset input { width: auto; }
.account-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-top: 18px;
}
.account-actions .btn { margin-top: 0; }
@media (max-width: 620px) {
  .news-dialog { padding: 24px 18px; }
  .news-grid { grid-template-columns: 1fr; }
  .news-actions { flex-direction: column; align-items: stretch; }
  .account-dialog { padding: 24px 18px; }
  .account-tabs { overflow-x: auto; }
  .account-actions { grid-template-columns: 1fr; }
  .account-menu-grid { grid-template-columns: 1fr; }
}

.footer-bottom {
  border-top: 1px solid rgba(244,237,224,.12);
}
.footer-bottom-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 40px;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
}
.footer-bottom p {
  font-size: .82rem;
  color: rgba(244,237,224,.45);
  letter-spacing: .04em;
}
.footer-redes { display: flex; gap: 22px; }
.footer-redes a {
  font-family: var(--ft-uppercase);
  font-size: .74rem;
  color: rgba(244,237,224,.55);
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: color .3s;
}
.footer-redes a:hover { color: var(--gold); }

/* ---------------------------------------------------------------------
   24. WHATSAPP FLOATING
   --------------------------------------------------------------------- */
.whatsapp-btn {
  position: fixed;
  bottom: 32px; right: 32px;
  z-index: 900;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 10px 30px rgba(37,211,102,.45),
    0 0 0 0 rgba(37,211,102,.7);
  transition: transform .35s var(--ease), box-shadow .35s;
  animation: waPulse 2.6s ease-in-out infinite;
  cursor: pointer;
  will-change: transform;
  font-size: 28px;
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.6); }
  50%      { box-shadow: 0 14px 38px rgba(37,211,102,.55), 0 0 0 18px rgba(37,211,102,0); }
}
.whatsapp-btn:hover {
  transform: scale(1.12) rotate(-6deg);
}

/* Tooltip "¡Escríbenos!" */
.whatsapp-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #fff;
  color: #1a1a1a;
  padding: 10px 16px;
  border-radius: 10px;
  white-space: nowrap;
  font-family: var(--ft-body);
  font-size: .82rem;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  animation: waTooltipBob 3.5s ease-in-out 2s infinite;
}
.whatsapp-tooltip strong {
  color: #25D366;
  font-weight: 700;
  font-size: .88rem;
}
.whatsapp-tooltip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: #fff;
}
.whatsapp-btn:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  animation: none;
  transition: opacity .3s ease, transform .3s ease, visibility 0s;
}
@keyframes waTooltipBob {
  0%, 88%, 100% { opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(8px); }
  6%, 82%       { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
}
@media (max-width: 600px) {
  .whatsapp-tooltip { display: none; }
}

/* ---------------------------------------------------------------------
   25. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .presentacion-grid,
  .experiencia-grid,
  .producto-destacado,
  .contacto-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .presentacion-img,
  .experiencia-img,
  .producto-destacado-img {
    aspect-ratio: 4/3;
    max-width: 600px;
    margin: 0 auto;
  }
  .servicios-principales { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding: 70px 32px 50px; }
  .galeria-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }
  .galeria-item--large { grid-column: span 2; grid-row: span 1; grid-auto-rows: 280px; }
  .galeria-item--tall  { grid-row: span 1; }
  .galeria-item--wide  { grid-column: span 2; }

  .presentacion, .productos, .servicios, .experiencia,
  .galeria, .equipo, .contacto { padding: 100px 0; }
  .historia, .frase-impacto { padding: 110px 0; }
}

@media (max-width: 768px) {
  .nav-container { height: 70px; }
  .navbar.is-scrolled .nav-container { height: 60px; }

  .nav-links {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: rgba(74,10,6,.97);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    padding: 100px 32px 50px;
    gap: 0;
    transform: translateY(-110%);
    transition: transform .5s var(--ease);
    z-index: 999;
    height: 100vh;
  }
  .nav-links.is-open { transform: translateY(0); }
  .nav-links a {
    width: 100%;
    text-align: left;
    padding: 22px 8px;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(244,237,224,.1);
  }
  .btn-nav { margin-left: 0 !important; margin-top: 24px; align-self: flex-start; }
  .nav-toggle { display: flex; }

  .presentacion, .productos, .servicios, .experiencia,
  .galeria, .equipo, .contacto, .historia, .frase-impacto,
  .testimonio, .testimonios, .cta-intermedio { padding: 80px 0; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; padding: 60px 24px 40px; }
  .footer-bottom-inner { flex-direction: column; text-align: center; padding: 22px 24px; }

  .equipo-grid { grid-template-columns: 1fr; }
  .contacto-form { padding: 28px 22px; }

  .productos-tabs { gap: 0; overflow-x: auto; flex-wrap: nowrap; }
  .tab-btn { padding: 14px 18px; font-size: .72rem; }

  .galeria-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .galeria-item--large, .galeria-item--tall, .galeria-item--wide {
    grid-column: span 1; grid-row: span 1;
  }

  .historia-texto p:first-of-type::first-letter {
    font-size: 2.8em;
  }
}

@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .hero-content { padding: 130px 16px 80px; }
  .productos-grid { grid-template-columns: 1fr; }
  .experiencia-cta { flex-direction: column; align-items: stretch; }
  .experiencia-cta .btn { width: 100%; }
  .testimonio-badge::before, .testimonio-badge::after { display: none; }
  .label-historia::after { display: none; }
}

/* ---------------------------------------------------------------------
   26. PREFERS-REDUCED-MOTION
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* =====================================================================
   27. ICONOS SOCIALES CIRCULARES (FA)
   ===================================================================== */
.redes-icons {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.red-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3);
  border: 1px solid #C9A84C;
  color: #C9A84C;
  font-size: 1rem;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease),
              box-shadow .35s var(--ease);
}
.red-icon:hover {
  background: #C0392B;
  border-color: #C0392B;
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -6px rgba(192,57,43,.6);
}
.redes-icons--footer { margin-top: 22px; }

/* =====================================================================
   28. CARRITO — TRIGGER NAVBAR
   ===================================================================== */
.cart-trigger {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid #C9A84C;
  background: rgba(0,0,0,.35);
  color: #C9A84C;
  font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  margin-left: 12px;
  transition: background .35s, transform .35s, box-shadow .35s, color .35s;
}
.cart-trigger:hover {
  background: #C9A84C;
  color: var(--bg-0);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(201,168,76,.55);
}
.cart-count {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #C0392B;
  color: #fff;
  font-family: var(--ft-uppercase);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .04em;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--rojo-footer);
  transition: transform .3s var(--ease);
}
.cart-trigger.is-empty .cart-count { opacity: 0; pointer-events: none; }
@keyframes cartBounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  60%  { transform: scale(.85); }
  100% { transform: scale(1); }
}
.cart-count.is-bumped { animation: cartBounce .55s var(--ease); }

/* =====================================================================
   29. PRECIO + BOTÓN AGREGAR EN CARDS
   ===================================================================== */
.producto-precio {
  font-family: var(--ft-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #C9A84C;
  margin: 14px 0 16px;
  letter-spacing: -0.01em;
}
.btn-add-cart {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 18px;
  font-family: var(--ft-uppercase);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: #C0392B;
  border: 1px solid #C0392B;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), box-shadow .35s var(--ease),
              transform .25s var(--ease);
}
.btn-add-cart i { font-size: .9rem; }
.btn-add-cart::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.25) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform .7s var(--ease);
  z-index: -1;
}
.btn-add-cart:hover::before { transform: translateX(110%); }
.btn-add-cart:hover {
  background: transparent;
  color: #C9A84C;
  border-color: #C9A84C;
  box-shadow: 0 10px 26px -10px rgba(201,168,76,.5);
  transform: translateY(-2px);
}
.btn-add-cart.is-added {
  background: #27ae60;
  border-color: #27ae60;
  color: #fff;
  pointer-events: none;
}
.producto-destacado-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 18px;
}
.producto-destacado-actions .btn-add-cart { width: auto; flex: 1 1 240px; }

/* =====================================================================
   30. SECCIÓN MÉTODOS DE PAGO
   ===================================================================== */
.metodos-pago {
  background: var(--bg-3);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  padding: 56px 0;
}
.metodos-pago-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.metodos-pago-head .label { margin-bottom: 8px; }
.metodos-pago-head h3 {
  font-family: var(--ft-display);
  font-size: 1.4rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.metodos-pago-list {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.metodo-pago {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 14px 22px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 110px; min-height: 60px;
  transition: border-color .35s, transform .35s, background .35s;
}
.metodo-pago:hover {
  border-color: #C9A84C;
  background: rgba(201,168,76,.08);
  transform: translateY(-3px);
}

/* Logos compactos de marca */
.metodo-logo {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ft-uppercase);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.metodo-logo--yape {
  background: #742FAE;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: .95rem;
  padding: 8px 18px;
  border-radius: 999px;
  letter-spacing: -0.02em;
}
.metodo-logo--plin {
  background: #00BFB2;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: .95rem;
  padding: 8px 18px;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.metodo-logo--visa {
  background: #1a1f71;
  color: #f7b600;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.1rem;
  padding: 6px 16px;
  border-radius: 4px;
  letter-spacing: .08em;
}
.metodo-logo--mc {
  display: inline-flex;
  position: relative;
  width: 56px; height: 32px;
  background: #fff;
  border-radius: 4px;
  align-items: center; justify-content: center;
}
.mc-circle {
  width: 22px; height: 22px;
  border-radius: 50%;
  position: absolute;
}
.mc-red    { background: #EB001B; left: 8px; }
.mc-yellow { background: #F79E1B; right: 8px; mix-blend-mode: multiply; }
.metodo-logo--debito {
  display: inline-flex; align-items: center; gap: 8px;
  color: #C9A84C;
  font-family: var(--ft-uppercase);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.metodo-logo--debito i { font-size: 1.4rem; }
.metodo-logo--sm { transform: scale(.85); transform-origin: center; }

@media (max-width: 768px) {
  .metodos-pago-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .metodos-pago-list { width: 100%; justify-content: flex-start; }
}

/* =====================================================================
   31. SIDEBAR CARRITO
   ===================================================================== */
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
  z-index: 1100;
}
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }

.cart-sidebar {
  position: fixed; top: 0; right: 0;
  width: min(440px, 100vw);
  height: 100vh;
  background: #1c1c1c;
  border-left: 1px solid var(--gold-line);
  display: flex; flex-direction: column;
  transform: translateX(105%);
  transition: transform .55s var(--ease);
  z-index: 1101;
  box-shadow: -30px 0 80px rgba(0,0,0,.6);
}
.cart-sidebar.is-open { transform: translateX(0); }

.cart-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 28px 28px 22px;
  border-bottom: 1px solid var(--line);
}
.cart-eyebrow {
  display: block;
  font-family: var(--ft-uppercase);
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #C9A84C;
  margin-bottom: 6px;
}
.cart-title {
  font-family: var(--ft-display);
  font-size: 1.7rem;
  color: var(--ink);
}
.cart-close {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 1rem;
  transition: color .3s, border-color .3s, background .3s, transform .3s;
}
.cart-close:hover {
  color: #C9A84C;
  border-color: #C9A84C;
  background: rgba(201,168,76,.1);
  transform: rotate(90deg);
}

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 28px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.cart-body::-webkit-scrollbar { width: 6px; }
.cart-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.cart-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 80px 24px 40px;
  color: var(--ink-muted);
}
.cart-empty i {
  font-size: 3rem;
  color: #C9A84C;
  opacity: .35;
  margin-bottom: 22px;
}
.cart-empty p {
  font-family: var(--ft-display);
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.cart-empty span {
  font-size: .9rem;
  color: var(--ink-dim);
}
.cart-sidebar.has-items .cart-empty { display: none; }
.cart-sidebar:not(.has-items) .cart-items { display: none; }

.cart-items { display: flex; flex-direction: column; gap: 14px; padding: 16px 0; }
.cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  padding: 16px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color .3s, background .3s;
  animation: cartItemIn .4s var(--ease) both;
}
@keyframes cartItemIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cart-item:hover { border-color: var(--gold-line); }
.cart-item-name {
  font-family: var(--ft-display);
  font-size: 1.02rem;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
}
.cart-item-price {
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C9A84C;
}
.cart-item-remove {
  background: transparent;
  border: none;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: .9rem;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .3s, background .3s;
  align-self: start;
}
.cart-item-remove:hover {
  color: #C0392B;
  background: rgba(192,57,43,.12);
}
.cart-item-controls {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}
.qty-control {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
}
.qty-btn {
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  color: #C9A84C;
  cursor: pointer;
  font-size: .9rem;
  transition: background .3s, color .3s;
}
.qty-btn:hover { background: rgba(201,168,76,.15); }
.qty-value {
  min-width: 32px;
  text-align: center;
  font-family: var(--ft-uppercase);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
}
.cart-item-line {
  font-family: var(--ft-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.cart-footer {
  padding: 22px 28px 28px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.3);
}
.cart-subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px;
}
.cart-subtotal span {
  font-family: var(--ft-uppercase);
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cart-subtotal strong {
  font-family: var(--ft-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: #C9A84C;
}
#cartCheckout:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* =====================================================================
   32. PAYMENT MODAL
   ===================================================================== */
.pay-modal {
  position: fixed; inset: 0;
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.pay-modal.is-open { opacity: 1; pointer-events: auto; }
.pay-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pay-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #1c1c1c;
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  padding: 44px 40px 36px;
  box-shadow: 0 40px 80px rgba(0,0,0,.7);
  transform: translateY(20px) scale(.97);
  transition: transform .45s var(--ease);
  scrollbar-width: thin;
}
.pay-modal.is-open .pay-dialog { transform: translateY(0) scale(1); }
.pay-dialog::-webkit-scrollbar { width: 6px; }
.pay-dialog::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.pay-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 1rem;
  z-index: 2;
  transition: color .3s, border-color .3s, background .3s, transform .3s;
}
.pay-close:hover {
  color: #C9A84C;
  border-color: #C9A84C;
  background: rgba(201,168,76,.1);
  transform: rotate(90deg);
}
.pay-head { margin-bottom: 28px; }
.pay-head .label { margin-bottom: 10px; }
.pay-head h3 {
  font-family: var(--ft-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--ink);
}

.pay-summary {
  margin-bottom: 28px;
  padding: 20px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.pay-summary h4,
.pay-methods h4 {
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #C9A84C;
  margin-bottom: 16px;
}
.pay-summary-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pay-summary-list li {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .92rem;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.pay-summary-list li:last-child { border-bottom: none; padding-bottom: 0; }
.pay-summary-list li span:first-child { color: var(--ink-muted); }
.pay-summary-list li strong { color: #C9A84C; font-family: var(--ft-display); }
.pay-summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--gold-line);
}
.pay-summary-total span {
  font-family: var(--ft-uppercase);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}
.pay-summary-total strong {
  font-family: var(--ft-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: #C9A84C;
}

.pay-methods { margin-bottom: 28px; }
.pay-methods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.pay-method { cursor: pointer; }
.pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.pay-method-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 22px 16px;
  background: rgba(255,255,255,.03);
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  text-align: center;
  transition: border-color .35s, background .35s, transform .35s, box-shadow .35s;
  min-height: 110px;
}
.pay-method-card .pay-method-row {
  display: inline-flex; align-items: center; gap: 8px;
}
.pay-method:hover .pay-method-card {
  border-color: #C9A84C;
  background: rgba(201,168,76,.06);
  transform: translateY(-2px);
}
.pay-method input:checked + .pay-method-card {
  border-color: #C9A84C;
  background: rgba(201,168,76,.12);
  box-shadow: 0 0 0 1px #C9A84C, 0 12px 28px -12px rgba(201,168,76,.4);
}
.pay-method-name {
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}

.pay-disclaimer {
  text-align: center;
  margin-top: 14px;
  font-size: .8rem;
  color: var(--ink-dim);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pay-disclaimer i { color: #C9A84C; }

@media (max-width: 540px) {
  .pay-dialog { padding: 36px 22px 26px; }
  .pay-head h3 { font-size: 1.5rem; }
  .pay-methods-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   33. TOAST
   ===================================================================== */
.toast {
  position: fixed;
  bottom: 110px; right: 32px;
  background: #1c1c1c;
  border: 1px solid #C9A84C;
  color: var(--ink);
  padding: 14px 22px;
  border-radius: 4px;
  font-family: var(--ft-uppercase);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  z-index: 1300;
  transition: opacity .35s, transform .35s var(--ease);
}
.toast.is-show { opacity: 1; transform: translateY(0); }
.toast i { color: #27ae60; font-size: 1rem; }
@media (max-width: 540px) {
  .toast { right: 16px; left: 16px; bottom: 100px; justify-content: center; }
}

/* =====================================================================
   34. MOBILE: nav-toggle + cart-trigger orden
   ===================================================================== */
@media (max-width: 768px) {
  .cart-trigger { margin-left: 0; margin-right: 8px; }
  .account-trigger {
    margin-left: auto;
    margin-right: 8px;
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    gap: 6px;
  }
  .account-trigger-avatar {
    display: inline-flex;
    flex: 0 0 22px;
  }
  .account-trigger #accountTriggerText {
    display: inline;
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .58rem;
    letter-spacing: .1em;
  }
  .account-trigger + .cart-trigger { margin-left: 0; }
}

@media (max-width: 430px) {
  .account-trigger { width: 44px; padding: 0; }
  .account-trigger #accountTriggerText { display: none; }
}


/* =====================================================================
   35. MÉTODOS DE PAGO DENTRO DEL CARRITO
   ===================================================================== */
.cart-pay-methods {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  text-align: center;
}
.cart-pay-label {
  display: block;
  font-family: var(--ft-uppercase);
  font-size: .65rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 12px;
}
.cart-pay-logos {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.cart-pay-logos .metodo-logo--sm {
  transform: scale(.78);
  transform-origin: center;
  margin: -4px;
}
.cart-pay-logos .metodo-logo--debito {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(255,255,255,.04);
}
.cart-pay-logos .metodo-logo--debito i {
  color: #C9A84C;
  font-size: 1.1rem;
}

/* =====================================================================
   36. PREMIUM DARK LUXURY OVERRIDES — 2026 redesign
   ===================================================================== */

/* ---------- Containers: 1400 max ---------- */
.container { max-width: 1400px !important; }

/* ---------- Global: kill italics on every heading site-wide ---------- */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.historia-titulo,
.presentacion-texto h2,
.experiencia-texto h2,
.contacto-info h2,
.cta-intermedio h2,
.testimonio-inner h2,
.frase-impacto blockquote,
.frase-impacto blockquote em,
.historia-firma,
em {
  font-style: normal !important;
}

/* ---------- Body type system ---------- */
body, p, li, label, input, select, textarea, button, a {
  font-family: 'Open Sans', sans-serif;
}
.label, .label-historia, .nav-links a, .btn, .btn-nav,
.tab-btn, .producto-precio, .cart-eyebrow, .cart-pay-label,
.testimonio-badge {
  font-family: 'Oswald', sans-serif;
}

/* All headings — Bebas Neue, NOT italic, powerful */
h1, h2, h3, h4,
.historia-titulo,
.producto-card h3,
.producto-destacado-texto h3,
.servicio-principal-body h3,
.equipo-card h3 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
}

h2 {
  color: #ffffff !important;
}


/* =====================================================================
   HERO — dramatic order: eyebrow → EL FUEGO → ES NUESTRO ARTE → video → sub → CTA
   ===================================================================== */
.hero-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0 !important;
  padding-top: 40px;
}

/* Eyebrow — gold caps with flanking lines */
.hero-eyebrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: 'Oswald', sans-serif !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #C9A84C !important;
  margin-bottom: 26px !important;
}
.hero-eyebrow-line {
  display: inline-block;
  width: clamp(40px, 8vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #C9A84C, transparent);
}

/* H1 stacked: white "EL FUEGO" smaller + gold "ES NUESTRO ARTE" massive */
.hero-content h1.hero-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(.05em, .2vw, .15em) !important;
  letter-spacing: 0.04em !important;
  line-height: .94 !important;
  margin: 0 0 28px !important;
  text-transform: uppercase !important;
  font-style: normal !important;
}
.hero-content .hero-line-1 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-style: normal !important;
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  letter-spacing: 0.12em !important;
  color: #ffffff !important;
  font-weight: 400 !important;
}
.hero-content .hero-line-2 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-style: normal !important;
  font-size: clamp(4.5rem, 11vw, 9rem) !important;
  letter-spacing: 0.04em !important;
  color: #C9A84C !important;
  font-weight: 400 !important;
  text-shadow:
    0 2px 0 rgba(139,105,20,.45),
    0 0 30px rgba(201,168,76,.35),
    0 8px 40px rgba(0,0,0,.6);
}

/* Animated logo video — screen blend, no black box */
.hero-video-logo {
  display: block !important;
  width: clamp(200px, 28vw, 280px) !important;
  max-width: 70vw !important;
  height: auto !important;
  margin: 4px auto 24px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  mix-blend-mode: screen !important;
  pointer-events: none;
  filter: brightness(1.15) contrast(1.1) saturate(1.1) !important;
  position: relative !important;
  z-index: 4 !important;
}

/* Subtitle */
.hero-content p.hero-sub {
  font-family: 'Oswald', sans-serif !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  font-size: .85rem !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.6) !important;
  max-width: 620px;
  margin: 0 auto 36px !important;
  line-height: 1.6;
}

/* Hero CTA — RED */
.hero-content .hero-cta,
a.btn-primary.hero-cta {
  background: #C0392B !important;
  border-color: #C0392B !important;
  color: #fff !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 16px 44px !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 28px rgba(192,57,43,.35);
  transition: filter .3s, transform .3s, box-shadow .3s !important;
}
.hero-content .hero-cta:hover {
  filter: brightness(1.1);
  box-shadow: 0 12px 36px rgba(192,57,43,.55);
  transform: translateY(-2px);
}

/* =====================================================================
   SOCIAL ICONS — circular, gold border, red fill on hover
   ===================================================================== */
.redes-icons { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.red-icon, .redes-icons a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  background: rgba(13,13,13,.7) !important;
  border: 1.5px solid #C9A84C !important;
  color: #C9A84C !important;
  font-size: 1.05rem !important;
  text-decoration: none !important;
  transition: background .3s, color .3s, border-color .3s, transform .3s !important;
}
.red-icon:hover, .redes-icons a:hover {
  background: #C0392B !important;
  border-color: #C0392B !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(192,57,43,.45);
}

/* =====================================================================
   CURSOR — restore default
   ===================================================================== */
* { cursor: auto !important; }
a, button, .btn, .tab-btn, .nav-toggle, .cart-trigger,
.cart-item-remove, .qty-btn, .pay-method, label.pay-method,
input[type="submit"], select { cursor: pointer !important; }
input, textarea { cursor: text !important; }
.cursor, .cursor-dot, .cursor-outline, [class*="custom-cursor"] {
  display: none !important;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 768px) {
  .productos-grid { grid-template-columns: 1fr !important; }
  .servicios-principales { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .cart-sidebar { width: 100% !important; max-width: 100% !important; }
  .hero-eyebrow { gap: 12px; letter-spacing: 0.22em !important; }
  .hero-eyebrow-line { width: 28px; }
  .hero-video-logo { width: clamp(140px, 38vw, 180px) !important; }
  /* Navbar mobile */
  .nav-links {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(13,12,16,.99) 0%, rgba(60,8,4,.98) 100%);
    flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 100px 24px 40px;
    transform: translateY(-110%);
    transition: transform .5s cubic-bezier(.16,1,.3,1);
    z-index: 999;
    border-bottom: 1px solid var(--gold-line);
  }
  .nav-links.is-open { transform: translateY(0); }
  .nav-links a { width: 100%; text-align: center; padding: 16px; font-size: .95rem; border-bottom: 1px solid var(--line); }
  .nav-links a:last-child { border-bottom: none; }
  .nav-toggle { display: flex; z-index: 1001; position: relative; }
  /* Grids mobile */
  .presentacion-grid { grid-template-columns: 1fr !important; gap: 48px; }
  .producto-destacado { grid-template-columns: 1fr !important; gap: 40px; }
  .historia-grid { grid-template-columns: 1fr !important; gap: 48px; }
  .experiencia-grid { grid-template-columns: 1fr !important; gap: 48px; }
  .porque-grid { grid-template-columns: 1fr !important; gap: 48px; }
  .contacto-grid { grid-template-columns: 1fr !important; gap: 48px; }
  .porque-right { display: none; }
  /* Secciones padding */
  .presentacion, .productos, .servicios, .historia,
  .experiencia, .galeria, .equipo, .testimonios, .contacto { padding: 80px 0; }
  /* Footer */
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: 16px; }
  .pay-dialog { margin: 16px; padding: 28px 20px; border-radius: 4px; }
  .contacto-form { padding: 22px 18px; }
}
@media (min-width: 769px) and (max-width: 1199px) {
  .productos-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .servicios-principales { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .presentacion-grid { grid-template-columns: 1fr 1fr !important; gap: 56px; }
}
@media (min-width: 1200px) {
  .productos-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .servicios-principales { grid-template-columns: repeat(3, 1fr) !important; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important; }
}
@media (max-width: 540px) {
  body { overflow-x: hidden; }
  .container { padding-left: 18px; padding-right: 18px; }
  .hero-content h1.hero-title { gap: 0 !important; }
  .hero-content .hero-line-1 { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .hero-content .hero-line-2 { font-size: clamp(3rem, 12vw, 5rem) !important; }
  .tabs, .productos-tabs { gap: 4px; }
  .tab-btn { padding: 12px 16px; font-size: .7rem; }
  .cart-sidebar { width: 100vw !important; }
  .pay-dialog { max-height: 95vh; overflow-y: auto; }
}
/* =====================================================================
   SECCIÓN ARTISTAS — Carrusel infinito
   ===================================================================== */
.artistas {
  padding: 96px 0 0;
  background: var(--bg-1);
  overflow: hidden;
}
.artistas .container {
  text-align: center;
  margin-bottom: 56px;
}
.artistas h2 {
  font-family: var(--ft-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--ink);
  margin-bottom: 16px;
}
.artistas .section-desc {
  color: var(--ink-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* Wrapper con fade en los bordes */
.artistas-track-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 96px;
}
.artistas-track-wrapper::before,
.artistas-track-wrapper::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 160px;
  z-index: 2;
  pointer-events: none;
}
.artistas-track-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-1), transparent);
}
.artistas-track-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-1), transparent);
}

/* Track animado */
.artistas-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: artistas-scroll 22s linear infinite;
}
.artistas-track:hover {
  animation-play-state: paused;
}

@keyframes artistas-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Tarjeta individual */
.artista-card {
  position: relative;
  width: 320px;
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.artista-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(184,52,31,.35);
}
.artista-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .6s var(--ease);
  filter: brightness(.85);
}
.artista-card:hover img {
  transform: scale(1.06);
  filter: brightness(1);
}

/* Overlay con info */
.artista-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 32px 24px 24px;
  background: linear-gradient(to top, rgba(8,7,10,.95) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(8px);
  transition: transform .4s var(--ease);
}
.artista-card:hover .artista-overlay {
  transform: translateY(0);
}
.artista-nombre {
  font-family: var(--ft-display);
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: .04em;
}
.artista-evento {
  font-family: var(--ft-uppercase);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--gold);
  text-transform: uppercase;
}

/* Línea dorada decorativa en la tarjeta */
.artista-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--ember), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.artista-card:hover::after {
  transform: scaleX(1);
}

/* ═══════════════════════════════════════════════
   SCROLLSPY — Link activo en navbar
   ═══════════════════════════════════════════════ */
.nav-links a.nav-active {
  color: var(--gold) !important;
}
.nav-links a.nav-active::after {
  width: 70% !important;
  left: 15% !important;
  background: var(--gold) !important;
}


/* ═══════════════════════════════════════════════
   CARRITO — Tipografía más legible y visible
   ═══════════════════════════════════════════════ */
.cart-item-name {
  font-family: var(--ft-uppercase) !important;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}
.cart-item-price {
  font-size: .92rem !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  letter-spacing: .06em !important;
}
.cart-item {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 8px !important;
  padding: 18px !important;
}
.cart-item:hover {
  background: rgba(255,255,255,.09) !important;
  border-color: var(--gold-line) !important;
}
.cart-subtotal span {
  font-family: var(--ft-uppercase);
  font-size: 1rem !important;
  color: var(--ink) !important;
  letter-spacing: .08em;
}
.cart-subtotal strong {
  font-size: 1.4rem !important;
  color: var(--gold) !important;
  font-family: var(--ft-display);
}
.cart-title {
  font-size: 2rem !important;
  color: var(--ink) !important;
}
.cart-eyebrow {
  font-size: .78rem !important;
  letter-spacing: .3em !important;
}

/* ═══════════════════════════════════════════════
   CARRITO TRIGGER — más grande y reconocible
   ═══════════════════════════════════════════════ */
.cart-trigger {
  width: 48px !important;
  height: 48px !important;
  font-size: 1.2rem !important;
  border-width: 2px !important;
}

/* ═══════════════════════════════════════════════
   NAVBAR DROPDOWN — Productos y Servicios
   ═══════════════════════════════════════════════ */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.nav-chevron {
  font-size: .65rem;
  transition: transform .3s ease;
}
.nav-dropdown:hover .nav-chevron {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: #141318;
  border: 1px solid rgba(212,168,87,.2);
  border-radius: 10px;
  padding: 8px 0;
  min-width: 190px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  z-index: 200;
}
/* Triángulo arriba del menú */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(212,168,87,.2);
}
.nav-dropdown-menu::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #141318;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu li a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 18px !important;
  font-size: .82rem !important;
  color: var(--ink-muted) !important;
  transition: color .2s, background .2s, padding-left .2s !important;
  width: 100% !important;
  border-bottom: none !important;
}
.nav-dropdown-menu li a::after { display: none !important; }
.nav-dropdown-menu li a:hover {
  color: var(--gold) !important;
  background: rgba(212,168,87,.07);
  padding-left: 24px !important;
}
.nav-dropdown-menu li a i {
  width: 16px;
  text-align: center;
  color: var(--ember);
  font-size: .8rem;
}
.nav-dropdown-menu li:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* ═══════════════════════════════════════════════
   CARRITO — Número de cantidad más nítido
   ═══════════════════════════════════════════════ */
.qty-value {
  font-family: var(--ft-uppercase) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: .02em !important;
  min-width: 36px !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}
.cart-item-line {
  font-family: var(--ft-uppercase) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: .02em !important;
  -webkit-font-smoothing: antialiased !important;
}
.qty-btn {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  width: 36px !important;
  height: 36px !important;
}

/* ═══════════════════════════════════════════════
   HISTORIA — Layout dividido impactante
   ═══════════════════════════════════════════════ */
.historia {
  background: var(--bg-1);
  padding: 120px 0;
  overflow: hidden;
}
.historia-split {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ── Lado izquierdo: fotos apiladas ── */
.historia-fotos {
  position: relative;
}
.historia-foto-stack {
  position: relative;
  height: 560px;
}
.historia-foto {
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.historia-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .6s ease;
}
.historia-foto:hover img { transform: scale(1.04); }

.historia-foto--1 {
  width: 68%;
  height: 400px;
  top: 0; left: 0;
  z-index: 3;
  border: 3px solid var(--gold-line);
}
.historia-foto--2 {
  width: 55%;
  height: 300px;
  top: 60px; right: 0;
  z-index: 2;
  border: 3px solid rgba(184,52,31,.4);
}
.historia-foto--3 {
  width: 50%;
  height: 220px;
  bottom: 0; left: 20%;
  z-index: 4;
  border: 3px solid var(--gold-line);
}

/* Badge de años */
.historia-badge {
  position: absolute;
  bottom: 20px; right: 10px;
  z-index: 5;
  background: linear-gradient(135deg, var(--ember), var(--ember-deep));
  border-radius: 50%;
  width: 100px; height: 100px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(184,52,31,.5);
  border: 3px solid rgba(255,255,255,.1);
}
.historia-badge-num {
  font-family: var(--ft-display);
  font-size: 1.9rem;
  color: #fff;
  line-height: 1;
}
.historia-badge-txt {
  font-family: var(--ft-uppercase);
  font-size: .52rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  text-align: center;
  line-height: 1.3;
}

/* ── Lado derecho: contenido ── */
.historia-contenido {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.historia-contenido .label-historia {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ft-uppercase);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.historia-contenido .label-historia::before {
  content: '';
  width: 28px; height: 2px;
  background: var(--gold);
}
.historia-titulo {
  font-family: var(--ft-display) !important;
  font-size: clamp(2.8rem, 5vw, 4.4rem) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: .01em !important;
  color: var(--ink) !important;
  margin-bottom: 32px !important;
  text-shadow: none !important;
}
.historia-texto {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 40px;
}
.historia-texto p {
  font-family: var(--ft-body) !important;
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: var(--ink-muted) !important;
  text-shadow: none !important;
}
.historia-texto p:first-of-type::first-letter {
  all: unset;
}
.historia-texto strong {
  color: var(--gold) !important;
  font-weight: 600;
}

/* Stats */
.historia-stats {
  display: flex;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.historia-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.historia-stat-num {
  font-family: var(--ft-display);
  font-size: 2.2rem;
  color: var(--gold);
  line-height: 1;
}
.historia-stat-lbl {
  font-family: var(--ft-uppercase);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.historia-firma {
  font-family: var(--ft-body) !important;
  font-style: italic !important;
  font-size: 1rem !important;
  color: var(--ink-muted) !important;
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  text-shadow: none !important;
}

/* Responsive */
@media (max-width: 900px) {
  .historia-split {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .historia-foto-stack { height: 380px; }
  .historia-foto--1 { height: 280px; }
  .historia-foto--2 { height: 220px; top: 40px; }
  .historia-foto--3 { height: 160px; }
}
@media (max-width: 540px) {
  .historia-split { padding: 0 20px; }
  .historia-foto-stack { height: 300px; }
  .historia-stats { gap: 20px; }
  .historia-stat-num { font-size: 1.7rem; }
}

/* ═══════════════════════════════════════════════
   EXPERIENCIA CARNES — dentro de Productos
   ═══════════════════════════════════════════════ */
.experiencia--productos {
  background: var(--bg-2) !important;
  border-top: 1px solid var(--line);
  margin-top: 0 !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.experiencia--productos::before {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, var(--ember), var(--gold));
  margin: 0 auto 0;
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
}

/* ═══════════════════════════════════════════════
   PESTAÑA CORTES — dentro de Productos
   ═══════════════════════════════════════════════ */
.experiencia-grid--tab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 20px 0 40px;
}
.experiencia-grid--tab .experiencia-foto {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  border: 2px solid var(--gold-line);
}
.experiencia-grid--tab .experiencia-texto h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 20px;
}
.experiencia-grid--tab .experiencia-texto p {
  color: var(--ink-muted);
  line-height: 1.85;
  margin-bottom: 14px;
}
@media (max-width: 768px) {
  .experiencia-grid--tab {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .experiencia-grid--tab .experiencia-foto { height: 280px; }
}

/* ═══════════════════════════════════════════════
   EQUIPO — CTA integrado al fondo
   ═══════════════════════════════════════════════ */
.equipo-cta {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.equipo-cta p {
  font-family: var(--ft-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--ink);
  margin: 0;
}
@media (max-width: 600px) {
  .equipo-cta {
    flex-direction: column;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════
   TESTIMONIOS — fecha y evento
   ═══════════════════════════════════════════════ */
.testimonios-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
.testimonio-meta {
  margin-top: 12px;
  font-family: var(--ft-uppercase);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--gold);
  opacity: .8;
}
.testimonio-meta i {
  color: var(--ember);
}

/* ═══════════════════════════════════════════════
/* ═══════════════════════════════════════════════
   HISTORIA — Carrusel de fotos de los pininos
   ═══════════════════════════════════════════════ */
.historia-carousel {
  position: relative;
  width: 100%;
  height: 520px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  border: 2px solid var(--gold-line);
}
.historia-carousel-track {
  display: flex;
  height: 100%;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.historia-carousel-slide {
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
}
.historia-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Puntos de navegación */
.historia-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.historia-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .3s, transform .3s;
}
.historia-dot.is-active {
  background: var(--gold);
  transform: scale(1.3);
}

/* Ajuste del badge sobre el carrusel */
.historia-foto-stack {
  position: relative;
}
.historia-foto-stack .historia-badge {
  position: absolute;
  bottom: 40px;
  right: -16px;
  z-index: 10;
}

@media (max-width: 900px) {
  .historia-carousel { height: 340px; }
}
@media (max-width: 540px) {
  .historia-carousel { height: 260px; }
  .historia-foto-stack .historia-badge { right: 8px; bottom: 48px; }
}

/* ═══════════════════════════════════════════════
   HISTORIA — Stack de fotos apiladas (collage)
   ═══════════════════════════════════════════════ */
.historia-foto-stack {
  position: relative;
  height: 580px;
  width: 100%;
}
.historia-foto {
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.65);
  transition: transform .4s ease, box-shadow .4s ease;
}
.historia-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.historia-foto:hover {
  transform: scale(1.03) translateY(-6px) !important;
  box-shadow: 0 28px 60px rgba(0,0,0,.75);
  z-index: 10 !important;
}

/* Foto 1 — grande izquierda, inclinada levemente */
.historia-foto--1 {
  width: 62%;
  height: 360px;
  top: 0; left: 0;
  z-index: 3;
  transform: rotate(-2deg);
  border: 3px solid var(--gold-line);
}
/* Foto 2 — mediana derecha arriba */
.historia-foto--2 {
  width: 52%;
  height: 280px;
  top: 30px; right: 0;
  z-index: 2;
  transform: rotate(2.5deg);
  border: 3px solid rgba(184,52,31,.5);
}
/* Foto 3 — pequeña abajo izquierda centro */
.historia-foto--3 {
  width: 50%;
  height: 230px;
  bottom: 20px; left: 10%;
  z-index: 4;
  transform: rotate(-1.5deg);
  border: 3px solid var(--gold-line);
}
/* Foto 4 — pequeña abajo derecha */
.historia-foto--4 {
  width: 42%;
  height: 200px;
  bottom: 0; right: 5%;
  z-index: 3;
  transform: rotate(1deg);
  border: 3px solid rgba(184,52,31,.4);
}

/* Badge encima del stack */
.historia-foto-stack .historia-badge {
  position: absolute;
  bottom: 100px;
  right: -10px;
  z-index: 10;
}

@media (max-width: 900px) {
  .historia-foto-stack { height: 420px; }
  .historia-foto--1 { height: 260px; }
  .historia-foto--2 { height: 200px; }
  .historia-foto--3 { height: 170px; }
  .historia-foto--4 { height: 150px; }
}
@media (max-width: 540px) {
  .historia-foto-stack { height: 320px; }
  .historia-foto--1 { height: 200px; width: 68%; }
  .historia-foto--2 { height: 160px; width: 56%; }
  .historia-foto--3 { height: 140px; }
  .historia-foto--4 { display: none; }
}

/* ═══════════════════════════════════════════════
   TESTIMONIOS — Carrusel
   ═══════════════════════════════════════════════ */
.testimonios-carrusel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
}
.testimonios-viewport {
  overflow: hidden;
  width: 100%;
}
.testimonios-grid {
  display: flex !important;
  gap: 24px;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.testimonio-item {
  min-width: calc(33.333% - 16px);
  flex-shrink: 0;
}

/* Flechas */
.test-arrow {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--gold-line);
  background: rgba(8,7,10,.8);
  color: var(--gold);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, border-color .3s, transform .2s;
  z-index: 2;
}
.test-arrow:hover {
  background: var(--ember);
  border-color: var(--ember);
  color: #fff;
  transform: scale(1.08);
}
.test-arrow:disabled {
  opacity: .3;
  pointer-events: none;
}

/* Dots */
.test-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.test-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.25);
  cursor: pointer;
  padding: 0;
  transition: background .3s, transform .3s;
}
.test-dot.is-active {
  background: var(--gold);
  transform: scale(1.35);
}

@media (max-width: 900px) {
  .testimonio-item { min-width: calc(50% - 12px); }
}
@media (max-width: 580px) {
  .testimonio-item { min-width: 100%; }
  .test-arrow { width: 38px; height: 38px; font-size: .85rem; }
}

/* ═══════════════════════════════════════════════
   LIBRO DE RECLAMACIONES — Botón footer
   ═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   LIBRO DE RECLAMACIONES — CTA compacto en footer
   ═══════════════════════════════════════════════ */
.libro-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 22px;
  padding: 12px 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  font-family: inherit;
  color: var(--ink);
}
.libro-cta:hover {
  background: rgba(212,168,87,.1);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.libro-cta-icon {
  display: inline-flex;
  width: 38px;
  flex-shrink: 0;
  transition: transform .3s ease;
}
.libro-cta:hover .libro-cta-icon { transform: scale(1.08) rotate(-3deg); }
.libro-cta-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.libro-cta-label {
  font-family: var(--ft-uppercase);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2;
}
.libro-cta-text {
  font-family: var(--ft-body);
  font-size: .78rem;
  color: rgba(244,237,224,.78);
  line-height: 1.35;
}
.libro-cta-arrow {
  font-size: .8rem;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform .25s ease;
}
.libro-cta:hover .libro-cta-arrow { transform: translateX(4px); }

@media (max-width: 600px) {
  .libro-cta { padding: 10px 12px; }
  .libro-cta-icon { width: 32px; }
  .libro-cta-text { font-size: .74rem; }
}

/* ═══════════════════════════════════════════════
   LIBRO DE RECLAMACIONES — Modal
   ═══════════════════════════════════════════════ */
.libro-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.libro-modal.is-open { display: flex; }
.libro-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(4px);
}
.libro-modal-box {
  position: relative;
  z-index: 1;
  background: #141318;
  border: 1px solid rgba(192,57,43,.4);
  border-radius: 14px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px 40px 36px;
  box-shadow: 0 32px 80px rgba(0,0,0,.7);
}
.libro-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s, color .2s;
  display: flex; align-items: center; justify-content: center;
}
.libro-modal-close:hover { background: var(--ember); color: #fff; border-color: var(--ember); }

.libro-modal-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.libro-modal-icon { width: 48px; flex-shrink: 0; }
.libro-modal-header h2 {
  font-family: var(--ft-display);
  font-size: 1.7rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.libro-modal-header p {
  font-family: var(--ft-uppercase);
  font-size: .68rem;
  letter-spacing: .15em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

.libro-modal-aviso {
  background: rgba(192,57,43,.12);
  border: 1px solid rgba(192,57,43,.3);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: .85rem;
  color: var(--ink-muted);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 28px;
}
.libro-modal-aviso i { color: #e74c3c; margin-top: 2px; flex-shrink: 0; }

.libro-paso h3 {
  font-family: var(--ft-uppercase);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.libro-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.libro-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.libro-field label {
  font-family: var(--ft-uppercase);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.libro-field input,
.libro-field select,
.libro-field textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--ink);
  font-family: var(--ft-body);
  font-size: .95rem;
  transition: border-color .2s;
  outline: none;
  width: 100%;
}
.libro-field input:focus,
.libro-field select:focus,
.libro-field textarea:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.09);
}
.libro-field select option { background: #141318; }
.libro-field textarea { resize: vertical; }

.libro-radio-group {
  display: flex;
  gap: 20px;
}
.libro-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: .9rem;
}
.libro-radio input { accent-color: var(--ember); }

.libro-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Confirmación */
.libro-confirmacion {
  text-align: center;
  padding: 20px 0;
}
.libro-check {
  font-size: 3.5rem;
  color: #27ae60;
  margin-bottom: 16px;
}
.libro-confirmacion h3 {
  font-size: 1.5rem;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 12px;
}
.libro-confirmacion p {
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.libro-codigo {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 16px;
  margin: 16px 0 24px;
  font-family: var(--ft-uppercase);
  font-size: .8rem;
  letter-spacing: .15em;
  color: var(--gold) !important;
}

@media (max-width: 580px) {
  .libro-modal-box { padding: 28px 20px; }
  .libro-row { grid-template-columns: 1fr; }
  .libro-radio-group { flex-direction: column; gap: 10px; }
}

/* ═══════════════════════════════════════════════
   SERVICIO DIGITAL — Badge "Online"
   ═══════════════════════════════════════════════ */
.servicio-badge-digital {
  position: absolute;
  top: 16px; right: 16px;
  background: linear-gradient(135deg, #e67e22, #f39c12);
  color: #fff;
  font-family: var(--ft-uppercase);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(230,126,34,.5);
  z-index: 2;
}

/* Grid de 4 servicios — 2x2 en desktop */
@media (min-width: 1200px) {
  .servicios-principales {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 1400px) {
  .servicios-principales {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════
   SERVICIOS — Más espacio y respiración
   ═══════════════════════════════════════════════ */
.servicios {
  padding: 140px 0 160px !important;
}
.servicios > .container {
  max-width: 1400px !important;
  padding: 0 48px !important;
}
.servicios-principales {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 36px !important;
  margin-top: 56px !important;
}
.servicio-principal {
  border-radius: 10px !important;
  display: flex;
  flex-direction: column;
}
.servicio-principal-img {
  aspect-ratio: 4/3 !important;
}
.servicio-principal-body {
  padding: 32px 28px 36px !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.servicio-principal-body p {
  flex: 1;
}
.servicio-principal-body .btn {
  margin-top: auto;
  align-self: flex-start;
}
.servicio-lista {
  margin-bottom: 28px !important;
}
.servicio-lista li {
  padding: 5px 0 !important;
  font-size: .82rem !important;
}

/* Tablet: 2 columnas */
@media (max-width: 1199px) {
  .servicios-principales {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }
  .servicios > .container {
    padding: 0 32px !important;
  }
}
/* Móvil: 1 columna */
@media (max-width: 640px) {
  .servicios-principales {
    grid-template-columns: 1fr !important;
  }
  .servicios > .container {
    padding: 0 20px !important;
  }
}

/* ═══════════════════════════════════════════════
   TESTIMONIOS — Fix título rojo y carrusel
   ═══════════════════════════════════════════════ */
.testimonio-inner h2 {
  color: var(--ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  font-style: normal !important;
}

/* Carrusel — mostrar 3 cards siempre en desktop */
.testimonios-viewport {
  overflow: hidden;
  width: 100%;
}
.testimonios-grid {
  display: flex !important;
  gap: 24px !important;
}
.testimonio-item {
  min-width: calc(33.333% - 16px) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .testimonio-item { min-width: calc(50% - 12px) !important; }
}
@media (max-width: 580px) {
  .testimonio-item { min-width: 100% !important; }
}

/* Historia — Foto 5 adicional */
.historia-foto--5 {
  width: 36%;
  height: 180px;
  top: 200px; right: 2%;
  z-index: 1;
  transform: rotate(3deg);
  border: 3px solid rgba(184,52,31,.35);
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.65);
  transition: transform .4s ease, box-shadow .4s ease;
}
.historia-foto--5 img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.historia-foto--5:hover {
  transform: scale(1.03) translateY(-6px) !important;
  z-index: 10 !important;
}

/* ═══════════════════════════════════════════════
   TESTIMONIOS CARRUSEL — Fix definitivo
   ═══════════════════════════════════════════════ */
.testimonio-inner {
  max-width: 1200px !important;
  width: 100% !important;
  text-align: center;
}
.testimonios-carrusel {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 48px !important;
}
.testimonios-viewport {
  overflow: hidden !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.testimonios-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  transition: transform .5s cubic-bezier(.4,0,.2,1) !important;
  will-change: transform;
}
.testimonio-item {
  min-width: calc(33.333% - 14px) !important;
  max-width: calc(33.333% - 14px) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 900px) {
  .testimonio-item {
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}
@media (max-width: 580px) {
  .testimonio-item {
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════
   HISTORIA — Stack 7 fotos completo
   ═══════════════════════════════════════════════ */
.historia-foto-stack {
  position: relative !important;
  height: 620px !important;
  width: 100% !important;
}

/* Foto 1 — FRENTE, grande, centrada */
.historia-foto--1 {
  width: 58% !important;
  height: 340px !important;
  top: 140px !important; left: 8% !important;
  z-index: 7 !important;
  transform: rotate(-1.5deg) !important;
  border: 3px solid var(--gold-line) !important;
}
/* Foto 2 — arriba derecha */
.historia-foto--2 {
  width: 48% !important;
  height: 260px !important;
  top: 20px !important; right: 2% !important;
  z-index: 6 !important;
  transform: rotate(2deg) !important;
  border: 3px solid rgba(184,52,31,.5) !important;
}
/* Foto 3 — arriba izquierda */
.historia-foto--3 {
  width: 44% !important;
  height: 240px !important;
  top: 0 !important; left: 2% !important;
  z-index: 5 !important;
  transform: rotate(-2.5deg) !important;
  border: 3px solid var(--gold-line) !important;
}
/* Foto 4 — medio derecha */
.historia-foto--4 {
  width: 42% !important;
  height: 220px !important;
  top: 220px !important; right: 0 !important;
  z-index: 4 !important;
  transform: rotate(1.5deg) !important;
  border: 3px solid rgba(184,52,31,.4) !important;
}
/* Foto 5 — abajo derecha */
.historia-foto--5 {
  width: 40% !important;
  height: 200px !important;
  bottom: 0 !important; right: 4% !important;
  z-index: 3 !important;
  transform: rotate(-1deg) !important;
  border: 3px solid var(--gold-line) !important;
}
/* Foto 6 — abajo centro */
.historia-foto--6 {
  width: 38% !important;
  height: 190px !important;
  bottom: 10px !important; left: 28% !important;
  z-index: 2 !important;
  transform: rotate(2.5deg) !important;
  border: 3px solid rgba(184,52,31,.35) !important;
}
/* Foto 7 — abajo izquierda, más atrás */
.historia-foto--7 {
  width: 36% !important;
  height: 180px !important;
  bottom: 20px !important; left: 2% !important;
  z-index: 1 !important;
  transform: rotate(-3deg) !important;
  border: 3px solid rgba(212,168,87,.25) !important;
}

/* Badge encima de todo */
.historia-foto-stack .historia-badge {
  position: absolute !important;
  bottom: 180px !important;
  right: -8px !important;
  z-index: 10 !important;
}

@media (max-width: 900px) {
  .historia-foto-stack { height: 440px !important; }
  .historia-foto--1 { height: 240px !important; top: 110px !important; }
  .historia-foto--2 { height: 185px !important; }
  .historia-foto--3 { height: 170px !important; }
  .historia-foto--4 { height: 160px !important; top: 160px !important; }
  .historia-foto--5 { height: 145px !important; }
  .historia-foto--6 { height: 135px !important; }
  .historia-foto--7 { height: 130px !important; }
  .historia-foto-stack .historia-badge { bottom: 130px !important; }
}
@media (max-width: 540px) {
  .historia-foto-stack { height: 340px !important; }
  .historia-foto--1 { height: 185px !important; width: 64% !important; top: 80px !important; }
  .historia-foto--2 { height: 145px !important; width: 52% !important; }
  .historia-foto--3 { height: 135px !important; width: 48% !important; }
  .historia-foto--4, .historia-foto--5,
  .historia-foto--6, .historia-foto--7 { display: none !important; }
  .historia-foto-stack .historia-badge { bottom: 60px !important; right: 4px !important; }
}

/* ═══════════════════════════════════════════════
   SERVICIOS — Full width proporcional
   ═══════════════════════════════════════════════ */
.servicios {
  padding: 120px 0 140px !important;
}
.servicios > .container {
  max-width: 100% !important;
  padding: 0 40px !important;
}
.servicios-principales {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-top: 56px !important;
}
.servicio-principal {
  border-radius: 8px !important;
  min-height: 720px !important;
  display: flex !important;
  flex-direction: column !important;
}
.servicio-principal-img {
  height: 280px !important;
  aspect-ratio: unset !important;
  flex-shrink: 0;
}
.servicio-principal-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}
.servicio-principal-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 32px 28px 36px !important;
}
.servicio-principal-body p { flex: 1; }
.servicio-principal-body .btn {
  margin-top: auto !important;
  align-self: flex-start !important;
  width: 100% !important;
  text-align: center !important;
}

/* Tablet — 2 columnas */
@media (max-width: 1100px) {
  .servicios-principales {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .servicios > .container { padding: 0 28px !important; }
}
/* Móvil — 1 columna */
@media (max-width: 600px) {
  .servicios-principales {
    grid-template-columns: 1fr !important;
  }
  .servicios > .container { padding: 0 16px !important; }
  .servicio-principal { min-height: unset !important; }
}

/* ═══════════════════════════════════════════════
   SERVICIOS — Margen 5% + encabezado centrado
   ═══════════════════════════════════════════════ */
.servicios > .container {
  max-width: 100% !important;
  padding: 0 5% !important;
}
.servicios > .container > .label,
.servicios > .container > h2,
.servicios > .container > .section-desc {
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  display: block !important;
}

/* ═══════════════════════════════════════════════
   SERVICIOS — Margen 10%
   ═══════════════════════════════════════════════ */
.servicios > .container {
  padding: 0 10% !important;
}

/* ═══════════════════════════════════════════════
   HISTORIA — Fotos 8, 9 y 10 nuevas
   ═══════════════════════════════════════════════ */
.historia-foto-stack { height: 680px !important; }

.historia-foto--8 {
  width: 44% !important;
  height: 210px !important;
  top: 0 !important; right: 18% !important;
  z-index: 2 !important;
  transform: rotate(2deg) !important;
  border: 3px solid rgba(212,168,87,.3) !important;
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.65);
  transition: transform .4s ease, box-shadow .4s ease;
}
.historia-foto--8 img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.historia-foto--8:hover { transform: scale(1.03) translateY(-6px) !important; z-index:10 !important; }

.historia-foto--9 {
  width: 38% !important;
  height: 200px !important;
  top: 30px !important; left: 0 !important;
  z-index: 2 !important;
  transform: rotate(-2deg) !important;
  border: 3px solid rgba(184,52,31,.3) !important;
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.65);
  transition: transform .4s ease, box-shadow .4s ease;
}
.historia-foto--9 img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.historia-foto--9:hover { transform: scale(1.03) translateY(-6px) !important; z-index:10 !important; }

.historia-foto--10 {
  width: 36% !important;
  height: 190px !important;
  bottom: 0 !important; right: 0 !important;
  z-index: 1 !important;
  transform: rotate(3deg) !important;
  border: 3px solid rgba(212,168,87,.2) !important;
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.65);
  transition: transform .4s ease, box-shadow .4s ease;
}
.historia-foto--10 img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.historia-foto--10:hover { transform: scale(1.03) translateY(-6px) !important; z-index:10 !important; }

@media (max-width: 900px) {
  .historia-foto-stack { height: 520px !important; }
  .historia-foto--8,
  .historia-foto--9,
  .historia-foto--10 { height: 150px !important; }
}
@media (max-width: 540px) {
  .historia-foto--8,
  .historia-foto--9,
  .historia-foto--10 { display: none !important; }
}

/* ═══════════════════════════════════════════════
   HISTORIA — Más separación + historia-1 más grande
   ═══════════════════════════════════════════════ */
.historia-foto-stack { height: 720px !important; }

/* PRINCIPAL — más grande y centrada */
.historia-foto--1 {
  width: 62% !important;
  height: 380px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-50%) rotate(-1deg) !important;
  z-index: 7 !important;
  border: 4px solid var(--gold) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.8) !important;
}
.historia-foto--1:hover {
  transform: translateX(-50%) translateY(-55%) scale(1.03) rotate(-1deg) !important;
}

/* Redistribuir las demás bien separadas alrededor */
.historia-foto--2 {
  width: 40% !important; height: 210px !important;
  top: 8% !important; right: 4% !important;
  z-index: 6 !important; transform: rotate(3deg) !important;
}
.historia-foto--3 {
  width: 38% !important; height: 200px !important;
  top: 4% !important; left: 4% !important;
  z-index: 5 !important; transform: rotate(-3deg) !important;
}
.historia-foto--4 {
  width: 36% !important; height: 195px !important;
  top: 38% !important; right: 2% !important;
  z-index: 4 !important; transform: rotate(2deg) !important;
}
.historia-foto--5 {
  width: 36% !important; height: 185px !important;
  bottom: 4% !important; right: 6% !important;
  z-index: 3 !important; transform: rotate(-2deg) !important;
}
.historia-foto--6 {
  width: 34% !important; height: 180px !important;
  bottom: 2% !important; left: 20% !important;
  z-index: 2 !important; transform: rotate(2.5deg) !important;
}
.historia-foto--7 {
  width: 32% !important; height: 170px !important;
  bottom: 6% !important; left: 2% !important;
  z-index: 1 !important; transform: rotate(-3deg) !important;
}
.historia-foto--8 {
  width: 34% !important; height: 175px !important;
  top: 0 !important; left: 30% !important;
  z-index: 2 !important; transform: rotate(1.5deg) !important;
}
.historia-foto--9 {
  width: 32% !important; height: 165px !important;
  top: 36% !important; left: 2% !important;
  z-index: 3 !important; transform: rotate(-2.5deg) !important;
}
.historia-foto--10 {
  width: 30% !important; height: 160px !important;
  bottom: 10% !important; right: 0 !important;
  z-index: 1 !important; transform: rotate(3.5deg) !important;
}

/* Badge sobre la foto principal */
.historia-foto-stack .historia-badge {
  bottom: auto !important;
  top: 46% !important;
  right: 6% !important;
  z-index: 10 !important;
}

@media (max-width: 900px) {
  .historia-foto-stack { height: 520px !important; }
  .historia-foto--1 { width: 64% !important; height: 270px !important; }
  .historia-foto--2,.historia-foto--3,.historia-foto--4,
  .historia-foto--5,.historia-foto--6,.historia-foto--7,
  .historia-foto--8,.historia-foto--9,.historia-foto--10 {
    height: 140px !important; width: 34% !important;
  }
}
@media (max-width: 540px) {
  .historia-foto-stack { height: 360px !important; }
  .historia-foto--1 { width: 70% !important; height: 210px !important; }
  .historia-foto--4,.historia-foto--5,.historia-foto--6,
  .historia-foto--7,.historia-foto--8,.historia-foto--9,.historia-foto--10 {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════
   TESTIMONIOS — Carrusel de 1 en 1, fluido
   ═══════════════════════════════════════════════ */
.testimonio-inner {
  max-width: 1100px !important;
}
.testimonios-carrusel {
  margin-top: 48px !important;
}
.testimonio-item {
  min-width: calc(33.333% - 14px) !important;
  max-width: calc(33.333% - 14px) !important;
}
@media (max-width: 900px) {
  .testimonio-item {
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}
@media (max-width: 580px) {
  .testimonio-item {
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════
   TESTIMONIOS — Cinta infinita como artistas
   ═══════════════════════════════════════════════ */
.testimonios-track-wrapper {
  position: relative;
  /* Full-bleed: rompe el max-width del .testimonio-inner y usa todo el ancho de la pantalla */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  margin-top: 48px;
}
/* Fade en los bordes */
.testimonios-track-wrapper::before,
.testimonios-track-wrapper::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.testimonios-track-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-1), transparent);
}
.testimonios-track-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-1), transparent);
}

/* Track animado */
.testimonios-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: test-scroll 35s linear infinite;
}
.testimonios-track:hover {
  animation-play-state: paused;
}
@keyframes test-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Cards dentro del track */
.testimonios-track .testimonio-item {
  min-width: 360px !important;
  max-width: 360px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 580px) {
  .testimonios-track .testimonio-item {
    min-width: 280px !important;
    max-width: 280px !important;
  }
}

/* ══════════════════════════════════════════
   PAYMENT MODAL — Nuevos estilos
   ══════════════════════════════════════════ */

/* Datos del cliente */
.pay-client { margin-bottom: 1.2rem; }
.pay-client h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim, #888); margin-bottom: .75rem; }
.pay-client-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pay-field { display: flex; flex-direction: column; gap: .3rem; }
.pay-field--full { grid-column: 1 / -1; }
.pay-field label { font-size: .75rem; font-weight: 500; color: var(--ink-dim, #888); }
.pay-field input {
  padding: .55rem .75rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: inherit;
  font-size: .9rem;
  transition: border-color .2s;
}
.pay-field input:focus {
  outline: none;
  border-color: var(--accent, #c0392b);
}
.pay-field input::placeholder { color: rgba(255,255,255,.3); }

/* Panel de transferencia Yape / Plin */
.pay-transfer-panel {
  margin-top: .8rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 1rem;
}
.pay-transfer-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pay-qr-placeholder {
  min-width: 80px;
  height: 80px;
  border: 2px dashed rgba(255,255,255,.25);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  color: rgba(255,255,255,.4);
  font-size: .65rem;
}
.pay-qr-placeholder i { font-size: 1.6rem; }
.pay-qr-placeholder--plin { border-color: rgba(0,191,174,.4); color: rgba(0,191,174,.6); }
.pay-transfer-datos p { margin: .2rem 0; font-size: .88rem; }
.pay-transfer-datos strong { font-size: .95rem; }
.pay-transfer-hint { font-size: .78rem !important; color: rgba(255,255,255,.5) !important; margin-top: .4rem !important; }

.pay-qr-card {
  flex: 0 0 150px;
  width: 150px;
  background: #fff;
  border: 1px solid rgba(212,168,87,.45);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.pay-qr-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 8px;
}
.pay-qr-card--yape { background: #7b2389; }
.pay-qr-card--plin { background: #f7f7f7; }

/* Imagen medios de pago */
.pay-logos-strip {
  text-align: center;
  margin: .8rem 0 .4rem;
  padding: .75rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.pay-logos-strip img {
  max-width: 100%;
  width: 100%;
  height: auto;
  max-height: 40px;
  object-fit: contain;
  object-position: center;
  filter: none;
  opacity: 1;
  display: block;
}

/* Imagen medios de pago en carrito lateral */
.cart-pay-img {
  max-width: 100%;
  width: 100%;
  height: auto;
  max-height: 40px;
  object-fit: contain;
  object-position: left center;
  opacity: 1;
  filter: none;
  display: block;
}

/* ══════════════════════════════════════════════════════════
   MOBILE FIX COMPLETO — Carrito + Modal de pago
   ══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* ── Carrito lateral ── */
  .cart-sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: none;
  }
  .cart-header {
    padding: 20px 18px 16px;
  }
  .cart-title {
    font-size: 1.4rem;
  }
  .cart-body {
    padding: 8px 18px 12px;
  }
  .cart-item {
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 12px;
  }
  .cart-item-name {
    font-size: .88rem;
  }
  .cart-footer {
    padding: 14px 18px 18px;
  }
  .cart-subtotal {
    font-size: .9rem;
    margin-bottom: 12px;
  }
  .cart-pay-methods {
    margin-top: 10px;
  }
  .cart-pay-img {
    max-height: 26px;
  }

  /* ── Modal de pago ── */
  .pay-modal {
    align-items: flex-end;
  }
  .pay-dialog {
    max-width: 100vw !important;
    width: 100vw !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 28px 18px 24px !important;
    margin: 0 !important;
  }
  .pay-head {
    margin-bottom: 18px;
  }
  .pay-head h3 {
    font-size: 1.35rem;
  }

  /* Datos del cliente en 1 columna */
  .pay-client-grid {
    grid-template-columns: 1fr !important;
  }
  .pay-field--full {
    grid-column: 1 !important;
  }
  .pay-field input {
    font-size: .95rem;
    padding: .65rem .75rem;
  }

  /* Métodos de pago en 2x2 */
  .pay-methods-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  .pay-method-card {
    padding: 14px 8px !important;
    min-height: 80px !important;
    gap: 6px;
  }
  .pay-method-name {
    font-size: .65rem !important;
    letter-spacing: .1em;
  }

  /* Panel Yape/Plin más compacto */
  .pay-transfer-panel {
    padding: .75rem;
  }
  .pay-transfer-info {
    gap: .75rem;
  }
  .pay-qr-placeholder {
    min-width: 64px;
    height: 64px;
    font-size: .6rem;
  }
  .pay-qr-placeholder i {
    font-size: 1.3rem;
  }
  .pay-transfer-datos p {
    font-size: .82rem;
  }

  /* Resumen del pedido */
  .pay-summary {
    padding: 14px;
    margin-bottom: 16px;
  }
  .pay-summary-list li {
    font-size: .85rem;
  }
  .pay-summary-total strong {
    font-size: 1.4rem;
  }

  /* Imagen medios de pago */
  .pay-logos-strip img {
    max-height: 28px;
  }

  /* Botón confirmar */
  .pay-foot .btn {
    padding: .85rem;
    font-size: .88rem;
  }
}

/* Tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .cart-sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .pay-dialog {
    max-width: 95vw !important;
    padding: 36px 28px 28px !important;
  }
  .pay-client-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pay-methods-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════
   FORMULARIO TARJETA — Preview animado
   ══════════════════════════════════════════ */

.card-form { display: flex; flex-direction: column; gap: 14px; }

.card-form-preview {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 14px;
  padding: 20px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.15);
  position: relative;
  overflow: hidden;
}
.card-form-preview::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.card-preview-chip {
  width: 34px; height: 26px;
  background: linear-gradient(135deg, #d4a843, #f0c96e);
  border-radius: 5px;
  margin-bottom: 16px;
}
.card-preview-number {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  letter-spacing: .18em;
  color: #fff;
  margin-bottom: 14px;
}
.card-preview-bottom {
  display: flex;
  gap: 24px;
}
.card-preview-label {
  display: block;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(255,255,255,.5);
  margin-bottom: 3px;
}
.card-preview-value {
  display: block;
  font-size: .82rem;
  color: #fff;
  letter-spacing: .06em;
}

.card-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.card-fields .pay-field--full {
  grid-column: 1 / -1;
}

/* Fix imagen medios de pago — forzar visibilidad */
.cart-pay-logos,
.pay-logos-strip {
  background: rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 8px 10px;
}
.cart-pay-img,
.pay-logos-strip img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 38px;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal;
}

@media (max-width: 480px) {
  .card-form-preview { min-height: 110px; padding: 16px; }
  .card-preview-number { font-size: .95rem; }
  .card-fields { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════
   BADGES MEDIOS DE PAGO — Estilo premium
   ══════════════════════════════════════════ */

.cart-pay-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  background: none;
  padding: 0;
}

.pay-logos-strip .cart-pay-logos {
  justify-content: center;
  padding: 4px 0;
}

.pm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.08);
  transition: transform .2s, box-shadow .2s;
  cursor: default;
  overflow: hidden;
}
.pm-badge:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 6px 14px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.18);
}
.pm-badge svg {
  display: block;
}

@media (max-width: 480px) {
  .cart-pay-logos { gap: 5px; }
  .pm-badge svg { transform: scale(.9); }
}

/* SVG premium dentro del selector de métodos de pago */
.pm-svg {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
  transition: filter .2s;
}
.pay-method:hover .pm-svg,
.pay-method input:checked ~ .pay-method-card .pm-svg {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.7)) brightness(1.1);
}
.pay-method-card {
  gap: 8px !important;
}


/* =====================================================================
   HERO v5 — Reorganización estética premium (sin tocar nada externo al hero)
   Objetivos:
   - Todo en 100vh, sin scroll dentro del hero
   - Tipografía balanceada, video logo del tamaño correcto
   - Tira de 4 parrillas al fondo, alineadas a una misma "línea de piso"
   - Máscaras radiales adaptadas por tipo (landscape vs portrait) para
     disimular los fondos fotográficos hasta que subas PNGs transparentes
   ===================================================================== */

/* 1) Contenedor hero estricto a la ventana */
.hero {
  min-height: 100vh;
  /* FIX v10.2: height/max-height fijos en 100vh recortaban la franja y la
     frase cuando el contenido excedía la ventana. Ahora crece si hace falta. */
  height: auto;
  max-height: none;
  overflow: hidden;
  padding-bottom: 0;
  padding-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenido centrado con espacio para navbar */
.hero > .hero-content {
  /* FIX v10.2: el padding inferior de 140px reservaba sitio para la frase
     absolute; ahora la frase está en flujo debajo de la franja */
  padding: 96px 24px 8px;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  justify-content: center;
}
.hero-content .hero-eyebrow { margin-bottom: 14px; }
.hero-content h1 {
  font-size: clamp(2rem, min(5.4vw, 7.6vh), 4.6rem);
  line-height: 1;
  margin: 0 0 4px;
}
.hero-content h1 span { font-size: .78em; margin-top: .08em; }
.hero-content .hero-video-logo {
  width: clamp(78px, min(8vw, 10.5vh), 116px);
  height: auto;
  margin: 6px auto 2px;
  display: block;
}
.hero-content .hero-sub {
  font-size: clamp(.85rem, min(1.05vw, 1.8vh), 1.05rem);
  margin: 8px auto clamp(14px, 2.2vh, 26px);
  max-width: 520px;
}
.hero-content .hero-cta {
  padding: clamp(11px, 1.6vh, 16px) clamp(30px, 3.2vw, 44px);
  font-size: clamp(.7rem, 1.5vh, .78rem);
}

/* 3) Tira de parrillas — absoluta al fondo, full bleed */
.hero-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42vh;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
  gap: 0;
  padding: 0;
  pointer-events: none;
}

/* Línea de piso dorada sutil — divide texto / parrillas */
.hero-strip-line {
  position: absolute;
  top: 6px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,168,87,.28) 18%,
    rgba(212,168,87,.5) 50%,
    rgba(212,168,87,.28) 82%,
    transparent 100%);
  z-index: 1;
}
.hero-strip-line::before,
.hero-strip-line::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 8px var(--gold-line);
}
.hero-strip-line::before { left: 12%; }
.hero-strip-line::after  { right: 12%; }

/* Cada parrilla en un "frame" — controla recorte y máscara */
.hero-grill-frame {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
}

.hero-grill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  /* Aumento de escala por imagen — recorta los fondos fotográficos */
  transform: scale(1);
  transform-origin: bottom center;
  filter:
    contrast(1.06)
    brightness(.94)
    saturate(.95)
    drop-shadow(0 24px 30px rgba(0,0,0,.85))
    drop-shadow(0 8px 14px rgba(0,0,0,.55));
  transition: transform .6s var(--ease), filter .6s var(--ease);
  will-change: transform;
}

/* Máscara por tipo de foto.
   Landscape (1101×615): grill al centro, fondo a los lados → máscara estrecha
   Portrait (rejilla/cilindro): grill llena el frame → máscara más amplia
   Top y bottom fade en todas para fundir con el hero */
.hero-grill--1,
.hero-grill--2 {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 92%, transparent 100%),
    radial-gradient(ellipse 38% 95% at 50% 55%, #000 55%, transparent 96%);
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 92%, transparent 100%),
    radial-gradient(ellipse 38% 95% at 50% 55%, #000 55%, transparent 96%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transform: scale(1.35);
}
.hero-grill--3,
.hero-grill--4 {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 5%, #000 94%, transparent 100%),
    radial-gradient(ellipse 70% 92% at 50% 52%, #000 60%, transparent 96%);
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 5%, #000 94%, transparent 100%),
    radial-gradient(ellipse 70% 92% at 50% 52%, #000 60%, transparent 96%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transform: scale(1.05);
}

/* Hover sutil */
.hero-grill-frame:hover .hero-grill {
  transform: scale(var(--scale-hover, 1.4)) translateY(-4px);
  filter:
    contrast(1.1)
    brightness(1)
    saturate(1.05)
    drop-shadow(0 30px 40px rgba(0,0,0,.95))
    drop-shadow(0 0 24px rgba(212,168,87,.18));
}
.hero-grill-frame--1:hover .hero-grill,
.hero-grill-frame--2:hover .hero-grill { transform: scale(1.42) translateY(-4px); }
.hero-grill-frame--3:hover .hero-grill,
.hero-grill-frame--4:hover .hero-grill { transform: scale(1.12) translateY(-4px); }

/* Glow ambar bajo la tira — preserva el ambiente cinematográfico */
.hero-strip::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 92%;
  height: 60%;
  background:
    radial-gradient(ellipse at center bottom, rgba(184,52,31,.22), transparent 65%),
    radial-gradient(ellipse 50% 100% at center bottom, rgba(212,168,87,.08), transparent 75%);
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
}

/* Ocultamos el indicador de scroll original */
.hero-scroll { display: none; }

/* 4) Responsive */
@media (max-width: 1024px) {
  .hero { padding-bottom: 38vh; }
  .hero-strip { height: 38vh; }
}
@media (max-width: 768px) {
  .hero { padding-bottom: 32vh; }
  .hero > .hero-content { padding-top: 76px; }
  .hero-content h1 { font-size: clamp(1.7rem, min(7vw, 7.5vh), 3rem); }
  .hero-content .hero-video-logo { width: clamp(70px, min(16vw, 10vh), 100px); }
  .hero-strip { height: 32vh; }
  .hero-strip-line { left: 6%; right: 6%; }
  .hero-strip-line::before { left: 6%; }
  .hero-strip-line::after  { right: 6%; }
  /* en móvil, máscaras menos agresivas para no esconder demasiado */
  .hero-grill--1, .hero-grill--2 { transform: scale(1.25); }
}
@media (max-width: 480px) {
  .hero { padding-bottom: 28vh; }
  .hero-strip { height: 28vh; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grill { transition: none; }
}

/* ---------------------------------------------------------------------
   POR QUÉ ELEGIRNOS
   --------------------------------------------------------------------- */
.por-que {
  background: var(--bg-2);
  padding: 120px 0;
}
.por-que-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.por-que-item {
  background: var(--bg-1);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 40px 28px;
  text-align: center;
  transition: transform .3s ease, border-color .3s ease;
}
.por-que-item:hover {
  transform: translateY(-6px);
  border-color: var(--clr-gold);
}
.por-que-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(192,57,43,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.por-que-icon i {
  font-size: 26px;
  color: var(--clr-gold);
}
.por-que-item h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-gold);
  margin-bottom: 12px;
}
.por-que-item p {
  font-size: .9rem;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .por-que-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .por-que-grid { grid-template-columns: 1fr; }
}

/* Por qué elegirnos inline (dentro de productos) */
.por-que-inline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 48px;
  padding-top: 0;
}
.por-que-inline-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 24px;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background .2s;
}
.por-que-inline-item:last-child { border-right: none; }
.por-que-inline-item:hover { background: rgba(255,255,255,.03); }
.por-que-inline-item i {
  font-size: 28px;
  color: var(--clr-gold);
  flex-shrink: 0;
}
.por-que-inline-item div { display: flex; flex-direction: column; gap: 3px; }
.por-que-inline-item strong {
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.por-que-inline-item span {
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .por-que-inline { grid-template-columns: repeat(2, 1fr); }
  .por-que-inline-item:nth-child(2) { border-right: none; }
  .por-que-inline-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,.08); }
  .por-que-inline-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,.08); border-right: none; }
}
@media (max-width: 540px) {
  .por-que-inline { grid-template-columns: 1fr; }
  .por-que-inline-item { border-right: none; border-top: 1px solid rgba(255,255,255,.08); }
  .por-que-inline-item:first-child { border-top: none; }
}

/* Hero frase impacto */
.hero-frase {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
}
.hero-blockquote {
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: rgba(255,255,255,.75);
  font-style: italic;
  letter-spacing: .02em;
  line-height: 1.6;
  border: none;
  margin: 0;
  padding: 0;
}
.hero-blockquote em {
  display: block;
  font-size: .8em;
  color: var(--clr-gold);
  margin-top: 8px;
  font-style: normal;
  letter-spacing: .06em;
}

/* Servicios + Nosotros fusionados */
.servicios-nosotros {
  margin-top: 80px;
  padding-top: 60px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.servicios-nosotros-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: center;
}
.servicios-nosotros-img img {
  width: 100%;
  border-radius: 12px;
  filter: grayscale(20%);
}
.servicios-nosotros-texto h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  margin-bottom: 16px;
}
.servicios-nosotros-texto p {
  color: rgba(255,255,255,.7);
  line-height: 1.7;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .servicios-nosotros-grid { grid-template-columns: 1fr; }
}

/* Hero mejorado v5 */
.hero-line-gold {
  color: var(--clr-gold) !important;
  text-shadow: 0 0 40px rgba(200,161,74,.3);
}
.hero-frase {
  /* FIX v10.2: en flujo, justo debajo de la franja de hitos
     (antes era absolute bottom:72px y quedaba anclada al fondo) */
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
  margin: 22px auto 56px;
  max-width: 900px;
}
.hero-frase-linea {
  width: 48px;
  height: 1px;
  background: var(--clr-gold);
  margin: 0 auto 14px;
  opacity: .7;
}
.hero-frase-texto {
  font-size: clamp(.95rem, 1.8vw, 1.25rem);
  font-style: italic;
  color: rgba(255,255,255,.88);
  letter-spacing: .03em;
  line-height: 1.5;
  margin-bottom: 8px;
  font-family: Georgia, serif;
}
.hero-frase-firma {
  font-size: clamp(.7rem, 1.2vw, .85rem);
  color: var(--clr-gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

/* Historia + Quiénes somos fusionados */
.historia-nosotros {
  margin-top: 80px;
  padding-top: 60px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.historia-nosotros-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: center;
}
.historia-nosotros-img img {
  width: 100%;
  border-radius: 12px;
  filter: grayscale(15%);
}
.historia-nosotros-texto h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 16px;
  color: #fff;
}
.historia-nosotros-texto p {
  color: rgba(255,255,255,.7);
  line-height: 1.75;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .historia-nosotros-grid { grid-template-columns: 1fr; }
}







/* ── QUIÉNES SOMOS — Slider lateral ── */
.qs-wrapper {
  display: flex;
  overflow: hidden;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
}
.qs-slider-outer {
  flex: 1;
  overflow: hidden;
}
.qs-slider-wrap {
  display: flex;
  width: 200%;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.qs-panel {
  width: 50%;
  min-height: 10px;
}
.qs-panel--placeholder {
  background: transparent;
}
.qs-panel--content {
  background: var(--bg-2);
  padding: 40px 48px;
}
.qs-inner { max-width: 640px; }
.qs-back {
  background: transparent; border: none;
  color: var(--ink-dim); font-size: .75rem;
  letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; font-family: var(--ft-uppercase);
  margin-bottom: 20px; display: inline-flex;
  align-items: center; gap: 6px;
  transition: color .2s;
  padding: 0;
}
.qs-back:hover { color: var(--gold); }
.qs-header {
  display: flex; align-items: center;
  gap: 16px; margin-bottom: 24px;
}
.qs-logo {
  width: 52px; height: 52px; min-width: 52px;
  background: var(--bg-3); border-radius: 8px;
  overflow: hidden; border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
}
.qs-logo img { width: 40px; height: 40px; object-fit: contain; opacity: .85; }
.qs-titulo {
  font-family: var(--ft-uppercase);
  font-size: 1.15rem; font-weight: 600;
  color: var(--ink); line-height: 1.2; margin: 0 0 4px;
}
.qs-sub {
  font-size: .75rem; color: var(--ink-dim);
  letter-spacing: .1em;
}
.qs-cards {
  display: flex; flex-direction: column; gap: 12px;
}
.qs-card {
  background: var(--bg-3); border-radius: 8px;
  padding: 14px 18px; border-left: 3px solid var(--gold);
}
.qs-card h4 {
  font-family: var(--ft-uppercase);
  font-size: .7rem; letter-spacing: .2em;
  color: var(--gold); text-transform: uppercase;
  margin-bottom: 6px;
}
.qs-card p {
  font-size: .85rem; color: var(--ink-muted);
  line-height: 1.65;
}

/* Flecha lateral */
.qs-arrow-tab {
  width: 40px; min-width: 40px;
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-left: 1px solid var(--line-strong);
  transition: background .2s;
}
.qs-arrow-tab:hover { background: var(--bg-4); }
.qs-arrow-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px; padding: 20px 0;
}
.qs-arrow-icon {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 14px;
  transition: all .3s;
}
.qs-arrow-tab:hover .qs-arrow-icon {
  background: var(--gold); color: var(--bg-0);
}
.qs-arrow-label {
  font-family: var(--ft-uppercase);
  font-size: .65rem; letter-spacing: .2em;
  color: var(--gold); text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .qs-panel--content { padding: 28px 20px; }
  .qs-titulo { font-size: 1rem; }
  .qs-arrow-tab { width: 32px; min-width: 32px; }
  .qs-arrow-label { font-size: .6rem; }
}

/* ── historia-contenido-wrap: columna derecha con slider integrado ── */
.historia-contenido-wrap {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
}
.historia-contenido-wrap .qs-slider-outer {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.historia-contenido-wrap .qs-slider-wrap {
  display: flex;
  width: 200%;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.historia-contenido-wrap .qs-panel {
  width: 50%;
  min-width: 0;
}
.historia-contenido-wrap .qs-panel.historia-contenido {
  padding: 0;
}
.historia-contenido-wrap .qs-panel--content {
  padding: 0 0 0 40px;
  background: transparent;
}
.historia-contenido-wrap .qs-arrow-tab {
  width: 40px;
  min-width: 40px;
  border-left: 1px solid var(--line-strong);
  background: rgba(255,255,255,.03);
}
@media (max-width: 900px) {
  .historia-contenido-wrap { flex-direction: column; }
  .historia-contenido-wrap .qs-arrow-tab {
    width: 100%; min-width: unset; height: 36px;
    border-left: none; border-top: 1px solid var(--line-strong);
    flex-direction: row;
  }
  .historia-contenido-wrap .qs-arrow-inner { flex-direction: row; padding: 0 16px; }
  .historia-contenido-wrap .qs-arrow-label { writing-mode: horizontal-tb; transform: none; }
}

/* ── CORRECCIONES HISTORIA v10 ── */
.historia-split {
  padding: 0 0 0 20px !important;
  gap: 40px !important;
  grid-template-columns: 45% 1fr !important;
}
.historia-fotos {
  margin-left: -20px;
}
.historia-contenido-wrap {
  min-width: 0;
  padding-right: 0;
}
.historia-contenido-wrap .qs-panel--content {
  padding: 10px 20px 20px 20px !important;
  background: var(--bg-2) !important;
}
.historia-contenido-wrap .qs-arrow-tab {
  width: 44px !important;
  min-width: 44px !important;
  background: var(--bg-3) !important;
}
.qs-titulo {
  font-size: 1.35rem !important;
  margin-bottom: 6px !important;
}
.qs-sub {
  font-size: .85rem !important;
}
.qs-card h4 {
  font-size: .8rem !important;
  letter-spacing: .15em !important;
  margin-bottom: 8px !important;
}
.qs-card p {
  font-size: .95rem !important;
  line-height: 1.7 !important;
  color: var(--ink-muted) !important;
}
.qs-card {
  padding: 16px 18px !important;
  margin-bottom: 2px;
}
.qs-back {
  font-size: .8rem !important;
  margin-bottom: 16px !important;
}
.qs-header {
  margin-bottom: 20px !important;
}
.qs-logo {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
}

/* ══════════════════════════════════════════
   QS SLIDER v10 FINAL — Historia + Quiénes somos
   ══════════════════════════════════════════ */

/* Contenedor derecho del split */
.qs-contenido-wrap {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

/* Slider outer */
.qs-contenido-wrap .qs-slider-outer {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.qs-contenido-wrap .qs-slider-wrap {
  display: flex;
  width: 200%;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.qs-contenido-wrap .qs-panel {
  width: 50%;
  min-width: 0;
  padding: 0 48px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.qs-contenido-wrap .qs-panel-qs {
  padding: 0 32px;
  background: var(--bg-1);
}

/* Panel Quiénes somos — fluido */
.qs-volver {
  background: none; border: none;
  color: var(--ink-dim); font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; font-family: var(--ft-uppercase);
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 28px; padding: 0;
  transition: color .2s;
}
.qs-volver:hover { color: var(--gold); }

.qs-logo-row {
  display: flex; align-items: center;
  gap: 14px; margin-bottom: 28px;
}
.qs-logo-sm {
  width: 46px; height: 46px; min-width: 46px;
  background: var(--bg-3); border-radius: 8px;
  border: 1px solid var(--gold-line);
  overflow: hidden; display: flex;
  align-items: center; justify-content: center;
}
.qs-logo-sm img {
  width: 36px; height: 36px;
  object-fit: contain; opacity: .85;
}
.qs-brand {
  font-family: var(--ft-uppercase);
  font-size: 1.05rem; font-weight: 600;
  color: var(--ink); line-height: 1.2;
}
.qs-brand-sub {
  font-size: .78rem; color: var(--ink-dim);
  margin-top: 2px; display: block;
}

.qs-bloque { margin-bottom: 16px; }
.qs-bloque-label {
  font-family: var(--ft-uppercase);
  font-size: .7rem; letter-spacing: .25em;
  color: var(--gold); text-transform: uppercase;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.qs-bloque-label::before {
  content: ''; display: block;
  width: 20px; height: 1px;
  background: var(--gold);
}
.qs-bloque p {
  font-size: .95rem; color: var(--ink-muted);
  line-height: 1.75;
}
.qs-divider {
  height: 1px;
  background: var(--line);
  margin: 14px 0;
}

/* FLECHA DORADA LLAMATIVA */
.qs-flecha-tab {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  background: var(--gold);
  border-radius: 8px 0 0 8px;
  padding: 16px 10px;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  cursor: pointer;
  box-shadow: -4px 0 24px rgba(0,0,0,.5);
  transition: background .2s;
  z-index: 10;
}
.qs-flecha-tab:hover { background: var(--gold-soft); }
.qs-flecha-arrow {
  font-size: 18px; font-weight: 700;
  color: #08070a;
  transition: transform .3s;
  display: block; line-height: 1;
}
.qs-flecha-tab:hover .qs-flecha-arrow { transform: translateX(3px); }
.qs-flecha-label {
  font-family: var(--ft-uppercase);
  font-size: .65rem; letter-spacing: .25em;
  color: #08070a; text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 600;
}

@media (max-width: 900px) {
  .qs-contenido-wrap { flex-direction: column; }
  .qs-flecha-tab {
    position: relative; right: auto; top: auto;
    transform: none; border-radius: 0 0 8px 8px;
    flex-direction: row; padding: 10px 20px;
    width: 100%; justify-content: center;
  }
  .qs-flecha-label { writing-mode: horizontal-tb; transform: none; }
  .qs-contenido-wrap .qs-panel { padding: 24px 20px; }
}

/* ══ CORRECCIONES FINALES v10 ══ */

/* Historia split — fotos más a la izquierda, menos gap */
.historia-split {
  padding: 0 0 0 0 !important;
  gap: 32px !important;
  grid-template-columns: 48% 1fr !important;
  max-width: 100% !important;
  overflow: hidden;
}
.historia-fotos {
  margin-left: -40px !important;
}

/* Texto Historia — más espacio a la derecha para no solapar con flecha */
.qs-contenido-wrap .qs-panel {
  padding: 0 80px 0 0 !important;
}

/* Textos Quiénes somos — mismo tamaño que Historia */
.qs-panel-qs {
  padding: 0 80px 0 0 !important;
}
.qs-brand {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}
.qs-brand-sub {
  font-size: .9rem !important;
  color: var(--ink-dim) !important;
}
.qs-bloque-label {
  font-size: .8rem !important;
  letter-spacing: .25em !important;
  margin-bottom: 10px !important;
}
.qs-bloque p {
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: var(--ink-muted) !important;
}
.qs-volver {
  font-size: .8rem !important;
  margin-bottom: 24px !important;
}
.qs-logo-row {
  margin-bottom: 28px !important;
}
.qs-bloque {
  margin-bottom: 18px !important;
}
.qs-divider {
  margin: 16px 0 !important;
}

/* FLECHA — más apilada y llamativa */
.qs-flecha-tab {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--gold) !important;
  border-radius: 10px 0 0 10px !important;
  padding: 20px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  box-shadow: -6px 0 30px rgba(0,0,0,.6) !important;
  transition: background .2s, padding .2s !important;
  z-index: 20 !important;
  min-width: 44px !important;
}
.qs-flecha-tab:hover {
  background: var(--gold-soft) !important;
  padding: 24px 12px !important;
}
.qs-flecha-arrow {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #08070a !important;
  display: block !important;
  line-height: 1 !important;
  transition: transform .3s !important;
}
.qs-flecha-tab:hover .qs-flecha-arrow {
  transform: translateX(4px) !important;
}
.qs-flecha-label {
  font-size: .68rem !important;
  letter-spacing: .3em !important;
  color: #08070a !important;
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  font-weight: 700 !important;
  font-family: var(--ft-uppercase) !important;
}

/* ── 2 ajustes finales: fotos más izquierda, texto más derecha ── */
.historia-fotos {
  margin-left: -80px !important;
}
.qs-contenido-wrap .qs-panel,
.qs-contenido-wrap .qs-panel-qs {
  padding-left: 48px !important;
  padding-right: 72px !important;
}

/* ── RESET: volver historia-split y fotos a valores originales ── */
.historia-split {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  gap: 80px !important;
  grid-template-columns: 1fr 1fr !important;
}
.historia-fotos {
  margin-left: 0 !important;
  position: relative !important;
}
/* Solo mover el stack de fotos dentro sin afectar el contenedor */
.historia-foto-stack {
  position: relative !important;
  margin-left: -60px !important;
}
/* Texto Historia con padding izquierdo para separar del centro */
.qs-contenido-wrap .qs-panel,
.qs-contenido-wrap .qs-panel-qs {
  padding-left: 20px !important;
  padding-right: 64px !important;
}

/* ── Fotos: mover stack a la izquierda sin cambiar tamaño ── */
.historia-foto-stack {
  margin-left: -60px !important;
}

/* ── 3 ajustes: logo más grande, texto alineado, botón centrado ── */
.qs-logo-sm {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
}
.qs-logo-sm img {
  width: 52px !important;
  height: 52px !important;
}
.qs-bloque p {
  text-align: left !important;
  max-width: 480px !important;
}
.qs-brand {
  max-width: 400px !important;
  line-height: 1.3 !important;
}
.qs-flecha-label {
  writing-mode: horizontal-tb !important;
  transform: none !important;
  text-align: center !important;
  font-size: .6rem !important;
  letter-spacing: .2em !important;
  white-space: nowrap !important;
  padding: 0 2px !important;
}
.qs-flecha-tab {
  padding: 14px 8px !important;
  gap: 8px !important;
  width: 48px !important;
}

/* ── Botón flecha: más ancho, texto vertical legible, pegado al borde ── */
.qs-flecha-tab {
  width: 36px !important;
  min-width: 36px !important;
  padding: 20px 6px !important;
  right: 0 !important;
  border-radius: 10px 0 0 10px !important;
}
.qs-flecha-label {
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  font-size: .62rem !important;
  letter-spacing: .25em !important;
  text-align: center !important;
}
.qs-flecha-arrow {
  font-size: 16px !important;
}

/* ── Botón: pegado al borde derecho, dorado engloba todo ── */
.qs-flecha-tab {
  right: 0 !important;
  position: absolute !important;
  background: var(--gold) !important;
  border-radius: 10px 0 0 10px !important;
  overflow: visible !important;
  width: auto !important;
  min-width: 38px !important;
  padding: 20px 10px !important;
}
.qs-flecha-arrow,
.qs-flecha-label {
  color: #08070a !important;
}

/* ══ 3 CAMBIOS FINALES ══ */

/* 1. Centrar verticalmente título Historia */
.qs-contenido-wrap .qs-panel {
  justify-content: center !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* 2. Logo centrado y arriba del texto en panel Quiénes somos */
.qs-logo-row {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 28px !important;
}
.qs-logo-sm {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  margin-bottom: 12px !important;
}
.qs-logo-sm img {
  width: 64px !important;
  height: 64px !important;
}
.qs-brand {
  text-align: center !important;
}
.qs-brand-sub {
  text-align: center !important;
}

/* 3. Botones horizontales con fondo dorado completo */
.qs-flecha-tab {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--gold) !important;
  border-radius: 10px 0 0 10px !important;
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: unset !important;
  cursor: pointer !important;
  box-shadow: -4px 0 20px rgba(0,0,0,.5) !important;
  transition: background .2s !important;
}
.qs-flecha-tab:hover {
  background: var(--gold-soft) !important;
}
.qs-flecha-arrow {
  writing-mode: horizontal-tb !important;
  transform: none !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #08070a !important;
  line-height: 1 !important;
}
.qs-flecha-label {
  writing-mode: horizontal-tb !important;
  transform: none !important;
  font-size: .7rem !important;
  letter-spacing: .2em !important;
  color: #08070a !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  font-family: var(--ft-uppercase) !important;
  text-transform: uppercase !important;
}

/* ── Botón vertical: → arriba, QUIÉNES / SOMOS abajo, centrado ── */
.qs-flecha-tab {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--gold) !important;
  border-radius: 10px 0 0 10px !important;
  padding: 16px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 44px !important;
  min-width: 44px !important;
  cursor: pointer !important;
  box-shadow: -4px 0 20px rgba(0,0,0,.5) !important;
  transition: background .2s !important;
  z-index: 20 !important;
}
.qs-flecha-tab:hover { background: var(--gold-soft) !important; }
.qs-flecha-arrow {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #08070a !important;
  display: block !important;
  text-align: center !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  line-height: 1 !important;
}
.qs-flecha-label {
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  font-size: .65rem !important;
  letter-spacing: .25em !important;
  color: #08070a !important;
  font-weight: 700 !important;
  font-family: var(--ft-uppercase) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* ── Nuestra Historia + título centrados ── */
.qs-contenido-wrap .qs-panel .label-historia,
.qs-contenido-wrap .qs-panel .historia-titulo {
  text-align: center !important;
}
.qs-contenido-wrap .qs-panel .label-historia::before,
.qs-contenido-wrap .qs-panel .label-historia::after {
  display: inline-block !important;
}

/* ── 3 correcciones finales ── */

/* 1. NUESTRA HISTORIA centrado */
.qs-contenido-wrap .label-historia {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
}

/* 2. Stats centrados */
.historia-stats {
  justify-content: center !important;
}

/* 3. Botón HORIZONTAL: → QUIÉNES SOMOS en una línea */
.qs-flecha-tab {
  flex-direction: row !important;
  width: auto !important;
  min-width: unset !important;
  padding: 12px 18px !important;
  gap: 8px !important;
}
.qs-flecha-arrow {
  writing-mode: horizontal-tb !important;
  transform: none !important;
}
.qs-flecha-label {
  writing-mode: horizontal-tb !important;
  transform: none !important;
  white-space: nowrap !important;
  font-size: .72rem !important;
}

/* ── Botón: pegado al borde derecho, apilado → / QUIÉNES / SOMOS ── */
.qs-flecha-tab {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--gold) !important;
  border-radius: 10px 0 0 10px !important;
  padding: 20px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 44px !important;
  min-width: 44px !important;
  cursor: pointer !important;
  box-shadow: -4px 0 20px rgba(0,0,0,.5) !important;
  z-index: 20 !important;
}
.qs-flecha-arrow {
  display: block !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #08070a !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  line-height: 1 !important;
}
.qs-flecha-label {
  display: block !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  font-size: .58rem !important;
  letter-spacing: .15em !important;
  color: #08070a !important;
  font-weight: 700 !important;
  font-family: var(--ft-uppercase) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
  width: 28px !important;
  line-height: 1.3 !important;
}

/* ── Botón: posición al lado del texto, no pegado al borde ── */
.qs-flecha-tab {
  position: absolute !important;
  right: -22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--gold) !important;
  border-radius: 8px !important;
  padding: 16px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 44px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
  z-index: 20 !important;
}

/* ── Botón más ancho para que QUIÉNES SOMOS quepa completo ── */
.qs-flecha-tab {
  width: 56px !important;
  min-width: 56px !important;
  padding: 18px 12px !important;
}
.qs-flecha-label {
  width: 36px !important;
  font-size: .6rem !important;
  letter-spacing: .1em !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
  text-align: center !important;
  white-space: normal !important;
}
.qs-flecha-arrow {
  font-size: 14px !important;
}

/* ── Botón fuera de overflow:hidden, posicionado desde historia-split ── */
.historia-split {
  position: relative !important;
}
.qs-flecha-tab {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--gold) !important;
  border-radius: 10px 0 0 10px !important;
  padding: 20px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 56px !important;
  cursor: pointer !important;
  box-shadow: -4px 0 20px rgba(0,0,0,.5) !important;
  z-index: 30 !important;
  overflow: visible !important;
}
.qs-flecha-tab:hover { background: var(--gold-soft) !important; }
.qs-flecha-arrow {
  display: block !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #08070a !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  line-height: 1 !important;
}
.qs-flecha-label {
  display: block !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  font-size: .62rem !important;
  letter-spacing: .1em !important;
  color: #08070a !important;
  font-weight: 700 !important;
  font-family: var(--ft-uppercase) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
  width: 36px !important;
  line-height: 1.4 !important;
}

/* ── Botón más ancho para que QUIÉNES y SOMOS quepan completos ── */
.qs-flecha-tab {
  width: 80px !important;
  min-width: 80px !important;
}
.qs-flecha-label {
  width: 60px !important;
  font-size: .68rem !important;
}

/* ── Logo Quiénes somos más grande ── */
.qs-logo-sm {
  width: 90px !important;
  height: 90px !important;
  min-width: 90px !important;
}
.qs-logo-sm img {
  width: 74px !important;
  height: 74px !important;
}

/* ── Fix dropdown: gap invisible para que no se cierre al mover el mouse ── */
.nav-dropdown-menu {
  margin-top: -14px !important;
  padding-top: 22px !important;
}
.nav-dropdown-menu::before {
  top: 15px !important;
}
.nav-dropdown-menu::after {
  top: 16px !important;
}

/* ══════════════════════════════════════════
   RESPONSIVE MÓVIL — Correcciones generales
   ══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Historia — colapsar a una columna */
  .historia-split {
    grid-template-columns: 1fr !important;
    padding: 0 20px !important;
    gap: 24px !important;
  }
  .historia-fotos {
    margin-left: 0 !important;
  }
  .historia-foto-stack {
    margin-left: 0 !important;
    height: 320px !important;
  }

  /* QS contenido wrap — full width */
  .qs-contenido-wrap {
    width: 100% !important;
    min-width: unset !important;
  }
  .qs-contenido-wrap .qs-panel,
  .qs-contenido-wrap .qs-panel-qs {
    padding: 24px 16px !important;
    width: 100% !important;
  }
  .qs-contenido-wrap .qs-slider-wrap {
    width: 200% !important;
  }

  /* Botón quiénes somos en móvil */
  .qs-flecha-tab {
    right: 0 !important;
    top: auto !important;
    bottom: 20px !important;
    transform: none !important;
  }

  /* Textos historia centrados en móvil */
  .historia-titulo {
    font-size: 2.2rem !important;
  }
  .label-historia {
    justify-content: flex-start !important;
  }
  .historia-texto p {
    font-size: .95rem !important;
  }
  .historia-stats {
    justify-content: flex-start !important;
    gap: 20px !important;
  }
}

/* Video hero — fallback para móvil */
@media (max-width: 768px) {
  .hero-video {
    display: none !important;
  }
  .hero {
    background-image: url('images/hero/hero-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
  }
}

/* Video logo hero — fix para móvil */
@media (max-width: 768px) {
  .hero-video-logo {
    width: 120px !important;
    height: 120px !important;
  }
  .hero-title .hero-line-1 {
    font-size: 2.2rem !important;
  }
  .hero-title .hero-line-2 {
    font-size: 2.8rem !important;
  }
  .hero-sub {
    font-size: .9rem !important;
  }
}

/* === FRANJA IBEROAMERICANO === */
/* === FRANJA IBEROAMERICANO === */
.ibero-franja-wrap {
  position: relative;
  z-index: 20;
  margin-top: 1.5rem;
  /* FIX v10.1: la franja ahora es hija directa del .hero (full width),
     así ocupa el ancho completo SIEMPRE — sin depender de 100vw,
     que fallaba con scrollbar, zoom o capturas de pantalla completas */
  width: 100%;
  align-self: stretch;
  flex-shrink: 0;
  margin-left: 0;
}

.ibero-franja {
  background: #c9a84c;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  cursor: pointer;
  transition: background .2s ease;
  width: 100%;
}

.ibero-franja:hover {
  background: #d4b558;
}

.ibero-franja-text {
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1a0a00;
  font-weight: 800;
  white-space: nowrap;
}

.ibero-franja-sep {
  width: 1px;
  height: 22px;
  background: rgba(26,10,0,.3);
  flex-shrink: 0;
}

.ibero-franja-hint {
  font-size: .72rem;
  letter-spacing: .1em;
  color: rgba(26,10,0,.6);
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

/* Overlay difuminado */
.ibero-hero-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.ibero-hero-overlay.ibero-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Popup centrado en pantalla */
.ibero-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(.96);
  width: 400px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  background: #1a0a00;
  border: 1px solid rgba(201,168,76,.6);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 9999;
}

.ibero-popup.ibero-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.ibero-popup-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.ibero-popup-body {
  padding: 1.2rem 1.4rem 1.4rem;
}

.ibero-popup-eyebrow {
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c9a84c;
  margin-bottom: .45rem;
}

.ibero-popup-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f5efe0;
  margin-bottom: .5rem;
}

.ibero-popup-desc {
  font-size: .82rem;
  color: rgba(245,239,224,.6);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.ibero-popup-medallas {
  display: flex;
  gap: .5rem;
}

.ibero-medalla {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.3);
  border-radius: 8px;
  padding: .6rem .65rem;
  flex: 1;
}

.ibero-medalla-pos {
  font-size: .95rem;
  font-weight: 700;
  color: #f5efe0;
}

.ibero-medalla-cat {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c9a84c;
}

@media (max-width: 600px) {
  .ibero-franja {
    gap: .6rem;
    padding: .75rem 1rem;
    flex-wrap: wrap;
  }
  .ibero-franja-sep { display: none; }
  .ibero-franja-text { font-size: .72rem; }
  .ibero-popup-img { height: 260px; }
}

/* === POPUP HITOS TIMELINE === */
.ibero-popup-header {
  padding: 1.2rem 1.4rem .8rem;
  border-bottom: 1px solid rgba(201,168,76,.15);
}

.ibero-timeline {
  padding: 1rem 1.4rem 1.4rem;
  position: relative;
  max-height: 60vh;
  overflow-y: auto;
}

.ibero-timeline::before {
  content: '';
  position: absolute;
  left: 2rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: rgba(201,168,76,.2);
}

.ibero-tl-item {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1.4rem;
}

.ibero-tl-item:last-child {
  padding-bottom: 0;
}

.ibero-tl-dot {
  position: relative;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(201,168,76,.5);
  border: 2px solid #1a0a00;
  box-shadow: 0 0 0 1px rgba(201,168,76,.35);
  flex-shrink: 0;
  margin-top: 3px;
}

.ibero-tl-dot-gold {
  background: #f0d080;
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 2px rgba(240,208,128,.4);
}

.ibero-tl-highlight .ibero-tl-name {
  color: #f0d080 !important;
}

.ibero-tl-year {
  font-size: .62rem;
  letter-spacing: .15em;
  color: rgba(201,168,76,.6);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.ibero-tl-name {
  font-size: .88rem;
  font-weight: 700;
  color: #f5efe0;
  margin-bottom: 3px;
  line-height: 1.3;
}

.ibero-tl-desc {
  font-size: .75rem;
  color: rgba(245,239,224,.45);
  line-height: 1.5;
}

/* === TIMELINE HORIZONTAL HITOS === */
.ibero-timeline-h {
  padding: .75rem 1.2rem 1.2rem;
  position: relative;
  overflow-x: auto;
}

.ibero-tl-h-line {
  position: absolute;
  top: 1.75rem;
  left: 1.2rem;
  right: 1.2rem;
  height: 2px;
  background: rgba(201,168,76,.25);
}

.ibero-tl-h-items {
  display: flex;
  gap: 0;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  min-width: 520px;
}

.ibero-tl-h-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  padding: 0 .25rem;
}

.ibero-tl-h-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(201,168,76,.5);
  border: 2px solid #1a0a00;
  box-shadow: 0 0 0 1px rgba(201,168,76,.3);
  margin-bottom: .5rem;
  flex-shrink: 0;
}

.ibero-tl-h-dot-gold {
  background: #f0d080;
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 2px rgba(240,208,128,.4);
}

.ibero-tl-h-year {
  font-size: .58rem;
  letter-spacing: .12em;
  color: rgba(201,168,76,.6);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.ibero-tl-h-name {
  font-size: .72rem;
  font-weight: 700;
  color: #f5efe0;
  line-height: 1.3;
  margin-bottom: 3px;
}

.ibero-tl-h-gold .ibero-tl-h-name {
  color: #f0d080;
}

.ibero-tl-h-desc {
  font-size: .62rem;
  color: rgba(245,239,224,.4);
  line-height: 1.4;
}

/* === POPUP HITOS - CARDS HORIZONTALES === */
.ibero-popup {
  position: fixed !important;
  bottom: 55px !important;
  left: 50% !important;
  top: auto !important;
  transform: translateX(-50%) translateY(12px) !important;
  width: min(1200px, 96vw) !important;
  max-width: 96vw !important;
  max-height: none !important;
  overflow: visible !important;
}

.ibero-popup.ibero-visible {
  transform: translateX(-50%) translateY(0) !important;
}

.hitos-popup-header {
  padding: .9rem 1.4rem .7rem;
  border-bottom: 1px solid rgba(201,168,76,.15);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hitos-popup-eyebrow {
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(201,168,76,.6);
}

.hitos-popup-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: #f5efe0;
}

/* Contenedor timeline estilo imagen referencial */
.hitos-cards-wrap {
  position: relative;
  display: flex;
  gap: 0;
  padding: 1.4rem 1.4rem 1.6rem;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,.3) transparent;
}

/* Línea central horizontal */
.hitos-cards-wrap::before {
  content: '';
  position: absolute;
  left: 1.4rem;
  right: 1.4rem;
  top: 50%;
  height: 2px;
  background: rgba(201,168,76,.3);
  pointer-events: none;
  z-index: 0;
}

/* Cada hito como columna centrada */
.hito-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 80px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  outline: none;
  text-align: center;
  gap: 0;
}

/* Fotos arriba en posiciones impares, abajo en pares */
.hito-card:nth-child(odd) {
  flex-direction: column;
}
.hito-card:nth-child(even) {
  flex-direction: column-reverse;
}

.hito-card-img {
  width: 130px;
  height: 110px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  border: 1.5px solid rgba(201,168,76,.25);
  transition: width .3s ease, height .3s ease, border-color .2s ease, box-shadow .2s ease;
  flex-shrink: 0;
}

.hito-card:hover .hito-card-img {
  width: 165px;
  height: 140px;
  border-color: rgba(201,168,76,.7);
  box-shadow: 0 4px 18px rgba(201,168,76,.25);
}

.hito-card-gold .hito-card-img {
  border-color: rgba(240,208,128,.5);
}

/* Línea vertical que conecta foto con dot */
.hito-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(201,168,76,.5);
  border: 2px solid #1a0a00;
  box-shadow: 0 0 0 1px rgba(201,168,76,.3);
  flex-shrink: 0;
  margin: 4px 0;
  transition: transform .2s ease, background .2s ease;
  z-index: 2;
}

.hito-card:hover .hito-card-dot {
  transform: scale(1.5);
  background: #c9a84c;
}

.hito-card-gold .hito-card-dot {
  background: #f0d080;
  box-shadow: 0 0 0 2px rgba(240,208,128,.4);
}

.hito-card-year {
  font-size: .55rem;
  letter-spacing: .1em;
  color: rgba(201,168,76,.65);
  text-transform: uppercase;
  margin: 3px 0 1px;
}

.hito-card-name {
  font-size: .7rem;
  font-weight: 700;
  color: #f5efe0;
  line-height: 1.2;
  padding: 0 .15rem;
}

.hito-card-gold .hito-card-name {
  color: #f0d080;
}

.hito-card-desc {
  font-size: .62rem;
  color: rgba(245,239,224,.45);
  line-height: 1.4;
  max-height: 0;
  overflow: hidden;
  padding: 0 .2rem;
  opacity: 0;
  transition: max-height .3s ease, opacity .3s ease, margin .2s ease;
  margin: 0;
}

.hito-card:hover .hito-card-desc {
  max-height: 60px;
  opacity: 1;
  margin-top: 3px;
}

/* =====================================================================
   FIX v10.2 — Hero compacto en pantallas de poca altura (laptops 768p)
   Solo actúa cuando la ventana mide ≤ 820px de alto: reduce título y
   logo animado proporcionalmente para que subtítulo + franja + frase
   entren en una sola pantalla. En monitores normales no cambia nada.
   ===================================================================== */
@media (max-height: 820px) and (min-width: 769px) {
  .hero > .hero-content { padding-top: 84px; }
  .hero-content .hero-line-1 { font-size: clamp(2rem, 6.5vh, 3.4rem) !important; }
  .hero-content .hero-line-2 { font-size: clamp(3.4rem, 14vh, 7rem) !important; }
  .hero-video-logo { width: clamp(140px, 24vh, 210px) !important; }
  .hero-frase { margin-bottom: 40px; }
}

/* =====================================================================
   FIX v10.3 — TILT 3D PREMIUM en productos
   Las tarjetas y los productos destacados se inclinan en 3D siguiendo
   el mouse, con un brillo metálico que recorre la superficie (efecto
   "showroom" de webs de autos/relojes). Solo en dispositivos con mouse;
   en táctiles y con prefers-reduced-motion no se activa nada.
   Conserva intactos los hovers existentes (borde dorado, sombra, zoom).
   ===================================================================== */

/* El elemento tiltable: la rotación llega por variables CSS desde JS */
.tilt-3d {
  transform: perspective(1000px)
             rotateX(var(--tilt-rx, 0deg))
             rotateY(var(--tilt-ry, 0deg))
             scale(var(--tilt-s, 1));
  transition: transform .16s ease-out,
              border-color .5s var(--ease),
              box-shadow .5s var(--ease);
}
/* Al salir, regreso suave y elegante a la posición plana */
.tilt-3d.tilt-leaving {
  transition: transform .65s var(--ease),
              border-color .5s var(--ease),
              box-shadow .5s var(--ease);
}

/* Brillo metálico que sigue al cursor (inyectado por JS) */
.tilt-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    420px circle at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
    rgba(255, 240, 215, .16),
    rgba(212, 168, 87, .05) 42%,
    transparent 65%
  );
}
.tilt-3d:hover .tilt-glare { opacity: 1; }

/* Producto destacado: la imagen "flota" con profundidad real */
.producto-destacado-img.tilt-3d {
  transform-style: preserve-3d;
}
.producto-destacado-img.tilt-3d img {
  transform: translateZ(26px);
  transition: transform .16s ease-out;
}
.producto-destacado-img.tilt-3d .tilt-glare {
  transform: translateZ(27px); /* el brillo viaja sobre la foto */
}

/* =====================================================================
   FIX v10.4 — VISOR 3D REAL (model-viewer)
   Botón "Ver en 3D", badge en tarjetas, modal con carga progresiva,
   barra de progreso y botón AR "Ver en tu espacio".
   ===================================================================== */

/* Badge 3D sobre la imagen del producto */
.v3d-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(8,7,10,.82);
  border: 1px solid var(--gold-line, rgba(212,168,87,.4));
  color: var(--gold);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Botón Ver en 3D — hereda el lenguaje visual de los botones outline */
.v3d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 22px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background .3s, color .3s, transform .3s;
}
.v3d-btn:hover {
  background: var(--gold);
  color: #1a0a00;
  transform: translateY(-2px);
}
.producto-destacado-actions .v3d-btn { margin-top: 0; }

/* Modal del visor */
.v3d-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
}
.v3d-modal.v3d-abierto { display: block; }
.v3d-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.v3d-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, 94vw);
  background: #100d0f;
  border: 1px solid var(--gold-line, rgba(212,168,87,.35));
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.9);
  animation: v3dEntrar .35s var(--ease) both;
}
@keyframes v3dEntrar {
  from { opacity: 0; transform: translate(-50%, -47%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.v3d-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(212,168,87,.18);
}
.v3d-titulo {
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: .04em;
  margin: 0;
}
.v3d-cerrar {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color .2s, transform .2s;
}
.v3d-cerrar:hover { color: var(--gold); transform: rotate(90deg); }

.v3d-cuerpo {
  position: relative;
  height: min(62vh, 560px);
  background:
    radial-gradient(ellipse at center 80%, rgba(212,168,87,.07), transparent 60%),
    #17131a;
}
.v3d-cuerpo model-viewer {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  --progress-bar-color: transparent; /* usamos nuestra barra propia */
  --progress-mask: transparent;
}

/* Estado de carga progresiva: foto del producto + spinner */
.v3d-cargando {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.v3d-poster-previo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .35;
  filter: saturate(.8);
}
.v3d-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(212,168,87,.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: v3dGirar .9s linear infinite;
  z-index: 1;
}
@keyframes v3dGirar { to { transform: rotate(360deg); } }
.v3d-cargando-txt {
  z-index: 1;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* Barra de progreso de descarga del modelo */
.v3d-progreso {
  height: 3px;
  background: rgba(212,168,87,.12);
  transition: opacity .4s;
}
.v3d-progreso-barra {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-soft, #b8923f), var(--gold));
  transition: width .25s ease;
}

/* Botón AR dentro del visor (model-viewer lo muestra solo si hay soporte) */
.v3d-btn-ar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--gold);
  color: #1a0a00;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  transition: transform .2s, box-shadow .2s;
}
.v3d-btn-ar:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.6); }

/* Fallback: foto convencional */
.v3d-fallback {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
}
.v3d-fallback img {
  max-height: 78%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.v3d-fallback p {
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  max-width: 480px;
}

/* Pie con instrucciones de uso */
.v3d-ayuda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  padding: 12px 16px 16px;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.v3d-ayuda i { color: var(--gold); margin-right: 4px; }

@media (max-width: 640px) {
  .v3d-panel { width: 96vw; }
  .v3d-cuerpo { height: min(58vh, 460px); }
  .v3d-ayuda { gap: 8px 16px; font-size: .66rem; }
  .v3d-ayuda-ar { display: none; } /* en móvil el botón AR habla por sí solo */
}

/* =====================================================================
   FIX v10.5 — Productos nuevos: 2do destacado, specs y notas de precio
   ===================================================================== */

/* Segundo producto destacado en el mismo tab: separación y layout alterno */
.tab-panel .producto-destacado + .producto-destacado {
  margin-top: 80px;
  padding-top: 80px;
  border-top: 1px solid rgba(212,168,87,.14);
}
/* Variante invertida: imagen a la derecha para dar ritmo visual */
.producto-destacado--rev .producto-destacado-img { order: 2; }
.producto-destacado--rev .producto-destacado-img::before {
  inset: 28px 28px -28px -28px;   /* marco dorado hacia el otro lado */
}

/* Lista de especificaciones técnicas */
.producto-specs {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.producto-specs li {
  position: relative;
  padding-left: 24px;
  font-size: .9rem;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
}
.producto-specs li::before {
  content: '\f00c'; /* check de Font Awesome */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--gold);
  font-size: .78rem;
}

/* Nota bajo el precio (acabados AISI 201 / 304) */
.producto-precio-nota {
  display: block;
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.5);
  text-transform: none;
}

@media (max-width: 900px) {
  .producto-destacado--rev .producto-destacado-img { order: 0; }
  .tab-panel .producto-destacado + .producto-destacado {
    margin-top: 48px; padding-top: 48px;
  }
}

/* =====================================================================
   v11 — TARJETAS DE PRODUCTO + MODAL DE DETALLE (ecommerce)
   ===================================================================== */

/* Acciones dentro de la tarjeta del grid */
.producto-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.producto-card-actions .btn-add-cart { flex: 1 1 auto; margin-top: 0; }
.btn-ver-detalle {
  flex: 0 0 auto;
  padding: 12px 18px;
  background: transparent;
  border: 1px solid rgba(212,168,87,.55);
  color: var(--gold);
  font-family: inherit;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background .3s, color .3s, border-color .3s;
}
.btn-ver-detalle:hover { background: var(--gold); color: #1a0a00; border-color: var(--gold); }

/* El bloque de detalle vive oculto dentro de la tarjeta */
.producto-detalle[hidden] { display: none !important; }

/* ── Modal ───────────────────────────────────────────────────────── */
.pd-modal { position: fixed; inset: 0; z-index: 10060; }
.pd-modal[hidden] { display: none; }
.pd-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s ease;
}
.pd-modal.is-open .pd-backdrop { opacity: 1; }
.pd-panel {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -46%);
  width: min(1040px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: #100d0f;
  border: 1px solid rgba(212,168,87,.3);
  border-radius: 6px;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.9);
  opacity: 0;
  transition: opacity .28s ease, transform .28s var(--ease);
}
.pd-modal.is-open .pd-panel { opacity: 1; transform: translate(-50%, -50%); }
.pd-cerrar {
  position: absolute; top: 12px; right: 16px; z-index: 3;
  width: 40px; height: 40px;
  background: rgba(8,7,10,.7);
  border: 1px solid rgba(212,168,87,.25);
  border-radius: 50%;
  color: rgba(255,255,255,.8);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: color .2s, transform .2s, border-color .2s;
}
.pd-cerrar:hover { color: var(--gold); border-color: var(--gold); transform: rotate(90deg); }

.pd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

/* Galería */
.pd-media { padding: 28px; background: #17131a; border-right: 1px solid rgba(212,168,87,.12); }
.pd-media-principal {
  aspect-ratio: 4/3;
  background: #0d0b10;
  border-radius: 3px;
  overflow: hidden;
}
.pd-media-principal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.pd-thumb {
  width: 74px; height: 58px; padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 3px; overflow: hidden; cursor: pointer;
  background: none; transition: border-color .25s, opacity .25s;
  opacity: .65;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb:hover { opacity: 1; }
.pd-thumb.is-active { border-color: var(--gold); opacity: 1; }

/* Información */
.pd-info { padding: 40px 34px 34px; }
.pd-titulo {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 14px;
}
.pd-precio {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 22px;
}
.pd-precio .producto-precio-nota { font-size: .72rem; }

.pd-desc {
  font-size: .93rem; line-height: 1.7;
  color: rgba(255,255,255,.72);
  margin-bottom: 22px;
}
.pd-sub {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212,168,87,.16);
}
.pd-cuerpo .producto-specs { margin: 0 0 4px; }

/* Medidas y acabados: filas etiqueta ↔ valor */
.pd-medidas, .pd-acabados { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pd-medidas li, .pd-acabados li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,.09);
  font-size: .88rem;
}
.pd-medidas li span, .pd-acabados li span { color: rgba(255,255,255,.6); }
.pd-medidas li strong, .pd-acabados li strong { color: #fff; font-weight: 600; }
.pd-acabados li strong { color: var(--gold); }

.pd-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pd-acciones .pd-add {
  flex: 1 1 220px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 24px; border: none; cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.pd-acciones .btn { flex: 0 1 auto; }

/* Nota de fabricación a medida dentro del modal */
.pd-medida-nota {
  margin-top: 22px; padding: 14px 16px;
  background: rgba(212,168,87,.07);
  border: 1px solid rgba(212,168,87,.2);
  border-radius: 4px;
  font-size: .84rem; line-height: 1.6;
  color: rgba(255,255,255,.72);
}
.pd-medida-nota i { color: var(--gold); margin-right: 6px; }
.pd-medida-nota strong { color: #fff; }
.pd-medida-link { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ── Franja "Fabricamos a medida" bajo el catálogo ───────────────── */
.a-medida {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  margin-top: 70px;
  padding: 34px 36px;
  background: linear-gradient(120deg, rgba(212,168,87,.09), rgba(192,57,43,.06));
  border: 1px solid rgba(212,168,87,.26);
  border-radius: 6px;
}
.a-medida-icono {
  width: 64px; height: 64px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(212,168,87,.4);
  border-radius: 50%;
  color: var(--gold); font-size: 1.5rem;
}
.a-medida-texto h3 {
  font-size: 1.25rem; color: #fff; margin: 0 0 8px;
}
.a-medida-texto p {
  font-size: .9rem; line-height: 1.65;
  color: rgba(255,255,255,.68); margin: 0; max-width: 640px;
}
.a-medida-actions { display: flex; flex-direction: column; gap: 10px; }
.a-medida-actions .btn { white-space: nowrap; text-align: center; }

@media (max-width: 980px) {
  .pd-cols { grid-template-columns: 1fr; }
  .pd-media { border-right: none; border-bottom: 1px solid rgba(212,168,87,.12); padding: 20px; }
  .pd-info { padding: 26px 22px 30px; }
  .a-medida { grid-template-columns: 1fr; text-align: center; gap: 20px; padding: 30px 22px; }
  .a-medida-icono { margin: 0 auto; }
  .a-medida-texto p { margin: 0 auto; }
  .a-medida-actions { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .producto-card-actions { flex-direction: column; }
  .btn-ver-detalle { width: 100%; }
  .pd-panel { width: 96vw; max-height: 94vh; }
  .pd-acciones { flex-direction: column; }
  .pd-acciones .btn, .pd-acciones .pd-add { width: 100%; flex: 0 0 auto; }
}

/* =====================================================================
   v11.1 — PRODUCTOS: imagen completa, selector de acero, garantías
   ===================================================================== */

/* ── Imagen del producto: verlo COMPLETO, sin recortes ──────────────
   Antes: object-fit: cover recortaba la parrilla por los bordes.
   Ahora: contain sobre un fondo de estudio; nada del equipo se pierde. */
.producto-img {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(212,168,87,.07), transparent 62%),
    var(--bg-4);
  display: grid;
  place-items: center;
  padding: 14px;
}
.producto-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* ← el producto entero, siempre visible */
  object-position: center;
}
/* El degradado inferior tapaba la base del producto */
.producto-img::after { display: none; }
.producto-card:hover .producto-img img { transform: scale(1.05); }

/* Tarjetas parejas: el contenido se alinea aunque los textos midan distinto */
.producto-card {
  display: flex;
  flex-direction: column;
}
.producto-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.producto-body h3 { min-height: 2.6em; }          /* títulos de 1 o 2 líneas alineados */
.producto-body > p { flex: 1 1 auto; }             /* empuja precio y botones al pie */
.producto-body .producto-precio { margin-top: 8px; }
.producto-card-actions { margin-top: auto; padding-top: 14px; }

/* Grid: tarjetas de ancho cómodo, centradas y sin estirarse de más */
.productos-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
  justify-content: center;
  max-width: 100%;
}

/* Galería del modal: también el producto completo */
.pd-media-principal {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(212,168,87,.08), transparent 62%),
    #0d0b10;
}
.pd-media-principal img { object-fit: contain; }
.pd-thumb img { object-fit: contain; background: #0d0b10; padding: 3px; }

/* ── Selector de acero (plegable) ───────────────────────────────── */
.pd-acero {
  border: 1px solid rgba(212,168,87,.22);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 24px;
  background: rgba(212,168,87,.04);
}
.pd-acero-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gold);
  font-family: inherit;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pd-acero-head i:first-child { margin-right: 6px; }
.pd-acero-flecha { transition: transform .3s var(--ease); font-size: .8rem; }
.pd-acero-head[aria-expanded="false"] .pd-acero-flecha { transform: rotate(-90deg); }

.pd-acero-body {
  display: grid;
  gap: 2px;
  padding: 0 10px 10px;
  max-height: 400px;
  overflow: hidden;
  transition: max-height .35s var(--ease), opacity .3s, padding .35s;
}
.pd-acero-body.is-collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.pd-acero-opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.pd-acero-opt:hover { background: rgba(255,255,255,.03); }
.pd-acero-opt.is-selected {
  background: rgba(212,168,87,.1);
  border-color: rgba(212,168,87,.45);
}
.pd-acero-opt input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin: 0;
  border: 2px solid rgba(212,168,87,.5);
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .2s;
}
.pd-acero-opt input[type="radio"]::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  transform: scale(0);
  transition: transform .2s var(--ease);
}
.pd-acero-opt input[type="radio"]:checked { border-color: var(--gold); }
.pd-acero-opt input[type="radio"]:checked::after { transform: scale(1); }
.pd-acero-opt input[type="radio"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.pd-acero-info { display: flex; flex-direction: column; gap: 3px; }
.pd-acero-info strong { font-size: .92rem; color: #fff; font-weight: 600; }
.pd-acero-info small { font-size: .76rem; line-height: 1.45; color: rgba(255,255,255,.55); }
.pd-acero-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  background: var(--gold);
  color: #1a0a00;
  font-size: .58rem;
  font-weight: 800;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 3px;
  vertical-align: middle;
}
.pd-acero-precio {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}

/* ── Garantías dentro del detalle ───────────────────────────────── */
.pd-garantias {
  list-style: none;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.pd-garantias li { display: flex; gap: 11px; align-items: flex-start; }
.pd-garantias i {
  color: var(--gold);
  font-size: 1rem;
  margin-top: 2px;
  flex: none;
  width: 18px;
  text-align: center;
}
.pd-garantias span { display: flex; flex-direction: column; gap: 2px; }
.pd-garantias strong { font-size: .82rem; color: #fff; font-weight: 600; }
.pd-garantias span { font-size: .74rem; line-height: 1.45; color: rgba(255,255,255,.55); }

@media (max-width: 560px) {
  .pd-garantias { grid-template-columns: 1fr; gap: 14px; }
  .pd-acero-opt { grid-template-columns: auto 1fr; }
  .pd-acero-precio { grid-column: 2; padding-left: 0; }
  .producto-body h3 { min-height: auto; }
}

/* =====================================================================
   v11.2 — MODAL DE DETALLE COMPACTO
   Problema: el panel era angosto (1040px) y la columna izquierda
   quedaba con un gran vacío negro bajo la foto, mientras la derecha
   scrolleaba muy larga. Solución: panel más ancho, media pegada
   (sticky) que acompaña el scroll, y contenido en 2 columnas.
   ===================================================================== */

.pd-panel { width: min(1180px, 96vw); }

/* La galería ocupa menos ancho; la información respira más */
.pd-cols { grid-template-columns: 46% 54%; align-items: start; }

/* La foto acompaña el scroll en vez de dejar un vacío */
.pd-media {
  position: sticky;
  top: 0;
  padding: 26px;
  align-self: start;
}
.pd-media-principal { aspect-ratio: 4 / 3; }
.pd-thumbs { justify-content: center; }

.pd-info { padding: 32px 30px 30px; }
.pd-titulo { margin-bottom: 10px; }
.pd-precio { margin-bottom: 18px; font-size: 1.7rem; }

/* Selector de acero: más compacto */
.pd-acero { margin-bottom: 20px; }
.pd-acero-head { padding: 12px 14px; }
.pd-acero-opt { padding: 11px 11px; gap: 11px; }
.pd-acero-info small { font-size: .73rem; }

.pd-desc { margin-bottom: 18px; font-size: .9rem; }
.pd-sub { margin: 18px 0 10px; padding-bottom: 6px; }

/* Características en 2 columnas cuando hay muchas (aprovecha el ancho) */
.pd-cuerpo .producto-specs {
  grid-template-columns: 1fr 1fr;
  column-gap: 22px;
  row-gap: 8px;
}
.pd-cuerpo .producto-specs li { font-size: .84rem; padding-left: 21px; }

/* Medidas: chips en fila, no filas apiladas de 3 renglones */
.pd-medidas {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pd-medidas li {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  background: rgba(255,255,255,.02);
}
.pd-medidas li span { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.pd-medidas li strong { font-size: 1rem; color: var(--gold); }

.pd-acciones { margin-top: 22px; gap: 10px; }
.pd-acciones .pd-add { flex: 1 1 240px; padding: 14px 22px; }
.pd-acciones .btn { flex: 1 1 160px; text-align: center; }

/* Garantías: 2×2 compacto */
.pd-garantias { margin-top: 20px; padding-top: 18px; gap: 13px 18px; }
.pd-garantias strong { font-size: .79rem; }
.pd-garantias span { font-size: .72rem; }

/* ── Bloque del asesor ──────────────────────────────────────────── */
.pd-asesor {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  background: rgba(255,255,255,.025);
}
.pd-asesor-icono { color: var(--gold); font-size: 1.25rem; }
.pd-asesor-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-asesor-txt strong { font-size: .84rem; color: #fff; font-weight: 600; }
.pd-asesor-txt span { font-size: .74rem; line-height: 1.45; color: rgba(255,255,255,.55); }
.pd-asesor-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  background: #25D366;
  color: #08290f;
  border-radius: 999px;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
  transition: transform .2s, box-shadow .2s;
}
.pd-asesor-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,211,102,.3); }

.pd-medida-nota { margin-top: 14px; padding: 12px 14px; font-size: .8rem; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .pd-cols { grid-template-columns: 1fr; }
  .pd-media { position: static; padding: 18px; }
  .pd-media-principal { aspect-ratio: 4/3; max-height: 42vh; }
  .pd-cuerpo .producto-specs { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pd-medidas { grid-template-columns: 1fr 1fr; }
  .pd-asesor { grid-template-columns: auto 1fr; row-gap: 12px; }
  .pd-asesor-btn { grid-column: 1 / -1; justify-content: center; }
}

/* =====================================================================
   v11.3 — GANCHO DE OFERTA + ACORDEONES PLEGABLES
   Se activa la oferta poniendo data-precio-antes="XXXX" en la tarjeta.
   Sin ese atributo no aparece nada: los productos sin descuento se
   ven exactamente igual que antes.
   ===================================================================== */

/* ── Cinta "-XX%" sobre la imagen de la tarjeta ─────────────────── */
.card-badge-oferta {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  padding: 6px 12px;
  background: var(--ember, #c0392b);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(192,57,43,.45);
  pointer-events: none;
}
.card-badge-oferta::after {
  content: 'OFERTA';
  display: block;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .16em;
  opacity: .9;
  margin-top: 1px;
}

/* Precio anterior tachado en la tarjeta */
.producto-precio.is-oferta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.card-precio-antes {
  font-size: .95rem;
  font-weight: 400;
  color: rgba(255,255,255,.38);
  text-decoration-color: rgba(192,57,43,.8);
  text-decoration-thickness: 2px;
}
.producto-precio.is-oferta .producto-precio-nota { flex: 1 0 100%; }

/* ── Precio del modal con oferta ────────────────────────────────── */
.pd-precio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.pd-precio-actual { font-size: 1.7rem; font-weight: 700; color: var(--gold); line-height: 1; }
.pd-precio-actual.is-oferta { color: var(--ember, #c0392b); }
.pd-precio-antes {
  font-size: 1.05rem;
  color: rgba(255,255,255,.4);
  font-weight: 400;
  text-decoration-thickness: 2px;
}
.pd-badge-oferta {
  padding: 5px 11px;
  background: var(--ember, #c0392b);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 3px;
}
.pd-precio .producto-precio-nota { flex: 1 0 100%; margin-top: 0; }

/* Precio dentro de las opciones de acero: también refleja oferta */
.pd-acero-precio { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }

/* ── Acordeones del detalle ─────────────────────────────────────── */
.pd-acc {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pd-acc:first-of-type { border-top: 1px solid rgba(255,255,255,.08); }

.pd-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 2px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color .25s;
}
.pd-acc-titulo {
  font-family: var(--ft-uppercase, inherit);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  transition: color .25s;
}
.pd-acc-head:hover .pd-acc-titulo,
.pd-acc-head[aria-expanded="true"] .pd-acc-titulo { color: var(--gold); }

/* Signo +/− dibujado en CSS (sin depender de iconos externos) */
.pd-acc-signo {
  position: relative;
  width: 26px; height: 26px;
  flex: none;
  border: 1px solid rgba(212,168,87,.35);
  border-radius: 50%;
  transition: border-color .25s, background .25s;
}
.pd-acc-signo::before,
.pd-acc-signo::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), opacity .3s;
}
.pd-acc-signo::before { width: 11px; height: 1.5px; }          /* barra horizontal */
.pd-acc-signo::after  { width: 1.5px; height: 11px; }          /* barra vertical  */
.pd-acc-head[aria-expanded="true"] .pd-acc-signo {
  border-color: var(--gold);
  background: rgba(212,168,87,.12);
}
/* Abierto: la vertical desaparece → queda el signo "−" */
.pd-acc-head[aria-expanded="true"] .pd-acc-signo::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.pd-acc-body {
  overflow: hidden;
  max-height: 1200px;
  opacity: 1;
  padding-bottom: 16px;
  transition: max-height .4s var(--ease), opacity .3s ease, padding .35s ease;
}
.pd-acc-body.is-collapsed {
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
}
.pd-acc-body .producto-specs { margin: 0; }
.pd-acc-body .pd-medidas { margin: 0; }

/* El primer bloque (descripción) va suelto, sin acordeón */
.pd-desc { margin-bottom: 16px; }

@media (max-width: 620px) {
  .pd-precio-actual { font-size: 1.45rem; }
  .card-badge-oferta { top: 8px; left: 8px; padding: 5px 9px; font-size: .7rem; }
}
.pd-acero-antes {
  font-size: .74rem;
  font-weight: 400;
  color: rgba(255,255,255,.35);
  text-decoration-thickness: 1.5px;
}

/* =====================================================================
   v11.6 — IMÁGENES DE PRODUCTO SIEMPRE COMPLETAS
   Problema: el contenedor tenía aspect-ratio fijo (4/3) y la <img>
   llevaba width:100%; height:100%. Con fotos verticales (ej. 1122×1402)
   la imagen se estiraba a la caja y se recortaba arriba y abajo.
   Solución: el contenedor es cuadrado (sirve para fotos verticales y
   horizontales) y la imagen se dimensiona sola, sin forzar tamaño.
   Funciona con CUALQUIER proporción que subas.
   ===================================================================== */

/* ── Galería del modal ──────────────────────────────────────────── */
.pd-media-principal {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
}
.pd-media-principal img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Miniaturas: también el producto entero, nunca recortado */
.pd-thumb {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  background: #0d0b10;
  padding: 4px;
}
.pd-thumb img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 0;
}
.pd-thumbs { flex-wrap: wrap; gap: 8px; }

/* ── Tarjeta del catálogo ───────────────────────────────────────── */
.producto-img img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .pd-media-principal { aspect-ratio: 1 / 1; max-height: 46vh; }
}
@media (max-width: 560px) {
  .pd-thumb { width: 58px; height: 58px; }
}

/* =====================================================================
   v12 — IMÁGENES 100% COMPLETAS + ZOOM CON LUPA
   ===================================================================== */

/* ── 1. El hover ya no recorta el producto ──────────────────────────
   Antes: scale(1.08) dentro de un contenedor con overflow:hidden
   agrandaba la foto y le cortaba los bordes. Ahora el zoom sutil se
   hace sobre el contenedor, no sobre la imagen, y nada se pierde. */
.producto-card:hover .producto-img img { transform: none; }
.producto-img {
  transition: background .4s var(--ease);
}
.producto-card:hover .producto-img {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(212,168,87,.14), transparent 64%),
    var(--bg-4);
}

/* ── 2. Botón de lupa sobre cualquier imagen de producto ────────── */
.producto-img, .pd-media-principal { position: relative; }

.zl-lupa {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: rgba(8,7,10,.72);
  border: 1px solid rgba(212,168,87,.42);
  border-radius: 50%;
  color: var(--gold);
  font-size: .95rem;
  cursor: zoom-in;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              background .25s, color .25s;
}
/* En la tarjeta aparece al pasar el mouse; en el modal, siempre visible */
.producto-card:hover .zl-lupa,
.producto-card:focus-within .zl-lupa,
.pd-media-principal .zl-lupa {
  opacity: 1;
  transform: translateY(0);
}
.zl-lupa:hover, .zl-lupa:focus-visible {
  background: var(--gold);
  color: #1a0a00;
  transform: translateY(0) scale(1.08);
}
/* En táctil no hay hover: siempre visible */
@media (hover: none) {
  .zl-lupa { opacity: 1; transform: none; }
}

/* ── 3. Lightbox de zoom ────────────────────────────────────────── */
.zl-lightbox { position: fixed; inset: 0; z-index: 10080; }
.zl-lightbox[hidden] { display: none; }
.zl-fondo {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.94);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .26s ease;
}
.zl-lightbox.is-open .zl-fondo { opacity: 1; }

.zl-escena {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: default;
  touch-action: none;
  opacity: 0;
  transition: opacity .26s ease;
}
.zl-lightbox.is-open .zl-escena { opacity: 1; }
.zl-escena.is-zoom { cursor: grab; }
.zl-escena.is-grabbing { cursor: grabbing; }

.zl-img {
  max-width: 88vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

/* Cerrar */
.zl-cerrar {
  position: absolute; top: 18px; right: 20px; z-index: 3;
  width: 46px; height: 46px;
  background: rgba(8,7,10,.7);
  border: 1px solid rgba(212,168,87,.3);
  border-radius: 50%;
  color: rgba(255,255,255,.85);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
  transition: color .2s, transform .25s, border-color .2s;
}
.zl-cerrar:hover { color: var(--gold); border-color: var(--gold); transform: rotate(90deg); }

/* Navegación entre imágenes */
.zl-nav {
  position: absolute; top: 50%; z-index: 3;
  transform: translateY(-50%);
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: rgba(8,7,10,.6);
  border: 1px solid rgba(212,168,87,.25);
  border-radius: 50%;
  color: rgba(255,255,255,.8);
  font-size: 1.1rem; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.zl-nav[hidden] { display: none; }
.zl-prev { left: 20px; }
.zl-next { right: 20px; }
.zl-nav:hover { background: var(--gold); color: #1a0a00; border-color: var(--gold); }

/* Barra de controles */
.zl-barra {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(8,7,10,.82);
  border: 1px solid rgba(212,168,87,.24);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.zl-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: none; border: none;
  color: rgba(255,255,255,.8);
  font-size: .95rem; cursor: pointer;
  border-radius: 50%;
  transition: background .2s, color .2s;
}
.zl-btn:hover { background: rgba(212,168,87,.16); color: var(--gold); }
.zl-nivel {
  min-width: 54px;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold);
}
.zl-contador {
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.14);
  font-size: .74rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
}

@media (max-width: 640px) {
  .zl-img { max-width: 94vw; max-height: 70vh; }
  .zl-nav { width: 42px; height: 42px; }
  .zl-prev { left: 8px; } .zl-next { right: 8px; }
  .zl-barra { bottom: 14px; gap: 4px; padding: 7px 10px; }
  .zl-btn { width: 34px; height: 34px; }
  .zl-lupa { width: 38px; height: 38px; right: 8px; bottom: 8px; }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .zl-img, .zl-fondo, .zl-escena, .zl-lupa { transition: none !important; }
}

/* =====================================================================
   v12.1 — LA IMAGEN SE VE EXACTAMENTE COMO EL ARCHIVO ORIGINAL
   Nada de recorte, nada de zoom, nada de estiramiento.

   El contenedor adopta la proporción 3:4 (vertical), que es la de la
   mayoría de las fotos de producto, así llenan el marco sin franjas.
   Cualquier otra proporción (horizontal, cuadrada, panorámica) se
   muestra igualmente COMPLETA, centrada, con aire a los lados.
   ===================================================================== */

.producto-img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;                 /* sin padding: la foto llega al borde, como el archivo */
  background: var(--bg-4);
}
.producto-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* imagen ENTERA, jamás recortada */
  object-position: center;
  transform: none;
}
/* Ningún estado agranda ni desplaza la imagen */
.producto-card:hover .producto-img img,
.producto-card:focus-within .producto-img img { transform: none; }

/* Galería del modal: mismo criterio */
.pd-media-principal {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
}
.pd-media-principal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Miniaturas: producto completo también */
.pd-thumb img { object-fit: contain; }

@media (max-width: 980px) {
  .pd-media-principal { aspect-ratio: 3 / 4; max-height: 52vh; }
}

/* =====================================================================
   v12.2 — PAGO CON TARJETA DESHABILITADO TEMPORALMENTE
   Las opciones Visa/Mastercard y Amex/Diners quedan visibles pero
   inactivas, con un aviso claro y contacto directo con un asesor.
   Para reactivarlas: quitar .is-disabled y el atributo disabled en
   index.html, borrar el bloque .pay-aviso-tarjeta y añadir los
   métodos a METODOS_ACTIVOS en js/main.js.
   ===================================================================== */

.pay-method.is-disabled {
  opacity: .38;
  cursor: not-allowed;
  filter: grayscale(1);
  position: relative;
}
.pay-method.is-disabled .pay-method-card { pointer-events: none; }
.pay-method.is-disabled input { cursor: not-allowed; }

/* Cinta "No disponible" sobre la opción */
.pay-method.is-disabled::after {
  content: 'No disponible';
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  background: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 3px;
  filter: grayscale(0);
}

/* Aviso con contacto al asesor */
.pay-aviso-tarjeta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 15px 17px;
  background: rgba(212,168,87,.07);
  border: 1px solid rgba(212,168,87,.28);
  border-radius: 5px;
}
.pay-aviso-tarjeta > i {
  color: var(--gold);
  font-size: 1.2rem;
}
.pay-aviso-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pay-aviso-txt strong { font-size: .87rem; color: #fff; font-weight: 600; }
.pay-aviso-txt span { font-size: .78rem; line-height: 1.5; color: rgba(255,255,255,.6); }

.pay-aviso-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: #25D366;
  color: #08290f;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .2s, box-shadow .2s;
}
.pay-aviso-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,211,102,.3); }

@media (max-width: 640px) {
  .pay-aviso-tarjeta { grid-template-columns: auto 1fr; row-gap: 12px; }
  .pay-aviso-btn { grid-column: 1 / -1; justify-content: center; }
}

/* === CARRUSEL PRODUCTOS === */
.prod-carrusel-wrap {
  position: relative;
  padding: 0 52px;
  overflow: hidden;
}
.prod-carrusel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.prod-carrusel-track .producto-card {
  flex: 0 0 calc((100% - 3rem) / 3);
  min-width: 0;
}
.prod-carr-prev,
.prod-carr-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(15,5,0,.85);
  border: 1.5px solid rgba(201,168,76,.5);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.prod-carr-prev svg,
.prod-carr-next svg {
  width: 18px; height: 18px;
  stroke: #c9a84c;
  stroke-width: 2.5;
  fill: none;
}
.prod-carr-prev:hover,
.prod-carr-next:hover {
  background: rgba(201,168,76,.2);
  border-color: #c9a84c;
  box-shadow: 0 4px 18px rgba(201,168,76,.3);
}
.prod-carr-prev:hover svg,
.prod-carr-next:hover svg { stroke: #f0d080; }
.prod-carr-prev { left: 0; }
.prod-carr-next { right: 0; }
.prod-carr-prev:disabled,
.prod-carr-next:disabled { opacity: .2; cursor: default; pointer-events: none; }
@media (max-width: 900px) {
  .prod-carrusel-track .producto-card { flex: 0 0 calc((100% - 1.5rem) / 2); }
}
@media (max-width: 600px) {
  .prod-carrusel-wrap { padding: 0 36px; }
  .prod-carrusel-track .producto-card { flex: 0 0 100%; }
}

/* === CARRUSEL EQUIPO === */
.equipo-carrusel-wrap {
  position: relative;
  padding: 0 52px;
  overflow: hidden;
}

.equipo-carrusel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  grid-template-columns: none !important;
}

.equipo-carrusel-track .equipo-card {
  flex: 0 0 calc((100% - 3rem) / 3);
  min-width: 0;
}

.equipo-carr-prev,
.equipo-carr-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(15,5,0,.85);
  border: 1.5px solid rgba(201,168,76,.5);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  transition: background .2s, border-color .2s;
}

.equipo-carr-prev svg,
.equipo-carr-next svg {
  width: 18px; height: 18px;
  stroke: #c9a84c;
  stroke-width: 2.5;
  fill: none;
}

.equipo-carr-prev:hover,
.equipo-carr-next:hover {
  background: rgba(201,168,76,.2);
  border-color: #c9a84c;
}

.equipo-carr-prev:hover svg,
.equipo-carr-next:hover svg { stroke: #f0d080; }
.equipo-carr-prev { left: 0; }
.equipo-carr-next { right: 0; }
.equipo-carr-prev:disabled,
.equipo-carr-next:disabled { opacity: .2; cursor: default; pointer-events: none; }

@media (max-width: 900px) {
  .equipo-carrusel-track .equipo-card { flex: 0 0 calc((100% - 1.5rem) / 2); }
}
@media (max-width: 600px) {
  .equipo-carrusel-wrap { padding: 0 36px; }
  .equipo-carrusel-track .equipo-card { flex: 0 0 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   STOCK EN TARJETA — Fase 2/3 (barra, conteo y estado "Agotado")
   ═══════════════════════════════════════════════════════════════ */
.producto-stock { margin: 12px 0 4px; }
.stock-barra {
  height: 5px; border-radius: 99px;
  background: rgba(255,255,255,.10); overflow: hidden;
}
.stock-relleno { display: block; height: 100%; border-radius: 99px; transition: width .5s ease; }
.stock-relleno.is-normal  { background: #3fa34d; }
.stock-relleno.is-pocas   { background: var(--gold, #d4a857); }
.stock-relleno.is-agotado { background: var(--ember, #b8341f); }
.stock-texto { display: block; margin-top: 6px; font-size: .74rem; letter-spacing: .02em; }
.stock-texto.is-normal  { color: #8fbf83; }
.stock-texto.is-pocas   { color: var(--gold, #d4a857); }
.stock-texto.is-agotado { color: #d98a82; }

/* Tarjeta agotada: apagada visualmente */
.producto-card.agotado .producto-img img { filter: grayscale(.85) brightness(.7); }
.producto-card.agotado .producto-body h3 { color: var(--ink-muted, #9a948a); }
.producto-card.agotado .producto-precio  { color: var(--ink-muted, #9a948a); }

/* Cinta "Agotado" (arriba a la derecha, no choca con la de oferta) */
.card-badge-agotado {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  padding: 6px 12px; background: #55504a; color: #eceae6;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.4); pointer-events: none;
}

/* Botón Agregar deshabilitado cuando está agotado */
.btn-add-cart.agotado {
  background: #2a231d !important; color: #7c6d61 !important;
  cursor: not-allowed; pointer-events: none; box-shadow: none;
}
.btn-add-cart.agotado::before { display: none !important; }

/* Enlace "Consultar disponibilidad" por WhatsApp */
.stock-consulta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; padding: 10px 0; width: 100%;
  border: 1px solid #1fa855; border-radius: 8px;
  color: #7fe0a3; font-size: .82rem; font-weight: 600; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.stock-consulta:hover { background: #1fa855; color: #06180d; }
.stock-consulta i { font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════
   ARREGLOS MÓVIL — logo del hero y carrusel de servicios
   ═══════════════════════════════════════════════════════════════ */

/* Logo del hero en móvil: se usa el WebP ANIMADO transparente (el video
   con fondo negro no funciona en iOS). En escritorio sigue el video. */
.hero-anim-mobile { display: none; }
@media (max-width: 768px) {
  .hero-video-logo { display: none !important; }
  .hero-anim-mobile {
    display: block;
    width: clamp(180px, 48vw, 250px);
    height: auto;
    margin: 8px auto 4px;
  }
}

/* Carrusel de servicios en móvil (flechas centradas a los lados) */
.serv-carrusel { position: relative; }
.serv-flecha { display: none; }
@media (max-width: 768px) {
  .servicios-principales {
    grid-template-columns: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    scroll-padding-left: 7vw;
  }
  .servicios-principales::-webkit-scrollbar { display: none; }
  .servicios-principales > .servicio-principal {
    flex: 0 0 86% !important;
    width: 86% !important;
    scroll-snap-align: center;
  }
  .serv-flecha {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--gold-line, rgba(212,168,87,.5));
    background: rgba(10,6,4,.72);
    color: var(--gold, #d4a857);
    font-size: 1.5rem; line-height: 1;
    cursor: pointer; z-index: 5;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .serv-prev { left: 4px; }
  .serv-next { right: 4px; }
.serv-flecha:active { background: var(--gold, #d4a857); color: #1a0f08; }
}

/* Servicios como productos: sin carrusel y con lectura mas clara */
.servicios-productizados {
  padding-top: 132px !important;
  padding-bottom: 150px !important;
}
.servicios-productizados .section-desc {
  max-width: 760px !important;
}
.servicios-productizados .servicios-principales {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 26px !important;
  margin-top: 54px !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
  scroll-snap-type: none !important;
}
.servicios-productizados .servicio-principal {
  min-height: 0 !important;
  width: auto !important;
  flex: initial !important;
  scroll-snap-align: none !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--bg-3) !important;
}
.servicios-productizados .servicio-principal-img {
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
}
.servicios-productizados .servicio-principal-body {
  padding: 30px 26px 32px !important;
}
.servicios-productizados .servicio-principal-body .label {
  color: var(--gold) !important;
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
}
.servicios-productizados .servicio-principal-body h3 {
  font-size: clamp(1.35rem, 1.6vw, 1.75rem) !important;
  line-height: 1.18 !important;
}
.servicios-productizados .servicio-principal-body p {
  flex: initial !important;
  min-height: 150px;
}
.servicios-productizados .servicio-lista {
  gap: 10px !important;
  padding: 22px 0 !important;
}
.servicios-productizados .servicio-lista li {
  align-items: flex-start !important;
  line-height: 1.45 !important;
}
.servicios-productizados .serv-flecha {
  display: none !important;
}

@media (max-width: 1180px) {
  .servicios-productizados .servicios-principales {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .servicios-productizados .servicio-principal-body p {
    min-height: 0;
  }
}
@media (max-width: 700px) {
  .servicios-productizados {
    padding-top: 92px !important;
    padding-bottom: 110px !important;
  }
  .servicios-productizados .servicios-principales {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    display: grid !important;
    overflow: visible !important;
  }
  .servicios-productizados .servicios-principales > .servicio-principal {
    width: auto !important;
    flex-basis: auto !important;
  }
}

/* Servicios por subniveles: una ficha profunda por servicio */
.servicios-productizados .servicios-tabs {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 58px auto 34px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  max-width: 1120px;
  overflow-x: auto;
  scrollbar-width: none;
}
.servicios-productizados .servicios-tabs::-webkit-scrollbar { display: none; }
.servicios-productizados .servicio-tab {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--ft-uppercase);
  font-size: .78rem;
  letter-spacing: .28em;
  padding: 0 0 17px;
  text-transform: uppercase;
  transition: color .25s ease, border-color .25s ease;
}
.servicios-productizados .servicio-tab:hover,
.servicios-productizados .servicio-tab.is-active {
  color: var(--gold);
  border-color: var(--gold);
}
.servicios-productizados .servicios-paneles {
  display: block !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}
.servicios-productizados .servicios-paneles .servicio-principal {
  display: none !important;
}
.servicios-productizados .servicios-paneles .servicio-principal.is-active {
  display: grid !important;
  grid-template-columns: minmax(320px, .95fr) minmax(0, 1.25fr);
  gap: 0 !important;
  min-height: 560px !important;
  overflow: hidden;
}
.servicios-productizados .servicios-paneles .servicio-principal-img {
  height: 100% !important;
  min-height: 560px;
  aspect-ratio: auto !important;
}
.servicios-productizados .servicios-paneles .servicio-principal-body {
  padding: 52px 56px !important;
}
.servicios-productizados .servicios-paneles .servicio-principal-body .label {
  min-height: 0;
}
.servicios-productizados .servicios-paneles .servicio-principal-body h3 {
  max-width: 560px;
  font-size: clamp(2rem, 3vw, 3rem) !important;
}
.servicios-productizados .servicios-paneles .servicio-principal-body p {
  max-width: 620px;
  min-height: 0 !important;
  font-size: 1rem !important;
}
.servicios-productizados .servicios-paneles .servicio-lista {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px !important;
  margin: 26px 0 !important;
}
.servicio-profundo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 30px;
}
.servicio-profundo div {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  padding: 20px;
}
.servicio-profundo span {
  color: var(--gold);
  display: block;
  font-family: var(--ft-uppercase);
  font-size: .68rem;
  letter-spacing: .22em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.servicio-profundo strong {
  color: var(--ink);
  display: block;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.65;
}
.newsletter-form .btn {
  width: 100%;
}

@media (max-width: 900px) {
  .servicios-productizados .servicios-tabs {
    justify-content: flex-start;
    margin-top: 42px;
  }
  .servicios-productizados .servicios-paneles .servicio-principal.is-active {
    grid-template-columns: 1fr;
  }
  .servicios-productizados .servicios-paneles .servicio-principal-img {
    min-height: 300px;
  }
  .servicios-productizados .servicios-paneles .servicio-principal-body {
    padding: 34px 26px 38px !important;
  }
  .servicios-productizados .servicios-paneles .servicio-lista,
  .servicio-profundo {
    grid-template-columns: 1fr;
  }
}

/* Refinamiento visual de servicios: mas aire, menos bloque pesado */
.servicios-productizados {
  background:
    linear-gradient(180deg, rgba(8,7,10,1) 0%, rgba(13,12,16,.96) 48%, rgba(8,7,10,1) 100%) !important;
}
.servicios-productizados .servicios-tabs {
  justify-content: center;
  gap: clamp(18px, 3vw, 42px);
  max-width: 1180px;
}
.servicios-productizados .servicio-tab {
  font-size: .72rem;
  letter-spacing: .24em;
}
.servicios-productizados .servicios-paneles {
  max-width: 1160px !important;
}
.servicios-productizados .servicios-paneles .servicio-principal.is-active {
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 34px !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.servicios-productizados .servicios-paneles .servicio-principal-img {
  min-height: 0;
  height: clamp(360px, 44vw, 520px) !important;
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  background: #0b090c;
}
.servicios-productizados .servicios-paneles .servicio-principal-img img {
  height: 100% !important;
  object-fit: cover !important;
}
.servicios-productizados [data-servicio-panel="programa3k"] .servicio-principal-img img {
  object-position: 58% center !important;
}
.servicios-productizados .servicios-paneles .servicio-principal-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
  pointer-events: none;
}
.servicios-productizados .servicios-paneles .servicio-principal-body {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(212,168,87,.05), transparent 34%),
    rgba(27,26,32,.78);
  padding: clamp(34px, 4vw, 54px) !important;
}
.servicios-productizados .servicios-paneles .servicio-principal-body h3 {
  max-width: 680px;
  font-size: clamp(2rem, 3.4vw, 3.25rem) !important;
}
.servicios-productizados .servicios-paneles .servicio-principal-body p {
  max-width: 720px;
  color: rgba(244,237,224,.76);
  font-size: 1.02rem !important;
}
.servicios-productizados .servicios-paneles .servicio-lista {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.servicios-productizados .servicios-paneles .servicio-lista li {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 6px;
  padding: 14px 14px !important;
  min-height: 72px;
}
.servicio-profundo div {
  border-radius: 6px;
  background: rgba(8,7,10,.32);
}
.servicios-productizados .servicios-paneles .btn {
  width: auto !important;
  min-width: 210px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.servicios-productizados [data-servicio-panel="programa3k"] .btn + .btn {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .servicios-productizados .servicios-tabs {
    justify-content: flex-start;
  }
  .servicios-productizados .servicios-paneles .servicio-principal.is-active {
    grid-template-columns: 1fr;
    gap: 22px !important;
  }
  .servicios-productizados .servicios-paneles .servicio-principal-img {
    height: 300px !important;
  }
  .servicios-productizados .servicios-paneles .servicio-lista {
    grid-template-columns: 1fr;
  }
  .servicios-productizados .servicios-paneles .btn {
    width: 100% !important;
    margin-right: 0;
    margin-bottom: 10px;
  }
}

/* Servicios en formato panoramico: imagen arriba, descripcion abajo */
.servicios-productizados .servicios-paneles {
  max-width: 1080px !important;
}
.servicios-productizados .servicios-paneles .servicio-principal.is-active {
  display: block !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: rgba(27,26,32,.72) !important;
}
.servicios-productizados .servicios-paneles .servicio-principal-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 21 / 8 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.servicios-productizados .servicios-paneles .servicio-principal-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.servicios-productizados [data-servicio-panel="catering"] .servicio-principal-img img {
  object-position: center 42% !important;
}
.servicios-productizados [data-servicio-panel="talleres"] .servicio-principal-img img,
.servicios-productizados [data-servicio-panel="asesoria"] .servicio-principal-img img,
.servicios-productizados [data-servicio-panel="programa3k"] .servicio-principal-img img {
  object-position: center center !important;
}
.servicios-productizados .servicios-paneles .servicio-principal-body {
  border: 0 !important;
  border-top: 1px solid var(--line-strong) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(135deg, rgba(212,168,87,.045), transparent 38%),
    rgba(18,17,22,.94) !important;
  padding: clamp(30px, 4vw, 48px) !important;
}
.servicios-productizados .servicios-paneles .servicio-principal-body h3 {
  max-width: 760px !important;
}
.servicios-productizados .servicios-paneles .servicio-principal-body p {
  max-width: 820px !important;
}
.servicios-productizados .servicios-paneles .servicio-lista,
.servicio-profundo {
  max-width: 900px;
}
.servicio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.servicio-actions-3k {
  align-items: stretch;
  flex-direction: column;
  max-width: 320px;
}
.servicios-productizados .servicios-paneles .servicio-actions .btn {
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
}
.btn-gold {
  align-items: center;
  background: linear-gradient(135deg, #c9a84c, #f0d080, #c9a84c);
  border: 2px solid #f0d080;
  color: #1a0a00;
  display: inline-flex;
  font-family: var(--ft-uppercase);
  font-size: .78rem;
  font-weight: 800;
  justify-content: center;
  letter-spacing: .08em;
  min-height: 52px;
  padding: 15px 24px;
  text-align: center;
  text-shadow: none;
  text-transform: uppercase;
  transition: transform .25s ease, filter .25s ease;
}
.btn-gold:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}
@media (max-width: 760px) {
  .servicios-productizados .servicios-paneles .servicio-principal-img {
    aspect-ratio: 16 / 9 !important;
  }
  .servicio-actions-3k {
    max-width: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BOTÓN DE ACCESO CON GOOGLE (Google Identity Services)
   El botón lo dibuja Google; aquí solo lo centramos en el modal.
   ═══════════════════════════════════════════════════════════════ */
.account-google-wrap {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin: 4px 0 2px;
}
.account-google-wrap > div { max-width: 100%; }

/* Servicios: presentacion mas compacta antes de la agenda */
@media (min-width: 921px) {
  .servicios-productizados .servicios-paneles .servicio-principal.is-active {
    max-width: 980px;
    margin-inline: auto;
    grid-template-columns: 42% 58%;
  }
  .servicios-productizados .servicios-paneles .servicio-principal-img {
    min-height: 300px;
  }
  .servicios-productizados .servicios-paneles .servicio-principal-body {
    padding: 34px 42px;
  }
  .servicios-productizados .servicios-paneles .servicio-principal-body h3 {
    font-size: clamp(2rem, 3.5vw, 3.1rem);
  }
  .servicios-productizados .servicios-paneles .servicio-principal-body p {
    margin-bottom: 20px;
  }
  .servicios-productizados .servicios-paneles .servicio-lista,
  .servicio-profundo {
    gap: 12px;
    margin-top: 16px;
  }
}

/* Proximos talleres editables desde CRM */
.talleres-eventos {
  margin: 24px 0 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.talleres-eventos-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.talleres-eventos-head .label { margin-bottom: 0; }
.talleres-eventos-head h4 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 2.1rem);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.talleres-eventos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.talleres-eventos-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(255,255,255,.58);
}
.taller-evento-card {
  overflow: hidden;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.taller-evento-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212,168,87,.45);
  background: rgba(255,255,255,.065);
}
.taller-evento-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.taller-evento-img {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 210px;
  background: #111;
}
.taller-evento-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.38));
}
.taller-evento-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.taller-evento-body {
  padding: 14px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
}
.taller-evento-top,
.taller-evento-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.taller-evento-fecha {
  min-width: 58px;
  min-height: 54px;
  border-radius: 12px;
  background: linear-gradient(135deg, #cf3326, #f1c95b);
  color: #111;
  display: grid;
  place-items: center;
  align-content: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  box-shadow: 0 14px 28px rgba(192,57,43,.24);
}
.taller-evento-fecha strong {
  display: block;
  line-height: .9;
  font-size: 1.35rem;
}
.taller-evento-fecha span {
  display: block;
  font-size: .72rem;
  letter-spacing: .04em;
}
.taller-evento-share {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.16);
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}
.taller-evento-card h5 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.25;
}
.taller-evento-card p {
  margin: 0;
  color: rgba(255,255,255,.68);
  line-height: 1.45;
  font-size: .88rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.taller-evento-meta {
  display: grid;
  gap: 6px;
  margin-top: auto;
  color: rgba(255,255,255,.66);
  font-size: .84rem;
}
.taller-evento-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.taller-evento-meta i { color: var(--gold); width: 14px; }
.taller-evento-foot {
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.taller-evento-foot span {
  color: var(--gold);
  font-weight: 800;
}
.taller-evento-foot button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 900;
  font-size: .82rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.taller-evento-foot button:hover { background: var(--gold); }

.taller-modal {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.taller-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.taller-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
}
.taller-dialog {
  position: relative;
  width: min(940px, 100%);
  max-height: min(92vh, 780px);
  overflow: auto;
  background: #151016;
  border: 1px solid rgba(212,168,87,.35);
  border-radius: 12px;
  padding: 34px;
  box-shadow: 0 28px 90px rgba(0,0,0,.58);
}
.taller-detail {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(320px, 1fr);
  gap: 28px;
  align-items: start;
}
.taller-detail[hidden],
.taller-register[hidden] {
  display: none;
}
.taller-detail-media {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(212,168,87,.24);
  background: #0c090a;
}
.taller-detail-media img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
}
.taller-detail-body h2 {
  margin: 9px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  text-transform: uppercase;
  color: #fff;
  letter-spacing: .02em;
  line-height: 1.08;
}
.taller-detail-body > p,
.taller-detail-copy p {
  color: rgba(255,255,255,.72);
  line-height: 1.62;
  margin: 0 0 18px;
}
.taller-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.taller-detail-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,168,87,.26);
  color: #f1d48c;
  background: rgba(212,168,87,.08);
  font-size: .82rem;
  font-weight: 700;
}
.taller-detail-copy {
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.taller-detail-list {
  margin-top: 18px;
}
.taller-detail-list h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.taller-detail-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}
.taller-detail-list li {
  position: relative;
  padding: 12px 14px 12px 34px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: rgba(255,255,255,.84);
  background: rgba(255,255,255,.04);
  font-weight: 700;
}
.taller-detail-list li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(212,168,87,.15);
}
.taller-share-status {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(212,168,87,.34);
  border-radius: 8px;
  color: #f5db9c;
  background: rgba(212,168,87,.1);
  font-weight: 800;
}
.taller-detail-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.taller-detail-actions .btn {
  width: 100%;
  justify-content: center;
}
.taller-back {
  border: 0;
  background: transparent;
  color: var(--gold);
  padding: 0;
  margin: 0 0 18px;
  font-family: var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.taller-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(212,168,87,.55);
  background: transparent;
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.taller-head h2 {
  margin: 8px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.55rem);
  text-transform: uppercase;
  color: #fff;
  letter-spacing: .02em;
}
.taller-head p {
  margin: 0 0 20px;
  max-width: 560px;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
}
.taller-status {
  margin-bottom: 16px;
  padding: 13px 15px;
  border-radius: 8px;
  border: 1px solid rgba(212,168,87,.3);
  background: rgba(212,168,87,.12);
  color: #f4ddb0;
}
.taller-status.is-error {
  border-color: rgba(231,76,60,.5);
  background: rgba(231,76,60,.12);
  color: #ffd2cc;
}
.taller-selected {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}
.taller-selected strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.taller-selected span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.68);
}
.taller-form label {
  display: block;
  margin-bottom: 14px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.taller-form input,
.taller-form textarea {
  width: 100%;
  margin-top: 8px;
  border: 1px solid rgba(212,168,87,.35);
  background: #0f0b0d;
  color: #fff;
  padding: 14px 15px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0;
}
.taller-form textarea { resize: vertical; min-height: 92px; }
.taller-form .btn { width: 100%; margin-top: 4px; }

@media (max-width: 920px) {
  .talleres-eventos-grid { grid-template-columns: 1fr; }
  .talleres-eventos-head { align-items: flex-start; flex-direction: column; }
  .taller-detail {
    grid-template-columns: 1fr;
  }
  .taller-detail-media img {
    max-height: 300px;
  }
}

@media (max-width: 620px) {
  .pay-transfer-info {
    align-items: flex-start;
  }
  .pay-qr-card {
    flex-basis: 112px;
    width: 112px;
    padding: 6px;
    border-radius: 10px;
  }
  .talleres-eventos {
    margin-top: 26px;
    padding-top: 22px;
  }
  .taller-evento-body {
    padding: 14px;
  }
  .taller-evento-foot {
    align-items: stretch;
    flex-direction: column;
  }
  .taller-evento-foot button {
    width: 100%;
  }
  .taller-dialog {
    padding: 26px 18px;
  }
  .taller-detail-actions {
    grid-template-columns: 1fr;
  }
}