/* Archivo CSS consolidado -- consolidated_styles.css */ /* Contiene: variables, estilos globales, menú (hamburguesa flotante y compatibilidad con .menu-icon), carruseles, descargas, formularios y adaptativos. Mantener coherencia con templates. */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Fuentes Gotham */ --font-family-main: 'Gotham', sans-serif; --font-family-secondary: 'Arial', sans-serif; /* Colores */ --primary-color: #ff7f32; --secondary-color: #000000; --tertiary-color: #cf8446; --background-color-light: #ffffff; --text-color-dark: #000000; --text-color-light: #f8f8f8; /* Tamaños de fuente */ --font-size-large: 2.5rem; --font-size-intermedium: 2rem; --font-size-medium: 1.2rem; --font-size-medium-small: 0.8rem; --font-size-small: 0.7rem; /* Pesos de fuente */ --font-weight-ultralight: 100; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; } /* Tipografía base */ body, h1, small, #info, #productos, #contacto, .producto-item p, #important-text, #enfasis-primary, #enfasis-secondary, #avisol-subtitle, #politica-subtitle, #cookies-subtitle { font-family: var(--font-family-main); } h1, .language-switch, #important-text, #enfasis-secondary, #enfasis-primary:hover, .bullet-list a, #cookies-description-4 a, #section1-description-1 { color: var(--primary-color); } #important-text, #enfasis-primary, #section1-description-1, #enfasis-secondary { font-weight: var(--font-weight-bold); } small { font-size: var(--font-size-small); } /* --------------------------------------------------------------------------------------- */ /* MENÚ: hamburguesa flotante, overlay y compatibilidad con .menu-icon (info-legal.html) */ /* - Botón fijo en la esquina superior izquierda (flotante) - Overlay menu que se abre con .nav-menu.active (JS) - Submenú accesible por :hover / :focus-within en escritorio y por botón en móvil - Proporciona estilos para .menu-icon (antiguo markup) para compatibilidad */ /* ---------------------------- Menú flotante (hamburguesa) y submenú en cascada (derecha) - v2 Reemplazar el bloque anterior del menú/submenú por este ---------------------------- */ .main-nav { position: relative; z-index: 10000; } /* Botón hamburguesa: fijo en la esquina superior izquierda */ .nav-toggle { position: fixed; top: 12px; left: 12px; z-index: 10002; width: 44px; height: 44px; border-radius: 8px; background: rgba(255,255,255,0.98); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 6px 18px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.15rem; color: var(--secondary-color); } /* Compatibilidad con .menu-icon antigua (sin cambios funcionales) */ /*.menu-icon { display:inline-block; width:44px; height:40px; cursor:pointer; position:relative; } .menu-icon div { height:3px; background:var(--secondary-color); margin:5px 0; border-radius:2px; transition:transform .25s, opacity .25s; }*/ /* Menu principal: inline por defecto (no romper páginas secundarias); cuando JS añade .active -> overlay fijo */ /* Menu principal: OCULTO por defecto; se muestra al hacer clic en hamburguesa */ .nav-menu { display: none; /* OCULTO por defecto */ list-style: none; margin: 0; padding: 0.5rem; gap: 1rem; align-items: center; overflow: visible; /* permitir que el submenú fijo no se recorte */ } /* Cuando JS añade .active -> mostrar como overlay fijo */ .nav-menu.active { display: flex; /* MOSTRAR al activarse */ flex-direction: column; position: fixed; top: 68px; left: 16px; width: auto; min-width: 200px; z-index: 10001; background: var(--background-color-light); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); padding: 15px 0px 15px 0px; max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: visible; gap: 6px; } /* que cada li ocupe todo el ancho del panel (ya lo tienes, pero reafirmamos) */ .nav-menu.active li { width: 100%; margin: 0px; padding: 0px; } /* enlaces del panel: ocupan todo el ancho, padding interno y sin esquinas redondeadas */ .nav-menu.active a { display: block; width: 100%; box-sizing: border-box; padding: 10px 16px; /* controla espacio interior del item */ border-radius: 0; /* evita mostrar fondo del panel en las esquinas */ text-align: left; } /* hover/focus idéntico al submenú */ .nav-menu.active a:hover, .nav-menu.active a:focus { background: rgba(255,127,50,0.08); color: var(--primary-color); outline: none; } /* Submenú - estilo base (hidden) */ .submenu { display: none; position: fixed; /* fijo: se colocará con JS fuera del panel */ top: 0; left: 0; min-width: 220px; background: #fff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 6px 8px 28px rgba(0,0,0,0.12); border-radius: 8px; padding: 8px 0; /*z-index: 10005;*/ list-style: none; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(0); transition: opacity .12s ease, visibility .12s; margin: 0; pointer-events: auto; z-index: 12000; } /* items del menú y submenu*/ .nav-menu a, .submenu a { display:block; padding:8px 16px; color: var(--text-color-dark); text-decoration:none; border-radius:6px; white-space:nowrap; } .nav-menu li, .submenu li { width:100%; padding:0; margin:0; } .nav-menu a:hover, .nav-menu a:focus, .submenu a:hover, .submenu a:focus { background: rgba(255,127,50,0.08); color:var(--primary-color); } /* Submenú: El submenú se posiciona FIXED (fuera del overlay) en desktop; en móvil será static. */ .has-submenu { position: relative; /* conserva área interactiva */ } /* clase que activa la visibilidad (añadida por JS o por :hover en desktop) */ .submenu-visible { display: block; opacity: 1; visibility: visible; } /* ---------------------------- fin bloque menú/submenú ---------------------------- */ /* -------------------------------------------------------------------------------------- */ /* Estilos generales del layout (no tocar salvo ajustar valores) */ /* Estilo Logo en todos los escenarios */ .logo, .logo-n, .logo-sp { padding: 6px; border-radius: 10px; display: inline-block; margin-top: 80px; margin-bottom: 60px; width: 50%; max-width: 500px; height: auto; } .logo, .logo-sp { background-color: var(--background-color-light); } /* -------------------------------------------------------------------------------------- */ /* Tipografía y cuerpo */ body { font-weight: var(--font-weight-regular); background-color: var(--secondary-color); /* font-family: var(--font-primary);*/ margin: 0; padding: 0; overflow-x: hidden; /* EVITAR scroll horizontal */ max-width: 100vw; /* NO superar el ancho de la ventana */ box-sizing: border-box; } /* Header principal */ .index-header { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-top: 15px; } h1 { font-weight: var(--font-weight-black); font-size: var(--font-size-large); margin: 30px 0 10px; } /* Fondos por secciones */ #info, #contacto, #productos-y-servicios-body { background-color: var(--background-color-light); color: var(--text-color-dark); } #productos { background-color: var(--secondary-color); color: var(--text-color-light); } /* Secciones principales del index */ #info, #productos, #contacto { min-height: 100vh; padding: 2% 5%; display: flex; flex-direction: column; transition: background-color 0.3s ease, color 0.3s ease; } #section1-description-2, #contacto form { margin-left: 5%; margin-right: 5%; line-height: 25px; } #section1-description-2 { text-align: justify; } /* --------------------------------------------------------------------------------- */ /* Carrusel (index) */ .categoria-producto { margin: 0 0 10mm; padding: 4mm 0; } .subtitulo-carrusel { margin-bottom:4mm; color: var(--primary-color); } .carousel { width:100%; position:relative; overflow:visible; } .carousel-track { display:flex; gap:1rem; align-items:center; width: max-content; animation: scroll-left 14s linear infinite; will-change: transform; } .carousel-track.reverse { animation-direction: reverse; } .carousel-item { flex:0 0 auto; width:250px; height:200px; border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); position:relative; transition: transform .28s ease, box-shadow .28s ease; transform-origin:center; } .carousel-item img { width:100%; height:100%; object-fit:cover; display:block; } /* zoom y destaque */ .carousel-item:hover, .carousel-item:focus { transform:scale(1.50); z-index:5; box-shadow:0 10px 22px rgba(0,0,0,.28); } /* pausar en hover/focus */ .carousel:hover .carousel-track, .carousel:focus-within .carousel-track { animation-play-state: paused; } /* animación: desplaza exactamente la mitad (duplicado) */ @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* fin estilos carrusel (index) */ /* -------------------------------------------------------------------------------------- */ /* Formulario contacto */ form { display: flex; flex-direction: column; max-width: 75%; margin: 0 auto; padding-left: 15%; } .form-group { display: flex; gap: 20px; justify-content: space-between; margin-bottom: 10px; } label { margin: 1px 0; flex: 1; } input, textarea { flex: 2; margin-bottom: 20px; padding: 8px; border: none; border-bottom: 1px solid var(--secondary-color); outline: none; transition: border-color 0.3s ease; } input:focus, textarea:focus { border-bottom: 2px solid var(--primary-color); } textarea { height: 100px; } button { padding: 10px; background-color: var(--secondary-color); color: var(--text-color-light); border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: var(--primary-color); } /* -------------------------------------------------------------------------------------- */ /* Headers y logos en páginas secundarias */ .productos-header, .contacto-header, .info-header, #info-legal-header, #productos-y-servicios-header, #descargas-header { display: flex; align-items: center; gap: 20px; } .div-header-nos { min-width: 50%; flex-direction: column; } #section1-title { margin-bottom: 0; } #section1-description-1 { margin-top: 0; font-size: var(--font-size-medium); text-align: right; } /* imágenes de header */ .info-header img, .productos-header img, .contacto-header img, #descargas-header img, #info-legal-header img, #productos-y-servicios-header img { margin-left: 4.5%; margin-bottom: 0; height: auto; border-radius: 8px; } .info-header img, .productos-header img, .contacto-header img { margin-top: 0.01%; } #descargas-header img, #info-legal-header img, #productos-y-servicios-header img { margin-top: 3%; } .info-header img, .contacto-header img, #productos-y-servicios-header img { max-width: 250px; } .productos-header img, #descargas-header img, #info-legal-header img { max-width: 150px; } /* Subtítulos generales */ .info-header h2, .productos-header h2, .contacto-header h2, #productos-y-servicios-header h2, #avisol-subtitle, #politica-subtitle, #cookies-subtitle, #HPZ-ZPT-subtitle, #GOAS-subtitle, #MZ-subtitle, #EZ-subtitle, #TZ-subtitle, #SDAFD-subtitle, #KAT-subtitle, #SES-S-subtitle, #SES-M-subtitle, #DB-MI-subtitle, #HD-subtitle, #UPG-4G-subtitle, #IST-50-subtitle, #EZ-W-subtitle, #SIH-subtitle, #HD-ICT-subtitle, #ID_detector-subtitle, #UG-ID-subtitle, #FFF-subtitle, #SBAG-subtitle, #IFT-subtitle, #VALVULA-J4-subtitle, #VALVULA-55B-subtitle, #VALVULA-GB-subtitle, #RAMPA-subtitle, #VRanillo-subtitle, #FET-10-subtitle, #UPG-subtitle { margin: 0; font-size: var(--font-size-intermedium); line-height: 1; display: inline-block; margin-bottom: 10px; color: var(--primary-color); } /* Subtítulos pequeños */ .subtitulo-descargas, .subtitulo-carrusel { color: var(--primary-color); margin: 0 0 1rem; padding-bottom: 6px; border-bottom: 2px solid #eee; font-size: var(--font-size-medium); } /* -------------------------------------------------------------------------------------- */ /* Estilos para productos-y-servicios (imágenes grandes) */ .MZ-table1, .MZ-table2, .ME-table, .EZ-table, .EZ-W-table, .TZ-table, .SIH-table, .HD-ICT-table, .ID_detector-table, .ID_sonda_-table, .UG-ID-table, .FFF-table, .IFT-table, .VALVULA-J4-table, .VALVULA-55B-table, .KAT-table, .SES-S-table, .SES-M-table, .J4C-table, .HPT-table, .ZPT-table, .PANDA-table, .GOAS-table, .FET-10-table, .IST-50-table, .UPG-table, .image-UG-ID-1, .image-UG-ID-2, .image-FFF-1, .image-FFF-2, .image-IFT, .image-VALVULA-J4, .image-VALVULA-55B, .image-VALVULA-GB, .image-KAT-1, .image-KAT-2,.image-KAT-3, .image-SES-S, .image-SES-M, .image-SBAG, .image-RAMPA-1, .image-RAMPA-2, .image-VRanillo, .image-HPT-1, .image-PANDA, .image-GOAS, .image-FET-10, .image-panther_56_ac, .image-filtro-gespasa, .image-UPG-system, .image-filtro_particulas, .image-filtro_agua, .image-purafiner-ETA { max-width: 100%; height: auto; border-radius: 8px; border-style: solid; border-color: var(--secondary-color); border-width: 0.5px; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; } .image-UG-ID-1, .image-UG-ID-2, .image-FFF-1, .image-FFF-2, .image-IFT, .image-VALVULA-J4, .image-VALVULA-55B, .image-KAT-1, .image-KAT-2,.image-KAT-3, .image-SES-S, .image-SES-M, .image-SBAG, .image-RAMPA-1, .image-RAMPA-2, .image-VRanillo, .image-HPT-1, .image-PANDA, .image-GOAS, .image-FET-10, .image-panther_56_ac, .image-filtro-gespasa, .image-UPG-system, .image-filtro_particulas, .image-filtro_agua, .image-purafiner-ETA { border-style: none; } /* -------------------------------------------------------------------------------------- */ /* Estilos cuerpo paginas secundarrias */ #cuerpo-info-legal, #productos-y-servicios-body { margin-left: 10%; margin-right: 10%; line-height: 20px; } /* ========== MZ-section: imágenes inmersas en el texto (scopeado) ========== */ /* 1) Texto justificado a ambos lados */ #MZ-section #MZ-description, #EZ-section #EZ-description { text-align: justify; text-justify: inter-word; hyphens: auto; } /* 2) Contenedor base de imagen flotante - SIN tamaño fijo aquí */ #MZ-section .mz-float { background: transparent !important; border: 0; margin: 0; /* los márgenes los define cada variante */ padding: 0; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.12); overflow: hidden; display: block; } /* 3) La imagen dentro siempre ocupa el 100% del contenedor
*/ #MZ-section .mz-float img { display: block; width: 100%; /* <-- CORREGIDO: ocupa todo el ancho del figure */ height: auto; background: transparent; } /* 4) Variantes de flotado - AÑADE márgenes según posición */ #MZ-section .mz-right { float: right; margin: 0 0 12px 16px; /* margen izquierdo para separar del texto */ } #MZ-section .mz-left { float: left; margin: 0 16px 12px 0; /* margen derecho para separar del texto */ } /* 5) Tamaños específicos para cada imagen (controlados con clases adicionales) */ /* tamaño Imagen X1 (cuadro con medidor) */ #MZ-section .mz-size-x1 { width: clamp(160px, 100%, 450px); } /* tamaño Imagen alarma llenado */ #MZ-section .mz-size-alarma { width: clamp(140px, 12%, 280px); } /* tamaño Imagen sonda sensor */ #MZ-section .mz-size-sonda { width: clamp(120px, 10%, 280px); } /* ---------------------------------------------------- MZ: texto justificado + figuras sin fondo ---------------------------------------------------- */ /* Justificar todo el texto de la descripción (y sus

) */ #MZ-section #MZ-description, #MZ-section #MZ-description p{ text-align: justify !important; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; } /* Asegurar que el contenedor limpia los floats internos */ #MZ-section #MZ-description::after { content: ""; display: block; clear: both; } /* Transparencia total del contenedor y la imagen */ #MZ-section figure.mz-float, #MZ-section figure.mz-float::before, #MZ-section figure.mz-float::after, #MZ-section figure.mz-float img, #MZ-section figure, #MZ-section .image-X1, #MZ-section .alarma-llenado, #MZ-section .sonda_10 { background: transparent !important; border: 0; /* sin bordes del figure */ } /* Mantener solo la separación y posición de los floats */ #MZ-section .mz-right { float: right; margin: 0 0 12px 16px; } #MZ-section .mz-left { float: left; margin: 0 16px 12px 0; } /* Si el “rectángulo blanco” era por sombra, quítala aquí (opcional) */ #MZ-section figure.mz-float { box-shadow: none; border-radius: 0; } /* La imagen ocupa todo el ancho de su figure sin fondo */ #MZ-section figure.mz-float img { display: block; width: 100%; height: auto; } /* 7) Las tablas técnicas empiezan debajo de los floats */ /* ======================================== MZ GRID 2: Tablas técnicas lado a lado ======================================== */ /* Grid de 2 columnas: Tabla medidor (50%) + Tabla sonda (50%) */ #MZ-section .mz-grid-2 { display: grid; grid-template-columns: 43.5% 56.5%; /* cada tabla - AJUSTABLE */ gap: 20px; /* espacio entre columnas */ align-items: center; /* centrado vertical de tablas */ margin: 20px 0; /* margen superior/inferior */ width: 100%; box-sizing: border-box; clear: both; /* asegurar que empiece debajo de floats */ } /* Columnas del grid: flexbox para centrar contenido */ #MZ-section .mz-col { display: flex; flex-direction: column; /* apilar contenido verticalmente */ align-items: center; /* centrar horizontalmente */ justify-content: center; /* centrar verticalmente */ } /* Imágenes de tablas dentro del grid: responsive con borde */ #MZ-section .mz-col img { width: 100%; /* ocupar todo el ancho de su columna */ height: auto; /* mantener proporción */ display: block; border-radius: 8px; } /* Borde en las tablas técnicas */ #MZ-section .MZ-table1, #MZ-section .MZ-table2 { border: 0.5px solid var(--secondary-color); } /* --- CONTROL DE TAMAÑO INDIVIDUAL DE TABLAS --- */ /* Tabla 1: Medidor de nivel MN (columna izquierda) - AJUSTABLE */ #MZ-section .MZ-table1 { max-width: 100%; /* <-- CAMBIA: 80%, 90%, 100% */ margin: 0 auto; /* centrar si es más pequeña */ } /* Tabla 2: Sonda analógica MZ (columna derecha) - AJUSTABLE */ #MZ-section .MZ-table2 { max-width: 100%; /* <-- CAMBIA: 80%, 90%, 100% */ margin: 0 auto; /* centrar si es más pequeña */ } /* ======================================== FIN MZ GRID 2: Tablas técnicas ======================================== */ /* ================================================================================================== ENLACES DE DESCARGA POR SECCIÓN - Sistema unificado ================================================================================================== */ /* --- CONTENEDOR PRINCIPAL DE ENLACES DE DESCARGA --- */ .downloads-links-container { width: 100%; /* ocupar todo el ancho de la sección */ margin: 40px 0 20px 0; /* margen superior/inferior para separar de contenido previo */ padding: 20px; /* padding interno */ background: rgba(0, 0, 0, 0.02); /* fondo gris muy suave para diferenciar del contenido */ border-radius: 8px; /* esquinas redondeadas */ box-sizing: border-box; } /* --- TÍTULO DE LA SECCIÓN DE DESCARGAS --- */ .downloads-section-title { font-size: 1.3rem; /* tamaño de fuente del título */ font-weight: var(--font-weight-bold); color: var(--primary-color); /* color naranja ICT */ margin: 0 0 15px 0; /* margen inferior */ padding: 0; text-align: left; /* alineado a la izquierda */ border-bottom: 2px solid var(--primary-color); /* línea inferior naranja */ padding-bottom: 8px; /* espacio entre texto y línea */ } /* --- GRID DE ENLACES (columna única, alineados a la derecha) --- */ .downloads-links-grid { display: flex; /* usar flexbox para alinear */ flex-direction: column; /* apilar enlaces verticalmente */ align-items: flex-start; /* ALINEAR TODO A LA IZQUIERDA */ gap: 12px; /* espacio vertical entre enlaces */ width: 100%; box-sizing: border-box; } /* --- CADA ENLACE INDIVIDUAL --- */ .download-link-item { display: flex; /* flexbox para alinear icono + texto horizontalmente */ align-items: center; /* centrado vertical de icono y texto */ gap: 10px; /* espacio entre icono y texto */ padding: 8px 12px; /* padding interno del enlace */ background: transparent; /* fondo transparente por defecto */ border-radius: 6px; /* esquinas redondeadas */ text-decoration: none; /* sin subrayado */ color: var(--text-color-dark); /* TEXTO EN NEGRO por defecto */ transition: all 0.3s ease; /* transición suave para hover */ cursor: pointer; max-width: 100%; /* no exceder el ancho del contenedor */ box-sizing: border-box; } /* --- ICONO DE DESCARGA --- */ .download-icon { width: 24px; /* ancho fijo del icono - AJUSTABLE */ height: 24px; /* alto fijo del icono - AJUSTABLE */ flex-shrink: 0; /* evitar que el icono se comprima */ display: block; object-fit: contain; /* mantener proporción de la imagen */ } /* --- TEXTO DEL ENLACE --- */ .download-text { font-size: 0.95rem; /* tamaño de fuente del texto - AJUSTABLE */ font-weight: var(--font-weight-regular); line-height: 1.4; text-align: left; /* texto alineado a la izquierda dentro del enlace */ word-break: break-word; /* permitir saltos de línea en textos largos */ } /* --- EFECTO HOVER Y FOCUS --- */ .download-link-item:hover, .download-link-item:focus { background: rgba(255, 127, 50, 0.08); /* fondo naranja muy suave */ color: var(--primary-color); /* TEXTO EN NARANJA al pasar el ratón */ outline: none; /* quitar outline por defecto del navegador */ transform: translateX(-4px); /* desplazar ligeramente a la izquierda (efecto visual) */ box-shadow: 0 2px 8px rgba(255, 127, 50, 0.15); /* sombra naranja suave */ } /* --- EFECTO HOVER EN EL ICONO (opcional: cambiar opacidad) --- */ .download-link-item:hover .download-icon, .download-link-item:focus .download-icon { opacity: 0.8; /* reducir opacidad del icono al hover */ } /* --- AJUSTE PARA PANTALLAS MUY ANCHAS (opcional) --- */ @media (min-width: 1400px) { .downloads-links-grid { align-items: flex-start; /* mantener alineación a la izquierda */ padding-right: 5%; /* añadir padding derecho en pantallas grandes */ } } /* ================================================================================================== FIN ENLACES DE DESCARGA POR SECCIÓN - Sistema unificado ================================================================================================== */ /* -------------------------------------------------------------------------------------- */ /* --------------------------------FIN ESTILOS MZ-SECTION---------------------------------- */ /* -------------------------------------------------------------------------------------- */ /* ================================================================================================== EZ-section: Dos grids independientes ================================================================================================== */ #EZ-W-y-TZ-sections { text-align: justify; /* justificar texto a ambos lados */ text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; /* ocupar todo el ancho disponible */ margin: 0; /* sin márgenes adicionales */ } /* --- GRID 1: Texto + imagen sonda (75%) | Imagen caja control (25%) --- */ #EZ-section .ez-grid-1 { display: grid; grid-template-columns: 75% 25%; /* 75% columna texto+imagen, 25% imagen caja */ gap: 20px; /* espacio entre columnas */ align-items: start; /* alineación superior (permitir diferentes alturas) */ margin: 20px 0; /* margen superior/inferior */ width: 100%; box-sizing: border-box; } /* --- GRID 2: Tabla ME | Tabla EZ --- */ #EZ-section .ez-grid-2 { display: grid; grid-template-columns: 62% 38%; /* ancho de cada columna */ gap: 20px; /* espacio entre columnas */ align-items: center; /* centrado vertical de las tablas */ margin: 20px 0; /* margen superior/inferior */ width: 100%; box-sizing: border-box; } /* Columnas base: flexbox para apilar/centrar contenido */ #EZ-section .ez-col { display: flex; flex-direction: column; /* apilar contenido verticalmente */ align-items: center; /* centrar horizontalmente */ justify-content: flex-start; /* alineación superior por defecto */ } /* Columna especial: texto + imagen apilados (grid 1, columna 1) */ #EZ-section .ez-text-image { align-items: flex-start; /* alinear contenido a la izquierda */ gap: 20px; /* espacio entre texto e imagen */ } /* Texto dentro de la columna: justificado */ #EZ-section .ez-text-image p { text-align: justify; /* justificar texto a ambos lados */ text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; /* ocupar todo el ancho disponible */ margin: 0; /* sin márgenes adicionales */ } /* Imagen de la sonda dentro de la columna texto: centrada horizontalmente */ #EZ-section .ez-text-image img { align-self: center; /* centrar imagen horizontalmente */ } /* Columna de solo imagen (grid 1, columna 2): centrar verticalmente */ #EZ-section .ez-grid-1 .ez-image { justify-content: center; /* centrado vertical de la imagen */ } /* Imágenes dentro de los grids: responsive */ #EZ-section .ez-col img { width: 100%; /* ocupar todo el ancho de su contenedor */ height: auto; /* mantener proporción */ display: block; border-radius: 8px; } /* --- CONTROL DE TAMAÑO INDIVIDUAL DE TABLAS --- */ /* Tabla ME (Cuadro de maniobra ME) - AJUSTABLE */ #EZ-section .ME-table { max-width: 100%; /* <-- CAMBIA: 80%, 90%, 100% */ border: 0.5px solid var(--secondary-color); margin: 0 auto; /* centrar si es más pequeña */ } /* Tabla EZ (Sonda de maniobras EZ) - AJUSTABLE */ #EZ-section .EZ-table { max-width: 100%; /* <-- CAMBIA: 80%, 90%, 100% */ border: 0.5px solid var(--secondary-color); margin: 0 auto; /* centrar si es más pequeña */ } /* Imágenes EZ: sin borde */ #EZ-section .image-sonda-mz, #EZ-section .control-sonda-mz { border: none !important; } /* --- CONTROL DE TAMAÑO INDIVIDUAL DE IMÁGENES --- */ /* Imagen sonda (dentro de texto, grid 1, columna 1) */ #EZ-section .ez-image-sonda-size { max-width: 70%; /* <-- AJUSTA: 50%, 70%, 100%, etc. */ margin: 0 auto; /* centrar horizontalmente */ } /* Imagen caja de control (grid 1, columna 2) */ #EZ-section .ez-image-caja-size { max-width: 100%; /* <-- AJUSTA: 70%, 80%, 100%, etc. */ margin: 0 auto; /* centrar si es más pequeña */ } /* ================================================================================================== FIN EZ-section: Dos grids independientes ================================================================================================== */ /* ============================================================ EZ-W-y-TZ-sections: Layout de 3 columnas alineadas ============================================================ */ /* Contenedor principal: grid de 3 columnas iguales */ #EZ-W-y-TZ-sections .ez-w-tz-grid { display: grid; grid-template-columns: 10% 45% 45%; /* 3 columnas */ gap: 20px; /* espacio horizontal entre columnas */ align-items: center; /* alineación vertical centrada */ margin: 20px 0; /* margen superior/inferior del grid */ width: 100%; box-sizing: border-box; } /* Cada columna (imagen o tabla) */ #EZ-W-y-TZ-sections .ez-w-tz-col { display: flex; flex-direction: column; /* contenido apilado verticalmente dentro de cada celda */ align-items: center; /* centrar contenido horizontalmente */ justify-content: flex-start; /* alineación superior */ } /* Centrar verticalmente SOLO la columna de la imagen */ #EZ-W-y-TZ-sections .ez-w-tz-image { justify-content: center; /* <-- CENTRADO VERTICAL de la imagen */ } /* Imágenes dentro del grid: ocupan todo el ancho de su columna y mantienen proporción */ #EZ-W-y-TZ-sections .ez-w-tz-col img { width: 100%; /* ocupar todo el ancho disponible de la columna */ height: auto; /* mantener proporción original */ display: block; border-radius: 8px; border: 0.5px solid var(--secondary-color); } /* CLASE ESPECIAL: Controla el tamaño de la imagen de la sonda EZ-W */ /* Cambia estos valores para ajustar el tamaño de la imagen */ #EZ-W-y-TZ-sections .ez-w-tz-image-size { max-width: 100%; /* <-- AJUSTA ESTE PORCENTAJE (50% - 100%) */ margin: 0 auto; /* centrar si es más pequeña que la columna */ } /* Opcional: eliminar borde de la imagen de la sonda (si quieres que sea transparente) */ #EZ-W-y-TZ-sections .image-sonda-EZ-W { border: none !important; /* sin borde visible */ } /* -------------------------------------------------------------------------------------- */ /* --------------------------------FIN ESTILOS EZ-W-y-TZ-sections---------------------------------- */ /* -------------------------------------------------------------------------------------- */ /* ================================================================================================== SIH-section: Dos grids independientes ================================================================================================== */ /* --- GRID 1: Texto (70%) + Imagen (30%) --- */ #SIH-section .sih-grid-1 { display: grid; grid-template-columns: 70% 30%; /* 70% texto, 30% imagen */ gap: 20px; /* espacio entre columnas */ align-items: flex-start; /* alineación vertical centrada */ margin: 20px 0; /* margen superior/inferior */ width: 100%; box-sizing: border-box; } #SIH-section .sih-grid-1 .sih-image { justify-content: center; /* centrado vertical de la imagen */ } #SIH-section .sih-grid-1 .sih-text { margin-top: 2%; /* pequeño margen superior para separar del título */ } /* --- GRID 2: Tabla (50%) + Imagen (50%) --- */ #SIH-section .sih-grid-2 { display: grid; grid-template-columns: 50% 50%; /* 50% tabla, 50% imagen */ gap: 20px; /* espacio entre columnas */ align-items: center; /* alineación vertical centrada */ margin: 20px 0; /* margen superior/inferior */ width: 100%; box-sizing: border-box; } /* Columnas base: flexbox para centrar contenido */ #SIH-section .sih-col { display: flex; flex-direction: column; /* apilar contenido verticalmente */ align-items: center; /* centrar horizontalmente */ justify-content: flex-start; /* alineación superior */ } /* Columna de texto: alineación izquierda y justificado */ #SIH-section .sih-text { align-items: flex-start; /* alinear texto a la izquierda */ } #SIH-section .sih-text p { text-align: justify; /* justificar texto a ambos lados */ text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; /* ocupar todo el ancho de la columna */ } /* Imágenes dentro de los grids: responsive y con bordes */ #SIH-section .sih-col img { width: 100%; /* ocupar todo el ancho de su columna */ height: auto; /* mantener proporción */ display: block; border-radius: 8px; } /* --- CONTROL DE TAMAÑO INDIVIDUAL DE TABLA --- */ /* Tabla SIH (Seguridad fuga venteo) - AJUSTABLE */ #SIH-section .SIH-table { max-width: 80%; /* <-- CAMBIA: 80%, 90%, 100% */ border: 0.5px solid var(--secondary-color); margin: 0 auto; /* centrar si es más pequeña */ } /* Imágenes SIH: sin borde (ya definido en estilos globales, reafirmamos) */ #SIH-section .image-SIH1, #SIH-section .image-SIH2 { border: none !important; } /* --- CONTROL DE TAMAÑO INDIVIDUAL DE IMÁGENES --- */ /* Imagen SIH1 (venteo): ajustar tamaño dentro de su columna del 30% */ #SIH-section .sih-image-1-size { max-width: 65%; /* <-- AJUSTA: 60%, 80%, 100%, etc. */ margin: 0 auto; /* centrar si es más pequeña */ } /* Imagen SIH2 (ejemplo aplicación): ajustar tamaño dentro de su columna del 50% */ #SIH-section .sih-image-2-size { max-width: 70%; /* <-- AJUSTA: 70%, 90%, 100%, etc. */ margin: 0 auto; /* centrar si es más pequeña */ } /* Centrar verticalmente la imagen en grid-1 si el texto es muy largo */ #SIH-section .sih-grid-1 .sih-image { justify-content: center; /* centrado vertical de la imagen */ } /* Título de la imagen SIH2: centrado debajo de la imagen */ #SIH-section #title-table { margin-top: 10px; text-align: center; width: 100%; } /* ================================================================================================== FIN SIH-section: Dos grids independientes ================================================================================================== */ /* ================================================================================================== HD-ICT-section: Grid texto + imagen ================================================================================================== */ /* Grid principal: Texto (70%) + Imagen (30%) */ #HD-ICT-section .hd-ict-grid { display: grid; grid-template-columns: 50% 50%; /* ancho de las columnas */ gap: 20px; /* espacio entre columnas */ align-items: center; /* alineación vertical centrada */ margin: 20px 0; /* margen superior/inferior */ width: 100%; box-sizing: border-box; } /* Columnas base: flexbox para centrar contenido */ #HD-ICT-section .hd-ict-col { display: flex; flex-direction: column; /* apilar contenido verticalmente */ align-items: center; /* centrar horizontalmente */ justify-content: flex-start; /* alineación superior */ } /* Columna de texto: alineación izquierda y justificado */ #HD-ICT-section .hd-ict-text { align-items: flex-start; /* alinear texto a la izquierda */ } #HD-ICT-section .hd-ict-text p { text-align: justify; /* justificar texto a ambos lados */ text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; /* ocupar todo el ancho de la columna */ } /* Imagen dentro del grid: responsive y sin borde */ #HD-ICT-section .hd-ict-col img { width: 100%; /* ocupar todo el ancho de su columna */ height: auto; /* mantener proporción */ display: block; border-radius: 8px; } /* Imagen HD-ICT: sin borde */ #HD-ICT-section .image-HD-ICT { border: none !important; /* sin borde visible */ } /* --- CONTROL DE TAMAÑO DE LA IMAGEN --- */ #HD-ICT-section .hd-ict-image-size { max-width: 80%; /* <-- AJUSTA: 70%, 80%, 100%, etc. */ margin: 0 auto; /* centrar si es más pequeña */ } /* Centrar verticalmente la imagen si el texto es muy largo */ #HD-ICT-section .hd-ict-image { justify-content: center; /* centrado vertical de la imagen */ } /* Tabla técnica: debajo del grid, a ancho completo */ #HD-ICT-section .HD-ICT-table { clear: both; /* asegurar que empiece debajo del grid */ display: block; max-width: 80%; /* <-- AJUSTA: 70%, 80%, 100%, etc. */ height: auto; margin: 24px auto; border: 0.5px solid var(--secondary-color); } /* ================================================================================================== FIN HD-ICT-section: Grid texto + imagen ================================================================================================== */ /* ================================================================================================== ID_detector-section: Tres grids independientes de 2 columnas ================================================================================================== */ /* --- GRID 1: Texto (70%) + Imagen bandeja (30%) --- */ #ID_detector-section .id-grid-1 { display: grid; grid-template-columns: 60% 40%; /* 60% texto, 40% imagen */ gap: 20px; /* espacio entre columnas */ align-items: center; /* alineación superior */ margin: 20px 0; /* margen superior/inferior */ width: 100%; box-sizing: border-box; } /* --- GRID 2: Imagen detector (50%) + Tabla detector (50%) --- */ #ID_detector-section .id-grid-2 { display: grid; grid-template-columns: 50% 50%; /* 50% imagen, 50% tabla */ gap: 20px; /* espacio entre columnas */ align-items: center; /* alineación superior */ margin: 20px 0; /* margen superior/inferior */ width: 100%; box-sizing: border-box; } /* --- GRID 3: Tabla sonda (50%) + Imagen sensor (50%) --- */ #ID_detector-section .id-grid-3 { display: grid; grid-template-columns: 50% 50%; /* 50% tabla, 50% imagen */ gap: 20px; /* espacio entre columnas */ align-items: center; /* alineación superior */ margin: 20px 0; /* margen superior/inferior */ width: 100%; box-sizing: border-box; } /* Columnas base: flexbox para centrar contenido */ #ID_detector-section .id-col { display: flex; flex-direction: column; /* apilar contenido verticalmente */ align-items: center; /* centrar horizontalmente */ justify-content: flex-start; /* alineación superior POR DEFECTO */ } /* SOBRESCRIBIR INMEDIATAMENTE para columnas de imagen: centrado vertical */ #ID_detector-section .id-col.id-image { justify-content: center !important; /* centrado vertical SOLO imágenes */ } /* Columna de texto: alineación izquierda y justificado */ #ID_detector-section .id-text { align-items: flex-start; /* alinear texto a la izquierda */ } /* Columna de texto: alineación izquierda y justificado */ #ID_detector-section .id-text { align-items: flex-start; /* alinear texto a la izquierda */ } #ID_detector-section .id-text p { text-align: justify; /* justificar texto a ambos lados */ text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; /* ocupar todo el ancho de la columna */ } /* Imágenes y tablas dentro de los grids: responsive */ #ID_detector-section .id-col img { width: 100%; /* ocupar todo el ancho de su columna */ height: auto; /* mantener proporción */ display: block; border-radius: 8px; } /* --- CONTROL DE TAMAÑO INDIVIDUAL DE TABLAS --- */ /* Tabla 1: Detector de derrames ID - AJUSTABLE */ #ID_detector-section .ID_detector-table { max-width: 70%; /* <-- CAMBIA: 80%, 90%, 100% */ border: 0.5px solid var(--secondary-color); margin: 0 auto; } /* Tabla 2: Sonda de detección ID - AJUSTABLE */ #ID_detector-section .ID_sonda_-table { max-width: 70%; /* <-- CAMBIA: 80%, 90%, 100% */ border: 0.5px solid var(--secondary-color); margin: 0 auto; } /* Imágenes ID: sin borde */ #ID_detector-section .image-bandeja-derrames-id, #ID_detector-section .image-detector_derrames_ID, #ID_detector-section .image-sensor_proximidad_ID { border: none !important; } /* --- CONTROL DE TAMAÑO INDIVIDUAL DE IMÁGENES --- */ /* Imagen 1: bandeja de derrames (grid 1, columna 2) */ #ID_detector-section .id-image-1-size { max-width: 90%; /* <-- AJUSTA: 70%, 80%, 100%, etc. */ margin: 0 auto; /* centrar si es más pequeña */ } /* Imagen 2: detector de derrames (grid 2, columna 1) */ #ID_detector-section .id-image-2-size { max-width: 40%; /* <-- AJUSTA: 70%, 80%, 100%, etc. */ margin: 0 auto; /* centrar si es más pequeña */ } /* Imagen 3: detector de derrames (grid 3, columna 2) */ #ID_detector-section .id-image-3-size { max-width: 50%; /* <-- AJUSTA: 70%, 80%, 100%, etc. */ margin: 0 auto; /* centrar si es más pequeña */ } /* ================================================================================================== FIN ID_detector-section: Tres grids independientes ================================================================================================== */ /* ================================================================================================== SECCIONES CON GRID - Sistema unificado con control total ================================================================================================== */ /* ======================================== UTILIDADES BASE (reutilizables) ======================================== */ /* Columna base: flexbox para apilar contenido verticalmente */ .grid-col-base { display: flex; flex-direction: column; /* apilar elementos verticalmente */ align-items: center; /* centrar horizontalmente */ justify-content: center; /* centrar verticalmente por defecto */ } /* Columna de texto: justificación completa */ .grid-text-base { display: flex; flex-direction: column; align-items: flex-start; /* alinear contenido a la izquierda */ justify-content: center; /* centrar verticalmente */ } .grid-text-base p { text-align: justify; /* justificar texto a AMBOS lados */ text-justify: inter-word; /* espaciado entre palabras */ -webkit-hyphens: auto; /* división silábica WebKit */ -ms-hyphens: auto; /* división silábica IE/Edge */ hyphens: auto; /* división silábica estándar */ line-height: 1.75; /* interlineado cómodo */ width: 100%; /* ocupar todo el ancho */ margin: 0; /* sin márgenes adicionales */ } /* Imágenes dentro de grids: responsive y con bordes redondeados */ .grid-col-base img { width: 100%; /* ocupar todo el ancho de su contenedor */ height: auto; /* mantener proporción original */ display: block; border-radius: 8px; /* esquinas redondeadas */ } /* Tablas (que son imágenes): añadir borde */ .grid-table-border { border: 0.5px solid var(--secondary-color); } /* Imágenes sin borde (productos/componentes) */ .grid-image-no-border { border: none !important; } /* ======================================== UG-ID SECTION ======================================== */ /* Grid 1: Texto (75%) + Imagen (25%) */ #UG-ID-section .ug-id-grid-1 { display: grid; grid-template-columns: 70% 30%; /* proporción 70/30 - AJUSTABLE */ gap: 20px; /* espacio entre columnas */ align-items: start; /* centrado vertical de celdas */ margin: 20px 0; /* margen superior/inferior */ width: 100%; box-sizing: border-box; } #UG-ID-section .ug-id-grid-1 .ug-id-image { justify-content: center; /* centrado vertical de la imagen */ } #UG-ID-section .ug-id-grid-1 .ug-id-text { margin-top: 3%; /* centrado vertical de la imagen */ } /* Grid 2: Texto (70%) + Imagen (30%) */ #UG-ID-section .ug-id-grid-2 { display: grid; grid-template-columns: 50% 50%; /* proporción 50/50 - AJUSTABLE */ gap: 20px; align-items: center; margin: 20px 0; width: 100%; box-sizing: border-box; } /* Aplicar clases base a columnas de UG-ID */ #UG-ID-section .ug-id-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #UG-ID-section .ug-id-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #UG-ID-section .ug-id-text p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } /* Tamaño de imagen 1 (caja detector) - AJUSTABLE */ #UG-ID-section .ug-id-image-1-size { max-width: 100%; /* <-- CAMBIA ESTE VALOR: 70%, 80%, 100% */ margin: 0 auto; } /* Tamaño de imagen 2 (caja detector 2) - AJUSTABLE */ #UG-ID-section .ug-id-image-2-size { max-width: 70%; /* <-- CAMBIA ESTE VALOR: 70%, 80%, 100% */ margin: 0 auto; } /* Tamaño de tabla - AJUSTABLE */ #UG-ID-section .UG-ID-table { max-width: 70%; /* <-- CAMBIA ESTE VALOR: 80%, 90%, 100% */ border: 0.5px solid var(--secondary-color); } /* Imágenes sin borde */ #UG-ID-section .image-caja-detector-ug-id, #UG-ID-section .image-caja-detector-2-ug-id { border: none !important; } /* ======================================== FFF SECTION ======================================== */ #FFF-section .fff-grid-1 { display: grid; grid-template-columns: 65% 35%; /* proporción 65/35 - AJUSTABLE */ gap: 20px; align-items: start; margin: 20px 0; width: 100%; box-sizing: border-box; } #FFF-section .fff-grid-1 .fff-image { justify-content: center; /* centrado vertical de la imagen */ } #FFF-section .fff-grid-2 { display: grid; grid-template-columns: 40% 60%; /* proporción 40/60 - AJUSTABLE */ gap: 20px; align-items: center; margin: 20px 0; width: 100%; box-sizing: border-box; } #FFF-section .fff-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #FFF-section .fff-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #FFF-section .fff-text p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } /* Tamaño imagen 1 (válvula) - AJUSTABLE */ #FFF-section .fff-image-1-size { max-width: 30%; /* <-- CAMBIA: 70%, 80%, 100% */ margin: 0 auto; } /* Tamaño imagen 2 (sistema) - AJUSTABLE */ #FFF-section .fff-image-2-size { max-width: 100%; /* <-- CAMBIA: 70%, 80%, 100% */ margin: 0 auto; } /* Tamaño tabla - AJUSTABLE */ #FFF-section .FFF-table { max-width: 60%; /* <-- CAMBIA: 80%, 90%, 100% */ border: 0.5px solid var(--secondary-color); } /* Imágenes sin borde */ #FFF-section .image-fff-valve, #FFF-section .image-fff-system { border: none !important; } /* ======================================== IFT SECTION ======================================== */ #IFT-section .ift-grid-1 { display: grid; grid-template-columns: 40% 60%; /* proporción 40/60 - AJUSTABLE */ gap: 20px; align-items: start; margin: 20px 0; width: 100%; box-sizing: border-box; } #IFT-section .ift-grid-1 .ift-image { justify-content: center; /* centrado vertical de la imagen */ } #IFT-section .ift-grid-1 .ift-text { margin-top: 1%; /* centrado vertical de la imagen */ line-height: 1.75; } #IFT-section .ift-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #IFT-section .ift-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } /* Tamaño imagen - AJUSTABLE */ #IFT-section .ift-image-size { max-width: 40%; /* <-- CAMBIA: 70%, 80%, 100% */ margin: 0 auto; } /* Tamaño tabla (fuera del grid) - AJUSTABLE */ #IFT-section .IFT-table { max-width: 35%; /* <-- CAMBIA: 80%, 90%, 100% */ margin: 24px auto; border: 0.5px solid var(--secondary-color); display: block; } #IFT-section .image-IFT { border: none !important; } /* ======================================== VALVULA-J4 SECTION ======================================== */ #VALVULA-J4-section .valvula-j4-grid-1 { display: grid; grid-template-columns: 70% 30%; gap: 20px; align-items: start; margin: 20px 0; width: 100%; box-sizing: border-box; } #VALVULA-J4-section .valvula-j4-grid-1 .valvula-j4-image { justify-content: center; /* centrado vertical de la imagen */ } #VALVULA-J4-section .valvula-j4-grid-1 .valvula-j4-text { margin-top: 3%; /* centrado vertical de la imagen */ } #VALVULA-J4-section .valvula-j4-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #VALVULA-J4-section .valvula-j4-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #VALVULA-J4-section .valvula-j4-text p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } #VALVULA-J4-section .valvula-j4-image-size { max-width: 40%; margin: 0 auto; } #VALVULA-J4-section .VALVULA-J4-table { max-width: 50%; margin: 24px auto; border: 0.5px solid var(--secondary-color); display: block; } #VALVULA-J4-section .image-VALVULA-J4 { border: none !important; } /* ======================================== VALVULA-55B SECTION ======================================== */ #VALVULA-55B-section .valvula-55b-grid-1 { display: grid; grid-template-columns: 25% 75%; gap: 20px; align-items: start; margin: 20px 0; width: 100%; box-sizing: border-box; } #VALVULA-55B-section .valvula-55b-grid-1 .valvula-55b-image { justify-content: center; /* centrado vertical de la imagen */ } #VALVULA-55B-section .valvula-55b-grid-1 .valvula-55b-text { margin-top: 3%; /* centrado vertical de la imagen */ } #VALVULA-55B-section .valvula-55b-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #VALVULA-55B-section .valvula-55b-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #VALVULA-55B-section .valvula-55b-text p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } #VALVULA-55B-section .valvula-55b-image-size { max-width: 40%; margin: 0 auto; } #VALVULA-55B-section .VALVULA-55B-table { max-width: 40%; margin: 24px auto; border: 0.5px solid var(--secondary-color); display: block; } #VALVULA-55B-section .image-VALVULA-55B { border: none !important; } /* ======================================== VALVULA-GB SECTION ======================================== */ #VALVULA-GB-section .valvula-gb-grid-1 { display: grid; grid-template-columns: 70% 30%; gap: 20px; align-items: start; margin: 20px 0; width: 100%; box-sizing: border-box; } #VALVULA-GB-section .valvula-gb-grid-1 .valvula-gb-image { justify-content: center; /* centrado vertical de la imagen */ } #VALVULA-GB-section .valvula-gb-grid-1 .valvula-gb-text { margin-top: 3%; /* centrado vertical de la imagen */ } #VALVULA-GB-section .valvula-gb-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #VALVULA-GB-section .valvula-gb-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #VALVULA-GB-section .valvula-gb-text p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } #VALVULA-GB-section .valvula-gb-image-size { max-width: 35%; margin: 0 auto; } #VALVULA-GB-section .image-VALVULA-GB { border: none !important; } /* ======================================== KAT SECTION ======================================== */ #KAT-section .kat-grid-1 { display: grid; grid-template-columns: 75% 25%; gap: 20px; align-items: start; margin: 20px 0; width: 100%; box-sizing: border-box; } #KAT-section .kat-grid-1 .kat-image-1 { justify-content: center; /* centrado vertical de la imagen */ } /*#KAT-section .kat-grid-1 .kat-text { margin-top: 3%; /* centrado vertical de la imagen }*/ #KAT-section .kat-grid-2 { display: grid; grid-template-columns: 35% 65%; gap: 20px; align-items: start; margin: 20px 0; width: 100%; box-sizing: border-box; } #KAT-section .kat-grid-2 .kat-image-2 { justify-content: center; /* centrado vertical de la imagen */ } #KAT-section .kat-grid-3 { display: grid; grid-template-columns: 50% 50%; gap: 20px; align-items: center; margin: 20px 0; width: 100%; box-sizing: border-box; } #KAT-section .kat-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #KAT-section .kat-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #KAT-section .kat-text p, #KAT-section .kat-text-2 p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } #KAT-section .kat-image-1-size, #KAT-section .kat-image-3-size { max-width: 100%; margin: 0 auto; } #KAT-section .kat-image-2-size { max-width: 50%; margin: 0 auto; } #KAT-section .KAT-table { max-width: 80%; border: 0.5px solid var(--secondary-color); } #KAT-section .image-KAT-1, #KAT-section .image-KAT-2, #KAT-section .image-KAT-3 { border: none !important; } /* ======================================== SES-S SECTION ======================================== */ #SES-S-section .ses-s-grid-1 { display: grid; grid-template-columns: 30% 70%; gap: 20px; align-items: center; margin: 20px 0; width: 100%; box-sizing: border-box; } #SES-S-section .ses-s-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #SES-S-section .ses-s-text { line-height: 1.75; } #SES-S-section .ses-s-image-size { max-width: 120%; margin: 0 auto; } #SES-S-section .SES-S-table { max-width: 45%; border: 0.5px solid var(--secondary-color); } #SES-S-section .image-SES-S { border: none !important; } /* ======================================== SES-M SECTION ======================================== */ #SES-M-section .ses-m-grid-1 { display: grid; grid-template-columns: 70% 30%; gap: 20px; align-items: start; margin: 20px 0; width: 100%; box-sizing: border-box; } #SES-M-section .ses-m-grid-1 .ses-m-image { justify-content: center; /* centrado vertical de la imagen */ } #SES-M-section .ses-m-grid-1 .ses-m-text { margin-top: 2%; /* centrado vertical de la imagen */ } #SES-M-section .ses-m-grid-2 { display: grid; grid-template-columns: 50% 50%; gap: 20px; align-items: center; margin: 20px 0; width: 100%; box-sizing: border-box; } #SES-M-section .ses-m-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #SES-M-section .ses-m-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #SES-M-section .ses-m-text p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } #SES-M-section .ses-m-image-size { max-width: 100%; margin: 0 auto; } #SES-M-section .SES-M-table, #SES-M-section .J4C-table { max-width: 70%; border: 0.5px solid var(--secondary-color); } #SES-M-section .image-SES-M { border: none !important; } /* ======================================== RAMPA SECTION ======================================== */ #RAMPA-section .rampa-grid-1 { display: grid; grid-template-columns: 70% 30%; gap: 20px; align-items: center; margin: 20px 0; width: 100%; box-sizing: border-box; } #RAMPA-section .rampa-grid-2 { display: grid; grid-template-columns: 30% 70%; gap: 20px; align-items: center; margin: 20px 0; width: 100%; box-sizing: border-box; } #RAMPA-section .rampa-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #RAMPA-section .rampa-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #RAMPA-section .rampa-text p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } #RAMPA-section .rampa-image-1-size, #RAMPA-section .rampa-image-2-size { max-width: 90%; margin: 0 auto; } #RAMPA-section .RAMPA-table { max-width: 100%; border: 0.5px solid var(--secondary-color); } #RAMPA-section .image-quemador-1, #RAMPA-section .image-quemador-2 { border: none !important; } /* ======================================== VRanillo SECTION ======================================== */ #VRanillo-section .vranillo-grid-1 { display: grid; grid-template-columns: 75% 25%; gap: 20px; align-items: center; margin: 20px 0; width: 100%; box-sizing: border-box; } #VRanillo-section .vranillo-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #VRanillo-section .vranillo-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #VRanillo-section .vranillo-text p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } #VRanillo-section .vranillo-image-size { max-width: 80%; margin: 0 auto; } #VRanillo-section .image-VRANILLO { border: none !important; } /* ======================================== HPZ-ZPT SECTION ======================================== */ #HPZ-ZPT-section .hpz-zpt-grid-1 { display: grid; grid-template-columns: 70% 30%; gap: 20px; align-items: center; margin: 20px 0; width: 100%; box-sizing: border-box; } #HPZ-ZPT-section .hpz-zpt-grid-2 { display: grid; grid-template-columns: 40% 60%; gap: 20px; align-items: flex-start; margin: 20px 0; width: 100%; box-sizing: border-box; } #HPZ-ZPT-section .hpz-zpt-grid-2 .hpz-zpt-image-2 { justify-content: center; /* centrado vertical de la imagen */ } /*#HPZ-ZPT-section .hpz-zpt-grid-2 .hpz-zpt-text { margin-top: 10%; /* centrado vertical de la imagen }*/ #HPZ-ZPT-section .hpz-zpt-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #HPZ-ZPT-section .hpz-zpt-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #HPZ-ZPT-section .hpz-zpt-text p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } #HPZ-ZPT-section .hpz-zpt-image-1-size { max-width: 80%; margin: 0 auto; } #HPZ-ZPT-section .hpz-zpt-image-2-size { max-width: 100%; margin: 0 auto; } #HPZ-ZPT-section .hpz-zpt-image-3-size { max-width: 70%; margin: 0 auto; margin-top: 3%; } #HPZ-ZPT-section .HPT-table, #HPZ-ZPT-section .ZPT-table { max-width: 100%; margin: 24px auto; border: 0.5px solid var(--secondary-color); display: block; } #HPZ-ZPT-section .PANDA-table { max-width: 45%; margin: 24px auto; border: 0.5px solid var(--secondary-color); display: block; } #HPZ-ZPT-section .image-grupo-presion-1, #HPZ-ZPT-section .image-grupo-presion-2 { border: none !important; } /* ======================================== GOAS SECTION ======================================== */ #GOAS-description { line-height: 1.75; } #GOAS-section .goas-grid-1 { display: grid; grid-template-columns: 60% 40%; gap: 20px; align-items: flex-start; margin: 20px 0; width: 100%; box-sizing: border-box; } #GOAS-section .goas-grid-1 .goas-image { justify-content: center; /* centrado vertical de la imagen */ } #GOAS-section .goas-grid-1 .goas-text { margin-top: 10%; /* centrado vertical de la imagen */ } #GOAS-section .goas-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #GOAS-section .goas-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #GOAS-section .goas-text p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } #GOAS-section .goas-image-size { max-width: 100%; margin: 0 auto; } #GOAS-section .GOAS-table { max-width: 100%; margin: 24px auto; border: 0.5px solid var(--secondary-color); display: block; } #GOAS-section .image-GOAS { border: none !important; } /* ======================================== FET-10 SECTION ======================================== */ #FET-10-section .fet-10-grid-1 { display: grid; grid-template-columns: 70% 30%; gap: 20px; align-items: flex-start; margin: 20px 0; width: 100%; box-sizing: border-box; } #FET-10-section .fet-10-grid-1 .fet-10-image { justify-content: center; /* centrado vertical de la imagen */ } #FET-10-section .fet-10-grid-1 .fet-10-text { margin-top: 3%; /* centrado vertical de la imagen */ } #FET-10-section .fet-10-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #FET-10-section .fet-10-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #FET-10-section .fet-10-text p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } #FET-10-section .fet-10-image-size { max-width: 80%; margin: 0 auto; } #FET-10-section .FET-10-table { max-width: 50%; margin: 24px auto; border: 0.5px solid var(--secondary-color); display: block; } #FET-10-section .image-FET-10 { border: none !important; } /* ======================================== IST-50 SECTION ======================================== */ #IST-50-section .ist-50-grid-1 { display: grid; grid-template-columns: 70% 30%; gap: 20px; align-items: flex-start; margin: 20px 0; width: 100%; box-sizing: border-box; } #IST-50-section .ist-50-grid-1 .ist-50-image { justify-content: center; /* centrado vertical de la imagen */ } #IST-50-section .ist-50-grid-1 .ist-50-text { margin-top: 3%; /* centrado vertical de la imagen */ } #IST-50-section .ist-50-grid-2 { display: grid; grid-template-columns: 50% 25% 25%; gap: 20px; align-items: center; margin: 20px 0; width: 100%; box-sizing: border-box; } #IST-50-section .ist-50-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #IST-50-section .ist-50-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #IST-50-section .ist-50-text p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } #IST-50-section .ist-50-image-size { max-width: 60%; margin: 0 auto; } #IST-50-section .ist-50-image-2-size, #IST-50-section .ist-50-image-3-size { max-width: 70%; margin: 0 auto; } #IST-50-section .IST-50-table { max-width: 100%; border: 0.5px solid var(--secondary-color); } #IST-50-section .image-IST-50-system, #IST-50-section .image-panther-56-ac, #IST-50-section .image-filtro-gespasa { border: none !important; } /* ======================================== UPG SECTION ======================================== */ #UPG-section .upg-grid-1 { display: grid; grid-template-columns: 50% 25% 25%; gap: 20px; align-items: center; margin: 20px 0; width: 100%; box-sizing: border-box; } #UPG-section .upg-grid-2 { display: grid; grid-template-columns: 40% 60%; gap: 20px; align-items: flex-start; margin: 20px 0; width: 100%; box-sizing: border-box; } #UPG-section .upg-grid-2 .upg-image-2 { justify-content: center; /* centrado vertical de la imagen */ } #UPG-section .upg-grid-2 .upg-text { margin-top: 3%; /* centrado vertical de la imagen */ } #UPG-section .upg-grid-3 { display: grid; grid-template-columns: 70% 30%; gap: 20px; align-items: center; margin: 20px 0; width: 100%; box-sizing: border-box; } #UPG-section .upg-col { display: flex; flex-direction: column; align-items: center; justify-content: center; } #UPG-section .upg-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #UPG-section .upg-text p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.75; width: 100%; } #UPG-section .upg-image-1-size, #UPG-section .upg-image-2-size { max-width: 60%; margin: 0 auto; } #UPG-section .upg-image-3-size { max-width: 80%; margin: 0 auto; } #UPG-section .upg-image-4-size { max-width: 80%; margin: 0 auto; } #UPG-section .UPG-table { max-width: 80%; border: 0.5px solid var(--secondary-color); } #UPG-section .image-filtro-particulas, #UPG-section .image-filtro-agua, #UPG-section .image-UPG-system, #UPG-section .image-purafiner-ETA { border: none !important; } /* ================================================================================================== FIN SECCIONES CON GRID - Sistema unificado con control total ================================================================================================== */ /* -------------------------------------------------------------------------------------- */ /* estilos info-legal.html */ #link-cookies-description-4 { display: table; /* se ajusta al ancho del contenido */ margin: 0.6rem auto; /* centrado horizontal y espacio vertical */ color: var(--primary-color); text-align: center; } /* Estilos para listas con viñetas */ .bullet-list-link { list-style: none; /* quitamos estilo base */ padding-left: 20px; /* espacio para las viñetas */ } .bullet-list-link li { position: relative; padding-left: 1em; /* espacio entre viñeta y texto */ margin-bottom: 0.5em; /* espacio entre items */ } .bullet-list-link li::before { content: "•"; /* viñeta */ position: absolute; left: 0; color: var(--primary-color); /* color naranja de tu marca */ } /* Asegurar que los enlaces dentro de las listas mantengan su estilo */ .bullet-list-link li a { text-decoration: none; color: var(--primary-color); } .bullet-list-link li a:hover { text-decoration: underline; } #avisol-description-1, #avisol-description-2, #politica-description-1, #politica-description-2, #cookies-description-1, #cookies-description-2, #cookies-description-3, #cookies-description-4, #cookies-description-list1, #avisol-description-list, #politica-description-list { color: var(--text-color-light); margin-top: 10px; margin-bottom: 20px; text-align: justify; } .bullet-list { list-style-type: disc; padding-left: 20px; margin-left: 20px; } /* ================================================================================================== DESCARGAS - Estilos de página ================================================================================================== */ .downloads-section { width: 100%; padding: 3% 7% 5% 7%; box-sizing: border-box; } .download-category { width: 100%; margin-bottom: 2%; display: block; } .download-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: flex-start; } .download-item { flex: 0 0 225px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; background: #fff; padding: 0.8rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); transition: transform .28s ease, box-shadow .28s ease; margin-bottom: 1rem; transform-origin: center center; } .download-item:hover, .download-item:focus { transform: scale(1.08); z-index: 5; box-shadow: 0 10px 30px rgba(0,0,0,0.16); } .download-item img { width: 100%; max-width: 160px; height: auto; margin-bottom: 0.6rem; display: block; pointer-events: none; } .download-item p { margin: 0; font-size: 0.9rem; color: #444; word-break: break-word; } /* ================================================================================================== EL RINCÓN DEL CURIOSO - Estilos de página ================================================================================================== */ /* --- BODY DE RINCON Y REDACCION --- */ #rincon-body, #redaccion-body { background-color: var(--background-color-light); color: var(--text-color-dark); } /* --- HEADERS DE RINCON Y REDACCION --- */ #rincon-header, #redaccion-header { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-top: 15px; margin-bottom: 15px; padding: 0 5%; } #rincon-header img, #redaccion-header img { max-width: 20%; margin: 0 auto; } #rincon-title, #redaccion-title { font-size: var(--font-size-large); font-weight: var(--font-weight-black); color: var(--primary-color); margin: 5px 0 10px 0; } /* --- CONTENIDO PRINCIPAL --- */ #rincon-content, #redaccion-content { padding: 2% 7% 5% 7%; min-height: 60vh; } .rincon-intro, .redaccion-intro { max-width: 900px; margin: 0 auto 40px auto; text-align: center; } #rincon-description, #redaccion-description { font-size: var(--font-size-medium); line-height: 1.75; color: var(--text-color-dark); margin: 0; } /* ================================================================================================== RINCÓN DEL CURIOSO - Tarjetas de artículos ================================================================================================== */ .rincon-articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 32px; } .rincon-article-card { background: rgba(0, 0, 0, 0.02); border: 1px solid #ddd; border-radius: 8px; padding: 24px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .rincon-article-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); } .article-title { font-size: 1.25rem; font-weight: var(--font-weight-bold); color: var(--secondary-color); margin: 0 0 8px 0; } .article-meta { font-size: 0.85rem; color: #666; margin: 0 0 12px 0; } .article-excerpt { font-size: 0.95rem; line-height: 1.6; color: var(--text-color-dark); margin: 0 0 16px 0; } .article-link { color: var(--primary-color); text-decoration: none; font-weight: var(--font-weight-medium); transition: color 0.3s ease; } .article-link:hover { color: var(--secondary-color); text-decoration: underline; } /* Mensaje cuando no hay artículos */ .no-articles-message { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: #666; } .no-articles-message p { font-size: 1.1rem; margin: 8px 0; } /* Modal de artículo completo */ .article-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 20000; justify-content: center; align-items: center; overflow-y: auto; } .article-modal.active { display: flex; } .article-modal-content { background: var(--background-color-light); border-radius: 12px; max-width: 800px; width: 90%; max-height: 90vh; overflow-y: auto; padding: 40px; position: relative; } .article-modal-close { position: absolute; top: 16px; right: 16px; background: transparent; border: none; font-size: 2rem; color: var(--secondary-color); cursor: pointer; line-height: 1; } .article-modal-close:hover { color: var(--primary-color); } #modal-article-title { font-size: 2rem; margin: 0 0 8px 0; } #modal-article-meta { color: #666; margin: 0 0 24px 0; } #modal-article-content { line-height: 1.8; white-space: pre-wrap; word-wrap: break-word; } /* ================================================================================================== FIN RINCÓN DEL CURIOSO ================================================================================================== */ /* --- FORMULARIO DE REDACCIÓN --- */ #redaccion-form { max-width: 800px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); } #redaccion-form .form-group { display: flex; gap: 20px; justify-content: space-between; margin-bottom: 10px; } #redaccion-form label { margin: 1px 0; flex: 1; font-weight: var(--font-weight-medium); } #redaccion-form input, #redaccion-form textarea { flex: 2; margin-bottom: 20px; padding: 12px; border: none; border-bottom: 2px solid var(--secondary-color); outline: none; transition: border-color 0.3s ease; font-family: var(--font-family-main); } #redaccion-form input:focus, #redaccion-form textarea:focus { border-bottom: 2px solid var(--primary-color); } #redaccion-form textarea { height: 300px; resize: vertical; } #redaccion-form button { padding: 12px 32px; background-color: var(--secondary-color); color: var(--text-color-light); border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: var(--font-weight-medium); transition: background-color .3s ease; margin-top: 20px; } #redaccion-form button:hover { background-color: var(--primary-color); } /* ================================================================================================== FIN EL RINCÓN DEL CURIOSO - Estilos de página ================================================================================================== */ /* ================================================================================================== MODAL DE LOGIN PARA REDACCIÓN ================================================================================================== */ /* Overlay oscuro de fondo (ocupa toda la pantalla) */ .login-modal-overlay { display: none; /* oculto por defecto */ position: fixed; /* fijo en pantalla */ top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); /* fondo negro semitransparente */ z-index: 20000; /* por encima de todo */ justify-content: center; /* centrar horizontalmente */ align-items: center; /* centrar verticalmente */ } /* Mostrar el modal cuando se añade la clase .active */ .login-modal-overlay.active { display: flex; } /* Contenedor del modal (caja blanca centrada) */ .login-modal-container { background: var(--background-color-light); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); padding: 40px 32px; max-width: 450px; /* ancho máximo del modal */ width: 90%; /* responsive */ position: relative; /* para posicionar el botón X */ animation: modal-fade-in 0.3s ease; /* animación de entrada */ } /* Animación de aparición */ @keyframes modal-fade-in { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Botón de cerrar (X) */ .login-modal-close { position: absolute; top: 16px; right: 16px; background: transparent; border: none; font-size: 2rem; color: var(--secondary-color); cursor: pointer; line-height: 1; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.3s ease, color 0.3s ease; } .login-modal-close:hover, .login-modal-close:focus { background: rgba(0, 0, 0, 0.05); color: var(--primary-color); outline: none; } /* Logo en el modal */ .login-modal-logo { width: 120px; height: auto; display: block; margin: 0 auto 20px auto; } /* Título del modal */ .login-modal-title { font-size: 1.5rem; font-weight: var(--font-weight-bold); color: var(--secondary-color); text-align: center; margin: 0 0 10px 0; } /* Descripción del modal */ .login-modal-description { font-size: 0.95rem; color: #666; text-align: center; margin: 0 0 30px 0; line-height: 1.5; } /* Grupos del formulario */ .login-form-group { margin-bottom: 20px; } .login-form-group label { display: block; font-size: 0.95rem; font-weight: var(--font-weight-medium); color: var(--text-color-dark); margin-bottom: 8px; } .login-form-group input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; } .login-form-group input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(255, 127, 50, 0.1); outline: none; } /* Mensaje de error */ .login-error-message { display: none; /* oculto por defecto */ background: #fee; color: #c33; padding: 12px; border-radius: 6px; margin-bottom: 20px; font-size: 0.9rem; text-align: center; border: 1px solid #fcc; } .login-error-message.show { display: block; } /* Botón de envío */ .login-submit-button { width: 100%; padding: 14px; background: var(--secondary-color); color: var(--text-color-light); border: none; border-radius: 6px; font-size: 1rem; font-weight: var(--font-weight-medium); cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; } .login-submit-button:hover, .login-submit-button:focus { background: var(--primary-color); transform: translateY(-2px); outline: none; } /* ================================================================================================== FORMULARIO INLINE DE LOGIN (móvil - redaccion.html) ================================================================================================== */ .redaccion-login-container { max-width: 500px; margin: 40px auto; padding: 32px; background: rgba(0, 0, 0, 0.02); border-radius: 12px; } .login-intro { margin-bottom: 24px; } .login-intro-text { font-size: 1rem; color: var(--text-color-dark); text-align: center; line-height: 1.6; } /* ================================================================================================== FIN MODAL DE LOGIN ================================================================================================== */ /* ================================================================================================== IMÁGENES EN ARTÍCULOS (NUEVO) ================================================================================================== */ /* --- CONTENEDOR DE IMAGEN EN LA TARJETA (vista previa) --- */ .article-image-container { width: 100%; /* ocupar todo el ancho de la tarjeta */ height: 200px; /* altura fija para uniformidad */ overflow: hidden; /* recortar imagen si excede */ border-radius: 8px 8px 0 0; /* esquinas redondeadas arriba */ margin-bottom: 15px; /* separación con el título */ background: #f0f0f0; /* fondo gris por si la imagen no carga */ } .article-image { width: 100%; /* ocupar todo el ancho del contenedor */ height: 100%; /* ocupar toda la altura */ object-fit: cover; /* recortar imagen manteniendo proporción */ display: block; } /* --- IMAGEN EN EL MODAL (artículo completo) --- */ .modal-article-image-container { width: 100%; /* ocupar todo el ancho del modal */ max-width: 75%; /* ancho máximo de la imagen */ margin: 0 auto 20px auto; /* centrar y separar del texto */ border-radius: 8px; /* esquinas redondeadas */ overflow: hidden; /* recortar bordes */ box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* sombra suave */ } .modal-article-image { width: 100%; /* ocupar todo el ancho del contenedor */ height: auto; /* altura automática (mantener proporción) */ display: block; } /* --- AJUSTE RESPONSIVE PARA IMÁGENES EN MÓVIL --- */ @media (max-width: 899px) { .article-image-container { height: 150px; /* reducir altura en móvil */ } .modal-article-image-container { margin-bottom: 15px; /* reducir margen en móvil */ } } /* ================================================================================================== FIN IMÁGENES EN ARTÍCULOS ================================================================================================== */ /* ============================================================================================ ESTILOS FLECHAS FLOTANTES - Unificado =========================================================================================== */ /* Flechas flotantes */ .flecha { width: 38px; height: 38px; position: fixed; cursor: pointer; z-index: 1000; } .flecha-arriba { bottom: 20px; right: 20px; } .flecha-volver { top: 20px; right: 20px; } /* ============================================================================================ FIN ESTILOS FLECHAS FLOTANTES - Unificado =========================================================================================== */ /* ================================================================================================== PIE DE PÁGINA (#legales) - ESTILO UNIFICADO ================================================================================================== */ /* IMPORTANTE: Esta es la ÚNICA definición de #legales en todo el archivo */ #legales { width: 100%; background-color: var(--secondary-color); /* fondo negro */ padding: 10px 20px 2px 20px; /* REDUCIDO: arriba 10px, abajo 2px */ /* espacio interno */ text-align: center; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 0; /* SIN margen superior */ margin-bottom: 0; /* AÑADIDO: sin margen inferior */ box-sizing: border-box; } /* Ajuste específico: reducir margen propio del separador dentro de #legales */ #legales .footer-separator { margin: 0 4px; /* antes heredaba 0 12px */ } #legales a { color: var(--text-color-light); /* texto blanco */ text-decoration: none; font-size: var(--font-size-medium-small); font-weight: var(--font-weight-medium); transition: color 0.3s ease, text-decoration 0.3s ease; position: relative; } #legales a:hover, #legales a:focus { color: var(--primary-color); /* naranja al hover */ text-decoration: underline; } /* Separador visual entre enlaces */ /*#legales a:not(:last-child)::after { content: '|'; margin-left: 32px; color: var(--secondary-color); font-weight: var(--font-weight-light); }*/ /* ================================================================================================== FIN PIE DE PÁGINA (#legales) ================================================================================================== */ /* ============================================================================================ ESTILOS PIE DE PÁGINA (#general-footer) - Unificado =========================================================================================== */ #general-footer { background-color: var(--secondary-color); /* fondo negro */ color: var(--text-color-light); /* texto blanco */ padding: 2px 16px 2px 16px; /* REDUCIDO: arriba 2px, abajo 2px */ text-align: center; /* centrado horizontal */ margin-top: 0; /* sin margen superior (pegado a #legales) */ width: 100%; /* ancho completo */ box-sizing: border-box; } /* Párrafo unificado: copyright + contador en una sola línea */ .footer-unified { margin: 0; /* sin márgenes */ padding: 0; font-size: var(--font-size-small); /* mismo tamaño que #legales */ font-family: var(--font-family-main); color: var(--text-color-light); /* texto blanco */ line-height: 1.6; /* altura de línea cómoda */ display: inline-block; /* para que el contenido fluya en línea */ text-align: center; /* centrado del texto */ } /* Separador visual entre copyright y contador */ .footer-separator { margin: 0 12px; /* espacio horizontal alrededor del separador */ color: var(--primary-color); /* color naranja */ font-weight: bold; } /* Icono del contador (ojo) */ .visit-counter-icon { font-size: 1.1rem; /* ligeramente más grande */ margin-right: 6px; /* espacio entre icono y texto */ vertical-align: middle; /* alineado verticalmente con el texto */ } /* Número del contador (destacado) */ .visit-counter-number { font-weight: 600; /* peso semi-negrita */ color: var(--primary-color); /* color naranja */ font-size: var(--font-size-small); /* mismo tamaño que el texto */ vertical-align: middle; } /* ============================================================================================ FIN ESTILOS PIE DE PÁGINA (#general-footer) - Unificado =========================================================================================== */ /* Footer y #legales a ancho completo (ignorar márgenes del body en todas las páginas) */ #general-footer, #legales { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; overflow-x: hidden; /* evita cualquier scroll horizontal por 100vw */ } /* Opcional: respetar notch en iOS y mantener padding lateral cómodo */ #general-footer, #legales { padding-left: calc(env(safe-area-inset-left, 0px) + 16px); padding-right: calc(env(safe-area-inset-right, 0px) + 16px); } /* Fin general_styles.css */