/* The Studio by Atis — generated from tokens.json */
:root, [data-theme="claro"] {
  --nogal: #3b2418;
  --cuero: #6b4429;
  --avellana: #b8946b;
  --avellana-clara: #d9c9b0;
  --papel: #efe9df;
  --papel-hondo: #e4dbcc;
  --marfil: #f5eddd;
  --campo-fondo: #f7f2ea;
  --campo-borde: #7d6957;
  --linea: #d6cbb8;
  --tinta: #1e1a17;
  --tinta-suave: #4b4038;
  --rojo: #c8202f;
  --negro: #000000;
  --sobre-oscuro: #fbf7f0;
  --verde: #23443a;
  --burdeos: #5a1f35;
  --azul: #334ba4;
  --hilo: #c29a4e;
  --oro-claro: #a0782e;
  --sombra-cristal: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -10px 24px rgba(0,0,0,0.2), 0 18px 40px rgba(0,0,0,0.35);
  --sombra-boton: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -1px 0 rgba(255,255,255,0.18), inset 0 -10px 18px rgba(0,0,0,0.14), 0 10px 24px rgba(0,0,0,0.28);
  --foco-claro: 0 0 0 3px rgba(51,75,164,0.35);
}
:root {
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 24px;
  --espacio-6: 32px;
  --espacio-7: 48px;
  --espacio-8: 72px;
  --espacio-9: 96px;
  --radio-etiqueta: 2px;
  --radio-campo: 10px;
  --radio-cristal: 24px;
  --radio-pildora: 999px;
  --font-palo: Arimo, Arial, "Helvetica Neue", sans-serif;
  --font-manuscrita: Italianno, "Snell Roundhand", cursive;
}
.portada { font-family: var(--font-palo); font-size: 64px; line-height: 0.98; font-weight: 700; letter-spacing: -0.02em; }
.titulo-1 { font-family: var(--font-palo); font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -0.015em; }
.titulo-2 { font-family: var(--font-palo); font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.titulo-3 { font-family: var(--font-palo); font-size: 22px; line-height: 1.2; font-weight: 700; }
.control { font-family: var(--font-palo); font-size: 15px; line-height: 1; font-weight: 700; }
.rotulo { font-family: var(--font-palo); font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: 0.1em; }
.entrada { font-family: var(--font-palo); font-size: 21px; line-height: 1.45; font-weight: 400; }
.cuerpo { font-family: var(--font-palo); font-size: 18px; line-height: 1.55; font-weight: 400; }
.pequeno { font-family: var(--font-palo); font-size: 15px; line-height: 1.5; font-weight: 400; }
.firma-grande { font-family: var(--font-manuscrita); font-size: 72px; line-height: 1; font-weight: 400; }
.subtitulo { font-family: var(--font-manuscrita); font-size: 48px; line-height: 1; font-weight: 400; }
.firma { font-family: var(--font-manuscrita); font-size: 40px; line-height: 1; font-weight: 400; }
.destacado { font-family: var(--font-manuscrita); font-size: 1.6em; line-height: 0; font-weight: 400; }

/* The Studio by Atis · componentes en CSS. Lee los tokens (tokens.css) y no escribe ningún color a mano
   salvo la transparencia del cristal. Las letras se cargan de Google Fonts mientras no estén alojadas en la web. */

/* ── Estampados ─────────────────────────────────────────── */
.ts-estampado--tartan { background-color: var(--nogal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cdefs%3E%3Cpattern id='s' width='4' height='4' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 4L4 0' stroke='%23000' stroke-opacity='.18' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='180' height='180' fill='%233B2418'/%3E%3Crect x='0' width='64' height='180' fill='%236B4429' fill-opacity='.5'/%3E%3Crect y='0' height='64' width='180' fill='%236B4429' fill-opacity='.5'/%3E%3Crect x='108' width='16' height='180' fill='%2323443A' fill-opacity='.75'/%3E%3Crect y='108' height='16' width='180' fill='%2323443A' fill-opacity='.75'/%3E%3Crect x='86' width='2' height='180' fill='%23C29A4E' fill-opacity='.8'/%3E%3Crect y='86' height='2' width='180' fill='%23C29A4E' fill-opacity='.8'/%3E%3Crect x='150' width='4' height='180' fill='%235A1F35' fill-opacity='.85'/%3E%3Crect y='150' height='4' width='180' fill='%235A1F35' fill-opacity='.85'/%3E%3Crect width='180' height='180' fill='url(%23s)'/%3E%3C/svg%3E"); background-size: 180px 180px; }
.ts-estampado--ventana { background-color: var(--nogal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cdefs%3E%3Cpattern id='s' width='4' height='4' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 4L4 0' stroke='%23000' stroke-opacity='.18' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='96' height='96' fill='%233B2418'/%3E%3Crect width='96' height='96' fill='url(%23s)'/%3E%3Crect x='0' width='3' height='96' fill='%2323443A'/%3E%3Crect y='0' height='3' width='96' fill='%2323443A'/%3E%3Crect x='48' width='1' height='96' fill='%236B4429'/%3E%3Crect y='48' height='1' width='96' fill='%236B4429'/%3E%3Crect x='72' width='.6' height='96' fill='%23C29A4E' fill-opacity='.55'/%3E%3Crect y='72' height='.6' width='96' fill='%23C29A4E' fill-opacity='.55'/%3E%3C/svg%3E"); background-size: 96px 96px; }
/* La trama (C181): el tartán sobrio como textura de fondo de una sección oscura. Pequeño (se repite mucho), a media opacidad y
   algo desenfocado, para que no moleste al leer. Es una capa: un <div class="ts-trama" aria-hidden="true"> dentro de la sección,
   detrás del contenido. Es la única forma en que un estampado va de fondo. */
.ts-trama { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cdefs%3E%3Cpattern id='s' width='4' height='4' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 4L4 0' stroke='%23000' stroke-opacity='.18' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='180' height='180' fill='%233B2418'/%3E%3Crect x='0' width='64' height='180' fill='%236B4429' fill-opacity='.5'/%3E%3Crect y='0' height='64' width='180' fill='%236B4429' fill-opacity='.5'/%3E%3Crect x='108' width='16' height='180' fill='%2323443A' fill-opacity='.75'/%3E%3Crect y='108' height='16' width='180' fill='%2323443A' fill-opacity='.75'/%3E%3Crect x='86' width='2' height='180' fill='%23C29A4E' fill-opacity='.8'/%3E%3Crect y='86' height='2' width='180' fill='%23C29A4E' fill-opacity='.8'/%3E%3Crect x='150' width='4' height='180' fill='%235A1F35' fill-opacity='.85'/%3E%3Crect y='150' height='4' width='180' fill='%235A1F35' fill-opacity='.85'/%3E%3Crect width='180' height='180' fill='url(%23s)'/%3E%3C/svg%3E"); background-size: 58px 58px; opacity: .2; filter: blur(.5px) saturate(.85); }
/* En una sección verde, la misma tela en su colorida verde (tartan-verde.svg: fondo y bandas verdes, la franja ancha en burdeos,
   el hilo dorado y la fina en nogal: como en la marrón, rayas de otro color y no todo teñido, Alejandro 18-10), no un filtro que lo tiña todo (C188). Para pasar del nogal al verde, casilla a casilla (C183): el fondo liso y
   el tartán que se pinta de verde en cuadritos sueltos, primero las líneas y después las casillas (en la web, TS.teselas) */
.ts-trama--verde { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cdefs%3E%3Cpattern id='s' width='4' height='4' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 4L4 0' stroke='%23000' stroke-opacity='.18' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='180' height='180' fill='%2323443A'/%3E%3Crect x='0' width='64' height='180' fill='%233D7060' fill-opacity='.5'/%3E%3Crect y='0' height='64' width='180' fill='%233D7060' fill-opacity='.5'/%3E%3Crect x='108' width='16' height='180' fill='%235A1F35' fill-opacity='.8'/%3E%3Crect y='108' height='16' width='180' fill='%235A1F35' fill-opacity='.8'/%3E%3Crect x='86' width='2' height='180' fill='%23C29A4E' fill-opacity='.8'/%3E%3Crect y='86' height='2' width='180' fill='%23C29A4E' fill-opacity='.8'/%3E%3Crect x='150' width='4' height='180' fill='%233B2418' fill-opacity='.85'/%3E%3Crect y='150' height='4' width='180' fill='%233B2418' fill-opacity='.85'/%3E%3Crect width='180' height='180' fill='url(%23s)'/%3E%3C/svg%3E"); opacity: .22; }
/* En burdeos, la misma tela en su colorida burdeos (tartan-burdeos.svg: fondo y bandas burdeos, la franja ancha en verde, el
   hilo dorado y la fina en nogal), para lo que es de la casa por dentro: las pantallas de entrar y el centro de mando
   (Alejandro, 18-10: «que destaque el burdeos en lugar del marrón; vamos a marcar la distinción»). Va sobre fondo burdeos.
   --tartan-burdeos, por si hace falta la tela sola (el fondo de la página, detrás de la hora y del notch del iPhone) */
:root { --tartan-burdeos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cdefs%3E%3Cpattern id='s' width='4' height='4' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 4L4 0' stroke='%23000' stroke-opacity='.18' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='180' height='180' fill='%235A1F35'/%3E%3Crect x='0' width='64' height='180' fill='%237A3550' fill-opacity='.5'/%3E%3Crect y='0' height='64' width='180' fill='%237A3550' fill-opacity='.5'/%3E%3Crect x='108' width='16' height='180' fill='%2323443A' fill-opacity='.8'/%3E%3Crect y='108' height='16' width='180' fill='%2323443A' fill-opacity='.8'/%3E%3Crect x='86' width='2' height='180' fill='%23C29A4E' fill-opacity='.8'/%3E%3Crect y='86' height='2' width='180' fill='%23C29A4E' fill-opacity='.8'/%3E%3Crect x='150' width='4' height='180' fill='%233B2418' fill-opacity='.85'/%3E%3Crect y='150' height='4' width='180' fill='%233B2418' fill-opacity='.85'/%3E%3Crect width='180' height='180' fill='url(%23s)'/%3E%3C/svg%3E"); }
.ts-trama--burdeos { background-image: var(--tartan-burdeos); opacity: .24; }
/* Lo que va encima de la trama, por delante */
.ts-trama ~ :not(.pano):not(.calor):not(.ts-trama) { position: relative; z-index: 1; }

/* ── El logo (C157): el signo, dibujado a mano de un solo trazo, y el nombre debajo si se quiere ──
   El signo toma el color del texto (currentColor): en negro por lo general, en papel sobre oscuro.
   El trazo es siempre el del dibujo, a cualquier tamaño: nunca se engorda (C194). */
.ts-signo { display: inline-block; flex: none; height: 1em; aspect-ratio: 501 / 679; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 501 679'%3E%3Cpath d='M28.1 553.7 C88.6 470.9 157.1 373.6 199.1 280.3 C212.7 250.2 237.6 194 229.9 161.6 C225.5 143.1 211.3 140.7 196.7 151 C177.6 164.6 164.6 186 155.3 207.1 C126 273.7 144.8 336.3 197.6 383.3 C249.8 429.8 345.1 466.3 306.4 553.3 C301 565.4 293.5 576.6 285 586.8 C273.7 600.4 260.5 612.3 246.2 622.7 C235.8 630.2 224.3 636.6 212.6 641.7 C204.3 645.3 195.7 648 186.8 649.8 C156 655.9 136.6 638.2 137.6 607.5 C138.8 569 155.7 531.1 172.5 497 C218.5 403.7 276.5 316.8 334.1 230.4 C363.9 185.6 394.3 141.2 425 97 C440.5 74.6 455.1 51.3 471.6 29.6' fill='none' stroke='%23000000' stroke-width='8.33' stroke-linecap='round' stroke-linejoin='round'/%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 501 679'%3E%3Cpath d='M28.1 553.7 C88.6 470.9 157.1 373.6 199.1 280.3 C212.7 250.2 237.6 194 229.9 161.6 C225.5 143.1 211.3 140.7 196.7 151 C177.6 164.6 164.6 186 155.3 207.1 C126 273.7 144.8 336.3 197.6 383.3 C249.8 429.8 345.1 466.3 306.4 553.3 C301 565.4 293.5 576.6 285 586.8 C273.7 600.4 260.5 612.3 246.2 622.7 C235.8 630.2 224.3 636.6 212.6 641.7 C204.3 645.3 195.7 648 186.8 649.8 C156 655.9 136.6 638.2 137.6 607.5 C138.8 569 155.7 531.1 172.5 497 C218.5 403.7 276.5 316.8 334.1 230.4 C363.9 185.6 394.3 141.2 425 97 C440.5 74.6 455.1 51.3 471.6 29.6' fill='none' stroke='%23000000' stroke-width='8.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ts-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 0.12em; color: var(--negro); line-height: 1; }
.ts-logo .ts-nombre { font-size: 0.17em; }
.ts-logo .ts-nombre i, .ts-oscuro .ts-logo .ts-nombre i, .ts-cristal .ts-logo .ts-nombre i { color: inherit; }
.ts-logo--dos-lineas .ts-nombre { font-size: 0.2em; }
.ts-logo__lineas { display: flex; flex-direction: column; align-items: center; gap: 0.05em; }
.ts-oscuro .ts-logo, .ts-logo--claro { color: var(--papel); }

/* ── Cristal: el escaparate delante del estampado ───────── */
.ts-cristal {
  padding: var(--espacio-5);
  border-radius: var(--radio-cristal);
  color: var(--sobre-oscuro);
  background: linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.05) 55%), rgba(30,20,14,0.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: var(--sombra-cristal);
}

/* ── Botones: cristal puro, sin tinte (C149) ────────────── */
.ts-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2);
  --alto-boton: 46px; min-height: var(--alto-boton); padding: 0 24px;
  border-radius: var(--radio-pildora);
  font: 700 15px/1 var(--font-palo);
  color: var(--sobre-oscuro);
  text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.08) 55%, rgba(255,255,255,0.14) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.7) brightness(1.06);
  backdrop-filter: blur(14px) saturate(1.7) brightness(1.06);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: var(--sombra-boton);
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  transition: transform 160ms ease, background-color 160ms ease;
}
.ts-boton:hover { background-color: rgba(255,255,255,0.08); }
.ts-boton:active { transform: translateY(1px) scale(0.99); }
.ts-boton--suave { background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03)); border-color: rgba(255,255,255,0.38); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); }
.ts-claro .ts-boton {
  color: var(--tinta); text-shadow: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.45) 60%, rgba(255,255,255,0.7) 100%);
  border-color: rgba(59,36,24,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -6px 12px rgba(59,36,24,0.06), 0 8px 20px rgba(59,36,24,0.16), 0 1px 2px rgba(59,36,24,0.22);
}
.ts-claro .ts-boton--suave { background: rgba(255,255,255,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(59,36,24,0.18); }
.ts-boton:focus-visible { outline: 3px solid var(--hilo); outline-offset: 3px; }
/* La flecha de los botones (C172, C173): un círculo `rojo` encajado en el extremo derecho del botón, concéntrico con su borde
   redondo (ocupa la altura del botón menos un filo igual arriba, abajo y a la derecha), con una flecha que apunta en diagonal hacia
   arriba; al pasar por encima (o con el foco), gira y apunta a la derecha: «vamos». Los botones que son solo un icono llevan
   `ts-boton--icono` y no la llevan. La flecha es una imagen (lleva su blanco escrito). Un botón de otra altura cambia
   `--alto-boton` (no su min-height a secas) y su relleno derecho se queda en 3px: así el círculo sigue encajado. */
.ts-boton:not(.ts-boton--icono) { padding-right: 3px; gap: 14px; white-space: nowrap; }
.ts-boton:not(.ts-boton--icono)::before { content: ""; order: 2; flex: none; margin-left: auto; width: calc(var(--alto-boton) - 8px); height: calc(var(--alto-boton) - 8px); border-radius: 50%;
  background: var(--rojo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M12.5 6.5 18 12l-5.5 5.5' fill='none' stroke='%23fbf7f0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 46% no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 4px rgba(80,0,10,0.25);
  transform: rotate(-45deg); transition: transform 420ms cubic-bezier(.16, 1, .3, 1); }
.ts-boton:not(.ts-boton--icono):hover::before, .ts-boton:not(.ts-boton--icono):focus-visible::before { transform: rotate(0deg); }
/* La tarjeta que es un botón (C175): toda la tarjeta (un `<a>`, normalmente con `ts-cristal`) es la acción. El texto, a la
   izquierda; el círculo `rojo` de la flecha, en la esquina de abajo a la derecha, y esa esquina se redondea a su medida para que el
   círculo quede concéntrico con ella (el mismo filo abajo y a la derecha). Al pasar por encima la flecha gira; la web, además,
   mueve la tarjeta un poco hacia el ratón, como los botones. `--fx`/`--fy` dejan que el círculo se adelante un poco más. */
.ts-tarjeta-boton { --alto-flecha: 58px; --filo-flecha: 10px; --fx: 0px; --fy: 0px; position: relative; display: block; color: inherit; text-decoration: none; cursor: pointer;
  padding-right: calc(var(--alto-flecha) + var(--filo-flecha) * 2 + 8px) !important;
  border-bottom-right-radius: calc(var(--alto-flecha) / 2 + var(--filo-flecha)) !important; }
.ts-tarjeta-boton::before { content: ""; position: absolute; right: var(--filo-flecha); bottom: var(--filo-flecha); width: var(--alto-flecha); height: var(--alto-flecha); border-radius: 50%;
  background: var(--rojo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M12.5 6.5 18 12l-5.5 5.5' fill='none' stroke='%23fbf7f0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 42% no-repeat;
  z-index: 3; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -3px 6px rgba(80,0,10,0.25), 0 8px 18px -8px rgba(60,0,10,0.6);
  translate: var(--fx, 0px) var(--fy, 0px); rotate: -45deg; transition: rotate 420ms cubic-bezier(.16, 1, .3, 1); }
.ts-tarjeta-boton:hover::before, .ts-tarjeta-boton:focus-visible::before { rotate: 0deg; }
.ts-tarjeta-boton:focus-visible { outline: 3px solid var(--hilo); outline-offset: 4px; }
.ts-claro .ts-tarjeta-boton:focus-visible { outline-color: var(--azul); }
.ts-claro .ts-boton:focus-visible { outline-color: var(--azul); }

/* ── Campos ─────────────────────────────────────────────── */
.ts-campo { display: grid; gap: 6px; font: 400 16px/1.45 var(--font-palo); color: var(--tinta); }
.ts-campo label { font: 700 14px/1.2 var(--font-palo); }
.ts-campo input, .ts-campo textarea, .ts-campo select {
  font: 400 17px/1.3 var(--font-palo); color: var(--tinta);
  min-height: 46px; padding: 0 var(--espacio-4);
  background: var(--campo-fondo);
  border: 1.5px solid var(--campo-borde);
  border-radius: var(--radio-campo);
}
.ts-campo textarea { padding: var(--espacio-3) var(--espacio-4); min-height: 96px; }
.ts-campo input:focus, .ts-campo textarea:focus, .ts-campo select:focus { outline: none; border-color: var(--azul); box-shadow: var(--foco-claro); }
.ts-campo input::placeholder, .ts-campo textarea::placeholder { color: var(--tinta-suave); opacity: 1; }
.ts-campo .ts-ayuda { font-size: 15px; color: var(--tinta-suave); }
.ts-campo .ts-error { font-size: 15px; color: var(--burdeos); }
.ts-campo[data-error] input { border-color: var(--burdeos); }

/* ── Sello ──────────────────────────────────────────────── */
.ts-sello {
  display: inline-flex; align-items: center; padding: 7px 10px;
  border-radius: var(--radio-etiqueta);
  font: 700 12px/1 var(--font-palo); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--azul); background: var(--papel); border: 1.5px solid var(--azul);
}
.ts-sello--oscuro { color: var(--hilo); background: transparent; border-color: var(--hilo); }
.ts-sello--lleno { color: var(--sobre-oscuro); background: var(--azul); border-color: var(--azul); }

/* ── Precio: una fila de la lista de precios ────────────── */
.ts-precio { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-4); padding: var(--espacio-3) 0; border-bottom: 1px dashed var(--campo-borde); }
.ts-precio__que { font: 700 16px/1.25 var(--font-palo); color: var(--tinta); }
.ts-precio__que small { display: block; font: 400 15px/1.35 var(--font-palo); color: var(--tinta-suave); margin-top: 2px; }
.ts-precio__cuanto { font: 700 24px/1 var(--font-palo); color: var(--nogal); white-space: nowrap; }

/* ── Selector (por ejemplo, el tramo de facturación) ────── */
.ts-selector { display: flex; flex-wrap: wrap; gap: var(--espacio-2); border: 0; padding: 0; margin: 0; }
.ts-selector input { position: absolute; opacity: 0; pointer-events: none; }
.ts-selector label { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--radio-pildora); border: 1.5px solid var(--azul); color: var(--azul); font: 700 14px/1 var(--font-palo); cursor: pointer; }
.ts-selector input:checked + label { background: var(--azul); color: var(--sobre-oscuro); }
.ts-selector input:focus-visible + label { outline: 3px solid var(--azul); outline-offset: 2px; }

