/* ==========================================================================
   Termos Épicos — Estilos por página / sección
   ========================================================================== */

/* ================= HERO SLIDER (home) — texto + termo ================= */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; padding-block: clamp(32px, 4vw, 60px); }
.hero-inner { position: relative; width: 100%; }
.hero-slides { position: relative; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  transition: opacity .8s var(--ease), visibility 0s linear .8s;
}
.hero-slide.active { position: relative; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .8s var(--ease), visibility 0s; }

.hero-text { max-width: 620px; }
.hero-text h1 { margin: 10px 0 20px; font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.hero-text h1 .display { display: block; font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1; margin-top: 8px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
/* Reveal escalonado del texto al activarse el slide */
.hero-text > * { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.hero-slide.active .hero-text > * { opacity: 1; transform: none; }
.hero-slide.active .hero-text > *:nth-child(1) { transition-delay: .10s; }
.hero-slide.active .hero-text > *:nth-child(2) { transition-delay: .18s; }
.hero-slide.active .hero-text > *:nth-child(3) { transition-delay: .26s; }
.hero-slide.active .hero-text > *:nth-child(4) { transition-delay: .34s; }

/* Termo "sin fondo" flotando: glow dorado detrás + sombra en el piso */
.hero-media {
  position: relative; justify-self: center; display: flex; align-items: center; justify-content: center;
  height: clamp(380px, 62vh, 600px);
}
.hero-media::before {   /* halo dorado */
  content: ""; position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 0;
  width: 118%; height: 90%;
  background: radial-gradient(closest-side, var(--glow), transparent 78%);
  filter: blur(6px);
}
.hero-media::after {    /* sombra elíptica en el piso */
  content: ""; position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); z-index: 0;
  width: 70%; height: 24px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.65), transparent 70%);
}
.hero-media img {
  position: relative; z-index: 1; height: 100%; width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 26px 38px rgba(0,0,0,.55));
  animation: floatY 7s ease-in-out infinite;
}

.hero-dots { display: flex; gap: 10px; margin-top: clamp(26px, 4vw, 46px); }
.hero-dots button { width: 36px; height: 3px; border: 0; padding: 0; background: rgba(240,234,216,.22); cursor: pointer; transition: background var(--dur-fast); }
.hero-dots button.active { background: var(--gold); }

@media (max-width: 860px) {
  .hero { min-height: auto; padding-block: 24px 44px; text-align: center; }
  .hero-slide { grid-template-columns: 1fr; gap: 24px; }
  .hero-media { order: -1; height: min(44vh, 380px); }
  .hero-text { max-width: 100%; margin-inline: auto; }
  .hero-text h1 .display { font-size: clamp(1.9rem, 8.5vw, 3rem); }
  .hero .eyebrow { font-size: .64rem; letter-spacing: .16em; }
  .hero-cta { justify-content: center; }
  .hero-cta .btn { flex: 1 1 auto; }
  .hero-dots { justify-content: center; }
}

/* ================= TICKER ================= */
.ticker { border-block: 1px solid var(--line); background: var(--bg2); overflow: hidden; padding-block: 14px; }
.ticker-track { display: flex; gap: 60px; width: max-content; animation: tickerMove 30s linear infinite; }
.ticker-track span { font-family: var(--font-serif); font-size: .82rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted-hi); display: inline-flex; align-items: center; gap: 60px; }
.ticker-track span::after { content: "◆"; color: var(--gold-lo); font-size: .6rem; }

/* ================= SECTION HEADER ================= */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(30px, 4vw, 52px); flex-wrap: wrap; }
.sec-head .txt { max-width: 60ch; }
.sec-head h2 { margin-top: 8px; }
.sec-head .btn { border-radius: 0; }   /* botones de sección: esquinas rectas (galería) */
/* Variante centrada (una sola columna) */
.sec-head-center { flex-direction: column; align-items: center; text-align: center; justify-content: center; }
.sec-head-center .txt { max-width: none; }
.sec-head-center h2 { font-size: clamp(1.3rem, 5.2vw, 2.9rem); }
.sec-head-center .btn { margin-top: 22px; }

