/* ==========================================================================
   HOJA DE ESTILOS UNIFICADA - PROYECTO ZILLION (CATEGORÍAS Y PRODUCTOS)
   ========================================================================== */

/* =======================================================
   1. VARIABLES Y RESETEO GENERAL
   ======================================================= */
:root {
    --color-primario: #0d468e !important;
    --color-secundario: #155A96 !important;
    --gris-claro: #f4f4f4 !important;
    --gris-texto: #666 !important;
}

h1, h2, h3, h4, h5, p, a{
    font-family: "Inter", sans-serif !important;
}
.nav a{
    font-family: Myriad Pro Light !important;
}
.footer *{
    font-family: Myriad Pro Light !important;
}
h1{
    font-size: 42px !important;
    line-height: 44px !important;
}
h2{
    font-size: 36px !important;
    line-height: 38px !important;
    text-transform: inherit !important;
    font-weight: normal !important;
}
h3{
    font-size: 28px !important;
    line-height: 30px !important;
}
p{
    font-size: 17px !important;
}
.descripcion-corta{
    font-family: "Inter", sans-serif !important;

}
.listado_taxonomia h2{
   font-size: 18px !important; 
}
.plantilla-zillion .cuerpo, 
.plantilla-zillion .destino.contenido-producto, 
.plantilla-zillion .pro_dub_comun,
.cuerpo, 
.destino.contenido-producto, 
.pro_dub_comun {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    float: none !important;
}

/* Ocultar footer genérico */
.footer-interior,
.categoria-zillion .footer-interior, 
.term-219 .footer-interior {
    display: none !important;
}

.footer {
    background-color: var(--main-gorlan-color);
    border-top: 1px solid white !important;
}

/* Contenedores Centrales */
.container-zillion,
.contenedor-producto,
.plantilla-zillion .pro_dub_comun .centrado,
.plantilla-zillion .seccion-mensajes-destacados .grid-mensajes,
.plantilla-zillion .seccion-descripcion-dual,
.plantilla-zillion .item_destino.descripcion-producto,
.plantilla-zillion .item_destino.descargas {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px ;
    font-family: Arial, sans-serif !important;
    box-sizing: border-box !important;
}
section.listado_taxonomia{
    border-bottom: 0px !important;
    border-top: 0px !important;
}

/* Breadcrumbs */
p#breadcrumbs * {
    font-size: 12px;
    color: grey;
    text-transform: uppercase;
}

span.breadcrumb_last strong {
    color: #09032D !important;
}

.migas-de-pan-zillion {
    /*margin-bottom: 20px;*/
    font-size: 11px;
    text-transform: uppercase;
    color: #888888;
    letter-spacing: 0.5px;
}