/* ── El nombre, mientras llega el logo: palo en mayúsculas y la manuscrita en «the» y «by» ── */
.ts-nombre { display: inline-flex; align-items: baseline; gap: 0.18em; white-space: nowrap; font: 700 1em/1 var(--font-palo); letter-spacing: -0.01em; text-transform: uppercase; }
.ts-nombre i { font: 400 1.32em/1 var(--font-manuscrita); text-transform: none; letter-spacing: 0; color: var(--cuero); }
.ts-oscuro .ts-nombre i, .ts-cristal .ts-nombre i { color: var(--hilo); }

/* ── Destacado: una palabra a mano dentro del texto (C149) ── */
.ts-destacado { font: 400 1.6em/0 var(--font-manuscrita); font-style: normal; color: var(--oro-claro); padding: 0 0.04em; letter-spacing: 0; }
.ts-oscuro .ts-destacado, .ts-cristal .ts-destacado { color: var(--hilo); }
/* ── Nota: el papel de carta de la casa (C168) ──
   No una libreta: papel de algodón marfil, con fibra, verjurado finísimo (las líneas del papel hecho a la antigua) y canto dorado;
   arriba, el signo grabado en seco (`ts-nota__relieve`); dentro, lo escrito a mano con pluma (`ts-escrito`) y lo impreso en palo.
   Es un objeto sobre la mesa: lleva su sombra suave. La textura es una imagen (lleva sus colores escritos). */
