:root{
  --brand:#1337d2;      /* azul */
  --accent:#e30613;     /* rojo */
  --ink:#1b1b1b;
  --muted:#f5f7fb;
  --line:#bdbdbd;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
}

/* Layout helpers */
.container{width:min(1120px, 92%); margin:0 auto}
.section{padding:72px 0}
.section.muted{background:var(--muted)}
h1,h2,h3{line-height:1.2;margin:0 0 16px}
h1{font-size:clamp(28px,3.6vw,44px); font-weight:800}
h2{font-size:clamp(22px,2.8vw,32px); font-weight:800}
h3{font-size:20px; font-weight:700}
p{margin:0 0 14px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line);
}
.header-wrap{display:flex; align-items:center; gap:24px; padding:12px 0}
.logo img{height:40px}
.site-nav{margin-left:auto}
.nav-list{display:flex; list-style:none; gap:18px; padding:0; margin:0}
.nav-list a{color:#111; text-decoration:none; font-weight:600}
.nav-list a:hover{color:var(--brand)}
.nav-toggle{display:none; background:none; border:none; font-size:26px}
.btn-cta{
  background:var(--brand); color:#fff; text-decoration:none; padding:10px 14px; border-radius:12px; font-weight:700;
  margin-left:8px;
}

/* Hero */
.hero{padding:64px 0; background:
  radial-gradient(1200px 300px at 70% -10%, #e9edff 0, transparent 60%),
  radial-gradient(900px 280px at -10% 20%, #ffe9eb 0, transparent 60%);
}
.hero-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center}
.hero-copy p{font-size:18px}
.hero-cta{display:flex; gap:12px; margin:18px 0}
.btn-primary{background:var(--brand); color:#fff; text-decoration:none; padding:12px 16px; border-radius:12px; font-weight:700; display:inline-block}
.btn-secondary{border:1px solid #b6b6b6; color:var(--brand); text-decoration:none; padding:12px 16px; border-radius:12px; font-weight:700; display:inline-block; background:#fff}
.trust-pills{display:flex; gap:10px; list-style:none; padding:0; margin:14px 0 0}
.trust-pills li{border:1px dashed #cbd5ff; padding:6px 10px; border-radius:999px; font-size:12px; color:#3b4adb}

.hero-media{display:grid; gap:14px}
.hero-media img{width:100%; border-radius:16px; border:1px solid var(--line);}
.hero-card{border:1px solid var(--line); border-radius:16px; padding:16px; background:#fff}

/* Cards Servicios */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{border:1px solid var(--line); border-radius:16px; padding:20px; background:#fff}
.card h3{color:#0f172a}
.bullets{list-style:none; padding:0; margin:12px 0 0}
.bullets li::before{
  content:""; position:absolute; left:0; top:9px; width:10px; height:10px; border-radius:2px; background:var(--brand);
}

/* Nosotros */
.two-col{display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start}
.checklist{list-style:none; padding:0; margin:12px 0 0}
.checklist li::before{content:"✓"; color:var(--brand); position:absolute; left:0; top:0}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.stat{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; text-align:center}
.stat .n{font-size:28px; font-weight:800; display:block; color:var(--brand)}
.stat .l{font-size:12px; color:#475569}

/* Contacto */
.simple-form input, .simple-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line) !important; border-radius:12px; margin-bottom:12px !important; font:inherit;
  /* Estilo para el focus */
  transition: all 0.3s ease;
}
.simple-form input:focus, .simple-form textarea:focus{
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 2px rgba(19, 55, 210, 0.2) !important;
}
.simple-form textarea{
  resize: vertical;
}
.contact-box{display:grid; gap:12px}
.contact-box .box{
  border:1px solid var(--line); border-radius:16px; padding:16px; background:#fff
}
.contact-box a{font-weight:700; color:var(--brand); text-decoration:none}
.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.contact-info-cards .box{
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.contact-info-cards h3{
    margin-bottom: 0.5rem;
}
.contact-info-cards p{
    margin-bottom: 0.8rem;
}


/* Footer */
.site-footer{background:#0b1226; color:#cbd5e1; padding-top:32px}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:24px}
.footer-brand img{height:42px; /*filter:brightness(0) invert(1);*/ margin-bottom:10px}
.footer-links a, .footer-contact a{color:#e2e8f0; text-decoration:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); margin-top:20px; padding:14px 0; text-align:center}

/* Botones flotantes */
.floating-btn{
  position:fixed; right:16px; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; color:#fff; text-decoration:none; font-size:22px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:60;
}
.floating-btn.call{background:var(--accent); bottom:84px}
.floating-btn.wa{background:#25D366; bottom:20px}

/* Responsivo */
@media (max-width: 900px){
  .hero-grid, .two-col, .footer-grid, .cards-3{grid-template-columns:1fr}
  .site-nav{display:none; position:absolute; top:64px; right:0; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px}
  .site-nav.open{display:block}
  .nav-list{flex-direction:column; align-items:flex-start}
  .nav-toggle{display:block; margin-left:auto}
  .contact-info-cards {
    gap: 1rem;
    margin-top: 1.5rem;
  }
}

/* Hero con imagen de fondo + overlay */
.hero-bg{
  position:relative;
  min-height: 100vh !important; /* Asegura que la altura mínima sea el 100% de la ventana */
  padding: 120px 0; /* Relleno ajustado para que el contenido se vea centrado */
  color:#fff;
  background-image:url('https://mmydseguridad.cl/wp-content/uploads/2025/08/retrato-de-guardia-de-seguridad-masculino-con-cerca-de-alambre-de-puas.jpg'); /* Nueva imagen de fondo */
  background-size:cover;
  background-position:center;
  display: flex; /* Añadido para centrar el contenido */
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
}
.hero-bg .hero-grid{position:relative; z-index:1}
.hero-bg .btn-primary{background:#fff; color:red}
.hero-bg .btn-secondary{border-color:#fff; color:#fff; background:transparent}
.hero-bg .trust-pills li{border-color:rgba(255,255,255,.4); color:#fff}
}

/* Icon cards */
.icon-card .icon{
  width:48px; height:48px; border-radius:12px;
  background:rgba(19,55,210,.1); color:var(--brand);
  display:grid; place-items:center; margin-bottom:10px;
}

/* Lead text */
.lead{color:#475569; max-width:800px}

/* 4-column & 5-column cards */
.cards-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.cards-5{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.benefits .b-card{border:1px solid var(--line); border-radius:16px; padding:18px; background:#fff}

/* title row */
.title-row{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px}
.title-row .link{color:var(--brand); text-decoration:none; font-weight:700}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.chip{border:1px solid var(--line); padding:8px 12px; border-radius:999px; font-weight:600}

/* steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.step{border:1px solid var(--line); border-radius:16px; padding:18px; background:#fff}
.step .n{width:32px; height:32px; border-radius:8px; display:inline-grid; place-items:center; background:rgba(19,55,210,.1); color:var(--brand); font-weight:800; margin-bottom:8px}

/* stats grid reuse (already exists): just ensure 4 cols */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}

/* FAQ */
.faq details{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:#fff; margin-bottom:10px}
.faq summary{cursor:pointer; font-weight:700}

/* CTA strip */
.cta-strip{
  /* Nuevo estilo mejorado */
  background: linear-gradient(90deg, #0f2bb0, var(--brand));
  color: #fff;
  padding: 40px 0;
  transition: all 0.3s ease;
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cta-strip:hover{
  background: linear-gradient(90deg, #0a1f80, #0c2bca);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.cta-row{display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap; gap: 1rem;}
.cta-row h3{margin:0; font-size: clamp(1.2rem, 2vw, 1.8rem);}
.cta-strip .btn-primary{
  background:#fff;
  color:white;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 700;
  transition: all 0.3s ease;
}
.cta-strip .btn-primary:hover {
  background: #b6b6b6;
  color: #fff;
  box-shadow: 0 4px 10px rgba(227, 6, 19, 0.4);
}


/* Responsive tweaks */
@media (max-width: 1100px){
  .cards-5{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 700px){
  .cards-4{grid-template-columns:1fr}
  .cards-5{grid-template-columns:1fr}
}

/* Radio global más serio */
:root{ --radius:10px }
.btn-primary, .btn-secondary, .btn-cta, .card, .simple-form input, .simple-form textarea,
.contact-box .box, .stat, .faq details, .icon-card .icon, .chips .chip { border-radius: var(--radius); }
.hero-media img, .footer-brand img, .img-wrap img { border-radius: var(--radius); }

/* Badge de experiencia */
.xp-badge{
  display:inline-block;
  margin-top:10px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  padding:6px 10px;
  border-radius:8px;
  font-weight:700;
  letter-spacing:.2px;
  backdrop-filter:saturate(140%) blur(2px);
}

/* Estrellas testimonios */
.stars{display:flex; gap:4px; margin-top:10px; color:#f59e0b}

/* img-wrap util */
.img-wrap{overflow:hidden; border-radius:var(--radius); border:1px solid var(--line)}
.img-wrap img{display:block; width:100%; height:auto}

/* Services hero */
.services-hero{align-items:center}

/* Footer logo sin invert */
.footer-brand .footer-logo{height:42px; margin-bottom:10px; filter:none}

/* Floating buttons con SVG y menos redondeo */
.floating-btn{
  width:auto; height:auto; padding:10px 14px; border-radius:12px;
  gap:8px; font-size:16px
}
.floating-btn svg{width:20px; height:20px; display:block}
.floating-btn.call{display:flex; align-items:center}
.floating-btn.wa{display:flex; align-items:center}

/* Override some earlier large radii to the new radius */
.hero-card, .stat { border-radius: var(--radius); }

/* Refinar tipografía y espaciado estilo corporativo */
body{
  font-family:'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size:16px;
  line-height:1.65;
  letter-spacing:0.2px;
  color:#1a1a1a;
}

h1,h2,h3{
  font-family:'Segoe UI Semibold', Roboto, sans-serif;
  letter-spacing:0.3px;
  color:#0f172a;
}
h1{font-size:clamp(32px,4vw,46px); margin-bottom:16px}
h2{font-size:clamp(24px,3vw,34px); margin-bottom:14px}
h3{font-size:20px; margin-bottom:8px}

p{margin-bottom:14px; color:#374151}

.section{padding:80px 0}
.section.muted{background:#f9fafb}
.container{max-width:1200px}

.cards-3, .cards-4, .cards-5{gap:24px}
.card{padding:24px}

.btn-primary, .btn-secondary, .btn-cta{
  font-size:15px; font-weight:600; letter-spacing:0.3px;
  padding:12px 20px;
  transition:background-color 0.3s ease, color 0.3s ease;
}
.btn-primary:hover{background-color:#0f2bb0}
.btn-secondary:hover{background-color:#b6b6b6; color:#fff}

.nav-list a{font-weight:500; font-size:15px; padding:6px 0}
.nav-list a:hover{color:var(--accent)}

footer .footer-links a, footer .footer-contact a{font-size:14px}

/* ===== v1.5: Tipografía & Espaciado refinados ===== */
:root{
  --radius:8px;            /* esquinas más rectas */
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --space-5:28px;
  --space-6:40px;
  --space-7:64px;
  --lead:1.5;
}

body{ font-size:16px; letter-spacing:.1px; }
h1{ font-size:clamp(30px,3.2vw,42px); font-weight:800; letter-spacing:.2px; }
h2{ font-size:clamp(22px,2.4vw,30px); font-weight:800; }
h3{ font-size:18px; font-weight:700; letter-spacing:.2px; }
p{ line-height:var(--lead); color:#334155; }

.section{ padding:var(--space-7) 0; }
.container{ width:min(1080px, 92%); }

/* Header más delgado, navegación subrayado fino al hover */
.header-wrap{ padding:10px 0 }
.nav-list a{
  position:relative; padding:6px 2px;
}
.nav-list a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--brand); transition:width .25s ease;
}
.nav-list a:hover::after{ width:100%; }

/* Botones más sobrios */
.btn-primary, .btn-secondary, .btn-cta{
  padding:10px 14px; border-radius:var(--radius); transition:transform .08s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.btn-primary:hover{ transform:translateY(-1px) }
.btn-secondary:hover{ background:rgb(182, 182, 182)}
.btn-cta{ padding:8px 12px }

/* Tarjetas más compactas, títulos más marcados */
.card{ padding:18px; border-radius:var(--radius); }
.card h3{ margin-bottom:6px; }
.bullets li{ margin:6px 0 }

/* Grids con gaps más precisos */
.cards-3{ gap:var(--space-3) }
.cards-4, .cards-5{ gap:var(--space-3) }
.two-col{ gap:var(--space-4) }
.stats{ gap:var(--space-3) }

/* Hero con overlay más sutil y copy compacto */
.hero-bg{ padding:84px 0 }
.hero-bg::after{ background:linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.38)) }
.hero-copy p{ font-size:17px; color:#e5e7eb }

/* FAQ y chips más sobrios */
.faq details{ padding:12px 14px }
.chip{ padding:7px 12px; font-weight:600 }

/* Estrellas más pequeñas y compactas */
.stars svg{ width:16px; height:16px }

/* Floating buttons más discretos */
.floating-btn{ border-radius:10px; padding:8px 12px; box-shadow:0 6px 16px rgba(0,0,0,.12) }
.floating-btn.call{ bottom:78px }

/* Footer tipografía más pequeña y clara */
.site-footer{ font-size:14px }
.footer-links a, footer .footer-contact a{ font-size:14px }
.footer-brand p{ color:#94a3b8 }

/* Responsivo fino */
@media (max-width: 900px){
  .section{ padding:var(--space-6) 0 }
  .hero-bg{ padding:64px 0 }
  .title-row{ flex-direction:column; align-items:flex-start }
}

/* --- Footer fixes --- */
.footer-grid{align-items:start}
.footer-contact ul, .footer-links ul{list-style:none; padding-left:0; margin:8px 0 0}
.footer-contact li, .footer-links li{margin:6px 0}
.footer-contact a, .footer-links a{display:inline-block}
.footer-bottom p{margin:0; text-align:center}
/* In case some plugins insert prefooter bars, keep spacing consistent */
.site-footer{margin-top:0}

/* Force hero main title to white */
.hero h1{color:#fff !important;text-shadow:0 2px 6px rgba(0,0,0,.5)}

/* Fondo para sección "Nuestro proceso" */
section.nuestro-proceso{
  position: relative;
  background-image: url('https://mmydseguridad.cl/img/protocolos-de-seguridad.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
}
section.nuestro-proceso::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
}
section.nuestro-proceso .container{ position: relative; z-index: 1; }
/* Asegura que el texto que esta sobre el fondo oscuro sea blanco */
section.nuestro-proceso > .container > h2,
section.nuestro-proceso > .container > p {
  color: #fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
/* Asegura que el texto dentro de los pasos sea negro */
.nuestro-proceso .step h3,
.nuestro-proceso .step p {
  color: #1b1b1b !important;
}

/* --- Fix "Nuestro proceso" background + colors --- */
section.nuestro-proceso{
  position:relative;
  background-image:url('https://mmydseguridad.cl/img/protocolos-de-seguridad.jpg') !important;
  background-size:cover; background-position:center;
  background-color:transparent !important;
}
section.nuestro-proceso::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45));
}
section.nuestro-proceso .container{ position:relative; z-index:1; }
/* Headings above the overlay */
section.nuestro-proceso > .container > h2{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35); }
/* Cards inside should keep dark text */
section.nuestro-proceso .card{ background:#fff; }
section.nuestro-proceso .card,
section.nuestro-proceso .card *{ color:var(--ink); }
/* Optional: give cards a subtle outline to stand out over photo edges */
section.nuestro-proceso .card{ box-shadow:0 8px 24px rgba(0,0,0,.08); border:1px solid var(--line); }
/* Add more padding top/bottom to muted sections */
.section.muted{
  padding: 100px 0; /* Aumenta el padding para más separación */
}
/* White color for floating buttons */
.floating-btn.call svg,
.floating-btn.wa svg {
    color: white; /* Cambia el color del ícono a blanco */
}
/* ===== ESTILOS PARA TARJETAS DE SERVICIO CON IMAGEN ===== */

/* 1. Ajustamos la tarjeta para que controle a la imagen */
.icon-card {
  display: flex;          /* Usamos flexbox para controlar los elementos internos */
  flex-direction: column; /* Apilamos los elementos: imagen arriba, contenido abajo */
  padding: 0;             /* Quitamos el padding de la tarjeta para que la imagen llegue a los bordes */
  overflow: hidden;         /* MUY IMPORTANTE: Recorta la imagen para que respete las esquinas redondeadas de la tarjeta */
}

/* 2. Hacemos que la imagen se comporte correctamente */
.icon-card img {
  width: 100%;            /* La imagen ocupa todo el ancho de la tarjeta */
  height: auto;           /* La altura se ajusta automáticamente para no deformar la imagen */
  aspect-ratio: 4 / 3;    /* FORZAMOS LA PROPORCIÓN: Todas las imágenes se verán del mismo tamaño (4:3) */
  object-fit: cover;      /* Evita que la imagen se estire o deforme, la recorta para que encaje perfecto */
}

/* 3. Devolvemos el padding al contenedor del texto */
.icon-card .card-content {
  padding: 18px;          /* Aplicamos el espaciado interno solo a la sección del texto */
  flex-grow: 1;           /* Ayuda a que todas las tarjetas mantengan la misma altura si el texto varía */
}