:root{
    --navy:#1f2557;
    --red:#e11b22;
    --bg:#fbf6f6;
    --line: rgba(0,0,0,.35);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden;font-family:'Inter', sans-serif; background:var(--bg);color:var(--navy); }
img, video, iframe { max-width: 100%; height: auto; display: block; }

.navbar-ocr{
        display:flex;
        align-items:center;
        justify-content:space-between;
        min-height:70px;
        gap:14px;
        flex-wrap:wrap;         
    }

    .brand-ocr{
        display:flex;
        align-items:center;
        height:70px;
        text-decoration:none;
        padding-left:12px;           /* desktop suave */
    }

    .brand-ocr__logo{
        height:55px;
        width:auto;
        display:block;
    }

    /* botón hamburguesa */
    .nav-toggle{
        display:none;                /* desktop oculto */
        border:0;
        background:transparent;
        font-size:28px;
        padding:8px 10px;
        line-height:1;
    }
    @media (max-width: 992px){
        .brand-ocr{ padding-left:0; }  /* ✅ en móvil sin empujar */

        .nav-toggle{ display:inline-flex; }

        .nav-ocr{
            display:none;              /* ✅ oculto por defecto */
            width:100%;
            flex-direction:column;
            gap:12px;
            padding:12px 0 6px;
        }

        body.menu-open .nav-ocr{
            display:flex;              /* ✅ se abre */
        }

        /* botones en móvil ocupan ancho */
        .nav-ocr .btn-ocr{
            width:100%;
            text-align:center;
        }
    }

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

.ocr-line{ height:1px; background:var(--line); }
.ocr-line--full{ width:100%; margin:0 0 34px; }
.ocr-line--short{ width:340px; margin:14px 0 22px; }

.ocr-section{ padding:70px 0; }
.ocr-section--top{ padding:70px 0 40px; }
.ocr-section--benefits{ padding:20px 0 70px; }
.ocr-section--allies{ padding:70px 0; }
.ocr-section--commit{ padding:70px 0 30px; }

.ocr-block-center{ width:min(520px, 100%); margin:0 auto; text-align:center; }
.ocr-p-small{ font-size:13px; line-height:1.6; width:min(240px, 100%); margin:18px auto 0; }

/* TITULOS */
.ocr-h2{
    color:var(--red);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.02em;
    font-size:18px;
    text-align:center;
    margin:0;
}
.ocr-h2-red{
    color:var(--red);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.02em;
    font-size:18px;
    margin:0;
}
.ocr-h1-red{
    color:var(--red);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.02em;
    font-size:72px;   /* COMO LA WEB */
    line-height:1;
    margin:0 0 18px;
}

/* HERO */
.ocr-hero{
    position:relative;
    padding:70px 0 55px;
    text-align:center;
}
.ocr-hero-title{
    margin:0;
    font-weight:400;
    font-size:64px;
    line-height:1.05;
    letter-spacing:-.02em;
    text-align: center;
}
.ocr-hero-box{
    display:inline-block;
    border:1px solid black;
    border-right: none;
    padding:6px 16px;
}
.ocr-hero-highlight{
    display:inline-block;
    background:var(--red);
    color:#fff;
    padding:10px 22px;
    margin-top:10px;
}
.ocr-hero-sub{
    margin:10px 0 0;
    font-size:clamp(1.25rem,2vw + 0.5rem,2rem);
}

.ocr-hero-lines{
    position:absolute;
    top:135px;
    height:1px;
    width:240px;
    background: black;
}
.ocr-hero-lines--left{ left:8%; }
.ocr-hero-lines--right{ right:8%; }

.ocr-hero-cross{
    position:absolute;
    left:50%;
    top:375px;
    width:1px;
    height:115px;
    background: black;
    transform:translateX(-50%);
}
.ocr-hero-corner{
    position:absolute;
    width:230px;
    height:75px;
    border-bottom:1px solid black;
}
.ocr-hero-corner--left{
    left:10%;
    top:220px;
    border-right:1px solid black;
}
.ocr-hero-corner--right{
    right:10%;
    top:330px;
    border-left:1px solid black;
}

.ocr-hero-certs{
    margin-top:48px;

    gap:26px;
    width:min(980px, 100%);
    margin-inline:auto;
}
.ocr-hero-certs-label{ font-size:14px; opacity:.9; }
.ocr-hero-certs-row{ align-items:center;display:flex;justify-content:flex-start; gap:18px; flex-wrap:wrap; }

