:root{
    --red:#C8102E;
    --red-dark:#8B0000;
    --black:#111111;
    --gray:#333333;
    --gray-100:#F5F5F5;
    --whatsapp:#25D366;
  }
  /* Fuente global */
body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Normal para textos */
    line-height: 1.6;
    color: #222; /* opcional: mejora la lectura */
  }

  @media (max-width: 767px) {
    #mision-vision h2,
    #mision-vision h4,
    #mision-vision p {
      text-align: center;
    }
  }
  
  /* ===== MAPA ===== */
.map-container {
    position: relative;
    width: 100%;
    max-width: 1000px;   /* ancho máximo para que no se vea gigante en desktop */
    margin: 0 auto;      /* centra el mapa */
  }
  
  .map-container iframe {
    width: 100%;
    height: 350px;
    border: 0;
    border-radius: 16px;     /* esquinas redondeadas muy redondeadas*/
    box-shadow: 0 8px 24px rgba(0,0,0,.15); /* sombra elegante */
    transition: transform .3s ease, box-shadow .3s ease;
  }
  
  .map-container iframe:hover {
    transform: scale(1.01);  /* ligero zoom al pasar encima */
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
  }

  .text-red {
    color: var(--red);   /* usa tu variable de color rojo corporativo */
    font-weight: 700;    /* opcional: un poco más grueso */
  }
  
  
  .map-container a {
    display: inline-block;
    margin-top: 12px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--red);
    text-decoration: none;
  }
  
  .map-container a:hover {
    text-decoration: underline;
    color: var(--red-dark);
  }
  
  
  /* HERO */
  /* ===== HERO con parallax de profundidad ===== */
