.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.02);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.50) 42%,
      rgba(0,0,0,.22) 100%
    );
  animation: heroOverlayFade 1.8s ease-out forwards;
}

@keyframes heroOverlayFade{
  from{
    opacity:1;
  }
  to{
    opacity:.82;
  }
}

.hero .container{position:relative; z-index:2; padding:70px 0}
.hero-content{background: rgba(10, 12, 18, .32);
 max-width:640px; color:#fff}
.hero-content h1{
  text-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.hero-content p{
  text-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.kicker{
  font-weight:600;
  background: rgba(15,118,110,.18);
  border-color: rgba(15,118,110,.35);
}

.kicker .dot{
  background: #22c55e;
}


.hero-rotator{display:flex; align-items:center; gap:10px; color: rgba(255,255,255,.88)}
.hero-rotator .tag{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.hero-actions{margin-top:26px; display:flex; gap:12px; flex-wrap:wrap}

/* Trust strip */
.trust{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 980px){ .trust{grid-template-columns: 1fr} }
.trust-item{
  background:#fff; border:1px solid var(--border);
  border-radius: var(--r-md);
  padding:16px;
}
.trust-item strong{display:block; margin-bottom:6px}
.trust-item span{color:var(--muted); font-size:14px}

/* Logos */
/* ===========================
   CLIENTES (Logo wall premium)
   =========================== */

.clients-grid{
  position: relative;
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

/* Fondo sutil premium detrás (no molesta) */
.clients-grid::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius: calc(var(--r-lg) + 10px);
  background:
    radial-gradient(600px 240px at 20% 20%, rgba(10,78,163,.10), transparent 60%),
    radial-gradient(600px 240px at 80% 80%, rgba(15,118,110,.08), transparent 60%),
    rgba(255,255,255,.55);
  border: 1px solid var(--border);
  z-index:0;
}

/* Cada tile de logo */
.client-logo{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 14px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

/* Imagen: misma altura visual para todos */
.client-logo img{
  width: 100%;
  max-width: 140px;
  height: 34px;              /* 👈 clave para uniformidad */
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .78;
  transition: filter .18s ease, opacity .18s ease, transform .18s ease;
}

.client-logo:hover{
  transform: translateY(-2px);
  border-color: rgba(10,78,163,.22);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
  background: rgba(255,255,255,.92);
}

.client-logo:hover img{
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.02);
}

/* Responsive */
@media (max-width: 980px){
  .clients-grid{grid-template-columns: repeat(3, minmax(0,1fr))}
}
@media (max-width: 520px){
  .clients-grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .client-logo img{height: 30px;}
}

/* CTA */
.cta{
  background: radial-gradient(1200px 500px at 20% 0%, rgba(10,78,163,.18), transparent 60%),
              radial-gradient(1200px 500px at 80% 100%, rgba(15,118,110,.14), transparent 55%),
              #0b1220;
  color:#fff;
  border-radius: var(--r-lg);
  padding:42px;
  border:1px solid rgba(255,255,255,.10);
}
.cta p{color: rgba(255,255,255,.78); margin: 8px 0 0}
.cta-actions{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap}
.hero-content{
  max-width: 760px;
  padding: 22px 22px 18px;
  border-radius: 22px;
  background: rgba(10, 12, 18, .28);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(3px);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
@media (max-width: 980px){
  .hero-content{padding: 18px}
}
.hero-rotator{
  margin-top: 16px;
  gap: 12px;
  color: rgba(255,255,255,.92);
}
.hero-rotator .tag{
  font-weight: 600;
  border-color: rgba(255,255,255,.22);
}
#hero-rotate{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.hero{ min-height: 92svh; } /* mejor en mobile moderno */
.hero-content{
  animation: heroFade .8s ease-out both;
}

@keyframes heroFade{
  from{
    opacity:0;
    transform: translateY(14px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}
@media (max-width: 520px){
  .hero-content{
    padding:20px;
  }
  .hero-content h1{
    font-size: 2rem;
  }
}
.tile-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px;
}
@media (max-width: 980px){
  .tile-grid{grid-template-columns: 1fr;}
}

/* Card base */
.tile{
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  background:#fff;
  perspective: 900px; /* clave */
}

.tile-inner{
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

/* caras */
.tile-face{
  position:relative;
  min-height: 360px;
  padding: 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media (max-width: 520px){
  .tile-face{min-height: 280px; padding: 24px;}
}

.tile-yellow{
  background: #f2cf4b;
}
.tile-kicker{
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:.08em;
  color: rgba(11,18,32,.85);
}
.tile-title{
  margin:0 0 14px;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
}
.tile-text{
  margin:0;
  max-width: 40ch;
  color: rgba(11,18,32,.78);
}

/* Tile media */
.tile-media{
  background: #0b1220;
  padding:0;
}
.tile-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05);
}
.tile-caption{
  position:absolute;
  left: 22px;
  bottom: 18px;
  color:#fff;
  font-weight:800;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  text-shadow: 0 18px 40px rgba(0,0,0,.55);
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .tile-inner{transition:none !important;}
}
/* ===========================
   Servicios tipo Prosegur
   =========================== */

#servicios .carousel-wrapper{ position:relative; }

#servicios .carousel-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding: 10px 0 22px;
  scrollbar-width:none;
}
#servicios .carousel-track::-webkit-scrollbar{ display:none; }

#servicios .service-card{
  position:relative;
  min-width: 340px;
  height: 460px;
  border-radius: var(--r-lg);
  overflow:hidden;
  background:#000;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 22px 55px rgba(2,6,23,.18);
  flex: 0 0 auto;
}

#servicios .service-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  transition: transform .45s ease;
  filter: saturate(1.05);
}

/* Gradiente para legibilidad del texto */
#servicios .service-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.28) 45%,
      rgba(0,0,0,.75) 100%
    );
}

/* Texto sobre imagen */
#servicios .service-overlay{
  position:absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  z-index: 2;
  color:#fff;
}

