/* Vértigo Marketing · landings de servicio por localidad
   Identidad tomada de vertigomkt.com: espacio #050507, azul #1c67ff,
   General Sans para titulares y Gambetta para el texto. */

@font-face {
  font-family: 'General Sans';
  src: url('https://vertigomkt.com/fonts/general-sans-variable-49d3fbd2.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'Gambetta';
  src: url('https://vertigomkt.com/fonts/gambetta-variable-f705e571.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --bg: #050507;
  --ink: rgba(255, 255, 255, 0.94);
  --ink-2: rgba(255, 255, 255, 0.72);
  --ink-3: rgba(255, 255, 255, 0.5);
  --accent: #1c67ff;
  --accent-hover: #3a7dff;
  --accent-pressed: #1656d6;
  --accent-ring: rgba(28, 103, 255, 0.22);
  --accent-border: rgba(120, 160, 255, 0.35);
  --accent-soft: #a9c6ff;
  --glass: rgba(8, 12, 18, 0.9);
  --glass-heavy: rgba(7, 10, 15, 0.94);
  --line: rgba(220, 230, 245, 0.1);
  --line-2: rgba(220, 230, 245, 0.18);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --display: 'General Sans', 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text: 'Gambetta', Georgia, 'Times New Roman', serif;
  --inset: clamp(20px, 4vw, 48px);
  --max: 1200px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
fieldset {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
fieldset {
  border: 0;
  min-width: 0;
}
a {
  color: inherit;
}
svg {
  display: block;
}
[id] {
  scroll-margin-top: 88px;
}
::selection {
  background: rgba(28, 103, 255, 0.55);
  color: #fff;
}
section:focus {
  outline: 0;
}
:focus-visible {
  outline: 2px solid rgba(120, 170, 255, 0.9);
  outline-offset: 3px;
  border-radius: 6px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font: 600 0.85rem var(--display);
  text-decoration: none;
  transition: top 0.2s;
}
.skip:focus {
  top: 16px;
}

/* Fondo: espacio, planeta de reserva y escena 3D */
.space {
  position: fixed;
  inset: 0 0 auto 0;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(55% 45% at 78% 40%, rgba(28, 103, 255, 0.1), transparent 70%),
    radial-gradient(38% 38% at 6% 88%, rgba(90, 70, 200, 0.06), transparent 70%), var(--bg);
}
.space::after {
  content: '';
  position: absolute;
  right: -6vw;
  top: 50%;
  width: min(84vh, 60vw);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 34% 34%, #0c1c40, #05070d 62%);
  box-shadow:
    0 0 90px rgba(28, 103, 255, 0.32),
    inset -20px -20px 80px rgba(0, 0, 0, 0.8),
    inset 6px 6px 40px rgba(60, 120, 255, 0.25);
  transition: opacity 0.9s;
}
.has-scene .space::after {
  opacity: 0;
}
.space canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s;
}
.space canvas.is-ready {
  opacity: 1;
}
.geo-label {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  will-change: transform, opacity;
}
.geo-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.3));
  transform-origin: 0 0;
  transform: rotate(-50deg);
}
.geo-label__in {
  position: absolute;
  left: 24px;
  bottom: 27px;
  display: grid;
  gap: 5px;
  padding: 9px 12px 8px;
  border-radius: 10px;
  background: rgba(8, 12, 18, 0.82);
  border: 1px solid var(--line-2);
  white-space: nowrap;
}
.geo-label b {
  font: 600 12px/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 70;
}
.progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #8fb4ff);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Grano de película y luz que sigue al cursor */
.grain {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.07;
  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 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.glow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 720px;
  height: 720px;
  margin: -360px 0 0 -360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(60, 125, 255, 0.11), transparent 62%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
  will-change: transform;
}
.glow.is-on {
  opacity: 1;
}
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-bottom: -0.12em;
  padding-bottom: 0.12em;
}
.w > span {
  display: inline-block;
  translate: 0 108%;
  transition: translate 0.95s var(--ease) calc(var(--w, 0) * 42ms);
}
.is-in .w > span,
.is-in.w > span {
  translate: 0 0;
}

/* Cabecera: solo el isotipo girando */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px var(--inset);
  border-bottom: 1px solid transparent;
  transition:
    background 0.35s,
    border-color 0.35s;
}
.hdr--solid {
  background: rgba(5, 5, 7, 0.9);
  border-bottom-color: var(--line);
}
.brand {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  margin-right: auto;
  perspective: 320px;
}
.brand canvas {
  position: absolute;
  inset: 0;
  width: 56px;
  height: 56px;
  opacity: 0;
  transition: opacity 0.5s;
}
.brand canvas.is-ready {
  opacity: 1;
}
/* Reserva mientras carga el modelo: el isotipo plano girando sobre su eje. */
.brand svg {
  position: absolute;
  inset: 10px;
  width: 36px;
  height: 36px;
  fill: #fff;
  animation: giro 7s linear infinite;
  transition: opacity 0.4s;
}
.brand canvas.is-ready + svg {
  opacity: 0;
}
@keyframes giro {
  to {
    transform: rotateY(360deg);
  }
}
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav a {
  padding: 14px 13px;
  border-radius: 10px;
  font: 600 11.5px/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  transition:
    color 0.2s,
    background 0.2s;
}
.nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

/* Menú de pantallas estrechas: el botón pasa de dos rayas a un aspa y el menú cubre la pantalla */
.burger {
  display: none;
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: rgba(8, 12, 18, 0.7);
  cursor: pointer;
}
.burger span {
  position: absolute;
  left: 13px;
  right: 13px;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: #fff;
  transition:
    translate 0.4s var(--ease),
    rotate 0.4s var(--ease);
}
.burger span:first-child {
  translate: 0 -4px;
}
.burger span:last-child {
  translate: 0 4px;
}
.menu-open .burger span:first-child {
  translate: 0 0;
  rotate: 45deg;
}
.menu-open .burger span:last-child {
  translate: 0 0;
  rotate: -45deg;
}
.menu {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 104px var(--inset) 28px;
  overflow-y: auto;
  background:
    radial-gradient(90% 50% at 100% 0%, rgba(28, 103, 255, 0.34), transparent 70%),
    rgba(5, 5, 7, 0.97);
  clip-path: circle(0 at calc(100% - 44px) 36px);
  visibility: hidden;
  transition:
    clip-path 0.7s var(--ease),
    visibility 0s 0.7s;
}
.menu-open .menu {
  clip-path: circle(150% at calc(100% - 44px) 36px);
  visibility: visible;
  transition:
    clip-path 0.8s var(--ease),
    visibility 0s;
}
.menu__nav {
  display: grid;
}
.menu__nav a {
  display: block;
  overflow: hidden;
  padding: 0.16em 0;
  border-bottom: 1px solid var(--line);
  font: 600 clamp(2.1rem, 10.5vw, 3.4rem) / 1.12 var(--display);
  letter-spacing: -0.045em;
  text-decoration: none;
  color: #fff;
}
.menu__nav a span {
  display: block;
  translate: 0 115%;
  transition: translate 0.5s var(--ease);
}
.menu-open .menu__nav a span {
  translate: 0 0;
  transition: translate 0.8s var(--ease) calc(0.16s + var(--i, 0) * 60ms);
}
.menu__nav a:nth-child(2) {
  --i: 1;
}
.menu__nav a:nth-child(3) {
  --i: 2;
}
.menu__nav a:nth-child(4) {
  --i: 3;
}
.menu__nav a:nth-child(5) {
  --i: 4;
}
.menu__nav a:nth-child(6) {
  --i: 5;
}
.menu__foot {
  display: grid;
  gap: 16px;
  justify-items: start;
  opacity: 0;
  transition: opacity 0.4s;
}
.menu-open .menu__foot {
  opacity: 1;
  transition: opacity 0.7s 0.5s;
}
.menu__foot .btn {
  width: 100%;
}
.menu__tel {
  font: 600 1.15rem/1 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}

