/* ==========================================================================
   AGENTIA
   Direccion: B, Especimen. Sistema completo en docs/diseno.md
   Ningun valor suelto: todo sale de los tokens declarados en :root
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografias autoalojadas. SIL OFL 1.1, licencias en assets/fonts/
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-var-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Martian Mono';
  src: url('../fonts/martian-mono-var-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1.b Variables animables

   Sin registrar, una custom property es texto sin tipo: el navegador no la
   puede interpolar y, peor, congela cualquier propiedad que la use y tenga
   transicion. Registrandolas se animan solas y el giro del isotipo se
   recalcula cuadro a cuadro.
   -------------------------------------------------------------------------- */

@property --giro {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@property --gemelo {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --sep {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@property --escala {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* color */
  --papel: #F0F0F3;
  --lamina: #FAFAFC;
  --tinta: #121216;
  --lapiz: #63636F;
  --regla: #D8D8DE;
  --borde: #83838F;

  /* Escala tonal del violeta de marca. Un solo tono, seis profundidades.
     No son acentos distintos: es el mismo color con distinto peso. */
  --violeta-humo: #F3F0FE;    /* fondo de seccion, lavado casi imperceptible */
  --violeta-nota: #E6DEFD;    /* relleno de resaltado y estado activo */
  --violeta-claro: #A98FFF;   /* acento sobre fondo oscuro, 6.83:1 */
  --violeta: #8665F7;         /* el del logotipo. Punto, rellenos, texto grande */
  --violeta-fuerte: #6E48E8;  /* profundizado para cumplir AA en texto chico */
  --violeta-tinta: #1A1330;   /* violeta llevado a negro. Banda de cierre */

  /* texto sobre la banda oscura */
  --humo-claro: #9B95B5;

  /* familias */
  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-cuerpo: 'Instrument Sans', system-ui, sans-serif;
  --f-spec: 'Martian Mono', ui-monospace, monospace;

  /* escala tipografica */
  --t-display: clamp(3rem, 9vw, 7.5rem);
  --t-h1: clamp(2.5rem, 6vw, 4.5rem);
  --t-h2: clamp(1.875rem, 4vw, 3rem);
  --t-h3: clamp(1.25rem, 2vw, 1.5rem);
  --t-lede: clamp(1.125rem, 1.6vw, 1.375rem);
  --t-cuerpo: clamp(1rem, 1.1vw, 1.0625rem);
  --t-corto: 0.875rem;
  --t-spec: 0.6875rem;

  /* peso y ancho */
  --w-fino: 200;
  --w-libro: 400;
  --w-medio: 500;
  --w-fuerte: 600;
  --wd-estrecho: 75;
  --wd-normal: 100;

  /* peso de titulares */
  --w-titular: 340;

  /* estado de la marca. Lo mueve la tuerca del hero o la seccion visible */
  --giro: 0deg;
  --gemelo: 0;
  --sep: 0px;
  --escala: 1;

  /* espacio */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2.5rem;
  --e-5: 4rem;
  --e-6: 6rem;
  --e-7: 9rem;

  /* ritmo vertical */
  --sec-amplia: var(--e-7);
  --sec-normal: var(--e-6);
  --sec-corta: var(--e-5);

  /* lienzo */
  --ancho-max: 1440px;
  --margen: clamp(1.25rem, 5vw, 6rem);
  --columnas: 12;

  /* forma */
  --r-0: 0;
  --linea-fina: 1px;
  --linea-gruesa: 2px;

  /* movimiento */
  --dur-rapida: 180ms;
  --dur-media: 420ms;
  --dur-larga: 720ms;
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fisica: cubic-bezier(0.34, 1.56, 0.64, 1);
  --retardo-punto: 60ms;

  /* capas */
  --z-base: 0;
  --z-grano: 1;
  --z-lamina: 10;
  --z-nav: 100;
  --z-overlay: 200;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: var(--r-0);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);
  font-weight: var(--w-libro);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: var(--w-titular);
  font-stretch: 100%;
  font-optical-sizing: auto;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--linea-gruesa) solid var(--violeta);
  outline-offset: 3px;
}

svg {
  display: block;
}

/* --------------------------------------------------------------------------
   4. Utilidades
   -------------------------------------------------------------------------- */

.lienzo {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.spec {
  font-family: var(--f-spec);
  font-size: var(--t-spec);
  font-variation-settings: 'wght' 400, 'wdth' var(--wd-estrecho);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lapiz);
  font-variant-numeric: tabular-nums;
}

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* cota de medida: la linea con topes que marca un ancho, como en una lamina */
.cota {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--lapiz);
}

