/* ═══════════════════════════════════════════════════════════════════
   PÁGINA «PARA TIENDAS» (para-tiendas.html)
   Se carga después de styles.css. Clases nuevas con prefijo pt-.
   Reutiliza de styles.css: .wrap, .sec, .h1, .h2, .lead, .btn y sus
   variantes, .form / .form__g, preheader, header, CTA final y footer.
   ═══════════════════════════════════════════════════════════════════ */

/* ── comunes ── */
.pt-alt {
	background:var(--bg2);
}
.pt-head {
	max-width:860px;
	margin-inline:auto;
	text-align:center;
}
.pt-head .lead {
	margin-top:12px;
}
.pt-center {
	margin-top:clamp(28px,3vw,44px);
	text-align:center;
}
.pt-arrow {
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-weight:600;
}
/* centrado y largo: en línea, para que la flecha siga al texto si parte en dos */
.pt-center .pt-arrow {
	display:inline;
}
.pt-center .pt-arrow svg {
	display:inline-block;
	margin-left:8px;
	vertical-align:-3px;
}

/* (el subrayado de la página actual en el menú está ahora en styles.css, junto a .nav__hl) */

/* ═══ 1 · HERO + PROGRAMAS ═══ */
.pt-hero {
	position:relative;
	padding:clamp(40px,4vw,64px) 0 clamp(56px,6vw,88px);
}
/* fondo de alto fijo; las tarjetas desbordan por debajo y la sección sigue en blanco */
.pt-hero__bg {
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:clamp(520px,42vw,640px);
	overflow:hidden;
}
.pt-hero__bg img {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center 30%;
}
.pt-hero__bg::after {
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.3) 40%,transparent 70%);
}
/* PRUEBA (para-tiendas-v2.html): fondo sólido en vez del render, el mismo
   degradado que la portada del hero de index-v2 (.dh__s--center en hero-loop.css).
   Allí va en 70cqw; aquí en 70vw, que es lo mismo porque ambos ocupan todo el ancho. */
.pt-hero--solid .pt-hero__bg {
	background:radial-gradient(70vw 70vw at 78% 16%,rgba(0,159,227,.25),transparent 60%),var(--dh-bg);
}
.pt-hero--solid .pt-hero__bg::after {
	content:none;
}
.pt-hero--solid .pt-hero__head .h1,
.pt-hero--solid .pt-hero__head .lead {
	color:#fff;
}
.pt-hero__head {
	position:relative;
	text-align:center;
}
.pt-hero__head .h1 {
	color:var(--ink);
}
.pt-hero__head .lead {
	margin-top:clamp(8px,1vw,14px);
	color:var(--ink);
}

/* tarjetas: más anchas que .wrap (hasta 1840) */
.pt-cards {
	position:relative;
	width:min(1840px,calc(100% - 2*var(--pad)));
	margin:clamp(28px,3vw,48px) auto 0;
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:clamp(16px,1.6vw,28px);
}
.pt-card {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	background:#fff;
	border:1px solid var(--line);
	border-radius:20px;
	box-shadow:0 24px 60px rgba(0,48,91,.16);
	padding:clamp(22px,2vw,32px);
}
.pt-card--main {
	border:2px solid var(--navy);
}
.pt-pill {
	display:inline-flex;
	align-items:center;
	padding:5px 12px;
	border-radius:999px;
	font-size:12px;
	font-weight:600;
	line-height:1.3;
}
/* #009FE3 solo como fondo, con texto --navy-d (regla de contraste de CLAUDE.md) */
.pt-pill--cyan {
	background:var(--cyan);
	color:var(--white);
}
.pt-pill--lime {
	background:#C8D257;
	color:var(--navy-d);
}
.pt-pill--navy {
	background:var(--navy);
	color:#fff;
}
/* fondo transparente y borde sólido; 1 px menos de relleno para que mida
   lo mismo que las de fondo de color */
.pt-pill--outline {
	padding:4px 11px;
	border:1px solid var(--navy);
	background:transparent;
	color:var(--navy);
}
/* precio: pegatina en la esquina superior derecha, montada sobre el borde de
   la tarjeta, con el formato de la pastilla «desde 85 €/mes» de la home
   (.dh__price), algo más pequeña. Va posicionada: no ocupa sitio dentro de
   la tarjeta ni cuenta como fila del subgrid. Texto --navy-d sobre ámbar: 7,9:1 */
