/* ========================================================== BENEYTZION ESTILO GENERAL DE PORTADA Azul profundo + dorado + crema ========================================================== */ /* ========================================================== COLORES BASE ========================================================== */ :root { } /* ========================================================== FONDO GENERAL ========================================================== */ body { background: linear-gradient(180deg, #fffdf8 0%, #f7f2e8 100%) !important; color: var(--bz-text); } /* ========================================================== CONTENIDO PRINCIPAL ========================================================== */ .site-content, main, .content-area { position: relative; } /* ========================================================== TÍTULOS ========================================================== */ h1, h2, h3, h4, .entry-title, .page-title { color: var(--bz-blue) !important; font-family: Georgia, "Times New Roman", serif !important; font-weight: 700 !important; letter-spacing: .2px; line-height: 1.15; } /* ========================================================== TÍTULOS DE SECCIÓN Línea dorada decorativa ========================================================== */ .entry-content h2, .entry-content h3 { position: relative; margin-top: 34px; margin-bottom: 18px; padding-bottom: 10px; } .entry-content h2::after, .entry-content h3::after { content: ""; display: block; width: 54px; height: 2px; margin-top: 9px; background: linear-gradient(90deg, var(--bz-gold), var(--bz-gold-light)); border-radius: 30px; } /* ========================================================== TEXTO ========================================================== */ .entry-content p, .entry-content li { line-height: 1.75; color: #34383c; } /* ========================================================== BLOQUES DEL CONTENIDO ========================================================== */ .entry-content > p, .entry-content > ul, .entry-content > ol { position: relative; } /* ========================================================== CITAS BÍBLICAS ========================================================== */ blockquote { position: relative; margin: 28px 0 !important; padding: 22px 26px 22px 30px !important; background: linear-gradient(135deg, rgba(255,255,255,.93), rgba(247,242,232,.96)) !important; border-left: 4px solid var(--bz-gold) !important; border-radius: 4px 18px 18px 4px !important; box-shadow: 0 9px 24px rgba(16,42,64,.07); color: #303438; font-family: Georgia, "Times New Roman", serif; font-size: 1.04em; line-height: 1.7; } /* pequeño símbolo decorativo */ blockquote::before { content: "״"; position: absolute; top: 2px; right: 18px; font-size: 42px; color: rgba(184,148,84,.22); font-family: Georgia, serif; } /* ========================================================== ENLACES ========================================================== */ .entry-content a { color: var(--bz-blue-2); text-decoration-color: rgba(184,148,84,.65); text-underline-offset: 3px; transition: color .25s ease, text-decoration-color .25s ease; } .entry-content a:hover { color: var(--bz-gold); text-decoration-color: var(--bz-gold); } /* ========================================================== IMÁGENES ========================================================== */ .entry-content img, .wp-post-image { border-radius: 18px; box-shadow: 0 12px 30px rgba(16,42,64,.12); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, filter .45s ease; } /* efecto elegante */ @media (hover: hover) { .entry-content img:hover, .wp-post-image:hover { transform: translateY(-5px) scale(1.025); box-shadow: 0 18px 38px rgba(16,42,64,.17); filter: brightness(1.03); } } /* ========================================================== BOTONES ========================================================== */ button, input[type="submit"], .wp-block-button__link { background: linear-gradient(135deg, var(--bz-blue-2), var(--bz-blue)) !important; color: #fffaf0 !important; border: 1px solid var(--bz-gold) !important; border-radius: 30px !important; padding: 10px 22px !important; font-weight: 600 !important; letter-spacing: .2px; box-shadow: 0 5px 14px rgba(16,42,64,.16); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } /* hover botón */ button:hover, input[type="submit"]:hover, .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(16,42,64,.22); background: linear-gradient(135deg, #1d4a6b, #102a40) !important; } /* ========================================================== LISTAS ========================================================== */ .entry-content ul { padding-left: 22px; } .entry-content ul li { margin-bottom: 8px; } .entry-content ul li::marker { color: var(--bz-gold); } /* ========================================================== SEPARADORES ========================================================== */ .entry-content hr { border: 0 !important; height: 1px; margin: 38px 0; background: linear-gradient(90deg, transparent, rgba(184,148,84,.65), transparent); } /* ========================================================== ENTRADAS / TARJETAS ========================================================== */ article { transition: transform .35s ease, box-shadow .35s ease; } @media (hover: hover) { article:hover { transform: translateY(-3px); } } /* ========================================================== FORMULARIOS ========================================================== */ input[type="text"], input[type="email"], input[type="url"], textarea { background: rgba(255,255,255,.88) !important; border: 1px solid rgba(184,148,84,.45) !important; border-radius: 9px !important; padding: 11px 13px !important; transition: border-color .25s ease, box-shadow .25s ease; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus { border-color: var(--bz-gold) !important; box-shadow: 0 0 0 3px rgba(184,148,84,.12) !important; outline: none !important; } /* ========================================================== MÓVIL ========================================================== */ @media (max-width: 767px) { .entry-content h2, .entry-content h3 { margin-top: 26px; } blockquote { padding: 18px 18px 18px 22px !important; font-size: .97em; } .entry-content p, .entry-content li { line-height: 1.65; } .entry-content img, .wp-post-image { border-radius: 12px; } }/* ========================================================== BENEYTZION — CABECERA REAL ========================================================== */ /* CABECERA COMPLETA */ #masthead.site-header { background: linear-gradient( 135deg, #0d263a 0%, #173d59 50%, #102a40 100% ) !important; border-bottom: 3px solid #b89454 !important; box-shadow: 0 7px 24px rgba(16, 42, 64, .22) !important; } /* ========================================================== NOMBRE DEL SITIO ========================================================== */ #masthead .site-branding .site-title, #masthead .site-branding .site-title a { color: #f8f1e3 !important; font-family: Georgia, "Times New Roman", serif !important; font-weight: 700 !important; letter-spacing: .5px !important; text-shadow: 0 2px 5px rgba(0,0,0,.25); text-decoration: none !important; transition: color .3s ease, transform .3s ease, text-shadow .3s ease !important; } /* HOVER DEL NOMBRE */ @media (hover: hover) { #masthead .site-title a:hover { color: #e4c57c !important; text-shadow: 0 3px 8px rgba(0,0,0,.30); } } /* ========================================================== DESCRIPCIÓN / SALMO ========================================================== */ #masthead .site-branding .site-description { color: #e8d9bd !important; font-family: Georgia, "Times New Roman", serif !important; font-style: italic !important; line-height: 1.45 !important; text-shadow: 0 1px 3px rgba(0,0,0,.22); } /* ========================================================== MENÚ ========================================================== */ #masthead .main-navigation a { color: #f8f1e3 !important; text-decoration: none !important; transition: color .25s ease, transform .25s ease !important; } /* HOVER MENÚ */ @media (hover: hover) { #masthead .main-navigation a:hover { color: #e4c57c !important; transform: translateY(-2px); } } /* PÁGINA ACTUAL */ #masthead .main-navigation .current-menu-item > a, #masthead .main-navigation .current_page_item > a { color: #d8b566 !important; } /* ========================================================== LOGO / IMAGEN DE CABECERA ========================================================== */ #masthead .site-branding img { transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s ease !important; } @media (hover: hover) { #masthead .site-branding img:hover { transform: translateY(-3px) scale(1.05); filter: drop-shadow(0 7px 9px rgba(0,0,0,.20)); } } /* ========================================================== MENÚ DESPLEGABLE ========================================================== */ #masthead .main-navigation ul ul { background: #102a40 !important; border-top: 2px solid #b89454 !important; box-shadow: 0 10px 25px rgba(0,0,0,.22) !important; } #masthead .main-navigation ul ul a { color: #f8f1e3 !important; } #masthead .main-navigation ul ul a:hover { color: #e4c57c !important; background: rgba(184,148,84,.13) !important; }/* ========================================================== BENEYTZION — MENÚ PRINCIPAL AZUL + DORADO ========================================================== */ /* FRANJA COMPLETA DEL MENÚ */ #masthead .main-navigation, #masthead nav.main-navigation { background: linear-gradient( 135deg, #102a40 0%, #173d59 50%, #102a40 100% ) !important; border-top: 1px solid #b89454 !important; border-bottom: 2px solid #b89454 !important; box-shadow: 0 4px 12px rgba(16, 42, 64, .16) !important; } /* QUITAR FONDO SALMÓN DE CONTENEDORES INTERNOS */ #masthead .main-navigation > div, #masthead .main-navigation ul { background: transparent !important; } /* ========================================================== ENLACES DEL MENÚ ========================================================== */ #masthead .main-navigation ul.menu > li > a, #masthead .main-navigation > div > ul > li > a { color: #d7b66b !important; font-weight: 600 !important; text-shadow: 0 1px 2px rgba(0,0,0,.18); transition: color .25s ease, transform .25s ease, text-shadow .25s ease !important; } /* ========================================================== HOVER ========================================================== */ @media (hover: hover) and (pointer: fine) { #masthead .main-navigation ul.menu > li > a:hover, #masthead .main-navigation > div > ul > li > a:hover { color: #ffffff !important; transform: translateY(-2px); text-shadow: 0 2px 6px rgba(0,0,0,.30); } } /* ========================================================== ELEMENTO ACTIVO ========================================================== */ #masthead .main-navigation .current-menu-item > a, #masthead .main-navigation .current_page_item > a { color: #ffffff !important; } /* ========================================================== PUNTOS / SEPARADORES ENTRE OPCIONES ========================================================== */ #masthead .main-navigation li { color: #b89454 !important; } /* ========================================================== SUBMENÚ ========================================================== */ #masthead .main-navigation ul ul { background: #102a40 !important; border: 1px solid rgba(184,148,84,.55) !important; box-shadow: 0 10px 22px rgba(0,0,0,.22) !important; } #masthead .main-navigation ul ul a { color: #ffffff !important; } #masthead .main-navigation ul ul a:hover { background: rgba(184,148,84,.14) !important; color: #e2c47f !important; }/* ========================================================== BENEYTZION TÍTULO + VERSÍCULO VISIBLES SOBRE FONDO CLARO ========================================================== */ /* TÍTULO */ #masthead .site-branding .site-title, #masthead .site-branding .site-title a { color: #102a40 !important; font-family: Georgia, "Times New Roman", serif !important; font-weight: 700 !important; font-size: 32px !important; line-height: 1.1 !important; letter-spacing: .8px !important; text-decoration: none !important; /* ayuda a separarlo del fondo */ text-shadow: 0 1px 0 #e1bd6d, 0 2px 3px rgba(255,255,255,.95), 0 3px 8px rgba(16,42,64,.18) !important; } /* ========================================================== VERSÍCULO ========================================================== */ #masthead .site-branding .site-description { color: #17344d !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 14px !important; font-weight: 600 !important; font-style: italic !important; line-height: 1.35 !important; letter-spacing: .15px !important; text-shadow: 0 1px 2px rgba(255,255,255,1), 0 2px 5px rgba(255,255,255,.9) !important; } /* ========================================================== HOVER DEL TÍTULO ========================================================== */ @media (hover: hover) and (pointer: fine) { #masthead .site-title a:hover { color: #b07e2f !important; text-shadow: 0 1px 0 #102a40, 0 3px 8px rgba(255,255,255,.9) !important; } } /* ========================================================== MÓVIL ========================================================== */ @media (max-width: 767px) { #masthead .site-branding .site-title, #masthead .site-branding .site-title a { font-size: 24px !important; line-height: 1.05 !important; } #masthead .site-branding .site-description { font-size: 11px !important; line-height: 1.25 !important; } }/* ========================================================== BENEYTZION ANCHO GENERAL EXTRA GRANDE CABECERA + MENÚ + CONTENIDO + WIDGETS ========================================================== */ /* ========================================================== 1. TODA LA WEB Hasta 1800px y 98% de la pantalla ========================================================== */ html body #page, html body #page.site, html body #page.fixed, html body #page.fixed.site { width: min(98vw, 1800px) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* ========================================================== 2. CABECERA COMPLETA ========================================================== */ html body #masthead.site-header { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* ========================================================== 3. LOGO + TÍTULO + VERSÍCULO ========================================================== */ html body #masthead .site-branding { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } html body #masthead .site-title, html body #masthead .site-description { width: 100% !important; max-width: none !important; } /* ========================================================== 4. MENÚ PRINCIPAL MISMO ANCHO QUE TODA LA WEB ========================================================== */ html body #masthead .main-navigation { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* CONTENEDOR INTERIOR DEL MENÚ */ html body #masthead .menu-primary-container { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* LISTA DEL MENÚ */ html body #masthead .menu-primary, html body #masthead .main-navigation ul { max-width: none !important; } /* ========================================================== 5. CONTENIDO GENERAL ========================================================== */ html body #content.site-content, html body .site-content { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 60px !important; padding-right: 60px !important; box-sizing: border-box !important; } /* ========================================================== 6. COLUMNA PRINCIPAL 70% DEL ANCHO ========================================================== */ html body #primary, html body #primary.content-area { width: 70% !important; max-width: none !important; float: left !important; box-sizing: border-box !important; padding-right: 30px !important; } /* ========================================================== 7. COLUMNA DERECHA / WIDGETS 27% DEL ANCHO ========================================================== */ html body #secondary, html body #secondary.widget-area, html body .widget-area { display: block !important; width: 27% !important; max-width: none !important; float: right !important; visibility: visible !important; opacity: 1 !important; box-sizing: border-box !important; } /* ========================================================== 8. WIDGETS APROVECHAN TODO EL NUEVO ANCHO ========================================================== */ html body #secondary .widget, html body .widget-area .widget { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ========================================================== 9. IMÁGENES / MAPAS / IFRAMES DE WIDGETS ========================================================== */ html body #secondary img, html body #secondary iframe, html body #secondary object, html body #secondary embed, html body .widget-area img, html body .widget-area iframe { max-width: 100% !important; height: auto; } /* ========================================================== 10. LIMPIEZA DE COLUMNAS ========================================================== */ html body #content.site-content::after { content: ""; display: table; clear: both; } /* ========================================================== 11. FOOTER ========================================================== */ html body #colophon.site-footer { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* ========================================================== 12. MONITORES MEDIANOS ========================================================== */ @media (max-width: 1400px) { html body #page, html body #page.site, html body #page.fixed, html body #page.fixed.site { width: 97vw !important; } html body #content.site-content { padding-left: 40px !important; padding-right: 40px !important; } html body #primary, html body #primary.content-area { width: 69% !important; } html body #secondary, html body #secondary.widget-area, html body .widget-area { width: 28% !important; } } /* ========================================================== 13. TABLET ========================================================== */ @media (max-width: 1000px) { html body #page, html body #page.site, html body #page.fixed, html body #page.fixed.site { width: 100% !important; max-width: 100% !important; } html body #content.site-content { padding-left: 30px !important; padding-right: 30px !important; } } /* ========================================================== 14. MÓVIL ========================================================== */ @media (max-width: 767px) { html body #page, html body #page.site, html body #page.fixed, html body #page.fixed.site { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* CONTENIDO */ html body #content.site-content { width: 100% !important; padding-left: 18px !important; padding-right: 18px !important; } /* ARTÍCULO */ html body #primary, html body #primary.content-area { width: 100% !important; max-width: 100% !important; float: none !important; padding-right: 0 !important; } /* WIDGETS DEBAJO DEL ARTÍCULO */ html body #secondary, html body #secondary.widget-area, html body .widget-area { width: 100% !important; max-width: 100% !important; float: none !important; } }/* ========================================================== BENEYTZION · PARASHÁ SEMANAL Diseño azul marino + dorado Icono: Rollo de la Torá ========================================================== */ /* ========================================================== CONTENEDOR PRINCIPAL ========================================================== */ .bz-parasha { width: 100%; margin: 0 0 28px; overflow: hidden; background: linear-gradient( 145deg, #ffffff 0%, #fbf7ed 100% ); border: 1px solid rgba(184,148,84,.55); border-radius: 8px; box-shadow: 0 8px 24px rgba(16,42,64,.12); box-sizing: border-box; } /* ========================================================== CABECERA ========================================================== */ .bz-parasha-cabecera { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 15px; background: linear-gradient( 135deg, #0b2539 0%, #173d59 50%, #102a40 100% ); border-bottom: 2px solid #b89454; color: #f5e3b9; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-align: center; } /* BRILLO DORADO INFERIOR */ .bz-parasha-cabecera::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(212,183,124,.85), transparent ); } /* ========================================================== ICONO ROLLO DE LA TORÁ ========================================================== */ .bz-parasha-icono { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; border: 0; color: #d4b77c; font-size: 21px; line-height: 1; transform: translateY(-1px); filter: sepia(.30) saturate(.85); } /* ========================================================== CONTENIDO INTERIOR ========================================================== */ .bz-parasha-contenido { position: relative; padding: 20px 18px 21px; text-align: center; box-sizing: border-box; } /* ========================================================== TEXTO HEBREO SUPERIOR ========================================================== */ .bz-parasha-hebreo { color: #b89454; font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.4; letter-spacing: .4px; } /* ========================================================== LÍNEA DORADA DECORATIVA ========================================================== */ .bz-parasha-linea { width: 70px; height: 1px; margin: 9px auto 13px; background: linear-gradient( 90deg, transparent, #b89454, transparent ); } /* ========================================================== NOMBRE DE LA PARASHÁ ========================================================== */ .bz-parasha-nombre { color: #102a40; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin-bottom: 4px; } /* ========================================================== NOMBRE DE LA PARASHÁ EN HEBREO ========================================================== */ .bz-parasha-nombre-hebreo { min-height: 5px; margin-bottom: 8px; color: #a67d3d; font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.4; } /* ========================================================== FECHA ========================================================== */ .bz-parasha-fecha { color: #74787b; font-size: 12px; line-height: 1.4; } /* ========================================================== PEQUEÑO SEPARADOR DORADO ========================================================== */ .bz-parasha-separador { margin: 12px 0 8px; color: #b89454; font-size: 11px; } /* ========================================================== ETIQUETA "LECTURA DE LA TORÁ" ========================================================== */ .bz-parasha-etiqueta { margin-bottom: 5px; color: #6f7477; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; } /* ========================================================== REFERENCIA DE LA TORÁ ========================================================== */ .bz-parasha-lectura { color: #9a6d29; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 700; line-height: 1.45; } /* ========================================================== DETALLE DECORATIVO INFERIOR ========================================================== */ .bz-parasha-contenido::after { content: ""; display: block; width: 42px; height: 1px; margin: 15px auto 0; background: linear-gradient( 90deg, transparent, rgba(184,148,84,.75), transparent ); } /* ========================================================== EFECTO AL PASAR EL RATÓN SOLO ORDENADORES ========================================================== */ @media (hover:hover) and (pointer:fine) { .bz-parasha { transition: transform .30s ease, box-shadow .30s ease, border-color .30s ease; } .bz-parasha:hover { transform: translateY(-4px); border-color: rgba(184,148,84,.78); box-shadow: 0 13px 30px rgba(16,42,64,.17); } .bz-parasha-icono { transition: transform .30s ease; } .bz-parasha:hover .bz-parasha-icono { transform: translateY(-1px) scale(1.08); } } /* ========================================================== TABLET ========================================================== */ @media (max-width:1000px) { .bz-parasha-cabecera { font-size: 14px; } .bz-parasha-nombre { font-size: 20px; } } /* ========================================================== MÓVIL ========================================================== */ @media (max-width:767px) { .bz-parasha { margin-bottom: 22px; } .bz-parasha-cabecera { padding: 12px 13px; gap: 8px; font-size: 13px; letter-spacing: .8px; } .bz-parasha-icono { font-size: 20px; } .bz-parasha-contenido { padding: 18px 16px; } .bz-parasha-hebreo { font-size: 15px; } .bz-parasha-nombre { font-size: 20px; } .bz-parasha-nombre-hebreo { font-size: 17px; } .bz-parasha-lectura { font-size: 13px; } }/* ========================================================== BENEYTZION · MO'ADIM Inspirado en el widget de A través de las Escrituras ========================================================== */ /* CONTENEDOR GENERAL */ .bz-moadim2 { width: 100%; margin: 0 0 30px; overflow: hidden; background: linear-gradient( 145deg, #fffdfa 0%, #fbf7ed 100% ); border: 1px solid rgba(184,148,84,.60); border-radius: 10px; box-shadow: 0 9px 25px rgba(16,42,64,.13); box-sizing: border-box; } /* ========================================================== CABECERA ========================================================== */ .bz-moadim2-header { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: linear-gradient( 135deg, #092338 0%, #123b5c 55%, #102a40 100% ); border-bottom: 2px solid #b89454; color: #fff; } /* ICONO */ .bz-moadim2-header-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; background: rgba(255,255,255,.08); border: 1px solid rgba(212,183,124,.80); border-radius: 7px; font-size: 16px; } /* MO'ADIM */ .bz-moadim2-title { color: #f8e5ba; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 700; letter-spacing: .4px; line-height: 1.1; } /* LEVÍTICO 23 */ .bz-moadim2-header-ref { margin-top: 3px; color: rgba(255,255,255,.72); font-family: Georgia, "Times New Roman", serif; font-size: 8px; font-style: italic; } /* ========================================================== PRÓXIMA CONVOCACIÓN ========================================================== */ .bz-moadim2-next { margin: 11px 10px 0; padding: 16px 12px 13px; background: linear-gradient( 145deg, #fffdfa, #fff9ed ); border: 1px solid rgba(198,154,72,.42); border-radius: 11px; text-align: center; box-shadow: 0 5px 14px rgba(16,42,64,.06); } /* ETIQUETA PRÓXIMA */ .bz-moadim2-badge { display: inline-block; margin-bottom: 8px; padding: 4px 12px; background: #f8e8c4; border: 1px solid rgba(198,154,72,.65); border-radius: 20px; color: #96651f; font-size: 8px; font-weight: 700; letter-spacing: 1px; } /* NOMBRE */ .bz-moadim2-next-name { color: #102a40; font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 700; line-height: 1.25; } /* HEBREO */ .bz-moadim2-next-hebrew { margin-top: 4px; color: #a3702e; font-family: Georgia, "Times New Roman", serif; font-size: 12px; line-height: 1.4; } /* ORNAMENTO */ .bz-moadim2-ornament { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px auto 11px; } .bz-moadim2-ornament span { width: 48px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(184,148,84,.55) ); } .bz-moadim2-ornament span:last-child { background: linear-gradient( 90deg, rgba(184,148,84,.55), transparent ); } .bz-moadim2-ornament b { color: #b47d27; font-size: 6px; } /* ========================================================== CUENTA REGRESIVA ========================================================== */ .bz-moadim2-countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin: 0 auto 10px; max-width: 240px; } /* CADA CASILLA */ .bz-moadim2-time { padding: 8px 3px 6px; background: linear-gradient( 180deg, #ffffff, #f5faff ); border: 1px solid #bad1e2; border-radius: 6px; box-shadow: 0 3px 7px rgba(16,42,64,.08); } /* NÚMERO */ .bz-moadim2-time strong { display: block; color: #123b5c; font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 700; line-height: 1; } /* TEXTO DÍAS/HORAS... */ .bz-moadim2-time small { display: block; margin-top: 5px; color: #687985; font-size: 6px; font-weight: 700; letter-spacing: .5px; } /* FECHA */ .bz-moadim2-next-date { margin-top: 7px; color: #60717c; font-family: Georgia, "Times New Roman", serif; font-size: 9px; font-style: italic; } /* ATARDECER */ .bz-moadim2-sunset { margin-top: 2px; color: #8a795d; font-family: Georgia, "Times New Roman", serif; font-size: 8px; font-style: italic; } /* REFERENCIA BÍBLICA */ .bz-moadim2-bible-ref { display: inline-block; margin-top: 8px; padding: 3px 9px; background: rgba(255,255,255,.65); border: 1px solid rgba(184,148,84,.45); border-radius: 14px; color: #183b55; font-family: Georgia, "Times New Roman", serif; font-size: 9px; font-weight: 700; } /* ========================================================== TÍTULO DE LA LISTA ========================================================== */ .bz-moadim2-list-title { padding: 12px 10px 8px; color: #9c681f; font-family: Georgia, "Times New Roman", serif; font-size: 9px; font-weight: 700; letter-spacing: .8px; text-align: center; } /* ========================================================== LISTA DE MO'ADIM ========================================================== */ .bz-moadim2-list { padding: 0 10px 12px; } /* ELEMENTO */ .bz-moadim2-item { position: relative; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 6px; padding: 6px 9px; background: rgba(255,255,255,.70); border: 1px solid rgba(16,42,64,.07); border-radius: 7px; box-shadow: 0 2px 7px rgba(16,42,64,.04); box-sizing: border-box; } /* ACTIVO / PRÓXIMO */ .bz-moadim2-item.is-next { background: #fff8e7; border: 1px solid #d69b39; border-left: 3px solid #c6811d; box-shadow: 0 3px 10px rgba(184,148,84,.15); } /* ICONO */ .bz-moadim2-item-icon { text-align: center; font-size: 15px; } /* DATOS */ .bz-moadim2-item-data { min-width: 0; text-align: center; } /* NOMBRE */ .bz-moadim2-item-name { color: #17364e; font-family: Georgia, "Times New Roman", serif; font-size: 10px; font-weight: 700; line-height: 1.25; } .bz-moadim2-item.is-next .bz-moadim2-item-name { color: #895315; } /* HEBREO */ .bz-moadim2-item-hebrew { margin-top: 2px; color: #8c7a62; font-size: 7px; line-height: 1.2; } /* FECHA DERECHA */ .bz-moadim2-item-date { min-width: 35px; padding: 3px 5px; background: #f4f6f7; border-radius: 10px; color: #687780; font-size: 7px; text-align: center; white-space: nowrap; } .bz-moadim2-item.is-next .bz-moadim2-item-date { background: #fff0c6; color: #875315; } /* CARGANDO */ .bz-moadim2-loading { padding: 15px; color: #777; font-size: 11px; text-align: center; } /* ========================================================== HOVER ========================================================== */ @media (hover:hover) and (pointer:fine) { .bz-moadim2 { transition: transform .3s ease, box-shadow .3s ease; } .bz-moadim2:hover { transform: translateY(-3px); box-shadow: 0 13px 30px rgba(16,42,64,.16); } .bz-moadim2-item { transition: transform .2s ease, background-color .2s ease; } .bz-moadim2-item:hover { transform: translateX(2px); background: #fffaf0; } } /* ========================================================== MÓVIL ========================================================== */ @media (max-width:767px) { .bz-moadim2-next { margin: 10px 8px 0; } .bz-moadim2-list { padding: 0 8px 10px; } .bz-moadim2-next-name { font-size: 18px; } .bz-moadim2-time strong { font-size: 16px; } }/* ========================================================== BENEYTZION · REUNIÓN SEMANAL · SHABAT ========================================================== */ .bz-reunion { width: 100%; margin: 0 0 28px; overflow: hidden; background: linear-gradient( 145deg, #ffffff 0%, #fbf7ed 100% ); border: 1px solid rgba(184,148,84,.58); border-radius: 9px; box-shadow: 0 8px 24px rgba(16,42,64,.12); box-sizing: border-box; } /* ========================================================== CABECERA ========================================================== */ .bz-reunion-cabecera { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 15px; background: linear-gradient( 135deg, #092338 0%, #173d59 52%, #102a40 100% ); border-bottom: 2px solid #b89454; text-align: left; } .bz-reunion-cabecera::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(212,183,124,.9), transparent ); } /* ICONO */ .bz-reunion-icono { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex: 0 0 31px; border: 1px solid rgba(212,183,124,.8); border-radius: 7px; background: rgba(255,255,255,.07); font-size: 17px; } /* TÍTULO */ .bz-reunion-titulo { color: #f5e3b9; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 700; letter-spacing: .9px; line-height: 1.15; } /* SHABAT */ .bz-reunion-subtitulo { margin-top: 2px; color: rgba(255,255,255,.72); font-family: Georgia, "Times New Roman", serif; font-size: 9px; font-style: italic; letter-spacing: 1.2px; } /* ========================================================== CONTENIDO ========================================================== */ .bz-reunion-contenido { padding: 17px 16px 19px; box-sizing: border-box; } /* ========================================================== SÁBADOS 11:00 ========================================================== */ .bz-reunion-destacado { padding: 14px 12px; background: linear-gradient( 145deg, #fffdfa, #fff8e9 ); border: 1px solid rgba(184,148,84,.38); border-radius: 8px; text-align: center; } .bz-reunion-dia { color: #102a40; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 700; } .bz-reunion-hora { margin-top: 2px; color: #b07829; font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 700; } .bz-reunion-hebreo { margin-top: 5px; color: #a77a38; font-size: 12px; } /* ========================================================== SEPARADOR ========================================================== */ .bz-reunion-separador { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 13px auto; } .bz-reunion-separador span { width: 55px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(184,148,84,.55) ); } .bz-reunion-separador span:last-child { background: linear-gradient( 90deg, rgba(184,148,84,.55), transparent ); } .bz-reunion-separador b { color: #b89454; font-size: 6px; } /* ========================================================== FILAS DE INFORMACIÓN ========================================================== */ .bz-reunion-dato { display: flex; align-items: flex-start; gap: 11px; padding: 10px 3px; border-bottom: 1px solid rgba(184,148,84,.20); } .bz-reunion-dato:last-of-type { border-bottom: 0; } /* ICONO */ .bz-reunion-dato-icono { display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; flex: 0 0 29px; background: #f7f2e8; border: 1px solid rgba(184,148,84,.32); border-radius: 50%; color: #a8752e; font-size: 13px; } /* TEXTO */ .bz-reunion-dato-texto { min-width: 0; color: #53616b; font-size: 11px; line-height: 1.55; } .bz-reunion-dato-texto strong { display: block; margin-bottom: 2px; color: #102a40; font-family: Georgia, "Times New Roman", serif; font-size: 11px; font-weight: 700; } .bz-reunion-dato-texto span { display: block; } /* ENLACES */ .bz-reunion-dato-texto a { color: #95651f !important; font-weight: 600; text-decoration: none !important; overflow-wrap: anywhere; } .bz-reunion-dato-texto a:hover { color: #102a40 !important; text-decoration: underline !important; } /* ========================================================== BOTÓN MAPA ========================================================== */ .bz-reunion-mapa { display: block; margin-top: 14px; padding: 8px 12px; background: linear-gradient( 135deg, #102a40, #173d59 ); border: 1px solid #b89454; border-radius: 20px; color: #f5e3b9 !important; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-align: center; text-decoration: none !important; box-shadow: 0 4px 10px rgba(16,42,64,.12); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .bz-reunion-mapa:hover { background: linear-gradient( 135deg, #173d59, #214f70 ); color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 7px 15px rgba(16,42,64,.18); } /* ========================================================== HOVER DEL WIDGET ========================================================== */ @media (hover:hover) and (pointer:fine) { .bz-reunion { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .bz-reunion:hover { transform: translateY(-3px); border-color: rgba(184,148,84,.80); box-shadow: 0 13px 30px rgba(16,42,64,.16); } } /* ========================================================== MÓVIL ========================================================== */ @media (max-width:767px) { .bz-reunion-cabecera { padding: 12px 13px; } .bz-reunion-titulo { font-size: 13px; } .bz-reunion-contenido { padding: 15px 14px 17px; } .bz-reunion-dia { font-size: 19px; } .bz-reunion-hora { font-size: 17px; } }/* ========================================================== BENEYTZION · CONTÁCTANOS ========================================================== */ .bz-contacto { width: 100%; margin: 0 0 28px; overflow: hidden; background: linear-gradient( 145deg, #ffffff 0%, #fbf7ed 100% ); border: 1px solid rgba(184,148,84,.58); border-radius: 9px; box-shadow: 0 8px 24px rgba(16,42,64,.12); box-sizing: border-box; } /* ========================================================== CABECERA ========================================================== */ .bz-contacto-cabecera { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 15px; background: linear-gradient( 135deg, #092338 0%, #173d59 52%, #102a40 100% ); border-bottom: 2px solid #b89454; text-align: left; } .bz-contacto-cabecera::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(212,183,124,.9), transparent ); } /* ICONO CABECERA */ .bz-contacto-icono { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex: 0 0 31px; border: 1px solid rgba(212,183,124,.8); border-radius: 7px; background: rgba(255,255,255,.07); font-size: 16px; } /* TÍTULO */ .bz-contacto-titulo { color: #f5e3b9; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; line-height: 1.15; } /* SUBTÍTULO */ .bz-contacto-subtitulo { margin-top: 2px; color: rgba(255,255,255,.70); font-family: Georgia, "Times New Roman", serif; font-size: 9px; font-style: italic; } /* ========================================================== CONTENIDO ========================================================== */ .bz-contacto-contenido { padding: 17px 15px 16px; box-sizing: border-box; } /* INTRO */ .bz-contacto-intro { color: #102a40; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 700; text-align: center; } /* LÍNEA */ .bz-contacto-linea { width: 62px; height: 1px; margin: 10px auto 13px; background: linear-gradient( 90deg, transparent, #b89454, transparent ); } /* ========================================================== OPCIONES ========================================================== */ .bz-contacto-opcion { display: flex; align-items: center; gap: 10px; min-height: 50px; margin-bottom: 8px; padding: 8px 10px; background: rgba(255,255,255,.74); border: 1px solid rgba(184,148,84,.25); border-radius: 7px; color: #26333d !important; text-decoration: none !important; box-shadow: 0 2px 7px rgba(16,42,64,.04); box-sizing: border-box; transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease; } /* ICONO */ .bz-contacto-opcion-icono { display: flex; align-items: center; justify-content: center; width: 33px; height: 33px; flex: 0 0 33px; background: #f7f2e8; border: 1px solid rgba(184,148,84,.34); border-radius: 50%; font-size: 15px; } /* TEXTO */ .bz-contacto-opcion-texto { flex: 1; min-width: 0; line-height: 1.25; } .bz-contacto-opcion-texto strong { display: block; color: #102a40; font-family: Georgia, "Times New Roman", serif; font-size: 11px; font-weight: 700; } .bz-contacto-opcion-texto small { display: block; margin-top: 3px; color: #6f777c; font-size: 9px; overflow-wrap: anywhere; } /* FLECHA */ .bz-contacto-flecha { color: #b17c2e; font-family: Georgia, serif; font-size: 22px; line-height: 1; } /* ========================================================== WHATSAPP DESTACADO ========================================================== */ .bz-contacto-whatsapp { background: linear-gradient( 145deg, #fffdf8, #fff8e8 ); border: 1px solid rgba(184,148,84,.55); } .bz-contacto-whatsapp .bz-contacto-opcion-icono { background: #eef7ee; border-color: rgba(83,130,83,.25); } /* ========================================================== FINAL HEBREO ========================================================== */ .bz-contacto-final { margin-top: 11px; color: #b89454; font-family: Georgia, "Times New Roman", serif; font-size: 15px; text-align: center; } /* ========================================================== HOVER ========================================================== */ @media (hover:hover) and (pointer:fine) { .bz-contacto { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .bz-contacto:hover { transform: translateY(-3px); border-color: rgba(184,148,84,.80); box-shadow: 0 13px 30px rgba(16,42,64,.16); } .bz-contacto-opcion:hover { transform: translateX(3px); background: #fffaf0; border-color: rgba(184,148,84,.60); box-shadow: 0 4px 10px rgba(16,42,64,.07); } } /* ========================================================== MÓVIL ========================================================== */ @media (max-width:767px) { .bz-contacto-cabecera { padding: 12px 13px; } .bz-contacto-titulo { font-size: 13px; } .bz-contacto-contenido { padding: 15px 13px; } .bz-contacto-opcion { min-height: 48px; } }/* ICONO OFICIAL DE WHATSAPP */ .bz-whatsapp-icono { background: #25D366 !important; border-color: #25D366 !important; } .bz-whatsapp-icono svg { display: block; width: 19px; height: 19px; fill: #ffffff; }/* ========================================================== BENEYTZION · SITIOS DE INTERÉS ========================================================== */ .bz-sitios { width: 100%; margin: 0 0 28px; overflow: hidden; background: linear-gradient( 145deg, #ffffff 0%, #fbf7ed 100% ); border: 1px solid rgba(184,148,84,.58); border-radius: 9px; box-shadow: 0 8px 24px rgba(16,42,64,.12); box-sizing: border-box; } /* ========================================================== CABECERA ========================================================== */ .bz-sitios-cabecera { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 15px; background: linear-gradient( 135deg, #092338 0%, #173d59 52%, #102a40 100% ); border-bottom: 2px solid #b89454; text-align: left; } .bz-sitios-cabecera::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(212,183,124,.9), transparent ); } /* ICONO CABECERA */ .bz-sitios-icono { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex: 0 0 31px; border: 1px solid rgba(212,183,124,.8); border-radius: 7px; background: rgba(255,255,255,.07); font-size: 16px; } /* TÍTULO */ .bz-sitios-titulo { color: #f5e3b9; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; line-height: 1.15; } /* SUBTÍTULO */ .bz-sitios-subtitulo { margin-top: 2px; color: rgba(255,255,255,.70); font-family: Georgia, "Times New Roman", serif; font-size: 8px; font-style: italic; } /* ========================================================== CONTENIDO ========================================================== */ .bz-sitios-contenido { padding: 17px 15px 16px; box-sizing: border-box; } /* INTRODUCCIÓN */ .bz-sitios-intro { color: #53616b; font-family: Georgia, "Times New Roman", serif; font-size: 12px; font-style: italic; line-height: 1.55; text-align: center; } /* ========================================================== SEPARADOR ========================================================== */ .bz-sitios-separador { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px auto 13px; } .bz-sitios-separador span { width: 48px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(184,148,84,.60) ); } .bz-sitios-separador span:last-child { background: linear-gradient( 90deg, rgba(184,148,84,.60), transparent ); } .bz-sitios-separador b { color: #b89454; font-size: 6px; } /* ========================================================== ENLACES ========================================================== */ .bz-sitios-enlace { display: flex; align-items: center; gap: 10px; min-height: 55px; margin-bottom: 8px; padding: 9px 10px; background: rgba(255,255,255,.75); border: 1px solid rgba(184,148,84,.26); border-radius: 7px; color: #26333d !important; text-decoration: none !important; box-shadow: 0 2px 7px rgba(16,42,64,.04); box-sizing: border-box; transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease; } /* ICONO DE CADA SITIO */ .bz-sitios-enlace-icono { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; background: linear-gradient( 145deg, #fffaf0, #f7f0df ); border: 1px solid rgba(184,148,84,.38); border-radius: 50%; font-size: 15px; } /* TEXTO */ .bz-sitios-enlace-texto { flex: 1; min-width: 0; line-height: 1.3; } .bz-sitios-enlace-texto strong { display: block; color: #102a40; font-family: Georgia, "Times New Roman", serif; font-size: 11px; font-weight: 700; } .bz-sitios-enlace-texto small { display: block; margin-top: 3px; color: #777d80; font-size: 8px; font-style: italic; } /* FLECHA */ .bz-sitios-flecha { color: #b17c2e; font-family: Georgia, serif; font-size: 22px; line-height: 1; } /* ========================================================== TEXTO HEBREO FINAL ========================================================== */ .bz-sitios-final { margin-top: 12px; color: #b89454; font-family: Georgia, "Times New Roman", serif; font-size: 14px; text-align: center; } /* ========================================================== HOVER ========================================================== */ @media (hover:hover) and (pointer:fine) { .bz-sitios { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .bz-sitios:hover { transform: translateY(-3px); border-color: rgba(184,148,84,.80); box-shadow: 0 13px 30px rgba(16,42,64,.16); } .bz-sitios-enlace:hover { transform: translateX(3px); background: #fffaf0; border-color: rgba(184,148,84,.62); box-shadow: 0 4px 10px rgba(16,42,64,.07); } .bz-sitios-enlace:hover .bz-sitios-enlace-texto strong { color: #9a6824; } } /* ========================================================== MÓVIL ========================================================== */ @media (max-width:767px) { .bz-sitios-cabecera { padding: 12px 13px; } .bz-sitios-titulo { font-size: 13px; } .bz-sitios-contenido { padding: 15px 13px; } .bz-sitios-enlace { min-height: 52px; } }/* ========================================================== BENEYTZION · DÓNDE ENCONTRARNOS ========================================================== */ .bz-mapa { width: 100%; margin: 0 0 28px; overflow: hidden; background: linear-gradient( 145deg, #ffffff 0%, #fbf7ed 100% ); border: 1px solid rgba(184,148,84,.60); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,42,64,.12); box-sizing: border-box; } /* ========================================================== CABECERA ========================================================== */ .bz-mapa-cabecera { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 15px; background: linear-gradient( 135deg, #092338 0%, #173d59 52%, #102a40 100% ); border-bottom: 2px solid #b89454; text-align: left; } .bz-mapa-cabecera::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(212,183,124,.9), transparent ); } .bz-mapa-icono { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex: 0 0 31px; background: rgba(255,255,255,.07); border: 1px solid rgba(212,183,124,.80); border-radius: 7px; font-size: 16px; } .bz-mapa-titulo { color: #f5e3b9; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; line-height: 1.15; } .bz-mapa-subtitulo { margin-top: 2px; color: rgba(255,255,255,.70); font-family: Georgia, "Times New Roman", serif; font-size: 9px; font-style: italic; } /* ========================================================== CONTENIDO ========================================================== */ .bz-mapa-contenido { padding: 16px; box-sizing: border-box; } /* ========================================================== DIRECCIÓN ========================================================== */ .bz-mapa-direccion { margin-bottom: 14px; padding: 13px 14px; background: linear-gradient( 145deg, #fffdfa, #fff7e7 ); border: 1px solid rgba(184,148,84,.37); border-radius: 8px; text-align: center; } .bz-mapa-direccion-titulo { color: #102a40; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 700; } .bz-mapa-horario { margin-top: 3px; color: #a86f23; font-family: Georgia, "Times New Roman", serif; font-size: 13px; font-weight: 700; } .bz-mapa-linea { width: 60px; height: 1px; margin: 9px auto; background: linear-gradient( 90deg, transparent, #b89454, transparent ); } .bz-mapa-direccion-texto { color: #59646c; font-size: 11px; line-height: 1.55; } /* ========================================================== MARCO DEL MAPA ========================================================== */ .bz-mapa-marco { position: relative; overflow: hidden; border: 2px solid rgba(184,148,84,.68); border-radius: 9px; background: #f7f2e8; box-shadow: 0 5px 14px rgba(16,42,64,.10); } .bz-mapa-marco::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; background: linear-gradient( 90deg, #102a40, #b89454, #102a40 ); } .bz-mapa-marco iframe { display: block; width: 100% !important; height: 330px; border: 0 !important; } /* ========================================================== BOTÓN CÓMO LLEGAR ========================================================== */ .bz-mapa-boton { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; padding: 9px 14px; background: linear-gradient( 135deg, #102a40, #173d59 ); border: 1px solid #b89454; border-radius: 22px; color: #f5e3b9 !important; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-align: center; text-decoration: none !important; box-shadow: 0 4px 11px rgba(16,42,64,.14); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .bz-mapa-boton-icono { font-size: 12px; } .bz-mapa-boton:hover { background: linear-gradient( 135deg, #173d59, #214f70 ); color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 7px 16px rgba(16,42,64,.19); } /* ========================================================== CONTACTO ========================================================== */ .bz-mapa-contacto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; color: #b89454; font-size: 9px; text-align: center; } .bz-mapa-contacto a { color: #6e7477 !important; text-decoration: none !important; } .bz-mapa-contacto a:hover { color: #9b6924 !important; text-decoration: underline !important; } /* ========================================================== HEBREO ========================================================== */ .bz-mapa-hebreo { margin-top: 12px; color: #b89454; font-family: Georgia, "Times New Roman", serif; font-size: 14px; text-align: center; } /* ========================================================== EFECTO ESCRITORIO ========================================================== */ @media (hover:hover) and (pointer:fine) { .bz-mapa { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .bz-mapa:hover { transform: translateY(-3px); border-color: rgba(184,148,84,.82); box-shadow: 0 13px 30px rgba(16,42,64,.16); } } /* ========================================================== TABLET ========================================================== */ @media (max-width:1000px) { .bz-mapa-marco iframe { height: 300px; } } /* ========================================================== MÓVIL ========================================================== */ @media (max-width:767px) { .bz-mapa-cabecera { padding: 12px 13px; } .bz-mapa-titulo { font-size: 13px; } .bz-mapa-contenido { padding: 14px; } .bz-mapa-direccion-titulo { font-size: 14px; } .bz-mapa-marco iframe { height: 260px; } .bz-mapa-contacto { gap: 5px; } }/* ========================================================== BENEYTZION · SÍGUENOS EN YOUTUBE ========================================================== */ .bz-youtube { width: 100%; margin: 0 0 28px; overflow: hidden; background: linear-gradient( 145deg, #ffffff 0%, #fbf7ed 100% ); border: 1px solid rgba(184,148,84,.58); border-radius: 9px; box-shadow: 0 8px 24px rgba(16,42,64,.12); box-sizing: border-box; } /* ========================================================== CABECERA ========================================================== */ .bz-youtube-cabecera { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 15px; background: linear-gradient( 135deg, #092338 0%, #173d59 52%, #102a40 100% ); border-bottom: 2px solid #b89454; text-align: left; } .bz-youtube-cabecera::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(212,183,124,.90), transparent ); } /* ICONO YOUTUBE DE CABECERA */ .bz-youtube-icono-cabecera { display: flex; align-items: center; justify-content: center; width: 32px; height: 25px; flex: 0 0 32px; background: #ff0000; border-radius: 7px; box-shadow: 0 2px 6px rgba(0,0,0,.20); } .bz-youtube-icono-cabecera svg { display: block; width: 20px; height: 20px; fill: #ffffff; } /* TÍTULO */ .bz-youtube-titulo { color: #f5e3b9; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; line-height: 1.15; } /* SUBTÍTULO */ .bz-youtube-subtitulo { margin-top: 2px; color: rgba(255,255,255,.70); font-family: Georgia, "Times New Roman", serif; font-size: 9px; font-style: italic; } /* ========================================================== CONTENIDO ========================================================== */ .bz-youtube-contenido { position: relative; padding: 19px 16px 17px; text-align: center; box-sizing: border-box; } /* ========================================================== LOGO REAL BENEY TZION ========================================================== */ .bz-youtube-logo { display: block; width: 175px; max-width: 78%; margin: 0 auto 13px; padding: 7px; overflow: hidden; background: linear-gradient( 145deg, #fffdf8, #f6eddc ); border: 1px solid rgba(184,148,84,.62); border-radius: 10px; box-shadow: 0 5px 15px rgba(16,42,64,.11); box-sizing: border-box; text-decoration: none !important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .bz-youtube-logo img { display: block; width: 100% !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; } /* ========================================================== SEPARADOR DORADO ========================================================== */ .bz-youtube-separador { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 13px auto 12px; } .bz-youtube-separador span { width: 48px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(184,148,84,.68) ); } .bz-youtube-separador span:last-child { background: linear-gradient( 90deg, rgba(184,148,84,.68), transparent ); } .bz-youtube-separador b { color: #b89454; font-size: 6px; } /* ========================================================== MENSAJE ========================================================== */ .bz-youtube-mensaje { margin-bottom: 15px; font-family: Georgia, "Times New Roman", serif; text-align: center; } .bz-youtube-mensaje strong { display: block; margin-bottom: 5px; color: #102a40; font-size: 13px; font-weight: 700; } .bz-youtube-mensaje span { display: block; color: #6e767b; font-size: 10px; font-style: italic; line-height: 1.55; } /* ========================================================== BOTÓN YOUTUBE ========================================================== */ .bz-youtube-boton { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 13px; background: linear-gradient( 135deg, #b2071d 0%, #e00000 45%, #ff0000 100% ); border: 1px solid rgba(125,0,0,.40); border-radius: 24px; color: #ffffff !important; text-decoration: none !important; box-shadow: 0 5px 13px rgba(150,0,0,.20); box-sizing: border-box; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } /* ICONO DEL BOTÓN */ .bz-youtube-boton-icono { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; } .bz-youtube-boton-icono svg { display: block; width: 22px; height: 22px; fill: #ffffff; } /* TEXTO BOTÓN */ .bz-youtube-boton-texto { color: #ffffff; font-size: 9px; font-weight: 700; letter-spacing: .8px; } /* ========================================================== NOMBRE DEL CANAL ========================================================== */ .bz-youtube-canal { margin-top: 10px; color: #85898b; font-size: 9px; letter-spacing: .3px; } /* ========================================================== HEBREO ========================================================== */ .bz-youtube-final { margin-top: 11px; color: #b89454; font-family: Georgia, "Times New Roman", serif; font-size: 14px; } /* ========================================================== EFECTOS EN ORDENADOR ========================================================== */ @media (hover:hover) and (pointer:fine) { .bz-youtube { transition: transform .30s ease, box-shadow .30s ease, border-color .30s ease; } .bz-youtube:hover { transform: translateY(-3px); border-color: rgba(184,148,84,.82); box-shadow: 0 13px 30px rgba(16,42,64,.16); } .bz-youtube-logo:hover { transform: scale(1.025); border-color: rgba(184,148,84,.88); box-shadow: 0 7px 18px rgba(16,42,64,.15); } .bz-youtube-boton:hover { color: #ffffff !important; transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 8px 18px rgba(150,0,0,.27); } } /* ========================================================== MÓVIL ========================================================== */ @media (max-width:767px) { .bz-youtube-cabecera { padding: 12px 13px; } .bz-youtube-titulo { font-size: 13px; } .bz-youtube-contenido { padding: 17px 14px 15px; } .bz-youtube-logo { width: 160px; max-width: 80%; } .bz-youtube-mensaje strong { font-size: 12px; } .bz-youtube-boton { padding: 10px 11px; } }/* ========================================================== BENEYTZION · WIDGET ÚLTIMAS ENTRADAS ========================================================== */ /* CONTENEDOR */ .widget_recent_entries { overflow: hidden; margin-bottom: 28px !important; background: rgba(255,255,255,.52) !important; border: 1px solid rgba(184,148,84,.48) !important; border-radius: 9px; box-shadow: 0 7px 20px rgba(16,42,64,.09); box-sizing: border-box; } /* ========================================================== TÍTULO DEL WIDGET ========================================================== */ .widget_recent_entries .widget-title { position: relative; margin: 0 !important; padding: 13px 15px !important; background: linear-gradient( 135deg, #092338 0%, #173d59 52%, #102a40 100% ) !important; border-bottom: 2px solid #b89454; color: #f5e3b9 !important; font-family: Georgia, "Times New Roman", serif; font-size: 14px !important; font-weight: 700; letter-spacing: .9px; text-align: center; text-transform: uppercase; } /* ADORNO DORADO */ .widget_recent_entries .widget-title::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 2px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(212,183,124,.85), transparent ); } /* ========================================================== LISTA ========================================================== */ .widget_recent_entries ul { margin: 0 !important; padding: 13px 14px 14px !important; list-style: none !important; background: transparent !important; } /* ========================================================== CADA ENTRADA ========================================================== */ .widget_recent_entries li { position: relative; margin: 0 !important; padding: 11px 8px 11px 25px !important; border-bottom: 1px solid rgba(184,148,84,.22); line-height: 1.35; } /* ÚLTIMA ENTRADA SIN BORDE */ .widget_recent_entries li:last-child { border-bottom: 0; } /* PEQUEÑO ADORNO */ .widget_recent_entries li::before { content: "◆"; position: absolute; left: 6px; top: 14px; color: #b89454; font-size: 7px; } /* ========================================================== ENLACES ========================================================== */ .widget_recent_entries li a { display: block; color: #102a40 !important; font-family: Georgia, "Times New Roman", serif; font-size: 12px; font-weight: 700; line-height: 1.4; text-decoration: none !important; transition: color .22s ease, transform .22s ease; } /* ========================================================== FECHA ========================================================== */ .widget_recent_entries .post-date { display: block; margin-top: 4px; color: #8b8172; font-size: 9px; font-style: italic; letter-spacing: .2px; } /* ========================================================== HOVER ========================================================== */ @media (hover:hover) and (pointer:fine) { .widget_recent_entries { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .widget_recent_entries:hover { transform: translateY(-3px); border-color: rgba(184,148,84,.75) !important; box-shadow: 0 11px 25px rgba(16,42,64,.13); } .widget_recent_entries li:hover { background: rgba(184,148,84,.07); } .widget_recent_entries li a:hover { color: #9a6d29 !important; transform: translateX(3px); } } /* ========================================================== MÓVIL ========================================================== */ @media (max-width:767px) { .widget_recent_entries .widget-title { padding: 12px 13px !important; font-size: 13px !important; } .widget_recent_entries ul { padding: 11px 12px 12px !important; } .widget_recent_entries li a { font-size: 11px; } }/* ========================================================== BENEYTZION · WIDGET BUSCAR ========================================================== */ /* CONTENEDOR DEL WIDGET */ .widget_search, .widget .wp-block-search { overflow: hidden; margin-bottom: 28px !important; background: rgba(255,255,255,.58) !important; border: 1px solid rgba(184,148,84,.50) !important; border-radius: 9px; box-shadow: 0 7px 20px rgba(16,42,64,.09); box-sizing: border-box; } /* ========================================================== TÍTULO ========================================================== */ .widget_search .widget-title, .widget_search .wp-block-heading, .widget .wp-block-search__label { display: block; margin: 0 !important; padding: 13px 15px !important; background: linear-gradient( 135deg, #092338 0%, #173d59 52%, #102a40 100% ) !important; border-bottom: 2px solid #b89454; color: #f5e3b9 !important; font-family: Georgia, "Times New Roman", serif; font-size: 14px !important; font-weight: 700; letter-spacing: 1px; line-height: 1.2; text-align: center; text-transform: uppercase; } /* ========================================================== FORMULARIO ========================================================== */ .widget_search form, .widget .wp-block-search form, .widget .wp-block-search__inside-wrapper { display: flex; align-items: stretch; gap: 7px; margin: 0 !important; padding: 16px 14px !important; background: transparent !important; border: 0 !important; box-sizing: border-box; } /* ========================================================== CAMPO DE BÚSQUEDA ========================================================== */ .widget_search input[type="search"], .widget_search .search-field, .wp-block-search__input { width: 100%; min-width: 0; padding: 10px 12px !important; background: rgba(255,255,255,.70) !important; border: 1px solid rgba(184,148,84,.48) !important; border-radius: 6px !important; outline: none; color: #102a40 !important; font-family: Georgia, "Times New Roman", serif; font-size: 11px !important; line-height: 1.3; box-shadow: inset 0 1px 3px rgba(16,42,64,.04); box-sizing: border-box; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; } /* PLACEHOLDER */ .widget_search input[type="search"]::placeholder, .widget_search .search-field::placeholder, .wp-block-search__input::placeholder { color: #918777 !important; opacity: 1; font-style: italic; } /* CAMPO ACTIVO */ .widget_search input[type="search"]:focus, .widget_search .search-field:focus, .wp-block-search__input:focus { background: rgba(255,255,255,.90) !important; border-color: #b89454 !important; box-shadow: 0 0 0 2px rgba(184,148,84,.12); } /* ========================================================== BOTÓN BUSCAR ========================================================== */ .widget_search button, .widget_search input[type="submit"], .widget .wp-block-search__button { flex: 0 0 auto; margin: 0 !important; padding: 9px 13px !important; background: linear-gradient( 135deg, #102a40 0%, #173d59 100% ) !important; border: 1px solid #b89454 !important; border-radius: 6px !important; color: #f5e3b9 !important; font-family: Georgia, "Times New Roman", serif; font-size: 10px !important; font-weight: 700; letter-spacing: .5px; line-height: 1.2; text-transform: uppercase; cursor: pointer; box-shadow: 0 3px 8px rgba(16,42,64,.13); transition: transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease; } /* ========================================================== ICONO DEL BLOQUE DE WORDPRESS ========================================================== */ .wp-block-search__button svg { fill: #f5e3b9 !important; width: 18px; height: 18px; } /* ========================================================== HOVER ========================================================== */ @media (hover:hover) and (pointer:fine) { .widget_search, .widget .wp-block-search { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .widget_search:hover, .widget .wp-block-search:hover { transform: translateY(-3px); border-color: rgba(184,148,84,.76) !important; box-shadow: 0 11px 25px rgba(16,42,64,.13); } .widget_search button:hover, .widget_search input[type="submit"]:hover, .widget .wp-block-search__button:hover { background: linear-gradient( 135deg, #173d59 0%, #214f6d 100% ) !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 5px 11px rgba(16,42,64,.18); } } /* ========================================================== MÓVIL ========================================================== */ @media (max-width:767px) { .widget_search .widget-title, .widget_search .wp-block-heading, .widget .wp-block-search__label { padding: 12px 13px !important; font-size: 13px !important; } .widget_search form, .widget .wp-block-search form, .widget .wp-block-search__inside-wrapper { padding: 13px 12px !important; } .widget_search input[type="search"], .widget_search .search-field, .wp-block-search__input { font-size: 11px !important; } .widget_search button, .widget_search input[type="submit"], .widget .wp-block-search__button { padding: 9px 11px !important; font-size: 9px !important; } }/* ===================================================== BENEY TZION - FORMULARIO PREGUNTAS Y RESPUESTAS Jetpack / WordPress Form ===================================================== */ /* Contenedor del formulario */ body.page-id-0 .wp-block-jetpack-contact-form, body .wp-block-jetpack-contact-form { max-width: 820px; margin: 40px auto; padding: 38px 40px; background: #fffaf1; border: 1px solid rgba(177, 126, 43, 0.35); border-radius: 18px; box-shadow: 0 20px 50px rgba(8, 31, 55, 0.10), 0 2px 8px rgba(8, 31, 55, 0.05); } /* Espacio entre campos */ .wp-block-jetpack-contact-form .grunion-field-wrap, .wp-block-jetpack-contact-form .contact-form__input-wrapper { margin-bottom: 24px !important; } /* ===================================================== ETIQUETAS ===================================================== */ .wp-block-jetpack-contact-form label, .wp-block-jetpack-contact-form .grunion-field-label { display: block !important; margin-bottom: 9px !important; color: #102d49 !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.03em; } /* "obligatorio" */ .wp-block-jetpack-contact-form .grunion-label-required, .wp-block-jetpack-contact-form .required { color: #a4772c !important; font-weight: 500 !important; } /* ===================================================== INPUTS Y TEXTAREA ===================================================== */ .wp-block-jetpack-contact-form input[type="text"], .wp-block-jetpack-contact-form input[type="email"], .wp-block-jetpack-contact-form input[type="tel"], .wp-block-jetpack-contact-form input[type="url"], .wp-block-jetpack-contact-form textarea, .wp-block-jetpack-contact-form select, .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { box-sizing: border-box !important; width: 100% !important; padding: 15px 17px !important; background: #ffffff !important; color: #172738 !important; border: 1px solid #d7c9ae !important; border-radius: 9px !important; font-size: 16px !important; line-height: 1.5 !important; box-shadow: none !important; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease !important; } /* Pregunta: hacerlo más grande */ .wp-block-jetpack-contact-form textarea, .contact-form textarea { min-height: 190px !important; resize: vertical !important; } /* Placeholder */ .wp-block-jetpack-contact-form input::placeholder, .wp-block-jetpack-contact-form textarea::placeholder { color: #8d9399 !important; opacity: 1 !important; } /* Focus */ .wp-block-jetpack-contact-form input:focus, .wp-block-jetpack-contact-form textarea:focus, .wp-block-jetpack-contact-form select:focus { outline: none !important; border-color: #b37b27 !important; box-shadow: 0 0 0 3px rgba(179, 123, 39, 0.13) !important; background: #ffffff !important; } /* ===================================================== BOTÓN ===================================================== */ .wp-block-jetpack-contact-form button[type="submit"], .wp-block-jetpack-contact-form input[type="submit"], .contact-form button[type="submit"], .contact-form input[type="submit"] { width: auto !important; min-width: 220px !important; padding: 15px 30px !important; background: linear-gradient( 135deg, #0c2844, #153e63 ) !important; color: #ffffff !important; border: 1px solid #0c2844 !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: 0 8px 18px rgba(12, 40, 68, 0.18) !important; transition: all .25s ease !important; } /* Hover */ .wp-block-jetpack-contact-form button[type="submit"]:hover, .wp-block-jetpack-contact-form input[type="submit"]:hover, .contact-form button[type="submit"]:hover, .contact-form input[type="submit"]:hover { background: linear-gradient( 135deg, #b07a29, #d0a14b ) !important; border-color: #b07a29 !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(12, 40, 68, 0.20) !important; } /* ===================================================== MENSAJE "GRACIAS POR TU RESPUESTA" ===================================================== */ .wp-block-jetpack-contact-form .contact-form-submission, .wp-block-jetpack-contact-form .wp-block-jetpack-contact-form-container { color: #102d49; } /* ===================================================== MÓVIL ===================================================== */ @media (max-width: 768px) { .wp-block-jetpack-contact-form { margin: 25px auto; padding: 25px 18px; border-radius: 12px; } .wp-block-jetpack-contact-form button[type="submit"], .wp-block-jetpack-contact-form input[type="submit"], .contact-form button[type="submit"], .contact-form input[type="submit"] { width: 100% !important; min-width: 0 !important; } } /* ========================================================== BENEYTZION — ENLACES DEL CONTENIDO Versión corregida y unificada ========================================================== */ /* Enlaces normales dentro del contenido. No afecta menú, cabecera, widgets ni botones de compartir. */ .entry-content a:not(.sd-button):not(.sharing-anchor):not(.wp-block-button__link), .post-content a:not(.sd-button):not(.sharing-anchor):not(.wp-block-button__link), .page-content a:not(.sd-button):not(.sharing-anchor):not(.wp-block-button__link) { color: #7b1726 !important; font-weight: 600; text-decoration: none !important; border-bottom: 1px solid rgba(198,162,83,.75); transition: color .20s ease, border-color .20s ease, background-color .20s ease; } .entry-content a:not(.sd-button):not(.sharing-anchor):not(.wp-block-button__link):hover, .post-content a:not(.sd-button):not(.sharing-anchor):not(.wp-block-button__link):hover, .page-content a:not(.sd-button):not(.sharing-anchor):not(.wp-block-button__link):hover { color: #9a6d29 !important; border-bottom-color: #9a6d29; } /* ========================================================== LISTAS DE ENLACES — TARJETAS ========================================================== */ .entry-content ul li > a:not(.sd-button):not(.sharing-anchor), .post-content ul li > a:not(.sd-button):not(.sharing-anchor), .page-content ul li > a:not(.sd-button):not(.sharing-anchor) { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 11px 18px; margin: 5px 0; background: #fffaf0 !important; color: #781727 !important; border: 1px solid #c99d3d !important; border-left: 5px solid #801526 !important; border-radius: 9px; box-shadow: 0 3px 9px rgba(0,0,0,.08); font-weight: 600; text-decoration: none !important; transition: transform .20s ease, background .20s ease, box-shadow .20s ease; } @media (hover:hover) and (pointer:fine) { .entry-content ul li > a:not(.sd-button):not(.sharing-anchor):hover, .post-content ul li > a:not(.sd-button):not(.sharing-anchor):hover, .page-content ul li > a:not(.sd-button):not(.sharing-anchor):hover { background: #801526 !important; color: #ffffff !important; border-color: #c69b3e !important; transform: translateX(4px); box-shadow: 0 6px 15px rgba(0,0,0,.14); } } /* ========================================================== PARASHOT — TARJETAS ESPECÍFICAS ========================================================== */ .entry-content a[href*="parash"], .entry-content a[href*="parasha"] { display: inline-block; max-width: 100%; box-sizing: border-box; background: #fff8e8 !important; color: #6f1020 !important; border: 1px solid #c6a253 !important; border-left: 6px solid #7a1425 !important; border-radius: 10px !important; box-shadow: 0 5px 14px rgba(70,40,20,.12) !important; padding: 13px 20px !important; text-decoration: none !important; font-weight: 600 !important; transition: transform .25s ease, background .25s ease, box-shadow .25s ease !important; } @media (hover:hover) and (pointer:fine) { .entry-content a[href*="parash"]:hover, .entry-content a[href*="parasha"]:hover { background: #7a1425 !important; color: #ffffff !important; border-color: #b68b36 !important; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(70,40,20,.17) !important; } } /* ========================================================== ENLACES PDF — MATERIAL DE ESTUDIO Un único botón visual "Descargar" ========================================================== */ /* Si por el editor quedó un segundo enlace consecutivo después del PDF, se oculta para evitar el botón duplicado. */ .entry-content p > a[href$=".pdf" i] ~ a { display: none !important; } /* Tarjeta del PDF */ .entry-content p > a[href$=".pdf" i]:first-of-type, .entry-content > a[href$=".pdf" i] { display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; max-width: 100% !important; box-sizing: border-box !important; padding: 10px 12px 10px 16px !important; margin: 5px 0 !important; background: #fffaf0 !important; color: #851626 !important; border: 1px solid #c99c3d !important; border-left: 6px solid #851626 !important; border-radius: 8px !important; box-shadow: 0 3px 8px rgba(0,0,0,.08) !important; font-weight: 600 !important; text-decoration: none !important; transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important; } /* Anula cualquier pseudo-elemento previo y crea SOLO uno */ .entry-content p > a[href$=".pdf" i]:first-of-type::before, .entry-content > a[href$=".pdf" i]::before { content: none !important; display: none !important; } .entry-content p > a[href$=".pdf" i]:first-of-type::after, .entry-content > a[href$=".pdf" i]::after { content: "↓ Descargar" !important; display: inline-block !important; flex: 0 0 auto !important; padding: 6px 11px !important; background: #851626 !important; color: #ffffff !important; border: 0 !important; border-radius: 5px !important; box-shadow: none !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap !important; } @media (hover:hover) and (pointer:fine) { .entry-content p > a[href$=".pdf" i]:first-of-type:hover, .entry-content > a[href$=".pdf" i]:hover { background: #fff3dc !important; color: #851626 !important; border-color: #b78a32 !important; border-left-color: #851626 !important; transform: translateX(2px); box-shadow: 0 5px 13px rgba(0,0,0,.12) !important; } } /* ========================================================== COMPARTIR / JETPACK — NO CONVERTIR EN TARJETAS ========================================================== */ .sd-content a, .sharedaddy a, .jetpack-sharing-buttons__button, .sd-content a:hover, .sharedaddy a:hover, .jetpack-sharing-buttons__button:hover { transform: none !important; } /* ========================================================== MÓVIL — ENLACES PDF ========================================================== */ @media (max-width: 600px) { .entry-content p > a[href$=".pdf" i]:first-of-type, .entry-content > a[href$=".pdf" i] { display: flex !important; width: 100% !important; gap: 10px !important; padding: 10px 10px 10px 14px !important; font-size: 14px !important; } .entry-content p > a[href$=".pdf" i]:first-of-type::after, .entry-content > a[href$=".pdf" i]::after { padding: 5px 8px !important; font-size: 11px !important; } } /* ========================================================== HAFTARAH SEMANAL — TARJETAS ========================================================== */ /* Contenedor */ .entry-content { box-sizing: border-box; } /* Enlaces de Haftarah */ .entry-content a[href*="haftarah"] { display: block !important; width: 100% !important; max-width: 100% !important; margin: 8px 0 !important; padding: 13px 16px !important; box-sizing: border-box !important; background: linear-gradient( 135deg, #fffdf8 0%, #fff6e5 100% ) !important; color: #831629 !important; border: 1px solid #d2a049 !important; border-left: 6px solid #831629 !important; border-radius: 8px !important; text-decoration: none !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.45 !important; white-space: normal !important; overflow-wrap: break-word !important; box-shadow: 0 3px 9px rgba(0,0,0,.06) !important; transition: all .2s ease !important; } /* Quitar pseudo-elementos añadidos por otros CSS */ .entry-content a[href*="haftarah"]::before, .entry-content a[href*="haftarah"]::after { content: none !important; display: none !important; } /* Hover */ .entry-content a[href*="haftarah"]:hover { background: #fff0d3 !important; color: #68101f !important; border-left-color: #68101f !important; transform: translateX(3px); box-shadow: 0 5px 13px rgba(0,0,0,.10) !important; } /* Quitar viñetas si están dentro de listas */ .entry-content ul, .entry-content ol { padding-left: 0 !important; } .entry-content li { list-style: none !important; } /* ========================================================== MÓVIL ========================================================== */ @media (max-width: 600px) { .entry-content a[href*="haftarah"] { padding: 11px 12px !important; font-size: 14px !important; border-left-width: 5px !important; margin: 6px 0 !important; } }/* ========================================================== BENEY TZION — CREEMOS VERSIÓN CLARA ========================================================== */ /* ========================================================== 1. VARIABLES ========================================================== */ #bt-creemos { --bt-navy: #16324f; --bt-blue: #254f73; --bt-blue-soft: #eaf1f6; --bt-gold: #b5903d; --bt-gold-light: #d7b968; --bt-gold-soft: #f6f0df; --bt-cream: #faf9f5; --bt-white: #ffffff; --bt-text: #394552; --bt-muted: #77818b; --bt-border: #e4dfd4; --bt-border-gold: rgba(181,144,61,.35); width: 100%; overflow: hidden; background: var(--bt-cream); color: var(--bt-text); font-family: Georgia, "Times New Roman", serif; line-height: 1.7; } #bt-creemos *, #bt-creemos *::before, #bt-creemos *::after { box-sizing: border-box; } #bt-creemos h1, #bt-creemos h2, #bt-creemos h3, #bt-creemos p, #bt-creemos blockquote { margin-top: 0; } #bt-creemos .bt-container { width: min(1160px, calc(100% - 50px)); margin-left: auto; margin-right: auto; position: relative; } /* ========================================================== 2. HERO ========================================================== */ #bt-creemos .bt-hero { position: relative; min-height: 650px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: radial-gradient( circle at 50% 10%, rgba(215,185,104,.18), transparent 30% ), linear-gradient( 180deg, #ffffff 0%, #f8f6f0 55%, #f2efe7 100% ); border-bottom: 1px solid var(--bt-border); } /* resplandor */ #bt-creemos .bt-hero::before { content: ""; position: absolute; width: 700px; height: 700px; top: -500px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient( circle, rgba(215,185,104,.35), transparent 68% ); } /* pequeño patrón */ #bt-creemos .bt-hero__overlay { position: absolute; inset: 0; opacity: .18; background-image: radial-gradient( circle, rgba(22,50,79,.25) 1px, transparent 1px ); background-size: 90px 90px; pointer-events: none; } #bt-creemos .bt-hero__content { position: relative; z-index: 2; max-width: 850px; padding-top: 90px; padding-bottom: 90px; } #bt-creemos .bt-hero__hebrew { margin-bottom: 16px; color: var(--bt-gold); font-size: 25px; letter-spacing: 8px; } #bt-creemos .bt-eyebrow { margin-bottom: 13px; color: var(--bt-blue); font-family: Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 5px; } /* CREEMOS */ #bt-creemos .bt-hero__title { margin: 0; color: var(--bt-navy); font-size: clamp(65px, 10vw, 120px); line-height: .95; font-weight: 400; letter-spacing: 7px; text-shadow: 0 2px 0 #fff, 0 8px 25px rgba(22,50,79,.08); } /* ========================================================== 3. ORNAMENTOS ========================================================== */ #bt-creemos .bt-ornament { display: flex; align-items: center; justify-content: center; gap: 15px; max-width: 290px; margin: 27px auto; } #bt-creemos .bt-ornament span { width: 95px; height: 1px; background: linear-gradient( 90deg, transparent, var(--bt-gold) ); } #bt-creemos .bt-ornament span:last-child { background: linear-gradient( 90deg, var(--bt-gold), transparent ); } #bt-creemos .bt-ornament b { color: var(--bt-gold); font-size: 12px; } /* ========================================================== 4. HERO TEXTO ========================================================== */ #bt-creemos .bt-hero__description { max-width: 650px; margin: 0 auto 30px; color: #596572; font-size: 19px; line-height: 1.8; } #bt-creemos .bt-hero__verse { max-width: 410px; margin: 30px auto; padding: 16px 25px; border-top: 1px solid var(--bt-border-gold); border-bottom: 1px solid var(--bt-border-gold); } #bt-creemos .bt-hero__verse p { margin-bottom: 3px; color: var(--bt-navy); font-size: 18px; font-style: italic; } #bt-creemos .bt-hero__verse cite { color: var(--bt-gold); font-family: Arial, sans-serif; font-size: 9px; font-style: normal; font-weight: bold; letter-spacing: 3px; } /* ========================================================== 5. BOTÓN HERO ========================================================== */ #bt-creemos .bt-button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 50px; padding: 0 25px; border: 1px solid var(--bt-navy); color: #fff; background: var(--bt-navy); text-decoration: none; font-family: Arial, sans-serif; font-size: 10px; font-weight: bold; letter-spacing: 2px; transition: .3s ease; } #bt-creemos .bt-button:hover { color: #fff; background: var(--bt-gold); border-color: var(--bt-gold); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(22,50,79,.15); } /* ========================================================== 6. SECCIONES ========================================================== */ #bt-creemos .bt-section { position: relative; padding: 95px 0; } /* ========================================================== 7. TÍTULOS ========================================================== */ #bt-creemos .bt-section-heading { margin-bottom: 45px; } #bt-creemos .bt-section-heading--center { max-width: 750px; margin: 0 auto 60px; text-align: center; } #bt-creemos .bt-section-heading__overline { margin-bottom: 10px; color: var(--bt-gold); font-family: Arial, sans-serif; font-size: 9px; font-weight: bold; letter-spacing: 4px; } #bt-creemos .bt-section-heading__hebrew { margin-bottom: 10px; color: var(--bt-gold); font-size: 20px; letter-spacing: 5px; } #bt-creemos .bt-section-heading h2 { margin-bottom: 0; color: var(--bt-navy); font-size: clamp(36px, 5vw, 53px); line-height: 1.2; font-weight: 400; } #bt-creemos .bt-section-heading__description { max-width: 650px; margin: 0 auto; color: var(--bt-muted); font-family: Arial, sans-serif; font-size: 15px; line-height: 1.8; } /* ========================================================== 8. INTRODUCCIÓN ========================================================== */ #bt-creemos .bt-introduction { background: #ffffff; } #bt-creemos .bt-introduction .bt-container { max-width: 920px; } #bt-creemos .bt-introduction__content { position: relative; padding: 5px 0 5px 32px; border-left: 3px solid var(--bt-gold); } #bt-creemos .bt-introduction__content p { margin-bottom: 22px; color: #4f5b66; font-size: 18px; line-height: 1.9; } /* ========================================================== 9. ÍNDICE DE FUNDAMENTOS ========================================================== */ #bt-creemos .bt-doctrine-nav { padding: 55px 0; background: var(--bt-blue-soft); border-top: 1px solid #dae4ec; border-bottom: 1px solid #dae4ec; } #bt-creemos .bt-doctrine-nav__label { margin-bottom: 25px; color: var(--bt-navy); text-align: center; font-family: Arial, sans-serif; font-size: 9px; font-weight: bold; letter-spacing: 4px; } #bt-creemos .bt-doctrine-nav__items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } #bt-creemos .bt-doctrine-nav__items a { min-height: 60px; display: flex; align-items: center; padding: 12px 15px; border: 1px solid #d4dfe7; background: rgba(255,255,255,.75); color: #4b5b68; text-decoration: none; font-family: Arial, sans-serif; font-size: 11px; transition: .25s ease; } #bt-creemos .bt-doctrine-nav__items a span { margin-right: 11px; color: var(--bt-gold); font-family: Georgia, serif; font-size: 17px; } #bt-creemos .bt-doctrine-nav__items a:hover { color: var(--bt-navy); background: #fff; border-color: var(--bt-gold); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22,50,79,.08); } /* ========================================================== 10. FUNDAMENTOS ========================================================== */ #bt-creemos .bt-doctrines { background: #f8f7f3; } #bt-creemos .bt-doctrines__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } /* ========================================================== 11. TARJETAS ========================================================== */ #bt-creemos .bt-doctrine { position: relative; overflow: hidden; border: 1px solid #e1ded5; border-radius: 4px; background: #ffffff; box-shadow: 0 7px 25px rgba(30,50,65,.055); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } #bt-creemos .bt-doctrine::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bt-gold); opacity: .55; } #bt-creemos .bt-doctrine:hover { transform: translateY(-3px); border-color: rgba(181,144,61,.50); box-shadow: 0 15px 35px rgba(30,50,65,.10); } #bt-creemos .bt-doctrine--featured { background: linear-gradient( 135deg, #ffffff, #fbf8ef ); border-color: rgba(181,144,61,.38); } /* ========================================================== 12. CABECERA DE TARJETA ========================================================== */ #bt-creemos .bt-doctrine__header { min-height: 105px; display: grid; grid-template-columns: 65px 1fr 42px; gap: 18px; align-items: center; padding: 24px 26px; } #bt-creemos .bt-doctrine__number { min-height: 50px; display: flex; align-items: center; border-right: 1px solid #e4dfd4; color: var(--bt-gold); font-size: 27px; } #bt-creemos .bt-doctrine__heading p { margin: 0 0 4px; color: #a0a5aa; font-family: Arial, sans-serif; font-size: 8px; font-weight: bold; letter-spacing: 2px; } #bt-creemos .bt-doctrine__heading h3 { margin: 0; color: var(--bt-navy); font-size: 21px; font-weight: 400; line-height: 1.25; } /* ========================================================== 13. BOTÓN + ========================================================== */ #bt-creemos .bt-doctrine__toggle { width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #d8d5cb; border-radius: 50%; color: var(--bt-navy); background: #faf9f5; cursor: pointer; font-size: 19px; transition: .25s ease; } #bt-creemos .bt-doctrine__toggle:hover { color: #fff; background: var(--bt-gold); border-color: var(--bt-gold); transform: rotate(90deg); } /* abierto */ #bt-creemos .bt-doctrine.is-open { border-color: rgba(181,144,61,.55); box-shadow: 0 15px 35px rgba(30,50,65,.10); } #bt-creemos .bt-doctrine.is-open .bt-doctrine__toggle { color: #fff; background: var(--bt-gold); border-color: var(--bt-gold); } /* ========================================================== 14. CONTENIDO DEL ACORDEÓN ========================================================== */ #bt-creemos .bt-doctrine__content { max-height: 0; overflow: hidden; opacity: 0; border-top: 1px solid #eeeae2; transition: max-height .5s ease, opacity .35s ease; } #bt-creemos .bt-doctrine__body { padding: 28px 30px 32px 110px; } #bt-creemos .bt-doctrine__body p { margin-bottom: 17px; color: #59646e; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.85; } #bt-creemos strong { color: var(--bt-navy); } /* ========================================================== 15. REFERENCIAS ========================================================== */ #bt-creemos .bt-references { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } #bt-creemos .bt-references a { display: inline-flex; align-items: center; padding: 7px 11px; border: 1px solid rgba(181,144,61,.32); background: var(--bt-gold-soft); color: #795f24; text-decoration: none; font-family: Arial, sans-serif; font-size: 9px; font-weight: bold; transition: .25s ease; } #bt-creemos .bt-references a::after { content: "↗"; margin-left: 6px; opacity: .55; } #bt-creemos .bt-references a:hover { color: #fff; background: var(--bt-gold); border-color: var(--bt-gold); transform: translateY(-2px); } /* ========================================================== 16. TRES PILARES ========================================================== */ #bt-creemos .bt-pillars { background: #ffffff; border-top: 1px solid #ece8df; } #bt-creemos .bt-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } #bt-creemos .bt-pillar { position: relative; padding: 45px 32px; text-align: center; border: 1px solid #e5e1d8; background: #faf9f5; transition: .3s ease; } #bt-creemos .bt-pillar:hover { transform: translateY(-5px); border-color: var(--bt-border-gold); background: #fff; box-shadow: 0 15px 35px rgba(30,50,65,.08); } #bt-creemos .bt-pillar__number { display: block; margin-bottom: 25px; color: rgba(181,144,61,.55); font-size: 40px; } #bt-creemos .bt-pillar h3 { margin-bottom: 15px; color: var(--bt-navy); font-size: 27px; font-weight: 400; } #bt-creemos .bt-pillar p { color: #69747e; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.8; } /* ========================================================== 17. CIERRE Aquí sí usamos azul para dar contraste ========================================================== */ #bt-creemos .bt-closing { position: relative; padding: 110px 0; text-align: center; overflow: hidden; background: radial-gradient( circle at 50% 0%, rgba(215,185,104,.15), transparent 38% ), #17344f; color: #fff; } #bt-creemos .bt-closing__content { max-width: 800px; } #bt-creemos .bt-closing__symbol { margin-bottom: 20px; color: var(--bt-gold-light); font-size: 26px; } #bt-creemos .bt-closing__overline { color: var(--bt-gold-light); font-family: Arial, sans-serif; font-size: 9px; font-weight: bold; letter-spacing: 5px; } #bt-creemos .bt-closing h2 { margin: 20px 0 28px; color: #fff; font-size: clamp(37px, 5vw, 57px); font-weight: 400; line-height: 1.2; } #bt-creemos .bt-closing__text { max-width: 650px; margin: 0 auto; color: rgba(255,255,255,.78); font-family: Arial, sans-serif; font-size: 15px; line-height: 1.9; } #bt-creemos .bt-closing__hebrew { margin-top: 40px; color: var(--bt-gold-light); font-size: 20px; letter-spacing: 9px; } /* ========================================================== 18. ANIMACIONES JAVASCRIPT ========================================================== */ #bt-creemos .bt-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--bt-delay, 0ms); } #bt-creemos .bt-reveal.bt-reveal--visible { opacity: 1; transform: translateY(0); } /* ========================================================== 19. ACCESIBILIDAD ========================================================== */ #bt-creemos .bt-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } #bt-creemos a:focus-visible, #bt-creemos button:focus-visible { outline: 2px solid var(--bt-gold); outline-offset: 3px; } /* ========================================================== 20. TABLET ========================================================== */ @media (max-width: 1000px) { #bt-creemos .bt-doctrine-nav__items { grid-template-columns: repeat(3, 1fr); } #bt-creemos .bt-doctrines__grid { grid-template-columns: 1fr; } #bt-creemos .bt-pillars__grid { grid-template-columns: 1fr; } } /* ========================================================== 21. MÓVIL ========================================================== */ @media (max-width: 700px) { #bt-creemos .bt-container { width: calc(100% - 32px); } #bt-creemos .bt-section { padding: 70px 0; } #bt-creemos .bt-hero { min-height: 650px; } #bt-creemos .bt-hero__content { padding: 70px 0; } #bt-creemos .bt-hero__title { font-size: clamp(52px,17vw,75px); letter-spacing: 2px; } #bt-creemos .bt-hero__description { font-size: 16px; } #bt-creemos .bt-doctrine-nav__items { grid-template-columns: repeat(2,1fr); } #bt-creemos .bt-doctrine__header { grid-template-columns: 48px 1fr 35px; gap: 12px; padding: 20px 16px; } #bt-creemos .bt-doctrine__number { font-size: 21px; } #bt-creemos .bt-doctrine__heading h3 { font-size: 18px; } #bt-creemos .bt-doctrine__body { padding: 25px 20px; } #bt-creemos .bt-closing { padding: 85px 0; } } /* ========================================================== 22. MÓVIL PEQUEÑO ========================================================== */ @media (max-width: 440px) { #bt-creemos .bt-doctrine-nav__items { grid-template-columns: 1fr; } #bt-creemos .bt-button { width: 100%; } } /* ========================================================== 23. REDUCIR MOVIMIENTO ========================================================== */ @media (prefers-reduced-motion: reduce) { #bt-creemos .bt-reveal { opacity: 1; transform: none; } #bt-creemos *, #bt-creemos *::before, #bt-creemos *::after { transition-duration: .01ms !important; } }/* ========================================================== BENEY TZION CORRECCIÓN DEFINITIVA DE COLORES Y BOTONES PONER AL FINAL DEL CSS ========================================================== */ /* ---------------------------------------------------------- PALETA GENERAL MÁS LUMINOSA ---------------------------------------------------------- */ #bt-creemos { --bt-gold: #c29a47; --bt-gold-dark: #92702f; --bt-gold-light: #ead39a; --bt-ink: #27323a; --bt-text-new: #56616a; --bt-bg-new: #ffffff; --bt-bg-soft-new: #f7f7f5; background: #ffffff !important; color: #56616a !important; } /* ---------------------------------------------------------- HERO MUCHO MÁS LIMPIO ---------------------------------------------------------- */ #bt-creemos .bt-hero { background: linear-gradient( 180deg, #ffffff 0%, #ffffff 62%, #f8f8f6 100% ) !important; border-bottom: 1px solid #ecebea !important; } #bt-creemos .bt-hero::before { opacity: .35 !important; } #bt-creemos .bt-hero__overlay { opacity: .035 !important; } #bt-creemos .bt-hero__hebrew { color: #b88e3b !important; } #bt-creemos .bt-eyebrow { color: #8d7650 !important; } #bt-creemos .bt-hero__title { color: #27323a !important; text-shadow: none !important; } #bt-creemos .bt-hero__description { color: #68727a !important; } #bt-creemos .bt-hero__verse { border-color: rgba(194,154,71,.32) !important; } #bt-creemos .bt-hero__verse p { color: #3d474e !important; } #bt-creemos .bt-hero__verse cite { color: #a17d36 !important; } /* ========================================================== BOTÓN "CONOCE LO QUE CREEMOS" ========================================================== */ #bt-creemos a.bt-button, #bt-creemos .bt-button, #bt-creemos .bt-button--hero { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: auto !important; min-width: 245px !important; min-height: 52px !important; padding: 0 28px !important; margin-top: 10px !important; border: 1px solid #c29a47 !important; border-radius: 3px !important; background: #c29a47 !important; color: #ffffff !important; font-family: Arial, sans-serif !important; font-size: 11px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.7px !important; text-decoration: none !important; text-shadow: none !important; box-shadow: 0 7px 18px rgba(70,60,40,.10) !important; transform: none !important; transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease !important; } /* Hover */ #bt-creemos a.bt-button:hover, #bt-creemos .bt-button:hover, #bt-creemos .bt-button--hero:hover { background: #27323a !important; border-color: #27323a !important; color: #ffffff !important; box-shadow: 0 10px 25px rgba(39,50,58,.15) !important; transform: translateY(-2px) !important; } /* Flecha */ #bt-creemos .bt-button--hero span:last-child { color: inherit !important; font-size: 15px !important; line-height: 1 !important; opacity: .85 !important; } /* ========================================================== BOTONES + VISIBLES SIN NECESIDAD DE TOCARLOS ========================================================== */ #bt-creemos button.bt-doctrine__toggle, #bt-creemos .bt-doctrine__toggle { appearance: none !important; -webkit-appearance: none !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; margin: 0 !important; border: 1px solid #c29a47 !important; border-radius: 50% !important; background: #ffffff !important; color: #a47d30 !important; box-shadow: 0 3px 10px rgba(70,60,40,.07) !important; cursor: pointer !important; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease !important; } /* El + */ #bt-creemos button.bt-doctrine__toggle > span[aria-hidden="true"] { display: block !important; color: #a47d30 !important; font-family: Arial, sans-serif !important; font-size: 23px !important; font-weight: 300 !important; line-height: 36px !important; width: 38px !important; height: 38px !important; text-align: center !important; opacity: 1 !important; } /* Hover del + */ #bt-creemos button.bt-doctrine__toggle:hover { background: #c29a47 !important; color: #ffffff !important; border-color: #c29a47 !important; transform: scale(1.06) !important; box-shadow: 0 6px 16px rgba(194,154,71,.20) !important; } #bt-creemos button.bt-doctrine__toggle:hover > span[aria-hidden="true"] { color: #ffffff !important; } /* ========================================================== BOTÓN CUANDO LA DOCTRINA ESTÁ ABIERTA ========================================================== */ #bt-creemos .bt-doctrine.is-open button.bt-doctrine__toggle { background: #27323a !important; border-color: #27323a !important; color: #ffffff !important; transform: none !important; } #bt-creemos .bt-doctrine.is-open button.bt-doctrine__toggle > span[aria-hidden="true"] { color: #ffffff !important; } /* ========================================================== TARJETAS ========================================================== */ #bt-creemos .bt-doctrines { background: #f7f7f5 !important; } #bt-creemos .bt-doctrine { background: #ffffff !important; border: 1px solid #e6e4df !important; box-shadow: 0 4px 18px rgba(39,50,58,.045) !important; } #bt-creemos .bt-doctrine::before { width: 3px !important; background: #c29a47 !important; opacity: .75 !important; } #bt-creemos .bt-doctrine:hover { border-color: rgba(194,154,71,.55) !important; box-shadow: 0 10px 30px rgba(39,50,58,.08) !important; } #bt-creemos .bt-doctrine.is-open { border-color: rgba(194,154,71,.70) !important; } /* número */ #bt-creemos .bt-doctrine__number { color: #b58a37 !important; border-color: #ebe8e2 !important; } /* palabra FUNDAMENTO */ #bt-creemos .bt-doctrine__heading p { color: #9a9fa3 !important; } /* títulos */ #bt-creemos .bt-doctrine__heading h3 { color: #303b43 !important; } /* texto desplegado */ #bt-creemos .bt-doctrine__body p { color: #5c666e !important; } /* ========================================================== ÍNDICE SUPERIOR ========================================================== */ #bt-creemos .bt-doctrine-nav { background: #f3f4f3 !important; border-color: #e6e7e5 !important; } #bt-creemos .bt-doctrine-nav__items a { background: #ffffff !important; color: #525d65 !important; border: 1px solid #e0e2e1 !important; box-shadow: none !important; } #bt-creemos .bt-doctrine-nav__items a span { color: #b58a37 !important; } #bt-creemos .bt-doctrine-nav__items a:hover { background: #27323a !important; color: #ffffff !important; border-color: #27323a !important; } #bt-creemos .bt-doctrine-nav__items a:hover span { color: #e3c77d !important; } /* ========================================================== REFERENCIAS BÍBLICAS ========================================================== */ #bt-creemos .bt-references a { background: #faf7ef !important; color: #8c6929 !important; border: 1px solid rgba(194,154,71,.30) !important; } #bt-creemos .bt-references a:hover { background: #c29a47 !important; color: #ffffff !important; border-color: #c29a47 !important; } /* ========================================================== PILARES ========================================================== */ #bt-creemos .bt-pillars { background: #ffffff !important; } #bt-creemos .bt-pillar { background: #fafafa !important; border-color: #e7e6e2 !important; } #bt-creemos .bt-pillar h3 { color: #303b43 !important; } #bt-creemos .bt-pillar p { color: #657078 !important; } /* ========================================================== MÓVIL ========================================================== */ @media (max-width: 700px) { #bt-creemos a.bt-button, #bt-creemos .bt-button, #bt-creemos .bt-button--hero { width: auto !important; min-width: 225px !important; max-width: 100% !important; padding: 0 20px !important; } #bt-creemos button.bt-doctrine__toggle { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; } }/* ========================================================== BENEY TZION — CREEMOS REDISEÑO ESPECÍFICO PARA MÓVIL Pegar AL FINAL de todo el CSS ========================================================== */ @media (max-width: 767px) { /* ====================================================== 1. BASE GENERAL ====================================================== */ #bt-creemos { width: 100% !important; overflow-x: hidden !important; } #bt-creemos .bt-container { width: 100% !important; max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; margin-left: auto !important; margin-right: auto !important; } #bt-creemos .bt-section { padding: 62px 0 !important; } /* ====================================================== 2. HERO Más compacto y proporcionado ====================================================== */ #bt-creemos .bt-hero { min-height: auto !important; padding: 0 !important; } #bt-creemos .bt-hero__content { width: 100% !important; max-width: 100% !important; padding-top: 70px !important; padding-bottom: 65px !important; padding-left: 22px !important; padding-right: 22px !important; } #bt-creemos .bt-hero__hebrew { margin-bottom: 12px !important; font-size: 20px !important; letter-spacing: 5px !important; } #bt-creemos .bt-eyebrow { margin-bottom: 15px !important; font-size: 9px !important; letter-spacing: 3px !important; } #bt-creemos .bt-hero__title { margin: 0 !important; font-size: clamp(48px, 15vw, 68px) !important; line-height: 1 !important; letter-spacing: 1px !important; word-break: normal !important; } #bt-creemos .bt-ornament { width: 190px !important; max-width: 70% !important; margin-top: 22px !important; margin-bottom: 22px !important; gap: 10px !important; } #bt-creemos .bt-ornament span { width: 65px !important; } #bt-creemos .bt-hero__description { max-width: 340px !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 24px !important; font-size: 15.5px !important; line-height: 1.75 !important; } /* ====================================================== 3. VERSÍCULO DEL HERO ====================================================== */ #bt-creemos .bt-hero__verse { width: 100% !important; max-width: 310px !important; margin: 25px auto !important; padding: 14px 12px !important; } #bt-creemos .bt-hero__verse p { margin-bottom: 5px !important; font-size: 17px !important; line-height: 1.5 !important; } #bt-creemos .bt-hero__verse cite { font-size: 9px !important; letter-spacing: 2px !important; } /* ====================================================== 4. BOTÓN PRINCIPAL ====================================================== */ #bt-creemos a.bt-button, #bt-creemos .bt-button, #bt-creemos .bt-button--hero { width: 100% !important; max-width: 310px !important; min-width: 0 !important; min-height: 52px !important; margin: 8px auto 0 !important; padding: 0 18px !important; font-size: 10px !important; letter-spacing: 1.4px !important; } /* ====================================================== 5. INTRODUCCIÓN ====================================================== */ #bt-creemos .bt-introduction { padding-top: 58px !important; padding-bottom: 58px !important; } #bt-creemos .bt-section-heading { margin-bottom: 30px !important; } #bt-creemos .bt-section-heading__overline { margin-bottom: 9px !important; font-size: 8px !important; letter-spacing: 3px !important; } #bt-creemos .bt-section-heading h2 { font-size: 32px !important; line-height: 1.18 !important; } #bt-creemos .bt-introduction__content { padding: 2px 0 2px 18px !important; border-left-width: 2px !important; } #bt-creemos .bt-introduction__content p { margin-bottom: 18px !important; font-size: 16px !important; line-height: 1.8 !important; } #bt-creemos .bt-introduction__content p:last-child { margin-bottom: 0 !important; } /* ====================================================== 6. ÍNDICE DE LOS 12 FUNDAMENTOS En móvil una lista vertical funciona mucho mejor que las pequeñas cajas en dos columnas. ====================================================== */ #bt-creemos .bt-doctrine-nav { padding: 45px 0 !important; } #bt-creemos .bt-doctrine-nav__label { margin-bottom: 22px !important; font-size: 9px !important; letter-spacing: 3px !important; } #bt-creemos .bt-doctrine-nav__items { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } #bt-creemos .bt-doctrine-nav__items a { position: relative !important; width: 100% !important; min-height: 54px !important; display: grid !important; grid-template-columns: 42px 1fr 20px !important; align-items: center !important; padding: 9px 14px !important; border-radius: 3px !important; font-size: 12px !important; line-height: 1.35 !important; text-align: left !important; } #bt-creemos .bt-doctrine-nav__items a span { margin: 0 !important; font-size: 16px !important; } #bt-creemos .bt-doctrine-nav__items a::after { content: "↓"; justify-self: end; font-size: 13px; opacity: .45; } /* ====================================================== 7. CABECERA "NUESTROS FUNDAMENTOS" ====================================================== */ #bt-creemos .bt-doctrines { padding-top: 65px !important; padding-bottom: 65px !important; } #bt-creemos .bt-section-heading--center { width: 100% !important; max-width: 100% !important; margin-bottom: 40px !important; padding-left: 4px !important; padding-right: 4px !important; } #bt-creemos .bt-section-heading__hebrew { margin-bottom: 8px !important; font-size: 17px !important; letter-spacing: 3px !important; } #bt-creemos .bt-section-heading--center h2 { font-size: 34px !important; line-height: 1.15 !important; } #bt-creemos .bt-section-heading__description { max-width: 330px !important; margin-left: auto !important; margin-right: auto !important; font-size: 14px !important; line-height: 1.7 !important; } /* ====================================================== 8. GRID DE DOCTRINAS ====================================================== */ #bt-creemos .bt-doctrines__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } /* ====================================================== 9. TARJETAS DOCTRINALES ====================================================== */ #bt-creemos .bt-doctrine { width: 100% !important; margin: 0 !important; border-radius: 4px !important; transform: none !important; } #bt-creemos .bt-doctrine:hover { transform: none !important; } /* ====================================================== 10. CABECERA DE CADA TARJETA 01 | Título + ====================================================== */ #bt-creemos .bt-doctrine__header { width: 100% !important; min-height: 82px !important; display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 40px !important; align-items: center !important; column-gap: 12px !important; padding: 16px 14px 16px 17px !important; } #bt-creemos .bt-doctrine__number { width: 42px !important; min-height: 43px !important; display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; font-size: 19px !important; line-height: 1 !important; } #bt-creemos .bt-doctrine__heading { min-width: 0 !important; } #bt-creemos .bt-doctrine__heading p { margin: 0 0 3px !important; font-size: 7px !important; line-height: 1.2 !important; letter-spacing: 1.5px !important; } #bt-creemos .bt-doctrine__heading h3 { margin: 0 !important; font-size: 17px !important; line-height: 1.25 !important; overflow-wrap: normal !important; word-break: normal !important; } /* ====================================================== 11. BOTONES + ====================================================== */ #bt-creemos button.bt-doctrine__toggle, #bt-creemos .bt-doctrine__toggle { justify-self: end !important; flex: none !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; border-radius: 50% !important; } #bt-creemos button.bt-doctrine__toggle > span[aria-hidden="true"] { width: 34px !important; height: 34px !important; font-size: 21px !important; line-height: 34px !important; } /* ====================================================== 12. TEXTO DESPLEGADO Ya no usamos el enorme sangrado de escritorio. ====================================================== */ #bt-creemos .bt-doctrine__body { padding: 22px 18px 25px !important; } #bt-creemos .bt-doctrine__body p { margin-bottom: 16px !important; font-size: 14px !important; line-height: 1.75 !important; text-align: left !important; } #bt-creemos .bt-doctrine__body p:last-of-type { margin-bottom: 0 !important; } /* ====================================================== 13. REFERENCIAS BÍBLICAS Chips más pequeños y ordenados. ====================================================== */ #bt-creemos .bt-references { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; margin-top: 20px !important; } #bt-creemos .bt-references a { min-height: 34px !important; display: inline-flex !important; align-items: center !important; padding: 7px 10px !important; font-size: 9px !important; line-height: 1.2 !important; letter-spacing: .2px !important; } /* ====================================================== 14. LOS TRES PILARES ====================================================== */ #bt-creemos .bt-pillars { padding-top: 62px !important; padding-bottom: 62px !important; } #bt-creemos .bt-pillars__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } #bt-creemos .bt-pillar { position: relative !important; padding: 27px 22px 27px 72px !important; text-align: left !important; min-height: 130px !important; } #bt-creemos .bt-pillar__number { position: absolute !important; left: 20px !important; top: 26px !important; margin: 0 !important; font-size: 25px !important; line-height: 1 !important; } #bt-creemos .bt-pillar h3 { margin: 0 0 8px !important; font-size: 23px !important; line-height: 1.2 !important; } #bt-creemos .bt-pillar p { margin: 0 !important; font-size: 13.5px !important; line-height: 1.65 !important; } /* ====================================================== 15. CIERRE ====================================================== */ #bt-creemos .bt-closing { padding: 72px 0 !important; } #bt-creemos .bt-closing__content { padding-left: 22px !important; padding-right: 22px !important; } #bt-creemos .bt-closing__symbol { margin-bottom: 15px !important; font-size: 20px !important; } #bt-creemos .bt-closing__overline { font-size: 8px !important; letter-spacing: 4px !important; } #bt-creemos .bt-closing h2 { margin: 18px auto 23px !important; font-size: 32px !important; line-height: 1.2 !important; } #bt-creemos .bt-closing__text { max-width: 340px !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 17px !important; font-size: 14px !important; line-height: 1.75 !important; } #bt-creemos .bt-closing__hebrew { margin-top: 30px !important; font-size: 17px !important; letter-spacing: 5px !important; } /* ====================================================== 16. ANIMACIONES MÁS DISCRETAS EN MÓVIL ====================================================== */ #bt-creemos .bt-reveal { transform: translateY(12px); transition-duration: .5s; } } /* ========================================================== TELÉFONOS MUY PEQUEÑOS ========================================================== */ @media (max-width: 380px) { #bt-creemos .bt-container { padding-left: 15px !important; padding-right: 15px !important; } #bt-creemos .bt-hero__title { font-size: 46px !important; } #bt-creemos .bt-hero__description { font-size: 14.5px !important; } #bt-creemos .bt-doctrine__header { grid-template-columns: 36px minmax(0, 1fr) 34px !important; column-gap: 9px !important; padding: 15px 11px 15px 14px !important; } #bt-creemos .bt-doctrine__number { width: 36px !important; font-size: 17px !important; } #bt-creemos .bt-doctrine__heading h3 { font-size: 15.5px !important; } #bt-creemos button.bt-doctrine__toggle, #bt-creemos .bt-doctrine__toggle { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } #bt-creemos button.bt-doctrine__toggle > span[aria-hidden="true"] { width: 30px !important; height: 30px !important; line-height: 30px !important; font-size: 19px !important; } #bt-creemos .bt-doctrine__body { padding: 20px 15px 23px !important; } }/* ========================================================== BENEY TZION — CORRECCIÓN MÓVIL ANCHOS + TEXTOS CORTADOS + TÍTULO CREEMOS Pegar AL FINAL de todo el CSS ========================================================== */ @media (max-width: 767px) { /* ------------------------------------------------------ 1. EVITAR DESBORDAMIENTO GENERAL ------------------------------------------------------ */ html, body { max-width: 100% !important; overflow-x: hidden !important; } #bt-creemos, #bt-creemos section, #bt-creemos nav, #bt-creemos .bt-container { max-width: 100% !important; box-sizing: border-box !important; } #bt-creemos { width: 100% !important; margin: 0 !important; overflow-x: hidden !important; } /* ------------------------------------------------------ 2. CONTENEDOR REAL PARA MÓVIL ------------------------------------------------------ */ #bt-creemos .bt-container { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 18px !important; padding-right: 18px !important; } /* ------------------------------------------------------ 3. HERO ------------------------------------------------------ */ #bt-creemos .bt-hero { width: 100% !important; min-width: 0 !important; min-height: auto !important; overflow: hidden !important; } #bt-creemos .bt-hero__content { width: 100% !important; max-width: 100% !important; padding: 62px 16px 58px !important; margin: 0 auto !important; } /* ------------------------------------------------------ 4. CREEMOS NUNCA DEBE DIVIDIRSE EN DOS LÍNEAS ------------------------------------------------------ */ #bt-creemos .bt-hero__title { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; font-size: clamp(39px, 13vw, 62px) !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; hyphens: none !important; text-align: center !important; } /* ------------------------------------------------------ 5. HEBREO Y SUBTÍTULO SUPERIOR ------------------------------------------------------ */ #bt-creemos .bt-hero__hebrew { width: 100% !important; font-size: 19px !important; letter-spacing: 4px !important; text-align: center !important; white-space: nowrap !important; } #bt-creemos .bt-eyebrow { width: 100% !important; font-size: 8px !important; line-height: 1.5 !important; letter-spacing: 2.5px !important; text-align: center !important; white-space: normal !important; } /* ------------------------------------------------------ 6. DESCRIPCIÓN HERO ------------------------------------------------------ */ #bt-creemos .bt-hero__description { width: 100% !important; max-width: 330px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; font-size: 15px !important; line-height: 1.7 !important; text-align: center !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } /* ------------------------------------------------------ 7. TODOS LOS TÍTULOS Evita palabras partidas artificialmente ------------------------------------------------------ */ #bt-creemos h1, #bt-creemos h2, #bt-creemos h3 { word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } /* ------------------------------------------------------ 8. TÍTULOS DE SECCIÓN ------------------------------------------------------ */ #bt-creemos .bt-section-heading h2 { width: 100% !important; max-width: 100% !important; font-size: clamp(28px, 9vw, 36px) !important; line-height: 1.17 !important; letter-spacing: -.3px !important; word-break: normal !important; overflow-wrap: normal !important; } #bt-creemos .bt-section-heading--center h2 { max-width: 330px !important; margin-left: auto !important; margin-right: auto !important; } /* ------------------------------------------------------ 9. TEXTOS NORMALES ------------------------------------------------------ */ #bt-creemos p { word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; } /* ------------------------------------------------------ 10. ÍNDICE ------------------------------------------------------ */ #bt-creemos .bt-doctrine-nav__items { width: 100% !important; } #bt-creemos .bt-doctrine-nav__items a { width: 100% !important; min-width: 0 !important; overflow: hidden !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } /* ------------------------------------------------------ 11. TARJETAS ------------------------------------------------------ */ #bt-creemos .bt-doctrines__grid { width: 100% !important; min-width: 0 !important; } #bt-creemos .bt-doctrine { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* ------------------------------------------------------ 12. CABECERA TARJETAS ------------------------------------------------------ */ #bt-creemos .bt-doctrine__header { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-template-columns: 38px minmax(0, 1fr) 38px !important; column-gap: 10px !important; padding: 16px 13px !important; } #bt-creemos .bt-doctrine__heading { width: auto !important; min-width: 0 !important; overflow: visible !important; } #bt-creemos .bt-doctrine__heading h3 { width: 100% !important; max-width: 100% !important; font-size: 16.5px !important; line-height: 1.25 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } /* ------------------------------------------------------ 13. CONTENIDO DE LAS DOCTRINAS ------------------------------------------------------ */ #bt-creemos .bt-doctrine__content { width: 100% !important; max-width: 100% !important; } #bt-creemos .bt-doctrine__body { width: 100% !important; max-width: 100% !important; padding: 21px 17px 24px !important; } #bt-creemos .bt-doctrine__body p { width: 100% !important; max-width: 100% !important; font-size: 14px !important; line-height: 1.72 !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; } /* ------------------------------------------------------ 14. REFERENCIAS ------------------------------------------------------ */ #bt-creemos .bt-references { width: 100% !important; max-width: 100% !important; } #bt-creemos .bt-references a { max-width: 100% !important; white-space: normal !important; } /* ------------------------------------------------------ 15. PILARES ------------------------------------------------------ */ #bt-creemos .bt-pillar { width: 100% !important; max-width: 100% !important; padding: 25px 18px 25px 65px !important; } #bt-creemos .bt-pillar h3, #bt-creemos .bt-pillar p { word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } /* ------------------------------------------------------ 16. CIERRE ------------------------------------------------------ */ #bt-creemos .bt-closing__content { width: 100% !important; max-width: 100% !important; padding-left: 19px !important; padding-right: 19px !important; } #bt-creemos .bt-closing h2 { width: 100% !important; max-width: 340px !important; margin-left: auto !important; margin-right: auto !important; font-size: clamp(27px, 8.5vw, 34px) !important; line-height: 1.18 !important; word-break: normal !important; overflow-wrap: normal !important; } #bt-creemos .bt-closing__text { width: 100% !important; max-width: 335px !important; word-break: normal !important; overflow-wrap: normal !important; } } /* ========================================================== MÓVILES MUY ESTRECHOS ========================================================== */ @media (max-width: 360px) { #bt-creemos .bt-hero__title { font-size: 40px !important; } #bt-creemos .bt-hero__content { padding-left: 12px !important; padding-right: 12px !important; } #bt-creemos .bt-container { padding-left: 14px !important; padding-right: 14px !important; } #bt-creemos .bt-doctrine__heading h3 { font-size: 15.5px !important; } }/* ========================================================== BENEY TZION — NAVEGACIÓN PREMIUM Tema Sela Escritorio + móvil ========================================================== */ :root { --bt-nav-navy: #182c3b; --bt-nav-navy-2: #213b4d; --bt-nav-gold: #c6a052; --bt-nav-gold-light: #e3ca91; --bt-nav-ivory: #fbf9f4; --bt-nav-ink: #29343b; --bt-nav-muted: #687178; } /* ========================================================== ESCRITORIO Conservamos estructura de Sela ========================================================== */ @media screen and (min-width: 769px) { #site-navigation.main-navigation { background: linear-gradient( 180deg, #1d3546 0%, #172c3b 100% ) !important; border: 0 !important; border-bottom: 3px solid var(--bt-nav-gold) !important; box-shadow: 0 5px 20px rgba(15, 28, 37, .18) !important; } /* Menú centrado */ #site-navigation .nav-menu { text-align: center !important; } /* Enlaces */ #site-navigation .nav-menu > li > a { position: relative !important; color: #f5f1e8 !important; background: transparent !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .8px !important; text-transform: uppercase !important; text-shadow: none !important; transition: color .2s ease, background .2s ease !important; } /* Separadores muy sutiles */ #site-navigation .nav-menu > li > a { border-right: 1px solid rgba(255,255,255,.08) !important; } /* Hover */ #site-navigation .nav-menu > li > a:hover, #site-navigation .nav-menu > li > a:focus { background: rgba(255,255,255,.06) !important; color: var(--bt-nav-gold-light) !important; } /* Línea dorada inferior */ #site-navigation .nav-menu > li > a::before { content: "" !important; position: absolute !important; left: 22% !important; right: 22% !important; bottom: 0 !important; height: 2px !important; background: var(--bt-nav-gold) !important; transform: scaleX(0) !important; transition: transform .22s ease !important; } #site-navigation .nav-menu > li > a:hover::before, #site-navigation .nav-menu > li > a:focus::before { transform: scaleX(1) !important; } /* Página actual */ #site-navigation .current-menu-item > a, #site-navigation .current_page_item > a, #site-navigation .current-menu-ancestor > a { color: var(--bt-nav-gold-light) !important; background: rgba(255,255,255,.055) !important; } #site-navigation .current-menu-item > a::before, #site-navigation .current_page_item > a::before, #site-navigation .current-menu-ancestor > a::before { transform: scaleX(1) !important; } /* ------------------------------------------ SUBMENÚ ESCRITORIO ------------------------------------------ */ #site-navigation ul ul { background: var(--bt-nav-ivory) !important; border: 1px solid #e5dece !important; border-top: 3px solid var(--bt-nav-gold) !important; box-shadow: 0 15px 35px rgba(15,28,37,.18) !important; padding: 7px 0 !important; } #site-navigation ul ul a { background: transparent !important; color: var(--bt-nav-ink) !important; font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: .2px !important; text-shadow: none !important; border-bottom: 1px solid #ece7dd !important; } #site-navigation ul ul li:last-child a { border-bottom: 0 !important; } #site-navigation ul ul a:hover, #site-navigation ul ul a:focus { background: #f2ede3 !important; color: #95702e !important; } } /* ========================================================== MÓVIL Diseño completamente diferente ========================================================== */ @media screen and (max-width: 768px) { /* Navegación */ #site-navigation.main-navigation { position: relative !important; width: 100% !important; padding: 10px 16px !important; background: var(--bt-nav-ivory) !important; border-top: 1px solid #ebe4d7 !important; border-bottom: 2px solid var(--bt-nav-gold) !important; box-shadow: 0 6px 20px rgba(27,38,45,.08) !important; box-sizing: border-box !important; } /* ====================================================== BOTÓN MENÚ ====================================================== */ #site-navigation .menu-toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: 132px !important; min-height: 44px !important; margin: 0 auto !important; padding: 0 20px !important; background: #fff !important; color: var(--bt-nav-navy) !important; border: 1px solid #d9cfbc !important; border-radius: 50px !important; box-shadow: 0 3px 12px rgba(28,39,47,.07) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; text-shadow: none !important; } #site-navigation .menu-toggle:hover, #site-navigation .menu-toggle:focus { background: var(--bt-nav-navy) !important; color: #fff !important; border-color: var(--bt-nav-navy) !important; } /* ====================================================== PANEL ABIERTO ====================================================== */ #site-navigation .nav-menu, #site-navigation .menu { width: 100% !important; margin: 10px 0 0 !important; padding: 8px 8px 12px !important; background: #fff !important; border: 1px solid #e7e0d4 !important; border-radius: 4px !important; box-shadow: 0 15px 35px rgba(26,38,46,.10) !important; box-sizing: border-box !important; } /* ====================================================== CADA FILA ====================================================== */ #site-navigation .nav-menu > li, #site-navigation .menu > li { position: relative !important; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #ece8e0 !important; } #site-navigation .nav-menu > li:last-child, #site-navigation .menu > li:last-child { border-bottom: 0 !important; } /* ====================================================== ENLACES ====================================================== */ #site-navigation .nav-menu > li > a, #site-navigation .menu > li > a { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 53px !important; padding: 9px 42px 9px 14px !important; background: transparent !important; color: var(--bt-nav-ink) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: .15px !important; text-align: left !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; box-sizing: border-box !important; transition: background .18s ease, color .18s ease, padding-left .18s ease !important; } /* Flecha */ #site-navigation .nav-menu > li > a::after, #site-navigation .menu > li > a::after { content: "›" !important; position: absolute !important; right: 14px !important; top: 50% !important; transform: translateY(-52%) !important; color: var(--bt-nav-gold) !important; font-family: Georgia, serif !important; font-size: 22px !important; font-weight: 400 !important; line-height: 1 !important; } /* Hover / toque */ #site-navigation .nav-menu > li > a:hover, #site-navigation .menu > li > a:hover, #site-navigation .nav-menu > li > a:focus, #site-navigation .menu > li > a:focus { background: #f7f3eb !important; color: #8d692a !important; padding-left: 19px !important; } /* ====================================================== PÁGINA ACTIVA ====================================================== */ #site-navigation .current-menu-item > a, #site-navigation .current_page_item > a, #site-navigation .current-menu-ancestor > a, #site-navigation .current_page_ancestor > a { background: #f4efe5 !important; color: #8d692a !important; font-weight: 700 !important; } /* Línea lateral activa */ #site-navigation .current-menu-item > a::before, #site-navigation .current_page_item > a::before { content: "" !important; position: absolute !important; left: 0 !important; top: 13px !important; bottom: 13px !important; width: 3px !important; background: var(--bt-nav-gold) !important; border-radius: 4px !important; } /* ====================================================== SUBMENÚ MÓVIL ====================================================== */ #site-navigation ul ul { position: static !important; float: none !important; width: auto !important; margin: 0 8px 8px 20px !important; padding: 5px 0 !important; background: #f8f5ef !important; border: 0 !important; border-left: 2px solid #d9bd7a !important; box-shadow: none !important; } #site-navigation ul ul li { width: 100% !important; border: 0 !important; } #site-navigation ul ul a { width: 100% !important; padding: 11px 14px !important; background: transparent !important; color: #606970 !important; font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; text-shadow: none !important; box-sizing: border-box !important; } #site-navigation ul ul a:hover, #site-navigation ul ul a:focus { background: transparent !important; color: #8d692a !important; } } /* ========================================================== DETALLES GENERALES ========================================================== */ #site-navigation a, #site-navigation button { -webkit-tap-highlight-color: transparent !important; }/* ========================================================== BENEY TZION — MENÚ ESCRITORIO CON MAYOR PRESENCIA Añadir AL FINAL del CSS actual ========================================================== */ @media screen and (min-width: 769px) { /* ------------------------------------------------------ BARRA PRINCIPAL ------------------------------------------------------ */ #site-navigation.main-navigation { background: linear-gradient( 180deg, #203a4c 0%, #172e3e 100% ) !important; border-top: 1px solid rgba(255,255,255,.06) !important; border-bottom: 3px solid #c5a052 !important; box-shadow: 0 7px 22px rgba(18,31,40,.18) !important; } /* ------------------------------------------------------ DISTRIBUCIÓN ------------------------------------------------------ */ #site-navigation .nav-menu { display: flex !important; align-items: stretch !important; justify-content: center !important; width: 100% !important; max-width: 1400px !important; margin: 0 auto !important; padding: 0 18px !important; box-sizing: border-box !important; } #site-navigation .nav-menu > li { position: relative !important; display: flex !important; align-items: stretch !important; float: none !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------ CADA SECCIÓN ------------------------------------------------------ */ #site-navigation .nav-menu > li > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 78px !important; padding: 0 19px !important; background: transparent !important; color: #f7f3e9 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: .65px !important; text-transform: uppercase !important; text-align: center !important; text-shadow: none !important; border: 0 !important; transition: background .25s ease, color .25s ease !important; } /* ------------------------------------------------------ SEPARADOR ENTRE SECCIONES ------------------------------------------------------ */ #site-navigation .nav-menu > li:not(:last-child)::after { content: "" !important; position: absolute !important; z-index: 2 !important; right: 0 !important; top: 25% !important; width: 1px !important; height: 50% !important; background: rgba(225,198,137,.20) !important; pointer-events: none !important; } /* ------------------------------------------------------ ACENTO DORADO INFERIOR ------------------------------------------------------ */ #site-navigation .nav-menu > li > a::before { content: "" !important; position: absolute !important; left: 22px !important; right: 22px !important; bottom: 0 !important; height: 3px !important; background: #c5a052 !important; transform: scaleX(0) !important; transform-origin: center !important; transition: transform .25s ease !important; } /* ------------------------------------------------------ HOVER ------------------------------------------------------ */ #site-navigation .nav-menu > li > a:hover, #site-navigation .nav-menu > li > a:focus { background: rgba(255,255,255,.075) !important; color: #e5cb91 !important; } #site-navigation .nav-menu > li > a:hover::before, #site-navigation .nav-menu > li > a:focus::before { transform: scaleX(1) !important; } /* ------------------------------------------------------ PÁGINA EN LA QUE ESTAMOS ------------------------------------------------------ */ #site-navigation .current-menu-item > a, #site-navigation .current_page_item > a, #site-navigation .current-menu-ancestor > a, #site-navigation .current_page_ancestor > a { background: rgba(197,160,82,.13) !important; color: #ebd39e !important; } #site-navigation .current-menu-item > a::before, #site-navigation .current_page_item > a::before, #site-navigation .current-menu-ancestor > a::before, #site-navigation .current_page_ancestor > a::before { transform: scaleX(1) !important; } /* ------------------------------------------------------ PEQUEÑO PUNTO SOBRE LA SECCIÓN ACTIVA ------------------------------------------------------ */ #site-navigation .current-menu-item > a::after, #site-navigation .current_page_item > a::after { content: "◆" !important; position: absolute !important; left: 50% !important; bottom: 8px !important; transform: translateX(-50%) !important; color: #c5a052 !important; font-size: 5px !important; line-height: 1 !important; } /* ------------------------------------------------------ SUBMENÚ ------------------------------------------------------ */ #site-navigation ul ul { min-width: 245px !important; padding: 7px !important; background: #fbfaf7 !important; border: 1px solid #e3dccf !important; border-top: 3px solid #c5a052 !important; border-radius: 0 0 4px 4px !important; box-shadow: 0 16px 38px rgba(16,29,38,.20) !important; } #site-navigation ul ul li { width: 100% !important; background: transparent !important; } #site-navigation ul ul a { width: 100% !important; padding: 14px 16px !important; background: transparent !important; color: #37434b !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: .15px !important; text-align: left !important; text-transform: none !important; border-bottom: 1px solid #ece7de !important; box-sizing: border-box !important; transition: background .18s ease, color .18s ease, padding-left .18s ease !important; } #site-navigation ul ul li:last-child > a { border-bottom: 0 !important; } #site-navigation ul ul a:hover, #site-navigation ul ul a:focus { padding-left: 21px !important; background: #f3eee5 !important; color: #96702c !important; } }/* ========================================================== BENEY TZION — ICONOS EN MENÚ MÓVIL Tema Sela Añadir AL FINAL del CSS actual ========================================================== */ @media screen and (max-width: 768px) { /* Dejamos espacio para el icono */ #site-navigation .nav-menu > li > a, #site-navigation .menu > li > a { position: relative !important; padding-left: 54px !important; padding-right: 42px !important; min-height: 57px !important; } /* Icono base */ #site-navigation .nav-menu > li > a::before, #site-navigation .menu > li > a::before { position: absolute !important; left: 16px !important; top: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 27px !important; height: 27px !important; transform: translateY(-50%) !important; color: #aa8237 !important; background: #f7f2e8 !important; border: 1px solid #e2d2ae !important; border-radius: 50% !important; font-family: Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1 !important; box-sizing: border-box !important; transition: background .2s ease, color .2s ease, border-color .2s ease !important; } /* ------------------------------------------ ICONOS SEGÚN LA POSICIÓN DEL MENÚ ------------------------------------------ */ /* Inicio */ #site-navigation .nav-menu > li:nth-child(1) > a::before, #site-navigation .menu > li:nth-child(1) > a::before { content: "⌂" !important; font-size: 17px !important; } /* Álbum de fotos */ #site-navigation .nav-menu > li:nth-child(2) > a::before, #site-navigation .menu > li:nth-child(2) > a::before { content: "▧" !important; font-size: 16px !important; } /* Calendario bíblico */ #site-navigation .nav-menu > li:nth-child(3) > a::before, #site-navigation .menu > li:nth-child(3) > a::before { content: "□" !important; font-size: 16px !important; } /* Creemos */ #site-navigation .nav-menu > li:nth-child(4) > a::before, #site-navigation .menu > li:nth-child(4) > a::before { content: "✦" !important; font-size: 12px !important; } /* Música y alabanzas */ #site-navigation .nav-menu > li:nth-child(5) > a::before, #site-navigation .menu > li:nth-child(5) > a::before { content: "♪" !important; font-size: 17px !important; } /* Parashá semanal */ #site-navigation .nav-menu > li:nth-child(6) > a::before, #site-navigation .menu > li:nth-child(6) > a::before { content: "◫" !important; font-size: 15px !important; } /* Recursos */ #site-navigation .nav-menu > li:nth-child(7) > a::before, #site-navigation .menu > li:nth-child(7) > a::before { content: "◇" !important; font-size: 15px !important; } /* Acerca de nosotros */ #site-navigation .nav-menu > li:nth-child(8) > a::before, #site-navigation .menu > li:nth-child(8) > a::before { content: "◎" !important; font-size: 15px !important; } /* Contacto */ #site-navigation .nav-menu > li:nth-child(9) > a::before, #site-navigation .menu > li:nth-child(9) > a::before { content: "✉" !important; font-size: 14px !important; } /* Blog */ #site-navigation .nav-menu > li:nth-child(10) > a::before, #site-navigation .menu > li:nth-child(10) > a::before { content: "✎" !important; font-size: 14px !important; } /* Descargar material */ #site-navigation .nav-menu > li:nth-child(11) > a::before, #site-navigation .menu > li:nth-child(11) > a::before { content: "↓" !important; font-size: 17px !important; font-weight: 600 !important; } /* Donaciones */ #site-navigation .nav-menu > li:nth-child(12) > a::before, #site-navigation .menu > li:nth-child(12) > a::before { content: "♡" !important; font-size: 17px !important; } /* ====================================================== FLECHA DE LA DERECHA ====================================================== */ #site-navigation .nav-menu > li > a::after, #site-navigation .menu > li > a::after { content: "›" !important; position: absolute !important; right: 15px !important; left: auto !important; top: 50% !important; width: auto !important; height: auto !important; transform: translateY(-52%) !important; background: transparent !important; border: 0 !important; color: #b38a3c !important; font-family: Georgia, serif !important; font-size: 23px !important; font-weight: 400 !important; } /* ====================================================== HOVER / TOQUE ====================================================== */ #site-navigation .nav-menu > li > a:hover::before, #site-navigation .menu > li > a:hover::before, #site-navigation .nav-menu > li > a:focus::before, #site-navigation .menu > li > a:focus::before { background: #c29a47 !important; border-color: #c29a47 !important; color: #fff !important; } /* ====================================================== ELEMENTO ACTIVO ====================================================== */ #site-navigation .current-menu-item > a::before, #site-navigation .current_page_item > a::before { background: #c29a47 !important; border-color: #c29a47 !important; color: #fff !important; /* anulamos la barra vertical del CSS anterior */ top: 50% !important; bottom: auto !important; left: 16px !important; width: 27px !important; height: 27px !important; transform: translateY(-50%) !important; } /* El hover ya no desplaza el texto, porque ahora tenemos iconos */ #site-navigation .nav-menu > li > a:hover, #site-navigation .menu > li > a:hover, #site-navigation .nav-menu > li > a:focus, #site-navigation .menu > li > a:focus { padding-left: 54px !important; } } /* ========================================================== BENEY TZION · CALENDARIO BÍBLICO CSS CONSOLIDADO ========================================================== */ #bt-calendar { --navy: #173544; --navy-deep: #102b38; --navy-soft: #315361; --gold: #b88d3d; --gold-dark: #8d6829; --gold-light: #ead9b2; --ivory: #fbfaf7; --cream: #f5f1e9; --white: #ffffff; --ink: #26383f; --text: #5c686e; --muted: #7b8589; --border: #e1dbd0; width: 100%; max-width: none; margin: 0; padding: 0; background: #ffffff; color: var(--text); font-family: Arial, Helvetica, sans-serif; overflow: hidden; } #bt-calendar *, #bt-calendar *::before, #bt-calendar *::after { box-sizing: border-box; } #bt-calendar .btcal-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; } #bt-calendar p, #bt-calendar h1, #bt-calendar h2, #bt-calendar h3, #bt-calendar blockquote { overflow-wrap: normal; word-break: normal; hyphens: none; } #bt-calendar a { transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; } /* ========================================================== COMUNES ========================================================== */ #bt-calendar .btcal-overline, #bt-calendar .btcal-mini-title { margin: 0; color: var(--gold-dark); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 2px; } #bt-calendar .btcal-section { padding: 100px 0; } #bt-calendar .btcal-heading { max-width: 720px; margin-bottom: 55px; } #bt-calendar .btcal-heading--center { margin-right: auto; margin-left: auto; text-align: center; } #bt-calendar .btcal-heading__hebrew { margin-bottom: 13px; color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: 25px; } #bt-calendar .btcal-heading h2 { margin: 9px 0 16px; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 5vw, 62px); font-weight: 400; line-height: 1.05; } #bt-calendar .btcal-heading > p:last-child { margin: 0; color: var(--text); font-size: 15px; line-height: 1.75; } /* ========================================================== HERO ========================================================== */ #bt-calendar .btcal-hero { position: relative; padding: 96px 0 88px; background: radial-gradient( circle at 50% 20%, rgba(184,141,61,.09), transparent 38% ), linear-gradient( 180deg, #ffffff 0%, #faf8f3 100% ); border-bottom: 1px solid var(--border); text-align: center; } #bt-calendar .btcal-hero::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: 74px; height: 4px; background: var(--gold); transform: translateX(-50%); } #bt-calendar .btcal-hero__inner { max-width: 900px; margin: 0 auto; } #bt-calendar .btcal-hero__hebrew { margin-bottom: 15px; color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: 27px; } #bt-calendar .btcal-hero h1 { margin: 14px 0 20px; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: clamp(58px, 8vw, 94px); font-weight: 400; line-height: .89; letter-spacing: -2px; } #bt-calendar .btcal-hero__lead { max-width: 730px; margin: 0 auto 25px; color: #45575f; font-size: 17px; line-height: 1.7; } #bt-calendar .btcal-hero__status { display: inline-flex; align-items: center; justify-content: center; margin: 5px 0 10px; padding: 8px 14px; background: #f5eedf; border: 1px solid #e2d1a8; border-radius: 999px; color: var(--gold-dark); font-size: 10px; font-weight: 700; letter-spacing: 1.3px; } #bt-calendar .btcal-hero__note { max-width: 690px; margin: 0 auto 27px; color: var(--text); font-size: 13px; line-height: 1.65; } #bt-calendar .btcal-hero__button { display: inline-flex; align-items: center; gap: 10px; padding: 13px 19px; background: var(--navy); border: 1px solid var(--navy); border-radius: 3px; color: #ffffff; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-decoration: none; } #bt-calendar .btcal-hero__button:hover { background: var(--gold); border-color: var(--gold); color: #ffffff; } /* ========================================================== ESTADO ========================================================== */ #bt-calendar .btcal-state { padding: 66px 0 58px; background: var(--ivory); border-bottom: 1px solid var(--border); } #bt-calendar .btcal-state__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-bottom: 27px; } #bt-calendar .btcal-state__header h2 { margin: 7px 0 0; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: 31px; font-weight: 400; line-height: 1.15; } #bt-calendar .btcal-state__badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 9px 15px; background: #f8f2e4; border: 1px solid #e3d2a9; border-radius: 999px; color: var(--gold-dark); font-size: 9px; font-weight: 700; letter-spacing: 1.1px; } #bt-calendar .btcal-state__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } #bt-calendar .btcal-state__item { min-width: 0; padding: 29px 30px; } #bt-calendar .btcal-state__item:first-child { padding-left: 0; } #bt-calendar .btcal-state__item + .btcal-state__item { border-left: 1px solid var(--border); } #bt-calendar .btcal-state__label { display: block; margin-bottom: 9px; color: var(--gold-dark); font-size: 9px; font-weight: 700; line-height: 1.4; letter-spacing: 1.4px; white-space: normal; } #bt-calendar .btcal-state__item strong { display: block; margin-bottom: 7px; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 400; line-height: 1.25; } #bt-calendar .btcal-state__item small { display: block; color: var(--muted); font-size: 11px; line-height: 1.55; } #bt-calendar .btcal-state__footer { display: flex; align-items: center; gap: 10px; padding-top: 18px; } #bt-calendar .btcal-state__footer p { margin: 0; color: #6e787d; font-size: 10px; line-height: 1.5; } #bt-calendar .btcal-state__dot { flex: 0 0 auto; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; } /* ========================================================== AVISO ========================================================== */ #bt-calendar .btcal-notice { padding: 78px 0 54px; background: linear-gradient( 135deg, #fbfaf6 0%, #f4efe5 100% ); } #bt-calendar .btcal-notice__inner { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 28px; max-width: 890px; margin: 0 auto; } #bt-calendar .btcal-notice__symbol { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; background: #ffffff; border: 1px solid #dcc795; border-radius: 50%; color: var(--gold); font-size: 24px; } #bt-calendar .btcal-notice__content h2 { max-width: 720px; margin: 9px 0 17px; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: clamp(31px, 4vw, 45px); font-weight: 400; line-height: 1.1; } #bt-calendar .btcal-notice__content > p:not(.btcal-mini-title) { max-width: 750px; margin: 0 0 11px; color: var(--text); font-size: 14px; line-height: 1.72; } #bt-calendar .btcal-notice__content strong { color: var(--gold-dark); } #bt-calendar .btcal-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 890px; margin: 38px auto 0; background: rgba(255,255,255,.82); border: 1px solid #e1d8c7; border-radius: 7px; box-shadow: 0 8px 25px rgba(25,47,60,.045); } #bt-calendar .btcal-legend__item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 20px 21px; } #bt-calendar .btcal-legend__item + .btcal-legend__item { border-left: 1px solid #e6dfd3; } #bt-calendar .btcal-legend__symbol { flex: 0 0 auto; color: var(--gold); font-size: 17px; line-height: 1.1; } #bt-calendar .btcal-legend__symbol--confirmed { color: #617d58; } #bt-calendar .btcal-legend__symbol--pending { color: #8b9396; } #bt-calendar .btcal-legend__item strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 12px; } #bt-calendar .btcal-legend__item small { display: block; color: var(--muted); font-size: 10px; line-height: 1.45; } /* ========================================================== FUENTE ========================================================== */ #bt-calendar .btcal-source-section { padding: 26px 0 92px; background: linear-gradient( 180deg, #f4efe5 0%, #ffffff 100% ); } #bt-calendar .btcal-source-panel { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 25px; max-width: 940px; margin: 0 auto; padding: 31px 34px; background: #ffffff; border: 1px solid #ddd5c7; border-radius: 9px; box-shadow: 0 12px 34px rgba(24,49,62,.065); overflow: hidden; } #bt-calendar .btcal-source-panel::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--gold); } #bt-calendar .btcal-source-panel.has-ok::before { background: #708866; } #bt-calendar .btcal-source-panel.has-warning::before { background: #a76550; } #bt-calendar .btcal-source-panel.has-change::before { background: var(--gold); } #bt-calendar .btcal-source-panel__icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: var(--navy); border-radius: 50%; color: #ffffff; font-size: 17px; font-weight: 700; } #bt-calendar .btcal-source-panel__content { min-width: 0; } #bt-calendar .btcal-source-panel h2 { margin: 7px 0 24px; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 400; line-height: 1.1; } #bt-calendar .btcal-source-panel__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, .8fr); gap: 35px; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } #bt-calendar .btcal-source-panel__main, #bt-calendar .btcal-source-panel__status { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 5px; } #bt-calendar .btcal-source-panel__label { margin-bottom: 3px; color: var(--gold-dark); font-size: 8px; font-weight: 700; letter-spacing: 1.3px; } #bt-calendar #btcal-source-name { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 400; line-height: 1.35; } #bt-calendar #btcal-source-authority, #bt-calendar #btcal-source-document, #bt-calendar #btcal-source-checked { color: #6b767b; font-size: 11px; line-height: 1.5; } #bt-calendar .btcal-monitor-status { display: inline-flex; align-items: center; margin-bottom: 2px; padding: 7px 10px; border: 1px solid #ddd8cd; border-radius: 999px; font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: .7px; } #bt-calendar .btcal-monitor-status.is-ok { background: #edf3eb; border-color: #cbdcc7; color: #506c49; } #bt-calendar .btcal-monitor-status.is-changed { background: #f8f0de; border-color: #e5d19d; color: #856422; } #bt-calendar .btcal-monitor-status.is-warning { background: #f6ece8; border-color: #e3c9bd; color: #8a5544; } #bt-calendar .btcal-monitor-status.is-pending { background: #f1f1ee; border-color: #d9d9d2; color: #687277; } #bt-calendar .btcal-source-panel__reference { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 11px; margin-top: 17px; } #bt-calendar .btcal-source-panel__reference span { color: #8b9295; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; } #bt-calendar .btcal-source-panel__reference strong { color: var(--ink); font-size: 11px; } #bt-calendar .btcal-source-panel__note { max-width: 750px; margin: 17px 0 18px; color: var(--text); font-size: 11px; line-height: 1.72; } #bt-calendar .btcal-source-panel__note strong { color: var(--gold-dark); } #bt-calendar .btcal-source-panel__link { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-decoration: none; } #bt-calendar .btcal-source-panel__link span { color: var(--gold); font-size: 15px; } #bt-calendar .btcal-source-panel__link:hover { color: var(--gold-dark); gap: 12px; } /* ========================================================== MOADIM ========================================================== */ #bt-calendar .btcal-moadim { background: linear-gradient( 180deg, #ffffff 0%, #fbfaf7 100% ); } #bt-calendar .btcal-season + .btcal-season { margin-top: 78px; } #bt-calendar .btcal-season__header { display: flex; align-items: center; gap: 16px; margin-bottom: 21px; } #bt-calendar .btcal-season__header > span { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--navy); border-radius: 50%; color: #ffffff; font-size: 10px; font-weight: 700; } #bt-calendar .btcal-season__header p { margin: 0 0 2px; color: var(--gold-dark); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; } #bt-calendar .btcal-season__header h3 { margin: 0; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 400; } #bt-calendar .btcal-feasts { display: grid; gap: 13px; } /* ========================================================== TARJETAS MOADIM ========================================================== */ #bt-calendar .btcal-feast { position: relative; background: #ffffff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 5px 20px rgba(25,48,61,.045); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } #bt-calendar .btcal-feast::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--gold); } #bt-calendar .btcal-feast:hover { border-color: #d5c8ad; box-shadow: 0 10px 27px rgba(25,48,61,.075); transform: translateY(-1px); } #bt-calendar .btcal-feast__top { display: grid; grid-template-columns: 54px minmax(220px, 1.25fr) minmax(220px, .9fr) 50px; align-items: center; gap: 24px; min-width: 0; padding: 25px 27px 25px 30px; } #bt-calendar .btcal-feast__number { color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: 23px; line-height: 1; } #bt-calendar .btcal-feast__title, #bt-calendar .btcal-feast__date { min-width: 0; } #bt-calendar .btcal-feast__hebrew { margin-bottom: 3px; color: var(--gold-dark); font-family: Georgia, "Times New Roman", serif; font-size: 14px; } #bt-calendar .btcal-feast__title h3 { margin: 0 0 4px; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 400; line-height: 1.15; } #bt-calendar .btcal-feast__subtitle { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; } #bt-calendar .btcal-feast__date { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } #bt-calendar .btcal-date-status { display: inline-flex; width: auto; padding: 6px 9px; background: #f8f1e1; border: 1px solid #e6d7b5; border-radius: 999px; color: var(--gold-dark); font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: .8px; } #bt-calendar .btcal-feast__date strong { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 400; line-height: 1.25; } #bt-calendar .btcal-feast__date small { color: var(--muted); font-size: 10px; line-height: 1.45; } /* BOTÓN + */ #bt-calendar .btcal-feast__button { display: flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 !important; appearance: none; -webkit-appearance: none; background: var(--navy) !important; border: 2px solid var(--navy) !important; border-radius: 50% !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 27px !important; font-weight: 300 !important; line-height: 1 !important; cursor: pointer; box-shadow: 0 5px 14px rgba(23,53,68,.18); opacity: 1 !important; visibility: visible !important; transition: background .2s ease, border-color .2s ease, transform .2s ease; } #bt-calendar .btcal-feast__button:hover, #bt-calendar .btcal-feast.is-open .btcal-feast__button { background: var(--gold) !important; border-color: var(--gold) !important; color: #ffffff !important; transform: scale(1.05); } /* DETALLES */ #bt-calendar .btcal-feast__details { display: none; margin: 0 27px 0 30px; padding: 23px 0 25px 78px; border-top: 1px solid var(--border); } #bt-calendar .btcal-feast.is-open .btcal-feast__details { display: block; } #bt-calendar .btcal-feast__details > p { max-width: 760px; margin: 0; color: var(--text); font-size: 13px; line-height: 1.75; } #bt-calendar .btcal-feast__references { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 16px; } #bt-calendar .btcal-feast__references a { color: var(--gold-dark); font-size: 9px; font-weight: 700; letter-spacing: .7px; text-decoration: none; } #bt-calendar .btcal-feast__references a:hover { color: var(--navy); } /* FUENTE DE CONFIRMACIÓN */ #bt-calendar .btcal-source { display: none; max-width: 720px; margin-top: 21px; padding: 17px 19px; background: linear-gradient( 135deg, #fbf9f3, #f4eddd ); border: 1px solid #e2d6bc; border-left: 3px solid var(--gold); border-radius: 5px; } #bt-calendar .btcal-source.is-visible { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } #bt-calendar .btcal-source__label { color: var(--gold-dark); font-size: 8px; font-weight: 700; letter-spacing: 1.3px; } #bt-calendar .btcal-source__name { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-weight: 400; } #bt-calendar .btcal-source__authority, #bt-calendar .btcal-source__document, #bt-calendar .btcal-source__confirmed { color: #687278; font-size: 10px; line-height: 1.5; } #bt-calendar .btcal-source__link { margin-top: 6px; color: var(--gold-dark); font-size: 9px; font-weight: 700; letter-spacing: .8px; text-decoration: none; } #bt-calendar .btcal-feast.is-confirmed { border-color: #d3c391; } #bt-calendar .btcal-feast.is-confirmed::before { background: #6f875f; } #bt-calendar .btcal-feast.is-confirmed .btcal-date-status { background: #edf3eb; border-color: #cadbc6; color: #506c49; } /* ========================================================== CALENDARIO ANUAL ========================================================== */ #bt-calendar .btcal-calendar-section { background: var(--cream); } #bt-calendar .btcal-calendar { max-width: 920px; margin: 0 auto; background: #ffffff; border: 1px solid #ddd5c8; border-radius: 9px; box-shadow: 0 13px 36px rgba(25,47,60,.075); overflow: hidden; } #bt-calendar .btcal-calendar__header { display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; min-height: 128px; padding: 23px 28px; background: linear-gradient( 135deg, var(--navy-deep) 0%, #244d5f 100% ); text-align: center; } #bt-calendar .btcal-calendar__header span { display: block; margin-bottom: 4px; color: #e4c67f; font-size: 9px; font-weight: 700; letter-spacing: 2px; } #bt-calendar .btcal-calendar__header h3 { margin: 0; color: #ffffff; font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 400; line-height: 1.1; } #bt-calendar .btcal-calendar__header button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto; padding: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(229,199,127,.5); border-radius: 50%; color: #ffffff; font-size: 28px; line-height: 1; cursor: pointer; } #bt-calendar .btcal-calendar__header button:hover { background: var(--gold); border-color: var(--gold); } #bt-calendar .btcal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #f3eee4; border-bottom: 1px solid var(--border); } #bt-calendar .btcal-weekdays span { padding: 14px 5px; color: var(--gold-dark); font-size: 9px; font-weight: 700; text-align: center; letter-spacing: 1px; } #bt-calendar .btcal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } #bt-calendar .btcal-day { position: relative; min-width: 0; min-height: 105px; padding: 12px; background: #ffffff; border-right: 1px solid #eee9e0; border-bottom: 1px solid #eee9e0; color: #344149; font-size: 12px; } #bt-calendar .btcal-day:nth-child(7n) { border-right: 0; } #bt-calendar .btcal-day--empty { background: #fbfaf7; } #bt-calendar .btcal-day > span:first-child { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; height: 23px; color: #344149; font-size: 12px; font-weight: 700; } #bt-calendar .btcal-day--feast { background: linear-gradient( 180deg, #fcf8ef 0%, #f4ecd9 100% ); } #bt-calendar .btcal-day--feast::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gold); } #bt-calendar .btcal-day--confirmed { background: linear-gradient( 180deg, #f1f5ed 0%, #e8f0e3 100% ); } #bt-calendar .btcal-day--confirmed::before { background: #6f875f; } #bt-calendar .btcal-day__event { position: relative; display: block; margin-top: 8px; padding-left: 12px; color: #76591f; font-size: 8px; font-weight: 700; line-height: 1.4; text-transform: uppercase; } #bt-calendar .btcal-day__event::before { content: ""; position: absolute; top: .42em; left: 0; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; } #bt-calendar .btcal-day__event.is-confirmed::before { background: #6f875f; } #bt-calendar .btcal-calendar-key { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 23px; color: #626e73; font-size: 10px; font-weight: 600; } #bt-calendar .btcal-key-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--gold); border-radius: 50%; } #bt-calendar .btcal-calendar-warning { max-width: 720px; margin: 18px auto 0; color: #737d81; font-size: 9px; line-height: 1.6; text-align: center; } /* ========================================================== MÉTODO ========================================================== */ #bt-calendar .btcal-method { background: #ffffff; } #bt-calendar .btcal-method__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } #bt-calendar .btcal-method__card { min-width: 0; padding: 34px 30px; background: linear-gradient( 180deg, #ffffff, #fbfaf7 ); border: 1px solid var(--border); border-radius: 8px; text-align: center; } #bt-calendar .btcal-method__icon { display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; margin: 0 auto 17px; background: #f7f0e1; border: 1px solid #e6d4ac; border-radius: 50%; font-size: 22px; } #bt-calendar .btcal-method__card > span { display: block; margin-bottom: 7px; color: var(--gold-dark); font-size: 8px; font-weight: 700; letter-spacing: 1.4px; } #bt-calendar .btcal-method__card h3 { margin: 0 0 11px; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 400; } #bt-calendar .btcal-method__card p { margin: 0; color: var(--text); font-size: 12px; line-height: 1.7; } /* ========================================================== PRINCIPIO FINAL ========================================================== */ #bt-calendar .btcal-principle { position: relative; padding: 94px 0; background: radial-gradient( circle at 50% 0%, rgba(184,141,61,.11), transparent 42% ), linear-gradient( 180deg, #faf7f0 0%, #f2ecdf 100% ); border-top: 1px solid #e0d5c0; } #bt-calendar .btcal-principle::before { content: ""; position: absolute; top: 0; left: 50%; width: 72px; height: 3px; background: var(--gold); transform: translateX(-50%); } #bt-calendar .btcal-principle__inner { max-width: 800px; margin: 0 auto; text-align: center; } #bt-calendar .btcal-principle__symbol { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin: 0 auto 18px; background: #ffffff; border: 1px solid #dbc38b; border-radius: 50%; color: var(--gold); font-size: 18px; } #bt-calendar .btcal-principle__hebrew { margin-bottom: 9px; color: var(--gold-dark); font-family: Georgia, "Times New Roman", serif; font-size: 21px; } #bt-calendar .btcal-principle h2 { margin: 10px 0 25px; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: clamp(36px, 5vw, 52px); font-weight: 400; line-height: 1.1; } #bt-calendar .btcal-principle blockquote { margin: 0 auto 24px; padding: 25px 31px; background: rgba(255,255,255,.62); border: 1px solid rgba(193,163,98,.32); border-radius: 7px; color: #47585f; font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-style: italic; line-height: 1.75; } #bt-calendar .btcal-principle a { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-dark); font-size: 9px; font-weight: 700; letter-spacing: 1.1px; text-decoration: none; } #bt-calendar .btcal-principle a:hover { color: var(--navy); } /* ========================================================== TABLET ========================================================== */ @media screen and (max-width: 900px) { #bt-calendar .btcal-feast__top { grid-template-columns: 44px minmax(0, 1fr) minmax(180px, .75fr) 46px; gap: 16px; padding: 22px 20px 22px 24px; } #bt-calendar .btcal-feast__details { margin: 0 20px 0 24px; padding-left: 60px; } } /* ========================================================== MÓVIL ========================================================== */ @media screen and (max-width: 767px) { #bt-calendar .btcal-container { width: calc(100% - 28px); } #bt-calendar .btcal-section { padding: 68px 0; } /* HERO */ #bt-calendar .btcal-hero { padding: 67px 0 62px; } #bt-calendar .btcal-hero__hebrew { font-size: 22px; } #bt-calendar .btcal-hero h1 { margin-top: 12px; font-size: clamp(47px, 16vw, 66px); line-height: .93; letter-spacing: -1px; } #bt-calendar .btcal-hero__lead { font-size: 14px; } #bt-calendar .btcal-hero__note { font-size: 11px; } /* ESTADO */ #bt-calendar .btcal-state { padding: 50px 0 44px; } #bt-calendar .btcal-state__header { align-items: flex-start; flex-direction: column; gap: 16px; } #bt-calendar .btcal-state__header h2 { font-size: 27px; } #bt-calendar .btcal-state__grid { grid-template-columns: 1fr; } #bt-calendar .btcal-state__item { padding: 20px 0 !important; } #bt-calendar .btcal-state__item + .btcal-state__item { border-top: 1px solid var(--border); border-left: 0; } #bt-calendar .btcal-state__item strong { font-size: 20px; } /* AVISO */ #bt-calendar .btcal-notice { padding: 59px 0 38px; } #bt-calendar .btcal-notice__inner { grid-template-columns: 1fr; gap: 18px; } #bt-calendar .btcal-notice__symbol { width: 48px; height: 48px; font-size: 20px; } #bt-calendar .btcal-notice__content h2 { font-size: 31px; } #bt-calendar .btcal-notice__content > p:not(.btcal-mini-title) { font-size: 13px; } #bt-calendar .btcal-legend { grid-template-columns: 1fr; margin-top: 28px; } #bt-calendar .btcal-legend__item + .btcal-legend__item { border-top: 1px solid #e6dfd3; border-left: 0; } /* FUENTE */ #bt-calendar .btcal-source-section { padding: 20px 0 65px; } #bt-calendar .btcal-source-panel { grid-template-columns: 1fr; gap: 17px; padding: 24px 20px; } #bt-calendar .btcal-source-panel__icon { width: 40px; height: 40px; } #bt-calendar .btcal-source-panel h2 { font-size: 29px; } #bt-calendar .btcal-source-panel__grid { grid-template-columns: 1fr; gap: 19px; } #bt-calendar .btcal-source-panel__status { padding-top: 18px; border-top: 1px solid var(--border); } /* ENCABEZADOS */ #bt-calendar .btcal-heading { margin-bottom: 38px; } #bt-calendar .btcal-heading h2 { font-size: 39px; } #bt-calendar .btcal-heading > p:last-child { font-size: 13px; } /* MOADIM */ #bt-calendar .btcal-season + .btcal-season { margin-top: 58px; } #bt-calendar .btcal-feast__top { grid-template-columns: 34px minmax(0, 1fr) 42px; gap: 10px 13px; padding: 20px 16px 20px 19px; } #bt-calendar .btcal-feast__number { grid-column: 1; grid-row: 1; font-size: 18px; } #bt-calendar .btcal-feast__title { grid-column: 2; grid-row: 1; } #bt-calendar .btcal-feast__button { grid-column: 3; grid-row: 1; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; font-size: 24px !important; } #bt-calendar .btcal-feast__date { grid-column: 2 / 4; grid-row: 2; padding-top: 5px; } #bt-calendar .btcal-feast__title h3 { font-size: 22px; } #bt-calendar .btcal-feast__date strong { font-size: 17px; } #bt-calendar .btcal-feast__details { margin: 0 16px 0 19px; padding: 19px 0 22px 47px; } #bt-calendar .btcal-feast__details > p { font-size: 12px; } /* CALENDARIO */ #bt-calendar .btcal-calendar__header { grid-template-columns: 48px 1fr 48px; min-height: 102px; padding: 16px 8px; } #bt-calendar .btcal-calendar__header h3 { font-size: 27px; } #bt-calendar .btcal-calendar__header button { width: 38px; height: 38px; font-size: 24px; } #bt-calendar .btcal-weekdays span { padding: 10px 1px; font-size: 7px; letter-spacing: .2px; } #bt-calendar .btcal-day { min-height: 70px; padding: 6px 4px; font-size: 9px; } #bt-calendar .btcal-day > span:first-child { min-width: 18px; height: 18px; font-size: 9px; } #bt-calendar .btcal-day__event { margin-top: 4px; padding-left: 0; font-size: 6.5px; line-height: 1.2; overflow-wrap: anywhere; } #bt-calendar .btcal-day__event::before { position: static; display: inline-block; width: 5px; height: 5px; margin-right: 2px; vertical-align: 1px; } #bt-calendar .btcal-calendar-key { gap: 8px 15px; font-size: 8px; } /* MÉTODO */ #bt-calendar .btcal-method__grid { grid-template-columns: 1fr; } /* PRINCIPIO */ #bt-calendar .btcal-principle { padding: 68px 0; } #bt-calendar .btcal-principle h2 { font-size: 36px; } #bt-calendar .btcal-principle blockquote { padding: 21px 18px; font-size: 15px; } }/* ========================================================== CALENDARIO ANUAL CABECERA DEL MES + BOTONES DE NAVEGACIÓN ========================================================== */ /* Nombre del mes */ #bt-calendar .btcal-calendar__header h3, #bt-calendar #btcal-month { margin: 0 !important; color: #ffffff !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 36px !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: 1px !important; text-shadow: 0 2px 3px rgba(0, 0, 0, .32), 0 5px 14px rgba(0, 0, 0, .18) !important; } /* Año sobre el nombre del mes */ #bt-calendar .btcal-calendar__header span { color: #e3bd68 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2px !important; } /* ========================================================== BOTONES ANTERIOR / SIGUIENTE ========================================================== */ #bt-calendar #btcal-prev, #bt-calendar #btcal-next { display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; padding: 0 !important; background: #173544 !important; border: 1px solid #b88d3d !important; border-radius: 4px !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 30px !important; font-weight: 400 !important; line-height: 1 !important; box-shadow: 0 6px 16px rgba(16, 43, 56, .20), inset 0 0 0 1px rgba(255, 255, 255, .035) !important; cursor: pointer !important; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease !important; } /* Hover */ #bt-calendar #btcal-prev:hover, #bt-calendar #btcal-next:hover { background: #b88d3d !important; border-color: #b88d3d !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(16, 43, 56, .24) !important; } /* Al pulsar */ #bt-calendar #btcal-prev:active, #bt-calendar #btcal-next:active { transform: translateY(0) !important; } /* Accesibilidad con teclado */ #bt-calendar #btcal-prev:focus-visible, #bt-calendar #btcal-next:focus-visible { outline: 2px solid #e3bd68 !important; outline-offset: 3px !important; } /* ========================================================== MÓVIL ========================================================== */ @media screen and (max-width: 767px) { #bt-calendar .btcal-calendar__header h3, #bt-calendar #btcal-month { font-size: 29px !important; text-shadow: 0 2px 3px rgba(0, 0, 0, .30), 0 4px 10px rgba(0, 0, 0, .16) !important; } #bt-calendar #btcal-prev, #bt-calendar #btcal-next { width: 40px !important; height: 40px !important; font-size: 26px !important; } }/* ========================================================== BOTÓN HERO · VER LOS MOADIM ========================================================== */ #bt-calendar .btcal-hero__button, #bt-calendar .btcal-hero__button:link, #bt-calendar .btcal-hero__button:visited { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 11px !important; padding: 15px 23px !important; background: #173544 !important; border: 1px solid #b88d3d !important; border-radius: 4px !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 1.4px !important; text-decoration: none !important; text-transform: uppercase !important; box-shadow: 0 6px 16px rgba(16, 43, 56, .18), inset 0 0 0 1px rgba(255, 255, 255, .035) !important; cursor: pointer !important; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease !important; } /* Flecha */ #bt-calendar .btcal-hero__button span { color: #e3bd68 !important; font-size: 14px !important; line-height: 1 !important; transition: color .2s ease, transform .2s ease !important; } /* Hover */ #bt-calendar .btcal-hero__button:hover, #bt-calendar .btcal-hero__button:focus { background: #b88d3d !important; border-color: #b88d3d !important; color: #ffffff !important; text-decoration: none !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(16, 43, 56, .22) !important; } #bt-calendar .btcal-hero__button:hover span, #bt-calendar .btcal-hero__button:focus span { color: #ffffff !important; transform: translateY(2px); } /* Al pulsar */ #bt-calendar .btcal-hero__button:active { transform: translateY(0) !important; } /* Teclado */ #bt-calendar .btcal-hero__button:focus-visible { outline: 2px solid #e3bd68 !important; outline-offset: 3px !important; } /* MÓVIL */ @media screen and (max-width: 767px) { #bt-calendar .btcal-hero__button { padding: 14px 20px !important; font-size: 9px !important; letter-spacing: 1.2px !important; } }/* ========================================================== BENEY TZION · ARTÍCULO DESTACADO CON PORTADA VERSIÓN FINAL ========================================================== */ /* ========================================================== TARJETA ========================================================== */ .bt-featured-link, .bt-featured-link:link, .bt-featured-link:visited { display: block !important; width: min(860px, 100%) !important; margin: 38px auto !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #e1dbd0 !important; border-radius: 9px !important; color: #173544 !important; text-decoration: none !important; background-image: none !important; box-shadow: 0 14px 38px rgba(16, 43, 56, .10) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; } /* Evita subrayados heredados del tema */ .bt-featured-link *, .bt-featured-link:hover *, .bt-featured-link:visited * { text-decoration: none !important; } /* ========================================================== PORTADA ========================================================== */ .bt-featured-link__image { position: relative; display: block; width: 100%; height: 330px; overflow: hidden; background: #102b38; } .bt-featured-link__image img { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; border: 0 !important; border-radius: 0 !important; transition: transform .5s ease !important; } /* Degradado inferior sobre la portada */ .bt-featured-link__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(16, 43, 56, 0) 42%, rgba(16, 43, 56, .32) 100% ); pointer-events: none; } /* ========================================================== ETIQUETA SOBRE LA IMAGEN ========================================================== */ .bt-featured-link__badge { position: absolute; z-index: 3; left: 27px; bottom: 23px; display: inline-flex; align-items: center; min-height: 29px; padding: 0 13px; background: rgba(16, 43, 56, .94); border: 1px solid rgba(227, 189, 104, .78); border-radius: 3px; color: #e3bd68 !important; font-family: Arial, Helvetica, sans-serif; font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: 1.7px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } /* ========================================================== CUERPO ========================================================== */ .bt-featured-link__body { position: relative; display: block; padding: 32px 36px 33px; background: #ffffff; } /* Pequeña línea dorada superior */ .bt-featured-link__body::before { content: ""; position: absolute; top: 0; left: 36px; width: 52px; height: 3px; background: #b88d3d; } /* ========================================================== FUENTE ========================================================== */ .bt-featured-link__source { display: block; margin: 0 0 10px; color: #b88d3d !important; font-family: Arial, Helvetica, sans-serif; font-size: 8px; font-weight: 700; line-height: 1.4; letter-spacing: 1.8px; } /* ========================================================== TÍTULO ========================================================== */ .bt-featured-link__title { display: block; max-width: 730px; margin: 0 0 14px !important; color: #173544 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 29px !important; font-weight: 400 !important; line-height: 1.24 !important; letter-spacing: -.2px; text-decoration: none !important; } /* ========================================================== DESCRIPCIÓN ========================================================== */ .bt-featured-link__description { display: block; max-width: 700px; margin: 0; color: #5c686e !important; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.75; } /* ========================================================== BOTÓN / FRANJA LEER EL ESTUDIO COMPLETO ========================================================== */ .bt-featured-link__footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 54px; margin-top: 27px; padding: 0 0 0 21px; overflow: hidden; background: #173544 !important; border: 1px solid #173544; border-radius: 4px; box-shadow: 0 6px 16px rgba(16, 43, 56, .10); transition: background .22s ease, border-color .22s ease, box-shadow .22s ease; } /* Texto blanco */ .bt-featured-link__action { display: block; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; text-decoration: none !important; } /* ========================================================== FLECHA ========================================================== */ .bt-featured-link__arrow { display: flex; align-self: stretch; align-items: center; justify-content: center; width: 56px; min-height: 52px; flex: 0 0 56px; background: #102b38 !important; border: 0; border-left: 1px solid rgba(184, 141, 61, .60); color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 19px; font-weight: 400; line-height: 1; transition: background .22s ease, color .22s ease; } /* ========================================================== HOVER DE LA TARJETA ========================================================== */ .bt-featured-link:hover { border-color: rgba(184, 141, 61, .72) !important; transform: translateY(-4px); box-shadow: 0 22px 48px rgba(16, 43, 56, .16) !important; color: #173544 !important; text-decoration: none !important; } /* Zoom muy ligero de la portada */ .bt-featured-link:hover .bt-featured-link__image img { transform: scale(1.025); } /* Botón ligeramente más oscuro */ .bt-featured-link:hover .bt-featured-link__footer { background: #102b38 !important; border-color: #b88d3d; box-shadow: 0 8px 20px rgba(16, 43, 56, .16); } /* Flecha dorada */ .bt-featured-link:hover .bt-featured-link__arrow { background: #b88d3d !important; color: #ffffff !important; } /* Mantener el título azul */ .bt-featured-link:hover .bt-featured-link__title { color: #173544 !important; } /* Mantener texto del botón blanco */ .bt-featured-link:hover .bt-featured-link__action { color: #ffffff !important; } /* ========================================================== ACCESIBILIDAD ========================================================== */ .bt-featured-link:focus-visible { outline: 2px solid #b88d3d !important; outline-offset: 4px; } /* ========================================================== TABLET ========================================================== */ @media screen and (max-width: 800px) { .bt-featured-link__image { height: 285px; } .bt-featured-link__title { font-size: 26px !important; } } /* ========================================================== MÓVIL ========================================================== */ @media screen and (max-width: 600px) { .bt-featured-link, .bt-featured-link:link, .bt-featured-link:visited { width: 100% !important; margin: 28px auto !important; border-radius: 7px !important; } /* Portada */ .bt-featured-link__image { height: 215px; } .bt-featured-link__badge { left: 18px; bottom: 17px; min-height: 27px; padding: 0 10px; font-size: 7px; letter-spacing: 1.3px; } /* Cuerpo */ .bt-featured-link__body { padding: 27px 22px 24px; } .bt-featured-link__body::before { left: 22px; width: 43px; } /* Fuente */ .bt-featured-link__source { font-size: 7px; letter-spacing: 1.5px; } /* Título */ .bt-featured-link__title { font-size: 23px !important; line-height: 1.27 !important; } /* Descripción */ .bt-featured-link__description { font-size: 12px; line-height: 1.7; } /* Botón */ .bt-featured-link__footer { min-height: 50px; margin-top: 23px; padding-left: 16px; } .bt-featured-link__action { color: #ffffff !important; font-size: 8px; letter-spacing: 1.15px; } .bt-featured-link__arrow { width: 50px; min-height: 48px; flex-basis: 50px; color: #ffffff !important; font-size: 17px; } } /* ========================================================== MÓVILES PEQUEÑOS ========================================================== */ @media screen and (max-width: 390px) { .bt-featured-link__image { height: 190px; } .bt-featured-link__body { padding-left: 19px; padding-right: 19px; } .bt-featured-link__body::before { left: 19px; } .bt-featured-link__title { font-size: 21px !important; } .bt-featured-link__footer { padding-left: 14px; } .bt-featured-link__action { font-size: 7px; letter-spacing: 1px; } .bt-featured-link__arrow { width: 46px; flex-basis: 46px; } }/* ========================================================== BENEY TZION · HERO CALENDARIO MÓVIL · VERSIÓN CORREGIDA ========================================================== */ @media screen and (max-width: 600px) { /* Evitar cualquier desbordamiento horizontal */ #bt-calendar { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } /* HERO */ #bt-calendar .btcal-hero { width: 100% !important; max-width: 100% !important; padding-left: 18px !important; padding-right: 18px !important; overflow: hidden !important; } #bt-calendar .btcal-hero__inner, #bt-calendar .btcal-hero__content { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; } /* HEBREO */ #bt-calendar .btcal-hero__hebrew { margin-bottom: 22px !important; font-size: 20px !important; line-height: 1.2 !important; } /* BENEY TZION · CALENDARIO BÍBLICO */ #bt-calendar .btcal-hero .btcal-overline { width: 100% !important; max-width: 100% !important; margin: 0 auto 17px !important; font-size: 9px !important; font-weight: 700 !important; line-height: 1.45 !important; letter-spacing: 2.2px !important; text-align: center !important; white-space: normal !important; } /* ====================================================== TÍTULO PRINCIPAL ====================================================== */ #bt-calendar .btcal-hero h1 { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto 29px !important; padding: 0 !important; color: #53636a !important; font-family: Georgia, "Times New Roman", serif !important; /* * Recuperamos el peso visual de la versión anterior. */ font-weight: 700 !important; /* * Lo suficientemente grande para mantener impacto, * pero CALENDARIO entra completo. */ font-size: clamp(43px, 11.8vw, 55px) !important; line-height: .91 !important; /* * Una ligera compresión ayuda especialmente * con la palabra CALENDARIO. */ letter-spacing: -2.3px !important; text-align: center !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } /* Evita estilos heredados */ #bt-calendar .btcal-hero h1 * { max-width: 100% !important; font-weight: 700 !important; word-break: normal !important; white-space: normal !important; } /* TEXTO INTRODUCTORIO */ #bt-calendar .btcal-hero__lead { width: 100% !important; max-width: 500px !important; margin: 0 auto 26px !important; padding: 0 5px !important; font-size: 16px !important; line-height: 1.55 !important; text-align: center !important; } /* PREVISIÓN OBSERVACIONAL */ #bt-calendar .btcal-hero__status { display: inline-flex !important; align-items: center !important; justify-content: center !important; max-width: 100% !important; margin: 0 auto 18px !important; padding: 11px 19px !important; font-size: 9px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 1.5px !important; text-align: center !important; white-space: normal !important; } /* NOTA */ #bt-calendar .btcal-hero__note { width: 100% !important; max-width: 470px !important; margin: 0 auto 29px !important; padding: 0 5px !important; font-size: 12px !important; line-height: 1.6 !important; text-align: center !important; } /* BOTÓN */ #bt-calendar .btcal-hero__button, #bt-calendar .btcal-hero__button:link, #bt-calendar .btcal-hero__button:visited { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: 100% !important; min-height: 54px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 28px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2px !important; white-space: nowrap !important; } } /* ========================================================== TELÉFONOS ESTRECHOS ========================================================== */ @media screen and (max-width: 430px) { #bt-calendar .btcal-hero { padding-left: 15px !important; padding-right: 15px !important; } #bt-calendar .btcal-hero h1 { font-size: 45px !important; font-weight: 700 !important; line-height: .92 !important; letter-spacing: -2.2px !important; } } /* ========================================================== IPHONE / MÓVILES MUY ESTRECHOS ========================================================== */ @media screen and (max-width: 390px) { #bt-calendar .btcal-hero { padding-left: 12px !important; padding-right: 12px !important; } #bt-calendar .btcal-hero h1 { font-size: 41px !important; font-weight: 700 !important; line-height: .93 !important; letter-spacing: -2px !important; } #bt-calendar .btcal-hero .btcal-overline { font-size: 8px !important; letter-spacing: 1.7px !important; } #bt-calendar .btcal-hero__status { padding-left: 15px !important; padding-right: 15px !important; font-size: 8px !important; letter-spacing: 1.2px !important; } #bt-calendar .btcal-hero__button, #bt-calendar .btcal-hero__button:link, #bt-calendar .btcal-hero__button:visited { width: min(100%, 290px) !important; padding-left: 18px !important; padding-right: 18px !important; } } /* ========================================================== PANTALLAS MUY PEQUEÑAS ========================================================== */ @media screen and (max-width: 350px) { #bt-calendar .btcal-hero h1 { font-size: 37px !important; letter-spacing: -1.7px !important; } }/* ========================================================== BENEY TZION · ÚLTIMAS TRANSMISIONES ========================================================== */ #bt-live { --navy: #173544; --navy-deep: #102b38; --navy-soft: #315361; --gold: #b88d3d; --gold-light: #e3bd68; --white: #ffffff; --ivory: #fbfaf7; --cream: #f5f1e9; --ink: #26383f; --text: #5c686e; --muted: #7b8589; --border: #e1dbd0; --live: #b43a35; width: 100%; padding: 82px 0; background: radial-gradient( circle at 50% 0%, rgba(184,141,61,.08), transparent 30% ), #fbfaf7; } #bt-live * { box-sizing: border-box; } #bt-live .btlive__container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; } /* ========================================================== CABECERA ========================================================== */ #bt-live .btlive__header { max-width: 720px; margin: 0 auto 47px; text-align: center; } #bt-live .btlive__eyebrow { display: block; margin-bottom: 10px; color: var(--gold); font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 2.5px; } #bt-live .btlive__hebrew { margin-bottom: 8px; color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: 18px; } #bt-live .btlive__header h2 { margin: 0 0 17px !important; color: var(--navy) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(42px, 5vw, 59px) !important; font-weight: 400 !important; line-height: 1.05 !important; } #bt-live .btlive__header p { max-width: 570px; margin: 0 auto !important; color: var(--text) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 16px !important; line-height: 1.65 !important; } /* ========================================================== CARGA ========================================================== */ #bt-live .btlive__loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 170px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 1.4px; } #bt-live .btlive__loader { width: 19px; height: 19px; border: 2px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: btlive-spin .8s linear infinite; } @keyframes btlive-spin { to { transform: rotate(360deg); } } #bt-live .btlive__error { max-width: 720px; margin: 30px auto; padding: 25px; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--gold); color: var(--text); text-align: center; } /* ========================================================== TRANSMISIÓN DESTACADA ========================================================== */ #bt-live .btlive-featured { display: grid; grid-template-columns: 1.2fr .8fr; overflow: hidden; background: #ffffff; border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 17px 42px rgba(16,43,56,.10); } /* IMAGEN */ #bt-live .btlive-featured__image { position: relative; display: block; min-height: 430px; overflow: hidden; background: var(--navy-deep); text-decoration: none !important; } #bt-live .btlive-featured__image img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .45s ease; } #bt-live .btlive-featured__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(16,43,56,.02), rgba(16,43,56,.38) ); } #bt-live .btlive-featured__image:hover img { transform: scale(1.025); } /* ESTADO */ #bt-live .btlive-featured__status { position: absolute; z-index: 3; top: 23px; left: 23px; padding: 9px 12px; background: rgba(16,43,56,.94); border: 1px solid rgba(227,189,104,.75); border-radius: 3px; color: var(--gold-light); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; } #bt-live .btlive-featured__status.is-live { background: #b43a35; border-color: #d95c55; color: #ffffff; } #bt-live .btlive-featured__status.is-live::before { content: "●"; margin-right: 6px; } /* PLAY */ #bt-live .btlive-featured__play { position: absolute; z-index: 3; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; transform: translate(-50%, -50%); background: rgba(16,43,56,.92); border: 1px solid var(--gold); border-radius: 50%; color: #ffffff; font-size: 22px; box-shadow: 0 10px 28px rgba(0,0,0,.22); transition: background .2s ease, transform .2s ease; } #bt-live .btlive-featured__image:hover .btlive-featured__play { background: var(--gold); transform: translate(-50%, -50%) scale(1.06); } /* CUERPO */ #bt-live .btlive-featured__body { display: flex; flex-direction: column; justify-content: center; padding: 42px 39px; } #bt-live .btlive-featured__overline { display: block; margin-bottom: 11px; color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: 1.8px; } #bt-live .btlive-featured__body h3 { margin: 0 0 18px !important; color: var(--navy) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 31px !important; font-weight: 400 !important; line-height: 1.18 !important; } #bt-live .btlive-featured__description { display: -webkit-box; margin: 0 0 24px !important; overflow: hidden; color: var(--text) !important; font-size: 12px !important; line-height: 1.75 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } #bt-live .btlive-featured__footer { margin-top: auto; } #bt-live .btlive-featured__date { display: block; margin-bottom: 17px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: 1.3px; } /* BOTÓN */ #bt-live .btlive-featured__button, #bt-live .btlive-featured__button:link, #bt-live .btlive-featured__button:visited { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding-left: 20px; overflow: hidden; background: var(--navy) !important; border: 1px solid var(--navy); border-radius: 4px; color: #ffffff !important; text-decoration: none !important; } #bt-live .btlive-featured__button span { color: #ffffff !important; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; } #bt-live .btlive-featured__button b { display: flex; align-self: stretch; align-items: center; justify-content: center; width: 55px; border-left: 1px solid rgba(184,141,61,.55); color: #ffffff; font-size: 18px; font-weight: 400; transition: background .2s ease; } #bt-live .btlive-featured__button:hover { border-color: var(--gold); } #bt-live .btlive-featured__button:hover b { background: var(--gold); } /* ========================================================== CABECERA RECIENTES ========================================================== */ #bt-live .btlive__recent-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin: 57px 0 23px; } #bt-live .btlive__recent-heading > div > span { display: block; margin-bottom: 6px; color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: 1.7px; } #bt-live .btlive__recent-heading h3 { margin: 0 !important; color: var(--navy) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 30px !important; font-weight: 400 !important; } #bt-live .btlive__channel-link { color: var(--navy) !important; font-size: 8px; font-weight: 700; letter-spacing: 1.4px; text-decoration: none !important; } #bt-live .btlive__channel-link span { margin-left: 6px; color: var(--gold); } /* ========================================================== GRID ========================================================== */ #bt-live .btlive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } /* TARJETA */ #bt-live .btlive-card { overflow: hidden; background: #ffffff; border: 1px solid var(--border); border-radius: 7px; box-shadow: 0 8px 25px rgba(16,43,56,.055); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } #bt-live .btlive-card:hover { transform: translateY(-3px); border-color: rgba(184,141,61,.55); box-shadow: 0 14px 31px rgba(16,43,56,.10); } /* MINIATURA */ #bt-live .btlive-card__image { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-deep); } #bt-live .btlive-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } #bt-live .btlive-card:hover .btlive-card__image img { transform: scale(1.025); } #bt-live .btlive-card__play { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; transform: translate(-50%, -50%); background: rgba(16,43,56,.90); border: 1px solid rgba(227,189,104,.7); border-radius: 50%; color: #ffffff; font-size: 13px; } /* CUERPO TARJETA */ #bt-live .btlive-card__body { padding: 21px 21px 20px; } #bt-live .btlive-card__date { display: block; margin-bottom: 8px; color: var(--gold); font-size: 7px; font-weight: 700; letter-spacing: 1.2px; } #bt-live .btlive-card__title { display: -webkit-box; min-height: 49px; margin: 0 0 18px !important; overflow: hidden; color: var(--navy) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.35 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #bt-live .btlive-card__link { display: inline-flex; align-items: center; gap: 9px; color: var(--navy) !important; font-size: 8px; font-weight: 700; letter-spacing: 1.3px; text-decoration: none !important; } #bt-live .btlive-card__link span { color: var(--gold); font-size: 14px; transition: transform .2s ease; } #bt-live .btlive-card__link:hover span { transform: translateX(3px); } /* ========================================================== TABLET ========================================================== */ @media screen and (max-width: 900px) { #bt-live .btlive-featured { grid-template-columns: 1fr; } #bt-live .btlive-featured__image { min-height: 420px; } #bt-live .btlive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================== MÓVIL ========================================================== */ @media screen and (max-width: 600px) { #bt-live { padding: 59px 0; } #bt-live .btlive__container { width: calc(100% - 30px); } #bt-live .btlive__header { margin-bottom: 35px; } #bt-live .btlive__header h2 { font-size: 39px !important; } #bt-live .btlive__header p { font-size: 15px !important; } #bt-live .btlive-featured__image { min-height: 0; aspect-ratio: 16 / 9; } #bt-live .btlive-featured__play { width: 57px; height: 57px; font-size: 17px; } #bt-live .btlive-featured__body { padding: 28px 23px 25px; } #bt-live .btlive-featured__body h3 { font-size: 25px !important; } #bt-live .btlive-featured__description { -webkit-line-clamp: 3; } #bt-live .btlive__recent-heading { align-items: center; margin-top: 43px; } #bt-live .btlive__recent-heading h3 { font-size: 25px !important; } #bt-live .btlive-grid { grid-template-columns: 1fr; gap: 14px; } #bt-live .btlive-card { display: grid; grid-template-columns: 145px 1fr; } #bt-live .btlive-card__image { height: 100%; aspect-ratio: auto; } #bt-live .btlive-card__body { padding: 17px 16px; } #bt-live .btlive-card__title { min-height: 0; margin-bottom: 13px !important; font-size: 16px !important; } } /* ========================================================== MÓVILES PEQUEÑOS ========================================================== */ @media screen and (max-width: 390px) { #bt-live .btlive-card { grid-template-columns: 125px 1fr; } #bt-live .btlive__channel-link { font-size: 7px; } }/* ========================================================== BENEY TZION · CORRECCIÓN ESTADOS YOUTUBE ========================================================== */ #bt-live [hidden] { display: none !important; } /* ========================================================== BENEY TZION · PARASHÁ SEMANAL ========================================================== */ .btp { --navy: #173544; --navy-deep: #102b38; --gold: #b88d3d; --gold-light: #e5cf9c; --ivory: #fbfaf7; --cream: #f5f1e9; --white: #ffffff; --ink: #26383f; --text: #5c686e; --muted: #7b8589; --border: #e1dbd0; width: 100%; margin: 0; padding: 74px 0; background: radial-gradient( circle at 50% 0, rgba(184, 141, 61, .09), transparent 30% ), var(--ivory); } .btp *, .btp *::before, .btp *::after { box-sizing: border-box; } .btp__inner { width: min(920px, calc(100% - 40px)); margin: 0 auto; } /* ========================================================== CABECERA ========================================================== */ .btp__header { max-width: 750px; margin: 0 auto; text-align: center; } .btp__overline { display: block; margin-bottom: 21px; color: var(--gold); font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 2.7px; } .btp__hebrew { margin-bottom: 7px; color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: 27px; line-height: 1.25; } .btp__header h2 { margin: 0 0 22px !important; color: var(--navy) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(50px, 7vw, 82px) !important; font-weight: 700 !important; line-height: .98 !important; letter-spacing: -2px; } .btp__date { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 17px; border: 1px solid var(--gold-light); border-radius: 30px; background: rgba(255, 255, 255, .65); color: var(--navy); font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; } .btp__date span { color: var(--gold); } /* ========================================================== DIVISOR ========================================================== */ .btp__divider { display: flex; align-items: center; justify-content: center; margin: 38px 0 32px; } .btp__divider::before, .btp__divider::after { content: ""; width: 95px; height: 1px; background: var(--border); } .btp__divider span { width: 8px; height: 8px; margin: 0 12px; transform: rotate(45deg); background: var(--gold); } /* ========================================================== INTRO ========================================================== */ .btp__intro { max-width: 610px; margin: 0 auto 37px; text-align: center; } .btp__intro p { margin: 0 !important; color: var(--text) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 15px !important; line-height: 1.7 !important; } /* ========================================================== LECTURAS ========================================================== */ .btp__readings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } .btp-reading { position: relative; min-height: 205px; padding: 28px 28px 26px; overflow: hidden; background: var(--white); border: 1px solid var(--border); border-radius: 7px; box-shadow: 0 8px 24px rgba(16, 43, 56, .055); } .btp-reading::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--gold); } .btp-reading__number { position: absolute; top: 18px; right: 20px; color: rgba(23, 53, 68, .08); font-family: Georgia, "Times New Roman", serif; font-size: 43px; font-weight: 700; line-height: 1; } .btp-reading__label { display: block; margin-bottom: 22px; color: var(--gold); font-family: Arial, Helvetica, sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 1.8px; } .btp-reading h3 { position: relative; z-index: 2; margin: 0 0 12px !important; color: var(--navy) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.25 !important; } .btp-reading p { margin: 0 !important; color: var(--muted) !important; font-size: 10px !important; line-height: 1.5 !important; } /* ========================================================== FUENTE ========================================================== */ .btp__source { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-top: 20px; overflow: hidden; background: var(--navy); border-radius: 6px; box-shadow: 0 10px 28px rgba(16, 43, 56, .12); } .btp__source-info { padding: 19px 23px; } .btp__source-info span { display: block; margin-bottom: 5px; color: rgba(255, 255, 255, .55); font-size: 7px; font-weight: 700; letter-spacing: 1.5px; } .btp__source-info strong { color: #ffffff; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; } .btp__source-link, .btp__source-link:link, .btp__source-link:visited { display: flex; align-self: stretch; align-items: center; color: #ffffff !important; text-decoration: none !important; border-left: 1px solid rgba(184, 141, 61, .55); } .btp__source-link > span { padding: 0 21px; color: #ffffff !important; font-size: 8px; font-weight: 700; letter-spacing: 1.3px; } .btp__source-link b { display: flex; align-self: stretch; align-items: center; justify-content: center; width: 55px; background: var(--navy-deep); color: var(--gold-light); font-size: 17px; font-weight: 400; transition: background .2s ease; } .btp__source-link:hover b { background: var(--gold); color: #ffffff; } /* ========================================================== NOTA ========================================================== */ .btp__note { max-width: 690px; margin: 22px auto 0 !important; color: var(--muted) !important; font-size: 9px !important; line-height: 1.65 !important; text-align: center; } /* ========================================================== ERROR ========================================================== */ .btp__error { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 25px; background: #ffffff; border: 1px solid var(--border); border-left: 4px solid var(--gold); color: var(--text); text-align: center; } /* ========================================================== MÓVIL ========================================================== */ @media screen and (max-width: 650px) { .btp { padding: 56px 0; } .btp__inner { width: calc(100% - 30px); } .btp__overline { font-size: 8px; letter-spacing: 2px; } .btp__hebrew { font-size: 23px; } .btp__header h2 { font-size: 47px !important; line-height: 1 !important; letter-spacing: -1.5px; } .btp__date { gap: 8px; padding: 9px 14px; font-size: 8px; letter-spacing: 1.1px; } .btp__divider { margin: 30px 0 27px; } .btp__readings { grid-template-columns: 1fr; gap: 11px; } .btp-reading { min-height: 0; padding: 24px 23px 22px; } .btp-reading__label { margin-bottom: 16px; } .btp-reading h3 { font-size: 21px !important; } .btp__source { grid-template-columns: 1fr; text-align: center; } .btp__source-link, .btp__source-link:link, .btp__source-link:visited { min-height: 53px; border-top: 1px solid rgba(184, 141, 61, .45); border-left: 0; justify-content: space-between; } .btp__source-link > span { flex: 1; padding: 0 15px; } }/* ========================================================== BENEY TZION · BIBLIOTECA DE PARASHOT ========================================================== */ #bt-parashot-library { --navy: #173544; --navy-deep: #102b38; --gold: #b88d3d; --gold-light: #e8d6aa; --ivory: #fbfaf7; --cream: #f5f1e9; --white: #fff; --ink: #26383f; --text: #5f6a6f; --border: #e2ddd3; width: 100%; padding: 76px 0; background: var(--ivory); } #bt-parashot-library *, #bt-parashot-library *::before, #bt-parashot-library *::after { box-sizing: border-box; } .btpl__inner { width: min(1120px, calc(100% - 40px)); margin: 0 auto; } /* CABECERA */ .btpl__header { max-width: 760px; margin: 0 auto 42px; text-align: center; } .btpl__overline { display: block; margin-bottom: 14px; color: var(--gold); font: 700 9px/1.3 Arial, sans-serif; letter-spacing: 2.5px; } .btpl__hebrew { margin-bottom: 5px; color: var(--gold); font: 400 25px/1.3 Georgia, serif; } .btpl__header h2 { margin: 0 0 17px !important; color: var(--navy) !important; font: 700 clamp(42px, 6vw, 66px)/1 Georgia, serif !important; letter-spacing: -1.8px; } .btpl__header p { max-width: 650px; margin: 0 auto !important; color: var(--text) !important; font: 400 14px/1.75 Georgia, serif !important; } /* HERRAMIENTAS */ .btpl__tools { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 13px; } .btpl-search { display: flex; align-items: center; min-height: 54px; padding: 0 18px; background: var(--white); border: 1px solid var(--border); border-radius: 7px; box-shadow: 0 6px 20px rgba(16,43,56,.04); } .btpl-search > span { margin-right: 11px; color: var(--gold); font-size: 24px; } .btpl-search input { width: 100%; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--navy) !important; font-size: 13px !important; } .btpl__counter { display: flex; align-items: center; gap: 8px; min-width: 122px; padding: 0 18px; background: var(--navy); border-radius: 7px; color: #fff; } .btpl__counter strong { color: var(--gold-light); font: 700 21px Georgia, serif; } .btpl__counter span { font: 700 7px Arial, sans-serif; letter-spacing: 1.3px; } /* FILTROS */ .btpl__books { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .btpl__books button { appearance: none; padding: 9px 13px; border: 1px solid var(--border); border-radius: 20px; background: var(--white); color: var(--navy); cursor: pointer; font: 700 8px Arial, sans-serif; letter-spacing: 1px; transition: .2s ease; } .btpl__books button:hover, .btpl__books button.is-active { border-color: var(--navy); background: var(--navy); color: #fff; } /* TABLA */ .btpl-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 9px; background: #fff; box-shadow: 0 14px 38px rgba(16,43,56,.07); } .btpl-table { width: 100%; min-width: 900px; margin: 0 !important; border-collapse: collapse !important; } .btpl-table thead th { padding: 15px 13px !important; background: var(--navy) !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,.1) !important; color: #fff !important; font: 700 9px/1.25 Arial, sans-serif !important; letter-spacing: .7px; text-align: left; } .btpl-table thead th:first-child { width: 54px; text-align: center; } .btpl-table thead small { color: var(--gold-light); font-size: 7px; } .btpl-parasha td { padding: 13px !important; border: 0 !important; border-bottom: 1px solid #ece8e0 !important; color: var(--text); font-size: 11px; vertical-align: middle; transition: background .18s ease; } .btpl-parasha:hover td { background: #faf7f0; } .btpl-parasha td:first-child { color: #a18a60; text-align: center; font: 700 10px Georgia, serif; } .btpl-parasha strong { color: var(--navy); font-family: Georgia, serif; font-size: 13px; } .btpl-hebrew { direction: rtl; color: var(--navy) !important; font-family: Georgia, serif; font-size: 17px !important; font-weight: 700; text-align: center; } .btpl-parasha a, .btpl-parasha a:visited { display: inline-flex; align-items: center; gap: 6px; color: var(--navy) !important; font-weight: 700; text-decoration: none !important; border-bottom: 1px solid rgba(184,141,61,.5); transition: .18s ease; } .btpl-parasha a span { color: var(--gold); transition: transform .18s ease; } .btpl-parasha a:hover { color: var(--gold) !important; } .btpl-parasha a:hover span { transform: translate(2px,-2px); } /* SEPARADORES DE LIBRO */ .btpl-book-row td { padding: 13px 16px !important; border: 0 !important; background: #f3eee4 !important; } .btpl-book-row span { margin-right: 9px; color: var(--gold); font-size: 17px; } .btpl-book-row strong { color: var(--navy); font: 700 10px Arial, sans-serif; letter-spacing: 1.5px; } .btpl-book-row small { margin-left: 8px; color: var(--muted, #7b8589); font: 600 7px Arial, sans-serif; letter-spacing: 1px; } /* VACÍO */ .btpl__empty { padding: 30px; color: var(--text); text-align: center; } /* PIE */ .btpl__footer { max-width: 760px; margin: 27px auto 0; text-align: center; } .btpl__footer-mark { color: var(--gold); } .btpl__footer p { margin: 9px 0 7px !important; color: #7b8589 !important; font-size: 9px !important; line-height: 1.65 !important; } .btpl__footer-source { color: var(--gold); font: 700 7px Arial, sans-serif; letter-spacing: 1.3px; } /* FILTRADO */ .btpl-parasha.is-hidden, .btpl-book-row.is-hidden { display: none; } /* MÓVIL */ @media (max-width: 650px) { #bt-parashot-library { padding: 55px 0; } .btpl__inner { width: calc(100% - 28px); } .btpl__header h2 { font-size: 43px !important; } .btpl__tools { grid-template-columns: 1fr; } .btpl__counter { min-height: 44px; justify-content: center; } .btpl__books { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; } .btpl__books button { flex: 0 0 auto; } .btpl-table-wrap { border-radius: 7px; } }/* ========================================================== BENEY TZION · PARASHOT CORRECCIÓN FILTROS + CABECERAS DE LIBROS ========================================================== */ /* ---------------------------------------------------------- BOTONES DE FILTRO ---------------------------------------------------------- */ #bt-parashot-library .btpl__books { gap: 8px; margin-bottom: 20px; } #bt-parashot-library .btpl__books button { appearance: none !important; -webkit-appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 38px; padding: 10px 17px !important; border: 1px solid #d9d2c5 !important; border-radius: 22px !important; background: #ffffff !important; background-image: none !important; color: #173544 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 8px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 1.15px !important; text-transform: uppercase !important; text-shadow: none !important; box-shadow: 0 5px 14px rgba(16, 43, 56, .06) !important; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease !important; } /* Hover */ #bt-parashot-library .btpl__books button:hover { background: #f5f1e9 !important; border-color: #b88d3d !important; color: #173544 !important; transform: translateY(-1px); box-shadow: 0 7px 17px rgba(16, 43, 56, .09) !important; } /* Botón seleccionado */ #bt-parashot-library .btpl__books button.is-active { background: #173544 !important; background-image: none !important; border-color: #173544 !important; color: #ffffff !important; box-shadow: 0 7px 18px rgba(16, 43, 56, .16) !important; } /* Pequeño detalle dorado en seleccionado */ #bt-parashot-library .btpl__books button.is-active::before { content: ""; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #d7b56d; } /* ---------------------------------------------------------- CABECERAS DE CADA LIBRO BERESHIT / SHEMOT / VAYIKRA... ---------------------------------------------------------- */ #bt-parashot-library .btpl-book-row td { position: relative; padding: 20px 22px !important; background: linear-gradient( 90deg, #f2ecdf 0%, #f8f5ee 100% ) !important; border-top: 1px solid #ded5c4 !important; border-bottom: 1px solid #ded5c4 !important; } /* Línea dorada lateral */ #bt-parashot-library .btpl-book-row td::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #b88d3d; } /* Hebreo */ #bt-parashot-library .btpl-book-row span { display: inline-block; margin-right: 14px; color: #b88d3d !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 22px !important; font-weight: 400 !important; line-height: 1 !important; vertical-align: middle; } /* Nombre hebreo/transliterado del libro */ #bt-parashot-library .btpl-book-row strong { display: inline-block; color: #173544 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 1.5px !important; vertical-align: middle; } /* Nombre castellano */ #bt-parashot-library .btpl-book-row small { display: inline-block; margin-left: 12px; color: #8d6829 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 8px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; vertical-align: middle; } /* ---------------------------------------------------------- MÓVIL ---------------------------------------------------------- */ @media screen and (max-width: 650px) { #bt-parashot-library .btpl__books { gap: 7px; padding: 2px 0 8px; scrollbar-width: none; } #bt-parashot-library .btpl__books::-webkit-scrollbar { display: none; } #bt-parashot-library .btpl__books button { flex: 0 0 auto; min-height: 36px; padding: 9px 14px !important; font-size: 7.5px !important; } #bt-parashot-library .btpl-book-row td { padding: 17px 18px !important; } #bt-parashot-library .btpl-book-row span { margin-right: 9px; font-size: 19px !important; } #bt-parashot-library .btpl-book-row strong { font-size: 14px !important; } #bt-parashot-library .btpl-book-row small { margin-left: 8px; font-size: 7px !important; } }/* ========================================================== PARASHOT · TABLA DESLIZABLE EN MÓVIL ========================================================== */ @media screen and (max-width: 700px) { /* Contenedor desplazable */ #bt-parashot-library .btpl-table-wrap { position: relative; width: 100%; max-width: 100%; overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 8px; /* Hace más natural el movimiento táctil */ scroll-behavior: smooth; /* Barra fina visible */ scrollbar-width: thin; scrollbar-color: #b88d3d #eee8dc; } /* Scrollbar Chrome / Safari */ #bt-parashot-library .btpl-table-wrap::-webkit-scrollbar { height: 6px; } #bt-parashot-library .btpl-table-wrap::-webkit-scrollbar-track { background: #eee8dc; border-radius: 20px; } #bt-parashot-library .btpl-table-wrap::-webkit-scrollbar-thumb { background: #b88d3d; border-radius: 20px; } /* La tabla conserva suficiente anchura para que no se aplasten las columnas */ #bt-parashot-library .btpl-table { width: 920px !important; min-width: 920px !important; table-layout: auto; } /* Celdas algo más cómodas en móvil */ #bt-parashot-library .btpl-parasha td { padding: 13px 12px !important; white-space: nowrap; } /* Nombre puede respirar un poco más */ #bt-parashot-library .btpl-parasha td:nth-child(3) { min-width: 130px; } /* Traducción */ #bt-parashot-library .btpl-parasha td:nth-child(4) { min-width: 150px; } /* Torá */ #bt-parashot-library .btpl-parasha td:nth-child(5) { min-width: 155px; } /* Haftará */ #bt-parashot-library .btpl-parasha td:nth-child(6) { min-width: 175px; } }/* ========================================================== INDICADOR DE DESLIZAMIENTO ========================================================== */ .btpl-swipe-hint { display: none; } @media screen and (max-width: 700px) { #bt-parashot-library .btpl-swipe-hint { display: flex; align-items: center; justify-content: center; gap: 9px; width: max-content; max-width: 100%; margin: 4px auto 11px; padding: 8px 14px; border: 1px solid #dfd5c2; border-radius: 30px; background: #f5f1e9; color: #173544; font-family: Arial, Helvetica, sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 1.1px; } #bt-parashot-library .btpl-swipe-hint__hand { color: #b88d3d; font-size: 15px; animation: btplSwipeHand 1.8s ease-in-out infinite; } #bt-parashot-library .btpl-swipe-hint b { color: #b88d3d; font-size: 16px; animation: btplSwipeArrow 1.8s ease-in-out infinite; } @keyframes btplSwipeHand { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } } @keyframes btplSwipeArrow { 0%, 100% { transform: translateX(0); opacity: .55; } 50% { transform: translateX(6px); opacity: 1; } } }