/*
 * Gas Express Nieto · Sucursal — estilos.
 *
 * Réplica de la landing de Arandas SIN Divi. Las medidas salen del CSS calculado
 * de esa página a 1440 / 820 / 390 px (ver SPEC-DISENO.md de la referencia).
 * Breakpoints de la original: escritorio >= 981, tablet 768-980, celular <= 767.
 *
 * Reglas de la casa:
 *  - El contenido NUNCA nace invisible desde el CSS: las animaciones de entrada
 *    solo "arman" lo que el JS puso con la clase .gen-armed (ver theme.js).
 *  - Nada de jQuery, nada de librerías, fuentes autoalojadas.
 */

/* ==========================================================================
   Fuentes (autoalojadas, latin)
   ========================================================================== */
@font-face {
	font-family: 'Teko';
	src: url('../fonts/Teko-variable-500-700-latin.woff2') format('woff2');
	font-weight: 500 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Lato';
	src: url('../fonts/Lato-400-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Lato';
	src: url('../fonts/Lato-700-latin.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-variable-latin.woff2') format('woff2');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Base
   ========================================================================== */
:root {
	--gen-red: #ff0000;
	--gen-red-dark: #c10f1b;
	--gen-red-text: #d51a27;
	--gen-blue: #005c8e;
	--gen-ink: #333333;
	--gen-txt: #666666;
	--gen-navy: #1b1f25;
	--gen-gray: #f2f2f2;
	--gen-teko: 'Teko', Helvetica, Arial, sans-serif;
	--gen-lato: 'Lato', Helvetica, Arial, sans-serif;
	--gen-open: 'Open Sans', Arial, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: #fff;
	color: var(--gen-txt);
	font: 500 14px/23.8px var(--gen-open);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
p,
ul {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
}

.gen-sr,
.gen-skip:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.gen-skip:focus {
	position: fixed;
	z-index: 100000;
	top: 8px;
	left: 8px;
	padding: 10px 16px;
	background: #fff;
	color: var(--gen-red-text);
	font-weight: 700;
}

.gen-ico {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Imagen que llena su caja (fondos de sección) */
.gen-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	max-width: none;
}

/* Títulos de sección: Teko 500, #333, 96 / 66 / 50 px */
.gen-h2 {
	font: 500 96px/96px var(--gen-teko);
	color: var(--gen-ink);
	text-align: center;
	text-transform: uppercase;
	padding-bottom: 10px;
}

.gen-sub {
	font: 400 20px/36px var(--gen-lato);
	color: var(--gen-txt);
	text-align: center;
}

/* ==========================================================================
   Divisores en V (SVG de Divi, como fondo)
   ========================================================================== */
.gen-divider {
	position: absolute;
	left: 0;
	width: 100%;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
}
.gen-divider--bottom {
	bottom: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100px' viewBox='0 0 1280 140' preserveAspectRatio='none'><g fill='%23ffffff'><path d='M640 139L0 0v140h1280V0L640 139z'/></g></svg>");
}
.gen-divider--bottom.gen-divider--red {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100px' viewBox='0 0 1280 140' preserveAspectRatio='none'><g fill='%23ff0000'><path d='M640 139L0 0v140h1280V0L640 139z'/></g></svg>");
}
.gen-divider--top {
	top: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100px' viewBox='0 0 1280 140' preserveAspectRatio='none'><g fill='%23ffffff'><path d='M640 140L1280 0H0z'/></g></svg>");
}
.gen-divider--60 {
	height: 60px;
	background-size: 100% 60px;
	z-index: 1;
}
.gen-divider--100 {
	height: 100px;
	background-size: 100% 100px;
	z-index: 10;
}

/* ==========================================================================
   Botones (rectangulares, Teko 700, letter-spacing 4px)
   ========================================================================== */
.gen-btn {
	position: relative;
	display: inline-block;
	font-family: var(--gen-teko);
	font-weight: 700;
	font-size: 16px;
	line-height: 27.2px;
	letter-spacing: 4px;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	border-style: solid;
	border-radius: 0;
	background-clip: padding-box;
	transition: all 300ms ease 0ms;
	-webkit-appearance: none;
	appearance: none;
}

/* Flecha que aparece al pasar el mouse / tocar (glifo «$» de ETmodules) */
.gen-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 1em;
	height: 1em;
	margin-top: -0.5em;
	opacity: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><path d='M128 480Q128 493 137.5 502.5Q147 512 160 512H787L649 649Q640 659 640 672Q640 685 649 695Q659 704 672 704Q685 704 695 695L887 503Q889 500 890.500 497.500Q892 495 894 492Q895 489 895.500 486Q896 483 896 480Q896 477 895.500 474Q895 471 894 468Q892 465 890.500 462.500Q889 460 887 457L695 265Q685 256 672 256Q659 256 649 265Q640 275 640 288Q640 301 649 311L787 448H160Q147 448 137.500 457.500Q128 467 128 480Z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><path d='M128 480Q128 493 137.5 502.5Q147 512 160 512H787L649 649Q640 659 640 672Q640 685 649 695Q659 704 672 704Q685 704 695 695L887 503Q889 500 890.500 497.500Q892 495 894 492Q895 489 895.500 486Q896 483 896 480Q896 477 895.500 474Q895 471 894 468Q892 465 890.500 462.500Q889 460 887 457L695 265Q685 256 672 256Q659 256 649 265Q640 275 640 288Q640 301 649 311L787 448H160Q147 448 137.500 457.500Q128 467 128 480Z'/></svg>") center / contain no-repeat;
	transition: all 300ms ease 0ms;
	pointer-events: none;
}
.gen-btn:hover::after,
.gen-btn:focus-visible::after {
	opacity: 1;
}

/* Hero: «Pide tu gas aquí» — 12px de borde, Teko 700 20px */
.gen-btn--hero {
	font-size: 20px;
	line-height: 34px;
	padding: 6px 20px;
	border-width: 12px;
	border-color: var(--gen-red);
	background-color: var(--gen-red);
	color: #fff;
}
.gen-btn--hero:hover,
.gen-btn--hero:focus-visible {
	padding-left: 14px;
	padding-right: 40px;
}
.gen-btn--hero::after {
	right: 14px;
}

/* Blanco: «whatsapp», «VER ESTACIONES» */
.gen-btn--white {
	padding: 4.8px 60px;
	border-width: 8px;
	border-color: #fff;
	background-color: #fff;
	color: var(--gen-red-text);
	box-shadow: 0 30px 110px 14px rgba(152, 165, 181, 0.6);
	z-index: 2;
}
.gen-btn--white::after {
	right: 39.2px;
}

/* Rojo: «HACER PEDIDO», «Instalar en …» */
.gen-btn--red {
	padding: 4.8px 16px;
	border-width: 8px;
	border-color: var(--gen-red);
	background-color: var(--gen-red);
	color: #fff;
}
.gen-btn--red:hover,
.gen-btn--red:focus-visible {
	padding: 4.8px 32px 4.8px 11.2px;
}
#gen-app-ios,
#gen-app-ios:hover,
#gen-app-ios:focus-visible {
	padding: 4.8px 40px; /* solo el de iOS lleva 40 px en el original; el de Android conserva el de siempre */
}
.gen-btn--red::after {
	right: 11.2px;
}
#gen-app-ios::after {
	right: 19.2px;
}