.cota__linea {
  flex: 1;
  height: var(--linea-fina);
  background: var(--regla);
}

.cota__tope {
  width: var(--linea-fina);
  height: 10px;
  background: var(--regla);
}

/* --------------------------------------------------------------------------
   5. Grano. Textura permitida, en lugar de degradados
   -------------------------------------------------------------------------- */

.grano {
  position: fixed;
  inset: 0;
  z-index: var(--z-grano);
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.09'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   6. Salto al contenido
   -------------------------------------------------------------------------- */

.salto {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: var(--z-overlay);
  padding: var(--e-1) var(--e-2);
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--f-spec);
  font-size: var(--t-spec);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-rapida) var(--ease-salida);
}

.salto:focus-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   7. Isotipo y sus fisicas
   Geometria original del logotipo, sin redibujar. Una sola pieza que gira
   alrededor del punto violeta, que es el eje y nunca se mueve.

     0 grados    A      identidad
    90 grados    >      video, grabacion y generacion
   180 grados    V      punta de lapiz, diseno
   270 grados    <      mas su gemelo a 90: <*>, codigo

   Todos los estados salen de la misma rotacion. No hay redibujo ni
   traslacion: por eso encajan entre si.
   -------------------------------------------------------------------------- */

.marca {
  height: 1.9rem;
  width: auto;
  overflow: visible;
  color: var(--tinta);
  flex: none;
  /* se anima la variable, no la propiedad que la usa */
  transition:
    --giro var(--dur-media) var(--ease-fisica),
    --sep var(--dur-media) var(--ease-fisica),
    --escala var(--dur-media) var(--ease-fisica),
    --gemelo var(--dur-media) var(--ease-salida) var(--retardo-punto);
}

.marca__brazo {
  transform-box: view-box;
  /* Eje de giro: el centro exacto del punto violeta, en coordenadas de
     usuario del SVG original. Se escriben absolutas y no relativas a la
     esquina del viewBox porque los navegadores no coinciden en como
     resuelven transform-origin con transform-box: view-box.

     El viewBox es cuadrado de 336 porque la union de las cuatro rotaciones
     alrededor del punto es un circulo de radio 165.6, que es la distancia
     del punto al vertice. Con una caja mas baja, los brazos se salen. */
  transform-origin: 550.19px 480.64px;
}

/* El escalado ocurre alrededor del punto, asi que los brazos se encogen
   hacia el eje mientras se separan. La traslacion es en sentido opuesto
   para cada brazo: el que apunta a la izquierda se va a la izquierda. */
.marca__brazo--a {
  transform: translateX(calc(-1 * var(--sep))) rotate(var(--giro)) scale(var(--escala));
}

.marca__brazo--b {
  transform: translateX(var(--sep)) rotate(calc(var(--giro) - 180deg)) scale(var(--escala));
  opacity: var(--gemelo);
}

.marca__trazo {
  fill: currentColor;
}

.marca__punto {
  fill: var(--violeta);
}

.marca[data-estado='marca'] { --giro: 0deg;   --gemelo: 0; --sep: 0px;  --escala: 1; }
.marca[data-estado='play']  { --giro: 90deg;  --gemelo: 0; --sep: 0px;  --escala: 1; }
.marca[data-estado='lapiz'] { --giro: 180deg; --gemelo: 0; --sep: 0px;  --escala: 1; }

