/* site.css — reemplazo local del framework de GoDaddy Website Builder. Cubre: drawer móvil, accordion del FAQ, iframes de widgets HTML, banner/secciones en navy y la cabecera (logo + nav en una fila). Los formularios y el chat se retiraron del sitio: su CSS ya no está. */ /* Los widgets muertos del builder (popup, chat de GoDaddy, cookie banner), el branding "Powered by GoDaddy Airo" y el item "More" del nav ya no se ocultan por CSS: se han borrado del HTML. */ /* Los li del nav nacen visibility:hidden (.c1-5i/.c1-4r); el script del builder los revelaba tras medir el overflow. Caben los 5, así que se muestran fijos. */ nav li.nav-item { visibility: visible !important; } /* Drawer de navegación móvil (toggle en site.js) */ [data-ux="NavigationDrawer"] { display: none; } [data-ux="NavigationDrawer"].drawer-open { display: block !important; visibility: visible !important; /* el drawer también nace visibility:hidden */ /* el builder lo deja off-canvas (left negativo / translate): forzar todo */ position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; max-width: none !important; transform: none !important; z-index: 99990; background: #0e2444; /* zona oscura -> navy (texto claro) */ overflow: auto; padding: 24px; } [data-ux="NavigationDrawer"] [data-close="true"] { cursor: pointer; } a[data-aid="HAMBURGER_MENU_LINK"] { cursor: pointer; } /* Accordion del FAQ (las reglas [aria-expanded] originales siguen en el HTML) */ .accordion-question { cursor: pointer; } .accordion-answer { display: none; } [aria-expanded="true"] ~ .accordion-answer { display: block !important; } /* Iframes de widgets HTML (planes, extended coverage) — altura via site.js */ iframe[srcdoc] { width: 100%; border: 0; display: block; } /* ---------- Promo banner: fondo navy + letras doradas ---------- El fondo del banner sale de la clase atómica .c1-p, que es la MISMA que usan los botones dorados (compartida 11 veces). Por eso NO se toca .c1-p: se sobreescribe solo el banner por su atributo semántico. Doble atributo = especificidad (0,2,0) para ganarle al .c1-1e{color:#000 !important} del texto. */ [data-aid="BANNER_RENDERED"][data-ux="PromoBanner"] { background-color: #0e2444 !important; } [data-aid="BANNER_TEXT_RENDERED"][data-ux="PromoBannerText"] { color: #e8b44e !important; } /* ---------- Secciones forzadas a navy (por ID) ---------- Estas 3 secciones tenían fondo dorado vía las clases atómicas .c1-p / .c1-8d, que son COMPARTIDAS con botones y banner (no se pueden tocar). Se sobreescribe solo cada sección por su id, y se ajusta el contraste de su contenido. */ [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"], [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="Section"], [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="Widget"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="Section"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="Widget"], [id="78982fe7-9076-4e70-93dd-366e89a309f1"], [id="78982fe7-9076-4e70-93dd-366e89a309f1"] [data-ux="Section"], [id="78982fe7-9076-4e70-93dd-366e89a309f1"] [data-ux="Widget"] { background-color: #0e2444 !important; } /* #f1cbc275 (About): texto blanco por defecto; títulos y sus spans internos en dorado (el titular vive en un dentro del

). */ [id="f1cbc275-357a-4932-860d-61c1a7fc109f"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] * { color: #f5f5f5 !important; } [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h1, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h1 *, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h2, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h2 *, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h3, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h3 *, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h4, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h4 * { color: #e8b44e !important; } /* Botones navy dentro de secciones navy -> dorado con texto navy (contraste). Cubre los 2 botones de #245f4c52 y el ButtonSecondary "Contact US" del About. (#78982fe7 tiene botones blancos que ya contrastan sobre navy: se dejan.) */ [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonPrimary"], [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonSecondary"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonPrimary"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonSecondary"] { background-color: #e8b44e !important; } [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonPrimary"], [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonPrimary"] *, [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonSecondary"], [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonSecondary"] *, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonPrimary"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonPrimary"] *, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonSecondary"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonSecondary"] * { color: #0e2444 !important; } [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonPrimary"]:hover, [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonSecondary"]:hover, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonPrimary"]:hover, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonSecondary"]:hover { background-color: #d39a2e !important; } /* ---------- Header: logo a la izquierda, en la MISMA fila que el menú ---------- Pedido por Doug: el logo estaba en su propia franja encima del menú, lo que empujaba el hero hacia abajo y tapaba el banner marquesina en la portada. Ahora: una sola fila -> logo pegado a la izquierda, enlaces a la derecha. Todo dentro de @media >=768px para NO tocar el layout móvil (logo + hamburger originales). Por CSS sobre hooks estables (data-stickynav / data-aid); no se toca el HTML anidado ni el JS del drawer. */ @media (min-width: 768px) { /* el contenedor flex del header (el que contiene a la vez logo y nav) */ [data-stickynav="true"] *:has([data-aid="HEADER_LOGO_RENDERED"]):has([data-aid="HEADER_NAV_RENDERED"]) { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; column-gap: 16px !important; row-gap: 0 !important; } /* Liberar TODOS los envoltorios del logo. GoDaddy fija un
cuadrado dentro del enlace; antes quedaba disimulado por un min-width en la imagen. Hay que soltar el subárbol entero, no sólo los hijos directos. */ [data-aid="HEADER_LOGO_RENDERED"], [data-aid="HEADER_LOGO_RENDERED"] *, [data-aid="HEADER_LOGO_OVERHANG_CONTAINER"], [data-aid="HEADER_LOGO_OVERHANG_CONTAINER"] * { width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important; overflow: visible !important; } /* logo a la izquierda, sin encogerse cuando el menú aprieta */ [data-aid="HEADER_LOGO_RENDERED"] { margin: 0 auto 0 0 !important; flex: 0 0 auto !important; } /* Después de la regla de arriba (misma especificidad, gana la posterior). OJO: con width:auto el navegador NO aplica la proporción intrínseca aquí (el envoltorio de GoDaddy la rompe) y la imagen sale cuadrada. Por eso el ancho va explícito, calculado de sitelogo.png: 495x336 -> 1.473:1, y a 84px de alto son 124px. Si se cambia el logo, recalcular ambos valores. */ [data-aid="HEADER_LOGO_IMAGE_RENDERED"] { height: 84px !important; width: 124px !important; max-width: 124px !important; object-fit: contain !important; } /* enlaces del menú: una sola fila a la derecha, sin envolver */ [data-aid="HEADER_NAV_RENDERED"] { flex: 0 1 auto !important; } [data-aid="HEADER_NAV_RENDERED"] > ul { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-end !important; white-space: nowrap !important; } [data-aid="HEADER_NAV_RENDERED"] > ul > li { white-space: nowrap !important; } /* compactar el espaciado de cada enlace para que las 5 quepan a anchos menores */ [data-aid="HEADER_NAV_RENDERED"] a { padding-left: 10px !important; padding-right: 10px !important; letter-spacing: 0.3px !important; } }