:root{
    --rojo: #ff0000;
    --rojo-hover: #cc0000;
    --oscuro: #1c1c28;
    --gris-claro: #e9e9ec;
    /* NUEVO: altura de la cabecera. Este valor es solo de respaldo;
       el script del HTML lo reemplaza por la altura real. */
    --cab-h: 140px;
}


html{
    /* Al saltar a un ancla (#productos, #contacto...) deja espacio para que
       la cabecera no tape el título de la sección */
    scroll-padding-top: var(--cab-h);

    /* "Imán" suave: al dejar de hacer scroll cerca de una sección, el navegador
       la acomoda sola justo debajo de la cabecera. "proximity" solo actúa si
       estás cerca; no te obliga a detenerte (a diferencia de "mandatory"). */
    scroll-snap-type: y proximity;
}

.pantalla-1,
.esc,
.por,
.esn,
.val{
    scroll-snap-align: start;
}


body{
    font-family: 'Inter', sans-serif;
    color: var(--oscuro);
    overflow-x: hidden;
}
.text-red{ color: var(--rojo); }

/* Botones */
.btn-multico{
    background: var(--rojo);
    border-color: var(--rojo);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
}
.btn-multico:hover{
    background: var(--rojo-hover);
    border-color: var(--rojo-hover);
    color: #fff;
}
.btn-outline-multico{
    background: #fff;
    border: 1px solid var(--rojo);
    color: var(--rojo);
    font-weight: 600;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
}
.btn-outline-multico:hover{
    background: var(--rojo);
    border-color: var(--rojo);
    color: #fff;
}
.btn-lg{
    font-size: 1rem;
    padding: .8rem 1.6rem;
}
.btn-lg i{
    margin-left: .5rem;
    vertical-align: middle;
}

/* Barra superior */
.topbar{
    background: var(--oscuro);
    padding: .3rem 0;
    font-weight: 600;
    font-size: .8rem;
}
.topbar a{
    color: #fff;
    text-decoration: none;
}
.topbar a:hover{ color: var(--gris-claro); }
.topbar i{ color: var(--rojo); }

