/* =================================================
   FUENTE PERSONALIZADA: Cutive Mono
   Solo existe en un peso: el navegador simula
   la negrita y la cursiva a partir de la regular.
   (Alojadas en el propio sitio: no dependen de Google ni de GitHub)
   ================================================= */

@font-face {
	font-family: "CutiveMonoWeb";
	src: url("./Cutive-Mono-Regular.ttf")
		format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ============================================
EL PLANO DEL CASTILLO DE ARENA
Un dibujo técnico de un castillo de arena
donde cada estancia ES una categoría del menú. 
============================================ */

/* === REINICIO === */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* === PROPIEDADES PERSONALIZADAS === */
:root {
	--parchment: #f5ead6;
	--parchment-dark: #e8d5b4;
	--ink: #2c1810;
	--ink-light: #5c3a28;
	--blue-accent: #1a5276;
	--blue-light: #2980b9;
	--sand: #d4a853;
	--sand-light: #e8c97a;
	--sand-dark: #a87d32;
	--water: #48a9a6;
	--water-deep: #2d7a78;
	--coral: #c0392b;
	--seaweed: #27ae60;
	--grid-line: rgba(44, 24, 16, 0.06);
	--grid-line-major: rgba(44, 24, 16, 0.12);
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "CutiveMonoWeb", "Courier New", Courier, monospace;
	background: var(--parchment);
	color: var(--ink);
	overflow-x: hidden;
	line-height: 1.6;
}

/* === FONDO DE PAPEL CUADRICULADO === */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
		linear-gradient(var(--grid-line-major) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px);
	background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
	pointer-events: none;
	z-index: 0;
	opacity: 0.7;
}

/* === DECORACIÓN DE MANCHA DE CAFÉ === */
body::after {
	content: "";
	position: fixed;
	top: 15vh;
	right: 8vw;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		transparent 35%,
		rgba(139, 90, 43, 0.08) 36%,
		rgba(139, 90, 43, 0.12) 40%,
		rgba(139, 90, 43, 0.06) 45%,
		transparent 46%
	);
	pointer-events: none;
	z-index: 1;
}

/* === BARRA DE DESPLAZAMIENTO === */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--parchment-dark);
}

::-webkit-scrollbar-thumb {
	background: var(--ink-light);
	border-radius: 4px;
}

/* === COMPARTIDO === */
.content-layer {
	position: relative;
	z-index: 2;
}

/* === BLOQUE DE TÍTULO (Estilo plano) === */
.title-block {
	border: 2px solid var(--ink);
	margin: 2rem auto;
	max-width: 900px;
	position: relative;
}

.title-block::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	border: 1px solid var(--ink-light);
	pointer-events: none;
}

.title-block-header {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	border-bottom: 2px solid var(--ink);
}

.title-block-main {
	position: relative; /* añadido: el sello se ancla a este bloque */
	flex: 0 1 auto;
	padding: 1.2rem 2rem 1.2rem 1.5rem;
	border-right: 2px solid var(--ink);
}

.title-block-main h1 {
	font-size: clamp(1.8rem, 5vw, 3rem);
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* CAMBIO: 0.8 → 0.95 para que las líneas del título no se pisen (igual que en móvil) */
	line-height: 0.95;
	max-width: 16ch;
}

.title-block-main .subtitle {
	font-size: 0.75rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink-light);
	margin-top: 0.25rem;
}

.title-block-meta {
	flex: 1 1 200px; /* ocupa todo el espacio restante, mínimo 200px */
	min-width: 200px;
	padding: 0.8rem 1rem;
	font-size: 0.7rem;
	line-height: 1.8;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.title-block-meta span {
	display: block;
}

.title-block-footer {
	display: flex;
	border-top: 2px solid var(--ink);
}

.title-block-footer > div {
	flex: 1;
	padding: 0.6rem 1rem;
	font-size: 0.7rem;
	text-align: center;
}

/* === TÍTULO: "CARTA" + LOGO MÁS RICO === */
.title-block-main .brand-title {
	display: flex;
	align-items: center;
	gap: 0;
	max-width: none;
	white-space: nowrap;
}

.brand-word {
	transform: translateY(0.3em);
}

.brand-logo {
	flex: 0 0 auto;
	display: block;
	height: 2.5em;
	width: auto;
	aspect-ratio: 10 / 7;
	margin-left: -0.6em;
}

.title-row {
	width: fit-content;
	max-width: 100%;
}

/* === ÁREA DE DIBUJO === */
.drawing-area {
	max-width: 900px;
	margin: 3rem auto;
	padding: 0 1.5rem;
	position: relative;
}

/* === TIRAS 3D (reemplazan al castillo animado) === */
.strips-wrap {
	padding: 0;
}

.strips-lab {
	font-size: 0.6rem; /* mismo tamaño que .dim-callout */
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-light);
	line-height: 1.5;
	margin: 0 0 6px;
	text-align: center;
}

.strips-lab .d {
	display: none;
}

.strips-tr {
	display: flex;
	align-items: center;
	gap: 0;
	height: 220px;
	font-family: "CutiveMonoWeb", "Courier New", Courier, monospace;
	max-width: 500px;
	width: 100%;
	margin: 0 auto;
}

/* Alturas por posición: crean la silueta tipo rombo, centro más alto que los costados */
.strips-tr .p:nth-child(6) {
	height: 260px;
}

.strips-tr .p:nth-child(5),
.strips-tr .p:nth-child(7) {
	height: 252px;
}

.strips-tr .p:nth-child(4),
.strips-tr .p:nth-child(8) {
	height: 244px;
}

.strips-tr .p:nth-child(3),
.strips-tr .p:nth-child(9) {
	height: 236px;
}

.strips-tr .p:nth-child(2),
.strips-tr .p:nth-child(10) {
	height: 228px;
}