/* ================= CATEGORÍAS — galería edge-to-edge (una sola fila) ================= */
.cat-grid {
  display: flex;
  /* full-bleed: rompe el .wrap y ocupa todo el ancho del viewport */
  position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw;
}
.cat-card {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  aspect-ratio: 3 / 5; display: flex; align-items: flex-end;
  border: 0; border-right: 1px solid rgba(201, 168, 76, .16); border-radius: 0;
}
.cat-card:last-child { border-right: 0; }
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1s var(--ease-out); }
/* Degradado inferior para legibilidad del texto */
.cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,4,2,0) 42%, rgba(6,4,2,.5) 66%, rgba(6,4,2,.95) 100%); }
.cat-card:hover img { transform: scale(1.06); }
.cat-label { position: relative; z-index: 2; padding: clamp(16px, 1.5vw, 26px); width: 100%; }
.cat-label h3 { font-family: var(--font-serif); font-size: clamp(1rem, 1.25vw, 1.3rem); line-height: 1.12; }
.cat-label .cat-desc { display: none; }   /* columnas angostas: solo nombre + Explorar */
.cat-label .cat-go { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-family: var(--font-serif); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.cat-label .cat-go svg { width: 14px; height: 14px; transition: transform var(--dur-fast); }
.cat-card:hover .cat-go svg { transform: translateX(4px); }

/* Endcap personalizado (última columna, misma silueta de galería) */
.cat-card.cat-custom { align-items: center; text-align: center; background: linear-gradient(160deg, var(--bg3), var(--bg2)); }
.cat-card.cat-custom::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 46% at 50% 34%, var(--glow), transparent 72%); }
.cat-card.cat-custom::after { display: none; }
.cat-card.cat-custom .cat-label { display: flex; flex-direction: column; align-items: center; }
.cat-custom .cat-spark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gold-lo); color: var(--gold-hi); margin-bottom: 14px; box-shadow: 0 0 26px var(--glow); }
.cat-custom .cat-spark svg { width: 22px; height: 22px; }
.cat-custom .cat-go { justify-content: center; }

/* Móvil/tablet: strip horizontal con swipe (mantiene la fila única) */
@media (max-width: 900px) {
  .cat-grid { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cat-grid::-webkit-scrollbar { display: none; }
  .cat-card { flex: 0 0 58%; scroll-snap-align: start; }
}
@media (max-width: 560px) { .cat-card { flex: 0 0 76%; } }

/* ================= GALERÍA (product grid) ================= */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); }
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Showcase: destacados en mosaico, sin aire entre piezas ----------
   Bloque ancho (más que el .wrap) pero con respiro en los costados. Fotos
   grandes, pegadas entre sí y con los datos sobre la imagen. Solo en el home. */
.product-grid.showcase {
  --showcase-w: min(100vw - clamp(36px, 8vw, 130px), 1500px);
  --showcase-line: 1px solid rgba(201, 168, 76, .16);
  display: flex; flex-wrap: wrap; gap: 0;
  width: var(--showcase-w);
  position: relative; left: 50%; margin-left: calc(var(--showcase-w) / -2);
}
.showcase .product-card {
  flex: 0 0 25%; min-width: 0;
  border-right: var(--showcase-line);
  border-bottom: var(--showcase-line);
}
/* Sin líneas en el borde exterior del mosaico */
.showcase .product-card:nth-child(4n) { border-right: 0; }
.showcase .product-card:nth-last-child(-n+4) { border-bottom: 0; }
.showcase .product-card .thumb { aspect-ratio: 3 / 4; }
/* Degradado permanente (no solo en hover) para leer el texto sobre la foto */
.showcase .product-card .thumb::after {
  opacity: 1;
  background: linear-gradient(180deg, rgba(6,4,2,0) 38%, rgba(6,4,2,.5) 64%, rgba(6,4,2,.95) 100%);
}
.showcase .product-card .info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: clamp(14px, 1.4vw, 26px);
  transition: transform var(--dur) var(--ease-out);
}
.showcase .product-card .title { font-size: clamp(1rem, 1.25vw, 1.32rem); }
/* Al hacer hover, la ficha sube justo lo que mide el botón de compra */

/* Móvil/tablet: 2 columnas pegadas — sin carrusel, todas las piezas visibles */
@media (max-width: 900px) {
  .product-grid.showcase { --showcase-w: calc(100vw - clamp(20px, 6vw, 44px)); }
  .showcase .product-card { flex: 0 0 50%; }
  .showcase .product-card:nth-child(4n) { border-right: var(--showcase-line); }
  .showcase .product-card:nth-child(2n) { border-right: 0; }
  .showcase .product-card:nth-last-child(-n+4) { border-bottom: var(--showcase-line); }
  .showcase .product-card:nth-last-child(-n+2) { border-bottom: 0; }
}

.card-link { display: block; color: inherit; text-decoration: none; }
.card-wa {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 9px;
  font-family: var(--font-serif); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); transition: color var(--dur-fast);
}
.card-wa svg { width: 14px; height: 14px; }
.product-card:hover .card-wa { color: var(--gold-hi); }

