/* =========================================================
   GLOBAL – CORPORATIVO AZUL SUAVE
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', Arial, sans-serif;
    color: #222;
    background-color: #ffffff;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #003F80;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

/* Contenedor global */
.container {
    width: min(1200px, 90%);
    margin: 0 auto;
}

/* Secciones */
.section {
    padding: 60px 0;
}

.section-sm {
    padding: 35px 0;
}

/* Botones */
button,
.btn-primary {
    padding: 12px 24px;
    background-color: #0056b3;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

button:hover,
.btn-primary:hover {
    background-color: #003F80;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

.btn-outline {
    padding: 12px 24px;
    border: 2px solid #0056b3;
    background: transparent;
    color: #0056b3;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: all .25s ease;
}

.btn-outline:hover {
    background: #0056b3;
    color: #ffffff;
}

/* Tarjetas globales */
.card {
    background: #ffffff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    transition: transform .3s ease, box-shadow .3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.16);
}

/* Grids */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

@media (max-width: 992px) {
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   BARRA SUPERIOR
   ========================================================= */

.div1 {
    background: #003F80;
    color: #ffffff;
    text-align: center;
    padding: 6px 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    letter-spacing: 0.3px;
    display: flex;
    justify-content: center;
    gap: 24px;
}

/* =========================================================
   MENÚ PRINCIPAL – CLARO
   ========================================================= */

.div2 {
    background: #ffffff;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    border-bottom: 1px solid #e5e5e5;
    position: sticky;
    top: 0;
    z-index: 999;
}

/* Logo */
.menu_logo {
    list-style: none;
    margin: 0;
    padding: 0;
}

.logo {
    height: 70px;
    width: auto;
    transition: transform .3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

/* Lista principal */
.cabecera-menu {
    list-style: none;
    display: flex;
    gap: 26px;
    margin: 0;
    padding: 0;
}

/* Enlaces */
.cabecera-menu li a {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #003F80;
    padding: 10px 14px;
    border-radius: 10px;
    transition: all .25s ease;
}

/* Hover */
.cabecera-menu li a:hover {
    background: #eaf2ff;
    color: #0056b3;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Activo */
.cabecera-menu .active > a,
.cabecera-menu li.active > a {
    background: #0056b3;
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

/* Dropdowns */
.dropdown-content,
.dropdown-content2,
.dropdown-content3 {
    display: none;
    position: absolute;
    background: #ffffff;
    min-width: 190px;
    border-radius: 12px;
    padding: 10px 0;
    box-shadow: 0 10px 26px rgba(0,0,0,0.16);
    margin-top: 10px;
}

.dropdown-content a,
.dropdown-content2 a,
.dropdown-content3 a {
    display: block;
    padding: 10px 18px;
    color: #003F80;
    font-size: 14px;
    font-weight: 500;
    transition: background .25s ease, padding-left .25s ease;
}

.dropdown-content a:hover,
.dropdown-content2 a:hover,
.dropdown-content3 a:hover {
    background: #eaf2ff;
    padding-left: 22px;
}

/* Mostrar dropdown */
.cabecera-menu li:hover .dropdown-content,
.cabecera-menu li:hover .dropdown-content2,
.cabecera-menu li:hover .dropdown-content3 {
    display: block;
}

/* Responsive menú */
@media (max-width: 900px) {
    .div2 {
        flex-direction: column;
        height: auto;
        padding: 10px 20px;
        align-items: flex-start;
    }

    .cabecera-menu {
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 10px;
    }
}

/* =========================================================
   PORTADA INICIO – HERO MODERNO
   ========================================================= */

.ImagenPortada {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
}

.ImagenPortada img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay suave */
.ImagenPortada .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.55)
    );
}

/* Texto portada */
.TextoPortada {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;
    width: min(800px, 90%);
    padding: 24px 30px;
    border-radius: 16px;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(4px);
}

.TextoPortada h1 {
    font-size: 42px;
    margin-bottom: 16px;
}

.TextoPortada p {
    font-size: 18px;
    line-height: 1.6;
}

/* Títulos intro */
.h1Div5 {
    text-align: center;
    margin: 40px 0 10px;
    font-size: 32px;
}

.h2Section,
.h2Section,
.h2Section {
    text-align: center;
    font-size: 20px;
    color: #555;
    margin-bottom: 30px;
}

/* Responsive portada */
@media (max-width: 768px) {
    .ImagenPortada {
        height: 70vh;
    }

    .TextoPortada h1 {
        font-size: 28px;
    }

    .TextoPortada p {
        font-size: 16px;
    }
}

/* =========================================================
   CONTENEDOR PRINCIPAL – TARJETAS INICIO
   ========================================================= */

.contenedorPrincipal {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 60px 20px;
    flex-wrap: wrap;
}

.cardSolucion {
    position: relative;
    width: 380px;
    max-width: 100%;
    height: 260px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.16);
    transition: transform .3s ease, box-shadow .3s ease;
    background: #000;
}

.cardSolucion img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.cardSolucion:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}

.cardSolucion:hover img {
    transform: scale(1.05);
}

.cardOverlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 14px 18px;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.0)
    );
    color: #ffffff;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

/* =========================================================
   SECCIÓN EPS – INICIO
   ========================================================= */

.divEPS {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 60px 20px;
    flex-wrap: wrap;
    background: #f5f7fa;
}

.epsCard {
    text-align: center;
    max-width: 340px;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    transition: transform .3s ease, box-shadow .3s ease;
}

.epsCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.16);
}

.epsCard h2 {
    margin-bottom: 14px;
}

.epsCard img {
    width: 100%;
    border-radius: 14px;
    margin-bottom: 14px;
}

.epsCard p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* =========================================================
   CONTACTO – BLOQUE INICIO
   ========================================================= */

.divContacto {
    text-align: center;
    padding: 60px 20px;
}

.divContacto h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.divContacto p {
    font-size: 17px;
    color: #555;
    margin-bottom: 20px;
}

/* =========================================================
   FOOTER MODERNO
   ========================================================= */

.footerModerno {
    background: #111827;
    color: #e5e7eb;
    padding: 50px 0;
    margin-top: 40px;
}

.divFooter {
    width: min(1200px, 90%);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.column {
    flex: 1;
    min-width: 220px;
}

.logoFooter {
    width: 120px;
    margin-bottom: 16px;
}

.parrafo {
    color: #d1d5db;
    line-height: 1.6;
    font-size: 14px;
}

.enlaces a {
    color: #9cd3ff;
    font-weight: 600;
    font-size: 14px;
    transition: color .25s ease;
}

.enlaces a:hover {
    color: #ffffff;
}

.logoFacebook,
.logoLinkedin,
.logoTwitter {
    width: 34px;
    margin-right: 8px;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    transition: transform .25s ease, box-shadow .25s ease;
}

.logoFacebook:hover,
.logoLinkedin:hover,
.logoTwitter:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.55);
}

