/* ============================================================
   REDISEÑO v2: web solo oscura, con morados y lilas.
   Este archivo se carga el último: define la nueva identidad (colores y tipografía), la cabecera animada, el hero
   y el texto que se ilumina al hacer scroll. También reajusta las variables del tema oscuro antiguo para que las
   secciones que aún no se han rediseñado (proyectos, experiencia, testimonios...) ya hereden la nueva paleta.
   ============================================================ */

/* Tipografía: Strichpunkt Sans Variable (licencia libre SIL OFL 1.1), guardada en fonts/strichpunkt/ */
@font-face { font-family: "Strichpunkt Sans Variable"; font-style: normal; font-display: swap; font-weight: 400 900; src: url(../fonts/strichpunkt/strichpunkt-sans-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Strichpunkt Sans Variable"; font-style: normal; font-display: swap; font-weight: 400 900; src: url(../fonts/strichpunkt/strichpunkt-sans-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --v2-bg: #07050d;            /* fondo principal: casi negro con un matiz violeta */
  --v2-bg-2: #0d0916;          /* superficies un punto más claras */
  --v2-ink: #f6f2ff;           /* texto principal */
  --v2-ink-2: rgb(246 242 255 / 68%);
  --v2-ink-3: rgb(246 242 255 / 56%);
  --v2-line: rgb(246 242 255 / 12%);
  --v2-lilac: #c9a8fb;         /* lila claro */
  --v2-lilac-2: #e6d6ff;       /* lila muy claro, casi blanco */
  --v2-violet: #a855f7;        /* violeta vivo */
  --v2-deep: #7c3aed;          /* violeta profundo */
  --v2-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --v2-display: "Strichpunkt Sans Variable", "Inter", system-ui, sans-serif;
  --font-sans: var(--v2-display);   /* las secciones antiguas también leen esta variable */
}

/* ---- Tema oscuro antiguo: se retoca con la nueva paleta (el resto de secciones lo hereda) ---- */
html[data-theme="dark"] {
  --ink: var(--v2-ink);
  --ink-2: var(--v2-ink-2);
  --ink-3: var(--v2-ink-3);
  --line: var(--v2-line);
  --line-2: rgb(246 242 255 / 20%);
  --wash: rgb(201 168 251 / 6%);
  --bg-body: var(--v2-bg);
  background: var(--v2-bg);
  scroll-behavior: smooth;
}
html[data-theme="dark"] body { background: var(--v2-bg); color: var(--v2-ink); }
html[data-theme="dark"] ::selection { background: var(--v2-violet); color: #fff; }

/* ---- utilidades ---- */
.v2-wrap { width: 100%; max-width: 1296px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 48px); }
.v2-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--v2-lilac); color: #1a0b33; font: 600 14px/1 var(--v2-display); }
.v2-skip:focus { top: 12px; }

/* ============================================================
   CABECERA: integrada arriba y, al hacer scroll, píldora flotante
   ============================================================ */
.v2-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 26px 20px 0; pointer-events: none; transition: padding .55s var(--v2-ease); }
.v2-nav-in { pointer-events: auto; width: 100%; max-width: 1296px; height: 56px; padding: 0 clamp(8px, 2vw, 36px); display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-radius: 999px; border: 1px solid transparent; background: transparent;
  transition: max-width .65s var(--v2-ease), padding .5s var(--v2-ease), background .4s ease, border-color .4s ease, box-shadow .4s ease, height .5s var(--v2-ease), backdrop-filter .4s ease; }
.v2-nav.is-pill { padding-top: 14px; }
.v2-nav.is-pill .v2-nav-in { max-width: 1296px; height: 54px; padding: 0 7px 0 22px; background: rgb(13 9 22 / 86%); border-color: rgb(246 242 255 / 14%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 44px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(255 255 255 / 6%); }

/* logotipo: punto lila + "Tania®"; al hacer scroll gira, y el nombre se recoge a "T®" */
.v2-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--v2-ink); text-decoration: none; font: 600 22px/1 var(--v2-display); letter-spacing: -0.018em; }
.v2-logo-mark { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(from 210deg, var(--v2-lilac-2), var(--v2-violet), var(--v2-deep), var(--v2-lilac-2));
  box-shadow: 0 0 18px rgb(168 85 247 / 55%); transition: transform .8s var(--v2-ease); position: relative; }
.v2-logo-mark::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; right: 3px; top: 3px; background: #0b0716; }
.v2-nav.is-pill .v2-logo-mark { transform: rotate(360deg) scale(.82); }
.v2-logo-word { display: inline-flex; align-items: baseline; white-space: nowrap; }
.v2-logo-rest { display: inline-block; max-width: 3em; overflow: hidden; transition: max-width .55s var(--v2-ease), opacity .35s ease; }
.v2-nav.is-pill .v2-logo-rest { max-width: 0; opacity: 0; }
.v2-logo sup { margin-left: 1px; font-size: .5em; font-weight: 500; color: var(--v2-lilac); transform: translateY(-.35em); }

