/* ===========================================================
   FirstLook — Hoja de mejoras (menú, proporción áurea, animaciones)
   Se carga DESPUÉS del tema; solo añade/mejora, no rompe nada.
   φ = 1.618
   =========================================================== */
:root{
  --phi: 1.618;
  /* Escala tipográfica áurea (base 16px) */
  --fs-sm:   9.89px;
  --fs-base: 16px;
  --fs-md:   20.35px;   /* √φ */
  --fs-lg:   25.89px;   /* φ   */
  --fs-xl:   41.89px;   /* φ²  */
  --fs-xxl:  67.78px;   /* φ³  */
  /* Escala de espaciado áurea */
  --sp-1: 8px;
  --sp-2: 12.94px;
  --sp-3: 20.94px;
  --sp-4: 33.89px;
  --sp-5: 54.83px;
  --sp-6: 88.74px;
  --marca: #77C6CD;
  --marca-ink: #3c9aa2;
  --nav-h: 54.83px;     /* altura barra ≈ --sp-5 */
}

/* ---------- Barra de navegación (antes oculta) ---------- */
.fl-navbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  padding: 0 var(--sp-4);
  font-family: 'Prompt', sans-serif;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.fl-navbar.scrolled{
  background: rgba(255,255,255,0.9);
  border-bottom-color: rgba(0,0,0,0.06);
  box-shadow: 0 2px 18px rgba(0,0,0,0.05);
}
.fl-navbar .fl-brand{
  font-size: var(--fs-md); font-weight: 300; letter-spacing: .04em;
  color: #2b2b2b; text-decoration: none; white-space: nowrap;
}
.fl-navbar .fl-brand b{ color: var(--marca-ink); font-weight: 400; }
.fl-navbar .fl-links{
  display: flex; align-items: center; gap: var(--sp-3);
  list-style: none; margin: 0; padding: 0;
}
.fl-navbar .fl-links a{
  font-size: 15.2px; font-weight: 300; letter-spacing: .01em;
  color: #555; text-decoration: none; position: relative; padding: 5.6px 0;
  transition: color .3s ease;
}
.fl-navbar .fl-links a:hover{ color: var(--marca-ink); }
.fl-navbar .fl-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background: var(--marca); transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.fl-navbar .fl-links a:hover::after{ width:100%; }
.fl-navbar .fl-links a.activo{ color: var(--marca-ink); }
.fl-navbar .fl-links a.activo::after{ width:100%; }

