html{
scroll-behavior:smooth;
scroll-padding-top:20px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
line-height:1.6;
background:#ffffff;
color:#333;
position:relative;
overflow-x:hidden;
}

/* ==========================
BACKGROUND BLOBS - manchas irregulares pequeñas dispersas
========================== */

/* Mancha 1 - arriba izquierda, rosa */
body::before{
content:"";
position:fixed;
top:-60px;
left:-80px;
width:320px;
height:280px;
background:#ffd9e8;
border-radius:68% 32% 55% 45% / 48% 62% 38% 52%;
opacity:.75;
filter:blur(45px);
z-index:-10;
pointer-events:none;
}

/* Mancha 2 - abajo derecha, verde */
body::after{
content:"";
position:fixed;
bottom:-50px;
right:-60px;
width:300px;
height:260px;
background:#dcffd8;
border-radius:42% 58% 38% 62% / 55% 38% 62% 45%;
opacity:.75;
filter:blur(45px);
z-index:-10;
pointer-events:none;
}

/* Mancha 3 - centro izquierda, rosa claro */
.blob-center-left{
position:fixed;
top:38%;
left:-90px;
width:220px;
height:200px;
background:#ffe8f2;
border-radius:52% 48% 70% 30% / 35% 65% 35% 65%;
opacity:.6;
filter:blur(40px);
z-index:-10;
pointer-events:none;
}

/* Mancha 4 - centro, verde muy suave */
.blob-center{
position:fixed;
top:50%;
left:42%;
width:260px;
height:220px;
background:#e8fde8;
border-radius:60% 40% 45% 55% / 55% 45% 60% 40%;
opacity:.45;
filter:blur(50px);
z-index:-10;
pointer-events:none;
}

/* Mancha 5 - arriba derecha, rosa */
.blob-top-right{
position:fixed;
top:-40px;
right:-50px;
width:240px;
height:210px;
background:#ffd6e7;
border-radius:38% 62% 50% 50% / 60% 40% 60% 40%;
opacity:.65;
filter:blur(40px);
z-index:-10;
pointer-events:none;
}

/* Mancha 6 - centro derecha, verde */
.blob-center-right{
position:fixed;
top:55%;
right:-70px;
width:200px;
height:230px;
background:#d8fcd8;
border-radius:55% 45% 35% 65% / 42% 58% 42% 58%;
opacity:.6;
filter:blur(42px);
z-index:-10;
pointer-events:none;
}

/* Mancha 7 - abajo izquierda, verde */
.blob-bottom-left{
position:fixed;
bottom:15%;
left:-60px;
width:180px;
height:190px;
background:#d8fce0;
border-radius:45% 55% 62% 38% / 58% 42% 55% 45%;
opacity:.55;
filter:blur(38px);
z-index:-10;
pointer-events:none;
}

/* Mancha 8 - arriba centro, rosa muy suave */
.blob-top-center{
position:fixed;
top:-30px;
left:35%;
width:200px;
height:160px;
background:#ffe4ef;
border-radius:50% 50% 65% 35% / 40% 60% 40% 60%;
opacity:.5;
filter:blur(45px);
z-index:-10;
pointer-events:none;
}

/* ==========================
HERO
========================== */

.hero{
padding:80px 10%;
min-height:100vh;
display:flex;
align-items:center;
background:transparent;
position:relative;
}

.hero-content{
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
width:100%;
}

.hero-text{
flex:1;
}

.hero-tag{
display:inline-block;
background:#ffe5ee;
color:#e85a87;
padding:10px 18px;
border-radius:30px;
font-weight:bold;
margin-bottom:20px;
}

.hero h1{
font-size:4rem;
line-height:1.1;
color:#1b2b63;
margin-bottom:20px;
}

.hero p{
font-size:1.2rem;
margin-bottom:25px;
max-width:600px;
color:#555;
}

.blood-type{
display:inline-block;
background:#e8ffe8;
border:2px solid #5bcb5a;
padding:12px 20px;
border-radius:30px;
font-weight:bold;
margin-bottom:30px;
}

.hero-image{
flex:1;
display:flex;
justify-content:center;
}

.hero-image img{
width:100%;
max-width:500px;
height:650px;
object-fit:cover;
border-radius:25px;
box-shadow:0 15px 40px rgba(0,0,0,.15);
}

