@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');

:root{
  --brand:#10B981;        /* verde del logo */
  --fg:#0F172A;           /* texto principal (oscuro) */
  --muted:#4B5563;        /* gris contenido */
  --card-bg:#FFFFFF;      /* fondo base de la tarjeta */
  --radius:12px;          /* esquinas suaves */
}

*{box-sizing:border-box}
body{margin:0; font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--fg); background:#fff;}

.section{ max-width:1180px; margin:40px auto; padding:0 16px; }
.section h2{ font-size:clamp(28px,3vw,40px); margin:0 0 16px; }

/* GRID */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media (max-width:1024px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .svc-grid{ grid-template-columns:1fr; }
}

/* CARD (sin imágenes) */
.svc-card{
  position:relative;
  display:block;
  text-decoration:none;
  color:var(--muted);
  background:var(--card-bg);
  border:1.5px solid var(--brand);
  border-radius:var(--radius);
  padding:21px 22px;
  overflow:hidden;                 /* asegura recorte del overlay */
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
  will-change: color, border-color, background-color;
}

/* Overlay de color (sube desde abajo y cubre todo) */
.svc-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--brand);
  transform:translateY(100%);
  transition:transform .35s ease;
  z-index:0;
  backface-visibility:hidden;
}
.svc-card > *{ position:relative; z-index:1; }

/* Títulos y texto */
.svc-title{
  margin:0 0 8px;
  font-weight:700;
  font-size:clamp(17px,1.7vw,20px);
  color:#111827;
  letter-spacing:-.01em;
  line-height:1.15;
}
.svc-desc{ font-size:0.95rem;
  margin:0;
  line-height:1.5;
}

/* Estado hover/focus: overlay cubre todo, texto blanco */
.svc-card:hover::after,
.svc-card:focus-visible::after{ transform:translateY(0); }
.svc-card:hover, .svc-card:focus-visible{
  color:#fff;
  border-color:transparent;
}
.svc-card:hover .svc-title,
.svc-card:focus-visible .svc-title{ color:#fff; }

/* Accesibilidad */
.svc-card:focus-visible{ outline:3px solid rgba(16,185,129,.45); outline-offset:2px; }

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion:reduce){
  .svc-card, .svc-card::after{ transition:none !important; }
}

/* Lista de características por servicio (texto crudo) */
.svc-list{ margin: 8px 0 0; padding-left: 18px; font-size: 0.95rem; line-height: 1.45; }
.svc-list li{ margin: 2px 0; }

/* Cabecera con ícono + título */
.svc-head{ display:flex; align-items:center; gap:10px; }
.svc-ico{ display:inline-flex; width:22px; height:22px; color:var(--brand); flex:0 0 auto; }
.svc-ico svg{ width:100%; height:100%; display:block; shape-rendering:geometricPrecision; }
.svc-card:hover .svc-ico, .svc-card:focus-visible .svc-ico{ color:#FFFFFF; }


/* Icono en esquina superior derecha */
.svc-card{ position:relative; }
.svc-head{ display:block; } /* título ocupa todo el ancho; ícono sale del flujo */
.svc-ico{
  position:absolute; top:12px; right:12px;
  width:22px; height:22px; color:var(--brand);
  z-index:1; display:inline-flex;
}
.svc-ico svg{ width:100%; height:100%; display:block; shape-rendering:geometricPrecision; }
.svc-card:hover .svc-ico, .svc-card:focus-visible .svc-ico{ color:#FFFFFF; }



/* === Servicios: acabado limpio (borde nítido, icono esquina, sin subrayados) — final === */
#svc-v5 .svc-card{
  position:relative;
  display:block;
  text-decoration:none;
  color:var(--muted);
  background:#fff;
  border:1.5px solid var(--brand);
  border-radius:12px;
  background-clip:padding-box;
  overflow:hidden;
  padding:21px 22px;
  transition:color .25s ease,border-color .25s ease,background-color .25s ease;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#svc-v5 .svc-card:hover,
#svc-v5 .svc-card:focus,
#svc-v5 .svc-card *{ text-decoration:none; }

#svc-v5 .svc-ico{
  position:absolute; top:12px; right:12px;
  width:22px; height:22px; color:var(--brand);
  z-index:1; display:inline-flex;
}
#svc-v5 .svc-ico svg{ width:100%; height:100%; display:block; vector-effect:non-scaling-stroke; shape-rendering:geometricPrecision; }

#svc-v5 .svc-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:var(--brand);
  transform:translateY(100%);
  transition:transform .35s ease;
  z-index:0;
}
#svc-v5 .svc-card > *{ position:relative; z-index:1; }

#svc-v5 .svc-title{ margin:0 0 8px; font-weight:700; letter-spacing:-.01em; line-height:1.15; }
#svc-v5 .svc-list{ margin:8px 0 0; padding-left:18px; line-height:1.45; }
#svc-v5 .svc-list li{ margin:2px 0; }

#svc-v5 .svc-card:hover::after,
#svc-v5 .svc-card:focus-visible::after{ transform:translateY(0); }
#svc-v5 .svc-card:hover,
#svc-v5 .svc-card:focus-visible{ color:#fff; border-color:transparent; }
#svc-v5 .svc-card:hover .svc-title,
#svc-v5 .svc-card:focus-visible .svc-title{ color:#fff; }
#svc-v5 .svc-card:hover .svc-ico,
#svc-v5 .svc-card:focus-visible .svc-ico{ color:#fff; }

#svc-v5 .svc-card:focus-visible{ outline:3px solid rgba(16,185,129,.45); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  #svc-v5 .svc-card, #svc-v5 .svc-card::after{ transition:none !important; }
}
/* === Fin del acabado limpio === */