/*
  estilos.css
  CSS unificado para Vilar Dinámica Efectiva S.A.
  Generado a partir de:
  - estilos(4).css
  - estilos_1col(2).css / estilos_arquitectura_comercial_vilar_viñetas(2).css
  - estilos_xx(1).css revisado como base anterior
  - estilos embebidos del HTML limpio para dejar todo en un solo archivo

  Ubicación esperada en el proyecto:
  /css/estilos.css
*/


:root{
  --bg:#03070b; --panel:#071018; --panel2:#0b1721; --turq:#18d4d8; --turq2:#83f8ff;
  --white:#f3fbff; --muted:rgba(243,251,255,.74); --soft:rgba(243,251,255,.60);
  --line:rgba(131,248,255,.18); --line2:rgba(255,255,255,.09);
  --shadow:0 30px 90px rgba(0,0,0,.50); --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif; color:var(--white);
  background:
    radial-gradient(circle at 80% 7%,rgba(24,212,216,.25),transparent 27%),
    radial-gradient(circle at 6% 20%,rgba(13,95,124,.32),transparent 30%),
    linear-gradient(180deg,#03070b 0%,#061018 42%,#03070b 100%);
}
body:before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 78%);
}
a{color:inherit;text-decoration:none}
.container{width:min(1240px,calc(100% - 40px));margin:auto}
.topbar{position:sticky;top:0;z-index:100;background:rgba(3,7,11,.84);border-bottom:1px solid var(--line2);backdrop-filter:blur(22px)}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:13px}
/*.brand-mark{width:54px;height:54px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(24,212,216,.28),rgba(255,255,255,.045));border:1px solid rgba(131,248,255,.34);box-shadow:0 0 40px rgba(24,212,216,.20);font-family:Montserrat,sans-serif;font-size:25px;font-weight:900;color:var(--turq2)}*/
.brand strong{display:block;font-family:Montserrat,sans-serif;font-size:21px;letter-spacing:.22em;line-height:1}
.brand span{display:block;margin-top:6px;font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:rgba(131,248,255,.74);font-weight:800}

.brand-mark{
    width:42px;
    height:55px;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
}

.brand strong{
   font-family:'../fonts/Plateia Bold.ttf', serif !important;
   font-size:18px !important;
   letter-spacing:0.08em !important;
}

.links{display:flex;align-items:center;gap:17px;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:850;color:rgba(243,251,255,.70)}
.links a:hover{color:var(--turq2)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid rgba(131,248,255,.26);background:linear-gradient(135deg,var(--turq),var(--turq2));color:#021014;font-weight:950;text-transform:uppercase;font-size:12px;letter-spacing:.04em;box-shadow:0 17px 46px rgba(24,212,216,.24)}
.btn.ghost{background:rgba(255,255,255,.045);color:white;box-shadow:none}
.hero{position:relative;min-height:calc(100vh - 78px);display:grid;align-items:center;padding:80px 0 64px;border-bottom:1px solid var(--line2);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(3,7,11,.98) 0%,rgba(3,7,11,.84) 40%,rgba(3,7,11,.25) 100%),linear-gradient(180deg,rgba(3,7,11,.25),rgba(3,7,11,.92)),url('../imagenes/imagen_1.jpg') center center/cover no-repeat;filter:brightness(1.12) contrast(1.06) saturate(1.12)}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 35%,rgba(24,212,216,.22),transparent 30%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;padding:9px 14px;border-radius:999px;border:1px solid rgba(131,248,255,.26);background:rgba(24,212,216,.08);color:var(--turq2);font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:950}
h1,h2,h3,p{margin-top:0}
h1{margin:22px 0 0;max-width:960px;font-family:Montserrat,sans-serif;font-size:clamp(38px,5.4vw,72px);line-height:.98;letter-spacing:-.055em;text-transform:uppercase}
h2{font-family:Montserrat,sans-serif;font-size:clamp(28px,3.4vw,48px);line-height:1.06;letter-spacing:-.046em;text-transform:uppercase;margin:0}
h3{font-family:Montserrat,sans-serif;font-size:20px;line-height:1.15;letter-spacing:-.03em;text-transform:uppercase;margin:0}
.lead{max-width:850px;margin:25px 0 0;color:var(--muted);font-size:18px;line-height:1.86}
.lead.small{font-size:16px;color:rgba(243,251,255,.68);margin-top:14px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:32px;max-width:820px}
.proof-card{padding:16px;border-radius:20px;border:1px solid var(--line2);background:rgba(255,255,255,.045)}
.proof-card strong{display:block;color:var(--turq2);font-size:22px;font-weight:950}
.proof-card span{display:block;margin-top:6px;color:rgba(243,251,255,.55);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:900}
.panel{padding:30px;border-radius:32px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));box-shadow:var(--shadow)}
.hero-panel-img{border-radius:24px;overflow:hidden;border:1px solid rgba(131,248,255,.18);background:#071018}
.hero-panel-img img{display:block;width:100%;height:360px;object-fit:cover;filter:brightness(1.08) contrast(1.05) saturate(1.10)}
.hero-panel-img p{padding:18px;margin:0;color:rgba(243,251,255,.75);line-height:1.65;font-size:14px}
section{padding:88px 0}
.darkband{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:radial-gradient(circle at 20% 12%,rgba(24,212,216,.12),transparent 28%),rgba(0,0,0,.25)}
.section-title{max-width:1100px;margin-bottom:34px}
.kicker{margin-bottom:12px;color:var(--turq2);font-size:11.5px;font-weight:950;letter-spacing:.32em;text-transform:uppercase}
.section-title p,.copy{margin:20px 0 0;color:var(--muted);font-size:17px;line-height:1.9}
.copy.small{font-size:15.5px;color:rgba(243,251,255,.68)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{padding:26px;border-radius:26px;border:1px solid var(--line2);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));box-shadow:0 18px 60px rgba(0,0,0,.22)}
.card .icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;border:1px solid rgba(131,248,255,.18);background:rgba(24,212,216,.10);font-size:24px;margin-bottom:18px}
/*.card p{margin:14px 0 0;color:rgba(243,251,255,.70);font-size:14.5px;line-height:1.82}*/
.card p{margin:14px 0 0;color:rgba(243,251,255,.70);font-size:14.5px;line-height:1.50}
.card ul{margin:14px 0 0;color:rgba(243,251,255,.70);font-size:14.5px;line-height:1.50}
.card li{margin:14px 0 0;color:rgba(243,251,255,.70);font-size:14.5px;line-height:1.00}

