/* ========================================================== A TRAVÉS DE LAS ESCRITURAS CSS GENERAL LIMPIO ========================================================== */ /* ========================================================== 1. COLORES GENERALES ========================================================== */ :root { --ates-navy: #071f3d; --ates-navy-soft: #0a3150; --ates-gold: #b47720; --ates-gold-light: #d4a14c; --ates-gold-soft: #c58a32; --ates-parchment: rgba(246, 239, 224, .30); } /* ========================================================== 2. BOTÓN DE VÍDEO — EFECTO PULSE ========================================================== */ .ct-pulse { border-radius: 50%; animation: pulse 2s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); } 80% { box-shadow: 0 0 0 30px rgba(255, 255, 255, 0); } } /* ========================================================== 3. IMAGEN DE FONDO DE LA CABECERA ========================================================== */ #header > [data-device] { background-image: linear-gradient( rgba(255, 255, 255, .55), rgba(255, 255, 255, .75) ), url("https://atravesdelasescrituras.com/wp-content/uploads/2026/08/ChatGPT-Image-30-ago-2026-11_00_38.png"); background-position: center; background-size: cover; background-repeat: no-repeat; } #header [data-row] { background-color: transparent !important; background-image: none !important; } /* ========================================================== 4. METADATOS EN ESPAÑOL ========================================================== */ .entry-meta .meta-author > span:first-of-type, .entry-meta .meta-date > span:first-of-type, .entry-meta .meta-categories > span:first-of-type { font-size: 0 !important; } .entry-meta .meta-author > span:first-of-type::after { content: "POR "; font-size: 12px; } .entry-meta .meta-date > span:first-of-type::after { content: "EL "; font-size: 12px; } .entry-meta .meta-categories > span:first-of-type::after { content: "EN "; font-size: 12px; } /* ========================================================== 5. BARRA LATERAL ========================================================== */ .ct-sidebar, .ct-sidebar-inner, aside.ct-sidebar, [data-sidebar], [data-sidebar] .ct-sidebar, [data-sidebar] .ct-sidebar-inner, .ct-sidebar .ct-widget, .ct-sidebar .widget, .ct-sidebar section.widget, .ct-sidebar .widget_block, .ct-sidebar .wp-block-group, .ct-sidebar .wp-block-group__inner-container, .ct-sidebar .wp-block-widget-group { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } [data-sidebar] { --theme-background-color: transparent !important; } /* Centrado general */ .ct-sidebar .ct-widget, .ct-sidebar .widget, .ct-sidebar .widget_block { text-align: center; } .ct-sidebar .widget-title { text-align: center; } .ct-sidebar img { display: block; margin-left: auto; margin-right: auto; } .ct-sidebar ul { padding-left: 0; margin-left: auto; margin-right: auto; } /* Widgets personalizados */ .ct-sidebar #vd365-widget, .ct-sidebar #parasha-widget, .ct-sidebar #moadim-widget, .ct-sidebar #calendario-widget, .ct-sidebar #gravatar-widget, .ct-sidebar #facebook-site-widget, .ct-sidebar #sitios-interes-widget, .ct-sidebar .youtube-widget, .ct-sidebar .ates-theme-box, .ct-sidebar .ate-buscador { display: block !important; width: 100% !important; max-width: 320px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Controles internos */ .ct-sidebar .ate-buscador input, .ct-sidebar .ate-buscador button, .ct-sidebar .ates-theme-box button { margin-left: 0 !important; margin-right: 0 !important; } /* Formularios */ .ct-sidebar input[type="text"], .ct-sidebar input[type="search"], .ct-sidebar input[type="email"], .ct-sidebar textarea, .ct-sidebar select { background-color: rgba(255, 255, 255, .90) !important; } /* Google Translate */ .ct-sidebar .goog-te-gadget, .ct-sidebar .goog-te-gadget-simple, .ct-sidebar .google-translate-element { background: transparent !important; background-color: transparent !important; } /* ========================================================== 6. MENÚ PRINCIPAL SOLO ESCRITORIO ========================================================== */ @media (min-width: 1025px) { /* ------------------------------------------------------ CABECERA A TODO EL ANCHO ------------------------------------------------------ */ header [data-row="bottom"] .ct-container, header [data-row="middle"] .ct-container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* ------------------------------------------------------ CONTENEDOR DEL MENÚ ------------------------------------------------------ */ [data-id="menu"] { position: relative !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; padding: 3px 20px !important; margin: 0 !important; overflow: visible !important; z-index: 100 !important; /* Textura pergamino */ background-color: var(--ates-parchment) !important; background-image: repeating-linear-gradient( 93deg, rgba(110, 74, 23, .025) 0, rgba(110, 74, 23, .025) 1px, transparent 1px, transparent 8px ), repeating-linear-gradient( 4deg, rgba(255, 255, 255, .035) 0, rgba(255, 255, 255, .035) 1px, transparent 1px, transparent 10px ), radial-gradient( ellipse at center, rgba(255, 255, 255, .25), rgba(255, 249, 234, .12) 55%, rgba(172, 126, 48, .05) ), linear-gradient( 180deg, rgba(255, 252, 242, .46), rgba(238, 224, 198, .28) ) !important; /* Bordes dorados */ border: none !important; border-top: 1px solid rgba(203, 159, 73, .28) !important; border-bottom: 1px solid rgba(174, 119, 27, .44) !important; border-radius: 0 !important; /* Sombra */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .46), inset 0 -1px 0 rgba(112, 73, 17, .07), 0 3px 12px rgba(59, 40, 13, .07) !important; } /* ------------------------------------------------------ LISTA PRINCIPAL ------------------------------------------------------ */ [data-id="menu"] > ul { display: flex !important; align-items: center !important; justify-content: space-evenly !important; width: 100% !important; gap: 0 !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; } /* ------------------------------------------------------ ELEMENTOS ------------------------------------------------------ */ [data-id="menu"] > ul > li { position: relative !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------ SEPARADORES VERTICALES DORADOS ------------------------------------------------------ */ [data-id="menu"] > ul > li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 25px; transform: translateY(-50%); background: linear-gradient( to bottom, transparent, rgba(180, 119, 32, .18) 20%, rgba(198, 147, 55, .58) 50%, rgba(180, 119, 32, .18) 80%, transparent ); pointer-events: none; } /* ------------------------------------------------------ ENLACES PRINCIPALES ------------------------------------------------------ */ [data-id="menu"] > ul > li > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 52px !important; padding: 0 17px !important; color: var(--ates-navy) !important; background: transparent !important; border: none !important; border-radius: 0 !important; font-family: inherit !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: .25px !important; white-space: nowrap !important; text-shadow: 0 1px 1px rgba(255, 255, 255, .55); box-shadow: none !important; transition: color .22s ease, background .22s ease, transform .22s ease !important; } /* ------------------------------------------------------ HOVER ------------------------------------------------------ */ [data-id="menu"] > ul > li > a:hover { color: var(--ates-gold) !important; background: radial-gradient( ellipse at center bottom, rgba(219, 174, 87, .15), transparent 72% ) !important; transform: translateY(-1px); } /* ------------------------------------------------------ ELEMENTO ACTIVO ------------------------------------------------------ */ [data-id="menu"] > ul > li.current-menu-item > a, [data-id="menu"] > ul > li.current_page_item > a, [data-id="menu"] > ul > li.current-menu-ancestor > a { color: var(--ates-gold) !important; background: radial-gradient( ellipse at center bottom, rgba(222, 177, 88, .12), transparent 72% ) !important; } /* ------------------------------------------------------ LÍNEA DORADA DEL ELEMENTO ACTIVO ------------------------------------------------------ */ [data-id="menu"] > ul > li.current-menu-item > a::after, [data-id="menu"] > ul > li.current_page_item > a::after, [data-id="menu"] > ul > li.current-menu-ancestor > a::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 76%; height: 2px; transform: translateX(-50%); border-radius: 20px; background: linear-gradient( 90deg, transparent, #b87a18 22%, #dfb256 40%, #f0d58c 50%, #dfb256 60%, #b87a18 78%, transparent ); box-shadow: 0 0 5px rgba(219, 174, 83, .16); } /* ------------------------------------------------------ PEQUEÑO ROMBO DEL ELEMENTO ACTIVO ------------------------------------------------------ */ [data-id="menu"] > ul > li.current-menu-item > a::before, [data-id="menu"] > ul > li.current_page_item > a::before, [data-id="menu"] > ul > li.current-menu-ancestor > a::before { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; transform: translateX(-50%) rotate(45deg); background: linear-gradient( 135deg, #f0d27d, #b97813 ); border: 1px solid rgba(255, 248, 218, .88); box-shadow: 0 1px 4px rgba(101, 63, 7, .20); } /* ====================================================== MENÚ "MÁS" ====================================================== */ [data-id="menu"] .menu-mas-automatico { position: relative !important; overflow: visible !important; } [data-id="menu"] .menu-mas-automatico > .menu-mas-enlace { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; color: var(--ates-navy) !important; font-weight: 700 !important; cursor: default !important; } /* Flecha */ [data-id="menu"] .flecha-mas { display: inline-block !important; position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: var(--ates-navy) !important; background: none !important; font-size: 11px !important; line-height: 1 !important; transition: transform .22s ease, color .22s ease !important; } /* ------------------------------------------------------ SUBMENÚ DE "MÁS" ------------------------------------------------------ */ [data-id="menu"] .menu-mas-automatico > .submenu-mas-automatico { display: block !important; position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; width: max-content !important; min-width: 250px !important; max-width: 330px !important; margin: 0 !important; padding: 8px !important; list-style: none !important; background: linear-gradient( 180deg, rgba(255, 252, 244, .98), rgba(246, 237, 218, .98) ) !important; border: 1px solid rgba(181, 119, 32, .40) !important; border-top: 2px solid var(--ates-gold-soft) !important; border-radius: 0 0 10px 10px !important; box-shadow: 0 12px 28px rgba(20, 32, 44, .18) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(5px) !important; transition: opacity .20s ease, visibility .20s ease, transform .20s ease !important; z-index: 999999 !important; } /* Abrir Más */ [data-id="menu"] .menu-mas-automatico:hover > .submenu-mas-automatico { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } [data-id="menu"] .menu-mas-automatico:hover > .menu-mas-enlace, [data-id="menu"] .menu-mas-automatico:hover .flecha-mas { color: var(--ates-gold) !important; } [data-id="menu"] .menu-mas-automatico:hover .flecha-mas { transform: rotate(180deg) !important; } /* ------------------------------------------------------ ELEMENTOS DEL SUBMENÚ ------------------------------------------------------ */ [data-id="menu"] .submenu-mas-automatico > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } [data-id="menu"] .submenu-mas-automatico > li > a { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 10px 14px !important; color: var(--ates-navy) !important; background: transparent !important; font-weight: 600 !important; text-align: left !important; white-space: nowrap !important; border-radius: 6px !important; text-shadow: none !important; transition: color .18s ease, background .18s ease, padding-left .18s ease !important; } [data-id="menu"] .submenu-mas-automatico > li > a:hover { color: #95600b !important; background: rgba(190, 139, 58, .10) !important; padding-left: 18px !important; } /* ------------------------------------------------------ ICONOS BLOCKSY ------------------------------------------------------ */ [data-id="menu"] svg { color: var(--ates-navy) !important; fill: currentColor !important; transition: color .22s ease, transform .22s ease !important; } [data-id="menu"] li:hover > a svg { color: var(--ates-gold) !important; } } /* ========================================================== 7. ORNAMENTO DESACTIVADO Evita que aparezca aunque todavía exista su HTML ========================================================== */ .ates-separador-cabecera { display: none !important; } /* ========================================================== DISEÑO DE CITAS ========================================================== */ .entry-content blockquote, .wp-block-quote { position: relative !important; margin: 32px 0 !important; padding: 28px 32px 24px 42px !important; background: linear-gradient( 135deg, #fffdf8 0%, #fbf7ed 55%, #f6ecd7 100% ) !important; border: 1px solid rgba(180, 119, 32, .32) !important; border-left: 5px solid #b47720 !important; border-radius: 4px 10px 10px 4px !important; box-shadow: 0 5px 18px rgba(35, 43, 52, .08), inset 0 1px 0 rgba(255,255,255,.85) !important; color: #24384c !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 17px !important; font-style: italic !important; line-height: 1.8 !important; overflow: hidden !important; } /* COMILLA DECORATIVA */ .entry-content blockquote::before, .wp-block-quote::before { content: "“" !important; position: absolute !important; top: -15px !important; left: 10px !important; color: rgba(180, 119, 32, .20) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 90px !important; font-weight: bold !important; font-style: normal !important; line-height: 1 !important; pointer-events: none !important; } /* TEXTO */ .entry-content blockquote p, .wp-block-quote p { position: relative !important; margin-top: 0 !important; margin-bottom: 12px !important; color: #24384c !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 17px !important; font-style: italic !important; line-height: 1.8 !important; z-index: 2 !important; } /* REFERENCIA O AUTOR */ .entry-content blockquote cite, .wp-block-quote cite, .wp-block-quote__citation { display: block !important; margin-top: 16px !important; color: #174a78 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 600 !important; text-align: right !important; } /* RAYA DORADA ANTES DE LA REFERENCIA */ .entry-content blockquote cite::before, .wp-block-quote cite::before, .wp-block-quote__citation::before { content: "— " !important; color: #b47720 !important; } /* ENLACES */ .entry-content blockquote a, .wp-block-quote a { color: #174a78 !important; text-decoration-color: rgba(180,119,32,.55) !important; text-underline-offset: 3px !important; } .entry-content blockquote a:hover, .wp-block-quote a:hover { color: #b47720 !important; } /* ========================================================== MODO OSCURO ========================================================== */ html.ates-dark .entry-content blockquote, html.ates-dark .wp-block-quote { background: linear-gradient( 135deg, #12273b, #0c1f31 ) !important; border-color: rgba(201,169,106,.35) !important; border-left-color: #c9a96a !important; color: #edf1f4 !important; } html.ates-dark .entry-content blockquote p, html.ates-dark .wp-block-quote p { color: #edf1f4 !important; } html.ates-dark .entry-content blockquote::before, html.ates-dark .wp-block-quote::before { color: rgba(201,169,106,.20) !important; } html.ates-dark .entry-content blockquote cite, html.ates-dark .wp-block-quote cite, html.ates-dark .wp-block-quote__citation { color: #c9d9e7 !important; } /* ========================================================== MÓVIL ========================================================== */ @media (max-width: 600px) { .entry-content blockquote, .wp-block-quote { margin: 24px 0 !important; padding: 23px 20px 20px 29px !important; font-size: 16px !important; line-height: 1.7 !important; } .entry-content blockquote p, .wp-block-quote p { font-size: 16px !important; line-height: 1.7 !important; } .entry-content blockquote::before, .wp-block-quote::before { top: -10px !important; left: 7px !important; font-size: 68px !important; } .entry-content blockquote cite, .wp-block-quote cite, .wp-block-quote__citation { font-size: 13px !important; } }/* ========================================================== A TRAVÉS DE LAS ESCRITURAS CSS GENERAL COMPLETO ========================================================== */ /* ========================================================== 1. COLORES GENERALES ========================================================== */ :root { --ates-navy: #071f3d; --ates-navy-soft: #0a3150; --ates-gold: #b47720; --ates-gold-light: #d4a14c; --ates-gold-soft: #c58a32; --ates-parchment: rgba(246, 239, 224, .30); } /* ========================================================== 2. BOTÓN DE VÍDEO — EFECTO PULSE ========================================================== */ .ct-pulse { border-radius: 50%; animation: pulse 2s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); } 80% { box-shadow: 0 0 0 30px rgba(255, 255, 255, 0); } } /* ========================================================== 3. IMAGEN DE FONDO DE LA CABECERA ========================================================== */ #header > [data-device] { background-image: linear-gradient( rgba(255, 255, 255, .55), rgba(255, 255, 255, .75) ), url("https://atravesdelasescrituras.com/wp-content/uploads/2026/08/ChatGPT-Image-30-ago-2026-11_00_38.png"); background-position: center; background-size: cover; background-repeat: no-repeat; } #header [data-row] { background-color: transparent !important; background-image: none !important; } /* ========================================================== 4. METADATOS EN ESPAÑOL ========================================================== */ .entry-meta .meta-author > span:first-of-type, .entry-meta .meta-date > span:first-of-type, .entry-meta .meta-categories > span:first-of-type { font-size: 0 !important; } .entry-meta .meta-author > span:first-of-type::after { content: "POR "; font-size: 12px; } .entry-meta .meta-date > span:first-of-type::after { content: "EL "; font-size: 12px; } .entry-meta .meta-categories > span:first-of-type::after { content: "EN "; font-size: 12px; } /* ========================================================== 5. BARRA LATERAL ========================================================== */ .ct-sidebar, .ct-sidebar-inner, aside.ct-sidebar, [data-sidebar], [data-sidebar] .ct-sidebar, [data-sidebar] .ct-sidebar-inner, .ct-sidebar .ct-widget, .ct-sidebar .widget, .ct-sidebar section.widget, .ct-sidebar .widget_block, .ct-sidebar .wp-block-group, .ct-sidebar .wp-block-group__inner-container, .ct-sidebar .wp-block-widget-group { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } [data-sidebar] { --theme-background-color: transparent !important; } .ct-sidebar .ct-widget, .ct-sidebar .widget, .ct-sidebar .widget_block { text-align: center; } .ct-sidebar .widget-title { text-align: center; } .ct-sidebar img { display: block; margin-left: auto; margin-right: auto; } .ct-sidebar ul { padding-left: 0; margin-left: auto; margin-right: auto; } .ct-sidebar #vd365-widget, .ct-sidebar #parasha-widget, .ct-sidebar #moadim-widget, .ct-sidebar #calendario-widget, .ct-sidebar #gravatar-widget, .ct-sidebar #facebook-site-widget, .ct-sidebar #sitios-interes-widget, .ct-sidebar .youtube-widget, .ct-sidebar .ates-theme-box, .ct-sidebar .ate-buscador { display: block !important; width: 100% !important; max-width: 320px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } .ct-sidebar .ate-buscador input, .ct-sidebar .ate-buscador button, .ct-sidebar .ates-theme-box button { margin-left: 0 !important; margin-right: 0 !important; } .ct-sidebar input[type="text"], .ct-sidebar input[type="search"], .ct-sidebar input[type="email"], .ct-sidebar textarea, .ct-sidebar select { background-color: rgba(255, 255, 255, .90) !important; } .ct-sidebar .goog-te-gadget, .ct-sidebar .goog-te-gadget-simple, .ct-sidebar .google-translate-element { background: transparent !important; background-color: transparent !important; } /* ========================================================== 6. MENÚ PRINCIPAL DE ESCRITORIO ========================================================== */ @media (min-width: 1025px) { header [data-row="bottom"] .ct-container, header [data-row="middle"] .ct-container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } [data-id="menu"] { position: relative !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; padding: 3px 20px !important; margin: 0 !important; overflow: visible !important; z-index: 100 !important; background-color: var(--ates-parchment) !important; background-image: repeating-linear-gradient( 93deg, rgba(110, 74, 23, .025) 0, rgba(110, 74, 23, .025) 1px, transparent 1px, transparent 8px ), repeating-linear-gradient( 4deg, rgba(255, 255, 255, .035) 0, rgba(255, 255, 255, .035) 1px, transparent 1px, transparent 10px ), radial-gradient( ellipse at center, rgba(255, 255, 255, .25), rgba(255, 249, 234, .12) 55%, rgba(172, 126, 48, .05) ), linear-gradient( 180deg, rgba(255, 252, 242, .46), rgba(238, 224, 198, .28) ) !important; border: none !important; border-top: 1px solid rgba(203, 159, 73, .28) !important; border-bottom: 1px solid rgba(174, 119, 27, .44) !important; border-radius: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .46), inset 0 -1px 0 rgba(112, 73, 17, .07), 0 3px 12px rgba(59, 40, 13, .07) !important; } [data-id="menu"] > ul { display: flex !important; align-items: center !important; justify-content: space-evenly !important; width: 100% !important; gap: 0 !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; } [data-id="menu"] > ul > li { position: relative !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } [data-id="menu"] > ul > li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 25px; transform: translateY(-50%); background: linear-gradient( to bottom, transparent, rgba(180, 119, 32, .18) 20%, rgba(198, 147, 55, .58) 50%, rgba(180, 119, 32, .18) 80%, transparent ); pointer-events: none; } [data-id="menu"] > ul > li > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 52px !important; padding: 0 17px !important; color: var(--ates-navy) !important; background: transparent !important; border: none !important; border-radius: 0 !important; font-family: inherit !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: .25px !important; white-space: nowrap !important; text-shadow: 0 1px 1px rgba(255, 255, 255, .55); box-shadow: none !important; transition: color .22s ease, background .22s ease, transform .22s ease !important; } [data-id="menu"] > ul > li > a:hover { color: var(--ates-gold) !important; background: radial-gradient( ellipse at center bottom, rgba(219, 174, 87, .15), transparent 72% ) !important; transform: translateY(-1px); } [data-id="menu"] > ul > li.current-menu-item > a, [data-id="menu"] > ul > li.current_page_item > a, [data-id="menu"] > ul > li.current-menu-ancestor > a { color: var(--ates-gold) !important; background: radial-gradient( ellipse at center bottom, rgba(222, 177, 88, .12), transparent 72% ) !important; } [data-id="menu"] > ul > li.current-menu-item > a::after, [data-id="menu"] > ul > li.current_page_item > a::after, [data-id="menu"] > ul > li.current-menu-ancestor > a::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 76%; height: 2px; transform: translateX(-50%); border-radius: 20px; background: linear-gradient( 90deg, transparent, #b87a18 22%, #dfb256 40%, #f0d58c 50%, #dfb256 60%, #b87a18 78%, transparent ); box-shadow: 0 0 5px rgba(219, 174, 83, .16); } [data-id="menu"] > ul > li.current-menu-item > a::before, [data-id="menu"] > ul > li.current_page_item > a::before, [data-id="menu"] > ul > li.current-menu-ancestor > a::before { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; transform: translateX(-50%) rotate(45deg); background: linear-gradient( 135deg, #f0d27d, #b97813 ); border: 1px solid rgba(255, 248, 218, .88); box-shadow: 0 1px 4px rgba(101, 63, 7, .20); } /* ====================================================== MENÚ MÁS ====================================================== */ [data-id="menu"] .menu-mas-automatico { position: relative !important; overflow: visible !important; } [data-id="menu"] .menu-mas-automatico > .menu-mas-enlace { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; color: var(--ates-navy) !important; font-weight: 700 !important; cursor: default !important; } [data-id="menu"] .flecha-mas { display: inline-block !important; position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: var(--ates-navy) !important; background: none !important; font-size: 11px !important; line-height: 1 !important; transition: transform .22s ease, color .22s ease !important; } [data-id="menu"] .menu-mas-automatico > .submenu-mas-automatico { display: block !important; position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; width: max-content !important; min-width: 250px !important; max-width: 330px !important; margin: 0 !important; padding: 8px !important; list-style: none !important; background: linear-gradient( 180deg, rgba(255, 252, 244, .98), rgba(246, 237, 218, .98) ) !important; border: 1px solid rgba(181, 119, 32, .40) !important; border-top: 2px solid var(--ates-gold-soft) !important; border-radius: 0 0 10px 10px !important; box-shadow: 0 12px 28px rgba(20, 32, 44, .18) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(5px) !important; transition: opacity .20s ease, visibility .20s ease, transform .20s ease !important; z-index: 999999 !important; } [data-id="menu"] .menu-mas-automatico:hover > .submenu-mas-automatico { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } [data-id="menu"] .menu-mas-automatico:hover > .menu-mas-enlace, [data-id="menu"] .menu-mas-automatico:hover .flecha-mas { color: var(--ates-gold) !important; } [data-id="menu"] .menu-mas-automatico:hover .flecha-mas { transform: rotate(180deg) !important; } [data-id="menu"] .submenu-mas-automatico > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } [data-id="menu"] .submenu-mas-automatico > li > a { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 10px 14px !important; color: var(--ates-navy) !important; background: transparent !important; font-weight: 600 !important; text-align: left !important; white-space: nowrap !important; border-radius: 6px !important; text-shadow: none !important; transition: color .18s ease, background .18s ease, padding-left .18s ease !important; } [data-id="menu"] .submenu-mas-automatico > li > a:hover { color: #95600b !important; background: rgba(190, 139, 58, .10) !important; padding-left: 18px !important; } [data-id="menu"] svg { color: var(--ates-navy) !important; fill: currentColor !important; transition: color .22s ease, transform .22s ease !important; } [data-id="menu"] li:hover > a svg { color: var(--ates-gold) !important; } } /* ========================================================== 7. ORNAMENTO NEGRO DE CABECERA ========================================================== */ .ates-ornamento-negro { display: flex !important; align-items: center; justify-content: center; width: 380px; max-width: 88%; height: 34px; margin: -4px auto 1px !important; padding: 0 !important; position: relative; z-index: 20; color: #000000; pointer-events: none; box-sizing: border-box; } .ates-ornamento-negro svg { display: block; width: 100%; height: auto; overflow: visible; color: inherit; } .ates-ornamento-negro path, .ates-ornamento-negro polygon, .ates-ornamento-negro ellipse { vector-effect: non-scaling-stroke; } /* Ornamento antiguo */ .ates-separador-cabecera { display: none !important; } /* ========================================================== 8. CITAS ========================================================== */ .entry-content blockquote, .wp-block-quote { position: relative !important; margin: 32px 0 !important; padding: 28px 32px 24px 42px !important; background: linear-gradient( 135deg, #fffdf8 0%, #fbf7ed 55%, #f6ecd7 100% ) !important; border: 1px solid rgba(180, 119, 32, .32) !important; border-left: 5px solid #b47720 !important; border-radius: 4px 10px 10px 4px !important; box-shadow: 0 5px 18px rgba(35, 43, 52, .08), inset 0 1px 0 rgba(255, 255, 255, .85) !important; color: #24384c !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 17px !important; font-style: italic !important; line-height: 1.8 !important; overflow: hidden !important; } .entry-content blockquote::before, .wp-block-quote::before { content: "“" !important; position: absolute !important; top: -15px !important; left: 10px !important; color: rgba(180, 119, 32, .20) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 90px !important; font-weight: bold !important; font-style: normal !important; line-height: 1 !important; pointer-events: none !important; } .entry-content blockquote p, .wp-block-quote p { position: relative !important; margin-top: 0 !important; margin-bottom: 12px !important; color: #24384c !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 17px !important; font-style: italic !important; line-height: 1.8 !important; z-index: 2 !important; } .entry-content blockquote cite, .wp-block-quote cite, .wp-block-quote__citation { display: block !important; margin-top: 16px !important; color: #174a78 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 600 !important; text-align: right !important; } .entry-content blockquote cite::before, .wp-block-quote cite::before, .wp-block-quote__citation::before { content: "— " !important; color: #b47720 !important; } .entry-content blockquote a, .wp-block-quote a { color: #174a78 !important; text-decoration-color: rgba(180, 119, 32, .55) !important; text-underline-offset: 3px !important; } .entry-content blockquote a:hover, .wp-block-quote a:hover { color: #b47720 !important; } /* Modo oscuro */ html.ates-dark .entry-content blockquote, html.ates-dark .wp-block-quote { background: linear-gradient( 135deg, #12273b, #0c1f31 ) !important; border-color: rgba(201, 169, 106, .35) !important; border-left-color: #c9a96a !important; color: #edf1f4 !important; } html.ates-dark .entry-content blockquote p, html.ates-dark .wp-block-quote p { color: #edf1f4 !important; } html.ates-dark .entry-content blockquote::before, html.ates-dark .wp-block-quote::before { color: rgba(201, 169, 106, .20) !important; } html.ates-dark .entry-content blockquote cite, html.ates-dark .wp-block-quote cite, html.ates-dark .wp-block-quote__citation { color: #c9d9e7 !important; } /* ========================================================== 9. MENÚ MÓVIL + IPAD ========================================================== */ @media (max-width: 1024px) { /* Botón hamburguesa */ #header [data-id="trigger"], #header .ct-header-trigger { position: relative; z-index: 1000; } #header [data-id="trigger"] a, #header [data-id="trigger"] button, #header .ct-header-trigger a, #header .ct-header-trigger button { display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; padding: 0 !important; color: #071f3d !important; background: rgba(255, 253, 248, .35) !important; border: 1px solid rgba(180, 119, 32, .30) !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(26, 37, 48, .08) !important; transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease !important; } #header [data-id="trigger"] a:hover, #header [data-id="trigger"] button:hover, #header .ct-header-trigger a:hover, #header .ct-header-trigger button:hover { color: #b47720 !important; background: rgba(255, 250, 239, .58) !important; border-color: rgba(180, 119, 32, .58) !important; transform: scale(1.04); } #header [data-id="trigger"] svg, #header .ct-header-trigger svg { width: 22px !important; height: 22px !important; color: inherit !important; } /* Panel */ .ct-panel, .ct-panel-content { background: linear-gradient( 180deg, rgba(255, 253, 248, .99), rgba(248, 241, 226, .99) ) !important; color: #071f3d !important; } .ct-panel .ct-panel-inner, .ct-panel .ct-panel-content-inner { background: transparent !important; } /* ====================================================== LOGO GRANDE DENTRO DEL MENÚ ====================================================== */ .ates-logo-menu-movil { width: 100%; padding: 14px 20px 16px; text-align: center; box-sizing: border-box; } .ates-logo-menu-enlace { display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; border: none !important; box-shadow: none !important; text-decoration: none !important; } .ates-logo-menu-movil img { display: block; width: auto; height: auto; max-width: 220px; max-height: 135px; margin: 0 auto; object-fit: contain; filter: drop-shadow( 0 2px 3px rgba(20, 30, 40, .10) ); } /* Separador del logo */ .ates-linea-logo-menu { display: flex; align-items: center; justify-content: center; width: 210px; max-width: 78%; margin: 12px auto 0; } .ates-linea-logo-menu span { display: block; flex: 1; height: 1px; background: linear-gradient( 90deg, transparent, rgba(180, 119, 32, .55) ); } .ates-linea-logo-menu span:last-child { background: linear-gradient( 90deg, rgba(180, 119, 32, .55), transparent ); } .ates-linea-logo-menu i { display: block; width: 6px; height: 6px; margin: 0 8px; background: #b47720; border: 1px solid rgba(255, 246, 217, .9); transform: rotate(45deg); box-shadow: 0 1px 3px rgba(87, 54, 8, .18); } /* ====================================================== MENÚ ====================================================== */ .mobile-menu, .ct-panel .mobile-menu, .ct-panel [data-id="mobile-menu"] { background: transparent !important; margin: 0 !important; padding: 4px 18px 18px !important; } .mobile-menu ul, .ct-panel .mobile-menu ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } .mobile-menu > ul > li, .ct-panel .mobile-menu > ul > li { position: relative !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid rgba(180, 119, 32, .18) !important; } .mobile-menu > ul > li:last-child, .ct-panel .mobile-menu > ul > li:last-child { border-bottom: none !important; } .mobile-menu > ul > li > a, .ct-panel .mobile-menu > ul > li > a { position: relative !important; display: flex !important; align-items: center !important; min-height: 50px !important; padding: 11px 14px !important; color: #071f3d !important; background: transparent !important; border: none !important; border-radius: 7px !important; font-family: inherit !important; font-size: 15px !important; font-weight: 650 !important; line-height: 1.35 !important; letter-spacing: .15px !important; text-decoration: none !important; box-shadow: none !important; transition: color .18s ease, background .18s ease, padding-left .18s ease !important; } .mobile-menu > ul > li > a:hover, .mobile-menu > ul > li > a:focus, .ct-panel .mobile-menu > ul > li > a:hover, .ct-panel .mobile-menu > ul > li > a:focus { color: #9b650e !important; background: rgba(180, 119, 32, .08) !important; padding-left: 19px !important; } .mobile-menu > ul > li.current-menu-item > a, .mobile-menu > ul > li.current_page_item > a, .mobile-menu > ul > li.current-menu-ancestor > a, .ct-panel .mobile-menu > ul > li.current-menu-item > a, .ct-panel .mobile-menu > ul > li.current_page_item > a, .ct-panel .mobile-menu > ul > li.current-menu-ancestor > a { color: #b47720 !important; background: linear-gradient( 90deg, rgba(180, 119, 32, .09), rgba(180, 119, 32, .03) ) !important; font-weight: 700 !important; } .mobile-menu > ul > li.current-menu-item > a::before, .mobile-menu > ul > li.current_page_item > a::before, .mobile-menu > ul > li.current-menu-ancestor > a::before, .ct-panel .mobile-menu > ul > li.current-menu-item > a::before, .ct-panel .mobile-menu > ul > li.current_page_item > a::before, .ct-panel .mobile-menu > ul > li.current-menu-ancestor > a::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 27px; transform: translateY(-50%); border-radius: 10px; background: linear-gradient( 180deg, #d7a64c, #9d650d ); } /* Submenús */ .mobile-menu .sub-menu, .ct-panel .mobile-menu .sub-menu { margin: 0 0 6px 0 !important; padding: 3px 0 5px 16px !important; background: transparent !important; border: none !important; } .mobile-menu .sub-menu li, .ct-panel .mobile-menu .sub-menu li { border: none !important; margin: 0 !important; padding: 0 !important; } .mobile-menu .sub-menu a, .ct-panel .mobile-menu .sub-menu a { display: block !important; padding: 9px 12px !important; color: #174a78 !important; background: transparent !important; border-radius: 6px !important; font-family: inherit !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.4 !important; transition: color .18s ease, background .18s ease, padding-left .18s ease !important; } .mobile-menu .sub-menu a:hover, .mobile-menu .sub-menu a:focus, .ct-panel .mobile-menu .sub-menu a:hover, .ct-panel .mobile-menu .sub-menu a:focus { color: #b47720 !important; background: rgba(180, 119, 32, .07) !important; padding-left: 16px !important; } /* Flechas */ .mobile-menu .ct-toggle-dropdown-desktop, .mobile-menu .ct-toggle-dropdown-mobile, .ct-panel .mobile-menu button { color: #071f3d !important; background: transparent !important; border: none !important; box-shadow: none !important; } .mobile-menu button:hover, .ct-panel .mobile-menu button:hover { color: #b47720 !important; background: rgba(180, 119, 32, .08) !important; } /* Botón cerrar */ .ct-panel .ct-toggle-close, .ct-panel .ct-panel-close { color: #071f3d !important; background: rgba(255, 255, 255, .35) !important; border: 1px solid rgba(180, 119, 32, .28) !important; border-radius: 50% !important; } .ct-panel .ct-toggle-close:hover, .ct-panel .ct-panel-close:hover { color: #b47720 !important; border-color: rgba(180, 119, 32, .60) !important; } .menu-mas-automatico { display: none !important; } } /* ========================================================== 10. IPAD / TABLET ========================================================== */ @media (min-width: 601px) and (max-width: 1024px) { .ates-ornamento-negro { width: 285px; max-width: 72%; height: 28px; margin: -3px auto 1px !important; } /* LOGO MÁS GRANDE EN IPAD */ .ates-logo-menu-movil img { max-width: 245px; max-height: 150px; } .mobile-menu, .ct-panel .mobile-menu { padding-left: 26px !important; padding-right: 26px !important; } .mobile-menu > ul > li > a, .ct-panel .mobile-menu > ul > li > a { min-height: 54px !important; padding: 12px 17px !important; font-size: 15.5px !important; } .mobile-menu .sub-menu a, .ct-panel .mobile-menu .sub-menu a { font-size: 14px !important; } } /* ========================================================== 11. MÓVIL ========================================================== */ @media (max-width: 600px) { .ates-ornamento-negro { width: 185px; max-width: 62%; height: 22px; margin: -2px auto 0 !important; } /* LOGO GRANDE EN MÓVIL */ .ates-logo-menu-movil { padding: 10px 15px 13px; } .ates-logo-menu-movil img { max-width: 185px; max-height: 115px; } .ates-linea-logo-menu { width: 175px; margin-top: 10px; } /* Menú */ .mobile-menu, .ct-panel .mobile-menu { padding-left: 12px !important; padding-right: 12px !important; } .mobile-menu > ul > li > a, .ct-panel .mobile-menu > ul > li > a { min-height: 48px !important; padding: 10px 12px !important; font-size: 14.5px !important; } .mobile-menu .sub-menu, .ct-panel .mobile-menu .sub-menu { padding-left: 12px !important; } .mobile-menu .sub-menu a, .ct-panel .mobile-menu .sub-menu a { font-size: 13px !important; } /* Citas */ .entry-content blockquote, .wp-block-quote { margin: 24px 0 !important; padding: 23px 20px 20px 29px !important; font-size: 16px !important; line-height: 1.7 !important; } .entry-content blockquote p, .wp-block-quote p { font-size: 16px !important; line-height: 1.7 !important; } .entry-content blockquote::before, .wp-block-quote::before { top: -10px !important; left: 7px !important; font-size: 68px !important; } .entry-content blockquote cite, .wp-block-quote cite, .wp-block-quote__citation { font-size: 13px !important; } } /* ========================================================== 12. TELÉFONOS PEQUEÑOS ========================================================== */ @media (max-width: 380px) { .ates-ornamento-negro { width: 155px; max-width: 60%; height: 19px; } }/* ========================================================== BUSCADOR MÓVIL — COLOR DEL TEXTO ========================================================== */ /* Texto que escribes */ @media (max-width: 768px) { .ct-search-form input[type="search"], .search-form input[type="search"], [data-id="search"] input, .ct-search-modal input[type="search"] { color: #071f3d !important; -webkit-text-fill-color: #071f3d !important; } /* Texto de ejemplo: "Buscar..." */ .ct-search-form input::placeholder, .search-form input::placeholder, [data-id="search"] input::placeholder, .ct-search-modal input::placeholder { color: #6d7882 !important; opacity: 1 !important; } }/* ========================================================== BUSCADOR MÓVIL TEXTO + RESULTADOS DE BÚSQUEDA ========================================================== */ @media (max-width: 768px) { /* Texto que escribes en el buscador */ .ct-search-form input[type="search"], .search-form input[type="search"], [data-id="search"] input, .ct-search-modal input[type="search"] { color: #071f3d !important; -webkit-text-fill-color: #071f3d !important; } /* Texto "Buscar..." */ .ct-search-form input::placeholder, .search-form input::placeholder, [data-id="search"] input::placeholder, .ct-search-modal input::placeholder { color: #667788 !important; -webkit-text-fill-color: #667788 !important; opacity: 1 !important; } /* Resultados de búsqueda */ .ct-search-results, .ct-search-results a, .ct-search-results .entry-title, .ct-search-results .ct-search-item, .ct-search-results span { color: #071f3d !important; } /* Títulos de los resultados */ .ct-search-results a { color: #0a3150 !important; text-decoration: none !important; } /* Al tocar/pasar sobre un resultado */ .ct-search-results a:hover { color: #b47720 !important; } /* Texto secundario de los resultados */ .ct-search-results p, .ct-search-results .entry-meta { color: #667788 !important; } } /* ========================================================= REDES SOCIALES - MEDALLONES EDITORIALES ========================================================= */ header a:has(svg), header a:has(i) { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 4px; padding: 0 !important; border-radius: 50% !important; background: rgba(250, 247, 239, 0.82) !important; border: 1px solid rgba(170, 129, 66, 0.5) !important; box-shadow: 0 4px 14px rgba(66, 49, 25, 0.08); overflow: visible; transition: transform .28s ease, background-color .28s ease, border-color .28s ease, box-shadow .28s ease; } /* DOBLE ARO */ header a:has(svg)::before, header a:has(i)::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(170, 129, 66, 0.18); pointer-events: none; } /* PEQUEÑO DETALLE DORADO */ header a:has(svg)::after, header a:has(i)::after { content: ""; position: absolute; width: 4px; height: 4px; top: 3px; right: 3px; border-radius: 50%; background: #b58a46; opacity: .45; transition: transform .28s ease, opacity .28s ease; } /* ICONOS */ header a:has(svg) svg, header a:has(i) i { position: relative; z-index: 2; width: 16px; height: 16px; font-size: 16px; color: #8b6934 !important; fill: #8b6934 !important; transition: transform .28s ease, color .28s ease, fill .28s ease; } /* HOVER DEL MEDALLÓN */ header a:has(svg):hover, header a:has(i):hover { transform: translateY(-3px) scale(1.04); background: rgba(255, 252, 245, 1) !important; border-color: rgba(170, 129, 66, 0.9) !important; box-shadow: 0 9px 22px rgba(74, 54, 26, 0.16); } /* ICONO AL PASAR */ header a:has(svg):hover svg, header a:has(i):hover i { color: #5d4524 !important; fill: #5d4524 !important; transform: scale(1.1); } /* DETALLE SUPERIOR AL PASAR */ header a:has(svg):hover::after, header a:has(i):hover::after { transform: scale(1.5); opacity: .9; } /* VARIACIÓN MUY SUTIL ENTRE ICONOS */ header a:has(svg):nth-of-type(2n), header a:has(i):nth-of-type(2n) { transform: translateY(1px); } header a:has(svg):nth-of-type(2n):hover, header a:has(i):nth-of-type(2n):hover { transform: translateY(-3px) scale(1.04); } /* TABLET */ @media (max-width: 1024px) { header a:has(svg), header a:has(i) { width: 35px; height: 35px; margin: 0 3px; } } /* MÓVIL */ @media (max-width: 767px) { header a:has(svg), header a:has(i) { width: 33px; height: 33px; } header a:has(svg) svg, header a:has(i) i { width: 15px; height: 15px; font-size: 15px; } }/* ========================================================== LUPA DE LA CABECERA EFECTO ZOOM - SIN MODIFICAR COLORES ========================================================== */ /* ---------------------------------------------------------- 1. ELEMENTOS DE BÚSQUEDA ---------------------------------------------------------- */ header [class*="search"], header [class*="Search"], header .fa-search, header .fa-magnifying-glass, header [aria-label*="Buscar"], header [aria-label*="buscar"], header [aria-label*="Search"], header [title*="Buscar"], header [title*="Search"] { transform: scale(1); transform-origin: center center; transition: transform 0.30s cubic-bezier(.2,.8,.2,1) !important; } /* ---------------------------------------------------------- 2. ZOOM DIRECTAMENTE SOBRE LA LUPA ---------------------------------------------------------- */ header [class*="search"]:hover, header [class*="Search"]:hover, header .fa-search:hover, header .fa-magnifying-glass:hover, header [aria-label*="Buscar"]:hover, header [aria-label*="buscar"]:hover, header [aria-label*="Search"]:hover, header [title*="Buscar"]:hover, header [title*="Search"]:hover { transform: scale(1.30) !important; } /* ---------------------------------------------------------- 3. SI LA LUPA ESTÁ DENTRO DE UN ENLACE ---------------------------------------------------------- */ header a:hover .fa-search, header a:hover .fa-magnifying-glass, header a:hover [class*="search"], header a:hover [class*="Search"], header a:hover svg { transform: scale(1.30) !important; } /* ---------------------------------------------------------- 4. SI LA LUPA ESTÁ DENTRO DE UN BOTÓN ---------------------------------------------------------- */ header button:hover .fa-search, header button:hover .fa-magnifying-glass, header button:hover [class*="search"], header button:hover [class*="Search"], header button:hover svg { transform: scale(1.30) !important; } /* ---------------------------------------------------------- 5. ZOOM DEL CONTENEDOR DE BÚSQUEDA ---------------------------------------------------------- */ header a:has(.fa-search), header a:has(.fa-magnifying-glass), header button:has(.fa-search), header button:has(.fa-magnifying-glass), header a:has([class*="search"]), header button:has([class*="search"]) { transform: scale(1); transform-origin: center center; transition: transform 0.30s cubic-bezier(.2,.8,.2,1) !important; } /* ---------------------------------------------------------- 6. HOVER DEL CONTENEDOR ---------------------------------------------------------- */ header a:has(.fa-search):hover, header a:has(.fa-magnifying-glass):hover, header button:has(.fa-search):hover, header button:has(.fa-magnifying-glass):hover, header a:has([class*="search"]):hover, header button:has([class*="search"]):hover { transform: scale(1.22) !important; } /* ---------------------------------------------------------- 7. LA LUPA CRECE AÚN MÁS DENTRO DEL BOTÓN ---------------------------------------------------------- */ header a:has(.fa-search):hover .fa-search, header a:has(.fa-magnifying-glass):hover .fa-magnifying-glass, header button:has(.fa-search):hover .fa-search, header button:has(.fa-magnifying-glass):hover .fa-magnifying-glass, header a:has([class*="search"]):hover svg, header button:has([class*="search"]):hover svg { transform: scale(1.15) !important; } /* ---------------------------------------------------------- 8. EFECTO AL HACER CLIC ---------------------------------------------------------- */ header a:has(.fa-search):active, header a:has(.fa-magnifying-glass):active, header button:has(.fa-search):active, header button:has(.fa-magnifying-glass):active, header a:has([class*="search"]):active, header button:has([class*="search"]):active { transform: scale(0.94) !important; } /* ========================================================== LOGOTIPO CABECERA - EFECTO HOVER ELEGANTE ========================================================== */ /* Logo */ header .custom-logo, header .site-logo img, header .site-branding img, header a[rel="home"] img { transform: scale(1); transform-origin: center center; transition: transform .40s cubic-bezier(.2,.8,.2,1), filter .40s ease !important; } /* EFECTO AL PASAR EL RATÓN */ header .custom-logo:hover, header .site-logo:hover img, header .site-branding a:hover img, header a[rel="home"]:hover img { transform: translateY(-2px) scale(1.07) !important; filter: drop-shadow(0 5px 7px rgba(20, 42, 60, .14)) drop-shadow(0 1px 2px rgba(184, 148, 84, .18)); } /* Al hacer clic */ header .site-branding a:active img, header a[rel="home"]:active img { transform: scale(.98) !important; } /* ========================================= REDES SOCIALES - TAMAÑO EN MÓVIL ========================================= */ @media (max-width: 767px) { header a:has(svg), header a:has(i) { width: 26px !important; height: 26px !important; margin: 0 1px !important; } header a:has(svg) svg, header a:has(i) i { width: 12px !important; height: 12px !important; font-size: 12px !important; } }/* ========================================================== CABECERA MÓVIL TÍTULO + SUBTÍTULO MÁS GRANDES Y COMPACTOS ========================================================== */ @media (max-width: 767px) { /* Permite que el bloque de texto use el espacio disponible */ header .site-branding, header .site-branding-text, header .site-identity { min-width: 0 !important; } /* TÍTULO PRINCIPAL */ header .site-title, header .site-title a { font-size: clamp(18px, 5vw, 23px) !important; line-height: 1.05 !important; letter-spacing: -0.3px !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; max-width: 100% !important; } /* SUBTÍTULO / DESCRIPCIÓN */ header .site-description, header .site-tagline { font-size: clamp(11px, 3.1vw, 14px) !important; line-height: 1.15 !important; letter-spacing: 0 !important; margin-top: 3px !important; margin-bottom: 0 !important; padding: 0 !important; white-space: normal !important; max-width: 100% !important; } /* Evita separaciones excesivas */ header .site-title + .site-description, header .site-title + .site-tagline { margin-top: 3px !important; } } /* ========================================================== MÓVILES MUY PEQUEÑOS ========================================================== */ @media (max-width: 390px) { header .site-title, header .site-title a { font-size: 18px !important; line-height: 1.03 !important; } header .site-description, header .site-tagline { font-size: 11px !important; line-height: 1.12 !important; } }/* ========================================================== CABECERA MÓVIL TÍTULO + VERSÍCULO MÁS COMPACTOS ========================================================== */ @media (max-width: 767px) { /* BLOQUE DE TEXTO */ header .site-branding-text, header .site-identity { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; min-width: 0 !important; width: auto !important; max-width: 165px !important; height: auto !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } /* TÍTULO */ header .site-title, header .site-title a { display: block !important; width: 145px !important; max-width: 145px !important; margin: 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 1 !important; font-weight: 700 !important; text-align: left !important; text-align-last: left !important; letter-spacing: 0 !important; word-spacing: 0 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; overflow: visible !important; } /* VERSÍCULO / SUBTÍTULO */ header .site-description, header .site-tagline { display: block !important; width: 150px !important; max-width: 150px !important; height: auto !important; max-height: none !important; margin: 3px 0 0 0 !important; padding: 0 !important; font-size: 9px !important; line-height: 1.08 !important; text-align: left !important; text-align-last: left !important; letter-spacing: 0 !important; word-spacing: 0 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; overflow: visible !important; } /* ENLACE DEL TÍTULO */ header .site-title a { color: inherit !important; text-decoration: none !important; } } /* ========================================================== MÓVILES MUY ESTRECHOS ========================================================== */ @media (max-width: 390px) { header .site-branding-text, header .site-identity { max-width: 150px !important; } header .site-title, header .site-title a { width: 135px !important; max-width: 135px !important; font-size: 17px !important; line-height: 1 !important; } header .site-description, header .site-tagline { width: 140px !important; max-width: 140px !important; font-size: 8.5px !important; line-height: 1.07 !important; margin-top: 3px !important; } }/* ========================================================== ENTRADAS DEL BLOG FOLIO BLANCO TRANSPARENTE + TEXTURA DOBLEZ SUPERIOR IZQUIERDO + INFERIOR DERECHO ========================================================== */ /* ========================================================== 1. FOLIO GENERAL ========================================================== */ .entries article, .ct-posts-container article, article.post { position: relative !important; box-sizing: border-box !important; /* Transparencia */ background-color: rgba(255,255,255,.42) !important; /* Textura suave del papel */ background-image: /* ========================================================== FONDO DEL FOLIO TRANSPARENCIA + TEXTURA DE PAPEL ========================================================== */ background-color: rgba(255,255,255,.42) !important; background-image: /* Fibra horizontal muy fina */ repeating-linear-gradient( 0deg, rgba(30,45,55,.018) 0px, rgba(30,45,55,.018) 1px, transparent 1px, transparent 5px ), /* Fibra vertical irregular */ repeating-linear-gradient( 90deg, rgba(30,45,55,.009) 0px, rgba(30,45,55,.009) 1px, transparent 1px, transparent 11px ), /* Variaciones cálidas del papel */ radial-gradient( ellipse at 14% 18%, rgba(184,145,76,.045) 0%, transparent 28% ), radial-gradient( ellipse at 82% 26%, rgba(255,255,255,.16) 0%, transparent 31% ), radial-gradient( ellipse at 28% 76%, rgba(181,145,80,.035) 0%, transparent 30% ), radial-gradient( ellipse at 72% 82%, rgba(255,255,255,.13) 0%, transparent 34% ), /* Variación general de la hoja */ linear-gradient( 115deg, rgba(255,255,255,.08) 0%, transparent 27%, rgba(180,145,82,.018) 52%, transparent 72%, rgba(255,255,255,.06) 100% ) !important; /* Borde fino del folio */ border: 1px solid rgba(20,45,65,.11) !important; border-radius: 2px !important; padding: 34px 38px 42px !important; margin-bottom: 36px !important; /* Sombra exterior */ box-shadow: 0 2px 3px rgba(20,30,40,.045), 0 7px 16px rgba(20,30,40,.07), 0 20px 40px rgba(20,30,40,.09) !important; overflow: hidden !important; transition: transform .25s ease, box-shadow .25s ease !important; } /* ========================================================== 2. CONTENIDO POR ENCIMA DEL PAPEL ========================================================== */ .entries article > *, .ct-posts-container article > *, article.post > * { position: relative; z-index: 3; } /* ========================================================== 3. DOBLEZ SUPERIOR IZQUIERDO ENTRADA INDIVIDUAL ========================================================== */ article.post::before { content: "" !important; position: absolute !important; top: -1px !important; left: -1px !important; right: auto !important; bottom: auto !important; width: 38px !important; height: 38px !important; z-index: 10 !important; pointer-events: none !important; background: linear-gradient( 315deg, rgba(236,238,236,.18) 0%, rgba(245,245,241,.82) 45%, rgba(189,153,84,.18) 48%, rgba(219,199,157,.28) 52%, rgba(255,255,255,.94) 56%, rgba(255,255,255,.97) 100% ) !important; border-top: none !important; border-left: none !important; border-right: 1px solid rgba(171,132,57,.11) !important; border-bottom: 1px solid rgba(171,132,57,.15) !important; box-shadow: 4px 4px 8px rgba(30,40,50,.05) !important; } /* ========================================================== 4. DOBLEZ INFERIOR DERECHO ENTRADA INDIVIDUAL ========================================================== */ article.post::after { content: "" !important; position: absolute !important; right: -1px !important; bottom: -1px !important; top: auto !important; left: auto !important; width: 38px !important; height: 38px !important; z-index: 10 !important; pointer-events: none !important; background: linear-gradient( 135deg, rgba(236,238,236,.18) 0%, rgba(245,245,241,.82) 45%, rgba(189,153,84,.18) 48%, rgba(219,199,157,.28) 52%, rgba(255,255,255,.94) 56%, rgba(255,255,255,.97) 100% ) !important; border-right: none !important; border-bottom: none !important; border-top: 1px solid rgba(171,132,57,.15) !important; border-left: 1px solid rgba(171,132,57,.11) !important; box-shadow: -4px -4px 8px rgba(30,40,50,.05) !important; } /* ========================================================== 5. ÚLTIMAS ENTRADAS DOBLEZ SUPERIOR IZQUIERDO MEJORADO ========================================================== */ body:not(.single-post) .entries article::before, body:not(.single-post) .ct-posts-container article::before, body:not(.single-post) article.post::before { content: "" !important; position: absolute !important; top: -1px !important; left: -1px !important; right: auto !important; bottom: auto !important; width: 42px !important; height: 42px !important; z-index: 10 !important; pointer-events: none !important; /* Forma del pliegue */ clip-path: polygon( 0 0, 100% 0, 0 100% ); /* Papel doblado */ background: linear-gradient( 315deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 38%, rgba(241,241,237,.94) 46%, rgba(199,166,102,.25) 49%, rgba(226,210,175,.38) 52%, rgba(247,247,243,.94) 58%, rgba(255,255,255,.98) 100% ) !important; border: none !important; box-shadow: 3px 4px 8px rgba(24,34,42,.08) !important; filter: drop-shadow( 2px 3px 2px rgba(25,35,45,.09) ); } /* ========================================================== 6. ÚLTIMAS ENTRADAS DOBLEZ INFERIOR DERECHO MEJORADO ========================================================== */ body:not(.single-post) .entries article::after, body:not(.single-post) .ct-posts-container article::after, body:not(.single-post) article.post::after { content: "" !important; position: absolute !important; right: -1px !important; bottom: -1px !important; top: auto !important; left: auto !important; width: 42px !important; height: 42px !important; z-index: 10 !important; pointer-events: none !important; clip-path: polygon( 100% 0, 100% 100%, 0 100% ); background: linear-gradient( 135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 38%, rgba(241,241,237,.94) 46%, rgba(199,166,102,.25) 49%, rgba(226,210,175,.38) 52%, rgba(247,247,243,.94) 58%, rgba(255,255,255,.98) 100% ) !important; border: none !important; box-shadow: -3px -4px 8px rgba(24,34,42,.08) !important; filter: drop-shadow( -2px -3px 2px rgba(25,35,45,.09) ); } /* ========================================================== 7. ÚLTIMAS ENTRADAS ANCHO NORMAL ========================================================== */ body:not(.single-post) .entries article, body:not(.single-post) .ct-posts-container article, body:not(.single-post) article.post { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================== 8. ENTRADA INDIVIDUAL MÁS ANCHA EN ESCRITORIO ========================================================== */ @media (min-width: 1025px) { body.single-post article.post { width: calc(100% + 90px) !important; max-width: none !important; margin-left: -45px !important; margin-right: -45px !important; padding-left: 55px !important; padding-right: 55px !important; } } /* ========================================================== 9. DETALLE DORADO DEL TÍTULO ========================================================== */ .entries article .entry-title::before, .ct-posts-container article .entry-title::before, article.post .entry-title::before { content: ""; display: block; width: 42px; height: 2px; margin: 0 0 12px; background: linear-gradient( 90deg, #b47720, #e0bd70, transparent ); border-radius: 10px; } /* ========================================================== 10. TÍTULOS ========================================================== */ .entries article .entry-title, .ct-posts-container article .entry-title, article.post .entry-title { color: #071f3d !important; } .entries article .entry-title a, .ct-posts-container article .entry-title a, article.post .entry-title a { color: #071f3d !important; transition: color .2s ease !important; } .entries article .entry-title a:hover, .ct-posts-container article .entry-title a:hover, article.post .entry-title a:hover { color: #b47720 !important; } /* ========================================================== 11. TEXTO ========================================================== */ .entries article .entry-excerpt, .ct-posts-container article .entry-excerpt, article.post .entry-content { color: #344450 !important; } /* ========================================================== 12. METADATOS ========================================================== */ .entries article .entry-meta, .ct-posts-container article .entry-meta, article.post .entry-meta { color: #71808c !important; } /* ========================================================== 13. IMÁGENES ========================================================== */ .entries article img, .ct-posts-container article img, article.post img { border-radius: 2px; box-shadow: 0 3px 10px rgba(20,35,50,.08); } /* ========================================================== 14. HOVER ========================================================== */ @media (min-width: 769px) { .entries article:hover, .ct-posts-container article:hover, article.post:hover { transform: translateY(-2px); box-shadow: 0 2px 3px rgba(20,30,40,.04), 0 9px 20px rgba(20,30,40,.08), 0 22px 44px rgba(20,30,40,.10) !important; } } /* ========================================================== 15. TABLET / IPAD ========================================================== */ @media (min-width: 601px) and (max-width: 1024px) { .entries article, .ct-posts-container article, article.post { /* Más transparente */ background-color: rgba(255,255,255,.48) !important; padding: 30px 28px 36px !important; margin-bottom: 32px !important; } /* Entrada individual */ article.post::before, article.post::after { width: 33px !important; height: 33px !important; } /* Últimas Entradas */ body:not(.single-post) .entries article::before, body:not(.single-post) .ct-posts-container article::before, body:not(.single-post) article.post::before, body:not(.single-post) .entries article::after, body:not(.single-post) .ct-posts-container article::after, body:not(.single-post) article.post::after { width: 36px !important; height: 36px !important; } body.single-post article.post { width: calc(100% + 24px) !important; max-width: none !important; margin-left: -12px !important; margin-right: -12px !important; padding-left: 32px !important; padding-right: 32px !important; } } /* ========================================================== 16. MÓVIL ========================================================== */ @media (max-width: 600px) { .entries article, .ct-posts-container article, article.post { /* Transparente pero con buena lectura */ background-color: rgba(255,255,255,.54) !important; padding: 24px 20px 31px !important; margin-bottom: 26px !important; box-shadow: 0 2px 3px rgba(20,30,40,.04), 0 7px 18px rgba(20,30,40,.08) !important; } /* Entrada individual */ article.post::before, article.post::after { width: 29px !important; height: 29px !important; } /* Últimas Entradas */ body:not(.single-post) .entries article::before, body:not(.single-post) .ct-posts-container article::before, body:not(.single-post) article.post::before, body:not(.single-post) .entries article::after, body:not(.single-post) .ct-posts-container article::after, body:not(.single-post) article.post::after { width: 31px !important; height: 31px !important; } body.single-post article.post { width: calc(100% + 10px) !important; max-width: none !important; margin-left: -5px !important; margin-right: -5px !important; } .entries article .entry-title::before, .ct-posts-container article .entry-title::before, article.post .entry-title::before { width: 34px; margin-bottom: 10px; } } /* ========================================================== 17. MÓVILES PEQUEÑOS ========================================================== */ @media (max-width: 380px) { article.post::before, article.post::after { width: 25px !important; height: 25px !important; } body:not(.single-post) .entries article::before, body:not(.single-post) .ct-posts-container article::before, body:not(.single-post) article.post::before, body:not(.single-post) .entries article::after, body:not(.single-post) .ct-posts-container article::after, body:not(.single-post) article.post::after { width: 27px !important; height: 27px !important; } } /* ========================================================== 18. BARRA LATERAL / WIDGETS TRANSPARENTES DEJAR ESTE BLOQUE AL FINAL ========================================================== */ .ct-sidebar, .ct-sidebar-inner, aside.ct-sidebar, [data-sidebar], [data-sidebar] .ct-sidebar, [data-sidebar] .ct-sidebar-inner, .ct-sidebar .ct-widget, .ct-sidebar .widget, .ct-sidebar section.widget, .ct-sidebar .widget_block, .ct-sidebar .wp-block-group, .ct-sidebar .wp-block-group__inner-container, .ct-sidebar .wp-block-widget-group, .ct-sidebar > div, .ct-sidebar > section { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } [data-sidebar], .ct-sidebar { --theme-background-color: transparent !important; --sidebar-background-color: transparent !important; } /* ========================================================== FORZAR TEXTURA EN LA ENTRADA ABIERTA ========================================================== */ body.single-post article.post, body.single-post .site-main article, body.single-post .entry-content, body.single-post .ct-container-full, body.single-post .ct-container { background-color: rgba(255,255,255,.42) !important; background-image: repeating-linear-gradient( 0deg, rgba(30,45,55,.018) 0px, rgba(30,45,55,.018) 1px, transparent 1px, transparent 5px ), repeating-linear-gradient( 90deg, rgba(30,45,55,.009) 0px, rgba(30,45,55,.009) 1px, transparent 1px, transparent 11px ), radial-gradient( ellipse at 14% 18%, rgba(184,145,76,.045), transparent 28% ), radial-gradient( ellipse at 82% 26%, rgba(255,255,255,.16), transparent 31% ), radial-gradient( ellipse at 28% 76%, rgba(181,145,80,.035), transparent 30% ), radial-gradient( ellipse at 72% 82%, rgba(255,255,255,.13), transparent 34% ), linear-gradient( 115deg, rgba(255,255,255,.08) 0%, transparent 27%, rgba(180,145,82,.018) 52%, transparent 72%, rgba(255,255,255,.06) 100% ) !important; } /* ========================================================== QUITAR FONDOS BLANCOS QUE PUEDAN TAPAR LA TEXTURA ========================================================== */ body.single-post .entry-content > *, body.single-post article.post > *, body.single-post .site-main article > * { background-color: transparent !important; } /* ========================================================== TABLET ========================================================== */ @media (min-width:601px) and (max-width:1024px) { body.single-post article.post, body.single-post .site-main article, body.single-post .entry-content { background-color: rgba(255,255,255,.48) !important; } } /* ========================================================== MÓVIL ========================================================== */ @media (max-width:600px) { body.single-post article.post, body.single-post .site-main article, body.single-post .entry-content { background-color: rgba(255,255,255,.54) !important; } }