.strips-tr .p:nth-child(1),
.strips-tr .p:nth-child(11) {
	height: 220px;
}

.strips-base {
	display: none;
	height: 2px;
	margin: 0 auto;
	max-width: 400px;
	width: 100%;
	position: relative;
	z-index: 1;
	background: rgba(44, 24, 16, 0.25);
}

.strips-base i {
	position: absolute;
	inset: 0;
	display: block;
	background: #2c1810;
	transform: scaleX(0);
	transform-origin: left center;
}

.strips-base.on i {
	transform: scaleX(1);
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.strips-tr .p {
	position: relative;
	flex: 1;
	min-width: 0;
	overflow: visible;
	cursor: pointer;
	color: #2c1810;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10px 8px;
	transition: transform 0.25s ease;
	z-index: 1;
	-webkit-tap-highlight-color: transparent;
	/* AÑADIDO: evita el retraso de doble toque en móvil */
	touch-action: manipulation;
}

/* AÑADIDO: indicador de foco para navegación con teclado (Tab) */
.strips-tr .p:focus-visible {
	outline: 2px solid #2c1810;
	outline-offset: 4px;
	z-index: 6;
}

.strips-tr .p.bump {
	animation: stripsBump 0.35s ease;
}

@keyframes stripsBump {
	0% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-8px);
	}
	100% {
		transform: translateY(0);
	}
}

.strips-tr .p .fill {
	position: absolute;
	inset: 0;
	opacity: 1;
	overflow: hidden;
}

.strips-tr .p .edge {
	position: absolute;
	background: #2c1810;
}

/* Cada lado crece siempre en la misma dirección.
   --g = momento en que empieza el grupo de cada tira (se define más abajo). */
.strips-tr .p .e-top {
	top: 0;
	left: 0;
	height: 1px;
	width: 0;
	transition: width 0.12s linear;
}

.strips-tr .p .e-bot {
	bottom: 0;
	right: 0;
	height: 1px;
	width: 0;
	transition: width 0.12s linear;
}

.strips-tr .p .e-left {
	bottom: 0;
	left: 0;
	width: 1px;
	height: 0;
	transition: height 0.12s linear;
	box-shadow: -0.5px 0 0 #2c1810;
}

.strips-tr .p .e-right {
	top: 0;
	right: 0;
	width: 1px;
	height: 0;
	transition: height 0.12s linear;
}

/* Orden por grupos: centro (F) → E+G → D+H → C+I → B+J → A+K */
.strips-tr .p:nth-child(6) {
	--g: 0s;
}
.strips-tr .p:nth-child(5),
.strips-tr .p:nth-child(7) {
	--g: 0.55s;
}
.strips-tr .p:nth-child(4),
.strips-tr .p:nth-child(8) {
	--g: 1.1s;
}
.strips-tr .p:nth-child(3),
.strips-tr .p:nth-child(9) {
	--g: 1.65s;
}
.strips-tr .p:nth-child(2),
.strips-tr .p:nth-child(10) {
	--g: 2.2s;
}
.strips-tr .p:nth-child(1),
.strips-tr .p:nth-child(11) {
	--g: 2.75s;
}

/* LADO IZQUIERDO + CENTRO (A–F): izquierda (sube) → arriba → derecha (baja) → abajo */
.strips-tr .p.ready:nth-child(-n + 6) .e-left {
	height: 100%;
	transition-delay: var(--g);
}
.strips-tr .p.ready:nth-child(-n + 6) .e-top {
	width: 100%;
	transition-delay: calc(var(--g) + 0.12s);
}
.strips-tr .p.ready:nth-child(-n + 6) .e-right {
	height: 100%;
	transition-delay: calc(var(--g) + 0.24s);
}
.strips-tr .p.ready:nth-child(-n + 6) .e-bot {
	width: 100%;
	transition-delay: calc(var(--g) + 0.36s);
}

/* LADO DERECHO (G–K), en espejo: derecha (baja) → abajo → izquierda (sube) → arriba */
.strips-tr .p.ready:nth-child(n + 7) .e-right {
	height: 100%;
	transition-delay: var(--g);
}
.strips-tr .p.ready:nth-child(n + 7) .e-bot {
	width: 100%;
	transition-delay: calc(var(--g) + 0.12s);
}
.strips-tr .p.ready:nth-child(n + 7) .e-left {
	height: 100%;
	transition-delay: calc(var(--g) + 0.24s);
}
.strips-tr .p.ready:nth-child(n + 7) .e-top {
	width: 100%;
	transition-delay: calc(var(--g) + 0.36s);
}

@media (hover: hover) {
	.strips-tr .p:hover {
		z-index: 5;
	}

	.strips-tr .p:hover:not(.open) {
		transform: translateY(-8px);
	}

	.strips-tr .p:hover .e-top,
	.strips-tr .p:hover .e-bot {
		display: block !important;
		width: 100% !important;
		height: 1px !important;
		transition: none !important;
	}

	.strips-tr .p:hover .e-right {
		display: block !important;
		height: 100% !important;
		width: 1px !important;
		transition: none !important;
	}

	.strips-lab .d {
		display: inline;
	}

	.strips-lab .m {
		display: none;
	}
}

@media (hover: hover) {
	.strips-tr .p:hover:hover .e-left {
		display: block !important;
		height: 100% !important;
		width: 7px !important;
		left: -7px !important;
		background: #2c1810 !important;
		box-shadow: none !important;
		transition: none !important;
		clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%);
	}
}

/* ============================================================
   AÑADIDO: EFECTO 3D POR CLASE (.is-3d)
   Hace en móvil/táctil lo mismo que :hover en escritorio.
   La clase la añade el JavaScript al tocar una tira (o según
   la sección que se esté leyendo).
   ============================================================ */
.strips-tr .p.is-3d {
	z-index: 5;
	transform: translateY(-8px);
}

