/**
 * Otros proyectos — piel del formulario Gravity Forms (.oc-cartas).
 * La caja del .dc («7 cartas para transformar tu vida»): campo de correo
 * Jost 13px con borde 1px tinta y fondo transparente, botón tinta/oro,
 * consentimiento 15px y la nota «Sin spam.». El esqueleto compartido
 * (honeypot, «(Required)», placeholder, movimiento reducido) vive en
 * gf-forms-base.css; aquí solo los valores de esta página, consumiendo
 * tokens del theme. Los internos de GF no son alcanzables desde bloque ni
 * theme.json → CSS irreducible. Se encola solo en páginas con un bloque
 * gravityforms/form.
 */

/* ---- API de variables de GF ---- */

.oc-cartas_wrapper {
	font-family: var(--wp--preset--font-family--serif); /* PT Serif del .dc */
	color: var(--wp--preset--color--ink);
}

.oc-cartas_wrapper .gform_fields {
	--gf-color-danger: var(--wp--preset--color--gold-dark);
	--gf-field-gap-x: 0px;
	--gf-field-gap-y: 10px;
	--gf-field-choice-gap: 0px;
	--gf-desc-space: 10px;
}

/* ---- Etiquetas: el .dc no rotula el correo (placeholder) ---- */

.oc-cartas .gform-field-label:not(.gform-field-label--type-inline) .gform-field-label__text {
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--custom--label--font-size);
	font-weight: 400;
	letter-spacing: var(--wp--custom--label--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

/* El campo de correo del .dc no lleva etiqueta: se oculta (el
   placeholder «Tu correo electrónico» lo nombra). */
/* El consentimiento del .dc: PT Serif 15px, linea 1.5. El tema framework de
   GF 3.1 construye la etiqueta en linea con --gf-ctrl-label-*-secondary:
   hay que fijar esas variables, no solo font-size. */
.oc-cartas .gfield_consent_label {
	--gf-ctrl-label-font-family-secondary: var(--wp--preset--font-family--serif);
	--gf-ctrl-label-font-size-secondary: 15px;
	--gf-ctrl-label-line-height-secondary: 1.5;
	--gf-ctrl-label-color-secondary: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

/* El campo de correo del .dc no lleva etiqueta visible (el placeholder
   lo nombra): se oculta pero sigue disponible para lectores de pantalla. */
.oc-cartas .gfield--type-email .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Input: Jost 13px, caja con borde 1px tinta, fondo transparente ---- */

.oc-cartas_wrapper .oc-cartas .ginput_container input[type="email"] {
	--gf-ctrl-bg-color: transparent;
	--gf-ctrl-bg-color-focus: transparent;
	--gf-ctrl-bg-color-hover: transparent;
	--gf-ctrl-bg-color-error: transparent;
	--gf-ctrl-border-color: var(--wp--preset--color--ink);
	--gf-ctrl-border-color-focus: var(--wp--preset--color--ink);
	--gf-ctrl-border-color-hover: var(--wp--preset--color--ink);
	--gf-ctrl-border-width: 1px;
	--gf-ctrl-height: auto;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	padding: 15px 18px;
	width: 300px;
	max-width: 100%;
}

.oc-cartas_wrapper .oc-cartas .ginput_container input[type="email"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--ink);
}

/* ---- Fila del botón: el input conserva su ancho de 300px del .dc ---- */

.oc-cartas .gfield--type-email .ginput_container {
	max-width: 300px;
}

/* «Sin spam.»: la línea Jost 10px .16em del .dc (campo html de GF). */
.oc-cartas .gfield--type-html .oc-sin-spam {
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--custom--label--font-size);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--tint--ink-45);
}

/* ---- Consentimiento: casilla nativa 16px, accent tinta ---- */

/* La casilla nativa del .dc (16px, accent tinta). El tema framework de GF
   la dimensiona con --gf-ctrl-* : hay que fijar esas variables ademas
   del alto/ancho. */
.oc-cartas input[type="checkbox"],
.oc-cartas input[type="checkbox"].gform-choice-input {
	--gf-ctrl-choice-size: 16px;
	--gf-ctrl-accent-color: var(--wp--preset--color--ink);
	width: 16px;
	height: 16px;
	flex: none;
	margin: 3px 0 0;
	border: none;
	border-bottom: none;
	accent-color: var(--wp--preset--color--ink);
	cursor: pointer;
}

/* ---- Botón: tinta/oro, Jost 10px .28em 600 ---- */

/* El tema framework de GF 3.1 construye el botón con variables
   (--gf-ctrl-btn-*) que consumed su propia regla: hay que fijar esas
   variables, no solo background/color (el .dc: tinta, texto oro, Jost
   10px .28em 600, padding 15/26, borde 1px tinta). */
.oc-cartas_wrapper .oc-cartas .gform_button {
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--ink);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--gold);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--gold);
	--gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--ink);
	--gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--gold);
	--gf-ctrl-btn-color-focus-primary: var(--wp--preset--color--ink);
	--gf-ctrl-btn-border-width-ctrl: 0px;
	--gf-ctrl-btn-border-width-primary: 1px;
	--gf-ctrl-btn-border-color-primary: var(--wp--preset--color--ink);
	--gf-ctrl-btn-font-family: var(--wp--preset--font-family--jost);
	--gf-ctrl-btn-font-size: var(--wp--custom--label--font-size);
	--gf-ctrl-btn-font-weight: 600;
	--gf-ctrl-btn-letter-spacing: var(--wp--custom--label--tracking);
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-padding-x: 26px;
	--gf-ctrl-btn-padding-y: 15px;
	--gf-ctrl-btn-radius: 0px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--gold);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--custom--label--font-size);
	font-weight: 600;
	letter-spacing: var(--wp--custom--label--tracking);
	text-transform: uppercase;
	text-align: left;
	padding: 15px 26px;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.oc-cartas_wrapper .oc-cartas .gform_button:hover,
.oc-cartas_wrapper .oc-cartas .gform_button:focus-visible {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

/* ---- Confirmación: la línea del .dc («Te lo hemos enviado…») ---- */

.oc-cartas_wrapper .gform_confirmation_wrapper {
	margin-top: 0;
	border-top: none;
}

.oc-cartas_wrapper .gform_confirmation_wrapper p {
	margin: 0;
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--custom--form--label-size);
	letter-spacing: var(--wp--custom--form--label-tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}