/* Responsive footer */
@media (max-width: 768px) {
    .divFooter {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* =========================================================
   PRODUCTOS – PORTADA Y CATEGORÍAS
   ========================================================= */

.TextoProductos {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;
    padding: 24px 30px;
    background: rgba(0,0,0,0.35);
    border-radius: 16px;
    max-width: 80%;
}

.TextoProductos .tituloProductos {
    font-size: 38px;
    margin-bottom: 10px;
}

.contenedorPrincipalProductos {
    width: min(1100px, 90%);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 26px;
    padding: 40px 0;
    flex-wrap: wrap;
}

.contenedorPrincipalProductos div {
    text-align: center;
}

.contenedorPrincipalProductos h6 {
    font-size: 16px;
    margin: 10px 0;
    color: #003F80;
    font-weight: 600;
}

.contenedorPrincipalProductos button {
    padding: 8px 16px;
    background: #0056b3;
    color: #ffffff;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: background .25s ease;
}

.contenedorPrincipalProductos button:hover {
    background: #2E7D32;
}

/* =========================================================
   SERVICIOS – TÉCNICO Y COMERCIAL
   ========================================================= */

.divServicioTecnico,
.divServicioComercial {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 30px;
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
}

.divServicioTecnico img,
.divServicioComercial img {
    max-width: 420px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.16);
}

.formServicioTecnico,
.formServicioComercial {
    max-width: 500px;
}

.formServicioTecnico h1,
.formServicioComercial h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

.formServicioTecnico p,
.formServicioComercial p {
    font-size: 17px;
    line-height: 1.6;
    color: #444;
}

.formularioServicioTecnico form,
.formularioServicioComercial form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nombreServicioTecnico,
.correoServicioTecnico,
.MensajeServicioTecnico,
.nombreServicioComercial,
.correoServicioComercial,
.MensajeServicioComercial {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
}

.BotonServicioTecnico,
.BotonServicioComercial {
    padding: 12px 20px;
    background: #0056b3;
    color: #ffffff;
    border-radius: 10px;
    cursor: pointer;
    transition: background .25s ease;
}

.BotonServicioTecnico:hover,
.BotonServicioComercial:hover {
    background: #003F80;
}

/* =========================================================
   SOLUCIONES – TARJETAS Y GRID
   ========================================================= */

.Primerh1Soluciones {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 40px;
    background: #f5f7fa;
}

.Primerh1Soluciones img {
    width: 160px;
    border-radius: 16px;
}

.Primerh1Soluciones h1 {
    font-size: 32px;
    margin-bottom: 10px;
}

.Primerh1Soluciones p {
    font-size: 18px;
    color: #555;
    line-height: 1.7;
    text-align: justify;
}

.contenedorPrincipalSoluciones,
.contenedorPrincipal2Soluciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    padding: 40px;
}

.contenedorPrincipalSoluciones div,
.contenedorPrincipal2Soluciones div {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.contenedorPrincipalSoluciones div:hover,
.contenedorPrincipal2Soluciones div:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.contenedorPrincipalSoluciones img,
.contenedorPrincipal2Soluciones img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.contenedorPrincipalSoluciones h6,
.contenedorPrincipal2Soluciones h6 {
    font-size: 20px;
    margin: 15px 0;
    color: #003F80;
}

/* =========================================================
   FRUTOS SECOS – SECCIONES Y GRID
   ========================================================= */

.h1CadaAlimentoCuenta {
    text-align: center;
    padding: 40px 20px;
}

.h1CadaAlimentoCuenta h1 {
    font-size: 38px;
    margin-bottom: 30px;
    color: #003F80;
}

.h1CadaAlimentoCuenta .section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    align-items: center;
    margin-bottom: 40px;
}

.h1CadaAlimentoCuenta .section:nth-child(even) {
    direction: rtl;
}

.h1CadaAlimentoCuenta .section img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    transition: transform .3s ease;
}

.h1CadaAlimentoCuenta .section img:hover {
    transform: scale(1.04);
}

.h1CadaAlimentoCuenta .section p {
    font-size: 18px;
    line-height: 1.7;
    color: #444;
    text-align: justify;
}

@media (max-width: 768px) {
    .h1CadaAlimentoCuenta .section {
        grid-template-columns: 1fr;
        direction: ltr;
    }
}

/* Grid de frutos secos */
.contenedorPrincipalFrutosSecos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    padding: 40px;
}

.contenedorPrincipalFrutosSecos div {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    transition: transform .3s ease;
    text-align: center;
}

.contenedorPrincipalFrutosSecos div:hover {
    transform: translateY(-4px);
}

.contenedorPrincipalFrutosSecos img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

/* =========================================================
   PISTACHOS – GRID Y SECCIONES
   ========================================================= */

.divh1Pistachos h1 {
    text-align: center;
    font-size: 32px;
    color: #003F80;
    margin: 40px 0;
}

.contenedorPrincipalPistachos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    padding: 40px;
}

.contenedorPrincipalPistachos div {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    padding-bottom: 20px;
    transition: transform .3s ease;
}

.contenedorPrincipalPistachos div:hover {
    transform: translateY(-4px);
}

.contenedorPrincipalPistachos img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.contenedorPrincipalPistachos p {
    text-align: center;
    font-size: 16px;
    color: #444;
    margin: 10px 20px;
}

/* =========================================================
   AJUSTES RESPONSIVE FINALES
   ========================================================= */

@media (max-width: 992px) {
    .divServicioTecnico,
    .divServicioComercial {
        flex-direction: column;
        text-align: center;
    }

    .Primerh1Soluciones {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .contenedorPrincipal img,
    .contenedorPrincipal2 img {
        height: 160px;
    }
}

/* =========================================================
   PRODUCTOS – CORPORATIVO AZUL SUAVE
   ========================================================= */

.portadaProductos {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
}

.portadaProductos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portadaProductos .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.55)
    );
}

.TextoProductos {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;
    padding: 24px 30px;
    background: rgba(0,0,0,0.25);
    border-radius: 16px;
    backdrop-filter: blur(4px);
    max-width: 80%;
}

.TextoProductos h1 {
    font-size: 38px;
    margin-bottom: 10px;
}

