/* ================= ESTILOS GENERALES ================= */
* { 
    box-sizing: border-box; 
}
body {
    font-family: 'Poppins', sans-serif;
    margin: 0; padding: 0;
    background-color: #fdfdfd;
    color: #333;
}
.seccion { padding: 60px 5%; }

.titulo-linea {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem; font-weight: 400;
    border-left: 2px solid #2b2b5c;
    padding-left: 20px; margin-bottom: 40px;
    line-height: 1.2;
}
.linea-blanca { color: white; border-left-color: white; }

.btn-oscuro { background: #2b2b5c; color: white; padding: 12px 30px; text-decoration: none; font-weight: 700; font-size: 14px; display: inline-block; transition: 0.3s; }
.btn-negro { background: #000; color: white; padding: 12px 30px; text-decoration: none; font-weight: 700; font-size: 14px; display: inline-block; }
.btn-oscuro:hover, .btn-negro:hover { opacity: 0.8; }

/* ================= ENCABEZADO Y MENÚ ================= */
.logo a {
    text-decoration: none;
    display: flex; /* Ayuda a que la imagen se centre bien dentro del enlace */
}
.encabezado {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 5%; background-color: white;
    border-bottom: 3px solid #2b2b5c; position: sticky; top: 0; z-index: 1000;
}
.img-logo { height: 60px; width: auto; }
.checkbox-oculto, .icono-menu { display: none; }

.menu-navegacion { display: flex; gap: 25px; }
.item-desplegable { position: relative; display: flex; align-items: center; }
.enlace-principal {
    text-decoration: none; color: #333; font-weight: 600; font-style: italic;
    padding: 15px 0; display: flex; align-items: center; gap: 5px;
}
.flecha { font-size: 12px; transition: 0.3s; }

/* Submenú */
.submenu {
    display: none; position: absolute; top: 100%; left: 0;
    background: white; min-width: 220px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1); border-top: 3px solid #2b2b5c;
}
.submenu a {
    display: block; padding: 12px 20px; color: #444; text-decoration: none;
    font-style: normal; border-bottom: 1px solid #eee; transition: 0.3s;
}
.submenu a:hover { background: #f5f5f5; color: #2b2b5c; }
.item-desplegable:hover .submenu { display: block; }
.item-desplegable:hover .flecha { transform: rotate(180deg); }

/* ================= HERO (FOTO PRINCIPAL) ================= */
.hero {
    background-image: url('IMG/IMG_gen/portada.jpeg');
    background-size: cover; background-position: center;
    height: 70vh; position: relative; display: flex; align-items: center; padding: 0 5%;
}
.hero::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2);
}
.hero-contenido { position: relative; z-index: 1; color: white; max-width: 700px; }
.hero-contenido h1 {
    font-family: 'Playfair Display', serif; font-size: 4.5rem; font-weight: 400; line-height: 1.1;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5); margin: 0;
}
.btn-hero {
    position: absolute; bottom: 40px; right: 5%; background-color: #2b2b5c; color: white;
    padding: 15px 35px; text-decoration: underline; font-weight: 700; z-index: 1;
}

