/* =========================================================
   MAIN.CSS 
   ========================================================= */

@layer tokens, reset, base, layout, components, utilities, overrides;

/* ============================= TOKENS =========================== */
@layer tokens {
  :root {
    --color-primary: #1a3155;
    --color-primary-dark: #121b2e;
    --color-primary-light: #2d5280;

    --color-secondary: #ed6a6d;
    --color-accent: #fe5252;

    --color-white: #fef7f5;

    --button-bg:
      radial-gradient(circle at 12% 25%,
        rgba(45, 52, 56, 0.23),
        transparent 35%),
      radial-gradient(circle at 90% 8%,
        rgba(46, 59, 66, 0.26),
        transparent 38%),
      radial-gradient(circle at 47% 104%,
        rgba(57, 63, 47, 0.23),
        transparent 48%),
      var(--glass);

    --color-button: linear-gradient(105deg,
        var(--color-primary),
        var(--color-primary-light));

    --color-text-soft: #a7c0dc;
    --color-line: rgba(29, 65, 106, 0.88);

    --color-green-light: #25d366;
    /* Modern palette */
    --color-canvas: #f7f5f2;
    --color-card: #ffffff;
    --color-ink: #1a1a2e;
    --color-ink-mid: #3d3d5c;
    --color-ink-soft: #7b7b9a;
    --color-border: #d8d6f0;
    --color-border-hover: #2142b1;

    --color-accent-2: #ff004b;

    --color-success-bg: #edfaf3;
    --color-success-ink: #1a6b43;
    --color-success-bdr: #6fcf97;
    --color-error-bg: #ffe8e8;
    --color-error-ink: #ffffff;
    --color-error-bdr: #ff004b;
    --color-disabled: #e8e7f4;

    --color-black: #000000;
    --color-red: #ff004b;
    --color-red-hover: #df4270;
    --color-dark-blue: #1a3155;
    --color-black-blue: #121b2e;
    --color-light-blue-gray: #2d5280;
    --color-cream: #fcf6f0;
    --color-concrete: #f2f2f2;
    --color-gray: #a09e9e;
    --color-mid-gray: #707070;
    --color-soft-black: #353535;

    --color-nav-active: #345474;

    --glass: rgba(42, 82, 128, 0.7);

    /* Header */
    --globalnav-backdrop-filter: saturate(1.2) blur(20px);
    --globalnav-background: rgba(45, 82, 128, 0.92);
    --globalnav-background-7: rgba(26, 49, 85, 0.5);
    --globalnav-background-gradient:
      radial-gradient(circle at 12% 25%,
        rgba(45, 52, 56, 0.32),
        transparent 35%),
      radial-gradient(circle at 90% 8%,
        rgba(46, 59, 66, 0.13),
        transparent 38%),
      radial-gradient(circle at 47% 104%,
        rgba(57, 63, 47, 0.13),
        transparent 48%),
      var(--glass);
    --globalnav-background-glass:
      radial-gradient(circle at 12% 25%,
        rgba(110, 180, 199, 0.45),
        transparent 35%),
      radial-gradient(circle at 90% 8%,
        rgba(91, 142, 130, 0.36),
        transparent 38%),
      radial-gradient(circle at 47% 104%,
        rgba(201, 118, 133, 0.33),
        transparent 48%),
      var(--glass);

    /* Typography */
    --font-display: "Gotham", sans-serif;
    --font-body: "Gotham", sans-serif;
    /* 10px */
    --font-size-sm: 0.625rem;
    /* 14px */
    --font-size-md: 14px;
    /* 16px */
    --font-size-lg: 16px;
    /* 18px */
    --font-size-xl: 18px;
    /* 20px */
    --font-size-xxl: 20px;

    /* Spacing */
    /* 32px */
    --sp-sm: 2rem;
    /* 50px */
    --sp-md: 3.125rem;
    /* 120px */
    --sp-lg: 7.5rem;
    /* 160px */
    --sp-xl: 10rem;
    /* 200px */
    --sp-xxl: 12.5rem;

    --sp-0: 0.125rem;
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;

    /* Radius */
    /* 6px */
    --radius-sm: 0.375rem;
    /* 12px */
    --radius-md: 0.75rem;
    /* 20px */
    --radius-lg: 1.25rem;
    /* 45px */
    --radius-xl: 1.875rem;
    /* 40px */
    --radius-wd: 2.5rem;
    /* 256px */
    --radius-full: 11rem;
    /* 999px */
    --radius-pill: 62.4375rem;

    /* Motion */
    --trans-fast: 150ms ease;
    --trans-normal: 250ms ease;
    --trans-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-card:
      0 0.25rem 2rem rgba(26, 26, 46, 0.08),
      0 0.0625rem 0.25rem rgba(26, 26, 46, 0.04);
    --shadow-focus: 0 0 0 0.1875rem rgba(74, 58, 255, 0.22);
    --shadow-submenu: 2px solid var(--color-primary-light);
    --shadow-input: 0 2px 8px rgba(20, 29, 48, 0.15);
    --shadow-form-input:
      inset 0 2px 6px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);

    /* Layout */
    /* 52px */
    --nav-height: 3.25rem;
    /* 640px */
    --content-sm: 40rem;
    /* 920px */
    --content-md: 57.5rem;
    /* 1280px */
    --content-lg: 80rem;
    /* 1920px */
    --content-max: 120rem;

    /* Forms */
    --form-width: 100%;
    --form-input-bg: var(--color-white);
    --form-input-bg-hover: #f7f5f2;
    --form-input-bg-focus: #f7f5f2;
    --form-input-bg-error: #ffe8e8;
    --form-input-bg-disabled: #e8e7f4;
    --form-input-border: 2px solid var(--color-ink-soft);
    --form-input-radius: var(--radius-sm);
    --form-button-bg: var(--color-button);
    --form-button-bg-hover: var(--color-primary-dark);
    --form-error-color: var(--color-secondary);

    /* Cards */
    --card-bg: var(--color-card);
    --card-border: 1px solid var(--color-border);
    --card-color-eyebrow: var(--color-white);
    --card-color-title: var(--color-white);
    --card-color-description: var(--color-text-soft);
    --card-description-min-height: var(--sp-xl);
    --card-color-border: rgba(105, 151, 195, 0.23);
    --card-radius: 30px;
    --card-radius-img: 25px;

    --shadow-form:
      0 0.25rem 2rem rgba(26, 26, 46, 0.08),
      0 0.0625rem 0.25rem rgba(26, 26, 46, 0.04);
    --shadow-form-focus: 0 0 0 0.1875rem rgba(74, 58, 255, 0.22);
    --shadow-form-error: 0 0 0 0.1875rem rgba(255, 0, 75, 0.22);
    --shadow-form-disabled: 0 0 0 0.1875rem rgba(26, 26, 46, 0.08);
    --shadow-form-hover:
      0 0.25rem 2rem rgba(26, 26, 46, 0.08),
      0 0.0625rem 0.25rem rgba(26, 26, 46, 0.04);
    --shadow-form-focus-hover: 0 0 0 0.1875rem rgba(74, 58, 255, 0.22);
    --shadow-form-error-hover: 0 0 0 0.1875rem rgba(255, 0, 75, 0.22);
    --shadow-form-disabled-hover: 0 0 0 0.1875rem rgba(26, 26, 46, 0.08);
    --shadow-form-focus-hover: 0 0 0 0.1875rem rgba(74, 58, 255, 0.22);
    --form-input-padding: 0.75rem 1rem;
    --form-input-border-radius: 0.375rem;
    --form-input-border-width: 2px;
  }

  /* =========================================================
   FONTS
   ========================================================= */

  /* ==========================================
   Gotham Light
   ========================================== */

  @font-face {
    font-family: "Gotham";
    src: url("fonts/GothamLight.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Gotham";
    src: url("fonts/GothamLightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }

  /* ==========================================
   Gotham Book
   ========================================== */

  @font-face {
    font-family: "Gotham";
    src: url("fonts/GothamBook.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  /* ==========================================
   Gotham Medium
   ========================================== */

  @font-face {
    font-family: "Gotham";
    src: url("fonts/GothamMedium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Gotham";
    src: url("fonts/GothamMediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
  }

  /* ==========================================
   Gotham Bold
   ========================================== */

  @font-face {
    font-family: "Gotham";
    src: url("fonts/GothamBoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }
}

/* ============================= RESET =========================== */
@layer reset {

  /* 1. Box-sizing universal + reset de espaciado */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* 2. Evita el auto-zoom de texto en iOS/Android */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  /* 3. Elementos de bloque HTML5 (safety net para navegadores muy antiguos) */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section,
  summary {
    display: block;
  }

  /* 4. Media — previene overflow, mantiene proporciones */
  img,
  picture,
  svg,
  video,
  canvas {
    display: block;
    /*max-width: 100%;*/
    height: auto;
  }

  /* 5. Listas semánticas — solo las marcadas como navegables */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding: 0;
  }

  /* 6. Tabla */
  table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
  }

  /* 7. Formularios — hereda tipografía y color del documento */
  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  /* 8. Botón base, sin estilos nativos del navegador */
  button {
    cursor: pointer;
    background: none;
    border: none;
  }

  /* 9. Peso de énfasis (explícito, por si el UA stylesheet cambia) */
  strong,
  b {
    font-weight: 700;
  }
}

/* ============================= BASE =========================== */
@layer base {

  /* 1. HTML root — renderizado, scroll y tipografía refinada */
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height, 4rem);
    /* el anchor no queda bajo la nav */

    hanging-punctuation: first last;
  }

  /* 2. Body — tokens de diseño del proyecto */
  body {
    min-height: 100dvh;
    /* respeta el UI del navegador móvil */
    line-height: 1.6;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    background-color: var(--color-white);
    color: var(--color-soft-black);
  }

  /* 4. Párrafos y texto corrido */
  p,
  li,
  figcaption,
  blockquote,
  dd {
    text-wrap: pretty;
    /* evita huérfanos al final de párrafo */
    /*max-width: 72ch;*/
    /* longitud de línea óptima para lectura */
  }

  /* 5. Elementos interactivos — transición consistente */
  a,
  button,
  [role="button"],
  [role="link"],
  input,
  textarea,
  select {
    color: inherit;
    text-decoration: none;
    transition:
      color var(--trans-normal, 180ms ease),
      background-color var(--trans-normal, 180ms ease),
      border-color var(--trans-normal, 180ms ease),
      box-shadow var(--trans-normal, 180ms ease),
      opacity var(--trans-normal, 180ms ease);
  }

  /* 6. Color de énfasis */
  strong {
    color: var(--color-black);
  }

  /* 7. Separador horizontal */
  hr {
    border: none;
    border-top: 1px solid oklch(from var(--color-mid-gray, #707070) l c h / 0.3);
    margin-block: var(--space-4, 1rem);
  }

  /* 8. Espaciado de main, compensa la nav fija */
  main {
    padding-top: var(--nav-height, 4rem);
        overflow-block: auto;
  }

  /* 9. Selección de texto */
  ::selection {
    background: oklch(from var(--color-red, #ff004b) l c h / 0.15);
    color: var(--color-soft-black);
  }

  /* 10. Focus accesible — solo visible con teclado */
  :focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 3px;
    border-radius: var(--radius-sm, 0.25rem);
  }

  /* 11. Utilidad de accesibilidad para screen readers */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* =========================================================
   TYPOGRAPHY
   ========================================================= */

  /* 3. Headings */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
    /* equilibra líneas en títulos */
    line-height: 1.15;
    font-family: var(--font-display);
  }

  h1 {
    line-height: 1;
    padding-bottom: var(--sp-3);
    color: var(--color-dark-blue);

    font-size: clamp(2.75rem, 2.4rem + 0.8vw, 3rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
  }

  h2 {
    line-height: 1.2;
    color: var(--color-black);
    font-size: clamp(1.8rem, 3vw, 1.75rem);
    padding-bottom: var(--sp-3);
    font-weight: 500;
    

    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--color-dark-blue);



  }

  h2.titulos {
    color: var(--color-black);
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
  }

  h3 {
    line-height: 1.1;
    color: var(--color-dark-blue);
    font-size: var(--font-size-xxl);
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
    font-weight: 700;
  }

  h4 {
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--color-dark-blue);
  }

  p {
    line-height: 1.6;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-soft-black);
    font-size: var(--font-size-md);
    letter-spacing: 0.5px;
  }

  li a {
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 0.9rem;
  }

  li a:hover {
    color: var(--color-secondary);
  }

  /* =========================================================
   ACCESSIBILITY
   ========================================================= */
  .skip-link {
    position: absolute;
    top: -45px;
    left: 0;
    background: var(--color-red);
    color: var(--color-white);
    padding: 8px 12px;
    z-index: 1000;
  }

  .skip-link:focus {
    top: 0;
  }

  .sr-only,
  .hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .hp-field {
    left: -9999px;
  }

  /* ======== Buttons ======= */
  button,
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 48px;
    padding: 0 29px;
    border-radius: 999px;
    background: var(--button-bg);

    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition:
      transform 0.2s ease,
      filter 0.2s ease;

    box-shadow:
      inset 0px 0px 7px rgba(0, 0, 0, 0.3),
      0 0 5px rgba(255, 255, 255, 0.07);


     
  }

  .button:hover,
  button:hover {
    filter: brightness(1.1);
  }

  .button:focus-visible,
  button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
  }

  .button__arrow {
    color: var(--color-accent);
    font-size: 2.15rem;
    font-weight: 400;
    line-height: 1;
  }

  .button__arrow {
    width: 15px;
    height: 12px;
    margin-left: 4px;
    background-color: var(--color-accent);
    display: inline-block;
    clip-path: polygon(58.287% 98.138%, 58.287% 98.138%, 58.06% 97.816%, 57.854% 97.474%, 57.671% 97.114%, 57.509% 96.737%, 57.372% 96.345%, 57.258% 95.941%, 57.168% 95.525%, 57.103% 95.1%, 57.064% 94.668%, 57.05% 94.231%, 57.05% 94.231%, 57.064% 93.793%, 57.103% 93.361%, 57.168% 92.937%, 57.258% 92.521%, 57.372% 92.117%, 57.509% 91.725%, 57.671% 91.348%, 57.854% 90.988%, 58.06% 90.646%, 58.287% 90.324%, 84.894% 55.529%, 4.902% 55.529%, 4.902% 55.529%, 4.567% 55.512%, 4.236% 55.46%, 3.911% 55.375%, 3.593% 55.258%, 3.284% 55.108%, 2.984% 54.928%, 2.696% 54.717%, 2.42% 54.476%, 2.158% 54.207%, 1.912% 53.91%, 1.912% 53.91%, 1.685% 53.588%, 1.479% 53.246%, 1.295% 52.885%, 1.134% 52.508%, 0.996% 52.116%, 0.881% 51.711%, 0.792% 51.295%, 0.727% 50.87%, 0.687% 50.438%, 0.674% 50%, 0.674% 50%, 0.687% 49.562%, 0.727% 49.13%, 0.792% 48.705%, 0.881% 48.289%, 0.996% 47.884%, 1.134% 47.493%, 1.295% 47.115%, 1.479% 46.755%, 1.685% 46.413%, 1.912% 46.091%, 1.912% 46.091%, 2.158% 45.793%, 2.42% 45.524%, 2.696% 45.284%, 2.984% 45.073%, 3.284% 44.892%, 3.593% 44.743%, 3.911% 44.625%, 4.236% 44.54%, 4.567% 44.489%, 4.902% 44.471%, 84.894% 44.471%, 58.287% 9.676%, 58.287% 9.676%, 58.165% 9.522%, 58.047% 9.361%, 57.936% 9.194%, 57.829% 9.021%, 57.728% 8.844%, 57.632% 8.661%, 57.542% 8.473%, 57.458% 8.28%, 57.379% 8.083%, 57.307% 7.882%, 57.307% 7.882%, 57.241% 7.677%, 57.181% 7.469%, 57.128% 7.258%, 57.081% 7.045%, 57.041% 6.829%, 57.008% 6.612%, 56.981% 6.393%, 56.961% 6.173%, 56.948% 5.951%, 56.942% 5.729%, 56.942% 5.729%, 56.942% 5.507%, 56.949% 5.285%, 56.963% 5.063%, 56.984% 4.843%, 57.012% 4.625%, 57.046% 4.408%, 57.087% 4.192%, 57.134% 3.979%, 57.188% 3.769%, 57.249% 3.561%, 57.249% 3.561%, 57.316% 3.356%, 57.389% 3.156%, 57.468% 2.959%, 57.553% 2.767%, 57.643% 2.58%, 57.74% 2.398%, 57.842% 2.221%, 57.949% 2.049%, 58.062% 1.882%, 58.179% 1.722%, 58.179% 1.722%, 58.302% 1.568%, 58.429% 1.421%, 58.561% 1.28%, 58.696% 1.147%, 58.836% 1.021%, 58.979% 0.902%, 59.126% 0.791%, 59.276% 0.688%, 59.429% 0.593%, 59.586% 0.505%, 59.586% 0.505%, 59.745% 0.426%, 59.906% 0.355%, 60.069% 0.293%, 60.233% 0.24%, 60.399% 0.195%, 60.566% 0.159%, 60.735% 0.132%, 60.904% 0.114%, 61.073% 0.104%, 61.244% 0.104%, 61.244% 0.104%, 61.414% 0.112%, 61.583% 0.129%, 61.751% 0.155%, 61.919% 0.19%, 62.085% 0.234%, 62.25% 0.286%, 62.413% 0.347%, 62.574% 0.417%, 62.733% 0.495%, 62.89% 0.581%, 62.89% 0.581%, 63.044% 0.676%, 63.194% 0.778%, 63.342% 0.889%, 63.485% 1.006%, 63.625% 1.131%, 63.761% 1.264%, 63.893% 1.403%, 64.02% 1.55%, 64.144% 1.703%, 64.262% 1.862%, 98.086% 46.093%, 98.086% 46.093%, 98.313% 46.415%, 98.518% 46.757%, 98.702% 47.117%, 98.863% 47.494%, 99.001% 47.886%, 99.115% 48.29%, 99.205% 48.706%, 99.269% 49.131%, 99.309% 49.563%, 99.322% 50%, 99.322% 50%, 99.309% 50.437%, 99.269% 50.87%, 99.205% 51.294%, 99.115% 51.71%, 99.001% 52.114%, 98.863% 52.506%, 98.702% 52.883%, 98.518% 53.243%, 98.313% 53.585%, 98.086% 53.907%, 64.262% 98.138%, 64.262% 98.138%, 64.016% 98.435%, 63.755% 98.704%, 63.479% 98.944%, 63.191% 99.155%, 62.891% 99.335%, 62.582% 99.484%, 62.264% 99.601%, 61.939% 99.686%, 61.609% 99.738%, 61.274% 99.755%, 61.274% 99.755%, 60.94% 99.738%, 60.61% 99.686%, 60.285% 99.601%, 59.967% 99.484%, 59.658% 99.335%, 59.358% 99.155%, 59.07% 98.944%, 58.794% 98.704%, 58.533% 98.435%, 58.287% 98.138%)
  }

  /* ---------------------------------- BUTTON 2 ----------------------------- */

  button,
  .button {

 font-size: var(--font-size-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 40px;
    border-radius: 999px;
    background: #1a315569;
    color: var(--color-white);

    line-height: 1;
    text-decoration: none;
    box-shadow: inset 0px 0px 7px rgba(0, 0, 0, 0.3),
      0 0 5px rgba(255, 255, 255, 0.1);
    
    transition:
      transform 180ms ease,
      background 180ms ease;




    color: #f0f0f0;


    align-items: center;
    justify-content: center;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);*/
  }

  button:hover,
  .button:hover {
    background: #163858;

  }



  /* --------------------------------------------------------------------------
       7. GLASS UTILITY CLASSES
       -------------------------------------------------------------------------- */
  :root {
    /* ── Glass surface tints ── */
    --glass-white: rgba(255, 255, 255, 0.12);
    --glass-white: linear-gradient(105deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(0, 0, 0, 0.00) 40%,
        rgba(255, 255, 255, 0.08) 60%,
        rgba(0, 0, 0, 0.00) 100%);
    --glass-white-md: rgba(255, 255, 255, 0.2);
    --glass-white-lg: rgba(255, 255, 255, 0.3);
    --glass-dark: rgba(0, 0, 0, 0.18);
    --glass-dark-md: rgba(0, 0, 0, 0.28);

    /* ── Borders ── */
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-border-subtle: rgba(255, 255, 255, 0.12);
    --glass-border-bright: rgba(255, 255, 255, 0.5);

    /* ── Blur values ── */
    --blur-sm: blur(8px);
    --blur-md: blur(18px) saturate(1.2);
    --blur-lg: blur(32px);
    --blur-xl: blur(60px);

    /* ── Shadows ── */
    --shadow-glass:
      0 2px 3px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    --shadow-float:
      0 20px 60px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 40px rgba(120, 200, 255, 0.35);

    /* ── Reflections ── */
    --reflection-top: linear-gradient(135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0) 50%);
    --reflection-inner:
      inset 0 1px 1px rgba(255, 255, 255, 0.45),
      inset 0 -1px 1px rgba(0, 0, 0, 0.1);
  }

  .glass {
    /*border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: var(--globalnav-backdrop-filter);
    -webkit-backdrop-filter: var(--globalnav-backdrop-filter);
    box-shadow:
      0 3px 6px rgba(0, 0, 0, 0.18),
      inset 0 1px rgba(255, 255, 255, 0.04);
*/

    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    background: var(--glass-white);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
  }

  .glass::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--reflection-top);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
  }

  .glass--dark {
    background: var(--glass-dark-md);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .glass--bright {
    background: var(--glass-white-lg);
    border-color: var(--glass-border-bright);
  }

  .glass--frosted {
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    background: rgba(255, 255, 255, 0.08);
  }

  .glass--liquid {
    backdrop-filter: var(--blur-xl);
    -webkit-backdrop-filter: var(--blur-xl);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
  }
}

