/* ============================================================
   header-footer-v2.css
   Origen: <style> de Header.astro y Footer.astro. CSS portado 1:1.
   Selectores prefijados .ccc-nav* / .ccc-footer* para no chocar
   con el padre Creati ni con el v2 de páginas (.cc-v2-page).
   ============================================================ */

/* ============================================================
   NAV (header)
   ============================================================ */
.ccc-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* z-index 300 para quedar SOBRE el mobile-menu (150) — así el logo y el
     burger siguen visibles cuando el menu está abierto. */
  z-index: 300;
  padding: 16px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Sesión 2026-05-27 · Auto-hide + opacidad dinámica:
     GSAP controla `transform`, `opacity` y `pointer-events` desde JS.
     CSS no debe poner transition sobre ellas o pelearía con GSAP.
     El background mantiene su saturación; el blur sigue siempre activo
     para estilo "revista" — la opacidad la regula GSAP. */
  background: rgba(10, 14, 26, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 0.5px solid var(--border-dark, rgba(232,238,245,0.12));
  will-change: transform, opacity;
  /* Estado inicial JS-friendly. */
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ccc-nav {
    transform: translateY(0) !important;
    opacity: 1 !important;
    background: rgba(10, 14, 26, 0.92) !important;
  }
}

.ccc-nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}
.ccc-nav-logo img {
  max-width: none;
  height: 72px;
  width: auto;
  display: block;
  transition: filter 0.3s ease,
              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  will-change: transform;
}
.ccc-nav-logo:hover img,
.ccc-nav-logo:focus-visible img {
  animation: cccLogoBreathe 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.45));
}
@keyframes cccLogoBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .ccc-nav-logo:hover img,
  .ccc-nav-logo:focus-visible img { animation: none; }
  .ccc-nav-logo img { transition: none; }
}

