:root{
  --brand:#002F6C;
  --text:#0b1220;
  --muted:#5a6475;
  --bg:#ffffff;
  --line:#e7eaf0;
  --card:#f7f9fc;
  --okbg:#e8f5e9;
  --oktx:#1b5e20;
  --wrnbg:#fff8e1;
  --wrntx:#8a5a00;
  --shadow:0 18px 40px rgba(11,18,32,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Topbar */
.topbar{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:10}
.navwrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand__name{display:block;font-weight:900;letter-spacing:.2px}
.brand__tag{display:block;color:var(--muted);font-size:12px;margin-top:2px}

.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav a{padding:8px 10px;border-radius:12px;font-weight:700}
.nav a:hover{background:var(--card)}
.nav__cta{background:var(--brand);color:#fff!important;padding:10px 14px!important;border-radius:999px;font-weight:900}
.nav__tracking{border:1px solid var(--brand);color:var(--brand)!important;padding:10px 14px!important;border-radius:999px;font-weight:900}
.nav__login{border:1px solid var(--line);padding:10px 14px!important;border-radius:999px;font-weight:900}
.lang-switch{border:1px solid var(--line);padding:8px 10px;border-radius:999px;font-weight:900;font-size:12px}

/* Common */
.section{padding:38px 0}
.section--soft{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--cta{background:#fff;border-top:1px solid var(--line)}
.section__head{margin-bottom:14px}
.section__head h2{margin:0 0 6px;font-size:24px}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fff}
.linkcard:hover{border-color:rgba(0,47,108,.35);box-shadow:var(--shadow)}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted)}
.card__cta{display:inline-block;margin-top:10px;color:var(--brand);font-weight:900}
.highlight{background:linear-gradient(180deg,#fff,#f7fbff);border-color:rgba(0,47,108,.25)}

/* Hero */
.hero{padding:52px 0;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff, #f7f9fc)}
.hero__grid{display:grid;grid-template-columns:1.3fr .9fr;gap:18px;align-items:start}
.pill{display:inline-block;font-size:12px;border:1px solid var(--line);padding:6px 10px;border-radius:999px;background:#fff;color:var(--muted);margin-bottom:12px}
.hero h1{margin:0 0 12px;font-size:46px;line-height:1.06}
.hero__lead{margin:0 0 18px;color:var(--muted);font-size:16px;max-width:760px}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}
.hero__trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.trust__item{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff}
.trust__item strong{display:block}
.trust__item span{display:block;color:var(--muted);font-size:12px;margin-top:3px}

/* Panel */
.panel{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fff;box-shadow:var(--shadow)}
.panel__title{font-weight:900;font-size:16px;margin-bottom:6px}
.panel__desc{color:var(--muted);font-size:13px;margin-bottom:12px}
.panel__links{display:flex;justify-content:space-between;margin-top:10px;font-weight:900;color:var(--brand)}
.panel__links a{color:var(--brand)}

/* Form */
.label{display:block;margin:12px 0 6px;font-weight:800}
.input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:14px;font-size:14px}
.input:focus{outline:none;border-color:rgba(0,47,108,.45);box-shadow:0 0 0 4px rgba(0,47,108,.08)}
.row{display:flex;gap:10px;align-items:center}
.row .input{flex:1}

.btn{display:inline-block;background:var(--brand);color:#fff;border:none;padding:11px 14px;border-radius:14px;font-weight:900;cursor:pointer}
.btn-outline{display:inline-block;border:1px solid var(--brand);color:var(--brand);padding:11px 14px;border-radius:14px;font-weight:900}

/* CTA strip */
.cta{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:18px;padding:18px;background:linear-gradient(180deg,#fff,#f7f9fc)}
.cta__actions{display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
.footer{border-top:1px solid var(--line);margin-top:48px;padding:28px 0;background:#fff}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.footer__title{font-weight:900;margin-bottom:8px}
.footer__muted{color:var(--muted)}
.footer__bottom{padding-top:16px;color:var(--muted)}

/* WhatsApp Floating */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:999px;
  background:#0ea5e9; color:#fff; font-weight:900;
  box-shadow:0 18px 40px rgba(2,132,199,.35);
}
.wa-float:hover{transform:translateY(-1px)}
.wa-ico{font-size:18px;line-height:1}
.wa-txt{font-size:13px}
.wa-dot{
  width:10px;height:10px;border-radius:999px;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.7);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}
  70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* Responsive */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero h1{font-size:36px}
  .hero__trust{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:flex-start}
  .footer__grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .wa-txt{display:none}
  .wa-float{padding:12px}
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Roboto:wght@400;500&display=swap');

:root{
  /* Brand */
  --brand:#002F6C;        /* Azul corporativo */
  --brand2:#0A4FA3;       /* Hover/interacción */
  --text:#2B2B2B;         /* Texto */
  --muted:#5b6472;
  --bg:#FFFFFF;
  --soft:#E6E9EE;         /* Fondos/tarjetas */

  /* Accentos (tracking/estados) */
  --ok:#2ECC71;
  --warn:#F5A623;
  --danger:#D0021B;

  --border: rgba(0,0,0,.10);
  --card:#fff;
  --radius:18px;
}

body{
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

h1,h2,h3,.brand__name,.nav a,.btn{
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

.btn{
  background: var(--brand);
  border: 1px solid var(--brand);
}
.btn:hover{ background: var(--brand2); border-color: var(--brand2); }

.btn-outline{
  color: var(--brand);
  border:1px solid var(--brand);
}
.btn-outline:hover{ border-color:var(--brand2); color:var(--brand2); }

.topbar{ background: #fff; border-bottom:1px solid var(--border); }
.footer{ background: var(--brand); color:#fff; }
.footer a{ color:#fff; opacity:.9; }
.footer a:hover{ opacity:1; text-decoration: underline; }
/* =========================================
   MEJORAS HEADER PROFESIONAL (GRUPO YUPANQUI)
   Pegar al final de styles.css
   ========================================= */

/* Ajuste global de fuente para modernizar */
body {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}

/* 1. Contenedor Header */
.pro-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px); /* Efecto cristal moderno */
    border-bottom: 1px solid rgba(0,0,0,0.08);
    height: 76px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.pro-navwrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 2. Brand / Logo */
.pro-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    z-index: 1001; /* Siempre visible encima del menú móvil */
}

.pro-logo-img {
    height: 52px; /* Ajuste óptico */
    width: auto;
    display: block;
}

.pro-tagline {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 4px;
    text-transform: uppercase;
}

/* 3. Menú General (Desktop) */
.pro-menu {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Links de Navegación */
.pro-links {
    display: flex;
    gap: 28px;
}

.pro-links a {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    padding: 8px 0;
    position: relative;
    transition: color 0.2s;
}

.pro-links a:hover,
.pro-links a.active {
    color: var(--brand);
}

/* Línea animada debajo de los links */
.pro-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--brand);
    transition: width 0.3s ease;
}

.pro-links a:hover::after,
.pro-links a.active::after {
    width: 100%;
}

/* Divisor Vertical */
.pro-divider {
    width: 1px;
    height: 24px;
    background: var(--line);
}

/* 4. Acciones (Derecha) */
.pro-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s;
}

.action-item:hover {
    color: var(--brand);
    background: #f0f4f8; /* Color fondo suave */
}

.action-item.tracking {
    color: var(--brand);
    background: rgba(0, 47, 108, 0.04);
}

/* Botón Cotizar Destacado */
.pro-btn {
    background: var(--brand);
    color: #fff !important;
    font-weight: 800;
    font-size: 13px;
    padding: 10px 22px;
    border-radius: 50px; /* Redondo completo */
    box-shadow: 0 4px 12px rgba(0, 47, 108, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}

.pro-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 47, 108, 0.35);
}

/* 5. MENÚ MÓVIL (Responsivo) */
.nav-trigger { display: none; }
.nav-icon { display: none; }

@media (max-width: 992px) {
    /* Esconder menú desktop y mostrar burger */
    .pro-divider { display: none; }
    
    .nav-icon {
        display: block;
        cursor: pointer;
        padding: 10px;
        z-index: 1002;
    }
    .nav-icon span {
        display: block;
        width: 26px;
        height: 3px;
        background: var(--brand);
        position: relative;
    }
    .nav-icon span::before,
    .nav-icon span::after {
        content: ''; position: absolute; width: 100%; height: 3px; background: var(--brand); left: 0; transition: 0.3s;
    }
    .nav-icon span::before { top: -8px; }
    .nav-icon span::after { bottom: -8px; }

    /* Menú Desplegable Móvil */
    .pro-menu {
        position: fixed;
        top: 0; right: 0;
        height: 100vh;
        width: 80%;
        max-width: 300px;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 90px 24px 24px;
        box-shadow: -5px 0 20px rgba(0,0,0,0.1);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pro-links {
        flex-direction: column;
        width: 100%;
        gap: 0;
        margin-bottom: 24px;
    }
    .pro-links a {
        padding: 16px 0;
        border-bottom: 1px solid var(--line);
        font-size: 16px;
    }
    .pro-links a::after { display: none; } /* Sin línea animada en móvil */

    .pro-actions {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }
    .action-item { justify-content: flex-start; }
    .pro-btn { text-align: center; }

    /* Animación al abrir */
    .nav-trigger:checked ~ .pro-menu {
        transform: translateX(0);
    }
    
    /* Animación Icono X */
    .nav-trigger:checked + .nav-icon span { background: transparent; }
    .nav-trigger:checked + .nav-icon span::before { transform: rotate(45deg); top: 0; }
    .nav-trigger:checked + .nav-icon span::after { transform: rotate(-45deg); top: 0; }
}