/*
Theme Name: Alforja
Theme URI: https://example.com/alforja
Author: Carlos
Description: Tema para webs de bikepacking y ciclismo de larga distancia (Propuesta B: alta visibilidad). Integrado con EventON para el calendario y con el plugin BikeCalendar Patrocinadores (bc-patrocinadores).
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alforja
Tags: blog, custom-menu, custom-logo, featured-images, theme-options
*/

/* ==========================================================================
   1. Variables
   ========================================================================== */
:root {
	--tinta: #14213D;
	--tinta-2: #2A3550;
	--gris: #4B5568;
	--chaleco: #FF5A1F;
	--cielo: #A9D3EE;
	--niebla: #F3F5F7;
	--borde: #DCE1E7;
	--papel: #FFFFFF;

	--f-titulo: 'Bricolage Grotesque', system-ui, sans-serif;
	--f-texto: 'Instrument Sans', system-ui, sans-serif;
	--f-datos: 'IBM Plex Mono', ui-monospace, monospace;

	--radio-s: 16px;
	--radio-m: 28px;
	--radio-l: 36px;
	--ancho: 1320px;
	--pad: clamp(18px, 3vw, 32px);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--f-texto);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, video, iframe { max-width: 100%; height: auto; }
a { color: var(--tinta); text-underline-offset: 3px; }
a:hover { color: var(--tinta-2); }
:focus-visible { outline: 3px solid var(--chaleco); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; top: 10px; left: 10px; z-index: 1000; width: auto; height: auto; clip: auto;
	padding: 12px 18px; background: var(--chaleco); color: var(--tinta); border-radius: 999px; font-weight: 700;
}
.contenedor { max-width: var(--ancho); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.mono { font-family: var(--f-datos); }

/* ==========================================================================
   3. Botones, etiquetas y sello
   ========================================================================== */
.boton, .wp-block-button__link, button.boton, input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
	background: var(--chaleco); color: var(--tinta);
	font-family: var(--f-texto); font-weight: 700; font-size: 16px; line-height: 1;
	text-decoration: none; cursor: pointer; transition: transform .15s ease;
}
.boton:hover, .wp-block-button__link:hover, input[type="submit"]:hover { color: var(--tinta); transform: translateY(-2px); }
.boton--oscuro { background: var(--tinta); color: #fff; }
.boton--oscuro:hover { color: #fff; }
.boton--grande { min-height: 56px; padding: 0 30px; font-size: 17px; }
.boton svg { width: 18px; height: 18px; }

.pastilla {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
	background: var(--niebla); color: var(--tinta); font-weight: 600; font-size: 15px; text-decoration: none;
}
.pastilla.is-activa, .pastilla:hover { background: var(--tinta); color: #fff; }

.etiqueta {
	display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
	background: var(--tinta); color: #fff; white-space: nowrap; text-decoration: none;
}
.etiqueta--chaleco { background: var(--chaleco); color: var(--tinta); }
.etiqueta--blanca { background: #fff; color: var(--tinta); }
.etiqueta--cielo { background: var(--cielo); color: var(--tinta); }

.sello {
	width: 128px; height: 128px; border-radius: 50%; background: #fff; border: 3px dashed var(--chaleco);
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	transform: rotate(-10deg); color: var(--tinta); text-decoration: none;
}
.sello small { font-family: var(--f-datos); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.sello strong { font-family: var(--f-titulo); font-weight: 800; font-size: 30px; line-height: 1; }

.subrayado { padding: 0 .12em; border-radius: .14em; background: var(--chaleco); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.subrayado--cielo { background: var(--cielo); }

/* Línea de ruta (separador de secciones) */
.ruta { display: flex; align-items: center; }
.ruta__linea { flex: 1; border-top: 3px dashed var(--tinta); }
.ruta__punto { width: 14px; height: 14px; border-radius: 50%; background: var(--tinta); }
.ruta__km {
	padding: 6px 14px; border-radius: 999px; background: var(--cielo);
	font-family: var(--f-datos); font-size: 13px; font-weight: 600; text-transform: uppercase; white-space: nowrap;
}

/* ==========================================================================
   4. Cabecera
   ========================================================================== */
.cabecera { position: relative; z-index: 50; background: var(--papel); }
.cabecera__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); }
.marca__hito {
	width: 34px; height: 44px; border-radius: 17px 17px 5px 5px; background: var(--chaleco);
	display: flex; align-items: center; justify-content: center; font-family: var(--f-titulo); font-weight: 800; font-size: 18px;
}
.marca__nombre { font-family: var(--f-titulo); font-weight: 800; font-size: 32px; letter-spacing: -0.04em; line-height: 1; }
.custom-logo { max-height: 56px; width: auto; }

.menu-principal { display: flex; align-items: center; gap: 10px; }
.menu-principal ul {
	list-style: none; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	padding: 6px; background: var(--niebla); border-radius: 999px;
}
.menu-principal li { position: relative; }
.menu-principal a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
	font-weight: 600; font-size: 15px; text-decoration: none;
}
.menu-principal .current-menu-item > a, .menu-principal .current_page_item > a, .menu-principal a:hover { background: #fff; }
.menu-principal .menu-destacado > a { background: var(--tinta); color: #fff; padding: 0 20px; }
.menu-principal .sub-menu {
	display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; flex-direction: column; align-items: stretch;
	border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgba(20, 33, 61, .14);
}
.menu-principal li:hover > .sub-menu, .menu-principal li:focus-within > .sub-menu { display: flex; }

.menu-toggle {
	display: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--niebla); color: var(--tinta);
	align-items: center; justify-content: center; cursor: pointer;
}
@media (max-width: 900px) {
	.menu-toggle { display: inline-flex; }
	.menu-principal { width: 100%; display: none; }
	.menu-principal.is-abierto { display: block; }
	.menu-principal ul { flex-direction: column; align-items: stretch; border-radius: 24px; }
	.menu-principal .sub-menu { position: static; display: flex; box-shadow: none; background: transparent; padding-left: 12px; }
}

/* ==========================================================================
   5. Portada
   ========================================================================== */
.hero { display: flex; flex-wrap: wrap; gap: 40px; align-items: stretch; padding-top: 40px; padding-bottom: 72px; }
.hero__texto { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.hero__kicker { align-self: flex-start; padding: 8px 16px; border-radius: 999px; background: var(--cielo); font-family: var(--f-datos); font-size: 13px; font-weight: 600; }
.hero__titulo { margin: 0; font-size: clamp(56px, 8.4vw, 124px); line-height: .88; letter-spacing: -0.045em; }
.hero__entradilla { margin: 0; font-size: 20px; line-height: 1.55; color: var(--tinta-2); max-width: 540px; }
.hero__botones { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__imagen {
	flex: 1 1 420px; min-width: 0; position: relative; min-height: 520px; border-radius: 32px; overflow: hidden;
	background: var(--cielo) center / cover no-repeat;
}
.hero__imagen .sello { position: absolute; top: 28px; right: 28px; }

.seccion { padding-top: 56px; padding-bottom: 80px; }
.seccion__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 32px; }
.seccion__titulo { margin: 0; font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.04em; line-height: .95; }
.seccion__enlace { font-weight: 700; font-size: 17px; }

/* Tarjetas de prueba */
.rejilla-pruebas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.prueba {
	display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 300px; padding: 26px;
	border-radius: var(--radio-m); background: var(--niebla); color: var(--tinta); text-decoration: none; transition: transform .15s ease;
}
.prueba:hover { transform: translateY(-4px); color: var(--tinta); }
.prueba--oscura { background: var(--tinta); color: #fff; }
.prueba--oscura:hover { color: #fff; }
.prueba--cielo { background: var(--cielo); }
.prueba--chaleco { background: var(--chaleco); }
.prueba__arriba { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.prueba__fecha { font-family: var(--f-titulo); font-weight: 800; font-size: 56px; line-height: .9; letter-spacing: -0.03em; }
.prueba__fecha span { display: block; font-size: 24px; }
.prueba__titulo { font-weight: 700; font-size: 22px; line-height: 1.2; margin: 0 0 6px; font-family: var(--f-texto); letter-spacing: 0; }
.prueba__datos { font-family: var(--f-datos); font-size: 13px; opacity: .85; }
.prueba__cta { font-family: var(--f-titulo); font-weight: 800; font-size: 40px; line-height: .95; letter-spacing: -0.03em; }

/* Tarjetas de artículo */
.rejilla-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.post-tarjeta { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--tinta); }
.post-tarjeta__imagen { aspect-ratio: 4 / 3; border-radius: var(--radio-m); overflow: hidden; background: var(--niebla); }
.post-tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.post-tarjeta:hover img { transform: scale(1.04); }
.post-tarjeta__meta { font-family: var(--f-datos); font-size: 13px; font-weight: 600; color: var(--gris); text-transform: uppercase; }
.post-tarjeta__titulo { font-size: 30px; line-height: 1; letter-spacing: -0.02em; margin: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }

/* Bloque newsletter */
.bloque-naranja {
	border-radius: var(--radio-l); background: var(--chaleco); padding: clamp(28px, 5vw, 56px);
	display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between;
}
.bloque-naranja h2 { margin: 0 0 10px; font-size: clamp(36px, 4.5vw, 54px); letter-spacing: -0.04em; }
.bloque-naranja p { margin: 0; font-size: 18px; }
.bloque-naranja__texto, .bloque-naranja__form { flex: 1 1 420px; }
.form-pildora { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px; background: #fff; border-radius: 999px; }
.form-pildora input[type="email"] {
	flex: 1 1 200px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px;
	font-size: 17px; font-family: var(--f-texto); color: var(--tinta); background: transparent;
}
.form-pildora button { background: var(--tinta); color: #fff; }

/* ==========================================================================
   6. Blog: listados y artículo
   ========================================================================== */
.cabecera-pagina { padding-top: 32px; padding-bottom: 28px; }
.cabecera-pagina h1 { font-size: clamp(52px, 8vw, 112px); line-height: .88; letter-spacing: -0.045em; margin: 0 0 18px; }
.cabecera-pagina p { font-size: 20px; color: var(--tinta-2); max-width: 680px; }

.articulo__cabecera { max-width: 900px; margin: 0 auto; padding-top: 40px; padding-bottom: 32px; }
.articulo__cabecera h1 { font-size: clamp(44px, 6.5vw, 84px); line-height: .92; letter-spacing: -0.04em; margin: 16px 0 20px; }
.articulo__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-family: var(--f-datos); font-size: 13px; font-weight: 600; color: var(--gris); text-transform: uppercase; }
.articulo__imagen { max-width: 1200px; margin: 0 auto 48px; padding: 0 var(--pad); }
.articulo__imagen img { width: 100%; border-radius: var(--radio-l); aspect-ratio: 16 / 9; object-fit: cover; }
.contenido { max-width: 740px; margin: 0 auto; padding: 0 var(--pad) 64px; font-size: 19px; line-height: 1.75; color: var(--tinta-2); }
.contenido h2 { font-size: 40px; color: var(--tinta); margin: 1.4em 0 .5em; }
.contenido h3 { font-size: 28px; color: var(--tinta); margin: 1.3em 0 .5em; }
.contenido img { border-radius: var(--radio-s); }
.contenido blockquote {
	margin: 1.6em 0; padding: 28px 32px; border-radius: var(--radio-m); background: var(--cielo);
	font-family: var(--f-titulo); font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; color: var(--tinta);
}
.contenido blockquote p { margin: 0; }
.contenido ul, .contenido ol { padding-left: 1.2em; }
.contenido a { color: var(--tinta); text-decoration-color: var(--chaleco); text-decoration-thickness: 3px; }
.contenido .wp-block-image figcaption { font-size: 14px; color: var(--gris); }
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }

.paginacion { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 48px 0 0; }
.paginacion .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 14px;
	border-radius: 999px; background: var(--niebla); font-weight: 700; text-decoration: none;
}
.paginacion .current { background: var(--tinta); color: #fff; }

/* ==========================================================================
   7. Patrocinadores (plugin bc-patrocinadores)
   El plugin lee estas variables --cg-* para tomar los colores y fuentes del tema.
   ========================================================================== */
:root {
	--cg-primary: var(--tinta);
	--cg-dark: #0B1428;
	--cg-accent: var(--chaleco);
	--cg-ink: var(--tinta);
	--cg-line: var(--borde);
	--cg-line-soft: #EDF0F4;
	--cg-muted: var(--gris);
	--cg-text2: var(--tinta-2);
	--cg-surface: #FFFFFF;
	--cg-ground: var(--niebla);
	--cg-chip: #E8ECF1;
	--cg-on-dark: #C6D2E3;
	--cg-display: var(--f-titulo);
	--cg-body: var(--f-texto);
	--cg-gutter: var(--pad);
}
.bcp { --bcp-accent-soft: #FFE8DE; --bcp-accent-ink: #B23A0C; }
.bcp .bcp-h2 { text-transform: none; letter-spacing: -0.035em; }
.bcp .bcp-offer { letter-spacing: -0.02em; }
.bcp .bcp-btn { border-radius: 999px; }
.hueco-patrocinio { margin-top: 8px; }
.hueco-patrocinio--portada { padding-bottom: 72px; }
.hueco-patrocinio--logos { padding-bottom: 64px; }
.hueco-patrocinio--ficha { margin-top: 40px; }
.contenido .hueco-patrocinio--codigo_mes { margin-top: 48px; }
.contenido--ancho { padding-bottom: 80px; }

/* ==========================================================================
   8. EventON: adaptación al estilo del tema
   (selectores habituales de EventON; revisar tras actualizar el plugin)
   ========================================================================== */
.calendario-filtros {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
	padding: 10px; margin-bottom: 28px; background: var(--niebla); border-radius: var(--radio-m);
}
.ajde_evcal_calendar { font-family: var(--f-texto) !important; color: var(--tinta); }
.ajde_evcal_calendar #evcal_head,
.ajde_evcal_calendar .calendar_header { padding: 10px 0 18px !important; }
.ajde_evcal_calendar .evo_month_title,
.ajde_evcal_calendar #evcal_cur,
.ajde_evcal_calendar .evcal_month_line p {
	font-family: var(--f-titulo) !important; font-weight: 800 !important; letter-spacing: -0.03em !important;
	text-transform: lowercase !important; color: var(--tinta) !important;
}
.ajde_evcal_calendar .evcal_month_line p { font-size: 40px !important; margin: 32px 0 12px !important; }
.ajde_evcal_calendar .evcal_arrows {
	width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 0 !important;
	background: var(--niebla) !important; color: var(--tinta) !important;
}
.ajde_evcal_calendar .evcal_arrows:hover { background: var(--tinta) !important; color: #fff !important; }
.ajde_evcal_calendar .evo-gototoday-btn,
.ajde_evcal_calendar .evo-sort-btn,
.ajde_evcal_calendar .evo-filter-btn {
	border-radius: 999px !important; background: var(--tinta) !important; color: #fff !important; font-weight: 700 !important;
}

/* Lista y mosaico */
.ajde_evcal_calendar .eventon_list_event {
	border: 0 !important; margin-bottom: 16px !important; border-radius: var(--radio-m) !important; overflow: hidden;
	background: var(--niebla) !important;
}
.ajde_evcal_calendar .eventon_list_event .evcal_list_a,
.ajde_evcal_calendar .eventon_list_event .desc_trig { background: transparent !important; border: 0 !important; padding: 22px 24px !important; }
.ajde_evcal_calendar .evcal_cblock,
.ajde_evcal_calendar .evo_start .date {
	font-family: var(--f-titulo) !important; font-weight: 800 !important; color: var(--tinta) !important; letter-spacing: -0.03em;
}
.ajde_evcal_calendar .evcal_cblock .evo_start .date { font-size: 48px !important; line-height: .9 !important; }
.ajde_evcal_calendar .evcal_event_title {
	font-family: var(--f-texto) !important; font-weight: 700 !important; font-size: 22px !important; color: var(--tinta) !important;
	text-transform: none !important; letter-spacing: 0 !important;
}
.ajde_evcal_calendar .evcal_event_subtitle,
.ajde_evcal_calendar .evcal_desc .evcal_desc3,
.ajde_evcal_calendar .evo_location_name,
.ajde_evcal_calendar .event_location_name { font-family: var(--f-datos) !important; font-size: 13px !important; color: var(--tinta-2) !important; text-transform: none !important; }
.ajde_evcal_calendar .evcal_desc .evcal_desc3 em,
.ajde_evcal_calendar .evcal_event_types em { border-radius: 999px !important; padding: 4px 10px !important; background: var(--tinta) !important; color: #fff !important; font-style: normal !important; font-weight: 700; }

.ajde_evcal_calendar.boxy .eventon_list_event,
.ajde_evcal_calendar .evo_tiles .eventon_list_event,
.ajde_evcal_calendar.tiles .eventon_list_event { border-radius: var(--radio-m) !important; }
.ajde_evcal_calendar.boxy .eventon_list_event .evcal_list_a,
.ajde_evcal_calendar.tiles .eventon_list_event .evcal_list_a { min-height: 280px !important; }

/* Ficha desplegada / ventana emergente */
.ajde_evcal_calendar .event_description,
.evo_lightbox .evo_pop_body,
.evo_lightbox_body { border-radius: var(--radio-m) !important; font-family: var(--f-texto) !important; }
.evo_lightbox.eventcard .evo_lightbox_content,
.evo_lightboxes .evo_lightbox_content { border-radius: 32px !important; overflow: hidden; }
.eventon_full_description, .evo_event_body_text { font-size: 17px !important; line-height: 1.65 !important; color: var(--tinta-2) !important; }
.evcal_evdata_row .evcal_evdata_icons i,
.evcal_evdata_row .evcal_evdata_custometa_icons i { color: var(--chaleco) !important; }
.evcal_evdata_row h3, .evo_h3 { font-family: var(--f-titulo) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--tinta) !important; }
.evcal_btn, .evo_btn, a.evcal_btn, .evo_moreinfo_btn, .evcal_evdata_row .evcal_btn {
	border-radius: 999px !important; background: var(--chaleco) !important; color: var(--tinta) !important;
	font-family: var(--f-texto) !important; font-weight: 700 !important; text-transform: none !important; padding: 14px 24px !important;
}

/* Página individual de evento de EventON */
.single-ajde_events .eventon_main_section,
.single-ajde_events #evcal_single_event { max-width: 960px; margin: 0 auto; padding: 32px var(--pad) 48px; }
.single-ajde_events .evosin_event_title,
.single-ajde_events .evo_event_title { font-family: var(--f-titulo) !important; font-weight: 800 !important; font-size: clamp(40px, 6vw, 72px) !important; letter-spacing: -0.04em !important; line-height: .92 !important; }

/* ==========================================================================
   9. Pie
   ========================================================================== */
.pie { background: var(--tinta); color: #C6D2E3; margin-top: 40px; }
.pie__fila { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start; padding-top: 56px; padding-bottom: 40px; }
.pie__marca { font-family: var(--f-titulo); font-weight: 800; font-size: 40px; letter-spacing: -0.04em; color: #fff; line-height: 1; margin-bottom: 10px; }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { text-decoration: underline; color: #fff; }
.pie__columnas { display: flex; flex-wrap: wrap; gap: 48px; }
.pie__columna h2, .pie .widget-title { font-family: var(--f-datos); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cielo); margin: 0 0 12px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pie__legal { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px; padding-bottom: 28px; font-size: 14px; }

/* ==========================================================================
   10. Varios
   ========================================================================== */
.buscador { display: flex; gap: 10px; max-width: 560px; }
.buscador input[type="search"] {
	flex: 1; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--borde);
	font-family: var(--f-texto); font-size: 16px; color: var(--tinta);
}
.vacio { padding: 64px; text-align: center; border-radius: var(--radio-m); border: 3px dashed var(--borde); font-size: 18px; color: var(--gris); }
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 20px; border-radius: var(--radio-s); background: var(--niebla); margin-bottom: 14px; }
.comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond textarea {
	width: 100%; padding: 14px 16px; border: 2px solid var(--borde); border-radius: var(--radio-s); font-family: var(--f-texto); font-size: 16px;
}