:root{
    --bg-dark:#170e21;
    --bg-alt:#221530;
    --panel:#2a1a3a;
    --purple:#3d1d5c;
    --purple-deep:#2a1240;
    --gold:#b0863f;
    --gold-light:#d4ac68;
    --lila:#b48fd6;
    --verde:#5c8a5a;
    --ivory:#eee7db;
    --ivory-dim:#b9ac9a;
    --bg-dark-rgb:23,14,33;
    --gold-rgb:176,134,63;
    --gold-light-rgb:212,172,104;
    --on-gold:#1c1128;
    --line: rgba(var(--gold-rgb),0.32);
    --font-display:'Lora', Georgia, 'Times New Roman', serif;
    --font-body:'Lora', Georgia, 'Times New Roman', serif;
    --font-utility:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg-dark);
    color:var(--ivory);
    font-family:var(--font-body);
    line-height:1.6;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; height:auto; display:block;}
  picture{display:contents;}
  picture > source{display:none;}
  section{position:relative;}

  .eyebrow{
    font-family:var(--font-utility);
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold-light);
    font-weight:500;
  }

  .frame-rule{
    position:fixed; inset:14px;
    border:1px solid var(--line);
    pointer-events:none; z-index:5;
  }
  @media (max-width:640px){ .frame-rule{inset:8px;} }

  /* ---------- HEADER ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 40px;
    background:linear-gradient(to bottom, rgba(var(--bg-dark-rgb),0.94), transparent);
  }
  .brand{
    display:flex; align-items:center; gap:12px;
    font-family:var(--font-display);
    font-size:1.05rem; letter-spacing:0.03em;
    color:var(--ivory);
  }
  .brand svg{width:30px; height:30px;}
  .brand img{width:56px; height:56px; object-fit:contain; display:block; flex:none;}
  .brand{
    gap:14px; font-family:var(--font-utility); font-weight:500; font-size:1.05rem; letter-spacing:0.01em; line-height:1.2; white-space:nowrap;
    /* fondo transparente, igual que el menú (el degradado de la cabecera ya suaviza las líneas del marco) */
    background:transparent; padding:8px 22px 8px 10px; margin:-8px 0 -8px -10px; position:relative; z-index:1;
  }
  .brand .brand-name{display:block; white-space:nowrap;}
  @media (max-width:640px){
    .brand{font-size:0.78rem; gap:9px; padding-right:12px; letter-spacing:0;}
    .brand img{width:40px; height:40px;}
  }
  @media (max-width:380px){ .brand{font-size:0.68rem; gap:7px;} .brand img{width:34px; height:34px;} }
  .brand .brand-sub{
    display:block;
    font-family:var(--font-utility);
    font-size:0.62rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--gold-light);
    margin-top:2px;
  }
  nav{display:flex; gap:20px; flex-wrap:wrap; justify-content:flex-end; max-width:60%;}
  nav a{
    font-family:var(--font-utility);
    font-size:0.68rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ivory-dim);
    position:relative; padding-bottom:4px;
    transition:color 0.25s ease;
    white-space:nowrap;
  }
  nav a::after{
    content:""; position:absolute; left:0; bottom:0;
    width:0; height:1px; background:var(--gold-light);
    transition:width 0.3s ease;
  }
  nav a:hover{color:var(--ivory);}
  nav a:hover::after{width:100%;}
  @media (max-width:1240px){ nav{display:none;} }

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center; padding:130px 24px 70px;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(90,50,120,0.4), transparent 60%),
      linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-alt) 65%, var(--purple-deep) 160%);
  }
  .hero-eyebrow{margin-bottom:20px; opacity:0; animation:riseIn 1.1s ease 0.2s forwards;}
  .hero h1{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(2.4rem, 5.6vw, 4.6rem);
    line-height:1.06; max-width:16ch; color:var(--ivory);
    opacity:0; animation:riseIn 1.1s ease 0.4s forwards;
  }
  .hero h1 em{font-style:italic; font-weight:300; color:var(--gold-light);}
  .hero p.lede{
    margin-top:24px; max-width:46ch; font-size:1.05rem; color:var(--ivory-dim);
    opacity:0; animation:riseIn 1.1s ease 0.6s forwards;
  }
  .hero .ctas{
    margin-top:40px; display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
    opacity:0; animation:riseIn 1.1s ease 0.8s forwards;
  }
  @keyframes riseIn{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }

  .btn{
    font-family:var(--font-utility); font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase;
    padding:15px 28px; border:1px solid var(--gold); color:var(--ivory);
    transition:all 0.3s ease;
  }
  .btn:hover{background:var(--gold); color:var(--bg-dark);}
  .btn.solid{background:var(--gold); color:var(--bg-dark);}
  .btn.solid:hover{background:var(--gold-light); border-color:var(--gold-light);}

  .signature-mark{
    margin-top:60px; width:min(880px, 92vw);
    opacity:0; animation:riseIn 1.4s ease 1s forwards;
    position:relative;
    padding:14px;
    border:1px solid var(--line);
  }
  .signature-mark::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 60%, var(--bg-dark) 100%);
    pointer-events:none;
  }
  .signature-mark img{
    width:100%; display:block;
    filter:saturate(0.85) contrast(1.03);
  }
  .legend{
    display:flex; gap:26px; justify-content:center; margin-top:22px; flex-wrap:wrap;
    font-family:var(--font-utility); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ivory-dim);
    opacity:0; animation:riseIn 1.4s ease 1.2s forwards;
  }
  .legend span{display:flex; align-items:center; gap:8px;}
  .legend i{width:10px; height:10px; display:inline-block; border-radius:50%;}
  .legend .i-lila{background:var(--lila);}
  .legend .i-verde{background:var(--verde);}
  .legend .i-blanco{background:var(--ivory);}

  /* ---------- SECTION SHELL ---------- */
  .section{ padding:120px 40px; max-width:1180px; margin:0 auto; }
  @media (max-width:640px){ .section{padding:80px 22px;} }

  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
    margin-bottom:60px; border-bottom:1px solid var(--line); padding-bottom:26px;
  }
  .section-head h2{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(1.9rem, 3.4vw, 2.8rem); margin-top:10px;
  }
  .section-head .num{ font-family:var(--font-display); font-style:italic; font-size:1rem; color:var(--gold); }

  /* ---------- HISTORIA ---------- */
  .historia-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:64px; align-items:start; }
  @media (max-width:800px){ .historia-grid{grid-template-columns:1fr;} }
  .pull-quote{
    font-family:var(--font-display); font-style:italic; font-size:1.4rem; line-height:1.4;
    color:var(--gold-light); border-left:2px solid var(--gold); padding-left:24px;
  }
  .historia-grid .body-copy p{margin-bottom:18px; color:var(--ivory-dim); max-width:60ch;}
  .historia-grid .body-copy p strong{color:var(--ivory); font-weight:500;}

  /* ---------- IMAGENES (titulares) ---------- */
  .titulares{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .titulares-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); margin-top:10px; }
  @media (max-width:800px){ .titulares-grid{grid-template-columns:1fr;} }
  .titular-card{ background:var(--bg-alt); padding:42px 34px; display:flex; flex-direction:column; gap:14px; border-top:2px solid transparent; }
  .titular-card.acc-lila{border-top-color:var(--lila);}
  .titular-card.acc-verde{border-top-color:var(--verde);}
  .titular-card.acc-gold{border-top-color:var(--gold);}
  .titular-card .icon{width:36px; height:36px; opacity:0.9;}
  .titular-card h2, .titular-card h3{ font-family:var(--font-display); font-weight:400; font-size:1.35rem; }
  .titular-card p{color:var(--ivory-dim); font-size:0.95rem;}
  .titular-card .meta{
    font-family:var(--font-utility); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--gold); margin-top:auto; padding-top:14px;
  }

  /* ---------- ITINERARIO ---------- */
  .estacion{
    display:grid; grid-template-columns:100px 1fr 150px; gap:22px; align-items:baseline;
    padding:24px 0; border-bottom:1px solid var(--line);
  }
  @media (max-width:700px){ .estacion{grid-template-columns:1fr; gap:6px; padding:18px 0;} }
  .estacion .hora{ font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--gold-light); }
  .estacion .lugar{ font-family:var(--font-display); font-size:1.1rem; }
  .estacion .lugar span{ display:block; font-family:var(--font-body); font-size:0.9rem; color:var(--ivory-dim); margin-top:4px; }
  .estacion .dia{ font-family:var(--font-utility); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ivory-dim); text-align:right; }
  @media (max-width:700px){ .estacion .dia{text-align:left;} }

  /* ---------- HAZTE HERMANO ---------- */
  .hermandad{ background:linear-gradient(160deg, var(--purple), var(--bg-dark) 70%); }
  .hermandad-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:46px; margin-top:10px; }
  @media (max-width:800px){ .hermandad-grid{grid-template-columns:1fr;} }
  .valor h2, .valor h3{ font-family:var(--font-display); font-weight:400; font-size:1.25rem; margin-bottom:12px; color:var(--gold-light); }
  .valor p{color:var(--ivory-dim); font-size:0.95rem;}
  .hermandad-cta{
    margin-top:56px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
    padding-top:38px; border-top:1px solid var(--line);
  }
  .hermandad-cta p{max-width:40ch; color:var(--ivory-dim);}

  /* ---------- OTRAS SOLICITUDES ---------- */
  .solicitudes-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); margin-top:10px; }
  @media (max-width:700px){ .solicitudes-grid{grid-template-columns:1fr;} }
  .solicitud-item{
    background:var(--bg-dark); padding:30px 32px;
    display:flex; justify-content:space-between; align-items:center; gap:20px;
  }
  .solicitud-item h2, .solicitud-item h4{ font-family:var(--font-display); font-weight:400; font-size:1.1rem; margin-bottom:6px; }
  .solicitud-item p{ color:var(--ivory-dim); font-size:0.88rem; }
  .solicitud-item .arrow{ color:var(--gold-light); font-size:1.3rem; flex-shrink:0; }

  /* ---------- GALERIAS ---------- */
  .galeria-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:10px; }
  @media (max-width:800px){ .galeria-grid{grid-template-columns:repeat(2, 1fr);} }
  .galeria-item{
    aspect-ratio:3/4; background:var(--panel); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    color:var(--ivory-dim); font-family:var(--font-utility); font-size:0.7rem;
    letter-spacing:0.1em; text-transform:uppercase; text-align:center; padding:10px;
    transition:transform 0.4s ease, border-color 0.4s ease;
  }
  .galeria-item:hover{transform:translateY(-6px); border-color:var(--gold);}
  .galeria-item:nth-child(2){aspect-ratio:3/5; margin-top:32px;}
  .galeria-item:nth-child(3){aspect-ratio:3/5; margin-top:-32px;}

  /* ---------- DESCARGAS ---------- */
  .descargas-list{ margin-top:10px; }
  .descarga-row{
    display:grid; grid-template-columns:70px 1fr 90px 100px; align-items:center; gap:20px;
    padding:20px 0; border-bottom:1px solid var(--line);
  }
  @media (max-width:700px){ .descarga-row{grid-template-columns:50px 1fr 60px; } .descarga-row .peso{display:none;} }
  .descarga-row .tipo{
    font-family:var(--font-utility); font-size:0.65rem; letter-spacing:0.08em;
    color:var(--gold); border:1px solid var(--gold); padding:5px 8px; text-align:center;
  }
  .descarga-row .nombre{ font-family:var(--font-display); font-size:1.05rem; }
  .descarga-row .peso{ color:var(--ivory-dim); font-family:var(--font-utility); font-size:0.78rem; }
  .descarga-row .descargar{
    font-family:var(--font-utility); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--gold-light); border-bottom:1px solid var(--gold-light); justify-self:start;
  }

  /* ---------- PATROCINADORES ---------- */
  .patrocinadores{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .patro-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); margin-top:10px;
  }
  @media (max-width:700px){ .patro-grid{grid-template-columns:repeat(2, 1fr);} }
  .patro-item{
    background:var(--bg-alt); padding:38px 20px; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-utility); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ivory-dim); text-align:center; min-height:100px;
  }

  /* ---------- NOTICIAS ---------- */
  .noticias-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:42px; margin-top:10px; }
  @media (max-width:800px){ .noticias-grid{grid-template-columns:1fr;} }
  .noticia{border-top:1px solid var(--line); padding-top:22px;}
  .noticia .fecha{
    font-family:var(--font-utility); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold);
  }
  .noticia h3{ font-family:var(--font-display); font-weight:400; font-size:1.2rem; margin:12px 0 10px; }
  .noticia p{color:var(--ivory-dim); font-size:0.92rem;}
  .noticia .leer{
    display:inline-block; margin-top:14px; font-family:var(--font-utility); font-size:0.7rem;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-light); border-bottom:1px solid var(--gold-light);
  }

  /* ---------- CONTACTO ---------- */
  .contacto{ background:var(--bg-alt); border-top:1px solid var(--line); }
  .contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
  @media (max-width:800px){ .contacto-grid{grid-template-columns:1fr;} }
  .contacto-info dl{display:grid; grid-template-columns:auto 1fr; gap:12px 20px; margin-top:24px;}
  .contacto-info dt{
    font-family:var(--font-utility); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--gold); white-space:nowrap;
  }
  .contacto-info dd{color:var(--ivory-dim);}
  form{display:flex; flex-direction:column; gap:18px; margin-top:6px;}
  form label{
    font-family:var(--font-utility); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ivory-dim); margin-bottom:8px; display:block;
  }
  form input, form textarea{
    width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
    color:var(--ivory); font-family:var(--font-body); font-size:1rem; padding:8px 2px;
  }
  form input:focus, form textarea:focus{ outline:none; border-color:var(--gold-light); }
  form button{
    align-self:flex-start; margin-top:14px; cursor:pointer; background:var(--gold);
    border:1px solid var(--gold); color:var(--bg-dark); font-family:var(--font-utility);
    font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase; padding:15px 32px;
    transition:background 0.3s ease;
  }
  form button:hover{background:var(--gold-light);}

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--gold-light); outline-offset:3px;
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:56px 40px 40px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
    font-family:var(--font-utility); font-size:0.76rem; color:var(--ivory-dim);
  }
  footer .foot-links{display:flex; gap:22px; flex-wrap:wrap;}
  footer .foot-links a:hover{color:var(--gold-light);}