/*
 * StyleSheet File Parser
 * Version 4.0
 * Developed by TriForce
 * 
 * Compiled:  09 Sep 2026 13:46:31 (UTC)
 * Source:    https://github.com/TriForceX/WebsiteBase
 * 
 *//*
 * style-base.css — RECONSTRUIDO 2026-09-01
 * Este archivo (y style-bootstrap.css) desaparecieron del tema en algún
 * momento después del último build real (assets/css/style.css quedó
 * congelado desde entonces — ver .claude/plan-traspaso-react-a-wordpress.md
 * sección 8/10). Contenido recuperado extrayendo el prefijo del compilado
 * que precede al comentario de cabecera de style-theme.css (líneas 1-4092
 * de assets/css/style.css tal como estaba antes de esta reconstrucción).
 *
 * No se detectó una separación clara entre lo que sería "base" vs
 * "bootstrap" dentro de ese contenido (son todo estilos propios del sitio:
 * fuentes, globales, header, menú, torneos, banner, OnlyGames, etc. — nada
 * que se lea como overrides específicos de Bootstrap). Por eso todo el
 * contenido recuperado quedó acá, en style-base.css, y style-bootstrap.css
 * se dejó como placeholder vacío. Si en algún momento se identifica una
 * sección que debería vivir en style-bootstrap.css, se puede mover sin
 * riesgo — el orden de concatenación (base + bootstrap + theme) hace que
 * la división entre estos dos archivos sea solo organizativa.
 *
 * Nota (mismo día, tras reconectar el pipeline): las rutas url() de los
 * @font-face de TevaSans más abajo se ajustaron de '../fonts/...' a
 * '../assets/fonts/...' — el compilado de onlygolf_2027 ahora vive en
 * css/style.css, no en assets/css/style.css, así que las rutas relativas
 * necesitan un nivel más. Ver sección 13 del plan. Esto NO se aplicó a la
 * copia de este archivo en onlygolf_2026 (ahí el compilado sigue en
 * assets/css/, la ruta vieja sigue siendo la correcta).
 */

/* Media queries */
/*
Less than:
'575.98px'		=> '575.98px',
'767.98px'		=> '767.98px',
'991.98px'		=> '991.98px',
'1199.98px'		=> '1199.98px', 
'1359.98px'		=> '1359.98px', 
'$screen-xxl-up'	=> '1399.98px', 

More than:
'576px'	=> '576px',
'768px'	=> '768px',
'992px'	=> '992px',
'1200px'	=> '1200px',
'1366px'	=> '1366px',
'$screen-xxl-down'	=> '1400px',

@media (max-width: $screen-size-up) {
	... less than ...
}
@media (min-width: $screen-size-down) {
	... more than ...
}
*/

/*fonts---------------------------------------------------------------*/
@font-face {
    font-family: 'Teva Sans';
    src: url('../assets/fonts/TevaSans-Regular/TevaSans-Regular.eot');
    src: url('../assets/fonts/TevaSans-Regular/TevaSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/TevaSans-Regular/TevaSans-Regular.woff2') format('woff2'),
        url('../assets/fonts/TevaSans-Regular/TevaSans-Regular.woff') format('woff'),
        url('../assets/fonts/TevaSans-Regular/TevaSans-Regular.ttf') format('truetype'),
        url('../assets/fonts/TevaSans-Regular/TevaSans-Regular.svg#TevaSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Teva Sans bold';
    src: url('../assets/fonts/TevaSans-Bold/TevaSans-Bold.eot');
    src: url('../assets/fonts/TevaSans-Bold/TevaSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/TevaSans-Bold/TevaSans-Bold.woff2') format('woff2'),
        url('../assets/fonts/TevaSans-Bold/TevaSans-Bold.woff') format('woff'),
        url('../assets/fonts/TevaSans-Bold/TevaSans-Bold.ttf') format('truetype'),
        url('../assets/fonts/TevaSans-Bold/TevaSans-Bold.svg#TevaSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Teva Sans light';
    src: url('../assets/fonts/TevaSans-Light/TevaSans-Light.eot');
    src: url('../assets/fonts/TevaSans-Light/TevaSans-Light.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/TevaSans-Light/TevaSans-Light.woff2') format('woff2'),
        url('../assets/fonts/TevaSans-Light/TevaSans-Light.woff') format('woff'),
        url('../assets/fonts/TevaSans-Light/TevaSans-Light.ttf') format('truetype'),
        url('../assets/fonts/TevaSans-Light/TevaSans-Light.svg#TevaSans-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/*fonts/end---------------------------------------------------------------*/


/*Globales ---------------------------------------------------------------*/
:root {
    --main-gris: #acacac;    
    --main-azul: #0073b7;
    --main-gris2: #b1b1b1;
    --main-gris3: #ebebeb;
    --main-colorbanner: #f7f7f7;
    --card-image-h: 200px;
    --card-text-lines: 6;
    --main-azul-1: #022a3b;

    --main-textos-base: var(--main-azul);
    --main-textos-borde: var(--main-gris);
    --main-textos-gris: var(--main-gris3);
    --main-textos-enlaces:var(--main-azul);
    --main-textos-fuente: 'Teva Sans';
    --main-textos-fuente-bold: 'Teva Sans bold';
    --main-fuentes-size: 20px;
    

}

.fs-none {
    font-size: 0px !important;

}

.fs-0 {
    font-size: 3.5rem !important;
}

.fs-1 {
    font-size: 2.5rem !important;
}

.fs-2 {
    font-size: 2rem !important;
}

.fs-3 {
    font-size: 1.75rem !important;
}

.fs-4 {
    font-size: 1.5rem !important;
}

.fs-5 {
    font-size: 1.25rem !important;
}

.fs-6 {
    font-size: 1rem !important;
}

.fs-7 {
    font-size: 0.875rem !important;
}

.fs-8 {
    font-size: 0.8rem !important;
}

.fs-9 {
    font-size: 0.775rem !important;
}

.fs-10 {
    font-size: 0.7rem !important;
}

.font-teva-sans {
    font-family: 'Teva Sans';
}

.font-teva-bold {
    font-family: 'Teva Sans bold';
}

.font-teva-light {
    font-family: 'Teva Sans light';
}




a,
a:visited,
a:hover,
a:active {
    outline: none;
}

button,
button:visited,
button:hover,
button:active {
    outline: none;

}

.btn,
.btn:visited,
.btn:hover,
.btn:active,
.btn:focus-visible {

    box-shadow: none;

}

.is-opacity {
    transition: opacity ease 0.3s;
}

.is-opacity:hover {
    transition: opacity ease 0.3s;
    opacity: 0.5;
}

.is-scale {
    transition: transform ease 0.3s;
}

.is-scale:hover {

    transition: transform ease 0.3s;
    transform: scale(1.3);
}

.is-scale-sm {
    transition: transform ease 0.3s;
}

.is-scale-sm:hover {

    transition: transform ease 0.3s;
    transform: scale(1.1);
}

.is-scale-xs {
    transition: transform ease 0.3s;
}

.is-scale-xs:hover {

    transition: transform ease 0.3s;
    transform: scale(1.05);
}

.is-boton {

    font-family: 'Teva Sans';
    font-size: 20px;
    border-radius: 0px;
    background-color: var(--main-azul);
    color: white;
    padding: 0px 10px;
    margin: 50px 0px;
    border: none;
}



/*logos auspiciadores */
.main-logo-auspiciador a {

    display: inline-block;
    padding: 10px 20px;
}

.main-logo-auspiciador img {

    width: 100%;
    height: auto;
    max-width: 275px;
    max-height: 86px;
}


.is-main-textos {
	font-family: var(--main-textos-fuente);
	font-size: var(--main-fuentes-size);
	line-height: 28px;
	text-align: justify;
}
.is-main-textos > *:nth-last-child(1) {
	margin-bottom: 0px !important;
}
.is-main-textos p a:not(.is-popup),
.is-main-textos p a:not(.is-popup):visited,
.is-main-textos p a:not(.is-popup):hover,
.is-main-textos p a:not(.is-popup):active {
	background-color: var(--main-textos-enlaces);
	color: white;
	padding: 2px 5px;
	border-radius: 3px;
	display: inline-block;
	line-height: 20px;
}
.is-main-textos b,
.is-main-textos strong {
	font-family: var(--main-textos-fuente-bold);
	font-weight: normal;
	color: black;
}
.is-main-textos a b,
.is-main-textos a strong {
	color: white;
}
.is-main-textos p:nth-last-child(1) {
	margin-bottom: 0px;
}
.is-main-textos ul a,
.is-main-textos ul a:visited,
.is-main-textos ul a:hover,
.is-main-textos ul a:active,
.is-main-textos ol a,
.is-main-textos ol a:visited,
.is-main-textos ol a:hover,
.is-main-textos ol a:active {
	font-family: var(--main-textos-fuente);
	color: var(--main-textos-enlaces);
}
.is-main-textos ul {
	padding-left: 0px;
}
.is-main-textos ul li {
	list-style: none;
	padding-left: 17px;
	position: relative;
}
.is-main-textos ul li:before {
	content: '';
	width: 7px;
	height: 7px;
	vertical-align: middle;
	display: inline-block;
	background-color: var(--main-textos-base);
	position: absolute;
	top: 9px;
	left: 0;
}
.is-main-textos ul li > ul li:before {
	background-color: white;
	border: 1px solid var(--main-textos-borde);
}
.is-main-textos ol {
	padding-left: 0px;
	counter-reset: item;
}
.is-main-textos ol > li {
	list-style: none;
	padding-left: 33px;
	position: relative;
	counter-increment: li;
	margin-bottom: 5px;
}
.is-main-textos ol > li:nth-last-child(1) {
	margin-bottom: 0px;
}
.is-main-textos ol > li:before {
	content: counter(item); /* counters(item, ".") " " */
	counter-increment: item;
	vertical-align: middle;
	display: inline-block;
	background-color: var(--main-textos-base);
	position: absolute;
	top: 2px;
	margin-left: -33px;
	color: white;
	padding: 0px 5px;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: -0.5px;
	min-width: 22px;
	text-align: center;
}
.is-main-textos ol > li > ol {
	margin-top: 5px;
}
.is-main-textos ol > li > ol > li:before {
	background-color: white;
	border: 1px solid var(--main-textos-borde);
	color: var(--main-textos-base);
}
.is-main-textos.text-center li,
.is-main-textos li[style*="text-align: center"] {
	display: inline;
}
.is-main-textos.text-center li:before,
.is-main-textos li[style*="text-align: center"]:before {
	top: 5px;
}
.is-main-textos.text-center li:after,
.is-main-textos li[style*="text-align: center"]:after {
     content: "\A";
     white-space: pre; 
}
.is-main-textos img {
	max-width: 100%;
    display: inline-block;
    height: auto !important;
}
.is-main-textos *:not(table).aligncenter {
    display: block;
    margin: 0px auto;
	text-align: center;
}
.is-main-textos .alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1.5rem;
}
.is-main-textos .alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 575.98px) {	
	.is-main-textos .aligncenter,
	.is-main-textos .alignleft,
	.is-main-textos .alignright {
		width: 100%;
   		margin-right: 0px;
   		margin-left: 0px;
   		margin-bottom: 1.5rem;
	}
}
.is-main-textos h1:nth-child(1),
.is-main-textos h2:nth-child(1),
.is-main-textos h3:nth-child(1),
.is-main-textos h4:nth-child(1),
.is-main-textos h5:nth-child(1),
.is-main-textos h6:nth-child(1) {
	margin-top: 0px;
}
.is-main-textos h1,
.is-main-textos h2,
.is-main-textos h3,
.is-main-textos h4,
.is-main-textos h5,
.is-main-textos h6 {
	font-family: var(--main-textos-fuente-bold);
	font-weight: normal;
	color: var(--main-textos-base);
	margin-bottom: 0.5rem;
	/* h3 only */
	line-height: 33px;
	font-size: 24px;
}
.is-main-textos iframe {
	display: block;
	max-width: 100%;
	margin: 0 auto;
}
.is-main-textos table.aligncenter{
	margin: 0 auto;
   	margin-bottom: 1.5rem;
}
.is-main-textos table{
	border: none;
	margin-bottom: 20px;
}
.is-main-textos table tr:nth-child(1) th{
	border-top: 1px solid var(--main-textos-base);
}
.is-main-textos table tr:nth-child(1) td{
	border-top: 1px solid var(--main-textos-borde);
}
.is-main-textos table tr:nth-child(odd){
	background-color: var(--main-textos-gris);
}
.is-main-textos table tr th:nth-child(1){
	border-left: 1px solid var(--main-textos-base);
}
.is-main-textos table tr td:nth-child(1){
	border-left: 1px solid var(--main-textos-borde);
}
.is-main-textos table tr th{
	font-family: var(--main-textos-fuente-bold);
	font-weight: normal;
	background-color: var(--main-textos-base);
	color: white;
	text-transform: uppercase;
	padding: 8px 10px;
	font-size: 14px;
	line-height: 20px;
	border-right: 1px solid var(--main-textos-base);
	border-bottom: 1px solid var(--main-textos-base);
}
.is-main-textos table tr td{
	font-family: var(--main-textos-fuente);
	color: black;
	padding: 8px 10px;
	font-size: 15px;
	line-height: 19px;
	border-right: 1px solid var(--main-textos-borde);
	border-bottom: 1px solid var(--main-textos-borde);
}
/*Global/end-------------------------------------------------------------*/

/* header ---------------------------------------------------------------*/
header {  
    background-color: var(--main-colorbanner);
}

/* "Header logos" (.main-barra-logos y toda su familia: -inner, .is-logo,
   .is-logo-principal img con max-width:95px, .is-logos-derecha,
   .is-logo-secundario img) sale entera de acá (2026-09-04, Fase 2 v5) —
   header.php ya no genera ese markup (fila de logo+auspiciadores
   separada de la nav), confirmado por grep que ningún otro template la
   usa. El logo real vive ahora dentro de .main-menu — ver bloque
   "FASE 2 v2 — Navbar" en style-theme.css (.is-logo-principal img,
   filtro trasladado ahí). */

/* Menú debajo */
header .main-menu {
    height: auto;
    background-color: #0073ba;
    color: white;
}


/* "Menu" (.main-menu color sólido, .is-menu-item con transform:skewX(-12deg)
   + background-color:#2ca6dc — la caja/píldora sesgada — y
   .is-menu-link::before, el triángulo CSS que hacía de "flecha" bajo
   cada ítem) sale entera de acá (2026-09-04, Fase 2 v5). Esta era la
   causa real de la divergencia encontrada al comparar el sitio en vivo
   contra PublicLayout.tsx: la Fase 2 v2 (ver style-theme.css) solo había
   sobreescrito color/fuente/border-bottom de `.is-menu-link`, nunca
   `background-color`/`transform` de `.is-menu-item` ni el pseudo-elemento
   — quedaban vivos por cascada donde Fase 2 no los pisaba, y se veían
   como cajas con flecha en vez del texto plano con subrayado de React.
   `.main-menu`/`.is-menu`/`.is-menu-list`/`.is-menu-item`/`.is-menu-link`
   siguen existiendo (header.php los sigue usando, confirmado por grep
   que ningún otro template lo hace) pero ahora leen su única definición
   real desde el bloque "FASE 2 v2 — Navbar" de style-theme.css — no hace
   falta redeclararlos acá para "empezar en cero", ese archivo ya define
   todas las propiedades necesarias sin depender de nada de este bloque.
   Las 4 media queries que seguían (2 pares literalmente duplicados) sólo
   tenían reglas de este mismo bloque, se van con él. */

/* header/end ---------------------------------------------------------------*/

/* Torneos (proximos-torneos.php) eliminado 2026-09-03 — archivo borrado, reemplazado por index.php nuevo. */
/* "Responsive menú" (2026-09-04, Fase 2 v5) — el segundo bloque de CSS de
   nav pre-Fase-2 que un comentario anterior había dejado marcado
   "pendiente de limpieza aparte" (skewX/background-color/triángulo,
   idéntico en espíritu al bloque "Menu" de más arriba, pero solo activo
   bajo max-width:991px/576px — o sea, específicamente el que rompía el
   dropdown móvil). Se limpia junto con el resto de la reconciliación del
   nav: style-theme.css ya tiene sus propias media queries para
   #is-menu-nav/.is-menu-list a mobile (fondo opaco var(--color-og-menu-bg),
   columna), no dependen de nada de acá. */
/* torneos destacados ---------------------------------------------------------------*/
/* Torneo destacado / ranking ---------------------------------------------------------------*/

/* Torneo destacado (torneo-destacado.php) eliminado 2026-09-03 — archivo borrado, mismo motivo. */
/* torneos destacados/end ---------------------------------------------------------------*/
/* Banner home (.main-banner, index.php) eliminado 2026-09-03 — index.php se reescribió, la nueva versión no usa esta estructura. */

/* OnlyGames ---------------------------------------------------------------*/

.main-onlygames {
    width: 100%;
    background-color: var(--main-azul-1);
}

/* Banner superior */
.onlygames-banner {
    position: relative;
    width: 100%;
    min-height: 190px;
    background-color: var(--main-azul-1);
    display: flex;
    align-items: center;    
    
}
.is-onlygames-banner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.19;
    object-fit: cover;
    object-position: center;
}
/* Contenido dentro del banner */
.main-onlygames-contenido {
    position: relative;
}
    

/* Logo */
.is-logo-onlygames img {
    display: block;
    max-width: 460px;
    width: 100%;
    height: auto;    
}

/* Flecha */
.is-flecha-onlygames {
    font-family: 'Teva Sans bold';
    font-size: 56px;
    line-height: 1;
    color: #fff;
}

/* Botón */
.is-btn-onlygames .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 35px;
    font-family: 'Teva Sans bold';
    font-size: 30px;
    line-height: 1;
    color: #002b3f;
    background-color: #fff;
    border: none;
    border-radius: 12px;
    padding: 20px 30px;
    text-decoration: none;

    
}