/* Ventana de contacto: calcada de la de vertigomkt.com (medidas, colores y orden de piezas) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 5, 6, 0.55);
  animation: modal-velo 0.24s ease;
}
.modal[hidden] {
  display: none;
}
@keyframes modal-velo {
  from {
    opacity: 0;
  }
}
.modal__panel {
  position: relative;
  width: min(440px, 100%);
  max-height: min(76vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2rem 2rem 1.6rem;
  border-radius: 16px;
  border: 1px solid rgba(220, 230, 245, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 18%), rgba(7, 10, 15, 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  color: var(--ink);
  animation: modal-panel 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes modal-panel {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}
.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.modal__close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.modal__title {
  margin: 0 0 0.4rem;
  padding-right: 34px;
  font: 600 1.35rem/1.2 var(--display);
  letter-spacing: 0;
  text-wrap: wrap;
  color: var(--ink);
}
.modal__title:focus {
  outline: none;
}
.contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact[hidden],
.contact__done[hidden] {
  display: none;
}
.contact__trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contact__field label {
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.68);
}
.contact__field input,
.contact__field textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(220, 230, 245, 0.14);
  border-radius: 10px;
  background: rgba(4, 7, 11, 0.55);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.contact__field textarea {
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}
.contact__field input:hover,
.contact__field textarea:hover {
  background: rgba(6, 10, 15, 0.65);
  border-color: rgba(220, 230, 245, 0.22);
}
.contact__field input:focus,
.contact__field textarea:focus {
  outline: none;
  background: rgba(6, 10, 15, 0.65);
  border-color: rgba(220, 230, 245, 0.32);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.25),
    0 0 0 3px var(--accent-ring);
}
.contact__field [aria-invalid='true'] {
  border-color: rgba(255, 122, 122, 0.7);
}
.contact__field [aria-invalid='true']:focus {
  border-color: rgba(255, 122, 122, 0.9);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(255, 122, 122, 0.18);
}
.contact__err,
.contact__fail {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255, 158, 158, 0.95);
}
.contact__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--accent-border);
  background: var(--accent);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.28);
  color: #fff;
  font: 600 0.95rem/1 var(--display);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}
.contact__cta:hover {
  background: var(--accent-hover);
  border-color: rgba(150, 185, 255, 0.5);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.22),
    0 8px 22px rgba(0, 0, 0, 0.3);
}
.contact__cta:active {
  background: var(--accent-pressed);
}
.contact__cta:disabled {
  opacity: 0.7;
  cursor: default;
}
.contact__note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.4);
}
.contact__note a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
}
.contact__note a:hover {
  color: rgba(255, 255, 255, 0.9);
}
.contact__booking {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 1.5rem;
  padding: 0 14px;
  border: 1px solid rgba(220, 230, 245, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}
.contact__booking::before {
  content: '';
  position: absolute;
  inset: -1.1rem 0 auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.contact__booking svg {
  flex: none;
  width: 14px;
  height: 14px;
  opacity: 0.8;
}
.contact__booking:hover {
  border-color: rgba(220, 230, 245, 0.22);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}
.contact__phones {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}
.contact__phones svg {
  flex: none;
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.contact__phones a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}
.contact__phones a:hover {
  color: rgba(255, 255, 255, 0.92);
}
.contact__done {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.contact__done p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.contact__done > * {
  animation: contacto-entra 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards;
}
.contact__done > :nth-child(2) {
  animation-delay: 0.2s;
}
.contact__done > :nth-child(3) {
  animation-delay: 0.32s;
}
@keyframes contacto-entra {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.modal :focus-visible {
  outline: 2px solid rgba(120, 170, 255, 0.9);
  outline-offset: 2px;
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font: 600 12.5px/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(28, 103, 255, 0.28);
  transition:
    background 0.2s,
    transform 0.2s var(--ease),
    box-shadow 0.2s;
}
.btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 6px var(--accent-ring),
    0 14px 36px rgba(28, 103, 255, 0.36);
}
.btn:active {
  background: var(--accent-pressed);
  transform: none;
}
.btn svg {
  width: 24px;
  height: 14px;
  transition: transform 0.25s var(--ease);
}
.btn:hover svg {
  transform: translateX(4px);
}
.btn--sm {
  height: 46px;
  padding: 0 22px;
}
.btn--lg {
  height: 58px;
  width: 100%;
}
.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  box-shadow: none;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

/* Piezas comunes */
main,
.ftr {
  position: relative;
  z-index: 1;
}
.wrap {
  width: min(var(--max), 100% - 2 * var(--inset));
  margin-inline: auto;
}
.sec {
  padding: clamp(84px, 11vw, 150px) 0;
}
.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  color: #fff;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
/* Partido en palabras para animarlo: el equilibrado de líneas da saltos raros en algunos navegadores */
h2.is-split {
  text-wrap: wrap;
}
h3 {
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.head {
  max-width: 860px;
}
.sec__lead {
  margin-top: 22px;
  max-width: 580px;
  font-size: 1.15rem;
  line-height: 1.55;
}
.mt {
  margin-top: 26px;
}
.note {
  margin-top: 22px;
  max-width: 460px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-3);
}
.checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 18px;
  font: 500 0.86rem/1.2 var(--display);
  color: var(--ink-2);
}
.checks li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.checks svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: #6fa0ff;
}
.checks--col {
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 30px;
  font-size: 0.98rem;
  color: var(--ink);
}
.checks--col svg {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(28, 103, 255, 0.18);
  border: 1px solid var(--accent-border);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips a {
  display: block;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font: 500 0.9rem/1 var(--display);
  text-decoration: none;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.chips a:hover {
  background: rgba(28, 103, 255, 0.25);
  border-color: var(--accent-border);
}

/* Aparición */
.js [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity 0.9s var(--ease) calc(var(--i, 0) * 85ms),
    translate 0.9s var(--ease) calc(var(--i, 0) * 85ms);
}
.js [data-reveal].is-in {
  opacity: 1;
  translate: 0 0;
}

/* 1. Portada: el planeta en el centro, la localidad detrás en letras monumentales
      (se dibuja en la escena 3D) y el titular con la llamada a la acción abajo. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 120px 0 clamp(34px, 6vh, 64px);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 30% 0 0 0;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(5, 5, 7, 0.88), rgba(5, 5, 7, 0.55) 55%, transparent 100%),
    linear-gradient(0deg, rgba(5, 5, 7, 0.7), transparent 70%);
  pointer-events: none;
}
.hero__in {
  position: relative;
}
.hero__copy {
  display: grid;
  justify-items: center;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  text-shadow: 0 2px 30px rgba(5, 5, 7, 0.75);
}
/* La portada entra con CSS puro: el titular se pinta desde el primer instante (LCP). */
.hero__copy > * {
  animation: entra 0.9s var(--ease) both;
}
.hero__copy > h1 {
  animation-name: sube;
}
.hero__copy > :nth-child(2) {
  animation-delay: 60ms;
}
.hero__copy > :nth-child(3) {
  animation-delay: 140ms;
}
.hero__copy > :nth-child(4) {
  animation-delay: 220ms;
}
.hero__copy > :nth-child(5) {
  animation-delay: 300ms;
}
@keyframes entra {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}
@keyframes sube {
  from {
    translate: 0 24px;
  }
}
h1 {
  font-size: clamp(2.8rem, 5.2vw, 4.9rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.hero__claim {
  margin-top: 18px;
  font: 500 clamp(1.1rem, 1.6vw, 1.4rem) / 1.2 var(--display);
  letter-spacing: -0.015em;
  color: var(--accent-soft);
}
.lead {
  margin-top: 14px;
  max-width: 500px;
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.5;
}
.quick {
  display: flex;
  gap: 8px;
  width: min(540px, 100%);
  margin-top: 26px;
  text-align: left;
  padding: 8px;
  border-radius: 16px;
  background: rgba(8, 12, 18, 0.88);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.quick:focus-within {
  border-color: var(--accent-border);
  box-shadow:
    0 0 0 4px var(--accent-ring),
    var(--shadow);
}
.quick input {
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  outline: 0;
  background: none;
  color: #fff;
  font: 400 1.08rem var(--text);
}
.quick input::placeholder,
.field input::placeholder {
  color: var(--ink-3);
}
/* 2. Medios */
.press {
  display: grid;
  gap: 18px;
  padding: 24px 0 26px;
  border-block: 1px solid var(--line);
  background: rgba(5, 5, 7, 0.8);
}
.press__title {
  text-align: center;
  font: 600 11px/1.35 var(--display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.press__mask {
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.press__track {
  --gap: clamp(28px, 4vw, 60px);
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;
  padding-right: var(--gap);
  animation: cinta 90s linear infinite;
}
.press__track li {
  flex: none;
}
/* Cada cabecera se pasa a blanco y se iguala su peso visual */
.press__track img {
  display: block;
  width: auto;
  height: 30px;
  filter: brightness(0) invert(1);
  opacity: 0.78;
}
.press__track .press__la7 {
  height: 44px;
}
.press__track .press__cope {
  height: 32px;
}
.press__track .press__md {
  height: 40px;
}
.press__track .press__mc {
  height: 26px;
}
.press__track .press__me {
  height: 24px;
}
.press__track .press__lo {
  height: 30px;
}
.press__track .press__ser {
  height: 32px;
}
.press__track .press__ee {
  height: 34px;
}
.press__track .press__mp {
  height: 26px;
}
.press__track .press__el {
  height: 46px;
}
.press__track .press__mdo {
  height: 24px;
}
.press__track .press__ce {
  height: 17px;
}
.press:hover .press__track {
  animation-play-state: paused;
}
@keyframes cinta {
  to {
    transform: translateX(-50%);
  }
}

/* 3. Cifras */
.figures {
  padding: clamp(60px, 9vw, 120px) 0 clamp(20px, 4vw, 60px);
}
.figures__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px clamp(20px, 3vw, 48px);
}
.fig {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
}
/* Una línea de luz recorre el borde mientras gira el marcador */
.fig::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, #fff, var(--accent-hover));
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 1.5s var(--ease) calc(var(--i, 0) * 85ms);
}
.fig.is-in::before {
  transform: scaleX(1);
}

/* Marcador: cada dígito es una tira del 0 al 9 que rueda hasta su cifra */
.odo {
  display: inline-flex;
  align-items: flex-start;
  line-height: 1.06;
}
.odo__col {
  display: inline-block;
  height: 1.06em;
  overflow: hidden;
  /* Las cifras se desvanecen al entrar y salir por los bordes en vez de cortarse en seco */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.odo [data-c]::before {
  content: attr(data-c);
}
.odo [data-d]::before {
  content: attr(data-d);
}
/* Hasta que arranca, la tira no se ve: nunca se muestra una cifra que no sea la real */
.odo__strip {
  display: flex;
  flex-direction: column;
  opacity: 0;
  /* Arranca despacio, acelera poco y se posa con suavidad */
  transition:
    transform 1.3s cubic-bezier(0.45, 0.05, 0.15, 1) calc(var(--k, 0) * 60ms),
    opacity 0.45s ease calc(var(--k, 0) * 60ms);
}
.odo__strip span {
  display: block;
  height: 1.06em;
}
.odo.is-run .odo__strip {
  opacity: 1;
  transform: translateY(calc(var(--to) * -1.06em));
}
.fig dt {
  font: 500 clamp(3rem, 6.2vw, 5.4rem) / 0.95 var(--display);
  letter-spacing: -0.055em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fig dd {
  max-width: 25ch;
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.45;
}

/* 4. Bloque local: la sección avanza hacia la derecha mientras la Tierra gira detrás */
.story {
  position: relative;
  height: 420vh;
}
.story__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: clip;
}
.story__sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 50% at 50% 58%, rgba(5, 5, 7, 0.74), rgba(5, 5, 7, 0.4) 60%, transparent 100%);
  pointer-events: none;
}
.story__track {
  position: relative;
  display: flex;
  height: 100%;
  will-change: transform;
}
.panel {
  --d: 0;
  flex: 0 0 100vw;
  display: grid;
  place-items: center;
  padding: 110px var(--inset) 70px;
  perspective: 1200px;
}
/* Cada panel se enfoca al pasar por el centro: crece, se aclara y deja de estar girado */
.panel__in {
  display: grid;
  justify-items: center;
  max-width: 880px;
  text-align: center;
  opacity: calc(1 - min(1, max(var(--d), -1 * var(--d)) * 1.5));
  transform: translateY(8vh) rotateY(calc(var(--d) * -26deg)) scale(calc(1 - max(var(--d), -1 * var(--d)) * 0.16));
}
.panel h2 {
  max-width: 20ch;
  font-size: clamp(2.1rem, 4.2vw, 3.8rem);
  line-height: 1;
}
.panel__n {
  font: 600 clamp(5.4rem, 17vw, 16rem) / 0.86 var(--display);
  letter-spacing: -0.065em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 10px 80px rgba(5, 5, 7, 0.7);
}
.panel__who {
  order: -1;
  margin-bottom: clamp(14px, 2.4vh, 26px);
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(8, 12, 18, 0.8);
  font: 600 11px/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.panel__t {
  max-width: 34ch;
  margin-top: clamp(18px, 3vh, 34px);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.42;
  color: var(--ink);
  text-shadow: 0 2px 24px rgba(5, 5, 7, 0.9);
}
.story__bar {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 6vh, 56px);
  width: min(240px, 50vw);
  height: 2px;
  margin-left: calc(min(240px, 50vw) / -2);
  background: var(--line-2);
}
.story__bar span {
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.zones {
  padding: clamp(10px, 3vw, 40px) 0 clamp(60px, 8vw, 120px);
}
.tape {
  display: grid;
  gap: 0.08em;
  overflow-x: clip;
  padding: 0.3em var(--inset) 0.1em;
  font: 600 clamp(3.1rem, 8.6vw, 8rem) / 1.04 var(--display);
  letter-spacing: -0.045em;
}
.tape__line {
  display: flex;
  align-items: center;
  gap: 0.3em;
  width: max-content;
  white-space: nowrap;
  color: #fff;
  will-change: transform;
}
/* Al pasar el puntero, las letras cercanas se estiran hacia arriba y se encienden,
   y los isotipos giran sobre su eje como el de la cabecera. --f va de 0 a 1 según la cercanía. */
.tape .ch {
  --f: 0;
  display: inline-block;
  transform-origin: 50% 88%;
  transform: scaleY(calc(1 + var(--f) * 0.62)) scaleX(calc(1 - var(--f) * 0.07));
  color: color-mix(in srgb, #fff, #8fb8ff calc(var(--f) * 85%));
  text-shadow: 0 0 calc(var(--f) * 0.55em) rgba(70, 135, 255, calc(var(--f) * 0.95));
  transition:
    transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1),
    color 0.5s,
    text-shadow 0.5s;
}
.tape__line svg {
  --f: 0;
  flex: none;
  width: 0.4em;
  height: 0.42em;
  fill: #fff;
  transform: perspective(600px) rotateY(calc(var(--f) * 360deg)) scale(calc(1 + var(--f) * 0.5));
  filter: drop-shadow(0 0 calc(var(--f) * 0.4em) rgba(70, 135, 255, calc(var(--f) * 0.95)));
  transition:
    transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1),
    filter 0.5s;
}
/* Localidades cercanas: una sola línea tipográfica, centrada */
.near {
  margin-top: clamp(50px, 7vw, 100px);
  text-align: center;
}
.near__label {
  font: 600 11px/1.3 var(--display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.near__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2em 1.1em;
  max-width: 900px;
  margin: 22px auto 0;
  font: 600 clamp(1.5rem, 3vw, 2.5rem) / 1.25 var(--display);
  letter-spacing: -0.035em;
}
.near__list a {
  position: relative;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s;
}
.near__list a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--accent-hover);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.45s var(--ease);
}
.near__list a:hover::after {
  transform: scaleX(1);
}
.near__list a:hover {
  color: #fff;
}

.near__all {
  margin-top: 30px;
}
.near__all a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 0.82rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.3s;
}
.near__all svg {
  width: 30px;
  height: 18px;
  transition: translate 0.45s var(--ease);
}
.near__all a:hover {
  color: #fff;
}
.near__all a:hover svg {
  translate: 6px 0;
}

/* Bloque local: datos reales de la localidad, mapa propio y tres sectores de ejemplo.
   El velo oscuro deja leer el texto mientras el planeta pasa por detrás. */
.local {
  margin-top: clamp(50px, 7vw, 100px);
  padding: clamp(60px, 8vw, 110px) 0;
  background: linear-gradient(180deg, rgba(5, 5, 7, 0), rgba(5, 5, 7, 0.88) 16%, rgba(5, 5, 7, 0.88) 84%, rgba(5, 5, 7, 0));
}
.local__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(46px, 6vw, 90px) clamp(34px, 5vw, 80px);
}
.local__copy p {
  max-width: 56ch;
  margin-top: 16px;
  font-size: 1.1rem;
  line-height: 1.6;
}
.local__copy h2 + p {
  margin-top: 24px;
  color: var(--ink);
}
.local__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 40px);
  margin-top: 34px;
}
.local__facts div {
  padding: 15px 0 17px;
  border-top: 1px solid var(--line-2);
}
.local__facts div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.local__facts dt {
  font: 600 11px/1.3 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.local__facts dd {
  margin-top: 7px;
  font: 600 clamp(1.15rem, 1.7vw, 1.5rem) / 1.15 var(--display);
  letter-spacing: -0.025em;
  color: #fff;
}
.local__copy .local__src {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font-size: 0.82rem;
  color: var(--ink-3);
}
.local__map {
  position: relative;
}
.local__map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
}
/* Nombre de la localidad junto a su marca. main.js lo coloca con data-x / data-y. */
.local__pin {
  position: absolute;
  left: 0;
  top: 0;
  translate: 22px -50%;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.8s 0.3s;
}
.local__pin.is-set {
  opacity: 1;
}
.local__pin--left {
  translate: calc(-100% - 22px) -50%;
}
.local__pin b {
  font: 600 clamp(0.95rem, 1.5vw, 1.3rem) / 1 var(--display);
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 0 18px #050507, 0 0 8px #050507;
}
.local__pin i {
  position: absolute;
  left: -22px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px;
  border-radius: 50%;
  animation: pin 2.6s ease-out infinite;
}
.local__pin--left i {
  left: auto;
  right: -22px;
}
@keyframes pin {
  from {
    box-shadow: 0 0 0 0 rgba(58, 125, 255, 0.75);
  }
  to {
    box-shadow: 0 0 0 30px rgba(58, 125, 255, 0);
  }
}
.local__sectors {
  grid-column: 1 / -1;
}
.local__sectors ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(26px, 4vw, 60px);
  margin-top: 24px;
}
.local__sectors li {
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
}
.local__sectors h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.local__sectors li p {
  margin-top: 12px;
  font-size: 1.03rem;
  line-height: 1.55;
}

