/* =========================
   VARIABLES & BASE
========================= */
:root{
  --gold:#d4af37;
  --black:#0b0b0b;
  --white:#ffffff;
}

/* Imágenes/medios fluidos */
img, video{max-width:100%; height:auto; display:block;}
/* Contenedor base */
.container{width:min(1140px,92%); margin-inline:auto;}
/* Tipografía base */
body{font-family:'Raleway',sans-serif; line-height:1.5; color:#222;}
h1,h2,h3,.section-title{font-family:'Merriweather',serif;}

/* Utilidades */
.text-gold{color:var(--gold);}
.eyebrow{letter-spacing:.12em; font-size:.9rem; opacity:.9;}
.cover{width:100%; aspect-ratio:16/9; object-fit:cover;}
.stack > * + *{margin-top:.75rem;}

/* =========================
   NAVBAR
========================= */
/* NAVBAR base */
.navbar-custom {
  background: var(--black);
  padding: 6px 0; /* navbar delgada */
  transition: padding .3s ease, box-shadow .3s ease;
  min-height: 70px; 
}

/* Marca / logo */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-left: 20px;
}

/* Logo grande al inicio */
.navbar-custom .logo-img {
  height: 100px;  /* grande */
  width: auto;
  object-fit: contain;
  transition: height .3s ease, transform .3s ease;
}

/* Navbar shrink (cuando bajas) */
.navbar-custom.shrink {
  padding: 4px 0; /* más compacto */
  min-height: 60px;
}

.navbar-custom.shrink .logo-img {
  height: 60px; /* se hace más chico */
}

.navbar-custom .navbar-nav .nav-link{
  color:var(--white);
  padding:.5rem 1.2rem;
  font-weight:500; font-size:.95rem;
  transition:color .2s ease, border-bottom .2s ease;
}
.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-link:focus{color:var(--gold); text-decoration:none;}
.navbar-custom .nav-link.active{
  color:var(--gold); font-weight:600;
  border-bottom:2px solid var(--gold); border-radius:0;
}

/* =========================
   HERO (GENÉRICO + VARIANTES)
========================= */
/* Hero genérico con fondo */
.hero{
  background:
    linear-gradient(rgb(241,248,222), rgba(255,255,255,.98)),
    url("assets/img/hero-bg.jpg") center/cover no-repeat;
  min-height:70vh; display:flex; align-items:center;
  padding:0 1rem; text-align:left;
}
.hero-content{max-width:600px; margin:0 0 0 1rem;}
.hero-title{
  color:var(--black);
  font-size:clamp(2rem, 2.5vw, 3rem);
  font-weight:700; margin-bottom:1rem; white-space:normal;
}
.hero-subtitle{
  color:var(--black);
  font-weight:300; font-size:clamp(1rem, 1.4vw, 1.125rem);
  margin-bottom:1.25rem; line-height:1.5;
}

/* Botón dorado */
.btn-custom{
  background:linear-gradient(135deg, #e2b93b 35%, #bf930d 60%);
  color:#fff; border:none; padding:10px 20px;
  font-size:1rem; font-weight:700; letter-spacing:2px;
  cursor:pointer; transition:.3s ease; text-decoration:none;
  display:inline-flex; align-items:center; border-radius:4px;
}
.btn-custom:hover,.btn-custom:focus{
  filter:brightness(.95); color:#fff;
}
.btn-custom::after{
  content:"\f105"; font: var(--fa-font-solid);
  margin-left:0; opacity:0; transition:margin-left .3s ease, opacity .3s ease;
}
.btn-custom:hover::after,.btn-custom:focus::after{margin-left:12px; opacity:1;}

/* Hero fullwidth/parallax (Servicios genérico) */
.hero-fw{
  position:relative; isolation:isolate;
  min-height:60vh; display:grid; place-items:center; overflow:hidden;
}
.hero-fw .hero-bg{
  position:absolute; inset:0; background-position:center; background-size:cover;
  background-repeat:no-repeat; background-attachment:scroll; /* móvil por defecto */
  z-index:-2;
}
.hero-fw .hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(253,255,122,.25) 0%,
    rgba(245,255,160,.35) 60%,
    rgba(255,255,255,.45) 100%);
  z-index:-1;
}
.hero-center{width:100%; max-width:900px; margin-inline:auto;}
.hero-center .btn{margin-top:0;}