.is-btn-onlygames .btn-primary span {
    font-size: 54px;
    line-height: 0.8;
    color: #0075b8;
}

/* Contenedor gris de cards */
.main-onlygames-cards-wrapper {
    background-color: #e5e5e5;
    padding: 30px 0 35px;
}

/* Cards */
.main-onlygames-cards {
    max-width: 1180px;
}

/* Card individual */
.is-card-onlygames {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 135px;
    margin-bottom: 12px;

    background-color: #0075b8;
    border-radius: 18px 0 0 18px;
    overflow: hidden;
}

/* Colores por card */
.is-card-onlygames:nth-of-type(1) {
    background-color: #0075b8;
}

.is-card-onlygames:nth-of-type(2) {
    background-color: #00577e;
}

.is-card-onlygames:nth-of-type(3) {
    background-color: #002b3f;
}

/* Número */
.is-numero-onlygames {
    width: 110px;
    min-width: 110px;

    text-align: center;
    font-family: 'Teva Sans bold';
    font-size: 70px;
    line-height: 1;
    color: #fff;
}

/* Línea vertical */
.is-separador-onlygames {
    width: 4px;
    height: 58px;
    background-color: #fff;
    border-radius: 10px;
    margin-right: 40px;
}

/* Texto */
.is-texto-onlygames {
    flex: 1;
    font-family: 'Teva Sans';
    font-size: 18px;
    line-height: 1.15;
    color: #fff;

    padding-right: 40px;
}

.is-texto-onlygames strong {
    font-family: 'Teva Sans bold';
}

/* Imagen */
.is-imagen-onlygames {
    position: relative;
    width: 300px;
    min-width: 300px;
    height: 135px;
}

.is-imagen-onlygames::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);

    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;

    z-index: 2;
}

.is-imagen-onlygames img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Más información */
.is-mas-info-onlygames {
    text-align: center;
    margin-top: 20px;
}

.is-mas-info-onlygames a {
    display: inline-flex;
    align-items: center;
    gap: 15px;    
    font-family: 'Teva Sans bold';
    font-size: 18px;
    color: #0075b8;
    text-decoration: none;
}

.is-mas-info-onlygames span {
    width: 0;
    height: 0;
    
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 14px solid #0075b8;
}

@media (max-width: 991px) {
    .onlygames-banner {
        min-height: auto;
        padding: 35px 0;
    }

    .main-onlygames-contenido .row {
        gap: 25px;
        justify-content: center !important;
        text-align: center;
    }

    .is-logo-onlygames img {
        max-width: 360px;
    }

    .is-flecha-onlygames {
        font-size: 42px;
    }

    .is-btn-onlygames .btn-primary {
        font-size: 22px;
        padding: 16px 25px;
    }

    .is-btn-onlygames .btn-primary span {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .main-onlygames-cards-wrapper {
        padding: 25px 0;
    }

    .is-card-onlygames {
        flex-direction: column;
        align-items: flex-start;
        border-radius: 18px;
    }

    .is-numero-onlygames {
        width: 100%;
        min-width: initial;
        text-align: left;
        padding: 20px 20px 0;
        font-size: 55px;
    }

    .is-separador-onlygames {
        display: none;
    }

    .is-texto-onlygames {
        padding: 10px 20px 20px;
        font-size: 16px;
    }

    .is-imagen-onlygames {
        width: 100%;
        min-width: initial;
        height: 180px;
    }

    .is-imagen-onlygames::before {
        display: none;
    }
}
/* OnlyGames/end -----------------------------------------------------------*/
/* Noticias ---------------------------------------------------------------*/

.main-noticias {
    width: 100%;
}

.page-noticias-cat {

    background-color: var(--main-gris3);
    padding: 25px 0px;


}


.page-noticias-cat .is-cat a,
.page-noticias-cat .is-cat a:visited,
.page-noticias-cat .is-cat a:hover,
.page-noticias-cat .is-cat a:active {
    text-decoration: none;
    text-transform: uppercase;
    color: black;
    font-family: 'Teva Sans bold';
    font-size: 22px;
    padding: 5px 15px;
    margin: 8px 0px;
    display: inline-block;
    border-right: 1px solid black;
}

.page-noticias-cat .is-cat a.active {

    color: var(--main-azul);

}

.page-noticias-cat .is-select .is-subtitulo {

    font-family: 'Teva Sans bold';
    color: var(--main-azul);

}

/* Noticia principal -----------------------------------------------------*/

/*page single noticias ------------------------------*/

.page-single-noticias .is-noticias-single-cards .card {
    border: none;
    padding: 0px 10px;



}

.page-single-noticias .is-noticias-single-cards .is-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
    border-radius: 0px;
}

.page-single-noticias .is-noticias-single-cards .is-card .card-body {
    padding: 10px 0px;


}

.page-single-noticias .is-noticias-single-cards .is-card .is-categoria {
    display: inline-flex;
    background-color: #0073b7;
    color: white;
    padding: 2px 20px;
}

.page-single-noticias .is-noticias-single-cards .is-card .card-title {

    font-family: 'teva sans bold';
    font-size: 20px;
}

.page-single-noticias .is-noticias-single-cards .is-card .card-subtitle {

    font-family: 'teva sans';
    font-size: 20px;
}

.page-single-noticias .is-noticias-single-cards .is-card .card-text {

    font-family: 'teva sans';
    font-size: 15px;


}

.page-single-noticias .is-noticias-single-cards .is-card .is-border-bottom {

    border-bottom: 2px solid var(--main-gris3);

}


.page-single-noticias .is-noticias-single-cards .is-card .card-footer {
    background-color: white;
    border: none;
    font-family: 'teva sans bold';
    font-size: 14px;
    padding: 10px 0px;

}



.page-single-noticias .is-mini-card .card {
    border: none;
    padding: 0px 5px;
}

.page-single-noticias .is-mini-card .card .card-img-top {

    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
    border-radius: 0px;

}

.page-single-noticias .is-mini-card .card .card-title {

    font-family: 'teva sans bold';
    font-size: 15px;
}

.page-single-noticias .is-mini-card .card .btn {
    background-color: var(--main-gris3);
    color: black;
    font-size: 10px;
    font-family: 'teva sans';
    border: none;
    border-radius: 0px;
    padding: 5px 5px;
    margin-bottom: 5px;

}

.page-single-noticias .is-mini-card .is-border-bottom {

    padding-bottom: 5px;
    border-bottom: 2px solid var(--main-gris3);

}

/*page single noticias /end ------------------------------*/

.main-noticias-principal {
    position: relative;
    width: 100%;
    min-height: 550px;
    overflow: hidden;
}

.is-imagen-noticias-principal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

.is-overlay-noticias-principal {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.45) 35%,
        rgba(0, 0, 0, 0.05) 75%
    );
    z-index: 1;
}

.main-noticias-principal .container {
    position: relative;
    z-index: 3;
}

.is-contenido-noticias-principal {
    max-width: 470px;
}

.is-categoria-noticias {
    display: inline-block;
    font-family: 'Teva Sans bold';
    font-size: 20px;
    line-height: 1;
    color: #fff;
    background-color: #0073b8;
    padding: 8px 18px;
    margin-bottom: 5px;
}

.is-titulo-noticias {
    font-family: 'Teva Sans bold';
    font-size: 52px;
    line-height: 0.95;
    color: #fff;
    margin: 0;
    max-width: 450px;
}

.is-fecha-noticias {
    display: inline-block;
    font-family: 'Teva Sans';
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.45);
    padding: 8px 10px;
    margin-top: 8px;
    text-transform: uppercase;
}

/* Noticias secundarias --------------------------------------------------*/

.main-noticias-secundarias {
    background-color: #0073b8;
    padding: 12px 0px 20px 0px;
    
}
.is-noticias-secundarias {
    margin-top: -60px;
    z-index: 1;
    position: relative;
}

.is-card-noticia-secundaria,
.is-card-video-noticia {
    display: block;
    height: 100%;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
}

.is-card-noticia-secundaria:hover,
.is-card-video-noticia:hover {
    color: #fff;
    text-decoration: none;
}

.is-imagen-card-noticia {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.is-imagen-card-noticia img,
.is-video-noticia img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 10px;
}

/* Cuerpo cards */
.is-body-card-noticia {
    position: relative;
    background-color: #0073b8;
    padding: 0 8px 8px;
}

.is-categoria-card-noticia {
    display: inline-block;
    position: absolute;
    z-index: 2;
    left: 0%;
    bottom: 40px;

    font-family: 'Teva Sans bold';
    font-size: 12px;
    color: #fff;
    background-color: #008bd2;
    padding: 5px 10px;
}

.is-descripcion-card-noticia {
    font-family: 'Teva Sans';
    font-size: 15px;
    line-height: 1.1;
    color: #fff;
    margin: 8px 0 0;
}

/* Separador vertical */
.is-separador-noticias-secundarias {
    width: 3px;
    height: 100%;
    min-height: 220px;
    background-color: #fff;
    opacity: 0.9;
}

/* Video --------------------------------------------------*/

.is-card-video-noticia {
    position: relative;
}

.is-video-noticia {
    border-radius: 8px 8px 8px 8px;
    border: 3px solid white;
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.is-play-video-noticia {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 70px;
    height: 70px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #00324a;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    padding-left: 5px;
}
/*galerias ---------------------------------------------------------------------*/
/* Galería carousel de home (.main-galeria-section, index.php) eliminado 2026-09-03 — mismo motivo. */
/* Footer ---------------------------------------------------------------*/

.main-footer {
    background-color: #ffffff;
    padding: 70px 0 50px;
}

/* Logos superiores */
.main-footer-logos {
    margin-bottom: 30px;
}

.is-logo-footer {
    display: inline-block;
    text-decoration: none;
}

.is-logo-footer img {
    display: block;
    width: auto;
    max-width: 230px;
    max-height: 60px;
    margin: 0 auto;
}

/* Contenido */
.main-footer-content {
    align-items: flex-start;
}

.is-footer-box {
    text-align: left;
}

/* Títulos */
.is-titulo-footer {
    font-family: 'Teva Sans bold';
    font-size: 18px;
    line-height: 1.2;
    color: #002b3f;
    margin-bottom: 18px;
}

/* Textos */
.is-texto-footer {
    font-family: 'Teva Sans';
    font-size: 14px;
    line-height: 1.45;
    color: #686868;
    margin-bottom: 14px;
}

/* Listas */
.is-lista-footer {
    list-style: none;
    padding: 0;
    margin: 0;

    font-family: 'Teva Sans';
    font-size: 14px;
    line-height: 1.45;
    color: #686868;
}

.is-lista-footer li::before {
    content: "° ";
}

.is-lista-info-footer li::before {
    content: "";
}

/* Redes sociales */
.is-social-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}

