/* =========================================================
   site.css — Unificado público + privado/auth
   Paleta y componentes consistentes para todo el proyecto
   ========================================================= */

/* ---------- Variables (tema) ---------- */
:root{
  --primary:       #AE1926;
  --primary-700:   #8F0C18;
  --bg:            #F7F7F8;
  --surface:       #FFFFFF;
  --text:          #1F2937;
  --muted:         #6B7280;
  --border:        #E5E7EB;
  --radius:        16px;
  --shadow:        0 6px 24px rgba(0,0,0,.06);

  /* Ritmo vertical */
  --space-section:    84px;
  --space-section-sm: 56px;
}

/* ---------- Reset & base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  line-height:1.45;
}
a{ color:#111827; text-decoration:none; }
a:hover{ color:#000; text-decoration:none; }

/* Offset para anclas cuando hay header sticky */
:target { scroll-margin-top: 96px; }

/* ===== Utilidades responsive globales ===== */
.container, .container-fluid { width: 100%; }
.img-fluid { max-width: 100%; height: auto; }
.d-grid { display: grid; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; }
.text-center { text-align: center; }

/* Tipografía responsive ligera */
@media (max-width: 576px){
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.35rem; }
  .display-5 { font-size: 1.75rem; }
  .display-6 { font-size: 1.5rem; }
}

/* ===== Layout privado: ancho completo en móvil ===== */
@media (max-width: 767.98px){
  main{
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 .75rem !important;
  }
}

/* ---------- Utilidades genéricas ---------- */
.text-muted{ color:var(--muted); }
.center{ text-align:center; }
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:1rem}
.mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:1rem}
.w-100{ width:100% }

