/* Ardaia Studio — landing M0.
   Este archivo NO define color. Todo sale de assets/tokens.css, que es una copia
   verificada del repo Ardaia. Un valor de color escrito aquí es marca decidida en
   el sitio equivocado, y sincronizar-marca.py --check lo rechaza. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* Columna, no centrado a secas: la firma va abajo a la derecha y el bloque
   principal se centra en el hueco que sobra. Con `position: absolute` la firma
   quedaría clavada a la esquina, pero en pantallas bajas se montaría encima del
   contenido; así se empuja y nunca solapa. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8);
  background-color: var(--color-ciruela-base);
  color: var(--color-texto-primary);
  font-family: var(--font-family-text);
  line-height: 1.5;
}

.portada {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 34rem;
  /* `margin: auto` en el eje vertical centra en el espacio libre. A diferencia
     de `justify-content: center`, si el contenido desborda no se corta arriba. */
  margin: auto 0;
  /* Colchón inferior que desplaza el bloque POR ENCIMA del centro geométrico.
     El lockup pesa mucho arriba y deja el titular visualmente hundido; sin este
     ajuste cae unos 80 px por debajo del centro del viewport.
     Cómo funciona: el colchón se suma al alto del bloque que se está centrando,
     así que el contenido visible sube la mitad de este valor. Deliberadamente
     NO lo compensa entero — el titular queda por encima del centro geométrico,
     que es donde el ojo espera el centro óptico, sin llegar a clavarlo. */
  padding-bottom: var(--space-12);
}

/* ---- Lockup -------------------------------------------------------------
   Ancho: 180 px en escritorio, 160 px en pantallas estrechas. El mínimo
   normativo del lockup vertical son 140 px de ancho (A6-construccion §6): por
   debajo NO se reduce, se conmuta a isotipo solo. Ambos valores quedan por
   encima, así que aquí no se llega a necesitar esa conmutación.

   El padding es el área de respeto: 12,7 % del ancho por los cuatro lados
   (ADR-006). Ese porcentaje es el del lockup VERTICAL y no es transferible —el
   horizontal usa 6,4 % y el isotipo 19,9 %—. Va como padding y no como margin
   para que no colapse con el margen del elemento siguiente.
   content-box es deliberado: el ancho declarado es el del dibujo, y el área de
   respeto se suma por fuera. Con border-box se la comería el propio ancho. */
.lockup {
  --lockup-ancho: 180px;
  width: var(--lockup-ancho);
  padding: calc(var(--lockup-ancho) * 0.127);
  box-sizing: content-box;
}

.lockup svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Titular y su recuadro animado (SPEC §8) ----------------------------
   El trazo está en reposo en cerezo y un puntero lo recorre dejando una estela
   con los tonos de la marca. No cambia el color de todo el borde a la vez.

   Cómo funciona, porque no es obvio: el borde se declara transparente y se
   pinta con dos capas de background. `padding-box` rellena el interior con el
   fondo de la página; `border-box` asoma por debajo solo en los 2 px del borde,
   y ahí es donde vive el degradado cónico. Girando su ángulo de origen, la
   estela recorre el perímetro respetando el border-radius, cosa que un
   pseudo-elemento rotado no hace.

   Ojo: el relleno `padding-box` es ciruela base. Si esta caja se llevara alguna
   vez a otro fondo, hay que cambiarlo ahí también o se verá el recorte. */

/* Sin @property una custom property no tiene tipo y no se puede interpolar:
   el ángulo saltaría de 0 a 360 sin recorrido intermedio. */
@property --angulo-trazo {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.titular-box {
  display: inline-block;
  max-width: 100%;
  /* Más aire por arriba que el que el método tiene sobre el lockup: el par
     método → titular se lee como una unidad, y el salto mayor va donde está el
     giro, no dentro de él. */
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-8);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--color-ciruela-base), var(--color-ciruela-base)) padding-box,
    var(--trazo-puntero) border-box;
  animation: recorrer-trazo 8s linear infinite;
  /* Sin `isolation: isolate` a propósito: así el halo (z-index -1) sale al
     contexto de apilamiento raíz y se pinta DETRÁS del trazo nítido en vez de
     encima, que lo emborronaría en lugar de realzarlo. */
  position: relative;
}