/* Code es el unico estado con dos brazos a la vez. Con rotacion pura se
   cruzarian formando un rombo, porque cada brazo se mete 44.95 unidades
   mas alla del eje. Se separan 60 y se encogen a 0.62 para que quede el
   <*> del manual, con el punto respirando en medio y todo dentro de la
   caja de 336. */
.marca[data-estado='code']  { --giro: 270deg; --gemelo: 1; --sep: 60px; --escala: 0.62; }

/* --------------------------------------------------------------------------
   8. Navegacion
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--linea-fina) solid var(--regla);
}

.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-block: var(--e-2);
}

.nav__marca {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  text-decoration: none;
  font-family: var(--f-display);
  font-variation-settings: 'wght' var(--w-medio), 'wdth' var(--wd-normal);
  font-size: 1.0625rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 1;
}

.nav__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.nav__enlaces {
  display: flex;
  gap: var(--e-4);
  list-style: none;
  font-size: var(--t-corto);
}

.nav__enlaces a {
  position: relative;
  color: var(--lapiz);
  text-decoration: none;
  padding-block: var(--e-1);
  transition: color var(--dur-rapida) var(--ease-salida);
}

.nav__enlaces a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--linea-gruesa);
  background: var(--violeta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-rapida) var(--ease-salida);
}

.nav__enlaces a:hover,
.nav__enlaces a[aria-current='true'] {
  color: var(--tinta);
}

.nav__enlaces a:hover::after,
.nav__enlaces a[aria-current='true']::after {
  transform: scaleX(1);
}

.nav__toggle {
  display: none;
  padding: var(--e-1) var(--e-2);
  background: transparent;
  border: var(--linea-fina) solid var(--borde);
  color: var(--tinta);
  cursor: pointer;
  font-family: var(--f-spec);
  font-size: var(--t-spec);
  font-variation-settings: 'wght' 500, 'wdth' var(--wd-estrecho);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color var(--dur-rapida) var(--ease-salida);
}

.nav__toggle:hover {
  border-color: var(--tinta);
}

@media (max-width: 860px) {
  .nav__enlaces { display: none; }
  .nav__toggle { display: block; }
}

/* --------------------------------------------------------------------------
   8.b Menu movil
   -------------------------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--papel);
  padding: var(--e-6) var(--margen) var(--e-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-1);
  overflow-y: auto;
}

.menu[hidden] {
  display: none;
}

.menu__lista {
  list-style: none;
  border-top: var(--linea-fina) solid var(--regla);
}

.menu__lista a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  padding-block: var(--e-3);
  border-bottom: var(--linea-fina) solid var(--regla);
  font-family: var(--f-display);
  font-weight: var(--w-titular);
  font-size: var(--t-h3);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease-salida);
}

.menu__lista a:hover {
  color: var(--violeta-fuerte);
}

.menu__cerrar {
  align-self: flex-start;
  margin-bottom: var(--e-4);
  padding: var(--e-1) var(--e-2);
  background: transparent;
  border: var(--linea-fina) solid var(--borde);
  color: var(--tinta);
  cursor: pointer;
  font-family: var(--f-spec);
  font-size: var(--t-spec);
  font-variation-settings: 'wght' 500, 'wdth' var(--wd-estrecho);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Botones
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-3);
  font-family: var(--f-cuerpo);
  font-size: var(--t-corto);
  font-weight: var(--w-fuerte);
  text-decoration: none;
  border: var(--linea-fina) solid transparent;
  transition:
    background var(--dur-rapida) var(--ease-salida),
    color var(--dur-rapida) var(--ease-salida),
    transform var(--dur-rapida) var(--ease-fisica);
}

.boton__flecha {
  transition: transform var(--dur-rapida) var(--ease-fisica);
}

.boton:hover .boton__flecha {
  transform: translateX(4px);
}

.boton:active {
  transform: translateY(1px);
}

.boton--lleno {
  /* violeta profundo, no el de marca: con el de marca el texto daba 3.86:1
     y hace falta 4.5:1 para texto pequeno */
  background: var(--violeta-fuerte);
  color: var(--lamina);
}