.hero{
    position: relative;
    min-height: 100vh;
    color: #fff;
    overflow: hidden; /* evita que se vean bordes del bg al moverse */
  }
  
  /* Capa de fondo que se mueve más lento que el scroll */
  .hero__bg{
    position: absolute;
    /* inset vertical extendido para que no se vean bordes al mover */
    top: -12%;
    right: 0;
    bottom: -12%;
    left: 0;
    background: url("../img/hero-constructora.png") center/cover no-repeat;
    transform: translateY(0);
    will-change: transform;
    z-index: 0;
  }
  
  /* Overlay oscuro para mejorar legibilidad */
  .hero__overlay{
    position: absolute; inset: 0;
    background: rgba(255, 255, 255, 0.35); /* ajusta 0.30–0.45 según tu foto */
    z-index: 1;
  }
  
  /* Contenido por encima */
  .z-1{ z-index: 2; position: relative; }
  
  /* Logo del hero */
  .hero__logo{
    display: block;
    margin-inline: auto;   /* centra horizontal */
    width: 100%;
    max-width: 560px;      /* límite en desktop */
    height: auto;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
  }
  
  
  /* Secciones */
  .section{ padding: 64px 0; color: var(--gray); background:#fff; }
  .section-alt{ background: var(--gray-100); }
  .section-title{ color: var(--red); margin-bottom: 16px; }
  
  /* Botones / redes */
  .btn-red{
    background: var(--red); color:#fff; border:none;
  }
  .btn-red:hover{ background: var(--red-dark); color:#fff; }
  .social-btn{
    width:44px; height:44px; border-radius:50%; background:#fff; display:inline-flex;
    align-items:center; justify-content:center; color:var(--red); text-decoration:none;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
  }
  .social-btn:hover{ background: var(--red); color:#fff; }
  .hero__text p{
    font-weight: 500;   /* más gruesa */
  }
  
  
  /* ===== Servicios (estilo tarjetas como el ejemplo, en rojo) ===== */
.section-servicios{ background: #fff; }

.svc-card{
  text-align: center;                /* centra texto e inline elements */
  background:#fff;
  border: 1px solid #eeeeee;
  border-radius:16px;
  padding:22px 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.04);
  height:100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
  border-color:#e6e6e6;
}

.hero__text{
    margin-top: 24px;
    max-width: 700px;
    color:#111; /* o #f5f5f5 si quieres más contraste */
    text-align: center;
    line-height: 1.7;
  }
  
.svc-icon{
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#F5F5F5; color: var(--red); font-size:22px;
  margin-bottom:10px;
}
.svc-title{ font-size:1.05rem; font-weight:700; color:#1f1f1f; margin-bottom:6px; }
.svc-text{ color:#636363; margin:0; }


/* Centrar contenido en tarjetas de Servicios */
.svc-card{
    text-align: center;                /* centra el texto */
    display: flex;                     /* activa flexbox */
    flex-direction: column;            /* apila verticalmente */
    align-items: center;               /* centra en horizontal */
    justify-content: center;           /* centra en vertical */
  }
  
  /* Asegura que las imágenes/íconos también estén centrados */
  .svc-card img,
  .svc-card .svc-icon{
    margin: 0 auto 12px auto;          /* centra horizontalmente */
    display: block;
  }
  
/* Tarjeta destacada en rojo (gradiente) */
.svc-card--accent{
  background: linear-gradient(145deg, var(--red) 0%, #a20d22 100%);
  border:none;
  box-shadow: 0 14px 30px rgba(200,16,46,.25);
  color:#fff;
}
.svc-card--accent:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(200,16,46,.35);
}
.svc-icon--invert{ background: rgba(255,255,255,.15); color:#fff; }
.svc-title--invert{ color:#fff; }
.svc-text--invert{ color:#fff; opacity:.95; }

/* Separación en desktop como las capturas */
@media (min-width: 992px){
  .section-servicios .row > [class*="col-"]{
    padding-top: .6rem;
    padding-bottom: .6rem;
  }
}

/* Separador sutil dentro del bloque rojo */
.mv-divider{
    border: 0;
    height: 1px;
    background: rgba(255,255,255,.25);
  }
  
  /* Texto e íconos del bloque de servicios en #mision-vision */
  #mision-vision span{ color: rgba(255,255,255,.92); font-weight:600; }
  
/* ===== Nuestros Desarrollos ===== */
#desarrollos{
    background: linear-gradient(135deg, var(--red) 0%, #a20d22 100%);
    color: #fff;
    padding: 64px 0;
  }
  
  #desarrollos .section-title{
    color: #fff;
    font-weight: 800;
  }
  
  #desarrollos p{
    color: rgba(255,255,255,.9);
  }
  
  /* Tarjeta clicable sin fondo ni sombra (no deja halo) */
.dev-card{
    display:block;
    background: transparent;   /* <- sin marco */
    padding: 0;                 /* el padding lo hace el inner */
    text-decoration:none;
    box-shadow: none;
    transition: none;
  }
  .dev-card:hover{ transform:none; box-shadow:none; background:transparent; }
  
  
  /* Logo dentro de la tarjeta */
  .dev-card__logo{
    max-width: 220px;
    height: auto;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.3));
  }
  
  
  /* Tarjetas de desarrollos (clic completo) */
  .dev-card__inner{
    border:1px solid #e9e9e9;
    border-radius:16px;
    background:#fff;
    padding:32px;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 20px rgba(0,0,0,.05);
    transition:.25s ease;
    min-height: 180px;
  }
  
  /* Hover aplicado al inner cuando pasas por la tarjeta completa */
  .dev-card:hover .dev-card__inner{
    transform: translateY(-4px);
    border-color: var(--red);
    box-shadow:0 16px 28px rgba(200,16,46,.15);
  }
  
  .dev-card__inner:hover{ transform: translateY(-4px); border-color: var(--red); box-shadow:0 16px 28px rgba(200,16,46,.15); }
  .dev-card__logo{ max-width: 80%; height:auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); }

  
  /* Footer */
  .footer{ background: var(--black); }
  
  /* WhatsApp flotante */
  .wa-float{
    position: fixed; right: 16px; bottom: 16px; width:56px; height:56px; border-radius:50%;
    background: var(--whatsapp); color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:26px; box-shadow:0 10px 20px rgba(0,0,0,.2); z-index:1030;
  }
  .wa-float:hover{ filter: brightness(0.95); }
  
  /* Utilidades */
  .lead{ font-size:1.05rem; }
  

  /* ===== Contacto ===== */
.btn-whatsapp{
    background: var(--whatsapp);
    color:#fff;
    border:none;
    box-shadow:0 8px 18px rgba(37,211,102,.25);
  }
  .btn-whatsapp:hover{ filter:brightness(.95); color:#fff; }
  
  .contact-card{
    background:#fff;
    border:1px solid #eaeaea;
    border-radius:16px;
    box-shadow:0 14px 28px rgba(0,0,0,.06);
    max-width: 820px;
    padding: 24px;
  }
  
  .contact-item{
    display:flex;
    gap:14px;
    padding:14px 6px;
    border-bottom:1px dashed #e9e9e9;
  }
  .contact-item:last-child{ border-bottom:none; }
  
  .contact-icon{
    flex:0 0 44px;
    height:44px; width:44px;
    border-radius:12px;
    background:#F5F5F5;
    color: var(--red);
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
  }
  
  .contact-text .label{
    display:block;
    color:#777;
    letter-spacing:.2px;
  }
  .contact-text a, .contact-text span{
    font-weight:600; color: var(--gray);
    text-decoration:none;
  }
  .contact-text a:hover{ color: var(--red); }
  
  .contact-social{
    display:flex; justify-content:center; gap:10px;
    margin-top: 16px;
  }

  /* ===== QUIÉNES SOMOS ===== */
.section-quienes{
    background:#fff;
    overflow:hidden;
  }
  
  .section-quienes p{
    font-size: 1.25rem;   /* más grande */
    font-weight: 600;     /* más grueso */
    color: #222;          /* un poquito más fuerte que gris */
    line-height: 1.8;     /* más aireado */
  }  
  
  .quienes-img{
    position:relative;
    height:100%;
    min-height:300px;
  }
  
  .quienes-img img{
    object-fit:cover;
    width:100%;
    height:100%;
    display:block;
  }
  
  /* Difuminado (gradient overlay) */
  .quienes-overlay{
    position:absolute;
    top:0; left:0; bottom:0; right:0;
    background:linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 40%);
  }

  

  /* Espaciado controlado para el texto de "Quiénes somos" */
.section-quienes .quienes-content{
    padding: 32px 20px;              /* móvil */
  }
  
  @media (min-width: 992px){
    .section-quienes .quienes-content{
      padding: 64px 48px 64px 96px;  /* top right bottom left */
    }
  }
  
  /* Ancho máximo del bloque de texto y centrado visual en su columna */
  .section-quienes .quienes-quote{
    max-width: 760px;   /* evita líneas demasiado largas */
    margin: 0;          /* si pusiste antes margin:0, se respeta */
  }
  
  
  /* En pantallas pequeñas (móvil) */
  @media (max-width: 767px){
    .quienes-quote{
      font-size: 1rem;   /* más pequeña en móvil */
      font-weight: 500;  /* un poco más ligera */
      line-height: 1.6;
    }
  }
  
  /* ===== Misión + Visión (fondo rojo con diagonales, sin tarjetas) ===== */
.mv-section{
    position: relative;
    padding: 64px 0;
    background: linear-gradient(135deg, var(--red) 0%, #a20d22 100%);
    color: #fff;
    overflow: hidden;
  }
  
  #mision-vision .col-lg-6{
    border-radius: 12px;
    padding: 24px;
  }
  #mision-vision h2, 
  #mision-vision h4, 
  #mision-vision p{
    color: #fff;
  }

  /* Fondo rojo para Misión y Visión */
#mision-vision {
    background: linear-gradient(135deg, var(--red) 0%, #880000 100%);
    color: #fff;
    padding: 64px 0;
  }
  
  #mision-vision h2,
  #mision-vision h4 {
    color: #fff;
    font-weight: 700;
  }
  
  #mision-vision p {
    color: rgba(255,255,255,0.9);
  }
  
  
  
  /* Contenido por encima de las diagonales */
  .mv-section .container{ position: relative; z-index: 1; }
  
  /* Icono circular translucido */
  .mv-icon{
    width: 56px; height: 56px; border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,.18);
    color:#fff; font-size: 28px;
    margin-bottom: 10px;
  }
  
  /* Títulos y texto */
  .mv-title{
    color:#fff;
    font-weight: 800;
    letter-spacing: .2px;
    margin-bottom: 8px;
  }
  .mv-text{
    color: rgba(255,255,255,.92);
    line-height: 1.8;
    margin: 0;
    font-size: 1.05rem;
  }
  
  /* Ajustes responsive */
  @media (max-width: 991.98px){
    .mv-section{ padding: 48px 0; }
    .mv-text{ font-size: 1rem; line-height: 1.7; }
    .mv-icon{ width: 52px; height: 52px; font-size: 26px; }
  }
  


  /* STYLES PARA INDEX */
  /* STYLES PARA INDEX */
  /* STYLES PARA INDEX */
  /* STYLES PARA lacuenca */
  /* STYLES PARA lacuenca */

  /* Miniaturas parejas */