#servicios .service-overlay h3{
  margin:0 0 10px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing:-0.01em;
  text-shadow: 0 14px 30px rgba(0,0,0,.55);
}

#servicios .service-overlay p{
  margin:0;
  color: rgba(255,255,255,.85);
  text-shadow: 0 10px 22px rgba(0,0,0,.45);
  line-height:1.45;
}

/* Hover premium (desktop) */
@media (hover:hover){
  #servicios .service-card:hover img{
    transform: scale(1.07);
  }
}

/* Flechas (desktop) */
#servicios .carousel-btn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  z-index: 3;
}

#servicios .carousel-btn.prev{ left:-10px; }
#servicios .carousel-btn.next{ right:-10px; }

@media (max-width: 520px){
  #servicios .service-card{
    min-width: 280px;
    height: 380px;
  }
  #servicios .carousel-btn{ display:none; } /* swipe */
}
/* ===========================
   Brand block – Innovación y personas
   =========================== */

.brand-block{
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
}

.brand-media{
  position: relative;
  height: 520px;
}

.brand-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay corporativo */
.brand-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(11,18,32,.82) 0%,
      rgba(11,18,32,.62) 45%,
      rgba(11,18,32,.25) 100%
    );
  display: flex;
  align-items: center;
}

.brand-content{
  max-width: 560px;
  color: #fff;
}

.brand-content h2{
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  margin-bottom: 14px;
  text-shadow: 0 18px 40px rgba(0,0,0,.55);
}

.brand-content p{
  margin: 0;
  color: rgba(255,255,255,.85);
  font-size: 1.05rem;
  line-height: 1.5;
  text-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* Mobile */
@media (max-width: 980px){
  .brand-media{ height: 420px; }
}
@media (max-width: 520px){
  .brand-media{ height: 360px; }
  .brand-content{ padding: 0 10px; }
}
@media (max-width: 520px){
  .brand-overlay{
    background:
      linear-gradient(180deg,
        rgba(11,18,32,.85) 0%,
        rgba(11,18,32,.65) 55%,
        rgba(11,18,32,.25) 100%
      );
  }

  .brand-content{
    text-align: left;
  }
}
/* ===========================
   Video institucional – Premium UX
   =========================== */

.vhero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 26px;
  align-items: stretch;
}

@media (max-width: 980px){
  .vhero{ grid-template-columns: 1fr; }
}

.vhero-media{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 24px 80px rgba(2,6,23,.14);
  background:#000;
  min-height: 380px;
}

.vhero-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  filter: saturate(1.05);
}

.vhero-gradient{
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 380px at 30% 35%, rgba(10,78,163,.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.70) 100%);
  pointer-events:none;
}

.vhero-play{
  position:absolute;
  left: 22px;
  bottom: 22px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border:none;
  cursor:pointer;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
  display:grid;
  place-items:center;
  z-index:2;
}

.vhero-play-icon{
  font-size: 22px;
  transform: translateX(2px);
}

.vhero-play-ring{
  position:absolute;
  inset:-10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  opacity: .7;
  animation: ringPulse 1.8s ease-out infinite;
}

@keyframes ringPulse{
  0%{ transform: scale(.92); opacity: .65; }
  70%{ transform: scale(1.12); opacity: 0; }
  100%{ transform: scale(1.12); opacity: 0; }
}

