/* ========================================= */
/* HERO NUEVO – ESTRUCTURA GENERAL */
/* ========================================= */

.hero-new {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* ========================================= */
/* HERO – FONDO SLIDER CSS LIMPIO (2 FOTOS)  */
/* ESTABLE – SIN CORTES – SIN JS             */
/* ========================================= */

.hero-new__bg {
    position: absolute;
    inset: 0;
    z-index: 1;

    /* Imagen base (siempre visible) */
    background-image: url('/img/hero/oficina.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

/* Imagen secundaria con fade */
.hero-new__bg::before {
    content: '';
    position: absolute;
    inset: 0;

    background-image: url('/img/hero/oficina-2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;
    animation: heroFadeOverlay 16s ease-in-out infinite;
}

/* Degradado superior */
.hero-new::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(
        to right,
        rgba(10, 45, 80, 0.78) 0%,
        rgba(10, 45, 80, 0.75) 45%,
        rgba(255, 255, 255, 0.18) 100%
    );

    pointer-events: none;
}

/* ========================================= */
/* ANIMACIÓN ÚNICA (SIN RESET VISIBLE)       */
/* ========================================= */

@keyframes heroFadeOverlay {
    0%   { opacity: 0; }
    25%  { opacity: 0; }
    50%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}



/* ========================================= */
/* CONTENEDOR PRINCIPAL */
/* ========================================= */

.hero-new__container {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

    display: grid;
    grid-template-columns: 1fr 1.35fr; /* 🔥 MÁS ANCHO AL FORM */
    align-items: center;
    gap: 40px;
}

/* ========================================= */
/* BLOQUE TEXTO */
/* ========================================= */

.hero-new__content {
    color: #ffffff;
    max-width: 560px;
    margin-top: 105px;
}

.hero-new__title {
    font-family: 'Cinzel', serif;
    font-size: 52px;
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.hero-new__text {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 32px;
}

/* ========================================= */
/* CHECKS */
/* ========================================= */

.hero-new__checks {
    list-style: none;
    padding: 0;
    margin: 24px 0 32px 0;
}

.hero-new__checks li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 12px;
    font-size: 17px;
}

.hero-new__checks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    background-color: #2fbf71;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================= */
/* BOTÓN */
/* ========================================= */

.hero-new__btn {
    display: inline-block;
    padding: 16px 79px;
    background-color: #c62828;
    color: #fff;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    z-index: 10;
}

/* ========================================= */
/* MÉTRICAS */
/* ========================================= */

.hero-new__stats {
    display: flex;
    gap: 32px;
    margin-top: 80px;
}

.hero-new__stat {
    display: flex;
    gap: 14px;
    align-items: center;
}

.hero-new__stat img {
    width: 72px;
}

.hero-new__stat strong {
    font-size: 18px;
}

.hero-new__stat span {
    font-size: 12px;
    text-transform: uppercase;
}

/* ========================================= */
/* ABOGADO */
/* ========================================= */

.hero-new__figure {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.hero-new__lawyer {
    max-height: 880px;
    transform: translate(-480px, 70px);
}

/* ========================================= */
/* HERO – MOBILE (TITULO + SUBTITULO)        */
/* ========================================= */

@media (max-width: 768px) {

    /* HERO */
    .hero-new {
        align-items: flex-start; /* 🔥 CAMBIO 1: deja de centrar verticalmente */
        padding-top: 80px;      /* 🔥 CAMBIO 2: sube todo el contenido */

        padding-left: 16px;
        padding-right: 16px;
    }

    /* CONTENEDOR */
    .hero-new__container {
        display: block;
    }

    /* CONTENIDO */
    .hero-new__content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        text-align: left;
        box-sizing: border-box;
    }

    /* TITULO */
    .hero-new__title {
        font-size: 40px;
        line-height: 1.2;
        margin-bottom: 12px;
        
        text-align: center;     /* ✅ centra el título */
        max-width: 100%;        /* seguridad */

        word-break: normal;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* SUBTITULO */
    .hero-new__text {
        max-width: 90vw;
        width: 85%;
        margin-top: 16px;
        margin-bottom: 24px;

        font-size: 16.8px;
        line-height: 1.5;
        opacity: 0.95;

        text-align: center;      /* ✅ centra el subtítulo */

        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        box-sizing: border-box;
    }

    /* OCULTAR ABOGADO */
    .hero-new__figure {
        display: none;
    }
}


 /* ========================================= */
    /* HERO – MOBILE AJUSTE CHECKS (EDITABLE)   */
    /* ========================================= */

    /* Lista completa */
    .hero-new__checks {
        max-width: 320px;        /* ⬅️ ancho del bloque */
        margin: 0 0 24px;     /* ⬅️ centrado */
        padding: 0;
    }

    /* Cada línea */
    .hero-new__checks li {
        font-size: 16.5px;       /* ⬅️ TAMAÑO DEL TEXTO */
        line-height: 1.4;
        margin-bottom: 10px;

        padding-left: 30px;      /* ⬅️ espacio icono-texto */
        text-align: left;        /* texto alineado prolijo */
    }

    /* ÍCONO ✓ */
    .hero-new__checks li::before {
        width: 20px;             /* ⬅️ tamaño del círculo */
        height: 18px;
        font-size: 12px;         /* ⬅️ tamaño del ✓ */
        top: 2px;
    }

    /* 👉 Para ocultar todos los checks (opcional) */
    /*
    .hero-new__checks {
        display: none;
    }
    */
}
/* ========================================= */
/* HERO – MOBILE AJUSTE BOTÓN                */
/* ========================================= */

@media (max-width: 768px) {

    .hero-new__btn {
        display: inline-block;

        width: auto;
        max-width: 100%;            /* ⬅️ ancho máximo del botón */
        margin-top: 16px;
        margin-bottom: 15px;

        padding: 14px 48px;        /* ⬅️ ALTO / ANCHO del botón */
        font-size: 15px;           /* ⬅️ TAMAÑO DEL TEXTO */
        line-height: 1.25;         /* ⬅️ ESPACIADO DEL TEXTO */

        letter-spacing: 0.3px;     /* ⬅️ separación entre letras */
        font-weight: 600;          /* ⬅️ peso del texto */

        border-radius: 15px;
        text-align: center;

        white-space: nowrap;   /* ✅ NO se parte en dos líneas */

        box-sizing: border-box;
    }
}
/* ========================================= */
/* HERO – MOBILE DEGRADADO UNIFORME CLARO    */
/* ========================================= */

@media (max-width: 768px) {

    .hero-new::after {
        background: linear-gradient(
            to right,
            rgba(10, 45, 80, 0.65) 0%,
            rgba(10, 45, 80, 0.65) 100%
        );
    }
}
/* ========================================= */
/* HERO – MOBILE AJUSTE ICONOS / METRICAS    */
/* ========================================= */

@media (max-width: 768px) {

    /* Contenedor de métricas */
    .hero-new__stats {
        display: flex;
        justify-content: space-between;
        gap: 8px;                 /* ⬅️ menos espacio entre iconos */
        margin-top: 32px;
    }

    /* Cada métrica */
    .hero-new__stat {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        flex: 1;                  /* ⬅️ los 3 ocupan el mismo ancho */
    }
    .hero-new__stat:first-child { /* 👈 SOLO EL PRIMER ICONO */
        align-items: flex-start;
        text-align: left;
    }
     /* Ajustar icono del medio */
     .hero-new__stat:nth-child(2) {
     transform: translateX(-10px); /* ⬅️ mueve un poco a la izquierda */
     }

    /* Icono */
    .hero-new__stat img {
        width: 55px;              /* ⬅️ ICONO MÁS CHICO */
        height: auto;
    }

    /* Número */
    .hero-new__stat strong {
        font-size: 14px;          /* ⬅️ más compacto */
        line-height: 1.2;
    }

    /* Texto */
    .hero-new__stat span {
        font-size: 10px;          /* ⬅️ cabe sin romper */
        line-height: 1.2;
        text-align: center;
    }
}
/* ========================================= */
/* ADAPTABILIDAD PANTALLA MÓVIL (BASE)       */
/* Aplica a TODOS los celulares              */
/* ========================================= */

@media (max-width: 768px) {

    /* TÍTULO */
    .hero-new__title {
        font-size: 40px;
        line-height: 1.2;
        text-align: center;
    }

    /* SUBTÍTULO */
    .hero-new__text {
        font-size: 16.8px;
        line-height: 1.5;
        text-align: center;
    }

    /* BOTÓN */
    .hero-new__btn {
        font-size: 15px;
        padding: 14px 48px;
    }

    /* CHECKS */
    .hero-new__checks li {
        font-size: 16.5px;
    }
}

/* ========================================= */
/* ADAPTABILIDAD MÓVIL PEQUEÑO               */
/* Ej: iPhone SE, celulares chicos (≤360px) */
/* ========================================= */

@media (max-width: 360px) {

    .hero-new__title {
        font-size: 34px;
    }

    .hero-new__text {
        font-size: 15px;
    }

    .hero-new__btn {
        font-size: 14px;
        padding: 14px 32px;
    }

    .hero-new__checks li {
        font-size: 14px;
    }
}

/* ========================================= */
/* ADAPTABILIDAD MÓVIL GRANDE                */
/* Ej: Pro Max, Plus, celulares grandes      */
/* ========================================= */

@media (min-width: 400px) and (max-width: 768px) {

    .hero-new__title {
        font-size: 42px;
    }

    .hero-new__text {
        font-size: 17.5px;
    }
}
/* ========================================= */
/* ADAPTABILIDAD PC – HERO NUEVO             */
/* SOLO DESKTOP / NOTEBOOK                   */
/* Mobile NO se toca                         */
/* ========================================= */


/* ========================================= */
/* PC GRANDE – MONITORES ≥1600px (27”)       */
/* ========================================= */
@media (min-width: 1600px) {

    .hero-new__content {
        margin-top: 120px;
    }

    .hero-new__stats {
        margin-top: 90px;
    }

    .hero-new__lawyer {
        max-height: 900px;
        transform: translate(-480px, 90px);
    }
}


/* ========================================= */
/* PC MEDIANO – DESKTOP NORMAL (1367–1599px) */
/* ========================================= */
@media (min-width: 1367px) and (max-width: 1599px) {

    .hero-new__content {
        margin-top: 105px; /* base equilibrada */
    }

    .hero-new__stats {
        margin-top: 70px;
    }

    .hero-new__lawyer {
        max-height: 820px;
        transform: translate(-420px, 70px);
    }
}

/* ========================================= */
/* PC PEQUEÑO – NOTEBOOKS (≤1440px / 13”)    */
/* ========================================= */
@media (max-width: 1440px) {

    .hero-new__content {
        margin-top: 130px; /* sube todo el bloque */
    }

    .hero-new__stats {
        margin-top: 40px; /* iconos más cerca del botón */
    }

    .hero-new__lawyer {
        max-height: 740px;
        transform: translate(-300px, 50px);
    }
}