.ccc-nav-links {
  display: flex;
  gap: 26px;
  font-size: 19.5px;
  color: var(--ice-muted, rgba(232,238,245,0.65));
  align-items: center;
}
.ccc-nav-links a {
  position: relative;
  color: var(--ice-muted, rgba(232,238,245,0.65));
  text-decoration: none;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 10px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: color 0.25s ease;
  line-height: 1.3;
  white-space: nowrap;
}
.ccc-nav-links a:hover { color: var(--ice, #E8EEF5); }
.ccc-nav-links a.active { color: var(--cyan, #06B6D4); }

/* Icono SIEMPRE visible encima del texto. El flip 3D ocurre en hover.
   width/height = footprint en el layout (no afecta alto del header).
   transform: scale(1.2) agranda visualmente el icono un 20% sin
   ocupar más espacio físico. */
.ccc-nav-links .lk-icon {
  position: relative;
  width: 38px;
  height: 38px;
  opacity: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.55))
          drop-shadow(0 0 14px rgba(6, 182, 212, 0.30));
  perspective: 700px;
  transform: scale(1.2);
  transform-origin: center center;
  transition: filter 0.3s ease;
}
.ccc-nav-links .lk-icon .flipper {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform;
}
/* Hover sobre el link → flipper gira 180° revelando la cara back (PNG 3D). */
.ccc-nav-links a:hover .lk-icon .flipper,
.ccc-nav-links a:focus-visible .lk-icon .flipper {
  transform: rotateY(180deg);
}
.ccc-nav-links a:hover .lk-icon,
.ccc-nav-links a:focus-visible .lk-icon {
  filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.95))
          drop-shadow(0 0 24px rgba(6, 182, 212, 0.55));
}
.ccc-nav-links .lk-icon .face {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ccc-nav-links .lk-icon .face svg,
.ccc-nav-links .lk-icon .face img {
  width: 100%; height: 100%;
  display: block;
}
.ccc-nav-links .lk-icon .face-back { transform: rotateY(180deg); }

/* Binary travel + texto del link (estructura montada por JS al cargar). */
.lk-content {
  position: relative;
  z-index: 1;
  will-change: transform;
}
.lk-box {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  height: 1.3em;
}
.lk-binary {
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  font-family: var(--font-mono, 'SF Mono', ui-monospace, Menlo, monospace);
  font-weight: 500;
  pointer-events: none;
  will-change: transform, opacity;
}
.lk-binary .b1 { color: var(--cyan, #06B6D4); }
.lk-binary .b0 { color: var(--violet, #2563EB); }
.ccc-nav-links .lk-text {
  position: relative;
  display: inline-block;
  will-change: transform, opacity, clip-path;
}
.ccc-nav-links a:hover .lk-text,
.ccc-nav-links a:focus-visible .lk-text {
  text-shadow:
    0 0 6px rgba(6, 182, 212, 0.95),
    0 0 14px rgba(6, 182, 212, 0.60),
    0 0 30px rgba(6, 182, 212, 0.30);
}

/* Glow radial cyan detrás (hover). */
.ccc-nav-links a::before {
  content: '';
  position: absolute;
  inset: -6px -10px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(6, 182, 212, 0.55) 0%,
    rgba(6, 182, 212, 0.28) 35%,
    rgba(6, 182, 212, 0.08) 65%,
    transparent 80%
  );
  filter: blur(10px);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.25s ease;
  pointer-events: none;
  z-index: -1;
}
.ccc-nav-links a:hover::before,
.ccc-nav-links a:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

/* Click → texto y glow pasan a violeta (.is-flipping aplicada por JS). */
.ccc-nav-links a.is-flipping {
  color: var(--violet, #2563EB) !important;
}
.ccc-nav-links a.is-flipping .lk-text {
  color: var(--violet, #2563EB);
  text-shadow:
    0 0 6px rgba(37, 99, 235, 0.95),
    0 0 14px rgba(37, 99, 235, 0.60),
    0 0 30px rgba(37, 99, 235, 0.30);
}
.ccc-nav-links a.is-flipping::before {
  opacity: 1;
  transform: scale(1);
  background: radial-gradient(
    ellipse at center,
    rgba(37, 99, 235, 0.55) 0%,
    rgba(37, 99, 235, 0.28) 35%,
    rgba(37, 99, 235, 0.08) 65%,
    transparent 80%
  );
}
.ccc-nav-links a.is-flipping .lk-icon {
  filter: drop-shadow(0 0 12px rgba(37, 99, 235, 0.95))
          drop-shadow(0 0 24px rgba(37, 99, 235, 0.55));
}

@media (prefers-reduced-motion: reduce) {
  .ccc-nav-links .lk-icon .flipper,
  .ccc-nav-links a::before { transition: none; }
  .ccc-nav-links a:hover .lk-icon .flipper,
  .ccc-nav-links a:focus-visible .lk-icon .flipper { transform: none; }
}

.ccc-nav-cta { display: flex; gap: 10px; }
.btn-gradient.ccc-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink, #0A0E1A);
  text-decoration: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  background: linear-gradient(100deg, #06B6D4 0%, #38BDF8 35%, #2563EB 100%);
  background-size: 200% auto;
  box-shadow: 0 4px 24px rgba(6, 182, 212, 0.25),
              0 2px 12px rgba(37, 99, 235, 0.20);
  transition: background-position 0.5s ease,
              transform 0.25s ease,
              box-shadow 0.25s ease;
}
.btn-gradient.ccc-nav-btn:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(6, 182, 212, 0.35),
              0 4px 18px rgba(37, 99, 235, 0.30);
}

.ccc-nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 200;          /* Sobre el mobile-menu para seguir clickeable cuando abierto. */
  position: relative;
  pointer-events: auto;
}
.ccc-nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ice, #E8EEF5);
  border-radius: 2px;
  margin: 0 auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.ccc-nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ccc-nav-burger.open span:nth-child(2) { opacity: 0; }
.ccc-nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ccc-mobile-menu {
  position: fixed;
  inset: 0;                                  /* top:0 right:0 bottom:0 left:0 */
  z-index: 150;                              /* Sobre el header (100), bajo el burger (200) */
  background: rgba(10, 14, 26, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  padding: 100px 32px 40px;
  gap: 4px;
  overflow-y: auto;
  /* Fade in/out con opacity (más confiable que transform en mobile). */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease,
              visibility 0s linear 0.35s;
}
/* `!important` defensivo: bloquea cualquier override del padre Creati o
   plugin que tenga `display:none`, `visibility:hidden` en clases genéricas. */
.ccc-mobile-menu.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: flex !important;
  transform: none !important;
  transition: opacity 0.35s ease,
              visibility 0s linear 0s;
}
.ccc-mobile-menu a {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 26px;
  color: var(--ice, #E8EEF5);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--border-dark, rgba(232,238,245,0.12));
  transition: color 0.2s, padding-left 0.2s;
}
.ccc-mobile-menu a:not(.mobile-cta) {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ccc-mobile-menu a:not(.mobile-cta) img {
  width: 28px; height: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.35));
}
.ccc-mobile-menu a:last-child { border-bottom: none; }
.ccc-mobile-menu a:hover,
.ccc-mobile-menu a:active,
.ccc-mobile-menu a.active { color: var(--cyan, #06B6D4); padding-left: 8px; }
.ccc-mobile-menu .mobile-cta {
  align-self: center;
  margin-top: 28px;
  padding: 14px 28px;
  border-radius: 999px;
  border-bottom: none;
  font-family: var(--font-body, 'Geist', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #0A0E1A);
  text-decoration: none;
  background: linear-gradient(100deg, #06B6D4 0%, #38BDF8 35%, #2563EB 100%);
  background-size: 200% auto;
  box-shadow: 0 4px 24px rgba(6, 182, 212, 0.25),
              0 2px 12px rgba(37, 99, 235, 0.20);
  transition: background-position 0.5s ease,
              transform 0.25s ease,
              box-shadow 0.25s ease;
}
.ccc-mobile-menu .mobile-cta:hover,
.ccc-mobile-menu .mobile-cta:active {
  background-position: right center;
  transform: translateY(-2px);
  color: var(--ink, #0A0E1A);
  padding-left: 28px;
  box-shadow: 0 8px 32px rgba(6, 182, 212, 0.35),
              0 4px 18px rgba(37, 99, 235, 0.30);
}

@media (max-width: 1080px) {
  .ccc-nav-links { display: none; }
  .ccc-nav-cta { display: none; }
  .ccc-nav-burger { display: flex; }
  .ccc-nav { justify-content: space-between; padding: 16px 24px; }
  .ccc-nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 600px) {
  .ccc-nav { padding: 12px 18px; }
  .ccc-nav-logo img { height: 57px; }
  .ccc-mobile-menu a { font-size: 22px; }
}
@media (max-width: 380px) {
  .ccc-nav-logo img { height: 49px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.ccc-footer {
  background: #04060B;
  padding: 80px 40px 40px;
  border-top: 0.5px solid var(--border-dark, rgba(232,238,245,0.12));
  color: var(--ice-soft, rgba(232,238,245,0.4));
  font-family: var(--font-body, 'Geist', system-ui, sans-serif);
}
.ccc-footer-inner {
  max-width: 1320px;
  margin: 0 auto;
}
.ccc-footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 0.5px solid var(--border-dark, rgba(232,238,245,0.12));
}
.ccc-footer-logo {
  margin-bottom: 20px;
  flex-shrink: 0;
}
.ccc-footer-logo img {
  height: 56px;
  width: auto;
  display: block;
  max-width: none;
}
.ccc-footer-tag {
  font-size: 13px;
  line-height: 1.6;
  max-width: 320px;
  margin-bottom: 16px;
  color: var(--ice-muted, rgba(232,238,245,0.65));
}
.ccc-footer-legal-info {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 11px;
  color: var(--ice-soft, rgba(232,238,245,0.4));
  line-height: 1.7;
}
.ccc-footer-col h4 {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ice-soft, rgba(232,238,245,0.4));
  margin-bottom: 16px;
  font-weight: 500;
}
.ccc-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ccc-footer-col li {
  padding: 5px 0;
  font-size: 13px;
  color: var(--ice-muted, rgba(232,238,245,0.65));
}
.ccc-footer-col a {
  color: var(--ice-muted, rgba(232,238,245,0.65));
  text-decoration: none;
  transition: color 0.2s ease;
}
.ccc-footer-col a:hover { color: var(--cyan, #06B6D4); }

/* Sesión h++ Victor (40→41): crédito Virtual Networks alineado en la franja
   de redes sociales (flex con margin-left: auto), sin fondo cuadrado, glow
   contorneado siguiendo el alfa del PNG mediante filter: drop-shadow. */
/* ============================================================
   FOOTER CREDIT — Virtual Networks (sesión h++ Victor 41→42)
   Símbolo de anillos arriba con respiración GSAP en loop.
   Debajo, texto "VIRTUAL NETWORKS" letra a letra (caen
   desordenadas y se reorganizan al entrar en viewport).
   Hover: glow cyan contorneado / click: glow violeta.
   Sin fondo, sin lema, sin bordes — todo aplicado al alfa del PNG.
   ============================================================ */
.ccc-footer-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  text-align: center;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.ccc-footer-credit-label {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice-soft, rgba(232,238,245,0.45));
  display: block;
}
/* sr-only para mantener nombre accesible aunque texto sea aria-hidden. */
.ccc-footer-credit .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.ccc-footer-credit-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  /* Sesión h++ Victor (43→44): +separación logo↔texto. */
  gap: 14px;
  line-height: 1;
  opacity: 0.92;
  background: transparent;
  padding: 0;
  border-radius: 0;
  text-decoration: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Símbolo: imagen de los 7 anillos interconectados, fondo transparente. */
.ccc-footer-credit-symbol {
  display: inline-block;
  line-height: 0;
  /* GSAP controla opacity en loop — estado inicial estable. */
  will-change: opacity, transform;
}
.ccc-footer-credit-symbol img {
  /* Sesión h++ Victor (43→44): -20% del tamaño (90→72). */
  max-width: 72px;
  width: auto;
  height: auto;
  display: block;
  background: transparent;
  /* Glow base sigue el contorno del PNG (drop-shadow respeta el alfa). */
  filter: drop-shadow(0 0 4px rgba(232, 238, 245, 0.12));
  transition: filter 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Texto: letras individuales para animación de caída GSAP. */
.ccc-footer-credit-text {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  /* Sesión h++ Victor (42→43): Montserrat ExtraBold (800) +2pt por petición.
     Montserrat ya viene cargado en ccc-v2-fonts (pesos 400-800). */
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ice, #E8EEF5);
  line-height: 1;
  /* Reservamos altura para que las letras tengan dónde caer sin colapsar layout. */
  min-height: 16px;
}
.ccc-footer-credit-text .ccc-vn-letter {
  display: inline-block;
  /* Estado inicial: invisible y arriba; GSAP las baja al lugar. */
  opacity: 0;
  transform: translateY(-40px) rotate(0deg);
  will-change: transform, opacity;
  /* Mismo glow contorneado base para integrarse con el símbolo. */
  filter: drop-shadow(0 0 2px rgba(232, 238, 245, 0.12));
  transition: filter 0.35s ease;
}
.ccc-footer-credit-text .ccc-vn-space {
  display: inline-block;
  width: 0.45em;
}
/* HOVER: glow cyan neón EXACTAMENTE igual a .social-icon (sesión h++ 44→45).
   Fórmula referencia: drop-shadow(0 0 8px rgba(6,182,212,0.75)) + scale(1.14)
   sobre la imagen, y box-shadow doble cyan sobre el contenedor. */
.ccc-footer-credit-logo:hover,
.ccc-footer-credit-logo:focus-visible {
  opacity: 1;
  outline: none;
}
.ccc-footer-credit-logo:hover .ccc-footer-credit-symbol img,
.ccc-footer-credit-logo:focus-visible .ccc-footer-credit-symbol img {
  transform: scale(1.14);
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.75));
}
.ccc-footer-credit-logo:hover .ccc-footer-credit-text .ccc-vn-letter,
.ccc-footer-credit-logo:focus-visible .ccc-footer-credit-text .ccc-vn-letter {
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.75));
  color: #E8FBFF;
}
/* CLICK (:active) + .is-clicked: glow violeta contorneado, misma intensidad. */
.ccc-footer-credit-logo:active .ccc-footer-credit-symbol img,
.ccc-footer-credit-logo.is-clicked .ccc-footer-credit-symbol img {
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.85)) !important;
}
.ccc-footer-credit-logo:active .ccc-footer-credit-text .ccc-vn-letter,
.ccc-footer-credit-logo.is-clicked .ccc-footer-credit-text .ccc-vn-letter {
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.85)) !important;
  color: #F2EDFF !important;
}
/* Fallback prefers-reduced-motion: todo estático y visible. */
@media (prefers-reduced-motion: reduce) {
  .ccc-footer-credit-symbol,
  .ccc-footer-credit-symbol img,
  .ccc-footer-credit-text .ccc-vn-letter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}
@media (max-width: 768px) {
  .ccc-footer-credit {
    margin: 16px auto 0;
    width: 100%;
  }
  .ccc-footer-credit-symbol img { max-width: 60px; }
  .ccc-footer-credit-text { font-size: 11px; letter-spacing: 0.16em; }
}

.ccc-footer-social {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px 0;
  border-top: 0.5px solid var(--border-dark, rgba(232,238,245,0.12));
  flex-wrap: wrap;
}
.ccc-footer-social-label {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ice-soft, rgba(232,238,245,0.4));
}
.ccc-footer-social-icons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.ccc-footer .social-icon {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: filter 0.3s ease, box-shadow 0.3s ease;
}
.ccc-footer .social-icon img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.3s ease;
  max-width: none;
}
.ccc-footer .social-icon:hover {
  box-shadow:
    0 0 10px 2px rgba(6, 182, 212, 0.55),
    0 0 18px 4px rgba(6, 182, 212, 0.25);
}
.ccc-footer .social-icon:hover img {
  transform: scale(1.14);
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.75));
}

