/* Pie de la web (pie-c), rehecho el 12-oct: el cierre del anuncio (escenas 11_cierre y 11b_claim) como pie.
   La CTO: el anterior era «elegante pero muuuy soso, el logo enano». Aquí el logo manda: grande, dentro del anillo
   fino de oro del final del vídeo, con la frase en versalitas espaciadas de oro bajo él (la «leyenda del sello»)
   y la regla dorada. Papel cálido con la luz radial del día del anuncio; texto en gris, marcado en oro; nada negro.
   La entrada (js/pie-c.js pone .vivo al llegar) repite la del vídeo con animaciones CSS: el halo se enciende, el
   logo se escribe con la pluma, la frase llega letra a letra, una luz la recorre, la regla se dibuja, la luz pasa
   por la «A», el anillo se cierra y, justo entonces, «Entre» se tiñe de oro. Sin JavaScript (html sin .js) el pie
   se ve ya terminado. Con «reducir movimiento» todo está en su sitio al instante y sólo queda viva la luz lenta
   que recorre la «A» cada pocos segundos (la CTO revisa con esa opción y el pie no puede verse muerto).
   Clases prefijadas pie-c- para no chocar con css/estilo.css, de donde hereda tipografía, contenedor y variables. */

.pie-c { position: relative; overflow: clip; padding: clamp(40px, 5vw, 64px) 0 20px; background: var(--papel-calido); color: var(--gris); font-size: 15px; line-height: 1.4; }
/* La luz del día del anuncio (aurora-dia): dos manchas radiales de crema y blanco, muy suaves, detrás de todo */
.pie-c-luz { position: absolute; inset: 0; pointer-events: none; }
.pie-c-luz i { position: absolute; border-radius: 50%; }
.pie-c-luz-1 { left: -8%; top: -30%; width: 46vw; height: 46vw; min-width: 420px; min-height: 420px; background: radial-gradient(circle, rgba(255, 246, 214, 0.9) 0%, rgba(255, 246, 214, 0.35) 42%, transparent 70%); }
.pie-c-luz-2 { right: -10%; bottom: -40%; width: 40vw; height: 40vw; min-width: 360px; min-height: 360px; background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.3) 45%, transparent 72%); }
/* La «A» gris del pie anterior (commit f44a80d), de vuelta a petición de la CTO: a la derecha, recortada por el
   borde y casi transparente; algo mayor que entonces porque el pie es ahora más alto */
.pie-c-a { position: absolute; right: -4%; bottom: -14%; width: clamp(260px, 28vw, 480px); height: auto; opacity: 0.07; pointer-events: none; }

.pie-c-int { position: relative; display: grid; grid-template-columns: var(--d) minmax(0, 1fr); gap: 28px clamp(48px, 6vw, 96px); align-items: center; --d: clamp(300px, 29vw, 420px); }

