:root{
  --bg:#ffffff;
  --surface:#f6f8fb;
  --surface-2:#eef2f7;

  --text:#0b1220;
  --muted:#4b5565;

  --primary:#0a4ea3;
  --primary-2:#0b66d6;
  --primary-soft:rgba(10,78,163,.10);

  --success:#0f766e;

  --border:rgba(15,23,42,.10);
  --shadow:0 10px 30px rgba(2,6,23,.08);

  --r-lg:22px;
  --r-md:16px;

  --container:1200px;
}

/* Reset */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

.safe{
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

/* Typography */
h1,h2,h3{line-height:1.15; letter-spacing:-0.02em; margin:0}
p{margin:0 0 16px; color:#a5acb4}

/* Sections */
.section{padding:86px 0}
.section.alt{background:var(--surface)}
.section.alt2{background:var(--surface-2)}
@media (max-width: 980px){ .section{padding:72px 0} }

.section-title{display:flex; flex-direction:column; gap:10px; margin-bottom:36px}
.section-title h2{font-size: clamp(1.6rem, 2.6vw, 2.3rem)}
.section-title p{max-width:760px; margin:0}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:999px;
  text-decoration:none; font-weight:600;
  border:1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:active{transform: translateY(1px)}
.btn-primary{background:var(--primary); color:#fff; box-shadow: 0 18px 45px rgba(10,78,163,.35)}
.btn-primary:hover{background:var(--primary-2)}
/* Solo dentro del hero: secundario tipo "glass" */
.hero .btn-secondary{
  color:#fff;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.hero .btn-secondary:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
}
.btn-sm{padding:10px 14px; font-size:14px}

/* Grid + Cards */
.grid{display:grid; gap:24px}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 980px){ .grid-3{grid-template-columns: 1fr} }

.card{
  background:#fff; border:1px solid var(--border);
  border-radius: var(--r-lg);
  padding:24px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(10,78,163,.22)}
.card h3{font-size: 1.15rem; margin-bottom:10px}
.card p{margin:0; color:var(--muted)}
.card .meta{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap}

.pill{
  font-size:13px; padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(11,102,214,.06);
  color: var(--text);
}

/* Navbar */
.nav{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
}

.nav-inner{
  height: 70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--text);
  min-width: 220px;
}
.brand-mark{
  width:46px;
  height:46px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0a4ea3, #0b66d6);
  color:#fff;
  border:none;
  box-shadow: 0 10px 24px rgba(10,78,163,.35);
}

.brand-name{
  font-weight:800;
  letter-spacing:-0.01em;
}

.brand-sub{display:block; font-size:12px; color:var(--muted); margin-top:2px}

.nav-links{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav-links a{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
}
.nav-links a:hover{color: var(--primary)}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid var(--border);
  background:#fff;
}
.nav-toggle span{
  display:block;
  height:2px;
  width:18px;
  margin:4px auto;
  background: var(--text);
  border-radius: 2px;
}

/* Mobile menu */
.nav-mobile{
  display:none;
  padding: 14px 0 18px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.92);
}
.nav-mobile a{
  display:block;
  padding: 12px 0;
  text-decoration:none;
  color:var(--text);
  font-weight:600;
}
.nav-mobile .btn{width:100%; margin-top:10px}

@media (max-width: 980px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .brand-sub{display:none}
}

