:root{
  /* Paleta corporativa */
  --color-primary:#0D1521;       /* header, footer, títulos, botones base */
  --color-accent:#8F0000;        /* CTA / links */
  --color-bg:#FFFFFF;            /* fondo */
  --color-text:#0D1521;          /* texto */
  --color-muted:#C7C7C7;         /* bordes / texto tenue */
  /* Contrastes usados por botones */
  --color-primary-contrast:#FFFFFF;
  --color-accent-contrast:#FFFFFF;

  /* UI */
  --radius:16px;
  --shadow:0 10px 24px rgba(0,0,0,.08);
  --font-body: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--color-accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1120px,92%);margin:auto}
.row{display:flex;gap:1rem}
.between{justify-content:space-between}
.center{align-items:center}
.muted{color:#5E6B7A}

/* Titulares y secciones */
h1{font-size:clamp(32px,3.2vw,46px);margin:.2rem 0 1rem}
h2{font-size:clamp(24px,2.2vw,32px);margin:0 0 .75rem}
h3{font-size:clamp(18px,1.4vw,20px);margin:.2rem 0 .25rem}
.section{padding:3.5rem 0}

/* Header y navbar */
.site-header{background:var(--color-primary);color:#fff;box-shadow:var(--shadow);position:sticky;top:0;z-index:50}
.site-header a{color:#fff}
.main-nav .menu{list-style:none;display:flex;gap:1rem;margin:0;padding:0;align-items:center}
.main-nav #nav-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none} /* oculta el cuadradito */
.hamburger{display:none}

@media (max-width:820px){
  .hamburger{display:block;cursor:pointer;padding:.75rem 1rem;font-size:1.5rem}
  .main-nav .menu{
    position:absolute;right:0;top:64px;background:#fff;color:#0D1521;
    border:1px solid #e5e7eb;border-radius:12px;flex-direction:column;
    gap:.25rem;padding:.5rem;display:none;min-width:220px;box-shadow:var(--shadow)
  }
  .main-nav .menu a{color:#0D1521}
  #nav-toggle:checked ~ .menu{display:flex}
} /* <-- ESTA llave cierra el @media */

/* Hero (si lo usás) */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;padding:5rem 0}
.hero h1{font-size:clamp(32px,3.2vw,48px);margin:.25rem 0}
.hero p{color:var(--color-muted);font-size:1.1rem}
.hero .cta{display:flex;gap:1rem;margin-top:1.25rem}

/* Botones */
.btn{display:inline-block;background:var(--color-primary);color:var(--color-primary-contrast);border:0;padding:.8rem 1.1rem;border-radius:12px;box-shadow:var(--shadow);cursor:pointer}
.btn.alt{background:var(--color-accent);color:var(--color-accent-contrast)}
.btn.ghost{background:transparent;color:var(--color-primary);border:1px solid var(--color-primary)}
.btn-acceso{display:inline-block;background:var(--color-accent);color:#fff;padding:.55rem .9rem;border-radius:12px}
.main-nav .menu li:last-child{margin-left:auto} /* empuja el botón a la derecha */

/* Tarjetas y grillas */
.grid{display:grid;gap:1.2rem}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid.two,.grid.three,.grid.four{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid #E5E7EB;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem}
.card img{border-radius:12px}

/* Badge (opcional) */
.badge{display:inline-block;background:color-mix(in srgb, var(--color-accent) 14%, transparent);color:#7A0000;border:1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);padding:.2rem .5rem;border-radius:999px;font-size:.8rem}

/* Logo cloud (clientes) */
.logo-cloud{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem;align-items:center}
.logo-cloud img{max-height:42px;filter:grayscale(1);opacity:.9}
@media (max-width:900px){.logo-cloud{grid-template-columns:repeat(3,1fr)}}

/* Footer y sellos */
.site-footer{background:var(--color-primary);color:#fff;margin-top:3rem}
.site-footer a{color:#fff}
.site-footer .container{padding:2rem 0}
.site-footer .logos{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.site-footer .logos img{max-height:56px;width:auto;object-fit:contain} /* ajustá altura si querés */
.copy{border-top:1px solid rgba(255,255,255,.12);padding:1rem 0;text-align:center;opacity:.9}

/* WhatsApp */
.whatsapp-float{position:fixed;right:16px;bottom:16px;background:#25D366;border-radius:999px;padding:10px;box-shadow:var(--shadow)}
.whatsapp-float img{width:36px;height:36px}

/* Embeds */
.responsive-iframe{position:relative;padding-top:56.25%}
.responsive-iframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:16px}

/* Formularios */
.form{display:grid;gap:1rem}
.form input,.form textarea,.form select{width:100%;padding:.8rem;border-radius:10px;border:1px solid #D0D5DD;background:#fff}
.form .inline{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.notice{
  padding:.75rem 1rem;
  border-radius:12px;
  background:#FFF7E6;
  border:1px solid #FFE3A1;
  color:#7A5600;
}


/* ===== Header (una sola regla de logo/altura) ===== */
.site-header .container{ padding:.85rem 0; }
.site-header .brand img.logo{ height:48px; max-height:48px; width:auto; }
@media (max-width:820px){
  .site-header .container{ padding:.65rem 0; }
  .site-header .brand img.logo{ height:40px; max-height:40px; }
}
/* Ocultar checkbox del menú */
.main-nav #nav-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

/* ===== Fondos con overlay + tiles ===== */
.hero-full{
  position:relative; min-height:58vh; display:flex; align-items:center; isolation:isolate;
}
.hero-full::before{
  content:""; position:absolute; inset:0;
  background-image: var(--hero-bg, url('/assets/img/home_hero.jpg'));
  background-size:cover; background-position:center;
  transform:scale(1.05);
  transition:opacity .8s ease, transform .9s ease, background-image .6s ease;
  z-index:-2;
}
.hero-full::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(225deg, rgba(13,21,33,.70), rgba(13,21,33,.28));
  z-index:-1;
}
.hero-content{max-width:780px;color:#fff}
.hero-content h1{
  font-size:clamp(28px,3.1vw+8px,46px);
  line-height:1.15; text-wrap:balance; margin:.25rem 0 .75rem;
}
.hero-content p{max-width:62ch}
.hero-content .cta{display:flex;gap:.8rem;flex-wrap:wrap}
@media (max-width:900px){ .hero-full{ min-height:56vh; padding:3.2rem 0 2.6rem; }}

/* Tiles con imagen de fondo */
.tile{ position:relative; border-radius:16px; overflow:hidden; min-height:220px; display:flex; align-items:flex-end; box-shadow:var(--shadow) }
.tile::before{ content:""; position:absolute; inset:0; background:var(--bg) center/cover no-repeat; transform:scale(1.05); transition:transform .6s ease }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(13,21,33,.65), rgba(13,21,33,.15)) }
.tile:hover::before{ transform:scale(1.12) }
.tile-body{ position:relative; z-index:1; color:#fff; padding:1rem 1.1rem }
.tile-body .muted{ color:rgba(255,255,255,.9) }
.gallery.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem }
@media(max-width:900px){ .gallery.tiles{ grid-template-columns:1fr } }

/* ===== KPIs en sección aparte (limpio) ===== */
.kpis-clean{background:#fff;padding:1.2rem 0 1.8rem;border-bottom:1px solid #E5E7EB}
.kpis-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.kpi-card{
  background:#fff;border:1px solid #E5E7EB;border-radius:14px;
  padding:.9rem 1rem;text-align:center;box-shadow:var(--shadow)
}
.kpi-card strong{ display:block; font-size:1.45rem; line-height:1; margin-bottom:.25rem; color:var(--color-primary) }
.kpi-card span{ color:#5E6B7A }
.kpis-cta{ margin-top:.6rem; text-align:right }
@media (max-width:900px){
  .kpis-grid{ grid-template-columns:1fr }
  .kpis-cta{ text-align:center }
}

/* Hover + reveal (ligero y accesible) */
.tile{transition:transform .25s ease, box-shadow .25s ease}
.tile:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.12)}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .tile,.reveal{transition:none !important;transform:none !important}
}

/* ===== Sistema de imágenes (limpio y consistente) ===== */

/* Contenedor con radio, borde sutil y sombra */
.media-frame{
  position:relative; overflow:hidden; border-radius:16px;
  border:1px solid #E5E7EB; box-shadow:var(--shadow); background:#f8fafc;
}

/* Proporciones estándar (podés combinar con .media-frame) */
.ratio-16x9{ aspect-ratio:16/9; }
.ratio-3x2{ aspect-ratio:3/2; }
.ratio-4x3{ aspect-ratio:4/3; }
.ratio-1x1{ aspect-ratio:1/1; }

/* Imagen que llena el frame sin deformarse */
.img-cover{ width:100%; height:100%; object-fit:cover; display:block; }

/* Overlay opcional para mejorar contraste de textos sobre imagen */
.overlay::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(to top, rgba(13,21,33,.35), rgba(13,21,33,.06));
}

/* Hover suave (sin marear) */
.media-frame img, .tile::before{ transition:transform .25s ease, filter .25s ease; }
.media-frame:hover img{ transform:scale(1.03); }

/* Estética de tiles de fondo (ya usás --bg). Sumamos foco y borde sutil. */
.tile{ border:1px solid #E5E7EB; }
.tile::before{
  background: var(--bg) var(--pos, center) / cover no-repeat;
  filter:saturate(1.02) contrast(1.02);
}
.tile:hover::before{ transform:scale(1.06); }

/* Imagen chica (cards tipo LinkedIn) */
.thumb{ width:180px; aspect-ratio:16/10; object-fit:cover; border-radius:12px; }

/* Ajustes del hero si más adelante volvés a usar imagen de fondo */
.hero-full::after{
  background:linear-gradient(225deg, rgba(13,21,33,.66), rgba(13,21,33,.22));
}

/* ===== Sistema de imágenes pro ===== */
.media-frame{position:relative;overflow:hidden;border-radius:16px;border:1px solid #E5E7EB;box-shadow:var(--shadow);background:#f8fafc}
.ratio-16x9{aspect-ratio:16/9}.ratio-3x2{aspect-ratio:3/2}.ratio-4x3{aspect-ratio:4/3}.ratio-1x1{aspect-ratio:1/1}
.img-cover{width:100%;height:100%;object-fit:cover;display:block}
.overlay::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(to top,rgba(13,21,33,.35),rgba(13,21,33,.06))}

/* Blur-up suave hasta que cargue */
.blur-up{filter:blur(12px) saturate(1.05);transform:scale(1.02);transition:filter .35s ease, transform .35s ease}
.blur-up.is-loaded{filter:none;transform:none}

/* Tiles con imagen real (mejor que background para srcset) */
.tile-img{position:relative;border-radius:16px;overflow:hidden;border:1px solid #E5E7EB;box-shadow:var(--shadow);display:flex;align-items:flex-end;min-height:220px}
.tile-img .tile-media{position:absolute;inset:0;z-index:0}
.tile-img .tile-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.tile-img .tile-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,21,33,.65),rgba(13,21,33,.15))}
.tile-img .tile-body{position:relative;z-index:1;color:#fff;padding:1rem 1.1rem}
.tile-img .tile-body .muted{color:rgba(255,255,255,.9)}

/* Miniaturas (LinkedIn) */
.thumb{width:180px;aspect-ratio:16/10;object-fit:cover;border-radius:12px}

/* Ajuste leve del hero si volvés a fondo fotográfico */
.hero-full::after{background:linear-gradient(225deg,rgba(13,21,33,.66),rgba(13,21,33,.22))}



/* Layout: footer siempre al fondo */
html, body{height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
.site-footer{margin-top:auto}

/* Email de usuario en el header */
.user-email{margin-left:.75rem; font-size:.9rem; opacity:.8}
@media (max-width: 768px){
  .user-email{display:none !important;}
}


/* Secciones privadas ocultas por defecto; se muestran con route-guard */
.auth-required{display:none}