/* ===== Página: Servicios (.svc) ===== */

/* CONTENEDOR GENERAL */
.svc{
  padding-top:50px;
  padding-bottom:80px;
  background-color: var(--page);
}

.svc__container{ 
  max-width:1320px;       /* ANTES 1120px – ahora más ancho para que las tarjetas crezcan */
  margin:0 auto;
  padding:0 24px;
}

/* CABECERA */
.svc__head{ 
  text-align:center; 
  margin-bottom:40px; 
}
.svc__eyebrow{
  display:inline-block; 
  padding:6px 14px; 
  border-radius:999px;
  background:#fff1e6; 
  color:var(--accent-orange);
  font-weight:600; 
  letter-spacing:.05em; 
  text-transform:uppercase; 
  font-size:.9rem;
}
.svc__title{
  margin:18px 0 8px; 
  font-weight:800; 
  color:#000;
  font-size:clamp(28px,3.6vw,40px);
}
.svc__subtitle{
  max-width:720px; 
  margin:0 auto; 
  color:var(--ui-soft);
  font-size:1.05rem; 
  line-height:1.6;
}

/* ==============================
   GRID DE SERVICIOS PRINCIPAL
   ============================== */

.svc__grid{
  display:grid; 
  grid-template-columns:repeat(12,1fr);
  gap:24px; 
  list-style:none; 
  padding:0; 
  margin:40px 0 0;
}

.svc__grid > .svc-card{ grid-column:span 12; }

@media (min-width:640px){ 
  .svc__grid > .svc-card{ grid-column:span 6; } 
}

@media (min-width:960px){ 
  .svc__grid > .svc-card{ grid-column:span 4; } 
}

@media (min-width:1280px){ 
  .svc__grid > .svc-card{ grid-column:span 3; } 
}

/* ==============================
   GRID VERTICAL (ESPECIALIDADES)
   ============================== */

.svc--vertical .svc__subtitle{ 
  max-width:680px; 
}

.svc__grid--vertical{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:26px;
}

.svc__grid--vertical > .svc-card{ 
  grid-column:span 12; 
}

@media (min-width:640px){ 
  .svc__grid--vertical > .svc-card{ grid-column:span 6; } 
}

/* Escritorio grande: 5 tarjetas en una fila, más grandes */
@media (min-width:1100px){
  .svc__grid--vertical{
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 columnas */
    gap:26px;
  }
  .svc__grid--vertical > .svc-card{
    grid-column: span 1;
  }
}

/* ==============================
   TARJETA VERTICAL
   ============================== */

.svc-card--vertical{
  padding:0; 
  overflow:hidden; 
  border-radius:var(--radius);
  box-shadow:var(--shadow); 
  border:1px solid rgba(0,0,0,.05);
  transition:transform .35s ease, box-shadow .35s ease;
}
.svc-card--vertical:hover{ 
  transform:translateY(-6px); 
  box-shadow:0 18px 50px rgba(0,0,0,.14); 
}

/* Media vertical (foto) */
.svc-card--vertical .svc-card__media{
  position:relative; 
  display:block; 
  aspect-ratio:3/4;   /* ANTES 4/5 → ahora un poco más ancha y alta */
  overflow:hidden;
  background:#ddd; 
  border-radius:var(--radius);
}
.svc-card--vertical .svc-card__media img{
  width:100%; 
  height:100%; 
  object-fit:cover; 
  transform:scale(1.02); 
  transition:transform .6s ease;
}
.svc-card--vertical:hover .svc-card__media img{ 
  transform:scale(1.06); 
}

/* Overlay inferior para legibilidad */
.svc-shadow{
  position:absolute; 
  left:0; right:0; 
  bottom:0; 
  height:55%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.58) 100%);
  pointer-events:none;
}

/* Pie de foto */
.svc-caption{
  position:absolute; 
  left:0; right:0; 
  bottom:0;
  padding:18px 16px 16px; 
  color:#fff; 
  display:flex; 
  flex-direction:column; 
  gap:6px; 
  z-index:1;
}
.svc-caption::before{
  content:""; 
  position:absolute; 
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%);
  backdrop-filter:blur(2px);
  border-bottom-left-radius:var(--radius); 
  border-bottom-right-radius:var(--radius);
  z-index:-1;
}
.svc-caption h3{
  margin:0; 
  font-weight:800; 
  letter-spacing:.2px;
  font-size:clamp(18px,1.6vw,20px); 
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.svc-caption p{
  margin:0; 
  font-weight:600; 
  font-size:.98rem; 
  opacity:.97; 
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}

/* Limpiar restos */
.svc-card__body, 
.svc-chips, 
.svc-badge, 
.svc-card__tag, 
.svc-card--media::before{ 
  display:none !important; 
}

/* CTA centrado */
.svc__cta--center{ 
  justify-content:center; 
}