/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Version: 1.1
 * Text Domain: blocksy
 */

/* Paginas de ARMember: el formulario trae su titulo, el de la pagina sobra. */
.esn-sin-titulo .hero-section,
.esn-sin-titulo .entry-header,
.esn-sin-titulo .page-title {
	display: none;
}

/* ==================================================================
   EL RECUADRO DE LA CHARLA

   Va adentro de las cuatro páginas de charla, que son páginas de
   WordPress y no tienen .html local: por eso su estilo vive acá, en el
   tema hijo, y no en el css del sitio estático.

   Los colores son los de Aire —índigo y azul—, no los de
   Tierra: cada sitio pinta lo suyo con su propia paleta.

   La fuente Earth se declara de nuevo acá a propósito. Estas páginas las
   dibuja Blocksy, no nuestras plantillas, así que el css/styles.css del
   sitio —donde vive el @font-face— no se carga: sin esto el título cae
   a Arial y no se parece en nada al resto del sitio.
   ================================================================== */
@font-face {
	font-family: 'Earth';
	src: url('fonts/Earth.woff') format('woff'),
	     url('fonts/Earth.ttf') format('truetype'),
	     url('fonts/Earth.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.esn-charla {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

/* Earth y mayúscula, como todos los títulos del sitio. */
.esn-charla-titulo {
	font-family: 'Earth', Arial, sans-serif;
	text-transform: uppercase;
	font-size: 36px;
	line-height: 1.15;
	color: #2c2c99;
	margin: 0 0 24px;
}

/* La placa y la fecha van juntas: la fecha se escribe encima de la franja
   de color que la imagen trae abajo, no debajo de la imagen. Todo en
   porcentajes para que siga en su lugar cuando la placa se achica. */
.esn-charla-placa-caja {
	position: relative;
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0 auto 24px;
}

.esn-charla-placa {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
}

.esn-charla-fecha-encima {
	position: absolute;
	left: 0;
	right: 0;
	/* Las dieciséis placas traen su franja de color abajo, y todas arrancan
	   cerca del 83% del alto: a esta altura el texto cae adentro de la
	   franja en las cuatro de cada sitio. */
	bottom: 4.5%;
	color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-align: center;
	line-height: 1.2;
	padding: 0 12px;
}

.esn-charla-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 12px;
	background: #4054B2;
	color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
}

.esn-charla-btn:hover,
.esn-charla-btn:focus {
	background: #2c2c99;
	color: #FFFFFF;
}

/* La casilla de la fecha, para cuando la página no tiene placa. */
.esn-charla-fecha {
	margin: 24px auto 0;
	padding: 14px 22px;
	border: 1px solid #ebeff1;
	border-radius: 12px;
	background: #FFFFFF;
	display: inline-block;
}

.esn-charla-fecha-dia {
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #2c2c99;
}

.esn-charla-nota {
	font-size: 13px;
	color: #6B6B76;
	margin: 16px 0 0;
}

.esn-charla-vacia p {
	margin: 0;
	color: #6B6B76;
}

@media (max-width: 600px) {
	.esn-charla-titulo { font-size: 24px; }
	/* La placa se achica con la pantalla y la franja también: el texto tiene
	   que achicarse con ella o se le sale. */
	.esn-charla-fecha-encima { font-size: 12px; }
}


/* ------------------------------------------------------------------
   Paginas de formulario

   Las que usan la plantilla compartida "Formulario":
   /formulario-retiro/, /formulario-evento/, /formulario-charla-abierta/ y
   /reserva-tu-lugar/. Existen solo en WordPress, no tienen HTML en el sitio
   estatico, asi que su diseno vive aca y no en css/styles.css, que es la
   hoja del sitio de C:\Webs.

   El titulo hereda Earth y mayuscula de la regla de marca del sitio; aca
   solo se le fija el tamano. Los h1 van entre 24 y 36 segun el lugar: para
   estas paginas el usuario definio 24.
   ------------------------------------------------------------------ */
body .esn-formulario h1 {
	font-size: 24px;
}

/* La nota de campos obligatorios, justo arriba del boton. */
.esn-nota-obligatorios {
	margin: 0 0 8px;
	font-size: 14px;
	color: #2c2c99;
}

/* ------------------------------------------------------------------
   El cartel de membresia del boton INSCRIPCIONES

   Los colores salen de las variables del sitio, no de valores escritos a
   mano: cada uno tiene su propia paleta en el :root de css/styles.css
   —Tierra rojo, Luz dorado— y con las variables la misma hoja sale del
   color de cada sitio sin tocar una linea.

   Las medidas estan copiadas de .hero-btn del propio sitio (padding
   10px 22px, Roboto 12px, 700, mayusculas, letter-spacing .5px, radio 12)
   para que el cartel parezca parte del sitio y no algo pegado encima.
   ------------------------------------------------------------------ */

.esn-membresia {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.6);
}

.esn-membresia[hidden] {
	display: none;
}

.esn-membresia-caja {
	position: relative;
	width: 100%;
	max-width: 420px;
	padding: 32px 28px 24px;
	background: var(--color-white, #ffffff);
	border: 2px solid var(--color-accent);
	border-radius: 24px;
	text-align: center;
}

.esn-membresia-cerrar {
	position: absolute;
	top: 10px;
	right: 14px;
	padding: 0;
	background: none;
	border: none;
	color: var(--color-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.esn-membresia-cerrar:hover {
	color: var(--color-accent);
}

.esn-membresia-titulo {
	margin: 0 0 12px;
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-accent);
}

.esn-membresia-texto {
	margin: 0 0 22px;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-dark);
}

/* Copiado de .hero-btn: mismo padding, misma letra, mismo radio 12. */
.esn-membresia-boton {
	display: inline-block;
	padding: 10px 22px;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	border: none;
	border-radius: 12px;
	white-space: nowrap;
	cursor: pointer;
	background: var(--color-primary);
	color: var(--color-white, #ffffff);
}

.esn-membresia-boton:hover {
	background: var(--color-accent);
	color: var(--color-white, #ffffff);
}

.esn-membresia-cuenta {
	margin: 16px 0 0;
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--color-muted);
}