@font-face{font-family:"InterW";font-weight:400;font-display:swap;src:url(/assets/f400.woff2) format("woff2")}
  @font-face{font-family:"InterW";font-weight:500;font-display:swap;src:url(/assets/f500.woff2) format("woff2")}
  @font-face{font-family:"InterW";font-weight:600;font-display:swap;src:url(/assets/f600.woff2) format("woff2")}
  @font-face{font-family:"InterW";font-weight:700;font-display:swap;src:url(/assets/f700.woff2) format("woff2")}
  :root{
    --black:#000; --ink:#1d1d1f; --gray:#86868b; --gray2:#6e6e73; --light:#f5f5f7; --line:#d2d2d7;
    --blue:#0071e3; --blue-l:#2997ff; --gold:#c9a463;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  html:not(.en) [data-l="en"], html.en [data-l="es"]{display:none !important}
  body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","InterW","Segoe UI",Arial,sans-serif;
    color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; letter-spacing:-.01em; overflow-x:hidden}
  a{color:inherit; text-decoration:none}
  img{display:block; max-width:100%}
  .wrap{max-width:1024px; margin:0 auto; padding:0 22px}
  .center{text-align:center}

  /* Navegación global, fina como la de Apple */
  .gnav{position:absolute; top:0; left:0; right:0; z-index:50; height:48px; background:rgba(0,0,0,.6);
    backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); color:#f5f5f7}
  .gnav .wrap{height:100%; display:flex; align-items:center; gap:26px; max-width:1024px}
  .gnav .logo{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; letter-spacing:0}
  .gnav .logo img{width:22px; height:22px; border-radius:5px}
  .gnav nav{margin-left:auto; display:flex; gap:28px; font-size:12px; opacity:.88}
  .gnav nav a:hover{opacity:1; color:#fff}
  .lang{display:flex; gap:2px; font-size:12px}
  .lang button{all:unset; cursor:pointer; padding:4px 7px; border-radius:6px; color:#a1a1a6}
  html:not(.en) .lang .es, html.en .lang .en{color:#fff; background:rgba(255,255,255,.14)}

  /* Botones y enlaces estilo Apple */
  .pill{display:inline-flex; align-items:center; justify-content:center; padding:11px 22px; border-radius:980px; font-size:17px; font-weight:400;
    background:var(--blue); color:#fff; transition:background .3s}
  .pill:hover{background:#0077ed}

  /* Botones azules: flechita que se mueve sola para que se note que se tocan */
  .pill:not(.ghost){gap:8px; -webkit-tap-highlight-color:transparent; transition:background .3s, transform .2s ease}
  .pill:not(.ghost)::after{content:""; width:15px; height:15px; flex:none; background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
    animation:btnNudge 2.6s ease-in-out infinite}
  .pill:not(.ghost):hover::after{animation:none; transform:translateX(4px); transition:transform .25s ease}
  .pill:not(.ghost):active{transform:scale(.96)}
  @keyframes btnNudge{0%,55%,100%{transform:translateX(0)} 65%{transform:translateX(5px)} 75%{transform:translateX(0)} 85%{transform:translateX(3px)}}
  @media (prefers-reduced-motion:reduce){.pill:not(.ghost)::after{animation:none !important}}
  .cform.busy .send,.cform.busy .send::after{display:none}
  .pill.ghost{background:transparent; color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue)}
  .pill.ghost:hover{background:var(--blue); color:#fff}
  .dark .pill.ghost{color:var(--blue-l); box-shadow:inset 0 0 0 1px var(--blue-l)}
  .dark .pill.ghost:hover{background:var(--blue-l); color:#000}
  .link{color:var(--blue); font-size:19px; display:inline-flex; align-items:center; gap:4px}
  .dark .link{color:var(--blue-l)}
  .link:hover{text-decoration:underline}
  .link::after{content:"›"; font-size:1.15em; line-height:1; transform:translateY(-1px)}
  /* "Conoce Ponchar": letras con los colores de Siri en movimiento; al tocar queda en blanco */
  .link.siri{background:linear-gradient(90deg,#ff6ac1,#a86bff,#4f8cff,#3ee0d0,#ffb36b,#ff6ac1,#a86bff,#4f8cff,#3ee0d0,#ffb36b,#ff6ac1); background-size:200% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
    animation:siriText 6s linear infinite; transition:color .3s}
  .link.siri span{-webkit-text-fill-color:transparent}
  .link.siri:hover,.link.siri:active,.link.siri:focus-visible{animation:none; background:none; color:#fff; -webkit-text-fill-color:#fff; text-decoration:none}
  .link.siri:hover span,.link.siri:active span,.link.siri:focus-visible span{-webkit-text-fill-color:#fff}
  @keyframes siriText{from{background-position:0% 50%} to{background-position:-200% 50%}}
  @media (prefers-reduced-motion:reduce){.link.siri{animation:none}}
  /* Demo de Ponchar que se puede tocar */
  .demo{padding-bottom:120px}
  .demo-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
  .demo-note{color:#86868b; font-size:14px; margin-top:16px}
  @media (max-width:820px){.demo-grid{grid-template-columns:1fr; text-align:center} .demo .ctas{justify-content:center !important}}
  .demo-stage{position:relative; display:flex; justify-content:center; align-items:center; gap:28px}
  .dphone{position:relative; width:290px; aspect-ratio:1320/2868; border-radius:52px; padding:10px; background:linear-gradient(145deg,#5b5f66,#1f2125 30%,#3a3d42 60%,#17181b); box-shadow:0 40px 80px -30px rgba(91,95,239,.55); flex:none}
  .dscr{position:relative; width:100%; height:100%; border-radius:42px; overflow:hidden; background:linear-gradient(180deg,#EEF0FF,#DCDDFB); color:#14152B}
  .disl{position:absolute; z-index:9; left:50%; transform:translateX(-50%); top:10px; width:86px; height:26px; border-radius:13px; background:#000}
  .dsb{position:absolute; z-index:8; top:13px; left:26px; right:24px; display:flex; justify-content:space-between; font-weight:600; font-size:14px}
  .dbat{width:24px; height:11px; border:1.5px solid #14152B; border-radius:3.5px; position:relative; margin-top:3px}
  .dbat::after{content:""; position:absolute; top:1.5px; bottom:1.5px; left:1.5px; right:5px; background:#14152B; border-radius:1.5px}
  .dv{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; transition:opacity .4s}
  .dt1{margin-top:74px; font-weight:700; font-size:22px; letter-spacing:-.02em}
  .dt2{margin-top:4px; color:#6b6d85; font-size:14px}
  .dt2::first-letter{text-transform:uppercase}
  .dbtn{all:unset; cursor:pointer; position:relative; margin-top:44px; width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent}
  .dring{position:absolute; inset:-12px; border-radius:50%; background:conic-gradient(from 0deg,#FF6AC1,#A86BFF,#4F8CFF,#3EE0D0,#FFB347,#FF5F7E,#FF6AC1); filter:blur(10px); opacity:.85; animation:dspin 4s linear infinite}
  .dbtn::before{content:""; position:absolute; inset:0; border-radius:50%; background:linear-gradient(160deg,#6B78FF,#3B3FD8); box-shadow:0 14px 30px rgba(59,63,216,.45); transition:transform .15s}
  .dbtn:active::before{transform:scale(.94)}
  .dbtn{isolation:isolate} .dring{z-index:0} .dbtn::before{z-index:1} .dlab{z-index:2}
  #dv-home{z-index:1} .dok{z-index:2}
  .dlab{position:relative; color:#fff; font-weight:700; font-size:21px; line-height:1.15; text-align:center}
  .dbtn.out::before{background:linear-gradient(160deg,#ff8a7a,#e8445a)}
  .dt3{margin-top:40px; color:#6b6d85; font-size:14px; text-align:center; padding:0 20px}
  @keyframes dspin{to{transform:rotate(360deg)}}
  .dok{background:linear-gradient(180deg,#EAFBF3,#D9F5E8); opacity:0; pointer-events:none}
  .dok.out{background:linear-gradient(180deg,#FFF1EC,#FDE1DA)}
  .dscr.ok .dok{opacity:1; pointer-events:auto}
  .dck{margin-top:120px; width:96px; height:96px; border-radius:50%; background:linear-gradient(160deg,#34D399,#10B981); display:flex; align-items:center; justify-content:center; box-shadow:0 16px 32px rgba(16,185,129,.35); transform:scale(.5); transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
  .dok.out .dck{background:linear-gradient(160deg,#ff8a7a,#e8445a); box-shadow:0 16px 32px rgba(232,68,90,.3)}
  .dscr.ok .dck{transform:scale(1)}
  .dck svg{width:52px; height:52px}
  .dk1{margin-top:22px; font-weight:700; font-size:21px}
  .dk2{margin-top:2px; font-weight:700; font-size:40px; letter-spacing:-.02em; color:#0E9F6E; font-variant-numeric:tabular-nums}
  .dok.out .dk2{color:#d6334b}
  .dk3{margin-top:6px; color:#4b6b5d; font-size:14px; text-align:center; padding:0 18px; line-height:1.35}
  .dnext{all:unset; cursor:pointer; margin-top:22px; background:#14152B; color:#fff; font-weight:600; font-size:15px; padding:12px 22px; border-radius:999px}
  .ddim{position:absolute; inset:0; background:rgba(20,21,43,.3); opacity:0; pointer-events:none; transition:opacity .35s; z-index:3}
  .dsheet{position:absolute; z-index:4; left:7px; right:7px; bottom:7px; height:46%; border-radius:36px; background:#F4F4F8; text-align:center; transform:translateY(110%); transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .dscr.scan .ddim{opacity:1} .dscr.scan .dsheet{transform:none}
  .ds1{margin-top:20px; color:#8a8a95; font-weight:600; font-size:17px}
  .dsic{position:relative; width:66px; height:66px; margin:16px auto 0}
  .dsic svg{position:absolute; inset:0; transition:opacity .3s, transform .4s}
  .dsic .c{opacity:0; transform:scale(.6)}
  .dscr.read .dsic .w{opacity:0} .dscr.read .dsic .c{opacity:1; transform:none}
  .ds2{margin-top:12px; font-size:14px; padding:0 22px; line-height:1.3}
  .ds3{all:unset; cursor:pointer; position:absolute; left:16px; right:16px; bottom:16px; height:44px; line-height:44px; border-radius:14px; background:#E3E3EA; font-weight:600; font-size:15px}
  .dphone.buzz{animation:dbuzz .35s linear}
  @keyframes dbuzz{0%,100%{transform:translateX(0)} 20%{transform:translateX(-3px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)}}
  .dtag{all:unset; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:12px; opacity:.35; pointer-events:none; transition:opacity .4s; -webkit-tap-highlight-color:transparent}
  .dtag-in{position:relative; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#e9e7f8); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 18px 40px -16px rgba(0,0,0,.6); transition:transform .15s}
  .dtag-in svg{width:46px; height:46px} .dtag-in b{color:#3B3FD8; font-size:12px; letter-spacing:1px; margin-top:2px}
  .dtag-in::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:3px solid rgba(124,128,255,.8); opacity:0}
  .dtag-hint{color:#a1a1a6; font-size:14px}
  .dtag.on{opacity:1; pointer-events:auto}
  .dtag.on .dtag-in::after{animation:dtagp 1.6s ease-out infinite}
  .dtag.on .dtag-hint{color:#f5f5f7}
  .dtag:active .dtag-in{transform:scale(.95)}
  @keyframes dtagp{0%{opacity:.9; transform:scale(1)} 100%{opacity:0; transform:scale(1.5)}}
  @media (max-width:520px){.demo-stage{flex-direction:column} .dphone{width:260px}}
  @media (prefers-reduced-motion:reduce){.dring,.dtag.on .dtag-in::after{animation:none}}
  .ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; align-items:center}

  /* Tipografía grande */
  .eyebrow{font-size:21px; font-weight:600; letter-spacing:.005em; margin-bottom:6px}
  .h-xl{font-size:clamp(44px,8vw,96px); font-weight:700; letter-spacing:-.035em; line-height:1.02}
  .h-lg{font-size:clamp(36px,5.6vw,64px); font-weight:700; letter-spacing:-.03em; line-height:1.05}
  .h-md{font-size:clamp(28px,3.6vw,40px); font-weight:700; letter-spacing:-.025em; line-height:1.1}
  .sub{font-size:clamp(19px,2.2vw,28px); font-weight:400; letter-spacing:-.01em; line-height:1.25; color:var(--gray2)}
  .dark .sub{color:#a1a1a6}
  .muted{color:var(--gray)}

  /* Secciones */
  .tile{padding:110px 0 0; overflow:hidden; position:relative}
  .dark{background:#000; color:#f5f5f7}
  .light{background:var(--light)}

  /* Portada */
  .hero{padding-top:150px; padding-bottom:0; background:#000; color:#f5f5f7; position:relative; overflow:hidden}
  .hero .glow{position:absolute; left:50%; top:62%; width:900px; height:900px; transform:translate(-50%,-50%); border-radius:50%;
    background:radial-gradient(closest-side, rgba(99,102,241,.34), rgba(168,85,247,.12) 55%, transparent 75%); filter:blur(30px); pointer-events:none}
  .hero .name{font-size:21px; font-weight:600; color:#f5f5f7; margin-bottom:10px; opacity:0; animation:up 1.2s var(--ease) .1s forwards}
  .hero h1{margin-bottom:18px}
  .hero h1 .ln{display:block; opacity:0; transform:translateY(30px); filter:blur(10px); animation:up 1.3s var(--ease) forwards}
  .hero h1 .ln:nth-child(2){animation-delay:.12s}
  .grad-gold{background:linear-gradient(90deg,#f5f5f7 0%,#e9d3a6 45%,#c9a463 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
  .hero .sub{max-width:720px; margin:0 auto 30px; opacity:0; animation:up 1.2s var(--ease) .35s forwards}
  .hero .ctas{opacity:0; animation:up 1.2s var(--ease) .5s forwards}
  @keyframes up{to{opacity:1; transform:none; filter:none}}
  .stage{position:relative; margin:70px auto 0; width:min(380px,78vw); opacity:0; animation:rise 1.6s var(--ease) .55s forwards}
  @keyframes rise{from{opacity:0; transform:translateY(80px)} to{opacity:1; transform:none}}
  .hero .fade{height:140px; background:linear-gradient(180deg, transparent, #000); position:relative; margin-top:-140px; z-index:3}

  /* iPhone */
  .phone{position:relative; border-radius:56px; padding:11px; background:linear-gradient(145deg,#3a3a3c,#1c1c1e 40%,#2c2c2e);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 1px #000, 0 60px 120px -40px rgba(0,0,0,.8)}
  .phone .screen{position:relative; aspect-ratio:1320/2868; border-radius:46px; overflow:hidden; background:#000}
  .phone .screen > img{width:100%; height:100%; object-fit:cover}
  .home{position:absolute; inset:0}
  .home img{width:100%; height:100%; object-fit:cover}
  .home::after{content:""; position:absolute; top:1.6%; left:50%; width:32%; height:3.3%; transform:translateX(-50%); background:#000; border-radius:99px}
  .tap{position:absolute; left:61.3%; top:13.2%; width:15.5%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.55);
    transform:translate(-50%,-50%) scale(.4); opacity:0; animation:tapDot 16s ease infinite; pointer-events:none; z-index:2}
  .app{position:absolute; inset:0; transform-origin:61.3% 13.2%; opacity:0; transform:scale(.11); overflow:hidden; background:#ece9fb; z-index:3;
    animation:appOpen 16s var(--ease) infinite}
  .app img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top}
  .app .l2{opacity:0; animation:l2 16s ease infinite}
  .app .l3{opacity:0; animation:l3 16s ease infinite}
  @keyframes tapDot{0%,10.5%{opacity:0; transform:translate(-50%,-50%) scale(.4)} 12.5%{opacity:1; transform:translate(-50%,-50%) scale(1)} 15%{opacity:0; transform:translate(-50%,-50%) scale(1.3)} 100%{opacity:0}}
  @keyframes appOpen{0%,14%{opacity:0; transform:scale(.11)} 16%{opacity:1} 21%{transform:scale(1)} 88%{opacity:1; transform:scale(1)} 94%{opacity:0; transform:scale(.11)} 100%{opacity:0; transform:scale(.11)}}
  @keyframes l2{0%,40%{opacity:0} 44%,62%{opacity:1} 65%,100%{opacity:0}}
  @keyframes l3{0%,63%{opacity:0} 66%,86%{opacity:1} 90%,100%{opacity:0}}
  /* Aviso tipo iOS junto al iPhone */
  .note{position:absolute; z-index:5; display:flex; gap:10px; align-items:center; padding:10px 14px 10px 10px; border-radius:22px; width:260px;
    background:rgba(40,40,44,.55); color:#fff; backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 20px 50px -20px rgba(0,0,0,.8); font-size:13px; line-height:1.3; opacity:0}
  .note img{width:38px; height:38px; border-radius:9px}
  .note b{display:block; font-size:13.5px; font-weight:600}
  .note small{color:rgba(255,255,255,.7); font-size:12.5px}
  .note .t{position:absolute; right:12px; top:9px; font-size:11px; color:rgba(255,255,255,.5)}
  .note.n1{right:-200px; top:24%; animation:n1 16s var(--ease) infinite}
  .note.n2{left:-210px; top:58%; animation:n2 16s var(--ease) infinite}
  @keyframes n1{0%,64%{opacity:0; transform:translateY(-14px) scale(.96)} 68%,88%{opacity:1; transform:none} 92%,100%{opacity:0; transform:translateY(-8px)}}
  @keyframes n2{0%,44%{opacity:0; transform:translateY(-14px) scale(.96)} 48%,88%{opacity:1; transform:none} 92%,100%{opacity:0; transform:translateY(-8px)}}

  /* Inventario: mosaico */
  .inv .head{margin-bottom:12px}
  .inv .icon{width:96px; height:96px; margin:0 auto 22px; border-radius:22px; box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
  .inv .ctas{margin-top:28px}
  .appstore{display:inline-flex; align-items:center; gap:8px; padding:8px 18px 8px 14px; border-radius:12px; background:#000; color:#fff; transition:transform .4s var(--ease)}
  .appstore:hover{transform:scale(1.03)}
  .appstore svg{width:22px; height:22px}
  .appstore small{display:block; font-size:10px; line-height:1.1}
  .appstore b{display:block; font-size:18px; font-weight:600; line-height:1.1; letter-spacing:-.01em}
  .trio{position:relative; height:620px; margin-top:70px}
  .trio .phone{position:absolute; width:270px; bottom:-140px; transition:transform 1.4s var(--ease)}
  .trio .p1{left:50%; transform:translateX(-50%) translateY(60px); z-index:2; width:300px}
  .trio .p2{left:50%; transform:translateX(-50%) translateY(120px); z-index:1}
  .trio .p3{left:50%; transform:translateX(-50%) translateY(120px); z-index:1}
  .trio.in .p1{transform:translateX(-50%)}
  .trio.in .p2{transform:translateX(calc(-50% - 290px)) translateY(40px) rotate(-6deg)}
  .trio.in .p3{transform:translateX(calc(-50% + 290px)) translateY(40px) rotate(6deg)}

  /* Historia con iPhone fijo */
  .story-sec{padding:120px 0}
  .story{display:grid; gap:40px}
  .st{padding:30px 0}
  .st h3{font-size:clamp(30px,4vw,48px); font-weight:700; letter-spacing:-.03em; line-height:1.08; margin-bottom:14px}
  .st p{font-size:21px; line-height:1.4; color:var(--gray2); max-width:440px}
  .st .im{margin-top:26px; width:240px}
  .story-phone{display:none}
  @media (min-width:900px){
    .story{grid-template-columns:1fr 1fr; gap:60px}
    .st{min-height:80vh; display:flex; flex-direction:column; justify-content:center; padding:0; opacity:.18; transition:opacity .8s var(--ease)}
    .st.on{opacity:1}
    .st .im{display:none}
    .story-phone{display:flex; justify-content:center; align-items:center; position:sticky; top:10vh; height:80vh}
    .story-phone .phone{width:320px}
    .story-phone .screen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transform:scale(1.04);
      transition:opacity .9s var(--ease), transform 1.2s var(--ease)}
    .story-phone .screen img.on{opacity:1; transform:none}
  }

  /* Mosaicos de las próximas apps */
  .grid2{display:grid; gap:12px; padding:12px}
  .mini{border-radius:28px; padding:64px 30px 0; text-align:center; overflow:hidden; min-height:520px; position:relative}
  .mini img.ic{width:84px; height:84px; margin:0 auto 20px; border-radius:19px; box-shadow:0 16px 36px -16px rgba(0,0,0,.6)}
  .mini .soon{font-size:14px; font-weight:600; letter-spacing:.02em; margin-bottom:8px}
  .mini.cob{background:radial-gradient(80% 60% at 50% 100%, #2a2412, #000 70%); color:#f5f5f7}
  .mini.cob .soon{color:var(--gold)}
  .mini.tclk{background:radial-gradient(80% 60% at 50% 100%, #10285c, #000 70%); color:#f5f5f7}
  .mini.tclk .soon{color:var(--blue-l)}
  .mini .sub{margin-top:10px; color:#a1a1a6}
  .mini .glowic{position:absolute; left:50%; bottom:-90px; width:300px; height:300px; transform:translateX(-50%); border-radius:70px; opacity:.5; filter:blur(2px)}

  /* Servicios */
  .svc-grid{display:grid; gap:44px; margin-top:70px; text-align:left}
  .svc .ic{width:44px; height:44px; color:var(--ink); margin-bottom:18px}
  .svc h3{font-size:24px; font-weight:700; letter-spacing:-.02em; margin-bottom:10px}
  .svc p{font-size:17px; line-height:1.47; color:var(--gray2)}

  /* Cifra grande / proceso */
  .steps{display:grid; gap:36px; margin-top:70px; text-align:left}
  .step .n{font-size:64px; font-weight:700; letter-spacing:-.04em; line-height:1; margin-bottom:14px;
    background:linear-gradient(180deg,#f5f5f7,#6e6e73); -webkit-background-clip:text; background-clip:text; color:transparent}
  .step h3{font-size:24px; font-weight:700; margin-bottom:8px; letter-spacing:-.02em}
  .step p{font-size:17px; line-height:1.47; color:#a1a1a6}

  /* Sobre mí */
  .about{display:grid; gap:50px; align-items:center}
  .about img{width:100%; max-width:420px; aspect-ratio:1; object-fit:cover; border-radius:32px; margin:0 auto}
  .about blockquote{font-size:clamp(26px,3.2vw,36px); font-weight:600; letter-spacing:-.025em; line-height:1.2}
  .about blockquote em{font-style:normal; color:var(--gray)}
  .about .by{margin-top:24px; display:flex; align-items:center; gap:12px; font-size:15px; color:var(--gray2)}
  .about .by img{width:36px; height:36px; border-radius:8px; margin:0}
  .about .by b{color:var(--ink); display:block; font-size:17px}

  /* Redes debajo de la foto: grises en computadora, a color al pasar el mouse; a color en el teléfono */
  .me-col{display:flex; flex-direction:column; align-items:center}
  .soc-row{display:flex; justify-content:center; gap:18px; margin-top:28px}
  .sb{width:48px; height:48px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#6e6e73; background:#f0f0f2;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); -webkit-tap-highlight-color:transparent;
    transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, background .35s, color .35s}
  .sb svg{width:22px; height:22px; overflow:visible}
  .sb.tt svg path{transition:transform .35s, opacity .35s}
  .sb.tt .c1,.sb.tt .c2{opacity:0}
  @media (hover:hover){
    .sb:hover,.sb:focus-visible{transform:scale(1.12) translateY(-2px); outline:none}
    .sb.ig:hover,.sb.ig:focus-visible{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%); color:#fff; box-shadow:0 10px 24px -8px rgba(214,36,159,.55), inset 0 0 0 1px rgba(255,255,255,.12)}
    .sb.tt:hover,.sb.tt:focus-visible{background:#000; color:#fff; box-shadow:0 10px 24px -8px rgba(37,244,238,.45), inset 0 0 0 1px rgba(255,255,255,.12)}
    .sb.xx:hover,.sb.xx:focus-visible{background:#000; color:#fff; box-shadow:0 10px 24px -8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12)}
  .sb.th:hover,.sb.th:focus-visible{background:#000; color:#fff; box-shadow:0 10px 26px -6px rgba(0,0,0,.45), 0 0 18px rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.18)}
    .sb.yt:hover,.sb.yt:focus-visible{background:#FF0000; color:#fff; box-shadow:0 10px 24px -8px rgba(255,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12)}
    .sb.tt:hover .c1,.sb.tt:focus-visible .c1{opacity:1; transform:translate(-1px,-1px)}
    .sb.tt:hover .c2,.sb.tt:focus-visible .c2{opacity:1; transform:translate(1px,1px)}
  }
  @media (hover:none){
    .sb.ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%); color:#fff; box-shadow:0 10px 24px -8px rgba(214,36,159,.55), inset 0 0 0 1px rgba(255,255,255,.12)}
    .sb.tt{background:#000; color:#fff; box-shadow:0 10px 24px -8px rgba(37,244,238,.45), inset 0 0 0 1px rgba(255,255,255,.12)}
    .sb.xx{background:#000; color:#fff; box-shadow:0 10px 24px -8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12)}
    .sb.th{background:#000; color:#fff; box-shadow:0 10px 26px -6px rgba(0,0,0,.45), 0 0 18px rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.18)}
    .sb.yt{background:#FF0000; color:#fff; box-shadow:0 10px 24px -8px rgba(255,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12)}
    .sb.tt .c1{opacity:1; transform:translate(-1px,-1px)} .sb.tt .c2{opacity:1; transform:translate(1px,1px)}
    .sb:active{transform:scale(1.12)}
  }
  .soc-row .sb{opacity:0}
  .soc-row.in .sb{animation:socPop .7s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay:calc(.2s + var(--i) * .09s)}
  @keyframes socPop{from{opacity:0; translate:0 16px; scale:.75} to{opacity:1; translate:0 0; scale:1}}
  @media (prefers-color-scheme:dark){ .sb.xx{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)} .sb.th{box-shadow:0 0 18px rgba(255,255,255,.15), inset 0 0 0 1px rgba(255,255,255,.25)} }
  @media (prefers-reduced-motion:reduce){ .soc-row .sb{opacity:1; animation:none !important} }

  /* Preguntas */
  .faq{max-width:820px; margin:60px auto 0; text-align:left; border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{list-style:none; cursor:pointer; padding:26px 0; font-size:21px; font-weight:600; letter-spacing:-.015em; display:flex; justify-content:space-between; gap:20px; align-items:center}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+"; font-size:30px; font-weight:300; color:var(--gray); transition:transform .4s var(--ease)}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details p{padding:0 0 26px; font-size:17px; line-height:1.5; color:var(--gray2); max-width:680px; animation:fade .5s var(--ease)}
  .faq a{color:var(--blue)}
  @keyframes fade{from{opacity:0; transform:translateY(-6px)}}

  /* Cierre */
  .closing{padding:140px 0}
  .closing .h-xl{margin-bottom:20px}

  /* Pie estilo Apple */
  footer{background:var(--light); color:var(--gray2); font-size:13px; padding:34px 0 40px}
  footer .wrap{max-width:980px}
  .fnote{padding-bottom:22px; border-bottom:1px solid var(--line); line-height:1.5; font-size:15px}
  .fcols{display:grid; grid-template-columns:repeat(2,1fr); gap:32px 24px; padding:28px 0; border-bottom:1px solid var(--line)}
  .fcols h5{font-size:15px; font-weight:600; color:var(--ink); margin-bottom:14px}
  .fcols ul{list-style:none; display:grid; gap:4px}
  .fcols li a{display:inline-block; font-size:15px; line-height:1.3; padding:5px 0}
  .fcols a:hover{text-decoration:underline; color:var(--ink)}
  .fbot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; padding-top:20px}
  .social{display:flex; gap:20px}
  .social a{color:var(--gray2); transition:color .3s}
  .social a:hover{color:var(--ink)}
  .social svg{width:21px; height:21px}

  /* Aparición al bajar */
  .rv{opacity:0; transform:translateY(40px); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease)}
  .rv.in{opacity:1; transform:none}
  .rv.d1{transition-delay:.1s} .rv.d2{transition-delay:.2s} .rv.d3{transition-delay:.3s}

  @media (min-width:768px){
    .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .svc-grid, .steps{grid-template-columns:repeat(3,1fr)}
    .fcols{grid-template-columns:repeat(4,1fr)}
    .about{grid-template-columns:1fr 1fr}
  }
  @media (max-width:767px){
    .gnav nav{display:none} .lang{margin-left:auto}
    .tile{padding-top:80px} .hero{padding-top:110px}
    .note{display:none}
    .trio{height:470px} .trio .phone{width:200px} .trio .p1{width:230px}
    .trio.in .p2{transform:translateX(calc(-50% - 130px)) translateY(40px) rotate(-6deg)}
    .trio.in .p3{transform:translateX(calc(-50% + 130px)) translateY(40px) rotate(6deg)}
    .phone{border-radius:44px; padding:9px} .phone .screen{border-radius:36px}
    .closing{padding:100px 0}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important}
    .hero .name,.hero h1 .ln,.hero .sub,.hero .ctas,.stage,.rv{opacity:1 !important; transform:none !important; filter:none !important}
    .app{opacity:1 !important; transform:none !important} .app .l2,.app .l3{display:none}
  }

  /* Formulario de contacto */
  .cform{max-width:640px; margin:0 auto; display:grid; gap:14px; text-align:left}
  .cform .row2{display:grid; gap:14px}
  .hp{position:absolute; left:-9999px; opacity:0}
  .fld{position:relative; display:block}
  .fld input, .fld textarea{width:100%; font:inherit; font-size:17px; color:#f5f5f7; background:#1d1d1f; border:1px solid #424245; border-radius:14px;
    padding:26px 16px 10px; outline:none; transition:border-color .3s, box-shadow .3s; resize:vertical; letter-spacing:-.01em}
  .fld textarea{min-height:150px}
  .fld > span{position:absolute; white-space:nowrap; left:17px; top:18px; font-size:17px; color:#86868b; pointer-events:none; transition:all .25s var(--ease)}
  .fld input:focus, .fld textarea:focus{border-color:var(--blue-l); box-shadow:0 0 0 4px rgba(41,151,255,.25)}
  .fld input:focus + span, .fld input:not(:placeholder-shown) + span, .fld textarea:focus + span, .fld textarea:not(:placeholder-shown) + span{top:8px; font-size:12px}
  .send{justify-self:center; margin-top:10px; min-width:200px; border:none; cursor:pointer; font:inherit; font-size:17px}
  .send .t-wait{display:none}
  .cform.busy .send .t-send{display:none} .cform.busy .send .t-wait{display:inline}
  .cform.busy .send{opacity:.7; pointer-events:none}
  .fmsg{display:none; text-align:center; font-size:17px; margin-top:6px}
  .fmsg.err, .fmsg.need{color:#ff6961}
  .cform.sent .ok, .cform.failed .err, .cform.missing .need{display:block}
  .cform.sent .fld, .cform.sent .row2, .cform.sent .send{display:none}
  @media (min-width:768px){ .cform .row2{grid-template-columns:1fr 1fr} }

  .link.wa{color:#25d366 !important; gap:8px}
  .link.wa .wa-ic{width:21px; height:21px; flex:none}

  .fmsg.ok{color:#f5f5f7; padding:10px 0 4px}
  .cform.sent .fmsg.ok{display:flex; flex-direction:column; align-items:center; gap:10px; animation:okIn .9s var(--ease) both}
  .okic{width:56px; height:56px; color:#f5f5f7}
  .okic path{stroke-dasharray:40; stroke-dashoffset:40; animation:okDraw .7s var(--ease) .25s forwards}
  .fmsg.ok b{font-size:28px; font-weight:700; letter-spacing:-.025em}
  .oksub{font-size:17px; color:#a1a1a6}
  @keyframes okIn{from{opacity:0; transform:translateY(12px) scale(.98)}}
  @keyframes okDraw{to{stroke-dashoffset:0}}
  .asbadge{display:inline-block; margin:12px; line-height:0; transition:transform .4s var(--ease)}
  .asbadge:hover{transform:scale(1.03)}
  .asbadge img{height:48px; width:auto}
  .vis{opacity:0; transition:opacity .8s ease; white-space:nowrap}
  .vis.on{opacity:1}
  .vis i{font-style:normal}
  .vis b{font-weight:500; font-variant-numeric:tabular-nums; color:var(--gray2)}
  .legal{font-size:11px; line-height:1.5; color:#6e6e73; margin-top:14px}
a.mini{display:block;color:inherit;text-decoration:none}
.grad-pon{background:linear-gradient(90deg,#f5f5f7 0%,#c9c8ff 45%,#8f7cff 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.mini.invm{background:radial-gradient(80% 60% at 50% 100%, #0f3446, #000 70%); color:#f5f5f7}
.mini.invm .soon{color:#7fd0ff}
.pon .free{margin-top:14px; font-size:15px; color:#6e6e73}

/* Accesibilidad: más contraste en textos y enlaces sobre fondo claro */
.light .link:not(.siri):not(.wa),.tile.light .link:not(.siri):not(.wa),.faq a{color:#0066cc}
.light .muted,.tile.light .muted{color:#6e6e73}
:focus-visible{outline:2px solid #0071e3;outline-offset:2px}