/* ==========================================================================
   15FPS
   ========================================================================== */

:root{
  --bg: #0a0b0d;
  --bg-2: #0e1013;
  --surface: #131519;
  --surface-2: #1a1d22;
  --line: rgba(237, 239, 240, .09);
  --line-strong: rgba(237, 239, 240, .18);

  --text: #edeff0;
  --text-muted: #9aa0a6;
  --text-faint: #676c72;

  --accent: #a6ff5e;
  --accent-rgb: 166, 255, 94;
  --accent-ink: #0a0b0d;
  --copper: #d98e4a;
  --copper-rgb: 217, 142, 74;
  --danger: #ff6b6b;

  --f-sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-serif: 'Instrument Serif', 'Times New Roman', serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1520px;
  --header-h: 76px;
  --r: 18px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection{ background: var(--accent); color: var(--accent-ink); }

[hidden]{ display: none !important; }
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5{ margin: 0; font-weight: 500; }
p{ margin: 0; }
button{ font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea{ font: inherit; color: inherit; }
em{ font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

.wrap{ width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link{
  position: absolute; left: 0; top: 0; z-index: 10001;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px;
  transform: translateY(-120%);
}
.skip-link:focus{ transform: none; }
:focus-visible{ outline: 1.5px solid var(--accent); outline-offset: 3px; }

main, .site-footer{ position: relative; z-index: 2; }

/* ==========================================================================
   Precarga
   ========================================================================== */

.preloader{
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 28px;
  padding: 24px var(--gutter);
  background: var(--bg);
  animation: preloaderFailsafe .6s ease 3s forwards;
}
@keyframes preloaderFailsafe{ to{ opacity: 0; visibility: hidden; } }
.preloader.is-done{
  animation: none;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .9s var(--ease-io) .05s, visibility 0s linear 1s;
}
.preloader-top{
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint);
}
.preloader-mark{
  font-size: clamp(5rem, 22vw, 20rem);
  font-weight: 600; letter-spacing: -.07em; line-height: .8;
  color: var(--text);
}
.preloader-mark span{ font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.03em; }
.preloader-foot{ display: grid; gap: 12px; }
.preloader-status{
  display: none;
  font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
}
.preloader-bar{ height: 1px; background: var(--line-strong); overflow: hidden; }
.preloader-fill{ display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }

/* ==========================================================================
   Capas de ambiente
   ========================================================================== */

.scroll-progress{ position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1001; pointer-events: none; }
.scroll-progress span{ display: block; height: 100%; width: 0; background: var(--accent); }

.grain{
  position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* cursor */
.cursor-dot, .cursor-ring{
  position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none;
  border-radius: 50%; opacity: 0; transition: opacity .3s;
}
.cursor-dot{ width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); }
.cursor-ring{
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid rgba(237, 239, 240, .45);
  transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s;
}
body.has-cursor .cursor-dot, body.has-cursor .cursor-ring{ opacity: 1; }
body.cursor-hot .cursor-ring{
  width: 72px; height: 72px; margin: -36px 0 0 -36px;
  background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .6);
}
body.cursor-hot .cursor-dot{ opacity: 0; }

/* índice lateral */
.edge-rail{
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 50;
  display: none; flex-direction: column; gap: 6px; align-items: flex-end;
}
.edge-tick{
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--text-faint);
  transition: color .3s;
}
.edge-tick{ position: relative; }
.edge-label{ position: absolute; right: calc(100% + 10px); white-space: nowrap; opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s var(--ease); text-transform: uppercase; }
.edge-num::after{ content: ''; display: inline-block; width: 10px; height: 1px; margin-left: 8px; vertical-align: middle; background: currentColor; transition: width .4s var(--ease); }
.edge-tick:hover, .edge-tick.is-active{ color: var(--text); }
.edge-tick.is-active .edge-num{ color: var(--accent); }
.edge-tick.is-active .edge-num::after{ width: 24px; background: var(--accent); }
.edge-tick:hover .edge-label, .edge-tick.is-active .edge-label{ opacity: 1; transform: none; }
@media (min-width: 1360px){ .edge-rail{ display: flex; } }

/* ==========================================================================
   Botones
   ========================================================================== */

.btn{
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 52px; padding: 0 26px;
  border-radius: 100px; border: 1px solid transparent;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  overflow: hidden; isolation: isolate;
  transition: transform .45s var(--ease), color .4s var(--ease), border-color .4s, background .4s;
}
.btn::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn:hover::before{ transform: none; }
.btn-accent{ background: var(--accent); color: var(--accent-ink); }
.btn-accent::before{ background: var(--text); }
.btn-outline{ border-color: var(--line-strong); color: var(--text); }
.btn-outline::before{ background: var(--text); }
.btn-outline:hover{ color: var(--bg); border-color: var(--text); }
.btn-sm{ height: 40px; padding: 0 18px; font-size: 14px; }
.btn-full{ width: 100%; }
.btn:disabled{ opacity: .5; cursor: not-allowed; }
.btn-arrow{ display: inline-block; transition: transform .5s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(4px) rotate(-45deg); }

/* ==========================================================================
   Cabecera
   ========================================================================== */

.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: transform .6s var(--ease), background .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(10, 11, 13, .72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.site-header.is-hidden{ transform: translateY(-100%); }
/* menú móvil abierto */
.site-header:has(.nav-links.is-open){ backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; background: transparent; border-bottom-color: transparent; }

.nav-wrap{
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* logo */
.logo{ display: block; width: 104px; height: 24px; overflow: hidden; position: relative; flex-shrink: 0; }
.logo img{ position: absolute; left: 0; top: 50%; width: 104px; height: 104px; max-width: none; transform: translateY(-50%); }

.nav-links{ display: flex; align-items: center; gap: 2px; }
.nav-link{
  position: relative; display: inline-flex; align-items: baseline; gap: 5px;
  padding: 8px 12px; border-radius: 100px;
  font-size: 14px; color: var(--text-muted);
  transition: color .3s, background .3s;
}
.nav-link i{ font-style: normal; font-family: var(--f-mono); font-size: 9px; color: var(--text-faint); transition: color .3s; }
.nav-link:hover{ color: var(--text); }
.nav-link.is-active{ color: var(--text); background: rgba(237, 239, 240, .06); }
.nav-link.is-active i{ color: var(--accent); }

.nav-actions{ display: flex; align-items: center; gap: 10px; }

.hamburger{
  display: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  position: relative;
}
.hamburger span{
  position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--text);
  transition: transform .45s var(--ease), top .45s var(--ease);
}
.hamburger span:nth-child(1){ top: 17px; }
.hamburger span:nth-child(2){ top: 25px; }
.hamburger.is-open span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.hamburger.is-open span:nth-child(2){ top: 21px; transform: rotate(-45deg); }

/* chip del usuario */
.user-chip{ position: relative; }
.user-chip-btn{
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 12px 0 4px; border-radius: 100px;
  border: 1px solid var(--line-strong);
  transition: border-color .3s;
}
.user-chip-btn:hover{ border-color: var(--text-muted); }
.user-avatar, .review-avatar{
  display: grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 13px; font-weight: 600;
}
.user-chip-name{ font-size: 14px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip-caret{ width: 14px; height: 14px; color: var(--text-muted); }
.user-menu{
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 20;
  min-width: 250px; padding: 8px;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  animation: pop .35s var(--ease);
}
@keyframes pop{ from{ opacity: 0; transform: translateY(-6px); } }
.user-menu-head{ padding: 10px 12px 0; font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.user-menu-mail{ padding: 2px 12px 10px; font-size: 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; word-break: break-all; }
.user-menu-link, .user-menu-btn{
  text-align: left; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--text-muted);
  transition: background .25s, color .25s;
}
.user-menu-link:hover, .user-menu-btn:hover{ background: rgba(237, 239, 240, .05); color: var(--text); }
.user-menu-admin{ color: var(--accent); }
.user-menu-btn{ color: var(--danger); }

/* ==========================================================================
   Tipografía de sección
   ========================================================================== */

.section{ padding: clamp(96px, 14vw, 200px) 0 0; }

.sec-top{
  display: flex; align-items: center; gap: 16px;
  margin-bottom: clamp(40px, 6vw, 80px);
  font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
}
.sec-idx{ color: var(--accent); }
.sec-name{ color: var(--text); }
.sec-rule{ flex: 1; height: 1px; background: var(--line-strong); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease) .1s; }
.sec-top.is-visible .sec-rule, html:not(.js) .sec-rule{ transform: none; }
.sec-note{ color: var(--text-faint); }

.sec-head{
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end;
  margin-bottom: clamp(48px, 7vw, 96px);
}

.h2{
  font-size: clamp(2.6rem, 6.4vw, 6.4rem);
  font-weight: 500; letter-spacing: -.055em; line-height: .92;
}
.h2-xl{ font-size: clamp(3.4rem, 11vw, 11.5rem); letter-spacing: -.065em; line-height: .86; margin-bottom: clamp(48px, 7vw, 96px); }
.h2 em, .hero-title em{ color: var(--accent); padding-right: .04em; }
.sec-top .sec-idx + .sec-name{ margin-left: -4px; }

/* máscara línea a línea */
.ln{ display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ln > span{ display: block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.ln + .ln > span{ transition-delay: .09s; }
.reveal.is-visible .ln > span, html:not(.js) .ln > span{ transform: none; }

.lead{ font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--text-muted); max-width: 46ch; letter-spacing: -.01em; }

/* aparición */
.js .reveal{ opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease) var(--delay, 0ms), transform 1s var(--ease) var(--delay, 0ms); }
.js .reveal.is-visible{ opacity: 1; transform: none; }
.js .h2.reveal, .js .sec-top.reveal{ opacity: 1; transform: none; }

/* ==========================================================================
   Portada
   ========================================================================== */

.hero{
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--header-h) + 32px);
  position: relative; overflow: hidden;
}
.hero::before{
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 40vw at 85% 10%, rgba(var(--accent-rgb), .07), transparent 60%),
    radial-gradient(50vw 40vw at 0% 100%, rgba(var(--copper-rgb), .05), transparent 60%);
}

