/* ==========================================================
   Huecora — colorines
   ----------------------------------------------------------
   La paleta de marca es de tierra y eso está bien: distingue a
   Huecora de las mil apps azules. Pero con un solo acento, una
   rejilla de seis tarjetas sale seis veces del mismo color y
   la página entera suena a una nota sostenida.

   Esta capa monta una **rueda de seis tonos** y la hace girar
   por todo lo que se repite: las tarjetas, los pasos, las
   horas del martes, las cifras de la franja, los puntos de la
   cinta y los titulillos de cada sección. El tercer elemento
   de una fila ya no es del color del primero, y eso solo ya
   hace que la página respire.

   Tres reglas:

     1. **Cada tono trae su versión para texto.** El dorado a
        pelo sobre blanco da 2,4:1 y no se lee. `--c-texto` es
        el mismo tono bajado hasta pasar el AA, y es el único
        que toca letra pequeña.
     2. **El color se hereda, no se repite.** Cada elemento
        recibe `--c`, `--c-suave`, `--c-texto` y `--c-grad` por
        su posición, y de ahí tiran el icono, el filo, el
        número gigante y el foco del cursor. Añadir una tarjeta
        no obliga a tocar nada.
     3. **Lo semántico no entra en la rueda.** El verde de «lo
        haces tú» y el coral de «lo hace Huecora» significan
        algo. Esos no giran.
   ========================================================== */

:root {
  /* La rueda. Seis tonos separados en el círculo y todos algo
     terrosos, para que convivan con el ladrillo de la marca. */
  --c1: #e2714a; /* coral */
  --c1-suave: #fbe6de;
  --c1-texto: #a6533a;
  --c1-grad: linear-gradient(135deg, #ff8a5c, #e2714a 55%, #c8563a);

  --c2: #4f9e78; /* verde */
  --c2-suave: #e0efe7;
  --c2-texto: #35755a;
  --c2-grad: linear-gradient(135deg, #6fc79a, #4f9e78 55%, #3d7c5e);

  --c3: #d9962f; /* dorado */
  --c3-suave: #fbeedb;
  --c3-texto: #8a5c10;
  --c3-grad: linear-gradient(135deg, #f0b955, #d9962f 55%, #b87a1d);

  --c4: #7b4b6b; /* ciruela */
  --c4-suave: #f2e7ef;
  --c4-texto: #6b3e5c;
  --c4-grad: linear-gradient(135deg, #a56a90, #7b4b6b 55%, #5e3851);

  --c5: #3d7f96; /* azul de loza */
  --c5-suave: #e2eff4;
  --c5-texto: #2c6076;
  --c5-grad: linear-gradient(135deg, #59a3bb, #3d7f96 55%, #2c6076);

  --c6: #c04a6e; /* frambuesa */
  --c6-suave: #fbe4ea;
  --c6-texto: #9c2f52;
  --c6-grad: linear-gradient(135deg, #de6d8e, #c04a6e 55%, #a03354);
}

/* ---------- 1. La rueda gira ---------- */

/*
  Un bloque por tono, con todo lo que lo lleva. Es la única
  parte de este fichero que hay que tocar para meter la rueda
  en una lista nueva: se añade su selector aquí y el resto del
  fichero ya sabe qué hacer.
*/
.bento > *:nth-child(6n + 1),
.pain > *:nth-child(6n + 1),
.dia-paso:nth-child(6n + 1),
.steps > *:nth-child(6n + 1),
.strip-item:nth-child(6n + 1),
main > section:nth-of-type(6n + 1) {
  --c: var(--c1);
  --c-suave: var(--c1-suave);
  --c-texto: var(--c1-texto);
  --c-grad: var(--c1-grad);
}
.bento > *:nth-child(6n + 2),
.pain > *:nth-child(6n + 2),
.dia-paso:nth-child(6n + 2),
.steps > *:nth-child(6n + 2),
.strip-item:nth-child(6n + 2),
main > section:nth-of-type(6n + 2) {
  --c: var(--c2);
  --c-suave: var(--c2-suave);
  --c-texto: var(--c2-texto);
  --c-grad: var(--c2-grad);
}
.bento > *:nth-child(6n + 3),
.pain > *:nth-child(6n + 3),
.dia-paso:nth-child(6n + 3),
.steps > *:nth-child(6n + 3),
.strip-item:nth-child(6n + 3),
main > section:nth-of-type(6n + 3) {
  --c: var(--c3);
  --c-suave: var(--c3-suave);
  --c-texto: var(--c3-texto);
  --c-grad: var(--c3-grad);
}
.bento > *:nth-child(6n + 4),
.pain > *:nth-child(6n + 4),
.dia-paso:nth-child(6n + 4),
.steps > *:nth-child(6n + 4),
.strip-item:nth-child(6n + 4),
main > section:nth-of-type(6n + 4) {
  --c: var(--c4);
  --c-suave: var(--c4-suave);
  --c-texto: var(--c4-texto);
  --c-grad: var(--c4-grad);
}
.bento > *:nth-child(6n + 5),
.pain > *:nth-child(6n + 5),
.dia-paso:nth-child(6n + 5),
.steps > *:nth-child(6n + 5),
.strip-item:nth-child(6n + 5),
main > section:nth-of-type(6n + 5) {
  --c: var(--c5);
  --c-suave: var(--c5-suave);
  --c-texto: var(--c5-texto);
  --c-grad: var(--c5-grad);
}
.bento > *:nth-child(6n),
.pain > *:nth-child(6n),
.dia-paso:nth-child(6n),
.steps > *:nth-child(6n),
.strip-item:nth-child(6n),
main > section:nth-of-type(6n) {
  --c: var(--c6);
  --c-suave: var(--c6-suave);
  --c-texto: var(--c6-texto);
  --c-grad: var(--c6-grad);
}

/* ---------- 2. Las tarjetas ---------- */

/*
  El icono deja de ser siempre teja o siempre verde, y deja de ser un
  cuadradito pálido: va relleno del degradado de su tono, con el trazo
  en blanco y su propia sombra de color debajo. Una rejilla de seis
  iconos es lo primero que se mira de la sección; que sean seis
  pastillas de colores distintos es casi todo el trabajo.
*/
.card .icon {
  background: var(--c-grad, var(--grad-calido));
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c, var(--coral)) 34%, transparent);
}
.card .icon svg {
  stroke-width: 2;
}

/* Y un velo del mismo tono en la tarjeta entera, al 3 %: no se ve, se nota. */
.card {
  background: color-mix(in srgb, var(--c, var(--coral)) 3%, var(--paper));
}
.card--oscura {
  background: var(--ink);
}
.card--oscura .icon {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c, var(--coral)) 40%, transparent);
}

/* El filo de arriba y el lavado al pasar, del tono de la tarjeta. */
.card::before {
  background: var(--c-grad, var(--grad-calido));
}
.card::after {
  background: radial-gradient(
    420px circle at 20% 0%,
    color-mix(in srgb, var(--c, var(--coral)) 11%, transparent),
    transparent 65%
  );
}

/* Y el foco del cursor, que hasta ahora era coral en todo. */
.foco::after {
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--c, var(--coral-bright)) 17%, transparent),
    transparent 62%
  );
}
.card--oscura.foco::after,
.cta-box.foco::after,
.calc-out.foco::after {
  background: radial-gradient(
    440px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--c, var(--coral-bright)) 26%, transparent),
    transparent 60%
  );
}