/* ---------- Componentes comunes ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-body{ padding:1.25rem; }
.card-title{ margin:0 0 .5rem; font-weight:800; }
.card-narrow{ max-width:520px; margin:0 auto; }

label{ display:block; margin:.5rem 0 .25rem; font-weight:600; }
input,textarea,select{
  width:100%;
  padding:.65rem .75rem;
  font:inherit;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
}
textarea{ resize:vertical; }

/* Botones (coherentes con Bootstrap) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.6rem .95rem; border-radius:12px; border:1px solid transparent;
  font-weight:700; cursor:pointer; text-decoration:none;
}
.btn-primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff !important;
}
.btn-primary:hover{
  background:var(--primary-700);
  border-color:var(--primary-700);
  color:#fff !important;
}
.btn-outline-primary{
  color:var(--primary);
  border-color:var(--primary);
  background:transparent;
}
.btn-outline-primary:hover{
  color:#fff !important;
  background:var(--primary);
  border-color:var(--primary);
}
.btn-link{ background:transparent; border:0; color:var(--primary); }
.btn-link:hover{ text-decoration:underline; }

/* Mensajes “flash”/estado genéricos */
.flash-wrap{ margin-bottom:.5rem; }
.flash{ margin:.25rem 0 0; padding:.5rem .7rem; border-radius:10px; font-size:.95rem; }
.flash.success{ background:#DEF7EC; color:#03543F; }
.flash.info{ background:#E1ECFF; color:#1E3A8A; }
.flash.warning{ background:#FFF6D1; color:#92400E; }
.flash.danger{ background:#FDE8E8; color:#9B1C1C; }

/* Grid utilitario */
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
@media (max-width:720px){ .grid-2{ grid-template-columns:1fr; } }

/* =========================================================
   PÚBLICO (landing)
   ========================================================= */

/* Header público (minimal blanco) */
.public-nav{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:.8rem 0;
  min-height:100px;
  display:flex; align-items:center;
}
.public-nav .container{ gap:12px; }
.public-nav .brand{
  text-decoration:none; font-weight:800; letter-spacing:.2px;
  color:#111827; font-size:1.25rem;
}
.brand img{ height:64px; width:auto; }
.public-menu a{ color:#111827; opacity:.88; }
.public-menu a:hover{ opacity:1; }

/* Drawer móvil */
.mobile-drawer{ position:fixed; inset:0; display:none; background:rgba(0,0,0,.35); z-index:1050; }
.mobile-drawer.show{ display:block; }
.mobile-drawer__panel{
  position:absolute; right:0; top:0; width:85%; max-width:340px; height:100%;
  background:#fff; border-left:1px solid rgba(0,0,0,.06);
  box-shadow:-8px 0 24px rgba(0,0,0,.08);
  padding:24px; transform:translateX(100%); transition:transform .22s ease;
}
.mobile-drawer.show .mobile-drawer__panel{ transform:translateX(0); }
.mobile-drawer__close{
  appearance:none; border:0; background:transparent; font-size:28px; line-height:1;
  position:absolute; top:10px; right:12px; cursor:pointer; color:#444;
}
.drawer-link{ color:var(--text); text-decoration:none; font-weight:600; }
.drawer-link:hover{ opacity:.85; }

/* Hero */
.hero{
  position: relative;                       /* para asegurar stacking si usas overlays */
  min-height: 420px;                         /* ajusta a gusto */
  padding: 40px 0 72px;                      /* lo que tenías antes */
  border-bottom: 1px solid rgba(0,0,0,.06);

  background-image: url('../img/fondo_backgroud.png');
  background-repeat: no-repeat;
  background-position: center top;           /* centrado horizontal, pegado arriba */
  background-size: cover;                    /* permite centrar aunque recorte */
}

.hero-grid{
  display:grid; grid-template-columns: 1fr 420px; gap:40px; align-items:center;
}
@media (max-width:991px){
  .hero{ padding:64px 0 48px; }
  .hero-grid{ grid-template-columns:1fr; gap:28px; }
}
.hero-left{ display:flex; flex-direction:column; }
.hero-img{
  display:block; max-height:320px; width:auto; max-width:100%;
  margin:0 auto 16px; object-fit:contain; transition:opacity .35s ease;
}
.hero-img.is-fading{ opacity:.15; }
.hero-copy .accent{
  color:var(--primary); text-decoration:underline;
  text-underline-offset:.22em; text-decoration-thickness:.12em;
}
.hero .mini-badges .badge{
  background:#EEF2F7 !important; color:#111827; border:1px solid rgba(0,0,0,.06);
}
.hero-card{ max-width:480px; margin-left:auto; }

/* Secciones */
.section{ padding:var(--space-section) 0; }
.section.section-muted{ background:#fff; }
@media (max-width:991px){ .section{ padding:var(--space-section-sm) 0; } }
.section-title{ font-weight:800; letter-spacing:.3px; margin:0 0 20px 0; }
.section + .section{ border-top:1px solid rgba(0,0,0,.06); }

/* Logos aseguradoras */
.logo-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:32px; margin-top:24px;
}
.logo-item{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px;
  padding:20px 28px; display:flex; align-items:center; justify-content:center;
  height:200px; width:280px; box-shadow:0 2px 4px rgba(0,0,0,.04); transition:transform .2s ease;
}
@media (max-width: 576px){
  .logo-item{ width: 46%; height: 140px; padding: 16px; }
}
.logo-item:hover{ transform: translateY(-4px); }
.logo-item img{ max-height:80px; max-width:100%; object-fit:contain; }

/* Lista de puntos (tarjetas) */
#posList .card{ border-radius:12px; border:1px solid rgba(0,0,0,.06); }
#posList .card:hover{ box-shadow:0 4px 14px rgba(0,0,0,.06); }

/* Footer público */
.public-footer{
  border-top:1px solid rgba(0,0,0,.06);
  background:#fff; padding:24px 0; margin-top:28px;
}

/* Contenedor estrecho */
/* Solo para privado/auth */

/* Para público (landing) */
body.public main{
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   PRIVADO / AUTH (login, panel mínimo)
   ========================================================= */

.header-min{
  background:#fff; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1rem;
}
.header-min .brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.header-min .brand img{ height:40px; width:auto; }
.header-min .nav a{ color:var(--text); margin-left:.9rem; opacity:.9; }
.header-min .nav a:hover{ opacity:1; }

/* solo privado/auth */
main{ 
  max-width:80% !important;
  margin:2rem auto !important;
  padding:0 1rem !important; 
}

/* Auth */
.auth-wrap{
  min-height: calc(100vh - 80px);
  display:grid; place-items:center; padding:2rem 1rem;
}
.auth-card{
  width:100%; max-width:520px; background:#fff; border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow);
}
.auth-card .card-body{ padding:1.25rem 1.25rem 1.5rem; }
.auth-title{ margin:0 0 .75rem; font-size:1.15rem; font-weight:800; }
.auth-row{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media (max-width:720px){ .auth-row{ grid-template-columns:1fr; } }
.auth-btn{ margin-top:.9rem; }
.auth-help{ margin-top:.6rem; text-align:right; font-size:.9rem; color:var(--muted); }
.auth-help a{ color:inherit; text-decoration:none; }
.auth-help a:hover{ text-decoration:underline; }




/* ---------- Header / Navbar unificado ---------- */
.navbar-unified {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  min-height: 88px;            /* 🔹 altura estándar para todos */
  padding: .8rem 1rem;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  backdrop-filter: saturate(180%) blur(8px);
}

.navbar-unified .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.navbar-unified .brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text);
  text-decoration: none;
}
.navbar-unified .brand img {
  height: 56px;   /* 🔹 mismo tamaño logo para ambos */
  width: auto;
}

.navbar-unified nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  opacity: .9;
  margin-left: 1.5rem;
}
.navbar-unified nav a:hover { opacity: 1; }

/* Versión con fondo de color (opcional) */
.navbar-colored {
  background: var(--primary);
  border-bottom: none;
}
.navbar-colored .brand,
.navbar-colored nav a {
  color: #fff;
}


/* Altura, fondo y borde ya los define .navbar-unified en tu site.css */
.navbar-unified {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: 88px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  backdrop-filter: saturate(180%) blur(8px);
}

/* Icono hamburguesa visible en fondo claro */
.navbar-light .navbar-toggler-icon{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(31,41,55,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Dropdown bonito */
.navbar-unified .dropdown-menu{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Evitar que el menú de usuario se superponga mal en móvil */
@media (max-width: 767.98px){
  .navbar-unified .navbar-nav .dropdown{ position: static; }
  .navbar-unified .navbar-nav .dropdown-menu{
    position: absolute;
    right: .5rem;
    left: auto;
    width: calc(100% - 1rem);
    max-width: 340px;
    z-index: 1100;
  }
}

/* Hover abre dropdown en desktop (opcional) */
@media (min-width: 992px){
  .navbar-unified .dropdown:hover > .dropdown-menu{ display:block; }
}

/* Activo en dropdown */
.dropdown-item.active, .dropdown-item:active{
  background-color: var(--primary);
  color:#fff;
}



/* ======== Navbar: estados activos sin cambiar tu paleta ======== */

/* Enlaces activos (izquierda y derecha) */
.navbar-unified .navbar-nav .nav-link.active,
.navbar-unified .navbar-nav .show > .nav-link {
  background: var(--primary);
  color: #fff !important;
  border-radius: 12px;
  font-weight: 700;
}

/* Hover suave sin cambiar colores base */
.navbar-unified .navbar-nav .nav-link:hover {
  opacity: 1;
}

/* Asegura espaciado cómodo entre items del bloque derecho */
.navbar-unified .navbar-nav.ms-auto .nav-link {
  margin-left: .45rem;
}

/* Padre del dropdown “activo” (cuando hay una subpágina activa) */
.navbar-unified .navbar-nav.me-auto .nav-link {
  margin-right: 1.75rem; /* 🔹 controla la distancia entre los ítems */
  margin-left: 0;        /* evita acumulación doble */
}
/* Ya tienes esto para los ítems del dropdown, lo dejo por claridad:
.dropdown-item.active, .dropdown-item:active{
  background-color: var(--primary);
  color:#fff;
}
*/

/* Variante con fondo de color: invierte contraste manteniendo paleta */
.navbar-colored .navbar-nav .nav-link.active,
.navbar-colored .navbar-nav .show > .nav-link {
  background: #fff;
  color: var(--primary) !important;
}



/* Alinear dropdown con el contenido (texto) del disparador en la navbar */
.navbar-unified .navbar-nav .dropdown > .dropdown-menu{
  /* el menú queda pegado al borde izquierdo del <li> ... */
  left: 0;                        /* (por si alguna regla lo movía) */
  /* ...y le desplazamos exactamente el padding-x del .nav-link  */
  margin-left: var(--bs-nav-link-padding-x, .5rem);
}

/* Si el menú está alineado a la derecha con .dropdown-menu-end, NO lo movemos */
.navbar-unified .navbar-nav .dropdown > .dropdown-menu.dropdown-menu-end{
  margin-left: 0;
}

/* En móvil el menú ocupa toda la línea, así que quitamos el ajuste */
@media (max-width: 991.98px){
  .navbar-unified .navbar-nav .dropdown > .dropdown-menu{
    margin-left: 0;
  }
}



/* ---- NAV: más aire dentro de cada botón ---- */
.navbar-unified .navbar-nav .nav-link {
  /* Si prefieres usar las CSS vars de Bootstrap: */
  --bs-nav-link-padding-y: .55rem;
  --bs-nav-link-padding-x: 1rem;

  /* O fuerza el padding directo (equivalente): */
  padding: .55rem 1rem;
  border-radius: 14px;   /* pastilla más amable */
  line-height: 1.2;      /* por si el texto envía */
}

/* La versión “activa” usa el mismo padding para que no cambie de tamaño */
.navbar-unified .navbar-nav .nav-link.active,
.navbar-unified .navbar-nav .show > .nav-link {
  padding: .75rem 1rem;   /* mantiene la pastilla consistente */
}

/* Opcional: separa un poco los items entre sí (ajusta a gusto) */
.navbar-unified .navbar-nav.me-auto .nav-link {
  margin-right: 1.25rem;  /* antes tenías ~2.75rem */
}

/* Opcional: más aire en el dropdown */
.navbar-unified .dropdown-menu .dropdown-item {
  padding: .55rem 1rem;
  border-radius: 8px;
}

.modal-wide { --bs-modal-width: min(1200px, 95vw); }

.form-compact .form-label { margin-bottom: .25rem; font-weight: 600; }
.form-compact .form-control,
.form-compact .form-select {
  padding: .375rem .5rem;
  font-size: .925rem;
}
.form-compact .row.g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }



/* Ancho y presentación del modal de comisiones */
.modal-wide { --bs-modal-width: min(1200px, 95vw); }

.form-compact .form-label { margin-bottom: .25rem; font-weight: 600; }
.form-compact .form-control,
.form-compact .form-select {
  padding: .35rem .5rem;
  font-size: .9rem;
  line-height: 1.3;
}

#tblComm th, #tblComm td {
  vertical-align: middle;
}
#tblComm td select, 
#tblComm td input {
  min-width: 100%;
}
#tblComm .badge-new {
  font-size: 0.75rem;
}



/* ===== Puntos de venta ===== */
@media (min-width: 992px) { /* ≥ lg */
  .pos-scroll{
    /* Altura visible: viewport - (alto aproximado de hero/márgenes) */
    max-height: calc(70vh - 240px);
    overflow: auto;
    padding-right: .25rem; /* espacio para scrollbar */
  }
  .pos-sticky{
    position: sticky;
    top: 84px;              /* despega del header fijo */
    align-self: flex-start; /* evita estirar verticalmente */
  }
}

/* En móviles/tablet, también limitamos un poco para que no se haga eterna */
@media (max-width: 991.98px) {
  .pos-scroll{
    max-height: 60vh;
    overflow: auto;
  }
}

/* (opcional) scrollbar más discreto en navegadores WebKit */
.pos-scroll::-webkit-scrollbar { width: 8px; }
.pos-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 8px;
}



/* Asegura que la pastilla de usuario se acomode en móvil */
@media (max-width: 576px) {
  .user-chip {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
  }
}
/* Visual activo en dropdown */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #e9ecef;
  color: #212529;
}



/* Tarjeta más limpia en formularios del héroe */
.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: var(--shadow);
}

