/* ============================================================
   pie.css — EL pie del sitio. Un solo archivo.
   ============================================================
   Estaba en landing.css y ademas copiado dentro del <style> de
   /blog/, del diagnostico y de no-perder-clientes: 69 lineas
   repetidas en 3 sitios. Es el mismo caso que tenia el nav.

   Lo que se cambie aqui vale para las 14 paginas.
   ============================================================ */

/* ===== FOOTER OSCURO =====
   Requiere class="inverse" en el <footer class="footer-section">. */
/* Bloque con margen y esquinas redondeadas, igual que el hero y las
   secciones .section-bloque: el pie es la ultima pieza de la pagina, no
   una banda pegada al borde. Sin borde superior: ya lo separa el aire. */
.footer-section {
    position: relative;
    /* `width: auto` sobre un elemento de bloque NO descuenta los margenes
       laterales: el pie salia 2x--hero-gap mas ancho que la ventana y
       provocaba scroll horizontal. Se veia solo en las paginas cortas
       (aviso-legal), donde no hay barra vertical que absorba el sobrante.
       Viene de antes del cierre unido. */
    width: calc(100% - var(--hero-gap) * 2);
    margin: var(--hero-gap);
    padding: var(--space-10) 0 var(--space-8);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
/* [4-sep-2026] El pie oscuro NO tenia fondo propio: el carbon lo pintaba
   solo el <canvas> de la aurora. Si el JS no arranca (error, red lenta,
   navegador con JS desactivado) el canvas se queda vacio y el pie sale
   transparente sobre el blanco de la pagina, con todo su texto en blanco
   encima: ilegible. El fondo va en CSS, como ya lo tienen .blog-hero y
   los demas bloques oscuros; la aurora se pinta ENCIMA y es decoracion,
   no el fondo. */
.footer-section.inverse {
    border-top: none;
    background-color: var(--night-900);
}

/* CIERRE UNIDO. Cuando la pagina termina con el bloque de contacto
   oscuro, el pie se pega a el — sin hueco y con las esquinas de arriba
   rectas — para que los dos se lean como una sola pieza (decagon.ai).
   Solo aplica donde ese bloque existe: en el resto de paginas el pie
   sigue siendo un bloque despegado. .cta-final.inverse es el mismo
   patron en diagnostico-operativo, con su propio nombre de seccion. */
body:has(.contacto-section.inverse) .footer-section,
body:has(.cta-final.inverse) .footer-section {
    margin-top: 0;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* El pie oscuro lleva la aurora en un canvas de fondo (z-index 0).
   Sin esto su contenido queda por debajo y no se ve. */
.footer-section > .container { position: relative; z-index: 2; }

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 380px;
}

.footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--on-night);
}
/* El logo del pie va sobre fondo oscuro: BLANCO. Sin filter:none hereda
   el invert(1) del nav (que existe para la pastilla clara) y sale negro
   sobre negro. La correccion vivia solo en index.css, asi que las paginas
   que no lo cargan salian con el logo negro. */
.footer-logo-wrap .logo img {
    height: 26px;
    width: auto;
    display: block;
    filter: none;
}

.footer-brand-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--on-night-soft);
    font-weight: 300;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.footer-links-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--on-night);
    margin-bottom: var(--space-5);
}

.footer-links-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    /* Menos gap porque cada enlace ya aporta su propio padding
       tactil: el espacio visible entre ellos es el mismo. */
    gap: var(--space-2);
}

.footer-links-list a {
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--on-night-soft);
    text-decoration: none;
    transition: color var(--motion-base) var(--ease-standard);
    /* [3-sep-2026] Area tactil. El enlace solo ocupaba el alto de su
       texto (~18px) y se pulsa con el pulgar: WCAG 2.5.5 y las guias
       de Apple y Android piden 44px. El padding vertical se compensa
       con un margen negativo para que la lista no se estire — el area
       crece, el diseno no cambia. */
    display: inline-block;
    padding: 7px 0;
    margin: -7px 0;
}
.footer-links-list a:hover { color: var(--on-night); }

.footer-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-6);
    border-top: 1px solid var(--night-600);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer-curator {
    font-size: 0.75rem;
    /* [4-sep-2026] Sin text-transform:lowercase. Tenia sentido cuando
       aqui iba un dominio ("albercabrera.com"), que se escribe en
       minusculas; con el nombre del titular dejaba "alberto perez
       cabrera" en caja baja, que en un nombre propio se lee como una
       errata. */
    letter-spacing: 0.12em;
    color: var(--on-night-mid);
}

.footer-social-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    /* [4-sep-2026] Aire respecto a la descripcion de marca: ahora vive
       en la columna de identidad, no pegado al copyright. */
    margin-top: var(--space-5);
}
/* La barra de abajo se queda solo con el copyright, asi que deja de
   necesitar el reparto a dos lados. */
.footer-bottom-bar { justify-content: flex-start; }

