/*
Theme Name:   legalgaming.es Child
Theme URI:    https://legalgaming.es
Description:  Child theme de GeneratePress para legalgaming.es — comparador de casinos con licencia DGOJ
              para residentes extranjeros en España (silos /de/, /it/, /en/).
Author:       José Luis Pérez Gimeno
Version:      0.3.0
Template:     generatepress
Text Domain:  legalgaming
*/

/* Las fuentes se encolan aparte en functions.php (lg_enqueue_estilos): un @import
   aquí bloquearía el renderizado. */

/* ==========================================================================
   DIRECCIÓN DE DISEÑO (v0.3)

   Referencia: el estándar del sector de comparadores de afiliación. La versión
   anterior era texto negro sobre blanco puro y parecía un documento, no un
   producto. Los tres cambios que arreglan eso:

   1. FONDO TINTADO + TARJETAS BLANCAS. La página tiene un gris azulado; el
      contenido flota encima en tarjetas blancas con borde. Es lo que hace que
      algo "parezca una web" y no un Word.
   2. CTA ÁMBAR. Un único color cálido, reservado EXCLUSIVAMENTE a los botones
      de acción. Nada más en la web lo usa, así que salta a la vista.
   3. SEÑALES DE CONFIANZA VERDES. La licencia DGOJ verificada es el producto:
      se marca con chips verdes, no con texto gris.

   Tipografía: Playfair Display (titulares) + Source Sans 3 (texto), ambas
   autoalojadas en /fonts/ — sin CDN, sin FOUT, sin coste en Core Web Vitals.
   ========================================================================== */

:root {
	/* Tinta y fondos */
	--lg-tinta:        #102a43;
	--lg-tinta-media:  #486581;
	--lg-tinta-suave:  #829ab1;
	--lg-fondo:        #f0f4f8;   /* fondo de la pagina */
	--lg-blanco:       #ffffff;   /* tarjetas */
	--lg-fondo-alt:    #f7f9fb;
	--lg-borde:        #d9e2ec;
	--lg-borde-fuerte: #bcccdc;

	/* Acción — solo botones */
	--lg-cta:          #f59e0b;
	--lg-cta-osc:      #d97706;

	/* Confianza / verificado */
	--lg-ok:           #059669;
	--lg-ok-luz:       #d1fae5;
	--lg-no:           #b42318;

	/* Aviso legal */
	--lg-aviso-fondo:  #fffbeb;
	--lg-aviso-borde:  #fde68a;

	--lg-serif: "Playfair Display", Georgia, serif;
	--lg-sans:  "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

	--lg-radio:     8px;
	--lg-radio-gr:  12px;
	--lg-sombra:    0 1px 3px rgba(16, 42, 67, .06);
	--lg-sombra-gr: 0 4px 14px -6px rgba(16, 42, 67, .18);

	/* Banda inferior reservada al futuro aviso obligatorio de la DGOJ (CLAUDE.md 3.7). */
	--lg-aviso-banda: 15%;
	--lg-barra-alto:  4.5rem;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	font-family: var(--lg-sans);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--lg-tinta);
	background: var(--lg-fondo);
	padding-block-end: var(--lg-barra-alto);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--lg-serif);
	font-weight: 700;
	color: var(--lg-tinta);
	text-wrap: balance;
	letter-spacing: -.015em;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.9rem); line-height: 1.12; margin-block: 0 .75rem; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem); line-height: 1.2; margin-block: 2.5rem .75rem; }
h3 { font-size: 1.3rem; line-height: 1.28; margin-block: 1.9rem .5rem; }

.entry-content > p:first-of-type { font-size: 1.15rem; line-height: 1.6; color: var(--lg-tinta-media); }

