/* ═══════════════════════════════════════════════════════════════════════════
   TACTO · lo que hace que una web responda al dedo

   Por qué existe: el 21/09/2026 Natxo dijo que las webs estaban bien pero que
   «se nota que no has pasado emil y por eso quedan tan básicas». Tenía razón, y
   al auditarlas salió el motivo exacto: **CERO reglas `:active` en las cuatro
   demos.** Ni un botón, ni un enlace, ni una pastilla daba señal alguna al
   pulsarla. La primera regla de la skill de Emil Kowalski es justamente ésa:

     «Los botones tienen que sentirse receptivos. Añade `transform:scale(0.97)`
      al `:active`. Da respuesta instantánea y hace que la interfaz parezca que
      de verdad está escuchando al usuario.»

   Es invisible de uno en uno y es lo que separa una web que se siente viva de
   una que se siente una foto. Nadie te dice «le falta el `:active`»: te dice
   que se ve básica.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Los pulsables reales de cada demo. No hay colisión: cada web usa los suyos.
   chris y laysa → .pil · karen → .pastilla · cristina → .btn */
.pil, .pastilla, .btn, .marca, .logo, .cita,
nav a, .acciones a, button{
  /* ⚠️ SOLO `transform`, nunca `all`. Nombrar la propiedad es lo que evita que
     el navegador vigile cuarenta más en cada fotograma. */
  transition: transform 160ms cubic-bezier(.16,1,.3,1),
              opacity   160ms cubic-bezier(.16,1,.3,1);
  /* El recuadro gris que pinta Android encima de cualquier cosa pulsable.
     Se quita porque el `:active` de abajo hace ese trabajo, y mejor. */
  -webkit-tap-highlight-color: transparent;
}

.pil:active, .pastilla:active, .btn:active,
.marca:active, .logo:active, .cita:active,
nav a:active, .acciones a:active, button:active{
  /* Entre 0,95 y 0,98. Por debajo parece que el botón se cae; por encima no se
     nota. `scale` arrastra también al contenido —texto e icono—, que es
     precisamente lo que hace que parezca un objeto físico y no una capa. */
  transform: scale(.97);
}

/* ── Las superficies que no dibujé yo ──────────────────────────────────────
   Selección, cursor de texto, barra de desplazamiento y anillo de foco vienen
   con los valores de fábrica del navegador, que no pertenecen a ningún sistema
   de diseño. Teñirlas es la señal más barata de que una página está construida
   y no ensamblada, y es la que más se salta. El color sale de cada demo con
   `--tinte`, así que esto no impone paleta a nadie. */
/* ⚠️ El valor de reserva va EN CADA USO, nunca en un `:root` de este archivo.
   Esta hoja se carga DESPUÉS de la de cada demo, así que un `:root{--tinte:…}`
   aquí ganaría al de la casa por ser el último a igual especificidad, y las
   cuatro webs se quedaban con el cursor y la selección en negro de fábrica.
   Ya pasó una vez, el 21/09/2026. */

::selection{ background: color-mix(in srgb, var(--tinte, currentColor) 28%, transparent) }
html{ caret-color: var(--tinte, currentColor) }

/* Barra de desplazamiento fina y del color de la casa, no gris de Windows. */
@supports (scrollbar-width: thin){
  html{ scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--tinte, currentColor) 55%, transparent) transparent }
}

:where(a, button, [tabindex]):focus-visible{
  outline: 2px solid var(--tinte, currentColor);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Escalonado ────────────────────────────────────────────────────────────
   Cuando varios elementos entran a la vez, entran en cascada. Los retardos van
   cortos —45 ms— porque los largos hacen que la web parezca lenta en vez de
   cuidada, y el escalonado es decoración: nunca bloquea el uso. */
[data-escalona] > *{ transition-delay: 0ms }
[data-escalona] > *:nth-child(2){ transition-delay:  45ms }
[data-escalona] > *:nth-child(3){ transition-delay:  90ms }
[data-escalona] > *:nth-child(4){ transition-delay: 135ms }
[data-escalona] > *:nth-child(5){ transition-delay: 180ms }
[data-escalona] > *:nth-child(6){ transition-delay: 225ms }
[data-escalona] > *:nth-child(7){ transition-delay: 270ms }

@media (prefers-reduced-motion: reduce){
  .pil:active, .pastilla:active, .btn:active, .marca:active,
  .logo:active, .cita:active, nav a:active, button:active{ transform: none }
  [data-escalona] > *{ transition-delay: 0ms !important }
}

/* ── El hover que se queda pegado en el móvil ──────────────────────────────
   Un dedo dispara `:hover` al tocar, y el estado se queda puesto hasta que se
   toca otra cosa. Resultado: en el teléfono quedan tarjetas agrandadas y fotos
   ampliadas por sitios, que es la clase de detalle que hace que una web
   «parezca mal hecha» sin que nadie sepa señalar por qué.

   Entre las cuatro demos hay 42 reglas `:hover` y solo 7 estaban protegidas.
   Envolverlas una a una en `@media (hover:hover)` sería tocar 35 sitios; esto
   hace lo mismo desde un único lugar: donde no hay ratón de verdad, el hover no
   mueve nada. Los cambios de color se quedan, que no molestan y ayudan a ver
   qué se ha tocado. */
@media (hover: none), (pointer: coarse){
  .pil:hover, .pastilla:hover, .btn:hover, .marca:hover, .logo:hover,
  .carta:hover, .panel:hover, .trat:hover, .esp:hover, .carta:hover figure img,
  .panel:hover figure img, .trat-foto:hover img, figure:hover img{
    transform: none;
  }
}