/* ═══════════════════════════════════════════════════════════════
   SALIMOS — Nations Championship 2026
   ═══════════════════════════════════════════════════════════════ */

@layer reset, base, layout, components;

:root {
  --c-teal-dark:  #00394C;
  --c-teal:       #006B69;
  --c-beige:      #DDD5CE;
  --c-beige-light:#E7E4DF;
  --c-white:      #FFFFFF;
  --c-text:       #1a1a1a;
  --c-text-muted: #555;

  --font-title: 'Tenor Sans', Georgia, serif;
  --font-body:  'Montserrat', system-ui, sans-serif;

  --max-w: 1300px;
  --transition: 200ms ease;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
  body { overflow-x: hidden; }
  img, svg { display: block; max-width: 100%; }
  input, button, textarea { font: inherit; }
  ul { list-style: none; }
  a { text-decoration: none; color: inherit; }
}

@layer base {
  body {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--c-text);
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { font-family: var(--font-title); font-weight: 400; line-height: 1.15; }
  strong { font-weight: 700; }
  ::selection { background: var(--c-teal); color: var(--c-white); }
  :focus-visible { outline: 2px solid var(--c-teal); outline-offset: 3px; }
}

@layer layout {
  .container {
    width: min(var(--max-w), 100% - 8rem);
    margin-inline: auto;
  }
}