/* Hero Servicios (ID específico) */
#hero-servicios{
  position:relative; min-height:80vh; display:flex; align-items:center; justify-content:center;
  color:#a59005; text-align:center; overflow:hidden;  padding-top: 100px; 
}
#hero-servicios .hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2;}
#hero-servicios .hero-overlay{position:absolute; inset:0; background:rgba(253,255,240,.5); z-index:-1;}
/* #hero-servicios .hero-divider-top svg{display:block; width:100%; height:80px; fill: var(--white);} */
#hero-servicios .hero-title{font-weight:700; font-size:clamp(2rem,4vw,3rem); margin-bottom:1rem;}
#hero-servicios .hero-subtitle{
  font-weight:500; font-size:1.1rem; letter-spacing:.1em; text-transform:uppercase; opacity:.9;
}

/* Hero Contacto (ID específico) */
#hero-contacto{
  position:relative; min-height:40vh; display:flex; align-items:center; justify-content:center;
  color:#a59005; text-align:center; overflow:hidden; padding-top: 160px; 
}
#hero-contacto .hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2;}
#hero-contacto .hero-overlay{position:absolute; inset:0; background:rgba(253,255,240,.5); z-index:-1;}

#hero-contacto .hero-title{font-weight:700; font-size:clamp(2.25rem,4vw,3rem); margin-bottom:1rem;}
#hero-contacto .hero-subtitle{
  font-weight:500; font-size:1.1rem; letter-spacing:.1em; text-transform:uppercase; opacity:.9;
}

/* =========================
   EMPRESA
========================= */
.section-empresa{background:#fff; padding:3rem 0;}
.empresa-figure{position:relative; border-radius:24px; overflow:hidden;}
.empresa-img{
  width:100%; height:auto; display:block; max-width:65%; margin:0 auto;
  box-shadow:0 15px 35px rgba(0,0,0,.15);
  transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
  filter:brightness(65%);
}
.empresa-figure:hover .empresa-img{transform:translateY(-6px); box-shadow:0 22px 46px rgba(0,0,0,.22);}
.section-empresa p{font-weight:300; font-size:1rem; letter-spacing:.02em; color:#555;}
.empresa-text{padding-left:15px; margin-top:0;}
.section-empresa .row{align-items:flex-start;}

/* =========================
   SERVICIOS (cards)
========================= */
#servicios{
  background:#fff; margin-top:1rem; margin-bottom:4rem; padding: .5rem 0 3rem;
}
#servicios .eyebrow{
  margin-bottom:2rem; letter-spacing:.6rem; color:var(--gold);
  font-size:1rem; font-weight:600;
}
#servicios h2{
  margin-bottom:3rem; font-size:1.6rem; font-weight:300;
}
.service-card{
  border:none; border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease; 
}
.service-card:hover{transform:translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.12);}
.img-square{aspect-ratio:4/3; max-height:300px; overflow:hidden; border-radius:12px 12px 0 0;}
.img-square img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.service-card:hover .img-square img{transform:scale(1.08);}
.service-card .card-title{font-family:'Merriweather',serif; font-size:1.25rem; font-weight:600; margin-bottom:1rem; color:var(--black);}
.service-card .card-text{font-size:.95rem; color:#555;}
.btn-service{
  background:linear-gradient(135deg,#e2b93b 35%,#bf930d 60%);
  color:#fff; border:none; padding:10px 20px; font-size:.9rem; font-weight:600;
  border-radius:4px; text-decoration:none; display:inline-block; transition:.3s ease;
}

/* =========================
   CTA (requerimientos)
========================= */
.section-cta{background:#fff; padding:3rem 0;}
.cta-figure{
  position:relative; width:100%; max-width:360px; margin-inline:auto;
  border-radius:12px; overflow:hidden; box-shadow:0 18px 38px rgba(0,0,0,.16);
}
.cta-img{width:100%; height:500px; object-fit:cover;}
.cta-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18) 90%);}
.cta-title{font-weight:600; font-size:clamp(1.4rem,2.2vw,2rem); color:var(--black); letter-spacing:.2px;}
.cta-text{font-size:clamp(.95rem,1.4vw,1rem); color:#444; line-height:1.6;}
.section-cta .eyebrow{font-size:1.1rem; font-weight:700; letter-spacing:.12em; margin-bottom:1.5rem; display:inline-block;}
.cta-panel{
  position:relative; background:rgba(255,255,255,.95);
  border:1px solid rgba(165,129,11,.22);
  border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.14);
  padding:2rem; backdrop-filter:saturate(120%) blur(2px);
  display:flex; flex-direction:column; justify-content:center;
}
.cta-panel .btn-custom{align-self:flex-start; padding:12px 28px;}

