/* Home (WebCaseiro) — ajustes boutique sobre el sistema global (site.css) */

.wcHero{
  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
}

.wcSmall{
  margin-top: 10px;
}

.wcBadges{
  margin-top: 14px;
}

/* Panel lateral del hero */
.wcSidePanel{
  position: sticky;
  top: 88px;
}

.wcSideHeader{
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.wcSideDesc{
  margin: 10px 0 0;
}

.wcSideBlock{
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.wcSideBlock:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.wcSideList{
  margin-top: 8px;
}

.wcSideText{
  margin: 8px 0 0;
}

.wcFullBtn{
  width: 100%;
  text-align: center;
}

/* Grid 4: en pantallas medianas queda más aireado */
.wcGrid4{
  margin-top: 18px;
}

/* Cards: reduce un pelín el “salto” para un estilo más premium */
.wcProducts .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(31, 78, 216, .07);
}

/* CTA panel */
.wcCtaPanel{
  background: #fff;
}

/* -------------------- */
/* PROYECTOS (Home)     */
/* -------------------- */

.wcAnchor{
  position: relative;
  top: -90px;
  display: block;
  height: 0;
}

.wcProjectsLead{
  margin-top: 10px;
  max-width: 70ch;
}

.wcProjectsGrid{
  margin-top: 18px;
}

.wcProjectCard{
  padding: 18px;
}

.wcProjectMedia{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  margin-bottom: 12px;
  background: #fff;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
}

.wcProjectImg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .18s ease, filter .18s ease;
}

.wcProjectCard:hover .wcProjectImg{
  transform: scale(1.04);
  filter: saturate(1.02);
}

.wcProjectTags{
  margin-top: 10px;
}

.wcProjectNote{
  margin-top: 10px;
}

.wcProjectActions{
  margin-top: 14px;
}

/* Placeholder cuando no hay cover */
.wcProjectPlaceholder{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
}

.wcProjectPhIcon{
  width: 56px;
  height: auto;
  opacity: .95;
}

.wcProjectPhText{
  font-weight: 900;
  font-size: 20px;
  font-style: italic;
  letter-spacing: -0.3px;
  display:flex;
  align-items:center;
  transform: skewX(-6deg);
}

.wcProjectPhText .web{ color: #1f4ed8; }
.wcProjectPhText .cas{ color: #ff7a00; }

@media (max-width: 920px){
  .wcSidePanel{
    position: static;
    top: auto;
  }
}