. * Replica el resultado visual del template Elementor "Single - CRs estándar" (ID 278). * Todos los valores verificados con getComputedStyle sobre el widget original * (no estimados solo desde el JSON exportado). * * Header/footer siguen siendo Elementor (sin tocar) — este archivo cubre únicamente * el contenido de single-cr.php. IMPORTANTE: el kit global de Elementor (post-5.css, * clase .elementor-kit-5 en ) sigue cargando por el header/footer y define * reglas de baja especificidad sobre etiquetas simples (h1, a, button) que colisionan * con nuestro HTML — por eso las reglas de color/tipografía de este archivo van * siempre prefijadas con .innovalike-single-cr para ganar esa cascada de forma fiable. */ :root { --innovalike-cr-primary: #064C9B; /* kit "primary" */ --innovalike-cr-secondary: #E7F3FF; /* kit "secondary" */ --innovalike-cr-text: #000000; /* kit "text" */ --innovalike-cr-accent: #0A85FF; /* kit "accent" */ --innovalike-cr-gray-text: #4D4D4D; /* kit "df814df" Gris textos 2 */ --innovalike-cr-font: "Raleway", sans-serif; /* Color de categoría — fallback genérico, igual que theme-custom.css hoy */ --innovalike-cr-cat-primary: #B6B6B6; --innovalike-cr-cat-secondary: #F3F3F3; } /* Mismas clases .cr-{slug} ya inyectadas en por Innovalike_Shortcodes::add_category_body_classes() (plugin) */ .cr-proyectos-idi { --innovalike-cr-cat-primary: #5DAB46; --innovalike-cr-cat-secondary: #DFEEDA; } .cr-consumo-responsable { --innovalike-cr-cat-primary: #EDA714; --innovalike-cr-cat-secondary: #FDF4E6; } .cr-entidades-comprometidas { --innovalike-cr-cat-primary: #0C80FF; --innovalike-cr-cat-secondary: #E6F2FF; } /* Puente hacia innovalike-elementor-widgets.css (usado por los 3 bloques reutilizables Disclaimer/ODS/Ofrecido-por), que espera estas custom properties normalmente impresas por el runtime de Elementor. Valores fijos, sin Elementor. */ .innovalike-single-cr { --e-global-color-primary: var(--innovalike-cr-primary); --e-global-color-4918d77: var(--innovalike-cr-cat-secondary); } /* ========================================================================== Layout general ========================================================================== */ .innovalike-single-cr { font-family: var(--innovalike-cr-font); color: var(--innovalike-cr-text); max-width: 700px; margin: 0 auto; } @media (max-width: 767px) { .innovalike-single-cr { padding: 0 20px; } } /* ========================================================================== Badge de categoría Verificado: display block, ancho completo del contenedor (700px), padding asimétrico (3px 5px 3px 15px), border-radius SOLO en la esquina inferior derecha (0 0 25px 0) — no es una píldora completa. ========================================================================== */ .innovalike-single-cr .innovalike-cr-badge { display: block; width: 100%; box-sizing: border-box; background: var(--innovalike-cr-cat-primary); color: #FFFFFF; font-family: var(--innovalike-cr-font); font-size: 14px; font-weight: 500; font-style: italic; text-transform: uppercase; padding: 3px 5px 3px 15px; border-radius: 0 0 25px 0; margin: 0; } /* ========================================================================== Título e imagen destacada ========================================================================== */ .innovalike-single-cr h1.innovalike-cr-title { font-family: var(--innovalike-cr-font); font-size: 26px; font-weight: 600; line-height: 32px; margin: 10px 0 20px 0; color: var(--innovalike-cr-text); } .innovalike-cr-figure { position: relative; margin: 0 0 10px 0; } .innovalike-cr-figure img { width: 100%; height: auto; display: block; } .innovalike-single-cr .innovalike-cr-figure figcaption { position: static; width: 100%; box-sizing: border-box; background: var(--innovalike-cr-cat-secondary); font-family: var(--innovalike-cr-font); font-size: 13px; font-weight: 500; color: var(--innovalike-cr-gray-text); text-align: left; padding: 5px 5px 5px 15px; } /* ========================================================================== Fila fecha + compartir ========================================================================== */ .innovalike-cr-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 5px; flex-wrap: wrap; margin-bottom: -5px; } .innovalike-single-cr .innovalike-cr-date { font-family: var(--innovalike-cr-font); font-size: 16px; line-height: 16px; font-weight: 400; color: var(--innovalike-cr-gray-text); margin: 0 0 5px 0; } /* Toggle y enlaces de redes ocupan el mismo hueco, superpuestos con position absolute dentro de .innovalike-cr-share-wrap — así ninguno de los dos altera el layout flex de .innovalike-cr-meta-row al aparecer/desaparecer (evita que el icono "salte" de posición). El wrap se dimensiona al ancho del bloque de enlaces (el más ancho de los dos) para reservarle sitio siempre. */ .innovalike-cr-share-wrap { position: relative; height: 34px; } /* Toggle: icono Font Awesome "share-alt" en círculo framed — verificado contra .elementor-icon del widget original (border 1px gris, border-radius 50%, 34x34px, padding 8px; el div contenedor #showshare en sí no lleva borde, lo lleva el círculo interno). */ .innovalike-single-cr button.innovalike-cr-share-toggle { position: absolute; top: 0; right: 0; background: none; border: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: 0; opacity: 1; transition: opacity 0.15s ease; } .innovalike-single-cr button.innovalike-cr-share-toggle.is-hidden { opacity: 0; pointer-events: none; } .innovalike-single-cr .innovalike-cr-share-toggle-circle { width: 34px; height: 34px; box-sizing: border-box; border: 1px solid var(--innovalike-cr-gray-text); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--innovalike-cr-gray-text); } .innovalike-single-cr button.innovalike-cr-share-toggle:hover .innovalike-cr-share-toggle-circle { color: var(--innovalike-cr-primary); border-color: var(--innovalike-cr-primary); } .innovalike-cr-share-toggle svg { width: 16px; height: 16px; fill: currentColor; } .innovalike-cr-share-links { position: absolute; top: 0; right: 0; display: none; gap: 10px; justify-content: flex-end; opacity: 0; transition: opacity 0.15s ease; } .innovalike-cr-share-links.show { display: flex; } .innovalike-cr-share-links.show.is-visible { opacity: 1; } /* Skin "framed" real del widget Elementor Pro Share Buttons: círculo 31.5px sin relleno, borde 1px gris, icono en el mismo gris — MISMO color en las 4 redes, sin colores de marca (verificado con getComputedStyle sobre el widget original, border-color y color ambos rgb(77,77,77) en los 4 botones). */ .innovalike-single-cr .innovalike-cr-share-links a { width: 31.5px; height: 31.5px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--innovalike-cr-gray-text); display: inline-flex; align-items: center; justify-content: center; color: var(--innovalike-cr-gray-text); text-decoration: none; background: transparent; } .innovalike-single-cr .innovalike-cr-share-links a:hover { color: var(--innovalike-cr-primary); border-color: var(--innovalike-cr-primary); } .innovalike-cr-share-links a svg { width: 16px; height: 16px; fill: currentColor; } /* Entre 768px y 1024px (breakpoint "tablet" de Elementor, viewport_md/viewport_lg del kit) los enlaces de compartir se muestran siempre y el toggle se oculta — mismo comportamiento observado en el template Elementor original. */ @media (min-width: 768px) and (max-width: 1024px) { .innovalike-single-cr button.innovalike-cr-share-toggle { display: none; } .innovalike-cr-share-links { display: flex; } } /* ========================================================================== Divider ========================================================================== */ .innovalike-cr-divider { border-top: 1px solid var(--innovalike-cr-primary); margin: 10px 0; } /* ========================================================================== Contenido Verificado: font-size 16px, line-height 24px (no 1.6), text-align start (izquierda, NO justify — solo el texto legal final usa justify). ========================================================================== */ .innovalike-single-cr .innovalike-cr-content { font-family: var(--innovalike-cr-font); font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; color: var(--innovalike-cr-text); margin-bottom: 30px; } /* ========================================================================== Más información ========================================================================== */ .innovalike-single-cr .innovalike-cr-mas-info-title { font-family: var(--innovalike-cr-font); font-size: 18px; font-weight: 600; color: var(--innovalike-cr-text); margin: 0 10px 5px 0; } .innovalike-single-cr .innovalike-cr-mas-info-link { font-family: var(--innovalike-cr-font); font-size: 18px; font-weight: 500; color: var(--innovalike-cr-primary); text-decoration: underline; display: inline-block; margin-bottom: 5px; } .innovalike-single-cr .innovalike-cr-mas-info-link:hover { color: var(--innovalike-cr-accent); } /* ========================================================================== Cajas de widgets (Disclaimer / ODS / Ofrecido por) ========================================================================== */ .innovalike-cr-box { margin: 25px 0; } /* ========================================================================== Texto legal final ========================================================================== */ .innovalike-single-cr .innovalike-cr-legal { font-family: var(--innovalike-cr-font); font-size: 12px; font-weight: 400; font-style: italic; line-height: 15.6px; color: var(--innovalike-cr-gray-text); text-align: justify; margin: 0 0 50px 0; } /* ========================================================================== Responsive ========================================================================== */ /* La imagen destacada siempre mantiene su relación de aspecto original a ancho completo, sin recortar ni forzar una altura fija en ningún breakpoint. */