/* =========================================================================
   Open & Share — style.css
   Colocar en: assets/css/style.css
   ========================================================================= */

/* ========== Variables ========== */
:root{
  --purple: #5B2E8A;
  --purple-dark: #2B1B3A;
  --accent: #CB0000;
  --accent-2: #7C4DFF;
  --text: #0F1724;
  --muted: #6B7785;
  --bg: #F7F7FB;
  --container-max: 1100px;
  --logo-max-h: 64px;
  --radius: 12px;
}

/* ========== Reset & base ========== */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family:'Inter', system-ui, Arial, sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:var(--purple-dark); text-decoration:none; }
.container { max-width:var(--container-max); margin:0 auto; padding:1.25rem; }

/* ========== Header ========== */
.site-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; }
.brand { display:flex; align-items:center; gap:8px; line-height:1; }
.brand-part { font-family: 'Cinzel', serif; font-weight:600; font-size:1.05rem; color:var(--purple-dark); }
.brand-amp { font-family: 'Cinzel', serif; font-weight:700; font-size:1.05rem; color:var(--accent); margin:0 4px; }

/* Navigation */
.main-nav a { margin-left:1rem; font-weight:600; font-size:0.95rem; color:var(--text); opacity:0.92; }
.main-nav a:hover, .main-nav a:focus { color:var(--purple-dark); outline: none; }

/* ========== HERO ========== */
/* Hero uses background image placed at assets/images/hero_optimized.jpg */
.hero {
  position:relative;
  margin:0 0 1.6rem;
  padding:4.2rem 2rem;
  border-radius:var(--radius);
  overflow:hidden;
  color:#ffffff;
  background-image: url("../images/hero_optimized.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 6px 22px rgba(11,15,22,0.06);
}

/* extra overlay for contrast (already applied to image but keep for safety) */
.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(43,27,58,0.25), rgba(43,27,58,0.35));
  z-index:1;
  pointer-events:none;
}

.hero-inner{ position:relative; z-index:2; max-width:920px; }
.hero-title { font-family: 'Poppins', sans-serif; font-size:2rem; margin:0 0 0.6rem; color:#FFFFFF; letter-spacing:0.2px; }
.hero-sub { margin:0; font-size:1rem; line-height:1.6; color: rgba(255,255,255,0.92); }

/* ========== Sections ========== */
.section { padding:2rem 0; border-top:1px solid rgba(15,23,36,0.04); background:transparent; }
.section h2 { font-family: 'Poppins', sans-serif; font-size:1.15rem; margin:0 0 0.85rem; color:var(--purple-dark); }
.section p { margin:0 0 0.8rem; color:var(--muted); line-height:1.6; }

/* ========== Logos row ========== */
.logos-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.6rem;
  padding:0.8rem 0;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  margin-bottom:0.6rem;
}

/* subtle scrollbar */
.logos-row::-webkit-scrollbar { height:8px; }
.logos-row::-webkit-scrollbar-thumb { background: rgba(11,15,22,0.06); border-radius:8px; }

.logo { display:block; flex:0 0 auto; }
.logo img { display:block; max-height:var(--logo-max-h); width:auto; height:auto; object-fit:contain; }

/* logos note */
.logos-note { font-size:0.9rem; color:var(--muted); margin-top:0.4rem; text-align:center; }

/* ========== Contact ========== */
.contact-grid { display:flex; gap:1.5rem; align-items:flex-start; flex-wrap:wrap; }
.contact-info { min-width:260px; max-width:480px; }
.contact-line { margin:0.45rem 0; color:var(--muted); }
.btn {
  display:inline-block;
  padding:0.55rem 0.95rem;
  border-radius:10px;
  background:linear-gradient(180deg,var(--purple),var(--purple-dark));
  color:#fff;
  font-weight:600;
  text-decoration:none;
  box-shadow: 0 6px 14px rgba(91,46,138,0.12);
}
.contact-map .map-frame { width:100%; max-width:640px; height:360px; border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(11,15,22,0.06); }

/* ========== Footer ========== */
.site-footer { padding:2rem 0; text-align:center; color:var(--muted); font-size:0.9rem; border-top:1px solid rgba(15,23,36,0.04); }

/* ========== Responsive ========== */
@media (max-width:920px) {
  .hero { padding:3rem 1.25rem; }
  .hero-title { font-size:1.6rem; }
  .logos-row { gap:1rem; }
  .contact-grid { flex-direction:column; }
  .contact-map .map-frame { height:260px; }
}

@media (max-width:520px) {
  .site-header { padding:0.6rem 0; }
  .main-nav a { margin-left:0.6rem; font-size:0.9rem; }
  :root { --logo-max-h: 56px; }
}

/* Accessibility: focus visible */
a:focus, button:focus { outline: 3px solid rgba(124,77,255,0.16); outline-offset:3px; border-radius:6px; }