/*
Theme Name: OceanWP Child — AltaVoz
Theme URI: https://altavoz.com.ar/
Description: Child theme de OceanWP para altavoz.com.ar. Materializa el design system del proyecto (DESIGN.md): superficies tonales, un solo azul de accion, radios de 6px, tipografia del sistema. No edita el theme padre: lo overridea.
Author: AltaVoz
Template: oceanwp
Version: 1.0.0
Text Domain: oceanwp-child
*/

/* ============================================================================
   TOKENS — espejo de DESIGN.md. Ningun valor literal fuera de este bloque.
   ========================================================================= */
:root {
	/* Superficies */
	--color-surface: #FFFFFF;
	--color-surface-secondary: #F6F6F7;
	--color-surface-elevated: #FFFFFF;
	--color-surface-inset: #EFEFF1;
	/* Texto */
	--color-text-primary: #101114;
	--color-text-secondary: #5B6069;
	--color-text-tertiary: #71767F;
	/* Bordes */
	--color-border: #E3E4E7;
	--color-border-strong: #CFD1D6;
	--color-border-subtle: #EDEEF0;
	/* Accion */
	--color-primary: #1B63E8;
	--color-on-primary: #FFFFFF;
	--color-primary-hover: #1550C4;
	--color-primary-active: #123F9C;
	--color-primary-subtle: #EEF4FE;
	--color-accent: #1B63E8;
	--color-accent-hover: #1550C4;
	--color-accent-subtle: #EEF4FE;
	--color-focus-ring: #1B63E8;
	/* Semanticos */
	--color-success: #15803D;
	--color-error: #C62828;
	/* Radios */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-full: 9999px;
	/* Espaciado (base 4px) */
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 12px;
	--spacing-lg: 16px;
	--spacing-xl: 24px;
	--spacing-xxl: 32px;
	--spacing-xxxl: 48px;
	--spacing-huge: 64px;
	--spacing-section: 96px;
	/* Tipografia */
	--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--text-display: 3.25rem;
	--text-h1: 2.5rem;
	--text-h2: 1.75rem;
	--text-h3: 1.25rem;
	--text-body-lg: 1.125rem;
	--text-body: 1rem;
	--text-body-sm: 0.875rem;
	--text-overline: 0.75rem;
	/* Sombras */
	--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
	--shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
	--shadow-lg: 0 12px 32px rgb(0 0 0 / 0.14);
	--shadow-focus: 0 0 0 3px rgb(27 99 232 / 0.35);
}

@media (max-width: 767px) {
	:root { --spacing-section: 64px; --text-display: 2.25rem; --text-h2: 1.5rem; }
}

/* ============================================================================
   BASE
   ========================================================================= */
