@charset "UTF-8";

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

:root {

  --bg: #07111f;
  --bg-soft: #0f172a;
  --bg-card: #111827;

  --text: #f8fafc;
  --muted: #cbd5e1;
  --muted-dark: #64748b;

  --line: rgba(255, 255, 255, 0.12);

  --primary: #2563eb;
  --primary-soft: #3b82f6;

  --green: #10b981;

  --white: #ffffff;
  --light: #f8fafc;

  --shadow: 0 24px 60px rgba(0, 0, 0, 0.22);

  --radius: 22px;

  --max: 1180px;

}

/* =========================
   RESET
========================= */

* {

  margin: 0;
  padding: 0;

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  font-family:
  "Manrope",
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  sans-serif;

  background: var(--bg);

  color: var(--text);

  line-height: 1.6;

}

img {

  max-width: 100%;

  display: block;

}

a {

  text-decoration: none;

  color: inherit;

}

.container {

  width: min(100% - 40px, var(--max));

  margin-inline: auto;

}

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

.site-header {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  background: rgba(7, 17, 31, 0.72);

  backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}

.header-inner {

  min-height: 82px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

}

/* =========================
   LOGO
========================= */

.logo {

  display: flex;

  align-items: center;

  gap: 12px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.09em;

}

.logo-mark {

  width: 42px;
  height: 42px;

  border-radius: 14px;

  display: grid;

  place-items: center;

  border: 1px solid rgba(255,255,255,.16);

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.9),
      rgba(7,17,31,.6)
    );

  box-shadow:
    0 16px 34px rgba(37,99,235,.24);

  font-size: 18px;

}

/* =========================
   NAV
========================= */

.nav {

  display: flex;

  align-items: center;

  gap: 28px;

  color: var(--muted);

  font-size: .95rem;

}

.nav a {

  transition: .2s ease;

}

.nav a:hover,
.nav a.active {

  color: var(--white);

}

/* =========================
   BUTTONS
========================= */

.header-actions {

  display: flex;

  align-items: center;

  gap: 12px;

}

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 48px;

  padding-inline: 22px;

  border-radius: 12px;

  border: 1px solid transparent;

  font-weight: 700;

  cursor: pointer;

  transition:
    transform .2s ease,
    background .2s ease,
    border .2s ease;

}

.btn:hover {

  transform: translateY(-2px);

}

.btn-primary {

  background: var(--primary);

  color: var(--white);

  box-shadow:
    0 18px 38px rgba(37,99,235,.28);

  position: relative;

  overflow: hidden;

}

.btn-primary::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.14),
      transparent
    );

  transform: translateX(-100%);

  transition: .7s ease;

}

.btn-primary:hover::before {

  transform: translateX(100%);

}

.btn-secondary {

  border-color: rgba(255,255,255,.22);

  color: var(--white);

  background: rgba(255,255,255,.04);

}

.btn-small {

  min-height: 42px;

  padding-inline: 18px;

  font-size: .9rem;

}

/* =========================
   MENU MOBILE
========================= */

.menu-toggle {

  display: none;

  width: 44px;
  height: 44px;

  border-radius: 12px;

  border: 1px solid var(--line);

  background: rgba(255,255,255,.05);

  color: var(--white);

  font-size: 1.3rem;

}

/* =========================
   HERO
========================= */

.hero {

  position: relative;

  min-height: 760px;

  display: flex;

  align-items: center;

  overflow: hidden;

  isolation: isolate;

  background:
    linear-gradient(
      90deg,
      rgba(7,17,31,.98) 0%,
      rgba(7,17,31,.78) 42%,
      rgba(7,17,31,.35) 100%
    ),

    radial-gradient(
      circle at 70% 30%,
      rgba(37,99,235,.22),
      transparent 28%
    ),

    url("../img/bierzo-hero.png")
    center / cover no-repeat;

}

.hero::after {

  content: "";

  position: absolute;

  inset: auto 0 0;

  height: 180px;

  background:
    linear-gradient(
      0deg,
      var(--bg),
      transparent
    );

}

.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at top right,
      rgba(37,99,235,.28),
      transparent 30%
    );

  z-index: 1;

}

.hero-content {

  position: relative;

  z-index: 2;

  max-width: 720px;

  padding-top: 80px;

}

.eyebrow {

  color: var(--primary-soft);

  text-transform: uppercase;

  letter-spacing: .16em;

  font-size: .78rem;

  font-weight: 800;

  margin-bottom: 18px;

}

h1 {

  font-size:
    clamp(
      2.9rem,
      7vw,
      5.9rem
    );

  line-height: .98;

  letter-spacing: -.06em;

  margin-bottom: 26px;

  text-shadow: 0 8px 30px rgba(0,0,0,.35);

}

