/* ==========================================================================
   Macel — Prevención de Riesgos Laborales
   Clon del mockup. Paleta y medidas leídas del pixel del original.
   ========================================================================== */

:root{
  --ancho: 1300px;

  --verde: #71a902;         /* acento: títulos, iconos, chevrons */
  --verde-btn: #437300;     /* relleno botones primarios */
  --verde-cta: #3a6901;     /* banda CTA final */
  --verde-claro: #eef5e4;

  --azul: #001e2e;          /* hero oscuro, footer */
  --azul-txt: #12263a;      /* títulos sobre blanco */
  --gris-txt: #4a5a68;      /* párrafos */
  --gris-suave: #6b7a87;
  --gris-sec: #f5f5f7;      /* fondos de sección tenues */
  --gris-borde: #e6e8ea;

  --radio: 10px;
  --radio-btn: 4px;
  --sombra: 0 2px 10px rgba(0,0,0,.05);
  --sombra-card: 0 4px 24px rgba(0,0,0,.07);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:"Barlow Semi Condensed","Roboto Condensed",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--gris-txt);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; color:var(--azul-txt); line-height:1.2; font-weight:700; }
p{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }

/* EJE ÚNICO — regla clave del layout.
   El .container define el ancho y el padding lateral. Los bloques que llevan
   `container` combinado con una clase de layout (hero__in, stats-wrap, grid-rec…)
   aplican ese mismo padding, así que TODO el contenido —logo, títulos, grillas,
   tarjetas y footer— comparte un único eje izquierdo.
   Antes el h1 arrancaba 20px antes que el logo y las grillas: medido en el
   original, ambos ejes coinciden (x=25 vs x=30 sobre 863px). */
.container{
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:1.25rem;
}
/* un .container anidado dentro de otro no vuelve a aplicar el padding */
.container .container{ padding-inline:0; max-width:none; }

/* ---------- utilidades ---------- */
.eyebrow{
  font-size:14px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--verde); margin-bottom:.75rem;
}
.h-sec{ font-size:35px; }
.h-sec--upper{ text-transform:uppercase; font-size:27px; letter-spacing:.01em; }

.rayita{
  width:46px; height:3px; background:var(--verde);
  border-radius:2px; margin:.9rem auto 0;
}
.rayita--izq{ margin-inline:0; }