.gallery-img{
    width:100%;
    height:220px;          /* ajusta a tu gusto */
    object-fit:cover;
    border-radius:8px;
    cursor: zoom-in;
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .gallery-img:hover{
    transform:scale(1.05);
    box-shadow:0 8px 20px rgba(0,0,0,.2);
  }
  
  /* Lightbox */
  .lightbox{
    display:none;
    position:fixed;
    inset:0;               /* top:0 right:0 bottom:0 left:0 */
    background:rgba(0,0,0,.8);
    z-index:2000;
    align-items:center;
    justify-content:center;
    padding:24px;
  }
  .lightbox-content{
    max-width:90%;
    max-height:80%;
    border-radius:8px;
    box-shadow:0 8px 20px rgba(0,0,0,.5);
    animation:zoomIn .25s ease;
  }
  .lightbox .close{
    position:absolute;
    top:16px; right:24px;
    color:#fff;
    font-size:36px;
    font-weight:700;
    cursor:pointer;
    line-height:1;
  }
  @keyframes zoomIn{
    from{ transform:scale(.85); opacity:0; }
    to{ transform:scale(1); opacity:1; }
  }

  
  /* HERO La Cuenca */
  .dev-hero {
    position: relative;
    min-height: 64vh;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Fondo */
    background: url('../img/fondolacuenca.png') center/cover no-repeat;

    /* fallback */
    background-color: #0f0f0f;

    /* 👇 necesario para que JS pueda manipular el fondo */
    background-attachment: scroll;
    background-position-y: 0;
}

  
  
  /* Overlay para legibilidad */
  .dev-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.35),
      rgba(0,0,0,.45)
    );
  }
  
  /* Contenido encima del overlay */
  .dev-hero__inner{ position: relative; z-index: 1; }
  
  .dev-hero__logo{
    max-width: 320px;
    height: auto;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
  }
  
  /* Botón “Volver a RED” en claro para contraste */
  .dev-hero .btn-outline-light{
    border-color: rgba(255,255,255,.8);
    color: #fff;
  }
  .dev-hero .btn-outline-light:hover{
    background: rgba(255,255,255,.15);
    color: #fff;
  }
  
  /* Responsive */
  @media (max-width: 768px){
    .dev-hero{ min-height: 56vh; }
    .dev-hero__logo{ max-width: 240px; }
  }
  
  .dev-hero{ background-attachment: fixed; }