/* «Ver Mapa»: Open Sans 500 20px, borde 2px, radio 3px */
.gen-btn--map {
	font-family: var(--gen-open);
	font-weight: 500;
	font-size: 20px;
	line-height: 34px;
	letter-spacing: 0;
	text-transform: none;
	padding: 6px 20px;
	border-width: 2px;
	border-radius: 3px;
	border-color: #fff;
	background-color: var(--gen-red);
	color: #fff;
}
.gen-btn--map:hover,
.gen-btn--map:focus-visible {
	border-color: transparent;
	padding: 6px 40px 6px 14px;
}
.gen-btn--map::after {
	right: 14px;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.500 3.500l8.500 8.500-8.500 8.500' fill='none' stroke='black' stroke-width='2.200'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.500 3.500l8.500 8.500-8.500 8.500' fill='none' stroke='black' stroke-width='2.200'/></svg>") center / contain no-repeat;
}

/* «enviar» */
.gen-btn--send {
	font-weight: 500;
	font-size: 20px;
	line-height: 34px;
	padding: 6px 20px;
	border-width: 8px;
	border-color: #fff;
	background-color: #fff;
	color: var(--gen-red-dark);
	margin-left: 18px;
}
.gen-btn--send:hover,
.gen-btn--send:focus-visible {
	padding: 6px 40px 6px 14px;
	background-color: #f2f2f2;
}
.gen-btn--send::after {
	right: 14px;
}

/* ==========================================================================
   Encabezado (no es fijo: sale de la pantalla al bajar)
   ========================================================================== */
.gen-header {
	position: relative;
	z-index: 200;
	height: 108px;
	background: #fff;
}
.gen-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 80%;
	height: 100%;
	margin: 0 auto;
}
.gen-header__logo {
	display: block;
	line-height: 0;
}
.gen-logo {
	display: block;
	width: 131px;
	height: 48px;
}
.gen-nav__toggle {
	display: none;
}
.gen-nav__list {
	display: flex;
	justify-content: flex-end;
	margin: 0 -11px 0 0;
}
.gen-nav__list li {
	padding: 0 11px;
}
.gen-nav__list a {
	display: block;
	padding: 31px 0;
	font: 700 14px/14px var(--gen-open);
	color: rgba(0, 0, 0, 0.6);
	transition: opacity 0.3s;
}
.gen-nav__list a:hover {
	opacity: 0.7;
}

/* ==========================================================================
   1. Hero
   ========================================================================== */
.gen-hero {
	position: relative;
	overflow: hidden;
	padding: 0 10%;
	background: var(--gen-navy);
}
.gen-hero__bg {
	position: absolute;
	inset: 0;
}
.gen-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(27, 31, 37, 0) 0%, #1b1f25 100%);
	pointer-events: none;
}
.gen-hero__in {
	position: relative;
	z-index: 2;
	width: 100%;
}
.gen-hero__col {
	width: 64.84%;
	padding: 12vw 40px;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}
