/* ============================================================================
   PIE UNICLIMA — #ucn-footer-design
   Hoja DEPURADA Y CONSOLIDADA (2026-08-06) + AJUSTES ESTETICOS (2026-08-07).

   AJUSTES ESTETICOS 2026-08-07 (UC-FOOTER-EST), por orden del dueno:
     1) MENOS LINEAS CLARAS. Inventario previo: 22 lineas visibles a la vez
        (16 border-bottom de .fo-mono, 4 border-left verticales entre columnas
        en >=1280px -3 en 1025-1279 + 1 border-bottom de .fo7b-brand-, 1 en
        .fo7b-trust y 1 en .fo7b-bottom; en movil las 4 border-top de
        .fo7b-acchead sustituyen a las verticales). Ahora queda UNA sola:
        el border-top de .fo7b-bottom (zona legal), y ademas rebajado de
        #22304A a rgba(255,255,255,.055) para que sea un susurro.
        Los separadores verticales #1B2740 DESAPARECEN: su funcion la asume
        la linea roja de marca bajo cada cabecera (punto 2).
     2) ICONOS MAS GRANDES + LINEA ROJA. Cabeceras de seccion 16px -> 21px con
        stroke-width 1.65 (a mas tamano, menos trazo, o se ve basto). Contacto
        y franja de confianza 16px -> 18px con stroke-width 1.7. Bajo cada
        cabecera, barra de 28x2px en #C8102E que se ensancha con el raton.
     3) MARCA DE AGUA anclada ABAJO A LA IZQUIERDA (antes centrada), alineada
        con el borde izquierdo del contenedor, alpha .022 (sin cambio) y
        dimensionada para no pisar ni un enlace ni la franja de confianza.
     6) NAP: horario "Lunes a viernes 9:00-18:00" con icono de reloj, y CIF en
        la barra legal (junto a la razon social que ya estaba ahi).
     4) HOVER con vida pero sobrio: solo transform y opacity (nada de width /
        padding / margin, que fuerzan recalculo de layout por fotograma).
        Todo dentro de @media (any-hover:hover) -> en tactil no queda nada
        "pegado" (gotcha conocido del proyecto: galeria de tarjetas).
        Respeta @media (prefers-reduced-motion: reduce).
     5) COHERENCIA: NO se toca ni un color de texto. Cabeceras #FFFFFF sobre
        #0F172A (17,85:1) y enlaces #D9E1EC (13,54:1) intactos.

   Que se hizo en la depuracion previa (sin ningun cambio de render):
     · Se han fundido en UNA sola hoja ordenada los 4 bloques de parches que
       se pisaban entre si (UC-FOOTER-CONTRASTE, retirada del widget del
       tiempo, UC-FOOTER-V3 y UC-FOOTER-V4/V4.1). Donde un bloque posterior
       ganaba al anterior, aqui queda YA el valor final vigente, una sola vez.
     · Se han eliminado las reglas de marcado que ya no existe: el bloque de
       marca textual (.fo7b-logo/.fo7b-sub/.fo7b-subtx/.fo7b-dash), la fila de
       telefono grande y el boton de acceso (.fo7b-telrow/.fo7b-tel/
       .fo7b-login--top), la columna "Contacto" antigua (.fo7b-sec--contacto/
       .fo7b-contact/.fo7b-addr/.fo7b-mail), la frase de entidad
       (.fo7b-entity), la razon social del NAP (.fo7b-napname), el copyright
       bajo el logo (.fo7b-copy--brand), los iconos por enlace (.fo7b-ic), la
       numeracion de los enlaces (.fo-mono .n) y TODA la capa .fo7b-legal /
       .fo-legal (la columna Legal usa hoy .fo7b-list.fo7b-body como las
       demas). Tambien se ha retirado el bloque @media 1025-1240px, que era
       inerte: cada una de sus reglas la ganaba UC-FOOTER-V3 por especificidad.

   Estructura del marcado que sirve inc/footer-design.php:
     .fo7b-giant                marca de fondo
     .fo7b-grid
       .fo7b-brand              logo + NAP (direccion / telefono / email) + redes
       .fo7b-sec--repuestos  \
       .fo7b-idx              |  4 columnas de enlaces; cada una es
       .fo7b-sec--ayuda       |  checkbox + label + lista (acordeon en <1025px)
       .fo7b-sec--legal      /
     .fo7b-trust                franja de confianza
     .fo7b-bottom               (c) centrado

   Reglas de oro:
     · UN solo margen lateral para todo: var(--fo-pad)
     · en <1025px las 4 columnas son acordeones plegados (colapso por
       max-height, chevron que gira 180 grados); en >=1025px se abren y el
       chevron desaparece
     · sin !important salvo donde hay que vencer estilos previos del tema
     · animar SOLO transform y opacity
   ============================================================================ */