a { color: var(--lg-ok); text-underline-offset: .18em; }
a:hover { color: #047857; }

strong { font-weight: 600; }

/* El contenido va sobre tarjeta blanca: es lo que separa "web" de "documento". */
.site-content .content-area,
.entry-content > .lg-op,
.wp-block-table,
blockquote { background: var(--lg-blanco); }

.inside-article {
	background: var(--lg-blanco);
	border: 1px solid var(--lg-borde);
	border-radius: var(--lg-radio-gr);
	padding: clamp(1.25rem, 3vw, 2.5rem);
	box-shadow: var(--lg-sombra);
}

.entry-title { margin-block-start: 0; }
.entry-meta { font-size: .8125rem; color: var(--lg-tinta-suave); }

/* Migas de pan */
.lg-migas {
	max-inline-size: 1200px;
	margin: 0 auto;
	padding: .9rem 1rem .2rem;
	font-size: .8125rem;
	color: var(--lg-tinta-suave);
}

.lg-migas a { color: var(--lg-tinta-media); text-decoration: none; }
.lg-migas a:hover { color: var(--lg-ok); text-decoration: underline; }
.lg-migas .separator { margin-inline: .35rem; opacity: .6; }

/* ==========================================================================
   Cabecera y navegación
   ========================================================================== */

.site-header { background: var(--lg-blanco); border-block-end: 1px solid var(--lg-borde); }

/* --- Logotipo --------------------------------------------------------------
   Sello verde de "verificado" + wordmark con la extensión en color. Texto real,
   no imagen: escala, no pesa y es legible para los buscadores. */

.lg-logo { margin: 0; line-height: 1; }

.lg-logo a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
	color: var(--lg-tinta);
}

.lg-logo__sello {
	inline-size: 1.5rem;
	block-size: 1.75rem;
	flex: 0 0 auto;
	color: var(--lg-ok);
}

.lg-logo__texto {
	font-family: var(--lg-serif);
	font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--lg-tinta);
}

.lg-logo__tld { color: var(--lg-ok); }