.strips-tr .p.is-3d .e-top,
.strips-tr .p.is-3d .e-bot {
	width: 100% !important;
	height: 1px !important;
	transition: none !important;
}

.strips-tr .p.is-3d .e-right {
	height: 100% !important;
	width: 1px !important;
	transition: none !important;
}

.strips-tr .p.is-3d .e-left {
	height: 100% !important;
	width: 7px !important;
	left: -7px !important;
	background: #2c1810 !important;
	box-shadow: none !important;
	transition: none !important;
	clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%);
}

/* MÓVIL: borde grueso izquierdo (volumen 3D) DURANTE EL REBOTE */
.strips-tr .p.edge-3d {
	z-index: 5;
}

.strips-tr .p.edge-3d .e-top,
.strips-tr .p.edge-3d .e-bot {
	width: 100% !important;
	height: 1px !important;
	transition: none !important;
}

.strips-tr .p.edge-3d .e-right {
	height: 100% !important;
	width: 1px !important;
	transition: none !important;
}

.strips-tr .p.edge-3d .e-left {
	height: 100% !important;
	width: 7px !important;
	left: -7px !important;
	background: #2c1810 !important;
	box-shadow: none !important;
	transition: none !important;
	clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%);
}

.strips-tr .lt {
	position: relative;
	z-index: 1;
	font-size: 20px;
	font-weight: 900;
	line-height: 1;
}

.strips-tr .nm {
	position: relative;
	z-index: 1;
	writing-mode: vertical-rl;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 11px;
	white-space: nowrap;
}

.strips-f1 {
	background: #d4a24c;
}
.strips-f2 {
	background: #ebc98f;
}
.strips-f3 {
	background: #e0b04f;
}
.strips-f4 {
	background: #e59a8b;
}
.strips-f5 {
	background: #ebc98f;
}
.strips-f6 {
	background: #f2c94c;
}
.strips-f7 {
	background: #e0b04f;
}
.strips-f8 {
	background: #7fcdc3;
}
.strips-f9 {
	background: #69aaa4;
}
.strips-f10 {
	background: #ebc98f;
}
.strips-f11 {
	background: #d4a24c;
}

@media (max-width: 640px) {
	.strips-tr .p {
		padding: 8px 2px;
		align-items: center;
	}

	.strips-tr .lt {
		font-size: 13px;
	}

	.strips-tr .nm {
		font-size: 9px;
		letter-spacing: 0.08em;
	}
}

.strips-rw {
	text-align: center;
}

.strips-replay {
	margin-top: 12px;
	min-height: 44px;
	font-family: "CutiveMonoWeb", "Courier New", Courier, monospace;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: none;
	border: 1.5px solid #2c1810;
	color: #2c1810;
	padding: 10px 18px;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.strips-tr,
	.strips-tr *,
	.strips-base i {
		transition: none !important;
	}

	/* AÑADIDO: también se desactivan el salto (bump), la aparición de secciones y el scroll suave */
	.strips-tr .p.bump {
		animation: none;
	}

	.annotation-row {
		transition: none;
	}

	html {
		scroll-behavior: auto;
	}
}

/* === ANOTACIONES DE SECCIÓN === */
.section-annotation {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.annotation-row {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 4rem;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.annotation-row.visible {
	opacity: 1;
	transform: translateY(0);
}

.annotation-marker {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 900;
	position: relative;
	background: var(--parchment);
}

.annotation-marker::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 2px;
	height: 60px;
	background: repeating-linear-gradient(
		to bottom,
		var(--ink) 0px,
		var(--ink) 4px,
		transparent 4px,
		transparent 8px
	);
	transform: translateX(-50%);
}

.annotation-content {
	flex: 1;
	padding-top: 0.3rem;
}

.annotation-label {
	font-size: 0.6rem;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--ink-light);
	margin-bottom: 0.2rem;
}

.annotation-title {
	font-size: clamp(1.4rem, 3.5vw, 2rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.6rem;
	position: relative;
	display: inline-block;
	line-height: 1.1;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
	text-decoration-skip-ink: none;
}

/* Emoji dentro de un título: queda fuera del subrayado */
.emoji-sin-raya {
	display: inline-block; /* hace que el subrayado no llegue al emoji */
	margin-left: 0.15em; /* pequeña separación respecto a la última letra */
}

.annotation-desc {
	font-size: 0.75rem;
	color: var(--ink-light);
	font-style: italic;
	margin-bottom: 1.5rem;
	max-width: 500px;
}

/* === ELEMENTOS DEL MENÚ === */
.items-spec-sheet {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border: 1.5px solid var(--ink);
	background: rgba(245, 234, 214, 0.5);
}

.spec-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	padding: 0.8rem 1.2rem;
	border-bottom: 1px solid var(--grid-line-major);
	align-items: baseline;
	transition: background 0.3s ease;
	cursor: default;
}

.spec-row:last-child {
	border-bottom: none;
}

.spec-row.is-selected {
	background: rgba(212, 168, 83, 0.1); /* el mismo naranja de antes */
}

.spec-row-alt {
	background: rgba(44, 24, 16, 0.03);
}

.spec-id {
	font-size: 0.6rem;
	color: var(--ink-light);
	letter-spacing: 0.1em;
	min-width: 40px;
	padding-top: 2px;
}

.spec-name {
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2rem;
}

.spec-name .spec-desc {
	display: block;
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--ink-light);
	margin-top: 0.4rem;
	line-height: 1.4;
}

.spec-tags {
	display: flex;
	gap: 0.3rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
	line-height: 1.2;
}

.spec-tag {
	font-size: 0.55rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 0.2rem 0.4rem 0.1rem 0.4rem;
	border: 1px solid var(--ink-light);
	color: var(--ink-light);
}