/* Focus bonito en inputs */
.form-card .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(174,25,38,.12);
}

/* Botón WhatsApp */
.btn-whatsapp{
  background: #25D366;           /* verde WhatsApp */
  border-color: #1ebe57;
  color:#fff !important;
}
.btn-whatsapp:hover{
  background:#1ebe57;
  border-color:#19b14f;
  color:#fff !important;
}



/* ===== Hero mejorado ===== */
.hero--gradient{
  background: radial-gradient(1200px 600px at 80% -10%, rgba(174,25,38,.08), transparent 60%),
              radial-gradient(1000px 500px at -10% 0%, rgba(30,41,59,.06), transparent 60%),
              #fff;
  padding: 72px 0 56px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 991px){
  .hero-grid{ grid-template-columns: 1fr; gap: 24px; }
}
.hero-kicker{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  color: var(--primary);
  font-weight: 800;
}
.hero-visual{ text-align: center; }
.hero-ctas .btn{ min-width: 220px; }

/* === Phone mockups === */
.phone-mock{
  width: 280px; max-width: 100%;
  height: 560px;
  margin: 0 auto;
  border-radius: 36px;
  border: 10px solid #11182710;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  background: #000;
  position: relative;
  overflow: hidden;
}
.phone-screen{
  width: 100%; height: 100%; object-fit: cover;
  opacity: .95;
}
.phone-stack{ position: relative; height: 560px; }
.phone-mock.tilt-left{ position:absolute; left:-10px; top:20px; transform: rotate(-6deg); }
.phone-mock.tilt-right{ position:absolute; right:-10px; bottom:-10px; transform: rotate(6deg); }

