/*
Theme Name: GeneratePress Child - Metavers.cat
Description: Child theme para GeneratePress - Metavers.cat
Author: María de Metavers.cat
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-child
*/

/* ============================
   IMPORTACIONES
   ============================ */

@import url('assets/css/02-video-hero.css');
@import url('assets/css/03-cta.css');
@import url('assets/css/04-grid-cards-2-4.css');
@import url('assets/css/05-pipeline.css');
@import url('assets/css/06-separator.css');
@import url('assets/css/07-video-info.css');
@import url('assets/css/08-grid-videos.css');
@import url('assets/css/09-tarifas.css');
@import url('assets/css/10-extras.css');
@import url('assets/css/11-formulario.css');
@import url('assets/css/12-faq.css');
@import url('assets/css/13-footer.css');
@import url('assets/css/14-video+info-plan-a-medida.css');

/* 
==================================================
ESTILOS PERSONALIZADOS PARA METAVERS.CAT
==================================================
*/


/* ============================
   VARIABLES CSS
   ============================ */

:root {
  
  /* Colores principales (para degradados) */
  --color-primary: #00d4ff;
  --color-secondary: #084df2;
  
  /* Sistema de 3 colores tipografía */
  --cyan: #00d4ff;
  --muted: #ededed;
  --bright: #ffffff;
  
  /* Degradado reutilizable */
  --gradient-animated: linear-gradient(
    45deg, 
    var(--color-primary), 
    var(--color-secondary), 
    var(--color-primary), 
    var(--color-secondary)
  );
  
  /* Tipografía responsive */
  --fs-h1: clamp(2rem, 4vw + 1rem, 3rem);           
  --fs-h2: clamp(1.4rem, 1.8vw + 1rem, 2.25rem);   
  --fs-h3: clamp(1.15rem, 0.9vw + 1rem, 1.6rem);   
  --fs-h4: clamp(1.125rem, 0.7vw + 1.05rem, 1.4rem);
  --fs-text-lg: 1rem;
  --fs-text-md: 1rem;
  --fs-text-sm: 0.875rem;
  
  
  /* Backgrounds */
  --bg-body: linear-gradient(225deg, #084df2 0%, #000814 25%, #001d3d 50%, #2c3e50 75%, #000 100%);
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-light-overlay: rgba(96, 165, 250, 0.1);
  
  /* Bordes */
  --border-primary: rgba(96, 165, 250, 0.3);
  --border-light: rgba(255, 255, 255, 0.08);
  
  /* Espaciados */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  
  /* Otros */
  --container-max: 1200px;
  --container-padding: 1rem;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --transition-normal: 0.3s ease;
}

/* ============================
   RESET Y CONFIGURACIÓN GLOBAL
   ============================ */

* {
  font-family: var(--font-family) !important;
  box-sizing: border-box;
}

body {
  background: var(--bg-body) !important;
  background-attachment: fixed !important;
  color: var(--muted) !important;
  overflow-x: hidden;   /* Solo horizontal */
}

/* overlay decorativo */

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 20%, rgba(8, 77, 242, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(44, 62, 80, 0.1) 0%, transparent 50%);
  z-index: -1;
  pointer-events: none;
}

/* Responsive body móvil */
@media (max-width: 430px) {
  body {
    background: linear-gradient(225deg, #000814 0%, #001d3d 30%, #2c3e50 60%, #000 100%) !important;
    background-attachment: scroll !important;
  }
}

/* Eliminar overlay en pantallas pequeñas */
@media (max-width: 768px) {
  body::before {
    display: none;
  }
}

/* ============================
   ESTILOS REUTILIZABLES
   ============================ */

/* Espaciados */

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-sm) !important; }
.mb-2 { margin-bottom: var(--spacing-md) !important; }
.mb-3 { margin-bottom: var(--spacing-lg) !important; }
.mb-4 { margin-bottom: var(--spacing-xl) !important; }
.mb-5 { margin-bottom: var(--spacing-xxl) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-sm) !important; }
.mt-2 { margin-top: var(--spacing-md) !important; }
.mt-3 { margin-top: var(--spacing-lg) !important; }
.mt-4 { margin-top: var(--spacing-xl) !important; }
.mt-5 { margin-top: var(--spacing-xxl) !important; }

/* Alineación */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ============================
   TIPOGRAFÍA BASE
   ============================ */

p, li, span, td, th {
  color: var(--muted);
}

a {
  color: var(--cyan);
  transition: color var(--transition-normal);
}

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