/* Footer */
.footer{
  background:#0b1220;
  color:#fff;
  padding: 56px 0 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 24px;
  align-items:start;
}
.footer-brand{font-weight:800; font-size:16px; margin-bottom:8px}
.footer-text{color:rgba(255,255,255,.78); margin:0; max-width: 520px}
.footer-title{font-weight:800; font-size:14px; margin-bottom:10px}
.footer-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.footer-list a{color:rgba(255,255,255,.78); text-decoration:none}
.footer-list a:hover{color:#fff}
.footer-bottom{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  gap:12px;
  color: rgba(255,255,255,.70);
  font-size: 13px;
}
.footer-note{white-space:nowrap}

@media (max-width: 980px){
  .footer-grid{grid-template-columns: 1fr}
  .footer-bottom{flex-direction:column}
}

/* Reveal */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1; transform: translateY(0)}
.navbar{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.hero .btn-primary{
  font-size:15px;
  padding:16px 26px;
  box-shadow:
    0 18px 45px rgba(10,78,163,.45),
    inset 0 1px 0 rgba(255,255,255,.25);
}
/* =========================
   FLOATING CONTACT BUTTONS
========================= */
.floating-contact{
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 999;
}

.float-btn{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.float-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

/* WhatsApp */
.float-btn.whatsapp{
  background: #25d366;
}

.float-btn.whatsapp svg{
  width: 26px;
  height: 26px;
}

/* Mail */
.float-btn.mail{
  background: #0b3cff; /* azul corporativo */
  font-size: 20px;
}

/* Mobile tweak */
@media (max-width: 480px){
  .floating-contact{
    right: 14px;
    bottom: 14px;
  }
  .float-btn{
    width: 48px;
    height: 48px;
  }
}
/* fin .float-btn.whatsapp */
/* =========================
   NAV DRAWER (tipo premium)
========================= */

.nav-open { overflow: hidden; }

/* contenedor overlay */
.nav-drawer{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
}

.nav-drawer.is-open{ display:block; }

/* fondo oscuro + blur */
.nav-drawer__backdrop{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .22s ease;
}

.nav-drawer.is-open .nav-drawer__backdrop{ opacity: 1; }

/* panel deslizable */
.nav-drawer__panel{
  position:absolute;
  top: 10px;
  right: 10px;
  height: calc(100% - 20px);
  width: min(420px, calc(100% - 20px));
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.30);
  backdrop-filter: blur(12px);

  transform: translateX(18px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  overflow: hidden;
}

.nav-drawer.is-open .nav-drawer__panel{
  transform: translateX(0);
  opacity: 1;
}

/* header */
.nav-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.nav-drawer__title{
  font-weight: 800;
  letter-spacing: -0.01em;
}

.nav-drawer__close{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
  cursor: pointer;
}

/* links */
.nav-drawer__links{
  display:flex;
  flex-direction:column;
  padding: 14px 16px 16px;
  gap: 6px;
}

.nav-drawer__links a{
  text-decoration:none;
  color: var(--text);
  font-weight: 700;
  padding: 12px 12px;
  border-radius: 14px;
}

.nav-drawer__links a:hover{
  background: rgba(11,102,214,.08);
}

.nav-drawer__cta{
  margin-top: 10px;
}

.nav-drawer__cta .btn{
  width: 100%;
}

/* en móvil se ve más “app-like” */
@media (max-width: 520px){
  .nav-drawer__panel{
    top: 8px;
    right: 8px;
    height: calc(100% - 16px);
    width: calc(100% - 16px);
    border-radius: 22px;
  }
}
body.nav-open { overflow: hidden; }
/* =========================
   NAV DRAWER - ajuste PRO
   (override seguro)
========================= */

/* que el body se bloquee bien */
body.nav-open { overflow: hidden; }

/* overlay un toque más oscuro */
.nav-drawer__backdrop{
  background: rgba(2,6,23,.62);
}

/* Panel: no 100% ancho, queda "app-like" */
.nav-drawer__panel{
  top: 10px;
  right: 10px;
  height: calc(100% - 20px);

  /* 👇 clave: ancho tipo drawer */
  width: min(420px, 86vw);

  /* animación más natural */
  transform: translateX(24px);
  transition: transform .26s ease, opacity .26s ease;
}

/* cuando abre */
.nav-drawer.is-open .nav-drawer__panel{
  transform: translateX(0);
  opacity: 1;
}

/* Links más cómodos en mobile */
.nav-drawer__links{
  padding: 14px 16px 16px;
  gap: 10px;
}

.nav-drawer__links a{
  padding: 14px 14px;
  font-size: 16px;
  border-radius: 16px;
}

/* CTA abajo, siempre visible */
.nav-drawer__panel{
  display: flex;
  flex-direction: column;
}

.nav-drawer__links{
  flex: 1;
  overflow: auto;
}

.nav-drawer__cta{
  margin-top: auto;
  padding-top: 10px;
}

/* En pantallas muy chicas, sí puede ocupar casi todo */
@media (max-width: 520px){
  .nav-drawer__panel{
    width: calc(100% - 16px);
    right: 8px;
    top: 8px;
    height: calc(100% - 16px);
  }
}
/* ===== NAV DRAWER - refinado spacing + safe area ===== */

/* Panel un toque más angosto en móviles medianos */
.nav-drawer__panel{
  width: min(420px, 82vw);
}

/* Menos aire entre links */
.nav-drawer__links{
  gap: 6px;                 /* antes 10px */
  padding: 12px 14px 14px;  /* un poco más compacto */
}

/* Links más “premium” y parejos */
.nav-drawer__links a{
  padding: 12px 12px;
  font-size: 16px;
  line-height: 1.2;
}

/* CTA abajo con padding real + safe area iPhone */
.nav-drawer__cta{
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  margin-top: 8px;
  border-top: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
}

/* Botón que no quede gigante y con mejor altura */
.nav-drawer__cta .btn{
  height: 52px;
  border-radius: 16px;
  font-size: 15px;
}
.nav-drawer__links a:active{
  transform: scale(.99);
  background: rgba(11,102,214,.10);
}
/* =========================
   CONTACTO (según tu contacto.ejs)
========================= */

/* texto general menos lavado (tu p global está demasiado claro) */
.section-title p{ color: var(--muted); }

/* en Contacto, el grid está con style inline -> no podemos “pisar” columnas desde CSS,
   así que lo resolvemos con una clase extra en el EJS (ver paso 2) */

/* inputs/textarea: hoy no tienen estilos porque .field no existe */
label.field{
  display:block;
  margin-bottom: 14px;
}
label.field > span{
  display:block;
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 6px;
  color: var(--text);
}
label.field input,
label.field textarea{
  width:100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
label.field textarea{ resize: vertical; min-height: 140px; }
label.field input:focus,
label.field textarea:focus{
  outline:none;
  border-color: rgba(11,102,214,.60);
  box-shadow: 0 0 0 4px rgba(11,102,214,.14);
}

/* botones del form */
.contact-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}
.contact-actions .btn{
  height: 52px;
  border-radius: 16px;
}

/* en mobile: botones full width */
@media (max-width: 520px){
  .contact-actions .btn{ width: 100%; }
}
/* layout contacto: 2 columnas desktop / 1 columna mobile */
.contact-grid{
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
}
@media (max-width: 980px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
}
/* tarjeta Datos un poco distinta */
.contact-grid aside.card{
  background: var(--surface);
}
.contact-grid aside.card p{
  color: var(--text);
}
/* =========================
   CONTACTO - Premium polish (solo CSS)
========================= */

/* Tarjetas del contacto un poco más pro */
.contact-grid .card{
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
}

/* La columna de datos diferenciada */
.contact-grid aside.card{
  background: var(--surface);
  border-color: rgba(15,23,42,.08);
}

/* Títulos dentro de contacto */
.contact-grid h2{
  font-size: 1.05rem;
  margin-bottom: 12px;
}

/* Inputs más premium (sin cambiar estructura) */
.contact-grid input,
.contact-grid textarea{
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

.contact-grid input:focus,
.contact-grid textarea:focus{
  outline: none;
  border-color: rgba(11,102,214,.60);
  box-shadow: 0 0 0 4px rgba(11,102,214,.14);
}

.contact-grid input:hover,
.contact-grid textarea:hover{
  border-color: rgba(11,102,214,.25);
}

/* Botón “Enviar” más pro */
.contact-grid .btn{
  height: 54px;
  border-radius: 18px;
}
/* =========================
   CONTACTO - Datos (premium)
========================= */

/* Lista de datos: separadores y aire */
.contact-grid aside.card p{
  margin: 0;
  padding: 12px 0;
  color: var(--text);
  border-top: 1px solid rgba(15,23,42,.08);
}

/* Quitar borde del primero */
.contact-grid aside.card p:first-of-type{
  border-top: 0;
  padding-top: 0;
}

/* Links más pro */
.contact-grid aside.card a{
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}
.contact-grid aside.card a:hover{
  text-decoration: underline;
}

/* Si tenés "Horario" o textos largos, que respiren */
.contact-grid aside.card strong{
  display: inline-block;
  margin-right: 6px;
}
/* Contacto: h3 sin inline */
.contact-grid form.card h3{ margin: 0 0 14px; }

/* Nota del formulario */
.contact-note{
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}

/* Botonera sin inline */
.contact-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}
@media (max-width: 520px){
  .contact-actions .btn{ width:100%; }
}

/* Alerts + loading */
.form-alert{
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(11,102,214,.06);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 0 0 14px;
  color: var(--text);
  font-weight: 700;
}
.form-alert.is-success{
  background: rgba(15,118,110,.10);
  border-color: rgba(15,118,110,.25);
}
.form-alert.is-error{
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.22);
}

.btn[disabled]{ opacity:.72; cursor:not-allowed; transform:none !important; }

.btn .btn-spinner{
  width: 16px; height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.55);
  border-top-color: rgba(255,255,255,1);
  display:none;
  animation: spin .9s linear infinite;
}
.btn.is-loading .btn-spinner{ display:inline-block; }
@keyframes spin{ to{ transform: rotate(360deg); } }
/* =========================
   ABOUT / QUIÉNES SOMOS – Premium
========================= */