.is-social-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.is-social-footer img {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.is-social-footer a:hover img {
    transform: scale(1.1);
}

@media (max-width: 991px) {
    .main-footer {
        padding: 50px 0 40px;
    }

    .main-footer-logos {
        row-gap: 25px;
    }

    .main-footer-content {
        row-gap: 30px;
    }

    .is-footer-box {
        text-align: left;
    }
}

@media (max-width: 576px) {
    .main-footer {
        padding: 40px 0 35px;
    }

    .is-logo-footer img {
        max-width: 190px;
    }

    .is-titulo-footer {
        font-size: 17px;
        margin-bottom: 12px;
    }

    .is-texto-footer,
    .is-lista-footer {
        font-size: 13px;
    }
}

/* Nosotros (page-nosotros.php, banner/qué-hacemos/cards/clientes viejos) eliminado 2026-09-03 — page-nosotros.php se reescribió estático, CSS nueva en style-theme.css ("Página Nosotros"). Verificado con grep: ningún otro template usaba estas clases. .page-servicios/.is-card-servicios-* de acá abajo NO se tocaron. */
/* Servicios listado (page-servicios.php, banner/cards/experiencias viejos) eliminado 2026-09-03 — page-servicios.php se reescribió estático, CSS nueva en style-theme.css ("Página Servicios"). Verificado con grep: ningún otro template usaba estas clases. */
/* Campeonatos (page-campeonatos.php, banner/buscador-ya-muerto/cards viejos) eliminado 2026-09-03 — page-campeonatos.php se reescribió (reskin, reusa TournamentCard), CSS nueva en style-theme.css ("Página Campeonatos"). .is-busqueda-campeonatos ya estaba muerto antes de esta ronda (ningún template lo renderizaba). Verificado con grep: ningún otro template usaba estas clases. */
/* Noticias page ---------------------------------------------------------------*/



/* Banner --------------------------------------------------------------------*/

.main-banner-noticias {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 410px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #002b3f;
}

.main-banner-noticias .is-fondo-noticias {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

.main-banner-noticias .is-overlay-noticias {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 45, 60, 0.68);
    z-index: 2;
}

.main-banner-noticias .container {
    z-index: 3;
}

.is-titulo-noticias-page {
    font-family: 'Teva Sans bold';
    font-size: 28px;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 32px;
}

/* Filtros -------------------------------------------------------------------*/

.is-filtro-noticias {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 30px;
}

.is-filtro-noticias a {
    font-family: 'Teva Sans bold';
    font-size: 24px;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
}

.is-filtro-noticias a:hover {
    color: #2ca6dc;
}



/* Listado noticias ----------------------------------------------------------*/

.main-listado-noticias {
    background-color: #e5e5e5;
    padding: 25px 0 35px;
}

/* Buscador -----------------------------------------------------------------*/

.is-busqueda-noticias,
.is-busqueda-videos {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0 0 25px;
}

.is-busqueda-noticias label,
.is-busqueda-videos label {
    font-family: 'Teva Sans';
    font-size: 12px;
    color: #000;
    margin: 0;
    white-space: nowrap;
}

.is-input-busqueda-noticias,
.is-input-busqueda-videos {
    width: 180px;
    height: 28px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.is-input-busqueda-noticias button,
.is-input-busqueda-videos button {
    width: 34px;
    height: 28px;
    border: none;
    background-color: transparent;
    color: #000;
    font-size: 13px;
    cursor: pointer;
}

.is-input-busqueda-noticias input,
.is-input-busqueda-videos input {
    flex: 1;
    width: 100%;
    height: 28px;
    border: none;
    outline: none;
    padding: 0 8px 0 0;
    font-family: 'Teva Sans';
    font-size: 13px;
}

/* Cards noticias ------------------------------------------------------------*/

.noticias-cards {
    row-gap: 28px;
}

.card-noticia {
    display: block;
    color: #000;
    text-decoration: none;
}

.card-noticia:hover {
    color: #000;
    text-decoration: none;
}

.imagen-card-noticia {
    width: 100%;
    height: 410px;
    overflow: hidden;
    border-radius: 8px 8px;
    background-color: #ccc;
    position: relative;
}

.imagen-card-noticia img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.body-card-noticia {
    position: relative;
    padding: 0 6px 10px;
}

.categoria-card-noticia {
    display: inline-block;
    position: absolute;
    z-index: 2;
    padding: 10px 18px;
    left: 0px;
    bottom: 20px;

    font-family: 'Teva Sans bold';
    font-size: 20px;
    line-height: 1;
    color: #fff;

    background-color: #0073b8;
}

.descripcion-card-noticia {
    font-family: 'Teva Sans';
    font-size: 15px;
    line-height: 1.2;
    color: #000;
    margin: 8px 0 0;
}

/* Paginador ----------------------------------------------------------------*/

.paginador-noticias {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 28px;
}

.is-paginador-link,
.is-paginador-arrow {
    font-family: 'Teva Sans bold';
    font-size: 25px;
    line-height: 1;
    color: #000;
    text-decoration: none;
}

.is-paginador-link.is-active,
.is-paginador-link:hover,
.is-paginador-arrow:hover {
    color: #0073b8;
}

/* Videos -------------------------------------------------------------------*/

.main-videos-noticias {
    background-color: #002b3f;
    padding: 35px 0 45px;
}

.main-videos-noticias-header {
    margin-bottom: 20px;
}

.is-titulo-videos-noticias {
    font-family: 'Teva Sans bold';
    font-size: 26px;
    line-height: 1;
    color: #fff;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 25px;
}

.main-videos-noticias .is-busqueda-videos {
    margin-bottom: 25px;
}

.main-videos-noticias .is-busqueda-videos label {
    color: #fff;
}

.is-noticias-videos {
    row-gap: 28px;
}

/* .is-card-video-noticia-page y su familia (.is-imagen-card-video,
   .is-play-card-video, .is-body-card-video, .is-categoria-card-video,
   .is-descripcion-card-video) salieron de acá (2026-09-04) — eran
   exclusivas de page-galeria.php (tab videos) y single-videos.php
   (relacionados), confirmado por grep; ambos templates se reescribieron
   con card nueva (.is-galeria-card / .is-video-rcard), ver "Página
   Galería" en style-theme.css. Los contenedores de acá arriba
   (.main-videos-noticias, .is-titulo-videos-noticias, .is-noticias-videos)
   no forman parte de este cambio — ya estaban sin uso en ningún template
   antes de esta ronda (grep confirmado), quedan tal cual, fuera de
   alcance. */

/* Responsive ---------------------------------------------------------------*/

@media (max-width: 991px) {
    .main-banner-noticias {
        min-height: 240px;
        padding: 50px 0;
    }

    .is-filtro-noticias {
        gap: 12px;
    }

    .is-busqueda-noticias,
    .is-busqueda-videos {
        justify-content: flex-start;
        margin-top: 15px;
    }

    .imagen-card-noticia {
        height: 180px;
    }

    .is-titulo-videos-noticias {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .is-titulo-noticias-page {
        font-size: 24px;
        letter-spacing: 2px;
    }

    .is-filtro-noticias a {
        font-size: 11px;
    }

    .is-filtro-noticias span {
        display: none;
    }

    .is-busqueda-noticias,
    .is-busqueda-videos {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .is-input-busqueda-noticias,
    .is-input-busqueda-videos {
        width: 100%;
        height: 36px;
    }

    .is-input-busqueda-noticias button,
    .is-input-busqueda-noticias input,
    .is-input-busqueda-videos button,
    .is-input-busqueda-videos input {
        height: 36px;
    }

    .imagen-card-noticia {
        height: 210px;
    }

    .paginador-noticias {
        gap: 14px;
    }
}
/*
 * style-bootstrap.css — RECONSTRUIDO 2026-09-01 (placeholder vacío)
 * Ver el comentario al inicio de style-base.css: se recuperó todo el
 * contenido superviviente del compilado (assets/css/style.css) en ese
 * archivo porque no fue posible distinguir dentro de él una sección que
 * correspondiera específicamente a overrides de Bootstrap. Este archivo
 * queda vacío pero presente para que el pipeline de build (que espera
 * los tres archivos: style-base.css, style-bootstrap.css, style-theme.css)
 * no falle silenciosamente por un archivo faltante.
 */
/*
 * style-theme.css
 * Estilos propios del tema onlygolf_2027.
 * Este archivo se compila junto con style-base.css y style-bootstrap.css
 * en css/style.css (pipeline reconectado en Fase 1 — ver
 * .claude/plan-traspaso-react-a-wordpress.md sección 13; en onlygolf_2026,
 * que no tiene el pipeline reconectado, el compilado sigue en
 * assets/css/style.css). Cualquier url() relativo acá se resuelve contra
 * css/, no contra assets/css/ — por eso las fuentes se referencian como
 * '../assets/fonts/...' y no '../fonts/...'.
 * Para reconstruir: añadir ?rebuild=onlygolf2020 a cualquier URL del sitio.
 */

/* =====================================================================
   FASE 1 — Fundación visual del rediseño 2027
   Fuente: onlygolf-web/frontend/src/index.css (tokens Tailwind @theme).
   Ver .claude/plan-traspaso-react-a-wordpress.md, secciones 5.1 y 6.

   Todo lo de este bloque es aditivo/inerte: ningún selector del tema
   todavía usa estas variables ni las clases .og-glass*/.og-glow, así que
   no cambia el aspecto visual de ninguna página existente. Se activa
   recién cuando los componentes/páginas empiecen a consumirlo (Fase 2+).
   ===================================================================== */

/* Oswald autohospedada — decisión #2 del plan original (reemplaza a
   TevaSans para lo "display"), pero YA NO es el default de --font-display
   (ver bloque "FASE 2 v4" más abajo: se reemplazó por Archivo Black,
   replicando site_settings global). Se deja el @font-face acá, sin usar
   por defecto — no hace daño tenerla disponible por si se necesita en
   algún lugar puntual más adelante. */
@font-face {
    font-family: 'Oswald';
    src: url('../assets/fonts/Oswald/Oswald-Variable.woff2') format('woff2-variations'),
         url('../assets/fonts/Oswald/Oswald-Variable.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Tipografía — Archivo Black, no Oswald. Ver bloque "FASE 2 v4" más
       abajo para el porqué (replica site_settings.font_family global, no
       solo del nav).

       Auditoría de font-weight (2026-09-09): Archivo Black (Google Fonts,
       family=Archivo+Black sin :wght@) solo tiene UN @font-face real,
       registrado en weight:400 — confirmado contra la CSS que sirve
       Google. Cualquier font-weight distinto de 400 sobre esta variable
       es bold sintético del navegador (no hay archivo 600/700 real para
       sintetizar contra), y en un display face ya de por sí "black" el
       engrosado sintético solo ensucia el trazo, sobre todo en tamaños
       chicos (eyebrows 10-13px). Las ~27 reglas que usaban 600/700 acá
       pasaron a 400 — mismo look (la fuente ya es "black" por diseño,
       el weight tag de 400 no la aclara), sin el artefacto de síntesis.
       No aplica a TevaSans (peso real vía nombre de familia, no
       font-weight) ni a Oswald (variable real 400-700, hoy sin
       consumidor vivo). */
    --font-display: 'Archivo Black', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;

    /* Paleta pública — tema oscuro fijo ("sports broadcast"), calcada de
       onlygolf-web. --color-og-menu-bg sigue siendo la única pensada como
       editable solo del nav (site_settings.menu_bar_color, ver
       header.og-glass-strong); --color-og-card-bg, --color-og-ink-dim
       (y --font-display arriba) pasaron a ser la base global del sitio
       completo — ver bloque "FASE 2 v4" más abajo. El resto queda fijo
       como identidad de marca. */
    --color-og-bg: #08090d;
    --color-og-surface: #12182b;
    --color-og-menu-bg: #12182b;
    --color-og-card-bg: #005b94;
    --color-og-surface-2: #0c3773;
    --color-og-line: #232a3d;
    --color-og-ink: #ffffff;
    --color-og-ink-dim: #ffffff;
    --color-og-brand: #0c3773;
    --color-og-live: #e0263a;
    --color-og-positive: #2ecc71;
    --color-og-gold: #eab308;
    --color-og-silver: #cbd5e1;
    --color-og-bronze: #d97706;
}

/* Utilidades tipográficas "display" — mismo tratamiento que en React. */
.og-eyebrow {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 11px;
}

.og-heading {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    line-height: 0.96;
}

.og-stat-number {
    font-family: var(--font-display);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* Liquid Glass — portado 1:1 desde onlygolf-web/frontend/src/index.css.
   Son propiedades CSS puras (color-mix + backdrop-filter), sin
   dependencia de Tailwind ni JS, compatibles con Bootstrap 5 tal cual.
   Requieren soporte de color-mix()/backdrop-filter en el navegador; sin
   fallback definido para navegadores legacy (no se detectó necesidad de
   soporte IE/legacy en este tema). */
.og-glass {
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--color-og-card-bg) 78%, white 8%) 0%,
        color-mix(in srgb, var(--color-og-card-bg) 68%, transparent) 55%,
        color-mix(in srgb, var(--color-og-card-bg) 55%, transparent) 100%
    );
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid color-mix(in srgb, white 12%, transparent);
    box-shadow:
        inset 0 1px 1px color-mix(in srgb, white 20%, transparent),
        inset 0 -14px 20px -16px color-mix(in srgb, black 50%, transparent),
        0 16px 36px -16px color-mix(in srgb, black 70%, transparent);
}

.og-glass-strong {
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--color-og-menu-bg) 88%, white 8%) 0%,
        color-mix(in srgb, var(--color-og-menu-bg) 80%, transparent) 100%
    );
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-bottom: 1px solid color-mix(in srgb, white 12%, transparent);
    box-shadow:
        inset 0 1px 1px color-mix(in srgb, white 18%, transparent),
        0 8px 30px -12px color-mix(in srgb, black 70%, transparent);
}

/* Halo de luz fijo al viewport, detrás del contenido — mezcla azul marca +
   rojo "en vivo". Requiere un <span> hijo posicionado (ver uso en React). */
/* Fondo fijo de página con foto real (Home, wiring 2026-09-04, ver
   header.php) — replica el <div className="fixed inset-0 -z-20 bg-cover
   bg-center"> de PublicLayout.tsx. z-index más negativo que .og-glow
   para quedar detrás de los 2 blobs de luz. */
.is-page-bg-photo {
    position: fixed;
    inset: 0;
    z-index: -20;
    background-size: cover;
    background-position: center;
}

.og-glow {
    position: fixed;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    pointer-events: none;
}
.og-glow > span {
    position: absolute;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-og-brand) 75%, var(--color-og-live) 25%);
    filter: blur(90px);
}

/* Activado en la reconciliación nav/footer (2026-09-03, header.php) — los 2
   blobs son los mismos valores literales de PublicLayout.tsx
   (w-[560px] h-[560px] -top-40 -left-32 opacity-25 /
   w-[480px] h-[480px] top-1/3 -right-40 opacity-20), no hace falta
   recalcularlos porque ya vienen como arbitrary values en el JSX, no como
   utilidades Tailwind con valor implícito. */
.is-glow-1 {
    width: 560px;
    height: 560px;
    top: -160px;
    left: -128px;
    opacity: .25;
}

.is-glow-2 {
    width: 480px;
    height: 480px;
    top: 33.3333%;
    right: -160px;
    opacity: .2;
}

/* Corrección (2026-09-01, durante Fase 2): faltaba esto en el bloque
   original de Fase 1 — sin fondo oscuro en <body>, el navbar quedaba
   flotando dark sobre una página blanca, y los logos/íconos con filtro
   invert(1) del footer quedaban invisibles contra ese mismo blanco
   (reportado por el usuario probando con un color de fondo temporal).
   Cada sección sigue teniendo su propio fondo claro hardcodeado
   (.main-torneos, banners, etc.) — eso se corrige sección por sección a
   medida que Fase 2 llega a cada una; esto solo pone el lienzo de base. */
body {
    background-color: var(--color-og-bg);
    color: var(--color-og-ink);
    /* text_scale:110 de site_settings, ver bloque "FASE 2 v4" — aplicado acá
       (equivalente al <div> raíz de PublicLayout.tsx, que envuelve TODO el
       <main> de React) para que escale la página completa, no una sección. */
    zoom: 110%;
}

/* =====================================================================
   FIN Fase 1
   ===================================================================== */

/* =====================================================================
   FASE 2 v4 (2026-09-03) — site_settings pasa a ser la base GLOBAL, no
   solo del nav.
   Diagnóstico pedido tras revisar capturas reales de localhost:5180:
   "Qué hacemos" y el panel OnlyGames de Home se ven azules, no oscuros.
   Causa: PublicLayout.tsx aplica `themeVars` (6 campos de site_settings)
   como custom properties en el <div> raíz que envuelve TODA la app, no en
   el <header> — por herencia de CSS llegan a cualquier componente de
   cualquier página. De esos 6, dos son genuinamente solo del nav
   (menu_bar_color/gradient -> --color-og-menu-bg, la usa únicamente
   .og-glass-strong) y CUATRO son globales:
     - card_background_color (#005b94) -> --color-og-card-bg, la usa
       .og-glass — y .og-glass la usan casi todos los componentes públicos
       (TournamentCard, NewsCard, AlbumCard, LiveLeaderboardWidget,
       SegmentedTabs, Contacto, Nosotros, Home, listados de campeonatos/
       noticias/galería, etc. — confirmado con grep sobre onlygolf-web).
     - font_family "Archivo Black" -> --font-display, la usa cualquier
       og-heading/og-eyebrow/og-stat-number del sitio, no solo el nav.
     - text_color_dim = text_color (blanco, sin distinción) -> ambas
       --color-og-ink/--color-og-ink-dim, texto normal y tenue son el
       mismo color en TODO el sitio hoy, no solo en el nav.
     - text_scale:110 -> zoom en el <div> raíz, escala la app completa.
   La ronda anterior (Fase 2 v3, "reconciliación nav/footer") había
   limitado los 4 al <header> — simplificación deliberada en su momento,
   ahora corregida: pasan al :root/body de Fase 1 como default de TODO el
   sitio, reemplazando los valores oscuros originales. El comentario de
   Fase 2 v3 que decía "el resto del sitio sigue con Oswald + paleta
   oscura, divergencia deliberada" queda OBSOLETO por este cambio — no es
   un error, es que la decisión se revirtió acá.
   No se tocó ninguna estructura/markup — solo los 3 tokens de :root
   arriba (--color-og-card-bg, --font-display, --color-og-ink-dim) + este
   zoom en <body>. --color-og-menu-bg sigue sin cambios (sigue siendo
   solo del nav, ver header.og-glass-strong más abajo).
   ===================================================================== */

/* =====================================================================
   FASE 2 v2 — Navbar (header.php)
   Rehecho desde cero (2026-09-03) sobre utilidades Bootstrap (container/
   d-flex/gap-*, ver header.php) en vez del flexbox propio de la ronda
   anterior — reemplaza el bloque "FASE 2 — Navbar" original completo
   (incluido su duplicado de hamburguesa más abajo en este archivo, que
   quedó de un trabajo previo con azul #0073ba hardcodeado). El toggle
   móvil sigue siendo el mismo hook JS sin tocar: .is-menu-hamburger click
   -> #is-menu-nav.is-open + .is-menu-hamburger.is-active (assets/js/app.js,
   no hay fuente editable, ver plan sección 13).
   Referencia visual: onlygolf-web PublicLayout.tsx — header og-glass-strong
   sticky, nav og-eyebrow con subrayado en el activo/hover, barra h-16.
   ===================================================================== */

header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: transparent;
}

/* .main-barra-logos (fila separada de logo+auspiciadores) sale de acá
   (2026-09-04, Fase 2 v5) — PublicLayout.tsx es una sola barra, sin
   equivalente para una fila de sponsors en el header; esos logos ya
   viven en Home vía general_home_colaboradores (sección de wiring
   2026-09-04), no se duplican acá. El logo de marca pasa a vivir dentro
   de .main-menu (ver header.php) — el filtro brightness(0) invert(1)
   (vuelve blanco el logo real, que es azul/gris) se reaplica directo
   sobre .is-logo-principal img para que siga viéndose igual sobre el
   fondo azul del header. .is-logo-secundario (logos de auspiciadores)
   ya no se usa en ningún lado — confirmado por grep, se elimina con la
   fila que lo contenía. */
