/* =========================================================
   EBE-PE-TLK · Capa de personalización sobre Bootstrap 5.3
   Editar SOLO :root para cambiar la apariencia.
   ========================================================= */
:root {
  /* Color */
  --ebe-pe-tlk-bg: #000;
  --ebe-pe-tlk-bg-puntos: #ffffff;
  --ebe-pe-tlk-surface: #0b0b0c;
  --ebe-pe-tlk-surface-2: #141416;
  --ebe-pe-tlk-text: #f5f5f7;
  --ebe-pe-tlk-muted: #edededca;
  --ebe-pe-tlk-subtle: #6e6e75;
  --ebe-pe-tlk-line: rgba(255, 255, 255, 0.09);
  --ebe-pe-tlk-line-strong: rgba(255, 255, 255, 0.22);
  --ebe-pe-tlk-accent: #fff;
  --ebe-pe-tlk-accent-text: #0a0a0a;

  --tlk-azul: #410099;
  --tlk-rojo: #ff0030;

  /* Tipografía */
  --ebe-pe-tlk-font-display: "Roboto, Archivo", system-ui, sans-serif;
  --ebe-pe-tlk-font-body: "Roboto, Source Sans 3", system-ui, sans-serif;
  --ebe-pe-tlk-fs-hero: clamp(52px, 9vw, 112px);
  --ebe-pe-tlk-fs-h2: clamp(34px, 5vw, 60px);
  --ebe-pe-tlk-fs-h3: clamp(20px, 1.8vw, 24px);
  --ebe-pe-tlk-fs-lead: clamp(16px, 1.35vw, 19px);

  /* Espacio y forma */
  --ebe-pe-tlk-max: 1180px;
  --ebe-pe-tlk-gutter: clamp(24px, 4vw, 40px);
  --ebe-pe-tlk-header-h: 72px;
  --ebe-pe-tlk-section-py: clamp(80px, 10vw, 140px);
  --ebe-pe-tlk-card-p: clamp(22px, 2.6vw, 32px);
  --ebe-pe-tlk-radius-xl: 36px;
  --ebe-pe-tlk-radius-lg: 24px;
  --ebe-pe-tlk-radius-md: 18px;
  --ebe-pe-tlk-blur: 22px;
  --ebe-pe-tlk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* HERO · 4 imágenes: idioma (es/en) × pantalla (mobile <768px / desktop ≥768px)
     La proporción del hero = proporción de la imagen (no recorta) */
  --ebe-pe-tlk-hero-es-mobile: url("https://cdn.teleticket.com.pe/especiales/nueva-experiencia/images/hero-es-mobile-11-v2.jpg");
  --ebe-pe-tlk-hero-es-desktop: url("https://cdn.teleticket.com.pe/especiales/nueva-experiencia/images/hero-es-desktop-11-v2.jpg");
  --ebe-pe-tlk-hero-en-mobile: url("https://cdn.teleticket.com.pe/especiales/nueva-experiencia/images/hero-en-mobile-11-v2.jpg");
  --ebe-pe-tlk-hero-en-desktop: url("https://cdn.teleticket.com.pe/especiales/nueva-experiencia/images/hero-en-desktop-11-v2.jpg");
  --ebe-pe-tlk-hero-ratio-mobile: 9/16;
  --ebe-pe-tlk-hero-ratio-desktop: 16/9;
  --ebe-pe-tlk-hero-position: center;
  /* --ebe-pe-tlk-hero-max-h: calc(100svh - var(--ebe-pe-tlk-header-h)); */

  /* Fondo por sección */
  --ebe-pe-tlk-bg-points: #ffffff;
  --ebe-pe-tlk-bg-benefits: linear-gradient(
    140deg,
    #111114 40%,
    var(--tlk-azul)
  );
  --ebe-pe-tlk-bg-foryou: #ffffff;
  --ebe-pe-tlk-bg-faq: linear-gradient(140deg, #111114 40%, var(--tlk-rojo));
  --ebe-pe-tlk-bg-closing: radial-gradient(
    circle at 50% 0%,
    #26262b,
    var(--tlk-rojo) 60%
  );
  --ebe-pe-tlk-bg-footer: #252424;
  --ebe-pe-tlk-hero-fallback:
    radial-gradient(
      circle at 75% 35%,
      rgba(255, 255, 255, 0.1),
      transparent 26rem
    ),
    linear-gradient(145deg, #1d1d21, #050505 65%);
}

/* ---------- Puente Bootstrap (scope .ebe-pe-tlk) ---------- */
.ebe-pe-tlk {
  --bs-body-bg: var(--ebe-pe-tlk-bg);
  --bs-body-color: var(--ebe-pe-tlk-text);
  --bs-body-font-family: var(--ebe-pe-tlk-font-body);
  --bs-secondary-color: var(--ebe-pe-tlk-muted);
  --bs-border-color: var(--ebe-pe-tlk-line);
  --bs-link-color: var(--ebe-pe-tlk-text);
  --bs-link-hover-color: var(--ebe-pe-tlk-accent);
  --bs-emphasis-color: var(--ebe-pe-tlk-text);
  background: var(--ebe-pe-tlk-bg);
  color: var(--ebe-pe-tlk-text);
  font-family: var(--ebe-pe-tlk-font-body);
  -webkit-font-smoothing: antialiased;
}
.ebe-pe-tlk ::selection {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ebe-pe-tlk a {
  text-decoration: none;
}
.ebe-pe-tlk :is(h1, h2, h3) {
  font-family: var(--ebe-pe-tlk-font-display);
  font-weight: 700;
  text-wrap: balance;
}
.ebe-pe-tlk p {
  text-wrap: pretty;
}
.ebe-pe-tlk .container {
  --bs-gutter-x: var(--ebe-pe-tlk-gutter);
  max-width: calc(var(--ebe-pe-tlk-max) + var(--bs-gutter-x));
}
.ebe-pe-tlk [id] {
  scroll-margin-top: var(--ebe-pe-tlk-header-h);
}
.ebe-pe-tlk :focus-visible {
  outline: 2px solid var(--ebe-pe-tlk-accent);
  outline-offset: 3px;
  box-shadow: none;
}

/* ---------- Header ---------- */
.ebe-pe-tlk-header {
  border-bottom: 1px solid var(--ebe-pe-tlk-line);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(180%) blur(var(--ebe-pe-tlk-blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--ebe-pe-tlk-blur));
}
.ebe-pe-tlk-header .navbar {
  --bs-navbar-padding-y: 0;
  --bs-navbar-color: #b9b9bf;
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-nav-link-padding-x: 0;
  --bs-navbar-toggler-border-color: transparent;
  --bs-navbar-toggler-focus-width: 0;
  --bs-navbar-toggler-padding-x: 0.4rem;
  min-height: var(--ebe-pe-tlk-header-h);
}
.ebe-pe-tlk-logo {
  width: 120px;
  height: auto;
}
.ebe-pe-tlk-nav .nav-link {
  position: relative;
  font: 600 14px/1 var(--ebe-pe-tlk-font-display);
  transition: color 0.2s;
}
.ebe-pe-tlk-lang {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ebe-pe-tlk-line);
  border-radius: 999px;
}
.ebe-pe-tlk-lang a {
  min-width: 36px;
  padding: 7px 9px;
  border-radius: 999px;
  text-align: center;
  font: 700 11px/1 var(--ebe-pe-tlk-font-display);
  color: #9b9ba1;
  transition:
    background 0.2s,
    color 0.2s;
}
.ebe-pe-tlk-lang a:hover {
  color: #fff;
}
.ebe-pe-tlk-lang a.active {
  background: var(--ebe-pe-tlk-accent);
  color: var(--ebe-pe-tlk-accent-text);
}

@media (min-width: 768px) {
  .ebe-pe-tlk-nav .nav-link {
    padding-block: 28px;
  }
  .ebe-pe-tlk-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--ebe-pe-tlk-accent);
    transform: scaleX(0);
    transition: transform 0.25s var(--ebe-pe-tlk-ease);
  }
  .ebe-pe-tlk-nav .nav-link.active::after {
    transform: scaleX(1);
  }
}
@media (max-width: 767.98px) {
  :root {
    --ebe-pe-tlk-header-h: 64px;
  }
  .ebe-pe-tlk-logo {
    width: 104px;
  }
  .ebe-pe-tlk-nav {
    padding: 6px 0 14px;
    border-top: 1px solid var(--ebe-pe-tlk-line);
    margin-top: 4px;
  }
  .ebe-pe-tlk-nav .nav-link {
    padding-block: 16px;
    font-size: 17px;
    border-bottom: 1px solid var(--ebe-pe-tlk-line);
  }
  .ebe-pe-tlk-nav .nav-item:last-child .nav-link {
    border-bottom: 0;
  }
}