.gen-hero__kicker {
	margin: 0 0 28.28px -80px;
	padding-bottom: 10px;
	font: 600 22px/35.2px var(--gen-teko);
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #fff;
}
.gen-hero__title {
	margin: 0 -10vw 0 0;
	padding-bottom: 10px;
	font: 500 9vw/0.9em var(--gen-teko);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-shadow: 0 0.18em 0.27em rgba(0, 0, 0, 0.38);
	color: #fff;
}
.gen-hero__text {
	margin: 0 0 60px 10vw;
	font: 400 20px/30px var(--gen-lato);
	color: #fff;
}
.gen-hero__btn {
	text-align: right;
}

/* ==========================================================================
   2. Tarjetas azules
   ========================================================================== */
.gen-cards {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	background-color: var(--gen-blue);
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.23) 50%);
}
.gen-cards__row {
	display: grid;
	grid-template-columns: 47.25% 47.25%;
	column-gap: 5.5%;
	width: 89%;
	margin: 0 auto;
}
.gen-card {
	display: flex;
	flex-direction: column;
}
.gen-card__body {
	padding: 60px 0;
	margin-bottom: 31.3125px;
	text-align: center;
	color: #fff;
	font: 400 16px/32px var(--gen-lato);
}
.gen-card__ico {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 30px;
	font-size: 64px;
	color: rgba(255, 255, 255, 0.5);
}
.gen-card__title {
	padding-bottom: 10px;
	font: 700 26px/41.6px var(--gen-teko);
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #fff;
}
.gen-card__text {
	font: 400 16px/32px var(--gen-lato);
	color: #fff;
}
.gen-card__btn {
	text-align: center;
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   3. Teléfonos
   ========================================================================== */
.gen-tel {
	position: relative;
	padding: 80px 0 150px;
	background: #fff;
}
.gen-tel__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.gen-tel__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #ffffff 40%, rgba(255, 255, 255, 0.7) 100%);
}
.gen-tel__in {
	position: relative;
	z-index: 2;
	width: 80%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 27px 0;
}
.gen-tel__title {
	max-width: 700px;
	margin: 0 auto;
}
.gen-tel__grid {
	margin-top: 84px;
}
.gen-tel__row {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	column-gap: 5.49%;
}
.gen-tel__row + .gen-tel__row {
	margin-top: 54px;
}
.gen-tel__item {
	width: 29.67%;
	text-align: center;
}
.gen-tel__ico {
	display: block;
	width: 45px;
	height: 45px;
	margin: 0 auto 30px;
	font-size: 45px;
	color: var(--gen-red);
}
.gen-tel__name {
	padding-bottom: 10px;
	font: 500 38px/53.2px var(--gen-teko);
	color: var(--gen-ink);
}
.gen-tel__num {
	font: 400 18px/32.4px var(--gen-lato);
	color: #000;
}

/* ==========================================================================
   4. Servicios
   ========================================================================== */
.gen-serv {
	padding: 80px 0;
	background: #fff;
}
.gen-serv__head {
	width: 90%;
	margin: 0 auto;
	padding: 27px 0;
}
.gen-serv__head > * {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.gen-serv__grid {
	display: flex;
	justify-content: space-between;
	width: 89%;
	margin: 0 auto;
	padding-top: 27px;
}
.gen-svc {
	width: 29.67%;
}
.gen-svc__img {
	margin-bottom: 30px;
	line-height: 0;
}
.gen-svc__pic {
	display: block;
	width: 100%;
	height: auto;
}
.gen-svc__title {
	padding-bottom: 10px;
	text-align: center;
	font: 700 26px/41.6px var(--gen-teko);
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--gen-ink);
}
.gen-toggle {
	max-width: 400px;
	margin: 0 auto;
	padding: 11px 20px;
	background: var(--gen-blue);
	color: #fff;
	font: 500 14px/28px var(--gen-open);
}
.gen-toggle__h {
	font: inherit;
}
.gen-toggle__btn {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 50px 0 0;
	border: 0;
	background: none;
	color: #fff;
	text-align: left;
	font: 600 12px/12px var(--gen-open);
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}
.gen-toggle__ico {
	position: absolute;
	top: 50%;
	right: 0;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	color: #fff;
}
.gen-toggle__ico--closed {
	display: none;
}
.gen-toggle:not(.is-open) .gen-toggle__ico--open {
	display: none;
}
.gen-toggle:not(.is-open) .gen-toggle__ico--closed {
	display: block;
}
.gen-toggle__body {
	padding-top: 20px;
}
.gen-toggle:not(.is-open) .gen-toggle__body {
	display: none;
}
.gen-toggle__body p {
	font: 500 14px/28px var(--gen-open);
	color: #fff;
}
.gen-serv__cta {
	margin-top: 54px;
	text-align: center;
}

/* ==========================================================================
   5. Siempre contigo
   ========================================================================== */