.spec-price {
	font-weight: 900;
	font-size: 1rem;
	white-space: nowrap;
	text-align: right;
	min-width: 45px;
}

/* === GRUPO APARTE DENTRO DE UNA SECCIÓN (ej.: COMBOS ANTICUCHEROS) ===
   Es un segundo cuadro debajo del principal, con el mismo borde que el de los productos.
   Solo el título lleva fondo (estilo de la fila de encabezado de la tabla de revisiones). */
.spec-group {
	margin-top: 1rem; /* espacio entre el cuadro principal y el de combos */
}

.spec-subhead {
	background: rgba(44, 24, 16, 0.06); /* mismo fondo que .revision-table th */
	padding: 0.5rem 0.8rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: left;
	border-bottom: 1.5px solid var(--ink); /* mismo grosor que el borde del cuadro */
}

/* === LÍNEA DE REFERENCIA DE COTA === */
.dim-callout {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.6rem;
	color: var(--ink-light);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 1.5rem 0 0.5rem;
	text-align: center;
	line-height: 1.5;
}

.dim-callout::before,
.dim-callout::after {
	content: "";
	flex: 1 0 3rem;
	height: 1px;
	background: repeating-linear-gradient(
		90deg,
		var(--ink-light) 0px,
		var(--ink-light) 3px,
		transparent 3px,
		transparent 6px
	);
}

.dim-group {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 1.5rem 0 0.5rem;
}

.dim-group .dim-callout {
	margin: 0;
}

/* === ROSA DE LOS VIENTOS (BRÚJULA) === */
.compass {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 70px;
	height: 70px;
	z-index: 100;
	opacity: 0.6;
	transition: opacity 0.3s;
	pointer-events: none;
}

.compass:hover {
	opacity: 1;
}

.compass svg {
	width: 100%;
	height: 100%;
}

.compass-needle {
	transform-origin: center;
	transition: transform 0.5s ease;
}

/* === SECCIÓN DE INFORMACIÓN === */
.info-blueprint {
	max-width: 900px;
	margin: 4rem auto;
	padding: 0 1.5rem;
}

.info-table {
	width: 100%;
	border: 2px solid var(--ink);
	border-collapse: collapse;
}

.info-table th {
	background: var(--ink);
	color: var(--parchment);
	padding: 0.6rem 1rem;
	text-align: left;
	font-size: 0.7rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.info-table td {
	padding: 1.2rem 1rem;
	border-bottom: 1px solid var(--grid-line-major);
	font-size: 0.8rem;
	vertical-align: top;
}

.info-table tr:last-child td {
	border-bottom: none;
}

.info-table td:first-child {
	font-weight: 700;
	width: 140px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.7rem;
	color: var(--ink-light);
}


/* === BLOQUE DE TÍTULO DEL PIE DE PÁGINA === */
.footer-block {
	border-top: 3px solid var(--ink);
	max-width: 900px;
	margin: 0 auto;
	padding: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.65rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-light);
}

/* === DECORACIÓN DE SELLO === */
.approval-stamp {
	position: absolute;
	top: 1.6rem; /* antes 1rem: más abajo */
	right: 0.8rem; /* antes 1.5rem: más a la derecha */
	white-space: nowrap;
	border: 3px solid var(--coral);
	border-radius: 8px;
	padding: 0.55rem 1.1rem;
	transform: rotate(12deg);
	font-size: 1.1rem; /* más grande */
	font-weight: 900;
	color: var(--coral);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.7;
	pointer-events: none;
	z-index: 3;
}

/* === BARRA DE PROGRESO DE DESPLAZAMIENTO === */
.progress-track {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: rgba(44, 24, 16, 0.1);
	z-index: 200;
}

.progress-bar {
	height: 100%;
	width: 0%;
	background: var(--ink);
	transition: width 0.1s linear;
}

/* === DIVISOR DE SECCIÓN === */
.section-divider {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.section-divider::before,
.section-divider::after {
	content: "";
	flex: 1;
	height: 0;
	border-top: 1px solid var(--ink-light);
}

.section-divider span {
	font-size: 0.6rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink-light);
	white-space: nowrap;
}

/* === DISEÑO ADAPTABLE (RESPONSIVE) === */
@media (max-width: 640px) {
	.title-block-header {
		flex-direction: column;
	}

	.title-block-meta {
		width: 100%;
		flex: none;
		border-top: 2px solid var(--ink);
	}

	/* Móvil: anula el padding extra de escritorio y quita la línea vertical */
	.title-block-main {
		flex: none;
		padding: 1.2rem 1.5rem;
		border-right: none;
	}

	.title-block-main h1 {
		line-height: 0.95;
		max-width: none;
	}

	.title-block-main .brand-title {
		font-size: min(1.8rem, calc((100vw - 160px) / 6.7));
	}

	.approval-stamp {
		top: 1.4rem; /* antes 0.9rem: más abajo */
		right: 0.6rem; /* antes 1.2rem: más a la derecha */
		font-size: 0.85rem; /* antes 1rem: más chico */
		transform: rotate(12deg); /* se quitó el scale(0.85) */
	}

	.title-block-footer {
		flex-wrap: wrap;
	}

	.title-block-footer > div {
		flex: 1 1 100%;
		padding: 0.6rem 1rem;
		font-size: 0.7rem;
		text-align: center;
	}

	.annotation-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.annotation-marker::after {
		display: none;
	}
	.dim-callout::before,
	.dim-callout::after {
		flex: 1 0 0.5rem;
	}

	.spec-row {
		grid-template-columns: 1fr auto;
		gap: 0.5rem;
		row-gap: 0;
		line-height: 0.9rem;
	}

	.spec-id {
		display: none;
	}

	.spec-name {
		display: contents;
	}

	.spec-price {
		grid-column: 2;
		grid-row: 1;
	}

	.spec-name .spec-desc,
	.spec-name .spec-tags {
		grid-column: 1 / -1;
	}

	.info-table td,
	.info-table td:first-child {
		display: block;
		width: 100%;
	}

	.info-table td:first-child {
		padding-bottom: 0.1rem;
		border-bottom: none;
	}

	.info-table td:last-child {
		padding-top: 0;
		padding-bottom: 1.5rem;
	}

	.compass {
		width: 50px;
		height: 50px;
		bottom: 1rem;
		right: 1rem;
	}

	.footer-block {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 0.2rem;
	}
}