/* Placeholders logos */
.ocr-ph-logo{
    height:34px; width:95px;
    border:1px dashed rgba(31,37,87,.25);
    border-radius:4px;
    background:rgba(255,255,255,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    opacity:.75;
}
.ocr-ph-logo.wide{ width:140px; }

/* Foto grande placeholder */
.ocr-photo{
    height:430px;
    background:#dcdcdc;
    border-top:1px solid rgba(0,0,0,.05);
    border-bottom:1px solid rgba(0,0,0,.05);
}

/* STATS */
.ocr-stats{
    background:var(--red);
    padding:10.5rem 0;
}
.ocr-stats-box{
    width:100%;
    margin:0 auto;
}
.ocr-stats-pill{
    background:#fff;
    border:1px solid rgba(0,0,0,.10);
    padding:18px 18px;
    text-align:center;
    font-size:clamp(2.25rem,4vw + 1rem,4.5rem);
    line-height:1.15;
}
.ocr-stats-pill + .ocr-stats-pill{ margin-top:12px; }
.ocr-stats-pill b{ font-weight:800; }

/* BENEFICIOS (1:1) */
.ocr-benefits{
    display:flex;
    flex-direction:column;
    gap:34px;
    width:100%;
}
.ocr-benefit{
    background:transparent;
    border:1px solid rgba(31,37,87,.55);
    padding:28px 36px;
    text-align:center;
    font-size:38px;
    color:var(--navy);
    font-weight:400;
}

/* ROJO SERVICIOS */
.ocr-red{
    background:var(--red);
    color:#fff;
    padding:70px 0;
}
.ocr-red-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    width:min(900px, 100%);
    margin:0 auto;
}
.ocr-red-title{
    margin:0;
    font-size:26px;
    font-weight:900;
    text-transform:uppercase;
}
.ocr-red-sub{
    font-size:10px;
    opacity:.85;
    padding-bottom:4px;
}

.ocr-services-grid{
    margin-top:30px;
    width:min(900px, 100%);
    margin-inline:auto;
    display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap:70px;
    row-gap:18px;
}
.ocr-sv{
    display:flex;
    gap:14px;
    font-family: 'Inter', sans-serif;
}

.ocr-sv-n{ font-weight:900; font-size:20px; min-width:36px; }
.ocr-sv-t{ font-size:12px; line-height:1.2; }

.ocr-red-btnwrap{ display:flex; justify-content:center; margin-top:34px; }
.ocr-red-btn{
    background:#fff;
    color:var(--red);
    text-decoration:none;
    padding:10px 16px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

/* ALIADOS */
.ocr-allies-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
}
.ocr-allies-mini{ font-size:10px; opacity:.65; }

.ocr-allies-row{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    align-items:center;
    margin:18px 0;
}

/* AZUL SECTORES */
.ocr-blue{
    background:var(--navy);
    color:#fff;
    padding:70px 0;
}
.ocr-blue-title{
    text-align:center;
    font-weight:700;
    text-transform:uppercase;
    font-size:18px;
}
.ocr-sectors-grid{
    margin-top:35px;
    width:min(760px, 100%);
    margin-inline:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:70px;
    row-gap:16px;
}
.ocr-sec{ display:flex; gap:14px; }
.ocr-sec-n{ font-weight:900; font-size:20px; min-width:36px; }
.ocr-sec-t{ font-size:12px; }

/* COMPROMISO + EQUIPO */
.ocr-commit-text{
    width:min(320px, 100%);
    margin-top:16px;
    font-size:11px;
    line-height:1.7;
    opacity:.92;
}
.ocr-mt-56{ margin-top:56px; }

.ocr-team{
    width:min(420px, 100%);
    margin-top:18px;
    display:flex;
    flex-direction:column;
    gap:22px;
}
.ocr-photo-ph{
    height:220px;
    background:#dcdcdc;
}

.ocr-footer-min{
    padding:35px 0 0;
    text-align:center;
    font-size:10px;
    opacity:.85;
}

