@charset "UTF-8";
/* =========================================================
   MOPLA · estilos.css  v1.3
   Base tipográfica fluida + tokens + botones Figma + Bootstrap 5
   ========================================================= */

/* Tipografía */
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap");

/* =========================================================
   TOKENS PRINCIPALES
   ========================================================= */
:root{
  /* ===== Colores ===== */
  --mopla-navy:      #004C97;   /* Azul hero / headers */
  --mopla-blue-600:  #135089;   /* Azul énfasis (reservado) */
  --mopla-blue-100:  #F7FAFD;   /* Azul muy claro, secciones */
  --mopla-red:       #F13935;   /* CTA principal */
  --mopla-red-700:   #C62828;   /* Hover CTA */
  --mopla-dark:      #1F1F29;   /* Texto principal */
  --mopla-muted:     #6B7280;   /* Texto secundario */
  --mopla-white:     #FDFDFD;   /* Blanco */
  --mopla-bg:        #FFFFFF;   /* Fondo general */

  /* ===== Sombras ===== */
  --mopla-text-shadow: 0 4px 20px rgba(0,0,0,.25);
  --mopla-shadow-25:   0 4px 20px rgba(0,0,0,.25);
  --mopla-shadow-sm:   0 2px 8px rgba(0,0,0,.10);
  --mopla-btn-shadow:  0 4px 4px rgba(0,0,0,.25); /* sombra exacta de botón Figma */

  /* ===== Bordes ===== */
  --mopla-radius:     16px;
  --mopla-radius-btn: 12px;

  /* ===== Tipografía fluida (clamp) ===== */
  --fs-base: clamp(14px, 1vw + 12px, 16px);
  --fs-h1:   clamp(28px, 2.6vw + 16px, 48px);
  --fs-h2:   clamp(22px, 2vw + 12px, 40px);
  --fs-h3:   clamp(20px, 1.6vw + 12px, 32px);
  --fs-h4:   clamp(18px, 1.2vw + 10px, 24px);
  --fs-h5:   clamp(16px, 1vw + 8px, 20px);

  /* ===== Line-height y tracking ===== */
  --lh-tight:  1.2;
  --lh-normal: 1.45;
  --lh-h1:     1.5;   /* 150% */
  --lh-h2:     1.75;  /* 175% */
  --ls-4p:     0.04em; /* Letter spacing 4% */

  /* ===== Botones ===== */
  --btn-radius: 12px;
  --btn-padding-y: 10px;
  --btn-padding-x: 40px;

  /* ===== Layout vars ===== */
  --nav-h:    120px;  /* altura header desktop (hero padding-top) */
  --nav-h-sm:  88px;  /* altura header mobile */

  /* ===== Bootstrap mapping ===== */
  --bs-body-font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-size:   var(--fs-base);
  --bs-body-color:       var(--mopla-dark);
  --bs-body-bg:          var(--mopla-bg);
  --bs-primary:          var(--mopla-red);
  --bs-secondary:        var(--mopla-navy);
  --bs-link-color:       var(--mopla-red);
  --bs-link-hover-color: var(--mopla-red-700);
  --bs-border-radius:    var(--mopla-radius);
}
.colorWa{
  color: rgb(25, 124, 25);
}
.color-dark{
  color: var(--mopla-dark);
}
/* Tipografía base en móviles */
@media (max-width: 576px){
  :root{
    --fs-base: 14px;
  }
}

/* =========================================================
   BASE GLOBAL
   ========================================================= */
html{ scroll-behavior: smooth; }

body{
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  letter-spacing: .01em;
}

/* =========================================================
   TITULOS Y TEXTO
   ========================================================= */
h1,h2,h3,h4,h5{
  color: var(--mopla-dark);
  margin: .5em 0 .35em;
  font-weight: 800; /* ExtraBold */
}

h1{
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-4p);
}
h1 span{
  font-size: var(--bs-body-font-size);
  letter-spacing: var(--ls-4p);
  line-height: var(--lh-normal);
  color: var(--mopla-white);
  font-weight: 300;
  text-transform: none;
  margin-bottom: 0;
}
h2{
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-4p);
}