.pt-card {
	position:relative;
}
/* En dos líneas: arriba «desde» / «por solo» y debajo la cifra con «/mes».
   Rejilla de 2 columnas (cifra · /mes) con la palabra pequeña ocupando las
   dos: el ancho lo marca la línea más larga, no la suma de ambas. */
.pt-price {
	position:absolute;
	top:12px;
	right:12px;
	/*transform:translateY(-50%);*/
	display:inline-grid;
	grid-template-columns:auto auto;
	justify-content:center;
	align-items:baseline;
	column-gap:2px;
	padding:6px 12px 7px;
	border-radius:14px;
	background:#F2A900;
	color:var(--navy-d);
	font-size:13px;
	font-weight:700;
	line-height:1.15;
	text-align:center;
	white-space:nowrap;
	box-shadow:0 6px 16px rgba(0,48,91,.22);
}
.pt-price small {
	grid-column:1 / -1;
	font-size:10px;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	opacity:.85;
}
.pt-price b {
	font-size:clamp(22px,1.4vw,26px);
	font-weight:800;
}
.pt-card__name {
	margin-top:14px;
	font-size:clamp(24px,2vw,30px);
	line-height:1.15;
	font-weight:700;
	color:var(--ink);
}
.pt-card__sub {
	margin-top:6px;
	font-size:clamp(15px,1vw,16px);
	line-height:1.5;
	color:var(--ink2);
}
.pt-card__img {
	margin-top:18px;
	width:100%;
	aspect-ratio:2/1;
	object-fit:cover;
	border-radius:12px;
}
.pt-card__dl {
	margin:0px 0 0;
	width:100%;
}
.pt-card__dl > div {
	padding:12px 0;
	border-top:1px solid var(--line2);
}
.pt-card__dl > div:first-child {
	border-top:0;
}
.pt-card__dl dt {
	font-size:11px;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--ink3);
}
.pt-card__dl dd {
	margin:4px 0 0;
	font-size:clamp(14px,.95vw,15px);
	line-height:1.45;
	color:var(--ink);
}
/* características en lista, con un check pequeño delante de cada punto.
   El check va en --cyan-a (#0077AA, 4,98:1) y no en --cyan: #009FE3 sobre blanco
   da 2,97:1 y no llega al 3:1 de los elementos gráficos (regla de CLAUDE.md).
   La forma va en máscara para que el color salga de la variable. */
