/*
Theme Name: Conectar Cultura
Theme URI: https://conectarcultura.com
Author: Conectar Cultura
Description: Tema a medida para el portal cultural Conectar Cultura. Eventos filtrables por ciudad y categoría, club de socios con carnet digital y carga de eventos por organizadores externos. Optimizado para conexiones lentas y celulares de gama baja.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: conectar-cultura
*/

/* =========================================================
   1. VARIABLES / DESIGN TOKENS
   ========================================================= */
:root{
  --color-primary: #D4006B;
  --color-primary-dark: #9C0050;
  --color-primary-light: #FF4D94;
  --color-bg-dark: #0D0007;
  --color-bg-dark-2: #1A0011;
  --color-bg-light: #FFFFFF;
  --color-bg-soft: #F7F5F6;
  --color-text: #1A1A1A;
  --color-text-light: #FFFFFF;
  --color-text-muted: #6B6B6B;
  --color-border: #E6E2E4;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container: 1200px;
}

/* =========================================================
   2. RESET LIGERO
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg-light);
  line-height: 1.5;
  font-size: 16px;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p{ margin: 0 0 var(--space-3); }
button, input, select, textarea{ font-family: inherit; font-size: 1rem; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.sr-only{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* =========================================================
   3. HEADER
   ========================================================= */
.site-header{
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  gap: var(--space-3);
}
.site-logo{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.1rem; }
.site-logo span{ color: var(--color-primary-light); }
.site-logo img{ height: 32px; width:auto; }

.main-nav ul{ display:flex; gap: var(--space-4); }
.main-nav a{ font-size: .95rem; opacity:.9; }
.main-nav a:hover{ opacity:1; color: var(--color-primary-light); }