@layer components {

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    :root {
      --max-w: 100%;
    }
    .container {
      width: 100% !important;
      padding-inline: 1.5rem !important;
      margin-inline: 0;
    }
    .hero__form-panel {
      display: none;
    }
    .que-es {
      padding: 50px 0 1rem !important;
    }
    .que-es__box {
      padding: 1.5rem !important;
      margin: 0 !important;
      max-width: 100%;
    }
    .fecha-bar {
      padding: 1.5rem;
      font-size: 16px;
      margin: 0;
    }
    .ciudades {
      padding: 0 !important;
    }
    .ciudades .container {
      width: 100% !important;
      padding-inline: 1.5rem !important;
    }
    .ciudad-row {
      height: auto;
      grid-template-columns: 1fr;
      margin-top: 1rem;
      margin-left: 0;
      margin-right: 0;
      border-radius: 0;
    }
    .ciudad-row--reverse {
      direction: ltr;
    }
    .ciudad-info {
      padding: 1rem !important;
      border-right: none !important;
      border-bottom: none !important;
    }
    .ciudad-img {
      height: 180px;
      order: -1;
    }
    .ciudad-nombre {
      font-size: 32px;
    }
    .ciudad-meta {
      font-size: 16px;
    }
    .ciudad-detail {
      font-size: 16px;
      padding: 1rem !important;
      margin: 0;
    }
    .equipos-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem 0.75rem;
      margin-top: 1.5rem;
      padding: 0 1.5rem;
    }
    .equipo img {
      width: 60px;
      height: 60px;
    }
    .formulario {
      padding: 2rem 0 0 !important;
    }
    .formulario__title {
      font-size: 18px;
      padding: 0 1.5rem;
    }
    .formulario__sub {
      font-size: 16px;
      padding: 1rem 1.5rem;
      text-align: center;
    }
    .formulario__card {
      width: 100% !important;
      padding: 1.5rem !important;
      margin: 0 !important;
      border-radius: 0;
      max-width: 100%;
    }
    .lead-form {
      width: 100%;
    }
    .field input,
    .field textarea {
      font-size: 16px;
    }
    .paquete {
      padding: 2rem 0 !important;
    }
    .paquete__title {
      font-size: 20px;
      padding: 0 1.5rem;
    }
    .paquete__card {
      max-width: 100% !important;
      min-height: auto;
      padding: 1.5rem !important;
    }
    .paquete__item {
      font-size: 16px;
      gap: 0.75rem;
      align-items: center;
    }
    .paquete__icon {
      width: 64px;
      height: 64px;
      flex-shrink: 0;
      object-fit: contain;
    }
    .paquete__grid {
      grid-template-columns: 1fr;
    }
    .paquete__item--full {
      grid-column: 1;
    }
    .paquete__precio {
      font-size: 18px;
      padding: 1rem 1.5rem;
    }
    .btn {
      font-size: 16px;
      padding: 0.7em 1.5rem;
    }
    .btn--teal {
      width: 100%;
      height: auto;
    }
    .btn--submit {
      width: 100%;
    }
    .footer {
      padding: 80px 1.5rem 2rem;
    }
  }

  /* ── HERO FORM ── */
  .lead-form--hero {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 0;
  }
  .hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1300px;
    margin-inline: auto;
    padding: 2rem 2rem 2.5rem 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 516px);
    gap: 2rem;
    align-items: center;
  }
  .btn--hero-submit {
    min-height: 54px;
    width: 100%;
    padding-inline: 1rem;
    white-space: nowrap;
  }
  .hero__content {
    padding: 0;
    max-width: 720px;
    width: 100%;
  }
  .hero__form-panel {
    justify-self: end;
    width: min(100%, 516px);
  }
  .formulario__card--hero {
    width: 100%;
    margin: 0;
  }

  /* ── NAV ── */
  .nav {
    position: absolute;
    top: 0; right: 0; left: 0;
    z-index: 10;
    padding: 100px 115px 0 0;
    display: flex;
    justify-content: flex-end;
  }
  .nav__logo-img { height: 72px; width: auto; }

  /* ── HERO ── */
  .hero {
    position: relative;
    height: clamp(300px, 47.6vw, 686px);
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .hero__bg {
    position: absolute;
    inset: 0;
    display: block;
  }
  .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }
  .hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.55) 60%,
      rgba(0,0,0,.65) 100%
    );
  }
  .hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .hero__title {
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 3.8vw, 2.8rem);
    color: var(--c-white);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.15;
  }
  .hero__sub {
    font-family: var(--font-body);
    font-size: clamp(0.6rem, 1.2vw, 0.75rem);
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-beige);
  }

  /* ── ¿QUÉ ES? ── */
  .que-es {
    background: var(--c-white);
    padding: 100px 0 0.75rem;
  }
  .que-es__box {
    background: var(--c-teal);
    border-radius: 4px;
    padding: 3rem 2.5rem;
    color: var(--c-white);
    text-align: center;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .que-es__title {
    font-family: var(--font-title);
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-white);
    margin-bottom: 1.5rem;
  }
  .que-es__body {
    font-size: 21px;
    line-height: 1.6;
    color: rgba(255,255,255,.9);
    margin-bottom: 1.75rem;
    max-width: 900px;
    margin-inline: auto;
    text-align: left;
  }
  .que-es__stats {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    font-weight: 700;
    color: var(--c-white);
    text-align: center;
  }

  /* ── FECHA BAR ── */
  .fecha-bar {
    background: var(--c-white);
    padding: 1.25rem 1rem;
    text-align: center;
    font-family: var(--font-title);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--c-teal-dark);
    text-transform: uppercase;
  }

  /* ── CIUDADES ── */
  .ciudades {
    background: var(--c-white);
    padding: 0 0 5rem;
  }
  .ciudades .container {
    width: min(900px, 100% - 14rem);
  }

  .ciudad-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 4px;
    overflow: hidden;
    background: var(--c-beige-light);
    margin-top: 1rem;
    height: 387px;
  }
  .ciudad-row--reverse {
    direction: rtl;
  }
  .ciudad-row--reverse > * {
    direction: ltr;
  }

  .ciudad-info {
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--c-beige-light);
    gap: 0.75rem;
    border-right: 11px solid #003A4D;
  }
  .ciudad-nombre {
    font-family: var(--font-title);
    font-size: 70px;
    color: #003A4D;
    line-height: 1;
  }
  .ciudad-meta {
    font-size: 21px;
    color: var(--c-text);
    line-height: 1.5;
  }

  .ciudad-img {
    overflow: hidden;
    height: 100%;
  }
  .ciudad-img picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .ciudad-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ciudad-detail {
    padding: 1rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 21px;
    color: var(--c-text);
    line-height: 1.6;
  }
  .ciudad-ticket {
    font-size: 21px;
    font-weight: 700;
    color: var(--c-text);
  }

  /* Teams grid */
  .equipos-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4rem 1rem;
    margin-top: 3rem;
  }
  .equipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .equipo img {
    width: 110px;
    height: 110px;
    object-fit: contain;
  }
  .equipo span {
    font-size: 0.55rem;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
    text-align: center;
  }

  .ciudad-cta {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
  }

  /* ── BUTTONS ── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65em 2em;
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: background var(--transition), transform var(--transition);
  }
  .btn:active { transform: translateY(1px); }
  .btn--teal {
    background: var(--c-teal);
    color: var(--c-white);
    width: 420px;
    height: 70px;
    padding: 18px 2rem;
  }
  .btn--teal:hover { background: var(--c-teal-dark); }
  .btn--submit {
    width: 100%;
    background: var(--c-teal);
    color: var(--c-white);
    padding: 0.9em 2em;
    font-size: 0.8rem;
    border-radius: 20px;
    margin-top: 0.5rem;
  }
  .btn--submit:hover { background: var(--c-teal-dark); }

  /* ── PAQUETE ── */
  .paquete {
    background: var(--c-teal-dark);
    padding: 1.5rem 0 2rem;
    color: var(--c-white);
    min-height: 827px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .paquete__title {
    font-family: var(--font-title);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-beige);
    text-align: center;
    margin-bottom: 1.25rem;
  }
  .paquete__card {
    background: var(--c-white);
    border-radius: 4px;
    padding: 2.5rem 3rem;
    margin-bottom: 1.25rem;
    max-width: 1061px;
    min-height: 465px;
    margin-inline: auto;
    display: flex;
    align-items: center;
  }
  .paquete__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 0.75rem;
  }
  .paquete__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 21px;
    color: var(--c-text);
    line-height: 1.5;
  }
  .paquete__item--full {
    grid-column: 1 / -1;
  }
  .paquete__icon {
    width: 164px;
    height: 92px;
    flex-shrink: 0;
    color: var(--c-teal-dark);
  }
  .paquete__precio {
    text-align: center;
    font-size: 21px;
    color: rgba(255,255,255,.85);
    line-height: 1.7;
  }
  .paquete__precio strong {
    color: var(--c-white);
    font-size: 21px;
  }
  .paquete__precio em {
    font-style: italic;
    font-size: 21px;
    color: rgba(255,255,255,.6);
  }

  /* ── FORMULARIO ── */
  .formulario {
    background: var(--c-white);
    padding: 4rem 0 0;
    color: var(--c-teal-dark);
  }
  .formulario__title {
    font-family: var(--font-title);
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--c-teal-dark);
    margin-bottom: 1.5rem;
  }
  .formulario__sub {
    font-size: 21px;
    color: var(--c-text-muted);
    text-align: left;
    line-height: 1.7;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-inline: auto;
  }
  .formulario__card {
    background: var(--c-beige-light);
    border: none;
    border-radius: 0;
    padding: 2.5rem 2rem;
    width: 516px;
    margin-inline: auto;
    position: relative;
    z-index: 2;
    margin-bottom: -200px;
  }
  .lead-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .field { display: flex; flex-direction: column; gap: 3px; }
  .field input,
  .field textarea {
    background: var(--c-white);
    border: 1px solid var(--c-beige);
    border-radius: 3px;
    padding: 0.65em 0.9em;
    color: var(--c-text);
    font-size: 0.82rem;
    width: 100%;
    transition: border-color var(--transition);
  }
  .field input::placeholder,
  .field textarea::placeholder { color: #aaa; }
  .field input:focus,
  .field textarea:focus {
    outline: none;
    border-color: var(--c-teal);
  }
  .field input.is-invalid,
  .field textarea.is-invalid { border-color: #e05; }
  .field__error { font-size: 0.7rem; color: #e05; min-height: 1em; }
  .field textarea { resize: none; min-height: 72px; }

  /* Form success */
  .form-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
  }
  .form-success[hidden] {
    display: none !important;
  }
  .form-success__icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--c-teal-dark);
    color: var(--c-white);
    font-size: 1.25rem;
    font-weight: 700;
    display: grid;
    place-items: center;
  }
  .form-success h3 {
    font-family: var(--font-title);
    font-size: 1.1rem;
    color: var(--c-teal-dark);
  }
  .form-success p { font-size: 0.8rem; color: var(--c-text-muted); }

  /* ── FOOTER ── */
  .footer {
    background: #006B69;
    padding: 250px 1rem 2rem;
    text-align: center;
    color: rgba(255,255,255,.6);
  }
  .footer__logo-wrap { display: flex; justify-content: center; margin-bottom: 1.25rem; }
  .footer__iso { width: 56px; height: auto; }
  .footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 1rem;
  }
  .footer__nav a {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,.65);
    transition: color var(--transition);
  }
  .footer__nav a:hover { color: var(--c-beige); }
  .footer__legal {
    font-size: 0.68rem;
    color: rgba(255,255,255,.35);
    margin-bottom: 0.75rem;
    font-style: italic;
  }
  .footer__brand {
    font-family: var(--font-title);
    font-size: 1rem;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,.25);
  }


  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    :root {
      --max-w: 100%;
    }
    .container {
      width: 100% !important;
      padding-inline: 1.5rem !important;
      margin-inline: 0;
    }
    .nav {
      justify-content: center !important;
      padding: 2.25rem 1.5rem !important;
    }
    .nav__logo-img {
      height: 44px;
    }
    .hero {
      height: 100svh !important;
      min-height: 550px;
    }
    .hero__inner {
      grid-template-columns: 1fr;
      padding: 0 1.5rem 2rem !important;
      gap: 0;
    }
    .hero__content {
      text-align: center;
      align-items: center;
      max-width: 100%;
      padding-top: 0.75rem;
    }
    .hero__form-panel {
      display: none;
    }
    .hero__title {
      font-size: 2.2rem;
      line-height: 1.25;
    }
    .hero__sub {
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      margin-top: 0.25rem;
    }
    .que-es {
      padding: 50px 0 1rem !important;
    }
    .que-es__box {
      padding: 1.5rem !important;
      margin: 0 !important;
      max-width: 100%;
      min-height: 0;
    }
    .que-es__body {
      font-size: 18px;
    }
    .fecha-bar {
      padding: 1.25rem 1rem;
      font-size: 16px;
      margin: 0;
    }
    .ciudades {
      padding: 0 !important;
    }
    .ciudades .container {
      width: 100% !important;
      padding-inline: 1.5rem !important;
    }
    .ciudad-row {
      height: auto;
      grid-template-columns: 1fr;
      margin-top: 1rem;
      margin-left: 0;
      margin-right: 0;
      border-radius: 0;
    }
    .ciudad-row--reverse {
      direction: ltr;
    }
    .ciudad-info {
      padding: 2.5rem 1.5rem !important;
      border-right: none !important;
      border-bottom: 11px solid #003A4D !important;
      text-align: center;
      align-items: center;
    }
    .ciudad-img {
      height: 300px;
    }
    .ciudad-nombre {
      font-size: 56px;
      margin-bottom: 0.35rem;
    }
    .ciudad-meta {
      font-size: 18px;
      line-height: 1.3;
    }
    .ciudad-detail {
      font-size: 16px;
      padding: 1rem !important;
      margin: 0;
    }
    .equipos-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem 0.75rem;
      margin-top: 1.5rem;
      padding: 0 1.5rem;
    }
    .equipo img {
      width: 60px;
      height: 60px;
    }
    .formulario {
      padding: 2rem 0 0 !important;
    }
    .formulario__title {
      font-size: 18px;
      padding: 0 1.5rem;
    }
    .formulario__sub {
      font-size: 16px;
      padding: 1rem 1.5rem;
      text-align: center;
      margin-bottom: 1.5rem;
    }
    .formulario__card {
      width: 100% !important;
      padding: 1.5rem !important;
      margin: 0 0 3rem !important;
      border-radius: 0;
      max-width: 100%;
    }
    .lead-form {
      width: 100%;
    }
    .field input,
    .field textarea {
      font-size: 16px;
    }
    .paquete {
      padding: 2rem 0 !important;
      min-height: 0;
    }
    .paquete__title {
      font-size: 20px;
      padding: 0 1.5rem;
    }
    .paquete__card {
      max-width: 100% !important;
      min-height: auto;
      padding: 1.5rem !important;
      display: block;
    }
    .paquete__grid {
      grid-template-columns: 1fr;
    }
    .paquete__item {
      font-size: 16px;
      gap: 0.75rem;
      align-items: center;
    }
    .paquete__icon {
      width: 64px;
      height: 64px;
      flex-shrink: 0;
      object-fit: contain;
    }
    .paquete__item--full {
      grid-column: 1;
    }
    .paquete__precio {
      font-size: 18px;
      padding: 1rem 1.5rem;
    }
    .btn {
      font-size: 16px;
      padding: 0.7em 1.5rem;
    }
    .btn--teal {
      width: 100%;
      height: auto;
    }
    .btn--submit {
      width: 100%;
    }
    .footer {
      padding: 80px 1.5rem 2rem;
    }
  }

}