/* ================================================================= JRI Core — base Tokens y primitivas compartidas por todas las secciones. Se encola una sola vez y solo si hay al menos una sección en la página. No incluye reset de elementos (img, a, ul, button…) a propósito: eso lo aporta el tema. Meterlo aquí pelearía con Bricks y con WooCommerce. ================================================================= */ /* ----------------------------------------------------------------- Montserrat autoalojada (fuente variable 400–900, un solo fichero por subconjunto). Antes la servía Divi desde Google Fonts; al quitar Divi la tipografía caía a la del sistema. Autoalojada evita la petición a un tercero, quita el retraso de resolución DNS + TLS contra fonts.gstatic.com y no envía la IP del visitante a Google. `latin` (38 KB) cubre todo el español. `latin-ext` (71 KB) solo se descarga si en la página aparece un carácter de su rango, así que declararlo no cuesta nada. ----------------------------------------------------------------- */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/montserrat-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Marca / acentos */ --brand-yellow: #F7EC00; --brand-gold: #F0CA00; --brand-yellow-alt: #FDEA18; /* Neutros oscuros */ --black: #000000; --near-black: #0A0A0A; --dark-1: #222222; --dark-2: #444444; /* Neutros claros */ --white: #FFFFFF; --gray-50: #F1F1F3; --gray-100: #EEEEEE; --gray-150: #ECECEC; /* Gris **más oscuro que el fondo de tarjeta**, para el estado apagado de un selector sobre `--gray-100`. Medido en el Figma de testimonios. */ --gray-300: #B4B4B4; /* Texto */ --text: #000000; --text-muted: #808080; --text-muted-2: #666666; --text-on-dark: #D1D1D1; /* Espaciado */ /* Azul del icono informativo, medido sobre el Figma de la ficha. */ --info-blue: #166BBB; --space-1: 5px; --space-2: 8px; --space-3: 10px; --space-4: 16px; --space-5: 20px; --space-6: 27px; --space-7: 30px; --space-8: 40px; --space-9: 54px; /* Radios */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-pill: 25px; /* Sombras */ --shadow-card: 0 2px 8px 0 rgba(0, 0, 0, .08); --shadow-glow-yellow: 0 1px 4px 0 var(--brand-yellow); /* Tipografía */ --font: "Montserrat", Helvetica, Arial, Lucida, sans-serif; /* Layout */ --container: 1400px; --header-h: 90px; } /* ----------------------------------------------------------------- Reset ACOTADO a las secciones del plugin. El diseño estático traía un reset global (`body`, `ul`, `img`, `a`, `button`). Meterlo aquí pelearía con Bricks y con WooCommerce, así que se aplica solo dentro de los contenedores propios: las secciones se ven igual sin imponerle nada al resto del sitio. ----------------------------------------------------------------- */ /* Los contenedores raíz sí llevan especificidad normal. */ .jri-section, .jri-site-header, .jri-site-footer, .jri-breadcrumb, .jri-drawer, .jri-wa-float { font-family: var(--font); font-size: 14px; font-weight: 500; line-height: 1.7; color: var(--text); } /* Todo lo demás va envuelto en :where(), que aporta especificidad CERO. Es importante: con selectores normales, `.jri-section a { color: inherit }` (0,1,1) le ganaba a `.jri-btn-dark` (0,1,0) y los botones salían con el color del texto en vez del suyo. Con :where() cualquier regla real manda. */ :where(.jri-section, .jri-site-header, .jri-site-footer, .jri-breadcrumb, .jri-drawer) *, :where(.jri-breadcrumb) { box-sizing: border-box; } :where(.jri-section, .jri-site-header, .jri-site-footer, .jri-drawer) :is(ul, ol) { list-style: none; margin: 0; padding: 0; } :where(.jri-section, .jri-site-header, .jri-site-footer, .jri-drawer) img { max-width: 100%; height: auto; display: block; } :where(.jri-section, .jri-site-header, .jri-site-footer, .jri-breadcrumb, .jri-drawer) a { color: inherit; text-decoration: none; } :where(.jri-section, .jri-site-header, .jri-site-footer, .jri-drawer) button { font-family: inherit; cursor: pointer; } :where(.jri-section, .jri-site-footer, .jri-drawer) :is(h1, h2, h3, h4, h5, h6) { margin: 0; font-weight: 600; line-height: 1.2; } :where(.jri-section, .jri-site-footer) p { margin: 0 0 var(--space-4); } :where(.jri-section, .jri-site-footer) p:last-child { margin-bottom: 0; } /* ----------------------------------------------------------------- Bricks limita `#brx-content.wordpress` a 1100 px. Nuestras secciones traen su propio contenedor (`.jri-container`, 1400 px) y varias son de sangrado completo —hero, barra CTA, pie—, así que ese tope las estrecha y les impide llegar a los bordes. Esta regla solo llega a las páginas donde hay al menos una sección nuestra: `base.css` se encola de forma condicional. ----------------------------------------------------------------- */ #brx-content.wordpress { width: 100%; max-width: none; } /* ----------------------------------------------------------------- `#brx-content` sale como contenedor **flex** en la ficha de producto, y por defecto en fila. Cada elemento de Bricks —la ruta, la ficha— se convierte en un ítem que se reparte el ancho: la ruta se encogía a los 313 px de su texto en vez de ocupar la línea entera. De dónde sale ese `display: flex` **no se ha encontrado**: no está en ninguna hoja del sitio, ni en el JS de Bricks, ni en sus ajustes ni en los de la plantilla. Se comprobó con `getComputedStyle` en el navegador, así que es real; simplemente no se ha localizado el origen. Fijar la dirección a columna arregla el síntoma sin pelear con la regla desconocida, y es inerte si algún día `#brx-content` vuelve a ser un bloque normal. **Si aparece el origen, esto puede sobrar.** ----------------------------------------------------------------- */ #brx-content { flex-direction: column; align-items: stretch; } /* ---------------- Primitivas ---------------- */ .jri-container { width: 95%; max-width: var(--container); margin-inline: auto; } .jri-section { padding-block: var(--space-9); } .jri-section-title { font-family: var(--font); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; line-height: 1.2; margin: 0 0 var(--space-7); color: var(--text); } .jri-section-title--center { text-align: center; margin-bottom: var(--space-8); } /* ---------------- Cabecera de sección: título + «Ver más» ---------------- La usan la tira de marcas, el catálogo por categorías y el listado del blog. Estaba en el diseño estático y **no se había portado**: sin ella el enlace caía debajo del título, alineado a la izquierda y con el color del texto —sobre la caja gris, casi ilegible—. */ .jri-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); } /* El título trae margen inferior propio; dentro de la fila descentraría el par respecto al botón. */ .jri-section-head .jri-section-title { margin-bottom: 0; } .jri-see-more { flex: none; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; background: var(--near-black); color: var(--white); padding: 8px 18px; border-radius: var(--radius-pill); border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; } .jri-see-more:hover { background: var(--brand-gold); color: var(--near-black); border-color: var(--brand-gold); } /* Variante sobre caja oscura (Figma `234.jpg`): botón de contorno, no pastilla negra —sobre `--dark-2` el negro sólido desaparece—. */ .jri-section-head--dark .jri-section-title { color: var(--white); } .jri-section-head--dark .jri-see-more { background: transparent; color: var(--white); border-color: var(--gray-150); border-radius: var(--radius-md); font-weight: 700; padding: var(--space-5); /* Sin esto hereda el interlineado del tema y el botón sube de 55 a 64 px: el mismo tropiezo que el «Enviar cotización» del checkout. */ line-height: 1; } .jri-section-head--dark .jri-see-more:hover { background: var(--brand-yellow); color: var(--near-black); border-color: var(--brand-yellow); } /* En móvil el título y el botón van en **una sola línea** (Figma `temp/236.jpg`), y para eso el botón tiene que encoger: con el tamaño de escritorio se comía el ancho y «CATÁLOGO POR CATEGORÍAS» caía a dos líneas. Medido allí: 65×29 px con el título a 19. El hueco baja a 8 porque en 390 px los dos juntos ocupan casi la fila entera. */ @media (max-width: 767px) { .jri-section-head { gap: var(--space-2); } /* El título baja **solo dentro de la caja oscura**: los 19 px generales le ganan al ancho disponible y lo parten en dos. Fuera de aquí no hay botón que le dispute la fila, así que no toca. */ .jri-section-head--dark .jri-section-title { font-size: 14px; } .jri-section-head--dark .jri-see-more { padding: 8px var(--space-1); font-size: 11px; } } /* ---------------- Ruta de navegación ---------------- Aparece en la ficha de producto, los archivos, el blog y las páginas internas: es primitiva, no de una sección concreta. */ /* Bloque de ancho completo explícito: el `