/* =====================================================================
   10 · TRAE TU TAZÓN (id="tazon")
   Promo para quienes trabajan en Barrio Italia: café a $1.000.
   Partes: franja cobre inclinada · foto + texto · 3 pasos · condiciones.
   ===================================================================== */

.tazon {
  position: relative;
  overflow: hidden;
  background: var(--negro);
  padding-top: calc(var(--espacio-seccion) + 40px);
}

/* Franja cobre inclinada con texto que se mueve */
.tazon__franja {
  position: absolute;
  left: -40px;
  right: -40px;
  top: 26px;
  height: 60px;
  transform: rotate(-2deg);
  background: var(--cobre);
  color: var(--negro);
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.tazon__franja-pista {
  display: flex;
  flex-shrink: 0;
  gap: 28px;
  padding-right: 28px;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  animation: desplazar 26s linear infinite;
}
.tazon__franja-pista span::after { content: "★"; margin-left: 28px; }

/* Foto + texto */
.tazon__grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}

.tazon__foto { position: relative; height: 520px; overflow: hidden; }   /* alto del video (antes 620px) */
.tazon__foto img { width: 100%; height: 100%; object-fit: cover; animation: zoom-lento 9s ease-in-out infinite alternate; }
/* Video (llena el mismo espacio que la foto; se recorta para calzar) */
.tazon__video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Filtro para que combine con los colores cálidos y oscuros del sitio:
     brightness = más oscuro (1 = normal) · saturate = menos color frío
     sepia = tono café cálido · contrast = un poco más de fuerza.
     Para quitarlo: borra la línea "filter". */
  filter: brightness(.72) contrast(1.1) saturate(.85) sepia(.28);
}
/* Velo cobre muy suave encima del video (se suma a la sombra de abajo) */
.tazon__foto::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(185, 128, 104, .12); mix-blend-mode: multiply; }
.tazon__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,9,8,0) 40%, rgba(11,9,8,.8)); }

/* Círculo "$1.000" que flota sobre la foto */
.tazon__sello {
  position: absolute;
  right: 28px;
  top: 28px;
  z-index: 1;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--negro);
  border: 1px solid var(--cobre);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--texto-suave);
  animation: flotar 6s ease-in-out infinite;
}
.tazon__sello strong { font-size: 40px; font-weight: 300; color: var(--cobre); letter-spacing: -1px; line-height: 1.1; }

/* Texto al pie de la foto con vapor animado */
.tazon__pie { position: absolute; left: 28px; bottom: 26px; z-index: 1; display: flex; align-items: flex-end; gap: 14px; font-size: 14px; letter-spacing: 3px; }
.tazon__vapor { position: relative; width: 44px; height: 44px; }
.tazon__vapor span { position: absolute; bottom: 0; width: 10px; height: 40px; border-radius: 50%; border-left: 2px solid rgba(242, 237, 231, .55); animation: vapor 2.8s ease-in infinite; }
.tazon__vapor span:nth-child(1) { left: 6px; }
.tazon__vapor span:nth-child(2) { left: 18px; animation-delay: .9s; }
.tazon__vapor span:nth-child(3) { left: 30px; animation-delay: 1.8s; }

.tazon__texto { display: flex; flex-direction: column; gap: 20px; }
.tazon__titulo { font-size: clamp(40px, 4.4vw, 64px);   /* antes hasta 84px */ font-weight: 300; line-height: .98; letter-spacing: -0.03em; }
.tazon__titulo span { color: var(--cobre); }

.tazon__oferta { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.tazon__oferta-texto { font-size: 20px; line-height: 1.3; font-weight: 300; color: var(--texto-2); padding-bottom: 16px; }
.tazon__precio { font-size: clamp(72px, 9vw, 130px);   /* antes hasta 190px */ line-height: .85; font-weight: 200; letter-spacing: -0.05em; }

/* Cafés incluidos */
.tazon__incluidos-titulo { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; letter-spacing: 3px; color: var(--cobre-instagram);   /* PRUEBA: antes var(--cobre) */ margin-bottom: 12px; }
.tazon__incluidos-titulo::before { content: ""; width: 32px; height: 1px; background: var(--cobre-instagram); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li { padding: 10px 18px; border: 1px solid var(--cobre); font-size: 16px; transition: background var(--transicion), color var(--transicion); }
.chips li:hover { background: var(--cobre); color: var(--negro); }

/* Pasos 01 · 02 · 03 */
.tazon__pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 64px; }
.paso { padding: 22px 22px 24px; background: var(--tarjeta-2); border-top: 2px solid var(--cobre); }
.paso__numero { font-size: 13px; letter-spacing: 3px; font-weight: 700; color: var(--cobre-instagram); }   /* PRUEBA: antes var(--cobre) */
.paso__titulo { font-size: 21px; font-weight: 400; margin: 8px 0; }
.paso__texto { font-size: 15px; line-height: 1.5; color: var(--texto-suave); }

/* Condiciones + botón */
.tazon__pie-seccion { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 48px; }
.tazon__condiciones { font-size: 14px; color: var(--texto-apagado); }


/* ---------- Tablet y celular ---------- */
@media (max-width: 1024px) {
  .tazon__grilla { grid-template-columns: 1fr; gap: 40px; }
  .tazon__foto { height: 400px; order: 2; }  /* en tablet la foto va después del texto */
  .tazon__franja { height: 52px; }
  .tazon__franja-pista { font-size: 16px; }
}

@media (max-width: 700px) {
  .tazon__foto { height: 340px; }
  .tazon__sello { width: 116px; height: 116px; right: 16px; top: 16px; }
  .tazon__sello strong { font-size: 30px; }
  .tazon__oferta-texto { font-size: 18px; padding-bottom: 12px; }
  .tazon__pasos { grid-template-columns: 1fr; }
  .tazon__pie-seccion { flex-direction: column; align-items: stretch; }
  .tazon__franja { height: 44px; }
  .tazon__franja-pista { font-size: 13px; }
  .chips li { font-size: 14px; padding: 8px 14px; }
}