/* === ESTILOS DE IMPRESIÓN === */
@media print {
	body {
		background: #fff;
		color: #000;
	}

	body::before,
	body::after {
		display: none;
	}

	.compass,
	.progress-track {
		display: none;
	}

	.approval-stamp {
		opacity: 0.5;
		border-color: #999;
		color: #999;
	}

	.title-block {
		border-color: #000;
	}

	.annotation-row {
		opacity: 1 !important;
		transform: none !important;
		page-break-inside: avoid;
	}

	.items-spec-sheet {
		page-break-inside: avoid;
	}

	.spec-row:hover,
	.spec-row.is-selected {
		background: none;
	}

	/* AÑADIDO: el carrito no se imprime */
	.boton-flotante,
	.panel {
		display: none;
	}
}

/* === BOTONES DE LOS TAGS: COPIAR Y WHATSAPP === */
/* Mismo tamaño, peso, borde y relleno que .spec-tag */
button.spec-tag,
a.spec-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	border-radius: 0;
	background: none;
	font: inherit; /* hereda negrita, familia e interlineado como los demás tags */
	font-size: 0.55rem; /* mismo tamaño de texto que .spec-tag */
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

button.spec-tag:focus-visible,
a.spec-tag:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

/* COPIAR */
.spec-copy {
	/* ancho justo de "COPIADO!" (8 letras + espaciado + relleno + borde)
	   para que el botón no cambie de tamaño al copiar */
	min-width: calc(8 * (1ch + 0.15em) + 0.8rem + 2px);
}

.spec-copy:hover {
	background: rgba(44, 24, 16, 0.08);
}

.spec-copy.is-copied {
	background: var(
		--ink
	); /* el café de la web. Para uno más claro usa var(--ink-light) */
	border-color: var(--ink);
	color: var(--parchment);
}

/* WHATSAPP (solo texto: usa el mismo tamaño, borde y relleno que .spec-tag) */
.spec-wa:hover {
	background: rgba(44, 24, 16, 0.08);
}

/* === CREMAS: CHECKBOXES EN 2 COLUMNAS (4 + 4, también en móvil) === */
.cremas-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* PC y tablet: 4 sectores */
	grid-template-rows: repeat(2, auto); /* 2 cremas en cada sector */
	grid-auto-flow: column; /* llena sector por sector, de arriba hacia abajo */
	column-gap: 1rem;
	padding: 0.4rem 1.2rem;
}

.crema-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.3rem; /* antes 0.6rem: texto más pegado al checkbox */
	padding: 0.2rem 0; /* antes 0.6rem: ahora van casi pegadas */
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.crema-item:nth-child(4),
.crema-item:nth-child(8) {
	border-bottom: none;
}

/* el checkbox real queda invisible pero accesible (teclado y lectores de pantalla) */
.crema-item input {
	position: absolute;
	opacity: 0;
	left: 0;
	top: 50%;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
}

/* cuadro del checkbox, en estilo plano técnico */
.crema-check {
	flex-shrink: 0;
	position: relative;
	width: 1.1rem;
	height: 1.1rem;
	border: 2.5px solid var(--ink-light); /* PC: antes 1.5px */
	background: var(--parchment);
	transition: background 0.2s ease;
}

.crema-check::after {
	content: "";
	position: absolute;
	left: 4px; /* antes 5px: se corre 1px porque el borde ahora es más grueso */
	top: 0; /* antes 1px */
	width: 5px;
	height: 10px;
	border: solid var(--parchment);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 0.15s ease;
}

.crema-item input:checked + .crema-check {
	background: var(--ink-light);
}

.crema-item input:checked + .crema-check::after {
	transform: rotate(45deg) scale(1);
}

