/* =========================================================
   ABO · Banco de Sangre e Inmunohematología
   Sistema de diseño — clínico, preciso, humano
   ========================================================= */

:root{
  /* Paleta */
  --brand-red:#D11D00;   /* rojo del logo — acentos vivos */
  --blood:#A50E12;       /* crimson profundo — botones / acentos grandes */
  --maroon:#6E0B0F;      /* bandas oscuras / profundidad */
  --maroon-2:#4E070A;
  --ink:#1C1719;         /* texto casi negro, cálido */
  --gray:#686868;        /* gris de marca — texto secundario / etiquetas */
  --gray-2:#8B8688;
  --mist:#F6F3F2;        /* fondo de secciones */
  --line:#E9E2E0;        /* filetes */
  --paper:#FFFFFF;

  --shadow-sm:0 1px 2px rgba(28,23,25,.06), 0 4px 14px rgba(28,23,25,.05);
  --shadow-md:0 10px 30px rgba(28,23,25,.10);
  --shadow-lg:0 30px 60px rgba(110,11,15,.18);

  --r:14px; --r-lg:22px; --r-pill:999px;

  --f-display:'Archivo', system-ui, sans-serif;
  --f-body:'IBM Plex Sans', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;

  --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px)}

/* Focus visible */
:focus-visible{outline:3px solid var(--brand-red); outline-offset:3px; border-radius:6px}

.skip{position:absolute; left:16px; top:-60px; background:var(--ink); color:#fff;
  padding:10px 16px; border-radius:8px; z-index:200; transition:top .2s}
.skip:focus{top:12px}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:800; line-height:1.04;
  letter-spacing:-.02em; margin:0; color:var(--ink)}
h1{font-size:clamp(2.35rem,5.4vw,4.3rem); font-weight:900}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:1.22rem; letter-spacing:-.01em}
p{margin:0}

.eyebrow{font-family:var(--f-mono); font-size:.8rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blood);
  display:flex; align-items:center; gap:.6em; margin:0 0 1.1rem}
.eyebrow.center{justify-content:center}
.eyebrow.light{color:#f3c9c4}
.eyebrow .tick{letter-spacing:-.1em; opacity:.7}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; gap:.55em; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:.98rem;
  padding:.8em 1.4em; border-radius:var(--r-pill); border:2px solid transparent;
  cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s;
  white-space:nowrap}
.btn svg{width:1.15em; height:1.15em; fill:currentColor}
.btn-lg{padding:1em 1.7em; font-size:1.05rem}
.btn-red{background:var(--blood); color:#fff; box-shadow:0 8px 22px rgba(165,14,18,.28)}
.btn-red:hover{background:var(--brand-red); transform:translateY(-2px); box-shadow:0 14px 30px rgba(209,29,0,.34)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px)}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86); backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; gap:1.5rem; height:82px}
.brand{flex-shrink:0; display:flex; align-items:center}
.brand img{height:52px; width:auto}

.nav{display:flex; gap:1.9rem; margin-left:auto}
.nav a{font-family:var(--f-display); font-weight:600; font-size:.98rem; color:var(--ink);
  position:relative; padding:.3em 0; transition:color .18s}
.nav a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--brand-red); transition:width .22s var(--ease)}
.nav a:hover{color:var(--blood)} .nav a:hover::after{width:100%}

.header-actions{display:flex; align-items:center; gap:.9rem}
.pulse-badge{display:inline-flex; align-items:center; gap:.5em; font-family:var(--f-mono);
  font-size:.74rem; font-weight:500; letter-spacing:.08em; color:var(--maroon);
  background:#fbeae8; border:1px solid #f3d3ce; padding:.45em .8em; border-radius:var(--r-pill)}
.pulse-badge .dot{width:8px; height:8px; border-radius:50%; background:var(--brand-red);
  box-shadow:0 0 0 0 rgba(209,29,0,.5); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(209,29,0,.5)}70%{box-shadow:0 0 0 9px rgba(209,29,0,0)}100%{box-shadow:0 0 0 0 rgba(209,29,0,0)}}

.menu-toggle{display:none; flex-direction:column; gap:5px; width:44px; height:44px;
  align-items:center; justify-content:center; background:none; border:0; cursor:pointer}