.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:42px;align-items:center}
.split.reverse{grid-template-columns:1.08fr .92fr}
.feature-list{display:grid;gap:13px}
.feature{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:17px;border-radius:22px;border:1px solid var(--line2);background:rgba(0,0,0,.24)}
.feature .icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;border:1px solid rgba(131,248,255,.18);background:rgba(24,212,216,.10);font-size:24px}
.feature p{margin:7px 0 0;color:rgba(243,251,255,.68);line-height:1.74;font-size:14.5px}
.media-card{margin:0;border-radius:28px;overflow:hidden;border:1px solid rgba(131,248,255,.18);background:#071018;box-shadow:var(--shadow)}
.media-card img{display:block;width:100%;height:670px;object-fit:cover;object-position:center center;filter:brightness(1.10) contrast(1.06) saturate(1.12)}
.media-card.contain img{object-fit:contain;background:#071018;padding:10px}
.media-card.large img{height:570px}
.media-card.small img{height:250px}
.media-card figcaption{padding:18px 20px;color:rgba(243,251,255,.78);line-height:1.72;font-size:14.5px;border-top:1px solid rgba(255,255,255,.08);background:rgba(3,7,11,.72)}
.media-row{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.media-stack{display:grid;gap:18px}
.assurance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:28px}
.assurance-card{padding:24px;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.045)}
.assurance-card p{margin:10px 0 0;color:rgba(243,251,255,.70);line-height:1.78;font-size:14.5px}
.protocolar{margin-top:22px;padding:26px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))}
.protocolar p{margin:0;color:rgba(243,251,255,.80);font-size:16.5px;line-height:1.92}
.protocolar p+p{margin-top:15px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery-card img{height:210px}
.gallery-card figcaption{font-size:13px;padding:13px 15px}
.legal-note{border-left:4px solid var(--turq);padding:18px 22px;margin-top:26px;border-radius:0 20px 20px 0;background:rgba(24,212,216,.08);color:rgba(243,251,255,.82);line-height:1.8}
.cta{text-align:center;padding:90px 0;border-top:1px solid rgba(131,248,255,.16);border-bottom:1px solid rgba(131,248,255,.16);background:radial-gradient(circle at 50% 8%,rgba(24,212,216,.28),transparent 45%),linear-gradient(180deg,rgba(24,212,216,.10),rgba(0,0,0,.22))}
.cta h2{max-width:1000px;margin:auto}
.cta p{max-width:880px;margin:24px auto 0;color:var(--muted);font-size:17px;line-height:1.86}
.contact{display:grid;grid-template-columns:1fr .9fr;gap:28px;align-items:start}
.form label{display:grid;gap:8px;margin-bottom:14px;color:rgba(243,251,255,.66);font-size:13px;font-weight:850}
.form input,.form textarea,.form select{width:100%;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.25);color:white;border-radius:16px;padding:15px;font:inherit;outline:none}
footer{padding:38px 0;border-top:1px solid var(--line2);background:rgba(0,0,0,.36);color:rgba(243,251,255,.55)}
.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.footer-inner b{display:block;color:white;letter-spacing:.22em;font-size:22px;font-family:Montserrat,sans-serif}
@media(max-width:1060px){
  .links{display:none} .hero-grid,.split,.split.reverse,.contact,.media-row{grid-template-columns:1fr}
  .grid4,.grid3,.grid2{grid-template-columns:repeat(2,1fr)} .gallery-grid{grid-template-columns:repeat(2,1fr)} .proof{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .container{width:min(100% - 28px,1240px)} .nav .btn{display:none} .nav{min-height:auto;padding:15px 0} .brand strong{font-size:19px}
  h1{font-size:38px} h2{font-size:29px} section{padding:68px 0} .grid4,.grid3,.grid2,.gallery-grid,.proof{grid-template-columns:1fr}
  .media-card img,.media-card.large img{height:360px} .media-card.small img{height:260px} .panel{padding:22px}
}


/* Ajuste solicitado: reducir altura del encabezado de "Arquitectura comercial Vilar" */
#unidades-negocio .unit-intro{
  gap:24px;
  align-items:stretch;
  margin-bottom:24px;
  min-height:260px;
}

