/**
 * BSV — Footer del sitio y bloques legales (WEB-01, WEB-02, WEB-05, WEB-07, WEB-08).
 *
 * Paleta: assets/css/bsv-tokens.css. Acá no van hex sueltos.
 *
 * Criterios del spec que se resuelven acá:
 *  - Mínimo 12px y legible en mobile sin zoom.
 *  - Leyenda en negrita, con contraste real contra el fondo.
 *  - Nunca oculta en acordeón, tooltip ni popup.
 */

/* --- WEB-02 · Leyenda de juego responsable ------------------------------ */

.bsv-leyenda-juego {
	display: block;
	margin: 1rem 0 0;
	padding: 0.8rem 1.15rem;
	background: var( --bsv-blanco );
	color: #111;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 700;
	text-align: center;
	border-radius: var( --bsv-radio );
	border: 2px solid var( --bsv-oro );
}

/*
 * El color se fija en el <strong> con la MISMA especificidad que cualquier
 * regla de contenedor, para que no se lo pise por orden en la hoja.
 * Esto ya rompió una vez: .bsv-footer-legal strong lo dejaba blanco sobre
 * blanco y la leyenda quedaba invisible.
 */
.bsv-leyenda-juego strong,
.bsv-footer-legal .bsv-leyenda-juego strong,
.bsv-modal-edad .bsv-leyenda-juego strong {
	color: #111;
	font-weight: 700;
}

/* --- Footer del sitio --------------------------------------------------- */

.bsv-footer {
	background: var( --bsv-verde-footer );
	color: var( --bsv-texto-claro );
}

.bsv-footer__inner {
	max-width: var( --bsv-ancho );
	margin: 0 auto;
	padding-inline: 1.25rem;
}

.bsv-footer__principal {
	padding: 3.25rem 0 2.75rem;
}

.bsv-footer__cols {
	display: grid;
	grid-template-columns: 1.3fr 1.1fr 1.3fr 0.8fr;
	gap: 2.5rem 2rem;
	align-items: start;
}

/*
 * El logo está diseñado para fondo claro: "EL AUTÉNTICO" y "BROWN DE SAN
 * VICENTE" van en el verde de marca, que sobre el footer da 1.41:1 —
 * ilegible. Sobre blanco, 6.55:1. De ahí el chip.
 */
.bsv-footer__logo {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 0.7rem 0.9rem;
	background: var( --bsv-blanco );
	border-radius: var( --bsv-radio );
	line-height: 0;
}

.bsv-footer__logo img {
	display: block;
	width: 190px;
	height: auto;
	max-width: 100%;
}

.bsv-footer__tagline {
	margin: 0 0 1.15rem;
	font-size: 14px;
	line-height: 1.5;
	color: var( --bsv-texto-claro );
}

.bsv-footer__titulo {
	position: relative;
	margin: 0 0 1.15rem;
	padding-bottom: 0.6rem;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --bsv-blanco );
}

.bsv-footer__titulo::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 3px;
	background: var( --bsv-oro );
	border-radius: 2px;
}

.bsv-footer__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bsv-footer__lista li {
	margin: 0 0 0.7rem;
	font-size: 14px;
	line-height: 1.55;
	color: var( --bsv-texto-claro );
}

.bsv-footer__lista li:last-child {
	margin-bottom: 0;
}

.bsv-footer__lista strong {
	display: block;
	color: var( --bsv-oro );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bsv-footer__lista a {
	color: var( --bsv-texto-claro );
	text-decoration: none;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.28 );
	transition: color 0.2s, border-color 0.2s;
}

.bsv-footer__lista a:hover,
.bsv-footer__lista a:focus {
	color: var( --bsv-oro );
	border-bottom-color: var( --bsv-oro );
}

/* Redes */

.bsv-footer__redes {
	display: flex;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bsv-footer__redes a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.12 );
	color: var( --bsv-blanco );
	transition: background 0.2s, color 0.2s;
}

