/* =============================================
   franma landing page — styles.css
   ============================================= */

:root {
  --brand-green: #3db372;
  --bg-dark: #171c19;
  --bg-light: #ffffff;
  --icon-size: 28px;
  --icon-gap: 20px;
}

/* Reset mínimo */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Página ── */
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* transition: background-color 0.3s ease; */
}

body.theme-dark {
  background-color: var(--bg-dark);
}
body.theme-light {
  background-color: var(--bg-light);
}

/* ── Botón switch tema ── */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle__track {
  width: 52px;
  height: 28px;
  border-radius: 14px;
  position: relative;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

body.theme-dark .theme-toggle__track {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}
body.theme-light .theme-toggle__track {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1.5px solid rgba(0, 0, 0, 0.2);
}

.theme-toggle__thumb {
  position: absolute;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s ease;
  font-size: 11px;
  line-height: 1;
}

body.theme-dark .theme-toggle__thumb {
  left: 4px;
  background-color: rgba(255, 255, 255, 0.9);
}
body.theme-light .theme-toggle__thumb {
  left: 26px;
  background-color: rgba(0, 0, 0, 0.75);
}

/* ── Contenedor central ── */
.lp-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

/* ── Web component: <franma-collado> ── */
franma-collado {
  display: block;
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-size: 3rem;
  letter-spacing: -0.02em;
  line-height: 1;
  user-select: none;
}

/* Color de "colla.do" según tema */
body.theme-dark franma-collado .collado {
  color: #ffffff;
}
body.theme-light franma-collado .collado {
  color: #111111;
}

/* ── Fila de iconos ── */
.lp-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--icon-gap);
}

/* ── Cada enlace de icono ── */
.lp-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.lp-icon-link:hover {
  transform: translateY(-3px);
}

.lp-icon-link svg {
  width: var(--icon-size);
  height: var(--icon-size);
  /* transition: fill 0.3s ease; */
}

/* Relleno de iconos según tema */
body.theme-dark .lp-icon-link svg {
  fill: rgba(255, 255, 255, 0.85);
}
body.theme-light .lp-icon-link svg {
  fill: rgba(0, 0, 0, 0.8);
}

/* ── Colores corporativos en hover ── */

/* GitHub: blanco fijo en dark, negro fijo en light (no cambia en hover) */
body.theme-dark .lp-icon-link[title="GitHub"] svg,
body.theme-dark .lp-icon-link[title="GitHub"]:hover svg {
  fill: #ffffff;
}
body.theme-light .lp-icon-link[title="GitHub"] svg,
body.theme-light .lp-icon-link[title="GitHub"]:hover svg {
  fill: #181717;
}

/* LinkedIn */
.lp-icon-link[title="LinkedIn"]:hover svg {
  fill: #0a66c2;
}

/* Thingiverse */
.lp-icon-link[title="Thingiverse"]:hover svg {
  fill: #248bfb;
}

/* Discord */
.lp-icon-link[title="Discord"]:hover svg {
  fill: #5764f2;
}

/* Kahoot */
.lp-icon-link[title="Kahoot!"]:hover svg {
  fill: #46178f;
}

/* Gumroad */
.lp-icon-link[title="Gumroad"]:hover svg {
  fill: #ff90e8;
}

/* Itch.io */
.lp-icon-link[title="Itch.io"]:hover svg {
  fill: #fa5c5c;
}

/* Scratch */
.lp-icon-link[title="Scratch"]:hover svg {
  fill: #ff7928;
}

/* Instructables */
.lp-icon-link[title="Instructables"]:hover svg {
  fill: #ffcc00;
}

/* ── Icono inactivo ── */
.lp-icon-link.inactive {
  display: none;
}