/* sección con fondo sutil y mejor aire */
.about-hero,
.section.about{
  position: relative;
}

/* si tu about está dentro de .section (como se ve), lo mejoramos */
.section{
  position: relative;
}

.section::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(900px 300px at 18% 0%, rgba(11,102,214,.10), transparent 60%),
    radial-gradient(700px 260px at 85% 10%, rgba(10,78,163,.08), transparent 55%);
  pointer-events:none;
  z-index:0;
}
.section > .container{ position: relative; z-index: 1; }

/* título más “marca” */
.section-title h2{
  font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: -0.03em;
}

/* párrafo con ancho de lectura + mejor color */
.section-title p{
  color: var(--muted);
  max-width: 820px;
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Cards más premium */
.card{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 60px rgba(2,6,23,.06);
  padding: 26px;
}

/* hover más fino */
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 80px rgba(2,6,23,.10);
  border-color: rgba(11,102,214,.22);
}

/* título dentro de card más fuerte */
.card h3{
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

/* micro detalle superior (línea/gradiente) */
.card{
  position: relative;
  overflow: hidden;
}
.card::before{
  content:"";
  position:absolute;
  left: 22px;
  top: 18px;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), rgba(11,102,214,.35));
  opacity: .9;
}

/* spacing del grid para que respire mejor */
.grid{ gap: 22px; }
.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 18px 0 26px;
}
.trust-pill{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
/* =========================
   ABOUT – Premium split + trust
========================= */

main.section.about{
  position: relative;
}

/* split layout */
.about-hero{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 26px;
}

/* trust row */
.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}
.trust-pill{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}

