/* PCCOL F1·P4 — Home: hero compacto (texto + acciones a la vista), "Recomendados para empezar" y herramientas gratuitas visibles.
   Conserva la identidad visual (paleta navy/turquesa, tipografía Sora/Inter). */
@media(min-width:961px){
  .pccol-brand-hero{padding:34px 0 42px}
  .pccol-brand-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:48px;align-items:center;width:min(1180px,calc(100% - 48px))}
  .pccol-brand-video-frame{order:2;width:100%;margin:0}
  .pccol-brand-hero-meta{order:1;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;margin:0;padding:0;gap:22px}
  .pccol-brand-hero-copy{max-width:none}
  .pccol-brand-hero-copy h1{font-size:clamp(30px,3.3vw,46px);line-height:1.1}
  .pccol-brand-hero-copy p{font-size:16px;max-width:560px}
}
@media(min-width:681px) and (max-width:960px){
  .pccol-brand-hero-inner{display:flex;flex-direction:column}
  .pccol-brand-hero-meta{order:1;padding:0 4px 18px}
  .pccol-brand-video-frame{order:2;width:min(100%,640px)}
}
@media(max-width:680px){
  .pccol-brand-hero-inner{display:flex;flex-direction:column}
  .pccol-brand-hero-meta{order:1;padding:6px 3px 20px}
  .pccol-brand-video-frame{order:2;width:min(52vw,210px);margin:0 auto}
}
.pccol-hero-assure{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;padding:0;list-style:none;color:#9fe3d8;font:600 13px/1.4 Inter,system-ui,sans-serif}
.pccol-hero-assure li:before{content:"✓ ";color:#18C9B7}
.pccol-brand-hero-actions{align-items:center}
.pccol-hero-link{color:#bfeee7;font:600 14px/1.4 Inter,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;padding:8px 4px}
.pccol-hero-link:hover{color:#fff}
/* Recomendados */
.pccol-reco{background:#fff}
.pccol-reco-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:6px}
.pccol-reco-card{display:flex;flex-direction:column;border:1px solid var(--pccol-border,#D9E7EE);border-top:4px solid var(--pccol-teal,#0F9D8B);border-radius:16px;background:#fff;padding:18px 18px 16px;box-shadow:0 12px 32px rgba(16,42,67,.05);min-width:0}
.pccol-reco-card .pr-why{font:700 12px/1.3 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--pccol-teal-dark,#0C7C6E);margin-bottom:6px}
.pccol-reco-card h3{font:700 1.12rem/1.25 Sora,Inter,system-ui,sans-serif;color:var(--pccol-navy,#102A43);margin:0 0 8px}
.pccol-reco-card p{font:400 .93rem/1.55 Inter,system-ui,sans-serif;color:var(--pccol-muted,#52677A);margin:0 0 12px}
.pccol-reco-card .pr-price{margin-top:auto;font:800 1.2rem/1.2 Sora,Inter,system-ui,sans-serif;color:var(--pccol-navy,#102A43)}
.pccol-reco-card .pr-price small{font:500 .78rem/1.3 Inter,system-ui,sans-serif;color:var(--pccol-muted,#52677A)}
.pccol-reco-card .r11-card-link{margin-top:12px}
.pccol-reco-free{margin:18px 0 0;padding:14px 16px;background:var(--pccol-ice,#EAF4F8);border-radius:12px;font:500 .95rem/1.6 Inter,system-ui,sans-serif;color:var(--pccol-text,#243B53)}
.pccol-reco-free a{color:var(--pccol-teal-dark,#0C7C6E);font-weight:700;text-underline-offset:3px;white-space:nowrap}
.pccol-reco-note{margin:10px 0 0;font:400 .82rem/1.5 Inter,system-ui,sans-serif;color:var(--pccol-muted,#52677A)}
@media(max-width:900px){.pccol-reco-grid{grid-template-columns:minmax(0,1fr)}}

/* PCCOL 2026-10-22 · Miniaturas oficiales en las tres herramientas recomendadas. */
.pccol-reco-card .pr-media{
  display:block;flex:none;position:relative;
  width:calc(100% + 36px);aspect-ratio:16/9;
  margin:-18px -18px 15px;overflow:hidden;
  border-radius:12px 12px 0 0;
  border-bottom:1px solid #d9e7ee;
  background:#0b2942;
}
.pccol-reco-card .pr-media img{
  width:100%;height:100%;display:block;object-fit:cover;
  object-position:center;transition:transform .2s ease;
}
.pccol-reco-card .pr-media--compare{background:#f6fafc}
.pccol-reco-card .pr-media--compare img{object-fit:contain}
.pccol-reco-card .pr-media:focus-visible{outline:3px solid #18c9b7;outline-offset:-3px}
@media (hover:hover){.pccol-reco-card .pr-media:hover img{transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){.pccol-reco-card .pr-media img{transition:none}}
@media(max-width:680px){.pccol-reco-card .pr-media{margin-bottom:14px}}