/* Ficha de lujo · iPhone 18 Pro Max — llevada a la tienda desde la prueba aprobada v3 (03-TIENDA/02-DISENO/propuestas-lujo/iphone-18-pro-max/).
   TODO va dentro de .fu-lujo para no tocar el resto de la tienda. El encabezado, el pie y la barra del celular son los de la tienda.
   --fu-cab = alto del encabezado fijo de la tienda (lo mide pagina.js); las secciones «pegadas» quedan justo debajo. */
.fu-lujo{
  --negro:#0A0A0B; --negro2:#111113; --hueso:#F4F4F5; --blanco:#FFFFFF;
  --t:var(--fu-f-brand,"Michroma"),system-ui,sans-serif; --s:var(--fu-f-body,"Inter"),system-ui,sans-serif;
  --ancho:1180px; --g:clamp(16px,4vw,40px); --cab:var(--fu-cab,64px); --alto:calc(100svh - var(--cab) - var(--fu-pie,0px));
  background:var(--negro);color:var(--hueso);font:400 17px/1.55 var(--s);-webkit-font-smoothing:antialiased;overflow-x:clip
}
.fu-lujo *{box-sizing:border-box;margin:0;padding:0}
.fu-lujo img{display:block;max-width:100%;height:auto}
.fu-lujo a{color:inherit;text-decoration:none}
.fu-lujo button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.fu-lujo h1,.fu-lujo h2,.fu-lujo h3{color:inherit;font-weight:400}