/* image */
.about-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 26px 80px rgba(2,6,23,.12);
}

/* subtle brand glow */
.about-media{
  position: relative;
}
.about-media::before{
  content:"";
  position:absolute;
  top: -12px;
  right: -12px;
  width: 150px;
  height: 150px;
  border-radius: 28px;
  background: radial-gradient(circle at 30% 30%, rgba(11,102,214,.22), transparent 60%);
  pointer-events:none;
}

/* icons in cards */
.card h3{
  display:flex;
  align-items:center;
  gap:10px;
}
.card-ico{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(11,102,214,.08);
  border: 1px solid rgba(11,102,214,.14);
  font-size: 18px;
}

/* mobile */
@media (max-width: 980px){
  .about-hero{ grid-template-columns: 1fr; }
}
/* =========================
   ABOUT – Divider premium
========================= */

.about .about-divider{
  height: 1px;
  width: 100%;
  margin: 30px 0 34px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(11,102,214,.35),
    transparent
  );
}
/* =========================
   ABOUT – Cards corporativas
========================= */

.about .card{
  position: relative;
  overflow: hidden;
}

/* borde superior de marca */
.about .card::after{
  content:"";
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--primary),
    rgba(11,102,214,.35)
  );
  opacity: .9;
}

/* micro animación elegante */
.about .card{
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.about .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 90px rgba(2,6,23,.14);
  border-color: rgba(11,102,214,.28);
}
.about .section-title h2{
  font-weight: 900;
}

.about .section-title p{
  font-size: 1.08rem;
}
/* =========================
   HERO – micro trust premium
========================= */