.gen-sc {
	position: relative;
	padding-top: 250px;
	overflow: hidden;
	background: var(--gen-navy);
}
.gen-sc__bg {
	position: absolute;
	inset: 0;
}
.gen-sc__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(27, 31, 37, 0.3) 0%, rgba(27, 31, 37, 0.85) 100%);
}
.gen-sc__bg--mob {
	display: none;
}
.gen-sc__ghostrow {
	position: relative;
	display: flow-root;
	min-height: 1px;
	width: 90%;
	margin: 65px auto 0;
	mix-blend-mode: overlay;
	backface-visibility: hidden;
}
.gen-sc__ghost {
	margin-bottom: -60px;
	font: 500 160px/96px var(--gen-teko);
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	filter: blur(4px);
	backface-visibility: hidden;
}
.gen-sc__titlerow {
	position: relative;
	display: flow-root;
	width: 90%;
	margin: 0 auto 120px;
}
.gen-sc__title {
	padding-bottom: 10px;
	font: 500 9vw/1.2em var(--gen-teko);
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}
.gen-sc__cta {
	position: relative;
	padding-top: 27px;
	text-align: center;
}

/* ==========================================================================
   6. Pide tu gas
   ========================================================================== */
.gen-pide {
	padding: 80px 0;
	background: #fff;
}
.gen-pide__head {
	display: flow-root;
	width: 80%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 27px 0;
}
.gen-pide__head > * {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.gen-pide__head .gen-sub {
	padding-bottom: 20px;
	margin-bottom: -28px;
	line-height: 32px;
}
.gen-pide__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 5.5%;
	width: 80%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 27px 0;
}
.gen-pide__item {
	text-align: center;
	transition: transform 300ms ease 0ms;
}
.gen-pide__item:hover {
	transform: scale(1.05);
}
.gen-pide__item a {
	display: block;
	width: 50%;
	margin: 0 auto;
	line-height: 0;
}
.gen-pide__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.gen-br-m {
	display: none;
}

/* ==========================================================================
   7. App
   ========================================================================== */
.gen-app {
	display: flex;
	height: 555px;
	margin-bottom: 130px;
	background: var(--gen-gray); /* El fondo original es una imagen rota; se ve este gris. */
}
.gen-app__img {
	width: 66.6667%;
}
.gen-app__pic {
	display: block;
	width: 85%;
	height: auto;
}
.gen-app__txt {
	width: 33.3333%;
	padding: 60px 5%;
}
.gen-app__title {
	margin: 32px 100px 0 -160px;
	padding-bottom: 10px;
	font: 500 40px/40px var(--gen-teko);
	text-align: center;
	text-transform: uppercase;
	color: var(--gen-ink);
}
.gen-app__p {
	margin: 0 100px 0 -160px;
	font: 400 20px/32px var(--gen-lato);
	text-align: center;
	color: var(--gen-txt);
}
.gen-app__btns {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 39px;
	margin: 39px 0 0 -280px;
	text-align: center;
}

/* ==========================================================================
   8. Estaciones de carburación
   ========================================================================== */
.gen-est {
	padding: 40px 0;
	background: #fff;
}
.gen-est__head {
	display: flow-root;
	width: 95%;
	margin: 0 auto;
	padding: 27px 0;
}
.gen-est__head > * {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.gen-est__head .gen-sub {
	line-height: 32px;
	padding-bottom: 20px;
	margin-bottom: -28px;
}
.gen-est__row {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 80px;
	padding: 27px 0;
}
.gen-est__map {
	position: relative;
	flex: 0 0 36.6667%;
	height: 700px;
	background: #e5e3df;
	overflow: hidden;
}
.gen-est__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: none;
}
.gen-est__map iframe.is-on {
	display: block;
}
.gen-est__map .gen-gmap {
	position: absolute;
	inset: 0;
}
.gen-gmap .gm-style-iw a {
	color: #005c8e;
}
.gen-est__nomap {
	padding: 40px 20px;
	text-align: center;
}
.gen-est__panel {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	flex: 0 0 57.78%;
	margin-left: calc(5.5% - 65px);
}
.gen-est__tabs {
	flex: 0 0 136px;
	display: flex;
	flex-direction: column;
	margin: 10px;
	padding: 10px;
	background: #fff;
}
.gen-tab {
	position: relative;
	display: flex;
	padding: 10px;
	border: 0;
	border-radius: 0;
	background: var(--gen-red);
	color: #fff;
	text-align: left;
	cursor: pointer;
	font: 500 14px/23.8px var(--gen-open);
	-webkit-appearance: none;
	appearance: none;
	transition: all 0.5s;
}
.gen-tab__t {
	display: block;
	padding: 5px;
	font: 500 22px/23.8px var(--gen-teko);
	text-transform: uppercase;
	color: #fff;
	word-break: normal;
}
.gen-tab.is-active {
	background: #fff;
	border-top: 5px solid var(--gen-red);
}
.gen-tab.is-active .gen-tab__t {
	color: var(--gen-red);
}
.gen-tab.is-active::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -25px;
	margin-top: -15px;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-right: 15px solid var(--gen-red);
}
.gen-tab:focus-visible {
	outline: 2px solid #000;
	outline-offset: -4px;
}
.gen-est__panels {
	flex: 1 1 auto;
	margin: 10px;
	padding: 10px;
	background: #fff;
	min-width: 0;
}
.gen-est__pane[hidden] {
	display: none;
}
.gen-est__blurb {
	width: 80%;
	margin: 0 auto;
	padding: 27px 0;
	text-align: center;
	font-size: 10px;
	transition: transform 300ms ease 0ms;
}
.gen-est__blurb:hover {
	transform: scale(1.05);
}
.gen-est__pin {
	display: block;
	width: 35px;
	height: 35px;
	margin: 0 auto 30px;
	font-size: 35px;
	color: var(--gen-red);
}
.gen-est__name {
	padding-bottom: 10px;
	font: 500 24px/24px var(--gen-teko);
	text-transform: uppercase;
	color: var(--gen-ink);
}
.gen-est__addr {
	font: 500 10px/23.8px var(--gen-open);
	text-transform: uppercase;
	color: var(--gen-txt);
}
.gen-est__btn {
	margin-top: 24.2px;
	margin-bottom: 80px;
}