#unidades-negocio .unit-intro-image{
  border-radius:0 24px 24px 0;
}

#unidades-negocio .unit-intro-image img{
  width:100%;
  height:560px;
  object-fit:cover;
  display:block;
}

#unidades-negocio .unit-intro-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

@media(max-width:900px){
  #unidades-negocio .unit-intro{
    grid-template-columns:1fr;
    min-height:auto;
  }

  #unidades-negocio .unit-intro-image{
    order:2;
    border-radius:24px;
  }

  #unidades-negocio .unit-intro-text{
    order:1;
  }

  #unidades-negocio .unit-intro-image img{
    height:220px;
  }
}

@media(max-width:640px){
  #unidades-negocio .unit-intro-image img{
    height:190px;
  }
}


/* =========================================================
   Estilos adicionales: arquitectura comercial con viñetas
   ========================================================= */
/* Arquitectura comercial Vilar: bloque con imagen y contenido en viñetas */
.unit-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:34px;
  align-items:center;
  margin-bottom:36px;
}
.unit-intro-image{
  margin:0;
  border:1px solid rgba(131,248,255,.22);
  border-radius:30px;
  overflow:hidden;
  background:#071118;
  box-shadow:0 24px 76px rgba(0,0,0,.34),0 0 34px rgba(0,255,255,.10);
}
.unit-intro-image img{
  width:100%;
  height:430px;
  object-fit:cover;
  display:block;
  filter:brightness(1.12) contrast(1.08) saturate(1.12);
}
.unit-intro-text{
  text-align:left;
}
.unit-bullet-list{
  list-style:none;
  margin:34px 0 0;
  padding:0;
  display:grid;
  gap:24px;
}
.unit-bullet-item{
  position:relative;
  padding-left:38px;
}
.unit-bullet-item::before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#ffffff 0%,#9fffff 18%,#00ffff 45%,#0059ff 78%,#001a56 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.28),
    0 0 14px rgba(0,255,255,.88),
    0 0 28px rgba(0,89,255,.58);
}
.unit-bullet-item h3{
  font-size:24px!important;
  color:#f5fbff;
  margin:0 0 12px;
}
.unit-bullet-item p{
  color:rgba(245,251,255,.75);
  line-height:1.88;
  margin:0;
}
.unit-bullet-item p+p{
  margin-top:10px;
}

@media(max-width:900px){
  .unit-intro{
    grid-template-columns:1fr;
  }
  .unit-intro-image img{
    height:330px;
  }
}
@media(max-width:620px){
  .unit-intro-image img{
    height:260px;
  }
  .unit-bullet-item{
    padding-left:32px;
  }
}


/* =========================================================
   Estilos que estaban dentro del <head> del HTML
   ========================================================= */


