/* ==========================================================================
   Animal Libre — capa v7
   Fotos reales, motor de puntos con varios roles, pictogramas de puntos,
   Cursos Veganos, Documentales y 2042. Hover sereno, sin temblores.
   ========================================================================== */

/* ---------- Fotos ---------- */
.al-foto { position: relative; overflow: hidden; border-radius: var(--radio); background: var(--hueso-2); }
.al-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
html.al-js .al-revela img { opacity: 0; }
.al-revela-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.al-oscura .al-foto { background: var(--tinta-3); }

/* ---------- Hover sereno (sin inclinaciones ni saltos) ---------- */
.al-forma:hover { box-shadow: 0 18px 44px rgba(27,22,32,.08); border-color: rgba(126,23,190,.3); }
.al-persona:hover { box-shadow: none; }
a:hover .al-foto img, .al-producto:hover .al-foto img, .al-persona:hover img { transform: scale(1.035); }
.mil-ball { transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1); }

/* ---------- Pictogramas de puntos ---------- */
.al-picto { width: 54px; height: 54px; flex: none; color: var(--texto); }
.al-picto circle { fill: currentColor; opacity: .16; }
.al-picto circle.on { opacity: 1; transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.2,.8,.2,1), fill .4s ease; transition-delay: calc(var(--d) * 22ms); }
a:hover .al-picto circle.on, .al-etapa.al-activa .al-picto circle.on, .al-tema:hover .al-picto circle.on { transform: scale(1.25); fill: var(--violeta); }
.al-oscura .al-picto { color: var(--hueso); }
.al-etapa-icono { width: 64px; height: 64px; }
.al-etapa-icono .al-picto { width: 34px; height: 34px; }
.al-etapa.al-activa .al-etapa-icono .al-picto { color: #fff; }
.al-etapa.al-activa .al-etapa-icono .al-picto circle.on { fill: #fff; }
.al-alianza-icono .al-picto { width: 34px; height: 34px; color: var(--lila); }
.al-premio .al-picto { width: 38px; height: 38px; color: var(--lila); }
.al-sis-iconos .al-picto { width: 64px; height: 64px; padding: 12px; border-radius: 14px; background: var(--hueso); }

/* ---------- Manifiesto con foto ---------- */
.al-manif-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(40px, 7vw, 120px); align-items: end; }
.al-manif-grid .al-manifiesto-frase { margin-bottom: clamp(48px, 6vw, 88px); }
.al-manif-foto { margin: 0; }
.al-manif-foto .al-foto { aspect-ratio: 4 / 5; }
.al-manif-foto figcaption { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--texto-2); }
@media (max-width: 991px) { .al-manif-grid { grid-template-columns: 1fr; } .al-manif-foto .al-foto { aspect-ratio: 4 / 3; } }

/* ---------- Alguien: retratos en semitono ---------- */
.al-alguien-escena { background: var(--papel); }
.al-alguien-escena::before { display: none; }
.al-alguien-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; transition: opacity .6s ease; }
.al-alguien-foto { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .7s ease; }
.al-alguien-foto img { width: 100%; height: 100%; object-fit: cover; }
.al-alguien-escena:hover .al-alguien-foto.al-activo { opacity: 1; z-index: 2; }
.al-alguien-escena:hover .al-alguien-lienzo { opacity: 0; }
.al-alguien-contador { z-index: 3; }
.al-alguien-pista { position: absolute; right: 24px; bottom: 24px; z-index: 3; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); transition: opacity .4s ease; }
.al-alguien-escena:hover .al-alguien-pista { opacity: 0; }
.al-ind-visual { display: none; }
@media (max-width: 991px) {
  .al-ind-visual { display: block; margin-bottom: 22px; }
  .al-ind-visual .al-foto { aspect-ratio: 4 / 3; }
  .al-ind-visual--silueta { padding: 20px 0; }
  .al-ind-animal { width: 160px; }
}

