/*
Theme Name: Trigranada (Astra child)
Theme URI: https://www.trigranada.com/
Description: Tema hijo de Astra con el sistema de diseño del C.D. Triatlón Granada. Todo el rediseño vive aquí; el tema padre no se modifica.
Author: C.D. Triatlón Granada
Template: astra
Version: 1.6.0
Text Domain: trigranada
*/
/* Tipografías del club, servidas desde el propio dominio.
Generado a partir del CSS de Google Fonts: mismos ficheros woff2 y los
mismos unicode-range, para que el navegador siga descargando solo el
subconjunto que necesita. */
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/barlow-condensed-600-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;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/barlow-condensed-600-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: 'Barlow Condensed';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/barlow-condensed-700-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;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/barlow-condensed-700-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: 'Source Sans 3';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/source-sans-3-400-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;
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/source-sans-3-400-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: 'Source Sans 3';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/source-sans-3-600-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;
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/source-sans-3-600-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: 'Source Sans 3';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/source-sans-3-700-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;
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/source-sans-3-700-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;
}
/* ==========================================================================
1. Tokens del sistema de diseño
Cambiar un valor aquí lo cambia en todo el sitio.
========================================================================== */
:root {
--tg-navy: #08243B;
--tg-navy-700: #0D3352;
--tg-navy-600: #16405F;
--tg-blue: #0E63AE;
--tg-blue-600: #0B5291;
--tg-blue-50: #EAF2F9;
--tg-accent: #FF5A1F; /* fondos de acción; el texto encima va en navy */
--tg-accent-600: #E84D14;
--tg-accent-ink: #C2410C; /* naranja legible sobre fondo claro */
--tg-accent-50: #FFEDE4;
--tg-ink: #0F1E2B;
--tg-body: #37485A;
--tg-muted: #56697A;
--tg-line: #E2E8ED;
--tg-ground: #F4F6F8;
--tg-white: #FFFFFF;
--tg-on-navy: #D5E3EE;
--tg-on-navy-dim: #9FB6C8;
--tg-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
--tg-text: 'Source Sans 3', system-ui, -apple-system, sans-serif;
--tg-radius: 4px;
--tg-wrap: 1240px;
--tg-gutter: clamp(20px, 4vw, 64px);
--tg-shadow: 0 18px 40px rgba(8, 36, 59, 0.14);
}
/* ==========================================================================
2. Base tipográfica
========================================================================== */
body,
button,
input,
select,
textarea,
.ast-button {
font-family: var(--tg-text);
color: var(--tg-ink);
}
body {
background-color: var(--tg-ground);
font-size: 17px;
line-height: 1.68;
}
h1, h2, h3, h4, h5, h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-title,
.entry-title a,
.site-title,
.site-title a {
font-family: var(--tg-display);
font-weight: 700;
color: var(--tg-navy);
letter-spacing: -0.005em;
line-height: 1.04;
}
.entry-content h1 { font-size: clamp(38px, 5vw, 62px); }
.entry-content h2 { font-size: clamp(32px, 4vw, 50px); text-transform: uppercase; }
.entry-content h3 { font-size: clamp(24px, 2.6vw, 32px); }
.entry-content h4 { font-size: clamp(21px, 2.2vw, 26px); }
.entry-content p,
.entry-content li {
color: var(--tg-body);
line-height: 1.68;
}
.entry-content strong { color: var(--tg-navy); }
a { color: var(--tg-blue); }
a:hover,
a:focus { color: var(--tg-navy); }
/* Ancho de lectura cómodo en páginas de texto corrido. */
.page .entry-content > p,
.page .entry-content > ul,
.page .entry-content > ol,
.single .entry-content > p,
.single .entry-content > ul,
.single .entry-content > ol {
max-width: 74ch;
}
/* ==========================================================================
3. Barra superior y cabecera
========================================================================== */
.tg-topbar {
background: var(--tg-navy);
color: var(--tg-on-navy-dim);
}
.tg-topbar__inner {
max-width: var(--tg-wrap);
margin: 0 auto;
padding: 9px var(--tg-gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.tg-topbar__claim {
font-size: 13px;
letter-spacing: 0.01em;
}
.tg-topbar__links {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
.tg-topbar__link,
.tg-topbar__social {
color: var(--tg-on-navy-dim);
text-decoration: none;
font-size: 13px;
font-weight: 600;
display: inline-flex;
align-items: center;
}
.tg-topbar__link:hover,
.tg-topbar__social:hover,
.tg-topbar__link:focus,
.tg-topbar__social:focus { color: var(--tg-white); }
.ast-primary-header-bar,
.main-header-bar {
background-color: var(--tg-white);
border-bottom: 1px solid var(--tg-line);
}
.main-header-menu .menu-link,
.main-header-menu > .menu-item > .menu-link {
font-family: var(--tg-text);
font-size: 15px;
font-weight: 600;
color: var(--tg-ink);
letter-spacing: 0;
}
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link {
color: var(--tg-blue);
}
/* Elemento del menú marcado con la clase CSS "tg-menu-cta": se pinta como botón. */
.main-header-menu .tg-menu-cta > .menu-link {
font-family: var(--tg-display);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tg-navy);
background: var(--tg-accent);
border-radius: var(--tg-radius);
padding: 11px 24px;
line-height: 1.2;
}
.main-header-menu .tg-menu-cta > .menu-link:hover,
.main-header-menu .tg-menu-cta > .menu-link:focus {
background: var(--tg-accent-600);
color: var(--tg-navy);
}
/* ==========================================================================
4. Botones
========================================================================== */
.tg-btn,
.entry-content .wp-block-button__link,
.ast-button,
.wpforms-submit,
input[type="submit"],
button[type="submit"] {
display: inline-block;
font-family: var(--tg-display);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.2;
border: 0;
border-radius: var(--tg-radius);
padding: 15px 34px;
cursor: pointer;
text-decoration: none;
transition: background-color 0.15s ease;
}
.tg-btn--accent,
.entry-content .wp-block-button__link,
.wpforms-submit,
input[type="submit"],
button[type="submit"] {
background: var(--tg-accent);
/* texto navy sobre naranja: el blanco no llega al contraste mínimo */
color: var(--tg-navy);
}
.tg-btn--accent:hover,
.entry-content .wp-block-button__link:hover,
.wpforms-submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.tg-btn--accent:focus,
.entry-content .wp-block-button__link:focus,
.wpforms-submit:focus {
background: var(--tg-accent-600);
color: var(--tg-navy);
}
.tg-btn--ghost {
background: transparent;
color: var(--tg-white);
border: 2px solid rgba(255, 255, 255, 0.55);
padding: 13px 32px;
}
.tg-btn--ghost:hover,
.tg-btn--ghost:focus {
background: rgba(255, 255, 255, 0.12);
color: var(--tg-white);
}
.tg-btn--outline {
background: var(--tg-white);
color: var(--tg-blue);
border: 2px solid var(--tg-blue);
padding: 13px 32px;
}
.tg-btn--outline:hover,
.tg-btn--outline:focus {
background: var(--tg-blue);
color: var(--tg-white);
}
/* Enlace de texto con flecha. */
.tg-link {
font-family: var(--tg-text);
font-size: 16px;
font-weight: 700;
color: var(--tg-accent-ink);
text-decoration: none;
}
.tg-link:hover,
.tg-link:focus { color: var(--tg-navy); }
/* ==========================================================================
5. Estructura de secciones (bloques de contenido del rediseño)
========================================================================== */
/* En la portada el contenido va a ancho completo: cada sección gestiona su
propio ancho interior con .tg-wrap. */
.home .site-content > .ast-container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
display: block;
}
.home .ast-container .entry-content > * { margin-block: 0; }
.tg-wrap {
max-width: var(--tg-wrap);
margin: 0 auto;
padding-inline: var(--tg-gutter);
}
.tg-section { padding-block: clamp(48px, 6vw, 84px); }
.tg-section--tight { padding-block: clamp(32px, 4vw, 56px); }
.tg-section--navy { background: var(--tg-navy); }
.tg-section--navy .tg-eyebrow { color: #FFB08A; }
.tg-section--navy .tg-title { color: var(--tg-white); }
.tg-eyebrow {
font-family: var(--tg-display);
font-weight: 600;
font-size: 16px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tg-accent-ink);
margin: 0;
}
.entry-content .tg-title {
font-size: clamp(32px, 4vw, 50px);
text-transform: uppercase;
margin: 8px 0 0;
}
.tg-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.tg-grid { display: grid; gap: 24px; }
.tg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ---------- Hero ---------- */
.tg-hero {
position: relative;
min-height: clamp(420px, 52vw, 660px);
display: flex;
align-items: center;
overflow: hidden;
background: var(--tg-navy);
}
.tg-hero__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 38%;
}
.tg-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(6, 26, 43, 0.94) 0%, rgba(6, 26, 43, 0.80) 42%, rgba(6, 26, 43, 0.25) 100%);
}
.tg-hero__inner {
position: relative;
z-index: 1;
max-width: var(--tg-wrap);
width: 100%;
margin: 0 auto;
padding: clamp(40px, 6vw, 72px) var(--tg-gutter);
}
.tg-hero__kicker {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--tg-display);
font-weight: 600;
font-size: 17px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #FFB08A;
margin: 0 0 22px;
}
.tg-hero__kicker::before {
content: "";
width: 44px;
height: 3px;
background: var(--tg-accent);
flex-shrink: 0;
}
.entry-content .tg-hero__title {
font-size: clamp(42px, 6.2vw, 88px);
line-height: 0.95;
text-transform: uppercase;
color: var(--tg-white);
max-width: 15ch;
margin: 0;
}
.tg-hero__text {
max-width: 52ch;
font-size: clamp(17px, 1.4vw, 19px);
line-height: 1.6;
color: var(--tg-on-navy);
margin: 22px 0 0;
}
.tg-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
/* ---------- Tira de datos ---------- */
.tg-stats {
position: relative;
z-index: 2;
margin-top: -62px;
background: var(--tg-white);
border-radius: var(--tg-radius);
box-shadow: var(--tg-shadow);
}
/* Como bloque "Columnas" de Gutenberg: sin hueco entre celdas, los
separadores son los bordes de cada columna. */
.tg-stats.wp-block-columns {
gap: 0;
margin-block: -62px 0;
flex-wrap: nowrap;
}
/* Como marcado propio (sin bloque de columnas). */
.tg-stats:not(.wp-block-columns) {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tg-stat {
padding: 28px 32px;
border-right: 1px solid #E8EDF2;
}
.tg-stats > .wp-block-column.tg-stat { margin: 0; }
.tg-stat:last-child { border-right: 0; }
.tg-stat__num {
font-family: var(--tg-display);
font-weight: 700;
font-size: 40px;
line-height: 1;
color: var(--tg-blue);
}
.tg-stat__label {
margin: 6px 0 0;
font-size: 15px;
color: var(--tg-muted);
line-height: 1.45;
}
/* ---------- Tarjetas genéricas ---------- */
.tg-card {
background: var(--tg-white);
border: 1px solid var(--tg-line);
border-radius: var(--tg-radius);
overflow: hidden;
}
/* ---------- Tarjeta de prueba / evento ---------- */
.tg-event {
background: var(--tg-white);
border: 1px solid var(--tg-line);
border-top: 4px solid var(--tg-blue);
border-radius: var(--tg-radius);
padding: 24px 26px;
display: flex;
gap: 20px;
}
.tg-event__date {
flex-shrink: 0;
width: 74px;
background: var(--tg-blue-50);
border-radius: var(--tg-radius);
padding: 12px 0;
text-align: center;
font-family: var(--tg-display);
}
.tg-event__day {
font-weight: 700;
font-size: 34px;
line-height: 1;
color: var(--tg-navy);
display: block;
}
.tg-event__month {
font-weight: 600;
font-size: 15px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tg-blue);
display: block;
}
.entry-content .tg-event__title {
font-size: 25px;
line-height: 1.1;
margin: 10px 0 0;
text-transform: none;
}
.tg-event__place {
margin: 8px 0 0;
font-size: 14px;
color: var(--tg-muted);
}
/* ---------- Etiquetas ---------- */
.tg-tag {
display: inline-block;
font-family: var(--tg-text);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 3px;
color: var(--tg-accent-ink);
background: var(--tg-accent-50);
}
.tg-tag--blue { color: var(--tg-blue); background: var(--tg-blue-50); }
/* ---------- Bloque de ventajas (sobre navy) ---------- */
.tg-feature {
background: var(--tg-navy-700);
border: 1px solid #19486C;
border-radius: var(--tg-radius);
padding: 28px 30px 30px;
}
.tg-feature__icon {
width: 46px;
height: 46px;
border-radius: 3px;
background: rgba(255, 90, 31, 0.16);
display: flex;
align-items: center;
justify-content: center;
color: #FF8A5C;
}
.tg-feature__icon img {
width: 26px;
height: 26px;
object-fit: contain;
}
.entry-content .tg-feature__title {
font-size: 27px;
line-height: 1;
text-transform: uppercase;
color: var(--tg-white);
margin: 18px 0 0;
}
.tg-feature p {
margin: 10px 0 0;
font-size: 16px;
line-height: 1.62;
color: #B7CCDC;
}
/* ---------- Cita destacada ---------- */
.tg-quote {
border-left: 4px solid var(--tg-accent);
padding-left: 22px;
margin: 26px 0 0;
}
.entry-content .tg-quote p {
font-family: var(--tg-display);
font-weight: 600;
font-size: clamp(22px, 2.2vw, 27px);
line-height: 1.22;
color: var(--tg-navy);
margin: 0;
}
/* ---------- Banda de llamada a la acción ---------- */
.tg-cta {
position: relative;
border-radius: var(--tg-radius);
overflow: hidden;
background: var(--tg-navy);
min-height: 300px;
display: flex;
align-items: center;
}
.tg-cta__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 28%;
}
.tg-cta::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(6, 26, 43, 0.95) 0%, rgba(6, 26, 43, 0.78) 55%, rgba(6, 26, 43, 0.45) 100%);
}
.tg-cta__inner {
position: relative;
z-index: 1;
width: 100%;
padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 56px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.entry-content .tg-cta__title {
font-size: clamp(32px, 3.8vw, 54px);
line-height: 0.98;
text-transform: uppercase;
color: var(--tg-white);
margin: 0;
max-width: 18ch;
}
.tg-cta__text {
margin: 12px 0 0;
max-width: 52ch;
color: var(--tg-on-navy);
font-size: 18px;
line-height: 1.6;
}
/* ==========================================================================
5 bis. Adaptación a los bloques de Gutenberg
Las secciones del rediseño se montan con bloques nativos (Grupo, Columnas,
Portada, Botones) para que sigan siendo editables desde wp-admin. Aquí se
ajusta lo que el marcado de bloques trae de serie.
========================================================================== */
/* El bloque Portada hace de hero y de banda CTA. */
.entry-content .wp-block-cover.tg-hero {
min-height: clamp(420px, 52vw, 660px);
padding: 0;
align-items: center;
}
.entry-content .wp-block-cover.tg-hero .wp-block-cover__inner-container,
.entry-content .wp-block-cover.tg-cta .wp-block-cover__inner-container {
max-width: var(--tg-wrap);
width: 100%;
margin: 0 auto;
padding: clamp(40px, 6vw, 72px) var(--tg-gutter);
}
.entry-content .wp-block-cover.tg-cta {
min-height: 300px;
border-radius: var(--tg-radius);
overflow: hidden;
padding: 0;
}
/* Botones dentro de hero y CTA: el secundario va en versión fantasma. */
.tg-hero .wp-block-button.is-style-outline .wp-block-button__link,
.tg-cta .wp-block-button.is-style-outline .wp-block-button__link {
background: transparent;
color: var(--tg-white);
border: 2px solid rgba(255, 255, 255, 0.55);
padding: 13px 32px;
}
.tg-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.tg-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--tg-white);
}
/* Rejillas de tarjetas montadas con el bloque Columnas. */
.entry-content .wp-block-columns.tg-cards { gap: 24px; }
.entry-content .wp-block-columns.tg-cards > .wp-block-column {
margin: 0;
}
/* Las columnas de Gutenberg se apilan solas por debajo de 782px; aquí sólo
se recolocan los separadores de la tira de datos. */
@media (max-width: 781px) {
.tg-stats.wp-block-columns { flex-wrap: wrap; }
.tg-stats > .wp-block-column.tg-stat {
flex-basis: 50% !important;
border-bottom: 1px solid #E8EDF2;
}
.tg-stats > .wp-block-column.tg-stat:nth-child(2n) { border-right: 0; }
.tg-stats > .wp-block-column.tg-stat:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 544px) {
.tg-stats > .wp-block-column.tg-stat {
flex-basis: 100% !important;
border-right: 0;
}
.tg-stats > .wp-block-column.tg-stat:nth-last-child(-n+2) {
border-bottom: 1px solid #E8EDF2;
}
.tg-stats > .wp-block-column.tg-stat:last-child { border-bottom: 0; }
}
/* ==========================================================================
6. Blog: listado y entrada
========================================================================== */
.ast-separate-container,
.ast-plain-container {
background-color: var(--tg-ground);
}
.blog .ast-article-post,
.archive .ast-article-post,
.search .ast-article-post {
background: transparent;
}
.blog .ast-article-inner,
.archive .ast-article-inner,
.search .ast-article-inner {
background: var(--tg-white);
border: 1px solid var(--tg-line);
border-radius: var(--tg-radius);
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: none;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.blog .ast-article-inner:hover,
.archive .ast-article-inner:hover {
box-shadow: 0 14px 30px rgba(8, 36, 59, 0.12);
transform: translateY(-2px);
}
.blog .ast-blog-featured-section img,
.archive .ast-blog-featured-section img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
}
/* La imagen destacada va a sangre dentro de la tarjeta: el padding se aplica
a los hijos de .post-content, no al contenedor (que también envuelve la
imagen). */
.blog .ast-article-inner .post-content,
.archive .ast-article-inner .post-content {
padding: 0 0 26px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.blog .ast-article-inner .post-content > *:not(.ast-blog-featured-section),
.archive .ast-article-inner .post-content > *:not(.ast-blog-featured-section) {
padding-inline: 24px;
}
.blog .ast-article-inner .post-content > .ast-blog-featured-section,
.archive .ast-article-inner .post-content > .ast-blog-featured-section {
margin-bottom: 18px;
}
.blog .entry-title,
.archive .entry-title {
font-size: 27px;
line-height: 1.08;
margin: 8px 0 0;
}
.blog .entry-title a,
.archive .entry-title a { color: var(--tg-navy); }
.blog .entry-title a:hover,
.archive .entry-title a:hover { color: var(--tg-blue); }
.ast-blog-single-element.ast-taxonomy-container a {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tg-blue);
text-decoration: none;
}
/* Meta: sólo la fecha. El autor se oculta y la barra "/" que Astra deja
entre ambos queda sin tamaño, así no se ve un separador huérfano. */
.ast-blog-meta-container .entry-meta {
font-size: 0;
letter-spacing: 0;
}
.ast-blog-meta-container .posted-by { display: none; }
.ast-blog-meta-container .posted-on,
.ast-blog-meta-container .posted-on * {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tg-muted);
}
.ast-blog-meta-container .posted-on a { color: var(--tg-muted); text-decoration: none; }
.ast-excerpt-container p,
.blog .entry-content p,
.archive .entry-content p {
font-size: 16px;
line-height: 1.6;
color: var(--tg-muted);
margin-bottom: 0;
}
.ast-pagination .page-numbers {
font-family: var(--tg-display);
font-weight: 700;
font-size: 19px;
border-radius: var(--tg-radius);
}
.ast-pagination .page-numbers.current {
background: var(--tg-blue);
color: var(--tg-white);
}
/* Entrada individual */
.single .entry-title {
font-size: clamp(36px, 5vw, 62px);
line-height: 1;
text-transform: none;
}
.single .entry-content {
font-size: 18px;
}
/* ==========================================================================
7. Acordeones (bloque "Detalles" de Gutenberg)
========================================================================== */
.entry-content .wp-block-details {
background: var(--tg-white);
border: 1px solid var(--tg-line);
border-radius: var(--tg-radius);
padding: 0;
margin: 0 0 12px;
max-width: 980px;
}
.entry-content .wp-block-details summary {
list-style: none;
cursor: pointer;
padding: 20px 24px;
font-family: var(--tg-display);
font-weight: 700;
font-size: clamp(21px, 2vw, 25px);
line-height: 1.12;
text-transform: uppercase;
color: var(--tg-navy);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.entry-content .wp-block-details summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details summary::marker { content: ""; }
.entry-content .wp-block-details summary::after {
content: "+";
flex-shrink: 0;
font-family: var(--tg-text);
font-weight: 400;
font-size: 28px;
line-height: 1;
color: var(--tg-blue);
transition: transform 0.18s ease;
}
.entry-content .wp-block-details[open] summary::after { transform: rotate(45deg); }
.entry-content .wp-block-details > *:not(summary) {
padding-inline: 24px;
margin-block: 0 16px;
}
/* ==========================================================================
8. Formularios (WPForms)
========================================================================== */
.wpforms-container { max-width: 720px; }
.wpforms-field-label {
font-family: var(--tg-text) !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tg-body) !important;
}
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container select,
.wpforms-container textarea {
border: 1px solid #D5DDE4 !important;
border-radius: 3px !important;
background: var(--tg-white) !important;
font-family: var(--tg-text) !important;
font-size: 16px !important;
color: var(--tg-ink) !important;
padding: 12px 14px !important;
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
border-color: var(--tg-blue) !important;
outline: 2px solid rgba(14, 99, 174, 0.18);
outline-offset: 1px;
}
/* ==========================================================================
9. Pie de página
========================================================================== */
.tg-footer { background: var(--tg-navy); }
.tg-footer__inner {
max-width: var(--tg-wrap);
margin: 0 auto;
padding: clamp(40px, 5vw, 60px) var(--tg-gutter) 44px;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
gap: 44px;
}
.tg-footer__logo img {
max-width: 76px;
height: auto;
}
.tg-footer__claim,
.tg-footer__text {
margin: 18px 0 0;
font-size: 15px;
line-height: 1.65;
color: var(--tg-on-navy-dim);
max-width: 34ch;
}
.tg-footer__title {
font-family: var(--tg-display);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tg-white);
margin: 0;
}
.tg-footer__list {
list-style: none;
margin: 16px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
.tg-footer__list a,
.tg-footer__contact {
font-size: 15px;
color: var(--tg-on-navy-dim);
text-decoration: none;
}
.tg-footer__list a:hover,
.tg-footer__contact:hover,
.tg-footer__list a:focus,
.tg-footer__contact:focus { color: var(--tg-white); }
.tg-footer__social {
margin-top: 20px;
display: flex;
gap: 12px;
}
.tg-footer__social a {
width: 40px;
height: 40px;
border: 1px solid #1E4A6B;
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tg-on-navy-dim);
}
.tg-footer__social a:hover,
.tg-footer__social a:focus {
color: var(--tg-white);
border-color: var(--tg-blue);
}
.tg-footer__cta {
margin-top: 16px;
font-size: 18px;
padding: 13px 26px;
}
.tg-footer__contact {
display: block;
margin-top: 14px;
font-weight: 600;
}
/* Barra de copyright de Astra, debajo de las columnas. */
.site-below-footer-wrap.ast-below-footer-wrap,
.site-footer .ast-footer-copyright {
background: var(--tg-navy);
}
.site-footer .ast-footer-copyright p {
font-size: 14px;
color: #7E97AB;
border-top: 1px solid var(--tg-navy-600);
padding-top: 18px;
margin: 0;
}
.site-footer .ast-footer-copyright a { color: #7E97AB; }
.site-footer .ast-footer-copyright a:hover { color: var(--tg-white); }
/* ==========================================================================
10. Responsive
========================================================================== */
@media (max-width: 1024px) {
.tg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tg-stat:nth-child(2) { border-right: 0; }
.tg-stat:nth-child(1),
.tg-stat:nth-child(2) { border-bottom: 1px solid #E8EDF2; }
.tg-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 921px) {
.tg-topbar__claim { display: none; }
.tg-topbar__inner { justify-content: flex-end; }
.main-header-menu .tg-menu-cta > .menu-link {
display: inline-block;
margin: 8px 20px;
}
}
@media (max-width: 768px) {
.tg-grid--3,
.tg-grid--2 { grid-template-columns: minmax(0, 1fr); }
.tg-stats { margin-top: -36px; }
.tg-hero__actions .tg-btn { width: 100%; text-align: center; }
.tg-cta__inner { flex-direction: column; align-items: flex-start; }
.tg-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 544px) {
.tg-stats { grid-template-columns: minmax(0, 1fr); }
.tg-stat { border-right: 0; border-bottom: 1px solid #E8EDF2; }
.tg-stat:last-child { border-bottom: 0; }
.tg-event { flex-direction: row; }
.blog .entry-title,
.archive .entry-title { font-size: 24px; }
}
/* ==========================================================================
11. Correcciones sobre el CSS dinámico del Personalizador de Astra
Son ajustes guardados en la base de datos (colores del maquetador de
cabecera/pie). Se neutralizan aquí con la misma especificidad; esta hoja
carga después, así que gana. Si algún día se cambian esos colores desde
Personalizar, estas reglas dejan de hacer falta.
========================================================================== */
/* La fila inferior del pie estaba en verde (#24eb87). */
.site-below-footer-wrap[data-section="section-below-footer-builder"] {
background-color: var(--tg-navy);
border-top-color: var(--tg-navy-600);
min-height: 0;
}
/* El elemento activo del menú estaba en verde (#04b40c). */
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle,
.ast-builder-menu-1 .current-menu-ancestor > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-item > .ast-menu-toggle {
color: var(--tg-blue);
}
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link {
box-shadow: inset 0 -3px 0 var(--tg-accent);
}
/* El botón de envío de WPForms lleva estilos propios con más peso. */
.wpforms-container .wpforms-form button[type="submit"],
.wpforms-container .wpforms-form button[type="submit"]:hover,
.wpforms-container .wpforms-form .wpforms-submit {
background-color: var(--tg-accent);
border: 0;
color: var(--tg-navy);
font-family: var(--tg-display);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 15px 34px;
border-radius: var(--tg-radius);
}
.wpforms-container .wpforms-form button[type="submit"]:hover {
background-color: var(--tg-accent-600);
}
/* ==========================================================================
12. Cabecera de sección del blog (/noticias/)
========================================================================== */
.tg-pagehead {
background: var(--tg-navy);
}
.tg-pagehead__inner {
max-width: var(--tg-wrap);
margin: 0 auto;
padding: clamp(36px, 4.5vw, 56px) var(--tg-gutter);
}
.tg-pagehead__crumbs {
font-size: 14px;
color: #7E97AB;
margin: 0;
}
.tg-pagehead__crumbs a { color: #7E97AB; text-decoration: none; }
.tg-pagehead__crumbs a:hover { color: var(--tg-white); }
.tg-pagehead__title {
font-family: var(--tg-display);
font-weight: 700;
font-size: clamp(40px, 5.6vw, 72px);
line-height: 0.95;
text-transform: uppercase;
color: var(--tg-white);
margin: 12px 0 0;
}
.tg-pagehead__text {
margin: 12px 0 0;
max-width: 58ch;
font-size: 18px;
line-height: 1.6;
color: #B7CCDC;
}
/* Astra deja un hueco grande antes del listado; con la cabecera puesta
sobra parte de él. */
.blog .site-content > .ast-container { padding-top: clamp(28px, 3vw, 44px); }
/* Marca del pie: escudo + logotipo tipográfico. */
.tg-footer__brandline {
display: flex;
align-items: center;
gap: 14px;
}
.tg-footer__wordmark {
font-family: var(--tg-display);
font-weight: 700;
font-size: 24px;
line-height: 0.96;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tg-white);
}
.tg-footer__wordmark span { color: #6FB0E2; display: block; }
/* El CSS adicional del Personalizador (anterior al tema hijo) pinta una
flecha ▸ delante del resumen del acordeón. Aquí sobra: el indicador es el
"+" de la derecha. Se puede vaciar Personalizar → CSS adicional y esta
regla deja de hacer falta. */
.entry-content .wp-block-details summary::before { content: none; }
/* ==========================================================================
13. Dos reglas ajenas que ganaban por especificidad
========================================================================== */
/* WPForms pinta su botón con variables propias y un selector muy específico
(div.wpforms-container-full … :not(:hover):not(:active)). La vía limpia es
darle sus propias variables; la regla de abajo es el cinturón de seguridad. */
.wpforms-container,
div.wpforms-container-full {
--wpforms-button-background-color: #FF5A1F;
--wpforms-button-background-color-alt: #FF5A1F;
--wpforms-button-text-color: #08243B;
--wpforms-button-text-color-alt: #08243B;
--wpforms-button-border-radius: 4px;
--wpforms-button-size-font-size: 20px;
}
div.wpforms-container-full .wpforms-form button[type="submit"]:not(:hover):not(:active),
div.wpforms-container-full .wpforms-form input[type="submit"]:not(:hover):not(:active) {
background-color: var(--tg-accent);
color: var(--tg-navy);
border: 0;
}
div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
div.wpforms-container-full .wpforms-form input[type="submit"]:hover {
background-color: var(--tg-accent-600);
color: var(--tg-navy);
}
/* El botón "Únete al club" del menú no debe heredar el color de
"elemento actual" cuando estás justamente en esa página. */
.ast-builder-menu-1 .menu-item.tg-menu-cta > .menu-link,
.ast-builder-menu-1 .menu-item.tg-menu-cta.current-menu-item > .menu-link,
.main-header-menu .tg-menu-cta.current-menu-item > .menu-link {
color: var(--tg-navy);
box-shadow: none;
}
/* El enlace del menú es flex y se estira a la altura de la fila, así que el
botón salía tan alto como la cabecera. Se centra y recupera su altura. */
.main-header-menu .tg-menu-cta {
display: flex;
align-items: center;
}
.main-header-menu .tg-menu-cta > .menu-link {
align-self: center;
height: auto;
display: inline-flex;
align-items: center;
}
/* Cabecera algo más compacta: el logotipo estaba a 120px y dejaba una
cabecera de 132px de alto. */
.ast-primary-header-bar .custom-logo-link img {
max-width: 96px;
width: 96px;
}
/* El botón de menú en móvil venía en el azul global de Astra (#046bd2). */
.menu-toggle.ast-mobile-menu-trigger-fill,
.ast-mobile-header-content .menu-toggle,
.ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-fill {
background: var(--tg-navy);
color: var(--tg-white);
border-radius: var(--tg-radius);
}
.menu-toggle.ast-mobile-menu-trigger-fill:hover,
.menu-toggle.ast-mobile-menu-trigger-fill:focus {
background: var(--tg-blue);
color: var(--tg-white);
}
/* El ancho de lectura no debe centrar el párrafo: se alinea a la izquierda,
a plomo con los titulares. */
.page .entry-content > p,
.page .entry-content > ul,
.page .entry-content > ol,
.single .entry-content > p,
.single .entry-content > ul,
.single .entry-content > ol {
margin-inline: 0;
}
/* ==========================================================================
14. Portada: rejillas propias, tarjetas de evento como enlace,
últimas noticias (bloque nativo) y tarjetas de sección
========================================================================== */
.tg-cards {
display: grid;
gap: 24px;
}
.tg-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tg-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* La tarjeta de prueba es un enlace completo. */
a.tg-event {
text-decoration: none;
color: inherit;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
a.tg-event:hover,
a.tg-event:focus {
box-shadow: 0 14px 30px rgba(8, 36, 59, 0.12);
transform: translateY(-2px);
color: inherit;
}
.tg-event__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex-grow: 1;
}
.tg-event__title {
font-family: var(--tg-display);
font-weight: 700;
font-size: 25px;
line-height: 1.1;
color: var(--tg-navy);
}
.tg-event__place {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
color: var(--tg-muted);
}
.tg-empty {
font-size: 17px;
color: var(--tg-muted);
}
/* Últimas noticias: bloque nativo "Últimas entradas" con aspecto de tarjeta. */
.tg-news.wp-block-latest-posts__list {
list-style: none;
margin: 0;
padding: 0;
gap: 24px;
}
.tg-news.wp-block-latest-posts__list.is-grid { display: grid; }
.tg-news.is-grid.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tg-news.wp-block-latest-posts__list > li {
background: var(--tg-white);
border: 1px solid var(--tg-line);
border-radius: var(--tg-radius);
overflow: hidden;
margin: 0;
display: flex;
flex-direction: column;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.tg-news.wp-block-latest-posts__list > li:hover {
box-shadow: 0 14px 30px rgba(8, 36, 59, 0.12);
transform: translateY(-2px);
}
.tg-news .wp-block-latest-posts__featured-image {
margin: 0;
}
.tg-news .wp-block-latest-posts__featured-image img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
}
.tg-news .wp-block-latest-posts__post-title {
display: block;
font-family: var(--tg-display);
font-weight: 700;
font-size: 27px;
line-height: 1.08;
color: var(--tg-navy);
text-decoration: none;
padding: 20px 24px 0;
}
.tg-news .wp-block-latest-posts__post-title:hover { color: var(--tg-blue); }
.tg-news .wp-block-latest-posts__post-date {
display: block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tg-muted);
padding: 8px 24px 0;
}
.tg-news .wp-block-latest-posts__post-excerpt {
font-size: 16px;
line-height: 1.6;
color: var(--tg-muted);
padding: 10px 24px 24px;
margin: 0;
}
/* Tarjetas de sección (liga, circuitos…): enlace grande con flecha. */
.tg-linkcard {
display: flex;
flex-direction: column;
gap: 10px;
background: var(--tg-white);
border: 1px solid var(--tg-line);
border-left: 4px solid var(--tg-accent);
border-radius: var(--tg-radius);
padding: 28px 30px 30px;
text-decoration: none;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.tg-linkcard:hover,
.tg-linkcard:focus {
box-shadow: 0 14px 30px rgba(8, 36, 59, 0.12);
transform: translateY(-2px);
}
.tg-linkcard__title {
font-family: var(--tg-display);
font-weight: 700;
font-size: 27px;
line-height: 1.06;
text-transform: uppercase;
color: var(--tg-navy);
}
.tg-linkcard__text {
font-size: 16px;
line-height: 1.6;
color: var(--tg-muted);
}
.tg-linkcard__more {
margin-top: auto;
padding-top: 6px;
font-size: 15px;
font-weight: 700;
color: var(--tg-accent-ink);
}
@media (max-width: 1024px) {
.tg-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tg-news.is-grid.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
.tg-cards--3,
.tg-cards--2 { grid-template-columns: minmax(0, 1fr); }
.tg-news.is-grid.columns-3 { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
15. Clases del rediseño dentro de .entry-content
Astra y WordPress estilan `.entry-content p` (0,1,1), que gana a una clase
suelta (0,1,0). Estas reglas repiten los valores con el prefijo para que
las clases del rediseño manden dentro del contenido de las páginas.
========================================================================== */
.entry-content .tg-eyebrow {
font-family: var(--tg-display);
font-weight: 600;
font-size: 16px;
line-height: 1.2;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tg-accent-ink);
margin: 0;
}
.entry-content .tg-section--navy .tg-eyebrow { color: #FFB08A; }
.entry-content .tg-hero__kicker {
color: #FFB08A;
margin: 0 0 22px;
}
.entry-content .tg-hero__text {
color: var(--tg-on-navy);
margin: 22px 0 0;
}
.entry-content .tg-stat__num {
font-family: var(--tg-display);
font-weight: 700;
font-size: 40px;
line-height: 1;
color: var(--tg-blue);
margin: 0;
}
.entry-content .tg-stat__label {
font-size: 15px;
line-height: 1.45;
color: var(--tg-muted);
margin: 6px 0 0;
}
.entry-content .tg-cta__text {
color: var(--tg-on-navy);
margin: 12px 0 0;
}
.entry-content .tg-lead {
font-size: clamp(18px, 1.6vw, 20px);
line-height: 1.62;
color: var(--tg-body);
}
/* El hero y la banda CTA son bloques "Portada" sin capa de color: el degradado
lo pone el tema para poder controlarlo desde un único sitio. */
.entry-content .wp-block-cover.tg-hero::after,
.entry-content .wp-block-cover.tg-cta::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
}
.entry-content .wp-block-cover.tg-hero::after {
background: linear-gradient(100deg, rgba(6, 26, 43, 0.94) 0%, rgba(6, 26, 43, 0.80) 42%, rgba(6, 26, 43, 0.25) 100%);
}
.entry-content .wp-block-cover.tg-cta::after {
background: linear-gradient(90deg, rgba(6, 26, 43, 0.95) 0%, rgba(6, 26, 43, 0.78) 55%, rgba(6, 26, 43, 0.45) 100%);
}
.entry-content .wp-block-cover.tg-hero .wp-block-cover__inner-container,
.entry-content .wp-block-cover.tg-cta .wp-block-cover__inner-container {
position: relative;
z-index: 1;
}
/* Tarjetas de sección montadas como columnas. */
.entry-content .wp-block-column.tg-linkcard {
background: var(--tg-white);
border: 1px solid var(--tg-line);
border-left: 4px solid var(--tg-accent);
border-radius: var(--tg-radius);
padding: 28px 30px 30px;
}
.entry-content .tg-linkcard__title {
font-size: 27px;
line-height: 1.06;
text-transform: uppercase;
margin: 0;
}
.entry-content .tg-linkcard__text {
font-size: 16px;
line-height: 1.6;
color: var(--tg-muted);
margin: 10px 0 0;
}
.entry-content .tg-linkcard__more {
margin: 14px 0 0;
font-size: 15px;
font-weight: 700;
}
.entry-content .tg-linkcard__more a {
color: var(--tg-accent-ink);
text-decoration: none;
}
.entry-content .tg-linkcard__more a:hover { color: var(--tg-navy); }
/* Cabecera de sección con enlace a la derecha. */
.entry-content .tg-section-head .tg-morelink {
font-size: 16px;
font-weight: 700;
color: var(--tg-blue);
text-decoration: none;
margin: 0;
}
/* Bloque de ventajas: la tarjeta es una columna con el icono en un bloque HTML. */
.entry-content .wp-block-column.tg-feature { margin: 0; }
.entry-content .tg-feature__title { margin: 18px 0 0; }
.entry-content .tg-feature p { color: #B7CCDC; margin: 10px 0 0; }
/* Espaciados entre secciones dentro del contenido de la portada. */
.home .entry-content > .wp-block-group + .wp-block-group { margin-top: 0; }
.home .entry-content .tg-section:last-child { padding-bottom: clamp(56px, 6vw, 88px); }
/* Utilidades usadas por el contenido de la portada. */
.entry-content .wp-block-columns.tg-cols-middle {
align-items: center;
gap: clamp(28px, 4vw, 56px);
margin-top: 28px;
}
.entry-content .wp-block-columns.tg-features {
gap: 22px;
margin-top: 22px;
margin-bottom: 0;
}
.entry-content .wp-block-columns.tg-cards-cols {
gap: 24px;
margin-top: 32px;
}
.entry-content .tg-roundimg img {
width: 100%;
height: auto;
border-radius: var(--tg-radius);
display: block;
}
.entry-content .tg-lead {
margin: 16px 0 0;
max-width: 68ch;
}
.entry-content .tg-morelink {
margin: 26px 0 0;
font-size: 16px;
font-weight: 700;
}
.entry-content .tg-morelink a {
color: var(--tg-blue);
text-decoration: none;
}
.entry-content .tg-morelink a:hover { color: var(--tg-navy); }
/* La rejilla que devuelve el shortcode de próximas pruebas. */
.entry-content .tg-cards { margin-top: 32px; }
/* El hero y la CTA no llevan margen propio: el espaciado lo ponen las secciones. */
.home .entry-content .wp-block-cover.tg-hero { margin-block: 0; }
.home .entry-content > .wp-block-group.tg-wrap:first-of-type { margin-top: 0; }
/* Astra limita los hijos directos de .entry-content a 1200px (su
--ast-content-width-size). En la portada cada sección gestiona su propio
ancho con .tg-wrap, así que ahí se levanta el tope. */
.home .entry-content > * { max-width: none; }
/* El bloque nativo "Últimas entradas" en rejilla calcula el ancho de cada
con calc(33.33% - …) pensando en un contenedor flex; dentro de una
rejilla CSS eso da columnas de 100px. */
.tg-news.wp-block-latest-posts__list > li {
width: 100%;
max-width: none;
margin: 0;
}
/* ==========================================================================
16. Páginas interiores: banda de cabecera, pasos y tarjetas laterales
========================================================================== */
/* Banda de cabecera de página (bloque Portada con la clase tg-pagehero). */
.entry-content .wp-block-cover.tg-pagehero {
min-height: 380px;
padding: 0;
margin-block: 0;
align-items: center;
}
.entry-content .wp-block-cover.tg-pagehero::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(95deg, rgba(6, 26, 43, 0.95) 0%, rgba(6, 26, 43, 0.72) 60%, rgba(6, 26, 43, 0.35) 100%);
}
.entry-content .wp-block-cover.tg-pagehero .wp-block-cover__inner-container {
position: relative;
z-index: 1;
max-width: var(--tg-wrap);
width: 100%;
margin: 0 auto;
padding: clamp(32px, 4vw, 56px) var(--tg-gutter);
}
.entry-content .tg-pagehero__crumbs {
font-size: 14px;
color: #7E97AB;
margin: 0;
}
.entry-content .tg-pagehero__crumbs a { color: #7E97AB; text-decoration: none; }
.entry-content .tg-pagehero__title {
font-size: clamp(42px, 5.6vw, 76px);
line-height: 0.95;
text-transform: uppercase;
color: var(--tg-white);
margin: 12px 0 0;
}
.entry-content .tg-pagehero__text {
margin: 14px 0 0;
max-width: 52ch;
font-size: clamp(17px, 1.4vw, 19px);
line-height: 1.6;
color: var(--tg-on-navy);
}
/* Pasos numerados. */
.entry-content .wp-block-column.tg-step {
background: var(--tg-white);
border: 1px solid var(--tg-line);
border-radius: var(--tg-radius);
padding: 28px 30px 30px;
margin: 0;
}
.entry-content .tg-step__num {
font-family: var(--tg-display);
font-weight: 700;
font-size: 54px;
line-height: 0.9;
color: var(--tg-line);
margin: 0;
}
.entry-content .tg-step__title {
font-size: 26px;
line-height: 1.05;
text-transform: uppercase;
margin: 10px 0 0;
}
.entry-content .tg-step p:last-child {
font-size: 16px;
line-height: 1.6;
color: var(--tg-muted);
margin: 8px 0 0;
}
/* Tarjeta de cuota (navy) y tarjeta de aviso (naranja tenue). */
.entry-content .wp-block-column.tg-pricecard,
.entry-content .wp-block-group.tg-pricecard {
background: var(--tg-navy);
border-radius: var(--tg-radius);
padding: 32px 32px 34px;
}
.entry-content .tg-pricecard .tg-eyebrow { color: #FFB08A; }
.entry-content .tg-pricecard__amount {
font-family: var(--tg-display);
font-weight: 700;
font-size: 54px;
line-height: 1;
color: var(--tg-white);
margin: 12px 0 0;
}
.entry-content .tg-pricecard__amount small {
font-family: var(--tg-text);
font-weight: 400;
font-size: 17px;
color: #B7CCDC;
}
.entry-content .tg-pricecard ul {
list-style: none;
margin: 20px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.entry-content .tg-pricecard li {
position: relative;
padding-left: 28px;
font-size: 16px;
line-height: 1.5;
color: var(--tg-on-navy);
}
.entry-content .tg-pricecard li::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 16px;
height: 9px;
border-left: 3px solid #FF8A5C;
border-bottom: 3px solid #FF8A5C;
transform: rotate(-45deg);
}
.entry-content .tg-pricecard__note {
margin: 22px 0 0;
padding-top: 16px;
border-top: 1px solid var(--tg-navy-600);
font-size: 14px;
line-height: 1.55;
color: var(--tg-on-navy-dim);
}
.entry-content .wp-block-group.tg-notecard {
background: var(--tg-accent-50);
border: 1px solid #FFD2BC;
border-radius: var(--tg-radius);
padding: 26px 28px;
margin-top: 20px;
}
.entry-content .tg-notecard__title {
font-size: 24px;
line-height: 1.05;
text-transform: uppercase;
margin: 0;
}
.entry-content .tg-notecard p {
font-size: 16px;
line-height: 1.58;
color: #6B4230;
margin: 10px 0 0;
}
/* La columna del formulario. */
.entry-content .wp-block-column.tg-formcard {
background: var(--tg-white);
border: 1px solid var(--tg-line);
border-radius: var(--tg-radius);
padding: clamp(28px, 3vw, 44px);
margin: 0;
}
.entry-content .tg-formcard .wpforms-container { max-width: none; margin-top: 20px; }
.entry-content .wp-block-columns.tg-cols-top { align-items: flex-start; gap: clamp(24px, 3vw, 40px); margin-top: 32px; }
/* Páginas con banda de cabecera: mismo tratamiento que la portada. */
.tg-has-pagehero .site-content > .ast-container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
display: block;
}
.tg-has-pagehero .entry-content > * { max-width: none; }
.tg-has-pagehero .entry-content > .wp-block-group.tg-wrap > p,
.tg-has-pagehero .entry-content > .wp-block-group.tg-wrap > ul,
.tg-has-pagehero .entry-content > .wp-block-group.tg-wrap > ol {
max-width: 74ch;
}
/* Corrección: levantar el tope de Astra no debe llevarse por delante el ancho
de .tg-wrap. Sólo van a sangre la portada (bloque Portada) y las bandas de
color; las secciones con .tg-wrap vuelven a su ancho de 1240. */
.home .entry-content > .wp-block-group.tg-wrap,
.tg-has-pagehero .entry-content > .wp-block-group.tg-wrap {
max-width: var(--tg-wrap);
margin-left: auto;
margin-right: auto;
}
/* El CSS del bloque "Últimas entradas" fija el ancho de cada con
`.wp-block-latest-posts.is-grid.columns-3 li` (0,3,1) y gana a una regla
más corta. Se iguala la especificidad. */
.entry-content ul.tg-news.wp-block-latest-posts.is-grid > li,
.entry-content ul.tg-news.wp-block-latest-posts.is-grid.columns-3 > li {
width: 100%;
max-width: none;
margin: 0;
}
/* Astra fuerza el color del texto dentro del bloque Portada con
`body .wp-block-cover:not(.has-text-color.has-link-color) p` (0,3,2), que
dejaba los párrafos del hero y de la banda CTA en gris oscuro sobre la foto.
Se iguala la especificidad para devolverles el color claro. */
body .entry-content .wp-block-cover.tg-hero p,
body .entry-content .wp-block-cover.tg-cta p,
body .entry-content .wp-block-cover.tg-pagehero p {
color: var(--tg-on-navy);
}
body .entry-content .wp-block-cover.tg-hero p.tg-hero__kicker {
color: #FFB08A;
}
body .entry-content .wp-block-cover.tg-pagehero p.tg-pagehero__crumbs {
color: #7E97AB;
}
body .entry-content .wp-block-cover.tg-pagehero p.tg-pagehero__crumbs a {
color: #7E97AB;
}
/* Botón secundario (estilo "contorno") sobre foto: Astra le pone su azul
global al texto y al borde. Sobre navy tiene que ir en blanco. */
body .entry-content .tg-hero .wp-block-button.is-style-outline > .wp-block-button__link,
body .entry-content .tg-cta .wp-block-button.is-style-outline > .wp-block-button__link,
body .entry-content .tg-pagehero .wp-block-button.is-style-outline > .wp-block-button__link {
background: transparent;
color: var(--tg-white);
border: 2px solid rgba(255, 255, 255, 0.55);
padding: 13px 32px;
}
body .entry-content .tg-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
body .entry-content .tg-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover,
body .entry-content .tg-pagehero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
background: rgba(255, 255, 255, 0.14);
color: var(--tg-white);
border-color: var(--tg-white);
}
/* En móvil el hero de 660px se come la pantalla entera. El bloque Portada
guarda su altura como estilo en línea (style="min-height:660px"), y un
estilo en línea sólo se puede bajar con !important: es el único del tema. */
@media (max-width: 768px) {
.entry-content .wp-block-cover.tg-hero { min-height: 480px !important; }
.entry-content .wp-block-cover.tg-pagehero { min-height: 300px !important; }
}
/* En las páginas con banda de cabecera, el título de Astra sobra: la banda ya
lleva su propio . Dejarlo daría dos H1 en la misma página. */
.tg-has-pagehero .entry-header .entry-title,
.tg-has-pagehero .ast-single-entry-banner {
display: none;
}
/* El carrusel de próximos eventos de MEC parte el número del día ("04" en dos
líneas) porque la caja azul va justa de ancho. */
.mec-wrap .mec-event-date-carousel {
white-space: nowrap;
padding-right: 70px;
}
.mec-wrap .mec-event-date-carousel .mec-event-date-info {
white-space: normal;
}
/* Formulario de contraseña de las páginas protegidas. */
.post-password-form {
max-width: 520px;
margin: 0 auto;
padding-block: clamp(36px, 5vw, 64px);
}
.post-password-form p { font-size: 17px; color: var(--tg-body); }
.post-password-form label {
display: block;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tg-body);
}
.post-password-form input[type="password"] {
display: block;
width: 100%;
box-sizing: border-box;
height: 50px;
margin-top: 8px;
border: 1px solid #D5DDE4;
border-radius: 3px;
padding: 0 14px;
font-family: var(--tg-text);
font-size: 16px;
}
.post-password-form input[type="submit"] { margin-top: 18px; }
.tg-pagehead__text a { color: var(--tg-white); }
/* ==========================================================================
17. Segundo nivel del menú y separación del botón
========================================================================== */
.main-header-menu .sub-menu {
min-width: 300px;
padding-block: 8px;
background: var(--tg-white);
border: 1px solid var(--tg-line);
border-top: 3px solid var(--tg-blue);
border-radius: 0 0 var(--tg-radius) var(--tg-radius);
box-shadow: 0 14px 34px rgba(8, 36, 59, 0.14);
}
.main-header-menu .sub-menu .menu-item { border: 0; }
.main-header-menu .sub-menu .menu-link,
.main-header-menu .sub-menu > .menu-item > .menu-link {
font-family: var(--tg-text);
font-size: 15px;
font-weight: 600;
line-height: 1.35;
padding: 11px 20px;
color: var(--tg-ink);
border: 0;
}
.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link {
color: var(--tg-blue);
background: var(--tg-blue-50);
}
/* La línea naranja de "estás aquí" es sólo para el primer nivel: dentro del
desplegable quedaba un subrayado suelto encima de un elemento. */
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link { box-shadow: none; }
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
box-shadow: inset 0 -3px 0 var(--tg-accent);
}
/* El botón se pegaba al último enlace del menú. */
.main-header-menu .tg-menu-cta { margin-left: 18px; }
/* En un ítem con desplegable, el subrayado naranja cae justo donde empieza el
borde superior del submenú y parecía un borde roto a dos colores. Ahí el
"estás aquí" se marca sólo con el color del texto. */
.main-header-menu > .menu-item-has-children.current-menu-item > .menu-link,
.main-header-menu > .menu-item-has-children.current-menu-ancestor > .menu-link {
box-shadow: none;
}
/* Separadores del contenido. */
.entry-content .wp-block-separator {
border: 0;
border-top: 1px solid var(--tg-line);
background: none;
max-width: 100%;
margin-block: clamp(24px, 3vw, 40px);
opacity: 1;
}
/* ==========================================================================
18. Ficha de evento de MEC
Su plantilla monta el evento en una rejilla de 8+4 columnas, con la barra
lateral a la derecha. Sin barra lateral, el contenido ocupa el ancho entero.
========================================================================== */
.mec-single-event > .col-md-4 { display: none; }
.mec-single-event > .col-md-8 {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
/* El bloque de cuenta atrás y los botones de calendario, con el estilo del sitio. */
.mec-single-event .mec-event-countdown-part3,
.mec-single-event .mec-single-event-date,
.mec-single-event .mec-single-event-time {
border-radius: var(--tg-radius);
}
.mec-single-event h1.mec-single-title,
.mec-single-event .mec-single-title {
font-family: var(--tg-display);
font-weight: 700;
text-transform: none;
color: var(--tg-navy);
}
/* Sin barra lateral el cartel del evento se iba a todo el ancho. */
.mec-single-event .mec-events-event-image {
max-width: 820px;
margin-inline: auto;
}
.mec-single-event .mec-events-event-image img {
width: 100%;
height: auto;
border-radius: var(--tg-radius);
display: block;
}