/* Página general del país: todas las localidades, por comunidad */
.near--all {
  text-align: left;
}
.dir {
  columns: 3;
  column-gap: clamp(30px, 5vw, 70px);
  margin-top: 26px;
}
.dir section {
  break-inside: avoid;
  padding: 18px 0 22px;
  border-top: 1px solid var(--line-2);
}
.dir h3 {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.dir p {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.55;
}
.dir a {
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.25s;
}
.dir a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Páginas legales: solo texto, con la cabecera fija y opaca (no llevan escena 3D ni JS) */
.legal-page .hdr {
  background: rgba(5, 5, 7, 0.94);
  border-bottom-color: var(--line);
}
.legal-page .nav {
  margin-left: auto;
}
.legal {
  max-width: 800px;
  padding: clamp(120px, 14vw, 170px) 0 clamp(70px, 9vw, 120px);
}
.legal h1 {
  font-size: clamp(2.3rem, 5.4vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.legal h2 {
  margin-top: 48px;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.legal h3 {
  margin-top: 30px;
  font-size: 1.12rem;
}
.legal p,
.legal ul,
.legal ol {
  max-width: 70ch;
  margin-top: 14px;
}
.legal ul,
.legal ol {
  padding-left: 1.3em;
  list-style: disc;
}
.legal ol {
  list-style: decimal;
}
.legal li + li {
  margin-top: 6px;
}
.legal p a,
.legal li a {
  color: var(--accent-soft);
  text-underline-offset: 3px;
}
.legal .legal__date {
  font: 500 0.85rem/1.4 var(--display);
  color: var(--ink-3);
}
.legal__others {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
  font: 500 0.92rem/1.4 var(--display);
}
.legal__others a {
  text-decoration: none;
  color: var(--ink-2);
}
.legal__others a:hover {
  color: #fff;
}

/* Aviso de cookies: una placa abajo a la izquierda, como en la web principal. Mientras está
   abierto se retira la barra fija de la llamada a la acción para que no se pisen. */
.consent {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 70;
  width: min(480px, calc(100vw - 36px));
  color: #fff;
  font-family: var(--display);
}
.consent[hidden] {
  display: none;
}
.consent__plate {
  padding: 14px 18px 16px;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  background: rgba(8, 12, 18, 0.96);
  box-shadow: var(--shadow);
  animation: consent-in 0.5s var(--ease) 0.6s backwards;
}
@keyframes consent-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
.consent__label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.consent__text {
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.consent__btn {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font: 500 0.82rem/1 var(--display);
  letter-spacing: 0.01em;
  color: #fff;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.consent__btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(220, 230, 245, 0.3);
}
.consent__link,
.ftr__btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.consent__link {
  min-height: 44px;
  margin-left: auto;
  padding: 0 2px;
  font-size: 0.78rem;
  color: var(--ink-3);
  transition: color 0.2s;
}
.consent__link:hover {
  color: #fff;
}
.ftr__cols .ftr__btn {
  text-align: left;
  color: var(--ink-2);
  transition: color 0.25s;
}
.ftr__cols .ftr__btn:hover {
  color: #fff;
}
.consent-open .dock {
  opacity: 0;
  pointer-events: none;
}

/* Cuadro de preferencias de cookies */
.cookies {
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100svh - 28px);
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--glass-heavy);
  color: var(--ink-2);
  box-shadow: var(--shadow);
  overflow: auto;
}
.cookies::backdrop {
  background: rgba(3, 4, 7, 0.72);
}
.cookies__in {
  position: relative;
  padding: clamp(22px, 4vw, 34px);
}
.cookies__close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: 400 0.95rem/1 var(--display);
  cursor: pointer;
}
.cookies__title {
  padding-right: 44px;
  font: 600 clamp(1.4rem, 3vw, 1.8rem) / 1.1 var(--display);
  letter-spacing: -0.03em;
  color: #fff;
}
.cookies__intro {
  margin-top: 10px;
  font-size: 0.98rem;
  line-height: 1.5;
}
.cookies__list {
  margin-top: 20px;
}
.cookies__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--line-2);
}
label.cookies__row {
  cursor: pointer;
}
.cookies__about {
  display: grid;
  gap: 4px;
  font-size: 0.92rem;
  line-height: 1.45;
}
.cookies__about b {
  font: 600 1rem/1.2 var(--display);
  color: #fff;
}
.cookies__always {
  flex: none;
  font: 600 11px/1.3 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Interruptor propio: la casilla real queda oculta pero sigue siendo la que recibe el foco */
.cookies__check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.cookies__switch {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.25s;
}
.cookies__switch::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: translate 0.25s var(--ease);
}
.cookies__check:checked + .cookies__switch {
  background: var(--accent);
}
.cookies__check:checked + .cookies__switch::after {
  translate: 20px 0;
}
.cookies__check:focus-visible + .cookies__switch {
  outline: 2px solid rgba(120, 170, 255, 0.9);
  outline-offset: 3px;
}
.cookies__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
}
.cookies__policy {
  font: 500 0.88rem/1.3 var(--display);
  color: var(--ink-2);
  text-underline-offset: 3px;
}
.legal .legal__note {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.legal__others .ftr__btn {
  color: var(--ink-2);
}
.legal__others .ftr__btn:hover {
  color: #fff;
}

/* Ruta de la página, al principio del pie */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: clamp(28px, 4vw, 46px);
  font: 500 0.8rem/1.4 var(--display);
  color: var(--ink-3);
}
.crumbs li + li::before {
  content: '/';
  margin-right: 10px;
  opacity: 0.5;
}
.crumbs a {
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.25s;
}
.crumbs a:hover {
  color: #fff;
}
.crumbs [aria-current] {
  color: #fff;
}

