/* ==========================================================================
   Reserva «Escala de grises» — Girando 180 Grados
   Todo va bajo #g180r para que el tema no pise el diseño.
   ========================================================================== */

#g180r {
	--g-navy: #252c3d;
	--g-navy-hondo: #1b2130;
	--g-naranja: #ee6a24;
	--g-naranja-vivo: #ff7b36;
	--g-tinta: #f4f5f8;
	--g-suave: #bcc2ce;
	--g-tenue: #939aab;
	--g-linea: rgba(255, 255, 255, 0.14);
	--g-error: #ffab9c;
	--g-display: "Barlow Condensed", "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--g-texto: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--g-curva: cubic-bezier(0.2, 0.8, 0.2, 1);

	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	place-items: center;
	padding: 20px;
	font-family: var(--g-texto);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#g180r[hidden] { display: none !important; }

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

html.g180r-abierto,
html.g180r-abierto body { overflow: hidden !important; }

/* Velo ------------------------------------------------------------------ */

#g180r .g180r-velo {
	position: absolute;
	inset: 0;
	background: rgba(14, 17, 25, 0.74);
	-webkit-backdrop-filter: blur(6px) saturate(0.6);
	backdrop-filter: blur(6px) saturate(0.6);
	opacity: 0;
	transition: opacity 0.35s ease;
}

#g180r.is-open .g180r-velo { opacity: 1; }

/* Diálogo --------------------------------------------------------------- */

#g180r .g180r-dialogo {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	width: min(1040px, 100%);
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow: hidden;
	background: var(--g-navy);
	color: var(--g-tinta);
	border-radius: 6px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 40px 90px -20px rgba(0, 0, 0, 0.65),
		0 12px 30px -12px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: translateY(22px) scale(0.985);
	transition: opacity 0.45s ease, transform 0.6s var(--g-curva);
	outline: none;
}

#g180r.is-open .g180r-dialogo {
	opacity: 1;
	transform: none;
}

/* Botón cerrar ---------------------------------------------------------- */

#g180r .g180r-cerrar {
	all: unset;
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--g-tinta);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 0 1px var(--g-linea) inset;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.3s var(--g-curva);
}

#g180r .g180r-cerrar:hover { background: rgba(255, 255, 255, 0.14); transform: rotate(90deg); }
#g180r .g180r-cerrar:focus-visible { outline: 2px solid var(--g-naranja); outline-offset: 2px; }
#g180r .g180r-cerrar svg { display: block; }

/* Portada --------------------------------------------------------------- */

#g180r .g180r-portada {
	position: relative;
	margin: 0;
	min-height: 100%;
	overflow: hidden;
	background: #111;
}

#g180r .g180r-portada picture,
#g180r .g180r-portada img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

#g180r .g180r-portada img {
	position: absolute;
	inset: 0;
	object-fit: cover;
	object-position: 84% 50%;
}

#g180r .g180r-portada::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, transparent 78%, rgba(37, 44, 61, 0.6) 94%, var(--g-navy) 100%),
		linear-gradient(0deg, rgba(14, 17, 25, 0.82) 0%, transparent 34%);
	pointer-events: none;
}

#g180r .g180r-portada-pie {
	position: absolute;
	left: 28px;
	bottom: 26px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	font-family: var(--g-display);
	font-weight: 600;
	font-size: 1.2rem;
	letter-spacing: 0.04em;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Anillo naranja: guiño al sello del lomo del libro y al logo */
#g180r .g180r-anillo {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid var(--g-naranja);
	border-right-color: transparent;
	transform: rotate(-35deg);
}

/* Cuerpo ---------------------------------------------------------------- */

#g180r .g180r-cuerpo {
	position: relative;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 52px 56px 40px 48px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

#g180r .g180r-titulo {
	margin: 0;
	padding: 0 40px 0 0;
	font-family: var(--g-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 4.6vw, 3.9rem);
	line-height: 0.92;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: #fff;
	border: 0;
	background: none;
	text-shadow: none;
}

/* La escala: seis tonos, del gris al naranja. Es la firma visual del pop-up. */
#g180r .g180r-escala {
	display: flex;
	gap: 3px;
	width: 204px;
	height: 5px;
	margin: 24px 0 26px;
}

#g180r .g180r-escala i {
	flex: 1;
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s var(--g-curva);
}

#g180r .g180r-escala i:nth-child(1) { background: #3d4350; transition-delay: 0.25s; }
#g180r .g180r-escala i:nth-child(2) { background: #5f6571; transition-delay: 0.33s; }
#g180r .g180r-escala i:nth-child(3) { background: #878c96; transition-delay: 0.41s; }
#g180r .g180r-escala i:nth-child(4) { background: #b0b4bb; transition-delay: 0.49s; }
#g180r .g180r-escala i:nth-child(5) { background: #dadce0; transition-delay: 0.57s; }
#g180r .g180r-escala i:nth-child(6) { background: var(--g-naranja); transition-delay: 0.7s; }

#g180r.is-open .g180r-escala i { transform: scaleX(1); }