.crema-item input:focus-visible + .crema-check {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.crema-name {
	font-size: 0.75rem; /* igual que la descripción de los productos */
	font-weight: 400; /* letra normal, sin negrita */
	color: var(--ink-light); /* mismo café claro de las descripciones */
	line-height: 1.4;
	overflow-wrap: anywhere;
	position: relative; /* NUEVO */
	top: 1px; /* NUEVO: baja el texto 1px respecto al checkbox */
}

/* fila de botones COPIAR / WHATSAPP */
.cremas-footer {
	padding: 0 1.2rem 0.9rem;
	border-top: 1px solid var(--grid-line-major);
}

.cremas-footer .spec-tags {
	margin-top: 0.8rem;
	font-weight: 700; /* igual que los botones de los productos (ahí heredan la negrita de .spec-name) */
}

/* un poco más ancho para que "ELIGE UNA" no cambie el tamaño del botón */
.cremas-copy {
	min-width: calc(9 * (1ch + 0.15em) + 0.8rem + 2px);
}

/* pantallas pequeñas: se mantienen las 2 columnas, con letra y márgenes más ajustados */
@media (max-width: 640px) {
	.cremas-grid {
		grid-template-columns: repeat(3, 1fr); /* móvil: 3 sectores */
		grid-template-rows: repeat(
			3,
			auto
		); /* 3 cremas por sector; el último queda con las 2 que sobran */
		column-gap: 0.4rem;
		padding: 0.4rem 0.7rem;
	}

	.cremas-footer {
		padding-left: 0.7rem;
		padding-right: 0.7rem;
	}

	.crema-check {
		width: 0.85rem; /* antes 1.1rem */
		height: 0.85rem;
		border-width: 1.5px; /* en móvil el borde vuelve a ser fino */
	}

	.crema-check::after {
		left: 3px;
		top: 1px;
		width: 4px;
		height: 8px;
		border-width: 0 1.5px 1.5px 0;
	}

	.crema-item input {
		width: 0.85rem;
		height: 0.85rem;
		gap: 0.25rem; /* antes 0.4rem */
	}
}

@media print {
	.cremas-footer {
		display: none;
	}
}

/* =================================================
   CARRITO (NUEVO)
   ================================================= */

:root {
	--rojo: hsl(0, 68%, 61%);
	--rojo-claro: hsl(0, 68%, 66%);
	--icono-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' viewBox='0 0 40 40'%3E%3Cpath d='M 10,10 L 30,30 M 30,10 L 10,30' stroke='white' stroke-width='4' stroke-linecap='butt' /%3E%3C/svg%3E");
}

/* --- Botón flotante --- */
.boton-flotante {
	position: fixed;
	bottom: 1rem;
	left: 1rem;
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5em 1em;
	border: 2px solid var(--ink);
	border-radius: 0.5em;
	background: var(--rojo);
	color: var(--ink);
	box-shadow: -2px 2px rgba(33, 33, 33, 0.5);
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: translate 0.2s ease, background 0.2s ease;
}

.boton-flotante:hover {
	background: var(--rojo-claro);
	box-shadow: none;
	translate: -2px 2px;
}

.carrito-contador {
	min-width: 1.5em;
	padding: 0.1em 0.4em;
	border-radius: 1em;
	background: var(--ink);
	color: var(--parchment);
	font-size: 0.75em;
	text-align: center;
}

.carrito-contador[hidden] {
	display: none;
}

/* --- Botón CARRITO de cada producto (naranja, distinto a Copiar y WhatsApp) --- */
.spec-cart {
	background: var(--sand);
	border-color: var(--ink-light);
	color: var(--ink);
	/* ancho justo de "AGREGADO!" para que no cambie de tamaño */
	min-width: calc(11 * (1ch + 0.15em) + 0.8rem + 2px);
}

.spec-cart:hover {
	background: var(--sand-light);
}

.spec-cart.is-added {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--parchment);
}

/* --- Panel lateral (izquierda) con fondo desenfocado --- */
.panel {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	overflow: clip;
	background: transparent;
	color: var(--ink);
	font-family: inherit;
	transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}

.panel::backdrop {
	opacity: 0;
	transition: opacity 0.2s ease;
	background-color: color-mix(in srgb, var(--sand) 50%, transparent);
	backdrop-filter: blur(6px);
}

.panel[open],
.panel[open]::backdrop {
	opacity: 1;
}

.panel-lateral {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	width: 40%;
	min-width: 300px;
	max-width: 50ch;
	overflow-y: auto;
	background: var(--parchment);
	border-right: solid 0.5em var(--rojo);
	translate: -100% 0;
	transition: translate 0.2s ease-in-out;
}

.panel[open] .panel-lateral {
	translate: 0;
}

@starting-style {
	.panel[open],
	.panel[open]::backdrop {
		opacity: 0;
	}

	.panel[open] > .panel-lateral {
		translate: -100% 0;
	}
}

.panel-cerrar {
	position: absolute;
	top: 1em;
	right: 1em;
	z-index: 100;
	width: 1.8rem;
	height: 1.8rem;
	padding: 0;
	border: 1px solid var(--rojo-claro);
	border-radius: 0.4em;
	background-color: var(--rojo);
	background-image: var(--icono-x);
	background-size: 100%;
	cursor: pointer;
}

.panel-cerrar:hover {
	background-color: var(--rojo-claro);
}

/* --- Contenido del carrito --- */
.carrito-cuerpo {
	flex: 1;
	padding: 1em;
}

.carrito-cuerpo h2 {
	margin-bottom: 1rem;
	padding-right: 2.5rem;
	font-size: 1.6rem;
	text-transform: uppercase;
	line-height: 1.1;
}

.carrito-vacio {
	font-size: 0.8rem;
	color: var(--ink-light);
	font-style: italic;
}

.carrito-item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.3rem 0.8rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--grid-line-major);
}

.carrito-nombre {
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
}

.carrito-nombre small {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--ink-light);
}

.carrito-sub {
	font-weight: 900;
	text-align: right;
	white-space: nowrap;
}

.carrito-ctrl {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
}

/* Botones − y + (más pequeños) */
.carrito-ctrl button {
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.3rem;
	border: 1.5px solid var(--ink);
	background: var(--parchment);
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
	font-weight: 900;
	line-height: 1;
	cursor: pointer;
}

/* Número de unidades: grande, va primero */
.carrito-qty {
	min-width: 1.6rem;
	margin-right: 0.2rem;
	font-size: 1.4rem;
	font-weight: 900;
	line-height: 1;
	text-align: center;
}

.carrito-ctrl button:hover {
	background: rgba(44, 24, 16, 0.08);
}