/* Tarjetas */
.contenedorProductos {
    width: min(1100px, 90%);
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.cardProducto {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    transition: transform .3s ease, box-shadow .3s ease;
    text-align: center;
}

.cardProducto:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.cardProducto img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.cardProducto h3 {
    font-size: 20px;
    margin: 16px 0 10px;
    color: #003F80;
}

.cardProducto p {
    font-size: 15px;
    color: #555;
    padding: 0 20px 20px;
    line-height: 1.6;
}

.cardProducto button {
    margin-bottom: 20px;
    padding: 10px 20px;
    background: #0056b3;
    color: #ffffff;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background .25s ease;
}

.cardProducto button:hover {
    background: #003F80;
}

/* =========================================================
   VIDEOS MODERNOS – CORPORATIVO AZUL SUAVE
   ========================================================= */

.contenedorVideosModernos {
    width: min(1100px, 90%);
    margin: 60px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 40px;
}

.videoCard {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    transition: transform .3s ease, box-shadow .3s ease;
    text-align: center;
}

.videoCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.videoWrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Proporción 16:9 */
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0,0,0,0.15);
}

.videoWrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.videoCard p {
    margin-top: 14px;
    font-size: 15px;
    color: #444;
    font-family: 'Inter', sans-serif;
}
/* =========================================================
   BLOQUE DESCRIPTIVO PRODUCTOS – CORPORATIVO AZUL SUAVE
   ========================================================= */

.bloqueDescripcionProductos {
    width: min(900px, 90%);
    margin: 60px auto 40px;
    text-align: center;
    background: #f5f7fa;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.bloqueDescripcionProductos h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    color: #003F80;
    margin-bottom: 14px;
}

.bloqueDescripcionProductos p {
    font-size: 17px;
    color: #444;
    line-height: 1.7;
    font-family: 'Inter', sans-serif;
}
/* =========================================================
   SOLUCIONES – PORTADA CON VÍDEO
   ========================================================= */

.portadaSoluciones {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
}

.portadaSoluciones video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portadaSoluciones .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.55)
    );
}

.TextoPortadaSoluciones {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(900px, 90%);
    text-align: center;
    color: #ffffff;
    background: rgba(0,0,0,0.25);
    padding: 40px 30px;
    border-radius: 16px;
    backdrop-filter: blur(4px);
}

.TextoPortadaSoluciones h1 {
    font-size: 40px;
    margin-bottom: 16px;
    font-family: 'Montserrat', sans-serif;
}

