/* SocialBlink — página de Servicios.
   Idea: no se leen tarjetas, se prueban. El visitante escribe el nombre de su marca y la ve
   aplicada en los cinco servicios. La paleta y la personalidad que elige en Branding viajan
   por toda la página (variables --b1/--b2/--b3 y --v*, en <main class="sv">). */

/* ---------- Marca del visitante: paletas y personalidades ---------- */
.sv { --b1: #F04B1D; --b2: #12151D; --b3: #F6F1EA; counter-reset: ch; }
.sv[data-palette="bosque"] { --b1: #2F7A55; --b2: #10241B; --b3: #EEF2E6; }
.sv[data-palette="oceano"] { --b1: #2763C9; --b2: #0E1B33; --b3: #EAF0FA; }
.sv[data-palette="uva"] { --b1: #8A3FC9; --b2: #1E1030; --b3: #F3ECFA; }
/* Personalidad: tipografía, mayúsculas, aire y lo redondo de las formas */
.sv { --vf: var(--font-display); --vw: 800; --vs: 75%; --vls: -.045em; --vtt: none; --vr: 22px; --vr-s: 12px; }
.sv[data-voice="seria"] { --vf: var(--font-body); --vw: 600; --vs: 100%; --vls: .08em; --vtt: uppercase; --vr: 4px; --vr-s: 2px; }
.sv[data-voice="cercana"] { --vf: var(--font-display); --vw: 600; --vs: 100%; --vls: -.02em; --vtt: lowercase; --vr: 34px; --vr-s: 999px; }

/* ---------- Cabecera ---------- */
.sv-hero { padding-block: clamp(2rem, 6vh, 4rem) clamp(3rem, 7vw, 6rem); overflow-x: clip; }
.sv-hero__grid { display: grid; gap: 1.5rem; align-items: end; }
.sv-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, .8rem + 8.6vw, 9.25rem); line-height: .86; letter-spacing: -.055em;
}
.sv-title__line { display: block; }
.sv-hero .lead { margin-top: 1.5rem; }
.sv-name { margin-top: 2rem; max-width: 30rem; }
.sv-name__label { display: block; font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sv-name__field { position: relative; margin-top: .5rem; }
.sv-name__field input {
  width: 100%; padding: .35rem 3rem .35rem 0;
  background: transparent; color: var(--ink);
  border: 0; border-bottom: 3px solid var(--ink); border-radius: 0;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); letter-spacing: -.03em;
}
.sv-name__field input::placeholder { color: rgba(18, 21, 29, .32); }
.sv-name__field input:focus { outline: none; border-bottom-color: var(--orange); }
.sv-name__field input:focus-visible { outline: 3px solid var(--orange); outline-offset: 6px; }
.sv-name__lens { position: absolute; right: .2rem; bottom: .8rem; width: 1.9rem; height: 1.9rem; color: var(--orange); transition: transform 500ms var(--ease-spring); }
.sv-name__field.is-typing .sv-name__lens { transform: rotate(-20deg) scale(1.15); }
.sv-name__hint { margin-top: .5rem; font-size: .875rem; color: var(--muted); }
.sv-hero__art { margin: 0; justify-self: center; width: min(58%, 15rem); aspect-ratio: 5 / 6; }   /* caja fija: cambiar de pose no mueve nada */
.sv-hero__art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 95%; }
@media (min-width: 900px) {
  .sv-hero__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--gutter); }
  .sv-hero__art { width: 100%; max-width: 19rem; justify-self: end; }
}

/* Índice tipográfico de los cinco servicios */
.sv-index ol { margin-top: clamp(2.5rem, 6vw, 4.5rem); border-top: 2px solid var(--ink); }
.sv-index li { border-bottom: 2px solid var(--ink); }
.sv-index a {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .1rem .75rem;
  padding: .85rem .25rem; text-decoration: none;
}
.sv-index a::before {   /* el naranja sube como un párpado al pasar */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--orange);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform 450ms var(--ease-out);
}
.sv-index__num { font-size: .8125rem; font-weight: 600; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.sv-index__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 1rem + 4.4vw, 5.25rem); line-height: 1; letter-spacing: -.045em;
  transition: transform 450ms var(--ease-out), font-stretch 450ms var(--ease-out);
}
.sv-index__tag { grid-column: 2; font-size: .875rem; color: var(--muted); }
.sv-index__go { grid-row: 1; grid-column: 3; width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 450ms var(--ease-out); }
.sv-index a:focus-visible::before { transform: scaleY(1); }
.sv-index a:focus-visible .sv-index__num, .sv-index a:focus-visible .sv-index__tag { color: var(--ink); }
@media (hover: hover) {
  .sv-index a:hover::before { transform: scaleY(1); }
  .sv-index a:hover .sv-index__name { transform: translateX(.35em); font-stretch: 78%; }
  .sv-index a:hover .sv-index__go { transform: rotate(-45deg); }
  .sv-index a:hover .sv-index__num, .sv-index a:hover .sv-index__tag { color: var(--ink); }
}
@media (min-width: 900px) {
  .sv-index a { grid-template-columns: 4rem minmax(0, 1fr) 20rem 3rem; padding-block: 1rem; }
  .sv-index__tag { grid-column: 3; grid-row: 1; }
  .sv-index__go { grid-column: 4; justify-self: end; }
}

