/* ══════════════════════════════════════════════════════════════
   Defensur — variante minimalista (referencia: heymark.ai)
   Hoja independiente: no toca site.css, así el resto del sitio
   sigue intacto mientras se evalúa esta versión.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:#FCFCFC;
  --surface:#FFFFFF;
  --ink:#1A1A1A;
  --ink-2:#5C5C5C;
  --ink-3:#8A8A8A;
  --line:#E7E7E7;
  --line-strong:#D4D4D4;
  --accent:#3B9EFF;        /* azul de marca, solo decorativo */
  --accent-ink:#0B63C4;    /* azul accesible para texto/enlaces */
  --accent-soft:#EDF5FE;
  --navy:#021528;
  --radius:14px;
  --maxw:1120px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink-2);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ══ Tipografía ══ */
.display,h1,h2,h3{font-family:'Space Grotesk','Manrope',sans-serif;color:var(--ink);font-weight:500}
h1{font-size:clamp(2.6rem,6.2vw,4.4rem);line-height:1.02;letter-spacing:-.04em}
h2{font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:-.035em}
h3{font-size:1.1rem;line-height:1.35;letter-spacing:-.015em;font-weight:600}
.lead{font-size:1.2rem;line-height:1.55;color:var(--ink-2);max-width:620px}
.eyebrow{display:block;font-size:.8rem;letter-spacing:.02em;color:var(--ink-3);margin-bottom:14px}
.m-muted{color:var(--ink-3)}
.m-ink{color:var(--ink)}
strong{color:var(--ink);font-weight:600}

/* ══ Botones ══ */
.btn,.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Manrope',sans-serif;font-size:.95rem;font-weight:600;letter-spacing:-.01em;
  padding:14px 26px;border-radius:999px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
  border:1px solid transparent;
}
.btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:#fff}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.m-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* ══ Navegación ══ */
.m-nav{position:sticky;top:0;z-index:500;background:rgba(252,252,252,.85);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .25s}
.m-nav.scrolled{border-bottom-color:var(--line)}
.m-nav-in{max-width:var(--maxw);margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.m-logo{height:42px;width:auto}
.m-links{display:flex;gap:28px;list-style:none}
.m-links a{font-size:.95rem;color:var(--ink-2);font-weight:500;transition:color .2s;white-space:nowrap}
.m-links a:hover{color:var(--ink)}
.m-nav-cta{display:flex;align-items:center;gap:14px}
.m-nav-cta .btn{padding:11px 22px;font-size:.9rem}
.m-burger{display:none;flex-direction:column;gap:5px;width:26px;cursor:pointer}
.m-burger span{height:2px;background:var(--ink);border-radius:2px}

/* ══ Hero ══ */
/* Hero con foto de fondo.
   La imagen tiene al guardia a la derecha y zona clara a la izquierda, justo
   donde va el texto. El degradado va del color de fondo (izquierda) a
   transparente (derecha), asi el titular mantiene contraste y la foto respira. */
.m-hero{position:relative;isolation:isolate;padding:120px 0 90px;overflow:hidden}
.m-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url('/img/hero-minimal.webp') right center/cover no-repeat;
}
.m-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,
    var(--bg) 0%,
    var(--bg) 26%,
    rgba(252,252,252,.94) 40%,
    rgba(252,252,252,.62) 57%,
    rgba(252,252,252,.20) 78%,
    rgba(252,252,252,0) 100%);
}
.m-hero .wrap{position:relative;z-index:1}
.m-badge{display:inline-flex;align-items:center;gap:9px;font-size:.82rem;color:var(--ink-2);background:var(--accent-soft);border:1px solid #D7E8FB;padding:7px 15px;border-radius:999px;margin-bottom:34px}
.m-badge i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:block}
/* 21ch: "DefensurSeguridad." mide ~684px a 70px y con 16ch se partia a
   mitad de palabra en pantallas algo mas angostas. text-wrap:balance
   reparte mejor las tres lineas. */
.m-hero h1{max-width:21ch;margin-bottom:28px;text-wrap:balance}
.m-hero h1 .soft{color:var(--ink-3)}
.m-hero .lead+.lead{margin-top:14px}
.m-places{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;font-size:.92rem;color:var(--ink-3)}
.m-place{display:inline-flex;align-items:center;gap:8px}
.m-place svg{width:15px;height:15px;color:var(--accent-ink);flex:0 0 auto}

/* ══ Secciones ══ */
.m-sec{padding:96px 0;border-top:1px solid var(--line)}
.m-sec-head{max-width:720px;margin-bottom:54px}
.m-sec-head .lead{margin-top:18px}
.m-split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.m-split-copy p{margin-top:18px;max-width:52ch}