.TextoPortadaSoluciones p {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   BLOQUE DESCRIPTIVO ELEGANTE
   ========================================================= */

.bloqueDescripcionSoluciones {
    width: min(1000px, 90%);
    margin: 60px auto;
    background: #f5f7fa;
    padding: 40px 35px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    text-align: center;
}

.bloqueDescripcionSoluciones h2 {
    font-size: 30px;
    color: #003F80;
    margin-bottom: 16px;
    font-family: 'Montserrat', sans-serif;
}

.bloqueDescripcionSoluciones p {
    font-size: 17px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   TÍTULO DE CATEGORÍAS
   ========================================================= */

.tituloCategoriasSoluciones {
    text-align: center;
    margin: 40px 0 20px;
}

.tituloCategoriasSoluciones h1 {
    font-size: 32px;
    color: #003F80;
    font-family: 'Montserrat', sans-serif;
}

/* =========================================================
   GRID DE SOLUCIONES
   ========================================================= */

.contenedorSoluciones {
    width: min(1100px, 90%);
    margin: 40px auto 80px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
}

.cardSolucionItem {
    background: #ffffff;
    border-radius: 16px;
    padding-bottom: 20px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    transition: transform .3s ease, box-shadow .3s ease;
    text-align: center;
}

.cardSolucionItem:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.cardSolucionItem img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}

.cardSolucionItem h3 {
    font-size: 22px;
    margin: 16px 0;
    color: #003F80;
    font-family: 'Montserrat', sans-serif;
}

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

@media (max-width: 768px) {
    .TextoPortadaSoluciones h1 {
        font-size: 28px;
    }

    .TextoPortadaSoluciones p {
        font-size: 15px;
    }

    .bloqueDescripcionSoluciones {
        padding: 30px 20px;
    }

    .cardSolucionItem img {
        height: 200px;
    }
}

/* =========================================================
   RESPONSIVE REAL MEJORADO (MI OPTIMIZACIÓN)
   ========================================================= */

@media (max-width: 600px) {

    /* Portada más baja */
    .portadaSoluciones {
        height: 50vh !important;
    }

    /* Texto más compacto */
    .TextoPortadaSoluciones {
        padding: 20px 15px !important;
    }

    .TextoPortadaSoluciones h1 {
        font-size: 24px !important;
    }

    .TextoPortadaSoluciones p {
        font-size: 14px !important;
        line-height: 1.5;
    }

    /* Bloque descriptivo más estrecho */
    .bloqueDescripcionSoluciones {
        padding: 25px 18px !important;
        margin: 40px auto !important;
    }

    /* Grid más flexible */
    .contenedorSoluciones {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    /* Tarjetas más pequeñas */
    .cardSolucionItem img {
        height: 180px !important;
    }

    .cardSolucionItem h3 {
        font-size: 18px !important;
        margin: 12px 0 !important;
    }
}


/* =========================================================
   SERVICIOS – INTRO MODERNO
   ========================================================= */

.divServicios {
    width: min(1000px, 90%);
    margin: 60px auto 40px;
    text-align: center;
    background: #f5f7fa;
    padding: 40px 35px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.divServicios h1 {
    font-size: 34px;
    color: #003F80;
    margin-bottom: 16px;
    font-family: 'Montserrat', sans-serif;
}

.divServicios p {
    font-size: 17px;
    color: #444;
    line-height: 1.7;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   SERVICIOS – TARJETAS
   ========================================================= */

.divTiposServicios {
    width: min(1100px, 90%);
    margin: 40px auto 80px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 40px;
}

.divTiposServicios > div {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px 25px 35px;
    text-align: center;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    transition: transform .3s ease, box-shadow .3s ease;
}

.divTiposServicios > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.divTiposServicios img {
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: 14px;
    margin-bottom: 20px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.15);
}

.divTiposServicios h2 {
    font-size: 24px;
    color: #003F80;
    margin-bottom: 14px;
    font-family: 'Montserrat', sans-serif;
}

.divTiposServicios p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
}

.divTiposServicios button {
    padding: 12px 24px;
    background: #0056b3;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}

.divTiposServicios button:hover {
    background: #003F80;
    transform: translateY(-2px);
}

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

@media (max-width: 768px) {
    .divServicios {
        padding: 30px 20px;
    }

    .divServicios h1 {
        font-size: 28px;
    }

    .divTiposServicios img {
        max-width: 220px;
    }
}

/* =========================================================
   QUIÉNES SOMOS – SECCIÓN PRINCIPAL
   ========================================================= */

.quienesSomosContainer {
    width: min(1100px, 90%);
    margin: 60px auto 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.quienesSomosImagen img {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.quienesSomosTexto h1 {
    font-size: 36px;
    color: #003F80;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.quienesSomosTexto h2 {
    font-size: 22px;
    color: #0056b3;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.quienesSomosTexto p {
    font-size: 17px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
}

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

@media (max-width: 900px) {
    .quienesSomosContainer {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .quienesSomosImagen img {
        max-width: 260px;
    }
}

/* =========================================================
   CONTACTO – MAPA MODERNO
   ========================================================= */

.mapaContacto iframe {
    width: 100%;
    height: 450px;
    border: none;
    margin-bottom: 50px;
    filter: drop-shadow(0 10px 26px rgba(0,0,0,0.15));
    border-radius: 16px;
}

/* =========================================================
   CONTACTO – CONTENEDOR PRINCIPAL
   ========================================================= */

.contactoContainer {
    width: min(1100px, 90%);
    margin: 0 auto 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* =========================================================
   CONTACTO – TEXTO
   ========================================================= */

.textoContacto h2 {
    font-size: 32px;
    color: #003F80;
    margin-bottom: 16px;
    font-family: 'Montserrat', sans-serif;
}

.textoContacto p {
    font-size: 17px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   CONTACTO – FORMULARIO
   ========================================================= */

.formularioContactoModern {
    background: #f5f7fa;
    padding: 35px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.formularioContactoModern h2 {
    font-size: 24px;
    color: #003F80;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.formularioContactoModern input,
.formularioContactoModern textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}

.formularioContactoModern textarea {
    height: 140px;
    resize: none;
}

.BotonFormulario {
    width: 100%;
    padding: 12px;
    background: #0056b3;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}

.BotonFormulario:hover {
    background: #003F80;
    transform: translateY(-2px);
}

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

@media (max-width: 900px) {
    .contactoContainer {
        grid-template-columns: 1fr;
    }

    .mapaContacto iframe {
        height: 350px;
    }
}

/* =========================================================
   PORTADA ORIGINAL MODERNIZADA clasificadora optica inteligente UHD
   ========================================================= */

.portadaProductoUHD {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    margin-bottom: 50px;
}

.portadaIA-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
}

.portadaIA-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.55)
    );
}

.portadaIA-texto {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #ffffff;
    background: rgba(0,0,0,0.35);
    padding: 20px 40px;
    border-radius: 14px;
    backdrop-filter: blur(4px);
}

.portadaIA-texto h1 {
    font-size: 32px;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

/* =========================================================
   BLOQUE DESCRIPTIVO
   ========================================================= */

.bloqueDescripcionProducto {
    width: min(1000px, 90%);
    margin: 40px auto;
    background: #f5f7fa;
    padding: 35px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    text-align: center;
}

.bloqueDescripcionProducto p {
    font-size: 17px;
    color: #444;
    line-height: 1.7;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   VIDEOS MODERNOS
   ========================================================= */

.contenedorVideosModernos {
    width: min(1100px, 90%);
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 35px;
}

.videoCard {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
}

.videoWrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.videoWrapper iframe,
.videoWrapper video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.videoCard p {
    margin-top: 12px;
    font-size: 15px;
    color: #333;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.tituloSeccion {
    text-align: center;
    margin: 60px 0 20px;
}

.tituloSeccion h2 {
    font-size: 30px;
    color: #003F80;
    font-family: 'Montserrat', sans-serif;
}

/* =========================================================
   CARACTERÍSTICAS – TARJETAS
   ========================================================= */

.gridCaracteristicas {
    width: min(1100px, 90%);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.cardCaracteristica {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.cardCaracteristica:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.cardCaracteristica h3 {
    font-size: 20px;
    color: #003F80;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.cardCaracteristica p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   GALERÍA DE FOTOS
   ========================================================= */

.galeriaProducto {
    width: min(1100px, 90%);
    margin: 20px auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.galeriaProducto img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    transition: transform .3s ease;
}

.galeriaProducto img:hover {
    transform: scale(1.03);
}

/* =========================================================
   VENTAJAS – GRID
   ========================================================= */

.gridVentajas {
    width: min(1100px, 90%);
    margin: 20px auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
}

.ventajaCard {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.ventajaCard h3 {
    font-size: 22px;
    color: #003F80;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.ventajaCard ul {
    padding-left: 20px;
}

.ventajaCard li {
    font-size: 15px;
    color: #444;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   PARÁMETROS
   ========================================================= */

.parametrosImagen {
    width: min(900px, 90%);
    margin: 0 auto 60px;
    text-align: center;
}

.parametrosImagen img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

/* =========================================================
   FORMULARIO
   ========================================================= */

.formularioProducto {
    width: min(700px, 90%);
    margin: 0 auto 80px;
    background: #f5f7fa;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    text-align: center;
}

.formularioProducto h2 {
    font-size: 26px;
    color: #003F80;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.formularioProducto input,
.formularioProducto textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}

.formularioProducto textarea {
    height: 140px;
    resize: none;
}

.formularioProducto button {
    width: 100%;
    padding: 12px;
    background: #0056b3;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}

.formularioProducto button:hover {
    background: #003F80;
    transform: translateY(-2px);
}

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

@media (max-width: 768px) {
    .portadaProductoUHD {
        height: 300px;
    }

    .portadaIA-texto h1 {
        font-size: 24px;
    }

    .galeriaProducto img {
        height: 200px;
    }
}

/* =========================================================
   PORTADA ORIGINAL MODERNIZADA clasificadora de color multifuncion
   ========================================================= */

.portadaProductoColor {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    margin-bottom: 50px;
}

.portadaColor-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
}

.portadaColor-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.55)
    );
}

.portadaColor-texto {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #ffffff;
    background: rgba(0,0,0,0.35);
    padding: 20px 40px;
    border-radius: 14px;
    backdrop-filter: blur(4px);
}

.portadaColor-texto h1 {
    font-size: 32px;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

/* =========================================================
   BLOQUE DESCRIPTIVO
   ========================================================= */

.bloqueDescripcionProducto {
    width: min(1000px, 90%);
    margin: 40px auto;
    background: #f5f7fa;
    padding: 35px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    text-align: center;
}

.bloqueDescripcionProducto p {
    font-size: 17px;
    color: #444;
    line-height: 1.7;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   VIDEO MODERNO
   ========================================================= */

.contenedorVideosModernos {
    width: min(1100px, 90%);
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 35px;
}

.videoCard {
  	width: 350px;
  	margin: 0 auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
}
.videoWrapper {
    position: relative;
    width: 90px;      /* ancho fijo y pequeño */
    height: 70px;     /* altura pequeña */
    margin: 0 auto;    /* centrado */
    overflow: hidden;
    border-radius: 12px;
}

.videoWrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.videoCard p {
    margin-top: 12px;
    font-size: 15px;
    color: #333;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.tituloSeccion {
    text-align: center;
    margin: 60px 0 20px;
}

.tituloSeccion h2 {
    font-size: 30px;
    color: #003F80;
    font-family: 'Montserrat', sans-serif;
}

/* =========================================================
   CARACTERÍSTICAS – TARJETAS
   ========================================================= */

.gridCaracteristicas {
    width: min(1100px, 90%);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.cardCaracteristica {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.cardCaracteristica:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.cardCaracteristica h3 {
    font-size: 20px;
    color: #003F80;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.cardCaracteristica p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   GALERÍA DE FOTOS
   ========================================================= */

.galeriaProducto {
    width: min(1100px, 90%);
    margin: 20px auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.galeriaProducto img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    transition: transform .3s ease;
}

.galeriaProducto img:hover {
    transform: scale(1.03);
}

/* =========================================================
   VENTAJAS – GRID
   ========================================================= */

.gridVentajas {
    width: min(1100px, 90%);
    margin: 20px auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
}

.ventajaCard {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.ventajaCard h3 {
    font-size: 22px;
    color: #003F80;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.ventajaCard ul {
    padding-left: 20px;
}

.ventajaCard li {
    font-size: 15px;
    color: #444;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   PARÁMETROS
   ========================================================= */

.parametrosImagen {
    width: min(900px, 90%);
    margin: 0 auto 60px;
    text-align: center;
}

.parametrosImagen img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

/* =========================================================
   FORMULARIO
   ========================================================= */

.formularioProducto {
    width: min(700px, 90%);
    margin: 0 auto 80px;
    background: #f5f7fa;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    text-align: center;
}

.formularioProducto h2 {
    font-size: 26px;
    color: #003F80;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.formularioProducto input,
.formularioProducto textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}

.formularioProducto textarea {
    height: 140px;
    resize: none;
}

.formularioProducto button {
    width: 100%;
    padding: 12px;
    background: #0056b3;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}

.formularioProducto button:hover {
    background: #003F80;
    transform: translateY(-2px);
}

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

@media (max-width: 768px) {
    .portadaProductoColor {
        height: 300px;
    }

    .portadaColor-texto h1 {
        font-size: 24px;
    }

    .galeriaProducto img {
        height: 200px;
    }
}

/* =========================================================
   PORTADA ORIGINAL MODERNIZADA Mesa Seleccion
   ========================================================= */

.portadaMesaSeleccion {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    margin-bottom: 50px;
}

.portadaMesa-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
}

.portadaMesa-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.55)
    );
}

.portadaMesa-texto {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #ffffff;
    background: rgba(0,0,0,0.35);
    padding: 20px 40px;
    border-radius: 14px;
    backdrop-filter: blur(4px);
}

.portadaMesa-texto h1 {
    font-size: 32px;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

/* =========================================================
   BLOQUE DESCRIPTIVO
   ========================================================= */

.bloqueDescripcionProducto {
    width: min(1000px, 90%);
    margin: 40px auto;
    background: #f5f7fa;
    padding: 35px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    text-align: center;
}

.bloqueDescripcionProducto p {
    font-size: 17px;
    color: #444;
    line-height: 1.7;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   VIDEO MODERNO
   ========================================================= */

.contenedorVideosModernos {
    width: min(1100px, 90%);
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 35px;
}

.videoCard {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
}

.videoWrapper {
    position: relative;
    width: 100%;
    height: 260px; /* Ajustable */
    overflow: hidden;
    border-radius: 12px;
}

.videoWrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.videoCard p {
    margin-top: 12px;
    font-size: 15px;
    color: #333;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.tituloSeccion {
    text-align: center;
    margin: 60px 0 20px;
}

.tituloSeccion h2 {
    font-size: 30px;
    color: #003F80;
    font-family: 'Montserrat', sans-serif;
}

/* =========================================================
   CARACTERÍSTICAS – TARJETAS
   ========================================================= */

.gridCaracteristicas {
    width: min(1100px, 90%);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.cardCaracteristica {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.cardCaracteristica:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.cardCaracteristica h3 {
    font-size: 20px;
    color: #003F80;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.cardCaracteristica p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   GALERÍA DE FOTOS
   ========================================================= */

.galeriaProducto {
    width: min(1100px, 90%);
    margin: 20px auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.galeriaProducto img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    transition: transform .3s ease;
}

.galeriaProducto img:hover {
    transform: scale(1.03);
}

/* =========================================================
   FOOTER MODERNO
   ========================================================= */

.footerModerno {
    background: #0a2a43;
    padding: 40px 0;
    margin-top: 60px;
}

.footerModerno .divFooter {
    width: min(1100px, 90%);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    color: #ffffff;
}

.footerModerno .column p,
.footerModerno .column a {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

.footerModerno .logoFooter {
    width: 140px;
    margin-bottom: 10px;
}

.footerModerno a img {
    width: 32px;
    margin-right: 10px;
}

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

@media (max-width: 768px) {
    .portadaMesaSeleccion {
        height: 300px;
    }

    .portadaMesa-texto h1 {
        font-size: 24px;
    }

    .galeriaProducto img {
        height: 200px;
    }
}

/* =========================================================
   PORTADA CON VÍDEO MODERNIZADA frutos secos
   ========================================================= */

.portadaFrutosModernizada {
    position: relative;
    width: 100%;
    height: 480px;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    margin-bottom: 50px;
}

.portadaFrutosModernizada video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.65);
}

.overlayFrutos {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.55)
    );
}

.textoPortadaFrutos {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 90%);
    text-align: center;
    color: #ffffff;
    background: rgba(0,0,0,0.35);
    padding: 25px 40px;
    border-radius: 14px;
    backdrop-filter: blur(4px);
}

.textoPortadaFrutos h1 {
    font-size: 32px;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
}

.textoPortadaFrutos p {
    font-size: 17px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* =========================================================
   BLOQUE DESCRIPTIVO
   ========================================================= */

.bloqueDescripcionProducto {
    width: min(1000px, 90%);
    margin: 40px auto;
    background: #f5f7fa;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.bloqueDescripcionProducto h2 {
    text-align: center;
    font-size: 28px;
    color: #003F80;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.seccionFrutos {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 30px 0;
}

.seccionFrutos img {
    width: 260px;
    height: 200px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.seccionFrutos p {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   TÍTULO DE SECCIÓN
   ========================================================= */

.tituloSeccion {
    text-align: center;
    margin: 60px 0 20px;
}

.tituloSeccion h2 {
    font-size: 30px;
    color: #003F80;
    font-family: 'Montserrat', sans-serif;
}

/* =========================================================
   TARJETAS DE FRUTOS
   ========================================================= */

.gridFrutos {
    width: min(1100px, 90%);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px;
}

.cardFruto {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.cardFruto:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.cardFruto h3 {
    font-size: 20px;
    color: #003F80;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.cardFruto img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    transition: transform .3s ease;
}

.cardFruto img:hover {
    transform: scale(1.05);
}

/* =========================================================
   FOOTER MODERNO
   ========================================================= */

.footerModerno {
    background: #0a2a43;
    padding: 40px 0;
    margin-top: 60px;
}

.footerModerno .divFooter {
    width: min(1100px, 90%);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    color: #ffffff;
}

.footerModerno .column p,
.footerModerno .column a {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

.footerModerno .logoFooter {
    width: 140px;
    margin-bottom: 10px;
}

.footerModerno a img {
    width: 32px;
    margin-right: 10px;
}

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

@media (max-width: 768px) {

    .portadaFrutosModernizada {
        height: 340px;
    }

    .textoPortadaFrutos h1 {
        font-size: 24px;
    }

    .seccionFrutos {
        flex-direction: column;
        text-align: center;
    }

    .seccionFrutos img {
        width: 100%;
        height: 200px;
    }

    .cardFruto img {
        height: 180px;
    }
}

/* =========================================================
   PORTADA CON VÍDEO MODERNIZADA Marisco
   ========================================================= */

.portadaMariscoModernizada {
    position: relative;
    width: 100%;
    height: 480px;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    margin-bottom: 50px;
}

.portadaMariscoModernizada video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.65);
}

.overlayMarisco {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.55)
    );
}

.textoPortadaMarisco {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 90%);
    text-align: center;
    color: #ffffff;
    background: rgba(0,0,0,0.35);
    padding: 25px 40px;
    border-radius: 14px;
    backdrop-filter: blur(4px);
}

.textoPortadaMarisco h1 {
    font-size: 32px;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
}

.textoPortadaMarisco p {
    font-size: 17px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* =========================================================
   BLOQUE DESCRIPTIVO
   ========================================================= */

.bloqueDescripcionProducto {
    width: min(1000px, 90%);
    margin: 40px auto;
    background: #f5f7fa;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.bloqueDescripcionProducto h2 {
    text-align: center;
    font-size: 28px;
    color: #003F80;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.seccionMarisco {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 30px 0;
}

.seccionMarisco img {
    width: 260px;
    height: 200px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.seccionMarisco p {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   TÍTULO DE SECCIÓN
   ========================================================= */

.tituloSeccion {
    text-align: center;
    margin: 60px 0 20px;
}

.tituloSeccion h2 {
    font-size: 30px;
    color: #003F80;
    font-family: 'Montserrat', sans-serif;
}

/* =========================================================
   TARJETAS DE MARISCOS
   ========================================================= */

.gridMariscos {
    width: min(1100px, 90%);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px;
}

.cardMarisco {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.cardMarisco:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.cardMarisco h3 {
    font-size: 20px;
    color: #003F80;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.cardMarisco img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    transition: transform .3s ease;
}

.cardMarisco img:hover {
    transform: scale(1.05);
}

/* =========================================================
   FOOTER MODERNO
   ========================================================= */

.footerModerno {
    background: #0a2a43;
    padding: 40px 0;
    margin-top: 60px;
}

.footerModerno .divFooter {
    width: min(1100px, 90%);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    color: #ffffff;
}

.footerModerno .column p,
.footerModerno .column a {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

.footerModerno .logoFooter {
    width: 140px;
    margin-bottom: 10px;
}

.footerModerno a img {
    width: 32px;
    margin-right: 10px;
}

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

@media (max-width: 768px) {

    .portadaMariscoModernizada {
        height: 340px;
    }

    .textoPortadaMarisco h1 {
        font-size: 24px;
    }

    .seccionMarisco {
        flex-direction: column;
        text-align: center;
    }

    .seccionMarisco img {
        width: 100%;
        height: 200px;
    }

    .cardMarisco img {
        height: 180px;
    }
}

/* =========================================================
   CONTENEDOR PRINCIPAL Servicio Tecnico
   ========================================================= */

.divServicioTecnico {
    width: min(1100px, 90%);
    margin: 60px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 40px;
    align-items: center;
}

/* =========================================================
   IMAGEN DEL SERVICIO TÉCNICO
   ========================================================= */

.divServicioTecnico img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    object-fit: cover;
}

/* =========================================================
   BLOQUE DE TEXTO + FORMULARIO
   ========================================================= */

.formServicioTecnico {
    background: #f5f7fa;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.formServicioTecnico h1 {
    font-size: 30px;
    color: #003F80;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 15px;
}

.formServicioTecnico p {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
    margin-bottom: 25px;
}

/* =========================================================
   FORMULARIO
   ========================================================= */

.formularioServicioTecnico input,
.formularioServicioTecnico textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}

.formularioServicioTecnico textarea {
    height: 140px;
    resize: none;
}

.formularioServicioTecnico button {
    width: 100%;
    padding: 12px;
    background: #0056b3;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}

.formularioServicioTecnico button:hover {
    background: #003F80;
    transform: translateY(-2px);
}

/* =========================================================
   FOOTER MODERNO
   ========================================================= */

.footerModerno {
    background: #0a2a43;
    padding: 40px 0;
    margin-top: 60px;
}

.footerModerno .divFooter {
    width: min(1100px, 90%);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    color: #ffffff;
}

.footerModerno .column p,
.footerModerno .column a {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

.footerModerno .logoFooter {
    width: 140px;
    margin-bottom: 10px;
}

.footerModerno a img {
    width: 32px;
    margin-right: 10px;
}

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

@media (max-width: 768px) {

    .divServicioTecnico {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .divServicioTecnico img {
        height: 240px;
        object-fit: cover;
    }

    .formServicioTecnico h1 {
        font-size: 24px;
    }
}

/* =========================================================
   CONTENEDOR PRINCIPAL Servicio Comercial
   ========================================================= */

.divServicioComercial {
    width: min(1100px, 90%);
    margin: 60px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 40px;
    align-items: center;
}

/* =========================================================
   IMAGEN DEL SERVICIO COMERCIAL
   ========================================================= */

.divServicioComercial img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    object-fit: cover;
}

/* =========================================================
   BLOQUE DE TEXTO + FORMULARIO
   ========================================================= */

.formServicioComercial {
    background: #f5f7fa;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.formServicioComercial h1 {
    font-size: 30px;
    color: #003F80;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 15px;
}

.formServicioComercial p {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
    margin-bottom: 25px;
}

/* =========================================================
   FORMULARIO
   ========================================================= */

.formularioServicioComercial input,
.formularioServicioComercial textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}

.formularioServicioComercial textarea {
    height: 140px;
    resize: none;
}

.formularioServicioComercial button {
    width: 100%;
    padding: 12px;
    background: #0056b3;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}

.formularioServicioComercial button:hover {
    background: #003F80;
    transform: translateY(-2px);
}

/* =========================================================
   FOOTER MODERNO
   ========================================================= */

.footerModerno {
    background: #0a2a43;
    padding: 40px 0;
    margin-top: 60px;
}

.footerModerno .divFooter {
    width: min(1100px, 90%);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    color: #ffffff;
}

.footerModerno .column p,
.footerModerno .column a {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

.footerModerno .logoFooter {
    width: 140px;
    margin-bottom: 10px;
}

.footerModerno a img {
    width: 32px;
    margin-right: 10px;
}

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

@media (max-width: 768px) {

    .divServicioComercial {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .divServicioComercial img {
        height: 240px;
        object-fit: cover;
    }

    .formServicioComercial h1 {
        font-size: 24px;
    }
}

/* =========================================================
   PORTADA ALMENDRAS
   ========================================================= */

.portadaAlmendrasModernizada {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    margin-bottom: 50px;
}

.portadaAlmendras-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.70);
}

.overlayAlmendras {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.55)
    );
}

.textoPortadaAlmendras {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 90%);
    text-align: center;
    color: #ffffff;
    background: rgba(0,0,0,0.35);
    padding: 25px 40px;
    border-radius: 14px;
    backdrop-filter: blur(4px);
}

.textoPortadaAlmendras h1 {
    font-size: 32px;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
}

.textoPortadaAlmendras p {
    font-size: 17px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.tituloSeccion {
    text-align: center;
    margin: 60px 0 20px;
}

.tituloSeccion h2 {
    font-size: 30px;
    color: #003F80;
    font-family: 'Montserrat', sans-serif;
}

/* =========================================================
   TARJETAS DE MÁQUINAS
   ========================================================= */

.gridMaquinasAlmendras {
    width: min(1100px, 90%);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
}

.cardMaquina {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.cardMaquina:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.cardMaquina h3 {
    font-size: 20px;
    color: #003F80;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.cardMaquina img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 12px;
    transition: transform .3s ease;
}

.cardMaquina img:hover {
    transform: scale(1.05);
}

.cardMaquina p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   VIDEO ALMENDRAS
   ========================================================= */

.videoAlmendrasModernizado {
    width: min(900px, 90%);
    margin: 40px auto 60px;
}

.videoAlmendrasModernizado iframe {
    width: 100%;
    height: 420px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

/* =========================================================
   SECCIÓN INFORMATIVA
   ========================================================= */

.gridSeccionAlmendras {
    width: min(1100px, 90%);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 35px;
}

.cardInfoAlmendra {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
}

.cardInfoAlmendra h3 {
    font-size: 20px;
    color: #003F80;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.cardInfoAlmendra img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 12px;
}

.cardInfoAlmendra p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   NOTA INFORMATIVA
   ========================================================= */

.notaInformativaAlmendras {
    position: relative;
    width: min(1100px, 90%);
    margin: 60px auto;
}

.notaInformativaAlmendras img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 16px;
    filter: brightness(0.65);
}

.textoClasificarAlmendras {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(700px, 90%);
    background: rgba(0,0,0,0.45);
    padding: 25px 40px;
    border-radius: 14px;
    color: #ffffff;
    text-align: center;
    backdrop-filter: blur(4px);
}

.textoClasificarAlmendras h1 {
    font-size: 28px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.textoClasificarAlmendras p {
    font-size: 16px;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   FORMULARIO ALMENDRAS
   ========================================================= */

.divFormularioAlmendras {
    width: min(900px, 90%);
    margin: 60px auto;
    background: #f5f7fa;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    text-align: center;
}

.divFormularioAlmendras h2 {
    font-size: 26px;
    color: #003F80;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.divInput input,
.divInput textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}

.divInput textarea {
    height: 140px;
    resize: none;
}

.divInput button {
    width: 100%;
    padding: 12px;
    background: #0056b3;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}

.divInput button:hover {
    background: #003F80;
    transform: translateY(-2px);
}

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

@media (max-width: 768px) {

    .portadaAlmendrasModernizada {
        height: 300px;
    }

    .textoPortadaAlmendras h1 {
        font-size: 24px;
    }

    .videoAlmendrasModernizado iframe {
        height: 260px;
    }

    .notaInformativaAlmendras img {
        height: 260px;
    }

    .textoClasificarAlmendras h1 {
        font-size: 22px;
    }
}

/* =========================================================
   PORTADA PISTACHOS
   ========================================================= */

.portadaPistachosModernizada {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    margin-bottom: 50px;
}

.portadaPistachos-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.70);
}

.overlayPistachos {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.55)
    );
}

.textoPortadaPistachos {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 90%);
    text-align: center;
    color: #ffffff;
    background: rgba(0,0,0,0.35);
    padding: 25px 40px;
    border-radius: 14px;
    backdrop-filter: blur(4px);
}

.textoPortadaPistachos h1 {
    font-size: 32px;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
}

.textoPortadaPistachos p {
    font-size: 17px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.tituloSeccion {
    text-align: center;
    margin: 60px 0 20px;
}

.tituloSeccion h2 {
    font-size: 30px;
    color: #003F80;
    font-family: 'Montserrat', sans-serif;
}

/* =========================================================
   TARJETAS DE MÁQUINAS
   ========================================================= */

.gridMaquinasPistachos {
    width: min(1100px, 90%);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
}

.cardMaquina {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.cardMaquina:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.cardMaquina h3 {
    font-size: 20px;
    color: #003F80;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.cardMaquina img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 12px;
    transition: transform .3s ease;
}

.cardMaquina img:hover {
    transform: scale(1.05);
}

.cardMaquina p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   VIDEO PISTACHOS
   ========================================================= */

.videoPistachosModernizado {
    width: min(900px, 90%);
    margin: 40px auto 60px;
}

.videoPistachosModernizado iframe {
    width: 100%;
    height: 420px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

/* =========================================================
   SECCIÓN INFORMATIVA
   ========================================================= */

.gridSeccionPistachos {
    width: min(1100px, 90%);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px;
}

.cardInfoPistacho {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
}

.cardInfoPistacho h3 {
    font-size: 20px;
    color: #003F80;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.cardInfoPistacho img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 12px;
}

.cardInfoPistacho p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   NOTA INFORMATIVA
   ========================================================= */

.notaInformativaPistacho {
    position: relative;
    width: min(1100px, 90%);
    margin: 60px auto;
}

.notaInformativaPistacho img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 16px;
    filter: brightness(0.65);
}

.textoClasificarPistacho {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(700px, 90%);
    background: rgba(0,0,0,0.45);
    padding: 25px 40px;
    border-radius: 14px;
    color: #ffffff;
    text-align: center;
    backdrop-filter: blur(4px);
}

.textoClasificarPistacho h1 {
    font-size: 28px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.textoClasificarPistacho p {
    font-size: 16px;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   FORMULARIO PISTACHOS
   ========================================================= */

.divFormularioPistacho {
    width: min(900px, 90%);
    margin: 60px auto;
    background: #f5f7fa;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    text-align: center;
}

.divFormularioPistacho h2 {
    font-size: 26px;
    color: #003F80;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.divInput input,
.divInput textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}

.divInput textarea {
    height: 140px;
    resize: none;
}

.divInput button {
    width: 100%;
    padding: 12px;
    background: #0056b3;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}

.divInput button:hover {
    background: #003F80;
    transform: translateY(-2px);
}

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

@media (max-width: 768px) {

    .portadaPistachosModernizada {
        height: 300px;
    }

    .textoPortadaPistachos h1 {
        font-size: 24px;
    }

    .videoPistachosModernizado iframe {
        height: 260px;
    }

    .notaInformativaPistacho img {
        height: 260px;
    }

    .textoClasificarPistacho h1 {
        font-size: 22px;
    }
}

/* =========================================================
   PORTADA NUECES
   ========================================================= */

.portadaNuecesModernizada {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    margin-bottom: 50px;
}

.portadaNueces-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.70);
}

.overlayNueces {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.55)
    );
}

.textoPortadaNueces {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 90%);
    text-align: center;
    color: #ffffff;
    background: rgba(0,0,0,0.35);
    padding: 25px 40px;
    border-radius: 14px;
    backdrop-filter: blur(4px);
}

.textoPortadaNueces h1 {
    font-size: 32px;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
}

.textoPortadaNueces p {
    font-size: 17px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.tituloSeccion {
    text-align: center;
    margin: 60px 0 20px;
}

.tituloSeccion h2 {
    font-size: 30px;
    color: #003F80;
    font-family: 'Montserrat', sans-serif;
}

/* =========================================================
   TARJETAS DE MÁQUINAS
   ========================================================= */

.gridMaquinasNueces {
    width: min(1100px, 90%);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
}

.cardMaquina {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.cardMaquina:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.cardMaquina h3 {
    font-size: 20px;
    color: #003F80;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.cardMaquina img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 12px;
    transition: transform .3s ease;
}

.cardMaquina img:hover {
    transform: scale(1.05);
}

.cardMaquina p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   VIDEO NUECES
   ========================================================= */

.videoNuecesModernizado {
    width: min(900px, 90%);
    margin: 40px auto 60px;
}

.videoNuecesModernizado iframe {
    width: 100%;
    height: 420px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

/* =========================================================
   SECCIÓN INFORMATIVA
   ========================================================= */

.gridSeccionNueces {
    width: min(1100px, 90%);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px;
}

.cardInfoNuez {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
}

.cardInfoNuez h3 {
    font-size: 20px;
    color: #003F80;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.cardInfoNuez img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 12px;
}

.cardInfoNuez p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   FORMULARIO NUECES
   ========================================================= */

.divFormularioNueces {
    width: min(900px, 90%);
    margin: 60px auto;
    background: #f5f7fa;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    text-align: center;
}

.divFormularioNueces h2 {
    font-size: 26px;
    color: #003F80;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.divInput input,
.divInput textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}

.divInput textarea {
    height: 140px;
    resize: none;
}

.divInput button {
    width: 100%;
    padding: 12px;
    background: #0056b3;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}

.divInput button:hover {
    background: #003F80;
    transform: translateY(-2px);
}

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

@media (max-width: 768px) {

    .portadaNuecesModernizada {
        height: 300px;
    }

    .textoPortadaNueces h1 {
        font-size: 24px;
    }

    .videoNuecesModernizado iframe {
        height: 260px;
    }

    .cardInfoNuez img {
        height: 180px;
    }
}

/* =========================================================
   PORTADA CAMARONES
   ========================================================= */

.portadaCamaronesModernizada {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    margin-bottom: 50px;
}

.portadaCamarones-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.70);
}

.overlayCamarones {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.55)
    );
}

.textoPortadaCamarones {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 90%);
    text-align: center;
    color: #ffffff;
    background: rgba(0,0,0,0.35);
    padding: 25px 40px;
    border-radius: 14px;
    backdrop-filter: blur(4px);
}

.textoPortadaCamarones h1 {
    font-size: 32px;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
}

.textoPortadaCamarones p {
    font-size: 17px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.tituloSeccion {
    text-align: center;
    margin: 60px 0 20px;
}

.tituloSeccion h2 {
    font-size: 30px;
    color: #003F80;
    font-family: 'Montserrat', sans-serif;
}

/* =========================================================
   TARJETAS DE MÁQUINAS
   ========================================================= */

.gridMaquinasCamarones {
    width: min(1100px, 90%);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
}

.cardMaquina {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.cardMaquina:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.cardMaquina h3 {
    font-size: 20px;
    color: #003F80;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.cardMaquina img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 12px;
    transition: transform .3s ease;
}

.cardMaquina img:hover {
    transform: scale(1.05);
}

.cardMaquina p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   VIDEO CAMARONES
   ========================================================= */

.videoCamaronesModernizado {
    width: min(900px, 90%);
    margin: 40px auto 60px;
}

.videoCamaronesModernizado iframe {
    width: 100%;
    height: 420px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

/* =========================================================
   SECCIÓN INFORMATIVA
   ========================================================= */

.gridSeccionCamarones {
    width: min(1100px, 90%);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px;
}

.cardInfoCamarones {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    text-align: center;
}

.cardInfoCamarones h3 {
    font-size: 20px;
    color: #003F80;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.cardInfoCamarones img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 12px;
}

.cardInfoCamarones p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   NOTA INFORMATIVA
   ========================================================= */

.notaInformativaCamarones {
    position: relative;
    width: min(1100px, 90%);
    margin: 60px auto;
}

.notaInformativaCamarones img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 16px;
    filter: brightness(0.65);
}

.textoClasificarCamarones {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(700px, 90%);
    background: rgba(0,0,0,0.45);
    padding: 25px 40px;
    border-radius: 14px;
    color: #ffffff;
    text-align: center;
    backdrop-filter: blur(4px);
}

.textoClasificarCamarones h1 {
    font-size: 28px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.textoClasificarCamarones p {
    font-size: 16px;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   FORMULARIO CAMARONES
   ========================================================= */

.divFormularioCamarones {
    width: min(900px, 90%);
    margin: 60px auto;
    background: #f5f7fa;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    text-align: center;
}

.divFormularioCamarones h2 {
    font-size: 26px;
    color: #003F80;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.divInput input,
.divInput textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}

.divInput textarea {
    height: 140px;
    resize: none;
}

.divInput button {
    width: 100%;
    padding: 12px;
    background: #0056b3;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}

.divInput button:hover {
    background: #003F80;
    transform: translateY(-2px);
}

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

@media (max-width: 768px) {

    .portadaCamaronesModernizada {
        height: 300px;
    }

    .textoPortadaCamarones h1 {
        font-size: 24px;
    }

    .videoCamaronesModernizado iframe {
        height: 260px;
    }

    .notaInformativaCamarones img {
        height: 260px;
    }

    .textoClasificarCamarones h1 {
        font-size: 22px;
    }
}