/* ---- Bloque embebido original 1 ---- */
/* Revisión final premium: imágenes centradas, más luz y jerarquía tipográfica armónica */
img{object-position:center center!important;}
.media img,.media-card img,.gallery-card img,.photo-card,.gal-item{
  object-position:center center!important;
  background-position:center center!important;
  filter:brightness(1.13) contrast(1.07) saturate(1.12)!important;
}
h1{font-size:clamp(38px,5vw,72px)!important;line-height:1!important;}
h2{font-size:clamp(28px,3.35vw,46px)!important;line-height:1.08!important;}
h3{font-size:19px!important;line-height:1.16!important;}
.unit-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin-bottom:36px}
.unit-intro-image{margin:0;border:1px solid rgba(131,248,255,.22);border-radius:30px;overflow:hidden;background:#071118;box-shadow:0 24px 76px rgba(0,0,0,.34),0 0 34px rgba(0,255,255,.10)}
.unit-intro-image img{width:100%;height:430px;object-fit:cover;display:block;filter:brightness(1.12) contrast(1.08) saturate(1.12)}
.unit-intro-text{text-align:left}
.unit-split-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px}
.unit-split-card{border:1px solid rgba(131,248,255,.20);border-radius:28px;padding:30px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:0 24px 76px rgba(0,0,0,.30)}
.unit-split-card h3{font-size:24px!important;color:#f5fbff}
.unit-split-card p{color:rgba(245,251,255,.75);line-height:1.88}
.unit-split-card ul{list-style:none;margin:18px 0 0;padding:0;color:rgba(245,251,255,.72);line-height:1.85}
.unit-split-card li{position:relative;padding-left:27px;margin:12px 0}
.unit-split-card li::before{content:"";position:absolute;left:0;top:.66em;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffffff 0%,#9fffff 18%,#00ffff 45%,#0059ff 78%,#001a56 100%);box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 12px rgba(0,255,255,.85),0 0 24px rgba(0,89,255,.55);transform:translateY(-50%)}
.training-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:30px}
.training-card{border:1px solid rgba(131,248,255,.18);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.045);box-shadow:0 20px 60px rgba(0,0,0,.28)}
.training-card video{width:100%;height:250px;object-fit:cover;background:#000;display:block}
.training-card div{padding:20px}
.training-card p{color:rgba(245,251,255,.72);line-height:1.78;font-size:14.5px}
.operacion-extra{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.operacion-extra figure{margin:0;border:1px solid rgba(131,248,255,.18);border-radius:22px;overflow:hidden;background:#071118}
.operacion-extra img{width:100%;height:260px;object-fit:cover;display:block;filter:brightness(1.14) contrast(1.08) saturate(1.12)}
.operacion-extra figcaption{padding:14px 16px;color:rgba(245,251,255,.76);line-height:1.68;font-size:13.5px;background:rgba(2,7,11,.72)}
@media(max-width:900px){.unit-intro{grid-template-columns:1fr}.unit-intro-image img{height:330px}.unit-split-grid,.operacion-extra{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.unit-intro-image img{height:260px}.unit-split-grid,.operacion-extra{grid-template-columns:1fr}}


/* ---- Bloque embebido original 2 ---- */
:root{
  --vilar-blue:#0000FF!important;
  --vilar-yellow:#FFF212!important;
  --vilar-black:#000000!important;
  --vilar-blue-2:#0059FF!important;
  --vilar-cyan:#00FFFF!important;
  --turq:#00FFFF!important;
  --turq2:#00FFFF!important;
  --bg:#000000!important;
  --panel:#061018!important;
}
body{
  background:
    radial-gradient(circle at 80% 8%,rgba(0,255,255,.20),transparent 28%),
    radial-gradient(circle at 8% 18%,rgba(0,89,255,.24),transparent 32%),
    linear-gradient(180deg,#000000,#061018 45%,#000000)!important;
}
.btn{
  background:linear-gradient(135deg,#00FFFF,#0059FF)!important;
  color:#000000!important;
}
.eyebrow,.kicker,.proof-card strong,.brand span{
  color:#00FFFF!important;
}
.card,.media,.protocol,.assurance article,.video,.topbar{
  border-color:rgba(0,255,255,.20)!important;
}


/* ---- Bloque embebido original 3 ---- */
/* Botón flotante de WhatsApp */
.whatsapp-float{
  position:fixed;
  right:28px;
  bottom:28px;
  width:68px;
  height:68px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#25D366,#0bbf55);
  color:#fff;
  text-decoration:none;
  z-index:99999;
  box-shadow:
    0 0 0 6px rgba(37,211,102,.14),
    0 18px 45px rgba(0,0,0,.45),
    0 0 34px rgba(37,211,102,.45);
  border:1px solid rgba(255,255,255,.32);
  transition:transform .28s ease, box-shadow .28s ease, filter .28s ease;
}
.whatsapp-float:hover{
  transform:translateY(-4px) scale(1.06);
  filter:saturate(1.1);
  box-shadow:
    0 0 0 9px rgba(37,211,102,.18),
    0 22px 58px rgba(0,0,0,.55),
    0 0 46px rgba(37,211,102,.68);
}
.whatsapp-float svg{
  width:36px;
  height:36px;
  display:block;
}
.whatsapp-float::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid rgba(37,211,102,.35);
  animation:whatsappPulse 1.9s ease-out infinite;
}
@keyframes whatsappPulse{
  0%{transform:scale(.9);opacity:.85}
  100%{transform:scale(1.25);opacity:0}
}
@media(max-width:768px){
  .whatsapp-float{
    width:60px;
    height:60px;
    right:18px;
    bottom:18px;
  }
  .whatsapp-float svg{
    width:31px;
    height:31px;
  }
}


/* ---- Bloque embebido original 4 ---- */
/* Redes sociales en pie de página */
.footer-brand-social{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer-social-icons{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
  flex-wrap:wrap;
}
.footer-social-icons a{
  width:40px;
  height:40px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#f5fbff;
  text-decoration:none;
  border:1px solid rgba(0,255,255,.34);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:0 12px 32px rgba(0,0,0,.34), 0 0 18px rgba(0,255,255,.13);
  transition:transform .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.footer-social-icons a:hover{
  transform:translateY(-3px) scale(1.06);
  color:#000;
  border-color:#00FFFF;
  background:linear-gradient(135deg,#00FFFF,#0059FF);
  box-shadow:0 18px 46px rgba(0,0,0,.48), 0 0 30px rgba(0,255,255,.52);
}
.footer-social-icons svg{
  width:20px;
  height:20px;
  display:block;
}
@media(max-width:768px){
  .footer-brand-social{
    align-items:center;
    text-align:center;
  }
  .footer-social-icons{
    justify-content:center;
  }
}


/* ---- Bloque embebido original 5 ---- */
.unit-split-card{padding:0 0 28px!important;overflow:hidden}
.unit-card-image{display:block;width:100%;max-width:none;height:220px;object-fit:cover;margin:0 0 22px 0;}
.unit-split-card h3,.unit-split-card p,.unit-split-card ul{padding-left:30px;padding-right:30px;}


/* ---- Bloque embebido original 6 ---- */
.card{padding:0!important;overflow:hidden}
.service-card-image{display:block;width:100%;height:220px;object-fit:cover;margin:0 0 22px}
.card h3,.card p,.card ul{padding-left:30px;padding-right:30px}


/* ---- Bloque embebido original 7 ---- */
.services-intro{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:32px}
.services-intro-image img{width:100%;height:100%;min-height:420px;object-fit:cover;display:block;border-radius:0 24px 24px 0}
@media(max-width:900px){.services-intro{grid-template-columns:1fr}.services-intro-image img{min-height:280px;border-radius:24px}}

/* =========================================================
   Respaldo patrimonial y continuidad operativa
   ========================================================= */
#respaldo .patrimonial-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px;
  align-items:stretch;
  margin-bottom:34px;
}
#respaldo .patrimonial-intro-text{
  padding:28px;
  border:1px solid rgba(131,248,255,.18);
  border-radius:28px 0 0 28px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  box-shadow:0 24px 76px rgba(0,0,0,.28);
}
#respaldo .patrimonial-intro-text p{
  margin:20px 0 0;
  color:rgba(243,251,255,.78);
  font-size:16.5px;
  line-height:1.88;
}
#respaldo .patrimonial-intro-image{
  margin:0;
  overflow:hidden;
  min-height:100%;
  border:1px solid rgba(131,248,255,.18);
  border-radius:0 28px 28px 0;
  background:#071018;
  box-shadow:0 24px 76px rgba(0,0,0,.32);
}
#respaldo .patrimonial-intro-image img{
  display:block;
  width:100%;
  height:100%;
  min-height:460px;
  object-fit:cover;
  object-position:center;
  filter:brightness(1.10) contrast(1.06) saturate(1.10);
}
#respaldo .patrimonial-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
#respaldo .patrimonial-card{
  overflow:hidden;
  border:1px solid rgba(131,248,255,.18);
  border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  box-shadow:0 20px 64px rgba(0,0,0,.28);
}
#respaldo .patrimonial-card-image{
  display:block;
  width:100%;
  height:260px;
  object-fit:cover;
  object-position:center;
  margin:0;
  filter:brightness(1.10) contrast(1.06) saturate(1.10);
}
#respaldo .patrimonial-card-body{
  padding:26px 28px 30px;
}
#respaldo .patrimonial-card h3{
  margin:0;
  color:#f5fbff;
  font-size:22px!important;
  line-height:1.18!important;
}
#respaldo .patrimonial-card p{
  margin:14px 0 0;
  color:rgba(243,251,255,.72);
  font-size:14.5px;
  line-height:1.78;
}
#respaldo .patrimonial-card ul{
  margin:16px 0 0;
  padding-left:20px;
  color:rgba(243,251,255,.72);
  font-size:14.5px;
  line-height:1.72;
}
#respaldo .patrimonial-card li+li{margin-top:8px}
@media(max-width:900px){
  #respaldo .patrimonial-intro{grid-template-columns:1fr}
  #respaldo .patrimonial-intro-text,
  #respaldo .patrimonial-intro-image{border-radius:28px}
  #respaldo .patrimonial-intro-image img{
    min-height:320px;
    height:320px;
  }
  #respaldo .patrimonial-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  #respaldo .patrimonial-intro-text{padding:22px}
  #respaldo .patrimonial-intro-image img{
    min-height:240px;
    height:240px;
  }
  #respaldo .patrimonial-card-image{height:220px}
  #respaldo .patrimonial-card-body{padding:22px}
}

