/* ============================================================
   "¿Tienes un proyecto en mente?" · cierre antes del footer (js/hablar.js)
   Compartido por las propuestas 7 y 8. Se carga después de proyectos6.css
   y usa sus tokens (--accent, --accent-red, --accent-salmon).
   ============================================================ */
.hablar { background: var(--bg); padding: clamp(4.5rem,11vw,10rem) var(--pad) clamp(4rem,9vw,8rem);
  text-align: center; }

.hablar__tit { font-family: var(--disp); font-weight: 400; font-size: clamp(2.6rem, 9.2vw, 9.6rem);
  line-height: .9; letter-spacing: -0.045em; }
.hablar__l { display: block; overflow: hidden; padding-bottom: .06em; }
.hablar__l > span { display: inline-block; transform: translateY(108%);
  transition: transform 1.15s var(--ease); }
.hablar__l + .hablar__l > span { transition-delay: .1s; }
/* "mente": negra de entrada; al hacer scroll el degradado la barre de
   izquierda a derecha (misma técnica que las palabras de "Sobre mí" en
   proyectos6.css: máscara al doble de ancho, mitad transparente / mitad del
   color del texto, que se desliza sobre el degradado). La clase .is-color la
   pone js/hablar.js y se quita al volver a subir. */
.hablar__tit em { font-style: normal; color: var(--ink); transition: color .6s var(--ease);
  /* el fondo recortado al texto solo pinta dentro de la caja, y la "e" final
     de Archivo Black sobresale: se amplía la caja sin mover el texto */
  padding: 0 .08em; margin: 0 -.08em; }
.hablar.is-color .hablar__tit em { color: var(--accent); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hablar__tit em {
    background-image:
      linear-gradient(90deg, transparent 0%, transparent 50%, var(--ink) 50%, var(--ink) 100%),
      linear-gradient(90deg, var(--accent-red) 0%, var(--accent) 50%, var(--accent-salmon) 100%);
    /* En reposo el degradado mide 0 (si no, asoma como un filo rojizo en el
       borde suavizado de las letras); aparece al instante al activarse y se
       retira cuando la máscara ya lo ha vuelto a tapar. */
    background-size: 200% 100%, 0% 100%; background-repeat: no-repeat;
    background-position: 100% 0, 0 0;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    transition: background-position .9s var(--ease), background-size 0s .9s; }
  .hablar.is-color .hablar__tit em { background-position: 0 0, 0 0; background-size: 200% 100%, 100% 100%;
    transition: background-position .9s var(--ease), background-size 0s; }
}

.hablar__cuerpo { display: flex; flex-direction: column; align-items: center; gap: clamp(2rem,4vw,3rem);
  margin-top: clamp(2rem,4vw,3.4rem); opacity: 0; transform: translateY(40px);
  transition: opacity .9s var(--ease) .35s, transform 1.1s var(--ease) .35s; }
.hablar__txt { font-size: clamp(1.05rem, 1.45vw, 1.35rem); line-height: 1.5; max-width: 60ch; text-wrap: balance; }

/* El botón es el .boton común (proyectos6.css) */

.hablar.is-in .hablar__l > span { transform: none; }
.hablar.is-in .hablar__cuerpo { opacity: 1; transform: none; }

/* Movimiento reducido: el título y el cuerpo entran con fundido, sin subir */
@media (prefers-reduced-motion: reduce) {
  .hablar__cuerpo, .hablar__l > span { transform: none !important; }
  .hablar__l > span { opacity: 0; transition: opacity 1.2s var(--ease); }
  .hablar__cuerpo { transition-duration: 1.2s !important; }
  .hablar__l + .hablar__l > span { transition-delay: .15s; }
  .hablar.is-in .hablar__l > span { opacity: 1; }
}