/* ====== Scope por instancia ====== */
#hero-.br-emp-hero{
  --brl-green: #00B451;
  --brl-green-dark: #505B58;
  --accent: #10C459;
  --title: #0E4633;
  --muted: #6C7774;
  --shadow: 0 16px 28px rgba(0,0,0,.18);
}

/* Layout desktop: imagen izquierda + textos derecha */
#hero- .br-emp-hero__wrap{
  max-width: 1103px;              /* 664 + 25 + 414 del diseño viejo */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 664px 25px 414px;
  align-items: center;
  gap: 0;
  padding: 0 16px;
}

#hero- .br-emp-hero__media{
  position: relative;
  width: 664px;
  height: 529px;
  margin-left: calc((100vw - 1103px) / -2); /* pega a borde izq */
  overflow: visible;
}
#hero- .br-emp-hero__base{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* === AQUÍ EL CAMBIO: sin fondo blanco para respetar la transparencia del PNG === */
#hero- .br-emp-hero__overlay{
  position: absolute;
  z-index: 2;
  left: 404px;
  top: 157px;
  width: 429px;
  height: auto;
  border-radius: 10px;
  background: transparent !important;   /* antes: #fff  */
  box-shadow: var(--shadow);
  display: block;
}

/* (Plan B opcional) – si el PNG del banco NO tiene transparencia y viene con fondo blanco,
   descomenta la siguiente línea para intentar “fundir” el blanco con el fondo.
   OJO: puede alterar un poco los colores; úsalo solo si no hay PNG con alfa. */
/* #hero- .br-emp-hero__overlay { mix-blend-mode: multiply; } */

#hero- .br-emp-hero__content{
  width: 414px;
  max-width: 414px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Tipografía y colores */
#hero- .br-emp-hero__title{
  margin: 0;
  line-height: 1.2;
}
#hero- .br-emp-hero__title .linea-1{
  display: block;
  color: #00B451;
  font-weight: 800;
  font-size: 2.15rem;
}
#hero- .br-emp-hero__title .linea-2{
  display: block;
  color: #505B58;
  font-weight: 800;
  font-size: 2.15rem;
}
#hero- .br-emp-hero__desc{
  margin: 0;
  color: #505B58;
  font-size: 1rem;
  line-height: 1.55rem;
}

/* Botón estilo Banrural (mismo de las cards) */
#hero- .btn-pill{
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  background: #124734;
  border: 1px solid #124734;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
#hero- .btn-pill:hover,
#hero- .btn-pill:focus-visible{
  background: #006C31
  border-color: #006C31;
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}

/* ====== Responsive ====== */
@media (max-width: 1100px){
  #hero- .br-emp-hero__wrap{
    max-width: 1042px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  #hero- .br-emp-hero__media{
    width: 100%;
    height: 280px;
    margin-left: 0;
  }
  #hero- .br-emp-hero__overlay{
    position: relative;
    left: auto; top: auto;
    width: 86%;
    margin: -16px auto 0;
    background: transparent !important; /* mantener transparente también en responsive */
  }
  #hero- .br-emp-hero__content{
    width: auto; max-width: none; gap: 16px;
  }
}

@media (max-width: 640px){
  #hero- .br-emp-hero__wrap{
    display: block;
    padding: 0 16px;
  }
  #hero- .br-emp-hero__media{
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  #hero- .br-emp-hero__base{
    width: 100% !important;
    height: auto !important;
    border-radius: 12px;
  }
  #hero- .br-emp-hero__overlay{
    position: static !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,.12);
    margin: 12px 0 0 !important;
    background: transparent !important;  /* asegurar transparencia */
  }
  #hero- .br-emp-hero__content{
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px;
    gap: 18px;
  }
  #hero- .br-emp-hero__title .linea-1,
  #hero- .br-emp-hero__title .linea-2{
    font-size: 1.6rem;
    line-height: 1.25;
  }
  #hero- .br-emp-hero__desc{
    font-size: .95rem;
    line-height: 1.5rem;
  }
}
/* Aire superior/inferior de toda la sección */
#hero-.br-emp-hero{
  padding-block: 64px;           /* aire arriba y abajo */
}
@media (max-width:1100px){
  #hero-.br-emp-hero{ padding-block: 48px; }
}
@media (max-width:640px){
  #hero-.br-emp-hero{ padding-block: 36px; }
}

/* Asegura que el botón sea visible y alineado como en el mock */
#hero- .br-emp-hero__cta{
  display: inline-block;
  align-self: flex-start;        /* queda a la izquierda del bloque de texto */
  /* (ya hereda estilos de .btn-pill definidos arriba) */
}
/* 1) Menos espacio entre título (línea 2) y párrafo */
#hero- .br-emp-hero__content{
  gap: 16px;                         /* antes 25px */
}