/* ==========================================================================
   9. Contacto
   ========================================================================== */
.gen-contact {
	position: relative;
	z-index: 2000;
	display: flex;
	min-height: 726px;
	margin-top: -110px;
	background: var(--gen-red);
}
.gen-contact__left {
	position: relative;
	flex: 0 0 50%;
	padding: 150px 60px 150px 144px;
	overflow: hidden;
}
.gen-contact__bg {
	position: absolute;
	inset: 0;
}
.gen-contact__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(24, 30, 36, 0.9) 0%, rgba(255, 0, 0, 0.7) 100%);
}
.gen-contact__in {
	position: relative;
	z-index: 2;
	color: #fff;
}
.gen-contact__h2 {
	padding-bottom: 10px;
	font: 500 96px/96px var(--gen-teko);
	text-transform: uppercase;
	color: #fff;
}
.gen-contact__phone {
	font: 500 40px/80px var(--gen-teko);
	color: #fff;
}
.gen-contact__cols {
	display: flex;
	column-gap: 32px;
	margin-top: 30px;
}
.gen-contact__col {
	flex: 0 0 242px;
}
.gen-contact__lbl {
	padding-bottom: 10px;
	font: 500 22px/22px var(--gen-teko);
	color: #fff;
}
.gen-contact__blk {
	font: 400 18px/32.4px var(--gen-lato);
	color: #fff;
}
.gen-contact__blk--mail {
	margin-bottom: 15.95px;
	font-size: 15px;
	line-height: 27px;
}
.gen-contact__blk a {
	color: #fff;
}
.gen-contact__blk a:hover {
	text-decoration: underline;
}
.gen-contact__blk--hours p {
	padding-bottom: 18px;
}
.gen-contact__blk--hours p:last-child {
	padding-bottom: 0;
}
.gen-contact__phone a:hover {
	text-decoration: underline;
}
.gen-contact__right {
	position: relative;
	flex: 0 0 50%;
	padding: 150px 144px 150px 60px;
	background: var(--gen-red-dark);
}
.gen-form__title {
	padding-bottom: 16px;
	font: 500 40px/48px var(--gen-teko);
	text-transform: uppercase;
	color: #fff;
}
.gen-form__field {
	margin-bottom: 3.09%;
}
.gen-form input[type='text'],
.gen-form input[type='email'],
.gen-form textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 16px;
	border: 0;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.15);
	color: #fff;
	font: 400 16px var(--gen-lato);
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
}
.gen-form input::placeholder,
.gen-form textarea::placeholder {
	color: #fff;
	opacity: 1;
}
.gen-form textarea {
	height: 150px;
	min-height: 150px;
	resize: vertical;
}
.gen-form input:focus,
.gen-form textarea:focus {
	outline: 2px solid #fff;
	outline-offset: 0;
}
.gen-form__field.has-error input,
.gen-form__field.has-error textarea {
	outline: 2px solid #fff;
	background: rgba(0, 0, 0, 0.3);
}
.gen-form__actions {
	text-align: right;
}
.gen-form__msg:not(:empty) {
	margin-top: 12px;
}
.gen-form__msg {
	font: 400 16px/24px var(--gen-lato);
	color: #fff;
}
.gen-form__thanks {
	color: #fff;
}
.gen-form__thanks[hidden] {
	display: none;
}
.gen-form__thanks-p {
	font: 400 18px/32.4px var(--gen-lato);
	color: #fff;
}
.gen-hp {
	position: absolute !important;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   Pie
   ========================================================================== */
.gen-footer {
	height: 146px;
	padding-top: 61px;
	background: var(--gen-red);
	text-align: center;
}
.gen-footer__text {
	font: 500 36px/23.8px var(--gen-teko);
	color: #fff;
}

/* ==========================================================================
   Botón flotante de WhatsApp (sin plugin)
   ========================================================================== */
.gen-wa-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #25d366;
	box-shadow: 1px 6px 24px rgba(7, 94, 84, 0.24);
	opacity: 0;
	transform: scale(0.6);
}
.gen-wa-float__ico {
	width: 32px;
	height: 32px;
}
.gen-wa-float__tip {
	position: absolute;
	right: 70px;
	top: 50%;
	margin-top: -19px;
	padding: 8px 14px;
	border-radius: 8px;
	background: #fff;
	color: #4a4a4a;
	font: 500 14px/22px var(--gen-open);
	white-space: nowrap;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
	opacity: 0;
	pointer-events: none;
	transform: translateX(8px);
	transition: opacity 0.3s, transform 0.3s;
}
.gen-wa-float.is-tip .gen-wa-float__tip {
	opacity: 1;
	transform: none;
}
/* Sin JavaScript también debe verse el botón */
.no-js .gen-wa-float,
.gen-wa-float.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.4s, transform 0.4s;
}
.gen-wa-float:hover {
	filter: brightness(1.05);
}

