/* Puerto Color · "Pintamos el oriente": una brocha pinta cada capítulo al hacer scroll */
.cs-puerto-color { --pcn: #131245; --pco: #EE6123; --pcf: #F3F4F9; --pcw: #fff; position: relative; font-family: var(--f); color: var(--pcn); }
.cs-puerto-color *, .cs-puerto-color *::before, .cs-puerto-color *::after { box-sizing: border-box; }
.cs-puerto-color img { display: block; max-width: 100%; }
.cs-puerto-color ul, .cs-puerto-color ol { list-style: none; margin: 0; padding: 0; }
.cs-puerto-color p, .cs-puerto-color h2, .cs-puerto-color h3, .cs-puerto-color figure { margin: 0; }

.cs-puerto-color .pc__stage { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--pcf); }
.cs-puerto-color .pc__panel { position: absolute; inset: 0; overflow: hidden; }
.cs-puerto-color .pc__panel[data-i="0"] { z-index: 1; }
.cs-puerto-color .pc__panel[data-i="1"] { z-index: 2; }
.cs-puerto-color .pc__panel[data-i="2"] { z-index: 3; }
.cs-puerto-color .pc__panel[data-i="3"] { z-index: 4; }
.cs-puerto-color .pc__panel[data-i="4"] { z-index: 5; }
.cs-puerto-color .pc__panel--intro { background: var(--pcf); }
.cs-puerto-color .pc__panel--logo { background: var(--pcn); color: var(--pcw); }
.cs-puerto-color .pc__panel--stores { background: var(--pco); color: var(--pcn); }
.cs-puerto-color .pc__panel--social { background: var(--pcf); }
.cs-puerto-color .pc__panel--street { background: var(--pcn); color: var(--pcw); }
.cs-puerto-color .pc__in { position: relative; height: 100%; padding: clamp(96px, 13vh, 132px) var(--gutter) clamp(72px, 10vh, 100px); max-width: 1600px; margin: 0 auto; }

/* tipografía común */
.cs-puerto-color .pc__eyebrow, .cs-puerto-color .pc__label, .cs-puerto-color .pc__cue, .cs-puerto-color .pc__steps { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.cs-puerto-color .pc__label { color: var(--pco); margin-bottom: 18px; }
.cs-puerto-color .pc__panel--stores .pc__label { color: var(--pcn); opacity: .7; }
.cs-puerto-color .pc__h { font-size: clamp(30px, 3.3vw, 52px); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; font-stretch: 92%; }
.cs-puerto-color .pc__p { margin-top: 18px; font-size: clamp(15px, 1.12vw, 18px); line-height: 1.55; max-width: 40ch; opacity: .82; }

/* brocha (isotipo de la marca) */
.cs-puerto-color .pc-b { fill: var(--paint, var(--pco)); }
.cs-puerto-color .pc-h { fill: var(--handle, var(--pcn)); }

/* ── 0 · intro ── */
.cs-puerto-color .pc-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4vw; }
.cs-puerto-color .pc__eyebrow { color: var(--pcn); opacity: .6; margin-bottom: 28px; }
.cs-puerto-color .pc-intro__h { font-size: clamp(56px, 8.4vw, 148px); line-height: .9; letter-spacing: -.05em; font-weight: 800; font-stretch: 88%; }
.cs-puerto-color .pc-intro__h span { display: block; color: var(--pco); }
.cs-puerto-color .pc-intro__p { margin-top: 30px; font-size: clamp(17px, 1.35vw, 22px); line-height: 1.45; max-width: 34ch; }
.cs-puerto-color .pc__cue { display: flex; align-items: center; gap: 12px; margin-top: 46px; opacity: .6; }
.cs-puerto-color .pc__cue i { width: 34px; height: 1px; background: currentColor; }
.cs-puerto-color .pc-intro__art { position: relative; height: 60vh; }
.cs-puerto-color .pc-intro__stroke { position: absolute; left: 0; top: 34%; width: 82%; height: 28%; transform: rotate(-8deg); transform-origin: 0 50%; }
.cs-puerto-color .pc-intro__brush { --paint: var(--pco); --handle: var(--pcn); position: absolute; width: 38%; left: 70%; top: 18%; transform: rotate(-22deg); filter: drop-shadow(0 18px 24px rgba(19,18,69,.18)); }

