/* ==========================================================================
   RT033 Hero V2 — sistema compartido por HOME, CIUDAD y AEROPUERTO
   ==========================================================================

   Un solo fichero para las tres variantes. Lo que cambia entre ellas es la
   jerarquia de los CTA y poco mas; la tipografia, los espaciados, el overlay,
   los radios, la franja de confianza y el comportamiento responsive son
   IDENTICOS. Esa es toda la idea del bloque: que la home, una ciudad y un
   aeropuerto se lean como el mismo producto.

   Se escribe MOVIL PRIMERO. Las reglas sin media query son las de 390 px, y
   las de escritorio van despues. No al reves: el 86 % del trafico es movil y
   la mayoria de las landings de ciudad son la primera impresion del usuario.

   Convenciones de nombres:
     .rt033-hero                bloque (va en el et_pb_section)
     .rt033-hero--home|city|airport   variante
     .rt033-hero__content       la fila (va en el et_pb_row)
     .rt033-hero__copy          el modulo de texto con H1 + subtitulo
     .rt033-hero__actions       los CTA (shortcode)
     .rt033-hero__trust         la franja de sellos (shortcode)
     .rt033-hero--movil-*       utilidades de encuadre del fondo en movil

   Ni una sola clase `.et_pb_section_0` ni `.et_pb_text_3`: esas cambian con el
   orden de los modulos y romperian el sistema a la primera reordenacion.

   Indice
     1. Fichas (variables)
     2. La seccion y su overlay
     3. Encuadre del fondo (desktop / movil)
     4. Contenido y tipografia
     5. CTA
     6. Franja de confianza
     7. Avisos de staging
     8. Escritorio
     9. Accesibilidad y preferencias del usuario
    10. Convivencia con Divi
   ========================================================================== */


/* 1. Fichas ---------------------------------------------------------------
   Los colores son los del Header V2, referenciados con respaldo para que el
   hero se pinte bien aunque se cargue en una pagina sin header V2. */
