/* Servicios (nov-2026): /services/ y cada página de servicio. Prefijo sv-. Medidas de Zephyr a 1440 y 390 px:
   work-details y about (título e imagen grande), work-overview (bloques pregunta/respuesta), awards (tabla),
   service-section, pricing y work-process (reusados con sus clases de sitio.css). Se carga en todo el sitio:
   todo va con prefijo sv- o dentro de una clase sv-. */

.sv-pagina { overflow-x: clip; }
.sv-pagina a { -webkit-tap-highlight-color: transparent; }

/* ---------- Título de página ---------- */
.sv-ptitulo .ptitulo__botones .btn--claro { box-shadow: inset 0 0 0 1px rgba(7, 7, 28, .16); }
.sv-ptitulo .ptitulo__izq .sub { align-items: flex-start; }
.sv-ptitulo .ptitulo__izq .sub__punto { margin-top: 7px; }
.sv-ptitulo .ptitulo__grande { overflow-wrap: break-word; }

/* ---------- Medio (imagen debajo, video encima cuando arranca) ---------- */
.sv-medio { position: relative; display: block; overflow: hidden; background: #111; }
.sv-medio img, .sv-medio video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Proyecto destacado (imagen grande de work-details: 12 px de lado, radio 24, 66 px bajo el título) ---------- */
.sv-dest { padding: 66px 12px 0; }
.sv-dest__caja { max-width: 1946px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); align-items: center; gap: 40px; padding: 24px 24px 24px 56px; background: var(--negro); border-radius: 24px; color: var(--claro); }
.sv-dest--vertical .sv-dest__caja { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.sv-dest--ancho .sv-dest__caja { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sv-dest__info { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 600px; min-width: 0; }
.sv-dest__nombre { font: 500 74px/80px var(--archivo); letter-spacing: -1.5px; color: var(--claro); overflow-wrap: break-word; max-width: 100%; }
.sv-dest__texto { max-width: 520px; font: 500 18px/26px var(--switzer); letter-spacing: -.2px; color: var(--gris2); }
.sv-dest .btn { margin-top: 8px; }
.sv-dest__media { aspect-ratio: 1 / 1; border-radius: 16px; }
.sv-dest--vertical .sv-dest__media { aspect-ratio: 9 / 16; }
.sv-dest--ancho .sv-dest__media { aspect-ratio: 16 / 10; }

/* ---------- Etiquetas ---------- */
.sv-etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sv-etiquetas li { padding: 9px 13px; border-radius: 100px; background: var(--crema2); color: var(--tinta); font: 400 14px/16px var(--switzer); }
.sv-etiquetas--oscuro li { background: #282828; color: #e0e0e0; }

/* ---------- Bloques pregunta/respuesta (work-overview: 90 px entre bloques, texto de 820 px a la derecha) ---------- */
.sv-bloques { padding: 140px 0 0; }
.sv-bloque { display: flex; justify-content: space-between; align-items: flex-start; gap: 80px; }
.sv-bloque + .sv-bloque { margin-top: 70px; padding-top: 70px; border-top: 1px solid rgba(7, 7, 28, .12); }
.sv-bloque__izq { flex: 0 1 440px; min-width: 0; }
.sv-bloque__izq .sub { align-items: flex-start; }
.sv-bloque__izq .sub__txt { line-height: 24px; }
.sv-bloque__izq .sub__punto { margin-top: 8px; }
.sv-bloque__der { flex: 0 1 820px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.sv-lead { font: 500 24px/30px var(--switzer); letter-spacing: -.2px; color: var(--gris); }
.sv-p { font: 500 18px/26px var(--switzer); letter-spacing: -.1px; color: var(--gris); }
.sv-lead a, .sv-p a, .sv-lista a, .sv-nota a, .sv-tabla__intro a, .sv-razon__texto a { color: var(--azul); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sv-lead a:hover, .sv-p a:hover, .sv-lista a:hover, .sv-nota a:hover { text-decoration-thickness: 2px; }
.sv-bloque__etiquetas { display: flex; flex-direction: column; gap: 14px; }
.sv-lista__titulo { margin-bottom: 14px; font: 500 16px/20px var(--archivo); color: var(--tinta); }
.sv-bloque__etiquetas .sv-lista__titulo { margin-bottom: 0; }
.sv-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
.sv-lista li { position: relative; padding-left: 18px; font: 500 16px/23px var(--switzer); color: var(--tinta); overflow-wrap: break-word; }
.sv-lista li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); }
.sv-lista-caja--oscura .sv-lista__titulo { color: var(--claro); }
.sv-lista-caja--oscura .sv-lista li { color: #d9d9e3; }
.sv-lista-caja--oscura .sv-lista li::before { background: var(--cian); }

/* ---------- Filas oscuras (service-section) con medio cuadrado o sin medio ---------- */
.sv-filas { padding-top: 140px; }
.sv-filas .stitulo__bajada { max-width: 520px; }
.sv-fila--cuadro .servicio__media { width: 400px; aspect-ratio: 1 / 1; }
.sv-fila .servicio__texto a { color: var(--claro); text-decoration: underline; text-underline-offset: 3px; }
.sv-fila--texto .servicio__izq { max-width: none; width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px 60px; align-items: start; }
.sv-fila--texto .servicio__cabeza { grid-row: span 2; }
.sv-fila--texto .servicio__texto { margin-top: 0; max-width: 640px; }
.sv-fila--texto .servicio__etiquetas { max-width: 640px; }

/* ---------- Precios propios (pricing de la portada con 3 o 4 tarjetas) ---------- */
.sv-precios__rejilla { margin-top: 100px; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 22px; }
.sv-precios .plan__precio { overflow-wrap: break-word; }
.sv-precios .stitulo__bajada { max-width: 560px; }
.sv-plan__tiempo { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sv-plan__tiempo dt { font: 500 16px/20px var(--archivo); color: var(--gris); }
.sv-plan__tiempo dd { margin: 0; font: 500 18px/22px var(--archivo); color: var(--tinta); }
.sv-precios__pie { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 30px 60px; }
.sv-factores { padding: 28px; border-radius: 16px; background: var(--crema2); }
.sv-factores .sv-lista { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sv-nota { font: 500 15px/22px var(--switzer); color: var(--gris); }
.sv-precios__pie > .sv-nota:only-child { grid-column: 1 / -1; text-align: center; }

/* ---------- Tabla oscura (awards-recognition: líneas claras, encabezado gris, burbuja al pasar el mouse) ---------- */
.sv-tabla { padding: 140px 12px 0; }
.sv-tabla__caja { max-width: 1946px; margin: 0 auto; padding: 100px 0; border-radius: 24px; background: var(--negro); color: var(--claro); }
.sv-tabla__intro { margin-top: 28px; max-width: 760px; font: 500 18px/26px var(--switzer); color: var(--gris2); }
.sv-tabla__intro a { color: var(--cian); }
.sv-tabla__t { display: block; width: 100%; margin-top: 100px; border-collapse: collapse; }
.sv-tabla__t thead, .sv-tabla__t tbody { display: block; }
.sv-tabla__t tr { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(247, 247, 247, .85); }
.sv-tabla__t--c2 tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sv-tabla__t--c4 tr { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1.25fr); }
.sv-tabla__t thead tr { border-top: 1px solid rgba(247, 247, 247, .85); }
.sv-tabla__t th { padding: 0; text-align: left; font: 400 22px/24px var(--archivo); letter-spacing: -.2px; color: var(--gris2); }
.sv-tabla__t td { padding: 0; font: 500 16px/22px var(--switzer); color: #cfcfda; }
.sv-tabla__t td:first-child { font: 400 22px/26px var(--archivo); letter-spacing: -.2px; color: var(--claro); }
.sv-tabla__t--derecha th:last-child, .sv-tabla__t--derecha td:last-child { text-align: right; }
.sv-tabla__t--derecha td:last-child { font: 500 18px/24px var(--archivo); color: var(--claro); }
.sv-tabla__txt { display: inline-block; max-width: 100%; transition: transform .3s var(--oc), color .3s var(--oc); }
.sv-tabla__t td a:not(.sv-tabla__enlace) { color: inherit; }
.sv-tabla__enlace { color: inherit; text-decoration: none; }
.sv-tabla__enlace::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.sv-tabla__t tbody tr::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--claro); transform: scaleY(0); transition: transform .3s var(--oc); }
.sv-tabla__fila--enlace { cursor: pointer; }
.sv-tabla__enlace:focus-visible { outline: none; }
.sv-tabla__enlace:focus-visible::after { outline: 3px solid var(--cian); outline-offset: -3px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
	.sv-tabla__t tbody tr:hover::before { transform: scaleY(1); transition-duration: .4s; }
	.sv-tabla__t tbody tr:hover td, .sv-tabla__t tbody tr:hover td:first-child, .sv-tabla__t--derecha tbody tr:hover td:last-child { color: var(--tinta); }
	.sv-tabla__t tbody tr:hover td:first-child .sv-tabla__txt { transform: translateX(15px); }
	.sv-tabla__t tbody tr:hover td:last-child .sv-tabla__txt { transform: translateX(-15px); }
}
.sv-tabla__listas { margin-top: 50px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 60px; }
.sv-tabla__listas .sv-lista { grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* ---------- Proceso con los pasos de la página ---------- */
.sv-proceso { padding-bottom: 0; }
.sv-proceso .stitulo__bajada { max-width: 560px; }
@media (min-width: 992px) { .sv-proceso .proceso__rejilla { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.sv-paso__tiempo { align-self: flex-start; margin-top: -6px; padding: 6px 11px; border-radius: 100px; background: rgba(0, 244, 236, .12); color: var(--cian); font: 500 13px/16px var(--archivo); }

/* ---------- Razones / lo que incluye (composición de las preguntas de Zephyr) ---------- */
.sv-razones { padding: 140px 0 0; }
.sv-razones__in { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.sv-razones__titulo { max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.sv-razones__bajada { max-width: 370px; font: 500 16px/22px var(--switzer); color: var(--gris); }
.sv-razones__rejilla { width: 100%; max-width: 820px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 40px; }
.sv-razon { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid rgba(7, 7, 28, .14); }
.sv-razon__num { font: 500 14px/16px var(--archivo); color: var(--azul); }
.sv-razon__titulo { font: 500 22px/26px var(--archivo); letter-spacing: -.3px; color: var(--tinta); }
.sv-razon__texto { font: 500 16px/23px var(--switzer); color: var(--gris); }

/* ---------- Trabajo, planes, reseñas y la página /services/ (espacios entre secciones compartidas) ---------- */
.sv-trabajo.trabajo { padding: 140px 0 0; }
.sv-envoltura--servicios { padding-top: 66px; }
.sv-envoltura--proceso > .proceso { padding-bottom: 0; }
.sv-envoltura--trabajo > .trabajo { padding: 140px 0 0; }
.sv-envoltura--resenas { padding-top: 140px; }

/* ---------- Guías y servicios relacionados ---------- */
.sv-enlaces { padding: 140px 0 0; }
.sv-enlaces__grupo { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.sv-enlaces__grupo + .sv-enlaces__grupo { margin-top: 90px; }
.sv-enlaces__titulo { max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.sv-enlaces__lista { width: 100%; max-width: 820px; list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(7, 7, 28, .14); }
.sv-enlace { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid rgba(7, 7, 28, .14); color: var(--tinta); text-decoration: none; }
.sv-enlace__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; font: 500 20px/24px var(--archivo); letter-spacing: -.2px; overflow-wrap: break-word; }
.sv-enlace__pie { font: 500 14px/18px var(--switzer); letter-spacing: 0; color: var(--gris); }
.sv-enlace__flecha { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--crema2); color: var(--azul); transition: transform .4s var(--oc), background-color .3s var(--oc), color .3s var(--oc); }
@media (hover: hover) and (pointer: fine) {
	.sv-enlace:hover .sv-enlace__flecha { transform: rotate(45deg); background: var(--negro); color: var(--cian); }
}

/* ---------- Llamada final (crema2, radio 24, mismo título que la página) ---------- */
.sv-cta { padding: 140px 12px 0; }
.sv-cta__caja { max-width: 1946px; margin: 0 auto; padding: 90px 0; border-radius: 24px; background: var(--crema2); }
.sv-cta__in { display: flex; justify-content: space-between; align-items: flex-start; gap: 46px; }
.sv-cta__izq { display: flex; flex-direction: column; gap: 16px; max-width: 700px; }
.sv-cta__izq .sub { align-items: flex-start; }
.sv-cta__izq .sub__txt { line-height: 24px; }
.sv-cta__izq .sub__punto { margin-top: 8px; }
.sv-cta__grande { font: 500 88px/92px var(--archivo); letter-spacing: -2px; color: var(--tinta); }
.sv-cta__der { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 28px; }
.sv-cta__texto { font: 500 24px/30px var(--switzer); letter-spacing: -.5px; color: var(--tinta); }
.sv-cta__botones { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-cta__datos { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 500 15px/20px var(--archivo); color: var(--gris); }
.sv-cta__datos a { color: var(--gris); text-decoration: none; }
.sv-cta__datos a:hover { color: var(--tinta); }

/* ==================== Tableta (≤ 991) ==================== */
@media (max-width: 991px) {
	.sv-dest__caja { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 30px; padding: 20px 20px 20px 36px; }
	.sv-dest--vertical .sv-dest__caja { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
	.sv-dest--ancho .sv-dest__caja { grid-template-columns: minmax(0, 1fr); }
	.sv-dest__nombre { font-size: 56px; line-height: 62px; letter-spacing: -1px; }
	.sv-bloques, .sv-filas, .sv-razones, .sv-enlaces { padding-top: 110px; }
	.sv-bloque { gap: 40px; }
	.sv-bloque__izq { flex-basis: 280px; }
	.sv-lista { grid-template-columns: minmax(0, 1fr); }
	.sv-fila--cuadro .servicio__media { width: 100%; max-width: 460px; }
	.sv-fila--texto .servicio__izq { grid-template-columns: minmax(0, 1fr); }
	.sv-fila--texto .servicio__cabeza { grid-row: auto; }
	.sv-precios__rejilla { margin-top: 70px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sv-precios__pie { grid-template-columns: minmax(0, 1fr); }
	.sv-tabla { padding-top: 110px; }
	.sv-tabla__t { margin-top: 70px; }
	.sv-razones__in, .sv-enlaces__grupo { flex-direction: column; gap: 40px; }
	.sv-razones__titulo, .sv-enlaces__titulo { max-width: none; }
	.sv-razones__rejilla, .sv-enlaces__lista { max-width: none; }
	.sv-trabajo.trabajo, .sv-envoltura--trabajo > .trabajo { padding-top: 110px; }
	.sv-cta { padding-top: 110px; }
	.sv-cta__in { flex-direction: column; gap: 26px; }
	.sv-cta__grande { font-size: 68px; line-height: 74px; }
}

/* ==================== Celular (≤ 767) ==================== */
@media (max-width: 767px) {
	.sv-envoltura--servicios { padding-top: 42px; }
	.sv-dest { padding: 42px 9px 0; }
	.sv-dest__caja, .sv-dest--vertical .sv-dest__caja { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 8px 8px 26px; border-radius: 14px; }
	.sv-dest__media { order: -1; border-radius: 10px; }
	.sv-dest--vertical .sv-dest__media { width: 100%; max-width: 300px; justify-self: center; }
	.sv-dest__info { gap: 16px; padding: 0 10px; }
	.sv-dest__nombre { font-size: 40px; line-height: 44px; letter-spacing: -.5px; }
	.sv-dest__texto { font-size: 16px; line-height: 23px; }
	.sv-dest .btn { margin-top: 4px; }

	.sv-bloques, .sv-filas, .sv-razones, .sv-enlaces { padding-top: 80px; }
	.sv-bloque { flex-direction: column; gap: 22px; }
	.sv-bloque + .sv-bloque { margin-top: 50px; padding-top: 50px; }
	.sv-bloque__izq, .sv-bloque__der { flex: none; width: 100%; }
	.sv-bloque__izq .sub__txt { font-size: 18px; line-height: 23px; }
	.sv-bloque__der { gap: 24px; }
	.sv-lead { font-size: 21px; line-height: 30px; }
	.sv-p { font-size: 16px; line-height: 24px; }
	.sv-lista { gap: 12px; }

	.sv-filas { padding-left: 7px; padding-right: 7px; }
	.sv-fila--cuadro .servicio__media { max-width: none; border-radius: 14px; }

	.sv-precios__rejilla { margin-top: 50px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.sv-precios__pie { margin-top: 30px; }
	.sv-factores { padding: 22px 18px; }

	.sv-tabla { padding: 80px 7px 0; }
	.sv-tabla__caja { padding: 50px 0; border-radius: 14px; }
	.sv-tabla__t { margin-top: 50px; }
	.sv-tabla__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.sv-tabla__t tbody { border-top: 1px solid rgba(247, 247, 247, .85); }
	.sv-tabla__t tr { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px 0; }
	.sv-tabla__t td:first-child { font-size: 19px; line-height: 22px; }
	.sv-tabla__t td:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 400 13px/16px var(--archivo); color: var(--gris2); }
	.sv-tabla__t--derecha th:last-child, .sv-tabla__t--derecha td:last-child { text-align: left; }
	.sv-tabla__listas { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 40px; }

	.sv-paso__tiempo { margin-top: -4px; }

	.sv-razones__rejilla { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.sv-razon__titulo { font-size: 20px; line-height: 24px; }

	.sv-trabajo.trabajo, .sv-envoltura--trabajo > .trabajo { padding-top: 80px; }
	.sv-envoltura--resenas { padding-top: 80px; }

	.sv-enlaces__grupo + .sv-enlaces__grupo { margin-top: 60px; }
	.sv-enlace { padding: 18px 0; }
	.sv-enlace__txt { font-size: 18px; line-height: 22px; }

	.sv-cta { padding: 80px 9px 0; }
	.sv-cta__caja { padding: 50px 0; border-radius: 14px; }
	.sv-cta__grande { font-size: 54px; line-height: 63px; letter-spacing: -.5px; }
	.sv-cta__texto { font-size: 21px; line-height: 30px; letter-spacing: -.2px; }
}

@media (max-width: 479px) {
	.sv-ptitulo .ptitulo__grande { font-size: 46px; line-height: 54px; }
	.sv-cta__grande { font-size: 48px; line-height: 56px; }
}

/* Movimiento reducido: sin desplazamientos al pasar el mouse. */
@media (prefers-reduced-motion: reduce) {
	.sv-tabla__txt, .sv-enlace__flecha, .sv-tabla__t tbody tr::before { transition: none; }
}