.is-logo-principal img {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* Barra de navegación: h-16 como PublicLayout.tsx. Prefijo "header" para
   igualar la especificidad de style-base.css (header .main-menu tiene
   background-color:#0073ba hardcodeado) y ganar por orden de carga. */
header .main-menu,
.main-menu {
    background-color: transparent;
    min-height: 64px;
    display: flex;
    align-items: center;
}

.main-menu .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
}

.is-menu {
    display: flex;
    align-items: center;
    gap: 20px;
}

.is-menu-list {
    display: flex;
    align-items: flex-end;
    gap: 24px;
}

.is-menu-item {
    flex: 0 0 auto;
}

/* Link: mismo tratamiento que .og-eyebrow + subrayado activo/hover de
   PublicLayout.tsx (border-b-2, ink-dim -> ink). */
.is-menu-link {
    display: inline-block;
    padding: 4px 0 10px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-og-ink-dim);
    text-decoration: none; /* Bootstrap 5 subraya <a> por defecto (reboot) —
        sin esto, el ítem aparecía subrayado incluso sin estar seleccionado
        ni en hover (bug reportado 2026-09-07). */
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.is-menu-link:hover,
.is-menu-link.is-active {
    color: var(--color-og-ink);
    border-bottom-color: var(--color-og-ink);
    text-decoration: none;
}

/* Hamburguesa (mobile) */
.is-menu-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 22px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.is-hamburger-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-og-ink);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.is-menu-hamburger.is-active .is-hamburger-bar:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
.is-menu-hamburger.is-active .is-hamburger-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.is-menu-hamburger.is-active .is-hamburger-bar:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

@media (max-width: 991px) {
    .is-menu-hamburger {
        display: flex;
    }

    .main-menu .container {
        justify-content: flex-end;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Dropdown móvil: oculto por defecto, .is-open lo despliega (JS) */
    #is-menu-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1000;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background-color: var(--color-og-menu-bg);
        padding: 24px 24px 28px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }

    #is-menu-nav.is-open {
        display: flex;
    }

    .is-menu-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }
}

@media (min-width: 992px) {
    #is-menu-nav {
        display: flex !important;
    }
}

/* FIN Fase 2 v2 — Navbar */

/* =====================================================================
   FASE 2 v3 (2026-09-03) — Navbar, reconciliación nav/footer.
   Hardcode SOLO acá, fondo azul de site_settings.menu_bar_color/gradient
   (#0074bd, 70%/to-left) — el único de los 6 valores de themeVars que en
   React de verdad es exclusivo del <header> (.og-glass-strong es la única
   clase que lee --color-og-menu-bg). El resto (Archivo Black, zoom 110%,
   --color-og-card-bg, ink-dim) pasó a ser default global en Fase 2 v4 (ver
   arriba) — ya NO se declaran acá porque los hereda del :root, declararlos
   de nuevo sería redundante. El selector es el <header> entero (incluye la
   barra de logos de sponsors, comparte el mismo tag) — no solo .main-menu.
   El dropdown móvil (#is-menu-nav) no se ve afectado porque pinta su propio
   fondo opaco (var(--color-og-menu-bg)) encima de esto.
   Confirmado visual: _static-preview/nav-footer.html -> localhost:5180.
   ===================================================================== */
header.og-glass-strong {
    background-image: linear-gradient(to left, rgba(0, 116, 189, 1), rgba(0, 116, 189, .3));
}

/* FIN Fase 2 v3 — Navbar */

/* =====================================================================
   FASE 2 — Footer (footer.php)
   Mismo criterio que el navbar: no se tocó la estructura ni el markup de
   footer.php (logos de partners, 3 boxes ACF + "Síguenos", íconos
   sociales como <img>) — todo el cambio es CSS, sobre los selectores
   existentes (.main-footer ya alcanza como gancho). Referencia visual:
   el <footer> de
   PublicLayout.tsx (borde superior sutil, sin fondo propio, texto
   "eyebrow" apagado). Los textos de cuerpo (.is-texto-footer,
   .is-lista-footer) se dejan en 'Teva Sans' — Oswald es solo para
   títulos/eyebrows, no para párrafos, según la decisión de la sección 6.

   Fondo del footer (2026-09-09, a pedido explícito — desvío del "sin
   fondo propio" de PublicLayout.tsx de arriba): mismo tratamiento que
   header.og-glass-strong — el gradiente azul hardcodeado de
   site_settings.menu_bar_color (línea 440-442 arriba) + el blur/saturate
   de .og-glass-strong, copiados 1:1 acá. No se agrega la clase
   .og-glass-strong al <footer> (footer.php no se toca, mismo criterio
   "todo CSS" de siempre) — se declara el mismo resultado visual
   directamente sobre .main-footer. border-top/padding/logos/texto
   quedan igual, sin tocar. */
.main-footer {
    background-color: transparent;
    background-image: linear-gradient(to left, rgba(0, 116, 189, 1), rgba(0, 116, 189, .3));
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-top: 1px solid var(--color-og-line);
    padding: 60px 0 40px;
}

/* Logos de partners y redes sociales: son PNG grises pensados para fondo
   claro (gris medio, bajo contraste sobre el fondo oscuro nuevo) — mismo
   filtro que ya se usa en los logos del header para volverlos blancos. */
.is-logo-footer img,
.is-social-footer img {
    filter: brightness(0) invert(1);
    opacity: 0.75;
}

.is-titulo-footer {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-og-ink);
    margin-bottom: 16px;
}

.is-texto-footer,
.is-lista-footer {
    color: var(--color-og-ink-dim);
}

/* FIN Fase 2 — Footer */

/* =====================================================================
   FASE 2 — Botones (.btn.btn-primary, usado en onlygames.php,
   page-campeonatos.php, page-servicios.php)
   Sin markup nuevo: .btn/.btn-primary son clases de Bootstrap, el override
   gana por orden de carga (bootstrap.min.css se linkea antes que
   css/style.css en header.php) sin necesitar !important. No se encontró
   uso de .btn-outline-* en ningún template — solo se traduce la variante
   "solid" de PillButton.tsx (React no tiene equivalente de outline en uso
   en WP todavía, se agrega si aparece un caso real).
   ===================================================================== */

.btn-primary {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;

    padding: 14px 28px;
    border-radius: 9999px;

    background-color: var(--color-og-brand);
    border-color: var(--color-og-brand);
    color: var(--color-og-ink);

    transition: filter 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-og-brand);
    border-color: var(--color-og-brand);
    color: var(--color-og-ink);
    filter: brightness(1.15);
}

/* FIN Fase 2 — Botones */

/* FASE 2 — Card de "Próximos torneos" (proximos-torneos.php) eliminada
   (2026-09-03) — proximos-torneos.php se borró, reemplazado por la
   sección Torneos nueva de index.php (ver más abajo, "Página Home"). */

/* =====================================================================
   FASE 2 — Cards de noticias (bloque-noticias.php, home)
   Sin cambios de markup. Búsqueda previa en style-theme.css: nada. Dos
   piezas: la noticia principal (hero grande, imagen+degradado+texto,
   mismo patrón que la card de campeonato) y las 3 secundarias (grid de
   cards chicas, referencia visual NewsCard.tsx — og-glass, imagen 16:9
   arriba, badge de categoría, título).
   ===================================================================== */

/* Noticia principal (hero) */
.is-overlay-noticias-principal {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-og-bg) 85%, transparent) 0%,
        color-mix(in srgb, var(--color-og-bg) 55%, transparent) 35%,
        color-mix(in srgb, var(--color-og-bg) 5%, transparent) 75%
    );
}

.is-categoria-noticias {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-og-ink);
    background-color: var(--color-og-brand);
    padding: 6px 14px;
    border-radius: 9999px;
}

.is-titulo-noticias {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 44px;
    line-height: 0.98;
    text-transform: uppercase;
    color: var(--color-og-ink);
}

.is-fecha-noticias {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--color-og-ink-dim);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
}

/* Noticias secundarias */
.main-noticias-secundarias {
    background-color: transparent;
}

.is-card-noticia-secundaria {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--color-og-card-bg);
    color: var(--color-og-ink);
}

.is-card-noticia-secundaria:hover {
    color: var(--color-og-ink);
}

.is-imagen-card-noticia img {
    border-radius: 0;
    transition: transform 0.3s ease;
}

.is-card-noticia-secundaria:hover .is-imagen-card-noticia img {
    transform: scale(1.05);
}

.is-categoria-card-noticia {
    top: 10px;
    bottom: auto;
    left: 10px;

    font-family: var(--font-display);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--color-og-ink);
    background-color: var(--color-og-brand);
    border-radius: 9999px;
}

.is-body-card-noticia {
    flex: 1;
    background-color: transparent;
    padding: 12px 14px 16px;
}

.is-descripcion-card-noticia {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--color-og-ink);

    /* Recorta a 3 líneas — sin esto un título largo puede seguir
       estirando la card bastante más que sus vecinas aunque el row ya
       este parejo (ver fix de abajo). */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bug reportado por el usuario: las cards no quedaban con la misma
   altura cuando un título era más largo que los demás. Causa: el <div
   class="row align-items-start"> en bloque-noticias.php desactiva el
   align-items:stretch por defecto de Bootstrap, así que cada columna
   (y la card adentro, aunque tenga height:100%) se achica a su propio
   contenido en vez de igualarse a la más alta de la fila. Se pisa acá
   en vez de tocar el markup — es la única card de la fila que usa esa
   clase (grep confirmado), no afecta nada más. */
.is-noticias-secundarias .row {
    /* Bootstrap define .align-items-start con !important — no alcanza
       con especificidad/orden de carga para pisarlo, hace falta acá
       también (única excepción a "sin !important" de esta fase). */
    align-items: stretch !important;
}

/* FIN Fase 2 — Cards de noticias */

/* .is-card-album-galeria y su familia (.is-imagen-album-galeria,
   .is-body-album-galeria, .is-titulo-album-galeria, .is-fecha-album-galeria,
   .is-total-album-galeria) salieron de acá (2026-09-04) — page-galeria.php
   se reescribió estático con card nueva (.is-galeria-card), ver "Página
   Galería" más abajo. .is-card-galeria (carrusel de index.php, clase
   DISTINTA aunque similar) no se toca. */

/* =====================================================================
   FASE 2 — Card de galería del home (.is-card-galeria, index.php)
   Carrusel (js-multi-carousel, manejado por app.js — no se toca JS).
   Card distinta de .is-card-album-galeria (misma sección, dos templates
   distintos), pero mismo problema/solución: imagen + texto separado
   abajo → texto superpuesto con degradado, mismo mecanismo.
   ===================================================================== */

.is-card-galeria {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    color: var(--color-og-ink);
    text-decoration: none;
}

.is-card-galeria:hover {
    color: var(--color-og-ink);
    text-decoration: none;
}

.is-imagen-galeria {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    background-color: var(--color-og-card-bg);
}

.is-imagen-galeria::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(6, 7, 10, 0.9) 100%);
}

.is-body-galeria {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 12px;
}

.is-descripcion-galeria {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-og-ink);
    margin: 0 0 4px;
}

.is-fecha-galeria {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-og-ink-dim);
}

/* FIN Fase 2 — Card de galería del home */

/* .is-card-video-noticia-page y su familia (.is-imagen-card-video,
   .is-play-card-video, .is-body-card-video, .is-categoria-card-video,
   .is-descripcion-card-video) salieron de acá (2026-09-04) — usada en
   page-galeria.php (tab videos) y single-videos.php (relacionados),
   ambos reescritos con card nueva (.is-galeria-card / .is-video-rcard),
   ver "Página Galería" más abajo. */

/* =====================================================================
   FASE 2 — Resto de cards (batch, a pedido del usuario de avanzar varios
   puntos sin revisar de a uno). Sin cambios de markup en ninguna. Mismo
   mecanismo de overlay ya usado (imagen + degradado ::after + texto
   superpuesto abajo) para las que tenían imagen + barra de título plana
   separada (nosotros, servicios, experiencia — todas comparten ese
   patrón, algunas con fondo blanco, otras ya oscuras pero con azules
   hardcodeados). Card de OnlyGames y "torneo destacado" se retiñen nomás
   (estructura distinta, no es imagen+overlay) — búsqueda previa en
   style-theme.css: sin conflictos en ninguna de estas.
   ===================================================================== */

/* Cards de Servicios listado (.is-card-servicios-up/down,
   .is-imagen-card-servicios, .is-titulo-card-servicios) y de Experiencias
   (.is-card-experiencia y derivados) eliminadas (2026-09-03) —
   page-servicios.php se reescribió estático (listado sin sección
   Experiencias, ver _static-preview/servicios-listado.html), CSS nueva en
   "Página Servicios" más abajo. Verificado con grep: ningún otro template
   usaba estas clases. onlygames.php (justo abajo) NO se tocó. */

/* --- OnlyGames (onlygames.php) — estructura de banner numerado, se
   retiñe sin convertir a overlay. Los 3 tonos de azul alternados pasan a
   variaciones de --color-og-brand con color-mix para mantener la idea
   de "degradado de marca" sin 3 colores sueltos hardcodeados. --- */
.is-card-onlygames {
    background-color: var(--color-og-brand);
}

.is-card-onlygames:nth-of-type(1) {
    background-color: var(--color-og-brand);
}

.is-card-onlygames:nth-of-type(2) {
    background-color: color-mix(in srgb, var(--color-og-brand) 75%, black 25%);
}

.is-card-onlygames:nth-of-type(3) {
    background-color: color-mix(in srgb, var(--color-og-brand) 50%, black 50%);
}

.is-numero-onlygames {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-og-ink);
}

.is-separador-onlygames {
    background-color: rgba(255, 255, 255, 0.3);
}

.is-texto-onlygames,
.is-texto-onlygames strong {
    font-family: 'Teva Sans';
    color: var(--color-og-ink);
}

.is-mas-info-onlygames a,
.is-mas-info-onlygames span {
    color: var(--color-og-brand);
    border-top-color: var(--color-og-brand);
}

/* Torneo destacado (torneo-destacado.php) eliminada (2026-09-03) —
   torneo-destacado.php se borró, mismo motivo que "Próximos torneos". */

/* FIN Fase 2 — Resto de cards */

/* =====================================================================
   FASE 3 (arranca acá) — Banners de página interior (campeonatos,
   noticias, galeria, servicios — nosotros salió del grupo el 2026-09-03
   al reescribirse estático, ver "Página Nosotros" más abajo). Sin cambios
   de markup en las que quedan. Comparten estructura idéntica (fondo +
   overlay + container) y ya estaban en un navy oscuro (#002b3f /
   rgba(0,45,60,...)) — no rotas como las cards blancas, solo con colores
   sueltos en vez de los tokens. Un solo bloque agrupado por eso. No se
   tocaron los banners de
   single-fotos.php/single-videos.php/servicio-detalle (page-servicios.php,
   vista de un servicio) — esos ya estaban en style-theme.css de un
   trabajo previo, con su propio degradado ya resuelto; quedan para otra
   pasada si hace falta, no estaban rotos.
   ===================================================================== */

/* .main-banner-nosotros / .is-overlay-nosotros / .is-titulo-nosotros
   sacados de estos grupos (2026-09-03, page-nosotros.php reescrito
   estático); .main-servicios-page/.is-titulo-servicios salieron el mismo
   día al reescribir page-servicios.php; .main-banner-campeonatos/
   .is-overlay-campeonatos/.is-titulo-campeonatos salieron el 2026-09-03
   al reescribir page-campeonatos.php; .main-banner-galeria/
   .is-titulo-galeria-page salieron el 2026-09-04 al reescribir
   page-galeria.php (mismo motivo: sin banner con foto en el nuevo
   diseño) — el resto (noticias) sigue con este banner viejo sin
   cambios. */
.main-banner-noticias {
    background-color: var(--color-og-bg);
}

.is-titulo-noticias-page {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-og-ink);
}

/* =====================================================================
   Página Home (index.php) — Fase 2 v2 (2026-09-03), reescrita desde cero
   contra _static-preview/home.html (que reconstruye Home.tsx línea por
   línea) — reemplaza el bloque "Banner home" original completo (hero con
   foto + "accesos"/cards de servicios + clientes + carousel de galería
   oculto). Layout con grid/utilidades Bootstrap (container/row/col-
   d-flex/gap-, tokens Liquid Glass de Fase 1 sin tocar.

   TEMA ESTÁTICO (2026-09-03): todo el contenido de acá abajo (textos,
   nombres de sponsors/torneos/noticias, etc.) está HARDCODEADO — es el
   snapshot real de datos que tenía React al momento de escribir esto
   (home_hero/home_features/home_onlygames(+features)/home_sponsors/
   home_auspiciadores/campeonatos_public/news/gallery_albums en el
   postgrest de onlygolf-web), no contenido inventado. No hay get_field()
   en ningún lado de esta página. Fotos/logos son placeholders (rayas
   diagonales, .is-ph-photo) — no hay archivos reales disponibles todavía
   para sponsors/torneos/noticias/galería (viven como blobs en el Postgres
   de la OTRA app). El día que se resuelva la "Fase de wiring ACF" (ver
   plan), esto vuelve a leer campos reales sin tocar el markup.
   Confirmado visual: _static-preview/home.html -> localhost:5180/.
   ===================================================================== */

.is-ph-photo {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg, #1a2033, #1a2033 10px, #12182b 10px, #12182b 20px);
}