/* Navbar */
.main-nav{
    background: #fff;
    padding: 1rem 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.main-nav .nav-link{
    color: var(--oscuro);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}
.main-nav .nav-link:hover{ color: var(--rojo); }

/* Hero */
.hero{
    background: linear-gradient(180deg, #d6d6d9 0%, #ececee 55%, #fff 100%);
    padding: 3rem 0 7rem;
    overflow: hidden;
}
.hero h1{
    font-weight: 900;
    font-size: clamp(1.8rem, min(3vw, 6vh), 3.4rem);
    line-height: 1.05;
    color: #000;
    text-shadow: 2px 3px 4px rgba(0, 0, 0, .35);
}
.hero .lead{
    font-family: 'Abel', 'Inter', sans-serif;
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 1.5rem 0 2rem;
    max-width: 24ch;
    color: #000;
}

/* Imagen en forma de rombo: punta a la izquierda, esquina hacia abajo (oculta tras la
   barra de valores) y lados a 45°. --h = alto visible; la imagen baja 48px más (hasta
   el final del hero) para que la diagonal inferior siga cayendo detrás de la barra. */
.hero-img-wrap{
    --h: 400px;
    --tip: calc(var(--h) / 2);
    position: relative;
    height: var(--h);
}
.hero-img-wrap::before{            /* borde blanco exterior */
    content: "";
    position: absolute;
    top: -12px; bottom: -60px; left: -17px; right: 0;
    background: #fff;
    clip-path: polygon(
        calc(var(--tip) + 12px) 0,
        100% 0,
        100% calc(var(--h) + 59px),
        calc(100% - 13px) 100%,
        calc(var(--tip) + 60px) 100%,
        0 calc(var(--tip) + 12px));
}
.hero-img{                         /* banda oscura */
    position: absolute;
    inset: 0 0 -48px 0;
    background: #3a3a3a;
    clip-path: polygon(
        var(--tip) 0,
        100% 0,
        100% calc(var(--h) + 30px),
        calc(100% - 18px) 100%,
        calc(var(--tip) + 48px) 100%,
        0 var(--tip));
}
.hero-img img{                     /* foto, 16px más adentro en todo el contorno */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    clip-path: polygon(
        calc(var(--tip) + 7px) 16px,
        100% 16px,
        100% calc(var(--h) + 7px),
        calc(100% - 41px) 100%,
        calc(var(--tip) + 71px) 100%,
        23px var(--tip));
}
@media (min-width: 992px){
    .hero-img-wrap{ --h: clamp(300px, 56vh, 480px); min-height: 0; }
}

.help-card{
    position: absolute;
    right: 8%;
    bottom: 2.5rem;
    width: 185px;
    background: #fff;
    border-radius: 18px;
    padding: 1.1rem;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
    z-index: 2;
}
.help-card h2{
    font-size: 1rem;
    font-weight: 700;
}
.help-card p{
    font-size: .8rem;
    margin-bottom: .8rem;
}

/* Barra de valores */
.values{
    background: var(--oscuro);
    color: #fff;
    border-radius: 30px;
    margin: -4.5rem auto 2rem;
    width: calc(100% - 2rem);
    max-width: 1050px;
    padding: 2rem 1rem;
    position: relative;
    z-index: 3;
}
.value-years .big{
    font-size: 4.5rem;
    font-weight: 900;
    color: var(--rojo);
    line-height: 1;
}
.value-years .years{
    font-size: 2rem;
    font-weight: 900;
    color: var(--rojo);
    line-height: 1.1;
}
.value-years .exp{ font-size: 1.4rem; }
.value-item i{
    font-size: 3rem;
    color: var(--rojo);
}
.value-item h3{
    font-weight: 700;
    font-size: 1.4rem;
}
.value-item p{
    font-size: .85rem;
    margin: 0;
}

/* Líneas divisoras entre columnas */
@media (min-width: 768px){
    .values .col + .col{ border-left: 1px solid #555; }
}

/* Escritorio: toda la primera pantalla cabe en 100vh.
   CAMBIO: antes esto estaba en "body"; ahora solo en .pantalla-1,
   así las secciones de abajo no entran al reparto flex. */
@media (min-width: 992px) and (min-height: 600px){
    .pantalla-1{
        display: flex;
        flex-direction: column;
        /* NUEVO: ya no mide 100vh completo, porque la cabecera (que ahora está
           fuera de .pantalla-1) ocupa una parte. Mide "pantalla menos cabecera". */
        height: calc(100vh - var(--cab-h));
        height: calc(100dvh - var(--cab-h));
    }
    .topbar, .main-nav, .values{ flex-shrink: 0; }
    .main-nav{ padding: .6rem 0; }

    .hero{
        flex: 1;
        min-height: 0;
        display: flex;
        align-items: center;
        padding: .5rem 0 3rem;
    }
    .hero > .container-fluid{ width: 100%; }
    .hero h1{ white-space: nowrap; }
    .hero .lead{
        font-size: clamp(1.1rem, 2.6vh, 1.6rem);
        margin: 1rem 0 1.5rem;
    }

    /* Foto más "cuadrada" (menos zoom) para que se vea el edificio completo */
    .hero-img-wrap{
        min-height: 0;
        height: clamp(300px, 56vh, 480px);
    }
    .hero-img img{ object-position: 55% 15%; }
    .help-card{ bottom: 4rem; }

    /* Barra de valores: más ancha y más alta, como en el diseño */
    .values{
        width: calc(100% - 4rem);
        max-width: 1280px;
        margin: -4.5rem auto 1rem;
        padding: 1.8rem 1.5rem;
    }
    .value-years .big{ font-size: clamp(3.5rem, 9vh, 5rem); }
    .value-years .years{ font-size: clamp(1.6rem, 4vh, 2.2rem); }
    .value-years .exp{ font-size: clamp(1.1rem, 3vh, 1.5rem); }
    .value-item i{ font-size: clamp(2.6rem, 7vh, 3.6rem); }
    .value-item h3{ font-size: clamp(1.2rem, 3.2vh, 1.6rem); margin: .2rem 0 .4rem; }
    .value-item p{ font-size: .95rem; line-height: 1.3; }
}

/* Tablet y móvil */
@media (max-width: 991.98px){
    .hero{ padding-bottom: 6rem; }
    .hero .lead{ max-width: none; }
    .hero-img-wrap{
        margin-top: 2rem;
        min-height: 300px;
        margin-right: 1.5rem;
    }
    .hero-img-wrap::before{ display: none; }
    .hero-img{ inset: 0; }
    .hero-img,
    .hero-img img{
        clip-path: none;
        border-radius: 18px;
    }
    .help-card{ right: 1rem; bottom: 1rem; }
}

/*------------------------SECCION 2------------------------------*/

.esc {
  --esc-rojo: #e10600;
  --esc-ratio: 1.99;   /* ← ancho ÷ alto REAL de origen-electrico.png */
  /* NUEVO: alto disponible debajo de la cabecera. Se usa aquí y en .esc-escena */
  --esc-h: calc(100vh - var(--cab-h));

  position: relative;
  /* NUEVO: antes era "height: 100vh" y "height: 100dvh". Con 100vh la sección era
     más alta que el espacio visible y la cabecera siempre tapaba una parte. */
  height: var(--esc-h);
  background: #0b1a2b;
  overflow: hidden;    /* lo que sobre de la imagen se recorta */
  isolation: isolate;  /* los z-index de adentro no se escapan de la sección */
}
/* NUEVO: navegadores modernos usan dvh en lugar de vh */
@supports (height: 100dvh){
  .esc{ --esc-h: calc(100dvh - var(--cab-h)); }   /* en navegadores modernos descuenta barras del móvil */
}
.esc-escena {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* NUEVO: usa --esc-h en lugar de 100vh / 100dvh, para que la imagen cubra
     justo el espacio que queda debajo de la cabecera */
  width: max(100%, calc(var(--esc-h) * var(--esc-ratio)));
  aspect-ratio: var(--esc-ratio);
}

.esc-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.esc-hotspot{
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    outline: none;
}
.esc-punto{
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(26px, 3.6vw, 100px);
    height: clamp(26px, 3.6vw, 100px);
    border-radius: 50%;
    background: var(--esc-rojo);
    color: #fff;
    font-weight: 700;
    font-size: clamp(.8rem, 1.6vw,1.5rem);
    cursor: pointer;
    animation: esc-pulso 2s infinite;
}
@keyframes esc-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(225, 6, 0, .6); }
  70%  { box-shadow: 0 0 0 14px rgba(225, 6, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 6, 0, 0); }
}

/*TARJETA OCULTA*/
.esc-card{
    position: absolute;
    left: 110%;
    top: 50%;   /* NUEVO: antes decía "top: 50;" sin el %, y el navegador ignoraba la línea */
    transform: translateY(-50%) scale(.9);
    width: clamp(190px, 22vw, 380px);
    background: #fff;
    color: #111;
    border-radius: 12px;
    padding: .75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    font-size: clamp(.75rem, 1.05vw, .95rem);
    line-height: 1.3;

    /*Oculta con opacity*/
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s, transform .25s, visibility .25s;
}
.esc-izq .esc-card{
    left: auto;
    right: 110%;
}

.esc-hotspot:hover .esc-card,
.esc-hotspot:focus .esc-card{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

.esc-hotspot:hover,
.esc-hotspot:focus{
    z-index: 5;
}

/*Contenido de la tarjeta*/
.esc-titulo{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
    padding: .25rem .8rem .25rem .25rem;
    background: #111;
    color: #fff;
    border-radius: 50px;
    font-size: 1em;
    font-weight: 700;
}
.esc-num{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--esc-rojo);
}
.esc-sub{margin: 0;}

.esc-prod{
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: .7rem;
}

.esc-prod img{
    width: 6em;
    height: 6em;
    flex-shrink: 0;
    object-fit: contain;
    border-radius:50%;
    border: 1px solid #ddd;
    background: #fff;
}

@media(max-width: 767.98px){
    .esc{height: auto;}
    .esc-escena{
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
    }
    /* NUEVO: en celular la tarjeta y su imagen se achican un poco para no salirse */
    .esc-card{ width: 230px; }
    .esc-prod img{ width: 4.5em; height: 4.5em; }

    /* NUEVO: el círculo 2 está cerca del borde derecho; en celular su tarjeta
       se abre hacia la izquierda (misma idea que .esc-izq, pero solo en móvil) */
    .esc-izq-movil .esc-card{
        left: auto;
        right: 110%;
    }
}


/*--------------------SECCION 3-----------------------------*/
.prod{
    --prod-h: calc(100vh - var(--cab-h));

    background: #fff;
    padding: clamp(1.5rem, 4vh, 3rem);

    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
}
@supports(height: 100dvh){
    .prod{--prod-h: calc(100dvh - var(--cab-h));}
}

@media(min-width: 768px){
    .prod{min-height: var(--prod-h);}
}

/*Encabezado*/
.prod-cabecera{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: clamp(1.5rem, 5vh, 3.5rem);
}
.prod-titulo{
    grid-column:2;
    position: relative;
    margin: 0;
    padding-bottom: .6rem;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vh, 3rem);
    color: #000;
    text-align: center;
}
.prod-titulo::after{
    content:"";
    position: absolute;
    left: 50%;
    bottom:0;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--rojo);
}
.prod-todos{
    grid-column: 3;
    justify-self: end;
    color: var(--rojo);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}
