/*!
 * EDESAC — base compartida entre páginas
 * =============================================================================
 * Tokens de marca, utilidades y los componentes que se repiten en más de una
 * página (titular grande, párrafo destacado, píldora, botón). Se carga en toda
 * página que tenga maquetación propia; lo específico de cada una vive en su
 * archivo (`home.css`, `industrias.css`, ...).
 *
 * CONVENCIONES
 *   - Todo cuelga de `.edh` y usa el prefijo `edh-`. No puede pisar a The7.
 *   - Los tamaños grandes van con `clamp()`: los diseños son de 1440 px fijos
 *     y una traducción literal a píxeles se rompe por debajo de 1200.
 *   - Las medidas del Figma se anotan donde no son evidentes, para poder
 *     volver al diseño sin abrirlo.
 */

/* ─────────────────────────────────────────────────────────── 1. Tokens ── */

.edh {
	/* Paleta — extraída del Figma. Los tres azules se diferencian en 2-4
	   puntos por canal: es deriva del diseño, se respeta tal cual. */
	--edesac-blue: #2270ae;
	--edesac-blue-section: #2474a6;
	--edesac-blue-bar: #226faf;
	--edesac-blue-dark: #174163;
	--edesac-navy: #001451;
	--edesac-red: #d73520;
	--edesac-blue-muted: #4f719c;
	--edesac-grey-bg: #f1f3f4;
	--edesac-grey-text: #a4a4a6;
	--edesac-ink: #1a1a17;

	/* Oswald sustituye a DIN Condensed Bold, que es de pago. Cambiar solo
	   aquí si algún día se compra la licencia. */
	--edesac-font-display: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
	--edesac-font-body: 'Be Vietnam Pro', system-ui, sans-serif;
	--edesac-font-alt: 'Lato', system-ui, sans-serif;

	/* Ancho del contenido. El Figma usa 1170-1208 según la sección. */
	--edh-container: 1208px;

	/* Titular grande: 68 px a 1440 px, sin bajar de 36 px en móvil. */
	--edh-display: clamp(2.25rem, 4.72vw, 4.25rem);


	font-family: var(--edesac-font-body);
	color: var(--edesac-ink);
}

/* ──────────────────────────────────────────────── 2. Base y utilidades ── */

/* The7 y WPBakery ya envuelven el contenido; estas secciones son de ancho
   completo, así que se sacan del contenedor del tema. */
.edh-section {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

/* WPBakery da `margin-bottom: 35px` a todo `.wpb_content_element`, lo que deja
   una franja blanca entre sección y sección. Aquí cada sección controla su
   propio espaciado. */
.edh-row .wpb_content_element,
.edh-row .wpb_raw_code,
.edh-row .wpb_wrapper {
	margin-bottom: 0;
}

/* Las filas estiradas de WPBakery llevan `overflow: hidden` para evitar scroll
   horizontal. La banda de imagen necesita desbordar hacia ARRIBA sobre la
   sección anterior, así que se le devuelve el desbordamiento solo a esa fila.
   El desbordamiento horizontal ya está controlado por el ancho de la foto. */
.edh-row:has(.edh-banda) {
	overflow: visible;
}

.edh-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--edh-container);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}

.edh * {
	box-sizing: border-box;
}

.edh p {
	margin: 0;
}

/* Titular grande. En el Figma parte del texto va en color: se marca con
   `.edh-display__accent` en lugar de partir el titular en varios nodos. */
.edh-display {
	margin: 0;
	font-family: var(--edesac-font-display);
	font-weight: 700;
	font-size: var(--edh-display);
	line-height: 1;
	letter-spacing: 0.005em;
	color: var(--edesac-ink);
	text-wrap: balance;
}

.edh-display__accent {
	color: var(--edesac-blue);
}

/* Párrafo largo — "Lato Regular 20/30" en el Figma. */
.edh-lead {
	font-family: var(--edesac-font-alt);
	font-size: clamp(1rem, 1.39vw, 1.25rem);
	line-height: 1.5;
	color: var(--edesac-grey-text);
}

.edh-eyebrow {
	font-family: 'ABeeZee', var(--edesac-font-body);
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--edesac-ink);
}