@media (max-width: 1024px){ .dev-hero{ background-attachment: scroll; } }

@media (max-width: 768px){
    .dev-hero{ background-image: url('../img/fondolacuenca.png'); }
  }
  
  /* Altura cómoda para el visor dentro del modal */
.pdf-embed{
    width: 100%;
    height: 80vh;
    border: 0;
  }
  

  /* ===== Sección Ubicación ===== */
.section-ubicacion {
  background: var(--red); /* rojo corporativo */
  color: #fff;
}

.section-ubicacion p {
  color: #fff;
}

.section-ubicacion .map-container iframe {
  box-shadow: 0 8px 24px rgba(0,0,0,.25); /* un poco de relieve */
}

/* ===== Sección Avances de obra ===== */
.section-avances {
  background: var(--gray);  /* gris definido en :root (#333333) */
  color: #fff;
}

.section-avances p {
  color: rgba(255,255,255,0.85); /* un blanco suavizado para el párrafo */
}

.section-avances .gallery-img {
  border: 2px solid rgba(255,255,255,0.08); /* marco sutil */
}




/* (NO USAR) Bloquea scroll horizontal accidental en toda la página */
/* este es el pinche desgraciado puto problema de bloqueo de scroll */

html, body { 
  overflow-x: hidden;
}