/* ------------------------------------------------------------------ RAIZ -- */
footer#ucn-footer-design.fo7b-root{
  --fo-bg:#0F172A;
  --fo-line:rgba(255,255,255,.055);           /* UC-FOOTER-EST: susurro, no corte */
  --fo-txt:#D9E1EC;
  --fo-txt-soft:#A7B4C6;
  --fo-red:#C8102E;                           /* rojo de marca */
  --fo-red-hi:#E11D2E;                        /* realce */
  --fo-ease:cubic-bezier(.22,.61,.36,1);      /* curva de salida suave */
  --fo-pad:var(--ucn-gutter-x,24px);          /* = contenedor del header */
  --fo-max:var(--ucn-container-max,1240px);   /* = contenedor del header */
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.05) 0%, transparent 60%),
    var(--fo-bg);
  color:var(--fo-txt);
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* -------------------------------------------------------- MARCA DE FONDO -- */
/* UC-FOOTER-EST 3: ANCLADA ABAJO A LA IZQUIERDA. Ya no se centra, asi que no
   necesita translateX.
   MEDIDO con Playwright, en dos pasadas:
     · 1a (bottom:96px, cuerpo 150px): se metia por detras de los ultimos
       enlaces de Repuestos y de la linea del email (hasta 7.473 px2).
     · 2a (bottom:8px, cuerpo 100px): ya no tocaba enlaces, pero rozaba
       "Pago seguro" de la franja de confianza (1.546 px2), y ese texto es
       #D9E1EC, el color cuyo 13,54:1 hay orden de NO empeorar.
   Version final: baja del todo y se dimensiona para caber ENTERA dentro de la
   banda legal. Resultado medido: CERO solape con cabeceras, enlaces y franja
   de confianza -> 17,85:1 y 13,54:1 intactos por construccion. El unico texto
   que le queda delante es el (c), y ahi el alpha se mantiene en el .022 de
   siempre (no se empeora nada respecto al footer anterior).                 */
footer#ucn-footer-design .fo7b-giant{
  position:absolute; left:var(--fo-pad); right:auto; bottom:6px; transform:none;
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(52px,13vw,80px); line-height:.75; letter-spacing:-.055em;
  color:rgba(255,255,255,.022);
  white-space:nowrap; pointer-events:none; user-select:none; z-index:0;
}

/* ----------------------------------------------------------- CONTENEDOR -- */
footer#ucn-footer-design .fo7b-grid,
footer#ucn-footer-design .fo7b-bottom{
  position:relative; z-index:1;
  max-width:var(--fo-max); margin:0 auto;
  padding-left:var(--fo-pad); padding-right:var(--fo-pad);
  box-sizing:border-box;
}
footer#ucn-footer-design .fo7b-grid{ display:block; padding-top:24px; }

/* --------------------------------------------------------- MARCA Y NAP --- */
footer#ucn-footer-design .fo7b-brand{ display:block; margin-bottom:clamp(14px,2vw,20px); }

footer#ucn-footer-design .fo7b-logolink{ display:inline-block; line-height:0; }
footer#ucn-footer-design .fo7b-logoimg{
  display:block;
  width:clamp(150px,42vw,190px);
  aspect-ratio:190 / 74;      /* proporcion nativa: nunca se deforma */
  height:auto;
  object-fit:contain;
}