.bsv-footer__redes a:hover,
.bsv-footer__redes a:focus {
	background: var( --bsv-oro );
	color: var( --bsv-verde-legal );
}

/* --- WEB-01 · Banda legal ----------------------------------------------- */

.bsv-footer-legal {
	background: var( --bsv-verde-legal );
	color: var( --bsv-texto-claro );
	padding: 2rem 1.25rem;
}

.bsv-footer-legal__inner {
	max-width: 780px;
	margin: 0 auto;
	font-size: 13px;   /* Piso del spec: 12px. */
	line-height: 1.65;
	text-align: center;
}

.bsv-footer-legal p {
	margin: 0 0 0.9rem;
	color: var( --bsv-texto-claro );
	font-size: 13px;
	line-height: 1.65;
}

/*
 * Solo estos dos párrafos llevan el <strong> en blanco. Se apunta por clase y
 * no con `.bsv-footer-legal strong`, que además de estos alcanzaba al <strong>
 * de la leyenda y la dejaba blanca sobre fondo blanco.
 */
.bsv-footer-legal__entidad strong,
.bsv-footer-legal__autorizacion strong {
	color: var( --bsv-blanco );
}

.bsv-footer-legal .bsv-leyenda-juego {
	max-width: 620px;
	margin: 1.25rem auto;
}

.bsv-footer-legal__links {
	margin-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: center;
}

.bsv-footer-legal__links a {
	color: var( --bsv-blanco );
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bsv-footer-legal__links a:hover,
.bsv-footer-legal__links a:focus {
	color: var( --bsv-oro );
}

.bsv-footer-legal__copy {
	margin: 1.25rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.14 );
	color: var( --bsv-texto-suave );
	font-size: 12px;
}

/* --- WEB-08 · Datos de entidad en la ficha ------------------------------ */

.bsv-ficha-legal {
	margin: 1rem 0 0;
	padding: 0.9rem 1.1rem;
	background: var( --bsv-gris-claro );
	border: 1px solid #E2E6E9;
	border-radius: var( --bsv-radio );
	font-size: 13px;
	line-height: 1.5;
	color: var( --bsv-texto );
}

.bsv-ficha-legal p {
	margin: 0 0 0.4rem;
	font-size: 13px;
}

.bsv-ficha-legal p:last-child {
	margin-bottom: 0;
}

/* --- WEB-05 · Checkbox de edad en checkout ------------------------------ */

.bsv-confirma-edad {
	margin: 1rem 0;
	padding: 0.9rem 1.1rem;
	background: #FFF8E1;
	border: 2px solid var( --bsv-oro );
	border-radius: var( --bsv-radio );
}

.bsv-confirma-edad label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --bsv-texto );
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.bsv-confirma-edad input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-width: 20px;
	margin: 0;
	accent-color: var( --bsv-verde );
	cursor: pointer;
}

/* --- WEB-07 · Modal de verificación de edad ----------------------------- */

html.bsv-modal-abierto,
html.bsv-modal-abierto body {
	overflow: hidden;
}

.bsv-modal-edad[hidden] {
	display: none;
}

.bsv-modal-edad {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba( 7, 64, 29, 0.92 );
}

.bsv-modal-edad__caja {
	background: var( --bsv-blanco );
	color: var( --bsv-texto );
	max-width: 460px;
	width: 100%;
	padding: 2rem 1.5rem;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.45 );
}

.bsv-modal-edad__titulo {
	margin: 0 0 0.75rem;
	font-size: 22px;
	line-height: 1.25;
	color: var( --bsv-verde );
}

.bsv-modal-edad__texto {
	margin: 0 0 1.5rem;
	font-size: 15px;
	line-height: 1.5;
	color: var( --bsv-texto );
}

