/* FARVAC styles - moderno, accesible y responsive */
:root{
  --blue:#0057ff;
  --green:#10b981;
  --yellow:#fbbf24;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --surface:#f8fafc;
  --radius:14px;
  --shadow:0 8px 30px rgba(2,6,23,0.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

.container{width:min(1120px,92%);margin:auto}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.9);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid #e2e8f0;
}

.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}

.brand{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit}
.brand-logo{font-size:28px}
.brand-text small{display:block; color:var(--muted)}

.nav{display:flex; gap:16px}
.nav a{padding:8px 12px; text-decoration:none; color:var(--ink); border-radius:10px}
.nav a:hover{background:var(--surface)}

.menu-toggle{display:none; border:1px solid #e2e8f0; background:#fff; border-radius:10px; padding:8px 12px}

/* Hero */
.hero{position:relative; padding:80px 0 96px; overflow:hidden}
.hero h1{font-size:clamp(28px,4vw,44px); line-height:1.15; margin:0 0 12px}
.hero p{max-width:60ch; color:var(--muted); margin:0 0 24px}
.hero .cta-row{display:flex; gap:12px; flex-wrap:wrap}

.btn{display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none; border:1px solid transparent; font-weight:600}
.btn-primary{background:linear-gradient(135deg,var(--blue),#00bfff); color:white; box-shadow:var(--shadow)}
.btn-outline{border-color:#cbd5e1; color:var(--ink)}
.btn-small{padding:8px 12px; font-size:.9rem; border:1px solid #cbd5e1; border-radius:10px}

.hero-gradient{
  position:absolute; inset:auto -20% -40% -20%;
  height:420px;
  background:radial-gradient(60% 60% at 20% 40%, rgba(0,87,255,.18), transparent),
             radial-gradient(50% 50% at 80% 60%, rgba(16,185,129,.18), transparent),
             radial-gradient(40% 40% at 50% 80%, rgba(251,191,36,.25), transparent);
  filter:blur(30px);
  pointer-events:none;
}

/* Sections */
.section{padding:72px 0}
.section.alt{background:var(--surface)}
h2{font-size:clamp(22px,3vw,32px); margin:0 0 24px}

/* Cards */
.grid{display:grid; gap:18px}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
}
.card h3{margin-top:0}

/* Quotes */
.quotes{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.quote{background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.quote blockquote{margin:0 0 8px}

/* Checks list */
.checks{list-style:none; padding:0; margin:12px 0 0}
.checks li{padding-left:28px; position:relative; margin:10px 0}
.checks li::before{content:"✔"; position:absolute; left:0; top:0; color:var(--green)}

/* Clinics */
.clinics{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.clinic{background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}

/* Blog */
.blog{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.post{background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.post h3{margin-top:0}

/* FAQ */
.faq{background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); padding:14px 16px; margin:10px 0; box-shadow:var(--shadow)}
.faq summary{cursor:pointer; font-weight:600}

/* Contact */
.contact-grid{display:grid; gap:24px; grid-template-columns:1.1fr .9fr}
.contact-form{background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.contact-form label{display:block; font-weight:600; margin:10px 0 6px}
.contact-form input,.contact-form textarea{width:100%; padding:12px; border-radius:12px; border:1px solid #cbd5e1; font:inherit}
.contact-form button{margin-top:8px}
.form-note{font-size:.9rem; color:var(--muted)}
.map-embed iframe{width:100%; height:240px; border:0; border-radius:12px}

.site-footer{padding:32px 0; border-top:1px solid #e2e8f0; color:var(--muted); background:#fff}

/* Responsive */
@media (max-width: 900px){
  .contact-grid{grid-template-columns:1fr}
  .nav{display:none}
  .menu-toggle{display:inline-flex; align-items:center; gap:8px; cursor:pointer}
  .nav.open{display:flex; flex-direction:column; position:absolute; right:4%; top:56px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:8px; box-shadow:var(--shadow)}
}

/* Valores list */
.valores{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
  list-style:none;
  padding:0;
}
.valores li{
  background:var(--surface);
  padding:8px 12px;
  border-radius:8px;
  text-align:center;
  font-weight:600;
  border:1px solid #e2e8f0;
}

/* Criterios section */
.grid.two-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.criterios-list{list-style:none;padding:0;margin:0}
.criterios-list li{margin:8px 0;padding-left:22px;position:relative}
.criterios-list li::before{content:"✔";position:absolute;left:0;top:0;color:var(--green)}
.criterios-list.exclusion li::before{content:"✖";color:#ef4444}

/* Reglamento and Derechos section */
.reglamento-list, .derechos-list{list-style:none;padding:0;margin:0}
.reglamento-list li, .derechos-list li{margin:8px 0;padding-left:22px;position:relative}
.reglamento-list li::before{content:"•";position:absolute;left:0;top:0;color:var(--blue);font-weight:bold}
.derechos-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green)}

/* Gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.gallery-grid img{
  width:100%; height:200px; object-fit:cover; border-radius:12px; border:1px solid #e2e8f0; box-shadow:var(--shadow);
  transition:transform .15s ease-in-out;
}
.gallery-grid a:hover img{ transform:scale(1.01) }
.lightbox-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.72); display:none; align-items:center; justify-content:center; z-index:9999;
}
.lightbox-backdrop.open{ display:flex }
.lightbox-image{ max-width:92vw; max-height:86vh; border-radius:12px; box-shadow:0 8px 40px rgba(0,0,0,.4) }
.lightbox-close{ position:fixed; top:16px; right:16px; background:#fff; border:1px solid #e2e8f0; border-radius:999px; padding:8px 12px; cursor:pointer; z-index:10000 }