/* ==========================================
   0. EFECTO MAGNÉTICO (data-mag)
   El JS (cursor.js) mueve estos elementos hacia el cursor cuando está cerca;
   esta transición amortigua el "return to rest" cuando el cursor se aleja.
   ========================================== */
[data-mag] {
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

/* ==========================================
   3. BOTONES Y COMPONENTES GLOBALES
   ========================================== */

/* 1. El contenedor principal dicta la forma y el fondo */
.btn-primary {
    background-color: transparent;
    font-family: var(--font-body);
    padding: 0px; 
    display: flex;
	flex-direction: row;
    align-items: center;
    cursor: pointer;
}

/* 2. El texto simplemente ocupa su espacio */
.btn-text {
    font-weight: 500;
    text-align: center;
	background-color: var(--color-blue);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 8px 16px; 
    border-radius: 50px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


/* 3. El círculo de la flecha con un fondo translúcido para que destaque dentro del azul */
.btn-arrow {
	background-color: var(--color-blue);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.btn-arrow img {
    width: 14px;
    height: 14px;
    transition: transform 0.4s ease;
}

/* ==========================================
   EFECTOS HOVER (Se aplican al padre)
   ========================================== */

/* Cuando haces hover en cualquier parte del botón, cambia el padre */
.btn-text:hover {
    background-color: var(--color-blue);
    color: var(--color-white);
    box-shadow: 0 10px 20px rgba(0, 126, 255, 0.2);
}

/* El fondo del círculo de la flecha cambia a azul para contrastar con el fondo blanco */
.btn-primary:hover .btn-arrow {
    background-color: var(--color-blue);
    box-shadow: 0 10px 20px rgba(0, 126, 255, 0.2);
}

/* Gira la flecha y fuerza el color blanco */
.btn-primary:hover .btn-arrow img {
    transform: rotate(45deg); /* Gira la flecha hacia arriba a la derecha */
    filter: brightness(0) invert(1); /* Fuerza la flecha a ser blanca contra el círculo azul */
}

/* ==========================================
   ESTILOS DE REDES SOCIALES EN FOOTER
   ========================================== */
.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    transition: all 0.3s ease;
}

.social-icons img {
    width: 40%;
    height: auto;
}

.social-icons a:hover {
    transform: translateY(-5px);
    opacity: 0.8;
}

.social-icons img:hover {
	color: var(--color-white);
}

/* ==========================================
   UTILIDADES
   ========================================== */
.glass-panel {
    background: var(--color-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-glass-border);
    border-radius: 16px;
}
/* ==========================================================================
   Añadidos — Fase 2 GeneratePress (footer CTA, CV, email visible)
   ========================================================================== */

.footer-cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid var(--color-white, #fff);
  color: var(--color-white, #fff);
  text-decoration: none;
  font-family: var(--font-headings);
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-secondary:hover {
  background: var(--color-white, #fff);
  color: var(--color-black, #1E1E1E);
}

.footer-email-visible {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-body);
  text-decoration: underline;
  opacity: 0.85;
}

.footer-email-visible:hover {
  opacity: 1;
}

.header-cta .btn-cv {
  font-size: 14px;
}

/* ==========================================================================
   BLINDAJE ANTI-GENERATEPRESS + BOTÓN SECUNDARIO (Fase 3)
   GeneratePress aplica --base-3 (#fff) como fondo a .main-navigation,
   .footer-widgets, .site-info y estilos a .wp-block-button__link. Como
   nuestro header/footer reutilizan esas clases, heredaban fondo blanco y
   texto ilegible. Aquí forzamos los valores correctos del sistema Paula.
   ========================================================================== */

/* --- HEADER: matar cualquier fondo blanco heredado de GP --- */
.custom-header .main-navigation,
.custom-header .main-navigation ul,
.custom-header .main-navigation ul ul,
.custom-header nav,
.custom-header .nav-list {
  background: transparent !important;
  box-shadow: none !important;
}

.custom-header .main-navigation a {
  background: transparent !important;
  color: var(--color-white) !important;
}

.custom-header .main-navigation a:hover {
  color: var(--color-blue) !important;
}

/* --- FOOTER: forzar fondo oscuro y quitar los contenedores blancos de GP --- */
.custom-main-footer,
.custom-main-footer .footer-cta,
.custom-main-footer .custom-footer {
  background: var(--color-black) !important;
}

/* El <div class="site-footer"> vacío de GP que quedaba blanco */
body > .site-footer,
.site-info,
.footer-widgets {
  background: var(--color-black) !important;
}

.custom-main-footer .footer-cta h2 {
  color: var(--color-white) !important;
}

.custom-main-footer .footer-cta p {
  color: var(--color-gray) !important;
}

/* ==========================================================================
   SISTEMA DE BOTONES
   .btn-primary  -> azul sólido con flecha (ya existente)
   .btn-secondary/.pg-btn-secondary -> contorno, texto claro (hero + footer)
   ========================================================================== */

/* Botón secundario unificado: se usa en hero y footer.
   Blindado contra .wp-block-button__link de GP que ponía el texto azul. */
.btn-secondary,
.pg-btn-secondary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: transparent !important;
  color: var(--color-white) !important;
  text-decoration: none !important;
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.btn-secondary:hover,
.pg-btn-secondary:hover {
  border-color: var(--color-blue) !important;
  background: rgba(0, 126, 255, 0.08) !important;
  color: var(--color-white) !important;
  transform: translateY(-1px);
}

.btn-secondary .btn-text,
.pg-btn-secondary .btn-text {
  color: var(--color-white) !important;
}

/* Icono opcional dentro del botón secundario */
.pg-btn-secondary svg,
.btn-secondary svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* Variante del enlace de CV del hero como botón secundario coherente
   (por si prefieres botón en vez del enlace subrayado actual) */
.pg-home .pg-hero__cv-link.pg-btn-secondary {
  font-size: 15px;
  padding: 15px 30px;
  text-decoration: none !important;
}

/* ==========================================================================
   FIX Fase 3.1 — botón secundario del footer salía azul
   Causa: .btn-text (píldora azul) se aplica al <div> interno aunque el <a>
   padre sea .btn-secondary. Aquí neutralizamos el .btn-text dentro de
   cualquier botón secundario para que respete el estilo de contorno.
   ========================================================================== */

.btn-secondary .btn-text,
.pg-btn-secondary .btn-text {
  background-color: transparent !important;
  color: var(--color-white) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  font-weight: 600 !important;
}

/* El <a.btn-secondary> es display:flex por herencia de .btn-primary en
   algunos casos; forzamos el pill correcto y su padding en el propio enlace. */
.footer-cta-actions .btn-secondary,
.pg-hero__actions .pg-btn-secondary {
  padding: 14px 28px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

.footer-cta-actions .btn-secondary:hover,
.pg-hero__actions .pg-btn-secondary:hover {
  border-color: var(--color-blue) !important;
  background: rgba(0,126,255,0.08) !important;
}

/* ==========================================================================
   FIX Fase 3.1 — banda blanca en el single de PROYECTO
   GeneratePress sigue pintando su .featured-image / page-header-image (fondo
   blanco heredado de --base-3) en el single del CPT proyecto. La eliminamos
   visualmente además del filtro PHP, por si el hook no la retira a tiempo.
   ========================================================================== */

.single-proyecto .featured-image,
.single-proyecto .page-header-image,
.single-proyecto .page-header-image-single,
.post-type-archive-proyecto .featured-image,
body[class*="proyecto"] .featured-image,
body[class*="proyecto"] > .site-footer:empty,
.single-proyecto .inside-article > .featured-image,
.single-proyecto .entry-header {
  display: none !important;
}

/* Cualquier contenedor de GP con fondo claro dentro del flujo del proyecto */
.single-proyecto .inside-article,
.single-proyecto .entry-content,
.single-proyecto .site-content,
.single-proyecto .content-area,
.single-proyecto #primary,
.single-proyecto #main {
  background: transparent !important;
}

/* ==========================================================================
   FIX Fase 3.2 — Fondo global + banda blanca (especificidad GeneratePress)
   GP fuerza:
     body{background-color:var(--base-2)}           -> #f7f8f9 (casi blanco)
     .separate-containers .inside-article{...--base-3}-> #ffffff (banda blanca)
   Igualamos/superamos su especificidad para imponer el negro de Paula.
   ========================================================================== */

/* 1. Fondo global de toda la web = negro, ganándole a GP */
html body,
body.generate-page,
body[class*="page-id-"],
body[class*="single-proyecto"] {
  background-color: var(--color-black) !important;
}

/* 2. Todos los contenedores de contenido de GP: fondo transparente/negro.
   Replicamos EXACTAMENTE los selectores de GP (.separate-containers ...) para
   igualar su especificidad, y añadimos los genéricos por si el theme está en
   modo one-container. */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.one-container .container,
.inside-page-header,
.site-content,
.content-area,
#primary,
#main,
.inside-article,
.entry-content,
article.page,
article[class*="proyecto"] {
  background-color: transparent !important;
}

/* 3. La imagen destacada / cabecera automática de GP: fuera del flujo.
   No solo display:none — también height 0 por si algún hijo la revive. */
.featured-image,
.page-header-image,
.page-header-image-single,
.featured-image.page-header-image.grid-container {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4. El <div class="site-footer"> vacío de GP: sin alto ni fondo */
body > .site-footer {
  background: var(--color-black) !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   FIX Fase 3.2 — Tipografías del footer (y header)
   El footer vive fuera de .pg-home / .entry-content, así que no heredaba las
   familias del sistema y caía al fallback serif del navegador. Las forzamos.
   ========================================================================== */

.custom-main-footer,
.custom-main-footer p,
.custom-main-footer a,
.custom-header,
.custom-header a {
  font-family: var(--font-body);
}

.custom-main-footer h2,
.custom-main-footer h3 {
  font-family: var(--font-headings) !important;
}

/* ==========================================================================
   FIX Fase 3.4 — SISTEMA DE BOTONES COHERENTE
   Objetivo: todos los botones (primario con flecha, primario sin flecha,
   secundario) con la MISMA altura, tipografía Cascadia Code y alineación.
   Altura de referencia: 52px.
   ========================================================================== */

:root {
  --btn-height: 52px;
  --btn-radius: 999px;
  --btn-font-size: 14px;
}

/* --- Fuente Cascadia en TODOS los botones y su texto --- */
.btn-primary,
.btn-primary .btn-text,
.btn-secondary,
.btn-secondary .btn-text,
.pg-btn-secondary,
.pg-hero__cv-link {
  font-family: var(--font-body) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}

/* --- PRIMARIO (píldora azul + círculo con flecha) ---
   El botón mide --btn-height. El texto y la flecha se alinean a esa altura. */
.btn-primary {
  display: inline-flex !important;
  align-items: center;
  gap: 0 !important;                /* la separación la da el margin de la flecha */
  height: var(--btn-height);
  padding: 0 !important;
  background: transparent !important;
  border-radius: var(--btn-radius);
  font-size: 0;                     /* elimina el espacio en blanco entre inline-elements del HTML */
  white-space: nowrap;
}

.btn-primary .btn-text {
  display: inline-flex;
  align-items: center;
  height: var(--btn-height);
  padding: 0 22px !important;
  background: var(--color-blue);
  color: var(--color-white) !important;
  border-radius: var(--btn-radius);
  border: 0 !important;
  font-size: var(--btn-font-size) !important;   /* restaura tamaño (el padre tiene font-size:0) */
}

/* Círculo de la flecha: cuadrado perfecto, un poco menor que la altura.
   Separación FIJA respecto al texto (6px) idéntica en todos los botones. */
.btn-primary .btn-arrow {
  width: calc(var(--btn-height) - 12px);
  height: calc(var(--btn-height) - 12px);
  min-width: calc(var(--btn-height) - 12px);
  margin-left: 6px !important;
  border-radius: 50%;
  background: var(--color-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- SECUNDARIO (contorno, misma altura, sin círculo) --- */
.btn-secondary,
.pg-btn-secondary,
.footer-cta-actions .btn-secondary,
.pg-hero__actions .pg-btn-secondary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  padding: 0 26px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--btn-radius) !important;
  color: var(--color-white) !important;
}

.btn-secondary .btn-text,
.pg-btn-secondary .btn-text {
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.btn-secondary:hover,
.pg-btn-secondary:hover,
.footer-cta-actions .btn-secondary:hover,
.pg-hero__actions .pg-btn-secondary:hover {
  border-color: var(--color-blue) !important;
  background: rgba(0, 126, 255, 0.08) !important;
}

/* --- El enlace-CV del hero, si se deja como enlace subrayado, se alinea
   verticalmente con los botones a su lado --- */
.pg-hero__actions {
  align-items: center !important;
}

.pg-hero__cv-link:not(.pg-btn-secondary) {
  display: inline-flex;
  align-items: center;
  height: var(--btn-height);
}

/* --- Filas de botones: alineación e igual separación en toda la web --- */
.pg-hero__actions,
.footer-cta-actions,
.pg-case-cta-actions,
.pg-projects-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==========================================================================
   HEADER SIMPLE — todas las páginas menos la home (inc/header.php,
   pg_header_clasico). Solo logotipo + "UX/UI" + hora, sin menú. Mismo
   tratamiento fijo/mix-blend-mode que el nav de la home, pero cargado aquí
   (components.css) porque se usa en TODO el sitio salvo la portada.
   ========================================================================== */
.pg-nav-simple {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  display: flex; align-items: center; gap: 16px; padding: 20px 34px;
  font-family: 'Space Mono', 'Cascadia Code', monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  mix-blend-mode: difference;
}
.pg-nav-simple a { color: #fff; text-decoration: none; transition: color .2s; }
.pg-nav-simple a:hover { color: var(--color-blue, #007EFF); }
.pg-nav-simple__brand { font-weight: 700; color: #fff; }
.pg-nav-simple__logo { height: 22px; width: auto; display: block; }
.pg-nav-simple__role { color: rgba(255,255,255,.5); }
.pg-nav-simple__spacer { flex: 1; }
.pg-nav-simple__clock { color: rgba(255,255,255,.5); min-width: 82px; text-align: right; }

@media (max-width: 780px) {
  .pg-nav-simple { gap: 16px; padding: 16px 20px; font-size: 10px; letter-spacing: .12em; }
  .pg-nav-simple__logo { height: 18px; }
}

/* ==========================================================================
   FOOTER HOME (.pg-foot-home) — inc/footer.php, pg_footer_home(). Se usa en
   la home y en /proyecto/ (movido aquí desde home-nueva.css, que no carga
   en /proyecto/, para que no se quede sin estilo ahí).
   ========================================================================== */
.pg-foot-home {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  padding: 26px 34px; border-top: 1px solid rgba(255,255,255,.12);
  font-family: 'Space Mono', 'Cascadia Code', monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6);
  background: #141414;
}
.pg-foot-home a { color: rgba(255,255,255,.6); text-decoration: none; }
/* El glifo © de Space Mono se dibuja muy pequeño/fino a este tamaño
   (típico de las fuentes monoespaciadas) y queda "enano" junto al resto
   del texto — lo compensamos con un tamaño mayor, alineado a la línea. */
.pg-foot-home__mark { display: inline-block; font-size: 1.5em; line-height: 1; vertical-align: -0.1em; }
.pg-foot-home a:hover { color: #5DC4B3; }
.pg-foot-home__links { display: flex; gap: 20px; }

@media (max-width: 780px) {
  .pg-foot-home { padding: 20px; justify-content: flex-start; gap: 10px; flex-direction: column; align-items: flex-start; }
}