/* ==========================================================================
   BAAN PHO — regalo.css  ·  página Tarjeta Regalo
   Valores de "Baan Pho - Tarjeta Regalo.dc.html" (style=, móvil) y su
   bloque @media (min-width:900px) del <helmet> (líneas 90–106).
   ========================================================================== */

/* ---- Hero ---- */
.bp-trhero {
  position: relative;
  height: 88vh;
  min-height: 600px;
  max-height: 820px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bp-trhero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  animation: bpZoom var(--zoom-dur-regalo) ease-in-out infinite alternate;
}

.bp-trhero-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--velo-noche), 0.92) 0%, rgba(var(--velo-noche), 0.4) 44%, rgba(var(--velo-noche), 0.2) 72%, rgba(var(--velo-noche), 0.35) 100%);
}

.bp-trhero-inner {
  position: relative;
  z-index: 2;
  padding: 0 30px 52px;
}

.bp-trhero-inner .bp-eyebrow {
  margin-bottom: 18px;
}
.bp-trhero-inner .bp-eyebrow-raya { background: var(--oro-300); }
.bp-trhero-inner .bp-eyebrow span:last-child {
  color: var(--oro-300);
  letter-spacing: var(--ls-eyebrow-pie);
}

.bp-trhero-inner h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-5xl);
  line-height: 1.04;
  margin: 0 0 18px;
  color: var(--blanco-foto);
  text-shadow: var(--sombra-h1-ficha);
}

.bp-trhero-inner p {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--texto-foto);
  margin: 0;
  max-width: 330px;
  text-shadow: var(--sombra-texto-foto);
}

/* ---- Intro ---- */
.bp-tr-intro {
  padding: 76px 30px 20px;
  background: var(--crema);
  text-align: center;
}

.bp-tr-intro > span {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow-pie);
  color: var(--oro-700);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
}

.bp-tr-intro h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-cita);   /* 33px literal del prototipo */
  line-height: 1.12;
  margin: 14px 0 18px;
  color: var(--tinta);
}

.bp-tr-intro p {
  font-size: var(--fs-base);
  line-height: 1.72;
  color: var(--texto-2);
  margin: 0 auto;
  max-width: 340px;
}

/* ---- Cómo funciona ---- */
.bp-tr-pasos-seccion {
  padding: 44px 26px 24px;
  background: var(--crema);
}

.bp-tr-pasos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bp-tr-paso {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--blanco);
  border-radius: var(--r-lg);
  padding: 24px 24px;
  box-shadow: var(--sombra-card-paso);
}

.bp-tr-paso-num {
  font-family: var(--font-serif);
  font-size: var(--fs-hub-intro-desktop);   /* 34px literal */
  color: var(--oro-500);
  font-weight: var(--fw-serif-fuerte);
  line-height: 1;
  flex: none;
  width: 38px;
}

.bp-tr-paso h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-xl);
  margin: 0 0 6px;
  color: var(--tinta);
}

.bp-tr-paso p {
  font-size: var(--fs-md);
  line-height: 1.62;
  color: var(--texto-2);
  margin: 0;
}

/* ---- Las tarjetas (sobre verde bosque) ---- */
.bp-tr-cards-seccion {
  padding: 70px 26px 20px;
  background: var(--verde-bosque);
}

.bp-tr-cards-head {
  text-align: center;
  margin-bottom: 40px;
}

.bp-tr-cards-head > span {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow-pie);
  color: var(--oro-300);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
}

.bp-tr-cards-head h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-cita);
  line-height: 1.12;
  margin: 14px 0 0;
  color: var(--blanco-foto);
}

.bp-tr-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bp-giftcard {
  background: var(--crema);
  border-radius: var(--r-card-chica);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
}

.bp-giftcard--destacada { border: 1.5px solid var(--oro-500); }

.bp-giftcard-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--oro-500);
  color: var(--sobre-oro);
  font-size: var(--fs-badge);
  letter-spacing: var(--ls-boton);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  padding: 6px 14px;
  border-radius: 0 22px 0 14px;
}

.bp-giftcard-label {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-boton-contorno);
  color: var(--oro-700);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  margin-bottom: 10px;
}

.bp-giftcard-precio {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.bp-giftcard-importe {
  font-family: var(--font-serif);
  font-size: var(--fs-precio-gift);
  font-weight: var(--fw-serif-fuerte);
  color: var(--tinta);
  line-height: 0.9;
}

.bp-giftcard-dur {
  font-size: var(--fs-md);
  color: var(--texto-meta);
  font-weight: var(--fw-fuerte);
}

.bp-giftcard h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-mega-cat-desktop);   /* 23px literal */
  margin: 0 0 8px;
  color: var(--tinta);
}

.bp-giftcard > p {
  font-size: var(--fs-nav-compacta);
  line-height: 1.6;
  color: var(--texto-2);
  margin: 0 0 20px;
}

.bp-giftcard-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1.5px solid var(--verde-bosque);
  color: var(--tinta);
  padding: 14px;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  border-radius: var(--r-pastilla);
}
.bp-giftcard-cta:hover { color: var(--tinta); }

.bp-giftcard-cta--llena {
  background: var(--verde-bosque);
  border: none;
  color: var(--beige);
  padding: 14px;
}
.bp-giftcard-cta--llena:hover { color: var(--beige); }

.bp-tr-nota {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--texto-pie);
  text-align: center;
  margin: 26px auto 4px;
  max-width: 320px;
}

.bp-tr-nota span {
  color: var(--oro-200);
  font-weight: var(--fw-fuerte);
}