.prod-todos:hover{color: var(--rojo-hover);}

/*Tarjeta*/
.prod-card{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(1rem, 2.5vh, 1.8rem) 1.5rem;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    text-align: center;
    transition: transform .25s,box-shadow .25s;
}

.prod-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
}

.prod-img{
    height: clamp(140px, 28vh, 260px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.prod-img img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.prod-card h3{
    font-size: clamp(1.3rem, 3vh, 1.9rem);
    font-weight: 700;
    margin-bottom: .6rem;
}
.prod-card p{
    font-size: clamp(.8rem, 1.7vh, .95rem);
    line-height: 1.35;
    margin-bottom: 1.2rem;
}

.prod-mas{
    margin-top: auto;
    align-self: flex-end;
    padding-left: .5rem;
    color: var(--rojo);
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
}
.prod-mas:hover{color: var(--rojo-hover);}
.prod-mas i{margin-left: .4rem; vertical-align: middle;}

@media(max-width: 767.98px){
    .prod-cabecera{
        grid-template-columns: 1fr;
        gap: 1rem;
        justify-items: center;
    }
    .prod-titulo,
    .prod-todos{
        grid-column: auto;
        justify-self: center;
    }
}

/*----------------------------------Seccion 4----------------------------------------*/
.por{
    --por-h: calc(100vh - var(--cab-h));
    background: #fff;
    padding: clamp(1rem, 3vh, 2.5rem) 1rem;

    min-height: var(--por-h);

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 1.5rem;
    scroll-snap-align: start;
}
@supports(height: 100dvh){
    .por{--por:calc(100dvh -var(--cab-h));}
}

.por-titulo{
    position: relative;
    margin: 0 0 clamp(1rem, 4vh, 2.5rem);
    padding-bottom: .6rem;
    text-align: center;
    font-weight: 700;
    font-size: clamp(1.6rem, 4.5vh,2.6rem);
    color: #000;
}
.por-titulo::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--rojo);
}
.por-circulo{
    width: clamp(90px, 16vh, 130px);
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 50%;

    display: grid;
    place-items: center;

    background: radial-gradient(circle at 35% 30%, #fff 0%, #ececee 70%,#d9d9dd 100%);
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .08),
    0 4px 10px rgba(0, 0, 0, .18);
    margin-bottom: 10px;
}

