/* Tokens compartidos web ↔ demos (feedback-v10): ancho de contenido, radios,
   bordes y sombras alineados con demos.fortiseg.eu; la paleta sigue siendo la
   azul de marca Fortiseg (logo). */
:root {
    --brand: #1e3c72;
    --brand-2: #2a5298;
    --accent: #5464cf;
    --content-w: 1000px;
    --radius: 12px;
    --radius-s: 8px;
    --line: #e6e9f2;
    --shadow-card: 0 2px 10px rgba(30, 60, 114, 0.06);
    --shadow-lift: 0 10px 28px rgba(30, 60, 114, 0.14);
    --ease: cubic-bezier(.2, .8, .2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
  }

  /* Accesibilidad: texto solo para lectores de pantalla [UX-002, UX-006] */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }

  /* Skip link: saltar al contenido (WCAG 2.4.1) [UX-011] */
  .skip-link {
    position: absolute;
    left: -9999px; top: 0;
    z-index: 1000;
    background: #fff; color: #0b2239;
    padding: 0.6rem 1rem;
    border-radius: 0 0 6px 0;
    text-decoration: none;
  }
  .skip-link:focus { left: 0; }
  
  /* Header */
  header {
    background: white;
    color: #333;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  
  .header-content {
    max-width: var(--content-w);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .logo-container {
    display: flex;
    align-items: center;
  }
  
  .logo {
    height: 50px;
    width: auto;
  }
  
  nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
  }
  
  nav a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
  }
  
  nav a:hover {
    color: #0038a8;
  }
  
  /* Hero Section */
  .hero {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    padding: 5rem 2rem;
    text-align: center;
  }
  
  .hero h1 {
    font-size: 2.8rem;
    margin-bottom: 1.2rem;
    font-weight: 700;
  }
  
  .hero p {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .btn-primary {
    background: white;
    color: #1e3c72;
    padding: 0.85rem 2rem;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s;
  }

  .btn-primary:hover {
    opacity: 0.9;
  }

  .btn-secondary {
    background: transparent;
    color: white;
    padding: 0.85rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,0.6);
    transition: border-color 0.2s;
  }

  .btn-secondary:hover {
    border-color: white;
  }

  /* Pilares */
  #pilares {
    background: #f4f6fb;
    max-width: 100%;
    padding: 4rem 2rem;
  }

  .pillars-grid {
    max-width: var(--content-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }

  .pillar-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
  }

  .pillar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  }

  .pillar-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .pillar-card h3 {
    color: #1e3c72;
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
  }

  .pillar-card p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 1.5rem;
  }

  .pillar-link {
    display: inline-block;
    color: #1e3c72;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid #1e3c72;
    padding-bottom: 2px;
    transition: opacity 0.2s;
  }

  .pillar-link:hover {
    opacity: 0.7;
  }
  
  /* Sections */
  section {
    max-width: var(--content-w);
    margin: 0 auto;
    padding: 4rem 2rem;
  }
  
  section h2 {
    color: #1e3c72;
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
  }
  
  .section-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
  }
  
  .section-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  }
  
  .section-text {
    font-size: 1.1rem;
    line-height: 1.8;
  }
  
  /* Services Grid */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
  }
  
  .service-card {
    background: #f8f9fa;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: transform 0.3s, box-shadow 0.3s;
  }

  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lift);
  }
  
  .service-card h3 {
    color: #1e3c72;
    margin-bottom: 1rem;
  }
  
  /* Contact Section */
  #contacto {
    background: #f8f9fa;
  }
  
  .contact-info {
    text-align: center;
    margin-top: 2rem;
  }
  
  .contact-info a {
    color: #1e3c72;
    text-decoration: none;
    font-weight: 600;
  }
  
  .contact-info a:hover {
    text-decoration: underline;
  }
  
  .contact-info p {
    margin: 1rem 0;
    font-size: 1.1rem;
  }
  
  .cta-button {
    background: linear-gradient(135deg, #5464cf 0%, #6a4a9e 100%);
    color: white;
    padding: 1rem 2rem;
    text-align: center;
    margin: 2rem auto;       /* centra horizontalmente */
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
    display: inline-block;   /* se ajusta al texto */
    font-weight: 600;
  }
  

  /* Footer */
  footer {
    background: #1e3c72;
    color: white;
    text-align: center;
    padding: 2rem;
  }
  footer a {
    color: #c8d8ff;
    text-decoration: none;
  }
  footer a:hover {
    color: white;
    text-decoration: underline;
  }
  
  /* Iconos SVG inline (sustituyen a los emojis, feedback-v10). Tamaño 1em:
     heredan el font-size del contenedor (.icon, .tax-icon, .pillar-icon). */
  .i {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.12em;
    flex-shrink: 0;
  }
  .icon .i, .tax-icon .i, .pillar-icon .i { color: var(--accent); }

  /* Responsive */
  @media (max-width: 768px) {
    .header-content {
      flex-direction: column;
      gap: 1rem;
    }
  
    nav ul {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
    }
  
    .hero h1 {
      font-size: 2rem;
    }
  
    .section-content {
      grid-template-columns: 1fr;
    }
  
    .services-grid {
      grid-template-columns: 1fr;
    }
  }
#services-file a {
    color: white !important;
    text-decoration: none;
    font-weight: 600;
}
#services-file a:hover {
    opacity: 0.8;
}


.service-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.service-card-link:hover h3 {
    color: #1e3c72;
}

