*{box-sizing:border-box}

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    color:#082e67;
    background:#fff;
}

a{
    color:inherit;
    text-decoration:none;
}

/* =====================================================
   ANCHO GENERAL
   ===================================================== */

.wrap{
    max-width:1180px;
    margin:auto;
    padding:0 28px;
}

/* =====================================================
   CABECERA
   ===================================================== */

.top{
    max-width:1180px;
    margin:0 auto;
    height:100px;
    padding:0 28px;
    display:flex;
    align-items:center;
    gap:30px;
    background:#fff;
}

.logo{
    width:285px;
    max-width:285px;
    max-height:82px;
    object-fit:contain;
}

.tag{
    padding-left:28px;
    border-left:1px solid #b9c4d2;
    font-size:16px;
    line-height:1.25;
}

.nav{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:32px;
    font-size:13px;
}

.nav a.active{
    border-bottom:3px solid #84c62a;
    padding-bottom:10px;
}

/* Teléfono deliberadamente secundario */
.phone{
    font-size:9px !important;
    font-weight:500 !important;
    opacity:.58;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:3px;
    line-height:1;
}

.phone::before{
    font-size:8px !important;
}

/* =====================================================
   BANNERS / FOTOGRAFÍAS PRINCIPALES
   MISMO ANCHO QUE CABECERA
   ===================================================== */

.hero{
    width:calc(100% - 56px);
    max-width:1180px;
    margin:0 auto;

    min-height:520px;
    background-size:cover;
    background-position:center;

    display:flex;
    align-items:flex-end;
    position:relative;
    overflow:hidden;
}

.hero:after{
    content:"";
    position:absolute;
    inset:42% 0 0;
    background:linear-gradient(
        transparent,
        rgba(0,40,80,.84)
    );
}

.heroText{
    position:relative;
    z-index:1;
    color:#fff;
    padding-left:55px;
    padding-right:55px;
    padding-bottom:54px;
}

.hero h1{
    font-size:50px;
    margin:0 0 8px;
}

.hero .accent{
    color:#83c52a;
}

.hero p{
    font-size:22px;
    margin:0;
    max-width:650px;
}

/* =====================================================
   CONTENIDO
   ===================================================== */

.section{
    padding:58px 0;
}

.kicker{
    letter-spacing:5px;
    font-size:13px;
}

.greenline{
    width:44px;
    height:4px;
    background:#80c42b;
    margin-bottom:14px;
}

.big{
    font-size:38px;
    line-height:1.08;
    margin:10px 0 16px;
}

.copy{
    font-size:18px;
    line-height:1.45;
    color:#395d8a;
}

/* =====================================================
   CARACTERÍSTICAS
   ===================================================== */

.features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    margin-top:38px;
}

.feature{
    text-align:center;
    padding:12px 34px;
    border-right:1px solid #ccd5df;
}

.feature:last-child{
    border:0;
}

.feature b{
    font-size:19px;
}

/* =====================================================
   CTA
   ===================================================== */

.cta{
    background:#f0f6fc;
    padding:30px 0;
}

.cta .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.btn{
    background:#00346e;
    color:#fff;
    padding:18px 55px;
    display:inline-block;
}

/* =====================================================
   QUIÉNES SOMOS
   ===================================================== */

.aboutgrid{
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:55px;
}

/* Se conserva por compatibilidad,
   aunque Nuestra Historia ya no se utiliza */
.timeline{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    text-align:center;
    margin:35px 0;
}

.dot{
    width:17px;
    height:17px;
    border:4px solid #fff;
    background:#7fc429;
    border-radius:50%;
    box-shadow:0 0 0 1px #7fc429;
    margin:0 auto 10px;
}

.commercial-block{
    margin-top:34px;
}

.values-block{
    padding-top:42px;
}

.values-features{
    margin-top:24px;
}

/* =====================================================
   GALERÍA
   ===================================================== */

.gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.gallery img{
    width:100%;
    height:190px;
    object-fit:cover;
}

.gallery div{
    text-align:center;
}

/* =====================================================
   CONTACTO
   ===================================================== */

.contactgrid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:50px;
}

.formbox{
    background:#f5f8fc;
    padding:30px;
}

.formbox input,
.formbox textarea{
    width:100%;
    padding:15px;
    margin:7px 0;
    border:1px solid #cbd6e4;
    background:white;
}

.formbox textarea{
    height:160px;
}

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

.footer{
    border-top:1px solid #ccd6e2;
    padding:22px 0;
}

.footer .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.footer img{
    width:125px;
    max-height:55px;
    object-fit:contain;
}

/* =====================================================
   ADMINISTRADOR
   ===================================================== */

.adminbox{
    max-width:950px;
    margin:40px auto;
    padding:25px;
}

.adminbox label{
    display:block;
    font-weight:bold;
    margin-top:16px;
}

.adminbox input,
.adminbox textarea{
    width:100%;
    padding:11px;
    margin-top:5px;
}

.adminbox textarea{
    height:110px;
}

.notice{
    background:#eaf6dd;
    padding:12px;
    margin:12px 0;
}

.adminnav{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

/* =====================================================
   COMPUTADOR
   ===================================================== */

@media (min-width:761px){

    /*
       La fotografía queda exactamente contenida
       dentro del ancho corporativo.
    */
    .hero{
        max-width:1180px;
        width:calc(100% - 56px);
    }

    /* Logo más visible sin agrandar demasiado la barra */
    .logo{
        width:285px;
        max-height:82px;
    }

    /*
       Teléfono muy pequeño.
       Debe verse como información secundaria.
    */
    .phone{
        font-size:9px !important;
        font-weight:500 !important;
        opacity:.55;
    }

    .phone::before{
        font-size:8px !important;
    }
}

/* =====================================================
   MÓVIL
   ===================================================== */

@media (max-width:760px){

    .wrap{
        padding-left:24px;
        padding-right:24px;
    }

    /* Cabecera móvil */
    .top{
        width:100%;
        max-width:none;
        height:auto;
        padding:12px 20px 10px;
        gap:10px 14px;
        justify-content:center;
        flex-wrap:wrap;
    }

    .logo{
        width:118px;
        max-width:118px;
        max-height:78px;
        margin:0 auto;
    }

    .tag{
        display:none;
    }

    .nav{
        order:2;
        width:100%;
        margin-left:0;
        justify-content:space-between;
        gap:5px;
        font-size:12px;
        margin-top:5px;
    }

    .nav a{
        padding:7px 0;
        white-space:nowrap;
    }

    .nav a.active{
        padding-bottom:7px;
        border-bottom-width:2px;
    }

    /*
       Teléfono móvil:
       pequeño y deliberadamente poco protagonista.
    */
    .phone{
        order:3;
        width:100% !important;
        font-size:10px !important;
        font-weight:500 !important;
        opacity:.52;
        margin:0 !important;
        justify-content:flex-start;
        line-height:1.1;
    }

    .phone::before{
        font-size:9px !important;
    }

    /* En teléfono la fotografía vuelve a aprovechar
       todo el ancho de la pantalla */
    .hero{
        width:100%;
        max-width:none;
        margin:0;
        min-height:390px;
        border-radius:0;
    }

    .heroText{
        padding-left:28px;
        padding-right:28px;
        padding-bottom:35px;
    }

    .hero h1{
        font-size:38px;
    }

    /* QUIÉNES SOMOS */
    .about-hero{
        min-height:310px;
        align-items:flex-end;
        background-position:center;
    }

    .about-hero .heroText{
        padding:0 28px 30px;
    }

    .about-hero h1{
        font-size:34px;
        line-height:1.05;
        margin-bottom:8px;
    }

    .about-hero p{
        font-size:17px;
        line-height:1.25;
        max-width:92%;
    }

    .about-hero:after{
        inset:30% 0 0;
    }

    .about-section{
        padding:38px 0 24px;
    }

    .about-section .wrap{
        padding:0 24px;
    }

    .aboutgrid{
        gap:18px;
    }

    .aboutgrid .copy{
        margin-top:8px;
        margin-bottom:12px;
    }

    .commercial-block{
        margin-top:28px;
    }

    .commercial-block .kicker{
        line-height:1.45;
        letter-spacing:3px;
    }

    /* Columnas pasan a una columna */
    .features,
    .gallery,
    .timeline,
    .aboutgrid,
    .contactgrid{
        grid-template-columns:1fr;
    }

    .feature{
        border-right:0;
        border-bottom:1px solid #ddd;
    }

    .feature:last-child{
        border-bottom:0;
    }

    .gallery{
        gap:24px;
    }

    .gallery img{
        height:auto;
    }

    .gallery h3{
        margin:9px 0 2px;
    }

    .gallery p{
        margin:0;
    }

    .values-block{
        padding-top:34px;
        padding-bottom:8px;
    }

    .values-features{
        margin-top:12px;
    }

    .values-features .feature{
        padding:13px 8px;
    }

    .values-features .feature b{
        font-size:15px;
    }

    /* CTA */
    .cta .wrap{
        gap:18px;
        flex-direction:column;
        align-items:flex-start;
    }

    /* Footer */
    .footer{
        margin-top:16px;
    }

    .footer .wrap{
        gap:10px;
        flex-direction:column;
        align-items:flex-start;
    }

    .footer img{
        width:82px;
    }
}\n\n/* =====================================================\n   AJUSTE MÓVIL PROFESIONAL - LUCERO SPA / MAQUETA\n   Reduce escala visual, espacios y protagonismo del teléfono\n   ===================================================== */\n@media (max-width:760px){\n  body{font-size:14px;}\n  .top{padding:10px 18px 8px;gap:6px 10px;}\n  .logo{width:92px;max-width:92px;max-height:62px;}\n  .nav{font-size:10.5px;margin-top:1px;gap:8px;}\n  .nav a{padding:5px 0;}\n  .nav a.active{padding-bottom:5px;}\n  .phone{font-size:7.5px!important;opacity:.38!important;gap:2px!important;margin-top:-2px!important;}\n  .phone::before{font-size:7px!important;}\n\n  .hero{min-height:300px;}\n  .heroText{padding:0 24px 26px;}\n  .hero h1{font-size:31px;line-height:1.04;margin-bottom:6px;}\n  .hero p{font-size:15px;line-height:1.28;max-width:94%;}\n  .hero:after{inset:35% 0 0;}\n  .about-hero{min-height:270px;}\n  .about-hero .heroText{padding:0 24px 24px;}\n  .about-hero h1{font-size:30px;}\n  .about-hero p{font-size:14px;}\n\n  .section{padding:36px 0;}\n  .wrap,.about-section .wrap{padding-left:22px;padding-right:22px;}\n  .greenline{width:34px;height:3px;margin-bottom:10px;}\n  .kicker{font-size:10px;letter-spacing:3.2px;}\n  .big{font-size:27px;line-height:1.08;margin:8px 0 12px;}\n  .copy{font-size:14px;line-height:1.5;}\n  .features{margin-top:24px;}\n  .feature{padding:16px 8px;}\n  .feature b{font-size:14px;}\n  .feature p{font-size:13px;line-height:1.35;margin:8px auto 2px;max-width:310px;}\n\n  .about-section{padding:34px 0 18px;}\n  .commercial-block{margin-top:22px;}\n  .commercial-block .kicker{font-size:9.5px;letter-spacing:2.3px;}\n  .gallery{gap:20px;}\n  .gallery h3{font-size:15px;}\n  .gallery p{font-size:12px;}\n  .values-block{padding-top:28px;}\n  .values-features .feature{padding:12px 6px;}\n  .values-features .feature b{font-size:13px;}\n\n  .contactgrid{gap:24px;}\n  .formbox{padding:20px 16px;}\n  .formbox input,.formbox textarea{padding:11px;margin:5px 0;font-size:13px;}\n  .formbox textarea{height:125px;}\n  .btn{padding:13px 28px;font-size:12px;}\n  .cta{padding:22px 0;}\n  .cta .wrap{gap:14px;}\n  .cta .wrap>*:first-child{font-size:20px;line-height:1.2;}\n\n  .footer{padding:18px 0;margin-top:8px;}\n  .footer .wrap{gap:8px;font-size:11px;line-height:1.35;}\n  .footer img{width:58px;max-height:42px;}\n}\n



/* =========================================================
   LUCERO SPA — CORRECCIÓN AISLADA
   NO MODIFICA HOME, QUIÉNES SOMOS NI PROYECTOS
   ========================================================= */

/* Logo transparente visualmente integrado */
header .logo{
  background:transparent !important;
}

/* CONTACTO: ajustes exclusivos de esta página */
@media (max-width:760px){
  body.page-contact .hero{
    width:100% !important;
    max-width:none !important;
    height:350px !important;
    min-height:350px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }

  body.page-contact .heroText{
    height:100% !important;
    min-height:0 !important;
    padding:0 7% 32px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    box-sizing:border-box !important;
  }
}

/* FOOTER — computador: correo y teléfono separados */
.footer-contact{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  column-gap:28px !important;
  row-gap:8px !important;
}

.footer-contact > *{
  margin:0 !important;
}

/* FOOTER — celular: correo y teléfono en líneas separadas */
@media (max-width:760px){
  .footer .wrap{
    align-items:center !important;
    text-align:center !important;
  }

  .footer-contact{
    width:100% !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:8px !important;
  }

  .footer-contact > *{
    display:block !important;
    width:auto !important;
    margin:0 !important;
  }
}


/* ===== SOLO LOS 4 CAMBIOS NUEVOS ===== */

/* Quiénes somos: espacio entre título de relaciones comerciales y fotos */
.commercial-title{margin-bottom:28px !important;}
@media(max-width:760px){.commercial-title{margin-bottom:20px !important;}}

/* Proyectos */
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:34px;}
.project-card{border:1px solid #dce5ed;background:#fff;overflow:hidden;}
.project-card img{display:block;width:100%;height:300px;object-fit:cover;}
.project-copy{padding:22px;}
.project-copy h2{margin:0 0 12px;}
.project-copy p{margin:0;line-height:1.55;}
@media(max-width:760px){
  .projects-grid{grid-template-columns:1fr;gap:20px;margin-top:24px;}
  .project-card img{height:230px;}
  .project-copy{padding:18px;}
}

/* Contacto: verificación humana */
.human-check{margin:14px 0 18px;padding:14px;border:1px solid #d6e0e8;background:#f7fafc;}
.human-check label{display:block;font-weight:700;margin-bottom:8px;color:#082e67;}
.human-check input{margin:0 0 6px !important;}
.human-check small{display:block;color:#667085;font-size:12px;}
.human-error{background:#fff2f2 !important;border-left-color:#b42318 !important;}
.human-hp{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;overflow:hidden !important;}


/* ===== LOGO MÁS GRANDE — ÚNICO AJUSTE ADICIONAL ===== */
/* Computador */
header .logo{
  width:auto !important;
  max-width:190px !important;
  max-height:112px !important;
  height:auto !important;
}

/* Celular */
@media(max-width:760px){
  header .logo{
    width:132px !important;
    max-width:132px !important;
    max-height:96px !important;
    height:auto !important;
  }
}


/* ===== AJUSTE CABECERA PARA LOGO GRANDE ===== */
/* Da aire arriba y abajo del logo sin tocar el hero/banner fotográfico */
header .top{
  height:132px !important;
  min-height:132px !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}
header .logo{
  max-height:108px !important;
}

/* En celular el logo también queda con espacio suficiente */
@media(max-width:760px){
  header .top{
    height:auto !important;
    min-height:158px !important;
    padding-top:14px !important;
    padding-bottom:12px !important;
  }
  header .logo{
    width:132px !important;
    max-width:132px !important;
    max-height:92px !important;
    margin-top:0 !important;
    margin-bottom:2px !important;
  }
}


/* ===== CORRECCIÓN PROYECTOS 05-10-2026 ===== */
/* Cabecera: elimina el gran vacío que aparecía antes del contenido de Proyectos */
.page-projects header .top{
  height:118px !important;
  min-height:118px !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
}
.page-projects header .logo{
  max-height:98px !important;
}

/* El contenido de Proyectos comienza inmediatamente después de la cabecera */
.page-projects .projects-section{
  padding-top:46px !important;
  margin-top:0 !important;
}
@media(max-width:760px){
  .page-projects header .top{
    height:auto !important;
    min-height:146px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
  .page-projects header .logo{
    max-height:88px !important;
  }
  .page-projects .projects-section{
    padding-top:30px !important;
  }
}

/* CABECERA CELESTE FIJA — PC Y MOVIL */
header{
 position:sticky!important;top:0!important;z-index:9999!important;
 width:100%!important;background:#e7f1fa!important;
 border-bottom:1px solid #d4e3ef!important;
}
@media(min-width:761px){
 header .top,.page-projects header .top{
  height:132px!important;min-height:132px!important;
  padding-top:10px!important;padding-bottom:10px!important;
  box-sizing:border-box!important;background:#e7f1fa!important;
 }
 header .logo,.page-projects header .logo{
  width:auto!important;max-width:190px!important;max-height:108px!important;
  height:auto!important;object-fit:contain!important;
 }
}
@media(max-width:760px){
 header{background:#e7f1fa!important;}
 header .top,.page-projects header .top{
  height:auto!important;min-height:158px!important;
  padding-top:14px!important;padding-bottom:12px!important;
  box-sizing:border-box!important;background:#e7f1fa!important;
 }
 header .logo,.page-projects header .logo{
  width:132px!important;max-width:132px!important;max-height:92px!important;
  height:auto!important;object-fit:contain!important;margin-top:0!important;margin-bottom:4px!important;
 }
 header .nav{position:relative!important;z-index:2!important;}
}


/* =========================================================
   COMPUTADOR — BANNER SUPERIOR + LATERALES CELESTES
   ========================================================= */
@media(min-width:761px){

  /* Celeste visible en toda la franja superior, no sólo dentro del contenedor */
  html, body{
    background:#e7f1fa !important;
  }

  header{
    position:sticky !important;
    top:0 !important;
    z-index:9999 !important;
    width:100% !important;
    background:#e7f1fa !important;
    border-bottom:1px solid #d4e3ef !important;
  }

  header .top,
  header .wrap,
  .page-projects header .top{
    background:#e7f1fa !important;
  }

  /* Laterales celestes alrededor del contenido principal */
  body > section,
  body > footer,
  body > .footer{
    position:relative;
  }

  /* El contenido mantiene su fondo propio; los costados quedan celestes */
  .hero,
  .section,
  .cta,
  .footer{
    max-width:1280px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .section,
  .footer{
    background:#fff !important;
  }

  .cta{
    background:#dceaf6 !important;
  }
}


/* =========================================================
   AJUSTE FINAL: CELESTE MÁS POTENTE + TEXTO HERO IZQUIERDA
   ========================================================= */

/* Celeste corporativo con más presencia */
@media(min-width:761px){
  html, body{
    background:#d7e8f6 !important;
  }

  header,
  header .top,
  header .wrap,
  .page-projects header .top{
    background:#d7e8f6 !important;
  }
}

/* En móvil se conserva la composición aprobada, reforzando sólo el celeste */
@media(max-width:760px){
  header,
  header .top,
  header .wrap{
    background:#d7e8f6 !important;
  }
}

/* Inicio, Quiénes somos y Contacto:
   texto más a la izquierda y más abajo dentro de la fotografía */
@media(min-width:761px){
  body:not(.page-projects) .hero .heroText{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    align-items:flex-start !important;
    text-align:left !important;
    height:100% !important;
    box-sizing:border-box !important;
    padding-left:7% !important;
    padding-right:42% !important;
    padding-bottom:12% !important;
  }

  body:not(.page-projects) .hero .heroText h1,
  body:not(.page-projects) .hero .heroText p{
    text-align:left !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* Celular: mantiene alineación izquierda con margen seguro */
@media(max-width:760px){
  body:not(.page-projects) .hero .heroText{
    align-items:flex-start !important;
    text-align:left !important;
    padding-left:7% !important;
    padding-right:7% !important;
    padding-bottom:30px !important;
  }

  body:not(.page-projects) .hero .heroText h1,
  body:not(.page-projects) .hero .heroText p{
    text-align:left !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}


/* =========================================================
   OPCIÓN 1 DEFINITIVA — 05-10-2026
   Borde muy sutil + fondo claro + hero con degradado lateral
   ========================================================= */

/* Fondo exterior nuevamente claro */
html,
body{
  background:#edf6fc !important;
}

/* Cabecera clara, integrada con el fondo exterior */
header,
header .top,
header .wrap,
.page-projects header .top{
  background:#e7f1fa !important;
}

/* Marco perimetral MUY sutil en computador */
@media(min-width:761px){
  body{
    border-left:1px solid rgba(32,92,145,.20) !important;
    border-right:1px solid rgba(32,92,145,.20) !important;
    box-sizing:border-box !important;
  }

  header{
    border-top:1px solid rgba(32,92,145,.18) !important;
    border-bottom:1px solid rgba(32,92,145,.14) !important;
  }

  .footer{
    border-bottom:1px solid rgba(32,92,145,.18) !important;
  }

  /* Inicio y Quiénes somos: texto más bajo, como la opción aprobada */
  body:not(.page-contact):not(.page-projects) .hero .heroText{
    padding-left:7% !important;
    padding-right:38% !important;
    padding-bottom:5.5% !important;
  }

  /* Degradado lateral elegante: oscuro sólo a la izquierda y abajo */
  body:not(.page-contact):not(.page-projects) .hero:after{
    inset:0 !important;
    background:
      linear-gradient(90deg,
        rgba(2,35,72,.86) 0%,
        rgba(2,35,72,.68) 18%,
        rgba(2,35,72,.28) 39%,
        rgba(2,35,72,.06) 56%,
        rgba(2,35,72,0) 70%),
      linear-gradient(0deg,
        rgba(2,35,72,.28) 0%,
        rgba(2,35,72,.08) 25%,
        rgba(2,35,72,0) 48%) !important;
  }

  /* Contacto queda con su tratamiento actual */
  body.page-contact .hero:after{
    background:linear-gradient(transparent,rgba(0,40,80,.84)) !important;
  }
}

/* En celular: conservar el diseño que ya estaba aprobado.
   Sólo marco extremadamente tenue. */
@media(max-width:760px){
  body{
    border-left:1px solid rgba(32,92,145,.12) !important;
    border-right:1px solid rgba(32,92,145,.12) !important;
    box-sizing:border-box !important;
  }

  header{
    border-top:1px solid rgba(32,92,145,.12) !important;
  }

  .footer{
    border-bottom:1px solid rgba(32,92,145,.12) !important;
  }
}


/* MISMO TRATAMIENTO — CONTACTO Y PROYECTOS */
@media(min-width:761px){
 body.page-contact .hero .heroText,
 body.page-projects .hero .heroText{
  display:flex!important;flex-direction:column!important;
  justify-content:flex-end!important;align-items:flex-start!important;
  text-align:left!important;height:100%!important;box-sizing:border-box!important;
  padding-left:7%!important;padding-right:38%!important;padding-bottom:5.5%!important;
 }
 body.page-contact .hero:after,
 body.page-projects .hero:after{
  inset:0!important;
  background:
   linear-gradient(90deg,rgba(2,35,72,.86) 0%,rgba(2,35,72,.68) 18%,rgba(2,35,72,.28) 39%,rgba(2,35,72,.06) 56%,rgba(2,35,72,0) 70%),
   linear-gradient(0deg,rgba(2,35,72,.28) 0%,rgba(2,35,72,.08) 25%,rgba(2,35,72,0) 48%)!important;
 }
 body.page-contact .hero .heroText h1,
 body.page-contact .hero .heroText p,
 body.page-projects .hero .heroText h1,
 body.page-projects .hero .heroText p{
  text-align:left!important;margin-left:0!important;margin-right:0!important;
 }
}
@media(max-width:760px){
 body.page-contact .hero:after,
 body.page-projects .hero:after{
  background:
   linear-gradient(90deg,rgba(2,35,72,.78) 0%,rgba(2,35,72,.48) 38%,rgba(2,35,72,.08) 72%,rgba(2,35,72,0) 100%),
   linear-gradient(0deg,rgba(2,35,72,.28) 0%,rgba(2,35,72,0) 48%)!important;
 }
}


/* =========================================================
   MÓVIL — IGUALAR POSICIÓN DEL TEXTO PRINCIPAL A CONTACTO
   Inicio + Quiénes somos
   ========================================================= */
@media(max-width:760px){

  /* El bloque completo se apoya abajo, igual que en Contacto */
  body:not(.page-contact):not(.page-projects) .hero .heroText{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    align-items:flex-start !important;
    text-align:left !important;
    height:100% !important;
    box-sizing:border-box !important;

    /* misma separación inferior visual que Contacto */
    padding-top:0 !important;
    padding-left:7% !important;
    padding-right:7% !important;
    padding-bottom:8% !important;

    top:auto !important;
    bottom:auto !important;
    transform:none !important;
  }

  body:not(.page-contact):not(.page-projects) .hero .heroText h1,
  body:not(.page-contact):not(.page-projects) .hero .heroText p{
    text-align:left !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}


/* =========================================================
   ÚNICO AJUSTE:
   posición inferior del texto principal del HERO
   Inicio + Quiénes somos + Contacto
   ========================================================= */

/* COMPUTADOR */
@media (min-width:761px){
  body:not(.page-projects) .hero .heroText{
    position:absolute !important;
    left:7% !important;
    right:auto !important;
    top:auto !important;
    bottom:6% !important;
    transform:none !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
  }
}

/* CELULAR */
@media (max-width:760px){
  body:not(.page-projects) .hero .heroText{
    position:absolute !important;
    left:7% !important;
    right:7% !important;
    top:auto !important;
    bottom:7% !important;
    transform:none !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
  }
}


/* ÚNICO AJUSTE — textos principales más pegados a la izquierda */
@media (min-width:761px){
  body:not(.page-projects) .hero .heroText{
    left:4% !important;
  }
}

@media (max-width:760px){
  body:not(.page-projects) .hero .heroText{
    left:3.5% !important;
    right:5% !important;
  }
}


/* ÚNICO AJUSTE — Inicio y Quiénes somos más a la izquierda.
   Contacto NO se modifica. */
@media (min-width:761px){
  body:not(.page-contact):not(.page-projects) .hero .heroText{
    left:2% !important;
  }
}

@media (max-width:760px){
  body:not(.page-contact):not(.page-projects) .hero .heroText{
    left:2% !important;
    right:5% !important;
  }
}