/* ==========================================================================
   CatálogoCursosgratis — Estilos del proyecto (child theme de Astra)
   Tokens, componentes y vistas (home, catálogo, ficha, recomendador, blog).
   ========================================================================== */

:root{
  --ccg-primary:#1E5BA8;
  --ccg-primary-dark:#16487F;
  --ccg-primary-light:#EAF1F9;
  --ccg-green:#15A34A;
  --ccg-green-dark:#0F7C38;
  --ccg-ink:#14233A;
  --ccg-text:#374151;
  --ccg-muted:#6B7280;
  --ccg-bg:#F5F5F3;
  --ccg-card:#FFFFFF;
  --ccg-border:#E5E7EB;
  --ccg-gold:#FBBF24;
  --ccg-radius:14px;
  --ccg-radius-sm:10px;
  --ccg-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.06);
  --ccg-shadow-lg:0 10px 30px rgba(16,24,40,.10);
  --ccg-maxw:1180px;
}

/* ---- Base ---- */
body{ background:var(--ccg-bg); color:var(--ccg-text); font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; }
h1,h2,h3,h4,.ccg-wordmark{ font-family:'Poppins','Inter',sans-serif; color:var(--ccg-ink); }
.ccg-container{ max-width:var(--ccg-maxw); margin:0 auto; padding:0 20px; }
.ccg-ico{ width:1.05em; height:1.05em; flex:0 0 auto; }

/* ---- Botones ---- */
.ccg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.95rem; line-height:1; padding:.85rem 1.4rem; border-radius:var(--ccg-radius-sm);
  border:1px solid transparent; cursor:pointer; text-decoration:none; transition:.18s ease; }