.contact-meeting {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.contact-meeting p {
    font-style: italic;
    color: #555;
    margin-bottom: 0.8rem;
}

.meeting-link {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background-color: #1e3c72;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color 0.3s;
}

.meeting-link:hover {
    background-color: #2a5298;
}

.service-link {
    display: inline-block;
    margin-top: 1rem;
    color: #1e3c72;
    font-weight: 600;
    text-decoration: none;
}

.service-link:hover {
    text-decoration: underline;
}

/* ═══════════ Taxonomía: tarjetas de Soluciones y Sectores ═══════════ */
.section-lead {
    text-align: center;
    color: #555;
    font-size: 1.1rem;
    max-width: 720px;
    margin: -1rem auto 2.5rem;
}
#soluciones { background: #f4f6fb; max-width: 100%; }
#soluciones > h2, #soluciones > .section-lead, #soluciones > .tax-grid,
#sectores > h2, #sectores > .section-lead, #sectores > .tax-grid { max-width: var(--content-w); margin-left: auto; margin-right: auto; }

.tax-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.tax-grid-sectors {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}
.tax-card {
    background: white;
    border-radius: var(--radius);
    padding: 2.2rem;
    box-shadow: var(--shadow-card);
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #eef1f8;
}
.tax-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(30,60,114,0.15);
}
.tax-card-sm { padding: 1.6rem 1.4rem; }
.tax-icon { font-size: 2.6rem; margin-bottom: 0.8rem; }
.tax-card h3 { color: #1e3c72; font-size: 1.3rem; margin-bottom: 0.6rem; }
.tax-card-sm h3 { font-size: 1.1rem; }
.tax-card p { color: #555; line-height: 1.65; margin-bottom: 1rem; font-size: 0.97rem; }
.tax-card-sm p { margin-bottom: 0; font-size: 0.9rem; }
.tax-link { display: inline-block; color: #1e3c72; font-weight: 700; border-bottom: 2px solid #1e3c72; padding-bottom: 2px; }

/* ═══════════ Footer rico (malla de enlaces) ═══════════ */
.site-footer { background: #1e3c72; color: #dbe4f5; text-align: left; padding: 0; }
.footer-cols {
    max-width: var(--content-w); margin: 0 auto; padding: 3rem 2rem 1.5rem;
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 2.5rem;
}
.footer-wordmark { font-size: 1.4rem; font-weight: 800; color: #fff; margin-bottom: .8rem; }
.footer-wordmark span { font-weight: 400; color: #9fb0d4; }
.footer-brand p { font-size: .9rem; line-height: 1.6; color: #b9c6e2; max-width: 320px; margin: .4rem 0; }
.footer-contact a { color: #fff; text-decoration: none; font-weight: 600; }
.footer-contact a:hover { text-decoration: underline; }
.footer-col h3, .footer-col h4 { color: #fff; font-size: .85rem; margin: 0 0 .9rem; text-transform: uppercase; letter-spacing: .05em; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: .45rem 0; }
.footer-col a { color: #c8d8ff; text-decoration: none; font-size: .9rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); text-align: center; padding: 1.2rem; font-size: .85rem; color: #9fb0d4; }

@media (max-width: 900px) {
    .tax-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
    .footer-brand { grid-column: 1 / -1; }
}
/* ═══════════ Método Soleares: notice-bar · cifras · puertas ═══════════ */
.now-bar { background: var(--brand); text-align: center; padding: .55rem 1rem; }
.now-bar a { color: #dbe4f5; text-decoration: none; font-size: .95rem; }
.now-bar a:hover { color: #fff; text-decoration: underline; }
.now-bar strong { color: #fff; }

#cifras { padding-top: 2.5rem; padding-bottom: 0; }
.stats-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.stat-link { display: block; text-decoration: none; background: white; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s; }
.stat-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.stat-link .stat-num { display: block; font-size: 2.2rem; font-weight: 800; color: var(--brand);
  line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-link .stat-label { color: #555; font-size: .93rem; line-height: 1.45; display: block; margin-top: .3rem; }
.stats-frescura { text-align: center; font-size: .8rem; color: #6e6e78; margin-top: 1rem; }

#empezar { padding-top: 2.5rem; }
.gates { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.gates-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gate { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: white;
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius);
  padding: 1.4rem 1.6rem; box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s; }
.gate:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.gate h3 { color: var(--brand); font-size: 1.08rem; margin-bottom: .45rem; }
.gate p { color: #555; font-size: .93rem; line-height: 1.5; flex: 1; }
.gate-go { margin-top: .8rem; color: var(--accent); font-weight: 700; font-size: .9rem; }

/* A11Y: enlaces del pie distinguibles sin depender del color */
.footer-bottom a { text-decoration: underline; }

/* ═══════════ Casos reales (prueba social) ═══════════ */
.caso-real { background: white; border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--radius); padding: 2rem 2.2rem; box-shadow: var(--shadow-card); }
.caso-tag { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand); background: #eef2fb; border-radius: 5px;
  padding: .25rem .7rem; margin-bottom: .8rem; }
.caso-real h2 { text-align: left; font-size: 1.35rem; margin-bottom: .4rem; }
.caso-ctx { color: #555; margin-bottom: 1.2rem; }
.caso-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; }
.caso-cols h3 { color: var(--brand); font-size: 1rem; margin-bottom: .35rem; }
.caso-cols p { color: #555; font-size: .95rem; line-height: 1.6; }
.caso-compacto h3 { color: var(--brand); font-size: 1.1rem; margin-bottom: .5rem; text-align: left; }
.caso-compacto p { color: #555; }
.caso-compacto a { color: var(--accent); font-weight: 700; }