.por-circulo i{
    color: var(--rojo);
    font-size: clamp(2.2rem, 6vh, 3.4rem);
    line-height: 1;
}
.por-texto h3{
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .3rem;
}
.por-texto p{
    font-size: .8rem;
    line-height: 1.3;
    margin: 0;
}

.por-cert{
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .8rem;
}
.por-cert img{
    max-width: 100%;
    height: clamp(70px, 17vh, 160px);
    object-fit: contain;
}
.por-cert figcaption{
    font-size: clamp(1rem, 2vh, 1.1rem);
    line-height: 1.3;
    color: #333;
}
@media(min-width:768px){
    .por-certs > .col-md-4 + .col-md-4{
        border-left:1px solid #ddd;
    }
}

/*-------------------------------------------SECCION 5: NUESTRA ESENCIA--------------------------------------*/
.esn{
    --esn-h: calc(100vh -var(--cab-h));

    position: relative;
    isolation: isolate;
    min-height: var(--esn-h);

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 4vh, 3rem) 1rem;

    background: linear-gradient(180deg, #e2e2e4 0%,#ececee 45%,#fff 100%);

    scroll-snap-align: start;
}
@supports(height: 100dvh){
    .esn{--esn-h: calc(100dvh - var(--cab-h));}
}
.esn::before{
    content: "";
    position: absolute;
    top: 0;left: 0;right: 0;
    height: 65%;
    z-index: -1;
    background: url("../img/seccion5/fondo.png") center top / cover no-repeat;

    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

/*Encabezado*/
.esn-cabecera{
    text-align: center;
    margin-bottom: clamp(1rem,4vh,2.5rem);
}
.esn-sobre{
    margin: 0 0 .3rem;
    color: var(--rojo);
    font-size: clamp(1.1rem, 3vh, 1.6rem);
}
.esn-titulo{
    margin: 0 0 .8rem;
    font-weight: 700;
    font-size: clamp(1.4rem, 4.5vh, 2.2rem);
    color: #000;
}
.esn-sub{
    margin: 0 auto;
    max-width: 40ch;
    font-size: clamp(.9rem,2.2vh, 1.1rem);
    line-height: 1.25;
}
/*Tarjetas*/
.esn-card{
    height: 100%;
    padding: clamp(1rem,3vh, 1.8rem) 1.5rem;
    background: #fff;
    border-radius: 30px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .18);
}
.esn-icono{
    width: clamp(70px, 13vh,105px);
    aspect-ratio: 1;
    margin: 0 auto .8rem;
    border-radius: 50%;
    background: #d9d9dc;
    display: grid;
    place-items: center;
}
.esn-icono i{
    color: var(--rojo);
    font-size: clamp(2rem, 5.5vh, 3rem);
    line-height: 1;
}
.esn-card h3{
    margin:0 0 clamp(.6rem,3vh,1.2rem);
    font-size: clamp(1.2rem,3vh,1.6rem);
    font-weight: 500;
}
.esn-card h3::before{
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    margin: 0 auto .4rem;
    background: var(--rojo);
}