.hero-meta{
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint);
  margin-bottom: auto; padding-top: 12px;
}
.hero-meta b{ font-weight: 500; color: var(--text); margin-left: 6px; }
.clock::before{ content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; animation: blink 2s ease-in-out infinite; }
@keyframes blink{ 50%{ opacity: .25; } }

.hero-title{
  font-size: clamp(4.2rem, min(15.5vw, 30svh), 17rem);
  font-weight: 500; letter-spacing: -.07em; line-height: .84;
  margin-top: 56px;
}
.hero-title .ln > span{ transition-duration: 1.3s; }
.hero-title .ln-indent{ padding-left: 12vw; }
.hero-title .ln > span{ animation: rise 1.3s var(--ease) both; animation-delay: 1.05s; transform: none; }
.hero-title .ln + .ln > span{ animation-delay: 1.17s; }
@keyframes rise{ from{ transform: translateY(105%); } }

.hero-foot{
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 340px);
  gap: 32px 48px; align-items: end;
  padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(32px, 4vw, 56px);
  animation: fadeUp 1s var(--ease) 1.4s both;
}
@keyframes fadeUp{ from{ opacity: 0; transform: translateY(20px); } }
.hero-sub{ color: var(--text-muted); max-width: 44ch; font-size: 1.05rem; line-height: 1.55; }
.hero-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