@layer layout {
  .container {
    display: block;
    width: auto;
    height: auto;
    align-items: center;

    margin: auto;
    margin-inline: auto;
  }

  .container__heading {
    text-align: center;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--color-dark-blue);
    padding-bottom: var(--sp-sm);
  }

  .container__description {
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 400;
    color: var(--color-soft-black);
    /*padding-bottom: var(--sp-lg);*/
    max-width: var(--content-md);
    margin: 0 auto;
  }

  .container img {
    /*  margin: 0 auto var(--sp-sm) auto;*/
    display: block;

    position: relative;
  }

  .section-theme-dark,
  .section-theme-dark h1,
  .section-theme-dark h2,
  .section-theme-dark h3,
  .section-theme-dark h4,
  .section-theme-dark h5,
  .section-theme-dark h6,
  .section-theme-dark p,
  .section-theme-dark li a {
    color: var(--color-white);
  }

  .section-theme-light,
  .section-theme-light h1,
  .section-theme-light h2,
  .section-theme-light h3,
  .section-theme-light h4,
  .section-theme-light h5,
  .section-theme-light h6,
  .section-theme-light p,
  .section-theme-light li a {
    color: var(--color-primary-dark);
  }

  .hero {
    padding: var(--sp-lg) 5% 0;

    position: sticky;

    top: 0;

    height: auto;

    overflow: hidden;
    z-index: -1;

    background-color: var(--color-white);
  }

  .hero img {
    margin: 0 auto var(--sp-md) auto;
    width: 12.5rem;
    display: block;
    height: 100%;
    position: relative;
  }

  .section-hero .hero-frame {
    height: 100%;

    width: -moz-fit-content;
    width: fit-content;
  }

  .hero__title {
    padding-bottom: var(--sp-md);
    max-width: var(--content-sm);
    margin: 0 auto;
  }

  .hero__description {
    text-align: center;
    max-width: var(--content-md);
    margin: 0 auto;
    font-size: var(--font-size-md);
  }

  .section-about {
    text-align: center;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    padding: var(--sp-lg) 0 var(--sp-lg) 0;
    max-width: 70rem;
    z-index: -1;
  }

  /* ------ DAY TOURS  */

  .section-daytours {
    text-align: center;
    border-radius: var(--radius-full) var(--radius-full) 0 0;

    background: url("../images/bg-map-image.png"),var(--color-primary-light);
    padding: var(--sp-xl) 0 var(--sp-xl) 0;

    box-shadow:
      0 3px 6px rgba(0, 0, 0, 0.18),
      inset 0 1px rgba(255, 255, 255, 0.04);
  }

  .section-daytours img {
    margin: 0 auto var(--sp-sm) auto;
  }

  .section-contact {
    background-color: var(--color-white);
    z-index: 9;
    position: relative;
    padding: var(--sp-xl) 0 var(--sp-xl) 0;
    text-align: center;
  }

  .section-contact img {
    margin: 0 auto var(--sp-xl) auto;
  }

  .section-daytours .container__description,
  .section-transport .container__description,
  .section-featured-tours .container__description {
    padding-bottom: var(--sp-lg);
  }

  /* -------------------------------- PACKAGES --------------------------- */
  .section-packages {
    background-color: var(--color-primary-light);

    padding: 0 0 var(--sp-xl) 0;
    display: grid;
    grid-template-columns: minmax(410px, 562px) minmax(600px, 1fr);
    gap: 1rem;
  }

  .section-packages__content,
  .section-packages__image {
    border: 6px solid var(--color-primary-light);
    overflow: hidden;
    min-height: 765px;
  }

  .section-packages__content {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 70px;
    background: var(--color-accent);
    border-radius: 45px 0 250px 0;
  }

  .section-packages__info {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 305px;
    margin-top: -8px;
    color: var(--color-white);
  }

  .section-packages__info img {
    position: relative;
    z-index: 1;
  }

  .section-packages__icon {
    width: 48px;
    height: 68px;
    margin: 0 0 44px 3px;
    display: block;
  }

  .section-packages__title {
    margin: 0 0 35px;
    font-size: clamp(42px, 3.15vw, 50px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1.6px;
  }

  .section-packages__description {
    max-width: 255px;
    margin: 0 0 40px;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
  }

  .section-packages__image {
    position: relative;

    border-radius: 16px 260px 16px 16px;
    background: none;
  }

  .section-packages__image img {
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0 auto;
  }

  .section-packages__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(5, 54, 97, 0.13) 0%,
        transparent 42%,
        transparent 100%);
    pointer-events: none;
  }



  /* ---------------------------------- SECTION BUCEO ----------------------------- */

  .section-buceo {
    background-color: var(--color-primary-light);

    padding: 0 0 var(--sp-xl) 0;
    display: grid;
    grid-template-columns: minmax(600px, 1fr) minmax(410px, 562px);
    gap: 1rem;
  }

  .section-buceo__content,
  .section-buceo__image {
    border: 6px solid var(--color-primary-light);
    overflow: hidden;
    min-height: 765px;
  }

  .section-buceo__content {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 70px;
    background: #3986b4;
    border-radius: 45px 0 250px 0;
  }

  .section-buceo__info {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 305px;
    margin-top: -8px;
    color: var(--color-white);
  }

  .section-buceo__info img {
    position: relative;
    z-index: 1;
  }

  .section-buceo__icon {
    width: 48px;
    height: 68px;
    margin: 0 0 44px 3px;
    display: block;
  }

  .section-buceo__title {
    margin: 0 0 35px;
    font-size: clamp(42px, 3.15vw, 50px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1.6px;
  }

  .section-buceo__description {
    max-width: 255px;
    margin: 0 0 40px;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
  }

  .section-buceo__image {
    position: relative;

    border-radius: 260px 16px 16px 16px;
    background: none;
  }

  .section-buceo__image img {
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0 auto;
  }

  .section-buceo__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(5, 54, 97, 0.13) 0%,
        transparent 42%,
        transparent 100%);
    pointer-events: none;
  }

  /* ---------------------------------- SECTION TRANSPORT ----------------------------- */

  .section-transport {
    text-align: center;

    background: var(--color-primary-light);
    padding: 0 0 var(--sp-xl) 0;

    box-shadow: none;

    border-radius: 0 0 var(--radius-full) var(--radius-full);

    background: url("../images/bg-map-image.png"),var(--color-primary-light);
  }


  .section-transport img {
    margin: 0 auto var(--sp-sm) auto;
  }


  /* ---------------------------------- SECTION PARTNERS ----------------------------- */
  .section-partners {
    text-align: center;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    padding: var(--sp-xl) 0 var(--sp-xl) 0;
    /* background: var(--color-white);
    

    box-shadow:
      0 3px 6px rgba(0, 0, 0, 0.18),
      inset 0 1px rgba(255, 255, 255, 0.04);
      */
  }

  .partners-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding: var(--sp-lg) 0;
  }


  /* ---------------------------------- SECTION FEATURED TOURS ----------------------------- */

  .section-featured-tours {
    text-align: center;
    border-radius: 0 0 var(--radius-full) var(--radius-full);
    padding: var(--sp-xl) 0 var(--sp-xl) 0;
    background: var(--color-primary-light);
    background: url("../images/bg-map-image.png"),var(--color-primary-light);
    margin: 0 auto;
  }

  .section-featured-tours img {
    margin: 0 auto var(--sp-sm) auto;
  }

  /* ---------------------------------- SECTION TOUR DETAILS ----------------------------- */
  .section-tour_details {
   padding: var(--sp-xl) 0 0 0;
    background: var(--color-white);
  }

  .section-itinerary {

    padding: var(--sp-lg) 0 .7rem 0;
    background: var(--color-white);

  }
  .section-itinerary__details{
    max-width: var(--content-sm);
    margin: 0px auto 0 auto;

  }

    .section-itinerary__details h2 {



    padding-bottom: var(--sp-sm);
    font-weight: 700;
    font-size: 36px;


}
    .section-itinerary__details h3, .section-itinerary__details h4{
      margin-bottom: var(--sp-sm);
    }

    .section-itinerary__details p{
      margin-bottom: var(--sp-md);
    }