.esn-card p{
    margin: 0;
    font-size: clamp(.75rem, 1.7vh, .9rem);
    line-height: 1.3;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------
---------------------SECCION 6: NUESTROS VALORES-----------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------*/
.val{
    --val-h: calc(100vh - var(--cab-h));   /* pantalla menos cabecera */

    background: #fff;
    min-height: var(--val-h);              /* min-height: en pantallas chicas crece en vez de cortarse */
    padding: clamp(1rem, 3vh, 2.5rem) 1rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
}
@supports (height: 100dvh){
    .val{ --val-h: calc(100dvh - var(--cab-h)); }
}

.val-titulo{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0 0 clamp(1rem, 4vh, 2.5rem);
    font-weight: 900;
    font-size: clamp(1.5rem, 4.5vh, 2.5rem);
    color: #000;
    white-space: nowrap;
}
.val-titulo::before,
.val-titulo::after{
    content: "";
    flex: 1;
    height: 2px;
    background: #d6d6d9;
}
/*---------valores-----------------*/
.val-item{
    height: 100%;
    padding: 0 .8rem;
    text-align: centeer;
}
.val-icono{
    width: clamp(60px,11vh,85px);
    aspect-ratio: 1;
    margin: 0 auto clamp(.6rem, 2vh, 1.2rem);
    border-radius: 50%;
    background: #d9d9dc;
    display: grid;
    place-items: center;
}
.val-icono i{
    color:var(--rojo);
    font-size: clamp(1.8rem, 5vh,2.6rem);
    line-height: 1;
}
.val-item h3{
    margin: 0 0 clamp(.5rem, 2vh,1.2rem);
    font-size: clamp(.8rem, 2vh, 1rem);
    font-weight: 700;
}
.val-item p{
    margin: 0;
    font-size: clamp(.72rem, 1.6vh,.85rem);
    line-height: 1.3;
}
@media(min-width:992px){
    .val-cols>.col-lg+.col-lg{
        border-left: 2px solid #d6d6d9;
    }
}

/*--------------------Bloque de abajo-------------------*/
.val-bajo{
    margin-top: clamp(1rem,4vh,2.5rem);
}

.val-cert{
    height: 100%;
    display: flex;
    gap: 1.2rem;
    padding: clamp(1rem,3vh,1.6rem);
    background: #f4f4f5;
    border-radius: 25px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}
.val-cert-texto{flex: 1;}
.val-cert-sobre{
    color: var(--rojo);
    font-size: .7rem;
    font-weight: 700;
}
.val-cert-texto h3{
    position: relative;
    margin: .3rem 0 .8rem;
    padding-bottom: .5rem;
    font-size: clamp(1.1rem,2.8vh,1.5rem);
    font-weight: 600;
}
.val-cert-texto h3::after{
    content: "";
    position: absolute;
    left: 0;bottom: 0;
    width: 22px; height: 2px;
    background: var(--rojo);
}
.val-cert-texto p{
    margin: 0;
    font-size: clamp(.75rem, 1.6vh,.85rem);
    line-height: 1.3;
}
.val-cert-iso{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding-left: 1.2rem;
    border-left: 1px solid #ccc;
    text-align: center;
    font-size: .8rem;
}
.val-cert-iso img{
    height: clamp(55px,12vh,90px);
    object-fit: contain;
}
.val-cert-iso a{
    color: var(--rojo);
    font-weight: 700;
    text-decoration: none;
}
.val-cert-iso a:hover{color: var(--rojo-hover);}

/* Tarjeta oscura*/
.val-pol{
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: clamp(1rem,3vh,1.6rem);
    background: var(--oscuro);
    color: #fff;
    border-radius: 25px;
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.val-pol-icono{
    width: clamp(70px,14vh,100px);
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 50%;
    background: #2a2a38;
    display: grid;
    place-items: center;
}
.val-pol-icono i{
    color: var(--rojo);
    font-size: clamp(2.2rem,6vh,3.2rem);
    line-height: 1;
}
.val-pol-texto{
    padding-left: 1.5rem;
    border-left: 2px solid #555;
}
.val-pol-texto h3{
    margin: 0 0 .5rem;
    color: var(--rojo);
    font-size: clamp(1rem, 2.6vh,1.3rem);
    font-weight: 700;
}
.val-pol-texto p{
    margin: 0;
    font-size: clamp(.72rem,1.55vh,.85rem);
    line-height: 1.3;
}

/*Celular: todas las modificaciones*/
@media(max-width: 575.98px){
    .val-titulo{white-space: normal; text-align: center;}
    .val-titulo::before,
    .val-titulo::after{display: none;}
    .val-cert,
    .val-pol{flex-direction: column;text-align: center;}
    .val-cert-iso{padding-left: 0; border-left: 0;}
    .val-pol-texto{padding-left: 0; border-left: 0;}
}

/*------------------------------SECCION 7: BANNER CTA-----------------------------------*/
.cta{
    background: #fff;
    padding: clamp(3rem, 8vh, 5rem) 1rem clamp(1.5rem,4vh,3rem);
}

.cta-box{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
    background: #17171d;
    color: #fff;
    border-radius: 30px;
}
.cta-box{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
    color: #fff;
    border-radius: 30px;
    background:
        linear-gradient(135deg, #e10600 0%, #8a0000 49%, transparent 50%)
            top left / 70px 70px no-repeat,
        #17171d;
}
.cta-box img{height: 10rem;}

.cta-texto{flex: 1 1 320px;}
.cta-texto h2{
    margin: 0 0 .6rem;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 700;
}
.cta-texto p{
    margin: 0;
    max-width: 38ch;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.cta-accion{
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-right: clamp(0px, 14vw, 190px);
}
.cta-nota{
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-left: 1.2rem;
    border-left: 1px solid #666;
    font-size: .75rem;
    line-height: 1.2;
    max-width: 14ch;
}
.cta-nota i{font-size: 1.4rem;}

.cta-persona{
    position: absolute;
    right: 2.5rem;
    bottom: 0;
    height: 135%;
    width: auto;
    pointer-events: none;
}
@media(max-width: 991.98px){
    .cta-box{
        flex-direction: column;
        align-items: flex-start;
        padding: 2.5rem 1.5rem 1.5rem;
    }
    .cta-texto{flex: none;}
    .cta-accion{margin-right: 0; flex-wrap: wrap;}
    .cta-persona{display: none;}
    .cta-nota{max-width: none;}
}

/*-----------------------------------SECCION 8: CONTACTO-----------------------------------------*/
.con{
    --con-h: calc(100vh - var(--cab-h));   /* pantalla menos cabecera */

    min-height: var(--con-h);
    padding: clamp(1rem, 3vh, 2.5rem) 1rem;
    display: flex;
    align-items: center;                   /* centra el contenido verticalmente */
    background: linear-gradient(90deg, #e4e4e7 0%, #f3f3f5 45%, #fff 100%);
    scroll-snap-align: start;
}
.con > .container{ width: 100%; }
@supports (height: 100dvh){
    .con{ --con-h: calc(100dvh - var(--cab-h)); }
}
/*Columna izquierda*/
.con-sobre{
    margin: 0 0 .4rem;
    color: var(--rojo);
    font-weight: 700;
    font-size: clamp(1rem,2.4vh,1.2rem);
}
.con-titulo{
    position: relative;
    margin: 0 0 1.2rem;
    padding-bottom: .8rem;
    font-weight: 700;
    font-size: clamp(2rem, 6vh, 3rem);
    color: #000;
}
.con-titulo::after{
    content: "";
    position: absolute;
    left:0;bottom: 0;
    width: 30px; height: 3px;
    background: var(--rojo);
}
.con-intro{
    max-width: 30ch;
    margin: 0 0 clamp(1rem, 3vh, 1.8rem);
    font-size: clamp(.9rem,2.2vh,1.05rem);
    line-height: 1.3;
}
.con-benef{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: clamp(.8rem,2.5vh,1.5rem);
}
.con-circulo{
    width: clamp(55px, 10vh, 75px);
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 30%, #fff 0%, #ececee 70%,#d9d9dd 100%);
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.18);
}
.con-circulo i{
    color: var(--rojo);
    font-size: clamp(1.5rem,4vh,2.1rem);
    line-height: 1;
}
.con-benef h3{margin: 0 0 .2rem; font-size: .9rem; font-weight: 700;}
.con-benef p{margin: 0; font-size: .8rem; line-height: 1.25; max-width: 26ch;}

/*Tarjeta del formulario*/
.con-card{
    padding: clamp(1.2rem,3.5vh,2.5rem) clamp(1.2rem,3vw, 2.5rem);
    background: #fff;
    border-radius: 40px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .25);
}
.con-card-titulo{
    margin: 0 0 .3rem;
    font-weight: 700;
    font-size: clamp(1.5rem, 4.5vh, 2.2rem);
    color: #000;
}
.con-card-sub{
    position: relative;
    margin: 0 0 clamp(.8rem,2.5vh, 1.5rem);
    padding-bottom: .6rem;
    font-size: clamp(.8rem,1.9vh,.95rem);
}
.con-card-sub::after{
    content: "";
    position: absolute;
    left: 0;bottom: 0;
    width: 40px;height: 2px;
    background: var(--rojo);
}

.con-card .form-label{
    margin-bottom: .2rem;
    font-size: .8rem;
    font-weight: 500;
}
.con-card .form-control,
.con-card .form-select{
    padding: .35rem .7rem;
    font-size: .8rem;
    border: 1px solid #555;
    border-radius: 6px;
}
.con-card .form-control:focus,
.con-card .form-select:focus{
    border-color: var(--rojo);
    box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .15);
}
.con-card textarea{resize: none;}

/*Preferencia de contacto*/
.con-pref{
    margin-top: clamp(.8rem, 2.5vh, 1.3rem);
    padding: .7rem;
    background: #ececee;
    border-radius: 10px;
    text-align: center;
}
.con-pref p{margin: 0 0 .5rem; font-size: .8rem; font-weight: 700;}
.con-pref-opciones{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:.6rem
}

.con-pref input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.con-pref label{
    position: relative;
    padding: .4rem .9rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    color: var(--rojo);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}
.con-pref label i{margin-right: .3rem;}
.con-pref input:checked + label{
    border-color: var(--rojo);
}
.con-pref input:checked + label::after{
    content: "✓";
    position: absolute;
    top: -8px;right: -8px;
    width: 18px;height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rojo);
    color: #fff;
    font-size: .65rem;
}
.con-pref input:focus-visible + label{
    outline: 2px solid var(--oscuro);
    outline-offset: 2px;
}

/*Privacidad*/
.con-privacidad{
    margin-top: .8rem;
    font-size: .7rem;
}
.con-privacidad .form-check-input{accent-color: var(--rojo);}
.con-privacidad .form-check-input:checked{
    background-color: var(--rojo);
    border-color: var(--rojo);
}
.con-privacidad a{color: var(--rojo);}

.con-trampa{
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}

/*Mensaje de resultado*/
.con-msg{margin-top: .6rem;font-size: .85rem;font-weight: 600;}
.con-msg-ok{color: #1a7f37;}
.con-msg-error{color: var(--rojo);}

/*Bototnes*/
.con-botones{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-top: .8rem;
}
.con-bototnes .btn-multico{
    padding: .6rem 2.5rem;
    font-size: .85rem;
}
.con-botones .btn-outline-multico{font-size: .7rem;}
.con-bototnes .btn-outline-multico i{margin-right: .3rem;}

/*Celular*/
@media(max-width:575.98px){
    .con-card{border-radius: 25px;}
    .con-botones{flex-direction: column-reverse; align-items: stretch;}
}






/*----------------------FOOTER------------------------------------------*/
.pie{
    background: #17171d;
    color: #fff;
    padding: 2.5rem 1rem 1.2rem;
}
.pie-logo{margin-bottom: 1rem;}
.pie-desc{
    max-width: 30ch;
    font-size: .85rem;
    line-height: 1.3;
    margin: 0;
    color: #b4b4db;
}
.pie h3{
    margin:0 0 .8rem;
    font-size: .85rem;
    font-weight: 700;
    color: #e4e4e8;
}
.pie ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.pie li{margin-bottom: .5rem;}
.pie a{
    color: #b4b4bd;
    font-size: .85rem;
    font-weight: 300;
    text-decoration: none;
}
.pie a:hover{color:var(--rojo);}
.pie li i{margin-right: .3rem;}

/*Franja*/
.pie-legal{
    color: #8e8e99;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-top: 2rem;
    padding-top: 1px solid #aaa;
    font-size: .7rem;
    font-weight: 300;
}
.pie-legal a{font-size: .7rem;color: #8e8e99;}
.pie-enlace a+a{
    margin-left: .6rem;
    padding-left: .6rem;
    border-left: 1px solid #aaa;
}