.lg-logo a:hover .lg-logo__texto { color: var(--lg-tinta); }
.lg-logo a:hover .lg-logo__sello { color: #047857; }
.lg-logo a:focus-visible { outline: 3px solid var(--lg-ok); outline-offset: 3px; border-radius: 4px; }

/* En el pie, sobre fondo oscuro, el wordmark va en blanco. */
.site-footer .lg-logo__texto { color: #fff; }
.main-navigation { background: transparent; }
.main-navigation a { font-family: var(--lg-sans); font-weight: 600; font-size: .95rem; color: var(--lg-tinta); }
.main-navigation .current-menu-item > a { color: var(--lg-ok); }

.site-footer, .site-info { background: var(--lg-tinta); color: #cbd7e4; }
.site-footer a, .site-info a { color: #fff; }

/* ==========================================================================
   Hero de la portada
   ========================================================================== */

.lg-hero {
	margin-block-end: 1.75rem;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border-radius: var(--lg-radio-gr);
	background: linear-gradient(160deg, #102a43 0%, #1c3d5a 100%);
	color: #fff;
}

.lg-hero h1, .lg-hero p { color: #fff; max-inline-size: 34rem; }
.lg-hero h1 { margin-block-end: .6rem; }
.lg-hero p { font-size: 1.1rem; line-height: 1.55; color: #cbd7e4; margin-block-end: 1.25rem; }

.lg-hero__sello {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-block-end: .9rem;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: rgba(5, 150, 105, .18);
	border: 1px solid rgba(5, 150, 105, .5);
	color: #6ee7b7;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
}

/* Barra de datos de confianza */
.lg-datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: .75rem;
	margin-block-end: 1.75rem;
}

.lg-dato {
	background: var(--lg-blanco);
	border: 1px solid var(--lg-borde);
	border-radius: var(--lg-radio);
	padding: .9rem 1rem;
	text-align: center;
}

.lg-dato__n {
	display: block;
	font-family: var(--lg-serif);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--lg-tinta);
}

.lg-dato__t {
	display: block;
	margin-block-start: .2rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lg-tinta-suave);
}

/* ==========================================================================
   Fichas de operador
   ========================================================================== */

.lg-op {
	position: relative;
	margin-block: 1.25rem;
	padding: 1.4rem;
	border: 2px solid var(--lg-borde-fuerte);
	border-radius: var(--lg-radio-gr);
	background: var(--lg-blanco);
	box-shadow: var(--lg-sombra);
	max-inline-size: none;
}

.lg-op--1 { border-color: var(--lg-ok); box-shadow: var(--lg-sombra-gr); }

.lg-op--1::before {
	content: "Unsere Empfehlung";
	position: absolute;
	inset-block-start: -.7rem;
	inset-inline-start: 1.2rem;
	padding: .15rem .6rem;
	border-radius: 999px;
	background: var(--lg-ok);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.lg-op__head {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 .9rem;
	align-items: center;
	padding-block-end: .9rem;
	margin-block-end: 1rem;
	border-block-end: 1px solid var(--lg-borde);
}

.lg-op__rank {
	grid-row: span 2;
	display: inline-grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: var(--lg-radio);
	background: var(--lg-fondo);
	border: 1px solid var(--lg-borde-fuerte);
	color: var(--lg-tinta-media);
	font-family: var(--lg-serif);
	font-size: 1.2rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.lg-op--1 .lg-op__rank { background: var(--lg-ok); border-color: var(--lg-ok); color: #fff; }

.lg-op__name { font-size: 1.45rem; line-height: 1.1; margin: 0; }
.lg-op__claim { margin: .15rem 0 0; font-size: .9rem; color: var(--lg-tinta-media); }

.lg-op > p { max-inline-size: none; }

/* Pros y contras */
.lg-op__pro, .lg-op__con {
	margin-block: .45rem;
	padding: .7rem .9rem .7rem 2.2rem;
	border-radius: var(--lg-radio);
	font-size: .93rem;
	position: relative;
}
.lg-op__pro { background: var(--lg-ok-luz); color: #065f46; }
.lg-op__con { background: var(--lg-fondo); color: var(--lg-tinta-media); }

.lg-op__pro::before, .lg-op__con::before {
	position: absolute;
	inset-inline-start: .85rem;
	font-weight: 700;
}
.lg-op__pro::before { content: "✓"; color: var(--lg-ok); }
.lg-op__con::before { content: "–"; color: var(--lg-no); }
.lg-op__pro strong, .lg-op__con strong { display: none; }

/* Chips de características */
.lg-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .75rem; }

.lg-chip {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .25rem .6rem;
	border-radius: 999px;
	background: var(--lg-fondo);
	border: 1px solid var(--lg-borde);
	font-size: .78rem;
	font-weight: 600;
	color: var(--lg-tinta-media);
}

.lg-chip--ok { background: var(--lg-ok-luz); border-color: #6ee7b7; color: #065f46; }

/* Etiqueta de contenido publicitario */
.lg-operador__ad, .lg-op__ad {
	position: absolute;
	inset-block-start: .8rem;
	inset-inline-end: .8rem;
	padding: .12rem .45rem;
	border-radius: 4px;
	background: var(--lg-fondo);
	border: 1px solid var(--lg-borde);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--lg-tinta-suave);
}

/* ==========================================================================
   Llamadas a la acción — el ÚNICO uso del ámbar en toda la web
   ========================================================================== */

.lg-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	margin-block-start: .5rem;
	padding: .8rem 1.6rem;
	border-radius: var(--lg-radio);
	background: var(--lg-cta);
	color: var(--lg-tinta) !important;
	font-family: var(--lg-sans);
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(16, 42, 67, .18);
	transition: background .15s ease, transform .15s ease;
}

.lg-cta:hover, .lg-cta:focus-visible {
	background: var(--lg-cta-osc);
	color: var(--lg-tinta) !important;
	transform: translateY(-1px);
}

.lg-hero .lg-cta { margin-block-start: 0; }

/* ==========================================================================
   Tablas
   ========================================================================== */

.lg-tabla-wrap, .wp-block-table {
	margin-block: 1.5rem;
	overflow-x: auto;
	background: var(--lg-blanco);
	border: 1px solid var(--lg-borde);
	border-radius: var(--lg-radio-gr);
}

.lg-tabla, .wp-block-table table {
	inline-size: 100%;
	border-collapse: collapse;
	font-family: var(--lg-sans);
	font-size: .93rem;
}

.lg-tabla th, .lg-tabla td,
.wp-block-table th, .wp-block-table td {
	padding: .8rem .9rem;
	border-block-end: 1px solid var(--lg-borde);
	text-align: start;
	vertical-align: top;
}

.lg-tabla thead th, .wp-block-table thead th {
	background: var(--lg-tinta);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	white-space: nowrap;
}

.wp-block-table tbody tr:nth-child(even) { background: var(--lg-fondo-alt); }
.wp-block-table td:first-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.wp-block-table tr:last-child td { border-block-end: 0; }

/* ==========================================================================
   Avisos legales
   ========================================================================== */

.lg-aviso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .8rem;
	padding: .8rem 1rem;
	margin-block: 1.25rem;
	background: var(--lg-aviso-fondo);
	border: 1px solid var(--lg-aviso-borde);
	border-radius: var(--lg-radio);
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--lg-tinta);
}

.lg-aviso--footer { justify-content: center; text-align: center; margin-block: 2rem 0; }

.lg-aviso__edad {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: var(--lg-tinta);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
}

.lg-aviso__es { font-weight: 700; }
.lg-aviso__local { color: var(--lg-tinta-media); }

.lg-disclosure {
	margin: 0 0 1.75rem;
	padding: .95rem 1.1rem;
	border: 1px solid var(--lg-borde);
	border-inline-start: 4px solid var(--lg-tinta-suave);
	border-radius: 0 var(--lg-radio) var(--lg-radio) 0;
	background: var(--lg-fondo-alt);
	font-size: .875rem;
	line-height: 1.55;
	color: var(--lg-tinta-media);
}

/* Teléfono de ayuda — objetivo táctil >= 44 px */
.lg-tel {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-block-size: 44px;
	padding: .35rem .8rem;
	border: 1px solid var(--lg-borde-fuerte);
	border-radius: 999px;
	background: var(--lg-blanco);
	color: var(--lg-tinta);
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.lg-tel__icono { font-size: 1rem; color: var(--lg-ok); }
.lg-tel__num { font-variant-numeric: tabular-nums; }
.lg-tel:hover, .lg-tel:focus-visible { border-color: var(--lg-ok); color: var(--lg-tinta); }

@media (max-width: 560px) {
	.lg-tel__etiq { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* Barra fija inferior */
.lg-barra {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
	padding: .55rem .9rem;
	padding-block-end: calc(.55rem + env(safe-area-inset-bottom));
	background: var(--lg-aviso-fondo);
	border-block-start: 1px solid var(--lg-aviso-borde);
	box-shadow: 0 -6px 24px -12px rgba(16, 42, 67, .35);
	font-size: .75rem;
	line-height: 1.4;
	color: var(--lg-tinta);
}

.lg-barra__edad {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 50%;
	background: var(--lg-tinta);
	color: #fff;
	font-size: .66rem;
	font-weight: 700;
}

.lg-barra__msg { flex: 1 1 14rem; margin: 0; }
.lg-barra__msg span { color: var(--lg-tinta-media); }
.lg-barra__sellos { display: flex; gap: .8rem; }
.lg-barra__sellos a { color: var(--lg-ok); font-size: .6875rem; font-weight: 600; }

@media (max-width: 700px) {
	.lg-barra__sellos { display: none; }
	.lg-barra { font-size: .6875rem; }
	/* Medido: la barra ocupa ~101 px a 375 px de ancho. Se reserva algo más para
	   que el final del artículo nunca quede debajo. */
	:root { --lg-barra-alto: 7rem; }
}

/* ==========================================================================
   Ficha de operador del patrón del editor
   ========================================================================== */

.lg-operador {
	position: relative;
	display: grid;
	grid-template-rows: 1fr minmax(var(--lg-aviso-banda), auto);
	min-block-size: 340px;
	margin-block: 1.5rem;
	border: 2px solid var(--lg-borde-fuerte);
	border-radius: var(--lg-radio-gr);
	background: var(--lg-blanco);
	box-shadow: var(--lg-sombra);
	overflow: hidden;
}

.lg-operador__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 220px);
	gap: 1.4rem;
	padding: 1.4rem;
	align-items: start;
}

.lg-operador__marca { display: grid; gap: .5rem; justify-items: start; }
.lg-operador__marca img { max-inline-size: 160px; block-size: auto; }
.lg-operador__licencia { font-size: .75rem; color: var(--lg-tinta-suave); }
.lg-operador__listas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lg-operador__listas ul { margin: 0; padding-inline-start: 1.1rem; font-size: .93rem; }
.lg-operador__pros li::marker { color: var(--lg-ok); }
.lg-operador__contras li::marker { color: var(--lg-tinta-suave); }
.lg-operador__cta { display: grid; gap: .5rem; }
.lg-operador__nota { font-size: .75rem; color: var(--lg-tinta-suave); text-align: center; }

@media (max-width: 860px) {
	.lg-operador__cuerpo, .lg-operador__listas { grid-template-columns: 1fr; }
	.lg-op { padding: 1.1rem; }
	.lg-op__name { font-size: 1.25rem; }
}

/* ==========================================================================
   Accesibilidad
   ========================================================================== */

.lg-sr {
	position: absolute;
	inline-size: 1px; block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:where(.lg-cta, .lg-tel, a):focus-visible {
	outline: 3px solid var(--lg-ok);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}