.is-home-eyebrow-center,
.is-home-eyebrow-dim {
    color: var(--color-og-ink-dim);
}

.is-home-eyebrow-center {
    display: block;
    text-align: center;
}

.is-home-section-titulo {
    color: var(--color-og-ink);
    font-size: 30px; /* text-3xl */
    margin-bottom: 32px; /* mb-8 */
}

/* Header de sección con CTA a la derecha del título (2026-09-09, ver
   plan sección 76) — hoy solo Torneos ("Ver torneos" -> /campeonatos/),
   el título deja su margin-bottom acá y el h2 pasa a mb-0. */
.is-home-section-header .is-home-section-titulo {
    margin-bottom: 0;
}

.is-home-section-cta {
    display: inline-block;
    color: var(--color-og-ink-dim);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 9999px;
    padding: 8px 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}

.is-home-section-cta:hover {
    color: var(--color-og-ink);
    border-color: rgba(255, 255, 255, .30);
    text-decoration: none;
}

/* CTA compartido — mismo tratamiento que .btn-primary pero rounded-full
   px-5 py-2.5 (más chico), como PillButton/CTAs sueltos de Home.tsx. */
.is-home-cta {
    display: inline-block;
    border-radius: 9999px;
    padding: 12px 24px; /* px-6 py-3, PillButton real */
    background-color: var(--color-og-brand);
    color: var(--color-og-ink);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: filter .2s ease;
}

.is-home-cta:hover {
    filter: brightness(1.1);
    color: var(--color-og-ink);
    text-decoration: none;
}

.is-home-cta-sm {
    display: block;
    text-align: center;
    border-radius: 9999px;
    padding: 10px 16px; /* px-4 py-2.5, CTA de TournamentCard */
    background-color: var(--color-og-brand);
    color: var(--color-og-ink);
    text-decoration: none;
    transition: filter .2s ease;
}

.is-home-cta-sm:hover {
    filter: brightness(1.1);
    color: var(--color-og-ink);
    text-decoration: none;
}

/* --- Hero --- */
.main-home-hero {
    padding: 80px 0 64px; /* pt-20 pb-16 */
}

.is-home-hero-titulo {
    color: var(--color-og-ink);
    font-size: 48px; /* text-5xl */
}

@media (min-width: 640px) {
    .is-home-hero-titulo {
        font-size: 60px; /* sm:text-6xl */
    }
}

.is-home-hero-subtitulo {
    color: var(--color-og-ink-dim);
    max-width: 36rem;
    margin-top: 20px; /* mt-5 */
}

/* Widget de leaderboard en vivo — SOLO visual acá (ver nota arriba del
   bloque): depende de una API externa (OnlyGolf Torneos) que ni React
   resuelve vía site_settings, mucho menos WP. Torneo/estado reales
   (Final PGA Latam 2026, finalizado); filas de jugadores de ejemplo. */
.is-home-leaderboard {
    border-radius: 16px;
    padding: 16px;
}

.is-home-leaderboard-head {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

/* Huérfana (2026-09-09) — el <div is-ph-photo is-home-leaderboard-logo>
   que la usaba se sacó de index.php (sin dato real posible, ver nota ahí).
   No se borra por si en algún momento hay un logo real que mostrar acá. */
.is-home-leaderboard-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 4px;
}

.is-home-leaderboard-badge {
    align-self: flex-end;
    background-color: var(--color-og-brand);
    color: var(--color-og-ink);
    border-radius: 9999px;
    padding: 2px 8px;
    font-size: 10px;
    width: fit-content;
}

.is-home-leaderboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.is-home-leaderboard-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.is-home-leaderboard-list .og-stat-number:first-child {
    width: 20px;
    color: var(--color-og-ink-dim);
}

.is-home-leaderboard-list span:nth-child(2) {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-og-ink);
}

.is-home-leaderboard-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    color: var(--color-og-ink-dim);
    text-decoration: none;
}

.is-home-leaderboard-link:hover {
    color: var(--color-og-ink);
}

/* --- Secciones genéricas (container + padding-bottom) --- */
.main-home-features,
.main-home-sponsors,
.main-home-torneos,
.main-home-onlygames,
.main-home-noticias {
    padding-bottom: 80px; /* pb-20 */
}

.main-home-galeria {
    padding-bottom: 96px; /* pb-24, última sección */
}

/* --- Qué hacemos --- */
.is-home-feature-card {
    display: block; /* ahora es <a>, link a /servicios/{slug}/ (wiring 2026-09-07) */
    border-radius: 16px; /* rounded-2xl */
    padding: 20px;        /* p-5 */
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.is-home-feature-card:hover {
    color: inherit;
    text-decoration: none;
}

.is-home-feature-titulo {
    color: var(--color-og-ink);
    font-size: 18px; /* text-lg */
}

.is-home-feature-desc {
    color: var(--color-og-ink-dim);
    font-size: 14px; /* text-sm */
    margin-top: 8px;
}

/* --- Sponsors / Auspiciadores (misma caja BLANCA a propósito — un logo
   de sponsor necesita fondo claro fijo sin importar el tema oscuro del
   sitio, no es un error). --- */
.is-home-sponsor-box {
    background-color: #fff;
    border-radius: 16px;
    padding: 24px 32px; /* py-6 px-8 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 40px; /* gap-x-10 */
    row-gap: 24px;     /* gap-y-6 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 4px 6px -4px rgba(0, 0, 0, .3);
}

.is-home-sponsor-ph {
    width: 120px;
    height: 47px; /* site_settings.sponsor_logo_height real = 47 */
    background: repeating-linear-gradient(45deg, #ddd, #ddd 6px, #ccc 6px, #ccc 12px);
    border-radius: 4px;
}

/* Auspiciadores real (general_home_colaboradores, wiring 2026-09-04) —
   mismo tratamiento que Sponsors (Home) y Clientes (Nosotros), los 3
   comparten esta clase. Alto real original (site_settings.sponsor_logo_height)
   era 47px — agrandado a 64px a pedido del cliente (2026-09-09, ver plan
   sección 76), desviación explícita del dato de React. Ancho automático
   porque son logos reales, no una caja pareja. */
.is-home-sponsor-logo {
    height: 64px;
    width: auto;
    object-fit: contain;
}

/* --- Torneos --- */
.is-home-tabs {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 4px;
    gap: 4px;
}

.is-home-tab {
    border: none;
    background: transparent;
    border-radius: 9999px;
    padding: 8px 20px; /* py-2 px-5 */
    color: var(--color-og-ink-dim);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.is-home-tab:hover {
    color: var(--color-og-ink);
}

.is-home-tab.is-active {
    background-color: var(--color-og-brand);
    color: var(--color-og-ink);
}

.is-home-tcard {
    position: relative;
    border-radius: 16px; /* rounded-2xl */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.is-home-tcard-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: rgba(255, 255, 255, .05);
}

/* <img> real (Campeonatos) — Home solo usaba el placeholder .is-ph-photo,
   que ya trae su propio width/height 100%; un <img> real necesita esto
   explícito para llenar el contenedor igual. */
.is-home-tcard-photo > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.is-home-tcard-accent {
    position: absolute;
    inset: 0;
}

/* Logo de club — círculo blanco arriba a la derecha, mismo w-[54px]
   h-[54px] real de TournamentCard.tsx. Agregado acá al reusar la card
   para Campeonatos (2026-09-03) — Home no lo necesitaba todavía. */
.is-home-tcard-logo {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 54px;
    height: 54px;
    border-radius: 9999px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .4);
}

.is-home-tcard-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.is-home-tcard-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(6, 7, 10, .9) 100%);
}

.is-home-tbadge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    border-radius: 9999px;
    padding: 4px 12px; /* py-1 px-3 */
}

.is-home-tcard-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 16px;
}

.is-home-tcard-titulo {
    color: var(--color-og-ink);
    font-size: 24px; /* text-2xl */
}

.is-home-tcard-cta-wrap {
    padding: 16px;
    margin-top: auto;
}

/* Fecha del torneo — reemplaza los chips de servicios relacionados
   (2026-09-09, ver plan sección 76): mismo slot entre la foto y el CTA
   "Web del evento", en la card compartida entre Home y Campeonatos.
   Texto libre (campeonatos_item_fecha), sin parsear. */
.is-home-tcard-fecha {
    padding: 16px 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-og-ink-dim);
}

.is-home-tcard-fecha i {
    color: var(--color-og-brand);
    font-size: 12px;
}

/* --- OnlyGames --- */
.is-home-onlygames-card {
    border-radius: 24px; /* rounded-3xl */
    padding: 32px;        /* p-8 */
}

@media (min-width: 640px) {
    .is-home-onlygames-card {
        padding: 48px; /* sm:p-12 */
    }
}

.is-home-onlygames-heading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
}

@media (min-width: 640px) {
    .is-home-onlygames-heading-row {
        gap: 32px; /* sm:gap-8 */
    }
}

/* Huérfana (2026-09-09) — los 2 <div is-ph-photo is-home-onlygames-logo>
   que la usaban se sacaron de index.php (confirmado sin dato real
   posible contra api.home_onlygames.image_left_data/image_right_data
   del postgrest de onlygolf-web, ambos vacíos también ahí). No se borra
   por si en algún momento hay un logo real que mostrar a cada lado. */
.is-home-onlygames-logo {
    width: 96px;
    height: 48px; /* h-12 */
    border-radius: 4px;
}

@media (min-width: 640px) {
    .is-home-onlygames-logo {
        height: 64px; /* sm:h-16 */
    }
}

.is-home-onlygames-heading {
    color: var(--color-og-ink);
    font-size: 36px; /* text-3xl */
}

@media (min-width: 640px) {
    .is-home-onlygames-heading {
        font-size: 48px; /* sm:text-4xl — ojo, distinto de text-5xl del hero */
    }
}

.is-home-onlygames-body {
    color: var(--color-og-ink-dim);
    max-width: 36rem;
    margin: 16px auto 0;
}

.is-home-onlygames-features {
    margin-top: 32px;
}

.is-home-onlygames-feature-titulo {
    color: var(--color-og-ink);
    font-size: 16px; /* text-base */
    margin-bottom: 6px;
    padding-left: 8px;
}

.is-home-onlygames-feature-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .05);
}

.is-home-onlygames-feature-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* demo_cards real (wiring 2026-09-04) — demo_card_descrption (texto) y
   demo_url_card (URL, campo nuevo) no tenían slot en el diseño hardcodeado
   original, que solo tenía título+foto. */
.is-home-onlygames-feature-desc {
    color: var(--color-og-ink-dim);
    font-size: 14px;
    margin-top: 8px;
    padding-left: 8px;
}

.is-home-onlygames-feature-link {
    display: inline-block;
    color: var(--color-og-ink-dim);
    margin-top: 8px;
    padding-left: 8px;
    text-decoration: none;
    transition: color 0.15s ease;
}

.is-home-onlygames-feature-link:hover {
    color: var(--color-og-ink);
    text-decoration: none;
}

.is-home-onlygames-cta-wrap {
    margin-top: 32px;
}

/* --- Noticias / Galería --- */
.is-home-ncard {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.is-home-ncard:hover {
    color: inherit;
    text-decoration: none;
}

.is-home-ncard-photo {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.is-home-ncard-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.is-home-ncard-body {
    padding: 16px;
}

.is-home-ncard-titulo {
    color: var(--color-og-ink);
    font-size: 20px; /* text-xl */
    margin-top: 8px;
}

.is-home-ncard-excerpt {
    color: var(--color-og-ink-dim);
    font-size: 14px;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.is-home-acard {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.is-home-acard:hover {
    color: inherit;
    text-decoration: none;
}

.is-home-acard-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: var(--color-og-card-bg);
}

.is-home-acard-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.is-home-acard-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(6, 7, 10, .9) 100%);
}

/* Galería real (wiring 2026-09-04) — badge VIDEO, mismo tratamiento que
   .is-galeria-card-badge del listado real de Galería. */
.is-home-acard-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    border-radius: 9999px;
    padding: 4px 12px;
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
}

.is-home-acard-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 16px;
}

.is-home-acard-titulo {
    color: var(--color-og-ink);
    font-size: 18px; /* text-lg */
    margin-top: 4px;
}

/* FIN Página Home */

/* =====================================================================
   Página Contacto (page-contacto.php) — Fase 2 v2 (2026-09-03,
   reconciliación contra _static-preview/contacto.html, que reconstruye
   Contacto.tsx línea por línea). Reemplaza el bloque original completo
   (banner con foto + columnas 5/7 + info como texto suelto): ahora sin
   banner (hero de texto centrado, max-w-4xl), dos columnas IGUALES, ambas
   .og-glass. Confirmado visual contra localhost:5180/contacto.
   ===================================================================== */

.page-contacto {
    position: relative;
    z-index: 10;
    max-width: 56rem; /* max-w-4xl = 56rem, React real */
    margin: 0 auto;
    padding: 80px 16px 96px; /* pt-20 pb-24 px-4 */
}

@media (min-width: 640px) {
    .page-contacto {
        padding-left: 24px; /* sm:px-6 */
        padding-right: 24px;
    }
}

.is-contacto-eyebrow {
    display: block;
    color: var(--color-og-ink-dim);
    text-align: center;
}

.is-contacto-titulo {
    color: var(--color-og-ink);
    text-align: center;
    font-size: 36px; /* text-4xl */
    margin: 16px 0 48px; /* mt-4 mb-12 */
}

@media (min-width: 640px) {
    .is-contacto-titulo {
        font-size: 48px; /* sm:text-5xl */
    }
}

.is-contacto-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px; /* gap-8 */
}

@media (min-width: 640px) {
    .is-contacto-grid {
        grid-template-columns: 1fr 1fr; /* sm:grid-cols-2 — IGUALES, no 5/7 */
    }
}

/* Misma card para info Y formulario — a propósito, es lo que hace React
   (las dos usan exactamente "og-glass rounded-3xl p-8 space-y-4"). */
.is-contacto-card {
    border-radius: 24px; /* rounded-3xl */
    padding: 32px;        /* p-8 */
}

.is-contacto-card > * + * {
    margin-top: 16px; /* space-y-4 */
}

.is-contacto-card-titulo {
    color: var(--color-og-ink);
    font-size: 20px; /* text-xl */
}

.is-contacto-dato {
    font-size: 14px; /* text-sm */
    color: var(--color-og-ink-dim);
    margin: 0;
}

.is-contacto-dato-label {
    color: color-mix(in srgb, var(--color-og-ink) 70%, transparent);
}

/* CTA compartido por el link de WhatsApp y el botón de submit — mismas
   clases en React para los dos (rounded-full px-5 py-2.5 bg-brand). */
.is-contacto-cta {
    display: inline-block;
    border-radius: 9999px;
    padding: 10px 20px; /* py-2.5 px-5 */
    background-color: var(--color-og-brand);
    color: var(--color-og-ink);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.is-contacto-cta:hover {
    filter: brightness(1.1);
    color: var(--color-og-ink);
    text-decoration: none;
}

/* Google Maps / Waze — sin equivalente en Contacto.tsx, se mantienen
   como funcionalidad real del negocio (ver nota en page-contacto.php),
   restyleados al lenguaje de card en vez de fila de íconos suelta. */
.is-contacto-mapas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.is-contacto-mapa-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 9999px;
    background-color: color-mix(in srgb, var(--color-og-card-bg) 70%, transparent);
    border: 1px solid var(--color-og-line);
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.is-contacto-mapa-link:hover {
    border-color: color-mix(in srgb, var(--color-og-ink) 30%, transparent);
    background-color: color-mix(in srgb, var(--color-og-card-bg) 90%, transparent);
    text-decoration: none;
}

.is-contacto-mapa-link img {
    width: 18px;
    height: 18px;
}

.is-contacto-mapa-link span {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-og-ink);
}

/* --- Formulario --- */
.is-contacto-field-wrap {
    display: block;
}

.is-contacto-field-label {
    display: block;
    font-size: 12px; /* text-xs — pisa el 11px por defecto de .og-eyebrow */
    color: var(--color-og-ink-dim);
    margin-bottom: 4px; /* mb-1 */
}

.is-contacto-field {
    width: 100%;
    border-radius: 8px; /* rounded-lg */
    background-color: rgba(255, 255, 255, .05); /* bg-white/5 */
    border: 1px solid rgba(255, 255, 255, .10); /* border-white/10 */
    padding: 8px 12px; /* py-2 px-3 */
    font-family: 'Teva Sans'; /* cuerpo, no display — mismo criterio que el footer */
    font-size: 14px; /* text-sm */
    color: var(--color-og-ink);
    outline: none;
    transition: border-color 0.2s ease;
}