/* =========================
   “TE AYUDAMOS CON”
========================= */
.section-help{background:#fff;}
.section-header .eyebrow{margin-bottom:.25rem; font-weight:600; font-size:1.1rem; margin-top: 4rem;  margin-bottom: 2rem;}
.section-header .help-subtitle{
  max-width:820px; margin-inline:auto; color:#444;
  font-weight:900; font-size:1.05rem; line-height:1.4; white-space:normal; margin-bottom:3rem;
}
.help-card{
  border:1px solid rgba(0,0,0,.06); border-radius:12px;
  padding:1.25rem 1.25rem 1.5rem; box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; background:#fff;
}
.help-card:hover{transform:translateY(-4px); box-shadow:0 10px 22px rgba(0,0,0,.10); border-color:rgba(212,175,55,.35); }
.help-logo{height:80px; display:flex; align-items:center; justify-content:center; margin-bottom:2rem;}
.help-logo img{max-height:80px; max-width:160px; object-fit:contain; filter:grayscale(10%); transition:filter .25s ease, transform .25s ease;}
.help-card:hover .help-logo img{filter:none; transform:scale(1.03);}
.help-desc{font-size:.95rem; color:#555; margin:0; line-height:1.55;}
#ayuda .text-center{margin-bottom:3rem; }

/* =========================
   CONTACTO (1, 2 y base)
========================= */
/* Estilos compartidos: agrupa las 3 secciones que dijiste */
.section-contact, .section-contact1, .section-contact2{ background:#fff; }
.section-contact{ margin-top:6rem; }

/* Bloques */
.contact-strip > [class*="col-"]{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
}

/* Texto e iconos */
.contact-ico{font-size:1.6rem; color:var(--gold); margin-bottom:.25rem; flex-shrink:0;}
.contact-label{font-family:'Merriweather',serif; font-weight:600; font-size:1rem; color:var(--black);}
.contact-link,.contact-text{
  display:inline-block; color:#444; text-decoration:none; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.contact-link:hover{color:var(--gold); border-color:var(--gold);}

/* Inputs underline */
.form-underline{
  border:none; border-bottom:2px solid #e6e6e6; border-radius:0; padding-left:0; padding-right:0; box-shadow:none;
}
.form-underline:focus{border-bottom-color:var(--gold); outline:none;}

/* “Elevaciones” específicas de tus variantes (solo en pantallas grandes, ver media query) */
.section-contact1{ /* vacío en mobile, se aplica lift en desktop */ }
.section-contact2{ /* igual, se maneja en desktop */ }

/* =========================
   SECCIONES DE SERVICIOS (alternas)
========================= */
.section-svc + .section-svc{margin-top:6rem;}
#actualizacion{background:#fff;}
#serviciocontable{background:#fefff3c2;}
#nomina{background:#fefff3c2;}

.section-svc .container{min-height:70vh; display:flex; align-items:center;}
.svc-figure{
  position:relative; width:100%; max-width:360px; margin:0 auto;
  border-radius:12px; overflow:hidden; box-shadow:0 18px 38px rgba(0,0,0,.16);
}
.svc-img{width:100%; height:400px; object-fit:cover; object-position:center;}
.svc-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18) 90%);}
.svc-body{ padding-left: 3rem; }
.section-svc{
  padding-block: 3rem;
}

/* Más separación horizontal entre columnas (mobile) */
.section-svc .row{
  --bs-gutter-x: 1.5rem;
}

/* Centrar verticalmente imagen y texto */
.section-svc .col-12.col-lg-3,
.section-svc .col-12.col-lg-9{
  display: flex;
  align-items: center;          /* centra el contenido en la columna */
}

/* El cuerpo ocupa todo el ancho disponible */
.section-svc .svc-body{
  width: 100%;
  padding: 0;                   /* anula padding previos */
}

/* Imagen un poco más grande y con mejor presencia */
.svc-figure{
  position: relative;
  width: 100%;
  max-width: 420px;             /* antes 360px */
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(0,0,0,.16);
}
.svc-img{
  width: 100%;
  height: 100%;                /* antes 300px */
  max-height: 500px; 
  object-fit: cover;
  object-position: center;
}
.svc-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18) 90%);
}