.sec{ padding:46px 0; }
.sec--gris{ background:var(--gris-sec); }
/* recursos usa un gris aun mas tenue, medido #f7f7f7 en el original */
.sec--tenue{ background:#f7f7f7; }
.sec--borde{ border-top:1px solid var(--gris-borde); }

.centro{ text-align:center; }
.cab-sec{ margin-bottom:1.8rem; }
.cab-sec p{ margin-top:.85rem; font-size:14.5px; color:var(--gris-txt); }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.85rem 1.5rem; border-radius:var(--radio-btn);
  font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer;
  border:1px solid transparent; transition:.18s ease;
  white-space:nowrap;
}
.btn svg{ flex:none; }
.btn--verde{ background:var(--verde-btn); color:#fff; }
.btn--verde:hover{ background:#365e00; }
.btn--blanco{ background:#fff; color:var(--azul-txt); }
.btn--blanco:hover{ background:#f1f1f1; }
.btn--oscuro{ background:var(--azul); color:#fff; }
.btn--oscuro:hover{ background:#022c42; }
.btn--linea{ background:transparent; color:var(--verde-btn); border-color:#b9d18f; }
.btn--linea:hover{ background:var(--verde-claro); }

.link-mas{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--verde-btn); font-weight:600; font-size:14px;
}
.link-mas:hover{ gap:.75rem; }

/* ---------- placeholders (capa 1) ---------- */
.ph{ background:#f1f1f1; display:block; }
.ph-img{ width:100%; height:100%; object-fit:cover; }

/* ---------- iconos SVG (capa 3) ---------- */
/* Dibujados midiendo el original. Heredan tamaño del contenedor y color por currentColor.
   object-fit:contain conserva el ratio medido (p.ej. camión 1.79) dentro de cajas cuadradas. */
.ic{ width:100%; height:100%; display:block; object-fit:contain; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  background:#fff; position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--gris-borde);
}
.header__in{
  display:flex; align-items:center; gap:2rem;
  height:76px;
}
.logo{ display:flex; align-items:center; flex:none; }
.logo img{ height:42px; width:auto; }

.nav{ margin-left:auto; }
.nav__lista{ display:flex; align-items:center; gap:1.9rem; }
.nav__link{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:13.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--azul-txt);
  padding:.4rem 0; position:relative;
}
.nav__link:hover{ color:var(--verde-btn); }
.nav__item--activo > .nav__link{ color:var(--verde-btn); }
.nav__item--activo > .nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--verde-btn);
}
.nav__link svg{ width:9px; height:9px; opacity:.75; }

/* desplegables */
.nav__item{ position:relative; }
.nav__sub{
  position:absolute; top:100%; left:-1rem; min-width:262px;
  background:#fff; border:1px solid var(--gris-borde);
  border-radius:8px; box-shadow:var(--sombra-card);
  padding:.5rem; opacity:0; visibility:hidden;
  transform:translateY(6px); transition:.16s ease; z-index:60;
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub{ opacity:1; visibility:visible; transform:translateY(0); }
.nav__sub a{
  display:block; padding:.55rem .75rem; border-radius:5px;
  font-size:14px; color:var(--gris-txt);
}
.nav__sub a:hover{ background:var(--verde-claro); color:var(--verde-btn); }

.btn-wa{
  display:inline-flex; align-items:center; gap:.55rem; flex:none;
  background:var(--verde-btn); color:#fff;
  padding:.7rem 1.15rem; border-radius:6px;
  font-size:14px; font-weight:600;
}
.btn-wa:hover{ background:#365e00; }
.btn-wa svg{ width:20px; height:20px; flex:none; }

/* botón hamburguesa */
.burger{
  display:none; margin-left:auto; background:none; border:0;
  padding:.5rem; cursor:pointer; color:var(--azul-txt);
}

/* ==========================================================================
   HERO — patrón split con degradado (la foto se funde con el fondo)
   ========================================================================== */
.hero{ position:relative; background:var(--azul); overflow:hidden; }
/* La foto cubre TODO el hero y el degradado la funde con el fondo.
   Medido en el original: el fondo azul plano llega al 19% del ancho de página
   y desde ahí la foto ya se insinúa. Por eso el degradado va sobre el bloque
   completo (inset:0), no sobre una columna derecha. */
.hero__foto{ position:absolute; inset:0; }
.hero__foto .ph,.hero__foto img{ width:100%; height:100%; object-fit:cover; object-position:58% center; }
.hero__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--azul) 0%, var(--azul) 14%,
    rgba(0,30,46,.93) 24%, rgba(0,30,46,.72) 36%,
    rgba(0,30,46,.42) 50%, rgba(0,30,46,.16) 66%, rgba(0,30,46,0) 82%);
}
.hero__in{ position:relative; z-index:2; padding-block:62px 104px; }
.hero__txt{ max-width:560px; }
/* Medido en el original: la caja de mayúsculas de "DE RIESGOS LABORALES" son
   19px sobre una página de 863 → ~29.5px a 1340 de ancho → fuente ~41px. */
.hero h1{
  color:#fff; font-size:clamp(27px, 7.4vw, 41px); line-height:1.12; letter-spacing:-.005em;
  margin-bottom:1.2rem;
}
.hero h1 .fina{ display:block; font-weight:400; font-size:clamp(22px, 6vw, 33px); }
.hero h1 .verde{ display:block; color:var(--verde); }
.hero h1 .linea{ display:block; white-space:nowrap; }
@media (max-width:760px){ .hero h1 .linea{ white-space:normal; } }
.hero__bajada{ color:#dfe6eb; font-size:15.5px; line-height:1.75; max-width:420px; }

.hero__features{
  display:flex; gap:2.4rem; margin:1.7rem 0 1.8rem; flex-wrap:wrap;
}
.feature{ display:flex; align-items:center; gap:.7rem; }
.feature__ico{ width:30px; height:30px; flex:none; color:var(--verde); }
.feature__ico .ph{ width:100%; height:100%; border-radius:4px; }
.feature span{ color:#fff; font-size:13.5px; font-weight:600; line-height:1.35; }

.hero__botones{ display:flex; gap:1rem; flex-wrap:wrap; }

/* tarjeta flotante del hero (inicio) — dentro del contenedor de 1250px */
.hero__tarjeta{
  position:absolute; z-index:3; bottom:104px;
  right:max(1.25rem, calc((100% - var(--ancho)) / 2 + 1.25rem));
  background:rgba(2,26,38,.93); border:1px solid rgba(255,255,255,.13);
  border-radius:8px; padding:1.4rem 1.7rem;
  display:flex; align-items:center; gap:1rem;
}
.hero__tarjeta .ico{ width:38px; height:38px; flex:none; color:#fff; }
.hero__tarjeta .ico .ph{ width:100%; height:100%; border-radius:4px; }
.hero__tarjeta b{
  display:block; font-size:13px; letter-spacing:.09em; line-height:1.55;
  text-transform:uppercase; color:#fff; font-weight:700;
}
.hero__tarjeta b i{ font-style:normal; color:var(--verde); }

/* hero claro (nosotros) — media lateral que sangra al borde */
.hero--claro{ background:var(--gris-sec); }
.hero--claro .hero__foto{ inset:0 0 0 50%; }
.hero--claro .hero__foto::after{
  background:linear-gradient(90deg,
    var(--gris-sec) 0%, rgba(245,245,247,.85) 18%, rgba(245,245,247,.25) 45%, rgba(245,245,247,0) 70%);
}
.hero--claro h1{ color:var(--azul-txt); font-size:41px; }
.hero--claro h1 .verde{ color:var(--verde-btn); }
.hero--claro .hero__bajada{ color:var(--gris-txt); }
.hero--claro .hero__in{ padding-block:56px 74px; }
.hero--claro .hero__txt{ max-width:520px; }
.hero--claro .hero__bajada + .hero__bajada{ margin-top:1.2rem; }

/* hero de páginas interiores (servicios, contacto) */
.hero--int .hero__in{ padding-block:56px 58px; }
.hero--int h1{ font-size:44px; }

/* ==========================================================================
   BARRA DE STATS (montada sobre el borde del hero)
   ========================================================================== */
.stats-wrap{ position:relative; z-index:5; margin-top:-64px; }
.stats{
  background:#fff; border-radius:var(--radio); box-shadow:var(--sombra-card);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{
  display:flex; align-items:center; gap:.95rem;
  padding:1.7rem 1.6rem;
}
.stat + .stat{ border-left:1px solid var(--gris-borde); }
.stat__ico{ width:34px; height:34px; flex:none; color:var(--verde); }
.stat__ico .ph{ width:100%; height:100%; border-radius:4px; }
.stat b{ display:block; color:var(--azul-txt); font-size:19px; line-height:1.25; }
.stat span{ font-size:13.5px; color:var(--gris-suave); }

/* ==========================================================================
   TARJETAS DE SERVICIO (inicio) — 6 en fila
   ========================================================================== */
.grid-serv{ display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; }
.card-serv{
  border:1px solid var(--gris-borde); border-radius:var(--radio);
  background:#fff; padding:1.3rem .7rem 1.05rem;
  display:flex; flex-direction:column; text-align:center;
  transition:.18s ease;
}
.card-serv:hover{ box-shadow:var(--sombra-card); transform:translateY(-3px); }
/* Medido en el original: los iconos ocupan 67-70px de alto a 1340 de ancho.
   width:100% + max-width deja que el camion (ratio 1.79) use su ancho sin
   encogerse en altura respecto a los demas. */
.card-serv__ico{
  height:60px; width:100%; max-width:96px; margin:0 auto 1rem; color:var(--verde-btn);
  display:grid; place-items:center;
}
.card-serv__ico .ic{ height:100%; width:auto; max-width:100%; }
.card-serv__ico .ph{ width:100%; height:100%; border-radius:6px; }
/* min-height reserva el alto de 2 líneas (lo que usa el original en la mayoría
   de los títulos); los párrafos siguen arrancando parejos sin inflar la tarjeta. */
.card-serv h3{ font-size:14.5px; margin-bottom:.65rem; min-height:3.8em; line-height:1.28; }
.card-serv p{ font-size:12.5px; line-height:1.65; color:var(--gris-suave); flex:1; }
.card-serv__flecha{
  width:26px; height:26px; margin:1.25rem auto 0; align-self:center;
  border:1px solid #cfe0b3; border-radius:50%; flex:none;
  display:grid; place-items:center; color:var(--verde-btn);
}
.card-serv__flecha svg{ width:13px; height:13px; }

/* ==========================================================================
   CURSOS ONLINE (inicio)
   ========================================================================== */
.cursos > *{ min-width:0; }   /* sin esto el carrusel estira la columna y descuadra el movil */
.cursos{ display:grid; grid-template-columns:255px 1fr; gap:2.4rem; align-items:start; }
.cursos__intro h2{ font-size:33px; margin-bottom:.5rem; }
.cursos__intro > p{ font-size:14px; margin-bottom:1.5rem; }
.lista-check{ display:grid; gap:.6rem; margin-bottom:1.3rem; }
.lista-check li{ display:flex; align-items:center; gap:.65rem; font-size:14px; color:var(--azul-txt); }
.lista-check .ico{ width:17px; height:17px; flex:none; color:var(--verde-btn); }
.lista-check .ico .ph{ width:100%; height:100%; border-radius:50%; }

.carrusel{ position:relative; }
/* Se muestran 4 tarjetas y la 5ª queda fuera de vista; la flecha desplaza a ella.
   --vis controla cuántas se ven: cada tarjeta mide (100% - gaps) / --vis. */
.carrusel__pista{
  --vis:4; --gap:1rem;
  display:flex; gap:var(--gap);
  overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.carrusel__pista > *{
  flex:0 0 calc((100% - (var(--vis) - 1) * var(--gap)) / var(--vis));
}
.carrusel__pista::-webkit-scrollbar{ display:none; }
.card-curso{
  background:#fff; border:1px solid var(--gris-borde); border-radius:var(--radio);
  overflow:hidden; display:flex; flex-direction:column;
}
.card-curso__foto{ position:relative; aspect-ratio:4/2.75; }
.card-curso__foto .ph,.card-curso__foto img{ width:100%; height:100%; object-fit:cover; }
.badge{
  position:absolute; top:.6rem; left:.6rem;
  background:var(--verde-btn); color:#fff;
  font-size:9.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:.28rem .5rem; border-radius:3px;
}
.card-curso__cuerpo{ padding:1.15rem 1.05rem 1.25rem; display:flex; flex-direction:column; flex:1; }
/* 2 líneas reservadas: los párrafos de todas las tarjetas arrancan parejos */
.card-curso h3{ font-size:14.5px; line-height:1.3; margin-bottom:.55rem; min-height:2.6em; }
.card-curso p{ font-size:12.5px; line-height:1.6; color:var(--gris-suave); margin-bottom:1.2rem; }
.card-curso .btn{
  margin-top:auto; align-self:flex-start;
  padding:.6rem .85rem; font-size:11px;
}
.carrusel__flecha{
  position:absolute; right:-16px; top:42%;
  width:34px; height:34px; border-radius:50%;
  background:#fff; border:1px solid var(--gris-borde);
  box-shadow:var(--sombra); display:grid; place-items:center;
  cursor:pointer; color:var(--azul-txt); z-index:4;
}

/* ==========================================================================
   BLOG (inicio)
   ========================================================================== */
/* el botón comparte centro vertical con el bloque de título+bajada */
.blog__cab{ display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-bottom:1.7rem; }
.blog__cab h2{ font-size:30px; }
.blog__cab h2 b{ color:var(--azul-txt); }
.blog__cab p{ margin-top:.5rem; font-size:14px; }
.grid-blog{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.card-post__foto{ aspect-ratio:16/7; border-radius:8px; overflow:hidden; margin-bottom:.8rem; }
.card-post__foto .ph,.card-post__foto img{ width:100%; height:100%; object-fit:cover; }
.card-post h3{ font-size:17px; margin-bottom:.6rem; }
.card-post p{ font-size:13.5px; line-height:1.7; margin-bottom:.9rem; }

/* ==========================================================================
   RECURSOS (inicio) — 3 columnas
   ========================================================================== */
.grid-rec{ display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; }
.col-rec{ display:flex; flex-direction:column; }
.col-rec h3{ font-size:20px; margin-bottom:.7rem; }
.col-rec > p{ font-size:13.5px; line-height:1.65; margin-bottom:1.1rem; min-height:2.7em; }
.col-rec > .btn{ margin-top:auto; align-self:flex-start; }
.logos{ display:flex; gap:.6rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.logo-inst{
  width:66px; border:1px solid var(--gris-borde); border-radius:7px;
  padding:.6rem .35rem; text-align:center; background:#fff;
}
.logo-inst .marca{ height:26px; margin-bottom:.4rem; }
.logo-inst .marca .ph{ width:100%; height:100%; border-radius:3px; }
.logo-inst span{ font-size:9.5px; line-height:1.25; display:block; color:var(--gris-suave); }
.lista-desc{ display:grid; gap:.7rem; margin-bottom:1.3rem; }
.lista-desc li{ display:flex; align-items:center; gap:.7rem; font-size:13.5px; color:var(--gris-txt); }
.lista-desc .ico{ width:15px; height:15px; flex:none; color:var(--verde-btn); }
.lista-desc .ico .ph{ width:100%; height:100%; }

/* ==========================================================================
   NOSOTROS
   ========================================================================== */
.mv-wrap{ position:relative; z-index:5; margin-top:-58px; }
.mv{
  background:#fff; border-radius:var(--radio); box-shadow:var(--sombra-card);
  display:grid; grid-template-columns:1fr 1fr;
}
.mv__col{ display:flex; gap:1.2rem; padding:1.6rem 1.8rem; }
.mv__col + .mv__col{ border-left:1px solid var(--gris-borde); }
.mv__ico{ width:52px; height:52px; flex:none; color:var(--verde-btn); }
.mv__ico .ph{ width:100%; height:100%; border-radius:6px; }
.mv h3{ font-size:16px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.7rem; }
.mv p{ font-size:13.5px; line-height:1.75; }

.grid-valores{ display:grid; grid-template-columns:repeat(5,1fr); align-items:start; }
.valor{ text-align:center; padding:0 1.3rem; }
.valor + .valor{ border-left:1px solid var(--gris-borde); }
/* Medido en el original: los iconos de valores ocupan 48-56px a 1340 de ancho. */
.valor__ico{ height:52px; width:100%; max-width:64px; margin:0 auto 1.1rem; color:var(--verde-btn); display:grid; place-items:center; }
.valor__ico .ic{ height:100%; width:auto; max-width:100%; }
.valor__ico .ph{ width:100%; height:100%; border-radius:6px; }
.valor h3{ font-size:15.5px; margin-bottom:.75rem; }
.valor p{ font-size:13px; line-height:1.7; color:var(--gris-suave); }

.dos-col{ display:grid; grid-template-columns:.85fr 1.15fr; gap:3.4rem; align-items:start; }
.dos-col > div{ min-width:0; }
.lista-porque{ display:grid; gap:.75rem; }
.lista-porque li{ display:flex; align-items:flex-start; gap:.8rem; font-size:14px; color:var(--azul-txt); }
.lista-porque .ico{ width:19px; height:19px; flex:none; margin-top:.1rem; color:var(--verde-btn); }
.lista-porque .ico .ph{ width:100%; height:100%; border-radius:50%; }

/* pasos (nosotros y servicios) */
.pasos{ display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; position:relative; }
.paso{ text-align:center; position:relative; }
.paso__ico{
  width:60px; height:60px; margin:0 auto; border-radius:50%;
  border:1.5px solid #cfe0b3; display:grid; place-items:center;
  background:#fff; color:var(--verde-btn); position:relative; z-index:2;
}
.paso__ico .ph{ width:30px; height:30px; border-radius:4px; }
.paso__ico svg{ width:30px; height:30px; }
.paso__num{
  width:22px; height:22px; margin:-11px auto .8rem; position:relative; z-index:3;
  background:var(--verde-btn); color:#fff; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:700;
  border:2px solid #fff;
}
.paso h3{ font-size:14.5px; margin-bottom:.4rem; }
.paso p{ font-size:12.5px; line-height:1.6; color:var(--gris-suave); }
/* línea punteada que une los pasos */
.paso:not(:last-child)::after{
  content:""; position:absolute; top:30px; left:calc(50% + 34px); right:calc(-50% + 34px);
  border-top:1.5px dashed #d3ddc4; z-index:1;
}

.compromiso{
  background:#f8f8f6; border-radius:var(--radio);
  display:grid; grid-template-columns:.8fr 1.2fr; gap:2.2rem;
  padding:1.7rem 1.9rem; align-items:center;
}
.compromiso h2{ color:var(--verde-btn); font-size:19px; letter-spacing:.06em; text-transform:uppercase; }
.compromiso p{ font-size:13.5px; line-height:1.8; margin-top:1rem; }
.compromiso__fotos{ display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; }
.compromiso__fotos > *{ aspect-ratio:3/3.4; border-radius:7px; overflow:hidden; }
.compromiso__fotos img{ width:100%; height:100%; object-fit:cover; }

.direccion{
  border:1px solid var(--gris-borde); border-radius:var(--radio);
  display:grid; grid-template-columns:auto 1fr; gap:1.8rem;
  padding:1.4rem 1.7rem; align-items:center; margin-top:1.9rem;
}
.direccion__izq{ display:flex; align-items:center; gap:1.1rem; padding-right:2rem; border-right:1px solid var(--gris-borde); }
.direccion__ico{ width:52px; height:52px; flex:none; border:1.5px solid #cfe0b3; border-radius:50%; display:grid; place-items:center; color:var(--verde-btn); }
.direccion__ico .ph{ width:26px; height:26px; border-radius:4px; }
.direccion h3{ font-size:15px; letter-spacing:.06em; text-transform:uppercase; line-height:1.35; }
.direccion p{ font-size:13.5px; line-height:1.8; }

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
.grid-serv2{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.card-serv2{
  border:1px solid var(--gris-borde); border-radius:var(--radio);
  background:#fff; overflow:hidden; display:flex; flex-direction:column;
  transition:.18s ease;
}
.card-serv2:hover{ box-shadow:var(--sombra-card); transform:translateY(-3px); }
/* icono a la izquierda y foto a la derecha sangrando al borde (como el original) */
.card-serv2__top{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.9rem; padding:0 0 0 1.1rem; }
.card-serv2__ico{
  width:56px; height:56px; flex:none; border:1.5px solid #cfe0b3;
  border-radius:50%; display:grid; place-items:center; color:var(--verde-btn);
}
.card-serv2__ico .ph{ width:28px; height:28px; border-radius:4px; }
.card-serv2__ico svg{ width:28px; height:28px; }
.card-serv2__foto{ height:118px; overflow:hidden; }
.card-serv2__foto .ph,.card-serv2__foto img{ width:100%; height:100%; object-fit:cover; }
.card-serv2__cuerpo{ padding:.95rem 1.1rem 1.1rem; display:flex; flex-direction:column; flex:1; }
.card-serv2 h3{ font-size:17px; margin-bottom:.7rem; }
.card-serv2 p{ font-size:13.5px; line-height:1.65; color:var(--gris-suave); margin-bottom:.85rem; }
.card-serv2 .link-mas{ margin-top:auto; align-self:flex-start; }

.compl{
  background:#f8f8f6; border-radius:var(--radio);
  padding:1.5rem 0 1.5rem 1.9rem;
  display:grid; grid-template-columns:1fr 1fr 300px;
  gap:1.4rem 1.8rem; align-items:start; overflow:hidden;
}
.compl__item{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.compl__ico{
  width:58px; height:58px; flex:none; border-radius:50%;
  border:1.5px solid #cfe0b3; display:grid; place-items:center; color:var(--verde-btn);
}
.compl__ico--relleno{ background:var(--verde-btn); border-color:var(--verde-btn); color:#fff; }
.compl__ico .ph{ width:28px; height:28px; border-radius:4px; }
.compl__ico svg{ width:28px; height:28px; }
.compl__item h3{ font-size:15.5px; margin-bottom:.55rem; }
.compl__item p{ font-size:13px; line-height:1.7; color:var(--gris-suave); margin-bottom:.8rem; }
.compl__foto{
  grid-row:1/span 2; grid-column:3; align-self:stretch;
  min-height:190px; margin:-1.8rem 0; overflow:hidden;
}
.compl__foto .ph,.compl__foto img{ width:100%; height:100%; object-fit:cover; }
.compl__titulo{ grid-column:1/3; }
.compl__titulo h2{ font-size:19px; letter-spacing:.06em; text-transform:uppercase; color:var(--verde-btn); }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.datos{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.dato{ display:flex; align-items:center; gap:.95rem; }
.dato__ico{
  width:46px; height:46px; flex:none; border-radius:50%;
  border:1.5px solid #cfe0b3; display:grid; place-items:center; color:var(--verde-btn);
}
.dato__ico .ph{ width:22px; height:22px; border-radius:4px; }
.dato__ico svg{ width:20px; height:20px; }
.dato span{ display:block; font-size:13.5px; color:var(--gris-suave); }
.dato b{ display:block; font-size:14.5px; color:var(--azul-txt); line-height:1.4; }

.contacto-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:start; }
.form h2,.ayuda h2{ font-size:22px; margin-bottom:.6rem; }
.form .rayita{ margin:0 0 1.7rem; }
.ayuda > p{ font-size:13.5px; line-height:1.7; margin-bottom:1.5rem; }

.campos{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.campo{ display:flex; flex-direction:column; }
.campo--full{ grid-column:1/-1; }
.campo label{ font-size:12.5px; color:var(--gris-suave); margin-bottom:.4rem; }
.campo input,.campo select,.campo textarea{
  width:100%; padding:.8rem .9rem;
  border:1px solid var(--gris-borde); border-radius:5px;
  background:#fff; font-size:14px; color:var(--azul-txt);
  transition:.15s ease;
}
.campo textarea{ min-height:118px; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(113,169,2,.12);
}
.campo input::placeholder,.campo textarea::placeholder{ color:#9aa7b1; }
.req{ color:#c0392b; }
.form .btn{ margin-top:1.3rem; }

.lista-ayuda{ display:grid; gap:.62rem; }
.lista-ayuda li{ display:flex; align-items:center; gap:.75rem; font-size:14px; color:var(--azul-txt); }
.lista-ayuda .ico{ width:19px; height:19px; flex:none; color:var(--verde-btn); }
.lista-ayuda .ico .ph{ width:100%; height:100%; border-radius:50%; }

.mapa{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.mapa h2{ font-size:23px; margin-bottom:.8rem; }
.mapa p{ font-size:14px; line-height:1.75; }
.mapa__fig{ height:210px; position:relative; }
.mapa__fig .ph{ width:100%; height:100%; border-radius:8px; }

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.cta{ background:var(--verde-cta); padding-block:1.6rem; }
/* align-items:center alinea los 3 bloques por su centro vertical real */
.cta__in{ display:flex; align-items:center; gap:1.6rem; }
.cta__in > div{ display:flex; flex-direction:column; justify-content:center; }
.cta__ico{
  width:56px; height:56px; flex:none; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5); display:grid; place-items:center; color:#fff;
}
.cta__ico .ph{ width:28px; height:28px; border-radius:4px; }
.cta__ico svg{ width:30px; height:30px; }
.cta h2{ color:#fff; font-size:22px; }
.cta p{ color:rgba(255,255,255,.9); font-size:14.5px; margin-top:.2rem; }
.cta .btn{ margin-left:auto; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--azul); color:#c3ced6; padding:2.4rem 0 0; }
/* 3 columnas: marca + servicios + contacto (la de cursos se eliminó) */
.footer__grid{ display:grid; grid-template-columns:1.35fr 1fr 1.1fr; gap:3rem; }
.footer__logo img{ height:40px; }
.footer__grid p{ font-size:12.5px; line-height:1.6; }
.footer h4{
  color:#fff; font-size:12.5px; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:.85rem;
}
.footer__lista{ display:grid; gap:.42rem; }
.footer__lista a,.footer__lista li{ font-size:12.5px; color:#c3ced6; }
.footer__lista a:hover{ color:#fff; }
.footer__lista--chev li{ display:flex; align-items:center; gap:.5rem; }
.footer__lista--chev .ico{ width:11px; height:11px; flex:none; color:var(--verde); }
.footer__lista--chev .ico .ph{ width:100%; height:100%; }
.footer__contacto li{ display:flex; align-items:flex-start; gap:.6rem; font-size:12.5px; line-height:1.45; margin-bottom:.55rem; }
.footer__contacto .ico{ width:15px; height:15px; flex:none; margin-top:.1rem; color:var(--verde); }
.footer__contacto .ico .ph{ width:100%; height:100%; border-radius:3px; }
.redes{ display:flex; gap:.5rem; margin-top:.95rem; }
.redes a{
  width:29px; height:29px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); display:grid; place-items:center;
  color:#c3ced6;
}
.redes a:hover{ background:rgba(255,255,255,.1); color:#fff; }
.redes .ph{ width:14px; height:14px; border-radius:3px; }
.redes svg{ width:14px; height:14px; }
.footer__bajo{
  margin-top:1.9rem; border-top:1px solid rgba(255,255,255,.12);
  padding:.85rem 0; display:flex; justify-content:space-between; gap:1.5rem;
  font-size:12px; flex-wrap:wrap;
}
.footer__bajo nav{ display:flex; gap:1.5rem; }

/* burbuja whatsapp */
.wa-flota{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:54px; height:54px; border-radius:50%;
  background:#25d366; display:grid; place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.22); color:#fff;
}
.wa-flota svg{ width:30px; height:30px; }
.wa-flota .ph{ width:30px; height:30px; border-radius:50%; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .grid-serv{ grid-template-columns:repeat(3,1fr); }
  .carrusel__pista{ --vis:3; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--gris-borde); }
  .grid-valores{ grid-template-columns:repeat(3,1fr); row-gap:2.4rem; }
  .valor:nth-child(4){ border-left:0; }
  .grid-serv2{ grid-template-columns:repeat(2,1fr); }
  .compl{ grid-template-columns:auto 1fr; }
  .compl__foto{ width:100%; grid-column:1/-1; }
}

@media (max-width:900px){
  /* La hamburguesa solo aparece si hay JS para operarla. */
  .js .burger{ display:block; }
  .nav{
    position:absolute; top:76px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--gris-borde);
    box-shadow:var(--sombra-card); padding:1rem 1.25rem;
  }
  /* Sin JS el menú queda visible y navegable; con JS se pliega tras la hamburguesa. */
  .js .nav{ display:none; }
  .js .nav.abierto{ display:block; }
  .nav__lista{ flex-direction:column; align-items:stretch; gap:.2rem; }
  .nav__link{ padding:.7rem 0; }
  .nav__sub{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-left:2px solid var(--gris-borde);
    border-radius:0; padding:0 0 .5rem .75rem; margin-bottom:.4rem;
  }
  .js .nav__sub{ display:none; }
  .js .nav__item--abierto .nav__sub{ display:block; }
  .header .btn-wa{ margin-left:auto; }

  .hero__foto{ inset:0; opacity:.28; }
  .hero__foto::after{ background:linear-gradient(180deg, rgba(0,30,46,.9), rgba(0,30,46,.75)); }
  .hero--claro .hero__foto{ opacity:.35; }
  .hero--claro .hero__foto::after{ background:linear-gradient(180deg, rgba(245,245,247,.9), rgba(245,245,247,.8)); }
  .hero__tarjeta{ position:static; margin-top:2rem; display:inline-flex; }
  .hero__txt{ max-width:none; }

  .cursos{ grid-template-columns:1fr; }
  .carrusel__pista{ --vis:2; }
  .carrusel__flecha{ display:none; }
  .grid-blog{ grid-template-columns:1fr; }
  .grid-rec{ grid-template-columns:1fr; gap:2.4rem; }
  .mv{ grid-template-columns:1fr; }
  .mv__col + .mv__col{ border-left:0; border-top:1px solid var(--gris-borde); }
  .dos-col{ grid-template-columns:1fr; gap:2.6rem; }
  .pasos{ grid-template-columns:repeat(2,1fr); row-gap:2rem; }
  .paso::after{ display:none; }
  .compromiso{ grid-template-columns:1fr; }
  .direccion{ grid-template-columns:1fr; gap:1.2rem; }
  .direccion__izq{ border-right:0; border-bottom:1px solid var(--gris-borde); padding:0 0 1.2rem; }
  .contacto-grid{ grid-template-columns:1fr; gap:2.6rem; }
  .datos{ grid-template-columns:repeat(2,1fr); gap:1.8rem; }
  .mapa{ grid-template-columns:1fr; }
  .cta__in{ flex-direction:column; align-items:flex-start; }
  .cta .btn{ margin-left:0; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}

@media (max-width:600px){
  .sec{ padding:52px 0; }
  .grid-serv{ grid-template-columns:1fr; }
  .grid-serv2{ grid-template-columns:1fr; }
  .carrusel__pista{ --vis:1.15; }
  /* en 375px el boton de WhatsApp del header no cabe (flex:none, no se encoge)
     y era lo unico que seguia empujando la pagina: se deja solo el icono */
  .header .btn-wa{ font-size:0; gap:0; padding:.6rem .55rem; }
  .header .btn-wa svg{ width:20px; height:20px; }
  .stats{ grid-template-columns:1fr; }
  .stat + .stat{ border-left:0; border-top:1px solid var(--gris-borde); }
  .grid-valores{ grid-template-columns:1fr; }
  .valor + .valor{ border-left:0; border-top:1px solid var(--gris-borde); padding-top:1.8rem; }
  .pasos{ grid-template-columns:1fr; }
  .campos{ grid-template-columns:1fr; }
  .datos{ grid-template-columns:1fr; }
  .compl{ grid-template-columns:1fr; }
  .compromiso__fotos{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr; }
  .h-sec{ font-size:27px; }
  .blog__cab{ flex-direction:column; }
}

/* mapa de Chile (contacto) — silueta tendida en horizontal con pines, como el original */
.mapa-chile{ width:100%; height:100%; display:block; }

/* Bajada del logo: en el original va como texto bajo la marca (el PNG del
   cliente solo trae estrella + "Macel", ratio 3.2 contra 4.8 del mockup). */
.logo{ flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; align-self:center; }
.logo__bajada{
  font-size:9px; letter-spacing:.115em; text-transform:uppercase;
  color:var(--azul-txt); white-space:nowrap; font-weight:500;
}
.footer__logo{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin-bottom:.9rem; }
.footer__logo .logo__bajada{ color:#c3ced6; font-size:8.5px; }

/* honeypot antispam: invisible para personas, visible para bots */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* avisos de envío del formulario (se muestran según ?envio=ok|error) */
.aviso{ display:none; padding:.85rem 1rem; border-radius:6px; font-size:14px; margin-bottom:1.2rem; }
.aviso--ok{ background:var(--verde-claro); color:#2f5200; border:1px solid #b9d18f; }
.aviso--error{ background:#fdecea; color:#8a2318; border:1px solid #f3bdb6; }
body.envio-ok .aviso--ok{ display:block; }
body.envio-error .aviso--error{ display:block; }