/* =====================================================
   MUJERES Y EQUIDAD
   Observatorio Ciudadano
   ===================================================== */

:root{

  --primary:#7B2CBF;
  --primary-dark:#5A189A;
  --secondary:#9D4EDD;
  --accent:#C77DFF;

  --light:#F7F1FD;
  --background:#FCFAFF;
  --card:#FFFFFF;

  --text:#2B2235;
  --muted:#736A7B;

  --border:#ECE4F7;

  --success:#43AA8B;
  --danger:#D62839;

  --shadow:
  0 20px 50px rgba(123,44,191,.10);

  --radius:24px;

}

/* =====================================================
   RESET
===================================================== */

*{

  margin:0;

  padding:0;

  box-sizing:border-box;

}

html{

  scroll-behavior:smooth;

}

body{

  font-family:

  "Segoe UI",

  sans-serif;

  background:

  linear-gradient(

    180deg,

    #FCFAFF,

    #F6F2FC

  );

  color:

  var(--text);

  line-height:1.7;

}

/* =====================================================
   LINKS
===================================================== */

a{

  text-decoration:none;

}

img{

  max-width:100%;

  display:block;

}

/* =====================================================
   HEADER
===================================================== */

.topbar{

  position:sticky;

  top:0;

  z-index:999;

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:

  14px 8%;

  background:

  rgba(

    255,

    255,

    255,

    .88

  );

  backdrop-filter:

  blur(15px);

  border-bottom:

  1px solid var(--border);

  transition:.35s;

}

.logo{

  display:flex;

  align-items:center;

  gap:15px;

}

.logo-icon{

  width:70px;

}

.logo-icon img{

  width:100%;

}

.subtitle{

  font-weight:600;

  color:var(--primary);

  font-size:.95rem;

}

nav{

  display:flex;

  gap:28px;

}

nav a{

  color:var(--text);

  font-weight:600;

  position:relative;

  transition:.3s;

}

nav a:hover{

  color:var(--primary);

}

nav a::after{

  content:"";

  position:absolute;

  bottom:-8px;

  left:0;

  width:0;

  height:2px;

  background:var(--primary);

  transition:.3s;

}

nav a:hover::after{

  width:100%;

}

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

.hero{

  position:relative;

  padding:

  90px 20px;

  overflow:hidden;

}

.hero::before{

  content:"";

  position:absolute;

  width:420px;

  height:420px;

  border-radius:50%;

  background:

  rgba(

    157,

    78,

    221,

    .10

  );

  right:-120px;

  top:-120px;

  filter:blur(20px);

}

.hero::after{

  content:"";

  position:absolute;

  width:320px;

  height:320px;

  border-radius:50%;

  background:

  rgba(

    199,

    125,

    255,

    .10

  );

  left:-100px;

  bottom:-100px;

  filter:blur(25px);

}

.hero-content{

  position:relative;

  z-index:2;

  max-width:900px;

  margin:auto;

  text-align:center;

  background:

  rgba(

    255,

    255,

    255,

    .75

  );

  backdrop-filter:

  blur(18px);

  padding:

  60px;

  border-radius:

  35px;

  box-shadow:

  var(--shadow);

}

.hero-badge{

  display:inline-block;

  background:

  rgba(

    123,

    44,

    191,

    .10

  );

  color:

  var(--primary);

  padding:

  10px 20px;

  border-radius:30px;

  font-weight:700;

  margin-bottom:25px;

}

.hero h1{

  font-size:

  3rem;

  margin-bottom:20px;

  line-height:1.2;

}

.hero p{

  font-size:1.1rem;

  color:var(--muted);

  max-width:700px;

  margin:auto;

}

/* =====================================================
   BOTONES
===================================================== */

.hero-buttons{

  margin-top:40px;

  display:flex;

  justify-content:center;

  gap:18px;

  flex-wrap:wrap;

}

.hero-buttons a{

  padding:

  16px 32px;

  border-radius:18px;

  font-weight:700;

  transition:.35s;

}

.hero-buttons a:first-child{

  background:

  linear-gradient(

    135deg,

    var(--primary),

    var(--secondary)

  );

  color:white;

}

.hero-buttons a:last-child{

  background:white;

  color:var(--primary);

  border:

  1px solid var(--border);

}

.hero-buttons a:hover{

  transform:

  translateY(-5px);

  box-shadow:

  0 20px 40px rgba(

    123,

    44,

    191,

    .18

  );

}