/* ══ Tarjetas ══ */
.m-grid{display:grid;gap:18px}
.m-grid-3{grid-template-columns:repeat(3,1fr)}
.m-grid-2{grid-template-columns:repeat(2,1fr)}
.m-grid-4{grid-template-columns:repeat(4,1fr)}
.m-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:border-color .22s,transform .22s,box-shadow .22s}
/* Variante con foto: la imagen ocupa la mitad superior y el texto va debajo */
#servicios .m-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.m-card-foto{position:relative;height:186px;flex:0 0 auto;background-size:cover;background-position:center;transition:transform .6s ease}
/* Degradado que funde la foto con el fondo de la tarjeta */
.m-card-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(255,255,255,0) 40%,
  rgba(255,255,255,.35) 68%,
  rgba(255,255,255,.82) 88%,
  rgba(255,255,255,1) 100%)}
#servicios .m-card:hover .m-card-foto{transform:scale(1.06)}
.m-card-cuerpo{padding:2px 28px 28px;display:flex;flex-direction:column;flex:1}
.m-card-cuerpo .m-card-link{margin-top:auto;padding-top:14px}
@media (prefers-reduced-motion:reduce){#servicios .m-card:hover .m-card-foto{transform:none}}
.m-card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.05)}
.m-card h3{margin-bottom:10px}
.m-card p{font-size:.96rem;color:var(--ink-2)}
.m-card-num{font-size:.78rem;color:var(--ink-3);display:block;margin-bottom:12px}
.m-card-link{display:inline-block;margin-top:16px;font-size:.9rem;font-weight:600;color:var(--accent-ink)}
.m-card-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Tarjeta con imagen (casos y sectores) */
.m-photo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .22s,transform .22s}
.m-photo:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.m-photo .ph{height:170px;background-size:cover;background-position:center}
.m-photo .bd{padding:22px 24px}
.m-photo .tag{font-size:.74rem;color:var(--ink-3);display:block;margin-bottom:8px}
.m-photo h3{font-size:1.02rem;margin-bottom:8px}
.m-photo p{font-size:.92rem}

/* ══ Métricas ══ */
.m-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.m-stat .n{font-family:'Space Grotesk','Manrope',sans-serif;font-size:2.6rem;line-height:1;letter-spacing:-.04em;color:var(--ink);margin-bottom:10px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.m-stat .t{font-size:.93rem;color:var(--ink-2)}

/* ══ Lista de características ══ */
.m-feats{display:flex;flex-direction:column;gap:20px;margin-top:30px}
.m-feat{display:flex;gap:14px;align-items:flex-start}
.m-feat .ck{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:.72rem;font-weight:700;margin-top:3px}
.m-feat strong{display:block;color:var(--ink);font-size:.98rem;margin-bottom:3px}
.m-feat p{font-size:.93rem;color:var(--ink-2)}

/* ══ Testimonios ══ */
.m-quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column}
.m-quote .stars{color:var(--accent);font-size:.9rem;letter-spacing:3px;margin-bottom:16px}
.m-quote p{font-size:1rem;color:var(--ink);line-height:1.6;flex:1}
.m-quote .who{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.m-quote .av{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:.82rem;font-weight:700;flex:0 0 auto}
.m-quote .nm{font-size:.92rem;color:var(--ink);font-weight:600}
.m-quote .rl{font-size:.82rem;color:var(--ink-3)}

/* ══ Preguntas frecuentes ══ */
.m-faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.m-faq-item{border-bottom:1px solid var(--line)}
.m-faq-q{width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:24px 40px 24px 0;position:relative;
  font-family:'Space Grotesk','Manrope',sans-serif;font-size:1.08rem;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.m-faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--ink-3);transition:transform .25s}
.m-faq-item.open .m-faq-q::after{transform:translateY(-50%) rotate(45deg)}
.m-faq-a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.m-faq-item.open .m-faq-a{max-height:520px}
.m-faq-a > div{padding:0 40px 26px 0;color:var(--ink-2);font-size:.98rem}
.m-faq-a p+p{margin-top:12px}