.rt033-hero {
	--rt033-hero-amarillo: var(--rt033-amarillo, #feba02);
	--rt033-hero-amarillo-oscuro: var(--rt033-amarillo-oscuro, #e5a600);
	--rt033-hero-negro: var(--rt033-negro, #111111);
	--rt033-hero-wa: var(--rt033-wa, #25d366);
	--rt033-hero-wa-oscuro: var(--rt033-wa-oscuro, #1da851);
	/* Bloque 6: rotulo e icono del CTA de WhatsApp en tinta, no en blanco.
	   El verde no se toca. Blanco sobre #25d366 daba 1,98:1; #111 da 9,52:1,
	   y sobre el verde del hover (#1da851) 6,09:1. Hereda del header cuando
	   este define la variable, para que los dos no puedan separarse. */
	--rt033-hero-wa-texto: var(--rt033-wa-texto, #111111);
	--rt033-hero-blanco: #ffffff;
	--rt033-hero-radio: var(--rt033-radio-chico, 10px);
	--rt033-hero-tactil: var(--rt033-tactil, 44px);

	/* Encuadre. Se pisan con las utilidades del apartado 3. */
	--rt033-hero-pos: center center;
	--rt033-hero-pos-movil: var(--rt033-hero-pos);

	/* Densidad del velo. Una foto clara necesita mas velo que una oscura. */
	--rt033-hero-velo: 0.58;
	--rt033-hero-velo-movil: 0.66;

	--rt033-hero-ancho: 1360px;
	--rt033-hero-columna: 640px;
}


/* 2. La seccion y su overlay ----------------------------------------------
   El velo es un ::before y no una opcion de Divi: asi es identico en las tres
   variantes y en las 173 paginas que vendran despues, y se ajusta en un sitio.

   En movil el degradado es casi vertical (el texto va arriba y el CTA abajo);
   en escritorio es lateral, porque el contenido se alinea a la izquierda y la
   foto tiene que seguir viendose a la derecha. */
.rt033-hero {
	position: relative;
	isolation: isolate;
	background-color: #1b1b1b; /* si la foto tarda, el texto ya es legible */
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--rt033-hero-blanco);
	overflow: hidden;
	padding: 26px 0 30px;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* El reparto del velo NO es simetrico, y es a proposito. Estas fotos tienen el
   cielo arriba (claro) y el coche abajo (oscuro): un velo uniforme deja el H1
   peleandose con el cielo y borra el taxi. Asi que el velo es denso arriba,
   donde va el titulo sobre cielo, y se afloja hacia abajo, donde esta el coche.

   El suelo del velo NO es libre: es una cuenta de contraste. Sobre el peor
   fondo posible —un pixel blanco puro, que en este sitio existe: la carroceria
   de `Disseny-sense-titol-3.png` lo es— un velo de alfa `a` deja un fondo de
   luminancia relativa L(a). Para que el texto BLANCO llegue a 4,5:1 hace falta
   L <= 0,183, y eso obliga a a >= 0,55. Con 0,44 salian 3,1:1 y el copy de
   apoyo (14 px) no pasaba AA. Por eso el tramo central se queda en
   `velo - 0,06` (0,60 con el velo por defecto) en vez de `velo - 0,22`.
   El unico tramo que baja de ahi es el ultimo 12 %, que queda POR DEBAJO de la
   franja de sellos: ahi no hay texto y la foto puede respirar. */
.rt033-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(
			180deg,
			rgba(8, 8, 10, calc(var(--rt033-hero-velo-movil) + 0.16)) 0%,
			rgba(8, 8, 10, var(--rt033-hero-velo-movil)) 28%,
			rgba(8, 8, 10, calc(var(--rt033-hero-velo-movil) - 0.06)) 62%,
			rgba(8, 8, 10, calc(var(--rt033-hero-velo-movil) - 0.06)) 88%,
			rgba(8, 8, 10, calc(var(--rt033-hero-velo-movil) - 0.24)) 100%
		);
	pointer-events: none;
}


/* Divi escribe el fondo de la seccion como `.et_pb_section_N { ... }`: misma
   especificidad que `.rt033-hero` y hoja que se encola DESPUES (et-cache). Un
   empate lo gana Divi y el encuadre movil no llegaria a aplicarse nunca. Por
   eso el tamaño y la posicion del fondo se declaran con las dos clases
   encadenadas, que es el minimo que gana siempre. La IMAGEN sigue poniendola
   Divi: se sigue eligiendo en el Constructor Visual, como cualquier seccion. */
.rt033-hero.et_pb_section {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: var(--rt033-hero-pos-movil);
}

@media (min-width: 768px) {
	.rt033-hero.et_pb_section {
		background-position: var(--rt033-hero-pos);
	}
}


/* 3. Encuadre del fondo ---------------------------------------------------
   El problema real de este sitio no son las fotos: son los RECORTES. La misma
   imagen que funciona a 1440 px se corta por la mitad del taxi a 390 px.

   Por eso el encuadre es una variable con dos valores —uno de escritorio y
   otro de movil— y no un `background-position` unico. Se aplica con una clase
   en el `module_class` de la seccion, que es lo unico que hay que tocar por
   pagina. No hay que crear imagenes nuevas: censadas las 250 paginas, hay 106
   imagenes de fondo distintas y CUATRO de ellas cubren 90 paginas
   (Disseny-sense-titol-4 en 31, Disseny-sense-titol en 20, taxis-barcelona en
   20 y Disseny-sense-titol-3 en 19). Ajustar el encuadre por IMAGEN —no por
   pagina— resuelve la mayor parte del sitio con cuatro decisiones.

   Nombre = donde queda el punto de interes en movil. */
.rt033-hero--movil-arriba   { --rt033-hero-pos-movil: center top; }
.rt033-hero--movil-alto     { --rt033-hero-pos-movil: center 28%; }
.rt033-hero--movil-centro   { --rt033-hero-pos-movil: center center; }
.rt033-hero--movil-bajo     { --rt033-hero-pos-movil: center 72%; }
.rt033-hero--movil-abajo    { --rt033-hero-pos-movil: center bottom; }
.rt033-hero--movil-izq      { --rt033-hero-pos-movil: 22% center; }
.rt033-hero--movil-der      { --rt033-hero-pos-movil: 78% center; }

/* Encuadre de escritorio, cuando el de por defecto no sirve. */
.rt033-hero--pos-arriba     { --rt033-hero-pos: center top; }
.rt033-hero--pos-abajo      { --rt033-hero-pos: center bottom; }
.rt033-hero--pos-izq        { --rt033-hero-pos: 25% center; }
.rt033-hero--pos-der        { --rt033-hero-pos: 75% center; }

/* Velo mas denso para fotos claras, mas ligero para fotos ya oscuras. */
.rt033-hero--velo-fuerte    { --rt033-hero-velo: 0.70; --rt033-hero-velo-movil: 0.76; }
.rt033-hero--velo-suave     { --rt033-hero-velo: 0.44; --rt033-hero-velo-movil: 0.56; }

/* Valvula de escape para una foto concreta: imagen distinta en movil.
   Se usa junto a `style="--rt033-hero-img-movil:url(...)"` en la seccion.
   NO se usa hoy en ninguna pagina: existe para que el dia que una foto no
   tenga arreglo por encuadre, la solucion ya este en el sistema. */
.rt033-hero--img-movil {
	background-image: var(--rt033-hero-img-movil) !important;
}


/* 4. Contenido y tipografia ----------------------------------------------- */
/* La fila. No se le toca el `display`: Divi la usa para repartir columnas y
   pisarlo romperia cualquier hero de dos columnas que se haga mas adelante.
   Aqui solo se le fija el ancho y el aire lateral. */
.rt033-hero__content,
.rt033-hero .et_pb_row.rt033-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--rt033-hero-ancho);
	margin: 0 auto;
	padding: 0 20px;
}

/* El aire ENTRE los modulos (copy / CTA / sellos) lo reparte la columna con un
   `gap`, no el `margin-bottom: 30px` que Divi da a cada modulo. Con margenes,
   quitar o anadir un modulo en el Constructor descuadra el espaciado; con
   `gap` no. Por eso el margen de Divi se anula justo debajo. */
.rt033-hero .et_pb_column {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rt033-hero__copy {
	max-width: var(--rt033-hero-columna);
}

/* El H1 no lo pinta el shortcode: es un modulo de texto de Divi. Se le da
   forma por la clase del contenedor, para no depender del nivel ni del orden. */
.rt033-hero__copy h1,
.rt033-hero__title {
	margin: 0 0 10px;
	padding: 0;
	font-size: clamp(29px, 8.2vw, 38px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--rt033-hero-blanco);
	text-wrap: balance;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* Divi da a todo parrafo suyo `padding-bottom: 1em`. Sumado al margen propio
   son ~23 px entre el subtitulo y el copy de apoyo, mas que entre el copy y el
   boton: el bloque se lee al reves de como esta jerarquizado. Se anula el
   padding de Divi y el aire lo reparte solo el margen de aqui. */
.rt033-hero__copy p,
.rt033-hero .rt033-hero__copy p,
.rt033-hero__subtitle {
	margin: 0 0 7px;
	padding-bottom: 0;
	font-size: 15.5px;
	line-height: 1.4;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.rt033-hero__copy p:last-child,
.rt033-hero .rt033-hero__copy p:last-child {
	margin-bottom: 0;
}

/* El copy de apoyo es deliberadamente mas discreto: en movil compite con el
   CTA y el CTA tiene que ganar. */
/* Tiene que ganar a la regla de parrafo de justo arriba, que ya lleva tres
   clases para poder con Divi. */
.rt033-hero .rt033-hero__copy p.rt033-hero__lead,
.rt033-hero__copy .rt033-hero__lead,
.rt033-hero__lead {
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.38;
	color: rgba(255, 255, 255, 0.88);
	max-width: 34em;
}

/* Una foto de fondo no puede quedarse con un H1 negro heredado del tema. */
.rt033-hero__copy,
.rt033-hero__copy a:not(.rt033-hero__cta) {
	color: var(--rt033-hero-blanco);
}


/* 5. CTA ------------------------------------------------------------------
   Botones de verdad: `<a href>`, 48 px de alto util, icono decorativo y
   etiqueta de texto. Nada de imagenes PNG como boton (que es lo que hay hoy:
   `phone_taxi_033.png` y `whatssap_taxi.png` en las 147 paginas de ciudad). */
.rt033-hero__actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 420px;
}

.rt033-hero__actions-fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.rt033-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 50px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--rt033-hero-radio);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	transition: transform 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}

.rt033-hero__cta:hover,
.rt033-hero__cta:focus-visible {
	transform: translateY(-1px);
	text-decoration: none;
}

.rt033-hero__cta:active {
	transform: translateY(0);
}

.rt033-hero__cta-icono {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

/* Telefono: amarillo de marca sobre tinta. Es el color del header y el que el
   usuario ya asocia con "pedir taxi" en este sitio. */
.rt033-hero__cta--tel {
	background: var(--rt033-hero-amarillo);
	color: var(--rt033-hero-negro);
}

.rt033-hero__cta--tel:hover,
.rt033-hero__cta--tel:focus-visible {
	background: var(--rt033-hero-amarillo-oscuro);
	color: var(--rt033-hero-negro);
}

/* WhatsApp: el verde de la marca, el mismo que el boton del header. */
.rt033-hero__cta--wa {
	background: var(--rt033-hero-wa);
	color: var(--rt033-hero-wa-texto);
}

.rt033-hero__cta--wa:hover,
.rt033-hero__cta--wa:focus-visible {
	background: var(--rt033-hero-wa-oscuro);
	color: var(--rt033-hero-wa-texto);
}

/* Reserva online: solo manda en aeropuerto. Amarillo, mas alto y con mas peso
   que los otros dos, para que la jerarquia se vea sin leer. */
.rt033-hero__cta--reserva {
	background: var(--rt033-hero-amarillo);
	color: var(--rt033-hero-negro);
	min-height: 56px;
	font-size: 17px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.rt033-hero__cta--reserva:hover,
.rt033-hero__cta--reserva:focus-visible {
	background: var(--rt033-hero-amarillo-oscuro);
	color: var(--rt033-hero-negro);
}

/* En aeropuerto, WhatsApp y telefono son secundarios: contorno sobre el velo,
   no dos bloques de color que compitan con la reserva. */
.rt033-hero__actions--airport .rt033-hero__actions-fila .rt033-hero__cta {
	min-height: 46px;
	font-size: 14.5px;
	padding: 10px 12px;
	box-shadow: none;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(2px);
}

/* En aeropuerto el boton de WhatsApp esta en REPOSO en contorno: el fondo es
   un blanco al 10 % sobre la foto oscura, no el verde. Ahi el rotulo tiene que
   seguir siendo blanco; la tinta solo entra cuando el fondo pasa a verde
   solido, que es lo que ocurre en hover y en foco. */
.rt033-hero__actions--airport .rt033-hero__actions-fila .rt033-hero__cta--wa {
	border-color: var(--rt033-hero-wa);
	color: #ffffff;
}

.rt033-hero__actions--airport .rt033-hero__actions-fila .rt033-hero__cta:hover,
.rt033-hero__actions--airport .rt033-hero__actions-fila .rt033-hero__cta:focus-visible {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

.rt033-hero__actions--airport .rt033-hero__actions-fila .rt033-hero__cta--wa:hover,
.rt033-hero__actions--airport .rt033-hero__actions-fila .rt033-hero__cta--wa:focus-visible {
	background: var(--rt033-hero-wa);
	border-color: var(--rt033-hero-wa);
	color: var(--rt033-hero-wa-texto);
}


/* 6. Franja de confianza --------------------------------------------------
   Tres sellos, ni uno mas. En movil van en fila con el texto pequeño; si un
   rotulo es largo, la fila se parte sola sin romper la maqueta. */
.rt033-hero__trust {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 7px 14px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

/* Divi da `padding: 0 0 23px 1em` a toda lista dentro de su contenedor y gana
   por especificidad a una clase suelta. Hay que anclarlo. */
.et-db #et-boc .et-l .rt033-hero__trust,
.rt033-hero .rt033-hero__trust {
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.rt033-hero__sello {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.005em;
	color: rgba(255, 255, 255, 0.94);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
	list-style: none;
}

.rt033-hero__sello::before,
.rt033-hero__sello::marker {
	content: none;
}

.rt033-hero__sello-icono {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--rt033-hero-amarillo);
}


/* 7. Avisos de staging ----------------------------------------------------
   En produccion este HTML no existe: lo imprime `rt033_hero_aviso_staging()`,
   que devuelve cadena vacia si no esta la constante RT033_STAGING. */
.rt033-hero__aviso {
	position: relative;
	z-index: 1;
	margin: 4px 0 0;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #ffffff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	max-width: 420px;
}


/* 8. Escritorio -----------------------------------------------------------
   Solo a partir de aqui se ensancha. 768 es tablet; 1180 es el mismo
   breakpoint que usa el header para pasar de barra compacta a barra completa,
   asi que el hero cambia de aire exactamente donde cambia el header. */

@media (min-width: 768px) {
	.rt033-hero {
		padding: 54px 0 60px;
		min-height: 480px;
	}

	.rt033-hero::before {
		background:
			linear-gradient(
				100deg,
				rgba(10, 10, 10, calc(var(--rt033-hero-velo) + 0.20)) 0%,
				rgba(10, 10, 10, var(--rt033-hero-velo)) 48%,
				rgba(10, 10, 10, calc(var(--rt033-hero-velo) - 0.28)) 100%
			);
	}

	.rt033-hero__content,
	.rt033-hero .et_pb_row.rt033-hero__content {
		padding: 0 32px;
	}

	.rt033-hero .et_pb_column {
		gap: 20px;
	}

	.rt033-hero__copy h1,
	.rt033-hero__title {
		font-size: clamp(38px, 4.6vw, 52px);
		margin-bottom: 12px;
	}

	/* Mismas tres/cuatro clases que las reglas base del apartado 4. Una media
	   query NO aporta especificidad: con un selector mas corto aqui, el tamaño
	   de movil seguiria ganando y el escritorio se quedaria con letra de 15,5.
	   Pasaba: medido 15,5 px a 1440 donde tocaban 18. */
	.rt033-hero__copy p,
	.rt033-hero .rt033-hero__copy p,
	.rt033-hero__subtitle {
		font-size: 18px;
		max-width: 30em;
	}

	.rt033-hero .rt033-hero__copy p.rt033-hero__lead,
	.rt033-hero__copy .rt033-hero__lead,
	.rt033-hero__lead {
		font-size: 16px;
	}

	/* En cuanto hay sitio, los CTA van en fila. */
	.rt033-hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		max-width: none;
		gap: 12px;
	}

	.rt033-hero__cta {
		min-height: 54px;
		padding: 14px 26px;
		font-size: 16.5px;
	}

	/* En aeropuerto la reserva se queda sola y ancha, y los otros dos a su lado
	   pero sin robarle peso. */
	.rt033-hero__actions--airport {
		align-items: center;
	}

	.rt033-hero__actions--airport .rt033-hero__cta--reserva {
		min-height: 60px;
		padding: 16px 34px;
		font-size: 18px;
	}

	.rt033-hero__actions--airport .rt033-hero__actions-fila {
		grid-template-columns: auto auto;
		gap: 12px;
	}

	.rt033-hero__actions--airport .rt033-hero__actions-fila .rt033-hero__cta {
		min-height: 54px;
		font-size: 15.5px;
		padding: 12px 20px;
	}

	.rt033-hero__trust {
		gap: 10px 26px;
	}

	.rt033-hero__sello {
		font-size: 14px;
	}

	.rt033-hero__sello-icono {
		width: 18px;
		height: 18px;
	}
}

@media (min-width: 1180px) {
	.rt033-hero {
		padding: 86px 0 94px;
		min-height: 560px;
	}

	.rt033-hero .et_pb_column {
		gap: 24px;
	}

	.rt033-hero__copy {
		max-width: 680px;
	}

	.rt033-hero__trust {
		gap: 10px 34px;
	}
}


/* 9. Accesibilidad y preferencias del usuario ----------------------------- */
.rt033-hero__cta:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

.rt033-hero--home .rt033-hero__cta--tel:focus-visible,
.rt033-hero--city .rt033-hero__cta--tel:focus-visible,
.rt033-hero__cta--reserva:focus-visible {
	outline-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.rt033-hero__cta {
		transition: none;
	}

	.rt033-hero__cta:hover,
	.rt033-hero__cta:focus-visible,
	.rt033-hero__cta:active {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.rt033-hero {
		--rt033-hero-velo: 0.78;
		--rt033-hero-velo-movil: 0.82;
	}
}


/* 10. Convivencia con Divi ------------------------------------------------
   Divi impone a sus secciones y filas paddings y anchos propios que aqui
   estorban. Se pisan una sola vez, anclando al contenedor de Divi para ganar
   en especificidad sin recurrir a `!important` mas que donde no queda otra. */

/* Divi da a sus secciones `padding: 54px 0`, con la misma especificidad que
   `.rt033-hero`. Empatar y confiar en el orden de carga es fragil: se sube la
   especificidad encadenando las dos clases, que es el minimo que gana siempre.
   Los valores son los mismos de los apartados 2 y 8, en un solo sitio. */
.rt033-hero.et_pb_section {
	margin: 0;
	padding: 26px 0 30px;
}

@media (min-width: 768px) {
	.rt033-hero.et_pb_section { padding: 54px 0 60px; }
}

@media (min-width: 1180px) {
	.rt033-hero.et_pb_section { padding: 86px 0 94px; }
}

/* La fila de Divi trae `width: 80%; max-width: 1080px`. El hero manda. */
.rt033-hero .et_pb_row.rt033-hero__content {
	width: 100%;
	max-width: var(--rt033-hero-ancho);
}

/* Los modulos de dentro no necesitan margen inferior propio: el `gap` de la
   columna ya reparte el aire, y sumar los dos abre huecos raros.
   Divi les da `margin-bottom: 2.75%` desde `.et_pb_column .et_pb_module`, que
   sobre una columna de 1296 px son 35,6 px. Con una sola clase se empata en
   especificidad y gana el que se cargue despues —que es Divi—, asi que hay que
   anclar tambien a la columna. Medido: 60 px de hueco donde tocaban 24. */
.rt033-hero .et_pb_column .et_pb_module,
.et-db #et-boc .et-l .rt033-hero .et_pb_column .et_pb_module {
	margin-bottom: 0;
}

/* El hero arranca pegado al header: `.rt033-shell` ya reserva en el flujo los
   80 px (70 en movil) que ocupa la barra fija, asi que no hay que compensar
   nada aqui. Lo unico que hace falta es que Divi no cuele su margen. */
.rt033-hero.et_pb_section:first-of-type {
	margin-top: 0;
}