/* A new editorial composition, with original CSS depth and scroll choreography. */
.landing-studio {
  --studio-ease: cubic-bezier(.2,.8,.2,1);
  --studio-paper: var(--fondo);
  overflow-x: clip;
}
.landing-studio .wrap { width:min(1280px,calc(100% - 64px)); max-width:1280px; }
.landing-studio .barra {
  width:min(1280px,calc(100% - 64px)); max-width:1280px;
  margin-top:18px; padding:12px 15px 12px 24px; border-radius:16px;
  background:color-mix(in srgb,var(--fondo) 86%,transparent);
  box-shadow:none; border-color:var(--linea); backdrop-filter:blur(20px);
}
.landing-studio .marca { font-size:16px; letter-spacing:-.04em; }
.landing-studio .barra nav a { border-radius:9px; }
.landing-studio .btn { border-radius:12px; padding:15px 24px; box-shadow:none; }
.landing-studio .barra nav .btn { padding-block:10px; }
.landing-studio .ambiente { opacity:.2; }
.landing-studio .grano { opacity:.045; }
.landing-studio .hero {
  display:block; min-height:0; padding:36px 0 12px; text-align:center;
  position:relative; isolation:isolate;
}
.landing-studio .hero-copy { position:relative; z-index:5; }
.landing-studio .hero .rotulo { font-size:10px; letter-spacing:.17em; }
.landing-studio .hero h1 {
  position:relative; width:fit-content; max-width:none; margin:21px auto 23px;
  font-size:clamp(80px,7.5vw,120px); line-height:.94; letter-spacing:-.075em;
  font-weight:750; text-wrap:initial;
}
.landing-studio .hero h1 .grad {
  background:var(--grad-texto); background-clip:text; -webkit-background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.studio-spark {
  position:absolute; left:calc(100% + 27px); top:9%; font-size:72px;
  color:var(--acento-texto); font-weight:400; letter-spacing:0; line-height:1;
  rotate:12deg;
}
.landing-studio .hero .lead { max-width:58ch; margin:0 auto; font-size:16px; line-height:1.65; }
.landing-studio .hero .acts { justify-content:center; gap:30px; margin-top:27px; }
.landing-studio .hero .enlace { font-size:13px; }
.studio-field { position:absolute; inset:0; z-index:-1; overflow:clip; pointer-events:none; }
.studio-field i { position:absolute; border-radius:50%; filter:blur(52px); }
.studio-field i:nth-child(1) {
  left:17%; top:34%; width:44%; height:46%;
  background:color-mix(in srgb,var(--ambar) 13%,transparent); rotate:-28deg;
}
.studio-field i:nth-child(2) {
  right:16%; top:28%; width:38%; height:48%;
  background:color-mix(in srgb,var(--coral) 11%,transparent);
}
.studio-field i:nth-child(3) {
  left:28%; bottom:2%; width:47%; height:23%;
  background:color-mix(in srgb,var(--ambar) 12%,transparent);
}
.studio-field span {
  position:absolute; inset:34% 0 0; opacity:.28;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:54px 54px; mask-image:radial-gradient(ellipse,black,transparent 67%);
  transform:perspective(600px) rotateX(55deg); transform-origin:center bottom;
}
.hero-showcase { position:relative; z-index:2; margin-top:30px; }
.hero-deck {
  position:relative; height:330px; max-width:1140px; margin:auto; transform-style:preserve-3d;
  pointer-events:none;
  transform:perspective(1600px) rotateX(var(--scene-pitch,0deg)) rotateY(var(--scene-yaw,0deg));
  transition:transform .6s var(--studio-ease);
}
.hero-product {
  pointer-events:auto;
  position:absolute; left:50%; top:22px; z-index:var(--deck-z);
  width:218px; padding:10px; border:1px solid color-mix(in srgb,var(--product-color) 24%,var(--sup-borde));
  border-radius:20px; background:var(--vidrio-solido); color:var(--tinta); font:inherit;
  cursor:pointer; text-align:left; transform-origin:center 70%;
  transform:translate(-50%,var(--deck-lift)) translateX(calc(var(--deck-x) * var(--deck-spread,1)))
    rotateZ(var(--deck-turn)) rotateY(var(--deck-yaw)) rotateX(5deg);
  box-shadow:0 22px 45px -24px #0009,0 1px 0 #ffffff20 inset;
  transition:transform .65s var(--studio-ease),box-shadow .4s,border-color .4s;
}
.hero-product-label { display:flex; align-items:center; gap:9px; padding:2px 1px 11px; font-size:12px; font-weight:750; }
.hero-product-label img { display:block; width:26px; height:26px; border-radius:7px; object-fit:contain; }
.hero-product-label > span:last-child { margin-left:auto; color:var(--product-color); font-size:16px; }
.hero-product-screen { display:block; height:196px; overflow:hidden; border-radius:11px; background:#fff; }
.hero-product-screen img { display:block; width:100%; height:auto; transition:transform .55s var(--studio-ease); }
.hero-product-caption { display:block; padding:11px 3px 2px; color:var(--tinta-3); font-size:10px; font-weight:600; }
.hero-product:focus-visible { outline:3px solid var(--acento-texto); outline-offset:7px; z-index:10; }
@media(hover:hover) and (pointer:fine) and (min-width:681px) and (prefers-reduced-motion:no-preference) {
  .hero-product:hover {
    z-index:10; border-color:var(--product-color);
    box-shadow:0 35px 60px -26px #000b,0 0 30px -18px var(--product-color);
  }
  .hero-product:hover .hero-product-screen img { transform:translateY(-8px) scale(1.025); }
}
.hero-showcase-hint { margin:14px 0 0; font-size:11px; letter-spacing:.02em; color:var(--tinta-3); }
.hero-showcase-hint > span { margin-right:9px; color:var(--acento-texto); }
.landing-studio .proof-strip {
  display:flex; justify-content:space-between; gap:24px; align-items:center;
  padding:25px 0; margin-top:25px; border:0; border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea); border-radius:0; background:none; box-shadow:none; backdrop-filter:none;
}
.studio-proof-stat { display:flex; gap:15px; align-items:center; flex:none; }
.landing-studio .proof-strip .studio-proof-stat strong { font-size:48px; letter-spacing:-.075em; color:var(--tinta); line-height:1; }
.studio-proof-stat > span { font-size:10px; text-transform:uppercase; letter-spacing:.12em; line-height:1.65; color:var(--tinta-3); }
.landing-studio .proof-strip > span { font-size:12px; line-height:1.8; }
.landing-studio .proof-strip > a { white-space:nowrap; font-size:12px; }

/* Headers breathe like an editorial page, rather than a sequence of panels. */
.landing-studio .cabecera { max-width:810px; padding:95px 0 35px; }
.landing-studio .cabecera h2 { font-size:clamp(44px,4.5vw,72px); font-weight:760; letter-spacing:-.065em; line-height:1.03; }
.landing-studio .cabecera .rotulo { margin-bottom:21px; font-size:10px; }
.landing-studio .cabecera p { font-size:15px; max-width:49ch; margin-top:22px; }
.landing-studio #vistazo .cabecera {
  display:grid; grid-template-columns:1.2fr .8fr; max-width:none; column-gap:80px; align-items:end;
}
.landing-studio #vistazo .cabecera .rotulo { grid-column:1/-1; }
.landing-studio #vistazo .cabecera h2 { grid-column:1; grid-row:2/4; max-width:12ch; }
.landing-studio #vistazo .cabecera p { grid-column:2; grid-row:2; margin:0; max-width:35ch; }
.landing-studio #vistazo .vistazo-flechas { grid-column:2; grid-row:3; margin-top:21px; }
.landing-studio .vistazo { margin-inline:0; padding:28px 0 36px; scroll-padding-inline:0; gap:28px; }
.landing-studio .vista { width:255px; }
.landing-studio .vista .marco { border-radius:22px; padding:6px; }
.landing-studio .vista .pantalla { border-radius:17px; }
.landing-studio .vista figcaption { min-height:64px; }
.landing-studio .gallery-track { height:1px; margin-top:12px; }