/* ==========================
BUTTONS
========================== */

.buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.btn{
padding:15px 25px;
border-radius:10px;
text-decoration:none;
font-weight:bold;
transition:.3s;
display:inline-block;
}

.primary{
background:#e85a87;
color:white;
}

.primary:hover{
transform:translateY(-3px);
}

.secondary{
background:#1b2b63;
color:white;
}

/* ==========================
MEET SOFIA
========================== */

.meet-sofia{
padding:100px 10%;
background:transparent;
position:relative;
}

.meet-content{
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
}

.meet-text{
flex:1;
}

.meet-label{
font-size:14px;
font-weight:bold;
letter-spacing:2px;
color:#e85a87;
}

.meet-text h2{
font-size:4rem;
line-height:1.1;
color:#1b2b63;
margin:20px 0;
}

.meet-text h2 span{
color:#e85a87;
}

.green-line{
width:80px;
height:4px;
background:#5bcb5a;
margin-bottom:30px;
}

.meet-text p{
font-size:1.1rem;
color:#555;
margin-bottom:15px;
max-width:600px;
}

.kindness-box{
margin-top:30px;
border:2px solid #e85a87;
padding:25px;
border-radius:20px;
font-weight:600;
color:#444;
background:rgba(255,255,255,.85);
backdrop-filter:blur(5px);
}

.meet-images{
flex:1;
position:relative;
min-height:650px;
}

.main-photo{
width:100%;
max-width:600px;
height:650px;
object-fit:cover;
border-radius:30px;
border:8px solid #e85a87;
}

.small-photo{
position:absolute;
width:220px;
height:220px;
object-fit:cover;
border-radius:25px;
border:8px solid white;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.top{
right:-40px;
top:80px;
}

.bottom{
right:-40px;
bottom:80px;
}

/* ==========================
WHY SOFIA - con íconos SVG circulares
========================== */

.why-sofia{
padding:70px 6%;
background:transparent;
position:relative;
}

.why-sofia h2{
text-align:center;
font-size:3rem;
margin-bottom:18px;
color:#1b2b63;
}

.why-sofia h2 span{
color:#e85a87;
}

/* corazón decorativo bajo el título */
.why-sofia h2::after{
content:"♥";
display:block;
font-size:1.2rem;
color:#e85a87;
margin-top:8px;
}

.why-cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
}

.why-card{
background:rgba(255,255,255,.92);
backdrop-filter:blur(5px);
padding:28px 22px;
border-radius:20px;
box-shadow:0 4px 18px rgba(0,0,0,.07);
text-align:center;
min-height:0;
border:1px solid rgba(0,0,0,.06);
}

/* Sin border-top de color - usamos el ícono como acento */
.why-card h3{
font-size:1rem;
margin-bottom:15px;
letter-spacing:.5px;
line-height:1.4;
}

.why-card.pink h3{
color:#e85a87;
}

.why-card.green h3{
color:#3db53c;
}

.why-card.blue h3{
color:#1b2b63;
}

.why-card p{
font-size:.9rem;
line-height:1.6;
color:#666;
}

/* Ícono circular */
.why-icon{
width:80px;
height:80px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 20px;
}

.why-icon svg{
width:60px;
height:60px;
}

.pink-icon{
background:#fff0f6;
border:2px solid #f7b8ce;
}

.green-icon{
background:#f0fff0;
border:2px solid #a8e6a8;
}

.blue-icon{
background:#eef0f8;
border:2px solid #9aa5cc;
}

/* ==========================
DONATION FACTS
========================== */

.donation-facts{
padding:100px 6%;
background:transparent;
position:relative;
}

.donation-facts h2{
text-align:center;
font-size:3rem;
margin-bottom:60px;
color:#1b2b63;
}

.facts-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.fact-card{
background:rgba(255,255,255,.85);
backdrop-filter:blur(5px);
padding:35px 25px;
border-radius:20px;
box-shadow:0 8px 20px rgba(0,0,0,.08);
text-align:center;
min-height:260px;
}

.fact-card h3{
font-size:1.2rem;
margin-bottom:15px;
color:#1b2b63;
}

.fact-card p{
color:#666;
line-height:1.6;
}

.fact-card.pink{
border-top:8px solid #e85a87;
}

