/* ============================================================
   TEMA OSANE A.C. — sobre Bootstrap 5
   Base del skill sitio-estatico. Personaliza el :root con los
   tokens de la marca; los componentes heredan de ahí.
   Paleta: blanco · negro · rojo (#ed1c24).
   ============================================================ */

:root {
  /* --- TOKENS DE MARCA --- */
  --brand:       #ed1c24;   /* rojo de marca (logo)          */
  --brand-dark:  #c20f17;   /* variante oscura (hover)        */
  --accent:      #141414;   /* negro: footer, topbar, secc.   */
  --accent-2:    #000000;
  --bg:          #ffffff;
  --bg-2:        #f4f2f0;   /* secciones alternas             */
  --surface:     #ffffff;
  --ink:         #141414;
  --ink-soft:    #4a4744;
  --line:        #e7e3df;
  --link:        var(--brand);

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Mulish", system-ui, sans-serif;

  /* --- Mapeo a Bootstrap --- */
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-primary: var(--brand);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--brand-dark);
  --bs-border-color: var(--line);

  --shadow-soft: 0 10px 30px rgba(20,20,20,.08);
  --shadow-card: 0 8px 30px rgba(20,20,20,.10);
  --radius: 16px;
}

/* ---------- Tipografía ---------- */
body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,.font-display { font-family: var(--font-display); color: var(--ink); font-weight: 600; line-height: 1.15; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .9rem; font-weight: 800; color: var(--brand); }
.lead-soft { font-size: 1.2rem; color: var(--ink-soft); }
a { color: var(--link); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---------- Botones ---------- */
.btn { border-radius: 999px; font-weight: 700; padding: .75rem 1.7rem; font-size: 1.05rem; transition: all .18s ease; }
.btn-brand { background: var(--brand); color: #fff; border: 2px solid var(--brand); box-shadow: var(--shadow-card); }
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; transform: translateY(-2px); }
.btn-outline-brand { background: transparent; color: var(--ink); border: 2px solid var(--accent); }
.btn-outline-brand:hover { background: var(--accent); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; border: 2px solid var(--accent); }
.btn-accent:hover { background: #000; border-color: #000; color: #fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid transparent; }
.btn-ghost:hover { color: var(--brand-dark); }
.btn-light-brand { background:#fff; color:var(--brand); border:2px solid #fff; }
.btn-light-brand:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---------- Topbar (barra de anuncio) ---------- */
.topbar { background: var(--brand); color:#fff; font-size:.9rem; font-weight:700; letter-spacing:.05em; }
.topbar i { color:#fff; }

/* ---------- Navbar ---------- */
.navbar-site { background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
/* Emblema (Santa + Niño) + nombre al lado */
.navbar-site .navbar-brand img { height: 58px; width: auto; }

/* ============================================================
   Cabecera centrada con transición a compacta (izquierda)
   ============================================================ */
.site-header { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); z-index: 1020; }
.site-header .container { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.3rem; padding: 1.2rem 12px 1.4rem; transition: padding .28s ease, gap .28s ease; }

.site-header .brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; text-decoration: none; transition: opacity .18s ease; }
.site-header .brand-emblema { display: none; }              /* solo el santa, aparece en compacto */
.site-header .brand-full { height: 128px; width: auto; }    /* emblema + OSANE, estado centrado */
.site-header .brand-text { display: flex; flex-direction: column; }
.site-header .brand-wordmark { display: none; }             /* "OSANE" real del logo, aparece en compacto */
.site-header .brand-sub { color: var(--ink-soft); font-weight: 600; font-size: .98rem; line-height: 1.25; max-width: 66ch; }

.site-header .nav-row { display: flex; align-items: center; gap: .5rem; }
.site-header .nav-link { color: var(--ink); font-weight: 600; padding: .6rem 1.2rem; border-radius: 999px; text-decoration: none; transition: background .15s; }
.site-header .nav-link:hover { background: var(--bg-2); }
.site-header .nav-cta { margin-left: .4rem; }
.site-header .nav-toggle { display: none; background: none; border: 0; font-size: 1.7rem; color: var(--brand); position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 6; }

/* --- estado compacto al hacer scroll (escritorio) --- */
.site-header.compact .container { flex-direction: row; justify-content: space-between; align-items: center; padding: .5rem 12px; gap: 1rem; }
.site-header.compact .brand { flex-direction: row; align-items: center; text-align: left; gap: .85rem; }
.site-header.compact .brand-full { display: none; }
.site-header.compact .brand-emblema { display: block; height: 56px; width: auto; }
.site-header.compact .brand-text { align-items: flex-start; }
.site-header.compact .brand-wordmark { display: block; height: 24px; width: auto; margin-bottom: .35rem; }
.site-header.compact .brand-sub { font-size: .76rem; max-width: 40ch; }

@media (max-width: 991px) {
  .site-header .container { padding: .9rem 48px .9rem 12px; }
  .site-header .nav-toggle { display: block; }
  .site-header .brand-full { height: 84px; }
  .site-header .brand-sub { font-size: .82rem; }
  /* menú como panel desplegable anclado debajo de la cabecera */
  .site-header .nav-row { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: .2rem; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card); padding: 12px 16px; }
  .site-header .nav-row.open { display: flex; }
  .site-header .nav-link, .site-header .nav-cta { width: 100%; text-align: center; }
  /* compacto en móvil: igual que escritorio (emblema + OSANE/subtítulo a la izquierda) */
  .site-header.compact .container { flex-direction: row; justify-content: flex-start; align-items: center; padding: .5rem 48px .5rem 12px; }
  .site-header.compact .brand { flex-direction: row; align-items: center; text-align: left; gap: .7rem; }
  .site-header.compact .brand-full { display: none; }
  .site-header.compact .brand-emblema { display: block; height: 46px; }
  .site-header.compact .brand-wordmark { display: block; height: 19px; }
  .site-header.compact .brand-text { align-items: flex-start; }
  .site-header.compact .brand-sub { font-size: .68rem; max-width: 62vw; }
}
.navbar-site .brand-name { font-family: var(--font-display); font-weight:700; font-size:1.6rem; color:var(--brand); line-height:1.05; }
.navbar-site .brand-sub { font-size:.82rem; color:var(--ink-soft); }
.navbar-site .nav-link { color: var(--ink); font-weight: 600; margin: 0 .25rem; padding:.6rem 1rem; position: relative; border-radius:999px; }
.navbar-site .nav-link:hover { background: var(--bg-2); }
.navbar-site .nav-link.active { background: var(--accent); color:#fff; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 480px at 82% -12%, rgba(237,28,36,.10), transparent),
    linear-gradient(180deg,#ffffff 0%, var(--bg-2) 100%);
}
.hero .container { position:relative; z-index:1; }
.hero-marca { position:absolute; right:-40px; top:50%; transform:translateY(-50%); width:360px; max-width:38vw; opacity:.07; pointer-events:none; z-index:0; }

/* saludo / chip de hero */
.saludo { display:inline-block; background:var(--accent); color:#fff; font-weight:700; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; padding:6px 14px; border-radius:999px; }

/* collage de fotos del hero */
.hero-collage { display:grid; grid-template-columns:1.25fr 1fr; grid-template-rows:1fr 1fr; gap:14px; min-height:420px; }
.hero-collage .foto { border-radius:var(--radius); overflow:hidden; position:relative; background:repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 14px,#ebe6e1 14px,#ebe6e1 28px); border:2px dashed #cfc7bd; display:grid; place-items:center; text-align:center; color:#8d8479; font-weight:600; font-size:.9rem; padding:16px; }
.hero-collage .foto img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-collage .grande { grid-row:span 2; border:6px solid transparent;
  background-image:
    repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 14px,#ebe6e1 14px,#ebe6e1 28px),
    repeating-linear-gradient(45deg,var(--brand) 0,var(--brand) 12px,#2b6fb3 12px,#2b6fb3 24px,#fff 24px,#fff 36px);
  background-origin:padding-box,border-box; background-clip:padding-box,border-box; }
.foto-badge { position:absolute; bottom:10px; left:10px; background:rgba(20,20,20,.72); color:#fff; font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; z-index:2; }

/* ---------- Secciones ---------- */
.section { padding:4.5rem 0; }
.section-alt { background:var(--bg-2); }
.section-dark { background:var(--accent); color:#fff; }
.section-dark h1,.section-dark h2,.section-dark h3 { color:#fff; }
.section-dark .eyebrow { color:#ff5a61; }
@media (max-width:991px){ .section { padding:3.2rem 0; } }

/* ---------- Tarjetas ---------- */
.card-soft { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-card); height:100%; padding:1.75rem; }
.card-soft h3 { color:var(--brand); font-size:1.25rem; margin-bottom:.4rem; }
.section-dark .card-soft { background:#1f1d1b; border-color:#312e2b; color:rgba(255,255,255,.82); }
.section-dark .card-soft h3 { color:#fff; }
.ico { width:54px; height:54px; border-radius:12px; background:var(--bg-2); color:var(--brand); display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:.9rem; }
.section-dark .ico { background:#2a2724; }

/* placeholder visible */
.placeholder-flag { display:inline-block; background:repeating-linear-gradient(45deg,#fff6cc,#fff6cc 6px,#ffe9a8 6px,#ffe9a8 12px); border:1px dashed #c79a12; color:#8a6d0b; font-size:.7rem; font-weight:700; padding:1px 8px; border-radius:6px; }
.ph-aviso { background:#fff3f3; border:1px dashed var(--brand); border-radius:12px; padding:14px 18px; font-size:.92rem; color:#9a2a2f; }

/* ---------- Cifras ---------- */
.cifra b { font-family:var(--font-display); font-size:2.4rem; color:var(--brand); display:block; line-height:1; }
.cifra span { font-weight:600; font-size:.9rem; color:var(--ink-soft); }
.section-dark .cifra b { color:var(--brand); }
.section-dark .cifra span { color:rgba(255,255,255,.82); }

/* ---------- Cita + marco correo aéreo ---------- */
.cita { font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.4; color:var(--ink); font-style:italic; }
.cita cite { display:block; font-size:.95rem; font-style:normal; color:var(--ink-soft); margin-top:14px; font-family:var(--font-body); }
.airmail { position:relative; background:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-card); border:3px solid transparent;
  background-image: linear-gradient(#fff,#fff), repeating-linear-gradient(45deg,var(--brand) 0,var(--brand) 12px,#2b6fb3 12px,#2b6fb3 24px,#fff 24px,#fff 36px);
  background-origin:border-box; background-clip:padding-box,border-box; }

/* ---------- Banda de aniversario ---------- */
.aniversario { background:var(--accent); color:#fff; text-align:center; padding:26px 24px; }
.aniversario .num { font-family:var(--font-display); font-size:clamp(2.4rem,7vw,4rem); line-height:1; color:var(--brand); display:block; }
.aniversario .txt { font-weight:700; font-size:1.05rem; }
.aniversario .anios { font-size:.85rem; color:rgba(255,255,255,.6); letter-spacing:.12em; text-transform:uppercase; }

/* ---------- Impacto (cifras con fuente) ---------- */
.impacto .grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.impacto .n { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:28px 20px; text-align:center; }
.impacto .n b { font-family:var(--font-display); font-size:clamp(2.2rem,5vw,3.2rem); color:var(--brand); display:block; line-height:1; }
.impacto .n b::after { content:attr(data-suffix); font-size:.5em; vertical-align:super; }
.impacto .n span { font-weight:700; color:var(--ink); display:block; margin-top:.4rem; }
.impacto .n small { color:var(--ink-soft); font-size:.82rem; }
.impacto .fuente { font-size:.8rem; color:var(--ink-soft); margin-top:1.4rem; margin-bottom:0; }
.impacto .fuente i { color:var(--brand); }
@media (max-width:991px){ .impacto .grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .impacto .grid { grid-template-columns:1fr; } }

/* ---------- Transparencia del donativo ---------- */
.transp { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start; }
@media (max-width:991px){ .transp { grid-template-columns:1fr; } }
.paquete { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:30px; }
.paquete h3 { color:var(--ink); font-size:1.25rem; margin-bottom:1rem; }
.paquete .item { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px dashed var(--line); }
.paquete .item:last-of-type { border-bottom:0; }
.paquete .item i { color:var(--brand); margin-right:.5rem; }
.paquete .item .v { font-family:var(--font-display); font-weight:700; color:var(--brand); white-space:nowrap; }
.paquete .total { display:flex; justify-content:space-between; gap:14px; margin-top:1rem; padding-top:1rem; border-top:2px solid var(--accent); font-weight:800; }
.transp-nota { font-size:.95rem; color:var(--ink-soft); }

/* ---------- Chips ---------- */
.chips { display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; list-style:none; }
.chips li { background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-weight:600; font-size:.95rem; color:var(--ink); }
.chips li i { color:var(--brand); margin-right:.4rem; }

/* ---------- Lema ---------- */
.lema { text-align:center; font-family:var(--font-display); font-size:clamp(1.8rem,5vw,3rem); color:#fff; margin:0; }
.lema span { color:var(--brand); }

/* ---------- Pasos ---------- */
.pasos { list-style:none; padding:0; margin:0; counter-reset:paso; display:grid; gap:18px; }
.pasos li { display:grid; grid-template-columns:48px 1fr; gap:16px; align-items:start; }
.pasos li::before { counter-increment:paso; content:counter(paso); width:48px; height:48px; background:var(--brand); color:#fff; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.2rem; }
.pasos h3 { margin-bottom:.2em; color:var(--brand); font-size:1.2rem; }
.pasos p { margin:0; color:var(--ink-soft); }

/* ---------- Lista con check ---------- */
.lista-check { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.lista-check li { display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start; color:var(--ink-soft); }
.lista-check li i { color:var(--brand); margin-top:.2rem; }

/* ---------- Caja de datos ---------- */
.caja-info { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-card); border:1px solid var(--line); padding:30px; }
.dato { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--bg-2); }
.dato:last-child { border-bottom:0; }
.dato .et { font-weight:800; color:var(--ink); min-width:110px; }

/* ---------- Mapa ---------- */
.mapa { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card); border:1px solid var(--line); line-height:0; }
.mapa iframe { width:100%; height:340px; border:0; display:block; }

/* ---------- Notas de prensa ---------- */
.nota-card { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: var(--ink); }
.nota-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(20,20,20,.14); }
.nota-anio { font-family: var(--font-display); font-weight: 700; color: var(--brand); font-size: 1.1rem; }
.nota-card h3 { color: var(--ink); font-size: 1.1rem; margin: 0; }
.nota-fuente { font-size: .85rem; color: var(--ink-soft); font-weight: 600; margin-top: auto; }
.nota-fuente i { color: var(--brand); margin-right: .4rem; }
.notas-anio-titulo { font-family: var(--font-display); font-weight: 700; color: var(--brand); font-size: 1.6rem; margin: 0 0 1rem; }

/* ---------- Aliados ---------- */
.aliados { display:flex; flex-wrap:wrap; gap:12px; padding:0; margin:0; list-style:none; }
.aliados li { background:#fffaf0; border:1px dashed var(--brand); border-radius:10px; padding:10px 18px; font-weight:700; font-size:.98rem; color:var(--ink); }

/* ---------- Franja CTA ---------- */
.franja-cta { background:var(--brand); color:#fff; border-radius:var(--radius); padding:44px; text-align:center; box-shadow:var(--shadow-card); }
.franja-cta h2 { color:#fff; }
.franja-cta p { color:rgba(255,255,255,.92); max-width:50ch; margin-inline:auto; }

/* ---------- Acordeón (FAQ) ---------- */
.accordion-button { font-family:var(--font-display); font-weight:600; color:var(--ink); }
.accordion-button:not(.collapsed) { background:rgba(237,28,36,.06); color:var(--brand-dark); box-shadow:none; }
.accordion-button:focus { box-shadow:none; border-color:var(--brand); }
.accordion-item { border:1px solid var(--line); border-radius:12px !important; margin-bottom:.75rem; overflow:hidden; }

/* ---------- Footer ---------- */
.footer { background:var(--accent); color:rgba(255,255,255,.82); padding:3.5rem 0 1.5rem; }
.footer a { color:rgba(255,255,255,.82); text-decoration:none; }
.footer a:hover { color:var(--brand); }
.footer h6 { color:#fff; font-family:var(--font-display); text-transform:none; letter-spacing:0; font-size:1.1rem; }
.footer .social a { width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); color:#fff; font-size:1.2rem; margin-right:.6rem; transition:all .15s ease; }
.footer .social a:hover { background:var(--brand); color:#fff; transform:translateY(-2px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.15); margin-top:2rem; padding-top:1.2rem; font-size:.85rem; color:rgba(255,255,255,.55); }

/* ---------- Utilidades ---------- */
.text-brand { color:var(--brand) !important; }
.bg-alt { background:var(--bg-2) !important; }
.rounded-soft { border-radius:var(--radius) !important; }

/* WhatsApp flotante */
.wa-float { position:fixed; right:18px; bottom:18px; z-index:1030; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.7rem; box-shadow:0 8px 22px rgba(0,0,0,.25); text-decoration:none; transition:transform .2s ease; }
.wa-float:hover { transform:scale(1.08); color:#fff; }

/* responsive collage */
@media (max-width:991px){ .hero-collage { min-height:340px; } }
@media (max-width:575px){
  .hero-collage { grid-template-columns:1fr 1fr; }
  .navbar-site .navbar-brand img { height:52px; }
}