/* Responsive */
@media (max-width: 992px){
    .ocr-hero-title{ font-size:44px; }
    .ocr-hero-lines, .ocr-hero-cross, .ocr-hero-corner{ display:none; }
    .ocr-h1-red{ font-size:44px; }
    .ocr-benefit{ font-size:20px; padding:18px 16px; }
    .ocr-services-grid, .ocr-sectors-grid{ grid-template-columns:1fr; }
    .ocr-red-head{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ===== WhatsApp flotante ===== */
.wa-float{
    position: fixed;
    right: 26px;
    bottom: 26px;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 999px;
    background: var(--navy);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    z-index: 9999;
    text-decoration: none;
}
.wa-float:hover{
    background: #363b95;
}
.wa-float svg{
    width: 50px;
    height: 50px;
    display: block;
    fill: #fff;
}

@media (max-width: 768px){
    .wa-float{
        right: 16px;
        bottom: 16px;
        width: 56px;
        height: 56px;
    }
    .wa-float svg{
        width: 30px;
        height: 30px;
    }
}

/* ===== FOOTER OCR (como referencia) ===== */
.ocr-footer{
    background: var(--bg);
    padding: 40px 0 18px;
}

.ocr-footer-topline{
    height: 1px;
    background: rgba(0,0,0,.35);
    margin: 0 0 42px;
}

.ocr-footer-grid{
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr;
    grid-template-areas:
    "brand  .      ."
    "col1   col2   col3";
    gap: 0 80px;
    align-items: start;
}

.ocr-footer-brand-row{
    grid-area: brand;
    margin-bottom: 42px;
}

.ocr-footer-col:nth-of-type(2){ grid-area: col1; }
.ocr-footer-col:nth-of-type(3){ grid-area: col2; }
.ocr-footer-col:nth-of-type(4){ grid-area: col3; }

.ocr-footer-brand{
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    align-items: end;            /* "Group" queda abajo */
    margin-bottom: 42px;
}

.ocr-footer-logo-space{
    width: 150px;               /* espacio del logo real */
    height: 58px;
    /* placeholder invisible (solo mantiene espacio) */
}

.ocr-footer-group{
    font-size: 12px;
    opacity: .65;
    transform: translateY(6px); /* baja un poquito como en la captura */
}

.ocr-footer-title{
    font-weight: 800;
    font-size: 18px;
    margin: 0 0 18px;
}

.ocr-footer-text, .ocr-footer-text a{
    font-size: 20px;
    line-height: 1.55;
    color: var(--navy);
    text-decoration: none;
}

.ocr-footer-links{
    display:flex;
    flex-direction:column;
    gap: 14px;
}

.ocr-footer-link{
    color: var(--navy);
    text-decoration: none;
    font-size: 18px;
}

.ocr-footer-link:hover{
    text-decoration: underline;
}

.ocr-footer-link.strong{
    font-weight: 800;
}

.ocr-mt-28{ margin-top: 28px; }

.ocr-footer-bottom{
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    font-size: 14px;
    opacity: .8;
}

/* Responsive */
@media (max-width: 992px){
    .ocr-footer-grid{
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .ocr-footer-text{ font-size: 16px; }
    .ocr-footer-link{ font-size: 16px; }
}

/* ===== SERVICIOS (bloque rojo) - tamaño 1:1 ===== */
.ocr-red{
    background: var(--red);
    color:#fff;
    padding: 70px 0 90px;
}

/* Header: título grande + subtítulo derecha */
.ocr-red-head{
    width: 100%;
    margin: 0 auto;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 24px;
    position: relative;
    padding-bottom: 30px;
}

/* línea larga debajo del título (como la web) */
.ocr-red-title::after{
    content:"";
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height:1px;
    background: rgba(255,255,255,.8);
}

/* SERVICIOS gigante */
.ocr-red-title{
    margin:0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 82px;      /* 👈 clave */
    line-height: 1;
}

/* Subtítulo arriba derecha + línea corta debajo */
.ocr-red-sub{
    margin-top: 16px;
    font-size: 14px;
    opacity: .95;
    position: relative;
    padding-bottom: 10px;
    white-space: nowrap;
}

/* Grid servicios: más aire */
.ocr-services-grid{
    margin-top: 55px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 110px;
    row-gap: 44px;
    width: 100%;
}

/* Cada fila: número enorme + texto grande */
.ocr-sv{
    display:flex;
    align-items: center;
    gap: 26px;
}

.ocr-sv-n{
    font-weight: 700;
    font-size: 92px;      /* 👈 número gigante */
    line-height: 1;
    min-width: 120px;
}

.ocr-sv-t{
    font-size: 44px;      /* 👈 texto grande */
    line-height: 1.1;
    font-weight: 500;
}

/* Botón centrado más abajo */
.ocr-red-btnwrap{
    display:flex;
    justify-content:center;
    margin-top: 70px;
}

.ocr-red-btn{
    background:#fff;
    color: var(--red);
    text-decoration:none;
    padding: 1.5rem;
    font-size: clamp(1rem,1.2vw + .5rem,1.25rem);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Responsive */
@media (max-width: 1200px){
    .ocr-red-title{ font-size: 64px; }
    .ocr-sv-n{ font-size: 74px; min-width: 95px; }
    .ocr-sv-t{ font-size: 34px; }
}

@media (max-width: 992px){
    .ocr-red-head{ flex-direction: column; }
    .ocr-red-sub{ white-space: normal; }
    .ocr-services-grid{ grid-template-columns: 1fr; column-gap: 0; }
    .ocr-red-title{ font-size: 52px; }
    .ocr-sv-n{ font-size: 64px; }
    .ocr-sv-t{ font-size: 28px; }
}


/* ===== SECTORES (bloque azul) - tamaño 1:1 ===== */
.ocr-blue{
    background: var(--navy);
    color:#fff;
    padding: 70px 0 90px;
}

/* Título gigante alineado a la izquierda (no centrado) */
.ocr-blue-title{
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 82px;       /* 👈 clave */
    line-height: 1;
    margin: 0;
    position: relative;
    padding-bottom: 26px;
}

/* línea larga debajo del título */
.ocr-blue-title::after{
    content:"";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255,255,255,.8);
}

/* Grid más aire y tamaño grande */
.ocr-sectors-grid{
    margin-top: 60px;
    width: 100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 140px;
    row-gap: 44px;
}

/* Cada fila: número enorme + texto grande */
.ocr-sec{
    display:flex;
    align-items: center;
    gap: 26px;
}

.ocr-sec-n{
    font-weight: 700;
    font-size: 92px;      /* 👈 número gigante */
    line-height: 1;
    min-width: 120px;
}

.ocr-sec-t{
    font-size: 44px;      /* 👈 texto grande */
    line-height: 1.1;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 1200px){
    .ocr-blue-title{ font-size: 64px; }
    .ocr-sec-n{ font-size: 74px; min-width: 95px; }
    .ocr-sec-t{ font-size: 34px; }
    .ocr-sectors-grid{ column-gap: 80px; }
}

@media (max-width: 992px){
    .ocr-blue-title{ font-size: 52px; }
    .ocr-sectors-grid{ grid-template-columns: 1fr; column-gap: 0; }
    .ocr-sec-n{ font-size: 64px; min-width: 85px; }
    .ocr-sec-t{ font-size: 28px; }
}
/* ===== COMPROMISO SOCIAL (1:1) ===== */

/* tu sección actual usa .ocr-section--commit, .ocr-h2-red, .ocr-commit-text */
.ocr-section--commit{
    padding: 80px 0 60px;
}

/* "COMPROMISO SOCIAL" gigante y a la izquierda */
.ocr-section--commit .ocr-h2-red{
    font-size: 82px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0 0 24px;
    text-align: left; /* 👈 clave */
}

/* línea larga debajo del título */
.ocr-section--commit .ocr-line--short{
    width: 100%;
    margin: 0 0 40px;
    background: rgba(0,0,0,.35);
}

/* texto grande como la web */
.ocr-commit-text{
    width: 100%;          /* 👈 que no quede en cajita */
    max-width: 1150px;    /* controla ancho real */
    margin: 0;            /* alineado a la izquierda */
    font-size: 40px;      /* 👈 clave */
    line-height: 1.35;
    opacity: 1;
}

/* ===== EQUIPO (ajuste para que no quede pegado) ===== */
.ocr-mt-56{ margin-top: 90px; }

@media (max-width: 1200px){
    .ocr-section--commit .ocr-h2-red{ font-size: 64px; }
    .ocr-commit-text{ font-size: 32px; }
}

@media (max-width: 992px){
    .ocr-section--commit .ocr-h2-red{ font-size: 52px; }
    .ocr-commit-text{ font-size: 24px; }
}
.ocr-commit-text{
    margin-bottom: 120px; /* 👈 ESTE es el margen que ves en la web */
}
/* === EQUIPO === */
.ocr-h2-red.ocr-mt-56{
    margin-top: 0;              /* evita doble margen */
    margin-bottom: 24px;
    font-size: 82px;            /* tamaño real */
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}
.ocr-h2-red + .ocr-line{
    width: 100%;
    margin-bottom: 36px;
}

/* ===== ALIADOS al mismo tamaño que COMPROMISO / EQUIPO ===== */

/* Título ALIADOS = 82px (igual que .ocr-h2-red gigante) */
.ocr-allies-head .ocr-h2,
.allies .title,
.ocr-allies-title{
    font-size: 82px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-align: left;
    margin: 0 0 18px;
    color: var(--red);
}

/* Línea debajo de ALIADOS = larga (100%) */
.allies .hrline,
.ocr-allies .ocr-line--short,
.ocr-allies-head + .ocr-line{
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,.35);
    margin: 0 0 40px;
}

/* Subtexto (Clientes que confían...) más visible */
.ocr-allies-mini{
    font-size: 14px;
    opacity: .9;
}

/* Responsive */
@media (max-width: 1200px){
    .ocr-allies-head .ocr-h2,
    .allies .title,
    .ocr-allies-title{
        font-size: 64px;
    }
}

@media (max-width: 992px){
    .ocr-allies-head .ocr-h2,
    .allies .title,
    .ocr-allies-title{
        font-size: 52px;
    }
}

/* ===== ALIADOS (mismo tamaño que COMPROMISO / EQUIPO) ===== */
.ocr-section--allies{
    padding: 90px 0; /* un poco más de aire como la web */
}

/* Título igual a compromiso/equipo */
.ocr-section--allies .ocr-h2-red{
    font-size: 82px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-align: left;
    margin: 0 0 18px;
}

/* Alineación del header: título izquierda, mini derecha */
.ocr-section--allies .ocr-allies-head{
    display:flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

/* Mini texto más visible (como referencia) */
.ocr-section--allies .ocr-allies-mini{
    font-size: 14px;
    opacity: .9;
    margin-top: 18px;
    white-space: nowrap;
}

/* Línea larga (no corta) debajo de ALIADOS y entre filas */
.ocr-section--allies .ocr-line--short{
    width: 100%;
    margin: 0 0 45px;
    background: rgba(0,0,0,.35);
}

/* Espaciado entre filas de logos */
.ocr-section--allies .ocr-allies-row{
    gap: 28px;
    margin: 26px 0;
}

/* (Opcional) logos placeholder más grandes */
.ocr-section--allies .ocr-ph-logo.wide{
    width: 170px;
    height: 46px;
}

/* Responsive */
@media (max-width: 1200px){
    .ocr-section--allies .ocr-h2-red{ font-size: 64px; }
}
@media (max-width: 992px){
    .ocr-section--allies .ocr-h2-red{ font-size: 52px; }
    .ocr-section--allies .ocr-allies-head{ flex-direction: column; }
    .ocr-section--allies .ocr-allies-mini{ white-space: normal; margin-top: 8px; }
}

/* ===== SERVICIOS DE PRIMERA (mismo tamaño que COMPROMISO / EQUIPO) ===== */
.ocr-section--top{
    padding: 90px 0 40px; /* más aire arriba como la web */
}

/* Quita el centrado de ese bloque */
.ocr-section--top .ocr-block-center{
    width: 100%;
    margin: 0;
    text-align: left;
}

/* Título gigante rojo */
.ocr-section--top .ocr-h2{
    color: var(--red);
    font-size: 82px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0 0 18px;
    text-align: left;
}

/* Línea larga */
.ocr-section--top .ocr-line--short{
    width: 100%;
    margin: 0 0 40px;
    background: rgba(0,0,0,.35);
}

/* Texto grande, ancho real */
.ocr-section--top .ocr-p-small{
    width: 100%;
    max-width: 980px;
    margin: 0;
    font-size: 22px;
    line-height: 1.6;
    opacity: .95;
}

/* Responsive */
@media (max-width: 1200px){
    .ocr-section--top .ocr-h2{ font-size: 64px; }
    .ocr-section--top .ocr-p-small{ font-size: 18px; }
}
@media (max-width: 992px){
    .ocr-section--top .ocr-h2{ font-size: 52px; }
    .ocr-section--top .ocr-p-small{ font-size: 16px; }
}
/* ===== SERVICIOS DE PRIMERA: texto en columna como la web ===== */

/* mantiene el título gigante como ya lo tienes */
.ocr-section--top .ocr-h2{
    font-size: 82px;
}

/* línea larga ok */
.ocr-section--top .ocr-line--short{
    width: 100%;
    margin: 0 0 44px;
}

/* 👇 aquí está la clave: columna angosta + tipografía grande */
.ocr-section--top .ocr-p-small{
    width: 520px;        /* columna angosta como la web */
    max-width: 100%;
    margin: 0;           /* alineado a la izquierda */
    font-size: 40px;     /* grande como la captura */
    line-height: 1.35;   /* aire entre líneas */
    opacity: 1;
}

/* responsive */
@media (max-width: 1200px){
    .ocr-section--top .ocr-h2{ font-size: 64px; }
    .ocr-section--top .ocr-p-small{ font-size: 32px; width: 460px; }
}
@media (max-width: 992px){
    .ocr-section--top .ocr-h2{ font-size: 52px; }
    .ocr-section--top .ocr-p-small{ font-size: 24px; width: 100%; }
}
/* ===== HERO: Certificados por (placeholders del tamaño real) ===== */


/* Texto “Certificados por:” como la web */
.ocr-hero-certs-label{
    font-size: 18px;
    font-weight: 500;
    opacity: 1;
    white-space: nowrap;
    text-align: left;
}

/* fila de logos */
.ocr-hero-certs-row{
    display: flex;
    align-items: center;
    gap: 34px;           /* separación como la web */
}

/* placeholders: ya no “mini”, ahora del tamaño real */
.ocr-hero-certs-row .ocr-ph-logo{
    border: 0;           /* en la web no se ve borde punteado */
    background: transparent;
    display: block;
    width: 150px;        /* tamaño estándar */
    height: 52px;        /* altura real aproximada */
}

/* algunos logos son más anchos (como ISO/Hodelpe) */
.ocr-hero-certs-row .ocr-ph-logo:nth-child(1){ width: 210px; }
.ocr-hero-certs-row .ocr-ph-logo:nth-child(2){ width: 110px; }
.ocr-hero-certs-row .ocr-ph-logo:nth-child(3){ width: 240px; }
.ocr-hero-certs-row .ocr-ph-logo:nth-child(4){ width: 180px; }

/* (opcional) si quieres ver el espacio sin que se vea “LOGO” */
.ocr-hero-certs-row .ocr-ph-logo{
    color: transparent; /* oculta el texto LOGO */
}
/* =========================
   HEADER OCR (igual a la web)
   ========================= */

.site-header{
    background: var(--bg);
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.sticky-top{
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-ocr{
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav-ocr{
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.nav-ocr a{
    color: var(--navy);
    text-decoration: none;
    font-weight: 600;
}

.nav-ocr a:hover{
    opacity: .85;
}

/* Botones del header */
.btn-ocr{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 0; /* en la web son rectos */
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-ocr-outline{
    border-color: var(--red);
    color: var(--red) !important;
    background: transparent;
}

.btn-ocr-solid{
    background: var(--red);
    color: #fff !important;
}

.btn-ocr-solid:hover,
.btn-ocr-outline:hover{
    filter: brightness(.97);
}

/* Espacio reservado para el logo */
.logo-placeholder{
    width: 210px;
    height: 44px;
    display: block;
}

/* Responsive (para que no reviente) */
@media (max-width: 992px){
    .navbar-ocr{ height:auto; padding:18px 0; }
    .nav-ocr{ gap:16px; flex-wrap:wrap; justify-content:flex-end; }
}
/* =========================
   DROPDOWNS HEADER
   ========================= */

.nav-dd{
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-dd-toggle{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-dd-arrow{
    font-size: 10px;
    opacity: .7;
    transform: translateY(-1px);
}

/* menú */
.nav-dd-menu{
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 300px;

    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 6px;
    padding: 16px 0;
    box-shadow: 0 12px 25px rgba(0,0,0,.12);

    display: none;
    z-index: 2000;
}

.nav-dd-menu a{
    display: block;
    padding: 16px 28px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
}

.nav-dd-menu a:hover{
    background: rgba(0,0,0,.03);
}

/* mostrar dropdown al hover */
.nav-dd:hover .nav-dd-menu{
    display: block;
}

/* “zona” para que no se cierre cuando bajas el mouse */
.nav-dd-menu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-18px;
    height:18px;
}
/* =========================
   FIX DROPDOWNS (forzar flotante)
   ========================= */
.site-header,
.navbar-ocr,
.nav-ocr{
    overflow: visible !important;
}

/* el wrapper del dropdown */
.nav-ocr .nav-dd{
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
}

/* el menú */
.nav-ocr .nav-dd-menu{
    position: absolute !important;
    top: calc(100% + 18px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    min-width: 320px !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-radius: 6px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;

    padding: 18px 0 !important;
    display: none !important;
    z-index: 9999 !important;
}

/* items del menú */
.nav-ocr .nav-dd-menu a{
    display: block !important;
    padding: 16px 28px !important;
    text-decoration: none !important;

    font-size: 12px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: var(--navy) !important;
}

.nav-ocr .nav-dd-menu a:hover{
    background: rgba(0,0,0,.04) !important;
}

/* mostrar al hover */
.nav-ocr .nav-dd:hover .nav-dd-menu{
    display: block !important;
}

/* “puente” para que no se cierre al mover el mouse hacia abajo */
.nav-ocr .nav-dd-menu::before{
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -18px;
    height: 18px;
}
/* =========================
   ABOUT / NOSOTROS
========================= */
:root{
    --ocr-red: #E2212A;
    --ocr-navy: #23265B;
    --ocr-bg: #F7F2F2;
    --ocr-line: rgba(35, 38, 91, .35);
    --ocr-white: #ffffff;
}

.ocr-page--about{
    background: var(--ocr-bg);
    color: var(--ocr-navy);
}

.ocr-container{
    width: min(1200px, 92%);
    margin: 0 auto;
}

/* Tipografías base (si ya las tienes, deja solo lo necesario) */
.ocr-h1-red{
    color: var(--ocr-red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ocr-h2-red{
    color: var(--ocr-red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ocr-h2-left{
    text-align: left;
    font-size: clamp(2.25rem,4vw + 1rem,4.5rem);
    margin: 0 0 14px;
}

.ocr-line{
    height: 1px;
    background: var(--ocr-line);
}

.ocr-line--full{ width: 100%; }
.ocr-section{ padding: 52px 0; }

/* HERO */
.ocr-about-hero{ padding-top: 70px; padding-bottom: 30px; }

.ocr-about-hero-frame{
    position: relative;
    min-height: 320px;
    display: grid;
    place-items: center;
}

.ocr-about-title{
    font-size: clamp(3rem, 6vw, 5.2rem);
    margin: 0;
    padding-top: 100px;
}

.ocr-hero-line-left{
    position: absolute;
    left: 0;
    top: 52%;
    width: 30%;
    height: 1px;
    background: var(--ocr-line);
}

.ocr-hero-line-right{
    position: absolute;
    right: 18%;
    top: 10%;
    width: 1px;
    height: 125px;
    background: var(--ocr-line);
}

.ocr-hero-line-bottom{
    position: absolute;
    left: 0;
    bottom: 16px;
    width: 100%;
    height: 1px;
    background: var(--ocr-line);
}

/* INTRO */
.ocr-about-intro{ padding-top: 10px; }
.ocr-about-intro-text{
    text-align: center;
    font-size: clamp(1.4rem, 2.2vw, 2.4rem);
    line-height: 1.35;
    margin: 0 0 26px;
    color: var(--ocr-navy);
}

.ocr-text-red{ color: var(--ocr-red); }
.ocr-text-bold{ font-weight: 800; }

/* PLACEHOLDER IMAGENES */
.ocr-about-photo{ padding: 0; }
.ocr-photo-placeholder{
    width: 100%;
    height: clamp(320px, 46vw, 560px);
    background: #d9d9d9;
    border: 1px solid rgba(0,0,0,.08);
}

/* MISIÓN / VISIÓN */
.ocr-about-mv{ padding-top: 60px; }
.ocr-mv-box{
    margin-top: 26px;
    border: 1px solid rgba(35, 38, 91, .55);
    padding: clamp(22px, 3vw, 42px);
    font-size: clamp(1.6rem, 2.2vw, 2.6rem);
    line-height: 1.25;
    color: var(--ocr-navy);
    background: transparent;
}

/* BLOQUES AZULES CON “ETIQUETA” ARRIBA */
.ocr-about-pillars{
    padding: 0;
    background: var(--ocr-navy);
}

.ocr-about-pillars .ocr-container{
    padding: 60px 0;
}

.ocr-pillar{
    padding: 26px 0;
    border-top: 1px solid rgba(255,255,255,.18);
}

.ocr-pillar:first-child{
    border-top: none;
    padding-top: 0;
}

.ocr-pillar-box{
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,.40);
    padding: 9.125rem;
    background: transparent;
}

/* La etiqueta “COMPROMISO” arriba en la línea */
.ocr-pillar-box::before{
    content: attr(data-label);
    position: absolute;
    top: -14px;
    right: 30px;
    padding: 0 14px;
    height: 28px;
    display: grid;
    place-items: center;
    background: var(--ocr-navy);
    color: var(--ocr-white);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: clamp(1rem,1.2vw + .5rem,1.25rem);
}

/* Texto interno */
.ocr-pillar-text{
    text-align: center;
    color: var(--ocr-white);
    font-size: clamp(1.75rem,2.5vw + 1rem,2.5rem);
    line-height: 1.35;
}

/* Responsive */
@media (max-width: 768px){
    .ocr-hero-line-left{ width: 24%; }
    .ocr-hero-line-right{ right: 8%; height: 70px; }
    .ocr-pillar-box::before{ right: 18px; font-size: 13px; }
}
  .footer-brand{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        margin-bottom:20px;
        min-height: 65px;   /* ✅ evita que lo aplaste */
    }
    .footer-logo{
        height: 55px;
        width: auto;
        max-width: 100%;
        display:block;
    }

    /* 📱 Móvil */
    @media (max-width: 576px){
        .footer-brand{
            justify-content:center;
            min-height: 70px;
        }

        .footer-logo{
            height: auto;          /* ✅ evita aplastado */
            width: min(220px, 80vw); /* ✅ tamaño correcto */
            max-height: 70px;      /* ✅ límite */
        }
    }

    /* Desktop: pantalla completa */
    @media (min-width: 769px){
        .hero-full{
            min-height: 100vh;
        }
        .hero-full img{
            width: 100%;
            height: 100vh;
            object-fit: cover;
            object-position: center 30%;
            display: block;
        }
    }

    /* Móvil: fuerza un banner horizontal estable */
    @media (max-width: 768px){
        .hero-full{
            aspect-ratio: 16 / 9;   /* ✅ se verá como tu segunda imagen */
            height: auto;
        }
        .hero-full img{
            width: 100%;
            height: 100%;
            object-fit: cover;      /* llena sin deformar */
            object-position: center;
            display: block;
        }
    }
    /* =========================
   FOOTER RESPONSIVE (apilado móvil)
   ========================= */

    /* Desktop: 3 columnas que se acomodan solas */
    .ocr-footer .ocr-footer-grid{
        display: flex;
        flex-wrap: wrap;
        gap: 28px 34px;
        align-items: flex-start;
    }

    /* Logo arriba ocupando todo el ancho */
    .ocr-footer .footer-brand{
        flex: 0 0 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 65px;
    }

    .ocr-footer .footer-logo{
        height: 55px;
        width: auto;
        max-width: 100%;
        display: block;
    }

    /* Columnas */
    .ocr-footer .ocr-footer-col{
        flex: 1 1 240px;   /* 3 columnas en desktop */
        min-width: 220px;
    }

    /* 📱 Móvil: apilar en 1 columna */
    @media (max-width: 768px){
        .ocr-footer .footer-brand{
            justify-content: center;
        }

        .ocr-footer .ocr-footer-col{
            flex: 0 0 100%;                 /* ✅ apilado real */
            min-width: 0;
            border-top: 1px solid rgba(0,0,0,.12);
            padding: 12px 0;
        }

        .ocr-footer .ocr-footer-col:first-of-type{
            border-top: 0;
            padding-top: 0;
        }

        .ocr-footer .ocr-footer-bottom{
            text-align: center;
            padding: 0 12px;
            line-height: 1.4;
        }
    }