#g180r .g180r-titulo span { display: block; }

#g180r .g180r-texto p {
	margin: 0 0 0.8em;
	padding: 0;
	max-width: 58ch;
	font-family: var(--g-texto);
	font-size: 0.96rem;
	line-height: 1.58;
	color: var(--g-suave);
}

#g180r .g180r-texto cite { font-style: italic; }

#g180r .g180r-texto .g180r-lead {
	margin-bottom: 0.7em;
	font-size: 1.22rem;
	line-height: 1.35;
	font-weight: 500;
	color: #fff;
}

#g180r .g180r-texto .g180r-remate {
	margin-bottom: 0;
	font-weight: 600;
	color: var(--g-tinta);
}

/* Formulario ------------------------------------------------------------ */

#g180r .g180r-form {
	margin: 28px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--g-linea);
}

#g180r .g180r-campos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

#g180r .g180r-campo { display: flex; flex-direction: column; min-width: 0; }

#g180r .g180r-campo label {
	display: block;
	margin: 0 0 7px;
	padding: 0;
	font-family: var(--g-texto);
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--g-suave);
	text-transform: none;
}

#g180r .g180r-campo input {
	all: unset;
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 50px;
	padding: 0 16px;
	font-family: var(--g-texto);
	font-size: 16px;
	color: #fff;
	caret-color: var(--g-naranja);
	background: rgba(255, 255, 255, 0.05);
	border-radius: 3px;
	box-shadow: 0 0 0 1px var(--g-linea) inset;
	transition: box-shadow 0.2s ease, background 0.2s ease;
}

#g180r .g180r-campo input:hover { background: rgba(255, 255, 255, 0.07); }

#g180r .g180r-campo input:focus {
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 1px var(--g-naranja) inset, 0 0 0 4px rgba(238, 106, 36, 0.22);
}

#g180r .g180r-campo input:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1px var(--g-linea) inset, 0 0 0 60px #2e3547 inset;
}

#g180r .g180r-campo.is-error input { box-shadow: 0 0 0 1px var(--g-error) inset; }

#g180r .g180r-error {
	display: block;
	min-height: 0;
	margin-top: 6px;
	font-size: 0.82rem;
	line-height: 1.3;
	color: var(--g-error);
}

#g180r .g180r-error:empty { display: none; }

#g180r .g180r-trampa {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Casilla --------------------------------------------------------------- */

#g180r .g180r-check {
	position: relative;
	margin: 18px 0 0;
}

#g180r .g180r-check input {
	position: absolute;
	opacity: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	top: 1px;
	left: 0;
}

#g180r .g180r-check label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--g-suave);
	cursor: pointer;
}

#g180r .g180r-check a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--g-naranja);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

#g180r .g180r-check a:hover { color: var(--g-naranja-vivo); }

#g180r .g180r-caja {
	flex: none;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 3px;
	color: var(--g-navy-hondo);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35) inset;
	transition: background 0.18s ease, box-shadow 0.18s ease;
}

#g180r .g180r-caja svg {
	width: 14px;
	height: 14px;
	stroke-dasharray: 16;
	stroke-dashoffset: 16;
	transition: stroke-dashoffset 0.25s var(--g-curva) 0.05s;
}

#g180r .g180r-check input:checked + label .g180r-caja {
	background: var(--g-naranja);
	box-shadow: 0 0 0 1.5px var(--g-naranja) inset;
}

#g180r .g180r-check input:checked + label .g180r-caja svg { stroke-dashoffset: 0; }

#g180r .g180r-check input:focus-visible + label .g180r-caja {
	outline: 2px solid var(--g-naranja);
	outline-offset: 3px;
}

#g180r .g180r-check.is-error .g180r-caja { box-shadow: 0 0 0 1.5px var(--g-error) inset; }
#g180r .g180r-check .g180r-error { padding-left: 32px; }

/* Botón principal ------------------------------------------------------- */

#g180r .g180r-enviar {
	all: unset;
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56px;
	margin: 22px 0 0;
	padding: 0 24px;
	font-family: var(--g-display);
	font-weight: 700;
	font-size: 1.28rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--g-navy-hondo);
	background: var(--g-naranja);
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.25s ease;
	box-shadow: 0 10px 24px -12px rgba(238, 106, 36, 0.8);
}

#g180r .g180r-enviar:hover { background: var(--g-naranja-vivo); box-shadow: 0 14px 30px -12px rgba(255, 123, 54, 0.9); }
#g180r .g180r-enviar:active { transform: translateY(1px); }
#g180r .g180r-enviar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

#g180r .g180r-enviar-txt { transition: opacity 0.2s ease; }

#g180r .g180r-spinner {
	position: absolute;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2.5px solid rgba(27, 33, 48, 0.25);
	border-top-color: var(--g-navy-hondo);
	opacity: 0;
	transition: opacity 0.2s ease;
}

#g180r .g180r-form.is-enviando .g180r-enviar { cursor: progress; pointer-events: none; }
#g180r .g180r-form.is-enviando .g180r-enviar-txt { opacity: 0; }
#g180r .g180r-form.is-enviando .g180r-spinner { opacity: 1; animation: g180r-giro 0.7s linear infinite; }