.carrito-ctrl .carrito-quitar {
	height: 1.6rem;
	margin-left: auto;
	padding: 0 0.6rem;
	font-size: 0.6rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* --- Pie: total + botones Copiar / WhatsApp --- */
.carrito-pie {
	padding: 1em;
	border-top: 2px solid var(--ink);
	background: rgba(44, 24, 16, 0.06);
}

.carrito-total {
	display: flex;
	justify-content: space-between;
	font-size: 1.2rem;
	font-weight: 900;
	text-transform: uppercase;
}

.carrito-pie .spec-tags {
	margin-top: 0.8rem;
	font-weight: 700;
}

@media (max-width: 640px) {
	.boton-flotante {
		font-size: 0.9rem;
	}

	.panel-lateral {
		width: 88%;
		min-width: 0;
	}
}

/* --- Botón flotante: late (zoom in / zoom out) mientras haya algo en el carrito --- */
@keyframes carritoPulso {
	0%,
	100% {
		scale: 1;
	}
	50% {
		scale: 1.12;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.boton-flotante.tiene-items {
		animation: carritoPulso 1.2s ease-in-out infinite;
	}

	.boton-flotante.tiene-items:hover {
		animation-play-state: paused;
	}
}

/* --- Botones Copiar / WhatsApp del carrito: mismo tamaño que QUITAR --- */
.carrito-pie .spec-tag {
	height: 1.6rem;
	padding: 0 0.6rem;
	border-width: 1.5px;
	font-size: 0.6rem;
}

.carrito-pie .spec-copy {
	/* ancho justo de "COPIADO!" para que no cambie de tamaño */
	min-width: calc(8 * (1ch + 0.15em) + 1.2rem + 3px);
}

.carrito-pie .spec-tag:not(.is-copied) {
	border-color: var(--ink);
	background: var(--parchment);
	color: var(--ink);
}

.carrito-pie .spec-tag:not(.is-copied):hover {
	background: rgba(44, 24, 16, 0.08);
}

/* --- Productos que ya están en el carrito: quedan marcados como al hacer clic --- */
.spec-row.in-cart {
	background: rgba(212, 168, 83, 0.1);
}

/* =================================================
   POPUP DE CREMAS (se abre al pulsar Copiar / WhatsApp / Carrito de un producto)
   ================================================= */
.popup-cremas {
	/* centrado exacto: el reset "* { margin: 0 }" anulaba el margin:auto del <dialog> */
	position: fixed;
	inset: 0;
	margin: auto;
	height: fit-content;
	width: min(520px, calc(100vw - 2rem));
	max-height: 90vh;
	padding: 0;
	overflow: auto;
	border: 2px solid var(--ink);
	background: var(--parchment);
	color: var(--ink);
	font-family: inherit;
	box-shadow: 6px 6px 0 var(--ink);
}

.popup-cremas::backdrop {
	background: color-mix(in srgb, var(--sand) 50%, transparent);
	backdrop-filter: blur(6px);
}

.popup-caja {
	position: relative;
	padding: 1.2rem;
}

.popup-caja h2 {
	padding-right: 2.5rem;
	font-size: 1.4rem;
	text-transform: uppercase;
	line-height: 1.1;
}

.popup-producto {
	margin: 0.4rem 0 0.8rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ink-light);
}

.cremas-modo {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.5rem;
	padding: 0.5rem 0;
	border-top: 1px solid var(--grid-line-major);
}

.popup-caja .cremas-grid {
	padding: 0.4rem 0;
	border-top: 1px solid var(--grid-line-major);
}

.cremas-grid.off {
	opacity: 0.4;
	pointer-events: none;
}

.crema-radio {
	border-radius: 50%;
}

.crema-radio::after {
	display: none;
}

.crema-item input:checked + .crema-radio {
	box-shadow: inset 0 0 0 3px var(--parchment);
}

.popup-msg {
	min-height: 1.2rem;
	margin-top: 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--coral);
}

.popup-botones {
	margin-top: 0.6rem;
	font-weight: 700;
}

.popup-botones .spec-tag {
	height: 1.6rem;
	padding: 0 0.8rem;
	border-width: 1.5px;
	font-size: 0.6rem;
}

#cremasCancel {
	border-color: var(--ink);
	background: var(--parchment);
	color: var(--ink);
}

#cremasCancel:hover {
	background: rgba(44, 24, 16, 0.08);
}

