:root {
    --surface-soft: #f7f4f2;
    --surface-card: rgba(255, 255, 255, 0.94);
  }

  body {
    font-family: 'Manrope', sans-serif;
    background: radial-gradient(circle at 15% 15%, #fffaf7 0%, var(--surface-soft) 45%, #f3efec 100%);
  }
  .prose { color: #333333; }
  .prose h1 { font-size: 2.25rem; font-weight: 700; margin-bottom: 1.5rem; color: #333333; }
  .prose h2 { font-size: 1.875rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; color: #333333; }
  .prose p { margin-bottom: 1rem; line-height: 1.75; }
  .prose ul { list-style-type: disc; list-style-position: inside; margin-bottom: 1rem; padding-left: 0; }
  .prose ul li { margin-bottom: 0.5rem; }
  .prose a { color: #DDA8A1; text-decoration: underline; }
  .prose a:hover { color: #C28C83; }

  /* Header styles */
  #main-header {
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }

  /* Ensure SVG icon in scroll-to-top button is white */
  #scroll-to-top-button svg {
    stroke: white; /* Explicitly set the stroke color */
    width:100%;   /* Ajusta este valor (ej. 60%, 70%, 80%) para el tamaño deseado del icono */
    height: 100%;  /* Usa el mismo valor que width para mantener la proporción cuadrada del icono */
    display: block; /* Ensures proper sizing and layout for the SVG */
    margin: auto; /* Centra el SVG dentro del span si el span es más grande que el SVG */
  }

  /* Logo Styling */
  #main-header .header-logo { /* Asegúrate de que tu <img> del logo tenga la clase 'header-logo' */
    transition: filter 0.3s ease-in-out;
    /* Por defecto (cabecera transparente), hacemos que el logo (asumido oscuro) se vea blanco */
    filter: brightness(0) invert(1);
  }

  #main-header.header-scrolled .header-logo {
    /* Cuando la cabecera tiene fondo blanco, el logo vuelve a su color original (asumido oscuro) */
    filter: none;
  }


  .header-scrolled {
    background-color: white !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  /* Default (transparent header) text colors for desktop nav links */
  #main-header nav.hidden.md\:flex a {
    color: white;
  }
   #main-header nav.hidden.md\:flex a:hover {
    color: #ffe5d8; /* primary-light */
    background-color: rgba(255, 255, 255, 0.2);
  }

  /* Scrolled header text colors for desktop nav links */
  .header-scrolled nav.hidden.md\:flex a {
    color: #333333 !important; /* neutral-dark */
  }
  .header-scrolled nav.hidden.md\:flex a:hover {
    color: #C28C83 !important; /* primary-dark for better contrast */
    background-color: rgba(255, 229, 216, 0.3); /* primary-light with 30% opacity */
  }

  /* Default (transparent header) mobile menu button icon color */
  #main-header #mobile-menu-button {
    color: white;
  }
  #main-header #mobile-menu-button:hover {
    color: #ffe5d8; /* primary-light */
  }

  /* Scrolled header mobile menu button icon color */
#main-header.header-scrolled #mobile-menu-button {
    color: #333333; /* neutral-dark */
  }
#main-header.header-scrolled #mobile-menu-button:hover {
    color: #C28C83; /* primary-dark */
  }

  /* Phone link styling in header */
  /* Default state (transparent header) */
  #main-header .nav-phone-link {
    color: white;
    transition: color 0.3s ease-in-out;
  }
  #main-header .nav-phone-link .phone-icon-svg-container {
    color: white; /* Icon should be white on transparent header */
    transition: color 0.3s ease-in-out;
  }
  #main-header .nav-phone-link:hover {
    color: #ffe5d8; /* primary-light for text hover */
  }
  #main-header .nav-phone-link:hover .phone-icon-svg-container {
    color: #ffe5d8; /* primary-light for icon hover */
  }

  /* Scrolled state (white header background) */
  #main-header.header-scrolled .nav-phone-link {
    color: #333333; /* neutral-dark for text */
  }
  #main-header.header-scrolled .nav-phone-link .phone-icon-svg-container {
    color: #C28C83; /* primary-dark for icon */
  }
  #main-header.header-scrolled .nav-phone-link:hover {
    color: #C28C83; /* primary-dark for text hover */
  }
  #main-header.header-scrolled .nav-phone-link:hover .phone-icon-svg-container {
    color: #C28C83; /* primary-dark for icon hover (can be adjusted if a different hover color is needed) */
  }

  #main-header svg {
    width:100%;   /* Haz que el SVG ocupe todo el span (w-6 h-6) */
    height: 100%;  /* Haz que el SVG ocupe todo el span (w-6 h-6) */
    display: block; /* Ensures proper sizing and layout for the SVG */
    margin: auto; /* Centra el SVG dentro del span si el span es más grande que el SVG */
  }

  #services svg {
    stroke: #C28C83;
    width:100%;   /* Haz que el SVG ocupe todo el span (w-6 h-6) */
    height: 100%;  /* Haz que el SVG ocupe todo el span (w-6 h-6) */
    display: block; /* Ensures proper sizing and layout for the SVG */
    margin: auto; /* Centra el SVG dentro del span si el span es más grande que el SVG */
  }