/* ============================================================
   SECCIÓN: HERO (slider principal)
   ============================================================ */

.hero {
  width: 100%;
  background-color: #fff;
  padding: 24px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.hero-title {
  font-family: var(--font-family-simonetta);
  /* En móvil baja a 28px: con 34 ocupaba tres líneas y dejaba a la mariposa
     en 296px, demasiado pequeña. A 28 entra en dos líneas equilibradas y le
     cede 60px. Desde tablet se recupera el tamaño de siempre. */
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 16px;
}

.hero-subtitle {
  font-family: var(--font-family-figtree);
  font-size: clamp(24px, 5vw, 35px);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  margin-bottom: 12px;
}

.hero-description {
  font-family: var(--font-family-poppins);
  font-size: clamp(16px, 4vw, 28px);
  font-weight: var(--font-weight-regular);
  color: var(--color-paragraph);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Hero buttons */
.hero-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Medidas mínimas, no fijas: con ancho y alto clavados, una etiqueta más
   larga que la original ("Contacta con nosotros") se partía en dos líneas y
   se salía por debajo de la píldora. Así el botón crece con su texto y
   conserva el tamaño de siempre cuando el texto es corto. */
.btn-primary, .btn-secondary {
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 32px;
  font-family: var(--font-family-outfit);
  font-weight: var(--font-weight-semibold);
  font-size: 20px;
  min-width: 230px;
  min-height: 52px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-teal-dark);
}

/* Slider */
.hero-slider-wrapper {
  position: relative; /* referencia de las flechas y los dots, superpuestos */
  width: 100%;
  overflow: hidden;
}

.hero-slider {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
  flex: 1;
  /* la variable la reutiliza el slide 1 para dimensionar la mariposa */
  --hero-slider-height: clamp(380px, 40vw, 680px);
  /* Banda inferior que ocupan los controles superpuestos. Los tres slides
     la reservan para no meter contenido debajo de flechas y dots. Va holgada
     a propósito: ajustada al alto de los controles, los dots quedaban pegados
     al botón "Descubre más" del slide 1. */
  --hero-controls-space: 82px;
  /* La altura la marca el slide 1, que es el que está en el flujo, con
     --hero-slider-height como mínimo: si el texto necesita más, el slider
     crece y nada queda recortado */
  height: auto;
  touch-action: pan-y;
}

.heroslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
}

.heroslide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.heroslide img,
.heroslide video {
  width: 100%;
  object-fit: cover;
  object-position: center top;
}

/* =====================
   SLIDE 1 (contenido único por grid)
   Móvil: texto, mariposa y botones apilados
   Tablet: texto arriba, y mariposa+descripción en fila con los botones debajo
   Escritorio: columna de texto a la izquierda y mariposa a la derecha

   Es el único slide en el flujo: da la altura al slider y los slides 2 y 3,
   absolutos, lo cubren entero. Por eso el texto vive aquí en los tres
   tamaños; cuando estaba fuera del slider en móvil y tablet, los otros
   slides no lo tapaban (era la duplicación asumida en D-014).
===================== */
.heroslide--first {
  position: relative; /* da la altura real al slider */
  min-height: var(--hero-slider-height);
  /* En móvil el hero tiene que caber en pantalla junto con la cabecera: con
     el texto dentro (D-026) se pasaba de 50 a 60px en un móvil de 873px de
     alto, y bastante más con la barra del navegador a la vista. Se acota al
     alto real disponible (dvh, que sí descuenta esa barra) menos los 63px de
     la cabecera en móvil y los 48px de padding del propio hero. El suelo de
     520px evita que en pantallas muy bajas la mariposa quede aplastada:
     antes que eso, que la página haga scroll. */
  max-height: max(520px, calc(100vh - 111px));
  max-height: max(520px, calc(100dvh - 111px));
  display: grid; /* sustituye al flex de .heroslide */
  grid-template-columns: 100%;
  grid-template-areas:
    "subtitulo"
    "titulo"
    "mariposa"
    "botones";
  /* La mariposa es la que cede: su fila absorbe lo que sobra y encoge cuando
     falta sitio, para que el texto y los botones no se recorten nunca */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: center;
  justify-items: center;
  row-gap: 16px;
  text-align: center;
  padding-bottom: var(--hero-controls-space);
}

.hero-slide-subtitle {
  grid-area: subtitulo;
}

.hero-slide-title {
  grid-area: titulo;
}

.hero-slide-buttons {
  grid-area: botones;
}

