/*
Theme Name: Lemat.Club Theme
Theme URI: https://lemat.club
Author: trestres.cl
Author URI: https://trestres.cl
Description: Taylor made theme for Lemat.club
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Private
License URI: #
Text Domain: lemat-club-theme
Tags: elementor, custom-theme, portfolio
*/

/* =============================================
   WEBFONTS — Maragsa Display (Títulos)
   ============================================= */

@font-face {
	font-family: 'Maragsa';
	src: url('fonts/Maragsa-Display.woff2') format('woff2'),
	     url('fonts/Maragsa-Display.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* =============================================
   WEBFONTS — General Sans (Cuerpo)
   ============================================= */

@font-face {
	font-family: 'General Sans';
	src: url('fonts/GeneralSans-Variable.woff2') format('woff2'),
	     url('fonts/GeneralSans-Variable.woff') format('woff');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'General Sans';
	src: url('fonts/GeneralSans-Regular.woff2') format('woff2'),
	     url('fonts/GeneralSans-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'General Sans';
	src: url('fonts/GeneralSans-Semibold.woff2') format('woff2'),
	     url('fonts/GeneralSans-Semibold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* =============================================
   CSS CUSTOM PROPERTIES — Design Tokens
   ============================================= */

:root {
	/* Tipografía */
	--font-heading:  'Maragsa', Georgia, serif;
	--font-body:     'General Sans', system-ui, sans-serif;

	/* Colores base */
	--color-bg:      #F8F5F2;
	--color-text:    #111111;
	--color-text-muted: #555555;
	--color-white:   #FFFFFF;
	--color-black:   #000000;

	/* Grilla — 12 columnas con separadores */
	--grid-columns:  12;
	--grid-gap:      1px;
	--grid-padding:  clamp(16px, 3vw, 48px);

	/* Espaciado */
	--space-xs:  0.5rem;
	--space-sm:  1rem;
	--space-md:  2rem;
	--space-lg:  4rem;
	--space-xl:  8rem;

	/* Tipografía — escala */
	--text-xs:   0.75rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.25rem;
	--text-xl:   2rem;
	--text-2xl:  3rem;
	--text-3xl:  clamp(3rem, 8vw, 7rem);
}

/* =============================================
   RESET & BASE
   ============================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* =============================================
   TIPOGRAFÍA BASE
   ============================================= */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

p, li, blockquote, figcaption {
	font-family: var(--font-body);
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img, video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* =============================================
   LAYOUT — Contenedor principal
   ============================================= */

.site-wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-content {
	flex: 1 0 auto;
}

/* Contenedor estándar */
.container {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--grid-padding);
}

/* =============================================
   GRILLA — Columnas verticales decorativas
   (Replicando la grilla visual del diseño)
   ============================================= */

.grid-overlay {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	gap: var(--grid-gap);
	padding-inline: var(--grid-padding);
	opacity: 0;
	transition: opacity 0.2s;
}

.grid-overlay.is-visible {
	opacity: 1;
}

.grid-overlay__col {
	background-color: rgba(0, 0, 0, 0.04);
}

/* =============================================
   ELEMENTOR — Overrides mínimos
   ============================================= */

/* Asegurar que Elementor use las fuentes del tema */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--font-heading);
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
	font-family: var(--font-body);
}

/* Sin padding por defecto en sección de Elementor */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1440px;
}

/* Reset de estilos de WordPress que interfieren con Elementor */
.elementor-page .elementor {
	hyphens: manual;
}

/* =============================================
   HEADER — Mínimo (Elementor lo reemplaza)
   ============================================= */

.site-header {
	position: relative;
	z-index: 100;
}

/* =============================================
   FOOTER — Mínimo (Elementor lo reemplaza)
   ============================================= */

.site-footer {
	flex-shrink: 0;
}

/* =============================================
   WORDPRESS — Estilos de contenido básico
   ============================================= */

.wp-block-image img {
	border-radius: 0;
}

.aligncenter {
	margin-inline: auto;
}

/* =============================================
   ACCESIBILIDAD
   ============================================= */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 2px;
}