.v2-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.v2-links a { position: relative; padding: 6px 0; color: var(--v2-ink-2); text-decoration: none; font: 500 15px/1 var(--v2-display); letter-spacing: -0.01em; transition: color .2s ease; white-space: nowrap; }
.v2-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--v2-lilac); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--v2-ease); }
.v2-links a:hover, .v2-links a.is-active { color: #fff; }
.v2-links a:hover::after, .v2-links a.is-active::after { transform: scaleX(1); }

.v2-nav-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: linear-gradient(135deg, #1b0e38 0%, #4a22a0 100%); border: 1px solid rgb(230 214 255 / 42%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%); color: #fff; text-decoration: none; font: 600 14px/1 var(--v2-display); white-space: nowrap; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.v2-nav-cta:hover { background: linear-gradient(135deg, #271352 0%, #6232c4 100%); color: #fff; border-color: rgb(230 214 255 / 70%); transform: translateY(-1px); }
.v2-nav-cta svg { width: 14px; height: 14px; }
.v2-nav-cta:hover svg { animation: v2nudge .6s var(--v2-ease); }
@keyframes v2nudge { 40% { transform: translateY(3px); } }

.v2-burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--v2-line); background: rgb(246 242 255 / 6%); color: var(--v2-ink); cursor: pointer; align-items: center; justify-content: center; }
.v2-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform .3s var(--v2-ease), background .3s ease; }
.v2-burger span::before, .v2-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--v2-ease); }
.v2-burger span::before { top: -6px; } .v2-burger span::after { top: 6px; }
.v2-burger[aria-expanded="true"] span { background: transparent; }
.v2-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.v2-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* menú a pantalla completa (móvil) */
.v2-menu { position: fixed; inset: 0; z-index: 55; padding: 110px 28px 40px; display: flex; flex-direction: column; justify-content: space-between; background: rgb(7 5 13 / 96%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.v2-menu.is-open { opacity: 1; visibility: visible; }
.v2-menu nav { display: flex; flex-direction: column; gap: 6px; }
.v2-menu a { color: var(--v2-ink); text-decoration: none; font: 600 clamp(32px, 9vw, 48px)/1.1 var(--v2-display); letter-spacing: -0.024em; padding: 6px 0; transform: translateY(16px); opacity: 0; transition: transform .5s var(--v2-ease), opacity .4s ease, color .2s ease; }
.v2-menu.is-open a { transform: none; opacity: 1; }
.v2-menu.is-open a:nth-child(2) { transition-delay: .05s; } .v2-menu.is-open a:nth-child(3) { transition-delay: .1s; } .v2-menu.is-open a:nth-child(4) { transition-delay: .15s; } .v2-menu.is-open a:nth-child(5) { transition-delay: .2s; }
.v2-menu a:hover { color: var(--v2-lilac); }
.v2-menu-foot { display: flex; flex-direction: column; gap: 16px; }
.v2-menu .v2-menu-cv { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 999px; background: linear-gradient(135deg, #1b0e38 0%, #4a22a0 100%); border: 1px solid rgb(230 214 255 / 42%); color: #fff; font: 600 17px/1 var(--v2-display); letter-spacing: -0.01em; padding: 0; transform: none; opacity: 1; }
.v2-menu-cv svg { width: 16px; height: 16px; }
.v2-menu small { color: var(--v2-ink-3); font: 500 14px/1.5 var(--v2-display); }

@media (max-width: 900px) {
  .v2-links, .v2-nav-cta { display: none; }
  .v2-burger { display: inline-flex; margin-left: auto; }   /* siempre pegado a la derecha, también en las páginas donde el menú va alineado a la izquierda */
  .v2-nav-in { height: 54px; }
  .v2-nav.is-pill .v2-nav-in { max-width: 260px; padding: 0 5px 0 16px; }
}

/* ============================================================
   HERO: tarjeta redondeada, titular enorme y retrato circular
   ============================================================ */
.v2-hero { padding: 12px; }
.v2-hero-card { position: relative; min-height: calc(100svh - 24px); border-radius: clamp(26px, 3.2vw, 44px); overflow: hidden; isolation: isolate; background: #0a0612; display: flex; align-items: center; --mx: 70%; --my: 40%; }
.v2-hero-bg { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(58% 72% at 80% 42%, rgb(168 85 247 / 58%) 0%, rgb(124 58 237 / 20%) 45%, transparent 70%),
  radial-gradient(46% 58% at 8% 108%, rgb(124 58 237 / 55%) 0%, transparent 62%),
  radial-gradient(40% 38% at 52% -12%, rgb(201 168 251 / 26%) 0%, transparent 72%),
  linear-gradient(180deg, #0c0718 0%, #07050d 100%); }
/* foto de fondo: ocupa toda la tarjeta, con un velo oscuro a la izquierda para que el texto se lea */
.v2-hero-photo { position: absolute; inset: 0; z-index: -2; background-image: url(../imgs/hero-poster.jpg); background-size: cover; background-position: var(--photo-pos, 72% 30%); background-repeat: no-repeat; }
.v2-hero-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-hero-photo::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgb(7 5 13 / 94%) 0%, rgb(7 5 13 / 72%) 36%, rgb(7 5 13 / 12%) 76%, rgb(7 5 13 / 0%) 100%),
  linear-gradient(180deg, rgb(7 5 13 / 50%) 0%, transparent 28%, rgb(7 5 13 / 72%) 100%),
  linear-gradient(135deg, rgb(124 58 237 / 32%), rgb(168 85 247 / 10%) 60%, transparent); }
.v2-hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgb(201 168 251 / 16%), transparent 70%); transition: background .1s linear; }
.v2-hero-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

.v2-hero-grid { z-index: 1; width: 100%; max-width: 1296px; margin: 0 auto; padding: 124px clamp(24px, 4vw, 64px) 104px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }

.v2-h1 { margin: 0; width: max-content; max-width: 100%; font: 600 clamp(40px, 6vw, 90px)/1 var(--v2-display); letter-spacing: -0.03em;
  background: linear-gradient(98deg, #a855f7 15%, #d9bdff 68%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.v2-h1 > span { display: block; white-space: nowrap; }
.v2-br { font-weight: 500; -webkit-text-fill-color: #a855f7; }
.v2-lede { margin: clamp(22px, 2.6vw, 36px) 0 0; max-width: 24em; font: 400 clamp(20px, 2.1vw, 30px)/1.35 var(--v2-display); letter-spacing: -0.01em; color: var(--v2-ink-2); }
.v2-actions { margin-top: clamp(26px, 3vw, 40px); display: flex; flex-wrap: wrap; gap: 12px; }
.v2-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; text-decoration: none; font: 600 16px/1 var(--v2-display); letter-spacing: -0.01em; transition: transform .25s var(--v2-ease), background .25s ease, box-shadow .25s ease, border-color .25s ease; }
.v2-btn svg { width: 16px; height: 16px; transition: transform .3s var(--v2-ease); }
.v2-btn:hover svg { transform: translate(2px, -2px); }
.v2-btn-primary { background: linear-gradient(135deg, #1b0e38 0%, #4a22a0 100%); color: #fff; border: 1px solid rgb(230 214 255 / 42%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%); }
.v2-btn-primary:hover { transform: translateY(-2px); background: linear-gradient(135deg, #271352 0%, #6232c4 100%); color: #fff; border-color: rgb(230 214 255 / 70%); }
.v2-btn-ghost { background: linear-gradient(135deg, #0b0713 0%, #2b1556 100%); color: var(--v2-ink); border: 1px solid rgb(201 168 251 / 28%); }
.v2-btn-ghost:hover { transform: translateY(-2px); background: linear-gradient(135deg, #120a20 0%, #3a1d75 100%); border-color: rgb(230 214 255 / 50%); }

/* entrada del hero */
.v2-rise { opacity: 0; transform: translateY(26px); animation: v2rise .9s var(--v2-ease) forwards; animation-delay: var(--d, 0s); }
@keyframes v2rise { to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .v2-hero { padding: 8px; }
  .v2-hero-card { min-height: calc(100svh - 16px); align-items: flex-start; }
  .v2-hero-grid { grid-template-columns: minmax(0, 1fr); padding: 108px 22px 150px; gap: 36px; }
  .v2-h1 { font-size: clamp(38px, 11vw, 72px); }
  .v2-h1 > span { white-space: normal; }
  .v2-actions { gap: 10px; }
  .v2-btn { height: 50px; padding: 0 20px; font-size: 15px; }
  .love-code-badge { display: none; }   /* la insignia antigua tapaba el menú y los botones en móvil */
}

/* ============================================================
   SOBRE MÍ: texto que se ilumina palabra a palabra con el scroll
   ============================================================ */
.v2-about { padding: clamp(70px, 9vw, 130px) 0 clamp(50px, 7vw, 100px); }
.v2-eyebrow { margin: 0 0 clamp(24px, 3vw, 44px); display: inline-flex; align-items: center; gap: 10px; color: var(--v2-lilac); font: 500 14px/1 var(--v2-display); letter-spacing: .14em; text-transform: uppercase; }
.v2-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.v2-reveal { margin: 0 0 clamp(26px, 3.2vw, 48px); font-family: var(--v2-display); color: var(--v2-ink); }
.v2-reveal em { font-style: normal; }
.v2-reveal-h { font-weight: 600; font-size: clamp(34px, 4.4vw, 64px); line-height: .98; letter-spacing: -0.03em; max-width: 12.5em; }
.v2-reveal-lead { font-weight: 500; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -0.024em; max-width: 21em; }
.v2-reveal-mission { margin: 0 auto; font-weight: 400; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.6; letter-spacing: -0.005em; max-width: 31em; }
.v2-reveal-p { font-weight: 400; font-size: clamp(20px, 2.1vw, 32px); line-height: 1.32; letter-spacing: -0.014em; max-width: 30em; }
/* las palabras empiezan apagadas solo si hay JavaScript (si no, el texto se ve normal) */
.js-reveal .v2-reveal .w { color: rgb(246 242 255 / 16%); }

/* ============================================================
   "Mi stack": una fila al pie del hero. Iconos pequeños que se agrandan al acercar el cursor (como un dock)
   ============================================================ */
.v2-hero-grid { position: relative; align-self: stretch; align-content: center; }
.v2-works { position: absolute; left: clamp(24px, 4vw, 64px); bottom: 38px; display: flex; align-items: center; gap: 12px; }
.v2-works-label { margin: 0; flex-shrink: 0; font: 400 15px/1.4 var(--v2-display); color: #fff; }
.v2-works-more { font: 400 13px/1 var(--v2-display); color: rgb(255 255 255 / 75%); white-space: nowrap; }
.v2-dock { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; height: 44px; width: fit-content; }
.v2-dock li { position: relative; flex-shrink: 0; width: var(--size, 32px); height: var(--size, 32px); margin-left: 6px; }
.v2-dock li:first-child { margin-left: 0; }
.v2-dock li:hover, .v2-dock li:focus-within { z-index: 20; }
.v2-dock-tile { position: relative; display: block; width: 100%; height: 100%; border-radius: 22.5%; background: var(--bg, #000); box-shadow: 0 2px 8px rgb(0 0 0 / 35%); cursor: default; outline: none; }
.v2-dock-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgb(255 255 255 / 15%); transition: border-color .2s ease; pointer-events: none; }
.v2-dock li:hover .v2-dock-tile::after, .v2-dock-tile:focus-visible::after { border-color: rgb(255 255 255 / 40%); }
.v2-dock-tile:focus-visible { box-shadow: 0 0 0 2px var(--v2-lilac); }
.v2-dock-ico { position: absolute; inset: 0; border-radius: inherit; background: var(--fg, #fff); -webkit-mask: var(--ico) center / 56% no-repeat; mask: var(--ico) center / 56% no-repeat; }
.v2-dock-img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 17%; box-sizing: border-box; object-fit: contain; border-radius: inherit; }
.v2-dock-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); padding: 6px 10px; border-radius: 9px; background: #15121d; border: 1px solid var(--v2-line); color: #fff; font: 500 12px/1 var(--v2-display); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.v2-dock li:hover .v2-dock-tip, .v2-dock-tile:focus-visible .v2-dock-tip { opacity: 1; transform: translate(-50%, 0); }
@media (pointer: coarse) { .v2-dock li { margin-left: 8px; } .v2-dock li:first-child { margin-left: 0; } }
@media (max-width: 900px) {
  .v2-works { left: 22px; right: 22px; bottom: 28px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .v2-dock { flex-wrap: wrap; height: auto; gap: 8px; }
  .v2-dock li, .v2-dock li:first-child { margin-left: 0; }
}

/* ============================================================
   PROYECTOS DESTACADOS: cuatro bloques grandes, de composición distinta (estilo editorial, tipo Behance)
   ============================================================ */
.v2-projects { padding: clamp(24px, 4vw, 60px) 12px 12px; }
/* tarjeta grande gris oscura que contiene los proyectos, como el bloque "What makes Spacefast special?" */
.v2-projects-card { border-radius: clamp(26px, 3.2vw, 44px); background: #131317; border: 1px solid rgb(246 242 255 / 7%); padding: clamp(14px, 3.6vw, 64px) clamp(12px, 3.2vw, 56px); }
.v2-projects-in { max-width: 1180px; margin: 0 auto; }
/* título discreto de la tarjeta y enlace pequeño a la página con todos los proyectos */
.v2-projects-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 2px clamp(16px, 2vw, 26px); }
.v2-projects-name { margin: 0; font: 500 clamp(18px, 1.55vw, 22px)/1.2 var(--v2-display); letter-spacing: -0.01em; color: rgb(246 242 255 / 92%); }
.v2-projects-all { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 18px; border-radius: 999px; border: 1px solid rgb(201 168 251 / 28%); background: linear-gradient(135deg, #0b0713 0%, #2b1556 100%); color: #fff; text-decoration: none; font: 600 14px/1 var(--v2-display); letter-spacing: -0.01em; white-space: nowrap; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--v2-ease); }
.v2-projects-all svg { width: 14px; height: 14px; flex-shrink: 0; color: #fff; overflow: visible; transition: transform .3s var(--v2-ease); }
.v2-projects-all:hover { background: linear-gradient(135deg, #271352 0%, #6232c4 100%); border-color: rgb(230 214 255 / 60%); color: #fff; transform: translateY(-1px); }
.v2-projects-all:hover svg { transform: translate(2px, -2px); }
.v2-works-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.v2-work { position: relative; display: block; overflow: hidden; background-clip: padding-box; isolation: isolate; border-radius: clamp(22px, 2.4vw, 34px); background: #120d1f; color: #fff; text-decoration: none; border: 0;
  transition: transform .6s var(--v2-ease), box-shadow .6s var(--v2-ease); }
.v2-work:hover, .v2-work:focus-visible { transform: translateY(-6px); box-shadow: 0 30px 70px rgb(124 58 237 / 25%); }
.v2-work:focus-visible { outline: 2px solid var(--v2-lilac); outline-offset: 3px; }
/* alturas y reparto en 12 columnas: 7+5 arriba, 5+7 abajo */
.v2-work--madrid { grid-column: span 6; height: clamp(300px, 32vw, 470px); }
.v2-work--malaga { grid-column: span 6; height: clamp(300px, 32vw, 470px); background: #eaf3ff; }
.v2-work--liv { grid-column: span 6; height: clamp(300px, 32vw, 470px); }
.v2-work--web { grid-column: span 6; height: clamp(300px, 32vw, 470px); background: #eef1f2; }

.v2-work-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.v2-work-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); transition: transform 1.1s var(--v2-ease); }
.v2-work:hover .v2-work-img, .v2-work:focus-visible .v2-work-img { transform: scale(1.06); }
/* velo inferior para que el texto se lea sobre cualquier imagen */
.v2-work::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(7 5 13 / 0%) 55%, rgb(7 5 13 / 35%) 75%, rgb(7 5 13 / 82%) 100%); transition: opacity .5s ease; }

.v2-work-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(14px, 1.7vw, 24px); max-width: 100%; }
.v2-work-cat { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: rgb(11 7 19 / 72%); border: 1px solid rgb(246 242 255 / 18%); font: 500 12px/1 var(--v2-display); letter-spacing: -0.005em; }
.v2-work-title { margin: 10px 0 0; font: 600 clamp(19px, 1.5vw, 24px)/1.1 var(--v2-display); letter-spacing: -0.02em; }
/* descripción y enlace: aparecen al pasar el cursor (con el dedo, siempre visibles) */
.v2-work-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s var(--v2-ease), opacity .45s ease; }
.v2-work-more > div { overflow: hidden; }
.v2-work-more p { margin: 10px 0 0; max-width: 30em; font: 400 clamp(13.5px, 1vw, 15.5px)/1.5 var(--v2-display); color: rgb(246 242 255 / 82%); }
.v2-work-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font: 600 13.5px/1 var(--v2-display); color: var(--v2-lilac-2); }
.v2-work-cta svg { width: 14px; height: 14px; }
.v2-work:hover .v2-work-more, .v2-work:focus-visible .v2-work-more { grid-template-rows: 1fr; opacity: 1; }
.v2-work-arrow { position: absolute; top: clamp(12px, 1.4vw, 18px); right: clamp(12px, 1.4vw, 18px); z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgb(11 7 19 / 72%); border: 1px solid rgb(246 242 255 / 22%); transition: background .35s ease, transform .5s var(--v2-ease), color .35s ease; }
.v2-work-arrow svg { width: 15px; height: 15px; }
.v2-work:hover .v2-work-arrow, .v2-work:focus-visible .v2-work-arrow { background: #fff; color: #1a0b33; transform: rotate(45deg); }

/* los bloques con vídeo (Málaga y Calcula lo tuyo) tienen fondos claros: el velo inferior es más fuerte para que el texto se lea */
.v2-work--malaga::after, .v2-work--web::after { background: linear-gradient(180deg, rgb(7 5 13 / 0%) 45%, rgb(7 5 13 / 55%) 72%, rgb(7 5 13 / 92%) 100%); }
.v2-work-vid { background: transparent; }

@media (max-width: 900px) {
  .v2-works-grid { grid-template-columns: minmax(0, 1fr); }
  /* en móvil la imagen va arriba y el texto debajo (sin tapar el vídeo) */
  .v2-work--madrid, .v2-work--malaga, .v2-work--liv, .v2-work--web { grid-column: auto; height: auto; display: flex; flex-direction: column; background: #1b1722; }
  .v2-work::after, .v2-work--malaga::after, .v2-work--web::after { display: none; }
  .v2-work-art { position: relative; inset: auto; aspect-ratio: 4 / 3; flex-shrink: 0; }
  .v2-work-info { position: relative; padding: 16px 18px 20px; }
  .v2-work-more { grid-template-rows: 1fr; opacity: 1; }
  .v2-work-arrow { width: 36px; height: 36px; }
  .v2-projects-name { font-size: 18px; }
}
@media (hover: none) { .v2-work-more { grid-template-rows: 1fr; opacity: 1; } .v2-work:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .v2-work, .v2-work-img, .v2-work-more, .v2-work-arrow { transition: none; } .v2-work:hover { transform: none; } }

/* ============================================================
   PÁGINA "PROYECTOS": archivo con todos los trabajos y filtros
   ============================================================ */
.v2-page { margin: 0; background: var(--v2-bg); color: var(--v2-ink); font-family: var(--v2-display); -webkit-font-smoothing: antialiased; }
.v2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* estructura del índice del blog de Spacefast: cabecera "logo | sección", título moderado con una pastilla a la derecha, un destacado con imagen a la izquierda y texto a la derecha, y debajo el resto en cuadrícula */
.v2-page { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><g fill='%23f6f2ff'><circle cx='38' cy='64' r='.9' opacity='.35'/><circle cx='150' cy='20' r='.7' opacity='.3'/><circle cx='260' cy='120' r='1' opacity='.3'/><circle cx='370' cy='52' r='.8' opacity='.35'/><circle cx='90' cy='210' r='.8' opacity='.25'/><circle cx='200' cy='290' r='1' opacity='.3'/><circle cx='330' cy='240' r='.7' opacity='.3'/><circle cx='30' cy='360' r='.9' opacity='.3'/><circle cx='170' cy='395' r='.7' opacity='.25'/><circle cx='390' cy='370' r='.9' opacity='.3'/></g></svg>"); background-attachment: fixed; }
.v2-brand { display: inline-flex; align-items: center; gap: 18px; }
.v2-nav-sep { width: 1px; height: 34px; background: rgb(246 242 255 / 24%); }
.v2-nav-label { font: 500 20px/1 var(--v2-display); letter-spacing: -0.014em; color: var(--v2-ink); }
.v2-nav.is-pill .v2-nav-sep, .v2-nav.is-pill .v2-nav-label { display: none; }
.v2-page .v2-nav-in { max-width: 1180px; justify-content: flex-start; gap: 28px; padding-left: 0; padding-right: 0; }
.v2-page .v2-nav.is-pill .v2-nav-in { max-width: 560px; padding: 0 7px 0 18px; justify-content: space-between; gap: 18px; }
.v2-page .v2-links { margin-left: auto; }
.v2-page .v2-nav.is-pill .v2-links { margin-left: 0; }

.v2-idx { padding: clamp(120px, 11vw, 160px) 0 clamp(40px, 6vw, 90px); }
.v2-idx-in { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 3vw, 24px); }
.v2-idx-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.v2-idx-title { margin: 0; font: 500 clamp(28px, 2.8vw, 40px)/1.1 var(--v2-display); letter-spacing: -0.02em; color: #fff; }
.v2-idx .v2-filters { margin: clamp(22px, 3vw, 36px) 0 clamp(30px, 4.4vw, 64px); }

.v2-idx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(34px, 4vw, 60px) clamp(16px, 2vw, 28px); }
.v2-card-link { display: block; color: inherit; text-decoration: none; }
.v2-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: clamp(18px, 1.8vw, 26px); background: #1b1722; background-clip: padding-box; }
.v2-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--v2-ease); }
.v2-card-link:hover .v2-card-media img, .v2-card-link:focus-visible .v2-card-media img { transform: scale(1.05); }
.v2-card-body { margin-top: 18px; }
.v2-card-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 13.5px/1.35 var(--v2-display); }
.v2-card-cat { color: var(--v2-lilac); }
.v2-card-title { margin: 8px 0 0; font: 500 clamp(18px, 1.4vw, 20px)/1.2 var(--v2-display); letter-spacing: -0.018em; color: #fff; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .14em; transition: text-decoration-color .3s ease; }
.v2-card-link:hover .v2-card-title, .v2-card-link:focus-visible .v2-card-title { text-decoration-color: rgb(246 242 255 / 70%); }
.v2-card-desc { margin: 10px 0 0; font: 400 15px/1.55 var(--v2-display); color: var(--v2-ink-3); }
.v2-card-cta { display: none; align-items: center; gap: 7px; margin-top: 20px; font: 600 15px/1 var(--v2-display); color: var(--v2-lilac-2); }
.v2-card-cta svg { width: 14px; height: 14px; transition: transform .3s var(--v2-ease); }
.v2-card-link:hover .v2-card-cta svg { transform: translate(2px, -2px); }

.v2-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(22px, 3vw, 40px); }
.v2-filter { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgb(246 242 255 / 16%); background: transparent; color: var(--v2-ink-2); font: 500 14.5px/1 var(--v2-display); letter-spacing: -0.01em; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--v2-ease); }
.v2-filter:hover { color: #fff; border-color: rgb(246 242 255 / 34%); transform: translateY(-1px); }
.v2-filter[aria-pressed="true"] { background: linear-gradient(135deg, #1b0e38 0%, #4a22a0 100%); border-color: rgb(230 214 255 / 42%); color: #fff; }
.v2-filter[aria-pressed="true"] span { color: rgb(26 11 51 / 60%); }
.v2-filter:focus-visible, .v2-card-link:focus-visible { outline: 2px solid var(--v2-lilac); outline-offset: 3px; }

.v2-card[hidden] { display: none; }
.v2-card { transition: opacity .16s ease, transform .16s ease; }
.v2-card.is-out { opacity: 0; transform: translateY(10px); }
.v2-card.is-in { animation: v2cardin .5s var(--v2-ease) both; }
@keyframes v2cardin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.v2-card-link { display: block; color: inherit; text-decoration: none; }
.v2-nojs { color: var(--v2-ink-2); line-height: 2; }
.v2-nojs a { color: var(--v2-ink); }

.v2-links a[aria-current="page"] { color: #fff; }
.v2-links a[aria-current="page"]::after { transform: scaleX(1); }

@media (max-width: 1000px) { .v2-idx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .v2-filters { flex-wrap: nowrap; overflow-x: auto; margin-right: -18px; padding-right: 18px; scrollbar-width: none; }
  .v2-filters::-webkit-scrollbar { display: none; }
  .v2-filter { flex-shrink: 0; height: 40px; }
  .v2-nav-label { font-size: 20px; }
  .v2-page .v2-nav-in { padding-left: 12px; padding-right: 8px; }
  .v2-page .v2-nav.is-pill .v2-nav-in { max-width: 260px; padding: 0 5px 0 16px; }
}
@media (max-width: 620px) { .v2-idx-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .v2-card, .v2-card-media img { transition: none; } .v2-card.is-in { animation: none; } }

/* ============================================================
   FASE 8: marcas, experiencia, testimonios y contacto
   ============================================================ */
.v2-sec-title { margin: 0; font: 500 clamp(18px, 1.55vw, 22px)/1.2 var(--v2-display); letter-spacing: -0.01em; color: rgb(246 242 255 / 92%); }

/* ---- marcas: logotipos en blanco con desplazamiento automático, al mismo ancho que el párrafo ---- */
.v2-brands { padding: 0 0 clamp(56px, 8vw, 110px); }
.v2-brands-view { max-width: calc(31 * clamp(18px, 1.6vw, 23px)); margin: 0 auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.v2-brands-grid { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; width: max-content; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; will-change: transform; }
.v2-brands-grid li { flex: 0 0 auto; display: flex; align-items: center; padding: 0 clamp(16px, 1.9vw, 28px); }
.v2-brands-grid img { width: calc(var(--w, 80px) * .8); height: 42px; object-fit: cover; object-position: center; filter: brightness(0) invert(1); opacity: .62; }
.v2-brands-view.is-drag .v2-brands-grid { cursor: grabbing; }
.v2-brands-grid img { pointer-events: none; -webkit-user-drag: none; }
@media (prefers-reduced-motion: reduce) { .v2-brands-grid { transform: none !important; cursor: default; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 16px; } .v2-brands-grid li[aria-hidden] { display: none; } .v2-brands-view { -webkit-mask-image: none; mask-image: none; } }

/* ---- experiencia: cronología editorial ---- */
.v2-exp { padding: clamp(40px, 6vw, 100px) 0 clamp(50px, 7vw, 110px); }
.v2-exp .v2-wrap { max-width: 1228px; }
.v2-exp .v2-sec-title { margin-bottom: clamp(18px, 2.4vw, 30px); }
.v2-exp-list { list-style: none; margin: 0; padding: 0; }
.v2-exp-item { --exp-pad: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: clamp(18px, 4vw, 64px); padding: 0; }   /* sin rayas horizontales: la línea vertical del tiempo es continua (el espacio va dentro de cada columna) */
.v2-exp-when { padding-top: var(--exp-pad); }
.v2-exp-years { margin: 0; font: 500 clamp(18px, 1.5vw, 22px)/1 var(--v2-display); letter-spacing: -0.015em; color: #fff; white-space: nowrap; }
.v2-exp-years span { margin: 0 .12em; color: var(--v2-lilac); font-weight: 500; }
.v2-exp-place { display: inline-flex; align-items: center; height: 32px; margin-top: 14px; padding: 0 14px; border-radius: 999px; border: 1px solid rgb(246 242 255 / 18%); font: 500 14px/1 var(--v2-display); color: var(--v2-ink-2); }
.v2-exp-main { position: relative; padding: var(--exp-pad) 0 var(--exp-pad) clamp(22px, 3vw, 44px); }
.v2-exp-main::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--v2-line); }   /* la línea del tiempo */
.v2-exp-item:first-child .v2-exp-main::after { top: calc(var(--exp-pad) + 13px); }   /* en el primer trabajo arranca en su punto, sin subir más arriba */
.v2-exp-item:last-child .v2-exp-main::after { bottom: var(--exp-pad); }   /* y en el último termina donde acaba su contenido */
.v2-exp-main::before { content: ""; position: absolute; left: -6px; top: calc(var(--exp-pad) + 7px); width: 11px; height: 11px; border-radius: 50%; background: var(--v2-lilac); box-shadow: 0 0 0 5px rgb(201 168 251 / 16%), 0 0 18px rgb(168 85 247 / 60%); }
.v2-exp-role { margin: 0; font: 500 15px/1.3 var(--v2-display); color: var(--v2-lilac); }
.v2-exp-company { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font: 500 clamp(18px, 1.5vw, 22px)/1.2 var(--v2-display); letter-spacing: -0.015em; color: #fff; }
.v2-exp-icon { width: 40px; height: 40px; border-radius: 11px; overflow: hidden; flex-shrink: 0; display: block; transition: transform .35s var(--v2-ease); }
a.v2-exp-icon:hover { transform: translateY(-2px) rotate(-4deg); }
.v2-exp-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-exp-note { font: 400 clamp(14px, 1.1vw, 16px)/1 var(--v2-display); letter-spacing: 0; color: var(--v2-ink-3); }
.v2-exp-main p { margin: 18px 0 0; max-width: 40em; font: 400 clamp(15px, 1.1vw, 16.5px)/1.6 var(--v2-display); color: var(--v2-ink-2); }
.v2-exp-main p.v2-exp-role { margin-top: 0; }   /* el cargo queda a la altura del punto de la línea del tiempo */
.v2-exp-main p.v2-exp-label { margin-top: 28px; font: 500 12px/1 var(--v2-display); letter-spacing: .14em; text-transform: uppercase; color: var(--v2-ink-3); }
.v2-exp-tags { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v2-exp-tags li { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgb(246 242 255 / 14%); background: rgb(246 242 255 / 4%); font: 500 14px/1 var(--v2-display); color: var(--v2-ink-2); }
@media (max-width: 900px) {
  .v2-exp-item { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .v2-exp-when { padding-top: var(--exp-pad); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .v2-exp-place { margin-top: 0; }
  .v2-exp-main { padding-top: 0; }
  .v2-exp-main::before { top: 7px; }
  .v2-exp-item:first-child .v2-exp-main::after { top: 13px; }
}

/* ---- testimonios: citas grandes dentro de una tarjeta ---- */
.v2-quotes { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 12px 0; } /* mismos laterales que proyectos y hero (1180px) */
.v2-quotes-card { border-radius: clamp(26px, 3.2vw, 44px); background: #131317; border: 1px solid rgb(246 242 255 / 7%); padding: clamp(16px, 2.2vw, 36px) clamp(14px, 3.2vw, 56px) clamp(24px, 3vw, 48px); overflow: hidden; }
.v2-quotes-in { position: relative; max-width: 1180px; margin: 0 auto; }
.v2-quotes-bar { position: absolute; z-index: 3; right: 0; top: calc(clamp(56px, 5vw, 80px) * .18 - 21px); display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.v2-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.v2-quotes-ctrl { display: flex; align-items: center; gap: 10px; }
.v2-quotes-count { margin-right: 6px; font: 500 13px/1 var(--v2-display); letter-spacing: .1em; color: var(--v2-ink-3); }
.v2-quotes-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(246 242 255 / 20%); background: transparent; color: #fff; cursor: pointer; transition: background .25s ease, color .25s ease, transform .25s var(--v2-ease); }
.v2-quotes-btn svg { width: 16px; height: 16px; }
.v2-quotes-btn:hover { background: linear-gradient(135deg, #271352 0%, #6232c4 100%); border-color: rgb(230 214 255 / 60%); color: #fff; transform: translateY(-1px); }
.v2-quotes-btn:focus-visible, .v2-quote-ask:focus-visible { outline: 2px solid var(--v2-lilac); outline-offset: 3px; }
.v2-quotes-stage { position: relative; display: grid; margin-top: clamp(0px, 0.6vw, 8px); touch-action: pan-y; }
.v2-quote-mark { position: absolute; left: -4px; top: -.2em; font: 600 clamp(56px, 5vw, 80px)/1 var(--v2-display); color: rgb(168 85 247 / 30%); pointer-events: none; user-select: none; }
.v2-quote { grid-area: 1 / 1; margin: 0; position: relative; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s ease, transform .6s var(--v2-ease), visibility 0s linear .5s; }
.v2-quote.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.v2-quote blockquote { margin: 0; padding-top: clamp(20px, 2.4vw, 36px); }
.v2-quote blockquote p { margin: 0; max-width: 30em; font: 400 clamp(17px, 1.45vw, 21px)/1.5 var(--v2-display); letter-spacing: -0.018em; color: #fff; text-wrap: pretty; }
.v2-quote figcaption { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: clamp(20px, 2.4vw, 32px); min-height: 56px; }
.v2-quote-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid var(--v2-line); }
.v2-quote-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-quote-who { display: flex; flex-direction: column; gap: 4px; font: 400 14px/1.3 var(--v2-display); color: var(--v2-ink-3); }
.v2-quote-who b { font: 600 17px/1.2 var(--v2-display); color: #fff; }
.v2-quote-ask { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 500 14px/1 var(--v2-display); color: var(--v2-ink-2); text-decoration: none; transition: color .2s ease; }
.v2-quote-ask svg { width: 12px; height: 12px; }
.v2-quote-ask:hover { color: var(--v2-lilac-2); }
@media (max-width: 700px) { .v2-quote-ask { margin-left: 0; width: 100%; } }

/* ---- fuera de la pantalla: se mantiene, retocado a la paleta ---- */
.music-section { background: transparent; }
.music-section .section-label { font: 500 clamp(18px, 1.55vw, 22px)/1.2 var(--v2-display); letter-spacing: -0.01em; color: rgb(246 242 255 / 92%); }
.music-spotify-card { background: #131317; border-color: rgb(246 242 255 / 8%); }

/* ---- contacto: llamada clara dentro de una tarjeta ---- */
.v2-contact { padding: 12px; }
.v2-contact-card { padding: clamp(48px, 7vw, 120px) clamp(16px, 3.4vw, 64px) clamp(40px, 6vw, 96px); }
.v2-contact-in { max-width: 1180px;  margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 88px); align-items: stretch; }
.v2-contact-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.v2-contact-title { margin: 0; font: 500 clamp(28px, 2.8vw, 40px)/1.1 var(--v2-display); letter-spacing: -0.028em; color: #fff; }
.v2-contact-lede { margin: 18px 0 0; max-width: 24em; font: 400 clamp(15px, 1.15vw, 17px)/1.6 var(--v2-display); color: var(--v2-ink-2); }
.v2-contact-mail { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-bottom: 4px; border-bottom: 1px solid rgb(230 214 255 / 35%); font: 600 clamp(16px, 1.3vw, 19px)/1.2 var(--v2-display); color: var(--v2-lilac-2); text-decoration: none; word-break: break-all; transition: border-color .25s ease, color .25s ease; }
.v2-contact-mail svg, .v2-contact-in-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.v2-contact-mail:hover { color: #fff; border-color: #fff; }
.v2-contact-hint { margin: 16px 0 0; font: 400 14px/1.4 var(--v2-display); color: var(--v2-ink-3); }
.v2-contact-hint kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; margin: 0 2px; border-radius: 7px; border: 1px solid rgb(246 242 255 / 24%); font: 600 12px/1 var(--v2-display); color: var(--v2-ink-2); }
.v2-contact-in-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font: 500 15px/1 var(--v2-display); color: var(--v2-ink-2); text-decoration: none; transition: color .2s ease; }
.v2-contact-in-link:hover { color: var(--v2-lilac-2); }
.v2-form { display: flex; flex-direction: column; gap: 14px; }
.v2-form .v2-field:last-of-type { flex: 1; }
.v2-form .v2-field:last-of-type textarea { flex: 1; min-height: 120px; }
.v2-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.v2-field { display: grid; gap: 8px; }
.v2-form .v2-field:last-of-type { grid-template-rows: auto 1fr; }
.v2-field span { font: 500 13px/1 var(--v2-display); letter-spacing: .02em; color: var(--v2-ink-3); }
.v2-field input, .v2-field textarea { width: 100%; box-sizing: border-box; padding: 15px 16px; border-radius: 16px; border: 1px solid rgb(246 242 255 / 14%); background: rgb(246 242 255 / 4%); color: #fff; font: 400 16px/1.4 var(--v2-display); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; resize: vertical; }
.v2-field input:hover, .v2-field textarea:hover { border-color: rgb(246 242 255 / 28%); }
.v2-field input:focus, .v2-field textarea:focus { outline: none; border-color: var(--v2-lilac); background: rgb(201 168 251 / 7%); box-shadow: 0 0 0 4px rgb(168 85 247 / 18%); }
.v2-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.v2-submit { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 999px; background: rgb(246 242 255 / 7%); border: 1px solid rgb(246 242 255 / 22%); color: #fff; font: 500 14px/1 var(--v2-display); cursor: pointer; transition: background .25s ease, border-color .25s ease, opacity .2s ease; }
.v2-submit::after { content: "→"; font-size: 15px; transition: transform .3s var(--v2-ease); }
.v2-submit:hover { background: rgb(246 242 255 / 14%); border-color: rgb(246 242 255 / 45%); }
.v2-submit:hover::after { transform: translateX(3px); }
.v2-submit:disabled { opacity: .6; cursor: progress; }
.v2-submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.v2-form-status { margin: 0; font: 500 14px/1.4 var(--v2-display); color: var(--v2-lilac-2); }
@media (max-width: 900px) { .v2-contact-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .v2-contact-mail { margin-top: 28px; } }
@media (max-width: 520px) { .v2-form-row { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .v2-quote, .v2-brands-grid li, .v2-submit { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] { scroll-behavior: auto; }
  .v2-rise { opacity: 1; transform: none; animation: none; }
    .v2-nav, .v2-nav-in, .v2-logo-mark, .v2-logo-rest { transition: none; }
}

/* crédito del vídeo del hero: pequeño y sutil, abajo a la derecha */
.v2-hero-credit { position: absolute; right: clamp(18px, 2.4vw, 36px); bottom: clamp(14px, 1.8vw, 24px); z-index: 3; margin: 0; font: 400 11.5px/1.3 var(--v2-display); letter-spacing: .01em; color: rgb(246 242 255 / 52%); pointer-events: none; }
@media (max-width: 900px) { .v2-hero-credit { display: none; } }

/* ============================================================
   FASE 9: footer minimal
   ============================================================ */
.v2-foot { position: relative; padding: clamp(40px, 5vw, 72px) 12px 0; overflow: hidden; --p: 0; }
.v2-foot-in { max-width: 1296px; margin: 0 auto; padding: 22px clamp(8px, 2vw, 36px) clamp(22px, 2.6vw, 34px); border-top: 1px solid var(--v2-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.v2-foot-icons { display: flex; gap: 18px; }
.v2-foot-icons a { display: grid; place-items: center; color: var(--v2-ink-3); transition: color .2s ease, transform .3s var(--v2-ease); }
.v2-foot-icons a svg { width: 20px; height: 20px; }
.v2-foot-icons a:hover { color: #fff; transform: translateY(-2px); }
.v2-foot-icons a:focus-visible { outline: 2px solid var(--v2-lilac); outline-offset: 3px; }
.v2-foot-copy { margin: 0; padding: 0; font: 400 14px/1.4 var(--v2-display); color: var(--v2-ink-3); }

/* ============================================================
   Proyectos destacados v2: imagen limpia arriba, texto debajo (sin texto sobre la foto)
   ============================================================ */
.v2-works-grid { row-gap: clamp(26px, 3.2vw, 46px); }
.v2-work, .v2-work--madrid, .v2-work--malaga, .v2-work--liv, .v2-work--web { grid-column: span 6; height: auto; display: flex; flex-direction: column; background: transparent; border-radius: 0; overflow: visible; box-shadow: none; }
.v2-work:hover, .v2-work:focus-visible { transform: none; box-shadow: none; }
.v2-work::after, .v2-work--malaga::after, .v2-work--web::after { display: none; }
.v2-work-art { position: relative; inset: auto; flex-shrink: 0; aspect-ratio: 16 / 11; border-radius: clamp(18px, 2vw, 28px); overflow: hidden; background: #1b1722; background-clip: padding-box; }
.v2-work-info { position: static; padding: 16px 2px 0; }
.v2-work-cat { height: auto; padding: 0; border: 0; border-radius: 0; background: none; font: 500 13px/1.3 var(--v2-display); color: var(--v2-lilac); }
.v2-work-title { margin: 6px 0 0; font: 500 clamp(19px, 1.55vw, 23px)/1.15 var(--v2-display); letter-spacing: -0.015em; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .14em; transition: text-decoration-color .3s ease; }
.v2-work:hover .v2-work-title, .v2-work:focus-visible .v2-work-title { text-decoration-color: rgb(246 242 255 / 70%); }
.v2-work-more { grid-template-rows: 1fr; opacity: 1; }
.v2-work-more p { margin: 8px 0 0; max-width: 34em; font: 400 15px/1.5 var(--v2-display); color: var(--v2-ink-3); }
.v2-work-cta { display: none; }
.v2-work-arrow { top: 14px; right: 14px; }
@media (max-width: 900px) { .v2-work, .v2-work--madrid, .v2-work--malaga, .v2-work--liv, .v2-work--web { grid-column: auto; } }

/* subtítulo del hero: la última palabra se escribe, se selecciona, se borra y da paso a la siguiente */
.v2-lede .v2-type { white-space: nowrap; color: #fff; }
.v2-lede .v2-type-sel { background: rgb(168 85 247 / 38%); border-radius: 3px; }
.v2-lede .v2-caret-t { display: inline-block; width: 2px; height: 1em; margin-left: .06em; vertical-align: -0.16em; background: var(--v2-lilac-2); animation: v2caret 1s steps(1) infinite; }
.v2-lede .v2-caret-t.is-off { visibility: hidden; animation: none; }
@keyframes v2caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .v2-lede .v2-caret-t { animation: none; } }

/* ---- Proyectos destacados v3: sin tarjeta contenedora, títulos con más presencia ---- */
.v2-projects-card { background: transparent; border: 0; padding: clamp(0px, 1vw, 12px) clamp(0px, 3.2vw, 56px); }
.v2-projects-bar { margin-bottom: clamp(20px, 2.6vw, 36px); }
.v2-works-grid { column-gap: clamp(18px, 2.4vw, 36px); row-gap: clamp(34px, 4.4vw, 64px); }
.v2-work-art .v2-work-img, .v2-work-art video { position: relative; z-index: 0; }
.v2-work-arrow { z-index: 3; }
.v2-work-meta { display: flex; align-items: baseline; gap: 12px; }
.v2-work-title { margin-top: 8px; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; }
.v2-work-more p { margin-top: 10px; font-size: 15.5px; color: var(--v2-ink-2); }

/* ---- botón flotante de WhatsApp ---- */
.v2-wa { position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 50; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #1b0e38 0%, #4a22a0 100%); border: 1px solid rgb(230 214 255 / 42%); box-shadow: 0 10px 28px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 14%); text-decoration: none; transition: transform .3s var(--v2-ease), background .25s ease, border-color .25s ease, opacity .25s ease; }
.v2-wa svg { width: 26px; height: 26px; }
.v2-wa:hover { transform: translateY(-3px); background: linear-gradient(135deg, #271352 0%, #6232c4 100%); border-color: rgb(230 214 255 / 70%); }
.v2-wa:focus-visible { outline: 2px solid var(--v2-lilac); outline-offset: 3px; }
.v2-wa-tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); padding: 8px 12px; border-radius: 10px; background: #15121d; border: 1px solid var(--v2-line); color: #fff; font: 500 13px/1 var(--v2-display); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .25s var(--v2-ease); }
.v2-wa:hover .v2-wa-tip, .v2-wa:focus-visible .v2-wa-tip { opacity: 1; transform: translate(0, -50%); }
.v2-menu-open .v2-wa { opacity: 0; pointer-events: none; }
@media (hover: none) { .v2-wa-tip { display: none; } }
.v2-foot-in { padding-right: calc(clamp(8px, 2vw, 36px) + 70px); }
@media (prefers-reduced-motion: reduce) { .v2-wa, .v2-wa-tip { transition: none; } }

/* Proyectos destacados: tres bloques iguales en una fila */
.v2-work, .v2-work--madrid, .v2-work--malaga, .v2-work--liv, .v2-work--web { grid-column: span 4; }
@media (max-width: 900px) { .v2-work, .v2-work--madrid, .v2-work--malaga, .v2-work--liv, .v2-work--web { grid-column: auto; } }

/* el párrafo de presentación va en dos bloques, como en Spacefast */
.v2-reveal-mission + .v2-reveal-mission { margin-top: 1.5em; }

/* en pantallas táctiles no hay tecla C: se oculta el aviso */
@media (hover: none) { .v2-contact-hint { display: none; } }

/* vídeos de fondo: nunca se muestran los controles ni el botón de play del navegador (Safari en iPhone lo pinta si no deja reproducir solo) */
video[autoplay] { pointer-events: none; }
video[autoplay]::-webkit-media-controls,
video[autoplay]::-webkit-media-controls-panel,
video[autoplay]::-webkit-media-controls-play-button,
video[autoplay]::-webkit-media-controls-start-playback-button,
video[autoplay]::-webkit-media-controls-overlay-play-button,
video[autoplay]::-webkit-media-controls-enclosure { display: none !important; opacity: 0 !important; -webkit-appearance: none; }
video[data-src]::-webkit-media-controls-start-playback-button { display: none !important; }

/* testimonios en móvil y tablet: contador y flechas en su propia fila, y la comilla en otra, para que nada pise el texto */
@media (max-width: 900px) {
  .v2-quotes-bar { position: static; margin: 0 0 8px; }
  .v2-quotes-stage { margin-top: 0; }
  .v2-quote blockquote { padding-top: 46px; }
  .v2-quote-mark { top: 0; left: 0; font-size: 52px; }
}

/* campo trampa anti-spam: fuera de pantalla para personas y lectores de pantalla (los bots sí lo rellenan) */
.v2-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* formación: bloque pequeño, sin rayas y alineado con el texto de Experiencia */
.v2-edu { margin-top: clamp(36px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: 8px clamp(18px, 4vw, 64px); align-items: start; }
.v2-edu-h { margin: 0; font: 500 clamp(20px, 1.8vw, 26px)/1.2 var(--v2-display); letter-spacing: -0.02em; color: #fff; }
.v2-edu-list { list-style: none; margin: 0; padding: 0 0 0 clamp(23px, 3vw, 45px); }
.v2-edu-list li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 4px clamp(14px, 2vw, 28px); padding: 7px 0; align-items: baseline; }
.v2-edu-list li:first-child { padding-top: 4px; }
.v2-edu-y { font: 500 14px/1.4 var(--v2-display); color: var(--v2-ink-3); white-space: nowrap; }
.v2-edu-list p { margin: 0; font: 400 clamp(14px, 1.1vw, 16px)/1.45 var(--v2-display); color: var(--v2-ink-2); }
.v2-edu-list strong { font-weight: 500; color: #fff; }
.v2-edu-list p span { margin-left: 8px; color: var(--v2-ink-3); }
@media (max-width: 900px) { .v2-edu { grid-template-columns: minmax(0, 1fr); } .v2-edu-list { padding-left: 0; } }
@media (max-width: 640px) { .v2-edu-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 0; } .v2-edu-list p span { display: block; margin: 2px 0 0; } }