/* ============================================================
   site.css — rescaterapido.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:#690008; --g-red-2:#8b1a1a; --g-red-dark:#4d0006;
  --g-ink:#1a1c1c; --g-mut:#58413f; --g-line:#e0bfbc;
  --g-soft:#f3f3f3; --g-soft-2:#eeeeee;
}

/* ------------------------- CABECERA ------------------------- */
/* La cabecera de este sitio es CLARA (bg-surface), no roja:
   se le da relieve sin cambiarle el color de fondo. */
header.sticky,header.bg-surface{
  box-shadow:0 4px 18px rgba(26,28,28,.10);
  border-bottom:1px solid #e0bfbc;
  backdrop-filter:saturate(1.05);
}
.site-logo{display:block;height:42px;width:auto}
header .site-logo{height:40px}
footer .site-logo{height:42px;margin-bottom:14px}
header nav a[href]:not([class*="bg-primary"]){position:relative;padding-bottom:3px}
header nav a[href]:not([class*="bg-primary"])::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
  background:#690008;transition:right .22s ease;
}
header nav a[href]:not([class*="bg-primary"]):hover::after{right:0}
header a[href^="tel:"]{box-shadow:0 6px 18px rgba(105,0,8,.24)}

/* --------------------------- 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/landing/1.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(20,15,15,.92) 0%,rgba(41,23,23,.80) 42%,rgba(105,0,8,.58) 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 #e0bfbc;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,#690008,#8b1a1a);
  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:#690008;
}
.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,#690008,#8b1a1a);
  box-shadow:0 8px 20px rgba(105,0,8,.30);
  margin-bottom:14px;
}
.g-ico .material-symbols-outlined{color:#fff;font-size:1.7rem}

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

/* 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,#690008,#8b1a1a);
}

/* ----------------------- BOTONES CON RELIEVE ----------------------- */
a.bg-on-primary,a.bg-primary,button.bg-primary{
  box-shadow:0 8px 22px rgba(105,0,8,.24);
  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(105,0,8,.32);
}

/* ------------------------------ PIE ------------------------------ */
footer{border-top:4px solid transparent;
  border-image:linear-gradient(90deg,#690008,#8b1a1a,#690008) 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 #ffb3ac;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:#690008;
  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 .site-logo{height:34px}
  footer .site-logo{height:36px}
}