/* 5. Qué incluye: índice editorial, sin iconos ni cajas */
.index {
  max-width: min(780px, 64%);
  margin-top: clamp(40px, 5vw, 70px);
}
.index__row {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  padding: 24px 0 26px;
  border-top: 1px solid var(--line-2);
  opacity: 0.4;
  transition: opacity 0.45s;
}
.index__row:last-child {
  border-bottom: 1px solid var(--line-2);
}
.index__row::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.8s var(--ease);
}
.index__row.is-on,
.index__row:hover {
  opacity: 1;
}
.index__row.is-on::before {
  transform: scaleX(1);
}
.index__n {
  grid-row: 1 / span 2;
  padding-top: 0.75em;
  font: 600 12px/1 var(--display);
  letter-spacing: 0.14em;
  color: var(--ink-3);
  transition: color 0.4s;
}
.index__row.is-on .index__n {
  color: #7fb0ff;
}
.index__row h3 {
  font-size: clamp(1.55rem, 2.9vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  transition: translate 0.5s var(--ease);
}
.index__row.is-on h3 {
  translate: 10px 0;
}
.index__row p {
  grid-column: 2;
  max-width: 48ch;
  margin-top: 10px;
  font-size: 1.05rem;
  line-height: 1.5;
}

/* 6. Página de resultados en 3D */
.serp {
  position: relative;
  height: 260vh;
}
.serp__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: clip;
}
.serp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.serp__copy h2 {
  font-size: clamp(1.9rem, 3.1vw, 2.7rem);
}
.serp__steps {
  display: grid;
  margin-top: 28px;
  counter-reset: paso;
}
.serp__steps li {
  position: relative;
  padding: 11px 0 11px 46px;
  font-size: 1.06rem;
  color: var(--ink-3);
  counter-increment: paso;
  transition: color 0.45s;
}
.serp__steps li::before {
  content: '0' counter(paso);
  position: absolute;
  left: 0;
  top: 17px;
  font: 600 11px/1 var(--display);
  letter-spacing: 0.14em;
}
.serp__steps li.is-on {
  color: var(--ink);
}
.serp__steps li.is-on::before {
  color: #6fa0ff;
}
.serp__stage {
  --p: 0;
  position: relative;
  perspective: 1500px;
}
.serp__panel {
  --h: clamp(68px, 8.4vh, 76px);
  position: relative;
  margin: 0 7% 0 3%;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  color: #202124;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow:
    0 60px 130px rgba(0, 0, 0, 0.75),
    0 0 140px rgba(28, 103, 255, 0.28);
  transform: rotateY(calc(-21deg + var(--p) * 13deg)) rotateX(calc(9deg - var(--p) * 5deg));
  transform-style: preserve-3d;
}
/* Reflejo que cruza la ventana conforme gira */
.serp__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent calc(var(--p) * 130% - 40%),
    rgba(255, 255, 255, 0.5) calc(var(--p) * 130% - 28%),
    transparent calc(var(--p) * 130% - 16%)
  );
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.serp__logo {
  display: block;
  width: auto;
  height: clamp(26px, 3.6vh, 34px);
  margin: 4px auto 14px;
}
.serp__body {
  padding: 14px 22px 0;
}
.serp__bar {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: min(100%, 520px);
  margin: 0 auto;
  height: 44px;
  padding: 0 18px 0 16px;
  border-radius: 999px;
  border: 1px solid #dfe1e5;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.18);
  font-size: 15px;
}
.serp__bar span {
  overflow: hidden;
  white-space: nowrap;
}
.serp__bar span::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 2px;
  background: #202124;
  vertical-align: -0.16em;
  animation: cursor 1s steps(2) infinite;
}
@keyframes cursor {
  50% {
    opacity: 0;
  }
}
.serp__bar svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: #9aa0a6;
}
.serp__tabs {
  display: flex;
  gap: 22px;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 12px;
  padding: 0 6px;
  border-bottom: 1px solid #ebebeb;
  font-size: 12.5px;
  line-height: 1;
  color: #5f6368;
}
.serp__tabs > * {
  padding-bottom: 9px;
}
.serp__tabs b {
  margin-bottom: -1px;
  border-bottom: 3px solid #1a73e8;
  font-weight: 400;
  color: #1a73e8;
}
/* La lista es más larga que la ventana: se desplaza para seguir a «Tu empresa» mientras sube */
.serp__view {
  height: calc(var(--h) * 5.45);
  margin: 0 -22px;
  padding: 10px 22px 0;
  overflow: hidden;
}
.serp__list {
  --first: 0;
  --extra: 0px;
  position: relative;
  height: calc(var(--h) * 14);
  transform: translateY(calc(var(--first) * var(--h) * -1));
  transition: transform 0.8s cubic-bezier(0.3, 0.8, 0.2, 1);
}
.serp__row {
  --slot: 0;
  --shift: 0;
  position: absolute;
  inset: 0 0 auto 0;
  min-height: calc(var(--h) - 6px);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 12px 4px 0;
  border-radius: 12px;
  transform: translateY(calc(var(--slot) * var(--h) + var(--shift) * var(--extra)));
  transition: transform 0.8s cubic-bezier(0.3, 0.8, 0.2, 1);
}
.serp__pos {
  flex: none;
  width: 22px;
  padding-top: 7px;
  text-align: right;
  font: 600 11px/1 var(--display);
  color: #9aa0a6;
  font-variant-numeric: tabular-nums;
}
.serp__res {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.serp__site {
  display: flex;
  align-items: center;
  gap: 8px;
}
.serp__site em {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c, #1a73e8);
  color: #fff;
  font: 700 10px/1 Arial, sans-serif;
  font-style: normal;
}
.serp__site > span {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}
.serp__site b {
  font-weight: 400;
  font-size: 11.5px;
  color: #202124;
}
.serp__site small {
  font-size: 10px;
  color: #4d5156;
}
.serp__title {
  overflow: hidden;
  font-size: 15.5px;
  line-height: 1.2;
  color: #1a0dab;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.serp__snip {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.25;
  color: #4d5156;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Mientras se escribe la búsqueda, los resultados «cargan» */
.serp__panel.is-loading .serp__title,
.serp__panel.is-loading .serp__snip {
  width: 68%;
  border-radius: 5px;
  color: transparent;
  background: linear-gradient(90deg, #eceef1 25%, #f7f8fa 45%, #eceef1 65%) 0 0 / 300% 100%;
  animation: cargando 1.1s linear infinite;
}
.serp__panel.is-loading .serp__snip {
  width: 88%;
}
@keyframes cargando {
  to {
    background-position: -300% 0;
  }
}
.serp__row--you {
  z-index: 2;
  padding-left: 0;
  background: #fff;
  box-shadow:
    0 0 0 2px #1a73e8,
    0 18px 50px rgba(26, 115, 232, 0.5);
  transform-origin: 50% 0;
  transform: translateY(calc(var(--slot) * var(--h))) translateZ(54px) scale(1.03);
}
.serp__row--you .serp__pos {
  color: #1a73e8;
}
.serp__row--you .serp__site em {
  background: #1a73e8;
}
/* Al entrar entre los tres primeros aparecen las estrellas; en el primero, los enlaces */
.serp__rate,
.serp__links {
  display: flex;
  align-items: center;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 11px;
  color: #4d5156;
  transition:
    max-height 0.6s var(--ease),
    opacity 0.5s 0.15s;
}
.serp__rate i {
  font-style: normal;
}
.serp__stars {
  letter-spacing: 1px;
  color: #fbbc04;
}
.serp__links {
  gap: 16px;
  padding-top: 2px;
}
.serp__links b {
  font-weight: 400;
  font-size: 12.5px;
  color: #1a0dab;
}
.serp__stage.is-top .serp__rate,
.serp__stage.is-first .serp__links {
  max-height: 22px;
  opacity: 1;
}
/* En el primer puesto un cursor llega al resultado y hace clic */
.serp__cursor {
  position: absolute;
  right: 22%;
  top: 46%;
  width: 26px;
  height: 26px;
  fill: #111;
  stroke: #fff;
  stroke-width: 1.4;
  opacity: 0;
  transform: translate(150px, 130px);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}
.serp__stage.is-first .serp__cursor {
  animation: llega 2.6s var(--ease) 0.5s forwards;
}
@keyframes llega {
  0% {
    opacity: 0;
    transform: translate(150px, 130px);
  }
  18% {
    opacity: 1;
  }
  62% {
    transform: translate(0, 0);
  }
  70% {
    transform: translate(0, 0) scale(0.78);
  }
  80%,
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
.serp__row--you::after {
  content: '';
  position: absolute;
  right: calc(22% + 6px);
  top: calc(46% - 6px);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #1a73e8;
  opacity: 0;
  pointer-events: none;
}
.serp__stage.is-first .serp__row--you::after {
  animation: clic 0.9s ease-out 2.3s;
}
@keyframes clic {
  0% {
    opacity: 0.9;
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
    transform: scale(4.5);
  }
}
.serp__stage.is-first .serp__title {
  text-decoration: underline;
  text-decoration-color: transparent;
  animation: subraya 0.3s 2.3s forwards;
}
.serp__row:not(.serp__row--you) .serp__title {
  animation: none;
  text-decoration: none;
}
@keyframes subraya {
  to {
    text-decoration-color: currentColor;
  }
}
.serp__badge,
.serp__chart {
  position: absolute;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(10, 15, 24, 0.92);
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.serp__badge span,
.serp__chart span {
  display: block;
  font: 600 10.5px/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.serp__badge {
  right: -3%;
  top: 3%;
  min-width: 118px;
  transform: translate3d(calc(var(--p) * -10px), calc(var(--p) * -34px), 110px) rotateY(-10deg);
}
.serp__badge b {
  display: block;
  margin-top: 8px;
  font: 600 3.4rem/0.9 var(--display);
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.serp__badge em {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font: 600 10px/1 var(--display);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition:
    background 0.5s,
    color 0.5s;
}
.serp__badge {
  transition:
    background 0.6s,
    border-color 0.6s,
    box-shadow 0.6s;
}
.serp__stage.is-first .serp__badge {
  background: linear-gradient(140deg, #1c67ff, #0f3fb0);
  border-color: rgba(170, 200, 255, 0.6);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(28, 103, 255, 0.7);
}
.serp__stage.is-first .serp__badge span,
.serp__stage.is-first .serp__badge em {
  color: #fff;
}
.serp__stage.is-first .serp__badge em {
  background: rgba(255, 255, 255, 0.2);
}
.serp__stage.is-first .serp__badge b::before {
  color: #cfe0ff;
}
/* La cifra da un pequeño salto cada vez que cambia */
.serp__badge b.is-tick {
  animation: salto 0.45s var(--ease);
}
@keyframes salto {
  0% {
    transform: translateY(0.35em);
    opacity: 0.2;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.serp__badge b::before {
  content: '#';
  margin-right: 2px;
  font-size: 0.5em;
  vertical-align: 0.5em;
  color: #6fa0ff;
}
.serp__chart {
  left: -5%;
  bottom: -92px;
  width: 230px;
  transform: translate3d(calc(var(--p) * 12px), calc(var(--p) * -22px), 80px) rotateY(-14deg);
}
.serp__chart svg {
  width: 100%;
  height: 70px;
  margin-top: 12px;
  overflow: visible;
}
.serp__chart path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.serp__chart .base {
  stroke: rgba(255, 255, 255, 0.1);
}
.serp__chart .line {
  stroke: #4d8bff;
  filter: drop-shadow(0 0 8px rgba(28, 103, 255, 0.9));
}

/* Demostración de GEO: dentro de la misma ventana 3D, una conversación de ChatGPT (su barra con
   el nombre, la pregunta en una burbuja a la derecha, la respuesta en texto corrido y la caja de
   escribir abajo). Con el scroll, «Tu empresa» pasa de no aparecer a ser la primera recomendación. */
.serp__badge--plain b::before {
  content: none;
}
.serp__panel.ai {
  display: flex;
  flex-direction: column;
  height: clamp(430px, 62vh, 540px);
  /* Hueco para que la insignia flotante solo pise la barra superior, no la pregunta */
  margin-top: 64px;
  font-family: ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #0d0d0d;
}
.serp__panel.ai ~ .serp__badge {
  top: 0;
}
.ai__top {
  flex: none;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 18px;
}
.ai__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ai__brand svg {
  width: 20px;
  height: 20px;
  fill: #0d0d0d;
}
.ai__brand i {
  width: 7px;
  height: 7px;
  margin: -4px 0 0 1px;
  border-right: 1.5px solid #8f8f8f;
  border-bottom: 1.5px solid #8f8f8f;
  transform: rotate(45deg);
}
.ai__chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 8px 22px 6px;
  overflow: hidden;
  /* Si la respuesta no cabe, se desvanece por abajo como una conversación que sigue */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 30px), transparent);
}
@media (max-height: 840px) {
  .ai__more {
    display: none;
  }
}
.ai__ask {
  align-self: flex-end;
  max-width: 80%;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 20px;
  background: #f4f4f4;
  font-size: 14.5px;
  line-height: 1.45;
}
.ai__ask span::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 2px;
  background: #0d0d0d;
  vertical-align: -0.16em;
  animation: cursor 1s steps(2) infinite;
}
.ai__text {
  font-size: 14px;
  line-height: 1.55;
}
.ai__text b {
  font-weight: 600;
}
.ai__w {
  display: inline-block;
  white-space: pre;
  animation: ai-palabra 0.3s both;
  animation-delay: calc(var(--k) * 24ms);
}
@keyframes ai-palabra {
  from {
    opacity: 0;
  }
}
.ai__list {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding-left: 24px;
  list-style: decimal;
}
.ai__list li,
.ai__more,
.ai__sources {
  animation: ai-fila 0.45s var(--ease) both;
  animation-delay: calc(var(--at) * 1ms);
}
@keyframes ai-fila {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.ai__list li {
  margin-left: -8px;
  padding: 4px 8px;
  border-radius: 10px;
}
.ai__pill {
  display: inline-block;
  margin-left: 4px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f4f4f4;
  font-size: 11px;
  line-height: 1.7;
  color: #5d5d5d;
  vertical-align: 1px;
  white-space: nowrap;
}
/* «Tu empresa» va subrayada con el azul de la marca para que se la vea subir */
.ai__list li.is-you {
  background: #e8f0ff;
  box-shadow:
    0 0 0 1.5px #1c67ff,
    0 10px 30px rgba(28, 103, 255, 0.3);
  animation-name: ai-tu;
  animation-duration: 0.75s;
}
@keyframes ai-tu {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  60% {
    transform: translateY(0) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.ai__list li.is-you .ai__pill {
  background: #1c67ff;
  color: #fff;
}
.ai__more {
  margin-top: 10px;
}
.ai__sources {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: #8f8f8f;
}
.ai__sources svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ai__src {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  font-size: 12px;
  color: #5d5d5d;
}
.ai__src i {
  width: 12px;
  height: 12px;
  margin-right: -8px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: #c4c8cf;
}
.ai__src i:nth-child(2) {
  background: #8f8f8f;
}
.ai__src i:nth-child(3) {
  margin-right: 0;
  background: #5d5d5d;
}
.ai__src i.is-you {
  background: #1c67ff;
}
/* Mientras «piensa», un punto que late, como en la aplicación */
.ai__dots {
  display: none;
  padding: 6px 0;
}
.ai__dots i {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0d0d0d;
  animation: ai-late 1s ease-in-out infinite;
}
@keyframes ai-late {
  0%,
  100% {
    transform: scale(0.7);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}
.ai.is-thinking .ai__dots {
  display: block;
}
.ai.is-thinking .ai__lead,
.ai.is-thinking .ai__list,
.ai.is-thinking .ai__more,
.ai.is-thinking .ai__sources {
  display: none;
}
.ai__composer {
  flex: none;
  padding: 0 16px 10px;
}
.ai__input {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 9px 0 16px;
  border-radius: 26px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  font-size: 14.5px;
  color: #8f8f8f;
}
.ai__input b {
  font-size: 21px;
  font-weight: 300;
  line-height: 1;
  color: #5d5d5d;
}
.ai__input span {
  flex: 1;
}
.ai__input i {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0d0d0d;
}
.ai__input i::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 54%;
  width: 8px;
  height: 8px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: translate(-50%, -30%) rotate(45deg);
}
.ai__legal {
  margin-top: 7px;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.3;
  color: #8f8f8f;
}

.serp--long {
  height: 400vh;
}
/* Demostración de diseño web: dentro de la ventana 3D, la misma empresa antes y después.
   Debajo está la web a medida (.wd__new) y encima la de plantilla (.wd__old), que se recorta con
   --w (0 a 1) según avanza la cortina. Después --s (0 a 1) desplaza la web nueva por dentro. */
.serp__panel.wd {
  --w: 0;
  --y: 0;
  --g: 0;
  --gn: 0;
  --t: 0;
  --z: 1.16;
  display: flex;
  flex-direction: column;
  height: clamp(420px, 64vh, 560px);
  margin-top: 56px;
  background: #f6f4ef;
}
.serp__panel.wd ~ .serp__badge {
  top: 0;
}
.serp__panel.wd ~ .serp__chart {
  left: auto;
  right: -4%;
}
.wd__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: #e9ebef;
  border-bottom: 1px solid #d9dce1;
}
.wd__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c4c8cf;
}
.wd__bar span {
  margin: 0 auto;
  padding: 3px 18px;
  border-radius: 999px;
  background: #fff;
  font: 500 10.5px/1.5 Arial, Helvetica, sans-serif;
  color: #5f6368;
}
.wd__view {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.wd__new,
.wd__old {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* --- Antes: la plantilla que tiene medio mundo --- */
.wd__old {
  display: flex;
  flex-direction: column;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  color: #444;
  clip-path: inset(0 0 0 calc(var(--w) * 100%));
}
.o__top {
  padding: 4px 14px;
  background: #1f3f7a;
  font-size: 8.5px;
  text-align: right;
  color: #cfd8ea;
}
.o__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 3px solid #2a5db0;
}
.o__head b {
  font: 700 16px 'Times New Roman', Times, serif;
  letter-spacing: 0.5px;
  color: #2a5db0;
  white-space: nowrap;
}
.o__head span {
  font-size: 9px;
  color: #2a5db0;
  white-space: nowrap;
  overflow: hidden;
}
.o__hero {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  min-height: 0;
  padding: 10px;
  text-align: center;
  background:
    linear-gradient(rgba(20, 30, 50, 0.35), rgba(20, 30, 50, 0.35)),
    radial-gradient(60% 80% at 30% 20%, #b9c4d2, transparent), linear-gradient(135deg, #8d99a8, #6f7c8c);
}
.o__hero p {
  max-width: 15ch;
  font: 700 clamp(15px, 1.7vw, 21px) / 1.15 Arial, Helvetica, sans-serif;
  color: #fff;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}
.o__hero span {
  padding: 6px 16px;
  border-radius: 3px;
  border: 1px solid #1f3f7a;
  background: linear-gradient(#6a9be6, #2a5db0);
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
}
.o__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px;
  text-align: center;
}
.o__cols i {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: #2a5db0;
  box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 30px #2a5db0, 0 0 0 2px #2a5db0;
}
.o__cols b {
  display: block;
  font-size: 10.5px;
  text-decoration: underline;
  color: #2a5db0;
}
.o__cols span {
  display: block;
  margin-top: 4px;
  font-size: 8.5px;
  line-height: 1.35;
  color: #777;
}

/* --- Después: la web del estudio de arquitectura. Minimalista, fotografía a toda pantalla y todo
   medido en unidades de la propia ventana (cqw/cqh) para que sea una web en miniatura.
   Variables que mueve main.js: --y desplazamiento vertical, --g avance de la galería (px),
   --gn el mismo avance de 0 a 1, --t texto iluminado (0 a 1), --z ampliación de la portada. --- */
.wd__view {
  container-type: size;
}
.wd__new {
  background: #f3f1ec;
  font-family: var(--display);
  color: #111;
}
.wd__scroll {
  transform: translate3d(0, calc(var(--y) * -1px), 0);
  will-change: transform;
}
.a__hero,
.a__work,
.a__end {
  position: relative;
  height: 100cqh;
  overflow: hidden;
}
/* Las fotos de fondo van más despacio que la página y la de portada se asienta al entrar */
.a__photo {
  position: absolute;
  inset: -10% 0 auto 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--y) * 0.28px), 0) scale(var(--z));
  will-change: transform;
}
.a__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 20, 0.34), rgba(8, 12, 20, 0) 30%, rgba(8, 12, 20, 0) 50%, rgba(8, 12, 20, 0.62));
}
.a__nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4cqw;
  padding: 4.4cqw 5cqw;
  font-size: max(7px, 2cqw);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.a__nav b {
  margin-right: auto;
  font-weight: 600;
  letter-spacing: 0.24em;
}
.a__h {
  position: absolute;
  left: 5cqw;
  bottom: 13cqw;
  z-index: 2;
  font: 400 9.4cqw/0.98 var(--display);
  letter-spacing: -0.045em;
  color: #fff;
}
.a__h span {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.a__h i {
  display: block;
  font-style: normal;
  translate: 0 112%;
  transition: translate 1.1s var(--ease);
}
.a__h span:nth-child(2) i {
  transition-delay: 0.1s;
}
.a__h span:nth-child(3) i {
  transition-delay: 0.2s;
}
.wd.is-live .a__h i {
  translate: 0 0;
}
.a__cap {
  position: absolute;
  inset: auto 5cqw 4.6cqw 5cqw;
  z-index: 2;
  display: flex;
  gap: 3cqw;
  padding-top: 2.4cqw;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  font-size: max(7px, 2cqw);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.a__cap span:last-child {
  margin-left: auto;
}
.a__say {
  padding: 13cqw 5cqw 11cqw;
}
.a__label {
  font-size: max(7px, 2cqw);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a867e;
}
.a__text {
  margin-top: 5cqw;
  font: 400 6.7cqw/1.1 var(--display);
  letter-spacing: -0.04em;
}
/* El texto se va iluminando palabra a palabra con el scroll */
.a__text span {
  opacity: clamp(0.14, calc(var(--t) * (var(--n, 20) + 3) - var(--i, 0)), 1);
  transition: opacity 0.3s linear;
}
.a__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 9cqw;
  padding-top: 4cqw;
  border-top: 1px solid #d9d5cc;
}
.a__meta b {
  display: block;
  font: 400 8.4cqw/1 var(--display);
  letter-spacing: -0.045em;
}
.a__meta span {
  display: block;
  margin-top: 1.4cqw;
  font-size: max(7px, 2cqw);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a867e;
}
/* Galería de proyectos: la página se detiene y las obras pasan de lado */
.a__work {
  display: flex;
  flex-direction: column;
  padding: 6cqw 0 5cqw;
}
.a__head {
  display: flex;
  justify-content: space-between;
  padding: 0 5cqw;
}
.a__head b {
  font-weight: 500;
  color: #111;
}
.a__track {
  flex: 1;
  display: flex;
  gap: 3cqw;
  width: max-content;
  min-height: 0;
  padding: 4cqw 5cqw 0;
  transform: translate3d(calc(var(--g) * -1px), 0, 0);
  will-change: transform;
}
.a__card {
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
  width: 60cqw;
}
.a__frame {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* Cada foto se desliza dentro de su marco en sentido contrario al de la galería */
.a__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(calc((var(--gn) - 0.5) * 9%), 0, 0) scale(1.2);
  will-change: transform;
}
.a__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.8cqw 2cqw;
  font-size: max(9px, 3.1cqw);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.a__name b {
  font-size: max(7px, 2cqw);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #8a867e;
}
.a__name em {
  flex-basis: 100%;
  font-size: max(7px, 2cqw);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a867e;
}
/* El cursor a medida de la galería */
.a__cursor {
  position: absolute;
  left: 58%;
  top: 46%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 15cqw;
  height: 15cqw;
  border-radius: 50%;
  background: #111;
  font-size: max(7px, 2.1cqw);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  scale: 0;
  transition: scale 0.5s var(--ease);
}
.wd.is-gallery .a__cursor {
  scale: 1;
  animation: a-cursor 3.4s ease-in-out infinite;
}
@keyframes a-cursor {
  0%,
  100% {
    translate: 0 0;
  }
  35% {
    translate: -9cqw 5cqw;
  }
  70% {
    translate: 6cqw -4cqw;
  }
}
/* Cierre en oscuro */
.a__end {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4cqw;
  padding: 0 5cqw;
  color: #fff;
}
.a__end .a__photo {
  inset: auto 0 -10% 0;
  transform: translate3d(0, calc((var(--y) - var(--end, 0)) * 0.28px), 0) scale(1.05);
  filter: brightness(0.5);
}
.a__big,
.a__mail,
.a__btn {
  position: relative;
  opacity: 0;
  translate: 0 5cqw;
  transition:
    opacity 0.8s var(--ease),
    translate 1s var(--ease);
}
.a__big {
  max-width: 9ch;
  font: 400 10.4cqw/0.98 var(--display);
  letter-spacing: -0.05em;
}
.a__mail {
  padding-bottom: 1cqw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  font-size: max(9px, 3.4cqw);
  transition-delay: 0.12s;
}
.a__btn {
  padding: 2.6cqw 4.6cqw;
  border-radius: 999px;
  background: #fff;
  font-size: max(7px, 2.2cqw);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111;
  transition-delay: 0.24s;
}
.wd.is-end .a__big,
.wd.is-end .a__mail,
.wd.is-end .a__btn {
  opacity: 1;
  translate: 0 0;
}

/* --- La cortina entre una web y otra --- */
.wd__split {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--w) * 100%);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(20, 22, 26, 0.18),
    0 0 22px rgba(28, 103, 255, 0.8);
  opacity: 0;
  transition: opacity 0.4s;
}
.wd__split i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(28, 103, 255, 0.6);
}
.wd__split i::before,
.wd__split i::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.wd__split i::before {
  left: 8px;
  transform: rotate(45deg);
}
.wd__split i::after {
  right: 8px;
  transform: rotate(-135deg);
}
.wd__tag {
  position: absolute;
  top: 10px;
  z-index: 3;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(20, 22, 26, 0.82);
  font: 600 9px/1.3 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s;
}
.wd__tag--new {
  left: 10px;
  background: var(--accent);
}
.wd__tag--old {
  right: 10px;
}
.wd.is-wiping .wd__split,
.wd.is-wiping .wd__tag {
  opacity: 1;
}

/* --- Al llegar al cierre entra el aviso de una solicitud nueva --- */
.wd__toast {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: center;
  padding: 10px 13px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(20, 22, 26, 0.28);
  font-family: var(--display);
  color: #14161a;
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 0.5s,
    translate 0.7s cubic-bezier(0.3, 1.5, 0.4, 1);
}
.wd__toast i {
  grid-row: span 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22b455;
  box-shadow: 0 0 0 4px rgba(34, 180, 85, 0.2);
}
.wd__toast b {
  font-size: 10.5px;
  font-weight: 600;
}
.wd__toast small {
  font-size: 8.5px;
  color: #5a5f69;
}
.wd.is-end .wd__toast {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0.7s;
}

/* 7. Proceso: la sección queda fijada y los pasos se encienden del 1 al 4 */
.proc {
  position: relative;
  height: 280vh;
}
.proc__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}
.proc__line {
  --p: 0;
  position: relative;
  height: 1px;
  margin-top: 64px;
  background: var(--line-2);
}
.proc__line span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), #8fb4ff);
  box-shadow: 0 0 18px rgba(28, 103, 255, 0.9);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
