/* C170 — "Otros Servicios": pestaña (/Servicios) y ficha (/Servicios/{code}).
   Solo consulta por WhatsApp: sin carrito ni pago. Prefijo .sv-* para no tocar nada del resto. */

.sv-wrap {
    --sv-surface: #120d20;
    --sv-surface2: #17132a;
    --sv-line: rgba(139, 92, 246, .35);
    --sv-mut: #a59fc0;
    --sv-wa: #22c55e;
    --sv-wa2: #16a34a;
    max-width: 1240px;
    margin: 0 auto;
    padding: 26px 20px 60px;
    color: #f4f2ff;
}
.sv-wrap a { text-decoration: none; }

/* ---------- Cabecera de la pestaña ---------- */
.sv-cab h1 { margin: 4px 0 6px; font-size: 32px; font-weight: 900; }
.sv-cab p { margin: 0 0 24px; color: var(--sv-mut); font-size: 15px; }
.sv-vacio { color: var(--sv-mut); padding: 40px 0; text-align: center; }

/* ---------- Tarjetas ---------- */
.sv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sv-card {
    border-radius: 16px; overflow: hidden; background: var(--sv-surface);
    border: 1px solid var(--sv-line); display: flex; flex-direction: column;
    transition: transform .15s, box-shadow .15s;
}
.sv-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, .35), 0 0 0 1px var(--ac); }
.sv-card-img {
    height: 170px; position: relative; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(170px 110px at 50% 50%, color-mix(in srgb, var(--ac) 45%, transparent), transparent), #110c22;
    background-size: cover; background-position: center;
}
.sv-card-img img { max-width: 62%; max-height: 62%; object-fit: contain; }
/* Las imágenes de servicio son carteles 3:4 con texto: se enseñan enteras, sin recortar. */
.sv-card-img.con-foto { height: auto; aspect-ratio: 3 / 4; }
.sv-letra {
    width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 900; color: #fff;
    background: linear-gradient(135deg, var(--ac), #2563eb);
}
.sv-letra-lg { width: 120px; height: 120px; font-size: 56px; border-radius: 28px; }
.sv-tag {
    position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 800; padding: 4px 10px;
    border-radius: 20px; background: rgba(34, 211, 238, .15); color: #67e8f9; border: 1px solid rgba(34, 211, 238, .5);
    text-transform: uppercase; letter-spacing: .3px;
}
.sv-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sv-card h3 { margin: 0; font-size: 17px; font-weight: 800; }
.sv-card h3 a { color: #fff; }
.sv-card p {
    margin: 0; color: var(--sv-mut); font-size: 13px; line-height: 1.45; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-desde { font-size: 12px; color: var(--sv-mut); margin-top: auto; }
.sv-desde b { font-size: 20px; color: #fff; font-weight: 900; }
.sv-card-btns { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

/* ---------- Botones ---------- */
.sv-btn-wa {
    display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; padding: 11px 14px;
    font-weight: 800; font-size: 14px; color: #fff !important;
    background: linear-gradient(95deg, var(--sv-wa), var(--sv-wa2)); box-shadow: 0 6px 18px rgba(34, 197, 94, .25);
    transition: filter .15s, transform .15s;
}
.sv-btn-wa:hover { filter: brightness(1.1); transform: translateY(-1px); }
.sv-btn-wa svg { width: 18px; height: 18px; flex: none; }
.sv-btn-wa-lg { font-size: 16px; padding: 15px 24px; }
.sv-btn-wa-lg svg { width: 21px; height: 21px; }
.sv-btn-ver {
    display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; padding: 10px 14px;
    font-weight: 700; font-size: 13px; color: #c4b5fd !important; border: 1px solid var(--sv-line); background: transparent;
    transition: background .15s;
}
.sv-btn-ver:hover { background: rgba(139, 92, 246, .12); }
.sv-btn-ver svg { width: 17px; height: 17px; }

/* ---------- Ficha ---------- */
.sv-miga { font-size: 13px; color: var(--sv-mut); margin-bottom: 16px; }
.sv-miga a { color: var(--sv-mut); }
.sv-miga a:hover { color: #fff; }
.sv-miga b { color: #fff; }
.sv-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: stretch; }
.sv-hero-img {
    border-radius: 18px; min-height: 330px; position: relative; overflow: hidden; border: 1px solid var(--sv-line);
    background:
        radial-gradient(400px 220px at 30% 30%, color-mix(in srgb, var(--ac) 50%, transparent), transparent 70%),
        radial-gradient(380px 240px at 80% 80%, rgba(37, 99, 235, .5), transparent 70%), #0f0b22;
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
}
.sv-hero-img img { max-width: 55%; max-height: 60%; object-fit: contain; }
.sv-hero:has(.con-foto) { grid-template-columns: minmax(0, 400px) 1fr; }
.sv-hero-img.con-foto { min-height: 0; aspect-ratio: 3 / 4; }
.sv-hero-img .sv-tag { top: 16px; left: 16px; font-size: 12px; }
.sv-info {
    background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: 18px; padding: 24px;
    display: flex; flex-direction: column; gap: 13px; justify-content: center;
}
.sv-info h1 { margin: 0; font-size: 32px; font-weight: 900; line-height: 1.1; }
.sv-lema { margin: 0; color: var(--sv-mut); font-size: 15px; line-height: 1.55; }
.sv-precio {
    display: flex; align-items: baseline; gap: 8px; padding: 14px 16px; border-radius: 14px;
    background: var(--sv-surface2); border: 1px solid rgba(255, 255, 255, .06);
}
.sv-precio small { color: var(--sv-mut); font-size: 13px; }
.sv-precio b { font-size: 34px; font-weight: 900; }
.sv-precio .sv-cotizar { font-size: 26px; }
.sv-precio em { color: var(--sv-mut); font-style: normal; font-size: 14px; }
.sv-nota { font-size: 12.5px; color: var(--sv-mut); margin: -4px 0 0; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-chip {
    font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 20px;
    border: 1px solid rgba(96, 165, 250, .5); color: #93c5fd; background: rgba(96, 165, 250, .07);
}
.sv-chip:first-child { border-color: rgba(34, 197, 94, .45); color: #86efac; background: rgba(34, 197, 94, .07); }
.sv-horario { font-size: 12.5px; color: var(--sv-mut); text-align: center; margin: -4px 0 0; }

.sv-sec-t { font-size: 21px; font-weight: 900; margin: 34px 0 14px; }
.sv-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; }
.sv-cols-uno { grid-template-columns: 1fr; }
.sv-caja { background: var(--sv-surface); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 20px 22px; margin: 0; }
.sv-incluye { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.sv-incluye li { display: flex; gap: 9px; font-size: 14px; line-height: 1.4; }
.sv-incluye li i {
    flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(34, 197, 94, .15);
    border: 1px solid rgba(34, 197, 94, .55); color: #4ade80; font-style: normal; font-size: 12px;
    display: flex; align-items: center; justify-content: center; font-weight: 900;
}
.sv-pasos { display: flex; flex-direction: column; gap: 14px; }
.sv-paso { display: flex; gap: 13px; align-items: flex-start; }
.sv-paso .n {
    flex: none; width: 34px; height: 34px; border-radius: 10px; font-weight: 900;
    display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #8b5cf6, #2563eb);
}
.sv-paso b { display: block; font-size: 14.5px; }
.sv-paso span { color: var(--sv-mut); font-size: 13px; }

.sv-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.sv-plan {
    background: var(--sv-surface); border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px; padding: 20px;
    display: flex; flex-direction: column; gap: 10px; position: relative;
}
.sv-plan-top { border-color: #8b5cf6; box-shadow: 0 0 0 1px rgba(139, 92, 246, .25), 0 10px 30px rgba(139, 92, 246, .18); }
.sv-pop {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 900;
    padding: 4px 12px; border-radius: 20px; background: linear-gradient(95deg, #7c3aed, #2563eb); white-space: nowrap;
}
.sv-plan h3 { margin: 0; font-size: 17px; }
.sv-plan-p { font-size: 26px; font-weight: 900; }
.sv-plan-p small { font-size: 13px; color: var(--sv-mut); font-weight: 600; }
.sv-plan-p .sv-plan-desde { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: -2px; }
.sv-plan ul { margin: 0; padding-left: 18px; color: var(--sv-mut); font-size: 13.5px; line-height: 1.7; flex: 1; }
.sv-plan > a { margin-top: auto; }

.sv-faq details {
    background: var(--sv-surface); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px;
    padding: 14px 18px; margin-bottom: 10px;
}
.sv-faq summary { font-weight: 700; cursor: pointer; }
.sv-faq p { color: var(--sv-mut); margin: 10px 0 0; font-size: 14px; }

.sv-otros { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.sv-otro {
    display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px;
    background: var(--sv-surface); border: 1px solid rgba(255, 255, 255, .08); color: #fff;
    transition: border-color .15s;
}
.sv-otro:hover { border-color: var(--ac); }
.sv-otro-img {
    flex: none; width: 62px; height: 62px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: #110c22; background-size: cover; background-position: center;
}
.sv-otro-img .sv-letra { width: 44px; height: 44px; font-size: 20px; border-radius: 11px; }
.sv-otro-txt b { display: block; font-size: 14.5px; }
.sv-otro-txt small { color: var(--sv-mut); font-size: 12.5px; }

.sv-franja {
    margin-top: 34px; border-radius: 18px; padding: 22px 26px; display: flex; align-items: center;
    justify-content: space-between; gap: 20px;
    background: linear-gradient(95deg, rgba(34, 197, 94, .16), rgba(37, 99, 235, .14)); border: 1px solid rgba(34, 197, 94, .4);
}
.sv-franja b { font-size: 20px; }
.sv-franja span { display: block; color: var(--sv-mut); font-size: 14px; margin-top: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .sv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-hero, .sv-hero:has(.con-foto), .sv-cols { grid-template-columns: 1fr; }
    .sv-hero-img { min-height: 220px; }
    .sv-hero-img.con-foto { width: 100%; max-width: 380px; justify-self: center; }
    .sv-franja { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (max-width: 560px) {
    .sv-wrap { padding: 16px 14px 40px; }
    .sv-cab h1 { font-size: 26px; }
    /* En celular, lista: cartel a la izquierda y datos a la derecha (como las tarjetas del Inicio). */
    .sv-grid { grid-template-columns: 1fr; gap: 12px; }
    .sv-card { flex-direction: row; }
    .sv-card-img, .sv-card-img.con-foto { flex: 0 0 38%; height: auto; min-height: 150px; }
    .sv-card-img .sv-tag { font-size: 9.5px; padding: 3px 7px; top: 6px; left: 6px; }
    .sv-card-body { padding: 12px; gap: 6px; min-width: 0; }
    .sv-card h3 { font-size: 15.5px; }
    .sv-card p { -webkit-line-clamp: 2; font-size: 12.5px; }
    .sv-desde b { font-size: 18px; }
    .sv-card-btns { grid-template-columns: 1fr; gap: 6px; }
    .sv-card-btns .sv-btn-wa { padding: 9px 10px; font-size: 13.5px; }
    .sv-card-btns .sv-btn-ver { padding: 7px 10px; font-size: 12.5px; }
    .sv-info { padding: 18px; }
    .sv-info h1 { font-size: 26px; }
    .sv-precio b { font-size: 28px; }
    .sv-incluye { grid-template-columns: 1fr; }
}