/* ═══════════════════════════════════════════════════════════
   JOYERÍA GRIJALVA — bifurcacion.css

   La estructura «plata vende, oro asesora»: el home que divide el
   tráfico en dos caminos, la vitrina de plata y la página de oro.

   Depende de main.css (tokens, .container, .btn-cta, .fade-in) y de
   catalogo.css (.catalogo-card, .catalogo__grid) — las tarjetas de
   producto no se vuelven a maquetar aquí.

   Superficies, en orden de aparición en el home:
     hero (foto) → prueba-social → bifurca (lino) → vitrina (crema)
     → franja-taller (arena) → … secciones heredadas
   ═══════════════════════════════════════════════════════════ */

/* ── Hero de bifurcación ──────────────────────────────────────
   Una sola promesa y dos salidas. No es carrusel: lo que importa no
   se esconde detrás de una flecha. */
.hero-divide {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--vino-dark);
}

.hero-divide__media {
  position: absolute;
  inset: 0;
}

.hero-divide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Degradado desde abajo: el texto se apoya en la zona oscura y la
   pieza se sigue viendo arriba. */
.hero-divide__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 16, 13, .88) 0%,
    rgba(20, 16, 13, .62) 38%,
    rgba(20, 16, 13, .22) 72%,
    rgba(20, 16, 13, .28) 100%
  );
}

.hero-divide__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(64px, 12vw, 120px);
}

.hero-divide__content {
  max-width: 46rem;
}

.hero-divide__kicker {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 24px;
}

.hero-divide__title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: .01em;
  color: var(--blanco);
}

/* El segundo hemistiquio baja de línea y se marca en itálica: la
   promesa son dos, no una frase larga. */
.hero-divide__title em {
  display: block;
  font-style: italic;
  color: var(--blanco);
}

.hero-divide__sub {
  max-width: 34rem;
  margin-top: 24px;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: rgba(255, 253, 248, .82);
}

.hero-divide__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

/* Los botones del hero pesan más que los del resto del sitio: son la
   primera decisión que se le pide al visitante. */
.hero-divide__ctas .btn-cta {
  padding: 18px 40px;
  font-size: 12px;
}

.hero-divide__ctas .btn-cta--ghost {
  margin-left: 0;
  backdrop-filter: blur(2px);
}

@media (max-width: 520px) {
  .hero-divide__ctas .btn-cta {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ── Bifurcación: las dos tarjetas ────────────────────────────
   El único punto de la página donde conviven dos acciones del mismo
   peso, porque la elección es el contenido. */
.bifurca {
  padding-block: var(--space-section);
  background: var(--lino);
}

.bifurca__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
}

@media (min-width: 900px) {
  .bifurca__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bifurca__card {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
}

.bifurca__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--arena);
}

.bifurca__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.bifurca__card:hover .bifurca__media img {
  transform: scale(1.03);
}

/* Estado vacío: la tarjeta se sostiene sin foto mientras se sube la
   definitiva desde el Personalizador. */
.bifurca__media--empty {
  display: grid;
  place-items: center;
  color: var(--sup-4, #8a8275);
  font-family: var(--font-serif);
  font-size: 22px;
}

.bifurca__etiqueta {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  background: rgba(31, 27, 23, .82);
  color: var(--blanco);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bifurca__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(24px, 3.5vw, 40px);
}

.bifurca__title {
  font-family: var(--font-serif);
  font-size: clamp(29px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--tinta);
}

.bifurca__lead {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

.bifurca__lista {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.bifurca__lista li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* Filete de oro en lugar de viñeta: el detalle que marca la marca sin
   pintar un ícono en cada línea. */
.bifurca__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 16px;
  height: 1px;
  background: var(--oro);
}

.bifurca__foot {
  margin-top: auto;
  padding-top: 32px;
}

.bifurca__foot .btn-cta {
  display: block;
  text-align: center;
}

/* ── Secundario con cuerpo ────────────────────────────────────
   El .btn-cta--outline del tema apoya su borde en --linea (tinta al 12%):
   sobre crema se lee como un texto suelto, no como un botón. Donde las dos
   acciones pesan igual —las tarjetas de la bifurcación— el camino del oro
   también va sólido, pero en tinta y no en vino: así tiene el mismo peso
   visual sin pelear por el acento de la marca. */
.btn-cta--joya {
  background: var(--tinta);
  color: var(--blanco);
  border-color: var(--tinta);
}

.btn-cta--joya:hover {
  background: var(--vino-dark);
  border-color: var(--vino-dark);
  color: var(--blanco);
}

/* Un filete de oro bajo el botón oscuro: el detalle que la marca reserva para
   el metal, sin usarlo nunca como fondo. */
.bifurca__foot .btn-cta--joya {
  position: relative;
  box-shadow: inset 0 -2px 0 0 var(--oro);
}

.bifurca__nota {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta-suave);
  text-align: center;
}

/* ── Vitrina: el grid de plata del home ───────────────────────
   Solo plata. El oro no se vende en un grid: se cotiza. */
.vitrina {
  padding-block: var(--space-section);
  background: var(--crema);
}

.vitrina__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

@media (min-width: 700px) {
  .vitrina__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
  .vitrina__grid { grid-template-columns: repeat(4, 1fr); }
}

.vitrina__foot {
  margin-top: clamp(40px, 6vw, 64px);
  text-align: center;
}

/* Los «ver más» de sección se quedan en contorno —son navegación, no la
   acción principal— pero con un borde que exista: vino a 1.5px en vez del
   hairline gris, y relleno al pasar por encima. */
.vitrina__foot .btn-cta--outline,
.franja-taller__foot .btn-cta--outline {
  border-width: 1.5px;
  border-color: var(--vino);
  color: var(--vino);
}

.vitrina__foot .btn-cta--outline:hover,
.franja-taller__foot .btn-cta--outline:hover {
  background: var(--vino);
  border-color: var(--vino);
  color: var(--blanco);
}

/* Botón de compra dentro de la tarjeta de catálogo. Vive fuera del
   enlace de la tarjeta (no se anidan anclas) y por eso repite el
   ancho completo del pie. */
.catalogo-card__buy {
  display: block;
  margin: 0 clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px);
  padding: 13px 20px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
}