.boton--lleno:hover {
  background: var(--tinta);
}

.boton--linea {
  border-color: var(--borde);
  color: var(--tinta);
}

.boton--linea:hover {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--papel);
}

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: var(--e-5) var(--sec-amplia);
  position: relative;
}

.hero__cota {
  margin-bottom: var(--e-5);
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(var(--columnas, 12), 1fr);
  gap: var(--e-3);
  align-items: start;
}

.hero__marca {
  grid-column: 1 / span 8;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

.hero__marca .marca {
  height: clamp(2.8rem, 5.6vw, 4.5rem);
  /* La caja cuadrada esta centrada en el punto, no en el chevron: el
     vertice sube 165.6 unidades sobre el punto y las patas solo bajan
     44.95. Eso deja la A pegada al techo de su caja. Se compensa bajando
     el SVG 60.3 de 336, que es la distancia entre el centro optico del
     chevron y el centro de la caja. */
  transform: translateY(17.95%);
}

.hero__wordmark {
  height: clamp(1.1rem, 2.2vw, 1.75rem);
  width: auto;
  fill: currentColor;
  flex: none;
}

.hero__titular {
  grid-column: 1 / span 7;
  grid-row: 2;
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--e-3);
}

.hero__titular em {
  font-style: normal;
  color: var(--violeta);
}

/* --------------------------------------------------------------------------
   10.b Campo de piezas
   Las mismas piezas del isotipo, cada una girando sobre su propio punto.
   En reposo miran todas al mismo sitio: un sistema, no un enjambre suelto.
   -------------------------------------------------------------------------- */

.hero__campo {
  grid-column: 8 / span 5;
  grid-row: 2 / span 2;
  align-self: stretch;
  min-height: clamp(18rem, 34vw, 30rem);
  pointer-events: none;
}

.campo-piezas {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.campo__pieza {
  fill: var(--regla);
  transition: fill var(--dur-larga) var(--ease-salida);
}

.campo__pieza .campo__punto {
  fill: var(--violeta-nota);
  transition: fill var(--dur-larga) var(--ease-salida);
}

/* la pieza despierta cuando el puntero la alcanza */
.campo__pieza[data-despierta='true'] {
  fill: var(--borde);
}

.campo__pieza[data-despierta='true'] .campo__punto {
  fill: var(--violeta);
}

.hero__pie {
  grid-column: 1 / span 6;
  grid-row: 3;
  margin-top: var(--e-3);
}

.hero__lede {
  font-size: var(--t-lede);
  color: var(--lapiz);
  max-width: 46ch;
  margin-bottom: var(--e-4);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* --------------------------------------------------------------------------
   11. La tuerca. El control que gira la marca
   Unica excepcion al bloqueo de forma: la tuerca es circular porque es el
   punto de la marca agrandado hasta volverse mecanismo. Es el mismo eje.
   -------------------------------------------------------------------------- */

.banco {
  padding-block: var(--sec-normal);
  border-top: var(--linea-fina) solid var(--regla);
}

.banco__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  padding-bottom: var(--e-1);
  border-bottom: var(--linea-fina) solid var(--regla);
  margin-bottom: var(--e-5);
}

.banco__modo {
  color: var(--tinta);
}

.banco__grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--e-6);
  align-items: start;
}

.banco__mando {
  display: grid;
  justify-items: center;
  gap: var(--e-4);
  padding: var(--e-4);
  background: var(--lamina);
  border: var(--linea-fina) solid var(--regla);
}

.marca--panel {
  height: clamp(5rem, 11vw, 8rem);
}

.tuerca {
  display: grid;
  justify-items: center;
  gap: var(--e-2);
  transition: --giro var(--dur-media) var(--ease-fisica);
}