footer#ucn-footer-design .fo7b-nap{ display:block; font-style:normal; margin-top:16px; }
footer#ucn-footer-design .fo7b-napline{
  display:block; color:#A7B4C6; font-size:14px; line-height:1.95; text-decoration:none;
}
footer#ucn-footer-design a.fo7b-naplink{ color:#D9E1EC; }
footer#ucn-footer-design a.fo7b-naplink:hover{ color:#FFFFFF; }
/* UC-FOOTER-EST (2026-08-07): la linea de HORARIO no es un enlace (no hay nada
   que abrir) pero es informacion de primer nivel: mismo #D9E1EC que el resto
   del NAP para que la columna se lea uniforme (13,54:1 sobre #0F172A). */
footer#ucn-footer-design span.fo7b-napline{ color:#D9E1EC; }
/* Lineas con icono: el SVG alineado a la PRIMERA linea del texto */
footer#ucn-footer-design .fo7b-napline--ic{ display:flex; align-items:flex-start; gap:10px; }
/* UC-FOOTER-EST 2: 16 -> 18px, trazo 1.7. El margin-top vuelve a centrar el
   icono en la primera linea (caja de 14px x 1.6 = 22,4px). */
footer#ucn-footer-design .fo7b-napline--ic > svg{
  flex:0 0 auto; width:18px; height:18px; stroke-width:1.7;
  margin-top:3px; opacity:.8;
}
footer#ucn-footer-design .fo7b-napline--ic > span{ min-width:0; line-height:1.6; }

/* ---------------------------------------------------------------- REDES -- */
footer#ucn-footer-design .fo7b-socrow{ display:flex; gap:10px; margin-top:16px; }
footer#ucn-footer-design .fo7b-soc{
  display:inline-flex; width:38px; height:38px; border-radius:11px; overflow:hidden;
  transition:transform .22s var(--fo-ease);
}
footer#ucn-footer-design .fo7b-soc svg{ width:100%; height:100%; display:block; }

/* ----------------------------------------------------------- ACORDEONES -- */
/* Las 4 columnas comparten cabecera, flecha y comportamiento.                */
footer#ucn-footer-design .fo7b-chk{ position:absolute; opacity:0; pointer-events:none; }

/* UC-FOOTER-EST 1: FUERA el border-top (eran 4 lineas claras en movil).      */
footer#ucn-footer-design .fo7b-col{ position:relative; }
footer#ucn-footer-design .fo7b-acchead{
  position:relative;
  display:flex !important; align-items:center; justify-content:space-between;
  gap:12px; margin:0; padding:18px 0;
  color:#FFFFFF;
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:700; font-size:13px; letter-spacing:.18em; line-height:1.15;
  text-transform:uppercase;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
}

/* UC-FOOTER-EST 2: LINEA ROJA DE MARCA bajo cada cabecera de seccion.
   28x2px, separada del texto. Es el elemento que distingue las columnas ahora
   que no hay separadores verticales. Se ensancha con scaleX (transform, no
   width: cero recalculo de layout). Como esta posicionada en absoluto, NO es
   un item flex de la cabecera. */
footer#ucn-footer-design .fo7b-acchead::after{
  content:""; position:absolute; left:0; bottom:6px;
  width:28px; height:2px; border-radius:1px;
  background:var(--fo-red);
  transform-origin:left center; transform:scaleX(1);
  transition:transform .24s var(--fo-ease), background-color .24s ease;
  will-change:transform;
}

/* Cabecera: icono + texto agrupados a la izquierda, chevron a la derecha */
footer#ucn-footer-design .fo7b-headtx{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
/* UC-FOOTER-EST 2: 16 -> 21px; a mas tamano, menos trazo (1.8 -> 1.65). */
footer#ucn-footer-design .fo7b-headtx svg{
  flex:0 0 auto; width:21px; height:21px; stroke-width:1.65; opacity:.9;
  transition:transform .24s var(--fo-ease), opacity .24s ease;
}

