/* ==========================================================
   PROMOCIONES — SERVICIO TÉCNICO LA ESPERANZA
   Complemento de la portada principal
========================================================== */


/* ==========================================================
   SECCIÓN
========================================================== */

.promo-section{
  position: relative;
  z-index: 5;

  width: min(1180px, 92%);

  margin:
    30px auto 50px;

  padding:
    45px 0 15px;
}


/* ==========================================================
   ENCABEZADO
========================================================== */

.promo-section__heading{
  max-width: 760px;

  margin:
    0 auto 32px;

  text-align:
    center;
}


.promo-section__eyebrow{
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    7px 13px;

  margin-bottom:
    12px;

  border:
    1px solid rgba(56,182,255,.26);

  border-radius:
    999px;

  background:
    rgba(56,182,255,.07);

  color:
    #72d4ff;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;

  box-shadow:
    0 0 24px rgba(56,182,255,.08);
}


.promo-section__heading h2{
  margin:
    0;

  color:
    #ffffff;

  font-family:
    "Manrope",
    "Inter",
    sans-serif;

  font-size:
    clamp(2.6rem, 4vw, 4.5rem);

  font-weight:
    900;

  line-height:
    1.08;

  text-shadow:
    0 12px 35px rgba(0,0,0,.45);
}


.promo-section__heading p{
  max-width:
    650px;

  margin:
    14px auto 0;

  color:
    rgba(235,242,255,.72);

  font-size:
    1.5rem;

  line-height:
    1.7;
}


/* ==========================================================
   GRID
========================================================== */

.promo-grid{
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap:
    20px;

  align-items:
    stretch;
}


/* ==========================================================
   TARJETA
========================================================== */

.promo-card{
  --mx:
    50%;

  --my:
    50%;

  position:
    relative;

  isolation:
    isolate;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  min-height:
    100%;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      rgba(16,31,58,.88),
      rgba(5,13,28,.95)
    );

  box-shadow:
    0 25px 65px rgba(0,0,0,.26);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}


.promo-card::before{
  content:
    "";

  position:
    absolute;

  inset:
    -35%;

  z-index:
    0;

  pointer-events:
    none;

  opacity:
    0;

  background:
    radial-gradient(
      420px circle
      at var(--mx) var(--my),

      rgba(56,182,255,.22),

      rgba(56,182,255,.08) 32%,

      transparent 63%
    );

  transition:
    opacity .35s ease;
}


.promo-card:hover::before{
  opacity:
    1;
}


.promo-card:hover{
  transform:
    translateY(-8px);

  border-color:
    rgba(56,182,255,.34);

  box-shadow:
    0 32px 75px rgba(0,0,0,.34),
    0 0 0 1px rgba(56,182,255,.10),
    0 0 40px rgba(56,182,255,.12);
}


.promo-card > *{
  position:
    relative;

  z-index:
    1;
}


/* ==========================================================
   PROMOCIÓN PRINCIPAL
========================================================== */

.promo-card--featured{
  border-color:
    rgba(56,182,255,.30);

  background:
    linear-gradient(
      145deg,
      rgba(16,44,78,.96),
      rgba(5,13,28,.97)
    );

  box-shadow:
    0 28px 75px rgba(0,0,0,.34),
    0 0 35px rgba(56,182,255,.10);
}


/* ==========================================================
   IMAGEN
========================================================== */

.promo-card__image{
  position:
    relative;

  height:
    215px;

  overflow:
    hidden;
}


.promo-card__image::after{
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      to bottom,
      transparent 30%,
      rgba(4,10,22,.28) 65%,
      rgba(4,10,22,.90) 100%
    );
}


.promo-card__image img{
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform .6s ease,
    filter .6s ease;
}


.promo-card:hover
.promo-card__image img{
  transform:
    scale(1.06);

  filter:
    brightness(1.05);
}


/* ==========================================================
   20% OFF
========================================================== */

.promo-discount{
  position:
    absolute;

  z-index:
    3;

  top:
    12px;

  right:
    10px;

  display:
    grid;

  place-items:
    center;

  width:
    88px;

  height:
    88px;

  border:
    1px solid rgba(255,255,255,.35);

  border-radius:
    50%;

  color:
    #07111f;

  background:
    linear-gradient(
      145deg,
      #74ddff,
      #38b6ff
    );

  font-size:
    1.65rem;

  font-weight:
    950;

  box-shadow:
    0 0 30px rgba(56,182,255,.40);

  animation:
    promoPulse 2.8s ease-in-out infinite;
}


@keyframes promoPulse{

  0%,
  100%{
    transform:
      scale(1);

    box-shadow:
      0 0 25px rgba(56,182,255,.28);
  }

  50%{
    transform:
      scale(1.05);

    box-shadow:
      0 0 42px rgba(56,182,255,.52);
  }

}


/* ==========================================================
   ETIQUETA DE SERVICIO
========================================================== */

.promo-status{
  position:
    absolute;

  z-index:
    3;

  top:
    18px;

  right:
    18px;

  padding:
    8px 12px;

  border:
    1px solid rgba(255,255,255,.20);

  border-radius:
    999px;

  color:
    rgba(255,255,255,.92);

  background:
    rgba(7,17,31,.72);

  backdrop-filter:
    blur(10px);

  font-size:
    1rem;

  font-weight:
    850;

  letter-spacing:
    .08em;
}