h3{
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

h4{
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  font-weight: 700;
}

h5{
  font-size: var(--fs-h5);
  line-height: var(--lh-tight);
  font-weight: 700;
}

p{
  font-weight: 300;
  letter-spacing: var(--ls-4p);
  line-height: var(--lh-normal);
  color: var(--mopla-dark);
  margin-bottom: 1rem;
}

small,
.text-muted{
  color: var(--mopla-muted) !important;
}

/* Ajuste global de line-height en móviles */
@media (max-width: 768px){
  :root{
    --lh-normal: 1.5;
  }
}

/* =========================================================
   ENLACES
   ========================================================= */
a{
  text-decoration: none;
  color: var(--mopla-red);
}
a:hover{
  color: var(--mopla-red-700);
}

/* =========================================================
   COLORES / UTILITARIOS
   ========================================================= */
.text-white{        color: var(--mopla-white) !important; }
.text-mopla-navy{   color: var(--mopla-navy) !important; }
.text-mopla-red{    color: var(--mopla-red) !important; }
.text-mopla-muted{  color: var(--mopla-muted) !important;}
.bg-mopla-navy{
  background: var(--mopla-navy) !important;
  color: var(--mopla-white);
}
.bg-mopla-blue100{  background: var(--mopla-blue-100) !important; }
.bg-mopla-white{    background: var(--mopla-white) !important; }

/* =========================================================
   SOMBRAS / HELPERS
   ========================================================= */
.shadow-sm-mopla{ box-shadow: var(--mopla-shadow-sm); }
.shadow-25-mopla{ box-shadow: var(--mopla-shadow-25); }
.text-shadow-25{  text-shadow: var(--mopla-text-shadow); }
.rounded-mopla{   border-radius: var(--mopla-radius); }

.media-frame{
  border-radius: 24px;
  box-shadow: var(--mopla-shadow-sm);
  overflow: hidden;          /* redondea también la imagen interna */
}
.media-frame img{
  width: 100%;
    height: auto;       /* desktop tal cual la tienes */
  display: block;
}
/* Responsivo: abajo de iPad (≤ 768px) */
@media (max-width: 768px){

  .media-frame{
    max-height: 500px;  /* Limita el contenedor */
    overflow: hidden;  /* Recorta la imagen */
    display: flex;       /* Activa flexbox */
    align-items: center;
  }

  .media-frame img{
    width: 100%;
    height: auto;       /* NO tocamos height */
    object-fit: cover;  /* Permite recorte */
    object-position: center;
  }
}
/* =========================================================
   SOMBRA DE OBJETOS
   ========================================================= */

/* Sombra perfecta tipo Figma para objetos PNG */
.shadow-object{
  filter: drop-shadow(0 4px 7px rgba(0,0,0,0.25));
}
.shadow-object:hover{
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.30));
  transition: filter .2s ease;
}

/* =========================================================
   UTILITARIOS DE TITULOS
   ========================================================= */
