/* ═══════════════════════════════════════
   home.css — index.html: app de pantallas (P0 a P3)
═══════════════════════════════════════ */
body{
  width:100%;height:100vh;overflow:hidden;
  background:var(--bg);color:var(--text);
  font-family:'DM Sans',sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* grain */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px;
}

/* ── APP / SCREENS ── */
#app{position:fixed;inset:0;overflow:hidden}
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform var(--ease),opacity var(--ease);
  will-change:transform,opacity;
}
.screen[data-state="before"]{transform:translateY(100%);opacity:0;pointer-events:none}
.screen[data-state="active"]{transform:translateY(0);opacity:1;pointer-events:all}
.screen[data-state="after"]{transform:translateY(-4%);opacity:0;pointer-events:none}

.screen[data-state="active"] .a{animation:up .55s ease forwards}
.screen[data-state="active"] .a:nth-child(1){animation-delay:.06s}
.screen[data-state="active"] .a:nth-child(2){animation-delay:.14s}
.screen[data-state="active"] .a:nth-child(3){animation-delay:.22s}
.screen[data-state="active"] .a:nth-child(4){animation-delay:.30s}
.screen[data-state="active"] .a:nth-child(5){animation-delay:.38s}

#s3hl{font-size:clamp(26px,3.6vw,54px);line-height:1.1;}

/* ═══════ P0 · INTRO ═══════ */
#s0{background:var(--bg);justify-content:center;align-items:flex-start;padding:0 var(--pad)}
.i-inner{max-width:820px}
.i-tagline{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:44px}
.i-rule{width:1px;height:52px;background:linear-gradient(to bottom,transparent,var(--border-lt),transparent);margin-bottom:44px}
.i-hl{margin-bottom:52px}
.i-cta{display:flex;align-items:center;gap:24px}

/* ═══════ P1 · PERFIL ═══════ */
#s1{background:var(--bg)}
.pt{padding:calc(var(--nav-h) + 18px) var(--pad) 22px;flex-shrink:0}
.pt .tag{margin-bottom:8px}
.pgrid{
  display:grid;grid-template-columns:1fr 1fr;
  flex:1;overflow:hidden;min-height:0;
  border-top:1px solid var(--border);border-left:1px solid var(--border);
}
.pc{
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:32px 40px;cursor:pointer;
  display:flex;flex-direction:column;gap:11px;
  transition:background var(--fast);position:relative;overflow:hidden;
}
.pc::after{
  content:'';position:absolute;bottom:0;left:40px;right:40px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .48s cubic-bezier(.76,0,.24,1);
}
.pc:hover{background:var(--surface)}
.pc:hover::after{transform:scaleX(1)}
.pc .tag{font-size:8.5px}
.pc-title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(15px,1.6vw,23px);line-height:1.22;color:#F6F3ED}
.pc-desc{font-size:12.5px;font-weight:300;line-height:1.65;color:var(--text-2);flex:1}
.pc-arrow{font-size:11px;color:var(--text-dim);margin-top:auto;transition:color var(--fast)}
.pc:hover .pc-arrow{color:var(--accent)}

/* ═══════ P2 · CRITERIO ═══════ */
#s2{background:var(--bg)}
.cw{
  flex:1;display:grid;grid-template-columns:1fr 1fr;gap:64px;
  padding:calc(var(--nav-h) + 18px) var(--pad) 52px;
  overflow:hidden;min-height:0;align-content:start;
}
.cl .tag{margin-bottom:16px}
.cl .display-md{margin-bottom:18px}
.cctas{display:flex;flex-direction:column;gap:8px;margin-top:28px}
.csec{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:18px}
.clist{list-style:none}
.ci{
  display:flex;gap:13px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--border);
  font-size:13px;font-weight:300;line-height:1.62;color:var(--text-2);
}
.ci:first-child{border-top:1px solid var(--border)}
.ci::before{content:'—';color:var(--text-dim);flex-shrink:0;font-size:10px;margin-top:3px}

/* ═══════ P3 · PRODUCTO ═══════ */
#s3{background:var(--bg)}
#s3{--pad:clamp(24px,8vw,130px)}
.ph{padding:calc(var(--nav-h) + 18px) var(--pad) 22px;flex-shrink:0}
.ph .tag{margin-bottom:7px}
.alist{flex:1;overflow:hidden;border-top:1px solid var(--border-md);border-bottom:1px solid var(--border-md);display:flex;flex-direction:column;min-height:0}
.ar{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:28px;padding:20px var(--pad);
  border-bottom:1px solid var(--border-md);flex:1;min-height:0;
  transition:background var(--fast);cursor:default;
}
.ar:last-child{border-bottom:none}
.ar:hover{background:var(--surface)}
.atag{width:140px;height:38px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(181,146,106,.35);background:transparent}
.aname{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:22px;color:#F6F3ED;margin-bottom:3px;line-height:1.2}
.adesc{font-size:12px;font-weight:300;color:var(--text-3)}
.aprice{text-align:right;flex-shrink:0}
.aplbl{font-size:10.5px;letter-spacing:.20em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.apval{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--accent-lt);white-space:nowrap}
.pft{display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad) 64px;flex-shrink:0;gap:14px}
.pnote{font-size:12.5px;font-weight:300;color:var(--text-3);max-width:520px;line-height:1.6;font-style:italic}
.pctas{display:flex;gap:10px;flex-shrink:0}

/* ── RESPONSIVE ── */
@media(max-width:860px){
  :root{--nav-h:110px;--pad:22px}
  #s3{--pad:22px}
  .pgrid{grid-template-columns:1fr;overflow-y:auto}
  .pc{padding:24px 22px}
  .pc::after{left:22px;right:22px}
  .cw{grid-template-columns:1fr;overflow-y:auto;gap:22px}
  .ar{grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:8px}
  .aprice{text-align:left;grid-column:1/-1}
  .pft{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
  .i-cta,.pctas{flex-direction:column;align-items:flex-start}
}