/* Mantén estable el gutter del scrollbar (mejor que overflow-y:scroll) */

html {
  overflow-y: auto;          /* o scroll si prefieres siempre visible, IMPORTANTE, quita seccion blanca del movil */
  scrollbar-gutter: stable;  /* <-- sin both-edges */
}

/* Iframes e imágenes no deben empujar el ancho */
img, iframe { 
  display: block;          /* quita el espacio inline fantasma */
  max-width: 100%;
}

/* (NO USAR) overflow-x en .container/.container-fluid — eso crea scroll interno */
/* PROBLEMA de scroll en cada contenedor al cargar por primera vez */
/*
.container, .container-fluid { 
  overflow-x: hidden;
}
*/

/* El mapa a veces genera sub-píxeles: encierra overflow */

.map-container { 
  overflow: hidden;
  border-radius: 16px;
}


/* El hero no debe dejar escapar nada en los bordes */
/*Este bloque es el que genera los scroll de cada contenedor, comentandolo se quita eso*/

.hero, .dev-hero { 
  overflow: hidden;
}


/* --- HERO de desarrollos: centrado y tamaño estable --- */
.dev-hero {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-hero__inner{
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;   /* centra logo y botones */
  justify-content: center;
  width: 100%;
  padding: 24px 16px;
}

/* Logo: bloque, centrado y tamaño estable (sin vw/%) */
.dev-hero__logo{
  display: block;
  margin-inline: auto;
  width: 100%;
  max-width: 420px;      /* desktop */
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
  float: none !important;
}

@media (max-width: 768px){
  .dev-hero__logo{ max-width: 260px; }
}

/* Evita que alguna regla lo vuelva inline */
.dev-hero__inner img { display: block !important; }

/* (Quitado) No forzar overflow en .dev-hero: se mantiene hidden arriba */
/* .dev-hero, .dev-hero__inner { overflow: visible; } */

/*El bug problematico del scroll bloqueable y los scrolles de cada conteendor eran un problema de pelea de recursos entre AOS y tal vez bootstrap, se soluciono quitando las animaciones AOS*/


.dev-card__inner {
  min-height: 260px;              /* altura mínima pareja */
  display: flex;
  flex-direction: column;         /* apila logo arriba y botón abajo */
  align-items: center;            /* centra todo horizontal */
  justify-content: flex-start;    /* logo arriba */
  padding: 32px;
}

.dev-card__logo {
  max-width: 220px;
  height: auto;
  margin-bottom: 20px;
}

.dev-card__inner .btn {
  margin-top: auto;               /* empuja el botón hacia abajo */
}