:root {
  --textura-nota:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .16 0 0 0 .15 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(120, 88, 48, .016) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, rgba(120, 88, 48, .02) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(150, 110, 60, .13)),
    radial-gradient(ellipse at 25% 15%, rgba(255, 255, 255, .5), transparent 55%),
    linear-gradient(165deg, rgba(255, 255, 255, .18), rgba(120, 88, 48, .07));
  --sombra-nota: inset 0 0 0 1px rgba(194, 154, 78, .7), inset 0 0 0 2.5px rgba(255, 250, 238, .7), 0 1px 1px rgba(60, 40, 20, .3), 0 22px 40px -16px rgba(20, 10, 4, .6);
}
.ts-nota { position: relative; isolation: isolate; color: var(--tinta); padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 42px); }
.ts-nota::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 3px; background-color: var(--marfil); background-image: var(--textura-nota); box-shadow: var(--sombra-nota); }
.ts-nota__relieve { display: block; width: max-content; color: var(--marfil); font-size: 40px; line-height: 0;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .95)) drop-shadow(0 -1px 0 rgba(110, 80, 45, .32)); }
/* Tinta de pluma: el azul de Atis con un punto de tinta, y un leve corrido de la tinta en el papel */
.ts-escrito { font-family: var(--font-manuscrita); font-weight: 400; letter-spacing: 0; color: color-mix(in srgb, var(--azul) 72%, var(--tinta)); text-shadow: 0 0 .6px currentColor; }

/* ── Clave: la palabra clave de un párrafo, en negrita y subrayada a mano (C166) ──
   Una o dos por párrafo: lo que se lee al pasar la vista en diagonal (y lo que busca la gente). El subrayado es un trazo fino
   e irregular, como el del logo: en `azul` sobre claro y en `hilo` sobre oscuro. Si la palabra cae entre dos líneas, el
   subrayado la acompaña en las dos (box-decoration-break). El trazo es una imagen: lleva los colores del azul y del hilo escritos. */
