/*
Theme Name: Octagenos
Theme URI: https://octagenos.com
Author: Enhance Digital Hub
Author URI: https://octagenos.com
Description: Tema a medida para Octagenos — Urbanismo, Diseño y Construcción. Reemplaza Elementor por código limpio, rápido y sin plugins. CSS moderno sin build.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: octagenos
*/

/* =========================================================================
   DESIGN TOKENS — clonados del kit Elementor actual (ID 34)
   ========================================================================= */
:root {
	/* Colores de marca */
	--color-primary:        #E6242A; /* rojo marca */
	--color-accent:         #AD181C; /* rojo oscuro (hover) */
	--color-secondary:      #0C1015; /* casi negro */
	--color-text:           #343638; /* gris oscuro (cuerpo) */
	--color-text-light:     #747C89; /* gris medio */
	--color-bg:             #FFFFFF;
	--color-bg-alt:         #FBF3EA; /* crema */
	--color-border:         #D8D2CD; /* beige */
	--color-white:          #FFFFFF;
	--color-white-soft:     rgba(255,255,255,0.82);

	/* Tipografía */
	--font-heading: "Saira Condensed", "Arial Narrow", sans-serif;
	--font-body:    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--fw-regular: 400;
	--fw-medium:  500;
	--fw-bold:    700;

	/* Escala tipográfica (fluida) */
	--fs-h1: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem);
	--fs-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
	--fs-h3: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--lh-tight: 1.1;
	--lh-base: 1.6;

	/* Layout */
	--container: 1280px;
	--container-narrow: 920px;
	--gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
	--bp-md: 768px;
	--bp-lg: 1025px;

	/* Espaciado */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;
	--section-y: clamp(3rem, 2rem + 5vw, 6rem);

	/* UI */
	--radius: 6px;
	--radius-lg: 14px;
	--shadow: 0 6px 24px rgba(12,16,21,0.10);
	--shadow-lg: 0 14px 40px rgba(12,16,21,0.16);
	--transition: 0.25s ease;
	--header-h: 84px;
}

/* =========================================================================
   RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body);
	line-height: var(--lh-base);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent); }

h1, h2, h3, h4, h5 {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--color-secondary);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { max-width: 70ch; }

/* =========================================================================
   LAYOUT HELPERS
   ========================================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--color-bg-alt); }
.grid { display: grid; gap: var(--space-md); }
.visually-hidden { position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }

/* =========================================================================
   BOTONES
   ========================================================================= */
.btn {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-family: var(--font-heading); font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: 0.03em;
	padding: 0.8em 1.6em; border-radius: var(--radius);
	background: var(--color-primary); color: var(--color-white);
	border: 2px solid var(--color-primary);
	cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
.btn--ghost { background: transparent; color: var(--color-secondary); border-color: var(--color-border); }
.btn--ghost:hover { background: var(--color-secondary); color: var(--color-white); border-color: var(--color-secondary); }
.btn--whatsapp { background:#25D366; border-color:#25D366; }
.btn--whatsapp:hover { background:#1da851; border-color:#1da851; }