/* ── 1 · logo ── */
.cs-puerto-color .pc-logo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 6vw; }
.cs-puerto-color .pc-logo__lock { position: relative; }
.cs-puerto-color .pc-logo__wipe { position: relative; }
.cs-puerto-color .pc-logo__img { width: 100%; height: auto; }
.cs-puerto-color .pc-logo__brush { --paint: var(--pcw); --handle: var(--pco); position: absolute; width: 26%; top: 18%; left: 100%; transform: translateX(-28%) scaleX(-1); opacity: 0; pointer-events: none; }
.cs-puerto-color .pc-logo__tag { position: relative; width: 74%; margin: -3% 0 0 18%; aspect-ratio: 1000 / 190; display: grid; place-items: center; }
.cs-puerto-color .pc-logo__tag img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-puerto-color .pc-logo__tag span { position: relative; color: var(--pcn); font-weight: 700; font-style: italic; font-size: clamp(18px, 2.2vw, 36px); letter-spacing: -.01em; }
/* abanico de cartas de color, como en el mostrador de pinturas */
.cs-puerto-color .pc-fan { position: relative; height: clamp(200px, 30vh, 270px); margin-top: 30px; max-width: 400px; }
.cs-puerto-color .pc-fan__chip { position: absolute; left: 50%; bottom: 0; width: 36%; height: 100%; margin-left: -18%; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #fff; color: var(--pcn); transform-origin: 50% 90%; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 18px 30px -12px rgba(0,0,0,.55); }
.cs-puerto-color .pc-fan__chip:nth-child(1) { transform: rotate(-24deg); }
.cs-puerto-color .pc-fan__chip:nth-child(2) { transform: rotate(0deg); z-index: 2; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 30px -12px rgba(0,0,0,.55); }
.cs-puerto-color .pc-fan__chip:nth-child(3) { transform: rotate(24deg); z-index: 3; }
.cs-puerto-color .pc-fan__col { flex: 1; background: var(--c); background-image: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%, rgba(0,0,0,.08)); box-shadow: inset 0 0 0 1px rgba(19,18,69,.08); }
.cs-puerto-color .pc-fan__lab { display: grid; gap: 2px; padding: 9px 10px 30px; font-size: 12px; line-height: 1.2; }
.cs-puerto-color .pc-fan__lab code { font-family: var(--mono); font-size: 11px; opacity: .75; }
.cs-puerto-color .pc-fan__lab small { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--pco); margin-top: 2px; }
.cs-puerto-color .pc-fan__rivet { position: absolute; z-index: 5; left: 50%; bottom: 3.5%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #b9bac6 45%, #6c6d7a); box-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* ── 2 · tiendas ── */
.cs-puerto-color .pc-st { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 5vw; }
.cs-puerto-color .pc-st__count { display: flex; align-items: baseline; gap: .12em; font-weight: 800; font-stretch: 85%; line-height: .8; letter-spacing: -.05em; }
.cs-puerto-color .pc-st__from { font-size: clamp(60px, 7vw, 120px); opacity: .45; }
.cs-puerto-color .pc-st__arrow { font-size: clamp(40px, 4.4vw, 76px); opacity: .45; transform: translateY(-.1em); }
.cs-puerto-color .pc-st__num { font-size: clamp(150px, 19vw, 300px); color: var(--pcw); text-shadow: 0 .04em 0 rgba(19,18,69,.12); }
.cs-puerto-color .pc-st__unit { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 14px 0 30px; }
.cs-puerto-color .pc-st__marks { display: flex; gap: clamp(10px, 1.2vw, 20px); margin-top: 34px; }
.cs-puerto-color .pc-mk { display: grid; justify-items: center; gap: 8px; }
.cs-puerto-color .pc-mk__pin { width: clamp(44px, 3.8vw, 60px); aspect-ratio: 1; border-radius: 50% 50% 50% 6px; transform: rotate(-45deg); display: grid; place-items: center; background: var(--pcn); color: var(--pco); box-shadow: 0 10px 22px rgba(19,18,69,.25); transition: none; }
.cs-puerto-color .pc-mk__pin svg { width: 52%; transform: rotate(45deg); }
.cs-puerto-color .pc-mk__n { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.cs-puerto-color .pc-mk.is-off .pc-mk__pin { background: transparent; color: rgba(19,18,69,.45); box-shadow: inset 0 0 0 2px rgba(19,18,69,.35); }
.cs-puerto-color .pc-mk.is-off .pc-mk__n { opacity: .45; }
.cs-puerto-color .pc-st__photo { position: relative; height: min(66vh, 620px); -webkit-mask: url(img/stroke.svg) center / 100% 100% no-repeat; mask: url(img/stroke.svg) center / 100% 100% no-repeat; transform: rotate(-6deg); }
.cs-puerto-color .pc-st__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

/* ── 3 · redes y anuncios ── */
.cs-puerto-color .pc-so { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; gap: 4vw; }
.cs-puerto-color .pc-so__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; max-width: 420px; }
.cs-puerto-color .pc-so__chips li { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--pcw); box-shadow: inset 0 0 0 1px rgba(19,18,69,.12); }
.cs-puerto-color .pc-so__chips li:nth-child(n+5) { background: var(--pco); color: var(--pcw); box-shadow: none; }
.cs-puerto-color .pc-so__art { position: relative; height: min(72vh, 660px); }