/* =====================================================
   SECCIONES
===================================================== */

.section{

  max-width:1200px;

  margin:auto;

  padding:

  80px 20px;

}

.section-title{

  text-align:center;

  margin-bottom:55px;

}

.section-title h2{

  font-size:2.2rem;

  margin-bottom:12px;

}

.section-title p{

  color:var(--muted);

  max-width:650px;

  margin:auto;

}

/* =====================================================
   ANIMACIONES
===================================================== */

@keyframes fadeUp{

  from{

    opacity:0;

    transform:

    translateY(35px);

  }

  to{

    opacity:1;

    transform:

    translateY(0);

  }

}

.hero-content{

  animation:

  fadeUp

  .9s ease;

}
/* =====================================================
   ALERTA PRINCIPAL
===================================================== */

.alert-banner{

    max-width:1200px;

    margin:20px auto 0;

    padding:0 20px;

}

.alert-content{

    display:flex;

    align-items:center;

    gap:30px;

    background:linear-gradient(
        135deg,
        #7B2CBF,
        #9D4EDD
    );

    color:white;

    padding:35px;

    border-radius:28px;

    box-shadow:
    0 25px 60px rgba(123,44,191,.25);

}

.alert-content i{

    font-size:3.2rem;

    min-width:70px;

}

.alert-content h2{

    font-size:1.8rem;

    margin-bottom:8px;

}

.alert-content p{

    opacity:.95;

    line-height:1.7;

}

/* =====================================================
   GRID
===================================================== */

.grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(280px,1fr)
    );

    gap:30px;

}

/* =====================================================
   TARJETAS
===================================================== */

.card{

    background:var(--card);

    border-radius:28px;

    padding:35px;

    position:relative;

    overflow:hidden;

    border:1px solid var(--border);

    transition:
    .35s ease;

    box-shadow:var(--shadow);

}

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:6px;

    height:100%;

    background:

    linear-gradient(
        180deg,
        var(--primary),
        var(--accent)
    );

}

.card:hover{

    transform:

    translateY(-10px);

    box-shadow:

    0 30px 70px rgba(
        123,
        44,
        191,
        .18
    );

}

.card h3{

    margin-top:18px;

    margin-bottom:15px;

    font-size:1.35rem;

}

.card p{

    color:var(--muted);

    margin-bottom:25px;

}

/* =====================================================
   ICONOS
===================================================== */

.icon{

    width:78px;

    height:78px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

    linear-gradient(
        135deg,
        var(--light),
        white
    );

    color:var(--primary);

    font-size:2rem;

    box-shadow:

    inset 0 0 0 1px var(--border);

}

/* =====================================================
   BOTONES DE TARJETAS
===================================================== */

.btn-card{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:
    14px 22px;

    border-radius:15px;

    background:

    var(--primary);

    color:white;

    font-weight:600;

    transition:.3s;

}

.btn-card:hover{

    background:

    var(--primary-dark);

    transform:

    translateY(-3px);

}

/* =====================================================
   SERVICIOS
===================================================== */

.service-card{

    background:white;

    border-radius:24px;

    text-align:center;

    padding:35px 25px;

    border:1px solid var(--border);

    transition:.35s;

    box-shadow:var(--shadow);

}

.service-card:hover{

    transform:

    translateY(-8px);

}

.service-card i{

    font-size:2.4rem;

    color:var(--primary);

    margin-bottom:18px;

}

.service-card h3{

    font-size:1.15rem;

}

/* =====================================================
   DERECHOS
===================================================== */

.rights-grid{

    display:grid;

    grid-template-columns:

    repeat(
        auto-fit,
        minmax(250px,1fr)
    );

    gap:25px;

}

.right-card{

    background:white;

    border-radius:22px;

    padding:30px;

    text-align:center;

    border:1px solid var(--border);

    transition:.3s;

}

.right-card:hover{

    background:

    var(--light);

    transform:

    translateY(-8px);

}

.right-card h3{

    color:var(--primary);

}

/* =====================================================
   RECURSOS
===================================================== */

.resources-grid{

    display:grid;

    grid-template-columns:

    repeat(
        auto-fit,
        minmax(260px,1fr)
    );

    gap:25px;

}