.ts-clave { font-weight: 700; color: inherit; padding-bottom: 0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7.5 C 34 4.5, 66 9, 101 6.2 S 168 3.6, 197 6.4' fill='none' stroke='%23334ba4' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% 0.32em no-repeat; }
.ts-oscuro .ts-clave, .ts-cristal .ts-clave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7.5 C 34 4.5, 66 9, 101 6.2 S 168 3.6, 197 6.4' fill='none' stroke='%23c29a4e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ts-oscuro .ts-claro .ts-clave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7.5 C 34 4.5, 66 9, 101 6.2 S 168 3.6, 197 6.4' fill='none' stroke='%23334ba4' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ts-subtitulo { font: 400 48px/1 var(--font-manuscrita); color: var(--oro-claro); margin: 0; }
.ts-oscuro .ts-subtitulo, .ts-cristal .ts-subtitulo { color: var(--hilo); }

/* ── Superficies ────────────────────────────────────────── */
.ts-oscuro { background-color: var(--nogal); color: var(--sobre-oscuro); }
.ts-oscuro :where(a:not(.ts-boton)) { color: var(--sobre-oscuro); text-decoration-color: var(--hilo); }
.ts-claro { background-color: var(--papel); color: var(--tinta); }
.ts-claro :where(a:not(.ts-boton)) { color: var(--azul); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .ts-boton, .ts-boton::before, .ts-tarjeta-boton::before { transition: none; } }

/* ── Base de la web de The Studio (maqueta completa, C152) ── */
:root { color-scheme: light; --curva: cubic-bezier(.16, 1, .3, 1); --curva-suave: cubic-bezier(.65, 0, .35, 1); --cinta: #f1e6cf; --oro-1: #7a5820; --oro-2: #c29a4e; --oro-3: #f4d995; --oro-4: #a97f35; --oro-5: #fff2c6; }
* { box-sizing: border-box; }
html { background: var(--nogal); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nogal); color: var(--sobre-oscuro); font-family: var(--font-palo); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
p, h1, h2, h3, h4, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg, canvas { max-width: 100%; }
::selection { background: var(--hilo); color: var(--nogal); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--hilo); outline-offset: 3px; }
.ts-claro :focus-visible { outline-color: var(--azul); }
.ts-boton, .ts-cristal { letter-spacing: normal; }
section { position: relative; }

/* Grano finísimo sobre toda la página */
body::after { content: ""; position: fixed; inset: -50%; pointer-events: none; z-index: 95; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Huecos: el sitio de un texto que todavía no está escrito. Discretos: se ven si los buscas */
.h { outline: 1px dashed rgba(251,247,240,.17); outline-offset: .28em; border-radius: 2px; }
.ts-claro .h, .h.osc { outline-color: rgba(30,26,23,.17); }

/* Contenedor y escalas fluidas */
.envoltura { width: min(1240px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.d-1 { font-size: clamp(50px, 9vw, 150px); line-height: .9; font-weight: 700; letter-spacing: -.045em; text-wrap: balance; }
.d-2 { font-size: clamp(38px, 6.4vw, 100px); line-height: .96; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
.d-3 { font-size: clamp(30px, 4.4vw, 68px); line-height: 1.02; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
.t-entrada { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; max-width: 56ch; }
.t-cuerpo { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; }
.mano { font-family: var(--font-manuscrita); font-weight: 400; letter-spacing: 0; }
.num { font: 400 clamp(48px, 5.4vw, 72px)/1 var(--font-manuscrita); color: var(--hilo); }
.ts-claro .num { color: var(--cuero); }
.secc { padding-block: clamp(110px, 13vw, 170px); }
.claro { background: var(--papel); color: var(--tinta); }
.claro-h { background: var(--papel-hondo); color: var(--tinta); }

/* El cristal vivo: un brillo que sigue al ratón */
.vivo { position: relative; isolation: isolate; }
.vivo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(220px circle at var(--mx, 30%) var(--my, -10%), rgba(255,255,255,.26), rgba(255,255,255,0) 60%);
  opacity: var(--luz, .5); transition: opacity .4s var(--curva); }
.vivo:hover::after { --luz: 1; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }


/* ══ Los bordes del iPhone (Alejandro, 18-10: «la pantalla no es un rectángulo: que los fondos se arrastren más allá») ══
   Cómo pinta Safari 26 lo que no es la página (investigado el 18-10: 1ar.io, hux.pro#92, Lunardi, Ben Frain, Fantinel):
   · con el scroll en cero, la franja de la hora y el notch es del color de fondo de la raíz, liso; con scroll, enseña la página;
   · tiñe sus barras con el fondo de html/body (si son transparentes, blanco) y con el de los elementos fijos junto a los bordes,
     aunque estén a opacidad cero;
   · un elemento fijo opaco se recorta en el borde de su barra de abajo (de ahí el corte recto de la sombra del menú).
   Así que: fondo explícito en html y body (la trama, o el burdeos con su trama en lo de la casa); la página nunca en el scroll cero
   en el iPhone (se queda un píxel bajada: comun.js), salvo en las pantallas de entrar; sin estirón elástico; las tiras de Safari;
   y los fijos (cortina, tapa, menús) sin sombra hacia abajo, sin fondo propio o al 99 % y sobresaliendo de la pantalla */
html, body { background-color: var(--nogal); background-image: linear-gradient(rgba(59,36,24,.8), rgba(59,36,24,.8)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cdefs%3E%3Cpattern id='s' width='4' height='4' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 4L4 0' stroke='%23000' stroke-opacity='.18' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='180' height='180' fill='%233B2418'/%3E%3Crect x='0' width='64' height='180' fill='%236B4429' fill-opacity='.5'/%3E%3Crect y='0' height='64' width='180' fill='%236B4429' fill-opacity='.5'/%3E%3Crect x='108' width='16' height='180' fill='%2323443A' fill-opacity='.75'/%3E%3Crect y='108' height='16' width='180' fill='%2323443A' fill-opacity='.75'/%3E%3Crect x='86' width='2' height='180' fill='%23C29A4E' fill-opacity='.8'/%3E%3Crect y='86' height='2' width='180' fill='%23C29A4E' fill-opacity='.8'/%3E%3Crect x='150' width='4' height='180' fill='%235A1F35' fill-opacity='.85'/%3E%3Crect y='150' height='4' width='180' fill='%235A1F35' fill-opacity='.85'/%3E%3Crect width='180' height='180' fill='url(%23s)'/%3E%3C/svg%3E"); background-size: auto, 58px 58px; }
body[data-cuenta] { background-color: var(--papel); background-image: none; }
/* Lo de la casa por dentro, en burdeos (Alejandro, 18-10): las pantallas de entrar y el centro de mando, con la trama burdeos del
   Design System (--tartan-burdeos). La pantalla de entrar no lleva fondo propio: la tela va en el fondo de toda la página */
html:has(.en-burdeos:not([hidden])), html:has(body[data-pagina="crm"]),
body[data-cuenta]:has(.entrada-c:not([hidden])), body[data-pagina="crm"] { background-color: var(--burdeos); background-image: linear-gradient(rgba(90,31,53,.76), rgba(90,31,53,.76)), var(--tartan-burdeos); background-size: auto, 58px 58px; }
body[data-cuenta]:has(.entrada-c:not([hidden])) main { background: transparent; }
.en-burdeos { background: transparent; }
.en-burdeos > .ts-trama { display: none; }
/* Las tiras de Safari (Alejandro, 18-10: «abajo, detrás de la barra de buscar, está fatal»): Safari lee los elementos fijos
   pegados a los bordes para colorear sus barras; sin ninguno, pinta su zona con el fondo de la página, un marrón liso aunque se
   esté leyendo una sección clara. Dos tiras fijas, transparentes e invisibles, arriba y abajo: las lee y deja ver la página */
.fijo-safari { display: none; position: fixed; left: 0; right: 0; height: 6px; background: transparent; z-index: 999; pointer-events: none; }
.fijo-safari.arriba { top: -2px; } .fijo-safari.abajo { bottom: -2px; }
/* Con la cortina puesta, las tiras toman su color (Alejandro, 19-10: «la pantalla de carga no pilla las esquinas en el iPhone»):
   Safari pinta sus barras con ellas y no con la cortina, y enseñaba la página detrás. Al irse, abajo se suelta primero (la
   cortina sube y destapa por abajo) y arriba al final; al venir, abajo en cuanto entra y arriba cuando ya tapa entera */
html.llega .fijo-safari, html.tapada .fijo-safari, html:has(.cortina.baja) .fijo-safari.abajo,
html:has(.cortina.sube) .fijo-safari.arriba { background: var(--nogal); }
@supports (-webkit-touch-callout: none) {
  .fijo-safari { display: block; }
  @media (max-width: 760px) {
    html { overscroll-behavior-y: none; }
    /* La pista (con 1 px Safari no se daba por bajada): 116 px de trama, dos casillas, por encima de la página, que se carga
       ya bajada a ella y no deja subir más arriba (comun.js): el tope de la página es el principio de la portada */
    body:not([data-cuenta]) { padding-top: 116px; }
  }
}

/* Fino en el móvil (Alejandro, 18-10: «las animaciones van como a pocos fotogramas»): sin el grano por encima de toda la página
   (obligaba a mezclar la pantalla entera en cada fotograma), la trama sin su leve desenfoque y el cristal del menú más ligero.
   En el ordenador, todo igual */
@media (hover: none), (max-width: 760px) {
  body::after { display: none; }
  .ts-trama { filter: none; }
}
@media (max-width: 760px) {
  .menu-v2.cabecera::after { -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); }
  .menu-v2 .desplegable { -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
}

/* ══ El chasis: cabecera, menú, cortina entre páginas y pie ══ */
/* La cabecera: el rótulo del escaparate (Alejandro, 2026-10-14). Simétrica: las páginas a los lados, el signo en el centro y un
   filete dorado fino debajo (sencillo y desvanecido en las puntas; Alejandro, 15-10: el doble no le convencía). Una franja propia de lado a lado, más oscura que la página (Alejandro, 2026-10-15: se confundía con
   el fondo y el estampado subía hasta arriba); al bajar solo se estrecha. */
.cabecera { position: fixed; z-index: 60; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent), color-mix(in srgb, var(--nogal) 62%, var(--negro));
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.7); }
.cabecera::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(194,154,78,.55) 20%, rgba(194,154,78,.55) 80%, transparent); pointer-events: none; }
.cabecera .barra { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding: 14px clamp(16px, 3vw, 44px); color: var(--sobre-oscuro); transition: padding .6s var(--curva); }
.cabecera.compacta .barra { padding-block: 8px; }
/* En el centro, el signo del logo (C157), en papel y con su trazo fino (C194): a la altura de la barra, el nombre debajo no se leería */
.cabecera .marca-c { display: flex; text-decoration: none; font-size: 44px; justify-self: center; padding-inline: 6px; transition: font-size .6s var(--curva); }
.cabecera.compacta .marca-c { font-size: 38px; }
.menu-total .marca-c { display: flex; text-decoration: none; }

/* El signo como trazo, para que se dibuje solo (la tarjeta del inicio) */
.ts-signo-trazo { display: block; height: 1em; width: auto; overflow: visible; }
.ts-signo-trazo path { fill: none; stroke: currentColor; stroke-width: 8.33; stroke-linecap: round; stroke-linejoin: round; }
.cabecera nav.menu-c { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); font: 700 14px/1 var(--font-palo); }
.cabecera .der { display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 2.2vw, 32px); }
.cabecera nav.menu-c a { position: relative; text-decoration: none; padding-block: 8px; color: var(--sobre-oscuro); }
/* Al pasar, la palabra se dora; la página en la que estás va dorada */
.cabecera nav.menu-c a:hover, .cabecera nav.menu-c a[aria-current="page"] { background: linear-gradient(180deg, var(--oro-5), var(--oro-3) 45%, var(--oro-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cabecera .abrir { display: none; }
@media (max-width: 980px) {
  .cabecera .barra { grid-template-columns: auto 1fr; padding-left: 20px; }
  .cabecera .marca-c { justify-self: start; }
  .cabecera nav.menu-c, .cabecera .cta-c { display: none; } .cabecera .abrir { display: inline-flex; }
}

/* Los botones que ya son una flecha redonda («siguiente») no llevan la flecha de los botones (C172) */
.ts-boton.flecha { padding-right: 0; }
.ts-boton.flecha::before { content: none; }

/* El menú nuevo (Alejandro, 2026-10-15, `menu-v2`): a la izquierda del logo, las cuatro páginas (en el móvil, un desplegable);
   en el centro, el signo; a la derecha, solo «Asesoría gratis» y el perfil (entrar o crear cuenta). */
.menu-v2 .izq { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.menu-v2 .der { gap: 10px; }
.menu-v2 .abrir-d { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer; font: 700 14px/1 var(--font-palo); color: var(--sobre-oscuro); }
.menu-v2 .abrir-d .rayas { position: relative; width: 20px; height: 12px; }
.menu-v2 .abrir-d .rayas::before, .menu-v2 .abrir-d .rayas::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--hilo); transition: transform .4s var(--curva), top .4s var(--curva); }
.menu-v2 .abrir-d .rayas::before { top: 2px; } .menu-v2 .abrir-d .rayas::after { top: 9px; }
.menu-v2.desplegado .abrir-d .rayas::before { top: 5.5px; transform: rotate(45deg); } .menu-v2.desplegado .abrir-d .rayas::after { top: 5.5px; transform: rotate(-45deg); }
.menu-v2 .asesoria { --alto-boton: 42px; padding: 0 3px 0 20px; font-size: 14px; border-color: rgba(194,154,78,.75); }
.menu-v2 .perfil { min-height: 42px; padding: 0 16px 0 12px; font-size: 14px; gap: 8px; }
.menu-v2 .perfil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.menu-v2 .perfil[aria-current="page"], .menu-v2 .asesoria[aria-current="page"] { border-color: var(--hilo); }
.menu-v2 .desplegable { display: none; }
@media (max-width: 980px) {
  .menu-v2 .barra { grid-template-columns: auto auto 1fr; padding-inline: clamp(12px, 3vw, 24px); gap: 10px; }
  .menu-v2 .marca-c { justify-self: start; }
  .menu-v2 .asesoria { white-space: nowrap; }
  .menu-v2 nav.menu-c { display: none; }
  .menu-v2 .abrir-d { display: inline-flex; }
  .menu-v2 .perfil { padding: 0; width: 42px; justify-content: center; }
  .menu-v2 .perfil span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu-v2 .desplegable { display: block; position: absolute; left: 0; right: 0; top: 100%; background: color-mix(in srgb, var(--nogal) 62%, var(--negro));
    padding: 18px clamp(16px, 5vw, 32px) 26px; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .5s var(--curva), visibility 0s .5s; box-shadow: 0 24px 40px -20px rgba(0,0,0,.7); }
  .menu-v2.desplegado .desplegable { clip-path: inset(0 0 -40px 0); visibility: visible; transition: clip-path .5s var(--curva), visibility 0s; }
  .menu-v2 .desplegable ul { display: grid; }
  .menu-v2 .desplegable li a { display: block; padding: 10px 0; text-decoration: none; font: 700 clamp(26px, 7vw, 34px)/1.15 var(--font-palo); letter-spacing: -.02em; color: var(--sobre-oscuro); }
  .menu-v2 .desplegable li a[aria-current="page"] { color: var(--hilo); }
  .menu-v2 .desplegable .otras { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(194,154,78,.35); }
  .menu-v2 .desplegable .otras li a { font: 400 16px/1.2 var(--font-palo); color: var(--avellana-clara); padding: 8px 0; }
}
@media (max-width: 440px) {
  .menu-v2 .asesoria { --alto-boton: 40px; padding: 0 3px 0 13px; gap: 10px; font-size: 13px; }
  .menu-v2 .abrir-d { font-size: 0; gap: 0; }
  .menu-v2 .marca-c { font-size: 34px; }
}
/* En el móvil, el menú abajo, a mano del pulgar (Alejandro, 17-10; de paso, el notch ya no tapa nada): la franja va pegada al
   borde de abajo, con su filete dorado encima, y el desplegable se abre hacia arriba */
@media (max-width: 760px) {
  .menu-v2.cabecera { top: auto; bottom: 0; padding-top: 0; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -14px 30px -18px rgba(0,0,0,.7); }
  .menu-v2.cabecera::after { top: -1px; bottom: auto; }
  .menu-v2 .desplegable { top: auto; bottom: 100%; clip-path: inset(100% 0 0 0); box-shadow: 0 -24px 40px -20px rgba(0,0,0,.7); }
  .menu-v2.desplegado .desplegable { clip-path: inset(-40px 0 0 0); }
  /* Flotante, de cristal (Alejandro, 18-10: «el menú queda rarísimo, hazlo flotante en liquid glass»): una píldora separada de
     los bordes, con la receta del cristal del Design System (ts-cristal / ts-boton): la página se ve borrosa detrás, un brillo
     fino arriba y la sombra que la despega. Sin el filete dorado de la franja. El desplegable, otra pieza de cristal encima. */
  /* El cristal de la barra va en su capa (::after) y no en la barra: si la barra desenfoca, lo que lleva dentro (el desplegable)
     ya no puede desenfocar la página y se leía lo de detrás */
  .menu-v2.cabecera { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding-bottom: 0; border-radius: var(--radio-pildora);
    background: none; box-shadow: none; isolation: isolate; }   /* sin sombra hacia abajo: Safari la cortaba en recto contra su barra */
  .menu-v2.cabecera::after { content: ""; position: absolute; inset: 0; height: auto; z-index: -1; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 55%, rgba(255,255,255,.10) 100%), rgba(30,20,14,.42);
    -webkit-backdrop-filter: blur(18px) saturate(1.7) brightness(1.04); backdrop-filter: blur(18px) saturate(1.7) brightness(1.04);
    border: 1px solid rgba(255,255,255,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.12), 0 -10px 28px -16px rgba(0,0,0,.5); }
  .menu-v2 .barra { padding: 6px 6px 6px 14px; }
  .menu-v2 .desplegable { left: 0; right: 0; bottom: calc(100% + 10px); border-radius: var(--radio-cristal);
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 55%), rgba(30,20,14,.55);
    -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 20px 44px -14px rgba(0,0,0,.6); }
  .menu-v2.desplegado .desplegable { clip-path: inset(-60px -20px -20px -20px round var(--radio-cristal)); }
  /* Que el final de cada página no quede debajo de la franja */
  .pie { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  /* Y arriba ya no hace falta el hueco de la cabecera: la primera sección empieza a su aire, respetando el notch */
  main > section:first-child { padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important; }
}

/* El menú abierto: el escaparate a oscuras. Las páginas en el centro; la que señalas se dora y se enciende la luz detrás */
.menu-total { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto 1fr auto; padding: calc(22px + env(safe-area-inset-top, 0px)) clamp(16px, 5vw, 60px) calc(26px + env(safe-area-inset-bottom, 0px));
  background: #1d0f08; color: var(--sobre-oscuro); opacity: 0; visibility: hidden; transition: opacity .7s var(--curva), visibility 0s .7s; }
.menu-total.abierto { opacity: 1; visibility: visible; transition: opacity .7s var(--curva), visibility 0s; }
.menu-total .forro { position: absolute; inset: 0; opacity: .16; }
.menu-total .luz-m { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--curva);
  background: radial-gradient(circle 300px at var(--lx, 50%) var(--ly, 50%), rgba(255,206,140,.2), rgba(255,206,140,0) 70%); }
.menu-total.con-luz .luz-m { opacity: 1; }
.menu-total > * { position: relative; }
.menu-total > .forro, .menu-total > .luz-m { position: absolute; }
.menu-total .arriba { display: flex; justify-content: space-between; align-items: center; }
.menu-total ul { align-self: center; justify-self: center; text-align: center; display: grid; gap: clamp(0px, .6vh, 6px); }
.menu-total li a { display: inline-block; text-decoration: none; font-size: clamp(34px, 6vh, 66px); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; color: rgba(251,247,240,.42); transition: color .4s var(--curva); }
.menu-total li a[aria-current="page"] { color: rgba(251,247,240,.85); }
.menu-total ul:hover li a:not(.oro) { color: rgba(251,247,240,.2); }
.menu-total li a.oro { color: transparent; }
.menu-total .abajo { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; color: var(--avellana-clara); font-size: 14px; }

/* La cortina entre páginas: el forro sube y baja con el logo */
/* Al llegar pulsando un enlace, la página sale tapada del color de la cortina hasta que comun.js la pone (preparar-web.py escribe
   la clase en la cabeza); si algo fallara, se destapa sola a los 3 s */
/* (19-10) Ya no es una tapa lisa aparte: es la propia cortina, escrita en la página, puesta desde el primer instante; así no hay
   salto entre la tapa y la cortina con su trama y su logo */
html.llega .cortina { display: grid; transform: none; animation: llega-fuera 0s 8s forwards; }
@keyframes llega-fuera { to { visibility: hidden; } }
/* Escondida del todo mientras no se usa (18-10): en el iPhone la pantalla es más alta que lo que el navegador cree y el borde de
   arriba de la cortina asomaba fijo debajo del menú. Solo se hace visible durante el cambio de página (comun.js). */
/* Sobresale por arriba y por abajo (en el iPhone la pantalla sigue detrás de las barras de Safari) y al 99 %: opaca del todo, Safari
   la recortaba en el borde de su barra. Cuando no se usa, fuera del todo (display: none): si no, Safari teñía sus barras con ella */
.cortina { position: fixed; inset: -20vh 0; z-index: 90; display: none; place-items: center; background: var(--nogal); transform: translateY(100%); pointer-events: none; will-change: transform; isolation: isolate; }
/* Opaca del todo (Alejandro, 19-10: «no es opaca», visto en Opera en el ordenador); solo en el iPhone, al 99 %, porque Safari
   recorta en el borde de su barra los fijos opacos del todo */
@supports (-webkit-touch-callout: none) { .cortina { background: rgba(59,36,24,.99); } }
/* Se mueve con animaciones del propio navegador, no con GSAP (19-10: «a veces se ralla y como que se corta»): GSAP la movía
   fotograma a fotograma desde la página, y mientras la página nueva se montaba (letras, vídeos, imágenes) se atascaba. Así va
   por su cuenta aunque la página esté ocupada. Mismo paso que antes (expo.inOut) */
.cortina.baja { display: grid; animation: cortina-baja .8s cubic-bezier(.87, 0, .13, 1) forwards; }
.cortina.sube { display: grid; animation: cortina-sube 1.1s cubic-bezier(.87, 0, .13, 1) .15s both; }
@keyframes cortina-baja { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cortina-sube { from { transform: none; } to { transform: translateY(-100%); } }
.cortina .forro { position: absolute; inset: 0; opacity: .25; }
.cortina .ts-logo { position: relative; font-size: clamp(130px, 18vw, 220px); }

/* El pie, igual en todas las páginas. Está en otra capa, detrás de la página: la página sube como un telón y lo deja ver,
   y él viene desde el fondo (se acerca y se aclara). Solo si cabe entero en la pantalla; si no, va normal. */
main { position: relative; z-index: 1; background: var(--nogal); }
.pie { position: relative; background: #2a170d; color: var(--avellana-clara); padding-block: clamp(80px, 10vw, 120px) calc(40px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.pie.detras { position: sticky; bottom: 0; z-index: 0; }

.pie::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #0d0704; opacity: var(--velo, 0); }
.pie .columnas { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(24px, 4vw, 60px); }
/* El logo, a la izquierda del pie (en lugar del lema y del logo grande de abajo) */
.pie .marca-pie a { display: inline-block; color: inherit; text-decoration: none; }
.pie .marca-pie .ts-logo { font-size: clamp(130px, 12.2vw, 190px); }   /* tan alto como la columna de páginas */
@media (max-width: 860px) { .pie .marca-pie .ts-logo { font-size: 130px; } }
.pie h4 { font: 700 12px/1 var(--font-palo); letter-spacing: .12em; text-transform: uppercase; color: var(--sobre-oscuro); margin-bottom: 18px; }
.pie ul { display: grid; gap: 10px; font-size: 15px; }
.pie ul a { text-decoration: none; }
.pie ul a:hover { color: var(--sobre-oscuro); }
.pie .final { margin-top: clamp(50px, 6vw, 80px); padding-top: 20px; border-top: 1px solid rgba(217,201,176,.16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; }
@media (max-width: 860px) { .pie .columnas { grid-template-columns: 1fr 1fr; } .pie .columnas > :first-child { grid-column: 1 / -1; } }
/* En el móvil, arriba los menús y el contacto; abajo el logo, ocupando un cuadrado de lado a lado (Alejandro, 17-10) */
@media (max-width: 760px) {
  .pie .marca-pie { order: 9; grid-column: 1 / -1; aspect-ratio: 1; display: grid; place-items: center; container-type: inline-size; margin-top: 10px; }
  .pie .marca-pie a { display: grid; place-items: center; width: 100%; height: 100%; }
  .pie .marca-pie .ts-logo { font-size: 66cqi; }
}

/* ══ Piezas de cada estilo ══ */

/* La ventana iluminada (estilo 2 y la mezcla): el paño encima, el forro debajo, la luz y una rejilla finísima */
.escenario { position: relative; overflow: hidden; }
.escenario .forro { position: absolute; inset: 0; }
.escenario .pano { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #432a1c, var(--nogal) 70%);
  -webkit-mask-image: radial-gradient(circle var(--radio, 240px) at var(--lx, 70%) var(--ly, 40%), rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 50%, #000 100%);
          mask-image: radial-gradient(circle var(--radio, 240px) at var(--lx, 70%) var(--ly, 40%), rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 50%, #000 100%); }
.escenario .calor { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle calc(var(--radio, 240px) * 1.7) at var(--lx, 70%) var(--ly, 40%), rgba(255,206,140,.09), rgba(255,206,140,0) 75%); }
.escenario canvas.rejilla { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* La misma ventana sobre el paño verde: el paño es verde hondo y la luz deja ver un verde más claro */
.escenario.en-verde { background: #2c5447; }
.escenario.en-verde .pano { background: radial-gradient(ellipse at 50% 40%, var(--verde), #142a23 75%); }
.escenario > .envoltura, .escenario > .contenido { position: relative; z-index: 3; }

/* La tarjeta de cristal que se inclina (estilo 1) */
.tarjeta { position: relative; padding: clamp(30px, 4vw, 48px) clamp(24px, 3.6vw, 44px); border-radius: 32px; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.8vw, 20px); text-align: center; transform-style: preserve-3d; }
.tarjeta .ts-logo { font-size: clamp(130px, 12vw, 180px); }
.tarjeta .t { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; max-width: 30ch; }
.tarjeta .p { font-size: 14px; color: var(--avellana-clara); }
.tarjeta .linea-hilo { width: 64px; border-top: 1.5px dashed var(--hilo); opacity: .8; }

/* Celdas que se encienden */
.celdas { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea); }
.celda { position: relative; padding: clamp(30px, 4vw, 46px) clamp(20px, 3vw, 38px) clamp(60px, 8vw, 110px); border-right: 1px solid var(--linea); overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.celda:last-child { border-right: 0; }
.celda::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--curva); pointer-events: none; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(194,154,78,.2), rgba(194,154,78,0) 70%); }
.celda:hover::before { opacity: 1; }
.celda .t { font-size: clamp(21px, 2vw, 26px); font-weight: 700; color: var(--nogal); }
.celda .l { font-size: 16px; line-height: 1.55; color: var(--tinta-suave); max-width: 32ch; }
.celda .esq { position: absolute; top: -3px; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--cuero); }

/* La mesa de corte: madera a rayas, cinta métrica y tiza (estilo 3) */
.madera { position: absolute; inset: 0; background:
  repeating-linear-gradient(92deg, rgba(0,0,0,0) 0 22px, rgba(0,0,0,.10) 22px 23px, rgba(255,255,255,.03) 23px 46px, rgba(0,0,0,.06) 46px 60px),
  radial-gradient(ellipse at 75% 30%, rgba(107,68,41,.75), transparent 60%), radial-gradient(ellipse at 10% 90%, rgba(107,68,41,.45), transparent 55%); }
.recorrido { display: grid; grid-template-columns: 70px 1fr; gap: clamp(20px, 4vw, 50px); }
.cinta-v { position: relative; width: 56px; background: var(--cinta); border-radius: 2px; box-shadow: 0 20px 30px -10px rgba(0,0,0,.6); overflow: hidden; }
.cinta-v svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Se llena bajando de arriba (transform, no altura: en el iPhone, cambiar la altura en cada fotograma lo trababa, 19-10) */
.cinta-v .lleno { position: absolute; left: 0; right: 0; top: 0; height: 100%; transform: translateY(-100%); will-change: transform; background: linear-gradient(180deg, rgba(90,31,53,0), rgba(90,31,53,.2)); border-bottom: 2px solid var(--burdeos); }
.cinta-v .chapa { position: absolute; left: 0; right: 0; top: 0; height: 16px; background: linear-gradient(180deg, #d9b36a, #8a6427); }
.marcas { display: grid; gap: clamp(56px, 7vw, 100px); padding-block: 26px; }
.marca { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; }
.marca .cm { font: 700 clamp(44px, 5.2vw, 70px)/1 var(--font-palo); letter-spacing: -.03em; color: var(--hilo); font-variant-numeric: tabular-nums; min-width: 3ch; }
.marca .cm small { font-size: .35em; letter-spacing: 0; margin-left: 4px; color: var(--avellana-clara); }
.marca .t { font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; }
.marca .l { margin-top: 10px; color: var(--avellana-clara); max-width: 46ch; }
.tiza { display: block; width: 180px; height: 16px; margin-top: 14px; overflow: visible; }
.tiza path { fill: none; stroke: var(--papel); stroke-width: 3; stroke-linecap: round; filter: url(#rugoso); opacity: .9; }
.claro .tiza path, .claro-h .tiza path { stroke: var(--cuero); }
.cinta-h { display: block; width: 100%; height: 64px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.retal { position: absolute; box-shadow: 0 30px 40px -18px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.25); will-change: transform; }
.alfiler { position: absolute; width: 34px; height: 60px; z-index: 4; pointer-events: none; }
.patron { position: relative; padding: 44px 30px 36px; background: #e9dcc4; color: var(--tinta); clip-path: polygon(0 6%, 12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%); transition: transform .8s var(--curva); display: flex; flex-direction: column; gap: 12px; }
.patron:hover { transform: translateY(-8px) rotate(.6deg); }
.patron::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(42,31,24,.4); clip-path: inherit; pointer-events: none; }
.patron .rot { font: 400 32px/1 var(--font-manuscrita); color: var(--burdeos); }
.patron .t { font-size: 23px; font-weight: 700; color: var(--nogal); }
.patron .l { font-size: 16px; line-height: 1.55; color: var(--tinta-suave); }
.patron .precio-p { margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(42,31,24,.3); font: 400 40px/1 var(--font-manuscrita); color: var(--burdeos); }
.regla { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: 30px; background: var(--cinta); box-shadow: 4px 0 18px rgba(0,0,0,.25); overflow: hidden; }
.regla svg { position: absolute; left: 0; top: 0; width: 30px; will-change: transform; }
.regla .marcador { position: absolute; left: 0; right: -8px; top: 50%; height: 2px; background: var(--burdeos); }
.valor-regla { position: fixed; z-index: 51; left: 36px; top: 50%; transform: translateY(-50%); font: 700 12px/1 var(--font-palo); color: var(--sobre-oscuro); background: var(--burdeos); padding: 6px 8px; border-radius: 2px; font-variant-numeric: tabular-nums; }
body.con-regla { padding-left: 30px; }
@media (max-width: 760px) { .regla, .valor-regla { display: none; } body.con-regla { padding-left: 0; } }
/* La hoja ya no es una libreta (renglones azules y margen rojo): es el papel de carta de la casa (C168, el de `ts-nota`) */
.hoja { position: relative; color: var(--tinta); padding: clamp(30px, 5vw, 56px) clamp(20px, 5vw, 60px); border-radius: 3px;
  background-color: var(--marfil); background-image: var(--textura-nota); box-shadow: var(--sombra-nota); }
.hoja .cinta-top { position: absolute; left: -3%; width: 106%; top: -24px; height: 48px; rotate: -1.2deg; filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }

/* Tablas, preguntas y formulario (comunes) */
.tabla { font-variant-numeric: tabular-nums; }
.fila { position: relative; display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 24px; align-items: baseline; padding: clamp(20px, 2.4vw, 30px) 0; border-top: 1px solid var(--linea); overflow: hidden; }
.fila:last-of-type { border-bottom: 1px solid var(--linea); }
.fila::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(194,154,78,.15), transparent); transform: translateX(-100%); transition: transform .9s var(--curva); pointer-events: none; }
.fila:hover::before { transform: translateX(100%); }
.fila .que { font-size: clamp(19px, 2vw, 26px); font-weight: 700; color: var(--nogal); }
.fila .es { color: var(--tinta-suave); font-size: 16px; }
.fila .cuanto { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.02em; color: var(--nogal); }
.preg { border-top: 1px solid var(--linea); }
.preg:last-child { border-bottom: 1px solid var(--linea); }
.preg button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; background: none; border: 0; cursor: pointer; text-align: left; font: 700 clamp(18px, 1.7vw, 21px)/1.3 var(--font-palo); color: var(--nogal); }
.preg .mas { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--campo-borde); transition: transform .6s var(--curva), background .3s, color .3s; font-weight: 400; font-size: 21px; }
.preg button:hover .mas { background: var(--nogal); color: var(--papel); }
.preg button[aria-expanded="true"] .mas { transform: rotate(45deg); }
.preg [data-respuesta] { padding: 0 0 24px; color: var(--tinta-suave); font-size: 17px; line-height: 1.6; overflow: hidden; }
.formu { background: var(--papel); color: var(--tinta); border-radius: 24px; padding: clamp(24px, 3.2vw, 36px); display: grid; gap: 16px; box-shadow: inset 0 1px 0 #fff, 0 50px 90px -30px rgba(0,0,0,.7); }
.formu .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formu .dos > *, .ts-campo { min-width: 0; }
.ts-campo input, .ts-campo select, .ts-campo textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.formu .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.formu .aviso { font-size: 15px; color: var(--verde); font-weight: 700; }
@media (max-width: 600px) { .formu .dos { grid-template-columns: 1fr; } }

/* El hilo, el albarán, las etiquetas y los botones de chaqueta (estilo 1) */
.hilo { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.hilo .puntada { fill: none; stroke: var(--hilo); stroke-width: 1.6; stroke-dasharray: 7 6; stroke-linecap: round; }
.hilo .mascara { fill: none; stroke: #fff; stroke-width: 10; }
.hilo .nudo { fill: var(--hilo); }
.con-hilo .envoltura, .con-hilo .sobre-hilo { position: relative; z-index: 2; }
.albaran { position: relative; background: #f8f3ea; color: var(--tinta); padding: clamp(32px, 5vw, 58px) clamp(20px, 5vw, 64px); border-radius: 3px; box-shadow: 0 1px 0 rgba(59,36,24,.08), 0 40px 70px -30px rgba(59,36,24,.45), 0 10px 20px -12px rgba(59,36,24,.2); }
.albaran::before { content: ""; position: absolute; inset: 12px; border: 1.5px dashed var(--burdeos); opacity: .45; pointer-events: none; }
.albaran .cab-a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--linea); }
.albaran .cab-a .ts-nombre { font-size: 21px; color: var(--nogal); }
.albaran .cab-a .ts-nombre i { color: var(--cuero); }
.albaran .cab-a .mano { font-size: 42px; color: var(--oro-claro); }
.albaran .grupo { margin-top: 30px; font: 400 34px/1 var(--font-manuscrita); color: var(--burdeos); }
.etiq { position: relative; transform-origin: 50% 0; transition: transform .9s var(--curva); padding-top: 54px; }
.etiq:hover { transform: rotate(-3deg); }
.etiq .cordel { position: absolute; left: 50%; top: 0; height: 54px; border-left: 1.5px solid var(--cuero); opacity: .6; }
.etiq .carton { position: relative; background: var(--papel); padding: 40px 26px 28px; border-radius: 4px 4px 6px 6px; clip-path: polygon(14% 0, 86% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); display: flex; flex-direction: column; gap: 10px; filter: drop-shadow(0 18px 24px rgba(59,36,24,.18)); color: var(--tinta); }
.etiq .carton::before { content: ""; position: absolute; left: 50%; top: 14px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--cuero); background: var(--papel-hondo); }
.etiq .t { font-size: 22px; font-weight: 700; color: var(--nogal); }
.etiq .l { font-size: 15.5px; line-height: 1.5; color: var(--tinta-suave); }
.boton-chaqueta { width: 120px; height: 120px; position: relative; flex: none; filter: drop-shadow(0 16px 22px rgba(20,10,5,.45)); }
.boton-chaqueta svg { width: 100%; height: 100%; display: block; }

/* El escaparate, el oro, el toldo, las vitrinas, el tablero y las etiquetas colgadas (estilo 4) */
.oro { background: linear-gradient(100deg, var(--oro-1) 0%, var(--oro-2) 18%, var(--oro-3) 32%, var(--oro-4) 46%, var(--oro-5) 52%, var(--oro-2) 62%, var(--oro-1) 80%, var(--oro-3) 100%);
  background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(60,38,10,.9)) drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.oro.ts-nombre span, .oro.ts-nombre i, .oro .ts-nombre span, .oro .ts-nombre i { color: transparent; }
.toldo { position: relative; z-index: 4; height: clamp(56px, 7vw, 96px); transform-origin: 50% 0; }
.toldo svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 16px 16px rgba(0,0,0,.45)); }
.escaparate { position: relative; overflow: hidden; border-radius: 4px; border: clamp(8px, 1.4vw, 16px) solid #2a170d; box-shadow: inset 0 0 0 2px var(--hilo), 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px #1a0d06; background: var(--nogal); }
.escaparate .interior { position: absolute; inset: -5%; filter: url(#cristal-antiguo) brightness(.6) saturate(1.1); }
.escaparate .penumbra { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(255,214,150,.16), transparent 60%), linear-gradient(180deg, rgba(10,6,3,.2), rgba(10,6,3,.55)); }
.escaparate .reflejo { position: absolute; inset: -30%; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.09) 41%, rgba(255,255,255,.03) 45%, transparent 47%, transparent 55%, rgba(255,255,255,.06) 57%, transparent 60%); animation: reflejo 11s var(--curva-suave) infinite alternate; }
@keyframes reflejo { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
.escaparate > .dentro { position: relative; z-index: 3; }
.cartel { position: absolute; z-index: 5; width: clamp(130px, 13vw, 180px); transform-origin: 50% -56px; cursor: pointer; background: none; border: 0; padding: 0; }
.cartel .cordel { position: absolute; left: 50%; top: -56px; width: 0; height: 56px; }
.cartel .cordel::before, .cartel .cordel::after { content: ""; position: absolute; top: 0; height: 62px; border-left: 1.5px solid var(--avellana-clara); transform-origin: 0 0; }
.cartel .cordel::before { transform: rotate(32deg); } .cartel .cordel::after { transform: rotate(-32deg); }
.cartel .placa { position: relative; display: grid; place-items: center; aspect-ratio: 2 / 1; border-radius: 10px; background: var(--papel); color: var(--burdeos); border: 3px solid var(--burdeos); box-shadow: 0 20px 30px -10px rgba(0,0,0,.6), inset 0 0 0 4px var(--papel), inset 0 0 0 5px rgba(90,31,53,.4); font: 400 clamp(34px, 3.6vw, 48px)/1 var(--font-manuscrita); transition: transform .8s var(--curva); transform-style: preserve-3d; }
.cartel .placa .dorso { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; background: var(--burdeos); color: var(--papel); transform: rotateY(180deg); backface-visibility: hidden; }
.cartel .placa .frente { backface-visibility: hidden; }
.cartel[aria-pressed="true"] .placa { transform: rotateY(180deg); }
.zocalo { height: clamp(36px, 4.4vw, 60px); background: repeating-linear-gradient(90deg, #2a170d 0 2px, #3b2418 2px 60px); border-top: 2px solid var(--hilo); }
.caja { position: relative; aspect-ratio: 4 / 3; border-radius: 6px 6px 2px 2px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,255,255,.2) 50%, rgba(255,255,255,.55)), var(--papel-hondo); border: 1px solid rgba(59,36,24,.18); box-shadow: inset 0 1px 0 #fff, inset 0 -18px 30px rgba(59,36,24,.08), 0 24px 40px -24px rgba(59,36,24,.5); }
.caja::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.55) 45%, transparent 55%); transform: translateX(-100%); transition: transform 1.2s var(--curva); pointer-events: none; }
:hover > .caja::before, .caja:hover::before { transform: translateX(100%); }
.balda { height: 12px; background: linear-gradient(180deg, #6b4429, #3b2418); border-radius: 0 0 3px 3px; box-shadow: 0 10px 14px -6px rgba(59,36,24,.5); }
.tablero { padding: clamp(16px, 2.2vw, 28px); border-radius: 6px; background: linear-gradient(180deg, #6b4429, #3b2418); box-shadow: 0 40px 70px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.15); }
.fieltro { padding: clamp(24px, 4vw, 50px) clamp(18px, 4vw, 54px); border-radius: 3px; background-color: #1d3029; background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 26px, rgba(0,0,0,.45) 26px 28px, rgba(255,255,255,.04) 28px 29px); box-shadow: inset 0 0 40px rgba(0,0,0,.6); display: grid; gap: clamp(24px, 3.2vw, 38px); }
.fieltro .letras { font: 700 clamp(20px, 2.6vw, 34px)/1.15 var(--font-palo); text-transform: uppercase; letter-spacing: .14em; color: #f4f0e8; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.fieltro .letras .ch { display: inline-block; }
.colgada { position: relative; padding-top: 60px; transform-origin: 50% 0; }
.colgada::before { content: ""; position: absolute; left: 50%; top: 0; height: 64px; border-left: 1.5px solid var(--cuero); }
.colgada .tag { position: relative; background: var(--papel); padding: 40px 20px 24px; text-align: center; clip-path: polygon(50% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); filter: drop-shadow(0 16px 18px rgba(59,36,24,.28)); display: flex; flex-direction: column; gap: 8px; color: var(--tinta); }
.colgada .tag::before { content: ""; position: absolute; left: 50%; top: 12px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--papel-hondo); border: 2px solid var(--hilo); }
.barra-oro { height: 10px; border-radius: 6px; background: linear-gradient(180deg, var(--oro-3), var(--oro-1)); box-shadow: 0 6px 10px rgba(59,36,24,.35); }

/* El dato (estilo 2): piezas sobre la rejilla con su gráfico */
.ficha-dato { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 30px); border-radius: 22px; text-decoration: none; color: inherit; min-height: 300px; }
.ficha-dato .cifra { font-size: clamp(54px, 6vw, 88px); font-weight: 700; letter-spacing: -.05em; line-height: .9; color: var(--oro-3); }
.ficha-dato svg.graf { width: 100%; height: 80px; overflow: visible; margin-top: auto; }
.ficha-dato svg.graf path { fill: none; stroke: var(--hilo); stroke-width: 2; }
.ficha-dato svg.graf .area { fill: rgba(194,154,78,.12); stroke: none; }
.ficha-dato .meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--avellana-clara); }

/* En los titulares enormes, la palabra a mano crece menos para no pisar la línea de abajo */
.d-1 .ts-destacado { font-size: 1.1em; line-height: .9; }
.d-2 .ts-destacado { font-size: 1.22em; line-height: .9; }
.d-3 .ts-destacado { font-size: 1.35em; line-height: .9; }

/* Cabeza de página común: titular grande con su número a mano */
.cabeza { padding-top: clamp(150px, 18vw, 220px); padding-bottom: clamp(70px, 9vw, 120px); }
.cabeza .sub { font: 400 clamp(36px, 4.4vw, 58px)/1 var(--font-manuscrita); color: var(--hilo); }
.cabeza h1 { margin-top: 10px; max-width: 14ch; }
.cabeza .entrada { margin-top: clamp(24px, 3vw, 36px); color: var(--avellana-clara); }
.siguiente { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: clamp(60px, 8vw, 100px); text-decoration: none; border-top: 1px solid rgba(217,201,176,.18); }
.siguiente .mano { font-size: clamp(34px, 3.4vw, 44px); color: var(--hilo); }
.siguiente .t { font-size: clamp(34px, 5.4vw, 80px); font-weight: 700; letter-spacing: -.035em; line-height: 1; transition: transform .8s var(--curva); }
.siguiente:hover .t { transform: translateX(14px); }
.siguiente .flecha { flex: none; width: clamp(60px, 7vw, 96px); height: clamp(60px, 7vw, 96px); border-radius: 50%; display: grid; place-items: center; }
.siguiente .flecha svg { width: 40%; }
.siguiente .flecha svg path { fill: none; stroke: currentColor; stroke-width: 2; }

@media (max-width: 860px) {
  .celdas { grid-template-columns: 1fr; } .celda { border-right: 0; border-bottom: 1px solid var(--linea); }
  .fila { grid-template-columns: 1fr auto; } .fila .es { grid-column: 1; grid-row: 2; }
  .recorrido { grid-template-columns: 40px 1fr; } .cinta-v { width: 34px; }
  .marca { grid-template-columns: 1fr; gap: 8px; }
}

/* El botón de sonido de los vídeos con voz (data-sonido, en comun.js): una píldora de cristal en la esquina de abajo */
.sonido-v { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px 0 11px; border-radius: 999px; cursor: pointer;
  font: 700 13px/1 var(--font-palo); color: var(--sobre-oscuro); background: rgba(30,18,10,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.35); box-shadow: 0 6px 16px -6px rgba(0,0,0,.6); transition: background .3s ease; }
.sonido-v:hover { background: rgba(30,18,10,.75); }
.sonido-v:focus-visible { outline: 3px solid var(--hilo); outline-offset: 2px; }
.sonido-v svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sonido-v svg path:first-child { fill: currentColor; }