/* ================= MAQUINARIA ================= */
.maquinaria-layout { display: flex; gap: 40px; align-items: flex-start; }
.maquinaria-texto { flex: 1; }
.logo-jusa { max-width: 250px; margin-bottom: 30px; display: block; }
.maquinaria-grid { flex: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.maq-item img { width: 100%; height: 200px; object-fit: cover; display: block; }
.maq-info { background: #2b2b5c; color: white; padding: 15px; font-size: 0.9rem; }

/* ================= TARJETAS (REFACCIONES Y FLECHAS) ================= */
.bg-gris { background-color: #fcfcfc; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.tarjetas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.tarjeta { background: white; border: 1px solid #e0e0e0; transition: transform 0.3s; }
.tarjeta:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

/* Borde morado de la tarjeta principal (como en tu imagen) */
.borde-morado { border: 2px solid #8b5cf6; }

.tarjeta-img { height: 250px; background-size: cover; background-position: center; border-bottom: 1px solid #eee;}
.tarjeta-contenido { padding: 25px; }
.categoria { font-size: 0.8rem; color: #666; letter-spacing: 1px; }
.tarjeta-contenido h3 { margin: 10px 0; font-size: 1.5rem; }
.iconos-tarjeta { display: flex; gap: 15px; font-size: 0.85rem; color: #555; margin-bottom: 10px; }
.iconos-tarjeta span { display: flex; align-items: center; gap: 5px; }
.iconos-tarjeta .material-symbols-outlined { color: #f29057; font-size: 18px; }
.nota { font-size: 0.8rem; color: #777; margin: 0; }
.alinear-derecha { text-align: right; margin-top: 30px; }

/* ================= SISTEMAS DE ALINEACIÓN ================= */
.alineacion-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 400px 400px; }
.bloque-azul { background: #1e1e40; color: white; padding: 60px 10%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.bloque-azul p { line-height: 1.6; font-size: 1rem; color: #ddd; }
.bloque-rojo { background: #e62429; }
.bloque-img { background-size: cover; background-position: center; background-color: #eee; }

/* ================= CONTACTO ================= */
.seccion-contacto {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size: cover; background-position: center;
    padding: 80px 10%; display: flex; justify-content: space-between; align-items: center; color: white;
}
.contacto-der { display: flex; flex-direction: column; gap: 20px; font-size: 1.1rem; }
.info-item { display: flex; align-items: center; gap: 20px; }
.info-item strong { width: 80px; }
.redes-sociales { display: flex; gap: 15px; }
.redes-sociales a {
    color: white; text-decoration: none; border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;
    transition: 0.3s;
}
.redes-sociales a:hover { background: rgba(255,255,255,0.2); }

/* ================= RESPONSIVO (MÓVILES) ================= */
@media (max-width: 900px) {
    .hero-contenido h1 { font-size: 2.5rem; }
    .icono-menu { display: block; cursor: pointer; }
    .icono-menu span { font-size: 35px; }
    .menu-navegacion {
        display: none; position: absolute; top: 100%; left: 0; width: 100%;
        background: white; flex-direction: column; border-top: 1px solid #ccc; gap: 0;
    }
    .checkbox-oculto:checked ~ .menu-navegacion { display: flex; }
    .item-desplegable { flex-direction: column; width: 100%; align-items: stretch; }
    .enlace-principal { justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #eee; }
    .submenu { position: relative; box-shadow: none; border-top: none; background: #f9f9f9; }
    
    .maquinaria-layout { flex-direction: column; }
    .maquinaria-grid, .tarjetas-grid { grid-template-columns: 1fr; }
    .alineacion-grid { grid-template-columns: 1fr; grid-template-rows: auto 300px 300px 150px; }
    .seccion-contacto { flex-direction: column; align-items: flex-start; gap: 40px; }
    .btn-hero { position: relative; bottom: 0; right: 0; margin-top: 20px; display: inline-block; }
}
/* ================= ESTILOS PARA LA PÁGINA DE CATÁLOGO ================= */

.seccion-catalogo {
    padding: 60px 5%;
    max-width: 1300px;
    margin: 0 auto;
}

.bg-gris-claro {
    background-color: #fafafa;
    border-top: 1px solid #f0f0f0;
}

/* Títulos principales centrados */
.titulo-centrado {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 50px;
    margin-top: 20px;
}

/* Cuadrícula de 3 columnas para los productos */
.catalogo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* Diseño individual de cada tarjeta de producto */
.tarjeta-producto {
    background: white;
    border: 1px solid #e0e0e0;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s;
}

.tarjeta-producto:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* Borde morado para las tarjetas destacadas */
.tarjeta-producto.destacada {
    border: 2px solid #000000;
}

/* Imagen del producto */
.tarjeta-producto img {
    width: 100%;
    height: 220px;
    object-fit: contain; /* Para que la máquina entera quepa sin recortarse */
    margin-bottom: 20px;
}

/* Textos de la tarjeta */
.tarjeta-producto h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 10px 0;
    color: #000;
}

.tarjeta-producto p {
    font-size: 0.85rem;
    color: #444;
    line-height: 1.5;
    flex-grow: 1; /* Empuja el botón siempre hacia abajo */
}

/* Botón con forma de píldora (Ver mas) */
.btn-pill {
    background-color: #2b2b5c;
    color: white;
    padding: 10px 35px;
    border-radius: 25px; /* Bordes muy redondeados */
    text-decoration: underline;
    font-weight: 600;
    margin-top: 20px;
    display: inline-block;
    transition: opacity 0.3s;
}

.btn-pill:hover {
    opacity: 0.85;
}

/* Botón grande de Cotización */
.contenedor-btn {
    padding-right: 20px;
    margin-bottom: 20px;
}

.btn-pill-grande {
    background-color: #2b2b5c;
    color: white;
    padding: 15px 50px;
    border-radius: 30px;
    text-decoration: underline;
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-block;
    transition: background-color 0.3s;
}

.btn-pill-grande:hover {
    background-color: #1a1a3a;
}

/* --- AJUSTES PARA MÓVILES EN EL CATÁLOGO --- */
@media (max-width: 900px) {
    .titulo-centrado {
        font-size: 2rem;
    }
    
    .catalogo-grid {
        grid-template-columns: 1fr; /* 1 sola columna en celulares */
        gap: 20px;
    }
    
    .tarjeta-producto {
        padding: 20px 15px;
    }
    
    .btn-pill-grande {
        width: 100%;
        text-align: center;
    }
}
/* ================= ESTILOS PARA FLECHAS Y REFACCIONES ================= */

/* Diseño de las listas con viñetas */
.lista-detalles {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 40px;
    padding-left: 25px;
}

.lista-detalles li {
    margin-bottom: 10px;
}

/* Sistema de recuadros (Galería estética) */
.galeria-grid {
    display: grid;
    gap: 30px;
    margin-top: 20px;
}

/* Opciones de columnas para la galería */
.galeria-3 { grid-template-columns: repeat(3, 1fr); }
.galeria-2 { grid-template-columns: repeat(2, 1fr); }

/* Diseño del recuadro individual */
.recuadro-img {
    background: white;
    border: 1px solid #e0e0e0;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.recuadro-img:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}

.recuadro-img img {
    width: 100%;
    height: 250px;
    object-fit: contain; /* Ajusta la imagen sin recortarla */
}

/* --- Ajustes para móviles en esta sección --- */
@media (max-width: 900px) {
    .galeria-3, .galeria-2 {
        grid-template-columns: 1fr; /* Pasa a 1 sola columna en teléfonos */
    }
    .lista-detalles {
        font-size: 1rem;
    }
}
/* ================= SECCIÓN CONTROL DE TENSIÓN AUTOMÁTICO ================= */

.seccion-control-tension {
    padding: 60px 5%;
    max-width: 1300px;
    margin: 0 auto;
    background-color: #fff;
}

/* Encabezado: Logos a los lados, título al centro y línea roja abajo */
.encabezado-tension {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 5px solid #e62429; /* Línea roja gruesa del diseño */
    padding-bottom: 20px;
    margin-bottom: 50px;
}

.logo-lat {
    height: 70px; /* Ajusta la altura de los logos EPICE y Re */
    width: auto;
    object-fit: contain;
}

.titulo-tension {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 500;
    color: #000;
    line-height: 1.2;
    margin: 0;
}

/* Grid principal del diagrama (3 columnas: Izquierda, Centro, Derecha) */
.esquema-tension-grid {
    display: grid;
    /* La columna del centro es ligeramente más ancha (1.5fr) */
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 30px;
    align-items: center;
}

/* Columnas laterales (arriba y abajo) */
.columna-lateral {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Espacio vertical entre la imagen de arriba y la de abajo */
}

.item-esquema {
    text-align: center;
}

.item-esquema img {
    width: 100%;
    max-width: 280px; /* Evita que las imágenes chicas se hagan gigantes */
    height: auto;
    object-fit: contain;
    margin-bottom: 15px;
}

.item-esquema p {
    font-size: 1.1rem;
    color: #222;
    font-weight: 500;
    margin: 0;
}

/* Columna central (Imagen principal grande) */
.columna-central {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-central {
    width: 100%;
    max-width: 420px; /* Hace que el controlador destaque en tamaño */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.15)); /* Sombra estética opcional */
}

/* --- Diseño adaptativo para celulares --- */
@media (max-width: 900px) {
    .encabezado-tension {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .esquema-tension-grid {
        grid-template-columns: 1fr; /* Todo se pone en 1 sola columna hacia abajo */
        gap: 50px;
    }

    .columna-central {
        order: -1; /* Obliga a que la imagen grande del controlador aparezca hasta arriba en el celular */
    }
    
    .columna-lateral {
        gap: 50px;
    }
}
.texto-descripcion {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 900px; /* Evita que el texto se estire demasiado en pantallas muy grandes */
}
/* ================= CARRUSEL DE ANUNCIOS GRANDE (ACTUALIZADO) ================= */
.seccion-carrusel {
    padding: 20px 5% 80px 5%;
    background-color: #fcfcfc;
}

.contenedor-carrusel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    /* Importante: Asegurar que el contenedor crece verticalmente */
    height: auto; 
}

.contenedor-carrusel input[type="radio"] {
    display: none;
}

.carrusel-track {
    display: flex;
    width: 400%;
    transition: transform 0.6s ease-in-out;
}

.slide-anuncio {
    width: 25%;
}

.slide-anuncio img {
    width: 100%;
    /* --- CAMBIOS AQUÍ --- */
    /* Dejamos que la imagen dicte la altura */
    height: auto; 
    /* Aumentamos dramáticamente la altura máxima permitida (ej. 900px o 1000px) */
    /* Ajusta este número si tus imágenes son aún más altas */
    max-height: 1200px; 
    /* Cambiamos a 'cover' para que llene el ancho, o 'contain' si prefieres barras laterales */
    object-fit: cover; 
    display: block;
}

#slide1:checked ~ .carrusel-track { transform: translateX(0%); }
#slide2:checked ~ .carrusel-track { transform: translateX(-25%); }
#slide3:checked ~ .carrusel-track { transform: translateX(-50%); }
#slide4:checked ~ .carrusel-track { transform: translateX(-75%); }

.controles {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: none;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10; /* Asegurar que están encima */
}

.flecha {
    pointer-events: auto;
    cursor: pointer;
    background: rgba(0,0,0,0.4);
    color: white;
    padding: 15px 20px;
    font-size: 20px;
    user-select: none;
    margin: 0 15px;
    border-radius: 50%;
    transition: background 0.3s;
}

.flecha:hover {
    background: rgba(0,0,0,0.8);
}

#slide1:checked ~ .controles-1,
#slide2:checked ~ .controles-2,
#slide3:checked ~ .controles-3,
#slide4:checked ~ .controles-4 { display: flex; }

.indicadores {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10; /* Asegurar que están encima */
}

.indicadores label {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

#slide1:checked ~ .indicadores label:nth-child(1),
#slide2:checked ~ .indicadores label:nth-child(2),
#slide3:checked ~ .indicadores label:nth-child(3),
#slide4:checked ~ .indicadores label:nth-child(4) {
    background: white;
    transform: scale(1.3);
}

/* Adaptación para celulares - Reducimos la altura máxima en móviles */
@media (max-width: 900px) {
    .slide-anuncio img { 
        max-height: 500px; /* Anuncios altos pero no excesivos en el teléfono */
    }
    .flecha { padding: 10px 15px; font-size: 16px; margin: 0 5px; }
    .seccion-carrusel { padding-bottom: 50px; }
}

/* ================= SECCIÓN SISTEMA DE VISIÓN (Datasheet) ================= */

.seccion-ficha {
    background-color: #f9f9f9; /* Un gris muy sutil como el del PDF */
    padding-top: 80px;
    padding-bottom: 80px;
}

.vision-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* La columna derecha de la imagen es un poco más ancha */
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Columna Izquierda --- */
.vision-col-izq {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.icono-vision-caja {
    background-color: #dca331; /* Color mostaza/naranja de la imagen */
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    border-radius: 4px;
}

.icono-vision-caja span {
    color: white;
    font-size: 35px;
}

.titulo-vision {
    font-family: 'Poppins', sans-serif;
    font-size: 3.5rem;
    font-weight: 300; /* Letra delgada */
    color: #333;
    margin: 0 0 5px 0;
    line-height: 1;
}

.titulo-vision strong {
    font-weight: 700;
}

.subtitulo-vision {
    color: #dca331;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 0 40px 0;
}

/* Lista con palomitas naranjas */
.lista-check-naranja {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-check-naranja li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 15px;
    font-weight: 400;
}

.lista-check-naranja .material-symbols-outlined {
    color: #dca331;
    font-weight: bold;
    font-size: 24px;
}

/* --- Columna Derecha --- */
.vision-col-der {
    display: flex;
    flex-direction: column;
}

.img-vision-principal {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 30px;
}

.vision-textos p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* --- Responsive para celulares --- */
@media (max-width: 900px) {
    .vision-layout {
        grid-template-columns: 1fr; /* Pasa a 1 sola columna */
        gap: 40px;
    }
    
    .titulo-vision {
        font-size: 2.5rem;
    }
    
    .vision-col-der {
        order: -1; /* En celular, la imagen principal se pone hasta arriba */
    }
}