.resources-grid a{

    background:white;

    padding:26px;

    border-radius:22px;

    color:var(--text);

    border:1px solid var(--border);

    font-weight:700;

    display:flex;

    justify-content:space-between;

    align-items:center;

    transition:.35s;

}

.resources-grid a::after{

    content:"→";

    font-size:1.3rem;

    color:var(--primary);

}

.resources-grid a:hover{

    background:

    linear-gradient(
        135deg,
        var(--light),
        white
    );

    transform:

    translateY(-8px);

}

/* =====================================================
   FAQ
===================================================== */

.faq-container{

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:white;

    border-radius:22px;

    margin-bottom:18px;

    border:1px solid var(--border);

    overflow:hidden;

    box-shadow:var(--shadow);

}

.faq-question{

    width:100%;

    padding:24px 28px;

    background:none;

    border:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:1.05rem;

    font-weight:700;

    color:var(--text);

    transition:.3s;

}

.faq-question:hover{

    background:var(--light);

}

.faq-question i{

    color:var(--primary);

    transition:.35s;

}

.faq-item.active .faq-question i{

    transform:rotate(45deg);

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:

    max-height .45s ease,

    padding .35s ease;

    padding:0 28px;

}

.faq-item.active .faq-answer{

    max-height:220px;

    padding:0 28px 28px;

}

.faq-answer p{

    color:var(--muted);

    line-height:1.7;

}

/* =====================================================
   AVISO
===================================================== */

.notice{

    max-width:1100px;

    margin:70px auto;

    padding:45px;

    background:

    linear-gradient(

        135deg,

        rgba(123,44,191,.08),

        rgba(199,125,255,.10)

    );

    border-radius:30px;

    text-align:center;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

.notice h2{

    color:var(--primary);

    margin-bottom:15px;

    font-size:2rem;

}

.notice p{

    max-width:760px;

    margin:auto;

    color:var(--muted);

    font-size:1.05rem;

    line-height:1.8;

}

/* =====================================================
   FOOTER
===================================================== */

footer{

    margin-top:90px;

    padding:70px 20px;

    background:white;

    border-top:1px solid var(--border);

    text-align:center;

}

footer h3{

    color:var(--primary);

    font-size:1.6rem;

    margin-bottom:15px;

}

footer p{

    max-width:700px;

    margin:auto;

    color:var(--muted);

    line-height:1.8;

}

/* =====================================================
   SCROLL REVEAL
===================================================== */

.reveal{

    opacity:0;

    transform:translateY(45px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F5F1FA;

}

::-webkit-scrollbar-thumb{

    background:var(--secondary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/* =====================================================
   SELECCIÓN
===================================================== */

::selection{

    background:var(--secondary);

    color:white;

}

/* =====================================================
   FOCUS
===================================================== */

button:focus,
a:focus{

    outline:none;

    box-shadow:

    0 0 0 4px rgba(123,44,191,.18);

}

/* =====================================================
   TRANSICIONES
===================================================== */

.card,
.service-card,
.right-card,
.resources-grid a,
.hero-buttons a,
.btn-card{

    transition:

    all .35s ease;

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:992px){

.hero-content{

padding:45px;

}

.hero h1{

font-size:2.5rem;

}

.section{

padding:70px 20px;

}

.alert-content{

flex-direction:column;

text-align:center;

}

}


@media(max-width:768px){

.topbar{

flex-direction:column;

gap:15px;

padding:18px;

}

nav{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.hero{

padding:60px 15px;

}

.hero-content{

padding:35px 25px;

border-radius:28px;

}

.hero h1{

font-size:2rem;

}

.hero p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;

text-align:center;

}

.section-title h2{

font-size:1.8rem;

}

.alert-content{

padding:28px;

}

.alert-content h2{

font-size:1.5rem;

}

.notice{

padding:35px 25px;

}

footer{

padding:50px 20px;

}

.grid,
.rights-grid,
.resources-grid{

grid-template-columns:1fr;

}

}


@media(max-width:480px){

.logo{

flex-direction:column;

text-align:center;

}

.subtitle{

font-size:.85rem;

}

.hero h1{

font-size:1.7rem;

}

.hero-badge{

font-size:.85rem;

}

.card{

padding:28px;

}

.service-card{

padding:30px;

}

.notice h2{

font-size:1.6rem;

}

}

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all .7s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.faq-question{

    cursor:pointer;

}

.faq-item.active .faq-question{

    color:var(--primary);

}