/*
Theme Name: Akoben Colectiva
Theme URI: https://colectivakoben.org/
Author: Edwin Najera
Author URI: https://tharix.com/
Description: Tema base para Colectiva Akoben, pensado para usar con Elementor. Incluye CPTs (Proyectos, Podcast, Publicaciones), colores rojo/negro/verde y plantillas base.
Version: 1.0.1
License: GPL-2.0-or-later
Text Domain: akoben
*/
@import url('https://fonts.googleapis.com/css2?family=Roca+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chewy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root{
  /* Official palette (manual) */
  --akoben-red:#D90404;
  --akoben-green:#00B012;
  --akoben-yellow:#F2E205;
  --akoben-gold:#F2B705;
  --akoben-black:#000000;

  /* Surfaces / text */
  --ak-bg:#FFFCF5;          /* warm paper */
  --ak-surface:#FFFFFF;
  --ak-text:#0B0B0B;
  --ak-text-2:rgba(0,0,0,.74);
  --ak-muted:rgba(0,0,0,.60);
  --ak-border:rgba(0,0,0,.10);

  /* Semantic roles */
  --ak-accent: var(--akoben-red);   /* CTA / action */
  --ak-care:   var(--akoben-green); /* cuido / comunidad */
  --ak-memory: var(--akoben-yellow);/* memoria / podcast */
  --ak-ink:    var(--akoben-black); /* base */

  /* Radii & shadow */
  --ak-radius: 16px;
  --ak-shadow: 0 16px 40px rgba(0,0,0,.10);

  /* Typography (keep Inter as UI; allow Elementor to set display fonts) */
  --ak-font-ui: InterVar, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  --ak-font-display: var(--ak-font-display, "Roca One", "Chewy", "Poppins", InterVar, system-ui);
}
body{font-family:InterVar, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Apple Color Emoji','Segoe UI Emoji'; background:var(--akoben-bg); color:#1a1a1a; line-height:1.6; }
a{color:var(--akoben-red); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1140px, 92%); margin-inline:auto}
.site-header{position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid #eee}
.site-header .nav{display:flex; align-items:center; gap:24px; padding:14px 0;}
.site-header .brand{display:flex; align-items:center; gap:10px; font-weight:700}
.site-header .brand .logo{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--akoben-red),var(--akoben-green)); display:inline-block}
.site-footer{margin-top:64px; padding:32px 0; border-top:1px solid #eee; font-size:.95rem; background:#fff}
.hero{padding:72px 0 36px; display:grid; gap:18px}
.hero h1{font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:0}
.badge{display:inline-block; padding:.25rem .6rem; border-radius:999px; background:var(--akoben-black); color:#fff; font-size:.8rem}
.grid{display:grid; gap:20px}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:900px){ .grid.cols-3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .grid.cols-3,.grid.cols-2{grid-template-columns:1fr} }
.card{background:#fff; border:1px solid #eee; border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04)}
.card .media{aspect-ratio:16/9; background:#f6f6f6}
.card .body{padding:16px}
.button{display:inline-flex; align-items:center; gap:10px; padding:.7rem 1rem; border-radius:10px; border:1px solid var(--akoben-black); color:#fff; background:var(--akoben-black)}
.button.alt{background:var(--akoben-green); border-color:var(--akoben-green)}
.button.ghost{background:#fff; color:var(--akoben-black)}
.nav-menu{display:flex; gap:18px; flex-wrap:wrap}
.nav-menu a{padding:8px 12px; border-radius:8px}
.nav-menu .current-menu-item a{background:#f3f3f3}
/* Elementor spacing helpers */
.section{padding:48px 0}
h2.section-title{font-size:clamp(1.5rem,2.5vw,2.2rem); margin:0 0 12px}
.subtitle{color:#666; margin-bottom:22px}

/* ===== AKOBEN DESIGN SYSTEM ===== */


/* wrappers */
.ak-archive{
  background: var(--ak-bg);
  padding: 48px 16px 80px;
}
.ak-archive .ak-wrap{
  max-width: var(--ak-max);
  margin: 0 auto;
}

.ak-single{
  background: var(--ak-bg);
  padding: 40px 16px 70px;
}
.ak-single .ak-wrap{
  max-width: var(--ak-max-narrow);
  margin: 0 auto;
  background: var(--ak-surface);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius);
  overflow: hidden;
  box-shadow: var(--ak-shadow);
}

/* headings */
.ak-title{
  margin: 0 0 6px;
  font-family: var(--ak-font-display);
  font-weight: 700;
  color: var(--ak-text);
}
.ak-archive .ak-title{ font-size: 44px; }
.ak-subtitle{
  margin: 0;
  color: rgba(0,0,0,.65);
  font-family: var(--ak-font-ui);
  font-weight: 500;
}

/* chips */
.ak-chip{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-weight: 700;
  font-size: 12px;
  color: rgba(0,0,0,.75);
}
.ak-chip--accent{
  border-color: rgba(211,47,47,.30);
  background: rgba(211,47,47,.06);
  color: var(--ak-accent-2);
}

/* cards */
.ak-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.ak-card{
  background: var(--ak-surface);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ak-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
.ak-card a{ color: inherit; text-decoration: none; display:block; }

.ak-media{
  height: 200px;
  background: #000;
  overflow: hidden;
}
.ak-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.ak-body{ padding: 14px 16px 16px; }
.ak-card-title{
  margin: 0 0 8px;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ak-text);
}
.ak-excerpt{
  margin: 0 0 12px;
  color: var(--ak-text-2);
  font-size: 15px;
  line-height: 1.5;
}
.ak-more{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ak-accent);
}

/* single content */
.ak-header{ padding: 22px 26px 10px; }
.ak-meta{
  margin-bottom: 12px;
  color: var(--ak-muted);
  font-family: var(--ak-font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.ak-content{
  padding: 0 26px 26px;
  font-family: var(--ak-font-display);
  font-size: 20px;
  line-height: 1.7;
  color: rgba(0,0,0,.86);
}

@media (max-width: 980px){
  .ak-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ak-media{ height: 180px; }
  .ak-archive .ak-title{ font-size: 34px; }
  .ak-header{ padding: 18px 18px 8px; }
  .ak-content{ padding: 0 18px 18px; font-size: 18px; }
}
@media (max-width: 560px){
  .ak-grid{ grid-template-columns: 1fr; }
  .ak-media{ height: 220px; }
}



.ak-container{max-width:980px;margin:0 auto;padding:24px;}
.ak-title{margin:10px 0 12px;}

.ak-featured img{width:100%;height:auto;border-radius:16px;display:block;}

.ak-tax-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px;}
.ak-pill{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  border:2px solid #000;
  text-decoration:none;
  font-weight:700;
}

.ak-embed iframe{
  width:100%;
  max-width:720px;
  height:60px;
  border:0;
  display:block;
}

.ak-podcast-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:16px 0 24px;
}

.ak-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:2px solid #000;
  text-decoration:none;
  font-weight:800;
  line-height:1;
}

.ak-btn:hover{transform:translateY(-1px);}

.ak-btn-spotify{background:#00b012;color:#000;}
.ak-btn-archive{background:#F2E205;color:#000;}
.ak-btn-download{background:#D90404;color:#fff;border-color:#D90404;}
.ak-embed iframe { width:100%; max-width:720px; height:60px; border:0; display:block; }
.ak-podcast-player{
  display: flex;
  justify-content: center;
  width: 100%;
}

.ak-podcast-player .ak-embed{
  width: 100%;
  max-width: 720px; /* o el ancho que quieras */
}



.ak-podcast-links{
  display: flex;
  justify-content: center;
  width: 100%;
}

/* =========================
   BOTONES PODCAST – BASE
========================= */
.ak-podcast-links{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
  margin:20px 0 28px;
}

.ak-btn{
  --btn-bg:#000;
  --btn-color:#fff;
  --icon-bg:#fff;
  --icon-color:#000;
  --icon-char:"";

  display:inline-flex;
  align-items:center;
  gap:14px;

  padding:14px 22px 14px 14px;
  border-radius:999px;
  border:none;

  background:var(--btn-bg);
  color:var(--btn-color);

  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;

  transition:transform .15s ease, box-shadow .15s ease;
}

.ak-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}


/* PLAY (Spotify/Archive) */
.ak-btn--spotify,
.ak-btn--archive{
  --btn-bg:#1f3dbd;
  --btn-color:#ffffff;
  --icon-bg:#ffffff;
  --icon-color:#1f3dbd;
  --icon-char:"▶";
}

/* DOWNLOAD */
.ak-btn--download{
  --btn-bg:#d90404;
  --btn-color:#000000;
  --icon-bg:#000000;
  --icon-color:#d90404;
  --icon-char:"↓";
  border:2px solid #000;
}

@media (max-width:520px){
  .ak-btn{ width:100%; justify-content:center; }
}

/* ===== Cards Proyectos ===== */

.card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* rectangular horizontal */
  overflow: hidden;
  background: #000;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* recorta sin deformar */
  object-position: center;
  display: block;
}

.card .body {
  padding: 16px 18px 20px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.25;
}

.card h3 a {
  color: #d40000; /* rojo Akoben */
  text-decoration: none;
}

.card h3 a:hover {
  text-decoration: underline;
}

.card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #222;
}

/* ===== Card link ===== */
.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ===== Hover efecto imagen ===== */
.card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

/* Overlay */
.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .35s ease;
}

/* CTA */
.card-cta {
  background: #d40000;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Hover states */
.card:hover .card-img {
  transform: scale(1.08);
}

.card:hover .card-overlay {
  opacity: 1;
}

/* Título hover */
.card:hover h3 {
  text-decoration: underline;
}

/* Evitar subrayado global en hover */
.card-link:hover {
  text-decoration: none;
}

/* Solo subrayar el título */
.card:hover h3 {
  text-decoration: underline;
}

/* Asegurar que descripción nunca se subraye */
.card p {
  text-decoration: none !important;
}



/* =========================
   Paginación pro
   ========================= */
.archive-pagination,
.navigation.pagination {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

/* Base */
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: #111;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}

/* Hover */
.navigation.pagination a.page-numbers:hover {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.22);
  transform: translateY(-1px);
}

/* Current */
.navigation.pagination .page-numbers.current {
  background: #d40000; /* rojo Akoben */
  border-color: #d40000;
  color: #fff;
}

/* Prev / Next */
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next {
  padding: 0 16px;
}

/* Dots */
.navigation.pagination .page-numbers.dots {
  border: none;
  background: transparent;
  min-width: auto;
  padding: 0 6px;
  color: rgba(0,0,0,.5);
}

/* Accesibilidad: focus visible */
.navigation.pagination a.page-numbers:focus {
  outline: 3px solid rgba(212,0,0,.25);
  outline-offset: 2px;
}



/* =========================
   Breadcrumb Akoben
   ========================= */
.ak-breadcrumb {
  margin: 18px 0 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.2;
  color: rgba(0,0,0,.65);
}

/* estilo “chip” suave */
.ak-breadcrumb {
  width: fit-content;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
}

/* Links */
.ak-bc-link {
  color: #d40000;
  text-decoration: none;
  font-weight: 700;
}

.ak-bc-link:hover {
  text-decoration: underline;
}

/* Separador */
.ak-bc-sep {
  color: rgba(0,0,0,.25);
  font-weight: 800;
}

/* Actual */
.ak-bc-current {
  color: rgba(0,0,0,.9);
  font-weight: 800;
}

/* Mobile */
@media (max-width: 520px) {
  .ak-breadcrumb {
    font-size: 0.9rem;
    padding: 8px 12px;
  }
}


.ak-breadcrumb .ak-bc-current {
  background: rgba(212,0,0,.08);
  padding: 4px 10px;
  border-radius: 999px;
}





/* =========================
   Single Proyecto
   ========================= */
.ak-single-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

.ak-single-media{
  background: #000;
}

.ak-single-img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.ak-single-header{
  padding: 22px 22px 10px;
}

.ak-single-title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
}

.ak-single-meta{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.ak-single-content{
  padding: 0 22px 22px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.ak-single-content p{
  margin: 0 0 16px;
}

/* Navegación */
.ak-post-nav{
  padding: 18px 22px;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ak-post-nav a{
  text-decoration: none;
  font-weight: 700;
  color: #111;
}

.ak-post-nav a:hover{
  text-decoration: underline;
}

.ak-post-nav__back{
  color: #d40000;
}

.ak-post-nav__sibs{
  display: flex;
  gap: 14px;
  align-items: center;
}

.ak-post-nav__prev a,
.ak-post-nav__next a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}

.ak-post-nav__prev a:hover,
.ak-post-nav__next a:hover{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.22);
  transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 720px){
  .ak-single-img{ height: 260px; }
  .ak-post-nav{
    flex-direction: column;
    align-items: flex-start;
  }
}


.ak-single--publicacion .ak-single-img{
  height: 360px;
}
@media (max-width: 720px){
  .ak-single--publicacion .ak-single-img{
    height: 240px;
  }
}


/* =========================
   Single Podcast (extras)
   ========================= */
.ak-single--podcast .ak-single-meta{
  gap: 12px;
  flex-wrap: wrap;
}

.ak-link{
  color: #d40000;
  font-weight: 800;
  text-decoration: none;
}
.ak-link:hover{ text-decoration: underline; }

/* Player centrado */
.ak-podcast-player{
  padding: 0 22px 12px;
}
.ak-embed{
  max-width: 680px;
  margin: 0 auto;
}
.ak-embed iframe{
  width: 100% !important;
  display: block;
  border: 0;
  border-radius: 14px;
}

/* Botones */
.ak-podcast-links{
  padding: 0 22px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ak-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid #111;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-weight: 900;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.ak-btn:hover{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.3);
  transform: translateY(-1px);
}



/* =========================
   PODCAST BUTTONS (final, unificado)
   Pegarlo al FINAL del style.css
========================= */

/* contenedor */
.ak-podcast-links{
  display:flex !important;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  padding: 10px 22px 18px;
  margin: 0;
}

/* base */
.ak-podcast-links .ak-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;

  height:48px;
  padding: 0 18px 0 12px;

  border-radius:999px;
  border:2px solid rgba(0,0,0,.85);
  background:#fff;
  color:#111;

  text-decoration:none !important;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1;

  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.ak-podcast-links .ak-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,.14);
  border-color: rgba(0,0,0,1);
  background: rgba(0,0,0,.02);
}


/* mobile: full width */
@media (max-width: 560px){
  .ak-podcast-links .ak-btn{
    width:100%;
    justify-content:center;
  }
}


.ak-btn--ghost{
  background:#fff !important;
  color:#111 !important;
  border:2px solid rgba(0,0,0,.85) !important;
  box-shadow:none !important;
}
.ak-btn--ghost:hover{
  background: rgba(0,0,0,.04) !important;
}

selector li {
  position: relative;
}

selector li > a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;

  /* Esto hace que el link ocupe todo el LI */
  position: absolute;
  inset: 0;

  /* Mantiene el texto visible y alineado */
  padding: inherit;
}

.ak-meta-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.ak-meta-right .ak-terms{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.ak-meta-left{
  flex-shrink:0;
}