.hero p {

  max-width: 610px;

  color: var(--muted);

  font-size:
    clamp(
      1.05rem,
      2vw,
      1.25rem
    );

  margin-bottom: 34px;

}

.hero-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-bottom: 34px;

}

.badge {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding:
    10px
    16px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.12);

  background: rgba(255,255,255,.06);

  color: var(--muted);

  font-size: .95rem;

}

/* =========================
   SECTIONS
========================= */

section {

  padding: 96px 0;

}

.section-light {

  background: var(--light);

  color: #0f172a;

}

.section-head {

  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 24px;

  margin-bottom: 42px;

}

.section-head h2,
.ai-content h2,
.contact h2 {

  font-size:
    clamp(
      2rem,
      4vw,
      3.3rem
    );

  line-height: 1.05;

  letter-spacing: -.04em;

}

.section-head p,
.ai-content p,
.contact p {

  color: var(--muted-dark);

  max-width: 470px;

  margin-top: 16px;

}

/* =========================
   SERVICES
========================= */

.services-grid {

  display: grid;

  grid-template-columns:
    repeat(6, 1fr);

  gap: 18px;

}

.service-card {

  grid-column: span 2;

  min-height: 220px;

  padding: 28px;

  border-radius: var(--radius);

  border: 1px solid #e2e8f0;

  background: var(--white);

  transition:
    transform .22s ease,
    box-shadow .22s ease;

}

.service-card:hover {

  transform: translateY(-6px);

  box-shadow:
    0 20px 44px rgba(15,23,42,.08);

}

.icon {

  width: 48px;
  height: 48px;

  border-radius: 15px;

  display: grid;

  place-items: center;

  margin-bottom: 28px;

  color: var(--primary);

  background:
    rgba(37,99,235,.08);

  font-size: 1.45rem;

}

.service-card h3 {

  font-size: 1.1rem;

  margin-bottom: 10px;

}

.service-card p {

  color: #64748b;

  font-size: .95rem;

}

/* =========================
   PROYECTOS
========================= */

.projects-layout {

  display: grid;

  grid-template-columns:
    .85fr
    2.15fr;

  gap: 42px;

  align-items: start;

}

.project-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 22px;

}

.project-card img {

  aspect-ratio: 16 / 10;

  object-fit: cover;

  border-radius: 18px;

  background: #dbeafe;

  box-shadow:
    0 20px 44px rgba(15,23,42,.10);

}

.project-card h3 {

  margin-top: 16px;

  font-size: 1rem;

}

.project-card p {

  color: #64748b;

  font-size: .9rem;

}

/* =========================
   IA
========================= */

.ai-section {

  background:
    linear-gradient(
      135deg,
      #07111f 0%,
      #0f172a 100%
    );

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

}

.ai-layout {

  display: grid;

  grid-template-columns:
    .95fr
    1.55fr;

  gap: 60px;

  align-items: center;

}

.ai-content p {

  color: var(--muted);

}

.ai-features {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;

}

.ai-feature {

  padding: 24px;

  border-radius: 20px;

  border: 1px solid var(--line);

  background:
    rgba(255,255,255,.04);

}

.ai-feature span {

  display: block;

  font-size: 1.6rem;

  color: var(--primary-soft);

  margin-bottom: 20px;

}

.ai-feature h3 {

  font-size: 1rem;

  margin-bottom: 8px;

}

.ai-feature p {

  color: var(--muted);

  font-size: .92rem;

}

/* =========================
   CONTACTO
========================= */

.contact {

  background: var(--light);

  color: #0f172a;

}

.contact-panel {

  display: grid;

  grid-template-columns:
    .9fr
    1.1fr;

  gap: 40px;

  align-items: center;

  padding: 42px;

  border-radius: 30px;

  background: var(--white);

  box-shadow:
    0 26px 70px rgba(15,23,42,.08);

}

.contact-list {

  display: grid;

  gap: 16px;

}

.contact-item {

  display: flex;

  gap: 14px;

  align-items: start;

  color: #334155;

}

/* =========================
   FOOTER
========================= */

.site-footer {

  padding: 54px 0;

  background: #07111f;

  color: var(--muted);

  border-top:
    1px solid var(--line);

}

.footer-grid {

  display: grid;

  grid-template-columns:
    1.4fr
    repeat(3, 1fr);

  gap: 34px;

}

.footer-grid h3 {

  color: var(--white);

  font-size: .9rem;

  text-transform: uppercase;

  letter-spacing: .13em;

  margin-bottom: 16px;

}

.footer-grid a {

  display: block;

  margin-bottom: 8px;

  color: var(--muted);

}

