/*
  Estilos de la landing (diseño 2: «Como Siempre · nueva landing» en Figma).
  Los colores y las letras vienen de marca.css; aquí no se escriben colores sueltos
  (salvo las sombras, copiadas tal cual del Figma).
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente);
  background: var(--color-blanco);
  color: var(--color-tinta);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
}

/* ---------- Piezas comunes ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 24px;
  border-radius: var(--radio-pildora);
  font-size: 15px;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.boton:hover {
  opacity: 0.85;
}

.boton-tinta {
  background: var(--color-tinta);
  color: var(--color-blanco);
  font-weight: 700;
}

.boton-rojo {
  background: var(--color-rojo);
  color: var(--color-blanco);
}

.boton-borde {
  background: var(--color-blanco);
  border: 1px solid var(--color-borde-fuerte);
  color: var(--color-tinta);
}

/* Etiqueta pequeña con punto rojo que va encima de cada título */
.etiqueta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radio-pildora);
  background: var(--color-rosa-palido);
  color: var(--color-vino);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.etiqueta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-rojo);
}

.seccion {
  padding: 110px var(--margen);
}

.cabecera {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cabecera-centrada {
  align-items: center;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.cabecera-centrada .etiqueta {
  align-self: center;
}

.titulo {
  font-size: 58px;
  font-weight: 500;
  line-height: 1.02;
}

.entradilla {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-gris);
}

.lista-check {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
}

.lista-check li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lista-check li::before {
  content: "";
  flex: 0 0 15px;
  height: 15px;
  background: url("../imagenes/iconos/check-fino-rojo.svg") center / contain no-repeat;
}

/* El logo sello tiene mucho margen alrededor; este recorte deja solo el sello */
.sello-recorte {
  position: relative;
  overflow: hidden;
}

.sello-recorte img {
  position: absolute;
  width: 178.57%;
  height: 217.39%;
  max-width: none;
  left: -39.29%;
  top: -60.87%;
}

/* ---------- Menú superior ---------- */

.menu {
  position: relative;
  z-index: 20;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 80px;
  background: var(--color-blanco);
  border-bottom: 1px solid var(--color-borde);
}

.menu-logo {
  display: block;
  width: 48px;
  height: 48px;
}

.menu-enlaces {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--color-vino);
}

.menu-enlaces a {
  padding: 8px 16px;
  border-radius: var(--radio-pildora);
  transition: background 0.2s;
}

.menu-enlaces a:hover {
  background: var(--color-rosa-palido);
}

.menu-derecha {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* «Precios» solo aparece en el menú del móvil (en ordenador el menú es el del Figma) */
.solo-movil {
  display: none;
}

/* Botón de menú (tres rayas): oculto en ordenador */
.menu-boton {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-rosa-palido);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.menu-boton span {
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-tinta);
  transition: transform 0.2s, opacity 0.2s;
}

/* Al abrir, las tres rayas se convierten en una X */
.menu-abierto .menu-boton span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-abierto .menu-boton span:nth-child(2) {
  opacity: 0;
}

.menu-abierto .menu-boton span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.boton-menu {
  height: 40px;
  font-size: 13px;
}

/* ---------- Portada ---------- */