/* ---------- Compartidos ---------- */
.ebe-pe-tlk-section {
  padding-block: var(--ebe-pe-tlk-section-py);
  border-top: 1px solid var(--ebe-pe-tlk-line);
}
.ebe-pe-tlk-bg-points {
  background: var(--ebe-pe-tlk-bg-points);
}
.ebe-pe-tlk-bg-benefits {
  background: var(--ebe-pe-tlk-bg-benefits);
}
.ebe-pe-tlk-bg-foryou {
  background: var(--ebe-pe-tlk-bg-foryou);
}
.ebe-pe-tlk-bg-faq {
  background: var(--ebe-pe-tlk-bg-faq);
}
.ebe-pe-tlk-bg-closing {
  /* background: var(--ebe-pe-tlk-bg-closing); */
  background: linear-gradient(270deg, #ff0030, #410099, #ff0030);
  background-size: 600% 600%;

  -webkit-animation: AnimationName 9s ease infinite;
  -moz-animation: AnimationName 9s ease infinite;
  -o-animation: AnimationName 9s ease infinite;
  animation: AnimationName 9s ease infinite;
  position: relative;
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-o-keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.ebe-pe-tlk-eyebrow {
  margin: 0 0 16px;
  color: var(--ebe-pe-tlk-muted);
  font: 600 14px/1.2 var(--ebe-pe-tlk-font-display);
}
.ebe-pe-tlk-head {
  margin-bottom: clamp(36px, 5vw, 56px);
}
.ebe-pe-tlk-title {
  margin: 0;
  font-size: var(--ebe-pe-tlk-fs-h2);
  line-height: 1;
  letter-spacing: -0.045em;
}
.ebe-pe-tlk-lead {
  margin: 0;
  max-width: 60ch;
  color: var(--ebe-pe-tlk-muted);
  font-size: var(--ebe-pe-tlk-fs-lead);
  line-height: 1.55;
}

.ebe-pe-tlk-card {
  height: 100%;
  padding: var(--ebe-pe-tlk-card-p);
  border: 1px solid var(--ebe-pe-tlk-line);
  border-radius: var(--ebe-pe-tlk-radius-lg);
  /* background: var(--ebe-pe-tlk-surface); */
  background: rgba(15, 14, 14, 0.51);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
}
.ebe-pe-tlk-card h3 {
  margin: 0;
  font-size: var(--ebe-pe-tlk-fs-h3);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.ebe-pe-tlk-card p {
  margin: 10px 0 0;
  color: var(--ebe-pe-tlk-muted);
  font-size: 16px;
  line-height: 1.55;
}

/* Tarjetas accionables (abren el modal) */
.ebe-pe-tlk-action {
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.25s,
    background-color 0.25s;
}
.ebe-pe-tlk-action:hover {
  border-color: var(--ebe-pe-tlk-line-strong);
  background: var(--ebe-pe-tlk-surface-2);
}
.ebe-pe-tlk-plus {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ebe-pe-tlk-accent);
  color: var(--ebe-pe-tlk-accent-text);
  transition: transform 0.3s var(--ebe-pe-tlk-ease);
}
.ebe-pe-tlk-plus svg {
  width: 16px;
  height: 16px;
}
.ebe-pe-tlk-action:hover .ebe-pe-tlk-plus {
  transform: rotate(90deg);
}

/* ---------- Hero (solo imagen) ---------- */
.ebe-pe-tlk-hero {
  --ebe-pe-tlk-hero-img: var(--ebe-pe-tlk-hero-es-mobile);
  --ebe-pe-tlk-hero-ratio: var(--ebe-pe-tlk-hero-ratio-mobile);
  width: 100%;
  aspect-ratio: var(--ebe-pe-tlk-hero-ratio);
  max-height: var(--ebe-pe-tlk-hero-max-h);
  background:
    var(--ebe-pe-tlk-hero-img) var(--ebe-pe-tlk-hero-position) / cover no-repeat,
    var(--ebe-pe-tlk-hero-fallback);
}
.ebe-pe-tlk-hero:lang(en) {
  --ebe-pe-tlk-hero-img: var(--ebe-pe-tlk-hero-en-mobile);
}
@media (min-width: 768px) {
  .ebe-pe-tlk-hero {
    --ebe-pe-tlk-hero-img: var(--ebe-pe-tlk-hero-es-desktop);
    --ebe-pe-tlk-hero-ratio: var(--ebe-pe-tlk-hero-ratio-desktop);
  }
  .ebe-pe-tlk-hero:lang(en) {
    --ebe-pe-tlk-hero-img: var(--ebe-pe-tlk-hero-en-desktop);
  }
}

/* Botones */
.ebe-pe-tlk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font: 700 14px/1 var(--ebe-pe-tlk-font-display);
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.ebe-pe-tlk-btn-primary {
  background: var(--ebe-pe-tlk-accent);
  color: var(--ebe-pe-tlk-accent-text);
}
.ebe-pe-tlk-btn-primary:hover {
  background: #dcdce0;
  color: var(--ebe-pe-tlk-accent-text);
}
.ebe-pe-tlk-btn-ghost {
  border: 1px solid var(--ebe-pe-tlk-line-strong);
  color: var(--ebe-pe-tlk-text);
}
.ebe-pe-tlk-btn-ghost:hover {
  border-color: #fff;
  color: #fff;
}

/* ---------- Puntos ---------- */
.ebe-pe-tlk-icon {
  width: 40px;
  height: 40px;
  margin-bottom: auto;
  color: var(--ebe-pe-tlk-text);
}
.ebe-pe-tlk-point h3 {
  margin-top: 48px;
}
.ebe-pe-tlk-point {
  min-height: 280px;
  /* background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.012)
  ); */
  background: linear-gradient(270deg, #ff0030, #410099, #ff0030);
  background-size: 600% 600%;

  -webkit-animation: AnimationName2 19s ease infinite;
  -moz-animation: AnimationName2 19s ease infinite;
  -o-animation: AnimationName2 19s ease infinite;
  animation: AnimationName2 19s ease infinite;
}

@-webkit-keyframes AnimationName2 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes AnimationName2 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-o-keyframes AnimationName2 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes AnimationName2 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ---------- Beneficios ---------- */
.ebe-pe-tlk-grid-lines {
  border: 1px solid var(--ebe-pe-tlk-line);
  border-radius: var(--ebe-pe-tlk-radius-lg);
  overflow: hidden;
}
.ebe-pe-tlk-grid-lines > * {
  box-shadow:
    1px 0 0 var(--ebe-pe-tlk-line),
    0 1px 0 var(--ebe-pe-tlk-line);
}
.ebe-pe-tlk-benefit {
  height: 100%;
  padding: clamp(26px, 3.4vw, 40px);
}
.ebe-pe-tlk-benefit h3 {
  margin: 0 0 10px;
  font-size: var(--ebe-pe-tlk-fs-h3);
  letter-spacing: -0.02em;
}
.ebe-pe-tlk-benefit p {
  margin: 0;
  color: var(--ebe-pe-tlk-muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 44ch;
}

/* ---------- Para ti ---------- */
.ebe-pe-tlk-bg-foryou .ebe-pe-tlk-card {
  /* background: #0f0f11; */
  background: linear-gradient(270deg, #ff0030, #410099, #ff0030);
  background-size: 600% 600%;

  -webkit-animation: AnimationName2 19s ease infinite;
  -moz-animation: AnimationName2 19s ease infinite;
  -o-animation: AnimationName2 19s ease infinite;
  animation: AnimationName2 19s ease infinite;
}
.ebe-pe-tlk-bg-foryou .ebe-pe-tlk-action:hover {
  /* background: #050506; */
  opacity: 0.7;
}
.ebe-pe-tlk-question {
  min-height: 240px;
  justify-content: space-between;
  gap: 32px;
}
.ebe-pe-tlk-question h3 {
  font-size: clamp(22px, 2.2vw, 27px);
}
.ebe-pe-tlk-question-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ebe-pe-tlk-muted);
  font: 600 14px var(--ebe-pe-tlk-font-display);
}

/* ---------- FAQ ---------- */
.ebe-pe-tlk-faq-item {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 104px;
  border-radius: var(--ebe-pe-tlk-radius-md);
}
.ebe-pe-tlk-faq-item h3 {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.25;
}
.ebe-pe-tlk-faq-item .ebe-pe-tlk-plus {
  width: 36px;
  height: 36px;
  /* background: #1c1c1f; */
  background: linear-gradient(270deg, #ff0030, #410099, #ff0030);
  background-size: 600% 600%;

  -webkit-animation: AnimationName3 5s ease infinite;
  -moz-animation: AnimationName3 5s ease infinite;
  -o-animation: AnimationName3 5s ease infinite;
  animation: AnimationName3 5s ease infinite;
  position: relative;
  color: #fff;
  border: 1px solid var(--ebe-pe-tlk-line);
}

@-webkit-keyframes AnimationName3 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes AnimationName3 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-o-keyframes AnimationName3 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes AnimationName3 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.ebe-pe-tlk-faq-item:hover .ebe-pe-tlk-plus {
  background: var(--ebe-pe-tlk-accent);
  color: var(--ebe-pe-tlk-accent-text);
}

/* ---------- Cierre ---------- */
.ebe-pe-tlk-closing-inner {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(48px, 7vw, 84px) clamp(22px, 5vw, 56px);
  text-align: center;
}
.ebe-pe-tlk-closing-inner .ebe-pe-tlk-lead {
  margin: 20px auto 32px;
}

/* ---------- Footer ---------- */
.ebe-pe-tlk-footer {
  padding-block: 48px;
  background: var(--ebe-pe-tlk-bg-footer);
  border-top: 1px solid var(--ebe-pe-tlk-line);
}
.ebe-pe-tlk-footer img {
  display: block;
  width: 250px;
  height: auto;
  margin-inline: auto;
}

/* ---------- Modal ---------- */
.modal.ebe-pe-tlk-modal {
  --bs-modal-width: 680px;
  --bs-modal-margin: 12px;
  --bs-modal-bg: rgba(20, 20, 22, 0.92);
  --bs-modal-color: var(--ebe-pe-tlk-text);
  --bs-modal-border-color: rgba(255, 255, 255, 0.13);
  --bs-modal-border-radius: var(--ebe-pe-tlk-radius-lg);
  --bs-modal-inner-border-radius: calc(var(--ebe-pe-tlk-radius-lg) - 1px);
  --bs-modal-padding: clamp(22px, 4vw, 36px);
  --bs-modal-header-padding: clamp(22px, 4vw, 36px) clamp(22px, 4vw, 36px) 0;
  --bs-modal-header-border-width: 0;
  backdrop-filter: blur(var(--ebe-pe-tlk-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--ebe-pe-tlk-blur)) saturate(130%);
}
.ebe-pe-tlk .modal-backdrop {
  --bs-backdrop-opacity: 0.55;
}
.ebe-pe-tlk-modal .modal-content {
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.6),
    inset 0 1px rgba(255, 255, 255, 0.07);
}
.ebe-pe-tlk-modal .modal-content {
  position: relative;
}
.ebe-pe-tlk-modal .modal-header {
  padding-right: calc(var(--bs-modal-padding) + 56px);
}
.ebe-pe-tlk-modal .modal-title {
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.ebe-pe-tlk-close {
  position: absolute;
  top: clamp(14px, 2.4vw, 24px);
  right: clamp(14px, 2.4vw, 24px);
  z-index: 2;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #ff0030;
  color: #fff;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.3s var(--ebe-pe-tlk-ease);
}
.ebe-pe-tlk-close svg {
  width: 18px;
  height: 18px;
}
.ebe-pe-tlk-close:hover {
  background: var(--ebe-pe-tlk-accent);
  color: var(--ebe-pe-tlk-accent-text);
  border-color: var(--ebe-pe-tlk-accent);
  transform: rotate(90deg);
}
.ebe-pe-tlk-close:active {
  transform: rotate(90deg) scale(0.92);
}
.ebe-pe-tlk-close:focus-visible {
  outline: 2px solid var(--ebe-pe-tlk-accent);
  outline-offset: 3px;
}
.ebe-pe-tlk-modal .modal-body {
  color: #c6c6cc;
  font-size: 17px;
  line-height: 1.65;
}
.ebe-pe-tlk-modal .modal-body :is(strong, a) {
  color: #fff;
}
.ebe-pe-tlk-modal .modal-body a {
  text-decoration: underline;
}
.ebe-pe-tlk-modal .modal-body > :last-child {
  margin-bottom: 0;
}
.ebe-pe-tlk-modal .modal-body ul {
  padding-left: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .ebe-pe-tlk *,
  .ebe-pe-tlk *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* .ikerpiensa {
    position: absolute;
    top: 220%;
    width: 18%;
    right: 50%;
    margin-right: -48%;
    z-index: 1;
}

.ikerlaptop {
    position: absolute;
    top: 460%;
    width: 18%;
    right: 50%;
    margin-right: -44%;
    z-index: 1;
}

@media only screen and (max-width: 768px) {

.ikerpiensa {
        position: absolute;
        top: 276%;
        width: 38%;
        right: 50%;
        margin-right: -54%;
        z-index: 1;
    }

    .ikerlaptop {
        position: absolute;
        top: 627%;
        width: 37%;
        right: 50%;
        margin-right: -44%;
        z-index: 1;
    }

} */

/* =========================================================
   IKER — CONTENEDORES
   ========================================================= */

.ebe-pe-tlk-bg-benefits > div:has(.ikerpiensa),
.ebe-pe-tlk-section > div:has(.ikerlaptop) {
    position: relative;
    width: 100%;
    height: 100%;
}


/* =========================================================
   IKER PIENSA
   ========================================================= */

.ikerpiensa {
        position: absolute;
    top: -313px;
    right: 39px;
    width: 280px;
    height: auto;
    z-index: 1;
}


/* =========================================================
   IKER LAPTOP
   ========================================================= */

.ikerlaptop {
    position: absolute;
    top: 52px;
    right: 93px;
    width: 283px;
    height: auto;
    z-index: 1;
}


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

@media only screen and (max-width: 768px) {

        .ikerpiensa {
        top: -175px;
        right: -5px;
        width: 157px;
    }

    .ikerlaptop {
        top: 10px;
        right: 25px;
        width: 160px;
    }

}

.pwdhl-section {
  --pwdhl-bg: #ffedb4;
  --pwdhl-text: #202020;
  --pwdhl-muted: #606068;
  --pwdhl-accent: #ff0030;

  width: 100%;
  padding: 32px 20px;
  background: var(--pwdhl-bg);
  box-sizing: border-box;
}

.pwdhl-section *,
.pwdhl-section *::before,
.pwdhl-section *::after {
  box-sizing: border-box;
}

.pwdhl-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.pwdhl-content {
  flex: 1;
  min-width: 0;
}

.pwdhl-label {
  display: inline-block;
  margin-bottom: 12px;
  color: #a45a09;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pwdhl-title {
  margin: 0 0 12px;
  color: var(--pwdhl-text);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 600;
  line-height: 1.25;
}

.pwdhl-title strong {
  font-weight: 800;
}

.pwdhl-description {
  max-width: 720px;
  margin: 0;
  color: var(--pwdhl-muted);
  font-size: 15px;
  line-height: 1.65;
}

.pwdhl-action {
  flex-shrink: 0;
}

.pwdhl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 15px 24px;
  border-radius: 8px;
  background: var(--pwdhl-accent);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}

.pwdhl-button:hover {
  background: #530101;
  transform: translateY(-2px);
}

.pwdhl-button:focus-visible {
  outline: 3px solid #a45a09;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .pwdhl-section {
    padding: 28px 20px;
  }

  .pwdhl-container {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .pwdhl-title {
    font-size: 24px;
  }

  .pwdhl-description {
    font-size: 14px;
  }

  .pwdhl-button {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwdhl-button {
    transition: none;
  }
}