/* ==========================================================================
   404
   ========================================================================== */
.gen-404 {
	padding: 120px 20px;
	text-align: center;
}
.gen-404__n {
	font: 500 120px/1 var(--gen-teko);
	color: var(--gen-red);
}
.gen-404__t {
	font: 500 56px/1.1 var(--gen-teko);
	color: var(--gen-ink);
	text-transform: uppercase;
}
.gen-404__p {
	margin: 12px 0 28px;
	font: 400 20px/1.6 var(--gen-lato);
}

/* ==========================================================================
   Animaciones de entrada (Divi: 1000 ms, ease-in-out, una sola vez)
   ----------------------------------------------------------------------
   Hero: keyframes CSS puros con fill-mode `backwards` → termina SIEMPRE
   visible aunque falle el JS.
   Resto: el JS añade .gen-armed a lo que aún no está en pantalla, y .gen-in
   al entrar al viewport. Nada nace oculto desde el CSS.
   ========================================================================== */
@keyframes gen-slide-right { from { opacity: 0; transform: translate3d(-10%, 0, 0); } }
@keyframes gen-slide-left { from { opacity: 0; transform: translate3d(10%, 0, 0); } }
@keyframes gen-slide-left2 { from { opacity: 0; transform: translate3d(20%, 0, 0); } }
@keyframes gen-zoom { from { opacity: 0; transform: scale3d(0.9, 0.9, 0.9); } }
@keyframes gen-zoom20 { from { opacity: 0; transform: scale3d(0.8, 0.8, 0.8); } }
@keyframes gen-fold { from { opacity: 0; transform: perspective(2000px) rotateY(-45deg); } }
@keyframes gen-slide-bottom { from { transform: translate3d(0, 4%, 0); } }
@keyframes gen-wa-tip-in { from { opacity: 0; } }

.js .gen-ahero {
	animation: 1000ms ease-in-out backwards;
}
.js .gen-ahero--right { animation-name: gen-slide-right; }
.js .gen-ahero--zoom { animation-name: gen-zoom; animation-delay: 100ms; }
.js .gen-ahero--left { animation-name: gen-slide-left; }
.js .gen-ahero--left2 { animation-name: gen-slide-left2; animation-delay: 100ms; }

.gen-armed {
	opacity: 0;
}
.gen-armed[data-anim='slideBottom'] {
	opacity: 1;
}
.gen-armed.gen-in {
	opacity: 1;
	animation: 1000ms ease-in-out backwards;
	animation-delay: var(--gen-delay, 0ms);
}
.gen-armed.gen-in[data-anim='zoom'] { animation-name: gen-zoom20; }
.gen-armed.gen-in[data-anim='fold'] { animation-name: gen-fold; }
.gen-armed.gen-in[data-anim='slideBottom'] { animation-name: gen-slide-bottom; }

@media (prefers-reduced-motion: reduce) {
	.js .gen-ahero,
	.gen-armed.gen-in {
		animation: none !important;
	}
	.gen-armed {
		opacity: 1 !important;
	}
}


/* ==========================================================================
   TABLET (768 – 980)  — medidas del CSS calculado de Arandas a 820 px
   ========================================================================== */
