/* ============================================================
   CySIP — Control y Seguridad IP
   Hoja de estilos principal
   Paleta y tipografía derivadas del logotipo y la publicidad oficial.
   ============================================================ */

:root{
  /* Marca */
  --navy-900:#061834;
  --navy-800:#0B2A5B;
  --navy-700:#123A78;
  --blue-600:#1757C7;   /* azul del logotipo */
  --blue-500:#2B6FE0;
  --blue-400:#5B9BF5;
  --gold:#F5B301;       /* sello "años de experiencia" */
  --gold-dark:#C98F00;

  /* Neutros */
  --ink:#0E1B2E;
  --body:#41536E;
  --muted:#6B7C96;
  --line:#DCE6F1;       /* mismo azul claro de las tablas de cotización */
  --soft:#F2F6FC;
  --soft-2:#E9F0FA;
  --white:#fff;

  --radius:16px;
  --radius-sm:10px;
  --radius-lg:26px;
  --shadow-sm:0 1px 2px rgba(11,42,91,.06), 0 4px 12px rgba(11,42,91,.06);
  --shadow:0 4px 10px rgba(11,42,91,.07), 0 18px 44px rgba(11,42,91,.10);
  --shadow-lg:0 10px 24px rgba(11,42,91,.12), 0 40px 80px rgba(11,42,91,.16);

  --wrap:1200px;
  --gap:clamp(18px, 3vw, 34px);

  --ff-display:'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --ff-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--body);
  font-family:var(--ff-body); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--blue-600); text-decoration:none}
[hidden]{display:none !important}