/* Services become three deliberate, numbered offers. */
.landing-studio .servicios { gap:22px; counter-reset:service; }
.landing-studio .svc {
  counter-increment:service; padding:32px 28px; border-radius:22px;
  box-shadow:none; background:var(--vidrio-solido); gap:16px;
}
.landing-studio .svc-ico { margin-bottom:26px; }
.landing-studio .svc::before {
  content:"0" counter(service); display:block; position:absolute; right:28px; top:28px;
  width:auto; height:auto; background:none; font-size:12px; color:var(--tinta-3); letter-spacing:.07em;
}
.landing-studio .svc h3 { font-size:29px; letter-spacing:-.055em; }
.landing-studio .svc .precio { margin:10px 0; align-items:baseline; }
.landing-studio .svc .precio b { font-size:34px; letter-spacing:-.065em; font-weight:700; }
.landing-studio .svc .precio > span { font-size:10px; }
.landing-studio .svc-mas { margin-top:18px; border-radius:10px; min-height:46px; }

/* Higher scope offers: warm metal, a lit edge and a single reflection on arrival. */
.landing-studio .svc-premium {
  --finish-tone:var(--ambar); --finish-ink:var(--acento-texto);
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid color-mix(in srgb,var(--finish-tone) 48%,var(--sup-borde));
  background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--finish-tone) 17%,transparent),transparent 60%),var(--vidrio-solido);
  box-shadow:0 22px 60px -30px color-mix(in srgb,var(--finish-tone) 40%,transparent),inset 0 1px 0 color-mix(in srgb,var(--finish-tone) 55%,transparent);
  transition:border-color .3s,box-shadow .3s;
}
.landing-studio .svc-premium-soft { --finish-tone:var(--coral); }
.landing-studio .svc-premium::before { color:var(--finish-ink); }
.landing-studio .service-finish { display:inline-flex; align-items:center; gap:7px; align-self:start; padding:7px 10px; max-width:calc(100% - 34px); margin-bottom:3px; border:1px solid color-mix(in srgb,var(--finish-tone) 28%,transparent); border-radius:7px; background:color-mix(in srgb,var(--finish-tone) 8%,transparent); color:var(--finish-ink); font-size:9px; font-weight:700; letter-spacing:.02em; }
.landing-studio .service-finish > span { font-size:16px; }
.landing-studio .svc-premium .svc-ico { margin-bottom:10px; box-shadow:inset 0 1px 0 #fff6,0 5px 24px color-mix(in srgb,var(--finish-tone) 15%,transparent); }
.landing-studio .svc-premium .precio b { text-shadow:0 0 32px color-mix(in srgb,var(--finish-tone) 18%,transparent); }
.landing-studio .svc-premium:hover,.landing-studio .svc-premium:focus-within { border-color:var(--finish-ink); box-shadow:0 24px 64px -27px color-mix(in srgb,var(--finish-tone) 48%,transparent),inset 0 1px 0 #fff4; }
.landing-studio .svc-premium > .premium-glint { position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--finish-tone) 11%,transparent) 49%,#ffffff0c 51%,transparent 65%); transform:translateX(-140%); }
.landing-studio .svc-premium.is-visible > .premium-glint { animation:service-glint 1.5s .3s ease-out both; }
@keyframes service-glint { to { transform:translateX(140%); } }
@media(prefers-reduced-motion:reduce) { .landing-studio .svc-premium > .premium-glint { display:none; }.landing-studio .svc-premium { transition:none; } }

/* A pinned introduction and a deck of working apps. Keyboard focus raises a card. */
.landing-studio #trabajos {
  margin-top:105px;
}
.landing-studio .studio-work-stage {
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:0 75px;
  align-items:start; position:relative;
}
.landing-studio .studio-work-stage > .cabecera {
  position:sticky; top:135px; padding:30px 0; grid-column:1; grid-row:1;
}
.landing-studio .studio-work-stage > .cabecera h2 { max-width:10ch; font-size:clamp(45px,4.8vw,74px); }
.landing-studio .studio-work-stage > .cabecera p { max-width:32ch; }
.landing-studio .app-catalog { grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:70px; padding-bottom:65px; margin-top:0; }
.landing-studio .app-card {
  position:sticky; top:calc(118px + var(--stack-index,0) * 12px); padding:31px; background:var(--vidrio-solido);
  border-radius:27px; min-height:460px; box-shadow:0 23px 65px -36px #0008;
  scale:var(--stack-scale,1); transform-origin:center top;
}
.landing-studio .app-card:nth-child(1) { z-index:1; --stack-index:0; }
.landing-studio .app-card:nth-child(2) { z-index:2; --stack-index:1; }
.landing-studio .app-card:nth-child(3) { z-index:3; --stack-index:2; }
.landing-studio .app-card:nth-child(4) { z-index:4; --stack-index:3; }
.landing-studio .app-card:nth-child(5) { z-index:5; --stack-index:4; }
.landing-studio .app-card:nth-child(6) { z-index:6; --stack-index:5; }
.landing-studio .app-card:focus-visible, .landing-studio .app-card.is-stack-focused { z-index:12; }
.landing-studio .app-card::before { inset:0; opacity:1; background:radial-gradient(ellipse at 10% 65%,color-mix(in srgb,var(--app-color) 15%,transparent),transparent 65%); }
.landing-studio .app-card-title strong { font-size:29px; }
.landing-studio .app-card-icon { width:49px; height:49px; border-radius:13px; }
.landing-studio .app-card-body { grid-template-columns:minmax(0,180px) minmax(0,1fr); gap:35px; margin-top:35px; }
.landing-studio .app-card-phone { width:155px; justify-self:center; max-height:300px; overflow:hidden; rotate:-4deg; }
.landing-studio .app-card-summary { font-size:17px; line-height:1.55; }
.landing-studio .app-card-action { padding:11px 15px; border-radius:10px; font-size:12px; }
.landing-studio #trabajos > .cabecera, .landing-studio #trabajos > .otros,
.landing-studio #trabajos > noscript { grid-column:1/-1; }
.landing-studio #trabajos > .cabecera { max-width:none; margin-top:25px; }
.landing-studio .otros { gap:20px; }
.landing-studio .otros .vidrio { box-shadow:none; border-radius:16px; padding:25px; }