@media (max-width: 640px) {
	.cremas-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media print {
	.popup-cremas {
		display: none;
	}
}

/* =================================================
   TIRAS 3D: ahora son 10 (A–J), la tira K ya no existe
   ================================================= */
.strips-tr .p:nth-child(5),
.strips-tr .p:nth-child(6) {
	height: 220px;
}
.strips-tr .p:nth-child(4),
.strips-tr .p:nth-child(7) {
	height: 214px;
}
.strips-tr .p:nth-child(3),
.strips-tr .p:nth-child(8) {
	height: 208px;
}
.strips-tr .p:nth-child(2),
.strips-tr .p:nth-child(9) {
	height: 202px;
}
.strips-tr .p:nth-child(1),
.strips-tr .p:nth-child(10) {
	height: 196px;
}

.strips-tr .p:nth-child(5),
.strips-tr .p:nth-child(6) {
	--g: 0s;
}
.strips-tr .p:nth-child(4),
.strips-tr .p:nth-child(7) {
	--g: 0.55s;
}
.strips-tr .p:nth-child(3),
.strips-tr .p:nth-child(8) {
	--g: 1.1s;
}
.strips-tr .p:nth-child(2),
.strips-tr .p:nth-child(9) {
	--g: 1.65s;
}
.strips-tr .p:nth-child(1),
.strips-tr .p:nth-child(10) {
	--g: 2.2s;
}

/* la tira 6 ahora es la primera del lado derecho (animación en espejo) */
.strips-tr .p.ready:nth-child(6) .e-right {
	height: 100%;
	transition-delay: var(--g);
}
.strips-tr .p.ready:nth-child(6) .e-bot {
	width: 100%;
	transition-delay: calc(var(--g) + 0.12s);
}
.strips-tr .p.ready:nth-child(6) .e-left {
	height: 100%;
	transition-delay: calc(var(--g) + 0.24s);
}
.strips-tr .p.ready:nth-child(6) .e-top {
	width: 100%;
	transition-delay: calc(var(--g) + 0.36s);
}

/* =================================================
   ICONOS SVG (reemplazan a los emojis 🍔 en tira, divisor y título)
   El tamaño sigue al texto de cada lugar: height: 1em
   ================================================= */
.ico {
	display: inline-block;
	height: 1em;
	width: auto;
	vertical-align: -0.15em;
	margin-inline: 0.1em;
}

/* Iconos pequeños un poco más grandes (tira 3D y divisor de sección) */
.nm .ico {
	height: 1.5em;
	vertical-align: middle;
}

.section-divider .ico {
	height: 1.7em;
	vertical-align: middle;
}

/* =================================================
   TEXTO DE LAS TIRAS Y ESPACIOS
   (este bloque debe ser SIEMPRE lo último del archivo)
   ================================================= */

/* nombre vertical de cada tira */
.strips-tr .nm {
	font-weight: 400;
	-webkit-text-stroke: 0.4px currentColor;
}

/* aire arriba y abajo del conjunto de tiras */
.strips-tr {
	margin: 14px auto;
}

/* aire dentro de cada tira */
.strips-tr .p {
	padding-top: 14px;
	padding-bottom: 16px;
}

@media (max-width: 640px) {
	/* el contenedor debe medir lo mismo que la tira más alta;
	   si no, las tiras se salen y tapan los textos de arriba y abajo */
	.strips-tr {
		height: 176px;
	}

	.strips-tr .p:nth-child(5),
	.strips-tr .p:nth-child(6) {
		height: 176px;
	}
	.strips-tr .p:nth-child(4),
	.strips-tr .p:nth-child(7) {
		height: 170px;
	}
	.strips-tr .p:nth-child(3),
	.strips-tr .p:nth-child(8) {
		height: 164px;
	}
	.strips-tr .p:nth-child(2),
	.strips-tr .p:nth-child(9) {
		height: 158px;
	}
	.strips-tr .p:nth-child(1),
	.strips-tr .p:nth-child(10) {
		height: 152px;
	}

	.strips-tr .nm {
		-webkit-text-stroke: 0.35px currentColor;
	}

	.strips-tr .p {
		padding: 14px 2px 16px;
	}
}




/* =================================================
   TIRAS EN HORIZONTAL (A–J apiladas, una debajo de otra)
   Pegar SIEMPRE al final del archivo
   ================================================= */

/* el conjunto se apila hacia abajo en vez de ir en fila */
.strips-tr {
	flex-direction: column;
	height: auto;
}

/* cada tira: rectángulo ancho y bajo, con la letra a la izquierda y el nombre a la derecha */
.strips-tr .p {
	flex: none;
	width: 100%;
	height: 44px;
	flex-direction: row;
	align-items: center;
	padding: 0 14px;
}

/* el nombre ya no va girado */
.strips-tr .nm {
	writing-mode: horizontal-tb;
}

/* la silueta (antes por alto) ahora es por ancho: el centro es lo más ancho */
.strips-tr .p:nth-child(5),
.strips-tr .p:nth-child(6) {
	width: 100%;
	height: 44px;
}
.strips-tr .p:nth-child(4),
.strips-tr .p:nth-child(7) {
	width: 97%;
	height: 44px;
}
.strips-tr .p:nth-child(3),
.strips-tr .p:nth-child(8) {
	width: 94%;
	height: 44px;
}
.strips-tr .p:nth-child(2),
.strips-tr .p:nth-child(9) {
	width: 91%;
	height: 44px;
}
.strips-tr .p:nth-child(1),
.strips-tr .p:nth-child(10) {
	width: 89%;
	height: 44px;
}

@media (max-width: 640px) {
	.strips-tr {
		height: auto;
	}
	.strips-tr .p {
		height: 40px;
		padding: 0 10px;
	}
	.strips-tr .p:nth-child(n) {
		height: 40px;
	}
}






/* CLIC: la tira se desliza a la derecha y regresa */
@keyframes stripsBump {
	0% {
		transform: translateX(0);
	}
	40% {
		transform: translateX(16px);
	}
	100% {
		transform: translateX(0);
	}
}


/* HOVER (escritorio) y toque (móvil): desplazamiento a la derecha en vez de hacia arriba */
@media (hover: hover) {
	.strips-tr .p:hover:not(.open) {
		transform: translateX(8px);
	}
}

.strips-tr .p.is-3d {
	transform: translateX(8px);
}




/* grosor del texto de las tiras (en horizontal se ve más fino, se compensa) */
.strips-tr .nm {
	-webkit-text-stroke: 0.7px currentColor;
}

@media (max-width: 640px) {
	.strips-tr .nm {
		-webkit-text-stroke: 0.6px currentColor;
	}
}



/* CELULAR: texto e iconos de las tiras un poco más grandes */
@media (max-width: 640px) {
	.strips-tr .nm {
		font-size: 11px;
	}

	.strips-tr .nm .ico {
		height: 1.8em;
	}

	.strips-tr .lt {
		font-size: 16px;
	}
}






/* PC: texto, iconos y letras de las tiras un poco más grandes */
@media (min-width: 641px) {
	.strips-tr .nm {
		font-size: 13px;
	}

	.strips-tr .nm .ico {
		height: 1.8em;
	}

	.strips-tr .lt {
		font-size: 24px;
	}
}




/* HOVER (escritorio): la tira se desplaza 8px a la derecha */
@media (hover: hover) {
	.strips-tr .p:hover:not(.open) {
		transform: translateX(8px);
		--base: 8px;
	}
}

.strips-tr .p.is-3d {
	transform: translateX(8px);
	--base: 8px;
}

/* CLIC: se desliza 16px más a la derecha desde donde esté, y vuelve ahí mismo */
@keyframes stripsBump {
	0% {
		transform: translateX(var(--base, 0px));
	}
	40% {
		transform: translateX(calc(var(--base, 0px) + 16px));
	}
	100% {
		transform: translateX(var(--base, 0px));
	}
}