/* ══ REDES ═════════════════════════════════════════════════════════
   [4-sep-2026] Fuera la etiqueta "Sigueme:" y los iconos crecen.
   Iban a 16px con un texto delante, en la barra de abajo: se leian como
   letra pequena. Un icono de LinkedIn o Instagram no necesita que le
   digan lo que es — la forma ya lo dice — y sin la etiqueta se pueden
   agrandar sin que el conjunto pese de mas.

   Ahora son botones de 44px (el minimo tactil de WCAG 2.5.5, que a 16px
   sueltos no se cumplia) con el icono a 20px dentro. */
.footer-social-icons {
    display: flex;
    gap: var(--space-3);
}
.footer-social-icons a {
    color: var(--on-night-body);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    overflow: hidden;
    /* El icono va por encima del relleno que entra en el hover. */
    isolation: isolate;
    transition: color var(--motion-base) var(--ease-standard),
                border-color var(--motion-base) var(--ease-standard),
                box-shadow var(--motion-base) var(--ease-standard);
}
.footer-social-icons a svg {
    position: relative;
    z-index: 1;
    transition: transform var(--motion-base) var(--ease-standard);
}
/* EL RELLENO. Un degradado que sube desde abajo: en reposo esta fuera
   del boton (scaleY 0 con origen abajo) y al pasar el raton lo llena.
   Es el mismo gesto que la barra de un grafico al levantarse — entra,
   no aparece. */
.footer-social-icons a::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(160deg, var(--cobalt-500), #A63A70);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--motion-base) var(--ease-standard);
}
.footer-social-icons a:hover {
    color: #FFFFFF;
    border-color: transparent;
    /* Halo, como el resto de los botones del sistema. */
    box-shadow: 0 0 0 4px rgba(218, 98, 45, 0.14),
                0 10px 26px -10px rgba(218, 98, 45, 0.5);
}
.footer-social-icons a:hover::before { transform: scaleY(1); }
/* El icono se inclina un punto: da sensacion de que responde al raton
   sin llegar a girar, que se leeria como un juguete. */
.footer-social-icons a:hover svg { transform: scale(1.08) rotate(-4deg); }

/* Sin movimiento: el relleno aparece sin viaje y el icono no se mueve. */
@media (prefers-reduced-motion: reduce) {
    .footer-social-icons a::before,
    .footer-social-icons a svg { transition: none; }
    .footer-social-icons a:hover svg { transform: none; }
}



@media (max-width: 900px) {
    .article-layout { grid-template-columns: 1fr; gap: 0; }
    .toc { display: none; }
    .article-hero.inverse { padding: var(--space-10) 0 var(--space-7); }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
    .prose .lead-answer { font-size: 1.06rem; padding: 22px 22px; }
    .cta-card { padding: 44px 24px; }
    .footer-links-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 480px) {
    .footer-links-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================================
   Bloques que solo usa automatizar-mi-negocio
   ============================================================
   Vienen de landing-oscura.css, el CSS aparte que tenia esa pagina
   con su propia paleta negra. Se traen ya al sistema: titulares en
   Instrument Serif, radios de la escala y boton de 8px.
   ============================================================ */

/* Caja de "esto me preguntan": una pregunta real y su respuesta. */
.asked-box {
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-6);
    margin: var(--space-6) 0;
}
.asked-box .asked-q {
    font-size: 1.02rem; color: var(--ink); font-weight: 500;
    margin-bottom: var(--space-3); line-height: 1.5;
}
.asked-box .asked-q::before { content: '"'; color: var(--cobalt-700); }
.asked-box .asked-q::after  { content: '"'; color: var(--cobalt-700); }
.asked-box .asked-who {
    font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.1em;
    color: var(--ink-mid); text-transform: uppercase;
    margin-bottom: var(--space-4); display: block;
}
.asked-box .asked-a {
    font-size: 0.98rem; color: var(--ink-soft); font-weight: 300;
    line-height: 1.65; margin: 0;
}

/* CTA embebido a mitad del articulo. */
.inline-cta {
    background: var(--bg-alt);
    border: 1px solid var(--cobalt-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-6);
    margin: var(--space-7) 0;
}
.inline-cta .ic-label {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em;
    color: var(--cobalt-700); text-transform: uppercase;
    display: block; margin-bottom: var(--space-3);
}
.inline-cta h3 {
    font-family: var(--font-display); font-size: 1.28rem; font-weight: 400;
    color: var(--ink); margin: 0 0 var(--space-3); letter-spacing: -0.01em;
}
.inline-cta p {
    font-size: 0.98rem; color: var(--ink-soft); font-weight: 300;
    margin: 0 0 var(--space-5); max-width: 52ch;
}
.inline-cta .btn-inline { display: inline-block; text-decoration: none; }

/* ---- Subpie: la linea legal fina bajo el pie ----
   La usan las dos landings de conversion. Vivia duplicada dentro de
   cada una; aqui es una sola. */
.subfooter {
    border-top: 1px solid var(--line);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    color: var(--ink-mid);
}
.subfooter a { color: var(--ink-soft); text-decoration: none; }
.subfooter a:hover { color: var(--ink); }