/* La punta de la línea es un cometa: cabeza blanca y estela azul */
.proc__comet {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * 100%);
  width: 160px;
  height: 3px;
  margin: -1.5px 0 0 -160px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(110, 165, 255, 0.9) 70%, #fff);
  box-shadow: 0 0 18px 2px rgba(70, 135, 255, 0.85);
  opacity: 0;
  transition: opacity 0.4s;
}
.proc__comet::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 14px 4px rgba(150, 195, 255, 0.95),
    0 0 44px 12px rgba(40, 110, 255, 0.7);
}
.proc__line.is-moving .proc__comet {
  opacity: 1;
}
.proc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.step {
  position: relative;
  padding-top: 34px;
}
/* Nodo de cada paso sobre la línea */
.step::before {
  content: '';
  position: absolute;
  left: 0;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 5px rgba(28, 103, 255, 0.22);
  transition:
    transform 0.6s cubic-bezier(0.3, 1.9, 0.4, 1),
    background 0.4s,
    box-shadow 0.6s;
}
/* Onda expansiva que suelta el nodo cuando la línea llega a él */
.step::after {
  content: '';
  position: absolute;
  left: -1px;
  top: -6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid #9cc0ff;
  opacity: 0;
  pointer-events: none;
}
.step.is-on::before {
  transform: scale(1.5);
  background: #fff;
  box-shadow:
    0 0 0 5px rgba(28, 103, 255, 0.5),
    0 0 26px 6px rgba(70, 135, 255, 0.95);
}
.step.is-on::after {
  animation: onda 1.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes onda {
  0% {
    transform: scale(1);
    opacity: 0.95;
    box-shadow: 0 0 0 0 rgba(120, 170, 255, 0.5);
  }
  100% {
    transform: scale(13);
    opacity: 0;
    box-shadow: 0 0 0 6px rgba(120, 170, 255, 0);
  }
}
/* La cifra espera en contorno y se llena de blanco de abajo arriba, crece y destella */
.step__n {
  display: inline-block;
  transform-origin: 0 100%;
  font: 500 clamp(2.8rem, 5vw, 4.4rem) / 1 var(--display);
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
  background: linear-gradient(0deg, #fff 50%, transparent 50%) 0 0 / 100% 200% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  scale: 0.86;
  transition:
    background-position 0.95s cubic-bezier(0.2, 0.8, 0.2, 1),
    -webkit-text-stroke-color 0.6s,
    scale 0.8s cubic-bezier(0.3, 1.7, 0.4, 1);
}
.step.is-on .step__n {
  background-position: 0 100%;
  -webkit-text-stroke-color: #fff;
  scale: 1;
  animation: destello 1.3s ease-out;
}
@keyframes destello {
  0% {
    filter: drop-shadow(0 0 0 rgba(90, 150, 255, 0));
  }
  30% {
    filter: drop-shadow(0 0 26px rgba(110, 170, 255, 1));
  }
  100% {
    filter: drop-shadow(0 0 0 rgba(90, 150, 255, 0));
  }
}
/* Un hilo de luz baja del nodo a la cifra */
.step__n::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, #9cc0ff, rgba(156, 192, 255, 0));
  transition: height 0.6s var(--ease) 0.15s;
}
.step.is-on .step__n::after {
  height: 24px;
}
.step h3 {
  margin-top: 16px;
}
.step p {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.55;
}
/* El título y el texto del paso suben y se aclaran, uno detrás de otro */
.step h3,
.step p {
  opacity: 0.32;
  translate: 0 14px;
  transition:
    opacity 0.7s var(--ease),
    translate 0.8s var(--ease);
}
.step.is-on h3,
.step.is-on p {
  opacity: 1;
  translate: 0 0;
}
.step.is-on h3 {
  transition-delay: 0.18s;
}
.step.is-on p {
  transition-delay: 0.3s;
}

/* Clientes: seis marcas en blanco sobre una retícula de líneas finas. Cuando el puntero entra
   en una celda, un círculo azul crece desde el punto exacto por el que entra hasta llenarla y,
   al salir, se recoge hacia el punto por el que sale. El logo acompaña levemente al puntero. */
.clients {
  padding: clamp(30px, 5vw, 70px) 0 clamp(70px, 9vw, 130px);
}
.clients h2 {
  text-align: center;
}
.clients__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(34px, 5vw, 60px);
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line-2);
}
.clients__grid li {
  position: relative;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  height: clamp(120px, 15vw, 190px);
  padding: 20px;
  overflow: hidden;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: rgba(5, 5, 7, 0.35);
}
.cl__fill {
  --size: 0px;
  --x: 50%;
  --y: 50%;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%;
  background: var(--accent);
  /* Un velo más claro va por delante del borde mientras crece */
  box-shadow: 0 0 0 26px rgba(28, 103, 255, 0.28);
  transform: translate(var(--x), var(--y)) scale(0);
  transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1);
  pointer-events: none;
}
.clients__grid li.is-hot .cl__fill {
  transform: translate(var(--x), var(--y)) scale(1);
}
.cl {
  --px: 0;
  --py: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: 62%;
  translate: calc(var(--px) * 7px) calc(var(--py) * 5px);
  transition:
    translate 0.5s var(--ease),
    scale 0.6s var(--ease);
}
.cl img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(30px, 3.6vw, 46px);
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.82;
  transition: opacity 0.4s;
}
.cl--pcc img {
  height: clamp(38px, 4.6vw, 58px);
}
.cl--leg img,
.cl--pt img {
  height: clamp(44px, 5.4vw, 68px);
}
.cl--lock img {
  height: clamp(40px, 4.8vw, 60px);
}
.cl--gu {
  width: 80%;
}
.cl--gu img {
  height: clamp(70px, 8.5vw, 112px);
}
.clients__grid li.is-hot .cl {
  scale: 1.05;
}
@media (hover: none) {
  /* Cinta en pantallas táctiles: solo se desplaza. Sin estirado ni brillo por letra (y sin las
     transiciones que eso arrastra), que en el móvil se veía mal y pesaba. */
  .tape .ch,
  .tape__line svg {
    transform: none;
    color: #fff;
    text-shadow: none;
    filter: none;
    transition: none;
  }
  .clients__grid li {
    cursor: pointer;
  }
}
.clients__grid li.is-hot img {
  opacity: 1;
}

