/* Gestor de Encargos de Diseño — estilos frontend
   Usa las variables del tema "Estudio Creativo" si están presentes,
   con valores de respaldo para funcionar con cualquier otro tema. */

.ged-form,
.ged-grid,
.ged-aviso {
	--_ink: var(--ec-ink, #221f1a);
	--_paper: var(--ec-paper, #f5f4ef);
	--_indigo: var(--ec-indigo, #2c3a56);
	--_marigold: var(--ec-marigold, #e0a63d);
	--_line: var(--ec-line, #d8d3c7);
	font-family: var(--ec-font-body, "Work Sans", system-ui, sans-serif);
	color: var(--_ink);
}

/* ---------- Avisos ---------- */
.ged-aviso {
	border: 1px solid var(--_line);
	border-left: 4px solid var(--_indigo);
	padding: 1.1rem 1.3rem;
	border-radius: 4px;
	background: var(--_paper);
	margin-bottom: 1.5rem;
}
.ged-aviso--exito { border-left-color: #4c7a5e; }
.ged-aviso--error { border-left-color: #b24a3d; }

/* ---------- Formulario ---------- */
.ged-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.1rem 1.5rem;
	margin-bottom: 1.1rem;
}
.ged-form__field--full { grid-column: 1 / -1; }

.ged-form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	letter-spacing: 0.01em;
}

.ged-form input[type="text"],
.ged-form input[type="email"],
.ged-form input[type="tel"],
.ged-form input[type="date"],
.ged-form input[type="file"],
.ged-form select,
.ged-form textarea {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--_line);
	border-radius: 3px;
	background: #fff;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--_ink);
	box-sizing: border-box;
}

.ged-form input:focus,
.ged-form select:focus,
.ged-form textarea:focus {
	outline: 2px solid var(--_indigo);
	outline-offset: 1px;
}

.ged-form__check {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.85rem;
	margin-bottom: 1.3rem;
}
.ged-form__check input { margin-top: 0.2rem; }

.ged-btn {
	display: inline-block;
	border: none;
	border-radius: 3px;
	padding: 0.85rem 1.8rem;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-decoration: none;
}
.ged-btn--primario {
	background: var(--_marigold);
	color: #221f1a;
}
.ged-btn--primario:hover { filter: brightness(0.93); }

/* ---------- Grillas de portafolio / servicios ---------- */
.ged-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6rem;
}

.ged-card {
	display: block;
	text-decoration: none;
	color: var(--_ink);
	border: 1px solid var(--_line);
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ged-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(34, 31, 26, 0.1);
}
.ged-card__imagen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--_paper); }
.ged-card__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ged-card__placeholder { width: 100%; height: 100%; background: var(--_paper); }
.ged-card__texto { padding: 1rem 1.1rem 1.2rem; }
.ged-card__texto h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.ged-card__cliente { margin: 0; font-size: 0.85rem; opacity: 0.7; }

.ged-sello {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	font-family: var(--ec-font-mono, "IBM Plex Mono", monospace);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: rgba(245, 244, 239, 0.92);
	border: 1px solid var(--_ink);
	border-radius: 999px;
	padding: 0.25rem 0.6rem;
}

.ged-grid--servicios { grid-template-columns: repeat(3, 1fr); }
.ged-servicio {
	border: 1px solid var(--_line);
	border-radius: 4px;
	padding: 1.4rem;
	background: #fff;
}
.ged-servicio__tipo {
	font-family: var(--ec-font-mono, "IBM Plex Mono", monospace);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--_indigo);
}
.ged-servicio h3 { margin: 0.4rem 0; }
.ged-servicio__precio {
	font-family: var(--ec-font-mono, "IBM Plex Mono", monospace);
	font-weight: 600;
	margin-top: 0.8rem;
}
.ged-servicio__precio span { color: var(--_indigo); }

@media (max-width: 780px) {
	.ged-form__grid { grid-template-columns: 1fr; }
	.ged-grid, .ged-grid--servicios { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.ged-grid, .ged-grid--servicios { grid-template-columns: 1fr; }
}