/* ══════════════════════════════════════════════════════════════════════ BICM — ESTILOS BASE DE LAS PÁGINAS GENÉRICAS ---------------------------------------------------------------------- Solo lo usan las plantillas de respaldo (page.php, single.php, archive.php, search.php, 404.php, index.php): las páginas que NO son una de las 7 plantillas full-page del sitio. Típicamente: páginas hechas con Elementor, entradas del blog y las de WooCommerce. Trae la misma cabecera y el mismo pie que el resto del sitio (mismos nombres de clase que las plantillas placeholder) + tipografía para lo que salga de the_content(). ══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --font: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', Calibri, 'Trebuchet MS', sans-serif; --orange: rgb(250,117,22); --blue: rgb(27,111,183); --yellow: rgb(253,185,19); --green: rgb(116,183,67); --purple: #702c91; --teal: rgb(0,162,169); --red: rgb(225,27,34); --pink: rgb(209,25,114); --accent: rgb(248,29,91); --header-h: clamp(58px, 4.7vw, 88px); } html { background: #fff; overflow-x: clip; } body { min-width: 320px; background: #fff; color: #000; font-family: var(--font); overflow-x: clip; } a { color: inherit; } ::selection { background: #000; color: #fff; } img { max-width: 100%; height: auto; } /* ── Tipografía heredada ────────────────────────────────────────────── ESTO ES LO QUE SE PERDIÓ AL SALIR DE THEGEM. Los widgets de Elementor que no traen una fuente propia definida heredan la del tema; como este tema no le daba ninguna a las páginas de Elementor, caían al serif por omisión del navegador (Times New Roman) y por eso "se veían raras". Estas reglas son solo el punto de partida: cualquier tamaño, color o fuente que esté guardado DENTRO de Elementor le gana a esto, porque Elementor imprime sus estilos con selectores más específicos. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; } p, li, dd, dt, td, th, caption, figcaption, blockquote, address, label, input, select, textarea, button { font-family: var(--font); } /* ── Hueco de la cabecera fija ──────────────────────────────────────── .ph-header es position:fixed, así que sin esto el contenido arranca por debajo de ella y queda tapado. Va en el (y no en el contenedor de la plantilla) justamente para que también aplique al contenido de Elementor, que no pasa por page.php. */ body.bicm-chrome { padding-top: var(--header-h); } /* ── Cabecera fija (idéntica a las demás páginas) ────────────────────── */ .ph-header { position: fixed; inset: 0 0 auto; z-index: 100; display: flex; align-items: flex-start; justify-content: space-between; height: var(--header-h); padding: clamp(8px,.9vw,16px) 6.302vw 0; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(0,0,0,.08); backdrop-filter: blur(14px); } .header-logo { display: block; height: clamp(40px,3.2vw,56px); width: auto; } .header-logo img { display: block; height: 100%; width: auto; object-fit: contain; object-position: left center; } /* ── Zona de contenido ─────────────────────────────────────────────── El header es fixed, así que todo lo de abajo necesita ese respiro arriba o quedaría tapado. */ /* El hueco de la cabecera fija ya lo pone body.bicm-chrome; aquí solo el aire propio de la sección (si se sumara --header-h otra vez, quedaría el doble de espacio arriba). */ .bicm-main { padding-top: clamp(24px,3vw,54px); padding-bottom: clamp(50px,6vw,100px); } /* Páginas hechas con Elementor: NO se les impone ancho ni padding lateral — Elementor ya trae su propio sistema de secciones y contenedores, y encajonarlo rompe las secciones a todo lo ancho. Solo se respeta el hueco de la cabecera fija. */ .bicm-main--builder { padding-left: 0; padding-right: 0; } /* Contenido normal del editor de WordPress: columna legible y centrada */ .bicm-main--content { padding-left: clamp(20px,6vw,60px); padding-right: clamp(20px,6vw,60px); } .bicm-container { max-width: 860px; margin: 0 auto; } .bicm-container--wide { max-width: 1400px; } /* ── Encabezado de la entrada/página ─────────────────────────────────── */ .bicm-entry-header { margin-bottom: clamp(26px,3vw,48px); } .bicm-eyebrow { font-size: clamp(12px,1vw,14px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--purple); margin-bottom: clamp(10px,1.2vw,18px); } .bicm-title { font-size: clamp(30px,4.4vw,60px); font-weight: 700; letter-spacing: -.02em; line-height: 1.02; } .bicm-meta { margin-top: 14px; font-size: 14px; color: #666; } .bicm-featured { margin-bottom: clamp(24px,3vw,44px); } .bicm-featured img { display: block; width: 100%; height: auto; } /* ── Tipografía de the_content() ─────────────────────────────────────── */ .entry-content { font-size: clamp(16px,1.15vw,18px); line-height: 1.65; color: #1c1c1c; } .entry-content > * + * { margin-top: 1.1em; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin-top: 1.8em; } .entry-content h1 { font-size: clamp(28px,3.4vw,44px); } .entry-content h2 { font-size: clamp(24px,2.6vw,34px); } .entry-content h3 { font-size: clamp(20px,2vw,26px); } .entry-content h4 { font-size: clamp(18px,1.6vw,21px); } .entry-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; } .entry-content a:hover { color: var(--accent); } .entry-content ul, .entry-content ol { padding-left: 1.4em; } .entry-content li + li { margin-top: .4em; } .entry-content blockquote { border-left: 3px solid #000; padding-left: 1.1em; font-style: italic; color: #444; } .entry-content img, .entry-content iframe, .entry-content video { max-width: 100%; height: auto; } .entry-content figure { margin: 1.6em 0; } .entry-content figcaption { margin-top: 8px; font-size: 14px; color: #666; } .entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; } .entry-content th, .entry-content td { border: 1px solid rgba(0,0,0,.14); padding: 8px 10px; text-align: left; } .entry-content th { background: rgba(0,0,0,.04); font-weight: 700; } .entry-content code { background: rgba(0,0,0,.06); padding: .15em .4em; border-radius: 3px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; } .entry-content pre { background: #111; color: #eee; padding: 16px; overflow-x: auto; } .entry-content pre code { background: none; color: inherit; padding: 0; } .entry-content hr { border: 0; border-top: 1px solid rgba(0,0,0,.14); margin: 2.2em 0; } /* ── Listados (blog, archivos, búsqueda) ─────────────────────────────── */ .bicm-list { display: grid; gap: clamp(26px,3vw,44px); } .bicm-list-item { border-bottom: 1px solid rgba(0,0,0,.12); padding-bottom: clamp(20px,2.4vw,34px); } .bicm-list-item:last-child { border-bottom: 0; } .bicm-list-title { font-size: clamp(21px,2.2vw,30px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; } .bicm-list-title a { text-decoration: none; } .bicm-list-title a:hover { color: var(--accent); } .bicm-list-excerpt { margin-top: 10px; font-size: 16px; line-height: 1.6; color: #444; } .bicm-list-thumb { display: block; margin-bottom: 14px; } .bicm-list-thumb img { display: block; width: 100%; height: auto; } /* ── Botón / paginación ──────────────────────────────────────────────── */ .bicm-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: #fff; background: #000; padding: 15px 28px; border-radius: 2px; transition: opacity .2s ease; } .bicm-btn:hover { opacity: .7; } .bicm-pagination { margin-top: clamp(34px,4vw,60px); display: flex; gap: 10px; flex-wrap: wrap; } .bicm-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid rgba(0,0,0,.18); text-decoration: none; font-weight: 700; font-size: 14px; } .bicm-pagination .page-numbers.current, .bicm-pagination .page-numbers:hover { background: #000; color: #fff; border-color: #000; } /* ── 404 / sin resultados ────────────────────────────────────────────── */ .bicm-empty { text-align: center; padding: clamp(40px,7vw,110px) 0; } .bicm-empty .bicm-title { max-width: 18ch; margin: 0 auto; } .bicm-empty .entry-content { margin-top: 18px; } .bicm-empty .bicm-btn { margin-top: clamp(26px,3vw,44px); } /* ── Buscador ────────────────────────────────────────────────────────── */ .bicm-search-form { display: flex; gap: 10px; margin-top: 22px; justify-content: center; } .bicm-search-form input[type="search"] { font-family: inherit; font-size: 16px; padding: 12px 16px; border: 1px solid rgba(0,0,0,.25); min-width: 0; flex: 0 1 320px; } .bicm-search-form button { font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #000; border: 0; padding: 12px 22px; cursor: pointer; } /* ── Pie (idéntico al resto del sitio) ───────────────────────────────── */ .footer-outer { width: 100%; background: #000; color: #fff; margin-top: clamp(40px,5vw,90px); } .footer-inner { max-width: 1600px; margin: 0 auto; padding: clamp(30px,2.6vw,50px) clamp(20px,4vw,60px) clamp(18px,1.5vw,28px); display: flex; flex-direction: column; box-sizing: border-box; } .footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .footer-main-title { font-size: clamp(20px,2.5vw,48px); font-weight: 700; color: #fff; line-height: 1.05; } .footer-address { margin-top: 20px; font-size: clamp(10px,0.94vw,18px); font-weight: 400; color: rgba(255,255,255,0.55); line-height: 1.65; } .footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .footer-contact-item { font-size: clamp(13px,1.1vw,22px); font-weight: 500; color: #fff; text-decoration: none; line-height: 1.65; } a.footer-contact-item:hover { color: var(--accent); } .footer-social-row { display: flex; align-items: center; gap: 12px; } .footer-social-icon { display: flex; color: #fff; transition: color .18s ease-out; } .footer-social-icon:hover { color: var(--accent); } .footer-social-icon svg { width: 18px; height: 18px; display: block; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 18px; margin-top: 28px; border-top: 1px solid rgba(255,255,255,0.12); } .footer-copy { font-size: clamp(9px,0.63vw,12px); font-weight: 300; color: rgb(157,157,157); } .footer-legal { display: flex; gap: clamp(14px,1.5vw,28px); } .footer-legal a { font-size: clamp(9px,0.73vw,14px); font-weight: 500; color: #fff; text-decoration: none; white-space: nowrap; } .footer-legal a:hover { color: var(--accent); } @media (max-width: 700px) { .footer-right { align-items: flex-start; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; } .footer-legal { flex-wrap: wrap; gap: 14px; } }