/* ==========================================================================
   FUENTES DEL DISEÑO (globales: se usan en la home Y en los proyectos)
   Se declaran aquí, en tokens-base.css, porque este archivo carga en
   TODAS las páginas. Antes vivían solo en home-nueva.css y por eso las
   páginas de proyecto no podían usarlas.
   ========================================================================== */
@font-face { font-family:'Bricolage Grotesque'; src:url('../fonts/Bricolage-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('../fonts/Bricolage-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('../fonts/Bricolage-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('../fonts/Bricolage-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('../fonts/SpaceMono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('../fonts/SpaceMono-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('../fonts/InstrumentSerif-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('../fonts/InstrumentSerif-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }

/* ==========================================
   0. FUENTES LOCALES — Cascadia Code
   Servidas desde el propio theme (assets/fonts), no desde Google Fonts,
   porque Cascadia Code no está en el CDN de Google. Inter sí se carga
   desde Google Fonts en inc/enqueue.php.
   ========================================== */
@font-face {
  font-family: 'Cascadia Code';
  src: url('../fonts/CascadiaCode-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cascadia Code';
  src: url('../fonts/CascadiaCode-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cascadia Code';
  src: url('../fonts/CascadiaCode-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================
   1. VARIABLES Y BASE
   ========================================== */
:root {
  --color-black: #1E1E1E;
  --color-dark-blue: #0053A9;
  --color-blue: #007EFF;
  --color-gray: #A1A1A1;
  --color-white: #FFFFFF;
  --color-glass-border: rgba(255, 255, 255, 0.08);
  
  --font-headings: 'Inter', sans-serif;
  --font-body: 'Cascadia Code', 'JetBrains Mono', monospace;
}

h1{
	font-family: var(--font-headings);
	font-size: 48px;
	font-weight: 700;
}
h2{
	font-family: var(--font-headings);
	font-size: 40px;
	font-weight: 700;
}
h3{
	font-family: var(--font-headings);
	font-size: 32px;
	font-weight: 600;
}

a{
	text-decoration:none !important;
	color: var(--color-white);
	weight:400;
}

a:hover{
	color: var(--color-blue);
}

body {
  background-color: var(--color-black);
  color: var(--color-gray);
  font-family: var(--font-body);
  margin: 0;
  padding-top: 60px; /* Espacio para que el header fijo no tape contenido */
	overflow-x: hidden;
}

a {
  text-decoration: none;
  transition: all 0.3s ease;
}

body.admin-bar .custom-header {
  top: 32px;
}

.mobile-menu-toggle {
  display: none;
}

[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover{
	background-color:transparent !important;
}

@media (max-width: 768px) {
  body {
    padding-top: 86px;
  }

  body.admin-bar .custom-header {
    top: 46px;
  }
}

/*==
   3. HEADER (Fijo y Glassmorfismo)
   ========================================== */
/* ==========================================
   HEADER DESKTOP + MOBILE FIX
   ========================================== */

.custom-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: rgba(30, 30, 30, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-glass-border);
}

body.admin-bar .custom-header {
  top: 32px;
}

.header-container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 32px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 15px 5%;
}

.site-logo {
  flex: 0 0 auto;
  line-height: 0;
}

.site-logo img,
.site-logo .custom-logo {
  display: block;
  width: 100px !important;
  max-width: 100px !important;
  height: auto !important;
}

.main-navigation {
  display: flex !important;
  flex: 1 1 auto;
  justify-content: center;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.main-navigation .nav-list,
.main-navigation ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 40px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.main-navigation li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-navigation a {
  display: inline-flex;
  color: var(--color-gray);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1;
}

.main-navigation a:hover {
  color: var(--color-white);
}

.main-navigation a::after {
  content: none !important;
}

.header-cta {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
	gap: 16px;
}

.mobile-menu-toggle {
  display: none !important;
}

/* SOLO MÓVIL */
@media (max-width: 768px) {
  body {
    padding-top: 82px;
  }

  body.admin-bar .custom-header {
    top: 46px;
  }

  .header-container {
    padding: 14px 18px;
  }

  .site-logo img,
  .site-logo .custom-logo {
    width: 86px !important;
    max-width: 86px !important;
  }

  .header-cta {
    display: none !important;
  }

  .mobile-menu-toggle {
    position: relative;
    z-index: 1001;
    display: grid !important;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    border: 1px solid var(--color-glass-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
  }

  .mobile-menu-toggle span {
    position: absolute;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--color-white);
    transition: transform 0.25s ease;
  }

  .mobile-menu-toggle span:first-child {
    transform: translateY(-4px);
  }

  .mobile-menu-toggle span:last-child {
    transform: translateY(4px);
  }

  .custom-header.is-menu-open .mobile-menu-toggle span:first-child {
    transform: rotate(45deg);
  }

  .custom-header.is-menu-open .mobile-menu-toggle span:last-child {
    transform: rotate(-45deg);
  }

  .main-navigation {
    position: absolute !important;
    top: calc(100% + 12px);
    left: 18px;
    right: 18px;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  }

  .custom-header.is-menu-open .main-navigation {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .main-navigation .nav-list,
  .main-navigation ul {
    flex-direction: column !important;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 14px !important;
    border: 1px solid var(--color-glass-border) !important;
    border-radius: 18px;
    background: rgba(30, 30, 30, 0.94) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .main-navigation a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--color-white);
    font-size: 15px;
  }

  .main-navigation li:last-child a {
    border-bottom: 0;
  }

  .main-navigation a::after {
		color: var(--color-white);
  }
	.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus,
.mobile-menu-toggle:focus-visible {
  background: var(--color-blue) !important;
  box-shadow: 0 0 0 4px rgba(0, 126, 255, 0.18) !important;
}
}


/* ==========================================
   4. FOOTER Y CALL TO ACTION
   ========================================== */

/* Sección "Construyamos algo juntos" */
.footer-cta {
  padding: 100px 5%;
  text-align: center;
}

.cta-content {
  max-width: 600px;
  margin: 0 auto;
	display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-content h2 {
  margin-bottom: 15px;
  margin-top: 0;
	color: var(--color-white)
}

.cta-content p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* Barra inferior (Copyright y Redes) */
.custom-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 5%;
  border-top: 1px solid var(--color-glass-border);
  font-size: 13px;
  max-width: 1600px;
  margin: 0 auto;
}

.copyright-text {
  color: var(--color-gray);
}

/* Iconos de Redes Sociales */
.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-black);
  font-weight: bold;
  font-family: var(--font-headings);
}

.social-icons a:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
  transform: translateY(-3px);
}

/* ==========================================
   5. RESPONSIVE BÁSICO (Móviles)
   ========================================== */
@media (max-width: 768px) {
  .header-container, .custom-footer {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .main-navigation .nav-list {
    flex-direction: column;
    gap: 15px;
  }
}

/*======================================                     HOME
 ====================================*/
.pg-hero {
  width: 100vw;
  min-height: 80vh;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--color-black);
  color: var(--color-white);
  isolation: isolate;
}

.pg-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(90deg, rgba(6, 12, 18, 0.88) 0%, rgba(6, 12, 18, 0.58) 45%, rgba(6, 12, 18, 0.82) 100%),
    linear-gradient(180deg, rgba(30, 30, 30, 0.12) 0%, rgba(30, 30, 30, 0.94) 100%),
    url('https://paulagarces.es/wp-content/uploads/2026/05/hero-image-scaled.jpg');
  background-size: cover;
  background-position: center center;
}

.pg-hero__content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 130px clamp(24px, 5vw, 96px) 100px;
}

.pg-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  padding: 9px 18px;
  border: 1px solid var(--color-glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.pg-hero__label span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #55f0bd;
  box-shadow: 0 0 18px rgba(85, 240, 189, 0.9);
}

.pg-hero__title {
  max-width: 840px;
  margin: 0;
  font-family: var(--font-headings);
  font-size: clamp(42px, 4.3vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--color-white);
}

.pg-hero__text {
  max-width: 760px;
  margin: 32px 0 24px;
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width:1920px){
	.pg-home .pg-hero{
		height: auto !important;
	}
	.pg-hero__content{
		padding-top: 60px !important;
	}
	.pg-home .pg-hero__label{
		margin-bottom: 20px !important;
	}
	.pg-home .pg-hero h1{
		font-size: 45px !important;
	}
}

@media (max-width: 767px) {
  .pg-hero {
    min-height: 660px;
    align-items: flex-end;
  }

  .pg-hero__bg {
    background-position: 58% center;
  }

  .pg-hero__content {
    padding: 120px 22px 70px;
  }

  .pg-hero__label {
    margin-bottom: 24px;
    font-size: 11px;
  }

  .pg-hero__title {
    max-width: 100%;
    font-size: clamp(38px, 11vw, 52px);
    line-height: 1.04;
  }

  .pg-hero__text {
    margin-top: 26px;
    font-size: 13px;
  }
}
.pg-hero {
  --hero-x: 50%;
  --hero-y: 45%;
}

.pg-hero__light {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
  background:
    radial-gradient(
      circle at var(--hero-x) var(--hero-y),
      rgba(0, 126, 255, 0.28) 0%,
      rgba(0, 83, 169, 0.12) 18%,
      rgba(0, 0, 0, 0) 42%
    );
  transition: opacity 260ms ease;
}

.pg-hero:not(:hover) .pg-hero__light {
  opacity: 0.45;
}

.pg-hero__bg {
  transition: transform 500ms ease;
}

.pg-hero:hover .pg-hero__bg {
  transform: scale(1.035);
}

.pg-hero__title {
  position: relative;
  transition: text-shadow 220ms ease, transform 220ms ease;
	cursor: none;
}

.pg-hero__title:hover {
  transform: translateX(8px);
}

.pg-hero__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-blue), rgba(85, 240, 189, 0.9));
  box-shadow: 0 0 18px rgba(0, 126, 255, 0.7);
  transition: width 280ms ease;
}