.clients__more {
  margin-top: clamp(18px, 2.4vw, 28px);
  text-align: center;
  font: 500 0.95rem/1.4 var(--display);
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

/* 8. Reseñas de Google: el tramo queda fijado y las reseñas pasan de lado con el scroll.
      Primero la nota, formada con partículas doradas; después cada reseña, que se va
      iluminando palabra a palabra mientras ocupa el centro */
.reviews {
  --n: 4;
  position: relative;
  height: calc(100vh + var(--n) * 72vh);
}
.reviews__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  padding: clamp(96px, 14vh, 136px) 0 clamp(26px, 5vh, 52px);
  text-align: center;
}
.reviews__sticky h2 {
  padding: 0 var(--inset);
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
}
.reviews__view {
  justify-self: stretch;
  display: grid;
  align-items: center;
  min-height: 0;
}
.reviews__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
/* Cada pieza se enfoca al pasar por el centro */
.rv {
  --d: 0;
  flex: 0 0 min(780px, 54vw);
  display: grid;
  justify-items: center;
  align-content: center;
  margin: 0;
  padding: 0 clamp(16px, 3vw, 48px);
  opacity: calc(1 - min(1, max(var(--d), -1 * var(--d))) * 0.74);
  scale: calc(1 - min(1, max(var(--d), -1 * var(--d))) * 0.14);
}
.reviews__stage {
  position: relative;
  width: min(920px, 100%, 84vh);
  aspect-ratio: 920 / 380;
}
.reviews__stage::before {
  content: '';
  position: absolute;
  inset: -10% 8%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(251, 188, 4, 0.13), transparent 70%);
  pointer-events: none;
}
.reviews__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.reviews__n {
  display: grid;
  place-items: center;
  height: 100%;
  font: 600 clamp(6rem, 22vw, 17rem) / 1 var(--display);
  letter-spacing: -0.06em;
  color: #fbbc04;
}
/* Con JavaScript la cifra la dibujan las partículas; el texto queda para lectores de pantalla */
.js .reviews__n {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.stars {
  display: flex;
  gap: 8px;
}
.stars svg {
  width: 34px;
  height: 34px;
  fill: #fbbc04;
}
.js .reviews .stars svg {
  opacity: 0;
  scale: 0;
  rotate: -70deg;
  transition:
    opacity 0.4s,
    scale 0.7s cubic-bezier(0.3, 1.7, 0.4, 1),
    rotate 0.7s var(--ease);
}
.js .reviews.is-done .stars svg {
  opacity: 1;
  scale: 1;
  rotate: 0deg;
}
.reviews .stars svg:nth-child(2) {
  transition-delay: 0.1s;
}
.reviews .stars svg:nth-child(3) {
  transition-delay: 0.2s;
}
.reviews .stars svg:nth-child(4) {
  transition-delay: 0.3s;
}
.reviews .stars svg:nth-child(5) {
  transition-delay: 0.4s;
}
.reviews__count {
  margin-top: 16px;
  font: 500 1.1rem/1.2 var(--display);
  color: var(--ink);
}
.js .reviews__count {
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 0.8s var(--ease) 0.55s,
    translate 0.8s var(--ease) 0.55s;
}
.js .reviews.is-done .reviews__count {
  opacity: 1;
  translate: 0 0;
}
/* --q va de 0 a 1 con el scroll: enciende las estrellas y las palabras por orden */
.quote {
  --q: 0;
}
.quote__stars {
  display: flex;
  gap: 6px;
  margin-bottom: clamp(18px, 3.4vh, 36px);
}
.quote__stars svg {
  --s: 0;
  width: 22px;
  height: 22px;
  fill: #fbbc04;
}
.quote__stars svg:nth-child(2) {
  --s: 1;
}
.quote__stars svg:nth-child(3) {
  --s: 2;
}
.quote__stars svg:nth-child(4) {
  --s: 3;
}
.quote__stars svg:nth-child(5) {
  --s: 4;
}
.js .quote__stars svg {
  opacity: clamp(0.16, calc(var(--q) * 7 - var(--s)), 1);
  scale: clamp(0.72, calc(0.72 + (var(--q) * 7 - var(--s)) * 0.28), 1);
  transition:
    opacity 0.3s linear,
    scale 0.4s var(--ease);
}
.quote blockquote {
  max-width: 21ch;
  margin: 0;
  font: 400 clamp(1.7rem, 3.5vw, 3.2rem) / 1.16 var(--text);
  color: #fff;
}
.js .quote .w > span {
  translate: 0 0;
  opacity: clamp(0.18, calc(var(--q) * (var(--words, 12) + 3) - var(--w)), 1);
  transition: opacity 0.35s linear;
}
.quote figcaption {
  margin-top: clamp(18px, 3vh, 30px);
  font: 600 0.95rem/1.2 var(--display);
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.js .quote figcaption {
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 0.6s var(--ease),
    translate 0.6s var(--ease);
}
.js .quote.is-read figcaption {
  opacity: 1;
  translate: 0 0;
}
.reviews__bar {
  display: flex;
  gap: 8px;
}
.reviews__bar span {
  position: relative;
  width: 46px;
  height: 2px;
  overflow: hidden;
  background: var(--line-2);
}
.reviews__bar i {
  position: absolute;
  inset: 0;
  background: #fbbc04;
  transform-origin: 0 50%;
  transform: scaleX(var(--f, 0));
}

/* 9. Más servicios: dos enlaces a gran tamaño. Entran dibujando su línea y subiendo letra a
      letra; con el puntero encima se llenan de azul desde el lado por el que entra, las letras
      ruedan y la flecha sale y vuelve a entrar */
.biglinks {
  margin-top: clamp(30px, 4vw, 56px);
}
.biglink {
  --i: 0;
  --mx: 50%;
  --my: 50%;
  --bleed: min(var(--inset), 30px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 4vw, 60px);
  padding: clamp(26px, 3.6vw, 48px) 0;
  background: linear-gradient(var(--line-2), var(--line-2)) 0 0 / 100% 1px no-repeat;
  text-decoration: none;
  color: var(--ink-2);
}
.biglink:last-child {
  --i: 1;
  background:
    linear-gradient(var(--line-2), var(--line-2)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat;
}
.js .biglink[data-reveal] {
  opacity: 1;
  translate: none;
  background-size: 0 1px;
  transition: background-size 1.3s var(--ease) calc(var(--i) * 140ms);
}
.js .biglink[data-reveal].is-in {
  background-size: 100% 1px;
}
.biglink::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--bleed) * -1);
  z-index: -1;
  background:
    radial-gradient(520px circle at var(--mx) var(--my), #5f9aff, transparent 70%),
    var(--accent);
  clip-path: inset(100% 0 0 0);
}
.biglink[data-from='top']::before {
  clip-path: inset(0 0 100% 0);
}
.biglink.is-hot::before,
.biglink.is-out::before {
  transition: clip-path 0.6s var(--ease);
}
.biglink.is-hot::before,
.biglink:focus-visible::before {
  clip-path: inset(0 0 0 0);
}
.biglink__t {
  font: 600 clamp(2rem, 4.9vw, 4.3rem) / 1 var(--display);
  letter-spacing: -0.045em;
  color: #fff;
}
/* Letras sueltas: cada una lleva debajo una copia que la releva al rodar */
.rl-w {
  display: inline-block;
  white-space: nowrap;
}
.rl {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin: -0.12em 0 -0.18em;
  padding: 0.12em 0 0.18em;
}
.rl > span {
  position: relative;
  display: block;
}
.rl > span::after {
  content: attr(data-ch);
  position: absolute;
  left: 0;
  top: calc(100% + 0.34em);
}
.js .biglink[data-reveal]:not(.is-in) .rl > span {
  translate: 0 135%;
}
.js .biglink.is-in .rl > span {
  animation: sube-letra 1s var(--ease) backwards;
  animation-delay: calc(var(--i) * 140ms + 120ms + var(--c, 0) * 22ms);
}
@keyframes sube-letra {
  from {
    translate: 0 135%;
  }
}
.biglink.is-hot .rl > span,
.biglink.is-out .rl > span {
  transition: translate 0.6s var(--ease) calc(var(--c, 0) * 14ms);
}
.biglink.is-hot .rl > span {
  translate: 0 calc(-100% - 0.34em);
}
.biglink__d {
  max-width: 44ch;
  font-size: 1.02rem;
  line-height: 1.5;
  transition: color 0.3s;
}
.biglink__go {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(54px, 5.4vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  overflow: hidden;
  color: #fff;
  transition:
    background 0.4s,
    border-color 0.4s,
    color 0.4s,
    scale 0.5s var(--ease);
}
.biglink__go svg {
  grid-area: 1 / 1;
  width: 46%;
  height: auto;
  aspect-ratio: 40 / 24;
  transition: translate 0.55s var(--ease);
}
.biglink__go svg:last-child {
  translate: -220% 0;
}
.js .biglink[data-reveal]:not(.is-in) .biglink__d,
.js .biglink[data-reveal]:not(.is-in) .biglink__go {
  opacity: 0;
  translate: 0 20px;
}
.js .biglink.is-in .biglink__d,
.js .biglink.is-in .biglink__go {
  animation: aparece 1s var(--ease) backwards;
  animation-delay: calc(var(--i) * 140ms + 480ms);
}
@keyframes aparece {
  from {
    opacity: 0;
    translate: 0 20px;
  }
}
.biglink.is-hot .biglink__d,
.biglink:focus-visible .biglink__d {
  color: #fff;
}
.biglink.is-hot .biglink__go,
.biglink:focus-visible .biglink__go {
  background: #fff;
  border-color: #fff;
  color: var(--accent);
  scale: 1.08;
}
.biglink.is-hot .biglink__go svg:first-child {
  translate: 220% 0;
}
.biglink.is-hot .biglink__go svg:last-child {
  translate: 0 0;
}

/* 10. Preguntas: cada fila entra dibujando su línea; al abrir, la respuesta se despliega,
       el signo gira hasta quedar en menos y la línea de la fila se vuelve azul */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
}
.faq__head {
  position: sticky;
  top: 112px;
}
.faq__head h2 {
  font-size: clamp(1.8rem, 2.9vw, 2.5rem);
}
.faq__list details {
  --mx: 50%;
  position: relative;
  background: linear-gradient(var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat;
}
.faq__list details:first-child {
  background:
    linear-gradient(var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) 0 0 / 100% 1px no-repeat;
}
.js .faq__list details[data-reveal] {
  opacity: 1;
  translate: none;
  background-size: 0 1px;
  transition: background-size 1.2s var(--ease) calc(var(--i, 0) * 90ms);
}
.js .faq__list details[data-reveal].is-in {
  background-size: 100% 1px;
}
/* Resplandor que sigue al puntero a lo largo de la fila */
.faq__list details::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(360px 150px at var(--mx) 38px, rgba(28, 103, 255, 0.24), transparent 72%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.faq__list details::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), #9cc0ff);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.8s var(--ease);
}
.faq__list details.is-open::after {
  transform: scaleX(1);
}
.faq__list summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font: 600 1.2rem/1.3 var(--display);
  letter-spacing: -0.015em;
  color: #fff;
  transition: color 0.3s;
}
.faq__list summary::-webkit-details-marker {
  display: none;
}
.faq__q {
  display: block;
  overflow: hidden;
  margin-bottom: -0.1em;
  padding-bottom: 0.1em;
}
.faq__q > span {
  display: block;
}
.js .faq__list details[data-reveal]:not(.is-in) .faq__q > span {
  translate: 0 135%;
}
.js .faq__list details.is-in .faq__q > span {
  animation: sube-letra 0.95s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 90ms + 90ms);
}
.faq__ic {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  transition:
    background 0.4s,
    border-color 0.4s,
    rotate 0.6s var(--ease),
    scale 0.5s var(--ease);
}
.faq__ic::before,
.faq__ic::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  background: #fff;
  transition:
    transform 0.5s var(--ease),
    background 0.3s;
}
.faq__ic::after {
  transform: rotate(90deg);
}
.js .faq__list details[data-reveal]:not(.is-in) .faq__ic {
  opacity: 0;
  scale: 0.2;
}
.js .faq__list details.is-in .faq__ic {
  animation: brota 0.8s cubic-bezier(0.3, 1.5, 0.4, 1) backwards;
  animation-delay: calc(var(--i, 0) * 90ms + 320ms);
}
@keyframes brota {
  from {
    opacity: 0;
    scale: 0.2;
  }
}
.faq__list details.is-open .faq__ic {
  background: #fff;
  border-color: #fff;
  rotate: 180deg;
}
.faq__list details.is-open .faq__ic::before,
.faq__list details.is-open .faq__ic::after {
  background: var(--accent);
}
.faq__list details.is-open .faq__ic::after {
  transform: rotate(0deg);
}
.faq__list:has(details.is-open) details:not(.is-open) summary {
  color: var(--ink-2);
}
.faq__a {
  overflow: hidden;
}
.faq__a p {
  max-width: 62ch;
  padding: 0 60px 28px 0;
}
.js .faq__a p {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity 0.3s,
    translate 0.5s var(--ease);
}
.js .faq__list details.is-open .faq__a p {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.7s var(--ease) 0.14s,
    translate 0.8s var(--ease) 0.1s;
}
@media (hover: hover) and (pointer: fine) {
  .faq__list details:hover::before {
    opacity: 1;
  }
  .faq__list summary .faq__q {
    transition: translate 0.5s var(--ease);
  }
  .faq__list summary:hover .faq__q {
    translate: 12px 0;
  }
  .faq__list:has(details.is-open) details:not(.is-open) summary:hover {
    color: #fff;
  }
  .faq__list details:not(.is-open) summary:hover .faq__ic {
    background: rgba(28, 103, 255, 0.3);
    border-color: #6ea2ff;
    scale: 1.1;
    rotate: 90deg;
  }
}

