/* ==========================================================================
   KIT DE DISEÑO SINGULARGREEN  ·  v1.0.0
   ==========================================================================
   - Solo se aplica a páginas que NO están hechas con Elementor,
     gracias al selector  body:not(.elementor-page).
   - Cuando migres una página a Gutenberg, hereda este kit sola.
   - Las páginas Elementor (incluida la home) NO se ven afectadas.

   >>> PARA CAMBIAR COLORES: edita SOLO el bloque :root de aquí abajo. <<<
   Los colores exactos de tu marca los tienes en Elementor:
   Editar con Elementor → menú ☰ → Ajustes del sitio → Colores globales.
   ========================================================================== */

:root {
	/* ---------- COLORES DE MARCA (edítalos aquí) ---------- */
	--sg-verde:         #3e7c4f;  /* Verde principal: botones, enlaces, acentos */
	--sg-verde-oscuro:  #1f3d2b;  /* Verde bosque: fondos oscuros, footer, hover */
	--sg-verde-claro:   #e8f1ea;  /* Verde muy suave: fondos de sección */
	--sg-acento:        #7fb544;  /* Verde lima: detalles, iconos, hover claro */
	--sg-texto:         #24312a;  /* Color del texto principal */
	--sg-gris:          #5c6660;  /* Texto secundario, subtítulos */
	--sg-blanco:        #ffffff;

	/* ---------- TIPOGRAFÍA ---------- */
	--sg-font-titulos:  'Oswald', 'Arial Narrow', sans-serif;
	--sg-font-texto:    'Roboto', 'Helvetica Neue', Arial, sans-serif;

	/* ---------- RITMO Y FORMA ---------- */
	--sg-radio:         6px;      /* Redondeo de botones, tarjetas e imágenes */
	--sg-espacio-seccion: clamp(3rem, 7vw, 5.5rem); /* Aire entre secciones */
	--sg-sombra:        0 6px 24px rgba(31, 61, 43, 0.10);
}

/* ==========================================================================
   1. BASE — tipografía general (solo páginas Gutenberg)
   ========================================================================== */

body:not(.elementor-page) {
	font-family: var(--sg-font-texto);
	font-size: 1.0625rem;            /* 17px */
	line-height: 1.7;
	color: var(--sg-texto);
	-webkit-font-smoothing: antialiased;
}

body:not(.elementor-page) h1:not(.elementor-heading-title),
body:not(.elementor-page) h2:not(.elementor-heading-title),
body:not(.elementor-page) h3:not(.elementor-heading-title),
body:not(.elementor-page) h4:not(.elementor-heading-title),
body:not(.elementor-page) h5:not(.elementor-heading-title),
body:not(.elementor-page) h6:not(.elementor-heading-title) {
	font-family: var(--sg-font-titulos);
	font-weight: 500;
	line-height: 1.2;
	color: var(--sg-verde-oscuro);
	letter-spacing: 0.01em;
	margin-top: 0;
	margin-bottom: 0.6em;
	text-wrap: balance;
}