/* Enlaces que salen de la web: flecha ↗ y, si es otra web, píldora de otro color */
.fl-ext-ico{ display:inline-block; margin-left:4px; font-size:.8em; line-height:1; opacity:.75; transform:translateY(-1px); }
.fl-navbar .fl-links a.fl-ext,
.fl-menu-home a.fl-ext{
  color:#1f5f66; background:#e8f4f5; border:1px solid #c9e3e6; border-radius:999px;
  padding:5px 13px; font-weight:400; transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.fl-navbar .fl-links a.fl-ext:hover,
.fl-menu-home a.fl-ext:hover{ background:#d6ecee; border-color:#a9d3d8; color:#174a50; }
.fl-navbar .fl-links a.fl-ext::after,
.fl-menu-home a.fl-ext::after{ display:none; }

/* Hamburguesa (oculta en escritorio) */
.fl-burger{
  display:none; width:30px; height:24px; position:relative;
  background:none; border:0; cursor:pointer; padding:0;
}
.fl-burger span{
  position:absolute; left:0; height:2px; width:100%; background:#444; border-radius:2px;
  transition: transform .35s ease, opacity .25s ease, top .35s ease;
}
.fl-burger span:nth-child(1){ top:2px; }
.fl-burger span:nth-child(2){ top:11px; }
.fl-burger span:nth-child(3){ top:20px; }
.fl-navbar.abierto .fl-burger span:nth-child(1){ top:11px; transform: rotate(45deg); }
.fl-navbar.abierto .fl-burger span:nth-child(2){ opacity:0; }
.fl-navbar.abierto .fl-burger span:nth-child(3){ top:11px; transform: rotate(-45deg); }

/* Empujar el contenido para que la barra fija no lo tape */
body{ padding-top: var(--nav-h); }
/* En la HOME no hay barra superior (el menú va abajo): sin espacio reservado */
body.home{ padding-top: 0; }

/* ---------- Menú inferior de la HOME (otro diseño, antes de los logos) ---------- */
.fl-menu-home{
  max-width: 980px;
  margin: var(--sp-6) auto var(--sp-3);
  padding: var(--sp-4) var(--sp-4) 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  text-align: center;
  font-family: 'Prompt', sans-serif;
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.fl-menu-home.fl-visible{ opacity: 1; transform: none; }
.fl-menu-home-marca{
  display:block; font-size: var(--fs-md); font-weight: 300; letter-spacing: .06em;
  color:#2b2b2b; margin-bottom: var(--sp-2);
}
.fl-menu-home-marca b{ color: var(--marca-ink); font-weight: 400; }
.fl-menu-home ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap: var(--sp-2) var(--sp-4);
}
.fl-menu-home a{
  font-size: 15.2px; font-weight: 300; letter-spacing:.01em; color:#555;
  text-decoration:none; position:relative; padding:3.2px 0; transition: color .3s ease;
}
.fl-menu-home a:hover{ color: var(--marca-ink); }
.fl-menu-home a::after{
  content:''; position:absolute; left:0; bottom:-3px; height:1.5px; width:0;
  background: var(--marca); transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.fl-menu-home a:hover::after{ width:100%; }

/* Ocultar el menú/hamburguesa propios del tema (usamos la barra nueva) */
.menu-toggle, .dropdown-toggle, .site-header .menu-scroll-down, .menu_movil, i.menu_movil{ display: none !important; }
/* El tema fuerza en móvil `.home .menu_movil{display:inline-flex !important}`; el id gana en especificidad. */
#masthead .menu_movil{ display: none !important; }
/* Páginas de texto del tema (legales): base de letra fija; la del tema (1vw) deja 4px en móvil */
body:not(.home):not(.fl-pagina) .entry-content{ font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
body:not(.home):not(.fl-pagina) .entry-content p,
body:not(.home):not(.fl-pagina) .entry-content li{ font-size: 16px; }
body:not(.home):not(.fl-pagina) .entry-header .entry-title{ font-size: clamp(26px, 4vw, 38px); line-height: 1.2; font-weight: 300; }
/* Tablas anchas (política de cookies): desplazamiento dentro de la tabla, no de la página */
body:not(.home):not(.fl-pagina) .entry-content table{ display: block; max-width: 100%; overflow-x: auto; }
/* Evitar el menú DUPLICADO: ocultar el menú original del tema en todas las páginas.
   (La barra nueva ya clona sus enlaces, así que no se pierde ninguno.) */
#site-navigation, .main-navigation, .navigation-top{ display: none !important; }

/* Logos institucionales (KIT DIGITAL, red.es, Gobierno, UE): aparición suave.
   Ya no hace falta el hueco de 46vh: debajo viene el pie con toda la navegación. */
#logos_red{
  margin-top: var(--sp-4) !important;
  opacity: 0 !important;
  transform: translateY(30px);
  animation: none !important;           /* anular la animación de entrada del tema */
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}
#logos_red.fl-visible{ opacity: 1 !important; transform: none; }
/* Home: el tema centra el contenido en un flex (#page) que lo encoge al ancho de su hijo más
   ancho; se estira para que el pie vaya a todo el ancho. Fuera también el margen inferior y el
   relleno bajo los logos que dejaban sitio al antiguo pie fijo del tema. */
body.home .site-content-contain{ flex: 1 1 100%; width: 100%; min-width: 0; margin-bottom: 0 !important; }
body.home #logos_red{ padding-bottom: var(--sp-5) !important; }

/* ---------- Móvil ---------- */
@media (max-width: 860px){
  .fl-burger{ display:block; }
  .fl-navbar .fl-links{
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(14px);
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
    box-shadow: 0 14px 24px rgba(0,0,0,0.07);
    transform: translateY(-12px); opacity:0; pointer-events:none;
    transition: opacity .3s ease, transform .3s ease;
  }
  .fl-navbar.abierto .fl-links{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .fl-navbar .fl-links li{ width:100%; }
  .fl-navbar .fl-links a{ display:block; width:100%; padding: var(--sp-2) 0; font-size: var(--fs-md); border-bottom:1px solid rgba(0,0,0,0.05); }
  .fl-navbar .fl-links a::after{ display:none; }
  .fl-navbar .fl-links a.fl-ext{ display:inline-block; width:auto; margin-top:var(--sp-3); padding:9px 18px; font-size:17px; border-bottom:1px solid #c9e3e6; }
}

/* ---------- Iconos grandes: animación sutil ---------- */
.imagenhome{
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease;
  animation: flFloat 7s ease-in-out infinite;
  will-change: transform;
}
#web{ animation-delay: 0s; }
#ios{ animation-delay: .9s; }
#architecture{ animation-delay: 1.8s; }
@keyframes flFloat{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-7px); }
}
a:hover > .imagenhome{
  transform: translateY(-10px) scale(1.045);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.10));
}
/* Logo del hero e icono "World": latido muy leve */
.custom-header .logo, .logo-app{
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  animation: flPulse 9s ease-in-out infinite;
}
@keyframes flPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.025); } }
@media (prefers-reduced-motion: reduce){
  .imagenhome, .custom-header .logo, .logo-app{ animation: none !important; }
}

/* ---------- Footer (generado por build/sitio.py, igual en todas las páginas) ----------
   Todo en px: el tema pone html{font-size:1vw}. */
