:root {
      --cdnb-blue:#2E2AA5; /* Ajusta si quieres tu azul exacto */
      --siello-celeste:#16B6B6; /* Ajusta si quieres tu celeste exacto */
      --dark:#06111F;
      --mid:#0B2340;
      --light:#F4F7FF;
      --card:#ffffffd9;
      --text:#0A0E18;
    }
    * { box-sizing:border-box; }
    body {
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color: var(--text);
      background: linear-gradient(180deg, var(--light), #EAF5F5);
    }
    a { color: inherit; }
    .container { width:min(1080px, calc(100% - 48px)); margin-inline:auto; }
    .nav {
      position:sticky; top:0; z-index:50;
      background: color-mix(in srgb, var(--light), white 12%);
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(0,0,0,.06);
    }
    .navInner {
      display:flex; align-items:center; justify-content:space-between;
      gap:16px; padding:12px 0;
    }
    .brand {
      display:flex; align-items:center; gap:12px; min-width:240px;
    }
    .badge {
      display:flex; align-items:center; gap:10px;
      padding:8px 10px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(46,42,165,.95), rgba(22,182,182,.95));
      border:1px solid rgba(255,255,255,.55);
      box-shadow: 0 10px 22px rgba(0,0,0,.12);
      color: white;
    }
    .escudoMini {
      width:32px; height:32px; border-radius:9px;
      background: rgba(255,255,255,.12);
      display:grid; place-items:center;
      overflow:hidden; border:1px solid rgba(255,255,255,.45);
    }
    .escudoMini img { width:100%; height:100%; object-fit:contain; }
    .brandTitle { font-weight:700; letter-spacing:.2px; }
    .brandSub { font-size:12px; opacity:.9; }
    nav ul { display:flex; align-items:center; gap:16px; list-style:none; padding:0; margin:0; }
    .ghostBtn {
      border-radius:999px;
      border:1px solid rgba(10,14,24,.14);
      padding:10px 14px;
      background: rgba(255,255,255,.8);
      font-weight:600;
      text-decoration:none;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
    }
    .ghostBtn:hover { transform: translateY(-1px); background:#fff; border-color: rgba(10,14,24,.3); }
    .cta {
      border-radius:999px;
      padding:12px 16px;
      background: linear-gradient(90deg, var(--cdnb-blue), var(--siello-celeste));
      border:none;
      color:white;
      font-weight:800;
      letter-spacing:.3px;
      box-shadow: 0 14px 26px rgba(46,42,165,.20);
      text-decoration:none;
      transition: transform .15s ease, filter .15s ease;
      white-space:nowrap;
    }
    .cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
    /* HERO */
    .hero {
      position:relative; padding: clamp(28px, 6vw, 70px) 0 52px;
      overflow:hidden;
    }
    .heroBg {
      position:absolute; inset:0;
      background:
        radial-gradient(1200px 560px at 20% 0%, color-mix(in srgb, var(--cdnb-blue), white 20%), transparent 62%),
        radial-gradient(1100px 600px at 80% 0%, color-mix(in srgb, var(--siello-celeste), white 20%), transparent 60%),
        linear-gradient(180deg, #EAF0FF, #F0FBFB);
      opacity:.92;
      pointer-events:none;
    }
    .hero::before {
      content:"";
      position:absolute; inset:-2px;
      background:
        linear-gradient(90deg,
          rgba(46,42,165,.1),
          rgba(46,42,165,.28),
          rgba(22,182,182,.26),
          rgba(22,182,182,.08)
        );
      mask: linear-gradient(#000, transparent);
      opacity:.85;
      pointer-events:none;
    }
    .heroGrid {
      position:relative;
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap:24px;
      align-items:center;
    }
    @media (max-width: 900px) {
      .heroGrid { grid-template-columns:1fr; gap:18px; }
      .brand { min-width: auto; }
      nav ul { display:none; }
    }
    .kicker {
      display:inline-flex; gap:10px; align-items:center;
      padding:8px 12px;
      background: rgba(255,255,255,.75);
      border:1px solid rgba(0,0,0,.07);
      border-radius:999px;
      color: rgba(10,14,24,.75);
      font-weight:600;
      box-shadow: 0 12px 30px rgba(0,0,0,.06);
    }
    .dot {
      width:10px; height:10px; border-radius:999px;
      background: radial-gradient(circle at 35% 35%, #fff, #fff0 62%),
        linear-gradient(90deg, var(--cdnb-blue), var(--siello-celeste));
      box-shadow: 0 8px 18px rgba(46,42,165,.18);
    }
    h1 {
      margin:14px 0 10px;
      /* Reduce the maximum headline size a little so the text
         “CD Nuevo Boadilla + Siello FC” fits on one line on
         desktop.  The clamp still scales smoothly between mobile
         and large screens. */
      /* The hero headline scales to stay on one line on desktop.  The
         2.8vw factor keeps the text large enough on medium screens
         while the 40px cap prevents line breaks on wide monitors. */
      font-size: clamp(28px, 2.8vw, 40px);
      line-height: 1.06;
      letter-spacing:-.5px;
      color: #071028;
    }
    .subhero {
      margin:0 0 18px;
      font-size: clamp(16px, 2.2vw, 20px);
      line-height: 1.45;
      color: rgba(7,16,40,.85);
      max-width: 42ch;
    }
    .ctaRow {
      display:flex; flex-wrap:wrap; gap:12px;
      align-items:center;
    }
    .heroCard {
      position:relative;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
      border:1px solid rgba(0,0,0,.08);
      box-shadow: 0 18px 50px rgba(0,0,0,.10);
      padding:16px;
      overflow:hidden;
      min-height: 270px;
    }
    .diagonal {
      position:absolute; inset:-40px -60px auto -60px;
      height: 220px;
      background: linear-gradient(90deg, rgba(46,42,165,.9), rgba(22,182,182,.9));
      transform: rotate(-12deg);
      opacity:.98;
      filter: blur(.1px);
    }
    .escudosWrap {
      position:absolute; bottom: 16px; left: 16px; right: 16px;
      display:flex; align-items:flex-end; justify-content:space-between;
      gap: 12px;
    }
    .escudoBig {
      width: 88px; height: 88px;
      border-radius: 20px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.46);
      display:grid; place-items:center;
      overflow:hidden;
      backdrop-filter: blur(8px);
    }
    .escudoBig img { width:100%; height:100%; object-fit:contain; }
    .escudoLabel {
      margin-top:10px;
      font-weight: 750;
      letter-spacing:.25px;
      color: white;
      text-shadow: 0 12px 25px rgba(0,0,0,.20);
    }
    /* Sections */
    section { padding: 48px 0; }
    .sectionTitle { font-size: 28px; margin:0 0 10px; letter-spacing:-.2px; }
    .sectionLead { margin:0 0 22px; color: rgba(10,14,24,.78); line-height:1.6; max-width: 68ch; }
    .featureGrid {
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    @media (max-width: 900px) {
      .featureGrid { grid-template-columns:1fr; }
    }
    .feature {
      padding: 16px;
      border-radius: 16px;
      background: rgba(255,255,255,.85);
      border:1px solid rgba(0,0,0,.08);
      box-shadow: 0 14px 40px rgba(0,0,0,.06);
    }
    .feature h3 { margin: 0 0 6px; font-size: 18px; }
    .feature p { margin:0; color: rgba(10,14,24,.7); line-height:1.55; }
    .divider {
      height: 1px; width: 100%;
      background: linear-gradient(90deg, rgba(10,14,24,0), rgba(10,14,24,.18), rgba(10,14,24,0));
      margin: 36px 0;
    }
    .benefitsWrap {
      display:grid;
      grid-template-columns: 1.1fr 1.35fr;
      gap: 18px;
      align-items: stretch;
    }
    @media (max-width: 900px) {
      .benefitsWrap { grid-template-columns: 1fr; }
    }
    .benefitHero {
      position: relative;
      overflow: hidden;
      border-radius: 22px;
      padding: 24px;
      background: linear-gradient(135deg, rgba(33,28,180,.96), rgba(39,188,219,.92));
      color: white;
      box-shadow: 0 20px 48px rgba(33,28,180,.18);
    }
    .benefitHero::before {
      content: "";
      position: absolute;
      inset: auto -60px -80px auto;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: rgba(255,255,255,.14);
      filter: blur(4px);
    }
    .benefitHero::after {
      content: "";
      position: absolute;
      top: -40px;
      right: -20px;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: rgba(255,255,255,.08);
    }
    .benefitEyebrow {
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background: rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.2);
      font-weight:800;
      font-size:12px;
      letter-spacing:.04em;
      text-transform:uppercase;
      margin-bottom:14px;
    }
    .benefitHero h3 {
      margin:0 0 10px;
      font-size: 30px;
      line-height:1.05;
    }
    .benefitHero p {
      margin:0;
      line-height:1.65;
      color: rgba(255,255,255,.92);
      max-width: 34ch;
    }
    .benefitBadge {
      margin-top: 20px;
      display:inline-flex;
      padding: 11px 14px;
      border-radius: 14px;
      background: rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.2);
      font-weight: 800;
    }
    .benefits {
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
    @media (max-width: 640px) {
      .benefits { grid-template-columns: 1fr; }
    }
    .benefit {
      position: relative;
      border-radius: 18px;
      padding: 18px 16px 16px 52px;
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.62));
      border:1px solid rgba(0,0,0,.08);
      box-shadow: 0 14px 38px rgba(0,0,0,.06);
      min-height: 122px;
    }
    .benefit::before {
      content: "✓";
      position: absolute;
      left: 16px;
      top: 18px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 13px;
      font-weight: 900;
      color: white;
      background: linear-gradient(135deg, var(--cdnb-blue), var(--siello-celeste));
      box-shadow: 0 10px 24px rgba(33,28,180,.18);
    }
    .benefit .number {
      font-weight: 900;
      font-size: 13px;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 10px;
      background: linear-gradient(90deg, var(--cdnb-blue), var(--siello-celeste));
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
    }
    .benefit p {
      margin: 0;
      line-height: 1.55;
      color: rgba(10,14,24,.78);
    }
    .benefitLimit {
      grid-column: 1 / -1;
      border-radius: 18px;
      padding: 16px 18px;
      background: linear-gradient(90deg, rgba(33,28,180,.08), rgba(39,188,219,.12));
      border: 1px solid rgba(33,28,180,.1);
      box-shadow: 0 14px 30px rgba(0,0,0,.04);
    }
    .benefitLimit strong {
      display:block;
      margin-bottom:6px;
      font-size: 17px;
      color: var(--cdnb-blue);
    }
    .benefitLimit p {
      margin:0;
      color: rgba(10,14,24,.76);
      line-height: 1.55;
    }
    .partners {
      border-radius: 22px;
      padding: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.62));
      border:1px solid rgba(0,0,0,.08);
      box-shadow: 0 18px 45px rgba(0,0,0,.08);
    }
    .logoWall {
      display:grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
      margin-top: 14px;
    }
    @media (max-width: 900px) {
      .logoWall { grid-template-columns: repeat(2, 1fr); }
    }
    .logoCell {
      border-radius: 14px;
      height: 60px;
      background: rgba(255,255,255,.85);
      border:1px dashed rgba(0,0,0,.22);
      display:grid; place-items:center;
      color: rgba(10,14,24,.55);
      font-weight: 700;
    }

    .partnersIntro {
      display:grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 18px;
      align-items: stretch;
      margin-bottom: 18px;
    }
    @media (max-width: 900px) {
      .partnersIntro { grid-template-columns:1fr; }
    }
    .partnersLeadCard,
    .partnersBenefitsCard,
    .sponsorCard,
    .partnerCard,
    .joinPartnerCard {
      border-radius: 18px;
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 14px 34px rgba(0,0,0,.06);
    }
    .partnersLeadCard {
      padding: 22px;
      background: linear-gradient(135deg, rgba(46,42,165,.96), rgba(22,182,182,.92));
      color: white;
      overflow:hidden;
      position: relative;
    }
    .partnersLeadCard::after{
      content:"";
      position:absolute;
      right:-40px;
      bottom:-50px;
      width:160px;
      height:160px;
      border-radius:50%;
      background: rgba(255,255,255,.12);
    }
    .partnersLeadCard h3,
    .partnersBenefitsCard h3,
    .sponsorBlock h3,
    .partnerBlock h3,
    .joinPartnerCard h3 {
      margin:0 0 10px;
      font-size: 22px;
      letter-spacing:-.2px;
    }
    .partnersLeadCard p,
    .partnersBenefitsCard p,
    .sponsorMeta p,
    .partnerMeta p,
    .joinPartnerCard p {
      margin:0;
      line-height:1.58;
    }
    .partnersBenefitsCard{
      padding: 22px;
      /* Convert benefits card into a vertical flex container so it stretches
         to match the height of the video card.  This allows the list of
         beneficios to expand and occupy the available vertical space
         instead of leaving an awkward empty area at the bottom. */
      display: flex;
      flex-direction: column;
    }
    .partnersBenefitsList {
      /* Let the list grow to fill the card’s height.  Using a grid with
         equal-height rows keeps all items aligned and distributes space
         evenly. */
      flex-grow: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      grid-auto-rows: 1fr;
      margin-top: 14px;
    }
    @media (max-width: 680px){
      .partnersBenefitsList { grid-template-columns: 1fr; }
    }
    .partnersBenefitsItem{
      border-radius: 14px;
      padding: 12px 14px;
      background: linear-gradient(90deg, rgba(46,42,165,.06), rgba(22,182,182,.08));
      border:1px solid rgba(46,42,165,.08);
      font-weight: 650;
      color: rgba(10,14,24,.82);
      /* Flex layout so the text stays vertically centred within the equal-height grid cells */
      display: flex;
      align-items: center;
    }
    .sponsorBlock,
    .partnerBlock {
      margin-top: 22px;
    }
    .sponsorGrid {
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
    }
    .partnersGrid {
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 14px;
    }
    @media (max-width: 1100px){
      .partnersGrid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 900px){
      .partnersGrid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px){
      .partnersGrid { grid-template-columns: 1fr; }
    }
    .sponsorCard,
    .partnerCard {
      padding: 18px;
      display:flex;
      flex-direction: column;
      gap: 16px;
      min-height: 240px;
      justify-content:flex-start;
    }
    .logoFrame {
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.96));
      border:1px solid rgba(10,14,24,.08);
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 18px;
      overflow:hidden;
      position:relative;
      isolation:isolate;
    }
    .logoFrame::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
      pointer-events:none;
    }
    .sponsorCard .logoFrame,
    .partnerCard .logoFrame {
      min-height: 116px;
      padding: 18px 20px;
    }
    .logoFrame img{
      display:block;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      object-position:center;
      flex: 0 1 auto;
    }