/* La descripción no cabe en móvil: entra desde tablet */
.hero-slide-description {
  display: none;
}

/* Mariposa flotante. Selector compuesto a propósito: debe ganar a
   ".heroslide img" (para eso servía el antiguo !important) */
.heroslide--first .mariposa-cristal {
  grid-area: mariposa;
  /* El 80% anterior la limitaba por ancho, así que el hueco que dejaba el
     titular no lo aprovechaba: en pantallas altas se quedaba igual de
     pequeña por más sitio que hubiera */
  width: 94%;
  /* Llena su fila, que es la que absorbe el sobrante: así se adapta sola al
     alto que quede en cada móvil, sin deformarse (contain) */
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 10px 0;
}


/* =====================
   SLIDE 2 (cita sobre la imagen)
   Móvil: bloque a ancho completo sobre la foto vertical
   Tablet/escritorio: mitad izquierda, según docs/design/hero2.png
===================== */
/* Solo cambia el display: la posición absoluta de .heroslide se conserva.
   Ponerlo en relative lo devolvía al flujo y partía el slider en columnas. */
.heroslide--quote {
  display: block;
}

/* Las tres capas del slide: foto, velo y cita. Sin z-index explícito, la
   foto se pintaría sobre el velo por ir después en el marcado. */
.heroslide__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Selector de dos clases: debe ganar a ".heroslide img" */
.heroslide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo de legibilidad. No está en el mockup: el fondo definitivo es más
   claro que el suyo y la espuma dejaba el texto blanco en 1,1:1. Las
   opacidades son las mínimas medidas que cumplen AA en toda la zona de
   texto: aquí en móvil, donde el texto no llega a 24px y el mínimo exigido
   es 4,5:1; algo menos desde tablet, donde pasa de 24px y le basta 3:1. */
.heroslide--quote::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(6, 52, 66, 0.67) 0%,
    rgba(6, 52, 66, 0.66) 72%,
    rgba(6, 52, 66, 0.3) 100%
  );
}

.hero-quote {
  position: relative;
  z-index: 2; /* sobre el velo */
  height: 100%;
  margin: 0;
  /* el hueco de abajo lo reservan las flechas y los dots */
  padding: 20px 20px var(--hero-controls-space);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "comillas autor"
    "texto    texto"
    "boton    boton";
  align-content: center;
  justify-content: start;
  column-gap: 14px;
  row-gap: 18px;
}

.hero-quote__mark {
  grid-area: comillas;
  align-self: center;
  width: clamp(52px, 15vw, 116px);
  height: auto;
  color: var(--color-teal-light);
}

.hero-quote__author {
  grid-area: autor;
  align-self: center;
  font-family: var(--font-family-pangolin);
  font-size: clamp(17px, 4.4vw, 28px);
  font-style: normal; /* <cite> viene en cursiva por defecto */
  color: #fff;
}

.hero-quote__text {
  grid-area: texto;
  margin: 0;
  font-family: var(--font-family-simonetta);
  font-size: clamp(19px, 5vw, 35px);
  line-height: 1.32;
  text-transform: uppercase; /* el texto va en minúsculas en el HTML: se lee mejor en el código y en los lectores de pantalla */
  color: #fff;
}

/* Botón de los slides 2 y 3: misma píldora, distinto color según el fondo */
.hero-slide-cta {
  padding: 11px 20px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-family-outfit);
  font-weight: var(--font-weight-bold);
  font-size: clamp(14px, 3.4vw, 19px);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.hero-slide-cta:hover,
.hero-slide-cta:focus-visible {
  background-color: #fff;
  transform: translateY(-2px);
}

.hero-slide-cta--sand {
  grid-area: boton;
  justify-self: start;
  background-color: var(--color-surface-sand);
  color: var(--color-text);
}

.hero-slide-cta--ice {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

/* Los saltos del diseño solo desde tablet: a 4 líneas fijas no cabe en móvil */
.br-quote {
  display: none;
}

/* =====================
   SLIDE 3 (logotipo y CTA sobre el vídeo)
   Proporciones de docs/design/hero3.png, medidas sobre sus 1192px de ancho
===================== */
.heroslide--video {
  display: grid; /* sustituye al flex de .heroslide */
  align-content: center;
  justify-items: center;
  /* separación logo-botón del mockup (61px sobre sus 574 de alto). En % no
     sirve: un row-gap porcentual con altura indefinida se resuelve a 0. */
  row-gap: clamp(24px, 6vw, 62px);
  padding: 20px 20px var(--hero-controls-space);
}

/* Selector de dos clases: debe ganar a ".heroslide video", que fija el
   object-position para el resto */
.heroslide--video .heroslide__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El vídeo es muy apaisado (1920x922) y hasta escritorio la caja es mucho
     más estrecha, así que se recorta de lado. Anclado a la izquierda se ve
     esa franja entera; el logotipo y el CTA siguen centrados porque van en
     otra capa. */
  object-position: left center;
}

