:root{--rojo:#d92332;--fondo:#101010;--texto:#f5f2ed;--gris:#bbb8b5}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:Arial,Helvetica,sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.contenedor{width:min(1180px,90%);margin:auto}
header{position:sticky;top:0;z-index:10;background:#101010f5;border-bottom:1px solid #333}
.barra{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0}
.marca{display:flex;align-items:center;gap:12px}
.marca img{width:68px;height:68px;object-fit:contain}
.marca strong{display:block;font-size:14px;letter-spacing:1px}
.marca small{display:block;font-size:10px;color:var(--gris);letter-spacing:2px}
nav{display:flex;gap:22px;flex-wrap:wrap}
nav a{font-size:13px;font-weight:bold}
nav a:hover{color:#ff6571}
a:focus-visible{outline:3px solid white;outline-offset:5px}
.hero{position:relative;isolation:isolate;min-height:680px;display:flex;align-items:center}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000e,#0009 55%,#0004),linear-gradient(0deg,#101010,transparent 40%);z-index:-1}
.hero .contenedor{padding:90px 0}
.etiqueta{color:#ff6571;font-size:12px;font-weight:bold;letter-spacing:3px;text-transform:uppercase;margin:0 0 18px}
h1,h2,h3{line-height:1.08;margin-top:0}
h1{font-size:clamp(50px,8vw,100px);letter-spacing:-2px;margin-bottom:25px}
h1 span{color:#f13c4b}
h2{font-size:clamp(32px,4.5vw,55px);letter-spacing:-1px;margin-bottom:25px}
h3{font-size:23px;margin:20px 0 15px}
p{margin-top:0}
.intro{color:var(--gris);font-size:18px;max-width:640px}
.hero .intro{color:#e0deda;max-width:480px}
.acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.boton{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;min-height:50px;background:var(--rojo);border:1px solid var(--rojo);color:white;font-size:13px;font-weight:bold;text-transform:uppercase;letter-spacing:1px}
.boton:hover{background:#a91824}
.secundario{background:transparent;border-color:#888}
.secundario:hover{background:#333}
.franja{padding:22px 0;border-block:1px solid #333}
.valores{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:12px;letter-spacing:2px;font-weight:bold}
.valores span::before{content:"•";color:#f13c4b;margin-right:10px}
.seccion{padding:85px 0}
.nosotros{display:grid;grid-template-columns:1.3fr 1fr;gap:65px;align-items:center}
.emblema{padding:35px;background:#080808;border:1px solid #333}
.emblema img{width:min(300px,100%);margin:auto}
.panel{background:#161616}
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:35px}
.tarjeta{padding:30px;background:#1b1b1b;border:1px solid #333}
.tarjeta p{color:var(--gris);margin-bottom:0}
.numero{font-size:12px;color:#ff6571;font-weight:bold;letter-spacing:2px}
.aviso{background:#202020;border-left:3px solid var(--rojo);padding:20px 25px;margin-top:30px}
.doble{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.doble h2{font-size:clamp(30px,3.5vw,44px)}
.contacto{text-align:center;border-top:1px solid #333;background:radial-gradient(ellipse at top,#321317,#101010 75%)}
.contacto .intro{margin-inline:auto}
.contacto .acciones{justify-content:center}
address{font-style:normal;color:var(--gris)}
footer{border-top:1px solid #333;padding:25px 0}
.pie{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:var(--gris);font-size:12px}
.pie p{margin:0}
@media(max-width:950px){
.barra{flex-wrap:wrap}
nav{width:100%;gap:18px;padding-bottom:6px}
.tarjeta{padding:22px}
.nosotros{gap:30px}
}
@media(max-width:650px){
.marca img{width:52px;height:52px}
nav{gap:12px;justify-content:space-between}
nav a{font-size:11px}
.hero{min-height:620px}
.hero::after{background:linear-gradient(0deg,#101010,#000a 40%)}
.hero .contenedor{padding:65px 0}
.nosotros,.tarjetas,.doble{grid-template-columns:1fr}
.seccion{padding:60px 0}
.emblema{max-width:350px;width:100%;margin:auto}
.valores{justify-content:center;font-size:10px}
.acciones .boton{width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

header .barra {
    min-height: 124px;
    padding-block: 14px;
}
header .marca {
    gap: 18px;
}
header .marca img {
    width: 96px;
    height: 96px;
}
header .marca strong {
    font-size: 20px;
    letter-spacing: 1px;
}
header .marca small {
    font-size: 12px;
    letter-spacing: 2.5px;
}
header nav {
    gap: 26px;
}
header nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 16px;
    font-weight: 700;
}
html {
    scroll-padding-top: 150px;
}
@media (max-width: 1100px) {
    header .barra {
        flex-wrap: wrap;
        gap: 8px;
    }
    header nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 24px;
        padding-bottom: 0;
    }
    html {
        scroll-padding-top: 210px;
    }
}
@media (max-width: 650px) {
    header .barra {
        min-height: auto;
        padding-block: 10px;
    }
    header .marca {
        gap: 12px;
    }
    header .marca img {
        width: 72px;
        height: 72px;
    }
    header .marca strong {
        font-size: 16px;
    }
    header .marca small {
        font-size: 10px;
        letter-spacing: 2px;
    }
    header nav {
        column-gap: 16px;
        row-gap: 0;
    }
    header nav a {
        font-size: 14px;
        min-height: 44px;
    }
    html {
        scroll-padding-top: 205px;
    }
}

.hero > img {
    object-position: center top;
}

.boton, header nav a {
    position: relative;
    transform-origin: center;
    -webkit-tap-highlight-color: transparent;
}
.boton {
    transition: background-color .2s;
}
.punch-activo {
    animation: golpe-box .4s ease-out !important;
}
@keyframes golpe-box {
    0%   { transform: translate(0,0) scale(1); }
    20%  { transform: translate(6px,5px) scale(.84,.90); }
    48%  { transform: translate(-3px,-2px) scale(1.08,1.04); }
    72%  { transform: translate(1px,1px) scale(.97); }
    100% { transform: translate(0,0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .punch-activo {
        animation: none !important;
        background-color: #f13c4b !important;
        color: white !important;
        box-shadow: inset 0 0 0 3px white;
    }
}

.perfil-cesar {
    padding-block: 0 75px;
}
.perfil-cesar .ficha {
    padding: clamp(22px,4vw,45px);
    background: #181818;
    border: 1px solid #393939;
    border-top: 3px solid #c4a34c;
}
.perfil-cesar .etiqueta {
    color: #e0bf69;
}
.perfil-cesar h2 {
    font-size: clamp(30px,4vw,48px);
}
.perfil-cesar .cargo {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
}
.perfil-cesar figure {
    margin: 30px auto 0;
    max-width: 1010px;
}
.perfil-cesar .credencial {
    display: block;
    width: 100%;
    height: auto;
}
.perfil-cesar figcaption {
    margin-top: 12px;
    color: #bbb8b5;
    font-size: 13px;
    line-height: 1.6;
}
.perfil-cesar .acciones {
    margin-top: 24px;
}

:root {
    --rojo: #f0142f;
}
.hero h1 span {
    color: #ff2442;
}
.etiqueta,
.numero,
.valores span::before,
header nav a:hover {
    color: #ff4058;
}
.boton:hover {
    background-color: #cc1028;
}
.boton.secundario:hover,
.boton.boton-secundario:hover {
    background-color: rgba(240,20,47,.18);
    border-color: #ff4058;
}
.perfil-cesar .etiqueta {
    color: #e0bf69;
}