.pt-card__checks {
	display:grid;
	gap:6px;
}
.pt-card__checks li {
	position:relative;
	padding-left:22px;
	font-size:clamp(14px,.95vw,15px);
	line-height:1.45;
	color:var(--ink);
}
/* centrado con la primera línea */
.pt-card__checks li::before {
	content:"";
	position:absolute;
	left:0;
	top:calc((1.45em - 14px) / 2);
	width:14px;
	height:14px;
	background:var(--cyan-a);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* el precio, las formas de pago y los botones van abajo: igual altura en las tres */
.pt-card__price {
	margin-top:auto;
	padding-top:16px;
	font-size:clamp(24px,1.8vw,30px);
	font-weight:700;
	color:var(--ink);
}
.pt-pays {
	margin-top:12px;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	gap:6px;
}
.pt-pays li {
	padding:4px 12px;
	border:1px solid var(--line);
	border-radius:999px;
	background:#fff;
	font-size:12px;
	font-weight:500;
	color:var(--ink2);
}
.pt-card__btn {
	margin-top:20px;
	width:100%;
	justify-content:center;
}
.pt-card__demo {
	margin-top:14px;
	align-self:center;
	font-size:14px;
	font-weight:600;
	text-decoration:underline;
	text-underline-offset:3px;
}

/* ── variante de 4 tarjetas (para-tiendas-v2.html) ──
   4 columnas desde 1280 px, 2 hasta 761 y 1 en móvil. Cada tarjeta ocupa 8
   filas y las hereda (subgrid): etiqueta, nombre, subtítulo, imagen,
   características, pastilla «IA + Panorama 360º», botón y enlace quedan a la
   misma altura en todas las de una fila aunque alguna parta en dos líneas.
   Los botones pueden partir y miden lo mismo en toda la fila. */
/* Sin row-gap: con subgrid, el hueco del padre también separa las filas
   internas de cada tarjeta, y una fila más baja que él (la pastilla) crecía
   hasta medirlo. La separación entre filas de tarjetas va como margin-top
   en las tarjetas de la 2ª fila en adelante (ver ADAPTACIÓN). */
.pt-cards--4 {
	--pt-row-gap:clamp(32px,3vw,44px);
	grid-template-columns:repeat(4,minmax(0,1fr));
	row-gap:0;
}
.pt-cards--4 .pt-card {
	display:grid;
	grid-row:span 8;
	grid-template-rows:subgrid;
	row-gap:0;
	justify-items:start;
	align-items:start;
}
/* botón: el alto de un .btn (50–58 px) con letra compacta; height:auto
   para que crezca si el texto parte en dos líneas */
.pt-cards--4 .pt-card__btn {
	align-self:stretch;
	height:auto;
	min-height:clamp(50px,3.4vw,58px);
	padding:4px 14px;
	border-radius:7px;
	font-size:13px;
	line-height:1.3;
	white-space:normal;
	text-align:center;
}
/* el precio en dos líneas es más alto que la etiqueta: más aire antes del nombre */
.pt-cards--4 .pt-card__name {
	margin-top:16px;
}
.pt-cards--4 .pt-card__demo {
	justify-self:center;
	align-self:start;
}
/* pastilla de función destacada, encima del botón (cian de fondo, texto --navy-d: 5,3:1) */
.pt-card__feat {
	margin-top:6px;
}
.pt-cards--4 .pt-card__feat + .pt-card__btn {
	margin-top:14px;
}

/* ═══ 4 · LAS 4 VENTAJAS ═══
   La sección es contenedor (100cqw = ancho de página sin la barra de scroll).
   Cada fila: texto con el ancho y la posición de una fila normal dentro de
   .wrap; la imagen se ensancha solo por su lado exterior hasta la línea de
   las tarjetas del hero (contenedor de 1840). */
.pt-adv {
	container-type:inline-size;
	--pt-out:calc((min(1840px,100cqw - 2*var(--pad)) - min(1440px,100cqw - 2*var(--pad))) / 2);
}
.pt-adv__row {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:36px 72px;
	margin-top:clamp(48px,6vw,96px);
}
.pt-adv__row--rev {
	flex-direction:row-reverse;
}
.pt-adv__txt {
	flex:1 1 max(420px,calc(50% - 66px));
}
.pt-adv__media {
	flex:1000 1 480px;
	margin-left:calc(-1 * var(--pt-out));
}
.pt-adv__row--rev .pt-adv__media {
	margin-left:0;
	margin-right:calc(-1 * var(--pt-out));
}
.pt-adv__media img {
	width:100%;
	height:clamp(260px,33vw,480px);
	object-fit:cover;
	border-radius:24px;
}
.pt-num {
	display:block;
	font-size:13px;
	font-weight:700;
	letter-spacing:.08em;
	color:var(--navy);
}
.pt-adv__h {
	margin-top:10px;
	font-size:clamp(22px,1.9vw,32px);
	line-height:1.2;
	font-weight:700;
	color:var(--ink);
}
.pt-adv__p {
	margin-top:14px;
	font-size:clamp(15px,1vw,17px);
	line-height:1.65;
	color:var(--ink2);
}
.pt-checks {
	margin-top:18px;
	display:flex;
	flex-direction:column;
	gap:10px;
}
.pt-checks li {
	display:flex;
	align-items:flex-start;
	gap:10px;
	font-size:clamp(14px,.95vw,15px);
	line-height:1.5;
	color:var(--ink);
}
.pt-checks svg {
	flex:0 0 18px;
	margin-top:2px;
}
.pt-adv__txt .pt-arrow {
	margin-top:18px;
}

/* ═══ 2 · FORMAS DE PAGO ═══ */
.pt-pay__g {
	margin-top:clamp(32px,4vw,56px);
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:clamp(14px,1.4vw,20px);
}
.pt-plan {
	padding:clamp(20px,1.8vw,28px);
	border:1px solid var(--line);
	border-radius:16px;
	background:#fff;
}
.pt-plan--hl {
	border:2px solid var(--navy);
	background:var(--tint);
}
/* sin mayúsculas: lleva nombres de programa, que van siempre en minúscula */
.pt-plan__for {
	font-size:12px;
	font-weight:600;
	letter-spacing:.04em;
	color:var(--ink3);
}
.pt-plan--hl .pt-plan__for {
	color:var(--navy);
}
.pt-plan__name {
	margin-top:10px;
	font-size:clamp(19px,1.4vw,22px);
	font-weight:700;
	color:var(--ink);
}
.pt-plan__price {
	margin-top:12px;
	font-size:clamp(16px,1.1vw,18px);
	font-weight:600;
	color:var(--ink);
}
.pt-plan__t {
	margin-top:10px;
	font-size:14px;
	line-height:1.55;
	color:var(--ink2);
}
.pt-maint {
	margin-top:clamp(14px,1.4vw,20px);
	padding:clamp(18px,1.8vw,24px) clamp(20px,2vw,28px);
	border-radius:16px;
	background:var(--bg2);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px 32px;
	flex-wrap:wrap;
}
.pt-maint p {
	flex:1 1 420px;
	font-size:14px;
	line-height:1.6;
	color:var(--ink2);
}
.pt-maint b {
	color:var(--ink);
}

/* ═══ 2 · ASISTENTES (para-tiendas-v2.html) · galería al estilo de Apple ═══
   La sección va en una caja más estrecha que .wrap (1080) para que quepa un
   vídeo 16:9 entero y asome el siguiente. La galería empieza en el borde
   izquierdo de la caja y llega al borde derecho de la pantalla (a sangre).
   La sección es contenedor: 100cqw = ancho de página sin la barra de scroll.
   Lógica (flechas) en js/tiendas.js. */
.pt-feat {
	container-type:inline-size;
	--pt-box:min(1080px,100cqw - 2*var(--pad));
	--pt-edge:calc((100cqw - var(--pt-box)) / 2);
}
.pt-feat__box,
.pt-feat__nav {
	width:var(--pt-box);
	margin-inline:auto;
}
.pt-feat__scroll {
	margin-top:clamp(28px,3vw,48px);
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-padding-inline:var(--pt-edge);
	overscroll-behavior-x:contain;
	scrollbar-width:none;
}
.pt-feat__scroll::-webkit-scrollbar {
	display:none;
}
.pt-feat__scroll:focus-visible {
	outline:2px solid var(--navy);
	outline-offset:4px;
}
.pt-feat__track {
	display:flex;
	gap:clamp(16px,2vw,28px);
	width:max-content;
	padding-inline:var(--pt-edge);
}
/* una tarjeta mide lo que la caja; en pantallas estrechas, el 82 % del ancho
   para que siempre asome la siguiente */
.pt-feat__item {
	flex:0 0 auto;
	width:min(var(--pt-box),82cqw);
	scroll-snap-align:start;
}
/* De momento: imagen con el botón de reproducir (.play de styles.css) centrado
   encima, como .step__m. Cuando llegue el vídeo, el <video> lleva esta misma clase. */
.pt-feat__media {
	position:relative;
	display:block;
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
	border:1px solid var(--line);   /* las capturas tienen bordes blancos: sin él se pierde el redondeo */
	border-radius:clamp(16px,1.6vw,24px);
	overflow:hidden;
}
.pt-feat__media > img {
	width:100%;
	height:100%;
	object-fit:cover;
}
/* Vídeo dentro de la caja: arranca al pulsar el póster o el .play (js/tiendas.js).
   Mientras se reproduce se oculta el botón y se ven los controles nativos. */
.pt-feat__media > video {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.pt-video:not(.is-playing) > video {
	cursor:pointer;
}
.pt-video > .play {
	border:0;
	padding:0;
	cursor:pointer;
	transition:transform .2s ease;
}
.pt-video > .play:hover {
	transform:translate(-50%,-50%) scale(1.06);
}
.pt-video > .play:focus-visible {
	outline:3px solid var(--navy);
	outline-offset:4px;
}
.pt-video.is-playing > .play {
	display:none;
}
@media (prefers-reduced-motion: reduce) {
	.pt-video > .play { transition:none; }
	.pt-video > .play:hover { transform:translate(-50%,-50%); }
}
.pt-feat__h {
	margin-top:clamp(16px,1.6vw,24px);
	font-size:clamp(19px,1.5vw,24px);
	line-height:1.25;
	font-weight:700;
	color:var(--ink);
}
.pt-feat__p {
	margin-top:8px;
	max-width:60ch;
	font-size:clamp(15px,1vw,17px);
	line-height:1.6;
	color:var(--ink2);
}
.pt-feat__nav {
	margin-top:clamp(20px,2vw,32px);
	display:flex;
	justify-content:flex-end;
	gap:12px;
}
.pt-feat__nav .rnd:disabled {
	opacity:.35;
	cursor:default;
}
/* ── 2b · Realidad Aumentada: rejilla 2×2 de muebles, cada uno con su QR ──
   Ocupa la misma caja 16:9 que las demás tarjetas, para que los títulos
   queden a la misma altura. Con la calle, cada celda sale a 16:9 casi exacto
   (1,80 en vez de 1,78) y object-fit recorta unos píxeles de la foto. */
.pt-ra {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	grid-template-rows:repeat(2,minmax(0,1fr));
	gap:clamp(8px,1.2vw,16px);
	aspect-ratio:16/9;
}
/* cada celda es un enlace a la RA del mueble (<a>) */
.pt-ra__item {
	position:relative;
	display:block;
	min-height:0;
	margin:0;
	border:1px solid var(--line);
	border-radius:clamp(10px,1vw,16px);
	overflow:hidden;
}
/* el anillo de foco va por dentro: por fuera lo cortaría el scroll de la galería */
.pt-ra__item:focus-visible {
	outline:3px solid var(--navy);
	outline-offset:-3px;
}
.pt-ra__img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .5s ease;
}
.pt-ra__item:hover .pt-ra__img {
	transform:scale(1.03);
}
@media (prefers-reduced-motion:reduce) {
	.pt-ra__img {
		transition:none;
	}
	.pt-ra__item:hover .pt-ra__img {
		transform:none;
	}
}
/* QR arriba a la derecha, sobre el fondo gris de la foto (los muebles van
   centrados y no los tapa). Caja blanca: los lectores necesitan margen claro */
.pt-ra__qr {
	position:absolute;
	top:clamp(6px,.8vw,12px);
	right:clamp(6px,.8vw,12px);
	width:clamp(64px,20%,100px);
	height:auto;
	padding:clamp(4px,.5vw,6px);
	border-radius:clamp(5px,.5vw,8px);
	background:#fff;
	box-shadow:0 4px 12px rgba(0,48,91,.18);
}
/* en móvil no sale: no se puede escanear la pantalla del propio móvil */
@media (max-width:760px) {
	.pt-ra__qr {
		display:none;
	}
}

/* ═══ 3 · TIENDAS QUE YA VENDEN CON deco (Instagram) ═══ */
.pt-ig__g {
	margin-top:clamp(32px,4vw,56px);
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:clamp(20px,2vw,32px);
	align-items:start;
}
.pt-ig__h {
	font-size:clamp(17px,1.2vw,19px);
	font-weight:700;
	color:var(--ink);
}
.pt-ig__p {
	margin-top:4px;
	margin-bottom:14px;
	font-size:14px;
	line-height:1.5;
	color:var(--ink2);
}
/* ── recorte del pie del embebido (para-tiendas-v2.html) ──
   El embebido es un iframe de instagram.com: no se puede ocultar nada por
   dentro. Se recorta por fuera: el iframe sube su borde inferior con un
   margen negativo y el contenedor esconde lo que sobra («Ver más en
   Instagram», iconos, «Me gusta» y comentarios). Ese pie mide 154 px en los
   tres posts y a cualquier ancho (lo que crece con el ancho es la imagen);
   si Instagram cambia su maquetación, se ajusta en --pt-ig-cut.
   Solo se recorta el iframe: si el script de Instagram no carga, se ve el
   <blockquote> con su enlace, sin recortar.
   Ojo: las condiciones de Meta no permiten tapar partes del embebido. */
.pt-ig__crop {
	--pt-ig-cut:154px;
	overflow:hidden;
	border-radius:3px;
}
.pt-ig__crop iframe.instagram-media {
	margin-bottom:calc(-1 * var(--pt-ig-cut)) !important;
}

/* ═══ 3b · GALERÍA «Inspírate en lo que hacen nuestras tiendas» ═══
   Pestañas por estancia (js/tiendas.js). Rejilla de 4 columnas: cada fila lleva
   tres piezas, una de ellas doble (--wide). Las cuadradas marcan el alto de la fila. */
.pt-kicker {
	display:block;
	margin-bottom:12px;
	font-size:12px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:#9A6800;      /* ámbar oscuro: el #F2A900 se queda en 2:1 sobre blanco; este pasa de 4,5:1 */
}
.pt-amber {
	color:#9A6800;
	font-weight:700;
}
/* cian para texto sobre blanco: --cyan-a (#0077AA, 4,98:1); el --cyan (#009FE3) se queda en 2,97:1 */
.pt-cyan {
	color:var(--cyan-a);
	font-weight:700;
}
.pt-gal__tabs {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:8px;
	margin-top:clamp(24px,2.6vw,36px);
}
.pt-gal__tab {
	min-height:44px;
	padding:0 18px;
	border:1px solid var(--line);
	border-radius:999px;
	background:#fff;
	font:inherit;
	font-size:15px;
	font-weight:600;
	color:var(--ink2);
	cursor:pointer;
	transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.pt-gal__tab:hover {
	border-color:var(--navy);
	color:var(--navy);
}
.pt-gal__tab[aria-selected="true"] {
	background:var(--navy);
	border-color:var(--navy);
	color:#fff;
}
.pt-gal__tab:focus-visible {
	outline:3px solid var(--cyan-a);
	outline-offset:2px;
}
.pt-gal__grid {
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:12px;
	max-width:1140px;
	margin:clamp(24px,2.6vw,32px) auto 0;
}
.pt-gal__grid[hidden] {
	display:none;
}
.pt-gal__item {
	position:relative;
	margin:0;
	aspect-ratio:1;
	border-radius:clamp(12px,1vw,16px);
	overflow:hidden;
	background:var(--bg2);
}
.pt-gal__item--wide {
	grid-column:span 2;
	aspect-ratio:auto;    /* toma el alto de la fila */
}
.pt-gal__item > img {      /* absoluta: la foto no empuja el alto de la fila */
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .5s ease;
}
.pt-gal__item:hover > img {
	transform:scale(1.03);
}
/* pie con la tienda: aparece al pasar el ratón; en pantallas táctiles, siempre */
.pt-gal__cap {
	position:absolute;
	left:10px;
	bottom:10px;
	max-width:calc(100% - 20px);
	padding:5px 10px;
	border-radius:999px;
	background:rgba(14,34,54,.8);
	color:#fff;
	font-size:12px;
	font-weight:600;
	line-height:1.3;
	opacity:0;
	transform:translateY(4px);
	transition:opacity .2s ease,transform .2s ease;
}
.pt-gal__item:hover .pt-gal__cap,
.pt-gal__item:focus-within .pt-gal__cap {
	opacity:1;
	transform:none;
}
@media (hover:none) {
	.pt-gal__cap { opacity:1; transform:none; }
}
@media (max-width:760px) {
	.pt-gal__grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:dense; gap:10px; }
	.pt-gal__item--wide { aspect-ratio:2/1; }
}
@media (prefers-reduced-motion:reduce) {
	.pt-gal__tab, .pt-gal__item > img, .pt-gal__cap { transition:none; }
	.pt-gal__item:hover > img { transform:none; }
}

/* ── visor ampliado (lightbox) ──
   Botón invisible sobre cada foto (lo crea js/tiendas.js) y un <dialog> a
   pantalla completa con la foto, el pie, las flechas y el botón de cerrar. */
.pt-gal__zoom {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	padding:0;
	border:0;
	border-radius:inherit;
	background:transparent;
	cursor:zoom-in;
}
/* doble anillo (blanco y azul) para que el foco se vea sobre cualquier foto */
.pt-gal__zoom:focus-visible {
	outline:none;
	box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px var(--navy);
}
/* foto que abre un panorama 360º (figure[data-pano]): icono de órbita en el
   centro, con el mismo círculo que el botón del visor de panoramas de deco */
.pt-gal__item[data-pano] .pt-gal__zoom {
	cursor:pointer;
}
.pt-gal__item[data-pano]::after {
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:56px;
	height:56px;
	transform:translate(-50%,-50%);
	border:1px solid rgba(255,255,255,.4);
	border-radius:50%;
	background:rgba(0,0,0,.5) url("../img/pano-orbit-play.png") center / 44px no-repeat;
	pointer-events:none;
}
/* mientras está abierto, la página de detrás no hace scroll */
html.is-lb {
	overflow:hidden;
}
.pt-lb {
	width:100%;
	height:100%;
	max-width:none;
	max-height:none;
	margin:0;
	padding:clamp(72px,6vw,88px) clamp(16px,6vw,96px) clamp(20px,3vw,32px);
	border:0;
	background:rgba(16,16,18,.94);
	color:#fff;
}
.pt-lb[open] {
	display:flex;
	align-items:center;
	justify-content:center;
}
.pt-lb::backdrop {
	background:transparent;
}
.pt-lb__fig {
	margin:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	max-width:100%;
}
/* caja de la foto o del panorama: el QR se coloca respecto a ella */
.pt-lb__media {
	position:relative;
	max-width:100%;
}
.pt-lb__img {
	display:block;
	max-width:100%;
	max-height:calc(100vh - 190px);
	max-height:calc(100dvh - 190px);
	border-radius:clamp(8px,.8vw,12px);
}
.pt-lb__img[hidden] {
	display:none;
}
/* panorama 360º embebido: 16:9 lo más grande que quepa (hasta 1600 px de ancho) */
.pt-lb__frame {
	display:block;
	width:min(calc(100vw - 2 * clamp(16px,6vw,96px)), calc((100vh - 190px) * 16 / 9), 1600px);
	width:min(calc(100vw - 2 * clamp(16px,6vw,96px)), calc((100dvh - 190px) * 16 / 9), 1600px);
	aspect-ratio:16 / 9;
	border:0;
	border-radius:clamp(8px,.8vw,12px);
	background:#000;
}
/* QR del panorama, en la esquina superior derecha. Va en caja blanca con
   margen: el QR viene sin borde y los lectores necesitan un margen claro alrededor */
.pt-lb__qr {
	position:absolute;
	top:clamp(10px,1.2vw,16px);
	right:clamp(10px,1.2vw,16px);
	width:clamp(104px,8vw,132px);
	padding:10px 10px 8px;
	border-radius:10px;
	background:#fff;
	box-shadow:0 8px 24px rgba(0,0,0,.35);
	text-align:center;
}
.pt-lb__qr[hidden] {
	display:none;
}
.pt-lb__qr img {
	display:block;
	width:100%;
	height:auto;
}
.pt-lb__qr-txt {
	margin-top:6px;
	font-size:11px;
	font-weight:600;
	line-height:1.25;
	color:var(--ink);
}
.pt-lb__cap {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:4px 14px;
	font-size:14px;
	font-weight:600;
	line-height:1.4;
	text-align:center;
}
.pt-lb__count {
	font-weight:500;
	color:rgba(255,255,255,.72);
}
.pt-lb__close {
	position:absolute;
	top:clamp(12px,1.6vw,24px);
	right:clamp(12px,1.6vw,24px);
}
.pt-lb__btn {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}
.pt-lb__btn[hidden] {
	display:none;
}
.pt-lb__btn--prev {
	left:clamp(12px,2vw,32px);
}
.pt-lb__btn--next {
	right:clamp(12px,2vw,32px);
}
.pt-lb button:focus-visible {
	outline:3px solid #fff;
	outline-offset:3px;
}
/* solo para lectores de pantalla: anuncia «Imagen 2 de 6: …» al cambiar */
.pt-lb__sr {
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
}
/* en móvil las flechas bajan bajo la foto, para no taparla; el panorama ocupa
   todo el alto libre y el QR no sale (ya se está en el móvil) */
@media (max-width:760px) {
	.pt-lb {
		padding-bottom:96px;
	}
	.pt-lb__frame {
		height:calc(100vh - 210px);
		height:calc(100dvh - 210px);
		aspect-ratio:auto;
	}
	.pt-lb__qr {
		display:none;
	}
	.pt-lb__btn {
		top:auto;
		bottom:24px;
		transform:none;
	}
	.pt-lb__btn--prev {
		left:calc(50% - 64px);
	}
	.pt-lb__btn--next {
		right:calc(50% - 64px);
	}
}
@media (prefers-reduced-motion:no-preference) {
	.pt-lb[open] {
		animation:pt-lb-in .2s ease both;
	}
}
@keyframes pt-lb-in {
	from { opacity:0; }
	to { opacity:1; }
}

/* ═══ 5 · PREGUNTAS FRECUENTES ═══ */
.pt-faq__g {
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
	gap:clamp(32px,5vw,96px);
	align-items:start;
}
.pt-faq__note {
	margin-top:16px;
	font-size:15px;
	line-height:1.6;
	color:var(--ink2);
}
.pt-faq__list details {
	border-top:1px solid var(--line2);
}
.pt-faq__list details:last-child {
	border-bottom:1px solid var(--line2);
}
.pt-faq__list summary {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:clamp(16px,1.4vw,22px) 0;
	cursor:pointer;
	list-style:none;
	font-size:clamp(16px,1.1vw,18px);
	font-weight:600;
	color:var(--ink);
}
.pt-faq__list summary::-webkit-details-marker {
	display:none;
}
/* + cerrada / − abierta */
.pt-faq__list summary::after {
	content:"+";
	flex:0 0 auto;
	font-size:24px;
	font-weight:400;
	line-height:1;
	color:var(--ink2);
}
.pt-faq__list details[open] summary::after {
	content:"−";
}
.pt-faq__list summary:focus-visible {
	outline:2px solid var(--navy);
	outline-offset:2px;
}
.pt-faq__list details p {
	padding-bottom:clamp(16px,1.4vw,22px);
	font-size:15px;
	line-height:1.65;
	color:var(--ink2);
}

/* ═══ 6 · FORMULARIO (lo que .form no cubre) ═══ */
.pt-form .form__g {
	margin-top:0;
}
.pt-field {
	margin-top:16px;
}
.pt-form select {
	margin-top:7px;
	width:100%;
	height:48px;
	border:1px solid var(--line);
	border-radius:8px;
	padding:0 40px 0 14px;
	font-family:inherit;
	font-size:15px;
	color:var(--ink);
	background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%234A5A68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
	-webkit-appearance:none;
	appearance:none;
	cursor:pointer;
}
.pt-form select:focus {
	outline:2px solid var(--navy);
	outline-offset:1px;
}

/* ═══ ADAPTACIÓN ═══ */
/* 4 columnas estrechas: «Configura tu decobasic genéricos» no cabe a 13 px
   y partiría en dos líneas; a 12 px y con menos relleno cabe en una */
@media (min-width:1280px) and (max-width:1439px) {
	.pt-cards--4 .pt-card__btn {
		padding-inline:8px;
		font-size:12px;
	}
}
/* variante de 4 tarjetas: 2 columnas hasta 761 px, a todo el ancho */
@media (max-width:1279px) {
	.pt-cards.pt-cards--4 {
		grid-template-columns:repeat(2,minmax(0,1fr));
		width:min(1840px,calc(100% - 2*var(--pad)));
	}
	.pt-cards--4 .pt-card:nth-child(n+3) {
		margin-top:var(--pt-row-gap);
	}
}
@media (max-width:1100px) {
	.pt-cards {
		grid-template-columns:minmax(0,1fr);
		width:min(600px,calc(100% - 2*var(--pad)));
	}
	.pt-pay__g {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
	/* los posts de Instagram tienen un ancho mínimo de 326 px: en una columna hasta que caben tres */
	.pt-ig__g {
		grid-template-columns:minmax(0,1fr);
		max-width:540px;
		margin-inline:auto;
	}
	.pt-faq__g {
		grid-template-columns:minmax(0,1fr);
	}
}
@media (max-width:760px) {
	.pt-cards.pt-cards--4 {
		grid-template-columns:minmax(0,1fr);
		width:min(600px,calc(100% - 2*var(--pad)));
	}
	.pt-cards--4 .pt-card:nth-child(n+2) {
		margin-top:var(--pt-row-gap);
	}
	.pt-pay__g {
		grid-template-columns:minmax(0,1fr);
	}
	/* «Síguenos en Instagram · @deco_acaes» no cabe en una línea: que parta */
	.pt-ig .pt-center .btn {
		max-width:100%;
		height:auto;
		min-height:50px;
		padding-block:12px;
		white-space:normal;
		text-align:center;
	}
}