@media (max-width: 980px) {
	.gen-header {
		height: 100px;
	}
	.gen-header__in {
		position: relative;
		align-items: flex-start;
		padding-top: 15px;
	}
	.gen-logo {
		width: 167px;
		height: 61px;
	}
	.gen-nav {
		position: static;
	}
	.gen-nav__toggle {
		position: absolute;
		top: 32px;
		right: 7px;
		display: block;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--gen-blue);
		cursor: pointer;
	}
	.gen-nav__toggle .gen-ico {
		width: 32px;
		height: 32px;
	}
	.gen-nav__list {
		display: none;
		position: absolute;
		top: 76px;
		left: 0;
		right: 0;
		z-index: 99999;
		flex-direction: column;
		margin: 0;
		padding: 5%;
		background: var(--gen-blue);
		border-top: 3px solid var(--gen-red);
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}
	.gen-nav__list.is-open {
		display: flex;
	}
	.gen-nav__list li {
		padding: 0;
	}
	.gen-nav__list a {
		padding: 10px 14.03px;
		font: 700 14px/26px var(--gen-open);
		color: #fff;
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
	}

	.gen-h2 {
		font-size: 66px;
		line-height: 66px;
	}

	/* Hero */
	.gen-hero {
		padding: 0 30px;
	}
	.gen-hero__col {
		width: 100%;
		margin-bottom: 30px;
	}
	.gen-hero__kicker {
		margin: 0 0 30px;
	}
	.gen-hero__title {
		margin-right: 0;
	}
	.gen-hero__text {
		margin: 0 0 60px;
	}

	/* Tarjetas azules */
	.gen-cards {
		background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.23) 45%);
	}
	.gen-cards__row {
		display: block;
		width: 80%;
	}
	.gen-card__body {
		padding: 60px 53px;
		margin-bottom: 30px;
	}
	.gen-card + .gen-card {
		margin-top: 30px;
	}
	.gen-card + .gen-card .gen-card__btn {
		margin-top: -60px;
		margin-bottom: 70px;
	}

	/* Teléfonos */
	.gen-tel__in {
		width: 80%;
		padding: 30px 0;
	}
	.gen-tel__title {
		max-width: none;
	}
	.gen-tel__grid {
		margin-top: 90px;
	}
	.gen-tel__row {
		display: block;
	}
	.gen-tel__row + .gen-tel__row {
		margin-top: 60px;
	}
	.gen-tel__item {
		width: 100%;
	}
	.gen-tel__item + .gen-tel__item {
		margin-top: 30px;
	}

	/* Servicios */
	.gen-serv {
		padding: 60px 0 80px;
	}
	.gen-serv__head {
		padding: 30px 0;
	}
	.gen-serv__grid {
		display: block;
		width: 80%;
		margin-top: -35px;
		padding-top: 30px;
	}
	.gen-svc {
		width: 83.84%;
		margin: 0 auto 30px;
	}
	.gen-svc:last-child {
		margin-bottom: 0;
	}
	.gen-serv__cta {
		margin-top: 60px;
	}

	/* Siempre contigo */
	.gen-sc__ghost {
		font-size: 90px;
		line-height: 54px;
	}
	.gen-sc__cta {
		padding-top: 30px;
	}

	/* Pide tu gas */
	.gen-pide {
		padding: 60px 0;
	}
	.gen-pide__head {
		padding: 30px 0;
	}
	.gen-pide__head .gen-sub {
		padding-bottom: 0;
		margin-bottom: -60px;
		line-height: 32px;
	}
	.gen-pide__grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 36px;
		row-gap: 30px;
		padding: 30px 0;
	}

	/* App */
	.gen-app {
		display: block;
		height: auto;
		margin-bottom: 0;
	}
	.gen-app__img,
	.gen-app__txt {
		width: 100%;
	}
	.gen-app__pic {
		width: 100%;
	}
	.gen-app__txt {
		padding: 180px 10% 60px;
	}
	.gen-app__title,
	.gen-app__p {
		margin-left: 0;
		margin-right: 0;
	}
	.gen-app__btns {
		margin-left: 0;
		padding-bottom: 40px;
	}

	/* Estaciones */
	.gen-est {
		padding: 60px 0 0;
	}
	.gen-est__head {
		margin-top: -20px;
		padding: 30px 0;
	}
	.gen-est__head .gen-sub {
		padding-bottom: 0;
		margin-bottom: -60px;
	}
	.gen-est__row {
		display: block;
		padding: 30px 0;
		margin-bottom: 80px;
	}
	.gen-est__map {
		height: 350px;
		margin-bottom: 30px;
	}
	.gen-est__panel {
		flex-direction: column;
		flex: none;
		margin-left: 0;
		margin-bottom: 30px;
	}
	.gen-est__tabs {
		flex: none;
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.gen-tab {
		flex: 0 0 97px;
	}
	.gen-tab.is-active::before {
		display: none;
	}
	.gen-est__panels {
		margin: 10px;
		padding: 10px 0;
	}
	.gen-est__blurb {
		padding: 30px 0;
	}
	.gen-est__btn {
		margin-top: 30px;
	}

	/* Contacto */
	.gen-contact {
		display: block;
		min-height: 0;
	}
	.gen-contact__left {
		padding: 150px 0 30px 110px;
	}
	.gen-contact__h2 {
		font-size: 66px;
		line-height: 66px;
	}
	.gen-contact__cols {
		column-gap: 0;
	}
	.gen-contact__col {
		flex: 0 0 355px;
	}
	.gen-contact__right {
		padding: 40px 82px 100px;
	}

	/* Pie */
	.gen-footer {
		height: 144px;
		padding-top: 60px;
	}
}

/* ==========================================================================
   CELULAR (<= 767)  — medidas de Arandas a 390 px
   ========================================================================== */
