/* Todas las clases llevan el prefijo "lp-" para no chocar con los estilos de su sitio. */

  /* ---------- Banda ---------- */
  .lp-banda{background:#F4F6F8; background:white; padding:72px 32px;}
  .lp-banda-interior{
    max-width:1180px; margin:0 auto;
    display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:56px; align-items:center;
  }

  /* ---------- Texto (derecha) ---------- */
  .lp-etiqueta{font-size:12px; font-weight:bold; letter-spacing:.06em; text-transform:uppercase; color:#2E8B4F;}
  .lp-texto{margin:0; font-size:clamp(15px, 1.5vw, 17px); line-height:1.65; color:#5B6472;}

  .lp-titulo1{font-family:'Poppins', sans-serif;font-weight:600;font-size:clamp(26px, 2.6vw, 38px);line-height:1.2;letter-spacing:-0.01em;
  color:#1C2230;
}
  .lp-titulo2{margin:12px 0 16px; font-size:clamp(24px, 3vw, 34px); line-height:1.22; font-weight:bold; color:#1C2230; }

.lp-titulo1 .lp-destacado {
    background: linear-gradient(90deg, #2F5BEA, #5B8CF5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lp-titulo2 .lp-destacado {
    background: linear-gradient(90deg, #2F5BEA, #5B8CF5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


  /* ---------- Video (izquierda) ---------- */
  /* Caja con proporción 16:9: el alto se calcula solo a partir del ancho, en cualquier dispositivo. */
  .lp-video{
    --lp-play:clamp(56px, 9vw, 88px);
    position:relative; width:100%; padding-top:56.25%;
    background:#131116; border-radius:14px; overflow:hidden;
    box-shadow:0 20px 50px rgba(20,25,35,.18);
  }

  /* Estado inicial: portada + botón de play. Todo el área es un solo botón. */
  .lp-video-inicio{
    position:absolute; top:0; left:0; width:100%; height:100%;
    margin:0; padding:0; border:0; background:none; cursor:pointer; display:block;
  }
  .lp-video-inicio img{width:100%; height:100%; object-fit:cover; display:block; transition:filter .2s;}
  .lp-video-inicio:hover img{filter:brightness(.85);}
  .lp-video-inicio:focus-visible{outline:3px solid #2E8B4F; outline-offset:-3px;}

  .lp-video-play{
    position:absolute; top:50%; left:50%; width:var(--lp-play); height:var(--lp-play);
    transform:translate(-50%,-50%); border-radius:50%; background:rgba(255,255,255,.96);
    box-shadow:0 10px 30px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center;
    transition:transform .15s;
  }
  .lp-video-play svg{width:38%; height:38%;}
  .lp-video-inicio:hover .lp-video-play{transform:translate(-50%,-50%) scale(1.07);}

  /* Leyenda bajo el botón de play (se ancla al centro, igual que el botón) */
  .lp-video-leyenda{
    position:absolute; top:50%; left:0; width:100%; margin-top:calc(var(--lp-play) / 2 + 14px);
    text-align:center; color:#fff; font-size:clamp(12px, 1.6vw, 15px); font-weight:bold;
    text-shadow:0 1px 6px rgba(0,0,0,.6); pointer-events:none;
  }

  /* Video real: no existe en la página hasta que se hace clic; se agrega por JavaScript */
  .lp-video-elemento{position:absolute; top:0; left:0; width:100%; height:100%; background:#000; object-fit:contain; visibility:hidden;}

  /* Indicador de carga */
  .lp-video-spinner{display:none; position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border:4px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:lp-girar .8s linear infinite;}
  @keyframes lp-girar{to{transform:rotate(360deg);}}

  /* Mensaje de error */
  .lp-video-error{display:none; position:absolute; top:0; left:0; width:100%; height:100%; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#fff; text-align:center; padding:20px; font-size:15px;}
  .lp-video-error button{border:0; border-radius:9px; padding:10px 24px; background:#2E8B4F; color:#fff; font-family:inherit; font-size:14px; font-weight:bold; cursor:pointer;}
  .lp-video-error button:hover{background:#1F5C33;}

  /* Estados (se cambian con la clase del contenedor) */
  .lp-cargando .lp-video-play, .lp-cargando .lp-video-leyenda{display:none;}
  .lp-cargando .lp-video-spinner{display:block;}
  .lp-cargando .lp-video-inicio{pointer-events:none; cursor:default;}
  .lp-cargando .lp-video-inicio img{filter:brightness(.55);}

  .lp-reproduciendo .lp-video-inicio{display:none;}
  .lp-reproduciendo .lp-video-elemento{visibility:visible;}

  .lp-error .lp-video-inicio{display:none;}
  .lp-error .lp-video-error{display:flex;}

  /* ---------- Tabletas y celulares: una sola columna, el video arriba y el texto abajo ---------- */
  @media (max-width: 880px){
    .lp-banda{padding:44px 20px;}
    .lp-banda-interior{grid-template-columns:1fr; gap:28px;}
  }