/* Tipografía y listas más respirables */
.svc-title{ margin-bottom: .75rem; }
.svc-body .svc-text{
  line-height: 1.7;
  margin-bottom: .9rem;
  color: #444;
}
.svc-list{
  margin: 1rem 0 0;
  padding-left: 1.15rem;
}
.svc-list li{ margin-bottom: .38rem; }

/* ===== Desktop (>= 992px) ===== */
@media (min-width: 992px){
  /* Más alto cada bloque de servicios */
  .section-svc{ padding-block: 5rem; }

  /* Más separación entre imagen y texto */
  .section-svc .row{ --bs-gutter-x: 3rem; }

  /* Un poco más grande imagen y aire lateral del texto */
  .svc-figure{ max-width: 460px; }
  .svc-img{ height: 400px; }
  .section-svc .svc-body{ padding-inline: 2rem; }
}


/* ===== HERO NOSOTROS (independiente de Servicios) ===== */
#hero-nosotros{
  position:relative; min-height:35vh; display:flex; align-items:center; justify-content:center;
  color:#a59005; text-align:center; overflow:hidden;  padding-top: 100px; 
}
#hero-nosotros .hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2;}
#hero-nosotros .hero-overlay{position:absolute; inset:0; background:rgba(253,255,240,.5); z-index:-1;}
/* #hero-servicios .hero-divider-top svg{display:block; width:100%; height:80px; fill: var(--white);} */
#hero-nosotros .hero-title{font-weight:700; font-size:clamp(2rem,4vw,3rem); margin-bottom:1rem;}
#hero-nosotros .hero-subtitle{
  font-weight:500; font-size:1.1rem; letter-spacing:.1em; text-transform:uppercase; opacity:.9;
}

/* Responsive tweaks */
@media (max-width: 575.98px){#hero-nosotros{ min-height: 32vh; padding-top: 80px; }
  #hero-nosotros .hero-divider-top{ display:none; } /* si estorba en móvil */
}

/* =========================
   EMPRESA (NOSOTROS)
========================= */
.section-empresa-nosotros {
  background:#fff;
  padding:3rem 0;
}

.section-empresa-nosotros .empresa-figure {
  position:relative;
  border-radius:24px;
  overflow:hidden;
  transform: translateY(-80px); /* súbela 40px, ajusta a gusto */
}

.section-empresa-nosotros .empresa-img {
  width:100%;
  height:auto;
  display:block;
  max-width:65%;
  margin:0 auto;
  box-shadow:0 15px 35px rgba(0,0,0,.15);
  transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
  filter:brightness(65%);
}

.section-empresa-nosotros .empresa-figure:hover .empresa-img {
  transform:translateY(-6px);
  box-shadow:0 22px 46px rgba(0,0,0,.22);
}

.section-empresa-nosotros p {
  font-weight:300;
  font-size:1rem;
  letter-spacing:.02em;
  color:#555;
}

