/* sections.css — estilos de las secciones nuevas + dock */

/* ════════════════ DOCK NAV ════════════════════════════════════════════════ */
.gz-dock{
  position: fixed; top: 50%; right: 12px; transform: translateY(-50%);
  z-index: 40; pointer-events: auto;
  background: rgba(31,20,16,.4);
  border: 1px solid rgba(241,234,216,.08);
  border-radius: 14px;
  padding: 8px 6px;
  opacity: .45;
  transition: opacity .3s ease, padding-right .35s cubic-bezier(.4,.1,.3,1), background .3s ease;
}
.gz-dock.is-expanded{
  padding-right: 14px;
  opacity: 1;
  background: rgba(31,20,16,.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: rgba(241,234,216,.12);
}
.gz-dock-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
.gz-dock-item button{
  display:flex; align-items:center; gap:10px;
  padding: 6px 8px; border-radius: 10px;
  color: rgba(241,234,216,.5);
  transition: color .25s ease, background .25s ease;
  width: 100%; white-space: nowrap;
}
.gz-dock-item:hover button{ color: var(--gz-paper); background: rgba(241,234,216,.06); }
.gz-dock-item.is-active button{ color: var(--gz-gold); }
.gz-dock-num{
  font-family: var(--mono); font-size: 10px; letter-spacing:.18em;
  max-width: 0; opacity: 0; overflow: hidden; text-align:right;
  transition: max-width .35s cubic-bezier(.4,.1,.3,1), opacity .35s ease;
}
.gz-dock.is-expanded .gz-dock-num{ max-width: 22px; opacity: 1; }
.gz-dock-line{
  width: 16px; height: 1px; background: currentColor;
  opacity: .4; transition: width .25s, opacity .25s;
}
.gz-dock-item.is-active .gz-dock-line{ width: 26px; opacity: 1; }
.gz-dock-label{
  font-family: var(--mono); font-size: 11px; letter-spacing:.16em; text-transform: uppercase;
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width .35s cubic-bezier(.4,.1,.3,1), opacity .35s ease;
}
.gz-dock.is-expanded .gz-dock-label{ max-width: 120px; opacity: 1; }

@media (max-width: 1100px){
  .gz-dock{ display: none; }
}

/* ════════════════ COMÚN A SECCIONES ═══════════════════════════════════════ */
.gz-section{
  padding: 120px 28px 80px;
  max-width: 1320px; margin: 0 auto;
  position: relative; z-index: 2;
}
.gz-section + .gz-section{ padding-top: 80px; }

.gz-shead{ max-width: 720px; margin-bottom: 56px; }
.gz-shead-title{
  font-family: var(--brand); font-weight: 500;
  font-size: clamp(38px, 5vw, 68px); line-height: 1; letter-spacing: -.015em;
  margin: 0 0 18px; text-wrap: balance;
}
.gz-shead-title em{ color: var(--gz-gold); font-style: italic; font-weight: 600; }
.gz-shead-sub{
  font-size: 17px; line-height: 1.55; color: rgba(241,234,216,.65);
  margin: 0; max-width: 580px;
}

.gz-mini-label{
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gz-gold); display: block; margin-bottom: 6px;
}
.gz-chip-sm{
  padding: 5px 10px; font-size: 11px;
  letter-spacing: .04em;
}

@media (max-width: 720px){
  .gz-section{ padding: 80px 20px 60px; }
}

/* ════════════════ 01 · ORIGEN ═════════════════════════════════════════════ */
.gz-origen-grid{
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px;
  align-items: start;
  margin-bottom: 40px;
}

.gz-origen-mapwrap{
  position: relative;
  width: 100%;
  aspect-ratio: 2/1;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(124,74,32,.18), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(58,36,24,.3), transparent 50%),
    linear-gradient(180deg, #14100b, #0a0807);
  border: 1px solid rgba(241,234,216,.08);
  border-radius: 24px;
  overflow: hidden;
}

/* Banda dorada del cinturón cafetero (visual) */
.gz-origen-belt{
  position: absolute; left: 0; right: 0;
  top: 50%; height: 20%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(200,136,31,.10) 25%,
    rgba(200,136,31,.16) 50%,
    rgba(200,136,31,.08) 75%,
    transparent 100%);
  pointer-events: none;
}

.gz-origen-meridians{
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.gz-meridian{
  position: absolute; left: 16px;
  transform: translateY(-50%);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(241,234,216,.32);
  white-space: nowrap;
}
.gz-meridian em{ font-style: normal; }
.gz-meridian-eq{ color: rgba(200,136,31,.65); }

.gz-origen-svg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
}
.gz-origen-continents path{ transition: fill .3s; }

.gz-origen-marker{ cursor: pointer; }
.gz-origen-marker-circle{ transition: r .25s, fill .25s; }
.gz-origen-marker:hover .gz-origen-marker-circle{ r: 12; fill: var(--gz-gold); }
.gz-origen-marker-text{
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  pointer-events: none;
  paint-order: stroke;
  stroke: #0a0807; stroke-width: 4px; stroke-linejoin: round;
}