.section-featured_image img{

    width: 100%;
    border-radius: var(--radius-full) var(--radius-full)  0 0;

}


article.itinerary-stop {
    padding: 0 0 0 0;
    padding: var(--sp-lg) 0 0 0;
}

    .itinerary-stop__body {
    max-width: var(--content-sm);
    margin: 0px auto var(--sp-md) auto;
    
  }
  .itinerary-gallery__secondary {
    display: flex;
      width: 100%;
      gap: .7rem;
      padding-top: .7rem;
  }

.itinerary-gallery__secondary img {
    width: 100%;
    border-radius: var(--radius-sm);
}

.itinerary-gallery__image {
  width: 100%;
}



.itinerary-gallery-v {
  display: flex;
  width: 100%;
      gap: .7rem;
      padding-top: .7rem;
}
 .itinerary-gallery__secondary-v {
    display: block;
      width: 50%;;
      gap: .7rem;
      
  }
 .itinerary-gallery__main-v {
    width: 50%;;

}

.itinerary-gallery__main-v img, .itinerary-gallery-v img {
  max-height: 1703px;
  border-radius: var(--radius-sm);
}


.itinerary-gallery__secondary-v img:first-child{
  padding-bottom: .7rem;
}

}









@layer components {

  /* ===========================
        HEADER
=========================== */
  /* --------------------------------------------------------------------------
       15. COMPONENT: NAVIGATION
       -------------------------------------------------------------------------- */
  .glass-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-xs);
    border-radius: var(--radius-full);
  }

  .glass-nav__item {
    padding: 9px 22px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 400;
    opacity: 0.65;
    cursor: pointer;
    transition: background var(--dur-fast), opacity var(--dur-fast),
      transform var(--dur-fast) var(--ease-liquid);
  }

  .glass-nav__item:hover {
    opacity: 1;
    transform: translateY(-1px);
  }

  .glass-nav__item--active {
    background: var(--glass-white-md);
    border: 1px solid var(--glass-border);
    opacity: 1;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }

  /* =========================================================
   HEADER / NAV
   ========================================================= */
  .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 99;

    width: 96%;
    max-width: 2048px;
    height: var(--nav-height);

    margin: auto;

    border-radius: var(--radius-xl);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0;



    background: var(--globalnav-background);

    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    /*background: var(--glass-white);*/
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);



    /* 
    border: 1px solid var(--globalnav-background);
    backdrop-filter: var(--globalnav-backdrop-filter);
    box-shadow:
      0 3px 6px rgba(0, 0, 0, 0.18),
      inset 0 1px rgba(255, 255, 255, 0.04);
    */
  }

  nav,
  #main-navigation {
    width: 64%;
    margin: auto;
    display: flex;
    align-items: center;
    min-height: var(--nav-height);
    padding: 0 20px;
    z-index: 99;
    position: fixed;
    justify-content: center;
    inset: 0 0 auto 0;
  }

  .site-logo {
    flex: 1 1 300px;
    padding-left: 40px;
  }

  .nav-links {
    display: flex;
    justify-content: space-around;
    align-items: center;
    line-height: 30px;
    flex: 1 1 500px;
    gap: 1rem;
  }

  .nav-lang {
    cursor: pointer;
  }

  .nav-flag {
    width: 30px;
    height: 30px;

    border-radius: 50%;

    position: relative;
  }

  .menu-item-row {
    text-decoration: none;

    color: var(--color-white);

    font-size: 13px;

    font-weight: 400;

    padding: 0.01rem 0.7rem;

    border-radius: var(--radius-xl);

    align-items: center;

    gap: var(--sp-0);

    transition: 0.25s;
  }


  .menu-item-row>a {
    display: flex;
    align-items: center;
    font-size: clamp(0.75rem, 1vw, 0.85rem);
    opacity: 0.85;
    gap: var(--sp-0);
  }

  .menu-item-row:hover {
    /*background: var(--color-primary-dark);*/

  }

  .menu-item-row>a:hover {
    color: var(--color-white);
    opacity: 1;
    transform: translateY(-1px);
  }

  /* Active */
  .active {
    color: var(--color-red-hover);
    font-weight: 600;
  }

  .menu-item-row.active {
    background: var(--color-primary-light);

    color: white;

    border: solid 1px #2d5280;
    box-shadow:
      inset 0px 0px 7px rgba(0, 0, 0, 0.3),
      0 0 5px rgba(255, 255, 255, 0.1);

    background: var(--globalnav-background);
    border: 1px solid var(--globalnav-background);

    backdrop-filter: var(--globalnav-backdrop-filter);
  }

  .menu-item-row.active a {
    font-weight: 700;
  }

  .burger,
  .menu-check,
  .checkbtn {
    display: none;
  }

  /* Top Menu ARROW */
  .menu-item-row>a>span,
  .submenu-toggle>span {
    font-size: 13px;
    opacity: 0.85;
    margin-bottom: 0rem;
    margin-left: 0.3rem;
  }

  /* Submenu desktop */
  .has-submenu {
    position: relative;
  }

  .submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    background-color: var(--color-primary);
    min-width: 240px;
    z-index: 999;
    padding: 15px 0;
    opacity: 0;
    visibility: hidden;

    border-top: 2px solid var(--color-accent);
    box-shadow: var(--shadow-submenu);
    transition:
      transform 0.3s ease,
      opacity 0.3s ease,
      visibility 0s linear 0.3s;

    margin: 12px 0 0 0;

    background: var(--color-primary);

    border-radius: var(--radius-lg);

    align-items: center;
    justify-content: space-between;

    box-shadow:
      0 3px 6px rgba(0, 0, 0, 0.18),
      inset 0 1px rgba(255, 255, 255, 0.04);

    backdrop-filter: var(--globalnav-backdrop-filter);
  }

  .submenu li {
    display: block;
    margin: 0;
    line-height: normal;
  }

  .submenu li a {
    display: flex;
    padding: 9px 18px;
    font-size: 0.85rem;
    color: var(--color-white);
    white-space: nowrap;
    transition:
      background-color var(--trans-normal),
      color var(--trans-normal);

    border-radius: 30px;
    margin: 0 9px;

    align-items: center;
  }

  .submenu li a:hover {
    background-color: var(--color-primary-dark);
  }

  .submenu li a.active {
    background: var(--color-primary-light);

    color: white;

    border: solid 1px #2d5280;
    box-shadow:
      inset 0px 0px 7px rgba(0, 0, 0, 0.5),
      0 0 5px rgba(255, 255, 255, 0.1);

    font-weight: 700;

    border-radius: var(--radius-xl);

    gap: var(--sp-0);

    transition: 0.25s;
  }

  .submenu li a .nav-flag {
    margin-right: 7px;
  }

  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu {
    transform: translateX(-50%) scaleY(1);
    opacity: 0.97;
    visibility: visible;
    transition:
      transform 0.3s ease,
      opacity 0.3s ease,
      visibility 0s linear 0s;

    background: var(--globalnav-background);
    border: 1px solid var(--globalnav-background);

    backdrop-filter: var(--globalnav-backdrop-filter);
  }

  .submenu-toggle {
    display: none;
    color: var(--color-white);
  }

  .nav-line {
    height: 1px;
    background: #a09e9e;
    margin: 7px 16px;
  }

  /* =========================================================
   Tour Cards
   ========================================================= */

  .tours-grid,
  .transport-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: min(100%, 1525px);
    margin: 0 auto;
    max-width: var(--content-lg);
  }

  .tour-card,
  .transport-card {
    padding: 17px 17px 52px;
    border: 4px solid var(--card-color-border);
    border-radius: var(--card-radius);
    background: rgba(32, 74, 117, 0.1);
    box-shadow:
      inset 0 0 0 1px rgba(118, 162, 202, 0.07),
      0 12px 28px rgba(9, 36, 65, 0.18);

backdrop-filter: blur(4px) saturate(1.1);
    -webkit-backdrop-filter: var(--blur-md);

    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
  }

  .tour-card__img,
  .transport-card__img {
    position: relative;
    display: grid;
    width: 100%;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(2555,255,255,0.2);
    border-radius: var(--card-radius-img);
    background-color: none;
    margin: 0;
  }

  .tour-card__img img,
  .transport-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    margin: 0;
  }

  .tour-card__content,
  .transport-card__content {
    padding: 38px 27px 0;
    text-align: center;
  }

  .tour-card__eyebrow,
  .transport-card__eyebrow {
    display: block;
    margin-bottom: 0;
    font-size: var(--font-size-md);

    line-height: 1.2;
    color: var(--card-color-eyebrow);
  }

  .tour-card__title,
  .transport-card__title {
    margin: 0px 0 0;
    color: var(--card-color-title);
    font-size: clamp(1.75rem, 2vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
  }

  /*
    .tour-card__button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      min-height: 66px;
      padding: 0 29px;
      border-radius: 999px;
      background: var(--color-button);
      box-shadow: 0 7px 15px rgba(13, 41, 74, 0.22);
      color: var(--text-white);
      font-size: clamp(1.45rem, 2vw, 1.8rem);
      font-weight: 900;
      line-height: 1;
      text-decoration: none;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

    .tour-card__button:hover {
      filter: brightness(1.1);
      transform: translateY(-3px);
    }

    .tour-card__button:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 4px;
    }
.tour-card__arrow {
      color: var(--accent);
      font-size: 2.15rem;
      font-weight: 400;
      line-height: 1;
    }
    */

  .tour-card__description,
  .transport-card__description {
    margin: var(--sp-2) 0 0;
    color: var(--card-color-description);
    font-size: var(--font-size-md);

    line-height: 1.72;
    text-align: left;
    min-height: var(--card-description-min-height, 120px);
  }

  .grid-2col {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    max-width: var(--content-md);
  }


  .tour-details-grid {
    display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: min(100%, 1525px);
    margin: 0 auto;
    max-width: var(--content-lg);
  }


  .tour-details-column {
    min-height: 340px;
    padding: 0 22px;
  }

  .tour-details-column:first-child {
    padding-left: 0;
  }

  .tour-details-column + .tour-details-column {
    border-left: 1px solid #c7c7c7;
    padding-left: 115px;
  }

  .tour-details-column:last-child {
    padding-left: 89px;
  }
    .section-tour_help {
      max-width: var(--content-sm);
      margin: 0 auto ;
      text-align: center;
      padding-top: var(--sp-lg);
    }

    .avatar-wrap {
      position: relative;
      display: grid;
      width: 190px;
      height: 225px;
      margin: 0 auto 5px;
      place-items: center;
    }

    .avatar {
      position: relative;
      z-index: 1;
      width: 180px;
      height: 180px;
      overflow: hidden;
      
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    .button-whatsapp {
      background: var(--color-green-light);
      color: var(--color-black);
      margin-top: var(--sp-md);
    }

    .button-whatsapp .button__arrow {
      background-color: var(--color-black);
    }

    .includes {
    margin-bottom: var(--sp-md);
}
  /* ------------------------  SLIDER --------------------------- */

  @keyframes scroll {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(calc(-250px * 3));
    }
  }

  .slider {
    background: transparent;
    height: 100px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: var(--content-max);
    border-radius: 8px;
  }

  .slider::before,
  .slider::after {
    background: linear-gradient(to right, var(--color-white) 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: auto;
    position: absolute;
    width: 200px;
    z-index: 2;
  }

  .slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
  }

  .slider::before {
    left: 0;
    top: 0;
  }

  .slider .slide-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 5);
  }

  .slider .slide {
    height: auto;
    width: 250px;
    min-width: 250px;
    min-height: max-content;
  }


  /* =========================================================
   FORM
   ========================================================= */

  .form-shell {
    position: relative;
    position: sticky;
    max-width: var(--content-sm);
    margin: 0 auto;
  }

  .form-shell--blurred .form {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
    transition: filter var(--trans-slow);
  }

  .form-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--radius-md);
  }

  .form-overlay--visible {
    display: flex;
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    transition: filter var(--trans-slow);
  }

  form .field,
  .field-group {
    display: flex;
    flex-direction: column;
  }

  form .field {
    gap: var(--sp-0);
  }

  .field-group {
    gap: 0.35rem;
    margin-bottom: 1rem;
  }

  .field__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: 0.01em;
  }

  .field__required {
    color: var(--color-accent);
    margin-left: var(--sp-1);
  }

  .field--invalid .field__input {
    border-color: var(--color-error-bdr);
    box-shadow: var(--shadow-form-error);
  }

  .field__input-wrapper {
    position: relative;
  }

  .field__input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-black);
    background: var(--color-canvas);
    border: 2px solid var(--azul-negro);
    border-radius: var(--radius-sm);
    padding: var(--sp-4) var(--sp-5);
    outline: none;
    transition:
      border-color var(--trans-normal),
      box-shadow var(--trans-normal),
      background var(--trans-normal);
    -webkit-appearance: none;
    appearance: none;
    font-weight: 600;
  }

  .field__input,
  .field__input--textarea {
    display: block;
    width: 100%;
    border: 0;
    outline: 0;
    border-radius: 10px;
    background: var(--color-white);
    box-shadow: var(--shadow-input);
    color: var(--color-primary-dark);
    font: inherit;
    font-size: 1.13rem;
    transition:
      box-shadow 0.2s ease,
      transform 0.2s ease;

    border-color: var(--color-error-bdr);
  }

  /* ============= DESIGN 3 */

  .field__input,
  .field__input--textarea {
    width: 100%;
    border: none;
    outline: none;
    background: var(--input-bg);

    font-family: inherit;
    font-size: var(--font-size-md);
    color: var(--color-black);

    border-radius: var(--radius-sm);

    box-shadow: var(--shadow-form-input);

    transition: 0.25s;
  }

  .field__input {
    height: 100px;
    padding: 0 36px;
  }

  .field__input--textarea {
    min-height: 260px;
    padding: 34px 36px;
    resize: vertical;
  }

  /* ============= End  DESIGN 3 */

  /* Form Button */
  .form__button {
    max-width: fit-content;
    margin: 0 auto;
    box-shadow: inset 0px 0px 7px rgba(0, 0, 0, 0.3), 0 0 5px rgba(255, 255, 255, 0.1);    
    background: var(--globalnav-background);
    border: none;
  }

  .button-simple {
    box-shadow: inset 0px 0px 7px rgba(0, 0, 0, 0.3), 0 0 5px rgba(255, 255, 255, 0.1);    
    background: var(--globalnav-background);
    border: none;
  }
  /*.form__button {
    
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-primary);   
  
    padding:0 var(--sp-5);
    margin: 0 auto;
    margin-top:26px;

    width:208px;
    height:70px;

    border:none;
    cursor:pointer;

    border-radius:50px;

    background:var(--form-button-bg);

    color:#fff;

    font-family:inherit;
    font-size:var(--font-size-md);
    font-weight:700;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;

    transition:.3s;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.08),
        0 5px 16px rgba(39,74,120,.25);

}

.form__button:hover{

    background:var(--form-button-bg-hover);
    transform:translateY(-2px);

}*/

  .form__button svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-secondary);
    stroke-width: 2.5;
    fill: none;
  }

  .field__input:disabled {
    background: var(--color-disabled);
    color: var(--color-ink-soft);
    cursor: not-allowed;
    border-color: var(--color-border);
  }

  .field__input::placeholder {
    color: #aeaeb8;
  }

  .field__input:hover:not(:disabled) {
    border-color: var(--color-border-hover);
    background: var(--form-input-bg-hover);
  }

  .field__input:focus {
    border-color: transparent;
    background: var(--form-input-bg-focus);
    box-shadow:
      0 0 0 2px var(--azul-oscuro),
      0 0 0 3px var(--color-white),
      var(--shadow-focus);
  }

  .field__input--textarea {
    resize: vertical;
    min-height: 140px;
  }

  .field__hint,
  .form__legend {
    font-size: 0.8125rem;
    color: var(--color-ink-soft);
  }

  .field__hint {
    margin-top: calc(-1 * var(--sp-1));
  }

  .form__legend {
    margin-top: calc(-1 * var(--sp-2));
  }

  .field__error {
    display: block;
    min-height: 1em;
  }

  .field__error {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--form-error-color, #c0392b);
    margin-top: var(--sp-2);
  }

  .char-count {
    font-size: 0.75rem;
    color: #888;
    text-align: right;
  }

  input:user-invalid,
  textarea:user-invalid {
    border-color: #c0392b;
  }

  .section-contact p.container__description {
    padding-bottom: var(--sp-lg);
}

  /* Status / loading */
  .status {
    position: absolute;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    width: min(70%, 720px);
    height: 5rem;
    margin: auto;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    animation: slideDown var(--trans-slow) both;
  }

  .status[hidden] {
    display: none;
  }

  .status--success {
    background-color: rgba(26, 107, 67, 0.8);
    color: #ffffff;
  }

  .status--error {
    background-color: rgba(177, 11, 11, 0.8);
    color: #ffffff;
  }

  .status__icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1.4;
    cursor: pointer;
  }

  .status__text {
    color: #ffffff;
    text-shadow: 1px 1px 14px #000000;
  }

  .spinner,
  .cargando {
    border-radius: 50%;
  }

  .spinner {
    width: 44px;
    height: 44px;
    position: relative;
    background: conic-gradient(from 0deg,
        var(--color-accent) 0%,
        var(--color-accent-2) 50%,
        transparent 100%);
    animation: spin 0.75s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent 68%, #000 70%);
    mask: radial-gradient(farthest-side, transparent 68%, #000 70%);
  }

  .spinner::after {
    display: none;
  }

  /* Skeleton */
  .skeleton {
    position: relative;
    overflow: hidden;
    background-color: #999a9f;
    background-image: linear-gradient(#ffffff, #ffffff);
    background-size: 100% 1px;
    background-position: bottom;
    background-repeat: no-repeat;
    border: none;
  }

  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(232, 232, 232, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: translateX(-100%);
    animation: animacion-skeleton 1.5s infinite linear;
  }

  /* =========================================================
   FOOTER
   ========================================================= */
  footer {
    width: auto;
    height: auto;
    align-items: flex-start;
    background-color: var(--color-primary);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .footer__widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: var(--sp-lg) 0 var(--sp-md) 0;
  }

  .footer__address {
    flex: 1;
    text-align: center;
  }

  .footer__contact,
  .footer__nav {
    flex: 1;
    text-align: center;
  }

  .footer__heading {
    color: var(--color-white);
    font-size: var(--font-lg);
  }

  .footer__text {
    color: var(--color-white);
  }

  .footer__social {
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
    margin: 5% 0 0;
    padding: 0;
  }

  .footer__brand {
    text-align: center;
    align-items: center;
    max-width: 80%;
    margin: 0 auto;
  }

  .footer-line {
    height: 1px;
    background: #a09e9e;
    margin: 7px auto;
    max-width: 63%;
  }

  .footer__brand img {
    margin: var(--sp-md) auto;
  }

  .footer__legal {
    text-align: center;
    padding: 0 0 var(--sp-md) 0;
  }

  .footer__legal a {
    color: var(--color-white);
  }

  footer li,
  footer li a {
    color: var(--color-white);
    letter-spacing: 0.04rem;
    list-style: none;
  }

  .footer__links,
  footer address {
    margin: 0 0 3% 0;
  }

  .footer__payments p {
    color: var(--color-light-blue-gray);
  }

  .footer__text a {
    font-size: var(--font-size-md);
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }

  .center_content {
    margin: 0 auto;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* ================ COLORS ================ */
  .color-white {
    color: var(--color-white);
  }

  .color-black {
    color: var(--color-black);
  }

}

@layer overrides {
  .hero .btn--primary {
    transform: translateY(-1px);
  }

  /* =========================================================
   RESPONSIVE
   ========================================================= */
  /* desktop estandar */
  @media (max-width: 1799px) {}

  /* desktop big */
  @media (max-width: 1439px) {}

  /* tablet landscape / desktop small*/
  @media (max-width: 1199px) {}

  /* tablet portrait */
  @media (max-width: 899px) {
    .container {
      display: block;
    }

    #logo {
      padding-left: 0;
    }

    h2 {
      font-size: 1.8rem;
    }

    h3 {
      font-size: 1.5rem;
    }

    h4 {
      font-size: 1.4rem;
    }

    .status {
      width: calc(100% - 2rem);
      height: auto;
      min-height: 5rem;
    }
  }

  /* Movil */
  @media (max-width: 599px) {
    h1 {
      font-size: 2.5rem;
    }

    .btn-whatsapp {
      right: 14px;
      bottom: 20px;
    }

    /* NAVIGATION*/

    nav ul li a {
      font-size: 16px;
      color: var(--color-white);
      font-weight: 400;
    }

    ul {
      position: fixed;
      width: 100%;
      height: 100vh;
      top: 100px;
      left: -100%;
      text-align: center;
      transition: all 0.5s;
    }

    nav ul li {
      display: block;
      margin: 10px 0;
      line-height: 10px;
    }

    nav ul li a {
      font-size: 1.2rem;
    }

    #check:checked~ul {
      left: 0;
    }

    .burger {
      position: relative;
      display: block;
      cursor: pointer;
    }

    .burger span {
      padding: 1px 20px;
      background: var(--color-red-hover);
      margin: 7px 0;
      display: block;
      border-radius: 50px;
      transition: all 0.5s ease;
    }

    .nav-links {
      width: 100%;
      /*height: 100%;*/
      padding-top: 30px;
      padding-bottom: 30px;
      position: fixed;
      top: 0;
      left: 100%;
      flex-direction: column;
      align-items: center;
      transition: transform 1s ease;
      background: var(--color-dark-blue);
    }

    .menu-item-row>a>span {
      display: none;
    }

    .nav-links:not([hidden]) {
      transform: translateX(-100%);
    }

    .burger.is-open .line1 {
      transform: rotateZ(45deg) translateY(300%);
      background: var(--color-red-hover);
    }

    .burger.is-open .line2 {
      opacity: 0;
    }

    .burger.is-open .line3 {
      transform: rotateZ(-45deg) translateY(-300%);
      background: var(--color-red-hover);
    }

    /* Submenu mobile */
    .submenu {
      position: static;
      transform: scaleY(0);
      transform-origin: top center;
      opacity: 0;
      visibility: hidden;
      max-height: 0;
      overflow: hidden;
      border-top: none;
      border-left: 2px solid var(--color-red);
      min-width: 100%;
      padding: 0;
      margin: 0;
      transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        max-height 0.4s ease,
        visibility 0s linear 0.3s;
    }

    .has-submenu:hover .submenu,
    .has-submenu:focus-within .submenu {
      transform: scaleY(0);
      opacity: 0;
      visibility: hidden;
      max-height: 0;
      transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        max-height 0.4s ease,
        visibility 0s linear 0.3s;
    }

    .has-submenu.is-open .submenu {
      transform: scaleY(1);
      opacity: 1;
      visibility: visible;
      max-height: 600px;
      padding: 0;
      transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        max-height 0.4s ease,
        visibility 0s linear 0s;
    }

    .menu-item-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .submenu-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      font-size: 1.25rem;
      line-height: 1;
      padding: 0.25rem 0.5rem;
      width: auto;
      margin: 0;
      border-radius: 0;
      letter-spacing: 0;
    }

    .submenu-toggle:hover {
      color: var(--rojo-hov);
      background: transparent;
    }

    .submenu li a {
      font-size: 0.8rem;
      padding: 8px 24px;
      color: var(--azul-gris-claro);
    }

    p {
      font-size: 1rem;
      color: var(--azul-negro);
    }

    footer {
      display: block;
    }
  }

  /* 18. Respeto a preferencias de movimiento reducido — CRÍTICO para accesibilidad */
  @media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}