h1,h2,h3,h4,.display{
  font-family:var(--ff-display); color:var(--ink);
  font-weight:800; line-height:1.04; letter-spacing:-.005em; margin:0;
  text-transform:uppercase;
}
h1{font-size:clamp(2.5rem, 6.2vw, 4.6rem)}
h2{font-size:clamp(1.9rem, 4.2vw, 3.1rem)}
h3{font-size:clamp(1.25rem, 2.2vw, 1.6rem)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.section{padding-block:clamp(58px, 8vw, 104px)}
.section--soft{background:var(--soft)}
.section--navy{background:var(--navy-800); color:#C7D8F0}
.section--navy h2,.section--navy h3{color:#fff}

/* ---------- Encabezado de sección ---------- */
.eyebrow{
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; font-size:.86rem; color:var(--blue-600);
  display:flex; align-items:center; gap:.6rem; margin:0 0 .6rem;
}
.eyebrow::before{content:""; width:26px; height:3px; background:var(--gold); border-radius:2px; flex:none}
.section--navy .eyebrow{color:var(--gold)}
.sec-head{max-width:62ch; margin-bottom:clamp(30px,4vw,52px)}
.sec-head p{margin-top:.9rem; font-size:1.06rem}
.lead{font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--body)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:1.02rem; line-height:1;
  padding:.95rem 1.5rem; border-radius:999px; border:2px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  text-align:center;
}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--blue-600); color:#fff; box-shadow:0 8px 20px rgba(23,87,199,.3)}
.btn--primary:hover{background:var(--blue-500); box-shadow:0 12px 28px rgba(23,87,199,.38)}
.btn--gold{background:var(--gold); color:var(--navy-900); box-shadow:0 8px 20px rgba(245,179,1,.35)}
.btn--gold:hover{background:#ffc422}
.btn--ghost{border-color:rgba(255,255,255,.45); color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12); border-color:#fff}
.btn--outline{border-color:var(--line); color:var(--navy-800); background:#fff}
.btn--outline:hover{border-color:var(--blue-600); color:var(--blue-600)}
.btn--wa{background:#25D366; color:#0a2e18; box-shadow:0 8px 20px rgba(37,211,102,.32)}
.btn--wa:hover{background:#3ae07a}

/* ---------- Barra superior ---------- */
.topbar{
  background:var(--navy-900); color:#9FB8DC; font-size:.82rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar .wrap{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; align-items:center; padding-block:.5rem}
.topbar a{color:#CFE0F7; display:inline-flex; align-items:center; gap:.4rem}
.topbar a:hover{color:#fff}
.topbar svg{width:14px;height:14px;opacity:.8}
.topbar .spacer{margin-left:auto}

/* ---------- Navegación ---------- */
.nav{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); transition:box-shadow .2s}
.nav.is-stuck{box-shadow:0 6px 24px rgba(11,42,91,.10)}
.nav .wrap{display:flex; align-items:center; gap:1.3rem; min-height:124px}
.brand{display:flex; align-items:center; flex:none}
.brand img{height:86px; width:auto}
.nav-links{display:flex; align-items:center; gap:.15rem; margin-left:auto; list-style:none; padding:0; margin-block:0}
.nav-links a{
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:1.03rem; color:var(--navy-800); padding:.6rem .82rem; border-radius:9px;
  display:block; position:relative;
}
.nav-links a:hover{background:var(--soft); color:var(--blue-600)}
.nav-links a[aria-current="page"]{color:var(--blue-600)}
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:.82rem; right:.82rem; bottom:.28rem;
  height:3px; background:var(--gold); border-radius:2px;
}
.nav .btn{margin-left:.7rem; padding:.75rem 1.2rem; font-size:.95rem}
.nav-toggle{display:none; margin-left:auto; background:none; border:0; padding:.5rem; cursor:pointer; color:var(--navy-800)}
.nav-toggle svg{width:30px;height:30px}

@media (max-width:960px){
  .nav-toggle{display:block}
  .nav-links{
    position:fixed; inset:auto 0 0 0; top:0; height:100dvh; flex-direction:column;
    background:var(--navy-900); padding:6rem 1.6rem 2rem; gap:.2rem; align-items:stretch;
    transform:translateX(100%); transition:transform .3s cubic-bezier(.5,0,.2,1), visibility .3s; overflow-y:auto;
    visibility:hidden; pointer-events:none;
  }
  .nav-links.open{transform:none; visibility:visible; pointer-events:auto}
  .nav-links a{color:#E4EEFC; font-size:1.4rem; padding:.75rem .4rem; border-bottom:1px solid rgba(255,255,255,.09)}
  .nav-links a:hover{background:transparent; color:var(--gold)}
  .nav-links a[aria-current="page"]{color:var(--gold)}
  .nav-links a[aria-current="page"]::after{display:none}
  .nav .btn{display:none}
  .nav-toggle{position:relative; z-index:70}
  .nav-toggle.open{color:#fff; position:fixed; right:1.2rem; top:1.1rem}
}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--navy-900); color:#fff; overflow:hidden; isolation:isolate}
.hero__bg{position:absolute; inset:0; z-index:-2}
.hero__bg img{width:100%; height:100%; object-fit:cover; opacity:.42}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(6,24,52,.96) 0%, rgba(6,24,52,.72) 42%, rgba(6,24,52,.30) 100%),
    linear-gradient(180deg, rgba(6,24,52,.55) 0%, rgba(6,24,52,.20) 45%, rgba(6,24,52,.92) 100%);
}
.hero .wrap{position:relative; padding-block:clamp(72px, 11vw, 138px)}
.hero__inner{max-width:44rem}
.hero h1{color:#fff; text-shadow:0 3px 26px rgba(0,0,0,.35)}
.hero h1 em{font-style:normal; color:var(--gold)}
.hero .eyebrow{color:#fff}
.hero p{color:#D2E1F7; font-size:clamp(1.04rem,1.7vw,1.2rem); margin-top:1.15rem; max-width:40rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.hero__badge{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFD85E, var(--gold) 45%, var(--gold-dark));
  color:var(--navy-900); text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.4);
  border:5px solid rgba(255,255,255,.25);
}
.hero__badge b{font-family:var(--ff-display); font-size:3.6rem; line-height:.9; display:block}
.hero__badge span{font-family:var(--ff-display); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.82rem}
@media (max-width:1100px){.hero__badge{display:none}}

/* Hero corto para páginas internas */
.phero{position:relative; background:var(--navy-800); color:#fff; overflow:hidden; isolation:isolate}
.phero__bg{position:absolute; inset:0; z-index:-2}
.phero__bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.phero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(6,24,52,.94) 10%, rgba(11,42,91,.72) 60%, rgba(23,87,199,.45) 100%)}
.phero .wrap{padding-block:clamp(52px,7vw,88px)}
.phero h1{color:#fff; font-size:clamp(2.1rem,4.6vw,3.4rem)}
.phero p{color:#CBDDF5; margin-top:.8rem; max-width:52ch}
.crumbs{font-size:.85rem; color:#93B2DD; margin-bottom:.7rem}
.crumbs a{color:#BFD5F2}
.crumbs span{opacity:.6; margin-inline:.4rem}

/* ---------- Cifras ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm)}
.stats > div{background:#fff; padding:1.5rem 1.2rem; text-align:center}
.stats b{display:block; font-family:var(--ff-display); font-size:2.7rem; line-height:1; color:var(--blue-600)}
.stats small{display:block; margin-top:.4rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em;
  font-weight:600; color:var(--muted)}
.stats--float{margin-top:-34px; position:relative; z-index:6; background:var(--line)}

/* ---------- Rejillas / tarjetas ---------- */
.grid{display:grid; gap:var(--gap)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.grid--2{grid-template-columns:1fr}}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1020px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.grid--3{grid-template-columns:1fr}}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:#C3D6F0}
.card__media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--soft-2)}
.card__media img{width:100%;height:100%;object-fit:cover; transition:transform .5s ease}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:1.5rem 1.45rem 1.6rem; display:flex; flex-direction:column; flex:1}
.card__body h3{margin-bottom:.55rem}
.card__body p{font-size:.97rem}
.card__tag{
  position:absolute; left:.9rem; top:.9rem; background:rgba(6,24,52,.82); color:#fff;
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:.76rem; padding:.34rem .7rem; border-radius:999px; backdrop-filter:blur(6px);
}
.card__link{margin-top:auto; padding-top:1rem; font-family:var(--ff-display); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--blue-600); display:inline-flex; gap:.4rem; align-items:center}
.card:hover .card__link{gap:.7rem}
.card__link{transition:gap .2s}

/* Tarjeta de servicio con ícono */
.svc{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.6rem;
  box-shadow:var(--shadow-sm); transition:transform .22s, box-shadow .22s, border-color .22s; height:100%}
.svc:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:#C3D6F0}
.svc__icon{width:56px;height:56px;border-radius:14px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:linear-gradient(145deg, var(--blue-600), var(--navy-700)); color:#fff;
  box-shadow:0 8px 18px rgba(23,87,199,.28)}
.svc__icon svg{width:28px;height:28px}
.svc h3{margin-bottom:.55rem}
.svc ul{margin:.9rem 0 0; padding:0; list-style:none; font-size:.95rem}
.svc li{position:relative; padding-left:1.35rem; margin-bottom:.34rem}
.svc li::before{content:""; position:absolute; left:0; top:.62em; width:7px;height:7px;border-radius:50%;
  background:var(--gold)}
.svc__foot{margin-top:1.1rem; padding-top:.9rem; border-top:1px dashed var(--line);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; font-weight:600; color:var(--muted)}

/* ---------- Galería de proyectos ---------- */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem}
.chip{
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:.95rem; padding:.55rem 1.1rem; border-radius:999px; border:1.5px solid var(--line);
  background:#fff; color:var(--navy-800); cursor:pointer; transition:.18s;
}
.chip:hover{border-color:var(--blue-400); color:var(--blue-600)}
.chip[aria-pressed="true"]{background:var(--navy-800); border-color:var(--navy-800); color:#fff}

.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.shot{position:relative; border-radius:var(--radius-sm); overflow:hidden; background:var(--soft-2);
  aspect-ratio:4/3; cursor:zoom-in; border:0; padding:0; display:block; width:100%}
.shot.tall{grid-row:span 2; aspect-ratio:3/4}
.shot img{width:100%;height:100%;object-fit:cover; transition:transform .5s ease}
.shot:hover img{transform:scale(1.07)}
.shot figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.9rem .95rem .8rem; color:#fff;
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:1rem; line-height:1.15; text-align:left;
  background:linear-gradient(transparent, rgba(6,24,52,.88)); opacity:0; transform:translateY(8px);
  transition:.25s;
}
.shot:hover figcaption, .shot:focus-visible figcaption{opacity:1; transform:none}
.shot figcaption small{display:block; font-family:var(--ff-body); font-weight:500; text-transform:none;
  letter-spacing:0; font-size:.8rem; color:#B9D0EE; margin-top:.15rem}

/* Lightbox */
.lb{position:fixed; inset:0; z-index:120; background:rgba(4,14,30,.94); display:grid; place-items:center;
  padding:clamp(12px,4vw,50px); opacity:0; pointer-events:none; transition:opacity .22s}
.lb.open{opacity:1; pointer-events:auto}
.lb img{max-width:100%; max-height:78vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb figcaption{color:#DCE9FA; text-align:center; margin-top:1rem; font-size:.95rem}
.lb__close,.lb__nav{position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  color:#fff; width:48px;height:48px; border-radius:50%; cursor:pointer; display:grid; place-items:center}
.lb__close:hover,.lb__nav:hover{background:rgba(255,255,255,.22)}
.lb__close{top:18px; right:18px}
.lb__nav.prev{left:18px; top:50%; transform:translateY(-50%)}
.lb__nav.next{right:18px; top:50%; transform:translateY(-50%)}
.lb svg{width:22px;height:22px}

/* ---------- Promociones ---------- */
.promo{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:.22s}
.promo:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.promo__media{background:var(--navy-900); position:relative}
.promo__media img{width:100%; height:auto}
.promo__flag{position:absolute; right:0; top:1rem; background:var(--gold); color:var(--navy-900);
  font-family:var(--ff-display); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  font-size:.82rem; padding:.35rem .9rem; border-radius:6px 0 0 6px}
.promo__body{padding:1.5rem 1.45rem 1.6rem; display:flex; flex-direction:column; flex:1; gap:.55rem}
.promo__price{font-family:var(--ff-display); font-size:2.5rem; line-height:1; color:var(--navy-800)}
.promo__price small{font-size:.95rem; font-family:var(--ff-body); color:var(--muted); font-weight:500; display:block;
  text-transform:none; letter-spacing:0; margin-top:.3rem}
.promo ul{margin:.3rem 0 0; padding:0; list-style:none; font-size:.95rem}
.promo li{position:relative; padding-left:1.5rem; margin-bottom:.3rem}
.promo li::before{content:"✓"; position:absolute; left:0; color:var(--blue-600); font-weight:700}
.promo .btn{margin-top:auto; justify-content:center}
.promo__note{font-size:.78rem; color:var(--muted)}

/* ---------- Clientes / marcas ---------- */
.logos{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.logos div{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  min-height:78px; display:grid; place-items:center; padding:.9rem;
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--navy-800); text-align:center; font-size:1rem; line-height:1.1;
  transition:.2s;
}
.logos div:hover{border-color:var(--blue-400); color:var(--blue-600); transform:translateY(-3px)}
.section--navy .logos div{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:#DCE9FA}
.section--navy .logos div:hover{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.3)}

.tags{display:flex; flex-wrap:wrap; gap:.45rem}
.tags span{background:var(--soft); border:1px solid var(--line); color:var(--navy-700);
  padding:.4rem .85rem; border-radius:999px; font-size:.88rem; font-weight:500}
.section--navy .tags span{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#CFE0F7}

/* ---------- Bloque partido texto/imagen ---------- */
.split{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,5vw,66px); align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.split__media{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:relative}
.split__media img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.split__stack{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.split__stack img{border-radius:var(--radius-sm); aspect-ratio:1; object-fit:cover; width:100%; box-shadow:var(--shadow-sm)}
.split__stack img:first-child{grid-column:1/-1; aspect-ratio:16/9}

/* ---------- Pasos ---------- */
.steps{counter-reset:s; display:grid; gap:1.1rem}
.steps li{counter-increment:s; list-style:none; position:relative; padding-left:4.2rem; min-height:3rem}
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:-.15rem;
  font-family:var(--ff-display); font-weight:800; font-size:1.5rem; color:var(--blue-600);
  background:var(--soft); border:1px solid var(--line); width:3rem; height:3rem; border-radius:50%;
  display:grid; place-items:center;
}
.steps h3{font-size:1.15rem; margin-bottom:.2rem}
.section--navy .steps li::before{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:var(--gold)}

/* ---------- CTA ---------- */
.cta{
  background:linear-gradient(115deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--blue-600) 130%);
  color:#fff; border-radius:var(--radius-lg); padding:clamp(34px,5vw,64px); text-align:center;
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.cta::before{content:""; position:absolute; width:420px;height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,179,1,.22), transparent 65%); right:-120px; top:-160px}
.cta h2{color:#fff; position:relative}
.cta p{color:#CEDFF7; max-width:52ch; margin:1rem auto 0; position:relative}
.cta__btns{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2rem; position:relative}

/* ---------- Contacto ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.infobox{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem 1.6rem;
  box-shadow:var(--shadow-sm)}
.infobox + .infobox{margin-top:1rem}
.infoline{display:flex; gap:.95rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px dashed var(--line)}
.infoline:last-child{border-bottom:0; padding-bottom:0}
.infoline:first-of-type{padding-top:0}
.infoline i{flex:none; width:42px;height:42px;border-radius:11px; display:grid; place-items:center;
  background:var(--soft); color:var(--blue-600)}
.infoline svg{width:20px;height:20px}
.infoline b{display:block; font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.07em;
  font-size:.82rem; color:var(--muted); font-weight:700}
.infoline a,.infoline span{color:var(--ink); font-weight:500}
.infoline a:hover{color:var(--blue-600)}

form.form{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.7rem;
  box-shadow:var(--shadow-sm); display:grid; gap:1rem}
.field label{display:block; font-family:var(--ff-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; font-size:.82rem; color:var(--navy-800); margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%; padding:.8rem .95rem; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; color:var(--ink); background:#FBFDFF; transition:.18s;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue-500); background:#fff; box-shadow:0 0 0 4px rgba(43,111,224,.13)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:520px){.form__row{grid-template-columns:1fr}}
.form__note{font-size:.83rem; color:var(--muted)}
.form__ok{background:var(--soft); border:1px solid var(--line); border-left:4px solid #25D366;
  border-radius:var(--radius-sm); padding:1rem 1.1rem; font-size:.94rem; color:var(--ink)}

.map{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  aspect-ratio:16/9; background:var(--soft-2)}
.map iframe{width:100%;height:100%;border:0; display:block}

/* ---------- FAQ ---------- */
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:0;
  margin-bottom:.7rem; overflow:hidden}
.faq summary{cursor:pointer; list-style:none; padding:1.05rem 1.3rem; font-family:var(--ff-display);
  font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:1.08rem; color:var(--navy-800);
  display:flex; justify-content:space-between; gap:1rem; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.5rem; color:var(--blue-600); line-height:1; flex:none}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{background:var(--soft)}
.faq .faq__a{padding:1.05rem 1.3rem 1.3rem; font-size:.97rem; border-top:1px solid var(--line)}

/* ---------- Pie ---------- */
.footer{background:var(--navy-900); color:#9FB8DC; padding-block:clamp(48px,6vw,74px) 0; margin-top:0}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--gap)}
@media (max-width:860px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__top{grid-template-columns:1fr}}
.footer h4{font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.09em; font-size:1rem;
  color:#fff; margin:0 0 1rem}
.footer a{color:#B9D0EE}
.footer a:hover{color:#fff}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.45rem; font-size:.94rem}
.footer__logo{background:#fff; border-radius:12px; padding:.75rem .9rem; display:inline-block; margin-bottom:1.1rem}
.footer__logo img{height:44px; width:auto}
.footer__bottom{margin-top:clamp(34px,5vw,54px); border-top:1px solid rgba(255,255,255,.1);
  padding-block:1.3rem; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; font-size:.84rem; align-items:center}
.footer__bottom .spacer{margin-left:auto}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:90; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:grid; place-items:center; box-shadow:0 10px 28px rgba(37,211,102,.45);
  transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px;height:32px;color:#fff}

/* ---------- Animación de entrada ---------- */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
  *{scroll-behavior:auto !important}
  .card:hover,.svc:hover,.promo:hover,.btn:hover{transform:none}
}

/* ---------- Utilidades ---------- */
.center{text-align:center}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.narrow{max-width:64ch}
.narrow.center{margin-inline:auto}
.divider{height:5px; background:linear-gradient(90deg, var(--blue-600) 0 34%, var(--gold) 34% 67%, var(--navy-800) 67%)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--blue-500); outline-offset:3px; border-radius:4px}

/* ---------- Añadidos ---------- */
.svc-list{list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:.45rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.svc-list li{position:relative; padding-left:1.6rem; font-size:.98rem}
.svc-list li::before{content:""; position:absolute; left:0; top:.55em; width:9px;height:9px;
  border-radius:3px; background:var(--gold); transform:rotate(45deg)}
@media (max-width:620px){.hide-sm{display:none !important}}
.section--soft .card,.section--soft .svc,.section--soft .promo,.section--soft .infobox,.section--soft form.form{background:#fff}
.split__media--tall img{aspect-ratio:3/4}
.note-box{background:var(--soft); border-left:4px solid var(--gold); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:1.1rem 1.3rem; font-size:.95rem}
.promo__media{aspect-ratio:16/10; overflow:hidden}
.promo__media img{width:100%;height:100%;object-fit:cover}
.promo__price.is-texto{font-size:1.55rem; line-height:1.15}

.split__media img,.card__media img,.shot img,.promo__media img{height:auto}
.card__media img,.shot img{height:100%}
.promo__media img{height:100%}

/* ============================================================
   REFINAMIENTO — logotipo, muros de marcas y sello de 25 años
   ============================================================ */

/* ---------- Logotipo con más presencia ---------- */
@media (max-width:1100px){ .brand img{height:73px} .nav .wrap{min-height:108px} }
@media (max-width:560px){  .brand img{height:57px} .nav .wrap{min-height:88px} }
.nav-links a{font-size:1.06rem; padding:.62rem .78rem}
@media (max-width:1120px){ .nav-links a{font-size:1rem; padding:.6rem .6rem} .nav .btn{padding:.7rem 1rem} }
.footer__logo img{height:78px}

/* ---------- Muro de logotipos de clientes y marcas ---------- */
.logowall{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px; margin-top:1.3rem;
}
.logowall--sm{grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}
@media (max-width:1020px){
  .logowall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logowall--sm{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:620px){
  .logowall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logowall--sm{grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px}
}
.logotile{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:13px;
  aspect-ratio:2/1; overflow:hidden; position:relative;
  display:grid; place-items:center; padding:.85rem .95rem;
  box-shadow:0 1px 2px rgba(11,42,91,.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.logotile img{
  width:100%; height:100%; object-fit:contain;
  opacity:.93; transition:opacity .25s ease, transform .35s ease;
}
.logotile:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:#BCD2EE}
.logotile:hover img{opacity:1; transform:scale(1.04)}
.logotile figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.section--navy .logotile{border-color:rgba(255,255,255,.22); box-shadow:0 6px 18px rgba(0,0,0,.22)}
.section--navy .logotile:hover{border-color:rgba(255,255,255,.5)}
.logowall__more{
  margin-top:1.1rem; font-size:.93rem; color:var(--muted); line-height:1.7;
}
.section--navy .logowall__more{color:#9FB8DC}

/* ---------- Sello de años de experiencia ---------- */
.sello{display:block; width:100%; height:auto; filter:drop-shadow(0 16px 34px rgba(0,0,0,.45))}
.hero__badge{
  position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  width:clamp(150px, 15vw, 216px); height:auto; background:none; border:0;
  box-shadow:none; border-radius:0; display:block; padding:0;
}
@media (max-width:1100px){ .hero__badge{display:none} }
.sello-inline{width:clamp(128px,14vw,178px); flex:none}
.sello-row{display:flex; gap:1.6rem; align-items:center; flex-wrap:wrap}
.sello-row .sello{filter:drop-shadow(0 10px 24px rgba(11,42,91,.25))}

/* ---------- Acento superior en tarjetas de servicio ---------- */
.svc{position:relative; overflow:hidden}
.svc::before{
  content:""; position:absolute; inset:0 auto auto 0; height:4px; width:100%;
  background:linear-gradient(90deg, var(--blue-600), var(--gold));
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.svc:hover::before{transform:scaleX(1)}

/* ---------- Curva de marca al pie del hero (motivo de la papelería) ---------- */
.hero__curve{position:absolute; left:0; right:0; bottom:-1px; width:100%;
  height:clamp(56px,7vw,112px); display:block; z-index:2; pointer-events:none}
.hero .wrap{z-index:3}
.stats--float{z-index:6}
.hero__badge{z-index:4}

/* ---------- Ritmo y detalles ---------- */
.sec-head--center{margin-inline:auto; text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.stats b{font-size:3rem}
.stats > div{padding:1.75rem 1.2rem}
.hero .wrap{padding-block:clamp(84px, 12vw, 150px)}
.cta{background:
  radial-gradient(120% 140% at 85% -20%, rgba(245,179,1,.28), transparent 55%),
  linear-gradient(115deg, var(--navy-900) 0%, var(--navy-700) 58%, var(--blue-600) 135%)}