.ccc-footer-bottom {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  color: var(--ice-soft, rgba(232,238,245,0.4));
  letter-spacing: 0.05em;
  flex-wrap: wrap;
  gap: 16px;
}
.ccc-footer-legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.ccc-footer-legal a {
  color: var(--ice-soft, rgba(232,238,245,0.4));
  text-decoration: none;
  transition: color 0.2s ease;
}
.ccc-footer-legal a:hover { color: var(--cyan, #06B6D4); }

.ccc-footer .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.ccc-footer .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .ccc-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .ccc-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .ccc-footer { padding: 60px 20px 32px; }
  .ccc-footer-top { grid-template-columns: 1fr; gap: 32px; }
  .ccc-footer-social { justify-content: center; }
  .ccc-footer .social-icon { width: 44px; height: 44px; }
  .ccc-footer-bottom { justify-content: center; text-align: center; }
  .ccc-footer-legal { justify-content: center; }
}
@media (max-width: 380px) {
  .ccc-footer { padding: 48px 16px 28px; }
  .ccc-footer-social-icons { gap: 10px; }
  .ccc-footer .social-icon { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ccc-footer .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ccc-footer .social-icon,
  .ccc-footer .social-icon img { transition: none; }
  .ccc-footer .social-icon:hover img { transform: none; }
}

/* ============================================================
   AJUSTE GENERAL — el nav fijo necesita padding-top en main.
   ============================================================ */
.cc-v2-page__main { padding-top: 104px; }
@media (max-width: 1080px) { .cc-v2-page__main { padding-top: 88px; } }
@media (max-width: 600px)  { .cc-v2-page__main { padding-top: 80px; } }

/* ============================================================
   BOTÓN SCROLL-TO-TOP (plugin HFE)
   Sesión h++ Victor (44→45): igualar al neón de .social-icon.
   El plugin inyecta:
     .hfe-scroll-to-top-wrap > .hfe-scroll-to-top-button > i.fa-chevron-up
   Sobrescribimos para que el hover use la misma fórmula cyan que las
   redes sociales: box-shadow doble + filter drop-shadow + scale.
   ============================================================ */
.hfe-scroll-to-top-wrap {
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 50%;
  will-change: transform, box-shadow;
}
.hfe-scroll-to-top-wrap .hfe-scroll-to-top-button {
  transition: color 0.3s ease, filter 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hfe-scroll-to-top-wrap .hfe-scroll-to-top-button i {
  transition: color 0.3s ease, filter 0.3s ease;
}
/* ============================================================
   Botón scroll-to-top PROPIO (sesión h++ Victor 51→52)
   Bypass total del plugin HFE: lo ocultamos completamente y
   usamos un <button class="ccc-btt"> que inyectamos en footer-v2.php.
   La imagen es back-to-top.png. Glow neón cyan idéntico al de
   .social-icon en hover.
   ============================================================ */
/* CULPABLE REAL DEL BOTÓN VIEJO (sesión h++ Victor 56→57):
   Es el #scrollUp del tema padre creati (style.css:1681), montado por
   assets/js/theme.js del padre. NO era el plugin HFE — esa fue una
   pista falsa de 6 sesiones. Lo confirmé vía inspector en Safari.
   Solución: ocultar el #scrollUp + el wrap del HFE por si acaso. */
html body #scrollUp,
html body a#scrollUp,
html body #scrollUp i {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}
/* Por si acaso el plugin HFE se reactiva en el futuro. */
html body .hfe-scroll-to-top-wrap,
html body .hfe-scroll-to-top-button {
  display: none !important;
}

/* Botón propio. Mismo posicionamiento que el del plugin (bottom-right). */
.ccc-btt {
  /* Sesión h++ Victor (56→57): vuelve a posición natural ahora que el
     #scrollUp del tema padre está oculto vía CSS. Z-index alto por
     defensa pero ya no necesitamos pelearle al z-index 2147483647 del
     scrollUp porque lo ocultamos directamente arriba. */
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999999;
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.3s ease,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.ccc-btt[hidden] {
  display: none;
}
.ccc-btt.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Imagen recortada al círculo (clip-path) — el PNG tiene píxeles
   semi-transparentes en los bordes laterales (alpha 1..72 con RGB altos)
   que en fondo oscuro se ven como "franjas mordidas". El clip circular
   elimina todo lo que está fuera del círculo central. */
.ccc-btt img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: cover;
  background: transparent;
  -webkit-clip-path: circle(48% at 50% 50%);
  clip-path: circle(48% at 50% 50%);
  filter: drop-shadow(0 0 4px rgba(232, 238, 245, 0.12));
  transition: filter 0.3s ease,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
/* Hover / focus — neón cyan idéntico a .social-icon:hover */
.ccc-btt:hover,
.ccc-btt:focus-visible {
  outline: none;
  box-shadow:
    0 0 10px 2px rgba(6, 182, 212, 0.55),
    0 0 18px 4px rgba(6, 182, 212, 0.25);
  transform: translateY(-2px) scale(1.06);
}
.ccc-btt:hover img,
.ccc-btt:focus-visible img {
  transform: scale(1.10);
  filter:
    drop-shadow(0 0 8px rgba(6, 182, 212, 0.75))
    drop-shadow(0 0 18px rgba(6, 182, 212, 0.45));
}
@media (prefers-reduced-motion: reduce) {
  .ccc-btt,
  .ccc-btt img { transition: none; }
  .ccc-btt:hover,
  .ccc-btt:focus-visible { transform: none; }
  .ccc-btt:hover img,
  .ccc-btt:focus-visible img { transform: none; }
  .ccc-btt.is-visible {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 600px) {
  .ccc-btt { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}