/* Theme Name: AquaSummit Latam 2026 Theme URI: https://aquasummit.camacolvalle.org.co Author: Camacol Valle Author URI: https://camacolvalle.org.co Description: Theme block 100% editable con Gutenberg para el congreso AquaSummit Latam 2026. Identidad visual replicada del sitio de referencia (azul marino + dorado, Poppins + Montserrat). Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 7.4 Version: 1.7.6 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: aquasummit-theme ───────────────────────────────────────────────────────────── NOTA IMPORTANTE PARA TI (Juan): Este archivo NO es donde van los estilos principales — esos viven en theme.json (colores, fuentes, tamaños) porque así WordPress los puede ofrecer como opciones dentro del editor. Aquí SOLO van detalles muy específicos que theme.json todavía no puede expresar bien: el glow del botón, el efecto del hero, el countdown, etc. Es la "capa fina" encima de los cimientos. ───────────────────────────────────────────────────────────── */ /* ─────────────────────────────────────────── BOTONES — sombra "glow" dorada (theme.json define forma y color; esto añade la sombra que el sitio de referencia usa) ─────────────────────────────────────────── */ .wp-block-button__link { box-shadow: 0 10px 40px -10px rgba(248, 232, 55, 0.55); transition: transform 0.2s ease, box-shadow 0.2s ease; } .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 14px 45px -8px rgba(35, 45, 143, 0.35); } /* Variante de botón "outline" (contorno blanco, para usar sobre el hero junto al botón dorado principal) */ .is-style-outline-white .wp-block-button__link { background-color: transparent !important; border: 2px solid #ffffff; color: #ffffff !important; box-shadow: none; } .is-style-outline-white .wp-block-button__link:hover { background-color: #ffffff !important; color: var(--wp--preset--color--secondary) !important; } /* ─────────────────────────────────────────── HERO — overlay sobre la imagen de fondo ─────────────────────────────────────────── */ .aquasummit-hero { position: relative; overflow: hidden; margin-top: 0 !important; } .aquasummit-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35,45,143,0.85) 0%, rgba(35,45,143,0.65) 100%); z-index: 1; } .aquasummit-hero > .wp-block-cover__inner-container { position: relative; z-index: 2; } /* ─────────────────────────────────────────── ENCABEZADOS DE PÁGINAS INTERNAS (Organiza, Agenda, Speakers, Contacto, Inscripción, Patrocinadores) — mismo bug que el Hero del Home: WordPress agrega automáticamente "margin-top: 24px" al primer bloque después del header, dejando una franja del fondo blanco del visible entre el navbar (position: fixed) y el encabezado azul de cada página interna. Todas estas páginas usan el mismo patrón de encabezado: un wp:group con fondo "secondary" justo después del header — por eso un solo selector aquí corrige las 6 páginas a la vez, sin tener que repetir esta regla en cada una. NOTA: esta clase también aparece en un interno del overlay del Hero del Home — no hay conflicto, ese span usa position:absolute y no depende de margin para su posición. */ .has-secondary-background-color:first-of-type { margin-top: 0 !important; } /* ─────────────────────────────────────────── NAVBAR — transparente sobre el hero, sólida al hacer scroll (requiere el pequeño script en assets/js/navbar-scroll.js) ─────────────────────────────────────────── */ .aquasummit-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: transparent; border-bottom: 1px solid transparent; transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* Cuando ves el sitio logueado en WordPress (como administrador o editor), WordPress agrega una barra negra fija arriba (32px de alto en escritorio, 46px en celular) y desplaza el con un margin-top para que esa barra no tape el contenido. Nuestro navbar usa position:fixed con top:0, que ignora ese desplazamiento y queda pegado al borde real del navegador — por eso aparecía una franja del fondo del sitio asomándose entre la barra de WordPress y nuestro menú. WordPress agrega automáticamente la clase "admin-bar" al en ese caso — la usamos aquí para empujar el navbar hacia abajo exactamente la altura de esa barra, sin afectar en nada a los visitantes normales (que nunca ven la barra de administración ni esta clase). */ body.admin-bar .aquasummit-navbar { top: 32px; } @media (max-width: 782px) { body.admin-bar .aquasummit-navbar { top: 46px; } } .aquasummit-navbar.is-scrolled { background-color: var(--wp--preset--color--background); border-bottom-color: var(--wp--preset--color--background); box-shadow: 0 2px 20px rgba(35, 45, 143, 0.08); } .aquasummit-navbar a, .aquasummit-navbar .wp-block-navigation-item, .aquasummit-navbar .wp-block-navigation-item__content { color: #ffffff !important; transition: color 0.3s ease; } .aquasummit-navbar.is-scrolled a, .aquasummit-navbar.is-scrolled .wp-block-navigation-item, .aquasummit-navbar.is-scrolled .wp-block-navigation-item__content { color: var(--wp--preset--color--foreground) !important; } /* Logo blanco visible por defecto (navbar transparente sobre el Hero), logo a color visible solo cuando el navbar se vuelve sólido. */ .aquasummit-logo-wrap { position: relative; } .aquasummit-logo--color { display: none; } .aquasummit-navbar.is-scrolled .aquasummit-logo--white { display: none; } .aquasummit-navbar.is-scrolled .aquasummit-logo--color { display: block; } /* ─────────────────────────────────────────── COUNTDOWN — el CSS de este componente vive en el plugin AquaSummit Core (aquasummit-core/blocks/countdown/style.css), no aquí. Esto es intencional: el bloque de countdown pertenece al plugin (capa de datos + funcionalidad), así que su estilo viaja junto con él. Si algún día desactivas este theme y usas otro, el countdown se seguirá viendo bien porque su CSS no depende de este archivo. Si necesitas ajustar la apariencia del countdown, edita: aquasummit-core/blocks/countdown/style.css ─────────────────────────────────────────── */ /* ─────────────────────────────────────────── TARJETA "MÁS ELEGIDO" — paquete destacado ─────────────────────────────────────────── */ .aquasummit-paquete-destacado { border: 2px solid var(--wp--preset--color--primary) !important; box-shadow: 0 20px 50px -15px rgba(35, 45, 143, 0.25); position: relative; } .aquasummit-badge-destacado { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-foreground); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.8rem; padding: 0.35rem 1rem; border-radius: 999px; white-space: nowrap; } /* ─────────────────────────────────────────── TARJETA SPEAKER ─────────────────────────────────────────── */ .aquasummit-speaker-card { text-align: center; } .aquasummit-speaker-card img { border-radius: 999px; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 1rem; } /* ─────────────────────────────────────────── FIX GLOBAL — WordPress agrega automáticamente "margin-top" (del espaciado blockGap) a TODAS las columnas de una fila EXCEPTO la primera. Esto rompe la alineación vertical cada vez que las columnas tienen distinta altura de contenido (ej: "Visión" con texto corto vs "Negocios" con texto largo, o "500+" vs "2" en las cifras del Hero). Confirmado midiendo el sitio real con getBoundingClientRect(): la 1ª columna siempre tenía margin-top: 0, las demás margin-top: 24px — esa diferencia de 24px es la causa de CUALQUIER desalineamiento entre columnas en este sitio. Esta regla se aplica a TODAS las filas de columnas del sitio (no solo a una sección en particular), así que corrige este bug donde aparezca, no solo donde ya lo notamos. ─────────────────────────────────────────── */ .wp-block-columns > .wp-block-column { margin-top: 0 !important; } /* ─────────────────────────────────────────── CIFRAS — fila de números (líderes, conferencistas, países, días). Fuerza misma altura/alineación vertical en las 4 columnas, sin importar cuánto varíe el largo del número (ej: "500+" vs "2"). ─────────────────────────────────────────── */ .aquasummit-cifras .wp-block-columns { align-items: flex-start; } .aquasummit-cifras .wp-block-column { display: flex; flex-direction: column; align-items: center; } /* El número grande (500+, 20+, 10+, 2): altura de línea fija y sin márgenes, para que los 4 queden exactamente a la misma altura sin importar cuántos caracteres tenga cada uno. line-height necesita !important porque theme.json define line-height: 1.6 globalmente con más prioridad. */ .aquasummit-cifras .wp-block-column > p:first-child { margin: 0 0 0.5rem 0 !important; line-height: 48px !important; } /* La etiqueta de abajo (líderes del sector, etc.) también sin margen extra, para que no se acumule espacio distinto entre columnas. */ .aquasummit-cifras .wp-block-column > p:last-child { margin: 0 !important; } /* ─────────────────────────────────────────── PÍLDORAS DE ALIADOS — fila de nombres con borde redondeado (Piscina Barcelona, Fira Barcelona, Camacol Valle, AIA Latam, CEPAL). Valores medidos directamente del sitio de referencia: borde 1px color --border, texto en color --secondary, padding 6px 16px. ─────────────────────────────────────────── */ .aquasummit-aliados-pildoras { gap: 1.5rem; } .aquasummit-pildora { margin: 0; font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif); font-weight: 600; font-size: 0.875rem; color: var(--wp--preset--color--secondary, #232d8f); border: 1px solid var(--wp--preset--color--border, #dfe5eb); border-radius: 999px; padding: 6px 16px; } /* ─────────────────────────────────────────── AGENDA (resumen en el Home) — badge "Día 1/2" tipo píldora dorada sobre azul marino, y lista con marca de verificación verde antes de cada ítem (replica el ícono check del sitio real). ─────────────────────────────────────────── */ .aquasummit-badge-dia { display: inline-block; background-color: var(--wp--preset--color--secondary, #232d8f); color: var(--wp--preset--color--primary, #fde836); font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif); font-weight: 600; letter-spacing: 0.03em; padding: 0.3rem 0.9rem; border-radius: 999px; margin: 0 0 1rem 0 !important; } .aquasummit-agenda-resumen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .aquasummit-agenda-resumen li { position: relative; padding-left: 1.75rem; font-size: 0.9375rem; color: var(--wp--preset--color--foreground, #232d8f); opacity: 0.9; } .aquasummit-agenda-resumen li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #4b887b; font-weight: 700; } /* ─────────────────────────────────────────── TABLA DE BENEFICIOS (página Patrocinadores) ─────────────────────────────────────────── */ .aquasummit-tabla-beneficios { width: 100%; border-collapse: collapse; background-color: var(--wp--preset--color--card, #ffffff); border-radius: 1rem; overflow: hidden; font-size: 0.9375rem; } .aquasummit-tabla-beneficios thead tr { background-color: var(--wp--preset--color--secondary, #232d8f); } .aquasummit-tabla-beneficios th { color: #ffffff; font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif); font-weight: 600; padding: 1rem; text-align: center; } .aquasummit-tabla-beneficios__th-label { text-align: left !important; } .aquasummit-tabla-beneficios td { padding: 0.875rem 1rem; text-align: center; color: var(--wp--preset--color--foreground, #232d8f); } .aquasummit-tabla-beneficios__td-label { text-align: left; font-weight: 600; } .aquasummit-tabla-beneficios__fila-alterna { background-color: var(--wp--preset--color--muted, #f0f6fc); } .aquasummit-tabla-beneficios .aquasummit-check { color: #4b887b; font-weight: 700; font-size: 1.1rem; } .aquasummit-tabla-beneficios .aquasummit-no { color: var(--wp--preset--color--muted-foreground, #48566c); opacity: 0.5; } /* ─────────────────────────────────────────── SCROLL OFFSET — anclas internas del Home ───────────────────────────────────────── Problema: el navbar tiene position:fixed con ~72px de alto. Cuando el browser navega a una ancla (ej: /#evento), posiciona el borde superior del div exactamente en top:0 del viewport — es decir, queda TAPADO por el navbar. Solución: scroll-margin-top es la propiedad CSS estándar para este caso exacto. Le dice al browser "cuando hagas scroll hacia este elemento, déjame ese margen visible por encima antes de detener el scroll". No afecta al layout, no mueve el div, no cambia su posición en la página — solo ajusta el punto de parada del scroll. Valor: 72px (altura real del navbar) + 24px de respiro visual = 96px total. Si en el futuro cambias la altura del navbar, actualiza este valor. La misma regla se aplica a TODOS los ids de ancla del Home (evento, speakers, agenda, inscripcion, sede, patrocinadores, faq) para que el menú funcione consistentemente en todas las secciones. ─────────────────────────────────────────── */ #evento, #speakers, #agenda, #inscripcion, #sede, #patrocinadores, #faq { scroll-margin-top: 96px; } /* ─────────────────────────────────────────── BOTÓN "WHATSAPP COMERCIAL" — hover verde (página Patrocinadores y cualquier otro lugar donde aparezca el botón outline-white con enlace a wa.me) El color #075e54 es el verde oscuro oficial de WhatsApp. ─────────────────────────────────────────── */ .is-style-outline-white .wp-block-button__link[href*="wa.me"]:hover { background-color: #075e54 !important; border-color: #075e54 !important; color: #ffffff !important; } /* ─────────────────────────────────────────── FOOTER — ajustes visuales Títulos blancos, lista sin bullets, iconos de redes sociales circulares tipo Lovable. ─────────────────────────────────────────── */ /* Lista de navegación del footer sin bullets ni padding */ .aquasummit-footer-nav { list-style: none !important; padding-left: 0 !important; margin: 0 !important; } .aquasummit-footer-nav li { margin-bottom: 0.35rem; } .aquasummit-footer-nav a { color: rgba(255, 255, 255, 0.75) !important; text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease; } .aquasummit-footer-nav a:hover { color: #ffffff !important; } /* Iconos de redes sociales — fila de círculos con borde */ .aquasummit-footer-social { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .aquasummit-footer-social__link { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); color: #ffffff; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease; } .aquasummit-footer-social__link:hover { background-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.7); color: #ffffff; } /* Logo en footer */ .aquasummit-footer-logo { margin-bottom: 0.75rem; } /* Eliminar el bloque wp:social-links del footer anterior que generaba el SVG gigante negro — por si queda residual en alguna versión cacheada de WordPress */ footer .wp-block-social-links { display: none !important; } /* ─────────────────────────────────────────── ACCESIBILIDAD — respeta "reducir movimiento" ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .wp-block-button__link, .aquasummit-navbar { transition: none !important; } }