/* ============================================================
   site.css — 247grua.com
   Capa ADITIVA de profundidad visual. Se carga DESPUES de Tailwind
   y no reescribe el HTML: solo mejora lo que ya existe.
   Ninguna regla usa custom properties: todo color es literal.
   ============================================================ */

:root{
  --g-red:#ba0013; --g-red-2:#e31e24; --g-red-dark:#8a000e;
  --g-ink:#161d1f; --g-mut:#5d3f3c; --g-line:#e7bdb8;
  --g-soft:#eef5f7; --g-soft-2:#e8eff1;
}

/* ------------------------- CABECERA ------------------------- */
header.fixed{
  background:#ba0013;
  background:linear-gradient(100deg,#8a000e 0%,#ba0013 55%,#d4101f 100%);
  box-shadow:0 6px 24px rgba(138,0,14,.28);
  border-bottom:1px solid rgba(255,255,255,.10);
}
header.fixed .site-logo{display:block;height:38px;width:auto}
header.fixed nav a{position:relative;padding-bottom:3px}
header.fixed nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
  background:#ffffff;transition:right .22s ease;
}
header.fixed nav a:hover::after{right:0}
header.fixed a[href^="tel:"]{box-shadow:0 6px 18px rgba(0,0,0,.22)}

/* barra roja superior de las landers: un poco mas de cuerpo */
header.bg-brand-red{box-shadow:0 4px 16px rgba(138,0,14,.3)}

/* --------------------------- HERO --------------------------- */
/* La home no tenia ninguna imagen: se anade una capa de fondo real
   mas un degradado para que el texto siga legible. */
.g-hero{position:relative;isolation:isolate;overflow:hidden}
.g-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:url("/images/img1.webp");
  background-size:cover;background-position:center;
  transform:scale(1.03);
}
.g-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(12,16,17,.93) 0%,rgba(22,29,31,.82) 42%,rgba(186,0,19,.55) 100%);
}
.g-hero h1{
  color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45);
  letter-spacing:-.015em;
}
.g-hero p{color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.35)}
.g-hero .material-symbols-outlined{color:#fff}

/* pastilla de urgencia sobre el hero */
.g-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.30);
  color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;backdrop-filter:blur(6px);margin-bottom:18px;
}

/* --------------------- TARJETAS Y PROFUNDIDAD --------------------- */
/* Se aplica a los bloques de servicio/ventaja/testimonio ya existentes */
.g-card{
  background:#fff;border:1px solid #e7bdb8;border-radius:18px;
  box-shadow:0 2px 4px rgba(22,29,31,.04),0 12px 28px rgba(22,29,31,.07);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  position:relative;overflow:hidden;
}
.g-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#ba0013,#e31e24);
  opacity:0;transition:opacity .22s ease;
}
.g-card:hover{
  transform:translateY(-6px);
  box-shadow:0 4px 8px rgba(22,29,31,.05),0 22px 46px rgba(22,29,31,.15);
  border-color:#ba0013;
}
.g-card:hover::before{opacity:1}

/* circulo de icono con relieve */
.g-ico{
  width:56px;height:56px;border-radius:16px;display:inline-flex;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ba0013,#e31e24);
  box-shadow:0 8px 20px rgba(186,0,19,.32);
  margin-bottom:14px;
}
.g-ico .material-symbols-outlined{color:#fff;font-size:1.7rem}

/* --------------------------- SECCIONES --------------------------- */
.g-sec-alt{background:#eef5f7;position:relative}
.g-divider{height:4px;border:0;margin:0;
  background:linear-gradient(90deg,#ba0013,#e31e24,#ba0013)}

/* titulos de seccion con acento */
.g-title{position:relative;display:inline-block;padding-bottom:12px}
.g-title::after{
  content:"";position:absolute;left:0;bottom:0;width:62px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,#ba0013,#e31e24);
}

/* ----------------------- BOTONES CON RELIEVE ----------------------- */
a.bg-on-primary,a.bg-primary,button.bg-primary{
  box-shadow:0 8px 22px rgba(186,0,19,.26);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
a.bg-on-primary:hover,a.bg-primary:hover,button.bg-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(186,0,19,.34);
}

/* ------------------------------ PIE ------------------------------ */
footer{border-top:4px solid transparent;
  border-image:linear-gradient(90deg,#ba0013,#e31e24,#ba0013) 1;
  box-shadow:inset 0 12px 28px -20px rgba(22,29,31,.25)}
footer .site-logo{display:block;height:40px;width:auto;margin-bottom:14px}
footer a{transition:color .18s ease,padding-left .18s ease}
footer ul a:hover{padding-left:4px}

/* -------------------------- ACCESIBILIDAD -------------------------- */
a:focus-visible,button:focus-visible{outline:3px solid #ffd7da;outline-offset:2px;border-radius:4px}
.g-skip{position:absolute;left:-9999px}
.g-skip:focus{left:12px;top:12px;z-index:200;background:#fff;color:#ba0013;
  padding:10px 16px;border-radius:8px;font-weight:700}

img{max-width:100%;height:auto}

@media(prefers-reduced-motion:reduce){
  .g-card,a.bg-on-primary,a.bg-primary,button.bg-primary{transition:none!important}
  .g-card:hover,a.bg-on-primary:hover,a.bg-primary:hover{transform:none!important}
}

@media(max-width:768px){
  .g-hero::before{background-position:60% center}
  .g-ico{width:48px;height:48px;border-radius:14px}
  .g-ico .material-symbols-outlined{font-size:1.45rem}
  header.fixed .site-logo{height:32px}
  footer .site-logo{height:34px}
}