.bsv-modal-edad__acciones {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.bsv-modal-edad__btn {
	display: block;
	width: 100%;
	padding: 0.85rem 1rem;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	border: 2px solid transparent;
	border-radius: var( --bsv-radio );
	cursor: pointer;
}

/* Mismo tratamiento que el CTA principal del sitio: dorado con texto verde. */
.bsv-modal-edad__btn--ok {
	background: var( --bsv-oro );
	color: var( --bsv-verde-legal );
}

.bsv-modal-edad__btn--no {
	background: transparent;
	color: #555;
	border-color: #BBB;
}

.bsv-modal-edad__btn:focus-visible,
.bsv-footer a:focus-visible {
	outline: 3px solid var( --bsv-oro );
	outline-offset: 2px;
}

.bsv-modal-edad .bsv-leyenda-juego {
	margin-top: 1.25rem;
	font-size: 13px;
}

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

@media ( max-width: 991px ) {
	.bsv-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 2.25rem 2rem;
	}
}

@media ( max-width: 767px ) {
	.bsv-footer__principal {
		padding: 2.5rem 0 2rem;
	}

	.bsv-footer__cols {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}

	.bsv-footer__titulo::after {
		left: 50%;
		transform: translateX( -50% );
	}

	.bsv-footer__redes {
		justify-content: center;
	}

	.bsv-footer-legal {
		padding: 1.75rem 1rem;
	}
}

@media ( max-width: 480px ) {
	.bsv-modal-edad__caja {
		padding: 1.5rem 1.1rem;
	}
}

/* --- WEB-03 · Página de Condiciones Generales --------------------------- */

.bsv-cg {
	padding: 2.5rem 0 3.5rem;
}

.bsv-cg__doc {
	max-width: 860px;
	margin: 0 auto;
	color: var( --bsv-texto );
}

.bsv-cg__header {
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
	border-bottom: 3px solid var( --bsv-oro );
}

.bsv-cg__titulo {
	margin: 0 0 0.4rem;
	font-size: clamp( 26px, 4vw, 36px );
	line-height: 1.15;
	color: var( --bsv-verde );
}

.bsv-cg__subtitulo {
	margin: 0 0 1rem;
	font-size: 17px;
	font-weight: 700;
	color: var( --bsv-texto );
}

.bsv-cg__entidad,
.bsv-cg__autorizacion {
	margin: 0 0 0.5rem;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
}

/* Índice ancla */

.bsv-cg__indice {
	padding: 1.5rem 1.75rem;
	margin-bottom: 2.5rem;
	background: var( --bsv-gris-claro );
	border: 1px solid #E2E6E9;
	border-radius: var( --bsv-radio );
}

.bsv-cg__indice-titulo {
	margin: 0 0 0.9rem;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --bsv-verde );
}

.bsv-cg__indice ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: bsvcg;
	columns: 2;
	column-gap: 2rem;
}

.bsv-cg__indice li {
	counter-increment: bsvcg;
	margin: 0 0 0.5rem;
	break-inside: avoid;
	font-size: 14px;
	line-height: 1.45;
}

.bsv-cg__indice li::before {
	content: counter( bsvcg ) ".";
	margin-right: 0.4rem;
	font-weight: 700;
	color: var( --bsv-verde );
}

.bsv-cg__indice a {
	color: var( --bsv-texto );
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.bsv-cg__indice a:hover,
.bsv-cg__indice a:focus {
	color: var( --bsv-verde );
	border-bottom-color: var( --bsv-verde );
}

/* Secciones */

.bsv-cg__seccion {
	margin-bottom: 2.25rem;
	scroll-margin-top: 90px;   /* Header sticky de Porto: si no, el ancla tapa el título. */
}

.bsv-cg__seccion-titulo {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	margin: 0 0 0.9rem;
	font-size: 20px;
	line-height: 1.3;
	color: var( --bsv-verde );
}

.bsv-cg__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	background: var( --bsv-verde );
	color: #fff;
	border-radius: 50%;
	font-size: 15px;
	font-weight: 700;
}

.bsv-cg__cuerpo p {
	margin: 0 0 0.85rem;
	font-size: 15px;
	line-height: 1.7;
	color: var( --bsv-texto );
}