.vhero-badges{
  position:absolute;
  right: 16px;
  bottom: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  z-index:2;
}

.badge{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  color:#fff;
  font-weight: 700;
  font-size: 13px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}

.badge-soft{
  color: rgba(255,255,255,.86);
  font-weight: 600;
}

.vhero-copy{
  border-radius: var(--r-lg);
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  padding: 26px;
}

.vhero-copy h3{
  margin: 0 0 10px;
  font-size: 1.25rem;
}

.vhero-copy p{
  margin: 0 0 18px;
  color: var(--muted);
}

.vhero-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Mobile refinado */
@media (max-width: 520px){
  .vhero-media{ min-height: 300px; }
  .vhero-play{ width: 64px; height: 64px; left: 16px; bottom: 16px; }
  .vhero-copy{ padding: 20px; }
}

/* ===========================
   Modal premium (fade + scale)
   =========================== */

.vmodal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2000;
}

.vmodal.is-open{ display:block; }

.vmodal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.72);
  backdrop-filter: blur(6px);
  animation: modalFade .18s ease-out both;
}

@keyframes modalFade{
  from{ opacity:0; }
  to{ opacity:1; }
}

.vmodal-dialog{
  position: relative;
  width: min(1020px, calc(100% - 28px));
  margin: 6vh auto 0;
  border-radius: 18px;
  overflow: hidden;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  animation: modalPop .22s ease-out both;
}

@keyframes modalPop{
  from{ transform: translateY(10px) scale(.98); opacity:.6; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}

.vmodal-close{
  position:absolute;
  right: 12px;
  top: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border:none;
  cursor:pointer;
  background: rgba(255,255,255,.92);
  z-index: 2;
}

.vmodal-frame{
  background: #000;
}

.vmodal-frame video{
  width: 100%;
  height: auto;
  display:block;
}
/* =========================
   SUBTÍTULOS PREMIUM (VIDEO)
========================= */
video::cue {
  color: rgba(255,255,255,.95);
  background: rgba(10,18,34,.55);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Desktop */
@media (min-width: 768px){
  video::cue{
    font-size: 18px;
    padding: 12px 16px;
  }
}

/* Mobile: más discreto */
@media (max-width: 480px){
  video::cue{
    font-size: 14px;
    padding: 8px 12px;
    background: rgba(10,18,34,.45);
  }
}
.hero-video-wrap{
  position:absolute;
  inset:0;
  z-index:0;
}

/* base */
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* desktop por defecto */
.hero-video--mobile{ display:none; }

/* mobile */
@media (max-width: 768px){
  .hero-video--desktop{ display:none; }
  .hero-video--mobile{ display:block; }
}
/* fin hero movil */
/* =========================
   HERO TEXT MOBILE FIX
   (pegalo al final del archivo)
========================= */

/* Toggle para textos según dispositivo */
.only-mobile { display: none; }
.only-desktop { display: inline; }

@media (max-width: 520px){
  .only-mobile { display: inline; }
  .only-desktop { display: none; }

  /* Contenedor hero (evita sensación de "apretado") */
  .hero .container{
    padding: 56px 0; /* antes 70px */
  }

  /* Caja de contenido más limpia */
  .hero-content{
    padding: 18px;
    border-radius: 18px;
  }

  /* Título: mejor corte + ritmo */
  .hero-content h1{
    font-size: 1.85rem;   /* mejor que 2rem en pantallas chicas */
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
  }

  /* Párrafo: más legible */
  .hero-content p{
    font-size: 0.98rem;
    line-height: 1.45;
    margin-top: 0;
  }

  /* Badge superior (kicker) que no se corte feo */
  .kicker{
    font-size: 13px;
    line-height: 1.2;
    white-space: normal;
  }

  /* Rotator/tags: que no compita con el CTA */
  .hero-rotator{
    margin-top: 12px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .hero-rotator .tag,
  #hero-rotate{
    padding: 7px 10px;
    font-size: 13px;
  }

  /* Botones: full width para mobile premium */
  .hero-actions{
    margin-top: 18px;
    gap: 10px;
  }
  .hero-actions .btn{
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 520px){

  /* Caja más liviana: deja ver el video */
  .hero-content{
    padding: 16px;
    border-radius: 18px;
    max-width: 92%;
    background: linear-gradient(
      180deg,
      rgba(10, 18, 28, 0.42) 0%,
      rgba(10, 18, 28, 0.28) 100%
    );
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  }

  /* Título un poco más compacto */
  .hero-content h1{
    font-size: 1.72rem;
    line-height: 1.06;
    margin-bottom: 10px;
  }

  /* Lead más corto y sutil */
  .hero-content p{
    font-size: 0.95rem;
    line-height: 1.35;
    opacity: 0.9;
  }

  /* Chips: más chicos, menos “ruido” */
  .hero-rotator{
    margin-top: 10px;
    gap: 8px;
  }
  .hero-rotator .tag,
  #hero-rotate{
    padding: 6px 10px;
    font-size: 12.5px;
    opacity: 0.88;
  }
}
@media (max-width: 520px){
  .hero-rotator .tag{ display:none; }
  .hero-actions .btn-primary{
    display: none;
  }
}
@media (max-width: 520px){
  .hero-content h1{
    font-size: 1.55rem;   /* antes 1.72 */
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.015em;
  }
}
@media (max-width: 520px){

  /* Bajamos la caja de texto */
  .hero{
    display: flex;
    align-items: flex-end;
  }

  .hero .container{
    padding-bottom: 32px; /* controla qué tan abajo queda */
  }

  .hero-content{
    margin-bottom: 0;
  }
}
@media (max-width: 520px){
  .hero .container{
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 520px){
  .hero{
    min-height: 100svh;
  }
}
/* =========================
   ETAPA 2 – Servicios: overlay más premium
   (no rompe layout)
========================= */

/* Overlay más liviano */
#servicios .service-card::after{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.06) 0%,
      rgba(0,0,0,.22) 45%,
      rgba(0,0,0,.62) 100%
    );
}

/* Texto un poco más abajo y más aire */
#servicios .service-overlay{
  left: 20px;
  right: 20px;
  bottom: 16px;
}

