﻿/* Todas las clases llevan el prefijo "lpi-" para no chocar con los estilos de su sitio
     ni con la banda del video (que usa "lp-"). */

  /* ---------- Banda ---------- */
  .lpi-banda{background:#FFFFFF; padding:72px 32px;}
  .lpi-banda.lpi-gris{background:#F4F6F8;}
  .lpi-banda-interior{
    max-width:1180px; margin:0 auto;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:56px; align-items:center;
  }
  /* Variante: imagen a la izquierda y texto a la derecha */
  .lpi-imagen-izq .lpi-banda-interior{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);}
  .lpi-imagen-izq .lpi-imagen{order:-1;}

  /* ---------- Texto ---------- */
  .lpi-etiqueta{font-size:12px; font-weight:bold; letter-spacing:.06em; text-transform:uppercase; color:#2E8B4F;}
  .lpi-titulo{
    margin:12px 0 16px;
    font-family:'Poppins', sans-serif !important; font-weight:600 !important;
    font-size:clamp(26px, 2.6vw, 38px) !important; line-height:1.2 !important; letter-spacing:-0.01em;
    color:#1C2230;
  }
  .lpi-titulo .lpi-destacado{color:#2E8B4F;}
  .lpi-texto{margin:0; font-size:clamp(15px, 1.5vw, 17px); line-height:1.65; color:#5B6472;}

  .verde{
      color:#589F0B;
      color:#2E8B4F;
  }

  /* ---------- Imagen ---------- */
  /* Caja con proporción 4:3; la imagen la llena siempre (se recorta lo que sobre, nunca deja franjas). */
  .lpi-imagen{
    position:relative; width:100%; aspect-ratio:4 / 3;
    border-radius:14px; overflow:hidden;
    background:linear-gradient(135deg, #E3F1EA, #DCE8F2);   /* se ve solo mientras carga la imagen */
    box-shadow:0 20px 50px rgba(20,25,35,.14);
  }
  .lpi-imagen img{
    position:absolute !important; top:0 !important; left:0 !important;
    width:100% !important; height:100% !important;
    max-width:none !important; max-height:none !important;   /* anula el img{max-width:600px} global del sitio */
    object-fit:cover; display:block;

  }

  .enlaceApp{
      cursor:pointer;
      color:gray;
  }

  .enlaceApp:hover{
      color:black;
  }

          .botonIniciarPrueba {
            display:block;
            text-decoration:none;
            padding:20px;
            width: 300px;
            margin-top:10px;
            text-align:center;
            border:solid 1px Gray;
            text-decoration  :none;
	        font-family : 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
	        font-variant: normal;
	        font-size: 20px;
	        line-height: 20px;
	        font-weight:300;
            color:gray;
            border-radius:30px;
         }

        .botonIniciarPrueba:hover{
            background-color:black;
            color:white;
        }

  /* ---------- Tabletas y celulares: una columna, imagen arriba y texto abajo en ambas bandas ---------- */
  @media (max-width: 880px){
    .lpi-banda{padding:44px 20px;}
    .lpi-banda-interior,
    .lpi-imagen-izq .lpi-banda-interior{grid-template-columns:1fr; gap:28px;}
    .lpi-imagen{order:-1;}
  }