:root{
    --black:#0a0a0a;
    --off-black:#111111;
    --white:#ffffff;
    --orange:#f5490f;
    --grey:#8a8a8a;
    --line:#e5e5e2;
    --gap-xl: clamp(2rem, 5vw, 5.5rem);
    --gap-lg: clamp(1.5rem, 3vw, 3rem);
    --pad-x: clamp(1.25rem, 4vw, 3.25rem);
    --display: 'Archivo Black', 'Oswald', sans-serif;
    --body-font: 'Inter', sans-serif;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--white);
    color:var(--black);
    font-family:var(--body-font);
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%;height:auto;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  .artboard{position:relative;}

  /* utility arrow */
  .arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .arrow svg{display:block;}

  /* ============ HEADER ============ */
  header.artboard{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: clamp(1.1rem,2vw,1.6rem) var(--pad-x);
    border-bottom:1px solid var(--line);
    position:relative;
    z-index:50;
  }
  .logo{
    display:flex;
    flex-direction:column;
    line-height:1;
  }
  .logo .mark{
    font-family: 'Archivo Black', 'Oswald', sans-serif;
    font-size:clamp(1.1rem,1.6vw,1.4rem);
    letter-spacing:0.02em;
  }
  .logo .mark sup{font-size:0.5em;}
  .logo .tag{
    font-family: 'Oswald', sans-serif;
    font-size:0.55rem;
    letter-spacing:0.18em;
    color:var(--grey);
    margin-top:2px;
    font-weight:500;
  }
  nav.main-nav{
    display:flex;
    gap:clamp(1.5rem,3vw,3rem);
  }
  nav.main-nav a{
    font-size:0.78rem;
    letter-spacing:0.12em;
    font-weight:600;
    position:relative;
    padding-bottom:4px;
  }
  nav.main-nav a::after{
    content:"";
    position:absolute;left:0;bottom:0;
    width:0;height:2px;background:var(--orange);
    transition:width .25s ease;
  }
  nav.main-nav a:hover::after{width:100%;}
  .btn-orange{
    background:var(--orange);
    color:var(--white);
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.1em;
    padding:0.85em 1.4em;
    display:inline-flex;
    align-items:center;
    gap:0.6em;
    white-space:nowrap;
    transition:transform .2s ease, background .2s ease;
  }
  .btn-orange:hover{background:var(--black);transform:translateY(-2px);}
  .btn-orange svg{width:13px;height:13px;flex:none;}

  /* ============ HERO ============ */
  section.hero{
    position:relative;
    padding: clamp(2.5rem,5vw,4rem) var(--pad-x) 0;
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items:flex-start;
    position:relative;
    min-height: clamp(420px, 62vw, 640px);
  }
  .hero-copy{position:relative;z-index:5;}
  .hero-title{
    font-family:var(--display);
    font-size: clamp(3.4rem, 8.4vw, 7.6rem);
    line-height:0.86;
    letter-spacing:-0.01em;
    text-transform:uppercase;
  }
  .hero-title span{display:block;}
  .hero-title .accent{
    color:var(--orange);
    display:flex;
    align-items:flex-end;
    gap:0.15em;
  }
  .accent-dot{
    width:0.16em;
    height:0.16em;
    background:var(--orange);
    display:inline-block;
    margin-bottom:0.06em;
    flex:none;
  }
  .hero-editorial{
    position:absolute;
    top: clamp(0.2rem, 1vw, 0.4rem);
    left: clamp(15rem, 30vw, 21rem);
    max-width:230px;
    font-size:0.72rem;
    font-weight:500;
    letter-spacing:0.03em;
    line-height:1.5;
    text-transform:uppercase;
    color:var(--black);
  }
  .hero-view-work{
    margin-top: clamp(1.5rem,3vw,2.3rem);
    display:inline-flex;
    align-items:center;
    gap:0.6em;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.14em;
  }
  .hero-view-work .arrow{
    width:26px;height:26px;
    border:1px solid var(--black);
    border-radius:50%;
  }
  .hero-view-work svg{width:11px;height:11px;}

  .hero-photo-wrap{
    position:relative;
    height: clamp(420px, 60vw, 640px);
    justify-self:end;
    width: 100%;
    max-width:480px;
  }
  .hero-photo-wrap img{
    position:absolute;
    right:0;
    bottom:-2px;
    height:112%;
    width:auto;
    max-width:none;
    object-fit:cover;
    -webkit-mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
  }

  /* ============ SERVICES (black bar) ============ */
  section.services{
    background:var(--black);
    color:var(--white);
    display:grid;
    grid-template-columns: 3.2rem repeat(4, 1fr);
    border-top:1px solid #1b1b1b;
  }
  .wwd-label{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding: 1.6rem 0;
    border-right:1px solid #262626;
  }
  .wwd-label span{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:0.7rem;
    font-weight:600;
    letter-spacing:0.22em;
    color:var(--grey);
  }
  .service-col{
    padding: clamp(1.6rem,2.6vw,2.4rem) clamp(1.2rem,2vw,1.9rem);
    border-right:1px solid #262626;
    position:relative;
  }
  .service-col:last-child{border-right:none;}
  .service-num{
    color:var(--orange);
    font-family:var(--display);
    font-size:0.95rem;
    margin-bottom:0.9rem;
  }
  .service-title{
    font-family:var(--display);
    font-size:clamp(0.95rem,1.3vw,1.15rem);
    line-height:1.15;
    text-transform:uppercase;
    margin-bottom:1rem;
  }
  .service-desc{
    font-size:0.72rem;
    line-height:1.55;
    color:#b7b7b7;
    max-width:180px;
    margin-bottom:1.4rem;
  }
  .service-col .arrow{
    width:24px;height:24px;
    border:1px solid #3a3a3a;
    border-radius:50%;
  }
  .service-col .arrow svg{width:10px;height:10px;stroke:var(--white);}

  /* ============ STOP USING BLOCK ============ */
  section.stop-block{
    background:var(--black);
    color:var(--white);
    padding: clamp(3rem,7vw,5.5rem) var(--pad-x);
    display:grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--gap-lg);
    align-items:center;
    border-top:1px solid #1b1b1b;
  }
  .stop-title{
    font-family:var(--display);
    font-size:clamp(2.6rem,6.4vw,5.6rem);
    line-height:0.9;
    text-transform:uppercase;
    letter-spacing:-0.01em;
  }
  .stop-side p{
    font-size:0.9rem;
    font-weight:600;
    letter-spacing:0.03em;
    line-height:1.6;
    text-transform:uppercase;
    margin-bottom:1.6rem;
  }

  /* ============ PROJECTS GRID ============ */
  section.projects{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background:var(--line);
    padding:0;
  }
  .project-card{background:var(--white);}
  .project-media{
    position:relative;
    aspect-ratio: 4 / 3;
    overflow:hidden;
    background:#dcdcdc;
  }
  .project-media img{
    width:100%;height:100%;object-fit:cover;
    filter:grayscale(0.05) contrast(1.03);
  }
  .project-nav{
    position:absolute;
    bottom:0.7rem;
    left:0.7rem;
    right:0.7rem;
    display:flex;
    justify-content:space-between;
    pointer-events:none;
  }
  .project-nav .arrow{
    width:26px;height:26px;
    background:rgba(255,255,255,0.92);
    border-radius:50%;
  }
  .project-nav .arrow svg{width:10px;height:10px;}
  .project-caption{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding: 0.75rem clamp(1rem,2vw,1.4rem);
  }
  .project-caption .name{
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:0.02em;
    line-height:0.9;
  }
  .project-caption .credit{
    font-size:0.68rem;
    color:var(--grey);
    letter-spacing:0.06em;
    text-transform:uppercase;
  }

  /* ============ SOCIAL / FAQ BLOCK ============ */
  section.social-faq{
    background:var(--black);
    color:var(--white);
    padding: clamp(2.6rem,6vw,4.5rem) var(--pad-x) clamp(2rem,4vw,3rem);
    position:relative;
  }
  .sf-top{
    display:grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--gap-lg);
    align-items:flex-start;
    position:relative;
  }
  .sf-left .sf-title{
    font-family:var(--display);
    font-size:clamp(1.6rem,3.2vw,2.3rem);
    line-height:1.05;
    text-transform:uppercase;
    margin-bottom:1.4rem;
  }
  .social-icons{display:flex;gap:0.6rem;}
  .social-icons a{
    width:34px;height:34px;
    background:var(--orange);
    display:flex;align-items:center;justify-content:center;
    transition:background .2s ease;
  }
  .social-icons a:hover{background:var(--white);}
  .social-icons a:hover svg{stroke:var(--black);fill:var(--black);}
  .social-icons svg{width:15px;height:15px;stroke:var(--white);fill:var(--white);}

  .sf-right{position:relative;text-align:left;}
  .faq-tag{
    position:absolute;
    top:-2.2rem;right:0;
    font-size:0.65rem;
    letter-spacing:0.22em;
    color:var(--grey);
    font-weight:600;
  }
  .sf-right .sf-title{
    font-family:var(--display);
    color:var(--orange);
    font-size:clamp(2.2rem,5.6vw,4.2rem);
    line-height:0.95;
    text-transform:uppercase;
  }