/* ---------- El sello: anillo, halo, logo, frase y regla, todo a escala de --d (el diámetro del anillo) ---------- */
.pie-c-sello { position: relative; width: var(--d); height: var(--d); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pie-c-anillo { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
/* Extremos rectos: con «round», antes de dibujarse el anillo quedaba un punto de oro arriba (un trazo de longitud cero con remate redondo) */
/* Finísimo: 0,75 px en pantalla a cualquier tamaño (non-scaling-stroke mide en píxeles, no en unidades del
   viewBox). La CTO (12-oct): «círculo mucho más fino» y después «el círculo exterior, más fino». */
.pie-c-anillo circle { fill: none; stroke: var(--oro-mate); stroke-width: 0.75px; vector-effect: non-scaling-stroke; stroke-linecap: butt; stroke-dasharray: 1.03 1; stroke-dashoffset: 0; }
/* (el trazo mide 1,03 y no 1 porque con la longitud exacta quedaba una muesca de un píxel donde empieza el círculo) */
.pie-c-halo { position: absolute; left: 50%; top: 44%; width: 78%; height: 78%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #ffffff 0%, #ffffff 40%, rgba(255, 255, 255, 0) 72%); }
.pie-c-logo { position: relative; display: block; width: 64%; margin-top: 4%; line-height: 0; }
.pie-c-logo img { width: 100%; height: auto; display: block; }
.pie-c-logo > img:first-child { opacity: 0.92; }
/* «Entre» en oro: el mismo recurso que la barra, recortado por la pata izquierda de la «A» (medido en estilo.css) */
.pie-c-entre { position: absolute; left: 0; top: 0; clip-path: polygon(0 0, 46.875% 0, 46.875% 14.008%, 33.125% 94.163%, 0 100%); }
/* La luz que recorre la «A»: una caja sobre la «A» del logo (medida en el PNG: x 225-423 de 640, y 36-242 de 257)
   con la «A» de img/a_marca.svg de máscara y un degradado tres veces más ancho que cruza de izquierda a derecha */
.pie-c-brillo { position: absolute; left: 35.16%; top: 14%; width: 30.94%; height: 80.16%; -webkit-mask: url("../img/a_marca.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/a_marca.svg") 0 0 / 100% 100% no-repeat; background: linear-gradient(115deg, transparent 44%, rgba(255, 250, 230, 0.95) 50%, transparent 56%) 0 0 / 300% 100% no-repeat; pointer-events: none; animation: pie-c-brillo 7s cubic-bezier(0.45, 0, 0.55, 1) 2.2s infinite; }
/* La pluma: el punto de oro que escribe el logo (misma diagonal que en el anuncio, de (0, 43 %) a (100 %, 66 %)) */
.pie-c-pluma { position: absolute; left: 0; top: 43%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #e9cf6c; box-shadow: 0 0 18px rgba(240, 206, 100, 0.95), 0 0 4px rgba(255, 255, 255, 0.8); opacity: 0; pointer-events: none; }
/* La frase, en dos grafías y dos colores (la CTO, 12-oct): «El programa / hecho por asesores» como titular ligero
   (Outfit 300) con el oro en «hecho por asesores» (el <em> de los titulares de la web), y debajo «para mejorar,
   cuidar / y retener a sus clientes» en versalitas espaciadas gris, como las etiquetas. Todo a escala del anillo. */
.pie-c-claim { margin-top: 5%; text-align: center; white-space: nowrap; }
.pie-c-claim > span { display: block; }
.pie-c-l { font-style: normal; } /* cada letra va en un <i> (js/pie-c.js) y, sin esto, el navegador la pondría en cursiva */
.pie-c-claim-t { font-size: clamp(20px, calc(var(--d) * 0.065), 28px); font-weight: 300; letter-spacing: -0.015em; line-height: 1.12; color: var(--tinta); }
.pie-c-claim-t em { font-style: normal; font-weight: 500; color: var(--oro-tinta); }
/* El para qué: recto, gris medio y más pequeño; los verbos en peso 500 con puntos finos de oro entre ellos */
.pie-c-claim-s { font-size: clamp(11px, calc(var(--d) * 0.033), 14px); font-weight: 300; letter-spacing: 0.01em; line-height: 1.5; color: var(--gris); }
.pie-c-claim-s b { font-weight: 500; color: var(--tinta-2); }
.pie-c-claim-s .pie-c-sep { display: inline-block; margin: 0 0.45em; color: var(--oro-mate); font-weight: 500; }
.pie-c-claim-t + .pie-c-claim-s { margin-top: 2.5%; }
/* La luz que recorre la frase: js/pie-c.js clona la frase en esta capa, con el texto transparente y el degradado
   recortado al texto; sin JS no existe */
.pie-c-claim-luz, .pie-c-claim-luz * { color: transparent; } /* todo transparente, también los verbos en <b>: si no, se imprimían dos veces */
.pie-c-claim-luz { position: absolute; left: 0; right: 0; margin-top: 0; background: linear-gradient(110deg, transparent 44%, rgba(255, 252, 240, 0.95) 50%, transparent 56%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; pointer-events: none; opacity: 0; }
.pie-c-regla { display: block; width: 18%; height: 1px; margin-top: 4%; background: var(--oro-mate); transform-origin: 50% 50%; }

/* ---------- Columnas y franja legal ---------- */
.pie-c-columnas { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: 28px; }
.pie-c-columnas b { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro-tinta); margin-bottom: 10px; }
.pie-c-columnas ul { display: grid; gap: 6px; }
/* Los ocho enlaces de la plataforma en dos columnas de cuatro, en su orden (por columnas), para que el bloque no
   sea más alto que el sello */
.pie-c-columnas > div:first-child ul { grid-template-columns: repeat(2, max-content); grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: 36px; }
.pie-c-columnas a { color: var(--gris); transition: color 200ms var(--suave); }
.pie-c-columnas a:hover { color: var(--amarillo); }
.pie-c-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--oro-mate); font-size: 13.5px; color: #9ba1ab; }
.pie-c-legal a { color: var(--gris); transition: color 200ms; }
.pie-c-legal a:hover { color: var(--amarillo); }
.pie-c-par { display: contents; }

/* ---------- La entrada: estados de partida (sólo con JS y hasta que el pie entra en pantalla) ---------- */
.js .pie-c:not(.vivo) .pie-c-halo { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
.js .pie-c:not(.vivo) .pie-c-logo > img:first-child { clip-path: inset(0 100% 0 0); }
.js .pie-c:not(.vivo) .pie-c-entre { opacity: 0; }
.js .pie-c:not(.vivo) .pie-c-claim .pie-c-l { opacity: 0; }
.js .pie-c:not(.vivo) .pie-c-regla { transform: scaleX(0); }
.js .pie-c:not(.vivo) .pie-c-anillo circle { stroke-dashoffset: 1.03; }
.js .pie-c:not(.vivo) .pie-c-brillo { animation: none; }
/* Y la secuencia, con los tiempos del anuncio comprimidos a unos cuatro segundos (en la web nadie espera nueve) */
.pie-c.vivo .pie-c-halo { animation: pie-c-halo 800ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.pie-c.vivo .pie-c-logo > img:first-child { animation: pie-c-escribir 1000ms cubic-bezier(0.45, 0, 0.55, 1) 150ms both; }
.pie-c.vivo .pie-c-pluma { animation: pie-c-pluma 1000ms cubic-bezier(0.45, 0, 0.55, 1) 150ms both; }
.pie-c.vivo .pie-c-claim .pie-c-l { animation: pie-c-letra 180ms linear both; animation-delay: calc(900ms + var(--i, 0) * 18ms); }
.pie-c.vivo .pie-c-claim-luz { animation: pie-c-claim-luz 1300ms cubic-bezier(0.45, 0, 0.55, 1) 2000ms both; }
.pie-c.vivo .pie-c-regla { animation: pie-c-regla 700ms cubic-bezier(0.45, 0, 0.55, 1) 2100ms both; }
.pie-c.vivo .pie-c-anillo circle { animation: pie-c-anillo 1500ms cubic-bezier(0.45, 0, 0.55, 1) 2500ms both; }
.pie-c.vivo .pie-c-entre { animation: pie-c-entre 800ms ease-in-out 3700ms both; }

@keyframes pie-c-halo { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes pie-c-escribir { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pie-c-pluma { 0% { left: 0; top: 43%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; top: 66%; opacity: 0; } }
@keyframes pie-c-letra { from { opacity: 0; } to { opacity: 1; } }
@keyframes pie-c-claim-luz { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 1; background-position: 0 0; } }
@keyframes pie-c-regla { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* El anillo se dibuja girando alrededor del logo y acaba cerrado y entero. La CTO, 13-oct por la mañana: «me
   gustaba más el que había antes que giraba»; el fundido de la noche anterior se queda fuera. */
@keyframes pie-c-anillo { from { stroke-dashoffset: 1.03; } to { stroke-dashoffset: 0; } }
@keyframes pie-c-entre { from { opacity: 0; } to { opacity: 1; } }
/* La luz de la «A»: cruza en 1,2 s y descansa el resto del ciclo (17 % de 7 s); en la primera vuelta va justo
   después de la frase, como en el vídeo */
@keyframes pie-c-brillo { 0% { background-position: 100% 0; } 17% { background-position: 0 0; } 100% { background-position: 0 0; } }

@media (max-width: 900px) {
  .pie-c-int { grid-template-columns: 1fr; gap: 36px; justify-items: center; --d: clamp(290px, 62vw, 400px); }
  .pie-c-columnas { width: 100%; grid-template-columns: 1fr 1fr; }
  .pie-c-columnas > div:first-child { grid-column: 1 / -1; }
  .pie-c-luz-1 { left: 50%; top: -10%; transform: translateX(-50%); width: 120vw; height: 120vw; }
  .pie-c-a { right: -20%; bottom: -8%; width: 50vw; }
}
/* Móvil (10-oct, se mantiene): a 390 px los enlaces del pie a 12-13 px y los títulos a 11-12, como Apple, Linear
   o Holded; Contacto y Síguenos comparten fila para que el pie no se haga largo. */
@media (max-width: 520px) {
  .pie-c { padding: 36px 0 18px; font-size: 13.5px; }
  .pie-c-int { gap: 28px; --d: min(88vw, 340px); }
  .pie-c-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .pie-c-columnas > div:first-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .pie-c-columnas b { font-size: 11px; margin-bottom: 6px; }
  .pie-c-columnas ul { gap: 4px; }
  .pie-c-columnas a { overflow-wrap: anywhere; }
  /* Franja legal en tres líneas centradas (la CTO, 13-oct): aviso · privacidad, cookies · configurar y el © al
     final. La raya va a lo ancho, como las columnas, para cerrarlas. */
  .pie-c-legal { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 14px; font-size: 12px; text-align: center; }
  .pie-c-par { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; }
  .pie-c-par a + a::before { content: "·"; display: inline-block; margin: 0 9px; color: var(--oro-mate); pointer-events: none; }
  .pie-c-copy { order: 1; margin-top: 4px; }
  .pie-c-a { width: 46vw; bottom: -3%; }
}
/* En los más estrechos el correo no cabe en media columna: Contacto a lo ancho y las redes en línea debajo */
@media (max-width: 360px) {
  .pie-c-columnas > div { grid-column: 1 / -1; }
  .pie-c-columnas > div:last-child ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
}
/* Reducir movimiento: estilo.css deja toda animación en 1 ms, así que cada pieza salta a su estado final; aquí
   además se quitan las esperas (si no, «Entre» tardaría casi cuatro segundos en teñirse) y se conserva la luz lenta
   de la «A», que es lo único que sigue moviéndose: suave, cada siete segundos, para que el pie siga vivo. */
@media (prefers-reduced-motion: reduce) {
  .pie-c.vivo * { animation-delay: 0s !important; }
  .pie-c-brillo, .pie-c.vivo .pie-c-brillo { animation-duration: 7s !important; animation-delay: 1s !important; }
}

/* Iconos de trazo finísimo encima de cada columna, en el oro de sus títulos (la CTO, 13-oct): el ordenador para la
   plataforma, el móvil para el contacto y una red para las redes. Los títulos bajan y el icono ocupa su sitio. */
.pie-c-ico { display: block; width: 34px; height: 34px; color: var(--oro-tinta); stroke-width: 1; margin: 0 0 14px; opacity: 0.85; }
.pie-c-ico * { vector-effect: non-scaling-stroke; }
@media (max-width: 640px) { .pie-c-ico { width: 28px; height: 28px; margin: 0 0 10px; } }
/* Y entran cuando el anillo termina de girar (2,5 s + 1,5 s), cada uno detrás del otro y desde su mismo sitio:
   crecen y se encienden donde se quedan, sin venir de ningún lado (la CTO, 13-oct) */
.js .pie-c:not(.vivo) .pie-c-ico { opacity: 0; transform: scale(0.4); }
.pie-c.vivo .pie-c-ico { animation: pie-c-ico 650ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: 50% 50%; }
.pie-c.vivo .pie-c-columnas > div:nth-child(1) .pie-c-ico { animation-delay: 4000ms; }
.pie-c.vivo .pie-c-columnas > div:nth-child(2) .pie-c-ico { animation-delay: 4300ms; }
.pie-c.vivo .pie-c-columnas > div:nth-child(3) .pie-c-ico { animation-delay: 4600ms; }
@keyframes pie-c-ico { from { opacity: 0; transform: scale(0.4); } to { opacity: 0.85; transform: scale(1); } }