footer#ucn-footer-design .fo7b-acchead .fo7b-chev{
  width:18px; height:18px; flex:0 0 auto; color:#fff; opacity:.9;
  stroke-width:3; align-self:center; margin-top:0;
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
footer#ucn-footer-design .fo7b-chk:checked + .fo7b-acchead .fo7b-chev{ transform:rotate(180deg); opacity:1; }

/* Colapso por max-height: funciona con cualquier numero de hijos */
footer#ucn-footer-design .fo7b-acchead + .fo7b-body{
  display:block; max-height:0; opacity:0; overflow:hidden;
  margin:0; padding:0;
  transition:max-height .32s cubic-bezier(.4,0,.2,1), opacity .28s ease, padding .28s ease;
}
footer#ucn-footer-design .fo7b-chk:checked + .fo7b-acchead + .fo7b-body{
  max-height:860px; opacity:1; padding:2px 0 16px;
}
footer#ucn-footer-design .fo7b-chk:checked + .fo7b-acchead + .fo7b-list{ display:grid; }

/* ------------------------------------------------------------- ENLACES --- */
/* UC-FOOTER-EST 1: FUERA el border-bottom (eran 16 lineas claras).           */
footer#ucn-footer-design .fo7b-list{ grid-template-columns:1fr; row-gap:1px; }
footer#ucn-footer-design .fo-mono{
  display:flex; align-items:center; gap:12px;
  padding:12px 2px; text-decoration:none; color:#D9E1EC;
  transition:color .22s ease, transform .22s var(--fo-ease);
}
footer#ucn-footer-design .fo-mono .l{ flex:1 1 auto; min-width:0; font-size:14px; font-weight:500; }

/* -------------------------------------------------- FRANJA DE CONFIANZA -- */
/* Una sola fila centrada; iconos monocromos que heredan el color del texto.
   UC-FOOTER-EST 1: FUERA el border-top.                                      */
footer#ucn-footer-design .fo7b-trust{
  position:relative; z-index:1;
  max-width:var(--fo-max); margin:0 auto;
  padding:16px var(--fo-pad);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 34px;
  color:#D9E1EC; font-size:13.5px; font-weight:600;
}
footer#ucn-footer-design .fo7b-trust__item{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
}
/* UC-FOOTER-EST 2: 16 -> 18px, trazo 1.7. */
footer#ucn-footer-design .fo7b-trust__item svg{
  color:currentColor; opacity:.85; flex:0 0 auto;
  width:18px; height:18px; stroke-width:1.7;
}
/* Hueco reservado para los logos de pago (Visa/Mastercard/PayPal/Bizum):
   <span class="fo7b-payrow"> a la derecha con margin-left:auto. Pendiente. */

/* ----------------------------------------------------------------- (c) --- */
/* UNICA linea horizontal que sobrevive, y en tono susurro (var --fo-line).   */
footer#ucn-footer-design .fo7b-bottom{
  text-align:center; border-top:1px solid var(--fo-line);
  margin-top:0; padding-top:16px; padding-bottom:20px;
}
footer#ucn-footer-design .fo7b-copy{ display:block; font-size:12px; color:#A7B4C6; }

/* =========================================================== ESCRITORIO ===
   >=1025px: el contenedor pasa a replicar EXACTAMENTE .ucn-navbar__inner del
   header (96vw, tope 1760px, sin padding lateral), la marca ocupa una fila
   entera y los enlaces se reparten en 4 columnas SIN separadores verticales
   (UC-FOOTER-EST 1: los sustituye la linea roja de cada cabecera).
   Los acordeones se desactivan: cuerpo siempre abierto y chevron oculto.
   ========================================================================== */