.is-contacto-field:focus {
    border-color: rgba(255, 255, 255, .30); /* focus:border-white/30 */
}

textarea.is-contacto-field {
    resize: vertical;
}

/* Honeypot: fuera de vista para humanos, sigue en el DOM/tab-order
   normal para no ser obviamente un honeypot para bots simples. */
.is-honeypot-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.is-contacto-field-error {
    font-size: 12px; /* text-xs */
    color: var(--color-og-live);
    margin: 0;
}

.is-contacto-success {
    font-size: 14px; /* text-sm */
    color: var(--color-og-positive);
    margin: 0;
}

/* "Resto de la página Nosotros" (main-content-nosotros, is-linea-sup,
   is-titulo-que-hacemos, is-texto-que-hacemos, main-content-nosotros-
   clientes, is-overlay-clientes, is-titulo-nosotros-clientes) eliminado
   (2026-09-03) — page-nosotros.php se reescribió estático, nueva CSS más
   abajo ("Página Nosotros"). Verificado con grep: ningún otro template
   usaba estas clases. */

/* =====================================================================
   Página Nosotros (page-nosotros.php) — reescrita desde cero (2026-09-03)
   contra _static-preview/nosotros.html (que reconstruye Nosotros.tsx
   línea por línea) — reemplaza el banner con foto + cards de servicios
   grandes/chicas + fila de clientes con overlay. Layout con Bootstrap
   (container/row/col-*), tokens Liquid Glass de Fase 1 sin tocar.

   TEMA ESTÁTICO (2026-09-03, ver plan sección 41): sin ACF. Contenido =
   snapshot real de about_page/services/about_team_members/home_sponsors
   (postgrest de onlygolf-web). Nosotros.tsx (el código) no cambió desde
   la versión anterior de este preview — lo que cambió fue el contenido
   real detrás, que esa versión anterior no había consultado en vivo.
   team_photo_url real = null (sin foto en la card "Equipo") y el
   photo_url de un miembro del equipo (José Luis Rojas) también es null
   (sin foto en su card) — ambos huecos replicados tal cual, sin
   placeholder donde React no pone nada. Confirmado visual:
   _static-preview/nosotros.html -> localhost:5180/nosotros.
   ===================================================================== */

.page-nosotros {
    background-color: transparent;
}

.main-nosotros-intro {
    padding: 80px 0 64px; /* pt-20 pb-16 */
    text-align: left; /* intro_text_align real = left */
}

.is-nosotros-eyebrow {
    color: var(--color-og-ink-dim);
}

.is-nosotros-heading {
    color: var(--color-og-ink);
    font-size: 48px; /* text-5xl, sin variante sm: acá (a diferencia del hero de Home) */
    margin-top: 16px; /* mt-4 */
}

.is-nosotros-intro-text {
    color: var(--color-og-ink-dim);
    max-width: 42rem; /* max-w-2xl */
    margin-top: 20px; /* mt-5 */
}

.main-nosotros-servicios,
.main-nosotros-equipo,
.main-nosotros-miembros {
    padding-bottom: 80px; /* pb-20 */
}

.main-nosotros-clientes {
    padding-bottom: 96px; /* pb-24, última sección */
}

.is-nosotros-section-titulo {
    color: var(--color-og-ink);
    font-size: 30px; /* text-3xl */
    margin-bottom: 32px; /* mb-8 */
}

/* --- Servicios (teaser, grid-cols-2 sm:grid-cols-4 gap-3) --- */
.is-nosotros-scard {
    display: flex;
    flex-direction: column;
    height: 100%; /* llena la columna estirada por el grid (todas las cards de
        la misma fila quedan igual de altas, sin importar el largo del texto
        de cada una — bug reportado 2026-09-08) */
    border-radius: 12px; /* rounded-xl */
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.is-nosotros-scard:hover {
    color: inherit;
    text-decoration: none;
}

.is-nosotros-scard-photo {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.is-nosotros-scard-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.is-nosotros-scard:hover .is-nosotros-scard-photo img {
    transform: scale(1.05);
}

.is-nosotros-scard-body {
    padding: 8px 12px; /* py-2 px-3 */
    display: flex;
    flex-direction: column;
    flex: 1; /* ocupa el resto de la card (la foto ya tiene aspect-ratio fijo) */
}

.is-nosotros-scard-titulo {
    color: var(--color-og-ink);
    font-size: 14px; /* text-sm */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.is-nosotros-scard-desc {
    color: var(--color-og-ink-dim);
    font-size: 12px; /* text-xs */
    margin-top: 4px; /* mt-1 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- "Equipo" (card grande única, max-w-4xl) --- */
.main-nosotros-equipo-wrap {
    max-width: 56rem; /* max-w-4xl */
    margin: 0 auto;
}

.is-nosotros-team-card {
    border-radius: 24px; /* rounded-3xl */
    padding: 32px;        /* p-8 */
    text-align: center;
}

@media (min-width: 640px) {
    .is-nosotros-team-card {
        padding: 48px; /* sm:p-12 */
    }
}

.is-nosotros-team-photo {
    width: 100%;
    border-radius: 16px; /* rounded-2xl */
    margin-bottom: 24px; /* mb-6 */
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.is-nosotros-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.is-nosotros-team-heading {
    color: var(--color-og-ink);
    font-size: 30px; /* text-3xl */
}

.is-nosotros-team-body {
    color: var(--color-og-ink-dim);
    margin-top: 16px; /* mt-4 */
}

/* --- Miembros del equipo (grid-cols-2 sm:grid-cols-4 gap-4) --- */
.is-nosotros-member {
    border-radius: 12px; /* rounded-xl */
    overflow: hidden;
}

.is-nosotros-member-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.is-nosotros-member-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.is-nosotros-member-body {
    text-align: center;
    padding: 12px 8px; /* py-3 px-2 */
}

.is-nosotros-member-nombre {
    color: var(--color-og-ink);
    font-size: 14px; /* text-sm */
    margin: 0;
}

.is-nosotros-member-rol {
    color: var(--color-og-ink-dim);
    font-size: 12px; /* text-xs */
    margin: 2px 0 0; /* mt-0.5 */
}

/* "Resto de Campeonatos" (.is-categorias-campeonatos, .main-card-
   campeonatos, .is-titulo-listado-campeonatos) eliminado (2026-09-03) —
   page-campeonatos.php se reescribió, filtro por año ahora es un <select>
   (ver "Página Campeonatos" más abajo), no una fila de links. */

/* =====================================================================
   Página Campeonatos (page-campeonatos.php) — RESKIN puro (2026-09-03),
   contra _static-preview/campeonatos.html. A diferencia de Home/Nosotros/
   Servicios, esta página SIGUE usando ACF (have_rows('campeonatos_item')
   — excepción documentada en el plan sección 41/44: con 138 campeonatos
   reales, hardcodear a mano no es viable). Solo cambia el lenguaje visual
   — hero sin foto + filtro + grid — reusando la card TournamentCard
   (.is-home-tcard-*, la misma familia que Home/Servicios) en vez del
   componente "poster" propio que había antes.

   Sin sync con el modelo de datos de OnlyGames/React (estados EN VIVO/
   FINALIZADO/PRÓXIMO desde una fuente externa) — el badge de la card
   muestra el AÑO real (campeonatos_item_anio), no un estado. Sin tabs de
   categoría (React: abierto/corporativo/fundación) — campeonatos_item no
   tiene ningún campo de categoría, se mantiene solo el filtro por año
   real que ya existía. "Ver todos/Ver menos" (paginación real existente,
   sin equivalente en React) se mantiene, con el mismo .btn.btn-primary
   de siempre.
   ===================================================================== */

.page-campeonatos {
    position: relative;
    z-index: 10;
    max-width: 72rem; /* max-w-6xl */
    margin: 0 auto;
    padding: 80px 16px 96px; /* pt-20 pb-24 px-4 */
}

@media (min-width: 640px) {
    .page-campeonatos {
        padding-left: 24px; /* sm:px-6 */
        padding-right: 24px;
    }
}

.is-campeonatos-heading {
    color: var(--color-og-ink);
    text-align: center;
    font-size: 36px; /* text-4xl */
    margin: 16px 0 40px; /* mt-4 mb-10 */
}

@media (min-width: 640px) {
    .is-campeonatos-heading {
        font-size: 48px; /* sm:text-5xl */
    }
}

.main-campeonatos-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px; /* gap-4 */
    margin-bottom: 40px; /* mb-10 */
}

.is-campeonatos-count {
    color: var(--color-og-ink-dim);
    font-size: 14px; /* text-sm */
    margin: 0;
}

/* Select de años — dropdown propio, no <select> nativo (2026-09-09,
   rediseño ver plan sección 76/78). La lista desplegable de un <select>
   nativo la pinta el sistema operativo — ningún navegador deja estilarla
   (border-radius, blur, .og-glass), así que un intento anterior (chevron
   SVG sobre el <select> mismo) solo arreglaba el trigger, no la lista.
   Acá trigger Y panel son ambos elementos reales .og-glass — mismo
   tratamiento visual que el resto del sitio (TournamentCard/NewsCard/
   AlbumCard/etc. ya usan .og-glass). JS mínimo (abrir/cerrar el panel,
   ver initCampeonatosYearSelect() en assets/js/app.js) — la navegación en
   sí son <a href> normales, sin JS de por medio. */
.is-campeonatos-yearpicker {
    position: relative;
    display: inline-block;
}

.is-campeonatos-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 9999px; /* rounded-full */
    padding: 10px 20px; /* px-5 py-2.5 */
    font-size: 14px; /* text-sm */
    font-family: inherit;
    color: var(--color-og-ink);
    cursor: pointer;
    transition: border-color .15s ease;
}

.is-campeonatos-select-trigger:hover,
.is-campeonatos-select-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, white 30%, transparent);
}

.is-campeonatos-select-chevron {
    flex-shrink: 0;
    color: var(--color-og-ink);
    transition: transform .2s ease;
}

.is-campeonatos-select-trigger[aria-expanded="true"] .is-campeonatos-select-chevron {
    transform: rotate(180deg);
}

.is-campeonatos-select-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: 200px;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    border-radius: 16px; /* card, no pill — es una lista, no un botón */
    list-style: none;
}

.is-campeonatos-select-list[hidden] {
    display: none;
}

.is-campeonatos-select-option {
    display: block;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--color-og-ink-dim);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.is-campeonatos-select-option:hover {
    background-color: color-mix(in srgb, white 10%, transparent);
    color: var(--color-og-ink);
    text-decoration: none;
}

.is-campeonatos-select-option.is-active {
    background-color: var(--color-og-brand);
    color: #fff;
    font-weight: 600;
}

.is-campeonatos-vacio {
    color: var(--color-og-ink-dim);
    text-align: center;
}

/* Sección "Experiencias" (page-servicios.php) eliminada (2026-09-03) —
   se sacó del listado nuevo a propósito (sin equivalente real poblado,
   duplicaba Torneos de Home — ver _static-preview/servicios-listado.html). */

/* .is-paginador-link/.is-paginador-arrow (base) siguen en pie — página-
   noticias.php (paginador-noticias) los sigue usando (grep confirmado),
   no forman parte de este cambio. Los overrides .main-fotos-galeria/
   .main-videos-galeria salieron de acá: page-galeria.php ya no genera
   esos wrappers (ver "Página Galería" abajo, pager nuevo con clases
   propias .is-galeria-pager-*). */
.is-paginador-link,
.is-paginador-arrow {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-og-ink-dim);
}

.is-paginador-link.is-active,
.is-paginador-link:hover,
.is-paginador-arrow:hover {
    color: var(--color-og-brand);
}

/* =====================================================================
   Página Galería (page-galeria.php / single-fotos.php / single-videos.php)
   Reescrito (2026-09-04) contra _static-preview/galeria.html,
   single-fotos.html y single-videos.html — RESKIN puro, misma excepción
   ACF y mismo criterio que Campeonatos: sigue usando WP_Query sobre los
   CPT reales fotos/videos y los campos ACF ya existentes
   (fotos_portada/fotos_imagenes/fotos_autor, videos_tipo/videos_enlace/
   videos_portada_*, categorías vía general_fotos_categoria_1/2/3 y
   general_videos_categoria_1/2/3) — 1.389 fotos y 88 videos reales,
   hardcodear a mano no es viable. Sin banner con foto (mismo criterio
   que Campeonatos/Contacto/Nosotros/Servicios: hero centrado
   og-eyebrow+og-heading). Reemplaza por completo el banner/tabs/cards/
   paginador/lightbox/single-videos viejos que vivían acá arriba.

   SIN LIGHTBOX (single-fotos.php) — decisión ya tomada: AlbumDetail.tsx
   no tiene click-to-open ni modal, grid plano con object-cover. El
   #og-lightbox (modal + navegación por teclado) se elimina entero junto
   con su CSS, no se porta.

   single-videos.php NO agrupa videos en "álbum" (React sí, WP no —
   videos es un CPT de posts individuales) — se aplica el lenguaje
   visual del iframe embebido de AlbumDetail.tsx a UN video.
   ===================================================================== */

.page-galeria,
.single-fotos,
.single-videos {
    position: relative;
    z-index: 10;
    max-width: 72rem;
    margin: 0 auto;
    padding: 80px 16px 96px;
}

@media (min-width: 640px) {
    .page-galeria,
    .single-fotos,
    .single-videos {
        padding-left: 24px;
        padding-right: 24px;
    }
}

.is-galeria-heading {
    color: var(--color-og-ink);
    text-align: center;
    font-size: 36px;
    margin: 16px 0 40px;
}

@media (min-width: 640px) {
    .is-galeria-heading {
        font-size: 48px;
    }
}

.is-galeria-vacio {
    color: var(--color-og-ink-dim);
    text-align: center;
}

/* Filtro — tabs Fotos/Videos + select de categoría ---------------------*/

.main-galeria-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 40px;
}

.is-galeria-tabs {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 4px;
    gap: 4px;
}

.is-galeria-tab {
    border: none;
    background: transparent;
    border-radius: 9999px;
    padding: 8px 20px;
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--color-og-ink-dim);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.is-galeria-tab:hover {
    color: var(--color-og-ink);
    text-decoration: none;
}

.is-galeria-tab.is-active {
    background-color: var(--color-og-brand);
    color: #fff;
}

.is-galeria-select {
    border-radius: 9999px;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--color-og-ink);
    background-color: transparent;
    border: 1px solid color-mix(in srgb, white 12%, transparent);
    outline: none;
}

.is-galeria-select option {
    background-color: var(--color-og-surface);
    color: var(--color-og-ink);
}

/* Card de álbum/video (AlbumCard) ---------------------------------------*/

.is-galeria-card {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
}

.is-galeria-card:hover {
    text-decoration: none;
}

.is-galeria-card-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: var(--color-og-card-bg);
}

.is-galeria-card-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.is-galeria-card-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(6, 7, 10, 0.9) 100%);
}

.is-galeria-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    border-radius: 9999px;
    padding: 4px 12px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
}

.is-galeria-card-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 16px;
}

.is-galeria-card-meta {
    color: rgba(255, 255, 255, 0.7);
}

.is-galeria-card-titulo {
    font-size: 18px;
    color: #fff;
    margin: 4px 0 0;
}

/* Pager numerado — reusado en page-galeria.php y single-fotos.php ------*/

.is-galeria-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 48px;
}

.is-galeria-pager-item,
.is-galeria-pager-arrow {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-og-ink-dim);
    text-decoration: none;
    transition: color 0.15s ease;
}

.is-galeria-pager-item:hover,
.is-galeria-pager-arrow:hover {
    color: var(--color-og-ink);
    text-decoration: none;
}

.is-galeria-pager-item.is-active {
    background-color: var(--color-og-brand);
    color: #fff;
}

.is-galeria-pager-arrow.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* single-fotos.php / single-videos.php — encabezado compartido ---------*/

.is-fotos-top {
    text-align: center;
    margin-bottom: 48px;
}

.is-fotos-volver {
    color: var(--color-og-ink-dim);
    text-decoration: none;
    transition: color 0.15s ease;
}

.is-fotos-volver:hover {
    color: var(--color-og-ink);
    text-decoration: none;
}

.is-fotos-meta {
    color: var(--color-og-ink-dim);
    margin-top: 12px;
}

.is-fotos-titulo {
    color: var(--color-og-ink);
    font-size: 36px;
    margin-top: 16px;
}

.is-fotos-autor {
    color: var(--color-og-ink-dim);
    font-family: 'Teva Sans';
    font-size: 14px;
    margin-top: 8px;
}

/* single-fotos.php — grid plano, SIN lightbox (ver nota arriba) --------*/