.landing-studio .demos { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.landing-studio .demo { padding:13px 13px 26px; border-radius:24px; box-shadow:none; gap:17px; }
.landing-studio .demo-preview { aspect-ratio:16/9; border-radius:15px; }
.landing-studio .demo h3 { font-size:28px; }
.landing-studio .demo .que { font-size:15px; max-width:55ch; }
.landing-studio .demo .clave { font-size:12px; }
.landing-studio .demo .abrir { padding-top:8px; margin-top:auto; }
.landing-studio #como { border-top:1px solid var(--linea); margin-top:90px; }
.landing-studio .process-number { width:52px; height:52px; font-size:14px; }
.landing-studio .como { margin-top:15px; }
.landing-studio .phyro-about { border-top:1px solid var(--linea); padding-top:70px; margin-top:90px; }
.landing-studio .contacto {
  margin-top:100px; padding:80px 48px; border-radius:32px; border-color:var(--motion-line);
  background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--ambar) 14%,transparent),transparent 65%),var(--vidrio-solido);
  box-shadow:none;
}
.landing-studio .contacto h2 { font-size:clamp(48px,5.5vw,86px); max-width:13ch; letter-spacing:-.075em; }
.landing-studio .contacto > p { max-width:48ch; font-size:16px; }
.landing-studio .form-contacto { max-width:620px; margin-top:38px; }
.landing-studio .form-contacto :is(input,textarea) { background:var(--fondo); }
.landing-studio .form-contacto button { border-radius:12px; }
.landing-studio footer { padding-top:32px; }

