:root{
      --navy:#062d4b; --navy-2:#031f35; --navy-3:#0b4168;
      --gold:#f3bb42; --gold-2:#ffd36a; --cream:#f8f5ef;
      --paper:#fffdfa; --ink:#082944; --muted:#607080; --line:#e7e5df;
      --shadow:0 16px 45px rgba(3,31,53,.11);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{font-family:"Inter",sans-serif;color:var(--ink);background:var(--cream);overflow-x:hidden}
    h1,h2,h3,.serif{font-family:"Playfair Display",serif}
    section{scroll-margin-top:76px}
    .section-pad{padding:90px 0}
    .eyebrow{font-size:.72rem;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:#0872b8}
    .eyebrow.gold{color:var(--gold)}
    .section-no{font-family:"Playfair Display",serif;font-size:2.3rem;color:var(--gold);line-height:1}
    .section-title{font-size:clamp(2.1rem,4vw,3.45rem);line-height:1.05;margin:.35rem 0 1rem;color:var(--navy-2)}
    .copy{color:#526678;line-height:1.75}
    .soft-card{background:#fff;border:1px solid rgba(6,45,75,.07);border-radius:18px;box-shadow:var(--shadow)}
    .icon-circle{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--navy);font-size:1.45rem;box-shadow:0 8px 24px rgba(3,31,53,.1);flex:0 0 auto}
    .gold-icon{color:var(--gold)}

    /* NAV */
    .navbar{background:rgba(3,31,53,.94);backdrop-filter:blur(14px);padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
    .brand-mark{width:42px;height:42px;border:1.5px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font:700 16px "Playfair Display",serif}
    .navbar-brand{color:#fff!important;font-weight:700;font-size:.92rem}
    .navbar .nav-link{color:rgba(255,255,255,.84)!important;font-size:.78rem;margin:0 .25rem}
    .navbar .nav-link:hover{color:var(--gold)!important}
    .btn-gold{background:var(--gold);color:var(--navy-2);border:none;border-radius:999px;font-weight:700;padding:11px 21px}
    .btn-gold:hover{background:var(--gold-2);color:var(--navy-2)}
    .navbar-toggler{border-color:rgba(255,255,255,.25)}
    .navbar-toggler-icon{filter:invert(1)}

    /* HERO */
    .hero{position:relative;min-height:720px;padding:125px 0 55px;color:#fff;overflow:hidden;background:
      radial-gradient(circle at 78% 30%,rgba(243,187,66,.18),transparent 23%),
      linear-gradient(105deg,rgba(3,31,53,.98) 0%,rgba(6,45,75,.95) 52%,rgba(3,31,53,.84) 100%)}
    .hero:after{content:"";position:absolute;inset:0;opacity:.18;background:
      radial-gradient(ellipse at 82% 85%,#7894a7 0 2%,transparent 2.5%),
      linear-gradient(160deg,transparent 58%,#234d68 59%,#0a2f49 76%,transparent 77%)}
    .hero .container{position:relative;z-index:2}
    .portrait-wrap{position:relative;max-width:390px;margin:auto}
    .portrait-ring{aspect-ratio:1;border-radius:50%;padding:7px;border:3px solid var(--gold);background:#fff;box-shadow:0 25px 70px rgba(0,0,0,.34);overflow:hidden}
    .portrait-ring img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%}
    .signature{font-family:"Caveat",cursive;font-size:2rem;line-height:.8;transform:rotate(-8deg);margin-top:-12px;margin-left:-10px;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.4)}
    .hero h1{font-size:clamp(3rem,5vw,5.2rem);line-height:.94;margin:15px 0 22px}
    .hero h1 span{display:block;color:var(--gold)}
    .hero-copy{font-size:.98rem;line-height:1.75;max-width:570px;color:rgba(255,255,255,.88)}
    .hero-quote{border-left:3px solid var(--gold);padding:4px 0 4px 18px;font:italic 1rem "Playfair Display",serif;max-width:570px;margin:24px 0}
    .hero-side{border-left:1px solid rgba(255,255,255,.45);padding-left:22px;letter-spacing:4px;line-height:1.9;font-size:.7rem;text-transform:uppercase;color:rgba(255,255,255,.85)}
    .hero-pillars{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13)}
    .pillar{display:flex;gap:12px;align-items:center}
    .pillar i{font-size:1.55rem;color:var(--gold)}
    .pillar b{display:block;font-size:.8rem}.pillar small{color:rgba(255,255,255,.65)}

    /* 01 */
    .about{background:var(--cream)}
    .big-watermark{position:absolute;left:-4px;top:-30px;font:700 8rem "Playfair Display",serif;color:rgba(6,45,75,.045);pointer-events:none}
    .quote-note{border-left:3px solid var(--gold);padding:12px 20px;font:600 1.5rem "Caveat",cursive;color:#294b64}
    .about-visual{min-height:430px;border-radius:24px;position:relative;overflow:hidden;background:linear-gradient(135deg,#e6ded1,#f9f6f0);box-shadow:var(--shadow)}
   
    .traits{position:absolute;right:18px;top:25px;bottom:25px;width:min(58%,310px);padding:18px}
    .trait{display:flex;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid #edf0f1}
    .trait:last-child{border-bottom:0}.trait h6{margin:0;font-weight:800}.trait small{color:#6a7884}

    /* 02 */
    .strengths{color:#fff;background:linear-gradient(135deg,#073557,#031f35)}
    .strengths .section-title{color:#fff}.strengths .copy{color:rgba(255,255,255,.76)}
    .strength-card{height:100%;border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:24px;background:rgba(255,255,255,.035);transition:.25s}
    .strength-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.075)}
    .strength-card i{font-size:2rem;color:var(--gold)}.strength-card h4{font:700 1.25rem "Playfair Display",serif;margin:12px 0}.strength-card p{font-size:.82rem;color:rgba(255,255,255,.78)}
    .strength-card small{font-weight:800}
    .observe{background:#fff;color:var(--ink);padding:24px;border-radius:16px;height:100%}
    .care{background:linear-gradient(135deg,var(--gold),#ffd66e);color:#152f42;padding:24px;border-radius:16px;height:100%}

    /* 03 */
    .leadership{background:#fff}
    .lead-photo{min-height:390px;border-radius:0 28px 28px 0;background:
      linear-gradient(180deg,rgba(3,31,53,.1),rgba(3,31,53,.78)),
      linear-gradient(135deg,#b7c5cf,#294e68);position:relative;overflow:hidden}
    .lead-photo:after{content:"LIDERAR\A TAMBIÉN ES\A ACOMPAÑAR";white-space:pre;position:absolute;left:15%;bottom:15%;color:#fff;letter-spacing:4px;line-height:1.7;font-weight:600;font-size:.85rem}
    .lead-card{padding:20px;border-radius:16px;background:#fbfaf7;display:flex;gap:16px;align-items:flex-start;margin-bottom:15px;box-shadow:0 8px 24px rgba(3,31,53,.06)}
    .lead-card h6{font-weight:800;margin:3px 0 5px}.lead-card p{margin:0;color:#667784;font-size:.82rem}

    /* 04 */
    .purpose{background:var(--navy);color:#fff}
    .purpose .section-title{color:#fff}.purpose .copy{color:rgba(255,255,255,.78)}
    .purpose-icons{display:flex;gap:25px;flex-wrap:wrap;margin-top:28px}
    .purpose-icons span{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.86rem}.purpose-icons i{color:var(--gold);font-size:1.5rem}
    .compass{min-height:440px;background:
      radial-gradient(circle at 55% 58%,rgba(243,187,66,.75) 0 2%,transparent 2.5%),
      linear-gradient(135deg,#9aa7aa,#223f50);position:relative;overflow:hidden}
    .compass:before{content:"✥";position:absolute;font-size:11rem;color:rgba(255,255,255,.78);left:23%;top:22%;text-shadow:0 12px 30px rgba(0,0,0,.3)}
    .compass:after{content:"EXPERIENCIA QUE SUMA\A PERSONAS QUE CRECEN";white-space:pre;position:absolute;right:9%;top:24%;color:#fff;letter-spacing:3px;line-height:1.8;font-size:.72rem}

    /* 05 */
    .values{background:var(--cream)}
    .value-card{background:#fff;border-radius:16px;padding:24px;height:100%;box-shadow:0 10px 28px rgba(3,31,53,.07)}
    .value-card i{font-size:1.8rem;color:var(--gold)}.value-card h5{font-size:.98rem;font-weight:800;margin:12px 0 6px}.value-card p{font-size:.8rem;color:#687986;margin:0}
    .value-banner{margin-top:28px;padding:24px;border-radius:14px;background:linear-gradient(90deg,#0a3b5f,#164e73);color:#fff;text-align:center;font:italic 1rem "Playfair Display",serif}

    /* 06 */
    .growth{background:#fff}
    .growth-card{height:100%;padding:25px;border-radius:17px;background:#fff;box-shadow:var(--shadow);border-top:4px solid var(--navy)}
    .growth-card .top{display:flex;gap:13px;align-items:center}.growth-card i{font-size:1.7rem;color:var(--navy)}.growth-card small{font-weight:800;color:#0872b8;letter-spacing:1px}.growth-card h5{font-weight:800;margin:2px 0 0}
    .growth-card ul{padding-left:18px;margin:18px 0 0;color:#5c6e7c;font-size:.83rem;line-height:1.8}

    /* FOOTER */
    footer{background:linear-gradient(135deg,#062d4b,#031f35);color:#fff;padding:38px 0}
    .footer-sign{font:600 1.5rem "Caveat",cursive;color:rgba(255,255,255,.82);transform:rotate(-4deg)}
    .footer-year{color:#fff}.gold-line{display:inline-block;width:32px;height:2px;background:var(--gold);vertical-align:middle;margin-right:10px}

    @media(max-width:991.98px){
      .navbar-collapse{padding:18px 0}.hero{text-align:center;padding-top:115px}.portrait-wrap{max-width:300px;margin-bottom:35px}.signature{margin-left:0}
      .hero-copy,.hero-quote{margin-left:auto;margin-right:auto}.hero-side{border-left:0;border-top:1px solid rgba(255,255,255,.35);padding:18px 0 0;margin-top:25px}
      .pillar{justify-content:center}.traits{position:relative;right:auto;top:auto;bottom:auto;width:calc(100% - 30px);margin:190px 15px 15px}.about-visual:before{top:13%;left:8%}
      .lead-photo{border-radius:24px;min-height:320px;margin-bottom:35px}.compass{min-height:330px}
    }
    @media(max-width:575.98px){
      .section-pad{padding:65px 0}.hero h1{font-size:3.1rem}.hero{min-height:auto}.hero-pillars{margin-top:32px}
      .section-title{font-size:2.25rem}.about-visual{min-height:590px}.traits{margin-top:220px}.about-visual:before{padding:38px 26px}
      .purpose-icons{gap:15px}.compass:before{font-size:8rem;left:16%}
    }