:root {
      --bg: #ffffff;
      --text: #1a1a1a;
      --muted: #6b7280;
      --border: #e5e7eb;
      --brand: #0b74c7; /* tono moderno azul */
      --accent: #111827;
      --shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
      --radius: 16px;
      --maxw: 1200px;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

    /* Layout */
    .container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
    .section { padding: 80px 0; border-bottom: 1px solid var(--border); }

    .head_exp{
    top:0;
    background-color: #ed1c24;
    padding: 0.5em;
    position: fixed;
    display: block;
    width: 100%;
    border-bottom-color: #000;
    border-right-width: 2px;
    border-bottom-style:solid;
    z-index: 99;
    -webkit-transition: background-color 0.5s ease-out; -moz-transition: 
  background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out;
}
.head_exp:hover{
    background-color: rgb(0, 0, 0);
}

    /* Hero */
    .hero{
  position:relative; min-height:90vh; display:grid; place-items:center;
  padding:4rem 0 3rem; text-align:center;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-image: url(../img/portada.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-subtitle{color:#cfe6ff; font-weight:600; margin:.4rem 0 1.2rem}
.hero-cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

.hero{padding:3rem 0;text-align:center;background:#fafafa}
.hero h1{font-size:2.5rem}
.hero p{color:var(--muted)}
    .hero {
      padding: 100px 0 60px;
      background:
        radial-gradient(1000px 400px at 10% -10%, #f4f8ff 0%, transparent 60%),
        radial-gradient(800px 300px at 90% -20%, #f7fbff 0%, transparent 60%),
        var(--bg);
      text-align: center;
    }
    .hero h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.02em; }
    .hero .presented { color: var(--muted); font-weight: 600; }
    .hero .lead { max-width: 900px; margin: 14px auto 0; font-size: clamp(16px, 2.4vw, 20px); color: var(--accent); }

    /* Media block */
    .media {
      display: grid;
      grid-template-columns: 1.25fr 1fr;
      gap: 32px;
      align-items: center;
    }
    .media.reverse { grid-template-columns: 1fr 1.25fr; }
    .image-wrap {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      background: #f8fafc;
    }
    .image-wrap img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      aspect-ratio: 16/9;
      transform: scale(1.001);
      transition: transform 600ms ease;
    }
    .image-wrap:hover img { transform: scale(1.03); }
    .content h3 { 
        font-size: clamp(22px, 3.2vw, 28px); 
        margin: 0 0 10px; 
        letter-spacing: -0.01em; 
    font-weight: 800;
    }
    .content p { font-size: 16px; line-height: 1.6; color: var(--accent); margin: 0 0 18px; }
    .content ul { margin: 0; padding: 0; list-style: none; }
    .content li { display: block; gap: 10px; align-items: flex-start; margin: 10px 0; }
    .content li::before {
      content: "•";
      color: var(--brand);
      font-weight: 700;
      line-height: 1;
    }

    .video-wrap {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.video-wrap video {
  width: 100%;
  height: auto;
  display: block;
}

    /* Quote */
    .quote {
      padding: 24px;
      border-left: 4px solid var(--brand);
      border-radius: 12px;
      background: #f8fbff;
      color: var(--accent);
      box-shadow: var(--shadow);
      font-style: italic;
    }
    .quote .author { margin-top: 8px; font-style: normal; color: var(--muted); font-weight: 600; }

    /* Footer */
    footer {
      padding: 52px 0 80px;
      text-align: center;
      background:
        radial-gradient(900px 360px at 50% -20%, #f4f8ff 0%, transparent 60%),
        var(--bg);
    }
    .cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--brand);
      color: #fff;
      padding: 14px 24px;
      border: 0;
      border-radius: 999px;
      font-weight: 700;
      letter-spacing: 0.02em;
      box-shadow: 0 8px 24px rgba(11, 116, 199, 0.25);
      cursor: pointer;
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
      text-decoration: none;
    }
    .cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(11, 116, 199, 0.35); background: #0864a9; }

    /* Responsive */
    @media (max-width: 960px) {
      .media, .media.reverse { grid-template-columns: 1fr; }

      .hero-bg{
  position:absolute;
  inset:0;
  background-image: url(../img/portada-m.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
    }