/* ══ Banda oscura (CTA) ══ */
.m-band{background:var(--navy);border-radius:20px;padding:64px 56px;display:grid;grid-template-columns:1.3fr auto;gap:40px;align-items:center}
.m-band h2{color:#fff}
.m-band p{color:rgba(255,255,255,.62);margin-top:16px;max-width:52ch}
.m-band .btn{background:#fff;color:var(--ink);border-color:#fff}
.m-band .btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ══ Contacto ══ */
.m-contact{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:start}
.m-info{display:flex;flex-direction:column;gap:22px;margin-top:34px}
.m-info-it{display:flex;gap:14px;align-items:flex-start}
.m-info-it .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:0 0 auto}
.m-info-it .l{font-size:.8rem;color:var(--ink-3)}
.m-info-it .v{font-size:1rem;color:var(--ink);font-weight:600}
.m-form{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:34px}
.m-form h3{margin-bottom:6px}
.m-form .sub{font-size:.92rem;color:var(--ink-3);margin-bottom:26px}
.m-fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.m-fg{display:flex;flex-direction:column;margin-bottom:16px}
.m-fg label{font-size:.84rem;color:var(--ink-2);margin-bottom:7px;font-weight:600}
.m-fg input,.m-fg select,.m-fg textarea{
  font-family:'Manrope',sans-serif;font-size:.96rem;color:var(--ink);
  background:#fff;border:1px solid var(--line-strong);border-radius:10px;padding:13px 14px;
  transition:border-color .2s,box-shadow .2s;width:100%;
}
.m-fg textarea{min-height:120px;resize:vertical}
.m-fg input:focus,.m-fg select:focus,.m-fg textarea:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-soft)}
.m-fg input::placeholder,.m-fg textarea::placeholder{color:#B4B4B4}
.m-form .btn{width:100%;justify-content:center;margin-top:8px;padding:16px}
.field-error{color:#D23B3B;font-size:.8rem;min-height:1em;margin-top:5px}

/* ══ Pie ══ */
.m-foot{border-top:1px solid var(--line);padding:70px 0 34px;margin-top:20px}
.m-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
.m-foot-logo{height:40px;margin-bottom:18px}
.m-foot p{font-size:.93rem;color:var(--ink-2);max-width:40ch}
.m-foot h4{font-family:'Manrope',sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:16px;font-weight:700}
.m-foot-col a{display:block;font-size:.94rem;color:var(--ink-2);margin-bottom:11px;transition:color .2s}
.m-foot-col a:hover{color:var(--ink)}
.m-foot-bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:54px;padding-top:26px;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-3)}
.m-foot-bot a{color:var(--ink-3)}
.m-foot-bot a:hover{color:var(--ink)}
.m-social{display:flex;gap:9px;margin-top:20px}
.m-social a{width:36px;height:36px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;font-size:.82rem;color:var(--ink-2);transition:all .2s}
.m-social a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ══ WhatsApp ══ */
.m-wa{position:fixed;bottom:26px;right:26px;width:54px;height:54px;border-radius:50%;background:#25D366;display:grid;place-items:center;z-index:600;box-shadow:0 6px 20px rgba(37,211,102,.35);transition:transform .2s}
.m-wa:hover{transform:scale(1.07)}
.m-wa svg{width:28px;height:28px;fill:#fff}

/* ══ Aviso ══ */
.m-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(140%);background:var(--ink);color:#fff;padding:15px 26px;border-radius:999px;font-size:.93rem;z-index:900;transition:transform .35s;max-width:90vw;text-align:center}
.m-toast.show{transform:translateX(-50%) translateY(0)}
.m-toast.error{background:#D23B3B}

/* ══ Aparición al hacer scroll ══ */
.rv,.reveal,.reveal-l,.reveal-r{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.rv.visible,.reveal.visible,.reveal-l.visible,.reveal-r.visible{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.rv,.reveal,.reveal-l,.reveal-r{opacity:1;transform:none;transition:none}}

/* ══ Responsive ══ */
@media (max-width:1000px){
  .m-split,.m-contact{grid-template-columns:1fr;gap:44px}
  .m-grid-3,.m-grid-4{grid-template-columns:repeat(2,1fr)}
  .m-stats{grid-template-columns:repeat(3,1fr);gap:26px}
  .m-band{grid-template-columns:1fr;padding:48px 36px}
  .m-foot-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:760px){
  .wrap,.m-nav-in{padding-left:20px;padding-right:20px}
  .m-links{display:none}
  .m-links.open{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:var(--surface);border-bottom:1px solid var(--line);padding:6px 20px 14px;
  }
  .m-links.open li{border-bottom:1px solid var(--line)}
  .m-links.open li:last-child{border-bottom:none}
  .m-links.open a{display:block;padding:15px 0}
  .m-burger{display:flex}
  .m-nav{position:relative}
  .m-hero{padding:72px 0 64px}
  /* Vertical y mas opaco: la foto queda como textura y el texto manda */
  /* 35% encuadra ciudad y cordillera en vez del rostro del guardia:
     en vertical quedaba asomando tras el parrafo y distraia. */
  .m-hero::before{background-position:35% center}
  .m-hero::after{
    background:linear-gradient(180deg,
      rgba(252,252,252,.97) 0%,
      rgba(252,252,252,.93) 50%,
      rgba(252,252,252,.74) 100%);
  }
  .m-sec{padding:66px 0}
  .m-grid-3,.m-grid-2,.m-grid-4{grid-template-columns:1fr}
  .m-fr{grid-template-columns:1fr;gap:0}
  .m-foot-grid{grid-template-columns:1fr}
  .m-band{padding:38px 26px;border-radius:16px}
  .m-form{padding:26px 22px}
  .m-nav-cta .btn{display:none}
  /* "DefensurSeguridad." son 18 caracteres: a 2.6rem medía 368px dentro de
     335px disponibles y se cortaba. 9.2vw lo mantiene siempre dentro. */
  .m-hero h1{font-size:min(2.6rem,9.2vw)}
  /* Apilados y a ancho completo: repartidos, "Solicita presupuesto" no cabía */
  .m-actions{flex-direction:column;align-items:stretch}
  .m-actions .btn,.m-actions .btn-ghost{width:100%;justify-content:center}
}

/* ══ Indicadores de carga (Lottie) ══
   El reproductor se trae en tiempo muerto; si falla, el marcador queda como
   un recuadro neutro y la imagen aparece igual. Nunca bloquea el contenido. */
.m-lottie{display:block;width:100%;height:100%}
.m-media{position:relative}
.m-media img{border-radius:var(--radius);border:1px solid var(--line)}
.m-media-ph{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  transition:opacity .4s ease,visibility .4s ease;
}
.m-media-ph .m-lottie{width:64px;height:64px}
.m-media-ph.oculto{opacity:0;visibility:hidden}

/* Dentro del botón de envío */
.m-lottie-btn{width:20px;height:20px;flex:0 0 auto}
/* Sin filtro de color: invertirlo aplanaba arco y pista al mismo blanco
   y se perdia el movimiento. En azul de marca sobre el boton negro se lee bien. */

@media (prefers-reduced-motion:reduce){
  .m-media-ph{display:none}
}
/* Las capturas llevan width/height en el HTML: el navegador reserva el alto
   antes de cargarlas, asi el marcador no colapsa y no hay salto de maquetacion. */
.m-media img{width:100%;height:auto}

@media(max-width:760px){
  .m-stats{grid-template-columns:1fr;gap:28px}
}

/* ══════════════════════════════════════════════════════════════
   Animaciones ligadas al scroll (animation-timeline)
   Corren en el compositor del navegador, no en JavaScript: no hay
   escuchadores de scroll ni riesgo de tirones. Todo va dentro de
   @supports, así que en navegadores sin soporte la pagina queda
   exactamente como estaba.
   ══════════════════════════════════════════════════════════════ */

/* Barra de progreso de lectura */
.m-progreso{position:fixed;top:0;left:0;right:0;height:2px;z-index:900;pointer-events:none;display:none}
.m-progreso i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}

/* El borde y las esquinas pasan al contenedor para poder recortar el parallax */
.m-media{overflow:hidden;border-radius:var(--radius);border:1px solid var(--line)}
.m-media img{display:block;border:0;border-radius:0}
.m-media-ph{border:0}

@supports (animation-timeline: scroll()){
  .m-progreso{display:block}
  /* Propiedades largas a proposito: la forma abreviada "animation:" deja la
     duracion en 0s, y una animacion ligada al scroll necesita duration:auto
     para repartirse a lo largo de todo el recorrido. */
  .m-progreso i{
    animation-name:m-barra;
    animation-duration:auto;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }
}
@keyframes m-barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@supports (animation-timeline: view()){
  .m-hero .wrap,.m-media img,
  .m-grid-3 > .m-card,.m-grid-4 > .m-card,.m-photo{
    animation-duration:auto;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:view();
  }

  /* El hero se desvanece y sube levemente al salir de pantalla */
  .m-hero .wrap{animation-name:m-hero-sale;animation-range:exit 0% exit 85%}

  /* Parallax sutil en las capturas: la escala extra evita que asomen bordes */
  .m-media img{animation-name:m-parallax;animation-range:entry 0% exit 100%}

  /* Las tarjetas de servicio y sectores suben un poco al entrar */
  .m-grid-3 > .m-card,.m-grid-4 > .m-card,.m-photo{
    animation-name:m-sube;animation-range:entry 5% entry 65%;
  }
}

@keyframes m-hero-sale{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-36px)}
}
@keyframes m-parallax{
  from{transform:translateY(-3.5%) scale(1.08)}
  to{transform:translateY(3.5%) scale(1.08)}
}
@keyframes m-sube{
  from{opacity:.35;transform:translateY(26px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .m-progreso{display:none}
  .m-hero .wrap,.m-media img,
  .m-grid-3 > .m-card,.m-grid-4 > .m-card,.m-photo{animation:none;opacity:1;transform:none}
}

/* En anchos intermedios el texto ocupa ~75% del ancho y caia sobre el guardia:
   el velo se extiende mas a la derecha para no perder legibilidad. */
@media(max-width:1180px){
  .m-hero::after{
    background:linear-gradient(96deg,
      var(--bg) 0%,
      var(--bg) 50%,
      rgba(252,252,252,.96) 68%,
      rgba(252,252,252,.80) 83%,
      rgba(252,252,252,.32) 95%,
      rgba(252,252,252,0) 100%);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   TEMA CLARO PARA LAS CLASES HEREDADAS
   Las paginas internas (Concepcion, CCTV, blog, 404) conservan su marcado
   original para no tocar su contenido ni su SEO. Aqui reciben el mismo
   lenguaje visual del home minimalista.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Estructura ── */
.section{max-width:var(--maxw);margin:0 auto;padding:88px 32px}
.eyebrow{display:block;font-family:'Manrope',sans-serif;font-size:.8rem;letter-spacing:.02em;color:var(--ink-3);text-transform:none;margin-bottom:14px;padding-left:0}
.eyebrow::before,.eyebrow::after{display:none}
.stitle,.display{font-family:'Space Grotesk','Manrope',sans-serif;color:var(--ink);font-weight:500;font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:-.035em;text-transform:none}

/* ── Hero de paginas internas ── */
#hero{position:relative;isolation:isolate;min-height:auto;display:block;background:var(--bg);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(96deg,var(--bg) 0%,var(--bg) 42%,rgba(252,252,252,.90) 60%,rgba(252,252,252,.45) 82%,rgba(252,252,252,0) 100%)}
.hero-grid{display:none}
.hero-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:110px 32px 86px}
.hero-content{max-width:760px}
#hero h1{font-family:'Space Grotesk','Manrope',sans-serif;font-weight:500;color:var(--ink);font-size:clamp(2.4rem,5.4vw,3.9rem);line-height:1.04;letter-spacing:-.04em;text-transform:none;margin-bottom:22px;max-width:20ch;text-wrap:balance}
#hero h1 .red{color:var(--ink)}
#hero h1 .out{-webkit-text-stroke:0;color:var(--ink-3)}
.hero-badge{display:inline-flex;align-items:center;gap:9px;font-size:.82rem;color:var(--ink-2);background:var(--accent-soft);border:1px solid #D7E8FB;padding:7px 15px;border-radius:999px;margin-bottom:30px;letter-spacing:0}
.hero-badge .bdot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:none}
.hero-sub{font-size:1.15rem;line-height:1.55;color:var(--ink-2);max-width:620px;margin-bottom:14px}
.hero-rule{width:56px;height:4px;background:var(--accent);border-radius:2px;margin-bottom:26px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ── Marquesina ── */
.marquee{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink-3);padding:16px 0}
.marquee-track span{color:var(--ink-3)}

/* ── Nosotros ── */
.section#nosotros,.section#capacidades,.section#app,.section#panel,.section#ahorro{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.nos-visual,.cap-visual{height:auto;min-height:320px;border:1px solid var(--line);border-radius:var(--radius);background-color:var(--surface);display:grid;place-items:center;padding:34px}
.nos-kpi{display:flex;gap:18px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.nos-kpi .n{font-family:'Space Grotesk','Manrope',sans-serif;font-size:2.6rem;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.nos-kpi .l{color:var(--ink);font-weight:600;font-size:.98rem;margin-bottom:6px}
.nos-kpi .s{color:var(--ink-2);font-size:.9rem;line-height:1.6}
.nos-copy p{margin-top:18px;color:var(--ink-2);max-width:52ch}
.nos-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
.nos-pillar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.nos-pillar .pt{color:var(--ink);font-size:.92rem;font-weight:600;text-transform:none;letter-spacing:0}

/* ── Servicios ── */
.srv-header{max-width:720px;margin-bottom:50px}
.srv-header p{color:var(--ink-2);font-size:1.15rem;line-height:1.55;margin-top:18px}
.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.srv-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:border-color .22s,transform .22s,box-shadow .22s}
.srv-card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.05)}
.srv-card h3{font-family:'Space Grotesk','Manrope',sans-serif;font-size:1.1rem;color:var(--ink);font-weight:600;letter-spacing:-.015em;margin-bottom:10px;text-transform:none}
.srv-card p{color:var(--ink-2);font-size:.96rem}
.srv-num{display:block;font-size:.78rem;color:var(--ink-3);margin-bottom:12px}
.srv-ico{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;margin-bottom:18px}
.srv-link{display:inline-block;margin-top:16px;font-size:.9rem;font-weight:600;color:var(--accent-ink);letter-spacing:0}
.srv-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ── Banda CTA ── */
.cta-banner{background:var(--navy);border:none;border-radius:20px;padding:0;margin:0 auto 20px;max-width:calc(var(--maxw) - 64px)}
.cta-inner{display:grid;grid-template-columns:1.3fr auto;gap:40px;align-items:center;padding:60px 54px;max-width:none;margin:0}
.cta-banner .stitle{color:#fff}
.cta-banner p{color:rgba(255,255,255,.62);margin-top:16px;max-width:52ch}
.cta-banner .btn{background:#fff;color:var(--ink);border-color:#fff}
.cta-banner .btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── Preguntas frecuentes ── */
.section#faq{display:grid;grid-template-columns:1fr 1.4fr;gap:72px;align-items:start}
.faq-intro p{color:var(--ink-2);margin-top:18px;font-size:1.15rem;line-height:1.55}
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line);gap:0}
.faq-item{border-bottom:1px solid var(--line);background:none}
.faq-q{width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:24px 40px 24px 0;position:relative;font-family:'Space Grotesk','Manrope',sans-serif;font-size:1.06rem;font-weight:500;color:var(--ink);letter-spacing:-.02em;text-transform:none}
.faq-q .arr{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--ink-3);transition:transform .25s}
.faq-item.open .faq-q .arr{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.faq-item.open .faq-a{max-height:560px}
.faq-a p{padding:0 40px 24px 0;color:var(--ink-2);font-size:.98rem}

/* ── Contacto ── */
.section#contacto{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:start}
.ct-copy p{color:var(--ink-2);margin-top:18px;font-size:1.15rem;line-height:1.55}
.ct-info{display:flex;flex-direction:column;gap:22px;margin-top:34px}
.ct-item{display:flex;gap:14px;align-items:flex-start}
.ct-ico{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:0 0 auto;font-size:1rem}
.ct-item .l{font-size:.8rem;color:var(--ink-3);text-transform:none;letter-spacing:0}
.ct-item .v{font-size:1rem;color:var(--ink);font-weight:600}
.form-wrap{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:34px}
.form-wrap h3{font-family:'Space Grotesk','Manrope',sans-serif;color:var(--ink);font-size:1.1rem;font-weight:600;letter-spacing:-.015em;text-transform:none;margin-bottom:6px}
.form-wrap .sub{font-size:.92rem;color:var(--ink-3);margin-bottom:26px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg{display:flex;flex-direction:column;margin-bottom:16px}
.fg label{font-size:.84rem;color:var(--ink-2);margin-bottom:7px;font-weight:600;text-transform:none;letter-spacing:0}
.fg input,.fg select,.fg textarea{font-family:'Manrope',sans-serif;font-size:.96rem;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:10px;padding:13px 14px;width:100%;transition:border-color .2s,box-shadow .2s}
.fg textarea{min-height:120px;resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-soft)}
.fg input::placeholder,.fg textarea::placeholder{color:#B4B4B4}
.form-wrap .btn{width:100%;justify-content:center;margin-top:8px;padding:16px}

/* ── Casos y sectores ── */
.casos-grid,.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.caso-card,.sec-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .22s,transform .22s}
.caso-card:hover,.sec-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.caso-card .ph,.sec-card .ph{height:168px;background-size:cover;background-position:center}
.caso-body,.sec-body{padding:22px 24px}
.caso-tag,.sec-num{font-size:.74rem;color:var(--ink-3);display:block;margin-bottom:8px;letter-spacing:0}
.caso-card h3,.sec-card h3{font-family:'Space Grotesk','Manrope',sans-serif;font-size:1.02rem;color:var(--ink);font-weight:600;margin-bottom:8px;text-transform:none;letter-spacing:-.01em}
.caso-card p,.sec-card p{font-size:.92rem;color:var(--ink-2)}
.caso-link{font-size:.88rem;color:var(--accent-ink);font-weight:600;display:inline-block;margin-top:12px}

/* ── App y panel ── */
.app-copy p,.panel-copy p{color:var(--ink-2);margin-top:18px;max-width:52ch}
.app-features{display:flex;flex-direction:column;gap:20px;margin-top:30px}
.panel-features{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.af,.pf{display:flex;gap:14px;align-items:flex-start}
.af-chk{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:.72rem;font-weight:700;margin-top:3px}
.pfi{flex:0 0 auto;font-size:1.1rem}
.af-t strong,.pf strong{display:block;color:var(--ink);font-size:.98rem;margin-bottom:3px}
.af-t p,.pf p{font-size:.93rem;color:var(--ink-2);margin:0}
.app-img,.panel-visual img{border-radius:var(--radius);border:1px solid var(--line)}

/* ── Capacidades ── */
.cap-bars{display:flex;flex-direction:column;gap:20px;margin-top:28px}
.cap-bar .top{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.92rem;color:var(--ink-2)}
.cap-bar .name{color:var(--ink)}
.cap-bar .track{height:6px;background:var(--line);border-radius:999px;overflow:hidden}
.cap-bar .fill{height:100%;width:0;background:var(--accent);border-radius:999px;transition:width 1.2s ease}
.cap-bar.visible .fill{width:var(--w)}

/* ── Testimonios ── */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.test-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column}
.test-stars{color:var(--accent);font-size:.9rem;letter-spacing:3px;margin-bottom:16px}
.test-card p{font-size:1rem;color:var(--ink);line-height:1.6;flex:1}
.test-author{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.test-avatar{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:.82rem;font-weight:700;flex:0 0 auto}
.test-author .n{font-size:.92rem;color:var(--ink);font-weight:600}
.test-author .r{font-size:.82rem;color:var(--ink-3)}

/* ── Aviso, cursor y tagline heredados ── */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(140%);background:var(--ink);color:#fff;padding:15px 26px;border-radius:999px;font-size:.93rem;z-index:900;transition:transform .35s;max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.error{background:#D23B3B}
.cursor,.cursor-ring{display:none !important}
.tagline{display:none}

@media(max-width:1000px){
  .section#nosotros,.section#capacidades,.section#app,.section#panel,.section#ahorro,.section#faq,.section#contacto{grid-template-columns:1fr;gap:44px}
  .srv-grid,.casos-grid,.sec-grid,.test-grid{grid-template-columns:repeat(2,1fr)}
  .cta-inner{grid-template-columns:1fr;padding:46px 34px}
  .panel-features{grid-template-columns:1fr}
}
@media(max-width:760px){
  .section{padding:62px 20px}
  .hero-inner{padding:70px 20px 60px}
  .srv-grid,.casos-grid,.sec-grid,.test-grid,.fr,.nos-pillars{grid-template-columns:1fr}
  .fr{gap:0}
  .cta-banner{border-radius:16px;max-width:calc(100% - 40px)}
  .cta-inner{padding:36px 24px}
  .form-wrap{padding:26px 22px}
  .hero-actions .btn,.hero-actions .btn-ghost{width:100%;justify-content:center}
}

/* ── Blog: listado ── */
.blog-hero{padding-top:118px;padding-bottom:30px;display:block;text-align:left;max-width:var(--maxw)}
.blog-hero h1{font-family:'Space Grotesk','Manrope',sans-serif;font-size:clamp(2.4rem,5.4vw,3.9rem);line-height:1.04;letter-spacing:-.04em;color:var(--ink);text-transform:none;font-weight:500;max-width:18ch;text-wrap:balance}
.blog-hero-lead{color:var(--ink-2);font-size:1.2rem;line-height:1.55;max-width:640px;margin-top:18px}
.blog-list-section{padding-top:36px}
.blog-list{display:flex;flex-direction:column;gap:18px;max-width:900px;margin:0}
.blog-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px 34px;transition:border-color .22s,transform .22s,box-shadow .22s}
.blog-card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.05)}
.blog-card h2{font-family:'Space Grotesk','Manrope',sans-serif;font-size:1.45rem;line-height:1.25;letter-spacing:-.02em;margin:14px 0 12px;text-transform:none;font-weight:500}
.blog-card h2 a{color:var(--ink);transition:color .2s}
.blog-card h2 a:hover{color:var(--accent-ink)}
.blog-card p{color:var(--ink-2);font-size:.96rem;margin-bottom:18px}
.blog-card-meta,.post-meta{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:.78rem;color:var(--ink-3);text-transform:none;letter-spacing:.02em}
.blog-cat{color:var(--accent-ink);font-weight:600}
.blog-dot{opacity:.5}

/* ── Blog: articulo ── */
.post-section{max-width:860px;margin:0 auto;padding:112px 32px 40px}
.post-crumbs{font-size:.8rem;color:var(--ink-3);margin-bottom:26px;display:flex;gap:8px;flex-wrap:wrap}
.post-crumbs a{color:var(--ink-2)}
.post-crumbs a:hover{color:var(--accent-ink)}
.post-crumbs .cur{color:var(--accent-ink)}
.post-head{border-bottom:1px solid var(--line);padding-bottom:32px;margin-bottom:40px}
.post-head h1{font-family:'Space Grotesk','Manrope',sans-serif;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.12;letter-spacing:-.035em;color:var(--ink);font-weight:500;margin:18px 0 20px;text-wrap:balance}
.post-lead{color:var(--ink-2);font-size:1.12rem;line-height:1.6}

.post-body{font-size:1.05rem;line-height:1.8;color:var(--ink-2)}
.post-body h2{font-family:'Space Grotesk','Manrope',sans-serif;font-size:1.6rem;color:var(--ink);font-weight:500;margin:52px 0 18px;letter-spacing:-.025em;line-height:1.25;padding-left:0;border-left:none}
.post-body h3{font-family:'Space Grotesk','Manrope',sans-serif;font-size:1.15rem;color:var(--ink);font-weight:600;margin:34px 0 12px;letter-spacing:-.015em}
.post-body p{margin-bottom:20px}
.post-body strong{color:var(--ink);font-weight:600}
.post-body a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.post-body a:hover{color:var(--ink)}
.post-body ul,.post-body ol{margin:0 0 22px 22px}
.post-body li{margin-bottom:11px}
.post-body ul li::marker,.post-body ol li::marker{color:var(--accent-ink)}
.post-body .btn,.post-body .btn-ghost{text-decoration:none}
.post-body .btn{color:#fff}
.post-body .btn:hover{color:#fff}
.post-body .btn-ghost{color:var(--ink)}

/* El marco y el desplazamiento viven en el contenedor; la tabla vuelve a ser
   una tabla real para que ocupe el ancho completo de la columna de texto. */
.post-tabla{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);margin:26px 0 30px}
.post-table{width:100%;border-collapse:collapse;font-size:.93rem;table-layout:auto}
.post-table th,.post-table td{white-space:normal;vertical-align:top;line-height:1.5}
.post-table thead th{background:var(--accent-soft);color:var(--ink);text-align:left;padding:14px 16px;font-size:.8rem;text-transform:none;letter-spacing:.02em;font-weight:700;border-bottom:1px solid var(--line)}
.post-table td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.post-table tbody tr:last-child td{border-bottom:none}
.post-table tbody tr:hover td{background:#FAFCFF}

.post-callout{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:22px 26px;margin:30px 0;font-size:.97rem;color:var(--ink-2)}
.post-callout-alert{border-left-color:#E0A008;background:#FFFBF0;border-color:#F3E3BE}
.post-callout strong{color:var(--ink)}
.post-formula{background:var(--accent-soft);border:1px dashed #C9DFF8;border-radius:var(--radius);padding:24px;margin:26px 0;text-align:center;font-family:'Space Grotesk','Manrope',sans-serif;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em}
.post-note{font-size:.86rem;color:var(--ink-3);font-style:italic;margin-top:-14px;margin-bottom:26px}
.post-check li{margin-bottom:13px}

.post-answer{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:26px 28px;margin:34px 0 40px}
.post-answer .post-answer-q{font-family:'Space Grotesk','Manrope',sans-serif;font-size:1.2rem;color:var(--ink);font-weight:500;margin:0 0 14px;padding-left:0;border-left:none;letter-spacing:-.02em}
.post-answer p{margin-bottom:12px}
.post-answer p:last-child{margin-bottom:0}

.post-cta{background:var(--navy);border:none;border-radius:20px;padding:44px 40px;margin:60px 0 50px;text-align:center}
.post-cta h2{font-family:'Space Grotesk','Manrope',sans-serif;color:#fff;font-size:1.5rem;font-weight:500;letter-spacing:-.025em;margin-bottom:14px}
.post-cta p{color:rgba(255,255,255,.62);max-width:600px;margin:0 auto 26px;font-size:.98rem}
.post-cta .hero-actions{justify-content:center;margin-top:0}
.post-cta .btn{background:#fff;color:var(--ink);border-color:#fff}
.post-cta .btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.post-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.post-cta .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

.post-related h2{font-family:'Space Grotesk','Manrope',sans-serif;color:var(--ink);font-size:1.05rem;text-transform:none;letter-spacing:-.01em;font-weight:600;margin-bottom:20px}
.post-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

/* Bloque de reclutamiento */
.post-jobs{background:#FFFBF0;border:1px solid #F3E3BE;border-left:4px solid #E0A008;border-radius:var(--radius);padding:34px 34px 30px;margin:56px 0 44px}
.post-jobs-tag{display:inline-block;font-family:'Manrope',sans-serif;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#A8780A;margin-bottom:12px;font-weight:700}
.post-jobs h2{font-family:'Space Grotesk','Manrope',sans-serif;font-size:1.4rem;color:var(--ink);font-weight:500;margin:0 0 14px;letter-spacing:-.025em;padding-left:0;border-left:none}
.post-jobs p{color:var(--ink-2);font-size:.97rem;margin-bottom:16px}
.post-jobs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:22px 0 26px}
.post-jobs-grid>div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.post-jobs-grid strong{display:block;color:var(--ink);font-size:.95rem;margin-bottom:7px}
.post-jobs-grid p{font-size:.9rem;margin:0;line-height:1.65}
.post-jobs-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.post-jobs-actions .btn,.post-jobs-actions .btn-ghost{padding:14px 26px;font-size:.9rem}
.post-jobs-note{font-size:.87rem;color:var(--ink-3);margin:0;border-top:1px solid #F0E2C4;padding-top:16px}

/* ── Pagina 404 ── */
.err-section{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:120px}
.err-code{font-family:'Space Grotesk','Manrope',sans-serif;font-size:clamp(4.5rem,14vw,9rem);line-height:1;font-weight:500;letter-spacing:-.05em;color:var(--line-strong);-webkit-text-stroke:0;opacity:1;margin-bottom:8px}
.err-title{margin-bottom:18px}
.err-lead{color:var(--ink-2);max-width:620px;margin:0 auto 34px;font-size:1.12rem;line-height:1.6}
.err-actions{justify-content:center;margin-bottom:70px}
.err-links{width:100%;max-width:980px}
.err-links h2{font-family:'Space Grotesk','Manrope',sans-serif;color:var(--ink);font-size:1.05rem;text-transform:none;letter-spacing:-.01em;font-weight:600;margin-bottom:24px}
.err-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;text-align:left}
.err-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;transition:border-color .25s,transform .25s}
.err-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.err-card strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:6px}
.err-card span{color:var(--ink-2);font-size:.9rem;line-height:1.6}
.err-contact{margin-top:44px;color:var(--ink-2);font-size:.92rem;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.err-contact a{color:var(--accent-ink)}
.err-contact a:hover{text-decoration:underline}
.err-contact .sep-dot{opacity:.5}

@media(max-width:880px){
  .post-section{padding:92px 20px 32px}
  .blog-hero{padding-top:88px}
  .blog-card{padding:26px 22px}
  .post-related-grid,.err-grid,.post-jobs-grid{grid-template-columns:1fr}
  .post-cta{padding:30px 24px}
  .post-jobs{padding:26px 22px 24px}
  .post-jobs-actions .btn,.post-jobs-actions .btn-ghost{width:100%;justify-content:center}
  .post-table{font-size:.88rem}
  .post-table thead th,.post-table td{padding:11px 12px}
}

/* Marquesina: el desplazamiento vivia en site.css, que estas paginas ya no cargan */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.marquee-track{display:flex;gap:46px;width:max-content;animation:m-marquesina 38s linear infinite;white-space:nowrap}
.marquee-track span{font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}
@keyframes m-marquesina{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}