/*
Theme Name: AMARA 225
Theme URI: https://ilovemyselftolove.com
Author: Kreativos Pro
Author URI: https://kreativos.pro
Description: Theme custom para AMARA 225 - Transformación Personal. Diseño minimalista y estructurado con constructor visual 100% administrable desde el backoffice de WordPress. Alineado con la identidad "Ingeniera del Alma" de Limbannia Nuñez. Filosofía: "Ofrecemos el método, no solo la inspiración". Desarrollado por Kreativos Pro - Agencia de Marketing Digital en Morelia.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amara-225
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, landing-page, custom-admin

AMARA 225 Theme, Copyright 2025 AMARA 225
Desarrollado por Kreativos Pro - Agencia de Marketing Digital en Morelia
https://kreativos.pro
AMARA 225 Theme is distributed under the terms of the GNU GPL.
*/

/**
 * =================================================================
 * AMARA 225 - THEME CUSTOM
 * =================================================================
 *
 * Filosofía del Theme:
 * "El theme debe ser tan estructurado y lógico en su administración
 * como los sistemas que AMARA 225 ofrece a sus clientes"
 *
 * Paleta de Colores:
 * - Dorado #D4AF37 (sofisticación, éxito)
 * - Azul Profundo #1B3A5F (confianza, lógica)
 * - Verde Esmeralda #50C878 (crecimiento)
 * - Terracota #E07856 (calidez)
 * - Grises y Blancos (minimalismo)
 *
 * Tipografía:
 * - Headings: Montserrat (Bold, SemiBold)
 * - Body: Open Sans (Regular, Light)
 *
 * =================================================================
 */

/* =================================================================
   1. CSS VARIABLES (Custom Properties)
   ================================================================= */

:root {
	/* Colores Principales */
	--amara-primary: #D4AF37;           /* Dorado - Éxito, Sofisticación */
	--amara-secondary: #1B3A5F;         /* Azul Profundo - Confianza, Lógica */
	--amara-accent-green: #50C878;      /* Verde Esmeralda - Crecimiento */
	--amara-accent-terracota: #E07856;  /* Terracota - Calidez */

	/* Colores Neutros */
	--amara-white: #FFFFFF;
	--amara-light-gray: #F5F5F5;
	--amara-medium-gray: #CCCCCC;
	--amara-dark-gray: #333333;
	--amara-black: #000000;

	/* Colores de Texto */
	--amara-text-primary: var(--amara-dark-gray);
	--amara-text-secondary: #666666;
	--amara-text-light: #999999;

	/* Colores de Fondo */
	--amara-bg-primary: var(--amara-white);
	--amara-bg-secondary: var(--amara-light-gray);
	--amara-bg-dark: var(--amara-secondary);

	/* Tipografía */
	--amara-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--amara-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Tamaños de Fuente */
	--amara-font-size-base: 16px;
	--amara-font-size-small: 14px;
	--amara-font-size-large: 18px;
	--amara-font-size-h1: 48px;
	--amara-font-size-h2: 36px;
	--amara-font-size-h3: 28px;
	--amara-font-size-h4: 24px;
	--amara-font-size-h5: 20px;
	--amara-font-size-h6: 18px;

	/* Espaciado */
	--amara-spacing-xs: 8px;
	--amara-spacing-sm: 16px;
	--amara-spacing-md: 24px;
	--amara-spacing-lg: 32px;
	--amara-spacing-xl: 48px;
	--amara-spacing-xxl: 64px;

	/* Bordes y Radios */
	--amara-border-radius: 4px;
	--amara-border-radius-lg: 8px;
	--amara-border-width: 1px;

	/* Sombras */
	--amara-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
	--amara-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
	--amara-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);

	/* Transiciones */
	--amara-transition: all 0.3s ease;
	--amara-transition-fast: all 0.15s ease;

	/* Z-index Layers */
	--amara-z-base: 1;
	--amara-z-dropdown: 100;
	--amara-z-sticky: 200;
	--amara-z-fixed: 300;
	--amara-z-modal: 400;
	--amara-z-toast: 500;
}

/* =================================================================
   2. RESET Y BASE STYLES
   ================================================================= */

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

html {
	font-size: var(--amara-font-size-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--amara-font-body);
	font-size: var(--amara-font-size-base);
	line-height: 1.6;
	color: var(--amara-text-primary);
	background-color: var(--amara-bg-primary);
}

/* =================================================================
   3. TIPOGRAFÍA
   ================================================================= */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--amara-font-heading);
	font-weight: 700;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: var(--amara-spacing-md);
	color: var(--amara-secondary);
}

h1 {
	font-size: var(--amara-font-size-h1);
	font-weight: 700;
}

h2 {
	font-size: var(--amara-font-size-h2);
	font-weight: 600;
}

h3 {
	font-size: var(--amara-font-size-h3);
}

h4 {
	font-size: var(--amara-font-size-h4);
}

