/* ============================================================ G & S GOLD TRAVEL - WEB 2.0 Proyecto: PaginaWeb4.0 Archivo: assets/css/plantilla.css PLANTILLA PÚBLICA ESTRUCTURA: CABECERA SUPERIOR CABECERA PRINCIPAL CUERPO Los colores son administrados desde: Apariencia → Paleta de colores Las tipografías son administradas desde: Apariencia → Tipografías ============================================================ */ /* ============================================================ REGLAS GENERALES ============================================================ */ * { box-sizing: border-box; } html { width: 100%; min-width: 0; margin: 0; padding: 0; overflow-x: clip; } body { width: 100%; min-width: 0; margin: 0; padding: 0; font-family: var(--cabecera-superior-tipografia, var(--fuente-3)); font-size: var(--cabecera-superior-tamano, 14px); font-weight: var(--cabecera-superior-peso, 400); background: transparent; overflow-x: clip; } img { max-width: 100%; } a { text-decoration: none; } /* ============================================================ SITIO ============================================================ */ .sitio { width: 100%; min-height: 100vh; display: flex; flex-direction: column; } /* ============================================================ ============================================================ CABECERA SUPERIOR ============================================================ ============================================================ */ .cabecera-superior { width: 100%; background-color: var(--cabecera-superior-fondo); color: var(--cabecera-superior-texto); font-family: var(--fuente-3); } /* ============================================================ CONTENEDOR CABECERA SUPERIOR ============================================================ */ .cabecera-superior-contenedor { width: min( var(--cabecera-superior-ancho, 1200px), calc(100% - 40px) ); min-height: var(--cabecera-superior-altura, 50px); padding-top: var(--cabecera-superior-padding, 0px); padding-bottom: var(--cabecera-superior-padding, 0px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--cabecera-superior-espacio, 30px); } /* ============================================================ BLOQUE DE CONTACTO ============================================================ */ .cabecera-superior-contacto { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--cabecera-superior-grupo-espacio, 22px); flex: 1 1 auto; } /* ============================================================ GRUPO DE CONTACTO ============================================================ */ .cabecera-superior-grupo { min-width: 0; display: flex; align-items: center; gap: var(--cabecera-superior-grupo-espacio, 8px); } /* ============================================================ ICONOS DE CONTACTO ============================================================ */ .cabecera-superior-icono { width: var(--cabecera-superior-icono, 20px); height: var(--cabecera-superior-icono, 20px); flex: 0 0 var(--cabecera-superior-icono, 20px); display: block; object-fit: contain; } /* ============================================================ DATOS DE CONTACTO ============================================================ */ .cabecera-superior-datos { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } /* ============================================================ TEXTOS CABECERA SUPERIOR ============================================================ */ .cabecera-superior-texto, .cabecera-superior-enlace { display: inline-block; color: var(--cabecera-superior-texto); font-family: var(--fuente-3); font-size: var(--cabecera-superior-tamano, 15px); font-weight: var(--cabecera-superior-peso, 500); line-height: 1.2; text-decoration: none; white-space: nowrap; } /* ============================================================ ENLACES CABECERA SUPERIOR ============================================================ */ .cabecera-superior-enlace { transition: opacity 0.2s ease; } .cabecera-superior-enlace:hover { opacity: 0.75; } /* ============================================================ REDES SOCIALES ============================================================ */ .cabecera-superior-redes { flex: 0 0 auto; display: flex; align-items: center; gap: var(--componente-redes-sociales-espacio, 18px); } /* ============================================================ ENLACE RED SOCIAL ============================================================ */ .cabecera-superior-red { width: var(--componente-redes-sociales-icono, 35px); height: var(--componente-redes-sociales-icono, 35px); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease; } /* ============================================================ ICONOS REDES SOCIALES ============================================================ */ .cabecera-superior-red img { width: var(--componente-redes-sociales-icono, 35px); height: var(--componente-redes-sociales-icono, 35px); display: block; object-fit: contain; } /* ============================================================ HOVER REDES SOCIALES ============================================================ */ .cabecera-superior-red:hover { opacity: 0.75; transform: translateY(-1px); } /* ============================================================ ============================================================ CABECERA PRINCIPAL ============================================================ ============================================================ */ .cabecera-principal { position: sticky; top: 0; z-index: 1000; width: 100%; background-color: var(--componente-cabecera-principal-fondo, var(--cabecera-principal-fondo, transparent)); color: var(--componente-cabecera-principal-texto, var(--cabecera-principal-texto, inherit)); font-family: var(--componente-cabecera-principal-tipografia, var(--fuente-3)); font-size: var(--componente-cabecera-principal-tamano, inherit); } /* ============================================================ CONTENEDOR CABECERA PRINCIPAL ============================================================ */ .cabecera-principal-contenedor { width: min( 1200px, calc(100% - 40px) ); min-height: 80px; margin: 0 auto; display: flex; align-items: center; justify-content: flex-start; gap: 20px; flex-wrap: wrap; } /* ============================================================ LOGO ============================================================ */ .logo-cabecera { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start; text-decoration: none; } /* ============================================================ IMAGEN DEL LOGO ============================================================ */ .logo-cabecera-imagen { display: block; width: auto; max-width: var(--componente-logo-logo-ancho, 180px); max-height: var(--componente-logo-logo-alto, 60px); object-fit: contain; } /* ============================================================ MENÚ PRINCIPAL ============================================================ */ .menu-principal { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 2px; flex-wrap: wrap; overflow: visible; } /* ============================================================ ELEMENTO DEL MENÚ ============================================================ */ .menu-item { position: relative; display: flex; align-items: center; flex: 0 0 auto; } /* ============================================================ ENLACE PRINCIPAL ============================================================ */ .menu-enlace { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 5px 10px; color: var(--componente-menu-principal-texto, var(--cabecera-principal-texto, inherit)); font-family: var(--componente-menu-principal-tipografia, var(--fuente-3)); font-size: var(--componente-menu-principal-tamano, 13px); font-weight: var(--componente-menu-principal-peso, 600); line-height: 1.2; white-space: nowrap; text-decoration: none; transition: color 0.2s ease; } /* ============================================================ HOVER MENÚ PRINCIPAL ============================================================ */ .menu-enlace:hover { color: var(--componente-menu-principal-hover, var(--cabecera-principal-hover)); } /* ============================================================ MANTENER LÍNEA CUANDO EL SUBMENÚ ESTÁ ABIERTO ============================================================ */ .menu-item:hover > .menu-enlace::after { transform: scaleX(1); } /* ============================================================ SUBMENÚ ============================================================ */ .submenu { position: absolute; top: calc(100% - 8px); left: 0; min-width: 165px; width: max-content; padding: 4px 0; background: var(--componente-submenu-fondo, var(--sub-menu-principal-fondo, transparent)); border-top-width: var(--componente-submenu-borde-superior-ancho, 0px) !important; border-top-style: var(--componente-submenu-borde-superior-estilo, solid) !important; border-top-color: var(--componente-submenu-borde-superior-color, #b68c35) !important; border-right: 0 !important; border-left: 0 !important; border-bottom-width: var(--componente-submenu-borde-inferior-ancho, 0px) !important; border-bottom-style: var(--componente-submenu-borde-inferior-estilo, solid) !important; border-bottom-color: var(--componente-submenu-borde-inferior-color, #b68c35) !important; border-bottom-left-radius: var(--componente-submenu-borde-inferior-radio, 0px) !important; border-bottom-right-radius: var(--componente-submenu-borde-inferior-radio, 0px) !important;opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; z-index: 1100; } /* ============================================================ MOSTRAR SUBMENÚ ============================================================ */ .menu-item:hover > .submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* ============================================================ FOCUS SUBMENÚ ============================================================ */ .menu-item:focus-within > .submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* ============================================================ ENLACE DEL SUBMENÚ ============================================================ */ .submenu-enlace { position: relative; display: block; width: 100%; box-sizing: border-box; padding: 12px 12px; color: var(--componente-submenu-texto, var(--cabecera-principal-texto, inherit)); font-family: var(--componente-submenu-tipografia, var(--fuente-3)); font-size: var(--componente-submenu-tamano, 13px); font-weight: var(--componente-submenu-peso, 500); line-height: 1.2; text-align: center; white-space: nowrap; text-decoration: none; background: var(--sub-menu-principal-fondo, transparent); transition: color 0.2s ease; } /* ============================================================ HOVER SUBMENÚ ============================================================ */ .submenu-enlace:hover { color: var(--cabecera-principal-hover); background: transparent; } /* ============================================================ FOCUS SUBMENÚ ============================================================ */ .submenu-enlace:focus { color: var(--cabecera-principal-hover); background: transparent; } /* ============================================================ CUERPO ============================================================ */ .cuerpo-pagina { width: 100%; flex: 1 0 auto; } /* ============================================================ ============================================================ RESPONSIVE ============================================================ ============================================================ */ /* ============================================================ PANTALLAS MEDIANAS ============================================================ */ @media (max-width: 1000px) { .cabecera-principal-contenedor { gap: 20px; } .logo-cabecera-imagen { max-width: 200px; max-height: 70px; } .menu-principal { gap: 2px; overflow: visible; } .menu-enlace { padding: 10px 11px; font-size: 14px; } .menu-enlace::after { left: 11px; right: 11px; } } /* ============================================================ TABLETS ============================================================ */ @media (max-width: 900px) { /* -------------------------------------------------------- CABECERA SUPERIOR -------------------------------------------------------- */ .cabecera-superior-contenedor { width: calc(100% - 30px); padding-top: 8px; padding-bottom: 8px; flex-direction: column; justify-content: center; gap: 10px; } .cabecera-superior-contacto { justify-content: center; } .cabecera-superior-redes { justify-content: center; } /* -------------------------------------------------------- CABECERA PRINCIPAL -------------------------------------------------------- */ .cabecera-principal-contenedor { width: calc(100% - 30px); min-height: 90px; gap: 20px; justify-content: flex-start; flex-wrap: wrap; } .logo-cabecera { flex: 0 0 auto; justify-content: flex-start; } /* -------------------------------------------------------- MENÚ -------------------------------------------------------- */ .menu-principal { width: 100%; flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; overflow: visible; } } /* ============================================================ MÓVILES ============================================================ */ @media (max-width: 600px) { /* -------------------------------------------------------- CABECERA SUPERIOR -------------------------------------------------------- */ .cabecera-superior-contenedor { width: calc(100% - 24px); } .cabecera-superior-contacto { width: 100%; flex-direction: column; justify-content: center; gap: 8px; } .cabecera-superior-grupo { justify-content: center; } .cabecera-superior-texto, .cabecera-superior-enlace { font-size: 12px; white-space: normal; text-align: center; } .cabecera-superior-redes { gap: 14px; } .cabecera-superior-red, .cabecera-superior-red img { width: 30px; height: 30px; } /* -------------------------------------------------------- CABECERA PRINCIPAL -------------------------------------------------------- */ .cabecera-principal-contenedor { width: calc(100% - 24px); min-height: 75px; gap: 15px; justify-content: flex-start; flex-direction: column; align-items: stretch; } /* -------------------------------------------------------- LOGO -------------------------------------------------------- */ .logo-cabecera { flex: 0 0 auto; justify-content: center; } .logo-cabecera-imagen { max-width: 150px; max-height: 55px; } /* -------------------------------------------------------- MENÚ PRINCIPAL -------------------------------------------------------- */ .menu-principal { width: 100%; flex: 0 1 auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 2px; flex-wrap: nowrap; overflow: visible; } /* -------------------------------------------------------- ELEMENTOS -------------------------------------------------------- */ .menu-item { width: 100%; flex: 0 0 auto; justify-content: flex-start; } /* -------------------------------------------------------- ENLACES -------------------------------------------------------- */ .menu-enlace { width: 100%; min-height: 40px; padding: 9px 11px; justify-content: flex-start; font-size: 13px; } .menu-enlace::after { left: 11px; right: auto; width: 35px; } /* -------------------------------------------------------- SUBMENÚ MÓVIL -------------------------------------------------------- */ .submenu { position: static; width: 100%; min-width: 0; padding: 0 0 0 15px; display: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: var(--sub-menu-principal-fondo); border-top-width: var(--componente-submenu-borde-superior-ancho, 0px) !important; border-top-style: var(--componente-submenu-borde-superior-estilo, solid) !important; border-top-color: var(--componente-submenu-borde-superior-color, #b68c35) !important; border-right: 0 !important; border-left: 0 !important; border-bottom-width: var(--componente-submenu-borde-inferior-ancho, 0px) !important; border-bottom-style: var(--componente-submenu-borde-inferior-estilo, solid) !important; border-bottom-color: var(--componente-submenu-borde-inferior-color, #b68c35) !important; border-bottom-left-radius: var(--componente-submenu-borde-inferior-radio, 0px) !important; border-bottom-right-radius: var(--componente-submenu-borde-inferior-radio, 0px) !important; } /* -------------------------------------------------------- MOSTRAR SUBMENÚ MÓVIL -------------------------------------------------------- */ .menu-item:hover > .submenu { display: block; } .menu-item:focus-within > .submenu { display: block; } /* -------------------------------------------------------- ENLACES SUBMENÚ MÓVIL -------------------------------------------------------- */ .submenu-enlace { width: 100%; padding: 7px 10px; font-size: 13px; text-align: left; white-space: normal; background: transparent; } } /* ============================================================ ============================================================ PIE DE PÁGINA ============================================================ ============================================================ */ .pie-pagina { width: 100%; margin: 0; padding: 0; background-color: var(--componente-pie-fondo, var(--color-pie-fondo, transparent)); color: var(--componente-pie-texto, var(--color-texto-pie, inherit)); font-family: var(--componente-pie-tipografia, var(--fuente-3)); font-size: var(--componente-pie-tamano, inherit); font-weight: var(--componente-pie-peso, 400); } /* ============================================================ LÍNEA SUPERIOR DORADA ============================================================ */ .pie-pagina::before { content: ""; display: block; width: 100%; height: 5px; background-color: var(--cabecera-principal-hover); } /* ============================================================ CONTENEDOR PRINCIPAL ============================================================ */ .pie-contenedor { width: min( 1200px, calc(100% - 40px) ); margin: 0 auto; padding: 38px 0 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 45px; box-sizing: border-box; } /* ============================================================ COLUMNA ============================================================ */ .pie-columna { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } /* ============================================================ TÍTULO DE COLUMNA ============================================================ */ .pie-titulo { position: relative; margin: 0 0 22px; padding: 0 0 9px; color: var(--color-texto-pie); font-family: var(--fuente-3); font-size: 15px; font-weight: 700; line-height: 1.2; } /* ============================================================ LÍNEA DEBAJO DEL TÍTULO ============================================================ */ .pie-titulo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 58px; height: 3px; background-color: var(--cabecera-principal-hover); } /* ============================================================ CONTENIDO DE COLUMNA ============================================================ */ .pie-contenido { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .pie-fila-orden { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } /* ============================================================ ELEMENTO TEXTO ============================================================ */ .pie-texto { width: 100%; } .pie-texto h3 { margin: 0 0 9px; color: var(--color-texto-pie); font-family: var(--fuente-3); font-size: 16px; font-weight: 600; line-height: 1.3; } .pie-texto p { margin: 0; color: var(--color-texto-pie); font-family: var(--fuente-3); font-size: 13px; font-weight: 400; line-height: 1.65; text-align: justify; } /* ============================================================ INFORMACIÓN ============================================================ */ .pie-informacion { width: 100%; display: flex; align-items: flex-start; gap: 11px; } .pie-elemento-icono { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; object-fit: contain; } .pie-elemento-contenido { min-width: 0; } .pie-elemento-contenido h3 { margin: 0 0 3px; color: var(--color-texto-pie); font-family: var(--fuente-3); font-size: 15px; font-weight: 600; line-height: 1.3; } .pie-elemento-contenido p { margin: 0; color: var(--color-texto-pie); font-family: var(--fuente-3); font-size: 13px; font-weight: 400; line-height: 1.5; } /* ============================================================ ENLACES ============================================================ */ .pie-enlace { position: relative; display: inline-block; width: max-content; max-width: 100%; padding: 2px 0; color: var(--color-texto-pie); font-family: var(--fuente-3); font-size: 13px; text-transform: uppercase; font-weight: 400; line-height: 1.5; text-decoration: none; transition: color 0.2s ease; } .pie-enlace:hover { color: var(--cabecera-principal-hover); } /* ============================================================ ICONOS CON ENLACE ============================================================ */ .pie-icono-enlace { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .pie-icono-enlace img { display: block; width: 32px; height: 32px; object-fit: contain; transition: opacity 0.2s ease, transform 0.2s ease; } .pie-icono-enlace:hover img { opacity: 0.8; transform: translateY(-2px); } /* ============================================================ IMÁGENES ============================================================ */ .pie-imagen-contenedor { width: 100%; } .pie-imagen { display: block; max-width: 100%; height: auto; object-fit: contain; } .pie-imagen-enlace { display: inline-block; max-width: 100%; text-decoration: none; } /* ============================================================ COLUMNA 4 - IMÁGENES AGRUPADAS POR ORDEN ============================================================ */ .pie-columna-4 .pie-fila-orden .pie-imagen-contenedor { width: auto; flex: 0 0 auto; } .pie-columna-4 .pie-fila-orden .pie-imagen-enlace { width: auto; flex: 0 0 auto; } .pie-imagen-enlace:hover { opacity: 0.85; } /* ============================================================ LIBRO DE RECLAMACIONES ============================================================ */ .pie-reclamaciones { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; max-width: 220px; padding: 10px; color: var(--color-texto-pie); text-decoration: none; border: 2px solid var(--color-texto-pie); border-radius: 18px; transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .pie-columna-4 .pie-reclamaciones { align-self: center; } .pie-reclamaciones:hover { color: var(--cabecera-principal-hover); border-color: var(--cabecera-principal-hover); transform: translateY(-2px); } .pie-reclamaciones-imagen { display: block; max-width: 150px; max-height: 100px; object-fit: contain; } .pie-reclamaciones span { display: block; text-align: center; font-family: var(--fuente-3); font-size: 14px; font-weight: 700; line-height: 1.25; } /* ============================================================ COPYRIGHT ============================================================ */ .pie-inferior { width: 100%; margin: 0; padding: 17px 20px; box-sizing: border-box; border-top: 1px solid var(--color-texto-pie); } .pie-contenedor-inferior { width: min( 1200px, calc(100% - 40px) ); margin: 0 auto; display: flex; align-items: center; justify-content: center; } .pie-copyright { margin: 0; color: var(--componente-pie-copyright-texto, var(--color-texto-pie, inherit)); font-family: var(--componente-pie-copyright-tipografia, var(--fuente-3)); font-size: var(--componente-pie-copyright-tamano, 12px); font-weight: var(--componente-pie-copyright-peso, 400); line-height: 1.5; text-align: center; } /* ============================================================ TABLET ============================================================ */ @media (max-width: 950px) { .pie-contenedor { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; row-gap: 38px; } } /* ============================================================ MÓVIL ============================================================ */ @media (max-width: 650px) { .pie-contenedor { width: calc(100% - 30px); grid-template-columns: 1fr; gap: 32px; padding: 32px 0 28px; } .pie-titulo { font-size: 20px; } .pie-texto p, .pie-elemento-contenido p, .pie-enlace { font-size: 14px; } .pie-inferior { padding: 15px; } .pie-contenedor-inferior { width: 100%; } .pie-copyright { font-size: 13px; } } /* ============================================================ CONEXIÓN REAL: COMPONENTES VISUALES → PLANTILLA ============================================================ */ /* CABECERA PRINCIPAL */ .cabecera-principal { background-color: var(--componente-cabecera-principal-fondo, var(--cabecera-principal-fondo, transparent)); color: var(--componente-cabecera-principal-texto, var(--cabecera-principal-texto, inherit)); font-family: var(--componente-cabecera-principal-tipografia, var(--fuente-3, inherit)); font-size: var(--componente-cabecera-principal-tamano, inherit); font-weight: var(--componente-cabecera-principal-peso, inherit); } .cabecera-principal-contenedor { gap: var(--componente-cabecera-principal-espacio, 20px); padding: var(--componente-cabecera-principal-padding, 0px); border-radius: var(--componente-cabecera-principal-radio, 0px); } /* LOGO */ .logo-cabecera-imagen { max-width: var(--componente-logo-logo-ancho, 180px); max-height: var(--componente-logo-logo-alto, 60px); border-radius: var(--componente-logo-radio, 0px); } .logo-cabecera { padding: var(--componente-logo-espacio, 0px); } /* MENÚ */ .menu-principal { gap: var(--componente-menu-principal-espacio, 2px); } .menu-enlace { color: var(--componente-menu-principal-texto, var(--cabecera-principal-texto, inherit)); font-family: var(--componente-menu-principal-tipografia, var(--fuente-3, inherit)); font-size: var(--componente-menu-principal-tamano, 13px); font-weight: var(--componente-menu-principal-peso, 600); padding: var(--componente-menu-principal-padding, 5px 10px); border-radius: var(--componente-menu-principal-radio, 0px); } .menu-enlace:hover { color: var(--componente-menu-principal-hover, var(--cabecera-principal-hover, inherit)); } /* SUBMENÚ */ .submenu { background: var(--componente-submenu-fondo, var(--sub-menu-principal-fondo, transparent)); padding: var(--componente-submenu-padding, 4px 0); border-radius: var(--componente-submenu-radio, 0 0 10px 10px); } .submenu-enlace { color: var(--componente-submenu-texto, var(--cabecera-principal-texto, inherit)); font-family: var(--componente-submenu-tipografia, var(--fuente-3, inherit)); font-size: var(--componente-submenu-tamano, 13px); font-weight: var(--componente-submenu-peso, 500); padding: var(--componente-submenu-padding, 12px 12px); } .submenu-enlace:hover, .submenu-enlace:focus { color: var(--componente-submenu-hover, var(--cabecera-principal-hover, inherit)); } /* ICONOS DE CABECERA */ .cabecera-superior-icono { width: var(--componente-iconos-cabecera-icono, var(--cabecera-superior-icono, 16px)); height: var(--componente-iconos-cabecera-icono, var(--cabecera-superior-icono, 16px)); color: var(--componente-iconos-cabecera-texto, currentColor); flex: 0 0 auto; } .cabecera-superior-icono img, .cabecera-superior-icono svg { width: 100%; height: 100%; object-fit: contain; } /* REDES SOCIALES */ .cabecera-superior-redes { gap: var(--componente-redes-sociales-espacio, 18px); } .cabecera-superior-red, .cabecera-superior-red img, .cabecera-superior-red svg { width: var(--componente-redes-sociales-icono, 35px); height: var(--componente-redes-sociales-icono, 35px); } .cabecera-superior-red { color: var(--componente-redes-sociales-texto, currentColor); border-radius: var(--componente-redes-sociales-radio, 0px); } .cabecera-superior-red:hover { color: var(--componente-redes-sociales-hover, currentColor); } /* ENLACES */ .cabecera-superior-enlace, .pie-enlace, .pie-icono-enlace, .pie-imagen-enlace { color: var(--componente-enlaces-texto, inherit); font-family: var(--componente-enlaces-tipografia, inherit); font-size: var(--componente-enlaces-tamano, inherit); font-weight: var(--componente-enlaces-peso, inherit); } .cabecera-superior-enlace:hover, .pie-enlace:hover, .pie-icono-enlace:hover, .pie-imagen-enlace:hover { color: var(--componente-enlaces-hover, inherit); } /* PIE */ .pie-pagina { background-color: var(--componente-pie-fondo, var(--color-pie-fondo, transparent)); color: var(--componente-pie-texto, var(--color-texto-pie, inherit)); font-family: var(--componente-pie-tipografia, var(--fuente-3, inherit)); font-size: var(--componente-pie-tamano, inherit); font-weight: var(--componente-pie-peso, 400); padding: var(--componente-pie-padding, 0px); } .pie-contenedor { gap: var(--componente-pie-espacio, 45px); } .pie-copyright { background-color: var(--componente-pie-copyright-fondo, var(--color-pie-fondo-copyright, transparent)); color: var(--componente-pie-copyright-texto, var(--color-texto-pie, inherit)); font-family: var(--componente-pie-copyright-tipografia, var(--fuente-3, inherit)); font-size: var(--componente-pie-copyright-tamano, inherit); font-weight: var(--componente-pie-copyright-peso, 400); padding: var(--componente-pie-copyright-padding, 0px); } /* BOTONES DEL SITIO */ .pagina-elemento-boton { background: var(--componente-botones-fondo, inherit); color: var(--componente-botones-texto, inherit); font-family: var(--componente-botones-tipografia, inherit); font-size: var(--componente-botones-tamano, inherit); font-weight: var(--componente-botones-peso, inherit); padding: var(--componente-botones-padding, inherit); border-radius: var(--componente-botones-radio, 0px); } .pagina-elemento-boton:hover { background: var(--componente-botones-hover, inherit); } /* CONEXIÓN CABECERA SUPERIOR */ .cabecera-superior { font-family: var(--cabecera-superior-tipografia, inherit); font-size: var(--cabecera-superior-tamano, 14px); font-weight: var(--cabecera-superior-peso, 400); } .cabecera-superior-texto, .cabecera-superior-enlace { font-family: inherit; font-size: inherit; font-weight: inherit; } .cabecera-superior-icono { width: var(--cabecera-superior-icono, 16px); height: var(--cabecera-superior-icono, 16px); } /* ============================================================ SEPARACIÓN ESTRICTA DE CABECERA SUPERIOR El tamaño del texto NO controla las redes sociales. ============================================================ */ .cabecera-superior { font-size: initial; } .cabecera-superior-contacto, .cabecera-superior-datos, .cabecera-superior-grupo, .cabecera-superior-texto, .cabecera-superior-enlace { font-family: var(--cabecera-superior-tipografia, inherit); font-size: var(--cabecera-superior-tamano, 14px); font-weight: var(--cabecera-superior-peso, 400); } .cabecera-superior-redes { font-size: initial; gap: var(--componente-redes-sociales-espacio, 18px); } .cabecera-superior-red { width: var(--componente-redes-sociales-icono, 35px); height: var(--componente-redes-sociales-icono, 35px); font-size: initial; } .cabecera-superior-red img, .cabecera-superior-red svg { width: var(--componente-redes-sociales-icono, 35px); height: var(--componente-redes-sociales-icono, 35px); max-width: none; max-height: none; } .cabecera-superior-icono { width: var(--cabecera-superior-icono, 16px); height: var(--cabecera-superior-icono, 16px); flex: 0 0 var(--cabecera-superior-icono, 16px); } /* ============================================================ CABECERA SUPERIOR — ESPACIADOS INDEPENDIENTES ============================================================ */ /* La separación entre Teléfono / Correo / Dirección */ .cabecera-superior-contacto { gap: var(--cabecera-superior-espacio, 22px); } /* La separación entre icono y texto dentro de cada bloque */ .cabecera-superior-grupo { gap: var(--cabecera-superior-grupo-espacio, 8px); } /* Las redes NO heredan ninguno de los dos espacios anteriores */ .cabecera-superior-redes { gap: var(--componente-redes-sociales-espacio, 18px); } /* El contenedor general solamente separa contacto y redes */ .cabecera-superior-contenedor { gap: var(--cabecera-superior-bloques, 30px); } /* Corrección final de semántica de espaciado */ .cabecera-superior-contenedor { gap: var(--cabecera-superior-espacio, 22px); } .cabecera-superior-contacto { gap: var(--cabecera-superior-espacio, 22px); } .cabecera-superior-grupo { gap: var(--cabecera-superior-grupo-espacio, 8px); } .cabecera-superior-redes { gap: var(--componente-redes-sociales-espacio, 18px); } /* DISEÑO DEL MENÚ: cada propiedad proviene exclusivamente de su configuración */ .menu-principal { gap: var(--componente-menu-principal-espacio, 2px); } .menu-enlace { padding: var(--componente-menu-principal-padding, 5px 10px); border-radius: var(--componente-menu-principal-radio, 0px); } .submenu { gap: var(--componente-submenu-espacio, 0px); padding: var(--componente-submenu-padding, 4px 0); border-radius: var(--componente-submenu-radio, 0 0 10px 10px); } .submenu-enlace { padding: var(--componente-submenu-padding, 12px 12px); border-radius: var(--componente-submenu-radio, 0px); } /* SUBMENÚ: configuración final proveniente del editor */ .submenu { border-top-width: var(--componente-submenu-borde-superior-ancho, 0px) !important; border-top-style: var(--componente-submenu-borde-superior-estilo, solid) !important; border-top-color: var(--componente-submenu-borde-superior-color, #b68c35) !important; border-bottom-width: var(--componente-submenu-borde-inferior-ancho, 0px) !important; border-bottom-style: var(--componente-submenu-borde-inferior-estilo, solid) !important; border-bottom-color: var(--componente-submenu-borde-inferior-color, #b68c35) !important; border-bottom-left-radius: var(--componente-submenu-borde-inferior-radio, 0px) !important; border-bottom-right-radius: var(--componente-submenu-borde-inferior-radio, 0px) !important; } .submenu-enlace { text-align: center !important; } /* ============================================================ G&S GOLD TRAVEL CAPA FINAL DE COMPONENTES VISUALES Todos los valores vienen del Editor Visual / BD. No se establecen tamaños o colores fijos para los componentes. ============================================================ */ /* CABECERA PRINCIPAL */ .cabecera-principal { background: var(--componente-cabecera-principal-fondo, transparent) !important; color: var(--componente-cabecera-principal-texto, inherit) !important; font-family: var(--componente-cabecera-principal-tipografia, inherit) !important; font-size: var(--componente-cabecera-principal-tamano, inherit) !important; font-weight: var(--componente-cabecera-principal-peso, 400) !important; padding: var(--componente-cabecera-principal-padding, 0px) !important; } .cabecera-principal a { color: inherit; } /* MENÚ PRINCIPAL */ .menu-principal { gap: var(--componente-menu-principal-espacio, 0px) !important; } .menu-enlace { color: var(--componente-menu-principal-texto, var(--cabecera-principal-texto, inherit)) !important; font-family: var(--componente-menu-principal-tipografia, inherit) !important; font-size: var(--componente-menu-principal-tamano, inherit) !important; font-weight: var(--componente-menu-principal-peso, 400) !important; padding: var(--componente-menu-principal-padding, 0px) !important; border-radius: var(--componente-menu-principal-radio, 0px) !important; text-align: center !important; } .menu-enlace:hover, .menu-enlace:focus { color: var(--componente-menu-principal-hover, inherit) !important; } /* SUBMENÚ */ .submenu { background: var(--componente-submenu-fondo, var(--sub-menu-principal-fondo, transparent)) !important; gap: var(--componente-submenu-espacio, 0px) !important; padding: var(--componente-submenu-padding, 0px) !important; /* El radio general NO vuelve a sobrescribir el radio inferior. */ border-radius: 0 0 var(--componente-submenu-borde-inferior-radio, 0px) var(--componente-submenu-borde-inferior-radio, 0px) !important; border-top-width: var(--componente-submenu-borde-superior-ancho, 0px) !important; border-top-style: var(--componente-submenu-borde-superior-estilo, solid) !important; border-top-color: var(--componente-submenu-borde-superior-color, transparent) !important; border-right: 0 !important; border-left: 0 !important; border-bottom-width: var(--componente-submenu-borde-inferior-ancho, 0px) !important; border-bottom-style: var(--componente-submenu-borde-inferior-estilo, solid) !important; border-bottom-color: var(--componente-submenu-borde-inferior-color, transparent) !important; overflow: hidden; } .submenu-enlace { color: var(--componente-submenu-texto, inherit) !important; font-family: var(--componente-submenu-tipografia, inherit) !important; font-size: var(--componente-submenu-tamano, inherit) !important; font-weight: var(--componente-submenu-peso, 400) !important; padding: var(--componente-submenu-padding, 0px) !important; text-align: center !important; } .submenu-enlace:hover, .submenu-enlace:focus { color: var(--componente-submenu-hover, inherit) !important; } /* PIE */ .pie-pagina { background: var(--componente-pie-fondo, var(--color-pie-fondo, transparent)) !important; color: var(--componente-pie-texto, var(--color-texto-pie, inherit)) !important; font-family: var(--componente-pie-tipografia, inherit) !important; font-size: var(--componente-pie-tamano, inherit) !important; font-weight: var(--componente-pie-peso, 400) !important; padding: var(--componente-pie-padding, 0px) !important; } .pie-copyright { background: var(--componente-pie-copyright-fondo, var(--color-pie-fondo-copyright, transparent)) !important; color: var(--componente-pie-copyright-texto, inherit) !important; font-family: var(--componente-pie-copyright-tipografia, inherit) !important; font-size: var(--componente-pie-copyright-tamano, inherit) !important; font-weight: var(--componente-pie-copyright-peso, 400) !important; padding: var(--componente-pie-copyright-padding, 0px) !important; } /* LOGO */ .logo-cabecera-imagen { width: var(--componente-logo-logo-ancho, auto) !important; height: var(--componente-logo-logo-alto, auto) !important; border-radius: var(--componente-logo-radio, 0px) !important; } /* ICONOS DE CABECERA */ .cabecera-superior-icono, .cabecera-superior-icono img, .cabecera-superior-icono svg { width: var(--componente-iconos-cabecera-icono, 16px) !important; height: var(--componente-iconos-cabecera-icono, 16px) !important; } .cabecera-superior-icono { color: var(--componente-iconos-cabecera-texto, inherit) !important; } /* REDES SOCIALES — completamente independientes */ .cabecera-superior-redes { gap: var(--componente-redes-sociales-espacio, 0px) !important; } .cabecera-superior-red, .cabecera-superior-red img, .cabecera-superior-red svg { width: var(--componente-redes-sociales-icono, 16px) !important; height: var(--componente-redes-sociales-icono, 16px) !important; } .cabecera-superior-red { color: var(--componente-redes-sociales-texto, inherit) !important; border-radius: var(--componente-redes-sociales-radio, 0px) !important; } .cabecera-superior-red:hover { color: var(--componente-redes-sociales-hover, inherit) !important; } /* ENLACES GENERALES */ .sitio a { font-family: var(--componente-enlaces-tipografia, inherit); font-size: var(--componente-enlaces-tamano, inherit); font-weight: var(--componente-enlaces-peso, 400); color: var(--componente-enlaces-texto, inherit); } .sitio a:hover { color: var(--componente-enlaces-hover, inherit); } /* BOTONES */ .sitio button, .sitio .boton { background: var(--componente-botones-fondo, transparent); color: var(--componente-botones-texto, inherit); font-family: var(--componente-botones-tipografia, inherit); font-size: var(--componente-botones-tamano, inherit); font-weight: var(--componente-botones-peso, 400); padding: var(--componente-botones-padding, 0px); border-radius: var(--componente-botones-radio, 0px); } .sitio button:hover, .sitio .boton:hover { background: var(--componente-botones-hover, transparent); } /* ============================================================ PIE DE PÁGINA — CONFIGURACIÓN INDEPENDIENTE TÍTULO ≠ CONTENIDO Todos los valores proceden del Editor Visual. ============================================================ */ .pie-pagina { background-color: var(--componente-pie-fondo, var(--color-pie-fondo, transparent)) !important; color: var(--componente-pie-texto, var(--color-texto-pie, inherit)) !important; font-family: var(--componente-pie-tipografia, var(--fuente-3, inherit)) !important; } .pie-contenedor { gap: var(--componente-pie-espacio, 45px) !important; } /* Título de cada columna */ .pie-titulo { color: var(--componente-pie-titulo-color, var(--color-texto-pie, inherit)) !important; font-family: var(--componente-pie-titulo-tipografia, var(--componente-pie-tipografia, var(--fuente-3, inherit))) !important; font-size: var(--componente-pie-titulo-tamano, 15px) !important; font-weight: var(--componente-pie-titulo-peso, 700) !important; margin-bottom: var(--componente-pie-titulo-espacio, 22px) !important; } /* Contenido de las columnas */ .pie-contenido { gap: var(--componente-pie-contenido-espacio, 12px) !important; color: var(--componente-pie-contenido-color, var(--color-texto-pie, inherit)) !important; font-family: var(--componente-pie-contenido-tipografia, var(--componente-pie-tipografia, var(--fuente-3, inherit))) !important; font-size: var(--componente-pie-contenido-tamano, 13px) !important; font-weight: var(--componente-pie-contenido-peso, 400) !important; } .pie-contenido .pie-texto, .pie-contenido .pie-texto h3, .pie-contenido .pie-texto p, .pie-contenido .pie-elemento-contenido, .pie-contenido .pie-elemento-contenido h3, .pie-contenido .pie-elemento-contenido p, .pie-contenido .pie-enlace { color: var(--componente-pie-contenido-color, var(--color-texto-pie, inherit)) !important; font-family: var(--componente-pie-contenido-tipografia, var(--componente-pie-tipografia, var(--fuente-3, inherit))) !important; font-size: var(--componente-pie-contenido-tamano, 13px) !important; font-weight: var(--componente-pie-contenido-peso, 400) !important; } .pie-contenido .pie-texto p, .pie-contenido .pie-elemento-contenido p, .pie-contenido .pie-enlace { line-height: 1.5 !important; } /* El tamaño del título nunca se hereda al contenido. */ .pie-contenido { font-size: var(--componente-pie-contenido-tamano, 13px) !important; } /* Copyright continúa siendo independiente del pie. */ .pie-copyright { background-color: var(--componente-pie-copyright-fondo, var(--color-pie-fondo-copyright, transparent)) !important; color: var(--componente-pie-copyright-texto, var(--color-texto-pie, inherit)) !important; font-family: var(--componente-pie-copyright-tipografia, var(--fuente-3, inherit)) !important; font-size: var(--componente-pie-copyright-tamano, 12px) !important; font-weight: var(--componente-pie-copyright-peso, 400) !important; padding: var(--componente-pie-copyright-padding, 0px) !important; } @media (max-width: 650px) { .pie-titulo { font-size: var(--componente-pie-titulo-tamano, 20px) !important; } .pie-contenido .pie-texto p, .pie-contenido .pie-elemento-contenido p, .pie-contenido .pie-enlace { font-size: var(--componente-pie-contenido-tamano, 14px) !important; } } /* ============================================================ CORRECCIÓN SISTÉMICA — CABECERA SUPERIOR El campo "Tamaño de iconos" de: Cabecera superior → Diseño controla EXCLUSIVAMENTE los iconos de teléfono, correo y dirección. Las redes sociales permanecen independientes y continúan usando --componente-redes-sociales-icono. ============================================================ */ .cabecera-superior .cabecera-superior-icono { width: var(--cabecera-superior-icono, 16px) !important; height: var(--cabecera-superior-icono, 16px) !important; flex: 0 0 var(--cabecera-superior-icono, 16px) !important; } .cabecera-superior .cabecera-superior-icono img, .cabecera-superior .cabecera-superior-icono svg { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; } /* Redes sociales: independientes del tamaño de los iconos de contacto. */ .cabecera-superior .cabecera-superior-red { width: var(--componente-redes-sociales-icono, 35px) !important; height: var(--componente-redes-sociales-icono, 35px) !important; } .cabecera-superior .cabecera-superior-red img, .cabecera-superior .cabecera-superior-red svg { width: var(--componente-redes-sociales-icono, 35px) !important; height: var(--componente-redes-sociales-icono, 35px) !important; } /* ============================================================ CABECERA SUPERIOR — CORRECCIÓN DEFINITIVA DE ESPACIADOS ============================================================ Estos valores vienen exclusivamente de: - espacio_elementos_px = Separación entre bloques - padding_vertical_px = Espacio vertical No se utilizan valores fijos ni las variables de otros componentes para estas dos propiedades. ============================================================ */ /* Separación entre los bloques de contacto (teléfono/correo/dirección). */ .cabecera-superior .cabecera-superior-contacto { gap: var(--cabecera-superior-espacio, 22px) !important; } /* Separación entre el bloque de contacto y el bloque de redes sociales. */ .cabecera-superior .cabecera-superior-contenedor { gap: var(--cabecera-superior-espacio, 22px) !important; } /* Espacio vertical configurable desde el editor. */ .cabecera-superior .cabecera-superior-contenedor { padding-top: var(--cabecera-superior-padding, 0px) !important; padding-bottom: var(--cabecera-superior-padding, 0px) !important; } /* En móvil tampoco se permiten valores fijos que anulen el editor. */ @media (max-width: 900px) { .cabecera-superior .cabecera-superior-contenedor { padding-top: var(--cabecera-superior-padding, 0px) !important; padding-bottom: var(--cabecera-superior-padding, 0px) !important; gap: var(--cabecera-superior-espacio, 22px) !important; } .cabecera-superior .cabecera-superior-contacto { gap: var(--cabecera-superior-espacio, 22px) !important; } } @media (max-width: 600px) { .cabecera-superior .cabecera-superior-contenedor { padding-top: var(--cabecera-superior-padding, 0px) !important; padding-bottom: var(--cabecera-superior-padding, 0px) !important; gap: var(--cabecera-superior-espacio, 22px) !important; } .cabecera-superior .cabecera-superior-contacto { gap: var(--cabecera-superior-espacio, 22px) !important; } } /* PIE FINAL - reglas autoritativas. El módulo Pie se configura desde el editor. */ .pie-pagina{background:var(--pie-fondo)!important;color:var(--pie-texto)!important;font-family:var(--pie-fuente)!important;border-top:var(--pie-border-top-width) var(--pie-border-top-style) var(--pie-border-top-color)!important;border-bottom:var(--pie-border-bottom-width) var(--pie-border-bottom-style) var(--pie-border-bottom-color)!important;border-radius:var(--pie-radius)!important;box-shadow:var(--pie-shadow,none)!important} .pie-contenedor{gap:var(--pie-gap)!important;padding-top:var(--pie-sup)!important;padding-bottom:var(--pie-inf)!important;max-width:var(--pie-ancho)!important} .pie-titulo{color:var(--pie-titulo-color)!important;font-family:var(--pie-titulo-font)!important;font-size:var(--pie-titulo-size)!important;font-weight:var(--pie-titulo-weight)!important;margin-bottom:var(--pie-titulo-space)!important} .pie-titulo::after{width:var(--pie-line-width)!important;height:var(--pie-line-height)!important;background:var(--pie-line-color)!important} .pie-contenido{color:var(--pie-contenido-color)!important;font-family:var(--pie-contenido-font)!important;font-size:var(--pie-contenido-size)!important;font-weight:var(--pie-contenido-weight)!important;line-height:var(--pie-contenido-line)!important;gap:var(--pie-contenido-gap)!important;text-align:var(--pie-contenido-align)!important} .pie-contenido p,.pie-contenido p *{font-size:inherit!important;font-family:inherit!important;color:inherit}