/* Desafik (demo) · tercera edición.
   Una sola escena oscura: un campo de partículas fijo detrás de todo que toma una figura por sección.
   El texto cuenta una historia en actos; las imágenes de proyectos están dibujadas en CSS. */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("../fonts/martian.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }

:root {
  --ancla: #111c2d;                /* fondo del logo, muestreado del archivo */
  --ancla-2: #18253a;
  --tinta: #eef1f2;
  --tinta-suave: #bcc8d2;        /* 9.6:1 sobre el fondo: el texto corrido se lee sin esfuerzo */
  --hielo: #c4e8fc;                /* el azul claro del descriptor del logo */
  --acento: #61cbe2;               /* cian de la esfera del logo; 8.9:1 sobre ancla */
  --violeta: #a98be0;              /* violeta de la esfera del logo */
  --linea: rgb(238 241 242 / .16);

  --titulos: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dato: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --margen: clamp(1.25rem, 5vw, 5rem);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ancla); }
body { margin: 0; color: var(--tinta); font: 400 1.0625rem/1.55 var(--texto);
  background: radial-gradient(70% 50% at 100% 0%, rgb(97 203 226 / .10), transparent 70%) no-repeat, var(--ancla); }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.salto { position: absolute; left: -999rem; }
.salto:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--tinta); color: var(--ancla); padding: .6rem 1rem; }

.escena { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; }   /* lvh: alto estable aunque el teléfono esconda su barra */
/* profundidad del fondo: tres resplandores con los colores del logo que derivan despacio sobre el lienzo de puntos */
body::after { content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(38% 42% at 82% 18%, rgb(97 203 226 / .20), transparent 70%),
    radial-gradient(42% 46% at 12% 84%, rgb(169 139 224 / .22), transparent 70%),
    radial-gradient(34% 36% at 56% 58%, rgb(38 84 160 / .30), transparent 72%);
  animation: deriva 28s ease-in-out infinite alternate; }
@keyframes deriva { from { transform: translate3d(-4%, -3%, 0) scale(1); } 50% { transform: translate3d(3%, 4%, 0) scale(1.08); } to { transform: translate3d(5%, -4%, 0) scale(1.02); } }
/* el logotipo calcado, nítido, sobre el globo de la portada; el script lo coloca y lo desvanece al bajar */
.logo-vivo { position: fixed; z-index: 0; height: auto; pointer-events: none; opacity: 0; filter: drop-shadow(0 0 14px rgb(17 28 45 / .85)) drop-shadow(0 0 3px rgb(17 28 45 / .9)); }
.sin-js .logo-vivo { display: none; }
.cabecera, main, .pie { position: relative; z-index: 1; }
main { overflow-x: clip; }      /* una imagen que entra deslizándose no debe ensanchar la página ni un instante */

.boton { display: inline-block; min-height: 2.75rem; padding: .85rem 1.6rem; border: 1.5px solid var(--acento); border-radius: 2px;
  background: var(--acento); color: var(--ancla); font: 600 1rem/1.2 var(--texto); text-decoration: none; cursor: pointer; transition: background-color .18s, color .18s; }
.boton:hover { background: transparent; color: var(--acento); }

/* ---------- cabecera ---------- */
.cabecera { position: absolute; inset: 0 0 auto 0; z-index: 5; display: flex; align-items: center; gap: 1rem 1.5rem; padding: 1.25rem var(--margen); }
/* la marca es el logotipo calcado en vector desde el archivo del logo (coincidencia medida 97.4 %) */
.marca { display: block; line-height: 0; }
.marca img { display: block; height: 1.9rem; width: auto; }
.chip-muestra { font: 400 .6875rem/1 var(--dato); font-stretch: 87%; color: var(--tinta-suave); padding: .4rem .6rem; border: 1px solid var(--linea); border-radius: 2px; white-space: nowrap; }
.navegacion { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); font-size: .9375rem; }
.navegacion a { text-decoration: none; padding: .75rem 0; }
.navegacion a:hover { text-decoration: underline; text-decoration-color: var(--hielo); }
.navegacion .navegacion-contacto { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; }