/* ================= FEATURED SPLIT ================= */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.split.rev { direction: rtl; } .split.rev > * { direction: ltr; }
.split-media { position: relative; border-radius: 0; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/5; box-shadow: var(--shadow); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media.floaty { animation: floatY 8s ease-in-out infinite; }

/* ================= TESTIMONIOS (editorial, minimalista) ================= */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); }
.testi { position: relative; padding: clamp(24px, 2.2vw, 32px); border: 1px solid var(--line); border-radius: 0; background: transparent; transition: border-color var(--dur); }
.testi:hover { border-color: var(--gold-lo); }
.testi .quote-mark { font-family: var(--font-display); font-size: 2.6rem; color: var(--gold-lo); line-height: .6; height: 20px; display: block; margin-bottom: 10px; }
.testi .stars { color: var(--gold-hi); letter-spacing: 4px; font-size: .78rem; margin-bottom: 14px; }
.testi p { color: var(--muted-hi); font-size: .95rem; line-height: 1.65; margin-bottom: 18px; }
.testi .who .name { display: block; font-family: var(--font-serif); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.testi .who .city { display: block; font-size: .76rem; color: var(--muted); margin-top: 3px; }

/* ================= FAQ / accordion ================= */
.faq-list { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; color: var(--text); cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; gap: 20px; align-items: center; font-family: var(--font-serif); font-size: 1.08rem; }
.faq-q .plus { flex: none; width: 26px; height: 26px; position: relative; color: var(--gold); }
.faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; background: currentColor; transition: transform var(--dur) var(--ease); }
.faq-q .plus::before { top: 12px; left: 4px; right: 4px; height: 2px; }
.faq-q .plus::after { left: 12px; top: 4px; bottom: 4px; width: 2px; }
.faq-item.open .faq-q .plus::after { transform: rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease); }
.faq-a p { padding-bottom: 24px; color: var(--muted-hi); }

/* ================= PROCESO / STEPS (limpio, flotante) ================= */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(26px, 3vw, 48px); }
.step { position: relative; }
.step .n {
  position: absolute; top: -14px; right: 0; z-index: 0; pointer-events: none;
  font-family: var(--font-display); font-size: clamp(3rem, 4.4vw, 4.2rem); line-height: 1;
  color: rgba(201, 168, 76, .09);
}
.step .step-ic { position: relative; z-index: 1; display: block; width: 30px; height: 30px; color: var(--gold-hi); margin-bottom: 20px; }
.step .step-ic svg { width: 30px; height: 30px; }
.step h3 { position: relative; z-index: 1; font-family: var(--font-serif); font-size: 1.14rem; margin: 0 0 10px; }
.step p { position: relative; z-index: 1; font-size: .94rem; color: var(--muted-hi); line-height: 1.55; }

/* ================= CTA band ================= */
.cta-band { position: relative; border-radius: 0; border: 0; background: none; padding: clamp(16px, 3vw, 40px) 0; text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: -10% 0 0; z-index: 0; background: radial-gradient(52% 90% at 50% 8%, var(--glow), transparent 60%); opacity: .6; pointer-events: none; }
.cta-band > * { position: relative; z-index: 2; }
.cta-band .lead { font-size: clamp(.9rem, 1.05vw, 1rem); color: var(--muted-hi); }
.cta-band .btn { border-radius: 0; }
.cta-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin: 24px auto 32px; }
.cta-point { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-hi); }
.cta-point svg { width: 16px; height: 16px; color: var(--gold-hi); }

/* ================= PAGE HEADER (interior) ================= */
.page-head { padding-block: clamp(40px, 6vw, 74px) clamp(20px, 3vw, 34px); text-align: center; }
.page-head h1 { margin: 10px 0 14px; }

/* ================= Lista de características (index / bodas) ================= */
.pdp-feature-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.pdp-feature-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted-hi); font-size: .96rem; }
.pdp-feature-list svg { width: 20px; height: 20px; color: var(--gold); flex: none; margin-top: 2px; }

/* ================= 404 ================= */
.err-wrap { text-align: center; padding-block: clamp(60px, 12vw, 140px); }
.err-wrap .code { font-family: var(--font-display); font-size: clamp(5rem, 20vw, 12rem); line-height: 1; }

/* ================= Prose (legal / envíos) ================= */
.prose { max-width: 760px; margin-inline: auto; }
.prose h2 { font-size: 1.5rem; margin: 34px 0 14px; }
.prose h3 { margin: 24px 0 10px; }
.prose p, .prose li { color: var(--muted-hi); margin-bottom: 12px; }
.prose ul { padding-left: 22px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .split, .split.rev { grid-template-columns: 1fr; direction: ltr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .product-grid, .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .steps { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 72px 1fr; }
  .cart-line .l-price { grid-column: 2; text-align: left; }
  .custom-grid { grid-template-columns: 1fr 1fr; }
}