@media (max-width: 767px) {
	.gen-logo {
		width: 126px;
		height: 46px;
	}
	.gen-header__in {
		padding-top: 27px;
	}
	.gen-nav__toggle {
		top: 37px;
	}
	.gen-nav__list {
		top: 73px;
	}

	.gen-h2 {
		font-size: 50px;
		line-height: 50px;
	}
	.gen-sub {
		font-size: 16px;
		line-height: 25.6px;
	}

	/* Hero */
	.gen-hero__col {
		padding: 46.8px 10px;
		background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(255, 255, 255, 0) 100%);
	}
	.gen-hero__kicker {
		font-size: 25px;
		line-height: 1.2em;
	}
	.gen-hero__title {
		margin-right: -5vw;
		line-height: 1.2em;
	}
	.gen-hero__text {
		font-size: 18px;
		line-height: 27px;
		margin-bottom: 0;
	}
	.gen-hero__btn {
		margin: 80px 0;
		text-align: center;
	}

	/* Tarjetas */
	.gen-cards {
		z-index: 100;
		background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.23) 52%);
	}
	.gen-card__body {
		padding: 60px 0;
	}
	.gen-card + .gen-card .gen-card__body {
		margin-top: 40px;
	}
	.gen-card + .gen-card .gen-card__btn {
		margin-top: 0;
		margin-bottom: 84px;
	}

	/* Teléfonos */
	.gen-tel {
		margin-top: -70px;
	}
	.gen-tel__in {
		padding-top: 50px;
	}
	.gen-tel__grid {
		margin-top: 46px;
	}
	.gen-tel__row:last-child .gen-tel__item:last-child {
		margin-bottom: -90px;
	}
	.gen-divider--100:not(.gen-divider--red) {
		height: 50px;
		background-size: 100% 50px;
	}

	/* Servicios */
	.gen-serv {
		padding-top: 46px;
	}
	.gen-serv__head > * {
		width: 90%;
	}
	.gen-serv__grid {
		margin-top: -42px;
	}
	.gen-svc {
		width: 100%;
	}

	/* Siempre contigo */
	.gen-sc__ghostrow {
		display: none;
	}
	.gen-sc__bg--desk {
		display: none;
	}
	.gen-sc__bg--mob {
		display: block;
	}
	.gen-sc__bg::after {
		background: linear-gradient(0deg, rgba(27, 31, 37, 0.3) 0%, #1b1f25 100%);
	}
	.gen-sc__titlerow {
		margin-top: 0;
		margin-bottom: 200px;
	}
	.gen-sc__title {
		font-size: 24vw;
		line-height: 0.8em;
		margin-bottom: -45px;
	}

	/* Pide tu gas */
	.gen-pide__head {
		margin-top: -20px;
	}
	.gen-pide__head .gen-sub {
		line-height: 25.6px;
		margin-bottom: -20px;
	}
	.gen-pide__grid {
		grid-template-columns: 1fr;
	}
	.gen-pide__item a {
		width: 30%;
	}
	.gen-br-m {
		display: inline;
	}

	/* App */
	.gen-app__title {
		margin-top: -118px;
	}
	.gen-app__p {
		font-size: 16px;
		line-height: 25.6px;
	}

	/* Estaciones */
	.gen-est {
		padding-top: 60px;
	}
	.gen-est__head {
		margin-top: -34px;
	}
	.gen-est__head > * {
		width: 90%;
	}
	.gen-est__head .gen-sub {
		line-height: 25.6px;
	}
	.gen-est__row {
		margin-top: 70px;
	}
	.gen-est__map {
		height: 500px;
	}
	.gen-est__tabs {
		flex-direction: column;
		overflow: visible;
		border-top: 8px solid #fff;
	}
	.gen-tab {
		flex: none;
		width: 100%;
	}
	/* Contacto */
	.gen-contact__left {
		padding: 150px 70px 30px;
	}
	.gen-contact__h2 {
		font-size: 36px;
		line-height: 36px;
	}
	.gen-contact__cols {
		display: block;
	}
	.gen-contact__col {
		flex: none;
	}
	.gen-contact__blk--mail,
	.gen-contact__blk--fb {
		margin-bottom: 20px;
	}
	.gen-contact__right {
		padding: 40px 39px 100px;
	}
}

/* ==========================================================================
   Ajustes de QA (30-sep): zonas táctiles, anclas, pie y menú sin JS.
   No cambian el aspecto; solo agrandan dónde se puede tocar.
   ========================================================================== */
/* "VER MÁS": que responda en toda la barra azul, no solo sobre la línea de texto. */
.gen-toggle__btn::before {
	content: "";
	position: absolute;
	inset: -16px -20px;
}
/* El título de la sección no queda tapado al llegar por un ancla. */
#telefonos, #servicios, #estaciones, #app, #contacto {
	scroll-margin-top: 24px;
}
/* Menú visible aunque el JavaScript no cargue. */
.no-js .gen-nav__list {
	display: flex;
	position: static;
}
@media (max-width: 980px) {
	/* Hamburguesa con zona táctil de 44 px sin cambiar el ícono. */
	.gen-nav__toggle {
		position: relative;
	}
	.gen-nav__toggle::before {
		content: "";
		position: absolute;
		inset: -6px;
	}
	/* Teléfonos, correo y Facebook: zona táctil de al menos 44 px de alto. */
	.gen-tel__num a,
	.gen-contact__blk a,
	.gen-contact__phone a {
		position: relative;
	}
	.gen-tel__num a::before,
	.gen-contact__blk a::before,
	.gen-contact__phone a::before {
		content: "";
		position: absolute;
		inset: -12px -6px;
	}
}
@media (max-width: 767px) {
	/* El botón flotante de WhatsApp ya no tapa la frase del pie. */
	.gen-footer {
		padding-bottom: 84px;
		height: auto;
	}
}