.ccg-btn--primary{ background:var(--ccg-primary); color:#fff; }
.ccg-btn--primary:hover{ background:var(--ccg-primary-dark); color:#fff; }
.ccg-btn--block{ width:100%; }
.ccg-btn--primary .ccg-ico{ width:1.1em; height:1.1em; }

/* ---- Chips & badges ---- */
.ccg-chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--ccg-muted);
  background:#F3F4F6; border:1px solid var(--ccg-border); border-radius:999px; padding:.3rem .6rem; }
.ccg-chip .ccg-ico{ color:var(--ccg-primary); }
.ccg-chip--light{ background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.35); }
.ccg-chip--light .ccg-ico{ color:#fff; }
.ccg-badge{ position:absolute; top:12px; left:12px; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; padding:.32rem .6rem; border-radius:6px; }
.ccg-badge--free{ background:var(--ccg-green); color:#fff; }

/* ---- Rejilla y tarjetas ---- */
.ccg-grid{ display:grid; gap:24px; }
.ccg-grid--3{ grid-template-columns:repeat(3,1fr); }
.ccg-card{ background:var(--ccg-card); border:1px solid var(--ccg-border); border-radius:var(--ccg-radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--ccg-shadow); transition:.2s ease; }
.ccg-card:hover{ box-shadow:var(--ccg-shadow-lg); transform:translateY(-3px); }
.ccg-card__media{ position:relative; display:block; aspect-ratio:16/9; background:#0b1f3a; }
.ccg-card__img{ width:100%; height:100%; object-fit:cover; }
.ccg-card__placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; color:#fff; text-align:center; padding:1rem; }
.ccg-card__placeholder .ccg-ico{ width:38px; height:38px; opacity:.92; }
.ccg-card__placeholder em{ font-style:normal; font-weight:600; font-size:.9rem; opacity:.95; }
.ccg-card__body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.ccg-card__title{ font-size:1.02rem; line-height:1.3; margin:0; }
.ccg-card__title a{ color:var(--ccg-ink); text-decoration:none; }
.ccg-card__title a:hover{ color:var(--ccg-primary); }
.ccg-card__meta{ display:flex; flex-wrap:wrap; gap:.4rem; }
.ccg-card__meta--soft{ margin-top:-.2rem; }
.ccg-card__cta{ margin-top:auto; }

/* ---- HERO (home) ---- */
.ccg-hero{
  /* Capa de color azul translúcida sobre la fotografía de fondo */
  background:linear-gradient(135deg,rgba(30,91,168,.90),rgba(22,72,127,.92)),
             url(../img/hero.jpg) center/cover no-repeat;
  color:#fff; padding:72px 20px 88px;
  /* Full-bleed: ocupa todo el ancho de la ventana aunque Astra limite el contenido */
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.ccg-hero__title{ color:#fff; font-size:clamp(2.2rem,4vw,3.2rem); margin:0 0 .4rem; font-weight:800; }
.ccg-hero__sub{ color:rgba(255,255,255,.9); max-width:640px; margin:0 auto 2rem; font-size:1.05rem; }
.ccg-herosearch{ max-width:880px; margin:0 auto; background:#fff; border-radius:var(--ccg-radius); padding:14px;
  box-shadow:var(--ccg-shadow-lg); }
.ccg-herosearch__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:10px; }
.ccg-herosearch select,.ccg-field select,.ccg-reco__form select{ width:100%; padding:.7rem .8rem; border:1px solid var(--ccg-border);
  border-radius:var(--ccg-radius-sm); background:#fff; color:var(--ccg-text); font-size:.92rem; appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:1.1em; }

/* ---- Secciones home ---- */
.ccg-section{ padding:48px 20px; }
.ccg-section__title{ font-size:1.7rem; margin:0 0 1.6rem; }
.ccg-section--audience .ccg-section__title{ text-align:center; }
.ccg-section--segments{ padding-top:36px; }
.ccg-segment{ background:#fff; border:1px solid var(--ccg-border); border-radius:var(--ccg-radius); padding:20px; height:100%;
  box-shadow:var(--ccg-shadow); }
.ccg-segment__title{ font-size:1.02rem; margin:0 0 .35rem; }
.ccg-segment__txt{ color:var(--ccg-muted); font-size:.88rem; margin:0 0 .8rem; }
.ccg-segment__link a{ color:var(--ccg-primary); font-weight:600; text-decoration:none; font-size:.9rem; }
.ccg-audience{ background:#fff; border:1px solid var(--ccg-border); border-radius:var(--ccg-radius); padding:22px; height:100%; }
.ccg-audience h3{ font-size:1.05rem; margin:0 0 .4rem; color:var(--ccg-primary); }
.ccg-audience p{ color:var(--ccg-muted); margin:0; font-size:.92rem; }

/* ---- Catálogo ---- */
.ccg-catalog{ max-width:var(--ccg-maxw); margin:0 auto; }
.ccg-catalog__filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:#fff; border:1px solid var(--ccg-border); border-radius:var(--ccg-radius); padding:12px; box-shadow:var(--ccg-shadow);
  margin-bottom:1.4rem; }
.ccg-field{ position:relative; flex:1 1 170px; min-width:150px; }
.ccg-field--search{ display:flex; align-items:center; gap:.5rem; border:1px solid var(--ccg-border); border-radius:var(--ccg-radius-sm); padding:0 .7rem; flex:2 1 240px; min-width:200px; }
.ccg-field--search .ccg-ico{ color:var(--ccg-muted); }
.ccg-field--search input{ border:0; outline:0; padding:.7rem 0; width:100%; background:transparent; font-size:.92rem; }
.ccg-catalog__clear{ background:none; border:0; color:var(--ccg-primary); font-weight:600; cursor:pointer; padding:.6rem .8rem; flex:0 0 auto; margin-left:auto; }
.ccg-catalog__count{ color:var(--ccg-muted); margin:0 0 1rem; font-size:.92rem; }
.ccg-catalog__count strong{ color:var(--ccg-ink); }
.ccg-catalog__results.is-loading{ opacity:.5; pointer-events:none; transition:.2s; }
.ccg-empty{ text-align:center; padding:60px 20px; color:var(--ccg-muted); background:#fff; border:1px dashed var(--ccg-border); border-radius:var(--ccg-radius); }

/* ---- Paginación ---- */
.ccg-pagination{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:2rem; }
.ccg-page{ min-width:40px; height:40px; border:1px solid var(--ccg-border); background:#fff; border-radius:var(--ccg-radius-sm);
  cursor:pointer; font-weight:600; color:var(--ccg-text); }
.ccg-page:hover{ border-color:var(--ccg-primary); color:var(--ccg-primary); }
.ccg-page.is-active{ background:var(--ccg-primary); border-color:var(--ccg-primary); color:#fff; }

/* ---- Ficha de curso (single) ---- */
.ccg-single{ padding:32px 0 64px; }
.ccg-back{ display:inline-flex; align-items:center; gap:.4rem; color:var(--ccg-primary); font-weight:600; text-decoration:none; margin-bottom:1rem; }
.ccg-back .ccg-ico{ transform:rotate(180deg); }
.ccg-single__hero{ position:relative; border-radius:var(--ccg-radius); overflow:hidden; min-height:240px; display:flex; align-items:flex-end;
  background:#0b1f3a; margin-bottom:2rem; }
.ccg-single__hero-media{ position:absolute; inset:0; }
.ccg-single__hero-media .ccg-card__placeholder,.ccg-single__hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ccg-single__hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,31,58,.2),rgba(11,31,58,.85)); }
.ccg-single__hero-overlay{ position:relative; z-index:2; padding:28px; color:#fff; }
.ccg-single__hero .ccg-badge{ position:static; display:inline-block; margin-bottom:.8rem; }
.ccg-single__title{ color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); margin:0 0 1rem; max-width:760px; }
.ccg-single__meta{ display:flex; flex-wrap:wrap; gap:.5rem; }
.ccg-single__layout{ display:grid; grid-template-columns:1fr 360px; gap:32px; align-items:start; }
.ccg-block{ background:#fff; border:1px solid var(--ccg-border); border-radius:var(--ccg-radius); padding:24px 26px; margin-bottom:20px; box-shadow:var(--ccg-shadow); }
.ccg-block h2{ font-size:1.3rem; margin:0 0 1rem; }
.ccg-prose{ color:var(--ccg-text); line-height:1.7; }
.ccg-prose ul{ padding-left:1.2rem; }
.ccg-prose li{ margin:.3rem 0; }
.ccg-checklist ul{ list-style:none; padding:0; }
.ccg-checklist li{ position:relative; padding-left:1.9rem; margin:.5rem 0; }
.ccg-checklist li::before{ content:"✓"; position:absolute; left:0; top:0; width:1.3rem; height:1.3rem; display:flex; align-items:center; justify-content:center;
  background:var(--ccg-primary-light); color:var(--ccg-primary); border-radius:50%; font-weight:700; font-size:.8rem; }
/* Temario en acordeón a partir de la lista del CSV */
.ccg-accordion .contenido-curso{ list-style:none; padding:0; margin:0; counter-reset:uf; }
.ccg-accordion .contenido-curso > li{ border:1px solid var(--ccg-border); border-radius:var(--ccg-radius-sm); margin-bottom:.6rem; padding:14px 16px; background:#fff; }
.ccg-accordion .contenido-curso > li h3{ font-size:.98rem; margin:0; color:var(--ccg-ink); }
.ccg-steps{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1rem; }
.ccg-steps li{ display:flex; gap:1rem; align-items:flex-start; }
.ccg-steps__n{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--ccg-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; }

/* Formulario lateral (CF7) */
.ccg-single__aside{ position:sticky; top:90px; }
.ccg-formcard{ background:#fff; border:1px solid var(--ccg-border); border-radius:var(--ccg-radius); padding:22px; box-shadow:var(--ccg-shadow-lg); }
.ccg-formcard h3{ font-size:1.15rem; margin:0 0 1rem; }
.ccg-formcard .wpcf7-form input[type=text],
.ccg-formcard .wpcf7-form input[type=email],
.ccg-formcard .wpcf7-form input[type=tel],
.ccg-formcard .wpcf7-form select,
.ccg-reco__form input,.ccg-reco__form select{ width:100%; padding:.75rem .85rem; border:1px solid var(--ccg-border); border-radius:var(--ccg-radius-sm); font-size:.92rem; margin-bottom:.7rem; font-family:inherit; color:var(--ccg-text); }
.ccg-formcard .wpcf7-form input:focus,.ccg-formcard .wpcf7-form select:focus,.ccg-reco__form input:focus,.ccg-reco__form select:focus{ outline:none; border-color:var(--ccg-primary); box-shadow:0 0 0 3px var(--ccg-primary-light); }
.ccg-formcard .wpcf7-form .wpcf7-submit,.wpcf7-submit{ width:100%; background:var(--ccg-primary); color:#fff; border:0; padding:.9rem; border-radius:var(--ccg-radius-sm); font-weight:600; font-size:1rem; cursor:pointer; transition:.18s; }
.ccg-formcard .wpcf7-form .wpcf7-submit:hover,.wpcf7-submit:hover{ background:var(--ccg-primary-dark); }
.ccg-formcard .wpcf7-acceptance,.ccg-formcard .wpcf7-list-item{ font-size:.78rem; color:var(--ccg-muted); margin:.2rem 0 .8rem; }
.wpcf7 .wpcf7-not-valid-tip{ font-size:.78rem; }
.wpcf7-response-output{ border-radius:var(--ccg-radius-sm); font-size:.86rem; }

/* ---- Recomendador (quiz) ---- */
.ccg-reco{ min-height:60vh; display:flex; align-items:flex-start; justify-content:center; padding:48px 20px; background:var(--ccg-bg); }
.ccg-reco__card{ width:100%; max-width:620px; background:#fff; border:1px solid var(--ccg-border); border-radius:var(--ccg-radius); box-shadow:var(--ccg-shadow-lg); overflow:hidden; }
.ccg-reco__progress{ height:6px; background:#E9ECF1; }
.ccg-reco__progress span{ display:block; height:100%; background:var(--ccg-primary); transition:width .3s ease; }
.ccg-reco__steps{ padding:34px 32px 30px; }
.ccg-reco__step{ display:none; }
.ccg-reco__step.is-active{ display:block; animation:ccgfade .25s ease; }
@keyframes ccgfade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.ccg-reco__title{ font-size:1.6rem; margin:0 0 .35rem; }
.ccg-reco__sub{ color:var(--ccg-muted); margin:0 0 1.5rem; }
.ccg-reco__options{ display:grid; gap:14px; }
.ccg-reco__options--cols2{ grid-template-columns:repeat(2,1fr); }
.ccg-reco__options--cols3{ grid-template-columns:repeat(3,1fr); }
.ccg-reco__opt{ display:flex; align-items:center; gap:.7rem; text-align:left; background:#fff; border:1px solid var(--ccg-border);
  border-radius:var(--ccg-radius-sm); padding:16px 18px; cursor:pointer; font-weight:600; color:var(--ccg-ink); font-size:.95rem; transition:.16s; }
.ccg-reco__opt .ccg-ico{ width:22px; height:22px; color:var(--ccg-primary); }
.ccg-reco__opt:hover{ border-color:var(--ccg-primary); background:var(--ccg-primary-light); box-shadow:var(--ccg-shadow); }
.ccg-reco__opt.is-selected{ border-color:var(--ccg-primary); box-shadow:0 0 0 2px var(--ccg-primary); }
.ccg-reco__back{ margin-top:1.4rem; background:none; border:0; color:var(--ccg-muted); cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; font-weight:600; }
.ccg-reco__back .ccg-ico{ transform:rotate(180deg); }
.ccg-reco__rating{ font-size:.82rem; color:var(--ccg-muted); margin-bottom:.6rem; }
.ccg-stars{ color:var(--ccg-gold); letter-spacing:.05em; }
.ccg-stars__off{ color:#D6D9DE; }
.ccg-reco__grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 .7rem; }
.ccg-reco__gdpr{ display:flex; gap:.6rem; align-items:flex-start; font-size:.8rem; color:var(--ccg-muted); margin:.4rem 0 1rem; }
.ccg-reco__gdpr input{ margin-top:.15rem; width:auto; }
.ccg-reco__gdpr a{ color:var(--ccg-primary); }
.ccg-reco__msg{ margin-top:1rem; font-size:.9rem; padding:0; }
.ccg-reco__msg.is-error{ color:#B91C1C; }
.ccg-reco__msg.is-ok{ color:var(--ccg-green-dark); background:#ECFDF3; border:1px solid #ABEFC6; padding:14px 16px; border-radius:var(--ccg-radius-sm); }

/* ---- Blog ---- */
.ccg-blog-header{ padding:40px 0 8px; }
.ccg-blog-header h1{ font-size:2.2rem; margin:0 0 .3rem; }
.ccg-blog-header p{ color:var(--ccg-muted); }

/* ---- Cabecera / navegación (Astra) ---- */
.main-header-menu .ccg-nav-cta > a,
.ast-builder-menu .ccg-nav-cta > .menu-link{ background:var(--ccg-primary); color:#fff !important; border-radius:var(--ccg-radius-sm);
  padding:.55rem 1.1rem !important; font-weight:600; transition:.18s; }
.main-header-menu .ccg-nav-cta > a:hover,
.ast-builder-menu .ccg-nav-cta > .menu-link:hover{ background:var(--ccg-primary-dark); color:#fff !important; }

/* La home y el catálogo gestionan su propio ancho: quitamos el padding lateral del contenedor */
.ccg-front .site-content .ast-container,
.ccg-curso-view .site-content .ast-container{ max-width:100%; }

/* ---- Wordmark ---- */
.ccg-wordmark{ font-weight:800; font-size:1.25rem; color:var(--ccg-ink); text-decoration:none; letter-spacing:-.01em; }
.ccg-wordmark b{ color:var(--ccg-primary); font-weight:800; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .ccg-single__layout{ grid-template-columns:1fr; }
  .ccg-single__aside{ position:static; }
  .ccg-catalog__filters{ grid-template-columns:1fr 1fr; }
  .ccg-catalog__filters .ccg-field--search{ grid-column:1 / -1; }
}
@media (max-width:820px){
  .ccg-grid--3{ grid-template-columns:repeat(2,1fr); }
  .ccg-herosearch__row{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .ccg-grid--3{ grid-template-columns:1fr; }
  .ccg-herosearch__row{ grid-template-columns:1fr; }
  .ccg-catalog__filters{ grid-template-columns:1fr; }
  .ccg-reco__options--cols2,.ccg-reco__options--cols3{ grid-template-columns:1fr; }
  .ccg-reco__grid2{ grid-template-columns:1fr; }
  .ccg-reco__steps{ padding:24px 20px; }
  .ccg-hero{ padding:44px 16px 56px; }
  .ccg-single__hero-overlay{ padding:20px; }
}

/* Columnas: que Astra/Gutenberg no las apile en tablet para mantener el grid de 4 */
@media (min-width:782px){
  .ccg-section--segments .wp-block-columns,
  .ccg-section--audience .wp-block-columns{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .ccg-section--audience .wp-block-columns{ grid-template-columns:repeat(2,1fr); }
}