.section-empresa-nosotros .empresa-text {
  padding-left:15px;
  margin-top:0;
}

.section-empresa-nosotros .row {
  align-items:flex-start;
}
/* =========================
   WHATSAPP FLOAT
========================= */
.whatsapp-float{
  position:fixed; width:60px; height:60px; bottom:20px; right:20px;
  background:#25d366; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2rem; box-shadow:0 6px 15px rgba(0,0,0,.2); z-index:9999; transition:background .3s ease; cursor:pointer;
}
.whatsapp-float:hover{background:#1ebe57;}
.whatsapp-float .tooltip-text{
  visibility:hidden; opacity:0; background:#333; color:#fff; padding:4px 8px; border-radius:6px;
  position:absolute; right:70px; bottom:50%; transform:translateY(50%); white-space:nowrap; transition:opacity .3s ease; font-size:.85rem;
}
.whatsapp-float:hover .tooltip-text{visibility:visible; opacity:1;}

/* =========================
   RESPONSIVE
========================= */

/* Teléfono */
@media (max-width: 575.98px){
  .btn-custom{width:100%; justify-content:center;}
  .empresa-figure{display:none;}
  .empresa-text{padding-inline:12px; margin-top:0;}
  .contact-strip{padding-block:1rem;}
  .contact-label{font-size:.95rem;}
  .hero{min-height:60vh; padding:0 1rem;}
  .hero-center{padding:0 1rem;}
  .hero-fw{min-height:48vh;}
}

/* Tablet */
@media (max-width: 991.98px){
  .navbar-custom{padding: clamp(6px,1.5vw,12px) 0;}
  .navbar-custom .logo-img{height: clamp(48px,6vw,70px);}
  .navbar-custom .navbar-nav .nav-link{font-size:clamp(.95rem,1.2vw,1.1rem); padding:.5rem clamp(.75rem,1.5vw,1.2rem);}
  .hero-subtitle{margin-bottom:1.25rem;}
  /* evitar solapes: sin “lift” en tablet */
  .section-empresa{padding-top:2.5rem; padding-bottom:2rem;}
  .empresa-figure{display:none;}
  .hero-fw{min-height:56vh; padding-bottom:2rem;}
  .hero-fw .hero-bg{background-attachment:scroll;} /* sin parallax en móvil/tablet */
  .svc-body{padding-left: 0; margin-top: 1rem;}
  .help-logo{height:72px;}
  .help-logo img{max-height:72px; max-width:140px;}
  #ayuda .text-center{margin-bottom:1.5rem;}
}

/* Desktop (aplicamos elevaciones/overlaps que pedías) */
@media (min-width: 992px){
  /* Lifts solo en desktop */
  .section-empresa{padding-top:2.5rem; padding-bottom:2.75rem;}
  .section-empresa .empresa-figure{transform:translateY(-150px);} /* tu efecto circular */
  .section-empresa .section-title{transform:translateY(-85px); margin-bottom:1rem;}
  .section-empresa p{transform:translateY(-85px);}
  .hero{min-height:85vh; padding:0 2rem;}
  .hero-content{margin-left:120px; margin-top:50px; max-width:600px;}
  .hero-fw .hero-bg{background-attachment:fixed;} /* parallax suave */
  /* Aumenta el gutter entre columnas solo en esta sección */
  #requerimientos .row{ 
    --bs-gutter-x: 3.5rem !important;  /* sube a 4rem si quieres más */
  }

  /* Extra por si el gutter aún te queda corto: empuja toda la columna de texto */
  #requerimientos .col-lg-8{
    padding-left: 2rem !important;     /* mueve juntos: eyebrow + panel */
  }

  /* Asegura que no haya superposición previa */
  #requerimientos .cta-panel{
    margin-left: 0 !important;
  }
  .section-contact1{transform:translateY(-51px);} /* como pediste */
  /* section-contact2 sin lift por si la quieres plana */
  
}

/* Desktop XL */
@media (min-width: 1200px){
  .cta-panel{margin-left:-60px;}
}



/* Honeypot: oculto visualmente pero presente para bots */
.hp-wrap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }