/**
 * PIER Landing Page — "Argentinos de Verdad"
 * Rediseño 2-columnas con identidad mundialista
 */

/* ========================================================================
   VARIABLES
   ======================================================================== */

:root {
	--pier-red: #E40138;
	--pier-red-dark: #C01430;
	--pier-celeste: #44D0F8;
	--pier-white: #FFFFFF;
	--pier-black: #1a1a1a;
	--pier-gray: #333333;
	--pier-border: #E5E5E5;
	--pier-placeholder: #ADADAD;
	--pier-disabled-bg: #CCCCCC;
	--pier-radius-pill: 50px;
	--pier-transition: all 0.3s ease;
}

/* ========================================================================
   RESET PAGE PADDING (block theme override)
   ======================================================================== */

body.page-template-page-pier-landing {
	margin: 0;
	padding: 0;
}

body.page-template-page-pier-landing .wp-block-group.alignfull {
	padding: 0 !important;
	margin: 0;
}

/* ========================================================================
   HERO — 2 columnas (2/5 + 3/5)
   ======================================================================== */

.pier-hero {
	display: flex;
	width: 100%;
	max-width: 2000px;
	height: 700px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	transition: height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pier-hero--collapsed {
	height: 280px;
}

/* --- Columna izquierda: branding --- */

/* Hero block — wrapper sobre hero + bandera para posicionar la caja */
.pier-hero-block {
	position: relative;
}

.pier-hero__left {
	width: 32%;
	background: var(--pier-red);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 40px 40px 0 0;
	position: relative;
	gap: 20px;
}

.pier-hero__left::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, #FFFFFF, #706F6F);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 1;
}

.pier-hero__left > * {
	position: relative;
	z-index: 2;
}

#pier-confetti-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.pier-hero__logo {
	height: 100px;
	width: auto;
	filter: brightness(0) invert(1);
	padding-left: 10%;
	transition: height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pier-hero--collapsed .pier-hero__logo {
	height: 110px;
}

.pier-hero__slogan {
	font-family: 'cubano', sans-serif;
	font-size: clamp(2.5rem, 5vw, 4.2rem);
	font-weight: 400;
	color: var(--pier-white);
	line-height: 0.95;
	text-transform: uppercase;
	letter-spacing: -1px;
	text-align: left;
	margin: 0;
	padding-left: 10%;
}

/* Fila mobile TV + textos — en desktop la TV se oculta */
.pier-hero__mobile-tv {
	display: none;
}

.pier-hero__product-img {
	position: absolute;
	bottom: -45px;
	left: 17%;
	transform: translateX(-50%);
	height: 530px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
	z-index: 10;
	transition: height 1.2s cubic-bezier(0.4, 0, 0.2, 1), bottom 1.2s ease;
}

/* Caja colapsada — aparece de arriba hacia abajo */
.pier-hero--collapsed ~ .pier-hero__product-img {
	height: 400px;
	bottom: 30px;
	left: 35%;
	opacity: 0;
	animation: pier-slide-down 0.8s ease both;
	animation-delay: 1.1s;
}

/* TV — oculta hasta el colapso */
.pier-hero__tv-img {
	position: absolute;
	bottom: -44px;
	height: 380px;
	width: auto;
	object-fit: contain;
	opacity: 0;
	z-index: 11;
	filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.35));
	pointer-events: none;
}

.pier-hero--collapsed ~ .pier-hero__tv-img {
	animation: pier-slide-left 0.8s ease both;
	animation-delay: 1.7s;
}

/* --- Columna derecha: foto hinchas + card --- */

.pier-hero__right {
	width: 68%;
	background-image: url('../images/pier-hinchas-bg.jpg');
	background-size: cover;
	background-position: center bottom;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0;
}

/* Overlay oscuro en columna derecha al colapsar */
.pier-hero--collapsed .pier-hero__right::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 3;
	animation: pier-fade-in 0.6s ease both;
}

/* Título colapsado sobre la foto */
.pier-hero__slogan-collapsed {
	display: none;
	position: absolute;
	inset: 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: left;
	color: var(--pier-white);
	text-transform: uppercase;
	z-index: 4;
	margin: 0;
	padding-left: 160px;
	gap: 8px;
}

.pier-hero__slogan-collapsed h2 {
	font-family: 'cubano', sans-serif;
	font-weight: 400;
	font-size: clamp(3rem, 6vw, 5.5rem);
	color: var(--pier-white);
	letter-spacing: -1px;
	line-height: 0.9;
	letter-spacing: -2px;
	margin: 0;
}

.pier-hero__slogan-sub {
	font-family: 'cubano', sans-serif;
	font-weight: 400;
	font-size: clamp(1rem, 2vw, 1.6rem);
	color: var(--pier-white);
	letter-spacing: 0.5px;
	line-height: 1.2;
	margin: 0;
	padding-left: 10%;
	opacity: 0.9;
}

.pier-hero--collapsed .pier-hero__slogan-collapsed {
	display: flex;
	animation: pier-slide-right 0.7s ease both;
	animation-delay: 0.3s;
}

/* Imágenes colapsadas — ocultas en desktop */
.pier-hero__collapsed-images {
	display: none;
}

/* Badge superior — barra horizontal ancha */
.pier-hero__badge {
	position: absolute;
	width: 341px;
	top: 0px;
	right: 0px;
	background: var(--pier-white);
	border-radius: 0;
	border-bottom-left-radius: 120px;
	padding: 11px 20px 11px 50px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	z-index: 5;
}

/* Badge mobile — oculto en desktop */
.pier-hero__badge--mobile {
	display: none;
}

.pier-hero__badge-icon {
	width: 25px;
	height: auto;
	flex-shrink: 0;
}

.pier-hero__badge-text {
	font-family: 'cubano', sans-serif;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--pier-red);
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

/* Área de cards */
.pier-hero__card-area {
	width: 65%;
	max-width: 600px;
	z-index: 2;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	margin-top: auto;
}

/* ========================================================================
   BANDERA ARGENTINA
   ======================================================================== */

.pier-flag {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
	z-index: 1;
}

.pier-flag__stripe {
	height: 50px;
	width: 100%;
}

.pier-flag__stripe--celeste {
	background: var(--pier-celeste);
}

.pier-flag__stripe--white {
	background: var(--pier-white);
}

/* ========================================================================
   CARD (shared between terms and form)
   ======================================================================== */

.pier-card {
	background: var(--pier-white);
	border-radius: 0 190px 0 0;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
	padding: 60px 60px 40px;
	transition: opacity 0.4s ease, transform 0.4s ease;
	flex: 1;
}

.pier-card--active {
	opacity: 1;
	transform: translateY(0);
}

.pier-card--hidden {
	display: none;
	opacity: 0;
	transform: translateY(20px);
}

.pier-card--fade-out {
	opacity: 0;
	transform: translateY(-20px);
	pointer-events: none;
}

.pier-card--fade-in {
	display: block;
	opacity: 0;
	transform: translateY(20px);
}

/* Card titles */
.pier-card__title {
	font-family: 'Manrope', sans-serif;
	font-size: clamp(1.3rem, 2.5vw, 1.8rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.5px;
	margin: 0 0 20px;
}

.pier-card__title--dark {
	color: var(--pier-black);
}

.pier-card__title--red {
	color: var(--pier-red);
}

/* Card actions */
.pier-card__actions {
	text-align: right;
	margin-top: 20px;
}

/* ========================================================================
   TERMS & CONDITIONS
   ======================================================================== */

.pier-terms-wrapper {
	position: relative;
}

.pier-terms-content {
	max-height: 400px;
	overflow-y: scroll;
	direction: rtl;
	padding-left: 16px;
	scrollbar-color: var(--pier-black) #F0F0F0;
	scrollbar-gutter: stable;
}

.pier-terms-content::-webkit-scrollbar {
	width: 5px;
	-webkit-appearance: none;
}

.pier-terms-content::-webkit-scrollbar-track {
	background: #F0F0F0;
	border-radius: 10px;
}

.pier-terms-content::-webkit-scrollbar-thumb {
	background: var(--pier-black);
	border-radius: 10px;
}

.pier-terms-content p {
	direction: ltr;
	font-family: 'Manrope', sans-serif;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--pier-gray);
	margin: 0 0 0.5em;
}

/* Indicador de scroll hacia abajo */
.pier-scroll-indicator {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--pier-red);
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.4s ease;
	animation: pier-bounce-down 1.5s ease-in-out infinite;
}

.pier-scroll-indicator--hidden {
	opacity: 0 !important;
	animation: none;
}

@keyframes pier-bounce-down {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%       { transform: translateX(-50%) translateY(7px); }
}

/* ========================================================================
   BUTTON
   ======================================================================== */

.pier-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'cubano', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: none;
	border-radius: 15px;
	cursor: pointer;
	transition: var(--pier-transition);
}

.pier-btn--red {
	background: var(--pier-red);
	color: var(--pier-white);
	padding: 0.75rem 4.5rem;
}

.pier-btn--red:hover {
	background: var(--pier-red-dark);
	box-shadow: 0 5px 20px rgba(228, 1, 56, 0.3);
	transform: translateY(-2px);
}

.pier-btn--red:active {
	transform: translateY(0);
}

/* Disabled state */
.pier-btn--disabled,
.pier-btn:disabled {
	background: var(--pier-disabled-bg) !important;
	color: #888888 !important;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

.pier-btn--disabled:hover,
.pier-btn:disabled:hover {
	background: var(--pier-disabled-bg) !important;
	transform: none !important;
	box-shadow: none !important;
}

/* ========================================================================
   GRAVITY FORMS — Override estilos para diseño PIER
   ======================================================================== */

/* Variables GF override */
:is(.pier-card, .pier-section-form__card) .gform_wrapper.gform-theme {
	--gf-color-primary: var(--pier-red);
	--gf-color-primary-rgb: 228, 1, 56;
	--gf-color-primary-darker: var(--pier-red-dark);
	--gf-ctrl-border-color: var(--pier-border);
	--gf-radius: 0px;
}

/* Ocultar título y descripción de GF (usamos nuestro h2) */
:is(.pier-card, .pier-section-form__card) .gform_wrapper .gform_heading {
	display: none;
}

/* Layout 2 columnas — columna izq: campos 1-8, columna der: campo 9 + 10 */
:is(.pier-card, .pier-section-form__card) .gform_wrapper .gform_fields {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	gap: 20px 40px;
}

/* Ocultar campos no usados: Apellido y Mensaje */
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_3,
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_10 {
	display: none !important;
}

/* Columna izquierda: Nombre y apellido, Documento, Mail, Teléfono */
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_1 {
	grid-column: 1;
	grid-row: 1;
}
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_7 {
	grid-column: 1;
	grid-row: 2;
}
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_4 {
	grid-column: 1;
	grid-row: 3;
}
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_8 {
	grid-column: 1;
	grid-row: 4;
}

/* Columna derecha: Punto de venta, Provincia, Ciudad */
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_9 {
	grid-column: 2;
	grid-row: 1;
}
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_5 {
	grid-column: 2;
	grid-row: 2;
}
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_6 {
	grid-column: 2;
	grid-row: 3;
}

/* Ocultar inputs originales reemplazados via JS (Punto de venta + Provincia) */
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_9 .ginput_container,
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_5 .ginput_container {
	display: none;
}

/* Ocultar labels de Provincia y Ciudad (usan placeholder/select) */
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_5 > .gfield_label,
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_6 > .gfield_label {
	display: none;
}

/* Punto de venta — label + cajitas en línea */
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_9 {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
}

:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_9 > .gfield_label {
	white-space: nowrap;
	flex-shrink: 0;
}

.pier-pdv-boxes {
	display: flex;
	gap: 10px;
}

.pier-pdv-boxes__input {
	width: 45px;
	height: 45px;
	border: 1px solid var(--pier-black) !important;
	border-radius: 8px !important;
	text-align: center;
	font-family: 'Manrope', sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--pier-gray);
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
	text-transform: uppercase;
	caret-color: var(--pier-red);
}

.pier-pdv-boxes__input:focus {
	border-color: var(--pier-red) !important;
	box-shadow: none !important;
	outline: none !important;
}

:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_9.gfield_error .pier-pdv-boxes__input {
	border-color: var(--pier-red);
}

/* Campos individuales */
:is(.pier-card, .pier-section-form__card) .gform_wrapper .gfield {
	margin-bottom: 0;
}

/* Ocultar labels de los campos con placeholder (col izquierda) */
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_1 > .gfield_label,
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_4 > .gfield_label,
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_7 > .gfield_label,
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_8 > .gfield_label {
	display: none;
}

/* Labels restantes */
:is(.pier-card, .pier-section-form__card) .gform_wrapper .gfield_label {
	font-family: 'Manrope', sans-serif;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--pier-placeholder);
}

/* Inputs text/email/tel — bottom border only */
:is(.pier-card, .pier-section-form__card) .gform_wrapper .ginput_container input[type="text"],
:is(.pier-card, .pier-section-form__card) .gform_wrapper .ginput_container input[type="email"],
:is(.pier-card, .pier-section-form__card) .gform_wrapper .ginput_container input[type="tel"] {
	width: 100%;
	padding: 0.7rem 0;
	border: none !important;
	border-bottom: 1px solid var(--pier-border) !important;
	border-radius: 0 !important;
	font-family: 'Manrope', sans-serif;
	font-size: 1rem;
	color: var(--pier-gray);
	background: transparent !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease;
	outline: none;
}

:is(.pier-card, .pier-section-form__card) .gform_wrapper .ginput_container input[type="text"]:focus,
:is(.pier-card, .pier-section-form__card) .gform_wrapper .ginput_container input[type="email"]:focus,
:is(.pier-card, .pier-section-form__card) .gform_wrapper .ginput_container input[type="tel"]:focus {
	border-bottom-color: var(--pier-red) !important;
	box-shadow: none !important;
}

/* Placeholder dentro de inputs */
:is(.pier-card, .pier-section-form__card) .gform_wrapper .ginput_container input::placeholder {
	color: var(--pier-placeholder);
	opacity: 1;
	font-weight: 400;
}

/* Dropdown pill — Provincia */
:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_5 select {
	width: 100%;
	height: auto !important;
	line-height: normal !important;
	padding: 0.85rem 2.5rem 0.85rem 1.5rem;
	border: 1.5px solid #BDBDBD !important;
	border-radius: var(--pier-radius-pill) !important;
	font-family: 'Manrope', sans-serif;
	font-size: 0.95rem;
	color: var(--pier-gray) !important;
	background: transparent !important;
	text-align: center;
	text-align-last: center;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 12px !important;
	box-shadow: none !important;
	outline: none;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_5 select:focus {
	border-color: var(--pier-red) !important;
	box-shadow: 0 0 0 2px rgba(228, 1, 56, 0.1) !important;
}

:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_5 select option {
	color: var(--pier-gray);
}

:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_5 select option:disabled {
	color: var(--pier-placeholder);
}

/* Form-level grid para posicionar footer en columna derecha */
:is(.pier-card, .pier-section-form__card) .gform_wrapper form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 40px;
}

:is(.pier-card, .pier-section-form__card) .gform_wrapper .gform_body {
	grid-column: 1 / -1;
}

/* Footer — columna derecha, botón + nota apilados */
:is(.pier-card, .pier-section-form__card) .gform_wrapper .gform_footer {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	padding: 0;
	margin-top: 20px;
}

:is(.pier-card, .pier-section-form__card) .gform_wrapper .gform_footer input[type="submit"],
:is(.pier-card, .pier-section-form__card) .gform_wrapper .gform_footer .gform_button {
	background: var(--pier-red) !important;
	color: var(--pier-white) !important;
	border: none !important;
	border-radius: 15px !important;
	padding: 0.75rem 4.5rem !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	cursor: pointer;
	transition: var(--pier-transition);
}

:is(.pier-card, .pier-section-form__card) .gform_wrapper .gform_footer input[type="submit"]:hover,
:is(.pier-card, .pier-section-form__card) .gform_wrapper .gform_footer .gform_button:hover {
	background: var(--pier-red-dark) !important;
	box-shadow: 0 5px 20px rgba(228, 1, 56, 0.3);
	transform: translateY(-2px);
}