/* ---- Signature Experience (verde noche) ---- */
.bp-tr-sig {
  background: var(--verde-noche);
  padding: 0 0 64px;
}

.bp-tr-sig-foto {
  position: relative;
  overflow: hidden;
}

.bp-tr-sig-foto img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  animation: bpZoom var(--zoom-dur-sig) ease-in-out infinite alternate;
}

.bp-tr-sig-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--velo-regalo), 0.35), rgba(var(--velo-regalo), 0.1) 40%, rgba(var(--velo-regalo), 0.55) 75%, var(--verde-noche) 100%);
}

.bp-tr-sig-titulo {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 28px;
  text-align: center;
}

.bp-tr-sig-eyebrow {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-eyebrow-pie);
  color: var(--oro-300);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  margin-bottom: 8px;
}

.bp-tr-sig-titulo h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-h2-gift);
  line-height: 1.06;
  margin: 0;
  color: var(--blanco-foto);
  text-shadow: var(--sombra-h2-foto);
}

.bp-tr-sig-cuerpo { padding: 34px 30px 0; }

.bp-tr-sig-precios {
  display: flex;
  gap: 14px;
  margin-bottom: 26px;
}

.bp-tr-sig-precio {
  flex: 1;
  border: 1px solid rgba(var(--oro-rgb), 0.4);
  border-radius: var(--r-md);
  padding: 18px 10px;
  text-align: center;
}

.bp-tr-sig-importe {
  font-family: var(--font-serif);
  font-size: var(--fs-h2-blog);   /* 38px literal */
  font-weight: var(--fw-serif-fuerte);
  color: var(--oro-200);
  line-height: 1;
}

.bp-tr-sig-dur {
  font-size: var(--fs-xs);
  color: var(--texto-pie);
  letter-spacing: var(--ls-nav);
  margin-top: 4px;
}

.bp-tr-sig-cuerpo > p {
  font-size: var(--fs-cuerpo-panel);
  line-height: 1.72;
  color: var(--texto-regalo);
  margin: 0 0 18px;
}
.bp-tr-sig-cuerpo > p:last-of-type { margin-bottom: 28px; }

.bp-tr-sig-destacado {
  color: var(--oro-200);
  font-style: italic;
}

.bp-tr-sig-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--oro-500);
  color: var(--sobre-oro);
  padding: 16px;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  border-radius: var(--r-pastilla);
}
.bp-tr-sig-cta:hover { color: var(--sobre-oro); }

/* ---- FAQ de regalo (variante crema) ---- */
.bp-faq-seccion--regalo {
  background: var(--crema);
  padding: 76px 30px 74px;
}

.bp-faq-seccion--regalo .bp-faq-head > span { letter-spacing: var(--ls-eyebrow-pie); }
.bp-faq-seccion--regalo .bp-faq-head h2 { font-size: var(--fs-h2-faq-ficha); }
.bp-faq-seccion--regalo strong { color: var(--tinta); }

/* ---- CTA final ---- */
.bp-tr-cta {
  position: relative;
  overflow: hidden;
  background: var(--verde-noche);
  padding: 80px 30px 88px;
  text-align: center;
}

.bp-tr-cta > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.bp-tr-cta-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--velo-noche), 0.86) 0%, rgba(var(--velo-noche), 0.74) 45%, rgba(var(--velo-noche), 0.9) 100%);
}

.bp-tr-ctainner {
  position: relative;
  z-index: 2;
}

.bp-tr-ctainner > img {
  width: 52px;
  height: 46px;
  margin: 0 auto 26px;
  display: block;
  opacity: 0.9;
}

.bp-tr-ctainner > span {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow-pie);
  color: var(--oro-300);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
}

.bp-tr-ctainner h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-h2-cat-desktop);   /* 36px literal */
  line-height: var(--lh-titular);
  margin: 12px 0 24px;
  color: var(--blanco-foto);
}

.bp-tr-cta-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--oro-500);
  color: var(--sobre-oro);
  padding: 16px 34px;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  border-radius: var(--r-pastilla);
}
.bp-tr-cta-boton:hover { color: var(--sobre-oro); }

/* ==========================================================================
   Desktop (helmet, líneas 90–106)
   ========================================================================== */
@media (min-width: 900px) {
  .bp-trhero {
    height: 84vh;
    max-height: 880px;
  }
  .bp-trhero-inner {
    max-width: var(--contenedor-texto);
    margin: 0 auto;
    width: 100%;
    padding: 0 6vw 70px;
  }
  .bp-trhero-inner h1 { font-size: var(--fs-h1-regalo-desktop); }

  .bp-tr-intro { padding: 100px 6vw 30px; }
  .bp-tr-intro h2 { font-size: var(--fs-cita-desktop); }
  .bp-tr-intro p {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .bp-tr-pasos-seccion { padding: 50px max(6vw, calc((100% - var(--contenedor-texto)) / 2)) 30px; }
  .bp-tr-pasos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
  }

  .bp-tr-cards-seccion { padding: 96px max(6vw, calc((100% - var(--contenedor-texto)) / 2)) 40px; }
  .bp-tr-cards-head h2 { font-size: var(--fs-h1-ficha); }   /* 44px literal */
  .bp-tr-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
  }
  .bp-tr-nota { max-width: 560px; }

  .bp-tr-sig-foto img { height: 540px; }
  .bp-tr-sig-cuerpo {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  .bp-faq-seccion--regalo {
    padding-left: max(6vw, calc((100% - 800px) / 2));
    padding-right: max(6vw, calc((100% - 800px) / 2));
  }

  .bp-tr-cta {
    padding-top: 130px;
    padding-bottom: 136px;
  }
}