/* ===== App section ===== */
.section-app{
  background: #fafbff;
}
.app-grid{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:40px; align-items:center;
}
@media (max-width: 991px){
  .app-grid{ grid-template-columns: 1fr; }
  .phone-stack{ height: 480px; }
}

/* ===== Formularios compactos en móvil ===== */
@media (max-width: 576px){
  .form-compact .row.g-3 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
  .form-compact .form-control, .form-compact .form-select { font-size: .95rem; padding: .45rem .6rem; }
  .btn { padding: .55rem .8rem; }
}

/* ===== Listas/scroll en móvil ===== */
@media (max-width: 576px){
  .pos-scroll{ max-height: 50vh; }
}

/* ===== Features ===== */
.feature{
  display:flex; gap:.8rem; align-items:flex-start;
  padding:.5rem .25rem;
}
.feature-icon{
  width:36px; height:36px; display:grid; place-items:center;
  background:#EEF2F7; border:1px solid rgba(0,0,0,.06); border-radius:10px;
  font-size:18px;
}
.feature-list{ list-style:none; padding-left:0; margin:0 0 .5rem; }
.feature-list li::before{
  content:"✓";
  color: var(--primary);
  font-weight: 800;
  margin-right:.5rem;
}

/* Form + botón WhatsApp */
.form-card { background:#fff; border:1px solid var(--border); border-radius: 16px; padding: 1rem; box-shadow: var(--shadow); }
.form-card .form-control:focus{ border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(174,25,38,.12); }
.btn-whatsapp{ background:#25D366; border-color:#1ebe57; color:#fff !important; }
.btn-whatsapp:hover{ background:#1ebe57; border-color:#19b14f; color:#fff !important; }



.hero-right { position: relative; }

.hero-rotator{
  position: relative;
  height: 340px;               /* ajusta a tu gusto */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
  background: #f6f7fb;
}
@media (min-width: 992px){ .hero-rotator{ height: 360px; } }

.hero-rotator img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}
.hero-rotator img.is-active{ opacity: 1; }


/* ===== Hero rotador limpio (sin marco) ===== */
.hero-rotator.clean {
  position: relative;
  height: 340px;
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  background: none;
}

.hero-rotator.clean img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}

.hero-rotator.clean img.is-active {
  opacity: 1;
}

/* Tarjeta sin borde ni sombra */
.hero-card.card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.hero-card h5,
.hero-card h6 {
  color: var(--bs-body-color);
}


.hero-ctas .btn {
  min-width: 220px;         /* tamaño mínimo parejo */
  font-weight: 600;
  border-radius: 8px;
}

.hero-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;                /* espacio entre botones */
  flex-wrap: wrap;
}