.fl-pie{
  position: relative; clear: both; margin: 0; padding: 0;
  background: #f4f8f8; border-top: 1px solid #e1ebec;
  font-family: 'Prompt', sans-serif; font-size: 15px; line-height: 1.6; font-weight: 300; color: #566063;
}
.fl-pie-in{
  max-width: 1180px; margin: 0 auto; padding: 56px 24px 40px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px;
}
.fl-pie a{ text-decoration: none; box-shadow: none; }
.fl-pie-logo{ font-size: 22px; font-weight: 300; letter-spacing: .04em; color: #2b2b2b; }
.fl-pie-logo b{ color: var(--marca-ink); font-weight: 400; }
.fl-pie-marca p{ margin: 12px 0 16px; max-width: 330px; font-size: 15px; line-height: 1.6; color: #566063; }
.fl-pie-mail{ display: inline-flex; align-items: center; gap: 8px; color: #1f5f66; font-weight: 400; }
.fl-pie-mail:hover{ color: #174a50; text-decoration: underline; text-underline-offset: 3px; }
.fl-pie h2{
  margin: 4px 0 14px; padding: 0; font-family: inherit;
  font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #2b2b2b;
}
.fl-pie ul{ list-style: none; margin: 0; padding: 0; }
.fl-pie-col li{ margin: 0 0 10px; }
.fl-pie-col a{ font-size: 15px; color: #566063; transition: color .25s ease; }
.fl-pie-col a:hover{ color: var(--marca-ink); }
.fl-pie-col a.fl-pie-ext{ color: #1f5f66; font-weight: 400; }
.fl-pie-col a.fl-pie-ext:hover{ color: #174a50; text-decoration: underline; text-underline-offset: 3px; }
.fl-pie-col small{ display: block; margin-top: 1px; font-size: 13px; line-height: 1.4; color: #869093; }
.fl-pie-base{ border-top: 1px solid #e1ebec; }
.fl-pie-base-in{
  max-width: 1180px; margin: 0 auto; padding: 18px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  font-size: 13px; color: #869093;
}
.fl-pie-base-in p{ margin: 0; font-size: 13px; }
.fl-pie-legal{ display: flex; flex-wrap: wrap; gap: 6px 20px; margin-right: auto; }
.fl-pie-legal a{ font-size: 13px; color: #869093; }
.fl-pie-legal a:hover{ color: #2b2b2b; }
.fl-pie-redes{ display: flex; gap: 10px; }
.fl-pie-redes a{
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid #d8e4e5; border-radius: 50%; background: #fff; color: #566063; font-size: 16px;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.fl-pie-redes a:hover{ color: var(--marca-ink); border-color: #a9d3d8; transform: translateY(-2px); }
@media (max-width: 900px){
  .fl-pie-in{ grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 44px 20px 32px; }
  .fl-pie-marca, .fl-pie-otras{ grid-column: 1 / -1; }
  .fl-pie-base-in{ padding: 16px 20px 20px; }
}
@media (max-width: 520px){
  .fl-pie-base-in{ flex-direction: column; align-items: flex-start; }
  .fl-pie-legal{ margin-right: 0; }
}

/* ---------- Popup "Firstlook World": que no tape la barra de menú ---------- */
@media (min-width: 861px){
  #notificacion{ top: calc(var(--nav-h) + 19.2px) !important; }
}
/* Logo del popup sin www (evita la redirección 301) */
#imagen_notificacion{ background-image: url('https://firstlook.es/logo-app-vector.png') !important; }

/* ---------- Caja de servicios: de banda a sangre -> tarjeta turquesa redondeada ----------
   Suaviza el corte brusco blanco->turquesa que quedaba tras el logo. */
#infoportfolio{
  max-width: 1180px;
  margin: var(--sp-4) auto var(--sp-5) !important;
  border-radius: 28px;
  box-shadow: 0 22px 55px rgba(116,198,206,0.28);
  overflow: hidden;
  align-items: flex-start !important;   /* alinear las columnas (y sus iconos) arriba */
}
/* Texto de las columnas de servicios: más pequeño y proporcionado (φ) */
#infoportfolio .bondades .titulo{ font-size: 25.89px !important; line-height: 1.2 !important; }
#infoportfolio .bondades p{ font-size: 15.2px !important; }

/* ---------- Animaciones de entrada del tema: más rápidas (eran de 1 a 2,5 s) ---------- */
[class*="slide-in-bottom"]{ animation-duration: .55s !important; }
.slide-in-bottom1{ animation-delay: .05s !important; }
.slide-in-bottom2{ animation-delay: .15s !important; }
.slide-in-bottom3{ animation-delay: .25s !important; }
.slide-in-bottom5{ animation-delay: .10s !important; }
.slide-in-bottom6{ animation-delay: .25s !important; }
.slide-in-bottom7{ animation-delay: .40s !important; }

/* ---------- Reveal sutil al entrar en pantalla ---------- */
.fl-reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.fl-reveal.fl-visible{ opacity:1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .fl-reveal{ opacity:1 !important; transform:none !important; }
}