/* ---------- Riel lateral (escritorio) ---------- */
.sv-rail { display: none; }
@media (min-width: 1240px) {
  .sv-rail {
    display: block; position: fixed; z-index: 40; right: 1rem; top: 50%;
    transform: translateY(-50%);
    opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease-out);
  }
  .sv-rail.is-on { opacity: 1; pointer-events: auto; }
  .sv-rail ol { display: grid; gap: .55rem; justify-items: end; }
  .sv-rail a { display: flex; flex-direction: row-reverse; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); }
  .sv-rail svg { width: 1.65rem; height: 1.65rem; overflow: visible; }
  .sv-rail circle { fill: var(--cream); stroke: var(--ink); stroke-width: 10; transition: fill 300ms; }
  .sv-rail ellipse { fill: var(--ink); transform: scaleY(0); transform-box: fill-box; transform-origin: center; transition: transform 300ms var(--ease-spring); }
  .sv-rail a.is-seen ellipse { transform: scaleY(1); }
  .sv-rail a[aria-current] circle { fill: var(--orange); }
  .sv-rail a span {
    padding: .2rem .6rem; border-radius: 999px;
    background: var(--ink); color: var(--cream); font-size: .75rem; font-weight: 600; white-space: nowrap;
    opacity: 0; transform: translateX(6px); transition: opacity 250ms, transform 250ms var(--ease-out);
  }
  .sv-rail a:hover span, .sv-rail a:focus-visible span, .sv-rail a[aria-current] span { opacity: 1; transform: none; }
  .sv-rail__build { margin-top: .4rem; }
  .sv-rail__build b {
    display: grid; place-items: center; min-width: 1.65rem; height: 1.65rem; padding-inline: .3rem;
    border-radius: 999px; background: var(--orange); color: var(--ink); border: 2px solid var(--ink);
    font-size: .75rem; font-variant-numeric: tabular-nums;
  }
  .sv-rail__build b.is-bump { animation: sv-bump 500ms var(--ease-spring); }
}
@keyframes sv-bump { 40% { transform: scale(1.45); } }