/* ---------- actos: una pantalla, una idea. El texto ocupa la mitad izquierda; la figura, la derecha. ---------- */
.acto { position: relative; min-height: 78svh; display: grid; align-content: center; padding: clamp(4.5rem, 11vh, 7.5rem) var(--margen); scroll-margin-top: 0; }
.portada { min-height: 100svh; padding-top: clamp(5rem, 12vh, 8rem); }
.acto-texto { max-width: min(46%, 40rem); }
h1 { font: 600 clamp(2.4rem, 5vw, 4.6rem)/1.08 var(--titulos); font-stretch: 100%; letter-spacing: -.008em; word-spacing: .04em; text-wrap: balance; }
/* énfasis: nada de cambiar el color de la letra. Un trazo de marcador por debajo, hecho a mano, que se sale un poco de la palabra.
   Se usa en tres titulares de toda la página, no más. */
h1 em, h2 em, .marcador { font-style: normal; color: inherit; position: relative; z-index: 0; display: inline-block; white-space: nowrap; }
h1 em::after, h2 em::after, .marcador::after { content: ""; position: absolute; z-index: -1; left: -.14em; right: -.2em; bottom: -.02em; height: .42em; rotate: -1.4deg;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C34 6 61 17 97 10 S161 7 197 12' fill='none' stroke='%2361cbe2' stroke-width='11' stroke-linecap='round' opacity='.62'/%3E%3Cpath d='M8 17 C52 12 96 20 148 14 S184 13 194 16' fill='none' stroke='%2361cbe2' stroke-width='5' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.con-js .titulo-vivo .marcador::after { clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--curva) .55s; }
.con-js .titulo-vivo.visto .marcador::after { clip-path: inset(0 -5% 0 -5%); }
h2 { font: 600 clamp(1.9rem, 4vw, 3.5rem)/1.12 var(--titulos); font-stretch: 100%; letter-spacing: -.006em; word-spacing: .04em; text-wrap: balance; }
h3 { font: 700 1.375rem/1.15 var(--titulos); font-stretch: 78%; }
.portada .acto-texto { max-width: min(47%, 44rem); }
.bajada { margin-top: clamp(1.2rem, 2.4vw, 1.9rem); max-width: 36rem; color: var(--tinta-suave); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
.accion { margin-top: clamp(1.5rem, 3vw, 2.4rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.nota { font: 400 .75rem/1.5 var(--dato); font-stretch: 87%; color: var(--tinta-suave); }

.rotulo { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem; font: 400 .75rem/1 var(--dato); font-stretch: 87%; color: var(--hielo); }
.rotulo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px rgb(97 203 226 / .2); }
.acto-texto > p:not(.rotulo):not(.bajada) { margin-top: 1.9rem; max-width: 36rem; color: var(--tinta-suave); font-size: 1.125rem; line-height: 1.7; }

.datos { margin-top: 2rem; max-width: 34rem; border-top: 1px solid var(--linea); }
.datos div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding-block: .6rem; border-bottom: 1px solid var(--linea); }
dt { font: 400 .6875rem/1.8 var(--dato); font-stretch: 87%; color: var(--tinta-suave); }
dd { font: 400 .8125rem/1.55 var(--dato); font-stretch: 87%; }

/* el medidor: la página se mide a sí misma en el equipo de quien la ve */
.medidor { position: absolute; inset: auto var(--margen) clamp(1.25rem, 4vh, 2.5rem); display: flex; flex-wrap: wrap; gap: .75rem clamp(1.5rem, 4vw, 4rem); padding-top: 1rem; border-top: 1px solid var(--linea); }
.medidor dd { font-size: 1.0625rem; color: var(--tinta); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.sin-js .medidor { display: none; }

/* ---------- servicios: tres en una sola sección. Con JavaScript son pestañas; sin él, tres bloques seguidos ---------- */
.servicios { padding: clamp(4.5rem, 11vh, 7.5rem) var(--margen); scroll-margin-top: 0; }
.servicios > h2 { max-width: 20ch; }
.servicios-cuerpo { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.pestanas { display: none; }
.con-js .pestanas { display: flex; gap: clamp(1.25rem, 3.5vw, 3.5rem); border-bottom: 1px solid var(--linea); }
.pestanas button { position: relative; padding: 0 0 1.1rem; border: 0; background: none; cursor: pointer; color: var(--tinta-suave);
  font: 600 clamp(1.125rem, 2vw, 1.75rem)/1.1 var(--titulos); font-stretch: 90%; transition: color .25s; }
.pestanas button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--acento), var(--violeta)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--curva); }
.pestanas button:hover { color: var(--tinta); }
.pestanas button[aria-selected="true"] { color: #fff; }
.pestanas button[aria-selected="true"]::after { transform: scaleX(1); }
.servicio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: center; padding-top: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: 6rem; }
.servicio + .servicio { margin-top: 3rem; }
.con-js .servicio + .servicio { margin-top: 0; }
.con-js .servicio[hidden] { display: none; }
.con-js .servicio:not([hidden]) .servicio-texto { animation: entra .7s var(--curva) both; }
.con-js .servicio:not([hidden]) .servicio-imagen { animation: entra-imagen .9s var(--curva) both; }
@keyframes entra { from { opacity: 0; transform: translateY(1.25rem); filter: blur(6px); } }
@keyframes entra-imagen { from { opacity: 0; transform: translateX(2rem) scale(.97); } }
.servicio-nombre { font: 400 .8125rem/1 var(--dato); font-stretch: 87%; color: var(--hielo); }
.con-js .servicio-nombre { display: none; }                 /* con pestañas el nombre ya está arriba */
.servicio h3 { margin-top: 1rem; font: 600 clamp(1.6rem, 3vw, 2.6rem)/1.14 var(--titulos); letter-spacing: -.004em; color: #fff; text-wrap: balance; }
.servicio-texto p:last-child { margin-top: 1.75rem; max-width: 36rem; color: var(--tinta-suave); font-size: 1.125rem; line-height: 1.7; }
/* la imagen se funde con el fondo: sin marco ni caja, sus orillas se desvanecen */
.servicio-imagen { display: block; width: 100%; height: auto; mix-blend-mode: screen;
  -webkit-mask: radial-gradient(ellipse 62% 62% at 50% 50%, #000 52%, transparent 100%); mask: radial-gradient(ellipse 62% 62% at 50% 50%, #000 52%, transparent 100%); }

/* ---------- nuestro trabajo: afirmación a la izquierda, imagen de resguardo a la derecha ---------- */
.trabajo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: center; }
.trabajo .acto-texto { max-width: 40rem; }

/* ---------- lo que no hacemos ---------- */
.limites { padding: clamp(4.5rem, 11vh, 7.5rem) var(--margen); }
.limites h2 { font: 400 clamp(1.125rem, 1.6vw, 1.375rem)/1.3 var(--titulos); letter-spacing: 0; color: var(--tinta-suave); }
.tachados { margin-top: 2.25rem; display: grid; gap: .5rem; }
.tachados li { font: 500 clamp(1.6rem, 4.4vw, 3.6rem)/1.2 var(--titulos); letter-spacing: -.004em; color: #fff; }
.tachados span { background: linear-gradient(90deg, var(--acento), var(--violeta)) no-repeat 0 58% / 100% max(2px, .05em); }   /* en línea: el tachado sigue al texto aunque parta renglón */
.con-js .tachados span { background-size: 0% max(2px, .05em); transition: background-size 1s var(--curva); }
.con-js .tachados.visto span { background-size: 100% max(2px, .05em); }
.tachados li:nth-child(2) span { transition-delay: .22s; } .tachados li:nth-child(3) span { transition-delay: .44s; }
.tachados li:nth-child(4) span { transition-delay: .66s; } .tachados li:nth-child(5) span { transition-delay: .88s; }

/* ---------- preguntas: lista con reglas; cada una abre con el signo de la derecha ---------- */
.preguntas { padding: clamp(4.5rem, 11vh, 7.5rem) var(--margen); }
.preguntas h2 { max-width: 20ch; }
.preguntas-lista { margin-top: clamp(2rem, 5vw, 3.5rem); max-width: 58rem; border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.25rem 0; cursor: pointer; list-style: none;
  font: 600 clamp(1.125rem, 1.7vw, 1.4375rem)/1.25 var(--titulos); font-stretch: 92%; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; flex: none; font: 300 1.75rem/1 var(--titulos); color: var(--acento); transition: rotate .25s var(--curva); }
.preguntas details[open] summary::after { rotate: 45deg; }
.preguntas summary:hover { color: var(--hielo); }
.preguntas details p { padding: 0 3rem 1.5rem 0; max-width: 46rem; color: var(--tinta-suave); }

/* ---------- blog ---------- */
.blog { padding: clamp(4.5rem, 11vh, 7.5rem) var(--margen); }
.blog > h2 { max-width: 22ch; }
.blog-mas { margin-top: 2rem; }
.blog-mas a { font-weight: 600; }
/* tarjetas: portada, etiqueta, título y resumen. Toda la tarjeta es el enlace */
ul.tarjetas { list-style: none; padding: 0; margin: clamp(2rem, 5vw, 3.5rem) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
ul.tarjetas-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.tarjetas li { margin: 0; max-width: none; }
.tarjeta { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: rgb(24 37 58 / .72); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; transition: border-color .25s, background-color .25s; }
.tarjeta:hover { border-color: var(--acento); background: rgb(28 44 68 / .9); }
.tarjeta img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s var(--curva); }
.tarjeta:hover img { transform: scale(1.04); }
.tarjeta-meta { display: flex; align-items: center; gap: .6rem; margin: 1.25rem 1.4rem 0; font: 400 .6875rem/1 var(--dato); font-stretch: 87%; color: var(--hielo); }
.tarjeta-meta i, .nota-meta i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
.tarjeta h2, .tarjeta h3 { margin: .8rem 1.4rem 0; font: 700 1.3125rem/1.22 var(--titulos); font-stretch: 92%; letter-spacing: -.01em; color: #fff; text-shadow: none; text-wrap: balance; }
.tarjeta p { margin: .7rem 1.4rem 1.5rem; color: var(--tinta-suave); font-size: .9688rem; line-height: 1.6; text-shadow: none; }

/* artículo: cabecera centrada, portada ancha, índice a un lado y una columna cómoda de lectura */
.hoja-blog { position: relative; z-index: 1; max-width: 72rem; margin-inline: auto; padding: clamp(6.5rem, 15vh, 9rem) var(--margen) 5rem; }
.nota-cabeza { max-width: 46rem; margin-inline: auto; text-align: center; }
.migas { font: 400 .75rem/1.5 var(--dato); font-stretch: 87%; color: var(--hielo); }
.migas a { color: inherit; }
.nota-cabeza h1 { margin-top: 1.25rem; font: 700 clamp(2rem, 4.4vw, 3.25rem)/1.08 var(--titulos); font-stretch: 94%; letter-spacing: -.02em; text-wrap: balance; }
.nota-entrada { margin-top: 1.25rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--tinta-suave); }
.nota-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem .8rem; margin-top: 1.5rem; font: 400 .75rem/1.4 var(--dato); font-stretch: 87%; color: var(--tinta-suave); }
.nota-portada { display: block; width: 100%; max-width: 60rem; height: auto; margin: clamp(2rem, 5vw, 3.5rem) auto 0; border-radius: 14px; border: 1px solid var(--linea); }
.nota-rejilla { display: grid; grid-template-columns: 15rem minmax(0, 44rem); justify-content: center; gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.nota-lado { position: sticky; top: 2rem; align-self: start; padding-left: 1.1rem; border-left: 2px solid var(--linea); }
.lado-titulo, .resumen-titulo { font: 400 .75rem/1 var(--dato); font-stretch: 87%; color: var(--hielo); }
.nota-lado ol { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .7rem; }
.nota-lado a { font-size: .9375rem; line-height: 1.35; color: var(--tinta-suave); text-decoration: none; }
.nota-lado a:hover { color: var(--acento); }
/* la columna de lectura va sobre una hoja un poco más clara que el fondo: descansa la vista en textos largos */
.nota-cuerpo { padding: clamp(1.5rem, 4vw, 3rem); background: rgb(24 37 58 / .78); border: 1px solid var(--linea); border-radius: 14px; font-size: 1.125rem; line-height: 1.75; color: #d6dfe7; }
.nota-cuerpo > h2 { margin: 2.75rem 0 0; padding-top: .25rem; font: 700 clamp(1.375rem, 2.2vw, 1.75rem)/1.2 var(--titulos); font-stretch: 92%; letter-spacing: -.01em; color: #fff; scroll-margin-top: 1.5rem; }
.nota-cuerpo p { margin: 1.1rem 0 0; }
.nota-cuerpo ul { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.nota-cuerpo ul li { position: relative; padding-left: 1.6rem; }
.nota-cuerpo ul li::before { content: ""; position: absolute; left: .2rem; top: .72em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--acento); }
.nota-cuerpo strong { color: #fff; font-weight: 600; }
.resumen { padding: 1.5rem 1.6rem; border-radius: 10px; background: rgb(97 203 226 / .09); border: 1px solid rgb(97 203 226 / .3); }
.resumen ul { margin-top: 1rem; }
.consejo { margin-top: 2.5rem !important; padding: 1.4rem 1.6rem; border-left: 3px solid var(--violeta); border-radius: 0 10px 10px 0; background: rgb(169 139 224 / .12); }
.nota-faq { margin-top: 1rem; border-top: 1px solid var(--linea); }
.nota-faq details { border-bottom: 1px solid var(--linea); }
.nota-faq summary { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.1rem 0; cursor: pointer; list-style: none; font-weight: 600; color: #fff; }
.nota-faq summary::-webkit-details-marker { display: none; }
.nota-faq summary::after { content: "+"; flex: none; font: 300 1.5rem/1 var(--titulos); color: var(--acento); transition: rotate .25s var(--curva); }
.nota-faq details[open] summary::after { rotate: 45deg; }
.nota-faq details p { margin: 0; padding: 0 2rem 1.25rem 0; color: var(--tinta-suave); }
.llamado { margin-top: 3rem; padding: 1.75rem; border-radius: 10px; background: linear-gradient(120deg, rgb(97 203 226 / .16), rgb(169 139 224 / .16)); border: 1px solid var(--linea); }
.llamado p { margin: 0; color: #fff; }
.llamado .boton { margin-top: 1.25rem; }
.nota-sigue { margin-top: clamp(3.5rem, 8vw, 6rem); }
.nota-sigue > h2 { font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.15 var(--titulos); font-stretch: 92%; }
.pie-simple { margin-top: 0; }

/* ---------- contacto ---------- */
.contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem clamp(2rem, 7vw, 7rem); align-items: center; }
.contacto .acto-texto { max-width: 38rem; }
.formulario { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem 1.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: rgb(17 28 45 / .82); border: 1px solid var(--linea); border-radius: 3px; }
.formulario p { margin: 0; }
.campo { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.campo-ancho { grid-column: 1 / -1; }
.formulario label { font: 400 .6875rem/1.3 var(--dato); font-stretch: 87%; color: var(--tinta-suave); }
.formulario label span { opacity: .75; }
.formulario input:not([type=checkbox]), .formulario textarea, .formulario select { width: 100%; min-height: 2.75rem; padding: .55rem 0; border: 0; border-bottom: 1.5px solid var(--tinta-suave); border-radius: 0; background: transparent; color: var(--tinta); font: 400 1.0625rem/1.4 var(--texto); resize: vertical; }
.formulario select { cursor: pointer; }
.formulario option { background: var(--ancla-2); color: var(--tinta); }
.formulario ::placeholder { color: #7f8ea0; }
.formulario input:focus-visible, .formulario textarea:focus-visible, .formulario select:focus-visible { outline: 0; border-bottom-color: var(--acento); box-shadow: 0 2px 0 var(--acento); }
.acepto { display: flex; align-items: flex-start; gap: .7rem; }
.acepto input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--acento); flex: none; }
.acepto label { font: 400 .9375rem/1.45 var(--texto); color: var(--tinta); }
.trampa { position: absolute; left: -999rem; width: 1px; height: 1px; overflow: hidden; }
.aviso { font-size: .9375rem; padding: .8rem 1rem; border-left: 2px solid var(--acento); background: var(--ancla-2); }
.aviso.es-error { border-left-color: var(--violeta); }

/* ---------- páginas de texto (aviso de privacidad, 404, gracias) ---------- */
.pagina { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; padding: clamp(7rem, 16vh, 10rem) var(--margen) 5rem; }
.pagina h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.pagina h2 { font: 700 1.375rem/1.2 var(--titulos); font-stretch: 82%; letter-spacing: 0; margin-top: 2.6rem; }
.pagina p, .pagina li { margin-top: .9rem; color: var(--tinta-suave); max-width: 68ch; }
.pagina ul { list-style: disc; padding-left: 1.2rem; }
.pagina strong { color: var(--tinta); font-weight: 600; }
.pagina .fecha { font: 400 .75rem/1.5 var(--dato); font-stretch: 87%; color: var(--hielo); margin-top: 1.2rem; }
.pagina .boton { margin-top: 2rem; }
.pagina-grande { font: 800 clamp(6rem, 22vw, 14rem)/.9 var(--titulos); font-stretch: 78%; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--acento); }

.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; padding: 1.5rem var(--margen) 2rem; border-top: 1px solid var(--linea); font-size: .8125rem; color: var(--tinta-suave); background: var(--ancla); }
.pie-derechos { flex-basis: 100%; margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: .75rem; color: var(--tinta-suave); opacity: .85; }
.pie-logo { display: block; flex: none; width: 9.5rem; height: auto; margin: calc(-1.5rem - 9.5rem * 360 / 460 / 2) calc(100% - 9.5rem) .25rem 0;
  background: radial-gradient(closest-side, var(--ancla) 62%, transparent 63%); }   /* el disco tapa la linea detras del globo */
.pie a { margin-right: 1.25rem; padding-block: .75rem; }

main h1, main h2 { color: #fff; }

/* ---------- páginas aparte (gracias y 404): solo el logo arriba, una idea al centro y un pie mínimo. Nada que distraiga del siguiente paso ---------- */
.pagina-aparte { min-height: 100svh; display: flex; flex-direction: column; }
.aparte { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 82rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 46rem); align-items: center; gap: clamp(2rem, 6vw, 6rem); padding: clamp(7rem, 16vh, 10rem) var(--margen) clamp(3rem, 8vh, 5rem); }
.aparte-404 { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.aparte h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); color: #fff; }
.aparte-texto > p { margin-top: 1.6rem; max-width: 38rem; color: var(--tinta-suave); font-size: 1.125rem; line-height: 1.7; }
.aparte-texto > .aparte-nota { font-size: .9688rem; }
.aparte .boton { margin-top: 2.25rem; }
.aparte-salidas { margin-top: 2rem; max-width: 30rem; border-top: 1px solid var(--linea); }
.aparte-salidas li { border-bottom: 1px solid var(--linea); }
.aparte-salidas a { display: block; padding: 1rem 0; text-decoration: none; font: 600 1.25rem/1.2 var(--titulos); transition: color .2s, padding-left .3s var(--curva); }
.aparte-salidas a:hover { color: var(--acento); padding-left: .5rem; }
.aparte-pasos { list-style: none; counter-reset: paso; padding: 0; margin: 1.75rem 0 0; max-width: 38rem; display: grid; gap: 1.1rem; }
.aparte-pasos li { counter-increment: paso; position: relative; padding-left: 2.4rem; color: var(--tinta-suave); line-height: 1.6; }
.aparte-pasos li::before { content: counter(paso) "."; position: absolute; left: 0; top: .1em; font: 500 1rem/1.5 var(--dato); color: var(--acento); }
.aparte-pasos strong { color: #fff; font-weight: 600; }
.aparte-arte { position: relative; display: grid; place-items: center; }
.aparte-arte img { position: relative; width: min(100%, 26rem); height: auto; rotate: -3deg; }
.aparte-numero { position: absolute; font: 800 clamp(8rem, 21vw, 17rem)/1 var(--titulos); font-stretch: 78%; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgb(97 203 226 / .28); }
.pie-minimo { margin-top: 0; }

/* ---------- la página se arma mientras se recorre (solo con JavaScript y sin "reducir movimiento") ---------- */
.palabra { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .14em; margin-block: -.14em; }   /* el relleno evita cortar las letras con rabo */
.palabra > span { display: inline-block; transform: translateY(115%); transition: transform 1s var(--curva); transition-delay: calc(var(--p, 0) * 42ms); }
.titulo-vivo.visto .palabra > span { transform: none; }
.revela { opacity: 0; transform: translateY(1.25rem); filter: blur(7px); transition: opacity .9s var(--curva), transform .9s var(--curva), filter .9s var(--curva); transition-delay: calc(140ms + var(--i, 0) * 85ms); }
.revela.visto { opacity: 1; transform: none; filter: none; }

/* ---------- pantallas angostas: la figura queda detrás, atenuada; el texto usa todo el ancho ---------- */
@media (max-width: 56rem) {
  .navegacion a:not(.navegacion-contacto) { display: none; }
  .acto-texto, .portada .acto-texto { max-width: 40rem; }
  .contacto, .trabajo { grid-template-columns: 1fr; }
  .aparte-404 { grid-template-columns: minmax(0, 1fr); }
  .aparte-arte { order: -1; }
  .aparte-arte img { width: min(70%, 16rem); }
  .servicio { grid-template-columns: 1fr; }
  .servicio-imagen { order: -1; max-width: 30rem; margin-inline: auto; }
  ul.tarjetas, ul.tarjetas-dos { grid-template-columns: 1fr; max-width: 34rem; }
  .nota-rejilla { grid-template-columns: minmax(0, 1fr); }
  .nota-lado { position: static; }
  .nota-cabeza { text-align: left; margin-inline: 0; }
  .nota-meta { justify-content: flex-start; }
  .medidor { position: static; margin-top: 2.5rem; }
  .portada { align-content: end; padding-top: max(44svh, 17rem); padding-bottom: 2rem; }      /* arriba queda el logo de partículas; el texto empieza debajo */
}
@media (max-width: 30rem) {
  .cabecera { flex-wrap: wrap; row-gap: .1rem; padding-block: .8rem; }
  .chip-muestra { order: 3; flex-basis: 100%; border: 0; padding: 0; }
  .datos div { grid-template-columns: 6.5rem 1fr; }
  .con-js .pestanas { gap: .25rem 1.1rem; flex-wrap: wrap; }
  .pestanas button { font-size: 1.0625rem; padding-bottom: .8rem; }
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .medidor { gap: .6rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .con-js .tachados span { transition: none; background-size: 100% max(2px, .05em); }
  .con-js .titulo-vivo .marcador::after { transition: none; clip-path: none; }
  .con-js .servicio:not([hidden]) .servicio-texto, .con-js .servicio:not([hidden]) .servicio-imagen { animation: none; }
  body::after { animation: none; }
}