/* Theme Name: Bootstrap-ousen Theme URI: https://percyalvarez.lat Author: Percy Alvarez Description: Tema responsivo que combina Bootstrap 5 (escritorio) y Onsen UI (móvil) en una landing moderna. Soporta light/dark mode en ambos frameworks. Page template "Página Responsive (Bootstrap / Onsen UI)". Version: 1.14.4 Requires at least: 5.0 Tested up to: 6.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: percy-theme Tags: responsive, bootstrap, mobile, dark-mode */ /* ============================ Reset / Base ============================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-color); transition: var(--transition-theme); /* IMPORTANTE: forzar scroll normal en el documento. Onsen UI al inicializar un aplica position:fixed o overflow:hidden al / para simular una app móvil. */ overflow-x: hidden !important; overflow-y: auto !important; height: auto !important; min-height: 100%; position: static !important; } /* ============================ Variables CSS (light) ============================ */ :root { --bg-color: #ffffff; --text-color: #212529; --card-bg: #ffffff; --border-color: #dee2e6; --navbar-bg: #212529; --hero-bg: #0d6efd; --section-alt-bg: #f8f9fa; --footer-bg: #f8f9fa; --onsen-bg: #f9f9f9; --onsen-card-bg: #ffffff; --onsen-toolbar-bg: #ffffff; --onsen-list-bg: #ffffff; --onsen-text: #1a1a1a; --onsen-list-item-active: #f5f5f5; --onsen-secondary-text: #666; --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ============================ Vista responsive (escritorio/móvil): los estilos viven en pages/style.css. Cargado vía wp_enqueue_style solo en páginas con template "page-responsive". ============================ */ /* ============================ Dark mode (Bootstrap + Onsen) ============================ */ :root[data-bs-theme="dark"] { --bg-color: #1a1a1a; --text-color: #f0f0f0; --card-bg: #2b2b2b; --border-color: #444; --navbar-bg: #0d0d0d; --hero-bg: #0a58ca; --section-alt-bg: #1f1f1f; --footer-bg: #1a1a1a; --onsen-bg: #121212; --onsen-card-bg: #1f1f1f; --onsen-toolbar-bg: #1f1f1f; --onsen-list-bg: #1a1a1a; --onsen-text: #f0f0f0; --onsen-list-item-active: #2a2a2a; --onsen-secondary-text: #b0b0b0; } /* Bootstrap: clases que cambian en dark mode */ :root[data-bs-theme="dark"] .bg-light { background-color: var(--section-alt-bg) !important; color: var(--text-color); } :root[data-bs-theme="dark"] .card { background-color: var(--card-bg); color: var(--text-color); border-color: var(--border-color); } :root[data-bs-theme="dark"] .form-control { background-color: #2b2b2b; color: var(--text-color); border-color: var(--border-color); } :root[data-bs-theme="dark"] .form-control::placeholder { color: #888; } :root[data-bs-theme="dark"] .text-muted { color: #aaa !important; } :root[data-bs-theme="dark"] .navbar.bg-dark { background-color: var(--navbar-bg) !important; } :root[data-bs-theme="dark"] footer.bg-light { background-color: var(--footer-bg) !important; color: var(--text-color); } :root[data-bs-theme="dark"] footer.bg-dark { background-color: var(--navbar-bg) !important; } /* Dark mode de Onsen UI, botón toggle de tema y transiciones suaves viven en pages/style.css (solo se cargan con el template page-responsive). */ /* SECCIÓN CARRUSEL: los estilos viven en blocks/style.css. Se cargan vía wp_enqueue_style en functions.php. */ /* SECCIÓN CARACTERÍSTICAS: los estilos viven en blocks/style.css. Se cargan vía wp_enqueue_style en functions.php. Esto evita duplicación con la versión móvil (Onsen) y mantiene el patrón del tema: CSS de bloque en blocks/, no en style.css raíz. */ /* ============================ SECCIÓN PREGUNTAS FRECUENTES ============================ */ #seccion-preguntas-frecuentes .accordion-button { font-weight: 600; background-color: var(--card-bg); color: var(--text-color); } #seccion-preguntas-frecuentes .accordion-button:not(.collapsed) { background-color: var(--card-bg); color: #0d6efd; box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); } :root[data-bs-theme="dark"] #seccion-preguntas-frecuentes .accordion-button { color: var(--text-color); } :root[data-bs-theme="dark"] #seccion-preguntas-frecuentes .accordion-button:not(.collapsed) { color: #6ea8fe; background-color: #2b2b2b; } :root[data-bs-theme="dark"] #seccion-preguntas-frecuentes .accordion-body { color: var(--text-color); background-color: var(--card-bg); } /* ============================ SECCIÓN BANNER CTA ============================ */ .percy-cta-banner { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); position: relative; overflow: hidden; } .percy-cta-banner::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%); pointer-events: none; } .percy-cta-banner > * { position: relative; z-index: 1; } /* CARRUSEL MÓVIL (Onsen UI): los estilos viven en blocks/style.css. Se cargan vía wp_enqueue_style en functions.php. */ /* FAQ móvil:

con estilo nativo pero presentable */ .percy-onsen-faq { margin: 8px 0; border-radius: 8px; background: rgba(127, 127, 127, 0.08); overflow: hidden; } .percy-onsen-faq summary { padding: 12px 14px; cursor: pointer; font-weight: 600; list-style: none; position: relative; user-select: none; } .percy-onsen-faq summary::-webkit-details-marker { display: none; } .percy-onsen-faq summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; line-height: 1; transition: transform 0.2s ease; } .percy-onsen-faq[open] summary::after { content: "−"; } .percy-onsen-faq p { margin: 0; padding: 0 14px 12px; opacity: 0.85; } /* Banner CTA en Onsen: el ons-card debe tener fondo gradient */ ons-card.percy-cta-banner { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important; color: #fff !important; } ons-card.percy-cta-banner ons-button { background: #fff !important; color: #1e3c72 !important; } ons-card.percy-cta-banner ons-button .button { background: #fff !important; color: #1e3c72 !important; }