.pg-hero__title:hover::after {
  width: min(280px, 70%);
}

.pg-hero__label span {
  animation: pgHeroPulse 1800ms ease-in-out infinite;
}

@keyframes pgHeroPulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(85, 240, 189, 0.7);
  }

  50% {
    box-shadow: 0 0 24px rgba(85, 240, 189, 1);
  }
}

/*Cursor*/
@media (pointer: fine) {
  body.pg-custom-cursor-enabled,
  body.pg-custom-cursor-enabled * {
    cursor: none !important;
  }

  .pg-cursor,
  .pg-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
  }

  .pg-cursor {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    mix-blend-mode: difference;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      width 220ms ease,
      height 220ms ease,
      border-color 220ms ease,
      opacity 180ms ease;
  }

  .pg-cursor-label {
    opacity: 0;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-white);
    white-space: nowrap;
    transition: opacity 180ms ease;
  }

  body.pg-cursor-labeled .pg-cursor-label {
    opacity: 1;
  }

  .pg-cursor-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-white);
    box-shadow: 0 0 14px rgba(0, 126, 255, 0.85);
    transition:
      transform 80ms linear,
      opacity 180ms ease,
      background-color 180ms ease;
  }

  body.pg-custom-cursor-enabled .pg-cursor,
  body.pg-custom-cursor-enabled .pg-cursor-dot {
    opacity: 1;
  }

  body.pg-cursor-hover .pg-cursor {
    width: 58px;
    height: 58px;
    border-color: rgba(0, 126, 255, 0.95);
  }

  body.pg-cursor-hover .pg-cursor-dot {
    background: #0053A9;
    box-shadow: 0 0 18px rgba(85, 240, 189, 0.95);
  }

  /* Cuando el objetivo lleva data-cursor, el anillo crece más y muestra su texto */
  body.pg-cursor-labeled .pg-cursor {
    width: auto;
    height: 58px;
    min-width: 58px;
    padding: 0 14px;
    border-radius: 999px;
  }
}