.portada {
  position: relative;
  overflow: hidden;
  min-height: 768px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.portada-sello-fondo {
  position: absolute;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.portada-sello-grande {
  width: 1500px;
  height: 1500px;
  left: -450px;
  top: calc(50% - 104px);
  transform: translateY(-50%);
  opacity: 0.12;
}

.portada-sello-pequeno {
  width: 600px;
  height: 600px;
  left: 600px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.05;
}

/* El texto ocupa todo el espacio hasta los móviles, sin dejar hueco en medio */
.portada-texto {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 80px 40px 80px 80px;
}

.portada .etiqueta {
  font-size: 10px;
  padding: 7px 13px;
}

/* El titular crece con el ancho de la pantalla para rellenar su columna
   (unos 70 px en un portátil de 1440 px, 130 px en uno de 1920 px, como máximo 140 px) */
.portada-titular {
  font-size: clamp(56px, calc(13vw - 118px), 140px);
  font-weight: 800;
  line-height: 0.96;
}

.portada-descripcion {
  max-width: 36em;
  font-size: clamp(17px, 1.2vw, 21px);
  line-height: 1.6;
  color: var(--color-gris);
}

.portada-acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.boton-grande {
  height: 56px;
  padding: 0 32px;
}

.portada-familias {
  font-size: 13px;
  color: var(--color-gris);
}

.portada-familias strong {
  color: var(--color-tinta);
}

.portada-moviles {
  position: relative;
  flex: 0 1 780px;
  width: 780px;
  min-width: 0;
}

/* ---------- Cómo funciona ---------- */

.proceso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
}

.proceso-pasos {
  width: 100%;
  max-width: 1240px;
  display: flex;
  gap: 24px;
}

.paso {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background: var(--color-crema);
  border: 1px solid var(--color-borde);
  border-radius: 24px;
}

.paso-numero {
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: var(--radio-pildora);
  background: var(--color-rosa-palido);
  color: var(--color-rojo);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.paso-pantalla {
  height: 420px;
  border: 1px solid var(--color-borde);
  border-radius: 24px;
  overflow: hidden;
}

.paso-pantalla img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.paso h3 {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
}

.paso p:not(.paso-numero) {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-gris);
}

/* ---------- Escuchar y leer ---------- */

.escucha {
  display: flex;
  align-items: center;
  gap: 82px;
}

.escucha-imagen {
  flex: 0 1 700px;
  width: 700px;
  min-width: 0;
}

.escucha-texto {
  flex: 0 1 460px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.ventajas {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 14px;
  line-height: 1.45;
}

.ventajas li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ventaja-icono {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--color-vino);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ventaja-icono-coral {
  background: var(--color-coral);
}

.ventaja-icono img {
  width: 20px;
  height: 20px;
}

/* ---------- El libro y los precios ---------- */

.libro {
  background: var(--color-crema);
  padding-top: 105px;
  padding-bottom: 105px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.libro-presentacion {
  display: flex;
  align-items: center;
  gap: 68px;
}

.libro-imagen {
  flex: 0 1 650px;
  width: 650px;
  min-width: 0;
}

.libro-texto {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.precios {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  scroll-margin-top: 90px;
}

.precio {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 30px;
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: 24px;
}

.precio-cabecera {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.precio-cabecera h3 {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
}

.precio-cabecera p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-gris);
}

.precio-importe {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
}

.precio-importe span {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-rojo);
}

.precio-pago {
  font-size: 11px;
  color: var(--color-rojo);
}

.precio-lista {
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
}

/* Tarjeta destacada (60 €) */

.precio-destacado {
  background: var(--color-vino);
  border-color: var(--color-vino);
  color: var(--color-blanco);
  box-shadow: 0 24px 60px rgba(75, 16, 43, 0.25);
}

.precio-etiqueta {
  padding: 6px 12px;
  border-radius: var(--radio-pildora);
  background: var(--color-rojo);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.precio-destacado .precio-cabecera p,
.precio-destacado .precio-pago {
  color: var(--color-rosa);
}

.precio-destacado .precio-importe span {
  color: var(--color-coral);
}

.precio-aviso {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--color-vino-claro);
  color: var(--color-rosa);
  font-size: 11px;
  line-height: 1.4;
}

.precio-aviso::before {
  content: "";
  flex: 0 0 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-coral);
}

.precio-destacado .lista-check li::before {
  background-image: url("../imagenes/iconos/check-fino-coral.svg");
}

/* ---------- Testimonios ---------- */

.testimonios {
  background: var(--color-rosa-palido);
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 54px;
}

.testimonios-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.testimonios-cabecera .cabecera {
  max-width: 740px;
}

.testimonios-cifra {
  flex: 0 0 210px;
  text-align: right;
}

.testimonios-cifra p:first-child {
  font-size: 52px;
  font-weight: 600;
  color: var(--color-rojo);
}

.testimonios-cifra p:last-child {
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-gris);
}

.testimonios-lista {
  display: flex;
  gap: 18px;
}

.testimonio {
  flex: 1 1 0;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 26px;
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: 22px;
}

.estrellas {
  display: flex;
  gap: 3px;
}

.estrellas span {
  width: 14px;
  height: 14px;
  background: url("../imagenes/iconos/estrella.svg") center / contain no-repeat;
}

.testimonio blockquote {
  font-size: 23px;
  font-weight: 500;
  line-height: 1.25;
}

.testimonio figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonio figcaption img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonio figcaption span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 9px;
  color: var(--color-gris);
}

.testimonio figcaption strong {
  font-size: 11px;
  color: var(--color-tinta);
}

/* ---------- Preguntas frecuentes ---------- */

.preguntas {
  display: flex;
  align-items: flex-start;
  gap: 100px;
}

