/* Torama Agency · página de inicio
   Paleta y tipografía tomadas del diseño original en Canva. */
:root {
  --navy: #00242b;
  --navy-deep: #001a20;
  --abyss: #000f13;
  --royal: #0a4a54;
  --red: #e6414c;
  --cyan: #78ffc0;
  --ink: #dfe5ea;
  --white: #fff;
  --ex: 30vw; --ey: 45vh; --er: 15vw;      /* posición del sello (la fija scene.js) */
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --glass: rgba(0, 24, 30, .6);
  --line: rgba(120, 255, 192, .22);
  --brand: 'Caviar Dreams', Poppins, system-ui, sans-serif;   /* tipografía del manual */
}

@font-face { font-family: 'Caviar Dreams'; font-weight: 400; font-display: swap; src: url('../assets/fonts/CaviarDreams.woff') format('woff'); }
@font-face { font-family: 'Caviar Dreams'; font-weight: 700; font-display: swap; src: url('../assets/fonts/CaviarDreams_Bold.woff') format('woff'); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.rm { scroll-behavior: auto; }
body {
  margin: 0; background: var(--abyss); color: var(--ink);
  font-family: Poppins, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(16px, 1.05vw + 12px, 19px); line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: normal; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--red); color: #fff; padding: 10px 18px; border-radius: 99px; transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { width: min(1240px, 100% - var(--pad) * 2); margin-inline: auto; }
.center { text-align: center; }

/* ---------- Capas fijas: escena, ambientes, destello, luz del cursor ---------- */
#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.moods, .mood { position: fixed; inset: 0; pointer-events: none; }
.moods { z-index: 0; }
.mood { opacity: 0; transition: opacity 1.1s ease; }
.mood.is-on { opacity: 1; }
.mood[data-mood="nosotros"] { background: linear-gradient(180deg, rgba(0, 15, 19, .82), rgba(0, 28, 34, .7)); }
.mood[data-mood="resultados"] { background: radial-gradient(70% 60% at 88% 22%, rgba(230, 65, 76, .34), transparent 62%), radial-gradient(60% 60% at 6% 90%, rgba(120, 255, 192, .14), transparent 60%), rgba(0, 13, 17, .86); }
.mood[data-mood="servicios"] { background: radial-gradient(rgba(120, 255, 192, .13) 1.2px, transparent 1.7px) 0 0 / 20px 20px, linear-gradient(160deg, rgba(4, 64, 72, .9), rgba(0, 30, 37, .88)); }
.mood[data-mood="clientes"] { background: linear-gradient(180deg, rgba(0, 26, 32, .78), rgba(60, 96, 104, .6) 55%, rgba(0, 26, 32, .72)); }
.mood[data-mood="contacto"] { background: radial-gradient(90% 70% at 50% 40%, rgba(0, 18, 23, .72), rgba(0, 18, 23, .25) 75%); }
.flash { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #d6ffe9 30%, rgba(120, 255, 192, .55) 60%, rgba(120, 255, 192, 0) 100%); }
.glow { display: none; position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; z-index: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120, 255, 192, .13), rgba(120, 255, 192, 0)); mix-blend-mode: screen; will-change: transform; }
.has-pointer .glow { display: block; }

/* ---------- Cabecera: se integra en el paisaje y luego se vuelve cápsula flotante ---------- */
.top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; margin-inline: auto; width: 100%;
  display: flex; align-items: center; gap: 14px; padding: 18px var(--pad);
  border: 1px solid transparent; border-radius: 0;
  transition: width .7s var(--ease), top .5s var(--ease), padding .6s var(--ease), background .5s, border-color .5s, border-radius .7s var(--ease), box-shadow .5s; }
.top.is-dock { top: 14px; width: min(1000px, calc(100% - 28px)); padding: 7px 8px 7px 16px; border-radius: 99px;
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border-color: var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .09); }
.top.is-hidden { top: -96px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; flex: none; }
.brand__mark { width: 44px; height: 44px; overflow: visible; transition: transform .6s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.08); }
.brand__name { font-family: var(--brand); font-weight: 400; font-size: 1.2rem; letter-spacing: .02em; white-space: nowrap; }
.brand__name b { font-weight: 700; }
.top.is-dock .brand__mark { width: 38px; height: 38px; }

.nav { position: relative; margin-left: auto; display: flex; align-items: center; gap: 2px; font-size: .92rem; transition: opacity .4s, transform .5s var(--ease); }
.nav a { position: relative; z-index: 1; padding: 9px 16px; border-radius: 99px; text-decoration: none; color: var(--ink); white-space: nowrap; transition: color .35s, background .3s; }
.nav a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.nav a.is-active { color: var(--abyss); font-weight: 500; }
.nav a.is-active:hover { background: none; }
.nav__pill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--pw, 0px); transform: translateX(var(--px, 0px)); opacity: var(--po, 0);
  background: var(--cyan); border-radius: 99px; box-shadow: 0 0 24px rgba(120, 255, 192, .55);
  transition: transform .55s var(--ease), width .55s var(--ease), opacity .3s; }