@media (min-width:1025px){

  footer#ucn-footer-design .fo7b-grid,
  footer#ucn-footer-design .fo7b-trust,
  footer#ucn-footer-design .fo7b-bottom{
    width:96vw; max-width:1760px;
    margin-left:auto; margin-right:auto;
    padding-left:0; padding-right:0;
  }

  footer#ucn-footer-design .fo7b-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    column-gap:0; row-gap:0;
    align-items:start;
    padding-top:36px; padding-bottom:30px;
  }

  /* Marca a todo el ancho, en horizontal: logo | datos | redes.
     UC-FOOTER-EST 1: sin border-bottom. */
  footer#ucn-footer-design .fo7b-brand{
    grid-column:1 / -1; grid-row:1;
    display:flex; align-items:center; gap:clamp(28px,4vw,64px); flex-wrap:wrap;
    margin-top:0; margin-bottom:26px; padding-bottom:26px;
  }
  footer#ucn-footer-design .fo7b-logoimg{ width:190px; }
  footer#ucn-footer-design .fo7b-nap{ margin-top:0; }
  footer#ucn-footer-design .fo7b-napline{ line-height:1.7; }
  footer#ucn-footer-design .fo7b-socrow{ margin-top:0; margin-left:auto; }

  /* Las 4 columnas de enlaces, en la fila 2 */
  footer#ucn-footer-design .fo7b-sec--repuestos{ grid-column:1; grid-row:2; margin-top:0; }
  footer#ucn-footer-design .fo7b-idx           { grid-column:2; grid-row:2; margin-top:0; }
  footer#ucn-footer-design .fo7b-sec--ayuda    { grid-column:3; grid-row:2; margin-top:0; }
  footer#ucn-footer-design .fo7b-sec--legal    { grid-column:4; grid-row:2; margin-top:0; }

  /* UC-FOOTER-EST 1: se conserva el ritmo horizontal (padding) pero SIN el
     border-left #1B2740 que dibujaba las 3-4 lineas verticales. */
  footer#ucn-footer-design .fo7b-col{
    padding-left:clamp(18px,2vw,34px); padding-right:clamp(10px,1.2vw,22px);
  }
  footer#ucn-footer-design .fo7b-sec--repuestos{ padding-left:0; }

  /* Listas en una columna, filas mas compactas */
  footer#ucn-footer-design .fo7b-list{ display:grid; grid-template-columns:1fr; column-gap:0; row-gap:0; }
  footer#ucn-footer-design .fo-mono{ padding:8px 2px; }

  /* Sin acordeon: cabecera plana, cuerpo abierto, chevron fuera */
  footer#ucn-footer-design .fo7b-acchead{ padding:0 0 18px; cursor:default; }
  footer#ucn-footer-design .fo7b-acchead .fo7b-chev{ display:none; }
  footer#ucn-footer-design .fo7b-acchead + .fo7b-body{
    max-height:none; opacity:1; overflow:visible; padding:0;
  }

  /* UC-FOOTER-EST 3: marca de fondo abajo a la IZQUIERDA, alineada con el
     borde izquierdo del contenedor (96vw centrado -> 2vw; con tope 1760px
     el margen crece). Se queda por ENCIMA de la franja de confianza. */
  footer#ucn-footer-design .fo7b-giant{
    /* 2o ajuste medido: con 100,8px todavia rozaba "Pago seguro" de la franja
       de confianza (1.546 px2) y ese texto es #D9E1EC, el color cuyo 13,54:1
       hay orden de no empeorar. Se reduce hasta que la palabra cabe ENTERA
       dentro de la banda legal (~52px de alto). */
    left:max(2vw, calc((100% - 1760px) / 2));
    bottom:7px;
    font-size:clamp(56px,5.3vw,86px);
  }
}

/* --- >=1280px: las 5 columnas (marca + 4 de enlaces) en una sola fila ----- */
@media (min-width:1280px){
  footer#ucn-footer-design .fo7b-grid{ grid-template-columns:1.15fr 1fr 1fr .9fr .9fr; }
  footer#ucn-footer-design .fo7b-brand{
    grid-column:1; grid-row:1;
    display:block;
    margin-bottom:0; padding-bottom:0;
    padding-right:clamp(24px,2.5vw,56px);
  }
  footer#ucn-footer-design .fo7b-nap{ margin-top:16px; }
  footer#ucn-footer-design .fo7b-socrow{ margin-top:16px; margin-left:0; }
  /* UC-FOOTER-EST 1: aqui la columna 2 recuperaba el border-left. Fuera. */
  footer#ucn-footer-design .fo7b-sec--repuestos{
    grid-column:2; grid-row:1;
    padding-left:clamp(18px,2vw,34px);
  }
  footer#ucn-footer-design .fo7b-idx        { grid-column:3; grid-row:1; }
  footer#ucn-footer-design .fo7b-sec--ayuda { grid-column:4; grid-row:1; }
  footer#ucn-footer-design .fo7b-sec--legal { grid-column:5; grid-row:1; }
}