.gz-origen-floating-beans{
  position: absolute; inset: 0; pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.gz-origen-floating-beans img{
  position: absolute; top: -10%;
  animation: gz-bean-fall linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
@keyframes gz-bean-fall {
  from { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10%  { opacity: .15; }
  90%  { opacity: .15; }
  to   { transform: translateY(560px) rotate(360deg); opacity: 0; }
}

.gz-origen-mapcaption{
  position: absolute; bottom: 14px; right: 16px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(241,234,216,.55);
  z-index: 3;
}
.gz-origen-mapcaption-line{ width: 28px; height: 1px; background: var(--gz-gold); }

/* Detail panel */
.gz-origen-detail{
  position: relative;
  min-height: 100%;
  background: linear-gradient(160deg, rgba(58,36,24,.7), rgba(31,20,16,.5));
  border: 1px solid rgba(200,136,31,.2);
  border-radius: 24px;
  padding: 36px 32px;
  display: flex; flex-direction: column;
  animation: gz-fade-up .4s ease both;
  overflow: hidden;
}
.gz-origen-detail::before{
  content: "";
  position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200,136,31,.25), transparent 70%);
  pointer-events: none;
}
.gz-origen-detail-num{
  font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(241,234,216,.55);
  margin-bottom: 6px;
  position: relative;
}
.gz-origen-detail-cont{
  font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gz-gold); margin-bottom: 14px;
  position: relative;
}
.gz-origen-detail-name{
  font-family: var(--brand); font-weight: 500;
  font-size: clamp(40px, 4.2vw, 56px); line-height: .95; letter-spacing: -.02em;
  margin: 0 0 22px;
  position: relative;
}
.gz-origen-detail-desc{
  font-size: 15px; line-height: 1.65;
  color: rgba(241,234,216,.78);
  margin: 0 0 32px;
  position: relative;
}
.gz-origen-detail-data{ display:flex; flex-direction:column; gap: 22px; margin-bottom: 28px; position: relative; }
.gz-origen-detail-data strong{
  display: block;
  font-family: var(--brand); font-weight: 600; font-style: italic;
  font-size: 24px; color: var(--gz-paper); letter-spacing: -.005em;
  margin-top: 4px;
}
.gz-origen-nav{
  display: flex; gap: 10px;
  margin-top: auto; padding-top: 24px;
  border-top: 1px dashed rgba(241,234,216,.15);
  position: relative;
}
.gz-origen-nav-btn{
  flex: 1; padding: 12px 14px;
  background: rgba(241,234,216,.04);
  border: 1px solid rgba(241,234,216,.12);
  border-radius: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(241,234,216,.7);
  transition: all .2s;
  cursor: pointer;
}
.gz-origen-nav-btn:hover{
  border-color: var(--gz-gold); color: var(--gz-paper);
  background: rgba(200,136,31,.08);
}

