/* Style CSS*/

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

@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;
    --color-blue-gray: #86a2c9;


    /* Modern palette */
    --color-ink: #1a1a2e;
    --color-ink-mid: #3d3d5c;
    --color-ink-soft: #7b7b9a;
    --color-border: #d8d6f0;
    --color-border-hover: #2142b1;

    --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;





    --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;

    /* 2px */
    --sp-0: 0.125rem;
    /* 4px */
    --sp-1: 0.25rem;
    /* 8px */
    --sp-2: 0.5rem;
    /* 12px */
    --sp-3: 0.75rem;
    /* 16px */
    --sp-4: 1rem;
    /* 20px */
    --sp-5: 1.25rem;
    /* 24px */
    --sp-6: 1.5rem;
    /* 32px */
    --sp-8: 2rem;
    /* 40px */
    --sp-10: 2.5rem;
    /* 48px */
    --sp-12: 3rem;

    /* Radius */
    /* 6px */
    --radius-sm: 0.375rem;
    /* 12px */
    --radius-md: 0.75rem;
    /* 20px */
    --radius-lg: 1.25rem;
    /* 30px */
    --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:
      0 3px 6px rgba(0, 0, 0, 0.18),
      inset 0 1px rgba(255, 255, 255, 0.04);
    --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;
    /* 1150px */
    --nav-width: 70rem;

    /* 400px */
    --content-xs: 25rem;
    /* 640px */
    --content-sm: 40rem;
    /* 920px */
    --content-md: 57.5rem;
    /* 1280px */
    --content-lg: 80rem;
    /* 1560px */
    --content-xl: 97.5rem;
    /* 1920px */
    --content-max: 120rem;

    /* Compatibility aliases used by existing component blocks */
    --text-base: 1rem;
    --space-4: 1rem;
    --space-xs: 0.5rem;
    --text-sm: 0.875rem;
    --dur-fast: 150ms;
    --ease-liquid: ease;
    --text-white: var(--color-white);
    --font-lg: var(--font-size-lg);
    --accent: var(--color-accent);

    /* FAQ */
    --faq-background: rgba(255, 255, 255, 0.7);
    --faq-text: #1f2937;
    --faq-muted: #4b5563;
    --faq-title: #111827;
    --faq-border: rgba(0,0,0,0.06);
    --faq-border-hover: rgba(0,0,0,0.2);
    --faq-icon: #9ca3af;
    --faq-focus: #5b9bd5;

    /* 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-white);
    --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);
    --form-input-padding: 0.75rem 1rem;
    --form-input-border-radius: 0.375rem;
    --form-input-border-width: 2px;
  }

  @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;
  }

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

  @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;
  }

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

@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;
  }
}

@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;
  }

  /* 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);
  }

  /* 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);
  }

  a:focus-visible,
  .field__input:focus-visible,
  .field__input--textarea:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
  }

  /* 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 {
    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;
    font-size: clamp(1.75rem, 3vw, 2rem);
    padding-bottom: var(--sp-3);
    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-lg);
    letter-spacing: 0.5px;
  }

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

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

  /* =========================================================
   ACCESSIBILITY
   ========================================================= */
  .skip-link {
    position: absolute;
    top: -49px;
    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: 6px;
    min-height: 48px;
    padding: 12px 40px;
    border-radius: 999px;
    background: #1a315569;

    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-lg);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition:
      transform 180ms ease,
      background 180ms ease,
      filter 180ms ease;

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

  }

  .button:hover,
  button:hover {
    background: #163858;
    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%)
  }

  /* --------------------------------------------------------------------------
       7. GLASS UTILITY CLASSES
       -------------------------------------------------------------------------- */
  :root {
    /* ── Glass surface tints ── */
    --glass-white-solid: rgba(255, 255, 255, 0.12);
    --glass-white: linear-gradient(105deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(0, 0, 0, 0.03) 40%,
        rgba(255, 255, 255, 0.08) 60%,
        rgba(0, 0, 0, 0.03) 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);
    --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 {

    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    background: var(--glass-white);

    /* Arriba */
    border-top: 1px solid var(--glass-border);

    /* Derecha */
    border-right: 1px solid var(--glass-border);

    /* Abajo */
    border-bottom: 1px solid var(--glass-border);

    /* Izquierda */
    border-left: 1px solid var(--glass-border);

    box-shadow: var(--shadow-glass);
    box-shadow:
      /* Izquierda */
      -3px 0 3px -2px rgba(0, 0, 0, 0.28),

      /* Derecha */
      3px 0 3px -2px rgba(0, 0, 0, 0.28),

      /* Arriba */
      0 2px 3px -2px rgba(0, 0, 0, 0.28),

      /* Abajo */
      0 3px 3px -2px rgba(0, 0, 0, 0),

      /* Brillo interno superior opcional */
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
  }

  .glass::before {
    content: "";
    position: absolute;
    inset: 0;

    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 {
  .section {
    display: block;
    width: auto;
    height: auto;
    align-items: center;

    margin: auto;
    margin-inline: auto;
  }

  .section-container {
    max-width: var(--content-max, 97.5rem);
    margin: 0 auto;
    padding: 0;

  }

  .section ul {
    padding-left: 2rem;

  }

  .grid-1-2 {
    display: flex;
    /* grid-template-columns: minmax(410px, 562px) minmax(600px, 1fr); */
    flex: 1 1 auto;
    gap: 1rem;
  }

  .grid-2-1 {
    display: flex;
    /* grid-template-columns: minmax(600px, 1fr) minmax(410px, 562px); */
    flex: 1 1 auto;
    gap: 1rem;
  }

  .grid-1-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
  }

  .section-box {
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);

  }

  .section__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);
  }

  .section__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;
  }

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

    position: relative;
  }

  .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,
  .section-theme-light strong,
  .section-theme-light em,
  .section-theme-light b,
  .section-theme-light i {
    color: var(--color-white);
  }

  .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,
  .section-theme-dark strong,
  .section-theme-dark em,
  .section-theme-dark b,
  .section-theme-dark i {
    color: var(--color-primary-dark);
  }


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

    position: sticky;

    top: var(--nav-height);

    height: auto;

    overflow: hidden;
    z-index: -1;

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

  .hero img {
    margin: 0 auto var(--sp-md) auto;
    width: auto;
    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);

    margin: 0 auto;
  }

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

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

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

  .section-daytours {
    text-align: center;
    border-radius: var(--radius-xl) var(--radius-xl) 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: sticky;
    padding: var(--sp-xl) 0 var(--sp-xl) 0;
    text-align: center;
  }

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

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

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

    padding: 0 0 var(--sp-xl) 0;

    gap: 1rem;
  }

  .section-packages .section-container,
  .section-buceo .section-container {
    width: 96%;
  }

  .section-packages__content,
  .section-packages__image {

    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: 16px 16px 250px 16px;
    width: 40%;
  }

  .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;
    width: 60%;
  }

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





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

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

    padding: 0 0 var(--sp-xl) 0;

  }

  .section-buceo__content,
  .section-buceo__image {

    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: 16px 16px 250px 16px;
    width: 40%;
  }

  .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;
    width: 60%;
  }

  .section-packages__image picture,
  .section-buceo__image picture {

    height: 100%;

  }

  .section-buceo__image img {
    width: 100%;
    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-xl) var(--radius-xl);

    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 .section-container {
    text-align: center;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--sp-xl) 0 var(--sp-xl) 0;
    background: rgba(0, 0, 0, 0.07);
    background: var(--glass-white);
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(0, 0, 0, 0.05) 40%,
        rgba(255, 255, 255, 0.08) 60%,
        rgba(0, 0, 0, 0.05) 100%);
  }

  .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-lg) var(--radius-lg);
    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-featured-tours .section__description {
    max-width: var(--content-sm);
  }

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

    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    padding: var(--sp-xl) 0 var(--sp-xl) 0;

  }

  .section-itinerary {

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

  }

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

  }

  .section-itinerary__details h2 {

    font-weight: 700;
    font-size: 36px;
  }

  .section-featured-image img {

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

  }

  .itinerary-gallery,
  .section-itinerary__content {
    max-width: var(--content-max);
    margin: 0 auto;
  }

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

  .itinerary-stop__body {
    max-width: var(--content-lg);
    margin: 0px auto var(--sp-md) auto;

  }

  .itinerary-stop__body,
  .section-itinerary__details {
    padding: 0 7% 0 7%;
  }

  .itinerary-gallery__secondary {
    display: flex;
    width: 100%;
    gap: .7rem;
    padding-top: .7rem;
  }



  .itinerary-gallery__image {
    width: 100%;

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

  .itinerary-gallery__secondary img {
    width: 50%;
  }

  .itinerary-gallery-v {
    display: flex;
    width: 100%;
    gap: .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;
  }



  /* ------------ SECTION FAQs ----------------------------- */

  .section-faq {
    padding: var(--sp-xl) 16px;
    background: var(--color-white);
  }

  .section-faq__container {
    width: min(100%, 760px);
    margin: 0 auto;
  }

  .section-faq__title {
    margin: 0 0 var(--sp-sm) 0;
    text-align: center;
  }

  .section-faq__item {
    margin-bottom: 18px;
    overflow: hidden;
    background: var(--faq-background);
    border: 1px solid var(--faq-border);
    border-radius: 16px;
    box-shadow: inset 3px 3px 11px rgba(0,0,0,0.1);
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease,
      transform 0.3s ease;

  }

  .section-faq__item:hover {
    border-color: var(--faq-border-hover);
    box-shadow: inset 3px 3px 11px rgba(0,0,0,0.2), 0 5px 14px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
  }

  .section-faq__item--open {
    border-color: var(--faq-border-hover);
  }

  .section-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: transparent;
    color: var(--faq-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition:
      color 0.25s ease,
      background-color 0.25s ease,
      padding 0.4s ease;
  }

  /* .section-faq__question:hover {
    background-color: #fafafa;
  } */

  .section-faq__question:focus-visible {
    outline: 3px solid var(--faq-focus);
    outline-offset: -3px;
  }

  .section-faq__item--open .section-faq__question {
    padding-bottom: 14px;
    color: var(--faq-title);
  }

  .section-faq__icon {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--faq-icon);
    border-radius: 50%;
  }

  .section-faq__icon::before,
  .section-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--faq-icon);
    transform: translate(-50%, -50%);
  }

  .section-faq__icon::before {
    width: 10px;
    height: 1.5px;
  }

  .section-faq__icon::after {
    width: 1.5px;
    height: 10px;
    transition:
      opacity 0.25s ease,
      transform 0.25s ease;
  }

  .section-faq__item--open .section-faq__icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .section-faq__answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      max-height 0.45s ease,
      padding 0.45s ease,
      opacity 0.3s ease,
      transform 0.45s ease,
      visibility 0.45s ease;
  }

  .section-faq__item--open .section-faq__answer {
    max-height: 500px;
    padding: 0 24px 22px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .section-faq__answer p {
    max-width: 95%;
    margin: 0;
    color: var(--faq-muted);
    font-size: 16px;
    line-height: 1.8;
  }


}