/* =========================================================
   Ajuste exclusivo del menú principal
   ========================================================= */
.topbar .nav{
  flex-wrap:nowrap;
  gap:14px;
}

.topbar .brand-full-logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  min-width:0;
}

.topbar .brand-logo-full{
  display:block;
  width:250px;
  max-width:25vw;
  height:auto;
  object-fit:contain;
}

.topbar .links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  min-width:0;
  gap:13px;
  white-space:nowrap;
}

.topbar .links a{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  flex:0 0 auto;
}

.topbar .nav > .btn{
  flex:0 0 auto;
  white-space:nowrap;
  padding-left:18px;
  padding-right:18px;
}

@media (min-width:1061px) and (max-width:1380px){
  .topbar .brand-logo-full{
    width:107px;
    max-width:22vw;
  }

  .topbar .links{
    gap:10px;
    font-size:10.5px;
  }

  .topbar .nav > .btn{
    font-size:11px;
    padding-left:15px;
    padding-right:15px;
  }
}

@media (max-width:1060px){
  .topbar .brand-logo-full{
    width:110px;
    max-width:30vw;
  }
}

@media (max-width:640px){
  .topbar .brand-logo-full{
    width:95px;
    max-width:55vw;
  }
}



/* ===== Responsive mejorado ===== */
img{max-width:100%;height:auto;}
.brand-logo-full{height:28px;width:auto;}
@media (max-width:1024px){
.hero-grid,.services-intro,.unit-intro,.media-row,.contact{grid-template-columns:1fr!important;}
.grid4,.grid3,.unit-split-grid,#respaldo .patrimonial-grid{grid-template-columns:repeat(2,1fr)!important;}
.hero-panel-img img,.media-card.large img{height:380px!important;}
}
@media (max-width:768px){
.topbar{position:relative;}
.nav{flex-direction:column;gap:14px;padding:16px 0;}
.links{display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px 14px;font-size:10px;}
.btn{width:100%;max-width:320px;}
.grid4,.grid3,.grid2,.unit-split-grid,.gallery-grid,.proof,#respaldo .patrimonial-grid{grid-template-columns:1fr!important;}
.hero-panel-img img,.media-card img,.media-card.large img,.unit-intro-image img,.services-intro-image img{height:260px!important;min-height:260px!important;}
.container{width:calc(100% - 24px)!important;}
h1{font-size:34px!important;}h2{font-size:28px!important;}
}
@media (max-width:480px){
.brand-logo-full{height:22px!important;}
h1{font-size:28px!important;}h2{font-size:24px!important;}
}

