/* ================= Reset básico ================= */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}

/* ================= Tokens de diseño ================= */
:root{
  --bg: #ffffff;       /* blanco (tarjetas) */
  --bg-soft: #e5e7eb;  /* gris suave de fondo */
  --text:#0b1324;
  --muted:#667085;
  --primary:#c62828;      /* rojo corporativo */
  --primary-ink:#ffffff;
  --border:#e5e7eb;
  --radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.08);

  /* layout */
  --site-max: 1200px;       /* ancho del contenido (ajústalo si quieres) */
}

body{
  background:var(--bg-soft);
  color:var(--text);
  font-family: "Raleway", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial;
  line-height:1.6;
  font-size:16px;
}

/* ================= Links ================= */
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ================= Navbar ================= */
.navbar, .navbar *{background-image:none !important}
.navbar{
  background:var(--bg);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
.navbar .inner{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.menu{display:flex;gap:1rem;align-items:center}
.menu a{color:var(--text)!important}
.menu a:hover{color:var(--primary)!important}

/* ================= Encabezados / Títulos ================= */
.titulo_seccion, .banner, .encabezado, .titulo-rojo{
  border:0; box-shadow:none;
}
.titulo_seccion .titulo h2{
  margin:0;text-align:center;
  font-weight:700;
}

/* ================= Utilidades ================= */
.section{padding:clamp(16px,3vw,32px) 0}
.center{text-align:center}
.muted{color:var(--muted)}
.round{border-radius:var(--radius)}
.shadow{box-shadow:var(--shadow)}

/* ================= Cards genéricas (no interfiere con stack-cards) ================= */
.card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
}

/* ================= Grids utilitarias ================= */
.grid{display:grid;gap:1rem}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:768px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}

/* ================= Botones ================= */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;
  border-radius:var(--radius);
  background:var(--primary);color:var(--primary-ink);
  border:1px solid transparent;
  font-weight:600;
}
.btn:hover{background:#a71d1d;color:var(--primary-ink)}
.btn.ghost{background:transparent;color:var(--primary);border-color:var(--primary)}

/* ================= Formularios ================= */
input,select,textarea{
  min-height:44px;
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.5rem .75rem;
  font-size:15px;
}

/* ================= Tablas ================= */
.table-wrapper{overflow-x:auto}
.table-wrapper table{width:100%;border-collapse:collapse}
.table-wrapper th,.table-wrapper td{padding:.6rem .8rem;border-bottom:1px solid var(--border)}
.table-wrapper thead th{background:var(--bg-soft);text-align:left}

/* =======================================================================
   CENTRADO GLOBAL (no interfiere con stack-cards)
   ======================================================================= */

/* Cajas principales centradas */
body > header,
body > .titulo_seccion,
body > .categorias_general,
body > .seccion,
body > footer {
  max-width: var(--site-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;   /* respiración lateral en móvil */
  padding-right: 16px;
}

/* Si dentro usas .container de Bootstrap, que no rompa el centrado */
body > .seccion .container,
body > .titulo_seccion .container,
footer .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* =======================================================================
   Header
   ======================================================================= */

/* Fondo del header puede ir a todo el ancho */
header.limpiador{
  width:100%;
  background: transparent; /* usa tu textura/fondo global si aplica */
}

/* Contenido interno centrado (puede ser más ancho si quieres) */
header.limpiador .header-inner{
  max-width: 1400px;        /* más ancho que el resto del sitio si lo prefieres */
  margin: 0 auto;
  padding: 0 20px;
}
header.limpiador .header-inner .row{
  display:flex;
  align-items:center;
}
@media (max-width: 991px){
  header.limpiador .header-inner .row{ display:block; }
}

/* =======================================================================
   Carrusel centrado
   ======================================================================= */
#myCarousel {
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.08);
}
#myCarousel .item > img {
  width: 100%;
  height: auto;
  display: block;
}
#myCarousel .left.carousel-control,
#myCarousel .right.carousel-control{
  background-image: none;
  width: 8%;
}

/* =======================================================================
   Footer (oscuro, legible)
   ======================================================================= */
footer{
  background:#111827 !important;
  color:#e5e7eb !important;
  border-top:0 !important;
  padding:24px 0 !important;
}
footer *, 
footer a, 
footer p, 
footer li, 
footer span, 
footer small, 
footer strong {
  color:#e5e7eb !important;
  text-shadow:none !important;
  background:transparent !important;
}
footer a:hover{ color:#ff6b6b !important; text-decoration:none !important; }
footer .container, 
footer .site-max {
  width: min(var(--site-max), 92%) !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}
footer ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:12px}
footer ul li{margin:0}

/* =======================================================================
   IMPORTANTE: NO forzar anchos/maquetación de .servicios/.nosotros aquí.
   La distribución de esas cards la controla exclusivamente stack-cards.css
   ======================================================================= */