/* ==============================
   VARIABLES / PALETA
   ============================== */
:root {
    --navy:#06192f;
    --navy2:#0a2b55;
    --navy3:#0f3b6e;
    --cyan:#19c1df;
    --cyan2:#4be2f1;
    --ice:#e8f6fb;
    --white:#fff;
    --ink:#0a2441;
    --muted:#5e6f80;
    --line:rgba(10,36,65,.12);
    --radius:28px;
    --shadow:0 28px 80px rgba(4,25,49,.15)
}

/* ==============================
   BASE / RESET
   ============================== */
* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:Manrope,system-ui,-apple-system,sans-serif;
    color:var(--ink);
    background:#f6fafc;
    line-height:1.55
}

a {
    text-decoration:none;
    color:inherit
}

img {
    max-width:100%
}

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

/* ==============================
   HEADER Y NAVEGACIÓN
   ============================== */
.site-header {
    position:sticky;
    top:0;
    z-index:80;
    background:rgba(246,250,252,.86);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(10,36,65,.07)
}

.nav-wrap {
    min-height:96px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:13px
}

.brand-mark {
    width:40px;
    height:40px;
    position:relative;
    display:inline-block;
    transform:rotate(45deg)
}

.brand-mark i {
    position:absolute;
    width:17px;
    height:17px;
    background:linear-gradient(135deg,var(--cyan),#008dc7);
    border-radius:4px
}

.brand-mark i:nth-child(1) {
    left:0;
    top:0
}

.brand-mark i:nth-child(2) {
    right:0;
    top:0
}

.brand-mark i:nth-child(3) {
    left:0;
    bottom:0
}

.brand-mark i:nth-child(4) {
    right:0;
    bottom:0
}

.brand-copy {
    display:flex;
    flex-direction:column;
    line-height:1.05
}

.brand-copy strong {
    font-family:Montserrat,sans-serif;
    font-size:1.18rem;
    letter-spacing:.03em
}

.brand-copy small {
    font-size:.67rem;
    color:#6a7988;
    margin-top:5px
}

.main-nav {
    display:flex;
    align-items:center;
    gap:26px;
    font-size:.9rem;
    font-weight:700
}

.main-nav a {
    color:#234361;
    transition:.25s
}

.main-nav a:hover {
    color:#0aaecb
}

.nav-cta {
    background:var(--navy);
    color:#fff!important;
    padding:11px 17px;
    border-radius:999px
}

.menu-toggle {
    display:none;
    border:0;
    background:transparent;
    padding:6px
}

.menu-toggle span {
    display:block;
    width:25px;
    height:2px;
    background:var(--navy);
    margin:5px 0
}

/* ==============================
   HERO
   ============================== */
.section-dark {
    background:radial-gradient(circle at 84% 10%,rgba(25,193,223,.25),transparent 32%),linear-gradient(135deg,#041425 0%,#08294d 58%,#053658 100%);
    color:#fff
}

.hero {
    position:relative;
    overflow:hidden;
    padding:94px 0 82px;
    border-radius:0 0 52px 52px
}

.hero-grid {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:56px
}

.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#0c95b8
}

.eyebrow:before {
    content:"";
    width:24px;
    height:2px;
    background:currentColor
}

.eyebrow.light {
    color:var(--cyan2)
}

.hero h1,.section-head h2,.intro h2,.portfolio h2,.contact h2 {
    font-family:Montserrat,sans-serif;
    letter-spacing:-.035em
}

.hero h1 {
    font-size:clamp(3.4rem,6.5vw,6.8rem);
    line-height:.92;
    margin:22px 0 26px;
    max-width:850px
}

.hero h1 span {
    color:var(--cyan2)
}

.hero-copy>p {
    max-width:700px;
    font-size:1.08rem;
    color:#cde1ee
}

.hero-actions {
    display:flex;
    gap:13px;
    flex-wrap:wrap;
    margin:34px 0
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 20px;
    border-radius:999px;
    font-size:.88rem;
    font-weight:800;
    transition:.25s
}

.btn:hover {
    transform:translateY(-2px)
}

.btn-primary {
    background:linear-gradient(135deg,var(--cyan),#0ba3c6);
    color:#fff;
    box-shadow:0 14px 34px rgba(25,193,223,.22)
}

.btn-ghost {
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
    background:rgba(255,255,255,.06)
}

.hero-badges {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:26px
}

.hero-badges span {
    padding:9px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    font-size:.72rem;
    color:#dbeaf2;
    background:rgba(255,255,255,.04)
}

.hero-visual {
    position:relative;
    min-height:530px
}

.visual-core {
    position:absolute;
    inset:50% auto auto 50%;
    transform:translate(-50%,-50%);
    width:285px;
    height:285px;
    border-radius:50%;
    display:grid;
    place-items:center;
    text-align:center;
    background:radial-gradient(circle at 38% 34%,#19c1df,#0a315c 68%,#06192f);
    box-shadow:0 0 0 24px rgba(25,193,223,.06),0 30px 80px rgba(0,0,0,.28)
}

.core-ring {
    position:absolute;
    inset:-28px;
    border-radius:50%;
    border:1px solid rgba(75,226,241,.25)
}

.core-mark {
    width:72px;
    height:72px;
    position:relative;
    transform:rotate(45deg)
}

.core-mark i {
    position:absolute;
    width:31px;
    height:31px;
    border-radius:8px;
    background:rgba(255,255,255,.92)
}

.core-mark i:nth-child(1) {
    left:0;
    top:0
}

.core-mark i:nth-child(2) {
    right:0;
    top:0
}

.core-mark i:nth-child(3) {
    left:0;
    bottom:0
}

.core-mark i:nth-child(4) {
    right:0;
    bottom:0
}

.visual-core p {
    position:absolute;
    bottom:41px;
    margin:0;
    color:#d7edf6;
    font-size:.82rem
}

.visual-core p strong {
    color:#fff
}

.visual-card {
    position:absolute;
    width:128px;
    padding:16px 17px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    border-radius:18px
}

.visual-card b {
    display:block;
    color:var(--cyan2);
    font-size:1.6rem
}

.visual-card span {
    font-size:.78rem;
    color:#d7e5ef
}

.card-a {
    left:2%;
    top:9%
}

.card-b {
    right:2%;
    top:23%
}

.card-c {
    left:5%;
    bottom:8%
}

.visual-lines {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    fill:none;
    stroke:rgba(75,226,241,.2);
    stroke-width:1.2
}

.orb-1,.orb-2,.orb-3 {
    position:absolute;
    border-radius:50%;
    filter:blur(2px)
}

.orb-1 {
    width:180px;
    height:180px;
    background:rgba(25,193,223,.16);
    left:-70px;
    top:180px
}

.orb-2 {
    width:130px;
    height:130px;
    background:rgba(31,113,255,.12);
    right:4%;
    bottom:2%
}

.orb-3 {
    width:90px;
    height:90px;
    background:rgba(75,226,241,.12);
    left:43%;
    top:8%
}

/* ==============================
   NOSOTROS / INTRODUCCIÓN
   ============================== */
.intro {
    padding:100px 0 82px
}

.intro-grid {
    display:grid;
    grid-template-columns:180px 1fr;
    gap:44px
}

.section-kicker {
    font-weight:800;
    color:#0b88a7;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:.75rem;
    padding-top:10px
}

.intro h2 {
    font-size:clamp(2.4rem,4vw,4.6rem);
    line-height:1.02;
    margin:0 0 22px;
    max-width:900px
}

.intro-content p {
    font-size:1.06rem;
    color:var(--muted);
    max-width:800px
}

.metric-strip {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:54px;
    border:1px solid var(--line);
    border-radius:24px;
    overflow:hidden;
    background:#fff;
    box-shadow:var(--shadow)
}

.metric-strip article {
    padding:28px;
    border-right:1px solid var(--line)
}

.metric-strip article:last-child {
    border-right:0
}

.metric-strip span {
    font-size:.72rem;
    font-weight:800;
    color:#0ca5c4
}

.metric-strip h3 {
    margin:7px 0 6px
}

.metric-strip p {
    margin:0;
    color:var(--muted);
    font-size:.86rem
}

/* ==============================
   SERVICIOS
   ============================== */
.services {
    padding:98px 0;
    background:linear-gradient(180deg,#0a2d54,#06192f);
    color:#fff;
    border-radius:52px
}

.section-head {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:70px;
    align-items:end;
    margin-bottom:48px
}

.section-head h2 {
    font-size:clamp(2.5rem,4.5vw,5rem);
    line-height:1.02;
    margin:15px 0 0
}

.section-head>p {
    margin:0;
    color:#bdd2df
}

.services-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.service-card {
    position:relative;
    padding:30px;
    border:1px solid rgba(255,255,255,.1);
    background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
    border-radius:24px;
    min-height:460px;
    overflow:hidden;
    transition:.3s
}

.service-card:after {
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    border-radius:50%;
    background:rgba(25,193,223,.08);
    right:-70px;
    bottom:-70px
}

.service-card:hover {
    transform:translateY(-6px);
    border-color:rgba(75,226,241,.38)
}

.service-card.accent {
    background:linear-gradient(160deg,rgba(25,193,223,.2),rgba(255,255,255,.04))
}

.service-card .num {
    position:absolute;
    right:24px;
    top:22px;
    color:rgba(255,255,255,.25);
    font-weight:800
}

.service-card h3 {
    font-family:Montserrat,sans-serif;
    font-size:1.45rem;
    margin:18px 0 9px
}

.service-card p {
    color:#c5d7e2;
    font-size:.9rem
}

.service-card ul {
    list-style:none;
    padding:0;
    margin:20px 0 0
}

.service-card li {
    position:relative;
    padding:5px 0 5px 17px;
    color:#dce9f0;
    font-size:.82rem
}

.service-card li:before {
    content:"";
    position:absolute;
    left:0;
    top:12px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--cyan2)
}

.icon {
    width:54px;
    height:54px;
    border-radius:16px;
    background:rgba(75,226,241,.12);
    position:relative;
    border:1px solid rgba(75,226,241,.18)
}

.icon span,.icon:before,.icon:after {
    content:"";
    position:absolute
}

.web span {
    inset:14px;
    border:2px solid var(--cyan2);
    border-radius:5px
}

.web:before {
    width:22px;
    height:2px;
    background:var(--cyan2);
    left:16px;
    top:22px
}

.brand-icon span {
    width:18px;
    height:18px;
    border:2px solid var(--cyan2);
    border-radius:50%;
    left:11px;
    top:11px
}

.brand-icon:before {
    width:18px;
    height:18px;
    background:var(--cyan2);
    border-radius:4px;
    right:10px;
    bottom:10px
}

.video span {
    left:13px;
    top:15px;
    width:26px;
    height:22px;
    border:2px solid var(--cyan2);
    border-radius:5px
}

.video:after {
    right:9px;
    top:18px;
    border-left:8px solid var(--cyan2);
    border-top:6px solid transparent;
    border-bottom:6px solid transparent
}

.print span {
    left:11px;
    top:18px;
    width:32px;
    height:23px;
    border:2px solid var(--cyan2);
    border-radius:4px
}

.print:before {
    left:16px;
    top:9px;
    width:22px;
    height:13px;
    border:2px solid var(--cyan2);
    border-bottom:0
}

.ads span {
    left:12px;
    top:16px;
    width:24px;
    height:20px;
    border:2px solid var(--cyan2);
    transform:skew(-10deg)
}

.ads:after {
    right:10px;
    top:12px;
    width:3px;
    height:28px;
    background:var(--cyan2);
    transform:rotate(-12deg)
}

.graphic span {
    left:13px;
    top:13px;
    width:28px;
    height:28px;
    border:2px solid var(--cyan2);
    border-radius:5px;
    transform:rotate(45deg)
}

/* ==============================
   PORTAFOLIO
   ============================== */
.portfolio {
    padding:110px 0
}

.portfolio-grid {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:70px;
    align-items:center
}

.portfolio h2 {
    font-size:clamp(2.5rem,4.6vw,5rem);
    line-height:1.02;
    margin:18px 0 22px
}

.portfolio p {
    color:var(--muted);
    max-width:600px
}

.text-link {
    display:inline-flex;
    gap:10px;
    align-items:center;
    font-weight:800;
    margin-top:18px;
    color:#087f9b
}

.text-link span {
    font-size:1.25rem
}

.portfolio-canvas {
    min-height:560px;
    position:relative
}

.shot {
    position:absolute;
    border-radius:24px;
    box-shadow:var(--shadow);
    display:flex;
    align-items:flex-end;
    padding:20px;
    color:#fff;
    font-size:.72rem;
    letter-spacing:.12em;
    font-weight:800;
    overflow:hidden
}

.shot:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent,rgba(3,22,43,.65))
}

.shot span {
    position:relative
}

.shot-1 {
    left:3%;
    top:6%;
    width:47%;
    height:43%;
    background:linear-gradient(135deg,#1cd2e8,#0c4d83)
}

.shot-2 {
    right:0;
    top:0;
    width:44%;
    height:30%;
    background:linear-gradient(135deg,#e6f3f6,#7dc9da);
    color:#0a2b55
}

.shot-3 {
    right:4%;
    top:34%;
    width:46%;
    height:51%;
    background:linear-gradient(135deg,#07172b,#0f65a0)
}

.shot-4 {
    left:0;
    bottom:0;
    width:43%;
    height:42%;
    background:linear-gradient(135deg,#0a2d54,#3fd6e8)
}

.shot-5 {
    left:40%;
    bottom:3%;
    width:28%;
    height:26%;
    background:linear-gradient(135deg,#fff,#b8ecf4);
    color:#0a2b55
}

/* ==============================
   CAPACITACIÓN EMPRESARIAL
   ============================== */
.training {
    padding:100px 0;
    background:#081b31;
    color:#fff;
    border-radius:52px
}

.training-head {
    margin-bottom:34px
}

.training-list {
    border-top:1px solid rgba(255,255,255,.12)
}

.training-item {
    display:grid;
    grid-template-columns:74px 1fr 40px;
    gap:20px;
    align-items:center;
    padding:25px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
    transition:.25s
}

.training-item:hover {
    padding-left:14px
}

.training-item .index {
    font-size:.75rem;
    color:var(--cyan2);
    font-weight:800
}

.training-item h3 {
    font-family:Montserrat,sans-serif;
    font-size:1.45rem;
    margin:0 0 6px
}

.training-item p {
    margin:0;
    color:#c4d5df;
    font-size:.9rem;
    max-width:820px
}

.training-item .arrow {
    font-size:1.25rem;
    color:var(--cyan2)
}

/* ==============================
   CONTACTO
   ============================== */
.contact {
    padding:100px 0
}

.contact-card {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:60px;
    align-items:center;
    padding:56px;
    border-radius:32px;
    background:linear-gradient(135deg,#e9f9fc,#fff);
    box-shadow:var(--shadow);
    border:1px solid rgba(10,36,65,.08)
}

.contact h2 {
    font-size:clamp(2.5rem,4.5vw,4.8rem);
    line-height:1.02;
    margin:16px 0
}

.contact p {
    color:var(--muted)
}

.contact-actions {
    display:flex;
    flex-direction:column;
    align-items:flex-start
}

.contact-note {
    font-size:.78rem;
    margin:12px 0 0
}

.contact .btn-primary {
    padding:16px 25px
}

/* ==============================
   FOOTER
   ============================== */
.footer-grid {
    border-top:1px solid var(--line);
    padding:34px 0 46px;
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:center
}

.footer-grid p {
    font-size:.78rem;
    color:#708090
}

.footer-brand .brand-copy small {
    max-width:260px
}

/* ==============================
   ANIMACIONES
   ============================== */
.reveal {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .75s ease,transform .75s ease
}

.reveal.in-view {
    opacity:1;
    transform:none
}

.delay-1 {
    transition-delay:.1s
}

.delay-2 {
    transition-delay:.2s
}

/* ==============================
   RESPONSIVE: TABLET
   ============================== */
@media (max-width:980px) {
    .main-nav {
        position:fixed;
        left:20px;
        right:20px;
        top:78px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        background:#fff;
        padding:22px;
        border-radius:22px;
        box-shadow:var(--shadow)
    }

    .main-nav.open {
        display:flex
    }

    .menu-toggle {
        display:block
    }

    .hero-grid,.portfolio-grid,.section-head,.contact-card {
        grid-template-columns:1fr
    }

    .hero-visual {
        min-height:470px
    }

    .services-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .metric-strip {
        grid-template-columns:repeat(2,1fr)
    }

    .metric-strip article:nth-child(2) {
        border-right:0
    }

    .intro-grid {
        grid-template-columns:1fr
    }

    .section-head {
        gap:20px
    }

    .portfolio-canvas {
        min-height:500px
    }

}

/* ==============================
   RESPONSIVE: MÓVIL
   ============================== */
@media (max-width:640px) {
    .container {
        width:min(100% - 26px,1180px)
    }

    .site-header .brand-copy small {
        display:none
    }

    .hero {
        padding:72px 0 64px;
        border-radius:0 0 34px 34px
    }

    .hero h1 {
        font-size:3.1rem
    }

    .hero-visual {
        min-height:390px
    }

    .visual-core {
        width:220px;
        height:220px
    }

    .visual-card {
        width:104px;
        padding:12px
    }

    .visual-card b {
        font-size:1.15rem
    }

    .services,.training {
        border-radius:34px;
        padding:72px 0
    }

    .services-grid {
        grid-template-columns:1fr
    }

    .service-card {
        min-height:auto
    }

    .metric-strip {
        grid-template-columns:1fr
    }

    .metric-strip article {
        border-right:0;
        border-bottom:1px solid var(--line)
    }

    .metric-strip article:last-child {
        border-bottom:0
    }

    .portfolio {
        padding:78px 0
    }

    .portfolio-canvas {
        min-height:430px
    }

    .contact {
        padding:78px 0
    }

    .contact-card {
        padding:34px 26px
    }

    .footer-grid {
        flex-direction:column;
        align-items:flex-start
    }

    .training-item {
        grid-template-columns:48px 1fr 24px
    }

}

/* ==============================
   IDENTIDAD VISUAL Y PORTAFOLIO REAL
   ============================== */
.brand-logo {
    display:flex;
    align-items:center
}

.brand-logo img {
    display:block;
    width:240px;
    height:auto;
    max-height:78px;
    object-fit:contain;
    object-position:left center
}

.footer-brand img {
    width:190px;
    height:auto
}

.portfolio-canvas {
    display:grid;
    grid-template-columns:1.15fr .85fr .9fr;
    grid-template-rows:190px 190px 190px;
    gap:14px;
    min-height:584px
}

.shot {
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    margin:0;
    padding:0;
    border-radius:22px;
    background:none!important;
    box-shadow:0 20px 55px rgba(4,25,49,.16);
    overflow:hidden
}

.shot img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .55s ease
}

.shot:hover img {
    transform:scale(1.045)
}

.shot:before {
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    background:linear-gradient(180deg,transparent 52%,rgba(3,22,43,.74))
}

.shot figcaption {
    position:absolute;
    z-index:2;
    left:18px;
    bottom:15px;
    color:#fff;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.1em
}

.shot-1 {
    grid-column:1 / 3;
    grid-row:1 / 2
}

.shot-2 {
    grid-column:3;
    grid-row:1 / 2
}

.shot-3 {
    grid-column:1;
    grid-row:2 / 4
}

.shot-4 {
    grid-column:2 / 4;
    grid-row:2
}

.shot-5 {
    grid-column:2 / 4;
    grid-row:3
}

.contact-actions {
    gap:12px
}

.contact-line {
    display:flex;
    flex-direction:column;
    width:100%;
    padding:16px 0;
    border-bottom:1px solid rgba(10,36,65,.12)
}

.contact-line span {
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#708090;
    font-weight:800
}

.contact-line strong {
    font-family:Montserrat,sans-serif;
    font-size:1.25rem;
    color:var(--ink);
    margin-top:4px
}

.contact-buttons {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px
}

.btn-outline {
    border:1px solid rgba(10,36,65,.18);
    color:var(--ink);
    background:#fff
}

.btn-outline:hover {
    border-color:rgba(10,36,65,.35)
}

@media (max-width:980px) {
    .brand-logo img {
        width:200px;
        height:auto;
        max-height:66px
    }

    .portfolio-canvas {
        grid-template-columns:1fr 1fr;
        grid-template-rows:220px 220px 220px;
        min-height:680px
    }

    .shot-1 {
        grid-column:1 / 3;
        grid-row:1
    }

    .shot-2 {
        grid-column:1;
        grid-row:2
    }

    .shot-3 {
        grid-column:2;
        grid-row:2
    }

    .shot-4 {
        grid-column:1;
        grid-row:3
    }

    .shot-5 {
        grid-column:2;
        grid-row:3
    }

}

@media (max-width:640px) {
    .brand-logo img {
        width:170px;
        height:auto;
        max-height:58px
    }

    .portfolio-canvas {
        display:flex;
        flex-direction:column;
        min-height:0
    }

    .shot {
        height:220px!important
    }

    .shot-3 {
        height:300px!important
    }

    .footer-brand img {
        width:150px;
        height:52px
    }

    .contact-line strong {
        font-size:1.05rem
    }

}