/* Título más compacto */
#servicios .service-overlay h3{
  font-size: 1.25rem;
  margin-bottom: 6px;
  font-weight: 700;
}

/* Descripción más liviana */
#servicios .service-overlay p{
  font-size: .95rem;
  line-height: 1.35;
  opacity: .82;

  /* evita que tape demasiado */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================
   Mobile refinement
========================= */
@media (max-width: 520px){

  #servicios .service-card{
    height: 360px; /* un poco más aire */
  }

  #servicios .service-overlay{
    left: 16px;
    right: 16px;
    bottom: 14px;
  }

  #servicios .service-overlay h3{
    font-size: 1.05rem;
  }

  #servicios .service-overlay p{
    font-size: .88rem;
    -webkit-line-clamp: 2;
    opacity: .78;
  }
}
/* =========================
   ETAPA 3 – Bloque Maestranza (sin imágenes)
========================= */
.mae-block{
  margin-top: 26px;
}

.mae-inner{
  border-radius: 26px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(1200px 500px at 10% 0%, rgba(0,140,255,.10), transparent 50%),
              radial-gradient(900px 400px at 100% 30%, rgba(0,255,204,.07), transparent 55%),
              rgba(10, 15, 25, .55);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  overflow: hidden;
}

.mae-kicker{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0 0 10px;
}

.mae-copy h3{
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}

.mae-lead{
  margin: 0 0 12px;
  opacity: .88;
  line-height: 1.45;
}

.mae-points{
  margin: 0 0 16px;
  padding-left: 18px;
  opacity: .9;
}

.mae-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mae-badges{
  display: grid;
  gap: 10px;
  align-content: start;
}

.mae-badge{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

.mae-badge strong{
  display:block;
  margin-bottom: 2px;
}

.mae-badge span{
  opacity: .85;
  font-size: .95rem;
}

@media (max-width: 920px){
  .mae-inner{ grid-template-columns: 1fr; }
}
/* =========================
   Badge "Servicio operativo"
========================= */
.service-badge{
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
}

/* Variante operativa (más seria, menos marketing) */
.service-badge--operativo{
  color: rgba(255,255,255,.95);
  background: rgba(0, 120, 255, .25);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
}
/* ===========================
   Maestranza - Card premium
   =========================== */

.card--wide{
  grid-column: 1 / -1;
}

/* detalle premium solo para maestranza */
.card--maestranza{
  position: relative;
  overflow: hidden;
}

.card--maestranza::after{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:4px;
  background: linear-gradient(90deg, var(--primary), rgba(11,102,214,.25));
  opacity:.95;
}

/* fondo sutil (no molesta, suma “premium”) */
.card--maestranza::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(520px 220px at 18% 20%, rgba(11,102,214,.10), transparent 60%),
    radial-gradient(420px 200px at 80% 70%, rgba(15,118,110,.08), transparent 55%);
  pointer-events:none;
  z-index:0;
}

.card--maestranza > *{
  position: relative;
  z-index:1;
}

/* en mobile da igual, pero lo dejamos prolijo */
@media (max-width: 980px){
  .card--wide{ grid-column: auto; }
}