/* dispositivos: aluminio oscuro, botones, isla, reflejo y sombras en capas */
.cs-puerto-color .pc-dev { position: absolute; background: linear-gradient(135deg, #6a6b76 0%, #24242c 14%, #0d0d12 48%, #1e1e26 84%, #70717c 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 0 3.5px #08080b, 0 1px 2px rgba(0,0,0,.3), 0 22px 36px -18px rgba(10,10,40,.5), 0 70px 100px -40px rgba(19,18,69,.55); }
.cs-puerto-color .pc-dev::after { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -22px; height: 34px; background: radial-gradient(closest-side, rgba(10,10,40,.38), transparent); filter: blur(5px); }
.cs-puerto-color .pc-dev__btn { position: absolute; left: -2.5px; width: 3.5px; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, #2a2a33, #74757f); }
.cs-puerto-color .pc-dev__btn--1 { top: 17%; height: 4.5%; }
.cs-puerto-color .pc-dev__btn--2 { top: 24%; height: 8%; }
.cs-puerto-color .pc-dev__btn--3 { left: auto; right: -2.5px; top: 22%; height: 12%; border-radius: 0 2px 2px 0; background: linear-gradient(270deg, #2a2a33, #74757f); }
.cs-puerto-color .pc-phone { top: 0; height: 100%; aspect-ratio: 9 / 19.5; padding: 10px; border-radius: 50px; }
.cs-puerto-color .pc-phone__scr { position: relative; height: 100%; border-radius: 40px; overflow: hidden; background: #fff; color: #111; box-shadow: 0 0 0 1px #000; isolation: isolate; }
.cs-puerto-color .pc-island { position: absolute; z-index: 7; top: 10px; left: 50%; width: 32%; height: 25px; transform: translateX(-50%); border-radius: 16px; background: #000; }
.cs-puerto-color .pc-sb { position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 30px; font-size: 13px; letter-spacing: -.01em; }
.cs-puerto-color .pc-sb__ic { display: flex; gap: 5px; align-items: center; }
.cs-puerto-color .pc-sb__ic svg { height: 10px; width: auto; fill: currentColor; }
.cs-puerto-color .pc-glare { position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.1) 20%, rgba(255,255,255,0) 34%), linear-gradient(115deg, rgba(255,255,255,0) 72%, rgba(255,255,255,.07) 84%, rgba(255,255,255,0) 92%); }
.cs-puerto-color .pc-phone--ig { left: 5%; z-index: 2; }
.cs-puerto-color .pc-phone--reel { left: 43%; top: 6%; height: 90%; z-index: 1; }

/* instagram */
.cs-puerto-color .pc-ig__nav { display: flex; justify-content: space-between; align-items: center; padding: 50px 16px 6px; font-size: 15px; }
.cs-puerto-color .pc-ig__top { display: flex; align-items: center; gap: 12px; padding: 6px 14px 8px; }
.cs-puerto-color .pc-ig__ring { flex: none; padding: 2.5px; border-radius: 50%; background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.cs-puerto-color .pc-ig__ring .pc-ig__av { width: 56px; height: 56px; box-shadow: 0 0 0 2.5px #fff; }
.cs-puerto-color .pc-ig__av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pcn); display: grid; place-items: center; }
.cs-puerto-color .pc-ig__avb { --paint: var(--pco); --handle: #fff; width: 72%; }
.cs-puerto-color .pc-ig__meta { display: grid; line-height: 1.3; min-width: 0; font-size: 11.5px; }
.cs-puerto-color .pc-ig__meta b { font-size: 13px; }
.cs-puerto-color .pc-ig__meta span:nth-of-type(1) { color: #737373; }
.cs-puerto-color .pc-ig__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 2px 14px 10px; }
.cs-puerto-color .pc-ig__acts span { display: grid; place-items: center; height: 28px; border-radius: 8px; background: #efefef; font-size: 11.5px; font-weight: 600; }
.cs-puerto-color .pc-ig__acts .is-blue { background: #0095f6; color: #fff; }
.cs-puerto-color .pc-ig__hl { display: flex; gap: 12px; padding: 2px 14px 10px; }
.cs-puerto-color .pc-ig__hl li { display: grid; justify-items: center; gap: 4px; font-size: 9.5px; color: #262626; }
.cs-puerto-color .pc-ig__hl span { width: 46px; height: 46px; padding: 2.5px; border-radius: 50%; box-shadow: inset 0 0 0 1px #dbdbdb; }
.cs-puerto-color .pc-ig__hl img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cs-puerto-color .pc-ig__tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #efefef; }
.cs-puerto-color .pc-ig__tabs i { height: 32px; position: relative; }
.cs-puerto-color .pc-ig__tabs i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); border: 1.6px solid #a8a8a8; border-radius: 3px; }
.cs-puerto-color .pc-ig__tabs i:first-child { box-shadow: inset 0 -1.5px 0 #111; }
.cs-puerto-color .pc-ig__tabs i:first-child::after { border-color: #111; }
.cs-puerto-color .pc-ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; }
.cs-puerto-color .pc-ig__grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cs-puerto-color .pc-ig__bot { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 58px; padding: 8px 20px 22px; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.96); border-top: 1px solid #efefef; }
.cs-puerto-color .pc-ig__bot svg { width: 22px; height: 22px; }
.cs-puerto-color .pc-ig__bot::after, .cs-puerto-color .pc-reel__foot::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 36%; height: 4px; border-radius: 3px; background: #111; transform: translateX(-50%); }
.cs-puerto-color .pc-ig__me .pc-ig__av { width: 24px; height: 24px; box-shadow: 0 0 0 1.5px #111; }

/* reel patrocinado */
.cs-puerto-color .pc-phone--reel .pc-phone__scr { background: #000; color: #fff; }
.cs-puerto-color .pc-reel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-puerto-color .pc-phone--reel .pc-phone__scr::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(rgba(0,0,0,.42), transparent 18%, transparent 52%, rgba(0,0,0,.75)); }
.cs-puerto-color .pc-reel__head { position: absolute; z-index: 3; top: 50px; left: 16px; font-size: 18px; }
.cs-puerto-color .pc-reel__side { position: absolute; z-index: 3; right: 12px; bottom: 150px; display: grid; justify-items: center; gap: 20px; }
.cs-puerto-color .pc-reel__side svg { width: 25px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.cs-puerto-color .pc-reel__disc { width: 26px; height: 26px; border-radius: 7px; background: var(--pcn); display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.cs-puerto-color .pc-reel__foot { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 26px; }
.cs-puerto-color .pc-reel__foot::after { bottom: -19px; background: #fff; }
.cs-puerto-color .pc-reel__who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.cs-puerto-color .pc-reel__who .pc-ig__av { width: 28px; height: 28px; box-shadow: 0 0 0 1.5px #fff; }
.cs-puerto-color .pc-reel__who em { font-style: normal; opacity: .8; font-size: 11px; }
.cs-puerto-color .pc-reel__cap { margin-top: 8px; font-size: 12px; opacity: .95; }
.cs-puerto-color .pc-reel__cta { display: flex; justify-content: space-between; margin-top: 10px; padding: 10px 12px; border-radius: 9px; background: var(--pco); font-size: 12px; font-weight: 700; }
.cs-puerto-color .pc-reel__cta i { font-style: normal; }

/* tablet con anuncio de youtube */
.cs-puerto-color .pc-tab { z-index: 3; left: -7%; bottom: -3%; width: 45%; aspect-ratio: 4 / 3; padding: 11px; border-radius: 26px; }
.cs-puerto-color .pc-tab__scr { position: relative; height: 100%; border-radius: 15px; overflow: hidden; background: #0f0f0f; color: #f1f1f1; box-shadow: 0 0 0 1px #000; }
.cs-puerto-color .pc-tab__cam { position: absolute; left: 4px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #2c2d36; }
.cs-puerto-color .pc-yt__v { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.cs-puerto-color .pc-yt__v img { width: 100%; height: 100%; object-fit: cover; }
.cs-puerto-color .pc-yt__ad { position: absolute; left: 8px; bottom: 12px; padding: 3px 6px; border-radius: 4px; background: #f7c600; color: #111; font-size: 9.5px; font-weight: 700; }
.cs-puerto-color .pc-yt__skip { position: absolute; right: 0; bottom: 12px; display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: rgba(0,0,0,.75); color: #fff; font-size: 10.5px; border: 1px solid rgba(255,255,255,.25); border-right: 0; }
.cs-puerto-color .pc-yt__skip svg { width: 11px; }
.cs-puerto-color .pc-yt__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 38%; background: #f7c600; }
.cs-puerto-color .pc-yt__info { padding: 8px 12px; }
.cs-puerto-color .pc-yt__info > b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-puerto-color .pc-yt__row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: #aaa; }
.cs-puerto-color .pc-yt__row .pc-ig__av { width: 22px; height: 22px; }
.cs-puerto-color .pc-yt__go { margin-left: auto; padding: 5px 11px; border-radius: 999px; background: #f1f1f1; color: #0f0f0f; font-size: 10.5px; font-weight: 700; }

/* ── 4 · calle y web ── */
.cs-puerto-color .pc-sr__copy { position: absolute; right: var(--gutter); top: clamp(110px, 15vh, 150px); width: min(36vw, 520px); }
.cs-puerto-color .pc-sr__copy .pc__p { max-width: 44ch; }
.cs-puerto-color .pc-bb { position: absolute; left: calc(var(--gutter) + 1vw); top: clamp(120px, 17vh, 170px); width: min(50vw, 780px); aspect-ratio: 2.55 / 1; perspective: 1500px; }
.cs-puerto-color .pc-bb__halo { position: absolute; inset: -40% -20% -60%; background: radial-gradient(closest-side, rgba(255,232,190,.13), rgba(255,232,190,0)); pointer-events: none; }
.cs-puerto-color .pc-bb__rig { position: absolute; inset: 0; transform: rotateY(12deg) rotateX(1deg); transform-origin: 0 50%; transform-style: preserve-3d; }
.cs-puerto-color .pc-bb__frame { position: absolute; inset: 0; z-index: 1; padding: 9px; border-radius: 3px; background: linear-gradient(180deg, #4a4b66, #23233f 30%, #1a1a33); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 0 rgba(255,255,255,.06), 0 50px 80px -30px rgba(0,0,0,.75); }
.cs-puerto-color .pc-bb__board { position: relative; height: 100%; overflow: hidden; background: radial-gradient(120% 140% at 50% -20%, #1f1d66, var(--pcn) 60%); }
.cs-puerto-color .pc-bb__board::before { content: ""; position: absolute; inset: 0; z-index: 3; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(0,0,0,.22) calc(25% - 1px) 25%); pointer-events: none; }
.cs-puerto-color .pc-bb__light { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(42% 80% at 18% -12%, rgba(255,240,205,.34), rgba(255,240,205,0) 70%), radial-gradient(42% 80% at 50% -12%, rgba(255,240,205,.3), rgba(255,240,205,0) 70%), radial-gradient(42% 80% at 82% -12%, rgba(255,240,205,.34), rgba(255,240,205,0) 70%), linear-gradient(rgba(0,0,0,0) 45%, rgba(4,4,28,.42)); mix-blend-mode: overlay; }
.cs-puerto-color .pc-bb__stroke { position: absolute; left: -8%; top: 47%; width: 74%; height: 50%; transform: rotate(-5deg); }
.cs-puerto-color .pc-bb__logo { position: absolute; left: 5%; top: 9%; width: 29%; height: auto; }
.cs-puerto-color .pc-bb__h { position: absolute; left: 5%; bottom: 13%; font-size: clamp(22px, 2.4vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; }
.cs-puerto-color .pc-bb__h span { display: block; margin-top: 8px; font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--pcn); }
.cs-puerto-color .pc-bb__lamps { position: absolute; z-index: 5; left: 0; right: 0; bottom: 100%; height: 30px; display: flex; justify-content: space-between; padding: 0 16%; pointer-events: none; }
.cs-puerto-color .pc-bb__lamps i { position: relative; width: 3px; height: 100%; background: linear-gradient(90deg, #22223c, #4a4b66); }
.cs-puerto-color .pc-bb__lamps i::before { content: ""; position: absolute; top: -4px; left: -16px; width: 34px; height: 10px; border-radius: 3px 3px 6px 6px; background: linear-gradient(#5a5b74, #26263f); box-shadow: 0 6px 10px rgba(255,236,190,.35); }
.cs-puerto-color .pc-bb__lamps i::after { content: ""; position: absolute; top: 6px; left: 50%; width: 300px; height: 300px; transform: translateX(-50%); background: radial-gradient(ellipse 50% 70% at 50% 0, rgba(255,240,205,.2), rgba(255,240,205,0) 70%); mix-blend-mode: screen; }
.cs-puerto-color .pc-bb__walk { position: absolute; z-index: 0; left: 4%; right: 4%; top: 100%; height: 14px; background: repeating-linear-gradient(90deg, #34345a 0 2px, #1b1b34 2px 8px); box-shadow: 0 -2px 0 #2c2c4d, 0 12px 20px -6px rgba(0,0,0,.6); }
.cs-puerto-color .pc-bb__walk::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; border-top: 2px solid #3a3a5e; background: repeating-linear-gradient(90deg, #3a3a5e 0 2px, transparent 2px 40px); opacity: .8; }
.cs-puerto-color .pc-bb__pole { position: absolute; z-index: -1; left: 44%; top: calc(100% + 14px); width: 30px; height: 36vh; background: linear-gradient(90deg, #121229, #3c3c60 45%, #17172f); -webkit-mask: linear-gradient(#000 30%, transparent); mask: linear-gradient(#000 30%, transparent); }
.cs-puerto-color .pc-bb__sham { position: absolute; z-index: 6; right: 22%; bottom: 7%; height: 100%; width: auto; transform: translateZ(40px); filter: drop-shadow(0 22px 26px rgba(0,0,0,.45)); }
.cs-puerto-color .pc-bb__drill { position: absolute; z-index: 6; right: 1%; bottom: 10%; height: 68%; width: auto; transform: translateZ(50px) rotate(-8deg); filter: drop-shadow(0 22px 26px rgba(0,0,0,.45)); }

/* portátil con la web */
.cs-puerto-color .pc-lap { position: absolute; z-index: 3; right: calc(var(--gutter) + 3vw); bottom: clamp(60px, 9vh, 96px); width: min(40vw, 620px); }
.cs-puerto-color .pc-lap__lid { position: relative; padding: 2.4% 2.4% 3.4%; border-radius: 18px 18px 6px 6px; background: #0a0a0e; box-shadow: inset 0 0 0 1.5px #34353f, 0 0 0 1.5px #8f909c, 0 0 0 2.5px #4b4c56; }
.cs-puerto-color .pc-lap__notch { position: absolute; top: 1%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #1e1f26; box-shadow: inset 0 0 0 1.5px #2a2b35; }
.cs-puerto-color .pc-lap__scr { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: var(--pcf); color: var(--pcn); }
.cs-puerto-color .pc-lap__base { position: relative; height: 15px; margin: 0 -9%; border-radius: 2px 2px 20px 20px / 2px 2px 14px 14px; background: linear-gradient(#e2e3e9, #a7a8b2 45%, #6d6e78); box-shadow: 0 30px 36px -16px rgba(0,0,0,.75), 0 4px 6px -2px rgba(0,0,0,.4); }
.cs-puerto-color .pc-lap__base i { position: absolute; top: 0; left: 50%; width: 15%; height: 5px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: linear-gradient(#8a8b96, #bfc0c9); }
.cs-puerto-color .pc-web__bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: linear-gradient(#ececf1, #e1e2ea); border-bottom: 1px solid #d3d4de; }
.cs-puerto-color .pc-web__bar > i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.cs-puerto-color .pc-web__bar > i:nth-child(2) { background: #febc2e; }
.cs-puerto-color .pc-web__bar > i:nth-child(3) { background: #28c840; }
.cs-puerto-color .pc-web__bar span { display: flex; align-items: center; justify-content: center; gap: 5px; width: 52%; margin: 0 auto; padding: 3px 10px; border-radius: 6px; background: #fff; font-size: 10px; color: #444; white-space: nowrap; overflow: hidden; }
.cs-puerto-color .pc-web__bar svg { width: 8px; color: #888; flex: none; }
.cs-puerto-color .pc-web__head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--pcn); }
.cs-puerto-color .pc-web__head img { width: 54px; height: auto; }
.cs-puerto-color .pc-web__q { flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 7px; background: #fff; font-size: 10px; color: #6b6a86; white-space: nowrap; overflow: hidden; }
.cs-puerto-color .pc-web__q svg, .cs-puerto-color .pc-web__cart svg { width: 13px; flex: none; }
.cs-puerto-color .pc-web__cart { color: #fff; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.cs-puerto-color .pc-web__nav { display: flex; gap: 14px; padding: 2px 14px 8px; background: var(--pcn); color: #fff; font-size: 10px; }
.cs-puerto-color .pc-web__nav span:first-child { color: var(--pco); }
.cs-puerto-color .pc-web__hero { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 100%; align-items: center; margin: 10px 12px 0; padding: 6px 8px 6px 18px; height: 35%; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 1px 0 rgba(19,18,69,.06); }
.cs-puerto-color .pc-web__k { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--pco); }
.cs-puerto-color .pc-web__h { margin-top: 6px; font-size: clamp(14px, 1.4vw, 22px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.cs-puerto-color .pc-web__b { display: inline-block; margin-top: 10px; padding: 6px 10px; border-radius: 7px; background: var(--pco); color: #fff; font-size: 9.5px; font-weight: 700; }
.cs-puerto-color .pc-web__hero img { height: 100%; width: 100%; object-fit: contain; }
.cs-puerto-color .pc-web__prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 12px; }
.cs-puerto-color .pc-web__prods li { display: grid; padding: 6px 8px 7px; border-radius: 9px; background: #fff; font-size: 9px; line-height: 1.25; }
.cs-puerto-color .pc-web__prods img { height: 34px; width: 100%; object-fit: contain; margin-bottom: 4px; }
.cs-puerto-color .pc-web__prods small { font-family: var(--mono); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; color: var(--pco); }
.cs-puerto-color .pc-web__prods span { margin-top: 5px; padding: 3px 0; border-radius: 5px; background: var(--pcn); color: #fff; text-align: center; font-size: 8px; font-weight: 700; }

/* pintura fresca: vetas de cerdas que se secan al terminar la pasada */
.cs-puerto-color .pc__wet { position: absolute; inset: 0; z-index: 15; pointer-events: none; background: url(img/wet.svg) center / 100% 100% no-repeat; opacity: 0; mix-blend-mode: soft-light; }

/* pinceles de transición */
.cs-puerto-color .pc__brush { position: absolute; z-index: 20; top: 0; left: 0; width: 36vh; height: auto; opacity: 0; pointer-events: none; will-change: transform; filter: drop-shadow(0 14px 22px rgba(10,10,40,.28)); }

/* índice de capítulos */
.cs-puerto-color .pc__steps { position: absolute; z-index: 21; left: var(--gutter); right: var(--gutter); bottom: 26px; display: flex; gap: 26px; pointer-events: none; transition: color .4s; color: var(--pcn); }
.cs-puerto-color .pc__stage[data-theme="dark"] .pc__steps { color: #fff; }
.cs-puerto-color .pc__steps li { display: flex; gap: 8px; opacity: .38; transition: opacity .4s; }
.cs-puerto-color .pc__steps li b { font-weight: 500; color: inherit; }
.cs-puerto-color .pc__steps li.is-on { opacity: 1; }

/* ── móvil y tablet: capítulos apilados, sin pin ── */
@media (max-width: 899px) {
  .cs-puerto-color .pc__stage { height: auto; min-height: 0; }
  .cs-puerto-color .pc__panel { position: relative; inset: auto; }
  .cs-puerto-color .pc__in { height: auto; padding: 64px var(--gutter); }
  .cs-puerto-color .pc__panel--intro .pc__in { padding-top: 104px; }
  .cs-puerto-color .pc-intro, .cs-puerto-color .pc-logo, .cs-puerto-color .pc-st, .cs-puerto-color .pc-so, .cs-puerto-color .pc-sr { display: block; }
  .cs-puerto-color .pc-intro__art { height: 34vw; margin-top: 30px; }
  .cs-puerto-color .pc-logo__copy, .cs-puerto-color .pc-st__photo, .cs-puerto-color .pc-so__art { margin-top: 40px; }
  .cs-puerto-color .pc-st__photo { height: 70vw; }
  .cs-puerto-color .pc-st__marks { flex-wrap: wrap; }
  .cs-puerto-color .pc-so__art { height: 128vw; max-height: 620px; }
  .cs-puerto-color .pc-phone--ig { left: 0; }
  .cs-puerto-color .pc-phone--reel { left: auto; right: 0; }
  .cs-puerto-color .pc-tab { left: 4%; width: 74%; bottom: -8%; }
  .cs-puerto-color .pc-sr__copy { max-width: none; }
  .cs-puerto-color .pc-bb { position: relative; left: auto; top: auto; width: 100%; margin: 70px 0 0; }
  .cs-puerto-color .pc-bb__drill { display: none; }
  .cs-puerto-color .pc-bb__sham { right: 3%; height: 96%; }
  .cs-puerto-color .pc-bb__h { font-size: clamp(16px, 4.6vw, 30px); }
  .cs-puerto-color .pc-bb__logo { width: 34%; }
  .cs-puerto-color .pc-lap { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 64px; }
  .cs-puerto-color .pc-sr__copy { position: static; width: auto; }
  .cs-puerto-color .pc-bb__rig { transform: none; }
  .cs-puerto-color .pc-bb__pole { height: 60px; }
  .cs-puerto-color .pc-bb__lamps i::after { width: 160px; height: 160px; }
  .cs-puerto-color .pc__brush, .cs-puerto-color .pc__steps, .cs-puerto-color .pc-logo__brush { display: none; }
}
@media (max-width: 560px) {
  .cs-puerto-color .pc-so__art { height: 150vw; }
  .cs-puerto-color .pc-phone { border-radius: 34px; padding: 7px; }
  .cs-puerto-color .pc-phone__scr { border-radius: 28px; }
  .cs-puerto-color .pc-ig__btn { display: none; }
  .cs-puerto-color .pc-web__nav span:nth-child(n+3) { display: none; }
  .cs-puerto-color .pc-web__prods { display: none; }
  .cs-puerto-color .pc-web__hero { height: 62%; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-puerto-color .pc__stage { height: auto; min-height: 0; }
  .cs-puerto-color .pc__panel { position: relative; inset: auto; clip-path: none !important; }
  .cs-puerto-color .pc__in { min-height: 100vh; }
  .cs-puerto-color .pc__brush, .cs-puerto-color .pc__steps, .cs-puerto-color .pc-logo__brush { display: none; }
  .cs-puerto-color .pc-mk.is-off .pc-mk__pin { background: var(--pcn); color: var(--pco); box-shadow: none; }
}

/* ── móvil y tablet con JS: escenario fijo en vertical; las pasadas de brocha son capas que se desplazan ── */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .cs-puerto-color.is-m { --mt: 90px; --mb: 100px; }
  .cs-puerto-color.is-m .pc__stage { height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }
  .cs-puerto-color.is-m .pc__panel { position: absolute; inset: 0; }
  .cs-puerto-color.is-m .pc__in, .cs-puerto-color.is-m .pc__panel--intro .pc__in { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0; padding: var(--mt) var(--gutter) var(--mb); }
  .cs-puerto-color.is-m .pc__h { font-size: clamp(28px, 7.6vw, 40px); }
  .cs-puerto-color.is-m .pc__label { margin-bottom: 12px; }
  .cs-puerto-color.is-m .pc__p { margin-top: 12px; font-size: 15px; line-height: 1.5; }

  /* capa de pintura */
  .cs-puerto-color .pc-mpaint { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
  .cs-puerto-color .pc-mband { position: absolute; left: -12%; width: 124%; height: 44%; will-change: transform; }
  .cs-puerto-color .pc-mband--0 { top: -5%; } .cs-puerto-color .pc-mband--1 { top: 28%; } .cs-puerto-color .pc-mband--2 { top: 61%; }
  .cs-puerto-color .pc-mband__st { position: absolute; inset: 0; background: var(--paint); -webkit-mask: url(img/stroke.svg) center / 100% 100% no-repeat; mask: url(img/stroke.svg) center / 100% 100% no-repeat; }
  .cs-puerto-color .pc-mband--1 .pc-mband__st { transform: scaleX(-1); }
  .cs-puerto-color .pc-mband__brush { position: absolute; top: 50%; width: 46vw; height: auto; filter: drop-shadow(0 12px 18px rgba(10,10,40,.3)); }
  .cs-puerto-color .pc-mband--0 .pc-mband__brush, .cs-puerto-color .pc-mband--2 .pc-mband__brush { left: 100%; transform: translate(-30%, -50%) rotate(-4deg) scaleX(-1); }
  .cs-puerto-color .pc-mband--1 .pc-mband__brush { right: 100%; transform: translate(30%, -50%) rotate(4deg); }
  .cs-puerto-color .pc-mband__brush .pc-b { fill: var(--paint); }
  .cs-puerto-color .pc-mpaint .pc-mband__brush .pc-b { fill: var(--paint, var(--pco)); }
  .cs-puerto-color .pc-mpaint .pc-mband__brush .pc-h { fill: var(--handle, var(--pcn)); }

  /* 0 · intro */
  .cs-puerto-color.is-m .pc__eyebrow { margin-bottom: 18px; }
  .cs-puerto-color.is-m .pc-intro__h { font-size: clamp(54px, 15vw, 96px); }
  .cs-puerto-color.is-m .pc-intro__p { margin-top: 20px; font-size: 17px; }
  .cs-puerto-color.is-m .pc__cue { margin-top: 26px; }
  .cs-puerto-color.is-m .pc-intro__art { height: min(46vw, 26vh); margin-top: 26px; }

  /* 1 · logo */
  .cs-puerto-color.is-m .pc-logo__lock { width: 82%; max-width: 420px; align-self: center; }
  .cs-puerto-color .pc-mcover { position: absolute; inset: -2% -1%; background: var(--pcn); transform-origin: 100% 50%; }
  .cs-puerto-color.is-m .pc-logo__brush { display: block; left: 100%; top: 14%; width: 30%; transform: translateX(-28%) scaleX(-1); }
  .cs-puerto-color.is-m .pc-logo__copy { margin-top: 26px; }
  .cs-puerto-color.is-m .pc-fan { height: min(150px, 19vh); max-width: 300px; margin: 18px auto 0; }

  /* 2 · tiendas */
  .cs-puerto-color.is-m .pc-st { flex-direction: column; }
  .cs-puerto-color.is-m .pc-st__photo { order: -1; flex: none; width: 92%; height: min(42vw, 22vh); margin: 0 auto 18px; }
  .cs-puerto-color.is-m .pc-st__from { font-size: 56px; }
  .cs-puerto-color.is-m .pc-st__arrow { font-size: 36px; }
  .cs-puerto-color.is-m .pc-st__num { font-size: clamp(104px, 30vw, 170px); }
  .cs-puerto-color.is-m .pc-st__unit { margin: 6px 0 14px; }
  .cs-puerto-color.is-m .pc-st__marks { flex-wrap: nowrap; justify-content: space-between; gap: 6px; margin-top: 20px; max-width: 380px; }
  .cs-puerto-color.is-m .pc-mk__pin { width: 40px; }
  .cs-puerto-color.is-m .pc-mk__n { font-size: 9.5px; letter-spacing: .02em; white-space: nowrap; }

  /* 3 · redes */
  .cs-puerto-color.is-m .pc-so__chips { margin-top: 14px; gap: 6px; }
  .cs-puerto-color.is-m .pc-so__chips li { padding: 6px 11px; font-size: 12px; }
  .cs-puerto-color.is-m .pc-so__art { flex: 1; min-height: 0; height: auto; max-height: 380px; margin-top: 20px; }
  .cs-puerto-color.is-m .pc-phone { border-radius: 30px; padding: 6px; }
  .cs-puerto-color.is-m .pc-phone__scr { border-radius: 25px; }
  .cs-puerto-color.is-m .pc-phone--ig { left: 2%; height: 100%; }
  .cs-puerto-color.is-m .pc-phone--reel { left: auto; right: 4%; top: 4%; height: 92%; }
  .cs-puerto-color.is-m .pc-tab { left: 0; width: 56%; bottom: -10%; padding: 6px; border-radius: 16px; }
  .cs-puerto-color.is-m .pc-tab__scr { border-radius: 11px; }
  .cs-puerto-color.is-m .pc-yt__bar { width: 62%; }

  /* 4 · calle y web */
  .cs-puerto-color.is-m .pc-sr { position: relative; }
  .cs-puerto-color.is-m .pc-bb { margin: 52px 0 0; width: 100%; flex: none; }
  .cs-puerto-color.is-m .pc-bb__rig { transform: rotateY(6deg); }
  .cs-puerto-color.is-m .pc-bb__pole { height: 40px; }
  .cs-puerto-color.is-m .pc-lap { position: relative; width: 78%; margin: 36px auto 0; }
}
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .cs-puerto-color.is-m .pc-so__art { max-height: none; }
}
@media (min-width: 761px) and (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .cs-puerto-color.is-m { --mt: 110px; --mb: 48px; }
  .cs-puerto-color.is-m .pc__in, .cs-puerto-color.is-m .pc__panel--intro .pc__in { padding-left: 9vw; padding-right: 9vw; }
  .cs-puerto-color.is-m .pc-so__art { max-height: 460px; }
  .cs-puerto-color.is-m .pc-lap { width: 64%; }
}