/* 2) Botón más compacto y centrado bajo el texto */
#hero- .br-emp-hero__cta{
  align-self: ;                /* centrado dentro de la columna de texto */
  padding: 10px 18px;                /* más pequeño */
  font-size: .93rem;
}

/* 3) Hover correcto: fondo blanco + borde verde + TEXTO VERDE */
#hero- .br-emp-hero__cta:hover,
#hero- .br-emp-hero__cta:focus-visible{
  background: #FFFFFF !important;
  border-color: #10C459 !important;
  color: #10C459 !important;         /* fuerza el texto verde */
  transform: translateY(-1px);
  text-decoration: none;
  outline: none;
}

/* (Opcional) en móvil mantener el botón alineado a la izquierda si lo prefieres */
/*
@media (max-width: 640px){
  #hero- .br-emp-hero__cta{ align-self: flex-start; }
}
*/
/* ========== ESTADO PUSH / PRESSED (click o tap) ========== */
/* Tarjetas */
.producto-card .btn-pill:active,
.producto-card .btn-pill:focus:active,
.producto-card .btn-pill:focus-visible:active{
  background: #005430 !important;
  border-color: #005430 !important;
  color: #FFFFFF !important;            /* texto blanco */
  box-shadow: none !important;
  transform: translateY(0) !important;  /* sin “salto” al presionar */
}

/* Hero (Afíliate) – usa el selector del módulo para no afectar otros */
#hero- .br-emp-hero__cta:active,
#hero- .br-emp-hero__cta:focus:active,
#hero- .br-emp-hero__cta:focus-visible:active{
  background: #005430 !important;
  border-color: #005430 !important;
  color: #FFFFFF !important;            /* texto blanco */
  box-shadow: none !important;
  transform: translateY(0) !important;
}

/* Mejora en móviles: asegura que el :active se vea mientras se toca */
@media (hover: none), (pointer: coarse){
  .btn-pill:active{
    background: #005430 !important;
    border-color: #005430 !important;
    color: #FFFFFF !important;
  }
}
/* === Forzar Raleway en TODO el hero (solo este módulo) === */
#hero-{
  --font-raleway: "Inter", system-ui, -apple-system, Arial, sans-serif;
  font-family: var(--font-raleway) !important;
}

/* Títulos (las dos líneas) */
#hero- .br-emp-hero__title,
#hero- .br-emp-hero__title .linea-1,
#hero- .br-emp-hero__title .linea-2{
  font-family: var(--font-raleway) !important;
  font-weight: 800 !important; /* coincide con tu diseño */
}

/* Párrafo */
#hero- .br-emp-hero__desc{
  font-family: var(--font-raleway) !important;
  font-weight: 400 !important;
}

/* Botón (mantiene colores/hover/push actuales) */
#hero- .btn-pill,
#hero- .br-emp-hero__cta{
  font-family: var(--font-raleway) !important;
  font-weight: 700 !important;
}
/* === MODO SIN FONDO DETRÁS DE LA IMAGEN PEQUEÑA === */
#hero- .br-emp-hero__overlay,
#hero- .br-emp-hero__overlay::before,
#hero- .br-emp-hero__overlay::after{
  background: transparent !important;  /* sin color */
  box-shadow: none !important;         /* sin sombra “tarjeta” */
  border-radius: 0 !important;         /* sin esquinas redondeadas */
  filter: none !important;             /* por si hubiera filtros heredados */
  mix-blend-mode: normal !important;   /* evita fusiones que simulen velo */
}

/* Asegura el mismo comportamiento en responsive */
@media (max-width: 1100px), (max-width: 640px){
  #hero- .br-emp-hero__overlay{
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }
}

/* ===== BREAKPOINT TEMPRANO (forzar modo móvil del hero) ===== */
@media (max-width: 1260px){
  #hero- .br-emp-hero__wrap{
    display: block !important;         /* stack */
    max-width: 1042px;
    padding: 0 16px !important;
    margin: 0 auto;
  }
  #hero- .br-emp-hero__media{
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;              /* quita margin-left negativo */
    overflow: visible !important;
  }
  #hero- .br-emp-hero__base{
    width: 100% !important;
    height: auto !important;
    border-radius: 12px;
    display: block;
  }
  #hero- .br-emp-hero__overlay{
    position: static !important;       /* deja de estar absolute */
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 12px 0 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
  }
  #hero- .br-emp-hero__content{
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px !important;
    gap: 18px !important;
    align-items: flex-start !important;
  }
  #hero- .br-emp-hero__title .linea-1,
  #hero- .br-emp-hero__title .linea-2{
    font-size: clamp(1.6rem, 3.8vw, 2.15rem) !important;
    line-height: 1.25 !important;
  }
  #hero- .br-emp-hero__desc{
    font-size: .95rem !important;
    line-height: 1.5rem !important;
  }
  #hero- .br-emp-hero__cta{
    align-self: flex-start !important;
  }
}
/* === HERO: CAPEADO EN PANTALLAS MUY GRANDES (≤ 1520px de ancho útil) === */
#hero-{
  --page-cap: 1520px; /* ancho máximo “útil” de la sección hero */
}