.fact-card.green{
border-top:8px solid #5bcb5a;
}

.fact-card.blue{
border-top:8px solid #1b2b63;
}

/* ==========================
GENERAL
========================== */

.section{
padding:80px 10%;
}

.section h2{
text-align:center;
font-size:2.5rem;
margin-bottom:30px;
color:#1b2b63;
}

.gray{
background:#f7f8fb;
}

/* FAQ */

.faq{
max-width:900px;
margin:auto;
}

.faq details{
background:white;
padding:20px;
border-radius:10px;
margin-bottom:15px;
box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.faq summary{
cursor:pointer;
font-weight:bold;
}

/* CTA */

.cta{
background:#5bcb5a;
padding:80px 20px;
text-align:center;
color:white;
}

.cta h2{
font-size:3rem;
margin-bottom:20px;
}

.cta p{
margin-bottom:30px;
}

/* GALLERY */

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:15px;
}

.gallery img{
width:100%;
height:300px;
object-fit:cover;
border-radius:15px;
}

/* SOCIAL */

.socials{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
}

.socials a{
text-decoration:none;
font-weight:bold;
color:#e85a87;
font-size:1.1rem;
}

/* FOOTER */

footer{
background:#1b2b63;
color:white;
text-align:center;
padding:50px 20px;
}

footer h3{
margin-bottom:15px;
}

/* ==========================
MOBILE
========================== */

@media(max-width:900px){

.hero-content,
.meet-content{
flex-direction:column;
text-align:center;
}

.hero-content{
flex-direction:column-reverse;
}

.why-cards,
.facts-grid{
grid-template-columns:1fr;
}

.hero h1{
font-size:2.8rem;
}

.meet-text h2{
font-size:2.8rem;
}

.hero-image img,
.main-photo{
height:450px;
}

.small-photo{
display:none;
}

.buttons{
justify-content:center;
}

.green-line{
margin:20px auto;
}

.section h2,
.why-sofia h2,
.donation-facts h2{
font-size:2rem;
}

.cta h2{
font-size:2rem;
}

}


/* ==========================
CONSOLIDATED WHY + FACTS
========================== */

.why-lead{
max-width:820px;
margin:0 auto 38px;
text-align:center;
color:#4a5570;
font-size:1.05rem;
line-height:1.7;
}

.facts-heading{
text-align:center;
margin:55px 0 22px;
color:#1b2b63;
font-size:1.35rem;
letter-spacing:.3px;
}

.facts-strip{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
max-width:1150px;
margin:0 auto;
}

.fact-item{
background:rgba(255,255,255,.92);
border-left:4px solid #e85a87;
border-radius:12px;
padding:18px 20px;
font-size:.9rem;
line-height:1.6;
color:#5a6480;
box-shadow:0 3px 12px rgba(0,0,0,.06);
}

