:root{
    --paper:#d6d5d0; --paper-2:#cac9c3; --ink:#111113; --ink-2:#2a2a2e; --muted:#4f4e55; --line:#b9b8b1;
    --violet:#2b50d8; --violet-soft:#dbe3fb; --orange:#ff7a3d; --orange-soft:#ffe8dc; --paint:linear-gradient(90deg, #ff9d4d, #ff5fa2); --on-dark:#f4f4f1; --on-dark-muted:#a3a2aa;
    --display:'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
    --body:'Instrument Sans', system-ui, -apple-system, sans-serif;
    --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
    --ease:cubic-bezier(.2,.8,.2,1);
    color-scheme:light;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{ background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width:1180px; margin:0 auto; padding-inline:20px; }
  .label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  :focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:6px; }

  /* barra superior */
  .top{ position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .3s; }
  .top.scrolled{ border-bottom-color:var(--line); }
  .top .mark img{ width:34px; height:34px; }
  /* arriba de todo el menú es una franja de pintura naranja con borde ondulado; al bajar se va para arriba y vuelve el gris */
  .top:not(.scrolled){ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
  /* una sola pieza (bloque + ola), así sube y baja entera sin cortes */
  .top::before{ content:""; position:absolute; left:0; right:0; top:calc(-1px - env(safe-area-inset-top, 0px)); bottom:-16px;   /* cubre también la franja del reloj del celular, sin raya */ z-index:-1; pointer-events:none;
    background:linear-gradient(#ff8a3a, #ff8a3a) 0 0/100% calc(100% - 15px) no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22600%22%20height%3D%2216%22%20viewBox%3D%220%200%20600%2016%22%3E%3Cpath%20fill%3D%22%23ff8a3a%22%20d%3D%22M0%2C0%20L0%2C8.00%20L6%2C8.75%20L12%2C9.47%20L18%2C10.14%20L24%2C10.74%20L30%2C11.24%20L36%2C11.62%20L42%2C11.87%20L48%2C11.99%20L54%2C11.97%20L60%2C11.80%20L66%2C11.51%20L72%2C11.08%20L78%2C10.55%20L84%2C9.93%20L90%2C9.24%20L96%2C8.50%20L102%2C7.75%20L108%2C7.01%20L114%2C6.30%20L120%2C5.65%20L126%2C5.08%20L132%2C4.62%20L138%2C4.28%20L144%2C4.07%20L150%2C4.00%20L156%2C4.07%20L162%2C4.28%20L168%2C4.62%20L174%2C5.08%20L180%2C5.65%20L186%2C6.30%20L192%2C7.01%20L198%2C7.75%20L204%2C8.50%20L210%2C9.24%20L216%2C9.93%20L222%2C10.55%20L228%2C11.08%20L234%2C11.51%20L240%2C11.80%20L246%2C11.97%20L252%2C11.99%20L258%2C11.87%20L264%2C11.62%20L270%2C11.24%20L276%2C10.74%20L282%2C10.14%20L288%2C9.47%20L294%2C8.75%20L300%2C8.00%20L306%2C7.25%20L312%2C6.53%20L318%2C5.86%20L324%2C5.26%20L330%2C4.76%20L336%2C4.38%20L342%2C4.13%20L348%2C4.01%20L354%2C4.03%20L360%2C4.20%20L366%2C4.49%20L372%2C4.92%20L378%2C5.45%20L384%2C6.07%20L390%2C6.76%20L396%2C7.50%20L402%2C8.25%20L408%2C8.99%20L414%2C9.70%20L420%2C10.35%20L426%2C10.92%20L432%2C11.38%20L438%2C11.72%20L444%2C11.93%20L450%2C12.00%20L456%2C11.93%20L462%2C11.72%20L468%2C11.38%20L474%2C10.92%20L480%2C10.35%20L486%2C9.70%20L492%2C8.99%20L498%2C8.25%20L504%2C7.50%20L510%2C6.76%20L516%2C6.07%20L522%2C5.45%20L528%2C4.92%20L534%2C4.49%20L540%2C4.20%20L546%2C4.03%20L552%2C4.01%20L558%2C4.13%20L564%2C4.38%20L570%2C4.76%20L576%2C5.26%20L582%2C5.86%20L588%2C6.53%20L594%2C7.25%20L600%2C8.00%20L600%2C0%20Z%22/%3E%3C/svg%3E") 0 100%/600px 16px repeat-x;
    transition:transform .55s cubic-bezier(.5,0,.3,1); will-change:transform; }
  .top.scrolled::before, .top.pre::before{ transform:translateY(calc(-100% - 10px)); }
  .top.pre::before{ transition:none; }
  .top.drop::before{ transition:transform 1.5s cubic-bezier(.4,0,.2,1); }   /* al entrar baja con un leve rebote */
  .top:not(.scrolled) nav a{ color:var(--ink); font-weight:600; }
  .top:not(.scrolled) nav a:hover{ color:#fff; }
  .top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:62px; }
  .mark{ font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.02em; text-decoration:none; display:flex; align-items:center; gap:8px; }
  .mark i{ width:9px; height:9px; border-radius:50%; background:var(--violet); display:inline-block; }
  .top nav{ display:flex; gap:26px; font-size:14px; }
  .top nav a{ text-decoration:none; color:var(--ink-2); }
  .top nav a:hover{ color:var(--violet); }
  .btn{ display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:999px; font-weight:600; font-size:14.5px; text-decoration:none; border:1.5px solid var(--ink); transition:background .25s, color .25s, transform .2s; cursor:pointer; background:none; font-family:inherit; }
  .btn:active{ transform:scale(.97); }
  .btn-dark{ background:var(--ink); color:var(--paper); }
  .btn-dark:hover{ background:var(--violet); border-color:var(--violet); }
  .btn-line:hover{ background:var(--ink); color:var(--paper); }
  .btn svg{ width:17px; height:17px; }
  .top .btn{ padding:9px 16px; font-size:13.5px; }
  @media (max-width:760px){
    .top .wrap{ height:auto; flex-wrap:wrap; row-gap:4px; padding-top:8px; padding-bottom:6px; }
    .top nav{ order:3; width:100%; justify-content:space-between; gap:0; font-size:13.5px; }
  }

  /* portada */
  .hero{ padding-block:64px 40px; }
  .hero .wrap{ display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center; }
  .hero h1{ font-family:var(--display); font-weight:800; font-size:clamp(52px, 9.5vw, 132px); line-height:.9; letter-spacing:-.045em; }
  .hero h1 .ln{ display:block; overflow:hidden; padding-bottom:.04em; }
  .hero h1 .ln span{ display:inline-block; animation:rise .95s var(--ease) both; }
  .hero h1 .ln:nth-child(2) span{ animation-delay:.08s; }
  @keyframes rise{ from{ transform:translateY(105%); } }
  .rot{ margin-top:22px; font-family:var(--display); font-weight:600; font-size:clamp(22px, 3vw, 34px); letter-spacing:-.02em; line-height:1.2; display:flex; flex-wrap:wrap; gap:0 .35em; }
  .rot .fixed{ color:var(--muted); }
  .rot .words{ position:relative; display:inline-grid; color:var(--violet); }
  .rot .words span{ background:linear-gradient(90deg, var(--violet) 10%, var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.08em; }
  .rot .words span{ grid-area:1/1; opacity:0; transform:translateY(40%); transition:opacity .5s ease, transform .6s var(--ease); white-space:nowrap; }
  .rot .words span.on{ opacity:1; transform:none; }
  .rot .words span.out{ opacity:0; transform:translateY(-40%); }
  .hero p.lead{ margin-top:22px; max-width:52ch; font-size:17px; color:var(--ink-2); }
  .hero .ctas{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
  .hero .meta{ margin-top:34px; display:flex; flex-wrap:wrap; gap:8px 22px; }
  .phone{ position:relative; justify-self:center; width:min(290px, 72vw); border-radius:44px; background:#0c0c0e; padding:11px; box-shadow:0 50px 90px -40px rgba(17,17,19,.55), inset 0 0 0 1.5px #2b2b30; animation:float 7s ease-in-out infinite; }
  .phone::before{ content:""; position:absolute; top:19px; left:50%; width:84px; height:22px; margin-left:-42px; border-radius:20px; background:#0c0c0e; z-index:2; }
  .phone .screen{ width:100%; aspect-ratio:390/844; border-radius:34px; overflow:hidden; background:#000; position:relative; }
  .phone .screen img, .phone .screen video{ width:100%; height:100%; object-fit:cover; object-position:top; position:absolute; inset:0; opacity:0; transition:opacity 1s ease; }
  .phone .screen .on{ opacity:1; }
  .phone .tag{ position:absolute; left:-18px; bottom:64px; z-index:3; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:9px 12px; font-size:12.5px; box-shadow:0 16px 30px -18px rgba(0,0,0,.35); }
  .phone .tag b{ display:block; font-family:var(--display); font-size:14px; }
  @keyframes float{ 50%{ transform:translateY(-10px); } }
  @media (max-width:860px){ .hero .wrap{ grid-template-columns:1fr; } .phone{ margin-top:20px; } }
  /* anillo de trabajos que gira detrás del celular (lo mueve el JS: posición, tamaño y profundidad) */
  .hero{ overflow:clip; }
  .showcase{ position:relative; justify-self:center; display:grid; place-items:center; --cw:170px; }
  .hero .wrap > div:first-child{ position:relative; z-index:3; }
  .showcase .phone{ z-index:2; }
  .orbit{ position:absolute; left:50%; top:46%; width:0; height:0; z-index:1; pointer-events:none; }
  .orbit > img, .orbit > video, .orbit > .ocyc{ position:absolute; width:var(--cw); max-width:none; aspect-ratio:4/5; object-fit:cover; left:calc(var(--cw) / -2); top:calc(var(--cw) * -.625); border-radius:16px; box-shadow:0 24px 44px -24px rgba(17,17,19,.55); opacity:0; will-change:transform, opacity; -webkit-user-select:none; user-select:none; }
  .orbit video::-webkit-media-controls, .orbit video::-webkit-media-controls-panel, .orbit video::-webkit-media-controls-overlay-play-button,
  .orbit video::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none; opacity:0 !important; }   /* en Safari no deben aparecer botones: solo pasa */
  .ocyc{ overflow:hidden; background:var(--paper-2); }
  .ocyc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; clip-path:inset(0 0 100% 0); transition:clip-path .9s cubic-bezier(.6,0,.2,1); }
  .ocyc img.on{ clip-path:inset(0); }
  @media (max-width:860px){ .showcase{ --cw:112px; margin-top:20px; } .showcase .phone{ margin-top:0; } }
  @media (max-width:760px){ .showcase .phone{ width:min(180px, 47vw); border-radius:30px; padding:7px; } .showcase .phone .screen{ border-radius:24px; } .showcase .phone .tag{ left:-10px; bottom:40px; padding:7px 10px; font-size:11.5px; } .showcase .phone .tag b{ font-size:12.5px; } }

  /* cinta */
  .ribbon{ border-block:1px solid var(--line); overflow:hidden; padding-block:16px; background:var(--paper); }
  .ribbon .track{ display:flex; gap:42px; width:max-content; animation:slide 38s linear infinite; font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-.02em; }
  .ribbon .track span{ display:flex; align-items:center; gap:42px; white-space:nowrap; }
  .ribbon .track span::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--violet); }
  .ribbon .track span:nth-child(even)::after{ background:var(--orange); }
  @keyframes slide{ to{ transform:translateX(-50%); } }

  section.block{ padding-block:96px; }
  .head{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:end; margin-bottom:44px; }
  .head h2{ font-family:var(--display); font-weight:800; font-size:clamp(36px, 5.4vw, 64px); line-height:.98; letter-spacing:-.035em; text-wrap:balance; }
  .head p{ color:var(--ink-2); max-width:48ch; justify-self:end; }
  @media (max-width:760px){ .head{ grid-template-columns:1fr; } .head p{ justify-self:start; } section.block{ padding-block:72px; } }

  /* servicios */
  .services{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 28px; }
  .svc{ padding:24px 0 30px; border-top:1px solid var(--ink); display:flex; flex-direction:column; gap:12px; }
  .svc .ic{ width:44px; height:44px; border-radius:12px; background:var(--violet-soft); color:var(--violet); display:grid; place-items:center; transition:transform .4s var(--ease), background .3s, color .3s; }
  .svc:hover .ic{ transform:rotate(-8deg) scale(1.06); background:var(--violet); color:#fff; }
  .svc .ic svg{ width:22px; height:22px; }
  .svc h3{ font-family:var(--display); font-size:22px; line-height:1.1; letter-spacing:-.02em; }
  .svc p{ font-size:14.5px; color:var(--ink-2); }
  .svc .kind{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--violet); }
  @media (max-width:960px){ .services{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .services{ grid-template-columns:1fr; } }

  /* caso */
  .case{ background:var(--ink); color:var(--on-dark); border-radius:28px; overflow:hidden; }
  .case-top{ padding:44px 44px 0; display:grid; grid-template-columns:1fr 1fr; gap:30px; }
  .case .label{ color:var(--on-dark-muted); }
  .case h3{ font-family:var(--display); font-weight:800; font-size:clamp(40px, 6vw, 76px); line-height:.92; letter-spacing:-.04em; margin-top:12px; }
  .case h3 em{ font-style:normal; color:#c9974e; }
  .case p{ color:var(--on-dark-muted); max-width:52ch; margin-top:16px; }
  .facts{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#2b2b30; border-radius:16px; overflow:hidden; align-self:start; }
  .fact{ background:var(--ink); padding:18px 18px 16px; }
  .fact b{ display:block; font-family:var(--display); font-size:34px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
  .fact span{ font-size:13px; color:var(--on-dark-muted); }
  .case-shots{ position:relative; margin-top:44px; padding:0 44px; min-height:560px; }
  .desk{ position:relative; margin-right:190px; border-radius:14px 14px 0 0; overflow:hidden; background:#1c1c20; border:1px solid #2b2b30; border-bottom:0; }
  .desk .bar{ height:30px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#1c1c20; }
  .desk .bar i{ width:9px; height:9px; border-radius:50%; background:#3a3a40; }
  .desk .bar span{ margin-left:10px; font-family:var(--mono); font-size:11px; color:var(--on-dark-muted); }
  .desk .view{ position:relative; aspect-ratio:1440/900; }
  .desk .view img, .desk .view video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transition:opacity .9s ease; }
  .desk .view .on{ opacity:1; }
  .case-shots .phone{ position:absolute; right:44px; top:40px; width:230px; animation:none; box-shadow:0 40px 80px -30px rgba(0,0,0,.8), inset 0 0 0 1.5px #2b2b30; }
  .case-bottom{ padding:30px 44px 44px; display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; justify-content:space-between; border-top:1px solid #2b2b30; }
  .feat{ display:flex; flex-wrap:wrap; gap:8px; }
  .feat span{ font-size:12.5px; border:1px solid #3a3a40; border-radius:999px; padding:6px 12px; color:#d9d8de; }
  .case .btn{ border-color:var(--on-dark); color:var(--on-dark); }
  .case .btn:hover{ background:var(--on-dark); color:var(--ink); }
  .switch{ display:flex; gap:8px; margin-top:22px; }
  .switch button{ font:inherit; font-size:13px; padding:8px 14px; border-radius:999px; border:1px solid #3a3a40; background:none; color:var(--on-dark-muted); cursor:pointer; transition:all .25s; }
  .switch button[aria-pressed="true"]{ background:var(--on-dark); color:var(--ink); border-color:var(--on-dark); }
  @media (max-width:900px){
    .case-top{ grid-template-columns:1fr; padding:30px 22px 0; }
    .case-shots{ min-height:0; padding:0 22px; display:flex; flex-direction:column; gap:24px; align-items:center; }
    .desk{ margin-right:0; width:100%; border-radius:12px; border-bottom:1px solid #2b2b30; }
    .case-shots .phone{ position:relative; right:auto; top:auto; width:220px; }
    .case-bottom{ padding:26px 22px 30px; margin-top:26px; }
  }

  /* experiencia interactiva: videos reales de M Perfumerie */
  .ix{ margin-top:72px; }
  .ix-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .ix-card{ border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--paper); display:flex; flex-direction:column; }
  .ix-card video{ display:block; width:100%; aspect-ratio:2.33; object-fit:cover; background:#efe8e0; }
  .ix-card.dark video{ background:#0d0c0b; }
  .ix-txt{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; padding:18px 20px 20px; border-top:1px solid var(--line); }
  .ix-txt .n{ font-family:var(--mono); font-size:12px; color:var(--orange); padding-top:4px; }
  .ix-txt h4{ font-family:var(--display); font-size:21px; letter-spacing:-.02em; line-height:1.15; }
  .ix-txt p{ font-size:14px; color:var(--ink-2); margin-top:4px; }
  @media (max-width:760px){ .ix-grid{ grid-template-columns:1fr; } }

  /* producto interactivo: campera 360 que se abre */
  .p3{ margin-top:72px; display:grid; grid-template-columns:1fr minmax(260px, 380px); gap:40px; align-items:center; }
  .p3-txt h3{ font-family:var(--display); font-weight:800; font-size:clamp(34px, 4.8vw, 56px); line-height:.98; letter-spacing:-.035em; margin-top:10px; }
  .p3-txt p{ color:var(--ink-2); margin-top:14px; max-width:50ch; }
  .p3-txt .p3-how{ font-size:14px; color:var(--muted); }
  .p3-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
  .p3-tags span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--orange); background:var(--orange-soft); border-radius:999px; padding:6px 12px; }
  .p3-stage{ position:relative; aspect-ratio:9/16; border-radius:26px; overflow:hidden; background:#141417 center/cover no-repeat; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; box-shadow:0 40px 80px -40px rgba(17,17,19,.6); }
  .p3-stage.dragging{ cursor:grabbing; }
  .p3-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .4s; }
  .p3-stage.ready .p3-canvas{ opacity:1; }
  /* cierre: al acercar el mouse al tirador (el cierre chiquito) se ilumina; se agarra y se baja. Se cierra con un clic */
  .p3-stage{ --zt:30.8%; --zh:42.7%; }   /* tirador real del cierre (30,8% del alto) hasta el ruedo (73,5%) */
  .p3-zip{ position:absolute; left:50%; width:0; top:var(--zt); height:var(--zh); pointer-events:none; }
  .p3-zip .pull{ position:absolute; left:0; top:calc(var(--zp, 0) * 100%); width:clamp(6px, 2cqw, 9px); height:clamp(12px, 4cqw, 18px); transform:translate(-50%, -50%); border-radius:2px; background:#ffb27a; opacity:0; transition:opacity .2s; box-shadow:0 0 8px 2px rgba(255,140,60,.9); }
  .p3-stage{ container-type:inline-size; }
  .p3-stage.front .p3-zip .pull{ opacity:.85; animation:glow 1.4s ease-in-out infinite; }
  .p3-stage.near .p3-zip .pull, .p3-stage.zipping .p3-zip .pull{ opacity:1; }
  .p3-stage.near:not(.zipping) .p3-zip .pull{ animation:glow 1s ease-in-out infinite; }
  @keyframes glow{ 50%{ box-shadow:0 0 12px 4px rgba(255,140,60,.6); background:#ffd2ad; } }
  .p3-stage.near, .p3-stage.near.dragging{ cursor:grab; }
  .p3-stage.zipping{ cursor:grabbing; }
  .p3-load{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(0,0,0,.45); color:#fff; font-size:12px; white-space:nowrap; transition:opacity .4s; pointer-events:none; }
  .p3-load span{ width:12px; height:12px; border-radius:50%; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; animation:spin .8s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .p3-stage.ready .p3-load{ opacity:0; }
  .p3-hint{ position:absolute; left:50%; top:18px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:12px; white-space:nowrap; transition:opacity .4s; pointer-events:none; }
  .p3-hint .hand{ display:inline-block; animation:nudge 1.6s ease-in-out infinite; }
  @keyframes nudge{ 50%{ transform:translateX(5px); } }
  .p3-stage.used .p3-hint{ opacity:0; }
  @media (max-width:820px){ .p3{ grid-template-columns:1fr; } .p3-stage{ max-width:340px; width:100%; justify-self:center; } }

  /* galería de contenido con IA */
  .ai{ margin-top:72px; }
  .ai-head{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:end; margin-bottom:22px; }
  .ai-head h3{ font-family:var(--display); font-weight:800; font-size:clamp(34px, 4.8vw, 56px); line-height:.98; letter-spacing:-.035em; margin-top:10px; text-wrap:balance; }
  .ai-head p{ color:var(--ink-2); max-width:48ch; justify-self:end; }
  .cats{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
  .cats button{ font:inherit; font-size:13.5px; padding:8px 15px; border-radius:999px; border:1px solid var(--ink); background:none; color:var(--ink); cursor:pointer; transition:background .25s, color .25s; }
  .cats button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
  .gallery{ columns:4 240px; column-gap:14px; }
  .tile{ position:relative; display:block; width:100%; margin:0 0 14px; padding:0; border:0; border-radius:16px; overflow:hidden; background:var(--paper-2); cursor:zoom-in; break-inside:avoid; font:inherit; text-align:left; }
  .tile img, .tile video{ width:100%; height:auto; display:block; transition:transform .6s var(--ease); }
  .tile:hover img, .tile:hover video{ transform:scale(1.035); }
  .tile .cap{ position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px; background:linear-gradient(transparent, rgba(0,0,0,.72)); color:#fff; font-size:12.5px; display:flex; flex-direction:column; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; }
  .tile .cap b{ font-family:var(--display); font-size:15px; letter-spacing:-.01em; }
  .tile:hover .cap, .tile:focus-visible .cap{ opacity:1; transform:none; }
  .tile .play{ position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%23fff'/%3E%3C/svg%3E") center/18px no-repeat; }
  .tile[hidden]{ display:none; }
  .gallery.js{ columns:auto; display:flex; gap:14px; align-items:flex-start; }
  .gallery.js .gcol{ flex:1; min-width:0; }
  @media (hover:none){ .tile .cap{ opacity:1; transform:none; } }
  @media (max-width:760px){ .ai-head{ grid-template-columns:1fr; } .ai-head p{ justify-self:start; } .gallery{ columns:2; column-gap:10px; } .gallery.js{ gap:10px; } .tile{ margin-bottom:10px; border-radius:12px; } .tile .cap{ padding:22px 10px 9px; font-size:11.5px; } .tile .cap b{ font-size:13px; } .tile.wide .cap .sub{ display:none; } }
  .lb{ border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh; width:100vw; height:100vh; }
  .lb::backdrop{ background:rgba(10,10,12,.92); }
  .lb .stage{ position:absolute; inset:56px 64px 70px; display:grid; place-items:center; }
  .lb .stage img, .lb .stage video{ max-width:100%; max-height:100%; width:auto; height:auto; border-radius:10px; }
  .lb .txt{ position:absolute; left:0; right:0; bottom:22px; text-align:center; color:#f4f4f1; font-size:14px; }
  .lb .txt b{ font-family:var(--display); margin-right:8px; }
  .lb button{ position:absolute; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.35); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
  .lb .x{ top:14px; right:14px; }
  .lb .prev{ left:12px; top:50%; margin-top:-23px; }
  .lb .next{ right:12px; top:50%; margin-top:-23px; }
  @media (max-width:600px){ .lb .stage{ inset:64px 10px 70px; } .lb .prev, .lb .next{ top:auto; bottom:12px; margin:0; } .lb .txt{ bottom:26px; padding-inline:64px; font-size:12.5px; } }

  /* planes */
  .plans{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .plan{ border:1.5px solid var(--ink); border-radius:24px; padding:30px 28px; display:flex; flex-direction:column; gap:18px; background:var(--paper); position:relative; }
  .plan.pro{ background:var(--ink); color:var(--on-dark); }
  .plan .name{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 12px; }
  .plan h3{ font-family:var(--display); font-weight:800; font-size:40px; letter-spacing:-.035em; line-height:1; }
  .plan .for{ font-size:14.5px; color:var(--ink-2); max-width:44ch; }
  .plan.pro .for{ color:var(--on-dark-muted); }
  .plan .chip{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; padding:5px 10px; border-radius:999px; background:var(--violet); color:#fff; white-space:nowrap; }
  .plan ul{ list-style:none; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:18px; }
  .plan.pro ul{ border-color:#2b2b30; }
  .plan li{ display:grid; grid-template-columns:20px 1fr; gap:10px; font-size:14.5px; }
  .plan li::before{ content:""; width:16px; height:16px; margin-top:3px; border-radius:50%; background:var(--violet-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%235b3cf5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
  .plan.pro li::before{ background-color:#2a2350; }
  .plan li.inc{ font-weight:600; }
  /* planes resumidos: se ven los primeros puntos y "Ver más" despliega el resto */
  .plan.short:not(.open) li:nth-child(n+4){ display:none; }
  .plan .more-btn{ font:inherit; font-size:14px; font-weight:600; background:none; border:0; padding:4px 0; color:var(--violet); cursor:pointer; text-align:left; }
  .plan.pro .more-btn{ color:#9fb4ff; }
  .plan .more-btn:hover{ text-decoration:underline; text-underline-offset:3px; }
  .plan .actions{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; padding-top:8px; }
  .plan.pro .btn-dark{ background:var(--violet); border-color:var(--violet); }
  .plan.pro .btn-dark:hover{ background:var(--on-dark); color:var(--ink); border-color:var(--on-dark); }
  .plan.pro .btn-line{ border-color:var(--on-dark); color:var(--on-dark); }
  .plan.pro .btn-line:hover{ background:var(--on-dark); color:var(--ink); }
  .plan .note{ font-size:12.5px; color:var(--muted); }
  .plan.pro .note{ color:var(--on-dark-muted); }
  .extra{ margin-top:20px; border:1px dashed var(--ink-2); border-radius:20px; padding:22px 26px; display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between; }
  .extra b{ font-family:var(--display); font-size:22px; letter-spacing:-.02em; }
  .extra p{ font-size:14.5px; color:var(--ink-2); max-width:62ch; }
  .group{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 20px; margin:0 0 18px; }
  .group h3{ font-family:var(--display); font-weight:800; font-size:clamp(26px, 3.4vw, 36px); letter-spacing:-.03em; display:flex; align-items:center; gap:12px; }
  .group h3 i{ font-style:normal; font-family:var(--mono); font-size:12px; font-weight:400; letter-spacing:.08em; color:#fff; background:var(--violet); border-radius:999px; padding:4px 10px; }
  .group p{ font-size:14.5px; color:var(--ink-2); max-width:56ch; }
  .group.second{ margin-top:64px; }
  .group.second h3 i{ background:var(--paint); }
  .group.second + .plans .chip{ background:var(--paint); }
  .group.second + .plans .plan.pro .btn-dark{ background:var(--orange); border-color:var(--orange); }
  .group.second + .plans li::before{ background-color:var(--orange-soft); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23ff7a3d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  /* títulos de los planes subrayados (azul páginas web, naranja contenido con IA) y "Premium" en naranja */
  .group h3 .ul{ position:relative; z-index:0; padding:0 .14em; color:#fff; }
  .group h3 .ul::before{ content:""; position:absolute; z-index:-1; left:-.06em; right:-.1em; top:.12em; bottom:.02em; background:var(--violet);
    clip-path:polygon(1% 8%,22% 2%,48% 6%,73% 0%,99% 5%,100% 92%,76% 100%,50% 94%,24% 99%,0% 95%); transform:rotate(-1.2deg); }
  .group.second h3 .ul::before{ background:var(--orange); }
  .plan.pro h3{ color:var(--orange); }
  /* Premium de páginas web con los mismos toques naranjas que el de contenido con IA */
  .plan.pro .btn-dark{ background:var(--orange); border-color:var(--orange); }
  .plan.pro li::before{ background-color:#3a2418; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23ff7a3d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .plan.pro .more-btn{ color:#ffa36e; }
  .group.second + .plans .plan.pro li::before{ background-color:#3a2418; }
  .svc:nth-child(n+5) .kind{ color:var(--orange); }
  .svc:nth-child(n+5) .ic{ background:var(--orange-soft); color:var(--orange); }
  .svc:nth-child(n+5):hover .ic{ background:var(--orange); color:#fff; }
  @media (max-width:860px){ .plans{ grid-template-columns:1fr; } }

  /* proceso */
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:s; }
  .step{ border-top:1.5px solid var(--ink); padding-top:18px; }
  .step .n{ font-family:var(--mono); font-size:12px; color:var(--orange); }
  .step h3{ font-family:var(--display); font-size:22px; letter-spacing:-.02em; margin:8px 0 6px; }
  .step p{ font-size:14.5px; color:var(--ink-2); }
  @media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

  /* sobre mí */
  .about{ display:grid; grid-template-columns:320px 1fr; gap:48px; align-items:start; }
  .about .photo{ border-radius:24px; overflow:hidden; aspect-ratio:4/5; background:var(--paper-2); }
  .about .photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9); }
  .about h2{ font-family:var(--display); font-weight:800; font-size:clamp(34px, 4.6vw, 54px); letter-spacing:-.035em; line-height:1; text-wrap:balance; }
  .about p{ margin-top:16px; color:var(--ink-2); max-width:60ch; }
  .roles{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:22px; font-family:var(--display); font-weight:800; font-size:clamp(20px, 2.4vw, 26px); letter-spacing:-.02em; }
  .roles span{ display:flex; align-items:center; gap:10px; }
  .roles span + span::before{ content:"→"; font-weight:400; background:var(--paint); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .tools{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
  .tools span{ font-size:13px; padding:7px 13px; border-radius:999px; background:var(--paper-2); border:1px solid var(--line); }
  .exp{ margin-top:28px; display:grid; gap:0; border-top:1px solid var(--line); }
  .exp div{ display:grid; grid-template-columns:120px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
  .exp div span:first-child{ font-family:var(--mono); font-size:12px; color:var(--muted); padding-top:2px; }
  @media (max-width:820px){ .about{ grid-template-columns:1fr; } .about .photo{ max-width:260px; } }

  .apps{ margin-top:30px; }
  .apps ul{ list-style:none; padding:0; margin:12px 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(188px, 1fr)); gap:8px; }
  .apps li{ display:grid; grid-template-columns:38px 1fr; column-gap:11px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
  .apps .i{ grid-row:span 2; width:38px; height:38px; border-radius:10px; background:var(--c); display:grid; place-items:center; overflow:hidden; }
  .apps .i img{ width:21px; height:21px; }
  .apps .i.full img{ width:100%; height:100%; object-fit:cover; }
  .apps b{ font-size:14px; line-height:1.25; align-self:end; }
  .apps small{ font-size:12px; color:var(--muted); line-height:1.25; align-self:start; }
  @media (max-width:760px){
    .apps ul{ grid-template-columns:repeat(4, 1fr); gap:10px 6px; }
    .apps li{ grid-template-columns:1fr; justify-items:center; text-align:center; padding:0; border:0; background:none; row-gap:5px; }
    .apps .i{ grid-row:auto; width:46px; height:46px; border-radius:12px; }
    .apps .i img{ width:25px; height:25px; }
    .apps b{ font-size:11.5px; font-weight:600; }
    .apps small{ display:none; }
  }

  /* mockup de la campera en compu y celular (portfolio) */
  .p3-mock{ margin:44px 0 0; }
  .p3-mock video{ width:100%; aspect-ratio:1280 / 956; display:block; border-radius:24px; background:#2a2622; object-fit:cover; }
  .p3-mock figcaption{ margin-top:12px; font-size:14px; color:var(--muted); max-width:70ch; }
  @media (max-width:760px){ .p3-mock{ margin-top:28px; } .p3-mock video{ border-radius:16px; } }

  /* logo animado: balde de pintura y pincel (inicio: al lado del nombre y abajo de todo) */
  .logo-balde, .logo-pincel{ display:block; aspect-ratio:82 / 96; cursor:pointer; }
  .logo-balde svg, .logo-pincel svg{ width:100%; height:100%; display:block; overflow:visible; }
  .logo-balde:focus-visible, .logo-pincel:focus-visible{ outline:3px solid var(--orange); outline-offset:4px; border-radius:14px; }
  .hero h1{ position:relative; }
  .hero h1 .ln{ position:relative; z-index:1; }
  .hero-balde{ position:absolute; left:2.94em; top:.62em; width:.96em; z-index:0; }
  @media (max-width:860px){ .hero-balde{ left:calc(50% + .58em); top:.03em; width:1.48em; } }   /* en celular: centrado en el espacio libre al lado de "Bosio", apoyado en la misma línea, un poco más grande */   /* en la línea de "Bosio", un espacio después de la o */
  .firma{ display:flex; justify-content:center; gap:28px; padding-top:40px; }
  .firma > div{ width:170px; }
  @media (max-width:760px){ .firma{ gap:20px; padding-top:34px; } .firma > div{ width:150px; } }

  /* contacto */
  .contact{ background:var(--violet); color:#fff; border-radius:28px; padding:56px 44px; display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:end; }
  .contact{ position:relative; margin-bottom:90px; }
  .contact > *:not(.drip-svg){ position:relative; z-index:1; }
  .contact h2{ font-family:var(--display); font-weight:800; font-size:clamp(40px, 6.6vw, 88px); line-height:.9; letter-spacing:-.045em; }
  .contact .lines{ display:flex; flex-direction:column; gap:14px; }
  .contact .row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; align-items:center; border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:12px; }
  .contact .row .label{ color:rgba(255,255,255,.7); }
  .contact .row a, .contact .row span.v{ font-size:17px; font-weight:600; text-decoration:none; color:#fff; overflow-wrap:anywhere; }
  .contact .row a:hover{ text-decoration:underline; }
  .copy{ font:inherit; font-size:12px; border:1px solid rgba(255,255,255,.5); background:none; color:#fff; border-radius:999px; padding:4px 10px; cursor:pointer; }
  .contact .btn{ background:#fff; color:var(--violet); border-color:#fff; margin-top:10px; align-self:flex-start; }
  .contact .btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
  @media (max-width:820px){ .contact{ grid-template-columns:1fr; padding:40px 24px; } }
  footer{ padding-block:34px 44px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } .rot .words span.on{ opacity:1; transform:none; } }
  /* ¿Qué vamos a crear? — barra tipo base44.com: escribís qué querés, sumás una foto y se genera una base simple en el navegador */
  .make{ background-color:#ebeae6; background-image:radial-gradient(circle, rgba(17,17,19,.10) 1px, transparent 1.3px); background-size:14px 14px; }
  .make .intro{ text-align:center; max-width:760px; margin:0 auto 34px; }
  .make h2{ font-family:var(--display); font-weight:800; font-size:clamp(40px, 6.4vw, 84px); line-height:.98; letter-spacing:-.03em; text-wrap:balance; }
  .make .intro p{ margin:18px auto 0; max-width:54ch; color:var(--ink-2); font-size:17px; }
  .gen{ max-width:780px; margin:0 auto; }
  .gbox{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px 16px 14px 20px; box-shadow:0 34px 60px -44px rgba(17,17,19,.45); transition:border-color .2s, box-shadow .2s; }
  .gbox:focus-within{ border-color:#b3c3f3; box-shadow:0 34px 60px -44px rgba(17,17,19,.45), 0 0 0 4px var(--violet-soft); }
  .gbox.drag{ border:1.5px dashed var(--violet); background:#f6f8ff; }
  .gbox textarea{ display:block; width:100%; min-height:78px; max-height:200px; border:0; outline:0; resize:none; background:transparent; font:inherit; font-size:17px; line-height:1.45; color:var(--ink); }
  .gbox textarea::placeholder{ color:#9b9aa2; }
  .gbar{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
  .gadd{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; cursor:pointer; color:var(--ink); transition:background .2s, transform .2s; }
  .gadd:hover{ background:var(--paper); } .gadd:active{ transform:scale(.94); }
  .gadd svg{ width:20px; height:20px; }
  .gthumb{ display:none; align-items:center; gap:8px; padding:4px 6px 4px 4px; border-radius:10px; background:var(--paper); font-size:13px; max-width:210px; }
  .gthumb.on{ display:inline-flex; }
  .gthumb img{ width:32px; height:32px; border-radius:7px; object-fit:cover; background:#fff; }
  .gthumb span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .gthumb button{ border:0; background:none; cursor:pointer; font-size:18px; line-height:1; color:var(--muted); padding:0 4px; }
  .gmode{ margin-left:auto; display:inline-flex; padding:3px; border-radius:10px; background:var(--paper); }
  .gmode button{ border:0; background:none; font:inherit; font-size:14px; font-weight:600; padding:7px 12px; border-radius:8px; cursor:pointer; color:var(--muted); transition:background .2s, color .2s; }
  .gmode button[aria-pressed="true"]{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(17,17,19,.14); }
  .gsend{ width:42px; height:42px; border-radius:10px; border:0; background:var(--orange); color:#fff; display:grid; place-items:center; cursor:pointer; transition:transform .2s, filter .2s, opacity .2s; }
  .gsend:hover{ filter:brightness(1.06); } .gsend:active{ transform:scale(.94); }
  .gsend:disabled{ opacity:.45; cursor:default; }
  .gsend svg{ width:20px; height:20px; }
  .gchips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px; }
  .gchips button{ border:1px solid var(--line); background:rgba(255,255,255,.7); border-radius:999px; padding:8px 14px; font:inherit; font-size:13.5px; color:var(--ink-2); cursor:pointer; transition:background .2s, border-color .2s, color .2s; }
  .gchips button:hover{ background:#fff; border-color:var(--ink); color:var(--ink); }
  .gnote{ text-align:center; margin-top:10px; font-size:13px; color:var(--muted); }
  .gout{ margin-top:34px; display:none; }
  .gout.on{ display:block; }
  .gout-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
  .gout-top .st{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
  .gout-top .acts{ display:flex; gap:10px; flex-wrap:wrap; }
  .gout-top .btn{ padding:10px 16px; font-size:13.5px; }
  .ggrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px; }
  .ggrid.four{ grid-template-columns:repeat(4, 1fr); }
  @media (max-width:860px){ .ggrid.four{ grid-template-columns:1fr 1fr; } }
  .gcard{ position:relative; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 20px 40px -30px rgba(17,17,19,.5); animation:gpop .5s var(--ease) both; }
  .gcard canvas{ display:block; width:100%; height:auto; }
  .gcard .cap{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; font-size:13px; font-weight:600; }
  .gcard .dl{ border:0; background:var(--paper); border-radius:8px; width:32px; height:32px; display:grid; place-items:center; color:var(--ink); cursor:pointer; flex:none; }
  .gcard .own{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
  .gcard .dl:hover{ background:var(--ink); color:var(--paper); }
  .gskel{ aspect-ratio:var(--ar, 1); border-radius:14px; background:linear-gradient(100deg, #fff 30%, #f1efff 50%, #fff 70%) 0 0/300% 100%; animation:gshine 1.2s linear infinite; }
  @keyframes gshine{ to{ background-position:-150% 0; } }
  @keyframes gpop{ from{ opacity:0; transform:translateY(14px) scale(.97); } }
  @media (max-width:560px){
    .gbox{ padding:14px 12px 12px 14px; }
    .gmode button{ padding:7px 9px; font-size:13px; }
    .ggrid{ grid-template-columns:1fr 1fr; gap:10px; }
  }
  @media (prefers-reduced-motion:reduce){ .gcard, .gskel{ animation:none; transition:none; } }

  /* ---------- inicio: pantallazos del portfolio ---------- */
  .peek{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
  .pk{ position:relative; display:block; aspect-ratio:4/5; border-radius:22px; overflow:hidden; background:#d2c7bc; color:#fff; text-decoration:none; isolation:isolate; }
  .pk.dark{ background:#141417; }
  .pk img, .pk video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
  .pk video{ object-position:top; }
  .pk video.pk-cel{ object-position:center 6%; }
  .pk video.pk-mid{ object-position:center; }
  .pk::after{ content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent, rgba(0,0,0,.72)); z-index:1; }
  .pk:hover img, .pk:hover video{ transform:scale(1.05); }
  .pk-cap{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2; }
  .pk-cap .label{ color:rgba(255,255,255,.75); font-size:10.5px; }
  .pk-cap b{ display:block; font-family:var(--display); font-size:22px; letter-spacing:-.02em; line-height:1.05; margin-top:3px; }
  .peek-go{ margin-top:26px; display:flex; justify-content:center; }
  @media (max-width:860px){ .peek{ grid-template-columns:1fr 1fr; gap:10px; } .pk{ border-radius:16px; } .pk-cap b{ font-size:18px; } .pk-cap{ left:12px; bottom:10px; } }

  /* ---------- página de portfolio ---------- */
  .pf-top{ padding-bottom:10px; }
  .pf-title{ font-family:var(--display); font-weight:800; font-size:clamp(48px, 8vw, 110px); line-height:.9; letter-spacing:-.045em; margin-top:14px; }
  .pf-lead{ color:var(--ink-2); max-width:52ch; margin-top:16px; font-size:17px; }
  .pf-jump{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
  .pf-jump a{ text-decoration:none; font-size:14px; padding:9px 15px; border-radius:999px; border:1px solid var(--line); background:#fff; transition:background .2s, color .2s; }
  .pf-jump a:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .pf-sec{ scroll-margin-top:70px; }
  .pf-h{ font-family:var(--mono); font-weight:500; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); display:flex; align-items:center; gap:12px; margin-bottom:26px; }
  .pf-h::after{ content:""; flex:1; height:1px; background:var(--line); }
  .pf-sec .p3:first-of-type{ margin-top:0; }
  .pf-sec .ai{ margin-top:0; }
  #producto-360, #probador{ scroll-margin-top:80px; }

  /* ---------- probador integrado (mismo formato que la campera 360) ---------- */
  .pv-stage{ position:relative; aspect-ratio:1080/1341; border-radius:26px; overflow:hidden; background:#d2c7bc; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; box-shadow:0 40px 80px -40px rgba(17,17,19,.5); }
  .pv-stage.drag{ cursor:grabbing; }
  .pv-lay, .pv-spin{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; }
  .pv-in{ clip-path:inset(0 0 0 100%); }
  .pv-spin{ opacity:0; transition:opacity .3s; }
  .pv-stage.turning .pv-spin{ opacity:1; }
  .pv-scan{ position:absolute; top:0; bottom:0; width:2px; left:0; opacity:0; pointer-events:none; background:#fff; box-shadow:0 0 18px 4px rgba(255,255,255,.8), 0 0 60px 10px rgba(255,157,77,.55); }
  .pv-stage.swiping .pv-scan{ opacity:1; }
  .pv-arrow{ position:absolute; top:46%; width:42px; height:42px; margin-top:-21px; border:0; border-radius:50%; display:grid; place-items:center; font:inherit; font-size:18px; color:#17140f; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:pointer; z-index:2; transition:opacity .3s, background .2s; }
  .pv-arrow:hover{ background:rgba(255,255,255,.85); }
  .pv-arrow.l{ left:10px; } .pv-arrow.r{ right:10px; }
  .pv-stage.turning .pv-arrow{ opacity:0; pointer-events:none; }
  .pv-bar{ position:absolute; left:10px; right:10px; bottom:10px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 8px 8px 14px; border-radius:16px; background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:#17140f; }
  .pv-name{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
  .pv-name b{ font-family:var(--display); font-size:17px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pv-name span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:#6d6259; }
  .pv-360{ flex:none; border:0; font:inherit; font-weight:600; font-size:13.5px; padding:9px 13px; border-radius:999px; background:#17140f; color:#fff; cursor:pointer; }
  .pv-360[aria-pressed="true"]{ background:var(--paint); color:#17140f; }
  .pv-360.loading{ opacity:.6; }
  .pv-hint, .pv-hint2{ background:rgba(23,20,15,.55); }
  .pv-hint2{ opacity:0; }
  .pv-stage.used .pv-hint{ opacity:0; }
  .pv-stage.turning .pv-hint2{ opacity:1; }
  .pv-stage.turned .pv-hint2{ opacity:0; }
  .pv .p3-tags span{ color:var(--violet); background:var(--violet-soft); }
  @media (max-width:820px){ .pv-stage{ max-width:340px; width:100%; justify-self:center; } }
  section.block.pf-sec{ padding-block:56px; }

  /* ---------- celular: el inicio más corto (servicios se deslizan de costado; planes apilados) ---------- */
  @media (max-width:760px){
    .services{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:-20px; padding:0 20px 8px; scrollbar-width:none; }
    .services::-webkit-scrollbar, .plans::-webkit-scrollbar{ display:none; }
    .svc{ flex:0 0 76%; scroll-snap-align:start; border:1px solid var(--line); border-radius:18px; padding:18px; background:#ebeae6; gap:8px; }
    .svc h3{ font-size:19px; }
    /* planes: uno arriba del otro y más compactos (sin deslizar de costado) */
    .plans{ display:grid; grid-template-columns:1fr; gap:12px; }
    .plan{ padding:20px 18px; gap:12px; border-radius:20px; }
    .plan h3{ font-size:28px; }
    .plan .for{ font-size:13.5px; }
    .plan ul{ gap:6px; padding-top:12px; }
    .plan li{ font-size:13.5px; grid-template-columns:18px 1fr; gap:8px; line-height:1.4; }
    .plan li::before{ width:14px; height:14px; margin-top:2px; }
    .plan .actions{ padding-top:4px; }
    .plan .btn{ padding:11px 18px; font-size:14px; }
    .steps{ grid-template-columns:1fr 1fr; gap:18px 14px; }
    .step h3{ font-size:18px; }
    .step p{ font-size:13.5px; }
    .about{ grid-template-columns:96px 1fr; gap:16px 18px; }
    .about .photo{ border-radius:18px; align-self:start; }
    .about > div:last-child{ grid-column:1 / -1; }
    .about .tools{ display:none; }
    section.block{ padding-block:56px; }
    /* interacciones de M Perfumerie: de a cuatro (2×2), sin deslizar; al tocar se abren en grande */
    .ix-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .ix-card{ cursor:zoom-in; border-radius:16px; }
    .ix-txt{ padding:10px 10px 12px; grid-template-columns:1fr; gap:2px; }
    .ix-txt .n{ display:none; }
    .ix-txt h4{ font-size:13.5px; line-height:1.25; }
    .ix-txt p{ display:none; }
  }



  /* ---------- credencial colgante con la foto (sección "Quién", js: lanyard al final de sitio.js) ---------- */
  .lanyard{ --cw:240px; --ch:300px; position:relative; height:440px; user-select:none; -webkit-user-select:none; }
  .ly-band{ position:absolute; left:-160px; right:-160px; top:-90px; bottom:-60px; width:calc(100% + 320px); height:calc(100% + 150px); pointer-events:none; z-index:1; }
  .ly-card{ position:absolute; left:0; top:0; width:var(--cw); height:var(--ch); transform-origin:0 0; z-index:2; perspective:900px; cursor:grab; touch-action:none; will-change:transform; }
  .ly-card.drag{ cursor:grabbing; }
  .ly-in{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
  .ly-face{ position:absolute; inset:0; border-radius:16px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden;
    background:#f4f3ef; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -18px rgba(17,17,19,.45), 0 2px 6px rgba(17,17,19,.12); }
  .ly-front{ transform:rotateY(0deg); }
  .ly-front img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9); pointer-events:none; }
  .ly-back{ transform:rotateY(180deg); background:linear-gradient(150deg, #4d7cff, #1d3fc4); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; }
  .ly-back img{ width:46%; border-radius:18px; margin-bottom:10px; box-shadow:0 10px 24px -10px rgba(0,0,0,.45); pointer-events:none; }
  .ly-back b{ font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.02em; }
  .ly-back small{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; opacity:.8; }
  /* ranura finita donde pasa el aro */
  .ly-slot{ position:absolute; left:50%; top:9px; width:30px; height:4px; margin-left:-15px; border-radius:4px; background:var(--paper); box-shadow:inset 0 1px 1.5px rgba(0,0,0,.45); }
  /* brillo de credencial plastificada: se corre según cómo gira */
  .ly-sheen{ position:absolute; inset:0; pointer-events:none; opacity:.45;
    background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 45%, transparent 58%) calc(var(--sh, 50) * 1%) 0 / 260% 100% no-repeat; }
  /* aro de metal que pasa por la ranura (no gira con la tarjeta) */
  .ly-ring{ position:absolute; left:50%; top:-6px; width:15px; height:17px; margin-left:-7.5px; z-index:3; border-radius:50%; pointer-events:none;
    border:2.5px solid #c9c9cf; border-left-color:#8e8e95; border-bottom-color:#9d9da4; box-shadow:0 1px 2px rgba(0,0,0,.35), inset 0 0 1px rgba(0,0,0,.4); }
  .ly-hint{ position:absolute; left:0; right:0; bottom:0; text-align:center; transition:opacity .4s; }
  .lanyard.used .ly-hint{ opacity:0; }
  @media (max-width:820px){ .lanyard{ max-width:none; } }
  @media (max-width:760px){
    .about .lanyard{ grid-column:1 / -1; --cw:190px; --ch:238px; height:330px; margin-top:36px; }
    .ly-back b{ font-size:18px; }
  }

  /* ---------- modo oscuro: sol | luna arriba, el activo queda pintado; se recuerda en el navegador ---------- */
  .theme-seg{ display:flex; gap:2px; padding:3px; border-radius:999px; border:1.5px solid var(--line); flex:none; }
  .theme-seg button{ width:32px; height:30px; border-radius:999px; border:0; background:none; color:var(--muted); display:grid; place-items:center; cursor:pointer; transition:background .25s, color .25s; }
  .theme-seg button:hover{ color:var(--ink); }
  .theme-seg button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); cursor:default; }
  .theme-seg svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .top:not(.scrolled):not(.pre) .theme-seg{ border-color:rgba(17,17,19,.3); }
  .top:not(.scrolled):not(.pre) .theme-seg button:not([aria-pressed="true"]){ color:#111113; }
  .top-act{ display:flex; align-items:center; gap:10px; }

  html[data-theme="dark"]{
    --paper:#141416; --paper-2:#1c1c20; --ink:#f1f0ec; --ink-2:#d9d8d3; --muted:#a3a2aa; --line:#2f2f35;
    --violet:#4d6ef0; --violet-soft:#1e2647; --orange-soft:#3a2418;
    color-scheme:dark;
  }
  html[data-theme="dark"] .top:not(.scrolled):not(.pre) nav a{ color:#111113; }
  html[data-theme="dark"] .make{ background-color:#19191c; background-image:radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.3px); }
  html[data-theme="dark"] .gbox, html[data-theme="dark"] .gadd, html[data-theme="dark"] .gcard, html[data-theme="dark"] .gthumb img,
  html[data-theme="dark"] .gmode button[aria-pressed="true"], html[data-theme="dark"] .gchips button:hover, html[data-theme="dark"] .pf-jump a{ background:#222227; }
  html[data-theme="dark"] .gchips button{ background:rgba(255,255,255,.05); }
  html[data-theme="dark"] .gbox.drag{ background:#1e2340; }
  html[data-theme="dark"] .gskel{ background:linear-gradient(100deg, #222227 30%, #2c2c36 50%, #222227 70%) 0 0/300% 100%; }
  @media (max-width:760px){ html[data-theme="dark"] .svc{ background:#1b1b1f; } }   /* solo en celular, donde en claro también tienen fondo */
  html[data-theme="dark"] .contact .btn:hover{ color:var(--paper); }
  html[data-theme="dark"] .splash-load{ background:rgba(20,20,22,.45) !important; }
  /* paneles que en claro son negros: en oscuro, un gris apenas más claro que el fondo, con borde */
  html[data-theme="dark"] .case, html[data-theme="dark"] .plan.pro{ background:#1f1f25; box-shadow:inset 0 0 0 1px #33333b; }
  html[data-theme="dark"] .fact{ background:#1f1f25; }
  html[data-theme="dark"] .case .btn:hover, html[data-theme="dark"] .switch button[aria-pressed="true"],
  html[data-theme="dark"] .plan.pro .btn-dark:hover, html[data-theme="dark"] .plan.pro .btn-line:hover{ color:#111113; }