/* Validation error */
:is(.pier-card, .pier-section-form__card) .gform_wrapper .gfield_error .ginput_container input,
:is(.pier-card, .pier-section-form__card) .gform_wrapper .gfield_error .ginput_container textarea {
	border-color: var(--pier-red) !important;
}

:is(.pier-card, .pier-section-form__card) .gform_wrapper .gfield_error .gfield_label {
	color: var(--pier-red);
}

:is(.pier-card, .pier-section-form__card) .gform_wrapper .validation_message {
	font-family: 'Manrope', sans-serif;
	font-size: 0.75rem;
	color: var(--pier-red);
}

/* Nota campo obligatorio (dentro del footer) */
.pier-form-required-note {
	font-family: 'Manrope', sans-serif;
	font-size: 0.8rem;
	color: var(--pier-placeholder);
	text-align: right;
	margin: 0;
}

.pier-form-required-note span {
	color: var(--pier-red);
}

/* Animación de entrada del formulario */
@keyframes pier-form-enter {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.pier-section-form__card.pier-form-enter {
	animation: pier-form-enter 0.7s ease both;
}

/* ========================================================================
   IMAGEN DE AGRADECIMIENTO — reemplaza la tarjeta tras envío
   ======================================================================== */

.pier-thanks-img {
	display: none;
	width: calc(100% + 160px);
	height: auto;
	margin: -50px -80px;
	border-radius: 16px;
	animation: pier-fade-in 0.5s ease both;
}

.pier-thanks-img--visible {
	display: block;
}

/* Cuando GF inyecta la confirmación: ocultar contenido y mostrar imagen */
.pier-section-form__card:has(#gform_confirmation_wrapper_1) {
	max-width: 1000px;
}

.pier-section-form__card:has(#gform_confirmation_wrapper_1) .pier-section-form__content {
	display: none !important;
}

.pier-section-form__card:has(#gform_confirmation_wrapper_1) .pier-thanks-img {
	display: block;
}

/* Ocultar mensaje de confirmación nativo de GF */
:is(.pier-card, .pier-section-form__card) .gform_confirmation_message {
	display: none !important;
}

/* ========================================================================
   LOADING STATE
   ======================================================================== */

.pier-btn--loading {
	pointer-events: none;
	opacity: 0.7;
}

.pier-btn--loading::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 10px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: var(--pier-white);
	border-radius: 50%;
	animation: pier-spin 0.6s linear infinite;
}

@keyframes pier-spin {
	to { transform: rotate(360deg); }
}

/* ========================================================================
   SECCIÓN FORMULARIO (debajo de la bandera)
   ======================================================================== */

.pier-section-form {
	background: #F5F5F5;
	padding: 60px 40px 0;
}

.pier-section-form__card {
	display: none;
	position: relative;
	overflow: hidden;
	background: var(--pier-white);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
	padding: 50px 80px 50px;
	max-width: 1200px;
	margin: 0 auto;
}

.pier-section-form__title {
	font-family: 'Poppins', sans-serif;
	font-size: clamp(1.4rem, 2.5vw, 1.9rem);
	font-weight: 600;
	color: var(--pier-red);
	margin: 0 0 36px;
}

/* Advertencia */
.pier-advertencia {
	max-width: 1200px;
	margin: 40px auto 0;
	padding-bottom: 0;
}

.pier-advertencia img {
	width: 100%;
	height: auto;
	display: block;
}

/* ========================================================================
   ANIMACIONES DE ENTRADA — HERO
   ======================================================================== */