@media(max-width:1100px) {
  .landing-studio .studio-work-stage { column-gap:35px; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); }
  .landing-studio .app-card { padding:24px; }
  .landing-studio .app-card-body { gap:20px; grid-template-columns:145px minmax(0,1fr); }
  .landing-studio .app-card-phone { width:135px; }
  .hero-product { width:195px; }
  .hero-deck { --deck-spread:.86; }
  .landing-studio .svc { padding:28px 22px; }
  .landing-studio .svc h3 { font-size:25px; }
  .landing-studio .proof-strip > span { max-width:48ch; }
}
@media(max-width:900px) {
  .landing-studio .wrap, .landing-studio .barra { width:calc(100% - 44px); }
  .landing-studio .hero { padding-top:65px; }
  .landing-studio .hero h1 { font-size:clamp(78px,12vw,112px); }
  .studio-spark { font-size:48px; left:calc(100% + 16px); }
  .hero-deck { --deck-spread:.68; }
  .hero-product { width:180px; }
  .landing-studio #trabajos { margin-top:50px; }
  .landing-studio .studio-work-stage { display:block; }
  .landing-studio .studio-work-stage > .cabecera { position:static; max-width:700px; padding:45px 0 36px; }
  .landing-studio .studio-work-stage > .cabecera h2 { max-width:12ch; }
  .landing-studio .app-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:0; }
  .landing-studio .app-card { position:relative; top:auto; min-height:0; scale:1; }
  .landing-studio .app-card-body { grid-template-columns:110px minmax(0,1fr); gap:18px; }
  .landing-studio .app-card-phone { width:105px; max-height:255px; }
  .landing-studio .app-card-summary { font-size:14px; }
  .landing-studio .app-card-title strong { font-size:23px; }
  .landing-studio .app-card-icon { width:43px; height:43px; }
  .landing-studio .app-card-body { margin-top:25px; }
  .landing-studio .app-card-action { font-size:11px; padding:9px 11px; }
  .landing-studio .app-card-top { gap:10px; }
  .landing-studio .app-card-arrow { width:28px; height:28px; }
  .landing-studio .proof-strip > a { display:none; }
  .landing-studio #vistazo .cabecera { column-gap:35px; }
}
@media(max-width:980px) {
  .landing-studio .barra { flex-wrap:wrap; }
  .landing-studio .menu-toggle {
    display:inline-flex; align-items:center; gap:8px; margin-left:auto;
    min-height:40px; padding:7px 13px; border:1px solid var(--linea);
    border-radius:9px; background:var(--sup-1); color:var(--tinta);
    font:inherit; font-size:13px; font-weight:700; line-height:1.4; cursor:pointer;
  }
  .landing-studio .barra nav {
    display:none; flex:1 0 100%; width:100%; flex-direction:column; align-items:stretch;
    gap:3px; padding:8px 0 2px; max-height:calc(100dvh - 130px); overflow-y:auto;
  }
  .landing-studio .barra.menu-open nav { display:flex; }
  .landing-studio .barra nav a, .landing-studio .barra nav a[data-sec] {
    display:flex; width:100%; justify-content:flex-start; padding:11px 13px;
  }
  .landing-studio .barra nav a.btn { justify-content:center; }
  .landing-studio .barra nav .tema { align-self:flex-start; margin:5px; }
}
@media(max-width:680px) {
  .landing-studio .wrap, .landing-studio .barra { width:calc(100% - 32px); }
  .landing-studio .barra { margin-top:10px; padding:11px 12px 11px 16px; border-radius:15px; }
  .landing-studio .hero { padding-top:58px; padding-bottom:16px; }
  .landing-studio .hero .rotulo { font-size:8px; letter-spacing:.1em; gap:7px; }
  .landing-studio .hero h1 { font-size:clamp(68px,14.6vw,98px); line-height:.95; margin-top:22px; }
  .studio-spark { font-size:29px; left:calc(100% + 3px); top:8%; }
  .landing-studio .hero .lead { font-size:14px; max-width:35ch; }
  .studio-break { display:none; }
  .landing-studio .hero .acts { flex-direction:column; gap:17px; margin-top:25px; }
  .landing-studio .hero .btn { padding:14px 23px; }
  .hero-showcase { margin-top:35px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:-16px; padding-inline:20px; scroll-padding-inline:20px; }
  .hero-showcase::-webkit-scrollbar { display:none; }
  .hero-deck { display:flex; gap:17px; height:auto; width:max-content; margin:0; padding:10px 8px 25px 0; transform:none; }
  .hero-product { position:relative; left:auto; top:auto; flex:none; width:210px; transform:none; scroll-snap-align:start; border-radius:18px; }
  .hero-product-screen { height:230px; }
  .hero-product-caption { font-size:10px; }
  .hero-product-label { font-size:12px; }
  .hero-showcase-hint { display:none; }
  .studio-field i { filter:blur(34px); }
  .landing-studio .proof-strip { margin-top:8px; padding:23px 0; gap:20px; align-items:flex-start; }
  .landing-studio .proof-strip .studio-proof-stat strong { font-size:39px; }
  .studio-proof-stat { flex-direction:column; align-items:flex-start; gap:8px; }
  .studio-proof-stat > span { font-size:8px; }
  .landing-studio .proof-strip > span { font-size:11px; max-width:28ch; }
  .landing-studio .cabecera { padding:65px 0 28px; }
  .landing-studio .cabecera h2 { font-size:44px; }
  .landing-studio .cabecera .rotulo { margin-bottom:18px; }
  .landing-studio #vistazo .cabecera { display:block; }
  .landing-studio #vistazo .cabecera h2 { max-width:12ch; }
  .landing-studio #vistazo .cabecera p { margin-top:21px; }
  .landing-studio .vistazo { margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; gap:20px; }
  .landing-studio .vista { width:230px; }
  .landing-studio .servicios { grid-template-columns:1fr; }
  .landing-studio .svc { padding:29px 26px; }
  .landing-studio .svc h3 { font-size:29px; }
  .landing-studio .svc-ico { margin-bottom:13px; }
  .landing-studio .app-catalog { grid-template-columns:1fr; gap:25px; }
  .landing-studio .app-card { padding:25px; }
  .landing-studio .app-card-title strong { font-size:27px; }
  .landing-studio .app-card-icon { width:48px; height:48px; }
  .landing-studio .app-card-body { grid-template-columns:125px minmax(0,1fr); gap:22px; }
  .landing-studio .app-card-phone { width:120px; }
  .landing-studio .app-card-summary { font-size:15px; }
  .landing-studio .demos { grid-template-columns:1fr; gap:25px; }
  .landing-studio .demo h3 { font-size:26px; }
  .landing-studio .demo .que { font-size:14px; }
  .landing-studio #como { margin-top:65px; }
  .landing-studio .como > div { padding-left:68px; }
  .landing-studio .process-marker { width:52px; }
  .landing-studio .process-line { left:25px; top:64px; }
  .landing-studio .phyro-about { margin-top:65px; padding-top:50px; }
  .landing-studio .contacto { padding:55px 21px; margin-top:65px; border-radius:24px; }
  .landing-studio .contacto h2 { font-size:49px; }
  .landing-studio .contacto > p { font-size:15px; }
}
@media(max-width:370px) {
  .studio-spark { display:none; }
  .landing-studio .hero h1 { font-size:66px; }
  .landing-studio .app-card { padding:22px; }
  .landing-studio .app-card-body { grid-template-columns:105px minmax(0,1fr); gap:17px; }
  .landing-studio .app-card-phone { width:102px; }
  .landing-studio .app-card-summary { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
  .landing-studio .hero-deck { transform:none; }
  .landing-studio .app-card { position:relative; top:auto; scale:1!important; }
  .landing-studio .studio-work-stage > .cabecera { position:static; }
  .landing-studio .studio-spark { animation:none; }
}
@media print {
  .landing-studio .studio-work-stage { display:block; }
  .landing-studio .app-catalog { display:grid; grid-template-columns:repeat(2,1fr); }
  .landing-studio .app-card, .landing-studio .studio-work-stage > .cabecera { position:static; scale:1; }
  .studio-field { display:none; }
  .hero-deck { transform:none; }
}