/* La comilla de las tarjetas del problema, en el tono de cada una. */
.pain .q {
  border-left: 3px solid var(--c, var(--terracotta));
  padding-left: 14px;
}

/* ---------- 3. Los titulillos de sección ---------- */

/*
  Cada sección estrena color en su «EL PROBLEMA», «TODO EN
  UNO», «UN MARTES CUALQUIERA»... Es el cambio más barato de
  todos y el que más se nota al bajar por la página.
*/
.eyebrow {
  color: var(--c-texto, var(--terracotta-strong));
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-grad, var(--grad-calido));
  flex: none;
}

/* ---------- 4. Las cifras y los pasos ---------- */

/*
  Aquí va `background-image` y no `background`. El atajo reinicia
  `background-clip`, y `background-clip: text` es justo lo que hace que el
  degradado se vea a través del número en vez de detrás de él: con el atajo,
  las cuatro cifras salían como cuatro barras de color con el texto
  transparente encima.
*/
.strip-item b {
  background-image: var(--c-grad, var(--grad-calido));
  -webkit-background-clip: text;
  background-clip: text;
}

/* El número gigante del fondo, perfilado en su tono. */
.step::before {
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c, var(--terracotta)) 42%, transparent);
}

/* ---------- 5. El martes, hora a hora ---------- */