/* En pantallas más anchas que el cap, centramos la sección
   y recalculamos el margin-left de la imagen para que no se “abra” de más */
@media (min-width: 1521px){

  /* Acolchado lateral simétrico para que el hero se vea centrado
     y no se expanda más allá de 1520px */
  #hero-.br-emp-hero{
    padding-left: calc((100vw - var(--page-cap)) / 2) !important;
    padding-right: calc((100vw - var(--page-cap)) / 2) !important;
  }

  /* La imagen grande ya no usa el 100vw completo para su cálculo,
     sino el “cap” (1520px). Así se evita el gran vacío en desktop XL. */
  #hero- .br-emp-hero__media{
    margin-left: calc((var(--page-cap) - 1103px) / -2) !important;
  }
}

/* Extra: en todos los anchos, usa el cap si el viewport es más pequeño
   (protege contra layouts intermedios). */
#hero- .br-emp-hero__media{
  margin-left: calc((min(100vw, var(--page-cap)) - 1103px) / -2);
}
/* === HERO: botón centrado SOLO en móvil === */
@media (max-width: 1260px){
  #hero- .br-emp-hero__cta{
    align-self: center !important;   /* centra el botón debajo del texto */
  }
  /* #hero- .br-emp-hero__content{
    align-items: center !important;
  }*/
  
}
/* ========= NORMALIZADOR DE VIÑETAS – SIN DUPLICADOS ========= */
/* 1) Quita el marcador nativo y sangrías externas */
#hero- .br-emp-hero__content ul,
#hero- .br-emp-hero__content ol{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 2) Aplica a TODOS los <li> del texto del hero, incluso si están dentro de <p> */
#hero- .br-emp-hero__content li,
#hero- .br-emp-hero__desc li{
  list-style: none;           /* apaga el bullet nativo (clave para evitar doble) */
  position: relative;
  margin: 0 0 .65rem 0;       /* separación entre items */
  padding-left: 1.25rem;      /* sangría interna uniforme */
  line-height: 1.55rem;
}

/* 3) Dibuja el marcador interno, alineado con la primera línea del texto */
#hero- .br-emp-hero__content li::before,
#hero- .br-emp-hero__desc li::before{
  content: "";
  position: absolute;
  left: 0;                    /* queda DENTRO del bloque, no se corta en móvil */
  top: .72em;                 /* centrado vertical aproximado */
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #0E4633;        /* color del título/texto del hero */
}

/* Un poco más de aire en móviles */
@media (max-width: 640px){
  #hero- .br-emp-hero__content li,
  #hero- .br-emp-hero__desc li{
    margin-bottom: .75rem;
  }
}
/* === Alineación precisa de las viñetas (centradas al texto) === */
#hero-{
  --bullet-indent: 1rem;   /* distancia del punto al texto */
  --bullet-size: .40rem;   /* diámetro del punto */
}

#hero- .br-emp-hero__content ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

#hero- .br-emp-hero__content ul li{
  position: relative;
  padding-left: var(--bullet-indent);
  margin: 0 0 .45rem 0;
  line-height: 1.5rem;      /* mantiene la lectura cómoda */
}

#hero- .br-emp-hero__content ul li::before{
  content: "";
  position: absolute;
  left: 0;
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: 50%;
  background: #0E4633;
  /* Centro exacto respecto a la primera línea */
  top: 0em;
  transform: translateY(-50%);
}

@media (max-width: 640px){
  #hero-{
    --bullet-indent: .95rem;
    --bullet-size: .38rem;
  }
}
/* === Bullets DENTRO del <p class="br-emp-hero__desc"> (override) === */
#hero- .br-emp-hero__desc li{
  list-style: none;                 /* sin marcador nativo */
  position: relative;
  display: block;                   /* evita comportamiento inline extraño */
  margin: 0 0 .55rem 0;             /* espacio entre ítems */
  padding-left: 1.15rem;            /* sangría del texto */
  line-height: 1.55rem;             /* altura de línea coherente */
}