/* ---------- Capítulos ---------- */
.sv-ch, .sv-build { scroll-margin-top: var(--header-h); }
.sv-ch { position: relative; counter-increment: ch; padding-block: clamp(4.5rem, 10vw, 8rem); overflow-x: clip; }
.sv-ch::before {   /* número gigante de fondo, en contorno */
  content: "0" counter(ch);
  position: absolute; right: -.04em; top: .1em; z-index: 0; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(9rem, 28vw, 26rem); line-height: .8; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 2px currentColor; opacity: .09;
}
.sv-ch > .container { position: relative; z-index: 1; }
.sv-ch--logo, .sv-ch--pack { background: var(--ink); color: var(--cream); }
.sv-ch--social { background: var(--orange); color: var(--ink); }
.sv-ch--editorial { background: var(--cream-deep); }
.sv-ch__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1000px) {
  .sv-ch__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); }
  .sv-ch--logo .sv-ch__grid, .sv-ch--editorial .sv-ch__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sv-ch--logo .sv-ch__text, .sv-ch--editorial .sv-ch__text { order: 2; }
}
.sv-ch__num { font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; }
.sv-ch__num span { color: var(--orange-ink); }
.sv-ch--logo .sv-ch__num span, .sv-ch--pack .sv-ch__num span { color: var(--orange); }
.sv-ch--social .sv-ch__num span { color: var(--ink); }
.sv-ch__title {
  margin: .6rem 0 1.25rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 1.2rem + 6.6vw, 7.25rem); line-height: .88; letter-spacing: -.055em;
}
.sv-ch__lead { max-width: 34ch; font-size: var(--t-lead); line-height: 1.4; }
.sv-ch__sub { margin-top: 1.75rem; font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.sv-ch__list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.sv-ch__list li { padding: .35rem .85rem; border: 2px solid currentColor; border-radius: 999px; font-weight: 600; font-size: .9375rem; }
.sv-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin-top: 1.75rem; font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sv-price span { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; text-transform: none; }
.sv-price .is-pending { color: inherit; opacity: .6; border-bottom: 2px dashed currentColor; }
.sv-add { margin-top: 1.4rem; }
.sv-add[aria-pressed="true"] { background: var(--orange); color: var(--ink); border-color: var(--ink); }
.sv-ch--social .sv-add[aria-pressed="true"] { background: var(--cream); }
.btn--light { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* Escenario de cada ejemplo */
.sv-stage { position: relative; display: grid; gap: 1.1rem; justify-items: center; min-width: 0; }
.sv-stage__note {
  justify-self: start; display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem; border: 1.5px dashed currentColor; border-radius: 999px;
  font-size: .8125rem; font-weight: 600;
}
.sv-stage__note svg { width: 1rem; height: 1rem; color: var(--orange); }
.sv-ch--social .sv-stage__note svg { color: var(--ink); }

/* Botones redondos y de pastilla de los ejemplos */
.sv-round, .sv-pill {
  display: inline-grid; place-items: center; min-height: 2.75rem;
  border: 2px solid currentColor; border-radius: 999px; background: transparent; color: inherit;
  cursor: pointer; transition: background-color 200ms, color 200ms, transform 200ms var(--ease-out);
}
.sv-round { width: 2.75rem; }
.sv-round svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sv-round:disabled { opacity: .3; cursor: default; }
.sv-pill { padding: 0 1.1rem; font-weight: 600; }
.sv-pill[aria-pressed="true"] { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.sv-round:not(:disabled):active, .sv-pill:active { transform: scale(.94); }

/* Controles: muestras de color y fichas */
.sv-ctrls { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; }
.sv-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; border: 0; }
.sv-ctrl legend { float: left; margin-right: .5rem; font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sv-swatch, .sv-chip { position: relative; cursor: pointer; }
.sv-swatch input, .sv-chip input, .sv-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sv-swatch span {
  display: block; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%);
  border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--ink);
  font-size: 0; transition: transform 300ms var(--ease-spring), box-shadow 200ms;
}
.sv-swatch input:checked + span { transform: scale(1.12); box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--orange); }
.sv-chip span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border: 2px solid var(--ink); border-radius: 999px; font-weight: 600; font-size: .9375rem; transition: background-color 200ms, color 200ms; }
.sv-chip input:checked + span { background: var(--ink); color: var(--cream); }
.sv-swatch input:focus-visible + span, .sv-chip input:focus-visible + span, .sv-opt input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- 01 · Tablero de marca ---------- */
.bb {
  width: 100%; max-width: 36rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(4.25rem, 9vw, 6.5rem); gap: .6rem;
  grid-template-areas: "mark mark word word" "mark mark sw sw" "type card card stik" "avat card card stik";
  padding: .6rem; background: var(--white); border-radius: calc(var(--vr) + .6rem);
  box-shadow: 0 30px 60px -30px rgba(18, 21, 29, .35);
  transition: border-radius 600ms var(--ease-out);
}
.bb__cell {
  position: relative; overflow: hidden; display: grid; place-items: center;
  border-radius: var(--vr);
  transition: background-color 600ms var(--ease-out) calc(var(--i) * 70ms), color 600ms var(--ease-out) calc(var(--i) * 70ms), border-radius 600ms var(--ease-out);
}
.bb__mark { grid-area: mark; background: var(--b1); color: var(--b3); }
.bb__mark svg { position: absolute; width: 74%; height: 74%; fill: none; stroke: currentColor; stroke-width: 6; opacity: .9; }
.bb__mark span { font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); font-size: clamp(2.6rem, 1.4rem + 4vw, 4.6rem); letter-spacing: -.04em; line-height: 1; }
.bb__word { grid-area: word; background: var(--b3); color: var(--b2); align-content: center; justify-items: start; padding: 0 1rem; }
.bb__name { font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); letter-spacing: var(--vls); text-transform: var(--vtt); font-size: clamp(1.1rem, .7rem + 1.8vw, 2rem); line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb__word small { margin-top: .25rem; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.bb__swatches { grid-area: sw; display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; place-items: stretch; background: transparent; }
.bb__sw { position: relative; display: block; height: 100%; border-radius: var(--vr-s); transition: background-color 600ms var(--ease-out) calc(var(--j) * 90ms), border-radius 600ms; }
.bb__sw--1 { --j: 1; background: var(--b1); } .bb__sw--2 { --j: 2; background: var(--b2); } .bb__sw--3 { --j: 3; background: var(--b3); box-shadow: inset 0 0 0 1.5px rgba(18, 21, 29, .12); }
.bb__sw span { position: absolute; left: .4rem; bottom: .3rem; font-size: .6rem; font-weight: 600; letter-spacing: .04em; color: var(--b3); mix-blend-mode: normal; }
.bb__sw--3 span { color: var(--b2); }
.bb__type { grid-area: type; background: var(--b2); color: var(--b3); align-content: center; gap: .1rem; }
.bb__aa { font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); font-size: clamp(1.8rem, 1rem + 2.6vw, 3rem); line-height: 1; letter-spacing: -.03em; }
.bb__font { font-size: .55rem; font-weight: 600; text-align: center; padding: 0 .3rem; opacity: .75; }
.bb__card { grid-area: card; background: var(--b3); color: var(--b2); padding: .8rem; align-content: end; justify-items: start; gap: .15rem; }
.bb__card::after { content: ""; position: absolute; inset: auto 0 0 0; height: .5rem; background: var(--b1); transition: background-color 600ms var(--ease-out) 280ms; }
.bb__card-mono { position: absolute; top: .8rem; left: .8rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--vr-s); background: var(--b1); color: var(--b3); font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); font-size: 1.05rem; transition: background-color 600ms, border-radius 600ms; }
.bb__card-name { font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); letter-spacing: var(--vls); text-transform: var(--vtt); font-size: 1.15rem; line-height: 1; }
.bb__card-web { font-size: .72rem; opacity: .7; margin-bottom: .55rem; }
.bb__avatar { grid-area: avat; background: var(--b3); }
.bb__avatar span { display: grid; place-items: center; width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--b1); color: var(--b3); font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); font-size: 1.1rem; transition: background-color 600ms var(--ease-out) 400ms, color 600ms; }
.bb__sticker { grid-area: stik; background: var(--b2); }
.bb__sticker svg { position: absolute; width: 92%; max-height: 92%; animation: sv-spin 18s linear infinite; }
.bb__sticker circle { fill: var(--b1); transition: fill 600ms var(--ease-out) 450ms; }
.bb__sticker text { fill: var(--b3); font-family: var(--vf); font-weight: var(--vw); font-size: 15px; letter-spacing: .12em; }
.bb__sticker span { position: relative; color: var(--b3); font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); font-size: 1.3rem; }
@keyframes sv-spin { to { transform: rotate(360deg); } }
.bb.is-flash .bb__cell { animation: sv-pop 520ms var(--ease-spring) calc(var(--i) * 45ms) both; }
@keyframes sv-pop { 40% { transform: scale(.94); } }