@layer components {

  /* ============= HEADER =============== */
  .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: var(--nav-width, 71rem);
    height: var(--nav-height);
    margin: 6px auto 0 auto;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    padding: 0;
    background: var(--globalnav-background);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid var(--glass-border);

  }

  .header-container {
    width: 100%;
    min-width: var(--content-sm);
    margin: 0 auto;
    display: contents;
    align-items: center;
  }

  nav,
  #main-navigation {
    display: grid;
    align-items: center;
    min-height: var(--nav-height);
    z-index: 99;
    position: static;
    inset: 0 0 auto 0;
    min-width: 720px;
    padding-right: 0.7rem;
  }

  .site-logo {
    width: 100%;
    max-width: 112px;
    height: auto;
    margin: 0px 22px 0px 22px;

  }

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

  .nav-links li {
    list-style: none;
  }

  .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);
    min-width: max-content;
  }

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

  }



  .menu-item-row>a:focus-visible {
    opacity: 1;
    color: var(--color-white);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* 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>svg,
  .submenu-toggle>svg {
    font-size: 13px;
    opacity: 0.85;
    margin-bottom: 0rem;
    margin-left: 0.3rem;
  }

  .menu-item-row>a:hover svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

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

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


    transition:
      transform 0.3s ease,
      opacity 0.3s ease,
      visibility 0s linear 0.3s;

    margin: 12px 0 0 0;

    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);

    background: var(--globalnav-background);
    border: 1px solid var(--globalnav-background);
    border-top: 2px solid var(--color-accent);

    backdrop-filter: var(--globalnav-backdrop-filter);
    -webkit-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:focus-visible {
    background-color: var(--color-primary-dark);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .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;



  }

  .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));

    row-gap: var(--sp-md);
    column-gap: var(--sp-sm);
    width: min(90%, 1525px);
    margin: 0 auto;
    max-width: var(--content-lg);
  }

  .tour-card,
  .transport-card {
    padding: 17px 17px var(--sp-md) 17px;
    border: 4px solid var(--card-color-border);
    border-radius: var(--radius-lg);
    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-radius: var(--card-radius-lg, 16px);
    background-color: transparent;
    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: var(--sp-0);
    font-size: var(--font-size-md);
    line-height: 1.2;
    color: var(--card-color-eyebrow);
  }

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

  .tour-card-list {
    padding-left: 1.25rem;
    padding-top: var(--sp-sm);
    max-width: 18rem;
    margin: 0 auto;
    text-align: left;
  }

  .tour-card-list li {
    list-style: none;
  }

  .tour-card-list li a {
    color: var(--color-blue-gray);
  }

  .tour-card-list li::after {
    content: " →";
    color: var(--color-blue-gray);
    font-size: 1.4rem;
  }

  .tour-card-list li a:hover {
    color: var(--color-white);
  }

  /*
    .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: 9%;
  }

  .tour-details-column:last-child {
    padding-left: 9%;
  }

  #help-title {
    font-size: 1.5rem;
    font-weight: 700;
    padding-bottom: var(--sp-sm);
  }

  .section-tour_help__description {
    padding-bottom: var(--sp-md);
    max-width: var(--content-xs);
    margin: 0 auto;
  }


  .tour-details-list {

    padding-left: 1.25rem;
    margin-top: var(--sp-md);
  }

  .tour-details-list li {
    margin-bottom: 0.75rem;
  }

  .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;
  }

  .tour-details__avatar {
    position: relative;
    z-index: 1;
    width: 180px;
    height: 180px;
    overflow: hidden;
    margin-bottom: var(--sp-md);
  }

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

  .button-whatsapp {
    background: var(--color-green-light);
    color: var(--color-black);

  }

  .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: auto;
    padding: 0 5rem;
    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__input-wrapper {
    position: relative;
  }

  .field__input,
  .field__input--textarea {
    display: block;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: var(--color-white);
    font-family: inherit;
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--color-black);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-input);
    -webkit-appearance: none;
    appearance: none;
    font-weight: 600;
    transition:
      border-color var(--trans-normal),
      box-shadow var(--trans-normal),
      background var(--trans-normal),
      transform 0.2s ease;
  }

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

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

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

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

  /* Form Button */
  .form__button,
  .button-simple {
    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;
  }

  .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--textarea:disabled {
    background: var(--color-disabled);
    color: var(--color-ink-soft);
    cursor: not-allowed;
    border-color: var(--color-border);
  }

  .field__input::placeholder,
  .field__input--textarea::placeholder {
    color: #aeaeb8;
  }

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

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

  .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;
    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.section__description {
    padding-bottom: var(--sp-md);
  }

  /* 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-primary-light) 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;
    max-width: var(--content-lg);
    margin: 0 auto;
  }

  .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 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;
  }

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

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

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

  /* ================ PADDING TOP ================ */
  .ptop-0 {
    padding-top: 0;
  }

  .ptop-xs {
    padding-top: var(--sp-xs);
  }

  .ptop-sm {
    padding-top: var(--sp-sm);
  }

  .ptop-md {
    padding-top: var(--sp-md);
  }

  .ptop-lg {
    padding-top: var(--sp-lg);
  }

  .ptop-xl {
    padding-top: var(--sp-xl);
  }

  .ptop-xxl {
    padding-top: var(--sp-xxl);
  }

}

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

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

  /* large desktop */
  @media (max-width: 1450px) {

    .section-daytours {
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
  }

  /* desktop */
  @media (max-width: 1199px) {

    .section-about {
      border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md);
    }

    .section-daytours {
      border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    .tours-grid,
    .transport-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: var(--content-md);
    }


  }

  /* tablet portrait */
  @media (max-width: 960px) {
    .tour-details-column:first-child {
      padding: var(--sp-md) 0 var(--sp-md) 6%;
      width: 81%;
      margin: 0 auto;
    }

    .section-featured-image img {

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

    }

    .section-packages__image {
      border-radius: 16px 16px 260px 45px;
    }

    .section-packages__content {
      border-radius: 45px 250px 16px 16px;
    }

    .section-buceo__content {
      border-radius: 16px 45px 16px 250px;
    }

    .section-buceo__image {

      border-radius: 260px 16px 45px 16px;
    }

    .grid-1-2,
    .grid-2-1 {
      display: block;
    }

    .section-packages__content,
    .section-packages__image,
    .section-buceo__content,
    .section-buceo__image {

      width: 100%;
      min-height: 34rem;
      max-height: 34rem;
      margin-bottom: var(--sp-4);
    }

    nav,
    #main-navigation {
      width: 98%;

      min-width: auto;
    }

    .menu-item-row {

      padding: 0;
    }

    .menu-item-row.active {
      padding: 0.01rem 0.7rem;
    }

    .section {
      display: block;
    }

    .section-contact {
      padding: var(--sp-lg) 0;
    }

    .section-contact p.section__description {
      padding-bottom: var(--sp-md);
    }

    .form-shell {
      max-width: 100%;
      padding-inline: var(--sp-4);
      width: 80%;
    }

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

    .field__input {
      height: 4.5rem;
      padding: 0 1.25rem;
    }

    .field__input--textarea {
      min-height: 13rem;
      padding: 1.25rem;
    }

    #logo {
      padding-left: 0;
    }


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


  }

  /* tablet landscape */
  @media (max-width: 810px) {


    .tour-details-grid {
      display: block;
    }

    .itinerary-gallery__secondary img {
      width: 100%;
      margin-bottom: var(--sp-3);
    }

    .itinerary-gallery__secondary {
      display: block;
    }

    .itinerary-gallery-v {
      display: block;
      width: 100%;
    }

    .itinerary-gallery__main-v {
      width: 100%;
    }

    .itinerary-gallery__secondary-v {
      display: block;
      width: 100%;
      margin-bottom: var(--sp-3);
    }

    .tour-details-column+.tour-details-column {
      border-top: 1px solid #c7c7c7;
      border-left: none;
      width: 81%;
      padding: var(--sp-md) 0 var(--sp-md) 6%;
      margin: 0 auto;
    }

    .tour-details-column:last-child {
      width: 81%;
      margin: 0 auto;
      padding: var(--sp-md) 0 0 6%;
    }

    .tour-details-column {
      min-height: auto;

    }

     .itinerary-gallery__main-v img,
  .itinerary-gallery-v img {
    margin-bottom: var(--sp-3);

  }



    footer {
      border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    .footer__widgets {
      display: block;
    }

    .footer__address,
    .footer__contact,
    .footer__nav {
      margin-bottom: var(--sp-md);
    }

    .section-about,
    .section-partners .section-container {
      border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md);
    }

    .section-transport {

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

    .section-packages__image {
      border-radius: 16px 16px 128px 45px;
    }

    .section-packages__content {
      border-radius: 45px 128px 16px 16px;
    }

    .section-buceo__content {
      border-radius: 16px 45px 16px 128px;
    }

    .section-buceo__image {

      border-radius: 128px 16px 45px 16px;
    }

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

    .section-partners .section-container {

      padding: var(--sp-xl) 0 var(--sp-lg) 0;
    }

    /* NAVIGATION*/

    nav,
    #main-navigation {

      min-width: auto;
    }

    #main-navigation ul li {
      display: block;
      margin: 10px 0;
      line-height: 10px;
    }

    #main-navigation ul li a {
      font-size: 1.2rem;
      color: var(--color-white);
      font-weight: 400;
      display: inline-block;
      padding: 0.75rem 1rem;
      line-height: 1.35;
    }

    .burger {
      position: absolute;
      right: 0;
      display: block;
      cursor: pointer;
      background: transparent;
      box-shadow: none;
    }

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

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

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

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

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

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

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

    /* 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;
    }

    .has-submenu.is-open .submenu-toggle svg {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }



    .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;
      box-shadow: none;
    }

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

    .submenu-toggle:focus-visible {
      color: var(--color-red-hover);
      background: transparent;
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }

    .menu-item-row>a>svg,
    .submenu-toggle>svg {
      font-size: 28px;
    }

    .submenu li a {
      font-size: 0.95rem;
      padding: 10px 24px;
      line-height: 1.4;
      color: var(--color-text-soft);
    }
  }

  /* mobile */
  @media (min-width: 600px) and (max-width: 1199px) {
    .tours-grid>.tour-card:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      width: calc((100% - var(--sp-4)) / 2);
      justify-self: center;
    }

    .tours-grid>.tour-card:last-child:nth-child(odd),
    .transport-grid>.transport-card:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      width: calc((100% - var(--sp-4)) / 2);
      justify-self: center;
    }
  }

  @media (max-width: 599px) {

    .section-faq {
      padding: 32px 16px 60px;
    }

    .section-faq__title {
      margin-bottom: 24px;
      font-size: 24px;
    }

    .section-faq__question {
      padding: 18px;
      font-size: 15px;
    }

    .section-faq__answer {
      padding: 0 18px;
    }

    .section-faq__item--open .section-faq__answer {
      padding: 0 18px 18px;
    }

    .section-faq__answer p {
      max-width: 100%;
      font-size: 15px;
      line-height: 1.7;
    }

    .header-container {

      min-width: 98%;
    }

    .nav-links {
      display: block;
    }


    .tours-grid,
    .transport-grid {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    h1 {
      font-size: 2.5rem;
    }

    .section-contact {
      padding: var(--sp-lg) 0;
    }

    .form-shell {
      padding-inline: var(--sp-3);
    }

    .field__label {
      font-size: 0.8125rem;
    }

    .field__input {
      height: 4rem;
      padding: 0 1rem;
      font-size: 1rem;
    }

    .field__input--textarea {
      min-height: 11rem;
      padding: 1rem;
      font-size: 1rem;
    }

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


    .section p {
      font-size: 1rem;
    }

    footer {
      display: block;
    }

    .hero img {
      width: 98%;
    }
  }
}