.menu-toggle span{width:24px; height:2.4px; background:var(--ink); border-radius:2px;
  transition:transform .25s var(--ease), opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative; background:
   radial-gradient(120% 90% at 90% -10%, #fbeeec 0%, rgba(251,238,236,0) 55%),
   linear-gradient(180deg,#fff 0%, var(--mist) 100%);
   padding:clamp(3rem,7vw,6rem) 0 clamp(3.5rem,7vw,6rem); overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.hero-copy{max-width:600px}
.hero h1{margin:.2em 0 .5em}
.hero h1 em{font-style:normal; color:var(--blood);
  background:linear-gradient(180deg, transparent 62%, #fbdcd7 62%)}
.lead{font-size:1.14rem; color:#463d40; max-width:52ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:.9rem; margin:2rem 0 1.7rem}

.hero-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.8rem 1.5rem}
.hero-chips li{display:flex; align-items:center; gap:.55em; font-size:.92rem; font-weight:500; color:#463d40}
.hero-chips svg{width:20px; height:20px; fill:none; stroke:var(--blood); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}

/* Hero media */
.hero-media{position:relative}
.hero-frame{position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.6); rotate:1.4deg;
  transition:rotate .4s var(--ease)}
.hero-frame:hover{rotate:0deg}
.hero-frame img{width:100%; aspect-ratio:4/5; object-fit:cover}
.hero-frame::after{content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(110,11,15,0) 55%, rgba(78,7,10,.35) 100%)}
.hero-card{position:absolute; left:18px; bottom:18px; z-index:2;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border-radius:14px; padding:.9rem 1.1rem; box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; gap:.1rem; rotate:-1.4deg}
.hero-card__label{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gray)}
.hero-card__value{font-family:var(--f-display); font-weight:900; font-size:1.5rem; color:var(--blood); line-height:1}
.hero-card__meta{font-size:.76rem; color:var(--gray)}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{background:var(--ink); color:#fff; overflow:hidden; padding:.85rem 0;
  border-block:1px solid #000}
.marquee__track{display:inline-flex; align-items:center; gap:1.4rem; white-space:nowrap;
  font-family:var(--f-mono); font-size:.9rem; letter-spacing:.05em;
  animation:scroll 28s linear infinite; will-change:transform}
.marquee__track span{opacity:.92}
.marquee__track .sep{color:var(--brand-red); font-weight:600}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   SECCIONES base
   ========================================================= */
.section{padding:clamp(3.5rem,7vw,6.5rem) 0}
.section-head{max-width:640px; margin:0 auto clamp(2.2rem,4vw,3.2rem); text-align:center}
.section-head h2{margin-bottom:.5rem}
.section-sub{color:#54494c; font-size:1.06rem}
.center{text-align:center}

/* =========================================================
   POR QUÉ ABO — acróstico
   ========================================================= */
.why{background:var(--mist)}
.acrostic{display:flex; align-items:center; gap:clamp(1.5rem,4vw,3.5rem);
  justify-content:center; flex-wrap:wrap; margin-bottom:clamp(2.5rem,5vw,4rem)}
.acrostic__mark{font-family:var(--f-display); font-weight:900; line-height:.82;
  font-size:clamp(4.5rem,11vw,8.5rem); display:flex; letter-spacing:-.04em}
.acrostic__mark .a{color:var(--ink)}
.acrostic__mark .b{color:var(--gray)}
.acrostic__mark .o{color:var(--blood)}
.acrostic__lines{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem;
  border-left:3px solid var(--brand-red); padding-left:1.5rem}
.acrostic__lines li{font-size:clamp(1.05rem,2.2vw,1.5rem); font-weight:500; color:#3a3134}
.acrostic__lines b{font-family:var(--f-display); font-weight:900; color:var(--blood)}

/* Feature grid */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem)}
.feature{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.9rem 1.7rem; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s}
.feature:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:#f0d8d3}
.feature__ico{display:inline-flex; width:52px; height:52px; border-radius:14px;
  align-items:center; justify-content:center; background:#fbeae8; margin-bottom:1.1rem}
.feature__ico svg{width:27px; height:27px; fill:none; stroke:var(--blood); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.feature h3{margin-bottom:.5rem}
.feature p{color:#54494c; font-size:.98rem}
.feature--accent{background:linear-gradient(160deg,var(--maroon),var(--maroon-2)); border-color:transparent}
.feature--accent h3,.feature--accent p{color:#fff}
.feature--accent p{color:#f0d4d1}
.feature--accent .feature__ico{background:rgba(255,255,255,.12)}
.feature--accent .feature__ico svg{stroke:#fff}

/* =========================================================
   TIPOS DE SANGRE — herramienta interactiva
   ========================================================= */
.type-picker{display:grid; grid-template-columns:repeat(8,1fr); gap:.6rem; margin-bottom:2rem}
.type-btn{position:relative; font-family:var(--f-mono); font-weight:600; font-size:1.15rem;
  padding:1.1rem .4rem; border-radius:14px; border:1.5px solid var(--line); background:var(--paper);
  color:var(--ink); cursor:pointer; transition:all .2s var(--ease)}
.type-btn:hover{border-color:var(--blood); transform:translateY(-3px); box-shadow:var(--shadow-sm)}
.type-btn[aria-selected="true"]{background:var(--blood); color:#fff; border-color:var(--blood);
  box-shadow:0 10px 22px rgba(165,14,18,.3)}

.type-detail{display:grid; grid-template-columns:300px 1fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:center; background:var(--mist); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.6rem)}
.type-detail__bag{position:relative; text-align:center}
.type-detail__bag img{width:200px; margin-inline:auto; filter:drop-shadow(0 18px 26px rgba(28,23,25,.18));
  transition:transform .35s var(--ease)}
.type-detail__bag img:hover{transform:translateY(-6px) rotate(-2deg)}
.type-detail__badge{display:inline-block; margin-top:.8rem; font-family:var(--f-mono);
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  color:var(--maroon); background:#fbeae8; border:1px solid #f3d3ce;
  padding:.35em .8em; border-radius:var(--r-pill)}
.type-detail__badge:empty{display:none}
.type-detail__data h3{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.35rem}
.type-detail__data > p{color:#54494c; margin-bottom:1.4rem}

.compat{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
.compat__head{display:flex; align-items:center; gap:.5em; font-family:var(--f-display);
  font-weight:700; font-size:.92rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--gray); margin-bottom:.8rem}
.compat__head svg{width:18px; height:18px; fill:none; stroke:var(--blood); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.compat__list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.compat__list li{font-family:var(--f-mono); font-weight:600; font-size:.95rem;
  padding:.4em .7em; border-radius:9px; background:var(--paper); border:1.5px solid var(--line); color:var(--ink)}
.compat__list li.hit{background:#eef6ee; border-color:#bfe0bf; color:#2c6a2f}
.compat__col:first-child .compat__list li.hit{background:#fbeae8; border-color:#f0c9c3; color:var(--blood)}

.disclaimer{text-align:center; font-size:.86rem; color:var(--gray); margin-top:1.4rem; max-width:60ch; margin-inline:auto}

/* =========================================================
   BANDA TRANSFUSIÓN
   ========================================================= */
.band{position:relative; background:var(--maroon); color:#fff; overflow:hidden}
.band::before{content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--band-img); background-size:cover; background-position:center;
  opacity:.22; mix-blend-mode:luminosity}
.band::after{content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, var(--maroon-2) 30%, rgba(78,7,10,.65) 100%)}
.band-inner{position:relative; z-index:1; padding:clamp(3.5rem,7vw,6rem) 0}
.band-copy{max-width:620px}
.band-copy h2{color:#fff; margin-bottom:1rem}
.band-copy > p{color:#f0d4d1; margin-bottom:1.6rem; font-size:1.08rem}
.band-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem}
.band-list li{display:flex; align-items:center; gap:1rem; font-size:1.1rem; font-weight:500;
  padding-bottom:.9rem; border-bottom:1px solid rgba(255,255,255,.14)}
.band-list li:last-child{border-bottom:0; padding-bottom:0}
.band-list span{font-family:var(--f-mono); font-size:.85rem; color:#f3c9c4;
  border:1.5px solid rgba(243,201,196,.4); border-radius:8px; padding:.35em .55em; flex-shrink:0}

/* =========================================================
   PRUEBAS SEROLÓGICAS
   ========================================================= */
.serology-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.test-grid{list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:.7rem}
.test-grid li{display:flex; align-items:center; gap:.9rem; font-size:.96rem; color:#54494c;
  padding:.7rem .9rem; background:var(--mist); border-radius:12px; border:1px solid var(--line)}
.test-code{font-family:var(--f-mono); font-weight:600; font-size:.9rem; color:var(--blood);
  background:var(--paper); border:1.5px solid #f0d8d3; border-radius:8px; padding:.4em .6em;
  min-width:96px; text-align:center; flex-shrink:0}
.serology-media img{border-radius:var(--r-lg); box-shadow:var(--shadow-md); aspect-ratio:3/2.4; object-fit:cover; width:100%}

/* =========================================================
   DONAR
   ========================================================= */
.donate{background:var(--mist)}
.donate-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.donate-media img{border-radius:var(--r-lg); box-shadow:var(--shadow-md); aspect-ratio:3/2.4; object-fit:cover; width:100%}
.req-list{list-style:none; margin:1.6rem 0; padding:0; display:grid; gap:.7rem}
.req-list li{position:relative; padding-left:2rem; color:#463d40; font-size:1rem}
.req-list li::before{content:""; position:absolute; left:0; top:.35em; width:18px; height:18px;
  border-radius:50%; background:var(--blood);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.5 8 19 6.6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.5 8 19 6.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.req-foot{margin-top:1rem; font-size:.9rem; color:var(--gray)}

/* =========================================================
   CONTACTO
   ========================================================= */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.5rem,3vw,2.5rem)}
.contact-cards{display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-content:start}
.c-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem; display:flex; flex-direction:column; gap:.25rem; box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
a.c-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.c-card__ico{width:44px; height:44px; border-radius:12px; background:#fbeae8;
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:.5rem}
.c-card__ico svg{width:23px; height:23px; fill:none; stroke:var(--blood); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.c-card__k{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray)}
.c-card__v{font-family:var(--f-display); font-weight:800; font-size:1.2rem; color:var(--ink)}
.c-card__meta{font-size:.85rem; color:#54494c}
.c-card__cta{font-size:.85rem; font-weight:600; color:var(--blood); margin-top:.3rem}
.c-card--red{background:linear-gradient(160deg,var(--blood),var(--maroon)); border-color:transparent}
.c-card--red *{color:#fff !important}
.c-card--red .c-card__ico{background:rgba(255,255,255,.15)}
.c-card--red .c-card__ico svg{stroke:#fff}

.contact-map{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md);
  border:1px solid var(--line); min-height:340px}
.contact-map iframe{width:100%; height:100%; min-height:340px; border:0; display:block; filter:grayscale(.2) contrast(1.02)}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--ink); color:#d9d1d3}
.footer-inner{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem;
  padding:clamp(3rem,5vw,4.5rem) 0 2.5rem}
.footer-brand img{height:56px; width:auto; margin-bottom:1.1rem}
.footer-brand p{color:#a89fa2; font-size:.95rem; max-width:42ch}
.footer-col h4{font-size:.8rem; font-family:var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  color:#8c8386; margin-bottom:1rem; font-weight:500}
.footer-col a,.footer-col span{display:block; color:#d9d1d3; font-size:.95rem; margin-bottom:.6rem; transition:color .18s}
.footer-col a:hover{color:var(--brand-red)}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1.4rem 0 2rem; border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; color:#8c8386}
.footer-credit{font-family:var(--f-mono)}

/* =========================================================
   REVEAL on scroll
   ========================================================= */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr; gap:2.5rem}
  .hero-media{max-width:440px; margin-inline:auto; width:100%}
  .serology-grid,.donate-grid,.contact-grid{grid-template-columns:1fr}
  .donate-media{order:2}
  .type-detail{grid-template-columns:1fr; text-align:center}
  .compat{text-align:left; max-width:520px; margin-inline:auto}
}
@media (max-width:760px){
  .nav{position:fixed; inset:82px 0 auto 0; flex-direction:column; gap:0; margin:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:.5rem 0;
    box-shadow:var(--shadow-md); clip-path:inset(0 0 100% 0); transition:clip-path .3s var(--ease)}
  .nav.open{clip-path:inset(0 0 0 0)}
  .nav a{padding:1rem clamp(20px,5vw,48px); width:100%}
  .nav a::after{display:none}
  .menu-toggle{display:flex}
  .header-call{display:none}
  .pulse-badge{display:none}
  .type-picker{grid-template-columns:repeat(4,1fr)}
  .compat{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr; gap:2rem}
}
@media (max-width:420px){
  .hero-chips{flex-direction:column; gap:.6rem}
  .contact-cards{grid-template-columns:1fr}
  .btn-lg{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
  .marquee__track{animation:none}
}