/*! * COORM Prensa — experiencia de lectura para las notas de prensa de coorm.org * * Todo cuelga de .coorm-nota (nota individual) o .coorm-sala-prensa (listado), * clases que el plugin añade al . Nada de esto alcanza al resto del sitio. */ /* ------------------------------------------------------------------ * * Fuentes de identidad, servidas locales desde el propio plugin * ------------------------------------------------------------------ */ @font-face { font-family: "Arvo COORM"; src: url("../fonts/arvo-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Arvo COORM"; src: url("../fonts/arvo-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Arvo COORM"; src: url("../fonts/arvo-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Open Sans COORM"; src: url("../fonts/opensans-variable.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans COORM"; src: url("../fonts/opensans-italic-variable.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; } /* ------------------------------------------------------------------ * * Tokens * ------------------------------------------------------------------ */ body.coorm-nota, body.coorm-sala-prensa { --coorm-coral: #ec676b; /* El coral corporativo del manual. El único rojo. */ --coorm-tinta: #171412; --coorm-gris: #6b6560; --coorm-papel: #fcfaf8; --coorm-linea: #e7e1db; --coorm-medida: 68ch; --coorm-ancho: 1100px; --coorm-titular: "Arvo COORM", "Arvo", Georgia, "Times New Roman", serif; --coorm-texto: "Open Sans COORM", "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --coorm-ritmo: clamp(1.4rem, 2.4vw, 1.9rem); } /* ================================================================== * * 1. LA NOTA * ================================================================== */ body.coorm-nota .elementor-location-single { background: var(--coorm-papel); color: var(--coorm-tinta); font-family: var(--coorm-texto); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* --- Cabecera editorial ------------------------------------------- */ body.coorm-nota .coorm-antetitulo { margin: 0 0 0.9rem; font-family: var(--coorm-texto); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3; } body.coorm-nota .coorm-antetitulo a { color: var(--coorm-coral); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } body.coorm-nota .coorm-antetitulo a:hover, body.coorm-nota .coorm-antetitulo a:focus-visible { border-bottom-color: currentColor; } /* Se nombra también el widget: las reglas por elemento de Elementor (.elementor-6281 .elementor-element.elementor-element-XXX .elementor-heading-title) pesan cuatro clases, y sin esto el titular se quedaba con el rojo del kit. */ body.coorm-nota .elementor-location-single .elementor-widget-heading h1.elementor-heading-title { font-family: var(--coorm-titular); font-weight: 700; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.12; letter-spacing: -0.015em; /* !important porque el color lo fija el kit de Elementor por widget y ahí no se gana por especificidad. Coral corporativo, no el rojo del kit. */ color: var(--coorm-coral) !important; text-wrap: balance; margin: 0; /* En em, así que la medida del titular acompaña a su propio cuerpo. */ max-width: 15em; } /* Los rótulos de sección de la plantilla («Compartir», «Últimas noticias») venían con el rojo del kit de Elementor, distinto del corporativo. */ body.coorm-nota .elementor-location-single .elementor-widget-heading .elementor-heading-title:not(h1) { font-family: var(--coorm-titular); color: var(--coorm-coral) !important; } /* Los enlaces de las tarjetas también los pinta el kit por widget. */ body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__title a, body.coorm-sala-prensa .elementor-location-archive .elementor-post__title a, body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__read-more, body.coorm-sala-prensa .elementor-location-archive .elementor-post__read-more, body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__meta-data, body.coorm-sala-prensa .elementor-location-archive .elementor-post__meta-data { color: var(--coorm-coral) !important; } /* Con el titular ya en coral, el hover tiene que ir al otro lado. */ body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post:hover .elementor-post__title a, body.coorm-sala-prensa .elementor-location-archive .elementor-post:hover .elementor-post__title a { color: var(--coorm-tinta) !important; } body.coorm-nota .coorm-firma { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; margin: 1.15rem 0 0; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--coorm-gris); } body.coorm-nota .coorm-firma__autor a { color: var(--coorm-tinta); text-decoration: none; border-bottom: 1px solid var(--coorm-linea); } body.coorm-nota .coorm-firma__autor a:hover, body.coorm-nota .coorm-firma__autor a:focus-visible { border-bottom-color: var(--coorm-coral); } body.coorm-nota .coorm-firma__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--coorm-coral); } /* --- Imagen destacada --------------------------------------------- */ body.coorm-nota .coorm-destacada { margin: 0 0 calc(var(--coorm-ritmo) * 1.6); max-width: min(100%, var(--coorm-ancho)); margin-inline: auto; } body.coorm-nota .coorm-destacada__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; } body.coorm-nota .coorm-pie, body.coorm-nota .coorm-cuerpo figcaption, body.coorm-nota .coorm-cuerpo .wp-caption-text { margin: 0.7rem 0 0; max-width: var(--coorm-medida); font-size: 0.8125rem; font-style: italic; line-height: 1.55; color: var(--coorm-gris); text-align: left; } /* --- Cuerpo -------------------------------------------------------- */ body.coorm-nota .coorm-cuerpo { max-width: var(--coorm-medida); margin-inline: auto; font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.75; color: var(--coorm-tinta); overflow-wrap: break-word; } body.coorm-nota .coorm-cuerpo > * { margin-block: 0 var(--coorm-ritmo); } body.coorm-nota .coorm-cuerpo > *:last-child { margin-bottom: 0; } body.coorm-nota .coorm-cuerpo p { font-family: var(--coorm-texto); } /* La partición de palabras solo compensa cuando la columna se estrecha. */ @media (max-width: 600px) { body.coorm-nota .coorm-cuerpo p { hyphens: auto; } } body.coorm-nota .coorm-cuerpo .coorm-entradilla { font-size: clamp(1.1875rem, 2vw, 1.375rem); line-height: 1.6; font-weight: 400; color: #3d3733; margin-bottom: calc(var(--coorm-ritmo) * 1.15); } /* Capitular en Arvo, tres líneas. initial-letter donde exista, float si no. */ body.coorm-nota .coorm-cuerpo .coorm-capitular::first-letter { float: left; font-family: var(--coorm-titular); font-weight: 700; font-size: 3.9em; line-height: 0.82; margin: 0.06em 0.09em 0 0; color: var(--coorm-coral); } @supports (initial-letter: 3) or (-webkit-initial-letter: 3) { body.coorm-nota .coorm-cuerpo .coorm-capitular::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0 0.08em 0 0; -webkit-initial-letter: 3; initial-letter: 3; } } /* Ladillos */ body.coorm-nota .coorm-cuerpo h2, body.coorm-nota .coorm-cuerpo h3, body.coorm-nota .coorm-cuerpo h4 { font-family: var(--coorm-titular); font-weight: 700; color: var(--coorm-tinta); line-height: 1.25; letter-spacing: -0.01em; margin-top: calc(var(--coorm-ritmo) * 1.7); text-wrap: balance; } body.coorm-nota .coorm-cuerpo h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); } body.coorm-nota .coorm-cuerpo h3 { font-size: clamp(1.1875rem, 2.1vw, 1.375rem); } body.coorm-nota .coorm-cuerpo h4 { font-family: var(--coorm-texto); font-size: 1.0625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coorm-gris); } /* Enlaces */ body.coorm-nota .coorm-cuerpo a { color: var(--coorm-coral); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-thickness 0.15s ease, color 0.15s ease; } body.coorm-nota .coorm-cuerpo a:hover, body.coorm-nota .coorm-cuerpo a:focus-visible { text-decoration-thickness: 2px; } /* Listas */ body.coorm-nota .coorm-cuerpo ul, body.coorm-nota .coorm-cuerpo ol { padding-left: 1.35em; } body.coorm-nota .coorm-cuerpo li { margin-bottom: 0.55em; } body.coorm-nota .coorm-cuerpo ul li::marker { color: var(--coorm-coral); } body.coorm-nota .coorm-cuerpo ol li::marker { color: var(--coorm-coral); font-weight: 700; } /* Citas */ body.coorm-nota .coorm-cuerpo blockquote { margin-inline: 0; padding: 0.2rem 0 0.2rem 1.6rem; border-left: 3px solid var(--coorm-coral); font-family: var(--coorm-titular); font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.5; font-style: normal; color: var(--coorm-tinta); background: none; } body.coorm-nota .coorm-cuerpo blockquote p:last-child { margin-bottom: 0; } body.coorm-nota .coorm-cuerpo blockquote cite { display: block; margin-top: 0.8rem; font-family: var(--coorm-texto); font-size: 0.8125rem; font-style: normal; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coorm-gris); } /* Figuras dentro del cuerpo: pueden salirse de la medida de lectura. */ body.coorm-nota .coorm-cuerpo img, body.coorm-nota .coorm-cuerpo figure { max-width: 100%; height: auto; } body.coorm-nota .coorm-cuerpo figure { margin-inline: 0; } body.coorm-nota .coorm-cuerpo .coorm-apertura, body.coorm-nota .coorm-cuerpo .alignwide { width: min(var(--coorm-ancho), 92vw); max-width: none; margin-inline: calc(50% - min(var(--coorm-ancho), 92vw) / 2); } body.coorm-nota .coorm-cuerpo .alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); } body.coorm-nota .coorm-cuerpo .coorm-apertura { margin-bottom: calc(var(--coorm-ritmo) * 1.6); } body.coorm-nota .coorm-cuerpo .coorm-apertura img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; } body.coorm-nota .coorm-cuerpo hr { border: 0; height: 1px; background: var(--coorm-linea); margin-block: calc(var(--coorm-ritmo) * 1.6); } body.coorm-nota .coorm-cuerpo table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } body.coorm-nota .coorm-cuerpo th, body.coorm-nota .coorm-cuerpo td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--coorm-linea); text-align: left; } body.coorm-nota .coorm-cuerpo th { font-family: var(--coorm-texto); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; color: var(--coorm-gris); } /* --- Pie de autor --------------------------------------------------- */ body.coorm-nota .coorm-autor { display: flex; align-items: flex-start; gap: 1.1rem; max-width: var(--coorm-medida); margin: calc(var(--coorm-ritmo) * 2) auto 0; padding: 1.4rem 1.5rem; background: #fff; border: 1px solid var(--coorm-linea); border-left: 3px solid var(--coorm-coral); border-radius: 2px; font-family: var(--coorm-texto); } body.coorm-nota .coorm-autor__retrato { flex: 0 0 auto; line-height: 0; } body.coorm-nota .coorm-autor__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } body.coorm-nota .coorm-autor__ficha > * { margin: 0; } body.coorm-nota .coorm-autor__etiqueta { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coorm-coral); margin-bottom: 0.25rem; } body.coorm-nota .coorm-autor__nombre { font-family: var(--coorm-titular); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--coorm-tinta); } body.coorm-nota .coorm-autor__nombre a { color: inherit; text-decoration: none; } body.coorm-nota .coorm-autor__nombre a:hover, body.coorm-nota .coorm-autor__nombre a:focus-visible { color: var(--coorm-coral); } body.coorm-nota .coorm-autor__cargo { margin-top: 0.15rem; font-size: 0.8125rem; font-weight: 600; color: var(--coorm-gris); } body.coorm-nota .coorm-autor__bio { margin-top: 0.55rem; font-size: 0.9375rem; line-height: 1.6; color: var(--coorm-gris); } body.coorm-nota .coorm-autor__web { margin-top: 0.45rem; font-size: 0.8125rem; } body.coorm-nota .coorm-autor__web a { color: var(--coorm-coral); text-decoration: none; border-bottom: 1px solid var(--coorm-linea); } @media (max-width: 520px) { body.coorm-nota .coorm-autor { flex-direction: column; gap: 0.9rem; } } /* --- Redes del autor ------------------------------------------------ * * Mismo lenguaje en el pie de la nota y en la página de firmas. * -------------------------------------------------------------------- */ body.coorm-nota .coorm-redes, body.coorm-firmas .coorm-redes { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0.9rem 0 0; padding: 0; } body.coorm-firmas .coorm-redes { justify-content: center; margin-top: 1.2rem; } body.coorm-nota .coorm-redes__enlace, body.coorm-firmas .coorm-redes__enlace { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--coorm-linea); border-radius: 50%; background: transparent; color: var(--coorm-tinta); text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } body.coorm-nota .coorm-redes__enlace svg, body.coorm-firmas .coorm-redes__enlace svg { width: 15px; height: 15px; fill: currentColor; } body.coorm-nota .coorm-redes__enlace:hover, body.coorm-nota .coorm-redes__enlace:focus-visible, body.coorm-firmas .coorm-redes__enlace:hover, body.coorm-firmas .coorm-redes__enlace:focus-visible { background: var(--coorm-coral); border-color: var(--coorm-coral); color: #fff; } body.coorm-firmas .coorm-firmas__web { margin: 0.9rem 0 0; font-size: 0.875rem; } body.coorm-firmas .coorm-firmas__web a { color: var(--coorm-coral); text-decoration: none; border-bottom: 1px solid var(--coorm-linea); } body.coorm-nota .coorm-redes .screen-reader-text, body.coorm-firmas .coorm-redes .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Cierre institucional ------------------------------------------ */ body.coorm-nota .coorm-cierre { max-width: var(--coorm-medida); margin: calc(var(--coorm-ritmo) * 2.4) auto 0; padding-top: calc(var(--coorm-ritmo) * 1.4); border-top: 1px solid var(--coorm-linea); font-family: var(--coorm-texto); position: relative; } body.coorm-nota .coorm-cierre__isotipo { display: block; width: 44px; height: 44px; margin: -1.4rem auto calc(var(--coorm-ritmo) * 0.9); background: var(--coorm-papel); padding: 0 0.6rem; box-sizing: content-box; } body.coorm-nota .coorm-cierre__bloques { display: grid; gap: calc(var(--coorm-ritmo) * 1.1); } @media (min-width: 720px) { body.coorm-nota .coorm-cierre__bloques { grid-template-columns: 1.6fr 1fr; } } body.coorm-nota .coorm-cierre__titulo { margin: 0 0 0.6rem; font-family: var(--coorm-texto); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coorm-coral); } body.coorm-nota .coorm-cierre__bloque p { margin: 0 0 0.7rem; font-size: 0.9375rem; line-height: 1.65; color: var(--coorm-gris); } body.coorm-nota .coorm-cierre__contacto { margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; line-height: 1.7; color: var(--coorm-gris); } body.coorm-nota .coorm-cierre__contacto a { color: var(--coorm-tinta); text-decoration: none; border-bottom: 1px solid var(--coorm-linea); } body.coorm-nota .coorm-cierre__contacto a:hover, body.coorm-nota .coorm-cierre__contacto a:focus-visible { border-bottom-color: var(--coorm-coral); } /* --- Barra de progreso --------------------------------------------- */ .coorm-progreso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 99990; pointer-events: none; background: transparent; } .coorm-progreso__barra { display: block; height: 100%; width: 0; background: var(--coorm-coral, #ec676b); transform-origin: left center; transition: width 0.08s linear; } /* --- Compartir ------------------------------------------------------ */ .coorm-compartir { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99980; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.55rem 1rem; font-family: var(--coorm-texto, system-ui, sans-serif); background: rgba(252, 250, 248, 0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--coorm-linea, #e7e1db); opacity: 0; visibility: hidden; transform: translateY(100%); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; } .coorm-compartir.esta-visible { opacity: 1; visibility: visible; transform: none; } .coorm-compartir__titulo { font-family: var(--coorm-texto); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coorm-gris, #6b6560); } .coorm-compartir__lista { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } .coorm-compartir__boton { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--coorm-linea, #e7e1db); border-radius: 50%; background: #fff; color: var(--coorm-tinta, #171412); cursor: pointer; padding: 0; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .coorm-compartir__boton svg { width: 17px; height: 17px; fill: currentColor; } .coorm-compartir__boton:hover, .coorm-compartir__boton:focus-visible { background: var(--coorm-coral, #ec676b); border-color: var(--coorm-coral, #ec676b); color: #fff; } .coorm-compartir__aviso { font-family: var(--coorm-texto); font-size: 0.75rem; font-weight: 600; color: var(--coorm-coral, #ec676b); min-width: 1px; } /* Raíl vertical en pantallas anchas. Pide también altura: con seis botones, en una ventana baja el raíl no cabría y es mejor la barra inferior. */ @media (min-width: 1200px) and (min-height: 700px) { .coorm-compartir { left: max(1.5rem, calc(50vw - 640px)); right: auto; bottom: auto; top: 50%; transform: translateY(-40%); flex-direction: column; gap: 0.6rem; padding: 0.9rem 0.6rem; border: 1px solid var(--coorm-linea, #e7e1db); border-radius: 999px; background: rgba(252, 250, 248, 0.9); } .coorm-compartir.esta-visible { transform: translateY(-50%); } .coorm-compartir__titulo { writing-mode: vertical-rl; letter-spacing: 0.22em; } .coorm-compartir__lista { flex-direction: column; } .coorm-compartir__aviso { writing-mode: vertical-rl; } } /* ================================================================== * * 2. TARJETAS DE NOTICIA * * Mismas reglas para los relacionados del pie de la nota y para el listado * de /actualidad/: si las tarjetas se ven distintas en un sitio y en otro, * el rojo y el espaciado dejan de ser uno solo. * ================================================================== */ body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post, body.coorm-sala-prensa .elementor-location-archive .elementor-post { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--coorm-linea); border-radius: 2px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post:hover, body.coorm-sala-prensa .elementor-location-archive .elementor-post:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(23, 20, 18, 0.09); } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__thumbnail, body.coorm-sala-prensa .elementor-location-archive .elementor-post__thumbnail { aspect-ratio: 3 / 2; padding: 0 !important; } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__thumbnail img, body.coorm-sala-prensa .elementor-location-archive .elementor-post__thumbnail img { width: 100%; height: 100%; object-fit: cover; } /* El aire de dentro de la tarjeta. Es lo que faltaba en móvil. */ body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__text, body.coorm-sala-prensa .elementor-location-archive .elementor-post__text { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.25rem 1.25rem 1.4rem; margin: 0; } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__meta-data, body.coorm-sala-prensa .elementor-location-archive .elementor-post__meta-data { font-family: var(--coorm-texto); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coorm-coral); margin: 0 0 0.7rem; padding: 0; border: 0; } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__title, body.coorm-sala-prensa .elementor-location-archive .elementor-post__title { margin: 0 0 0.7rem; } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__title, body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__title a, body.coorm-sala-prensa .elementor-location-archive .elementor-post__title, body.coorm-sala-prensa .elementor-location-archive .elementor-post__title a { font-family: var(--coorm-titular); font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: var(--coorm-coral); text-decoration: none; text-wrap: balance; } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post:hover .elementor-post__title a, body.coorm-sala-prensa .elementor-location-archive .elementor-post:hover .elementor-post__title a { color: var(--coorm-tinta); } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__excerpt, body.coorm-sala-prensa .elementor-location-archive .elementor-post__excerpt { margin: 0 0 1.1rem; } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__excerpt p, body.coorm-sala-prensa .elementor-location-archive .elementor-post__excerpt p { font-family: var(--coorm-texto); font-size: 0.9375rem; line-height: 1.65; color: var(--coorm-gris); margin: 0; } /* «Seguir leyendo» venía con el rojo del kit de Elementor, distinto del corporativo. Aquí se iguala, y se separa del texto de arriba. */ body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__read-more, body.coorm-sala-prensa .elementor-location-archive .elementor-post__read-more { display: inline-block; margin: auto 0 0; padding-top: 0.2rem; font-family: var(--coorm-texto); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coorm-coral); text-decoration: none; border-bottom: 1px solid transparent; } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__read-more:hover, body.coorm-sala-prensa .elementor-location-archive .elementor-post__read-more:hover { border-bottom-color: currentColor; } /* En una sola columna la tarjeta ocupa todo el ancho y pide más aire dentro, además de separarse bien de la siguiente. */ @media (max-width: 767px) { body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__text, body.coorm-sala-prensa .elementor-location-archive .elementor-post__text { padding: 1.4rem 1.35rem 1.6rem; } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__title, body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__title a, body.coorm-sala-prensa .elementor-location-archive .elementor-post__title, body.coorm-sala-prensa .elementor-location-archive .elementor-post__title a { font-size: 1.1875rem; line-height: 1.35; } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__title, body.coorm-sala-prensa .elementor-location-archive .elementor-post__title { margin-bottom: 0.85rem; } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__meta-data, body.coorm-sala-prensa .elementor-location-archive .elementor-post__meta-data { margin-bottom: 0.8rem; } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-post__excerpt, body.coorm-sala-prensa .elementor-location-archive .elementor-post__excerpt { margin-bottom: 1.25rem; } body.coorm-nota .elementor-location-single .elementor-widget-posts .elementor-grid-item, body.coorm-sala-prensa .elementor-location-archive .elementor-grid-item { margin-bottom: 1.25rem; } } /* La noticia más reciente del listado ocupa dos columnas: es la portada. */ @media (min-width: 768px) { body.coorm-sala-prensa .elementor-location-archive .elementor-grid > .elementor-grid-item:first-child { grid-column: span 2; } body.coorm-sala-prensa .elementor-location-archive .elementor-grid > .elementor-grid-item:first-child .elementor-post__thumbnail { aspect-ratio: 21 / 9; } body.coorm-sala-prensa .elementor-location-archive .elementor-grid > .elementor-grid-item:first-child .elementor-post__title, body.coorm-sala-prensa .elementor-location-archive .elementor-grid > .elementor-grid-item:first-child .elementor-post__title a { font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1.22; } body.coorm-sala-prensa .elementor-location-archive .elementor-grid > .elementor-grid-item:first-child .elementor-post__text { padding: 1.6rem 1.75rem 1.85rem; } } /* ================================================================== * * 3. PÁGINA DE FIRMAS (/author//) * * La pinta el plugin de cero: el tema no tiene plantilla para el archivo de * autor y volcaba el contenido completo de cada entrada sin estilos. * ================================================================== */ body.coorm-firmas { --coorm-coral: #ec676b; --coorm-tinta: #171412; --coorm-gris: #6b6560; --coorm-papel: #fcfaf8; --coorm-linea: #e7e1db; --coorm-titular: "Arvo COORM", "Arvo", Georgia, serif; --coorm-texto: "Open Sans COORM", "Open Sans", system-ui, sans-serif; } .coorm-firmas__pagina { background: var(--coorm-papel); font-family: var(--coorm-texto); color: var(--coorm-tinta); padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem clamp(3rem, 7vw, 5rem); } .coorm-firmas__ancho { max-width: 1100px; margin-inline: auto; } /* --- Cabecera del autor -------------------------------------------- */ .coorm-firmas__cabecera { text-align: center; max-width: 60ch; margin: 0 auto clamp(2.5rem, 5vw, 3.75rem); padding-bottom: clamp(1.75rem, 4vw, 2.5rem); border-bottom: 1px solid var(--coorm-linea); } .coorm-firmas__antetitulo { margin: 0 0 1.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--coorm-coral); } .coorm-firmas__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 1.25rem; } .coorm-firmas__nombre { margin: 0; font-family: var(--coorm-titular); font-weight: 700; font-size: clamp(1.75rem, 4.5vw, 2.75rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--coorm-tinta); text-wrap: balance; } .coorm-firmas__cargo { margin: 0.65rem 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--coorm-gris); } .coorm-firmas__bio { margin: 1.1rem 0 0; font-size: 1.0625rem; line-height: 1.7; color: var(--coorm-gris); } .coorm-firmas__recuento { margin: 1.35rem 0 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coorm-gris); } /* --- Rejilla de artículos ------------------------------------------ */ .coorm-firmas__rejilla { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 620px) { .coorm-firmas__rejilla { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .coorm-firmas__rejilla { grid-template-columns: repeat(3, 1fr); } } body.coorm-firmas .coorm-tarjeta { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--coorm-linea); border-radius: 2px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } body.coorm-firmas .coorm-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(23, 20, 18, 0.09); } body.coorm-firmas .coorm-tarjeta__foto { display: block; aspect-ratio: 3 / 2; line-height: 0; } body.coorm-firmas .coorm-tarjeta__img { width: 100%; height: 100%; object-fit: cover; } body.coorm-firmas .coorm-tarjeta__texto { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.4rem 1.35rem 1.5rem; } body.coorm-firmas .coorm-tarjeta__antetitulo { margin: 0 0 0.7rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coorm-coral); } body.coorm-firmas .coorm-tarjeta__titulo { margin: 0 0 0.8rem; font-family: var(--coorm-titular); font-size: 1.125rem; font-weight: 700; line-height: 1.38; text-wrap: balance; } body.coorm-firmas .coorm-tarjeta__titulo a { color: var(--coorm-coral); text-decoration: none; } body.coorm-firmas .coorm-tarjeta:hover .coorm-tarjeta__titulo a { color: var(--coorm-tinta); } body.coorm-firmas .coorm-tarjeta__extracto { margin: 0 0 1.2rem; font-size: 0.9375rem; line-height: 1.65; color: var(--coorm-gris); } body.coorm-firmas .coorm-tarjeta__pie { display: flex; align-items: center; gap: 0.6rem; margin: auto 0 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--coorm-gris); } body.coorm-firmas .coorm-tarjeta__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--coorm-coral); flex: 0 0 auto; } /* --- Paginación y vacío -------------------------------------------- */ .coorm-firmas__paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); } .coorm-firmas__paginacion .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.85rem; border: 1px solid var(--coorm-linea); border-radius: 2px; background: #fff; font-size: 0.875rem; font-weight: 700; color: var(--coorm-tinta); text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .coorm-firmas__paginacion .page-numbers:hover, .coorm-firmas__paginacion .page-numbers:focus-visible, .coorm-firmas__paginacion .page-numbers.current { background: var(--coorm-coral); border-color: var(--coorm-coral); color: #fff; } .coorm-firmas__vacio { text-align: center; font-size: 1.0625rem; color: var(--coorm-gris); } /* ================================================================== * * 4. Accesibilidad * ================================================================== */ /* Etiqueta solo para lectores de pantalla. No dependemos de que el tema defina .screen-reader-text: si no lo hiciera, los textos se verían. */ .coorm-compartir .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } body.coorm-nota .elementor-location-single a:focus-visible, .coorm-compartir a:focus-visible, .coorm-compartir button:focus-visible { outline: 2px solid var(--coorm-coral, #ec676b); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { .coorm-progreso__barra, .coorm-compartir, .coorm-compartir__boton, body.coorm-nota .elementor-widget-posts .elementor-post { transition: none !important; } body.coorm-nota .elementor-widget-posts .elementor-post:hover, body.coorm-sala-prensa .elementor-widget-posts .elementor-post:hover { transform: none; } } @media print { .coorm-progreso, .coorm-compartir { display: none !important; } body.coorm-nota .elementor-location-single { background: #fff; } }