/* Variables simples */
:root {
    --bg: #faf8f5;
    --text: #222;
    --brand: #7b4b2a;      /* tono cálido clásico */
    --brand-2: #caa574;    /* dorado suave para detalles */
    --card: #ffffff;
    --muted: #666;
  }
  
  /* Reset mínimo y tipografía */
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
  }
  
  /* Header + Nav */
  .site-header { background: linear-gradient(180deg, #fff, var(--bg)); border-bottom: 1px solid #eee; }
  .nav { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 1rem; }
  .nav .brand { font-weight: 800; color: var(--brand); text-decoration: none; }
  .menu { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
  .menu a { text-decoration: none; color: #333; padding: .5rem .75rem; border-radius: .5rem; }
  .menu a:hover { background: #f0ebe4; }
  
  /* Hero */
  .hero { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; padding: 2rem 1rem 3rem; align-items: center; }
  .hero-text h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 .25rem; color: var(--brand); }
  .hero .sub { color: var(--muted); margin-bottom: 1rem; }
  .btn { display: inline-block; border: 1px solid var(--brand); padding: .6rem 1rem; border-radius: .6rem; text-decoration: none; cursor: pointer; }
  .btn-primary { background: var(--brand); color: #fff; }
  .btn-primary:hover { background: #5f3820; }
  
  /* Secciones */
  .section { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; }
  .section h2 { color: var(--brand); border-bottom: 2px solid var(--brand-2); padding-bottom: .25rem; }
  
  /* Cards + utilidades */
  .card { background: var(--card); border: 1px solid #eee; border-radius: .8rem; padding: 1rem; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  
  /* Tabla (línea de tiempo) */
  .tabla { width: 100%; border-collapse: collapse; margin-top: 1rem; }
  .tabla th, .tabla td { border: 1px solid #e5e1da; padding: .6rem .8rem; text-align: left; }
  .tabla thead th { background: #f6efe4; }
  
  /* Galería */
  .galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .galeria img { width: 100%; height: 210px; object-fit: cover; border-radius: .6rem; }
  
  /* Citas */
  .frase { font-size: 1.15rem; border-left: 4px solid var(--brand-2); padding: .5rem 1rem; background: #fff8e8; }
  
  /* Aside biografía: ejemplo de selector por id y combinados */
  #biografia .bio-aside { margin-top: 1rem; }
  #biografia .bio-aside ul li b { color: var(--brand); }
  
  /* Listas con check */
  .checklist { list-style: none; padding: 0; }
  .checklist li { padding-left: 1.6rem; position: relative; }
  .checklist li::before {
    content: "✔";
    position: absolute; left: 0; top: 0; color: var(--brand-2);
  }
  
  /* Formulario */
  .form { display: grid; gap: .75rem; max-width: 700px; }
  .form input[type="text"], .form textarea {
    padding: .6rem .7rem; border: 1px solid #ddd; border-radius: .5rem; background: #fff;
  }
  .form .check { display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: #333; }
  
  /* Footer */
  .site-footer { text-align: center; padding: 1rem; border-top: 1px solid #eee; color: var(--muted); }
  
  /* Responsivo */
  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .galeria { grid-template-columns: 1fr 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
  }