/* ==========================================================
   CONTENIDO
========================================================== */

.promo-card__content{
  display:
    flex;

  flex:
    1;

  flex-direction:
    column;

  padding:
    23px;
}


.promo-tag{
  align-self:
    flex-start;

  padding:
    6px 10px;

  margin-bottom:
    13px;

  border:
    1px solid rgba(245,197,66,.34);

  border-radius:
    999px;

  color:
    #ffd85a;

  background:
    rgba(245,197,66,.08);

  font-size:
    1rem;

  font-weight:
    850;

  letter-spacing:
    .11em;
}


.promo-tag--blue{
  border-color:
    rgba(56,182,255,.35);

  color:
    #71d7ff;

  background:
    rgba(56,182,255,.08);
}


.promo-tag--violet{
  border-color:
    rgba(124,92,255,.38);

  color:
    #b8a9ff;

  background:
    rgba(124,92,255,.09);
}


.promo-card h3{
  margin:
    0;

  color:
    #ffffff;

  font-family:
    "Manrope",
    "Inter",
    sans-serif;

  font-size:
    2rem;

  font-weight:
    900;

  line-height:
    1.2;

  text-align:
    left;
}


.promo-card p{
  margin:
    12px 0 0;

  color:
    rgba(235,242,255,.70);

  font-size:
    1.35rem;

  line-height:
    1.65;

  text-align:
    left;
}


/* ==========================================================
   PRECIO
========================================================== */

.promo-price{
  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  margin:
    20px 0 0;
}


.promo-price__old{
  position:
    relative;

  color:
    rgba(255,255,255,.48);

  font-size:
    1.5rem;

  font-weight:
    700;
}


.promo-price__old::after{
  content:
    "";

  position:
    absolute;

  left:
    -4px;

  right:
    -4px;

  top:
    50%;

  height:
    2px;

  background:
    #ff5f6d;

  transform:
    rotate(-8deg);
}


.promo-price strong{
  color:
    #72d7ff;

  font-size:
    3rem;

  font-weight:
    950;

  text-shadow:
    0 0 24px rgba(56,182,255,.22);
}


/* ==========================================================
   BENEFICIOS
========================================================== */

.promo-benefits{
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    16px;
}


.promo-benefits span{
  padding:
    6px 9px;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:
    999px;

  color:
    rgba(255,255,255,.76);

  background:
    rgba(255,255,255,.04);

  font-size:
    1.05rem;
}


/* ==========================================================
   BOTONES
========================================================== */

.promo-btn{
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  width:
    100%;

  margin-top:
    auto;

  padding:
    14px 16px;

  border:
    1px solid rgba(56,182,255,.50);

  border-radius:
    13px;

  color:
    #07111f;

  background:
    linear-gradient(
      135deg,
      #72d7ff,
      #38b6ff
    );

  font-size:
    1.15rem;

  font-weight:
    900;

  letter-spacing:
    .035em;

  text-decoration:
    none;

  box-shadow:
    0 14px 35px rgba(56,182,255,.15);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}


.promo-price +
.promo-benefits +
.promo-btn{
  margin-top:
    18px;
}


.promo-card:not(.promo-card--featured)
.promo-btn{
  margin-top:
    auto;
}


.promo-btn:hover{
  transform:
    translateY(-3px);

  filter:
    brightness(1.06);

  box-shadow:
    0 18px 42px rgba(56,182,255,.24);
}


.promo-btn--ghost{
  color:
    rgba(255,255,255,.90);

  background:
    rgba(255,255,255,.055);

  border-color:
    rgba(255,255,255,.14);

  box-shadow:
    none;
}


.promo-btn--ghost:hover{
  border-color:
    rgba(56,182,255,.36);

  background:
    rgba(56,182,255,.10);
}


/* ==========================================================
   NOTA
========================================================== */

.promo-note{
  margin:
    20px 0 0;

  color:
    rgba(255,255,255,.42);

  font-size:
    1.1rem;

  text-align:
    center;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 940px){

  .promo-grid{
    grid-template-columns:
      1fr 1fr;
  }


  .promo-card--featured{
    grid-column:
      1 / -1;

    display:
      grid;

    grid-template-columns:
      .9fr 1.1fr;
  }


  .promo-card--featured
  .promo-card__image{
    height:
      100%;

    min-height:
      320px;
  }

}


@media (max-width: 680px){

  .promo-section{
    width:
      min(92%, 560px);

    margin-top:
      15px;

    padding-top:
      30px;
  }


  .promo-grid{
    grid-template-columns:
      1fr;
  }


  .promo-card--featured{
    display:
      flex;

    grid-column:
      auto;
  }


  .promo-card--featured
  .promo-card__image{
    height:
      210px;

    min-height:
      0;
  }


  .promo-card__image{
    height:
      190px;
  }


  .promo-discount{
    width:
      76px;

    height:
      76px;

    font-size:
      1.4rem;
  }


  .promo-section__heading p{
    font-size:
      1.35rem;
  }

}


/* ==========================================================
   ACCESIBILIDAD
========================================================== */

@media (prefers-reduced-motion: reduce){

  .promo-discount{
    animation:
      none;
  }


  .promo-card,
  .promo-card__image img,
  .promo-btn{
    transition:
      none;
  }

}