/* theme-astro.css | Estilo claro con aire místico (sin tema oscuro) */

/* ---------- Variables ---------- */
:root{
    --astro-bg:            #f6f7fb;          /* fondo muy claro azulado */
    --astro-paper:         #ffffff;          /* “papel” */
    --astro-ink:           #263238;          /* texto principal */
    --astro-ink-soft:      #5f6b74;          /* texto secundario */
    --astro-primary:       #5b79ff;          /* acento índigo suave */
    --astro-secondary:     #6f9fb8;          /* turquesa grisáceo */
    --astro-ornament:      #b48ef0;          /* lavanda */
    --astro-glow:          0 8px 28px rgba(90,112,255,.12);
    --astro-radius:        16px;
    --astro-maxw:          1100px;
    --astro-border:        1px solid rgba(22,27,29,.08);
  }
  
  /* ---------- Base ---------- */
  html{ scroll-behavior:smooth; }

  main.container{ max-width: var(--astro-maxw); }
  
  /* Tipografía cómoda */
  p{ line-height: 1.75; }
  .lead{ color: var(--astro-ink-soft); }
  
  /* Enlaces */
  a{ color: var(--astro-primary); text-decoration: none; }
  a:hover{ text-decoration: underline; }
  
  /* ---------- Secciones “papel” ---------- */
  .section{
    background: var(--astro-paper);
    border: var(--astro-border);
    border-radius: var(--astro-radius);
    box-shadow: var(--astro-glow);
    padding: 22px 22px;
  }
  
  /* Encabezados con ornamento sutil */
  .section h1,.section h2,.section h3,.section h4{
    position: relative; color:rgba(71, 0, 59, 0.765);font-weight: bolder;
  }
  .section h2{
    font-size: 2.0em!important;
    font-weight: bolder;
    border-bottom:3px solid rgba(180,142,240,.7);
    padding:8px;

    
  }
  .section h2::after{
    content: "✶";
    position: absolute; right: -6px; top: -10px;
    font-size: 14px; color: rgba(180,142,240,.7);
    transform: rotate(8deg);
  }
  
  /* Subtítulos */
  .section .h5, .section h3{ color:#3a466a; }
  
  /* ---------- Listas con viñeta astrológica ---------- */
  ul:not(.list-unstyled){
    padding-left: 0;
    list-style: none;
  }
  ul:not(.list-unstyled) > li{
    padding-left: 1.4rem;
    margin: .25rem 0;
    position: relative;
  }
  ul:not(.list-unstyled) > li::before{
    content: "✷";
    position: absolute; left: 0; top: .2rem;
    font-size: .9rem; line-height: 1;
    color: var(--astro-ornament);
    text-shadow: 0 0 6px rgba(180,142,240,.25);
  }
  
  /* ---------- Bloques laterales / nota ---------- */
  .border.rounded-3{
    border-color: rgba(106,115,125,.22) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
  }
  
  /* ---------- Chips/etiquetas zodiacales (por si las usas) ---------- */
  .zodiac-chip{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.25rem .6rem; border-radius:999px;
    border:1px solid rgba(91,121,255,.25);
    background: rgba(91,121,255,.07);
    color:#334; font-size:.85rem;
  }
  
  /* ---------- Separadores y detalles ---------- */
  .astro-divider{
    height: 1px; margin: 1rem 0 1.25rem;
    background: linear-gradient(90deg,
                rgba(180,142,240,0) 0%,
                rgba(180,142,240,.55) 18%,
                rgba(111,159,184,.55) 82%,
                rgba(111,159,184,0) 100%);
  }
  
  /* Sutil brillo para elementos destacados */
  .astro-glow{ box-shadow: 0 12px 36px rgba(91,121,255,.18); }
  
  /* ---------- Tablas limpias ---------- */
  .table{
    --bs-table-color: var(--astro-ink);
    --bs-table-bg: #fff;
    --bs-table-border-color: rgba(22,27,29,.08);
  }
  .table thead th{
    background: linear-gradient(180deg,#f7f8ff 0%, #f0f3ff 100%);
    color:#36415f;
  }
  
  /* ---------- Códigos y citas ---------- */
  code,kbd{
    background: #f1f4ff; border-radius: 6px; padding: .1rem .35rem;
    border: 1px solid rgba(91,121,255,.25);
  }
  blockquote{
    padding: .75rem 1rem; margin: .5rem 0;
    border-left: 4px solid rgba(180,142,240,.55);
    background: linear-gradient(180deg,#fff 0%, #fcfdff 100%);
    color: #445064;
  }
  
  /* ---------- Navbar clara con blur ---------- */
  header.navbar{
    background: rgba(255,255,255,.85) !important;
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid rgba(22,27,29,.08) !important;
  }
  
  /* ---------- Botones sutiles ---------- */
  .btn-primary{
    background: linear-gradient(180deg, var(--astro-primary), #4f6bf0);
    border: 1px solid rgba(79,107,240,.6);
    box-shadow: 0 6px 16px rgba(91,121,255,.26);
  }
  .btn-primary:hover{ filter: brightness(1.03) saturate(1.02); }
  .btn-outline-secondary{
    border-color: rgba(111,159,184,.55);
    color:#3b5662;
  }
  .btn-outline-secondary:hover{
    background: rgba(111,159,184,.08);
    border-color: rgba(111,159,184,.9);
  }
  
  /* ---------- AOS: animación ligeramente más suave ---------- */
  [data-aos]{
    will-change: transform, opacity;
  }
  .aos-animate{
    transition-timing-function: cubic-bezier(.21,.61,.35,1);
  }
  
  /* ---------- Formularios ---------- */
  .form-control{
    border-radius: 12px;
    border: 1px solid rgba(22,27,29,.12);
  }
  .form-control:focus{
    border-color: rgba(91,121,255,.7);
    box-shadow: 0 0 0 .25rem rgba(91,121,255,.15);
  }
  
  /* ---------- Utilidades ---------- */
  .maxw-astro{ max-width: var(--astro-maxw); }
  .muted{ color: var(--astro-ink-soft) !important; }
  .bg-veil{
    background: radial-gradient(450px 240px at 0% 0%, rgba(180,142,240,.08), transparent 60%),
                radial-gradient(650px 340px at 100% 0%, rgba(111,159,184,.08), transparent 60%);
  }
  .hr-soft{ border:0; height:1px; background: rgba(22,27,29,.08); }
  
  /* ---------- Print (para exportar a PDF legible en claro) ---------- */
  @media print{
    body{ background:#fff !important; }
    header.navbar, .sticky-actions{ display:none !important; }
    .section{ box-shadow:none; border:1px solid #ddd; }
    a{ color:#000; text-decoration:none; }
  }
  
 /* ---------- Marcatextos místico ---------- */
span.subrayado{
    position: relative;
    z-index: 0;
    font-weight: 500;
  }
  
  span.subrayado::before{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: .15em;
    height: .55em;
    background: linear-gradient(90deg,
                rgba(255,230,90,.45) 0%,
                rgba(240,200,255,.35) 100%)!important;
    border-radius: 4px;
    z-index: -1;
    transition: background .3s ease;
  }
  
  /* Variante al pasar el cursor */
  span.subrayado:hover::before{
    background: linear-gradient(90deg,
                rgba(255,230,90,.65) 0%,
                rgba(180,142,240,.55) 100%);
  }