/* =========================================================
   Página "Quienes Somos"
   Papel crema, tinta azul del logo y el rojo del letrero.
   Las fotos de la oficina son las protagonistas.
   ========================================================= */
.qs {
	--tinta: #1d2230;
	--texto: #4a4f5c;
	--azul: #1b2f86;
	--azul-hondo: #14205c;
	--rojo: #c8402a;
	--papel: #f7f2e8;
	--papel-2: #efe7d6;
	--linea: #d8ccb6;
	--titulos: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--mano: "Caveat", "Segoe Print", cursive;
	position: relative;
	width: 100%;
	padding: 104px 24px;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 17px;
	color: var(--texto);
	background: var(--papel);
	overflow: hidden;
}

.qs *, .qs *::before, .qs *::after { box-sizing: border-box; }
.qs p { margin: 0 0 1.1em; line-height: 1.7; }
.qs p:last-child { margin-bottom: 0; }
.qs h1, .qs h2, .qs h3 { margin: 0; }
.qs figure, .qs dl, .qs dd, .qs ol, .qs ul, .qs blockquote { margin: 0; padding: 0; }
.qs ol, .qs ul { list-style: none; }

.qs-cont { max-width: 1120px; margin: 0 auto; }

/* Mismo peso que las reglas de OptimizePress, que se meten por el id del contenedor */
:is(#op3-designer-element, body) .qs.qs h1,
:is(#op3-designer-element, body) .qs.qs h2,
:is(#op3-designer-element, body) .qs.qs h3 {
	color: var(--tinta);
	font-family: var(--titulos);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-transform: none;
}

:is(#op3-designer-element, body) .qs.qs h1 { font-size: clamp(38px, 5.4vw, 64px); }
:is(#op3-designer-element, body) .qs.qs h2 { font-size: clamp(30px, 3.9vw, 46px); }
:is(#op3-designer-element, body) .qs.qs h3 { font-size: 24px; }
.qs em { font-style: normal; color: var(--azul); }

/* Texto pequeño sobre los títulos: una raya y el nombre de la sección */
.qs-sobre {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	color: var(--azul);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.qs-sobre::before { content: ""; width: 34px; height: 2px; background: var(--rojo); }

/* ----- Botones ----- */
.qs-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 26px;
	border: 2px solid transparent;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
}

.qs-boton svg { flex-shrink: 0; width: 22px; height: 22px; fill: currentColor; }

/* WhatsApp: el mismo verde del botón flotante */
.qs-boton.qs-boton-wa { background: #25D366; color: #fff; }
.qs-boton.qs-boton-wa:hover, .qs-boton.qs-boton-wa:focus { background: #1da851; color: #fff; }

/* Secundario: solo borde, con el pin de ubicación */
.qs-boton.qs-boton-borde { border-color: var(--tinta); background: transparent; color: var(--tinta); }
.qs-boton.qs-boton-borde svg { fill: var(--rojo); transition: fill .2s; }
.qs-boton.qs-boton-borde:hover, .qs-boton.qs-boton-borde:focus { background: var(--tinta); color: #fff; }
.qs-boton.qs-boton-borde:hover svg, .qs-boton.qs-boton-borde:focus svg { fill: #fff; }
/* ----- Fotos "pegadas" con un poco de gracia, como en un álbum ----- */
.qs-pegada {
	position: relative;
	padding: 12px;
	background: #fffdf8;
	box-shadow: 0 1px 2px rgba(60, 40, 10, .18), 0 14px 30px rgba(60, 40, 10, .16);
}

.qs-pegada img { display: block; width: 100%; height: auto; }

.qs-pegada figcaption {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 10px 6px 14px;
	color: var(--texto);
	line-height: 1.2;
}

.qs-pegada figcaption small { margin-top: 4px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }

.qs-mano { font-family: var(--mano); font-size: 26px; font-weight: 600; color: var(--azul); line-height: 1.1; }

/* Cinta adhesiva arriba */
.qs-pegada::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 50%;
	width: 110px;
	height: 28px;
	margin-left: -55px;
	background: rgba(222, 205, 160, .72);
	transform: rotate(-3deg);
}

/* =========================================================
   1. Portada
   ========================================================= */
.qs-portada { padding-top: 84px; background: var(--papel); }

.qs-portada-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: center;
	gap: 72px;
}

/* La frase final del título lleva un subrayado rojo, como el filete de las etiquetas */
.qs-portada h1 em {
	text-decoration: underline;
	text-decoration-color: var(--rojo);
	text-decoration-thickness: .09em;
	text-underline-offset: .14em;
	text-decoration-skip-ink: none;
}

.qs .qs-bajada { max-width: 540px; margin: 26px 0 0; font-size: 19px; }

.qs-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 34px 0 48px; }

.qs-datos-clave {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 440px;
	border-top: 1px solid var(--linea);
}

.qs-datos-clave > div { padding-top: 22px; }

.qs-datos-clave dt { color: var(--tinta); font-family: var(--titulos); font-size: 34px; font-weight: 700; line-height: 1; }
.qs-datos-clave dd { margin-top: 8px; font-size: 14px; line-height: 1.4; }

.qs-pegada-fachada { transform: rotate(1.6deg); }


/* =========================================================
   2. Carta: quiénes somos en palabras simples
   ========================================================= */
.qs-carta { background: #fffdf8; }

.qs-carta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.qs-carta h2 { position: sticky; top: 110px; }
.qs-carta-texto p { font-size: 18px; }

/* La primera línea del texto, con un poco más de presencia */
:is(#op3-designer-element, body) .qs.qs-carta .qs-carta-texto p:first-child { color: var(--tinta); font-family: var(--titulos); font-size: 21px; font-weight: 500; line-height: 1.55; }

/* =========================================================
   3. Misión (bloque azul)
   ========================================================= */
.qs-mision { background: var(--azul-hondo); color: #d9ddf0; }

.qs-mision-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
.qs-mision .qs-sobre { color: #f3b8a8; }
.qs-mision .qs-sobre::before { background: #f3b8a8; }

:is(#op3-designer-element, body) .qs.qs-mision blockquote {
	margin-bottom: 26px;
	color: #fff;
	font-family: var(--titulos);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 600;
	line-height: 1.25;
}

.qs-mision-texto p { max-width: 460px; font-size: 18px; }

.qs-pegada-mision { transform: rotate(-1.4deg); }

/* =========================================================
   4. Cómo trabajamos: cuatro tarjetas colgadas de un cordel con pinzas de ropa
   ========================================================= */
.qs-valores { background: var(--papel); }
:is(#op3-designer-element, body) .qs-valores h2 { margin-bottom: 36px; }

.qs-lista-valores {
	--cordel: #a98354;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

.qs .qs-lista-valores { padding-top: 64px; }

/* El cordel: una curva que cuelga entre dos clavos, con hebras claras que lo hacen parecer torcido */
.qs-lista-valores::before {
	content: "";
	position: absolute;
	top: 10px;
	right: 0;
	left: 0;
	height: 52px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 52' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q500 84 1000 4' fill='none' stroke='%23a98354' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 4 Q500 84 1000 4' fill='none' stroke='%23e6d3a8' stroke-width='2' stroke-dasharray='7 6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	pointer-events: none;
}

/* Las dos puntas del cordel, clavadas */
.qs-lista-valores::after {
	content: "";
	position: absolute;
	top: 6px;
	right: -6px;
	left: -6px;
	height: 12px;
	background:
		radial-gradient(circle at 6px 6px, var(--tinta) 5.5px, transparent 6px) left top / 12px 12px no-repeat,
		radial-gradient(circle at 6px 6px, var(--tinta) 5.5px, transparent 6px) right top / 12px 12px no-repeat;
	pointer-events: none;
}
.qs-lista-valores li {
	--color: var(--azul);
	position: relative;
	padding: 44px 22px 28px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 4px rgba(20, 32, 92, .08), 0 16px 32px rgba(20, 32, 92, .12);
	text-align: center;
	transform-origin: 50% -30px;
	animation: qs-cuelga 5.5s ease-in-out infinite alternate;
	transition: opacity .6s ease, box-shadow .35s;
}

/* El cordel baja en el medio: las tarjetas del centro cuelgan más abajo que las de los lados */
.qs-lista-valores li:nth-child(1), .qs-lista-valores li:nth-child(4) { margin-top: 6px; }
.qs-lista-valores li:nth-child(2), .qs-lista-valores li:nth-child(3) { margin-top: 26px; }
.qs-lista-valores li:nth-child(even) { --color: var(--rojo); }
.qs-lista-valores li:nth-child(2) { animation-delay: -1.4s; }
.qs-lista-valores li:nth-child(3) { animation-delay: -2.8s; }
.qs-lista-valores li:nth-child(4) { animation-delay: -4.2s; }

/* Al pasar el mouse se quedan quietas */
.qs-lista-valores li:hover { animation-play-state: paused; box-shadow: 0 2px 4px rgba(20, 32, 92, .1), 0 22px 40px rgba(20, 32, 92, .2); }

@keyframes qs-cuelga {
	from { transform: rotate(-1.6deg); }
	to { transform: rotate(1.6deg); }
}

/* La pinza de ropa que la sostiene */
.qs-lista-valores li::before {
	content: "";
	position: absolute;
	top: -26px;
	left: 50%;
	z-index: 2;
	width: 18px;
	height: 46px;
	margin-left: -9px;
	border-radius: 4px 4px 6px 6px;
	background:
		linear-gradient(90deg, transparent calc(50% - 1px), rgba(70, 45, 15, .55) calc(50% - 1px), rgba(70, 45, 15, .55) calc(50% + 1px), transparent calc(50% + 1px)) 0 18px / 100% 100% no-repeat,
		linear-gradient(90deg, #e2bb7b, #c99a55);
	box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
}

/* El número, en una medalla del color de la tarjeta, con un aro por fuera */
.qs-num {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--color);
	box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--color);
	color: #fff;
	font-family: var(--titulos);
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
}

:is(#op3-designer-element, body) .qs-lista-valores h3 { margin-bottom: 8px; font-size: 23px; }
.qs-lista-valores p { margin: 0; font-size: 15px; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
	.qs-lista-valores li { animation: none; }
}
/* =========================================================
   5. En qué te ayudamos
   ========================================================= */
.qs-ayuda { background: #fffdf8; }

:is(#op3-designer-element, body) .qs.qs.qs-ayuda h2 { font-size: clamp(26px, 3vw, 34px); }
.qs-ayuda-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; margin-bottom: 40px; }
:is(#op3-designer-element, body) .qs.qs-ayuda .qs-ayuda-cabecera p { margin: 0; font-family: var(--titulos); font-size: 19px; }

/* Servicios: cuatro paneles con foto; el que se toca (o se pasa el mouse) se abre y muestra su texto */
.qs-paneles { display: flex; gap: 10px; height: 480px; }

.qs-panel {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	background: var(--azul-hondo);
	transition: flex-grow .6s cubic-bezier(.2, .8, .2, 1);
}

.qs-panel.activo { flex-grow: 4.2; }

.qs-panel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.12);
	transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.qs-panel.activo img { transform: scale(1); }

/* Sombra azul: más fuerte en los cerrados y abajo, donde va el texto */
.qs-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 16, 60, .35) 0%, rgba(10, 16, 60, .55) 55%, rgba(10, 16, 60, .92) 100%);
	transition: opacity .5s;
	pointer-events: none;
}

.qs-panel.activo::after { background: linear-gradient(180deg, rgba(10, 16, 60, 0) 25%, rgba(10, 16, 60, .55) 60%, rgba(10, 16, 60, .94) 100%); }

/* Botón que cubre todo el panel */
.qs-panel-cabeza {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.qs-panel-cabeza:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

.qs-panel-num {
	position: absolute;
	top: 18px;
	left: 18px;
	padding: 4px 9px;
	background: var(--rojo);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .04em;
}

/* Título en vertical mientras el panel está cerrado */
.qs-panel-vertical {
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -13px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	transition: opacity .3s;
}

.qs-panel.activo .qs-panel-vertical { opacity: 0; }

/* Texto del panel abierto */
.qs-panel-cuerpo {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	padding: 0 30px 30px;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transform: translateY(18px);
	transition: opacity .35s, transform .5s .15s, visibility 0s .5s;
}

.qs-panel.activo .qs-panel-cuerpo { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .25s, transform .6s .25s, visibility 0s 0s; }

:is(#op3-designer-element, body) .qs.qs .qs-panel-cuerpo h3 { margin: 0 0 10px; color: #fff; font-size: 28px; }
.qs .qs-panel-cuerpo p { max-width: 520px; margin: 0 0 18px; color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1.6; }

:is(#op3-designer-element, body) .qs-panel-cuerpo a {
	display: inline-block;
	padding: 11px 20px;
	border: 2px solid #fff;
	border-radius: 4px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s, color .2s;
}

:is(#op3-designer-element, body) .qs-panel-cuerpo a:hover,
:is(#op3-designer-element, body) .qs-panel-cuerpo a:focus { background: #fff; color: var(--azul-hondo); }
.qs .qs-letrero { margin-top: 64px; }
.qs-letrero img { display: block; width: 100%; height: auto; border: 1px solid var(--linea); }
.qs-letrero figcaption { margin-top: 14px; font-size: 15px; text-align: center; }
.qs-letrero b { color: var(--tinta); font-weight: 600; white-space: nowrap; }

/* =========================================================
   6. Visítanos
   ========================================================= */
.qs-visita { background: var(--papel-2); }

.qs-visita-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 80px; align-items: center; }

.qs-pegada-horario { max-width: 460px; transform: rotate(-2deg); }
:is(#op3-designer-element, body) .qs-visita h2 { margin-bottom: 20px; }
.qs-visita-texto > p:not(.qs-sobre) { max-width: 520px; font-size: 18px; }

/* Cada dato va en su propio marco: fondo blanco, filete azul a la izquierda y sombra suave */
.qs .qs-ficha { display: grid; gap: 14px; margin-top: 34px; }

.qs-ficha > div {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	padding: 18px 22px;
	background: #fffdf8;
	border: 1px solid var(--linea);
	border-left: 5px solid var(--azul);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(60, 40, 10, .1), 0 8px 18px rgba(60, 40, 10, .08);
}

.qs-ficha > div:nth-child(2) { border-left-color: var(--rojo); }

.qs-ficha dt { color: var(--azul); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding-top: 4px; }
.qs-ficha dd { color: var(--tinta); font-size: 18px; line-height: 1.55; }

:is(#op3-designer-element, body) .qs-ficha a {
	color: var(--azul);
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--rojo);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

:is(#op3-designer-element, body) .qs-ficha a:hover, :is(#op3-designer-element, body) .qs-ficha a:focus { color: var(--rojo); }
:is(#op3-designer-element, body) .qs-ficha .qs-tel { font-family: var(--titulos); font-size: 26px; font-weight: 700; text-decoration: none; }

/* Mapa de la oficina, dentro de Visítanos: franja roja arriba, una tarjeta azul con la dirección
   y los botones encima del mapa. El recuadro de dirección de Google se deja fuera de vista
   porque repite lo mismo. En celular el mapa parte bloqueado para no estorbar al bajar la página. */
.qs-mapa { margin-top: 64px; }

.qs-mapa-lienzo {
	--corte: 140px; /* cuánto se sube el mapa para esconder el recuadro de Google */
	--abajo: 220px; /* cuánto se alarga hacia abajo: así el pin queda más abajo y se ve más del centro de la ciudad */
	position: relative;
	height: 460px;
	border-top: 6px solid var(--rojo);
	background: var(--papel);
	box-shadow: 0 22px 48px rgba(20, 32, 92, .28);
	overflow: hidden;
}

.qs-mapa iframe {
	position: absolute;
	top: calc(var(--corte) * -1);
	right: 0;
	left: 0;
	display: block;
	width: 100%;
	height: calc(100% + var(--corte) + var(--abajo));
	border: 0;
	pointer-events: none;
}

.qs-mapa-lienzo.libre iframe { pointer-events: auto; }

/* Tarjeta azul sobre el mapa */
.qs-mapa-tarjeta {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 2;
	width: min(380px, calc(100% - 48px));
	padding: 20px 22px 22px;
	border-left: 6px solid var(--rojo);
	background: var(--azul-hondo);
	box-shadow: 0 14px 30px rgba(10, 16, 60, .45);
	color: #fff;
	transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

/* Cerrada: la tarjeta se esconde a la izquierda y solo queda la pestaña para volver a abrirla */
.qs-mapa-tarjeta.cerrada { transform: translateX(calc(-100% - 24px)); }

.qs-mapa-pestana {
	position: absolute;
	top: 18px;
	right: -40px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 64px;
	padding: 0;
	border: 0;
	border-bottom: 4px solid var(--rojo);
	background: var(--azul-hondo);
	box-shadow: 6px 6px 14px rgba(10, 16, 60, .35);
	cursor: pointer;
	transition: background .2s;
}

.qs-mapa-pestana svg { width: 26px; height: 26px; fill: #fff; transition: transform .4s; }
.qs-mapa-pestana:hover, .qs-mapa-pestana:focus-visible { background: var(--rojo); border-bottom-color: var(--azul-hondo); }
.qs-mapa-tarjeta.cerrada .qs-mapa-pestana svg { transform: rotate(180deg); }

.qs-mapa-lugar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

.qs-mapa-pin {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--rojo);
}

.qs-mapa-pin svg { width: 24px; height: 24px; fill: #fff; }
.qs-mapa-lugar strong { display: block; color: #fff; font-size: 20px; font-weight: 800; line-height: 1.2; }
.qs-mapa-lugar span:not(.qs-mapa-pin) { display: block; margin-top: 2px; color: rgba(255, 255, 255, .85); font-size: 15px; }

.qs-mapa-botones { display: flex; flex-wrap: wrap; gap: 10px; }

:is(#op3-designer-element, body) .qs-mapa .qs-mapa-ir,
:is(#op3-designer-element, body) .qs-mapa .qs-mapa-llamar {
	flex: 1 1 auto;
	padding: 11px 16px;
	border: 2px solid #fff;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
}

:is(#op3-designer-element, body) .qs-mapa .qs-mapa-ir { background: #fff; color: var(--azul-hondo); }
:is(#op3-designer-element, body) .qs-mapa .qs-mapa-llamar { background: transparent; color: #fff; }

:is(#op3-designer-element, body) .qs-mapa .qs-mapa-ir:hover,
:is(#op3-designer-element, body) .qs-mapa .qs-mapa-ir:focus { background: var(--rojo); border-color: var(--rojo); color: #fff; }

:is(#op3-designer-element, body) .qs-mapa .qs-mapa-llamar:hover,
:is(#op3-designer-element, body) .qs-mapa .qs-mapa-llamar:focus { background: #fff; color: var(--azul-hondo); }

/* Señaléticas: carteles rojos sobre los puntos de referencia. Cada cartel se coloca a tantos píxeles
   (--x, --y) del pin, con el mapa en zoom 15; por eso solo se ven mientras el mapa está bloqueado. */
.qs-mapa-senales {
	position: absolute;
	left: 50%;
	top: calc(50% + (var(--abajo) - var(--corte)) / 2);
	width: 0;
	height: 0;
	pointer-events: none;
	transition: opacity .3s;
}

.qs-mapa-lienzo.libre .qs-mapa-senales { opacity: 0; }

.qs-senal { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }

/* Punto sobre el lugar */
.qs-senal::before {
	content: "";
	position: absolute;
	top: -8px;
	left: -8px;
	width: 16px;
	height: 16px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--rojo);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

/* Cartel arriba del punto */
.qs-senal span {
	position: absolute;
	bottom: 14px;
	left: 0;
	display: flex;
	flex-direction: column;
	padding: 7px 12px 8px;
	background: var(--rojo);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .28);
	color: #fff;
	text-align: center;
	white-space: nowrap;
	transform: translateX(-50%);
}

.qs-senal span::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: var(--rojo);
	border-bottom: 0;
}

.qs-senal b { font-size: 14px; font-weight: 800; line-height: 1.2; }
.qs-senal small { color: rgba(255, 255, 255, .9); font-size: 12px; font-weight: 600; }

/* Menú de "Cómo llegar": abrir la ruta en otra aplicación o copiar la dirección */
.qs-mapa-menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	left: 0;
	display: grid;
	gap: 2px;
	padding: 10px;
	border-left: 6px solid var(--rojo);
	background: #fff;
	box-shadow: 0 14px 30px rgba(10, 16, 60, .4);
	animation: qs-sube .2s ease-out;
}

.qs-mapa-menu[hidden] { display: none; }

@keyframes qs-sube {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.qs-mapa-menu p { margin: 0 0 4px; padding: 2px 8px; color: var(--texto); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

:is(#op3-designer-element, body) .qs-mapa .qs-mapa-menu a,
.qs-mapa-copiar {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border: 0;
	background: transparent;
	color: var(--tinta);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s;
}

:is(#op3-designer-element, body) .qs-mapa .qs-mapa-menu a:hover,
:is(#op3-designer-element, body) .qs-mapa .qs-mapa-menu a:focus,
.qs-mapa-copiar:hover, .qs-mapa-copiar:focus { background: var(--azul-hondo); color: #fff; }

.qs-mapa-copiar { border-top: 1px solid var(--linea); margin-top: 4px; padding-top: 13px; }

/* Capa que pide tocar el mapa antes de moverlo */.qs-mapa-activar {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 16px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.qs-mapa-activar span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--tinta);
	background: #fffdf8;
	color: var(--tinta);
	font-size: 14px;
	font-weight: 600;
	transition: background .2s, color .2s;
}

.qs-mapa-activar svg { width: 16px; height: 16px; fill: var(--rojo); transition: fill .2s; }
.qs-mapa-activar:hover span, .qs-mapa-activar:focus-visible span { background: var(--tinta); color: #fff; }
.qs-mapa-activar:hover svg, .qs-mapa-activar:focus-visible svg { fill: #fff; }
.qs-mapa-lienzo.libre .qs-mapa-activar { display: none; }
@media (max-width: 767px) {
	.qs-mapa { margin-top: 44px; }
	.qs-mapa-lienzo { --abajo: 140px; height: 420px; }

	.qs-mapa-tarjeta { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 14px 16px 16px; }
	.qs-mapa-lugar { margin-bottom: 12px; }
	.qs-mapa-pin { width: 40px; height: 40px; }
	.qs-mapa-lugar strong { font-size: 18px; }
	.qs-mapa-lugar span:not(.qs-mapa-pin) { font-size: 14px; }
	.qs-mapa-activar { padding: 12px; }
	.qs-mapa-activar span { padding: 7px 12px; font-size: 13px; }
	.qs-senal span { padding: 5px 9px 6px; }
	.qs-senal b { font-size: 12px; }
	.qs-senal small { font-size: 11px; }
}

/* =========================================================
   7. Cierre
   ========================================================= */
.qs-cierre { padding: 64px 24px; background: var(--azul-hondo); }

.qs-cierre-cont { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }

:is(#op3-designer-element, body) .qs.qs-cierre p {
	max-width: 620px;
	margin: 0;
	color: #fff;
	font-family: var(--titulos);
	font-weight: 600;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.3;
}

/* =========================================================
   Aparición suave al bajar (un poco, sin exagerar)
   ========================================================= */
.qs-pegada, .qs-carta-texto, .qs-paneles { opacity: 0; transition: opacity .6s ease; }
.qs-lista-valores li { opacity: 0; }
.qs-pegada.visible, .qs-carta-texto.visible, .qs-paneles.visible, .qs-lista-valores li.visible { opacity: 1; }

/* =========================================================
   Pantallas medianas y chicas
   ========================================================= */
@media (max-width: 960px) {
	.qs { padding: 76px 20px; }
	.qs-portada { padding-top: 56px; }
	.qs-portada-grid, .qs-carta-grid, .qs-mision-grid, .qs-visita-grid { grid-template-columns: 1fr; gap: 52px; }
	.qs-carta h2 { position: static; }
	.qs-pegada-fachada { max-width: 560px; }
	.qs-pegada-horario { margin: 0 auto; }
	.qs-lista-valores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; }
	.qs .qs-lista-valores { padding-top: 24px; }
	.qs-lista-valores::before, .qs-lista-valores::after { display: none; }
	.qs-lista-valores li:nth-child(n) { margin-top: 0; }
	/* Un cordel recto detrás de cada tarjeta, a la altura de la pinza */
	.qs-lista-valores li::after {
		content: "";
		position: absolute;
		top: -6px;
		right: -13px;
		left: -13px;
		height: 4px;
		border-radius: 2px;
		background: repeating-linear-gradient(90deg, #a98354 0 7px, #e6d3a8 7px 12px);
	}
	/* Servicios en celular: los paneles quedan uno bajo otro y el abierto crece hacia abajo */
	.qs-paneles { flex-direction: column; height: auto; }
	.qs-panel { flex: none; height: 84px; transition: height .5s cubic-bezier(.2, .8, .2, 1); }
	.qs-panel.activo { flex-grow: 0; height: 400px; }
	.qs-panel-vertical { top: 50%; bottom: auto; left: 70px; margin: -12px 0 0; writing-mode: horizontal-tb; transform: none; }
	.qs-panel-num { top: 50%; margin-top: -14px; }
	.qs-panel-cuerpo { padding: 0 20px 22px; }
	.qs-panel.activo .qs-panel-num { top: 18px; margin-top: 0; }
	:is(#op3-designer-element, body) .qs.qs .qs-panel-cuerpo h3 { font-size: 22px; }
	.qs .qs-panel-cuerpo p { font-size: 15px; }
}

@media (max-width: 560px) {
	.qs { padding: 60px 18px; font-size: 16px; }
	.qs-bajada, .qs-carta-texto p, .qs-mision-texto p, .qs-visita-texto > p:not(.qs-sobre) { font-size: 17px; }
	:is(#op3-designer-element, body) .qs.qs-carta .qs-carta-texto p:first-child { font-size: 21px; }
	.qs-acciones { margin: 28px 0 38px; }
	.qs-boton { padding: 11px 16px; border-radius: 4px; font-size: 14px; gap: 8px; }
	.qs-boton svg { width: 18px; height: 18px; }
	.qs-acciones { gap: 10px; }
	.qs-datos-clave { grid-template-columns: 1fr; gap: 14px; max-width: none; }
	.qs-datos-clave > div { display: flex; align-items: baseline; gap: 14px; }
	.qs-datos-clave dd { margin: 0; }
	.qs-mano { font-size: 23px; }
	.qs-ficha > div { grid-template-columns: 1fr; gap: 2px; }
	.qs-lista-valores { grid-template-columns: 1fr; }
	.qs-cierre { padding: 52px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.qs-pegada, .qs-carta-texto, .qs-paneles, .qs-lista-valores li { opacity: 1; transition: none; }
}