/* ==========================================================================
   Landing HBO Max 2026 — Mundo + HBO Max
   Contenido central de la landing (hero -> plataformas).
   El header y el footer del sitio los provee el tema (get_header / get_footer).
   Todas las clases van prefijadas con .lhbo para no chocar con el tema.
   ========================================================================== */

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

.lhbo {
  --lhbo-teal: #007591;
  --lhbo-teal-dark: #00657c;
  --lhbo-teal-deep: #014f86;
  --lhbo-yellow: #ffda00;
  --lhbo-dark: #262626;
  --lhbo-gray: #464646;
  --lhbo-cat-label: #bababa;
  --lhbo-orange: #ee7c26;

  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--lhbo-dark);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #fff;
}

.lhbo img { display: block; max-width: 100%; }
.lhbo a { color: var(--lhbo-teal); text-decoration: none; }
.lhbo a:hover { color: var(--lhbo-teal-dark); }

.lhbo__wrap {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

/* ---------- Hero ---------------------------------------------------------- */
.lhbo-hero {
  background: #F3F3F3;
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  text-align: center;
}
.lhbo-hero__logo { width: 200px; height: auto; }
.lhbo-hero__title {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  color: #000;
  line-height: 1.2;
  max-width: 1100px;
}
.lhbo-hero__title b { font-weight: 700; }
.lhbo-hero__sub {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #000;
}
.lhbo-chevron { width: 25px; height: 25px; }
.lhbo-chevron svg { width: 100%; height: 100%; display: block; }

/* ---------- Planes (cards renderizados por el tema) ----------------------- */
.lhbo-plans {
  width: 100%;
  margin-top: 10px;
}

/* ---------- Banner (CTA oscuro) ------------------------------------------- */
.lhbo-banner {
  background-color: var(--lhbo-dark);
  border-top: 1px solid #656565;
  border-bottom: 1px solid #656565;
  padding: 40px 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: nowrap;
}
.lhbo-banner__text {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 640px;
  text-align: right;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #bfbfbf;
}
.lhbo-banner__text b { color: #fff; font-weight: 700; }
.lhbo-banner__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 25px;
  border-radius: 16px;
  border: 1px solid #fff;
  background: transparent;
  color: var(--lhbo-orange);
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.lhbo a.lhbo-banner__btn { color: var(--lhbo-orange); }
.lhbo-banner__btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
.lhbo-banner__btn:hover,
.lhbo-banner__btn:focus-visible { background: var(--lhbo-orange) !important; color: #fff !important; border-color: var(--lhbo-orange) !important; }
.lhbo-banner__btn:active { background: #d76a1e; }

/* ---------- Descubre lo mejor (oscuro) ------------------------------------ */
.lhbo-discover {
  background: linear-gradient(180deg, #000 0%, #242424 35.1%, #262626 55.77%, #262626 73.56%, #000 100%);
  padding: 100px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.lhbo-discover__logo { width: 125px; height: auto; }
.lhbo-discover__title {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  color: #fff;
}
.lhbo-discover__title b { font-weight: 700; }
.lhbo-discover__viewport { width: 100%; max-width: 1300px; position: relative; }
.lhbo-discover__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px 25px;
}
.lhbo-cat { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lhbo-cat__img {
  width: 100%;
  aspect-ratio: 300 / 168;
  border-radius: 8px;
  object-fit: cover;
}
.lhbo-cat__label {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--lhbo-cat-label);
}
/* carousel arrows — solo visibles en móvil */
.lhbo-discover__arrow {
  display: none;
  position: absolute;
  /* centrado sobre la miniatura: el thumb mide (ancho del carrusel - 88 de padding
     lateral - 12 de la card) x 168/300, asi que su eje cae a 0.28 de ese ancho.
     El % de margin-top se resuelve contra el ANCHO del contenedor, no el alto. */
  top: 0;
  margin-top: calc((100% - 100px) * 0.28);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #FF8000;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background-color .15s ease;
}
.lhbo-discover__arrow:hover { background: #e57200; }
.lhbo-discover__arrow svg { width: 16px; height: 16px; }
.lhbo-discover__arrow--prev { left: -4px; }
.lhbo-discover__arrow--next { right: -4px; }

/* ---------- Beneficios ---------------------------------------------------- */
.lhbo-benefits {
  background: linear-gradient(180deg, #f8f8f8 0%, #ffffff 55.77%);
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.lhbo-benefits__title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: var(--lhbo-dark);
  text-align: center;
}
.lhbo-benefits__grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 25px;
  width: 100%;
  max-width: 1080px;
}
/* una sola fila en todo ancho; cuadricula 2x2 recien en movil (<=640) */
.lhbo-benefit {
  flex: 1 1 0;
  min-width: 0;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.lhbo-benefit__icon {
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lhbo-benefit__icon svg { width: 100%; height: 100%; }
.lhbo-benefit__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--lhbo-gray);
  text-align: center;
  line-height: 1.4;
}

/* ---------- FAQ ----------------------------------------------------------- */
.lhbo-faq {
  background: #fff;
  padding: 70px 50px 40px;
}
.lhbo-faq__inner {
  display: grid;
  grid-template-columns: clamp(360px, 42%, 550px) 1fr;
  gap: 40px 50px;
  align-items: start;
}
.lhbo-faq__intro { grid-column: 1; }
.lhbo-faq__title {
  margin: 0 0 24px;
  font-size: 77px;
  font-weight: 900;
  line-height: 1.02;
  color: #000;
}
.lhbo-faq__lead {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: #000;
}
.lhbo-faq__lead b { color: #000; }
.lhbo-faq__desc {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--lhbo-dark);
  line-height: 1.5;
}
.lhbo-faq__intro { grid-row: 1; align-self: center; }
.lhbo-faq__media { grid-column: 2; grid-row: 1; }
.lhbo-faq__media img { width: 100%; height: auto; border-radius: 16px; }
/* el collage acompana la altura del acordeon, igual que en TNT / Sony / TVN Play.
   La imagen va absoluta: si aportara su alto natural definiria la fila del grid
   y el height:100% nunca resolveria. */
.lhbo-faq__collage { grid-column: 1; grid-row: 2; align-self: start; position: relative; height: 700px; }
.lhbo-faq__collage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.lhbo-faq__list {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 6px;
}

.lhbo-acc {
  border: 1px solid #000;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.lhbo-acc__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 25px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--lhbo-dark);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}
/* icono + / - con pseudo-elementos, igual que Sony One / TVN Play / TNT */
.lhbo-acc__icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  position: relative;
}
.lhbo-acc__icon::before,
.lhbo-acc__icon::after {
  content: "";
  position: absolute;
  background: #000;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.lhbo-acc__icon::before { top: 11px; left: 1px; width: 22px; height: 2.5px; }
.lhbo-acc__icon::after  { top: 1px; left: 11px; width: 2.5px; height: 22px; }
.lhbo-acc.is-open .lhbo-acc__icon::after { transform: scaleY(0); opacity: 0; }
.lhbo-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.lhbo-acc.is-open .lhbo-acc__panel { grid-template-rows: 1fr; }
.lhbo-acc__panel > div { overflow: hidden; }
.lhbo-acc__body {
  padding: 0 25px 24px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--lhbo-dark);
}
.lhbo-acc__body p { margin: 0 0 12px; }
.lhbo-acc__body p:last-child { margin-bottom: 0; }
.lhbo-acc__body b { font-weight: 700; }
.lhbo-acc__body a { word-break: break-word; }

/* ---------- Necesitas ayuda ----------------------------------------------- */
.lhbo-help {
  background: #fff;
  padding: 50px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.lhbo a.lhbo-help__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 500;
  color: var(--lhbo-dark);
}
.lhbo-help__link b { font-weight: 700; color: var(--lhbo-teal-dark); }
.lhbo-help__link svg { width: 18px; height: 18px; color: var(--lhbo-teal-dark); }

/* ---------- Plataformas (oscuro) ------------------------------------------ */
.lhbo-platforms {
  background: linear-gradient(180deg, #000 34.13%, #303030 60.1%, #1c1c1c 100%);
  padding: 100px 50px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.lhbo-platforms__head {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.lhbo-platforms__head img { width: 46px; height: 46px; flex: 0 0 auto; }
.lhbo-platforms__title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}
.lhbo-platforms__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 70px;
  padding: 16px;
}
.lhbo-platform {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: 18px;
  background: #000;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.lhbo-platform img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }

/* ---------- Volver arriba ------------------------------------------------- */
.lhbo-back-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1050;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--lhbo-teal);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lhbo-back-top.show { opacity: 1; visibility: visible; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 950px) {
  .lhbo-hero { padding: 70px 30px; }
  .lhbo-banner { padding: 36px 40px; flex-wrap: wrap; }
  .lhbo-banner__text { text-align: center; }
  /* 8 categorias: 2 columnas dan 4 filas exactas (3 dejaba una fila de 2) */
  .lhbo-discover__track { grid-template-columns: repeat(2, 1fr); }
  /* tablet: los 3 beneficios en una sola fila; se apilan recien en movil */
  .lhbo-benefits__grid { flex-wrap: nowrap; gap: 24px; }
  .lhbo-benefit { flex: 1 1 0; min-width: 0; }
  .lhbo-faq { padding: 60px 30px 30px; }
  /* FAQ apilado y centrado ya en tablet, igual que TVN Play / Sony One */
  .lhbo-faq__inner { grid-template-columns: 1fr; gap: 24px; }
  .lhbo-faq__intro,
  .lhbo-faq__media,
  .lhbo-faq__list { grid-column: 1; grid-row: auto; }
  .lhbo-faq__collage { display: none; }
  .lhbo-faq__media { justify-self: center; }
  .lhbo-faq__title { font-size: 44px; text-align: center; }
  .lhbo-faq__lead, .lhbo-faq__desc { text-align: center; }
  .lhbo-platforms { padding: 70px 30px 60px; }
  /* tablet: las 4 tiles siempre en una fila; el 2x2 llega recien en movil */
  .lhbo-platforms__grid { flex-wrap: nowrap; gap: 24px; padding: 16px; }
  .lhbo-platform { width: 104px; height: 104px; }
}

@media (max-width: 640px) {
  .lhbo-hero { padding: 50px 20px; gap: 20px; }
  .lhbo-hero__logo { width: 170px; }
  .lhbo-hero__title { font-size: 22px; }
  .lhbo-hero__sub { font-size: 17px; }

  .lhbo-banner { padding: 30px 22px; gap: 22px; }
  .lhbo-banner__text { font-size: 20px; }
  .lhbo-banner__btn { font-size: 20px; padding: 13px 22px; }

  .lhbo-discover { padding: 60px 20px; }
  .lhbo-discover__title { font-size: 24px; }
  /* carousel de una tarjeta */
  .lhbo-discover__viewport { padding: 0 44px; }
  .lhbo-discover__track {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
  }
  .lhbo-discover__track::-webkit-scrollbar { display: none; }
  .lhbo-cat { flex: 0 0 100%; scroll-snap-align: center; padding: 0 6px; }
  .lhbo-discover__arrow { display: inline-flex; }

  .lhbo-benefits { padding: 46px 16px; }
  .lhbo-benefits__title { font-size: 24px; }
  /* movil: los 4 beneficios en cuadricula 2x2 */
  .lhbo-benefits__grid { flex-wrap: wrap; gap: 25px; }
  .lhbo-benefit { flex: 0 0 calc(50% - 13px); min-width: 0; }

  .lhbo-faq { padding: 46px 20px 20px; }
  .lhbo-faq__title { font-size: 40px; }
  .lhbo-acc__btn { font-size: 18px; padding: 18px 20px; }

  /* ayuda: "¿Necesitas ayuda?" en su propia linea, centrado */
  .lhbo a.lhbo-help__link { font-size: 19px; flex-wrap: wrap; justify-content: center; row-gap: 2px; text-align: center; }
  .lhbo-help__link b { flex: 0 0 100%; }

  .lhbo-platforms { padding: 56px 24px 52px; gap: 24px; }
  .lhbo-platforms__title { font-size: 19px; }
  .lhbo-platforms__head { flex-direction: column; gap: 8px; }
  .lhbo-platforms__head img { width: 34px; height: 34px; }
  /* plataformas: cuadricula 2x2 en movil */
  .lhbo-platforms__grid { display: grid; grid-template-columns: repeat(2, 104px); justify-content: center; gap: 18px; }
  .lhbo-platform { width: 104px; height: 104px; }
}

/* ==================== Plataformas: hover (paridad con la landing Sony One) ====================
   El icono se eleva, escala levemente y gana halo para que la accion se note
   sobre el fondo negro. */
.lhbo-platform { transition: transform .25s ease, box-shadow .25s ease; }
.lhbo-platform:hover { transform: translateY(-6px) scale(1.06); box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 0 2px rgba(255, 255, 255, .35); }