.top__cta { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 10px 12px 10px 22px; border-radius: 99px; background: var(--red); color: #fff;
  text-decoration: none; font-weight: 500; font-size: .92rem; transition: opacity .4s, transform .5s var(--ease), box-shadow .3s; }
.top__cta svg, .top__skip svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(255, 255, 255, .2); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.top__cta:hover { box-shadow: 0 10px 30px rgba(230, 65, 76, .55); }
.top__cta:hover svg { transform: translateX(3px); }
.top__skip { position: absolute; right: var(--pad); top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 18px; border-radius: 99px;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ink);
  background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; transform: translateY(-30%); transition: opacity .4s, transform .5s var(--ease), visibility .4s; }
.top__skip svg { background: rgba(120, 255, 192, .2); stroke: var(--cyan); }
.top.is-travel .nav, .top.is-travel .top__cta { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.top.is-travel .top__skip { opacity: 1; visibility: visible; transform: translateY(-50%); }

.burger { display: none; flex: none; width: 46px; height: 46px; margin-left: auto; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); cursor: pointer; padding: 0; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; border-radius: 2px; transition: transform .4s var(--ease), top .4s var(--ease); }
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 26px; }
.menu-open .burger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; justify-content: center; padding: 90px var(--pad) 30px;
  background: radial-gradient(120% 80% at 100% 0%, rgba(8, 78, 86, .9), rgba(0, 15, 19, .97) 60%);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  clip-path: circle(0 at calc(100% - 46px) 44px); visibility: hidden; transition: clip-path .7s var(--ease), visibility .7s; }
.menu-open .menu { clip-path: circle(150% at calc(100% - 46px) 44px); visibility: visible; }
.menu__gate { position: absolute; right: -18%; bottom: -6%; width: 90%; opacity: .07; overflow: visible; }
.menu nav { display: grid; gap: 4px; }
.menu nav a { display: flex; align-items: baseline; gap: 16px; padding: 8px 0; font-size: clamp(1.7rem, 8vw, 2.6rem); font-weight: 700; color: #fff; text-decoration: none;
  opacity: 0; transform: translateX(30px); transition: opacity .5s, transform .6s var(--ease), color .2s; }