.tuerca__mando {
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
  touch-action: none;
}

/* la pista fija con sus cuatro muescas. No gira: es la referencia */
.tuerca__pista {
  position: absolute;
  inset: 0;
  border: var(--linea-fina) solid var(--regla);
  border-radius: 50%;
}

.tuerca__muesca {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--linea-gruesa);
  height: 0.5rem;
  margin-left: -1px;
  background: var(--borde);
  transform-origin: 1px 3.75rem;
  transform: rotate(var(--angulo)) translateY(-3.75rem);
}

/* lo que gira: la aguja violeta. Es tambien el tirador */
.tuerca__agarre {
  position: absolute;
  inset: 0;
  transform: rotate(var(--giro));
  pointer-events: none;
}

/* zona de agarre ancha alrededor de la aguja fina, para que no haya que
   apuntar a un pelo de 2 px */
.tuerca__tirador {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2.75rem;
  height: 3.35rem;
  margin-left: -1.375rem;
  pointer-events: auto;
  cursor: grab;
}

.tuerca__aguja {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--linea-gruesa);
  height: 2.6rem;
  margin-left: -1px;
  background: var(--violeta);
}

/* el punto de la marca: eje, centro y parte del agarre */
.tuerca__eje {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  background: var(--violeta);
  border-radius: 50%;
  cursor: grab;
  transition: transform var(--dur-rapida) var(--ease-fisica);
}

.tuerca__eje:hover {
  transform: scale(1.12);
}

.tuerca--arrastrando .tuerca__tirador,
.tuerca--arrastrando .tuerca__eje {
  cursor: grabbing;
}

/* mientras se arrastra, la marca sigue al dedo sin suavizado */
.tuerca--arrastrando,
.marca--siguiendo {
  transition: none;
}

/* el control real: existe para teclado y lectores, no se ve */
.tuerca__control {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.tuerca__control:focus-visible ~ .tuerca__pista {
  outline: var(--linea-gruesa) solid var(--violeta);
  outline-offset: 4px;
}

.tuerca__pie {
  margin-top: var(--e-1);
}

/* --------------------------------------------------------------------------
   11.b Lo que revela la tuerca
   -------------------------------------------------------------------------- */

.banco__revelado {
  display: grid;
}

/* las cuatro fichas se apilan en la misma celda: asi el alto lo marca la
   mas larga y no hay salto de layout al cambiar de modo */
.revelado {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-media) var(--ease-salida),
    transform var(--dur-media) var(--ease-salida),
    visibility 0s linear var(--dur-media);
}

.revelado[data-activo='true'] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}

.revelado__indice {
  margin-bottom: var(--e-2);
}

.revelado h2 {
  font-size: var(--t-h2);
  margin-bottom: var(--e-2);
}

.revelado__entrada {
  font-size: var(--t-lede);
  color: var(--lapiz);
  max-width: 46ch;
  margin-bottom: var(--e-3);
}

.revelado__lista {
  list-style: none;
  display: grid;
  gap: var(--e-2);
  border-top: var(--linea-fina) solid var(--regla);
  padding-top: var(--e-2);
  margin-bottom: var(--e-4);
}

.revelado__lista li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--e-1);
  font-size: var(--t-corto);
  color: var(--lapiz);
  padding-bottom: var(--e-2);
  border-bottom: var(--linea-fina) solid var(--regla);
}

/* raya, no punto: el punto es de la marca y no se repite como vineta */
.revelado__lista li::before {
  content: '';
  width: 0.875rem;
  height: var(--linea-gruesa);
  margin-top: 0.72em;
  background: var(--violeta);
}

.revelado__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--t-corto);
  font-weight: var(--w-fuerte);
  color: var(--violeta-fuerte);
  text-decoration: none;
  border-bottom: var(--linea-gruesa) solid transparent;
  transition: border-color var(--dur-rapida) var(--ease-salida);
}

.revelado__enlace:hover {
  border-bottom-color: var(--violeta-fuerte);
}