.is-fotos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 640px) {
    .is-fotos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.is-fotos-grid > div {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
}

.is-fotos-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* single-videos.php — embed + relacionados ------------------------------*/

.is-video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05);
}

.is-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.is-video-embed-vertical {
    max-width: 420px;
    margin: 0 auto;
    border-radius: 16px;
    padding: 24px 0;
    display: flex;
    justify-content: center;
}

.is-video-relacionados-titulo {
    color: var(--color-og-ink);
    font-size: 20px;
    margin: 48px 0 24px;
}

.is-video-rcard {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
}

.is-video-rcard:hover {
    text-decoration: none;
}

.is-video-rcard-photo {
    position: relative;
    aspect-ratio: 16 / 9;
}

.is-video-rcard-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.is-video-rcard-body {
    padding: 16px;
}

.is-video-rcard-titulo {
    font-size: 16px;
    color: #fff;
    margin: 4px 0 0;
}

/* =====================================================================
   Filtro de categorías (sidebar-noticias.php — barra arriba de /noticias/
   y single-post.php). Fondo claro con texto negro en el original.
   ===================================================================== */

.page-noticias-cat {
    background-color: var(--color-og-surface);
}

.page-noticias-cat .is-cat a,
.page-noticias-cat .is-cat a:visited {
    color: var(--color-og-ink-dim);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.04em;
    border-right-color: var(--color-og-line);
}

.page-noticias-cat .is-cat a:hover {
    color: var(--color-og-ink);
}

.page-noticias-cat .is-cat a.active {
    color: var(--color-og-brand);
}

.page-noticias-cat .is-select .is-subtitulo {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-og-brand);
}

/* =====================================================================
   Single Post (artículo de noticia — single-post.php)
   ===================================================================== */

/* FASE 3 (2026-09-01): todo este bloque (single-post.php, artículo de
   noticia) seguía blanco — no se había tocado en ninguna sesión previa,
   a diferencia del banner/listado de noticias que ya estaban resueltos.
   Retiñe en el lugar, mismo criterio que el resto: Oswald para
   títulos/eyebrows, 'Teva Sans' para el cuerpo del artículo. */
.is-articulo-noticia {
    background-color: var(--color-og-card-bg);
    border-radius: 16px;
    padding: 28px 32px 24px;
}

/* Categoría badge */
.is-articulo-noticia .is-categoria {
    display: inline-block;
    background-color: var(--color-og-brand);
    color: var(--color-og-ink);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 9999px;
    margin-bottom: 14px;
}

/* Título */
.is-titulo-noticia-single {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1;
    color: var(--color-og-ink);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 14px;
}

/* Subtítulo / extracto */
.is-subtitulo-noticia-single {
    font-family: 'Teva Sans';
    font-size: 17px;
    line-height: 1.55;
    color: var(--color-og-ink-dim);
    margin: 0 0 22px;
    border-left: 3px solid var(--color-og-brand);
    padding-left: 14px;
}

/* Figura / imagen destacada */
.is-figura-noticia-single {
    margin: 0 0 28px;
}

.is-imagen-noticia-single {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 12px;
}

/* Crédito foto */
.is-credito-foto {
    font-family: 'Teva Sans';
    font-size: 12px;
    color: var(--color-og-ink-dim);
    text-align: right;
    padding: 5px 0 0;
    margin: 0;
}

/* Contenido wysiwyg */
.is-contenido-noticia-single {
    font-family: 'Teva Sans';
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-og-ink-dim);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-og-line);
}

/* Pie del artículo */
.is-pie-noticia-single {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-og-line);
    margin-bottom: 16px;
}

.is-fecha-noticia-single {
    font-family: 'Teva Sans';
    font-size: 13px;
    color: var(--color-og-ink-dim);
    margin-right: auto;
}

.is-credito-noticia-footer {
    font-family: 'Teva Sans';
    font-size: 12px;
    color: var(--color-og-ink-dim);
}

/* Tags */
.is-tags-noticia {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    padding-top: 4px;
}

.is-tag-noticia {
    display: inline-block;
    background-color: transparent;
    color: var(--color-og-ink-dim);
    font-family: 'Teva Sans';
    font-size: 11px;
    padding: 3px 10px;
    text-decoration: none;
    border: 1px solid var(--color-og-line);
    border-radius: 9999px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.is-tag-noticia:hover {
    background-color: var(--color-og-brand);
    color: var(--color-og-ink);
    border-color: var(--color-og-brand);
    text-decoration: none;
}

/* Link externo */
.is-link-externo-noticia {
    padding: 18px 0 8px;
}

.is-boton-link-externo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-og-brand);
    color: var(--color-og-ink);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 11px 22px;
    border-radius: 9999px;
    transition: filter 0.2s ease;
}

.is-boton-link-externo:hover {
    filter: brightness(1.15);
    color: var(--color-og-ink);
    text-decoration: none;
}

/* Responsive single post */
@media (max-width: 767px) {
    .is-articulo-noticia {
        padding: 20px 16px 18px;
    }

    .is-titulo-noticia-single {
        font-size: 22px;
    }

    .is-subtitulo-noticia-single {
        font-size: 15px;
    }
}

/* =====================================================================
   Sidebar "Más noticias" (sidebar-post.php)
   ===================================================================== */

.sidebar-noticias-panel {
    background-color: var(--color-og-card-bg);
    border-radius: 16px;
    padding: 18px 16px 12px;
    margin-bottom: 20px;
}

.sidebar-noticias-titulo {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-og-ink);
    background-color: var(--color-og-brand);
    border-radius: 16px 16px 0 0;
    padding: 9px 16px;
    margin: -18px -16px 16px;
}

.sidebar-noticia-destacada {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-og-line);
    margin-bottom: 14px;
}

.sidebar-noticia-img-link {
    display: block;
    overflow: hidden;
    margin-bottom: 10px;
}

.sidebar-noticia-img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.sidebar-noticia-img-link:hover .sidebar-noticia-img {
    transform: scale(1.04);
    opacity: 1;
}

.sidebar-noticia-titulo-dest {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.sidebar-noticia-titulo-dest a {
    color: var(--color-og-ink);
    text-decoration: none;
}

.sidebar-noticia-titulo-dest a:hover {
    color: var(--color-og-brand);
    text-decoration: none;
}

.sidebar-leer-mas {
    display: inline-block;
    background-color: var(--color-og-brand);
    color: var(--color-og-ink);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 5px 14px;
    border-radius: 9999px;
    transition: filter 0.2s ease;
}

.sidebar-leer-mas:hover {
    filter: brightness(1.15);
    color: var(--color-og-ink);
    text-decoration: none;
}

.sidebar-noticias-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-noticias-lista li {
    border-bottom: 1px solid var(--color-og-line);
    padding: 9px 0;
}

.sidebar-noticias-lista li:last-child {
    border-bottom: none;
}

.sidebar-noticias-lista li a {
    font-family: 'Teva Sans';
    font-size: 13px;
    color: var(--color-og-ink-dim);
    text-decoration: none;
    line-height: 1.4;
    display: block;
    transition: color 0.2s;
}

.sidebar-noticias-lista li a:hover {
    color: var(--color-og-ink);
    text-decoration: none;
}

/* =====================================================================
   Auspiciadores (sidebar-auspiciadores.php)
   ===================================================================== */

.auspiciador-separador {
    width: 60px;
    height: 1px;
    background-color: var(--main-gris3);
    margin: 4px auto;
}

/* =====================================================================
   OnlyGames — botón video demo y modal
   ===================================================================== */

/* Botón "Ver demo en video" */
.is-mas-info-video {
    text-align: center;
    margin-top: 12px;
}

.is-btn-video-onlygames {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 2px solid #0075b8;
    color: #0075b8;
    font-family: 'Teva Sans bold';
    font-size: 16px;
    line-height: 1;
    padding: 10px 22px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.is-btn-video-onlygames:hover {
    background-color: #0075b8;
    color: #fff;
}

.is-btn-video-onlygames .fa-circle-play {
    font-size: 20px;
}

/* Modal overlay */
.og-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.og-video-modal.is-open {
    opacity: 1;
    visibility: visible;
}

/* Contenedor interno */
.og-video-modal-inner {
    position: relative;
    width: 100%;
    max-width: 900px;
}

/* Botón cerrar */
.og-video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    padding: 0;
    transition: opacity 0.2s;
}

.og-video-modal-close:hover {
    opacity: 1;
}

/* Player 16:9 */
.og-video-modal-player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background-color: #000;
    border-radius: 4px;
    overflow: hidden;
}

.og-video-modal-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 576px) {
    .og-video-modal-close {
        top: -34px;
        font-size: 28px;
    }
}

/* Cards "poster" de Campeonatos (.is-card-campeonatos y toda su familia)
   eliminadas (2026-09-03) — page-campeonatos.php se reescribió reusando
   la card TournamentCard (.is-home-tcard-*, ver "Página Campeonatos" más
   abajo) en vez de un componente propio. Esta era la última página que
   las usaba (confirmado por grep) — page-servicios.php ya no las usaba
   desde su propia reescritura. Las 4 clases "antiguas que ya no se
   usaban" (.is-card-campeonatos-link, etc., ocultas con display:none
   desde antes de esta ronda) se sacaron con el resto, ya no aplicaba
   ocultarlas si la card entera se borró. */

/* Servicio Detalle (/servicios/{slug}/) eliminado (2026-09-03) —
   page-servicios.php se reescribió estático contra
   _static-preview/servicio-detalle.html, CSS nueva en "Página Servicios"
   más abajo. */

/* =====================================================================
   Página Servicios (page-servicios.php) — reescrita desde cero
   (2026-09-03), las 2 ramas del mismo archivo: listado (sin slug, contra
   _static-preview/servicios-listado.html — PROPUESTA, sin equivalente en
   React) y detalle (con slug, contra _static-preview/servicio-detalle.html
   — reconstruye ServicioDetail.tsx línea por línea). Reemplaza banner con
   foto + cards grandes/chicas + "Experiencias" (listado) y banner con
   foto + descripción + campeonatos relacionados (detalle). onlygames.php
   YA NO SE INCLUYE desde acá (antes sí, para el banner grande) — el
   listado nuevo tiene su propio CTA chico reusando el mismo dato real de
   Home (home_onlygames). onlygames.php como archivo NO se tocó — sigue
   existiendo, pero ya no lo incluye ningún template (huérfano, no se
   borra por ahora).

   TEMA ESTÁTICO (2026-09-03, ver plan sección 41): sin ACF en ninguna
   rama. Contenido = snapshot real de services/service_features (postgrest
   de onlygolf-web). "Torneos relacionados" (detalle) no se renderiza —
   ningún servicio real tiene service_tournaments hoy, es el caso normal,
   no un estado de error. Confirmado visual: ambos previews ->
   localhost:5180 (detalle) / propuesta revisada y confirmada (listado).
   ===================================================================== */

.page-servicios {
    background-color: transparent;
}

/* --- Listado (sin slug) --- */
.main-servicios-hero {
    padding: 80px 0 64px; /* pt-20 pb-16 */
    text-align: center;
}

.is-servicios-heading {
    color: var(--color-og-ink);
    font-size: 48px; /* text-5xl */
    margin-top: 16px;
}

.is-servicios-intro-text {
    color: var(--color-og-ink-dim);
    max-width: 42rem; /* max-w-2xl */
    margin: 20px auto 0;
}

.main-servicios-grid {
    padding-bottom: 80px; /* pb-20 */
}