/* =========================================================
   Menú responsive profesional con botón hamburguesa
   ========================================================= */
.menu-toggle{
  display:none;
  width:46px;
  height:46px;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(0,255,255,.28);
  background:rgba(255,255,255,.045);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}

.menu-toggle span{
  display:block;
  width:22px;
  height:2px;
  border-radius:999px;
  background:#00ffff;
  transition:transform .25s ease, opacity .25s ease;
}

.menu-toggle.is-open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2){
  opacity:0;
}

.menu-toggle.is-open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

@media(max-width:1060px){
  .topbar{
    position:sticky;
    top:0;
  }

  .topbar .nav{
    min-height:72px;
    display:grid;
    grid-template-columns:auto 46px;
    align-items:center;
    gap:14px;
    padding:12px 0;
  }

  .topbar .brand-full-logo{
    justify-self:start;
  }

  .topbar .brand-logo-full{
    height:24px!important;
    width:auto!important;
    max-width:min(62vw,210px);
  }

  .menu-toggle{
    display:inline-flex;
    justify-self:end;
  }

  .topbar .links{
    display:none!important;
    grid-column:1 / -1;
    width:100%;
    margin-top:2px;
    padding:12px;
    border:1px solid rgba(0,255,255,.18);
    border-radius:18px;
    background:rgba(3,7,11,.97);
    box-shadow:0 22px 55px rgba(0,0,0,.46);
    flex-direction:column;
    align-items:stretch;
    gap:4px;
  }

  .topbar .links.is-open{
    display:flex!important;
  }

  .topbar .links a{
    min-height:44px;
    padding:0 14px;
    border-radius:12px;
    justify-content:flex-start;
    font-size:12px;
    white-space:nowrap;
  }

  .topbar .links a:hover{
    background:rgba(0,255,255,.08);
  }

  .topbar .nav > .btn{
    grid-column:1 / -1;
    width:100%;
    max-width:none;
    min-height:46px;
    margin-top:2px;
  }
}

@media(max-width:640px){
  .topbar .nav{
    grid-template-columns:minmax(0,1fr) 44px;
  }

  .menu-toggle{
    width:44px;
    height:44px;
  }

  .topbar .brand-logo-full{
    height:22px!important;
    max-width:68vw;
  }

  .topbar .links{
    padding:10px;
    border-radius:16px;
  }

  .topbar .links a{
    font-size:11.5px;
  }
}

/* Evita desplazamiento horizontal accidental */
html,body{
  max-width:100%;
  overflow-x:hidden;
}

/* =========================================================
   Unificación general de listas UL y LI
   ========================================================= */

/* Se unifican todas las listas de contenido.
   Se excluye .unit-bullet-list porque utiliza una estructura
   visual especial con viñetas personalizadas. */
ul:not(.unit-bullet-list){
  margin:16px 0 0 !important;
  padding-left:22px !important;
  color:rgba(243,251,255,.72) !important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-size:14.5px !important;
  font-weight:400 !important;
  line-height:1.65 !important;
}

ul:not(.unit-bullet-list) > li{
  margin:0 !important;
  padding-left:2px;
  color:inherit !important;
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
}

ul:not(.unit-bullet-list) > li + li{
  margin-top:10px !important;
}

/* Mantiene las viñetas alineadas y consistentes */
ul:not(.unit-bullet-list){
  list-style-position:outside;
}

@media(max-width:640px){
  ul:not(.unit-bullet-list){
    padding-left:20px !important;
    font-size:14px !important;
    line-height:1.6 !important;
  }

  ul:not(.unit-bullet-list) > li + li{
    margin-top:9px !important;
  }
}


/* =========================================================
   CORRECCIÓN FINAL: MENÚ SIEMPRE VISIBLE
   Se aplica en PC, tablet y celular.
   ========================================================= */

/* Reserva el espacio del encabezado fijo */
html{
  scroll-padding-top:90px;
}

body{
  padding-top:78px;
}

/* Encabezado fijo en todos los tamaños */
.topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:1000000 !important;
  background:rgba(3,7,11,.96) !important;
  border-bottom:1px solid rgba(0,255,255,.20) !important;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  transform:translateZ(0);
}

/* Evita que los enlaces internos queden ocultos detrás del menú */
section[id],
footer[id]{
  scroll-margin-top:90px;
}

/* Tablet y celular */
@media(max-width:1060px){
  html{
    scroll-padding-top:84px;
  }

  body{
    padding-top:72px;
  }

  .topbar{
    position:fixed !important;
  }

  .topbar .nav{
    min-height:72px;
  }

  section[id],
  footer[id]{
    scroll-margin-top:84px;
  }

  /* El desplegable queda debajo de la barra fija */
  .topbar .links{
    position:absolute;
    top:calc(100% + 1px);
    left:0;
    right:0;
    width:100%;
    max-height:calc(100vh - 84px);
    overflow-y:auto;
    margin-top:0;
    z-index:1000001;
  }

  .menu-toggle{
    position:relative;
    z-index:1000002;
  }
}