.revelado__enlace:hover .boton__flecha {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   11.c Secciones. Ritmo tonal
   El violeta atraviesa la pagina en tres profundidades: papel, humo y tinta.
   El oscuro aparece una sola vez y al final, como cierre, nunca suelto en
   medio de la pagina.
   -------------------------------------------------------------------------- */

.seccion {
  padding-block: var(--sec-normal);
  border-top: var(--linea-fina) solid var(--regla);
}

.seccion--corta { padding-block: var(--sec-corta); }
.seccion--humo  { background: var(--violeta-humo); border-top-color: var(--violeta-nota); }

.seccion--tinta {
  background: var(--violeta-tinta);
  color: var(--papel);
  border-top: none;
  padding-block: var(--sec-amplia);
}

.seccion--tinta .spec { color: var(--humo-claro); }
.seccion--tinta .seccion__entrada { color: var(--humo-claro); }

.seccion__titular {
  font-size: var(--t-h1);
  max-width: 18ch;
  margin-bottom: var(--e-3);
}

.seccion__entrada {
  font-size: var(--t-lede);
  color: var(--lapiz);
  max-width: 58ch;
}

/* declaracion de posicionamiento: una sola frase, mucho aire */
.declara {
  display: grid;
  grid-template-columns: repeat(var(--columnas), 1fr);
  gap: var(--e-3);
}

.declara .spec { grid-column: 1 / -1; }

.declara__titular {
  grid-column: 1 / span 7;
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: none;
  margin-block: var(--e-3);
}

.declara__cuerpo {
  grid-column: 8 / span 5;
  align-self: end;
  color: var(--lapiz);
  font-size: var(--t-lede);
  padding-top: var(--e-2);
  border-top: var(--linea-fina) solid var(--regla);
}

/* --------------------------------------------------------------------------
   11.d Servicios. Filas de ancho completo, no una grilla de tarjetas
   -------------------------------------------------------------------------- */

.servicios {
  margin-top: var(--e-5);
  border-top: var(--linea-fina) solid var(--regla);
}

.servicio {
  border-bottom: var(--linea-fina) solid var(--regla);
}

.servicio__cabecera {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.1fr) 2rem;
  align-items: baseline;
  gap: var(--e-3);
  width: 100%;
  padding-block: var(--e-3);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: color var(--dur-rapida) var(--ease-salida);
}

.servicio__cabecera:hover { color: var(--violeta-fuerte); }

.servicio__numero { align-self: center; }

.servicio__nombre {
  font-family: var(--f-display);
  font-weight: var(--w-titular);
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.servicio__entrada {
  font-size: var(--t-corto);
  color: var(--lapiz);
  max-width: 46ch;
}

/* el signo mas que se convierte en menos al abrir */
.servicio__signo {
  position: relative;
  justify-self: end;
  align-self: center;
  width: 0.875rem;
  height: 0.875rem;
}

.servicio__signo::before,
.servicio__signo::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--linea-gruesa);
  margin-top: -1px;
  background: currentColor;
  transition: transform var(--dur-media) var(--ease-fisica);
}

.servicio__signo::after { transform: rotate(90deg); }

.servicio[data-abierto='true'] .servicio__signo::after { transform: rotate(0deg); }

.servicio__cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-media) var(--ease-salida);
}

.servicio[data-abierto='true'] .servicio__cuerpo { grid-template-rows: 1fr; }

.servicio__lista {
  overflow: hidden;
  list-style: none;
  display: grid;
  gap: var(--e-2);
  padding-left: calc(3.5rem + var(--e-3));
}

.servicio[data-abierto='true'] .servicio__lista { padding-bottom: var(--e-4); }

.servicio__lista li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--e-1);
  font-size: var(--t-corto);
  color: var(--lapiz);
  max-width: 60ch;
}

.servicio__lista li::before {
  content: '';
  width: 0.875rem;
  height: var(--linea-gruesa);
  margin-top: 0.72em;
  background: var(--violeta);
}