@keyframes pier-fade-left {
	from { opacity: 0; transform: translateX(-50px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes pier-fade-up {
	from { opacity: 0; transform: translateY(60px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes pier-product-up {
	from { opacity: 0; transform: translateX(-50%) translateY(80px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes pier-fade-right {
	from { opacity: 0; transform: translateX(70px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes pier-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Texto colapsado: izquierda a derecha */
@keyframes pier-slide-right {
	from { opacity: 0; transform: translateX(-60px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* Caja cigarrillos colapsada: arriba hacia abajo */
@keyframes pier-slide-down {
	from { opacity: 0; transform: translateX(-50%) translateY(-80px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* TV: derecha a izquierda */
@keyframes pier-slide-left {
	from { opacity: 0; transform: translateX(80px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* Slogan: de izquierda a derecha */
.pier-hero__slogan {
	animation: pier-fade-left 0.7s ease both;
	animation-delay: 0.2s;
}

/* Caja de cigarros: de abajo hacia arriba */
.pier-hero__product-img {
	animation: pier-product-up 0.8s ease both;
	animation-delay: 0.7s;
}

/* Tarjeta grande: shape desde abajo, sin contenido */
#pier-terms {
	animation: pier-fade-up 0.6s ease both;
	animation-delay: 1.1s;
}

/* Badge: shape desde la derecha, sin contenido */
.pier-hero__badge {
	animation: pier-fade-right 0.6s ease both;
	animation-delay: 1.1s;
}

/* Contenido del badge: aparece después del shape */
.pier-hero__badge-icon,
.pier-hero__badge-text {
	animation: pier-fade-in 0.5s ease both;
	animation-delay: 1.8s;
}

/* Contenido de la tarjeta grande: aparece después del shape */
#pier-terms .pier-card__title,
#pier-terms .pier-terms-content,
#pier-terms .pier-card__actions {
	animation: pier-fade-in 0.5s ease both;
	animation-delay: 1.8s;
}

/* --- Animaciones de salida (al aceptar T&C) --- */

@keyframes pier-exit-left {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(-50px); }
}

@keyframes pier-exit-right {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(70px); }
}

@keyframes pier-exit-down {
	from { opacity: 1; transform: translateX(-50%) translateY(0); }
	to   { opacity: 0; transform: translateX(-50%) translateY(60px); }
}

@keyframes pier-exit-fade {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes pier-exit-collapse {
	0%   { max-height: 500px; opacity: 1; }
	80%  { max-height: 0; opacity: 0; }
	100% { max-height: 0; opacity: 0; display: none; }
}

/* Logo nunca desaparece — sin animación de salida */

.pier-hero-block--exiting .pier-hero__slogan {
	animation: pier-exit-left 0.4s ease forwards;
}

.pier-hero-block--exiting .pier-hero__badge {
	animation: pier-exit-right 0.4s ease forwards;
}

/* La caja de cigarros no sale — transiciona a 250px al colapsar */

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 900px) {
	body {
		background-color: black;
	}

	.pier-hero {
		flex-direction: column;
		height: auto;
	}

	.pier-hero__left {
		width: 100%;
		padding: 40px 20px 0;
		min-height: 400px;
	}

	.pier-hero__right {
		width: 96%;
		height: 400px;
		max-height: 200px;
		min-height: auto;
		padding: 50px 16px 0 0;
		flex-direction: column;
		align-items: center;
	}

	/* Ocultar badge del right, mostrar el del left */
	.pier-hero__right > .pier-hero__badge {
		display: none;
	}

	.pier-hero__badge--mobile {
		display: flex;
		position: absolute;
		top: 0;
		right: 0;
		width: 260px;
		border-radius: 0;
		border-bottom-left-radius: 120px;
		padding: 11px 20px 11px 50px;
	}

	.pier-hero__badge--mobile .pier-hero__badge-icon {
		display: none;
	}

	.pier-hero--collapsed .pier-hero__badge--mobile {
		display: none;
	}

	.pier-hero__card-area {
		width: 93%;
		max-width: 100%;
		position: relative;
		top: -150px;
	}

	.pier-hero__product-img,
	.pier-hero__tv-img {
		display: none !important;
	}

	.pier-hero__mobile-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 16px;
		z-index: 3;
	}

	.pier-hero__mobile-tv {
		display: block;
		width: 40%;
		max-width: 180px;
		height: auto;
		flex-shrink: 0;
	}

	.pier-hero__mobile-texts {
		padding-bottom: 20px;
	}

	.pier-card {
		padding: 30px 20px;
		border-radius: 0 110px 0 0;
	}

	.pier-section-form__card {
		padding: 50px 20px 50px;
	}

	.pier-section-form__card.pier-form-enter {
		display: flex;
		justify-content: center;
	}

	:is(.pier-card, .pier-section-form__card) .gform_wrapper .gform_fields {
		grid-template-columns: 1fr !important;
		gap: 16px 0 !important;
	}

	:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_9,
	:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_5,
	:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_6 {
		grid-column: 1;
		grid-row: auto;
	}

	:is(.pier-card, .pier-section-form__card) .gform_wrapper form {
		grid-template-columns: 1fr;
		gap: 0;
	}

	:is(.pier-card, .pier-section-form__card) .gform_wrapper .gform_footer {
		grid-column: 1 / -1;
		align-items: center;
	}

	:is(.pier-card, .pier-section-form__card) .gform_wrapper .gform_footer input[type="submit"],
	:is(.pier-card, .pier-section-form__card) .gform_wrapper .gform_footer .gform_button {
		width: 100%;
	}

	:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_9 {
		flex-wrap: wrap;
	}

	:is(.pier-card, .pier-section-form__card) .gform_wrapper #field_1_5 select {
		font-size: 1rem;
		padding: 0.9rem 2.5rem 0.9rem 1.5rem;
	}

	.pier-thanks-img {
		width: calc(88% + 40px);
		padding: 50px 20px 50px;
	}

	.pier-form-required-note {
		text-align: center;
	}

	.pier-flag {
		display: none;
	}

	.pier-advertencia {
		text-align: center;
		padding: 0;
		margin: 0 auto 0;
	}

	.pier-advertencia img {
		margin: 0 auto;
	}

	.pier-section-form {
		padding: 0;
	}

	/* Salida del mobile-row al aceptar */
	.pier-hero-block--exiting .pier-hero__mobile-row {
		animation: pier-exit-collapse 0.6s ease forwards;
		overflow: hidden;
	}

	.pier-hero--collapsed .pier-hero__mobile-row {
		display: none !important;
	}

	.pier-hero__slogan-collapsed {
		padding-left: 0;
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}

	.pier-hero--collapsed .pier-hero__collapsed-images {
		display: block;
		position: relative;
		flex-shrink: 0;
		width: 40%;
		max-width: 180px;
		animation: pier-fade-in 0.5s ease both;
		animation-delay: 1.2s;
	}

	.pier-hero__collapsed-tv {
		width: 100%;
		height: auto;
		display: block;
	}

	.pier-hero__collapsed-product {
		position: absolute;
		bottom: -10px;
		right: -20px;
		height: 120px;
		width: auto;
		z-index: 2;
		filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
	}

	.pier-hero__collapsed-texts {
		animation: pier-fade-in 0.5s ease both;
		animation-delay: 1.2s;
	}

	/* Colapso de pier-hero__left después de la salida */
	.pier-hero--collapsed .pier-hero__left {
		min-height: 0 !important;
		padding-top: 20px;
		padding-bottom: 0;
		transition: min-height 0.6s ease, padding 0.6s ease;
	}
}

@media (max-width: 600px) {
	.pier-hero__left {
		padding: 60px 16px 30px 0;
		min-height: 350px;
		gap: 15px;
	}

	.pier-hero--collapsed .pier-hero__left {
		padding: 20px 0 0 0;
	}

	.pier-hero__logo {
		height: 100px;
		padding-left: 16px;
	}

	.pier-hero__slogan {
		font-size: 2.4rem;
		padding-left: 0;
	}

	.pier-hero__slogan-sub {
		padding-left: 0;
		font-size: clamp(0.8rem, 2vw, 1.6rem);
	}

	.pier-hero__slogan-collapsed h2 {
		font-size: clamp(2rem, 6vw, 5.5rem);
	}

	.pier-hero__product-img {
		max-height: 200px;
	}

	.pier-hero__badge-icon {
		width: 28px;
	}

	.pier-hero__badge-text {
		font-size: 0.72rem;
		white-space: normal;
	}

	.pier-terms-content {
		max-height: 300px;
	}

	.pier-card__title {
		font-size: 1.2rem;
	}

	.pier-pdv-boxes__input {
		width: 38px;
		height: 38px;
		font-size: 1rem;
	}

	.pier-pdv-boxes {
		gap: 6px;
	}

	.pier-btn--red {
		padding: 0.35rem 2.5rem;
		font-size: 0.8rem;
	}
}