.menu nav a i { font-style: normal; font-size: .8rem; font-weight: 400; color: var(--cyan); letter-spacing: .1em; }
.menu-open .menu nav a { opacity: 1; transform: none; }
.menu-open .menu nav a:nth-child(1) { transition-delay: .12s; } .menu-open .menu nav a:nth-child(2) { transition-delay: .18s; }
.menu-open .menu nav a:nth-child(3) { transition-delay: .24s; } .menu-open .menu nav a:nth-child(4) { transition-delay: .3s; }
.menu-open .menu nav a:nth-child(5) { transition-delay: .36s; } .menu-open .menu nav a:nth-child(6) { transition-delay: .42s; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.menu__foot a { padding: 8px 18px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none; font-size: .9rem; color: var(--cyan); }

/* ---------- Botones ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 14px; }
.btns--center { justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 30px; border-radius: 99px;
  color: #fff; text-decoration: none; font-weight: 500; line-height: 1.2; text-align: center;
  transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .35s var(--ease), box-shadow .3s, background .3s; }
.btn--red { background: var(--red); box-shadow: 0 8px 26px rgba(230, 65, 76, .35); }
.btn--glass { background: rgba(8, 78, 86, .55); border: 1px solid rgba(120, 255, 192, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--navy { background: var(--abyss); }
.btn--red:hover { box-shadow: 0 14px 40px rgba(230, 65, 76, .6); }
.btn--glass:hover { background: rgba(14, 104, 108, .8); box-shadow: 0 0 34px rgba(120, 255, 192, .35); }
.btn--lg { min-height: 62px; padding-inline: 40px; font-size: 1.05em; }

/* ---------- Escena 1: la puerta ---------- */
.stage { position: relative; height: 620vh; z-index: 1; }
html.rm .stage { height: 100vh; }
.stage__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero { position: absolute; inset: 0; will-change: opacity, transform; }
.wordmark { position: absolute; left: calc(var(--ex) - var(--er) * 1.04); top: calc(var(--ey) + var(--er) * 1.01); width: calc(var(--er) * 1.96); height: auto; overflow: visible;
  filter: drop-shadow(0 4px 22px rgba(0, 12, 15, .8)); }
.hero__copy { position: absolute; right: var(--pad); top: 54%; transform: translateY(-50%); width: min(46vw, 640px); text-align: right; text-shadow: 0 2px 26px rgba(0, 12, 15, .85); }
.eyebrow { font-family: var(--brand); font-size: clamp(1.05rem, 1.6vw, 1.5rem); }
.hero h1 { font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 4.3vw, 4.1rem); line-height: 1.06; color: #fff; margin: .1em 0 .55em; text-wrap: balance; }
.hero h1 .thin { display: block; font-family: var(--brand); font-weight: 400; text-transform: none; color: var(--cyan); font-size: .84em; line-height: 1.25; }
.hero .btns { flex-direction: column; align-items: flex-end; text-shadow: none; }
.hero .btn { min-width: min(100%, 320px); }
.scrollcue { position: absolute; left: 50%; bottom: clamp(14px, 3.5vh, 34px); transform: translateX(-50%); display: grid; justify-items: center; gap: 8px;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
.scrollcue i { width: 1px; height: 44px; background: linear-gradient(var(--cyan), transparent); animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(16px); opacity: 0; } }
html.rm .scrollcue { display: none; }

.arrive { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 var(--pad); opacity: 0; visibility: hidden; will-change: opacity, transform; }
.arrive__pre, .arrive__post { font-family: var(--brand); color: var(--cyan); font-size: clamp(1rem, 2vw, 1.7rem); letter-spacing: .3em; text-transform: uppercase; }
.arrive__post { letter-spacing: .02em; text-transform: none; color: var(--ink); margin-top: .4em; }
.arrive h2 { font-weight: 800; text-transform: uppercase; font-size: clamp(2.6rem, 9.4vw, 9rem); line-height: 1; color: #fff; text-shadow: 0 0 60px rgba(120, 255, 192, .45), 0 6px 40px rgba(0, 12, 15, .7); }
.arrive h2 em { color: var(--red); text-shadow: 0 0 50px rgba(230, 65, 76, .6), 0 6px 40px rgba(0, 12, 15, .7); }

/* ---------- Secciones ---------- */
main > section:not(.stage) { position: relative; z-index: 1; }
.sec { padding: clamp(90px, 14vh, 180px) 0; }
.kicker { font-family: var(--brand); color: var(--cyan); font-size: clamp(1.25rem, 2.6vw, 2.5rem); line-height: 1.2; }
.title { font-weight: 800; color: var(--ink); font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.05; margin-bottom: .6em; text-wrap: balance; }
.title em { color: var(--red); }
.title--xl { text-transform: uppercase; font-size: clamp(2.1rem, 6vw, 5.4rem); color: #fff; }
.lead { max-width: 60ch; margin-bottom: 1em; }
.lead strong { color: var(--cyan); font-weight: 500; }

.reveal { opacity: 0; transform: translate3d(0, 50px, 0) scale(.98); filter: blur(6px);
  transition: opacity .9s var(--ease) var(--rd, 0ms), transform 1s var(--ease) var(--rd, 0ms), filter .9s var(--ease) var(--rd, 0ms); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
html.rm .reveal { opacity: 1; transform: none; filter: none; transition: none; }

/* Foco de luz que sigue al cursor dentro de las tarjetas */
.spot { position: relative; isolation: isolate; }
.spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .4s; pointer-events: none;
  background: radial-gradient(340px circle at var(--sx, 50%) var(--sy, 50%), rgba(120, 255, 192, .22), transparent 65%); }
.has-pointer .spot:hover::after { opacity: 1; }

/* Quiénes somos */
.about { overflow: hidden; }
.ghost { position: absolute; left: 0; top: clamp(30px, 6vh, 80px); white-space: nowrap; pointer-events: none; font-weight: 800; text-transform: uppercase;
  font-size: clamp(5rem, 15vw, 15rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(120, 255, 192, .14); }
.ghost span { display: inline-block; will-change: transform; }
.about__grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 6vw, 90px); align-items: center; }
.pillars { margin: 1.6em 0 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.pillars li { padding: 8px 20px; border-radius: 99px; border: 1px solid rgba(120, 255, 192, .5); color: var(--cyan); font-weight: 500; background: rgba(120, 255, 192, .06); transition: background .3s, color .3s, transform .4s var(--ease); }
.pillars li:hover { background: var(--cyan); color: var(--abyss); transform: translateY(-4px); }
.about__photo { position: relative; perspective: 900px; }
.about__frame { position: absolute; inset: -18px 18px 26px -18px; border: 2px solid var(--red); border-radius: 16% / 22%; transform: rotate(-3deg); opacity: .8; }
.about__photo img { position: relative; width: 100%; height: auto; border-radius: 16% / 22%; box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(120, 255, 192, .25);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.about__photo figcaption { margin-top: 16px; text-align: center; color: var(--cyan); font-size: .95rem; }
.dna { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 30px); margin-top: clamp(60px, 10vh, 120px); }
.dna__card { background: linear-gradient(160deg, rgba(14, 104, 108, .85), rgba(8, 78, 86, .85) 60%, rgba(2, 50, 58, .9)); border-radius: 44px; padding: clamp(26px, 3vw, 42px); text-align: center;
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity .9s var(--ease) var(--rd, 0ms), transform .6s var(--ease), filter .9s var(--ease) var(--rd, 0ms), box-shadow .4s; }
.dna__card.is-in:hover { transform: translateY(-10px); box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(120, 255, 192, .5); }
.dna__icon { width: 72px; height: 72px; margin: 0 auto 14px; fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgba(120, 255, 192, .6)); }
.dna__icon * { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.8s var(--ease) .3s; }
.dna__card.is-in .dna__icon * { stroke-dashoffset: 0; }
html.rm .dna__icon * { stroke-dashoffset: 0; }
.dna__card h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 800; color: #fff; margin-bottom: .35em; }

.team { margin-top: clamp(70px, 12vh, 150px); }
.team .title em { color: var(--cyan); }
.team__row { display: flex; gap: clamp(14px, 1.6vw, 24px); padding: 20px var(--pad) 30px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.team__row::-webkit-scrollbar { display: none; }
.member { position: relative; flex: 1 0 clamp(170px, 13vw, 220px); scroll-snap-align: center; border-radius: 28% / 22%; overflow: hidden; background: #e9e6e3;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .4); transition: opacity .9s var(--ease) var(--rd, 0ms), transform .6s var(--ease), filter .9s var(--ease) var(--rd, 0ms), flex-basis .6s var(--ease); }
.member img { width: 100%; aspect-ratio: 328 / 372; object-fit: cover; transform: scale(1.14); transition: transform .8s var(--ease); }
.member div { position: absolute; inset: auto 0 0 0; padding: 46px 16px 20px; text-align: center; color: #fff;
  background: linear-gradient(transparent, rgba(0, 20, 25, .92) 55%); transform: translateY(calc(100% - 78px)); transition: transform .6s var(--ease); }
.member b { display: block; font-size: .98rem; line-height: 1.2; margin-bottom: 6px; }
.member span { display: block; font-size: .78rem; line-height: 1.35; color: var(--cyan); opacity: 0; transition: opacity .4s; }
.member:hover, .member:focus-within { transform: translateY(-10px); }
.member:hover img { transform: scale(1.22); }
.member:hover div, .member:focus-within div { transform: none; }
.member:hover span, .member:focus-within span { opacity: 1; }

/* Resultados */
.board { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: stretch; margin-top: 1em; }
.chart { padding: clamp(18px, 2vw, 28px); border-radius: 34px; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; flex-direction: column; }
.chart figcaption { font-size: .9rem; color: var(--ink); margin-bottom: 8px; }
.chart figcaption b { color: var(--cyan); }
.chart svg { width: 100%; height: auto; flex: 1; overflow: visible; }
.chart__grid path { fill: none; stroke: rgba(214, 220, 226, .1); stroke-width: 1; stroke-dasharray: 3 7; }
.chart__line { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 10px rgba(120, 255, 192, .7)); transition: stroke-dashoffset 2.4s var(--ease) .2s; }
.chart__area { opacity: 0; transition: opacity 1.4s ease 1.2s; }
.chart__pt { opacity: 0; transform: translateY(10px); transition: opacity .6s ease var(--d), transform .6s var(--ease) var(--d); }
.chart__pt circle { fill: var(--abyss); stroke: var(--cyan); stroke-width: 3; }
.chart__pt text { fill: var(--ink); font: 500 17px Poppins, sans-serif; }
.chart__pt--hot circle { fill: var(--red); stroke: #fff; }
.chart__pt--hot text { fill: #fff; font-weight: 800; font-size: 22px; }
.chart__pulse { fill: none !important; stroke: var(--red) !important; transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(4); opacity: 0; } }
.chart.is-in .chart__line { stroke-dashoffset: 0; }
.chart.is-in .chart__area, .chart.is-in .chart__pt { opacity: 1; transform: none; }
html.rm .chart__line { stroke-dashoffset: 0; transition: none; }
html.rm .chart__area, html.rm .chart__pt { opacity: 1; transform: none; }
html.rm .chart__pulse { animation: none; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); }
.stat { display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 2.4vw, 34px); border-radius: 30px; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.stat > span { font-size: .95rem; }
.stat--hot { background: linear-gradient(150deg, #f25a64, var(--red) 55%, #b82a36); border-color: transparent; box-shadow: 0 20px 60px rgba(230, 65, 76, .45); }
.stat--hot .odo, .stat--hot > span { color: #fff; }
.odo { display: flex; align-items: flex-start; font-weight: 800; color: var(--cyan); font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1.15; height: 1.15em; overflow: hidden; margin-bottom: 4px; }
.odo__col { display: block; height: 1.15em; overflow: hidden; }
.odo__strip { display: block; transition: transform 2s cubic-bezier(.16, .84, .2, 1); will-change: transform; }
.odo__strip i { display: block; height: 1.15em; font-style: normal; text-align: center; }
.odo__sym { display: block; height: 1.15em; }
html.rm .odo__strip { transition: none; }

.cases { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(12px, 1.6vw, 22px); }
.case { padding: clamp(20px, 2.2vw, 30px); border-radius: 30px; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.case header { margin-bottom: 14px; }
.case header b { display: block; color: #fff; font-size: 1.2rem; }
.case header span { font-size: .88rem; color: var(--cyan); }
.flow { display: grid; gap: 8px; }
.flow li { position: relative; padding: 7px 14px; border-radius: 12px; font-size: .92rem; overflow: hidden; background: rgba(255, 255, 255, .04); }
.flow li::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 12px; background: linear-gradient(90deg, rgba(120, 255, 192, .35), rgba(120, 255, 192, .12));
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .4s; }
.flow li:last-child::before { background: linear-gradient(90deg, rgba(230, 65, 76, .7), rgba(230, 65, 76, .3)); }
.flow li > * , .flow li { z-index: 0; }
.flow em { position: relative; font-weight: 800; color: #fff; margin-right: 6px; }
.case.is-in .flow li::before { transform: none; }
html.rm .flow li::before { transform: none; }

/* Servicios */
.services { position: relative; z-index: 1; }
.services__pin { padding: clamp(70px, 10vh, 120px) 0; }
.services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.services__head .title { margin-bottom: .3em; }
.services__head .title em { color: var(--cyan); }
.services__count { font-size: 1rem; color: var(--ink); letter-spacing: .1em; padding-bottom: 1.2em; white-space: nowrap; }
.services__count b { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800; color: var(--cyan); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.services__track { display: flex; gap: clamp(16px, 2vw, 28px); padding: 14px var(--pad) 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.services__track::-webkit-scrollbar { display: none; }
.services.is-horizontal .services__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 84px 0 24px; }
.services.is-horizontal .services__track { overflow: visible; scroll-snap-type: none; will-change: transform; width: max-content; }
.card { flex: 0 0 clamp(270px, 26vw, 390px); scroll-snap-align: center; border-radius: 44px; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(170deg, #10666c, var(--royal) 55%, #03323a); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  transition: transform .5s var(--ease), box-shadow .5s; }
.card:hover { transform: translateY(-12px) rotate(-.6deg); box-shadow: 0 34px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(120, 255, 192, .6), 0 0 60px rgba(120, 255, 192, .18); }
.card figure { position: relative; overflow: hidden; }
.card figure img { width: 100%; aspect-ratio: 6 / 4.6; object-fit: cover; transform: scale(1.13); transition: transform .9s var(--ease); }
.card:hover figure img { transform: scale(1.24); }
.card figure i { position: absolute; right: 18px; bottom: -14px; font-style: normal; font-weight: 800; font-size: 5rem; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .85); text-shadow: 0 6px 30px rgba(0, 0, 0, .5); }
.card__body { padding: clamp(20px, 2vw, 28px); display: grid; gap: 8px; align-content: start; flex: 1; }
.card__n { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.card h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 800; line-height: 1.15; color: #ff6f79; }
.card h3 em { display: block; color: #fff; }
.card p { font-size: .92rem; line-height: 1.5; }
.card--plain { background: linear-gradient(170deg, #06404a, var(--abyss)); border-color: var(--line); }
.card__art { aspect-ratio: 6 / 4.6; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(120, 255, 192, .14), transparent 70%); }
.card__art svg { width: 70%; fill: none; stroke: rgba(120, 255, 192, .55); stroke-width: 1.5; }
.card__art .sweep { fill: rgba(120, 255, 192, .25); stroke: none; transform-origin: 100px 80px; animation: sweep 4s linear infinite; }
.card__art .blip { fill: var(--red); stroke: none; animation: blip 1.6s ease-in-out infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blip { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
html.rm .card__art .sweep, html.rm .card__art .blip { animation: none; }
.card--cta { position: relative; justify-content: flex-end; background: linear-gradient(160deg, #f25a64, var(--red) 50%, #b82a36); }
.card__gate { position: absolute; top: 8%; left: 50%; width: 82%; transform: translateX(-50%); fill: rgba(255, 255, 255, .16); overflow: visible; }
.card--cta .card__body { position: relative; flex: 0 1 auto; }
.card--cta h3, .card--cta h3 em { color: #fff; font-size: clamp(1.5rem, 2.1vw, 2rem); }
.card--cta .btn { justify-self: start; margin-top: 8px; }
.path { position: relative; height: 2px; margin: 26px 0 0; background: rgba(214, 220, 226, .16); border-radius: 2px; }
.path__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--red), var(--cyan)); border-radius: 2px; }
.path__walker { position: absolute; top: -34px; left: calc(var(--sp, 0) * 100%); width: 38px; height: 30px; margin-left: -19px; fill: var(--cyan); overflow: visible; filter: drop-shadow(0 0 10px rgba(120, 255, 192, .8)); }

/* Clientes */
.clients { overflow: hidden; }
.beat { display: inline-block; margin-inline: .14em; color: var(--cyan); animation: beat 1.4s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1); } 36% { transform: scale(1.1); } 50% { transform: scale(1); } }
html.rm .beat { animation: none; }
.ecg { width: 100%; height: clamp(50px, 9vh, 90px); margin-top: -10px; fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(230, 65, 76, .9)); }
.ecg path { vector-effect: non-scaling-stroke; stroke-dasharray: .28 .72; animation: ecg 2.8s linear infinite; }
@keyframes ecg { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
html.rm .ecg path { animation: none; stroke-dasharray: none; }
.marquee { margin-top: clamp(10px, 3vh, 40px); padding: clamp(18px, 3vh, 34px) 0; display: grid; gap: clamp(14px, 2vw, 24px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__row { display: flex; gap: clamp(14px, 2vw, 24px); width: max-content; animation: slide 44s linear infinite; }
.marquee__row--rev { animation-direction: reverse; animation-duration: 50s; }
.marquee:hover .marquee__row { animation-play-state: paused; }
@keyframes slide { to { transform: translate3d(calc(-50% - clamp(7px, 1vw, 12px)), 0, 0); } }
html.rm .marquee__row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
/* Cada marca en su tarjeta: clara para logos a color, oscura para logos en blanco */
.logo { flex: none; display: block; width: clamp(170px, 17vw, 250px); height: clamp(96px, 9.5vw, 136px); padding: clamp(14px, 1.6vw, 22px) clamp(18px, 2vw, 30px);
  border-radius: 28px; background: linear-gradient(160deg, #ffffff, #e9f1ee); box-shadow: 0 16px 40px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .6);
  transition: transform .5s var(--ease), box-shadow .5s; }
.logo--dark { background: linear-gradient(160deg, #06404a, #00242b); box-shadow: 0 16px 40px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(120, 255, 192, .3); }
.logo:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 26px 60px rgba(0, 0, 0, .5), 0 0 0 2px var(--cyan); }
.logo img { width: 100%; height: 100%; object-fit: contain; }

/* Cierre */
.closing { min-height: 92vh; display: grid; align-items: center; padding-bottom: clamp(120px, 20vh, 240px); }
.closing .title { text-shadow: 0 6px 50px rgba(0, 12, 15, .8); }
.tu { color: var(--cyan); font-size: 1.9em; line-height: .8; display: inline-block; vertical-align: -.08em; text-shadow: 0 0 60px rgba(120, 255, 192, .6); }
.closing__note { margin-top: 2em; font-size: .92rem; letter-spacing: .04em; color: var(--ink); opacity: .9; }

/* ---------- Pie: amanecer tras la puerta ---------- */
.foot { position: relative; z-index: 2; --rise: 0; --sh: clamp(300px, 58vh, 560px); margin-top: calc(var(--sh) * -.35); }
.foot__scene { position: relative; height: var(--sh); overflow: hidden;
  background: linear-gradient(rgba(0, 44, 52, 0) 0%, #003a44 30%, #1f7470 60%, #e59a84 86%, #ffab82 100%);
  -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.foot__sun { position: absolute; left: 50%; bottom: 0; width: min(46vh, 62vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff6dc, #ffc08f 42%, #f2655f 100%); box-shadow: 0 0 140px 50px rgba(255, 150, 110, .5);
  transform: translate(-50%, calc(78% - var(--rise) * 66%)); }
.foot__mount { position: absolute; left: 0; bottom: -1px; width: 100%; height: 36%; }
.foot__mount .m1 { fill: #1c6a68; }
.foot__mount .m2 { fill: #033a42; }
.foot__gate { position: absolute; left: 50%; bottom: -6%; height: 80%; width: auto; transform: translateX(-50%); fill: #00141a; overflow: visible; filter: drop-shadow(0 0 40px rgba(255, 170, 130, .35)); }
.foot__water { position: relative; overflow: hidden; background: linear-gradient(#a8705f 0, #2a5a5a 70px, #023038 240px, #001a20 520px, var(--abyss) 100%); padding-top: clamp(150px, 24vh, 240px); }
.foot__shine { position: absolute; top: 0; left: 50%; width: min(40vh, 52vw); height: 250px; transform: translateX(-50%);
  background: linear-gradient(rgba(255, 190, 150, calc(.2 + var(--rise) * .4)), rgba(255, 150, 120, 0));
  -webkit-mask-image: repeating-linear-gradient(#000 0 2px, transparent 2px 11px), radial-gradient(closest-side, #000 20%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: repeating-linear-gradient(#000 0 2px, transparent 2px 11px), radial-gradient(50% 100% at 50% 0, #000 20%, transparent 100%);
  mask-composite: intersect;
  animation: shine 2.4s linear infinite; }
@keyframes shine { to { -webkit-mask-position: 0 11px; mask-position: 0 11px; } }
html.rm .foot__shine { animation: none; }
.foot__mirror { position: absolute; top: calc(var(--sh) * -.05); left: 50%; height: calc(var(--sh) * .8); width: auto; transform: translateX(-50%) scaleY(-1); fill: #00141a; opacity: .4; overflow: visible;
  -webkit-mask-image: linear-gradient(transparent 10%, #000 100%); mask-image: linear-gradient(transparent 10%, #000 100%); }
.foot__water > .wrap { position: relative; }
.foot__lead { text-align: center; font-family: var(--brand); font-size: clamp(1.8rem, 5vw, 4.4rem); font-weight: 400; line-height: 1.1; color: #fff; text-shadow: 0 4px 40px rgba(0, 14, 18, .9); }
.foot__lead em { font-family: Poppins, sans-serif; font-weight: 800; color: var(--cyan); }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.25fr 1.25fr; gap: clamp(24px, 4vw, 60px); margin-top: clamp(50px, 9vh, 110px); }
.foot__brand p { margin: 16px 0 20px; font-size: .92rem; max-width: 34ch; }
.foot__brand .brand__mark { width: 60px; height: 60px; }
.foot__brand .brand__name { font-size: 1.5rem; }
.social { display: flex; gap: 10px; }
.social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(120, 255, 192, .06); transition: transform .4s var(--ease), background .3s, box-shadow .3s; }
.social svg { width: 22px; height: 22px; fill: none; stroke: var(--cyan); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.social a:hover { transform: translateY(-6px); background: var(--cyan); box-shadow: 0 10px 30px rgba(120, 255, 192, .45); }
.social a:hover svg { stroke: var(--abyss); }
.foot__col { display: grid; gap: 9px; align-content: start; font-size: .94rem; }
.foot__col h3 { font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.foot__col a { justify-self: start; text-decoration: none; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--ease), color .3s; }
.foot__col a:hover { background-size: 100% 2px; color: #fff; }
.foot__remote { color: var(--cyan); }
.foot__word { display: flex; justify-content: center; gap: .02em; margin-top: clamp(40px, 8vh, 90px); height: .7em; overflow: hidden; font-weight: 800; font-size: min(19.5vw, 380px); line-height: .8; user-select: none; }
.foot__word span { display: block; color: transparent; -webkit-text-stroke: 1px rgba(120, 255, 192, .4);
  background: linear-gradient(rgba(120, 255, 192, .34), rgba(230, 65, 76, .05) 80%); -webkit-background-clip: text; background-clip: text;
  transition: transform 1s var(--ease), color .4s; }
.foot__word span:hover { transform: translateY(-6%); -webkit-text-stroke-color: var(--cyan); }
.foot__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 0 26px; border-top: 1px solid rgba(214, 220, 226, .12); font-size: .86rem; }
.totop { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cyan); letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.totop svg { width: 34px; height: 28px; fill: var(--cyan); overflow: visible; animation: hop 2s var(--ease) infinite; }
@keyframes hop { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }
html.rm .totop svg { animation: none; }

/* ---------- Adaptación ---------- */
@media (max-width: 1020px) {
  .top.is-dock .brand__name { display: none; }
  .nav a { padding-inline: 12px; }
}
@media (max-width: 859px) {
  .nav, .top__cta { display: none; }
  .burger { display: block; }
  .top { padding-block: 12px; }
  .top.is-dock { padding: 6px 6px 6px 14px; width: calc(100% - 20px); top: 10px; }
  .top.is-dock .brand__name { display: block; }
  .top.is-dock .burger { border-color: transparent; background: rgba(255, 255, 255, .08); }
  .top__skip { right: calc(var(--pad) + 58px); font-size: .72rem; }
  .brand__name { font-size: 1.05rem; }
  .hero__copy { left: var(--pad); right: var(--pad); width: auto; top: calc(var(--ey) + var(--er) * 2.15); transform: none; text-align: center; }
  .hero h1 { font-size: clamp(1.7rem, 8.4vw, 2.7rem); margin-bottom: .5em; }
  .eyebrow { font-size: .95rem; }
  .hero .btns { align-items: center; gap: 10px; }
  .hero .btn { min-height: 48px; padding-block: 10px; width: min(100%, 320px); }
  .scrollcue span { display: none; }
  .scrollcue i { height: 30px; }
  .about__grid, .dna, .board, .cases { grid-template-columns: 1fr; }
  .about__photo { margin-inline: 14px; }
  .member { flex: 0 0 min(52vw, 210px); }
  .member div { transform: none; padding-top: 40px; }
  .member span { opacity: 1; }
  .card { flex-basis: min(80vw, 340px); }
  .services__count { padding-bottom: .9em; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__bar { justify-content: center; text-align: center; }
}
@media (max-width: 859px) and (max-height: 700px) {
  .hero .btn--glass { display: none; }
}
@media (max-width: 460px) {
  .foot__grid { grid-template-columns: 1fr; }
}

/* ---------- Formularios: campos con etiqueta flotante ---------- */
.form { display: grid; gap: 16px; text-align: left; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.field { position: relative; display: block; min-width: 0; }
.field > input, .field > textarea, .field > select {
  display: block; width: 100%; font: inherit; font-size: 1rem; line-height: 1.4; color: #fff; padding: 27px 18px 11px; border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); outline: 0; -webkit-appearance: none; appearance: none;
  transition: border-color .3s, box-shadow .35s, background .3s; }
.field > textarea { resize: vertical; min-height: 140px; line-height: 1.55; padding-top: 32px; }
.field > select { cursor: pointer; padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378ffc0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  background-repeat: no-repeat; background-position: right 16px center, 0 0; background-size: 20px, auto; }
.field > select option { color: #00242b; }
.field > input[type="date"] { color-scheme: dark; }
/* Etiqueta: descansa dentro del campo y sube al escribir o enfocar */
.field > span { position: absolute; left: 19px; top: 19px; right: 18px; font-size: 1rem; line-height: 1.3; color: rgba(223, 229, 234, .68); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: left top; transition: transform .28s var(--ease), color .28s; }
.field > span small { font-size: .85em; opacity: .75; }
.field > :focus ~ span, .field > input:not(:placeholder-shown) ~ span, .field > textarea:not(:placeholder-shown) ~ span, .field--up > span { transform: translateY(-11px) scale(.74); color: var(--cyan); letter-spacing: .05em; }
.field > ::placeholder { color: transparent; transition: color .25s; }
.field > :focus::placeholder { color: rgba(223, 229, 234, .4); }
/* Línea de luz que se dibuja al enfocar */
.field::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--cyan), var(--red)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.field:focus-within::after { transform: scaleX(1); }
.field > input:hover, .field > textarea:hover, .field > select:hover { border-color: rgba(255, 255, 255, .24); }
.field > :focus { border-color: rgba(120, 255, 192, .6); background-color: rgba(0, 15, 19, .5); box-shadow: 0 14px 34px rgba(0, 0, 0, .3), 0 0 0 4px rgba(120, 255, 192, .1); }
.field > input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 60px #06343b inset; caret-color: #fff; }
/* Icono a la izquierda */
.field--ico > input { padding-left: 52px; }
.field--ico > span { left: 53px; }
.field__ico { position: absolute; left: 18px; top: 21px; width: 22px; height: 22px; fill: none; stroke: rgba(223, 229, 234, .55); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke .3s; }
.field:focus-within .field__ico { stroke: var(--cyan); }
/* Mostrar u ocultar una clave */
.field--secret > input { padding-right: 54px; }
.field__eye { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.field__eye svg { width: 22px; height: 22px; fill: none; stroke: rgba(223, 229, 234, .6); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.field__eye:hover svg, .field__eye[aria-pressed="true"] svg { stroke: var(--cyan); }
/* Error de validación */
.field.is-bad > input, .field.is-bad > textarea, .field.is-bad > select { border-color: rgba(230, 65, 76, .85); box-shadow: 0 0 0 4px rgba(230, 65, 76, .12); }
.field.is-bad > span { color: #ff9aa1; }
.field__err { display: block; margin: 6px 6px 0; font-size: .78rem; line-height: 1.3; color: #ff9aa1; }
.field.is-bad::after { display: none; }

/* Opciones en píldoras (selección múltiple) */
.pick { margin: 0; padding: 0; border: 0; min-width: 0; }
.pick legend { padding: 0; margin-bottom: 10px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.pick__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.pill span { display: block; padding: 8px 16px; border-radius: 99px; font-size: .88rem; color: var(--ink); border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.pill:hover span { border-color: var(--cyan); transform: translateY(-2px); }
.pill input:checked + span { background: var(--cyan); border-color: var(--cyan); color: var(--abyss); font-weight: 500; box-shadow: 0 0 22px rgba(120, 255, 192, .4); }
.pill input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* Interruptor */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: .92rem; color: var(--ink); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch i { flex: none; position: relative; width: 46px; height: 26px; border-radius: 99px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .14); transition: background .3s, border-color .3s; }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .35s var(--ease), background .3s; }
.switch input:checked + i { background: rgba(120, 255, 192, .28); border-color: var(--cyan); }
.switch input:checked + i::after { transform: translateX(20px); background: var(--cyan); }
.switch input:focus-visible + i { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* Botón de envío con flecha y estado de carga */
.form button { font-family: inherit; cursor: pointer; }
button.btn { font: inherit; font-weight: 500; }
.btn--send { border: 0; font-weight: 500; gap: 12px; justify-self: start; padding-right: 14px; }
.btn--send svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .2); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.btn--send:hover svg { transform: translateX(4px); }
.btn--send[disabled] { cursor: progress; opacity: .85; }
.btn--send[disabled] svg { animation: spin 1s linear infinite; }
.btn--send[disabled] svg path { d: path('M12 4a8 8 0 1 0 8 8'); }
@keyframes spin { to { transform: rotate(360deg); } }
.form__status { font-size: .92rem; }
.form__status:empty { display: none; }
.form__status.is-ok, .form__status.is-error, .form__status.is-wait { padding: 12px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(120, 255, 192, .08); }
.form__status.is-ok { color: var(--cyan); font-weight: 500; }
.form__status.is-ok::before { content: '✓  '; }
.form__status.is-error { color: #ffb3b8; border-color: rgba(230, 65, 76, .5); background: rgba(230, 65, 76, .1); }
.form__status a { color: #fff; }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; text-align: left; }
.contact .title--xl { font-size: clamp(2rem, 4.6vw, 4.2rem); }
.contact__card { position: relative; padding: clamp(22px, 3vw, 40px); border-radius: 40px; background: linear-gradient(160deg, rgba(8, 78, 86, .55), rgba(0, 20, 25, .7));
  border: 1px solid var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); }
.contact__card h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: #fff; margin-bottom: 4px; }
.contact__card > p { font-size: .9rem; margin-bottom: 20px; }
.results__more { margin-top: clamp(22px, 4vh, 40px); }
@media (max-width: 859px) {
  .contact { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}

.form__legal { font-size: .78rem; line-height: 1.5; opacity: .8; }
.form__legal a { color: var(--cyan); text-underline-offset: 3px; }
.foot__bar a:not(.totop) { text-underline-offset: 4px; }
.foot__bar a:not(.totop):hover { color: var(--cyan); }