/* DSolutions — websites-fx3.css · GENERADO por fx2.py desde fx3/*.css (no editar aquí). */

/* ---- lote a_ventas ---- */
/* LOTE A — confetti, seal, stub, fillcup, wizard, qtyart, otp. Prefijo wx3-a- / keyframes wx3a. */

/* ---------- confeti al reservar ---------- */
.wx3-a-cf { position: absolute; inset: 0; display: grid; place-items: center; }
.wx3-a-cf-cv { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.wx3-a-cf-card { position: relative; z-index: 2; width: min(230px, 72cqw); padding: 18px 20px 20px; border-radius: 16px; background: #F7F3EA; color: #0F1B2D; text-align: center; box-shadow: 0 20px 46px rgba(0, 0, 0, 0.45); }
.wx3-a-cf-k { margin: 0 0 4px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8A6A2E; }
.wx3-a-cf-card h4 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.wx3-a-cf-sub { margin: 0 0 14px; font-size: 12.5px; color: rgba(15, 27, 45, 0.65); }
.wx3-a-cf-b { position: relative; display: grid; width: 100%; height: 42px; border: 0; border-radius: 11px; background: #E3B45C; color: #0F1B2D; font: 700 14.5px/1 Inter, system-ui, sans-serif; cursor: pointer; overflow: hidden; transition: background 0.3s, color 0.3s, transform 0.15s; }
.wx3-a-cf-b:active { transform: scale(0.97); }
.wx3-a-cf-b > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.18s, transform 0.22s; }
.wx3-a-cf-t2 { opacity: 0; transform: translateY(8px); }
.wx3-a-cf-t2 i { width: 16px; height: 16px; }
.wx3-a-cf-t2 svg { width: 100%; height: 100%; }
.wx3-a-cf-b.is-on { background: #2F9E61; color: #fff; }
.wx3-a-cf-b.is-on .wx3-a-cf-t1 { opacity: 0; transform: translateY(-8px); }
.wx3-a-cf-b.is-on .wx3-a-cf-t2 { opacity: 1; transform: none; }

/* ---------- sello de cera verificado ---------- */
.wx3-a-sl { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 6%; }
.wx3-a-sl-card { position: relative; width: min(280px, 84cqw); padding: 16px 18px 18px; border-radius: 14px; background: #F7F3EA; color: #0F1B2D; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); }
.wx3-a-sl-card.is-hit { animation: wx3aSlHit 0.26s ease; }
@keyframes wx3aSlHit { 30% { transform: scale(0.985) rotate(-0.4deg); } 60% { transform: scale(1.01); } 100% { transform: none; } }
.wx3-a-sl-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wx3-a-sl-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #4A8AD8; color: #fff; display: grid; place-items: center; font: 700 14px/1 Inter, system-ui, sans-serif; }
.wx3-a-sl-top b { font-size: 14px; }
.wx3-a-sl-stars { font-size: 11px; color: #E3B45C; letter-spacing: 1px; }
.wx3-a-sl-txt { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(15, 27, 45, 0.8); }
.wx3-a-sl-seal { position: absolute; left: -14px; top: -18px; z-index: 4; width: 78px; height: 78px; padding: 0; border: 0; background: transparent; cursor: pointer; color: #F7F3EA; opacity: 0; transform: translateY(-160%) rotate(38deg) scale(0.5); }
.wx3-a-sl-seal.is-drop { opacity: 1; transform: translateY(0) rotate(11deg) scale(1); transition: transform 0.68s cubic-bezier(0.22, 1.6, 0.4, 1), opacity 0.3s; }
.wx3-a-sl-seal svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45)); }
.wx3-a-sl-ring { fill: #C0392B; }
.wx3-a-sl-word { font: 700 9.5px/1 'JetBrains Mono', monospace; fill: #F7E7C8; letter-spacing: 0.06em; }
.wx3-a-sl-check { stroke: #F7E7C8; }
@container (max-width: 520px) { .wx3-a-sl-seal { width: 60px; height: 60px; left: -8px; top: -12px; } }

/* ---------- talón que se arranca ---------- */
.wx3-a-tb { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 4%; }
.wx3-a-tb-tk { position: relative; display: flex; width: min(340px, 92cqw); border-radius: 16px; overflow: hidden; background: #F7F3EA; color: #0F1B2D; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); }
.wx3-a-tb-main { flex: 1; padding: 16px 14px 16px 18px; min-width: 0; }
.wx3-a-tb-k { margin: 0 0 4px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8A6A2E; }
.wx3-a-tb-main h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.wx3-a-tb-dl { margin: 0 0 8px; display: grid; gap: 4px; }
.wx3-a-tb-dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.wx3-a-tb-dl dt { margin: 0; color: rgba(15, 27, 45, 0.55); }
.wx3-a-tb-dl dd { margin: 0; font-weight: 600; }
.wx3-a-tb-code { margin: 0; font-size: 11px; color: rgba(15, 27, 45, 0.5); }
.wx3-a-tb-stub { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px 0; border: 0; border-left: 2px dashed rgba(15, 27, 45, 0.28); background: #EDE4CC; color: #0F1B2D; cursor: pointer; transition: transform 0.5s cubic-bezier(0.5, -0.4, 0.6, 1.3), opacity 0.4s; touch-action: none; }
.wx3-a-tb-stub-lab { writing-mode: vertical-rl; letter-spacing: 0.14em; font: 700 10px/1 Inter, system-ui, sans-serif; text-transform: uppercase; }
.wx3-a-tb-arrow { font-size: 14px; animation: wx3aTbArrow 1.6s ease-in-out infinite; }
@keyframes wx3aTbArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.wx3-a-tb-tk.is-torn .wx3-a-tb-stub { transform: translateY(230%) rotate(24deg); opacity: 0; }
.wx3-a-tb-msg { position: absolute; left: 50%; bottom: 7%; z-index: 3; margin: 0; padding: 8px 14px; border-radius: 999px; background: #0F1B2D; color: #F7F3EA; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translate(-50%, 8px); transition: opacity 0.3s, transform 0.3s; white-space: nowrap; }
.wx3-a-tb-msg.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .wx3-a-tb-arrow { animation: none; } }

/* ---------- cupos que se llenan ---------- */
.wx3-a-fc { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto auto; place-items: center; gap: 10px; padding: 14px 0 56px; }
.wx3-a-fc-jar { width: min(108px, 30cqw); height: auto; overflow: visible; }
.wx3-a-fc-outline, .wx3-a-fc-lid { fill: none; stroke: rgba(247, 243, 234, 0.55); stroke-width: 3; }
.wx3-a-fc-lvl { transition: none; }
.wx3-a-fc-liquid { fill: #4A8AD8; }
.wx3-a-fc-wave { fill: #5C99E0; opacity: 0.85; animation: wx3aFcWave 2.6s linear infinite; }
@keyframes wx3aFcWave { from { transform: translateX(0); } to { transform: translateX(-80px); } }
.wx3-a-fc.is-full .wx3-a-fc-liquid { fill: #2F9E61; }
.wx3-a-fc.is-full .wx3-a-fc-wave { fill: #3CB273; }
.wx3-a-fc-txt { text-align: center; }
.wx3-a-fc-k { margin: 0 0 2px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wx-muted); }
.wx3-a-fc-n { display: block; font: 700 20px/1 'JetBrains Mono', monospace; color: var(--wx-text); }
.wx3-a-fc-full { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: #6FCB98; opacity: 0; transition: opacity 0.3s; }
.wx3-a-fc-full.is-on { opacity: 1; }
.wx3-a-fc-b { padding: 9px 18px; border: 0; border-radius: 999px; background: #E3B45C; color: #0F1B2D; font: 700 13px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: opacity 0.3s, transform 0.15s; }
.wx3-a-fc-b:active { transform: scale(0.96); }
.wx3-a-fc-b:disabled { opacity: 0.45; cursor: default; }
@media (prefers-reduced-motion: reduce) { .wx3-a-fc-wave { animation: none; } }

/* ---------- cotizador de 3 preguntas ---------- */
.wx3-a-wz { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; padding: 16px 6% 16px; color: var(--wx-text); }
.wx3-a-wz-k { margin: 0; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #F3CF86; }
.wx3-a-wz-bar { height: 4px; border-radius: 999px; background: rgba(241, 236, 224, 0.14); overflow: hidden; }
.wx3-a-wz-bar > i { display: block; height: 100%; width: 25%; border-radius: 999px; background: #E3B45C; transition: width 0.35s ease; }
.wx3-a-wz-win { position: relative; overflow: hidden; }
.wx3-a-wz-track { display: flex; width: 400%; height: 100%; transition: transform 0.5s cubic-bezier(0.3, 0.9, 0.4, 1); }
.wx3-a-wz-step { flex: none; width: 25%; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding-right: 6%; min-width: 0; }
.wx3-a-wz-q { margin: 0; font-size: clamp(15px, 3.6cqw, 19px); font-weight: 700; line-height: 1.2; text-wrap: balance; }
.wx3-a-wz-opts { display: flex; flex-direction: column; gap: 8px; }
.wx3-a-wz-o { padding: 10px 14px; border-radius: 11px; border: 1.5px solid rgba(241, 236, 224, 0.22); background: rgba(241, 236, 224, 0.06); color: var(--wx-text); font: 600 13px/1 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s, color 0.2s; }
.wx3-a-wz-o:hover { border-color: rgba(227, 180, 92, 0.6); }
.wx3-a-wz-o.is-on { background: #E3B45C; border-color: #E3B45C; color: #0F1B2D; transform: scale(1.02); }
.wx3-a-wz-final { align-items: flex-start; }
.wx3-a-wz-price { display: flex; align-items: baseline; gap: 4px; margin: 2px 0 10px; font: 700 40px/1 'JetBrains Mono', monospace; color: #E3B45C; }
.wx3-a-wz-price .wx-mono { font-size: 20px; }
.wx3-a-wz-again { align-self: flex-start; padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(241, 236, 224, 0.3); background: transparent; color: var(--wx-text); font: 600 12.5px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.wx3-a-wz-again:hover { border-color: #E3B45C; }

/* ---------- mesa que crece con la cantidad ---------- */
.wx3-a-qa { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto auto; place-items: center; gap: 8px; padding: 14px 0 56px; }
.wx3-a-qa-svg { width: min(150px, 42cqw); height: auto; }
.wx3-a-qa-table { fill: #8A6A2E; opacity: 0.9; }
.wx3-a-qa-seat { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); transform-box: fill-box; transform-origin: center; }
.wx3-a-qa-seat.is-new { animation: wx3aQaIn 0.3s ease; }
@keyframes wx3aQaIn { from { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.4); } to { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1); } }
.wx3-a-qa-chair { fill: #0F1B2D; stroke: #E3B45C; stroke-width: 2; }
.wx3-a-qa-plate { fill: #F7F3EA; }
.wx3-a-qa-lab { margin: 0; font: 700 14px/1 Inter, system-ui, sans-serif; color: var(--wx-text); }
.wx3-a-qa-stp { display: flex; align-items: center; gap: 14px; }
.wx3-a-qa-m, .wx3-a-qa-p { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(241, 236, 224, 0.3); background: transparent; color: var(--wx-text); font: 700 18px/1 Inter, system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; transition: border-color 0.2s, transform 0.15s; }
.wx3-a-qa-m:hover, .wx3-a-qa-p:hover { border-color: #E3B45C; }
.wx3-a-qa-m:active, .wx3-a-qa-p:active { transform: scale(0.9); }
.wx3-a-qa-m:disabled, .wx3-a-qa-p:disabled { opacity: 0.3; cursor: default; }
.wx3-a-qa-n { font: 700 20px/1 'JetBrains Mono', monospace; min-width: 1.4em; text-align: center; color: #E3B45C; }
@media (prefers-reduced-motion: reduce) { .wx3-a-qa-seat { animation: none; } }

/* ---------- código de descuento por casillas ---------- */
.wx3-a-ot { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto auto 1fr; gap: 10px; place-items: center; padding: 18px 6% 16px; text-align: center; }
.wx3-a-ot-k { margin: 0; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #F3CF86; }
.wx3-a-ot-row { display: flex; gap: 8px; }
.wx3-a-ot-b { width: 36px; height: 44px; border-radius: 10px; border: 1.5px solid rgba(241, 236, 224, 0.25); background: rgba(241, 236, 224, 0.06); color: var(--wx-text); font: 700 19px/1 'JetBrains Mono', monospace; text-align: center; text-transform: uppercase; outline: 0; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.wx3-a-ot-b:focus { border-color: #4A8AD8; box-shadow: 0 0 0 3px rgba(74, 138, 216, 0.25); }
.wx3-a-ot-b.is-pop { animation: wx3aOtPop 0.32s ease; }
@keyframes wx3aOtPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); border-color: #E3B45C; } 100% { transform: scale(1); } }
.wx3-a-ot-b.is-bad { border-color: #C0392B; animation: wx3aOtShake 0.35s; }
@keyframes wx3aOtShake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.wx3-a-ot-row.is-ok .wx3-a-ot-b { border-color: #2F9E61; background: rgba(47, 158, 97, 0.16); }
.wx3-a-ot-msg { margin: 0; font-size: 12.5px; color: var(--wx-muted); transition: color 0.2s; }
.wx3-a-ot-msg.is-ok { color: #6FCB98; font-weight: 700; }
.wx3-a-ot-msg.is-warn { color: #E58E82; }
.wx3-a-ot-price { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 700 22px/1 'JetBrains Mono', monospace; }
.wx3-a-ot-old { color: rgba(241, 236, 224, 0.45); text-decoration: line-through; font-size: 16px; }
.wx3-a-ot-new { color: #E3B45C; }
@media (prefers-reduced-motion: reduce) { .wx3-a-ot-b.is-pop, .wx3-a-ot-b.is-bad { animation: none; } }

/* revisión 09-27: en celular el título del código no choca con «Ejemplo» */
@container (max-width: 520px) { .wx-stage[data-demo="otp"] .wx3-a-ot-k { padding: 0 64px; text-align: center; } }


/* ---- lote b_promos ---- */
/* LOTE B · variables de la vitrina: --wx-text --wx-muted --wx-line --wx-line-2 --wx-gold (#E3B45C) --wx-blue (#7FB0E6).
   Colores de la casa: azul noche #0A1220/#0F1B2D · crema #F7F3EA · dorado #E3B45C · azul #4A8AD8 · verde #2F9E61 · rojo #C0392B. */
.wx3-b-scr-cv:focus-visible, .wx3-b-scr-kb:focus-visible, .wx3-b-gb-box:focus-visible, .wx3-b-wl-b:focus-visible,
.wx3-b-pc-card:focus-visible, .wx3-b-mg-th:focus-visible, .wx3-b-bm-nav:focus-visible, .wx3-b-ir-nav:focus-visible {
  outline: 2px solid var(--wx-gold); outline-offset: 2px;
}
.wx3-b-scr-kb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: -1px; border: 0; }

/* ---------- rasca y gana ---------- */
.wx-stage[data-demo="scratch"] { background: radial-gradient(ellipse at 50% 30%, #241E33 0%, #0A1220 70%); }
.wx3-b-scr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(320px, 82cqw); }
.wx3-b-scr-card { position: relative; overflow: hidden; padding: 24px 22px 26px; border-radius: 18px; background: #F7F3EA; color: #0F1B2D; text-align: center; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5); }
.wx3-b-scr-k { margin: 0 0 6px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8A6A2E; }
.wx3-b-scr-card h4 { margin: 0 0 8px; font-size: clamp(19px, 4.8cqw, 26px); font-weight: 700; letter-spacing: -0.01em; }
.wx3-b-scr-prize { margin: 0; font-size: clamp(15px, 3.6cqw, 19px); font-weight: 700; color: #23703F; }
.wx3-b-scr-cv { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 18px; cursor: pointer; touch-action: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 20px 48px rgba(0, 0, 0, 0.5); transition: opacity 0.45s, transform 0.45s; }
.wx3-b-scr-cv.is-gone { opacity: 0; transform: scale(1.05); pointer-events: none; }
.wx3-b-scr-tip { position: absolute; width: 15%; aspect-ratio: 1; margin: -7.5% 0 0 -7.5%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%); opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 2; }
.wx3-b-scr.is-shine .wx3-b-scr-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(227, 180, 92, 0.55) 48%, transparent 62%); animation: wx3bShine 0.9s ease; pointer-events: none; }
@keyframes wx3bShine { 0% { transform: translateX(-70%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateX(70%); opacity: 0; } }

/* ---------- regalo que se rompe ---------- */
.wx-stage[data-demo="giftbox"] { background: radial-gradient(ellipse at 50% 32%, #2B2140 0%, #0A1220 72%); }
.wx3-b-gb { position: absolute; inset: 0; display: grid; place-items: center; }
.wx3-b-gb-coupon { position: absolute; width: min(280px, 80cqw); padding: 20px 22px; border-radius: 16px; background: #F7F3EA; color: #0F1B2D; text-align: center; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(14px) scale(0.92); transition: opacity 0.45s, transform 0.5s cubic-bezier(0.2, 1.3, 0.4, 1); pointer-events: none; }
.wx3-b-gb-coupon.is-on { opacity: 1; transform: none; }
.wx3-b-gb-k { margin: 0 0 6px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8A6A2E; }
.wx3-b-gb-coupon h4 { margin: 0 0 6px; font-size: clamp(18px, 4.6cqw, 24px); font-weight: 700; }
.wx3-b-gb-coupon p:last-child { margin: 0; font-size: 13px; color: #5B6472; }
.wx3-b-gb-box { position: relative; z-index: 2; width: 30%; max-width: 130px; aspect-ratio: 120/110; border: 0; padding: 0; background: none; cursor: pointer; animation: wx3bGbFloat 3.2s ease-in-out infinite; }
.wx3-b-gb-box.is-shake, .wx3-b-gb-box.is-crack, .wx3-b-gb-box.is-open { animation: none; }
@keyframes wx3bGbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8%); } }
.wx3-b-gb-body { position: absolute; left: 5%; right: 5%; bottom: 0; top: 30%; border-radius: 10px; background: linear-gradient(160deg, #E3B45C, #C88F35); box-shadow: 0 14px 26px rgba(0, 0, 0, 0.4); transition: transform 0.4s, opacity 0.4s; }
.wx3-b-gb-lid { position: absolute; left: 0; right: 0; top: 20%; height: 22%; border-radius: 8px; background: linear-gradient(160deg, #EFC878, #D49A3D); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); transition: transform 0.5s cubic-bezier(0.3, 1.3, 0.4, 1), opacity 0.4s; }
.wx3-b-gb-ribv { position: absolute; left: 50%; top: 20%; bottom: 0; width: 11%; margin-left: -5.5%; background: #0F1B2D; opacity: 0.85; transition: transform 0.4s, opacity 0.4s; }
.wx3-b-gb-ribh { position: absolute; left: 5%; right: 5%; top: 38%; height: 12%; background: #0F1B2D; opacity: 0.85; transition: transform 0.4s, opacity 0.4s; }
.wx3-b-gb-bow { position: absolute; left: 50%; top: 3%; width: 24%; height: 20%; margin-left: -12%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #C0392B; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35); transition: transform 0.4s, opacity 0.4s; }
.wx3-b-gb-crack { position: absolute; background: #0A1220; opacity: 0; transition: opacity 0.3s; }
.wx3-b-gb-crack.c1 { left: 36%; top: 26%; width: 2px; height: 34%; transform: rotate(9deg); }
.wx3-b-gb-crack.c2 { left: 58%; top: 30%; width: 2px; height: 30%; transform: rotate(-11deg); }
.wx3-b-gb-crack.c3 { left: 47%; top: 44%; width: 2px; height: 26%; transform: rotate(4deg); }
.wx3-b-gb-box.is-crack .wx3-b-gb-crack, .wx3-b-gb-box.is-open .wx3-b-gb-crack { opacity: 1; }
.wx3-b-gb-box.is-shake { animation: wx3bGbShake 0.42s ease; }
@keyframes wx3bGbShake { 15% { transform: translateX(-6%) rotate(-3deg); } 35% { transform: translateX(6%) rotate(3deg); } 55% { transform: translateX(-4%) rotate(-2deg); } 75% { transform: translateX(4%) rotate(2deg); } 100% { transform: translateX(0); } }
.wx3-b-gb-box.is-open .wx3-b-gb-lid { transform: translateY(-70%) rotate(-18deg); opacity: 0; }
.wx3-b-gb-box.is-open .wx3-b-gb-body, .wx3-b-gb-box.is-open .wx3-b-gb-ribv, .wx3-b-gb-box.is-open .wx3-b-gb-ribh, .wx3-b-gb-box.is-open .wx3-b-gb-bow { transform: scale(0.86) translateY(12%); opacity: 0; }
.wx3-b-gb-burst { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.wx3-b-gb-burst i { position: absolute; left: 50%; top: 36%; width: 7px; height: 7px; border-radius: 2px; opacity: 0; animation: wx3bGbConf 0.9s ease-out forwards; }
@keyframes wx3bGbConf { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--r)); } }

/* ---------- cupón que cae en la billetera ---------- */
.wx-stage[data-demo="wallet"] { background: radial-gradient(ellipse at 50% 20%, #22324F 0%, #0A1220 70%); }
.wx3-b-wl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 3cqw, 18px); padding: 6% 6%; }
.wx3-b-wl-top { display: flex; align-items: center; gap: 12px; width: min(360px, 92cqw); }
.wx3-b-wl-card { flex: 1; min-width: 0; padding: 13px 15px; border-radius: 14px; background: #F7F3EA; color: #0F1B2D; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4); }
.wx3-b-wl-k { margin: 0 0 3px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #8A6A2E; }
.wx3-b-wl-card h4 { margin: 0 0 3px; font-size: clamp(15px, 3.6cqw, 18px); font-weight: 700; letter-spacing: -0.01em; }
.wx3-b-wl-card p:last-child { margin: 0; font-size: 11.5px; line-height: 1.3; color: #5B6472; }
.wx3-b-wl-b { flex: none; padding: 12px 16px; border: 0; border-radius: 11px; background: #E3B45C; color: #0F1B2D; font: 700 13.5px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: transform 0.15s, background 0.2s; }
.wx3-b-wl-b:hover { background: #EDCF93; }
.wx3-b-wl-b:active, .wx3-b-wl-b.is-press { transform: scale(0.93); }
.wx3-b-wl-fly { position: absolute; z-index: 5; padding: 13px 15px; border-radius: 14px; background: #F7F3EA; color: #0F1B2D; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4); pointer-events: none; overflow: hidden; }
.wx3-b-wl-fly .wx3-b-wl-b { display: none; }
.wx3-b-wl-stack { position: relative; width: min(200px, 60cqw); height: 30px; }
.wx3-b-wl-stack i { position: absolute; left: 0; right: 0; height: 15px; border-radius: 8px; background: linear-gradient(90deg, #4A8AD8, #2F6FBD); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); transition: transform 0.3s, opacity 0.3s; }
.wx3-b-wl-stack i:nth-child(1) { top: 0; z-index: 3; }
.wx3-b-wl-stack i:nth-child(2) { top: 7px; z-index: 2; opacity: 0.75; transform: scale(0.96); }
.wx3-b-wl-stack i:nth-child(3) { top: 14px; z-index: 1; opacity: 0.5; transform: scale(0.92); }
.wx3-b-wl-stack i:nth-child(4) { top: 21px; z-index: 0; opacity: 0.3; transform: scale(0.88); }
.wx3-b-wl-stack i.is-new { animation: wx3bWlDrop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes wx3bWlDrop { 0% { transform: translateY(-14px) scale(1.08); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
.wx3-b-wl-stack i.is-flash { animation: wx3bWlFlash 0.5s ease; }
@keyframes wx3bWlFlash { 40% { background: #E3B45C; } }
.wx3-b-wl-count { margin: 0; font-size: 13px; color: var(--wx-text); }
.wx3-b-wl-count span { color: var(--wx-muted); }
.wx3-b-wl-n { display: inline-block; color: #E3B45C; font-weight: 700; }
.wx3-b-wl-n.is-pop { animation: wx3bWlPop 0.4s ease; }
@keyframes wx3bWlPop { 40% { transform: scale(1.35); } }

/* ---------- postal con estampilla ---------- */
.wx-stage[data-demo="postcard"] { background: #C9BFA9; -webkit-perspective: 1400px; perspective: 1400px; }
.wx3-b-pc { position: absolute; inset: 0; display: grid; place-items: center; padding: 6%; }
.wx3-b-pc-card { position: relative; width: min(420px, 90cqw); aspect-ratio: 3 / 2; border: 0; padding: 0; background: none; cursor: pointer; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform 0.85s cubic-bezier(0.4, 0.05, 0.2, 1); }
.wx3-b-pc-card.is-flip { transform: rotateY(180deg); }
/* ojo: nunca overflow:hidden en esta cara — combinado con backface-visibility:hidden rompe el volteo en WebKit (queda espejado).
   backface-visibility solo no basta (el WebKit de prueba no la respeta en reposo): la opacidad decide qué cara se ve,
   recién a la mitad del giro (0.43s de 0.85s), que es cuando la tarjeta está de canto y no se nota el corte. */
.wx3-b-pc-face { position: absolute; inset: 0; border-radius: 6px; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); transition: opacity 0s linear 0.43s; }
.wx3-b-pc-front img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; }
.wx3-b-pc-tag { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(10, 18, 32, 0.65); color: #F7F3EA; font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing: -0.01em; }
.wx3-b-pc-back { background: #F7F3EA; transform: rotateY(180deg); padding: 6% 6% 6% 5%; display: grid; grid-template-columns: 1.15fr 1px 1fr; gap: 0 5%; color: #26201A; opacity: 0; }
.wx3-b-pc-card.is-flip .wx3-b-pc-front { opacity: 0; }
.wx3-b-pc-card.is-flip .wx3-b-pc-back { opacity: 1; }
.wx3-b-pc-back::before { content: ''; grid-column: 2; grid-row: 1; background: rgba(38, 32, 26, 0.25); }
.wx3-b-pc-lines { grid-column: 1; align-self: start; }
.wx3-b-pc-msg { margin: 0 0 0.6em; font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(13.5px, 3.2cqw, 17px); line-height: 1.36; }
.wx3-b-pc-sign { margin: 0; font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(12px, 2.8cqw, 14.5px); color: #6B5C46; }
.wx3-b-pc-addr { grid-column: 3; align-self: end; font-size: clamp(11px, 2.4cqw, 13px); line-height: 1.5; color: #4A4136; }
.wx3-b-pc-addr p { margin: 0; }
.wx3-b-pc-stamp { grid-column: 3; align-self: start; justify-self: end; width: 22%; aspect-ratio: 5/6; border: 3px dashed rgba(38, 32, 26, 0.4); border-radius: 3px; background: linear-gradient(160deg, #E3B45C, #C88F35); display: grid; place-items: center; transform: rotate(3deg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
.wx3-b-pc-stamp span { font: 800 9px/1 'JetBrains Mono', monospace; letter-spacing: 0.05em; color: #0F1B2D; }
.wx3-b-pc-mark { grid-column: 3; align-self: start; justify-self: end; width: 26%; aspect-ratio: 1; margin-top: 24%; margin-right: 4%; border-radius: 50%; border: 2px solid rgba(38, 32, 26, 0.5); position: relative; transform: rotate(-14deg); }
.wx3-b-pc-mark::before { content: ''; position: absolute; inset: 14%; border: 1px dashed rgba(38, 32, 26, 0.5); border-radius: 50%; }
.wx3-b-pc-mark::after { content: ''; position: absolute; left: -30%; right: -30%; top: 50%; height: 2px; background: rgba(38, 32, 26, 0.5); }
@container (max-width: 520px) { .wx3-b-pc-back { grid-template-columns: 1fr; gap: 8px; } .wx3-b-pc-back::before { display: none; } .wx3-b-pc-addr, .wx3-b-pc-stamp, .wx3-b-pc-mark { grid-column: 1; justify-self: start; } .wx3-b-pc-stamp, .wx3-b-pc-mark { display: none; } }

/* ---------- lupa sobre la foto ---------- */
.wx-stage[data-demo="magnify"] { background: #0A1220; }
.wx3-b-mg { position: absolute; inset: 0; display: flex; flex-direction: column; }
.wx-stage[data-demo="magnify"] .wx2-view { position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: crosshair; touch-action: none; }
.wx3-b-mg-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wx3-b-mg-lens { position: absolute; border-radius: 50%; border: 3px solid var(--wx-gold); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.55); background-repeat: no-repeat; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.wx3-b-mg-lens.is-on { opacity: 1; }
.wx3-b-mg-thumbs { display: flex; gap: 7px; padding: 8px 10px; background: rgba(10, 18, 32, 0.85); border-top: 1px solid var(--wx-line-2); }
.wx3-b-mg-th { flex: 1; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; opacity: 0.55; transition: opacity 0.2s, border-color 0.2s; background: none; }
.wx3-b-mg-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx3-b-mg-th.is-on, .wx3-b-mg-th:hover { opacity: 1; border-color: var(--wx-gold); }
.wx3-b-mg-k { margin: 0; padding: 7px 12px 9px; font-size: 11px; color: var(--wx-muted); background: rgba(10, 18, 32, 0.85); }
.wx3-b-mg-k b { color: var(--wx-text); font-weight: 700; }

/* ---------- menú que se hojea como libro ---------- */
.wx-stage[data-demo="bookmenu"] { background: radial-gradient(ellipse at 50% 15%, #2B2433 0%, #0A1220 70%); }
.wx3-b-bm { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5% 6% 4%; }
.wx3-b-bm-k { margin: 0 0 3%; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wx-gold); }
.wx3-b-bm-book { position: relative; flex: 1; min-height: 0; -webkit-perspective: 1600px; perspective: 1600px; border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); touch-action: pan-y; }
.wx3-b-bm-book::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent); z-index: 9; pointer-events: none; }
.wx3-b-bm-pg { position: absolute; inset: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin: left center; transition: transform 0.8s cubic-bezier(0.4, 0.05, 0.2, 1); }
/* ojo: nunca overflow:hidden en .wx3-b-bm-front/.wx3-b-bm-book — combinado con backface-visibility:hidden en la página rota deja las caras en blanco en WebKit.
   backface-visibility solo no basta (el WebKit de prueba no la respeta en reposo): la opacidad decide qué cara se ve,
   recién a la mitad del giro (0.4s de 0.8s), que es cuando la página está de canto y no se nota el corte. */
.wx3-b-bm-front { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #0A1220; border-radius: 10px; transition: opacity 0s linear 0.4s; }
.wx3-b-bm-pg.is-flip .wx3-b-bm-front { opacity: 0; }
.wx3-b-bm-front img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; }
.wx3-b-bm-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 9% 7% 7%; border-radius: 0 0 10px 10px; background: linear-gradient(0deg, rgba(10, 18, 32, 0.88), transparent); display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.wx3-b-bm-cap b { font-size: clamp(13px, 3.4cqw, 17px); font-weight: 700; color: #F7F3EA; letter-spacing: -0.01em; }
.wx3-b-bm-cap span { font-size: clamp(12px, 2.8cqw, 14px); color: var(--wx-gold); white-space: nowrap; }
.wx3-b-bm-back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: rotateY(180deg); background: #F7F3EA; border-radius: 10px; opacity: 0; transition: opacity 0s linear 0.4s; }
.wx3-b-bm-pg.is-flip .wx3-b-bm-back { opacity: 1; }
.wx3-b-bm-pg.is-flip { transform: rotateY(-165deg); box-shadow: 20px 0 34px rgba(0, 0, 0, 0.45); }
.wx3-b-bm-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 3%; }
.wx3-b-bm-nav { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--wx-line-2); background: rgba(255, 255, 255, 0.06); color: var(--wx-text); font-size: 17px; line-height: 1; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.wx3-b-bm-nav:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--wx-gold); }
.wx3-b-bm-n { margin: 0; font-size: 12px; color: var(--wx-muted); }
.wx3-b-bm-n b { color: var(--wx-text); }

/* ---------- diafragma de cámara entre fotos ---------- */
.wx-stage[data-demo="iris"] { background: #0A1220; }
.wx3-b-ir { position: absolute; inset: 0; display: flex; flex-direction: column; }
.wx-stage[data-demo="iris"] .wx2-view { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #05090F; }
.wx3-b-ir-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; clip-path: circle(0px at 50% 50%); }
.wx3-b-ir-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 58%, rgba(5, 9, 15, 0.65) 100%); box-shadow: inset 0 0 0 3px rgba(247, 243, 234, 0.08); }
.wx3-b-ir-bar { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: rgba(10, 18, 32, 0.9); border-top: 1px solid var(--wx-line-2); }
.wx3-b-ir-nav { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--wx-line-2); background: rgba(255, 255, 255, 0.06); color: var(--wx-text); font-size: 16px; line-height: 1; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.wx3-b-ir-nav:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--wx-gold); }
.wx3-b-ir-n { margin: 0; font-size: 11.5px; color: var(--wx-muted); text-align: center; }
.wx3-b-ir-n b { color: var(--wx-text); }
.wx3-b-ir-lab { color: var(--wx-gold); }
@media (prefers-reduced-motion: reduce) { .wx3-b-ir-img { transition: none !important; } }

.wx3-b-gb-coupon.is-on { z-index: 3; }

/* revisión 09-27: etiquetas de ayuda que tapaban controles/pies de foto, y «Ejemplo» legible sobre fondo claro */
.wx-stage[data-demo="magnify"] .wx-hint, .wx-stage[data-demo="iris"] .wx-hint { bottom: auto; top: 12px; }
.wx-stage[data-demo="bookmenu"] .wx-hint { display: none; }
.wx-stage[data-demo="postcard"] .wx-exnote, .wx-stage[data-demo="magnify"] .wx-exnote, .wx-stage[data-demo="iris"] .wx-exnote { color: #F1ECE0; background: rgba(11, 20, 34, 0.7); padding: 4px 8px; border-radius: 999px; top: 10px; right: 10px; }


/* ---- lote c_detalles ---- */
/* LOTE C (8 efectos, 09-27) — el momento en que el cliente actúa (parte 2). Prefijo wx3-c-, keyframes wx3c. */

/* ---------- flash404 ---------- */
.wx3-c-fl { position: absolute; inset: 0; background: #05070c; }
.wx3-c-fl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.85); }
.wx3-c-fl-dark {
  position: absolute; inset: 0; background: #05070c;
  -webkit-mask-image: radial-gradient(circle clamp(70px, 22cqw, 150px) at var(--x, 50%) var(--y, 42%), transparent 0%, transparent 55%, black 100%);
  mask-image: radial-gradient(circle clamp(70px, 22cqw, 150px) at var(--x, 50%) var(--y, 42%), transparent 0%, transparent 55%, black 100%);
}
.wx3-c-fl-ui { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; text-align: center; padding: 12px; pointer-events: none; }
.wx3-c-fl-code { margin: 0 0 4px; font: 800 clamp(34px, 6vw, 48px)/1 'JetBrains Mono', monospace; color: rgba(241, 236, 224, 0.4); letter-spacing: 0.04em; }
.wx3-c-fl-ui h4 { margin: 0 0 16px; font-size: clamp(17px, 2.2vw, 23px); color: #F1ECE0; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
.wx3-c-fl-b { pointer-events: auto; padding: 11px 22px; border: 0; border-radius: 999px; background: var(--wx-gold); color: #0F1B2D; font: 700 14px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: transform 0.15s; }
.wx3-c-fl-b:hover { transform: scale(1.04); }
.wx3-c-fl-b.is-on { animation: wx3cflb 0.5s; }
@keyframes wx3cflb { 40% { transform: scale(0.9); } 70% { transform: scale(1.08); } }

/* ---------- snake404 ---------- */
.wx3-c-sn { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; background: linear-gradient(180deg, #0A1220, #0d1830); }
.wx3-c-sn-top { padding: 13px 16px 4px; text-align: center; }
.wx3-c-sn-404 { margin: 0; font-size: 10.5px; letter-spacing: 0.14em; color: rgba(241, 236, 224, 0.4); }
.wx3-c-sn-top h4 { margin: 2px 0 0; font-size: clamp(15px, 2vw, 18px); color: #F1ECE0; }
.wx3-c-sn-box { position: relative; margin: 0 12px 12px; border-radius: 14px; background: #060b16; border: 1px solid var(--wx-line-2); overflow: hidden; outline: none; }
.wx3-c-sn-box:focus-visible { box-shadow: 0 0 0 2px var(--wx-gold) inset; }
.wx3-c-sn-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wx3-c-sn-score { position: absolute; left: 9px; top: 8px; z-index: 2; margin: 0; font-size: 10.5px; letter-spacing: 0.04em; color: var(--wx-gold); background: rgba(6, 11, 22, 0.75); padding: 4px 9px; border-radius: 999px; }
.wx3-c-sn-score b { color: #fff; margin-left: 4px; }
.wx3-c-sn-pad { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: grid; grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(2, 28px); gap: 4px; }
.wx3-c-sn-k { border: 0; border-radius: 8px; background: rgba(241, 236, 224, 0.14); color: #F1ECE0; font-size: 11px; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s; }
.wx3-c-sn-k:active { background: var(--wx-gold); color: #0F1B2D; }
.wx3-c-sn-k--u { grid-column: 2; grid-row: 1; } .wx3-c-sn-k--l { grid-column: 1; grid-row: 2; }
.wx3-c-sn-k--r { grid-column: 3; grid-row: 2; } .wx3-c-sn-k--d { grid-column: 2; grid-row: 2; }

/* ---------- seasonal ---------- */
.wx3-c-se { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(160deg, #12213a, #1b3355 60%, #26476e); transition: background 0.7s; }
.wx3-c-se[data-mode="xmas"] { background: linear-gradient(160deg, #0d2418, #123322 60%, #1c4a30); }
.wx3-c-se[data-mode="hall"] { background: linear-gradient(160deg, #1a0f22, #26132e 60%, #3a1a3f); }
.wx3-c-se canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wx3-c-se-nav { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 12px clamp(78px, 18cqw, 104px) 12px 5%; }
.wx3-c-se-logo { position: relative; display: inline-flex; align-items: center; gap: 6px; font: 700 16px/1 Georgia, serif; color: #F7F3EA; letter-spacing: 0.01em; }
.wx3-c-se-ic { display: none; width: 20px; height: 20px; flex: none; }
.wx3-c-se[data-mode="xmas"] .wx3-c-se-ic--xmas, .wx3-c-se[data-mode="hall"] .wx3-c-se-ic--hall, .wx3-c-se[data-mode="fp"] .wx3-c-se-ic--fp { display: inline-block; }
.wx3-c-se-lk { display: flex; gap: 14px; font-size: 11px; color: rgba(247, 243, 234, 0.72); }
.wx3-c-se-lk i { font-style: normal; }
.wx3-c-se-hero { position: absolute; left: 7%; top: 36%; z-index: 2; max-width: 72%; }
.wx3-c-se-hero p { margin: 0 0 6px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wx-gold); }
.wx3-c-se-hero h4 { margin: 0; font-size: clamp(19px, 2.6vw, 28px); line-height: 1.15; color: #F7F3EA; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); }
.wx3-c-se-sel { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 2; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 0 10px; }
.wx3-c-se-b { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(247, 243, 234, 0.32); background: rgba(10, 18, 32, 0.45); color: #F7F3EA; font: 600 11px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.wx3-c-se-b:hover { border-color: var(--wx-gold); }
.wx3-c-se-b.is-on { background: var(--wx-gold); border-color: var(--wx-gold); color: #0F1B2D; }

/* ---------- milestone ---------- */
.wx3-c-mi { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; gap: 3px; padding: 16px; }
.wx3-c-mi-k { margin: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wx-muted); }
.wx3-c-mi-num { position: relative; display: flex; align-items: center; gap: 8px; }
.wx3-c-mi-n { font: 700 clamp(38px, 7vw, 60px)/1 'JetBrains Mono', monospace; color: #F1ECE0; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; transition: color 0.3s; }
.wx3-c-mi-face { font-size: clamp(20px, 3vw, 28px); font-style: normal; color: var(--wx-gold); opacity: 0; transform: scale(0.4) rotate(-20deg); transition: opacity 0.35s, transform 0.35s; }
.wx3-c-mi-num.is-cel .wx3-c-mi-n { color: var(--wx-gold); animation: wx3cmib 0.6s; }
.wx3-c-mi-num.is-cel .wx3-c-mi-face { opacity: 1; transform: none; }
@keyframes wx3cmib { 30% { transform: scale(1.18); } 60% { transform: scale(0.96); } }
.wx3-c-mi-spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--wx-gold); pointer-events: none; animation: wx3cmisp 0.85s ease-out forwards; }
@keyframes wx3cmisp { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
.wx3-c-mi-lab { margin: 0; font-size: 13px; color: var(--wx-muted); }
.wx3-c-mi-cel { min-height: 18px; margin: 3px 0 0; font-size: 13px; font-weight: 600; color: var(--wx-gold); opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s; }
.wx3-c-mi-cel.is-on { opacity: 1; transform: none; }
.wx3-c-mi-b { margin-top: 8px; padding: 9px 17px; border-radius: 999px; border: 1px solid var(--wx-line-2); background: rgba(255, 255, 255, 0.06); color: #F1ECE0; font: 600 12.5px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s; }
.wx3-c-mi-b:hover { border-color: var(--wx-gold); }
.wx3-c-mi-b:active, .wx3-c-mi-b.is-press { transform: scale(0.94); }

/* ---------- vaporize ---------- */
.wx3-c-va { position: absolute; inset: 0; padding: 14px 16px 46px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; }
.wx3-c-va-head { display: flex; align-items: baseline; justify-content: space-between; padding-right: clamp(70px, 16cqw, 92px); }
.wx3-c-va-head b { font-size: 13.5px; color: #F1ECE0; }
.wx3-c-va-head span { font-size: 11px; color: var(--wx-muted); }
.wx3-c-va-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; align-content: start; }
.wx3-c-va-it { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--wx-line); max-height: 60px; overflow: hidden; transition: opacity 0.5s, transform 0.5s, filter 0.5s, max-height 0.4s 0.15s, padding 0.4s 0.15s, margin 0.4s 0.15s, border-width 0.4s 0.15s; }
.wx3-c-va-it img, .wx3-c-va-ic { flex: none; width: 42px; height: 42px; border-radius: 9px; object-fit: cover; }
.wx3-c-va-ic { display: grid; place-items: center; background: rgba(227, 180, 92, 0.16); color: var(--wx-gold); }
.wx3-c-va-ic svg { width: 22px; height: 22px; }
.wx3-c-va-tx { flex: 1; display: grid; gap: 2px; min-width: 0; }
.wx3-c-va-tx b { font-size: 12.5px; font-weight: 600; color: #F1ECE0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx3-c-va-tx small { font-size: 11.5px; color: var(--wx-gold); }
.wx3-c-va-rm { flex: none; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(192, 57, 43, 0.5); background: transparent; color: #E8897D; font: 600 11px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background 0.2s, color 0.2s; }
.wx3-c-va-rm:hover { background: rgba(192, 57, 43, 0.18); }
.wx3-c-va-it.is-gone { opacity: 0; transform: scale(0.85); filter: blur(3px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; }
.wx3-c-va-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.wx3-c-va-tot { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--wx-line); }
.wx3-c-va-tot span { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wx-muted); }
.wx3-c-va-totn { font-size: 17px; color: #F1ECE0; transition: color 0.3s; }
.wx3-c-va-totn.is-pulse { color: var(--wx-gold); }

/* ---------- pulldown ---------- */
.wx3-c-pu { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.05), transparent 60%), linear-gradient(160deg, #241a12, #160f0a); display: flex; flex-direction: column; align-items: center; }
.wx3-c-pu-top { align-self: flex-start; padding: 9% 7% 0; max-width: 78%; }
.wx3-c-pu-brand { display: block; margin-bottom: 6px; font: 700 18px/1 Georgia, serif; color: #F7F3EA; }
.wx3-c-pu-top p { margin: 0 0 4px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wx-gold); }
.wx3-c-pu-top h4 { margin: 0; font-size: clamp(17px, 2.4vw, 23px); color: #F7F3EA; }
.wx3-c-pu-pull { position: relative; width: min(280px, 86cqw); margin-top: clamp(10px, 4cqw, 22px); z-index: 2; display: flex; flex-direction: column; align-items: center; }
.wx3-c-pu-tab { padding: 8px 18px 9px; border: 0; border-radius: 14px 14px 0 0; background: #F7F3EA; color: #3B2A18; font: 700 12px/1 Inter, system-ui, sans-serif; cursor: pointer; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); touch-action: none; }
.wx3-c-pu-panel { width: 100%; max-height: 0; overflow: hidden; background: #F7F3EA; border-radius: 0 0 16px 16px; box-shadow: 0 16px 28px rgba(0, 0, 0, 0.4); transition: max-height 0.55s cubic-bezier(0.22, 1.28, 0.4, 1); }
.wx3-c-pu-k2 { margin: 12px 16px 2px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A6A2E; }
.wx3-c-pu-panel ul { list-style: none; margin: 0; padding: 6px 16px 14px; display: grid; gap: 8px; }
.wx3-c-pu-panel li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #3B2A18; }
.wx3-c-pu-panel li b { font-weight: 600; }
.wx3-c-pu-panel li span { flex: none; color: #8A6A2E; font-size: 12px; }

/* ---------- termlogo ---------- */
.wx3-c-tl { position: absolute; inset: 0; padding: 16px; display: grid; grid-template-rows: 1fr auto; gap: 10px; background: #05070c; }
.wx3-c-tl-win { border-radius: 12px; background: #0b0f16; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.wx3-c-tl-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #12161f; }
.wx3-c-tl-bar i { width: 9px; height: 9px; border-radius: 50%; background: #4a5261; }
.wx3-c-tl-bar i:nth-child(1) { background: #C0392B; } .wx3-c-tl-bar i:nth-child(2) { background: #E3B45C; } .wx3-c-tl-bar i:nth-child(3) { background: #2F9E61; }
.wx3-c-tl-bar b { margin-left: 8px; font: 500 10.5px/1 'JetBrains Mono', monospace; color: rgba(255, 255, 255, 0.4); }
.wx3-c-tl-body { flex: 1; margin: 0; padding: 12px 14px; font: 12.5px/1.55 'JetBrains Mono', monospace; color: #8CE18C; white-space: pre-wrap; overflow: hidden; }
.wx3-c-tl-cur { display: inline-block; margin-left: 1px; color: #8CE18C; animation: wx3ctlbk 1s steps(1) infinite; }
@keyframes wx3ctlbk { 50% { opacity: 0; } }
.wx3-c-tl-hd { text-align: center; padding: 0 70px; }
.wx3-c-tl-hd h4 { margin: 0 0 3px; font-size: clamp(16px, 2.2vw, 21px); color: #F1ECE0; }
.wx3-c-tl-hd p { margin: 0; font-size: 12px; color: var(--wx-muted); }

/* ---------- bouncy ---------- */
.wx3-c-bo { position: absolute; inset: 0; padding: 20px 24px; display: grid; align-content: center; gap: 14px; }
.wx3-c-bo-k { margin: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wx-muted); }
.wx3-c-bo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.wx3-c-bo-row { display: flex; align-items: center; gap: 10px; }
.wx3-c-bo-row span { flex: 1; font-size: 14px; color: #F1ECE0; }
.wx3-c-bo-lk { flex: none; width: 20px; height: 20px; color: var(--wx-muted); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s; }
.wx3-c-bo-lk svg { width: 100%; height: 100%; }
.wx3-c-bo-lk.is-off { color: #C0392B; transform: rotate(-12deg) scale(1.08); }
.wx3-c-bo-sw { position: relative; flex: none; width: 46px; height: 27px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.16); cursor: pointer; transition: background 0.3s; }
.wx3-c-bo-sw[aria-checked="true"] { background: var(--wx-gold); }
.wx3-c-bo-kn { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wx3-c-bo-sw[aria-checked="true"] .wx3-c-bo-kn { transform: translateX(19px); }

.wx3-c-va-empty { display: none; margin: 18px 0 0; text-align: center; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wx-muted); }
.wx3-c-va-list:not(:has(.wx3-c-va-it:not(.is-gone))) + .wx3-c-va-empty { display: block; }


/* ---- lote d_componentes ---- */
/* Lote D — «Componentes» (09-27). Variables de la vitrina: --wx-text --wx-muted --wx-line --wx-line-2 --wx-gold (#E3B45C)
   --wx-blue (#7FB0E6). tessera/banding reusan las clases genéricas .wxd-gl/.wxd-mnav/.wxd-over/.wxd-hero/.wxd-mchip
   (mismo esquema que las portadas de mesh/flame/cells, ver websites.css) con sus propias --mk-* por [data-demo]. */

/* ---------- 1. interruptor claro/oscuro ---------- */
.wx3-d-ts { position: absolute; inset: 0; overflow: hidden; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg, #EAF2FB 0%, #F7F3EA 60%); color: #16233A; transition: background 0.6s, color 0.6s; }
.wx3-d-ts[data-theme="dark"] { background: linear-gradient(180deg, #0B1220 0%, #131F35 70%); color: #F1ECE0; }
.wx3-d-ts-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity 0.9s; }
.wx3-d-ts[data-theme="dark"] .wx3-d-ts-star { opacity: 0.85; }
.wx3-d-ts-star1 { top: 16%; left: 22%; } .wx3-d-ts-star2 { top: 27%; left: 64%; } .wx3-d-ts-star3 { top: 10%; left: 80%; } .wx3-d-ts-star4 { top: 35%; left: 44%; }
.wx3-d-ts-nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding-right: 76px; }
.wx3-d-ts-nav b { font-weight: 700; letter-spacing: -0.01em; }
.wx3-d-ts-nav-l { display: flex; gap: 14px; font-size: 12px; opacity: 0.72; }
.wx3-d-ts-hero { position: relative; z-index: 2; display: grid; gap: 8px; max-width: 76%; }
.wx3-d-ts-hero .wx-mono { margin: 0; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65; }
.wx3-d-ts-hero h4 { margin: 0; font-size: clamp(20px, 4.6cqw, 30px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.wx3-d-ts-cta { justify-self: start; margin-top: 2px; padding: 9px 15px; border-radius: 999px; font: 600 12.5px/1 Inter, system-ui, sans-serif; background: #16233A; color: #F7F3EA; transition: background 0.6s, color 0.6s; }
.wx3-d-ts[data-theme="dark"] .wx3-d-ts-cta { background: #E3B45C; color: #0F1B2D; }
.wx3-d-ts-sw { position: absolute; z-index: 3; right: 14px; bottom: 14px; border: 0; padding: 2px; border-radius: 999px; background: none; cursor: pointer; }
.wx3-d-ts-track { position: relative; display: block; width: 58px; height: 30px; border-radius: 999px; background: linear-gradient(90deg, #8FC6F2, #F4D9A0); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.08); transition: background 0.6s; }
.wx3-d-ts[data-theme="dark"] .wx3-d-ts-track { background: linear-gradient(90deg, #1B2648, #0B1220); }
.wx3-d-ts-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.45s; }
.wx3-d-ts[data-theme="dark"] .wx3-d-ts-thumb { transform: translateX(28px); background: #1B2648; }
.wx3-d-ts-thumb svg { position: absolute; width: 15px; height: 15px; transition: opacity 0.3s, transform 0.4s; }
.wx3-d-ts-thumb svg:first-child { color: #E8A33D; opacity: 1; transform: scale(1) rotate(0); }
.wx3-d-ts-thumb svg:last-child { color: #DCE3F5; opacity: 0; transform: scale(0.4) rotate(-40deg); }
.wx3-d-ts[data-theme="dark"] .wx3-d-ts-thumb svg:first-child { opacity: 0; transform: scale(0.4) rotate(40deg); }
.wx3-d-ts[data-theme="dark"] .wx3-d-ts-thumb svg:last-child { opacity: 1; transform: scale(1) rotate(0); }
.wx3-d-ts-sw:focus-visible .wx3-d-ts-track { outline: 2px solid var(--wx-gold); outline-offset: 3px; }
.wx3-d-ts:not([data-theme="dark"]) + .wx-exnote { color: rgba(15, 27, 45, 0.45); }
@container (max-width: 380px) { .wx3-d-ts-nav-l { display: none; } .wx3-d-ts-hero { max-width: 88%; } }

/* ---------- 2. casillas + selector de plan ---------- */
.wx3-d-cs { position: absolute; inset: 0; padding: 16px 18px; display: grid; gap: 11px; align-content: center; background: #12203A; color: #F1ECE0; }
.wx3-d-cs-list { display: grid; gap: 7px; }
.wx3-d-cs-ck { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.wx3-d-cs-ck input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wx3-d-cs-ck i { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(241, 236, 224, 0.35); display: grid; place-items: center; color: #fff; transition: background 0.2s, border-color 0.2s; }
.wx3-d-cs-ck i svg { width: 14px; height: 14px; }
.wx3-d-cs-ck i path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.3s 0.05s; }
.wx3-d-cs-ck input:checked + i { background: #2F9E61; border-color: #2F9E61; }
.wx3-d-cs-ck input:checked + i path { stroke-dashoffset: 0; }
.wx3-d-cs-ck input:focus-visible + i { outline: 2px solid var(--wx-gold); outline-offset: 2px; }
.wx3-d-cs-add { margin-left: auto; font: 600 12px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; color: #F3CF86; }
.wx3-d-cs-plans { display: flex; gap: 8px; }
.wx3-d-cs-pl { flex: 1; position: relative; display: grid; gap: 1px; padding: 9px 24px 9px 11px; border-radius: 12px; border: 1.5px solid rgba(241, 236, 224, 0.2); cursor: pointer; transition: background 0.25s, border-color 0.25s; }
.wx3-d-cs-pl input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wx3-d-cs-pl b { font-size: 13px; font-weight: 700; }
.wx3-d-cs-pl small { font-size: 11.5px; color: rgba(241, 236, 224, 0.65); }
.wx3-d-cs-r { position: absolute; right: 10px; top: 10px; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid rgba(241, 236, 224, 0.4); }
.wx3-d-cs-r::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #E3B45C; transform: scale(0); transition: transform 0.25s; }
.wx3-d-cs-pl.is-on { background: rgba(227, 180, 92, 0.14); border-color: #E3B45C; }
.wx3-d-cs-pl.is-on .wx3-d-cs-r::after { transform: scale(1); }
.wx3-d-cs-pl input:focus-visible ~ .wx3-d-cs-r { outline: 2px solid var(--wx-gold); outline-offset: 2px; }
.wx3-d-cs-tot { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding-top: 9px; border-top: 1px solid rgba(241, 236, 224, 0.16); font-size: 13px; color: rgba(241, 236, 224, 0.7); }
.wx3-d-cs-tot b { font-size: 22px; font-weight: 700; color: #F7F3EA; }
.wx3-d-cs-n { display: inline-block; }
.wx3-d-cs-n.is-hit { animation: wx3dcshit 0.4s; }
.wx3-d-cs-tot small { font-size: 12px; font-weight: 500; color: rgba(241, 236, 224, 0.6); margin-left: 2px; }
@keyframes wx3dcshit { 30% { transform: scale(1.18); color: #E3B45C; } }
@container (max-width: 340px) { .wx3-d-cs-plans { flex-direction: column; } }

/* ---------- 3. cargadores de la casa ---------- */
.wx3-d-ld { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px; background: #0E1728; }
.wx3-d-ld-it { display: grid; justify-items: center; align-content: center; gap: 10px; padding: 8px; border-radius: 16px; background: rgba(241, 236, 224, 0.03); border: 1px solid rgba(241, 236, 224, 0.08); }
.wx3-d-ld-it small { font: 500 10.5px/1.3 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.03em; color: var(--wx-muted); text-align: center; }
.wx3-d-ld-ring { width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(#E3B45C calc(var(--p) * 1%), rgba(241, 236, 224, 0.14) 0); display: grid; place-items: center; transition: background 0.25s; }
.wx3-d-ld-ring-in { width: 41px; height: 41px; border-radius: 50%; background: #0E1728; display: grid; place-items: center; }
.wx3-d-ld-ring-in b { font: 700 11.5px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; color: #F1ECE0; }
.wx3-d-ld-dots { display: flex; gap: 7px; height: 56px; align-items: center; }
.wx3-d-ld-dots i { width: 11px; height: 11px; border-radius: 50%; background: #4A8AD8; }
.wx3-d-ld-dots i:nth-child(1) { transform: translateY(-4px); }
.wx3-d-ld-dots i:nth-child(2) { transform: translateY(2px); }
.wx3-d-ld-dots i:nth-child(3) { transform: translateY(-1px); }
.wx3-d-ld.is-run .wx3-d-ld-dots i { animation: wx3ddot 0.9s ease-in-out infinite; }
.wx3-d-ld.is-run .wx3-d-ld-dots i:nth-child(1) { animation-delay: 0s; }
.wx3-d-ld.is-run .wx3-d-ld-dots i:nth-child(2) { animation-delay: 0.15s; }
.wx3-d-ld.is-run .wx3-d-ld-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes wx3ddot { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(-9px); opacity: 1; } }
.wx3-d-ld-bar { position: relative; width: 76%; height: 8px; border-radius: 999px; background: rgba(241, 236, 224, 0.14); overflow: hidden; }
.wx3-d-ld-bar-f { position: absolute; inset: 0; width: 46%; border-radius: 999px; background: linear-gradient(90deg, #4A8AD8, #7FB0E6); }
.wx3-d-ld-bar-sh { position: absolute; top: 0; bottom: 0; width: 26px; left: -30px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); opacity: 0; }
.wx3-d-ld.is-run .wx3-d-ld-bar-f { animation: wx3dbarf 2.4s ease-in-out infinite; }
.wx3-d-ld.is-run .wx3-d-ld-bar-sh { opacity: 1; animation: wx3dbarsh 1.6s linear infinite; }
@keyframes wx3dbarf { 0% { width: 8%; } 70%, 100% { width: 88%; } }
@keyframes wx3dbarsh { 0% { left: -30px; } 100% { left: 100%; } }
.wx3-d-ld-cup { position: relative; width: 42px; height: 46px; color: #F1ECE0; }
.wx3-d-ld-cup svg { position: relative; z-index: 1; width: 100%; height: 100%; }
.wx3-d-ld-cup-f { position: absolute; left: 15%; right: 15%; bottom: 15%; height: 14px; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, #F3CF86, #E3B45C); clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); }
.wx3-d-ld.is-run .wx3-d-ld-cup-f { animation: wx3dcup 2.8s ease-in-out infinite; }
@keyframes wx3dcup { 0% { height: 2px; } 55%, 75% { height: 26px; } 100% { height: 2px; } }
@container (max-width: 360px) { .wx3-d-ld { padding: 11px; gap: 6px; } .wx3-d-ld-it small { font-size: 9px; } .wx3-d-ld-ring, .wx3-d-ld-ring-in { width: 46px; height: 46px; } .wx3-d-ld-ring-in { width: 33px; height: 33px; } }

/* ---------- 4. tarjeta «síguenos» ---------- */
.wx3-d-sc { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(74, 138, 216, 0.18), transparent 55%), #0F1B2D; }
.wx3-d-sc-card { position: relative; width: min(280px, 80cqw); padding: 20px 20px 22px; border: 0; border-radius: 20px; background: #F7F3EA; color: #0F1B2D; text-align: left; cursor: pointer; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4); font-family: Inter, system-ui, sans-serif; }
.wx3-d-sc-av { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 50%; background: linear-gradient(135deg, #E3B45C, #E8826B); color: #fff; font: 700 14px/1 Inter, sans-serif; }
.wx3-d-sc-name { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.wx3-d-sc-handle { display: block; margin-top: 1px; font-size: 12.5px; color: #6B7280; }
.wx3-d-sc-fol { margin: 10px 0 0; font-size: 12.5px; color: #6B7280; }
.wx3-d-sc-fol b { font-size: 15px; color: #0F1B2D; }
.wx3-d-sc-fan { position: absolute; right: 16px; top: 16px; display: flex; flex-direction: column; gap: 8px; }
.wx3-d-sc-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); opacity: 0; transform: translate(10px, -6px) scale(0.6); transition: opacity 0.22s, transform 0.38s cubic-bezier(0.3, 1.5, 0.5, 1); }
.wx3-d-sc-ic svg { width: 16px; height: 16px; }
.wx3-d-sc-ic1 { background: #C0512A; } .wx3-d-sc-ic2 { background: #25A55F; } .wx3-d-sc-ic3 { background: #4A8AD8; } .wx3-d-sc-ic4 { background: #16151A; }
.wx3-d-sc-card.is-open .wx3-d-sc-ic1 { opacity: 1; transform: translateX(4px) rotate(-6deg); }
.wx3-d-sc-card.is-open .wx3-d-sc-ic2 { opacity: 1; transform: translateX(1px) rotate(-2deg); transition-delay: 0.04s; }
.wx3-d-sc-card.is-open .wx3-d-sc-ic3 { opacity: 1; transform: translateX(-1px) rotate(2deg); transition-delay: 0.08s; }
.wx3-d-sc-card.is-open .wx3-d-sc-ic4 { opacity: 1; transform: translateX(-4px) rotate(6deg); transition-delay: 0.12s; }
.wx3-d-sc-card:focus-visible { outline: 2px solid var(--wx-gold); outline-offset: 3px; }
@container (max-width: 400px) { .wx3-d-sc { align-items: start; padding-top: 8%; } .wx3-d-sc-card { padding: 16px 16px 18px; } }
@container (max-width: 340px) { .wx3-d-sc-card { width: 88cqw; } }

/* ---------- 5. fondo con patrón liviano ---------- */
.wx3-d-pt { position: absolute; inset: 0; overflow: hidden; background: #F3ECE0; }
.wx3-d-pt-bg { position: absolute; inset: -6%; transform: translate(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -10px)); transition: transform 0.5s ease-out; }
.wx3-d-pt[data-pattern="dots"] .wx3-d-pt-bg { background-image: radial-gradient(rgba(15, 27, 45, 0.16) 1.6px, transparent 1.8px); background-size: 22px 22px; animation: wx3ptdriftd 46s linear infinite; }
.wx3-d-pt[data-pattern="lines"] .wx3-d-pt-bg { background-image: repeating-linear-gradient(128deg, rgba(15, 27, 45, 0.12) 0 2px, transparent 2px 20px); animation: wx3ptdriftl 50s linear infinite; }
.wx3-d-pt[data-pattern="rings"] .wx3-d-pt-bg { background-image: repeating-radial-gradient(circle at 30% 30%, rgba(15, 27, 45, 0.14) 0 2px, transparent 2px 26px); animation: wx3ptdriftr 60s linear infinite; }
@keyframes wx3ptdriftd { to { background-position: 220px 140px; } }
@keyframes wx3ptdriftl { to { background-position: 400px 0; } }
@keyframes wx3ptdriftr { to { background-position: 0 300px; } }
.wx3-d-pt-txt { position: relative; z-index: 2; max-width: 62%; margin: 15% 0 0 8%; }
.wx3-d-pt-txt .wx-mono { margin: 0 0 0.5em; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A6A2E; }
.wx3-d-pt-txt h4 { margin: 0 0 0.5em; font-size: clamp(20px, 4cqw, 28px); font-weight: 700; letter-spacing: -0.02em; color: #0F1B2D; }
.wx3-d-pt-txt p { margin: 0; max-width: 36ch; font-size: 13px; line-height: 1.5; color: #4A4234; }
.wx3-d-pt-sw { position: absolute; right: 6%; bottom: 9%; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 46%; }
.wx3-d-pt-sw button { padding: 7px 12px; border: 1.5px solid rgba(15, 27, 45, 0.18); border-radius: 999px; background: rgba(247, 243, 234, 0.8); color: #0F1B2D; font: 600 11.5px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.wx3-d-pt-sw button.is-on { background: #0F1B2D; border-color: #0F1B2D; color: #F7F3EA; }
.wx3-d-pt-sw button:focus-visible { outline: 2px solid var(--wx-gold); outline-offset: 2px; }
@container (max-width: 380px) { .wx3-d-pt-txt { max-width: 84%; margin: 10% 0 0 7%; } .wx3-d-pt-txt p { font-size: 11.5px; max-width: 30ch; } .wx3-d-pt-sw button { padding: 6px 10px; font-size: 10.5px; } }
@media (prefers-reduced-motion: reduce) { .wx3-d-pt-bg { animation: none !important; } }

/* ---------- 6. mosaico Bauhaus (fondo) ---------- */
.wx3-d-tzstage { background: #151022; }
.wx3-d-tz { position: absolute; inset: 0; }
.wx3-d-tz-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 1fr); }
.wx3-d-tz-t { position: relative; overflow: hidden; }
.wx3-d-tz-t::before { content: ''; position: absolute; inset: 0; background: var(--ink); animation: wx3dtz 8s ease-in-out infinite; animation-play-state: paused; }
.wx3-d-tz.is-run .wx3-d-tz-t::before { animation-play-state: running; }
@keyframes wx3dtz { 0%, 82% { transform: scale(1) rotate(0deg); } 91% { transform: scale(0.8) rotate(28deg); } 100% { transform: scale(1) rotate(0deg); } }
.wx3-d-tz-t:nth-child(5n+1) { background: #F7F3EA; --ink: #0F1B2D; }
.wx3-d-tz-t:nth-child(5n+2) { background: #E3B45C; --ink: #0F1B2D; }
.wx3-d-tz-t:nth-child(5n+3) { background: #4A8AD8; --ink: #F7F3EA; }
.wx3-d-tz-t:nth-child(5n+4) { background: #2F9E61; --ink: #F7F3EA; }
.wx3-d-tz-t:nth-child(5n) { background: #E8826B; --ink: #0F1B2D; }
.wx3-d-tz-t:nth-child(4n+1)::before { clip-path: circle(78% at 100% 100%); }
.wx3-d-tz-t:nth-child(4n+2)::before { clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.wx3-d-tz-t:nth-child(4n+3)::before { clip-path: circle(64% at 50% 0%); }
.wx3-d-tz-t:nth-child(4n)::before { clip-path: polygon(0 0, 55% 0, 100% 45%, 100% 100%, 45% 100%, 0 55%); }
.wx3-d-tz-t:nth-child(3n+1)::before { animation-delay: -1.6s; }
.wx3-d-tz-t:nth-child(3n+2)::before { animation-delay: -3.9s; }
.wx3-d-tz-t:nth-child(7n)::before { animation-delay: -6.1s; }
.wx3-d-tz-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(8, 6, 16, 0.82) 0%, rgba(8, 6, 16, 0.52) 46%, rgba(8, 6, 16, 0.06) 72%), linear-gradient(0deg, rgba(8, 6, 16, 0.6) 0%, transparent 30%); }
.wx3-d-tz-glow { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity 0.3s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 40%), rgba(255, 255, 255, 0.4), transparent 60%); mix-blend-mode: overlay; }
.wx3-d-tz.is-hover .wx3-d-tz-glow { opacity: 1; }
.wxd-gl[data-demo="tessera"] { --mk-ink: #F7F3EA; --mk-soft: rgba(247, 243, 234, 0.8); --mk-surf: rgba(10, 8, 20, 0.6); --mk-line: rgba(247, 243, 234, 0.26); --mk-acc: #F0BE72; --mk-b1: #F7F3EA; --mk-b1fg: #151022; }
@media (prefers-reduced-motion: reduce) { .wx3-d-tz-t::before { animation: none !important; } }

/* ---------- 7. bandas de degradado (fondo) ---------- */
.wx3-d-bdstage { background: #0A1220; }
.wx3-d-bd { position: absolute; inset: 0; overflow: hidden; }
.wx3-d-bd-bands { position: absolute; inset: -20% -10%; transform: rotate(calc(var(--wy, 0) * 1deg)) translateX(calc(var(--wx, 0) * 8px)); transition: transform 0.4s ease-out; background: repeating-linear-gradient(72deg, #E3B45C 0 9%, #C0392B 9% 18%, #0F1B2D 18% 27%, #4A8AD8 27% 36%, #E8826B 36% 45%, #2F9E61 45% 54%); background-size: 160% 160%; animation: wx3dbd 26s linear infinite; animation-play-state: paused; }
.wx3-d-bd.is-run .wx3-d-bd-bands { animation-play-state: running; }
@keyframes wx3dbd { 0% { background-position: 0 0; } 100% { background-position: 220px 140px; } }
.wx3-d-bd-grain { position: absolute; inset: 0; z-index: 1; opacity: 0.16; mix-blend-mode: overlay; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.9) 0.6px, transparent 0.8px); background-size: 3px 3px; }
.wx3-d-bd-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(247, 243, 234, 0.92) 0%, rgba(247, 243, 234, 0.7) 42%, transparent 68%), linear-gradient(0deg, rgba(247, 243, 234, 0.55) 0%, transparent 32%); }
.wxd-gl[data-demo="banding"] { --mk-ink: #0F1B2D; --mk-soft: rgba(15, 27, 45, 0.75); --mk-surf: rgba(247, 243, 234, 0.88); --mk-line: rgba(15, 27, 45, 0.18); --mk-acc: #C0392B; --mk-b1: #0F1B2D; --mk-b1fg: #F7F3EA; }
.wxd-gl[data-demo="banding"] .wxd-over h4 { text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .wx3-d-bd-bands { animation: none !important; } }

/* revisión 09-27: «Ejemplo» legible sobre el crema, y en celular el menú del degradado no se sale */
.wx-stage[data-demo="pattern"] .wx-exnote { color: rgba(15, 27, 45, 0.6); }
@container (max-width: 520px) { .wx-stage[data-demo="banding"] .wxd-mnav-links { display: none; } .wx-stage[data-demo="banding"] .wxd-mnav-cta { display: none; } }


/* ---- lote e_escenarios ---- */
/* nota de niveles en la introducción (la página se ordena por tema; el nivel queda en cada ficha) */
.wx-lvnote { margin: 12px 0 0; font-size: 14px; color: var(--wx-muted); }

/* contador 02: festejo al llegar a 1.000 clientes */
.wx-stage[data-demo="count"] .wxd-count > div:first-child b { position: relative; }
.wx-stage[data-demo="count"] .wxd-count > div:first-child b::after { content: '★'; position: absolute; right: -0.8em; top: -0.1em; font-size: 0.5em; color: #E3B45C; opacity: 0; transform: scale(0.3) rotate(-40deg); transition: opacity 0.3s, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
.wx-stage[data-demo="count"].is-party .wxd-count > div:first-child b::after { opacity: 1; transform: none; }
.wxd-count-party { position: absolute; left: 0; right: 0; bottom: 18%; margin: 0; text-align: center; font-weight: 700; font-size: clamp(13px, 2.2cqw, 16px); color: #E3B45C; opacity: 0; transform: translateY(8px); transition: opacity 0.4s 0.15s, transform 0.5s 0.15s; pointer-events: none; }
.wx-stage[data-demo="count"].is-party .wxd-count-party { opacity: 1; transform: none; }

/* escenarios propios: cada ficha con el ambiente de su rubro, para que ninguna parezca copia de otra */
.wx-stage.wx2-stage[data-demo="seal"] { background: linear-gradient(180deg, rgba(10, 18, 32, 0.45), rgba(10, 18, 32, 0.78)), url(assets/websites/fx3/f3-65.webp) center / cover; }
.wx-stage.wx2-stage[data-demo="stub"] { background: linear-gradient(180deg, rgba(12, 10, 8, 0.5), rgba(12, 10, 8, 0.82)), url(assets/websites/fx3/f3-42.webp) center / cover; }
.wx-stage.wx2-stage[data-demo="fillcup"] { background: radial-gradient(ellipse at 50% 30%, #4C7E6A 0%, #1C3A31 55%, #0E1F1A 100%); }
.wx-stage.wx2-stage[data-demo="qtyart"] { background: radial-gradient(ellipse at 50% 38%, #8A4A33 0%, #4A2217 55%, #1E0E09 100%); }
.wx-stage.wx2-stage[data-demo="otp"] { background: radial-gradient(ellipse at 50% 35%, #9A6A3E 0%, #5A3719 55%, #22140A 100%); }
.wx-stage.wx2-stage[data-demo="scratch"] { background: radial-gradient(ellipse at 50% 40%, #2C6C77 0%, #163D44 55%, #0A1E22 100%); }
.wx-stage.wx2-stage[data-demo="giftbox"] { background: radial-gradient(ellipse at 50% 38%, #7A3A6C 0%, #43203C 55%, #1C0C19 100%); }
.wx-stage.wx2-stage[data-demo="wallet"] { background: radial-gradient(ellipse at 50% 38%, #A35C73 0%, #5C2E3D 55%, #241118 100%); }
/* textura sutil de papel para que los degradados no se vean planos */
.wx-stage.wx2-stage:is([data-demo="fillcup"], [data-demo="qtyart"], [data-demo="otp"], [data-demo="scratch"], [data-demo="giftbox"], [data-demo="wallet"])::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background-image: radial-gradient(rgba(255, 255, 255, 0.35) 0.6px, transparent 0.8px); background-size: 5px 5px; }

/* índice de secciones: en pantallas anchas se ve completo (dos filas) en vez de esconder «3D y video» y «Comerciales» */
@media (min-width: 900px) { .wx-jump { flex-wrap: wrap; overflow-x: visible; } }

/* portada de la página: fondos alternativos (09-27). El clon del mosaico/franjas va detrás del texto, como el canvas. */
.wx-hero > .wx-hero-bg { position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; }
.wx-hero--tessera::before { background: radial-gradient(ellipse 60% 62% at 50% 54%, rgba(8, 14, 26, 0.86), rgba(8, 14, 26, 0.55) 70%, rgba(8, 14, 26, 0.3) 100%); }
.wx-hero--banding::before { background: radial-gradient(ellipse 60% 62% at 50% 54%, rgba(8, 14, 26, 0.82), rgba(8, 14, 26, 0.5) 72%, rgba(8, 14, 26, 0.25) 100%); }
.wx-hero--gold::before, .wx-hero--swirl::before, .wx-hero--flame::before { background: radial-gradient(ellipse 60% 60% at 50% 54%, rgba(8, 6, 4, 0.72), rgba(8, 6, 4, 0.34) 72%, rgba(8, 6, 4, 0.1) 100%); }
.wx-hero--mesh::before, .wx-hero--dots::before { background: radial-gradient(ellipse 60% 60% at 50% 54%, rgba(8, 14, 26, 0.8), rgba(8, 14, 26, 0.5) 72%, rgba(8, 14, 26, 0.3) 100%); }

/* portada con TITULAR VIVO (David 09-27 eligió la opción 3): fondo sobrio, el protagonista es el texto */
.wx-hero--type { background: radial-gradient(ellipse 80% 70% at 50% 0%, #1A2E52 0%, #0E1A30 45%, #0A1220 100%); }
.wx-hero--type canvas { display: none; }
.wx-hero--type::before { background-image: radial-gradient(rgba(241, 236, 224, 0.13) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, transparent 30%, #000 100%); mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, transparent 30%, #000 100%); }
.wx-hero--type .page-h1 { position: relative; }
.wx-hero--type .wx-hw { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(0.18em); transition: opacity 0.7s, filter 0.9s, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i) * 120ms); }
.wx-hero--type .page-h1.is-in .wx-hw { opacity: 1; filter: none; transform: none; }
.wx-hero--type .wx-hv { position: relative; white-space: nowrap; text-align: center; transition-property: opacity, filter, transform, width; transition-duration: 0.7s, 0.9s, 0.9s, 0.45s; }
.wx-hero--type .wx-hv::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 0.02em; height: 0.07em; border-radius: 1em; background: #E3B45C; transform: scaleX(0); transform-origin: left center; }
.wx-hero--type .wx-hv.is-line::after { animation: wxHvLine 2.4s cubic-bezier(0.3, 0.9, 0.3, 1) forwards; }
@keyframes wxHvLine { 0% { transform: scaleX(0); opacity: 1; } 30% { transform: scaleX(1); opacity: 1; } 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.wx-hero--type .wx-hv-meas { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: nowrap; }
.wx-hero--type .page-lede, .wx-hero--type .wx-hero-cta, .wx-hero--type .eyebrow { animation: wxHeroUp 0.9s 0.75s both cubic-bezier(0.2, 0.8, 0.2, 1); }
.wx-hero--type .wx-hero-cta { animation-delay: 0.95s; }
@keyframes wxHeroUp { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .wx-hero--type .wx-hw { opacity: 1; filter: none; transform: none; transition: none; } .wx-hero--type .page-lede, .wx-hero--type .wx-hero-cta, .wx-hero--type .eyebrow { animation: none; } }


/* ---- lote f_portadas ---- */
/* Lote F — «Portadas listas por rubro» (7 fichas). Prefijo wx3-f-, keyframes wx3f*. */

/* ---------- menú compartido (pill) ---------- */
.wx3-f-nav { position: absolute; z-index: 5; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px;
  padding: 7px 7px 7px 14px; border-radius: 999px; background: rgba(10, 18, 32, 0.62); border: 1px solid rgba(247, 243, 234, 0.16);
  color: #F7F3EA; font-size: 12px; line-height: 1; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); backdrop-filter: blur(6px); }
.wx3-f-nav-brand { font-weight: 700; letter-spacing: -0.01em; font-size: 13px; white-space: nowrap; }
.wx3-f-nav-tag { font: 500 9px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 6px; border-radius: 5px; border: 1px solid rgba(247, 243, 234, 0.22); color: rgba(247, 243, 234, 0.72); }
.wx3-f-nav-links { display: flex; gap: 14px; margin-left: auto; color: rgba(247, 243, 234, 0.74); }
.wx3-f-nav-links i { font-style: normal; white-space: nowrap; }
.wx3-f-nav-cta { padding: 8px 12px; border-radius: 999px; background: #E3B45C; color: #1A1206; font-weight: 600; white-space: nowrap; }
@container (max-width: 560px) { .wx3-f-nav-links { display: none; } .wx3-f-nav-cta { margin-left: auto; } }
/* portadas con menú sobre fondo claro (ptbento) */
.wx3-f-bn .wx3-f-nav { background: rgba(15, 27, 45, 0.9); }

.wx3-f-sub { margin: 0; font: 400 13px/1.42 Inter, system-ui, sans-serif; max-width: 40ch; }
.wx3-f-pill { border: 0; padding: 11px 18px; border-radius: 999px; font: 700 13px/1 Inter, system-ui, sans-serif; cursor: pointer;
  background: #E3B45C; color: #1A1206; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); transition: transform 0.25s, box-shadow 0.25s; }
.wx3-f-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(227, 180, 92, 0.5), 0 6px 16px rgba(0, 0, 0, 0.3); }
.wx3-f-pill--ghost { background: transparent; border: 1px solid rgba(247, 243, 234, 0.35); color: #F7F3EA; box-shadow: none; }
.wx3-f-pill--ghost:hover { border-color: #E3B45C; transform: translateY(-2px); box-shadow: none; }
.wx3-f-pill--wa { background: #2F9E61; color: #fff; }
.wx3-f-pill--wa:hover { box-shadow: 0 10px 26px rgba(47, 158, 97, 0.5); }

/* ---------- 1. ptfoto ---------- */
.wx3-f-ph { position: absolute; inset: 0; overflow: hidden; background: #0A1220; }
.wx3-f-ph-img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; transform: scale(1); }
.wx3-f-ph.is-run .wx3-f-ph-img { animation: wx3fkb 17s ease-in-out infinite alternate; }
@keyframes wx3fkb { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.1) translate(-1.2%, -1%); } }
.wx3-f-ph-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 32, 0.05) 0%, rgba(10, 18, 32, 0.18) 44%, rgba(6, 10, 18, 0.94) 100%); }
.wx3-f-ph-hero { position: absolute; left: 6%; right: 8%; bottom: 9%; z-index: 2; display: grid; gap: 8px; color: #F7F3EA; }
.wx3-f-ph-hero .wx-mono { margin: 0; color: #F0BE72; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.wx3-f-ph-hero h4 { margin: 0; font-size: clamp(21px, 3.6cqw, 32px); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.55); }
.wx3-f-ph-hero .wx3-f-sub { color: rgba(247, 243, 234, 0.84); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.wx3-f-ph-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.wx3-f-chip { font: 600 10.5px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; padding: 8px 12px; border-radius: 999px; background: rgba(10, 18, 32, 0.55); border: 1px solid rgba(247, 243, 234, 0.25); }
/* el detalle de ptfoto/ptvideo vive en los botones de abajo — la ayuda va arriba a la derecha, bajo el menú, para no taparlos */
[data-demo="ptfoto"] .wx-hint, [data-demo="ptvideo"] .wx-hint { left: auto; right: 12px; bottom: auto; top: 68px; }

/* ---------- 2. ptretrato ---------- */
.wx3-f-pr { position: absolute; inset: 0; display: grid; grid-template-columns: 38cqw 1fr; background: #0F1B2D; color: #F7F3EA; }
.wx3-f-pr-photo { position: relative; overflow: hidden; }
.wx3-f-pr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wx3-f-pr-frame { position: absolute; inset: 10px; border: 2px solid #E3B45C; border-radius: 4px; pointer-events: none; transition: transform 0.18s ease-out; will-change: transform; }
.wx3-f-pr-side { position: relative; display: grid; align-content: center; gap: 7px; padding: 8% 6%; }
.wx3-f-pr-side .wx-mono { margin: 0; color: #7FB0E6; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.wx3-f-pr-name { margin: 2px 0 0; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; line-height: 0.9; }
.wx3-f-pr-l { display: block; font-size: clamp(24px, 6.4cqw, 50px); overflow: hidden; }
.wx3-f-pr-l i { display: inline-block; opacity: 0; transform: translateY(70%); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: calc(var(--i) * 0.032s); }
.wx3-f-pr.is-run .wx3-f-pr-l i { opacity: 1; transform: translateY(0); }
.wx3-f-pr-side .wx3-f-sub { margin: 4px 0 2px; color: rgba(247, 243, 234, 0.78); font-style: normal; }
.wx3-f-pr-contact { margin: 2px 0 0; font: 500 10.5px/1.4 'JetBrains Mono', ui-monospace, Menlo, monospace; color: rgba(247, 243, 234, 0.58); }
@container (max-width: 560px) {
  .wx3-f-pr { grid-template-columns: 1fr; grid-template-rows: 1.05fr 1.2fr; }
  .wx3-f-pr-side { padding: 4% 7%; gap: 5px; align-content: center; }
  /* de la frente al mentón con aire: ni pegado arriba (corta frente) ni centrado (corta mentón) */
  .wx3-f-pr-img { object-position: center 12%; }
  .wx3-f-pr-l { font-size: clamp(22px, 11cqw, 40px); }
  .wx3-f-pr-side .wx3-f-sub { font-size: 12px; }
  .wx3-f-pr-contact { display: none; }
}
@media (hover: none) { [data-demo="ptretrato"] .wx-hint, [data-demo="ptfoto"] .wx-hint, [data-demo="ptsplit"] .wx-hint, [data-demo="ptproducto"] .wx-hint, [data-demo="pttitular"] .wx-hint { display: none; } }

/* ---------- 3. ptbento ---------- */
.wx3-f-bn { position: absolute; inset: 0; background: #F7F3EA; color: #0F1B2D; display: flex; flex-direction: column; }
.wx3-f-bn-head { padding: 66px 6% 2px; }
.wx3-f-bn-head .wx-mono { margin: 0; color: #C0512A; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.wx3-f-bn-head h4 { margin: 3px 0 0; font-size: clamp(17px, 3cqw, 23px); font-weight: 600; letter-spacing: -0.01em; }
/* grilla por nombre de área (no por span automático): con auto-placement, "c" y "d" caían en una fila
   implícita invisible y solo se veían 2 de las 4 tarjetas — con áreas nombradas las 4 quedan garantizadas. */
.wx3-f-bn-grid { position: relative; flex: 1; margin: 8px 5% 6%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 7px;
  grid-template-areas: "a a b c" "a a b d"; }
.wx3-f-bt { position: relative; overflow: hidden; border: 0; border-radius: 12px; padding: 0; cursor: pointer; background: #0F1B2D;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s; }
.wx3-f-bt--a { grid-area: a; }
.wx3-f-bt--b { grid-area: b; }
.wx3-f-bt--c { grid-area: c; }
.wx3-f-bt--d { grid-area: d; }
.wx3-f-bt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.wx3-f-bt-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(9, 14, 10, 0.82) 100%); }
.wx3-f-bt-cap { position: absolute; left: 9px; right: 9px; bottom: 8px; display: grid; color: #F7F3EA; }
.wx3-f-bt-cap b { font-size: 11.5px; font-weight: 700; }
.wx3-f-bt-cap small { font: 600 9.5px/1.3 'JetBrains Mono', ui-monospace, Menlo, monospace; color: #F0BE72; }
.wx3-f-bt.is-hi { transform: scale(1.045); z-index: 2; box-shadow: 0 16px 32px rgba(15, 27, 45, 0.4); }
.wx3-f-bt.is-hi .wx3-f-bt-img { transform: scale(1.08); }
@container (max-width: 560px) { .wx3-f-bn-head { padding: 62px 6% 2px; } .wx3-f-bn-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); margin: 8px 5% 46px;
  grid-template-areas: "a b" "c d"; } }

/* ---------- 4. ptsplit ---------- */
.wx3-f-sp { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 46cqw; background: #0A1220; color: #F7F3EA; }
.wx3-f-sp-text { position: relative; display: grid; align-content: center; gap: 9px; padding: 8% 7%; }
.wx3-f-sp-text .wx-mono { margin: 0; color: #7FB0E6; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.wx3-f-sp-text h4 { margin: 0; font-size: clamp(19px, 3.8cqw, 29px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.wx3-f-sp-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.wx3-f-sp-photo { position: relative; overflow: hidden; perspective: 700px; }
.wx3-f-sp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.22s ease-out; transform-origin: center; }
.wx3-f-sp-curtain { position: absolute; inset: 0; z-index: 2; background: #4A8AD8; transform-origin: top; transform: scaleY(1); }
.wx3-f-sp.is-run .wx3-f-sp-curtain { animation: wx3fcurtain 1.05s cubic-bezier(0.6, 0, 0.2, 1) forwards; }
@keyframes wx3fcurtain { to { transform: scaleY(0); } }
.wx3-f-sp-badge { position: absolute; right: 7%; bottom: 8%; z-index: 3; display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px;
  background: rgba(10, 18, 32, 0.72); border: 1px solid rgba(247, 243, 234, 0.25); color: #F7F3EA; }
.wx3-f-sp-badge b { font-size: 18px; font-weight: 700; }
.wx3-f-sp-badge small { font: 600 9px/1.3 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(247, 243, 234, 0.7); }
@container (max-width: 560px) { .wx3-f-sp { grid-template-columns: 1fr; grid-template-rows: 0.95fr 1.05fr; } .wx3-f-sp-text { padding: 62px 7% 3%; align-content: center; gap: 7px; } .wx3-f-sp-text h4 { font-size: clamp(18px, 6.6cqw, 24px); } }

/* ---------- 5. ptvideo ---------- */
.wx3-f-vd { position: absolute; inset: 0; overflow: hidden; background: #08111d; color: #F7F3EA; }
.wx3-f-vd-bg { position: absolute; inset: 0; }
.wx3-f-vd-sl { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; }
.wx3-f-vd-sl.is-on { opacity: 1; }
.wx3-f-vd.is-run .wx3-f-vd-sl.is-on { animation: wx3fkb2 6.8s linear forwards; }
@keyframes wx3fkb2 { from { transform: scale(1.02); } to { transform: scale(1.13); } }
.wx3-f-vd-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 12, 20, 0.2), rgba(4, 8, 14, 0.88)); }
.wx3-f-vd-hero { position: absolute; left: 6%; right: 8%; bottom: 9%; z-index: 2; display: grid; gap: 8px; }
.wx3-f-vd-hero .wx-mono { margin: 0; color: #8FD9AE; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.wx3-f-vd-hero h4 { margin: 0; font-size: clamp(21px, 3.6cqw, 32px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55); }
.wx3-f-vd-hero .wx3-f-sub { color: rgba(247, 243, 234, 0.82); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.wx3-f-vd-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- 6. ptproducto ---------- */
.wx3-f-pd { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 120% at 50% 26%, #16202f 0%, #0A1220 62%); color: #F7F3EA; }
.wx3-f-pd-spot { position: absolute; z-index: 0; width: 60cqw; height: 60cqw; left: var(--sx, 50%); top: var(--sy, 34%); transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(227, 180, 92, 0.3), transparent 65%); pointer-events: none; }
.wx3-f-pd-scrim { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, transparent, rgba(6, 10, 18, 0.95) 60%); pointer-events: none; }
/* el círculo se mide en cqw (ancho) — a propósito más chico que el alto real de la ficha, para no meterse en el titular de abajo */
.wx3-f-pd-stage { position: absolute; z-index: 2; left: 50%; top: 38%; transform: translate(-50%, -50%); width: 26cqw; height: 26cqw; border-radius: 50%; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(247, 243, 234, 0.08); }
.wx3-f-pd-ring { position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed rgba(227, 180, 92, 0.4); }
.wx3-f-pd-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wx3-f-pd-chip { position: absolute; z-index: 2; font: 600 9.5px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.03em;
  padding: 7px 11px; border-radius: 999px; background: rgba(10, 18, 32, 0.68); border: 1px solid rgba(247, 243, 234, 0.2); }
.wx3-f-pd-chip1 { left: 5%; top: 18%; } .wx3-f-pd-chip2 { right: 5%; top: 22%; } .wx3-f-pd-chip3 { left: 6%; top: 38%; } .wx3-f-pd-chip4 { right: 6%; top: 42%; }
.wx3-f-pd-hero { position: absolute; left: 6%; right: 6%; bottom: 5%; z-index: 3; display: grid; justify-items: center; gap: 8px; text-align: center; }
.wx3-f-pd-hero .wx-mono { margin: 0; color: #E8826B; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.wx3-f-pd-hero h4 { margin: 0; font-size: clamp(16px, 2.7cqw, 21px); font-weight: 600; max-width: 34ch; }
@container (max-width: 560px) {
  .wx3-f-pd-stage { width: 34cqw; height: 34cqw; }
  /* en celular solo 2 chips, uno claramente arriba y otro claramente abajo del círculo — los 4 no cabían sin tocarlo */
  .wx3-f-pd-chip { max-width: 40%; text-align: center; }
  .wx3-f-pd-chip2, .wx3-f-pd-chip3 { display: none; }
  .wx3-f-pd-chip1 { top: 14%; }
  .wx3-f-pd-chip4 { top: 57%; }
}

/* ---------- 7. pttitular ---------- */
.wx3-f-tt { position: absolute; inset: 0; background: #0F1B2D; color: #F7F3EA; display: flex; flex-direction: column; }
.wx3-f-tt-wrap { flex: 1; display: grid; align-content: center; gap: 14px; padding: 6% 6% 9%; }
.wx3-f-tt-h { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 0.86; text-transform: uppercase; }
.wx3-f-tt-l1, .wx3-f-tt-l2 { display: block; font-size: clamp(28px, 10cqw, 72px); position: relative; width: fit-content; }
.wx3-f-tt-h { font-family: Inter, system-ui, sans-serif; }
.wx3-f-tt-h i { display: inline-block; font-style: normal; transition: transform 0.16s ease-out; will-change: transform; }
.wx3-f-tt-gold { color: #E3B45C; }
.wx3-f-tt-ul { position: absolute; left: 0; bottom: -8px; height: 5px; width: 0; background: #E3B45C; border-radius: 3px; }
.wx3-f-tt.is-run .wx3-f-tt-ul { animation: wx3fdraw 0.9s ease 0.45s forwards; }
@keyframes wx3fdraw { to { width: 100%; } }
.wx3-f-tt .wx3-f-sub { color: rgba(247, 243, 234, 0.72); font-size: 13px; max-width: 44ch; }

/* ---------- respeto a "menos movimiento" ---------- */
@media (prefers-reduced-motion: reduce) {
  .wx3-f-ph-img, .wx3-f-vd-sl, .wx3-f-pr-l i, .wx3-f-tt-ul, .wx3-f-sp-curtain, .wx3-f-bt, .wx3-f-bt-img { animation: none !important; transition: none !important; }
  .wx3-f-pr-l i { opacity: 1 !important; transform: none !important; }
  .wx3-f-tt-ul { width: 100% !important; }
  .wx3-f-sp-curtain { transform: scaleY(0) !important; }
}

/* revisión 09-27: la ayuda del mosaico pisaba la primera tarjeta */
.wx-stage[data-demo="ptbento"] .wx-hint { left: auto; right: 12px; bottom: auto; top: 68px; }


/* ---- lote g_portadas ---- */
/* Lote G — «Portadas listas por rubro» (6 fichas, 09-27). Reusa la familia .wxd-gl/.wxd-mnav/.wxd-over.wxd-hero/
   .wxd-hero-btns (ver websites.css, misma que «Fondos vivos»), con sus propias --mk-* por [data-demo] y su propio
   detalle distinto en cada una. Nada de backdrop-filter (caro en celulares de gama baja); el «vidrio» se logra con
   rgba + borde, igual que .wxd-mnav/.wxd-mchip ya lo hacen. */

/* ---------- paletas por ficha ---------- */
.wxd-gl[data-demo="ptmapa"] { --mk-ink: #F0F5FB; --mk-soft: rgba(240, 245, 251, 0.78); --mk-surf: rgba(10, 18, 32, 0.72); --mk-line: rgba(240, 245, 251, 0.2); --mk-acc: #7FB0E6; --mk-b1: #4A8AD8; --mk-b1fg: #F7F3EA; }
.wxd-gl[data-demo="pticonos"] { --mk-ink: #F7F1E4; --mk-soft: rgba(247, 241, 228, 0.78); --mk-surf: rgba(28, 16, 10, 0.68); --mk-line: rgba(247, 241, 228, 0.22); --mk-acc: #E8826B; --mk-b1: #E3B45C; --mk-b1fg: #241304; }
.wxd-gl[data-demo="ptcaras"] { --mk-ink: #FBF0EE; --mk-soft: rgba(251, 240, 238, 0.8); --mk-surf: rgba(40, 14, 24, 0.66); --mk-line: rgba(251, 240, 238, 0.24); --mk-acc: #E8826B; --mk-b1: #E8826B; --mk-b1fg: #2A0E12; }
.wxd-gl[data-demo="ptestudio"] { --mk-ink: #F3EEE4; --mk-soft: rgba(243, 238, 228, 0.75); --mk-surf: rgba(6, 8, 6, 0.62); --mk-line: rgba(243, 238, 228, 0.18); --mk-acc: #E3B45C; --mk-b1: #E3B45C; --mk-b1fg: #14200C; }

/* ---------- 1. Automotora Pacífico — números que cuentan ---------- */
.wx3-g-num-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.wx3-g-numstage .wxd-hero { bottom: 27%; max-width: 60%; }
.wx3-g-nums { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; gap: 8px; padding: 12px 6% 16px; cursor: pointer; }
.wx3-g-num-it { flex: 1; text-align: center; padding: 9px 4px 10px; border-radius: 13px; background: var(--mk-surf); border: 1px solid var(--mk-line); color: var(--mk-ink); }
.wx3-g-num-it b { display: block; font: 700 clamp(17px, 3cqw, 25px)/1 'JetBrains Mono', ui-monospace, Menlo, monospace; color: var(--mk-acc); font-variant-numeric: tabular-nums; }
.wx3-g-num-it small { display: block; margin-top: 4px; font-size: 9.5px; line-height: 1.25; color: var(--mk-soft); }
[data-demo="ptnumeros"] .wx-hint { bottom: auto; top: 64px; }
@container (max-width: 560px) { .wx3-g-numstage .wxd-hero { bottom: 32%; max-width: 88%; } .wx3-g-nums { padding: 8px 5% 5%; } .wx3-g-num-it small { font-size: 8.5px; } }

/* ---------- 2. Cerrajería 24 h — mapa de cobertura ---------- */
.wx3-g-mapstage { background: radial-gradient(ellipse 90% 80% at 30% 20%, #14283F 0%, #0A1220 68%); }
.wx3-g-mapstage .wxd-hero { bottom: 9%; max-width: 52%; }
.wx3-g-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wx3-g-map-sea { fill: rgba(74, 138, 216, 0.22); }
.wx3-g-map-street { stroke: rgba(240, 245, 251, 0.16); stroke-width: 2.4; }
.wx3-g-map-park { fill: rgba(47, 158, 97, 0.28); }
.wx3-g-map-cov { fill: rgba(127, 176, 230, 0.1); stroke: rgba(127, 176, 230, 0.4); stroke-width: 1.5; }
.wx3-g-map-covring { fill: none; stroke: #7FB0E6; stroke-width: 2; opacity: 0; transform-origin: 200px 150px; transform-box: fill-box; }
.wx3-g-mapstage.is-run .wx3-g-map-covring { animation: wx3gPulse 3.2s ease-out infinite; }
@keyframes wx3gPulse { 0% { transform: scale(0.72); opacity: 0.65; } 80%, 100% { transform: scale(1.14); opacity: 0; } }
.wx3-g-hq circle { fill: #F7F3EA; }
.wx3-g-hq path { fill: #0F1B2D; }
.wx3-g-pin-halo { fill: rgba(240, 245, 251, 0.14); }
.wx3-g-pin-dot { fill: #DCE6F2; transition: fill 0.3s, transform 0.3s; transform-box: fill-box; transform-origin: center; }
.wx3-g-pin.is-on .wx3-g-pin-dot { fill: #E3B45C; transform: scale(1.35); }
.wx3-g-pin.is-on .wx3-g-pin-halo { fill: rgba(227, 180, 92, 0.32); }
.wx3-g-map-card { position: absolute; z-index: 3; right: 5%; top: 12%; width: 40%; min-width: 168px; padding: 12px 14px 13px; border-radius: 14px; background: var(--mk-surf); border: 1px solid var(--mk-line); color: var(--mk-ink); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32); }
.wx3-g-map-lab { margin: 0 0 7px; font-size: 12px; font-weight: 600; }
.wx3-g-map-sel { width: 100%; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--mk-line); background: rgba(0, 0, 0, 0.22); color: var(--mk-ink); font: 600 12px/1.2 Inter, system-ui, sans-serif; }
.wx3-g-map-resp { margin: 8px 0 0; font-size: 12.5px; color: var(--mk-soft); }
.wx3-g-map-resp b { color: #7FDCA0; font-weight: 700; display: inline-block; }
.wx3-g-map-resp.is-hit b { animation: wx3gHit 0.4s; }
@keyframes wx3gHit { 30% { transform: scale(1.14); } }
@container (max-width: 560px) {
  .wx3-g-mapstage .wxd-hero { bottom: 40%; max-width: 88%; }
  .wx3-g-mapstage .wxd-hero::before { content: ''; position: absolute; inset: -10% -16%; z-index: -1; background: radial-gradient(ellipse 95% 95% at 30% 55%, rgba(6, 11, 20, 0.86), transparent 78%); }
  .wx3-g-map-card { left: 6%; right: 6%; width: auto; top: auto; bottom: 8%; }
}

/* ---------- 3. Barbería Don Beto — fondo de íconos ---------- */
.wx3-g-iconstage { background: radial-gradient(ellipse 100% 90% at 50% 20%, #2A1B10 0%, #17100A 70%); }
.wx3-g-iconstage .wxd-hero::before { content: ''; position: absolute; inset: -8% -10%; z-index: -1; background: radial-gradient(ellipse 80% 85% at 20% 60%, rgba(15, 9, 5, 0.72), transparent 75%); }
.wx3-g-icons { position: absolute; inset: 0; overflow: hidden; }
.wx3-g-icons-bg { position: absolute; inset: -12%; background-repeat: repeat; background-size: 128px 128px; animation: wx3gIconDrift 60s linear infinite; }
@keyframes wx3gIconDrift { to { background-position: 256px 256px; } }
.wx3-g-icons-glow { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s; mix-blend-mode: overlay; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 40%), rgba(255, 255, 255, 0.55), transparent 62%); }
.wx3-g-icons.is-run.is-hover .wx3-g-icons-glow { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wx3-g-icons-bg { animation: none !important; } }

/* ---------- 4. Pintores del Norte — cotizador de 2 campos ---------- */
.wx3-g-cotstage .wxd-hero { bottom: 11%; max-width: 50%; }
.wx3-g-quote { position: absolute; z-index: 3; right: 5%; top: 18%; width: 38%; min-width: 172px; padding: 12px 14px 13px; border-radius: 16px; background: var(--mk-surf); border: 1px solid var(--mk-line); color: var(--mk-ink); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); display: grid; gap: 8px; }
.wx3-g-q-lab { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--mk-soft); }
.wx3-g-q-row { display: flex; align-items: center; gap: 10px; }
.wx3-g-q-range { flex: 1; accent-color: var(--mk-acc); }
.wx3-g-q-m2 { font: 700 13px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; white-space: nowrap; }
.wx3-g-q-types { display: flex; gap: 6px; }
.wx3-g-q-t { flex: 1; padding: 6px 4px; border-radius: 999px; border: 1px solid var(--mk-line); background: rgba(0, 0, 0, 0.18); color: var(--mk-ink); font: 600 10.5px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.wx3-g-q-t.is-on { background: var(--mk-acc); border-color: var(--mk-acc); color: #241304; }
.wx3-g-q-price { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 0 0; padding-top: 8px; border-top: 1px solid var(--mk-line); font-size: 11.5px; color: var(--mk-soft); }
.wx3-g-q-price b { font-size: 21px; font-weight: 700; color: var(--mk-ink); }
.wx3-g-q-price b.is-roll { animation: wx3gHit 0.4s; }
.wx3-g-q-go { display: block; text-align: center; padding: 9px 14px; border-radius: 999px; font: 600 12.5px/1 Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
@container (max-width: 560px) {
  .wx3-g-cotstage .wxd-hero { bottom: 54%; max-width: 88%; }
  .wx3-g-cotstage .wxd-hero-sub { display: none; }
  .wx3-g-quote { left: 6%; right: 6%; width: auto; top: auto; bottom: 6%; padding: 10px 13px 11px; gap: 7px; }
  .wx3-g-q-price b { font-size: 18px; }
}

/* ---------- 5. Nails Studio — caras de clientes felices ---------- */
.wx3-g-carastage { background: radial-gradient(ellipse 100% 85% at 70% 15%, #4A1F30 0%, #1E0A14 70%); }
.wx3-g-carastage .wxd-hero { gap: 5px; bottom: 8%; }
.wx3-g-faces { display: flex; align-items: center; margin: 1px 0 0; }
.wx3-g-face { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(251, 240, 238, 0.5); background: var(--bg, #4A8AD8); color: #fff; font: 700 10px/1 Inter, system-ui, sans-serif; display: grid; place-items: center; cursor: pointer; z-index: calc(10 - var(--i)); opacity: 0; transform: translateY(6px) scale(0.7); transition: opacity 0.4s, transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1); transition-delay: calc(var(--i) * 90ms); }
.wx3-g-face + .wx3-g-face { margin-left: -10px; }
.wx3-g-faces.is-in .wx3-g-face { opacity: 1; transform: none; }
.wx3-g-face-more { background: rgba(251, 240, 238, 0.18); border-style: dashed; font-size: 14px; cursor: default; }
.wx3-g-face-tip { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translate(-50%, 4px); width: 128px; padding: 7px 9px; border-radius: 9px; background: #FBF0EE; color: #2A0E12; font: 500 10.5px/1.35 Inter, system-ui, sans-serif; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3); z-index: 20; }
.wx3-g-face-tip::after { content: ''; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; margin-left: -4px; margin-top: -4px; background: inherit; transform: rotate(45deg); }
@media (hover: hover) { .wx3-g-face:hover .wx3-g-face-tip { opacity: 1; transform: translate(-50%, 0); } }
.wx3-g-face.is-open .wx3-g-face-tip { opacity: 1; transform: translate(-50%, 0); }
.wx3-g-face-stars { margin: 6px 0 0; font-size: 14px; letter-spacing: 2px; color: #E3B45C; }
.wx3-g-face-cnt { margin: 2px 0 0; font-size: 12.5px; color: var(--mk-soft); }
.wx3-g-face-cnt b { font-size: 15px; font-weight: 700; color: var(--mk-ink); font-variant-numeric: tabular-nums; }
@container (max-width: 560px) { .wx3-g-carastage .wxd-hero { max-width: 88%; bottom: 9%; gap: 7px; } .wx3-g-face { width: 30px; height: 30px; } }

/* ---------- 6. Vespro — producto con fondo de estudio ---------- */
.wx3-g-eststage { background: radial-gradient(ellipse 60% 55% at 50% 8%, rgba(243, 238, 228, 0.14), transparent 62%), #0A0C09; overflow: hidden; }
.wx3-g-est-spot { position: absolute; inset: 0; background: radial-gradient(ellipse 46% 60% at 50% 6%, rgba(255, 250, 235, 0.32), transparent 60%); }
.wx3-g-est-word { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: clamp(46px, 15cqw, 108px); letter-spacing: 0.01em; color: rgba(243, 238, 228, 0.1); white-space: nowrap; pointer-events: none; }
.wx3-g-est-bottle { position: absolute; right: 9%; top: 18%; left: auto; width: 16%; max-width: 82px; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.55)); transform-origin: 50% 88%; will-change: transform; }
.wx3-g-est-bottle svg { display: block; width: 100%; height: auto; }
.wx3-g-est-bottle.is-idle { animation: wx3gBottleFloat 6.5s ease-in-out infinite; }
@keyframes wx3gBottleFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .wx3-g-est-bottle.is-idle { animation: none !important; } }
.wx3-g-eststage .wxd-hero { bottom: 9%; left: 6%; max-width: 55%; }
.wx3-g-est-cta { position: absolute; z-index: 3; right: 6%; bottom: 9%; display: grid; justify-items: end; gap: 8px; text-align: right; }
.wx3-g-est-price { font: 700 26px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; color: var(--mk-acc); }
.wx3-g-est-cta .wxd-b1 { display: inline-block; padding: 9px 16px; border-radius: 999px; font: 600 12.5px/1 Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
@container (max-width: 560px) {
  .wx3-g-eststage .wxd-hero { max-width: 88%; bottom: 27%; left: 6%; }
  .wx3-g-est-cta { left: 6%; right: 6%; bottom: 8%; justify-items: start; text-align: left; gap: 6px; }
  .wx3-g-est-price { font-size: 20px; }
  .wx3-g-est-bottle { left: 50%; right: auto; top: 12%; width: 54px; max-width: 54px; margin-left: -27px; }   /* revisión 09-27: antes 40px, se veía perdida */
}

/* revisión 09-27: en celular el botón del menú del cotizador se salía por la derecha */
@container (max-width: 560px) { .wx-stage[data-demo="ptcotiza"] .wxd-mnav-cta { display: none; } }
@container (max-width: 560px) { .wx-stage[data-demo="ptcotiza"] .wx-hint { left: auto; right: 12px; bottom: auto; top: 68px; } }


/* ---- lote h_portadas ---- */
/* Lote H · estándar nuevo de portadas (09-27). Tipografías propias de cada marca (OFL, servidas desde nuestro servidor). */
@font-face { font-family: 'Young Serif'; src: url(assets/fonts/youngserif-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url(assets/fonts/fraunces-600-latin.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url(assets/fonts/fraunces-italic-latin.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Anton'; src: url(assets/fonts/anton-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }

/* ficha a todo el ancho de la página: la portada se ve del tamaño de un sitio real; la explicación va debajo en dos columnas.
   (article + :nth-child(n) sube la especificidad sobre la regla «última ficha impar» de websites.css) */
.wx-grid > article.wx-fx:has(.hp-win):nth-child(n) { grid-column: 1 / -1; grid-template-columns: 1fr; grid-template-rows: auto auto; }
.wx-grid > article.wx-fx:has(.hp-win):nth-child(n) .wx-stage { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--wx-line); }
@media (min-width: 861px) {
  .wx-grid > article.wx-fx:has(.hp-win):nth-child(n) .wx-body { grid-template-columns: 1.15fr 1fr; column-gap: 40px; row-gap: 10px; align-content: start; padding: 24px 30px 26px; }
  .wx-fx:has(.hp-win) .wx-body > .wx-meta { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .wx-fx:has(.hp-win) .wx-body > .wx-chips { grid-column: 2; grid-row: 4; }
}
.wx-stage:has(.hp-win) { background: #15171B; }

/* marco de navegador */
.hp-win { position: absolute; inset: 0; display: grid; grid-template-rows: 30px 1fr; }
.hp-bar { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #2A2C31; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.hp-win--light .hp-bar { background: #E8E5DF; border-bottom-color: rgba(0, 0, 0, 0.08); }
.hp-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; flex: none; }
.hp-bar > i:nth-child(2) { background: #FEBC2E; } .hp-bar > i:nth-child(3) { background: #28C840; }
.hp-url { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 3px 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.72); font: 500 11px/1.2 Inter, system-ui, sans-serif; white-space: nowrap; }
.hp-win--light .hp-url { background: rgba(255, 255, 255, 0.75); color: #3A3833; }
.hp-url b { font-size: 9px; filter: grayscale(1); opacity: 0.7; }
.hp-site { position: relative; overflow: hidden; container-type: inline-size; }
.hp-tag { font: 500 9px/1 'JetBrains Mono', ui-monospace, monospace; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; border: 1px solid currentColor; opacity: 0.55; }
/* en las portadas grandes la explicación va al lado: sin etiqueta de ayuda encima del diseño */
.wx-stage:has(.hp-win) .wx-hint { display: none; }

/* ===== El Muelle · marisquería (foto a todo el ancho) ===== */
.hp-mu-bg { position: absolute; inset: 0; }
.hp-mu-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; transform: scale(1.04); transform-origin: 70% 60%; }
.is-run .hp-mu-bg img { animation: hpKen 22s ease-in-out infinite alternate; }
@keyframes hpKen { to { transform: scale(1.12) translate(-1.5%, -1%); } }
.hp-mu-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 22, 28, 0.9) 0%, rgba(6, 22, 28, 0.62) 38%, rgba(6, 22, 28, 0.05) 70%), linear-gradient(0deg, rgba(6, 22, 28, 0.7), transparent 32%); }
.hp-mu-nav { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 3.2cqw 5cqw; color: #F6EEDF; }
.hp-mu-logo { font: 400 clamp(17px, 2.5cqw, 26px)/1 'Young Serif', Georgia, serif; letter-spacing: -0.01em; }
.hp-mu-links { margin-left: auto; display: flex; gap: 2.6cqw; font: 500 clamp(11px, 1.35cqw, 14px)/1 Inter, system-ui, sans-serif; opacity: 0.9; }
.hp-mu-links i { font-style: normal; }
.hp-mu-copy { position: absolute; z-index: 2; left: 5cqw; top: 50%; transform: translateY(-58%); max-width: 46cqw; color: #F6EEDF; }
.hp-mu-k { margin: 0 0 1.4cqw; font: 500 clamp(9.5px, 1.15cqw, 12px)/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #F3C9A0; }
.hp-mu-h { margin: 0; font: 400 clamp(34px, 7.4cqw, 86px)/0.98 'Young Serif', Georgia, serif; letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.hp-mu-sub { margin: 1.8cqw 0 2.6cqw; max-width: 36ch; font: 400 clamp(12.5px, 1.55cqw, 17px)/1.5 Inter, system-ui, sans-serif; color: rgba(246, 238, 223, 0.86); }
.hp-mu-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hp-mu-btns span { padding: clamp(9px, 1.2cqw, 13px) clamp(16px, 2.2cqw, 24px); border-radius: 999px; font: 600 clamp(12px, 1.35cqw, 15px)/1 Inter, system-ui, sans-serif; transition: transform 0.25s, background 0.25s, box-shadow 0.25s; }
.hp-mu-b1 { background: #F08A5D; color: #1C0E06; box-shadow: 0 10px 26px rgba(240, 138, 93, 0.35); }
.hp-mu-b2 { border: 1px solid rgba(246, 238, 223, 0.5); color: #F6EEDF; backdrop-filter: blur(6px); }
.hp-site:hover .hp-mu-b1 { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(240, 138, 93, 0.5); }
.hp-mu-strip { position: absolute; z-index: 2; left: 5cqw; right: 5cqw; bottom: 3.6cqw; display: flex; align-items: center; gap: 22px; padding-top: 2cqw; border-top: 1px solid rgba(246, 238, 223, 0.22); font: 500 clamp(10.5px, 1.2cqw, 13px)/1.2 Inter, system-ui, sans-serif; color: rgba(246, 238, 223, 0.82); }
.hp-mu-fish { margin: 0 0 0 auto; display: flex; align-items: baseline; gap: 8px; }
.hp-mu-fish small { font: 500 clamp(9px, 1cqw, 11px)/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #F3C9A0; }
.hp-mu-fish b { font: 400 clamp(14px, 1.9cqw, 21px)/1 'Young Serif', Georgia, serif; color: #F6EEDF; transition: opacity 0.35s, transform 0.35s; }
.hp-mu-fish b.is-out { opacity: 0; transform: translateY(6px); }
@container (max-width: 520px) {
  [data-demo="pmuelle"] .hp-site { background: #081A20; }
  .hp-mu-bg { bottom: 44%; }
  .hp-mu-bg img { object-position: 78% 60%; }
  .hp-mu-bg::after { background: linear-gradient(180deg, rgba(8, 26, 32, 0.55) 0%, rgba(8, 26, 32, 0) 30%, rgba(8, 26, 32, 0) 62%, #081A20 100%); }
  .hp-mu-nav { padding: 16px 18px; } .hp-mu-links { display: none; } [data-demo="pmuelle"] .hp-tag { margin-left: auto; }
  .hp-mu-copy { top: auto; bottom: 64px; transform: none; left: 18px; right: 18px; max-width: none; }
  .hp-mu-k { margin-bottom: 8px; } .hp-mu-h { font-size: 40px; } .hp-mu-sub { margin: 10px 0 14px; font-size: 13px; }
  .hp-mu-strip { left: 18px; right: 18px; bottom: 16px; gap: 12px; padding-top: 10px; } .hp-mu-strip > span:nth-child(2) { display: none; }
}

/* ===== David Jara · retrato + nombre gigante (fondo claro) ===== */
[data-demo="pretrato"] .hp-site { background: radial-gradient(ellipse 60% 70% at 78% 40%, #FFF9EE 0%, #F2EBDF 60%, #EAE1D2 100%); color: #1B1712; }
.hp-re-nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 3cqw 5cqw; }
.hp-re-mono { display: grid; place-items: center; width: clamp(28px, 3.4cqw, 38px); aspect-ratio: 1; border-radius: 50%; background: #1B1712; color: #F4EFE6; font: 600 clamp(11px, 1.3cqw, 14px)/1 'Fraunces', Georgia, serif; letter-spacing: 0.02em; }
.hp-re-links { margin-left: auto; display: flex; gap: 2.4cqw; font: 500 clamp(11px, 1.3cqw, 14px)/1 Inter, system-ui, sans-serif; color: #4A4238; }
.hp-re-links i { font-style: normal; }
.hp-re-cta { padding: 8px 14px; border-radius: 999px; border: 1.5px solid #1B1712; font: 600 clamp(11px, 1.25cqw, 13px)/1 Inter, system-ui, sans-serif; }
.hp-re-copy { position: absolute; z-index: 2; left: 5cqw; top: 52%; transform: translateY(-50%); width: 56cqw; }
.hp-re-k { margin: 0 0 1.4cqw; font: 500 clamp(9.5px, 1.1cqw, 12px)/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.13em; text-transform: uppercase; color: #9A5B2E; }
.hp-re-h { margin: 0; display: grid; font: 600 clamp(40px, 9.6cqw, 118px)/0.88 'Fraunces', Georgia, serif; letter-spacing: -0.045em; }
.hp-re-h > span { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hp-re-l2 { font-style: italic; font-weight: 400; padding-left: 0.5em; color: #9A5B2E; }
.hp-re-l2 i { font-style: normal; color: #1B1712; }
.hp-re-h > span { transform: translateY(0); }
.hp-site .hp-re-h > span { clip-path: inset(0 0 0 0); }
.hp-re-h.is-hidden > span { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); }
.hp-re-h > span { transition: clip-path 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hp-re-h > span:nth-child(2) { transition-delay: 0.15s; }
.hp-re-sub { margin: 2cqw 0 2.6cqw; max-width: 40ch; font: 400 clamp(12.5px, 1.5cqw, 16.5px)/1.55 Inter, system-ui, sans-serif; color: #4A4238; }
.hp-re-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hp-re-btns span { padding: clamp(9px, 1.2cqw, 13px) clamp(16px, 2.2cqw, 24px); border-radius: 999px; font: 600 clamp(12px, 1.35cqw, 15px)/1 Inter, system-ui, sans-serif; }
.hp-re-b1 { background: #1B1712; color: #F4EFE6; }
.hp-re-b2 { border: 1.5px solid rgba(27, 23, 18, 0.35); }
.hp-re-pic { position: absolute; z-index: 1; right: 6cqw; bottom: 0; width: 31cqw; height: 84%; margin: 0; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hp-re-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; border-radius: 999px 999px 0 0; box-shadow: 0 30px 60px -20px rgba(60, 40, 20, 0.45); }
.hp-re-card { position: absolute; left: -9cqw; bottom: 12%; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 252, 245, 0.92); backdrop-filter: blur(8px); box-shadow: 0 16px 36px -12px rgba(60, 40, 20, 0.35); font: 500 clamp(10px, 1.15cqw, 12.5px)/1.25 Inter, system-ui, sans-serif; color: #4A4238; max-width: 17cqw; }
.hp-re-card b { font: 600 clamp(24px, 3.2cqw, 36px)/1 'Fraunces', Georgia, serif; color: #1B1712; }
.hp-re-badge { position: absolute; right: -4cqw; top: 6%; width: clamp(70px, 10cqw, 118px); fill: #1B1712; }
.hp-re-badge text { font: 600 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 1.6px; }
.hp-re-badge circle { fill: #9A5B2E; }
.is-run .hp-re-badge { animation: hpSpin 16s linear infinite; }
@keyframes hpSpin { to { transform: rotate(360deg); } }
@container (max-width: 520px) {
  .hp-re-nav { padding: 14px 16px; } .hp-re-links { display: none; } .hp-re-cta { margin-left: auto; }
  .hp-re-pic { right: 50%; transform: translateX(50%); top: 56px; bottom: auto; width: 46cqw; height: 31%; }
  .hp-re-pic img { border-radius: 999px 999px 18px 18px; }
  .hp-re-card { left: auto; right: -14cqw; bottom: -6px; max-width: 34cqw; padding: 9px 11px; }
  .hp-re-badge { right: auto; left: -12cqw; top: 2%; width: 64px; }
  .hp-re-copy { top: auto; bottom: 18px; transform: none; left: 16px; right: 16px; width: auto; }
  .hp-re-h { font-size: 44px; } .hp-re-sub { margin: 8px 0 12px; font-size: 12.5px; } .hp-re-k { display: none; }
  .hp-re-card { right: -22cqw; bottom: 8px; } .hp-re-badge { left: -16cqw; width: 56px; }
}

/* ===== Taller Norte · titular gigante (amarillo señalética) ===== */
[data-demo="ptaller"] .hp-site { background: #F2C230; color: #111111; }
[data-demo="ptaller"] .hp-site::before { content: ''; position: absolute; inset: 0; opacity: 0.08; background-image: radial-gradient(#111 0.8px, transparent 1px); background-size: 6px 6px; pointer-events: none; }
.hp-ta-nav { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 2.8cqw 4.4cqw; }
.hp-ta-logo { font: 400 clamp(13px, 1.7cqw, 19px)/0.92 'Anton', Impact, sans-serif; letter-spacing: 0.02em; }
.hp-ta-live { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: #111; color: #F2C230; font: 500 clamp(10px, 1.2cqw, 12.5px)/1 'JetBrains Mono', ui-monospace, monospace; }
.hp-ta-live i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC6E; box-shadow: 0 0 0 0 rgba(61, 220, 110, 0.7); }
.is-run .hp-ta-live i { animation: hpPulse 1.8s infinite; }
.hp-ta-live.is-closed i { background: #F2C230; animation: none; box-shadow: none; }
@keyframes hpPulse { 70% { box-shadow: 0 0 0 7px rgba(61, 220, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 110, 0); } }
.hp-ta-h { position: absolute; z-index: 1; left: 4.4cqw; right: 4.4cqw; top: 14%; margin: 0; display: grid; font: 400 16.5cqw/0.9 'Anton', Impact, sans-serif; letter-spacing: -0.01em; text-transform: uppercase; }
.hp-ta-h > span { display: flex; }
.hp-ta-h .hp-l { display: inline-block; transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1), color 0.25s; }
.hp-ta-w2 { color: #111; -webkit-text-stroke: 0; }
.hp-ta-w2 .hp-l:last-child { color: #D6361F; }
.hp-ta-h .hp-l.is-up { transform: translateY(-0.06em) rotate(-2deg); color: #D6361F; }
.hp-ta-tape { position: absolute; z-index: 2; left: -4%; right: -4%; top: 69%; transform: rotate(-3.2deg); background: #111; color: #F2C230; overflow: hidden; padding: 1.3cqw 0; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); }
.hp-ta-run { display: flex; width: max-content; font: 400 clamp(13px, 2cqw, 22px)/1 'Anton', Impact, sans-serif; letter-spacing: 0.06em; white-space: nowrap; }
.hp-ta-run span { white-space: pre; }
.is-run .hp-ta-run { animation: hpTape 18s linear infinite; }
@keyframes hpTape { to { transform: translateX(-50%); } }
.hp-ta-foot { position: absolute; z-index: 2; left: 4.4cqw; right: 4.4cqw; bottom: 4cqw; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.hp-ta-sub { margin: 0; max-width: 34ch; font: 500 clamp(12px, 1.5cqw, 16px)/1.45 Inter, system-ui, sans-serif; }
.hp-ta-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.hp-ta-btns span { padding: clamp(10px, 1.3cqw, 14px) clamp(16px, 2.2cqw, 24px); border-radius: 10px; font: 700 clamp(12px, 1.4cqw, 15px)/1 Inter, system-ui, sans-serif; }
.hp-ta-b1 { background: #111; color: #F2C230; }
.hp-ta-b2 { background: transparent; color: #111; box-shadow: inset 0 0 0 2px #111; }
[data-demo="ptaller"] .hp-tag { opacity: .85; border-color: #3a3210; }
@container (max-width: 520px) {
  .hp-ta-nav { padding: 14px 16px; }
  .hp-ta-h { top: 19.5%; font-size: 19cqw; line-height: 0.9; row-gap: 5px; }   /* 09-27: la pastilla cae a 2.ª línea; 15 % la montaba sobre el titular */
  .hp-ta-w2 { font-size: 1.85em; }
  .hp-ta-live { padding: 6px 9px; font-size: 11px; white-space: nowrap; gap: 6px; } .hp-ta-nav { gap: 8px; flex-wrap: wrap; }
  .hp-ta-tape { top: 63%; padding: 8px 0; }
  .hp-ta-foot { flex-direction: column; align-items: start; left: 16px; right: 16px; bottom: 16px; gap: 12px; }
  .hp-ta-btns { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .hp-mu-bg img, .hp-re-badge, .hp-ta-run, .hp-ta-live i { animation: none !important; } }
@media (max-width: 600px) { .wx-grid > article.wx-fx:has(.hp-win):nth-child(n) .wx-stage { aspect-ratio: 4 / 5; } }


/* ---- lote i_portadas ---- */
/* Lote I · 3 portadas más del estándar nuevo (09-27): Automotora Pacífico · Constructora Pacífico · Cerrajería 24 h.
   Reusa .hp-win/.hp-bar/.hp-url/.hp-site/.hp-tag de h_portadas.css (marco de navegador + tratamiento a-todo-el-ancho:
   esas reglas son genéricas por :has(.hp-win), se aplican solas a estas 3 fichas). Prefijo propio: hi-. */
@font-face { font-family: 'Space Grotesk'; src: url(assets/fonts/spacegrotesk-600-latin.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(assets/fonts/instrument-serif-italic-latin.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* ===== Automotora Pacífico · patio a todo el ancho + buscador rápido con inventario en vivo ===== */
.hi-au-bg { position: absolute; inset: 0; }
.hi-au-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; transform: scale(1.04); transform-origin: 60% 55%; }
.is-run .hi-au-bg img { animation: hiKenAu 24s ease-in-out infinite alternate; }
@keyframes hiKenAu { to { transform: scale(1.11) translate(-1.2%, -0.8%); } }
.hi-au-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14, 59, 83, 0.95) 0%, rgba(14, 59, 83, 0.74) 38%, rgba(14, 59, 83, 0.08) 68%), linear-gradient(0deg, rgba(14, 59, 83, 0.6), transparent 30%); }
.hi-au-nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 3cqw 4.6cqw; color: #F7F4EE; background: linear-gradient(180deg, rgba(7, 26, 36, 0.65) 0%, rgba(7, 26, 36, 0.42) 70%, transparent 100%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.hi-au-logo { font: 600 clamp(13px, 1.75cqw, 20px)/1.05 'Space Grotesk', Inter, system-ui, sans-serif; letter-spacing: -0.005em; }
.hi-au-links { margin-left: auto; display: flex; gap: 2.4cqw; font: 500 clamp(11px, 1.3cqw, 14px)/1 Inter, system-ui, sans-serif; opacity: 0.92; }
.hi-au-links i { font-style: normal; }
.hi-au-cta { padding: 7px 14px; border-radius: 999px; border: 1.5px solid rgba(247, 244, 238, 0.55); font: 600 clamp(11px, 1.2cqw, 13px)/1 Inter, system-ui, sans-serif; white-space: nowrap; }
.hi-au-copy { position: absolute; z-index: 2; left: 4.6cqw; top: 19%; width: 47cqw; color: #F7F4EE; }   /* 09-27: el kicker parte bajo el menú, no pegado al logo */
.hi-au-k { margin: 0 0 1.2cqw; font: 600 clamp(9.5px, 1.1cqw, 12px)/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.13em; text-transform: uppercase; color: #F6B27A; }
.hi-au-h { margin: 0; font: 600 clamp(28px, 4.6cqw, 52px)/1.04 'Space Grotesk', Inter, system-ui, sans-serif; letter-spacing: -0.015em; }
.hi-au-sub { margin: 1.5cqw 0 1.9cqw; max-width: 36ch; font: 400 clamp(12px, 1.3cqw, 14.5px)/1.5 Inter, system-ui, sans-serif; color: rgba(247, 244, 238, 0.86); }
.hi-au-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 1.7cqw; }
.hi-au-btns span { padding: clamp(9px, 1.1cqw, 12px) clamp(15px, 2cqw, 22px); border-radius: 999px; font: 600 clamp(12px, 1.25cqw, 14px)/1 Inter, system-ui, sans-serif; transition: transform 0.25s; }
.hi-au-b1 { background: #F26B38; color: #241004; box-shadow: 0 10px 24px rgba(242, 107, 56, 0.4); }
.hi-au-b2 { border: 1px solid rgba(247, 244, 238, 0.5); color: #F7F4EE; }
.hp-site:hover .hi-au-b1 { transform: translateY(-2px); }
.hi-au-find { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; padding: 1.1cqw 1.3cqw; border-radius: 14px; background: rgba(247, 244, 238, 0.1); border: 1px solid rgba(247, 244, 238, 0.22); backdrop-filter: blur(6px); max-width: 42cqw; }
.hi-au-find-l { margin: 0; flex: 0 0 100%; font: 600 clamp(9px, 1cqw, 11px)/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247, 244, 238, 0.65); }
.hi-au-chips { display: flex; gap: 6px; }
.hi-au-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(247, 244, 238, 0.4); font: 500 clamp(10px, 1.1cqw, 12px)/1 Inter, system-ui, sans-serif; color: rgba(247, 244, 238, 0.85); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.hi-au-chip.is-on { background: #F26B38; border-color: #F26B38; color: #241004; }
.hi-au-count { margin: 0 0 0 auto; font: 500 clamp(11px, 1.2cqw, 13px)/1 Inter, system-ui, sans-serif; color: #F7F4EE; }
.hi-au-count b { font: 600 clamp(15px, 1.7cqw, 19px)/1 'Space Grotesk', Inter, sans-serif; color: #F6B27A; }
.hi-au-strip { position: absolute; z-index: 2; left: 4.6cqw; right: 4.6cqw; bottom: 3.2cqw; display: flex; gap: 26px; padding-top: 1.7cqw; border-top: 1px solid rgba(247, 244, 238, 0.22); color: #F7F4EE; }
.hi-au-strip span { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.hi-au-strip b { font: 600 clamp(16px, 2cqw, 23px)/1 'Space Grotesk', Inter, sans-serif; }
.hi-au-strip small { font: 500 clamp(9.5px, 1.05cqw, 11.5px)/1.2 Inter, system-ui, sans-serif; color: rgba(247, 244, 238, 0.72); }
@container (max-width: 520px) {
  .hi-au-nav { padding: 16px 18px; } .hi-au-links { display: none; } .hi-au-cta { margin-left: auto; }
  .hi-au-bg img { object-position: 72% 60%; }
  .hi-au-bg::after { background: linear-gradient(180deg, rgba(14, 59, 83, 0.5) 0%, rgba(14, 59, 83, 0.28) 24%, rgba(14, 59, 83, 0.95) 62%, #0E3B53 100%); }
  .hi-au-copy { top: auto; bottom: 78px; left: 18px; right: 18px; width: auto; }
  .hi-au-h { font-size: 31px; margin-bottom: 12px; } .hi-au-sub { display: none; } .hi-au-btns { margin: 0 0 12px; }
  .hi-au-btns .hi-au-b2 { display: none; }
  .hi-au-find { max-width: none; padding: 9px 11px; }
  .hi-au-find-l { display: none; }
  .hi-au-chips[data-g="price"] { display: none; }
  .hi-au-count { flex: 0 0 100%; margin-top: 2px; }
  .hi-au-strip { left: 18px; right: 18px; bottom: 16px; gap: 16px; padding-top: 9px; }
  .hi-au-strip > span:nth-child(2), .hi-au-strip > span:nth-child(3) { display: none; }
}

/* ===== Constructora Pacífico · panel sólido + foto que se abre como cortina + proceso en 4 etapas ===== */
[data-demo="pcasa"] .hp-site { background: #0D1624; }
.hi-ca-wrap { position: absolute; inset: 0; display: grid; grid-template-columns: 43cqw 1fr; grid-template-areas: "panel photo"; }
.hi-ca-panel { grid-area: panel; position: relative; padding: 9% 3.2cqw 3cqw 4.2cqw; display: flex; flex-direction: column; justify-content: center; color: #E9DCC5; }
.hi-ca-nav { position: absolute; z-index: 5; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 3cqw 3.4cqw 0 4.2cqw; }
.hi-ca-logo { font: 700 clamp(11px, 1.3cqw, 13.5px)/1.05 Inter, system-ui, sans-serif; letter-spacing: 0.03em; text-transform: uppercase; color: #E9DCC5; }
.hi-ca-links { margin-left: auto; display: flex; gap: 1.8cqw; font: 500 clamp(10px, 1.1cqw, 12.5px)/1 Inter, system-ui, sans-serif; color: rgba(233, 220, 197, 0.72); }
.hi-ca-links i { font-style: normal; }
.hi-ca-cta { padding: 6px 12px; border-radius: 999px; background: #C9824A; color: #1B1006; font: 600 clamp(10px, 1.1cqw, 12px)/1 Inter, system-ui, sans-serif; white-space: nowrap; }
.hi-ca-k { margin: 0 0 1.2cqw; font: 500 clamp(9.5px, 1.05cqw, 11.5px)/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.13em; text-transform: uppercase; color: #C9824A; }
.hi-ca-h { margin: 0; font: 400 clamp(27px, 4.3cqw, 46px)/1.1 'Instrument Serif', Georgia, serif; font-style: italic; letter-spacing: -0.005em; color: #F3ECDD; }
.hi-ca-sub { margin: 1.5cqw 0 1.9cqw; max-width: 30ch; font: 400 clamp(11.5px, 1.2cqw, 14px)/1.5 Inter, system-ui, sans-serif; color: rgba(233, 220, 197, 0.78); }
.hi-ca-btns { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 2.1cqw; }
.hi-ca-btns span { padding: clamp(9px, 1.05cqw, 12px) clamp(14px, 1.8cqw, 20px); border-radius: 7px; font: 600 clamp(11px, 1.15cqw, 13px)/1 Inter, system-ui, sans-serif; }
.hi-ca-b1 { background: #C9824A; color: #1B1006; }
.hi-ca-b2 { border: 1px solid rgba(233, 220, 197, 0.4); color: #E9DCC5; }
.hi-ca-line { position: relative; margin: 6px 0 0; padding: 0; list-style: none; display: flex; justify-content: space-between; gap: 4px; max-width: 30cqw; }
.hi-ca-line::before { content: ''; position: absolute; left: 4px; right: 4px; top: 4px; height: 1px; background: rgba(233, 220, 197, 0.25); }
.hi-ca-dot { position: absolute; left: 0; top: 0.5px; width: 9px; height: 9px; border-radius: 50%; background: #C9824A; box-shadow: 0 0 0 4px rgba(201, 130, 74, 0.28); transform: translateX(-50%); transition: left 1.5s cubic-bezier(0.3, 0.7, 0.2, 1); }
.hi-ca-step { position: relative; padding-top: 15px; font: 500 clamp(8.5px, 0.95cqw, 10.5px)/1.15 Inter, system-ui, sans-serif; color: rgba(233, 220, 197, 0.5); transition: color 0.4s; }
.hi-ca-step::before { content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: rgba(233, 220, 197, 0.3); }
.hi-ca-step.is-now, .hi-ca-step.is-done { color: #F3ECDD; }
.hi-ca-step.is-now::before, .hi-ca-step.is-done::before { background: #C9824A; }
.hi-ca-photo { grid-area: photo; position: relative; margin: 0; }
.hi-ca-photo-in { position: absolute; inset: 0; overflow: hidden; }
.hi-ca-photo-in img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 55%; }
.hi-ca-cur { position: absolute; top: 0; bottom: 0; width: 51%; background: #0D1624; z-index: 2; transition: transform 1.15s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hi-ca-cur--l { left: 0; }
.hi-ca-cur--r { right: 0; }
.hi-ca-photo.is-open .hi-ca-cur--l { transform: translateX(-100%); }
.hi-ca-photo.is-open .hi-ca-cur--r { transform: translateX(100%); }
.hi-ca-badge { position: absolute; z-index: 3; left: -6cqw; bottom: 9%; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 12px; background: #E9DCC5; color: #1B1006; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.55); font: 500 clamp(9px, 1cqw, 11px)/1.2 Inter, system-ui, sans-serif; max-width: 16cqw; }
.hi-ca-badge b { font: 400 italic clamp(18px, 2.3cqw, 25px)/1 'Instrument Serif', Georgia, serif; color: #C9824A; }
@container (max-width: 520px) {
  .hi-ca-wrap { grid-template-columns: 1fr; grid-template-rows: 42% 1fr; grid-template-areas: "photo" "panel"; }
  .hi-ca-nav { padding: 14px 16px 0; }
  .hi-ca-links { display: none; } .hi-ca-cta { margin-left: auto; }
  .hi-ca-panel { padding: 10px 20px 18px; justify-content: flex-start; }
  .hi-ca-h { font-size: 27px; } .hi-ca-sub { font-size: 12px; margin: 8px 0 12px; max-width: none; }
  .hi-ca-line { max-width: none; }
  .hi-ca-badge { left: 14px; right: auto; bottom: 12px; max-width: 44vw; padding: 8px 11px; }
}

/* ===== Cerrajería 24 h · mapa propio de la ciudad + camioneta que traza la ruta ===== */
[data-demo="pllave"] .hp-site { background: #0B0F14; color: #EDEFEE; }
.hi-ll-nav { position: absolute; z-index: 4; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 2.6cqw 4cqw; background: linear-gradient(180deg, rgba(4, 8, 11, 0.94) 0%, rgba(4, 8, 11, 0.8) 65%, rgba(4, 8, 11, 0.3) 100%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hi-ll-logo { font: 600 clamp(11px, 1.3cqw, 13.5px)/0.95 'Space Grotesk', Inter, sans-serif; letter-spacing: 0.01em; }
.hi-ll-links { margin-left: auto; display: flex; gap: 2.2cqw; font: 500 clamp(10.5px, 1.2cqw, 13px)/1 Inter, system-ui, sans-serif; color: rgba(237, 239, 238, 0.72); }
.hi-ll-links i { font-style: normal; }
.hi-ll-cta { padding: 7px 14px; border-radius: 7px; background: #3DDC97; color: #08130D; font: 700 clamp(10.5px, 1.15cqw, 12.5px)/1 Inter, system-ui, sans-serif; white-space: nowrap; }
.hi-ll-wrap { position: absolute; inset: 0; display: grid; grid-template-columns: 1.12fr 1fr; grid-template-areas: "left map"; }
.hi-ll-left { grid-area: left; position: relative; padding: 9.6% 3.2cqw 2.6cqw 4.4cqw; display: flex; flex-direction: column; justify-content: center; }
.hi-ll-k { margin: 0 0 1.1cqw; font: 500 clamp(9.5px, 1.05cqw, 11.5px)/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.13em; text-transform: uppercase; color: #3DDC97; }
.hi-ll-h { margin: 0; font: 600 clamp(24px, 4.1cqw, 44px)/1.08 'Space Grotesk', Inter, sans-serif; letter-spacing: -0.015em; color: #F5F7F6; }
.hi-ll-sub { margin: 1.5cqw 0 1.8cqw; max-width: 32ch; font: 400 clamp(11.5px, 1.2cqw, 13.5px)/1.5 Inter, system-ui, sans-serif; color: rgba(237, 239, 238, 0.68); }
.hi-ll-btns { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 1.8cqw; }
.hi-ll-btns span { padding: clamp(9px, 1.05cqw, 12px) clamp(14px, 1.8cqw, 20px); border-radius: 7px; font: 700 clamp(11px, 1.15cqw, 13px)/1 Inter, system-ui, sans-serif; }
.hi-ll-b1 { background: #3DDC97; color: #08130D; }
.hi-ll-b2 { border: 1px solid rgba(237, 239, 238, 0.35); color: #EDEFEE; }
.hi-ll-find { padding: 1.1cqw 1.2cqw; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); max-width: 31cqw; }
.hi-ll-find-l { margin: 0 0 8px; font: 600 clamp(9px, 1cqw, 11px)/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(237, 239, 238, 0.6); }
.hi-ll-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hi-ll-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); font: 500 clamp(10px, 1.1cqw, 12px)/1 Inter, system-ui, sans-serif; color: rgba(237, 239, 238, 0.85); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.hi-ll-chip.is-on { background: #3DDC97; border-color: #3DDC97; color: #08130D; }
.hi-ll-eta { margin: 10px 0 0; min-height: 1.4em; font: 500 clamp(11px, 1.2cqw, 13px)/1.3 'JetBrains Mono', ui-monospace, monospace; color: #3DDC97; opacity: 0; transform: translateY(4px); transition: opacity 0.4s, transform 0.4s; }
.hi-ll-eta.is-shown { opacity: 1; transform: translateY(0); }
.hi-ll-map { grid-area: map; position: relative; background: #0B0F14; overflow: hidden; }
.hi-ll-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hi-ll-land { fill: #0B0F14; }
.hi-ll-sea { fill: url(#hiLlSea); }
.hi-ll-hill { fill: rgba(255, 255, 255, 0.03); }
.hi-ll-contour { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.8; }
.hi-ll-ave { stroke: rgba(255, 255, 255, 0.22); stroke-width: 3; stroke-linecap: round; }
.hi-ll-grid-l { stroke: rgba(255, 255, 255, 0.11); stroke-width: 1; }
.hi-ll-park { fill: rgba(61, 220, 151, 0.14); stroke: rgba(61, 220, 151, 0.4); stroke-width: 1; }
.hi-ll-tree { fill: rgba(61, 220, 151, 0.55); }
.hi-ll-route { fill: none; stroke: #3DDC97; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 3px rgba(61, 220, 151, 0.55)); }
.hi-ll-route.is-on { opacity: 1; }
.hi-ll-label { fill: rgba(237, 239, 238, 0.6); font: 600 8.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.09em; text-transform: uppercase; }
.hi-ll-base { fill: #F5F7F6; }
.hi-ll-base-ring { fill: none; stroke: rgba(245, 247, 246, 0.35); stroke-width: 1; }
.hi-ll-pin { fill: rgba(255, 255, 255, 0.4); transition: fill 0.3s; }
.hi-ll-pin.is-on { fill: #3DDC97; }
.hi-ll-pin-pulse { fill: none; stroke: #3DDC97; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.hi-ll-pin-pulse.is-on { animation: hiPulse 1.8s ease-out infinite; }
@keyframes hiPulse { 0% { opacity: 0.65; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
.hi-ll-truck { fill: #3DDC97; stroke: #08130D; stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(61, 220, 151, 0.7)); }
@container (max-width: 520px) {
  .hi-ll-nav { padding: 12px 16px; } .hi-ll-links { display: none; } .hi-ll-cta { margin-left: auto; }
  .hi-ll-wrap { grid-template-columns: 1fr; grid-template-rows: 42% 1fr; grid-template-areas: "map" "left"; }
  .hi-ll-left { padding: 10px 18px 14px; justify-content: flex-start; }
  .hi-ll-k { margin-bottom: 6px; }
  .hi-ll-h { font-size: 22px; line-height: 1.08; }
  .hi-ll-sub { display: none; }
  .hi-ll-btns { margin: 10px 0 10px; }
  .hi-ll-btns .hi-ll-b2 { display: none; }
  .hi-ll-find { max-width: none; padding: 9px 10px; }
  .hi-ll-find-l { margin-bottom: 6px; }
  .hi-ll-eta { margin-top: 8px; font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hi-au-bg img { animation: none !important; }
  .hi-ca-cur, .hi-ca-dot { transition: none !important; }
  .hi-ll-route, .hi-ll-eta, .hi-ll-pin { transition: none !important; }
  .hi-ll-pin-pulse { animation: none !important; }
}

/* 09-27 revisión: el buscador no debe tocar la franja de números (escritorio) */
@container (min-width: 521px) {
  .hi-au-btns { margin-bottom: 0; }
  .hi-au-find { position: absolute; left: calc(100% + 5cqw); bottom: 0; width: 36cqw; background: rgba(9, 32, 46, 0.55); }
}


/* ---- lote j_portadas ---- */
/* Lote J (09-27) · 4 portadas más del estándar nuevo. Tipografías propias de cada marca, servidas desde nuestro
   servidor (OFL). No se redefinen .hp-win/.hp-bar/.hp-url/.hp-site/.hp-tag/.wx-hint (vienen de h_portadas.css). */
@font-face { font-family: 'DM Serif Display'; src: url(assets/fonts/dmserif-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Syne'; src: url(assets/fonts/syne-700-latin.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Gloock'; src: url(assets/fonts/gloock-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(assets/fonts/instrument-serif-italic-latin.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* ===== Tours Bahía Norte · fondo que se funde entre 3 fotos, titular centrado, salidas de hoy abajo ===== */
[data-demo="ptours"] .hp-site { background: #06181B; color: #F4E3C3; }
.hj-to-bg { position: absolute; inset: 0; overflow: hidden; }
.hj-to-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1.4s ease; }
.hj-to-bg img.is-on { opacity: 1; }
.hj-to-bg img:nth-child(1) { object-position: 68% 55%; }
.hj-to-bg img:nth-child(2) { object-position: 72% 48%; }
.hj-to-bg img:nth-child(3) { object-position: 55% 45%; }
.is-run .hj-to-bg img.is-on { animation: hjToKen 9s ease-in-out infinite alternate; }
@keyframes hjToKen { to { transform: scale(1.12) translate(-1%, -1%); } }
.hj-to-bg::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 38cqw 26cqw at 50% 42%, rgba(3, 16, 19, 0.74) 0%, rgba(3, 16, 19, 0.44) 52%, rgba(3, 16, 19, 0) 100%),
    linear-gradient(180deg, rgba(4, 16, 19, 0.78) 0%, rgba(4, 16, 19, 0.1) 26%, rgba(4, 16, 19, 0.05) 56%, rgba(4, 16, 19, 0.82) 100%); }
.hj-to-nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 3cqw 5cqw; }
.hj-to-logo { font: 400 clamp(16px, 2.3cqw, 23px)/1 'DM Serif Display', Georgia, serif; }
.hj-to-links { margin-left: auto; display: flex; gap: 2.4cqw; font: 500 clamp(11px, 1.3cqw, 14px)/1 Inter, system-ui, sans-serif; opacity: 0.9; }
.hj-to-links i { font-style: normal; }
.hj-to-cta { padding: 8px 15px; border-radius: 999px; background: #FF7A59; color: #1C0E06; font: 600 clamp(11px, 1.25cqw, 13px)/1 Inter, system-ui, sans-serif; }
.hj-to-copy { position: absolute; z-index: 2; left: 50%; top: 42%; transform: translate(-50%, -50%); max-width: 60cqw; text-align: center; }
.hj-to-k { margin: 0 0 1.3cqw; font: 700 clamp(9.5px, 1.1cqw, 12px)/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #F8ECD4; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
.hj-to-h { margin: 0; font: 400 clamp(34px, 6.6cqw, 78px)/1 'DM Serif Display', Georgia, serif; letter-spacing: -0.01em; text-shadow: 0 3px 26px rgba(0, 0, 0, 0.5); }
.hj-to-sub { margin: 1.8cqw auto 2.4cqw; max-width: 40ch; font: 400 clamp(12.5px, 1.45cqw, 16px)/1.5 Inter, system-ui, sans-serif; color: rgba(244, 227, 195, 0.92); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.hj-to-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hj-to-btns span { padding: clamp(9px, 1.2cqw, 13px) clamp(16px, 2.2cqw, 24px); border-radius: 999px; font: 600 clamp(12px, 1.35cqw, 15px)/1 Inter, system-ui, sans-serif; }
.hj-to-b1 { background: #21C25E; color: #06180C; box-shadow: 0 10px 26px rgba(33, 194, 94, 0.4); }
.hj-to-b2 { border: 1px solid rgba(244, 227, 195, 0.5); backdrop-filter: blur(6px); }
.hj-to-out { position: absolute; z-index: 2; left: 5cqw; right: 5cqw; bottom: 3.4cqw; margin: 0; padding: 0; list-style: none; display: flex; gap: 10px; }
.hj-to-out li { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: clamp(9px, 1.2cqw, 14px) clamp(10px, 1.4cqw, 16px); border-radius: 12px; background: rgba(6, 30, 36, 0.55); border: 1px solid rgba(244, 227, 195, 0.16); backdrop-filter: blur(6px); cursor: pointer; transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.hj-to-out li b { font: 600 clamp(11px, 1.25cqw, 13.5px)/1.2 Inter, system-ui, sans-serif; }
.hj-to-out li small { font: 500 clamp(10px, 1.1cqw, 12px)/1 Inter, system-ui, sans-serif; color: rgba(244, 227, 195, 0.72); }
.hj-to-out li small i { font-style: normal; color: #FF9E76; font-weight: 700; }
.hj-to-out li.is-on { background: rgba(255, 122, 89, 0.22); border-color: rgba(255, 158, 118, 0.6); transform: translateY(-2px); }
@container (max-width: 520px) {
  [data-demo="ptours"] .hp-site { background: #06181B; }
  .hj-to-bg { bottom: 40%; }
  .hj-to-bg::after { background: radial-gradient(ellipse 92% 60% at 50% 40%, rgba(3, 16, 19, 0.72) 0%, rgba(3, 16, 19, 0.4) 55%, rgba(3, 16, 19, 0) 88%),
    linear-gradient(180deg, rgba(4, 16, 19, 0.5) 0%, rgba(4, 16, 19, 0) 34%, rgba(4, 16, 19, 0) 58%, #06181B 100%); }
  .hj-to-nav { padding: 14px 16px; } .hj-to-links { display: none; } .hj-to-cta { margin-left: auto; }
  .hj-to-copy { top: auto; bottom: 122px; transform: none; left: 18px; right: 18px; max-width: none; }
  .hj-to-h { font-size: 32px; } .hj-to-sub { font-size: 12.5px; margin: 8px auto 12px; }
  .hj-to-out { left: 14px; right: 14px; bottom: 14px; gap: 6px; }
  .hj-to-out li { padding: 8px 8px; border-radius: 9px; } .hj-to-out li b { font-size: 9.5px; } .hj-to-out li small { font-size: 8.5px; }
}

/* ===== Transmisiones del Norte · foto a la derecha con foco y anotaciones técnicas ===== */
[data-demo="pcaja"] .hp-site { background: #0E0F11; color: #E7E9EB; }
.hj-cj-pic { position: absolute; z-index: 1; right: 0; top: 50%; transform: translateY(-50%); width: 58%; aspect-ratio: 16 / 9; container-type: inline-size; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%); }
.hj-cj-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hj-cj-spot { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle 22cqw at var(--mx, 62%) var(--my, 42%), rgba(255, 181, 71, 0.4), transparent 60%); }
.hj-cj-annots { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s; }
.is-run .hj-cj-annots { opacity: 1; }
.hj-cj-a { position: absolute; left: 0; right: 0; height: 0; opacity: 0; transform: translateX(8px); transition: opacity 0.5s, transform 0.5s; }
.is-run .hj-cj-a { opacity: 1; transform: none; }
.is-run .hj-cj-a:nth-child(2) { transition-delay: 0.18s; }
.is-run .hj-cj-a:nth-child(3) { transition-delay: 0.36s; }
.hj-cj-lab { position: absolute; top: 0; transform: translate(-100%, -50%); white-space: nowrap; padding: 5px 9px; border-radius: 7px; background: rgba(14, 15, 17, 0.86); border: 1px solid rgba(255, 181, 71, 0.4); font: 600 clamp(9px, 2.2cqw, 12px)/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.01em; color: #FFB547; }
.hj-cj-line { position: absolute; top: 0; height: 1.5px; background: rgba(255, 181, 71, 0.7); }
.hj-cj-dot { position: absolute; top: 0; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); background: #FFB547; box-shadow: 0 0 0 4px rgba(255, 181, 71, 0.22); }
.hj-cj-nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 2.8cqw 4.4cqw; }
.hj-cj-logo { font: 700 clamp(11px, 1.35cqw, 14.5px)/1.05 'Syne', system-ui, sans-serif; letter-spacing: 0.01em; }
.hj-cj-links { margin-left: auto; display: flex; gap: 2.2cqw; font: 500 clamp(11px, 1.25cqw, 13.5px)/1 Inter, system-ui, sans-serif; color: #9AA4AE; }
.hj-cj-links i { font-style: normal; }
.hj-cj-cta { padding: 8px 15px; border-radius: 8px; background: #FFB547; color: #1B1002; font: 700 clamp(11px, 1.2cqw, 13px)/1 Inter, system-ui, sans-serif; }
.hj-cj-copy { position: absolute; z-index: 2; left: 4.4cqw; top: 50%; transform: translateY(-42%); max-width: 42cqw; }
.hj-cj-k { margin: 0 0 1.3cqw; font: 700 clamp(9.5px, 1.1cqw, 12px)/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #FFB547; }
.hj-cj-h { margin: 0; font: 700 clamp(32px, 6.4cqw, 74px)/0.98 'Syne', system-ui, sans-serif; letter-spacing: -0.01em; }
.hj-cj-sub { margin: 1.8cqw 0 2.4cqw; max-width: 34ch; font: 400 clamp(12.5px, 1.45cqw, 16px)/1.5 Inter, system-ui, sans-serif; color: #9AA4AE; }
.hj-cj-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hj-cj-btns span { padding: clamp(9px, 1.2cqw, 13px) clamp(16px, 2.2cqw, 24px); border-radius: 9px; font: 700 clamp(12px, 1.35cqw, 15px)/1 Inter, system-ui, sans-serif; }
.hj-cj-b1 { background: #FFB547; color: #1B1002; box-shadow: 0 10px 26px rgba(255, 181, 71, 0.28); }
.hj-cj-b2 { border: 1.5px solid #3A3F45; color: #E7E9EB; }
.hj-cj-list { display: none; }
@container (max-width: 520px) {
  .hj-cj-pic { position: static; width: auto; aspect-ratio: 16 / 7; -webkit-mask-image: none; mask-image: none; transform: none; }
  .hj-cj-spot, .hj-cj-annots { display: none; }
  /* el logo de 2 líneas + «Ejemplo» + botón no caben en una fila: la etiqueta baja como rótulo chico bajo la barra */
  .hj-cj-nav { position: absolute; padding: 12px 14px; } .hj-cj-links { display: none; } .hj-cj-cta { margin-left: auto; }
  .hj-cj-nav .hp-tag { position: absolute; top: 52px; right: 14px; background: rgba(9, 10, 11, 0.72); backdrop-filter: blur(4px); opacity: 1; }
  .hj-cj-copy { position: static; transform: none; max-width: none; padding: 12px 16px 12px; }
  .hj-cj-k { margin-bottom: 5px; }
  .hj-cj-h { font-size: 24px; line-height: 1; }
  .hj-cj-sub { font-size: 11px; line-height: 1.35; margin: 6px 0 10px; }
  .hj-cj-btns { margin-bottom: 8px; }
  .hj-cj-btns span { padding: 7px 14px; font-size: 11px; }
  .hj-cj-list { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0; padding: 0 0 2px; list-style: none; -webkit-overflow-scrolling: touch; }
  .hj-cj-list li { flex: none; padding: 4px 9px; border-radius: 999px; background: #191B1E; font: 600 9.5px/1.3 'JetBrains Mono', ui-monospace, monospace; color: #FFB547; white-space: nowrap; }
}

/* ===== Barbería Don Beto · panel partido, pizarra de precios ===== */
[data-demo="pbarber"] .hp-site { background: #12261E; color: #EFE6D2; }
.hj-ba-photo { position: absolute; z-index: 1; right: 0; top: 0; bottom: 0; width: 54%; overflow: hidden; }
.hj-ba-photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #12261E 0%, transparent 9%); }
.hj-ba-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 40%; }
.hj-ba-nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 2.8cqw 4.4cqw; }
.hj-ba-logo { display: flex; align-items: center; gap: 9px; font: 400 clamp(16px, 2.2cqw, 22px)/1 'Gloock', Georgia, serif; }
.hj-ba-pole { width: 9px; height: 26px; border-radius: 5px; flex: none; background: repeating-linear-gradient(45deg, #B03A3A 0 6px, #EFE6D2 6px 12px, #12261E 12px 18px); background-size: 100% 200%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.is-run .hj-ba-pole { animation: hjPole 1.1s linear infinite; }
@keyframes hjPole { to { background-position: 0 36px; } }
.hj-ba-live { display: flex; align-items: center; gap: 6px; font: 600 clamp(9.5px, 1.1cqw, 11.5px)/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.02em; color: #C9A15B; }
.hj-ba-live i { width: 6px; height: 6px; border-radius: 50%; background: #6FBF7A; box-shadow: 0 0 0 0 rgba(111, 191, 122, 0.7); }
.is-run .hj-ba-live i { animation: hjBaPulse 1.8s infinite; }
@keyframes hjBaPulse { 70% { box-shadow: 0 0 0 6px rgba(111, 191, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 191, 122, 0); } }
.hj-ba-links { margin-left: auto; display: flex; gap: 2.2cqw; font: 500 clamp(11px, 1.25cqw, 13.5px)/1 Inter, system-ui, sans-serif; color: rgba(239, 230, 210, 0.82); }
.hj-ba-links i { font-style: normal; }
.hj-ba-cta { padding: 8px 15px; border-radius: 999px; border: 1.5px solid #C9A15B; color: #EFE6D2; font: 600 clamp(11px, 1.2cqw, 13px)/1 Inter, system-ui, sans-serif; }
.hj-ba-copy { position: absolute; z-index: 2; left: 5cqw; top: 52%; transform: translateY(-46%); width: 40cqw; }
.hj-ba-k { margin: 0 0 1.3cqw; font: 500 clamp(9.5px, 1.1cqw, 12px)/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.13em; text-transform: uppercase; color: #C9A15B; }
.hj-ba-h { margin: 0; font: 400 clamp(32px, 6.2cqw, 70px)/1 'Gloock', Georgia, serif; }
.hj-ba-sub { margin: 1.8cqw 0 2.2cqw; max-width: 32ch; font: 400 clamp(12.5px, 1.4cqw, 15.5px)/1.5 Inter, system-ui, sans-serif; color: rgba(239, 230, 210, 0.82); }
.hj-ba-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 2cqw; }
.hj-ba-btns span { padding: clamp(9px, 1.2cqw, 13px) clamp(16px, 2.2cqw, 24px); border-radius: 999px; font: 600 clamp(12px, 1.35cqw, 15px)/1 Inter, system-ui, sans-serif; }
.hj-ba-b1 { background: #C9A15B; color: #12261E; box-shadow: 0 10px 24px rgba(201, 161, 91, 0.32); }
.hj-ba-b2 { border: 1.5px solid rgba(239, 230, 210, 0.4); }
.hj-ba-board { margin: 0; padding: 1.1cqw 1.3cqw; list-style: none; display: flex; flex-direction: column; gap: 2px; border-radius: 12px; background: rgba(6, 14, 10, 0.55); border: 1px dashed rgba(201, 161, 91, 0.4); }
.hj-ba-board li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0.55cqw 0.4cqw; border-radius: 8px; transition: background 0.35s, transform 0.35s; }
.hj-ba-board li b { font: 400 clamp(12.5px, 1.4cqw, 15.5px)/1.3 'Gloock', Georgia, serif; font-weight: 400; }
.hj-ba-board li span { font: 600 clamp(11.5px, 1.3cqw, 14px)/1 'JetBrains Mono', ui-monospace, monospace; color: #C9A15B; }
.hj-ba-board li.is-on { background: rgba(201, 161, 91, 0.16); transform: translateX(3px); }
@container (max-width: 520px) {
  [data-demo="pbarber"] .hp-site { background: #12261E; }
  .hj-ba-photo { left: 0; right: 0; bottom: 46%; width: auto; top: 0; }
  .hj-ba-photo img { object-position: 68% 35%; }
  .hj-ba-photo::before { background: linear-gradient(180deg, transparent 60%, #12261E 100%); }
  .hj-ba-nav { padding: 14px 16px; } .hj-ba-links { display: none; } .hj-ba-live { display: none; }
  .hj-ba-cta { margin-left: auto; background: #C9A15B; border-color: #C9A15B; color: #12261E; }
  .hj-ba-nav .hp-tag { position: absolute; top: 48px; right: 16px; background: rgba(9, 15, 12, 0.72); backdrop-filter: blur(4px); opacity: 1; border-color: rgba(239, 230, 210, 0.6); }
  .hj-ba-copy { position: absolute; top: auto; bottom: 16px; left: 16px; right: 16px; transform: none; width: auto; }
  .hj-ba-h { font-size: 30px; } .hj-ba-sub { font-size: 12px; margin: 8px 0 12px; max-width: none; }
  .hj-ba-btns { margin-bottom: 10px; }
}

/* ===== Vespro · foto de producto con el nombre sobre la etiqueta real ===== */
[data-demo="pvino"] .hp-site { background: #0C0A09; color: #EDE3D0; }
/* la foto (fondo negro) sangra desde ~53 % hasta el borde derecho, a todo el alto de la ficha, sin marco; se funde
   con el fondo por la izquierda. object-fit:cover queda limitado por el ALTO (la caja es más angosta que 16:9), así
   que NO hay recorte vertical: los % verticales de la etiqueta sobre la botella siguen siendo exactos. */
.hj-vi-pic { position: absolute; z-index: 1; right: 0; top: 0; height: 100%; width: 47cqw; margin: 0; container-type: inline-size; border-radius: 0; overflow: hidden; box-shadow: none; border: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%); mask-image: linear-gradient(90deg, transparent 0%, #000 18%); }
.hj-vi-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; display: block; }
.hj-vi-label { position: absolute; left: 36%; top: 44.5%; width: 18.6%; height: 28%; display: flex; align-items: center; justify-content: center; text-align: center; font: 400 clamp(8px, 3.4cqw, 15px)/1 'Instrument Serif', Georgia, serif; font-style: italic; letter-spacing: 0.01em; color: #5C1420; white-space: nowrap; pointer-events: none; }
.hj-vi-nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 3cqw 5cqw; }
.hj-vi-logo { font: 400 clamp(18px, 2.6cqw, 27px)/1 'Instrument Serif', Georgia, serif; font-style: italic; }
.hj-vi-links { margin-left: auto; display: flex; gap: 2.4cqw; font: 500 clamp(11px, 1.3cqw, 14px)/1 Inter, system-ui, sans-serif; color: rgba(237, 227, 208, 0.75); }
.hj-vi-links i { font-style: normal; }
.hj-vi-cta { padding: 8px 15px; border-radius: 999px; border: 1px solid #7A1E2B; background: rgba(122, 30, 43, 0.35); color: #EDE3D0; font: 600 clamp(11px, 1.2cqw, 13px)/1 Inter, system-ui, sans-serif; }
.hj-vi-copy { position: absolute; z-index: 2; left: 5cqw; top: 50%; transform: translateY(-52%); width: 40cqw; }
.hj-vi-k { margin: 0 0 1.3cqw; font: 500 clamp(9.5px, 1.05cqw, 12px)/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.13em; text-transform: uppercase; color: #D8C08F; }
.hj-vi-h { margin: 0; font: 400 clamp(34px, 6.6cqw, 76px)/1.02 'Instrument Serif', Georgia, serif; font-style: italic; }
.hj-vi-sub { margin: 1.8cqw 0 2.2cqw; max-width: 36ch; font: 400 clamp(12.5px, 1.4cqw, 15.5px)/1.55 Inter, system-ui, sans-serif; color: rgba(237, 227, 208, 0.78); }
.hj-vi-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 2.2cqw; }
.hj-vi-btns span { padding: clamp(9px, 1.2cqw, 13px) clamp(16px, 2.2cqw, 24px); border-radius: 4px; font: 600 clamp(12px, 1.35cqw, 15px)/1 Inter, system-ui, sans-serif; }
.hj-vi-b1 { background: #7A1E2B; color: #EDE3D0; box-shadow: 0 10px 24px rgba(122, 30, 43, 0.4); }
.hj-vi-b2 { border: 1.5px solid rgba(216, 192, 143, 0.45); }
.hj-vi-vint { padding-top: 1.6cqw; border-top: 1px solid rgba(216, 192, 143, 0.25); }
.hj-vi-years { display: flex; gap: 8px; margin-bottom: 0.9cqw; }
.hj-vi-y { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(216, 192, 143, 0.4); background: transparent; color: rgba(237, 227, 208, 0.7); font: 600 clamp(11px, 1.2cqw, 13px)/1 'JetBrains Mono', ui-monospace, monospace; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.hj-vi-y.is-on { background: #D8C08F; border-color: #D8C08F; color: #1B1002; }
.hj-vi-info { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.hj-vi-note { position: absolute; margin: 0; max-width: 30ch; font: 400 clamp(11.5px, 1.3cqw, 14px)/1.5 Inter, system-ui, sans-serif; color: rgba(237, 227, 208, 0.72); opacity: 0; transform: translateY(4px); transition: opacity 0.4s, transform 0.4s; pointer-events: none; }
.hj-vi-note.is-on { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.hj-vi-prwrap { position: relative; flex: none; margin-left: auto; }
.hj-vi-pr { position: absolute; right: 0; top: 0; margin: 0; white-space: nowrap; font: 600 clamp(15px, 1.7cqw, 19px)/1 'JetBrains Mono', ui-monospace, monospace; color: #D8C08F; opacity: 0; transition: opacity 0.4s; }
.hj-vi-pr.is-on { position: relative; opacity: 1; }
@container (max-width: 520px) {
  [data-demo="pvino"] .hp-site { background: #0C0A09; }
  /* celular vuelve al esquema anterior: foto contenida (sin recorte) arriba ~42 % del alto, botella entera y
     etiqueta completa; el sangrado a negro es solo de escritorio. */
  .hj-vi-pic { position: relative; right: auto; top: auto; height: auto; transform: none; width: 88%; aspect-ratio: 16 / 9; margin: 10px auto 0; display: block; border-radius: 10px; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.65);
    -webkit-mask-image: none; mask-image: none; }
  .hj-vi-pic img { object-position: 50% 50%; }
  .hj-vi-label { left: 66%; width: 12%; }
  .hj-vi-nav { position: absolute; padding: 12px 14px; } .hj-vi-links { display: none; } .hj-vi-cta { margin-left: auto; }
  .hj-vi-copy { position: static; top: auto; bottom: auto; left: auto; right: auto; width: auto; transform: none; padding: 10px 16px 12px; }
  .hj-vi-k { margin-bottom: 4px; }
  .hj-vi-h { font-size: 23px; line-height: 1.02; margin-bottom: 4px; }
  .hj-vi-sub { font-size: 11px; line-height: 1.32; margin: 5px 0 8px; max-width: none; }
  .hj-vi-btns { margin-bottom: 8px; }
  .hj-vi-btns span { padding: 7px 14px; font-size: 11px; }
  .hj-vi-vint { padding-top: 8px; }
  .hj-vi-years { margin-bottom: 6px; gap: 6px; }
  .hj-vi-y { padding: 4px 10px; font-size: 10.5px; }
  .hj-vi-info { gap: 10px; }
  .hj-vi-note { font-size: 10.5px; line-height: 1.3; max-width: none; }
  .hj-vi-pr { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .hj-to-bg img, .hj-ba-pole, .hj-ba-live i { animation: none !important; } }


/* ---- lote k_portadas ---- */
/* Lote K · 3 portadas más con el estándar nuevo (09-27). Tipografías propias de cada marca (OFL). Prefijo hk- / keyframes hk. */
@font-face { font-family: 'Archivo Exp'; src: url(assets/fonts/archivo-800x-latin.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(assets/fonts/bricolage-700-latin.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url(assets/fonts/playfair-italic-latin.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }

/* ===== Ferretería Central · bento de categorías (fondo claro cálido) ===== */
[data-demo="pferre"] .hp-site { background: #F6F3EC; color: #141414; }
.hk-fe-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; }
.hk-fe-nav { flex: none; display: flex; align-items: center; gap: 12px; padding: 3cqw 4.4cqw 1.6cqw; }
.hk-fe-logo { font: 800 clamp(15px, 1.95cqw, 21px)/1 'Archivo Exp', 'Arial Narrow', sans-serif; letter-spacing: -0.01em; text-transform: uppercase; }
.hk-fe-links { margin-left: auto; display: flex; gap: 2.2cqw; font: 500 clamp(11px, 1.3cqw, 14px)/1 Inter, system-ui, sans-serif; opacity: 0.82; }
.hk-fe-links i { font-style: normal; }
.hk-fe-cta { padding: 8px 16px; border-radius: 999px; background: #FF6A13; color: #171003; font: 700 clamp(11px, 1.25cqw, 13.5px)/1 Inter, system-ui, sans-serif; box-shadow: 0 8px 18px rgba(255, 106, 19, 0.35); white-space: nowrap; }
.hk-fe-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 33cqw 1fr; gap: 2.2cqw; padding: 0 4.4cqw 4.4cqw; }
.hk-fe-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.hk-fe-k { margin: 0 0 1.2cqw; font: 600 clamp(9.5px, 1.1cqw, 12px)/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.13em; text-transform: uppercase; color: #B14F0E; }
.hk-fe-h { margin: 0 0 1.6cqw; font: 800 clamp(30px, 6.1cqw, 58px)/0.96 'Archivo Exp', 'Arial Narrow', sans-serif; letter-spacing: -0.01em; text-transform: uppercase; }
.hk-fe-search { display: flex; align-items: center; gap: 8px; padding: clamp(9px, 1.3cqw, 13px) clamp(12px, 1.6cqw, 16px); border-radius: 12px; background: #fff; border: 1.5px solid rgba(20, 16, 10, 0.14); max-width: min(100%, 30cqw); }
.hk-fe-search-ico { width: 15px; height: 15px; flex: none; fill: none; stroke: #8b7d6c; stroke-width: 2; }
.hk-fe-search-tx { font: 500 clamp(11.5px, 1.25cqw, 13.5px)/1 Inter, system-ui, sans-serif; color: #57503f; white-space: nowrap; overflow: hidden; }
.hk-fe-car { width: 1.5px; height: 1.05em; background: #FF6A13; flex: none; }
.is-run .hk-fe-car { animation: hkBlink 1s steps(1) infinite; }
@keyframes hkBlink { 50% { opacity: 0; } }
.hk-fe-foot { margin: 1.6cqw 0 0; font: 500 clamp(9.5px, 1cqw, 11.5px)/1.4 Inter, system-ui, sans-serif; color: #6d6354; }
.hk-fe-mosaic { position: relative; display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "big a b" "big c c"; gap: 1.1cqw; }
.hk-fe-t-big { grid-area: big; } .hk-fe-t-a { grid-area: a; } .hk-fe-t-b { grid-area: b; } .hk-fe-t-c { grid-area: c; }
.hk-fe-tile { position: relative; border: 0; padding: 0; border-radius: 1.4cqw; overflow: hidden; cursor: pointer; background: #141414; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s; }
.hk-fe-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hk-fe-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 14, 6, 0.82) 0%, rgba(20, 14, 6, 0.15) 55%, rgba(20, 14, 6, 0) 75%); }
.hk-fe-tag { position: absolute; left: clamp(10px, 1.1cqw, 14px); bottom: clamp(9px, 1cqw, 13px); z-index: 2; display: flex; flex-direction: column; color: #F6F3EC; text-align: left; }
.hk-fe-tag b { font: 700 clamp(11.5px, 1.35cqw, 15px)/1.15 Inter, system-ui, sans-serif; }
.hk-fe-tag small { margin-top: 2px; font: 600 clamp(9.5px, 1.02cqw, 11.5px)/1.2 Inter, system-ui, sans-serif; color: #FFC08A; }
.hk-fe-view { position: absolute; right: clamp(8px, 0.9cqw, 12px); top: clamp(8px, 0.9cqw, 12px); bottom: auto; z-index: 2; padding: 5px 10px; border-radius: 999px; background: rgba(246, 243, 236, 0.95); color: #B14F0E; font: 700 clamp(9.5px, 0.95cqw, 11.5px)/1 Inter, system-ui, sans-serif; opacity: 0; transform: translateY(-6px); transition: opacity 0.3s, transform 0.3s; white-space: nowrap; box-shadow: 0 6px 14px rgba(20, 14, 6, 0.35); }
.hk-fe-tile:hover, .hk-fe-tile.is-hi { transform: scale(1.035); z-index: 3; box-shadow: 0 18px 32px -8px rgba(20, 14, 6, 0.4); }
.hk-fe-tile:hover img, .hk-fe-tile.is-hi img { transform: scale(1.08); }
.hk-fe-tile:hover .hk-fe-view, .hk-fe-tile.is-hi .hk-fe-view { opacity: 1; transform: none; }
@container (max-width: 520px) {
  .hk-fe-nav { padding: 14px 16px; flex-wrap: wrap; row-gap: 8px; } .hk-fe-links { display: none; } .hk-fe-cta { margin-left: auto; }
  [data-demo="pferre"] .hp-tag { display: none; }
  .hk-fe-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 0 16px 16px; gap: 14px; }
  .hk-fe-h { font-size: 32px; } .hk-fe-search { max-width: none; } .hk-fe-foot { display: none; }
  .hk-fe-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "big a" "b c"; gap: 8px; }
}

/* ===== Pintores del Norte · cotizador por m² en vivo (foto de fondo) ===== */
[data-demo="ppintor"] .hp-site { background: #1E2A22; color: #F5F1E8; }
.hk-pi-bg { position: absolute; inset: 0; }
.hk-pi-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 48%; }
.hk-pi-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20, 28, 22, 0.86) 0%, rgba(20, 28, 22, 0.58) 34%, rgba(20, 28, 22, 0.1) 60%, rgba(20, 28, 22, 0) 74%), linear-gradient(0deg, rgba(20, 28, 22, 0.55), transparent 30%); }
.hk-pi-nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 3cqw 4.4cqw; }
.hk-pi-logo { font: 700 clamp(15px, 2.05cqw, 22px)/1 'Bricolage Grotesque', Georgia, serif; letter-spacing: -0.01em; }
.hk-pi-links { margin-left: auto; display: flex; gap: 2.2cqw; font: 500 clamp(11px, 1.3cqw, 14px)/1 Inter, system-ui, sans-serif; opacity: 0.88; }
.hk-pi-links i { font-style: normal; }
.hk-pi-cta { padding: 8px 15px; border-radius: 999px; border: 1.5px solid rgba(245, 241, 232, 0.55); font: 600 clamp(11px, 1.25cqw, 13.5px)/1 Inter, system-ui, sans-serif; white-space: nowrap; }
.hk-pi-copy { position: absolute; z-index: 2; left: 4.4cqw; top: 50%; transform: translateY(-52%); max-width: 37cqw; }
.hk-pi-k { margin: 0 0 1.3cqw; font: 600 clamp(9.5px, 1.1cqw, 12px)/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.13em; text-transform: uppercase; color: #D9A15C; }
.hk-pi-h { margin: 0; font: 700 clamp(30px, 5.5cqw, 54px)/1.02 'Bricolage Grotesque', Georgia, serif; letter-spacing: -0.015em; }
.hk-pi-sub { margin: 1.6cqw 0 2.2cqw; max-width: 34ch; font: 400 clamp(12px, 1.4cqw, 15.5px)/1.5 Inter, system-ui, sans-serif; color: rgba(245, 241, 232, 0.86); }
.hk-pi-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 1.8cqw; }
.hk-pi-btns span { padding: clamp(9px, 1.15cqw, 12.5px) clamp(15px, 2cqw, 22px); border-radius: 999px; font: 600 clamp(11.5px, 1.3cqw, 14.5px)/1 Inter, system-ui, sans-serif; }
.hk-pi-b1 { background: #D9693E; color: #1E1108; box-shadow: 0 10px 22px rgba(217, 105, 62, 0.4); }
.hk-pi-b2 { border: 1.5px solid rgba(245, 241, 232, 0.5); color: #F5F1E8; }
.hk-pi-quote { position: absolute; z-index: 2; right: 4.4cqw; bottom: 5.5cqw; width: min(23cqw, 232px); padding: 1.7cqw; border-radius: 1.2cqw; background: rgba(22, 32, 25, 0.82); backdrop-filter: blur(10px); box-shadow: 0 20px 44px -14px rgba(0, 0, 0, 0.5); border: 1px solid rgba(245, 241, 232, 0.14); }
.hk-pi-q-k { margin: 0 0 1cqw; font: 600 clamp(9px, 1cqw, 11px)/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #D9A15C; }
.hk-pi-q-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 0.6cqw; font: 500 clamp(11px, 1.2cqw, 13px)/1 Inter, system-ui, sans-serif; color: rgba(245, 241, 232, 0.8); }
.hk-pi-q-row b { font: 700 clamp(16px, 1.9cqw, 21px)/1 Inter, system-ui, sans-serif; color: #F5F1E8; }
.hk-pi-q-range { width: 100%; margin: 0 0 1.2cqw; accent-color: #D9693E; }
.hk-pi-q-seg { display: flex; gap: 4px; margin-bottom: 1.2cqw; background: rgba(0, 0, 0, 0.25); border-radius: 999px; padding: 3px; }
.hk-pi-q-opt { flex: 1; padding: 6px 4px; border: 0; border-radius: 999px; background: transparent; color: rgba(245, 241, 232, 0.7); font: 600 clamp(9.5px, 1cqw, 11.5px)/1 Inter, system-ui, sans-serif; cursor: pointer; }
.hk-pi-q-opt.is-on { background: #F5F1E8; color: #1E2A22; }
.hk-pi-q-price { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 1.2cqw; }
.hk-pi-q-price small { font: 500 clamp(9px, 0.95cqw, 11px)/1 Inter, system-ui, sans-serif; color: rgba(245, 241, 232, 0.7); }
.hk-pi-q-price b { font: 800 clamp(17px, 2cqw, 22px)/1 Inter, system-ui, sans-serif; color: #FFFFFF; display: inline-block; transition: opacity 0.16s, transform 0.16s, color 0.16s; }
.hk-pi-q-price b.is-roll { opacity: 0.6; transform: translateY(-2px); color: #FFD9BB; }
.hk-pi-q-cta { display: block; text-align: center; padding: 9px; border-radius: 999px; background: #D9693E; color: #1E1108; font: 700 clamp(11px, 1.2cqw, 13px)/1 Inter, system-ui, sans-serif; }
@container (max-width: 520px) {
  [data-demo="ppintor"] .hp-site { background: #1E2A22; }
  .hk-pi-bg { bottom: 50%; } .hk-pi-bg img { object-position: 64% 40%; }
  .hk-pi-bg::after { background: linear-gradient(180deg, rgba(15, 22, 17, 0.4) 0%, rgba(15, 22, 17, 0.55) 40%, rgba(15, 22, 17, 0.82) 72%, #1E2A22 100%); }
  .hk-pi-nav { padding: 14px 16px; flex-wrap: wrap; row-gap: 8px; } .hk-pi-links { display: none; } .hk-pi-cta { margin-left: auto; }
  /* copy + cotizador comparten una columna anclada abajo: se apilan según su alto real, nunca se pisan */
  .hk-pi-foot { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
  .hk-pi-copy { position: static; max-width: none; transform: none; }
  .hk-pi-k { display: none; } .hk-pi-h { font-size: 25px; line-height: 1.08; }
  .hk-pi-sub { display: none; }
  .hk-pi-btns { margin: 8px 0 0; } .hk-pi-btns .hk-pi-b2 { display: none; }
  .hk-pi-quote { position: static; width: auto; padding: 12px 14px; }
}

/* ===== Nails Studio · prueba social sin caras (fondo claro rosado) ===== */
[data-demo="pnails"] .hp-site { background: #F8EEEA; color: #5B2A3C; }
.hk-na-bg { position: absolute; inset: 0; }
.hk-na-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 46%; }
.hk-na-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(248, 238, 234, 0.97) 0%, rgba(248, 238, 234, 0.84) 32%, rgba(248, 238, 234, 0.22) 58%, rgba(248, 238, 234, 0) 74%), linear-gradient(0deg, rgba(248, 238, 234, 0.5), transparent 26%); }
.hk-na-nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 3cqw 4.4cqw; }
.hk-na-logo { font: 500 italic clamp(16px, 2.1cqw, 22px)/1 'Playfair Display', Georgia, serif; letter-spacing: -0.005em; color: #5B2A3C; }
.hk-na-links { margin-left: auto; display: flex; gap: 2.2cqw; font: 500 clamp(11px, 1.3cqw, 14px)/1 Inter, system-ui, sans-serif; color: #7A4257; }
.hk-na-links i { font-style: normal; }
.hk-na-cta { padding: 8px 16px; border-radius: 999px; background: #5B2A3C; color: #F8EEEA; font: 600 clamp(11px, 1.25cqw, 13.5px)/1 Inter, system-ui, sans-serif; white-space: nowrap; }
.hk-na-copy { position: absolute; z-index: 2; left: 4.4cqw; top: 50%; transform: translateY(-50%); max-width: 42cqw; }
.hk-na-k { margin: 0 0 1.3cqw; font: 600 clamp(9.5px, 1.1cqw, 12px)/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.13em; text-transform: uppercase; color: #C9A35E; }
.hk-na-h { margin: 0; font: 500 italic clamp(32px, 6.5cqw, 64px)/0.98 'Playfair Display', Georgia, serif; letter-spacing: -0.01em; color: #5B2A3C; }
.hk-na-sub { margin: 1.8cqw 0 2.4cqw; max-width: 38ch; font: 400 clamp(12px, 1.4cqw, 15.5px)/1.55 Inter, system-ui, sans-serif; color: #7A4257; }
.hk-na-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 2cqw; }
.hk-na-btns span { padding: clamp(9px, 1.15cqw, 12.5px) clamp(15px, 2cqw, 22px); border-radius: 999px; font: 600 clamp(11.5px, 1.3cqw, 14.5px)/1 Inter, system-ui, sans-serif; }
.hk-na-b1 { background: #5B2A3C; color: #F8EEEA; box-shadow: 0 10px 22px rgba(91, 42, 60, 0.28); }
.hk-na-b2 { border: 1.5px solid rgba(91, 42, 60, 0.35); color: #5B2A3C; }
.hk-na-strip { display: flex; gap: 20px; padding-top: 1.6cqw; border-top: 1px solid rgba(91, 42, 60, 0.18); }
.hk-na-strip span { display: flex; flex-direction: column; }
.hk-na-strip b { font: 600 clamp(11px, 1.25cqw, 13.5px)/1.2 Inter, system-ui, sans-serif; color: #5B2A3C; }
.hk-na-strip small { margin-top: 2px; font: 500 clamp(10px, 1.05cqw, 12px)/1 Inter, system-ui, sans-serif; color: #A6698A; }
.hk-na-card { position: absolute; z-index: 2; right: 5cqw; bottom: 5.5cqw; width: min(19.5cqw, 194px); margin: 0; padding: 1.5cqw; border-radius: 1.1cqw; background: rgba(255, 252, 250, 0.9); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -14px rgba(91, 42, 60, 0.35); text-align: left; }
.hk-na-stars { margin: 0 0 0.5cqw; font: 700 clamp(11px, 1.25cqw, 13.5px)/1 Inter, system-ui, sans-serif; color: #C9A35E; letter-spacing: 0.01em; }
.hk-na-stars b { margin-left: 4px; color: #5B2A3C; }
.hk-na-count { margin: 0 0 1cqw; font: 500 clamp(10.5px, 1.1cqw, 12.5px)/1.3 Inter, system-ui, sans-serif; color: #7A4257; }
.hk-na-count b { font: 700 clamp(15px, 1.7cqw, 19px)/1 Inter, system-ui, sans-serif; color: #5B2A3C; }
.hk-na-quote { margin: 0; padding-top: 0.9cqw; border-top: 1px solid rgba(91, 42, 60, 0.16); font: 400 italic clamp(10.5px, 1.1cqw, 12.5px)/1.4 Inter, system-ui, sans-serif; color: #5B2A3C; min-height: 2.6em; transition: opacity 0.35s, transform 0.35s; }
.hk-na-quote.is-out { opacity: 0; transform: translateY(4px); }
.hk-na-quote q { quotes: none; }
.hk-na-quote cite { display: block; margin-top: 4px; font: 600 11px/1 Inter, system-ui, sans-serif; color: #A6698A; }
@container (max-width: 520px) {
  [data-demo="pnails"] .hp-site { background: #F8EEEA; }
  .hk-na-bg { bottom: 44%; } .hk-na-bg img { object-position: 70% 44%; }
  .hk-na-bg::after { background: linear-gradient(180deg, rgba(248, 238, 234, 0.3) 0%, rgba(248, 238, 234, 0) 26%, rgba(248, 238, 234, 0) 54%, #F8EEEA 95%); }
  .hk-na-nav { padding: 14px 16px; flex-wrap: wrap; row-gap: 8px; } .hk-na-links { display: none; } .hk-na-cta { margin-left: auto; }
  /* copy + tarjeta de reseñas comparten una columna anclada abajo: se apilan según su alto real, nunca se pisan */
  .hk-na-foot { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
  .hk-na-copy { position: static; max-width: none; transform: none; }
  .hk-na-h { font-size: 27px; margin-bottom: 12px; } .hk-na-sub { display: none; }
  .hk-na-btns { margin-top: 14px; } .hk-na-btns .hk-na-b2 { display: none; }
  .hk-na-strip { display: none; }
  .hk-na-card { position: static; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .hk-fe-car { animation: none !important; opacity: 1; } }


/* ---- lote l_ideas ---- */
/* Lote L (09-27): 2 portadas-concepto, protagonista distinto en cada una (David: «se veían casi iguales»).
   Usa el marco .hp-win / .hp-bar / .hp-url / .hp-site / .hp-tag de h_portadas.css (no se redefinen aquí);
   toda clase propia de este lote empieza con hl-. Tipografías propias, servidas localmente. */
@font-face { font-family: 'Instrument Serif'; src: url(assets/fonts/instrument-serif-italic-latin.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(assets/fonts/spacegrotesk-600-latin.woff2) format('woff2'); font-weight: 600; font-display: swap; }

/* ===== cproducto · Vespro (botella 3D real) ===== */
[data-demo="cproducto"] .hp-site { background: #0B0908; color: #EFE4D2; }
.hl-cp-stage { position: absolute; inset: 0; overflow: hidden; }
.hl-cp-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: opacity 0.5s ease; }
.hl-cp-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s ease; touch-action: pan-y; }
.hl-cp-stage.is-3d .hl-cp-photo { opacity: 0; }
.hl-cp-stage.is-3d .hl-cp-cv { opacity: 1; }
.hl-cp-word { position: absolute; left: 0; right: 0; top: 6%; margin: 0; text-align: center; font: 400 clamp(64px, 17cqw, 210px)/0.86 'Instrument Serif', Georgia, serif; font-style: italic; color: #241A14; letter-spacing: -0.02em; pointer-events: none; user-select: none; z-index: -1; }
.hl-cp-nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 3cqw 4.6cqw; }
.hl-cp-logo { font: 400 clamp(17px, 2.3cqw, 24px)/1 'Instrument Serif', Georgia, serif; font-style: italic; color: #EFE4D2; }
[data-demo="cproducto"] .hp-tag { color: #D8C08F; margin-left: 2px; }
.hl-cp-buy { margin-left: auto; padding: clamp(7px, 1cqw, 11px) clamp(14px, 2cqw, 20px); border-radius: 999px; background: #7A1E2B; border: 1px solid rgba(244, 233, 218, 0.28); color: #F4E9DA; font: 600 clamp(11px, 1.25cqw, 13px)/1 Inter, system-ui, sans-serif; }
/* hotspots fijos a un lado (como una ficha de producto de Apple): solo la altura sigue al punto proyectado;
   una línea guía (svg) conecta la ficha con el punto real sobre la botella. */
.hl-cp-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hl-cp-lines line { stroke: rgba(216, 192, 143, 0.5); stroke-width: 1; stroke-dasharray: 2.5 4; opacity: 0; transition: opacity 0.35s ease; }
.hl-cp-hs { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(11, 9, 8, 0.74); border: 1px solid rgba(216, 192, 143, 0.35); backdrop-filter: blur(3px); color: #E9D9B8; font: 500 clamp(9.5px, 1.05cqw, 11.5px)/1.2 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; transform: translateY(-50%); transition: opacity 0.35s ease, top 0.2s linear; }
.hl-cp-hs::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #D8C08F; flex: none; box-shadow: 0 0 0 4px rgba(216, 192, 143, 0.16); }
.hl-cp-hs[data-hs="0"], .hl-cp-hs[data-hs="1"] { right: 3.6cqw; }
.hl-cp-hs[data-hs="2"] { left: 3.6cqw; flex-direction: row-reverse; }
.hl-cp-hs.is-back { opacity: 0 !important; }
.hl-cp-hsl { display: none; }
.hl-cp-foot { position: absolute; z-index: 2; left: 4.6cqw; right: 4.6cqw; bottom: 4.4cqw; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hl-cp-h { margin: 0; font: 400 clamp(19px, 2.6cqw, 30px)/1.08 'Instrument Serif', Georgia, serif; font-style: italic; color: #F4E9DA; max-width: 40ch; }
.hl-cp-price { margin: 0; text-align: right; }
.hl-cp-price b { display: block; font: 600 clamp(16px, 2cqw, 21px)/1.2 Inter, system-ui, sans-serif; color: #F4E9DA; }
.hl-cp-price span { display: block; margin-top: 2px; font: 500 clamp(9.5px, 1.05cqw, 11.5px)/1.2 'JetBrains Mono', ui-monospace, monospace; color: #D8C08F; letter-spacing: 0.06em; }
.hl-cp-spin { position: absolute; z-index: 2; left: 50%; bottom: 1.4cqw; transform: translateX(-50%); margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(11, 9, 8, 0.55); font: 500 clamp(9px, 1cqw, 10.5px)/1 'JetBrains Mono', ui-monospace, monospace; color: rgba(216, 192, 143, 0.85); letter-spacing: 0.06em; white-space: nowrap; }
@container (max-width: 520px) {
  .hl-cp-nav { padding: 12px 16px; }
  .hl-cp-word { font-size: 22vw; top: 3%; }
  /* la botella sube de 37% a 43% del alto: sigue siendo la protagonista, no una foto chica sobre una lista
     (queda en 43%, no 46%: a 46% la lista de 3 datos + el hint de giro chocan con el titular de abajo). */
  .hl-cp-stage { top: 44px; bottom: auto; height: 43%; }
  .hl-cp-hs, .hl-cp-lines { display: none; }
  /* "↻ Gira la botella" ya NO se oculta en celular (display:none quitado): es la única pista de que la foto
     es 3D interactiva, y en táctil no hay hover que lo sugiera. Vive justo bajo la foto, antes de la lista. */
  .hl-cp-spin { display: block; position: absolute; z-index: 2; left: 50%; top: calc(44px + 43% + 4px); bottom: auto; transform: translateX(-50%); }
  .hl-cp-hsl { display: flex; flex-direction: column; gap: 3px; position: absolute; left: 16px; right: 16px; top: calc(44px + 43% + 26px); z-index: 2; margin: 0; padding: 0; list-style: none; }
  /* cada dato lleva el mismo punto dorado que en escritorio (.hl-cp-hs::before): sin línea que lo conecte a la
     botella, pero con el mismo "gesto" de dato-con-marcador en vez de un bullet plano genérico. */
  .hl-cp-hsl li { position: relative; padding: 3px 10px 3px 22px; border-radius: 9px; background: rgba(244, 233, 218, 0.06); border: 1px solid rgba(216, 192, 143, 0.22); color: #E9D9B8; font: 500 10.5px/1.3 'JetBrains Mono', ui-monospace, monospace; }
  .hl-cp-hsl li::before { content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #D8C08F; box-shadow: 0 0 0 4px rgba(216, 192, 143, 0.16); }
  .hl-cp-foot { position: absolute; left: 16px; right: 16px; bottom: 12px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .hl-cp-h { font-size: 14px; line-height: 1.15; }
  .hl-cp-price { text-align: left; }
  .hl-cp-price b { font-size: 15px; } .hl-cp-price span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .hl-cp-word { transform: none !important; } }

/* ===== cmapa · Cerrajería 24 h (mapa SVG real) ===== */
[data-demo="cmapa"] .hp-site { background: #0B0F14; color: #E8F5EE; }
.hl-mp-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-demo="cmapa"] .hp-tag { color: #3DDC97; margin-left: 2px; }
.hl-mp-pill { position: absolute; z-index: 2; right: 4.4cqw; top: 12.5cqw; display: flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 999px; background: rgba(6, 13, 11, 0.85); border: 1px solid rgba(61, 220, 151, 0.4); backdrop-filter: blur(6px); font: 600 clamp(10.5px, 1.2cqw, 13px)/1.15 'Space Grotesk', Inter, system-ui, sans-serif; color: #B9F3D8; white-space: nowrap; }
.hl-mp-pill i { width: 8px; height: 8px; border-radius: 50%; background: #3DDC97; flex: none; box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.6); }
.is-run .hl-mp-pill i { animation: hlMpPulse 1.7s infinite; }
@keyframes hlMpPulse { 70% { box-shadow: 0 0 0 6px rgba(61, 220, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); } }
.hl-mp-card { position: absolute; z-index: 2; left: 4.4cqw; bottom: 4cqw; width: 46cqw; max-width: 340px; padding: 14px 16px; border-radius: 16px; background: rgba(8, 14, 18, 0.82); border: 1px solid rgba(61, 220, 151, 0.28); backdrop-filter: blur(9px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6); }
.hl-mp-k { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font: 600 clamp(10px, 1.1cqw, 11.5px)/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #7FE0B6; }
.hl-mp-h { margin: 0 0 10px; font: 600 clamp(15px, 1.9cqw, 19px)/1.28 'Space Grotesk', Inter, system-ui, sans-serif; color: #ECFBF3; }
.hl-mp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.hl-mp-chips button { appearance: none; border: 1px solid rgba(232, 245, 238, 0.28); border-radius: 999px; background: transparent; color: #DCEFE6; padding: 5px 11px; font: 500 clamp(10.5px, 1.1cqw, 12px)/1 Inter, system-ui, sans-serif; cursor: pointer; }
.hl-mp-chips button.is-on { background: #3DDC97; border-color: #3DDC97; color: #04120C; }
.hl-mp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hl-mp-price { margin: 0; font: 600 clamp(13px, 1.5cqw, 15px)/1 'Space Grotesk', Inter, system-ui, sans-serif; color: #ECFBF3; }
.hl-mp-cta { padding: 8px 14px; border-radius: 999px; background: #3DDC97; color: #04120C; font: 600 clamp(11px, 1.2cqw, 13px)/1 Inter, system-ui, sans-serif; white-space: nowrap; }
.hl-mp-truck { transition: none; }
.hl-mp-truck rect, .hl-mp-truck circle { vector-effect: non-scaling-stroke; }
.hl-mp-pin-ring { transform-box: fill-box; transform-origin: center; animation: none; }
.is-run .hl-mp-pin-ring { animation: hlMpRing 1.9s ease-out infinite; }
@keyframes hlMpRing { 0% { transform: scale(0.4); opacity: 0.85; } 100% { transform: scale(2.2); opacity: 0; } }
@container (max-width: 520px) {
  /* píldora compacta a la derecha (como en escritorio), no a todo el ancho: así nunca cae encima de un rótulo
     de barrio ni de la camioneta, sea cual sea el destino activo. */
  /* top:44px cae en el único hueco vertical libre de rótulos del mapa entre "Playa Brava" y "Centro" (medido con
     Playwright): más arriba choca con Playa Brava, más abajo con Centro — el mapa no da un hueco más alto. */
  .hl-mp-pill { left: auto; right: 16px; top: 44px; max-width: 68%; justify-content: flex-start; white-space: normal; text-align: left; line-height: 1.25; }
  /* «mapa a pantalla completa + tarjeta CHICA» (boceto del concepto 5): 34% de abajo, no 46% — lo justo para
     título + 4 chips + precio/CTA — para que el mapa siga siendo el protagonista, no una franja recortada. */
  .hl-mp-card { position: absolute; left: 0; right: 0; bottom: 0; top: 66%; width: auto; max-width: none; border-radius: 20px 20px 0 0; background: rgba(6, 12, 10, 0.9); backdrop-filter: blur(10px); border: 0; border-top: 1px solid rgba(61, 220, 151, 0.28); box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hl-mp-pin-ring, .hl-mp-pill i { animation: none !important; } }


/* ---- lote m_ideas ---- */
/* Lote M (09-27) · 3 portadas-concepto (ideas 2, 7, 8 del boceto), calidad = h_portadas.
   Reutiliza .hp-win/.hp-bar/.hp-url/.hp-site/.hp-tag de h_portadas.css — no se repiten aquí. */
@font-face { font-family: 'Playfair Display'; src: url(assets/fonts/playfair-italic-latin.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Serif Display'; src: url(assets/fonts/dmserif-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(assets/fonts/instrument-serif-italic-latin.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* ===== cchat · Nails Studio (la portada es una conversación) ===== */
[data-demo="cchat"] .hp-site { background: linear-gradient(135deg, #F8EEEA, #F1D9DB); overflow: hidden; }
.hm-ch-amb { position: absolute; z-index: 0; inset: 0; }
.hm-ch-amb img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.hm-ch-amb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, #F8EEEA 0%, rgba(248, 238, 234, 0.95) 22%, rgba(248, 238, 234, 0.6) 42%, rgba(241, 217, 219, 0.12) 60%, transparent 74%); }
.hm-ch-nav { position: absolute; z-index: 3; left: 5cqw; top: 3.4cqw; display: flex; align-items: center; gap: 10px; color: #5B2A3C; }
.hm-ch-logo { font: italic 500 clamp(17px, 2.4cqw, 24px)/1 'Playfair Display', Georgia, serif; }
.hm-ch-phone { position: absolute; z-index: 2; left: 4cqw; top: 6%; bottom: 21%; width: 50cqw; min-width: 340px; border-radius: 28px; overflow: hidden; background: #FBF3F0; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 40px 70px -22px rgba(91, 42, 60, 0.48), 0 2px 0 rgba(255, 255, 255, 0.6) inset; display: flex; flex-direction: column; }
.hm-ch-phone::before { content: ''; position: absolute; z-index: 4; left: 50%; top: 10px; transform: translateX(-50%); width: 22%; max-width: 70px; height: 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.22); }
.hm-ch-head { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(1.4cqw + 14px) 3.4cqw 1.4cqw; background: #5B2A3C; color: #F8EEEA; }
.hm-ch-av { width: clamp(28px, 3.4cqw, 36px); aspect-ratio: 1; border-radius: 50%; background: #F8EEEA; color: #5B2A3C; display: grid; place-items: center; font: 700 clamp(11px, 1.4cqw, 14px)/1 Inter, sans-serif; flex: none; }
.hm-ch-who { display: flex; flex-direction: column; gap: 2px; }
.hm-ch-who b { font: 600 clamp(13px, 1.6cqw, 16px)/1 Inter, sans-serif; }
.hm-ch-who small { display: flex; align-items: center; gap: 5px; font: 500 clamp(10px, 1.15cqw, 12px)/1 Inter, sans-serif; opacity: 0.82; }
.hm-ch-dot { width: 6px; height: 6px; border-radius: 50%; background: #3DDC97; flex: none; }
.hm-ch-body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 3.2cqw 3.6cqw; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.hm-ch-body::-webkit-scrollbar { display: none; }
.hm-ch-m, .hm-ch-typ, .hm-ch-quick, .hm-ch-card { opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity 0.35s ease, transform 0.35s ease; }
.hm-ch-m.is-shown, .hm-ch-typ.is-shown, .hm-ch-quick.is-shown, .hm-ch-card.is-shown { opacity: 1; transform: none; }
.hm-ch-m { display: flex; align-items: flex-end; gap: 8px; max-width: 82%; padding: 10px 14px; border-radius: 17px; font: 500 clamp(15px, 1.9cqw, 19px)/1.4 Inter, sans-serif; box-shadow: 0 6px 16px -10px rgba(91, 42, 60, 0.4); }
.hm-ch-m span { flex: 1 1 auto; }
.hm-ch-m time { flex: none; display: flex; align-items: center; gap: 4px; font: 500 9.5px/1 'JetBrains Mono', ui-monospace, monospace; opacity: 0.55; white-space: nowrap; }
.hm-ch-in { align-self: flex-start; background: #fff; color: #2A1A20; border-bottom-left-radius: 4px; }
.hm-ch-out { align-self: flex-end; background: #5B2A3C; color: #F8EEEA; border-bottom-right-radius: 4px; }
.hm-ch-out time { opacity: 0.7; }
.hm-ch-ck { color: #6FD1F5; font-style: normal; }
.hm-ch-typ { align-self: flex-end; display: flex; gap: 4px; padding: 11px 15px; background: #5B2A3C; border-radius: 16px; border-bottom-right-radius: 4px; width: 50px; }
.hm-ch-typ i { width: 6px; height: 6px; border-radius: 50%; background: rgba(248, 238, 234, 0.75); animation: hmDot 1.1s infinite; }
.hm-ch-typ i:nth-child(2) { animation-delay: 0.15s; } .hm-ch-typ i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hmDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
.hm-ch-quick { align-self: flex-end; display: flex; gap: 7px; max-width: 82%; flex-wrap: wrap; }
.hm-ch-quick button { padding: 7px 15px; border-radius: 999px; border: 1.5px solid #5B2A3C; background: #fff; color: #5B2A3C; font: 600 clamp(11px, 1.35cqw, 13px)/1 Inter, sans-serif; cursor: pointer; transition: background 0.2s, color 0.2s; }
.hm-ch-quick button.is-picked { background: #5B2A3C; color: #F8EEEA; }
.hm-ch-card { position: relative; align-self: center; display: flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid #C9A35E; border-radius: 14px; padding: 9px 13px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.25); }
.hm-ch-ok { width: 21px; height: 21px; border-radius: 50%; background: #2F9E61; color: #fff; display: grid; place-items: center; font: 700 11px/1 Inter, sans-serif; font-style: normal; flex: none; }
.hm-ch-card-t { display: flex; flex-direction: column; }
.hm-ch-card-t b { font: 700 clamp(12px, 1.4cqw, 14px)/1.2 Inter, sans-serif; color: #2A1A20; }
.hm-ch-card-t small { font: 500 clamp(10px, 1.1cqw, 11.5px)/1.3 Inter, sans-serif; color: #6B4A56; }
.hm-ch-card button { flex: none; padding: 7px 12px; border: 0; border-radius: 999px; background: #25A55F; color: #fff; font: 600 10.5px/1 Inter, sans-serif; white-space: nowrap; cursor: pointer; }
.hm-ch-pop { position: absolute; right: -6px; top: -16px; font: 20px/1 sans-serif; font-style: normal; opacity: 0; transform: scale(0.4) rotate(-18deg); transition: opacity 0.3s ease 0.15s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s; }
.hm-ch-card.is-pop .hm-ch-pop { opacity: 1; transform: scale(1) rotate(0deg); }
.hm-ch-photo { flex-direction: column; align-items: stretch; gap: 6px; max-width: 76%; padding: 6px 6px 8px; }
.hm-ch-photo-img { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; }
.hm-ch-photo-img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }
.hm-ch-photo > span[data-i18n] { padding: 0 4px; }
.hm-ch-photo time { align-self: flex-end; padding: 0 4px; }
.hm-ch-copy { position: absolute; z-index: 2; left: 5cqw; bottom: 3.6cqw; max-width: 40cqw; }
.hm-ch-line { margin: 0; font: italic 500 clamp(30px, 3.9cqw, 50px)/1.04 'Playfair Display', Georgia, serif; color: #5B2A3C; }
.hm-ch-sub { margin: 9px 0 0; font: 500 clamp(12.5px, 1.3cqw, 14.5px)/1.45 Inter, sans-serif; color: #7A4A57; }
.hm-ch-cta { position: absolute; z-index: 2; right: 5cqw; bottom: 3.6cqw; display: inline-flex; align-items: center; gap: 8px; font: 600 clamp(12px, 1.4cqw, 15px)/1 Inter, sans-serif; background: #25A55F; color: #fff; border-radius: 999px; padding: clamp(10px, 1.3cqw, 14px) clamp(16px, 2cqw, 22px); box-shadow: 0 12px 26px -10px rgba(37, 165, 95, 0.55); transition: transform 0.25s, box-shadow 0.25s; }
.hm-ch-wa { display: flex; font-style: normal; }
.hm-ch-wa svg { width: 15px; height: 15px; }
.hp-site:hover .hm-ch-cta { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(37, 165, 95, 0.7); }
@media (prefers-reduced-motion: reduce) {
  .hm-ch-m, .hm-ch-typ, .hm-ch-quick, .hm-ch-card, .hm-ch-pop, .hm-ch-typ i { transition: none !important; animation: none !important; }
}
@container (max-width: 520px) {
  .hm-ch-amb { display: none; }
  .hm-ch-nav { left: 16px; right: 16px; top: 12px; } .hm-ch-logo { font-size: 17px; }
  .hm-ch-phone { left: 14px; right: 14px; top: 44px; bottom: 112px; width: auto; min-width: 0; transform: none; border-radius: 20px; }
  .hm-ch-phone::before { top: 7px; width: 26%; height: 5px; }
  .hm-ch-head { padding: 14px 12px 8px; gap: 8px; }
  .hm-ch-av { width: 24px; font-size: 10px; }
  .hm-ch-who b { font-size: 13px; } .hm-ch-who small { font-size: 9.5px; }
  .hm-ch-body { padding: 10px 12px; gap: 6px; }
  .hm-ch-m { font-size: 13.5px; padding: 8px 12px; }
  .hm-ch-m time { font-size: 8.5px; }
  .hm-ch-quick button { padding: 5px 11px; font-size: 11px; }
  .hm-ch-photo { max-width: 84%; } .hm-ch-photo-img { aspect-ratio: 2 / 1; }
  .hm-ch-card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 6px; padding: 8px 10px; }
  .hm-ch-ok { grid-column: 1; grid-row: 1; width: 18px; height: 18px; font-size: 9px; }
  .hm-ch-card-t { grid-column: 2; grid-row: 1; }
  .hm-ch-card-t b { font-size: 11px; } .hm-ch-card-t small { font-size: 9.5px; }
  .hm-ch-card button { grid-column: 1 / -1; grid-row: 2; padding: 6px 9px; font-size: 10px; text-align: center; }
  .hm-ch-pop { font-size: 16px; top: -12px; }
  .is-picked .hm-ch-quick { display: none; }
  .hm-ch-copy { left: 16px; right: 16px; bottom: 58px; max-width: none; }
  .hm-ch-line { font-size: 23px; }
  .hm-ch-sub { font-size: 11.5px; margin-top: 5px; }
  .hm-ch-cta { left: 16px; right: 16px; bottom: 12px; padding: 9px 14px; font-size: 12px; justify-content: center; }
}

/* ===== chistorias · Tours Bahía Norte (historias, como en Instagram) ===== */
[data-demo="chistorias"] .hp-site { background: #0B4F5C; }
.hm-hi-copy { position: absolute; z-index: 2; left: 5cqw; top: 50%; transform: translateY(-50%); width: 22cqw; min-width: 192px; color: #F4E3C3; }
.hm-hi-logo { display: block; margin-bottom: 9px; font: 400 clamp(15px, 1.9cqw, 19px)/1 'DM Serif Display', Georgia, serif; }
.hm-hi-copy h4 { margin: 16px 0 12px; font: 400 clamp(28px, 3.4cqw, 44px)/1.05 'DM Serif Display', Georgia, serif; }
.hm-hi-copy p { margin: 0 0 18px; font: 500 clamp(12px, 1.35cqw, 14px)/1.5 Inter, sans-serif; color: rgba(244, 227, 195, 0.85); max-width: 27ch; }
.hm-hi-cta { display: inline-flex; font: 600 clamp(12px, 1.35cqw, 14px)/1 Inter, sans-serif; background: #25A55F; color: #fff; border-radius: 999px; padding: 11px 18px; }
.hm-hi-rail { position: absolute; z-index: 1; inset: 0 3cqw 0 34cqw; display: flex; align-items: center; justify-content: center; gap: 1.8cqw; perspective: 1100px; }
.hm-hi-st { position: relative; flex: none; height: 82%; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #06262c; cursor: pointer; opacity: 0.62; transform: perspective(1400px) scale(0.85) rotateY(0deg); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.45); }
.hm-hi-st.is-prev { transform: perspective(1400px) scale(0.85) rotateY(15deg); }
.hm-hi-st.is-next { transform: perspective(1400px) scale(0.85) rotateY(-15deg); }
.hm-hi-st.is-active { opacity: 1; transform: perspective(1400px) scale(1.02) rotateY(0deg); z-index: 2; box-shadow: 0 24px 46px -14px rgba(0, 0, 0, 0.6); }
.hm-hi-st img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s linear; }
.hm-hi-st.is-active img { transform: scale(1.16); }
.hm-hi-st::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 26%, transparent 55%, rgba(0, 0, 0, 0.7)); }
.hm-hi-pb { position: absolute; z-index: 2; left: 9px; right: 9px; top: 9px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.hm-hi-fill { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }
.hm-hi-st.is-done .hm-hi-fill { width: 100%; }
.hm-hi-st.is-active .hm-hi-fill { animation: hmFill 5s linear forwards; }
@keyframes hmFill { from { width: 0; } to { width: 100%; } }
.hm-hi-who { position: absolute; z-index: 2; left: 10px; top: 17px; display: flex; align-items: center; gap: 7px; opacity: 0; transform: translateY(-4px); transition: opacity 0.4s, transform 0.4s; }
.hm-hi-avring { width: 22px; height: 22px; border-radius: 50%; padding: 2px; flex: none; display: flex; align-items: center; justify-content: center; background: conic-gradient(from 200deg, #FED373, #F15245, #D62976, #9B36B7, #4F5BD5, #FED373); }
.hm-hi-av { width: 17px; height: 17px; border-radius: 50%; background: #F4E3C3; color: #0B4F5C; display: grid; place-items: center; font: 700 8px/1 Inter, sans-serif; font-style: normal; flex: none; }
.hm-hi-who b { font: 600 10.5px/1 Inter, sans-serif; color: #fff; }
.hm-hi-info { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s; }
.hm-hi-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); font: 600 10px/1 'JetBrains Mono', ui-monospace, monospace; color: #FFD2C4; margin-bottom: 9px; }
.hm-hi-info b { display: block; font: 800 clamp(17px, 2.3cqw, 23px)/1.12 Inter, sans-serif; color: #fff; margin-bottom: 10px; }
.hm-hi-book { display: inline-block; padding: 7px 13px; border: 0; border-radius: 999px; background: #25A55F; color: #fff; font: 600 11px/1 Inter, sans-serif; cursor: pointer; }
.hm-hi-st.is-active .hm-hi-who, .hm-hi-st.is-active .hm-hi-info { opacity: 1; transform: none; }
.hm-hi-arrow { display: none; position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(11, 79, 92, 0.55); color: #fff; font: 400 18px/1 Inter, sans-serif; align-items: center; justify-content: center; }
.hm-hi-prev { left: 10px; } .hm-hi-next { right: 10px; }
@container (max-width: 520px) {
  .hm-hi-copy { width: auto; left: 16px; right: 16px; top: auto; bottom: 16px; transform: none; }
  .hm-hi-copy p { display: none; } .hm-hi-copy h4 { margin: 5px 0 10px; font-size: 25px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
  .hm-hi-logo { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
  .hm-hi-logo { display: inline; margin-right: 8px; } [data-demo="chistorias"] .hp-tag { margin-left: 4px; }
  .hm-hi-rail { inset: 0; gap: 0; perspective: none; }
  .hm-hi-st { height: 100%; aspect-ratio: auto; width: 100%; border-radius: 0; }
  .hm-hi-st:not(.is-active) { display: none; }
  .hm-hi-st::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 22%, transparent 42%, transparent 58%, rgba(0, 0, 0, 0.75) 100%); }
  .hm-hi-who { left: 12px; right: 60px; top: 14px; }
  .hm-hi-avring { width: 19px; height: 19px; } .hm-hi-avring .hm-hi-av { width: 15px; height: 15px; }
  .hm-hi-who b { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
  .hm-hi-info { left: 12px; right: 40%; top: 40px; bottom: auto; }
  .hm-hi-pill { font-size: 10px; color: #FFF3DC; background: rgba(0, 0, 0, 0.28); text-shadow: none; margin-bottom: 7px; }
  .hm-hi-info b { font-size: 16px; margin-bottom: 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
  .hm-hi-book { display: none; }
  .hm-hi-arrow { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .hm-hi-st img, .hm-hi-st.is-active .hm-hi-fill { animation: none !important; transition: none !important; } }

/* ===== ccarta · Dra. Valentina Ríos (una carta de la dueña) ===== */
[data-demo="ccarta"] .hp-site { background: #E9E1D3; color: #2A231C; }
[data-demo="ccarta"] .hp-site::before { content: ''; position: absolute; inset: -14%; background: radial-gradient(ellipse 40% 55% at 26% 18%, rgba(70, 58, 34, 0.12), transparent 62%), radial-gradient(ellipse 34% 50% at 78% 82%, rgba(70, 58, 34, 0.1), transparent 60%); mix-blend-mode: multiply; pointer-events: none; }
.is-run[data-demo="ccarta"] .hp-site::before { animation: hmLeaf 42s ease-in-out infinite alternate; }
@keyframes hmLeaf { to { transform: translate(3.5%, -2.5%) rotate(3deg); } }
.hm-ca-nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 2.8cqw 4.6cqw; }
.hm-ca-mono { display: grid; place-items: center; width: clamp(28px, 3.2cqw, 36px); aspect-ratio: 1; border-radius: 50%; background: #1B1712; color: #F4EFE6; font: 600 clamp(11px, 1.25cqw, 13px)/1 'Instrument Serif', Georgia, serif; font-style: italic; }
.hm-ca-cta { margin-left: auto; padding: 8px 14px; border-radius: 999px; border: 1.5px solid #1B1712; font: 600 clamp(11px, 1.2cqw, 13px)/1 Inter, sans-serif; }
.hm-ca-paper { position: absolute; z-index: 2; left: 6.5cqw; top: 12%; width: 46cqw; min-width: 240px; height: 76%; background: #FFFCF5; box-shadow: 0 24px 48px -20px rgba(60, 40, 20, 0.4); padding: 3.2cqw 3cqw; transform: rotate(-1.1deg); background-image: repeating-linear-gradient(rgba(60, 40, 20, 0.035) 0 1px, transparent 1px 2.4em); }
.hm-ca-hi, .hm-ca-l { margin: 0 0 0.6em; font: italic 400 clamp(16px, 2.2cqw, 22px)/1.35 'Instrument Serif', Georgia, serif; color: #2A231C; clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1); }
.hm-ca-hi { font-size: clamp(24px, 3.3cqw, 34px); margin-bottom: 0.5em; transition-duration: 0.9s; }
.hm-ca-l { transition-duration: 1.3s; }
.hm-ca-hi.is-in, .hm-ca-l.is-in { clip-path: inset(0 0% 0 0); }
.hm-ca-sig { position: relative; display: inline-block; margin: 0.4em 0 0; font: italic 400 clamp(20px, 2.7cqw, 27px)/1 'Instrument Serif', Georgia, serif; color: #9A5B2E; clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1); }
.hm-ca-sig.is-in { clip-path: inset(0 0% 0 0); }
.hm-ca-sq { position: absolute; left: 0; bottom: -0.5em; width: 6em; height: 1.2em; color: #9A5B2E; opacity: 0.75; }
.hm-ca-sq path { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.1s ease; }
.hm-ca-sig.is-in .hm-ca-sq path { stroke-dashoffset: 0; }
.hm-ca-btn { display: block; margin-top: 1.6em; padding: 9px 16px; border: 0; border-radius: 999px; background: #1B1712; color: #F4EFE6; font: 600 clamp(11px, 1.25cqw, 13px)/1 Inter, sans-serif; cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s; }
.hm-ca-btn.is-in { opacity: 1; transform: none; }
.hm-ca-tape { position: absolute; z-index: 3; right: 15.5cqw; top: 10%; width: 76px; height: 22px; background: rgba(240, 225, 190, 0.75); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); transform: rotate(-6deg); }
.hm-ca-pol { position: absolute; z-index: 2; right: 6.5cqw; top: 13%; width: 25cqw; min-width: 150px; margin: 0; background: #fff; padding: 10px 10px 30px; box-shadow: 0 20px 36px -16px rgba(60, 40, 20, 0.5); transform: rotate(3.5deg); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hm-ca-pol.is-straight, .hp-site:hover .hm-ca-pol { transform: rotate(0.5deg); }
.hm-ca-pol div { aspect-ratio: 3 / 4; overflow: hidden; }
.hm-ca-pol img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hm-ca-pol figcaption { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font: italic 400 15px/1 'Instrument Serif', Georgia, serif; color: #5A4A3A; }
.hm-ca-stamp { position: absolute; z-index: 3; right: 5.5cqw; bottom: 8%; width: clamp(78px, 9.5cqw, 108px); aspect-ratio: 1; border-radius: 50%; border: 2px dashed #9A5B2E; color: #9A5B2E; display: grid; place-items: center; text-align: center; padding: 8px; font: 700 clamp(8.5px, 0.98cqw, 10.5px)/1.25 'JetBrains Mono', ui-monospace, monospace; transform: scale(2.2) rotate(-24deg); opacity: 0; transition: opacity 0.25s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hm-ca-stamp.is-in { opacity: 0.9; transform: scale(1) rotate(-10deg); }
@container (max-width: 520px) {
  .hm-ca-nav { padding: 10px 14px; }
  .hm-ca-mono { width: 26px; font-size: 10px; }
  .hm-ca-cta { padding: 6px 11px; font-size: 11px; }
  .hm-ca-pol { left: 50%; right: auto; top: 32px; width: 84px; min-width: 0; margin: 0; transform: translateX(-50%) rotate(3.5deg); padding: 6px 6px 18px; }
  .hm-ca-pol.is-straight, .hp-site:hover .hm-ca-pol { transform: translateX(-50%) rotate(0.5deg); }
  .hm-ca-pol figcaption { font-size: 10px; bottom: 4px; }
  .hm-ca-tape { left: 50%; right: auto; margin-left: -23px; top: 24px; width: 46px; height: 14px; }
  .hm-ca-paper { left: 16px; right: 16px; top: 176px; width: auto; height: auto; bottom: 12px; padding: 14px 16px; }
  .hm-ca-hi { font-size: 20px; margin-bottom: 0.4em; }
  .hm-ca-l { font-size: 13px; line-height: 1.32; }
  .hm-ca-sig { font-size: 17px; }
  .hm-ca-btn { margin-top: 0.9em; padding: 7px 13px; font-size: 11px; }
  .hm-ca-stamp { right: 14px; top: 138px; bottom: auto; width: 52px; font-size: 6.6px; padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-run[data-demo="ccarta"] .hp-site::before { animation: none !important; }
  .hm-ca-hi, .hm-ca-l, .hm-ca-sig, .hm-ca-btn, .hm-ca-stamp, .hm-ca-sq path, .hm-ca-pol { transition: none !important; }
}


/* ---- lote n_ideas ---- */
/* Lote N (09-27) · 2 de las 8 IDEAS de portada · reusa .hp-win/.hp-bar/.hp-url/.hp-site/.hp-tag de h_portadas.css. */
@font-face { font-family: 'Archivo Exp'; src: url(assets/fonts/archivo-800x-latin.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(assets/fonts/bricolage-700-latin.woff2) format('woff2'); font-weight: 700; font-display: swap; }

/* ===== Ferretería Central · la portada es el catálogo (mosaico bento borde a borde) ===== */
[data-demo="ccatalogo"] .hp-site { overflow-y: auto; -webkit-overflow-scrolling: touch; background: #F6F3EC; }
.hn-fc-grid {
  position: absolute; inset: 0; padding: 8px; gap: 8px; background: #F6F3EC;
  display: grid; grid-template-columns: 1.05fr 1.35fr 1.35fr; grid-template-rows: 1fr 1fr .8fr;
  grid-template-areas: "brand big  pin" "srch  gas  jar" "of    desp desp";
}
.hn-fc-t { position: relative; border-radius: 14px; overflow: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s; }
.hn-fc-t:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 16px 32px -12px rgba(20,14,6,.35); z-index: 3; }
.hn-fc-t.is-hi { transform: translateY(-5px) scale(1.02); box-shadow: 0 20px 40px -12px rgba(20,14,6,.45), 0 0 0 2px rgba(255,255,255,.55); z-index: 3; }
@media (prefers-reduced-motion: reduce) { .hn-fc-t, .hn-fc-t:hover, .hn-fc-t.is-hi { transition: none; transform: none; } }

.hn-fc-brand { grid-area: brand; background: #FF6A13; color: #181005; padding: 3.2cqw 3cqw; display: flex; flex-direction: column; justify-content: flex-start; }
.hn-fc-extag { position: absolute; top: 10px; right: 10px; color: #181005; border-color: rgba(24,16,5,.45); }
.hn-fc-logo { font: 800 clamp(11px, 1.6cqw, 19px)/1.05 'Archivo Exp', 'Arial Narrow', sans-serif; letter-spacing: -0.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.hn-fc-brand-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.hn-fc-tagline { margin: 0; font: 600 clamp(8.5px, 1cqw, 10.5px)/1.35 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; opacity: .82; }
.hn-fc-bottom-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.hn-fc-hours { margin: 0; display: flex; align-items: center; gap: 7px; white-space: nowrap; font: 600 clamp(10px, 1.1cqw, 12px)/1 Inter, system-ui, sans-serif; }
.hn-fc-dot { width: 7px; height: 7px; border-radius: 50%; background: #1E7A3C; box-shadow: 0 0 0 3px rgba(30,122,60,.28); flex: none; }
.hn-fc-call { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: #181005; color: #FFB37A; font: 700 clamp(9px, 1cqw, 11px)/1 Inter, system-ui, sans-serif; white-space: nowrap; flex: none; }

.hn-fc-srch { grid-area: srch; background: #151515; color: #F4F1E9; padding: 1.7cqw 2.6cqw; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.hn-fc-q-k { margin: 0; font: 700 clamp(10px, 1.15cqw, 13px)/1.05 Inter, system-ui, sans-serif; }
.hn-fc-q-box { margin: 0; display: flex; align-items: center; gap: 7px; background: #F4F1E9; color: #151515; border-radius: 8px; padding: 5px 9px; font: 600 clamp(9.5px, 1.05cqw, 11.5px)/1 Inter, system-ui, sans-serif; }
.hn-fc-q-ico { font-style: normal; font-size: .95em; opacity: .7; }
.hn-fc-q-txt { flex: 1; white-space: nowrap; overflow: hidden; }
.hn-fc-q-caret { width: 1.5px; align-self: stretch; background: #151515; opacity: .55; animation: hnCaret 1s steps(1) infinite; }
@keyframes hnCaret { 50% { opacity: 0; } }
.hn-fc-res { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hn-fc-res li { display: flex; flex-direction: column; gap: 0; font: 500 clamp(8.5px, .95cqw, 10.5px)/1.12 Inter, system-ui, sans-serif; color: rgba(244,241,233,.88); border-top: 1px solid rgba(244,241,233,.14); padding-top: 2px; }
.hn-fc-res li:first-child { border-top: 0; padding-top: 0; }
.hn-fc-res-n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-fc-res-p { color: #FFB37A; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .hn-fc-q-caret { animation: none; } }

.hn-fc-photo { margin: 0; background: #111; }
.hn-fc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hn-fc-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,8,4,.72) 0%, rgba(10,8,4,0) 48%); }
.hn-fc-photo figcaption { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 1; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.hn-fc-photo small { font: 600 clamp(8.5px, .95cqw, 10.5px)/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #FFB37A; }
.hn-fc-photo b { font: 700 clamp(11px, 1.3cqw, 15px)/1.15 Inter, system-ui, sans-serif; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hn-fc-ver { position: absolute; right: 14px; top: 14px; z-index: 1; font: 600 clamp(9px, 1cqw, 11px)/1 Inter, system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.68); backdrop-filter: blur(3px); padding: 5px 9px; border-radius: 999px; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; white-space: nowrap; }
.hn-fc-photo:hover .hn-fc-ver, .hn-fc-photo.is-hi .hn-fc-ver { opacity: 1; transform: translateY(0); }
.hn-fc-big { grid-area: big; } .hn-fc-pin { grid-area: pin; } .hn-fc-gas { grid-area: gas; } .hn-fc-jar { grid-area: jar; }

/* la oferta es ahora la pieza tipográfica fuerte, en la casilla ancha 2×1 */
.hn-fc-of { grid-area: desp; background: #FFF3E4; color: #5A2E0C; padding: 2.1cqw 2.8cqw; display: flex; align-items: center; justify-content: space-between; gap: 2.4cqw; }
.hn-fc-of-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hn-fc-of-k { margin: 0; font: 700 clamp(9px, 1cqw, 11.5px)/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #C2530E; }
.hn-fc-of-n { margin: 0; font: 700 clamp(15px, 2.05cqw, 24px)/1.1 Inter, system-ui, sans-serif; color: #3A1F09; }
.hn-fc-of-price { margin: 3px 0 0; display: flex; align-items: baseline; gap: 12px; }
.hn-fc-of-price b { font: 800 clamp(30px, 5.4cqw, 58px)/1 'Archivo Exp', 'Arial Narrow', sans-serif; color: #E4600A; letter-spacing: -0.01em; }
.hn-fc-of-price s { font: 600 clamp(12px, 1.4cqw, 18px)/1 Inter, system-ui, sans-serif; color: rgba(90,46,12,.5); }
.hn-fc-of-stamp { flex: none; display: grid; place-items: center; width: clamp(54px, 6.6cqw, 88px); height: clamp(54px, 6.6cqw, 88px); border-radius: 50%; border: 2.5px dashed #E4600A; color: #E4600A; background: #FFE3C2; font: 800 clamp(12px, 1.55cqw, 19px)/1 Inter, system-ui, sans-serif; transform: rotate(-10deg); text-align: center; }

/* el despacho pasa a la casilla chica 1×1, ícono grande + 2 líneas */
.hn-fc-desp { grid-area: of; background: #171008; color: #EAF6EF; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 2cqw 2.4cqw; }
.hn-fc-truck { width: clamp(32px, 4.6cqw, 50px); flex: none; color: #FF9A52; margin-bottom: 2px; }
.hn-fc-desp-h { margin: 0; font: 700 clamp(13px, 1.55cqw, 17px)/1.15 Inter, system-ui, sans-serif; }
.hn-fc-desp-sub { margin: 0; font: 500 clamp(9.5px, 1.05cqw, 11.5px)/1.3 Inter, system-ui, sans-serif; color: rgba(234,246,239,.72); }

@container (max-width: 520px) {
  .hn-fc-grid {
    position: static; min-height: 100%; padding: 8px; gap: 5px;
    grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: min-content; align-content: start;
    grid-template-areas: "brand brand" "srch srch" "big pin" "gas jar" "desp desp";   /* la OFERTA usa el área «desp» (ver arriba) */
  }
  /* 09-27: 4 miniaturas en fila no dejaban leer categoría ni precio → 2×2; el despacho sale en celular (quedaba cortado) */
  .hn-fc-desp { display: none; }
  .hn-fc-res li:nth-child(2) { display: none; }
  .hn-fc-big, .hn-fc-pin, .hn-fc-gas, .hn-fc-jar { aspect-ratio: 2.8; }
  .hn-fc-brand, .hn-fc-srch, .hn-fc-of, .hn-fc-desp { min-height: 56px; padding: 8px 12px; }
  .hn-fc-brand-bottom { gap: 6px; }
  .hn-fc-logo { font-size: 18px; }
  .hn-fc-res li:nth-child(3) { display: none; }
  .hn-fc-res li { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; }
  .hn-fc-ver { display: none; }
  .hn-fc-photo figcaption { left: 6px; right: 6px; bottom: 6px; }
  .hn-fc-photo small { font-size: 8.5px; letter-spacing: .06em; color: #FFD9B8; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
  .hn-fc-photo b { font-size: 12px; }
  .hn-fc-truck { width: 26px; margin-bottom: 0; }
  .hn-fc-desp-h { font-size: 13px; }
  .hn-fc-of-price b { font-size: 26px; }
  .hn-fc-of-stamp { width: 44px; height: 44px; font-size: 11px; }
}

/* ===== Pintores del Norte · antes y después a pantalla completa ===== */
[data-demo="cantes"] .hp-site { background: #0B0F0C; }
.hn-pa-imgs { position: absolute; inset: 0; --pos: 50%; touch-action: pan-y; cursor: ew-resize; }
.hn-pa-after, .hn-pa-before { position: absolute; inset: 0; overflow: hidden; margin: 0; }
.hn-pa-after img, .hn-pa-before img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.hn-pa-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.hn-pa-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 14px rgba(0,0,0,.5); pointer-events: none; z-index: 3; }
.hn-pa-knob { position: absolute; top: 50%; left: var(--pos); width: clamp(38px, 6cqw, 54px); height: clamp(38px, 6cqw, 54px); margin: -27px 0 0 -27px; border-radius: 50%; background: #fff; color: #1E2A22; display: grid; place-items: center; box-shadow: 0 10px 22px rgba(0,0,0,.4); z-index: 4; touch-action: none; cursor: ew-resize; }
.hn-pa-knob svg { width: 56%; }
.hn-pa-knob:focus-visible { outline: 3px solid #D9693E; outline-offset: 3px; }
.hn-pa-lb { position: absolute; top: clamp(60px, 9.5cqw, 82px); z-index: 4; font: 600 clamp(9.5px, 1.1cqw, 12px)/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; color: #fff; background: rgba(10,14,10,.55); backdrop-filter: blur(4px); padding: 6px 11px; border-radius: 6px; }
.hn-pa-lb--a { left: 4cqw; } .hn-pa-lb--d { right: 4cqw; }
.hn-pa-nav { position: absolute; z-index: 4; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 14px 4cqw; background: linear-gradient(180deg, rgba(9,13,9,.62), transparent); }
.hn-pa-logo { font: 700 clamp(15px, 2cqw, 21px)/1 'Bricolage Grotesque', Georgia, serif; color: #F4EFE4; letter-spacing: -0.01em; }
.hn-pa-navcta { margin-left: auto; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(244,239,228,.5); color: #F4EFE4; font: 600 clamp(11px, 1.2cqw, 13px)/1 Inter, system-ui, sans-serif; backdrop-filter: blur(6px); }
.hn-pa-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 3.4cqw 4cqw; background: linear-gradient(0deg, rgba(8,12,8,.86), rgba(8,12,8,.35) 70%, transparent); color: #F4EFE4; }
.hn-pa-h { margin: 0; max-width: 44cqw; font: 700 clamp(24px, 4.4cqw, 48px)/1.03 'Bricolage Grotesque', Georgia, serif; letter-spacing: -0.01em; }
.hn-pa-info { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hn-pa-stats { margin: 0; font: 500 clamp(11px, 1.25cqw, 14px)/1.4 Inter, system-ui, sans-serif; color: rgba(244,239,228,.85); text-align: right; }
.hn-pa-cta { padding: clamp(10px, 1.3cqw, 14px) clamp(18px, 2.4cqw, 26px); border-radius: 999px; background: #D9693E; color: #1B0A03; font: 700 clamp(12px, 1.4cqw, 15px)/1 Inter, system-ui, sans-serif; box-shadow: 0 12px 26px rgba(217,105,62,.4); }

@container (max-width: 520px) {
  .hn-pa-foot { flex-direction: column; align-items: flex-start; justify-content: flex-end; background: linear-gradient(0deg, rgba(8,12,8,.92), rgba(8,12,8,.55) 60%, transparent); gap: 10px; padding: 18px; }
  .hn-pa-h { max-width: none; font-size: 26px; }
  .hn-pa-info { align-items: flex-start; width: 100%; }
  .hn-pa-stats { text-align: left; }
  .hn-pa-nav { padding: 12px 16px; }
  .hn-pa-lb { top: 84px; padding: 5px 9px; font-size: 9px; }
  .hn-pa-knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}
@media (prefers-reduced-motion: reduce) { .hn-pa-before { transition: none; } }


/* ---- lote o_carta ---- */
/* Lote O · «Una carta de la dueña» rehecha (09-27). Papel fino, membrete, letra de libro y firma manuscrita real. */
@font-face { font-family: 'Newsreader'; src: url(assets/fonts/newsreader-400-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url(assets/fonts/fraunces-600-latin.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'VR Firma'; src: url(assets/fonts/mrssaint-latin.woff2) format('woff2'); font-display: swap; }

[data-demo="cvalentina"] .hp-site { background: radial-gradient(ellipse 70% 80% at 40% 45%, #F7F1E6 0%, #EDE3D2 60%, #E4D8C3 100%); color: #231D17; }
[data-demo="cvalentina"] .hp-site::before { content: ''; position: absolute; inset: 0; opacity: 0.35; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* luz de ventana en diagonal sobre todo el escritorio (incluida la hoja): un barrido suave, no un foco */
[data-demo="cvalentina"] .hp-site::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(118deg, rgba(255, 248, 224, 0) 10%, rgba(255, 251, 232, .95) 34%, rgba(255, 253, 244, .5) 50%, rgba(255, 248, 224, 0) 76%); }

.hv-nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 2.4cqw 4.4cqw; }
.hv-logo { font: 600 clamp(13px, 1.5cqw, 17px)/1 'Fraunces', Georgia, serif; letter-spacing: -0.005em; }
.hv-links { margin-left: auto; display: flex; gap: 2.2cqw; font: 500 clamp(11px, 1.2cqw, 13.5px)/1 Inter, system-ui, sans-serif; color: #5A4E42; }
.hv-links i { font-style: normal; }
.hv-cta { padding: 8px 15px; border-radius: 999px; background: #231D17; color: #F7F1E6; font: 600 clamp(11px, 1.2cqw, 13px)/1 Inter, system-ui, sans-serif; white-space: nowrap; }

.hv-desk { position: absolute; inset: 11% 4.4cqw 5% 4.4cqw; display: flex; align-items: center; justify-content: center; gap: 3.2cqw; }
.hv-sheet { position: relative; isolation: isolate; width: 56cqw; max-height: 100%; padding: 3.4cqw 4cqw 3cqw; background-color: #FFFDF8;
  /* textura sutil DEL PAPEL (el grano del escritorio, en .hp-site::before, queda tapado por esta hoja opaca y no se ve) */
  background-image: linear-gradient(100deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 20%, rgba(35, 29, 23, 0) 72%, rgba(35, 29, 23, .04) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  transform: rotate(-0.35deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 4px rgba(60, 40, 20, 0.06), 0 3px 7px -1px rgba(60, 40, 20, 0.3),
    0 22px 44px -18px rgba(60, 40, 20, 0.38), 0 50px 80px -40px rgba(60, 40, 20, 0.28);
  border-radius: 3px; }
.hv-sheet::before { content: 'VR'; position: absolute; z-index: -1; right: 7%; bottom: 5%; font: 600 13cqw/1 'Fraunces', Georgia, serif;
  color: rgba(154, 91, 46, 0.055); letter-spacing: -0.02em; transform: rotate(-4deg); pointer-events: none; }
.hv-sheet::after { content: ''; position: absolute; left: 4cqw; right: 4cqw; bottom: 1.6cqw; height: 1px; background: linear-gradient(90deg, transparent, rgba(154, 91, 46, 0.25), transparent); }
.hv-head { display: flex; align-items: center; gap: 12px; padding-bottom: 1.6cqw; margin-bottom: 2.2cqw; border-bottom: 1px solid rgba(35, 29, 23, 0.12); }
.hv-mark { display: grid; place-items: center; width: clamp(28px, 3.1cqw, 36px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid #9A5B2E; color: #9A5B2E; font: 600 clamp(10px, 1.1cqw, 12.5px)/1 'Fraunces', Georgia, serif; }
.hv-head-t { display: grid; gap: 3px; }
.hv-head-t b { font: 600 clamp(12px, 1.35cqw, 15px)/1 'Fraunces', Georgia, serif; }
.hv-head-t small { font: 500 clamp(9px, 0.95cqw, 11px)/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #8A7A68; }
.hv-date { margin-top: 1px; font: 400 italic clamp(11px, 1.2cqw, 13.5px)/1 'Newsreader', Georgia, serif; color: #8A7A68; }
.hv-h { margin: 0 0 1.4cqw; font: 600 clamp(30px, 5.1cqw, 58px)/1.04 'Fraunces', Georgia, serif; letter-spacing: -0.025em; color: #231D17; }
.hv-p { margin: 0 0 1.1cqw; max-width: 46ch; font: 400 clamp(13px, 1.55cqw, 17.5px)/1.55 'Newsreader', Georgia, serif; color: #3A3129; }
.hv-sign { display: flex; align-items: center; gap: 14px; margin: 1.8cqw 0 2cqw; }
.hv-sig { font: 400 clamp(34px, 4.6cqw, 54px)/0.9 'VR Firma', 'Brush Script MT', cursive; color: #1F3A5A; transform: rotate(-3deg); display: inline-block; clip-path: inset(-20% 0 -30% 0); transition: clip-path 1.4s cubic-bezier(0.4, 0, 0.2, 1); }
.hv-sign small { display: block; max-width: 20ch; font: 500 clamp(9.5px, 1cqw, 11.5px)/1.35 Inter, system-ui, sans-serif; color: #8A7A68; }

/* retrato: tarjeta vertical elegante, clavada con un clip metálico en la esquina superior derecha de la hoja (casi recta, no polaroid).
   .hv-photo NO recorta (para que el clip sobresalga por arriba); el recorte con esquinas va en .hv-photo-in. */
.hv-photo { margin: 0; position: absolute; z-index: 2; top: -3.1cqw; right: 3.6cqw; width: clamp(78px, 9.2cqw, 108px); aspect-ratio: 0.66;
  transform: rotate(1.3deg); transition: opacity .8s .95s, transform .8s .95s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hv-photo-in { display: block; width: 100%; height: 100%; border-radius: 9px; overflow: hidden; background: #fff;
  box-shadow: 0 16px 30px -14px rgba(35, 29, 23, .5), 0 4px 10px -3px rgba(35, 29, 23, .3), 0 0 0 1px rgba(255, 255, 255, .7); }
.hv-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
.hv-clip { position: absolute; z-index: 3; top: -12px; left: 50%; width: clamp(28px, 3.6cqw, 40px); transform: translateX(-50%) rotate(-2deg); filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35)); }
.hv-sheet.is-hidden .hv-photo { opacity: 0; transform: rotate(1.3deg) translateY(-16px); }
.hv-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hv-btns span { padding: clamp(9px, 1.1cqw, 12px) clamp(16px, 2cqw, 22px); border-radius: 999px; font: 600 clamp(12px, 1.3cqw, 14px)/1 Inter, system-ui, sans-serif; }
.hv-b1 { background: #231D17; color: #F7F1E6; }
.hv-b2 { box-shadow: inset 0 0 0 1.5px rgba(35, 29, 23, 0.3); color: #231D17; }

.hv-card { align-self: center; width: 22cqw; padding: 1.8cqw 1.9cqw; background: #1F3A5A; color: #EEF2F6; border-radius: 16px; box-shadow: 0 24px 40px -20px rgba(20, 35, 55, 0.6); }
.hv-card-k { margin: 0 0 1.2cqw; font: 500 clamp(9px, 0.95cqw, 11px)/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #A9C1DA; }
/* .hv-hrbox contiene la lista Y la confirmación en la MISMA caja (overlay fijo): así «Reservado ✓» nunca cambia el alto de la tarjeta. */
.hv-hrbox { position: relative; }
.hv-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6cqw; transition: opacity .25s; }
.hv-card li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0.8cqw 2px; border-bottom: 1px solid rgba(238, 242, 246, 0.14); }
.hv-card li b { font: 600 clamp(13px, 1.5cqw, 17px)/1 'Fraunces', Georgia, serif; }
.hv-hrs { display: flex; gap: 8px; }
/* cada hora es su propio botón: se puede tocar UNA sola (nunca las dos del mismo día a la vez) */
.hv-hr { appearance: none; border: 0; background: transparent; margin: -3px -5px; padding: 3px 5px; border-radius: 6px; cursor: pointer;
  font: 500 clamp(11px, 1.2cqw, 13.5px)/1 'JetBrains Mono', ui-monospace, monospace; color: #FFFFFF; }
.hv-hr:hover, .hv-hr:focus-visible { background: rgba(238, 242, 246, 0.12); outline: none; }
.hv-hr.is-on { color: #F2C58A; }
/* tocar una hora: la tarjeta responde «Reservado ✓ · día hora» con una animación breve; sin tocar, se demuestra sola una vez */
.hv-hrbox.is-picked ul { opacity: 0; pointer-events: none; }
.hv-ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; gap: 6px;
  padding: 0 10px; border-radius: 8px; background: #1F3A5A; margin: 0; font: 600 clamp(12px, 1.3cqw, 14.5px)/1.3 Inter, system-ui, sans-serif;
  color: #8FE3B0; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; pointer-events: none; }
.hv-hrbox.is-picked .hv-ok { opacity: 1; transform: translateY(0); }
.hv-card-f { margin: 1.2cqw 0 0; font: 400 clamp(11px, 1.15cqw, 13px)/1.4 'Newsreader', Georgia, serif; color: #CBD8E5; }

/* aparición: las líneas entran una tras otra; la firma se «escribe» de izquierda a derecha */
.hv-ln { opacity: 1; transform: none; transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i, 0) * 160ms); }
.hv-sheet.is-hidden .hv-ln { opacity: 0; transform: translateY(8px); }
.hv-sheet.is-hidden .hv-sig { clip-path: inset(-20% 100% -30% 0); }
.hv-card { transition: opacity 0.8s 1.2s, transform 0.8s 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hv-desk.is-hidden .hv-card { opacity: 0; transform: translateY(14px); }

@container (max-width: 520px) {
  .hv-nav { padding: 14px 16px; } .hv-links { display: none; } .hv-cta { margin-left: auto; }
  .hv-desk { inset: 54px 14px 10px 14px; flex-direction: column; justify-content: flex-start; gap: 8px; }
  .hv-sheet { width: 100%; padding: 14px 18px 12px; }
  .hv-photo { top: 0; right: 10px; width: 50px; }
  .hv-photo-in { border-radius: 7px; box-shadow: 0 10px 18px -10px rgba(35, 29, 23, .5), 0 0 0 1px rgba(255, 255, 255, .7); }
  .hv-clip { top: -6px; width: 18px; }
  .hv-head { padding-bottom: 8px; margin-bottom: 10px; padding-right: 58px; } .hv-date { display: none; }
  .hv-h { font-size: 27px; margin-bottom: 8px; padding-right: 58px; }
  .hv-p { font-size: 13px; margin-bottom: 6px; } .hv-p:nth-of-type(2), .hv-p:nth-of-type(3) { display: none; }
  .hv-sign small { display: none; }
  .hv-sign { margin: 8px 0 10px; } .hv-sig { font-size: 34px; }
  .hv-card { width: 100%; padding: 10px 14px 12px; border-radius: 12px; }
  .hv-card-k { margin-bottom: 4px; } .hv-card ul { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hv-card li { flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 0; border-bottom: 0; }
  .hv-hrs { gap: 6px; }
  .hv-hr { margin: -2px -4px; padding: 2px 4px; }
  .hv-ok { font-size: 11.5px; line-height: 1.3; }
  .hv-card-f { margin-top: 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .hv-ln, .hv-card, .hv-sig, .hv-photo, ul, .hv-ok { transition: none !important; } }


/* ---- lote p_wearebrand ---- */
/* Lote P (10-10) · capacidades vistas en @w.wearebrand. Prefijo wb-. Fuentes propias del sitio (assets/fonts). */
@font-face { font-family: 'Anton'; src: url(assets/fonts/anton-latin.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Archivo Exp'; src: url(assets/fonts/archivo-800x-latin.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(assets/fonts/spacegrotesk-600-latin.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Young Serif'; src: url(assets/fonts/youngserif-latin.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url(assets/fonts/fraunces-600-latin.woff2) format('woff2'); font-weight: 600; font-display: swap; }

/* ============ índice de secciones, común a las fichas «historias» (86–99) ============ */
.hs-idx { position: absolute; right: 2.6cqw; top: 50%; z-index: 5; transform: translateY(-50%); display: grid; gap: 0.9cqw; justify-items: end; }
.hs-ix { display: flex; align-items: center; gap: 10px; padding: 4px 0; border: 0; background: none; color: inherit; cursor: pointer; font: 500 clamp(9px, 0.9cqw, 11px)/1 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.hs-ix span { opacity: 0; transform: translateX(6px); transition: opacity 0.3s, transform 0.3s; }
.hs-ix:hover span, .hs-ix:focus-visible span { opacity: 0.85; transform: none; }
.hs-ix i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.5; transition: opacity 0.3s, background 0.3s, transform 0.3s; }
.hs-ix.is-on i { opacity: 1; background: currentColor; transform: scale(1.3); }
@container (max-aspect-ratio: 1 / 1) {
  .hs-idx { right: auto; left: 50%; top: auto; bottom: 3.2cqw; transform: translateX(-50%); grid-auto-flow: column; gap: 3.4cqw; }
  .hs-ix span { display: none; } .hs-ix i { width: 2.4cqw; height: 2.4cqw; }
}

/* ============ sección «historias» a lo ancho (10-10, David: «son bonitos, necesitan más espacio») ============
   Una historia por fila: la pieza a 16:9 con todo el ancho de la página y su ficha en una franja horizontal debajo.
   Arriba, un índice con las 14 para saltar. En celular queda como el resto (una columna, escenario 4:5). */
.wx-hs-idx { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.wx .wx-hs-idx a { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 14px; border: 1px solid var(--wx-line-2, rgba(255, 255, 255, 0.18)); border-radius: 999px;
  color: var(--wx-text); text-decoration: none; font-size: 14px; transition: border-color 0.2s, background 0.2s; }
.wx .wx-hs-idx a:hover { border-color: var(--wx-gold, #E9B872); background: rgba(233, 184, 114, 0.08); }
.wx-hs-idx b { font: 500 11px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.06em; color: var(--wx-muted); }
@media (max-width: 860px) {
  .wx-hs-idx { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -24px; padding-right: 24px; }
  .wx-hs-idx::-webkit-scrollbar { display: none; }
  .wx .wx-hs-idx a { flex: none; }
}
.wx-grid.wx-grid--show { grid-template-columns: 1fr; gap: 34px; }
.wx-grid--show > .wx-fx { scroll-margin-top: calc(var(--wx-navh, 64px) + 124px); }
@media (min-width: 861px) {
  .wx-grid--show > .wx-fx, .wx-grid--show > .wx-fx:last-child:nth-child(odd) { grid-column: auto; grid-template-columns: none; grid-template-rows: auto auto; }
  .wx-grid--show > .wx-fx .wx-stage, .wx-grid--show > .wx-fx:last-child:nth-child(odd) .wx-stage { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--wx-line); }
  .wx-grid--show .wx-body, .wx-grid--show > .wx-fx:last-child:nth-child(odd) .wx-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "id meta" "name meta" "promise chips";
    column-gap: 52px; row-gap: 10px; padding: 26px 32px 30px; align-content: start; }
  .wx-grid--show .wx-id { grid-area: id; } .wx-grid--show .wx-name { grid-area: name; margin: 0; font-size: clamp(22px, 2vw, 28px); }
  .wx-grid--show .wx-promise { grid-area: promise; margin: 0; } .wx-grid--show .wx-meta { grid-area: meta; align-self: start; margin: 0; }
  .wx-grid--show .wx-chips { grid-area: chips; align-self: end; margin: 0; }
}

/* ============ wbpisos · Torre Mirador ============ */
.wb-ps { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #0E1424; color: #F6F1E7; font: 400 13px/1.4 Inter, system-ui, sans-serif; }
.wb-ps-view { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78cqh); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); }
.wb-ps-ph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; transition: filter 0.7s, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wb-ps.is-plate .wb-ps-ph { filter: brightness(0.34) saturate(0.6) blur(2px); transform: scale(1.05); }
.wb-ps::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 14, 26, 0.62), rgba(10, 14, 26, 0.18) 34%, rgba(10, 14, 26, 0) 50%), linear-gradient(180deg, rgba(10, 14, 26, 0.5), rgba(10, 14, 26, 0) 22%); }
/* franja de luz sobre el piso (coordenadas de la foto) */
.wb-ps-band { position: absolute; left: var(--tx0); width: calc(var(--tx1) - var(--tx0)); z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255, 214, 150, 0), rgba(255, 226, 176, 0.62) 14%, rgba(255, 246, 228, 0.9) 50%, rgba(255, 226, 176, 0.62) 86%, rgba(255, 214, 150, 0));
  box-shadow: 0 0 1.6cqw 0.3cqw rgba(255, 206, 140, 0.45); transition: top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.32s, opacity 0.3s; }
.wb-ps-band::after { content: ''; position: absolute; left: 100%; top: 50%; width: 3.4cqw; height: 1px; background: rgba(255, 236, 205, 0.8); }
.wb-ps.is-aim .wb-ps-band { opacity: 1; }
.wb-ps.is-plate .wb-ps-band { opacity: 0; }
.wb-ps-tag { position: absolute; left: calc(var(--tx1) + 3.4cqw); z-index: 2; margin: 0; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.4em; white-space: nowrap; pointer-events: none;
  padding: 0.7em 1em; border-radius: 10px; background: rgba(12, 16, 28, 0.72); border: 1px solid rgba(255, 236, 205, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: clamp(10px, 1.15cqw, 13px); opacity: 0; transition: top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; }
.wb-ps-tag b { font: 600 1.05em/1 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #F2C47A; }
.wb-ps-tag span { color: rgba(246, 241, 231, 0.82); }
.wb-ps.is-aim .wb-ps-tag { opacity: 1; }
.wb-ps.is-plate .wb-ps-tag { opacity: 0; }
.wb-ps-hit { position: absolute; left: calc(var(--tx0) - 1%); width: calc(var(--tx1) - var(--tx0) + 2%); z-index: 2; padding: 0; border: 0; background: transparent; cursor: pointer; }
.wb-ps.is-plate .wb-ps-hit { pointer-events: none; }
.wb-ps-nav { position: absolute; left: 3.4cqw; right: 3.4cqw; top: 2.6cqw; z-index: 4; display: flex; align-items: center; gap: 10px; }
.wb-ps-logo { font: 600 clamp(15px, 2.4cqw, 26px)/1 Fraunces, Georgia, serif; letter-spacing: -0.01em; }
.wb-ps-nav .hp-tag { color: #F6F1E7; }
.wb-ps-cta { margin-left: auto; font: 600 12px/1 Inter, sans-serif; padding: 9px 14px; border-radius: 999px; background: #F2C47A; color: #1B140A; }
/* texto de la izquierda: tres estados (torre, planta, depto) */
.wb-ps-copy { position: absolute; left: 3.4cqw; top: 50%; z-index: 3; width: 30cqw; transform: translateY(-50%); }
.wb-ps-cx { position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-46%); opacity: 0; visibility: hidden; transition: opacity 0.45s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.45s; }
.wb-ps .wb-ps-cx[data-s="tower"], .wb-ps.is-plate .wb-ps-cx[data-s="plate"], .wb-ps.is-unit .wb-ps-cx[data-s="unit"] { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity 0.45s 0.3s, transform 0.7s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.3s; }
.wb-ps.is-plate .wb-ps-cx[data-s="tower"], .wb-ps.is-unit .wb-ps-cx[data-s="plate"] { opacity: 0; visibility: hidden; transform: translateY(-54%); transition: opacity 0.22s, transform 0.4s, visibility 0s 0.22s; }
.wb-ps ~ .wx-hint { transition: opacity 0.3s; }
.wb-ps.is-plate ~ .wx-hint { opacity: 0; pointer-events: none; }
.wb-ps-k { margin: 0 0 1.2cqw; font: 500 clamp(9px, 0.95cqw, 11px)/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #F2C47A; }
.wb-ps-h { margin: 0; font: 400 clamp(30px, 6.4cqw, 82px)/0.92 Newsreader, Georgia, serif; letter-spacing: -0.02em; text-transform: uppercase; }
.wb-ps-s { margin: 1.4cqw 0 0; max-width: 24cqw; font-size: clamp(11px, 1.25cqw, 15px); color: rgba(246, 241, 231, 0.8); }
.wb-ps-fnum { display: block; font: 400 clamp(56px, 13cqw, 170px)/0.8 Newsreader, Georgia, serif; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.wb-ps-fsub { display: block; margin-top: 1cqw; font-size: clamp(11px, 1.3cqw, 15px); color: rgba(246, 241, 231, 0.82); }
.wb-ps-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 1.6cqw 0 0; padding: 0; list-style: none; font-size: clamp(10px, 1.05cqw, 12px); color: rgba(246, 241, 231, 0.72); }
.wb-ps-legend li::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; background: #59C38A; vertical-align: -1px; }
.wb-ps-legend .is-re::before { background: #E9B44C; } .wb-ps-legend .is-so::before { background: #7D8494; }
.wb-ps-back { margin-top: 1.8cqw; padding: 0; border: 0; background: none; color: #F2C47A; font: 500 clamp(10px, 1.05cqw, 12px)/1 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.wb-ps-an { display: block; font: 400 clamp(34px, 6cqw, 78px)/0.9 Newsreader, Georgia, serif; letter-spacing: -0.03em; }
.wb-ps-ad { display: block; margin-top: 1cqw; font-size: clamp(11px, 1.3cqw, 15px); color: rgba(246, 241, 231, 0.82); }
.wb-ps-ap2 { display: block; margin-top: 1.4cqw; font: 600 clamp(16px, 2.2cqw, 26px)/1 Inter, sans-serif; color: #F2C47A; }
.wb-ps-as { display: inline-block; margin-top: 0.8cqw; font: 500 clamp(9px, 0.95cqw, 11px)/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #8FE0B2; }
.wb-ps-as.is-re { color: #F0C565; } .wb-ps-as.is-so { color: #A3A9B6; }
.wb-ps-go { display: inline-block; margin: 1.6cqw 0 0; padding: 0.8em 1.2em; border-radius: 999px; background: #F6F1E7; color: #141A28; font: 600 clamp(11px, 1.15cqw, 13px)/1 Inter, sans-serif; }
/* planta del piso: sale desde la franja y queda encima de la torre */
.wb-ps-plate { position: absolute; left: 36cqw; top: 50%; z-index: 3; width: 52cqw; margin-top: -15.6cqw; opacity: 0; visibility: hidden; transform-origin: 50% 50%;
  transition: transform 0.85s cubic-bezier(0.2, 0.75, 0.15, 1), opacity 0.35s, visibility 0s 0.85s; }
.wb-ps.is-plate .wb-ps-plate { opacity: 1; visibility: visible; transition: transform 0.85s cubic-bezier(0.2, 0.75, 0.15, 1), opacity 0.3s, visibility 0s; }
.wb-ps.is-unit .wb-ps-plate { opacity: 0.18; }
.wb-ps-pl { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2cqw 3cqw rgba(0, 0, 0, 0.5)); }
.wb-ps-pl .sl { fill: rgba(20, 27, 44, 0.92); stroke: rgba(246, 241, 231, 0.35); stroke-width: 1.2; }
.wb-ps-pl .co { fill: #262F45; } .wb-ps-pl .ha { fill: #1D2538; } .wb-ps-pl .st { stroke: #4A5570; stroke-width: 1.2; } .wb-ps-pl .lf { fill: #333E58; }
.wb-ps-pl .sd { font: 500 8px/1 'JetBrains Mono', monospace; letter-spacing: 0.24em; fill: rgba(246, 241, 231, 0.6); text-transform: uppercase; }
.wb-ps-u { cursor: pointer; outline: none; }
.wb-ps-u .uf { fill: rgba(89, 195, 138, 0.42); stroke: #9FE3BD; stroke-width: 1.4; transition: fill 0.3s, stroke 0.3s; }
.wb-ps-u.is-re .uf { fill: rgba(233, 180, 76, 0.4); stroke: #F2CD7E; } .wb-ps-u.is-so .uf { fill: rgba(125, 132, 148, 0.35); stroke: #9AA0AE; }
.wb-ps-u:hover .uf, .wb-ps-u:focus-visible .uf, .wb-ps-u.is-hint .uf { fill: rgba(246, 241, 231, 0.32); stroke: #fff; stroke-width: 2.4; }
.wb-ps-u.is-sel .uf { fill: rgba(242, 196, 122, 0.75); stroke: #fff; stroke-width: 2.4; }
.wb-ps-u .ul { font: 400 30px/1 Newsreader, Georgia, serif; fill: #fff; pointer-events: none; }
.wb-ps-u .um { font: 500 10px/1 Inter, sans-serif; fill: rgba(255, 255, 255, 0.85); pointer-events: none; }
.wb-ps.is-plate .wb-ps-u .uf { animation: wbpsUf 0.6s both; }
.wb-ps.is-plate .wb-ps-u:nth-of-type(2) .uf { animation-delay: 0.08s; } .wb-ps.is-plate .wb-ps-u:nth-of-type(3) .uf { animation-delay: 0.16s; } .wb-ps.is-plate .wb-ps-u:nth-of-type(4) .uf { animation-delay: 0.24s; }
@keyframes wbpsUf { from { fill-opacity: 0; } 40% { fill-opacity: 0; } }
/* plano del depto en papel */
.wb-ps-paper { position: absolute; left: 36cqw; top: 50%; z-index: 3; width: 50cqw; margin-top: -17.5cqw; padding: 1.6cqw 1.8cqw 1.2cqw; border-radius: 6px; background: #FFFDF7;
  box-shadow: 0 2.4cqw 5cqw rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transform-origin: 50% 50%; transition: transform 0.8s cubic-bezier(0.2, 0.75, 0.15, 1), opacity 0.3s, visibility 0s 0.8s; }
.wb-ps.is-unit .wb-ps-paper { opacity: 1; visibility: visible; transition: transform 0.8s cubic-bezier(0.2, 0.75, 0.15, 1), opacity 0.25s, visibility 0s; }
.wb-ps-ap { display: none; width: 100%; height: auto; }
.wb-ps-ap.is-on { display: block; }
.wb-ps-ap .rm { fill: #FFFDF7; stroke: #3A3430; stroke-width: 1.1; } .wb-ps-ap .ext { fill: none; stroke: #2A2522; stroke-width: 3.6; }
.wb-ps-ap .ter { fill: #F1EADB; stroke: #8C8178; stroke-width: 0.8; stroke-dasharray: 3 2; }
.wb-ps-ap .m { fill: none; stroke: #7A6F66; stroke-width: 0.8; } .wb-ps-ap .m2 { fill: none; stroke: #A39890; stroke-width: 0.6; }
.wb-ps-ap .gap { fill: #FFFDF7; } .wb-ps-ap .dr { fill: none; stroke: #3A3430; stroke-width: 0.7; } .wb-ps-ap .wn { stroke: #3A3430; stroke-width: 0.6; }
.wb-ps-ap .lb { font: 600 5.4px/1 Inter, sans-serif; fill: #5A504A; letter-spacing: 0.06em; text-transform: uppercase; }
.wb-ps-ap .nf { fill: #C8553D; } .wb-ps-ap .sc { stroke: #5A504A; stroke-width: 0.7; }
@container (max-aspect-ratio: 1 / 1) {
  .wb-ps::before { background: linear-gradient(180deg, rgba(10, 14, 26, 0.7), rgba(10, 14, 26, 0.1) 40%, rgba(10, 14, 26, 0) 60%, rgba(10, 14, 26, 0.55)); }
  .wb-ps-nav { left: 4cqw; right: 4cqw; top: 4cqw; } .wb-ps-logo { font-size: 4.8cqw; } .wb-ps-cta { display: none; }
  .wb-ps-copy { left: 4cqw; right: 4cqw; width: auto; top: 14cqw; transform: none; }
  .wb-ps-cx { top: 0; transform: translateY(4%); }
  .wb-ps .wb-ps-cx[data-s="tower"], .wb-ps.is-plate .wb-ps-cx[data-s="plate"], .wb-ps.is-unit .wb-ps-cx[data-s="unit"] { transform: none; }
  .wb-ps.is-plate .wb-ps-cx[data-s="tower"], .wb-ps.is-unit .wb-ps-cx[data-s="plate"] { transform: translateY(-6%); }
  .wb-ps-k { font-size: 2.4cqw; margin-bottom: 2cqw; } .wb-ps-h { font-size: 10.5cqw; } .wb-ps-s { display: none; }
  .wb-ps-fnum { font-size: 17cqw; display: inline; } .wb-ps-fsub { display: inline; margin-left: 2cqw; font-size: 3.2cqw; }
  .wb-ps-legend { font-size: 2.8cqw; margin-top: 2cqw; } .wb-ps-back { font-size: 2.6cqw; margin-top: 2.4cqw; }
  .wb-ps-an { font-size: 10cqw; } .wb-ps-ad { font-size: 3.2cqw; } .wb-ps-ap2 { font-size: 5cqw; margin-top: 2cqw; } .wb-ps-as { font-size: 2.4cqw; } .wb-ps-go { display: none; }
  .wb-ps-plate { left: 5cqw; width: 90cqw; top: auto; bottom: 9cqw; margin-top: 0; }
  .wb-ps-paper { left: 4cqw; width: 92cqw; top: auto; bottom: 6cqw; margin-top: 0; padding: 3cqw; }
  .wb-ps-tag { left: calc((var(--tx0) + var(--tx1)) / 2); transform: translate(-50%, -170%); align-items: center; font-size: 2.9cqw; }
  .wb-ps-band::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wb-ps-band, .wb-ps-tag, .wb-ps-plate, .wb-ps-paper, .wb-ps-ph { transition: none; } }

/* ============ wbviaje · Carga Pacífico (como United Carriers: un viaje de punta a punta con el scroll) ============ */
[data-demo="wbviaje"] { background: #070B16; }
.wb-vj { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #ECEEF0; color: #12161D; font: 400 13px/1.4 Inter, system-ui, sans-serif; }
.wb-vj section { position: absolute; inset: 0; overflow: hidden; }
.wb-vj-w { position: absolute; left: 50%; top: 50%; width: max(100%, 177.78cqh); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); }
.wb-vj-o { position: absolute; max-width: none; }
.wb-vj-blue { filter: hue-rotate(195deg) saturate(1.3) brightness(0.85); }
.wb-vj-cam, .wb-vj-crane, .wb-vj-truck, .wb-vj-load, .wb-vj-hook { position: absolute; inset: 0; will-change: transform; }
.wb-vj-cable { position: absolute; top: 48.15%; width: 0.22%; height: 0; background: #1E232B; }
.wb-vj-ground { position: absolute; left: -50%; right: -160%; top: 80%; height: 80%; background: #15181D; }
/* 2 · puerto */
.wb-vj-B { background: #ECEEF0; }
.wb-vj-bt { position: absolute; left: 4cqw; top: 12%; margin: 0; max-width: 46cqw; font: 800 clamp(20px, 3.1cqw, 44px)/1 'Archivo Exp', 'Arial Black', sans-serif; letter-spacing: -0.02em; text-transform: uppercase;
  opacity: 0; transform: translateY(14px); transition: opacity 0.5s, transform 0.7s; }
.wb-vj-stats { position: absolute; right: 7cqw; top: 11%; margin: 0; display: grid; gap: 1.4cqw; text-align: right; opacity: 0; transform: translateY(14px); transition: opacity 0.5s 0.1s, transform 0.7s 0.1s; }
.wb-vj-stats dt { font: 800 clamp(24px, 4.4cqw, 60px)/1 'Archivo Exp', 'Arial Black', sans-serif; letter-spacing: -0.03em; }
.wb-vj-stats dd { margin: 0.3cqw 0 0; font-size: clamp(10px, 1.1cqw, 13px); opacity: 0.7; }
.wb-vj.is-b .wb-vj-bt, .wb-vj.is-b .wb-vj-stats { opacity: 1; transform: none; }
/* 3 · el camión cargado se va + panel de servicios */
.wb-vj-pan { position: absolute; inset: 0; will-change: transform; }
.wb-vj-cw { position: absolute; inset: 0; will-change: transform; }
.wb-vj-panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 3cqw 4cqw; background: #15181D; color: #F2F3F5; will-change: transform; }
.wb-vj-panel h4 { margin: 0 0 2.4cqw; font: 800 clamp(20px, 3.2cqw, 44px)/1 'Archivo Exp', 'Arial Black', sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.wb-vj-panel ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4cqw; }
.wb-vj-panel li { display: grid; gap: 0.6cqw; padding-top: 1cqw; border-top: 1px solid rgba(242, 243, 245, 0.25); }
.wb-vj-panel b { font: 600 clamp(12px, 1.4cqw, 16px)/1.1 'Space Grotesk', Inter, sans-serif; }
.wb-vj-panel span { font-size: clamp(10px, 1.1cqw, 13px); opacity: 0.72; }
/* 4 · ruta vista desde arriba */
.wb-vj-D { background: #ECEEF0; }
.wb-vj-road { position: absolute; inset: 0; width: 100%; height: 100%; }
.wb-vj-rd0 { fill: none; stroke: #CFD8D2; stroke-width: 214; }
.wb-vj-rd { fill: none; stroke: #15181D; stroke-width: 190; }
.wb-vj-dt { position: absolute; left: 4cqw; top: 50%; transform: translateY(-50%); max-width: 34cqw; }
.wb-vj-dt h4, .wb-vj-et h4 { margin: 0; font: 800 clamp(24px, 4cqw, 56px)/0.98 'Archivo Exp', 'Arial Black', sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.wb-vj-feat { position: absolute; right: 4cqw; top: 58%; margin: 0; padding: 0; list-style: none; display: grid; gap: 1.8cqw; width: 26cqw; }
.wb-vj-feat li { display: grid; gap: 0.4cqw; } .wb-vj-feat b { font: 600 clamp(12px, 1.4cqw, 16px)/1.1 'Space Grotesk', Inter, sans-serif; } .wb-vj-feat span { font-size: clamp(10px, 1.1cqw, 13px); opacity: 0.7; }
.wb-vj-dt, .wb-vj-feat { opacity: 0; transition: opacity 0.5s; } .wb-vj.is-d .wb-vj-dt, .wb-vj.is-d .wb-vj-feat { opacity: 1; }
/* 5 · alta mar */
.wb-vj-E { background: rgb(5, 34, 53); color: #FFF; will-change: transform; }
.wb-vj-ship { position: absolute; left: 50%; top: 0; height: 175cqh; width: auto; will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.wb-vj-et { position: absolute; left: 50%; top: 50%; width: min(70cqw, 900px); transform: translate(-50%, -40%); display: grid; justify-items: center; gap: 2cqw; text-align: center; opacity: 0; transition: opacity 0.6s, transform 0.8s; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); }
.wb-vj.is-e .wb-vj-et { opacity: 1; transform: translate(-50%, -50%); }
.wb-vj-et span, .wb-vj-at em:first-child { font: 600 clamp(11px, 1.25cqw, 14px)/1 Inter, sans-serif; font-style: normal; padding: 0.9em 1.4em; border-radius: 999px; background: #FFF; color: #12161D; text-shadow: none; }
/* 1 · portada */
.wb-vj-A { background: #070B16; color: #F2F3F5; will-change: transform; }
.wb-vj-globe { position: absolute; right: -8cqw; top: 50%; width: 82cqh; aspect-ratio: 1; transform: translateY(-46%); border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), -1.2cqw -1cqw 3cqw -1cqw rgba(255, 120, 60, 0.75), 0 0 8cqw rgba(40, 110, 255, 0.45); }
.wb-vj-globe img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.wb-vj-globe::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0) 40%, rgba(7, 11, 22, 0.75) 72%), radial-gradient(circle at 20% 15%, rgba(255, 140, 80, 0.35), rgba(255, 140, 80, 0) 35%); }
.wb-vj-at { position: absolute; left: 4cqw; top: 50%; transform: translateY(-50%); max-width: 46cqw; display: grid; gap: 1.6cqw; }
.wb-vj-at p { margin: 0; font: 500 clamp(9px, 0.95cqw, 11px)/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; }
.wb-vj-at h4 { margin: 0; font: 800 clamp(34px, 6.6cqw, 92px)/0.92 'Archivo Exp', 'Arial Black', sans-serif; letter-spacing: -0.03em; text-transform: uppercase; }
.wb-vj-at > span { max-width: 32cqw; font-size: clamp(11px, 1.3cqw, 15px); opacity: 0.8; }
.wb-vj-at div { display: flex; gap: 10px; }
.wb-vj-at em { font: 600 clamp(11px, 1.25cqw, 14px)/1 Inter, sans-serif; font-style: normal; padding: 0.9em 1.4em; border-radius: 999px; border: 1px solid rgba(242, 243, 245, 0.4); }
.wb-vj-nav { position: absolute; left: 4cqw; right: 4cqw; top: 2.6cqw; z-index: 6; display: flex; align-items: center; gap: 10px; color: #F2F3F5; transition: color 0.4s; }
.wb-vj.is-ink .wb-vj-nav { color: #12161D; }
.wb-vj-logo { font: 800 clamp(15px, 2.2cqw, 24px)/1 'Archivo Exp', 'Arial Black', sans-serif; letter-spacing: -0.02em; }
.wb-vj-nav .hp-tag { color: inherit; }
.wb-vj .hs-idx { z-index: 7; color: #FFF; } .wb-vj .hs-ix i { box-shadow: 0 0 0 2px rgba(10, 14, 22, 0.45); }
.wb-vj-sc { position: absolute; inset: 0; z-index: 6; overflow-y: auto; scrollbar-width: none; cursor: ns-resize; outline: none; }
.wb-vj-sc::-webkit-scrollbar { display: none; }
.wb-vj-sp { height: 410%; }
.wb-vj-D { z-index: 1; } .wb-vj-pan { z-index: 2; } .wb-vj-E { z-index: 3; } .wb-vj-A { z-index: 4; }
[data-demo="wbviaje"] .wx-hint { left: auto; right: 12px; top: auto; bottom: 12px; }
@container (max-aspect-ratio: 1 / 1) {
  .wb-vj-w { top: auto; bottom: 0; width: 120cqw; transform: translateX(-50%); }
  .wb-vj-bt { left: 5cqw; right: 5cqw; top: 14cqw; max-width: none; font-size: 7cqw; }
  .wb-vj-stats { left: 5cqw; right: auto; top: 46cqw; text-align: left; grid-auto-flow: column; gap: 8cqw; } .wb-vj-stats dt { font-size: 8cqw; } .wb-vj-stats dd { font-size: 2.8cqw; }
  .wb-vj-panel { padding: 5cqw; } .wb-vj-panel h4 { font-size: 6cqw; margin-bottom: 4cqw; } .wb-vj-panel ul { grid-template-columns: 1fr 1fr; gap: 4cqw; } .wb-vj-panel b { font-size: 3.4cqw; } .wb-vj-panel span { font-size: 2.8cqw; }
  .wb-vj-dt { left: 5cqw; right: 5cqw; top: 15cqw; transform: none; max-width: none; } .wb-vj-dt h4, .wb-vj-et h4 { font-size: 8cqw; }
  .wb-vj-road { transform: translateY(16%); }
  .wb-vj-feat { left: 4cqw; right: auto; top: auto; bottom: 8cqw; width: 31cqw; } .wb-vj-feat b { font-size: 3.4cqw; } .wb-vj-feat span { font-size: 2.8cqw; }
  .wb-vj-ship { height: 120cqh; } .wb-vj-et { width: 90cqw; }
  .wb-vj-globe { right: auto; left: 50%; top: auto; bottom: -36cqw; width: 92cqw; transform: translateX(-50%); }
  .wb-vj-at { left: 5cqw; right: 5cqw; top: 15cqw; transform: none; max-width: none; gap: 3cqw; } .wb-vj-at h4 { font-size: 11cqw; } .wb-vj-at > span { max-width: none; font-size: 3.4cqw; } .wb-vj-at p { font-size: 2.4cqw; }
  .wb-vj-at em { font-size: 3.2cqw; } .wb-vj-logo { font-size: 4.8cqw; }
}
@container (max-width: 560px) { [data-demo="wbviaje"] .wx-hint { top: 12px; bottom: auto; } }

/* ============ wbvariantes · Selva (como Ciao: eliges en horizontal, bajas al detalle) ============ */
[data-demo="wbvariantes"] { background: #17181B; }
.wb-va { position: absolute; inset: 0; overflow: hidden; container-type: size; --c: #F2B705; --deep: #7A4E00; --b: 0; background: #17181B; color: #FFF; font: 400 13px/1.4 Inter, system-ui, sans-serif; }
.wb-va-studio, .wb-va-flv, .wb-va-cone { position: absolute; inset: 0; pointer-events: none; }
.wb-va-studio { background: radial-gradient(ellipse 62% 58% at 50% 64%, #4B4D54 0%, #26272C 55%, #141518 100%); }
.wb-va-flv { opacity: var(--b); background: radial-gradient(ellipse 70% 95% at 66% 44%, var(--c) 0%, var(--deep) 80%); }
.wb-va-cone { opacity: calc(1 - var(--b)); background: radial-gradient(ellipse 9cqw 1.4cqw at 50% 9%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.95) 70%, rgba(255, 255, 255, 0) 80%),
  linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 60%); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 45%, #000 55%, transparent 70%); mask-image: linear-gradient(90deg, transparent 30%, #000 45%, #000 55%, transparent 70%); }
.wb-va-word { position: absolute; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%) scale(0.92); text-align: center; white-space: nowrap; pointer-events: none;
  font: 800 clamp(60px, 15cqw, 220px)/0.9 'Archivo Exp', 'Arial Black', sans-serif; letter-spacing: -0.03em; text-transform: uppercase; color: rgba(255, 255, 255, 0.34); filter: blur(5px);
  opacity: 0; transition: opacity 0.6s, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wb-va.is-word .wb-va-word { opacity: 1; transform: translateY(-50%); }
.wb-va-cv { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.wb-va-nav { position: absolute; left: 3.4cqw; right: 3.4cqw; top: 2.6cqw; z-index: 4; display: flex; align-items: center; gap: 10px; }
.wb-va-logo { font: 800 clamp(17px, 2.6cqw, 28px)/1 'Archivo Exp', sans-serif; letter-spacing: -0.03em; }
.wb-va-nav .hp-tag { color: #FFF; }
.wb-va-cart { margin-left: auto; font: 500 12px/1 Inter, sans-serif; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.5); }
/* A: elegir */
.wb-va-pick { position: absolute; left: 50%; bottom: 3.6%; z-index: 5; transform: translateX(-50%); display: grid; justify-items: center; gap: 0.9cqw; transition: opacity 0.4s, transform 0.5s; }
.wb-va:not(.is-a) .wb-va-pick { opacity: 0; transform: translate(-50%, 20%); pointer-events: none; }
.wb-va-k { margin: 0; font: 500 clamp(9px, 0.95cqw, 11px)/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
.wb-va-row { display: flex; align-items: center; gap: 2.4cqw; }
.wb-va-fname { min-width: 18cqw; text-align: center; font: 800 clamp(15px, 2.4cqw, 28px)/1 'Archivo Exp', sans-serif; letter-spacing: 0.02em; text-transform: uppercase; }
.wb-va-fname.is-swap { animation: wbvaIn 0.45s both; }
@keyframes wbvaIn { from { opacity: 0; transform: translateY(30%); } }
.wb-va-arr { width: clamp(34px, 3.6cqw, 44px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.04); color: #FFF; font: 400 20px/1 Inter, sans-serif; cursor: pointer; }
.wb-va-arr:hover { background: rgba(255, 255, 255, 0.14); }
/* B–C: texto a la izquierda, índice a la derecha */
.wb-va-copy { position: absolute; left: 4cqw; top: 50%; z-index: 2; width: 33cqw; height: 0; pointer-events: none; }
.wb-va-cx { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(-42%); opacity: 0; transition: opacity 0.25s, transform 0.4s; }
.wb-va-cx.is-on { opacity: 1; transform: translateY(-50%); transition: opacity 0.45s 0.15s, transform 0.7s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wb-va-cx .wb-va-k { margin-bottom: 1.2cqw; }
.wb-va-nm { margin: 0; font: 800 clamp(30px, 6.4cqw, 84px)/0.9 'Archivo Exp', sans-serif; letter-spacing: -0.03em; text-transform: uppercase; }
.wb-va-t { margin: 0; font: 800 clamp(22px, 4cqw, 52px)/0.95 'Archivo Exp', sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.wb-va-ln, .wb-va-d { margin: 1.2cqw 0 0; max-width: 26cqw; font-size: clamp(12px, 1.35cqw, 16px); opacity: 0.88; }
.wb-va-idx { position: absolute; right: 3cqw; top: 50%; z-index: 5; transform: translateY(-50%); display: grid; gap: 1.1cqw; justify-items: end; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.wb-va.is-copy .wb-va-idx { opacity: 1; pointer-events: auto; }
.wb-va-ix { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: #FFF; cursor: pointer; font: 500 clamp(9px, 0.9cqw, 11px)/1 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.wb-va-ix span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wb-va-ix i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55); transition: background 0.3s; }
.wb-va-ix.is-on i { background: #FFF; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18); }
/* D–E: cierre */
.wb-va-end { position: absolute; left: 50%; bottom: 6%; z-index: 5; transform: translate(-50%, 20%); display: grid; justify-items: center; gap: 0.9cqw; opacity: 0; transition: opacity 0.5s, transform 0.6s; pointer-events: none; }
.wb-va.is-end .wb-va-end { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.wb-va-buy { font: 600 clamp(12px, 1.3cqw, 15px)/1 Inter, sans-serif; padding: 0.95em 1.5em; border-radius: 999px; background: #FFF; color: #17181B; }
.wb-va-end p { margin: 0; font-size: clamp(11px, 1.2cqw, 14px); opacity: 0.8; }
.wb-va-sc { position: absolute; inset: 0; z-index: 3; overflow-y: auto; scrollbar-width: none; cursor: ns-resize; outline: none; touch-action: pan-y; }
.wb-va-sc::-webkit-scrollbar { display: none; }
.wb-va-sp { height: 380%; }
[data-demo="wbvariantes"] .wx-hint { left: auto; right: 12px; top: calc(2.6cqw + 44px); bottom: auto; }
@container (max-aspect-ratio: 1 / 1) {
  .wb-va-flv { background: radial-gradient(ellipse 90% 70% at 50% 58%, var(--c) 0%, var(--deep) 80%); }
  .wb-va-cone { background: radial-gradient(ellipse 18cqw 3cqw at 50% 14%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.95) 70%, rgba(255, 255, 255, 0) 80%), linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%); }
  .wb-va-nav { left: 4cqw; right: 4cqw; top: 4cqw; } .wb-va-logo { font-size: 5cqw; } .wb-va-cart { display: none; }
  .wb-va-copy { left: 5cqw; right: 5cqw; width: auto; top: 16cqw; }
  .wb-va-cx, .wb-va-cx.is-on { transform: none; } .wb-va-cx { transform: translateY(8%); }
  .wb-va-nm { font-size: 11cqw; } .wb-va-t { font-size: 7.6cqw; } .wb-va-ln, .wb-va-d { max-width: none; font-size: 3.4cqw; margin-top: 2cqw; } .wb-va-k { font-size: 2.4cqw; }
  .wb-va-idx { right: auto; left: 50%; top: auto; bottom: 4cqw; transform: translateX(-50%); grid-auto-flow: column; gap: 3cqw; }
  .wb-va-ix span { display: none; } .wb-va-ix i { width: 4.6cqw; height: 4.6cqw; }
  .wb-va-fname { font-size: 5.4cqw; min-width: 40cqw; } .wb-va-word { font-size: 17cqw; white-space: normal; }
  .wb-va-buy { font-size: 3.4cqw; } .wb-va-end p { font-size: 3cqw; }
}

/* ============ wbletras · Costa Brava ============ */
[data-demo="wbletras"] { background: #0E1722; }
.wb-lt { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, #1C2B3D, #0E1722 70%); }
.wb-lt-k { position: absolute; top: 9%; left: 0; right: 0; margin: 0; text-align: center; font: 500 clamp(10px, 1.6cqw, 13px)/1 'JetBrains Mono', monospace; letter-spacing: 0.3em; text-transform: uppercase; color: #C9D6E2; transition: opacity 0.4s; }
.wb-lt-zoom { position: relative; transform-origin: 50% 50%; will-change: transform; }
.wb-lt-word { margin: 0; font: 400 clamp(80px, 30cqw, 400px)/0.86 Anton, 'Arial Narrow', Impact, sans-serif; letter-spacing: 0.01em; white-space: nowrap;
  background-image: url(assets/websites/fx3/wb-muelle.webp); background-size: 140% auto; background-position: 20% 40%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: wbltPan 14s ease-in-out infinite alternate; }
@keyframes wbltPan { to { background-position: 80% 60%; } }
.wb-lt-ch { display: inline-block; }
.wb-lt-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 0.6s, transform 3.4s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; }
.wb-lt.is-full .wb-lt-full { opacity: 1; transform: scale(1); }
.wb-lt.is-full .wb-lt-k { opacity: 0; }
.wb-lt-cap { position: absolute; left: 5cqw; bottom: 6cqw; display: grid; gap: 0.8cqw; justify-items: start; opacity: 0; transform: translateY(10px); transition: opacity 0.5s 0.15s, transform 0.5s 0.15s; }
.wb-lt.is-full .wb-lt-cap { opacity: 1; transform: none; }
.wb-lt-ck { margin: 0; font: 500 clamp(10px, 1.5cqw, 13px)/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #FFF; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.wb-lt-ct { margin: 0; font: 400 clamp(30px, 7.4cqw, 86px)/0.9 Anton, Impact, sans-serif; color: #FFF; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.wb-lt-btn { font: 600 clamp(11px, 1.4cqw, 14px)/1 Inter, sans-serif; padding: 10px 16px; border-radius: 999px; background: #FFF; color: #0E1722; }
[data-demo="wbletras"] .wx-exnote { color: #C9D6E2; }
[data-demo="wbletras"] .wx-hint { left: auto; right: 12px; }
@container (max-aspect-ratio: 1 / 1) { .wb-lt-k { top: 16%; padding: 0 6cqw; font-size: 2.6cqw; letter-spacing: 0.24em; line-height: 1.5; } .wb-lt-word { font-size: 29cqw; } }

/* ============ wbdestaca · Paula Ríos ============ */
[data-demo="wbdestaca"] { background: #263021; }
.wb-dt { position: absolute; inset: 0; padding: 4cqw 5cqw; display: grid; grid-template-rows: auto 1fr auto; gap: 2cqw; background: #263021; color: #EDEAD8; font: 400 13px/1.35 Inter, system-ui, sans-serif; }
.wb-dt-nav { display: flex; align-items: baseline; gap: 12px; }
.wb-dt-nav b { font: 400 clamp(16px, 2.8cqw, 30px)/1 'Young Serif', Georgia, serif; }
.wb-dt-nav span { font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #B9C49A; }
.wb-dt-txt { margin: 0; align-self: center; font: 400 clamp(22px, 5.6cqw, 68px)/1.14 'Young Serif', Georgia, serif; letter-spacing: -0.01em; }
.wb-dt-p { position: relative; display: inline; color: transparent; transition: color 0.25s 0.18s;
  background-image: linear-gradient(#D8F04A, #D8F04A); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 86%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wb-dt-p.is-sweep { background-size: 100% 86%; transition: background-size 0.42s cubic-bezier(0.6, 0, 0.3, 1), color 0.2s 0.3s; color: #1D2416; }
.wb-dt-p.is-done { color: #EDEAD8; background-size: 100% 0%; background-position: 0 92%; transition: background-size 0.35s, background-position 0.35s, color 0.25s; }
.wb-dt-p.is-key.is-done { color: #1D2416; background-size: 100% 86%; background-position: 0 88%; }
.wb-dt-foot { margin: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wb-dt-btn { font: 600 clamp(11px, 1.4cqw, 14px)/1 Inter, sans-serif; padding: 11px 16px; border-radius: 999px; background: #D8F04A; color: #1D2416; }
.wb-dt-foot em { font-style: normal; font-size: clamp(10px, 1.2cqw, 13px); color: #B9C49A; }
[data-demo="wbdestaca"] .wx-exnote { color: #B9C49A; }
[data-demo="wbdestaca"] .wx-hint { left: auto; right: 12px; }
@container (max-width: 560px) { .wb-dt { padding: 6cqw; gap: 4cqw; } .wb-dt-txt { font-size: 7.4cqw; } }

/* ============ wbanios · Transportes Rojas (como 250 Broadway: línea que dibuja + año gigante que rueda) ============ */
[data-demo="wbanios"] { background: #4A0B10; }
.wb-an { position: absolute; inset: 0; overflow: hidden; container-type: size; background: radial-gradient(120% 90% at 50% 40%, #6B1218 0%, #4A0B10 55%, #2E0609 100%); color: #F7E3E1; font: 400 13px/1.35 Inter, system-ui, sans-serif; }
.wb-an-photos { position: absolute; inset: 0; mix-blend-mode: luminosity; }
.wb-an-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1) contrast(1.1) blur(1.5px); transition: opacity 1.2s; }
.wb-an-ph.is-on { opacity: 0.1; }
.wb-an-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.wb-an-ln { fill: none; stroke: #FBEDEB; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.wb-an-since { position: absolute; left: 0; right: 0; top: 68%; margin: 0; text-align: center; font: 500 clamp(12px, 1.4cqw, 16px)/1 Inter, sans-serif; letter-spacing: 0.02em; }
.wb-an-mid { position: absolute; left: 50%; top: 47%; display: flex; align-items: center; gap: 2.4cqw; transform: translate(-50%, -50%); }
.wb-an-year { display: flex; font: 400 clamp(90px, 22cqw, 330px)/1 Newsreader, Georgia, serif; letter-spacing: 0.04em; color: rgba(247, 210, 206, 0.34); }
.wb-an-col { display: block; height: 1em; overflow: hidden; }
.wb-an-strip { display: block; will-change: transform; }
.wb-an-strip i { display: block; height: 1em; font-style: normal; text-align: center; }
.wb-an-clock { margin: 0; display: grid; gap: 6px; justify-items: start; align-self: center; }
.wb-an-time { font: 500 clamp(18px, 2.4cqw, 34px)/1 Inter, sans-serif; color: #FFF; letter-spacing: -0.01em; white-space: nowrap; }
.wb-an-clock span { font: 500 clamp(9px, 0.9cqw, 11px)/1 Inter, sans-serif; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: #4A0B10; }
.wb-an-caps { position: absolute; left: 0; right: 0; top: 76%; height: 3em; }
.wb-an-cap { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font: 400 clamp(15px, 2cqw, 26px)/1.2 Newsreader, Georgia, serif; opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.6s; }
.wb-an-cap.is-on { opacity: 1; transform: none; }
.wb-an-nav { position: absolute; left: 4cqw; right: 4cqw; top: 3cqw; z-index: 3; display: flex; align-items: center; gap: 10px; }
.wb-an-brand { font: 500 clamp(10px, 1.05cqw, 12px)/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; }
.wb-an-nav .hp-tag { color: inherit; }
.wb-an-sc { position: absolute; inset: 0; z-index: 4; overflow-y: auto; scrollbar-width: none; cursor: ns-resize; outline: none; }
.wb-an-sc::-webkit-scrollbar { display: none; }
.wb-an-sp { height: 330%; }
[data-demo="wbanios"] .wx-hint { left: auto; right: 12px; top: auto; bottom: 12px; }
@container (max-aspect-ratio: 1 / 1) {
  .wb-an-mid { flex-direction: column; gap: 4cqw; top: 46%; } .wb-an-year { font-size: 28cqw; } .wb-an-clock { justify-items: center; }
  .wb-an-time { font-size: 6cqw; } .wb-an-clock span { font-size: 2.6cqw; }
  .wb-an-cap { font-size: 5cqw; padding: 0 6cqw; } .wb-an-caps { top: 78%; } .wb-an-since { font-size: 3.6cqw; top: 66%; }
  .wb-an-brand { font-size: 2.6cqw; }
}
@container (max-width: 560px) { [data-demo="wbanios"] .wx-hint { top: 12px; bottom: auto; } }


@container (max-width: 560px) { [data-demo="wbvariantes"] .wx-hint { top: 14cqw; bottom: auto; } }


/* ---- lote q_wearebrand2 ---- */
/* Lote Q (10-10) · tanda 2 de @w.wearebrand. Prefijo wq-. Fuentes ya declaradas por el lote P (Anton, Archivo Exp, Space Grotesk, Young Serif, Fraunces). */

@keyframes wqIn { from { opacity: 0; transform: translateY(6px); } }
/* ============ wbgaraje · Portones Pacífico (como el original: un portón viejo sube y baja uno nuevo) ============ */
[data-demo="wbgaraje"] { background: #1B2430; }
.wq-ga { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #1B2430; color: #FFF; font: 400 13px/1.35 Inter, system-ui, sans-serif; }
.wq-ga-photo { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78cqh); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); transform-origin: 50% 55%; will-change: transform; }
.wq-ga-base { position: absolute; inset: 0; width: 100%; height: 100%; }
.wq-ga-hole { position: absolute; overflow: hidden; }
.wq-ga-in { position: absolute; inset: 0; background: linear-gradient(180deg, #050608 0%, #121418 55%, #23262B 100%); }
.wq-ga-in::before { content: ''; position: absolute; left: 12%; right: 12%; top: 8%; height: 3%; border-radius: 2px; background: rgba(255, 236, 200, 0.55); filter: blur(2px); opacity: var(--open, 0); box-shadow: 0 0 30px 10px rgba(255, 220, 160, 0.18); }
.wq-ga-leaf { position: absolute; inset: 0; overflow: hidden; will-change: transform; box-shadow: 0 calc(10px * var(--e, 0)) 18px rgba(0, 0, 0, 0.55); }
.wq-ga-leaf img { position: absolute; max-width: none; }
.wq-ga::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 20, 30, 0.5) 0%, rgba(14, 20, 30, 0) 16%), linear-gradient(0deg, rgba(14, 20, 30, 0.6) 0%, rgba(14, 20, 30, 0) 28%); }
.wq-ga-nav { position: absolute; left: 3.4cqw; right: 3.4cqw; top: 2.8cqw; z-index: 3; display: flex; align-items: center; gap: 10px; }
.wq-ga-logo { font: 600 clamp(14px, 2.3cqw, 24px)/1 'Space Grotesk', Inter, sans-serif; letter-spacing: -0.01em; }
.wq-ga-logo em { font-style: normal; color: #F2A65A; }
.wq-ga-nav .hp-tag { color: #FFF; }
.wq-ga-call { margin-left: auto; font: 600 12px/1 Inter, sans-serif; padding: 9px 14px; border-radius: 999px; background: #F2A65A; color: #1B2430; }
.wq-ga-title { position: absolute; left: 50%; top: 52%; z-index: 2; width: min(60cqw, 760px); margin: 0; transform: translate(-50%, -50%); text-align: center; pointer-events: none; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.wq-ga-title::before { content: ''; position: absolute; inset: -30% -12%; z-index: -1; background: radial-gradient(closest-side, rgba(12, 16, 24, 0.62), rgba(12, 16, 24, 0)); }
.wq-ga-title h4 { margin: 0; font: 400 clamp(30px, 5.8cqw, 78px)/1 Newsreader, Georgia, serif; letter-spacing: -0.02em; text-wrap: balance; }
.wq-ga-title h4 em { font-style: italic; color: #F2C48A; }
.wq-ga-title p { margin: 1.2cqw auto 0; max-width: 36cqw; font-size: clamp(11px, 1.25cqw, 15px); opacity: 0.9; }
.wq-ga-c { position: absolute; left: 3.4cqw; bottom: 4cqw; z-index: 2; margin: 0; max-width: 34cqw; font: 400 clamp(18px, 2.6cqw, 34px)/1.1 Newsreader, Georgia, serif; letter-spacing: -0.01em;
  opacity: 0; transform: translateY(14px); transition: opacity 0.35s, transform 0.5s; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); }
.wq-ga-c.is-on { opacity: 1; transform: none; transition: opacity 0.5s 0.1s, transform 0.7s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wq-ga-end { position: absolute; left: 50%; bottom: 5%; z-index: 5; transform: translate(-50%, 16px); display: grid; justify-items: center; gap: 1.2cqw; opacity: 0; pointer-events: none; transition: opacity 0.5s, transform 0.7s; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4); }
.wq-ga-end.is-on { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.wq-ga-end h4 { margin: 0; font: 400 clamp(22px, 3.4cqw, 44px)/1 Newsreader, Georgia, serif; }
.wq-ga-end span { white-space: nowrap; font: 600 clamp(11px, 1.2cqw, 14px)/1 Inter, sans-serif; padding: 0.9em 1.4em; border-radius: 999px; background: #FFF; color: #1B2430; text-shadow: none; }
.wq-ga-sc { position: absolute; inset: 0; z-index: 4; overflow-y: auto; scrollbar-width: none; cursor: ns-resize; outline: none; }
.wq-ga-sc::-webkit-scrollbar { display: none; }
.wq-ga-sp { height: 330%; }
[data-demo="wbgaraje"] .wx-hint { left: auto; right: 12px; top: auto; bottom: 12px; }
@container (max-aspect-ratio: 1 / 1) {
  .wq-ga-call { display: none; } .wq-ga-logo { font-size: 4.6cqw; }
  .wq-ga-title { width: 88cqw; top: 26%; } .wq-ga-title h4 { font-size: 9cqw; } .wq-ga-title p { max-width: none; font-size: 3.2cqw; }
  .wq-ga-c { left: 5cqw; right: 5cqw; max-width: none; bottom: 7cqw; font-size: 6.4cqw; }
  .wq-ga-end h4 { font-size: 7cqw; } .wq-ga-end span { font-size: 3.2cqw; }
}

/* ============ wbcocina · Taller Roble (como el original: la cocina se arma con el scroll, un subtítulo por etapa) ============ */
[data-demo="wbcocina"] { background: #2A2622; }
.wq-co { position: absolute; inset: 0; overflow: hidden; background: #2A2622; color: #F7F2E8; font: 400 13px/1.35 Inter, system-ui, sans-serif; container-type: size; }
.wq-co-photo { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78cqh); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); }
.wq-co-base, .wq-co-d { position: absolute; inset: 0; width: 100%; height: 100%; }
.wq-co-d1, .wq-co-d2 { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18)); will-change: clip-path, transform; }
.wq-co-d3 { opacity: 0; }
.wq-co-glow { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(28% 34% at 46% 26%, rgba(255, 196, 120, 0.9), rgba(255, 196, 120, 0) 70%), radial-gradient(28% 34% at 57% 26%, rgba(255, 196, 120, 0.9), rgba(255, 196, 120, 0) 70%); }
.wq-co::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(22, 19, 16, 0.7) 0%, rgba(22, 19, 16, 0) 30%), linear-gradient(180deg, rgba(22, 19, 16, 0.45) 0%, rgba(22, 19, 16, 0) 16%); }
.wq-co-nav { position: absolute; left: 3.4cqw; right: 3.4cqw; top: 2.8cqw; z-index: 3; display: flex; align-items: center; gap: 10px; }
.wq-co-logo { font: 400 clamp(15px, 2.4cqw, 24px)/1 'Young Serif', Georgia, serif; }
.wq-co-nav .hp-tag { color: #F7F2E8; }
.wq-co-title { position: absolute; left: 50%; top: 31%; z-index: 2; width: min(56cqw, 700px); transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.wq-co-title h4 { margin: 0; font: 400 clamp(30px, 5.6cqw, 74px)/1 'Young Serif', Georgia, serif; letter-spacing: -0.01em; text-wrap: balance; }
.wq-co-title p { margin: 1.2cqw auto 0; max-width: 34cqw; font-size: clamp(11px, 1.25cqw, 15px); opacity: 0.85; }
.wq-co-c { position: absolute; left: 3.4cqw; bottom: 4cqw; z-index: 2; margin: 0; max-width: 38cqw; display: grid; gap: 0.6cqw; opacity: 0; transform: translateY(14px); transition: opacity 0.35s, transform 0.5s; }
.wq-co-c.is-on { opacity: 1; transform: none; transition: opacity 0.5s 0.1s, transform 0.7s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wq-co-c b, .wq-co-end b { font: 400 clamp(20px, 3cqw, 38px)/1.05 'Young Serif', Georgia, serif; letter-spacing: -0.01em; }
.wq-co-c span, .wq-co-end span { font-size: clamp(11px, 1.25cqw, 15px); opacity: 0.85; }
.wq-co-end { position: absolute; right: 3.4cqw; bottom: 4cqw; z-index: 5; display: grid; justify-items: end; gap: 0.6cqw; text-align: right; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.5s, transform 0.7s; }
.wq-co-end.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wq-co-end em { margin-top: 0.8cqw; font: 600 clamp(11px, 1.2cqw, 14px)/1 Inter, sans-serif; font-style: normal; padding: 0.85em 1.3em; border-radius: 999px; background: #F7F2E8; color: #2A2622; white-space: nowrap; }
.wq-co-sc { position: absolute; inset: 0; z-index: 4; overflow-y: auto; scrollbar-width: none; cursor: ns-resize; outline: none; }
.wq-co-sc::-webkit-scrollbar { display: none; }
.wq-co-sp { height: 330%; }
[data-demo="wbcocina"] .wx-hint { left: 50%; right: auto; top: auto; bottom: 12px; transform: translateX(-50%); }
@container (max-aspect-ratio: 1 / 1) {
  .wq-co-logo { font-size: 4.6cqw; }
  .wq-co-title { width: 88cqw; top: 30%; } .wq-co-title h4 { font-size: 9cqw; } .wq-co-title p { max-width: none; font-size: 3.2cqw; }
  .wq-co-c { left: 5cqw; right: 5cqw; max-width: none; bottom: 8cqw; } .wq-co-c b, .wq-co-end b { font-size: 6.4cqw; } .wq-co-c span, .wq-co-end span { font-size: 3.2cqw; }
  .wq-co-end { right: 5cqw; bottom: 8cqw; } .wq-co-end em { font-size: 3.2cqw; }
}

/* ============ wbcapas · Plancha Brava (como All Star Burgers: armada → capa por capa → combo) ============ */
[data-demo="wbcapas"] { background: #17100B; }
.wq-ca { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #17100B; color: #FBF3E4; font: 400 13px/1.35 Inter, system-ui, sans-serif; }
.wq-ca-stack { position: absolute; left: 50%; top: 6%; bottom: 6%; aspect-ratio: 3 / 4; transform: translateX(-50%); transform-origin: 50% 50%; z-index: 1; }
.wq-ca-ly { position: absolute; height: auto; transform: translate(-50%, 0); transform-origin: 50% 50%; will-change: transform; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.28)); }
.wq-ca-lab { position: absolute; left: 92%; margin: 0; padding-left: 5.5cqw; display: grid; gap: 2px; transform: translateY(-50%); opacity: 0; white-space: nowrap; pointer-events: none; font-size: clamp(10px, 1.2cqw, 13px); }
.wq-ca-lab b { font: 700 clamp(12px, 1.5cqw, 17px)/1.1 'Space Grotesk', Inter, sans-serif; }
.wq-ca-lab span { opacity: 0.7; }
.wq-ca-lab::before { content: ''; position: absolute; left: 0; top: 50%; height: 1.5px; width: calc(4.6cqw * var(--u, 0)); background: #E4552C; }
.wq-ca-lab::after { content: ''; position: absolute; left: -3px; top: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: #E4552C; }
.wq-ca-papas, .wq-ca-malteada { position: absolute; z-index: 2; height: auto; opacity: 0; pointer-events: none; filter: drop-shadow(0 1.4cqw 1.6cqw rgba(43, 26, 14, 0.22)); }
.wq-ca-papas { left: 33%; bottom: -1%; width: 21%; }
.wq-ca-malteada { left: 76%; bottom: 5%; width: 12%; }
.wq-ca-nav { position: absolute; left: 3.4cqw; right: 3.4cqw; top: 2.8cqw; z-index: 5; display: flex; align-items: center; gap: 10px; }
.wq-ca-logo { font: 400 clamp(16px, 2.6cqw, 28px)/1 Anton, Impact, sans-serif; letter-spacing: 0.04em; color: #E4552C; }
.wq-ca-nav .hp-tag { color: inherit; }
.wq-ca-copy { position: absolute; left: 3.4cqw; top: 50%; z-index: 3; width: 27cqw; height: 0; pointer-events: none; }
.wq-ca-cx { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(-42%); opacity: 0; visibility: hidden; transition: opacity 0.25s, transform 0.4s, visibility 0s 0.25s; }
.wq-ca-cx.is-on { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity 0.45s 0.2s, transform 0.7s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.2s; }
.wq-ca-k { margin: 0 0 1cqw; font: 500 clamp(9px, 0.95cqw, 11px)/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #E4552C; }
.wq-ca-t { margin: 0; font: 400 clamp(34px, 6.4cqw, 86px)/0.88 Anton, Impact, sans-serif; letter-spacing: 0.01em; text-transform: uppercase; }
.wq-ca-s { margin: 1.2cqw 0 0; font-size: clamp(12px, 1.35cqw, 16px); opacity: 0.85; max-width: 24cqw; }
.wq-ca-price { display: block; margin-top: 1.2cqw; font: 400 clamp(26px, 4cqw, 52px)/1 Anton, Impact, sans-serif; color: #E4552C; }
.wq-ca-btn { display: inline-block; margin-top: 1.4cqw; font: 600 clamp(11px, 1.3cqw, 14px)/1 Inter, sans-serif; padding: 0.9em 1.3em; border-radius: 999px; background: #E4552C; color: #FFF8EE; }
.wq-ca-sc { position: absolute; inset: 0; z-index: 4; overflow-y: auto; scrollbar-width: none; cursor: ns-resize; outline: none; }
.wq-ca-sc::-webkit-scrollbar { display: none; }
.wq-ca-sp { height: 330%; }
[data-demo="wbcapas"] .wx-hint { left: auto; right: 12px; top: auto; bottom: 12px; }
@container (max-aspect-ratio: 1 / 1) {
  .wq-ca-stack { top: 30%; bottom: 12%; }
  .wq-ca-lab { padding-left: 4cqw; } .wq-ca-lab span { display: none; } .wq-ca-lab b { font-size: 3.2cqw; } .wq-ca-lab::before { width: calc(3cqw * var(--u, 0)); }
  .wq-ca-copy { left: 5cqw; right: 5cqw; width: auto; top: 14cqw; }
  .wq-ca-cx, .wq-ca-cx.is-on { transform: none; } .wq-ca-cx { transform: translateY(8%); }
  .wq-ca-t { font-size: 11cqw; } .wq-ca-s { max-width: none; font-size: 3.4cqw; margin-top: 2cqw; } .wq-ca-k { font-size: 2.4cqw; margin-bottom: 2cqw; }
  .wq-ca-price { display: inline; font-size: 7cqw; margin-right: 3cqw; } .wq-ca-btn { font-size: 3.2cqw; }
  .wq-ca-papas { left: 0; bottom: -1%; width: 38%; } .wq-ca-malteada { left: 72%; bottom: 7%; width: 22%; }
  .wq-ca-logo { font-size: 5cqw; }
}

/* ============ wborigen · Café Vilcabamba (un objeto que se transforma sobre color plano) ============ */
[data-demo="wborigen"] { background: #213B2B; }
.wq-or { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #213B2B; color: #F6EEDF; font: 400 13px/1.4 Inter, system-ui, sans-serif; transition: color 0.5s; }
.wq-or.is-light { color: #2A1D14; }
.wq-or-word { position: absolute; left: 62%; top: 53%; width: 0; margin: 0; transform: translateY(-50%); height: 1em; font: 400 clamp(70px, 17cqw, 240px)/1 Anton, Impact, sans-serif; pointer-events: none; }
.wq-or-word span { position: absolute; left: 0; top: 0; translate: -50% 0; white-space: nowrap; letter-spacing: 0.01em; text-transform: uppercase; color: rgba(255, 246, 230, 0.13);
  opacity: 0; transform: translateY(14%) scale(0.96); transition: opacity 0.6s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wq-or.is-light .wq-or-word span { color: rgba(60, 36, 20, 0.1); }
.wq-or-word span.is-on { opacity: 1; transform: none; }
.wq-or-ob { position: absolute; left: 62%; top: 53%; width: min(50cqw, 92cqh); aspect-ratio: 1; transform: translate(-50%, -50%); will-change: transform, opacity; }
img.wq-or-ob { display: block; height: auto; }
.wq-or-br { position: absolute; inset: 0; }
.wq-or-br .wq-or-ob { filter: drop-shadow(0 2cqw 2.4cqw rgba(0, 0, 0, 0.32)); }
.wq-or-ob[data-o="b"], .wq-or-ob[data-o="k"] { opacity: 0; filter: drop-shadow(0 1.6cqw 2cqw rgba(0, 0, 0, 0.3)); }
.wq-or-ob[data-o="k"] img { display: block; width: 100%; height: auto; }
.wq-or-lab { position: absolute; left: 36%; top: 39.3%; width: 27.3%; height: 39.7%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5em; text-align: center; color: #3A2616; }
.wq-or-lab b { font: 600 clamp(9px, 1.5cqw, 18px)/1 Fraunces, Georgia, serif; letter-spacing: 0.02em; }
.wq-or-lab i { width: 30%; height: 1px; background: #8C6A4C; }
.wq-or-lab span { font: 500 clamp(6px, 0.72cqw, 9px)/1.4 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; }
.wq-or-nav { position: absolute; left: 3.4cqw; right: 3.4cqw; top: 2.6cqw; z-index: 3; display: flex; align-items: center; gap: 10px; }
.wq-or-logo { font: 600 clamp(15px, 2.3cqw, 25px)/1 Fraunces, Georgia, serif; }
.wq-or-nav .hp-tag { color: inherit; }
.wq-or-cap { position: absolute; left: 3.4cqw; top: 50%; z-index: 2; width: 30cqw; height: 0; }
.wq-or-cx { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(-40%); opacity: 0; visibility: hidden; transition: opacity 0.25s, transform 0.4s, visibility 0s 0.25s; }
.wq-or-cx.is-on { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity 0.5s 0.25s, transform 0.8s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.25s; }
.wq-or-n { margin: 0 0 1cqw; font: 500 clamp(10px, 1cqw, 12px)/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; }
.wq-or-t { margin: 0; font: 600 clamp(26px, 4.6cqw, 58px)/0.98 Fraunces, Georgia, serif; letter-spacing: -0.02em; }
.wq-or-d { margin: 1.2cqw 0 0; max-width: 26cqw; font-size: clamp(11px, 1.3cqw, 15px); opacity: 0.82; }
.wq-or-buy { position: absolute; left: 3.4cqw; bottom: 7cqw; z-index: 2; padding: 0.85em 1.3em; border-radius: 999px; background: #2A1D14; color: #F6EEDF; font: 600 clamp(11px, 1.2cqw, 14px)/1 Inter, sans-serif;
  opacity: 0; transform: translateY(30%); transition: opacity 0.4s, transform 0.5s; }
.wq-or-buy.is-on { opacity: 1; transform: none; }
.wq-or-sc { position: absolute; inset: 0; z-index: 3; overflow-y: auto; scrollbar-width: none; cursor: ns-resize; outline: none; }
.wq-or-sc::-webkit-scrollbar { display: none; }
.wq-or-sp { height: 330%; }
[data-demo="wborigen"] .wx-hint { left: auto; right: 12px; top: 12px; bottom: auto; }
@container (max-aspect-ratio: 1 / 1) {
  .wq-or-ob { left: 50%; top: 44%; width: 82cqw; }
  .wq-or-word span { font-size: 26cqw; }
  .wq-or-word { left: 50%; top: 44%; }
  .wq-or-cap { left: 4cqw; right: 4cqw; width: auto; top: auto; bottom: 25cqw; }
  .wq-or-cx, .wq-or-cx.is-on { transform: translateY(-100%); }
  .wq-or-t { font-size: 8cqw; } .wq-or-d { max-width: none; font-size: 3.3cqw; } .wq-or-n { font-size: 2.6cqw; margin-bottom: 2cqw; }
  .wq-or-buy { left: auto; right: 4cqw; bottom: 25cqw; font-size: 3.2cqw; }
    .wq-or-nav { left: 4cqw; top: 4cqw; } .wq-or-logo { font-size: 4.8cqw; }
  .wq-or-lab b { font-size: 3cqw; } .wq-or-lab span { font-size: 1.5cqw; }
  [data-demo="wborigen"] .wx-hint { top: 13cqw; }
}

/* ============ wbretrato · Dra. Camila Andrade (a sangre, la cara manda) ============ */
[data-demo="wbretrato"] { background: #E9E6E1; }
.wq-re::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #E9E6E1 0%, #E9E6E1 34%, #B3ADA5 62%); }
.wq-re { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #E9E6E1; color: #1F2A26; font: 400 13px/1.35 Inter, system-ui, sans-serif; }
.wq-re-left { position: absolute; left: 4.4cqw; top: 0; bottom: 0; width: 50%; display: grid; align-content: center; gap: 1.8cqw; z-index: 2; }
.wq-re-k { margin: 0; font: 500 clamp(10px, 1cqw, 12px)/1 'JetBrains Mono', monospace; letter-spacing: 0.16em; text-transform: uppercase; color: #4F7A62; }
.wq-re-h { margin: 0; font: 400 clamp(40px, 9.2cqw, 120px)/0.86 'Instrument Serif', Georgia, serif; font-style: italic; letter-spacing: -0.025em; }
.wq-re-p { margin: 0; font-size: clamp(12px, 1.5cqw, 17px); color: #4A5550; max-width: 30ch; }
.wq-re-btn { justify-self: start; font: 600 clamp(11px, 1.35cqw, 15px)/1 Inter, sans-serif; padding: 0.9em 1.3em; border-radius: 999px; background: #1F2A26; color: #F4F1EA; }
.wq-re-photo { position: absolute; right: 0; top: 0; bottom: -14%; width: 60%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.wq-re-im { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; opacity: 0; transition: opacity 0.14s linear; }
.wq-re-im.is-on { opacity: 1; }
.wq-re-tag { position: absolute; margin: 0; z-index: 2; display: grid; gap: 2px; padding: 0.8em 1.1em; border-radius: 14px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 10px 24px rgba(31, 42, 38, 0.14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity 0.35s, transform 0.35s; font-size: clamp(10px, 1.1cqw, 13px); color: #4A5550; }
.wq-re-tag b { font: 600 clamp(18px, 2.8cqw, 32px)/1 'Space Grotesk', Inter, sans-serif; color: #1F2A26; }
.wq-re-tag[data-side="-1"] { left: 22%; top: 20%; } .wq-re-tag[data-side="0"] { left: 58%; bottom: 20%; transform: translate(-50%, 8px) scale(0.96); } .wq-re-tag[data-side="1"] { right: 5%; top: 26%; }
.wq-re-tag.is-on { opacity: 1; transform: none; } .wq-re-tag[data-side="0"].is-on { transform: translate(-50%, 0); }
[data-demo="wbretrato"] .wx-hint { left: auto; right: 12px; }
@container (max-aspect-ratio: 1 / 1) {
  .wq-re::before { background: linear-gradient(180deg, #B3ADA5 0%, #B3ADA5 46%, #E9E6E1 60%); }
  .wq-re-photo { width: 100%; top: 0; bottom: 42%; -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent); }
  .wq-re-im { object-position: 50% 42%; }
  .wq-re-left { left: 5cqw; right: 5cqw; top: auto; bottom: 0; width: auto; padding-bottom: 6cqw; gap: 2.4cqw; align-content: end; }
  .wq-re-h { font-size: 13cqw; } .wq-re-p { font-size: 3.4cqw; } .wq-re-tag b { font-size: 5cqw; } .wq-re-tag { font-size: 2.6cqw; }
  .wq-re-tag[data-side="-1"] { left: 5%; top: 14%; } .wq-re-tag[data-side="0"] { left: 50%; bottom: 46%; } .wq-re-tag[data-side="1"] { right: 5%; top: 20%; }
  [data-demo="wbretrato"] .wx-hint { top: 12px; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wq-ga-shut, .wq-or-im, .wq-re-tag { transition: none; }
}

/* avisos en celular (consulta del escenario, que es el contenedor del aviso) */
@container (max-width: 560px) {
  [data-demo="wbcapas"] .wx-hint { top: 12px; right: 12px; left: auto; bottom: auto; }
  [data-demo="wbgaraje"] .wx-hint { top: auto; bottom: 12px; left: 50%; right: auto; transform: translateX(-50%); }
  [data-demo="wbcocina"] .wx-hint { top: auto; bottom: 12px; }
}


/* ---- lote r_wearebrand3 ---- */
/* Lote R (10-10) · tanda 3 de @w.wearebrand. Prefijo wr-. Fuentes ya declaradas por el lote P. */
@font-face { font-family: 'Playfair Display'; font-style: italic; src: url(assets/fonts/playfair-italic-latin.woff2) format('woff2'); font-display: swap; }

/* ============ wbcaminar · La Mesa de Lupe ============ */
[data-demo="wbcaminar"] { background: #1A120D; }
.wr-ca { position: absolute; inset: 0; overflow: hidden; background: #1A120D; color: #FBF3E6; font: 400 13px/1.35 Inter, system-ui, sans-serif; }
.wr-ca { container-type: size; }
.wr-ca-view { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78cqh); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); }
.wr-ca-im { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform, opacity; backface-visibility: hidden; }
.wr-ca-im[data-i="0"] { z-index: 3; } .wr-ca-im[data-i="1"] { z-index: 2; } .wr-ca-im[data-i="2"] { z-index: 1; }
.wr-ca-mq { position: absolute; inset: 0; z-index: 2; background: #E6DCCB; transform-origin: 36% 60%; will-change: transform, opacity; }
.wr-ca-mqi { position: absolute; left: 50%; top: 50%; width: max(100%, 177.78cqh); height: auto; transform: translate(-50%, -58%); }
.wr-ca-mt { position: absolute; left: 50%; bottom: 7%; margin: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 0.8cqw; color: #3A2A1E; text-align: center; }
.wr-ca-mt span { font: 500 clamp(9px, 0.95cqw, 11px)/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
.wr-ca-mt b { font: italic 400 clamp(26px, 4.4cqw, 60px)/1 'Playfair Display', Georgia, serif; }
.wr-ca-mt em { font: 600 clamp(11px, 1.2cqw, 14px)/1 Inter, sans-serif; font-style: normal; padding: 0.85em 1.4em; border-radius: 999px; background: #3A2A1E; color: #F6EEDF; }
.wr-ca-view-clip { position: absolute; inset: 0; overflow: hidden; }
.wr-ca::after { content: ''; z-index: 1; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 12, 8, 0.55), rgba(20, 12, 8, 0) 26%, rgba(20, 12, 8, 0) 66%, rgba(20, 12, 8, 0.7)); pointer-events: none; }
.wr-ca-nav { position: absolute; left: 3cqw; right: 3cqw; top: 2.6cqw; z-index: 3; display: flex; align-items: center; gap: 10px; transition: color 0.4s; }
.wr-ca.is-mq .wr-ca-nav, .wr-ca.is-mq .wr-ca-nav .hp-tag { color: #3A2A1E; }
.wr-ca-logo { font: italic 400 clamp(16px, 2.8cqw, 28px)/1 'Playfair Display', Georgia, serif; }
.wr-ca-nav .hp-tag { color: #FBF3E6; }
.wr-ca-book { margin-left: auto; font: 600 12px/1 Inter, sans-serif; padding: 9px 14px; border-radius: 999px; background: #E9B872; color: #2A1A10; }
.wr-ca-pin { position: absolute; left: 3.4cqw; bottom: 4cqw; z-index: 3; margin: 0; max-width: 40cqw; display: grid; gap: 0.5cqw; opacity: 0; transform: translateY(12px); transition: opacity 0.4s, transform 0.6s; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45); }
.wr-ca-pin b { font: 400 clamp(20px, 3cqw, 38px)/1.05 'Playfair Display', Georgia, serif; font-style: italic; }
.wr-ca-pin span { font-size: clamp(11px, 1.35cqw, 14px); color: rgba(251, 243, 230, 0.8); }
.wr-ca-pin.is-on { opacity: 1; transform: none; }
.wr-ca-sc { position: absolute; inset: 0; z-index: 4; overflow-y: auto; scrollbar-width: none; cursor: ns-resize; outline: none; }
.wr-ca-sc::-webkit-scrollbar { display: none; }
.wr-ca-sp { height: 320%; }
[data-demo="wbcaminar"] .wx-hint { left: auto; right: 12px; bottom: 14px; }
@container (max-width: 560px) {
  .wr-ca-pin { max-width: none; right: 5cqw; left: 5cqw; bottom: 7cqw; } .wr-ca-pin b { font-size: 6.4cqw; } .wr-ca-pin span { font-size: 3.2cqw; }
  .wr-ca-book { display: none; } .wr-ca-logo { font-size: 5.4cqw; }
  [data-demo="wbcaminar"] .wx-hint { right: 3cqw; bottom: 3cqw; }
}

/* ============ wbpintura · Notaría Ferrada ============ */
[data-demo="wbpintura"] { background: #14213D; }
.wr-pi { position: absolute; inset: 0; overflow: hidden; background: #14213D; color: #FBF5E8; font: 400 13px/1.35 Inter, system-ui, sans-serif; }
.wr-pi-stage { position: absolute; inset: 0; cursor: pointer; }
.wr-pi-im { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.wr-pi-curtain { position: absolute; inset: -10% -60%; z-index: 5; pointer-events: none; transform: translateX(-120%) skewX(-14deg);
  background: linear-gradient(90deg, rgba(122, 18, 28, 0) 0%, #7A121C 8%, #A11A28 30%, #6E0F18 52%, #A11A28 74%, #7A121C 92%, rgba(122, 18, 28, 0) 100%);
  box-shadow: inset 30px 0 60px rgba(0, 0, 0, 0.35); }
.wr-pi-curtain.is-go { animation: wrpiCurtain 1.3s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
@keyframes wrpiCurtain { 0% { transform: translateX(-120%) skewX(-14deg); } 48%, 52% { transform: translateX(0) skewX(-14deg); } 100% { transform: translateX(120%) skewX(-14deg); } }
.wr-pi-dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; opacity: 0; pointer-events: none; }
.wr-pi-defs { position: absolute; }
.wr-pi-stage::after { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, rgba(10, 16, 34, 0.78), rgba(10, 16, 34, 0.25) 46%, rgba(10, 16, 34, 0) 70%); pointer-events: none; }
.wr-pi-nav { position: absolute; left: 3.4cqw; top: 2.8cqw; z-index: 6; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.wr-pi-logo { font: 400 clamp(15px, 2.4cqw, 24px)/1 'Young Serif', Georgia, serif; letter-spacing: 0.02em; }
.wr-pi-nav .hp-tag { color: #FBF5E8; }
.wr-pi-cap { position: absolute; left: 3.4cqw; top: 50%; transform: translateY(-50%); width: 44%; z-index: 6; display: grid; gap: 0.8cqw; pointer-events: none; }
.wr-pi-n { margin: 0; font: italic 400 clamp(22px, 5.4cqw, 64px)/1 'Playfair Display', Georgia, serif; color: #E3B45C; }
.wr-pi-h { margin: 0; font: 400 clamp(24px, 6.2cqw, 80px)/1 'Young Serif', Georgia, serif; text-wrap: balance; }
.wr-pi-s { margin: 0; font-size: clamp(11px, 1.5cqw, 16px); color: rgba(251, 245, 232, 0.85); max-width: 30ch; }
.wr-pi-cap.is-swap .wr-pi-h, .wr-pi-cap.is-swap .wr-pi-s, .wr-pi-cap.is-swap .wr-pi-n { animation: wrIn 0.6s both; }
@keyframes wrIn { from { opacity: 0; transform: translateY(8px); } }
.wr-pi-tr { position: absolute; right: 3cqw; bottom: 3cqw; z-index: 6; margin: 0; font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(251, 245, 232, 0.14); opacity: 0; }
.wr-pi-tr.is-on { animation: wrpiTr 1.6s both; }
@keyframes wrpiTr { 10%, 75% { opacity: 1; } 100% { opacity: 0; } }
[data-demo="wbpintura"] .wx-hint { left: auto; right: 12px; }
@container (max-width: 560px) {
  .wr-pi-cap { width: auto; right: 4cqw; top: auto; bottom: 12cqw; transform: none; } .wr-pi-h { font-size: 7.4cqw; } .wr-pi-s { font-size: 3.4cqw; } .wr-pi-n { font-size: 6cqw; }
  .wr-pi-stage::after { background: linear-gradient(0deg, rgba(10, 16, 34, 0.88), rgba(10, 16, 34, 0.25) 55%, rgba(10, 16, 34, 0) 75%); }
  [data-demo="wbpintura"] .wx-hint { top: auto; bottom: 3cqw; }
  .wr-pi-tr { display: none; }
}

/* ============ wbdiente · Sonríe (como Vibrant Wellness: lista de capas, la capa se enciende y la cámara se acerca) ============ */
[data-demo="wbdiente"] { background: #A9DCCB; }
.wr-di { position: absolute; inset: 0; background: #A8DCCF; color: #12352C; font: 400 13px/1.35 Inter, system-ui, sans-serif; overflow: hidden; container-type: size; }
.wr-di-photo { position: absolute; top: 9%; height: 100%; left: 50%; aspect-ratio: 16 / 9; transform: translateX(-63%); transform-origin: 40% 50%; transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.15, 1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.wr-di-photo.is-zoom { transform: translateX(-63%) scale(1.55); }
.wr-di-base, .wr-di-im, .wr-di-ly { position: absolute; inset: 0; width: 100%; height: 100%; }
.wr-di-im { opacity: 0; transition: opacity 0.5s; }
.wr-di-im.is-dim { opacity: 1; }
.wr-di-ly { opacity: 0; transition: opacity 0.45s, filter 0.45s; pointer-events: none; }
.wr-di-ly.is-on { opacity: 1; filter: brightness(1.08) saturate(1.3) drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 18px rgba(31, 138, 106, 0.85)); }
.wr-di-nav { position: absolute; left: 3.4cqw; right: 3.4cqw; top: 2.8cqw; z-index: 3; display: flex; align-items: center; gap: 10px; }
.wr-di-logo { font: 600 clamp(14px, 2.3cqw, 24px)/1 'Space Grotesk', Inter, sans-serif; } .wr-di-logo em { font-style: normal; font-weight: 400; color: #1F6E56; }
.wr-di-nav .hp-tag { color: #12352C; }
.wr-di-cta { margin-left: auto; font: 600 12px/1 Inter, sans-serif; padding: 9px 14px; border-radius: 999px; background: #12352C; color: #FFF; }
.wr-di-list { position: absolute; right: 3.4cqw; top: 50%; z-index: 3; width: 24cqw; transform: translateY(-50%); padding: 1.2cqw; border-radius: 16px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px rgba(18, 53, 44, 0.12); }
.wr-di-list p { margin: 0.2cqw 0.6cqw 0.8cqw; font: 500 clamp(9px, 0.9cqw, 11px)/1 'JetBrains Mono', monospace; letter-spacing: 0.16em; text-transform: uppercase; color: #1F6E56; }
.wr-di-row { width: 100%; display: flex; white-space: nowrap; align-items: center; gap: 10px; padding: 0.75em 0.8em; border: 0; border-radius: 10px; background: transparent; color: #12352C; cursor: pointer; text-align: left;
  font: 600 clamp(12px, 1.3cqw, 15px)/1 Inter, sans-serif; transition: background 0.25s, color 0.25s; }
.wr-di-row i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; }
.wr-di-row b { margin-left: auto; font-weight: 400; opacity: 0.5; }
.wr-di-row:hover { background: rgba(255, 255, 255, 0.6); }
.wr-di-row.is-on { background: #12352C; color: #FFF; } .wr-di-row.is-on i { background: #7FE0BF; border-color: #7FE0BF; }
.wr-di-lab { position: absolute; left: 3.4cqw; bottom: 3.4cqw; z-index: 3; max-width: 40cqw; display: grid; grid-template-columns: 1fr auto; gap: 0.5cqw 1.6cqw; align-items: end; padding: 1.4cqw 1.6cqw;
  border-radius: 16px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 18px 40px rgba(18, 53, 44, 0.14); opacity: 0; transform: translateY(12px); transition: opacity 0.4s, transform 0.5s; }
.wr-di-lab.is-on { opacity: 1; transform: none; }
.wr-di-h { margin: 0; grid-column: 1; font: 600 clamp(20px, 3cqw, 36px)/1 'Space Grotesk', Inter, sans-serif; letter-spacing: -0.02em; }
.wr-di-what { margin: 0; grid-column: 1; font-size: clamp(11px, 1.25cqw, 14px); color: #3E5C53; }
.wr-di-tx { grid-column: 1; margin: 0.3cqw 0 0; font-size: clamp(11px, 1.2cqw, 14px); }
.wr-di-txn { font-weight: 600; } .wr-di-txp { font-style: normal; font-weight: 700; color: #1F8A6A; margin-left: 0.5em; }
.wr-di-arrs { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 6px; }
.wr-di-arr { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(18, 53, 44, 0.3); background: #FFF; color: #12352C; font: 400 18px/1 Inter, sans-serif; cursor: pointer; }
.wr-di-lab.is-swap .wr-di-h, .wr-di-lab.is-swap .wr-di-what, .wr-di-lab.is-swap .wr-di-tx { animation: wrIn 0.45s both; }
[data-demo="wbdiente"] .wx-hint { left: auto; right: 12px; bottom: 12px; }
@container (max-aspect-ratio: 1 / 1) {
  .wr-di-photo { top: 12%; height: 58%; transform: translateX(-50%); } .wr-di-photo.is-zoom { transform: translateX(-50%) scale(1.5); }
  .wr-di-list { display: none; } .wr-di-cta { display: none; } .wr-di-logo { font-size: 4.6cqw; }
  .wr-di-lab { left: 4cqw; right: 4cqw; bottom: 4cqw; max-width: none; padding: 3.4cqw; gap: 1.4cqw 3cqw; }
  .wr-di-h { font-size: 6.4cqw; } .wr-di-what, .wr-di-tx { font-size: 3.2cqw; }
}
@container (max-width: 560px) { [data-demo="wbdiente"] .wx-hint { top: calc(4cqw + 34px); bottom: auto; } }

@media (prefers-reduced-motion: reduce) {
  .wr-ca-pin, .wr-di-glow, .wr-di-photo, .wr-di-ly { transition: none; }
}