.app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr;
  gap: 2rem;
  align-items: center;
}



/* HERO: rotador grande y sin marco */
.hero-right .hero-rotator.clean{
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;         /* sin esquinas redondeadas */
  box-shadow: none;         /* sin sombra */
  overflow: hidden;         /* recorta el exceso al ampliar */
  background: transparent;  /* por si hay PNGs */
  height: 56vh;             /* alto inicial "grande" */
  max-height: 560px;        /* techo en desktop */
  min-height: 320px;        /* piso en mobile */
}

/* Las imágenes ocupan todo y se superponen */
.hero-right .hero-rotator.clean img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* mostrar completa sin recortar */
  object-position: center;  /* centrado agradable */
  display: block;
  opacity: 0;
  transition: opacity .6s ease;
  border: 0 !important;     /* sin marco */
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* La activa se ve */
.hero-right .hero-rotator.clean img.is-active{ opacity: 1; }

/* Ajustes de layout para darle más ancho al bloque de imagen en desktop */
@media (min-width: 992px){
  .hero-grid{
    display: grid;
    grid-template-columns: 1.1fr 1fr; /* un pelín más ancha la derecha */
    gap: 2rem;
    align-items: center;
  }
}

/* En móviles, que el rotador no sea gigante */
@media (max-width: 991.98px){
  .hero-right .hero-rotator.clean{
    height: 42vh;
    max-height: 420px;
    min-height: 260px;
  }
}