body,
.elementor-widget-container,
.elementor-heading-title {
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body { color: var(--color-text-primary); background: var(--color-surface); }

/* Un solo anillo de foco para todo lo interactivo (DESIGN.md · Accessibility). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-radius: var(--radius-sm);
}

/* ============================================================================
   NAVEGACION — caja normal, no mayusculas sostenidas (Decision #10)
   ========================================================================= */
#site-navigation .dropdown-menu > li > a,
#site-navigation .megamenu > li > a,
.clr .dropdown-menu > li > a,
#site-header .dropdown-menu > li > a,
ul.dropdown-menu > li > a {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 500;
	font-size: var(--text-body-sm);
}

/* ============================================================================
   BOTONES — 48px de alto, radio 6px, no pastilla (Decision #9 / #7)
   ========================================================================= */
.elementor-button,
.elementor-widget-button .elementor-button,
button[type="submit"],
input[type="submit"],
.oceanwp-theme-button {
	border-radius: var(--radius-sm) !important;
	min-height: 48px;
	padding: 0 var(--spacing-xl);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	transition: background-color 120ms ease-out, color 120ms ease-out;
}

.elementor-button:focus-visible { box-shadow: var(--shadow-focus); }

/* ============================================================================
   FORMULARIOS — 48px, radio 6px, label arriba (DESIGN.md · Form controls)
   ========================================================================= */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select,
.wpforms-field input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpforms-field textarea,
.wpforms-field select {
	border-radius: var(--radius-sm) !important;
	border: 1px solid var(--color-border) !important;
	background-color: var(--color-surface) !important;
	min-height: 48px;
	padding: var(--spacing-md) var(--spacing-lg) !important;
	color: var(--color-text-primary);
	font-size: var(--text-body);
}

input:focus, textarea:focus, select:focus,
.wpforms-field input:focus, .wpforms-field textarea:focus {
	border-color: var(--color-accent) !important;
	box-shadow: var(--shadow-focus) !important;
	outline: none;
}

::placeholder { color: var(--color-text-tertiary); opacity: 1; }

/* El label siempre visible arriba; el placeholder no es el label. */
.wpforms-field label,
.wpforms-field .wpforms-field-label {
	color: var(--color-text-primary);
	font-weight: 500;
	font-size: var(--text-body-sm);
	margin-bottom: var(--spacing-xs);
	display: block;
}

.wpforms-field .wpforms-field-sublabel,
.wpforms-field-description {
	color: var(--color-text-secondary);
	font-size: var(--text-body-sm);
}

/* ============================================================================
   CARDS — borde + tono, sin sombra en reposo (DESIGN.md · Elevation)
   ========================================================================= */
/* El borde de estas cards lo provee el propio widget de Elementor
   (`_border_*`, normalizado a `1px solid var(--color-border)` en los datos).
   Aca NO se agrega otro: dos bordes superpuestos se leen como un defecto. */
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper {
	border-radius: var(--radius-md);
	padding: var(--spacing-xl) var(--spacing-lg);
	height: 100%;
	background: var(--color-surface);
}

.elementor-widget-image-box > .elementor-widget-container,
.elementor-widget-icon-box > .elementor-widget-container {
	border-radius: var(--radius-md);
	transition: border-color 180ms ease-in-out;
}

.elementor-widget-image-box:hover > .elementor-widget-container,
.elementor-widget-icon-box:hover > .elementor-widget-container {
	border-color: var(--color-accent) !important;
}

/* Iconos de servicio: circulo sutil con el glifo en azul, no un disco pleno. */
.elementor-widget-image-box .elementor-image-box-img,
.elementor-icon.elementor-view-stacked,
.elementor-icon.elementor-view-framed {
	background-color: var(--color-accent-subtle) !important;
	color: var(--color-accent) !important;
	border-radius: var(--radius-full) !important;
}

.elementor-icon.elementor-view-stacked i,
.elementor-icon.elementor-view-framed i,
.elementor-icon.elementor-view-stacked svg,
.elementor-icon.elementor-view-framed svg {
	color: var(--color-accent) !important;
	fill: var(--color-accent) !important;
}

/* ============================================================================
   PORTFOLIO — imagen con recorte parejo, animacion de entrada neutralizada
   ========================================================================= */
.elementor-widget-image img { border-radius: var(--radius-md); }

/* El sistema anterior animaba cada imagen con grow-rotate al hover. */
.elementor-animation-grow-rotate,
.elementor-animation-grow-rotate:hover,
.elementor-animation-grow-rotate:focus,
.elementor-animation-grow-rotate:active {
	transform: none !important;
	transition: none !important;
}

/* ============================================================================
   RITMO VERTICAL
   ========================================================================= */
.elementor-section { padding-top: 0; }
.elementor-section .elementor-container { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }

/* ============================================================================
   LIMPIEZA
   ========================================================================= */

/* El badge de reCAPTCHA flotaba sobre el contenido. */
.grecaptcha-badge { visibility: hidden !important; }

/* El mapa embebido muestra UI de Google en ingles y pesa. Se reemplaza por
   un enlace en el contenido; el iframe queda oculto si todavia existe. */
.elementor-widget-google_maps iframe { display: none !important; }