/* --- Global Content Area Styling --- */
.hs-richtext * + * {
  /* "em" es una unidad relativa al tamaño de la fuente, es ideal para esto.
     Ajusta 1em a tu gusto (ej. 0.8em para menos espacio, 1.2em para más) */
  margin-top: 1px !important;
}

/* 2. (Opcional, pero recomendado) Da a los títulos un poco más de aire arriba para jerarquía */
.hs-richtext h1,
.hs-richtext h2,
.hs-richtext h3,
.hs-richtext h4 {
  /* Un poco más de espacio para que los títulos se separen del texto anterior */
  margin-top: 1px !important;
}

/* 3. (Importante) Elimina el espacio extra al principio del todo el bloque de texto */
.hs-richtext > *:first-child {
  margin-top: 0 !important;
}se styles for the main content area (dnd_area) */
.dnd-area.dnd-main-content {
  box-sizing: border-box; /* Ensures padding/border are included in the element's total width/height */
  border-radius: 30px; /* Round border for the entire content area */
  /* Remove overflow: hidden; here as it might clip content if not desired globally */
  margin: 0 auto; /* Centers the content area if its max-width is less than screen */
}

/* Desktop Styles (Default and above iPad breakpoint) */
.dnd-area.dnd-main-content {
  padding: 30px 130px; /* Internal padding: Top/Bottom 30px, Left/Right 130px */
  margin-left: 32px; /* Margin from left side */
  margin-right: 32px; /* Margin from right side */
  max-width: calc(100% - 64px); /* Account for 32px margins on each side */
}

/* iPad Styles (Max width 1024px, typical iPad portrait) */
@media (max-width: 1024px) {
  .dnd-area.dnd-main-content {
    padding: 25px 60px; /* Internal padding */
    margin-left: 20px; /* Margin from left side */
    margin-right: 20px; /* Margin from right side */
    max-width: calc(100% - 40px); /* Account for 20px margins on each side */
  }
}

/* Mobile Styles (Max width 767px, typical phone) */
@media (max-width: 767px) {
  .dnd-area.dnd-main-content {
    padding: 20px 15px; /* Internal padding */
    margin-left: 5px; /* Margin from left side */
    margin-right: 5px; /* Margin from right side */
    border-radius: 15px; /* Slightly less rounded on mobile for aesthetics */
    max-width: calc(100% - 10px); /* Account for 5px margins on each side */
  }
}

.hs-section {
  /* ... otros estilos que ya tenga la sección ... */
  
  /* Aplicamos el valor del editor de temas */
  border-radius: var(--section-border-radius);

  /* ¡MUY IMPORTANTE! Esto asegura que los fondos (imágenes, videos) no se salgan de las esquinas redondeadas. */
  overflow: hidden; 
}

/* Note: With this setup, dnd_sections and dnd_columns you drag
   onto the page will sit *inside* this padded and margined area.
   You may still want to add some vertical padding to dnd_sections
   themselves in the HubSpot editor, or via additional CSS rules.
*/