/*
 * Video inserted into the partners lead card.  The video inherits
 * the card’s rounded corners, scales responsively and remains
 * centred without distortion.  A top margin separates it from the
 * text above.  We use object-fit: cover to fill the available
 * width while preserving the aspect ratio.  If the video’s
 * intrinsic aspect ratio differs markedly from the container,
 * cover will crop rather than squish the image, keeping the
 * presentation clean.  On small screens the video naturally
 * scales down with the card.
 */
.partnersLeadCard .partnersVideo {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 14px;
  border-radius: 14px;
  object-fit: cover;
  /* Ensure the video doesn’t bleed outside the card */
  overflow: hidden;
}
    .sponsorCard .logoFrame img,
    .partnerCard .logoFrame img {
      max-width: min(100%, 240px);
      max-height: 72px;
    }
    .sponsorGrid .companyName,
    .partnersGrid .companyName {
      font-size: 18px;
    }
    .sponsorMeta,
    .partnerMeta {
      display:flex;
      flex-direction:column;
      gap: 8px;
    }
    .typePill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      width: fit-content;
      padding: 7px 10px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(46,42,165,.1), rgba(22,182,182,.12));
      border:1px solid rgba(46,42,165,.12);
      color: var(--cdnb-blue);
      font-weight: 800;
      font-size: 12px;
      letter-spacing: .3px;
      text-transform: uppercase;
    }
    .companyName {
      font-size: 19px;
      line-height:1.15;
      font-weight: 800;
      color: #071028;
      letter-spacing: -.2px;
    }
    .subtleNote {
      font-size: 14px;
      color: rgba(10,14,24,.62);
      font-weight: 600;
      text-align:center;
    }
    .joinPartnerCard{
      margin-top: 18px;
      padding: 22px;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 18px;
      align-items:center;
      background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
    }
    @media (max-width: 900px){
      .joinPartnerCard { grid-template-columns:1fr; }
    }
    .contactBox{
      border-radius: 16px;
      padding: 16px;
      background: linear-gradient(90deg, rgba(46,42,165,.95), rgba(22,182,182,.95));
      color:white;
      box-shadow: 0 16px 34px rgba(46,42,165,.16);
    }
    .contactMail{
      display:block;
      margin-top: 8px;
      font-size: 18px;
      font-weight: 800;
      text-decoration:none;
      word-break: break-word;
      color:white;
    }

    .ctaBlock {
      border-radius: 22px;
      padding: 26px 18px;
      background: linear-gradient(90deg, rgba(46,42,165,.95), rgba(22,182,182,.95));
      color: white;
      text-align:center;
      box-shadow: 0 22px 60px rgba(46,42,165,.20);
    }
    .ctaBlock h2 { margin:0 0 10px; font-size: 28px; }
    .ctaBlock p { margin:0 0 16px; opacity:.9; }
    footer {
      padding: 34px 0;
      background: rgba(10,14,24,.92);
      color: rgba(255,255,255,.78);
    }
    .footerGrid {
      display:grid;
      grid-template-columns: 1.1fr .9fr .6fr;
      gap: 16px;
      align-items:start;
    }
    @media (max-width: 900px) {
      .footerGrid { grid-template-columns:1fr; }
    }
    .footerTitle { font-weight: 800; margin-bottom: 10px; color:white; }
    .footerLinks { display:flex; flex-direction:column; gap:8px; }
    .footerLink { text-decoration:none; color: rgba(255,255,255,.7); font-weight: 650; }
    .footerLink:hover { color:white; }
    .badgeFooter {
      display:flex; gap:12px; align-items:center; flex-wrap:wrap;
    }
    .miniCard {
      display:flex; align-items:center; gap:10px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(8px);
    }
    @media (max-width: 560px){
      .sponsorCard, .partnerCard { min-height: auto; }
      .sponsorCard .logoFrame,
      .partnerCard .logoFrame { min-height: 104px; }
    }