/* ---------- Cursos Veganos en el inicio ---------- */
.al-cv-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.al-cv-home-grid .al-lead { margin-top: 26px; }
.al-cv-datos { padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: var(--papel); }
.al-sec--papel .al-cv-datos, .al-sis .al-cv-datos { background: var(--hueso); }
.al-puntos-datos { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: clamp(6px, 1vw, 12px); }
.al-puntos-datos i { aspect-ratio: 1; border-radius: 50%; background: rgba(27,22,32,.1); transform: scale(.55); transition: transform .5s cubic-bezier(.2,.8,.2,1), background-color .5s ease; }
.al-puntos-datos i.al-on { transform: scale(1); background: var(--violeta); }
.al-puntos-datos i.al-on:nth-child(7n) { background: var(--magenta); }
.al-puntos-datos i.al-on:nth-child(11n) { background: var(--rojo); }
.al-cv-datos-leyenda { margin: 22px 0 0; font-size: .95rem; }
.al-cv-datos-leyenda b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.5rem; color: var(--texto); }
.al-cv-tematicas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: clamp(48px, 6vw, 88px); }
.al-tema { display: flex; flex-direction: column; gap: 18px; padding: 24px 20px; border-radius: var(--radio); background: var(--papel); color: var(--texto); text-decoration: none; transition: background-color .4s ease, color .4s ease; }
.al-tema .al-picto { width: 40px; height: 40px; }
.al-tema span { font-family: var(--display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; }
.al-tema:hover { background: var(--tinta); color: var(--hueso); }
.al-tema:hover .al-picto { color: var(--hueso); }
@media (max-width: 991px) { .al-cv-home-grid { grid-template-columns: 1fr; } .al-cv-tematicas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .al-cv-tematicas { grid-template-columns: 1fr 1fr; } .al-puntos-datos { grid-template-columns: repeat(10, minmax(0, 1fr)); } }

/* ---------- Documentales en el inicio ---------- */
.al-docs-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.al-doc-carta { display: block; color: var(--hueso); text-decoration: none; }
.al-doc-carta-img { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden; background: var(--tinta-3); margin-bottom: 20px; }
.al-doc-carta-img .al-foto { position: absolute; inset: 0; border-radius: 0; }
.al-doc-carta-img .al-foto img { filter: saturate(.85); }
.al-doc-carta-img .al-jaulas { position: absolute; inset: 0; }
.al-doc-carta-play { position: absolute; left: 22px; bottom: 22px; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(11,7,16,.55); backdrop-filter: blur(6px); transition: background-color .4s ease; }
.al-doc-carta-play .al-picto { width: 30px; height: 30px; color: var(--hueso); }
.al-doc-carta:hover .al-doc-carta-play { background: var(--violeta); }
.al-doc-carta-n { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,239,233,.5); margin-bottom: 8px; }
.al-doc-carta h3 { font-family: var(--display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--hueso); }
.al-doc-carta p { margin: 0; font-size: .95rem; }
@media (max-width: 991px) { .al-docs-fila { grid-template-columns: 1fr; } .al-doc-carta-img { aspect-ratio: 16 / 10; } }

/* ---------- Recorrido y bloques con fotos ---------- */
.al-proyecto-foto .al-foto { position: absolute; inset: 0; border-radius: 0; }
.al-bloque-visual .al-descubre .al-foto { position: absolute; inset: 0; border-radius: 0; }