/* ── Franja del taller ────────────────────────────────────────
   Lo que ninguna de las dos rutas explica por sí sola: quién hace la
   pieza. Va después de la elección, no antes. */
.franja-taller {
  padding-block: var(--space-section);
  background: var(--arena);
}

.franja-taller__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 48px);
}

@media (min-width: 640px) {
  .franja-taller__pasos { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .franja-taller__pasos { grid-template-columns: repeat(4, 1fr); }
}

.franja-taller__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--lino);
  margin-bottom: 24px;
}

.franja-taller__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.franja-taller__paso:hover .franja-taller__media img {
  transform: scale(1.03);
}

.franja-taller__media--empty {
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 40px;
  color: var(--tinta-suave);
  opacity: .35;
}

.franja-taller__num {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vino);
  margin-bottom: 8px;
}

.franja-taller__title {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--tinta);
}

.franja-taller__text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta-suave);
}

.franja-taller__foot {
  margin-top: clamp(40px, 6vw, 64px);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   Página «Para todos los días» — la vitrina de plata
   ═══════════════════════════════════════════════════════════ */

.ruta {
  background: var(--crema);
}

/* Cabecera de ruta: sin foto a sangre. Estas páginas se leen después
   de una decisión ya tomada en el home; el hero sería un peaje. */
.ruta__hero {
  padding-block: clamp(120px, 15vw, 180px) clamp(40px, 6vw, 64px);
  background: var(--lino);
  text-align: center;
}

.ruta__kicker {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vino);
  margin-bottom: 16px;
}

.ruta__title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--tinta);
}

.ruta__sub {
  max-width: 42rem;
  margin: 24px auto 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

.ruta__body {
  padding-block: clamp(40px, 6vw, 64px) var(--space-section);
}

/* ── Filtros por tipo ─────────────────────────────────────────
   Barra horizontal de chips, no panel lateral: con menos de cien
   piezas un sidebar de filtros es peso muerto. */
.tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 32px;
}

.tipos__chip {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid var(--linea);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta-suave);
  background: var(--blanco);
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out), background .2s var(--ease-out);
}

.tipos__chip:hover {
  border-color: var(--tinta);
  color: var(--tinta);
}

.tipos__chip.is-active {
  background: var(--vino);
  border-color: var(--vino);
  color: var(--blanco);
}

.ruta__count {
  margin-bottom: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--tinta-suave);
}

.ruta__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

@media (min-width: 700px) {
  .ruta__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
  .ruta__grid { grid-template-columns: repeat(4, 1fr); }
}

.ruta__vacio {
  padding: clamp(40px, 6vw, 64px) 24px;
  text-align: center;
  background: var(--lino);
}

.ruta__vacio p {
  margin-bottom: 16px;
  color: var(--tinta-suave);
}

.ruta__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: clamp(40px, 6vw, 64px);
  font-size: 14px;
  color: var(--tinta-suave);
}

.ruta__pager-btn {
  padding: 12px 24px;
  border: 1px solid var(--linea);
  color: var(--tinta);
  transition: border-color .2s var(--ease-out);
}

.ruta__pager-btn:hover { border-color: var(--tinta); }

.ruta__pager-btn.is-disabled {
  opacity: .35;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   Página «Para toda la vida» — el oro que se cotiza
   ═══════════════════════════════════════════════════════════ */

/* Tres caminos, un mismo CTA. Ninguno lleva precio de compra: aquí no
   se agrega al carrito, se conversa. */
.rutas-oro {
  padding-block: clamp(40px, 6vw, 64px) var(--space-section);
  background: var(--crema);
}

.rutas-oro__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 32px);
}

@media (min-width: 780px) {
  .rutas-oro__grid { grid-template-columns: repeat(3, 1fr); }
}

.rutas-oro__card {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
}

.rutas-oro__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--arena);
}

.rutas-oro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.rutas-oro__card:hover .rutas-oro__media img {
  transform: scale(1.03);
}

.rutas-oro__media--empty {
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--tinta-suave);
  opacity: .5;
  text-align: center;
  padding: 16px;
}

.rutas-oro__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(24px, 3vw, 32px);
}

.rutas-oro__title {
  font-family: var(--font-serif);
  font-size: clamp(25px, 2.6vw, 31px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--tinta);
}

.rutas-oro__text {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

.rutas-oro__precio {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 1.2;
  color: var(--tinta);
}

.rutas-oro__precio span {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--tinta-suave);
}

.rutas-oro__foot {
  margin-top: auto;
  padding-top: 32px;
  display: grid;
  gap: 16px;
  justify-items: center;
}

.rutas-oro__foot .btn-cta {
  display: block;
  width: 100%;
  text-align: center;
}

/* ── Movimiento ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bifurca__media img,
  .franja-taller__media img,
  .rutas-oro__media img {
    transition: none;
  }

  .bifurca__card:hover .bifurca__media img,
  .franja-taller__paso:hover .franja-taller__media img,
  .rutas-oro__card:hover .rutas-oro__media img {
    transform: none;
  }
}