.preguntas-intro {
  flex: 0 0 350px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ayuda {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 18px;
  background: var(--color-vino);
  color: var(--color-rosa);
  font-size: 10px;
  line-height: 1.5;
}

.ayuda img {
  width: 20px;
  height: 20px;
}

.ayuda-titulo {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-blanco);
}

.preguntas-lista {
  flex: 1 1 0;
}

.preguntas-lista details {
  padding: 22px 2px;
  border-bottom: 1px solid var(--color-borde);
}

.preguntas-lista summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 22px;
  cursor: pointer;
  list-style: none;
}

.preguntas-lista summary::-webkit-details-marker {
  display: none;
}

/* Botón redondo: «+» cuando está cerrada, «−» en rojo cuando está abierta */
.preguntas-lista summary::after {
  content: "";
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-rosa-palido) url("../imagenes/iconos/mas.svg") center / 15px no-repeat;
  transition: background-color 0.2s;
}

.preguntas-lista details[open] summary::after {
  background: var(--color-rojo) url("../imagenes/iconos/menos.svg") center / 15px no-repeat;
}

.preguntas-lista details p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-gris);
}

/* ---------- Descarga la app ---------- */

.descarga {
  padding: 96px 72px 72px;
}

.descarga-panel {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 0 52px 0 72px;
  border-radius: 34px;
  background: var(--color-vino);
  color: var(--color-blanco);
}

.descarga-sello {
  position: absolute;
  width: 440px;
  height: 440px;
  left: 948px;
  top: -143px;
  transform: rotate(-8deg);
  opacity: 0.12;
}

.descarga-texto {
  position: relative;
  flex: 0 1 620px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 0;
}

.etiqueta-oscura {
  background: rgba(255, 255, 255, 0.09);
  color: var(--color-rosa);
  font-size: 10px;
}

.etiqueta-oscura::before {
  background: var(--color-coral);
}

.descarga-titulo {
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
}

.descarga-entradilla {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-rosa);
}

/* Las dos insignias vienen en una sola imagen; cada mitad es un enlace */
.tiendas {
  position: relative;
  width: 260px;
  height: 162px;
}

.tiendas img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tiendas a {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
}

.tienda-arriba {
  top: 0;
}

.tienda-abajo {
  bottom: 0;
}

.descarga-nota {
  font-size: 10px;
  color: var(--color-rosa);
}

.descarga-app {
  position: relative;
  align-self: flex-end;
  flex: 0 0 390px;
  width: 390px;
  margin-bottom: 55px;
}

/* ---------- Pie de página ---------- */

.pie {
  padding: 36px 72px 46px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.pie-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--color-borde);
}

.pie-logo {
  width: 112px;
  height: 72px;
  object-fit: contain;
}

.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  font-size: 11px;
}

.pie-enlaces a:hover {
  color: var(--color-rojo);
}

.pie-redes {
  display: flex;
  gap: 10px;
}

.pie-redes a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-rosa-palido);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pie-redes img {
  width: 16px;
  height: 16px;
}

.pie-legal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 10px;
  color: var(--color-gris);
}

/* =====================================================================
   ADAPTACIÓN A PANTALLAS MÁS PEQUEÑAS
   No hay diseño móvil en Figma: esto sigue el estilo de la versión de
   ordenador, apilando columnas y reduciendo tamaños de letra.
   ===================================================================== */