/* Celulares pequeños */
@media(max-width:640px){
  html{
    scroll-padding-top:80px;
  }

  body{
    padding-top:68px;
  }

  .topbar .nav{
    min-height:68px;
  }

  section[id],
  footer[id]{
    scroll-margin-top:80px;
  }

  .topbar .links{
    max-height:calc(100vh - 80px);
  }
}


/* =========================================================
   MEJORAS VISUALES, ANIMACIONES Y RESPONSIVE FINO
   ========================================================= */

:root{
  --section-space:clamp(64px,7vw,104px);
  --content-gap:clamp(18px,2vw,28px);
  --card-radius:24px;
  --image-radius:22px;
  --image-filter:brightness(1.08) contrast(1.06) saturate(1.10) hue-rotate(2deg);
  --image-filter-hover:brightness(1.12) contrast(1.07) saturate(1.14) hue-rotate(2deg);
}

/* Espaciado homogéneo */
section{
  padding:var(--section-space) 0 !important;
}

.section-title{
  margin-bottom:clamp(28px,4vw,44px) !important;
}

.section-title > * + *,
.unit-intro-text > * + *,
.services-intro-text > * + *,
.patrimonial-intro-text > * + *{
  margin-top:18px;
}

.grid4,
.grid3,
.grid2,
.gallery-grid,
.unit-split-grid,
.assurance-grid,
#respaldo .patrimonial-grid,
.training-grid,
.operacion-extra{
  gap:var(--content-gap) !important;
}

/* Tarjetas con tratamiento homogéneo */
.card,
.unit-split-card,
.media-card,
.assurance-card,
.patrimonial-card,
.training-card,
.feature,
.proof-card,
.panel,
.protocolar{
  border-radius:var(--card-radius) !important;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background-color .35s ease;
}

@media (hover:hover) and (pointer:fine){
  .card:hover,
  .unit-split-card:hover,
  .media-card:hover,
  .assurance-card:hover,
  .patrimonial-card:hover,
  .training-card:hover,
  .feature:hover,
  .proof-card:hover{
    transform:translateY(-5px);
    border-color:rgba(0,255,255,.34) !important;
    box-shadow:0 24px 68px rgba(0,0,0,.38),0 0 28px rgba(0,255,255,.10) !important;
  }
}

/* Fade suave al hacer scroll */
.reveal-on-scroll{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .65s ease var(--reveal-delay,0ms),
    transform .65s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms);
  will-change:opacity,transform;
}

.reveal-on-scroll.is-visible{
  opacity:1;
  transform:none;
}

/* Imágenes: misma iluminación, radio y tratamiento */
.media-card,
.unit-intro-image,
.services-intro-image,
.patrimonial-intro-image,
.training-card,
.operacion-extra figure,
.hero-panel-img{
  overflow:hidden;
}

.media-card img,
.gallery-card img,
.unit-card-image,
.service-card-image,
.technology-card-image,
.patrimonial-card-image,
.unit-intro-image img,
.services-intro-image img,
.patrimonial-intro-image img,
.hero-panel-img img,
.training-card img,
.operacion-extra img{
  display:block;
  width:100%;
  object-fit:cover;
  object-position:center;
  border-radius:0 !important;
  filter:var(--image-filter) !important;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),filter .45s ease;
  transform:scale(1.001);
}

/* Alturas homogéneas para imágenes de tarjetas */
.unit-card-image,
.service-card-image,
.technology-card-image,
.patrimonial-card-image,
.gallery-card img{
  height:230px !important;
  min-height:230px !important;
}

@media (hover:hover) and (pointer:fine){
  .media-card:hover img,
  .gallery-card:hover img,
  .unit-split-card:hover .unit-card-image,
  .card:hover .service-card-image,
  .patrimonial-card:hover .patrimonial-card-image,
  .training-card:hover img,
  .operacion-extra figure:hover img,
  .hero-panel-img:hover img{
    transform:scale(1.035);
    filter:var(--image-filter-hover) !important;
  }
}

/* Botones más elegantes */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .25s ease,
    box-shadow .30s ease,
    filter .30s ease,
    border-color .30s ease;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.42) 48%,transparent 80%);
  transform:translateX(-130%);
  transition:transform .55s ease;
}

@media (hover:hover) and (pointer:fine){
  .btn:hover{
    transform:translateY(-2px);
    filter:saturate(1.08) brightness(1.04);
    box-shadow:0 20px 52px rgba(0,255,255,.26);
  }

  .btn:hover::before{
    transform:translateX(130%);
  }
}

.btn:active{
  transform:translateY(0) scale(.985);
}

/* Responsive fino */
@media (min-width:1600px){
  .container{
    width:min(1440px,calc(100% - 72px));
  }

  .gallery-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .unit-card-image,
  .service-card-image,
  .technology-card-image,
  .patrimonial-card-image,
  .gallery-card img{
    height:250px !important;
    min-height:250px !important;
  }
}