/* dos climas: oscuro (por defecto) y claro */
.fu-lujo section{--fondo:var(--negro);--tx:var(--hueso);--mut:#9A9AA1;--tenue:#5E5E66;--linea:rgba(244,244,245,.12);--btn:var(--hueso);--btntx:var(--negro);background:var(--fondo);color:var(--tx)}
.fu-lujo section.gris{--fondo:var(--negro2)}
.fu-lujo section.claro{--fondo:var(--hueso);--tx:var(--negro);--mut:#5F5F67;--tenue:#8E8E96;--linea:rgba(10,10,11,.12);--btn:var(--negro);--btntx:var(--hueso)}
.fu-lujo section.blanco{--fondo:var(--blanco);--tx:var(--negro);--mut:#5F5F67;--tenue:#8E8E96;--linea:rgba(10,10,11,.1);--btn:var(--negro);--btntx:var(--hueso)}

.fu-lujo .envoltura{max-width:var(--ancho);margin:0 auto;padding:0 var(--g)}
.fu-lujo .kicker{font:500 12px/1 var(--s);letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.fu-lujo .titular{font-family:var(--t);font-weight:400;letter-spacing:-.01em;line-height:1.05}
.fu-lujo .nota{font-size:13px;color:var(--tenue);margin-top:14px}
.fu-lujo .boton,.fu-lujo-barra .boton{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;background:var(--btn);color:var(--btntx);font-weight:600;font-size:15px;border-radius:2px;transition:transform .3s,opacity .3s}
.fu-lujo .boton:hover,.fu-lujo-barra .boton:hover{transform:translateY(-2px);opacity:.92}
.fu-lujo .boton.hueco{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1px var(--linea)}
.fu-lujo .boton.hueco[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--tx)}
.fu-lujo .enlace{font-size:15px;border-bottom:1px solid var(--tenue);padding-bottom:3px;transition:border-color .3s}
.fu-lujo .enlace:hover{border-color:var(--tx)}

/* ---------- 1. portada (ocupa la pantalla debajo del encabezado) ---------- */
.fu-lujo .portada{position:relative;height:var(--alto-portada,var(--alto));min-height:560px;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(36px,6vh,72px)}
.fu-lujo .portada .texto{position:relative;z-index:2}
.fu-lujo .portada .kicker{opacity:0;animation:fuL-sube 1s .2s forwards}
.fu-lujo .portada h1{font-size:clamp(38px,6.4vw,92px);margin:16px 0 12px;opacity:0;animation:fuL-sube 1.1s .35s forwards}
.fu-lujo .portada .bajada{max-width:540px;margin:0 auto;color:var(--mut);font-size:clamp(16px,1.8vw,19px);opacity:0;animation:fuL-sube 1.1s .5s forwards}
.fu-lujo .portada .acciones{display:flex;gap:28px;align-items:center;justify-content:center;margin-top:24px;opacity:0;animation:fuL-sube 1.1s .65s forwards}
.fu-lujo .portada .foto{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:min(calc(var(--alto-portada,var(--alto)) - 360px),680px);width:auto;max-width:none;z-index:1;opacity:0;animation:fuL-aparece 1.8s .45s forwards;will-change:transform}
.fu-lujo .portada .foto img{height:100%;width:auto;max-width:none}
.fu-lujo .portada::after{content:"";position:absolute;inset:auto 0 0 0;height:18%;background:linear-gradient(to bottom,transparent,var(--negro));z-index:1;pointer-events:none}
@keyframes fuL-sube{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fuL-aparece{from{opacity:0;transform:translate(-50%,90px) scale(.94)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:640px){.fu-lujo .portada .foto{height:min(48vh,calc(var(--alto-portada,var(--alto)) - 360px))}.fu-lujo .portada .acciones{flex-direction:column;gap:16px}}

/* ---------- 2. frase (claro) ---------- */
.fu-lujo .frase{height:200vh;position:relative}
.fu-lujo .frase .fija{position:sticky;top:var(--cab);height:var(--alto);display:flex;align-items:center}
.fu-lujo .frase p{font:400 clamp(26px,4.4vw,58px)/1.22 var(--t);letter-spacing:-.01em;max-width:1050px}
.fu-lujo .frase span{color:#CFCFD4;transition:color .35s}
.fu-lujo .frase span.on{color:var(--negro)}

/* ---------- 3. el teléfono en 3D (blanco) ---------- */
.fu-lujo .giro{height:340vh;position:relative}
.fu-lujo .giro .fija{position:sticky;top:var(--cab);height:var(--alto);overflow:hidden}
.fu-lujo .giro canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.fu-lujo .giro canvas:active{cursor:grabbing}
.fu-lujo .giro .sombra{position:absolute;left:50%;bottom:7%;width:min(340px,60vw);height:34px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(10,10,11,.22),transparent);pointer-events:none}
.fu-lujo .giro .respaldo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:78%;width:auto;display:none}
.fu-lujo .giro.sin3d .respaldo{display:block}.fu-lujo .giro.sin3d canvas,.fu-lujo .giro.sin3d .pista{display:none}
.fu-lujo .giro .capas{position:absolute;left:var(--g);top:50%;transform:translateY(-50%);width:min(340px,30vw);pointer-events:none}
.fu-lujo .giro .capa{position:absolute;top:0;left:0;right:0;transform:translateY(-50%);opacity:0;transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.fu-lujo .giro .capa.activa{opacity:1}
.fu-lujo .giro .capa h2{font:400 clamp(24px,2.6vw,34px)/1.15 var(--t);margin:14px 0 12px}
.fu-lujo .giro .capa p{color:var(--mut)}
.fu-lujo .giro .lado{position:absolute;right:var(--g);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.fu-lujo .giro .lado .kicker{margin-bottom:6px}
.fu-lujo .acabado{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--mut);transition:color .3s}
.fu-lujo .acabado i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(10,10,11,.2);transition:box-shadow .3s}
.fu-lujo .acabado[aria-pressed="true"]{color:var(--negro)}
.fu-lujo .acabado[aria-pressed="true"] i{box-shadow:0 0 0 3px var(--blanco),0 0 0 4px var(--negro)}
.fu-lujo .giro .pista{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);font-size:13px;color:var(--mut);letter-spacing:.04em;transition:opacity .6s;white-space:nowrap}
.fu-lujo .giro .avance{position:absolute;left:var(--g);right:var(--g);bottom:0;height:1px;background:var(--linea)}
.fu-lujo .giro .avance b{display:block;height:100%;width:0;background:var(--negro)}
@media (max-width:820px){
  .fu-lujo .giro .capas{left:var(--g);right:var(--g);top:24px;transform:none;width:auto}
  .fu-lujo .giro .capa{transform:none}
  .fu-lujo .giro .capa h2{font-size:22px;margin:8px 0 6px}.fu-lujo .giro .capa p{font-size:15px}
  .fu-lujo .giro .lado{top:auto;bottom:9%;right:var(--g);flex-direction:row;gap:12px}
  .fu-lujo .giro .lado .kicker,.fu-lujo .acabado span{display:none}
  .fu-lujo .giro .pista{bottom:2.5%}
}

/* ---------- 4. colores (oscuro) ---------- */
.fu-lujo .colores{padding:140px 0 120px}
.fu-lujo .colores .rejilla{display:grid;grid-template-columns:.85fr 1.3fr;gap:50px;align-items:center}
.fu-lujo .colores h2{font-size:clamp(34px,5vw,64px);margin:18px 0 26px}
.fu-lujo .colores .texto p{color:var(--mut);max-width:420px}
.fu-lujo .muestras{display:flex;flex-direction:column;margin-top:38px;border-top:1px solid var(--linea)}
.fu-lujo .muestra{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--linea);font-size:18px;color:var(--mut);text-align:left;transition:color .3s,padding .4s}
.fu-lujo .muestra .punto{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}
.fu-lujo .muestra:hover{color:var(--tx)}
.fu-lujo .muestra[aria-pressed="true"]{color:var(--tx);padding-left:12px}
.fu-lujo .escenario{position:relative;aspect-ratio:1200/1024;width:100%}
.fu-lujo .escenario img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .7s,filter .7s}
.fu-lujo .escenario img.base{opacity:.2;filter:saturate(.6)}
.fu-lujo .escenario img.visible{opacity:1}
@media (max-width:820px){.fu-lujo .colores{padding:90px 0}.fu-lujo .colores .rejilla{grid-template-columns:1fr}.fu-lujo .escenario{order:-1}}

/* ---------- 5. cámara (gris) ---------- */
.fu-lujo .camara{padding:130px 0}
.fu-lujo .camara h2{font-size:clamp(34px,5.6vw,76px);max-width:900px;margin:18px 0 64px}
.fu-lujo .camara .rejilla{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.fu-lujo .lente{overflow:hidden;aspect-ratio:1/1.04;display:flex;justify-content:center;-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 98%);mask-image:linear-gradient(to bottom,#000 62%,transparent 98%)}
.fu-lujo .lente img{width:78%;height:auto;max-width:none;align-self:flex-start;transform-origin:50% 12%;transform:scale(1.18);will-change:transform}
.fu-lujo .datos{border-top:1px solid var(--linea)}
.fu-lujo .dato{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--linea)}
.fu-lujo .dato b{font:400 16px/1.35 var(--t);letter-spacing:.02em}
.fu-lujo .dato span{color:var(--mut)}
.fu-lujo .dato strong{color:var(--tx);font-weight:500}
@media (max-width:820px){.fu-lujo .camara{padding:90px 0}.fu-lujo .camara .rejilla{grid-template-columns:1fr}.fu-lujo .dato{grid-template-columns:1fr;gap:6px}}
.fu-lujo .apertura{margin-top:90px;display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.fu-lujo .visor{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000}
.fu-lujo .visor .fondo{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover;object-position:20% 40%}
.fu-lujo .visor .frente{position:absolute;left:50%;top:6%;height:150%;width:auto;max-width:none;transform:translateX(-50%) rotate(-4deg)}
.fu-lujo .visor .lectura{position:absolute;left:18px;top:16px;font:400 15px/1 var(--t);letter-spacing:.06em}
.fu-lujo .apertura h3{font:400 clamp(24px,2.6vw,32px)/1.2 var(--t);margin:16px 0 14px}
.fu-lujo .apertura p{color:var(--mut)}
.fu-lujo .deslizador{margin-top:30px}
.fu-lujo .deslizador input{width:100%;accent-color:var(--hueso);height:28px}
.fu-lujo .deslizador .marcas{display:flex;justify-content:space-between;font-size:13px;color:var(--mut);margin-top:4px}
@media (max-width:820px){.fu-lujo .apertura{grid-template-columns:1fr}}

/* ---------- 6. pantalla (oscuro) ---------- */
.fu-lujo .pantalla{padding:150px 0;overflow:hidden}
.fu-lujo .pantalla .rejilla{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.fu-lujo .pantalla .foto img{max-height:76vh;width:auto;margin:0 auto}
.fu-lujo .cifra{font:400 clamp(70px,12vw,170px)/.9 var(--t);letter-spacing:-.03em}
.fu-lujo .cifra small{font-size:.32em;letter-spacing:0;margin-left:8px;color:var(--mut)}
.fu-lujo .pantalla h2{font-size:clamp(24px,2.8vw,36px);margin:26px 0 14px}
.fu-lujo .pantalla p{color:var(--mut);max-width:470px}
@media (max-width:820px){.fu-lujo .pantalla{padding:90px 0}.fu-lujo .pantalla .rejilla{grid-template-columns:1fr}.fu-lujo .pantalla .foto{order:2}.fu-lujo .pantalla .foto img{max-height:60vh}}

/* ---------- 7. potencia y batería (claro) ---------- */
.fu-lujo .potencia{padding:150px 0}
.fu-lujo .potencia .rejilla{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.fu-lujo .potencia .nombre{font:400 clamp(60px,9vw,128px)/.95 var(--t);letter-spacing:-.02em;margin-top:18px}
.fu-lujo .potencia ul{list-style:none;margin-top:26px;border-top:1px solid var(--linea)}
.fu-lujo .potencia li{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--linea);color:var(--mut)}
.fu-lujo .potencia li b{color:var(--tx);font-weight:500;text-align:right}
.fu-lujo .potencia .bat .cifra{font-size:clamp(110px,17vw,240px);line-height:.85;margin-top:18px}
.fu-lujo .potencia .bat .unidad{font:400 clamp(20px,2.4vw,30px)/1.2 var(--t);margin-top:14px}
@media (max-width:820px){.fu-lujo .potencia{padding:90px 0}.fu-lujo .potencia .rejilla{grid-template-columns:1fr;gap:70px}}

/* ---------- 8. elige y cotiza (oscuro) ---------- */
.fu-lujo .elige{padding:130px 0}
.fu-lujo .elige .rejilla{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.fu-lujo .elige h2{font-size:clamp(32px,4.6vw,58px);margin:18px 0 22px}
.fu-lujo .elige .bajada{color:var(--mut);max-width:440px}
.fu-lujo .grupo{margin-top:34px}
.fu-lujo .grupo .kicker{margin-bottom:14px;display:block}
.fu-lujo .opciones{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--linea)}
.fu-lujo .opciones button{padding:16px 6px;font-size:15px;color:var(--mut);border-right:1px solid var(--linea);transition:background .3s,color .3s}
.fu-lujo .opciones button:last-child{border-right:0}
.fu-lujo .opciones button[aria-pressed="true"]{background:var(--hueso);color:var(--negro);font-weight:600}
.fu-lujo .resumen{margin-top:40px;padding-top:28px;border-top:1px solid var(--linea)}
.fu-lujo .resumen .linea1{font:400 22px/1.3 var(--t)}
.fu-lujo .resumen .linea2{color:var(--mut);margin:8px 0 4px}
.fu-lujo .resumen .linea2 b{color:var(--tx);font-weight:500}
.fu-lujo .resumen .letra{font-size:13px;color:var(--tenue);margin-bottom:26px;max-width:460px}
.fu-lujo .resumen .botones{display:flex;flex-wrap:wrap;gap:12px}
.fu-lujo .pasos{counter-reset:p;border-top:1px solid var(--linea)}
.fu-lujo .paso{display:grid;grid-template-columns:60px 1fr;padding:26px 0;border-bottom:1px solid var(--linea)}
.fu-lujo .paso::before{counter-increment:p;content:"0" counter(p);font:400 15px/1.6 var(--t);color:var(--mut)}
.fu-lujo .paso h3{font-weight:600;font-size:18px;margin-bottom:6px}
.fu-lujo .paso p{color:var(--mut)}
.fu-lujo .aviso{margin-top:30px;color:var(--mut);font-size:15px;border-left:1px solid var(--tx);padding-left:16px}
@media (max-width:820px){.fu-lujo .elige{padding:90px 0}.fu-lujo .elige .rejilla{grid-template-columns:1fr}}

/* ---------- 9. ficha técnica (blanco), con los datos de la tienda ---------- */
.fu-lujo .ficha-lujo{padding:120px 0 130px}
.fu-lujo .ficha-lujo h2{font-size:clamp(28px,3.6vw,44px);margin:18px 0 40px}
.fu-lujo .ficha-lujo dl{display:grid;grid-template-columns:1fr 1fr;column-gap:60px}
.fu-lujo .ficha-lujo .fila{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--linea);font-size:15px}
.fu-lujo .ficha-lujo dt{color:var(--mut)}
.fu-lujo .ficha-lujo dd a{color:var(--tenue);font-size:12px;margin-left:6px;border-bottom:1px solid var(--linea)}
.fu-lujo .ficha-lujo dd a:hover{color:var(--tx)}
.fu-lujo .ficha-lujo .pc{color:var(--tenue)}
.fu-lujo .ficha-lujo .nota{margin-top:26px;max-width:760px}
@media (max-width:820px){.fu-lujo .ficha-lujo{padding:90px 0}.fu-lujo .ficha-lujo dl{grid-template-columns:1fr}.fu-lujo .ficha-lujo .fila{grid-template-columns:120px 1fr}}

/* ---------- barra fija de cotizar (sobre la barra inferior de la tienda en el celular) ---------- */
.fu-lujo-barra{--hueso:#F4F4F5;--negro:#0A0A0B;--btn:var(--hueso);--btntx:var(--negro);position:fixed;left:0;right:0;bottom:0;z-index:29;background:rgba(10,10,11,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(244,244,245,.12);transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.7,.2,1);padding-bottom:env(safe-area-inset-bottom);font-family:var(--fu-f-body,"Inter"),system-ui,sans-serif}
.fu-lujo-barra.visible{transform:none}
.fu-lujo-barra .envoltura{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.fu-lujo-barra .que{font-size:14px;color:#9A9AA1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fu-lujo-barra .que b{color:var(--hueso);font-weight:500}
.fu-lujo-barra .boton{padding:12px 20px;white-space:nowrap;text-decoration:none}
@media (max-width:760px){body.con-bnav .fu-lujo-barra{bottom:64px;padding-bottom:0}}
body.fu-con-lujo .wa{display:none}   /* el WhatsApp ya está en la barra y en «Elige el tuyo» */

/* la tienda pone overflow-x:hidden en <html> Y en <body>: eso vuelve al body un contenedor con scroll y ninguna
   sección «pegada» (ni el encabezado) se queda fija. En esta ficha se cambia por clip, que recorta igual sin romperlo. */
html:has(> body.fu-con-lujo),body.fu-con-lujo{overflow-x:clip}

/* el vidrio esmerilado (backdrop-filter) del encabezado de la tienda, encima del 3D, hacía parpadear el lienzo:
   en esta ficha el encabezado y el buscador del celular van con fondo sólido */
body.fu-con-lujo header.site,body.fu-con-lujo .msearch{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--fu-bg)}
.fu-lujo .giro .fija{isolation:isolate;contain:paint}

/* ---------- aparición al bajar ---------- */
.fu-lujo .revela{opacity:0;transform:translateY(40px);transition:opacity 1s,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.fu-lujo .revela.visto{opacity:1;transform:none}
.fu-lujo .retraso1{transition-delay:.12s}

@media (prefers-reduced-motion:reduce){
  .fu-lujo *,.fu-lujo *::before,.fu-lujo *::after{animation:none!important;transition:none!important}
  .fu-lujo .portada .kicker,.fu-lujo .portada h1,.fu-lujo .portada .bajada,.fu-lujo .portada .acciones,.fu-lujo .portada .foto{opacity:1!important}
  .fu-lujo .revela{opacity:1;transform:none}
  .fu-lujo .frase{height:auto;padding:120px 0}.fu-lujo .frase .fija{position:static;height:auto}.fu-lujo .frase span{color:var(--negro)}
}