/* Strip horizontal de orígenes */
.gz-origen-strip{
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,136,31,.3) transparent;
}
.gz-origen-strip::-webkit-scrollbar{ height: 6px; }
.gz-origen-strip::-webkit-scrollbar-thumb{ background: rgba(200,136,31,.3); border-radius: 3px; }
.gz-origen-strip-item{
  flex-shrink: 0;
  width: 130px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 14px;
  background: rgba(241,234,216,.04);
  border: 1px solid rgba(241,234,216,.1);
  border-radius: 18px;
  cursor: pointer;
  transition: all .25s;
}
.gz-origen-strip-item img{ width: 28px; height: auto; transition: transform .25s; }
.gz-origen-strip-item strong{
  font-family: var(--brand); font-weight: 500;
  font-size: 17px; line-height: 1;
  letter-spacing: -.01em;
}
.gz-origen-strip-item em{
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
  font-style: normal;
  color: rgba(241,234,216,.5);
  text-align: center; line-height: 1.4;
}
.gz-origen-strip-item:hover{ border-color: rgba(200,136,31,.4); transform: translateY(-3px); }
.gz-origen-strip-item:hover img{ transform: scale(1.15) rotate(-8deg); }
.gz-origen-strip-item.is-active{
  background: linear-gradient(160deg, rgba(200,136,31,.2), rgba(200,136,31,.05));
  border-color: var(--gz-gold);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.gz-origen-strip-item.is-active img{ filter: drop-shadow(0 0 12px rgba(200,136,31,.6)); }

@media (max-width: 1080px){
  .gz-origen-grid{ grid-template-columns: 1fr; gap: 28px; }
  .gz-origen-detail{ padding: 28px 24px; }
}
@media (max-width: 720px){
  .gz-origen-mapwrap{ aspect-ratio: 4/3; }
  .gz-meridian{ font-size: 7px; }
  .gz-origen-marker-text{ font-size: 14px; }
  .gz-origen-strip-item{ width: 110px; padding: 14px 10px; }
}

/* ════════════════ 02 · EL GRANO ═══════════════════════════════════════════ */
.gz-grano-versus{
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-bottom: 80px;
}
.gz-grano-versus-vs{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--gz-ink);
  border: 1px solid rgba(200,136,31,.4);
  display: grid; place-items: center;
  font-family: var(--brand); font-weight: 600; font-style: italic;
  color: var(--gz-gold); font-size: 22px;
  z-index: 3;
}
.gz-grano-card{
  background: linear-gradient(160deg, rgba(58,36,24,.45), rgba(31,20,16,.25));
  border: 1px solid rgba(241,234,216,.08);
  border-radius: 28px;
  padding: 32px;
  display: grid; grid-template-rows: auto 1fr; gap: 24px;
}
.gz-grano-card-arabica{ border-color: rgba(200,136,31,.25); }
.gz-grano-card-art{
  position: relative;
  aspect-ratio: 2/1;
  background: radial-gradient(ellipse at 50% 50%, rgba(200,136,31,.12), transparent 60%);
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
}
.gz-grano-card-art img{
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
}
.gz-grano-art-label{
  position: absolute; top: 18px; right: 20px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(241,234,216,.55);
  text-align: right; line-height: 1.4;
}
.gz-grano-card-head{ margin-bottom: 12px; }
.gz-grano-card-head h3{
  font-family: var(--brand); font-weight: 500;
  font-size: 40px; line-height: 1; margin: 0;
  letter-spacing: -.015em;
}
.gz-grano-card-head em{
  display: block; margin-top: 4px;
  font-family: var(--brand); font-weight: 600; font-style: italic;
  color: var(--gz-gold); font-size: 18px;
}
.gz-grano-desc{
  font-size: 14px; line-height: 1.55;
  color: rgba(241,234,216,.72);
  margin: 0 0 22px;
}
.gz-grano-dl{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 18px 0; margin: 0;
  border-top: 1px dashed rgba(241,234,216,.15);
  border-bottom: 1px dashed rgba(241,234,216,.15);
}
.gz-grano-dl > div dt{
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(241,234,216,.5); margin-bottom: 4px;
}
.gz-grano-dl > div dd{
  font-family: var(--brand); font-weight: 600; font-style: italic;
  font-size: 15px; color: var(--gz-paper); margin: 0;
}
.gz-grano-perfil{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

@media (max-width: 900px){
  .gz-grano-versus{ grid-template-columns: 1fr; gap: 56px; }
  .gz-grano-versus-vs{ position: relative; top: 0; left: 0; transform: none; margin: -32px auto -32px; }
}

/* Anatomía */
.gz-grano-anatomia{
  background: linear-gradient(160deg, rgba(31,20,16,.6), rgba(14,9,7,.4));
  border: 1px solid rgba(241,234,216,.08);
  border-radius: 28px;
  padding: 40px;
}
.gz-anatomia-head{ margin-bottom: 36px; max-width: 720px; }
.gz-anatomia-head h3{
  font-family: var(--brand); font-weight: 500;
  font-size: 36px; line-height: 1.05; margin: 8px 0 12px;
  letter-spacing: -.015em;
}
.gz-anatomia-head h3 em{
  font-style: italic; font-weight: 600; color: var(--gz-gold);
}
.gz-anatomia-intro{
  font-size: 15px; line-height: 1.55;
  color: rgba(241,234,216,.65);
  margin: 0; max-width: 580px;
}
.gz-anatomia-flow{
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  position: relative;
  padding: 8px 0;
}
.gz-anatomia-flow::before{
  content: ""; position: absolute; left: 6%; right: 6%; top: 50px; height: 1px;
  background: linear-gradient(90deg, #A82E1F 0%, #D04A2A 18%, #E0A95A 38%, #D8C99A 58%, #8A954A 78%, #5C3A1F 100%);
  opacity: .35;
  z-index: 0;
}
/* Pequeñas flechas dorada entre etapas */
.gz-anatomia-flow::after{
  content: "→ → → → →";
  position: absolute; left: 0; right: 0; top: 38px;
  text-align: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: 14%;
  color: var(--gz-gold); opacity: .35;
  pointer-events: none;
  display: flex; justify-content: space-around;
  padding: 0 12%;
}
.gz-anatomia-step{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; z-index: 2;
  animation: gz-rise .6s cubic-bezier(.5,.1,.3,1) both;
}
.gz-anatomia-step-art{
  position: relative;
  width: 100px; height: 100px;
  margin-bottom: 14px;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 22px, rgba(241,234,216,.04) 22px, rgba(241,234,216,.04) 23px),
    repeating-linear-gradient(90deg, transparent 0, transparent 22px, rgba(241,234,216,.04) 22px, rgba(241,234,216,.04) 23px),
    radial-gradient(circle, rgba(31,20,16,.5), rgba(0,0,0,.65));
  border: 1px solid rgba(241,234,216,.1);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease;
}
.gz-anatomia-step:hover .gz-anatomia-step-art{
  transform: translateY(-4px) rotate(-2deg);
  border-color: rgba(200,136,31,.5);
}
.gz-anatomia-step-art svg{
  width: 100%; height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.gz-anatomia-step-num{
  position: absolute; top: -8px; left: -8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gz-gold);
  color: var(--gz-ink);
  font-family: var(--brand); font-weight: 600; font-style: italic;
  font-size: 13px;
  display: grid; place-items: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
  border: 2px solid var(--gz-ink);
}
.gz-anatomia-step strong{
  font-family: var(--brand); font-weight: 500; font-size: 18px;
  line-height: 1; margin-bottom: 4px;
}
.gz-anatomia-step em{
  font-style: normal; font-size: 11px;
  color: rgba(241,234,216,.55); line-height: 1.4;
}

@media (max-width: 720px){
  .gz-anatomia-flow{ grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .gz-anatomia-flow::before{ display: none; }
  .gz-grano-anatomia{ padding: 28px; }
}

/* ════════════════ 03 · TUESTE ═════════════════════════════════════════════ */
.gz-section-tueste{
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--tueste-tint, #5C3A1F) 20%, transparent), transparent 60%);
  border-radius: 32px;
  transition: background .8s ease;
}
.gz-tueste-stage{
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px;
  align-items: center;
  min-height: 380px;
  margin-bottom: 60px;
}
.gz-tueste-bean-wrap{
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1/1; max-width: 420px; margin: 0 auto;
  width: 100%;
}
.gz-tueste-bean{
  width: 70%; height: auto;
  transition: filter 1s cubic-bezier(.4,.1,.3,1), transform .6s ease;
  animation: gz-breathe 4s ease-in-out infinite;
  position: relative; z-index: 2;
}
.gz-tueste-glow{
  position: absolute; inset: -30%;
  border-radius: 50%;
  opacity: .8;
  transition: background 1s ease;
  z-index: 1;
  pointer-events: none;
}
.gz-tueste-steam{
  position: absolute; top: -12%; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  mix-blend-mode: screen;
  pointer-events: none;
}
.gz-tueste-info{ animation: gz-fade-up .4s ease both; }
.gz-tueste-name{
  font-family: var(--brand); font-weight: 500;
  font-size: 56px; line-height: 1; margin: 6px 0 18px;
  letter-spacing: -.02em;
}
.gz-tueste-name em{
  display: block; margin-top: 6px;
  font-family: var(--brand); font-weight: 600; font-style: italic;
  color: var(--gz-gold); font-size: 22px;
}
.gz-tueste-desc{
  font-size: 16px; line-height: 1.55;
  color: rgba(241,234,216,.78);
  margin: 0 0 26px; max-width: 480px;
}
.gz-tueste-meta{
  display: flex; gap: 28px; padding: 18px 0;
  border-top: 1px dashed rgba(241,234,216,.18);
  border-bottom: 1px dashed rgba(241,234,216,.18);
  margin-bottom: 22px;
}
.gz-tueste-meta strong{
  display: block;
  font-family: var(--brand); font-weight: 600; font-style: italic;
  font-size: 20px; color: var(--gz-paper); letter-spacing: -.005em;
}
.gz-tueste-notas{ display: flex; flex-direction: column; gap: 8px; }
.gz-tueste-notas .gz-chips{ display: flex; flex-wrap: wrap; gap: 6px; }

.gz-tueste-bean-photo{
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.gz-tueste-slider{ padding: 0 8px; }
.gz-tueste-track{
  position: relative;
  display: flex; align-items: flex-start;
}
.gz-tueste-track-line{
  position: absolute; top: 24px; left: 10%; right: 10%; height: 4px;
  border-radius: 999px;
  opacity: .55;
  pointer-events: none;
}
.gz-tueste-stop{
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 4px 10px;
  min-height: 72px;
  border-radius: 14px;
  cursor: pointer;
  transition: background .2s ease;
}
.gz-tueste-stop:hover{ background: rgba(241,234,216,.05); }
.gz-tueste-stop-dot{
  width: 24px; height: 24px; border-radius: 50%;
  border: 3px solid var(--gz-paper);
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  transition: transform .25s, border-color .25s;
}
.gz-tueste-stop.is-active .gz-tueste-stop-dot{
  transform: scale(1.4);
  border-color: var(--gz-gold);
}
.gz-tueste-stop:hover .gz-tueste-stop-dot{ transform: scale(1.2); }
.gz-tueste-stop-label{
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(241,234,216,.55);
  transition: color .25s;
  white-space: nowrap;
}
.gz-tueste-stop.is-active .gz-tueste-stop-label{ color: var(--gz-paper); }

@media (max-width: 900px){
  .gz-tueste-stage{ grid-template-columns: 1fr; gap: 32px; }
  .gz-tueste-bean{ width: 60%; }
  .gz-tueste-stop-label{ font-size: 8px; letter-spacing: .1em; }
  .gz-tueste-slider{ padding: 0; }
}

/* ════════════════ 04 · MOLIENDA ═══════════════════════════════════════════ */
.gz-molienda-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px; margin-bottom: 40px;
}
.gz-molienda-card{
  position: relative;
  background: rgba(241,234,216,.04);
  border: 1px solid rgba(241,234,216,.1);
  border-radius: 20px;
  padding: 20px 18px;
  text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  transition: all .25s;
}
.gz-molienda-card:hover{ border-color: rgba(200,136,31,.4); transform: translateY(-3px); }
.gz-molienda-card.is-active{
  background: rgba(200,136,31,.1);
  border-color: var(--gz-gold);
  box-shadow: 0 12px 28px rgba(0,0,0,.3), inset 0 0 0 1px rgba(200,136,31,.2);
}
.gz-molienda-vis{
  position: relative; aspect-ratio: 1/1;
  background: var(--gz-paper-warm); border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: inset 0 4px 12px rgba(58,36,24,.18);
}
.gz-particles{ position: absolute; inset: 14%; }
.gz-particle{
  position: absolute;
  background: var(--gz-coffee);
  border-radius: 40%;
  opacity: .82;
  box-shadow: inset -1px -1px 1px rgba(0,0,0,.4);
}
.gz-molienda-name{
  font-family: var(--brand); font-weight: 500; font-size: 22px;
  line-height: 1; letter-spacing: -.015em;
}
.gz-molienda-italic{
  font-family: var(--brand); font-weight: 600; font-style: italic;
  font-size: 14px; color: var(--gz-gold); margin-bottom: 6px;
}
.gz-molienda-size{
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(241,234,216,.55); margin-top: auto;
}

.gz-molienda-detail{
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 28px; padding: 28px 32px;
  background: linear-gradient(160deg, rgba(58,36,24,.45), rgba(31,20,16,.3));
  border: 1px solid rgba(200,136,31,.2);
  border-radius: 24px;
}
.gz-molienda-detail h3{
  font-family: var(--brand); font-weight: 500; font-size: 24px;
  line-height: 1.1; margin: 0; letter-spacing: -.01em;
}
.gz-molienda-detail strong{
  display: block;
  font-family: var(--brand); font-weight: 600; font-style: italic;
  font-size: 18px; color: var(--gz-paper);
}

@media (max-width: 720px){
  .gz-molienda-detail{ grid-template-columns: 1fr; gap: 18px; padding: 22px; }
}

/* ════════════════ 05 · MÉTODOS ════════════════════════════════════════════ */
.gz-metodos-stage{
  display: grid; grid-template-columns: 220px 1fr; gap: 32px;
  align-items: start;
}

/* Tabs verticales con tipografía editorial */
.gz-metodos-tabs{
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 100px;
}
.gz-metodos-tab{
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px 18px 16px 20px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  text-align: left; cursor: pointer;
  transition: all .25s ease;
}
.gz-metodos-tab::before{
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 60%;
  background: var(--gz-gold);
  border-radius: 2px;
  transition: transform .25s ease;
}
.gz-metodos-tab-num{
  font-family: var(--mono); font-size: 9px; letter-spacing: .26em;
  color: rgba(241,234,216,.45);
  transition: color .25s;
}
.gz-metodos-tab strong{
  font-family: var(--brand); font-weight: 500;
  font-size: 22px; line-height: 1;
  color: rgba(241,234,216,.85);
  letter-spacing: -.01em;
  transition: color .25s;
}
.gz-metodos-tab em{
  font-family: var(--brand); font-weight: 600; font-style: italic;
  font-size: 13px;
  color: rgba(241,234,216,.45);
  transition: color .25s;
}
.gz-metodos-tab:hover{
  background: rgba(241,234,216,.04);
}
.gz-metodos-tab:hover strong{ color: var(--gz-paper); }
.gz-metodos-tab.is-active{
  background: rgba(200,136,31,.08);
}
.gz-metodos-tab.is-active::before{ transform: translateY(-50%) scaleY(1); }
.gz-metodos-tab.is-active .gz-metodos-tab-num{ color: var(--gz-gold); }
.gz-metodos-tab.is-active strong{ color: var(--gz-paper); }
.gz-metodos-tab.is-active em{ color: var(--gz-gold); }

/* Lámina (la "página" técnica del método activo) */
.gz-lamina{
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px;
  background: linear-gradient(160deg, rgba(58,36,24,.45), rgba(31,20,16,.25));
  border: 1px solid rgba(241,234,216,.08);
  border-radius: 24px;
  padding: 28px;
  animation: gz-fade-up .4s cubic-bezier(.5,.1,.3,1) both;
}

/* Arte: el SVG ilustrativo grande con marco "lámina" */
.gz-lamina-art{
  position: relative;
  aspect-ratio: 1/1;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 38px, rgba(241,234,216,.025) 38px, rgba(241,234,216,.025) 39px),
    repeating-linear-gradient(90deg, transparent 0, transparent 38px, rgba(241,234,216,.025) 38px, rgba(241,234,216,.025) 39px),
    radial-gradient(ellipse at 50% 50%, rgba(31,20,16,.4), rgba(0,0,0,.5));
  border: 1px solid rgba(241,234,216,.12);
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
}
.gz-lamina-art-header{
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  z-index: 2;
}
.gz-lamina-fig{
  color: var(--gz-gold);
  background: rgba(31,20,16,.6);
  padding: 4px 10px;
  border: 1px solid rgba(200,136,31,.3);
  border-radius: 4px;
}
.gz-lamina-art-hint{
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(241,234,216,.55);
  background: rgba(31,20,16,.6);
  padding: 4px 10px;
  border-radius: 999px;
}
.gz-lamina-hint-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gz-gold);
  animation: gz-pulse-dot 1.6s ease infinite;
}
/* Esquinas tipo marco técnico */
.gz-lamina-art-corner-tl, .gz-lamina-art-corner-tr,
.gz-lamina-art-corner-bl, .gz-lamina-art-corner-br{
  position: absolute; width: 16px; height: 16px;
  border: 1.5px solid rgba(200,136,31,.5);
  pointer-events: none;
}
.gz-lamina-art-corner-tl{ top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.gz-lamina-art-corner-tr{ top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.gz-lamina-art-corner-bl{ bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.gz-lamina-art-corner-br{ bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.gz-mil{
  width: 100%; height: 100%;
  display: block;
  transition: transform .4s ease;
}
.gz-lamina-art:hover .gz-mil{ transform: scale(1.02); }

/* Panel info de la lámina */
.gz-lamina-info{
  display: flex; flex-direction: column; gap: 14px;
  padding: 8px 4px;
}
.gz-lamina-num{
  font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(241,234,216,.45);
}
.gz-lamina-title{
  font-family: var(--brand); font-weight: 500;
  font-size: clamp(36px, 4vw, 52px); line-height: .98;
  margin: 0; letter-spacing: -.02em;
}
.gz-lamina-title em{
  display: block; margin-top: 4px;
  font-family: var(--brand); font-weight: 600; font-style: italic;
  color: var(--gz-gold); font-size: .48em;
  letter-spacing: -.005em;
}
.gz-lamina-desc{
  font-size: 15px; line-height: 1.6;
  color: rgba(241,234,216,.78);
  margin: 6px 0 8px;
}
.gz-lamina-specs{
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 0;
  border-top: 1px solid rgba(241,234,216,.1);
  border-bottom: 1px solid rgba(241,234,216,.1);
}
.gz-spec-row{
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13.5px;
}
.gz-spec-label{
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(241,234,216,.55);
  flex-shrink: 0;
}
.gz-spec-dots{
  flex: 1;
  height: 1px;
  background-image: linear-gradient(to right, rgba(241,234,216,.2) 50%, transparent 50%);
  background-size: 5px 1px;
  background-repeat: repeat-x;
  align-self: center;
}
.gz-spec-value{
  font-family: var(--brand); font-weight: 600; font-style: italic;
  font-size: 16px; color: var(--gz-paper);
  letter-spacing: -.005em;
  flex-shrink: 0;
}
.gz-lamina-yield{
  margin-top: 4px;
}
.gz-lamina-yield strong{
  display: block; margin-top: 2px;
  font-family: var(--brand); font-weight: 600; font-style: italic;
  font-size: 22px; color: var(--gz-gold); letter-spacing: -.005em;
}

@media (max-width: 980px){
  .gz-metodos-stage{ grid-template-columns: 1fr; }
  .gz-metodos-tabs{
    flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; gap: 8px;
    padding-bottom: 8px;
    position: static;
    margin: 0 -28px; padding: 0 28px 12px;
    scrollbar-width: thin;
  }
  .gz-metodos-tab{
    flex-shrink: 0; width: 160px;
  }
  .gz-metodos-tab::before{
    left: 50%; top: auto; bottom: 0;
    transform: translateX(-50%) scaleX(0);
    width: 60%; height: 3px;
  }
  .gz-metodos-tab.is-active::before{ transform: translateX(-50%) scaleX(1); }
  .gz-lamina{ grid-template-columns: 1fr; gap: 20px; padding: 22px; }
}

/* ─── Animaciones de la lámina (corren cuando .gz-mil.is-running) ─── */
/* ESPRESSO: chorros gemelos + crema que aparece */
.gz-mil-pour-left, .gz-mil-pour-right{ opacity: 0; }
.gz-mil.is-running .gz-mil-pour-left{
  opacity: 1;
  animation: gz-mil-pour 2.4s cubic-bezier(.5,.1,.3,1) .4s infinite;
}
.gz-mil.is-running .gz-mil-pour-right{
  opacity: 1;
  animation: gz-mil-pour 2.4s cubic-bezier(.5,.1,.3,1) .55s infinite;
}
@keyframes gz-mil-pour {
  0%   { stroke-dashoffset: 56; }
  35%  { stroke-dashoffset: 0; }
  85%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.gz-mil.is-running .gz-mil-crema{
  animation: gz-mil-crema-in 2.4s ease-out 1.2s infinite;
}
@keyframes gz-mil-crema-in {
  0%, 30% { opacity: 0; }
  60%, 100% { opacity: .9; }
}

/* V60: stream + gotas + relleno taza */
.gz-mil-pour-stream{ opacity: 0; }
.gz-mil.is-running .gz-mil-pour-stream{
  opacity: 1;
  animation: gz-mil-stream 2s ease-out infinite;
}
@keyframes gz-mil-stream {
  0% { stroke-dashoffset: 28; opacity: 1; }
  60%, 100% { stroke-dashoffset: 0; opacity: .9; }
}
.gz-mil-drop{ opacity: 0; transform-origin: 150px 178px; }
.gz-mil.is-running .gz-mil-drop-1{ animation: gz-mil-drop 1.4s ease-in .8s infinite; }
.gz-mil.is-running .gz-mil-drop-2{ animation: gz-mil-drop 1.4s ease-in 1.1s infinite; }
.gz-mil.is-running .gz-mil-drop-3{ animation: gz-mil-drop 1.4s ease-in 1.4s infinite; }
@keyframes gz-mil-drop {
  0%   { transform: translateY(-12px); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(72px); opacity: 0; }
}
.gz-mil-fill{ transform: scaleY(0); transform-origin: bottom; }
.gz-mil.is-running .gz-mil-fill{
  animation: gz-mil-fill 4s ease-out 1s infinite;
}
@keyframes gz-mil-fill {
  0% { transform: scaleY(0); }
  90%, 100% { transform: scaleY(22); }
}

/* AEROPRESS: pistón baja + burbujas + goteo */
.gz-mil-piston, .gz-mil-piston-seal{ transform: translateY(0); }
.gz-mil.is-running .gz-mil-piston,
.gz-mil.is-running .gz-mil-piston-seal{
  animation: gz-mil-piston 3s ease-in-out 0.5s infinite;
}
@keyframes gz-mil-piston {
  0%, 15% { transform: translateY(0); }
  85%, 100% { transform: translateY(110px); }
}
.gz-mil-bubble{ transform-origin: center; opacity: 0; }
.gz-mil.is-running .gz-mil-b1{ animation: gz-mil-bubble 1.6s ease-in 0.4s infinite; }
.gz-mil.is-running .gz-mil-b2{ animation: gz-mil-bubble 1.6s ease-in 0.7s infinite; }
.gz-mil.is-running .gz-mil-b3{ animation: gz-mil-bubble 1.6s ease-in 1.0s infinite; }
@keyframes gz-mil-bubble {
  0%   { transform: translateY(0) scale(.5); opacity: 0; }
  30%  { opacity: .6; }
  100% { transform: translateY(-30px) scale(1.2); opacity: 0; }
}
.gz-mil-drip{ opacity: 0; }
.gz-mil.is-running .gz-mil-drip{
  opacity: 1;
  animation: gz-mil-drip 1.4s ease-in 1.2s infinite;
}
@keyframes gz-mil-drip {
  0%   { stroke-dasharray: 2 14; stroke-dashoffset: 16; }
  100% { stroke-dasharray: 2 14; stroke-dashoffset: 0; }
}

/* FRENCH: rod + disco bajan, partículas se acumulan abajo */
.gz-mil-plunger-rod, .gz-mil-plunger-disc, .gz-mil-plunger-mesh{ transform: translateY(0); }
.gz-mil.is-running .gz-mil-plunger-rod,
.gz-mil.is-running .gz-mil-plunger-disc,
.gz-mil.is-running .gz-mil-plunger-mesh{
  animation: gz-mil-plunger 3.5s ease-in-out 0.5s infinite;
}
@keyframes gz-mil-plunger {
  0%, 15% { transform: translateY(0); }
  75%, 100% { transform: translateY(110px); }
}
.gz-mil-particle{ transform: translateY(0); }
.gz-mil.is-running .gz-mil-p1{ animation: gz-mil-sink 3.5s ease-in 0.5s infinite; }
.gz-mil.is-running .gz-mil-p2{ animation: gz-mil-sink 3.5s ease-in 0.7s infinite; }
.gz-mil.is-running .gz-mil-p3{ animation: gz-mil-sink 3.5s ease-in 0.9s infinite; }
.gz-mil.is-running .gz-mil-p4{ animation: gz-mil-sink 3.5s ease-in 1.1s infinite; }
@keyframes gz-mil-sink {
  0%, 15% { transform: translateY(0); opacity: .55; }
  75%, 100% { transform: translateY(80px); opacity: .85; }
}

/* MOKA: vapor sube + café sube */
.gz-mil-vapor{ opacity: 0; transform-origin: center; }
.gz-mil.is-running .gz-mil-v1{ animation: gz-mil-vapor 2.4s ease-out 1.6s infinite; }
.gz-mil.is-running .gz-mil-v2{ animation: gz-mil-vapor 2.4s ease-out 1.85s infinite; }
.gz-mil.is-running .gz-mil-v3{ animation: gz-mil-vapor 2.4s ease-out 2.1s infinite; }
@keyframes gz-mil-vapor {
  0%   { opacity: 0; transform: translateY(8px) scale(.9); }
  30%  { opacity: .8; }
  100% { opacity: 0; transform: translateY(-26px) scale(1.4); }
}
.gz-mil-rise{ transform: translateY(28px); }
.gz-mil.is-running .gz-mil-rise{
  animation: gz-mil-rise 4s cubic-bezier(.5,.1,.3,1) infinite;
}
@keyframes gz-mil-rise {
  0%, 20%  { transform: translateY(28px); }
  75%, 100% { transform: translateY(0); }
}

/* ════════════════ 06 · CATÁLOGO (rediseñado · láminas) ═══════════════════ */
.gz-catalog{
  padding: 120px 28px 80px;
  max-width: 1320px; margin: 0 auto;
  position: relative;
}
.gz-catgrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.gz-catcard{
  position: relative;
  text-align: left;
  background: linear-gradient(160deg, rgba(58,36,24,.5), rgba(31,20,16,.25));
  border: 1px solid rgba(241,234,216,.08);
  border-radius: 24px;
  padding: 0 0 22px;
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.4,.1,.3,1), box-shadow .35s ease, border-color .35s ease;
  animation: gz-rise .6s cubic-bezier(.5,.1,.3,1) both;
}
.gz-catcard::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 20% 0%, var(--cafe-color) 0%, transparent 45%);
  opacity: .08; transition: opacity .35s; z-index: 0;
}
.gz-catcard:hover{
  transform: translateY(-8px);
  border-color: rgba(200,136,31,.4);
  box-shadow: 0 24px 50px rgba(0,0,0,.45);
}
.gz-catcard:hover::before{ opacity: .18; }

.gz-catcard-art{
  position: relative;
  aspect-ratio: 1/1;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 36px, rgba(241,234,216,.03) 36px, rgba(241,234,216,.03) 37px),
    repeating-linear-gradient(90deg, transparent 0, transparent 36px, rgba(241,234,216,.03) 36px, rgba(241,234,216,.03) 37px),
    radial-gradient(ellipse at 50% 50%, rgba(31,20,16,.55), rgba(0,0,0,.6));
  border-bottom: 1px solid rgba(241,234,216,.08);
  overflow: hidden;
}
.gz-catcard-art .gz-cil{
  width: 100%; height: 100%; display: block;
  transition: transform .5s ease;
}
.gz-catcard:hover .gz-cil{ transform: scale(1.04); }
.gz-catcard-fig{
  position: absolute; top: 12px; left: 14px; z-index: 2;
  font-family: var(--mono); font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gz-gold);
  background: rgba(31,20,16,.65);
  padding: 4px 10px;
  border: 1px solid rgba(200,136,31,.3);
  border-radius: 4px;
}
.gz-catcard-art-corner{
  position: absolute; width: 12px; height: 12px;
  border: 1.2px solid rgba(200,136,31,.5);
  pointer-events: none; z-index: 1;
}
.gz-catcard-art-corner-tl{ top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.gz-catcard-art-corner-tr{ top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.gz-catcard-art-corner-bl{ bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.gz-catcard-art-corner-br{ bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.gz-catcard-meta{
  padding: 22px 24px 0;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
  flex-grow: 1;
}
.gz-catcard-title{
  font-family: var(--brand); font-weight: 500;
  font-size: 30px; line-height: 1; margin: 0;
  letter-spacing: -.015em;
  color: var(--gz-paper);
}
.gz-catcard-title em{
  display: block; margin-top: 6px;
  font-family: var(--brand); font-weight: 600; font-style: italic;
  font-size: 15px;
  color: var(--gz-gold);
  letter-spacing: -.005em;
}
.gz-catcard-tag{
  font-size: 13.5px; line-height: 1.5;
  color: rgba(241,234,216,.65);
  margin: 0;
  flex-grow: 1;
}
.gz-catcard-footer{
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed rgba(241,234,216,.14);
}
.gz-catcard-intensity{ display: flex; flex-direction: column; gap: 6px; }
.gz-catcard-intensity-label{
  font-family: var(--mono); font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(241,234,216,.5);
}
.gz-catcard-intensity .gz-intensity-bean{ width: 13px; opacity: .15; }
.gz-catcard-intensity .gz-intensity-bean.is-on{ opacity: .95; }
.gz-catcard-arrow{
  font-size: 22px; color: rgba(241,234,216,.5);
  transition: transform .25s, color .25s;
}
.gz-catcard:hover .gz-catcard-arrow{ transform: translateX(6px); color: var(--gz-gold); }

/* Steam animation que corre cuando el catcard hace hover (running=hover) */
.gz-cil-steam{ opacity: 0; transform-origin: center bottom; }
.gz-cil.is-running .gz-st-1{ animation: gz-cil-steam 2.4s ease-out infinite; }
.gz-cil.is-running .gz-st-2{ animation: gz-cil-steam 2.4s ease-out .35s infinite; }
.gz-cil.is-running .gz-st-3{ animation: gz-cil-steam 2.4s ease-out .65s infinite; }
@keyframes gz-cil-steam {
  0%   { opacity: 0; transform: translateY(6px) scale(.95); }
  30%  { opacity: .7; }
  100% { opacity: 0; transform: translateY(-26px) scale(1.25); }
}

/* ─── SHEET (rediseñado: hero arriba con SVG grande) ─── */
.gz-sheet-hero-art{
  position: relative;
  grid-column: 1 / -1;
  aspect-ratio: 16/7;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 44px, rgba(241,234,216,.03) 44px, rgba(241,234,216,.03) 45px),
    repeating-linear-gradient(90deg, transparent 0, transparent 44px, rgba(241,234,216,.03) 44px, rgba(241,234,216,.03) 45px),
    radial-gradient(ellipse at 50% 60%, rgba(31,20,16,.5), rgba(0,0,0,.6));
  border-radius: 16px;
  border: 1px solid rgba(241,234,216,.1);
  margin-bottom: 8px;
  overflow: hidden;
}
.gz-sheet-hero-art .gz-cil{
  width: 100%; height: 100%; display: block;
  max-height: 100%;
}
.gz-sheet-fig{
  position: absolute; top: 14px; left: 18px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gz-gold);
  background: rgba(31,20,16,.7);
  padding: 6px 12px;
  border: 1px solid rgba(200,136,31,.3);
  border-radius: 4px;
}
.gz-sheet-hero-corner{
  position: absolute; width: 18px; height: 18px;
  border: 1.5px solid rgba(200,136,31,.5);
  pointer-events: none; z-index: 1;
}
.gz-sheet-hero-corner-tl{ top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.gz-sheet-hero-corner-tr{ top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.gz-sheet-hero-corner-bl{ bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.gz-sheet-hero-corner-br{ bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.gz-sheet-content{ grid-column: 1 / -1; }

/* ════════════════ CATA QUIZ (modal disparado desde el header) ════════════ */
.gz-cata-modal-wrap{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14,9,7,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: gz-fade-up .3s ease both;
}
.gz-cata-modal{
  position: relative;
  width: 100%; max-width: 880px;
  max-height: 92vh; overflow-y: auto;
  animation: gz-sheet-in .45s cubic-bezier(.5,.1,.3,1) both;
}
.gz-cata-modal-close{
  position: absolute; top: 2px; right: 2px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(241,234,216,.1); border: 1px solid rgba(241,234,216,.18);
  color: var(--gz-paper); font-size: 22px; line-height: 1;
  transition: all .2s;
}
.gz-cata-modal-close:hover{ background: var(--gz-gold); color: var(--gz-ink); border-color: var(--gz-gold); }
.gz-cata-modal-head{
  text-align: center; margin-bottom: 20px; padding: 0 52px;
}
.gz-cata-modal-head p{
  font-size: 15px; line-height: 1.55; color: rgba(241,234,216,.75);
  max-width: 480px; margin: 0 auto;
}
@media (max-width: 600px){
  .gz-cata-modal-head{ padding: 0 8px; }
}
.gz-cata-stage{
  position: relative;
  max-width: 760px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(58,36,24,.55), rgba(31,20,16,.3));
  border: 1px solid rgba(241,234,216,.1);
  border-radius: 28px;
  padding: 48px;
  min-height: 480px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  transition: max-width .5s ease, min-height .5s ease;
}
.gz-cata-stage.is-result{
  max-width: 880px; min-height: 640px;
}

/* Granos cayendo en el resultado */
.gz-cata-falling{
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.gz-cata-falling img{
  position: absolute; top: -50px;
  animation: gz-cata-rain linear infinite;
  opacity: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
@keyframes gz-cata-rain {
  0%   { transform: translateY(-50px) rotate(var(--gz-bean-rot, 0deg)); opacity: 0; }
  10%  { opacity: .45; }
  90%  { opacity: .45; }
  100% { transform: translateY(700px) rotate(calc(var(--gz-bean-rot, 0deg) + 720deg)); opacity: 0; }
}

.gz-cata-q, .gz-cata-result, .gz-cata-calc{ position: relative; z-index: 2; }
.gz-cata-q{ animation: gz-fade-up .4s ease both; }
.gz-cata-progress{
  display: flex; align-items: center; gap: 8px; margin-bottom: 32px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
}
.gz-cata-progress-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(241,234,216,.15);
  transition: background .25s, transform .25s;
}
.gz-cata-progress-dot.is-on{ background: var(--gz-gold); transform: scale(1.3); }
.gz-cata-progress-text{ margin-left: 12px; color: rgba(241,234,216,.45); }
.gz-cata-question{
  font-family: var(--brand); font-weight: 500;
  font-size: clamp(28px, 3.8vw, 44px); line-height: 1.1;
  margin: 0 0 32px; letter-spacing: -.01em;
}
.gz-cata-opts{ display: flex; flex-direction: column; gap: 12px; }
.gz-cata-opt{
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  background: rgba(241,234,216,.04);
  border: 1px solid rgba(241,234,216,.12);
  border-radius: 16px;
  color: var(--gz-paper); text-align: left;
  font-size: 15px; line-height: 1.4;
  transition: all .2s;
  cursor: pointer;
}
.gz-cata-opt:hover{
  background: rgba(200,136,31,.1);
  border-color: var(--gz-gold);
  transform: translateX(4px);
}
.gz-cata-opt-letter{
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(200,136,31,.18);
  color: var(--gz-gold);
  font-family: var(--brand); font-weight: 600; font-style: italic;
  font-size: 16px;
  flex-shrink: 0;
}

/* ─── Fase: calculando ─── */
.gz-cata-calc{
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  animation: gz-fade-up .3s ease both;
}
.gz-cata-calc-bean{
  width: 120px; height: 120px;
  display: grid; place-items: center;
  position: relative;
}
.gz-cata-calc-bean::before{
  content: ""; position: absolute; inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,136,31,.4), transparent 60%);
  animation: gz-cata-pulse 1.4s ease-in-out infinite;
}
.gz-cata-calc-bean img{
  width: 90px; height: auto;
  animation: gz-cata-spin 1.6s linear infinite;
  filter: drop-shadow(0 0 18px rgba(200,136,31,.5));
}
@keyframes gz-cata-spin { to { transform: rotate(360deg); } }
@keyframes gz-cata-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.25); opacity: .5; }
}
.gz-cata-calc-text{
  font-family: var(--brand); font-weight: 500;
  font-size: 28px; line-height: 1; margin: 0;
  letter-spacing: -.015em;
}
.gz-cata-calc-text em{ font-style: italic; font-weight: 600; color: var(--gz-gold); }
.gz-cata-calc-pulse{
  display: inline-block; width: 8px; height: 8px;
  background: var(--gz-gold); border-radius: 50%;
  margin-right: 12px;
  animation: gz-pulse-dot 1.2s ease-in-out infinite;
}
.gz-cata-calc-sub{
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(241,234,216,.5);
  margin: 0;
}

/* ─── Resultado dramático ─── */
.gz-cata-result{
  text-align: center;
  animation: gz-cata-result-in .8s cubic-bezier(.4,.1,.3,1) both;
  display: flex; flex-direction: column; align-items: center;
}
@keyframes gz-cata-result-in {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.gz-cata-result-eyebrow{
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gz-gold);
  margin-bottom: 16px;
}
.gz-cata-result-line{
  width: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gz-gold), transparent);
}
.gz-cata-result-name{
  font-family: var(--brand); font-weight: 500;
  font-size: clamp(48px, 6vw, 84px); line-height: .95;
  margin: 0 0 8px; letter-spacing: -.025em;
}
.gz-cata-result-name em{
  display: block; margin-top: 10px;
  font-family: var(--brand); font-weight: 600; font-style: italic;
  font-size: .42em; color: var(--gz-gold);
  letter-spacing: -.01em;
}
.gz-cata-result-art{
  position: relative;
  width: 100%; max-width: 380px;
  aspect-ratio: 1/1;
  margin: 8px auto 18px;
  animation: gz-cata-art-in 1s cubic-bezier(.4,.1,.3,1) .3s both;
}
@keyframes gz-cata-art-in {
  from { opacity: 0; transform: scale(.5) rotate(-12deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.gz-cata-result-art-glow{
  position: absolute; inset: -20%;
  background: radial-gradient(circle, rgba(200,136,31,.3) 0%, transparent 55%);
  animation: gz-cata-glow 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gz-cata-glow {
  0%,100% { transform: scale(1); opacity: .8; }
  50%     { transform: scale(1.12); opacity: 1; }
}
.gz-cata-result-art .gz-cil{
  width: 100%; height: 100%; display: block;
  position: relative; z-index: 2;
}
.gz-cata-result-blurb{
  font-size: 17px; line-height: 1.55;
  color: rgba(241,234,216,.85);
  max-width: 520px; margin: 0 auto 22px;
}
.gz-cata-result-tags{
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 32px;
}
.gz-cata-result-actions{
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 360px;
}
.gz-cata-act{
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  transition: all .25s ease;
}
.gz-cata-act-primary{
  background: var(--gz-gold);
  color: var(--gz-ink);
  border: 1px solid var(--gz-gold);
}
.gz-cata-act-primary:hover{ background: #E0A95A; border-color: #E0A95A; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200,136,31,.35); }
.gz-cata-act-primary.is-saved{
  background: rgba(200,136,31,.2);
  color: var(--gz-gold);
  border-color: rgba(200,136,31,.4);
  cursor: default;
}
.gz-cata-act:not(.gz-cata-act-primary){
  background: rgba(241,234,216,.06);
  color: var(--gz-paper);
  border: 1px solid rgba(241,234,216,.18);
}
.gz-cata-act:not(.gz-cata-act-primary):hover{
  border-color: var(--gz-gold); color: var(--gz-gold);
}
.gz-cata-act-ghost{
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(241,234,216,.55) !important;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
}
.gz-cata-act-ghost:hover{ color: var(--gz-gold) !important; }

@media (max-width: 600px){
  .gz-cata-stage{ padding: 32px 24px; }
  .gz-cata-result-name{ font-size: 44px; }
  .gz-cata-result-art{ max-width: 260px; }
}