.title-shadow{
  text-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* =========================================================
   BOTONES (skin sobre .btn de Bootstrap)
   ========================================================= */

/* CTA rojo */
.btn-mopla-primary{
  --bs-btn-bg:               var(--mopla-red);
  --bs-btn-border-color:     var(--mopla-red);
  --bs-btn-color:            var(--mopla-white);
  --bs-btn-hover-bg:         var(--mopla-red-700);
  --bs-btn-hover-border-color: var(--mopla-red-700);
  --bs-btn-active-bg:        var(--mopla-red-700);
  --bs-btn-active-border-color: var(--mopla-red-700);

  border-radius: var(--btn-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: var(--mopla-btn-shadow);
  line-height: 1;
  transition: transform .2s ease;
}

/* Botón claro */
.btn-mopla-secondary{
  --bs-btn-bg:               var(--mopla-white);
  --bs-btn-border-color:     var(--mopla-navy);
  --bs-btn-color:            var(--mopla-dark);
  --bs-btn-hover-bg:         #F0F3F7;
  --bs-btn-hover-border-color: var(--mopla-navy);

  border-radius: var(--btn-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: var(--mopla-btn-shadow);
  line-height: 1;
  transition: transform .2s ease;
}
.btn-mopla-wa{
  --bs-btn-bg:               rgb(25, 124, 25);
  --bs-btn-border-color:     var(--mopla-muted);
  --bs-btn-color:            var(--mopla-white);
  --bs-btn-hover-bg:         #F0F3F7;
  --bs-btn-hover-border-color: rgb(25, 124, 25);

  border-radius: var(--btn-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: var(--mopla-btn-shadow);
  line-height: 1;
  transition: transform .2s ease;
}
/* Ghost (para hero azul) */
.btn-mopla-ghost{
  --bs-btn-bg:               transparent;
  --bs-btn-border-color:     var(--mopla-white);
  --bs-btn-color:            var(--mopla-white);
  --bs-btn-hover-bg:         rgba(255,255,255,.12);
  --bs-btn-hover-border-color: var(--mopla-white);

  border-radius: var(--btn-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: var(--mopla-btn-shadow);
  line-height: 1;
  transition: transform .2s ease;
}

/* Hover y focus states */
.btn-mopla-primary:hover,
.btn-mopla-secondary:hover,
.btn-mopla-ghost:hover{
  transform: translateY(-1px);
}

.btn-mopla-primary:focus-visible,
.btn-mopla-secondary:focus-visible,
.btn-mopla-ghost:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(68,152,201,.35), var(--mopla-btn-shadow);
}

/* =========================================================
   FORMULARIOS
   ========================================================= */
.form-control{
  border-radius: 12px;
  font-size: 0.95rem;
}

/* =========================================================
   VARIANTES DE TITULO
   ========================================================= */
.h1-hero{
  color: var(--mopla-white);
  text-transform: uppercase;
  text-shadow: var(--mopla-text-shadow);
}

/* =========================================================
   HERO + NAVBAR INDEX
   ========================================================= */

/* Hero genérico (otros heroes solo cambian variables) */
.hero{
  --hero-img:    none;             /* url("...")   */
  --hero-color:  #074996;
  --hero-height: 800px;
  --hero-pos:    center;
  --hero-size:   cover;
  /* --hero-overlay: rgba(0,0,0,.40);  Overlay opcional si se activa ::before */

  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hero-height);
  overflow: hidden;
  padding-top: var(--nav-h);       /* espacio para el header */

  background-color: var(--hero-color);
  background-image: var(--hero-img);
  background-repeat: no-repeat;
  background-position: var(--hero-pos);
  background-size: var(--hero-size);
}

/* Hero home (imagen específica) */
.hero--home{
  --hero-img:    url("../img/hero-home-desktop.jpg");
  --hero-color:  var(--mopla-navy);
  --hero-height: 800px;
  --hero-pos:    center;
  --hero-size:   cover;
}

.hero--renta{
  --hero-img:    url("../img/hero-renta-desktop.jpg");
  --hero-color:  var(--mopla-navy);
  --hero-height: 800px;
  --hero-pos:    center;
  --hero-size:   cover;
}
.hero--venta{
  --hero-img:    url("../img/hero-venta-desktop.jpg");
  --hero-color:  var(--mopla-navy);
  --hero-height: 800px;
  --hero-pos:    center;
  --hero-size:   cover;
}
.hero--mopla{
  --hero-img:    url("../img/hero-mopla-desktop.jpg");
  --hero-color:  var(--mopla-navy);
  --hero-height: 800px;
  --hero-pos:    center;
  --hero-size:   cover;
}

/* Responsive hero */
@media (max-width: 768px){
  .hero{
    --hero-height: 600px;
    --hero-pos: center top;
    padding-top: var(--nav-h-sm);
  }
  /* Hero mobile específico (si existe archivo):
     .hero--home{ --hero-img: url("../img/hero-home-mobile.jpg"); } */
}

/* Navbar dentro del hero */
.custom-navbar{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;               /* por encima de la imagen */
  background: transparent;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.05em;
}

.custom-navbar .navbar-toggler{
  border-color: transparent;
}
.custom-navbar .navbar-toggler:active,
.custom-navbar .navbar-toggler:focus{
  box-shadow: none;
  outline: none;
}

.navbar__logo{
  /* puedes fijar altura aquí si lo necesitas */
   height: auto; 
}

.navbar__item{
  padding: 0 10px;
  text-shadow: 4px 4px 10px rgba(0,0,0,0.1);
}

.navbar__liga{
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-shadow: 4px 4px 14px rgba(0,0,0,0.35);
  opacity: 0.9;
  transition: 0.3s all ease;
  position: relative;
}

@media (min-width: 768px){
  .navbar__liga::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    background: var(--mopla-red);
    height: 3px;
    opacity: 1;
    visibility: visible;
    width: 0;
    transition: 0.15s all ease-out;
  }
}

.navbar__liga:hover{
  opacity: 1;
}
.navbar__liga:hover::before{
  width: calc(100% - 20px);
}

.logo-header{
  background-color: var(--mopla-red);
  border-radius: 0 0 24px 24px;
}

@media (max-width: 991.98px){
  .custom-navbar .navbar-collapse{
    background: linear-gradient(
      180deg,
      rgba(0,76,151,0.95) 0%,
      rgba(0,76,151,0.90) 60%,
      rgba(0,76,151,0.80) 100%
    );
    padding: 1.5rem 1.2rem 2rem;
  }
}

/* =========================================================
   CTA GROUP (reutilizable en hero y secciones)
   ========================================================= */
.cta-group{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 4rem;      /* aire suficiente bajo el texto */
}

@media (max-width: 576px){
  .cta-group{
    flex-direction: column;
    align-items: stretch;
    margin-top: 3rem;
  }

  .cta-group .btn{
    width: 100%;          /* full width en mobile */
  }

  .cta-group .btn-mopla-primary,
  .cta-group .btn-mopla-secondary,
  .cta-group .btn-mopla-ghost{
    --btn-padding-x: 16px;  /* antes 40px, más contenido en pantalla */
  }
}

/* =========================================================
   HOME · SECCIÓN “DESCUBRE…” 
   ========================================================= */

.section-discover{
  background: var(--mopla-bg);
}

.py-discover{
  padding-top: 180px;
  padding-bottom: 180px;
}

@media (max-width: 768px){
  .py-discover{
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

/* =========================================================
   HOME · SECCIÓN “EQUIPO PERFECTO”
   ========================================================= */

/* Padding vertical genérico para secciones grandes 
.section-pad-lg{
  padding-top: 160px;
  padding-bottom: 160px;
}

@media (max-width: 768px){
  .section-pad-lg{
    padding-top: 96px;
    padding-bottom: 96px;
  }
}*/

/* Ajustes específicos de la sección */
.section-equipo h2{
  margin-bottom: 0; /* el espacio viene de la row con mt-5 */
}

/* Cada item de equipo */
.equipment-item{
  text-align: center;
  margin-bottom: 2.5rem;
}

.equipment-item img{
  max-height: 160px;
  object-fit: contain;
}

/* Etiqueta debajo de cada equipo */
.equipment-label{
  margin-top: 1rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .1em;
  font-size: 0.9rem;
  color: var(--mopla-dark);
}

.equipment-item img:hover{
  transform: translateY(-3px);
  transition: transform .2s ease;
}

/* =========================================================
   HOME · SECCIÓN "TE ASESORAMOS GRATIS"
   ========================================================= */

.section-advisory{
  /* ya tiene bg-mopla-navy + section-pad-lg */
}

.section-advisory .advisory-lead{
  font-weight: 400;
  letter-spacing: var(--ls-4p);
   margin-bottom: 2rem;
}

.section-advisory h2{
  margin-bottom: 3rem;
  font-size: var(--fs-h1);
}

.section-advisory .advisory-subtitle{
  max-width: 640px;
  margin: 0 auto;
  font-size: var(--bs-body-font-size);
  opacity: .9;
}

.section-advisory p{
  color: var(--mopla-white);
}

.section-advisory .cta-group{
  margin-top: 3rem;   /* un poco menos aire que en secciones blancas */
}

/* =========================================================
   HOME · SECCIÓN "SOCIO EN TU OPERACIÓN"
   ========================================================= */

.section-socio{
  background: var(--mopla-bg);
}

.section-socio h2{
  max-width: 25ch;
  margin-bottom: 2.5rem;
}

/* Placeholder de imagen/video (el cuadrote gris del mockup) */
.socio-media-placeholder{
  background: #F3F4F8;
  border-radius: 24px;
  min-height: 260px;
  box-shadow: var(--mopla-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.socio-media-placeholder::before{
  content: "Imagen / video";
  color: var(--mopla-muted);
  font-size: 0.9rem;
}

/* Lista de beneficios */
.socio-list p{
  margin-bottom: 1.25rem;
  font-size: var(--bs-body-font-size);
  line-height: var(--lh-normal);
}

.socio-list p strong{
  display: block;
  font-weight: 700;
  color: var(--mopla-dark);
}

/* =========================================================
   PADDING DE SECCIONES
   ========================================================= */
.section-pad-md{
  padding-top: 96px;
  padding-bottom: 96px;
}

.section-pad-lg{
  padding-top: 160px;
  padding-bottom: 160px;
}

@media (max-width: 768px){
  .section-pad-md{
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .section-pad-lg{
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

/* =========================================================
   BANDA AZUL · "SABEMOS QUE NO PUEDES..."

.section-urgency h2{
  color: var(--mopla-white);
  margin-bottom: 1rem;
}

.urgency-subtitle{
  color: var(--mopla-white);
  opacity: .9;
  margin: 0;
}
   =========esta duplicada con banda azul de garantia================================================ */
/* =========================================================
   "ELLOS YA CONFÍAN EN NOSOTROS"
   ========================================================= */
.section-trust{
  background: var(--mopla-white);
}

.section-trust h2{
  margin-bottom: 1rem;
}

.trust-subtitle{
/*   max-width: 640px;
 */  margin: 0 auto 3rem;
  color: var(--mopla-dark);
}

/* Logos en círculo */

.trust-logos{
  display: flex;
  justify-content: center;     /* Centra horizontal */
  align-items: center;         /* Alinea vertical */
  flex-wrap: wrap;
  gap: 2.5rem;                 /* 🔥 Más espacio entre logos */
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.trust-logo{
  width: 120px;                /* 🔥 Un tamaño más pro */
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-logo img{
  max-width: 80%;              /* 🔥 Para que haya aire alrededor */
  max-height: 80%;
  object-fit: contain;         /* Evita deformaciones */
  /*filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));  sutil profesional */
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 576px){
  .trust-logo{
    width: 100px;
    height: 100px;
  }
  .trust-logo img{
    max-width: 70%;
    max-height: 70%;
  }
}
/* .trust-logos{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
} */

/* .trust-logo{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #D9D9D9;
  box-shadow: var(--mopla-shadow-sm); 
}*/

.policy-logo{
  font-size: 12px;
  opacity: 80%;
}
/* Cuando tengas logos reales, podrás hacer:
   .trust-logo img{ max-width: 70%; max-height: 70%; } */

@media (max-width: 576px){
  .trust-logo{
    width: 72px;
    height: 72px;
  }
}
/* =========================================================
   SECCIÓN DE CONTACTO (HOME)
   ========================================================= */

.section-contact{
  background: var(--mopla-blue-100);
}

/* Columna izquierda: textos e íconos */
.section-contact p{
  max-width: 600px;
  color: var(--mopla-dark);
}

/* Cada item: icono + texto */
.contact-list li{
  display: flex;
  align-items: flex-start;
}

.contact-list li + li{
  margin-top: 0.75rem;
}

.contact-list strong{
  display: block;
  font-weight: 700;
  color: var(--mopla-dark);
  margin-bottom: .15rem;
}

.contact-list a{
  color: var(--mopla-dark);
  text-decoration: none;
}

.contact-list a:hover{
  color: var(--mopla-red);
}

/* Iconos FontAwesome */
.contact-icon{
  font-size: 1rem;
  width: 20px;
  margin-right: 10px;
  margin-top: 0.25rem;  /* baja un poquito para centrar visualmente */
  color: var(--mopla-dark);
  opacity: .8;
}

/* Botón WhatsApp (estilo ghost claro) */
.section-contact .btn-mopla-secondary{
  padding-left: 24px;
  padding-right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Formulario */
.section-contact .form-control{
  border-radius: 14px;
  border: 1px solid #B8C4D4;
  padding: .75rem 1rem;
  font-size: 0.95rem;
  background: #FFFFFF;
}

.section-contact label{
  font-weight: 600;
  color: var(--mopla-muted);
  margin-bottom: .25rem;
}

/* Estado focus */
.section-contact .form-control:focus{
  border-color: var(--mopla-navy);
  box-shadow: 0 0 0 3px rgba(0, 76, 151,.20);
}

/* Botón de enviar */
.section-contact button[type="submit"]{
  margin-top: .75rem;
  min-width: 260px;
  box-shadow: var(--mopla-shadow-sm);
}

/* Responsive */
@media (max-width: 768px){
  .section-contact .btn-mopla-secondary{
    width: 100%;
    justify-content: center;
  }

  .section-contact button[type="submit"]{
    width: 100%;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  background: #14141B;           /* un poco más oscuro que --mopla-dark */
  color: var(--mopla-white);
  padding-top: 64px;
  padding-bottom: 32px;
  font-size: 0.9rem;
}

.site-footer__logo{
  max-width: 220px;
}

.site-footer__nav li + li{
  margin-top: .35rem;
}

.site-footer__link{
  color: #E5E7EB;
  text-decoration: none;
}

.site-footer__link:hover{
  color: var(--mopla-red);
}

/* Contacto */
.site-footer__contact{
  margin: 0;
}

.site-footer__icon{
  width: 20px;
  text-align: center;
  margin-right: 10px;
  color: #E5E7EB;
}

.site-footer__contact li{
  display: flex;
  align-items: flex-start;
}

.site-footer__text{
  color: #E5E7EB;
}

/* Botón WhatsApp en footer */
.site-footer__btn-wa{
  margin-top: .5rem;
  padding-left: 28px;
  padding-right: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Social icons */
.site-footer__social{
  color: #E5E7EB;
  margin: 0 .6rem;
  font-size: 1.1rem;
}

.site-footer__social:hover{
  color: var(--mopla-red);
}

/* Texto inferior */
.site-footer__copy{
  color: #9CA3AF;
}

.site-footer__bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 20px;
  margin-top: 40px;
}

/* Responsive */
@media (max-width: 768px){
  .site-footer{
    text-align: left;
    padding-top: 48px;
  }

  .site-footer__logo{
    margin-bottom: 1rem;
  }

  .site-footer__bottom{
    text-align: center;
  }

  .site-footer__bottom .col-md-4{
    margin-bottom: .5rem;
  }
}

/* Sección “Por qué rentar” */
.section-renta{
  background: var(--mopla-bg);
}

.section-renta h2{
  max-width: 20ch;
}

.renta-media{
  background: #F3F4F8;
  border-radius: 24px;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.renta-media::before{
  content: "Imagen aquí";
  color: var(--mopla-muted);
  font-size: .9rem;
}

/* Responsivo */
@media(max-width: 768px){
  .renta-media{
    min-height: 200px;
  }
}

/* =========================================================
   RENTA · SECCIÓN "RENTAR vs COMPRAR"
   ========================================================= */

.section-rent-vs{
  /* ya trae bg-mopla-blue100 + section-pad-lg */
}

/* Eyebrow arriba del título */
.section-rent-vs .section-eyebrow{
  font-size: 0.85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mopla-muted);
  margin-bottom: .5rem;
}

/* Título principal */
.section-rent-vs h2{
  margin-bottom: 2.5rem;
}

/* Subtítulos "Rentar" y "Comprar" */
.section-rent-vs .rentvs-title{
  text-transform: none;          /* anulamos el uppercase global del h3 */
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Tarjetas blancas */
.rentvs-card{
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: var(--mopla-shadow-sm);
  padding: 2rem 2.5rem;
  max-width: 440px;
  margin: 0 auto;                /* centrado dentro de la columna */
  text-align: left;
}

/* Lista de bullets con check */
.rentvs-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.rentvs-list li{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--bs-body-font-size);
  line-height: var(--lh-normal);
  margin-bottom: 0.9rem;
}

.rentvs-list li:last-child{
  margin-bottom: 0;
}

/* Icono de check */
.rentvs-list i{
  font-size: 0.9rem;
  margin-top: .2rem;              /* lo bajamos un poquito para centrar ópticamente */
  color: #10B981;                 /* verde tipo "success" moderno */
}
/* Icono de check */
.rentvs-list--muted i{
  color: var(--mopla-muted);
}

/* Responsive tweaks */
@media (max-width: 768px){
  .section-rent-vs h2{
    margin-bottom: 2rem;
  }

  .rentvs-card{
    padding: 1.5rem 1.5rem;
  }
}

/* =========================================================
   RENTA · "QUÉ INCLUYE NUESTRA RENTA"
   ========================================================= */

.section-incluye{
  background: var(--mopla-bg);
}

.section-incluye h2{
  margin-bottom: 3rem;
}

/* Lista de beneficios: texto suelto (sin bullets visibles de HTML) */
.incluye-list li{
  margin-bottom: 0.9rem;
  font-size: var(--bs-body-font-size);
  line-height: var(--lh-normal);
  color: var(--mopla-dark);
  position: relative;
  padding-left: 0; /* por si acaso */
}

/* Si quieres un bullet sutil tipo punto verde, descomenta esto:*/
.incluye-list li::before{
  content: "•";
  position: absolute;
  left: -1rem;
  top: 0;
  color: var(--mopla-red);
  font-size: 1.1em;
}


/* Tarjeta gris de la derecha (imagen / video) */
.incluye-media{
  background: #F3F4F8;
  border-radius: 28px;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.incluye-media__placeholder{
  color: var(--mopla-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* Ajuste del CTA de esta sección */
.cta-group--incluye{
  margin-top: 4rem;
}

@media (max-width: 768px){
  .section-incluye h2{
    text-align: left;
  }

  .incluye-media{
    min-height: 220px;
    margin-top: 1rem;
  }

  .cta-group--incluye{
    margin-top: 3rem;
  }
}

.easy-media-placeholder{
  background: #EEF2F6;
  border-radius: 24px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mopla-shadow-sm);
}

.easy-media-placeholder::before{
  content: "\f03e"; /* icono imagen */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 2.5rem;
  color: #9BA8B8;
}


/* íconos de los pasos */
.easy-step .easy-icon{
  width: 64px;
  height: 64px;
  min-width: 64px;
  /* border-radius: 16px;
  background: #DDE3EB; */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.25rem;
  /* box-shadow: var(--mopla-shadow-sm); */
}

.easy-step .easy-icon i{
  font-size: 1.6rem;
  color: var(--mopla-navy);
  opacity: 0.9;
}

.easy-step h4{
  font-weight: 700;
  color: var(--mopla-dark);
}

.easy-step p{
  margin: 0;
  opacity: 0.9;
}

/* Banda azul de garantía (home + renta) */
.section-urgency h2{
  color: var(--mopla-white);
  margin-bottom: 1rem;
}

.urgency-subtitle{
  color: var(--mopla-white);
  opacity: .9;
  margin: 0;
}

/* Un poco menos aire que el hero, pero con buen respiro */
.section-urgency .cta-group{
  margin-top: 2.5rem;
}


/* SEMINUEVOS — lista con checks verdes */
.list-seminuevos{
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-seminuevos li{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--bs-body-font-size);
  line-height: var(--lh-normal);
  margin-bottom: 0.9rem;
  color: var(--mopla-dark);
}

.list-seminuevos i{
  font-size: 0.9rem;
  margin-top: .25rem;
  color: #10B981; /* verde moderno */
}


.why-list li{
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1rem;
  font-size: var(--bs-body-font-size);
  line-height: var(--lh-normal);
  color: var(--mopla-dark);
}

.bullet-icon{
  font-size: 1rem;
  color: #10B981; /* mismo verde que RENTAR vs COMPRAR */
  margin-top: .25rem;
  flex-shrink: 0;
}

/* =========================================================
   POR QUÉ MOPLA · HERO
   ========================================================= */


/* Tarjeta gris del mockup (lado derecho) */
.hero-media-placeholder{
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(2px);
  border-radius: 28px;
  min-height: 260px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--mopla-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media-placeholder::before{
  content: "\f03e"; /* icono de imagen */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 2.5rem;
  color: rgba(255,255,255,0.65);
}

/* Alineamos CTAs a la izquierda en desktop */
.cta-group--mopla{
  justify-content: flex-start;
}

/* En móviles la tarjeta desaparece y se centra el contenido */
@media (max-width: 767.98px){
  .hero-media-placeholder{
    display: none;
  }
  .cta-group--mopla{
    justify-content: center;
  }
}

/* Contenedores de placeholder */
.placeholder-box {
  width: 100%;
  height: 220px;
  background: #EEF2F7;
  border-radius: 20px;
}

.placeholder-box-sm {
  flex: 1;
  height: 140px;
  background: #EEF2F7;
  border-radius: 20px;
}

.placeholder-row {
  display: flex;
}


.placeholder-box img,
.placeholder-box-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 🔥 La imagen llena el marco sin deformarse */
  object-position: center; /* Centrado del recorte */
  border-radius: 20px;     /* opcional – por si quieres reforzarlo */
}

/* LISTA CON CHECKS */
.respaldo-list p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 1.2rem;
  font-size: 1rem;
  line-height: 1.6;
}

.check-icon {
  color: #22C55E;
  font-size: 1.2rem;
  margin-top: 4px;
}

/* =========================================================
   POR QUÉ MOPLA · MARCAS CONFIABLES
   ========================================================= */

.section-brands h2{
  max-width: 24ch;
}

.section-brands p{
  max-width: 520px;
}

/* Fila de logos rectangulares */
.brands-logos{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 3rem;
  margin-top: 2.5rem;
}

/* Cada logo (rectángulo con esquinas suaves) */
.brand-logo{
  width: 112px;
  height: 88px;
  border-radius: 20px;
  background: #E5EBF3;
  box-shadow: var(--mopla-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Placeholder de ícono hasta que pongas los logos reales */
.brand-logo::before{
  content: "\f03e"; /* icono de imagen */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.5rem;
  color: #9BA8B8;
}

@media (max-width: 768px){
  .section-brands h2{
    max-width: none;
  }

  .brands-logos{
    justify-content: flex-start;
  }
}

/* =========================================================
   POR QUÉ MOPLA · BANDA AZUL "RESPALDO COMPROBADO"
   ========================================================= */

.section-proof h2{
  font-size: var(--fs-h1);
  text-transform: uppercase;
}

.proof-subtitle{
  max-width: 620px;

  color: var(--mopla-white);

}

.proof-video-wrapper{
  max-width: 920px; /* Controla el ancho del video */
}

.proof-video-frame{
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--mopla-shadow-lg);
}


/*  PARA TODOS LISTA EQUIPOS */


.equipment-item{
  cursor: pointer;
}
.equipment-item:focus{
  outline: 3px solid rgba(0,76,151,.25);
  outline-offset: 6px;
  border-radius: 12px;
}

.modal-inline-cta{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .35rem;
  font-weight: 700;
  color: var(--mopla-red);
  text-decoration: none;
  text-underline-offset: 3px;
}

.modal-inline-cta::after{
  content: "\f061"; /* fa-arrow-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .9em;
}

.modal-inline-cta:hover{
  color: var(--mopla-red-700);
}



/* // animaciones */

@keyframes appear {
  from{
    opacity: 0;
    scale: 0.5;
  }
  to{
    opacity: 1;
    scale: 1;
  }
  
}
@keyframes appear_moveLeft {
  from{
    opacity: 0;
    transform: translateX(-200px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
  
}
@keyframes appear_moveRight {
  from{
    opacity: 0;
    transform: translateX(200px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
  
}

/* // entrada automatica izquierda-derecha */
.block__animated--1{
  animation: appear_moveLeft 0.5s linear;
  
}
/* //entrada automatica derecha-izquierda */
.block__animated--2{
  animation: appear_moveRight 0.5s linear;
 
}
/* // aparece en scroll de chico a grande */
.block__animated--3{
  animation: appear 5s linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
/* // entra en scroll de izq a derecha */
.block__animated--4{
  animation: appear_moveLeft 1s linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
/* // entra en scroll de derecha a izq */
.block__animated--5{
  animation: appear_moveRight 1s linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
/* // entra automatica de chico a grande */
.block__animated--6{
  animation: appear 1s linear;

}
.animated__atras--1{
  animation-delay: 0.2;
}
.animated__atras--2{
  animation-delay: 0.4;
}
.animated__atras--3{
  animation-delay: 0.6;
}