.fact-item:nth-child(2){border-left-color:#5bcb5a;}
.fact-item:nth-child(3){border-left-color:#1b2b63;}
.fact-item:nth-child(4){border-left-color:#e85a87;}

.fact-item strong{
display:block;
color:#1b2b63;
font-size:1rem;
margin-bottom:6px;
}

.facts-more{
text-align:center;
margin:24px 0 0;
font-size:.95rem;
color:#5a6480;
}

.facts-more a{
color:#e85a87;
font-weight:bold;
}

/* ==========================
HERO SHARE ICONS
========================== */

.hero-share{
display:flex;
align-items:center;
gap:10px;
margin-top:22px;
flex-wrap:wrap;
}

.hero-share-label{
font-size:.9rem;
color:#5a6480;
margin-right:2px;
}

.share-icon{
width:38px;
height:38px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
background:#fff;
border:1px solid rgba(27,43,99,.15);
box-shadow:0 2px 8px rgba(0,0,0,.07);
cursor:pointer;
padding:0;
transition:transform .15s ease, background .15s ease;
}

.share-icon svg{
width:19px;
height:19px;
fill:#1b2b63;
}

.share-icon:hover{
transform:translateY(-2px);
background:#1b2b63;
}

.share-icon:hover svg{
fill:#fff;
}

.share-icon.copied{
background:#5bcb5a;
border-color:#5bcb5a;
}

.share-icon.copied svg{
fill:#fff;
}

@media(max-width:900px){

.facts-strip{
grid-template-columns:repeat(2,1fr);
}

.why-cards{
grid-template-columns:1fr;
}

.hero-share{
justify-content:center;
}

}

@media(max-width:560px){

.facts-strip{
grid-template-columns:1fr;
}

}


/* ==========================
LANGUAGE SWITCH
========================== */

.lang-switch{
position:absolute;
top:18px;
right:6%;
z-index:20;
display:flex;
align-items:center;
gap:8px;
font-size:.85rem;
background:rgba(255,255,255,.9);
border:1px solid rgba(27,43,99,.15);
border-radius:999px;
padding:6px 14px;
box-shadow:0 2px 8px rgba(0,0,0,.07);
}

.lang-switch a{
color:#1b2b63;
font-weight:bold;
text-decoration:none;
}

.lang-switch a:hover{
color:#e85a87;
text-decoration:underline;
}

.lang-current{
color:#e85a87;
font-weight:bold;
}

@media(max-width:560px){

.lang-switch{
top:10px;
right:4%;
padding:5px 11px;
font-size:.8rem;
}

}

/* ==========================
PAIRED EXCHANGE
========================== */

.pairex{
background:linear-gradient(180deg,#fff 0%,#fff6fa 100%);
}

.pairex h2 span{
color:#e85a87;
}

.pairex-lead{
max-width:820px;
margin:0 auto 44px;
text-align:center;
font-size:1.06rem;
line-height:1.7;
color:#444;
}

.pairex-steps{
display:flex;
align-items:stretch;
justify-content:center;
gap:14px;
max-width:1080px;
margin:0 auto 34px;
}

.pairex-step{
flex:1;
background:#fff;
border:1px solid rgba(27,43,99,.1);
border-radius:16px;
padding:30px 24px 26px;
box-shadow:0 6px 20px rgba(27,43,99,.06);
position:relative;
}

.pairex-num{
position:absolute;
top:-16px;
left:24px;
width:34px;
height:34px;
border-radius:50%;
background:#1b2b63;
color:#fff;
font-weight:bold;
display:flex;
align-items:center;
justify-content:center;
font-size:1rem;
}

.pairex-step h3{
margin:10px 0 10px;
font-size:1.06rem;
color:#1b2b63;
line-height:1.35;
}

.pairex-step p{
margin:0;
font-size:.95rem;
line-height:1.6;
color:#555;
}

.pairex-arrow{
align-self:center;
color:#e85a87;
font-size:1.9rem;
font-weight:bold;
flex:0 0 auto;
}

.pairex-note{
max-width:900px;
margin:0 auto 30px;
background:#eef0f8;
border-left:5px solid #1b2b63;
border-radius:0 12px 12px 0;
padding:20px 24px;
font-size:.96rem;
line-height:1.65;
color:#333;
}

.pairex-facts{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px 26px;
max-width:900px;
margin:0 auto 30px;
}

.pairex-facts div{
font-size:.95rem;
line-height:1.6;
color:#555;
border-left:3px solid #e85a87;
padding-left:14px;
}

.pairex-facts strong{
color:#1b2b63;
}

.pairex-cta-line{
max-width:840px;
margin:0 auto 28px;
text-align:center;
font-size:1.02rem;
line-height:1.7;
color:#444;
}

@media(max-width:900px){

.pairex-steps{
flex-direction:column;
gap:22px;
}

.pairex-arrow{
transform:rotate(90deg);
align-self:center;
font-size:1.5rem;
}

.pairex-facts{
grid-template-columns:1fr;
}

}

.why-cta{
text-align:center;
margin:38px 0 6px;
}

/* FOLLOW ICONS */

.hero-follow{
display:flex;
align-items:center;
gap:10px;
margin-top:12px;
flex-wrap:wrap;
}

.footer-social-label{
margin-top:18px;
margin-bottom:10px;
font-size:.95rem;
opacity:.85;
}

.footer-social{
display:flex;
justify-content:center;
gap:14px;
}

.footer-social a{
width:40px;
height:40px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.12);
transition:background .15s ease, transform .15s ease;
}

.footer-social a svg{
width:20px;
height:20px;
fill:#fff;
}

.footer-social a:hover{
background:rgba(255,255,255,.28);
transform:translateY(-2px);
}