.is-servicios-lcard {
    display: block;
    border-radius: 16px; /* rounded-2xl */
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.is-servicios-lcard:hover {
    color: inherit;
    text-decoration: none;
}

.is-servicios-lcard-photo {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.is-servicios-lcard-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.is-servicios-lcard-body {
    padding: 20px; /* p-5 */
}

.is-servicios-lcard-titulo {
    color: var(--color-og-ink);
    font-size: 18px;
}

.is-servicios-lcard-desc {
    color: var(--color-og-ink-dim);
    font-size: 14px;
    margin-top: 8px;
}

.main-servicios-onlygames-cta {
    padding-bottom: 96px; /* pb-24, última sección */
}

.is-servicios-onlygames-card {
    border-radius: 24px; /* rounded-3xl */
    padding: 40px 32px;
    text-align: center;
}

.is-servicios-onlygames-heading {
    color: var(--color-og-ink);
    font-size: 30px;
    margin-top: 8px;
}

.is-servicios-onlygames-body {
    color: var(--color-og-ink-dim);
    max-width: 32rem;
    margin: 12px auto 0;
}

/* --- Detalle (/servicios/{slug}/) --- */
.main-servicio-detalle-header {
    max-width: 56rem; /* max-w-4xl */
    margin: 0 auto;
    padding: 80px 16px 48px; /* pt-20 pb-12 px-4 */
    text-align: center;
}

.is-servicio-detalle-heading {
    color: var(--color-og-ink);
    font-size: 36px; /* text-4xl */
    margin-top: 16px;
}

@media (min-width: 640px) {
    .is-servicio-detalle-heading {
        font-size: 48px; /* sm:text-5xl */
    }
}

.is-servicio-detalle-desc {
    color: var(--color-og-ink-dim);
    max-width: 42rem; /* max-w-2xl */
    margin: 20px auto 0;
}

.main-servicio-detalle-cover {
    max-width: 64rem; /* max-w-5xl */
    margin: 0 auto;
    padding: 0 16px 64px; /* px-4 pb-16 */
}

.is-servicio-detalle-cover-img {
    width: 100%;
    border-radius: 24px; /* rounded-3xl */
    aspect-ratio: 21 / 9;
    overflow: hidden;
}

.is-servicio-detalle-cover-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-servicio-detalle-features {
    max-width: 64rem; /* max-w-5xl */
    margin: 0 auto;
    padding: 0 16px 80px; /* px-4 pb-20 */
}

.main-servicio-no-encontrado {
    max-width: 48rem; /* max-w-3xl */
    margin: 0 auto;
    padding: 80px 16px 96px; /* pt-20 pb-24 px-4 */
    text-align: center;
}

/* AOS — evitar layout shift en cards con fondo absoluto */
/* .is-card-campeonatos-bg salió de acá (2026-09-03) — la card vieja se
   borró, ver nota en "Página Campeonatos". .is-card-album-galeria salió
   de acá (2026-09-04), mismo motivo — ver nota en "Página Galería".
   Regla vacía, no queda ningún selector real; se deja el comentario
   como registro. */

/* Menú hamburguesa móvil: consolidado en el bloque "FASE 2 v2 — Navbar"
   más arriba en este archivo (2026-09-03) — este duplicado (con azul
   #0073ba hardcodeado, de un trabajo previo a Fase 2) queda eliminado. */

/* ==========================================================================
   Ranking OnlyGolf — utilidades scoped a .ranking-page
   Mini set de utilidades tipo Tailwind, limitado a las clases usadas en
   page-ranking.php (HTML de referencia). Selectores [class~="..."] para
   soportar nombres con caracteres especiales ("/", "[]", ":") sin escapado.
   ========================================================================== */

.ranking-page,
.ranking-page *,
.ranking-page *::before,
.ranking-page *::after {
    box-sizing: border-box;
}

.ranking-page {
    --rk-brand: #0073b8;
    --rk-brand-dark: #005d94;
    --rk-ink: #0f172a;
    --rk-gold: #a16207;
    --rk-gold-bg: #fef3c7;
    --rk-silver: #64748b;
    --rk-silver-bg: #f1f5f9;
    --rk-bronze: #b45309;
    --rk-bronze-bg: #fed7aa;
}

.ranking-page button {
    font-family: inherit;
    border: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.ranking-page table {
    border-collapse: collapse;
}

/* Layout / spacing */
.ranking-page [class~="mx-auto"] { margin-left: auto; margin-right: auto; }
.ranking-page [class~="max-w-5xl"] { max-width: 64rem; }
.ranking-page [class~="max-w-md"] { max-width: 28rem; }
.ranking-page [class~="px-4"] { padding-left: 1rem; padding-right: 1rem; }
.ranking-page [class~="px-3.5"] { padding-left: .875rem; padding-right: .875rem; }
.ranking-page [class~="px-5"] { padding-left: 1.25rem; padding-right: 1.25rem; }
.ranking-page [class~="py-6"] { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.ranking-page [class~="py-2"] { padding-top: .5rem; padding-bottom: .5rem; }
.ranking-page [class~="py-2.5"] { padding-top: .625rem; padding-bottom: .625rem; }
.ranking-page [class~="py-3"] { padding-top: .75rem; padding-bottom: .75rem; }
.ranking-page [class~="py-3.5"] { padding-top: .875rem; padding-bottom: .875rem; }
.ranking-page [class~="py-4"] { padding-top: 1rem; padding-bottom: 1rem; }
.ranking-page [class~="py-1.5"] { padding-top: .375rem; padding-bottom: .375rem; }
.ranking-page [class~="py-8"] { padding-top: 2rem; padding-bottom: 2rem; }
.ranking-page [class~="pl-5"] { padding-left: 1.25rem; }
.ranking-page [class~="pl-11"] { padding-left: 2.75rem; }
.ranking-page [class~="pr-2"] { padding-right: .5rem; }
.ranking-page [class~="pr-3"] { padding-right: .75rem; }
.ranking-page [class~="pr-4"] { padding-right: 1rem; }
.ranking-page [class~="pr-5"] { padding-right: 1.25rem; }
.ranking-page [class~="mb-10"] { margin-bottom: 2.5rem; }
.ranking-page [class~="mb-6"] { margin-bottom: 1.5rem; }
.ranking-page [class~="mb-3"] { margin-bottom: .75rem; }
.ranking-page [class~="mt-5"] { margin-top: 1.25rem; }
.ranking-page [class~="mt-1.5"] { margin-top: .375rem; }
.ranking-page [class~="ml-auto"] { margin-left: auto; }
.ranking-page [class~="gap-2"] { gap: .5rem; }
.ranking-page [class~="gap-2.5"] { gap: .625rem; }
.ranking-page [class~="gap-3"] { gap: .75rem; }

/* Flex / display */
.ranking-page [class~="flex"] { display: flex; }
.ranking-page [class~="inline-flex"] { display: inline-flex; }
.ranking-page [class~="flex-col"] { flex-direction: column; }
.ranking-page [class~="items-center"] { align-items: center; }
.ranking-page [class~="justify-center"] { justify-content: center; }
.ranking-page [class~="shrink-0"] { flex-shrink: 0; }
.ranking-page [class~="hidden"] { display: none; }
@media (min-width: 640px) {
    .ranking-page [class~="sm:table-cell"] { display: table-cell; }
}

/* Tamaños */
.ranking-page [class~="w-full"] { width: 100%; }
.ranking-page [class~="w-16"] { width: 4rem; }
.ranking-page [class~="w-32"] { width: 8rem; }
.ranking-page [class~="w-8"] { width: 2rem; }
.ranking-page [class~="w-4"] { width: 1rem; }
.ranking-page [class~="w-3.5"] { width: .875rem; }
.ranking-page [class~="h-1"] { height: .25rem; }
.ranking-page [class~="h-full"] { height: 100%; }
.ranking-page [class~="h-8"] { height: 2rem; }
.ranking-page [class~="h-4"] { height: 1rem; }
.ranking-page [class~="h-3.5"] { height: .875rem; }

/* Bordes / radios */
.ranking-page [class~="rounded-full"] { border-radius: 9999px; }
.ranking-page [class~="rounded-2xl"] { border-radius: 1rem; }
.ranking-page [class~="rounded-xl"] { border-radius: .75rem; }
.ranking-page [class~="rounded-lg"] { border-radius: .5rem; }
.ranking-page [class~="overflow-hidden"] { overflow: hidden; }
.ranking-page [class~="border"] { border-width: 1px; border-style: solid; border-color: #e2e8f0; }
.ranking-page [class~="border-b"] { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e2e8f0; }
.ranking-page [class~="border-slate-100"] { border-color: #f1f5f9; }
.ranking-page [class~="border-slate-200"] { border-color: #e2e8f0; }
.ranking-page [class~="last:border-b-0"]:last-child { border-bottom-width: 0; }

/* Ring (box-shadow) — combinadas con su color en el mismo elemento */
.ranking-page [class~="ring-1"][class~="ring-gold/30"] { box-shadow: 0 0 0 1px rgba(161, 98, 7, .3); }
.ranking-page [class~="ring-1"][class~="ring-silver/30"] { box-shadow: 0 0 0 1px rgba(100, 116, 139, .3); }
.ranking-page [class~="ring-1"][class~="ring-bronze/30"] { box-shadow: 0 0 0 1px rgba(180, 83, 9, .3); }
.ranking-page [class~="ring-1"][class~="ring-black/5"] { box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); }
.ranking-page [class~="ring-1"][class~="ring-black/[0.04]"] { box-shadow: 0 0 0 1px rgba(0, 0, 0, .04); }
.ranking-page [class~="focus-within:ring-1"][class~="focus-within:ring-brand"]:focus-within { box-shadow: 0 0 0 1px var(--rk-brand); }
.ranking-page [class~="focus-within:border-brand"]:focus-within { border-color: var(--rk-brand); }

/* Sombras */
.ranking-page [class~="shadow-[0_4px_0_0_#005d94]"] { box-shadow: 0 4px 0 0 #005d94; }
.ranking-page [class~="active:shadow-[0_0px_0_0_#005d94]"]:active { box-shadow: 0 0 0 0 #005d94; }
.ranking-page [class~="shadow-[0_4px_0_0_#cbd5e1]"] { box-shadow: 0 4px 0 0 #cbd5e1; }
.ranking-page [class~="active:shadow-[0_0px_0_0_#cbd5e1]"]:active { box-shadow: 0 0 0 0 #cbd5e1; }
.ranking-page [class~="shadow-[0_1px_2px_rgba(15,23,42,0.04)]"] { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ranking-page [class~="shadow-[0_1px_3px_rgba(15,23,42,0.06),0_8px_24px_-8px_rgba(15,23,42,0.12)]"] { box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px -8px rgba(15, 23, 42, .12); }
.ranking-page [class~="active:translate-y-[3px]"]:active { transform: translateY(3px); }

/* Colores de fondo */
.ranking-page [class~="bg-brand"] { background-color: var(--rk-brand); }
.ranking-page [class~="bg-white"] { background-color: #fff; }
.ranking-page [class~="bg-slate-200"] { background-color: #e2e8f0; }
.ranking-page [class~="bg-slate-50/60"] { background-color: rgba(248, 250, 252, .6); }
.ranking-page [class~="bg-ink"] { background-color: var(--rk-ink); }
.ranking-page [class~="bg-ink/[0.02]"] { background-color: rgba(15, 23, 42, .02); }
.ranking-page [class~="bg-gold-bg"] { background-color: var(--rk-gold-bg); }
.ranking-page [class~="bg-silver-bg"] { background-color: var(--rk-silver-bg); }
.ranking-page [class~="bg-bronze-bg"] { background-color: var(--rk-bronze-bg); }
.ranking-page [class~="hover:bg-brand-light/50"]:hover { background-color: rgba(0, 115, 184, .05); }

/* Colores de texto */
.ranking-page [class~="text-ink"] { color: var(--rk-ink); }
.ranking-page [class~="text-brand"] { color: var(--rk-brand); }
.ranking-page [class~="text-white"] { color: #fff; }
.ranking-page [class~="text-white/60"] { color: rgba(255, 255, 255, .6); }
.ranking-page [class~="text-slate-300"] { color: #cbd5e1; }
.ranking-page [class~="text-slate-400"] { color: #94a3b8; }
.ranking-page [class~="text-slate-500"] { color: #64748b; }
.ranking-page [class~="text-slate-700"] { color: #334155; }
.ranking-page [class~="text-slate-800"] { color: #1e293b; }
.ranking-page [class~="text-gold"] { color: var(--rk-gold); }
.ranking-page [class~="text-silver"] { color: var(--rk-silver); }
.ranking-page [class~="text-bronze"] { color: var(--rk-bronze); }
.ranking-page [class~="hover:text-slate-700"]:hover { color: #334155; }
.ranking-page [class~="placeholder:text-slate-400"]::placeholder { color: #94a3b8; }
.ranking-page [class~="group"]:hover [class~="group-hover:text-brand"] { color: var(--rk-brand); }

/* Tipografía */
.ranking-page [class~="font-display"] { font-family: 'Teva Sans bold'; }
.ranking-page [class~="font-semibold"] { font-weight: 600; }
.ranking-page [class~="font-medium"] { font-weight: 500; }
.ranking-page [class~="tracking-tight"] { letter-spacing: -.02em; }
.ranking-page [class~="tracking-wider"] { letter-spacing: .05em; }
.ranking-page [class~="tracking-[0.25em]"] { letter-spacing: .25em; }
.ranking-page [class~="text-4xl"] { font-size: 2.25rem; line-height: 2.5rem; }
.ranking-page [class~="text-xs"] { font-size: .75rem; line-height: 1rem; }
.ranking-page [class~="text-sm"] { font-size: .875rem; line-height: 1.25rem; }
.ranking-page [class~="text-base"] { font-size: 1rem; line-height: 1.5rem; }
.ranking-page [class~="text-[11px]"] { font-size: 11px; }
.ranking-page [class~="uppercase"] { text-transform: uppercase; }
.ranking-page [class~="tabular-nums"] { font-variant-numeric: tabular-nums; }
.ranking-page [class~="text-center"] { text-align: center; }
.ranking-page [class~="text-left"] { text-align: left; }
.ranking-page [class~="text-right"] { text-align: right; }

/* Interacción / varios */
.ranking-page [class~="cursor-pointer"] { cursor: pointer; }
.ranking-page [class~="outline-none"] { outline: none; }
.ranking-page [class~="object-cover"] { object-fit: cover; }
.ranking-page [class~="rotate-180"] { transform: rotate(180deg); }
.ranking-page [class~="transition"],
.ranking-page [class~="transition-all"] { transition: all .15s ease; }
.ranking-page [class~="transition-colors"] { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ranking-page [class~="transition-transform"] { transition: transform .15s ease; }
.ranking-page [class~="duration-100"] { transition-duration: .1s; }

/* ==========================================================================
   Ranking OnlyGolf — comportamiento (tabs / búsqueda / historial)
   ========================================================================== */

.ranking-page .ranking-panel {
    display: none;
}

.ranking-page .ranking-panel.is-active {
    display: block;
}

.ranking-page .ranking-historial-row {
    display: none;
}

.ranking-page .ranking-historial-row.is-open {
    display: table-row;
}

/* =====================================================================
   Página Noticias (page-noticias.php / single-post.php) — reescrito
   (2026-09-07) contra _static-preview/noticias-listado.html y
   noticia-detalle.html — reconstruye NoticiasList.tsx/NoticiaDetail.tsx.
   Fuente real = CPT nativo post (WP_Query), no la tabla news del
   postgrest de onlygolf-web — ver plan sección 63.
   ===================================================================== */

.main-noticias-hero {
    padding: 80px 0 40px; /* pt-20, sin pb explícito en React (lo da el mb-10 del h1) */
    text-align: center;
}

.is-noticias-heading {
    color: var(--color-og-ink);
    font-size: 36px; /* text-4xl */
    margin-top: 16px;
}

@media (min-width: 640px) {
    .is-noticias-heading {
        font-size: 48px; /* sm:text-5xl */
    }
}

.main-noticias-filtros {
    padding-bottom: 40px; /* mb-10 real, antes del grid */
}

.is-noticias-filtros-form {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px; /* gap-3 */
    justify-content: center;
    align-items: center;
}

@media (min-width: 640px) {
    .is-noticias-filtros-form {
        flex-direction: row;
    }
}

.is-noticias-buscador,
.is-noticias-select {
    border-radius: 9999px; /* rounded-full */
    padding: 10px 20px; /* px-5 py-2.5 */
    font-size: 14px; /* text-sm */
    color: var(--color-og-ink);
    background-color: transparent;
    border: 1px solid color-mix(in srgb, white 12%, transparent); /* borde de .og-glass */
    outline: none;
    font-family: inherit;
}

.is-noticias-buscador::placeholder {
    color: var(--color-og-ink-dim);
}

@media (min-width: 640px) {
    .is-noticias-buscador {
        width: 18rem; /* sm:w-72 */
    }
}

.is-noticias-select option {
    background-color: var(--color-og-surface);
    color: var(--color-og-ink);
}

.main-noticias-grid {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 16px 96px; /* px-4 pb-24 */
}

.is-noticias-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px; /* rounded-2xl */
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.is-noticias-card:hover {
    color: inherit;
    text-decoration: none;
}

.is-noticias-card-photo {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.is-noticias-card-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.is-noticias-card:hover .is-noticias-card-photo img {
    transform: scale(1.05);
}

.is-noticias-card-body {
    padding: 16px; /* p-4 */
    flex: 1;
    display: flex;
    flex-direction: column;
}

.is-noticias-card-titulo {
    color: var(--color-og-ink);
    font-size: 20px; /* text-xl */
    margin-top: 8px;
}

.is-noticias-card-excerpt {
    color: var(--color-og-ink-dim);
    font-size: 14px; /* text-sm */
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.is-noticias-vacio {
    color: var(--color-og-ink-dim);
    text-align: center;
}

.is-noticias-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px; /* gap-2 */
    margin-top: 48px; /* mt-12 */
}

.is-noticias-pager-item {
    width: 36px; height: 36px; /* w-9 h-9 */
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-og-ink-dim);
    text-decoration: none;
    background: color-mix(in srgb, var(--color-og-card-bg) 55%, transparent); /* og-glass aproximado, pill chica */
    transition: color .15s ease, background-color .15s ease;
}

.is-noticias-pager-item:hover {
    color: var(--color-og-ink);
    text-decoration: none;
}

.is-noticias-pager-item.is-active {
    background-color: var(--color-og-brand);
    color: #fff;
}

.is-noticias-pager-item.is-disabled {
    opacity: .35;
    pointer-events: none;
}

/* --- Detalle (single-post.php) --- */
.main-noticia-header {
    max-width: 48rem; /* max-w-3xl */
    margin: 0 auto;
    padding: 80px 16px 40px; /* pt-20 pb-10 px-4 */
    text-align: center;
}

.is-noticia-back {
    color: var(--color-og-ink-dim);
    text-decoration: none;
}

.is-noticia-back:hover {
    color: var(--color-og-ink);
}

.is-noticia-meta {
    color: var(--color-og-ink-dim);
    margin-top: 24px; /* mt-6 */
}

.is-noticia-titulo {
    color: var(--color-og-ink);
    font-size: 36px; /* text-4xl */
    margin-top: 16px;
}

@media (min-width: 640px) {
    .is-noticia-titulo {
        font-size: 48px; /* sm:text-5xl */
    }
}

.main-noticia-body {
    max-width: 64rem; /* max-w-4xl */
    margin: 0 auto;
    padding: 0 16px 96px; /* px-4 pb-24 */
}

.is-noticia-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 24px; /* rounded-3xl, sin body */
}

.is-noticia-cover.has-body {
    border-radius: 24px 24px 0 0; /* rounded-t-3xl */
}

.is-noticia-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.is-noticia-credito {
    color: var(--color-og-ink-dim);
    font-size: 12px;
    margin-top: 8px;
    text-align: right;
}

.is-noticia-contenido {
    padding: 24px; /* p-6 */
    border-radius: 24px; /* rounded-3xl, sin cover */
}

@media (min-width: 640px) {
    .is-noticia-contenido {
        padding: 40px; /* sm:p-10 */
    }
}

.is-noticia-contenido.has-cover {
    border-radius: 0 0 24px 24px; /* rounded-b-3xl */
}

.is-noticia-contenido p {
    color: var(--color-og-ink-dim);
    line-height: 1.6;
    margin: 0 0 16px;
}

.is-noticia-contenido p:last-child {
    margin-bottom: 0;
}

.is-noticia-footer {
    max-width: 64rem;
    margin: 24px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.is-noticia-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.is-noticia-tag {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-og-ink-dim);
    background: color-mix(in srgb, white 8%, transparent);
    border-radius: 9999px;
    padding: 4px 12px;
    text-decoration: none;
}

.is-noticia-tag:hover {
    color: var(--color-og-ink);
    text-decoration: none;
}

/* =====================================================================
   404 (404.php) — creado 2026-09-07, cierre de etapa. Mismo lenguaje
   visual que los demás estados "no encontrado" (Servicio/Noticia).
   ===================================================================== */

.main-404 {
    max-width: 48rem; /* max-w-3xl */
    margin: 0 auto;
    padding: 120px 16px; /* centrado, sin nav pisándolo */
    text-align: center;
}

.is-404-heading {
    color: var(--color-og-ink);
    font-size: 36px; /* text-4xl */
    margin-top: 16px;
}

@media (min-width: 640px) {
    .is-404-heading {
        font-size: 48px; /* sm:text-5xl */
    }
}

.is-404-desc {
    color: var(--color-og-ink-dim);
    max-width: 32rem;
    margin: 20px auto 0;
}

.is-404-cta {
    display: inline-block;
    margin-top: 32px;
}