/*
  El punto de cada hora toma su color de la rueda; el carril ya
  era un degradado, así que ahora la columna entera va de coral
  a verde pasando por todo lo demás.

  Las etiquetas de «quién lo hace» no entran: ahí el color
  significa algo y tiene que significar siempre lo mismo.
*/
.dia-paso.in::before {
  border-color: var(--c, var(--coral));
}
.dia-paso h3 {
  color: var(--c-texto, var(--ink));
}

/* ---------- 6. La cinta ---------- */

.cinta-grupo span:nth-child(6n + 1) i {
  background: var(--c1);
}
.cinta-grupo span:nth-child(6n + 2) i {
  background: var(--c2);
}
.cinta-grupo span:nth-child(6n + 3) i {
  background: var(--c3);
}
.cinta-grupo span:nth-child(6n + 4) i {
  background: #a56a90;
}
.cinta-grupo span:nth-child(6n + 5) i {
  background: #59a3bb;
}
.cinta-grupo span:nth-child(6n) i {
  background: #de6d8e;
}

/* ---------- 7. La tabla y la calculadora ---------- */

/* La columna de Huecora, que es la que hay que mirar. */
.compare thead th.us {
  background: linear-gradient(135deg, #e2714a, #c8563a 60%, #a6533a);
}
.compare td.us {
  background: linear-gradient(90deg, rgba(226, 113, 74, 0.09), rgba(226, 113, 74, 0.04));
  color: var(--c1-texto);
}
.compare td.yes::before {
  content: '✓ ';
  color: var(--c2-texto);
  font-weight: 700;
}
.compare td.us.yes::before {
  color: var(--c1-texto);
}
.compare td.no {
  color: var(--ink-muted);
}

/* La caja negra del resultado, con color dentro. */
.calc-out {
  background:
    radial-gradient(520px circle at 100% 0%, rgba(226, 113, 74, 0.3), transparent 62%),
    radial-gradient(420px circle at 0% 100%, rgba(61, 127, 150, 0.26), transparent 60%), var(--ink);
}

/*
  Los deslizadores, de color. Con `accent-color` y no pintando el
  tirador a mano: repintarlo obliga a `appearance:none` y entonces hay
  que rehacer también el carril, el foco y el teclado.
*/
.calc-in input[type='range'] {
  accent-color: var(--c1);
}

/* La cifra que ponemos nosotros, dicha y no escondida. */
.calc-fijo {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--c1-suave);
  border: 1px solid color-mix(in srgb, var(--c1) 22%, transparent);
  font-size: 0.89rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.calc-fijo b {
  color: var(--c1-texto);
}

/* ---------- 8. Preguntas y cierre ---------- */

/* El «+» de cada pregunta estrena color, y se pone verde al abrirse. */
.faq details:nth-child(6n + 1) summary::after {
  color: var(--c1-texto);
}
.faq details:nth-child(6n + 2) summary::after {
  color: var(--c2-texto);
}
.faq details:nth-child(6n + 3) summary::after {
  color: var(--c3-texto);
}
.faq details:nth-child(6n + 4) summary::after {
  color: var(--c4-texto);
}
.faq details:nth-child(6n + 5) summary::after {
  color: var(--c5-texto);
}
.faq details:nth-child(6n) summary::after {
  color: var(--c6-texto);
}
.faq details[open] {
  border-color: color-mix(in srgb, var(--c1) 34%, var(--line));
  box-shadow: var(--shadow-rica);
}

/* El pie, con la rueda entera en una línea de un píxel. */
.site-footer {
  border-top: 3px solid transparent;
  border-image: linear-gradient(
      90deg,
      var(--c1),
      var(--c3),
      var(--c2),
      var(--c5),
      var(--c4),
      var(--c6)
    )
    1;
}

/* ---------- 9. El cielo del hero ---------- */

/*
  Dos manchas desvaídas pasaban por fondo. Tres, más saturadas,
  pasan por amanecer.
*/
.hero-aurora {
  opacity: 0.62;
}
.hero-aurora span:nth-child(1) {
  background: radial-gradient(circle at 30% 30%, #ffb08c, transparent 62%);
}
.hero-aurora span:nth-child(2) {
  background: radial-gradient(circle at 60% 40%, #9fd3b8, transparent 62%);
}
.hero-aurora span:nth-child(3) {
  width: 30vw;
  height: 30vw;
  left: 26%;
  top: 56%;
  background: radial-gradient(circle at 50% 50%, #f3cf9a, transparent 62%);
  animation: flotar 41s ease-in-out infinite;
}