/* â”€â”€ Google Fonts (incluir en el <head> si es posible) â”€â”€ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* â”€â”€ Reset base â”€â”€ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: #1a1f2b;
  color: #e8e4dc;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* â”€â”€ Variables â”€â”€ */
:root {
  --cadom-dark:    #1a1f2b;
  --cadom-panel:   #272E3C;
  --cadom-cyan:    #45e0f6;
  --cadom-teal:    #229fb1;
  --cadom-warm:    #8C8880;
  --cadom-light:   #c1c1c1;
  --cadom-border:  rgba(140, 136, 128, 0.12);
}

/* â”€â”€ TipografÃ­a base â”€â”€ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 300;
  line-height: 1.1;
  color: #e8e4dc;
  margin: 0;
}

p  { margin: 0; }
a  { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

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

/* â”€â”€ Estructura IONOS â”€â”€ */
/* Asegura fondo oscuro en toda la pÃ¡gina */
#container,
#wrapper,
#content,
#sidebar,
#sidebar_content,
#footer {
  background: #1a1f2b;
}

/* Elimina mÃ¡rgenes por defecto del layout IONOS */
#wrapper   { margin: 0 auto; max-width: 100%; }
#content   { padding: 0; }
#sidebar   { padding: 0; }
#footer    { padding: 0; }

/* â”€â”€ Utilidades de layout â”€â”€ */
.cadom-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(140, 136, 128, 0.18),
    transparent
  );
  margin: 0 60px;
}

/* â”€â”€ Animaciones suaves â”€â”€ */
* { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* â”€â”€ Scroll personalizado â”€â”€ */
::-webkit-scrollbar              { width: 6px; }
::-webkit-scrollbar-track        { background: #1a1f2b; }
::-webkit-scrollbar-thumb        { background: rgba(140, 136, 128, 0.3); }
::-webkit-scrollbar-thumb:hover  { background: rgba(69, 224, 246, 0.5); }

/* â”€â”€ SelecciÃ³n de texto â”€â”€ */
::selection {
  background: rgba(69, 224, 246, 0.25);
  color: #e8e4dc;
}