h5 {
	font-size: var(--amara-font-size-h5);
}

h6 {
	font-size: var(--amara-font-size-h6);
}

p {
	margin-top: 0;
	margin-bottom: var(--amara-spacing-md);
	line-height: 1.7;
}

a {
	color: var(--amara-primary);
	text-decoration: none;
	transition: var(--amara-transition-fast);
}

a:hover,
a:focus {
	color: var(--amara-secondary);
	text-decoration: underline;
}

strong,
b {
	font-weight: 600;
}

em,
i {
	font-style: italic;
}

/* =================================================================
   4. LAYOUT BASE
   ================================================================= */

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

.site-content {
	flex: 1;
}

.container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--amara-spacing-md);
	padding-right: var(--amara-spacing-md);
}

.container-wide {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--amara-spacing-md);
	padding-right: var(--amara-spacing-md);
}

.container-narrow {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--amara-spacing-md);
	padding-right: var(--amara-spacing-md);
}

/* =================================================================
   5. BOTONES BASE
   ================================================================= */

.btn,
.wp-block-button__link {
	display: inline-block;
	padding: 14px 32px;
	font-family: var(--amara-font-heading);
	font-size: var(--amara-font-size-base);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--amara-border-radius);
	cursor: pointer;
	transition: var(--amara-transition);
	white-space: nowrap;
}

.btn-primary {
	background-color: var(--amara-primary);
	color: var(--amara-dark-gray);
	border-color: var(--amara-primary);
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--amara-secondary);
	color: var(--amara-white);
	border-color: var(--amara-secondary);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--amara-shadow-md);
}

.btn-secondary {
	background-color: var(--amara-secondary);
	color: var(--amara-white);
	border-color: var(--amara-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
	background-color: var(--amara-primary);
	color: var(--amara-dark-gray);
	border-color: var(--amara-primary);
	text-decoration: none;
}

.btn-outline {
	background-color: transparent;
	color: var(--amara-primary);
	border-color: var(--amara-primary);
}

.btn-outline:hover,
.btn-outline:focus {
	background-color: var(--amara-primary);
	color: var(--amara-dark-gray);
	text-decoration: none;
}

/* =================================================================
   6. UTILIDADES
   ================================================================= */

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--amara-spacing-xs); }
.mb-2 { margin-bottom: var(--amara-spacing-sm); }
.mb-3 { margin-bottom: var(--amara-spacing-md); }
.mb-4 { margin-bottom: var(--amara-spacing-lg); }
.mb-5 { margin-bottom: var(--amara-spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--amara-spacing-xs); }
.mt-2 { margin-top: var(--amara-spacing-sm); }
.mt-3 { margin-top: var(--amara-spacing-md); }
.mt-4 { margin-top: var(--amara-spacing-lg); }
.mt-5 { margin-top: var(--amara-spacing-xl); }

/* =================================================================
   7. RESPONSIVE - MOBILE FIRST
   ================================================================= */

/* Tablet */
@media (max-width: 1199px) {
	:root {
		--amara-font-size-h1: 40px;
		--amara-font-size-h2: 32px;
		--amara-font-size-h3: 24px;
	}

	.container,
	.container-wide {
		padding-left: var(--amara-spacing-sm);
		padding-right: var(--amara-spacing-sm);
	}
}

/* Mobile */
@media (max-width: 767px) {
	:root {
		--amara-font-size-base: 15px;
		--amara-font-size-h1: 32px;
		--amara-font-size-h2: 28px;
		--amara-font-size-h3: 22px;
		--amara-font-size-h4: 20px;
		--amara-spacing-lg: 24px;
		--amara-spacing-xl: 32px;
		--amara-spacing-xxl: 48px;
	}

	.btn,
	.wp-block-button__link {
		display: block;
		width: 100%;
		padding: 16px 24px;
	}
}

/* =================================================================
   8. WORDPRESS ESPECÍFICO
   ================================================================= */

/* Alineación de imágenes */
.alignleft {
	float: left;
	margin-right: var(--amara-spacing-md);
	margin-bottom: var(--amara-spacing-md);
}

.alignright {
	float: right;
	margin-left: var(--amara-spacing-md);
	margin-bottom: var(--amara-spacing-md);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--amara-spacing-md);
}

.alignnone {
	margin-bottom: var(--amara-spacing-md);
}

/* WordPress Blocks */
.wp-block-image img {
	max-width: 100%;
	height: auto;
}

.wp-block-embed {
	margin-bottom: var(--amara-spacing-md);
}

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

.screen-reader-text:focus {
	background-color: var(--amara-light-gray);
	clip: auto !important;
	clip-path: none;
	color: var(--amara-text-primary);
	display: block;
	font-size: var(--amara-font-size-small);
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* =================================================================
   FIN DEL STYLE.CSS
   Los estilos adicionales están en /assets/css/
   ================================================================= */