.bsv-cg__cuerpo h3 {
	margin: 1.25rem 0 0.7rem;
	font-size: 16px;
	color: var( --bsv-texto );
}

.bsv-cg__cuerpo strong {
	color: #1a1a1a;
}

.bsv-cg__volver {
	margin: 0.6rem 0 0;
	font-size: 13px;
}

.bsv-cg__volver a {
	color: var( --bsv-verde );
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media ( max-width: 767px ) {
	.bsv-cg__indice ol {
		columns: 1;
	}

	.bsv-cg__indice {
		padding: 1.25rem 1.25rem;
	}

	.bsv-cg__seccion-titulo {
		font-size: 18px;
	}
}

/* --- Overrides contra el CSS dinámico de Porto -------------------------- */

/*
 * Porto emite reglas con ID a partir de sus ajustes de tema:
 *
 *     #footer            { color: #777777 }
 *     #footer a          { color: ... }
 *
 * Un selector con ID (1,0,1) le gana a cualquier clase nuestra (0,2,0), así que
 * el bloque se veía gris apagado sobre el verde. Estas reglas repiten los
 * selectores prefijados con #footer para ganar por especificidad, sin recurrir
 * a !important y sin tocar los ajustes del tema padre.
 */

#footer .bsv-footer,
#footer .bsv-footer p,
#footer .bsv-footer li,
#footer .bsv-footer__tagline {
	color: var( --bsv-texto-claro );
}

#footer .bsv-footer__titulo,
#footer .bsv-footer-legal__entidad strong,
#footer .bsv-footer-legal__autorizacion strong {
	color: var( --bsv-blanco );
}

#footer .bsv-footer__lista a,
#footer .bsv-footer-legal__links a {
	color: var( --bsv-blanco );
}

#footer .bsv-footer__lista a:hover,
#footer .bsv-footer__lista a:focus,
#footer .bsv-footer-legal__links a:hover,
#footer .bsv-footer-legal__links a:focus {
	color: var( --bsv-oro );
	border-bottom-color: var( --bsv-oro );
}

#footer .bsv-footer__lista strong {
	color: var( --bsv-oro );
}

#footer .bsv-footer__redes a {
	color: var( --bsv-blanco );
	background: rgba( 255, 255, 255, 0.16 );
}

#footer .bsv-footer__redes a:hover,
#footer .bsv-footer__redes a:focus {
	color: var( --bsv-verde-legal );
	background: var( --bsv-oro );
}

#footer .bsv-footer-legal__copy {
	color: var( --bsv-texto-suave );
}

/* La leyenda va sobre fondo blanco: el texto queda oscuro en cualquier caso. */
#footer .bsv-leyenda-juego,
#footer .bsv-leyenda-juego strong {
	color: #111;
}

/* --- WEB-04 · Línea de asistencia (Juego Responsable) -------------------- */

/*
 * El bloque de asistencia es lo que alguien busca cuando entra a esta página
 * con un problema. Va con jerarquía propia y contraste alto, no como una nota
 * al pie del texto legal.
 */
.bsv-jr__asistencia {
	margin: 2.5rem 0 0;
	padding: 1.75rem;
	background: var( --bsv-verde-footer );
	border-radius: var( --bsv-radio );
	text-align: center;
	color: var( --bsv-texto-claro );
}

.bsv-jr__titulo {
	margin: 0 0 0.85rem;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --bsv-blanco );
}