/* banner bottom */
.bannerbottom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: clamp(2rem,4vw,3rem);
  padding: clamp(1.5rem,3vw,2.2rem) 0;
  text-align: center;
}
.bannerbottom .adsbygoogle{
  margin: 0 auto;
}

  /* editorial image inside block */
  .editorial-image{
    margin-top: clamp(2.2rem,4.5vw,3.5rem);
    position:relative;
    width:100%;
    aspect-ratio: 16/6.2;
    overflow:hidden;
    background:#0e1b2b;
  }
  .editorial-image img{
    width:100%;height:100%;object-fit:cover;
    opacity:0.85;
    mix-blend-mode:luminosity;
    filter:saturate(1.2) brightness(0.85);
  }
  .editorial-overlay{
    position:absolute;inset:0;
    display:flex;
    align-items:center;
    padding: 0 clamp(1rem,3vw,2.5rem);
    background:linear-gradient(90deg, rgba(10,20,40,0.55), rgba(10,20,40,0.15));
  }
  .editorial-overlay .ov-title{
    font-family:var(--display);
    color:#0d1f3d;
    -webkit-text-stroke: 1px rgba(255,255,255,0.5);
    font-size:clamp(2rem,7vw,4.6rem);
    line-height:0.88;
    text-transform:uppercase;
    letter-spacing:-0.01em;
  }
  .editorial-note{
    position:absolute;
    top:0.9rem;right:1rem;
    font-size:0.6rem;
    line-height:1.4;
    text-align:right;
    color:rgba(255,255,255,0.85);
    max-width:150px;
    font-weight:500;
    letter-spacing:0.02em;
  }

  /* final info */
  .final-info{
    margin-top: clamp(1.6rem,3vw,2.2rem);
    display:flex;
    justify-content:flex-end;
  }
  .final-info-inner{
    text-align:right;
    max-width:280px;
  }
  .final-info .details-tag{
    font-size:0.6rem;
    letter-spacing:0.22em;
    color:var(--grey);
    font-weight:600;
    margin-bottom:0.4rem;
  }
  .final-info .final-title{
    font-family:var(--display);
    font-size:clamp(0.95rem,1.6vw,1.25rem);
    text-transform:uppercase;
    margin-bottom:0.5rem;
    letter-spacing:0.01em;
  }
  .final-info p.desc{
    font-size:0.72rem;
    line-height:1.6;
    color:#a9a9a9;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 900px){
    nav.main-nav{display:none;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-editorial{
      position:static;
      max-width:none;
      margin-top:1rem;
    }
    .hero-photo-wrap{
      justify-self:stretch;
      max-width:none;
      height:60vw;
      margin-top:2rem;
    }
    .hero-photo-wrap img{
      position:static;
      width:100%;height:100%;
      -webkit-mask-image:none;mask-image:none;
    }
    section.services{grid-template-columns: 2.4rem repeat(2, 1fr);}
    .wwd-label{grid-row: span 2;}
    .service-col:nth-of-type(2n){border-right:none;}
    .service-col{border-bottom:1px solid #262626;}
    section.stop-block{grid-template-columns:1fr;}
    section.projects{grid-template-columns:repeat(2,1fr);}
    .sf-top{grid-template-columns:1fr;gap:2.2rem;}
    .faq-tag{position:static;display:block;margin-bottom:0.6rem;}
    .final-info{justify-content:flex-start;}
    .final-info-inner{text-align:left;}
  }
  @media (max-width: 560px){
    section.projects{grid-template-columns:1fr;}
    .hero-title{font-size:14vw;}
  }
  
  /* ===================== FLAGFOOTBALL SECTION ===================== */
  .flagfootball{
    background:#fff;
    padding:48px 40px 40px;
  }
  .flagfootball-head{
    display:flex;
    justify-content:space-between;
    gap:40px;
    flex-wrap:wrap;
    margin-bottom:28px;
  }
  .flagfootball-head h2{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(1.8rem,3.4vw,2.5rem);
    line-height:1.05;
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin:0;
    max-width:420px;
  }
    .flagfootball-copy{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:32px;
    max-width:900px;
  }
  .flagfootball-copy p{
    font-size:0.82rem;
    line-height:1.5;
    color:var(--text-muted);
    margin:0;
    max-width:none;
  }
  .btn-book{
    display:inline-flex;
    align-items:center;
    gap:14px;
    background:#161616;
    color:#fff;
    border:none;
    padding:11px 8px 11px 18px;
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.8rem;
    cursor:pointer;
    border-radius:2px;
  }
  .btn-book .icon{
    background:var(--lime);
    color:#16210a;
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.85rem;
    border-radius:2px;
  }

  .flagfootball-gallery{
    display:grid;
    grid-template-columns:1fr 1.5fr 1fr;
    gap:14px;
    align-items:stretch;
  }
  .flagfootball-gallery figure{margin:0; overflow:hidden; position:relative; background:#ffffff;}
  .flagfootball-gallery img{width:100%; height:100%; object-fit:cover; min-height:260px;}
  .flagfootball-gallery .video-fig{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .flagfootball-gallery .video-fig iframe{
    width:100%;
    height:100%;
    aspect-ratio:16/9;
    min-height:260px;
    border:0;
    display:block;
  }

  @media (max-width: 900px){
    .flagfootball{padding:36px 20px 32px;}
    .flagfootball-copy{
      grid-template-columns:1fr;
      gap:18px;
      max-width:none;
    }
    .flagfootball-gallery{
      grid-template-columns:1fr;
      grid-auto-flow:row;
      align-items:stretch;
    }
    .flagfootball-gallery .ad-fig{order:1;}
    .flagfootball-gallery .video-fig{order:2;}
    .flagfootball-gallery .ad-fig:last-of-type{order:3;}
    .flagfootball-gallery img{width:100%; height:auto; min-height:0; aspect-ratio:16/9;}
    .flagfootball-gallery .video-fig iframe{
      width:100%;
      height:auto;
      min-height:0;
      aspect-ratio:16/9;
    }
  }

  .carousel{position:relative;}
  .carousel .arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:34px;height:34px;
    border-radius:50%;
    background:rgba(20,20,20,0.55);
    color:#fff;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:1rem;
  }
  .carousel .arrow.left{left:14px;}
  .carousel .arrow.right{right:14px;}
  .carousel figcaption{
    position:absolute;
    left:0; right:0; bottom:0;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    padding:14px 16px;
    color:#fff;
    background:linear-gradient(0deg, rgba(0,0,0,0.45), transparent 70%);
    font-size:0.85rem;
  }
  .carousel figcaption .title{font-weight:700;}
  .carousel figcaption .credit{font-size:0.68rem; opacity:0.85;}

  /* ===================== TEXTO SIMULADO ===================== */
  .lorem{
    background:var(--gray);
    padding:10px 40px 60px;
    color:#2c2c2a;
    font-size:14px;
    line-height:1.45;
    text-align:center;
  }
  .lorem-inner{
    max-width:70%;
    margin:0 auto;
  }
  .lorem p{margin:0 0 22px;}
  .lorem p.short{margin-bottom:22px;}
  .lorem p.block{margin-bottom:0;}

  /* ===================== LINKS EN TEXTO ===================== */
  .lorem-inner a,
  .final-info p.desc a{
    color:var(--orange);
    font-weight:600;
    padding:0 3px;
    border-radius:2px;
    transition:background .2s ease, color .2s ease;
  }
  .lorem-inner a:hover,
  .final-info p.desc a:hover{
    background:var(--orange);
    color:var(--white);
  }