.cyan {
  color: var(--cyan) !important;
}

.muted {
  color: var(--muted) !important;
}

.bright {
  color: var(--bright) !important;
}

/* ============================
   TÍTULOS BASE
   ============================ */

h1, h2, h3, h4 {
  line-height: 1.2;
  margin-bottom: 2rem;
  text-align: center;
}

h1, .entry-title {
  font-weight: 700;
  font-size: var(--fs-h1);
}

h2 {
  font-weight: 400;
  font-size: var(--fs-h2);
}

h3 {
  font-weight: 400;
  font-size: var(--fs-h3);
}

h4 {
  font-weight: 400;
  font-size: var(--fs-h4);
}

/* ============================
   TÍTULOS CON CLASE .gradient
   ============================ */
p.gradient,
h1.gradient,
h2.gradient,
h3.gradient,
h4.gradient,
.entry-title {
  background: var(--gradient-animated);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 15s ease-in-out infinite;
}

/* ANIMACIÓN GRADIENTE */

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============================
   TÍTULOS CON COLORES SÓLIDOS
   ============================ */

/* Sobrescribir gradiente con color sólido */
h1.cyan, h2.cyan, h3.cyan, h4.cyan, .entry-title.cyan,
h1.muted, h2.muted, h3.muted, h4.muted, .entry-title.muted,
h1.bright, h2.bright, h3.bright, h4.bright, .entry-title.bright {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  animation: none;
}


h1.cyan, h2.cyan, h3.cyan, h4.cyan, .entry-title.cyan {
  color: var(--cyan);
}

h1.muted, h2.muted, h3.muted, h4.muted, .entry-title.muted {
  color: var(--muted);
}

h1.bright, h2.bright, h3.bright, h4.bright, .entry-title.bright {
  color: var(--bright);
}
/* Responsive MOBILE FIRST */

/* Móvil pequeño: Sin animación */
@media (max-width: 430px) {
  h1.gradient, h2.gradient, h3.gradient, h4.gradient,
  .entry-title.gradient {
    animation: none;
    background-size: 200% 200%;
  }
}

/* Tablet: Animación lenta */
@media (min-width: 431px) and (max-width: 768px) {
  h1.gradient, h2.gradient, h3.gradient, h4.gradient,
  .entry-title.gradient {
    animation-duration: 20s;
  }
}

/* Desktop: Animación completa */
@media (min-width: 769px) {
  h1.gradient, h2.gradient, h3.gradient, h4.gradient,
  .entry-title.gradient {
    animation-duration: 15s;
  }
}


/* ============================
   CONTENEDORES
   ============================ */

#primary {
  width: 100%;
  max-width: 100%;
}

.site-header,
.site-content,
.site-footer,
.entry-content,
.widget-area {
  position: relative;
  z-index: 1;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
}

/* Anular paddings de GeneratePress */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-page-header {
  padding: 0 !important;
}

.wp-block-group,
.entry-content,
.widget,
.post,
.page {
  margin: var(--spacing-sm) 0 !important;
  padding: var(--spacing-md) !important;
  max-width: 100%;
}

.main-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
}

/* ============================
   HEADER
   ============================ */

#masthead {
  max-width: var(--container-max);
  margin: 0 auto;
  background: transparent;
  padding: 0 var(--container-padding);
}

.inside-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
}

.site-logo {
  flex: 0 0 auto !important;
  margin-right: auto !important;
}

.site-logo img {
  max-height: 30px !important;
  width: auto !important;
  margin-left: 0;
}

/* ============================
   UTILIDADES
   ============================ */
 
 /* HIGHLIGHT - Resaltado de texto/links */

 .highlight {
  color: var(--color-primary) !important;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: all var(--transition-normal);
  display: inline;
}

/* Subrayado animado (solo en links) */
a.highlight::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity: 0;
  transition: opacity var(--transition-normal);
}

a.highlight:hover {
  color: var(--color-secondary) !important;
}

a.highlight:hover::after {
  opacity: 1;
}

/* Variante para texto no-link (sin hover ni subrayado) */
span.highlight,
strong.highlight {
  /* Solo color, sin efectos adicionales */
}

/*   Responsive MOBILE FIRST */

/* Móvil: Sin animación de subrayado */
@media (max-width: 640px) {
  a.highlight::after {
    display: none;
  }
}

/* Desktop: Con animación completa */
@media (min-width: 641px) {
  a.highlight::after {
    display: block;
  }
}