.footer-grid a:hover {

  color: var(--white);

}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 980px) {

  .menu-toggle {

    display: inline-grid;

    place-items: center;

  }

  .nav {

    position: absolute;

    top: 82px;

    left: 20px;
    right: 20px;

    display: none;

    flex-direction: column;

    align-items: flex-start;

    padding: 24px;

    border-radius: 20px;

    background:
      rgba(7,17,31,.96);

    border:
      1px solid var(--line);

  }

  .nav.is-open {

    display: flex;

  }

  .header-actions .btn-secondary {

    display: none;

  }

  .services-grid,
  .project-grid,
  .ai-features,
  .footer-grid,
  .projects-layout,
  .ai-layout,
  .contact-panel {

    grid-template-columns: 1fr;

  }

  .service-card {

    grid-column: span 1;

  }

  .hero {

    min-height: 700px;

  }

}

@media (max-width: 620px) {

  .container {

    width:
      min(
        100% - 26px,
        var(--max)
      );

  }

  .site-header .logo span:last-child {

    font-size: .9rem;

  }

  .hero {

    min-height: 720px;

  }

  .section-head {

    display: block;

  }

  section {

    padding: 72px 0;

  }

  .contact-panel {

    padding: 28px;

  }

}

.hero-content {

  animation:
    heroFade 1.2s ease forwards;

}

@keyframes heroFade {

  from {

    opacity: 0;

    transform:
      translateY(30px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}

/* =========================
   HEADER PREMIUM SCROLL
========================= */

.site-header {

  transition:
    background .3s ease,
    box-shadow .3s ease,
    border-color .3s ease,
    min-height .3s ease;

}

.site-header.is-scrolled {

  background:
    rgba(7, 17, 31, .92);

  box-shadow:
    0 18px 50px rgba(0,0,0,.22);

  border-bottom:
    1px solid rgba(255,255,255,.12);

}

.site-header.is-scrolled .header-inner {

  min-height: 72px;

}

.nav a {

  position: relative;

}

.nav a::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0;
  height: 2px;

  border-radius: 999px;

  background: var(--primary-soft);

  transition: width .25s ease;

}

.nav a:hover::after,
.nav a.active::after {

  width: 100%;

}

/* =========================
   REVEAL ANIMATIONS
========================= */

.reveal {

  opacity: 0;

  transform:
    translateY(28px);

  transition:
    opacity .7s ease,
    transform .7s ease;

}

.reveal.is-visible {

  opacity: 1;

  transform:
    translateY(0);

}

.service-card,
.project-card,
.ai-feature,
.contact-panel {

  will-change:
    transform,
    opacity;

}

/* =========================
   PREMIUM CARDS
========================= */

.service-card,
.ai-feature,
.project-card img,
.contact-panel {

  position: relative;

}

.service-card {

  overflow: hidden;

}

.service-card::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at top right,
      rgba(37,99,235,.12),
      transparent 32%
    );

  opacity: 0;

  transition: opacity .25s ease;

}

.service-card:hover::before {

  opacity: 1;

}

.ai-feature {

  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease;

}

.ai-feature:hover {

  transform: translateY(-6px);

  background:
    rgba(255,255,255,.07);

  border-color:
    rgba(59,130,246,.45);

}

/* =========================
   FORMULARIO CONTACTO
========================= */

.contact-form {
  display: grid;
  gap: 18px;
  width: 100%;
}

.form-group {
  display: grid;
  gap: 8px;
}