.fps-card{
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 18px 20px 16px;
  background: rgba(19, 21, 25, .6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.fps-card-top{
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint);
}
.fps-readout{ display: flex; align-items: baseline; gap: 12px; margin: 10px 0 12px; font-variant-numeric: tabular-nums; }
.fps-before{ font-size: 2rem; color: var(--text-faint); text-decoration: line-through; text-decoration-thickness: 1px; letter-spacing: -.04em; }
.fps-arrow{ color: var(--text-faint); }
.fps-after{ font-size: 3.6rem; font-weight: 500; line-height: 1; color: var(--accent); letter-spacing: -.06em; min-width: 3ch; }
.fps-spark{ display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-bottom: 12px; }
.fps-spark span{ flex: 1; background: var(--accent); border-radius: 1px; opacity: .85; animation: spark 1.6s ease-in-out infinite alternate; }
.fps-spark span:nth-child(-n+3){ background: var(--copper); }
.fps-spark span:nth-child(1){ height: 15%; } .fps-spark span:nth-child(2){ height: 12%; animation-delay: .1s; }
.fps-spark span:nth-child(3){ height: 18%; animation-delay: .2s; } .fps-spark span:nth-child(4){ height: 45%; animation-delay: .3s; }
.fps-spark span:nth-child(5){ height: 70%; animation-delay: .4s; } .fps-spark span:nth-child(6){ height: 82%; animation-delay: .5s; }
.fps-spark span:nth-child(7){ height: 90%; animation-delay: .6s; } .fps-spark span:nth-child(8){ height: 86%; animation-delay: .7s; }
.fps-spark span:nth-child(9){ height: 95%; animation-delay: .8s; } .fps-spark span:nth-child(10){ height: 88%; animation-delay: .9s; }
.fps-spark span:nth-child(11){ height: 100%; animation-delay: 1s; } .fps-spark span:nth-child(12){ height: 93%; animation-delay: 1.1s; }
@keyframes spark{ to{ transform: scaleY(.82); } }
.fps-spark span{ transform-origin: bottom; }
.fps-unit{ font-size: 12px; color: var(--text-faint); }

.ticker{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 18px 0; }
.ticker-track{ display: flex; align-items: center; gap: 36px; width: max-content; animation: ticker 38s linear infinite; }
.ticker-track span{ font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: -.03em; color: var(--text-muted); white-space: nowrap; }
.ticker-track i{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.ticker-track i:nth-of-type(even){ background: var(--copper); }
@keyframes ticker{ to{ transform: translateX(-50%); } }

/* ==========================================================================
   Servicios
   ========================================================================== */

.service-list{ border-top: 1px solid var(--line-strong); }
.service-item{ border-bottom: 1px solid var(--line-strong); }
.service-row{
  width: 100%; display: grid; grid-template-columns: 90px 1fr 56px; align-items: center; gap: 16px;
  padding: clamp(22px, 3vw, 36px) 0; text-align: left;
}
.service-num{ font-family: var(--f-mono); font-size: 12px; color: var(--text-faint); transition: color .4s; }
.service-title{
  font-size: clamp(1.8rem, 4.6vw, 4.4rem); letter-spacing: -.05em; line-height: 1;
  color: var(--text-muted);
  transition: color .5s var(--ease), transform .7s var(--ease);
}
.service-plus{
  justify-self: end; position: relative; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-strong); transition: background .4s, border-color .4s, transform .6s var(--ease);
}
.service-plus::before, .service-plus::after{
  content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px;
  background: var(--text); transition: transform .5s var(--ease), background .4s;
}
.service-plus::after{ transform: rotate(90deg); }
.service-row:hover .service-title{ color: var(--text); transform: translateX(12px); }
.service-row:hover .service-num{ color: var(--accent); }
.service-item.is-open .service-title{ color: var(--text); }
.service-item.is-open .service-num{ color: var(--accent); }
.service-item.is-open .service-plus{ background: var(--accent); border-color: var(--accent); transform: rotate(180deg); }
.service-item.is-open .service-plus::before, .service-item.is-open .service-plus::after{ background: var(--accent-ink); }
.service-item.is-open .service-plus::after{ transform: rotate(0); }

.service-panel-wrap{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.service-item.is-open .service-panel-wrap{ grid-template-rows: 1fr; }
.service-panel{ overflow: hidden; }
.service-panel p{
  padding: 0 0 clamp(26px, 3vw, 40px) 106px; max-width: 70ch;
  font-size: 1.15rem; color: var(--text-muted);
}

/* ==========================================================================
   Bloques a dos columnas
   ========================================================================== */

.split{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
.split > div > .lead{ margin-top: 32px; }
.split-sticky{ position: sticky; top: calc(var(--header-h) + 40px); }

.log-list{ margin: 36px 0 40px; border-top: 1px solid var(--line); }
.log-list li{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 1rem; color: var(--text);
}
.log-list li::before{
  content: ''; width: 12px; height: 1px; background: var(--accent); flex-shrink: 0;
  transition: width .4s var(--ease);
}
.log-list li:hover::before{ width: 24px; }

.panel-head, .browser-bar{
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint);
}

.spotlight{ position: relative; }
.spotlight::after{
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-rgb), .06), transparent 60%);
  opacity: 0; transition: opacity .5s;
}
.spotlight:hover::after{ opacity: 1; }

/* proceso */
.process-rail{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 32px 12px; position: relative;
}
.process-rail .panel-head{ margin-bottom: 20px; }
.process-line{ position: absolute; left: 51px; top: 88px; bottom: 60px; width: 4px; height: calc(100% - 148px); }
.process-line-fill{ transition: stroke-dashoffset 2s var(--ease) .2s; }
.process-list li{ display: grid; grid-template-columns: 40px 1fr; gap: 28px; padding: 22px 0; position: relative; }
.process-list li + li{ border-top: 1px solid var(--line); }
.process-num{
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line-strong);
  font-family: var(--f-mono); font-size: 11px; color: var(--accent); position: relative; z-index: 1;
}
.process-list h4{ font-size: 1.5rem; letter-spacing: -.035em; margin-bottom: 4px; }
.process-list p{ color: var(--text-muted); }

/* ==========================================================================
   Montaje
   ========================================================================== */