/* --------------------------------------------------------------------------
   11.e Diferencial
   -------------------------------------------------------------------------- */

.diferencial {
  display: grid;
  grid-template-columns: repeat(var(--columnas), 1fr);
  gap: var(--e-5) var(--e-3);
}

.diferencial__intro { grid-column: 1 / span 6; }

.pilares {
  grid-column: 7 / span 6;
  display: grid;
  gap: 0;
  border-top: var(--linea-fina) solid var(--violeta-nota);
}

.pilar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--e-3);
  padding-block: var(--e-3);
  border-bottom: var(--linea-fina) solid var(--violeta-nota);
}

.pilar dt {
  font-family: var(--f-display);
  font-weight: var(--w-fuerte);
  font-size: var(--t-h3);
  letter-spacing: -0.02em;
}

.pilar dd {
  font-size: var(--t-corto);
  color: var(--lapiz);
}

/* --------------------------------------------------------------------------
   11.f Proceso. Una secuencia real, por eso si va numerada
   -------------------------------------------------------------------------- */

.pasos {
  list-style: none;
  margin-top: var(--e-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--linea-gruesa) solid var(--tinta);
}

.paso {
  padding: var(--e-3) var(--e-3) var(--e-5) 0;
  border-right: var(--linea-fina) solid var(--regla);
  position: relative;
}

.paso:last-child { border-right: none; }

.paso::before {
  content: '';
  position: absolute;
  top: calc(var(--linea-gruesa) * -1 - 3px);
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--violeta);
  border-radius: 50%;
}

.paso__numero { display: block; margin-bottom: var(--e-3); }

.paso__nombre {
  font-size: var(--t-h3);
  margin-bottom: var(--e-1);
}

.paso__texto {
  font-size: var(--t-corto);
  color: var(--lapiz);
}

/* --------------------------------------------------------------------------
   11.g Clientes
   -------------------------------------------------------------------------- */

.clientes__intro { max-width: 62ch; }

.clientes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--linea-fina);
  margin-top: var(--e-5);
  background: var(--violeta-nota);
  border: var(--linea-fina) solid var(--violeta-nota);
}

.cliente {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-3);
  background: var(--violeta-humo);
  font-family: var(--f-display);
  font-weight: var(--w-medio);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  transition: background var(--dur-rapida) var(--ease-salida);
}

.cliente:hover { background: var(--lamina); }

.cliente__sector { font-weight: 400; }

.aviso {
  margin-top: var(--e-3);
  padding-left: var(--e-3);
  border-left: var(--linea-gruesa) solid var(--violeta);
  max-width: 62ch;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   11.h Contacto
   -------------------------------------------------------------------------- */

.contacto {
  display: grid;
  grid-template-columns: repeat(var(--columnas), 1fr);
  gap: var(--e-6) var(--e-3);
}

.contacto__lado { grid-column: 1 / span 5; }
.formulario { grid-column: 7 / span 6; }

.correos {
  list-style: none;
  display: grid;
  gap: 0;
  margin-top: var(--e-4);
  border-top: var(--linea-fina) solid rgba(255, 255, 255, 0.14);
}

.correos li {
  display: grid;
  gap: var(--e-1);
  padding-block: var(--e-2);
  border-bottom: var(--linea-fina) solid rgba(255, 255, 255, 0.14);
}

.correos a {
  font-family: var(--f-spec);
  font-size: var(--t-corto);
  color: var(--papel);
  text-decoration: none;
  border-bottom: var(--linea-fina) solid transparent;
  justify-self: start;
  transition: color var(--dur-rapida) var(--ease-salida),
              border-color var(--dur-rapida) var(--ease-salida);
}

.correos a:hover {
  color: var(--violeta-claro);
  border-bottom-color: var(--violeta-claro);
}

.contacto__lugares { margin-top: var(--e-4); }

.campo {
  display: grid;
  gap: var(--e-1);
  margin-bottom: var(--e-3);
}

.campo label {
  font-family: var(--f-spec);
  font-size: var(--t-spec);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--humo-claro);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: var(--e-2);
  background: transparent;
  border: var(--linea-fina) solid rgba(255, 255, 255, 0.28);
  color: var(--papel);
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);
  transition: border-color var(--dur-rapida) var(--ease-salida);
}