.form-group label {
  font-weight: 700;
  color: #0f172a;
  font-size: .95rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  padding: 15px 16px;
  font-family: inherit;
  font-size: 1rem;
  color: #0f172a;
  background: #f8fafc;
  outline: none;
  transition: border .2s ease, box-shadow .2s ease, background .2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.form-group textarea {
  resize: vertical;
  min-height: 150px;
}

.contact-form .btn {
  width: fit-content;
  border: none;
}

/* =========================
   CONTACT FORM PREMIUM
========================= */

.contact-form {

  display: grid;

  gap: 20px;

  width: 100%;

}

.form-group {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.form-group label {

  font-size: .95rem;

  font-weight: 700;

  color: #0f172a;

}

.form-group input,
.form-group textarea {

  width: 100%;

  border: 1px solid #dbe3ef;

  background: #f8fafc;

  border-radius: 16px;

  padding:
    16px
    18px;

  font-family: inherit;

  font-size: 1rem;

  color: #0f172a;

  outline: none;

  transition:
    border .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;

}

.form-group input::placeholder,
.form-group textarea::placeholder {

  color: #94a3b8;

}

.form-group input:focus,
.form-group textarea:focus {

  border-color: var(--primary);

  background: #ffffff;

  box-shadow:
    0 0 0 5px rgba(37,99,235,.10);

}

.form-group textarea {

  resize: vertical;

  min-height: 180px;

}

.contact-form .btn {

  width: fit-content;

  border: none;

}

/* =========================
   CONTACT PANEL IMPROVED
========================= */

.contact-panel {

  align-items: start;

}

.contact-panel h2 {

  font-size: 2rem;

  line-height: 1.1;

  margin-bottom: 10px;

}

.contact-list {

  gap: 20px;

}

.contact-item {

  font-size: 1rem;

  line-height: 1.5;

}

.contact-item strong {

  min-width: 110px;

  display: inline-block;

  color: #0f172a;

}

/* =========================
   MOBILE
========================= */

@media (max-width: 980px) {

  .contact-panel {

    grid-template-columns: 1fr;

  }

}

/* =========================
   SOCIALS
========================= */

.social-links {

  display: flex;

  gap: 14px;

  margin-top: 20px;

}

.social-links a {

  width: 44px;

  height: 44px;

  border-radius: 14px;

  background:
    rgba(255,255,255,.06);

  border:
    1px solid rgba(255,255,255,.08);

  display: flex;

  align-items: center;

  justify-content: center;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;

}

.social-links a:hover {

  transform:
    translateY(-4px);

  background:
    rgba(37,99,235,.18);

  border-color:
    rgba(59,130,246,.35);

}

.social-links svg {

  width: 20px;

  height: 20px;

  fill: white;

}

/* =========================
   LEGAL PAGES
========================= */
.legal-hero{padding:150px 0 76px;background:radial-gradient(circle at 78% 18%,rgba(37,99,235,.24),transparent 30%),linear-gradient(135deg,#07111f 0%,#0f172a 100%)}
.legal-hero h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1;letter-spacing:-.06em;margin-bottom:22px}
.legal-hero p{color:var(--muted);max-width:780px;font-size:1.08rem}
.legal-page{background:var(--light);color:#0f172a;padding:74px 0}
.legal-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:42px;align-items:start}
.legal-nav{position:sticky;top:105px;display:grid;gap:10px;padding:22px;border-radius:22px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 20px 50px rgba(15,23,42,.07)}
.legal-nav a{color:#64748b;font-weight:800;font-size:.95rem}
.legal-nav a:hover{color:var(--primary)}
.legal-content{padding:42px;border-radius:28px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 24px 60px rgba(15,23,42,.08)}
.legal-content h2{margin:34px 0 14px;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;letter-spacing:-.03em}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{margin:28px 0 10px;font-size:1.2rem}
.legal-content p,.legal-content li{color:#475569}
.legal-content p,.legal-content ul{margin-bottom:18px}
.legal-content ul{padding-left:22px}
.legal-note{margin-top:34px;padding:20px;border-radius:18px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a}
@media(max-width:980px){.legal-layout{grid-template-columns:1fr}.legal-nav{position:static}.legal-content{padding:28px}}

.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 3000;
  display: none;
}

.cookie-banner.is-visible {
  display: block;
}

.cookie-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px;
  border-radius: 22px;
  background: rgba(7, 17, 31, .94);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}

.cookie-content h3 {
  margin-bottom: 6px;
  color: var(--white);
}

.cookie-content p {
  color: var(--muted);
  max-width: 720px;
  font-size: .95rem;
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-link {
  color: var(--primary-soft);
  font-weight: 800;
  font-size: .92rem;
}

@media (max-width: 780px) {
  .cookie-content,
  .cookie-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .cookie-actions {
    width: 100%;
  }

  .cookie-actions .btn {
    width: 100%;
  }
}

/* Espaciado de los apartados legales */
.legal-content > section {
  padding: 0;
  scroll-margin-top: 110px;
}

.legal-content > section + section {
  margin-top: 32px;
}

/* Formulario de contacto */
.contact-honeypot {
  display: none;
}

.form-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #475569;
  font-size: .9rem;
}

.form-privacy input {
  flex-shrink: 0;
  margin-top: 5px;
}

.form-privacy a {
  color: var(--primary);
  text-decoration: underline;
}

.form-help {
  color: #64748b;
  font-size: .85rem;
}

.contact-form .btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.contact-feedback {
  grid-column: 1 / -1;
  scroll-margin-top: 110px;
}

.contact-feedback:empty {
  display: none;
}

.form-notice {
  padding: 16px 20px;
  margin-bottom: 20px;
  border: 1px solid;
  border-radius: 12px;
}

.form-notice-success {
  color: #166534;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.form-notice-error {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fecaca;
}

/* Contraste de los bloques sobre fondo claro */
.section-light .ai-content p,
.section-light .ai-feature p {
  color: #475569;
}