.bsv-jr__numero {
	margin: 0 0 0.6rem;
	font-size: clamp( 26px, 5vw, 34px );
	line-height: 1.1;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bsv-jr__numero a {
	color: var( --bsv-oro );
	text-decoration: none;
}

.bsv-jr__numero a:hover,
.bsv-jr__numero a:focus {
	color: var( --bsv-oro-claro );
	text-decoration: underline;
	text-underline-offset: 4px;
}

.bsv-jr__nota {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var( --bsv-texto-claro );
}

.bsv-cg__pie-legal {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #DDD;
	font-size: 13px;
	line-height: 1.6;
	color: #555;
}

.bsv-cg__pie-legal p {
	margin: 0 0 0.5rem;
	font-size: 13px;
}

.bsv-cg__pie-legal p:last-child {
	margin-bottom: 0;
}

/* --- Botones de marca (todo el sitio) ------------------------------------ */

/*
 * Porto pinta sus botones con --porto-heading-color, que es casi negro. En un
 * sitio cuya identidad son el verde y el dorado, un botón negro se lee como si
 * perteneciera a otra pieza.
 *
 * Jerarquía que se establece acá:
 *   dorado  = comprar / pagar (la acción que mueve dinero)
 *   verde   = acción principal de la pantalla
 *   contorno = acciones secundarias
 *
 * Se replica el selector de Porto con #footer/html para ganar por orden en la
 * cascada sin recurrir a !important: esta hoja se encola después de las suyas.
 */
html .btn-v-dark,
html .button:not( .alt ):not( .wc-action-btn ),
html button.button:not( .alt ):not( .wc-action-btn ),
html .wc-backward,
html .add_to_cart_button,
html .single_add_to_cart_button {
	background: var( --bsv-verde );
	border-color: var( --bsv-verde );
	color: var( --bsv-blanco );
}

html .btn-v-dark:hover,
html .btn-v-dark:focus,
html .button:not( .alt ):not( .wc-action-btn ):hover,
html button.button:not( .alt ):not( .wc-action-btn ):hover,
html .wc-backward:hover,
html .add_to_cart_button:hover,
html .add_to_cart_button:focus,
html .single_add_to_cart_button:hover,
html .single_add_to_cart_button:focus {
	background: var( --bsv-verde-footer );
	border-color: var( --bsv-verde-footer );
	color: var( --bsv-blanco );
}

/* --- Cabecera de página -------------------------------------------------- */

/*
 * La franja negra del título de Tienda y de la ficha no está en la paleta.
 * Pasa al verde de marca, que además le da continuidad con el footer.
 */
.page-top,
.page-top.page-header-1 {
	background: var( --bsv-verde-footer );
	border-bottom: 0;
}

.page-top .page-title,
.page-top h1 {
	color: var( --bsv-blanco );
}

.page-top .breadcrumb,
.page-top .breadcrumb li,
.page-top .breadcrumb .delimiter {
	color: var( --bsv-texto-suave );
}

.page-top .breadcrumb a {
	color: var( --bsv-blanco );
}

.page-top .breadcrumb a:hover,
.page-top .breadcrumb a:focus {
	color: var( --bsv-oro );
}

/* --- Cabecera del sitio: menú mobile ------------------------------------- */

/*
 * El botón hamburguesa y el ítem activo del panel salen en #0088cc, el
 * skin-color de fábrica de Porto. No se arreglan con --porto-primary-color:
 * ese celeste está escrito como hex literal en
 * wp-content/uploads/porto_styles/dynamic_style.css, un archivo que Porto
 * genera desde los ajustes guardados en la base. O sea: no viaja con el
 * deploy y se regenera solo, así que tocarlo no sirve.
 *
 * Se pisa desde acá. El prefijo html sube la especificidad por encima de la
 * de Porto (1,1,1 contra 1,1,0 en el botón; 1,3,2 contra 1,3,1 en el ítem
 * activo) para no depender del orden de encolado.
 *
 * Blanco sobre --bsv-verde: 6.55:1, AA para texto normal.
 */
html #header .mobile-toggle {
	background-color: var( --bsv-verde );
	color: var( --bsv-blanco );
}

html #header .mobile-toggle:hover,
html #header .mobile-toggle:focus {
	background-color: var( --bsv-verde-legal );
	color: var( --bsv-blanco );
}

/* El panel se abre sobre blanco: el ítem activo es la única superficie de
   color adentro. */
html #nav-panel .accordion-menu li.menu-item.active > a,
html #nav-panel .accordion-menu li.menu-item.active > .arrow {
	background-color: var( --bsv-verde );
	color: var( --bsv-blanco );
}