*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:var(--dw);margin:0;letter-spacing:-.015em;line-height:1.12}
p{margin:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.hero :focus-visible,.contact :focus-visible{outline-color:var(--hero-ink)}
.wrap{width:min(100% - 48px,640px);margin-inline:auto}

/* Zonas del acceso secreto: sin selección ni menú al mantener presionado */
[data-t]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* Portada */
.hero{background:var(--hero);color:var(--hero-ink);padding:max(36px,env(safe-area-inset-top)) 0 40px;border-radius:0 0 44px 44px;text-align:center}
.badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border:1px solid var(--hero-line);border-radius:999px;font-size:14px;font-weight:500;line-height:1.2}
.dot{width:8px;height:8px;border-radius:50%;background:#3DDC84;flex:none}

.seal{position:relative;width:min(340px,88vw);aspect-ratio:1;margin:14px auto 6px}
.ring{position:absolute;inset:0;width:100%;height:100%;animation:turn 70s linear infinite;pointer-events:none}
.ring text{fill:var(--hero-ink);font-family:var(--f-text);font-weight:600;font-size:12.5px}
@keyframes turn{to{transform:rotate(360deg)}}
.arch{position:absolute;left:50%;top:50%;width:50%;aspect-ratio:4/5;transform:translate(-50%,-50%);border-radius:999px 999px 18px 18px;overflow:hidden;background:var(--accent);pointer-events:none}
.arch img{width:100%;height:100%;object-fit:cover}
.mono{display:grid;place-items:center;height:100%;font-family:var(--f-display);font-weight:var(--dw);font-size:clamp(44px,13vw,64px);color:var(--accent-ink);letter-spacing:-.02em}

.hero h1{font-size:clamp(36px,9.5vw,52px);margin-top:10px}
.role{font-size:19px;margin-top:10px;color:var(--hero-ink)}
.where{font-size:15px;color:var(--hero-soft);margin-top:2px}
.intro{max-width:34em;margin:20px auto 0;font-size:18px;line-height:1.6;color:var(--hero-ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:1.5px solid transparent;font:600 17px/1 var(--f-text);text-decoration:none;cursor:pointer;transition:transform .12s ease,background .15s ease}
.btn:active{transform:scale(.98)}
.btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn-main{background:var(--accent);color:var(--accent-ink)}
.btn-main.big{min-height:58px;padding:0 34px;font-size:18px;width:min(100%,340px)}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-out{border-color:var(--ink);color:var(--ink);background:transparent}
.cta{margin-top:28px}

.acts{display:grid;gap:10px;width:min(100%,440px);margin:20px auto 0;text-align:left}
.acts.dbl{grid-template-columns:1fr 1fr}
.act{display:flex;align-items:center;gap:14px;min-height:60px;padding:0 16px;border:1.5px solid var(--hero-line);border-radius:14px;text-decoration:none;color:var(--hero-ink);transition:background .15s ease,color .15s ease,border-color .15s ease}
.act>svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.act>span{display:grid;min-width:0;line-height:1.25}
.act b{font-weight:600;font-size:16px}
.act small{font-size:13px;color:var(--hero-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.go{margin-left:auto;display:grid;opacity:.55;font-style:normal}
.go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.act:hover,.act:focus-visible{background:var(--hero-ink);color:var(--hero);border-color:var(--hero-ink)}
.act:hover small,.act:focus-visible small{color:inherit}
.dbl .act{min-height:56px;padding:0 14px;gap:10px}
.dbl .act small,.dbl .act .go{display:none}
.dbl .act:last-child:nth-child(odd){grid-column:1/-1}

/* Secciones */
.sec{padding-top:40px}
.sec h2{font-size:clamp(22px,5.5vw,26px);margin-bottom:14px}
.about{font-size:16.5px;line-height:1.6;max-width:36em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.chips li{padding:6px 13px;border:1px solid var(--line);border-radius:999px;font-size:14px;background:var(--surface)}

.met{display:flex;gap:0 14px;margin:0;padding:0;list-style:none}
.met li{flex:1 1 0;min-width:0}
.met b{display:block;font-family:var(--f-display);font-weight:var(--dw);font-size:clamp(30px,8.5vw,40px);line-height:1;letter-spacing:-.03em}
.met span{display:block;margin-top:4px;color:var(--muted);font-size:13.5px;line-height:1.3}

.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 36px}
.svc li{padding:12px 0 13px;border-top:1px solid var(--line)}
.svc h3{font-family:var(--f-text);font-weight:600;font-size:17px;letter-spacing:0;line-height:1.3}
.svc p{color:var(--muted);font-size:14.5px;line-height:1.4;margin-top:2px}

.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:104px 1fr;column-gap:26px;position:relative;padding-bottom:16px}
.tl li::before{content:"";position:absolute;left:117px;top:10px;bottom:-4px;width:1px;background:var(--line)}
.tl li::after{content:"";position:absolute;left:113px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.tl li:last-child::before{display:none}
.tl time{font-weight:700;font-size:15px;line-height:1.35;padding-top:3px;padding-right:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tl h3{font-family:var(--f-text);font-weight:600;font-size:16.5px;line-height:1.3;letter-spacing:0}
.tl p{color:var(--muted);font-size:14.5px}

.prj{list-style:none;margin:0;padding:0}
.prj li{border-top:1px solid var(--line)}
.prj li:last-child{border-bottom:1px solid var(--line)}
.prj a,.prj .p{display:block;padding:13px 0;text-decoration:none}
.prj h3{font-family:var(--f-text);font-weight:600;letter-spacing:0;font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.prj h3 svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.prj p{color:var(--muted);font-size:14.5px;line-height:1.4;margin-top:2px}

.qs{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-24px;padding:0 24px 6px;scrollbar-width:none}
.qs::-webkit-scrollbar{display:none}
.qs figure{margin:0;flex:0 0 84%;scroll-snap-align:center;padding:4px 0}
.qs.one figure{flex-basis:100%}
.qs blockquote{margin:0;font-family:var(--f-display);font-weight:var(--dw);font-size:clamp(18px,4.6vw,21px);line-height:1.35;letter-spacing:-.01em}
.qs figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
.qs figcaption b{color:var(--ink)}

.lnk{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lnk a{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none;font-weight:600;transition:background .15s ease,color .15s ease}
.lnk a>svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lnk a:hover,.lnk a:focus-visible{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.qr{display:flex;align-items:center;gap:20px}
.qr img{width:132px;height:132px;background:#fff;border-radius:14px;padding:6px;border:1px solid var(--line);flex:none}
.qr img[hidden]{display:none}
.qr .row{flex-direction:column;align-items:stretch;flex:1;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:10px}
.row .btn{min-height:46px;padding:0 18px;font-size:15.5px}

/* Contacto y pie */
.contact{margin-top:56px;background:var(--hero);color:var(--hero-ink);border-radius:44px 44px 0 0;padding:58px 0 calc(34px + env(safe-area-inset-bottom))}
.contact h2{font-size:clamp(30px,8vw,38px)}
.lead{color:var(--hero-soft);margin:8px 0 24px;max-width:32em}
.field{margin-bottom:18px}
.contact label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.contact label small{font-weight:400;color:var(--hero-soft)}
.contact input,.contact textarea{width:100%;font:inherit;font-size:17px;color:var(--hero-ink);background:transparent;border:1.5px solid var(--hero-line);border-radius:14px;padding:14px 16px;min-height:54px}
.contact textarea{resize:vertical}
.contact input::placeholder,.contact textarea::placeholder{color:var(--hero-soft);opacity:.85}
.contact input:focus,.contact textarea:focus{outline:none;border-color:var(--hero-ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{color:var(--err);font-size:15px;margin:0 0 14px}
.err[hidden]{display:none}
.small-note{margin-top:14px;font-size:14px;color:var(--hero-soft)}
.contact .btn-main{width:100%}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:40px;padding-top:22px;border-top:1px solid var(--hero-line);font-size:14px;color:var(--hero-soft)}
.foot a{color:var(--hero-soft);text-underline-offset:3px}
footer.contact{margin-top:60px;padding-top:30px}
footer.contact .foot{margin-top:0;border-top:0;padding-top:0}

/* Ventana de acceso */
dialog#tk-login{border:0;border-radius:24px;padding:28px;width:min(92vw,380px);background:#fff;color:#111827;box-shadow:0 30px 80px rgba(8,12,20,.35)}
dialog#tk-login::backdrop{background:rgba(8,12,20,.62);backdrop-filter:blur(4px)}
#tk-login .lg{border-radius:12px;margin-bottom:12px}
#tk-login h3{font-size:26px;margin-bottom:6px;color:#111827}
#tk-login p{color:#4B5565;font-size:16px}
#tk-login input{width:100%;margin:16px 0 14px;font:inherit;font-size:17px;padding:13px 15px;border:1.5px solid #CBD2DE;border-radius:12px;color:#111827;background:#fff}
#tk-login input:focus{outline:none;border-color:#111827}
#tk-login .err{color:#B3261E}
#tk-login .btn-ink{background:#111827;color:#fff}
#tk-login .btn-out{border-color:#111827;color:#111827}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-size:15px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:30;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:440px){
  .qr{flex-direction:column;align-items:flex-start}
  .qr .row{align-self:stretch}
  .tl li{grid-template-columns:92px 1fr;column-gap:24px}
  .tl li::before{left:104px}
  .tl li::after{left:100px}
}
@media (min-width:900px){
  .hero{padding-top:56px;padding-bottom:64px}
  .sec{padding-top:52px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ring{animation:none}
  .btn,.toast,.act i{transition:none}
}

/* ===== Estilo Cristal (opcional) ===== */
.scene{position:fixed;inset:0;z-index:-1;background:var(--bg);overflow:hidden}
.scene svg{display:block;width:100%;height:100%}
.scene::after{content:"";position:absolute;inset:0;background:var(--cr-over)}
.cr .wrap{width:min(100% - 32px,440px)}
.cr .hero{background:none;border-radius:0;padding:max(26px,env(safe-area-inset-top)) 0 4px}
.cr .badge{background:var(--cr-glass);border-color:var(--cr-edge);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:13.5px;padding:6px 14px}
.cr .pic{width:176px;height:176px;margin:22px auto 16px}
.cr .disc{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--cr-glassb);border:3px solid rgba(255,255,255,.88);box-shadow:0 18px 40px rgba(0,0,0,.28);pointer-events:none}
.cr .disc img{width:100%;height:100%;object-fit:cover}
.cr .disc .mono{color:var(--ink)}
.cr .hero h1{font-size:clamp(30px,8.4vw,38px);margin-top:0}
.cr .role{font-size:17px;color:var(--hero-soft);margin-top:6px}
.cr .role b{color:var(--ink);font-weight:600}
.cr .where{font-size:14.5px;margin-top:2px}
.cr .intro{font-size:16px;line-height:1.55;margin-top:14px;color:var(--hero-soft)}
.cr .cta{margin-top:20px}
.cr .btn-main.big{width:100%;min-height:56px;border-radius:14px;background:var(--cr-btn);color:var(--cr-btn-ink);font-size:17px}
.cr.ca .btn-main{background:var(--accent);color:var(--accent-ink)}
.cr .acts{width:100%;margin-top:12px}
.cr .act,.cr .lnk a{border:0;border-radius:14px;min-height:64px;padding:0 12px;gap:14px;background:var(--cr-glass);color:var(--ink);box-shadow:inset 0 0 0 1px var(--cr-edge);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.cr .act>svg,.cr .lnk a>svg{width:42px;height:42px;padding:10px;border-radius:11px;background:var(--cr-icon);color:var(--cr-icon-ink)}
.cr .act b{font-size:16px}
.cr .act small{font-size:14px;color:var(--hero-soft)}
.cr .go,.cr .dbl .go{display:none}
.cr .act:hover,.cr .act:focus-visible,.cr .lnk a:hover,.cr .lnk a:focus-visible{background:var(--cr-glassb);color:var(--ink);border:0}
.cr .act:hover small,.cr .act:focus-visible small{color:var(--hero-soft)}
.cr .dbl .act{min-height:60px;padding:0 10px;gap:10px}
.cr .sec{padding-top:12px}
.cr .sec:not(#enlaces) .wrap,.cr #contacto .wrap{background:var(--cr-glass);border-radius:18px;padding:20px 18px;box-shadow:inset 0 0 0 1px var(--cr-edge);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.cr .sec h2{font-size:20px;margin-bottom:12px}
.cr .chips li{background:var(--cr-glass);border-color:var(--line)}
.cr .qs{margin-inline:-18px;padding:0 18px 6px}
.cr .qr{flex-direction:column;align-items:stretch}
.cr .qr img{align-self:center}
.cr .contact{background:none;border-radius:0;margin-top:12px;padding:0 0 calc(28px + env(safe-area-inset-bottom))}
.cr .contact h2{font-size:22px}
.cr .lead{margin-bottom:18px}
.cr .contact input{border-radius:12px}
.cr .contact .foot{margin-top:24px}
.cr footer.contact{margin-top:18px;padding-top:0}
.cr footer.contact .wrap{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
.cr .toast{background:var(--ink);color:var(--bg)}

.foot .by{display:inline-flex;align-items:center;gap:8px}
.foot .by img{width:auto;height:16px;flex:none}