/* ==========================================================================
   CURSA SAC - Estilos principales
   ========================================================================== */

/* ============== VARIABLES (Paleta corporativa) ============== */
:root{
    --rojo:        #E30613;
    --rojo-osc:    #B00410;
    --rojo-claro:  #FF1F2D;
    --azul:        #0E1F5C;
    --azul-osc:    #06133F;
    --azul-claro:  #1A2F7A;
    --azul-acc:    #2A47B8;

    --negro:       #0A0F24;
    --carbon:      #141A35;
    --gris-osc:    #2B3147;
    --gris:        #5C6080;
    --gris-cl:     #A8ACBD;
    --hueso:       #F4F4F8;
    --blanco:      #FFFFFF;
    --amarillo:    #F4B400;

    --ff-display: 'Archivo Black', 'Barlow Condensed', sans-serif;
    --ff-cond:    'Barlow Condensed', 'Archivo Black', sans-serif;
    --ff-body:    'Manrope', system-ui, sans-serif;
}

/* ============== RESET ============== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family: var(--ff-body);
    color: var(--negro);
    background: var(--hueso);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.wrap{max-width: 1280px; margin: 0 auto; padding: 0 28px}

/* ============== TOPBAR ============== */
.topbar{
    background: var(--azul-osc);
    color: var(--hueso);
    font-family: var(--ff-cond);
    font-size: 13px;
    letter-spacing: .5px;
    padding: 9px 0;
    border-bottom: 2px solid var(--rojo);
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.topbar a:hover{color: var(--rojo-claro)}
.topbar .left span{margin-right: 22px}
.topbar .left i{margin-right: 7px; color: var(--rojo-claro)}
.topbar .right{display:flex; gap:14px}
.topbar .right a{
    width: 28px;height:28px;
    display:inline-grid;place-items:center;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
    transition: all .25s;
}
.topbar .right a:hover{background:var(--rojo);border-color:var(--rojo);color:white}

/* ============== NAV ============== */
.nav{
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: all .25s ease;
}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;padding: 14px 0}
.logo-link{display:flex;align-items:center}
.logo-link img{
    height: 56px;
    width: auto;
    transition: transform .25s ease;
}
.logo-link:hover img{transform: scale(1.03)}

.nav-links{display:flex;gap:32px;align-items:center;font-family:var(--ff-cond);font-weight:600;font-size:15px;letter-spacing:1.5px;text-transform:uppercase}
.nav-links a{position:relative; padding: 6px 0; color: var(--azul-osc)}
.nav-links a::after{
    content:'';position:absolute;left:0;bottom:0;width:0;height:2px;
    background: var(--rojo);transition:width .3s ease;
}
.nav-links a:hover{color: var(--rojo)}
.nav-links a:hover::after{width:100%}
.nav-cta{
    background:var(--rojo) !important;color:white !important;
    padding:12px 24px;border-radius:2px;
    font-family:var(--ff-cond);font-weight:700;letter-spacing:1.5px;
    transition: all .25s ease;
    border: 2px solid var(--rojo);
}
.nav-cta:hover{background:var(--azul-osc) !important;border-color:var(--azul-osc)}
.nav-cta::after{display:none}
.burger{display:none;background:none;border:none;font-size:26px;cursor:pointer;color:var(--azul-osc)}