/* ─────────────────────────────────────────────────────────── 3. Botones ── */

/* Píldora roja con píldora blanca dentro y doble chevron (Figma 114:2014).
   Es un componente propio del diseño, distinto del `rg-shine-btn` global. */
.edh-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px 3px 3px;
	background: var(--edesac-red);
	border-radius: 40px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.edh-pill__label {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	background: #fff;
	border-radius: 50px;
	font-family: 'Montserrat', var(--edesac-font-body);
	font-weight: 500;
	font-size: 0.75rem;
	line-height: 1;
	color: var(--edesac-blue);
	white-space: nowrap;
}

.edh-pill__icon {
	display: block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: #fff;
	transition: transform 0.2s ease;
}

.edh-pill:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(215, 53, 32, 0.32);
}

.edh-pill:hover .edh-pill__icon {
	transform: translateX(3px);
}

/* Botón rectangular (Figma: "Conócenos", "Agendar reunión"). */
.edh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 17px 32px;
	border: 0;
	border-radius: 6px;
	background: var(--edesac-blue-muted);
	font-family: var(--edesac-font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.edh-btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #fff;
}

.edh-btn--red {
	background: var(--edesac-red);
}

.edh-btn--outline {
	padding: 9px 38px 11px;
	border: 1px solid #fff;
	background: transparent;
	font-weight: 400;
}

.edh-btn--outline:hover {
	background: rgba(255, 255, 255, 0.15);
}

.edh-btn__icon {
	display: block;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

/* ─────────────────────────────────── 4. Hero de página interior ── */

/* La franja con la foto y el título que abre las páginas interiores. Aparece
   igual en Nosotros (Figma 205:3266) y en Industrias (204:2221), así que vive
   aquí y no en la hoja de cada página. */

.edh-hero-pagina {
	position: relative;
	height: clamp(180px, 17.4vw, 251px);
	border-radius: 0 0 50px 50px;
	overflow: hidden;
	/* El nav flotante se superpone: se reserva su altura para que el título no
	   quede debajo. */
	padding-top: clamp(60px, 6vw, 86px);
}

.edh-hero-pagina__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/* Degradado azul de izquierda a derecha, que es lo que hace legible el título
   sobre la foto (Figma: 90.02°, #1867a6 → transparente al 83.78 %). */
.edh-hero-pagina__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #1867a6 0%, rgba(255, 255, 255, 0) 83.78%);
	pointer-events: none;
}

.edh-hero-pagina__titulo {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 100%;
	max-width: 1208px;
	margin-inline: auto;
	padding: 0 clamp(20px, 4vw, 40px) clamp(24px, 3.5vw, 50px);
	font-family: var(--edesac-font-body);
	font-weight: 700;
	font-size: clamp(1.375rem, 2.08vw, 1.875rem); /* 30 px */
	line-height: 1.2;
	color: #fff;
	text-transform: uppercase;
}

/* ──────────────────────────────────── 5. Banda de ventajas ── */

/* Los tres bloques sobre fondo azul que cierran las páginas interiores
   («Component 16» en el Figma: 205:3399 en Nosotros, 205:3144 en Industrias).
   Idéntico en ambas. */

.edh-ventajas {
	padding-block: clamp(40px, 5vw, 56px);
	background: #3a82af;
}

.edh-ventajas__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}

.edh-ventaja {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	color: #fff;
}

.edh-ventaja svg {
	display: block;
	width: 65px;
	height: 65px;
	flex-shrink: 0;
}

.edh-ventaja h3 {
	margin: 0;
	font-family: 'Poppins', var(--edesac-font-body);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.325;
	color: #fff;
}

.edh-ventaja p {
	max-width: 265px;
	font-family: 'Poppins', var(--edesac-font-body);
	font-size: 0.875rem;
	line-height: 1.4;
	color: #fff;
	opacity: 0.7;
}

.edh-ventaja__texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
}

/* ──────────────────────────────── 6. Responsive de lo compartido ── */

@media (max-width: 700px) {
	.edh-ventajas__inner {
		grid-template-columns: 1fr;
	}

	.edh-hero-pagina {
		border-radius: 0 0 28px 28px;
	}
}