/* El índice es parte del primer pantallazo; la pieza cambia de lenguaje. */
.pf-v2-hero { position:relative; isolation:isolate; display:flex; flex-direction:column; gap:18px; min-height:100svh; padding:112px var(--pad) 24px; background:radial-gradient(ellipse at 85% 30%,#39136242,transparent 60%),#08080a; overflow:hidden; }
.pf-v2-top,.pf-v2-tabs,.pf-v2-layout { width:min(1600px,100%); margin-inline:auto; }
.pf-v2-top { display:flex; align-items:center; justify-content:space-between; gap:20px; }.pf-v2-top .pf-eyebrow { margin:0; font-size:8px; }.pf-v2-top>span { color:#a390b1; font:500 8px/1.5 var(--font-body); text-transform:uppercase; letter-spacing:.12em; }
.pf-v2-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid #fff6e02e; }
.pf-v2-tabs>button { position:relative; display:grid; align-items:center; grid-template-columns:24px 1fr auto; grid-template-rows:auto auto; gap:2px 10px; min-width:0; padding:12px 18px; min-height:65px; color:#ad9bbd; text-align:left; border:0; background:transparent; cursor:pointer; }
.pf-v2-tabs>button+button { border-left:1px solid #fff6e024; }.pf-v2-tabs strong { font:900 clamp(11px,1.08vw,17px)/1.5 var(--font-title); text-transform:uppercase; }.pf-v2-tab-no { grid-row:1/3; color:#857192; font:400 9px/1.5 var(--font-body); }.pf-v2-tab-count { grid-column:2; font:400 9px/1.6 var(--font-body); }.pf-v2-tab-arrow { grid-column:3;grid-row:1/3;color:#ffae00;font-size:23px; }
.pf-v2-tabs>button::after { position:absolute; content:""; left:0; right:0; bottom:-1px; height:2px; background:var(--pf-spectrum); transform:scaleX(0); transform-origin:left; transition:transform .4s; }.pf-v2-tabs>button[aria-pressed=true] { color:var(--cream); background:linear-gradient(120deg,#6a00ff16,#ff5a0006); }.pf-v2-tabs>button[aria-pressed=true]::after { transform:scaleX(1); }.pf-v2-tabs>button:hover { color:var(--cream); }
.pf-v2-layout { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(30px,5vw,80px); align-items:center; }
.pf-v2-copy h1 { font-size:clamp(12px,1.05vw,17px); color:#c8b4d8; }.pf-v2-statement { margin:20px 0 23px; font:900 clamp(33px,3.85vw,60px)/1.13 var(--font-title); letter-spacing:-.045em; text-transform:uppercase; }.pf-v2-statement em { color:#c49aff;font-style:normal; }.pf-v2-copy>.pf-body { max-width:440px; font-size:clamp(12px,1.05vw,16px); line-height:1.85; }.pf-v2-copy-foot { display:flex; align-items:center; flex-wrap:wrap; gap:20px 35px; margin-top:24px; }.pf-v2-copy-foot>span { max-width:150px; color:#94809e; font:400 8px/1.8 var(--font-body); }.pf-v2-copy-foot .pf-text-link { font-size:10px; gap:30px; }
.pf-v2-showcase { min-width:0; }.pf-v2-stage-top { display:flex;justify-content:space-between;gap:20px;padding:0 0 10px;color:#ad9abc;font:500 8px/1.6 var(--font-body);letter-spacing:.12em;text-transform:uppercase; }
.pf-v2-stage { position:relative; height:clamp(270px,calc(100svh - 335px),570px); max-height:38vw; min-height:240px; background:#0d0914; overflow:hidden; border:1px solid #4c335b; }
.pf-v2-visual { display:block; width:100%;height:100%;position:relative; }.pf-v2-visual>[data-pf-hero-panel] { position:absolute;inset:0;overflow:hidden; }.pf-v2-visual>[hidden] { display:none!important; }
.pf-v2-av { background:radial-gradient(ellipse at 15% 90%,#0011ff22,transparent 60%),radial-gradient(ellipse at 90% 5%,#ff5a0020,transparent 60%),#060509; }.pf-v2-av>img,.pf-v2-av>video { display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain; }.pf-v2-time { position:absolute;top:14px;left:14px;color:#fff6e0ab;font:400 7px/1.5 var(--font-body);letter-spacing:.15em;padding:7px 9px;background:#05050588; }
.pf-v2-open-label { position:absolute;z-index:5;right:15px;bottom:15px;display:flex;gap:22px;align-items:center;padding:8px 0 8px 10px;color:var(--cream);font:500 9px/1.5 var(--font-body);text-shadow:0 1px 12px #000; }.pf-v2-open-label b { display:grid;place-items:center;width:31px;height:31px;border:1px solid #fff6e080;color:#ffae00;font-size:22px;font-weight:400; }
.pf-v2-stage-progress { height:2px;background:#41334c;margin-top:8px;overflow:hidden; }.pf-v2-stage-progress>i { display:block;width:100%;height:100%;background:var(--pf-spectrum);transform:scaleX(0);transform-origin:left; }
.pf-v2-caption { display:flex;justify-content:space-between;align-items:center;gap:15px;padding-top:12px;min-height:51px; }.pf-v2-caption>div:first-child { min-width:0; }.pf-v2-caption strong { display:block;font:900 clamp(12px,1.22vw,19px)/1.4 var(--font-title);text-transform:uppercase; }.pf-v2-caption>div>span { display:block;margin-top:4px;color:#ad96bd;font:400 8px/1.7 var(--font-body); }.pf-v2-controls { display:flex;gap:12px;flex:none; }.pf-v2-controls>button { border:0;background:none;color:#f7e8fa;min-width:32px;min-height:36px;padding:4px;font-size:22px;cursor:pointer; }.pf-v2-controls>button:nth-child(2) { font-size:13px; }.pf-v2-controls>button:hover { color:#ffae00; }
/* La marca se construye: signo, aplicación y paleta entran como un sistema. */
.pf-v2-brand { --client:#8c39b4;--client-gradient:linear-gradient(120deg,#45056c,#a74cf1);background:var(--client-gradient); }.pf-v2-brand-grid { position:absolute;inset:0;background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);background-size:42px 42px; }.pf-v2-brand-label { position:absolute;left:18px;top:17px;z-index:3;font:500 7px/1.7 var(--font-body);text-transform:uppercase;letter-spacing:.15em;color:#fff;background:#08080a80;padding:5px 8px; }
.pf-v2-brand-canvas { position:absolute;inset:48px 24px 44px;display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr;gap:9px;transform:rotate(-2deg); }.pf-v2-brand-piece { position:relative;min-width:0;min-height:0;overflow:hidden;background:#111015;box-shadow:0 9px 20px #0003; }.pf-v2-brand-piece[data-surface=light] { background:#f4f2ed; }.pf-v2-brand-piece>img { width:100%;height:100%;display:block;object-fit:contain; }.pf-v2-brand-piece:first-child { grid-row:1/3;transform:rotate(1deg); }.pf-v2-brand-piece:nth-child(2) { transform:translate(5px,-5px) rotate(3deg); }.pf-v2-brand-piece:nth-child(3) { transform:translate(-4px,5px) rotate(-2deg); }.pf-v2-brand-seal { position:absolute;bottom:18px;left:18px;font:900 11px/1.5 var(--font-title);text-transform:uppercase;color:#fff;text-shadow:0 1px 12px #0009; }.pf-v2-brand-swatches { position:absolute;left:0;right:0;bottom:-28px;height:12px;display:flex;gap:3px; }.pf-v2-brand-swatches>i { flex:1;background:var(--swatch);border:1px solid #fff5; }
.pf-v2-hero.is-entering [data-pf-hero-panel=branding] .pf-v2-brand-piece { animation:pfBrandAssemble .95s cubic-bezier(.2,.7,.1,1) both; }.pf-v2-hero.is-entering .pf-v2-brand-piece:nth-child(2) { animation-delay:.13s; }.pf-v2-hero.is-entering .pf-v2-brand-piece:nth-child(3) { animation-delay:.24s; }
@keyframes pfBrandAssemble { from { opacity:0;translate:0 32px;rotate:-7deg;scale:.92; }to { opacity:1;translate:0 0;rotate:0deg;scale:1; } }
/* El sitio aparece sobre su retícula, como una experiencia que se arma. */
.pf-v2-web { background:linear-gradient(145deg,#1d1031,#090b16);padding:18px 20px 30px; }.pf-v2-browser-bar { position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;height:26px;padding:5px 10px;background:#15121d;color:#bca9c7;border:1px solid #a58bba66;border-radius:6px 6px 0 0;font:400 7px/1.4 var(--font-body); }.pf-v2-browser-screen { position:relative;height:calc(100% - 26px);border:1px solid #a58bba66;background:#e9e6ef;overflow:hidden; }.pf-v2-browser-screen>img { position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;object-position:top center; }.pf-v2-wireframe { position:absolute;inset:0;padding:20px;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:15px 1fr 1fr;gap:15px;background:#101020; }.pf-v2-wireframe>i { display:block;border:1px solid #a77ed3; }.pf-v2-wireframe>i:first-child { grid-column:1/3; }.pf-v2-cursor { position:absolute;z-index:3;right:18%;bottom:20%;font-size:39px;color:#ffae00;filter:drop-shadow(1px 2px 2px #000); }.pf-v2-web-code { position:absolute;left:20px;right:20px;bottom:9px;color:#a48fb6;font:400 7px/1.5 monospace;word-spacing:6px; }
.pf-v2-hero.is-entering .pf-v2-browser-screen>img { animation:pfWebBuild 1.6s ease both; }.pf-v2-hero.is-entering .pf-v2-cursor { animation:pfCursorBuild 2.2s ease both; }@keyframes pfWebBuild { 0%,25% { opacity:0;clip-path:inset(0 0 100% 0); }100% { opacity:1;clip-path:inset(0); } }@keyframes pfCursorBuild { from { opacity:0;translate:70px 50px; }40% { opacity:1; }to { opacity:1;translate:0 0; } }
/* El entorno es térmico; el retrato conserva su luz y su encuadre original. */
.pf-v2-photo { background:#16062b; }.pf-v2-photo-halo { position:absolute;inset:-35%;background:radial-gradient(ellipse at 72% 20%,#ffae00 0,#ff5a00 12%,#ff2e8a 27%,#6a00ff 46%,#0011ff 60%,#050526 73%);filter:blur(25px);transform:rotate(-20deg); }.pf-v2-photo>img { position:absolute;inset:14px 0;width:100%;height:calc(100% - 28px);object-fit:contain;z-index:1; }.pf-v2-photo-frame { position:absolute;inset:25px;z-index:2;border:1px solid #fff7;pointer-events:none;clip-path:polygon(0 0,22% 0,22% 1px,1px 1px,1px 22%,0 22%,0 0,100% 0,100% 22%,calc(100% - 1px) 22%,calc(100% - 1px) 1px,78% 1px,78% 0,100% 0,100% 100%,78% 100%,78% calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 78%,100% 78%,100% 100%,0 100%,0 78%,1px 78%,1px calc(100% - 1px),22% calc(100% - 1px),22% 100%,0 100%); }.pf-v2-photo-label { position:absolute;top:13px;left:16px;z-index:3;font:500 7px/1.6 var(--font-body);text-transform:uppercase;letter-spacing:.15em;color:#fff; }.pf-v2-photo-number { position:absolute;bottom:15px;left:17px;font:900 35px/1 var(--font-title);color:#fff8;z-index:3; }
.pf-v2-hero.is-entering .pf-v2-photo>img { animation:pfPhotoDevelop .85s ease both; }@keyframes pfPhotoDevelop { from { opacity:0;scale:1.035;filter:brightness(1.5); }to { opacity:1;scale:1;filter:brightness(1); } }
.pf-v2-hero[data-paused=true] * { animation:none!important; }
/* Entrada térmica del capítulo de fotografía, sin teñir el archivo. */
.pf-chapter--photography { padding-top:0; }.pf-chapter--photography>.pf-chapter-heading { position:relative;isolation:isolate;max-width:none;margin:0 calc(-1 * var(--pad)) 55px;padding:75px var(--pad);overflow:hidden;background:#150b30; }.pf-chapter--photography>.pf-chapter-heading::before { content:"";position:absolute;z-index:-2;inset:-100%;background:radial-gradient(ellipse at 72% 54%,#ffae00 0,#ff5a00 10%,#ff2e8a 18%,#6a00ff 35%,#0011ff 49%,#05051d 70%);filter:blur(20px); }.pf-chapter--photography>.pf-chapter-heading::after { content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#08061dd9 0,#09051d99 65%,#0c052050); }.pf-chapter--photography>.pf-chapter-heading .pf-body { color:#fff0fc; }
@media (min-width:1051px) and (max-height:740px) { .pf-v2-hero { padding-top:100px;gap:11px;padding-bottom:15px; }.pf-v2-tabs>button { min-height:55px;padding-block:8px; }.pf-v2-statement { font-size:clamp(31px,3.25vw,48px);margin:14px 0 18px; }.pf-v2-copy-foot { margin-top:15px; }.pf-v2-stage { height:max(235px,calc(100svh - 288px));max-height:35vw;min-height:0; }.pf-v2-stage-top { padding-bottom:7px; }.pf-v2-caption { min-height:43px;padding-top:8px; } }
@media (max-width:1050px) { .pf-v2-hero { padding-top:102px;gap:15px; }.pf-v2-layout { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px; }.pf-v2-tabs>button { padding:10px;grid-template-columns:14px 1fr;gap:3px 8px; }.pf-v2-tab-arrow { display:none; }.pf-v2-tabs strong { font-size:11px; }.pf-v2-copy h1 { font-size:12px; }.pf-v2-statement { font-size:32px; }.pf-v2-stage { height:320px;max-height:none; }.pf-v2-copy-foot>span { display:none; }.pf-v2-brand-canvas { inset:45px 13px 44px; }.pf-v2-brand-seal { font-size:8px; }.pf-v2-web { padding:14px 12px 27px; }.pf-v2-web-code { left:12px;font-size:6px; }.pf-v2-hero .pf-v2-controls { gap:5px; }.pf-chapter--photography>.pf-chapter-heading { padding-top:55px;padding-bottom:55px; } }
@media (max-width:700px) { .pf-v2-hero { min-height:0;gap:20px;padding-top:98px; }.pf-v2-top>span { display:none; }.pf-v2-tabs { grid-template-columns:repeat(2,minmax(0,1fr));order:1; }.pf-v2-tabs>button { min-height:54px;grid-template-columns:18px 1fr; }.pf-v2-tabs>button:nth-child(3) { border-left:0;border-top:1px solid #fff6e024; }.pf-v2-tabs>button:nth-child(4) { border-top:1px solid #fff6e024; }.pf-v2-top { order:0; }.pf-v2-layout { order:2;grid-template-columns:1fr;gap:27px; }.pf-v2-copy h1 { font-size:11px; }.pf-v2-statement { font-size:clamp(31px,8.3vw,46px);margin:15px 0 20px; }.pf-v2-statement br { display:none; }.pf-v2-copy>.pf-body { font-size:12px; }.pf-v2-copy-foot { margin-top:15px; }.pf-v2-stage { height:310px;min-height:0; }.pf-v2-caption strong { font-size:13px; }.pf-v2-controls>button { min-width:32px;min-height:40px; }.pf-v2-photo>img { inset:10px 0;height:calc(100% - 20px); }.pf-v2-brand-label { font-size:6px;left:10px; }.pf-v2-brand-seal { display:none; }.pf-v2-brand-canvas { inset:42px 14px 45px; }.pf-v2-open-label { bottom:9px;right:10px;font-size:8px;gap:10px; }.pf-chapter--photography>.pf-chapter-heading { padding-block:45px;gap:22px;margin-bottom:35px; } }
@media (prefers-reduced-motion:reduce) { .pf-v2-hero * { animation:none!important;transition:none!important; } }
/* Selector compacto dentro del mismo marco de la pieza. El índice inferior se conserva. */
.pf-v2-showcase--compact { border:1px solid #4c335b; background:#0d0914; }
.pf-v2-showcase--compact .pf-v2-tabs { width:100%; border-top:0; margin:0; }
.pf-v2-showcase--compact .pf-v2-tabs>button { display:flex; align-items:center; justify-content:center; min-height:41px; padding:9px 8px; text-align:center; }
.pf-v2-showcase--compact .pf-v2-tabs strong { font-size:clamp(8px,.77vw,12px); line-height:1.6; white-space:nowrap; }
.pf-v2-showcase--compact .pf-v2-stage-top { padding:10px 13px 9px; }
.pf-v2-showcase--compact .pf-v2-stage { border:0; }
.pf-v2-showcase--compact .pf-v2-stage-progress { margin-top:0; }
.pf-v2-showcase--compact .pf-v2-caption { padding:11px 13px; }
@media (max-width:1050px) and (min-width:701px) { .pf-v2-showcase--compact .pf-v2-tabs>button { padding-inline:5px; }.pf-v2-showcase--compact .pf-v2-tabs strong { font-size:8px; } }
@media (max-width:700px) { .pf-v2-showcase--compact .pf-v2-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }.pf-v2-showcase--compact .pf-v2-tabs>button { min-height:35px; padding:7px 8px; }.pf-v2-showcase--compact .pf-v2-tabs strong { font-size:9px; } }