@keyframes g180r-giro { to { transform: rotate(360deg); } }

#g180r .g180r-aviso-general {
	margin: 12px 0 0;
	font-size: 0.88rem;
	color: var(--g-error);
}

#g180r .g180r-aviso-general:empty { display: none; }

#g180r .g180r-legal {
	margin: 16px 0 0;
	font-size: 0.76rem;
	line-height: 1.5;
	color: var(--g-tenue);
}

/* Confirmación ---------------------------------------------------------- */

#g180r .g180r-ok {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
	padding: 20px 0;
}

#g180r .g180r-ok[hidden] { display: none; }

#g180r .g180r-ok-icono {
	width: 72px;
	height: 72px;
	margin: 0 0 28px;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#g180r .g180r-ok-aro {
	stroke: var(--g-naranja);
	stroke-width: 3.5;
	stroke-dasharray: 176;
	stroke-dashoffset: 176;
	transform: rotate(-90deg);
	transform-origin: center;
	animation: g180r-trazo 0.8s var(--g-curva) 0.1s forwards;
}

#g180r .g180r-ok-check {
	stroke: #fff;
	stroke-width: 3.5;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: g180r-trazo 0.45s var(--g-curva) 0.7s forwards;
}

@keyframes g180r-trazo { to { stroke-dashoffset: 0; } }

#g180r .g180r-titulo--ok { outline: none; }

#g180r .g180r-ok-texto {
	margin: 22px 0 0;
	max-width: 42ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--g-suave);
}

#g180r .g180r-ok-texto strong { color: #fff; font-weight: 600; }

#g180r .g180r-enviar--sec {
	width: auto;
	align-self: flex-start;
	margin-top: 32px;
	padding: 0 30px;
	color: #fff;
	background: transparent;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

#g180r .g180r-enviar--sec:hover {
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 1px #fff inset;
}

/* Botón del shortcode (fuera del pop-up) -------------------------------- */

.g180r-boton-abrir {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px;
	font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: #1b2130 !important;
	background: #ee6a24;
	border-radius: 3px;
	transition: background 0.2s ease;
}

.g180r-boton-abrir:hover { background: #ff7b36; }

/* Responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
	#g180r .g180r-dialogo { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
	#g180r .g180r-cuerpo { padding: 44px 36px 32px 34px; }
}

@media (min-width: 721px) and (max-height: 820px) {
	#g180r .g180r-cuerpo { padding-top: 38px; padding-bottom: 30px; }
	#g180r .g180r-titulo { font-size: clamp(2.4rem, 4vw, 3.2rem); }
	#g180r .g180r-escala { margin: 18px 0 18px; }
	#g180r .g180r-texto p { font-size: 0.92rem; line-height: 1.52; margin-bottom: 0.65em; }
	#g180r .g180r-texto .g180r-lead { font-size: 1.12rem; }
	#g180r .g180r-form { margin-top: 20px; padding-top: 20px; }
	#g180r .g180r-enviar { height: 52px; margin-top: 18px; }
}

@media (max-width: 720px), (max-height: 520px) and (max-width: 900px) {
	#g180r { padding: 12px; align-items: end; }

	#g180r .g180r-dialogo {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 10px;
		transform: translateY(40px);
	}

	#g180r .g180r-portada { height: 230px; min-height: 0; }
	#g180r .g180r-portada img { object-position: 70% 14%; }

	#g180r .g180r-portada::after {
		background: linear-gradient(0deg, var(--g-navy) 0%, rgba(37, 44, 61, 0.35) 45%, transparent 75%);
	}

	#g180r .g180r-portada-pie { left: 22px; bottom: 16px; font-size: 1.05rem; }

	#g180r .g180r-cerrar {
		position: fixed;
		top: 24px;
		right: 24px;
		background: rgba(14, 17, 25, 0.55);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}

	#g180r .g180r-cuerpo { overflow: visible; padding: 22px 22px 26px; }
	#g180r .g180r-titulo { padding-right: 0; font-size: clamp(2.3rem, 11vw, 2.9rem); }
	#g180r .g180r-escala { margin: 18px 0 20px; width: 168px; }
	#g180r .g180r-texto .g180r-lead { font-size: 1.12rem; }
	#g180r .g180r-titulo span { display: block; }

#g180r .g180r-texto p { font-size: 0.94rem; }
	#g180r .g180r-campos { grid-template-columns: 1fr; gap: 12px; }
	#g180r .g180r-form { margin-top: 22px; padding-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	#g180r .g180r-velo,
	#g180r .g180r-dialogo,
	#g180r .g180r-escala i,
	#g180r .g180r-cerrar,
	#g180r .g180r-caja svg { transition: none !important; }

	#g180r .g180r-dialogo { transform: none !important; }
	#g180r .g180r-ok-aro,
	#g180r .g180r-ok-check { animation: none; stroke-dashoffset: 0; }
}