.usecase-tabbar{
  position: relative; display: inline-flex; padding: 5px; margin-bottom: 24px;
  border: 1px solid var(--line-strong); border-radius: 100px;
}
.usecase-tab{
  position: relative; z-index: 1; height: 44px; padding: 0 28px; border-radius: 100px;
  font-size: 15px; color: var(--text-muted); transition: color .45s var(--ease);
}
.usecase-tab.is-active{ color: var(--accent-ink); }
.usecase-indicator{
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: 0; border-radius: 100px;
  background: var(--accent); transition: left .6s var(--ease), width .6s var(--ease);
}
.usecase-panels{
  display: grid; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.usecase-panel{
  grid-area: 1 / 1; padding: clamp(32px, 5vw, 72px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; align-items: end;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
  min-height: clamp(280px, 30vw, 420px);
}
.usecase-panel.is-active{ opacity: 1; visibility: visible; transform: none; }
.use-tag{ grid-column: 1 / -1; align-self: start; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.usecase-panel h3{ font-size: clamp(2.6rem, 6vw, 6rem); letter-spacing: -.06em; line-height: .9; }
.usecase-panel h3 em{ color: var(--accent); }
.usecase-panel p{ font-size: 1.15rem; color: var(--text-muted); max-width: 40ch; }

/* ==========================================================================
   Optimización
   ========================================================================== */

.opt-panel{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 32px 36px;
}
.opt-panel .panel-head{ margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.opt-panel-row{ display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; font-size: 15px; }
.opt-tag{ font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.opt-tag--bad{ color: var(--copper); }
.opt-tag--good{ color: var(--accent); }
.opt-bar{ height: 6px; margin-top: 10px; background: rgba(237, 239, 240, .06); border-radius: 100px; overflow: hidden; }
.opt-bar span{ display: block; height: 100%; width: 0; border-radius: inherit; background: var(--copper); transition: width 1.4s var(--ease); }
.opt-bar span[data-good]{ background: var(--accent); }

/* ==========================================================================
   Webs
   ========================================================================== */

.web-panel{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.browser-bar{ padding: 14px 18px; border-bottom: 1px solid var(--line); }
.browser-dots{ display: flex; gap: 6px; }
.browser-dots i{ width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-strong); }
.browser-url{ flex: 1; text-align: center; text-transform: none; letter-spacing: 0; font-size: 11px; margin-right: 39px; }
.web-mock{ padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; }
.mock-nav{ display: flex; gap: 10px; margin-bottom: 28px; }
.mock-nav span{ height: 6px; width: 38px; border-radius: 4px; background: var(--line-strong); }
.mock-nav span:first-child{ width: 54px; background: var(--accent); margin-right: auto; }
.mock-bar{ display: block; height: 22px; border-radius: 6px; background: rgba(237, 239, 240, .14); transform-origin: left; }
.mock-bar--title{ width: 88%; height: 34px; }
.mock-bar--title2{ width: 62%; height: 34px; }
.mock-bar--sub{ width: 48%; height: 10px; margin-top: 10px; background: var(--line-strong); }
.mock-cta{ display: block; width: 130px; height: 38px; border-radius: 100px; background: var(--accent); margin: 14px 0 26px; }
.mock-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mock-grid span{ aspect-ratio: 4 / 3; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.mock-grid span:nth-child(2){ background: linear-gradient(135deg, rgba(var(--copper-rgb), .25), transparent); }
.web-panel.is-visible .mock-bar{ animation: grow 1.2s var(--ease) both; }
.web-panel.is-visible .mock-bar--title2{ animation-delay: .1s; }
.web-panel.is-visible .mock-bar--sub{ animation-delay: .2s; }
@keyframes grow{ from{ transform: scaleX(0); } }

/* ==========================================================================
   Compromisos
   ========================================================================== */

.trust-grid{ display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); }
.trust-item{ padding: 36px 36px 8px 0; }
.trust-item + .trust-item{ padding-left: 36px; border-left: 1px solid var(--line-strong); }
.trust-index{ display: block; font-size: clamp(4rem, 8vw, 8rem); font-weight: 300; letter-spacing: -.07em; line-height: 1; color: var(--accent); margin-bottom: 36px; }
.trust-item:nth-child(2) .trust-index{ color: var(--copper); }
.trust-item:nth-child(3) .trust-index{ color: var(--text); }
.trust-item h4{ font-size: 1.6rem; letter-spacing: -.035em; margin-bottom: 10px; }
.trust-item p{ color: var(--text-muted); max-width: 32ch; }

/* ==========================================================================
   Formularios (compartido)
   ========================================================================== */

.form-row{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; position: relative; }
.form-row label{ font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.label-hint{ color: var(--text-faint); text-transform: none; letter-spacing: 0; margin-left: 6px; }

.form-row input, .form-row select, .form-row textarea, .pass-wrap input{
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong);
  border-radius: 0; padding: 12px 0; font-size: 1.05rem; color: var(--text);
  transition: border-color .35s;
}
.form-row textarea{ resize: vertical; min-height: 110px; line-height: 1.5; }
.form-row select{
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; background-size: 16px;
}
.form-row select option{ background: var(--surface); color: var(--text); }
.form-row input::placeholder, .form-row textarea::placeholder{ color: var(--text-faint); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline: none; border-bottom-color: var(--accent); }

.pass-wrap{ position: relative; }
.pass-wrap input{ padding-right: 44px; }
.pass-eye{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; font-size: 16px; opacity: .6; transition: opacity .25s; }
.pass-eye:hover{ opacity: 1; }

.char-count{ align-self: flex-end; font-family: var(--f-mono); font-size: 11px; color: var(--text-faint); }

.form-note{ margin-top: 14px; font-size: 14px; color: var(--accent); min-height: 1em; }
.form-note:empty{ margin: 0; }
.form-note.is-error{ color: var(--danger); }
.form-legal{ margin-top: 14px; font-size: 12.5px; color: var(--text-faint); line-height: 1.5; }
.form-legal a{ color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: color .25s; }
.form-legal a:hover{ color: var(--accent); }

.summary-label{ display: block; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 14px; }

/* ==========================================================================
   Reseñas
   ========================================================================== */

.reviews-grid{ display: grid; grid-template-columns: 360px 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }

.reviews-summary{
  position: sticky; top: calc(var(--header-h) + 24px);
  padding: 32px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.rating-big{ display: flex; align-items: baseline; gap: 6px; line-height: 1; margin-bottom: 14px; }
.rating-big #ratingAverage{ font-size: 6rem; font-weight: 400; letter-spacing: -.07em; }
.rating-of{ font-size: 1.4rem; color: var(--text-faint); }

.rating-stars{ display: flex; gap: 3px; }
.rating-stars svg{ width: 18px; height: 18px; }
.star-on{ fill: var(--accent); stroke: var(--accent); }
.star-off{ fill: none; stroke: var(--text-faint); }
.rating-count{ margin: 12px 0 24px; font-size: 14px; color: var(--text-muted); }

.rating-bars{ display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.rating-bar-row{ display: grid; grid-template-columns: 30px 1fr 28px; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 12px; color: var(--text-muted); }
.rating-bar{ height: 4px; border-radius: 100px; background: rgba(237, 239, 240, .07); overflow: hidden; }
.rating-bar span{ display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 1.2s var(--ease); }
.rating-bar-count{ text-align: right; color: var(--text-faint); }

.review-gate, .review-cooldown{
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 32px; border: 1px dashed var(--line-strong); border-radius: var(--r);
  margin-bottom: 32px;
}
.review-cooldown{ justify-content: flex-start; }
.review-gate h4, .review-cooldown h4{ font-size: 1.35rem; letter-spacing: -.03em; margin-bottom: 4px; }
.review-gate p, .review-cooldown p{ color: var(--text-muted); font-size: 15px; }
.cooldown-icon{ width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--copper-rgb), .12); color: var(--copper); }
.cooldown-icon svg{ width: 22px; height: 22px; }

.review-form{
  padding: 32px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  margin-bottom: 32px;
}
.review-as, .contact-as{ font-size: 14px; color: var(--text-muted); margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.review-as strong, .contact-as strong{ color: var(--text); font-weight: 500; }

.star-input{ display: flex; gap: 6px; }
.star-input button{ width: 36px; height: 36px; padding: 3px; transition: transform .3s var(--ease); }
.star-input button:hover{ transform: scale(1.12); }
.star-input svg{ width: 100%; height: 100%; fill: none; stroke: var(--text-faint); stroke-width: 1.3; transition: fill .2s, stroke .2s; }
.star-input button.is-on svg{ fill: var(--accent); stroke: var(--accent); }

.photo-zone{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.photo-add{
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border: 1px dashed var(--line-strong); border-radius: 100px; font-size: 14px; color: var(--text-muted);
  transition: border-color .3s, color .3s;
}
.photo-add svg{ width: 16px; height: 16px; }
.photo-add:hover:not(:disabled){ border-color: var(--accent); color: var(--accent); }
.photo-add:disabled{ opacity: .5; cursor: not-allowed; }
.photo-previews{ display: flex; gap: 10px; }
.photo-thumb{ position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-strong); }
.photo-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.photo-remove{
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(10, 11, 13, .8); color: var(--text); font-size: 14px; line-height: 1;
}

.review-list{ display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
.review-card{ padding: 32px 0; border-bottom: 1px solid var(--line-strong); }
.review-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.review-avatar{ width: 42px; height: 42px; font-size: 16px; background: var(--surface-2); color: var(--accent); border: 1px solid var(--line-strong); }
.review-meta{ display: flex; flex-direction: column; flex: 1; min-width: 0; }
.review-name{ font-weight: 500; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-date{ font-family: var(--f-mono); font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.review-text{ font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; letter-spacing: -.015em; max-width: 62ch; white-space: pre-line; overflow-wrap: anywhere; }
.review-photos{ display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.review-photos button{ width: 96px; height: 96px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); }
.review-photos img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.review-photos button:hover img{ transform: scale(1.06); }
.review-admin{ margin-top: 18px; }
.review-delete{
  font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--danger); padding: 8px 14px; border: 1px solid rgba(255, 107, 107, .35); border-radius: 100px;
  transition: background .25s;
}
.review-delete:hover{ background: rgba(255, 107, 107, .1); }
.review-delete:disabled{ opacity: .5; }
.review-empty{ padding: 32px 0; color: var(--text-muted); }

/* ==========================================================================
   Contacto
   ========================================================================== */

.contact .h2-xl .ln-indent{ padding-left: 14vw; }
.contact-grid{ display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
.contact-info{ margin-top: 40px; border-top: 1px solid var(--line); }
.contact-info li{ display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.contact-info li > span:first-child{ font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.contact-value{ font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -.02em; overflow-wrap: anywhere; }

.contact-form{ padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.contact-gate h4{ font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -.04em; line-height: 1.05; margin-bottom: 14px; }
.contact-gate p{ color: var(--text-muted); margin-bottom: 28px; }

/* ==========================================================================
   Pie
   ========================================================================== */

.site-footer{ margin-top: clamp(120px, 16vw, 220px); border-top: 1px solid var(--line-strong); overflow: hidden; }
.footer-cta{ display: block; padding: clamp(48px, 7vw, 96px) 0; border-bottom: 1px solid var(--line); }
.footer-cta-kicker{ display: block; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 18px; }
.footer-cta-big{
  display: inline-block; font-size: clamp(3.4rem, 10vw, 10rem); letter-spacing: -.065em; line-height: .9;
  transition: color .5s var(--ease), transform .7s var(--ease);
}
.footer-cta-big em{ display: inline-block; color: var(--accent); transition: transform .7s var(--ease); }
.footer-cta:hover .footer-cta-big{ color: var(--accent); }
.footer-cta:hover .footer-cta-big em{ transform: translateX(.2em) rotate(-45deg); }

.footer-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; padding: 56px 0; }
.footer-brand p{ color: var(--text-muted); max-width: 34ch; margin-top: 18px; font-size: 15px; }
.footer-col{ display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-col h5{ font-family: var(--f-mono); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 6px; }
.footer-col a, .footer-col span{ color: var(--text-muted); transition: color .25s; overflow-wrap: anywhere; }
.footer-col a:hover{ color: var(--text); }
.footer-social{ display: inline-flex; align-items: center; gap: 8px; }
.footer-social svg{ width: 16px; height: 16px; flex-shrink: 0; }

.footer-wordmark{
  position: relative; z-index: 0; pointer-events: none;
  font-size: 30.5vw; font-weight: 600; letter-spacing: -.08em; line-height: .72;
  text-align: center; white-space: nowrap; user-select: none;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong);
  margin-bottom: -2vw; padding-top: 2vw;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), transparent 70%);
  -webkit-background-clip: text; background-clip: text;
}
.footer-bottom{
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 22px; padding-bottom: 22px; border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint);
  position: relative; background: var(--bg);
}
.to-top:hover{ color: var(--accent); }

/* ==========================================================================
   Modal de acceso
   ========================================================================== */

.auth-modal{ position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; }
.auth-backdrop{ position: absolute; inset: 0; background: rgba(5, 6, 7, .75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade .4s ease; }
@keyframes fade{ from{ opacity: 0; } }
.auth-dialog{
  position: relative; width: min(460px, 100%); max-height: calc(100svh - 32px); overflow-y: auto;
  padding: clamp(28px, 5vw, 44px);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 22px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8);
  animation: dialogIn .6s var(--ease);
}
@keyframes dialogIn{ from{ opacity: 0; transform: translateY(24px) scale(.98); } }
.auth-close{
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line-strong); transition: background .25s, transform .5s var(--ease);
}
.auth-close:hover{ background: rgba(237, 239, 240, .06); transform: rotate(90deg); }
.auth-close svg{ width: 16px; height: 16px; }
.auth-dialog h3{ font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: -.05em; line-height: 1; margin-bottom: 10px; }
.auth-lead{ color: var(--text-muted); margin-bottom: 30px; font-size: 15px; }
.auth-pane{ display: none; }
.auth-pane.is-active{ display: block; animation: fade .4s ease; }
.auth-switch{ margin-top: 22px; font-size: 14px; color: var(--text-muted); text-align: center; }
.auth-switch button{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.auth-switch button:disabled{ opacity: .5; }
.auth-note{ margin-top: 16px; font-size: 14px; color: var(--accent); text-align: center; }
.auth-note:empty{ display: none; }
.auth-note.is-error{ color: var(--danger); }
.auth-code-target{ color: var(--text-muted); margin-bottom: 24px; font-size: 15px; }
.auth-code-target strong{ color: var(--text); font-weight: 500; word-break: break-all; }

.code-input{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 24px; }
.code-input input{
  width: 100%; height: 64px; text-align: center; font-size: 1.8rem; font-family: var(--f-mono);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text);
  transition: border-color .25s;
}
.code-input input:focus{ outline: none; border-color: var(--accent); }
.code-input input.is-filled{ border-color: rgba(var(--accent-rgb), .5); color: var(--accent); }

/* ==========================================================================
   Visor de fotos
   ========================================================================== */

.lightbox{ position: fixed; inset: 0; z-index: 3000; background: rgba(5, 6, 7, .94); display: grid; place-items: center; padding: 24px; animation: fade .3s ease; }
.lightbox img{ max-width: min(1100px, 100%); max-height: 86svh; border-radius: 12px; object-fit: contain; }
.lightbox-close{ position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); }
.lightbox-close svg{ width: 18px; height: 18px; }

/* ==========================================================================
   Adaptación
   ========================================================================== */

@media (max-width: 1180px){
  .nav-links{
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; align-items: stretch; justify-content: center; gap: 0;
    padding: var(--header-h) var(--gutter) 40px;
    background: var(--bg);
    clip-path: inset(0 0 100% 0);
    transition: clip-path .8s var(--ease-io);
  }
  .nav-links.is-open{ clip-path: inset(0 0 0 0); }
  .nav-link{
    font-size: clamp(2rem, 8vw, 3.6rem); letter-spacing: -.05em; color: var(--text);
    padding: 8px 0; border-radius: 0; border-bottom: 1px solid var(--line); gap: 16px;
  }
  .nav-link.is-active{ background: none; color: var(--accent); }
  .nav-link i{ font-size: 11px; }
  .hamburger{ display: block; }
  .sec-head{ grid-template-columns: 1fr; gap: 28px; }
  .footer-grid{ grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
}

@media (max-width: 960px){
  .hero-foot{ grid-template-columns: 1fr; }
  .fps-card{ max-width: 360px; }
  .split, .contact-grid{ grid-template-columns: 1fr; }
  .split-sticky, .reviews-summary{ position: static; }
  .reviews-grid{ grid-template-columns: 1fr; }
  .usecase-panel{ grid-template-columns: 1fr; }
  .trust-grid{ grid-template-columns: 1fr; }
  .trust-item, .trust-item + .trust-item{ padding: 32px 0; border-left: 0; }
  .trust-item + .trust-item{ border-top: 1px solid var(--line-strong); }
  .trust-index{ margin-bottom: 20px; }
}

@media (max-width: 640px){
  :root{ --header-h: 64px; }
  .hide-s{ display: none; }
  .nav-cta{ display: none; }
  .auth-trigger{ padding: 0 14px; }
  .user-chip-name{ display: none; }
  .hero-title .ln-indent{ padding-left: 0; }
  .hero-actions{ flex-direction: column; }
  .hero-actions .btn{ width: 100%; }
  .hero-title{ font-size: 19vw; }
  .hero-meta{ flex-direction: column; gap: 6px; }
  .service-row{ grid-template-columns: 34px 1fr 40px; gap: 10px; }
  .service-plus{ width: 38px; height: 38px; }
  .service-panel p{ padding-left: 44px; font-size: 1rem; }
  .sec-note{ display: none; }
  .process-rail{ padding: 22px 20px 6px; }
  .process-line{ left: 38px; }
  .process-list li{ gap: 18px; }
  .opt-panel{ padding: 22px 20px 28px; }
  .reviews-summary, .review-form, .review-gate, .review-cooldown{ padding: 24px 20px; }
  .review-gate{ flex-direction: column; align-items: flex-start; }
  .contact .h2-xl .ln-indent{ padding-left: 0; }
  .contact-info li{ grid-template-columns: 1fr; gap: 4px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-bottom{ flex-direction: column; gap: 8px; }
  .code-input input{ height: 54px; font-size: 1.4rem; }
}

@media (hover: none){
  .cursor-dot, .cursor-ring{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
  .ticker-track{ animation: none; }
  .grain{ display: none; }
}

/* ==========================================================================
   Páginas legales
   ========================================================================== */

.legal-header .nav-wrap{ gap: 16px; }
.legal-back{ display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-muted); transition: color .25s; }
.legal-back:hover{ color: var(--accent); }

.legal-hero{ padding: calc(var(--header-h) + clamp(56px, 9vw, 140px)) 0 clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--line-strong); }
.legal-hero .sec-top{ margin-bottom: clamp(32px, 5vw, 64px); }
.legal-title{ font-size: clamp(3.2rem, 10vw, 10rem); font-weight: 500; letter-spacing: -.065em; line-height: .88; }
.legal-title em{ color: var(--accent); }
.legal-meta{ display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: clamp(32px, 4vw, 56px); font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.legal-meta b{ color: var(--text); font-weight: 500; margin-left: 8px; }

.legal-body{ display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); padding-top: clamp(48px, 6vw, 88px); align-items: start; }
.legal-toc{ position: sticky; top: calc(var(--header-h) + 24px); }
.legal-toc ol{ border-top: 1px solid var(--line); counter-reset: toc; }
.legal-toc a{ display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-muted); transition: color .25s, padding .4s var(--ease); }
.legal-toc a::before{ counter-increment: toc; content: counter(toc, decimal-leading-zero); font-family: var(--f-mono); font-size: 10px; color: var(--text-faint); padding-top: 3px; }
.legal-toc a:hover{ color: var(--text); padding-left: 6px; }

.legal-content{ max-width: 760px; counter-reset: sec; }
.legal-intro{ font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.5; letter-spacing: -.015em; color: var(--text); margin-bottom: 64px; }
.legal-content section{ padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.legal-content h2{ display: flex; gap: 18px; align-items: baseline; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.04em; line-height: 1.1; margin-bottom: 20px; }
.legal-content h2::before{ counter-increment: sec; content: counter(sec, decimal-leading-zero); font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--accent); flex-shrink: 0; transform: translateY(-4px); }
.legal-content h3{ font-size: 1.1rem; letter-spacing: -.02em; margin: 26px 0 10px; }
.legal-content p, .legal-content li{ color: var(--text-muted); line-height: 1.7; }
.legal-content p + p{ margin-top: 14px; }
.legal-content ul{ margin: 14px 0; }
.legal-content ul li{ position: relative; padding-left: 26px; margin-bottom: 8px; }
.legal-content ul li::before{ content: ''; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--accent); }
.legal-content strong{ color: var(--text); font-weight: 500; }
.legal-content a{ color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: color .25s, text-decoration-color .25s; }
.legal-content a:hover{ color: var(--accent); text-decoration-color: var(--accent); }

.legal-table{ width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.legal-table th, .legal-table td{ text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.legal-table th{ font-family: var(--f-mono); font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.legal-table td{ color: var(--text-muted); }
.legal-table td:first-child{ color: var(--text); }
.legal-table-wrap{ overflow-x: auto; }

.legal-card{ display: grid; grid-template-columns: 140px 1fr; margin: 18px 0; border-top: 1px solid var(--line); }
.legal-card dt, .legal-card dd{ margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.legal-card dt{ font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); padding-top: 15px; }
.legal-card dd{ color: var(--text); overflow-wrap: anywhere; }

.fill{ color: var(--copper); border-bottom: 1px dashed rgba(var(--copper-rgb), .6); }

.legal-foot{ margin-top: clamp(96px, 12vw, 160px); }
.legal-foot .footer-bottom{ border-top: 1px solid var(--line-strong); }
.legal-foot .footer-bottom a:hover{ color: var(--accent); }

@media (max-width: 960px){
  .legal-body{ grid-template-columns: 1fr; }
  .legal-toc{ position: static; }
}
@media (max-width: 640px){
  .legal-card{ grid-template-columns: 1fr; }
  .legal-card dt{ border-bottom: 0; padding-bottom: 0; }
  .legal-back span{ display: none; }
}


/* ==========================================================================
   Fotografía
   ========================================================================== */

.media{ position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--surface); aspect-ratio: 4 / 3; }
.media-tall{ aspect-ratio: 5 / 4; }
.media img, .usecase-media img, .band-img img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.55) contrast(1.05) brightness(.85);
  transition: filter .8s var(--ease), transform 1.6s var(--ease);
}
.media:hover img, .usecase-media:hover img{ filter: grayscale(0) contrast(1.05) brightness(.95); }
.media::after, .usecase-media::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 11, 13, .7));
}
.media figcaption, .band-cap{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px;
  font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: rgba(237, 239, 240, .75);
}
.media figcaption span:first-child, .band-cap span:first-child{ color: var(--accent); }

.js .media.reveal{ opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round var(--r)); transition: clip-path 1.3s var(--ease-io) var(--delay, 0ms); }
.js .media.reveal img{ transform: scale(1.18); }
.js .media.reveal.is-visible{ clip-path: inset(0 0 0 0 round var(--r)); }
.js .media.reveal.is-visible img{ transform: none; }

.split-col{ display: grid; gap: 20px; }

/* banda a sangre */
.band{ position: relative; margin: clamp(80px, 10vw, 140px) 0 0; height: clamp(320px, 56vw, 720px); overflow: hidden; }
.band-img{ position: absolute; inset: -12% 0; will-change: transform; }
.band::after{ content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 70%, var(--bg) 100%); }
.band-cap{ max-width: var(--max); margin-inline: auto; padding: 24px var(--gutter); }
.js .band.reveal{ opacity: 1; transform: none; clip-path: inset(0 8% 0 8%); transition: clip-path 1.4s var(--ease-io); }
.js .band.reveal.is-visible{ clip-path: inset(0 0 0 0); }