.header-actions{ display:flex; align-items:center; gap: var(--space-3); }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding: 10px 20px; border-radius: 999px;
  font-weight:600; font-size:.95rem; border: 2px solid transparent;
  cursor:pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn-primary{ background: var(--color-primary); color:#fff; }
.btn-primary:hover{ background: var(--color-primary-dark); }
.btn-outline{ border-color: rgba(255,255,255,.5); color:#fff; background:transparent; }
.btn-outline:hover{ border-color:#fff; }
.btn-outline-dark{ border-color: var(--color-text); color: var(--color-text); background:transparent; }
.btn-block{ width:100%; }
.btn-sm{ padding:6px 14px; font-size:.85rem; }

.menu-toggle{ display:none; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; }

/* Selector de ciudad, siempre visible */
.city-select-wrap{ position:relative; }
.city-select{
  display:flex; align-items:center; gap:6px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color:#fff; padding:8px 12px; border-radius: 999px;
  font-size:.9rem;
}
.city-select select{
  background:transparent; color:#fff; border:none; appearance:none;
  -webkit-appearance:none; font-weight:600; padding-right: 14px;
}
.city-select select option{ color:#000; }

/* =========================================================
   4. MOBILE NAV
   ========================================================= */
@media (max-width: 860px){
  .main-nav{
    position:fixed; inset: 0 0 0 auto; width: min(80%, 320px);
    background: var(--color-bg-dark); transform: translateX(100%);
    transition: transform .2s ease; padding: 80px var(--space-4) var(--space-4);
    z-index: 200;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction: column; gap: var(--space-4); }
  .menu-toggle{ display:block; }
  .header-actions .btn-outline{ display:none; }
}

/* =========================================================
   5. HERO
   ========================================================= */
.hero{
  background: linear-gradient(180deg, rgba(13,0,7,.4), rgba(13,0,7,.9)),
              var(--hero-img, none) center/cover no-repeat;
  color:#fff;
  padding: var(--space-6) 0 var(--space-5);
}
.hero h1{ font-size: clamp(1.8rem, 5vw, 3rem); line-height:1.15; }
.hero h1 em{ font-style:normal; color: var(--color-primary-light); display:block; }
.hero p{ max-width: 560px; opacity:.9; }
.hero-actions{ display:flex; gap: var(--space-3); flex-wrap:wrap; }

/* =========================================================
   6. QUICK LINKS
   ========================================================= */
.quick-links{
  display:grid; grid-template-columns: repeat(4,1fr);
  background:#fff; margin-top: calc(-1 * var(--space-4));
  position:relative; border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  max-width: calc(var(--container) - 32px);
  margin-left:auto; margin-right:auto;
  overflow:hidden;
}
.quick-links a{
  padding: var(--space-4) var(--space-3); text-align:center;
  border-right: 1px solid var(--color-border);
}
.quick-links a:last-child{ border-right:none; }
.quick-links .qi{ font-size:1.6rem; color: var(--color-primary); margin-bottom:6px; }
.quick-links strong{ display:block; font-size:.95rem; }
.quick-links small{ color: var(--color-text-muted); font-size:.78rem; }
@media (max-width: 700px){
  .quick-links{ grid-template-columns: repeat(2,1fr); }
  .quick-links a{ border-bottom:1px solid var(--color-border); }
}

/* =========================================================
   7. SECTIONS / EVENT CARDS
   ========================================================= */
.section{ padding: var(--space-6) 0; }
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: var(--space-4);
}
.section-head h2{ font-size:1.4rem; margin:0; }
.section-head a{ color: var(--color-primary); font-weight:600; font-size:.9rem; }

.event-grid{
  display:grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.event-card{
  border-radius: var(--radius-md); overflow:hidden;
  background: var(--color-bg-dark); color:#fff; position:relative;
  display:flex; flex-direction:column;
}
.event-card .thumb{ position:relative; aspect-ratio: 4/3; overflow:hidden; background:#222; }
.event-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.event-card .badge{
  position:absolute; top:8px; left:8px;
  background: var(--color-primary); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.03em;
  padding:4px 8px; border-radius: 4px; text-transform:uppercase;
}
.event-card .fav{
  position:absolute; top:8px; right:8px; background: rgba(0,0,0,.4);
  border-radius:50%; width:30px; height:30px; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:.9rem;
}
.event-card .info{ padding: var(--space-3); display:flex; gap: var(--space-3); flex:1; }
.event-card .date-box{
  text-align:center; min-width:42px; line-height:1.1;
}
.event-card .date-box .d{ font-size:1.2rem; font-weight:700; }
.event-card .date-box .m{ font-size:.68rem; text-transform:uppercase; color: var(--color-primary-light); }
.event-card .details h3{ font-size:.95rem; margin:0 0 4px; }
.event-card .details .place{ font-size:.78rem; color:#c9c3c6; margin-bottom:6px; }
.event-card .details .price{ font-size:.85rem; font-weight:700; color: var(--color-primary-light); }

/* =========================================================
   8. FILTROS DE EVENTOS
   ========================================================= */
.filters-bar{
  display:flex; flex-wrap:wrap; gap: var(--space-2);
  align-items:center; margin-bottom: var(--space-4);
  padding: var(--space-3); background: var(--color-bg-soft);
  border-radius: var(--radius-md);
}
.filters-bar form{ display:flex; flex-wrap:wrap; gap: var(--space-2); width:100%; align-items:center; }
.filters-bar select, .filters-bar input[type="search"]{
  padding: 10px 12px; border:1px solid var(--color-border);
  border-radius: 999px; background:#fff; min-width:150px;
}
.chip-group{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:8px 16px; border-radius:999px; border:1px solid var(--color-border);
  font-size:.85rem; font-weight:600; color: var(--color-text);
  background:#fff;
}
.chip.is-active, .chip:hover{ background: var(--color-primary); border-color: var(--color-primary); color:#fff; }

/* =========================================================
   9. CLUB / CARNET
   ========================================================= */
.club-banner{
  background: linear-gradient(135deg, var(--color-bg-dark-2), var(--color-bg-dark));
  color:#fff; border-radius: var(--radius-lg); padding: var(--space-5);
  display:flex; flex-wrap:wrap; gap: var(--space-5); align-items:center; justify-content:space-between;
}
.club-banner .txt{ flex:1; min-width:260px; }
.club-banner h2{ font-size:1.6rem; }
.club-banner .eyebrow{ color: var(--color-primary-light); font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }

.member-card{
  width: 320px; max-width:100%; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #4a0026, #16000d);
  color:#fff; padding: var(--space-4); position:relative; overflow:hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.member-card::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at top right, rgba(212,0,107,.5), transparent 60%);
}
.member-card .mc-top{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; }
.member-card .mc-status{
  font-size:.65rem; background: rgba(255,255,255,.15); padding:4px 10px;
  border-radius:999px; text-transform:uppercase; letter-spacing:.05em;
}
.member-card .mc-name{ font-size:1.3rem; font-weight:700; margin: var(--space-4) 0 2px; position:relative; }
.member-card .mc-since{ font-size:.78rem; opacity:.8; position:relative; }
.member-card .mc-barcode{
  margin-top: var(--space-4); height:38px; position:relative;
  background: repeating-linear-gradient(90deg,#fff 0 2px, transparent 2px 5px,#fff 5px 6px, transparent 6px 10px);
  border-radius:2px;
}
.member-card .mc-number{ font-size:.7rem; letter-spacing:.15em; margin-top:6px; opacity:.85; position:relative; }

/* =========================================================
   10. FORMULARIOS (login, registro, subir evento)
   ========================================================= */
.auth-wrap{ max-width:460px; margin: 0 auto; }
.tabs{ display:flex; border-bottom:1px solid var(--color-border); margin-bottom: var(--space-4); }
.tabs a{ flex:1; text-align:center; padding: 12px; font-weight:600; color: var(--color-text-muted); border-bottom:2px solid transparent; }
.tabs a.is-active{ color: var(--color-primary); border-color: var(--color-primary); }

.form-field{ margin-bottom: var(--space-3); }
.form-field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 12px 14px; border:1px solid var(--color-border);
  border-radius: var(--radius-sm); background:#fff;
}
.form-field textarea{ min-height:120px; resize:vertical; }
.form-note{ font-size:.8rem; color: var(--color-text-muted); }
.form-error{ background:#fdeaf0; color:#9c0050; padding:12px 14px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); font-size:.9rem; }
.form-success{ background:#e9f8ee; color:#1c7a3d; padding:12px 14px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); font-size:.9rem; }

/* =========================================================
   11. FOOTER
   ========================================================= */
.site-footer{ background: var(--color-bg-dark); color: #cfc7cb; padding: var(--space-6) 0 var(--space-4); }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-4); }
.footer-grid h4{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom: var(--space-3); }
.footer-grid li{ margin-bottom:8px; font-size:.88rem; }
.footer-grid li a:hover{ color: var(--color-primary-light); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top: var(--space-5); padding-top: var(--space-3); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.78rem; }
@media (max-width:760px){ .footer-grid{ grid-template-columns: repeat(2,1fr); } }

/* =========================================================
   12. UTILIDADES
   ========================================================= */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.pagination{ display:flex; gap:8px; justify-content:center; margin-top: var(--space-4); }
.pagination a, .pagination span{ padding:8px 14px; border:1px solid var(--color-border); border-radius: var(--radius-sm); font-size:.85rem; }
.pagination .current{ background: var(--color-primary); color:#fff; border-color: var(--color-primary); }
.empty-state{ text-align:center; padding: var(--space-6) var(--space-3); color: var(--color-text-muted); }