/* Footer nuevo de YoMeAnimo! — FUENTE ÚNICA para las páginas fuera de WordPress.
   Extraído 1:1 del render aprobado en staging (shortcode yma_footer_nuevo() del theme,
   valores elegidos por Berna con los sliders de new-web/_variantes-footer/, 2026-08-10).
   Si el diseño cambia: editar ACÁ y correr  python3 new-web/_footer/aplicar-footer.py
   El original comentado vive en new-web/_shortcodes/yma-shortcodes.php. */
/* Valores aprobados por Berna (2026-08-10) con el laboratorio de sliders    (`new-web/_variantes-footer/`). Son de la ilustración `footer-berna-2`, que    trae su propio degradé: por eso ya no hay `--ft-fade`.    En desktop y tablet la imagen se ve entera; sólo en mobile se recorta. */ .ft{   --ft-img-h:auto; --ft-zoom:1.00; --ft-foco-x:50%; --ft-foco-y:50%;   --ft-pad-bot:520px;   --ft-pad-y:64px; --ft-pad-x:48px; --ft-gap:56px;   --ft-logo:38px; --ft-link:16px; --ft-lead:16px; } @media (max-width:999px){ .ft{   --ft-img-h:auto; --ft-zoom:1.00; --ft-foco-x:50%; --ft-foco-y:50%;   --ft-pad-bot:347px;   --ft-pad-y:48px; --ft-pad-x:28px; --ft-gap:38px;   --ft-logo:34px; --ft-link:15px; --ft-lead:15px; } } @media (max-width:560px){ .ft{   --ft-img-h:300px; --ft-zoom:1.00; --ft-foco-x:50%; --ft-foco-y:70%;   --ft-pad-bot:282px;   --ft-pad-y:40px; --ft-pad-x:30px; --ft-gap:26px;   --ft-logo:30px; --ft-link:15px; --ft-lead:14.5px; } } /* ── Footer nuevo ────────────────────────────────────────────────────────    La ilustración es el piso del footer: los links viven ARRIBA de ella y un    degradé del mismo violeta baja desde el texto para que nada quede sobre una    zona clara. El alto lo pone la imagen, no un número fijo — así no se rompe    cuando cambia el ancho. */ .ft{position:relative;background:#291126;overflow:hidden;   font-family:"Plus Jakarta Sans",system-ui,sans-serif;} /* La ilustración se puede RECORTAR, no sólo escalar: con `--ft-img-h` en 0 el    alto es automático (se ve entera); con un valor, el contenedor fija ese alto    y la imagen lo llena con `cover`. Eso cambia la relación de aspecto del    recorte — necesario en mobile, donde la imagen entera queda diminuta.    `--ft-zoom` acerca y `--ft-foco-x/y` eligen qué parte queda a la vista. */ .ft-img{display:block;position:absolute;left:0;right:0;bottom:0;z-index:0;   height:var(--ft-img-h,auto);overflow:hidden;} .ft-img img{display:block;width:100%;height:100%;object-fit:cover;   object-position:var(--ft-foco-x,50%) var(--ft-foco-y,50%);   transform:scale(var(--ft-zoom,1));transform-origin:var(--ft-foco-x,50%) var(--ft-foco-y,50%);} /* alto automático: la imagen manda y se ve completa */ .ft-img.auto{height:auto;} .ft-img.auto img{height:auto;object-fit:fill;} /* el degradé arranca opaco arriba y se abre sobre la ilustración */ .ft-fade{position:absolute;left:0;right:0;top:0;height:var(--ft-fade,62%);z-index:1;   background:linear-gradient(to bottom,#291126 var(--ft-fade-solido,55%),rgba(41,17,38,0));} .ft-in{position:relative;z-index:2;display:grid;   grid-template-columns:var(--ft-cols,minmax(300px,1.5fr) 1fr 1fr);   gap:var(--ft-gap,56px);max-width:1240px;margin:0 auto;   padding:var(--ft-pad-y,64px) var(--ft-pad-x,48px) var(--ft-pad-bot,300px);} .ft-logo{height:var(--ft-logo,38px);display:block;} .ft-lead{margin:22px 0 0;color:rgba(255,255,255,.88);font-size:var(--ft-lead,16px);line-height:1.65;} .ft-seg{margin:30px 0 12px;font-family:"Outfit",system-ui,sans-serif;font-weight:700;   font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);} .ft-redes{display:flex;gap:12px;} .ft-redes a{width:46px;height:46px;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);   display:flex;align-items:center;justify-content:center;color:#fff;   transition:background 220ms cubic-bezier(.22,1,.36,1),border-color 220ms,transform 220ms;} .ft-redes a:hover{background:rgba(0,219,208,.16);border-color:var(--yma-turquesa,#00DBD0);color:var(--yma-turquesa,#00DBD0);transform:translateY(-2px);} .ft-col h3{font-family:"Outfit",system-ui,sans-serif;font-weight:700;font-size:12.5px;   letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 18px;} .ft-col ul{list-style:none;margin:0;padding:0;} .ft-col li{margin-bottom:14px;} .ft-col a{color:#fff;text-decoration:none;font-size:var(--ft-link,16px);font-weight:500;   display:inline-flex;align-items:flex-start;gap:10px;line-height:1.35;   transition:color 180ms;} .ft-col a:hover{color:var(--yma-turquesa,#00DBD0);text-decoration:underline;} /* El theme viejo tiene `footer a{color:#43173D !important}` — violeta oscuro,    casi el color del fondo del footer. Sin `!important` nuestros links quedaban    ilegibles sobre el violeta (2026-08-10). Es el mismo motivo por el que el    hover también lo necesita. */ .ft a,.ft-col a{color:#fff!important;} .ft-col a:hover,.ft a:hover{color:var(--yma-turquesa,#00DBD0)!important;} .ft-redes a{color:#fff!important;} .ft-redes a:hover{color:var(--yma-turquesa,#00DBD0)!important;}  .ft-ic{flex:0 0 auto;width:19px;height:19px;margin-top:1px;opacity:.75;} .ft-ic svg{width:19px;height:19px;display:block;} @media (max-width:999px){   .ft-in{grid-template-columns:1fr 1fr;}   .ft-marca{grid-column:1 / -1;} } @media(max-width:560px){   .ft-in{grid-template-columns:1fr;} }

/* ── ruta de navegación (breadcrumb) — primera fila del footer ────────────
   Opción B (2026-08-19): el breadcrumb visible vive DENTRO del footer, en su
   misma paleta, separado por un filete tenue. Así cumple lo que pidió Agustín
   sin meter un bloque nuevo entre el contenido y el footer. */
/* ⚠️ `.ft-in` es una GRILLA de 3 columnas: sin `grid-column: 1 / -1` el
   breadcrumb ocupa la primera celda y desarma el footer entero (pasó al
   implementarlo, 19-08: el nav quedó en la columna de la marca y «Servicios»
   se fue abajo). Con esto abarca el ancho y queda como una fila propia. */
.ft-bc{grid-column:1 / -1;padding:0;margin:0 0 6px}
.ft-bc ol{margin:0;padding:0 0 14px;list-style:none;display:flex;flex-wrap:wrap;gap:7px;
  font-size:12.5px;color:#9C8A99;border-bottom:1px solid rgba(255,255,255,.10)}
/* `!important` por el mismo motivo que el resto de los links del footer: el
   theme viejo trae `footer a{color:#43173D !important}` y sin esto el
   breadcrumb salía BLANCO (heredado de .ft a), no gris. */
.ft-bc a{color:#9C8A99 !important;text-decoration:none}
.ft-bc a:hover{color:var(--yma-turquesa,#00DBD0) !important;text-decoration:underline}
.ft-bc [aria-current]{color:#D9CCD6 !important}
.ft-bc .ft-bc-sep{color:#6E5A6B}
/* Variante WordPress. Allá la miga la genera `yoast_breadcrumbs()` —misma fuente
   que el BreadcrumbList JSON-LD, así no divergen— pero Yoast emite
   <span>…&gt;…<span class="breadcrumb_last"> en vez del <ol><li> que arma el
   build para las estáticas. Estos estilos le dan a ese markup la misma pinta:
   los colores de arriba (.ft-bc a, [aria-current]) ya aplican a los dos. */
.ft-bc-wp > span{display:block;padding:0 0 14px;font-size:12.5px;color:#6E5A6B;
  border-bottom:1px solid rgba(255,255,255,.10);line-height:1.7}
.ft-bc-wp > span > span{color:#9C8A99}
.ft-bc-wp .breadcrumb_last{color:#D9CCD6 !important}