body:not(.elementor-page) h1:not(.elementor-heading-title) {
	font-size: clamp(2.1rem, 4.5vw, 3.2rem);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

body:not(.elementor-page) h2:not(.elementor-heading-title) {
	font-size: clamp(1.7rem, 3.2vw, 2.3rem);
}

body:not(.elementor-page) h3:not(.elementor-heading-title) {
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

body:not(.elementor-page) h4:not(.elementor-heading-title) {
	font-size: 1.2rem;
}

body:not(.elementor-page) p {
	margin-top: 0;
	margin-bottom: 1.2em;
}

/* Enlaces dentro del contenido */
body:not(.elementor-page) .site-main a:not(.wp-block-button__link),
body:not(.elementor-page) .page-content a:not(.wp-block-button__link),
body:not(.elementor-page) .entry-content a:not(.wp-block-button__link) {
	color: var(--sg-verde);
	text-decoration-color: var(--sg-acento);
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

body:not(.elementor-page) .site-main a:not(.wp-block-button__link):hover,
body:not(.elementor-page) .page-content a:not(.wp-block-button__link):hover,
body:not(.elementor-page) .entry-content a:not(.wp-block-button__link):hover {
	color: var(--sg-verde-oscuro);
}

/* Listas con marcador verde */
body:not(.elementor-page) .site-main ul li::marker,
body:not(.elementor-page) .page-content ul li::marker {
	color: var(--sg-acento);
}

/* ==========================================================================
   2. BOTONES (bloque "Botón" de Gutenberg)
   ========================================================================== */

.wp-block-button__link {
	font-family: var(--sg-font-titulos);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.95rem;
	background-color: var(--sg-verde);
	color: var(--sg-blanco);
	border-radius: var(--sg-radio);
	padding: 0.85em 2em;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.wp-block-button__link:hover {
	background-color: var(--sg-verde-oscuro);
	color: var(--sg-blanco);
	transform: translateY(-2px);
}

/* Variante "Contorno" (estilo del propio bloque botón) */
.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--sg-verde);
	color: var(--sg-verde);
}

.is-style-outline .wp-block-button__link:hover {
	background-color: var(--sg-verde);
	color: var(--sg-blanco);
}

/* ==========================================================================
   3. BLOQUES DE ESTRUCTURA
   ========================================================================== */

/* Grupos con fondo = secciones con aire */
.wp-block-group.has-background {
	padding-top: var(--sg-espacio-seccion);
	padding-bottom: var(--sg-espacio-seccion);
	padding-left: clamp(1.25rem, 4vw, 2.5rem);
	padding-right: clamp(1.25rem, 4vw, 2.5rem);
}

/* Separación entre columnas */
.wp-block-columns {
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Imágenes con redondeo suave */
.wp-block-image img,
.wp-block-media-text__media img {
	border-radius: var(--sg-radio);
}

/* Cover (cabeceras hero con imagen de fondo) */
.wp-block-cover {
	border-radius: 0;
}

.wp-block-cover .wp-block-cover__inner-container h1,
.wp-block-cover .wp-block-cover__inner-container h2,
.wp-block-cover .wp-block-cover__inner-container p {
	color: var(--sg-blanco);
}

/* Separador */
.wp-block-separator {
	border-color: var(--sg-verde-claro);
	border-width: 2px;
	max-width: 120px;
	margin-left: auto;
	margin-right: auto;
}

/* Cita destacada */
.wp-block-quote {
	border-left: 4px solid var(--sg-acento);
	background: var(--sg-verde-claro);
	border-radius: var(--sg-radio);
	padding: 1.25rem 1.75rem;
	font-style: normal;
}

.wp-block-quote cite {
	color: var(--sg-gris);
	font-size: 0.9rem;
}

/* Tablas */
body:not(.elementor-page) .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

body:not(.elementor-page) .wp-block-table th {
	background: var(--sg-verde-oscuro);
	color: var(--sg-blanco);
	font-family: var(--sg-font-titulos);
	font-weight: 500;
	letter-spacing: 0.03em;
	padding: 0.75em 1em;
	text-align: left;
}

body:not(.elementor-page) .wp-block-table td {
	padding: 0.7em 1em;
	border-bottom: 1px solid var(--sg-verde-claro);
}

body:not(.elementor-page) .wp-block-table tr:nth-child(even) td {
	background: rgba(232, 241, 234, 0.45);
}

/* Desplegables (bloque "Detalles", ideal para FAQs) */
.wp-block-details {
	border: 1px solid var(--sg-verde-claro);
	border-radius: var(--sg-radio);
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
	background: var(--sg-blanco);
}

.wp-block-details summary {
	font-family: var(--sg-font-titulos);
	font-weight: 500;
	color: var(--sg-verde-oscuro);
	cursor: pointer;
}

.wp-block-details[open] {
	border-color: var(--sg-acento);
}

/* ==========================================================================
   4. CLASES DE UTILIDAD
   --------------------------------------------------------------------------
   Se añaden a un bloque desde: panel derecho → Avanzado → Clase(s) CSS adicional(es)
   ========================================================================== */

/* Etiqueta pequeña sobre un título ("eyebrow"): añádela a un párrafo */
.sg-eyebrow {
	font-family: var(--sg-font-titulos);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--sg-acento);
	margin-bottom: 0.5em;
}

/* Tarjeta: añádela a un bloque Grupo (columna de servicios, etc.) */
.sg-card {
	background: var(--sg-blanco);
	border: 1px solid var(--sg-verde-claro);
	border-radius: var(--sg-radio);
	box-shadow: var(--sg-sombra);
	padding: 1.75rem;
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sg-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(31, 61, 43, 0.16);
}

/* Sección con fondo verde oscuro (CTA final, etc.): añádela a un Grupo */
.sg-oscuro {
	background: var(--sg-verde-oscuro);
	color: var(--sg-blanco);
}

.sg-oscuro h1, .sg-oscuro h2, .sg-oscuro h3, .sg-oscuro h4, .sg-oscuro p {
	color: var(--sg-blanco);
}

.sg-oscuro .wp-block-button__link {
	background-color: var(--sg-acento);
}

.sg-oscuro .wp-block-button__link:hover {
	background-color: var(--sg-blanco);
	color: var(--sg-verde-oscuro);
}

/* Sección con fondo verde suave: añádela a un Grupo */
.sg-suave {
	background: var(--sg-verde-claro);
}

/* ==========================================================================
   5. AJUSTES RESPONSIVE
   ========================================================================== */

@media (max-width: 781px) {
	body:not(.elementor-page) {
		font-size: 1rem;
	}

	.wp-block-group.has-background {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	.sg-card {
		padding: 1.25rem;
	}
}