/* ==========================================================================
   bs5-pilot.css -- estilos de apoyo para las paginas ya restyleadas.
   Paleta de marca (actualizada): azul navy + morado + negro + gris plata.
   El dorado anterior (#f89406) se reemplazo por el morado en todo el sitio.
   ========================================================================== */
:root{
  --sip-navy: #012054;
  --sip-navy-2: #01346f;
  /* Morado mas pastel/desaturado (2026-09-11, pedido de Milton -- el
     morado anterior #6c2eb5 se parecia demasiado al violeta de La
     Libertad Avanza). Contraste con texto blanco: ~5.4:1, sigue legible. */
  --sip-purple: #8659a8;
  --sip-purple-2: #6d4386;
  --sip-black: #111214;
  --sip-silver: #b7bcc4;
  --sip-silver-2: #8a909b;
  --sip-ink: #17181a;
  --sip-muted: #7d838d;
  --sip-bg: #f4f4f6;
}

body{ background-color: var(--sip-bg); }

/* ---------- Topbar de cuenta (cuando hay sesión iniciada) ---------- */
.sip-topbar{
  background: var(--sip-navy);
  color: #fff;
  font-size: 13px;
}
.sip-topbar a{ color: #dbe7f5; }
.sip-topbar a:hover{ color: #fff; }

/* ---------- Navbar de cuenta (arriba de todo, "Mi Cuenta"/"Salir") ---------- */
/* FIX: esta pagina carga Bootstrap 5, que renombro las clases del navbar de
   Bootstrap 3 (.navbar-toggle -> .navbar-toggler, etc). Sin .navbar-expand-*
   en el contenedor, .navbar-nav de Bootstrap 5 apila los items en columna
   SIEMPRE (no es un tema de pantalla chica) -- por eso se veian uno debajo
   del otro. Ahora el markup usa las clases reales de Bootstrap 5. */
.sip-account-nav{ position: relative; }
.sip-account-nav .navbar-nav{ flex-direction: row; flex-wrap: wrap; }
.sip-account-nav .nav-link{
  color: #dbe7f5 !important;
  font-size: 12px;
  padding: 8px 12px !important;
}
.sip-account-nav .nav-link:hover{ color: #fff !important; }
.sip-account-nav .nav-link.disabled{ color: #fff !important; opacity: .9; }
.sip-account-nav .navbar-toggler{
  border-color: rgba(255,255,255,0.4);
  padding: 4px 8px;
}
.sip-account-nav .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 767.98px){
  .sip-account-nav .navbar-nav{ flex-direction: column; align-items: flex-end; }
  .sip-account-nav .navbar-collapse{
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--sip-navy);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
    padding: 6px 14px;
    z-index: 1050;
  }
}

/* ---------- Header general ---------- */
.fixed-header .header-wrapper{
  box-shadow: 0 2px 14px rgba(1,32,84,0.08);
}
/* FIX: el logo se veia enorme (heredaba width:300px/max-height:100px del
   header viejo). Se achica y se reduce la altura del header en consecuencia
   (el .page-box tenia un padding-top pensado para el header de 100px). */
.header-wrapper{ min-height: 74px; }
.header .logo,
.header .logo-box.auto-height{ height: 74px; }
.header .logo .logo-img,
.header .logo img{
  width: auto;
  max-width: 180px;
  max-height: 54px;
  transition: transform 150ms ease;
}
.header .logo a:hover .logo-img{ transform: scale(1.02); }
.header .right-box-wrapper{ height: 74px; }
.fixed-header .page-box{ padding-top: 88px; }

/* ---------- FIX: footer se superponia con el contenido en paginas cortas ---------- */
/* (sesion 4, 2026-09-11) css/style.css tiene un truco viejo de "sticky
   footer" con numeros fijos: .page-box-content{padding-bottom:310px} +
   #footer{margin:-310px 0 0 0} -- asume que el footer mide ~310px de
   alto. El footer nuevo (mas abajo en este archivo) es bastante mas alto
   y variable segun el viewport (4 columnas + newsletter + redes). En
   paginas CORTAS (poco contenido, ej. quienes-somos_v2.php) el combo
   ".page-box{min-height:100%}" + el margen negativo fijo terminaba
   colocando el footer A MITAD del contenido real en vez de justo
   despues -- se veia superpuesto. En paginas largas (index.php,
   el-inmueble.php) el contenido real ya supera el alto de la pantalla y
   el bug no se nota, por eso no habia aparecido antes.
   Se reemplaza por un sticky footer de flexbox real (no depende de
   ningun numero fijo, se ajusta solo a cualquier alto de footer o de
   contenido). Solo afecta paginas que cargan ESTE archivo (las _v2) --
   las ~20 paginas que todavia usan el header/footer viejo siguen
   dependiendo del truco original de css/style.css, sin tocar. */
body{ display: flex; flex-direction: column; min-height: 100vh; height: auto; }
.page-box{ display: flex; flex-direction: column; flex: 1 0 auto; height: auto; min-height: 0; }
.page-box-content{ flex: 1 0 auto; padding-bottom: 0; }
#footer{ margin-top: 0; flex-shrink: 0; }

/* ---------- Navbar principal (logo + menu) ---------- */
.header-two .navbar{ padding: 10px 0; }
.sip-main-nav{ position: relative; }
.sip-main-nav .nav-link{
  font-weight: 600;
  color: var(--sip-ink) !important;
  position: relative;
}
.sip-main-nav .dropdown-menu{ border-radius: 10px; border: 1px solid #eee; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.sip-main-nav .dropdown-item:hover, .sip-main-nav .dropdown-item:focus{ background: var(--sip-bg); color: var(--sip-navy); }
.sip-main-nav .navbar-toggler{
  border-color: var(--sip-navy);
  padding: 6px 10px;
}
.sip-main-nav .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23012054' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Escritorio (>=992px): items como botones pastilla, acorde a .sip-btn */
@media (min-width: 992px){
  .sip-main-nav .nav-link{
    background: var(--sip-bg);
    border-radius: 999px;
    margin: 0 4px;
    padding: 9px 20px !important;
    transition: background 150ms ease, color 150ms ease;
  }
  .sip-main-nav .nav-link:hover,
  .sip-main-nav .nav-link.active,
  .sip-main-nav .nav-link.show{
    background: var(--sip-purple);
    color: #fff !important;
  }
}

/* Mobile (<992px): lista vertical simple, sin fondo de pastilla */
/* FIX: el panel colapsado quedaba mal ubicado y sin fondo visible porque
   una regla vieja y mas especifica de responsive.css
   (".header .primary .navbar .navbar-collapse", con overflow:hidden
   !important y z-index:919) le ganaba por especificidad a la nuestra.
   Ac&aacute; igualamos esa especificidad y usamos !important en las
   propiedades de layout para garantizar que gane siempre esta version:
   panel propio, flotante, con fondo blanco solido y sombra, anclado
   justo debajo del navbar. */
@media (max-width: 991.98px){
  .sip-main-nav .navbar-nav{ text-align: right; padding: 8px 0; }
  .header .primary .sip-main-nav .navbar-collapse{
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 8px 0 0 !important;
    background: #fff !important;
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(1,32,84,0.18);
    padding: 6px 16px !important;
    z-index: 1050 !important;
  }
  .sip-main-nav .nav-link{
    background: none !important;
    border-bottom: 1px solid #f0f0f0;
    padding: 13px 4px !important;
    margin: 0;
  }
  .sip-main-nav li:last-child .nav-link{ border-bottom: none; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-box{ background:#fff; border-bottom:1px solid #eee; padding: 10px 0; }
.breadcrumb-item a{ color: var(--sip-navy); }
.breadcrumb-item.active{ color: var(--sip-muted); }

/* ---------- Hero de la página ---------- */
.sip-hero{
  background: linear-gradient(135deg, var(--sip-navy) 0%, var(--sip-navy-2) 100%);
  color: #fff;
  padding: 56px 0;
  text-align: center;
}
.sip-hero h1{
  font-weight: 800;
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
}
.sip-hero p{
  color: #cfe0f5;
  margin: 10px 0 0;
  font-size: 18px;
}

/* ---------- Carrusel de fotos ---------- */
.sip-carousel{ border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(1,32,84,0.15); }
.sip-carousel .carousel-item img{
  width: 100%;
  height: 420px;
  object-fit: cover;
}
@media (max-width: 767px){
  .sip-carousel .carousel-item img{ height: 260px; }
}

/* ---------- Tarjetas de valores/confianza ---------- */
.sip-card{
  background: #fff;
  border-radius: 14px;
  padding: 28px 22px;
  height: 100%;
  border: 1px solid #e3e5e9;
  box-shadow: 0 2px 10px rgba(1,32,84,0.05);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.sip-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(1,32,84,0.12);
}
.sip-card .sip-icon{
  width: 54px; height: 54px;
  border-radius: 12px;
  background: var(--sip-navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.sip-card h3{ font-size: 17px; font-weight: 700; color: var(--sip-navy); margin-bottom: 8px; }
.sip-card p{ font-size: 14px; color: var(--sip-muted); margin: 0; }

/* ---------- Bloque de texto institucional ---------- */
.sip-texto-institucional{
  background: #fff;
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 2px 12px rgba(1,32,84,0.06);
  font-size: 16px;
  line-height: 1.8;
  color: var(--sip-ink);
}
.sip-texto-institucional p{ margin-bottom: 1.1em; }

/* ---------- Tarjeta de contacto ---------- */
.sip-contacto{
  background: var(--sip-navy);
  color: #fff;
  border-radius: 16px;
  padding: 28px;
}
.sip-contacto a{ color: #fff; text-decoration: underline; }
.sip-contacto .fa{ width: 22px; color: var(--sip-purple); }

/* ---------- Focus visible (accesibilidad) ---------- */
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--sip-purple);
  outline-offset: 2px;
}

/* ---------- Footer moderno ---------- */
#footer{ background: var(--sip-black); color: var(--sip-silver); }
#footer .title-block .title{ color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .04em; margin-bottom: 14px; }
#footer nav ul{ list-style: none; padding: 0; margin: 0; }
#footer nav ul li{ margin-bottom: 8px; }
#footer nav ul li a{ color: var(--sip-silver); }
#footer nav ul li a:hover{ color: var(--sip-purple); }
#footer .footer-bottom{ background:#0a0a0b; padding: 16px 0; font-size: 13px; }
#footer .footer-bottom a{ color: #fff; }
#footer .footer-icon{ display:inline-block; margin-right:8px; vertical-align: middle; }

/* ---------- Footer: columnas, newsletter, contacto, linea inferior ---------- */
.sip-footer-col{ margin-bottom: 10px; }
.sip-footer-title{ color:#fff; font-size:15px; font-weight:700; letter-spacing:.04em; margin-bottom:14px; text-transform:uppercase; }
.sip-footer-text{ font-size:13px; color:var(--sip-silver); margin-bottom:10px; }
.sip-footer-links{ list-style:none; padding:0; margin:0; }
.sip-footer-links li{ margin-bottom:8px; }
.sip-footer-links a{ color:var(--sip-silver); font-size:14px; }
.sip-footer-links a:hover{ color:var(--sip-purple); }
.sip-newsletter-form{ display:flex; gap:0; max-width:280px; }
.sip-newsletter-form .form-control{ border-radius:8px 0 0 8px; border:1px solid #2a2c30; background:#1a1b1e; color:#fff; }
.sip-newsletter-form .form-control::placeholder{ color:var(--sip-silver-2); }
.sip-newsletter-form .form-control:focus{ box-shadow:none; border-color:var(--sip-purple); background:#1a1b1e; color:#fff; }
.sip-newsletter-btn{ border:none; border-radius:0 8px 8px 0; background:var(--sip-purple); color:#fff; padding:0 16px; transition:background 150ms ease; }
.sip-newsletter-btn:hover{ background:var(--sip-purple-2); }
.sip-footer-contact{ margin-top:16px; font-size:13.5px; color:var(--sip-silver); }
.sip-footer-contact div{ margin-bottom:8px; }
.sip-footer-contact i{ color:var(--sip-purple); margin-right:8px; width:16px; text-align:center; }
.sip-footer-bottom-row{ text-align:center; font-size:13px; color:var(--sip-silver); }
.sip-footer-bottom-row a{ color:#fff; font-weight:600; }
.sip-footer-bottom-row a:hover{ color:var(--sip-purple); }

/* ==========================================================================
   Componentes agregados a partir de una referencia visual (transticket.cl):
   botones tipo pastilla, tarjetas de sorteo/inmueble, banners CTA de 2
   columnas, encabezado de seccion con "ver todos". Colores propios de marca
   (navy/morado/negro/plata), no los de la referencia.
   ========================================================================== */

/* ---------- Botones tipo pastilla ---------- */
.sip-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 28px; border-radius:999px; font-weight:700; font-size:14px;
  text-decoration:none; border:none; cursor:pointer;
  transition:transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.sip-btn:hover{ transform:translateY(-2px); text-decoration:none; box-shadow:0 8px 18px rgba(0,0,0,0.18); }
.sip-btn-navy{ background:var(--sip-navy); color:#fff; }
.sip-btn-navy:hover{ background:var(--sip-navy-2); color:#fff; }
.sip-btn-purple{ background:var(--sip-purple); color:#fff; }
.sip-btn-purple:hover{ background:var(--sip-purple-2); color:#fff; }
.sip-btn-outline{ background:#fff; color:var(--sip-navy); border:2px solid var(--sip-navy); }
.sip-btn-outline:hover{ background:var(--sip-navy); color:#fff; }
.sip-btn-sm{ padding:7px 18px; font-size:12px; }

/* ---------- Encabezado de seccion (titulo + "ver todos") ---------- */
.sip-section-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px; }
.sip-section-header h2{ font-size:24px; font-weight:800; color:var(--sip-navy); margin:0; }
.sip-section-header .sip-btn{ white-space:nowrap; }

/* ---------- Tarjeta de sorteo / inmueble ---------- */
.sip-sorteo-card{
  background:#fff; border-radius:14px; overflow:hidden; border:1px solid #eef0f3;
  box-shadow:0 2px 10px rgba(1,32,84,0.05); transition:transform 180ms ease, box-shadow 180ms ease;
  height:100%; display:flex; flex-direction:column;
}
.sip-sorteo-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(1,32,84,0.12); }
.sip-sorteo-card .sip-sorteo-img{ width:100%; height:180px; object-fit:cover; background:var(--sip-bg); display:block; }
.sip-sorteo-card .sip-sorteo-body{ padding:16px 18px; display:flex; flex-direction:column; flex:1; }
.sip-sorteo-card .sip-sorteo-titulo{ font-weight:800; color:var(--sip-navy); font-size:16px; margin-bottom:6px; }
.sip-sorteo-card .sip-sorteo-precio{ font-size:13px; color:var(--sip-muted); margin-bottom:14px; }
.sip-sorteo-card .sip-sorteo-precio b{ color:var(--sip-ink); font-size:17px; }
.sip-sorteo-card .sip-btn{ margin-top:auto; align-self:flex-start; }
.sip-sorteo-badge{
  display:inline-block; background:var(--sip-purple); color:#fff; font-size:11px;
  font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:4px 10px;
  border-radius:999px; margin-bottom:10px; align-self:flex-start;
}

/* ---------- Pagina de contenido simple (sesion 4, 2026-09-15): titulo +
   un bloque de texto editable desde el admin + sidebar de navegacion.
   Reusable por cualquier pagina de este tipo (preguntas.php, reglamento.php,
   politicas-privacidad.php, contactos.php, y las que se migren despues) --
   antes cada pagina de este tipo definia su propio <style> casi identico. */
.sip-page-hero{ background:linear-gradient(120deg, var(--sip-navy) 0%, var(--sip-navy-2) 100%); color:#fff; padding:40px 0; }
.sip-page-hero h1{ font-weight:800; margin:0; font-size:1.9rem; }
.sip-page-section{ padding:44px 0 60px; }
.sip-page-text{ font-size:16px; line-height:1.85; color:var(--sip-ink); text-align:justify; }
.sip-page-text p{ margin-bottom:16px; }
.sip-page-sidebar .card{ border:1px solid #e8e9ec; border-radius:14px; margin-bottom:22px; }
.sip-page-sidebar .card-header{ background:#fff; border-bottom:1px solid #eee; font-weight:700; color:var(--sip-navy); font-size:14px; }
.sip-page-sidebar .list-group-item{ border:none; border-bottom:1px solid #f0f0f2; font-size:14px; padding:9px 4px; }
.sip-page-sidebar .list-group-item:last-child{ border-bottom:none; }
.sip-page-sidebar .list-group-item a{ color:var(--sip-ink); text-decoration:none; }
.sip-page-sidebar .list-group-item a:hover{ color:var(--sip-purple); }
.sip-page-sidebar .list-group-item.active-page a{ color:var(--sip-purple); font-weight:700; }

/* ---------- Banner CTA de 2 columnas ---------- */
.sip-cta-banner{
  border-radius:16px; padding:28px 32px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.sip-cta-banner.navy{ background:linear-gradient(135deg, var(--sip-navy) 0%, var(--sip-navy-2) 100%); }
.sip-cta-banner.purple{ background:linear-gradient(135deg, var(--sip-purple) 0%, var(--sip-purple-2) 100%); color:#fff; }
.sip-cta-banner h3{ font-size:21px; font-weight:800; margin:0 0 4px; }
.sip-cta-banner p{ margin:0; opacity:.9; font-size:14px; max-width:520px; }
.sip-cta-banner.purple .sip-btn-navy{ background:var(--sip-navy); color:#fff; }
.sip-cta-banner.navy .sip-btn-purple{ background:var(--sip-purple); color:#fff; }

/* ---------- Iconos redondos de redes sociales (footer) ---------- */
#footer .sip-social-icons{ display:flex; gap:10px; margin-top:14px; }
#footer .sip-social-icons a{
  width:38px; height:38px; border-radius:50%; background:var(--sip-purple); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px; transition:transform 150ms ease, background 150ms ease;
}
#footer .sip-social-icons a:hover{ transform:translateY(-3px); background:var(--sip-purple-2); color:#fff; }