/* ---------- Tienda y equipo con fotos ---------- */
.al-producto-foto { aspect-ratio: 4 / 5; margin-bottom: 18px; }
.al-persona-foto { overflow: hidden; }
.al-persona-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.al-equipo { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Galería (Quiénes somos) ---------- */
.al-galeria { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.al-galeria .al-foto { aspect-ratio: auto; }
.al-g1 { grid-column: 1 / span 4; grid-row: span 2; aspect-ratio: 677 / 1024; }
.al-g2 { grid-column: 5 / span 8; aspect-ratio: 16 / 9; }
.al-g3 { grid-column: 5 / span 4; aspect-ratio: 4 / 3; }
.al-g4 { grid-column: 9 / span 4; aspect-ratio: 4 / 3; }
@media (max-width: 767px) { .al-galeria { grid-template-columns: 1fr 1fr; } .al-g1, .al-g2, .al-g3, .al-g4 { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; } .al-g2 { grid-column: 1 / -1; aspect-ratio: 16 / 9; } }
.al-hito .al-foto { aspect-ratio: 16 / 10; }

/* ---------- Página Cursos Veganos ---------- */
.al-cv-intro-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.al-cv-intro .al-manifiesto-frase { margin-bottom: 48px; }
.al-cv-foto { margin: 0; }
.al-cv-foto .al-foto { aspect-ratio: 1; }
.al-cv-sellos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.al-cv-sellos li { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--linea); }
.al-cv-sellos .al-picto { width: 34px; height: 34px; }
.al-cv-sellos b { display: block; font-family: var(--display); font-weight: 500; font-size: 1.15rem; color: var(--texto); margin-bottom: 4px; }
.al-cv-sellos span { font-size: .92rem; color: var(--texto-2); line-height: 1.5; }
.al-temas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.al-tema-carta { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 26px 30px; min-height: 240px; border-radius: var(--radio); background: var(--hueso); color: var(--texto); text-decoration: none; transition: background-color .45s ease, color .45s ease; }
.al-tema-carta .al-picto { width: 44px; height: 44px; margin-bottom: auto; }
.al-tema-carta h3 { font-family: var(--display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.015em; margin: 26px 0 0; line-height: 1.15; }
.al-tema-carta p { margin: 0; font-size: .92rem; transition: color .45s ease; }
.al-tema-carta .al-icono { position: absolute; top: 26px; right: 24px; width: 20px; height: 20px; opacity: 0; transform: translateX(-6px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.al-tema-carta:hover { background: var(--tinta); color: var(--hueso); }
.al-tema-carta:hover p { color: rgba(244,239,233,.65); }
.al-tema-carta:hover .al-picto { color: var(--hueso); }
.al-tema-carta:hover .al-icono { opacity: 1; transform: none; }
.al-cursos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.al-curso { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3vw, 40px); border-radius: 22px; background: var(--papel); }
.al-curso-cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.al-curso-cabeza .al-picto { width: 46px; height: 46px; }
.al-curso-cabeza span { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.al-curso h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + .8vw, 1.8rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
.al-curso-docente { margin: 0 0 auto; padding-bottom: 22px; font-size: .9rem; }
.al-curso-docente b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.25rem; color: var(--texto); }
.al-curso .mil-button { align-self: flex-start; }
.al-programa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: end; }
.al-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: p; }
.al-pasos li { padding-top: 26px; border-top: 1px solid var(--linea); }
.al-pasos span { display: block; font-family: var(--serif); font-style: italic; font-size: 2.4rem; line-height: 1; color: var(--violeta); margin-bottom: 18px; }
.al-pasos h3 { font-family: var(--display); font-weight: 500; font-size: 1.35rem; margin: 0 0 8px; }
.al-pasos p { margin: 0; font-size: .95rem; }
.al-testimonios { overflow: hidden; }
.al-testimonios-pista { display: flex; width: max-content; animation: al-desfile 80s linear infinite reverse; margin-top: 10px; }
.al-testimonios-pista:hover { animation-play-state: paused; }
.al-testimonios-grupo { display: flex; gap: 18px; padding-right: 18px; }
.al-testimonios blockquote { width: clamp(280px, 30vw, 420px); margin: 0; padding: 32px; border-radius: 22px; background: var(--papel); }
.al-testimonios blockquote p { margin: 0 0 22px; font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.35; color: var(--texto); }
.al-testimonios cite { font-style: normal; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.al-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.al-faq details { border-bottom: 1px solid var(--linea); }
.al-faq details:first-child { border-top: 1px solid var(--linea); }
.al-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-family: var(--display); font-weight: 500; font-size: 1.2rem; color: var(--texto); }
.al-faq summary::-webkit-details-marker { display: none; }
.al-faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.al-faq details[open] summary::after { transform: rotate(45deg); }
.al-faq-r { overflow: hidden; }
.al-faq-r p { margin: 0 0 24px; max-width: 36rem; }
.al-cv-final-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.al-cv-final-foto { margin: 0; }
.al-cv-final-foto .al-foto { aspect-ratio: 3 / 4; }
@media (max-width: 991px) {
  .al-cv-intro-grid, .al-programa-grid, .al-faq-grid, .al-cv-final-grid { grid-template-columns: 1fr; }
  .al-temas { grid-template-columns: 1fr 1fr; } .al-cursos { grid-template-columns: 1fr; } .al-pasos { grid-template-columns: 1fr 1fr; } .al-cv-sellos { grid-template-columns: 1fr; }
}

/* ---------- Página Documentales ---------- */
.al-aviso-sensible { border-top: 1px solid var(--linea-o); border-bottom: 1px solid var(--linea-o); }
.al-aviso-sensible .al-ancho { display: flex; gap: 18px; align-items: center; padding-block: 22px; }
.al-aviso-sensible .al-picto { width: 30px; height: 30px; color: var(--lila); }
.al-aviso-sensible p { margin: 0; font-size: .92rem; max-width: 60rem; }
.al-doc-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.al-doc--inv .al-video { order: 2; }
.al-doc-grid--chico { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.al-doc { padding-block: calc(var(--al-sec) * .6); }
.al-doc + .al-doc { border-top: 1px solid var(--linea-o); }
.al-video { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: var(--tinta-3); }
.al-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.al-video-poster { filter: saturate(.7) brightness(.75); }
.al-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,7,16,0) 40%, rgba(11,7,16,.7)); pointer-events: none; }
.al-video-play { position: absolute; z-index: 2; left: 28px; bottom: 26px; display: inline-flex; align-items: center; gap: 14px; padding: 10px 22px 10px 10px; border: 0; border-radius: 60px; background: rgba(244,239,233,.95); color: var(--tinta); font: 500 .85rem var(--texto-f); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background-color .35s ease, color .35s ease; }
.al-video-play .al-picto { width: 44px; height: 44px; padding: 8px; border-radius: 50%; background: var(--violeta); color: #fff; }
.al-video-play .al-picto circle.on { fill: #fff; }
.al-video-play:hover { background: var(--violeta); color: #fff; }
.al-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.al-video--activo::after, .al-video--activo .al-video-play { display: none; }
.al-doc-num { display: block; font-family: var(--serif); font-style: italic; font-size: 4rem; line-height: 1; color: var(--lila); margin-bottom: 18px; }
.al-doc-texto h3 { font-family: var(--display); font-weight: 500; font-size: 1.8rem; margin: 0 0 12px; }
.al-doc-texto .al-titulo-l { margin-bottom: 18px; }
.al-jaulas-sec { position: relative; min-height: 86vh; display: flex; align-items: center; background: #06121c !important; color: var(--hueso); overflow: hidden; }
.al-jaulas--fondo { position: absolute; inset: 0; border-radius: 0; }
.al-jaulas-contenido { position: relative; z-index: 2; }
.al-jaulas-contenido .al-titulo-xl { color: var(--hueso); }
.al-jaulas-contenido .al-titulo-xl em { color: #9fd3f0; }
.al-jaulas-contenido .al-lead { color: rgba(244,239,233,.75); max-width: 40rem; }
.al-jaulas-contenido .al-kicker { color: rgba(244,239,233,.65); }
.al-jaulas-contenido .al-kicker::before { background: #9fd3f0; }
.al-jaulas-contenido .al-pronto { color: #9fd3f0; border-color: rgba(159,211,240,.4); }
.al-proyeccion { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 100px); align-items: end; }
.al-proyeccion p { margin-bottom: 26px; }
@media (max-width: 991px) { .al-doc-grid, .al-doc-grid--chico, .al-proyeccion { grid-template-columns: 1fr; } .al-doc--inv .al-video { order: 0; } }

/* ---------- La mitad del camino ---------- */
.al-mitad { margin-bottom: clamp(48px, 6vw, 80px); }
.al-mitad-fila { display: grid; grid-template-columns: repeat(33, minmax(0, 1fr)); gap: 4px; align-items: end; }
.al-mitad-ano { position: relative; display: grid; justify-items: center; }
.al-mitad-ano i { width: 100%; max-width: 22px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(244,239,233,.28); transform: scale(.4); opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease, background-color .5s ease, border-color .5s ease; }
.al-mitad-ano.al-on i { transform: scale(1); opacity: 1; }
.al-mitad-pasado i { background: var(--hueso); border-color: var(--hueso); }
.al-mitad-hoy i { background: var(--lila) !important; border-color: var(--lila) !important; box-shadow: 0 0 0 6px rgba(207,168,239,.16); }
.al-mitad-ano.al-futuro-on i { background: var(--violeta); border-color: var(--violeta); }
.al-mitad-ano b { position: absolute; bottom: calc(100% + 12px); font-family: var(--display); font-weight: 500; font-size: .85rem; color: var(--hueso); white-space: nowrap; }
.al-mitad-rotulos { display: flex; justify-content: space-between; margin-top: 16px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,239,233,.45); }
.al-mitad-rot-hoy { color: var(--lila); }
.al-mitad { padding-top: 34px; }
@media (max-width: 560px) { .al-mitad-fila { gap: 2px; } .al-mitad-ano b { font-size: .7rem; } }

/* ---------- Matriz de metas 2042 ---------- */
.al-matriz-bloque { margin-top: clamp(64px, 8vw, 110px); }
.al-matriz-titulo { font-family: var(--display); font-weight: 500; font-size: 1.5rem; margin: 0 0 24px; color: var(--hueso); }
.al-matriz { border-top: 1px solid var(--linea-o); }
.al-matriz-cab, .al-matriz-fila { display: grid; grid-template-columns: minmax(150px, .8fr) repeat(4, minmax(0, 1fr)); gap: 0; }
.al-matriz-col { padding: 16px 18px; font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: rgba(244,239,233,.35); transition: color .4s ease; }
.al-matriz-col.al-activa { color: var(--lila); }
.al-matriz-fila { border-top: 1px solid var(--linea-o); }
.al-matriz-frente { display: flex; align-items: center; gap: 14px; padding: 22px 18px 22px 0; }
.al-matriz-frente .al-picto { width: 30px; height: 30px; }
.al-matriz-frente b { font-family: var(--display); font-weight: 500; font-size: 1.05rem; color: var(--hueso); }
.al-matriz-meta { margin: 0; padding: 22px 18px; border-left: 1px solid var(--linea-o); font-size: .9rem; line-height: 1.5; color: rgba(244,239,233,.32); transition: color .5s ease, background-color .5s ease; }
.al-matriz-meta.al-activa { color: rgba(244,239,233,.85); background: rgba(126,23,190,.08); }
@media (max-width: 991px) {
  .al-matriz { overflow-x: auto; }
  .al-matriz-cab, .al-matriz-fila { min-width: 760px; }
}

/* ---------- Carta y firma ---------- */
.al-carta-sec .al-carta { margin-top: 0; }
.al-firma { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; margin-top: clamp(80px, 10vw, 140px); padding-top: clamp(56px, 7vw, 90px); border-top: 1px solid var(--linea-o); }
.al-firma-form p { margin: 18px 0 28px; max-width: 30rem; }
.al-firma-campo { display: grid; gap: 10px; margin-bottom: 28px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,239,233,.55); }
.al-firma-campo input { height: 58px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--linea-o); background: rgba(244,239,233,.04); color: var(--hueso); font: italic 400 1.5rem var(--serif); letter-spacing: 0; text-transform: none; }
.al-firma-campo input:focus { outline: none; border-color: var(--lila); }
.al-boton-link { background: none; border: 0; padding: 0; cursor: pointer; }
.al-firma-tarjeta canvas { display: block; width: 100%; max-width: 440px; margin-left: auto; height: auto; aspect-ratio: 1080 / 1350; border-radius: 22px; box-shadow: 0 40px 80px rgba(0,0,0,.4); }
@media (max-width: 991px) { .al-firma { grid-template-columns: 1fr; } .al-firma-tarjeta canvas { margin: 0 auto; } }

/* ---------- Formas con pictograma ---------- */
.al-forma .al-picto { width: 40px; height: 40px; color: var(--texto); }
.al-forma:hover, .al-persona:hover { transform: none; }
.al-alguien-escena { align-self: start; }
.al-puntos-datos { gap: clamp(5px, .8vw, 10px); }
.mil-wrapper { overflow: clip !important; }
.al-alguien { overflow: clip !important; }