@media (min-width:1200px) and (max-width:1599px){
  .container{
    width:min(1240px,calc(100% - 48px));
  }
}

@media (min-width:900px) and (max-width:1199px){
  .container{
    width:min(100% - 40px,1100px);
  }

  .grid4,
  .gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .unit-split-grid,
  #respaldo .patrimonial-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (min-width:700px) and (max-width:899px){
  .container{
    width:calc(100% - 32px) !important;
  }

  .grid4,
  .grid3,
  .grid2,
  .gallery-grid,
  .unit-split-grid,
  #respaldo .patrimonial-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .hero-grid,
  .services-intro,
  .unit-intro,
  .media-row,
  .contact{
    grid-template-columns:1fr !important;
  }

  .unit-card-image,
  .service-card-image,
  .technology-card-image,
  .patrimonial-card-image,
  .gallery-card img{
    height:220px !important;
    min-height:220px !important;
  }
}

@media (max-width:699px){
  .container{
    width:calc(100% - 24px) !important;
  }

  .grid4,
  .grid3,
  .grid2,
  .gallery-grid,
  .unit-split-grid,
  #respaldo .patrimonial-grid,
  .proof{
    grid-template-columns:1fr !important;
  }

  .hero-grid,
  .services-intro,
  .unit-intro,
  .media-row,
  .contact{
    grid-template-columns:1fr !important;
  }

  .unit-card-image,
  .service-card-image,
  .technology-card-image,
  .patrimonial-card-image,
  .gallery-card img{
    height:210px !important;
    min-height:210px !important;
  }

  .card h3,
  .card p,
  .card ul,
  .unit-split-card h3,
  .unit-split-card p,
  .unit-split-card ul{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  .actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .actions .btn{
    width:100%;
    max-width:none;
  }
}

@media (max-width:420px){
  .container{
    width:calc(100% - 20px) !important;
  }

  .unit-card-image,
  .service-card-image,
  .technology-card-image,
  .patrimonial-card-image,
  .gallery-card img{
    height:190px !important;
    min-height:190px !important;
  }

  .card,
  .unit-split-card,
  .media-card,
  .assurance-card,
  .patrimonial-card,
  .training-card,
  .feature,
  .proof-card,
  .panel,
  .protocolar{
    border-radius:20px !important;
  }
}

/* Accesibilidad: sin animaciones si el usuario lo solicita */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

  .reveal-on-scroll{
    opacity:1 !important;
    transform:none !important;
  }
}



/* Igualar apariencia de 'Unidades de servicio' con 'Respaldo patrimonial' */
#servicios .services-intro{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:32px;
align-items:stretch;
margin-bottom:34px;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
}
#servicios .services-intro-text{
padding:0;border:0;background:transparent;box-shadow:none;
}
#servicios .services-intro-image{
margin:0;
overflow:hidden;
border-radius:0 24px 24px 0;
border:0;
background:transparent;
box-shadow:none;
}
#servicios .services-intro-image img{
display:block;
width:100%;
height:100%;
min-height:420px;
object-fit:cover;
object-position:center;
filter:brightness(1.10) contrast(1.06) saturate(1.12);
}
@media(max-width:900px){
#servicios .services-intro{grid-template-columns:1fr;}
#servicios .services-intro-image{border-radius:24px;}
#servicios .services-intro-image img{min-height:280px;}
}


/* =========================================================
   AJUSTES PUNTUALES DE DISTRIBUCIÓN
   ========================================================= */

/* 1. Arquitectura comercial Vilar:
   redondeado únicamente en el lado izquierdo de la imagen */
#unidades-negocio .unit-intro-image{
  border-radius:24px 0 0 24px !important;
}

/* 2. Unidades de servicio:
   texto e imagen ocupan todo el ancho disponible del contenedor,
   siguiendo la distribución de Respaldo patrimonial */
#servicios .section-title{
  width:100%;
  max-width:none !important;
  margin-left:0;
  margin-right:0;
}

#servicios .services-intro{
  width:100%;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:32px;
  align-items:stretch;
}

#servicios .services-intro-text,
#servicios .services-intro-image{
  width:100%;
  min-width:0;
}

#servicios .services-intro-image img{
  width:100%;
  height:100%;
  min-height:420px;
  object-fit:cover;
}

/* 3. Unidad de negocio especializada:
   el bloque introductorio toma todo el ancho del contenedor */
#carga-segura .section-title{
  width:100%;
  max-width:none !important;
}

#carga-segura .protocolar{
  width:100%;
  max-width:none;
}

/* 4. Centro integral de gestión de valores:
   el bloque introductorio toma todo el ancho del contenedor */
#valores .section-title{
  width:100%;
  max-width:none !important;
}

#valores .protocolar{
  width:100%;
  max-width:none;
}

/* Adaptación para tablet y celular */
@media(max-width:900px){
  #unidades-negocio .unit-intro-image{
    border-radius:24px !important;
  }

  #servicios .services-intro{
    grid-template-columns:1fr !important;
  }

  #servicios .services-intro-image{
    border-radius:24px !important;
  }

  #servicios .services-intro-image img{
    min-height:280px;
    height:280px;
  }
}

@media(max-width:620px){
  #servicios .services-intro-image img{
    min-height:230px;
    height:230px;
  }
}