/*
Theme Name: easyi18n
Theme URI: https://easyi18n.com
Description: Child theme de GeneratePress para easyi18n.com. Paleta y tipografías (PT Sans + PT Mono) tomadas del design system de la app easyi18n; ver docs/PAUTA-GRAFICA.md.
Author: easyi18n
Author URI: https://easyi18n.com
Template: generatepress
Version: 0.3.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: easyi18n
*/

/*
GeneratePress encola este archivo solo (handle `generate-child`, después de
`generate-style` y del CSS dinámico del Customizer, así que gana a igual
especificidad). Colores y escala tipográfica viven en el Customizer de GP
(config/generatepress.json); acá solo va lo que GP no puede expresar.
*/

/* ==========================================================================
   Fuentes propias (SIL OFL 1.1, licencias en assets/fonts/). Mismos archivos
   y subsets que sirve Google Fonts, alojados acá para no llamar a Google.
   ========================================================================== */

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/pt-sans-400-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/pt-sans-400-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'PT Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/pt-sans-400-italic-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'PT Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/pt-sans-400-italic-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(assets/fonts/pt-sans-700-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(assets/fonts/pt-sans-700-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'PT Sans';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(assets/fonts/pt-sans-700-italic-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'PT Sans';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(assets/fonts/pt-sans-700-italic-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'PT Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/pt-mono-400-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'PT Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/pt-mono-400-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Logo: SVG inline (inc/brand.php) tintado con la tinta principal.
   Altura 32px como el header del landing.
   ========================================================================== */

.site-logo {
	color: var(--contrast);
}

.site-logo a {
	display: inline-block;
	line-height: 0;
}

.site-logo svg {
	display: block;
	height: 32px;
	width: auto;
}

/* ==========================================================================
   Reglas duras: botones e inputs. Fuente: pantalla de login de la app
   (design/reference/login-register.html); textarea del spec de inputs.
   Los colores vienen de las variables de GP; acá va todo lo demás.
   ========================================================================== */

/* Botón primario (.submit del login): coral40 + blanco, 46 de alto, radio 10 */
button:not(.menu-toggle),
html input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button .wp-block-button__link,
.wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	background-color: var(--accent);
	color: var(--on-accent);
	font-family: PT Sans, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: filter 0.15s, background-color 0.15s;
}

button:not(.menu-toggle):hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button .wp-block-button__link:hover,
.wp-block-search__button:hover {
	background-color: var(--accent);
	color: var(--on-accent);
	filter: brightness(1.06);
}

button:not(.menu-toggle):active,
input[type="submit"]:active,
.button:active,
.wp-block-button .wp-block-button__link:active {
	filter: brightness(0.92);
}

button:disabled,
input[type="submit"]:disabled,
.button:disabled,
.wp-block-button .wp-block-button__link[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
	filter: none;
}

/* Botón neutro con borde (.sso del login): sin coral, 44 de alto, radio 9.
   En bloques: estilo "Outline". */
.wp-block-button.is-style-outline .wp-block-button__link,
.button.is-style-outline {
	height: 44px;
	border-radius: 9px;
	border: 1px solid var(--contrast-3);
	background-color: transparent;
	color: var(--contrast);
	font-size: 14px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.button.is-style-outline:hover {
	background-color: var(--base);
	color: var(--contrast);
	filter: none;
}

/* Variante en acento del botón neutro: misma geometría, borde y texto en
   accent. Hover con un velo del propio acento, que funciona en claro y en
   oscuro (el relleno sólido lo tiene el primario). */
.wp-block-button.is-style-outline-accent .wp-block-button__link,
.button.is-style-outline-accent {
	height: 44px;
	border-radius: 9px;
	border: 1px solid var(--accent);
	background-color: transparent;
	color: var(--accent);
	font-size: 14px;
}

.wp-block-button.is-style-outline-accent .wp-block-button__link:hover,
.button.is-style-outline-accent:hover {
	background-color: var(--base);
	background-color: color-mix(in srgb, var(--accent) 8%, transparent);
	color: var(--accent);
	filter: none;
}

/* Campos (.field del login): 42 de alto, radio 9, fondo base-2, borde outline-variant */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
.wp-block-search__input {
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--outline-variant);
	border-radius: 9px;
	background-color: var(--field);
	color: var(--contrast);
	font-family: PT Sans, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1;
	transition: border-color 0.15s;
}

/* Multilínea (spec de inputs): misma piel, cuerpo 15 / 1.45, padding 12 14 */
textarea {
	padding: 12px 14px;
	border: 1px solid var(--outline-variant);
	border-radius: 9px;
	background-color: var(--field);
	color: var(--contrast);
	font-family: PT Sans, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	transition: border-color 0.15s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.wp-block-search__input:focus {
	outline: 0;
	border-color: var(--contrast-2);
	background-color: var(--field);
	color: var(--contrast);
}

input::placeholder,
textarea::placeholder {
	color: var(--contrast-2);
	opacity: 1;
}

input:disabled,
select:disabled,
textarea:disabled {
	background-color: transparent;
	border-color: var(--outline-variant);
}

/* Etiqueta y ayuda (.lbl / .hint del login). El login usa 12 px a 7 px de
   distancia; Leo pidió más cerca y un punto más grande (2026-09-14). */
label {
	display: block;
	margin-bottom: 5px;
	color: var(--contrast);
	font-size: 13px;
	font-weight: 700;
}

.hint,
.wpcf7-not-valid-tip {
	font-size: 11px;
	color: var(--contrast-2);
}

.wpcf7-not-valid-tip {
	color: var(--error);
}

/* ==========================================================================
   Eyebrow: PT Mono 11 mayúsculas (tipografía en el Customizer), tinta 2.
   ========================================================================== */

.eyebrow {
	color: var(--contrast-2);
}

/* ==========================================================================
   Página de contacto (patrón easyi18n/contact). Misma idea que tryruse.com:
   cabecera en dos columnas, panel de datos directos, formulario en tarjeta.
   Tarjetas como las del landing (base-3, borde outline-variant, radio 12).
   ========================================================================== */

.page .inside-article {
	padding: 0;
}

.ei-section {
	padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}

.ei-head {
	display: grid !important;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: clamp(2rem, 1rem + 4vw, 4.5rem) !important;
	align-items: start;
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.ei-head .wp-block-column > * + * {
	margin-top: 0.8rem;
}

.ei-head h1 {
	margin: 0;
}

.ei-lede {
	font-size: clamp(16px, 2vw, 19px);
	color: var(--contrast-2);
	margin: 0;
}

.ei-contact {
	display: grid !important;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(1.5rem, 1rem + 3vw, 3rem) !important;
	align-items: start;
}

.ei-stack > * + * {
	margin-top: 1rem;
}

.ei-panel,
.ei-mini,
.ei-form-card {
	background: var(--base-3);
	border: 1px solid var(--outline-variant);
	border-radius: 12px;
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.ei-panel__title {
	margin: 0 0 0.75rem;
}

.ei-panel__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.65rem 0;
	border-top: 1px solid var(--outline-variant);
	font-family: PT Mono, ui-monospace, monospace;
	font-size: 13px;
	line-height: 1.4;
}

.ei-panel__row span {
	color: var(--contrast-2);
	white-space: nowrap;
}

.ei-panel__row b {
	font-weight: 400;
	color: var(--contrast);
	text-align: right;
	overflow-wrap: anywhere;
}

.ei-panel__row a {
	color: inherit;
	text-decoration: none;
}

.ei-panel__row a:hover {
	color: var(--accent);
}

.ei-mini h3 {
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -0.005em;
	margin: 0 0 0.5rem;
}

.ei-mini p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--contrast-2);
	margin: 0;
}

.ei-form-card {
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.ei-form-card__title {
	font-size: 20px;
	letter-spacing: -0.2px;
	margin: 0 0 1.5rem;
}

.ei-field {
	margin-bottom: 14px;
}

.ei-field__hint {
	font-weight: 400;
	font-size: 11px;
	color: var(--contrast-2);
}

.ei-form-card :is(input[type="text"], input[type="email"], select, textarea) {
	width: 100%;
}

.ei-form-card textarea {
	min-height: 8rem;
	resize: vertical;
}

.ei-field--quiz input {
	max-width: 8rem;
}

/* CF7 envuelve la pregunta del quiz en su propio <label> junto al input, así
   que hereda la etiqueta en negrita y queda en la misma línea. La pregunta no
   es la etiqueta del campo (esa es la de arriba): se trata como ayuda. */
.ei-field--quiz .wpcf7-form-control-wrap label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	margin-bottom: 0;
	font-size: 11px;
	font-weight: 400;
	color: var(--contrast-2);
}

.ei-form-card .wpcf7-submit {
	width: 100%;
	margin-top: 6px;
}

.ei-form-card :is(input, select, textarea).wpcf7-not-valid {
	border-color: var(--error);
}

.ei-form-card .wpcf7-response-output {
	margin: 1.25rem 0 0 !important;
	padding: 0.9rem 1.1rem !important;
	border: 1px solid var(--outline-variant) !important;
	border-left: 3px solid var(--accent) !important;
	border-radius: 9px;
	font-size: 13px;
	color: var(--contrast-2);
}

.ei-form-card form.sent .wpcf7-response-output {
	border-left-color: var(--success) !important;
}

.ei-form-card form.invalid .wpcf7-response-output,
.ei-form-card form.failed .wpcf7-response-output {
	border-left-color: var(--error) !important;
}

.ei-form-note {
	font-size: 13px;
	color: var(--contrast-2);
	margin: 1.5rem 0 0;
	padding-top: 1.15rem;
	border-top: 1px solid var(--outline-variant);
}

@media (max-width: 900px) {
	.ei-contact {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 781px) {
	.ei-head {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Modo oscuro: sigue al sistema (decisión de Leo, 2026-09-08). Los valores
   claros los imprime GP desde el Customizer; acá se redefinen solo las
   variables de rol con los tokens oscuros del design system. Los tonos con
   nombre (coral-10/60/80/90) no cambian.
   ========================================================================== */

:root {
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--contrast: #E5DFDC;         /* onSurface · neutral90 */
		--contrast-2: #D5C6C1;       /* onSurfaceVariant · neutralVariant80 */
		--contrast-3: #91847F;       /* outline · neutralVariant60 */
		--base: #2E2C2B;             /* surfaceContainerHigh */
		--base-2: #1E1C1B;           /* surfaceContainerLow · página */
		--base-3: #121110;           /* surfaceContainerLowest · tarjeta */
		--field: #2E2C2B;            /* campos: surfaceContainerHigh (login) */
		--accent: #FFB39E;           /* primary · coral80 */
		--on-accent: #5C1A0E;        /* onPrimary · coral20 */
		--outline-variant: #504642;  /* neutralVariant30 */
		--success: #8DD3A0;
		--success-container: #155B28;
		--warning: #E2BC52;
		--warning-container: #6B5000;
		--error: #FFB0C2;
		--error-container: #970C32;
		--info: #B4C7FF;
		--info-container: #284598;
	}
}