/* ---------- 02 · Logotipo: boceto → geometría → vector ---------- */
.lg { width: 100%; max-width: 34rem; height: auto; border: 1.5px solid var(--line-on-ink); border-radius: 22px; background: rgba(246, 241, 234, .03); overflow: visible; }
.lg__grid path { stroke: rgba(246, 241, 234, .07); stroke-width: 1; }
.lg__sketch path { fill: none; stroke: #A8ADB8; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lg__geo { fill: none; stroke: var(--orange); stroke-width: 1.2; stroke-dasharray: 4 5; }
.lg__geo .lg__outer { stroke-dasharray: 2 6; opacity: .6; }
.lg__geo .lg__dim { stroke-dasharray: none; }
.lg__geo .lg__dot { fill: var(--orange); stroke: none; }
.lg__geo text { fill: var(--orange); stroke: none; font: 600 12px var(--font-body); text-anchor: middle; }
.lg__final .lg__ring { fill: none; stroke: var(--cream); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lg__final .lg__wink { stroke: var(--orange); }
.lg__pupil { fill: var(--orange); transform-box: fill-box; transform-origin: center; transform: scale(0); }
.lg__word { fill: var(--cream); font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); letter-spacing: var(--vls); text-transform: var(--vtt); font-size: 30px; text-anchor: middle; opacity: 0; }
.sv-range { width: 100%; max-width: 34rem; }
.sv-range input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; background: transparent; cursor: pointer;
}
.sv-range input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--orange) var(--fill, 0%), rgba(246, 241, 234, .2) var(--fill, 0%)); }
.sv-range input::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(246, 241, 234, .2); }
.sv-range input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--orange); }
.sv-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.75rem; height: 1.75rem; margin-top: calc(-.875rem + 2px); border-radius: 50%; background: var(--orange); border: 4px solid var(--cream); box-shadow: 0 0 0 2px var(--ink); }
.sv-range input::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--orange); border: 4px solid var(--cream); }
.sv-range input:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 999px; }
.sv-range__steps { display: flex; justify-content: space-between; font-size: .8125rem; font-weight: 600; opacity: .75; }
.lg-sizes { width: 100%; max-width: 34rem; opacity: 0; transform: translateY(.75rem); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
.sv-stage--logo.is-done .lg-sizes { opacity: 1; transform: none; }
.lg-sizes p { font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.lg-sizes__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; margin-top: .75rem; }
.lg-sizes__row > span { display: grid; justify-items: center; gap: .35rem; }
.lg-sizes__row small { font-size: .7rem; opacity: .65; }
.lg-sizes__fav svg { width: 16px; height: 8px; color: var(--cream); }
.lg-sizes__fav { padding: .45rem .6rem .3rem; border-radius: .5rem .5rem 0 0; background: rgba(246, 241, 234, .1); }
.lg-sizes__avatar svg { width: 3.75rem; height: 3.75rem; padding: .9rem .5rem; border-radius: 50%; background: var(--cream); color: var(--ink); }
.lg-sizes__sign { grid-auto-flow: row; }
.lg-sizes__sign svg { width: 8.5rem; height: 4.25rem; padding: .6rem 1rem 0; background: var(--orange); color: var(--ink); border-radius: .6rem .6rem 0 0; }
.lg-sizes__sign b { width: 8.5rem; margin-top: -.35rem; padding: 0 0 .5rem; background: var(--orange); color: var(--ink); border-radius: 0 0 .6rem .6rem; text-align: center; font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); text-transform: var(--vtt); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 03 · Redes: el mismo feed con y sin sistema ---------- */
.phone { width: min(100%, 20.5rem); padding: .65rem; border-radius: 2.5rem; background: var(--ink); box-shadow: 0 34px 60px -28px rgba(18, 21, 29, .7); }
.phone__bar { display: flex; align-items: center; gap: .6rem; padding: .95rem .9rem .75rem; background: var(--white); color: var(--ink); border-radius: 1.9rem 1.9rem .35rem .35rem; }
.phone__avatar { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--b1); color: var(--b3); font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); font-size: .95rem; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--b1); transition: background-color 600ms, box-shadow 600ms; }
.phone__who { display: grid; min-width: 0; line-height: 1.2; }
.phone__who b { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone__who small { font-size: .7rem; color: var(--muted); }
.phone__follow { margin-left: auto; padding: .35rem .8rem; border-radius: 999px; background: var(--b1); color: var(--b3); font-size: .75rem; font-weight: 600; transition: background-color 600ms; }
.feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px 3px 1.4rem; background: var(--white); border-radius: .35rem .35rem 1.9rem 1.9rem; perspective: 900px; }
.tile { position: relative; aspect-ratio: 1; transform-style: preserve-3d; transition: transform 760ms var(--ease-spring) var(--d, 0ms); cursor: pointer; }
.feed.is-chaos .tile { transform: rotateY(180deg); }
.feed.no-anim .tile { transition: none; }
.tile__a, .tile__b { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; line-height: 1; }
.tile__b { transform: rotateY(180deg); }
.tile img { width: 86%; height: auto; }
/* Con sistema: paleta, tipografía y margen constantes */
.tile__a { background: var(--b3); color: var(--b2); font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); letter-spacing: var(--vls); transition: background-color 600ms, color 600ms; }
.tile__a.t-1 { background: var(--b1); color: var(--b3); }
.tile__a.t-2 { background: var(--b2); color: var(--b3); }
.tile__a .t-big { font-size: 1.15rem; padding: 0 .4rem; }
.tile__a .t-small { display: block; margin-top: .3rem; font-family: var(--font-body); font-weight: 600; font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.tile__a .t-mono { font-size: 2rem; }
.tile__a .t-lenses { width: 70%; height: 70%; color: var(--b1); }
/* Sin sistema: cada publicación por su lado */
.tile__b { font-weight: 700; }
.tile__b.c-0 { background: #00E0FF; color: #FF00A8; font-family: "Comic Sans MS", "Chalkboard SE", cursive; }
.tile__b.c-1 { background: linear-gradient(160deg, #FFE600, #FF5E00); color: #1B00FF; font-family: Impact, "Arial Black", sans-serif; letter-spacing: .02em; }
.tile__b.c-2 { background: #F2F2F2; color: #333; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; }
.tile__b.c-3 { background: #7CFF6B; color: #8A00C2; font-family: "Courier New", monospace; }
.tile__b.c-4 { background: #1F1F1F; color: #FFE600; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.1rem; }
.tile__b.c-5 { background: radial-gradient(circle, #FF66C4, #6E00FF); color: #fff; font-family: "Arial Black", Arial, sans-serif; }
.tile__b .t-big { font-size: .95rem; padding: 0 .3rem; }
.tile__b img { filter: hue-rotate(var(--h, 120deg)) saturate(1.8); width: 70%; }
.tile__like { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; color: var(--white); pointer-events: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3)); }
.sv-switch { display: inline-flex; padding: .3rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--cream); }
.sv-switch button { min-height: 2.5rem; padding: 0 1.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-weight: 600; cursor: pointer; transition: background-color 250ms, color 250ms; }
.sv-switch button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.sv-switch button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- 04 · Editorial: libro que se hojea ---------- */
.book-wrap { width: min(100%, 38rem); container-type: inline-size; perspective: 2000px; padding-block: .5rem; }
.book { position: relative; width: 100%; aspect-ratio: 2 / 1.36; transform-style: preserve-3d; transition: transform 800ms var(--ease-out); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.book[data-state="0"] { transform: translateX(-25%); }
.book[data-state="3"] { transform: translateX(25%); }
.book.is-grabbing { cursor: grabbing; }
.book__leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 900ms cubic-bezier(.6, .05, .25, 1); }
.book__leaf.is-flipped { transform: rotateY(-180deg); }
.book.is-dragging .book__leaf { transition: none; }
.book__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.book__face--back { transform: rotateY(180deg); }
.pg { display: flex; flex-direction: column; padding: 9% 9% 7%; background: #FFFDF8; color: var(--ink); font-size: 2.1cqw; line-height: 1.25; box-shadow: 0 18px 30px -20px rgba(18, 21, 29, .45); }
.book__face--front.pg { border-radius: 0 .6rem .6rem 0; background-image: linear-gradient(90deg, rgba(18, 21, 29, .12), rgba(18, 21, 29, 0) 12%); }
.book__face--back.pg { border-radius: .6rem 0 0 .6rem; background-image: linear-gradient(270deg, rgba(18, 21, 29, .12), rgba(18, 21, 29, 0) 12%); }
.pg__kicker { font-size: .78em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.pg__folio { margin-top: auto; font-size: .75em; font-weight: 600; opacity: .5; }
.book__face--back .pg__folio { align-self: flex-start; }
.book__face--front .pg__folio { align-self: flex-end; }
.pg__corner { position: absolute; right: 0; bottom: 0; width: 12%; aspect-ratio: 1; background: linear-gradient(315deg, transparent 50%, rgba(18, 21, 29, .14) 50%, rgba(255, 255, 255, .95) 62%); border-radius: 0 0 .6rem 0; }
.pg--cover { background: var(--b1); background-image: none; color: var(--b3); justify-content: space-between; transition: background-color 600ms; }
.pg__cover-mono { align-self: center; display: grid; place-items: center; width: 42%; aspect-ratio: 1; border: .45em solid currentColor; border-radius: 50%; font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); font-size: 3.4em; }
.pg__cover-name { font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); letter-spacing: var(--vls); text-transform: var(--vtt); font-size: 2.5em; line-height: .95; }
.pg__toc { margin-top: 12%; display: grid; gap: .9em; font-family: var(--font-display); font-weight: 700; font-size: 1.45em; letter-spacing: -.02em; }
.pg__toc li { display: flex; gap: .7em; padding-bottom: .5em; border-bottom: 1px solid rgba(18, 21, 29, .15); }
.pg__toc span { color: var(--b1); font-family: var(--font-body); font-size: .7em; font-weight: 600; transition: color 600ms; }
.pg__h { display: block; margin: 8% 0 6%; font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); letter-spacing: -.03em; font-size: 2.15em; line-height: .98; }
.pg__h em { font-style: normal; color: var(--b1); transition: color 600ms; }
.pg__cols { columns: 2; column-gap: 8%; }
.pg__cols i { display: block; height: .42em; margin: .55em 0; border-radius: 2px; background: #DDD6CC; break-inside: avoid; }
.pg__cols i:nth-child(3n) { width: 78%; } .pg__cols i:nth-child(4n+1) { width: 92%; }
.pg--full { background: var(--b2); background-image: none; color: var(--b3); justify-content: center; transition: background-color 600ms; }
.pg__big { position: absolute; left: -5%; top: -7%; font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); font-size: 13em; line-height: .8; color: transparent; -webkit-text-stroke: .02em var(--b1); opacity: .7; }
.pg__quote { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 2.1em; line-height: 1; letter-spacing: -.03em; }
.pg--full .pg__folio { position: absolute; left: 9%; bottom: 7%; color: var(--b3); }
.pg__products { margin-top: 9%; display: grid; grid-template-columns: 1fr 1fr; gap: 6%; flex: 1; }
.pg__products i { border-radius: var(--vr-s); background: var(--b3); position: relative; box-shadow: inset 0 0 0 1px rgba(18, 21, 29, .08); transition: background-color 600ms, border-radius 600ms; }
.pg__products i::after { content: ""; position: absolute; left: 25%; top: 18%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--b1); transition: background-color 600ms; }
.pg__products i:nth-child(2)::after { border-radius: 18%; background: var(--b2); }
.pg__products i:nth-child(3)::after { border-radius: 18% 50%; }
.pg__products i:nth-child(4)::after { background: var(--b2); border-radius: 50% 50% 12% 12%; }
.pg--back { background: var(--b1); background-image: none; color: var(--b3); align-items: center; justify-content: center; gap: .6em; text-align: center; transition: background-color 600ms; }
.pg--back .pg__cover-mono { width: 34%; font-size: 2.6em; }
.pg--back b { font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); text-transform: var(--vtt); font-size: 1.5em; }
.pg--back small { font-size: .85em; opacity: .75; }
.book-ctrl { display: flex; align-items: center; gap: 1rem; }
.book-ctrl__status { min-width: 9.5rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 05 · Packaging: caja 3D y su troquel ---------- */
.pk-scene {
  --w: clamp(118px, 15vw, 196px); --h: calc(var(--w) * 1.32); --d: calc(var(--w) * .52); --fold: 1;
  display: grid; place-items: center; width: 100%; height: calc(var(--h) * 2.15);
  perspective: 1100px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.pk-scene.is-grabbing { cursor: grabbing; }
.pk-scene.is-flat { --fold: 0; cursor: default; }
.pk-box {
  --rx: -14deg; --ry: -32deg;
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d; transform-origin: 50% 50% calc(var(--d) * -.5);
  transform: translateX(0) scale(1) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 900ms var(--ease-out);
}
.pk-scene.is-grabbing .pk-box, .pk-scene.is-idle .pk-box { transition: none; }
.pk-scene.is-flat .pk-box { transform: translateX(calc(var(--w) * -.5)) scale(.62) rotateX(0deg) rotateY(0deg); }
.pk-face { position: absolute; transform-style: preserve-3d; background: var(--b1); color: var(--b3); transition: background-color 600ms, outline-color 400ms; outline: 1.5px dashed transparent; outline-offset: -1px; }
.pk-hinge { position: absolute; transform-style: preserve-3d; transition: transform 800ms var(--ease-out); }
.pk-hinge > .pk-face { inset: 0; }
.pk-front { left: 0; top: 0; width: var(--w); height: var(--h); display: grid; place-items: center; align-content: center; gap: .35rem; }
.pk-front__kicker { position: absolute; top: 8%; font-size: .55rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.pk-front__mono { display: grid; place-items: center; width: 52%; aspect-ratio: 1; border: 5px solid currentColor; border-radius: 50%; font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); font-size: 1.8rem; }
.pk-front__name { max-width: 88%; font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); letter-spacing: var(--vls); text-transform: var(--vtt); font-size: 1.05rem; line-height: 1; text-align: center; overflow-wrap: anywhere; }
.pk-front__band { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: radial-gradient(circle at 50% 50%, var(--b3) 18%, transparent 20%) 0 0 / 14px 14px, var(--b2); transition: background-color 600ms; }
.pk-hinge--top { left: 0; bottom: 100%; width: var(--w); height: var(--d); transform-origin: 50% 100%; transform: rotateX(calc(var(--fold) * 90deg)); }
.pk-hinge--bottom { left: 0; top: 100%; width: var(--w); height: var(--d); transform-origin: 50% 0; transform: rotateX(calc(var(--fold) * -90deg)); }
.pk-hinge--left { right: 100%; top: 0; width: var(--d); height: var(--h); transform-origin: 100% 50%; transform: rotateY(calc(var(--fold) * -90deg)); }
.pk-hinge--right { left: 100%; top: 0; width: var(--d); height: var(--h); transform-origin: 0 50%; transform: rotateY(calc(var(--fold) * 90deg)); }
.pk-hinge--back { left: 100%; top: 0; width: var(--w); height: var(--h); transform-origin: 0 50%; transform: rotateY(calc(var(--fold) * 90deg)); }
.pk-hinge--tuck { left: 6%; right: 6%; bottom: 100%; height: calc(var(--d) * .78); transform-origin: 50% 100%; transform: rotateX(calc(var(--fold) * 88deg)); }
.pk-hinge--tuck2 { left: 6%; right: 6%; top: 100%; height: calc(var(--d) * .78); transform-origin: 50% 0; transform: rotateX(calc(var(--fold) * -88deg)); }
.pk-tuck { border-radius: 40% 40% 0 0 / 60% 60% 0 0; filter: brightness(.94); }
.pk-hinge--tuck2 .pk-tuck { border-radius: 0 0 40% 40% / 0 0 60% 60%; }
/* Luz: lados y fondo más oscuros, tapa más clara */
.pk-side::after, .pk-bottom::after, .pk-top::after, .pk-back::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity 600ms; }
.pk-side::after { background: rgba(0, 0, 0, .24); }
.pk-bottom::after, .pk-back::after { background: rgba(0, 0, 0, .26); }
.pk-top::after { background: rgba(255, 255, 255, .14); }
.pk-scene.is-flat .pk-face::after { opacity: 0; }
.pk-side { display: grid; place-items: center; background: var(--b1); }
.pk-left b { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); text-transform: var(--vtt); font-size: .9rem; white-space: nowrap; }
.pk-barcode { width: 46%; height: 22%; background: repeating-linear-gradient(90deg, var(--b3) 0 2px, transparent 2px 4px, var(--b3) 4px 5px, transparent 5px 8px); }
.pk-dots { position: absolute; inset: 14%; background: radial-gradient(circle, var(--b3) 22%, transparent 24%) 0 0 / 16px 16px; opacity: .55; }
.pk-back { display: flex; flex-direction: column; gap: .45rem; padding: 14% 12%; background: var(--b3); color: var(--b2); }
.pk-back__h { font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pk-back i { display: block; height: 5px; border-radius: 3px; background: currentColor; opacity: .2; }
.pk-back i:nth-of-type(2n) { width: 72%; }
.pk-back__mono { margin-top: auto; align-self: flex-end; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--b1); color: var(--b3); font-family: var(--vf); font-weight: var(--vw); font-size: .8rem; }
/* Troquel: líneas de pliegue al desplegar; orden de despliegue (y el inverso al plegar) */
.pk-scene.is-flat .pk-face { outline-color: rgba(246, 241, 234, .75); }
.pk-hinge--top, .pk-hinge--bottom { transition-delay: 0ms; }
.pk-hinge--left, .pk-hinge--right { transition-delay: 160ms; }
.pk-hinge--back { transition-delay: 320ms; }
.pk-hinge--tuck, .pk-hinge--tuck2 { transition-delay: 0ms; }
.pk-scene.is-flat .pk-hinge--back, .pk-scene.is-flat .pk-hinge--tuck, .pk-scene.is-flat .pk-hinge--tuck2 { transition-delay: 0ms; }
.pk-scene.is-flat .pk-hinge--left, .pk-scene.is-flat .pk-hinge--right { transition-delay: 180ms; }
.pk-scene.is-flat .pk-hinge--top, .pk-scene.is-flat .pk-hinge--bottom { transition-delay: 340ms; }
.pk-ctrl { display: flex; align-items: center; gap: .75rem; }

/* ---------- Arma tu proyecto ---------- */
.sv-build { padding-block: var(--section-space); }
.sv-build__grid { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .sv-build__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gutter); align-items: start; } }
.sv-q { margin: 2.25rem 0 0; padding: 0; border: 0; }
.sv-q legend, .sv-q--text { display: block; margin-bottom: .8rem; font-weight: 600; font-size: 1.0625rem; }
.sv-q small { font-weight: 400; color: var(--muted); }
.sv-q__opts { display: flex; flex-wrap: wrap; gap: .6rem; }
.sv-opt { position: relative; cursor: pointer; }
.sv-opt span {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 3rem; padding: 0 1.2rem;
  border: 2px solid var(--ink); border-radius: 999px; font-weight: 600;
  transition: background-color 250ms, color 250ms, transform 300ms var(--ease-spring);
}
.sv-opt svg { width: 1.45rem; height: 1.45rem; overflow: visible; }
.sv-opt circle { fill: none; stroke: currentColor; stroke-width: 10; }
.sv-opt ellipse { fill: currentColor; transform: scaleY(0); transform-box: fill-box; transform-origin: center; transition: transform 300ms var(--ease-spring); }
.sv-opt input:checked + span { background: var(--orange); }
.sv-opt input:checked + span ellipse { transform: scaleY(1); }
.sv-opt--text input:checked + span { background: var(--ink); color: var(--cream); }
.sv-opt:active span { transform: scale(.96); }
.sv-q--text textarea { display: block; width: 100%; margin-top: .6rem; padding: .85rem 1rem; border: 2px solid var(--ink); border-radius: 1rem; background: var(--white); color: var(--ink); font: inherit; font-weight: 400; resize: vertical; }
.sv-q--text textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.brief { position: relative; }
@media (min-width: 1000px) { .brief { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.brief__pose { position: relative; z-index: 1; display: block; width: 7.5rem; height: auto; margin: 0 0 -1.4rem 1.25rem; transform-origin: 50% 100%; }
.brief__card { position: relative; padding: 1.75rem 1.5rem 1.6rem; background: var(--white); border: 2px solid var(--ink); border-radius: 1.4rem; box-shadow: 0 26px 50px -26px rgba(18, 21, 29, .4); }
.brief__kicker { font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); }
.brief__name { margin-top: .25rem; padding-right: 5rem; font-family: var(--vf); font-weight: var(--vw); font-stretch: var(--vs); letter-spacing: var(--vls); text-transform: var(--vtt); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1; overflow-wrap: anywhere; }
.brief__body { margin-top: 1.25rem; padding-top: 1rem; border-top: 2px dashed var(--line); }
.brief__empty { color: var(--muted); }
.brief__list { display: grid; gap: .75rem; }
.brief__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .65rem; align-items: start; animation: sv-in 420ms var(--ease-out) both; }
.brief__list svg { grid-row: span 2; width: 1.3rem; height: 1.3rem; margin-top: .1rem; color: var(--orange); }
.brief__list b { font-weight: 600; }
.brief__list small { color: var(--muted); font-size: .875rem; }
.brief__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1rem; margin-top: 1rem; font-size: .9375rem; }
.brief__meta dt { color: var(--muted); }
.brief__meta dd { font-weight: 600; overflow-wrap: anywhere; }
.brief__price { margin-top: 1rem; padding-top: 1rem; border-top: 2px dashed var(--line); font-weight: 600; }
.brief__price:empty { display: none; }
.brief__price .is-pending { font-weight: 400; }
.brief__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.brief__actions .btn[disabled] { opacity: .4; cursor: not-allowed; }
.brief__copied { min-height: 1.4em; margin-top: .6rem; font-size: .875rem; font-weight: 600; color: var(--orange-ink); }
.brief__stamp {
  position: absolute; right: 1rem; top: 1rem;
  display: grid; place-items: center; width: 5.25rem; height: 5.25rem;
  border: 3px solid var(--orange); border-radius: 50%; color: var(--orange-ink);
  font-family: var(--font-display); font-weight: 800; font-size: .72rem; line-height: 1.05; letter-spacing: .04em; text-align: center; text-transform: uppercase;
  opacity: 0; transform: rotate(-30deg) scale(1.6); transition: opacity 250ms, transform 550ms var(--ease-spring);
}
.brief.is-ready .brief__stamp { opacity: .9; transform: rotate(12deg) scale(1); }
@keyframes sv-in { from { opacity: 0; transform: translateY(.5rem); } }

/* Punto que vuela al riel al añadir un servicio */
.sv-fly { position: fixed; z-index: 60; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--orange); border: 2px solid var(--ink); pointer-events: none; }

/* ---------- Movimiento ligado al scroll (mejora progresiva) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Cada ejemplo se abre como un lente al entrar */
    .sv-stage { animation: sv-lens linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
    @keyframes sv-lens { from { clip-path: circle(0% at 50% 45%); } to { clip-path: circle(150% at 50% 45%); } }
    /* El número gigante se desliza en sentido contrario */
    .sv-ch::before { animation: sv-ghost linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes sv-ghost { from { translate: 0 -12%; } to { translate: 0 18%; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb__sticker svg { animation: none; }
}