.hero-actions{
  margin-top: 18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.hero-trust{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hero-trust__item{
  font-weight: 800;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  padding: 10px 12px;
  border-radius: 999px;
}

/* En mobile: más compactito */
@media (max-width: 520px){
  .hero-trust__item{
    font-size: 12px;
    padding: 9px 11px;
  }
}
/* =========================
   H2 – Qué hacemos (premium)
========================= */

.card h3{
  display:flex;
  align-items:center;
  gap:10px;
}

.card-ico{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(11,102,214,.08);
  border: 1px solid rgba(11,102,214,.14);
  font-size: 18px;
}

/* Cómo trabajamos */
.how{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.how-item{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 14px 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  backdrop-filter: blur(10px);
}

.how-step{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  box-shadow: 0 12px 30px rgba(10,78,163,.28);
}

.how-body strong{
  display:block;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.how-body span{
  display:block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 980px){
  .how{ grid-template-columns: 1fr; }
}
/* =========================
   H3 – Brand block (premium)
========================= */

.brand-block{
  position: relative;
  overflow: hidden;
}

.brand-media img{
  width: 100%;
  height: auto;
  display:block;
}

/* overlay más pro (sin oscurecer de más) */
.brand-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
}

.brand-content{
  max-width: 760px;
  background: rgba(11,18,32,.55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 22px 22px;
  box-shadow: 0 26px 80px rgba(0,0,0,.25);
}

.brand-content h2{
  color:#fff;
  margin:0 0 10px;
}

.brand-content p{
  color: rgba(255,255,255,.88);
  margin: 0 0 14px;
  line-height: 1.6;
}

/* garantías */
.brand-points{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}

.brand-point{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 12px 12px;
}

.brand-point strong{
  display:block;
  color:#fff;
  font-weight: 900;
  font-size: 13px;
}

.brand-point span{
  display:block;
  margin-top: 5px;
  color: rgba(255,255,255,.80);
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 980px){
  .brand-overlay{ position: static; }
  .brand-content{
    margin: 18px auto 0;
    background: rgba(11,18,32,.70);
  }
  .brand-points{ grid-template-columns: 1fr; }
}
/* =========================
   FIX MOBILE – HERO (H1)
========================= */
@media (max-width: 520px){
  .hero .container{
    position: relative;
    z-index: 2; /* por si el video/overlay se mete */
  }

  .hero-content{
    padding-top: 14px;
  }

  .hero-title{
    line-height: 1.08;
  }

  /* Trust pills: que no "invadan" todo */
  .hero-trust{
    margin-top: 12px;
    gap: 8px;
  }

  .hero-trust__item{
    font-size: 12px;
    padding: 9px 10px;
  }

  /* Botones uno abajo del otro (más cómodo y evita encime) */
  .hero-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn{
    width: 100%;
  }
}
/* =========================
   FIX MOBILE – BRAND BLOCK (H3)
========================= */
@media (max-width: 980px){
  /* el bloque deja de ser overlay */
  .brand-block{
    overflow: visible;
  }

  .brand-overlay{
    position: static !important;
    inset: auto !important;
    display: block;
    background: #0b1220; /* fondo sólido para leer perfecto */
  }

  .brand-content{
    margin: 0 auto;
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    padding: 18px 0 22px; /* usa container */
    background: transparent;
    backdrop-filter: none;
  }

  /* que el contenido respire dentro del container */
  .brand-overlay .container{
    padding-top: 18px;
    padding-bottom: 22px;
  }

  /* puntos: a 1 columna */
  .brand-points{
    grid-template-columns: 1fr !important;
  }
}
/* =========================
   H4 – Confianza (premium)
========================= */

.trust{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.trust-item{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  padding: 16px 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.trust-item strong{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Puntito de marca a la izquierda del título */
.trust-item strong::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 10px 24px rgba(10,78,163,.35);
}

/* descripción */
.trust-item span{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* Mobile 1 columna */
@media (max-width: 980px){
  .trust{ grid-template-columns: 1fr; }
}
/* =========================
   H5 – Servicios (premium)
========================= */

.carousel-wrapper{
  position: relative;
  margin-top: 18px;
}

/* Botones del carrusel más pro */
.carousel-btn{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(2,6,23,.08);
  display:grid;
  place-items:center;
  font-size: 22px;
}
.carousel-btn:hover{
  border-color: rgba(11,102,214,.25);
}

/* Cards */
.service-card{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 60px rgba(2,6,23,.08);
  position: relative;
}

.service-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .5s ease;
}
.service-card:hover img{
  transform: scale(1.06);
}

/* Overlay legible */
.service-overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding: 16px 16px 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(2,6,23,.72) 48%, rgba(2,6,23,.90) 100%);
  color: #fff;
}

/* Tag */
.service-tag{
  display:inline-block;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  margin-bottom: 10px;
}

.service-overlay h3{
  margin: 0 0 6px;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.service-overlay p{
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 14px;
  line-height: 1.45;
}

/* Mobile: aire */
@media (max-width: 520px){
  .service-overlay{
    padding: 14px 14px 14px;
  }
  .service-overlay p{
    font-size: 13.5px;
  }
}
/* =========================
   H6 – CTA final (premium)
========================= */

.cta{
  border-radius: 26px;
  border: 1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(11,102,214,.14), transparent 60%),
    radial-gradient(700px 240px at 85% 10%, rgba(10,78,163,.10), transparent 55%),
    rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  box-shadow: 0 26px 90px rgba(2,6,23,.10);
  padding: 26px;
}

.cta h2{
  letter-spacing: -0.03em;
}

.cta p{
  max-width: 760px;
  color: var(--muted);
  line-height: 1.6;
}

/* Botones más cómodos */
.cta-actions{
  margin-top: 16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

@media (max-width: 520px){
  .cta-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .cta-actions .btn{ width:100%; }
}
/* =========================
   CLIENTES – Premium
========================= */

.clients{
  margin-top: 18px;
}

.clients p{
  max-width: 760px;
  color: var(--muted);
}

/* logos más sobrios */
.client-logos img{
  opacity: .85;
  filter: grayscale(100%);
  transition: opacity .25s ease, filter .25s ease;
}

.client-logos img:hover{
  opacity: 1;
  filter: grayscale(0%);
}
/* =========================
   VIDEO – Evidencia operativa
========================= */

.video-proof{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.video-proof__item{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}

@media (max-width: 520px){
  .video-proof{
    justify-content: flex-start;
  }
}
/* =========================
   CTA FINAL – WhatsApp visible
========================= */

.cta-actions a[href*="wa.me"],
.cta-actions a[href*="whatsapp"]{
  color: #e6f0ff;                 /* texto claro */
  font-weight: 700;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  transition: all .25s ease;
}

.cta-actions a[href*="wa.me"]:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.45);
  transform: translateY(-1px);
}
/* =========================
   HERO – ocultar trust en mobile
========================= */
@media (max-width: 520px){
  .hero-trust{
    display: none;
  }
}
/* =========================
   HERO – altura perfecta en mobile
========================= */
@media (max-width: 520px){

  .hero{
    min-height: 100svh;          /* viewport real mobile */
    display: flex;
    align-items: center;
  }

  .hero .container{
    padding-top: 88px;           /* espacio para navbar */
    padding-bottom: 24px;
    width: 100%;
  }

  .hero-content{
    max-width: 100%;
  }

  .hero-title{
    font-size: clamp(1.9rem, 7vw, 2.2rem);
    line-height: 1.05;
    margin-bottom: 10px;
  }

  .hero-lead{
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 14px;
  }

  /* botones full width y cómodos */
  .hero-actions{
    flex-direction: column;
    gap: 10px;
  }

  .hero-actions .btn{
    width: 100%;
    height: 52px;
  }

  /* pills del rotator más compactas */
  .hero-rotator{
    margin-top: 12px;
  }
}
/* =========================
   HERO – ajuste fino overlay (sin oscurecer video)
========================= */

/* contenedor del texto */
.hero-content{
  background: linear-gradient(
    180deg,
    rgba(2,6,23,.35) 0%,
    rgba(2,6,23,.25) 60%,
    rgba(2,6,23,.15) 100%
  );
  backdrop-filter: blur(6px);
  border-radius: 24px;
  padding: 22px 22px;
  box-shadow: 0 30px 90px rgba(2,6,23,.35);
}

/* textos más nítidos */
.hero-title,
.hero-lead,
.hero-rotator,
.kicker{
  text-shadow: 0 6px 24px rgba(0,0,0,.55);
}

/* kicker más fino */
.kicker{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 8px 12px;
  display: inline-flex;
  gap: 8px;
}
@media (max-width: 520px){
  .hero-content{
    background: rgba(2,6,23,.25);
    backdrop-filter: blur(4px);
    padding: 18px 16px;
    box-shadow: none;
  }
}
/* HERO video – layout estable (evita saltos) */
.hero-video-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
}

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

/* Si el video tarda, el poster ocupa el lugar y no hay CLS */
.hero{
  position: relative;
  min-height: 100svh;
}
/* ======================================================
   SAFARI iOS – FIXES GLOBALES (mobile <= 520px)
   Objetivo: layout estable, video ok, blur con fallback
====================================================== */

/* 1) Viewport height estable (barra Safari) */
.hero{ min-height: 100vh; }
@supports (height: 100svh){
  .hero{ min-height: 100svh; }
}
@supports (height: 100dvh){
  .hero{ min-height: 100dvh; }
}

/* 2) Video background seguro en iOS */
.hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0); /* fuerza GPU */
}

/* 3) Blur con fallback */
.hero-content{
  background: rgba(2,6,23,.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .hero-content{
    background: rgba(2,6,23,.45);
  }
}

/* 4) Landscape mobile (iPhone horizontal) */
@media (max-width: 520px) and (orientation: landscape){
  .hero{
    min-height: auto;
    padding-top: 60px;
    padding-bottom: 16px;
  }

  .hero-title{
    font-size: 1.7rem;
    line-height: 1.05;
  }

  .hero-lead{
    font-size: .92rem;
  }

  .hero-actions{
    gap: 8px;
  }

  .hero-actions .btn{
    height: 46px;
  }

  /* evitamos bloques largos */
  .hero-rotator{
    display: none;
  }
}

/* 5) Textos y media a prueba de iOS */
*{
  word-wrap: break-word;
}

.hero-title,
.hero-lead,
.card p{
  overflow-wrap: anywhere;
}

img,
video{
  max-width: 100%;
  height: auto;
}
/* =========================
   Footer – Créditos desarrollador
========================= */

.dev-credits{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.10);
  display:flex;
  justify-content:center;
}

.dev-credits__link{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dev-credits__link:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(2,6,23,.10);
  border-color: rgba(11,102,214,.22);
}

.dev-credits__logo{
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 8px;
}

.dev-credits__text{
  display:flex;
  flex-direction:column;
  line-height: 1.1;
}

.dev-credits__label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.dev-credits__brand{
  font-size: 13px;
  color: var(--muted);
  font-weight: 900;
  letter-spacing: -0.01em;
}
/* =========================
   Dev credits – más sutil
========================= */

.dev-credits__label{
  font-size: 11px;
  opacity: .85;
}

.dev-credits__brand{
  font-size: 12px;     /* más chico */
  font-weight: 800;    /* menos “grito” */
  opacity: .90;
}

.dev-credits__logo{
  width: 22px;
  height: 22px;
  opacity: .85;
}

.dev-credits__link{
  padding: 8px 10px;          /* más compacto */
  background: rgba(255,255,255,.45);
}
.dev-credits__link:hover{
  transform: translateY(-0.5px);
}
/* =========================
   Footer – pulido premium
========================= */

/* aire general */
.footer{
  padding-top: 56px;
  padding-bottom: 28px;
}

/* títulos más prolijos */
.footer h3{
  letter-spacing: -0.02em;
}

/* listas: mejor ritmo */
.footer-links{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.footer-links a{
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-weight: 700;
  transition: color .2s ease, transform .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* hover premium: leve desplazamiento + color */
.footer-links a:hover{
  color: #ffffff;
  transform: translateX(2px);
}

/* si tenés enlaces dentro del texto del footer */
.footer p a{
  color: rgba(255,255,255,.88);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.25);
  transition: border-color .2s ease, color .2s ease;
}
.footer p a:hover{
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,.55);
}

/* redes más “botón” */
.footer-social a{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  display: grid;
  place-items: center;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.footer-social a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.30);
}

/* footer bottom más fino */
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: 22px;
  padding-top: 16px;
  color: rgba(255,255,255,.75);
}
.brand {
  display: flex;
  align-items: center;
}

.brand-logo {
  display: block;
}

.brand-logo.mobile {
  display: none;
}

@media (max-width: 768px) {
  .brand-logo.desktop {
    display: none;
  }
  .brand-logo.mobile {
    display: block;
  }
}
@media (max-width: 768px) {
  .brand-logo.mobile {
    height: 40px; /* podés probar 42px si querés */
  }
}