/* ============================================================
   SvítTech UY • style.css
   Minimalist design system + Pastel Palette + 3D Effects
   Bulma friendly, modular & performant
   ============================================================ */

/* ----------  Root Theme Variables  ---------- */
:root{
  /* Pastel Core */
  --color-primary:#9ad4d6;    /* aqua pastel */
  --color-secondary:#ffb6b9;  /* pink pastel */
  --color-accent:#fdfd97;     /* yellow pastel */
  --color-dark:#222222;
  --color-light:#ffffff;
  --color-muted:#f5f5f5;

  /* Gradients */
  --gradient-primary:linear-gradient(135deg,var(--color-primary),var(--color-secondary));
  --gradient-secondary:linear-gradient(135deg,var(--color-secondary),var(--color-accent));

  /* Typography */
  --font-heading:'Montserrat',sans-serif;
  --font-body:'Merriweather',serif;

  /* Shadows */
  --shadow-soft:0 4px 10px rgba(0,0,0,.08);
  --shadow-medium:0 6px 14px rgba(0,0,0,.12);

  /* Radii */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;

  /* Timing */
  --transition-fast:.25s ease;
  --transition-medium:.45s cubic-bezier(.4,.2,.2,1);
}

/* ----------  Base Reset & Typography  ---------- */
html{scroll-behavior:smooth;font-size:16px;}
body{
  font-family:var(--font-body);
  color:var(--color-dark);
  background-color:var(--color-light);
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:800;
  line-height:1.2;
  color:var(--color-dark);
  text-align:center;
}
section{padding:4rem 0;}
a{color:var(--color-primary);transition:color var(--transition-fast);}
a:hover{color:var(--color-secondary);text-decoration:underline;}

/* ----------  Navbar  ---------- */
.navbar{background:var(--color-light);}
.navbar-item{font-family:var(--font-heading);font-weight:600;}
.navbar-burger span{background:var(--color-dark);}
.navbar-burger.is-active span{background:var(--color-primary);}

/* ----------  Global Button Styles  ---------- */
button,
.btn,
input[type='submit']{
  appearance:none;
  border:none;
  border-radius:var(--radius-sm);
  padding:.75rem 1.75rem;
  font-family:var(--font-heading);
  font-weight:600;
  background:var(--gradient-primary);
  color:var(--color-light);
  cursor:pointer;
  transition:transform var(--transition-fast),box-shadow var(--transition-fast);
  box-shadow:var(--shadow-soft);
}
button:hover,
.btn:hover,
input[type='submit']:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:var(--shadow-medium);
}
button:active,
.btn:active,
input[type='submit']:active{
  transform:translateY(0) scale(.98);
}

/* ----------  Hero Section  ---------- */
#hero{
  position:relative;
  color:var(--color-light);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#hero .title,
#hero .subtitle{color:var(--color-light);}
#hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
  z-index:1;
}
#hero .container{position:relative;z-index:2;}

/* ----------  Cards & Image Containers  ---------- */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-shadow:var(--shadow-soft);
  border-radius:var(--radius-md);
  transition:transform var(--transition-medium);
  background-color:var(--color-light);
}
.card:hover{transform:translateY(-6px) rotateX(3deg) rotateY(-3deg);}
.card-image{
  width:100%;
  height:250px;                 /* universal card height */
  overflow:hidden;
  border-top-left-radius:var(--radius-md);
  border-top-right-radius:var(--radius-md);
}
.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
  display:block;
}

/* ----------  Carousel (basic scroll)  ---------- */
.carousel{
  overflow-x:auto;
  display:grid;
  grid-auto-flow:column;
  grid-gap:1.5rem;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
}
.carousel .card{scroll-snap-align:start;}

/* ----------  Timeline (Events)  ---------- */
.timeline-header .tag{background:var(--color-primary);color:var(--color-dark);}
.timeline-marker.is-primary{background:var(--color-secondary);}
.timeline-item:hover .timeline-marker{transform:scale(1.2);}

/* ----------  Pricing  ---------- */
#pricing .card{border:2px solid transparent;}
#pricing .card:hover{border-color:var(--color-primary);}

/* ----------  Research Progress Bars  ---------- */
.progress{
  height:12px;
  border-radius:var(--radius-lg);
  background:var(--color-muted);
}
.progress::-webkit-progress-bar{background:var(--color-muted);}
.progress::-webkit-progress-value{border-radius:var(--radius-lg);}
.progress.is-info::-webkit-progress-value{background:var(--color-primary);}
.progress.is-success::-webkit-progress-value{background:#a8dea8;}
.progress.is-warning::-webkit-progress-value{background:#ffd48d;}
.progress.is-link::-webkit-progress-value{background:#9bb9ff;}

/* ----------  Careers  ---------- */
#careers ul{margin-top:1rem;}
#careers li{margin-bottom:.5rem;}

/* ----------  FAQ  ---------- */
details{
  border:1px solid var(--color-primary);
  border-radius:var(--radius-sm);
  padding:1rem 1.5rem;
  margin-bottom:1rem;
  background:var(--color-muted);
}
details[open]{background:var(--color-light);box-shadow:var(--shadow-soft);}
summary{cursor:pointer;font-family:var(--font-heading);font-weight:600;}

/* ----------  Legal Pages Spacing  ---------- */
body.legal-page{padding-top:100px;}

/* ----------  Success Page  ---------- */
.full-center{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ----------  Parallax Utility  ---------- */
.parallax{
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
}

/* ----------  Gradient Overlay Utility  ---------- */
.gradient-overlay{
  position:relative;
}
.gradient-overlay::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6));
  z-index:0;
}
.gradient-overlay>*{position:relative;z-index:1;}

/* ----------  Glassmorphism Utility  ---------- */
.glass{
  backdrop-filter:blur(10px) saturate(180%);
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-md);
}

/* ----------  Hover Effects for “Leer más” Links  ---------- */
.read-more{
  position:relative;
  font-weight:600;
  padding-right:1.5rem;
}
.read-more::after{
  content:'→';
  position:absolute;
  right:0;
  transition:transform var(--transition-fast);
}
.read-more:hover::after{transform:translateX(4px);}

/* ----------  Footer  ---------- */
footer{
  background:var(--color-muted);
  padding:3rem 1rem;
}
footer a{
  color:var(--color-dark);
  font-weight:600;
  margin:0 .25rem;
}
footer a:hover{color:var(--color-primary);}
footer .social-link{
  display:inline-block;
  position:relative;
  transition:color var(--transition-fast);
}
footer .social-link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:2px;
  background:var(--color-primary);
  transition:width var(--transition-fast);
}
footer .social-link:hover::after{width:100%;}

/* ----------  3D Floating Animation  ---------- */
@keyframes float3d{
  0%{transform:translateY(0) rotateX(0deg) rotateY(0deg);}
  50%{transform:translateY(-8px) rotateX(4deg) rotateY(-4deg);}
  100%{transform:translateY(0) rotateX(0deg) rotateY(0deg);}
}
.float-3d{animation:float3d 6s ease-in-out infinite;}

/* ----------  Utility Classes  ---------- */
.text-center{text-align:center;}
.mt-4{margin-top:1.5rem;}
.ml-3{margin-left:1rem;}
.pt-6{padding-top:4rem;}
.no-select{user-select:none;}
.navbar-burger{
  display: none;
}