.campo select { color: var(--papel); }
.campo select option { color: var(--tinta); }

.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--violeta-claro); }

.campo textarea { resize: vertical; min-height: 6rem; }

/* trampa para robots: invisible para personas, sin display none para que
   los rellenadores automaticos si la vean */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__enviar { margin-top: var(--e-2); }

.formulario__enviar[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.seccion--tinta .aviso {
  border-left-color: var(--violeta-claro);
  color: var(--humo-claro);
}

/* --------------------------------------------------------------------------
   11.i Pie
   -------------------------------------------------------------------------- */

.pie {
  background: var(--violeta-tinta);
  color: var(--papel);
  padding-bottom: var(--e-5);
}

.pie__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e-3);
  padding-top: var(--e-4);
  border-top: var(--linea-fina) solid rgba(255, 255, 255, 0.14);
}

.pie__marca { color: var(--papel); }
.pie__marca .marca { height: 1.75rem; }
.pie .spec { color: var(--humo-claro); }

/* --------------------------------------------------------------------------
   12. Entradas
   -------------------------------------------------------------------------- */

/* El contenido es visible por defecto. Solo se esconde cuando el script
   confirmo que puede revelarlo, para que un fallo de JS nunca deje la
   pagina en blanco. */
.js-rv .rv {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-larga) var(--ease-salida),
    transform var(--dur-larga) var(--ease-salida);
  transition-delay: var(--rv-retardo, 0ms);
}

.js-rv .rv.rv--visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   13. Respuesta movil
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero__marca,
  .hero__titular,
  .hero__campo,
  .hero__pie {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .hero__marca   { order: 1; }
  .hero__titular { order: 2; }
  .hero__pie     { order: 3; margin-top: 0; }

  /* El campo se activa con el puntero. En tactil no hay puntero que lo
     despierte, seria decoracion muerta ocupando media pantalla y gastando
     bateria en el dispositivo con menos potencia. Fuera. */
  .hero__campo { display: none; }

  .banco__grid {
    grid-template-columns: 1fr;
    gap: var(--e-5);
  }

  .declara__titular,
  .declara__cuerpo,
  .diferencial__intro,
  .pilares,
  .contacto__lado,
  .formulario {
    grid-column: 1 / -1;
  }

  .declara__cuerpo { padding-top: var(--e-3); }

  .pasos { grid-template-columns: repeat(2, 1fr); }
  .paso:nth-child(2) { border-right: none; }
  .paso:nth-child(-n+2) { border-bottom: var(--linea-fina) solid var(--regla); }

  .servicio__cabecera {
    grid-template-columns: 3rem 1fr 1.5rem;
    row-gap: var(--e-1);
  }

  .servicio__entrada { grid-column: 2 / span 1; }
  .servicio__lista { padding-left: calc(3rem + var(--e-3)); }

  .pilar { grid-template-columns: 1fr; gap: var(--e-1); }
}

@media (max-width: 520px) {
  .hero__acciones .boton {
    width: 100%;
    justify-content: space-between;
  }

  .banco__mando {
    padding: var(--e-3);
  }

  .revelado__lista li,
  .servicio__lista li {
    grid-template-columns: 1.25rem 1fr;
  }

  .pasos { grid-template-columns: 1fr; }
  .paso { border-right: none; border-bottom: var(--linea-fina) solid var(--regla); padding-bottom: var(--e-3); }
  .paso:last-child { border-bottom: none; }

  .servicio__lista { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   14. Movimiento reducido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js-rv .rv {
    opacity: 1;
    transform: none;
  }
}