.migas-de-pan-zillion a { color: #888888; text-decoration: none; }
.migas-de-pan-zillion a:hover { color: #051475; }

/* =======================================================
   2. CABECERAS Y TÍTULOS PRINCIPALES
   ======================================================= */
/* Cabecera Categorías */
.banner-smart-grids {
    padding: 130px 20px 40px 20px; 
    background-image: url(https://pronutec.gorlan.com/wp-content/uploads/2026/06/zillion-bg-2-scaled-2.jpg);
    /*background: linear-gradient(90deg, #051475 0%, #0045e5 50%, #1579ff 100%);*/
    color: #ffffff;
    text-align: center;
    background-position: center bottom;
    background-size: cover;
}
.banner-smart-grids .banner-titulo {
    font-size: 42px;
    font-weight: 400;
    margin-bottom: 15px;
    color: #ffffff;
    line-height: 1.2;
}
.banner-smart-grids .banner-descripcion {
    font-size: 16px;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.5;
    color: #f1f1f1;
    font-weight: 300;
}

/* Cabecera Productos */
.header .centrado { min-height: auto !important; padding: 10px; }
.single-productos .header { background-color: #09032d9c !important; }

.cabecera-zillion-custom {
    background: linear-gradient(90deg, #071739 0%, #173b88 50%, #071739 100%) !important;
    color: white !important;
    text-align: center !important;
    padding: 150px 0px 30px 0px !important;
    margin-bottom: 30px !important;
    background-image: url('https://pronutec.gorlan.com/wp-content/uploads/2026/06/zillion-bg-2-scaled-2.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.cabecera-zillion-custom h2 {
    color: white !important;
    font-size: 35px !important;
    margin: 0 !important;
    font-weight: 400 !important;
}
p.banner-descripcion {
    width: 50%;
}

/* Títulos Secciones Blancas */
.main-categoria-zillion { padding-top: 30px; background-color: #ffffff; }

.titulo-principal-categoria,
.titulo-principal-producto,
.titulo-principal-categoria-zillion {
    font-size: 36px !important;
    color: #09032D !important;
    font-weight: 400 !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    display: block !important;
    width: 100% !important;
}

/* =======================================================
   3. CATEGORÍAS: CARRUSEL NATIVO CSS Y TARJETAS
   ======================================================= */
.plantilla-zillion .listado_taxonomia {
    background-color: transparent; 
    padding: 0px 0 80px 0;
}
.plantilla-zillion .listado_taxonomia .centrado {
    display: flex !important;
    flex-wrap: nowrap !important; 
    overflow-x: auto !important;  
    scroll-snap-type: x mandatory; 
    gap: 20px;
    margin: 0 auto;
    padding: 10px 20px 25px 20px; 
    width: 100% !important;
    -webkit-overflow-scrolling: touch; 
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}
.plantilla-zillion .listado_taxonomia .centrado::-webkit-scrollbar { display: none !important; }

.plantilla-zillion .listado_taxonomia .centrado article {
    flex: 0 0 calc((100% - (3 * 20px)) / 4.25) !important; 
    scroll-snap-align: start; 
    border: 0px solid transparent !important;
    width: auto !important;
}

.plantilla-zillion .bloque_taxonomy {
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 45%, #a8a8a8 100%);
    border-radius: 8px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 380px; 
    transition: all 0.3s ease;
    border: none; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    position: relative; 
}

.plantilla-zillion .bloque_taxonomy h2.enlace {
    order: 1; 
    margin: 0 0 20px 0;
    font-size: 17px !important;
    font-weight: 500;
    line-height: 20px !important;
    z-index: 2; 
    background: transparent;
    width: 86%;
}

.plantilla-zillion .bloque_taxonomy h2.enlace a { color: #0d0b26; text-decoration: none; transition: color 0.3s ease; }
.plantilla-zillion .bloque_taxonomy h2.enlace a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; }

.plantilla-zillion .bloque_taxonomy > a {
    order: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 180px; margin-top: auto; z-index: 2; transition: opacity 0.3s ease;
}

.plantilla-zillion .bloque_taxonomy img.imagen { max-width: 100%; max-height: 100%; object-fit: contain; }
.categoria-zillion .listado_taxonomia .centrado article img,
.container-zillion .listado_taxonomia .centrado article img { height:180px !important; }

.plantilla-zillion .bloque_taxonomy .descripcion-corta {
    display: none; order: 2; color: #ffffff; font-size: 14px; line-height: 1.5; margin-top: 10px; width: 90%; z-index: 2;
}

/* Hover Intercambio */
.plantilla-zillion .bloque_taxonomy:hover { background: linear-gradient(to bottom, #11083e 0%, #2910d6 45%, #766bf7 75%, #e8e8e8 100%); transform: translateY(-5px); }
.plantilla-zillion .bloque_taxonomy:hover h2.enlace a { color: #ffffff; font-weight: 600;}
.plantilla-zillion .bloque_taxonomy:hover > a { display: none !important; }
.plantilla-zillion .bloque_taxonomy:hover .descripcion-corta { display: block; margin: auto 0; animation: fadeInZillion 0.4s ease forwards; margin-bottom: 40px; }


@keyframes fadeInZillion { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Bullets Carrusel */
.carrusel-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 25px; width: 100%; }
.carrusel-dots .dot { width: 10px; height: 10px; border-radius: 50%; background-color: #cccccc; cursor: pointer; transition: all 0.3s ease; }
.carrusel-dots .dot.active { background-color: #0d0b26; width: 24px; border-radius: 6px; }

/* =======================================================
   4. LAYOUT INTERIOR DE PRODUCTO Y BLOQUES ACF
   ======================================================= */
/* Descripción (Texto + Imagen) */
.layout-desc-img {
    grid-template-columns: 70% 30%;
    display: grid !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    margin-bottom: 50px !important;
    width: 100% !important;
}
.col-texto-desc {
    flex: 1 1 50% !important; 
    min-width: 300px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #09032D !important;
    width: 70%;
}
.col-imagen-desc {
    flex: 1 1 40% !important;
    min-width: 300px !important;
    background: url(https://pronutec.gorlan.com/wp-content/uploads/2026/06/zillion-bg-product.jpg);
    border-radius: 8px !important;
    padding: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background-size: cover !important;
    height: 400px;
}
.col-imagen-desc img { max-width: 100% !important; height: auto !important; object-fit: contain !important; }
.col-imagen-desc .owl-stage { display: flex; align-items: end; }

@media (min-width: 320px) and (max-width: 480px) {
    .plantilla-zillion .listado_taxonomia .centrado article{
        flex: 0 0 85% !important; 
        width: 85% !important;
        scroll-snap-align: center !important;
    }
    .plantilla-zillion .listado_taxonomia .centrado {
        padding-left: 20px !important;
        padding-right: 20px !important;
        scroll-padding: 0 20px !important; /* Evita que la tarjeta se pegue al borde izquierdo al hacer scroll */
    }
    .cuerpo section.seccion-descripcion-dual{
        padding: 0px !important;
    }
}

/* Grid Alternativo (Descripción Categoría) */
.plantilla-zillion section.pro_dub_comun .item_destino h2 { text-transform:normal !important; color:#09032D !important; }
.plantilla-zillion .item_destino.descripcion-producto { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 50px !important; align-items: top !important; }
.plantilla-zillion .descripcion-producto h2.control { font-size: 32px; color: #09032D !important; margin-bottom: 20px; font-weight: 400; text-transform:normal !important; }
.plantilla-zillion .control p, .plantilla-zillion .columna-texto-izq, .plantilla-zillion .titulo-lista-manual { color: #09032D !important; }
/*.plantilla-zillion .descripcion-producto .imagen-destacada img { width: 80%; height: auto; border-radius: 4px; margin:auto; }*/

/* Sección Dual (Texto Izq + Lista Der) */
.cuerpo section.seccion-descripcion-dual {margin-top: 50px !important;margin-bottom: 50px !important;}
.seccion-descripcion-dual { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; margin-top: 50px; margin-bottom: 50px; }
.columna-texto-izq { font-size: 16px; line-height: 1.6; width:66% !important; }
.columna-texto-izq p {color:#09032D ;}
.columna-texto-izq h2 { font-size: 32px; color: #09032D !important; margin-bottom: 20px; font-weight: 400; line-height:34px; }
.columna-lista-der .titulo-lista-manual { font-size: 16px !important; font-weight: 500; margin-bottom: 20px; color: #0d0b26; }
.caja-fondo-gris { background-color: #f4f4f4; border: none; border-radius: 8px; padding: 20px 30px; }
.lista-productos-numerada { list-style: none; padding: 0; margin: 0; }
.lista-productos-numerada li { display: flex; align-items: top; padding: 15px 0; border-bottom: 1px solid #7a7a7a; font-size: 15px; color: #09032D; transition: border-color 0.3s ease; width: 94%;}
.lista-productos-numerada li:first-child { border-top: 1px solid #7a7a7a; }
.lista-productos-numerada .numero { font-weight: 400; margin-right: 8px; margin-top: 2px;}
.lista-productos-numerada li:hover { border-bottom: 2px solid #2626FF; }
ul.lista-productos-numerada li {
    display: flex;
    flex-direction: column;
}

/*Sección Dual (Texto Izq + Lista Der) FICHA DE PRODUCTO */
.single-productos .columna-texto-izq{display: none;}
.single-productos .seccion-descripcion-dual{display: flex;}
.single-productos .columna-lista-der {width: 100%;}
.single-productos .lista-productos-numerada { display: grid; grid-template-columns: 50% 50%;column-gap: 30px;}
.single-productos .lista-productos-numerada li:first-child{border-top:0px;}
/* Características Producto Grid */
.caracteristicas-bloque { display: block !important; width: 100% !important; clear: both !important; }
.titulo-caracteristicas { font-size: 18px !important; font-weight: normal !important; margin-bottom: 20px !important; color: #09032D; }
.lista-caracteristicas { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 40px !important; list-style: none !important; padding: 20px !important; margin-bottom: 50px !important;margin-top: 50px !important; width: 100% !important; background-color: #F2F2F2; box-sizing: border-box !important; border-radius: 8px; }
.lista-caracteristicas li { padding: 15px 0 !important; border-bottom: 1px solid #ddd !important; border-top: 1px solid transparent !important; font-size: 15px !important; color: #333 !important; }
.lista-caracteristicas li:first-child, .lista-caracteristicas li:nth-child(2) { border-top: 1px solid #ddd !important; }

/* Frase Destacada */
.frase-destacada { background-color: #f2f2f4; padding: 60px 20px; display: flex; flex-direction: column;justify-content: center; align-items: center;box-sizing: border-box; margin-bottom: 50px; margin-top: 50px; border-radius: 8px; }
.frase-destacada p { font-family: "Barlow", sans-serif; font-size: 16px; line-height: 19px; color: #09032D; text-align: center; max-width: 750px; margin: 0; font-weight: 400; }
.frase-destacada p .subrayado { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.frase-destacada h3{color: #09032D !important;font-weight: normal !important;margin-top: 10px !important;margin-bottom: 10px !important;text-align: center;}


/* Mensajes Destacados (Full Width) */
.seccion-mensajes-destacados { background-color: #f7f7f7; padding: 80px 20px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 50px; margin-bottom: 50px; }
.titulo-mensajes { text-align: center; color: #09032D; font-size: 24px; font-weight: 500;margin-bottom: 10px; line-height: 1.4; margin: 0 auto 0px auto; max-width: 600px; }
.descripcion-mensajes { text-align: center; color: #09032D; margin: 0 auto 50px auto; max-width: 600px; }
.grid-mensajes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; }
.tarjeta-mensaje { background-color: #2626FF; color: #ffffff; padding: 30px 25px; border-radius: 6px; display: flex; align-items: center; justify-content: flex-start; min-height: 140px; }
.tarjeta-mensaje p { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.3; text-align: left; }
#post-11144 > div.cuerpo > div > div:nth-child(2) > section > div > article:nth-child(4) p { width: 90%; }

/* Modos de Uso (Enfoques) */
.enfoques-despliegue { margin-bottom: 60px; width: 100%; clear: both; margin-top: 50px; margin-bottom: 50px !important;    display: flex;flex-direction: column;justify-content: center;align-items: center;}
.titulo-seccion-dinamica { width:80%;margin-bottom: 30px !important; text-align:center; font-size: 32px; color: #09032D !important; font-weight: 400; text-transform: normal !important; }
.enfoques-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; align-items: stretch; }
.enfoque-card { background: #ffffff; border: 1px solid #eaeaef; border-radius: 8px; padding: 35px 25px; display: flex; flex-direction: column; height: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.enfoque-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.enfoque-card h3 { font-size: 19px !important; font-weight: 700; color: #09032D; margin: 0 0 15px 0 !important; text-transform: none !important; }
.enfoque-card-desc { font-size: 14px; line-height: 1.6; color: #09032D; margin-bottom: 25px; }
.enfoque-productos-lista { list-style: none !important; padding: 0 !important; margin: auto 0 0 0 !important; }
.enfoque-productos-lista li { border-top: 1px solid #f0f0f5; padding: 0 !important; }
.enfoque-productos-lista li:first-child { border-top: none; }
.enfoque-productos-lista a { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; text-decoration: none; color: #09032D !important; font-size: 13.5px; transition: all 0.2s ease; }
.enfoque-productos-lista a:hover { color: #2626FF !important; padding-left: 5px; }
.prod-arrow { color: #bbb; font-size: 18px; font-weight: bold; }
span.prod-title {font-weight: 600;}
.enfoque-card{background-image: linear-gradient(180deg, #B2F9A2 0%, #F2F2F2 100%);}

/* Banner Descargas */
.plantilla-zillion .item_destino.descargas { background: linear-gradient(90deg, #e0f7f9 0%, #b3e5fc 100%); padding: 40px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 80px; border-radius: 4px; }
.plantilla-zillion .descargas h2 { font-size: 28px; color: #0d0b26; margin: 0 0 5px 0; }
.plantilla-zillion .descargas ul { list-style: none; padding: 0; margin: 0; }
.plantilla-zillion .descargas a.pdf, .plantilla-zillion .descargas a.pdf_info { background-color: #1263a8; color: white; padding: 15px 30px; border-radius: 4px; text-decoration: none; font-weight: bold; display: inline-flex; align-items: center; }
.plantilla-zillion .descargas a.pdf:hover { background-color: #0d4a82; }
.plantilla-zillion section.pro_dub_comun .item_destino.descargas ul li a { text-transform: inherit; }
/*.plantilla-zillion section.pro_dub_comun .item_destino.descargas ul li a span { width: 210px !important; }*/
.categoria-zillion section.pro_dub_comun .item_destino.descargas ul li a:before { left: 20px !important; }

.banner-descarga-estatico, .plantilla-zillion .banner-descarga-estatico {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    background: linear-gradient(90deg, #e0f2f1 0%, #80cbc4 100%) !important;
    background-image: url('https://pronutec.gorlan.com/wp-content/uploads/2026/06/zillion-bg-descarga.jpg') !important;
    background-size: cover !important;
    padding: 30px 40px !important;
    border-radius: 8px !important;
    margin-bottom: 60px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 150px;
}
.banner-descarga-estatico .textos h3, .plantilla-zillion .banner-descarga-estatico .textos h3 { font-weight:normal;margin: 0 !important; font-size: 25px !important; color: #09032D !important; }
.banner-descarga-estatico .textos p, .plantilla-zillion .banner-descarga-estatico .textos p { margin: 5px 0 0 !important; color: #09032D !important; }
.btn-descarga, .container-zillion .btn-descarga, .plantilla-zillion .btn-descarga {
    background-color: transparent;
    color: white !important;
    border: 1px solid white;
    padding: 12px 24px !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.3 !important;
    font-size: 16px;
    margin-top: 30px;
}
.btn-descarga img{
    filter: invert(1);
}
.descargas-boton {
    width: 30%;
}
.descargas-boton span{
    font-weight: 500 !important;
    margin-left: 40px;
}
.btn-descarga svg, .plantilla-zillion .btn-descarga svg { flex-shrink: 0 !important; }

.btn-descarga-azul, .container-zillion .btn-descarga-azul, .plantilla-zillion .btn-descarga-azul {
    background-color: #2626FF;
    color: white !important;
    border: 1px solid #2626FF;
    padding: 12px 24px !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.3 !important;
    font-size: 16px;
    margin-top: 30px;
}
.btn-descarga-azul img{
    filter: invert(1);
}
.btn-descarga-azul svg, .plantilla-zillion .btn-descarga-azul svg { flex-shrink: 0 !important; }
/* =======================================================
   5. PRODUCTOS RELACIONADOS
   ======================================================= */
.seccion-relacionados { 
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto 60px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    clear: both !important;
}
.seccion-relacionados h2 { 
    font-size: 32px !important;
    color: #09032D !important;
    margin-top: 10px !important;
    margin-bottom: 40px !important;
    border: none !important; 
    display: block !important;
}
.grid-productos {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
}
.single-productos article { margin-top: 0px !important; }
.tarjeta-producto {
    background-color: #f5f5f5 !important; 
    background-image: url('https://pronutec.gorlan.com/wp-content/uploads/2026/06/zillion-producto-relacionado.png') !important; 
    background-repeat: no-repeat !important; 
    background-position: -10px 19px !important; 
    background-size: contain !important; 
    padding: 40px 30px !important;
    border-radius: 8px !important;
    transition: transform 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important; 
}
.tarjeta-producto:hover { transform: translateY(-5px) !important; }
.tarjeta-producto a { display: flex !important; flex-direction: column !important; text-decoration: none !important; height: 100% !important; text-align: left !important; }
.tarjeta-producto .titulo-producto { font-size: 14px !important; font-weight: bold !important; color: #09032D !important; margin: 0 0 30px 0 !important; text-transform: uppercase !important; line-height: 1.4 !important; }
.tarjeta-producto .imagen-producto { width: 100% !important; text-align: center !important; margin-bottom: 30px !important; flex-grow: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 180px !important; z-index: 1; }
.tarjeta-producto img { max-width: 100% !important; max-height: 185px !important; height: auto !important; object-fit: contain !important; mix-blend-mode: multiply !important; }
.tarjeta-producto .extracto-producto p { font-size: 11px !important; color: #09032D !important; line-height: 1.6 !important; margin: 0 !important; text-transform: uppercase !important; }


/* =======================================================
   6. FORMULARIOS (HUBSPOT)
   ======================================================= */

   form#hsForm_87fbe5cf-cbdc-4e89-aa6c-caca69e9b34b .hs_firstname, form#hsForm_668329c6-f3ae-4b57-941d-de7f311e1b6e .hs_firstname,
   form#hsForm_87fbe5cf-cbdc-4e89-aa6c-caca69e9b34b .hs_lastname, form#hsForm_668329c6-f3ae-4b57-941d-de7f311e1b6e .hs_lastname,
   form#hsForm_87fbe5cf-cbdc-4e89-aa6c-caca69e9b34b .hs_email, form#hsForm_668329c6-f3ae-4b57-941d-de7f311e1b6e .hs_email,
   form#hsForm_87fbe5cf-cbdc-4e89-aa6c-caca69e9b34b .hs_tipo_de_consulta, form#hsForm_668329c6-f3ae-4b57-941d-de7f311e1b6e .hs_tipo_de_consulta,
   form#hsForm_87fbe5cf-cbdc-4e89-aa6c-caca69e9b34b .hs-dependent-field, form#hsForm_668329c6-f3ae-4b57-941d-de7f311e1b6e .hs-dependent-field,
   form#hsForm_87fbe5cf-cbdc-4e89-aa6c-caca69e9b34b .hs-dependent-field, form#hsForm_668329c6-f3ae-4b57-941d-de7f311e1b6e .hs-dependent-field{
    width: 100% !important;
   }
/* Wrappers específicos */
.plantilla-zillion .formulario-blanco.formulario-estrecho,
.seccion-contacto-full {
    background-color: #0C5A9E !important; 
    color: white !important;
    padding: 60px 20px !important;
    margin-top: 50px !important;
    margin-bottom: 50px !important;
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    display: block !important;
    clear: both !important;
    box-sizing: border-box;
}

.formulario-zillion,
.contenedor-contacto {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px;
    text-align: center !important;
}

.plantilla-zillion .formulario-blanco.formulario-estrecho h3,
.formulario-zillion h3,
.contenedor-contacto h3 { 
    /*font-size: 32px !important; */
    margin-bottom: 40px !important; 
    color: white !important; 
    font-weight: normal !important;
    text-transform: inherit !important;
    text-align: center !important;
    font-family: sans-serif;
}

.seccion-contacto-full .hs-form fieldset,
.seccion-contacto-full .hs-form label:not(.hs-form-booleancheckbox-display),
.formulario-zillion .hs-form-field > label:not(.hs-form-booleancheckbox-display) { 
    display: none !important; 
}

.seccion-contacto-full .hs-form,
.formulario-zillion form.hs-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0px 40px !important;
    align-items: stretch !important;
    text-align: left !important;
}

.formulario-zillion .hs-form-field { margin-bottom: 5px !important; grid-column: 1; }

.seccion-contacto-full .hs-form > .hs_firstname,
.seccion-contacto-full .hs-form > .hs_lastname,
.seccion-contacto-full .hs-form > .hs_email,
.seccion-contacto-full .hs-form > .hs_tipo_de_consulta,
.seccion-contacto-full .hs-form > .hs-dependent-field { 
    grid-column: 1 / 2 !important; 
}

.seccion-contacto-full .hs-form > .hs_message,
.formulario-zillion .hs_message {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 7 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.seccion-contacto-full .hs_message .input,
.seccion-contacto-full .hs_message textarea,
.formulario-zillion .hs_message .input, 
.formulario-zillion .hs_message textarea { 
    height: 100% !important; 
    min-height: 150px !important; 
}

.seccion-contacto-full .hs-form > .legal-consent-container,
.seccion-contacto-full .hs-form > .hs_submit,
.formulario-zillion .legal-consent-container, 
.formulario-zillion .hs_submit { 
    grid-column: 1 / -1 !important; 
}

/* Inputs */
.seccion-contacto-full .hs-input,
.formulario-zillion #hsForm_87fbe5cf-cbdc-4e89-aa6c-caca69e9b34b .hs-input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    color: white !important;
    padding: 12px 15px !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    outline: none !important;
}

.seccion-contacto-full .hs-input::placeholder,
.formulario-zillion .hs-input::placeholder,
.formulario-zillion #hsForm_87fbe5cf-cbdc-4e89-aa6c-caca69e9b34b .hs-input::-webkit-input-placeholder,
.formulario-zillion #hsForm_87fbe5cf-cbdc-4e89-aa6c-caca69e9b34b .hs-input::-moz-placeholder,
.formulario-zillion #hsForm_87fbe5cf-cbdc-4e89-aa6c-caca69e9b34b .hs-input:-ms-input-placeholder,
.formulario-zillion #hsForm_87fbe5cf-cbdc-4e89-aa6c-caca69e9b34b .hs-input:-moz-placeholder { 
    color: rgba(255, 255, 255, 0.8) !important; 
    opacity: 1 !important; 
}

.seccion-contacto-full select.hs-input,
.formulario-zillion select.hs-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    height: 48px !important; 
}

.formulario-zillion select.hs-input option { background-color: #0056b3 !important; color: #ffffff !important; }
.formulario-zillion #hsForm_87fbe5cf-cbdc-4e89-aa6c-caca69e9b34b select.is-placeholder { color: #ffffff !important; opacity: 1 !important; }

/* Checkbox Legal */
.hs-form-booleancheckbox input,
li.hs-form-booleancheckbox input { border: 0px solid transparent !important; padding: 0px !important; }
li.hs-form-booleancheckbox a,
.formulario-zillion .hs-form-booleancheckbox-display a { color: white !important; text-decoration: underline !important; }

.formulario-zillion .hs-form-booleancheckbox-display { color: #ffffff !important; font-size: 14px !important; display: flex !important; align-items: flex-start !important; gap: 10px; margin-top: 10px; }

/* Botones */
.actions { text-align: center; }
.hbspt-form input.hs-button.primary.large,
.formulario-zillion .hs-button.primary {
    background-color: #ffffff !important;
    color: #0056b3 !important;
    border: none !important;
    padding: 15px 80px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: block !important;
    margin: 20px auto 0 !important;
    height: auto !important;
    width: auto !important;
    transition: background 0.3s ease;
}
.formulario-zillion .hs-button.primary:hover { background-color: #f0f0f0 !important; }


/* =======================================================
   7. SECCIONES INFERIORES Y NEWSLETTER
   ======================================================= */
/* 3 Tarjetas Inferiores */
.grid-3-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin: 40px auto 40px auto !important; 
    /*padding: 0 20px !important;*/
    position: relative !important;
}
.card-inferior {
    background-size: cover !important;
    background-position: center !important;
    padding: 40px 20px !important;
    color: white !important;
    min-height: 250px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-radius: 8px !important;
    align-items: center;
}
.card-inferior div{width: 100%;}
.card-inferior h3 { margin: 0px !important; color: white !important; font-weight: normal;}
.card-inferior p { font-size: 19px !important; margin: 0 !important; }

.card-inferior.card-noticias { background-color: #f2f2f2 !important; background-image: none !important; padding: 30px !important; justify-content: flex-start !important; }
.card-noticias h3 { color: #09032D !important; margin-bottom: 20px !important; font-size: 28px !important; }
.noticia-item { display: block; text-decoration: none; padding: 5px 0; border-top: 1px solid #d1d1d1; transition: all 0.3s ease; }
.noticia-item:hover { background-color: rgba(0,0,0,0.03); }
.noticia-fecha { display: block; font-size: 11px; font-weight: 700; color: #000; text-transform: lowercase; margin-bottom: 4px; }
.noticia-titulo { color: #09032D; font-size: 15px; line-height: 1.3; font-weight: 600; margin: 0 0 4px 0; }
.noticia-extracto, p.noticia-extracto { color: #555; font-size: 12px !important; line-height: 1.4; margin: 0; }

.btn-blanco { background: white !important; color: #333 !important; padding: 8px 15px !important; text-decoration: none !important; display: flex !important; width: fit-content !important; margin-top: 20px !important; border-radius: 2px !important; font-weight: bold !important; align-items: center; }
a.btn-blanco img { margin-left: 10px; width: 20px; }

.logo-zillion { text-align: center; }
.logo-zillion img { width: 40%; }

/* Banner Zillion (Padres) */
.banner-zillion { background-image: url('https://pronutec.gorlan.com/wp-content/uploads/2026/06/Zillion-descargas-bg-1.jpg'); background-size: cover; background-position: center; background-color: #050520; margin-top:50px;margin-bottom:50px; padding: 60px 0; width: 100%; color: white; font-family: sans-serif; border-radius: 8px; overflow: hidden; }
.banner-container { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; position: relative; min-height: 250px; }
.banner-content { flex: 1; }
.banner-title { font-size: 35px; margin: 0; font-weight: 300; }
.banner-subtitle { font-size: 1.2rem; margin-top: 5px; opacity: 0.9; }
.banner-button { display: inline-flex; align-items: center; gap: 15px; margin-top: 40px; padding: 12px 25px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 4px; color: white; text-decoration: none; font-size: 1rem; transition: all 0.3s ease; }
.banner-button:hover { background: rgba(255, 255, 255, 0.1); border-color: white; }
.arrow-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid white; border-radius: 50%; font-size: 0.9rem; }
.banner-logo { text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; }
.banner-logo img { max-width: 250px; height: auto; }
.logo-tagline { font-size: 0.8rem; letter-spacing: 2px; margin-top: 10px; line-height: 1.4; font-weight: bold; opacity: 0.8; }

/* Newsletter */
.seccion-newsletter-fw {
    background-color: #0056b3 !important;
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 80px 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    clear: both !important;
    overflow: hidden;
}
.newsletter-grid { max-width: 1100px !important; margin: 0 auto !important; padding: 0 20px; display: flex !important; gap: 60px !important; align-items: center !important; }
.newsletter-grid .newsletter-texto { flex: 1 1 50% !important; color: white !important; }
.newsletter-grid .newsletter-texto h3 {color: white !important; font-weight: normal !important; }
.newsletter-grid .newsletter-texto p { font-size: 1.1rem !important; margin-bottom: 80px !important; color: rgba(255, 255, 255, 0.9) !important; line-height: 1.5 !important; }
.newsletter-grid .newsletter-imagen-wrap { flex: 1 1 50% !important; min-height: 380px !important; background-image: url('https://pronutec.gorlan.com/wp-content/uploads/2026/06/zillion-contact-section.jpg') !important; background-size: cover !important; background-position: center !important; border-radius: 6px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; }

.newsletter-form-container { display: flex !important; flex-wrap: wrap; gap: 15px !important; max-width: 90% !important; }
.newsletter-form-container input { flex: 1; min-width: 100%; background-color: transparent !important; border: 1px solid #ffffff !important; color: white !important; padding: 14px 15px !important; border-radius: 4px !important; font-size: 14px !important; outline: none !important; box-sizing: border-box !important; }
.newsletter-form-container input::placeholder { color: rgba(255, 255, 255, 0.8) !important; }
.newsletter-form-container button { background-color: white !important; color: #0056b3 !important; font-weight: bold !important; padding: 12px 30px !important; border: none !important; border-radius: 4px !important; cursor: pointer !important; text-transform: uppercase !important; transition: background 0.3s ease !important;width: 100%; }
.newsletter-form-container button:hover { background-color: #f0f0f0 !important; }


/* =======================================================
   8. RESPONSIVE (MÓVILES Y TABLETS)
   ======================================================= */
@media (max-width: 1024px) {
    .enfoques-grid { grid-template-columns: repeat(2, 1fr); }
    /*Banner descripcion imgen rayo*/
    .plantilla-zillion .item_destino.descripcion-producto.contenedor-bloque-relativo img.rayo-zillion-overlay{display: none !important;}

    /*caracteristicas principales*/
    .columna-texto-izq{width: 100% !important;}

    .single-productos .lista-productos-numerada{grid-template-columns:100%}

    /*banner descargas*/
    .descargas-boton{width: 60% !important;}
    .descargas-boton span{margin-left: 21px;}

    /*contenedor general*/
    section.pro_dub_comun{padding: 0px !important}
    .single-productos section.pro_dub_comun{padding: 20px !important}

    /*Cards azules*/
    .grid-mensajes{grid-template-columns: 100%;}
    .grid-3-cards {padding: 20px;}


}

@media (max-width: 992px) {
    .layout-desc-img { grid-template-columns: 1fr !important; gap: 30px !important; }
    .grid-3-cards, .grid-productos { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 800px) {
    .formulario-zillion form.hs-form, .seccion-contacto-full .hs-form { grid-template-columns: 1fr !important; gap: 0px !important; }
    .formulario-zillion .hs_message, .seccion-contacto-full .hs-form > .hs_message { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .formulario-zillion .hs_message textarea, .seccion-contacto-full .hs_message textarea { min-height: 150px !important; }
    .formulario-zillion h3 { font-size: 1.8rem; }
    .hbspt-form input.hs-button.primary.large { width: 100% !important; }
    .hs_pais .input, .hs_contact_department .input { width: 100% !important; }
}

@media (max-width: 768px) {
    /* Cabeceras */
    .cabecera-zillion-custom { padding: 100px 20px 30px 20px !important; }
    .cabecera-zillion-custom h2 { font-size: 26px !important; }
    .titulo-principal-producto { font-size: 28px !important; }
    .banner-container { flex-direction: column; text-align: center; gap: 50px; }
    .banner-logo { order: -1; }
    .banner-title { font-size: 2.2rem; }

    /* Layouts Interiores */
    .layout-desc-img, .plantilla-zillion .item_destino.descripcion-producto { display: flex !important; flex-direction: column !important; }
    .col-texto-desc, .col-imagen-desc, .plantilla-zillion .columna-texto-izq { width: 100% !important; }
    .lista-caracteristicas { grid-template-columns: 1fr !important; }
    .enfoques-grid { grid-template-columns: 1fr; }
    .seccion-descripcion-dual { display: flex !important; flex-direction: column;}

    /* Banners y Grid Inferior */
    .banner-descarga-estatico { flex-direction: column !important; gap: 20px !important; text-align: center !important; justify-content: center !important; }
    .btn-descarga, .plantilla-zillion section.pro_dub_comun .item_destino.descargas ul li a { width: 100% !important; }
    .seccion-relacionados h2 { font-size: 32px !important; text-align: center !important; }
    .grid-productos, .grid-3-cards, .plantilla-zillion .grid-mensajes { grid-template-columns: 1fr !important; }

    /* Newsletter */
    .seccion-newsletter-fw { padding: 40px 20px !important; }
    .newsletter-grid { flex-direction: column !important; text-align: center; gap: 40px !important; }
    .newsletter-grid .newsletter-imagen-wrap { width: 100% !important; min-height: 250px !important; }
    .newsletter-form-container { max-width: 100% !important; flex-direction: column; }
    .newsletter-form-container input { width: 100% !important; }

    /* Ajustes específicos Categoría */
    .plantilla-zillion .archive section.pro_dub_comun, .archive section.pro_dub_comun { padding: 0px !important; }
    .banner-logo img { max-width: 150px !important; }
    section.seccion-mensajes-destacados { margin-top: 50px; }


}

@media (min-width: 320px) and (max-width: 480px) {
    .plantilla-zillion section.pro_dub_comun .item_destino.descargas ul li a span { width: 100% !important; }
    section.pro_dub_comun .item_destino.descargas ul li a:before { display: none !important; }
    .banner-descarga-estatico{ display: flex !important;flex-direction: column;}
    .banner-descarga-estatico, .plantilla-zillion .banner-descarga-estatico{ height: auto !important;padding: 30px 0px;}
    .descargas-boton{width: 100% !important;}
    .hbspt-form .hs-form-booleancheckbox-display span p{font-size: 12px !important;}
    .legal-consent-container p{font-size: 12px !important;}

    h1{font-size: 35px !important;}
    h2 {font-size: 29px !important;line-height: 31px !important;}
}

/* ==========================================
   1. PLACEHOLDERS EN BLANCO
   ========================================== */

/* Cambia el color del placeholder para inputs y textareas */
.hbspt-form input::placeholder,
.hbspt-form textarea::placeholder {
    color: #ffffff !important;
    opacity: 1 !important; /* Necesario para Firefox */
}

/* Cambia el color del texto inicial en los desplegables (Selects) */
.hbspt-form select.is-placeholder {
    color: #ffffff !important;
}

/* Asegura que cuando abras el desplegable, las opciones se lean en oscuro */
.hbspt-form select option {
    color: #333333 !important;
}


/* ==========================================
   2. REPARAR EL TAMAÑO DE LOS CHECKBOXES
   ========================================== */

/* Forzar al contenedor para que use flexbox y alinee bien el texto */
.hbspt-form .hs-form-booleancheckbox-display {
    display: flex !important;
    align-items: flex-start !important; /* Alínea el checkbox arriba con la primera línea de texto */
    text-align: left !important;
}

/* Resetear el tamaño gigante del input checkbox */
.hbspt-form .hs-form-booleancheckbox-display input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    flex-shrink: 0 !important; /* Evita que se deforme */
    margin: 4px 12px 0 0 !important; /* Margen superior para cuadrarlo y derecho para separarlo del texto */
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
}

/* Quitar márgenes innecesarios que HubSpot mete en los textos dentro del label */
.hbspt-form .hs-form-booleancheckbox-display span p {
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
}


/* =======================================================
   9. EFECTO RAYO DEFINITIVO (BLOQUE PADRE RELATIVO)
   ======================================================= */

/* 1. El bloque completo se convierte en el contenedor de referencia */
.plantilla-zillion .item_destino.descripcion-producto.contenedor-bloque-relativo {
    position: relative !important; /* CRUCIAL PARENT REFERENCE */
    display: grid ;
    grid-template-columns: 1fr 1fr !important;
    gap: 50px !important;
    align-items: top !important;
    margin-bottom: 50px !important;
}

/* 2. Control de la columna de la foto para que no estorbe */
.plantilla-zillion .descripcion-producto.contenedor-bloque-relativo .col-foto-zillion {
    position: relative !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 3. Estilos de la foto principal (Array de ACF) */
.plantilla-zillion .descripcion-producto.contenedor-bloque-relativo .col-foto-zillion img.foto-zillion {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important; /* Esquinas redondeadas de image_6.png */
    display: block;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
}

/* 4. Estilos del rayo: Posición absoluta FIJA tal y como querías */
.plantilla-zillion .item_destino.descripcion-producto.contenedor-bloque-relativo img.rayo-zillion-overlay {
    position: absolute !important;
    top: -20px !important;    /* Lo subimos 20px fijos, tal y como querías */
    right: 0px !important;  /* Lo sacamos 20px fijos por la derecha, tal y como querías */
    
    /* Tamaño fijo para que jamás vuelva a romper el grid */
    width: 100% !important;    /* Ajustado para el monitor: El rayo medirá un 60% de la foto */
    max-width: 554px !important; 
    height: auto !important;
    
    z-index: 10 !important;   /* Asegura que flote por encima de las manos */
    pointer-events: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
}

/* 5. Ajuste responsive para móviles */
@media (max-width: 768px) {
    .plantilla-zillion .descripcion-producto.contenedor-bloque-relativo {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    .plantilla-zillion .descripcion-producto.contenedor-bloque-relativo .col-foto-zillion {
        justify-content: center !important;
        margin-top: 30px !important;
    }
    
    .plantilla-zillion .item_destino.descripcion-producto.contenedor-bloque-relativo img.rayo-zillion-overlay {
        /* En móvil, el rayo es un 30% más pequeño */
        display: none;
        width: 30% !important;
        top: -10px !important;
        right: -10px !important;
    }
}