/* ============== HERO ============== */
.hero{
    position: relative;
    min-height: 92vh;
    background: var(--azul-osc);
    color: white;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 80px 0 60px;
}
.hero-bg{
    position:absolute;inset:0;
    background-image: url('../img/team-cursa.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(40%);
    opacity: .25;
    z-index: 0;
}
.hero::before{
    content:'';
    position:absolute; inset:0;z-index:1;
    background:
        linear-gradient(135deg, rgba(14,31,92,.96) 0%, rgba(6,19,63,.85) 50%, rgba(227,6,19,.4) 100%);
}
.hero::after{
    content:'';
    position:absolute; inset:0;z-index:1;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.hero-content{
    position:relative; z-index:2;
    display: grid; grid-template-columns: 1.4fr 1fr;
    gap: 60px; align-items: center;
}
.hero-text{position:relative}
.hero-badge{
    display:inline-flex;align-items:center;gap:10px;
    background: rgba(227,6,19,.18);
    border: 1px solid rgba(227,6,19,.55);
    padding: 8px 16px;border-radius: 2px;
    font-family: var(--ff-cond); font-weight:600;
    font-size:13px;letter-spacing:2px;text-transform:uppercase;
    margin-bottom: 28px;
    color: #ffd1d6;
}
.hero-badge .dot{
    width:8px;height:8px;background:var(--rojo-claro);border-radius:50%;
    box-shadow:0 0 12px var(--rojo-claro);
    animation: pulse 2s infinite;
}
@keyframes pulse{
    0%,100%{opacity:1; transform:scale(1)}
    50%{opacity:.5; transform:scale(1.3)}
}
.hero h1{
    font-family: var(--ff-display);
    font-size: clamp(44px, 7vw, 96px);
    line-height: .92;
    letter-spacing: -2px;
    margin-bottom: 28px;
    text-transform: uppercase;
}
.hero h1 .acc{
    color: var(--rojo-claro);
    display: inline-block;
    position: relative;
}
.hero h1 .acc::after{
    content:'';
    position:absolute;
    left:-4px; right:-4px; bottom: 8%;
    height: 14px;
    background: var(--rojo);
    z-index: -1;
    transform: skew(-8deg);
    opacity: .25;
}
.hero h1 .stroke{
    -webkit-text-stroke: 2px var(--rojo-claro);
    color: transparent;
}
.hero p.lead{
    font-size: 19px;
    color: #cdd2e6;
    margin-bottom: 40px;
    max-width: 540px;
    line-height: 1.6;
}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.btn{
    display:inline-flex;align-items:center;gap:10px;
    padding: 16px 28px;
    font-family: var(--ff-cond);font-weight:700;
    letter-spacing: 2px; text-transform: uppercase;
    font-size: 14px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .25s ease;
    border-radius: 2px;
}
.btn-primary{background:var(--rojo);color:white;border-color:var(--rojo)}
.btn-primary:hover{background:transparent;border-color:var(--rojo-claro);color:var(--rojo-claro);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:white;border-color:rgba(255,255,255,.3)}
.btn-ghost:hover{background:white;color:var(--azul-osc);border-color:white}

.hero-stats{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap: 30px; margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.stat .num{
    font-family: var(--ff-display);
    font-size: 44px;
    color: var(--rojo-claro);
    line-height: 1;
}
.stat .lab{
    font-family: var(--ff-cond);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #aab0cc;
    margin-top: 6px;
}

/* Hero visual side */
.hero-visual{
    position: relative;
    height: 540px;
}
.hero-card{
    position:absolute;
    background: linear-gradient(145deg, rgba(26,47,122,.95) 0%, rgba(6,19,63,.97) 100%);
    border: 1px solid rgba(255,255,255,.1);
    padding: 24px;
    border-radius: 4px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hero-card.c1{
    top: 0; right: 30px; width: 280px;
    transform: rotate(2deg);
    border-left: 4px solid var(--rojo);
}
.hero-card.c1 .icn{
    width:48px;height:48px;background:var(--rojo);
    display:grid;place-items:center;color:white;font-size:22px;
    margin-bottom: 14px;
}
.hero-card.c1 h4{font-family:var(--ff-display);font-size:18px;text-transform:uppercase;margin-bottom:6px;color:white}
.hero-card.c1 p{font-size:13px;color:#bfc4dc;line-height:1.5}

.hero-card.c2{
    top: 230px; left: 0; width: 250px;
    transform: rotate(-3deg);
    background: var(--rojo);
    border: none;
}
.hero-card.c2 .badge{
    font-family:var(--ff-cond);font-size:11px;letter-spacing:2px;
    text-transform:uppercase;opacity:.85;margin-bottom:10px;color:white;
}
.hero-card.c2 h3{font-family:var(--ff-display);font-size:26px;line-height:1;margin-bottom:8px;color:white}
.hero-card.c2 p{font-size:13px;opacity:.92;color:white}
.hero-card.c2 .seal{
    position:absolute;top:-18px;right:-18px;
    width:64px;height:64px;
    background:var(--amarillo);
    color:var(--azul-osc);
    border-radius:50%;
    display:grid;place-items:center;
    font-family:var(--ff-display);
    font-size:11px;text-align:center;line-height:1;
    transform:rotate(15deg);
    box-shadow: 4px 4px 0 var(--azul-osc);
}

.hero-card.c3{
    bottom: 20px; right: 0; width: 240px;
    transform: rotate(1.5deg);
    border-top: 4px solid var(--rojo-claro);
}
.hero-card.c3 .meta{
    display:flex;justify-content:space-between;font-family:var(--ff-cond);
    font-size:11px;letter-spacing:1.5px;color:#a8aec8;margin-bottom:12px;
    text-transform:uppercase;
}
.hero-card.c3 .score{font-family:var(--ff-display);font-size:38px;color:white}
.hero-card.c3 .score span{color:var(--rojo-claro);font-size:18px}
.hero-card.c3 .lbl{font-size:12px;color:#bfc4dc;margin-top:4px}

/* Decorative hex */
.hex-deco{
    position:absolute;
    width: 200px;height:200px;
    border: 2px solid rgba(227,6,19,.35);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    bottom: -50px; right: -80px;
    z-index: 1;
}
.hex-deco.solid{
    background: rgba(227,6,19,.07);
    width: 120px;height:120px;
    top: 100px; right: 250px;
    border: none;
}

/* ============== TICKER ============== */
.ticker{
    background: var(--rojo);
    color: white;
    padding: 18px 0;
    overflow: hidden;
    font-family: var(--ff-display);
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-top: 4px solid var(--azul-osc);
    border-bottom: 4px solid var(--azul-osc);
}
.ticker-track{
    display:flex;gap:48px;
    animation: scroll 40s linear infinite;
    white-space: nowrap;
}
.ticker-track span{display:inline-flex;align-items:center;gap:48px}
.ticker i{font-size:14px;opacity:.8}
@keyframes scroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

/* ============== SECCIONES BASE ============== */
section{padding: 110px 0}
.section-head{margin-bottom: 70px;max-width: 720px}
.eyebrow{
    display:inline-block;
    font-family: var(--ff-cond);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--rojo);
    margin-bottom: 18px;
    position: relative;
    padding-left: 50px;
}
.eyebrow::before{
    content:'';position:absolute;left:0;top:50%;
    width:38px;height:2px;background:var(--rojo);
    transform: translateY(-50%);
}
.section-head h2{
    font-family: var(--ff-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: .95;
    letter-spacing: -1px;
    margin-bottom: 24px;
    text-transform: uppercase;
    color: var(--azul-osc);
}
.section-head h2 em{
    font-style: normal;
    color: var(--rojo);
}
.section-head p{
    font-size: 18px;
    color: var(--gris);
    line-height: 1.7;
}

/* ============== QUIENES SOMOS ============== */
.about{background: var(--blanco)}
.about-grid{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: center;
}
.about-img-stack{
    position: relative; height: 580px;
}
.about-img-stack .blk{
    position: absolute;
    overflow: hidden;
}
.about-img-stack .blk-1{
    top: 0; left: 0; width: 75%; height: 65%;
    border-left: 6px solid var(--rojo);
    box-shadow: 0 20px 50px rgba(14,31,92,.25);
}
.about-img-stack .blk-1 img{
    width:100%;height:100%;object-fit:cover;
}
.about-img-stack .blk-1::after{
    content:'';position:absolute;inset:0;
    background: linear-gradient(135deg, rgba(14,31,92,.2), rgba(0,0,0,.0));
}
.about-img-stack .blk-1 .label{
    position:absolute;bottom:24px;left:24px;color:white;
    font-family:var(--ff-cond);
    z-index: 2;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.about-img-stack .blk-1 .label small{display:block;font-size:11px;letter-spacing:3px;color:#fff;opacity:.85;text-transform:uppercase;margin-bottom:6px}
.about-img-stack .blk-1 .label strong{font-family:var(--ff-display);font-size:22px;text-transform:uppercase;line-height:1.1;display:block}

.about-img-stack .blk-2{
    bottom: 0; right: 0; width: 60%; height: 55%;
    background: var(--rojo);
    color: white;
    padding: 36px;
    box-shadow: -10px 10px 0 var(--azul-osc);
}
.about-img-stack .blk-2 .yr{
    font-family: var(--ff-display);
    font-size: 88px; line-height: 1;
    letter-spacing: -2px;
}
.about-img-stack .blk-2 .yr-lbl{
    font-family: var(--ff-cond);
    font-size: 14px;letter-spacing: 3px;
    text-transform:uppercase;
    margin-top: -6px;
    opacity: .92;
}
.about-img-stack .blk-2 hr{
    border: none;height:2px;background:rgba(255,255,255,.3);
    margin: 22px 0;
}
.about-img-stack .blk-2 p{
    font-size: 14px; line-height: 1.6;
}

.about-text h3{
    font-family: var(--ff-display);
    font-size: 38px; line-height:1;
    margin-bottom: 24px;
    text-transform: uppercase;
    color: var(--azul-osc);
}
.about-text > p{
    font-size: 17px; color: var(--gris-osc);
    margin-bottom: 18px; line-height:1.75;
}
.about-text strong{color:var(--azul-osc)}

.about-pillars{
    display:grid;grid-template-columns:1fr 1fr;gap:18px;
    margin-top: 36px;
}
.pillar{
    padding: 22px;
    background: var(--hueso);
    border-left: 3px solid var(--rojo);
    transition: all .25s ease;
}
.pillar:hover{transform: translateX(4px); border-left-color: var(--azul); background: white; box-shadow: 0 8px 24px rgba(14,31,92,.1)}
.pillar i{color:var(--rojo);font-size:20px;margin-bottom:10px;display:block}
.pillar h4{font-family:var(--ff-display);font-size:16px;text-transform:uppercase;margin-bottom:6px;color:var(--azul-osc)}
.pillar p{font-size:13px;color:var(--gris);line-height:1.5}

/* ============== SERVICIOS ============== */
.services{
    background: var(--azul-osc);color:white;
    position:relative;overflow:hidden;
}
.services::before{
    content:'CURSA';
    position:absolute;
    bottom:-50px;left:-30px;
    font-family:var(--ff-display);
    font-size: 360px;
    color: rgba(255,255,255,.025);
    line-height:.8;letter-spacing:-10px;
    pointer-events:none;
}
.services .section-head h2{color:white}
.services .section-head p{color:#aab0cc}
.services .eyebrow{color:var(--rojo-claro)}
.services .eyebrow::before{background:var(--rojo-claro)}

.services-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap: 0;
    border: 1px solid rgba(255,255,255,.08);
    position:relative; z-index:2;
}
.service{
    padding: 44px 36px;
    border-right: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
    transition: all .35s ease;
    position: relative;
    overflow: hidden;
}
.service::before{
    content:'';
    position:absolute;
    top:0;left:0;width:0;height:3px;
    background:var(--rojo-claro);
    transition: width .35s ease;
}
.service:hover{background: rgba(227,6,19,.08); transform: translateY(-4px)}
.service:hover::before{width:100%}
.service .num{
    font-family:var(--ff-cond);
    font-size: 13px; letter-spacing: 3px;
    color: var(--rojo-claro);
    margin-bottom: 22px;
}
.service .ic{
    width:60px;height:60px;
    background: rgba(227,6,19,.18);
    color: var(--rojo-claro);
    display:grid;place-items:center;
    font-size:24px;margin-bottom:24px;
    border-radius: 4px;
}
.service h3{
    font-family: var(--ff-display);
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 14px;
    line-height:1.1;
    color: white;
}
.service p{font-size:14.5px;color:#bfc4dc;line-height:1.7;margin-bottom:20px}
.service ul li{
    font-size:13px;color:#aab0cc;
    padding: 6px 0 6px 18px;
    position: relative;
    border-bottom: 1px dashed rgba(255,255,255,.06);
}
.service ul li::before{
    content:'+';position:absolute;left:0;color:var(--rojo-claro);font-weight:bold;
}

/* ============== PROYECTOS ============== */
.projects{background: var(--hueso)}
.projects-filter{
    display:flex;gap: 4px;flex-wrap:wrap;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.filter-btn{
    background: none; border: none;
    font-family: var(--ff-cond);
    font-weight: 600; font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 14px 22px;
    cursor: pointer;
    color: var(--gris);
    border-bottom: 3px solid transparent;
    transition: all .2s;
    margin-bottom: -1px;
}
.filter-btn:hover{color: var(--azul-osc)}
.filter-btn.active{
    color:var(--rojo);
    border-color: var(--rojo);
}

.projects-grid{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}
.project{
    position: relative;
    background: var(--azul-osc);
    color: white;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    transition: transform .35s ease;
    cursor: pointer;
    border-radius: 2px;
}
.project .pj-img{
    position:absolute;inset:0;
    background-size: cover;
    background-position: center;
    transition: transform .8s ease;
    z-index: 0;
}
.project::before{
    content:'';
    position:absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,19,63,0) 0%, rgba(6,19,63,.7) 60%, rgba(6,19,63,.95) 100%);
    z-index: 1;
    transition: background .35s;
}
.project:hover{transform: translateY(-6px)}
.project:hover .pj-img{transform: scale(1.08)}
.project:hover::before{
    background: linear-gradient(180deg, rgba(227,6,19,.2) 0%, rgba(6,19,63,.8) 60%, rgba(6,19,63,.98) 100%);
}
.project-content{position:relative;z-index:2;padding: 26px}

.project.span-6{grid-column: span 6}
.project.span-4{grid-column: span 4}
.project.span-8{grid-column: span 8}
.project.span-3{grid-column: span 3}
.project.span-5{grid-column: span 5}
.project.span-7{grid-column: span 7}
.project.span-9{grid-column: span 9}
.project.span-12{grid-column: span 12;min-height: 380px}

.pj-top{
    position: absolute;
    top: 22px; left: 26px; right: 26px;
    z-index: 3;
    display:flex;justify-content:space-between;align-items:flex-start;
    font-family:var(--ff-cond);font-size:11px;letter-spacing:2px;text-transform:uppercase;
}
.pj-cat{
    background: var(--rojo);
    color: white;
    padding: 5px 10px;
    font-weight: 700;
}
.pj-yr{
    background: rgba(0,0,0,.5);
    color: white;
    padding: 5px 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.pj-title{
    font-family: var(--ff-display);
    font-size: 22px;
    line-height: 1.05;
    text-transform: uppercase;
}
.project.span-6 .pj-title, .project.span-7 .pj-title, .project.span-8 .pj-title, .project.span-9 .pj-title{font-size: 28px}
.project.span-12 .pj-title{font-size: 34px; max-width: 700px}

.pj-loc{
    font-size: 13px; color:#cdd2e6;
    margin-top: 8px;
    font-family: var(--ff-cond); letter-spacing: 1px; text-transform: uppercase;
}

.pj-arrow{
    position: absolute;
    top: 22px; right: 26px;
    width:42px;height:42px;
    background: var(--rojo);
    color: white;
    display:grid;place-items:center;
    font-size: 14px;
    transition: all .3s;
    opacity: 0;
    transform: translateY(-10px);
    z-index: 4;
}
.project:hover .pj-arrow{opacity:1; transform: translateY(0)}

/* ============== AWARDS ============== */
.awards{
    background: linear-gradient(135deg, var(--azul-osc) 0%, var(--negro) 100%);
    color: white;
    position: relative;
    overflow: hidden;
}
.awards::before{
    content:'';
    position:absolute;inset:0;
    background-image: radial-gradient(circle at 50% 50%, rgba(244,180,0,.08) 0%, transparent 60%);
}
.awards .wrap{position:relative;z-index:2}
.awards-head{text-align: center; max-width: 760px; margin: 0 auto 80px}
.awards-head .eyebrow{padding-left: 0; padding: 0 50px}
.awards-head .eyebrow::before, .awards-head .eyebrow::after{
    content:'';position:absolute;top:50%;width:38px;height:2px;
    background: var(--amarillo);transform:translateY(-50%);
}
.awards-head .eyebrow::before{left:0}
.awards-head .eyebrow::after{right:0}
.awards-head .eyebrow{color: var(--amarillo)}
.awards-head h2{color:white}
.awards-head h2 em{color:var(--amarillo)}
.awards-head p{color:#aab0cc}

.awards-gallery{
    display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
    margin-bottom: 60px;
}
.award-photo{
    position: relative;
    height: 240px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
}
.award-photo img{
    width:100%;height:100%;
    object-fit: cover;
    transition: transform .5s;
    filter: saturate(1.1);
}
.award-photo:hover img{transform: scale(1.08)}
.award-photo::after{
    content:'';position:absolute;inset:0;
    background: linear-gradient(180deg, transparent 50%, rgba(6,19,63,.85));
}
.award-photo .cap{
    position:absolute;bottom:14px;left:14px;right:14px;
    color:white;font-family:var(--ff-cond);
    font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
    z-index:2;
}

.awards-grid{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap: 30px;
}
.award{
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    padding: 40px;
    position: relative;
    overflow: hidden;
}
.award.gold{border-color: rgba(244,180,0,.3)}
.award.gold::before{
    content:'';
    position:absolute;
    top:0;left:0;width:100%;height:4px;
    background: linear-gradient(90deg, var(--amarillo), transparent);
}

.award-medal{
    width:80px;height:80px;
    background: linear-gradient(135deg, var(--amarillo) 0%, #d49500 100%);
    border-radius: 50%;
    display:grid;place-items:center;
    margin-bottom: 24px;
    color: var(--azul-osc);
    font-size: 32px;
    box-shadow: 0 8px 24px rgba(244,180,0,.25);
    position:relative;
}
.award-medal::before{
    content:'';
    position:absolute;
    inset:-6px;
    border:2px dashed rgba(244,180,0,.4);
    border-radius:50%;
    animation: spin 20s linear infinite;
}
@keyframes spin{ to{transform:rotate(360deg)} }

.award h3{
    font-family: var(--ff-display);
    font-size: 28px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 8px;
    color: white;
}
.award .yr{
    font-family: var(--ff-cond);
    color: var(--amarillo);
    letter-spacing: 3px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 18px;
    text-transform: uppercase;
}
.award p{color:#bfc4dc;font-size:15px;line-height:1.7;margin-bottom:20px}

.award-cert{
    background: rgba(255,255,255,.05);
    padding: 24px;
    border: 1px solid rgba(255,255,255,.06);
}
.award-cert h4{
    font-family:var(--ff-display);
    font-size:18px;text-transform:uppercase;margin-bottom:18px;
    display:flex;align-items:center;gap:10px;
    color:white;
}
.award-cert h4 i{color:#4CAF50}
.cert-row{
    display:flex;justify-content:space-between;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255,255,255,.08);
    font-size: 14px;
    color: #cdd2e6;
}
.cert-row:last-child{border:none}
.cert-row strong{color:white;font-family:var(--ff-cond);letter-spacing:.5px}
.cert-row .pts{
    color: var(--amarillo);
    font-family: var(--ff-display);
    font-size: 16px;
}
.cert-total{
    background: rgba(244,180,0,.12);
    padding: 14px 18px;
    margin-top: 16px;
    display:flex;justify-content:space-between;align-items:center;
    border: 1px solid rgba(244,180,0,.25);
}
.cert-total strong{font-family:var(--ff-cond);letter-spacing:1.5px;text-transform:uppercase;font-size:13px;color:var(--amarillo)}
.cert-total .num{font-family:var(--ff-display);font-size:26px;color:white}

/* ============== CTA BAND ============== */
.cta-band{
    background: var(--rojo);
    color: white;
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}
.cta-band::before{
    content:'';
    position:absolute;inset:0;
    background-image:
        repeating-linear-gradient(135deg, transparent 0, transparent 50px, rgba(0,0,0,.05) 50px, rgba(0,0,0,.05) 52px);
}
.cta-band .wrap{
    display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;
    position:relative;z-index:2;
}
.cta-band h2{
    font-family: var(--ff-display);
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: .95;
    text-transform: uppercase;
    max-width: 720px;
}
.cta-band .btn{
    background: var(--azul-osc);color:white;border-color:var(--azul-osc);
    padding: 20px 40px; font-size: 15px;
}
.cta-band .btn:hover{background:white;color:var(--azul-osc);border-color:white}

/* ============== CONTACTO ============== */
.contact{background: var(--blanco)}
.contact-grid{
    display:grid;grid-template-columns: 1fr 1.2fr;
    gap: 80px; align-items: start;
}
.contact-info h3{
    font-family: var(--ff-display);
    font-size: 36px;line-height:1;
    text-transform:uppercase;
    margin-bottom: 24px;
    color: var(--azul-osc);
}
.contact-info > p{
    color: var(--gris);
    font-size: 17px;
    margin-bottom: 36px;
    line-height: 1.7;
}
.contact-item{
    display:flex;align-items:flex-start;gap:18px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.contact-item:last-child{border:none}
.contact-item .ic{
    width:50px;height:50px;flex-shrink:0;
    background: var(--azul-osc);color:white;
    display:grid;place-items:center;font-size:18px;
}
.contact-item .lbl{
    font-family: var(--ff-cond);
    font-size: 11px; letter-spacing: 3px;
    color: var(--rojo); text-transform: uppercase;
    margin-bottom: 4px;
}
.contact-item .val{
    font-size: 16px; color: var(--azul-osc);
    font-weight: 500;
    line-height: 1.5;
}
.contact-item .val a:hover{color:var(--rojo)}

.form-card{
    background: var(--azul-osc);
    color: white;
    padding: 50px;
    position: relative;
    overflow: hidden;
}
.form-card::before{
    content:'';position:absolute;
    top:-30px;right:-30px;
    width: 200px;height:200px;
    background: var(--rojo);
    transform: rotate(45deg);
    opacity: .15;
}
.form-card h3{
    font-family: var(--ff-display);
    font-size: 30px;
    text-transform: uppercase;
    line-height:1;
    margin-bottom: 8px;
    position:relative;
    color: white;
}
.form-card > p{
    color:#aab0cc;font-size:15px;margin-bottom:32px;
    position:relative;
}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.form-group{position:relative}
.form-group.full{grid-column: span 2}
.form-group label{
    display:block;
    font-family: var(--ff-cond);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #aab0cc;
    margin-bottom: 8px;
}
.form-group input, .form-group select, .form-group textarea{
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    padding: 14px 16px;
    color: white;
    font-family: var(--ff-body);
    font-size: 15px;
    transition: all .25s;
}
.form-group textarea{resize:vertical;min-height:120px;font-family:var(--ff-body)}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
    outline: none;
    border-color: var(--rojo-claro);
    background: rgba(255,255,255,.08);
}
.form-group select option{background:var(--azul-osc);color:white}
.form-card .btn{width:100%;justify-content:center;margin-top:10px}
.form-msg{
    margin-top: 16px;
    padding: 14px;
    background: rgba(76,175,80,.15);
    border: 1px solid rgba(76,175,80,.4);
    color: #b8f5b8;
    font-size: 14px;
    display: none;
}
.form-msg.show{display:block}

/* ============== FOOTER ============== */
footer{
    background: var(--negro);
    color: #aab0cc;
    padding: 80px 0 0;
    position:relative;
    overflow:hidden;
}
.foot-grid{
    display:grid;grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 50px;margin-bottom: 60px;
}
.foot-brand img{
    height: 64px;
    width: auto;
    background: white;
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 22px;
}
.foot-brand p{font-size:14px;line-height:1.7;margin-bottom:24px;max-width:340px}
.foot-social{display:flex;gap:12px}
.foot-social a{
    width:42px;height:42px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    display:grid;place-items:center;
    transition: all .25s;
}
.foot-social a:hover{background:var(--rojo);border-color:var(--rojo);color:white;transform:translateY(-3px)}

.foot-col h5{
    font-family: var(--ff-display);
    color: white;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: relative;
}
.foot-col h5::before{
    content:'';position:absolute;bottom:-1px;left:0;
    width:40px;height:2px;background:var(--rojo);
}
.foot-col li{margin-bottom: 12px;font-size:14px}
.foot-col li a:hover{color:var(--rojo-claro)}
.foot-col li i{color:var(--rojo);margin-right:8px;font-size:11px}

.foot-bot{
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 26px 0;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
    font-size: 13px;
}
.foot-bot a:hover{color:var(--rojo-claro)}

/* ============== WhatsApp FAB ============== */
.wapp{
    position:fixed;bottom:24px;right:24px;
    width:60px;height:60px;
    background: #25D366;
    color:white;
    border-radius:50%;
    display:grid;place-items:center;
    font-size:28px;
    box-shadow: 0 8px 24px rgba(37,211,102,.4);
    z-index: 90;
    animation: bob 3s ease-in-out infinite;
    transition: transform .25s;
}
.wapp:hover{transform: scale(1.1)}
@keyframes bob{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-6px)}
}

/* ============== REVEAL ANIMATIONS ============== */
.reveal{
    opacity: 0;
    transform: translateY(30px);
    transition: all .8s cubic-bezier(.2,.6,.2,1);
}
.reveal.in{opacity:1;transform:translateY(0)}

/* ============== RESPONSIVE ============== */

/* Tablet & Mobile genérico (≤ 980px) */
@media (max-width: 980px){
    .nav-links{display:none}
    .nav-links.open{
        display:flex;
        position:absolute;
        top:80px;left:0;right:0;
        flex-direction:column;
        background:white;
        padding:24px;
        gap:16px;
        box-shadow:0 10px 30px rgba(0,0,0,.1);
    }
    .burger{display:block}
    .hero-content{grid-template-columns: 1fr; gap: 40px}
    .hero-visual{height: 480px; max-width: 400px; margin: 0 auto}
    .about-grid{grid-template-columns:1fr;gap:60px}
    .about-img-stack{height: 480px; max-width: 500px; margin: 0 auto}
    .awards-grid{grid-template-columns:1fr}
    .awards-gallery{grid-template-columns: repeat(2,1fr)}
    .contact-grid{grid-template-columns:1fr;gap:50px}
    .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
    .projects-grid > *{grid-column: span 12 !important}
    .project{min-height: 260px}
}

/* Móvil estándar (≤ 600px) */
@media (max-width: 600px){
    /* Wrap más estrecho con menos padding */
    .wrap{padding: 0 18px}

    section{padding: 70px 0}

    /* HERO - el título ya no se desborda */
    .hero{padding: 50px 0 40px;min-height:auto}
    .hero h1{
        font-size: clamp(36px, 11vw, 56px) !important;
        letter-spacing: -1px;
        line-height: .95;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    .hero p.lead{font-size: 16px}
    /* Hero badge - ajustado para no cortarse */
    .hero-badge{
        font-size: 10.5px;
        letter-spacing: 1px;
        padding: 7px 12px;
        max-width: 100%;
        white-space: normal;
        line-height: 1.3;
    }

    /* Botones del hero - apilados y de ancho completo */
    .hero-cta{flex-direction: column; gap: 12px; width: 100%}
    .hero-cta .btn{
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 13px;
    }

    /* Stats del hero en 3 columnas */
    .hero-stats{
        grid-template-columns: repeat(3,1fr);
        gap: 16px;
        margin-top: 40px;
        padding-top: 30px;
    }
    .hero-stats .num{font-size: 28px}
    .hero-stats .lab{font-size: 9.5px; letter-spacing: 1px}

    /* Hero visual - apilar las 3 tarjetas verticalmente sin absolute */
    .hero-visual{
        height: auto !important;
        max-width: 100% !important;
        margin: 30px 0 0 !important;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .hero-card{
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        transform: none !important;
        padding: 20px !important;
    }
    .hero-card.c1{order: 1}
    .hero-card.c2{order: 2}
    .hero-card.c3{order: 3}
    .hero-card.c1 h4{font-size: 17px}
    .hero-card.c2 h3{font-size: 22px}
    .hero-card.c2 .seal{
        top: -16px; right: -8px;
        width: 56px; height: 56px;
        font-size: 10px;
    }
    .hero-card.c3 .score{font-size: 34px}

    /* Ocultar decoraciones hexagonales en móvil */
    .hex-deco{display: none}

    /* Topbar - solo lo esencial */
    .topbar .wrap{justify-content:center; gap: 6px}
    .topbar .left{text-align:center; font-size: 12px}
    .topbar .left span{display:block;margin: 3px 0}
    .topbar .right{margin-top: 6px}

    /* Logo nav un poco más chico */
    .logo-link img{height: 40px}

    /* Secciones */
    .section-head{margin-bottom: 50px}
    .section-head h2{font-size: clamp(30px, 8vw, 44px) !important}
    .section-head p{font-size: 16px}

    /* Nosotros - cambiar de absolute a flex apilado en móvil */
    .about-img-stack{
        position: static;
        height: auto;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .about-img-stack .blk{
        width: 100% !important;
        height: auto !important;
    }
    .about-img-stack .blk-1{
        position: relative !important;
        height: 280px !important;
        top: auto;
        left: auto;
        box-shadow: 0 12px 30px rgba(14,31,92,.2);
    }
    .about-img-stack .blk-1 img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .about-img-stack .blk-1 .label{
        bottom: 18px;
        left: 18px;
    }
    .about-img-stack .blk-1 .label strong{font-size: 18px}
    .about-img-stack .blk-2{
        position: relative !important;
        bottom: auto;
        right: auto;
        padding: 28px;
        box-shadow: -8px 8px 0 var(--azul-osc);
        margin-left: 8px;
        margin-right: -8px;
    }
    .about-img-stack .blk-2 .yr{font-size: 64px}
    .about-img-stack .blk-2 .yr-lbl{font-size: 12px; letter-spacing: 2px}

    .about-text h3{font-size: 28px}
    .about-pillars{grid-template-columns:1fr; gap: 12px}

    /* Servicios */
    .service{padding: 32px 24px}
    .service h3{font-size: 19px}

    /* Proyectos */
    .projects-filter{gap: 0}
    .filter-btn{padding: 12px 14px; font-size: 12px; letter-spacing: 1px}
    .project{min-height: 240px}
    .project-content{padding: 20px}
    .pj-title{font-size: 18px !important}
    .project.span-12 .pj-title{font-size: 22px !important}

    /* Premios */
    .awards-gallery{grid-template-columns: 1fr; gap: 12px}
    .award-photo{height: 200px}
    .award{padding: 28px}
    .award h3{font-size: 22px}
    .award-medal{width: 64px; height: 64px; font-size: 26px}

    /* CTA Band */
    .cta-band{padding: 50px 0}
    .cta-band h2{font-size: clamp(26px, 7vw, 38px)}
    .cta-band .btn{padding: 16px 28px; font-size: 13px}

    /* Contacto */
    .contact-info h3{font-size: 28px}
    .contact-item{padding: 18px 0; gap: 14px}
    .contact-item .ic{width: 42px; height: 42px; font-size: 16px}
    .contact-item .val{font-size: 15px}
    .form-card{padding: 28px 22px}
    .form-card h3{font-size: 24px}
    .form-row{grid-template-columns:1fr;gap: 14px;margin-bottom: 14px}
    .form-group.full{grid-column: span 1}

    /* Footer */
    .foot-grid{grid-template-columns:1fr;gap: 36px}
    .foot-brand img{height: 54px}
    .foot-bot{flex-direction: column; text-align: center}

    /* Ticker */
    .ticker{font-size:15px; padding: 14px 0; letter-spacing: 1px}

    /* WhatsApp más chico en móvil */
    .wapp{
        width: 52px; height: 52px;
        font-size: 24px;
        bottom: 18px; right: 18px;
    }
}

/* Móvil pequeño (≤ 380px) */
@media (max-width: 380px){
    .wrap{padding: 0 14px}
    .hero h1{font-size: 32px !important}
    .section-head h2{font-size: 28px !important}
    .logo-link img{height: 36px}
    .hero-visual{height: 380px; max-width: 280px}
    .hero-card.c1, .hero-card.c2, .hero-card.c3{width: 200px}
}