/* Selector de dos clases a propósito: ".heroslide img" le impone
   height:100% + object-fit:cover y lo estiraba */
.heroslide--video .hero-video__logo {
  position: relative;
  z-index: 1;
  width: min(62%, 300px);
  height: auto;
  object-fit: contain;
}

.hero-slide-cta--ice {
  position: relative;
  z-index: 1;
}

/* Interruptor de sonido. Obligatorio, no decorativo: si el vídeo suena solo,
   hace falta una forma de callarlo (WCAG 1.4.2). */
.hero-video__sound {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;

  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  cursor: pointer;

  background-color: rgba(28, 65, 98, 0.5);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.3s ease;
}

.hero-video__sound:hover,
.hero-video__sound:focus-visible {
  background-color: rgba(28, 65, 98, 0.8);
}

.hero-video__icon {
  grid-area: 1 / 1; /* apilados: se muestra uno u otro según el estado */
  width: 20px;
  height: 20px;
}

/* Etiqueta solo para lectores de pantalla: el estado lo lleva aria-pressed */
.hero-video__sound-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero-video__icon--on,
.hero-video__sound[aria-pressed="true"] .hero-video__icon--off {
  display: none;
}

.hero-video__sound[aria-pressed="true"] .hero-video__icon--on {
  display: block;
}

/* =====================
   CONTROLES DEL SLIDER
   Superpuestos a los slides, con el aspecto de siempre (teal, sin fondo).
   El color lo decide el slide visible, que marca js/hero-slider.js con
   .is-slide-N sobre el contenedor: teal sobre el blanco del slide 1,
   blanco sobre la foto del 2 y sobre el vídeo del 3.
===================== */
.slider-arrow {
  /* En móvil van abajo, flanqueando los dots: a media altura chocarían con
     la cita, que ahí ocupa todo el ancho. Desde tablet suben a los lados,
     como en el mockup. */
  position: absolute;
  bottom: 6px;
  z-index: 2;

  width: 40px;
  height: auto;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.arrow-left {
  left: 16px;
}

.arrow-right {
  right: 16px;
}

.slider-arrow svg {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
}

/* Color de las flechas: lo pide el fondo que tienen debajo, medido sobre el
   render. Van en línea (no como <img>) justamente para poder colorearlas.
   Sobre el blanco del slide 1, el teal de marca se queda en 2,97:1; el teal
   oscuro sube a 4,70:1 sin salirse de la paleta. */
.slider-arrow {
  color: var(--color-teal-dark);
}

/* Slide 2: el teal de siempre en las dos. La derecha cae sobre la arena
   clara y se queda en 1,5:1; decisión de la propietaria, que prefiere el
   color original del dibujo al contraste (D-023). */
.is-slide-2 .slider-arrow {
  color: var(--color-accent);
}

/* Slide 3: vídeo oscuro */
.is-slide-3 .slider-arrow {
  color: #fff;
}

/* Slider dots / elipses */
.slider-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.dot {
  width: 12px;
  height: 12px;
  border: none;
  padding: 0;
  border-radius: 50%;
  background-color: var(--color-accent);
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.dot:hover {
  transform: scale(1.2);
}

.active-dot {
  transform: scale(1.4);
  opacity: 1;
  background-color: var(--color-accent);
}

/* Sobre la foto y sobre el vídeo, los dots teal se pierden */
.is-slide-2 .dot,
.is-slide-3 .dot,
.is-slide-2 .active-dot,
.is-slide-3 .active-dot {
  background-color: #fff;
}

@media (min-width: 768px) {

  .br-quote {
    display: inline;
  }

  /* =====================
    SLIDE 2: cita en la mitad izquierda (proporciones de hero2.png,
    medidas sobre sus 1194px de ancho)
  ===================== */

  /* El velo pasa a horizontal: se apaga antes de la mitad derecha, donde
     no hay texto. Mantiene >=0,52 en toda la banda que ocupa la cita. */
  .heroslide--quote::before {
    background: linear-gradient(
      90deg,
      rgba(6, 52, 66, 0.62) 0%,
      rgba(6, 52, 66, 0.58) 66%,
      rgba(6, 52, 66, 0.26) 78%,
      rgba(6, 52, 66, 0) 88%
    );
  }

  .hero-quote {
    /* Las comillas vuelan un 3% a la izquierda del texto, como en el mockup.
       El 6,8% es su sangrado; el suelo de 72px lo impone la flecha, que
       conserva su tamaño de siempre (40-50px) y es proporcionalmente mucho
       mayor que la del mockup: por debajo de ~1060px de slider se le montaba
       encima. */
    padding: 0 0 0 max(72px, 6.8%);
    column-gap: 1.7%;
    row-gap: 1.8%;
  }

  .hero-quote__text,
  .hero-slide-cta--sand {
    margin-left: 3.1%;
  }

  /* Sin tope de anchura: los saltos los marca el <br> del diseño y el cuerpo
     escala con el ancho, así que la cita se queda sola en un ~43% del slider.
     Un max-width encima peleaba con los <br> y partía las líneas largas.
     El suelo de 24px no es estético: por debajo, el texto deja de contar como
     "grande" y el contraste exigido pasa de 3:1 a 4,5:1, que este velo no da. */
  .hero-quote__text {
    font-size: clamp(24px, 2.9vw, 35px);
  }

  .hero-quote__author {
    font-size: clamp(16px, 2.3vw, 28px);
  }

  .hero-quote__mark {
    width: clamp(60px, 9.6vw, 116px);
  }

  .hero-slide-cta {
    padding: 12px clamp(14px, 1.6vw, 19px);
    font-size: clamp(13px, 1.6vw, 19px);
  }

  .hero-slide-cta--sand {
    /* el mockup separa el botón bastante más que las demás filas */
    margin-top: clamp(18px, 4.8vw, 58px);
  }

  /* El logotipo mide un 32,6% del slider en el mockup; el suelo evita que
     en tablet se quede diminuto */
  .heroslide--video .hero-video__logo {
    width: clamp(260px, 33%, 454px);
  }



  /* Las flechas suben a media altura, a los lados */
  .slider-arrow {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .arrow-left {
    left: 24px;
  }

  .arrow-right {
    right: 24px;
  }


  .slider-dots {
    bottom: 20px;
  }

  /* Las flechas dejan de estar abajo: solo hay que salvar los dots */
  .hero-slider {
    --hero-controls-space: 72px;
  }

  /* =====================
    HERO
  ===================== */

  /* Slide 1: texto arriba a todo el ancho; debajo, mariposa y descripción en
     fila (conjunto centrado) y los botones al pie.
     El padding lateral deja libre la banda de las flechas. */
  /* Desde tablet, el titular recupera su tamaño: el recorte es de móvil */
  .hero-title {
    font-size: clamp(34px, 4vw, 48px);
  }

  /* Desde tablet el hero ya cabe de sobra: fuera el tope de alto de móvil */
  .heroslide--first {
    max-height: none;
    grid-template-rows: none;
    padding-inline: 16px;
    /* Las columnas de 56px son el hueco de las flechas (van a 24px del borde
       y miden 40px), y solo lo necesita la fila de en medio, que es donde
       caen. El texto ocupa las cuatro columnas y conserva el ancho que tenía
       cuando vivía fuera del slider: con el hueco aplicado a todo el slide,
       el subtítulo se partía en dos líneas. */
    grid-template-columns: 56px 250px fit-content(570px) 56px;
    grid-template-areas:
      "subtitulo subtitulo subtitulo   subtitulo"
      "titulo    titulo    titulo      titulo"
      ".         mariposa  descripcion ."
      "botones   botones   botones     botones";
    column-gap: 20px;
    row-gap: 12px;
    align-content: center;
    justify-content: center;
  }

  .hero-slide-description {
    display: block;
    grid-area: descripcion;
    /* ancho de la antigua columna de texto de escritorio: evita que el
       párrafo se extienda a todo el sobrante */
    max-width: 570px;
  }

  .hero-slide-buttons {
    display: flex;
    grid-area: botones;
    flex-direction: row;
    justify-content: center;
  }

  .heroslide--first .mariposa-cristal {
    width: 100%;        /* Asegura que la mariposa no se desborde en su contenedor */
    max-width: 250px;   /* Limita el tamaño máximo en pantallas más grandes */
    height: auto;       /* Mantiene la relación de aspecto */
    max-height: none;   /* la fila es auto: sin el tope de móvil */
    margin: 10px;
    object-fit: contain; /* Asegura que la mariposa se ajuste sin cortar */
  }
}

@media (min-width: 1030px) {

  /* =====================
    HERO
  ===================== */
  .hero {
    padding: 0;
  }

  .hero__inner {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 40px 24px 40px 24px;
    /*min-height: 100%;
    height: 100%;*/
  }

  .slider-arrow {
    width: 50px;
  }

  /* La flecha crece a 50px y se separa más del borde: el suelo del sangrado
     de la cita sube con ella (32 + 50 + holgura) */
  .hero-quote {
    padding-left: max(92px, 6.8%);
  }

  .arrow-left {
    left: 32px;
  }

  .arrow-right {
    right: 32px;
  }

  .slider-dots {
    bottom: 28px;
  }

  .dot {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .hero-slider {
    /* aquí los dots son mayores y van más altos que en tablet */
    --hero-controls-space: 84px;
  }

  .heroslide img,
  .heroslide video {
    height: 100%;
    object-position: center center;
  }

  /* Aquí la caja ya es casi tan apaisada como el vídeo: apenas se recorta y
     el encuadre centrado es el bueno */
  .heroslide--video .heroslide__video {
    object-position: center center;
  }

  /* Imágenes fluidas */
  .hero img {
    max-width: 100%;
  }

  /* Slide 1: columna de texto (subtítulo, título, descripción, botones)
     a la izquierda y mariposa a la derecha ocupando toda la altura.
     Encogimiento en dos fases al estrechar la ventana (como el diseño
     original): primero cede la columna de texto hasta su suelo de 570px
     (minmax 570px-1fr) y solo después se comprime la mariposa. */
  .heroslide--first {
    /* 0.798 = proporción ancho/alto de la mariposa (1000x1253): a altura
       completa cabe entera sin recorte lateral. Si se cambia la imagen, hay
       que traer aquí su proporción nueva. Se le descuenta la banda de los
       controles: es la mariposa la que marca el alto del slider en pantallas
       anchas, así que sin descontarla el hero crecería justo lo que ocupa
       esa banda. */
    grid-template-columns:
      minmax(570px, 1fr)
      minmax(0, calc(0.798 * (var(--hero-slider-height) - var(--hero-controls-space))));
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "subtitulo   mariposa"
      "titulo      mariposa"
      "descripcion mariposa"
      "botones     mariposa";
    row-gap: 40px;   /* separación de la antigua columna de texto */
    column-gap: 20px;
    align-content: center;
    justify-items: start;
    text-align: left; /* la base centra para móvil y tablet */
    padding-inline: 96px;
  }

  .hero-slide-subtitle {
    display: block;
    grid-area: subtitulo;
  }

  .hero-slide-title {
    display: block;
    grid-area: titulo;
  }

  .hero-slide-description {
    grid-area: descripcion;
    /* misma anchura y encogimiento que el título: la gobierna la columna
       del grid, sin el tope de 570px que sí aplica en tablet */
    max-width: none;
  }

  .hero-slide-buttons {
    grid-area: botones;
  }

  /* La mariposa llena la altura del slide, entera (la columna tiene su
     misma proporción, así que contain no deja franjas ni recorta); si la
     columna se comprime, la mariposa se encoge completa */
  .heroslide--first .mariposa-cristal {
    width: 100%;
    max-width: none;   /* el ancho lo gobierna la columna del grid */
    height: 100%;
    max-height: none;
    object-fit: contain;
    margin: 0;
    align-self: stretch;
    justify-self: stretch;
  }

  /* Título principal */
  .hero-title {
    font-size: 48px;
    line-height: 44px;
    margin-bottom: 0px;
  }

  /* Subtítulo */
  .hero-subtitle {
    font-size: 24px;
    margin-bottom: 0px;
  }

  /* Párrafo descriptivo */
  .hero-description {
    font-size: 28px;
    line-height: 40px;
    margin-bottom: 0px;
  }

  /* Contenedor de botones */
  .hero-buttons {
    flex-direction: row;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .btn-primary, .btn-secondary {
    padding: 16px 32px;
    font-size: 24px;
    min-width: 270px;
    line-height: 20px;
  }

  .btn-primary {
    background-color: var(--color-primary);
    color: #fff;
  }

  .btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-teal-dark);
  }

}