/* ==========================================================================
   TIPOGRAFÍAS GLOBALES (Fase 3.3)
   GeneratePress fuerza su propia font-family en body y elementos de texto.
   Aquí imponemos el sistema de Paula en TODAS las páginas, no solo donde
   había clases específicas. Inter para encabezados, JetBrains Mono
   (sustituta de Cascadia Code) para todo el cuerpo.
   ========================================================================== */

/* Base: todo el documento hereda la mono como cuerpo */
html body,
body p,
body li,
body span,
body a,
body div,
body input,
body textarea,
body button,
body label,
body figcaption,
body blockquote,
body td,
body th {
  font-family: var(--font-body);
}

/* Encabezados y elementos de título -> Inter, en cualquier contexto.
   NOTA: .btn-text NO va aquí a propósito — los botones usan Cascadia Code
   (var(--font-body)) para mantener la coherencia con la estética "mono". */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .pg-stat-number,
body .entry-title {
  font-family: var(--font-headings) !important;
}

/* Los "labels/kickers" en mayúsculas del bento y secciones: mono, que es
   la estética de la web (tipo etiqueta de código). */
body .pg-bento-label,
body .pg-about-kicker,
body .pg-section-head span,
body .eyebrow,
body .pg-project-pills span,
body .pg-kicker {
  font-family: var(--font-body) !important;
}

/* Anular cualquier font-family inline o de GP en el contenido de página */
.pg-home *,
.pg-about *,
.pg-project *,
.custom-header *,
.custom-main-footer * {
  font-family: inherit;
}

/* ...pero re-afirmando los encabezados dentro de esos contenedores */
.pg-home h1, .pg-home h2, .pg-home h3, .pg-home h4,
.pg-about h1, .pg-about h2, .pg-about h3, .pg-about h4,
.pg-project h1, .pg-project h2, .pg-project h3, .pg-project h4,
.custom-main-footer h2, .custom-main-footer h3 {
  font-family: var(--font-headings) !important;
}