/* ==========================================================
   FIREMAN – Boceto premium (capa sobre la plantilla)
   Objetivo: look tipo mockup (card centrada + fondo oscuro)
   ========================================================== */

:root{
  --brand:#c1121f;
  --brand2:#8d0e17;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#0b1220;
  --card:#ffffff;
  --line:rgba(15,23,42,.10);
  --shadow: 0 14px 40px rgba(2,6,23,.22);
  --shadow2: 0 10px 26px rgba(2,6,23,.14);
  --r:18px;
}

html{scroll-behavior:smooth;}

body{
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(193,18,31,.35), transparent 55%),
    radial-gradient(900px 600px at 110% 10%, rgba(56,189,248,.18), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #070b14 100%);
  color: var(--ink);
  font-family: "Poppins", "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* Card centrada (la web vive dentro) */
.site-shell{
  max-width: 1120px;
  margin: 22px auto;
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Header */
.header_section{background:#fff; border-bottom:1px solid var(--line);}
.custom_nav-container{padding:14px 22px;}
.navbar-brand{display:flex; align-items:center; gap:12px;}
.navbar-brand img{width:64px; height:auto;}
.brand-name{font-weight:900; color: var(--ink); letter-spacing:.2px;}

.custom_nav-container .navbar-nav{gap:18px;}
.custom_nav-container .navbar-nav .nav-item .nav-link{
  color: var(--ink) !important;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 12px;
  position: relative;
  background: transparent;
}
.custom_nav-container .navbar-nav .nav-item.active .nav-link,
.custom_nav-container .navbar-nav .nav-item .nav-link:hover{
  background: rgba(193,18,31,.10);
}
.custom_nav-container .navbar-nav .nav-item.active .nav-link::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: var(--brand);
}

.call-pill{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  color:#fff !important;
  font-weight: 900;
  padding: 10px 16px;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(193,18,31,.22);
  white-space: nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.call-pill:hover{filter: brightness(.95); text-decoration:none;}

/* Toggler visible en tablet/móvil (botón rojo coherente con Fireman) */
.navbar-toggler{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 46px;
  outline: none !important;
  box-shadow: 0 8px 18px rgba(193,18,31,.35);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.navbar-toggler:focus{box-shadow: 0 0 0 3px rgba(193,18,31,.35);}

/* Icono hamburguesa blanco (sin data-uri) */
.navbar-toggler-icon{
  background-image: none !important;
  width: 22px;
  height: 2px;
  background: #fff;
  position: relative;
  display: block;
  border-radius: 999px;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:#fff;
  border-radius: 999px;
}
.navbar-toggler-icon::before{ top:-7px; }
.navbar-toggler-icon::after{ top:7px; }

/* Sin texto extra en el botón */
.navbar-toggler::after{
  content: "Menú";
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .3px;
}


/* HERO (sin carousel)
   - Imagen integrada como fondo (sin "cuadro" independiente)
   - Difuminado hacia la zona de texto, estilo boceto
*/
.hero{
  position: relative;
  padding: 48px 52px 120px;
  background: #f5f7fb;
  border-radius: 22px;
  overflow: hidden;
}


/* Hero en páginas interiores (Empresa/Servicios/Proyectos/Contacto)
   Reducimos el padding para que el panel no se vea "gigante". */
.hero.hero--page{
  padding: 34px 52px 34px;
}
.hero.hero--page .hero-media img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 18px;
  box-shadow: var(--shadow2);
  display: block;
}
@media (max-width: 992px){
  .hero.hero--page{padding: 26px 24px 26px;}
  .hero.hero--page .hero-media img{height: 220px;}
}
@media (max-width: 576px){
  .hero.hero--page{padding: 22px 18px 22px;}
  .hero.hero--page .hero-media img{height: 200px;}
}

/* Fondo con imagen + degradado (la imagen ocupa la parte derecha) */
.hero.hero--bg{
  background-image:
    linear-gradient(90deg,
      rgba(245,247,251,1) 0%,
      rgba(245,247,251,1) 46%,
      rgba(245,247,251,.90) 58%,
      rgba(245,247,251,.55) 72%,
      rgba(245,247,251,0) 86%
    ),
    url("../images/hero-tecnico.jpg");
  background-size: 100% 100%, cover;
  background-position: left top, right center;
  background-repeat: no-repeat;
}

/* Contenido del hero: ancho controlado como en el boceto */
.hero-content{
  position: relative;
  z-index: 2;
  max-width: 560px;
}

.hero h1{font-weight: 900; font-size: 34px; line-height: 1.1; margin: 0 0 10px;}
.hero h1 .accent{color: var(--brand);} 
.hero p{color: rgba(15,23,42,.72); max-width: 520px; line-height: 1.65;}

.hero-cta{display:flex; gap:12px; margin-top: 16px; flex-wrap: wrap;}
.btn-primary-soft, .btn-outline-soft{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 12px;
  font-weight: 900;
  border: 1px solid transparent;
}
.btn-primary-soft{background: var(--brand); color:#fff !important; box-shadow: 0 12px 26px rgba(193,18,31,.18);} 
.btn-primary-soft:hover{background: var(--brand2); text-decoration:none;}
.btn-outline-soft{background: #fff; border-color: rgba(15,23,42,.14); color: var(--ink) !important;} 
.btn-outline-soft:hover{border-color: rgba(193,18,31,.35); color: var(--brand) !important; text-decoration:none;}

/* (antes había un bloque .hero-media con imagen en columna.
   ahora la imagen está integrada como fondo del propio .hero) */
/* Bloque confianza */
.trust{
  padding: 0 52px 48px;
  /* transparente para que al solaparse se vea la foto del hero debajo */
  background: transparent;
  /* tarjetas montadas sobre el hero (toque pro) */
  margin-top: -78px;
  position: relative;
  z-index: 6;
}

.trust-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
  height: 100%;
}
.trust-card h6{margin:0 0 4px; font-weight: 900;}
.trust-card p{margin:0; color: rgba(15,23,42,.70); font-size: 13px; line-height: 1.45;}
.trust-ico{
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(193,18,31,.10);
  display:flex; align-items:center; justify-content:center;
  color: var(--brand);
  font-weight: 900;
  margin-bottom: 10px;
}

/* Secciones */
.section{padding: 52px;}
.section h2{
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin: 0 0 18px;
  position: relative;
}
.section h2::after{
  content:"";
  display:block;
  width: 48px;
  height: 4px;
  border-radius: 999px;
  background: var(--brand);
  margin-top: 8px;
}
.section p{color: rgba(15,23,42,.74); line-height: 1.65;}

/* Cards servicios */
.svc-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
  height: 100%;
}
.svc-card h6{font-weight: 900; margin: 10px 0 6px;}
.svc-card p{font-size: 13px; margin:0 0 12px;}
.svc-thumb{border-radius: 14px; width:100%; height: 120px; object-fit: cover;}
.svc-link{font-weight: 900; color: var(--brand) !important;}

/* Bloque negro (Funcionamiento) */
.dark-band{
  background: linear-gradient(180deg, #0b1220 0%, #050812 100%);
  color: #fff;
}
.dark-band .section h2{color:#fff;}
.dark-band .section p{color: rgba(255,255,255,.72);} 
.step-card{
  background:#fff;
  border-radius: 16px;
  padding: 14px;
  text-align:center;
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}
.step-card img{width: 86px; height:auto; margin: 8px auto 10px; display:block;}
.step-card p{margin:0; color: rgba(15,23,42,.70); font-weight: 700; font-size: 13px;}

/* Form */
.form-card{max-width: 520px; margin: 0 auto;}
.form-control-soft{
  width: 100%;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 12px;
  padding: 12px 12px;
  margin-bottom: 10px;
}

/* Footer */
.footer{
  background: linear-gradient(180deg, #0b1220 0%, #070b14 100%);
  color: rgba(255,255,255,.82);
  padding: 34px 52px;
}
.footer h5{color:#fff; font-weight: 900; font-size: 14px; margin: 0 0 10px;}
.footer a{color: rgba(255,255,255,.86);} 
.footer a:hover{color:#fff; text-decoration:none;}
.footer small{color: rgba(255,255,255,.65);} 

/* Responsive */
@media (max-width: 992px){
  /* En iPad/tablet el navbar colapsa: mantenemos aire en el hero
     para que las tarjetas "trust" no tapen el CTA */
  .hero{padding: 34px 24px 110px;}
  .trust{padding: 14px 24px 34px; margin-top: -56px;}
  .section{padding: 34px 24px;}
  .footer{padding: 26px 24px;}
  /* En tablet/móvil, el hero usa el fondo con degradado vertical para mantener legibilidad */
  .hero.hero--bg{
    background-image:
      linear-gradient(180deg,
        rgba(245,247,251,1) 0%,
        rgba(245,247,251,1) 44%,
        rgba(245,247,251,.90) 62%,
        rgba(245,247,251,.55) 78%,
        rgba(245,247,251,0) 100%
      ),
      url("../images/hero-tecnico.jpg");
    background-size: 100% 100%, cover;
    background-position: left top, center;
  }
.call-pill{margin-top: 10px; width: 100%;}
}
@media (max-width: 768px){
  .hero h1{font-size: 28px;}
  .site-shell{margin: 10px;}
}

textarea.form-control-soft{
  min-height: 160px;
  resize: vertical;
  padding-top: 12px;
}

@media (max-width: 576px){
  .hero{padding: 28px 18px 90px;}
  .trust{margin-top: -44px;}
}

/* =========================
   MÓVIL – Layout tipo boceto (más profesional)
   - Trust: 4 paneles en 2x2
   - Servicios: 4 cards en 2x2 sin mini-foto
   - CTA sticky en el footer
   ========================= */

/* Por defecto, oculto fuera de móvil */
.mobile-cta-bar{display:none;}

@media (max-width: 768px){
  /* TRUST (4 paneles) -> cuadrado 2x2 */
  .trust .row{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .trust .row > [class*="col-"]{
    max-width: 100%;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* SERVICIOS (home) -> cuadrado 2x2 */
  .section[aria-label="Servicios"] > .row,
  .services-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .section[aria-label="Servicios"] > .row > [class*="col-"],
  .services-grid > [class*="col-"]{
    max-width: 100% !important;
    width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .svc-card{padding: 14px;}
  .svc-card p{font-size: 12px; line-height: 1.45;}

  /* CTA sticky (aparece solo en móvil) */
  .mobile-cta-bar{
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: 0;
    padding: 12px;
    background: rgba(11,18,32,.92);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,.10);
    z-index: 999;
  }
  .mobile-cta-bar a{
    flex: 1;
    text-align: center;
    font-weight: 900;
    padding: 12px 12px;
    border-radius: 14px;
    text-decoration: none;
    display: block;
  }
  .mobile-cta-bar .cta-main{background: var(--brand); color:#fff;}
  .mobile-cta-bar .cta-ghost{background: #fff; color: var(--ink);}
}


/* En móvil "pequeño" (teléfonos), quitamos mini-fotos para que quepan mejor 2x2 como en el boceto */
@media (max-width: 576px){
  .svc-thumb{display: none !important;}
}


@media (min-width: 992px){
  .navbar-toggler::after{ content: ""; }
}


/* ==========================================================
   CTA BAR FLOTANTE (MÓVIL) + HEADER STICKY (PRO, SIN MOLESTAR)
   ========================================================== */

/* Header sticky (no tapa contenido gracias a su altura natural) */
.header_section{
  position: sticky;
  top: 0;
  z-index: 1200;
}

/* Barra flotante inferior (solo móvil/tablet pequeña) */
.mobile-cta-bar{
  display: none;
}

@media (max-width: 768px){
  /* Reservar espacio para que NO tape nada */
  body{
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .mobile-cta-bar{
    display: flex;
    gap: 12px;

    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 2000;

    padding: 10px;
    border-radius: 18px;

    background: rgba(11,18,32,.88);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(2,6,23,.35);
    border: 1px solid rgba(255,255,255,.10);
  }

  .mobile-cta-bar a{
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 48px;
    border-radius: 14px;
    font-weight: 900;
    text-decoration: none !important;
    letter-spacing: .2px;
  }

  .mobile-cta-bar .cta-main{
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(193,18,31,.22);
  }
  .mobile-cta-bar .cta-main:active{transform: translateY(1px);}

  .mobile-cta-bar .cta-ghost{
    background: #fff;
    color: var(--ink) !important;
    border: 1px solid rgba(15,23,42,.12);
  }
}

/* Evitar que el sticky header haga "saltos" en algunos navegadores */
@supports (-webkit-touch-callout: none){
  .header_section{ -webkit-transform: translateZ(0); }
}

/* Ocultar CTA duplicada del footer cuando está activa la barra flotante (móvil/tablet) */
@media (max-width: 768px){
  .footer-request{display:none !important;}
}