/* Portátiles pequeños (hasta 1280 px) */
@media (max-width: 1280px) {
  :root {
    --margen: 56px;
  }

  .menu {
    padding: 0 var(--margen);
  }

  .portada {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .portada-texto {
    flex: none;
    max-width: 720px;
    padding: 64px var(--margen) 0;
  }

  .portada-titular {
    font-size: 68px;
  }

  .portada-moviles {
    flex: none;
    align-self: center;
  }

  .escucha,
  .libro-presentacion {
    gap: 48px;
  }

  .preguntas {
    gap: 56px;
  }

  .descarga {
    padding: 72px var(--margen);
  }

  .descarga-sello {
    left: auto;
    right: -80px;
  }

  .pie {
    padding: 36px var(--margen) 46px;
  }
}

/* Tablets (hasta 1000 px): las columnas pasan a ir una debajo de otra */
@media (max-width: 1000px) {
  /* Menú: se queda fijo arriba al bajar, y las secciones se abren con el botón de tres rayas */
  .menu {
    position: sticky;
    top: 0;
  }

  [id] {
    scroll-margin-top: 72px;
  }

  .menu-boton {
    display: flex;
  }

  .menu-enlaces {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--margen) 16px;
    background: var(--color-blanco);
    border-bottom: 1px solid var(--color-borde);
    box-shadow: 0 16px 32px rgba(36, 17, 27, 0.08);
    font-size: 17px;
  }

  .menu-abierto .menu-enlaces {
    display: flex;
  }

  .menu-enlaces a {
    padding: 14px 4px;
    border-radius: 0;
    border-bottom: 1px solid var(--color-borde);
  }

  .menu-enlaces a:last-child {
    border-bottom: none;
  }

  .solo-movil {
    display: block;
  }

  .menu-derecha {
    gap: 10px;
  }

  .seccion,
  .libro,
  .testimonios {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  /* Pasos: tarjetas en fila que se deslizan con el dedo hacia la derecha.
     La siguiente tarjeta asoma por el borde para que se note que hay más. */
  .proceso {
    align-items: stretch;
  }

  .proceso-pasos {
    width: auto;
    max-width: none;
    margin: 0 calc(var(--margen) * -1);
    padding: 0 var(--margen) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--margen);
    scrollbar-width: none;
  }

  .proceso-pasos::-webkit-scrollbar {
    display: none;
  }

  .paso {
    flex: 0 0 min(82%, 400px);
    scroll-snap-align: start;
  }

  .precios,
  .testimonios-lista {
    flex-direction: column;
    align-items: stretch;
  }

  /* Al apilarse, las tarjetas miden lo que mida su contenido */
  .precio,
  .testimonio,
  .libro-texto,
  .preguntas-lista {
    flex: none;
  }

  /* En móvil, la opción Físico + digital aparece primero */
  .precio-destacado {
    order: -1;
  }

  .escucha,
  .libro-presentacion,
  .preguntas {
    flex-direction: column;
    align-items: stretch;
  }

  .escucha-imagen,
  .libro-imagen {
    flex: none;
    align-self: center;
  }

  .escucha-texto,
  .preguntas-intro {
    flex: none;
  }

  .testimonios-cabecera {
    flex-direction: column;
    align-items: flex-start;
  }

  .testimonios-cifra {
    flex: none;
    text-align: left;
  }

  .testimonio {
    min-height: 0;
    gap: 20px;
  }

  .descarga-panel {
    flex-direction: column;
    align-items: stretch;
    padding: 48px 40px 0;
  }

  .descarga-texto {
    flex: none;
    padding: 0;
  }

  .descarga-app {
    flex: none;
    align-self: center;
    width: 340px;
    margin-bottom: 0;
  }

  .pie-fila {
    flex-direction: column;
  }

  .pie-enlaces {
    justify-content: center;
  }

  .pie-legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Móviles (hasta 640 px) */
@media (max-width: 640px) {
  :root {
    --margen: 20px;
  }

  .boton {
    white-space: normal;
    text-align: center;
  }

  .etiqueta {
    white-space: normal;
  }

  .menu {
    height: 60px;
  }

  .menu-logo {
    width: 40px;
    height: 40px;
  }

  .boton-menu {
    white-space: nowrap;
    padding: 0 16px;
  }

  .portada-texto {
    gap: 24px;
    padding-top: 40px;
  }

  .portada-titular {
    font-size: 40px;
  }

  .portada-descripcion {
    font-size: 16px;
  }

  .portada-acciones .boton {
    align-self: stretch;
  }

  .portada-sello-grande {
    width: 900px;
    height: 900px;
    left: -380px;
  }

  .portada-sello-pequeno {
    display: none;
  }

  .seccion,
  .libro,
  .testimonios {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .proceso,
  .libro,
  .testimonios {
    gap: 40px;
  }

  .titulo {
    font-size: 36px;
  }

  .entradilla {
    font-size: 16px;
  }

  .paso-pantalla {
    height: 360px;
  }

  .paso h3 {
    font-size: 24px;
  }

  .precio {
    padding: 24px;
  }

  .precio-cabecera h3 {
    font-size: 30px;
  }

  .precio .boton {
    align-self: stretch;
  }

  .testimonios-cifra p:first-child {
    font-size: 44px;
  }

  .testimonio blockquote {
    font-size: 20px;
  }

  .preguntas-lista summary {
    font-size: 18px;
  }

  .descarga {
    padding: 40px 12px;
  }

  .descarga-panel {
    padding: 40px 20px 0;
    border-radius: 28px;
  }

  .descarga-titulo {
    font-size: 38px;
  }

  .descarga-entradilla {
    font-size: 16px;
  }

  .descarga-sello {
    width: 260px;
    height: 260px;
    right: -90px;
    top: -60px;
  }

  .descarga-app {
    width: 100%;
    max-width: 320px;
  }
}