/* ======================================================= MOVILES ESTRECHOS = */
@media (max-width:430px){
  footer#ucn-footer-design .fo7b-trust{ gap:8px 22px; font-size:13px; }
}
@media (max-width:380px){
  footer#ucn-footer-design .fo7b-soc{ width:34px; height:34px; }
}

/* ============================================== PASO DEL RATON (any-hover) =
   UC-FOOTER-EST 4. TODO aqui dentro: en tactil no se aplica nada, asi que no
   puede quedarse un estado "pegado" tras un toque (gotcha del proyecto: ya
   paso con la galeria de tarjetas). Solo se animan transform y opacity.
   ========================================================================== */
@media (any-hover:hover){

  /* Enlaces: color + desplazamiento de 4px con transform (no padding). */
  footer#ucn-footer-design .fo-mono:hover,
  footer#ucn-footer-design .fo-mono:focus-visible{
    color:#FFFFFF; transform:translateX(4px);
  }

  /* Columna completa: la linea roja se ensancha de 28px a ~53px y sube de
     tono. Es el realce que sustituye a los separadores verticales. */
  footer#ucn-footer-design .fo7b-col:hover .fo7b-acchead::after,
  footer#ucn-footer-design .fo7b-col:focus-within .fo7b-acchead::after{
    transform:scaleX(1.9);
    background:var(--fo-red-hi);
  }
  /* ...y el icono de la cabecera respira un poco */
  footer#ucn-footer-design .fo7b-col:hover .fo7b-headtx svg{
    transform:translateX(1px); opacity:1;
  }

  footer#ucn-footer-design .fo7b-soc:hover{ transform:translateY(-2px); }
}

/* Realce muy leve del fondo de la columna: capa propia con opacity (barato).
   z-index:-1 la deja por detras del texto dentro del contexto de .fo7b-grid. */
@media (min-width:1025px) and (any-hover:hover){
  footer#ucn-footer-design .fo7b-col::before{
    content:""; position:absolute; z-index:-1;
    left:0; right:0; top:-14px; bottom:-14px;
    border-radius:14px; pointer-events:none;
    background:radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.018) 0%, rgba(255,255,255,0) 70%);
    opacity:0; transition:opacity .24s ease;
  }
  footer#ucn-footer-design .fo7b-col:hover::before{ opacity:1; }
}

/* ==================================================== ACCESIBILIDAD ======= */
@media (prefers-reduced-motion: reduce){
  footer#ucn-footer-design .fo7b-acchead + .fo7b-body,
  footer#ucn-footer-design .fo7b-acchead .fo7b-chev,
  footer#ucn-footer-design .fo7b-acchead::after,
  footer#ucn-footer-design .fo7b-headtx svg,
  footer#ucn-footer-design .fo7b-col::before,
  footer#ucn-footer-design .fo7b-soc,
  footer#ucn-footer-design .fo-mono{ transition:none; }
  footer#ucn-footer-design .fo-mono:hover{ transform:none; }
  footer#ucn-footer-design .fo7b-col:hover .fo7b-acchead::after{ transform:scaleX(1); }
  footer#ucn-footer-design .fo7b-col:hover .fo7b-headtx svg{ transform:none; }
  footer#ucn-footer-design .fo7b-soc:hover{ transform:none; }
}

/* UC-FOOTER ALIGN 20260812 (Roberto): el footer se estiraba a todo el ancho
   mientras el resto del sitio va centrado a 1240px. Lo alineamos: mismo ancho
   máximo y centrado, así el logo y las secciones cuadran con el header. */
footer#ucn-footer-design .fo7b-grid,
footer#ucn-footer-design .fo7b-bottom{ max-width:1240px !important; }