/* 11. Formulario */
.cta {
  padding: clamp(90px, 12vw, 160px) 0 clamp(170px, 24vw, 330px);
}
.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}
.form {
  padding: clamp(22px, 2.8vw, 34px);
  border-radius: 22px;
  background: var(--glass-heavy);
  border-color: var(--line-2);
}
.lab {
  display: block;
  padding: 0;
  font: 600 11px/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.lab em {
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-3);
}
.field {
  display: block;
  margin-top: 16px;
}
.form__body > .field:first-child {
  margin-top: 0;
}
.field input {
  width: 100%;
  height: 50px;
  margin-top: 9px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: rgba(4, 7, 11, 0.55);
  color: #fff;
  font: 400 1.05rem var(--text);
  outline: 0;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.field input:focus {
  border-color: rgba(220, 230, 245, 0.34);
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.field__err {
  display: none;
  width: 100%;
  margin-top: 7px;
  font: 500 0.8rem/1.2 var(--display);
  color: #ff9c9c;
}
.field.is-bad input {
  border-color: #ff7a7a;
}
.is-bad > .field__err {
  display: block;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.pick legend {
  width: 100%;
  margin-bottom: 10px;
}
.pick label {
  position: relative;
  cursor: pointer;
}
.pick input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.pick label span {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: rgba(4, 7, 11, 0.55);
  color: var(--ink-2);
  font: 600 0.84rem/1 var(--display);
  text-align: center;
  white-space: nowrap;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.pick label:hover span {
  border-color: rgba(220, 230, 245, 0.34);
}
.pick input:checked + span {
  background: rgba(28, 103, 255, 0.24);
  border-color: #5a8dff;
  color: #fff;
}
.pick input:focus-visible + span {
  outline: 2px solid rgba(120, 170, 255, 0.9);
  outline-offset: 3px;
}
.pick--grid label {
  flex: 1 1 calc(33.333% - 8px);
}
.pick--grid label span {
  padding-inline: 8px;
}
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.form .btn {
  margin-top: 24px;
}
.form__note {
  margin-top: 14px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-3);
}
.form__note a {
  color: var(--ink-2);
}
.form__fail {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 120, 120, 0.4);
  border-radius: 12px;
  background: rgba(255, 90, 90, 0.08);
  font: 500 0.92rem/1.45 var(--display);
  color: #ffd0d0;
}
.form__fail a {
  color: #fff;
}
.form.is-sending .btn {
  opacity: 0.6;
  pointer-events: none;
}
.form__done .form__test {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--ink-3);
}
.form__done {
  display: none;
  padding: 26px 6px;
  text-align: center;
  outline: 0;
}
.form.is-sent .form__body {
  display: none;
}
.form.is-sent .form__done {
  display: block;
}
.form__ok {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(28, 103, 255, 0.2);
  border: 1px solid var(--accent-border);
  color: #a9c6ff;
}
.form__ok svg {
  width: 26px;
  height: 26px;
}
.form__done h3 {
  font-size: 1.5rem;
}
.form__done p {
  margin-top: 12px;
}

/* Pie */
.ftr {
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(5, 5, 7, 0.86), #050507 38%);
}
.ftr__top {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
  padding-bottom: clamp(36px, 5vw, 60px);
  border-bottom: 1px solid var(--line-2);
}
.ftr__brand {
  flex: none;
}
.ftr__brand svg {
  width: 54px;
  height: 56px;
  fill: #fff;
}
.ftr__lema {
  flex: 1;
  max-width: 18ch;
  font: 600 clamp(1.6rem, 3vw, 2.6rem) / 1.02 var(--display);
  letter-spacing: -0.035em;
  color: #fff;
}
.ftr__cols {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1.1fr 1fr;
  gap: 36px clamp(24px, 4vw, 64px);
  padding: clamp(36px, 5vw, 60px) 0;
}
.ftr__h {
  margin-bottom: 18px;
  font: 600 11px/1.3 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ftr__cols ul {
  display: grid;
  gap: 12px;
}
.ftr__cols .ftr__two {
  grid-template-columns: 1fr 1fr;
}
.ftr__cols a {
  position: relative;
  font: 500 1.02rem/1.25 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.25s;
}
.ftr__cols a::after {
  content: '';
  position: absolute;
  inset: auto 0 -3px 0;
  height: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.45s var(--ease);
}
.ftr__cols a:hover {
  color: var(--accent-soft);
}
.ftr__cols a:hover::after {
  transform: scaleX(1);
}
.ftr__cols a[aria-current] {
  color: var(--ink-3);
}
/* La marca, en letras monumentales, cierra la página como la localidad la abre:
   mayúsculas macizas que se apagan hacia abajo, sin contornos que se pisen ni letras cortadas */
.ftr__giant {
  margin: clamp(10px, 2vw, 30px) 0 clamp(14px, 2vw, 30px);
  text-align: center;
  font: 600 min(21vw, 24rem) / 0.82 var(--display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.34) 55%, rgba(255, 255, 255, 0.05));
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}
.js .ftr__giant[data-reveal] {
  translate: 0 18%;
  transition:
    opacity 1.2s var(--ease),
    translate 1.4s var(--ease);
}
.js .ftr__giant[data-reveal].is-in {
  translate: 0 0;
}
.ftr__base a {
  color: inherit;
  text-decoration: none;
}
.ftr__base a:hover {
  color: #fff;
}
.ftr__base {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 22px;
  border-top: 1px solid var(--line);
  font: 500 0.8rem/1 var(--display);
  color: var(--ink-3);
  background: #050507;
}

/* Barra fija en móvil y aviso */
.dock {
  display: none;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 90;
  padding: 13px 18px;
  border-radius: 12px;
  background: rgba(12, 18, 28, 0.94);
  border: 1px solid var(--line-2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  color: #fff;
  font: 500 0.86rem/1.2 var(--display);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.3s var(--ease);
}
.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Tabletas */
@media (max-width: 1040px) {
  .dir {
    columns: 2;
  }
  .nav {
    display: none;
  }
  .figures__row {
    grid-template-columns: repeat(2, 1fr);
  }
  .burger {
    display: block;
  }
  .modal__close {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.25rem;
  }
  .ftr__cols {
    grid-template-columns: 1fr 1fr;
  }
  .menu {
    display: flex;
  }
  .proc {
    height: 340vh;
  }
  .proc__sticky {
    height: 100vh;
    height: 100svh;
  }
  .proc__sticky > .wrap {
    padding-bottom: 60px;
  }
  .proc__line {
    margin-top: 40px;
  }
  .proc__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .js .proc .step[data-reveal] {
    grid-area: 1 / 1;
    padding-top: 44px;
    opacity: 0;
    translate: 0 54px;
    transition:
      opacity 0.45s var(--ease),
      translate 0.7s var(--ease);
    pointer-events: none;
  }
  .js .proc .step[data-reveal].is-now {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
  }
  /* Los pasos ya vistos salen hacia arriba */
  .js .proc .step[data-reveal].is-on:not(.is-now) {
    translate: 0 -54px;
  }
  .step::before,
  .step::after,
  .step__n::after {
    display: none;
  }
  .step__n {
    font-size: clamp(5.4rem, 24vw, 9rem);
  }
  .step h3 {
    margin-top: 22px;
    font-size: clamp(1.5rem, 5.4vw, 2rem);
  }
  .step p {
    max-width: 30ch;
    font-size: 1.1rem;
  }
  .faq__grid,
  .cta__grid {
    grid-template-columns: 1fr;
  }
  .faq__head {
    position: static;
  }
  .index {
    max-width: none;
  }
  .biglink {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .biglink__d {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Móvil */
@media (max-width: 860px) {
  body {
    font-size: 1rem;
  }
  .local__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .local__sectors ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px 0;
  }
  .dir {
    columns: 1;
  }
  .space::after {
    right: 50%;
    top: auto;
    bottom: -34vh;
    width: 120vw;
    transform: translateX(50%);
  }
  /* Portada: la localidad en letras gigantes arriba, el planeta asomando y el titular centrado */
  .hero {
    align-items: center;
    padding: clamp(150px, 23svh, 196px) 0 30px;
  }
  /* El velo se desvanece del todo antes de llegar a su borde superior: sin corte sobre las letras */
  .hero::before {
    inset: 14% 0 0 0;
    background:
      radial-gradient(140% 54% at 50% 60%, rgba(5, 5, 7, 0.84), rgba(5, 5, 7, 0.58) 55%, rgba(5, 5, 7, 0) 100%),
      linear-gradient(0deg, rgba(5, 5, 7, 0.9), rgba(5, 5, 7, 0) 40%);
  }
  .hero .checks {
    display: none;
  }
  .lead {
    font-size: 0.98rem;
  }
  .glow {
    display: none;
  }
  h1 {
    font-size: clamp(2.7rem, 12.4vw, 3.8rem);
  }
  .quick {
    flex-direction: column;
    padding: 10px;
  }
  .quick input {
    height: 50px;
  }
  .checks {
    gap: 8px 18px;
    margin-top: 14px;
  }
  /* Resultados: igual que en ordenador, fijados y avanzando hacia la derecha con el scroll */
  .story {
    height: 400vh;
  }
  .story__sticky {
    height: 100vh;
    height: 100svh;
  }
  .story__sticky::before {
    background: radial-gradient(90% 46% at 50% 54%, rgba(5, 5, 7, 0.78), rgba(5, 5, 7, 0.42) 62%, transparent 100%);
  }
  .panel {
    padding: 96px var(--inset) 120px;
  }
  .panel__in {
    transform: rotateY(calc(var(--d) * -30deg)) scale(calc(1 - max(var(--d), -1 * var(--d)) * 0.2));
  }
  .panel h2 {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
  .panel__n {
    font-size: clamp(5.2rem, 27vw, 8rem);
  }
  .story__bar {
    bottom: 104px;
  }
  .index__row {
    grid-template-columns: 44px minmax(0, 1fr);
    opacity: 0.6;
  }
  .proc__grid,
  .form__row {
    grid-template-columns: 1fr;
  }
  .form__row {
    gap: 0;
  }
  .clients__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Reseñas: fijadas y deslizándose de lado, como en ordenador */
  .reviews {
    height: calc(100vh + var(--n) * 64vh);
  }
  .reviews__sticky {
    height: 100vh;
    height: 100svh;
    padding: 92px 0 104px;
  }
  .reviews__sticky h2 {
    font-size: 1.55rem;
  }
  .rv {
    flex-basis: 84vw;
    padding: 0 6px;
  }
  .quote blockquote {
    font-size: clamp(1.6rem, 7.4vw, 2.2rem);
  }
  .clients__grid li {
    height: clamp(104px, 30vw, 150px);
  }
  .faq__a p {
    padding-right: 0;
  }
  .serp {
    height: 220vh;
  }
  .serp__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .serp__tabs {
    gap: 16px;
  }
  .serp__copy .sec__lead,
  .serp__steps,
  .serp__snip,
  .serp__links,
  .serp__cursor {
    display: none;
  }
  .serp__copy h2 {
    font-size: 1.7rem;
  }
  .serp__copy .note {
    margin-top: 12px;
    font-size: 0.78rem;
  }
  .serp__panel {
    --h: clamp(52px, 6.6vh, 58px);
    margin: 0 4% 0 2%;
  }
  .serp__logo {
    height: 22px;
    margin: 2px auto 10px;
  }
  .serp__body {
    padding: 12px 14px 0;
  }
  .serp__view {
    height: calc(var(--h) * 4.45);
    margin: 0 -14px;
    padding: 8px 14px 0;
  }
  .serp__title {
    font-size: 13.5px;
  }
  .serp__badge {
    right: -2%;
    top: auto;
    bottom: -9%;
    padding: 12px 14px;
    min-width: 0;
  }
  .serp__badge b {
    font-size: 2.4rem;
  }
  .serp__panel.ai {
    height: clamp(410px, 60vh, 490px);
    margin-top: 0;
  }
  .serp__panel.ai ~ .serp__badge {
    top: auto;
  }
  .ai__chat {
    padding: 6px 14px;
    gap: 12px;
  }
  .ai__text {
    font-size: 13px;
  }
  .ai__ask {
    font-size: 13.5px;
  }
  .ai__more,
  .ai__legal {
    display: none;
  }
  .serp__panel.wd {
    height: clamp(400px, 58vh, 470px);
    margin-top: 0;
  }
  .serp__panel.wd ~ .serp__badge {
    top: auto;
  }
  .serp--long {
    height: 340vh;
  }
  .o__head span {
    display: none;
  }
  .o__cols {
    gap: 8px;
    padding: 12px 10px;
  }
  .serp__chart {
    display: none;
  }
  .pick--grid label {
    flex-basis: calc(50% - 8px);
  }
  .ftr__top {
    flex-wrap: wrap;
  }
  .ftr__lema {
    flex-basis: 60%;
  }
  .ftr__cols {
    grid-template-columns: 1fr;
  }
  .ftr__base {
    padding-bottom: 96px;
  }
  .dock {
    position: fixed;
    inset: auto 12px 12px 12px;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    border-radius: 14px;
    background: rgba(8, 12, 18, 0.92);
    border: 1px solid var(--line-2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    transform: translateY(150%);
    transition: transform 0.45s var(--ease);
  }
  .dock.is-on {
    transform: none;
  }
  .dock p {
    font: 500 0.78rem/1.2 var(--display);
    color: var(--ink-2);
  }
  .dock b {
    display: block;
    margin-bottom: 3px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
  }
  .toast {
    bottom: 92px;
  }
}

@media (max-width: 520px) {
  .figures__row {
    grid-template-columns: 1fr 1fr;
    gap: 30px 18px;
  }
  .fig dt {
    font-size: 2.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent__plate {
    animation: none;
  }
  /* La cinta de medios no se mueve: se separa del borde para que el primer logo no quede bajo el fundido */
  .press__track {
    padding-left: 9%;
  }
  .local__pin i {
    animation: none;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] {
    opacity: 1;
    translate: 0 0;
  }
  .w > span {
    translate: 0 0;
  }
  .odo__strip {
    opacity: 1;
    transform: translateY(calc(var(--to) * -1.06em));
  }
  .js .reviews .stars svg,
  .js .reviews__count,
  .js .quote figcaption,
  .js .quote__stars svg,
  .js .quote .w > span,
  .js .faq__list details[data-reveal] .faq__ic,
  .js .biglink[data-reveal] .biglink__d,
  .js .biglink[data-reveal] .biglink__go {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
    translate: 0 0;
  }
  .js .biglink[data-reveal] .rl > span,
  .js .faq__list details[data-reveal] .faq__q > span {
    translate: 0 0;
  }
  .js .biglink[data-reveal],
  .js .faq__list details[data-reveal] {
    background-size: 100% 1px;
  }
}

/* Landings por sector: búsquedas de ejemplo, lo que se mide y dos listas de cuatro puntos */
.local--sector .local__grid {
  align-items: start;
}
.local--sector .local__sectors ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 30px;
}
.sector__q {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.sector__q li {
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.98rem;
  color: var(--ink);
}
.sector__list {
  margin-top: 22px;
}
.sector__list li {
  padding: 16px 0 16px 30px;
  border-top: 1px solid var(--line-2);
  position: relative;
  font-size: 1.05rem;
  line-height: 1.5;
}
.sector__list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 25px;
  width: 12px;
  height: 2px;
  background: var(--blue, #1c67ff);
}
@media (max-width: 860px) {
  .local--sector .local__sectors ul {
    grid-template-columns: minmax(0, 1fr);
  }
}
.local__intro {
  grid-column: 1 / -1;
}
.local__intro p {
  max-width: 72ch;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  color: var(--ink);
}