#hero- .br-emp-hero__desc li::before{
  content: "";
  position: absolute;
  left: 0;
  width: .42rem;                    /* diámetro del punto */
  height: .42rem;
  border-radius: 50%;
  background: #0E4633;
  /* centrado real respecto a la PRIMERA línea del texto */
  top: 0.78em;                      /* ajusta fino: 0.76–0.80em */
  transform: translateY(-50%);
}

/* Opcional: mismo look si usan <ul> en vez de <p> */
#hero- .br-emp-hero__content ul{
  list-style: none; margin: 0; padding: 0;
}
#hero- .br-emp-hero__content ul li{
  position: relative; display: block;
  margin: 0 0 .55rem 0; padding-left: 1.15rem; line-height: 1.55rem;
}
#hero- .br-emp-hero__content ul li::before{
  content: ""; position: absolute; left: 0;
  width: .42rem; height: .42rem; border-radius: 50%; background: #0E4633;
  top: 0.90em; transform: translateY(-50%);
}
/* ===== Bullets del hero: alineación 100% consistente ===== */
#hero-{
  /* Ajustables si cambias tipografía/tamaño */
  --bullet-line: 1.55rem;   /* coincide con tu line-height */
  --bullet-size: .42rem;    /* diámetro del punto */
  --bullet-indent: 1.15rem; /* sangría del texto */
  --bullet-color: #0E4633;
}

/* Aplica tanto a <ul> como a <li> sueltos dentro del <p> */
#hero- .br-emp-hero__desc li,
#hero- .br-emp-hero__content ul li{
  list-style: none !important;
  position: relative !important;
  display: block !important;
  padding-left: var(--bullet-indent) !important;
  margin: 0 0 .55rem 0 !important;
  line-height: var(--bullet-line) !important;
}

/* Marcador interno centrado respecto a la línea de texto */
#hero- .br-emp-hero__desc li::before,
#hero- .br-emp-hero__content ul li::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  width: var(--bullet-size) !important;
  height: var(--bullet-size) !important;
  border-radius: 50% !important;
  background: var(--bullet-color) !important;

  /* CENTRADO REAL: no usa translate; calcula el centro con la line-height */
  top: calc((var(--bullet-line) - var(--bullet-size)) / 2) !important;
  transform: none !important;
}
/* ===== Bullets del hero: centrados por layout (grid) ===== */
#hero-{
  --bullet-size: .42rem;      /* diámetro del punto */
  --bullet-gap: .60rem;       /* espacio entre punto y texto */
  --bullet-color: #0E4633;    /* color del punto */
}

#hero- .br-emp-hero__desc li,
#hero- .br-emp-hero__content ul li{
  /* limpiamos cualquier sangría/posicionamiento previo */
  list-style: none !important;
  margin: 0 0 .55rem 0 !important;
  padding: 0 !important;
  position: static !important;

  /* alineación garantizada: punto + texto */
  display: grid !important;
  grid-template-columns: var(--bullet-size) 1fr !important;
  align-items: center !important;           /* ← centra verticalmente el punto con el texto */
  column-gap: var(--bullet-gap) !important;
}

#hero- .br-emp-hero__desc li::before,
#hero- .br-emp-hero__content ul li::before{
  content: "" !important;
  width: var(--bullet-size) !important;
  height: var(--bullet-size) !important;
  border-radius: 50% !important;
  background: var(--bullet-color) !important;

  /* anulamos cualquier posicionamiento absoluto anterior */
  position: static !important;
  transform: none !important;
}
/* Nudge visual mínimo para alinear texto vs. bullet */
#hero-{
  --li-nudge: 1px; /* súbelo a 2px si aún lo ves alto/bajo */
}

/* Aplica a cualquier lista que pongan dentro del hero */
#hero- .br-emp-hero__desc li,
#hero- .br-emp-hero__content ul li{
  padding-top: var(--li-nudge) !important;     /* baja el texto un pelín */
  margin-bottom: calc(.55rem - var(--li-nudge)) !important; /* conserva el espacio vertical */
}
@media (min-width: 1261px){
  #hero- .br-emp-hero__wrap.br-emp-hero__wrap--swapped{
    grid-template-columns: 414px 25px 664px !important;
    align-items: center !important;     /* centra ambos elementos verticalmente */
    grid-template-rows: 1fr !important; /* una sola fila que se adapta */
  }

  #hero- .br-emp-hero__wrap.br-emp-hero__wrap--swapped .br-emp-hero__content{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;     /* centra verticalmente */
  }

  #hero- .br-emp-hero__wrap.br-emp-hero__wrap--swapped .br-emp-hero__media{
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;     /* centra verticalmente */
    
    margin-left: 0 !important;
    margin-right: calc((min(100vw, var(--page-cap)) - 1103px) / -2) !important;
  }
}