/* La estela, en una variable porque el halo la reutiliza y las dos capas TIENEN
   que ser el mismo degradado o se ven dos punteros desfasados.

   Ocupa 75° de los 360 (21 % del perímetro): concentrada a propósito. Una
   estela larga y suave se lee como «el borde cambia de color»; una corta con
   frente nítido se lee como un puntero que pasa, que es lo pedido.

   La cabeza va en perla —el tono del isotipo, 14,34:1 sobre ciruela— y ahí está
   casi todo el salto de visibilidad: contra el cerezo de reposo (5,63:1) el
   frente destaca más del doble. No es color nuevo: es el mismo token que ya
   usan el titular y el símbolo.

   La cabeza es un tramo PLANO de 7° (353→360), no un pico instantáneo: un
   máximo de un solo grado es un vértice que el ojo apenas registra, y ensanchar
   el cuerpo del frente es lo que se lee como «más presencia» sin acelerar nada.
   Y el degradado cierra en perla, no volviendo a cerezo: la discontinuidad
   perla→cerezo entre 360° y 0° ES el frente nítido del puntero. Suavizarla en
   los dos últimos grados, como hacía la versión anterior, le quitaba filo.

   El ámbar sigue siendo «detalle puntual» del maestro §7 con más razón que
   antes: es un fragmento de estela que pasa, no un tramo en el que el recuadro
   entero se vuelve ámbar. */
.titular-box {
  --trazo-puntero: conic-gradient(from var(--angulo-trazo),
      var(--color-cerezo-500) 0deg 285deg,
      var(--color-ambar-500) 320deg,
      var(--color-cerezo-300) 342deg,
      var(--color-texto-primary) 353deg 360deg);

  /* El destello: SOLO la cabeza, el resto del perímetro transparente. Va en un
     gradiente aparte y no en el de arriba porque un `blur` es uniforme —no sabe
     desenfocar más un tramo que otro—, así que la única forma de que el frente
     brille por encima del resto de la estela es superponerle su propia capa.

     Está declarado aquí, en el padre, y no en el ::after, por el mismo motivo
     que `--trazo-puntero`: `--angulo-trazo` se registra con `inherits: false`,
     así que un pseudo-elemento que lo leyera recibiría su valor inicial (0deg)
     y el destello se quedaría clavado en una esquina. Declarado aquí se hereda
     ya sustituido, con el ángulo animado del padre dentro.

     Los tramos transparentes interpolan en alfa premultiplicado, que es lo que
     evita que la rampa pase por gris sucio antes de desaparecer. */
  --destello-puntero: conic-gradient(from var(--angulo-trazo),
      transparent 0deg 328deg,
      color-mix(in srgb, var(--color-texto-primary) 50%, transparent) 347deg,
      var(--color-texto-primary) 354deg 360deg);
}

/* Halo: la misma estela, desenfocada, detrás del trazo. Es lo que la despega
   del fondo — 2 px de línea nítida no dan presencia por muy brillantes que
   sean. Va aparte y bajo @supports porque `mask-composite` es lo único aquí sin
   soporte universal, y sin él la máscara no recorta: se vería un rectángulo de
   colores borroso en lugar de un borde. Donde no hay soporte, no hay halo y la
   página queda como estaba. */
@supports (mask-composite: exclude) {
  .titular-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 5px solid transparent;
    border-radius: inherit;
    background: var(--trazo-puntero) border-box;
    mask:
      linear-gradient(black 0 0) content-box,
      linear-gradient(black 0 0);
    mask-composite: exclude;
    filter: blur(7px);
    opacity: 0.9;
    /* Sin animación propia, y no es un olvido: `--trazo-puntero` se hereda ya
       resuelto con el ángulo del padre, así que el halo lo sigue solo.
       Animarlo aquí también sería un segundo reloj capaz de desfasarse y
       partir el puntero en dos. Verificado: padre a 90/180/270°, halo igual. */
  }

  /* Destello de la cabeza, encima del halo.

     `inset` NEGATIVO, y es la clave de que se vea: con `inset: 0` la caja del
     pseudo-elemento coincide con la del padre y su borde crece hacia DENTRO,
     donde el relleno opaco de la caja (que empieza a 2 px del canto) lo tapa
     casi entero. Con banda de 10 px eso dejaba 8 px de luz escondidos bajo el
     propio recuadro y solo escapaba lo que empujaba el desenfoque: ensanchar la
     banda ocultaba más destello, no menos.
     Sacando la caja 3 px hacia fuera, la banda va de −3 a +2 respecto al canto:
     3 px quedan fuera del padre y se ven; los 2 interiores caen justo detrás del
     trazo nítido, que los tapa.

     Los 3 px son un compromiso medido. Con 7 px la luz llegaba a unos 13 px del
     canto contando el desenfoque y se leía como aura, no como destello; con 0 se
     esconde entera bajo el recuadro. El alcance total es `inset + blur`, y ese
     es el número que hay que mirar al tocar cualquiera de los dos.

     El radio se recalcula en vez de heredarse: una caja mayor con el mismo radio
     no es una curva paralela a la del padre — se abriría en las esquinas.

     Sin reloj propio, por la misma razón que el halo. */
  .titular-box::after {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: -1;
    border: 5px solid transparent;
    border-radius: calc(var(--radius-lg) + 3px);
    background: var(--destello-puntero) border-box;
    mask:
      linear-gradient(black 0 0) content-box,
      linear-gradient(black 0 0);
    mask-composite: exclude;
    /* Menos desenfoque que el halo (7 px), no más: el halo es resplandor de
       fondo y quiere ser difuso; el destello es un punto de luz y quiere estar
       concentrado. Con más blur que el halo se leía como niebla, no como brillo. */
    filter: blur(4px);
    /* A plena opacidad: el desenfoque ya reparte la energía de la cabeza y baja
       el pico por sí solo. Rebajarla encima era apagar dos veces. */
    opacity: 1;
  }
}

