/* ============================================================================
   Se Aprende Hablando — capa visual (hero fotográfico + tarjetas "tipo Netflix")
   ============================================================================ */
:root{ --sh-accent:#0FB5A6; --sh-accent-d:#0a8f83; --sh-ink:#0B2440; --sh-coral:#FF6B5C; }

/* ---- HERO fotográfico con overlay ---- */
.sh-hero{ position:relative; overflow:hidden; }
.sh-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.sh-hero__ov{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,36,64,.95) 0%, rgba(11,36,64,.74) 42%, rgba(11,36,64,.32) 100%); }
.sh-hero__in{ position:relative; z-index:2; }

/* ---- Tarjeta tipo Netflix ---- */
.sh-card{ display:block; background:#fff; border:1px solid #e4eaf0; border-radius:16px; overflow:hidden;
  text-decoration:none; box-shadow:0 10px 30px rgba(11,36,64,.06); transition:transform .18s ease, box-shadow .18s ease; }
.sh-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(11,36,64,.14); }
.sh-card__cover{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#0B2440; }
.sh-card__cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.sh-card:hover .sh-card__cover img{ transform:scale(1.05); }
.sh-card__badges{ position:absolute; top:10px; left:10px; display:flex; gap:6px; z-index:2; }
.sh-pill{ font-family:'Poppins',sans-serif; font-weight:700; font-size:11px; letter-spacing:.02em;
  padding:5px 10px; border-radius:999px; color:#fff; background:rgba(11,36,64,.82); }
.sh-pill--accent{ background:var(--sh-accent); }
.sh-pill--coral{ background:var(--sh-coral); }
.sh-pill--amber{ background:#FFB020; color:#5a3d00; }
.sh-card__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .18s; background:linear-gradient(transparent 55%, rgba(11,36,64,.35)); z-index:1; }
.sh-card:hover .sh-card__play{ opacity:1; }
.sh-card__play i{ font-size:54px; color:#fff; text-shadow:0 6px 20px rgba(0,0,0,.45); }
.sh-card__body{ padding:16px 18px; }
.sh-chip{ display:inline-block; font-size:11px; font-weight:600; color:var(--sh-accent-d);
  background:#eafaf8; padding:3px 9px; border-radius:999px; font-family:'Poppins',sans-serif; }
.sh-card__title{ font-family:'Poppins',sans-serif; font-weight:600; color:var(--sh-ink);
  font-size:16px; margin:9px 0 2px; line-height:1.25; }
.sh-card__desc{ color:#5B7085; font-size:13.5px; margin:0; }
.sh-card__meta{ color:#5B7085; font-size:13px; display:flex; gap:14px; align-items:center;
  border-top:1px solid #eef2f6; margin-top:12px; padding-top:10px; }
.sh-card__meta i{ color:var(--sh-accent); }

/* ---- Grid ---- */
.sh-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px){ .sh-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .sh-grid{ grid-template-columns:1fr; } }
.sh-grid--4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .sh-grid--4{ grid-template-columns:repeat(2,1fr); } }

/* ---- Tiles de categoría ---- */
.sh-cat{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:1/1; display:block;
  text-decoration:none; box-shadow:0 8px 22px rgba(11,36,64,.06); }
.sh-cat img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.sh-cat:hover img{ transform:scale(1.06); }
.sh-cat__lbl{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:14px;
  background:linear-gradient(transparent 40%, rgba(11,36,64,.85)); color:#fff;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:15px; }

/* ---- Testimonios ---- */
.sh-testi{ background:#fff; border:1px solid #e4eaf0; border-radius:16px; padding:22px;
  box-shadow:0 8px 22px rgba(11,36,64,.05); }
.sh-testi__ava{ width:54px; height:54px; border-radius:50%; object-fit:cover; }
.sh-testi__stars{ color:#FFB020; font-size:14px; }

/* ---- Feature illustration ---- */
.sh-feat__img{ width:96px; height:96px; object-fit:contain; }

/* ---- Video de fondo del hero (autoplay, muted, loop, sin controles) ---- */
.sh-hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.sh-hero__bg{ z-index:0; }
.sh-hero__ov{ z-index:1; }
@media (max-width:768px){ .sh-hero__video{ display:none; } } /* en móvil se usa la imagen (poster) por rendimiento */