/* montaje: texto a la izquierda, foto a la derecha */
.usecase-panel{ grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; }
.usecase-panel .use-tag, .usecase-panel h3, .usecase-panel p{ grid-column: 1; }
.usecase-panel h3{ align-self: end; }
.usecase-media{ grid-column: 2; grid-row: 1 / 4; position: relative; margin: 0; border-radius: 12px; overflow: hidden; min-height: 280px; }
.usecase-media img{ position: absolute; inset: 0; transform: scale(1.06); }
.usecase-panel.is-active .usecase-media img{ transform: none; }

/* webs: navegador superpuesto a la foto */
.web-stack{ position: relative; padding-bottom: 18%; }
.web-stack .media{ aspect-ratio: 16 / 11; width: 88%; margin-left: auto; }
.web-stack .web-panel{ position: absolute; left: 0; bottom: 0; width: 64%; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.web-stack .web-mock{ padding: 22px; gap: 10px; }
.web-stack .mock-nav{ margin-bottom: 14px; }
.web-stack .mock-bar--title, .web-stack .mock-bar--title2{ height: 20px; }
.web-stack .mock-cta{ width: 90px; height: 26px; margin: 8px 0 14px; }

@media (max-width: 960px){
  .usecase-panel{ grid-template-columns: 1fr; grid-template-rows: none; }
  .usecase-media{ grid-column: 1; grid-row: auto; order: -1; aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 640px){
  .web-stack{ padding-bottom: 0; display: grid; gap: 16px; }
  .web-stack .media{ width: 100%; }
  .web-stack .web-panel{ position: relative; width: 100%; }
  .media figcaption span:last-child{ display: none; }
}


/* ==========================================================================
   Efectos
   ========================================================================== */

html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-stopped{ overflow: hidden; }

/* botones: el texto sube y entra una copia desde abajo */
.roll{ position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.25; }
.roll > span{ display: block; transition: transform .6s var(--ease); }
.roll > span::after{ content: attr(data-t); position: absolute; left: 0; top: 100%; }
.btn:hover .roll > span, .footer-col a:hover .roll > span, .legal-back:hover .roll > span{ transform: translateY(-100%); }

/* fotos que se desplazan dentro de su marco */
.media img[data-drift]{ height: 118%; margin-top: -9%; }
.js .media.reveal.is-visible img[data-drift]{ transform: translate3d(0, var(--drift, 0%), 0); transition: filter .8s var(--ease); }

/* portada que se aleja al hacer scroll */
[data-hero-title]{ will-change: transform, opacity; }

/* cinta que reacciona a la velocidad del scroll */
.js .ticker-track.is-driven{ animation: none; will-change: transform; }

/* rótulo del pie: letras que suben */
.footer-wordmark span{ display: inline-block; transform: translateY(40%); opacity: 0; transition: transform 1.2s var(--ease), opacity 1.2s var(--ease); }
.footer-wordmark.is-in span{ transform: none; opacity: 1; }
.footer-wordmark span:nth-child(2){ transition-delay: .06s; }
.footer-wordmark span:nth-child(3){ transition-delay: .12s; }
.footer-wordmark span:nth-child(4){ transition-delay: .18s; }
.footer-wordmark span:nth-child(5){ transition-delay: .24s; }
html:not(.js) .footer-wordmark span{ transform: none; opacity: 1; }

/* transición entre páginas */
.page-wipe{
  position: fixed; inset: 0; z-index: 9800; pointer-events: none;
  background: var(--accent); transform: scaleY(0); transform-origin: bottom;
}
.page-wipe.is-leaving{ transform: scaleY(1); transition: transform .6s var(--ease-io); }
.page-wipe.is-entering{ transform: scaleY(1); transform-origin: top; animation: wipeOut .8s var(--ease-io) .05s forwards; }
@keyframes wipeOut{ to{ transform: scaleY(0); } }

/* enlaces del pie y de texto con subrayado que se dibuja */
.footer-col a:not(.footer-social){ position: relative; width: fit-content; }
.nav-link::after{
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav-link:hover::after{ transform: scaleX(1); transform-origin: left; }
.nav-link.is-active::after{ display: none; }

/* tarjetas que se inclinan levemente con el ratón */
.tilt{ transition: transform .6s var(--ease); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

@media (max-width: 1180px){ .nav-link::after{ display: none; } }
@media (prefers-reduced-motion: reduce){
  .footer-wordmark span{ transform: none; opacity: 1; }
  .page-wipe{ display: none; }
}


/* ==========================================================================
   Idiomas
   ========================================================================== */

.lang{ position: relative; }
.lang-btn{
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px 0 11px;
  border: 1px solid var(--line-strong); border-radius: 100px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--text-muted);
  transition: color .25s, border-color .25s;
}
.lang-btn svg{ width: 16px; height: 16px; transition: transform .8s var(--ease); }
.lang-btn:hover, .lang-btn[aria-expanded="true"]{ color: var(--text); border-color: var(--text-muted); }
.lang-btn:hover svg{ transform: rotate(180deg); }
.lang-menu{
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 30;
  width: 200px; padding: 6px; display: grid;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  animation: pop .35s var(--ease);
}
.lang-menu button{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 8px; text-align: start; font-size: 14px; color: var(--text-muted);
  transition: background .2s, color .2s;
}
.lang-menu button i{ font-style: normal; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--text-faint); }
.lang-menu button:hover, .lang-menu button:focus-visible{ background: rgba(237, 239, 240, .05); color: var(--text); outline: none; }
.lang-menu button[aria-checked="true"]{ color: var(--text); }
.lang-menu button[aria-checked="true"] i{ color: var(--accent); }
.lang-menu button[aria-checked="true"]::after{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-inline-start: auto; order: 2; }
.lang-menu button[aria-checked="true"] i{ order: 3; margin-inline-start: 10px; }

/* escrituras sin cursiva ni espaciado negativo */
html:is([lang="zh"], [lang="ja"], [lang="ko"], [lang="ar"]) em{ font-family: inherit; font-style: normal; }
html:is([lang="zh"], [lang="ja"], [lang="ko"]) :is(.hero-title, .h2, .usecase-panel h3, .footer-cta-big, .service-title, .trust-index, .process-list h4, .contact-gate h4, .auth-dialog h3){ letter-spacing: -.02em; }
html[lang="ar"] *{ letter-spacing: 0 !important; }
html:not([lang="es"]) .hero-title{ font-size: clamp(3.2rem, min(11vw, 22svh), 12.5rem); }
html:not([lang="es"]) .h2-xl{ font-size: clamp(2.8rem, 8vw, 8.5rem); }

/* árabe: de derecha a izquierda */
[dir="rtl"] .hero-title .ln-indent, [dir="rtl"] .contact .h2-xl .ln-indent{ padding-left: 0; padding-right: 12vw; }
[dir="rtl"] .service-row{ text-align: right; }
[dir="rtl"] .service-panel p{ padding-left: 0; padding-right: 106px; }
[dir="rtl"] .service-row:hover .service-title{ transform: translateX(-12px); }
[dir="rtl"] .btn-arrow, [dir="rtl"] .footer-cta-big em{ transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn-arrow{ transform: scaleX(-1) translateX(4px) rotate(-45deg); }
[dir="rtl"] .footer-cta:hover .footer-cta-big em{ transform: scaleX(-1) translateX(.2em) rotate(-45deg); }
[dir="rtl"] .edge-rail{ display: none !important; }
[dir="rtl"] .user-menu, [dir="rtl"] .lang-menu{ right: auto; left: 0; }
[dir="rtl"] .process-line{ left: auto; right: 51px; }
[dir="rtl"] .sec-rule{ transform-origin: right; }
[dir="rtl"] .ticker-track{ direction: ltr; }
[dir="rtl"] .web-stack .media{ margin-left: 0; margin-right: auto; }
[dir="rtl"] .web-stack .web-panel{ left: auto; right: 0; }
[dir="rtl"] .pass-eye{ right: auto; left: 0; }
[dir="rtl"] .pass-wrap input{ padding-right: 0; padding-left: 44px; }
[dir="rtl"] .form-row select{ background-position: left 2px center; }
[dir="rtl"] .char-count{ align-self: flex-start; }
[dir="rtl"] .rating-bar-count{ text-align: left; }
[dir="rtl"] .auth-close{ right: auto; left: 16px; }

@media (max-width: 640px){
  .lang{ position: static; }
  .lang-menu{ top: calc(var(--header-h) - 2px); left: var(--gutter); right: var(--gutter); width: auto; }
  [dir="rtl"] .lang-menu{ left: var(--gutter); right: var(--gutter); }
  .lang-btn{ padding: 0 10px; }
  .lang-btn svg{ display: none; }
  [dir="rtl"] .service-panel p{ padding-right: 44px; }
  [dir="rtl"] .process-line{ right: 38px; }
  [dir="rtl"] .hero-title .ln-indent, [dir="rtl"] .contact .h2-xl .ln-indent{ padding-right: 0; }
}
[dir="rtl"] .fps-arrow{ display: inline-block; transform: scaleX(-1); }
html[lang="ar"]{ --f-mono: var(--f-sans); }