/* Lineal a propósito: un puntero que acelera y frena llama la atención, y el
   criterio sigue siendo «se nota, no distrae». */
@keyframes recorrer-trazo {
  to {
    --angulo-trazo: 360deg;
  }
}

.titular {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.125rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---- El método, sobre el titular ----------------------------------------
   Antes se llamaba `.subtitulo` y vivía debajo. Cambió de sitio y de papel: ya
   no explica al titular, lo prepara. El titular remata con la misma
   construcción —«diseñando antes de construirlo»— y esa repetición es
   deliberada; es lo que convierte la obra en método en vez de en retraso. */
.metodo {
  margin: var(--space-4) 0 0;
  max-width: 28rem;
  color: var(--color-texto-secondary);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Los dos verbos suben a perla sobre el lila del resto: destacan por jerarquía
   de texto, no por color de acento. Deliberado — el cerezo queda reservado al
   wordmark, al trazo y al email, y si además marcase palabras sueltas dejaría
   de señalar «esto es la marca / esto se puede pulsar». */
.metodo strong {
  color: var(--color-texto-primary);
  font-weight: 600;
}

/* ---- Valores ------------------------------------------------------------
   Perla sobre superficie ciruela: contraste holgado. El lockup bicolor sobre
   superficie sí estaría prohibido (A6-logo §A.6.4), pero esto es texto. */
.valores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
}

.valores li {
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-ciruela-superficie);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

/* ---- Firma --------------------------------------------------------------
   Esquina inferior derecha, pero por flujo, no por posicionamiento absoluto:
   es el último hijo del body y se alinea al final del eje transversal. */
.firma {
  align-self: flex-end;
  margin-top: var(--space-8);
  color: var(--color-texto-secondary);
  font-size: 0.8125rem;
}

/* Cerezo sobre ciruela: 5,63:1, AA (A6-logo §A.6.3). Subrayado además del
   color, porque el color solo no basta para señalar un enlace. */
.firma a {
  color: var(--color-cerezo-500);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

.firma a:hover {
  color: var(--color-cerezo-300);
}

.firma a:focus-visible {
  outline: 2px solid var(--color-cerezo-300);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Bajo ---------------------------------------------------------------
   En ventanas bajas el contenido ya llena la pantalla: no hay espacio libre que
   repartir, así que el colchón no puede subir nada y lo único que aporta es
   scroll. Se retira. */
@media (max-height: 680px) {
  .portada {
    padding-bottom: 0;
  }
}

/* ---- Estrecho ----------------------------------------------------------- */
@media (max-width: 480px) {

  /* A 360 px, 32 px por lado se comen el ancho útil del titular. */
  body {
    padding-inline: var(--space-4);
  }

  .lockup {
    --lockup-ancho: 160px;
  }

  .valores {
    margin-top: var(--space-8);
  }

  /* Centrada en móvil: a 360 px una firma pegada al margen derecho se lee como
     un descuadre, no como una firma. */
  .firma {
    align-self: center;
    text-align: center;
  }
}

/* Nadie con «reduce» activo debería recibir un bucle indefinido. Hay que
   retirar también el background: con la animación parada, el cónico se
   congelaría con la estela clavada en una esquina. Se vuelve al borde plano. */
@media (prefers-reduced-motion: reduce) {
  .titular-box {
    animation: none;
    background: none;
    border-color: var(--color-cerezo-500);
  }

  .titular-box::before,
  .titular-box::after {
    display: none;
  }
}